/* =====================================================
   AMBER CRT / RETRO OSCILLOSCOPE THEME
   ===================================================== */
:root {
    --bg-dark:        #080600;
    --sidebar-bg:     #0f0b00;
    --accent:         #ffb300;
    --accent-glow:    rgba(255, 179, 0, 0.35);
    --accent-hover:   #ffd54f;
    --text-main:      #f0d98a;
    --text-muted:     #8a7040;
    --border-color:   #2a1f00;

    /* CRT scanline stripe height */
    --scanline-h: 3px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
    background-color: var(--bg-dark);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
}

/* Faint film-grain texture across the whole app — the difference between a
   flat digital dark theme and something that feels like it has a physical
   phosphor surface. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* =====================================================
   GLOBAL DRAG & DROP OVERLAY
   ===================================================== */
#drop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 6, 0, 0.88);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

#drop-overlay.active {
    opacity: 1;
}

.drop-message {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    padding: 3rem 5rem;
    border: 2px dashed var(--accent);
    border-radius: 4px;
    background: rgba(255, 179, 0, 0.04);
    box-shadow: 0 0 40px var(--accent-glow), inset 0 0 40px rgba(255,179,0,0.03);
    animation: pulse 2s infinite;
    letter-spacing: 0.05em;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 20px var(--accent-glow); }
    50%  { box-shadow: 0 0 50px var(--accent-glow); }
    100% { box-shadow: 0 0 20px var(--accent-glow); }
}

/* =====================================================
   LAYOUT
   ===================================================== */
.app-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: 100vh;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.4);
    z-index: 10;
    overflow-y: auto;
    overflow-x: hidden;
    /* subtle inner scanline texture on sidebar too */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(var(--scanline-h) * 2 - 1px),
        rgba(0,0,0,0.18) calc(var(--scanline-h) * 2 - 1px),
        rgba(0,0,0,0.18) calc(var(--scanline-h) * 2)
    );
}

/* ---- Terminal Logo Block ---- */
.logo-area {
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.terminal-logo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.terminal-logo__wave {
    display: block;
    width: 100%;
    height: 44px;
    overflow: visible;
}

.terminal-logo__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.03em;
    line-height: 1.1;
    text-shadow: 0 0 12px var(--accent-glow);
}

.terminal-logo__title .prompt {
    color: var(--text-muted);
    font-weight: 400;
}

.terminal-logo__subtitle {
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Blinking block cursor */
.cursor {
    display: inline-block;
    width: 0.65em;
    height: 1em;
    background: var(--accent);
    vertical-align: text-bottom;
    animation: blink 1.1s step-start infinite;
    opacity: 0.9;
}

@keyframes blink {
    0%, 100% { opacity: 0.9; }
    50%       { opacity: 0; }
}

/* ---- Sidebar Console ---- */
.sidebar-console {
    margin: 0.6rem 0 0 0;
    border: 1px solid var(--border-color);
    background: #030200;
    padding: 0.5rem 0.6rem;
    height: 72px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.68rem;
    line-height: 1.55;
    position: relative;
}

.sidebar-console:hover {
    scrollbar-color: var(--border-color) transparent;
}

.sidebar-console::-webkit-scrollbar {
    width: 3px;
}
.sidebar-console::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-console::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
}
.sidebar-console:hover::-webkit-scrollbar-thumb {
    background: var(--border-color);
}
.sidebar-console:hover::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Fade-out mask at the top while lines are scrolling in */
.sidebar-console::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 20px;
    background: linear-gradient(to bottom, #030200 30%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

#console-lines {
    display: block;
}

.con-line {
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
    animation: con-slide-in 0.12s ease-out;
}

@keyframes con-slide-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.con-line--dim    { color: #4a3a10; }
.con-line--muted  { color: var(--text-muted); }
.con-line--normal { color: var(--text-main); }
.con-line--ok     { color: var(--accent); text-shadow: 0 0 6px var(--accent-glow); }
.con-line--err    { color: #ff4444; }

/* ---- Menu / Buttons ---- */

.menu-area {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-btn,
.secondary-btn {
    width: 100%;
    padding: 0.9rem 1rem;
    border: none;
    border-radius: 3px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-btn {
    background: var(--accent);
    color: #080600;
    box-shadow: 0 0 12px rgba(255, 179, 0, 0.3), 0 4px 15px rgba(0,0,0,0.4);
}

.primary-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 0 24px rgba(255, 179, 0, 0.55), 0 6px 20px rgba(0,0,0,0.4);
    transform: translateY(-1px);
}

.primary-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.4), 0 2px 6px rgba(0,0,0,0.4);
}

.secondary-btn:active {
    transform: translateY(1px);
}

/* Split download control: PDF on the left, .tex on the right. Both halves are
   .primary-btn, so hover/active/disabled styling is shared. */
.split-btn {
    display: flex;
    width: 100%;
    transition: transform 0.2s ease;
}

.split-btn__main {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 3px 0 0 3px;
}

.split-btn__side {
    flex: 0 0 auto;
    width: auto;
    padding: 0.9rem 0.85rem;
    border-radius: 0 3px 3px 0;
    text-transform: none;
    letter-spacing: 0.02em;
    /* Hairline seam between the halves, so the control reads as one button
       that was split rather than two that happen to touch. */
    box-shadow: inset 1px 0 0 rgba(8, 6, 0, 0.35);
}

.split-btn__side:hover:not(:disabled) {
    box-shadow: inset 1px 0 0 rgba(8, 6, 0, 0.35),
                0 0 24px rgba(255, 179, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* The lift belongs to the whole control, not to whichever half the pointer is
   over — one half rising on its own reads as two buttons coming apart. */
.split-btn__main:hover:not(:disabled),
.split-btn__side:hover:not(:disabled) {
    transform: none;
}

.split-btn:hover {
    transform: translateY(-1px);
}

.primary-btn:disabled {
    background: #1e1800;
    color: #4a3a10;
    box-shadow: none;
    cursor: not-allowed;
    border: 1px solid #2a1f00;
}

.secondary-btn {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.secondary-btn:hover {
    background-color: rgba(255, 179, 0, 0.06);
    border-color: var(--accent);
    color: var(--accent);
}

/* ---- Skin Selector ---- */
.skin-area {
    padding: 0.85rem 0.75rem;
    margin: 0.6rem 0 0 0;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: rgba(255, 179, 0, 0.015);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.skin-area label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---- Options Area ---- */
.options-area {
    padding: 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0.6rem 0 0 0;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: rgba(255, 179, 0, 0.015);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.options-area label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ---- Folder Selector ---- */
.folder-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.5rem;
    background: rgba(255, 179, 0, 0.02);
    border: 1px dashed var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-size: 0.75rem;
}

.folder-selector:hover {
    background: rgba(255, 179, 0, 0.06);
    border-color: var(--accent);
}

.folder-selector .folder-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.2s;
}

.folder-selector:hover .folder-icon {
    color: var(--accent);
}

.folder-selector .folder-label {
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.folder-selector .folder-name {
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    font-weight: 700;
}

/* ---- Checkboxes (custom toggle switches) ---- */
.options-area label.checkbox-label {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    position: relative;
}

.options-area input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 32px;
    height: 17px;
    flex-shrink: 0;
    margin: 0;
    border-radius: 9px;
    background: #1a1400;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.options-area input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}

.options-area input[type="checkbox"]:hover {
    border-color: var(--accent);
}

.options-area input[type="checkbox"]:checked {
    background: rgba(255, 179, 0, 0.14);
    border-color: var(--accent);
}

.options-area input[type="checkbox"]:checked::after {
    transform: translateX(15px);
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* ---- Help / Tooltip ---- */
.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* amber rectangle badge */
    width: 14px;
    height: 14px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    background: rgba(255, 179, 0, 0.06);
    border-radius: 1px;
    cursor: help;
    margin-left: auto;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    text-shadow: 0 0 6px var(--accent-glow);
}

.help-btn:hover {
    background: rgba(255, 179, 0, 0.15);
    box-shadow: 0 0 6px var(--accent-glow);
    transform: scale(1.15);
}

.help-btn[data-tooltip] {
    position: relative;
}

.help-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-85%);
    background: #1a1200;
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: 2px;
    font-size: 0.72rem;
    white-space: normal;
    width: 200px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100;
    line-height: 1.4;
}

.help-btn:hover::after {
    opacity: 1;
    transform: translateX(-85%) translateY(-5px);
}

/* ---- Creators photo ---- */
/* Hovering the names shows who wrote this. The image ships in the DOM rather
   than being swapped in on hover so it is already decoded when the pointer
   arrives, instead of flashing in a frame late. */
.creators {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted rgba(255, 179, 0, 0.35);
}

.creators__photo {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    display: block;
    /* Narrower than the sidebar's content box: .sidebar clips on overflow-x,
       and a wider photo would lose an edge down there. */
    width: 170px;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65), 0 0 14px var(--accent-glow);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
}

/* :focus, not :focus-visible — the names carry a tabindex so the photo is
   reachable without a mouse, and a tap or click should show it too. */
.creators:hover .creators__photo,
.creators:focus .creators__photo {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---- Skin Dropdown ---- */
#skin-selector {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.6rem 2.1rem 0.6rem 0.6rem;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    background-color: #0f0b00;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb300' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 14px;
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

#skin-selector:hover {
    border-color: var(--accent);
}

#skin-selector option {
    background: #0f0b00;
    color: var(--text-main);
}

/* ---- Drag Hint / Drop Zone ---- */
.drag-hint {
    text-align: center;
    padding: 0.75rem;
    background: rgba(255, 179, 0, 0.02);
    border: 1px dashed var(--border-color);
    border-radius: 2px;
    margin: 1rem 0.5rem 0 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.drag-hint:hover {
    background: rgba(255, 179, 0, 0.06);
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.1);
}

.drag-hint:active {
    transform: scale(0.99);
}

.drag-hint .hint-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.85;
    transition: transform 0.2s, color 0.2s;
}

.drag-hint:hover .hint-icon {
    color: var(--accent);
    transform: scale(1.08) rotate(-3deg);
    filter: drop-shadow(0 0 4px var(--accent-glow));
}

.drag-hint p {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.3;
    text-align: left;
}

/* =====================================================
   VIEWER PANE — CRT EFFECT (no image)
   ===================================================== */
.viewer-pane {
    position: relative;
    background-color: #050400;
    /* Faint oscilloscope graticule — gives the empty state a reason to look
       the way it does, instead of reading as "nothing loaded yet". */
    background-image:
        repeating-linear-gradient(to right, rgba(255, 179, 0, 0.14) 0, rgba(255, 179, 0, 0.14) 1px, transparent 1px, transparent 200px),
        repeating-linear-gradient(to bottom, rgba(255, 179, 0, 0.14) 0, rgba(255, 179, 0, 0.14) 1px, transparent 1px, transparent 200px),
        repeating-linear-gradient(to right, rgba(255, 179, 0, 0.07) 0, rgba(255, 179, 0, 0.07) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(to bottom, rgba(255, 179, 0, 0.07) 0, rgba(255, 179, 0, 0.07) 1px, transparent 1px, transparent 40px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-bottom: 2.5rem;
}

/* Layer 1: Scanlines */
.viewer-pane::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(var(--scanline-h) - 1px),
        rgba(0, 0, 0, 0.38) calc(var(--scanline-h) - 1px),
        rgba(0, 0, 0, 0.38) var(--scanline-h)
    );
}

/* Layer 2: Amber phosphor vignette */
.viewer-pane::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 140, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.0)  45%,
            rgba(0, 0, 0, 0.55) 100%
        );
    animation: crt-flicker 8s ease-in-out infinite;
}

@keyframes crt-flicker {
    0%,  100% { opacity: 1; }
    92%        { opacity: 1; }
    93%        { opacity: 0.85; }
    93.5%      { opacity: 1; }
    97%        { opacity: 1; }
    97.3%      { opacity: 0.9; }
    97.6%      { opacity: 1; }
}

/* =====================================================
   WELCOME / TERMINAL MESSAGE
   ===================================================== */
#welcome-msg {
    text-align: left;
    color: var(--text-main);
    max-width: 500px;
    width: 100%;
    z-index: 10;
    position: relative;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    padding: 1.5rem 2rem;
    border: 1px solid #2a1f00;
    background: rgba(8, 6, 0, 0.7);
    backdrop-filter: blur(2px);
    box-shadow: 0 0 40px rgba(255, 140, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Oscilloscope-graticule corner brackets, shared by the welcome and status
   terminal panels so they read as instrument readouts, not generic cards. */
#welcome-msg::before,
#status-msg::before,
#welcome-msg::after,
#status-msg::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    opacity: 0.85;
}

#welcome-msg::before,
#status-msg::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--accent);
    border-left: 2px solid var(--accent);
}

#welcome-msg::after,
#status-msg::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
}

#welcome-msg .landing-icon {
    display: none; /* replaced by terminal lines */
}

/* Terminal lines are injected via HTML now */
.term-line {
    display: block;
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.term-line--cmd {
    color: var(--text-main);
}

.term-line--ok {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}

.term-prompt {
    color: var(--accent);
    margin-right: 0.5em;
    text-shadow: 0 0 8px var(--accent-glow);
}

/* The welcome terminal is built from .term-line spans; it has no h3/p of its
   own. Status and error messages live in #status-msg instead (see below) —
   they used to be written into #welcome-msg, where these rules made every
   error and all batch progress invisible. */
#welcome-msg h3 {
    display: none;
}

#welcome-msg p {
    display: none;
}

/* =====================================================
   STATUS / ERROR PANEL
   ===================================================== */
#status-msg {
    text-align: left;
    color: var(--text-main);
    max-width: 500px;
    width: 100%;
    z-index: 10;
    position: relative;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    padding: 1.5rem 2rem;
    border: 1px solid #2a1f00;
    background: rgba(8, 6, 0, 0.7);
    backdrop-filter: blur(2px);
    box-shadow: 0 0 40px rgba(255, 140, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#status-msg h3 {
    margin: 0 0 0.6rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}

#status-msg p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    word-break: break-word;
}

#status-msg ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-muted);
}

#status-msg .status-err {
    color: #ff6b4a;
    text-shadow: 0 0 8px rgba(255, 107, 74, 0.35);
}

/* =====================================================
   PDF CONTAINER
   ===================================================== */
#pdf-container {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
}

#pdf-viewer {
    width: 100%;
    height: 100%;
    border: none;
    background: #525659;
}

/* =====================================================
   SIDEBAR FOOTER
   ===================================================== */
.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: center;
    border-top: 1px solid var(--border-color);
    letter-spacing: 0.03em;
}

.sidebar-footer p {
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.footer-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s, text-shadow 0.2s;
}

.footer-link:hover {
    text-shadow: 0 0 8px var(--accent-glow);
    opacity: 1;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media screen and (max-width: 800px) {
    body {
        height: auto;
        overflow-y: auto;
    }

    .app-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: min-content;
        min-height: 100vh;
    }

    .sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
        max-height: none;
        overflow-y: visible;
        padding-bottom: 2rem;
    }

    .viewer-pane {
        min-height: 60vh;
    }
}

/* =====================================================
   SPECIFICATION DOCUMENT VIEWER
   ===================================================== */
.inline-link-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    text-shadow: 0 0 6px var(--accent-glow);
    transition: color 0.2s;
}

.inline-link-btn:hover {
    color: var(--accent-hover);
}

.spec-container {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 15;
    background: rgba(8, 6, 0, 0.95);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 40px rgba(255, 140, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: con-slide-in 0.2s ease-out;
}

.spec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(15, 11, 0, 0.95);
}

.spec-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.spec-close-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.25rem 0.75rem;
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.spec-close-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.spec-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-main);
}

/* Custom styles for spec-content elements */
.spec-content .spec-h1 {
    font-size: 1.35rem;
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-glow);
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.spec-content .spec-h2 {
    font-size: 1.1rem;
    color: var(--accent);
    text-shadow: 0 0 6px var(--accent-glow);
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.spec-content .spec-h3 {
    font-size: 0.95rem;
    color: var(--accent-hover);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.spec-content .spec-h4 {
    font-size: 0.85rem;
    color: var(--text-main);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.spec-content .spec-p {
    margin-bottom: 1rem;
    color: var(--text-main);
}

.spec-content .spec-strong {
    color: var(--accent-hover);
    font-weight: bold;
}

.spec-content .spec-code {
    background: #140f00;
    color: var(--accent-hover);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    border: 1px solid #2a1f00;
    font-size: 0.78rem;
}

.spec-content .spec-code-block {
    background: #030200;
    border: 1px solid var(--border-color);
    padding: 0.85rem 1rem;
    border-radius: 3px;
    margin-bottom: 1.25rem;
    overflow-x: auto;
}

.spec-content .spec-code-block code {
    font-family: inherit;
    color: var(--text-main);
    font-size: 0.78rem;
    line-height: 1.5;
}

.spec-content .spec-blockquote {
    border-left: 2px solid var(--accent);
    padding-left: 1rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.spec-content .spec-hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

.spec-content .spec-ul, 
.spec-content .spec-ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.spec-content .spec-li {
    margin-bottom: 0.35rem;
}

.spec-content .spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: 0.78rem;
}

.spec-content .spec-th, 
.spec-content .spec-td {
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.7rem;
    text-align: left;
}

.spec-content .spec-th {
    background: rgba(255, 179, 0, 0.05);
    color: var(--accent);
    font-weight: 700;
}

.spec-content .spec-link {
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.2s;
}

.spec-content .spec-link:hover {
    color: var(--accent-hover);
}

.spec-content .spec-space {
    height: 0.4rem;
}