*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    --bg-deep:    #000000;
    --bg-mid:     #050505;
    --win-base:   #0a0a0a;
    --win-glass:  rgba(12, 12, 12, .72);
    --bar:        rgba(16, 16, 16, .78);
    --bord:       rgba(255, 255, 255, .12);
    --bord-soft:  rgba(255, 255, 255, .06);
    --win-tint:   rgba(255, 255, 255, .02);
    --brass:      #ffffff;
    --brass-hi:   #ffffff;
    --brass-hi-rgb: 255, 255, 255;  /* для rgba(var(--brass-hi-rgb), α) — glow/shimmer */
    --brass-dim:  rgba(255, 255, 255, .45);
    --text:       #d8d8d8;
    --text-dim:   #9a9a9a;
    --text-mute:  #6a6a6a;
    --green:      #d8d8d8;
    --red:        #d8d8d8;

    --font: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
    --fs:   clamp(12px, 3.5vw, 13.5px);
}

body {
    font-family: var(--font);
    font-size: var(--fs);
    line-height: 1.65;
    background: var(--bg-deep);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem 0;
    -webkit-font-smoothing: antialiased;
}

.glow {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255, 255, 255, .04) 0%, transparent 65%),
        var(--bg-deep);
    pointer-events: none;
}

/* ── Terminal window ── */

.win {
    width: min(660px, calc(100vw - 1.5rem));
    border-radius: 11px;
    border: 1px solid var(--bord);
    overflow: hidden;
    background: var(--win-base);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 1px 0 rgba(255, 255, 255, .06) inset;
    animation: boot .5s cubic-bezier(.16, 1, .3, 1) both;
    position: relative;
}

@keyframes boot {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ── Title bar ── */

.bar {
    background: var(--bar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--bord);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    user-select: none;
}

.dots { display: flex; gap: 7px; flex-shrink: 0; }

.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.dot.muted {
    background: rgba(58, 58, 60, .8);
    border: 1px solid rgba(85, 85, 90, .9);
}
.dot.brass {
    background: var(--brass);
    box-shadow: 0 0 6px rgba(255, 255, 255, .35);
}

.bar-t {
    flex: 1;
    text-align: center;
    color: var(--text-mute);
    font-size: 12px;
    letter-spacing: .3px;
}

/* mirrors .dots: 3 × 11px dots + 2 × 7px gaps — update both if either changes */
.bar-spacer {
    width: calc(3 * 11px + 2 * 7px);
    flex-shrink: 0;
}

/* ── Body ── */

.body {
    background: var(--win-glass);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    padding: clamp(12px, 4vw, 18px) clamp(12px, 4vw, 20px) clamp(14px, 4vw, 22px);
    min-height: 300px;
    cursor: text;
    overflow-y: auto;
    /* shrink when mobile keyboard is open */
    max-height: calc(100dvh - 3rem - 46px);
}

/* ── History lines ── */

#hist .ln {
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Welcome box ── */

.wb {
    border: 1px solid var(--bord);
    border-radius: 7px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--win-tint);
}

.hl {
    color: var(--text-dim);
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.9;
    margin-bottom: 2px;
}

.hl .k {
    display: inline-block;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 3px;
    padding: 0 4px;
    color: var(--brass);
    font-size: clamp(9px, 2.5vw, 10.5px);
    font-family: var(--font);
    line-height: 1.6;
}

/* ── Prompt row ── */

.row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}

#ps1 { white-space: nowrap; flex-shrink: 0; }

/* ── Command area ── */

.ca {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
}

#inp {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    outline: none;
    color: transparent;
    caret-color: transparent;
    /* 16px prevents iOS Safari from auto-zooming on focus (input is invisible anyway) */
    font-size: 16px;
    font-family: var(--font);
    letter-spacing: inherit;
    z-index: 1;
    width: 100%;
}

#dt { color: var(--text); white-space: pre; }
#dg { color: rgba(255, 255, 255, .22); white-space: pre; }

.cursor {
    color: var(--brass);
    animation: blink 1.1s step-end infinite;
    user-select: none;
    flex-shrink: 0;
}

@keyframes blink { 50% { opacity: 0; } }

/* ── Suggestions ── */

.sg { margin-top: 5px; }

.si {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.si:hover, .si.on {
    background: var(--bord-soft);
}

.si-n .m { color: var(--brass); }
.si-n .r { color: var(--text-mute); }
.si-a    { color: var(--brass-dim); font-size: 11px; flex-shrink: 0; }
.si-u    { color: var(--text-mute); font-size: clamp(10px, 2.8vw, 11px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Color helpers ── */

.cb  { color: var(--brass); }
.cd  { color: var(--text-mute); }
.ct  { color: var(--text); }
.cg  { color: var(--green); }
.crd { color: var(--red); }

/* hover-подготовка для команд (glow добавляется в Task 6) */
.wb .cb,
#hist .cb {
    transition: color .18s, text-shadow .18s;
    cursor: default;
}

/* ── Mobile tweaks ── */

@media (max-width: 480px) {
    .bar-t { font-size: 11px; }
    /* hide URL in suggestions on very narrow screens */
    .si-u { display: none; }
}

/* ── Hover-glow на командах ── */

.wb .cb:hover {
    color: var(--brass-hi);
    text-shadow: 0 0 8px rgba(var(--brass-hi-rgb), .5);
}

/* ── Shimmer латуни ── */

.win::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(var(--brass-hi-rgb), .04) 50%,
        transparent 70%
    );
    background-size: 220% 100%;
    animation: shimmer 8s linear infinite;
}

@keyframes shimmer {
    0%   { background-position: 220% 0; }
    100% { background-position: -120% 0; }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
    .win,
    .win::after {
        animation: none !important;
    }
    .cursor { animation: none !important; }
}