:root {
    --bg: #050907;
    --bg-elevated: #08110d;
    --panel: rgba(8, 18, 14, 0.93);
    --panel-strong: #0b1712;
    --line: rgba(87, 255, 163, 0.18);
    --line-strong: rgba(87, 255, 163, 0.48);
    --text: #e9fff2;
    --muted: #779889;
    --accent: #57ffa3;
    --accent-soft: rgba(87, 255, 163, 0.10);
    --danger: #ff7474;
    --warning: #ffd36f;
    --shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
    --radius: 12px;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;
    --topbar-h: 76px;
    --gap: 14px;
}

html[data-theme="light"] {
    --bg: #edf5f0;
    --bg-elevated: #f8fcf9;
    --panel: rgba(255, 255, 255, 0.95);
    --panel-strong: #ffffff;
    --line: rgba(6, 86, 51, 0.16);
    --line-strong: rgba(6, 86, 51, 0.42);
    --text: #07110c;
    --muted: #597064;
    --accent: #087b48;
    --accent-soft: rgba(8, 123, 72, 0.09);
    --shadow: 0 20px 70px rgba(25, 61, 43, 0.12);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 50% -20%, rgba(34, 133, 84, 0.22), transparent 42%),
        var(--bg);
    font-family: var(--mono);
    font-size: 14px;
    overflow: hidden;
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, textarea:focus-visible, input:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ambient-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.app-shell {
    position: relative;
    width: min(1720px, 100%);
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    padding: 18px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--gap);
}

.topbar {
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(5, 12, 9, 0.78);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
    position: relative;
    z-index: 25;
}
html[data-theme="light"] .topbar { background: rgba(255,255,255,.80); }
.brand-lockup { display: flex; align-items: center; gap: 15px; min-width: 0; }
.brand-logo-link { display: block; flex: 0 0 auto; line-height: 0; }
.brand-logo {
    width: 112px;
    height: auto;
    display: block;
    object-fit: contain;
}
html[data-theme="light"] .brand-logo { filter: brightness(0) saturate(100%); }
.brand-copy { min-width: 0; }
.eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
h1 {
    margin: 5px 0 0;
    font-size: clamp(17px, 2vw, 24px);
    font-weight: 600;
    letter-spacing: -.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    padding: 8px 10px;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 16px currentColor; }
.status-dot.ok { background: var(--accent); }
.status-dot.error { background: var(--danger); }

.icon-button, .topbar-button, .panel-close, .mini-button, .secondary-button, .primary-button, .composer-button, .jump-latest, .mobile-hex-fab {
    border: 1px solid var(--line-strong);
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}
.icon-button { width: 38px; height: 38px; border-radius: 8px; }
.topbar-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.button-icon { font-size: 15px; line-height: 1; }
button:hover:not(:disabled) { background: var(--accent); color: #021008; border-color: var(--accent); transform: translateY(-1px); }
button:disabled { opacity: .42; cursor: not-allowed; }

.workspace {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(245px, 280px) minmax(440px, 1fr) minmax(270px, 320px);
    gap: var(--gap);
    align-items: stretch;
    transition: grid-template-columns .26s ease;
}
body.signal-collapsed .workspace { grid-template-columns: 0 minmax(440px, 1fr) minmax(270px, 320px); }
body.signal-collapsed .signal-panel {
    opacity: 0;
    transform: translateX(-18px);
    pointer-events: none;
    border-width: 0;
}

.panel {
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
    overflow: hidden;
    backdrop-filter: blur(18px);
}
.panel-heading {
    height: 46px;
    flex: 0 0 46px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--accent);
    font-size: 11px;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.panel-heading-actions { display: flex; align-items: center; gap: 8px; }
.panel-state { color: var(--muted); letter-spacing: .04em; text-transform: lowercase; }
.panel-close {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    font-size: 17px;
    line-height: 1;
}
.scope-close { display: none; }

.signal-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .24s ease, transform .24s ease, border-width .24s ease;
}
.oracle-art {
    appearance: none;
    position: relative;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    margin: 14px 14px 10px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    background: radial-gradient(circle, rgba(87,255,163,.13), transparent 66%);
    cursor: pointer;
}
.oracle-art:hover { transform: none !important; background: radial-gradient(circle, rgba(87,255,163,.18), transparent 66%) !important; }
.oracle-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: saturate(.82) contrast(1.06);
    opacity: 0;
    transform: scale(1.025);
    transition: opacity .65s ease, transform 1.2s ease, filter .5s ease;
}
.oracle-visual.active { opacity: .92; transform: scale(1); }
.oracle-art[data-state="processing"] .oracle-visual.active {
    filter: saturate(.96) contrast(1.15) brightness(1.05);
    animation: signalPulse 1.8s ease-in-out infinite;
}
.oracle-art[data-state="error"] .oracle-visual.active { filter: grayscale(.2) sepia(.5) hue-rotate(300deg) saturate(1.8); }
@keyframes signalPulse { 50% { transform: scale(1.025); opacity: 1; } }
.scanline {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, transparent 0 46%, rgba(87,255,163,.13) 50%, transparent 54%),
        repeating-linear-gradient(to bottom, transparent 0 4px, rgba(87,255,163,.035) 5px);
    background-size: 100% 180%, 100% 5px;
    animation: scan 5.5s linear infinite;
    pointer-events:none;
}
@keyframes scan { to { background-position: 0 180%, 0 0; } }
.visual-status {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    color: var(--accent);
    background: rgba(2,10,7,.72);
    border: 1px solid var(--line);
    backdrop-filter: blur(8px);
    font-size: 9px;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.visual-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.oracle-art[data-state="processing"] .visual-status-dot { animation: blink .72s steps(1,end) infinite; }
.oracle-art[data-state="error"] .visual-status-dot { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
.signal-description {
    margin: 0 14px 12px;
    min-height: 32px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0 14px 12px; border: 1px solid var(--line); }
.metric { min-width: 0; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric:nth-child(2n) { border-right: 0; }
.metric:nth-last-child(-n+2) { border-bottom: 0; }
.metric span { display:block; color: var(--muted); font-size: 9px; margin-bottom: 5px; }
.metric strong { display:block; font-size: 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metric strong.ok { color: var(--accent); }
.metric strong.error { color: var(--danger); }
.signal-actions { margin: auto 14px 14px; display: grid; gap: 8px; }

.secondary-button, .primary-button { padding: 10px 13px; border-radius: 7px; }
.primary-button { color: #021008; background: var(--accent); font-weight: 700; }
.primary-button:hover:not(:disabled) { filter: brightness(1.08); }
.full { width: calc(100% - 28px); margin: auto 14px 14px; }

.terminal-panel {
    min-height: 0;
    display: grid;
    grid-template-rows: 46px minmax(0, 1fr) auto;
    overflow: hidden;
}
.terminal-heading { background: var(--accent-soft); }
.terminal-actions { display:flex; gap:6px; }
.mini-button { padding: 5px 8px; font-size: 10px; border-radius: 4px; }
.terminal-stage { min-height: 0; position: relative; overflow: hidden; }
.terminal-output {
    height: 100%;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    background: linear-gradient(180deg, rgba(87,255,163,.025), transparent 22%);
}
.terminal-output::-webkit-scrollbar, .scope-scroll::-webkit-scrollbar { width: 9px; }
.terminal-output::-webkit-scrollbar-track, .scope-scroll::-webkit-scrollbar-track { background: transparent; }
.terminal-output::-webkit-scrollbar-thumb, .scope-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid transparent; background-clip: padding-box; }
.boot-card { max-width: 760px; margin: 7vh auto 0; border-left: 2px solid var(--accent); padding: 18px 20px; background: var(--accent-soft); }
.boot-version { color: var(--accent); font-size: 12px; letter-spacing: .1em; }
.boot-card h2 { margin: 18px 0 12px; font-size: clamp(22px,4vw,38px); line-height:1.08; letter-spacing:-.04em; }
.boot-card p { color: var(--text); line-height:1.65; }
.boot-card .muted, .muted { color: var(--muted); }
.terminal-entry { margin: 0 0 20px; }
.terminal-entry:last-child { padding-bottom: 10px; }
.terminal-label { color: var(--muted); font-size: 11px; margin-bottom: 7px; }
.terminal-entry.user .terminal-label { color: var(--accent); }
.terminal-text { margin: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.62; font-size: clamp(13px, 1.1vw, 15px); }
.terminal-entry.error .terminal-text { color: var(--danger); border-left: 2px solid var(--danger); padding-left: 10px; }
.terminal-entry.system .terminal-text { color: var(--muted); }
.cursor { display:inline-block; width: 8px; height: 1.05em; margin-left: 2px; vertical-align:-.15em; background:var(--accent); animation: blink .78s steps(1,end) infinite; box-shadow: 0 0 12px rgba(87,255,163,.7); }
@keyframes blink { 50% { opacity:0; } }
.loading-dots::after { content:''; animation:dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%,100%{content:'...'} }
.jump-latest {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 5;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--accent);
    background: var(--panel-strong);
    box-shadow: 0 8px 30px rgba(0,0,0,.28);
    font-size: 10px;
}
.jump-latest:hover:not(:disabled) { transform: translateX(-50%) translateY(-1px); }
.jump-latest[hidden] { display: none; }
.composer-wrap { border-top:1px solid var(--line); background: var(--panel-strong); position: relative; z-index: 6; }
.composer { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; gap:8px; align-items:end; padding: 12px 12px 7px; }
.prompt-prefix { color:var(--accent); font-size:22px; padding:8px 2px; }
.composer textarea {
    resize:none;
    max-height:132px;
    min-height:42px;
    width:100%;
    border:1px solid var(--line);
    border-radius:7px;
    padding:11px 12px;
    color:var(--text);
    background:rgba(0,0,0,.16);
    outline:none;
    line-height:1.4;
}
html[data-theme="light"] .composer textarea { background: rgba(5,50,28,.035); }
.composer textarea:focus, .modal input:focus { border-color:var(--line-strong); box-shadow:0 0 0 3px var(--accent-soft); }
.composer-button { min-height:42px; border-radius:7px; padding:0 13px; background:var(--accent); color:#021008; font-weight:700; }
.composer-button.secondary { background:transparent; color:var(--accent); }
.composer-hint { padding: 0 14px 10px 43px; color:var(--muted); font-size:10px; }

.scope-panel { display: flex; flex-direction: column; min-height: 0; }
.scope-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hexagram-display { display:flex; gap:14px; align-items:center; padding:18px 16px 10px; }
.hex-symbol { font-size:62px; line-height:1; color:var(--accent); text-shadow:0 0 24px rgba(87,255,163,.22); }
.hex-number { color:var(--muted); font-size:11px; }
.hexagram-display h2 { margin:4px 0 0; font-size:17px; line-height:1.25; }
.hex-lines { display:flex; flex-direction:column; gap:6px; min-height:136px; padding:12px 16px 18px; }
.hex-line { display:grid; grid-template-columns:28px 1fr 28px; gap:8px; align-items:center; color:var(--muted); font-size:10px; }
.line-shape { display:flex; justify-content:center; gap:8px; height:8px; }
.line-shape span { height:6px; background:var(--text); flex:1; max-width:90px; }
.hex-line.moving .line-shape span { background:var(--accent); box-shadow:0 0 10px rgba(87,255,163,.35); }
.empty-lines { margin:auto; color:var(--muted); font-size:11px; }
.data-list { margin: 0 14px; border-top:1px solid var(--line); }
.data-list > div { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.data-list span { color:var(--muted); font-size:10px; }
.data-list strong { text-align:right; font-size:11px; line-height:1.35; }
.session-actions { flex: 0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 14px 14px; }

.drawer-backdrop { display: none; }
.mobile-scope-toggle, .mobile-hex-fab { display: none; }

.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.72); backdrop-filter:blur(10px); }
.modal-backdrop[hidden] { display:none; }
.modal { width:min(520px,100%); border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel-strong); box-shadow:var(--shadow); overflow:hidden; }
.modal-body { padding:20px; }
.modal-body p { color:var(--muted); line-height:1.55; }
.modal label { display:block; margin:18px 0 7px; color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.modal input { width:100%; height:44px; padding:0 12px; color:var(--text); border:1px solid var(--line); border-radius:7px; background:transparent; outline:none; }
.modal .full { width:100%; margin:18px 0 0; }
.modal-status { min-height:20px; margin-top:10px; color:var(--muted); font-size:11px; }
.modal-status.error { color:var(--danger); }
.music-frame { width:100%; min-height:400px; border:1px solid var(--line); background:transparent; }

@media (max-width: 1260px) {
    .workspace { grid-template-columns: minmax(220px, 250px) minmax(400px, 1fr) minmax(250px, 285px); }
    body.signal-collapsed .workspace { grid-template-columns: 0 minmax(400px, 1fr) minmax(250px, 285px); }
    .button-label { display:none; }
    .topbar-button { width:38px; padding:0; justify-content:center; }
    .metric { padding:8px; }
}

@media (max-width: 1020px) {
    .workspace { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
    body.signal-collapsed .workspace { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
    .signal-panel {
        position: fixed;
        z-index: 60;
        top: 12px;
        bottom: 12px;
        left: 12px;
        width: min(330px, calc(100vw - 24px));
        opacity: 0;
        transform: translateX(calc(-100% - 24px));
        pointer-events: none;
        border-width: 1px;
    }
    body.signal-open .signal-panel { opacity:1; transform:translateX(0); pointer-events:auto; }
    body.signal-collapsed .signal-panel { opacity:0; transform:translateX(calc(-100% - 24px)); border-width:1px; }
    .drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: block;
        background: rgba(0,0,0,.56);
        backdrop-filter: blur(5px);
    }
    .drawer-backdrop[hidden] { display:none; }
    .panel-close { display:grid; }
}

@media (max-width: 760px) {
    :root { --topbar-h: 62px; --gap: 8px; }
    .app-shell { padding: 8px; }
    .topbar { min-height:62px; padding:9px 10px; gap:10px; border-radius:10px; }
    .brand-lockup { gap:10px; }
    .brand-logo { width:82px; }
    .eyebrow { font-size:8px; letter-spacing:.12em; }
    h1 { font-size:14px; max-width:180px; }
    .status-pill { display:none; }
    .mobile-scope-toggle { display:inline-flex; }
    .workspace, body.signal-collapsed .workspace { display:block; min-height:0; }
    .terminal-panel { height:100%; border-radius:10px; }
    .scope-panel {
        position: fixed;
        z-index: 60;
        top: 8px;
        right: 8px;
        bottom: 8px;
        width: min(360px, calc(100vw - 16px));
        opacity: 0;
        transform: translateX(calc(100% + 16px));
        pointer-events: none;
        transition: opacity .24s ease, transform .24s ease;
    }
    body.scope-open .scope-panel { opacity:1; transform:translateX(0); pointer-events:auto; }
    .scope-close { display:grid; }
    .scope-scroll { flex:1 1 auto; }
    .mobile-hex-fab {
        position: fixed;
        right: 14px;
        bottom: calc(94px + env(safe-area-inset-bottom));
        z-index: 20;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 11px;
        border-radius: 999px;
        background: var(--panel-strong);
        box-shadow: 0 8px 28px rgba(0,0,0,.35);
        font-size: 10px;
    }
    .terminal-output { padding:15px; scrollbar-gutter:auto; }
    .boot-card { margin-top:3vh; }
    .composer { grid-template-columns:auto minmax(0, 1fr) auto; padding:10px 10px 6px; }
    .composer-button.secondary { display:none; }
    .composer-button { padding:0 11px; }
    .composer-hint { padding:0 10px 8px 34px; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .jump-latest { bottom:8px; }
}

@media (max-width: 480px) {
    .brand-copy h1 { display:none; }
    .brand-logo { width:88px; }
    .topbar-actions { gap:6px; }
    .topbar-button, .icon-button { width:34px; height:34px; min-height:34px; }
    .composer { grid-template-columns:auto minmax(0,1fr) auto; gap:6px; }
    .prompt-prefix { font-size:19px; }
    .composer textarea { min-height:40px; padding:10px; }
    .composer-button { min-height:40px; font-size:0; width:42px; padding:0; }
    .composer-button::after { content:'↑'; font-size:18px; }
    .composer-hint { display:none; }
    .mobile-hex-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
    .terminal-entry { margin-bottom:17px; }
    .terminal-text { font-size:13px; line-height:1.55; }
}

@media print {
    body { overflow:visible; background:white; }
    .topbar, .signal-panel, .scope-panel, .composer-wrap, .terminal-heading, .mobile-hex-fab, .drawer-backdrop, .jump-latest { display:none !important; }
    .app-shell, .workspace, .terminal-panel, .terminal-stage { display:block; width:100%; height:auto; padding:0; margin:0; border:0; box-shadow:none; background:white; color:black; }
    .terminal-output { overflow:visible; height:auto; color:black; background:white; }
    .terminal-text, .terminal-label { color:black !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}