/* ======================================================================
   KAIF PASSPORT — "ANODISED"
   ======================================================================
   The idea: the credential is a physical object. A machined titanium plate
   with an anodised oxide layer, held in a dark instrument housing. Nothing
   in this interface is a sticker or a badge; everything is either the
   object, the housing, or light falling across them.

   Three rules the whole system follows:

   1. COLOUR COMES FROM THE MATERIAL, NOT FROM A BRAND FILL.
      The accent is an interference spectrum — cyan, violet, magenta, gold —
      and it only appears where light would actually catch: the plate, the
      seal, a live edge, a focused control. Flat accent fills are banned.
      Semantic colour (pass / caution / fail) is a separate system so a
      warning never competes with decoration.

   2. DEPTH IS LIGHT, NOT OUTLINE.
      Surfaces separate by elevation and a 1px specular top edge, the way a
      real panel catches light on its upper lip. Borders are a last resort,
      not the default way to say "this is a box".

   3. EVERY GRAM COSTS A STUDENT DATA.
      No images, no icon font, no CSS framework, two typefaces. All texture
      is computed. This file is the entire visual identity.
   ====================================================================== */

:root{
  /* --- housing: cool graphite, deliberately blue-biased, never pure black --- */
  --void:#06080C;
  --deep:#0A0D14;
  --s1:rgba(146,168,214,.045);     /* resting surface   */
  --s2:rgba(146,168,214,.075);     /* raised surface    */
  --s3:rgba(146,168,214,.115);     /* pressed / active  */
  --line:rgba(150,172,220,.11);
  --line2:rgba(150,172,220,.19);
  --line3:rgba(150,172,220,.32);

  /* --- the anodised spectrum. Used as a material, never as a flat fill. --- */
  --i1:#43E0FF;   /* cyan     */
  --i2:#7A73FF;   /* violet   */
  --i3:#FF74C3;   /* magenta  */
  --i4:#FFC061;   /* gold     */
  --irid:linear-gradient(115deg,var(--i1) 0%,var(--i2) 34%,var(--i3) 66%,var(--i4) 100%);
  --irid-soft:linear-gradient(115deg,rgba(67,224,255,.22),rgba(122,115,255,.22) 34%,rgba(255,116,195,.2) 66%,rgba(255,192,97,.22));

  /* --- semantic. Separate from the accent on purpose. --- */
  --pass:#3FDCA0; --caution:#FFB13D; --fail:#FF5C6E; --info:#6AA8FF;

  /* --- ink --- */
  --text:#EAEEF7;
  --muted:#98A3BC;
  --faint:#66708A;

  --f-d:"Instrument Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-b:"Instrument Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-s:10px; --r:16px; --r-l:22px; --r-xl:28px;

  /* Elevation: a tight contact shadow plus a wide soft one. Two shadows read
     as a real object; one reads as a drop-shadow filter. */
  --e1:0 1px 2px rgba(0,0,0,.5), 0 4px 14px -6px rgba(0,0,0,.55);
  --e2:0 2px 4px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.8);
  --e3:0 4px 8px rgba(0,0,0,.6), 0 40px 80px -30px rgba(0,0,0,.95);
  --lip:inset 0 1px 0 rgba(190,210,255,.09);

  --spring:cubic-bezier(.16,1,.3,1);
  --swift:cubic-bezier(.32,.72,0,1);

  /* --- compatibility aliases ---------------------------------------------
     Views written against the previous palette still name these. Rather than
     hunt every inline style and risk missing one, the old names are mapped
     onto the new system here, once. New code uses the names above; these keep
     the old ones truthful instead of silently resolving to nothing, which is
     how a colour quietly becomes "transparent" in production. */
  --foil:var(--i4); --foil-hi:#FFE3B0; --foil-lo:#B8863C;
  --signal:var(--i2); --signal-lo:rgba(122,115,255,.38);
  --jade:var(--pass); --amber:var(--caution); --rose:var(--fail); --violet:var(--i2);
  --ink:var(--void); --ink2:rgba(146,168,214,.045); --ink3:rgba(146,168,214,.075);
  --ink4:rgba(146,168,214,.115); --ink5:rgba(146,168,214,.16);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--f-b);font-size:14.5px;line-height:1.5;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;text-align:left}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-d);letter-spacing:-.03em;text-wrap:balance}

input,select,textarea{
  font:inherit;color:var(--text);background:var(--s1);
  border:1px solid var(--line);border-radius:var(--r-s);
  padding:11px 13px;width:100%;transition:border-color .2s,background .2s,box-shadow .2s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{border-color:var(--line2)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:transparent;background:var(--s2);
  box-shadow:0 0 0 1.5px rgba(122,115,255,.75), 0 0 22px -6px rgba(67,224,255,.4);
}
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--i1);outline-offset:2px;border-radius:6px;
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--s3);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- motion primitives ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-180% 0}100%{background-position:180% 0}}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes trace{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ======================================================================
   HOUSING
   ====================================================================== */
.stage{min-height:100vh;display:flex;flex-direction:column}

/* The frame below is sized against a 54px bar, so this must never wrap onto a
   second line — if it does, the bottom tab bar is pushed off the screen and the
   labels disappear. It shrinks instead. */
.topbar{
  display:flex;align-items:center;gap:12px;padding:13px 20px;flex-wrap:nowrap;
  height:54px;position:sticky;top:0;z-index:60;
  background:rgba(6,8,12,.72);backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.brandmark{display:flex;align-items:center;gap:10px;font-family:var(--f-d);
  font-weight:600;letter-spacing:-.028em;font-size:15px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The seal is the material in miniature — same spectrum, same crowned edge. */
.brandmark .seal{
  width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--irid);color:#07090D;font-size:12px;font-weight:800;font-family:var(--f-d);
  box-shadow:0 0 18px -4px rgba(122,115,255,.75), var(--lip);
}
.topnote{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.modebadge{
  font-family:var(--f-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);
  white-space:nowrap;
}
@media (max-width:560px){
  .topbar{padding:13px 14px;gap:8px}
  .modebadge{font-size:8.5px;letter-spacing:.08em;padding:4px 7px}
  .brandmark{font-size:14px}
}
.modebadge.live{color:var(--pass);border-color:rgba(63,220,160,.4);
  box-shadow:0 0 16px -6px rgba(63,220,160,.7)}
.stagebody{flex:1;display:flex;justify-content:center;padding:26px 18px 40px}

/* Ambient field: a very slow mesh behind everything. Two radial gradients,
   no canvas, no cost — it stops the dark ground reading as flat paint. */
.stagebody::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 44% at 82% 4%, rgba(122,115,255,.13), transparent 70%),
    radial-gradient(50% 38% at 8% 96%, rgba(67,224,255,.08), transparent 72%);
}
.phonewrap,.console,.verifypage{position:relative;z-index:1}

/* ---------- the app frame ---------- */
.phonewrap{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.phone{width:392px;height:812px;background:var(--void);border:9px solid #12161F;
  border-radius:46px;position:relative;overflow:hidden;flex:0 0 auto;
  box-shadow:var(--e3),0 0 0 1px rgba(190,210,255,.07)}
.notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:104px;height:24px;
  background:#000;border-radius:14px;z-index:50}
.statusbar{height:38px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px 0 24px;font-size:11.5px;font-family:var(--f-m);color:var(--muted);
  position:relative;z-index:40}
.app{position:absolute;inset:0;display:flex;flex-direction:column;background:transparent}
.scr{flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 16px 96px;scroll-behavior:smooth}
.scr>*{animation:rise .5s var(--spring) both}

.offlinebar{background:rgba(255,177,61,.12);color:var(--caution);text-align:center;
  font-size:11.5px;padding:7px;font-family:var(--f-m);letter-spacing:.05em;
  border-bottom:1px solid rgba(255,177,61,.26)}

/* ---------- navigation ---------- */
.tabbar{
  position:absolute;bottom:0;left:0;right:0;height:74px;z-index:45;
  display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:12px;
  background:rgba(8,11,17,.82);backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid var(--line);
}
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;color:var(--faint);font-size:10px;font-weight:600;letter-spacing:.012em;
  position:relative;transition:color .22s var(--swift)}
.tabbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .34s var(--spring)}
.tabbar button:hover{color:var(--muted)}
.tabbar button[aria-current="true"]{color:var(--text)}
.tabbar button[aria-current="true"] svg{transform:translateY(-1px) scale(1.06)}
/* The live marker is the only place the full spectrum appears in the chrome. */
.tabbar button[aria-current="true"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2px;border-radius:0 0 3px 3px;background:var(--irid);
  box-shadow:0 0 14px 1px rgba(122,115,255,.8);
}

/* ======================================================================
   TYPE
   ====================================================================== */
.hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 0 15px}
.hdr h1{font-size:27px;font-weight:600;line-height:1.1}
.hdr .sub{color:var(--muted);font-size:13px;margin-top:5px}
.phdr{font-family:var(--f-d);font-size:22px;font-weight:600;letter-spacing:-.03em;margin:2px 0 6px}
.lede{color:var(--muted);font-size:14.5px;line-height:1.6;margin:8px 0 20px;max-width:62ch}
.eyebrow{font-family:var(--f-m);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--faint);margin:26px 0 11px;display:flex;align-items:center;gap:11px}
.eyebrow::after{content:"";flex:1;height:1px;order:1;
  background:linear-gradient(90deg,var(--line2),transparent)}
/* A link in an eyebrow belongs at the far end, not glued to the label. */
.eyebrow .lnk{order:2;font-family:var(--f-b);font-size:11.5px;letter-spacing:0;
  text-transform:none;color:var(--muted);border-bottom-color:var(--line2)}
.eyebrow .lnk:hover{color:var(--text)}
.note{color:var(--muted);font-size:12.5px;line-height:1.6}
.hint{color:var(--faint);font-size:12px;line-height:1.55;margin-top:6px}
.mono{font-family:var(--f-m);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.lnk{color:var(--i1);text-decoration:none;border-bottom:1px solid rgba(67,224,255,.35);
  transition:border-color .2s}
.lnk:hover{border-color:var(--i1)}
.cw{font-weight:600;font-size:14px;letter-spacing:-.018em}
.cid{font-family:var(--f-m);font-size:10.5px;color:var(--faint);margin-top:5px;letter-spacing:.02em}

/* ======================================================================
   SURFACES
   ====================================================================== */
.card,.formcard,.panel{
  background:var(--s1);border-radius:var(--r);padding:16px;
  box-shadow:var(--lip),var(--e1);border:1px solid transparent;
  transition:background .26s var(--swift),box-shadow .26s var(--swift),transform .26s var(--spring);
}
button.card{display:block;width:100%}
button.card:hover,.row:hover,.skill:hover{background:var(--s2);box-shadow:var(--lip),var(--e2)}
button.card:active{transform:scale(.993)}
.formcard{padding:18px}
.panel{padding:18px}
.split{display:grid;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.flexr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wrap{display:flex;flex-wrap:wrap;gap:6px}
.stack{display:flex;flex-direction:column;gap:9px}
.rows{display:flex;flex-direction:column;gap:8px}
.stack>*,.rows>*{animation:rise .44s var(--spring) both}
.stack>*:nth-child(2),.rows>*:nth-child(2){animation-delay:.04s}
.stack>*:nth-child(3),.rows>*:nth-child(3){animation-delay:.08s}
.stack>*:nth-child(4),.rows>*:nth-child(4){animation-delay:.12s}
.stack>*:nth-child(n+5),.rows>*:nth-child(n+5){animation-delay:.16s}

/* ---------- rows ---------- */
.row{display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:var(--r);
  background:var(--s1);box-shadow:var(--lip);width:100%;text-align:left;
  transition:background .24s var(--swift),transform .24s var(--spring)}
.row:hover{transform:translateX(3px)}
.row .ico{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  font-size:17px;background:var(--s2);box-shadow:var(--lip);color:var(--muted)}
.row .bd{flex:1;min-width:0}
.row .t{font-weight:600;font-size:14px;letter-spacing:-.018em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .m{color:var(--muted);font-size:12px;margin-top:2px}
.row .chev{color:var(--faint);flex:none;display:grid;place-items:center;
  transition:transform .24s var(--spring),color .24s}
.row .chev svg{display:block}
.row:hover .chev{transform:translateX(3px);color:var(--muted)}

/* ---------- key/value ---------- */
.kv{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.kv:last-child{border-bottom:none}
.kv>span:first-child{color:var(--muted)}
.kv>span:last-child{text-align:right;font-weight:500}

/* ---------- tiles / stats ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.stat,.tile{background:var(--s1);border-radius:var(--r);padding:15px;box-shadow:var(--lip),var(--e1);
  transition:background .26s var(--swift),transform .26s var(--spring)}
.stat:hover,.tile:hover{background:var(--s2);transform:translateY(-2px)}
.stat .n,.tile .n{font-family:var(--f-d);font-size:28px;font-weight:600;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums}
.stat .l,.tile .l{color:var(--muted);font-size:12px;margin-top:7px}
.stat .d{color:var(--faint);font-size:11px;margin-top:3px}

/* ======================================================================
   CONTROLS
   ====================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:var(--r-s);font-size:13.5px;font-weight:600;
  letter-spacing:-.012em;background:var(--s2);color:var(--text);
  box-shadow:var(--lip);position:relative;overflow:hidden;
  transition:background .2s var(--swift),transform .2s var(--spring),box-shadow .2s;
}
.btn:hover{background:var(--s3)}
.btn:active{transform:scale(.975)}
.btn.wide{width:100%}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:8px}
.btn.lg{padding:14px 20px;font-size:15px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* The primary action is the only control that carries the full material. */
.btn.pri{
  color:#05070B;font-weight:700;background:var(--irid);background-size:180% 100%;
  background-position:20% 0;
  box-shadow:0 0 26px -8px rgba(122,115,255,.9), inset 0 1px 0 rgba(255,255,255,.3);
  transition:background-position .6s var(--swift),transform .2s var(--spring),box-shadow .2s;
}
.btn.pri:hover{background-position:80% 0;box-shadow:0 0 34px -6px rgba(122,115,255,1),
  inset 0 1px 0 rgba(255,255,255,.38)}
.btn.gold{color:#0A0705;background:linear-gradient(115deg,var(--i4),#FFE0A8)}
.btn.bad{color:#fff;background:rgba(255,92,110,.16);box-shadow:inset 0 0 0 1px rgba(255,92,110,.4)}
.back{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:13px;
  font-weight:500;padding:14px 0 6px;transition:color .2s}
.back:hover{color:var(--text)}

/* ---------- chips ---------- */
.chipset{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:8px 13px;border-radius:999px;font-size:12.5px;font-weight:500;
  background:var(--s1);color:var(--muted);box-shadow:var(--lip);
  transition:all .2s var(--swift)}
.chip:hover{background:var(--s2);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--s3);color:var(--text);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(122,115,255,.45),0 0 18px -8px rgba(122,115,255,.9)}

/* ---------- segmented ---------- */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;
  background:var(--s1);border-radius:12px;margin-bottom:16px;box-shadow:var(--lip)}
.seg button{padding:9px 10px;border-radius:9px;font-size:12.5px;font-weight:600;
  color:var(--muted);text-align:center;transition:all .24s var(--swift)}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--s3);color:var(--text);box-shadow:var(--lip)}

/* ---------- fields ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);
  margin-bottom:7px;letter-spacing:.01em}

/* ======================================================================
   INDICATORS
   ====================================================================== */
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-m);font-size:9.5px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;
  border-radius:999px;background:var(--s2);color:var(--muted);white-space:nowrap}
.pill.ok{color:var(--pass);background:rgba(63,220,160,.1);box-shadow:inset 0 0 0 1px rgba(63,220,160,.26)}
.pill.warn{color:var(--caution);background:rgba(255,177,61,.1);box-shadow:inset 0 0 0 1px rgba(255,177,61,.26)}
.pill.bad{color:var(--fail);background:rgba(255,92,110,.1);box-shadow:inset 0 0 0 1px rgba(255,92,110,.26)}
.pill.blue{color:var(--info);background:rgba(106,168,255,.1);box-shadow:inset 0 0 0 1px rgba(106,168,255,.26)}
/* "Gold" is the verified mark. It gets the material, because it is the claim
   the whole product exists to make. */
.pill.gold{color:#0A0705;background:var(--irid);font-weight:700;
  box-shadow:0 0 16px -5px rgba(255,192,97,.8)}

.badge{font-family:var(--f-m);font-size:10px;padding:2px 7px;border-radius:99px;
  background:var(--s3);color:var(--text)}

.meter{height:5px;border-radius:99px;background:var(--s2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--irid);
  box-shadow:0 0 12px -2px rgba(122,115,255,.8);transition:width 1s var(--spring)}

.bars{display:flex;flex-direction:column;gap:11px}
.bar{display:grid;grid-template-columns:1fr 92px 26px;gap:11px;align-items:center;font-size:12.5px}
.bar .tr{height:5px;border-radius:99px;background:var(--s2);overflow:hidden}
.bar .tr i{display:block;height:100%;border-radius:99px;transition:width 1s var(--spring)}
.bar .v{font-family:var(--f-m);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}

.lvbar{display:flex;gap:3px;margin-top:8px}
.lvbar i{flex:1;height:3px;border-radius:2px;background:var(--s2)}
.lvbar i.on{background:var(--irid);box-shadow:0 0 10px -2px rgba(122,115,255,.9)}

.spinner{width:15px;height:15px;border-radius:50%;display:inline-block;vertical-align:-2px;
  border:2px solid rgba(150,172,220,.22);border-top-color:var(--i1);animation:spin .7s linear infinite}

.scorering{display:grid;place-items:center;margin:14px auto}
.scorer{font-family:var(--f-d);font-size:34px;font-weight:600;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}

/* ======================================================================
   THE PASSPORT PLATE
   The one object in the product. Everything else is housing.
   ====================================================================== */
.pcard{
  position:relative;border-radius:var(--r-xl);overflow:hidden;width:100%;
  aspect-ratio:1.74/1;min-height:196px;display:block;text-align:left;
  background:linear-gradient(150deg,#10151F,#070A10 62%);
  box-shadow:var(--e3),inset 0 1px 0 rgba(190,210,255,.16),
             inset 0 0 0 1px rgba(150,172,220,.09);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--spring),box-shadow .4s var(--swift);
}
.pcard:hover{box-shadow:var(--e3),0 0 60px -22px rgba(122,115,255,.7),
  inset 0 1px 0 rgba(190,210,255,.22),inset 0 0 0 1px rgba(150,172,220,.14)}
/* The shader canvas IS the card's surface. If WebGL is missing, the gradient
   underneath is what shows, and nothing about the layout changes. */
.pcard canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pcard .pc-body{position:absolute;inset:0;padding:20px 22px 17px;display:flex;
  flex-direction:column;justify-content:space-between;gap:12px;transform:translateZ(28px)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pc-org{font-family:var(--f-m);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(234,238,247,.62)}
.pc-org b{display:block;font-family:var(--f-d);font-size:13px;font-weight:600;
  letter-spacing:-.02em;text-transform:none;color:var(--text);margin-top:4px}
.pc-seal{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-m);font-size:8.5px;font-weight:700;letter-spacing:.06em;color:#06080C;
  background:var(--irid);box-shadow:0 0 26px -6px rgba(122,115,255,.95),var(--lip)}
.pc-photo{width:50px;height:58px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:var(--f-d);font-size:19px;font-weight:700;letter-spacing:-.02em;
  background:rgba(8,11,17,.55);color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(190,210,255,.2),var(--lip);backdrop-filter:blur(4px)}
.pc-name{font-family:var(--f-d);font-size:20px;font-weight:600;letter-spacing:-.032em;line-height:1.15}
.pc-meta{color:rgba(234,238,247,.68);font-size:11.5px;margin-top:3px;line-height:1.45}
.pc-id{font-family:var(--f-m);font-size:14px;font-weight:500;letter-spacing:.06em;
  margin-top:9px;color:#fff;text-shadow:0 0 18px rgba(122,115,255,.75)}
.pc-mrz{font-family:var(--f-m);font-size:8.5px;letter-spacing:.14em;
  color:rgba(234,238,247,.4);white-space:nowrap;overflow:hidden;text-overflow:clip}
.pc-foot{display:flex;justify-content:space-between;gap:10px;padding-top:10px;font-family:var(--f-m);font-size:8.5px;letter-spacing:.13em;
  color:rgba(234,238,247,.5);border-top:1px solid rgba(190,210,255,.12)}

/* ======================================================================
   SKILLS / CREDENTIALS / PROJECTS
   ====================================================================== */
.skill{display:flex;gap:13px;padding:15px;border-radius:var(--r);background:var(--s1);
  box-shadow:var(--lip);width:100%;transition:background .24s var(--swift),transform .24s var(--spring)}
.skill .sg,.sg{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--s2);box-shadow:var(--lip);color:var(--muted);transition:color .24s}
.skill:hover .sg{color:var(--text)}
.sg svg{display:block}

.cred{padding:15px;border-radius:var(--r);background:var(--s1);box-shadow:var(--lip);
  position:relative;overflow:hidden}
/* A verified credential gets a lit edge — the material, one pixel wide. */
.cred:not(.plain)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--irid);box-shadow:0 0 16px 0 rgba(122,115,255,.7)}
.cred.plain{opacity:.82}

/* ======================================================================
   ASSESSMENT
   ====================================================================== */
.qbar{display:flex;align-items:center;gap:11px;padding:13px 0}
.qbar .dots{display:flex;gap:3px;flex:1}
.qbar .dots i{flex:1;height:3px;border-radius:2px;background:var(--s2);transition:background .3s}
.qbar .dots i.done{background:var(--line3)}
.qbar .dots i.cur{background:var(--irid);box-shadow:0 0 10px -1px rgba(122,115,255,.9)}
.tm{font-family:var(--f-m);font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.tm.low{color:var(--fail);animation:breathe 1.1s ease-in-out infinite}
.camchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-m);font-size:10px;
  letter-spacing:.09em;color:var(--muted);padding:5px 10px;border-radius:999px;background:var(--s1)}
.camchip .dot{width:6px;height:6px;border-radius:50%;background:var(--fail);
  animation:breathe 1.8s ease-in-out infinite}
.qtext{font-family:var(--f-d);font-size:18px;font-weight:500;letter-spacing:-.025em;
  line-height:1.4;margin:14px 0 4px}
.qcode{font-family:var(--f-m);font-size:12.5px;line-height:1.7;white-space:pre;overflow-x:auto;
  background:rgba(6,8,12,.7);border-radius:12px;padding:14px;margin:12px 0;
  box-shadow:inset 0 0 0 1px var(--line);color:#C6D0E4}
.opt{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:13px;
  background:var(--s1);box-shadow:var(--lip);width:100%;font-size:13.5px;line-height:1.45;
  transition:all .2s var(--swift)}
.opt:hover{background:var(--s2)}
.opt .k{width:23px;height:23px;border-radius:7px;flex:none;display:grid;place-items:center;
  font-family:var(--f-m);font-size:11px;font-weight:600;background:var(--s2);color:var(--muted)}
.opt[aria-pressed="true"]{background:var(--s3);
  box-shadow:inset 0 0 0 1.5px rgba(122,115,255,.6),0 0 22px -10px rgba(122,115,255,.9)}
.opt[aria-pressed="true"] .k{background:var(--irid);color:#06080C;font-weight:700}

.otpgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:6px}
.otp-cell{text-align:center;font-family:var(--f-m);font-size:20px;padding:13px 0;
  border-radius:11px;font-variant-numeric:tabular-nums}

/* ======================================================================
   STATES
   ====================================================================== */
.center-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:64px 24px;gap:8px;min-height:50vh}
.center-state h2{font-size:19px;font-weight:600}
.center-state p{color:var(--muted);font-size:13.5px;max-width:38ch;line-height:1.6;margin:0}
.center-state .spinner{width:26px;height:26px;border-width:2.5px;margin-bottom:10px}
.empty{text-align:center;padding:34px 20px;color:var(--faint);font-size:13px;
  border-radius:var(--r);background:var(--s1);box-shadow:var(--lip)}
.empty h4{font-size:14.5px;color:var(--muted);font-weight:600;margin-bottom:5px}

.err,.okbox,.warnbox{border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.55;margin:12px 0}
.err{background:rgba(255,92,110,.09);color:#FFB3BB;box-shadow:inset 0 0 0 1px rgba(255,92,110,.3)}
.okbox{background:rgba(63,220,160,.09);color:#A6F0D2;box-shadow:inset 0 0 0 1px rgba(63,220,160,.3)}
.warnbox{background:rgba(255,177,61,.09);color:#FFD9A0;box-shadow:inset 0 0 0 1px rgba(255,177,61,.3)}

.skeleton{border-radius:12px;height:60px;margin-bottom:9px;
  background:linear-gradient(90deg,var(--s1) 20%,var(--s2) 50%,var(--s1) 80%);
  background-size:200% 100%;animation:shimmer 1.5s linear infinite}

#toast-host{position:absolute;left:16px;right:16px;bottom:92px;z-index:70;pointer-events:none}
.toast{background:rgba(18,23,33,.96);backdrop-filter:blur(16px);border-radius:13px;
  padding:13px 15px;font-size:13px;box-shadow:var(--e2),var(--lip);animation:rise .34s var(--spring)}

/* ======================================================================
   AUTH
   ====================================================================== */
.authwrap{max-width:400px;margin:0 auto;padding:38px 4px 40px}
.authwrap h1{font-size:26px;font-weight:600;margin-bottom:8px}
.authlogo{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  font-family:var(--f-d);font-size:17px;font-weight:800;color:#06080C;margin-bottom:24px;
  background:var(--irid);box-shadow:0 0 40px -10px rgba(122,115,255,.95),var(--lip)}

/* ======================================================================
   ADMIN CONSOLE
   ====================================================================== */
.console{display:grid;grid-template-columns:232px 1fr;gap:18px;width:100%;
  max-width:1560px;margin:0 auto;padding:20px}
.side{background:var(--s1);border-radius:var(--r-l);padding:12px;position:sticky;top:80px;
  box-shadow:var(--lip),var(--e1);align-self:start}
.side .grp{font-family:var(--f-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:13px 10px 6px}
.side button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border-radius:10px;font-size:13px;font-weight:500;color:var(--muted);
  transition:all .2s var(--swift)}
.side button:hover{background:var(--s2);color:var(--text)}
.side button[aria-current="true"]{background:var(--s3);color:var(--text);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(122,115,255,.3)}
.side .navico{width:18px;height:18px;display:grid;place-items:center;flex:none;color:inherit}
.side .navico svg{display:block}
.side .badge{margin-left:auto}

.tblwrap{overflow-x:auto;border-radius:var(--r);background:var(--s1);box-shadow:var(--lip)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-family:var(--f-m);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:500;padding:12px 14px;
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--s1)}

/* ======================================================================
   PUBLIC VERIFY
   ====================================================================== */
.verifypage{max-width:640px;margin:0 auto;padding:34px 20px 60px}
.vhead{text-align:center;margin-bottom:26px}
.vhead .org{font-family:var(--f-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px}
.vhead h1{font-size:25px;font-weight:600}
.avatar{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  font-family:var(--f-d);font-size:13.5px;font-weight:700;background:var(--s2);
  box-shadow:var(--lip)}

/* ======================================================================
   LESSON READER
   ====================================================================== */
.lessonbody{font-size:14.5px;line-height:1.75;color:#C6D0E4}
.lessonbody p{margin:0 0 15px}
.lessonbody b{color:var(--text);font-weight:600}
.lessonbody code{font-family:var(--f-m);font-size:12.5px;background:var(--s2);
  border-radius:6px;padding:2px 6px;color:var(--i1)}
.lessonbody .qcode{margin:15px 0}
.lessonlist{margin:0 0 15px;padding-left:19px;list-style:none}
.lessonlist li{position:relative;margin-bottom:9px}
.lessonlist li::before{content:"";position:absolute;left:-15px;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--irid)}

.sidenote{max-width:290px;color:var(--muted);font-size:12.5px;line-height:1.6;padding-top:8px}
.sidenote h4{font-family:var(--f-d);font-size:13.5px;color:var(--text);margin:0 0 6px;
  letter-spacing:-.02em;font-weight:600}
.sidenote p{margin:0 0 14px}
.sidenote code{font-family:var(--f-m);font-size:11.5px;color:var(--i1)}

/* ======================================================================
   RESPONSIVE — one app, every screen
   360  small phones          bottom tabs
   600  large phones/tablets  wider gutters, capped measure
   900  laptops and up        left rail, content column
   1700 large monitors        centred, capped, not stretched
   ====================================================================== */
.phone.app-frame{border:none;border-radius:0;box-shadow:none;width:100%;max-width:none;
  height:calc(100vh - 54px);height:calc(100dvh - 54px)}

@media (max-width:899px){
  .stagebody{padding:0}
  .phonewrap{gap:0;width:100%}
  .phone.app-frame .scr{padding:2px 16px calc(96px + env(safe-area-inset-bottom))}
  .phone.app-frame .tabbar{height:calc(74px + env(safe-area-inset-bottom));
    padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .console{grid-template-columns:1fr;padding:14px}
  .side{position:static;display:flex;gap:6px;overflow-x:auto;padding:9px}
  .side .grp{display:none}
  .side button{width:auto;white-space:nowrap;padding:8px 13px}
  .cols2{grid-template-columns:1fr}
}
@media (max-width:820px){ .sidenote{display:none} }

@media (min-width:600px) and (max-width:899px){
  .phone.app-frame .scr{padding-left:clamp(16px,6vw,72px);padding-right:clamp(16px,6vw,72px)}
  .phone.app-frame .scr>*{max-width:680px;margin-left:auto;margin-right:auto}
  .phone.app-frame .grid2{grid-template-columns:repeat(4,1fr)}
  .phone.app-frame .hdr h1{font-size:29px}
}

@media (min-width:900px){
  .stagebody{padding:0;align-items:stretch}
  .phonewrap{width:100%;gap:0}
  .phone.app-frame{height:calc(100vh - 58px);height:calc(100dvh - 58px)}
  .phone.app-frame .app{flex-direction:row}

  .phone.app-frame .tabbar{
    position:static;order:-1;display:flex;flex-direction:column;align-items:stretch;
    flex:0 0 232px;height:auto;padding:20px 13px;gap:3px;
    border-top:none;border-right:1px solid var(--line);
    background:rgba(8,11,17,.5);backdrop-filter:none;
  }
  .phone.app-frame .tabbar button{flex-direction:row;justify-content:flex-start;align-items:center;
    gap:13px;padding:11px 13px;border-radius:11px;font-size:13.5px;font-weight:500;letter-spacing:-.015em}
  .phone.app-frame .tabbar button svg{width:20px;height:20px;flex:0 0 auto}
  .phone.app-frame .tabbar button:hover{background:var(--s1);color:var(--text)}
  .phone.app-frame .tabbar button[aria-current="true"]{background:var(--s2);color:var(--text);font-weight:600}
  /* On the rail the live marker becomes a vertical lip on the leading edge. */
  .phone.app-frame .tabbar button[aria-current="true"]::before{
    top:9px;bottom:9px;left:0;height:auto;width:2.5px;transform:none;border-radius:0 3px 3px 0}

  .phone.app-frame .scr{flex:1;min-width:0;padding:14px 0 60px}
  .phone.app-frame .scr>*{max-width:860px;margin-left:auto;margin-right:auto;
    padding-left:clamp(20px,3vw,34px);padding-right:clamp(20px,3vw,34px)}
  .phone.app-frame .grid2{grid-template-columns:repeat(4,1fr)}
  .phone.app-frame .rows,.phone.app-frame .stack{gap:10px}
  .phone.app-frame .hdr{padding:22px 0 16px}
  .phone.app-frame .hdr h1{font-size:31px}
  /* The plate has fixed proportions. Stretching it to 1600px smears the
     engraving and leaves a dead gap under it. */
  .phone.app-frame .scr>.pcard{max-width:560px;margin-right:auto}
  .phone.app-frame .scorering{margin-left:0}
}

@media (min-width:900px) and (max-width:1199px){
  .phone.app-frame .tabbar{flex:0 0 196px;padding:15px 10px}
  .phone.app-frame .tabbar button{padding:10px 11px;font-size:13px;gap:11px}
  .phone.app-frame .scr>*{max-width:720px}
  .phone.app-frame .grid2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1500px){ .phone.app-frame .scr>*{max-width:940px} }
@media (min-width:1700px){
  .phone.app-frame{max-width:1680px;margin:0 auto;
    border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .phone.app-frame .scr>*{max-width:1000px}
}

@media (display-mode:standalone){
  .topbar{padding-top:max(13px,env(safe-area-inset-top))}
  .phone.app-frame{height:calc(100dvh - 54px)}
}

@media print{
  .topbar,.tabbar,.btn{display:none!important}
  body{background:#fff;color:#000}
  .stagebody::before{display:none}
  .card,.pcard{break-inside:avoid}
}