:root{--bg:#07101d;--bg2:#0a1424;--panel:#0f1b2e;--panel2:#12213a;--line:#203451;--text:#eef4ff;--muted:#91a6c4;--primary:#7c5cff;--primary2:#9c7cff;--green:#27d89d;--amber:#f7bc55;--red:#ff6b7f;--blue:#4ea1ff;--shadow:0 22px 60px rgba(0,0,0,.28);--radius:20px}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 85% -10%,rgba(124,92,255,.14),transparent 32%),radial-gradient(circle at 15% 20%,rgba(39,216,157,.08),transparent 26%),var(--bg);color:var(--text);min-height:100vh}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.shell{display:grid;grid-template-columns:272px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;border-right:1px solid rgba(255,255,255,.07);background:rgba(5,13,24,.9);backdrop-filter:blur(18px);z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:8px 10px 24px}.brandmark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#39d4b4);display:grid;place-items:center;box-shadow:0 12px 30px rgba(124,92,255,.35);font-weight:900}.brand h2{font-size:18px;margin:0;letter-spacing:.1px}.brand small{display:block;color:var(--muted);margin-top:2px}.nav-label{font-size:10px;letter-spacing:.16em;color:#657a99;text-transform:uppercase;padding:16px 12px 8px}.nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;color:#aebed4;margin:3px 0;transition:.2s}.nav a:hover{background:#101e33;color:white;transform:translateX(2px)}.nav a.active{background:linear-gradient(90deg,rgba(124,92,255,.2),rgba(124,92,255,.06));color:white;border:1px solid rgba(124,92,255,.26)}.nav .ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#13233b;font-size:13px}.sidebar-bottom{position:absolute;left:16px;right:16px;bottom:18px}.mini-user{padding:12px;border:1px solid var(--line);border-radius:15px;background:#0d192a;display:flex;gap:10px;align-items:center}.avatar{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#7c5cff,#4ea1ff);display:grid;place-items:center;font-weight:800}.mini-user .name{font-size:13px;font-weight:700}.mini-user .email{font-size:11px;color:var(--muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{min-width:0}.topbar{height:76px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;background:rgba(7,16,29,.82);backdrop-filter:blur(18px);z-index:15}.topbar-left{display:flex;gap:13px;align-items:center}.mobile-menu{display:none}.page-title{font-size:16px;font-weight:750}.crumb{font-size:12px;color:var(--muted);margin-top:2px}.top-actions{display:flex;gap:9px;align-items:center}.main{padding:28px;max-width:1600px;margin:0 auto}.hero{position:relative;overflow:hidden;border:1px solid rgba(124,92,255,.24);background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(18,33,58,.78) 45%,rgba(39,216,157,.08));border-radius:26px;padding:30px;box-shadow:var(--shadow);min-height:188px}.hero h1{font-size:31px;margin:0 0 8px;letter-spacing:-.03em}.hero p{color:#a9bdd8;max-width:670px;margin:0;line-height:1.65}.hero-grid{position:absolute;right:18px;top:12px;width:280px;height:180px;perspective:700px}.orb{position:absolute;border-radius:50%;filter:drop-shadow(0 16px 26px rgba(0,0,0,.2));animation:float 7s ease-in-out infinite}.orb.one{width:96px;height:96px;right:76px;top:35px;background:radial-gradient(circle at 28% 24%,#d9d0ff,#7c5cff 38%,#36266f 78%)}.orb.two{width:46px;height:46px;right:32px;top:18px;background:radial-gradient(circle at 30% 25%,#c8fff0,#27d89d 43%,#0d6250);animation-delay:-2s}.orb.three{width:34px;height:34px;right:182px;top:108px;background:radial-gradient(circle at 30% 25%,#d9ebff,#4ea1ff 43%,#174f89);animation-delay:-4s}.ring{position:absolute;width:180px;height:68px;border:1px solid rgba(168,147,255,.45);border-radius:50%;right:32px;top:60px;transform:rotateX(68deg) rotateZ(-11deg);box-shadow:0 0 30px rgba(124,92,255,.12)}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(4deg)}}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}.stat{border:1px solid var(--line);background:linear-gradient(180deg,#0f1c30,#0c1728);border-radius:18px;padding:18px;position:relative;overflow:hidden}.stat:after{content:"";position:absolute;right:-20px;bottom:-25px;width:80px;height:80px;border-radius:50%;background:rgba(124,92,255,.08)}.stat .label{font-size:12px;color:var(--muted)}.stat .value{font-size:27px;font-weight:800;letter-spacing:-.03em;margin:6px 0}.stat .delta{font-size:11px;color:var(--green)}.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,29,49,.96),rgba(11,22,38,.96));border-radius:20px;box-shadow:0 14px 34px rgba(0,0,0,.16)}.card-head{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;gap:16px;align-items:center}.card-head h3{margin:0;font-size:15px}.card-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.card-body{padding:20px}.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}.toolbar h1{margin:0;font-size:25px}.toolbar p{margin:4px 0 0;color:var(--muted);font-size:13px}.btn{border:1px solid var(--line);background:#13233a;color:#eaf2ff;border-radius:11px;padding:10px 14px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.18s}.btn:hover{transform:translateY(-1px);border-color:#46628a}.btn-primary{background:linear-gradient(135deg,#7c5cff,#6950e9);border-color:#8b73ff;box-shadow:0 10px 24px rgba(124,92,255,.22)}.btn-success{background:#12382f;border-color:#1f6b57;color:#8ef0cf}.btn-danger{background:#341824;border-color:#6e2d3d;color:#ff9bab}.btn-ghost{background:transparent}.btn-sm{padding:7px 10px;font-size:12px;border-radius:9px}.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:15px}.field{grid-column:span 6}.field.full{grid-column:span 12}.field.third{grid-column:span 4}.field.quarter{grid-column:span 3}.field label{display:block;font-size:12px;font-weight:700;color:#b9c9de;margin:0 0 7px}.input,.select,.textarea{width:100%;border:1px solid #29415f;background:#091727;color:#edf4ff;border-radius:12px;padding:11px 12px;outline:none;transition:.16s}.textarea{min-height:120px;resize:vertical;line-height:1.55}.input:focus,.select:focus,.textarea:focus{border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.12)}.hint{font-size:11px;color:#7188a7;margin-top:6px}.switch{display:flex;align-items:center;gap:8px}.switch input{accent-color:#7c5cff;width:18px;height:18px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:760px}.table th{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7890ae;text-align:left;padding:11px 12px;border-bottom:1px solid #243853}.table td{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.055);font-size:13px;color:#d7e2f1;vertical-align:middle}.table tr:hover td{background:rgba(255,255,255,.018)}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.03em;background:#192b45;color:#b8c9e2;border:1px solid #294567}.badge.green{background:#10362d;border-color:#1c6652;color:#7ce8c3}.badge.amber{background:#352a13;border-color:#675323;color:#f6ce78}.badge.red{background:#351722;border-color:#6a2a3a;color:#ff9bad}.badge.purple{background:#261d4a;border-color:#4c398e;color:#c9baff}.actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.alert{padding:13px 15px;border-radius:13px;margin:0 0 16px;border:1px solid}.alert.success{background:#0f332a;border-color:#225c4d;color:#8ce9cb}.alert.error{background:#351821;border-color:#6c2a3b;color:#ffacb7}.alert.info{background:#122a43;border-color:#28557e;color:#a9d5ff}.empty{padding:40px;text-align:center;color:var(--muted)}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.tab{padding:8px 11px;border-radius:10px;border:1px solid var(--line);color:#9eb2cd;font-size:12px}.tab.active{background:#201a47;border-color:#4d3d9d;color:white}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#07111f;border:1px solid #22354f;border-radius:10px;padding:10px;color:#a9d5ff;font-size:12px}.progress{height:7px;background:#182943;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c5cff,#27d89d)}.chart{height:190px;display:flex;align-items:flex-end;gap:9px;padding:10px 2px}.bar{flex:1;min-width:12px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#8b73ff,#4d3ba6);position:relative;min-height:5px}.bar:hover:after{content:attr(data-v);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#020813;border:1px solid #263c59;padding:4px 6px;border-radius:7px;font-size:10px;white-space:nowrap}.metric-list{display:grid;gap:11px}.metric-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}.metric-row:last-child{border:0}.pill{padding:4px 7px;border-radius:8px;background:#13243d;color:#a7bdd8;font-size:10px}.login-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-art{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(circle at 60% 40%,rgba(124,92,255,.2),transparent 32%),#07111f}.login-copy{max-width:560px;padding:50px;z-index:3}.login-copy .eyebrow{color:#8d7bff;font-weight:800;letter-spacing:.16em;font-size:11px}.login-copy h1{font-size:50px;line-height:1.02;letter-spacing:-.05em;margin:16px 0}.login-copy p{font-size:16px;line-height:1.7;color:#95a9c6}.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:35px;background:#091321}.login-card{width:min(440px,100%);border:1px solid #213553;border-radius:26px;padding:30px;background:linear-gradient(180deg,#101e33,#0c1727);box-shadow:var(--shadow)}.login-card h2{margin:0 0 7px}.login-card>p{margin:0 0 24px;color:var(--muted);font-size:13px}.login-card .field{margin-bottom:15px}.login-orbit{position:absolute;width:390px;height:390px;border:1px solid rgba(124,92,255,.18);border-radius:50%;right:-100px;top:-90px;transform:rotateX(62deg)}.login-sphere{position:absolute;width:170px;height:170px;border-radius:50%;right:80px;top:80px;background:radial-gradient(circle at 30% 25%,#e4ddff,#7c5cff 35%,#241657 75%);filter:drop-shadow(0 32px 54px rgba(0,0,0,.4));animation:float 8s ease-in-out infinite}.section-title{font-size:18px;margin:0 0 4px}.muted{color:var(--muted)}.split{display:flex;justify-content:space-between;gap:12px;align-items:center}.preview-img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#0b1626;border:1px solid #233953}.color-dot{width:12px;height:12px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:6px}.jsonbox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.kpi-icon{width:38px;height:38px;border-radius:12px;background:#172943;display:grid;place-items:center;margin-bottom:13px;color:#b8caff}.toast-wrap{position:fixed;right:20px;top:90px;z-index:99;display:grid;gap:9px}.toast{min-width:280px;max-width:400px;padding:13px 15px;border-radius:12px;border:1px solid #2b4665;background:#0d1a2d;box-shadow:var(--shadow);animation:slidein .25s ease}.toast.success{border-color:#286c58}.toast.error{border-color:#7f3144}@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 12}.hero-grid{opacity:.35}.field.third,.field.quarter{grid-column:span 6}}@media(max-width:820px){.shell{display:block}.sidebar{position:fixed;left:-290px;width:272px;transition:.25s}.sidebar.open{left:0}.content{width:100%}.mobile-menu{display:inline-flex}.main{padding:18px}.topbar{padding:0 18px}.stats{grid-template-columns:1fr 1fr}.login-page{grid-template-columns:1fr}.login-art{display:none}.field,.field.third,.field.quarter{grid-column:span 12}}@media(max-width:520px){.stats{grid-template-columns:1fr}.hero{padding:22px}.hero h1{font-size:25px}.top-actions .hide-mobile{display:none}.login-form-wrap{padding:18px}.login-card{padding:22px}}

/* =========================================================
   SkillNova Sidebar Reliability Patch v1.1
   - Prevents the account card from covering navigation links
   - Makes long navigation scrollable
   - Adds desktop collapse + mobile drawer behavior
   ========================================================= */
.sidebar{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sidebar>.brand{flex:0 0 auto}
.sidebar .nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#29415f transparent;
  padding-right:4px;
  padding-bottom:8px;
}
.sidebar .nav::-webkit-scrollbar{width:6px}
.sidebar .nav::-webkit-scrollbar-track{background:transparent}
.sidebar .nav::-webkit-scrollbar-thumb{background:#29415f;border-radius:99px}
.sidebar .nav::-webkit-scrollbar-thumb:hover{background:#3a587c}
.sidebar-bottom{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  flex:0 0 auto;
  margin-top:10px;
}
.mobile-menu{display:inline-flex}

@media(min-width:821px){
  .shell{transition:grid-template-columns .22s ease}
  .shell.sidebar-collapsed{grid-template-columns:86px 1fr}
  .shell.sidebar-collapsed .sidebar{padding-left:12px;padding-right:12px}
  .shell.sidebar-collapsed .brand{justify-content:center;padding-left:0;padding-right:0}
  .shell.sidebar-collapsed .brand>div:last-child,
  .shell.sidebar-collapsed .nav-label,
  .shell.sidebar-collapsed .mini-user>div:last-child{display:none}
  .shell.sidebar-collapsed .nav a{
    font-size:0;
    justify-content:center;
    padding-left:8px;
    padding-right:8px;
  }
  .shell.sidebar-collapsed .nav .ico{
    width:38px;
    height:38px;
    font-size:14px;
  }
  .shell.sidebar-collapsed .mini-user{justify-content:center;padding:9px}
  .shell.sidebar-collapsed .avatar{width:38px;height:38px}
}

.sidebar-backdrop{display:none}
@media(max-width:820px){
  .sidebar{
    position:fixed;
    top:0;
    bottom:0;
    left:-290px;
    width:272px;
    height:100dvh;
    transition:left .25s ease;
    box-shadow:24px 0 60px rgba(0,0,0,.35);
  }
  .sidebar.open{left:0}
  .sidebar-backdrop{
    position:fixed;
    inset:0;
    display:block;
    background:rgba(0,0,0,.46);
    backdrop-filter:blur(2px);
    z-index:19;
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
  }
  .sidebar-backdrop.open{opacity:1;visibility:visible}
  body.sidebar-open{overflow:hidden}
}

/* =========================================================
   SkillNova Sidebar Hard Scroll Fix v1.2
   Explicit viewport math + visible scrollbar + touch support.
   This block intentionally overrides v1.1.
   ========================================================= */
.sidebar{
  height:100vh !important;
  max-height:100vh !important;
  padding:0 !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  overflow:hidden !important;
}
.sidebar>.brand{
  padding:30px 26px 22px !important;
  margin:0 !important;
  min-height:96px;
}
.sidebar .nav{
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  padding:0 16px 22px !important;
  margin:0 !important;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:#49698f #0a1525;
}
.sidebar .nav::-webkit-scrollbar{width:10px !important}
.sidebar .nav::-webkit-scrollbar-track{background:#0a1525 !important;border-radius:10px}
.sidebar .nav::-webkit-scrollbar-thumb{background:#49698f !important;border:2px solid #0a1525;border-radius:10px}
.sidebar .nav::-webkit-scrollbar-thumb:hover{background:#6385ad !important}
.sidebar-bottom{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  padding:12px 16px 18px !important;
  background:linear-gradient(180deg,rgba(5,13,24,.25),rgba(5,13,24,.98) 35%);
  border-top:1px solid rgba(255,255,255,.055);
  z-index:2;
}
@media(max-width:820px){
  .sidebar{
    height:100dvh !important;
    max-height:100dvh !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
  }
}