@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DotGothic16&display=swap');

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

:root {
    --acid: #C6FF00;
    --acid-dim: rgba(198,255,0,0.10);
    --acid-line: rgba(198,255,0,0.28);

    --desk: #a9c6e4;
    --desk-2: #93b6da;
    --desk-3: #7ea4cd;

    --cmd-bg:       #111111;
    --cmd-bg-alt:   #161616;
    --cmd-bar:      #1c1c1c;
    --cmd-bar-2:    #262626;
    --cmd-bar-3:    #303030;
    --cmd-border:   #2c2c2c;
    --cmd-border-2: #3f3f3f;
    --cmd-title:    #1a1a1a;
    --cmd-text:     #d4d4d4;
    --cmd-dim:      #8a8a8a;
    --cmd-mute:     #5a5a5a;
    --cmd-accent:   #16c60c;
    --cmd-warn:     #c19c00;
    --cmd-close:    #e81123;

    --text: var(--cmd-text);
    --dim:  var(--cmd-dim);
    --mute: var(--cmd-mute);
    --warn: var(--cmd-warn);
    --close: var(--cmd-close);

    --line:   var(--cmd-border);
    --line-2: var(--cmd-border-2);

    --font: 'Consolas', 'Lucida Console', 'DotGothic16', 'Courier New', monospace;
    --mono: 'Consolas', 'Lucida Console', 'DotGothic16', 'Courier New', monospace;
}

html, body { height: 100%; }

body {
    background-color: var(--desk);
    background-image:
        radial-gradient(circle at 18% 6%, rgba(255,255,255,0.55), transparent 45%),
        radial-gradient(circle at 82% 94%, rgba(255,255,255,0.35), transparent 50%),
        linear-gradient(180deg, var(--desk) 0%, var(--desk-2) 55%, var(--desk-3) 100%);
    color: var(--text);
    font-family: var(--font);
    font-size: 12.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0) 3px,
        rgba(35,60,95,0.07) 3px,
        rgba(35,60,95,0.07) 4px
    );
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1001;
    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0) 72%,
        rgba(20,45,80,0.16) 100%
    );
}

::selection { background: var(--acid); color: #111111; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0e0e0e; }
::-webkit-scrollbar-thumb { background: #333333; border: 2px solid #0e0e0e; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

a { color: inherit; }
b, strong { font-weight: 700; color: #ffffff; }

.desk {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: 26px 1fr;
    gap: 8px;
    padding: 8px;
}

.taskbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--cmd-bar);
    border: 1px solid var(--cmd-border);
    padding: 0 10px;
    height: 26px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--cmd-text);
    user-select: none;
    min-width: 0;
}
.taskbar .start {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 400;
    flex-shrink: 0;
}
.taskbar .start::before {
    content: '';
    width: 10px; height: 10px;
    background:
        linear-gradient(var(--acid), var(--acid)) left top / 5px 5px no-repeat,
        linear-gradient(var(--acid), var(--acid)) right top / 5px 5px no-repeat,
        linear-gradient(var(--acid), var(--acid)) left bottom / 5px 5px no-repeat,
        linear-gradient(var(--acid), var(--acid)) right bottom / 5px 5px no-repeat;
}
.taskbar .start span { color: var(--acid); }

.taskbar .mid {
    flex: 1;
    text-align: center;
    color: var(--cmd-mute);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.taskbar .mid b { color: var(--cmd-dim); font-weight: 400; }

.taskbar .tray {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cmd-mute);
    font-size: 11.5px;
    flex-shrink: 0;
}
.taskbar .tray .dot { width: 6px; height: 6px; background: var(--cmd-accent); display: inline-block; }
.taskbar .tray a {
    width: 18px; height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
}
.taskbar .tray a:hover { border-color: var(--cmd-border-2); background: var(--cmd-bar-2); }
.taskbar .tray img { width: 11px; height: 11px; filter: grayscale(0.5); }
.taskbar .tray a:hover img { filter: none; }

.layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 8px;
    min-height: 0;
}

.win {
    border: 1px solid var(--cmd-border);
    background: var(--cmd-bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.winbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 0 8px;
    height: 22px;
    background: var(--cmd-title);
    border-bottom: 1px solid var(--cmd-border);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cmd-text);
    user-select: none;
    flex-shrink: 0;
}
.winbar .title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.winbar .title::before {
    content: '';
    width: 8px; height: 8px;
    border: 1px solid var(--cmd-accent);
    box-shadow: inset 0 0 0 1px var(--cmd-title), inset 0 0 0 2px var(--cmd-accent);
    flex-shrink: 0;
}
.winbar .right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 100%;
}
.winbar .ctrls { display: flex; gap: 0; height: 100%; }
.winbar .ctrls button {
    width: 28px;
    height: 100%;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--cmd-text);
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.winbar .ctrls button:hover { background: var(--cmd-bar-3); color: #ffffff; }
.winbar .ctrls button.c-close:hover { background: var(--cmd-close); color: #ffffff; }

.win-body {
    padding: 10px 12px;
    flex: 1 1 auto;
    min-height: 0;
}
.win-body.flush { padding: 0; }

.sidenav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.sidenav .win { flex: 1 1 auto; }
.sidenav .win-body { padding: 8px 6px; display: flex; flex-direction: column; }

.sidenav .side-h {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--cmd-mute);
    padding: 4px 8px;
    text-transform: lowercase;
}
.sidenav .side-h::before { content: ':: '; color: var(--cmd-accent); }

.sidenav a.navlink {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--cmd-dim);
    text-decoration: none;
    padding: 5px 10px;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.sidenav a.navlink:hover { color: #ffffff; background: var(--cmd-bg-alt); }
.sidenav a.navlink.active {
    color: var(--acid);
    border-left-color: var(--acid);
    background: var(--cmd-bg-alt);
}
.sidenav a.navlink::before {
    content: '>';
    color: var(--cmd-mute);
    flex-shrink: 0;
}
.sidenav a.navlink.active::before { color: var(--acid); }

.sidenav .side-status {
    padding: 8px 10px;
    border-top: 1px dashed var(--cmd-border);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cmd-mute);
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
}
.sidenav .side-status .row { display: flex; justify-content: space-between; gap: 8px; }
.sidenav .side-status .k { color: var(--cmd-mute); }
.sidenav .side-status .v { color: #ffffff; }
.sidenav .side-status .a { color: var(--cmd-accent); }

.main {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.main .win { flex: 1 1 auto; }

.main-body {
    padding: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.grid-wins {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.win-mini {
    border: 1px solid var(--cmd-border);
    background: var(--cmd-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.win-mini > .mini-body { padding: 10px 12px; }
.win-mini > .mini-body.flush { padding: 0; }

.intro { font-size: 12.5px; color: var(--cmd-text); line-height: 1.7; }
.intro p + p { margin-top: 6px; }
.intro .q { color: var(--acid); }
.intro .meta { color: var(--cmd-mute); font-size: 11.5px; }

h3.block-h {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 3px;
}
h3.block-h::before { content: '# '; color: var(--acid); }
p.block-hint { color: var(--cmd-mute); font-size: 11.5px; margin-bottom: 8px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--cmd-border-2);
    background: var(--cmd-bar-2);
    color: var(--cmd-text);
}
.btn:hover { background: var(--cmd-bar-3); color: #ffffff; border-color: #666666; }
.btn-acid { background: var(--acid); border-color: var(--acid); color: #111111; }
.btn-acid:hover { background: #d7ff33; border-color: #d7ff33; color: #111111; }
.btn-ghost { background: transparent; border-color: var(--cmd-border-2); color: var(--cmd-text); }
.btn-ghost:hover { border-color: var(--acid); color: var(--acid); background: rgba(198,255,0,0.05); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

.switch {
    display: inline-flex;
    border: 1px solid var(--cmd-border-2);
    background: var(--cmd-bg);
    padding: 2px;
    gap: 2px;
    margin-bottom: 8px;
}
.switch button {
    font-family: var(--mono);
    font-size: 11.5px;
    padding: 3px 8px;
    background: transparent;
    color: var(--cmd-dim);
    border: 1px solid transparent;
    cursor: pointer;
}
.switch button:hover { color: #ffffff; background: var(--cmd-bar-2); }
.switch button.active { background: var(--acid); color: #111111; border-color: var(--acid); }
.switch .c { opacity: .75; font-size: 10.5px; }

.type-switch { margin-right: 6px; }

.projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 1px;
    background: var(--cmd-border);
    border: 1px solid var(--cmd-border);
}
.pcard {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--cmd-bg);
    overflow: hidden;
    min-width: 0;
}
.pcard:hover { background: var(--cmd-bg-alt); box-shadow: inset 0 0 0 1px var(--acid); }
.pcard .thumb {
    position: relative;
    aspect-ratio: 1;
    background: #060606;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-bottom: 1px dashed var(--cmd-border);
}
.pcard .thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
    filter: contrast(1.05) saturate(0.9);
}
.pcard .thumb .ph { color: var(--cmd-mute); font-size: 16px; }
.pcard .body {
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}
.pcard .name {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cmd-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.pcard:hover .name { color: #ffffff; }

.tag {
    font-family: var(--mono);
    font-size: 9px;
    padding: 0 4px;
    white-space: nowrap;
    border: 1px solid;
    flex-shrink: 0;
    line-height: 14px;
}
.tag.rel  { color: var(--cmd-accent); border-color: var(--cmd-accent); background: rgba(22,198,12,0.10); }
.tag.dev  { color: var(--cmd-warn); border-color: var(--cmd-warn); background: rgba(193,156,0,0.10); }
.tag.hold { color: var(--cmd-mute); border-color: var(--cmd-border-2); }
.tag.app  { color: #4aa8ff; border-color: #4aa8ff; background: rgba(74,168,255,0.10); }

.empty {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--cmd-mute);
    padding: 10px;
}

.process-grid { display: flex; flex-direction: column; gap: 8px; }
.prow {
    border: 1px solid var(--cmd-border);
    background: var(--cmd-bg);
    overflow: hidden;
}
.prow:hover { border-color: var(--cmd-border-2); }
.prow-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.prow-note { font-family: var(--mono); font-size: 11.5px; color: var(--cmd-dim); }
.prow-note b { color: #ffffff; font-weight: 400; }

.bar {
    height: 8px;
    background: #060606;
    border: 1px solid var(--cmd-border);
    overflow: hidden;
}
.bar > i { display: block; height: 100%; background: var(--cmd-accent); }
.bar.hold > i { background: var(--cmd-mute); }
.bar-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cmd-dim);
    margin-top: 4px;
}
.bar-meta b { color: var(--cmd-accent); font-weight: 400; }
.bar-meta.hold b { color: var(--cmd-mute); }

.phases {
    font-family: var(--mono);
    font-size: 11px;
    border-top: 1px dashed var(--cmd-border);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.phase {
    display: grid;
    grid-template-columns: 14px 1fr 60px 32px;
    align-items: center;
    gap: 6px;
    color: var(--cmd-dim);
}
.phase .mark { color: var(--cmd-mute); text-align: center; }
.phase.done .mark { color: var(--cmd-accent); }
.phase.active .mark { color: var(--cmd-warn); }
.phase.done { color: var(--cmd-text); }
.phase.active .name { color: #ffffff; }
.phase .mini {
    height: 5px;
    background: #060606;
    border: 1px solid var(--cmd-border);
    overflow: hidden;
}
.phase .mini > i { display: block; height: 100%; background: var(--cmd-accent); }
.phase.active .mini > i { background: var(--cmd-warn); }
.phase.queued .mini > i { background: transparent; }
.phase .pct { text-align: right; color: var(--cmd-mute); font-size: 10.5px; }

.log-body { font-family: var(--mono); font-size: 11.5px; background: var(--cmd-bg); }
.log-body a {
    display: grid;
    grid-template-columns: 16px 70px 1fr;
    gap: 6px;
    padding: 3px 10px;
    text-decoration: none;
    color: var(--cmd-text);
    border-bottom: 1px solid #181818;
    align-items: center;
}
.log-body a:last-child { border-bottom: 0; }
.log-body a:hover { background: var(--cmd-bg-alt); color: #ffffff; }
.log-body .mark { color: var(--cmd-accent); text-align: center; }
.log-body .mark.u { color: var(--cmd-warn); }
.log-body .mark.f { color: var(--cmd-close); }
.log-body .d { color: var(--cmd-mute); font-size: 11px; }
.log-body a:hover .d { color: var(--acid); }

.news { display: flex; flex-direction: column; }
.news-item {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #181818;
    align-items: start;
}
.news-item:hover { background: var(--cmd-bg-alt); }
.news-item:last-child { border-bottom: 0; }
.news-item .date { font-family: var(--mono); font-size: 11.5px; color: var(--cmd-accent); }
.news-item .date::before { content: '['; color: var(--cmd-mute); }
.news-item .date::after  { content: ']'; color: var(--cmd-mute); }
.news-item .body .title {
    font-family: var(--mono);
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 3px;
}
.news-item .body .text { font-size: 12px; color: var(--cmd-dim); line-height: 1.65; }
.news-item .body .text + .text { margin-top: 4px; }

.video-main {
    border: 1px solid var(--cmd-border);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #000;
    margin-bottom: 8px;
    max-width: 720px;
}
.video-main iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 720px;
    margin-bottom: 10px;
}
.video-row .v {
    border: 1px solid var(--cmd-border);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #000;
}
.video-row .v:hover { border-color: var(--acid); }
.video-row .v iframe { width: 100%; height: 100%; border: 0; display: block; }

.channels {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cmd-border);
    max-width: 720px;
}
.channel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--cmd-bg);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--cmd-dim);
    border-bottom: 1px solid #181818;
    min-width: 0;
}
.channel:last-child { border-bottom: 0; }
.channel:hover { color: #ffffff; background: var(--cmd-bg-alt); }
.channel::before { content: '·'; color: var(--cmd-accent); flex-shrink: 0; }
.channel img { width: 11px; height: 11px; filter: grayscale(0.5); flex-shrink: 0; }
.channel:hover img { filter: none; }
.channel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.about-list { display: flex; flex-direction: column; gap: 6px; color: var(--cmd-dim); font-size: 12px; }
.about-list p { padding-left: 12px; position: relative; }
.about-list p::before {
    content: '–';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--cmd-mute);
}

.g-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    padding: 12px;
}
.g-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.g-cover {
    aspect-ratio: 1;
    border: 1px solid var(--cmd-border);
    background: #060606;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.g-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
    filter: contrast(1.05) saturate(0.9);
}
.g-cover .ph-lg { font-size: 34px; color: var(--cmd-mute); }

.g-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.g-info h1 {
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    word-break: break-word;
}
.g-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.g-status {
    align-self: flex-start;
    font-family: var(--mono);
    font-size: 10px;
    padding: 1px 7px;
    border: 1px solid;
}
.g-status.rel { color: var(--cmd-accent); border-color: var(--cmd-accent); background: rgba(22,198,12,0.08); }
.g-status.dev { color: var(--cmd-warn); border-color: var(--cmd-warn); background: rgba(193,156,0,0.08); }
.g-status.app { color: #4aa8ff; border-color: #4aa8ff; background: rgba(74,168,255,0.08); }

.g-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1px;
    background: var(--cmd-border);
    border: 1px solid var(--cmd-border);
}
.g-meta .m { background: var(--cmd-bg-alt); padding: 5px 8px; }
.g-meta .k { font-family: var(--mono); font-size: 10px; color: var(--cmd-mute); margin-bottom: 2px; }
.g-meta .v { font-family: var(--mono); font-size: 11.5px; color: #ffffff; }

.g-desc-title { font-family: var(--mono); font-size: 10px; color: var(--cmd-mute); margin-bottom: 4px; }
.g-desc { font-size: 12px; color: var(--cmd-dim); line-height: 1.65; }

.g-shots { padding: 0 12px 12px; }
.g-shots-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 6px;
    border-top: 1px dashed var(--cmd-border);
    margin-bottom: 6px;
}
.g-shots-head h3 { font-family: var(--mono); font-size: 12px; color: #ffffff; }
.g-shots-head .c { font-family: var(--mono); font-size: 11px; color: var(--cmd-mute); }

.g-shots-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--cmd-border-2) transparent;
}
.g-shots-grid::-webkit-scrollbar { height: 6px; }
.g-shots-grid::-webkit-scrollbar-track { background: transparent; }
.g-shots-grid::-webkit-scrollbar-thumb { background: var(--cmd-border-2); }
.g-shots-grid::-webkit-scrollbar-thumb:hover { background: var(--acid); }

.shot {
    position: relative;
    scroll-snap-align: start;
    aspect-ratio: 16/9;
    border: 1px solid var(--cmd-border);
    overflow: hidden;
    background: #060606;
    cursor: pointer;
}
.shot:hover { border-color: var(--acid); }
.shot img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
    filter: contrast(1.05) saturate(0.9);
}

.shot-cap {
    position: absolute;
    left: 4px; right: 4px; bottom: 4px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--cmd-text);
    background: rgba(0,0,0,.8);
    border: 1px solid var(--cmd-border);
    padding: 1px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.err h1 { font-family: var(--mono); font-size: 26px; color: var(--cmd-close); margin-bottom: 6px; }
.err p { color: var(--cmd-dim); margin-bottom: 5px; font-family: var(--mono); font-size: 12px; }
.err code {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--acid);
    background: #060606;
    border: 1px solid var(--cmd-border);
    padding: 1px 6px;
}

.lb {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: none;
    place-items: center;
    z-index: 999;
    padding: 40px;
}
.lb.open { display: grid; }
.lb img {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--cmd-border-2);
    image-rendering: pixelated;
}
.lb-x, .lb-p, .lb-n {
    position: absolute;
    width: 30px; height: 24px;
    background: var(--cmd-bar-2);
    border: 1px solid var(--cmd-border-2);
    color: var(--cmd-text);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--mono);
}
.lb-x:hover, .lb-p:hover, .lb-n:hover { background: var(--cmd-bar-3); color: #ffffff; border-color: #666666; }
.lb-x:hover { background: var(--cmd-close); border-color: var(--cmd-close); color: #ffffff; }
.lb-x { top: 12px; right: 12px; }
.lb-p { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-n { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-count {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--cmd-dim);
    background: var(--cmd-bg);
    border: 1px solid var(--cmd-border);
    padding: 3px 10px;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-count b { color: var(--acid); font-weight: 400; }

@media (max-width: 1100px) and (min-width: 861px) {
    .desk { gap: 6px; padding: 6px; }
    .layout { grid-template-columns: 190px 1fr; gap: 6px; }
    .g-layout { grid-template-columns: 180px 1fr; }
    .video-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    html, body { overflow: auto; height: auto; }

    body { font-size: 12.5px; }

    .desk {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .taskbar {
        height: 30px;
        padding: 0 10px;
        font-size: 11.5px;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .layout {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .sidenav { overflow: visible; }
    .sidenav .win { flex: initial; }

    .main-body { overflow-y: visible; }

    .video-row {
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
    }
    .video-main { max-width: none; }
    .channels { max-width: none; }

    .g-layout {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
    }
    .g-side {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }
    .g-cover {
        width: 160px;
        flex-shrink: 0;
    }
    .g-info { gap: 10px; }
    .g-info h1 { font-size: 16px; }

    #gameContent .g-layout { grid-template-columns: 1fr; padding: 12px; }
    #gameContent .g-side { flex-direction: row; }
}

@media (max-width: 520px) {
    body { font-size: 12px; }

    .desk { padding: 6px; gap: 6px; }
    .taskbar { padding: 0 8px; height: 28px; font-size: 11px; gap: 8px; }
    .taskbar .mid { display: none; }
    .taskbar .tray a { width: 16px; height: 16px; }
    .taskbar .tray img { width: 10px; height: 10px; }

    .winbar { height: 22px; font-size: 10.5px; }
    .winbar .ctrls button { width: 26px; }

    .projects { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .pcard .name { font-size: 10.5px; }
    .pcard .body { padding: 3px 5px; }
    .pcard .tag { font-size: 8.5px; padding: 0 3px; }

    .phase { grid-template-columns: 14px 1fr 44px; }
    .phase .pct { display: none; }

    .news-item { grid-template-columns: 62px 1fr; gap: 6px; padding: 6px 8px; }
    .log-body a { grid-template-columns: 14px 60px 1fr; gap: 5px; padding: 3px 8px; }

    .video-row { grid-template-columns: 1fr; }

    #gameContent .g-layout {
        grid-template-columns: 1fr;
        padding: 10px;
        gap: 10px;
    }
    #gameContent .g-side {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #gameContent .g-cover {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
        aspect-ratio: 1;
    }
    #gameContent .g-info {
        gap: 10px;
    }
    #gameContent .g-info h1 {
        font-size: 15px;
        line-height: 1.25;
    }
    #gameContent .g-meta {
        grid-template-columns: 1fr 1fr;
    }
    #gameContent .g-actions {
        flex-direction: column;
        gap: 6px;
    }
    #gameContent .g-actions .btn {
        width: 100%;
        justify-content: center;
    }
    #gameContent .g-desc {
        font-size: 12px;
        line-height: 1.6;
    }
    #gameContent .g-shots {
        padding: 0 10px 10px;
    }
    #gameContent .g-shots-grid {
        grid-auto-columns: minmax(78%, 1fr);
    }
    #gameContent .shot-cap {
        font-size: 10px;
    }
}