:root{
  --bg:#eef2f7;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#f1f5f9;
  --text:#111827;
  --muted:#64748b;
  --line:rgba(15,23,42,.10);
  --line-strong:rgba(15,23,42,.16);
  --primary:#1d4ed8;
  --primary-strong:#1e40af;
  --primary-soft:rgba(29,78,216,.08);
  --success:#15803d;
  --warning:#b45309;
  --danger:#b91c1c;
  --shadow:0 18px 40px rgba(15,23,42,.08);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 680px at 0% 0%, rgba(29,78,216,.05), transparent 60%),
    linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%);
  color:var(--text);
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:24px 22px 42px}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 18px;background:rgba(255,255,255,.94);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(10px)
}
.card,.box{
  background:rgba(255,255,255,.96);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow)
}
.card{padding:22px}
.box{padding:16px}
.grid{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.h1{font-size:26px;font-weight:800;line-height:1.1;margin:0 0 8px;letter-spacing:-.03em}
.h2{font-size:14px;font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
.muted{color:var(--muted);font-size:13px;line-height:1.5}
.hr{height:1px;background:var(--line);margin:18px 0;border:0}
.pill,.badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-size:12px;color:var(--muted)
}
.pill b,.badge b{color:var(--text)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:10px 14px;border-radius:14px;
  border:1px solid var(--line-strong);background:#fff;color:var(--text);
  font-weight:700;font-size:13px;line-height:1;cursor:pointer;transition:.18s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.08)}
.btn.primary{border-color:var(--primary);background:linear-gradient(180deg, var(--primary), var(--primary-strong));color:#fff}
.btn.ghost{background:transparent}
.btn.sm{min-height:36px;padding:8px 12px;border-radius:12px;font-size:12px}
.btn.danger{border-color:rgba(185,28,28,.25);color:var(--danger)}
.btn.warn{border-color:rgba(180,83,9,.25);color:var(--warning)}
.btn.disabled,.btn:disabled{opacity:.56;cursor:not-allowed;transform:none;box-shadow:none}
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line-strong);
  background:#fff;color:var(--text);font:inherit;outline:none;transition:.18s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(29,78,216,.45);box-shadow:0 0 0 4px rgba(29,78,216,.10)
}
label{display:block;font-size:12px;font-weight:700;color:#475569;margin:0 0 6px}
textarea{min-height:120px;resize:vertical}
.table-wrap{overflow:auto}
.login-shell{
  min-height:100vh;display:grid;grid-template-columns:minmax(300px, 1.15fr) minmax(420px, .85fr);
  position:relative;isolation:isolate
}
.login-shell::before{
  content:"";position:fixed;inset:0;
  background-image:linear-gradient(180deg, rgba(5,15,35,.35), rgba(4,10,28,.72)), url("/assets/login_bg.png");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transform:scale(1.02);z-index:-2
}
.login-shell::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(900px 580px at 16% 18%, rgba(59,130,246,.18), transparent 60%),
             radial-gradient(1100px 700px at 78% 76%, rgba(8,47,73,.22), transparent 64%)
}
.login-panel{
  padding:48px 48px 42px;display:flex;flex-direction:column;justify-content:space-between;
  color:#eef6ff
}
.login-brand{
  max-width:520px;padding:18px 0 0
}
.login-kicker{
  display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);
  font-size:12px;color:#e5eefc
}
.login-brand h1{margin:18px 0 12px;font-size:42px;line-height:1.05;letter-spacing:-.04em;color:#fff}
.login-brand p{margin:0;font-size:15px;line-height:1.7;color:rgba(241,245,249,.88);max-width:54ch}
.login-points{display:grid;gap:12px;margin-top:24px;max-width:520px}
.login-point{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);backdrop-filter:blur(12px)
}
.login-point strong{display:block;font-size:13px;color:#fff}
.login-point span{display:block;margin-top:3px;font-size:12px;line-height:1.55;color:rgba(226,232,240,.86)}
.login-card-wrap{display:flex;align-items:center;justify-content:center;padding:36px}
.login-card{
  width:min(100%, 460px);padding:30px;border-radius:28px;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.55);
  box-shadow:0 30px 70px rgba(2,6,23,.22);backdrop-filter:blur(18px)
}
.login-card .brand-mark{
  width:50px;height:50px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(180deg, var(--primary), var(--primary-strong));color:#fff;
  font-weight:900;letter-spacing:.02em;box-shadow:0 16px 32px rgba(29,78,216,.24)
}
.login-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.login-subtitle{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.login-form{display:grid;gap:14px}
.password-wrap{position:relative}
.password-wrap input{padding-right:52px}
.password-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:#475569;font-weight:700;cursor:pointer;padding:6px 8px
}
.login-footer{margin-top:18px;padding-top:18px;border-top:1px solid rgba(15,23,42,.08);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.login-error{
  padding:12px 14px;border-radius:14px;border:1px solid rgba(185,28,28,.22);
  background:rgba(185,28,28,.07);color:#7f1d1d;font-size:13px
}
.app-shell{display:flex;min-height:100vh}
.app-sidebar{
  width:286px;flex:0 0 286px;background:rgba(10,18,35,.94);color:#dbe7ff;
  border-right:1px solid rgba(255,255,255,.06);padding:22px 18px;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:18px;box-shadow:18px 0 40px rgba(2,6,23,.12)
}
.app-sidebar-head{padding:6px 8px 10px}
.app-logo{display:flex;align-items:center;gap:12px;color:#fff}
.app-logo-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(180deg, #3b82f6, #1d4ed8);font-weight:900;box-shadow:0 16px 32px rgba(29,78,216,.28)
}
.app-logo-meta small{display:block;color:rgba(219,231,255,.65);font-size:11px;margin-top:2px}
.app-workspace-chip{
  margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08)
}
.app-workspace-chip .label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(219,231,255,.56)}
.app-workspace-chip .value{margin-top:6px;font-size:14px;font-weight:800;color:#fff;line-height:1.35}
.app-nav{display:grid;gap:6px}
.app-nav-group{display:grid;gap:6px}
.app-nav-label{padding:10px 12px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(219,231,255,.42)}
.app-nav a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;color:#dbe7ff;
  font-size:13px;font-weight:700;transition:.18s ease
}
.app-nav a:hover{background:rgba(255,255,255,.08)}
.app-nav a.active{background:rgba(59,130,246,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(96,165,250,.22)}
.app-nav .icon{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);font-size:14px;flex:0 0 32px
}
.app-sidebar-foot{margin-top:auto;padding:14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.app-sidebar-foot .name{font-weight:800;color:#fff}
.app-sidebar-foot .meta{margin-top:2px;font-size:12px;color:rgba(219,231,255,.66)}
.app-sidebar-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.app-sidebar-actions .btn{min-height:36px;padding:8px 12px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff}
.app-main{flex:1;min-width:0}
.app-main-top{
  position:sticky;top:0;z-index:18;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;border-bottom:1px solid rgba(15,23,42,.06);
  background:rgba(238,242,247,.84);backdrop-filter:blur(12px)
}
.app-main-title{display:flex;flex-direction:column;gap:4px}
.app-main-title .eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;font-weight:800}
.app-main-title h1{margin:0;font-size:24px;letter-spacing:-.03em}
.app-main-title p{margin:0;color:#64748b;font-size:13px}
.sidebar-toggle{
  display:none;width:42px;height:42px;border-radius:14px;border:1px solid var(--line-strong);
  background:#fff;color:var(--text);font-size:18px;cursor:pointer;box-shadow:var(--shadow)
}
.sidebar-backdrop{display:none}
@media (max-width: 1080px){
  .login-shell{grid-template-columns:1fr}
  .login-panel{display:none}
  .login-card-wrap{padding:24px}
  .app-sidebar{
    position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .22s ease;z-index:50
  }
  .app-shell.sidebar-open .app-sidebar{transform:translateX(0)}
  .sidebar-toggle{display:inline-grid;place-items:center}
  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(2,6,23,.48);z-index:40
  }
  .app-shell.sidebar-open .sidebar-backdrop{display:block}
  .app-main-top{padding:14px 16px}
  .container{padding:18px 14px 32px}
}
@media (max-width: 700px){
  .h1{font-size:22px}
  .topbar{padding:14px}
  .card{padding:18px}
  .login-card{padding:24px;border-radius:24px}
  .login-head{margin-bottom:18px}
  .login-footer{flex-direction:column;align-items:flex-start}
}


/* Conditional FT / Library refinements */
.ft-page .topbar, .library .topbar{box-shadow:var(--shadow);}
.ft-page .card, .library .card{box-shadow:var(--shadow);}
.ft-page .actions .btn, .library .actions .btn{white-space:nowrap;}
.ft-page .questionCard, .library .groupBoard{box-shadow:0 6px 18px rgba(15,23,42,.03);}