:root{
    --indigo-950:#141F38;
    --indigo-900:#1B2A4A;
    --indigo-800:#22335F;
    --indigo-700:#2C4076;
    --indigo-100:#E7EBF5;
    --gold:#C9A24A;
    --gold-dim:#8E762F;
    --cream:#F4F1E7;
    --paper:#FBFAF5;
    --ink:#1E2430;
    --slate:#5C6472;
    --slate-soft:#8A93A3;
    --line:#DDD6C4;
    --line-dark:#324062;
    --green:#3F7A5C;
    --green-bg:#E7F1EA;
    --brick:#A6432E;
    --brick-bg:#F7E9E4;
    --radius:10px;
    --shadow:0 1px 2px rgba(20,31,56,.06), 0 8px 24px -12px rgba(20,31,56,.18);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-0.01em;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  ::selection{background:var(--gold); color:var(--indigo-950);}

  /* ===== texture ===== */
  .weave-bg{
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 2px, transparent 2px, transparent 6px);
  }

  /* ===== APP SHELL ===== */
  .app{min-height:100vh; display:flex; flex-direction:column;}

  .topbar{
    background:var(--indigo-950);
    color:#fff;
    display:flex;
    align-items:center;
    gap:24px;
    padding:0 20px;
    height:64px;
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid var(--line-dark);
  }
  .brand{display:flex; align-items:center; gap:10px; padding-right:16px; border-right:1px solid var(--line-dark);}
  .brand-mark{
    width:36px;height:36px;border-radius:9px;
    background:var(--indigo-800);
    display:flex;align-items:center;justify-content:center;
    position:relative; overflow:hidden; flex-shrink:0;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .brand-mark svg{position:relative; z-index:1;}
  .brand-text{font-family:'Space Grotesk'; font-weight:700; font-size:17px; line-height:1.1;}
  .brand-text span{display:block; font-family:'Inter'; font-weight:400; font-size:10.5px; color:var(--slate-soft); letter-spacing:.06em; text-transform:uppercase; margin-top:2px;}

  .role-tabs{display:flex; gap:6px; background:rgba(255,255,255,.05); padding:4px; border-radius:10px;}
  .role-tab{
    padding:8px 14px; font-size:13px; font-weight:600; color:var(--slate-soft);
    border-radius:7px; border:1px dashed transparent; display:flex; align-items:center; gap:7px;
  }
  .role-tab .swatch{width:9px;height:9px;border-radius:2px; background:currentColor; opacity:.55;}
  .role-tab.active{background:var(--paper); color:var(--indigo-950); border-color:var(--line);}
  .role-tab.active .swatch{background:var(--gold); opacity:1;}

  .topbar-right{margin-left:auto; display:flex; align-items:center; gap:16px;}
  .search-box{
    display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:7px 12px; width:260px;
    color:var(--slate-soft); font-size:13px;
  }
  .search-box input{background:transparent; border:none; outline:none; color:#fff; font-size:13px; width:100%;}
  .icon-btn{
    width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center; color:#fff; position:relative;
  }
  .icon-btn .dot{position:absolute; top:6px; right:6px; width:7px;height:7px;border-radius:50%; background:var(--brick); border:1.5px solid var(--indigo-950);}
  .avatar{width:34px;height:34px;border-radius:8px; background:var(--indigo-700); display:flex;align-items:center;justify-content:center; font-weight:700; font-size:13px; border:1px solid var(--line-dark);}

  /* ===== BODY LAYOUT ===== */
  .body-wrap{display:flex; flex:1; min-height:0;}
  .sidebar{
    width:230px; flex-shrink:0; background:var(--indigo-900); color:var(--indigo-100);
    padding:20px 12px; display:flex; flex-direction:column; gap:2px;
  }
  .sidebar .group-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-soft); padding:14px 12px 6px;}
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:500;
    color:var(--indigo-100); opacity:.75; border-left:2px solid transparent;
  }
  .nav-item .ic{width:16px; text-align:center; opacity:.8; font-size:14px;}
  .nav-item:hover{background:rgba(255,255,255,.05); opacity:1;}
  .nav-item.active{background:var(--indigo-800); opacity:1; border-left:2px solid var(--gold); box-shadow:var(--shadow);}

  .main{flex:1; min-width:0; padding:28px 32px 60px; overflow-x:hidden;}
  .page{display:none;}
  .page.active{display:block; animation:fade .25s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

  .page-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
  .page-head h1{font-size:25px;}
  .page-head .sub{color:var(--slate); font-size:13.5px; margin-top:4px;}
  .eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--gold-dim); font-weight:700; margin-bottom:6px;}

  .btn{
    padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; border:1px solid transparent;
  }
  .btn-primary{background:var(--indigo-950); color:#fff;}
  .btn-primary:hover{background:var(--indigo-800);}
  .btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
  .btn-ghost:hover{background:#fff;}
  .btn-gold{background:var(--gold); color:var(--indigo-950);}

  /* ===== GRID / CARDS ===== */
  .grid{display:grid; gap:18px;}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:2fr 1fr;}
  @media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} }

  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  }
  .card h3{font-size:15px;}
  .card-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .card-title-row .more{font-size:12px; font-weight:600; color:var(--gold-dim);}

  /* stat card */
  .stat-card{position:relative; overflow:hidden;}
  .stat-card .stat-num{font-family:'JetBrains Mono'; font-size:28px; font-weight:600; margin-top:6px;}
  .stat-card .stat-label{font-size:12.5px; color:var(--slate); font-weight:500;}
  .stat-card .stat-delta{font-size:11.5px; font-weight:600; margin-top:8px; display:inline-flex; align-items:center; gap:4px;}
  .stat-delta.up{color:var(--green);}
  .stat-delta.down{color:var(--brick);}
  .stat-card .stripe{position:absolute; left:0; top:0; bottom:0; width:4px;}

  /* ===== WOVEN PROGRESS (signature element) ===== */
  /* ===== TAILOR'S TAPE PROGRESS (signature element v2) ===== */
  .prog-row{display:flex; align-items:center; gap:12px; margin:18px 0 9px;}
  .prog-row:first-child{margin-top:6px;}
  .prog-row .lbl{width:132px; font-size:12.5px; color:var(--slate); flex-shrink:0;}
  .tape{
    position:relative; flex:1; height:14px; border-radius:3px;
    background:var(--paper); border:1px solid var(--line);
    background-image:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%);
    overflow:visible;
  }
  .tape .fill{
    position:absolute; top:0; left:0; bottom:0; border-radius:2px 0 0 2px;
    transition:width .3s ease;
  }
  .tape .fill.gold{background:var(--gold);}
  .tape .fill.green{background:var(--green);}
  .tape .fill.brick{background:var(--brick);}
  .tape .fill::after{
    content:""; position:absolute; right:0; top:0; bottom:0; width:2px; background:rgba(20,31,56,.25);
  }
  .tape .marker{
    position:absolute; top:-22px; transform:translateX(-50%);
    font-family:'JetBrains Mono'; font-size:10px; font-weight:700;
    background:var(--indigo-950); color:#fff; padding:2px 6px; border-radius:4px; white-space:nowrap;
  }
  .tape .marker::after{
    content:""; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%);
    border:3px solid transparent; border-top-color:var(--indigo-950);
  }
  .tape.compact{height:8px; margin-top:2px;}
  .tape.compact .marker{display:none;}
  .tape .target-line{
    position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--brick); z-index:2;
  }
  .tape .target-line::after{
    content:attr(data-t); position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono'; font-size:9px; font-weight:700; color:var(--brick); white-space:nowrap;
  }
  .skill-row{margin-bottom:20px;}
  .skill-row:last-child{margin-bottom:4px;}
  .skill-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .skill-head .skill-name{font-size:13.5px; font-weight:600;}
  .tape-labels{display:flex; justify-content:space-between; font-size:10.5px; color:var(--slate-soft); margin-top:5px; font-family:'JetBrains Mono';}

  /* course cards */
  .course-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); display:flex; flex-direction:column;}
  .course-thumb{
    height:96px; background:linear-gradient(135deg,var(--indigo-800),var(--indigo-950));
    position:relative; display:flex; align-items:flex-end; padding:10px 12px; overflow:hidden;
  }
  .course-thumb::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 3px, transparent 3px 8px);}
  .course-thumb .tag{
    background:rgba(255,255,255,.12); color:#fff; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:5px;
    border:1px solid rgba(255,255,255,.2); position:relative; z-index:1;
  }
  .course-thumb .tag.mandatory{background:var(--brick); border-color:transparent;}
  .course-body{padding:13px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .course-body h4{font-size:14px; line-height:1.3;}
  .course-meta{font-size:11.5px; color:var(--slate-soft); display:flex; gap:10px;}
  .course-cta{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .course-cta .btn{width:100%; text-align:center; font-size:12.5px; padding:8px;}

  /* thread streak (loom) */
  .loom{display:flex; gap:6px; align-items:flex-end;}
  .loom .cell{width:28px; height:40px; border-radius:4px; position:relative; overflow:hidden; background:#EFEAD9; border:1px solid var(--line);}
  .loom .cell.on{background:repeating-linear-gradient(90deg, var(--gold) 0 3px, var(--gold-dim) 3px 6px);}
  .loom .cell span{position:absolute; bottom:3px; left:0; right:0; text-align:center; font-size:9.5px; font-family:'JetBrains Mono'; color:var(--indigo-950); font-weight:600;}
  .loom .cell.on span{color:#fff;}

  /* list rows */
  .row-list{display:flex; flex-direction:column;}
  .row-item{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line);}
  .row-item:last-child{border-bottom:none;}
  .row-ic{width:36px; height:36px; border-radius:8px; background:var(--indigo-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px;}
  .row-main{flex:1; min-width:0;}
  .row-main .t1{font-size:13.5px; font-weight:600;}
  .row-main .t2{font-size:12px; color:var(--slate);}
  .badge{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em;}
  .badge.green{background:var(--green-bg); color:var(--green);}
  .badge.gold{background:#F3E9CE; color:var(--gold-dim);}
  .badge.brick{background:var(--brick-bg); color:var(--brick);}
  .badge.slate{background:var(--indigo-100); color:var(--indigo-700);}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-soft); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--line);}
  td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .avatar-sm{width:26px;height:26px;border-radius:6px; background:var(--indigo-700); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; margin-right:8px;}

  .path-track{display:flex; align-items:stretch; gap:0; overflow-x:auto; padding-bottom:10px;}
  .path-node{min-width:150px; flex-shrink:0; text-align:center; padding:0 6px; position:relative;}
  .path-node .dot{width:34px; height:34px; border-radius:50%; background:var(--paper); border:2px solid var(--line); margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; font-family:'JetBrains Mono'; color:var(--slate);}
  .path-node.done .dot{background:var(--green); border-color:var(--green); color:#fff;}
  .path-node.current .dot{background:var(--gold); border-color:var(--gold-dim); color:var(--indigo-950);}
  .path-node .lbl{font-size:12px; font-weight:600;}
  .path-node .sub{font-size:10.5px; color:var(--slate-soft);}
  .path-node:not(:last-child)::after{content:""; position:absolute; top:17px; left:calc(50% + 25px); right:calc(-50% + 25px); height:2px; background:var(--line);}
  .path-node.done:not(:last-child)::after{background:var(--green);}

  .quiz-box{border:1px solid var(--line); border-radius:8px; padding:16px; background:var(--paper);}
  .quiz-opt{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; margin-top:8px; font-size:13px;}
  .quiz-opt input{accent-color:var(--gold-dim);}
  .quiz-opt.correct{border-color:var(--green); background:var(--green-bg);}

  .lesson-item{display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:8px; font-size:13px;}
  .lesson-item.active{background:var(--indigo-100);}
  .lesson-item .chk{width:18px;height:18px;border-radius:5px; border:1.5px solid var(--line); flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:11px;}
  .lesson-item.done .chk{background:var(--green); border-color:var(--green); color:#fff;}
  .lesson-item .dur{margin-left:auto; font-family:'JetBrains Mono'; font-size:11px; color:var(--slate-soft);}

  .video-frame{
    aspect-ratio:16/9; border-radius:10px; background:linear-gradient(135deg,var(--indigo-950),var(--indigo-800));
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; margin-bottom:16px;
  }
  .video-frame::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 3px, transparent 3px 9px);}
  .play-btn{width:58px;height:58px; border-radius:50%; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; position:relative; z-index:1;}

  .tabs-sm{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px;}
  .tab-sm{padding:9px 14px; font-size:13px; font-weight:600; color:var(--slate); border-bottom:2px solid transparent; margin-bottom:-1px;}
  .tab-sm.active{color:var(--indigo-950); border-color:var(--gold);}

  .empty{text-align:center; padding:40px 20px; color:var(--slate);}
  .empty h4{font-family:'Space Grotesk'; color:var(--ink); margin-bottom:6px;}

  .kpi-ring{position:relative; width:86px; height:86px; flex-shrink:0;}
  .kpi-ring svg{transform:rotate(-90deg);}
  .kpi-ring .center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono'; font-weight:700; font-size:17px;}

  ::-webkit-scrollbar{height:8px; width:8px;}
  ::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}

  .menu-btn{
    display:none; width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12); color:#fff; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
  }
  .sidebar-overlay{
    position:fixed; inset:64px 0 0 0; background:rgba(15,22,40,.5); z-index:90;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .sidebar-overlay.show{opacity:1; pointer-events:auto;}

  @media (max-width:900px){
    .menu-btn{display:flex;}
    .brand{padding-right:12px;}
    .brand-text span{display:none;}
    .role-tabs{overflow-x:auto; max-width:44vw; -ms-overflow-style:none; scrollbar-width:none;}
    .role-tabs::-webkit-scrollbar{display:none;}
    .role-tab{white-space:nowrap; padding:8px 11px; font-size:12.5px;}
    .search-box{display:none;}
    .topbar{gap:12px; padding:0 12px;}
    .topbar-right{gap:8px;}

    .sidebar{
      position:fixed; top:64px; left:-250px; bottom:0; width:230px;
      z-index:95; transition:left .25s ease; box-shadow:10px 0 30px rgba(15,22,40,.35);
      overflow-y:auto;
    }
    .sidebar.open{left:0;}

    .main{padding:16px 14px 50px;}
    .page-head{align-items:flex-start;}
    .page-head h1{font-size:20px;}
    .grid-4, .grid-3{grid-template-columns:repeat(2,1fr);}
  }

  @media (max-width:640px){
    .topbar{height:58px;}
    .body-wrap{min-height:calc(100vh - 58px);}
    .sidebar{top:58px;}
    .sidebar-overlay{inset:58px 0 0 0;}
    .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;}
    .card{padding:15px;}
    .page-head{flex-direction:column; align-items:stretch;}
    .page-head button, .page-head > div:last-child{width:100%;}
    .stat-card .stat-num{font-size:24px;}
    .course-thumb{height:80px;}
    .path-node{min-width:120px;}
    .prog-row .lbl{width:100px; font-size:11.5px;}
    table{min-width:520px;}
    .card:has(table){overflow-x:auto; -webkit-overflow-scrolling:touch;}
    .role-tabs{max-width:56vw;}
  }