/* ════════════════════════════════════════════════════════════════
   MORPH — VTube Studio 3D
   Design system repris de "Space" (dark / glass / gradient).
   ════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0c0d12; --bg-deep:#08090d;
  --panel:#15161d; --panel2:#23252f; --panel3:#2b2e3a;
  --glass:rgba(20,22,30,.74); --glass-strong:rgba(18,20,28,.92);
  --line:#2c2f3a; --line2:#393d4a; --hair:rgba(255,255,255,.06);
  --txt:#eef1f7; --txt2:#c6ccda; --muted:#8b93a5; --faint:#5b6273;
  --accent:#6c8cff; --accent-h:#84a0ff; --accent2:#8b5cf6;
  --grad:linear-gradient(135deg,#6c8cff 0%,#8b5cf6 100%);
  --grad-soft:linear-gradient(135deg,rgba(108,140,255,.18),rgba(139,92,246,.10));
  --good:#46b06a; --warn:#f5a524; --danger:#f0635f; --info:#5fb8f0;
  --r:14px; --r-sm:9px; --r-lg:20px; --r-pill:999px;
  --sh-1:0 2px 8px rgba(0,0,0,.28);
  --sh-2:0 16px 50px rgba(6,8,22,.46);
  --sh-3:0 26px 80px rgba(4,6,18,.6);
  --ring:0 0 0 3px rgba(108,140,255,.30);
  --tr:.16s cubic-bezier(.4,0,.2,1);
}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:
    radial-gradient(1200px 700px at 80% -10%,rgba(108,140,255,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 110%,rgba(139,92,246,.10),transparent 60%),
    var(--bg);
  color:var(--txt);overflow:hidden;
}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}

/* Fond animé : réseau de points lumineux */
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--panel3);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--line2)}

/* ───────── Topbar ───────── */
#topbar{
  position:relative;z-index:20;display:flex;align-items:center;gap:14px;
  height:56px;padding:0 16px;background:var(--glass-strong);
  border-bottom:1px solid var(--hair);backdrop-filter:blur(16px)
}
.mb-brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:.2px}
.mb-logo{font-size:23px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tb-proj{display:flex;align-items:center;gap:8px;margin-left:6px;padding:6px 10px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--hair);min-width:180px}
.tb-proj .material-symbols-outlined{font-size:17px;color:var(--muted)}
.tb-proj input{background:transparent;border:0;color:var(--txt);font-size:13.5px;font-weight:600;width:100%;outline:none}
.tb-saved{font-size:11px;color:var(--faint);min-width:78px}
.tb-saved.dirty{color:var(--warn)}
.tb-spacer{flex:1}
.tb-user{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt2)}
.tb-ava{width:30px;height:30px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800;color:#fff;font-size:13px}

/* ───────── Boutons ───────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-sm);
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);font-size:13px;font-weight:600;
  cursor:pointer;transition:all var(--tr)}
.btn:hover{background:var(--panel3);border-color:var(--line2)}
.btn .material-symbols-outlined{font-size:18px}
.btn.primary{background:var(--grad);border:0;color:#fff;box-shadow:0 4px 14px rgba(108,140,255,.34)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:var(--hair);color:var(--muted)}
.btn.ghost:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.btn.icon{padding:8px;justify-content:center}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.btn.sm{padding:6px 10px;font-size:12px}

/* ───────── Layout principal ───────── */
#app{display:none;height:calc(100vh - 56px);position:relative;z-index:1}
#app.on{display:grid;grid-template-columns:248px 1fr 312px;grid-template-rows:1fr 200px;
  grid-template-areas:"left view right" "left logs right"}
@media(max-width:1100px){#app.on{grid-template-columns:210px 1fr 280px}}

.col-left{grid-area:left;border-right:1px solid var(--hair);background:var(--glass);display:flex;flex-direction:column;min-height:0}
.col-view{grid-area:view;position:relative;min-height:0;overflow:hidden}
.col-right{grid-area:right;border-left:1px solid var(--hair);background:var(--glass);display:flex;flex-direction:column;min-height:0}
.col-logs{grid-area:logs;border-top:1px solid var(--hair);background:var(--bg-deep);display:flex;flex-direction:column;min-height:0}

.sec-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 9px;
  font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.sec-head .material-symbols-outlined{font-size:16px}
.sec-body{padding:0 12px 12px;overflow:auto;flex:1;min-height:0}

/* ───────── Panneau projets ───────── */
.proj-actions{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--hair)}
.proj-actions .btn{flex:1;justify-content:center}
.proj-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);
  cursor:pointer;border:1px solid transparent;transition:all var(--tr);margin-bottom:4px}
.proj-item:hover{background:rgba(255,255,255,.05)}
.proj-item.active{background:var(--grad-soft);border-color:rgba(108,140,255,.4)}
.proj-thumb{width:38px;height:38px;border-radius:8px;background:var(--panel2);display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.proj-thumb img{width:100%;height:100%;object-fit:cover}
.proj-thumb .material-symbols-outlined{font-size:18px;color:var(--faint)}
.proj-meta{flex:1;min-width:0}
.proj-name{font-size:13px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-date{font-size:10.5px;color:var(--faint)}
.proj-empty{padding:24px 10px;text-align:center;color:var(--faint);font-size:12px;line-height:1.6}

/* ───────── Viewport ───────── */
#viewport{position:absolute;inset:0}
#viewport canvas{display:block;width:100%;height:100%}
.vw-toolbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;gap:5px;padding:5px;background:var(--glass-strong);border:1px solid var(--line);
  border-radius:var(--r-pill);box-shadow:var(--sh-2)}
.vw-toolbar .btn.icon{background:transparent;border:0;color:var(--muted);width:36px;height:36px;border-radius:50%}
.vw-toolbar .btn.icon:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.vw-toolbar .btn.icon.on{background:var(--grad);color:#fff}
.drop-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--faint);pointer-events:none;text-align:center}
.drop-hint .material-symbols-outlined{font-size:46px}
.drop-hint b{color:var(--txt2);font-size:15px;font-weight:700}
.vw-status{position:absolute;left:14px;bottom:12px;z-index:5;font-size:11.5px;color:var(--muted);
  background:var(--glass-strong);padding:6px 11px;border-radius:var(--r-pill);border:1px solid var(--hair);max-width:60%}
#spinner{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px;border-radius:50%;
  border:3px solid rgba(255,255,255,.12);border-top-color:var(--accent);animation:spin .8s linear infinite;display:none;z-index:6}
#spinner.on{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ───────── Panneau VTube (droite) ───────── */
.vt-cam-wrap{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-deep);border:1px solid var(--line);margin-bottom:10px}
.vt-cam-wrap video,.vt-cam-wrap canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt-cam-wrap.mirror video,.vt-cam-wrap.mirror canvas{transform:scaleX(-1)}
.vt-cam-wrap canvas{pointer-events:none}
.vt-cam-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--faint);font-size:12px}
.vt-cam-ph .material-symbols-outlined{font-size:30px}
.vt-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;
  border:0;border-radius:var(--r-sm);background:var(--grad);color:#fff;font-weight:700;font-size:13px;
  cursor:pointer;box-shadow:0 4px 14px rgba(108,140,255,.35);transition:all var(--tr);margin-bottom:10px}
.vt-cta:hover{filter:brightness(1.08)}
.vt-cta.live{background:var(--panel2);color:var(--txt);box-shadow:none;border:1px solid var(--line2)}
.vt-cta .material-symbols-outlined{font-size:18px}
.vt-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.vt-metric{background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:var(--r-sm);padding:7px 4px;text-align:center}
.vt-mv{font-size:16px;font-weight:800;color:var(--accent-h);line-height:1.1}
.vt-ml{font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.vt-srow{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--txt2);margin-bottom:7px}
.vt-srow span{flex:0 0 64px}
.vt-srow input[type=range]{flex:1;accent-color:var(--accent);height:3px}
.vt-srow b{flex:0 0 40px;text-align:right;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.vt-toggles{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 10px}
.vt-tg{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);border:1px solid var(--hair);color:var(--muted);
  font-size:11px;font-weight:600;cursor:pointer;transition:all var(--tr)}
.vt-tg:hover{color:var(--txt);background:rgba(255,255,255,.07)}
.vt-tg.on{background:var(--grad-soft);border-color:rgba(108,140,255,.45);color:#cdd6ff}
.vt-tg .material-symbols-outlined{font-size:15px}
.vt-bs{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 10px;margin-bottom:12px}
.vt-bi{display:flex;align-items:center;gap:7px}
.vt-bn{flex:0 0 42px;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.3px}
.vt-bb{flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:var(--r-pill);overflow:hidden}
.vt-bf{height:100%;width:0%;background:var(--grad);border-radius:var(--r-pill);transition:width .08s linear}
.preset-row{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.preset-row select{flex:1;background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 9px;font-size:12.5px;font-family:inherit;outline:none}

/* ───────── Console de logs ───────── */
.logs-head{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--hair)}
.logs-title{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.logs-tabs{display:flex;gap:4px}
.logs-tab{padding:4px 10px;border-radius:var(--r-pill);background:transparent;border:1px solid var(--hair);
  color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all var(--tr)}
.logs-tab.on{background:var(--grad-soft);border-color:rgba(108,140,255,.4);color:#cdd6ff}
.logs-body{flex:1;overflow:auto;padding:6px 12px;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:11.5px;line-height:1.65}
.log-line{display:flex;gap:9px;padding:1px 0;color:var(--txt2)}
.log-time{color:var(--faint);flex:0 0 60px}
.log-tag{flex:0 0 64px;font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.4px}
.log-msg{flex:1;word-break:break-word}
.log-info .log-tag{color:var(--info)} .log-ok .log-tag{color:var(--good)}
.log-warn .log-tag{color:var(--warn)} .log-err .log-tag{color:var(--danger)}
.log-track .log-tag{color:var(--accent-h)}
.sess-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:12px;color:var(--txt2)}
.sess-item .material-symbols-outlined{font-size:16px;color:var(--muted)}
.sess-dot{font-size:11px;color:var(--faint);font-family:monospace}

/* ───────── Auth gate ───────── */
#auth-gate{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:radial-gradient(900px 600px at 50% -10%,rgba(108,140,255,.14),transparent 60%),var(--bg-deep)}
#auth-gate.on{display:flex}
.ag-card{position:relative;width:380px;max-width:92vw;background:var(--glass-strong);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--sh-3);backdrop-filter:blur(20px)}
.ag-logo{width:54px;height:54px;border-radius:16px;background:var(--grad);display:grid;place-items:center;margin-bottom:16px}
.ag-logo .material-symbols-outlined{font-size:30px;color:#fff}
.ag-title{font-size:26px;font-weight:800;letter-spacing:.3px}
.ag-sub{color:var(--muted);font-size:13px;margin:4px 0 22px}
.ag-seg{display:flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:11px;padding:4px;margin-bottom:16px}
.ag-seg button{flex:1;padding:8px;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:13px;border-radius:8px;cursor:pointer;transition:all var(--tr)}
.ag-seg button.on{background:var(--grad);color:#fff}
.ag-field{margin-bottom:12px}
.ag-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:600}
.ag-field input{width:100%;padding:11px 13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);font-size:14px;outline:none;transition:all var(--tr)}
.ag-field input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.ag-err{color:var(--danger);font-size:12px;min-height:16px;margin-bottom:6px}
.ag-go{width:100%;padding:12px;border:0;border-radius:var(--r-sm);background:var(--grad);color:#fff;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 4px 16px rgba(108,140,255,.4)}
.ag-go:hover{filter:brightness(1.08)}
.ag-foot{text-align:center;color:var(--faint);font-size:11px;margin-top:16px}

/* ───────── Toast ───────── */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);z-index:200;
  background:var(--glass-strong);border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 18px;
  font-size:13px;font-weight:600;box-shadow:var(--sh-3);opacity:0;pointer-events:none;transition:all .25s;display:flex;align-items:center;gap:9px}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast .material-symbols-outlined{font-size:18px}
#toast.ok .material-symbols-outlined{color:var(--good)}
#toast.err .material-symbols-outlined{color:var(--danger)}
.hidden{display:none!important}