body {
    margin: 0;
    background: #f2f2f2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- window ---------- */
.term-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 1rem;
}
.term-window {
    width: 100%;
    max-width: 960px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .3), 0 0 0 1px #1b1e20;
    background: #232627;
}
.term-titlebar {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 6px 0 8px;
    background: #31363b;
    border-bottom: 1px solid #1b1e20;
}
.term-icon { flex: none; }
.term-title {
    position: absolute; left: 0; right: 0; text-align: center;
    color: #fcfcfc; font: 13px "Noto Sans", "Segoe UI", -apple-system, sans-serif;
    pointer-events: none;
}
.term-controls { margin-left: auto; display: flex; gap: 6px; position: relative; }
.tb-btn {
    width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; display: flex; align-items: center; justify-content: center;
    cursor: default;
}
.tb-btn svg { width: 10px; height: 10px; fill: none; stroke: #fcfcfc; stroke-width: 1.3; }
.tb-btn:hover { background: rgba(252, 252, 252, .2); }
.tb-btn.close:hover { background: #da4453; }
.tb-btn:focus { outline: none; }

/* ---------- body ---------- */
.term-body {
    height: 70vh;
    overflow-y: auto;
    padding: 12px 14px;
    color: #fcfcfc;
    font: 14px/1.45 "JetBrains Mono", "Fira Code", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    cursor: text;
}
.line { white-space: pre-wrap; word-break: break-word; min-height: 1.45em; }
.line.input-line { white-space: pre; position: relative; }
.line.banner { white-space: pre; line-height: 1.05; word-break: normal; margin: 6px 0; }
.term-body a { color: #4facfe; text-decoration: underline; }
.term-body a:hover { color: #9fd3ff; }

#term-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; outline: none;
    font: inherit; background: transparent; color: transparent;
    caret-color: transparent; opacity: 0;
}

.cursor {
    background: #fcfcfc;
    color: #232627;
    animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { background: transparent; color: inherit; } }

/* ---------- colours ---------- */
.p-user { color: #1cdc9a; font-weight: bold; }
.p-path { color: #3daee9; font-weight: bold; }
.c-cmd { color: #ffc371; }
.c-dir { color: #3daee9; font-weight: bold; }
.c-dim { color: #8a8a8a; }
.c-err { color: #ff6b6b; }

/* ---------- KDE chevron (navbar toggler) ---------- */
.navbar-dark .navbar-toggler { border: 0; padding: 4px 6px; color: #fcfcfc; }
.navbar-toggler:focus { outline: none; box-shadow: none; }
.kde-chevron { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; display: block; }
.navbar-toggler:hover, .navbar-toggler[aria-expanded="true"] { color: #3daee9; }
.navbar-toggler[aria-expanded="true"] .kde-chevron { transform: rotate(90deg); }

.title-short { display: none; }

/* ---------- mobile profile ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 576px) {
    .term-wrap { padding: .75rem .5rem; }
    .term-window {
        border-radius: 4px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 1px #1b1e20;
        height: 70vh;
        height: 70dvh;
        min-height: 260px;
        display: flex;
        flex-direction: column;
    }
    .term-titlebar { flex: none; }
    .term-titlebar { height: 26px; padding: 0 4px 0 6px; }
    .term-icon { width: 14px; height: 14px; }
    .term-title { font-size: 12px; }
    .title-long { display: none; }
    .title-short { display: inline; }
    .term-controls { gap: 4px; }
    .tb-btn { width: 16px; height: 16px; }
    .tb-btn svg { width: 9px; height: 9px; }
    .term-body {
        font-size: 12.5px;
        padding: 8px 8px;
        flex: 1;
        height: auto;
        min-height: 0;
    }
    .line.banner { margin: 4px 0; line-height: 1.1; }
}