:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel-border:#1f2937;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --primary:#3b82f6;
  --primary-2:#2563eb;
  --ghost:#111827;
  --ring:#60a5fa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 600px at 10% -10%, #1e293b55 0%, transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
}
.container{max-width:1100px;margin:24px auto 40px;padding:0 20px}
.hidden{display:none}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1100px;margin:24px auto 0;padding:16px 20px;
  border:1px solid var(--panel-border);border-radius:16px;background:rgba(15,23,42,.75);
  backdrop-filter: blur(8px);
}
.brand{display:flex; gap:14px; align-items:center}
.logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,#111827,#1f2937);color:#a5b4fc;border:1px solid #374151}
.brand-text h1{font-size:20px;margin:0 0 2px 0}
.brand-text .sub{margin:0;color:var(--muted);font-size:12px}
.session{display:flex;gap:10px;align-items:center}
.badge.pill{padding:8px 12px;background:#0b1220;border:1px solid #374151;border-radius:9999px;color:#c7d2fe}

.gate-wrap{display:grid;place-items:center;min-height:65vh;padding:28px}
.gate-card{
  width:100%;max-width:640px;text-align:center;padding:38px 30px;border-radius:18px;
  border:1px solid var(--panel-border);background:rgba(15,23,42,.82);
}
.gate-logo{width:54px;height:54px;margin:0 auto 12px;display:grid;place-items:center;border-radius:12px;background:#111827;border:1px solid #374151;color:#a5b4fc;font-weight:800;letter-spacing:.5px}
.gate-title{margin:8px 0 6px 0; font-size:36px; font-weight:700}
.gate-sub{margin:0 0 16px 0; color:var(--muted)}

.panel{background:rgba(15,23,42,.65);border-radius:16px;padding:20px;margin:18px 0;border:1px solid var(--panel-border)}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.meta{color:var(--muted);font-size:12px}
.grid-2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}}

.label{display:block;margin:0 0 6px 2px;color:#cbd5e1;font-size:13px}
.input,.input-file{
  width:100%;border:1px solid #334155;border-radius:12px;background:#0b1220;color:var(--text);padding:10px 12px;outline:none
}
.input:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(96,165,250,.25)}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.actions{margin-top:8px}
.btn{cursor:pointer;border:none;border-radius:12px;padding:10px 14px;font-weight:600;transition:transform .06s ease-in-out, filter .15s}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:var(--ghost);color:#e5e7eb;border:1px solid #334155}
.btn-ghost:hover{filter:brightness(1.1)}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-lg{padding:12px 18px;font-size:16px}

.list{display:flex;flex-direction:column;gap:10px}
.file-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#0b1220;border:1px solid #334155;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background .15s}
.file-row:hover{background:#0c1629}
.file-row.active{outline:2px solid var(--ring);background:#0a1220}
.file-meta{color:var(--muted);font-size:12px}
.actions{display:flex;gap:8px}

.footer{max-width:1100px;margin:12px auto 40px;padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;color:var(--muted)}
.signature{display:flex;align-items:center;gap:12px;color:#ffffff}
.signature--bright{color:#ffffff}
.sig-text{font-style:italic; font-size:34px; fill:currentColor}

#toast{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{background:#0b1220;color:#fff;padding:10px 12px;border-radius:10px;border:1px solid #334155;min-width:240px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.toast.ok{border-color:#16a34a;color:#bbf7d0}.toast.err{border-color:#ef4444;color:#fecaca}

/* Skeleton */
.skeleton .s-row{height:48px;background:#0b1220;border:1px solid #334155;border-radius:12px;margin:6px 0;position:relative;overflow:hidden}
.skeleton .s-row:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);animation:shimmer 1.35s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* Entrances */
.fade-in{animation:fadeIn .3s ease both}@keyframes fadeIn{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.slide-down{animation:slideDown .35s ease both}@keyframes slideDown{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.elevate{box-shadow:0 20px 60px rgba(0,0,0,.28)}