:root {
    --primary-color: #2563eb;
    --sidebar-bg: #f8fafc;
    --border-color: #e2e8f0;
    --grid-border-color: #ef4444;
    /* Standard Red for grids */
    --grid-guide-color: rgba(239, 68, 68, 0.3);
    /* Fainter red for internal lines */
    --paper-width: 210mm;
    --paper-height: 297mm;
    --cell-size: 24mm;
    /* Adjusted for A4 capacity */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body {
    /* Inter has no CJK glyphs at all; relying on system-ui/sans-serif to
       cover Chinese text means every browser's own font-substitution table
       decides what actually renders — and that table can differ (or fail
       outright, producing tofu) between a browser's screen and print/canvas
       rendering paths. Noto Sans SC is a real loaded web font with full
       Chinese coverage, so it's named explicitly instead of hoped for. */
    font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
    background-color: #eef2f6;
    min-height: 100vh;
    /* Allow scrolling by default */
    overflow-y: auto;
}

.app-container {
    display: flex;
    height: 100vh;
    /* Lock height for the app view */
    overflow: hidden;
    /* Prevent body scroll in app mode */
}

/* Sidebar Styling */
.sidebar {
    width: clamp(340px, 25vw, 460px);
    background: white;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);
    z-index: 10;
    overflow-y: auto;
}

.sidebar>* {
    flex-shrink: 0;
}

.sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Noto Serif SC', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
    text-decoration: none;
}

.sidebar-header h1 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.sidebar-nav {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

.sidebar-nav a {
    color: #94a3b8;
    text-decoration: none;
}

.sidebar-nav a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.control-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}

/* Sidebar Actions */
.actions {
    position: sticky;
    bottom: -2rem;
    /* Cancel out .sidebar's own 2rem padding on the sides/bottom so this
       reaches the true edge of the scrollport with no gap while stuck,
       then re-add matching padding so its content still lines up with
       every other control-group above it. */
    margin: auto -2rem -2rem;
    padding: 1rem 2rem 2rem;
    background: white;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -6px 12px -6px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    z-index: 5;
}

textarea {
    width: 100%;
    height: 120px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    resize: vertical;
    transition: border-color 0.2s;
}

textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Accordion */
.accordion-group {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.accordion-group summary {
    padding: 1rem;
    font-weight: 600;
    color: #1e293b;
    background-color: #f8fafc;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-group summary::-webkit-details-marker {
    display: none;
}

.accordion-group summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform 0.2s;
    margin-right: 4px;
}

.accordion-group[open] summary::after {
    transform: rotate(225deg);
    margin-top: 4px;
}

.accordion-content {
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.accordion-group.nested {
    margin: 0.25rem 0 0;
    box-shadow: none;
    border-color: #e2e8f0;
}

.accordion-group.nested summary {
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    background-color: #f8fafc;
}

.accordion-group.nested .accordion-content {
    padding: 1.25rem 0.85rem;
}

/* Radio Cards */
.radio-group {
    display: flex;
    gap: 0.75rem;
}

.radio-card {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    position: relative;
}

.radio-card:hover {
    background-color: #f1f5f9;
}

.radio-card.active {
    border-color: var(--primary-color);
    background-color: #eff6ff;
    color: var(--primary-color);
}

.radio-card input {
    position: absolute;
    opacity: 0;
}

/* Template Chips — one horizontally scrolling row per mode instead of
   wrapping, so adding more examples per age group doesn't blow up the
   sidebar's vertical space. */
.template-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    /* room for the scrollbar without it overlapping the chips */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.template-age-label {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border-color);
}

.template-age-label:first-child {
    padding-left: 0;
    border-left: none;
}

.template-chip {
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    border-radius: 16px;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
    cursor: pointer;
}

.template-chip:hover {
    background: #e5e7eb;
}

.template-chip.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.cell-size-hint {
    font-weight: 400;
    color: #94a3b8;
    font-size: 0.8rem;
}

.size-preset-group {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.size-preset-chip {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.size-preset-chip:hover {
    background: #eef2f7;
    border-color: #94a3b8;
}

/* Tab Cards specifically for Mode selection */
.tab-card {
    padding: 0.6rem 0.25rem;
    gap: 0.25rem;
    font-size: 0.8rem;
    text-align: center;
}

.tab-card.active {
    background-color: var(--primary-color);
    color: white;
}

.tab-card.active svg {
    stroke: white;
}

.preview-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #94a3b8;
}

.mi-grid {
    background:
        linear-gradient(90deg, transparent 49%, #cbd5e1 49%, #cbd5e1 51%, transparent 51%),
        linear-gradient(0deg, transparent 49%, #cbd5e1 49%, #cbd5e1 51%, transparent 51%),
        linear-gradient(45deg, transparent 49%, #cbd5e1 49%, #cbd5e1 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, #cbd5e1 49%, #cbd5e1 51%, transparent 51%);
}

.tian-grid {
    background:
        linear-gradient(90deg, transparent 49%, #cbd5e1 49%, #cbd5e1 51%, transparent 51%),
        linear-gradient(0deg, transparent 49%, #cbd5e1 49%, #cbd5e1 51%, transparent 51%);
}

.square-grid {
    background: transparent;
}

/* Color Options */
.color-options {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.color-btn {
    flex: 1;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    cursor: pointer;
    color: transparent;
    overflow: hidden;
    text-indent: -9999px;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.color-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.color-btn.active {
    transform: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-color);
}

/* Custom Color Wrapper */
.custom-color-wrapper {
    flex: 1.5;
    height: 36px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    border: 1px dashed #94a3b8;
}

.custom-color-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-color-wrapper.active {
    transform: none;
    border-style: solid;
    border-color: transparent;
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-color);
}

/* Custom Color Picker */
.custom-color-picker {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    cursor: pointer;
}

.custom-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.custom-color-picker::-webkit-color-swatch {
    border: none;
}

.custom-color-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 20px;
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch input:checked+.slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked+.slider:before {
    transform: translateX(16px);
}

/* Layout Icons */
.layout-icon {
    width: 48px;
    height: 48px;
    border: 2px solid #94a3b8;
    border-radius: 4px;
    position: relative;
    background: white;
}

.layout-full::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed #cbd5e1;
}

.layout-split2::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    margin-top: -1px;
    border-top: 2px solid #94a3b8;
}

.layout-quadrant::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    margin-top: -1px;
    border-top: 2px solid #94a3b8;
}

.layout-quadrant::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 50%;
    margin-left: -1px;
    border-left: 2px solid #94a3b8;
}

/* Action Buttons */
.primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.primary-btn:hover {
    background-color: #1d4ed8;
}

/* Preview Area */
.preview-area {
    flex: 1;
    display: flex;
    justify-content: center;
    overflow-y: auto;
    padding: 2rem;
    background-color: #64748b;
    /* Dark backdrop for contrast */
    position: relative;
    /* For loading overlay positioning */
    transition: opacity 0.2s ease-in-out;
}

.preview-area.fade-out {
    opacity: 0;
}

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100, 116, 139, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    margin-top: 1rem;
    color: white;
    font-size: 1rem;
    font-weight: 500;
}

.a4-paper {
    width: var(--paper-width);
    min-height: var(--paper-height);
    background: white;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 12mm;
    /* Matches PADDING_MM in core-renderer.js — includes a safety buffer
       beyond visual margin so real printers/browsers (unprintable
       hardware margins, "print headers and footers") don't push content
       onto a phantom second page. See core-renderer.js for details. */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center the wrapper in the page */
    align-content: center;
    overflow: hidden;
    /* Ensure no overflow */
}

/* Internal Grid Wrapper for Borders */
.grid-container {
    display: grid;
    gap: 1px;
    /* The gap creates the internal borders */
    background-color: var(--grid-border-color);
    /* The color of the gap/border */
    border: 1px solid var(--grid-border-color);
    /* Correct outer border */
    /* Ensure exact columns */
    flex: none;
    grid-template-columns: repeat(var(--col-count, 7), var(--cell-size));
    grid-auto-rows: var(--cell-size);
}

/* Removed hardcoded .portrait/.landscape columns rules */

/* Cell & Grid Styles */
.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    background-color: white;
    /* Overlay the container red bg */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cell-content {
    /* Named CJK fonts must come before the generic `serif` keyword: a
       generic family always resolves to *some* installed font, so once the
       browser reaches it in the list it stops looking — 'KaiTi'/'STKaiti'
       etc. after `serif` were dead entries, silently never tried. Which
       actual font `serif` resolves to (and whether it has CJK glyphs at
       all) is an OS/browser decision that differs by device, which is why
       this showed up as mojibake on some machines and not others. Noto
       Serif SC is a real loaded web font with full coverage, kept as the
       last-resort before the bare generic keyword. */
    font-family: 'KaiTi', 'STKaiti', '楷体', 'SimKai', 'Times New Roman', 'Noto Serif SC', serif;
    font-size: calc(var(--cell-size) * 0.8);
    /* ~80% of cell size */
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

/* Grid Patterns */
.grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* Tian Ge */
.type-tian .grid-bg {
    /* Solid gradients removed to show dashed lines from pseudo-elements */
    border: none;
}

/* Fix for gradients repeating: we need a single cross */
.type-tian .grid-bg::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px dashed var(--grid-guide-color);
}

.type-tian .grid-bg::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 1px;
    border-left: 1px dashed var(--grid-guide-color);
}

/* Mi Ge */
.type-mi .grid-bg::after {
    /* Horizontal */
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px dashed var(--grid-guide-color);
}

.type-mi .grid-bg::before {
    /* Vertical */
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 1px;
    border-left: 1px dashed var(--grid-guide-color);
}

.type-mi .grid-diagonals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.type-mi .grid-diagonals::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 1px;
    border-top: 1px dashed var(--grid-guide-color);
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center;
}

.type-mi .grid-diagonals::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 1px;
    border-top: 1px dashed var(--grid-guide-color);
    transform: translate(-50%, -50%) rotate(-45deg);
    /* -45deg is easier to reason about than 135deg */
    transform-origin: center;
}


/* Square */
.type-square .grid-bg {
    display: none;
}

/* Landscape Mode */
.a4-paper.landscape {
    width: var(--paper-height);
    min-height: var(--paper-width);
    /* Swapped */
    height: var(--paper-width);
    /* Grid handling moved to .grid-container */
}

/* Print Styles */
#printImage {
    display: none;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    body {
        margin: 0;
        padding: 0;
        background: white;
        height: auto;
        overflow: visible;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide UI elements */
    .sidebar,
    .loading-overlay,
    .control-group,
    header,
    footer,
    .breadcrumbs,
    .btn-generate,
    .action-area,
    #shareBtn,
    .preview-toolbar,
    .seo-content,
    .custom-color-picker {
        display: none !important;
    }

    /* Primary path: printBtn's click handler renders #paper to an image and
       sets this src right before calling print(). A flat screenshot has no
       page-break/font-fallback/margin-reservation surface for a print
       engine to get wrong, unlike the live DOM below. Scoped with :has() so
       it only takes over when there's actually an image to show — Ctrl+P
       without clicking the button first still falls back to the live DOM. */
    body:has(#printImage[src]) .app-container,
    body:has(#printImage[src]) .info-trigger-btn,
    body:has(#printImage[src]) .info-modal {
        display: none !important;
    }

    /* Deliberately NOT position:fixed + inset:0 + %. WebKit/Safari's print
       engine (desktop and mobile) doesn't reliably resolve a fixed element's
       containing block against the paginated page box — the image ends up
       sized/placed by whatever it falls back to instead, cropped into a
       corner with blank margins on the rest of the sheet. Chromium's print
       engine handles it fine, which is exactly why this passed every
       Playwright check here and still broke in real Safari. Static flow
       with the same explicit mm dimensions already proven to work for the
       .a4-paper DOM fallback below has no such ambiguity in any engine. */
    /* Height is short of the 297mm page on purpose, not just rounding-shy.
       This number came from real-device trial and error on a mobile
       export, not from anything computable here: 1mm of slack (296mm)
       spilled a blank second page, 6mm (291mm) still did, 13mm (284mm)
       came back as a single page. That non-linear "still overflowing at
       6mm" result is consistent with the phone's print/PDF path reserving
       real vertical space for its own "headers and footers" (URL, date,
       page number) independent of this page's @page margin:0 — space this
       stylesheet has no way to query, so 13mm is a measured number, not a
       derived one. It also reads as more blank margin than strictly
       necessary on a device where headers/footers are off (or reserve
       less), but a proven single page beats a smaller, unverified margin.
       Turning off "headers and footers" in the print/export dialog is the
       one lever on the user's side that would free this back up. */
    #printImage[src] {
        display: block !important;
        margin: 0;
        width: 210mm;
        height: 284mm;
        object-fit: contain;
    }

    #printImage[src].landscape {
        /* Rotated: this box's height (not width) rides along the page's
           short physical axis and is what pagination actually measures
           against, same as height above for portrait — width isn't the
           at-risk dimension so it stays flush with the page. */
        width: 297mm;
        height: 197mm;
    }

    .app-container {
        display: block;
        height: auto;
    }

    .preview-area {
        padding: 0;
        margin: 0;
        background: white;
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: auto;
    }

    /* updateZoom() writes inline width/height/transform onto these for the
       on-screen preview. Those inline styles outrank plain print rules, and
       paper.offsetHeight rounds 297mm (1122.52px) UP to 1123px — half a pixel
       taller than the page box, which is enough to spill onto a blank second
       sheet. A leftover scale() would also shrink the printout to whatever
       zoom the preview happened to be at. Neutralize both with !important. */
    #paper-wrapper {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .a4-paper {
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        transform: none !important;
        transform-origin: top left !important;
        width: 210mm;
        /* 1mm shy of the 297mm page box. Poetry layouts size their children
           off `height: 100%`, so this has to stay a *definite* height — but
           sitting flush on the page boundary leaves no room for the browser's
           mm-to-px rounding, which is what tipped the worksheet onto a second
           sheet. 1mm (~3.8px) is far more slack than the ~0.5px error and is
           visually indistinguishable. min-height must be cleared too, or the
           base rule's `min-height: 297mm` overrides this straight back. */
        height: 296mm;
        min-height: 0;
        padding: 12mm;
        /* Match screen padding */
    }

    .a4-paper.landscape {
        width: 297mm;
        height: 209mm;
        min-height: 0;
    }
}

/* Named page for landscape, referenced by the `page: landscape` rule below.
   Without this declaration that reference is inert and landscape worksheets
   print onto portrait sheets. */
@page landscape {
    size: A4 landscape;
    margin: 0;
}

@media print {

    .a4-paper.landscape,
    #printImage.landscape {
        page: landscape;
    }
}

/* --- Poetry Mode Styles --- */

.poetry-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.poetry-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 3mm;
}

.poetry-row.title-row {
    margin-bottom: 8mm;
}

/* Cell Group for Pinyin + Grid */
.cell-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: -1px;
    /* Collapse adjacent borders */
}

.cell-group:last-child {
    margin-right: 0;
}

.pinyin-box {
    width: 100%;
    height: 8mm;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-family: 'KaiTi', 'STKaiti', '楷体', 'SimKai', 'Times New Roman', 'Noto Serif SC', serif;
    font-size: 14px;
    padding-bottom: 2px;
    color: #333;
}

/* Add borders to cells in poetry mode (since not in grid-container) */
.cell-group .cell {
    border: 1px solid var(--grid-border-color);
}

/* --- Quadrant Layout Styles --- */

.quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Horizontal Cutting Line */
.quadrant-grid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px dashed #94a3b8;
    /* Slate-400 for visibility */
    pointer-events: none;
}

/* Vertical Cutting Line */
.quadrant-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 1px;
    border-left: 1px dashed #94a3b8;
    pointer-events: none;
}

.quadrant-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5mm;
    overflow: hidden;
}

/* --- Split-2 Layout Styles --- */

.split2-grid {
    display: grid;
    /* Default is portrait (stacked rows) */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Horizontal Cutting Line (Portrait) */
.split2-grid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10mm;
    right: 10mm;
    height: 1px;
    border-top: 1px dashed #94a3b8;
    pointer-events: none;
}

/* Landscape Split-2: Side-by-Side Columns */
.a4-paper.landscape .split2-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* Vertical Cutting Line (Landscape) */
.a4-paper.landscape .split2-grid::after {
    top: 10mm;
    bottom: 10mm;
    left: 50%;
    width: 1px;
    height: auto;
    border-top: none;
    border-left: 1px dashed #94a3b8;
}

.split2-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10mm;
    /* Slightly more padding than quadrant */
    overflow: hidden;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: 45vh;
        border-right: none;
        border-top: 1px solid var(--border-color);
        order: 2;
        position: fixed;
        bottom: 0;
        z-index: 50;
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .preview-area {
        height: 55vh;
        padding: 1rem;
        order: 1;
        padding-bottom: 50vh;
        /* space for the drawer */
    }

    .preview-toolbar {
        top: 0.5rem !important;
        right: 0.5rem !important;
    }
}

/* --- SEO/GEO Content Section (below the tool) --- */
.seo-content {
    background: #f9fafb;
    border-top: 1px solid var(--border-color);
    padding: 3rem 0 4rem;
}

.seo-content .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.seo-content .breadcrumbs {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.seo-content .breadcrumbs a {
    color: var(--primary-color);
    text-decoration: none;
}

.seo-content h2 {
    font-family: 'Noto Serif SC', serif;
    font-size: 1.5rem;
    color: #111827;
    margin: 2.5rem 0 1rem;
}

.seo-content h2:first-of-type {
    margin-top: 0;
}

.seo-content p {
    color: #374151;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.seo-content .howto-list {
    padding-left: 1.5rem;
    color: #374151;
    line-height: 1.8;
}

.seo-content .howto-list li {
    margin-bottom: 0.5rem;
}

.seo-content .faq-item {
    margin-bottom: 1.5rem;
}

.seo-content .faq-item h3 {
    font-size: 1.05rem;
    color: #111827;
    margin-bottom: 0.4rem;
}

.seo-content .faq-item p {
    color: #4b5563;
    margin-bottom: 0;
}

.seo-content .related-links {
    list-style: none;
    padding: 0;
    color: #374151;
    line-height: 2;
}

.seo-content .related-links a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.seo-content .related-links a:hover {
    text-decoration: underline;
}

/* --- Info Trigger Button (opens the modal below) --- */
.info-trigger-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 2rem;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}

.info-trigger-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -2px rgba(0, 0, 0, 0.2);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* --- Info Modal --- */
.info-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.info-modal[hidden] {
    display: none;
}

.info-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.info-modal-panel {
    position: relative;
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.info-modal-close {
    position: sticky;
    top: 0;
    float: right;
    margin: 0.75rem 0.75rem 0 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #475569;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.info-modal-close:hover {
    background: #e2e8f0;
    color: #1f2937;
}

.info-modal .seo-content {
    background: transparent;
    border-top: none;
    padding: 0.5rem 2rem 2rem;
}

.info-modal .seo-content .container {
    max-width: none;
    padding: 0;
}

.info-modal .seo-content .breadcrumbs {
    display: none;
}

@media (max-width: 768px) {
    .info-trigger-btn {
        /* Clear the fixed bottom sheet (.sidebar, 45vh tall) so the button stays reachable */
        bottom: calc(45vh + 1rem);
        right: 1rem;
        padding: 0.45rem 0.8rem;
        font-size: 0.8rem;
    }

    .info-modal-panel {
        max-height: 90vh;
    }

    .info-modal .seo-content {
        padding: 0.5rem 1.25rem 1.5rem;
    }
}

@media print {

    .info-trigger-btn,
    .info-modal {
        display: none !important;
    }
}