:root {
      /* Cal Poly brand palette */
      --brand: #154734;            /* Poly Green */
      --brand-600: #0e3627;
      --brand-100: #cfe0d8;
      --brand-050: #eef4f1;
      --gold: #BD8B13;             /* Mustang Gold */
      --grad: linear-gradient(120deg, #154734 0%, #2f7a55 55%, #789F90 100%);
      --grad-warm: linear-gradient(120deg, #F2C75C, #FF6A39);
      --ink: #23282a;
      --muted: #5f6a63;
      --faint: #8E9089;            /* Kennedy Gray */
      --line: #e3e5df;
      --line-2: #d2d5cc;
      --pass: #3A913F;             /* Farmers' Market */
      --fail: #c0392b;
      /* track accents (Cal Poly secondary) */
      --t1b:#eef4f1; --t1f:#154734; --t2b:#e6f4f0; --t2f:#2f8e86;
      --t3b:#eef3f0; --t3f:#5f7f70; --t4b:#fbf1d8; --t4f:#a9770f;
      --t5b:#ffe8df; --t5f:#e0521f; --t6b:#eef6e0; --t6f:#3A913F;
      --r: 16px; --r-lg: 22px; --r-xl: 26px; --pill: 999px;
      /* TB-26: lighter, less-decorative shadows (declutter) */
      --sh-sm: 0 1px 2px rgba(21,71,52,.05);
      --sh: 0 4px 14px -8px rgba(21,71,52,.12), 0 1px 2px rgba(21,71,52,.05);
      --sh-lg: 0 10px 28px -12px rgba(21,71,52,.15);
      --sh-glow: 0 12px 30px -14px rgba(21,71,52,.22);
      /* TB-26: consistent 4px spacing scale for new work */
      --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
      --t: 180ms cubic-bezier(.34,1.4,.5,1);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body { font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
           margin: 0; color: var(--ink); -webkit-font-smoothing: antialiased;
           background:
             radial-gradient(1000px 460px at 12% -8%, rgba(21,71,52,.06), transparent 60%),
             radial-gradient(900px 460px at 100% -4%, rgba(189,139,19,.08), transparent 55%),
             #f5f6f1;
           background-attachment: fixed; }
    a { color: var(--brand); text-decoration: none; }
    h1,h2,h3,h4 { color: var(--ink); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4em; }
    h2 { font-size: 1.5625rem; } h3 { font-size: 1.1875rem; }
    p { margin: 0 0 12px; }

    .app { display: flex; min-height: 100vh; }
    .sidebar { width: 262px; flex: none; position: sticky; top: 0; height: 100vh;
               background: #ffffff; border-right: 1px solid var(--line);
               display: flex; flex-direction: column; padding: 20px 14px; gap: 4px; }
    .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); padding: 4px 8px 16px; }
    .brand .mark { height: 42px; width: auto; }
    .brand .name { font-weight: 800; font-size: 1.0625rem; line-height: 1.05; letter-spacing: -.03em; }
    .brand .name small { display: block; font-weight: 700; font-size: 0.625rem; color: var(--faint); letter-spacing: .6px; text-transform: uppercase; margin-top: 3px; }
    .nav { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; margin-right: -6px; padding-right: 4px; }
    .nav::-webkit-scrollbar { width: 7px; }
    .nav::-webkit-scrollbar-track { background: transparent; }
    .nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
    .nav::-webkit-scrollbar-thumb:hover { background: var(--faint); }
    .nav .cap { font-size: 0.65625rem; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--faint); padding: 12px 12px 4px; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; border-radius: 8px; transition: var(--t); }
    .nav .cap:hover { color: var(--muted); }
    .nav .cap .chev { width: 12px; height: 12px; margin-left: auto; stroke: currentColor; transition: transform .2s; flex: none; opacity: .75; }
    .nav .cap.collapsed .chev { transform: rotate(-90deg); }
    .navitem.hidden-sec { display: none; }
    .navitem { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: var(--muted); font-size: 0.90625rem; font-weight: 700; transition: var(--t); }
    .navitem svg { width: 19px; height: 19px; flex: none; stroke: currentColor; }
    .navitem:hover { background: #f1f3ee; color: var(--ink); }
    .navitem.active { background: var(--brand-050); color: var(--brand); }
    .navitem.seam { color: #b3b6ac; cursor: default; }
    .navitem.seam .soon { margin-left: auto; font-size: 0.5625rem; font-weight: 800; letter-spacing: .3px; background: var(--brand-050); color: var(--brand); padding: 2px 8px; border-radius: var(--pill); }
    .side-foot { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
    .avatar { width: 40px; height: 40px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 0.9375rem; }
    .side-foot .who { min-width: 0; line-height: 1.15; }
    .side-foot .who b { font-size: 0.84375rem; font-weight: 800; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .side-foot .who a { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
    .side-foot form { margin-left: auto; }
    .icon-btn { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 7px; border-radius: 10px; display: grid; place-items: center; transition: var(--t); }
    .icon-btn:hover { background: #fbecea; color: var(--fail); }
    .icon-btn svg { width: 18px; height: 18px; stroke: currentColor; }

    .content { flex: 1; min-width: 0; }
    .content-inner { max-width: 1000px; margin: 0 auto; padding: 30px 34px 76px; }

    .hero { position: relative; overflow: hidden; background: var(--grad); border-radius: var(--r-xl); padding: 30px 32px; box-shadow: var(--sh-glow); color: #fff; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
    .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px); background-size: 22px 22px; opacity: .5; }
    .hero .deco { position: absolute; right: -10px; top: -20px; width: 260px; height: 200px; opacity: .22; pointer-events: none; }
    .hero .lead { flex: 1; min-width: 240px; position: relative; z-index: 1; }
    .hero h2 { color: #fff; font-size: 1.75rem; margin-bottom: 4px; }
    .hero .subtitle { color: rgba(255,255,255,.92); font-size: 0.9375rem; margin-bottom: 16px; font-weight: 500; }
    .gchips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
    .gchip { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 14px; padding: 9px 13px; display: flex; align-items: center; gap: 9px; color: #fff; }
    .gchip svg { width: 17px; height: 17px; stroke: #fff; flex: none; }
    .gchip .big { font-weight: 800; font-size: 0.9375rem; } .gchip .lbl { font-size: 0.75rem; color: rgba(255,255,255,.88); font-weight: 600; }
    .gchip.flame svg { stroke: #ffe1b0; fill: rgba(255,190,90,.4); }
    .xpchip { min-width: 208px; flex-direction: column; align-items: stretch; gap: 7px; }
    .xpchip .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .xpbar { height: 7px; background: rgba(255,255,255,.3); border-radius: var(--pill); overflow: hidden; }
    .xpbar > span { display: block; height: 100%; background: #fff; border-radius: var(--pill); }
    .hero .actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
    .hero .ring { --val: 0; width: 122px; height: 122px; flex: none; border-radius: 50%; position: relative; z-index: 1; background: conic-gradient(#fff calc(var(--val) * 1%), rgba(255,255,255,.3) 0); display: grid; place-items: center; }
    .hero .ring .hole { width: 94px; height: 94px; border-radius: 50%; background: rgba(21,71,52,.5); display: grid; place-items: center; text-align: center; }
    .hero .ring .pct { font-size: 1.625rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
    .hero .ring .sub { font-size: 0.625rem; font-weight: 700; color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .5px; }

    .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; border: 0; padding: 11px 20px; border-radius: 13px; cursor: pointer; font: inherit; font-weight: 800; font-size: 0.875rem; text-decoration: none; transition: var(--t); }
    .btn:hover { transform: translateY(-2px); box-shadow: var(--sh); color: #fff; background: var(--brand-600); }
    .btn.light { background: #fff; color: var(--brand); } .btn.light:hover { background: #eef4f1; }
    .btn.ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--line-2); } .btn.ghost:hover { border-color: var(--brand); background: var(--brand-050); }
    .btn svg { width: 17px; height: 17px; stroke: currentColor; }
    .linkbtn { background: none; border: 0; color: var(--brand); cursor: pointer; font: inherit; padding: 0; }

    .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 18px 0 8px; }
    .stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh-sm); display: flex; align-items: center; gap: 14px; transition: var(--t); }
    .stat:hover { transform: translateY(-2px); box-shadow: var(--sh); }
    .stat .ico { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; }
    .stat .ico svg { width: 23px; height: 23px; }
    .stat .figure { font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
    .stat .figure small { font-size: 0.9375rem; color: var(--faint); font-weight: 700; }
    .stat .label { font-size: 0.75rem; color: var(--muted); font-weight: 700; margin-top: 4px; }
    .i-blue{background:var(--t1b);color:var(--t1f);} .i-gold{background:var(--t4b);color:var(--gold);}
    .i-flame{background:#ffe8df;color:#e0521f;} .i-violet{background:var(--t3b);color:var(--t3f);}

    .progress { height: 9px; background: #e6e9e1; border-radius: var(--pill); overflow: hidden; margin-top: 11px; }
    .progress > span { display: block; height: 100%; background: var(--grad); border-radius: var(--pill); transition: width .6s cubic-bezier(.34,1.2,.5,1); }

    .ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .badge { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 15px 12px; text-align: center; position: relative; transition: var(--t); }
    .badge.on { border-color: rgba(189,139,19,.4); box-shadow: 0 0 0 1px rgba(189,139,19,.15), 0 12px 28px -14px rgba(189,139,19,.45); }
    .badge .bico { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 9px; display: grid; place-items: center; }
    .badge .bico svg { width: 23px; height: 23px; stroke: currentColor; }
    .badge.on .bico { background: linear-gradient(135deg, #F2C75C, #BD8B13); color: #3a2a04; }
    .badge.off .bico { background: #eef0ea; color: var(--faint); }
    .badge .bname { font-weight: 800; font-size: 0.8125rem; color: var(--ink); } .badge.off .bname { color: var(--muted); }
    .badge .bdesc { font-size: 0.6875rem; color: var(--faint); margin-top: 2px; line-height: 1.3; }
    .badge.off { opacity: .8; } .badge .lock { position: absolute; top: 11px; right: 11px; color: var(--faint); } .badge .lock svg { width: 14px; height: 14px; stroke: currentColor; }

    .section-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; }
    .section-head h3 { margin: 0; } .section-head .count { font-size: 0.8125rem; color: var(--faint); font-weight: 700; }

    .modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 20px; }
    .modcard { position: relative; display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-sm); transition: var(--t); overflow: hidden; }
    .modcard:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--brand-100); }
    .modcard .top { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
    .modcard .tile { width: 48px; height: 48px; border-radius: 15px; flex: none; display: grid; place-items: center; }
    .modcard .tile svg { width: 25px; height: 25px; stroke: currentColor; }
    .modcard.c1 .tile{background:var(--t1b);color:var(--t1f)} .modcard.c2 .tile{background:var(--t2b);color:var(--t2f)}
    .modcard.c3 .tile{background:var(--t3b);color:var(--t3f)} .modcard.c4 .tile{background:var(--t4b);color:var(--t4f)}
    .modcard.c5 .tile{background:var(--t5b);color:var(--t5f)} .modcard.c6 .tile{background:var(--t6b);color:var(--t6f)}
    .modcard .ttl { font-weight: 800; font-size: 1rem; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; }
    .modcard .arrow { margin-left: auto; color: var(--faint); transition: var(--t); flex: none; }
    .modcard:hover .arrow { color: var(--brand); transform: translateX(3px); }
    .modcard .arrow svg { width: 19px; height: 19px; stroke: currentColor; display: block; }
    .modcard .meta { font-size: 0.8125rem; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .modcard.done { border-color: rgba(189,139,19,.45); box-shadow: 0 0 0 1px rgba(189,139,19,.12), 0 14px 30px -16px rgba(189,139,19,.4); }
    .modcard.done::before { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-140%); animation: shine 3.4s ease-in-out infinite; }
    @keyframes shine { 0%{transform:translateX(-140%);} 55%,100%{transform:translateX(320%);} }
    .modcard .ribbon { position: absolute; top: 15px; right: -34px; transform: rotate(45deg); z-index: 2; background: linear-gradient(90deg,#F2C75C,#FF6A39); color: #3a2004; font-size: 0.625rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 4px 40px; }
    .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.71875rem; font-weight: 800; padding: 3px 10px; border-radius: var(--pill); background: #eef0ea; color: var(--muted); }
    .chip.done { background: #e4f1e0; color: var(--pass); } .chip svg { width: 12px; height: 12px; stroke: currentColor; }

    .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin: 14px 0; box-shadow: var(--sh-sm); }
    .muted { color: var(--muted); font-size: 0.875rem; }
    table { border-collapse: separate; border-spacing: 0; width: 100%; margin-top: 12px; font-size: 0.875rem; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
    th, td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--line); }
    th { background: #f1f3ee; font-weight: 800; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
    tr:last-child td { border-bottom: 0; }
    input[type=text],input[type=password],input[type=email],input[type=number],select,textarea { width: 100%; font: inherit; font-size: 0.875rem; padding: 11px 13px; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; transition: var(--t); }
    input::placeholder, textarea::placeholder { color: var(--faint); }
    input:focus,select:focus,textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-050); }
    textarea { font-family: ui-monospace, Consolas, monospace; }
    label { font-weight: 700; font-size: 0.8125rem; color: var(--muted); }
    .pass { color: var(--pass); font-weight: 800; } .fail { color: var(--fail); font-weight: 800; }

    .app.app--auth { background: var(--grad); }
    .app--auth::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px); background-size: 24px 24px; opacity: .5; }
    .app--auth .content-inner { max-width: 420px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 30px 20px; position: relative; }
    .app--auth .card { background: #fff; border-color: var(--line); }

    @media (max-width: 880px) {
      .app { flex-direction: column; }
      .sidebar { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); }
      .nav { flex-direction: row; flex-wrap: wrap; } .nav .cap { display: none; }
      .content-inner { padding: 22px 18px 60px; } .hero { padding: 24px; } .hero .deco { display: none; }
    }