:root {
    --bg:           #0a0a0a;
    --bg-soft:      #111111;
    --bg-softer:    #161616;
    --line:         rgba(255,255,255,.08);
    --accent:       #ff7ad6;
    --accent-soft:  rgba(255,122,214,.22);
    --pink:         #ff7ad6;
    --violet:       #8b5fff;
    --text:         #fafafa;
    --text-mute:    #a1a1a1;
    --text-dim:     #737373;
    --ok:           #00c951;
    --err:          #fb2c36;
    --mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ui:           "Inter", system-ui, sans-serif;
    --radius:       12px;
    --pad-x:        34px;
    --pad-top:      32px;
    --app-vh:       100dvh;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--ui);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    min-height: var(--app-vh);
    overflow: hidden;
}

body {
    background:
        radial-gradient(ellipse at 20% -10%, rgba(139,95,255,.18), transparent 55%),
        radial-gradient(ellipse at 85% 110%, rgba(255,122,214,.14), transparent 55%),
        var(--bg);
}

.scanlines {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: repeating-linear-gradient(
        180deg,
        rgba(255,255,255,.012) 0 1px,
        transparent 1px 3px
    );
    mix-blend-mode: overlay;
}

/* ── App shell ── */
.app {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: var(--app-vh);
    padding: 24px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.window {
    width: 100%;
    max-width: 1180px;
    height: calc(100vh - 48px);
    height: calc(var(--app-vh) - 48px);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 40px 120px #0009, 0 0 0 1px #d9775714, inset 0 1px #ffffff0a;
}

/* ── Titlebar ── */
.titlebar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    user-select: none;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.titlebar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: #ffffff0a;
}

.traffic { display: flex; gap: 8px; }

.traffic .dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
}

.dot--close {
    background: #ff5f57;
    position: relative;
}
.dot--close::before {
    content: "×";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700;
    color: #0000009e;
    opacity: 0;
    transition: opacity .12s ease;
}
.dot--close:hover::before { opacity: 1; }
.dot--min { background: #febc2e; }
.dot--max { background: #28c840; }

.titlebar__title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-mute);
}

.titlebar__label { color: var(--accent); font-weight: 600; }

.titlebar__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-mute);
    background: var(--bg-soft);
}

.pill--live {
    color: var(--ok);
    border-color: #00c95159;
    background: #00c95114;
}

.pulse {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ok);
    display: inline-block;
    animation: pulse 1.8s cubic-bezier(.22,1,.36,1) infinite;
}

@keyframes pulse {
    0%        { box-shadow: 0 0 0 0 #00c95180; }
    80%, 100% { box-shadow: 0 0 0 8px #00c95100; }
}

/* ── Terminal ── */
.terminal {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ── Banner (ASCII art, outside xterm) ── */
.terminal-banner {
    flex: none;
    padding: var(--pad-top) var(--pad-x) 4px;
    align-self: stretch;
    overflow: hidden;
}

.terminal-banner__full {
    display: inline-grid;
    grid-auto-rows: min-content;
    width: fit-content;
    max-width: 100%;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
    text-rendering: geometricPrecision;
    font-size: clamp(8.2px, .9vw, 12.2px);
    line-height: .96;
    letter-spacing: -.01em;
    overflow: hidden;
    vertical-align: top;
}

.terminal-banner__row {
    display: grid;
    grid-template-columns: repeat(var(--banner-cols), 1ch);
    width: max-content;
}

.terminal-banner__cell {
    display: block;
    width: 1ch;
    min-width: 1ch;
    height: 1em;
    overflow: hidden;
    white-space: pre;
}

.terminal-banner__subline {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-family: var(--mono);
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(250,250,250,.82);
}

.terminal-banner__tagline {
    color: rgba(255,255,255,.92);
    font-weight: 700;
    font-size: 1.38em;
}

.terminal-banner__sep { color: rgba(255,255,255,.2); }

.terminal-banner__meta { white-space: nowrap; }

/* ── Terminal screen (interactive area) ── */
.terminal-screen {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    cursor: text;
    scrollbar-width: thin;
    scrollbar-color: #ffffff14 transparent;
}

.terminal-screen::-webkit-scrollbar { width: 8px; }
.terminal-screen::-webkit-scrollbar-thumb { background: #ffffff14; border-radius: 999px; }
.terminal-screen::-webkit-scrollbar-track { background: transparent; }

.terminal-pinned {
    flex: none;
    padding: 10px var(--pad-x) 6px;
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text-mute);

}

.terminal-output {
    flex: none;
    padding: 10px var(--pad-x) 2px;
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text-mute);
}

.terminal-input-line {
    flex-shrink: 0;
    padding: 4px var(--pad-x) 10px;
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
}

/* Prompt colors — all inline, stay on one line */
.p-user  { color: var(--violet); }
.p-at    { color: var(--text-dim); }
.p-host  { color: var(--pink); }
.p-arrow { color: var(--pink); }

.input-display { color: var(--text); white-space: pre; vertical-align: baseline; }

.cursor {
    color: var(--pink);
    font-size: 13.5px;
    vertical-align: baseline;
    animation: blink 1.1s step-end infinite;
}

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

/* Output lines */
.out-line {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}

.out-line.cmd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.out-line.cmd .c-user  { color: var(--violet); }
.out-line.cmd .c-at    { color: var(--text-dim); }
.out-line.cmd .c-host  { color: var(--pink); }
.out-line.cmd .c-arrow { color: var(--pink); margin-right: 8px; }
.out-line.cmd .c-text  { color: var(--text); }

.out-line.empty  { min-height: 1.35em; }
.out-line.dim    { color: var(--text-dim); }
.out-line.mute   { color: var(--text-mute); }
.out-line.pink   { color: var(--pink); }
.out-line.err    { color: var(--err); }
.out-line.ok     { color: var(--ok); }

/* ── Hidden input capture ── */
.input-capture {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    resize: none;
    border: none;
    padding: 0;
    background: transparent;
}

/* ── Statusbar ── */
.statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
    background: #ffffff04;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    flex-shrink: 0;
}

.statusbar__left { display: flex; gap: 14px; flex-wrap: wrap; }
.statusbar__item { display: inline-flex; gap: 6px; align-items: center; }
.statusbar__right { color: var(--pink); font-weight: 500; }
.statusbar__item--mobile { display: none; }

kbd {
    font-family: var(--mono);
    background: var(--bg-softer);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    color: var(--text);
    line-height: 1;
}

/* ── Responsive ── */
@media (max-width: 820px) {
    :root { --pad-x: 12px; --pad-top: 18px; }

    .app { padding: 0; }

    .window {
        height: var(--app-vh);
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .titlebar__title { display: none; }
    .titlebar { padding: 10px 12px; gap: 10px; }
    .traffic .dot { width: 13px; height: 13px; }

    .terminal-banner__full { font-size: 6.8px; }
    .terminal-banner__subline { font-size: 14px; line-height: 1.55; }

    .terminal-pinned { padding: 10px 12px 6px; font-size: 14px; line-height: 1.38; }
    .terminal-output { padding: 10px 12px 2px; font-size: 14px; line-height: 1.38; }
    .terminal-input-line { padding: 4px 12px 10px; font-size: 14px; }

    .statusbar {
        padding: 7px 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .statusbar__left { gap: 8px; }
    .statusbar__item:not(.statusbar__item--mobile) { display: none; }
    .statusbar__item--mobile { display: inline-flex; }
}

@media (max-width: 480px) {
    .scanlines { display: none; }
    .terminal-banner__full { font-size: 5.5px; }
    .terminal-banner__subline { font-size: 13px; }
}

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