:root{
    --bg:#050505;
    --glass:rgba(15,15,15,.7);
    --border:rgba(255,255,255,.08);
    --text:#e0e0e0;
    --muted:#666;

    --neon-green:#00ff88;
    --neon-blue:#00f3ff;

    --t-fg:#cbd5e1;
    --t-dim:#64748b;
    --t-ok:#22c55e;
    --t-warn:#f59e0b;
    --t-err:#ef4444;
    --t-info:#38bdf8;
    --t-key:#a78bfa;
    --t-path:#34d399;
    --t-num:#fb7185;

    --font-ui:'Inter',sans-serif;
    --font-mono:'JetBrains Mono',monospace;
}

body{
    background-color:var(--bg);
    color:var(--text);
    font-family:var(--font-ui);
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100vh;
}

#starfield{ position:fixed; top:0; left:0; z-index:-1; }
.mobile-header{ display:none; }

.grid-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:280px 180px 180px 180px;
    gap:16px;
    width:100%;
    max-width:1200px;
    padding:40px 20px;
}

.card{
    background:var(--glass);
    border:1px solid var(--border);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-radius:24px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .2s ease,border-color .2s;
}
.card:hover{ border-color:rgba(255,255,255,.2); }

.card-header-sm{
    font-size:.7rem;
    color:var(--muted);
    padding:16px 20px 0;
    font-family:var(--font-mono);
    letter-spacing:1px;
    display:flex;
    align-items:center;
    gap:8px;
}

.hint-pill{
    margin-left:auto;
    font-size:.62rem;
    color:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.25);
    padding:3px 8px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.profile{
    grid-column:span 2;
    grid-row:span 1;
    padding:24px;
    justify-content:space-between;
    background:linear-gradient(145deg,rgba(20,20,20,.8),rgba(10,10,10,.9));
}
.id-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.id-chip{
    font-family:var(--font-mono);
    font-size:.7rem;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:5px;
    background:rgba(255,255,255,.05);
    padding:4px 8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.08);
}
.live-indicator{ font-size:.7rem; color:var(--neon-green); display:flex; align-items:center; gap:6px; font-weight:600; }
.dot{ width:6px; height:6px; background:var(--neon-green); border-radius:50%; box-shadow:0 0 8px var(--neon-green); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:.6;} 50%{opacity:1;} }

.profile-body{ display:flex; gap:20px; align-items:center; }
.avatar-container{ position:relative; width:80px; height:80px; flex-shrink:0; }
.avatar-img{ width:100%; height:100%; border-radius:16px; object-fit:cover; border:1px solid var(--border); }
.scan-line{
    position:absolute; top:0; left:0; width:100%; height:2px;
    background:var(--neon-green); box-shadow:0 0 10px var(--neon-green);
    opacity:.6; animation:scan 3s infinite linear;
}
@keyframes scan{ 0%{top:0;opacity:0;} 50%{opacity:1;} 100%{top:100%;opacity:0;} }

.profile-info h1{ margin:0; font-size:1.6rem; font-weight:650; letter-spacing:.2px; }

.role-static{
    margin-top:6px;
    font-family:var(--font-mono);
    font-size:.82rem;
    color:rgba(255,255,255,.62);
    letter-spacing:.2px;
    padding:6px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.18);
    display:inline-block;
}

.stats-grid{ display:flex; gap:15px; margin-top:12px; }
.stat-box{ display:flex; flex-direction:column; }
.stat-box .label{ font-size:.6rem; color:var(--muted); font-family:var(--font-mono); letter-spacing:1px; }
.stat-box .val{ font-size:.9rem; font-weight:550; color:var(--text); }

.profile-footer{ display:flex; gap:10px; margin-top:auto; }
.action-btn{
    flex:1;
    padding:10px;
    border-radius:12px;
    border:none;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:.2s;
}
.action-btn.primary{ background:rgba(255,255,255,.92); color:#000; }
.action-btn.secondary{ background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--border); }
.action-btn.small{ padding:8px; font-size:.75rem; margin:0 20px 18px; width:calc(100% - 40px); }

.files{ grid-column:span 2; grid-row:span 2; font-family:var(--font-mono); }
.files-meta{ margin-left:auto; display:flex; gap:8px; }

.chip{
    font-size:.62rem;
    color:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.22);
    padding:3px 8px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.files-toolbar{
    padding:12px 20px 8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.files-search{
    flex:1;
    height:36px;
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.22);
    padding:0 12px;
    color:rgba(255,255,255,.6);
}
.files-search input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    color:rgba(255,255,255,.85);
    font-family:var(--font-mono);
    font-size:.8rem;
}

.files-actions{ display:flex; gap:8px; }

.files-btn{
    width:36px;
    height:36px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.75);
    cursor:pointer;
    transition:.2s;
    display:flex;
    align-items:center;
    justify-content:center;
}
.files-btn:hover{ background:rgba(255,255,255,.10); color:#fff; }

.file-tree{ padding:6px 20px 14px; display:flex; flex-direction:column; gap:8px; }
.folder-header{
    padding:10px 10px;
    border-radius:12px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    color:#bbb;
    transition:.18s;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.03);
}
.folder-header:hover{ background:rgba(255,255,255,.06); color:#fff; }

.folder-name{ letter-spacing:.3px; }

.count-pill{
    margin-left:auto;
    font-size:.62rem;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.20);
    color:rgba(255,255,255,.70);
}

.folder-content{
    display:none;
    flex-direction:column;
    gap:6px;
    padding-left:22px;
    margin-left:10px;
    border-left:1px dashed rgba(255,255,255,.10);
    margin-top:8px;
}
.folder.open .folder-content{ display:flex; }
.folder.open .arrow{ transform:rotate(90deg); }

.file{
    text-decoration:none;
    color:rgba(255,255,255,.65);
    padding:10px 10px;
    font-size:.85rem;
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(0,0,0,.18);
    transition:.18s;
}
.file:hover{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.12); }

.file-name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.file-pill{
    font-size:.60rem;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.75);
}
.tag-sec{ border-color:rgba(34,197,94,.25); color:rgba(34,197,94,.95); background:rgba(34,197,94,.06); }
.tag-doc{ border-color:rgba(56,189,248,.25); color:rgba(56,189,248,.95); background:rgba(56,189,248,.06); }
.tag-web{ border-color:rgba(167,139,250,.25); color:rgba(167,139,250,.95); background:rgba(167,139,250,.06); }
.tag-bot{ border-color:rgba(251,113,133,.25); color:rgba(251,113,133,.95); background:rgba(251,113,133,.06); }

.files-statusbar{
    margin-top:auto;
    padding:10px 16px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(0,0,0,.16);
}
.status-left{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:.72rem;
    color:rgba(255,255,255,.65);
}
.status-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:rgba(0,255,136,.9);
    box-shadow:0 0 10px rgba(0,255,136,.35);
}
.status-right{ display:flex; gap:12px; }
.mini{
    font-family:var(--font-mono);
    font-size:.72rem;
    color:rgba(255,255,255,.55);
    display:flex;
    align-items:center;
    gap:6px;
}

.terminal{ grid-column:span 2; grid-row:span 1; background:#0a0a0a; }
.terminal-window{
    padding:15px 20px;
    font-family:var(--font-mono);
    font-size:.8rem;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    height:100%;
    color:var(--t-fg);
}
.line{ margin-bottom:4px; opacity:.95; display:flex; gap:10px; align-items:baseline; }
.line.blink{ animation:blink 1s infinite; }
@keyframes blink{ 0%,100%{opacity:.4;} 50%{opacity:1;} }
.prompt{ color:rgba(255,255,255,.25); user-select:none; }
.code{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-dim{ color:var(--t-dim);} .t-ok{ color:var(--t-ok);} .t-warn{ color:var(--t-warn);}
.t-err{ color:var(--t-err);} .t-info{ color:var(--t-info);} .t-key{ color:var(--t-key);}
.t-path{ color:var(--t-path);} .t-num{ color:var(--t-num);}
.t-badge{
    font-size:.62rem;
    letter-spacing:.8px;
    padding:1px 6px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    margin-left:8px;
}

.mascot{ grid-column:span 1; grid-row:span 2; cursor:pointer; }
.photo-stack{ position:relative; width:100%; height:100%; margin-top:15px; }
.photo{
    position:absolute; top:0; left:15px; width:calc(100% - 30px); height:85%;
    background-size:cover; background-position:center; border-radius:16px;
    border:1px solid var(--border);
    transition:.4s cubic-bezier(.2,.8,.2,1);
}
.p1{ z-index:3; transform:rotate(-2deg); }
.p2{ z-index:2; transform:rotate(3deg) translateY(5px); opacity:.7; }
.p3{ z-index:1; transform:rotate(-4deg) translateY(10px); opacity:.4; }
.mascot:hover .p1{ transform:rotate(0deg) translateY(-5px); }
.mascot.shuffling .p1{ transform:translateX(120%); opacity:0; }

.player.player-min{
    padding:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.player-min-body{
    padding:10px 16px 6px;
    display:grid;
    grid-template-columns:72px 1fr 52px;
    gap:12px;
    align-items:center;
}
.player.player-min .player-visual{
    width:72px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.20);
}
.player.player-min .wave-visualizer{
    display:flex;
    gap:4px;
    height:30px;
    align-items:flex-end;
}
.player.player-min .bar{
    width:6px;
    height:10px;
    border-radius:8px;
    background:rgba(255,255,255,.75);
    opacity:.75;
    transform-origin:bottom;
}
#music-widget.playing .bar{
    animation:barPulse .85s infinite ease-in-out;
}
#music-widget.playing .bar:nth-child(2){ animation-delay:.08s; }
#music-widget.playing .bar:nth-child(3){ animation-delay:.16s; }
#music-widget.playing .bar:nth-child(4){ animation-delay:.24s; }
#music-widget.playing .bar:nth-child(5){ animation-delay:.32s; }
@keyframes barPulse{
    0%{ transform:scaleY(.55); opacity:.55; }
    50%{ transform:scaleY(1.7); opacity:1; }
    100%{ transform:scaleY(.65); opacity:.65; }
}

.player-min-meta{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}
.player.player-min .track-name{
    font-size:.82rem;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.player.player-min .track-status{
    font-size:.62rem;
    color:var(--muted);
    font-family:var(--font-mono);
    letter-spacing:1px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.play-btn.play-btn-min{
    width:46px;
    height:46px;
    border-radius:16px;
    background:rgba(255,255,255,.92);
    color:#000;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    transition:.2s;
}
.play-btn.play-btn-min:hover{
    transform:translateY(-1px) scale(1.03);
    box-shadow:0 0 18px rgba(255,255,255,.18);
}

.player-min-bottom{
    margin-top:auto;
    padding:10px 14px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.14);
}

.mini-ctl{
    width:36px;
    height:36px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.82);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.18s;
}
.mini-ctl:hover{ background:rgba(255,255,255,.10); color:#fff; }

.mini-divider{
    width:1px;
    height:26px;
    background:rgba(255,255,255,.10);
    margin:0 2px;
    border-radius:999px;
}

.vol{
    width:92px;
    appearance:none;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    outline:none;
}
.vol::-webkit-slider-thumb{
    appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 0 14px rgba(255,255,255,.18);
    cursor:pointer;
}
.vol::-moz-range-thumb{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 0 14px rgba(255,255,255,.18);
    cursor:pointer;
}

.player.player-min .timecode{
    font-family:var(--font-mono);
    font-size:.64rem;
    color:rgba(255,255,255,.55);
    width:46px;
    text-align:center;
    flex:0 0 auto;
}
.player.player-min .progress-wrap{
    position:relative;
    flex:1;
    min-width:0;
}
.player.player-min .seek{
    width:100%;
    appearance:none;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    outline:none;
    position:relative;
    z-index:2;
}
.player.player-min .seek::-webkit-slider-thumb{
    appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 0 14px rgba(255,255,255,.18);
    cursor:pointer;
}
.player.player-min .seek::-moz-range-thumb{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 0 14px rgba(255,255,255,.18);
    cursor:pointer;
}
.player.player-min .progress-glow{
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    height:10px;
    width:8%;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(0,243,255,.0), rgba(0,243,255,.22), rgba(0,255,136,.18));
    filter:blur(6px);
    z-index:1;
    pointer-events:none;
}

.countdown{ grid-column:span 1; grid-row:span 1; }
.timer-display{ display:flex; align-items:center; justify-content:center; gap:10px; height:100%; padding-bottom:20px; }
.time-unit{ display:flex; flex-direction:column; align-items:center; }
.time-unit span{ font-family:var(--font-mono); font-size:2rem; font-weight:800; line-height:1; }
.time-unit label{ font-size:.6rem; color:var(--muted); letter-spacing:1px; margin-top:5px; }
.separator{ font-size:1.5rem; margin-top:-15px; color:var(--muted); }
.progress-bar-container{ position:absolute; bottom:0; left:0; width:100%; height:4px; background:rgba(255,255,255,.05); }
.progress-bar-fill{ height:100%; width:45%; background:rgba(255,255,255,.85); }

.tasks{ grid-column:span 1; grid-row:span 1; }
.task-list{ flex-grow:1; padding:10px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.task-item{ display:flex; align-items:center; gap:10px; font-size:.8rem; font-family:var(--font-mono); color:#bbb; cursor:pointer; transition:.2s; }
.task-item:hover{ color:#fff; }
.task-item.done{ text-decoration:line-through; color:#444; }
.task-checkbox{ width:14px; height:14px; border:1px solid var(--border); border-radius:3px; display:flex; align-items:center; justify-content:center; }
.task-item.done .task-checkbox{ background:var(--neon-green); border-color:var(--neon-green); }
.task-input-row{ padding:15px; border-top:1px solid var(--border); display:flex; gap:8px; }
.task-input-row input{ background:transparent; border:none; color:#fff; font-family:var(--font-mono); font-size:.8rem; outline:none; width:100%; }
.add-btn{ background:transparent; border:1px solid var(--border); color:#fff; border-radius:10px; cursor:pointer; padding:8px 10px; }
.add-btn:hover{ background:#fff; color:#000; }

.encryptor{ grid-column:span 1; grid-row:span 1; }
.input-area{ padding:0 20px; margin-top:10px; }
.input-area input{ width:100%; background:rgba(0,0,0,.3); border:1px solid var(--border); padding:10px; border-radius:12px; color:var(--neon-green); font-family:var(--font-mono); font-size:.8rem; outline:none; }
.output-area{ margin:10px 20px; height:40px; font-family:var(--font-mono); font-size:.7rem; color:rgba(255,255,255,.55); word-break:break-all; overflow:hidden; display:flex; align-items:center; }

.link-system{ grid-column:span 2; grid-row:span 1; cursor:pointer; }
.nexus-body{ padding:10px 20px 0; display:flex; gap:16px; align-items:center; justify-content:space-between; flex:1; }
.nexus-left{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.nexus-title{ font-family:var(--font-mono); font-size:.95rem; letter-spacing:1px; color:rgba(255,255,255,.9); }
.nexus-sub{ font-size:.82rem; color:rgba(255,255,255,.55); line-height:1.25; max-width:560px; }
.nexus-stats{ display:flex; gap:14px; margin-top:6px; }
.nexus-stat{ display:flex; flex-direction:column; gap:3px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.20); padding:8px 10px; border-radius:14px; min-width:92px; }
.nexus-stat .k{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:1px; color:rgba(255,255,255,.45); }
.nexus-stat .v{ font-family:var(--font-mono); font-size:1.05rem; font-weight:800; color:rgba(255,255,255,.9); }
.nexus-right{ width:240px; height:120px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.22); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.nexus-cta{ padding:12px 20px 16px; display:flex; gap:10px; }
.pill{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:1px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); color:rgba(255,255,255,.80); display:inline-flex; align-items:center; gap:8px; }
.pill.subtle{ opacity:.65; }

.sys-mini{ position:relative; width:220px; height:120px; }
.sys-mini-sun{
    position:absolute; left:50%; top:50%;
    width:14px; height:14px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:rgba(255,255,255,.92);
    box-shadow:0 0 18px rgba(255,255,255,.28);
}
.sys-mini-orbit{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
}
.sys-mini-orbit.o1{ width:86px; height:46px; }
.sys-mini-orbit.o2{ width:140px; height:74px; }
.sys-mini-orbit.o3{ width:190px; height:100px; opacity:.75; }

.sys-mini-planet{
    position:absolute; top:50%; left:100%;
    transform:translate(-50%,-50%);
    width:8px; height:8px;
    border-radius:50%;
    filter:drop-shadow(0 0 10px rgba(0,255,136,.18));
}
.sys-mini-planet.p1{ background:rgba(0,243,255,.9); }
.sys-mini-planet.p2{ background:rgba(0,255,136,.9); }
.sys-mini-planet.p3{ background:rgba(167,139,250,.9); }

.overlay{ position:fixed; inset:0; z-index:999; display:none; }
.overlay.show{ display:block; }
.overlay-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(10px); }
.overlay-panel{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    border-radius:22px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(10,10,10,.70);
    box-shadow:0 30px 120px rgba(0,0,0,.65);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.overlay-panel-wide{ width:min(980px,calc(100vw - 30px)); height:min(700px,calc(100vh - 30px)); }
.overlay-panel-max{ width:min(1400px,calc(100vw - 24px)); height:min(860px,calc(100vh - 24px)); }
.overlay-topbar{
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,0));
}
.overlay-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    letter-spacing:1px;
    color:rgba(255,255,255,.85);
    font-size:.8rem;
}
.overlay-sub{ color:rgba(255,255,255,.45); font-size:.68rem; margin-left:8px; }
.overlay-actions{ display:flex; align-items:center; gap:10px; }
.tiny-btn{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.80);
    width:38px;
    height:38px;
    border-radius:12px;
    cursor:pointer;
    transition:.2s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.tiny-btn:hover{ background:rgba(255,255,255,.10); color:#fff; }
.search-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    height:38px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.25);
    color:rgba(255,255,255,.6);
}
.search-wrap input{
    border:none; outline:none;
    background:transparent;
    color:rgba(255,255,255,.85);
    font-family:var(--font-mono);
    font-size:.78rem;
    width:320px;
}
.overlay-body{ flex:1; position:relative; }

.overlay-body-media{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
}
.media-stage{
    flex:1;
    height:100%;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.media-stage img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform-origin:center center;
    transition:transform .2s ease;
}
.media-stage.zoom img{ transform:scale(1.6); cursor:zoom-out; }
.media-stage img{ cursor:zoom-in; }

.nav-btn{
    width:48px; height:48px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.85);
    cursor:pointer;
    transition:.2s;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
}
.nav-btn:hover{ background:rgba(255,255,255,.10); color:#fff; }

.overlay-footer{
    padding:12px 14px;
    border-top:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.18);
}
.thumb-row{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:4px;
}
.thumb{
    width:90px; height:64px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background-size:cover;
    background-position:center;
    cursor:pointer;
    opacity:.55;
    transition:.2s;
    flex:0 0 auto;
}
.thumb:hover{ opacity:.9; }
.thumb.active{ opacity:1; border-color:rgba(255,255,255,.25); }

.overlay-body-map{
    display:grid;
    grid-template-columns:360px 1fr;
    height:100%;
}
.map-left{
    border-right:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.22);
    display:flex;
    flex-direction:column;
}
.map-right{
    background:rgba(0,0,0,.10);
    position:relative;
    overflow:hidden;
}
.pane-title{
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:.75rem;
    letter-spacing:1px;
    color:rgba(255,255,255,.75);
    border-bottom:1px solid rgba(255,255,255,.10);
}
.node-panel{ padding:14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.node-title{ font-family:var(--font-mono); font-size:1.05rem; color:rgba(255,255,255,.9); letter-spacing:.6px; }
.node-url{ font-family:var(--font-mono); font-size:.78rem; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.node-desc{ font-size:.86rem; color:rgba(255,255,255,.65); line-height:1.35; margin-top:4px; }
.node-actions{ display:flex; gap:10px; margin-top:10px; }
.slot-btn{
    width:40px; height:40px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.80);
    cursor:pointer;
    transition:.2s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.slot-btn:hover{ background:rgba(255,255,255,.10); color:#fff; }
.detail-foot{ border-top:1px solid rgba(255,255,255,.10); padding:10px 14px; background:rgba(0,0,0,.18); }
.micro-hint{ font-family:var(--font-mono); font-size:.7rem; color:rgba(255,255,255,.45); }

#link-system-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.sys-tooltip{
    position:absolute;
    pointer-events:none;
    padding:8px 10px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.55);
    color:rgba(255,255,255,.9);
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.2px;
    transform:translate(14px,14px);
    display:none;
    max-width:360px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

@media (max-width:768px){
    .mobile-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
        padding:20px;
        font-family:var(--font-mono);
        color:#fff;
        border-bottom:1px solid var(--border);
        background:rgba(0,0,0,.8);
    }
    .grid-container{ grid-template-columns:1fr 1fr; grid-template-rows:auto; padding:20px; gap:12px; }
    .profile{ grid-column:span 2; order:1; }
    .terminal{ grid-column:span 2; order:2; height:150px; }
    .countdown{ grid-column:span 1; order:3; height:160px; }
    .player{ grid-column:span 2; order:4; height:190px; }
    .tasks{ grid-column:span 2; order:5; height:220px; }
    .files{ grid-column:span 2; order:6; }
    .encryptor{ grid-column:span 2; order:7; height:180px; }
    .mascot{ grid-column:span 2; order:8; height:260px; }
    .link-system{ grid-column:span 2; order:9; height:140px; }

    .profile-body{ flex-direction:column; align-items:flex-start; gap:15px; }
    .stats-grid{ width:100%; justify-content:space-between; }

    .overlay-panel-wide,.overlay-panel-max{
        width:calc(100vw - 18px);
        height:calc(100vh - 18px);
        border-radius:18px;
    }
    .overlay-body-map{ grid-template-columns:1fr; }
    .map-left{ display:none; }
    .search-wrap input{ width:200px; }
}