/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-family-serif);
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

/* Canvas - the infinite workspace */
#canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: grab;
    background-color: var(--color-background);
    /* Prevent default touch behaviors (pull-to-refresh, browser zoom) */
    touch-action: none;
}

#canvas:active {
    cursor: grabbing;
}

#canvas.rotating {
    cursor: crosshair;
}

/* Canvas content wrapper - receives transforms for pan/zoom/rotate */
#canvas-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 10000px;
    height: 10000px;
    transform-origin: 0 0;
    will-change: transform;
}

/* Connection lines layer */
.connections-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.connection-line {
    stroke: #c41e3a;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
}

/* Card base styles */
.card {
    position: absolute;
    /* Background moved to card-container for fold transparency */
    transform-origin: center center;
    cursor: default;
    /* GPU acceleration for smooth rotation */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Optimized drop-shadow for corner fold compatibility */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

.card.dragging {
    z-index: 1000;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.card.card-preview {
    opacity: 1.0;
    pointer-events: auto; /* Enable mouse events so we can detect hover */
    z-index: 10000 !important;
    transform: scale(1.0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.card:hover {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.card.pinned {
    cursor: default;
}

/* Card inner structure */
.card-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas:
        "margin-top margin-top margin-top"
        "margin-left content margin-right"
        "margin-bottom margin-bottom margin-bottom";
    grid-template-columns: minmax(60px, var(--margin-column-max-width)) 1fr minmax(60px, var(--margin-column-max-width));
    grid-template-rows: auto 1fr auto;
    /* Background on container for fold transparency */
    background: var(--color-card-background);
    /* Prevent layout issues during rotation */
    contain: layout style;
    backface-visibility: hidden;
    /* Clip any overflow to keep content within card bounds */
    overflow: hidden;
}

/* Main content area */
.card-content {
    grid-area: content;
    padding: var(--card-padding-vertical) var(--card-padding-horizontal);
    overflow-y: auto;
    overflow-x: hidden;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    /* Allow touch scrolling in card content */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.card-content::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* Margin areas */
.card-margin {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-margin);
    line-height: var(--line-height-margin);
    color: var(--color-text-primary);
    min-width: 0;
    overflow: hidden;
    position: relative;
    /* Prevent rendering issues during card rotation */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Container for relative margin items - these scroll with content */
.margin-relative-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    /* Clip items at margin boundaries */
    overflow: hidden;
    /* Ensure container doesn't extend beyond parent */
    max-width: 100%;
    box-sizing: border-box;
}

.margin-relative-container .margin-item {
    pointer-events: auto;
    position: absolute;
    transition: top 0.08s ease-out;
    /* Constrain width with consistent small padding on both sides */
    left: 2px;
    right: 2px;
    overflow: hidden;
}

/* Ensure scrollable content works in relative containers */
.margin-relative-container .margin-item-content {
    position: relative;
}

/* Container for absolute margin items - these stay fixed */
.margin-absolute-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Absolute margin items with pos offset need absolute positioning */
.margin-absolute-container .margin-item[style*="top:"],
.margin-absolute-container .margin-item[style*="left:"] {
    position: absolute;
}

.card-margin-left {
    grid-area: margin-left;
    text-align: right;
    padding-right: var(--margin-padding-inner);
    padding-left: var(--margin-padding-outer);
    padding-top: var(--margin-padding-top);
    padding-bottom: var(--margin-padding-bottom);
    overflow: hidden;
    /* Ensure horizontal content doesn't get clipped */
    min-width: 0;
}

.card-margin-left .margin-item {
    font-size: var(--font-size-margin-small);
}

/* Removed side-specific left positioning for consistency */

.card-margin-left .margin-annotation-title {
    font-size: var(--font-size-margin-title);
    font-weight: var(--font-weight-margin-title);
    letter-spacing: var(--margin-title-letter-spacing);
}

.card-margin-right {
    grid-area: margin-right;
    text-align: left;
    padding-left: var(--margin-padding-inner);
    padding-right: var(--margin-padding-outer);
    padding-top: var(--margin-padding-top);
    padding-bottom: var(--margin-padding-bottom);
    overflow: hidden;
    /* Ensure horizontal content doesn't get clipped */
    min-width: 0;
}

.card-margin-right .margin-item {
    font-size: var(--font-size-margin-small);
}

/* Removed side-specific left positioning for consistency */

.card-margin-right .margin-annotation-title {
    font-size: var(--font-size-margin-title);
    font-weight: var(--font-weight-margin-title);
    letter-spacing: var(--margin-title-letter-spacing);
}

/* ============================================
   Margin Orientation Classes
   ============================================ */

/* Vertical text orientation (for left/right margins) */
.margin-orientation-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* Fill the available width in the margin column */
    width: 100%;
}

/* Left margin vertical text reads bottom-to-top */
.card-margin-left .margin-orientation-vertical {
    transform: rotate(180deg);
    transform-origin: center center;
}

/* Right margin vertical text reads top-to-bottom (no rotation needed) */
.card-margin-right .margin-orientation-vertical {
    /* Default vertical-rl is fine */
}

/* Horizontal text orientation (default readable direction) */
.margin-orientation-horizontal {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: normal;
    word-wrap: break-word;
    /* Constrain width to parent */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Horizontal text in left margin - right aligned with extra left padding to prevent clipping */
.card-margin-left .margin-orientation-horizontal {
    text-align: right;
    padding-left: 4px; /* Add small left padding to prevent text clipping */
}

/* Horizontal text in right margin - left aligned */
.card-margin-right .margin-orientation-horizontal {
    text-align: left;
}

/* Top/bottom margins default to horizontal */
.card-margin-top .margin-item,
.card-margin-bottom .margin-item {
    writing-mode: horizontal-tb;
}

.card-margin-top {
    grid-area: margin-top;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    padding-top: var(--margin-top-padding-top);
    padding-bottom: var(--margin-top-padding-bottom);
    min-height: 20px;
}

.card-margin-bottom {
    grid-area: margin-bottom;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: left;
    padding-bottom: var(--margin-bottom-padding-bottom);
    padding-top: var(--margin-bottom-padding-top);
    padding-left: calc(var(--margin-bottom-padding-horizontal) + 40px); /* Extra left padding to avoid page number */
    padding-right: var(--margin-bottom-padding-horizontal);
    min-height: 32px;
    position: relative;
}

/* Margin item that anchors to content */
.margin-item {
    position: relative;
    transition: transform 0.1s ease-out;
    /* Prevent rendering artifacts during rotation */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Allow item to fill container width */
    width: 100%;
    /* Content scrolling is handled by .margin-item-content */
}

/* Auto-generated anchor for relative margin positioning */
.margin-anchor {
    display: block;
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
}

/* Page number styling */
.page-number {
    font-size: var(--font-size-page-number);
    color: var(--color-text-primary);
    font-style: normal;
}

/* Absolute positioned page number at bottom-left corner */
.card-page-number-absolute {
    position: absolute;
    bottom: 12px;
    left: 16px;
    font-size: var(--font-size-page-number);
    color: var(--color-text-primary);
    font-style: normal;
    z-index: 4; /* Above card content (z-index 1-3) but below fold effects (z-index 5) */
    pointer-events: none; /* Don't interfere with margin interactions */
}

/* Corner handles for rotation/scaling */
.card-handle {
    position: absolute;
    width: 48px;
    height: 48px;
    z-index: 10;
    opacity: 0;
    transition: opacity var(--transition-normal);
    /* Transform origin at center for counter-rotation */
    transform-origin: center center;
    /* Prevent default touch behaviors on handles */
    touch-action: none;
}

/* Visual indicator for scale handles */
.card-handle::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-text-primary);
    opacity: 0.4;
    display: var(--handle-display, block);
}

.card-handle-tl::after { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.card-handle-tr::after { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.card-handle-bl::after { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.card-handle-br::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }

.card:hover .card-handle {
    opacity: 1;
}

/* Position scale handles on corners */
.card-handle-tl {
    top: -12px;
    left: -12px;
    cursor: nwse-resize;
}

.card-handle-tr {
    top: -12px;
    right: -12px;
    cursor: nesw-resize;
}

.card-handle-bl {
    bottom: -12px;
    left: -12px;
    cursor: nesw-resize;
}

.card-handle-br {
    bottom: -12px;
    right: -12px;
    cursor: nwse-resize;
}

/* Rotate handles (outside corners) */
.card-rotate-handle {
    position: absolute;
    width: 48px;
    height: 48px;
    z-index: 9;
    opacity: 0;
    transition: opacity var(--transition-normal);
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>'), auto;
    /* Transform origin at center for counter-rotation */
    transform-origin: center center;
    /* Prevent default touch behaviors on handles */
    touch-action: none;
}

/* Visual indicator for rotate handles - curved arrow */
.card-rotate-handle::after {
    content: '↻';
    position: absolute;
    font-size: 14px;
    color: var(--color-text-primary);
    opacity: 0.4;
    display: var(--handle-display, block);
}

.card-rotate-handle-tl::after { top: 8px; left: 8px; transform: rotate(-90deg); }
.card-rotate-handle-tr::after { top: 8px; right: 8px; transform: rotate(0deg); }
.card-rotate-handle-bl::after { bottom: 8px; left: 8px; transform: rotate(180deg); }
.card-rotate-handle-br::after { bottom: 8px; right: 8px; transform: rotate(90deg); }

.card:hover .card-rotate-handle {
    opacity: 1;
}

/* Position rotate handles just outside the scale handles */
.card-rotate-handle-tl {
    top: -24px;
    left: -24px;
}

.card-rotate-handle-tr {
    top: -24px;
    right: -24px;
}

.card-rotate-handle-bl {
    bottom: -24px;
    left: -24px;
}

.card-rotate-handle-br {
    bottom: -24px;
    right: -24px;
}

/* Drag handles (inside corners) */
.card-drag-handle {
    position: absolute;
    width: 48px;
    height: 48px;
    z-index: 10;
    opacity: 0;
    transition: opacity var(--transition-normal);
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20"/></svg>') 12 12, move;
    /* Transform origin at center for counter-rotation */
    transform-origin: center center;
    /* Prevent default touch behaviors on handles */
    touch-action: none;
}

/* Visual indicator for drag handles - move cross icon */
.card-drag-handle::after {
    content: '✥';
    position: absolute;
    font-size: 16px;
    color: var(--color-text-primary);
    opacity: 0.4;
    display: var(--handle-display, block);
}

.card-drag-handle-tl::after { top: 16px; left: 16px; }
.card-drag-handle-tr::after { top: 16px; right: 16px; }
.card-drag-handle-bl::after { bottom: 16px; left: 16px; }
.card-drag-handle-br::after { bottom: 16px; right: 16px; }

.card-drag-handle:active {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20"/></svg>') 12 12, move;
}

.card:hover .card-drag-handle {
    opacity: 1;
}

/* Position drag handles inside the card corners */
.card-drag-handle-tl {
    top: 12px;
    left: 12px;
}

.card-drag-handle-tr {
    top: 12px;
    right: 12px;
}

.card-drag-handle-bl {
    bottom: 12px;
    left: 12px;
}

.card-drag-handle-br {
    bottom: 12px;
    right: 12px;
}

/* Top middle handle for pin/delete */
.card-top-handle {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: 11;
}

.card:hover .card-top-handle {
    opacity: 1;
}

.card-action-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: var(--color-card-background);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-action-btn:hover {
    background: var(--color-background);
}

.card-action-btn.external-btn {
    text-decoration: none;
    font-size: 12px;
}

/* Typography within cards */
.card-content h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-h1);
    margin-bottom: var(--heading-margin-h1);
    text-align: center;
}

.card-content h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-h2);
    margin-bottom: var(--heading-margin-h2);
}

.card-content h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    margin-bottom: var(--heading-margin-h3);
}

.card-content p {
    margin-bottom: var(--paragraph-margin);
    text-align: left;
}

.card-content p.centered {
    text-align: center;
}

.card-content ul, .card-content ol {
    margin-left: var(--list-margin-left);
    margin-bottom: var(--list-margin-bottom);
}

.card-content li {
    margin-bottom: var(--list-item-margin);
}

.card-content a {
    color: var(--color-link);
    text-decoration: underline;
}

/* Card links - clickable links to other cards */
.card-link {
    cursor: pointer;
    font-weight: bold;
    font-style: italic;
    transition: color var(--transition-fast);
}

.card-link:hover {
    color: var(--color-link-hover);
}

/* Jump links - intra-card navigation */
.jump-link {
    cursor: pointer;
    font-weight: normal;
    font-style: normal;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    padding: 1px 3px;
    border-radius: 2px;
}

.jump-link:hover {
    color: var(--color-link-hover);
    background-color: rgba(0, 0, 0, 0.05);
}

/* Superscript jump symbols */
sup.jump-link {
    font-size: 0.7em;
    vertical-align: super;
    padding: 0;
    margin-left: 2px;
}

/* Superscript arrows within jump links */
.jump-link sup {
    font-size: 0.5em;
    vertical-align: super;
}

/* Jump target highlight effect */
.jump-target-highlight {
    background-color: var(--jump-highlight-color);
    border-radius: 2px;
    transition: background-color 0.2s ease-in;
    animation: jump-pulse 0.4s ease-out;
}

.jump-target-highlight.fade-out {
    background-color: transparent;
    transition: background-color var(--jump-highlight-fade-duration) ease-out;
}

/* Eye-catching pulse animation */
@keyframes jump-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.card-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.card-content blockquote {
    border-left: var(--blockquote-border-width) solid var(--blockquote-border-color);
    padding-left: var(--blockquote-padding);
    margin: var(--blockquote-margin) 0;
    font-style: italic;
}

.card-content hr {
    border: none;
    border-top: 1px solid var(--color-text-tertiary, #ccc);
    margin: var(--paragraph-margin) 0;
}

.card-content code {
    font-family: var(--font-family-mono);
    background: var(--code-background);
    padding: var(--code-padding);
    font-size: var(--font-size-code);
}

.card-content pre {
    background: var(--code-background);
    padding: var(--code-block-padding);
    overflow-x: auto;
    margin-bottom: var(--paragraph-margin);
}

.card-content pre code {
    background: none;
    padding: 0;
}

/* Margin annotation styling */
.margin-annotation {
    font-size: var(--font-size-margin);
    line-height: var(--line-height-margin);
}

/* ============================================
   Custom Styled Blocks & Inline Styles
   ============================================ */

/* Styled block - div with custom inline styles */
.styled-block {
    /* Base styles that can be overridden by inline styles */
    display: block;
}

/* Styled inline span - inherits context but allows overrides */
.styled-inline {
    /* No base styles needed - all styling comes from inline */
}

/* Center block - centers content both horizontally and vertically */
.center-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: 100%;
}

.margin-annotation .annotation-marker {
    font-size: 9px;
    vertical-align: super;
    margin-right: 2px;
}

.margin-annotation-title {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 4px;
}

.margin-annotation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.margin-annotation li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 2px;
}

.margin-annotation li::before {
    content: "·";
    position: absolute;
    left: 4px;
}

/* ============================================
   Scrollable & Resizable Margin Items
   ============================================ */

/* Base content wrapper - all margin items scroll their content */
.margin-item-content {
    display: block;
    scroll-behavior: smooth;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Contain scroll within this element, don't propagate to parents */
    overscroll-behavior: contain;
    /* Ensure pointer events work for scrolling */
    pointer-events: auto;
    /* Default overflow behavior */
    overflow: auto;
    /* Allow touch scrolling */
    touch-action: pan-y pan-x;
    -webkit-overflow-scrolling: touch;
}

/* ---- Horizontal text in margins ---- */
/* Width fills available space, height is constrained and scrollable */
.margin-orientation-horizontal .margin-item-content {
    max-height: 300px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* Ensure text wraps properly in narrow columns */
    word-break: break-word;
    hyphens: auto;
}

.card-margin-left .margin-orientation-horizontal .margin-item-content,
.card-margin-right .margin-orientation-horizontal .margin-item-content {
    /* Constrain width and allow vertical scrolling */
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* Increase max-height since horizontal text wraps more */
    max-height: 400px;
    box-sizing: border-box;
}

/* ---- Vertical text in margins ---- */
/* Height fills available space (up to max), width is constrained */
/* Width should adapt to margin column width */
.margin-orientation-vertical .margin-item-content {
    max-height: 300px;
    max-width: 100%;
    width: 100%;
    overflow: auto;
    /* Consistent padding for both margins */
    padding: 4px 2px;
    box-sizing: border-box;
}

/* Vertical text in right margin - text starts at physical top */
.card-margin-right .margin-orientation-vertical .margin-item-content {
    padding-top: 4px;
    padding-left: 2px;
}

/* Vertical text in left margin (rotated 180deg) - text starts at physical bottom (visual top) */
.card-margin-left .margin-orientation-vertical .margin-item-content {
    padding-bottom: 4px;
    padding-right: 2px;
}

/* Subtle scrollbar styling */
.margin-item-content::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

.margin-item-content::-webkit-scrollbar-track {
    background: transparent;
}

.margin-item-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.margin-item-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ============================================
   Margin Item Resize Handles
   ============================================ */

/* Resize handle for individual margin items */
.margin-item-resize-handle {
    position: absolute;
    background: transparent;
    z-index: 5;
    opacity: 0;
    transition: opacity var(--transition-normal), background var(--transition-normal);
    /* Prevent default touch behaviors */
    touch-action: none;
}

.margin-item:hover .margin-item-resize-handle {
    opacity: 1;
}

.margin-item-resize-handle:hover,
.margin-item-resize-handle.active {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

/* Horizontal resize handle (for adjusting width) - used in left/right margins */
.margin-item-resize-handle.resize-horizontal {
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
}

/* Vertical resize handle (for adjusting height) - used in top/bottom margins and vertical text */
.margin-item-resize-handle.resize-vertical {
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
}

/* Left margin items: resize handle on right side */
.card-margin-left .margin-item-resize-handle.resize-horizontal {
    right: -4px;
}

/* Right margin items: resize handle on left side */
.card-margin-right .margin-item-resize-handle.resize-horizontal {
    left: -4px;
}

/* Top margin items: resize handle on bottom */
.card-margin-top .margin-item-resize-handle.resize-vertical {
    bottom: -4px;
}

/* Bottom margin items: resize handle on top */
.card-margin-bottom .margin-item-resize-handle.resize-vertical {
    top: -4px;
}

/* For vertical text, height resize handle at bottom */
.margin-orientation-vertical .margin-item-resize-handle.resize-vertical {
    bottom: -4px;
}

/* Margin item resizing state */
.margin-item.resizing {
    z-index: 100;
}

/* ============================================
   Margin Area Resize Handles
   ============================================ */

/* Base resize handle - invisible until hover */
.margin-resize-handle {
    position: absolute;
    background: transparent;
    z-index: 10;
    opacity: 0;
    transition: opacity var(--transition-normal), background var(--transition-normal);
    /* Prevent default touch behaviors */
    touch-action: none;
}

.card:hover .margin-resize-handle {
    opacity: 1;
}

.margin-resize-handle:hover,
.margin-resize-handle.active {
    background: rgba(0, 0, 0, 0.08);
}

/* Left margin resize handle - vertical bar on right edge of left margin */
.margin-resize-left {
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    /* Position at the right edge of left margin column */
    grid-area: margin-left;
    justify-self: end;
    margin-right: -4px;
}

/* Right margin resize handle - vertical bar on left edge of right margin */
.margin-resize-right {
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    /* Position at the left edge of right margin column */
    grid-area: margin-right;
    justify-self: start;
    margin-left: -4px;
}

/* Top margin resize handle - horizontal bar on bottom edge of top margin */
.margin-resize-top {
    left: 0;
    right: 0;
    top: 0;
    height: 8px;
    cursor: ns-resize;
    /* Position at the bottom edge of top margin row */
    grid-area: margin-top;
    align-self: end;
    margin-bottom: -4px;
}

/* Bottom margin resize handle - horizontal bar on top edge of bottom margin */
.margin-resize-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    cursor: ns-resize;
    /* Position at the top edge of bottom margin row */
    grid-area: margin-bottom;
    align-self: start;
    margin-top: -4px;
}

/* Vertical text in margins */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.vertical-text-reversed {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Large section titles (like "Photography") */
.section-title {
    font-size: 42px;
    font-weight: normal;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 3px;
    font-family: var(--font-family-serif);
}

/* Image cards */
.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-image-container {
    position: relative;
    overflow: hidden;
    height: calc(100% - 50px);
}

.card-image-caption {
    padding: 12px 16px;
    font-size: 12px;
    text-align: center;
    font-style: italic;
}

/* Embed cards (iframe) */
.card-embed-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    font-size: 11px;
    flex-shrink: 0;
}

.card-embed-url {
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.card-embed-container {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;
    background: var(--color-background);
}

.card-embed-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

.card-embed-fallback {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-card-background);
    color: var(--color-text-secondary);
    text-align: center;
    padding: 20px;
}

.card-embed-fallback.visible {
    display: flex;
}

.card-embed-fallback p {
    margin-bottom: 12px;
    font-size: 14px;
}

.card-embed-fallback a {
    color: var(--color-text-primary);
    text-decoration: underline;
    font-weight: bold;
}

/* Selection highlight for text */
::selection {
    background: var(--color-selection);
}

/* Reading stats indicator */
.card-reading-stats {
    position: absolute;
    bottom: var(--margin-bottom-padding-bottom, 12px);
    right: var(--margin-bottom-padding-horizontal, 16px);
    font-size: var(--font-size-page-number, 11px);
    color: var(--color-text-primary);
    font-style: normal;
    z-index: 5;
}

/* Tags display in cards - inline version for [[tags]] directive */
.card-tags-inline {
    text-align: center;
    margin: 12px 0;
    font-size: 0; /* Remove whitespace between inline elements */
}

.card-tags-inline .card-tag {
    font-weight: bold;
    font-size: 10px; /* Restore font-size */
    color: var(--color-text-primary);
    cursor: pointer;
    transition: color 0.2s ease;
    display: inline-block; /* Ensure consistent spacing */
}

.card-tags-inline .card-tag:hover {
    color: var(--color-text-secondary);
}

/* Legacy tags display (now unused) */
.card-tags {
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.card-tag {
    display: inline;
    font-weight: bold;
    font-size: 10px;
    color: var(--color-text-primary);
    cursor: pointer;
    margin-right: 8px;
    transition: color 0.2s ease;
}

.card-tag:hover {
    color: var(--color-text-secondary);
}

/* Bibliography and Citation Styles */
.bibliography {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.bibliography h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.bibliography-list {
    list-style: decimal;
    margin-left: 20px;
    margin-bottom: 0;
}

.bibliography-item {
    margin-bottom: 8px;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.bibliography-item a {
    color: var(--color-link);
    text-decoration: none;
    font-weight: normal;
}

.bibliography-item a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.citation-url {
    color: var(--color-text-secondary);
    font-size: 0.9em;
    font-style: italic;
}

.citation-link {
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.citation-link:hover {
    color: var(--color-link-hover);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-content {
        padding: 20px 24px;
        font-size: 14px;
    }
}

/* ============================================
   Corner Fold Effect
   ============================================ */

:root {
    --fold-size: 40px;
}

/* Base fold element */
.card-corner-fold {
    position: absolute;
    width: var(--fold-size);
    height: var(--fold-size);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transform: scale(0);
    transition: opacity var(--transition-slow), transform var(--transition-slow), filter var(--transition-slow);
    overflow: visible; /* Allow shadow to extend beyond */
}

/* Transform origins for each corner */
.card-corner-fold-tl { top: 0; left: 0; transform-origin: 0% 0%; }
.card-corner-fold-tr { top: 0; right: 0; transform-origin: 100% 0%; }
.card-corner-fold-bl { bottom: 0; left: 0; transform-origin: 0% 100%; }
.card-corner-fold-br { bottom: 0; right: 0; transform-origin: 100% 100%; }

/* Base pseudo-elements */
.card-corner-fold::before,
.card-corner-fold::after {
    content: '';
    position: absolute;
}

/* Fold flap - the folded paper */
.card-corner-fold::after {
    width: 100%;
    height: 100%;
}

/* ---- Bottom Right Corner ---- */
.card-corner-fold-br::before {
    display: none;
}

.card-corner-fold-br::after {
    top: 0;
    left: 0;
    background: linear-gradient(
        315deg,
        var(--fold-gradient-start) 0%,
        var(--fold-gradient-mid1) 8%,
        var(--fold-gradient-mid2) 20%,
        var(--fold-gradient-mid3) 40%,
        var(--fold-gradient-mid4) 70%,
        var(--fold-gradient-end) 100%
    );
    clip-path: polygon(0% 100%, 100% 0%, 0% 0%);
}

/* ---- Bottom Left Corner ---- */
.card-corner-fold-bl::before {
    display: none;
}

.card-corner-fold-bl::after {
    top: 0;
    left: 0;
    background: linear-gradient(
        45deg,
        var(--fold-gradient-start) 0%,
        var(--fold-gradient-mid1) 8%,
        var(--fold-gradient-mid2) 20%,
        var(--fold-gradient-mid3) 40%,
        var(--fold-gradient-mid4) 70%,
        var(--fold-gradient-end) 100%
    );
    clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
}

/* ---- Top Right Corner ---- */
.card-corner-fold-tr::before {
    display: none;
}

.card-corner-fold-tr::after {
    top: 0;
    left: 0;
    background: linear-gradient(
        225deg,
        var(--fold-gradient-start) 0%,
        var(--fold-gradient-mid1) 8%,
        var(--fold-gradient-mid2) 20%,
        var(--fold-gradient-mid3) 40%,
        var(--fold-gradient-mid4) 70%,
        var(--fold-gradient-end) 100%
    );
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

/* ---- Top Left Corner ---- */
.card-corner-fold-tl::before {
    display: none;
}

.card-corner-fold-tl::after {
    top: 0;
    left: 0;
    background: linear-gradient(
        135deg,
        var(--fold-gradient-start) 0%,
        var(--fold-gradient-mid1) 8%,
        var(--fold-gradient-mid2) 20%,
        var(--fold-gradient-mid3) 40%,
        var(--fold-gradient-mid4) 70%,
        var(--fold-gradient-end) 100%
    );
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}

/* ============================================
   Corner Fold Hover States (using :has())
   ============================================ */

/* Corner fold hover states */

/* Keyframe animations for clip-path - synced with fold animation */
@keyframes clip-corner-br {
    0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%); }
    100% { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--fold-size)), calc(100% - var(--fold-size)) 100%, 0% 100%); }
}

@keyframes clip-corner-bl {
    0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%); }
    100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, var(--fold-size) 100%, 0% calc(100% - var(--fold-size))); }
}

@keyframes clip-corner-tr {
    0% { clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 0% 100%); }
    100% { clip-path: polygon(0% 0%, calc(100% - var(--fold-size)) 0%, 100% var(--fold-size), 100% 100%, 0% 100%); }
}

@keyframes clip-corner-tl {
    0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); }
    100% { clip-path: polygon(var(--fold-size) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--fold-size)); }
}

/* Reverse animations for unfold */
@keyframes clip-corner-br-unfold {
    0% { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--fold-size)), calc(100% - var(--fold-size)) 100%, 0% 100%); }
    100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%); }
}

@keyframes clip-corner-bl-unfold {
    0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, var(--fold-size) 100%, 0% calc(100% - var(--fold-size))); }
    100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%); }
}

@keyframes clip-corner-tr-unfold {
    0% { clip-path: polygon(0% 0%, calc(100% - var(--fold-size)) 0%, 100% var(--fold-size), 100% 100%, 0% 100%); }
    100% { clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

@keyframes clip-corner-tl-unfold {
    0% { clip-path: polygon(var(--fold-size) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--fold-size)); }
    100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); }
}

/* Unfold animations triggered by class */
.card.unfolding-br > .card-container {
    animation: clip-corner-br-unfold 0.5s ease forwards;
}

.card.unfolding-bl > .card-container {
    animation: clip-corner-bl-unfold 0.5s ease forwards;
}

.card.unfolding-tr > .card-container {
    animation: clip-corner-tr-unfold 0.5s ease forwards;
}

.card.unfolding-tl > .card-container {
    animation: clip-corner-tl-unfold 0.5s ease forwards;
}

/* Fold animations triggered by class or hover */
.card.folding-br > .card-container,
.card:has(.card-handle-br:hover) > .card-container,
.card:has(.card-rotate-handle-br:hover) > .card-container {
    animation: clip-corner-br 0.4s ease forwards;
}

.card.folding-bl > .card-container,
.card:has(.card-handle-bl:hover) > .card-container,
.card:has(.card-rotate-handle-bl:hover) > .card-container {
    animation: clip-corner-bl 0.4s ease forwards;
}

.card.folding-tr > .card-container,
.card:has(.card-handle-tr:hover) > .card-container,
.card:has(.card-rotate-handle-tr:hover) > .card-container {
    animation: clip-corner-tr 0.4s ease forwards;
}

.card.folding-tl > .card-container,
.card:has(.card-handle-tl:hover) > .card-container,
.card:has(.card-rotate-handle-tl:hover) > .card-container {
    animation: clip-corner-tl 0.4s ease forwards;
}

/* Bottom Right - fold casts shadow onto card */
.card:has(.card-handle-br:hover) .card-corner-fold-br,
.card:has(.card-rotate-handle-br:hover) .card-corner-fold-br,
.card.folding-br .card-corner-fold-br {
    filter: drop-shadow(-5px -5px 4px rgba(0, 0, 0, 0.15));
}

/* Bottom Left - fold casts shadow onto card */
.card:has(.card-handle-bl:hover) .card-corner-fold-bl,
.card:has(.card-rotate-handle-bl:hover) .card-corner-fold-bl,
.card.folding-bl .card-corner-fold-bl {
    filter: drop-shadow(5px -5px 4px rgba(0, 0, 0, 0.15));
}

/* Top Right - fold casts shadow onto card */
.card:has(.card-handle-tr:hover) .card-corner-fold-tr,
.card:has(.card-rotate-handle-tr:hover) .card-corner-fold-tr,
.card.folding-tr .card-corner-fold-tr {
    filter: drop-shadow(-5px 5px 4px rgba(0, 0, 0, 0.15));
}

/* Top Left - fold casts shadow onto card */
.card:has(.card-handle-tl:hover) .card-corner-fold-tl,
.card:has(.card-rotate-handle-tl:hover) .card-corner-fold-tl,
.card.folding-tl .card-corner-fold-tl {
    filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.15));
}

/* Show fold on corner hover or when folding class is active */

/* Bottom Right */
.card:has(.card-handle-br:hover) .card-corner-fold-br,
.card:has(.card-rotate-handle-br:hover) .card-corner-fold-br,
.card.folding-br .card-corner-fold-br {
    opacity: 1;
    transform: scale(1);
}

/* Bottom Left */
.card:has(.card-handle-bl:hover) .card-corner-fold-bl,
.card:has(.card-rotate-handle-bl:hover) .card-corner-fold-bl,
.card.folding-bl .card-corner-fold-bl {
    opacity: 1;
    transform: scale(1);
}

/* Top Right */
.card:has(.card-handle-tr:hover) .card-corner-fold-tr,
.card:has(.card-rotate-handle-tr:hover) .card-corner-fold-tr,
.card.folding-tr .card-corner-fold-tr {
    opacity: 1;
    transform: scale(1);
}

/* Top Left */
.card:has(.card-handle-tl:hover) .card-corner-fold-tl,
.card:has(.card-rotate-handle-tl:hover) .card-corner-fold-tl,
.card.folding-tl .card-corner-fold-tl {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   LaTeX Math Styling
   ============================================ */

/* Display math containers */
.katex-display-container {
    margin: 16px 0;
    text-align: center;
}

.katex-display-container .katex {
    font-size: 1.1em;
}

.katex-math {
    font-size: inherit;
}

/* Display math in margins should be smaller */
.card-margin .katex-display-container .katex {
    font-size: 0.9em;
}

/* Inline math in margins */
.card-margin .katex-math {
    font-size: 0.85em;
}

/* Error styling for failed LaTeX */
.katex-math[style*="color: red"] {
    font-family: var(--font-family-mono);
    background-color: rgba(255, 0, 0, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
}

/* ============================================
   Image Block Styling
   ============================================ */

/* Base image block container */
.image-block {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
}

/* Alignment options */
.image-align-left {
    align-items: flex-start;
}

.image-align-center {
    align-items: center;
}

.image-align-right {
    align-items: flex-end;
}

/* Image styling */
.image-block-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.image-block-img:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Caption styling */
.image-block-caption {
    margin-top: 8px;
    font-size: var(--font-size-base, 14px);
    line-height: var(--line-height-base, 1.5);
    color: var(--color-text-secondary, #666);
    font-style: italic;
    text-align: center;
    max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-block {
        margin: 12px 0;
    }

    .image-block-caption {
        font-size: 12px;
        margin-top: 6px;
    }
}

/* ============================================
   Editor Card Styles
   ============================================ */

.editor-card {
    min-width: 400px;
    min-height: 300px;
    background: var(--color-card-background);
}

.editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--color-card-background);
    border-radius: 2px;
    overflow: hidden;
}

/* Editor Toolbar */
.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.editor-toolbar-buttons {
    display: flex;
    gap: 4px;
}

.editor-filename {
    flex: 1;
    max-width: 200px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-family-serif);
    font-size: 12px;
    background: var(--color-card-background);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color 0.2s ease;
}

.editor-filename:focus {
    border-color: var(--color-text-secondary);
}

.editor-filename.error {
    border-color: #c41e3a;
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.editor-btn {
    padding: 4px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-card-background);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font-family-serif);
    transition: background 0.2s ease, transform 0.1s ease;
}

.editor-btn:hover {
    background: var(--color-background);
}

.editor-btn:active {
    transform: scale(0.95);
}

.editor-btn.close-btn {
    padding: 4px 10px;
    font-size: 16px;
    line-height: 1;
}

/* Source-only editor (no split view) */
.editor-source-only {
    min-width: 350px;
    min-height: 300px;
}

.editor-source-pane {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.editor-source-pane .editor-textarea {
    flex: 1;
    width: 100%;
    padding: 16px;
    border: none;
    resize: none;
    font-family: var(--font-family-serif);
    font-size: 13px;
    line-height: 1.6;
    background: var(--color-card-background);
    color: var(--color-text-primary);
    overflow-y: auto;
    outline: none;
}

/* Insert Toolbar */
.editor-insert-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-card-background);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.insert-group {
    display: flex;
    gap: 2px;
    padding-right: 8px;
    border-right: 1px solid var(--color-border);
}

.insert-group:last-child {
    border-right: none;
    padding-right: 0;
}

.insert-btn {
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-card-background);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font-family-mono);
    transition: background 0.15s ease;
    white-space: nowrap;
}

.insert-btn:hover {
    background: var(--color-background);
}

.insert-btn:active {
    transform: scale(0.95);
}

.dropdown-toggle {
    position: relative;
}

/* Dropdown Container */
.editor-dropdowns {
    position: relative;
}

.insert-dropdown {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.insert-dropdown.open {
    display: block;
}

.dropdown-section {
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border);
}

.dropdown-section:last-child {
    border-bottom: none;
}

.dropdown-title {
    padding: 4px 12px;
    font-size: 10px;
    font-weight: bold;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--color-text-primary);
    font-size: 12px;
    font-family: var(--font-family-serif);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: var(--color-background);
}

/* Legacy split view styles (kept for backwards compatibility) */
/* Split View */
.editor-split {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.editor-source {
    display: flex;
    min-width: 150px;
    overflow: hidden;
}

.editor-textarea {
    flex: 1;
    width: 100%;
    padding: 16px;
    border: none;
    resize: none;
    font-family: var(--font-family-serif);
    font-size: 13px;
    line-height: 1.6;
    background: var(--color-card-background);
    color: var(--color-text-primary);
    overflow-y: auto;
    outline: none;
}

.editor-textarea::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.editor-divider {
    width: 4px;
    background: var(--color-border);
    cursor: ew-resize;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.editor-divider:hover {
    background: var(--color-text-secondary);
}

.editor-preview {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    overflow: hidden;
    background: var(--color-card-background);
    border-left: 1px solid var(--color-border);
}

.editor-preview .preview-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--card-padding-vertical) var(--card-padding-horizontal);
}

/* Status Bar */
.editor-status {
    display: flex;
    justify-content: space-between;
    padding: 4px 12px;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    font-size: 11px;
    font-family: var(--font-family-mono);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* File Picker Dropdown */
.editor-file-picker {
    position: absolute;
    top: 44px;
    left: 8px;
    right: 8px;
    max-height: 250px;
    overflow-y: auto;
    background: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.editor-file-item {
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--font-family-mono);
    font-size: 12px;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s ease;
}

.editor-file-item:hover {
    background: var(--color-background);
}

.editor-file-item:last-child {
    border-bottom: none;
}

/* Edit button (fixed UI) */
.edit-btn {
    left: 66px !important;
}

.edit-btn:hover {
    transform: scale(1.1);
}

/* Editor Preview with Margins */
.preview-card-container {
    display: grid;
    height: 100%;
    width: 100%;
    background: var(--color-card-background);
    overflow: hidden;
}

.preview-card-container .card-content {
    overflow-y: auto;
    padding: var(--card-padding-vertical) var(--card-padding-horizontal);
}

.preview-card-container .card-margin {
    position: relative;
    overflow: visible;
}

.preview-card-container .card-margin-top {
    grid-column: 1 / -1;
    grid-row: 1;
}

.preview-card-container .card-margin-left {
    grid-column: 1;
    grid-row: 2;
}

.preview-card-container .card-margin-right {
    grid-column: 3;
    grid-row: 2;
}

.preview-card-container .card-margin-bottom {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* ============================================
   Password Modal (for encrypted cards)
   ============================================ */

.password-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    backdrop-filter: blur(4px);
}

.password-dialog {
    background: var(--color-card-background);
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    min-width: 300px;
    max-width: 400px;
}

.password-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.password-icon {
    font-size: 24px;
}

.password-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-h2);
    color: var(--color-text-primary);
}

.password-dialog p {
    margin-bottom: 16px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.password-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 14px;
    font-family: var(--font-family-mono);
    background: var(--color-card-background);
    color: var(--color-text-primary);
    margin-bottom: 12px;
    box-sizing: border-box;
}

.password-input:focus {
    outline: none;
    border-color: var(--color-text-secondary);
}

.password-error {
    color: #c41e3a;
    font-size: 12px;
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(196, 30, 58, 0.1);
    border-radius: 4px;
}

.password-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.password-btn {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 14px;
    font-family: var(--font-family-serif);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.password-btn.cancel {
    background: var(--color-card-background);
    color: var(--color-text-primary);
}

.password-btn.cancel:hover {
    background: var(--color-background);
}

.password-btn.submit {
    background: var(--color-text-primary);
    color: var(--color-card-background);
    border-color: var(--color-text-primary);
}

.password-btn.submit:hover {
    opacity: 0.9;
}

.password-btn:active {
    transform: scale(0.95);
}

/* ============================================
   Locked Card UI (in-card password prompt)
   ============================================ */

.locked-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
}

.locked-password-input {
    width: 100%;
    max-width: 200px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font-family-serif);
    text-align: center;
    background: var(--color-card-background);
    color: var(--color-text-primary);
    box-sizing: border-box;
}

.locked-password-input:focus {
    outline: none;
    border-color: var(--color-text-secondary);
}

.locked-password-input:disabled {
    opacity: 0.6;
}

.locked-error {
    margin-top: 8px;
    color: #c41e3a;
    font-size: 13px;
    min-height: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.locked-error.visible {
    opacity: 1;
}

/* ============================================
   Editor Private Toggle
   ============================================ */

.editor-private-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-card-background);
    font-size: 12px;
    transition: background 0.2s ease, border-color 0.2s ease;
    margin-right: 8px;
}

.editor-private-toggle:hover {
    background: var(--color-background);
}

.editor-private-toggle input[type="checkbox"] {
    display: none;
}

.editor-private-toggle .private-label {
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}

.editor-private-toggle input[type="checkbox"]:checked + .private-label {
    color: #c41e3a;
    font-weight: bold;
}

.editor-private-toggle:has(input:checked) {
    border-color: #c41e3a;
    background: rgba(196, 30, 58, 0.1);
}

/* ============================================
   Contact Form Styles
   ============================================ */

.form-input,
.form-textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-base);
    background: var(--color-card-background);
    color: var(--color-text-primary);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-text-secondary);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-success {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
}

.form-success p {
    font-size: 14px;
    font-weight: var(--font-weight-h2);
    margin: 0;
}

/* ============================================
   Button Styles
   ============================================ */

.btn {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Bordered button */
.btn-bordered {
    padding: 6px 14px;
    border: 1px solid var(--color-text-primary);
    background: transparent;
    color: var(--color-text-primary);
    font-size: 0.9em;
}

.btn-bordered:hover:not(:disabled) {
    background: var(--color-text-primary);
    color: var(--color-card-background);
}

/* Dotted underline button */
.btn-dotted {
    padding: 4px 0;
    color: var(--color-text-primary);
    font-size: 0.9em;
    border-bottom: 1px dotted var(--color-text-secondary);
}

.btn-dotted:hover:not(:disabled) {
    border-bottom-color: var(--color-text-primary);
    border-bottom-style: solid;
}