@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@300;500;600;700&display=swap');
:root { --b:#00d4ff; --bg:#000a12; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); overflow:hidden; font-family:'Share Tech Mono',monospace; color:var(--b); cursor:none; }

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════ */

#landing {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    z-index:200; display:flex; align-items:center; justify-content:center;
    cursor:default;
}
#landing.off {
    opacity:0; pointer-events:none;
    transition:opacity 0.8s ease;
}

.land-bg {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(0,212,255,0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, rgba(0,212,255,0.03) 0%, transparent 50%),
        linear-gradient(180deg, #000a12 0%, #000 100%);
}
/* Subtle animated grid */
.land-bg::after {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background-image:
        linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
    background-size:60px 60px;
    animation: gridDrift 20s linear infinite;
}
@keyframes gridDrift {
    0% { transform:translate(0,0); }
    100% { transform:translate(60px,60px); }
}

.land-content {
    position:relative; z-index:1;
    text-align:center; max-width:520px; padding:0 30px;
}

.land-badge {
    display:inline-block; padding:4px 14px;
    border:1px solid rgba(0,212,255,0.2);
    font-size:9px; letter-spacing:4px; color:rgba(0,212,255,0.5);
    margin-bottom:28px;
}

.land-title {
    font-family:'Rajdhani',sans-serif; font-weight:300;
    font-size:64px; line-height:0.95; letter-spacing:-1px;
    color:rgba(255,255,255,0.12); margin-bottom:24px;
}
.land-title span {
    font-weight:700; color:var(--b);
    text-shadow:0 0 40px rgba(0,212,255,0.4), 0 0 80px rgba(0,212,255,0.15);
}

.land-tagline {
    font-size:12px; color:rgba(255,255,255,0.3);
    line-height:1.8; letter-spacing:0.5px;
    margin-bottom:36px;
}

.land-features {
    display:flex; flex-direction:column; gap:10px;
    align-items:center; margin-bottom:40px;
}
.land-feat {
    font-size:11px; color:rgba(0,212,255,0.35); letter-spacing:1px;
    display:flex; align-items:center; gap:10px;
}
.land-feat-icon { font-size:16px; }

.land-launch {
    display:inline-block; padding:14px 48px;
    background:transparent;
    border:1px solid var(--b);
    color:var(--b); font-family:'Share Tech Mono',monospace;
    font-size:13px; letter-spacing:4px;
    cursor:pointer; transition:all 0.4s ease;
    position:relative; overflow:hidden;
}
.land-launch::before {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(0,212,255,0.08), transparent);
    transition:left 0.6s ease;
}
.land-launch:hover { background:rgba(0,212,255,0.06); box-shadow:0 0 30px rgba(0,212,255,0.15); }
.land-launch:hover::before { left:100%; }

.land-req {
    font-size:9px; color:rgba(255,255,255,0.15);
    letter-spacing:1.5px; margin-top:20px;
}
.land-credit {
    font-size:8px; color:rgba(0,212,255,0.12);
    letter-spacing:2px; margin-top:12px;
}

/* Landing corners */
.land-corners { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.lc { position:absolute; width:40px; height:40px; }
.lc.tl { top:30px; left:30px; border-top:1px solid rgba(0,212,255,0.12); border-left:1px solid rgba(0,212,255,0.12); }
.lc.tr { top:30px; right:30px; border-top:1px solid rgba(0,212,255,0.12); border-right:1px solid rgba(0,212,255,0.12); }
.lc.bl { bottom:30px; left:30px; border-bottom:1px solid rgba(0,212,255,0.12); border-left:1px solid rgba(0,212,255,0.12); }
.lc.br { bottom:30px; right:30px; border-bottom:1px solid rgba(0,212,255,0.12); border-right:1px solid rgba(0,212,255,0.12); }


/* ═══════════════════════════════════════════════════════════════
   TUTORIAL OVERLAY
   ═══════════════════════════════════════════════════════════════ */

#tutorial {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    z-index:150; display:flex; align-items:center; justify-content:center;
}
#tutorial.off { opacity:0; pointer-events:none; transition:opacity 0.6s ease; }

.tut-backdrop {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.7); backdrop-filter:blur(6px);
}
.tut-content {
    position:relative; z-index:1; text-align:center;
    max-width:500px; padding:40px 30px;
    animation:tutFadeIn 0.6s ease;
}
@keyframes tutFadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.tut-title {
    font-family:'Rajdhani',sans-serif; font-weight:600;
    font-size:22px; letter-spacing:6px; color:var(--b);
    text-shadow:0 0 20px rgba(0,212,255,0.4);
    margin-bottom:32px;
}

.tut-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
    margin-bottom:36px;
}
.tut-item {
    padding:16px 8px;
    border:1px solid rgba(0,212,255,0.08);
    background:rgba(0,212,255,0.02);
    transition:all 0.3s;
}
.tut-item:hover { border-color:rgba(0,212,255,0.2); background:rgba(0,212,255,0.04); }
.tut-icon { font-size:24px; margin-bottom:8px; }
.tut-label { font-size:9px; letter-spacing:2px; color:var(--b); margin-bottom:4px; }
.tut-desc { font-size:9px; color:rgba(0,212,255,0.35); }

.tut-dismiss {
    font-family:'Rajdhani',sans-serif; font-weight:600;
    font-size:15px; letter-spacing:4px; color:var(--b);
    animation:tutPulse 2s ease-in-out infinite;
}
@keyframes tutPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.tut-skip {
    font-size:9px; color:rgba(0,212,255,0.2);
    letter-spacing:1.5px; margin-top:10px; cursor:pointer;
}


/* ═══════════════════════════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════════════════════════ */

#ld {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    background:var(--bg); z-index:180;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition:opacity 1.5s ease;
}
#ld.off { opacity:0; pointer-events:none; }
.ld-h {
    font-family:'Rajdhani',sans-serif; font-weight:700;
    font-size:42px; letter-spacing:10px; color:var(--b);
    text-shadow:0 0 30px rgba(0,212,255,0.5);
    margin-bottom:16px;
}
.ld-s { font-size:10px; color:rgba(0,212,255,0.30); letter-spacing:4px; }
.ld-b {
    width:180px; height:1px; background:rgba(0,212,255,0.06);
    margin-top:28px; position:relative; overflow:hidden;
}
.ld-b::after {
    content:''; position:absolute; width:40%; height:100%;
    background:var(--b); box-shadow:0 0 10px var(--b);
    animation:ls 1.8s ease-in-out infinite;
}
@keyframes ls{0%{left:-40%}100%{left:100%}}


/* ═══════════════════════════════════════════════════════════════
   AR INTERFACE
   ═══════════════════════════════════════════════════════════════ */

#webcam { position:fixed; top:0; left:0; width:100vw; height:100vh; object-fit:cover; z-index:0; transform:scaleX(-1); }
#three-canvas {
    position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:2; pointer-events:none;
    filter: brightness(1.1) drop-shadow(0 0 6px #00d4ff) drop-shadow(0 0 18px rgba(0,212,255,0.5));
}
#cursor-canvas { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:6; pointer-events:none; }

.scanlines {
    position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:3; pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px);
}
.vignette {
    position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:1; pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.45) 100%);
}


/* ═══ HUD ═══ */

.hud-tl {
    position:fixed; top:28px; left:32px; z-index:10;
    font-family:'Rajdhani',sans-serif; font-weight:600; font-size:24px; letter-spacing:1px; line-height:1.1;
    color:var(--b); text-shadow:0 0 18px var(--b);
}
.hud-sub {
    position:fixed; top:64px; left:34px; z-index:10;
    font-size:9px; color:rgba(0,212,255,0.28); letter-spacing:3px;
}
.mode-row { position:fixed; top:86px; left:34px; z-index:10; display:flex; align-items:center; gap:8px; }
.mode-pip { width:4px; height:4px; border-radius:50%; background:var(--b); box-shadow:0 0 8px var(--b); animation:pip 2.5s ease-in-out infinite; }
@keyframes pip{0%,100%{opacity:1}50%{opacity:0.15}}
.mode-txt { font-size:9px; letter-spacing:2.5px; color:rgba(0,212,255,0.30); }
.mode-txt b { color:var(--b); }


/* ═══ BIN ═══ */

#bin {
    position:fixed; top:30px; left:175px; z-index:10;
    width:30px; height:34px; pointer-events:none;
    opacity:0.22; transition:opacity 0.25s ease, transform 0.25s ease;
}
#bin.near { opacity:0.80; transform:scale(1.15); }
#bin.fire { opacity:1.0; transform:scale(1.25); filter:drop-shadow(0 0 10px #ff3355) drop-shadow(0 0 20px #ff0033); }
#bin svg { width:100%; height:100%; }
#bin-lbl {
    position:fixed; top:66px; left:165px; z-index:10;
    font-size:7px; letter-spacing:1.5px; color:rgba(0,212,255,0.0);
    transition:color 0.25s ease; white-space:nowrap;
}
#bin-lbl.near { color:rgba(0,212,255,0.40); }
#bin-lbl.fire { color:rgba(255,51,85,0.80); }


/* ═══ RIGHT PANEL ═══ */

.rp { position:fixed; top:28px; right:32px; z-index:10; text-align:right; max-width:200px; }
.rp-name {
    font-family:'Rajdhani',sans-serif; font-weight:600; font-size:20px;
    color:var(--b); line-height:1.2; margin-bottom:5px;
    text-shadow:0 0 12px var(--b);
}
.rp-cat { font-size:8px; color:rgba(0,212,255,0.22); letter-spacing:2.5px; margin-bottom:6px; }
.rp-desc { font-size:9px; color:rgba(0,212,255,0.28); line-height:2.0; white-space:pre-line; }


/* ═══ OBJECT LIST ═══ */

.ol { position:fixed; top:50%; right:32px; transform:translateY(-50%); z-index:10; text-align:right; transition:opacity 0.4s; }
.ol.dim { opacity:0.05; pointer-events:none; }
.ol-item { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:12px; font-size:9px; letter-spacing:1.5px; color:rgba(0,212,255,0.12); transition:all 0.5s ease; }
.ol-item.hov { color:rgba(0,212,255,0.50); }
.ol-item.hel { color:var(--b); text-shadow:0 0 8px var(--b); }
.ol-pip { width:3px; height:3px; border-radius:50%; background:rgba(0,212,255,0.10); flex-shrink:0; transition:all 0.5s; }
.ol-item.hov .ol-pip { background:rgba(0,212,255,0.50); }
.ol-item.hel .ol-pip { background:var(--b); box-shadow:0 0 6px var(--b); }
.ol-item.shelved { color:rgba(0,212,255,0.08); font-style:italic; }
.ol-item.shelved .ol-pip { background:rgba(0,212,255,0.04); }


/* ═══ BOTTOM PANELS ═══ */

.gp { position:fixed; bottom:28px; left:32px; z-index:10; }
.gp-label { font-size:10px; letter-spacing:1.5px; color:rgba(0,212,255,0.35); }

.st { position:fixed; bottom:28px; right:32px; z-index:10; text-align:right; font-size:8px; color:rgba(0,212,255,0.14); line-height:2.2; }


/* ═══ DETAIL BOX ═══ */

.db {
    position:fixed; z-index:10; pointer-events:none; padding:10px 14px; display:none;
    background:rgba(0,5,12,0.85); border:1px solid rgba(0,212,255,0.10);
    backdrop-filter:blur(20px); max-width:200px;
}
.db-name { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:14px; color:var(--b); margin-bottom:2px; text-shadow:0 0 8px var(--b); }
.db-cat  { font-size:8px; color:rgba(0,212,255,0.25); letter-spacing:2px; margin-bottom:5px; }
.db-desc { font-size:9px; color:rgba(0,212,255,0.35); line-height:1.6; margin-bottom:5px; }
.db-state { font-size:8px; color:rgba(0,212,255,0.22); }


/* ═══ TOAST ═══ */

.th { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; text-align:center; pointer-events:none; opacity:0; transition:opacity 0.5s; }
.th.on { opacity:1; }
.th-label { font-family:'Rajdhani',sans-serif; font-size:16px; letter-spacing:4px; color:var(--b); text-shadow:0 0 20px var(--b); }
.th-sub { font-size:8px; color:rgba(0,212,255,0.30); margin-top:4px; letter-spacing:2.5px; }


/* ═══ DROP ZONE ═══ */

.dz {
    position:fixed; bottom:60px; left:50%; transform:translateX(-50%); z-index:10;
    padding:6px 18px; border:1px dashed rgba(0,212,255,0.08);
    font-size:8px; color:rgba(0,212,255,0.10); letter-spacing:2px;
    cursor:none; pointer-events:none; transition:all 0.35s; white-space:nowrap;
}
.dz.hov,.dz.ov { border-color:rgba(0,212,255,0.35); color:rgba(0,212,255,0.55); background:rgba(0,212,255,0.03); }


/* ═══ MODELER TOOLBAR ═══ */

.mod-toolbar {
    position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
    z-index:10; display:flex; align-items:center; gap:8px;
    pointer-events:none;
}
.mod-toolbar.drawing {
    background:rgba(0,5,14,0.75); backdrop-filter:blur(14px);
    border:1px solid rgba(255,107,53,0.15);
    padding:8px 14px; border-radius:2px;
}
.mod-btn {
    background:rgba(0,212,255,0.04); border:1px solid rgba(0,212,255,0.15);
    color:rgba(0,212,255,0.5); font-family:'Share Tech Mono',monospace;
    font-size:8px; letter-spacing:2px; padding:5px 12px;
    cursor:none; transition:all 0.25s; white-space:nowrap;
    pointer-events:none;
}
.mod-btn.hov { border-color:rgba(0,212,255,0.50); color:var(--b); background:rgba(0,212,255,0.10); box-shadow:0 0 8px rgba(0,212,255,0.15); }
.mod-btn.active {
    border-color:rgba(255,107,53,0.45); color:#ff6b35;
    background:rgba(255,107,53,0.08); box-shadow:0 0 10px rgba(255,107,53,0.12);
}
.mod-btn.mod-finish { border-color:rgba(0,255,136,0.20); color:rgba(0,255,136,0.5); }
.mod-btn.mod-finish.hov { border-color:rgba(0,255,136,0.45); color:#00ff88; background:rgba(0,255,136,0.06); }
.mod-btn.mod-undo { border-color:rgba(255,200,0,0.20); color:rgba(255,200,0,0.5); }
.mod-btn.mod-undo.hov { border-color:rgba(255,200,0,0.45); color:#ffcc00; background:rgba(255,200,0,0.06); }
.mod-btn.mod-cancel { border-color:rgba(255,51,85,0.15); color:rgba(255,51,85,0.4); }
.mod-btn.mod-cancel.hov { border-color:rgba(255,51,85,0.40); color:#ff3355; background:rgba(255,51,85,0.06); }

.mod-extrude { display:flex; align-items:center; gap:5px; }
.mod-extrude-label { font-size:7px; letter-spacing:1.5px; color:rgba(0,212,255,0.25); }
.mod-extrude input[type=range] { -webkit-appearance:none; width:70px; height:2px; background:rgba(0,212,255,0.12); outline:none; cursor:none; }
.mod-extrude input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:8px; height:8px; border-radius:50%; background:var(--b); cursor:none; box-shadow:0 0 5px var(--b); }
.mod-extrude-val { font-size:9px; color:rgba(0,212,255,0.4); min-width:20px; }
.mod-status { font-size:8px; color:rgba(255,107,53,0.50); letter-spacing:1.5px; }
.mod-strokes { font-size:7px; color:rgba(0,212,255,0.20); letter-spacing:1px; }


/* ═══ NAME MODAL ═══ */

.mod-name-modal {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    background:rgba(0,0,0,0.6); z-index:50;
    display:none; align-items:center; justify-content:center;
    backdrop-filter:blur(6px);
}
.mod-name-modal.open { display:flex; }
.mod-name-box {
    background:rgba(0,5,14,0.92); border:1px solid rgba(0,212,255,0.12);
    backdrop-filter:blur(20px); padding:24px 30px; min-width:280px; text-align:center;
}
.mod-name-title { font-size:9px; letter-spacing:3px; color:rgba(0,212,255,0.4); margin-bottom:14px; }
.mod-name-input {
    width:100%; background:rgba(0,212,255,0.03);
    border:1px solid rgba(0,212,255,0.15); color:var(--b);
    font-family:'Share Tech Mono',monospace; font-size:12px;
    padding:8px 12px; outline:none; text-align:center;
    letter-spacing:1px; margin-bottom:16px; pointer-events:all; cursor:text;
}
.mod-name-input:focus { border-color:rgba(0,212,255,0.35); box-shadow:0 0 10px rgba(0,212,255,0.10); }
.mod-name-btns { display:flex; gap:10px; justify-content:center; }
.mod-name-save { border-color:rgba(0,255,136,0.25); color:rgba(0,255,136,0.6); }
.mod-name-save:hover { border-color:rgba(0,255,136,0.50); color:#00ff88; background:rgba(0,255,136,0.06); }
.mod-name-cancel { border-color:rgba(255,51,85,0.15); color:rgba(255,51,85,0.35); }


/* ═══ CORNERS ═══ */

.cb { position:fixed; width:18px; height:18px; z-index:4; }
.cb.tl{top:16px;left:16px;border-top:1px solid rgba(0,212,255,0.14);border-left:1px solid rgba(0,212,255,0.14);}
.cb.tr{top:16px;right:16px;border-top:1px solid rgba(0,212,255,0.14);border-right:1px solid rgba(0,212,255,0.14);}
.cb.bl{bottom:16px;left:16px;border-bottom:1px solid rgba(0,212,255,0.14);border-left:1px solid rgba(0,212,255,0.14);}
.cb.br{bottom:16px;right:16px;border-bottom:1px solid rgba(0,212,255,0.14);border-right:1px solid rgba(0,212,255,0.14);}


/* ═══ MODEL INSPECTOR ═══ */

.inspector {
    position:fixed; top:50%; right:32px; transform:translateY(-50%);
    z-index:10; width:180px;
    background:rgba(0,5,14,0.82); border:1px solid rgba(0,212,255,0.08);
    backdrop-filter:blur(18px); padding:12px 14px;
    opacity:0; pointer-events:none;
    transition:opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
    transform:translateY(-50%) translateX(10px);
    max-height:78vh; overflow-y:auto;
}
.inspector.open { opacity:1; pointer-events:all; transform:translateY(-50%) translateX(0); }
.inspector::-webkit-scrollbar { width:2px; }
.inspector::-webkit-scrollbar-thumb { background:rgba(0,212,255,0.12); }

.insp-header { display:flex; align-items:center; gap:6px; font-size:8px; letter-spacing:2.5px; color:var(--b); margin-bottom:7px; }
.insp-pip { width:4px; height:4px; border-radius:50%; background:var(--b); box-shadow:0 0 5px var(--b); }
.insp-divider { height:1px; background:rgba(0,212,255,0.06); margin:7px 0; }
.insp-section-title { font-size:7px; letter-spacing:2px; color:rgba(0,212,255,0.22); margin-bottom:5px; }
.insp-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.insp-label { font-size:7px; letter-spacing:1.5px; color:rgba(0,212,255,0.20); }
.insp-val { font-size:9px; color:rgba(0,212,255,0.50); text-align:right; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.insp-editable { border-bottom:1px dashed rgba(0,212,255,0.10); padding-bottom:1px; transition:border-color 0.2s; }
.insp-editable:hover { border-color:rgba(0,212,255,0.30); }

.insp-input, .insp-textarea {
    width:100%; background:rgba(0,212,255,0.04);
    border:1px solid rgba(0,212,255,0.15); color:var(--b);
    font-family:'Share Tech Mono',monospace; font-size:9px;
    padding:3px 5px; outline:none; pointer-events:all; cursor:text;
}
.insp-input:focus, .insp-textarea:focus { border-color:rgba(0,212,255,0.40); box-shadow:0 0 6px rgba(0,212,255,0.12); }
.insp-textarea { resize:vertical; min-height:32px; line-height:1.4; }

.insp-desc-wrap { margin-bottom:3px; }
.insp-desc-text { font-size:8px; color:rgba(0,212,255,0.30); line-height:1.5; white-space:pre-line; max-height:50px; overflow-y:auto; }

.insp-edit-btn {
    background:rgba(0,212,255,0.03); border:1px solid rgba(0,212,255,0.12);
    color:rgba(0,212,255,0.30); font-size:9px;
    width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
    pointer-events:none; cursor:none; flex-shrink:0; transition:all 0.25s;
}
.insp-edit-btn.hov { border-color:rgba(0,212,255,0.45); color:var(--b); background:rgba(0,212,255,0.10); box-shadow:0 0 8px rgba(0,212,255,0.12); }
.insp-edit-btn.editing { border-color:rgba(255,107,53,0.45); color:#ff6b35; background:rgba(255,107,53,0.08); }

.insp-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-bottom:5px; }
.insp-cell { display:flex; flex-direction:column; align-items:center; background:rgba(0,212,255,0.02); padding:4px 3px; border:1px solid rgba(0,212,255,0.04); }
.insp-dim-label { font-size:6px; letter-spacing:2px; color:rgba(0,212,255,0.18); margin-bottom:1px; }
.insp-dim-val { font-size:10px; color:rgba(0,212,255,0.45); font-variant-numeric:tabular-nums; }
.insp-footer { font-size:6px; color:rgba(0,212,255,0.10); letter-spacing:1px; text-align:center; margin-top:7px; }


/* ═══ LEFT MODEL PANEL ═══ */

.mp {
    position:fixed; top:50%; left:18px; transform:translateY(-50%);
    z-index:10; display:flex; flex-direction:column; gap:5px;
    pointer-events:none;
}
.mp-folder {
    width:165px; border:1px solid rgba(0,212,255,0.10);
    background:rgba(0,5,14,0.72); backdrop-filter:blur(14px);
    overflow:hidden; transition:all 0.38s cubic-bezier(0.16,1,0.3,1);
}
.mp-folder.open { border-color:rgba(0,212,255,0.25); }
.mp-fhead {
    padding:8px 10px; display:flex; align-items:center; gap:7px;
    font-size:8px; letter-spacing:2px; color:rgba(0,212,255,0.28);
    transition:color 0.3s;
}
.mp-folder.open .mp-fhead { color:var(--b); }
.mp-fpip {
    width:4px; height:4px; border:1px solid rgba(0,212,255,0.25);
    border-radius:50%; flex-shrink:0; transition:all 0.3s;
}
.mp-folder.open .mp-fpip { background:var(--b); border-color:var(--b); box-shadow:0 0 5px var(--b); }
.mp-items { max-height:0; overflow:hidden; transition:max-height 0.38s cubic-bezier(0.16,1,0.3,1); }
.mp-folder.open .mp-items { max-height:400px; }
.mp-item {
    padding:7px 10px 7px 22px; font-size:8px; letter-spacing:1.5px;
    color:rgba(0,212,255,0.18); display:flex; align-items:center; gap:7px;
    border-top:1px solid rgba(0,212,255,0.04); transition:all 0.22s;
    position:relative;
}
.mp-item.hov { color:var(--b); background:rgba(0,212,255,0.05); padding-left:26px; }
.mp-item::before {
    content:''; position:absolute; left:10px; top:50%; transform:translateY(-50%);
    width:3px; height:3px; border-radius:50%;
    background:rgba(0,212,255,0.15); transition:all 0.22s;
}
.mp-item.hov::before { background:var(--b); box-shadow:0 0 4px var(--b); }
.mp-icon { width:24px; height:24px; flex-shrink:0; opacity:0.30; transition:opacity 0.22s; }
.mp-item.hov .mp-icon { opacity:1; }

#fi { display:none; }