:root{
  color-scheme: dark;

  /* --- GROUND: true black.
     Not charcoal, not near-black — #000. On the OLED screen almost every
     student is holding, true black switches the pixel off: the bezel and the
     page become one surface, and the content appears to float with nothing
     behind it. No other colour can do that, and it is the single biggest
     reason a dark app either looks expensive or looks cheap. --- */
  --bg:#000000;
  --surface:#131316;        /* a card lifted off the black */
  --surface2:#1D1D22;       /* pressed, hovered, inset fills */
  --surface3:#26262D;

  /* --- INK --- */
  --ink:#FFFFFF;
  --ink2:#D4D4DC;
  --mute:#94949F;
  --faint:#63636E;
  --line:rgba(255,255,255,.10);

  /* --- PURPLE.
     One colour, doing everything a colour should do here: it marks what you
     can act on and what is alive. On black a purple has to be light enough to
     read as a colour and not a stain, so the text tone and the fill tone are
     different values of the same hue. --- */
  --accent:#A57BFF;         /* purple on black: links, live state, progress */
  --accent-fill:#7C4DFF;    /* filled buttons, with white on top */
  --accent-hi:#C3A6FF;
  --accent-wash:rgba(165,123,255,.14);
  --live:var(--accent);
  --live-wash:var(--accent-wash);

  /* --- the Passport's own material --- */
  --i1:#43E0FF; --i2:#7A73FF; --i3:#FF74C3; --i4:#FFC061;
  --irid:linear-gradient(115deg,var(--i1) 0%,var(--i2) 34%,var(--i3) 66%,var(--i4) 100%);

  /* --- meaning, never decoration --- */
  --pass:#3ADF9B; --caution:#FFBF4D; --fail:#FF6B7D;

  --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:12px; --r:18px; --r-l:24px; --r-xl:32px;

  /* On black, a drop shadow is invisible. Depth comes from the surface being
     lighter than the ground, plus a one-pixel highlight along the top edge —
     the way light actually catches the lip of a raised panel. */
  --lift:inset 0 1px 0 rgba(255,255,255,.07);
  --e1:var(--lift);
  --e2:var(--lift), 0 12px 32px -14px rgba(0,0,0,.9);
  --e3:var(--lift), 0 30px 70px -24px rgba(0,0,0,1);

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

  /* Legacy names, mapped so no stray inline style resolves to nothing. */
  --void:var(--bg); --deep:var(--surface); --text:var(--ink); --muted:var(--mute);
  --bg2:var(--surface); --bg3:var(--surface2);
  --s1:var(--surface); --s2:var(--surface2); --s3:var(--surface3);
  --line2:var(--line); --line3:rgba(255,255,255,.2);
  --foil:var(--accent); --foil-hi:var(--accent-hi); --foil-lo:var(--accent-fill);
  --signal:var(--accent); --signal-lo:var(--accent-wash);
  --jade:var(--pass); --amber:var(--caution); --rose:var(--fail); --violet:var(--accent);
  --ink3:var(--surface); --ink4:var(--surface2); --ink5:var(--surface3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}

/* ----------------------------------------------------------------------
   INSTALLED ON A PHONE, THIS HAS TO STOP FEELING LIKE A WEB PAGE
   Four things give a web app away on a phone, and all four are fixable:
   the blue flash when you tap, text selecting when you meant to scroll,
   the rubber-band bounce at the top of a list, and the 300ms wait before
   a tap registers. None of them belong in something a student opens from
   their home screen.
   ---------------------------------------------------------------------- */
body{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  overscroll-behavior-y:none;
  touch-action:manipulation;
}
button,.row,.skill,.chip,.pill,.tabbar,.seg,.eyebrow,.stat .n,.tile .n{
  -webkit-user-select:none;user-select:none;
}
/* Anything a student might genuinely want to copy stays selectable. */
.mono,.pc-id,.cid,.qtext,.lessonbody,input,textarea,.barcode .num{
  -webkit-user-select:text;user-select:text;
}
.scr{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-b);font-size:17px;line-height:1.47;letter-spacing:-.022em;
  -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:-.035em;line-height:1.06;text-wrap:balance}

/* Inputs are big, soft and unbordered. */
input,select,textarea{
  font:inherit;font-size:17px;color:var(--ink);background:var(--surface);
  border:none;border-radius:var(--r-s);padding:16px 17px;width:100%;
  box-shadow:var(--lift), 0 0 0 1px rgba(255,255,255,.07);
  transition:background .2s,box-shadow .2s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{box-shadow:var(--lift), 0 0 0 1px rgba(255,255,255,.14)}
input:focus,select:focus,textarea:focus{
  outline:none;background:var(--surface2);box-shadow:0 0 0 2px var(--accent);
}
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:10px;border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

@keyframes rise{from{opacity:0;transform:translateY(14px)}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:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ======================================================================
   CHROME — as close to invisible as it can be
   ====================================================================== */
.stage{min-height:100vh;display:flex;flex-direction:column}

.topbar{
  display:flex;align-items:center;gap:12px;padding:0 22px;flex-wrap:nowrap;
  height:52px;position:sticky;top:0;z-index:60;
  background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.brandmark{display:flex;align-items:center;gap:9px;font-family:var(--f-d);
  font-weight:600;letter-spacing:-.03em;font-size:15px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandmark .seal{
  width:25px;height:25px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--irid);color:#000;font-size:11px;font-weight:800;font-family:var(--f-d);
}
.topnote{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.modebadge{font-family:var(--f-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:var(--surface2);color:var(--mute);white-space:nowrap}
.modebadge.live{color:var(--pass);background:rgba(58,223,155,.14)}
@media (max-width:560px){
  .topbar{padding:0 16px;gap:8px}
  .modebadge{font-size:9px;letter-spacing:.06em;padding:4px 8px}
}
.stagebody{flex:1;display:flex;justify-content:center;background:var(--bg)}

.phonewrap{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap;justify-content:center;width:100%}
.phone{width:392px;height:812px;background:var(--bg);border:9px solid #24242B;
  border-radius:46px;position:relative;overflow:hidden;flex:0 0 auto;box-shadow:var(--e3)}
.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:12px;font-family:var(--f-m);color:var(--mute);position:relative;z-index:40}
.app{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.scr{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 22px 110px;scroll-behavior:smooth}
.scr>*{animation:rise .6s var(--spring) both}

.offlinebar{background:rgba(154,98,6,.1);color:var(--caution);text-align:center;
  font-size:12px;padding:8px;font-family:var(--f-m);letter-spacing:.04em}

/* ---------- navigation ---------- */
.tabbar{
  position:absolute;bottom:0;left:0;right:0;height:78px;z-index:45;
  display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:14px;
  background:rgba(0,0,0,.78);backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  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:10.5px;font-weight:500;letter-spacing:-.005em;
  transition:color .24s var(--swift)}
.tabbar button svg{width:23px;height:23px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .34s var(--spring)}
.tabbar button:hover{color:var(--mute)}
.tabbar button[aria-current="true"]{color:var(--ink)}
.tabbar button[aria-current="true"] svg{transform:translateY(-1px) scale(1.04)}

/* ======================================================================
   TYPE — this is the design
   ====================================================================== */
.hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:44px 0 30px}
.hdr h1{font-size:clamp(38px,10vw,50px);font-weight:600}
.hdr .sub{color:var(--mute);font-size:18px;margin-top:11px;letter-spacing:-.018em;line-height:1.35}
.phdr{font-family:var(--f-d);font-size:32px;font-weight:600;margin:4px 0 10px}
.lede{color:var(--mute);font-size:19px;line-height:1.45;margin:14px 0 30px;max-width:34ch;
  letter-spacing:-.02em}

/* The eyebrow is a small, quiet, uppercase label — no rule, no line. */
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:none;
  color:var(--faint);margin:52px 0 14px;display:flex;align-items:baseline;gap:12px}
.eyebrow .lnk{margin-left:auto;font-size:15px;color:var(--live);border:none;font-weight:500}

.note{color:var(--mute);font-size:15px;line-height:1.5;letter-spacing:-.016em}
.hint{color:var(--faint);font-size:14px;line-height:1.45;margin-top:8px}
.mono{font-family:var(--f-m);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.lnk{color:var(--live);text-decoration:none;border:none}
.lnk:hover{text-decoration:underline}
.cw{font-weight:600;font-size:17px;letter-spacing:-.024em}
.cid{font-family:var(--f-m);font-size:12px;color:var(--faint);margin-top:6px}

/* ======================================================================
   SURFACES — a soft fill, never a border
   ====================================================================== */
.card,.formcard,.panel{
  background:var(--surface);border-radius:var(--r-l);padding:22px;border:none;
  box-shadow:var(--e1);
  transition:box-shadow .26s var(--swift),transform .26s var(--spring);
}
button.card{display:block;width:100%}
button.card:hover{background:var(--surface2);transform:translateY(-2px)}
button.card:active{transform:scale(.99)}
.formcard,.panel{padding:26px}
.split{display:grid;gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.flexr{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wrap{display:flex;flex-wrap:wrap;gap:8px}

/* Grouped lists: one rounded block, hairlines inside only. This is the single
   place a line is allowed, because it is what a list actually is. */
.stack,.rows{display:flex;flex-direction:column;gap:0;background:var(--surface);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--e1)}
.stack>*,.rows>*{animation:rise .5s var(--spring) both;border-radius:0}
.stack>*+*,.rows>*+*{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.stack>*:nth-child(2),.rows>*:nth-child(2){animation-delay:.05s}
.stack>*:nth-child(3),.rows>*:nth-child(3){animation-delay:.1s}
.stack>*:nth-child(4),.rows>*:nth-child(4){animation-delay:.15s}
.stack>*:nth-child(n+5),.rows>*:nth-child(n+5){animation-delay:.2s}
/* A stack of cards keeps its own shape rather than being welded together. */
.stack>.card,.rows>.card{border-radius:0;background:transparent}
.stack>.card+.card{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

.row{display:flex;align-items:center;gap:15px;padding:18px 20px;width:100%;
  text-align:left;background:transparent;transition:background .2s}
.row:hover{background:var(--surface2)}
.row .ico{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  font-size:18px;background:var(--bg3);color:var(--mute)}
.row .bd{flex:1;min-width:0}
.row .t{font-weight:500;font-size:17px;letter-spacing:-.024em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .m{color:var(--mute);font-size:14.5px;margin-top:2px;letter-spacing:-.014em}
.row .chev{color:var(--faint);flex:none;display:grid;place-items:center;
  transition:transform .24s var(--spring)}
.row .chev svg{display:block}
.row:hover .chev{transform:translateX(3px)}

.kv{display:flex;justify-content:space-between;gap:16px;padding:15px 0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);font-size:16.5px;letter-spacing:-.02em}
.kv:last-child{box-shadow:none}
.kv>span:first-child{color:var(--mute)}
.kv>span:last-child{text-align:right;font-weight:500}

/* ---------- big numbers ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat,.tile{background:var(--surface);border-radius:var(--r-l);padding:22px;
  box-shadow:var(--e1);transition:box-shadow .26s var(--swift),transform .26s var(--spring)}
.stat:hover,.tile:hover{background:var(--surface2);transform:translateY(-2px)}
.stat .n,.tile .n{font-family:var(--f-d);font-size:44px;font-weight:600;letter-spacing:-.045em;
  line-height:1;font-variant-numeric:tabular-nums}
.stat .l,.tile .l{color:var(--mute);font-size:15px;margin-top:10px;letter-spacing:-.016em}
.stat .d{color:var(--faint);font-size:13.5px;margin-top:4px}

/* ======================================================================
   CONTROLS — pill buttons, generous, one accent
   ====================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 23px;border-radius:999px;font-size:16px;font-weight:500;
  letter-spacing:-.018em;background:var(--surface2);color:var(--ink);box-shadow:var(--lift);
  transition:background .2s var(--swift),transform .2s var(--spring),opacity .2s;
}
.btn:hover{background:var(--surface3)}
.btn:active{transform:scale(.97)}
.btn.wide{width:100%}
.btn.sm{padding:9px 16px;font-size:14.5px}
.btn.lg{padding:17px 30px;font-size:18px}
.btn[disabled]{opacity:.38;pointer-events:none}
.btn.pri{background:var(--accent-fill);color:#fff;box-shadow:0 0 28px -8px rgba(124,77,255,.9)}
.btn.pri:hover{background:#6B3BFF;box-shadow:0 0 36px -6px rgba(124,77,255,1)}
.btn.gold{background:var(--irid);color:#000;font-weight:600}
.btn.bad{background:rgba(255,107,125,.14);color:var(--fail)}
.back{display:inline-flex;align-items:center;gap:5px;color:var(--live);font-size:16px;
  padding:20px 0 4px}

.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:10px 17px;border-radius:999px;font-size:15px;background:var(--surface);
  color:var(--ink2);box-shadow:var(--lift);transition:all .2s var(--swift)}
.chip:hover{background:var(--surface2)}
.chip[aria-pressed="true"]{background:var(--accent-fill);color:#fff}

/* Five tabs do not fit a 360px phone, and forcing equal columns silently
   pushed the last one off the edge. It scrolls instead, with the bar itself
   never showing. */
.seg{display:flex;gap:2px;padding:3px;background:var(--surface);border-radius:12px;
  margin-bottom:26px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto;white-space:nowrap}
.seg button{padding:10px 15px;border-radius:9px;font-size:14.5px;font-weight:500;
  color:var(--ink2);text-align:center;transition:all .22s var(--swift)}
.seg button[aria-pressed="true"]{background:var(--surface3);color:var(--ink);font-weight:600}

.field{margin-bottom:22px}
.field label{display:block;font-size:14.5px;font-weight:500;color:var(--mute);
  margin-bottom:9px;letter-spacing:-.014em}

/* ---------------------------------------------------------------------- *
 * THE BIG ACTION
 * One per screen at most. This is the thing the screen exists to make easy,
 * and on Home it is taking a test — which students could not find before.
 * ---------------------------------------------------------------------- */
.bigaction{
  display:flex;align-items:center;gap:18px;width:100%;text-align:left;
  padding:24px;border-radius:var(--r-l);color:#fff;
  background:linear-gradient(135deg,#7C4DFF,#A57BFF 52%,#C3A6FF);
  box-shadow:0 0 46px -14px rgba(124,77,255,.95), var(--lift);
  transition:transform .26s var(--spring),box-shadow .26s var(--swift);
}
.bigaction:hover{transform:translateY(-3px);box-shadow:0 0 60px -10px rgba(124,77,255,1), var(--lift)}
.bigaction:active{transform:scale(.99)}
.bigaction .ba-ico{width:52px;height:52px;border-radius:16px;flex:none;display:grid;
  place-items:center;background:rgba(255,255,255,.18);color:#fff}
.bigaction .ba-ico svg{width:26px;height:26px}
.bigaction h3{font-size:22px;font-weight:600;letter-spacing:-.03em;color:#fff}
.bigaction p{margin:5px 0 0;font-size:15px;color:rgba(255,255,255,.78);letter-spacing:-.016em}
.bigaction .ba-go{margin-left:auto;flex:none;color:rgba(255,255,255,.65)}

/* ======================================================================
   INDICATORS
   ====================================================================== */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  letter-spacing:-.008em;padding:5px 11px;border-radius:999px;
  background:var(--surface2);color:var(--ink2);white-space:nowrap}
.pill.ok{color:var(--pass);background:rgba(58,223,155,.14)}
.pill.warn{color:var(--caution);background:rgba(255,191,77,.14)}
.pill.bad{color:var(--fail);background:rgba(255,107,125,.14)}
.pill.blue{color:var(--live);background:var(--live-wash)}
/* Verified is the only badge that carries the Passport's own material. */
/* Gold means "a person watched this happen". The iridescent gradient this used
   to be read as decoration, and decoration next to a credential makes the
   credential look decorative too. */
.pill.gold{color:#FFD9A0;background:rgba(255,191,77,.15);
  box-shadow:inset 0 0 0 1px rgba(255,191,77,.34);font-weight:600}

.badge{font-family:var(--f-m);font-size:11px;padding:2px 8px;border-radius:99px;
  background:var(--surface3);color:var(--ink2)}

.meter{height:6px;border-radius:99px;background:var(--surface2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--live);
  transition:width 1s var(--spring)}

.bars{display:flex;flex-direction:column;gap:14px}
.bar{display:grid;grid-template-columns:1fr 100px 30px;gap:13px;align-items:center;font-size:15px}
.bar .tr{height:6px;border-radius:99px;background:var(--surface2);overflow:hidden}
.bar .tr i{display:block;height:100%;border-radius:99px;background:var(--live);
  transition:width 1s var(--spring)}
.bar .v{font-family:var(--f-m);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}

.lvbar{display:flex;gap:4px;margin-top:10px}
.lvbar i{flex:1;height:4px;border-radius:2px;background:var(--surface2)}
.lvbar i.on{background:var(--live)}

.spinner{width:16px;height:16px;border-radius:50%;display:inline-block;vertical-align:-3px;
  border:2px solid rgba(255,255,255,.18);border-top-color:var(--accent);animation:spin .7s linear infinite}
.btn.pri .spinner{border-color:rgba(255,255,255,.35);border-top-color:#fff}

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

/* ======================================================================
   THE PASSPORT — the one dark object in a white room
   ====================================================================== */
.pcard{
  position:relative;border-radius:22px;overflow:hidden;width:100%;
  aspect-ratio:1.585/1;min-height:212px;display:block;text-align:left;
  background:#0D0D11;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 26px 60px -24px rgba(0,0,0,1),
             0 0 0 1px rgba(255,255,255,.07);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--spring),box-shadow .4s var(--swift);
  margin:10px 0 14px;
}
.pcard:hover{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,
  0 34px 80px -26px rgba(0,0,0,1), 0 0 0 1px rgba(165,123,255,.35),
  0 0 70px -26px rgba(124,77,255,.75)}
.pcard canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.pcard .pc-body{position:absolute;left:0;right:0;top:0;bottom:23%;
  padding:22px 24px 0;display:flex;flex-direction:column;transform:translateZ(30px)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pc-org{font-family:var(--f-m);font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.pc-org b{display:block;font-family:var(--f-d);font-size:13.5px;font-weight:600;
  letter-spacing:-.025em;text-transform:none;color:#fff;margin-top:5px}

/* The seal is etched, not lit. A glowing badge on a metal card looks printed. */
.pc-seal{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-m);font-size:8px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.9);background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.5),
             0 0 0 1px rgba(255,255,255,.12)}

/* The number is the hero. Everything else is a caption to it. */
.pc-id{font-family:var(--f-m);font-size:clamp(19px,5.2vw,25px);font-weight:500;
  letter-spacing:.11em;color:#fff;margin:auto 0 0;
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 26px rgba(255,255,255,.18)}

.pc-holder{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  margin:12px 0 18px}
.pc-name{font-family:var(--f-d);font-size:16px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;line-height:1.15}
.pc-meta{color:rgba(255,255,255,.55);font-size:11.5px;margin-top:4px;letter-spacing:-.005em}
.pc-valid{font-family:var(--f-m);font-size:7.5px;letter-spacing:.18em;text-align:right;
  color:rgba(255,255,255,.42);flex:none}
.pc-valid b{display:block;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.82);
  margin-top:4px;font-weight:500}

/* The scan strip. A barcode must be dark on light, so the plate opens into a
   pale band at the bottom — which is also the one place the card stops being
   silent and starts being useful. */
.pc-strip{position:absolute;left:0;right:0;bottom:0;height:23%;
  background:linear-gradient(180deg,#E9E9EE,#FBFBFD);
  display:flex;align-items:center;gap:14px;padding:0 20px;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.35);transform:translateZ(18px)}
.pc-bars{flex:1;min-width:0;height:62%}
.pc-bars svg{width:100%;height:100%;display:block}
.pc-stripmeta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;
  font-family:var(--f-m);font-size:8px;letter-spacing:.16em;color:#4A4A55}

/* Legacy names kept so the printed-card and verify views keep resolving. */
.pc-photo{display:none}
.pc-mrz{font-family:var(--f-m);font-size:8.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden}
.pc-foot{display:flex;justify-content:space-between;gap:10px;padding-top:11px;
  font-family:var(--f-m);font-size:8.5px;letter-spacing:.12em;color:rgba(255,255,255,.5)}

/* The student's own barcode, shown large and white — it is theirs, and it is
   different for every single holder. */
.barcode{background:#fff;border-radius:var(--r);padding:20px 18px 14px;
  box-shadow:var(--e1);margin-top:14px}
.barcode svg{display:block;width:100%;height:auto}
.barcode .num{text-align:center;font-family:var(--f-m);font-size:15px;letter-spacing:.24em;
  color:var(--ink);margin-top:10px;font-weight:500}
.qrbox{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--e1);
  max-width:240px;margin:0 auto}
.qrbox svg{display:block;width:100%;height:auto}

/* ======================================================================
   SKILLS
   ====================================================================== */
.skill{display:flex;gap:15px;padding:18px 20px;width:100%;background:transparent;
  transition:background .2s}
.skill:hover{background:var(--surface2)}
.skill .sg,.sg{width:42px;height:42px;border-radius:12px;flex:none;display:grid;
  place-items:center;background:var(--bg3);color:var(--mute);transition:color .2s}
.skill:hover .sg{color:var(--ink)}
.sg svg{display:block}

.cred{padding:20px;background:transparent;position:relative}
.cred:not(.plain)::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--irid)}
.cred.plain{opacity:.72}

/* ======================================================================
   ASSESSMENT
   ====================================================================== */
.qbar{display:flex;align-items:center;gap:14px;padding:18px 0}
.qbar .dots{display:flex;gap:4px;flex:1}
.qbar .dots i{flex:1;height:4px;border-radius:2px;background:var(--surface2);transition:background .3s}
.qbar .dots i.done{background:var(--faint)}
.qbar .dots i.cur{background:var(--live)}
.tm{font-family:var(--f-m);font-size:15px;font-variant-numeric:tabular-nums;color:var(--mute)}
.tm.low{color:var(--fail);animation:breathe 1.1s ease-in-out infinite}
.camchip{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);
  padding:7px 13px;border-radius:999px;background:var(--surface)}
.camchip .dot{width:7px;height:7px;border-radius:50%;background:var(--fail);
  animation:breathe 1.8s ease-in-out infinite}
.qtext{font-family:var(--f-d);font-size:25px;font-weight:600;line-height:1.24;margin:20px 0 6px}
.qcode{font-family:var(--f-m);font-size:14px;line-height:1.65;white-space:pre;overflow-x:auto;
  background:#1A1A1F;color:#E6E6EC;border-radius:14px;padding:18px;margin:16px 0}
.opt{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:16px;
  background:var(--surface);box-shadow:var(--e1);width:100%;font-size:17px;line-height:1.4;letter-spacing:-.02em;
  transition:all .2s var(--swift);margin-bottom:10px}
.opt:hover{background:var(--bg3)}
.opt .k{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-family:var(--f-m);font-size:12px;font-weight:600;background:var(--bg3);color:var(--mute)}
.opt[aria-pressed="true"]{background:var(--accent-fill);color:#fff;box-shadow:0 0 26px -10px rgba(124,77,255,.9)}
.opt[aria-pressed="true"] .k{background:rgba(255,255,255,.24);color:#fff}

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

/* ======================================================================
   STATES
   ====================================================================== */
.center-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:90px 24px;gap:10px;min-height:52vh}
.center-state h2{font-size:28px;font-weight:600}
.center-state p{color:var(--mute);font-size:17px;max-width:34ch;line-height:1.45;margin:0}
.center-state .spinner{width:28px;height:28px;border-width:2.5px;margin-bottom:14px}
.empty{text-align:center;padding:52px 24px;color:var(--mute);font-size:16px;
  border-radius:var(--r-l);background:var(--surface);box-shadow:var(--e1)}
.empty h4{font-size:19px;color:var(--ink);font-weight:600;margin-bottom:8px}

.err,.okbox,.warnbox{border-radius:14px;padding:16px 18px;font-size:15.5px;line-height:1.45;margin:16px 0}
.err{background:rgba(255,107,125,.12);color:#FFB3BC}
.okbox{background:rgba(58,223,155,.12);color:#A9F2D2}
.warnbox{background:rgba(255,191,77,.12);color:#FFDFA6}

.skeleton{border-radius:16px;height:72px;margin-bottom:10px;
  background:linear-gradient(90deg,var(--surface) 20%,var(--surface2) 50%,var(--surface) 80%);
  background-size:200% 100%;animation:shimmer 1.5s linear infinite}

#toast-host{position:absolute;left:20px;right:20px;bottom:98px;z-index:70;pointer-events:none}
.toast{background:var(--surface3);color:#fff;border-radius:15px;padding:15px 18px;font-size:15.5px;
  letter-spacing:-.018em;box-shadow:var(--e2);animation:rise .34s var(--spring)}

/* ======================================================================
   AUTH
   ====================================================================== */
.authwrap{max-width:420px;margin:0 auto;padding:56px 2px 60px}
.authwrap h1{font-size:clamp(34px,8.5vw,44px);font-weight:600;margin-bottom:14px}
.authlogo{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  font-family:var(--f-d);font-size:16px;font-weight:800;color:#000;margin-bottom:34px;
  background:var(--irid);box-shadow:0 0 40px -10px rgba(124,77,255,.9)}

/* ======================================================================
   ADMIN
   ====================================================================== */
.console{display:grid;grid-template-columns:250px 1fr;gap:26px;width:100%;
  max-width:1560px;margin:0 auto;padding:30px 26px}
.side{background:transparent;border-radius:0;padding:0;position:sticky;top:78px;align-self:start}
.side .grp{font-size:12.5px;font-weight:600;color:var(--faint);padding:18px 12px 8px}
.side button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;
  border-radius:10px;font-size:16px;color:var(--ink2);transition:all .2s var(--swift)}
.side button:hover{background:var(--surface);color:var(--ink)}
.side button[aria-current="true"]{background:var(--surface2);color:var(--ink);font-weight:600}
.side .navico{width:19px;height:19px;display:grid;place-items:center;flex:none}
.side .navico svg{display:block}
.side .badge{margin-left:auto}

.tblwrap{overflow-x:auto;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--e1)}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th{text-align:left;font-size:13px;color:var(--mute);font-weight:500;padding:16px 18px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.1);white-space:nowrap}
td{padding:16px 18px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);vertical-align:middle}
tr:last-child td{box-shadow:none}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--surface)}

/* ======================================================================
   PUBLIC VERIFY — what an outsider sees. The most important page.
   ====================================================================== */
.verifypage{max-width:700px;margin:0 auto;padding:64px 24px 90px}
.vhead{text-align:center;margin-bottom:44px}
.vhead .org{font-size:14px;color:var(--mute);margin-bottom:14px;letter-spacing:-.014em}
.vhead h1{font-size:clamp(34px,7vw,48px);font-weight:600}
.avatar{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-family:var(--f-d);font-size:15px;font-weight:600;background:var(--surface2);color:var(--ink)}

/* ======================================================================
   LESSONS
   ====================================================================== */
.lessonbody{font-size:19px;line-height:1.6;color:var(--ink2);letter-spacing:-.02em}
.lessonbody p{margin:0 0 20px}
.lessonbody b{color:var(--ink);font-weight:600}
.lessonbody code{font-family:var(--f-m);font-size:15px;background:var(--surface2);
  border-radius:6px;padding:2px 7px;color:var(--accent-hi)}
.lessonbody .qcode{margin:20px 0}
.lessonlist{margin:0 0 20px;padding-left:22px;list-style:none}
.lessonlist li{position:relative;margin-bottom:11px}
.lessonlist li::before{content:"";position:absolute;left:-18px;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--faint)}

.sidenote{max-width:300px;color:var(--mute);font-size:15px;line-height:1.5;padding-top:10px}
.sidenote h4{font-family:var(--f-d);font-size:16px;color:var(--ink);margin:0 0 8px;font-weight:600}
.sidenote p{margin:0 0 16px}
.sidenote code{font-family:var(--f-m);font-size:13.5px;color:var(--live)}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
.phone.app-frame{border:none;border-radius:0;box-shadow:none;width:100%;max-width:none;
  height:calc(100vh - 52px);height:calc(100dvh - 52px)}

@media (max-width:899px){
  .phonewrap{gap:0;width:100%}
  .phone.app-frame .scr{padding:0 22px calc(110px + env(safe-area-inset-bottom))}
  .phone.app-frame .tabbar{height:calc(78px + env(safe-area-inset-bottom));
    padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .console{grid-template-columns:1fr;padding:18px}
  .side{position:static;display:flex;gap:6px;overflow-x:auto}
  .side .grp{display:none}
  .side button{width:auto;white-space:nowrap;padding:10px 16px}
  .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(22px,7vw,84px);padding-right:clamp(22px,7vw,84px)}
  .phone.app-frame .scr>*{max-width:700px;margin-left:auto;margin-right:auto}
  .phone.app-frame .grid2{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:900px){
  .stagebody{align-items:stretch}
  .phonewrap{width:100%;gap:0}
  .phone.app-frame{height:calc(100vh - 52px);height:calc(100dvh - 52px)}
  .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 250px;height:auto;padding:26px 16px;gap:2px;
    border-top:none;border-right:1px solid var(--line);
    background:transparent;backdrop-filter:none;
  }
  .phone.app-frame .tabbar button{flex-direction:row;justify-content:flex-start;align-items:center;
    gap:14px;padding:12px 14px;border-radius:11px;font-size:16px;font-weight:500;letter-spacing:-.02em}
  .phone.app-frame .tabbar button svg{width:21px;height:21px;flex:0 0 auto}
  .phone.app-frame .tabbar button:hover{background:var(--surface);color:var(--ink)}
  .phone.app-frame .tabbar button[aria-current="true"]{background:var(--surface2);color:var(--ink);font-weight:600}

  .phone.app-frame .scr{flex:1;min-width:0;padding:0 0 80px}
  .phone.app-frame .scr>*{max-width:860px;margin-left:auto;margin-right:auto;
    padding-left:clamp(26px,4vw,48px);padding-right:clamp(26px,4vw,48px)}
  .phone.app-frame .grid2{grid-template-columns:repeat(4,1fr)}
  .phone.app-frame .hdr{padding:58px 0 36px}
  .phone.app-frame .hdr h1{font-size:clamp(44px,4.4vw,60px)}
  /* The product has fixed proportions. It is not stretched to the window. */
  .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 210px;padding:20px 12px}
  .phone.app-frame .scr>*{max-width:740px}
  .phone.app-frame .grid2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1500px){ .phone.app-frame .scr>*{max-width:980px} }
@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:1040px}
}

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

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


/* ---------------------------------------------------------------------- *
   CHECKOUT
   The only screen where money moves, so it gets the most care per pixel.

   The price is set in the display face at a size nothing else in the app
   uses. That is deliberate: a student scrolling for the first time should
   land on the number without hunting for it, and a number you have to hunt
   for reads as a number someone hoped you would not read.

   The pay button is sticky rather than pinned to the bottom of the document,
   because the content is longer than a phone screen and a student who has
   decided at the second paragraph should not have to scroll to the end to
   act on it.
   ---------------------------------------------------------------------- */
.paywrap{padding:18px 0 0}

.payhero{position:relative;text-align:center;padding:26px 0 30px;overflow:hidden}
.payhero-glow{position:absolute;top:-130px;left:50%;transform:translateX(-50%);
  width:330px;height:330px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(124,77,255,.30),transparent 68%);filter:blur(12px)}
.payhero-seal{margin:0 auto 20px;width:54px;height:54px;font-size:11px;position:relative}
.payhero h1{font-family:var(--f-d);font-size:clamp(32px,8.6vw,40px);font-weight:600;
  letter-spacing:-.04em;line-height:1.08;margin:0;position:relative}
.payhero p{color:var(--mute);font-size:16px;line-height:1.5;letter-spacing:-.016em;
  margin:14px auto 0;max-width:30ch;position:relative}

.paynotice{background:rgba(255,191,77,.1);border-radius:16px;padding:16px 18px;margin-bottom:18px}
.paynotice b{display:block;color:var(--caution);font-size:15.5px;margin-bottom:5px}
.paynotice span{color:var(--ink2);font-size:14.5px;line-height:1.5}

.payprice{background:var(--surface);border-radius:var(--r-xl);padding:28px 24px 8px;
  box-shadow:var(--e2);text-align:center}
.payprice-main{display:flex;align-items:flex-start;justify-content:center;gap:3px;
  font-family:var(--f-d);font-weight:600;letter-spacing:-.055em;line-height:1}
.payprice-cur{font-size:30px;margin-top:10px;color:var(--mute)}
.payprice-n{font-size:clamp(62px,17vw,78px);
  background:linear-gradient(180deg,#fff 30%,var(--accent-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.payprice-sub{margin-top:8px}
.payprice-sub b{display:block;font-size:17px;color:var(--accent);letter-spacing:-.022em}
.payprice-sub span{display:block;color:var(--mute);font-size:14.5px;margin-top:4px}
.payprice-rule{height:1px;background:var(--line);margin:22px -24px 4px}
.payprice .kv{padding:14px 0;font-size:15.5px}

.paycard{padding:6px 20px}
.paycard-plain .payline-tick{background:var(--surface2);color:var(--mute)}
.payline{display:flex;gap:13px;align-items:flex-start;padding:15px 0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.payline:last-child{box-shadow:none}
.payline-tick{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  margin-top:1px;background:var(--accent-wash);color:var(--accent)}
.payline-tick svg{display:block}
.payline b{display:block;font-size:16px;font-weight:500;letter-spacing:-.022em}
.payline span{display:block;color:var(--mute);font-size:14.5px;line-height:1.45;margin-top:3px;
  letter-spacing:-.014em}

.paytrust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.paytrust>div{background:var(--surface);border-radius:16px;padding:14px 12px;text-align:center}
.paytrust b{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.018em}
.paytrust span{display:block;color:var(--faint);font-size:11.5px;line-height:1.35;margin-top:4px}

.payhelp{text-align:center;margin-top:18px}

.paybar{position:sticky;bottom:0;padding:18px 0 22px;margin-top:22px;
  background:linear-gradient(180deg,transparent,var(--bg) 26%)}
.paygo{height:56px;font-size:17px;border-radius:18px}
.paybar-fine{text-align:center;font-size:13px;margin-top:10px;color:var(--faint)}

@media (max-width:360px){
  .paytrust{grid-template-columns:1fr;text-align:left}
  .paytrust>div{text-align:left;display:flex;gap:10px;align-items:baseline}
  .paytrust span{margin-top:0}
}

/* The console's banner. One line, always at the top of the app, cleared by
   emptying the field — no separate "dismiss" state to get stuck in. */
.noticebar{background:var(--accent-wash);color:var(--accent-hi);text-align:center;
  font-size:13.5px;line-height:1.4;padding:9px 16px;letter-spacing:-.014em;flex:none}

/* No tab bar on the sign-in and checkout screens, so the 110px of clearance
   reserved for it is not just wasted space — it also pushes a sticky footer
   up off the bottom of the screen, which is what put the Pay button a third
   of the way up the checkout. */
.scr.scr-notabs,
.phone.app-frame .scr.scr-notabs{padding-bottom:max(16px,env(safe-area-inset-bottom))}

/* ======================================================================
   RESUME
   The KAIF block sits above everything the student typed and is styled to
   look issued rather than written: a hairline box, a seal, and labels in
   the same tone as the rest of the app rather than a badge-coloured
   sticker. The point is that it reads as part of the document, not as an
   advertisement inside it.
   ====================================================================== */
.rsheet{background:var(--surface);border-radius:var(--r-xl);padding:26px 22px;box-shadow:var(--e2)}
.rhead h2{font-family:var(--f-d);font-size:30px;font-weight:600;letter-spacing:-.04em;margin:0}
.rheadline{color:var(--ink2);font-size:15.5px;line-height:1.45;margin:8px 0 0;letter-spacing:-.016em}
.rmeta{color:var(--mute);font-size:14px;margin:6px 0 0;letter-spacing:-.014em}
.rmeta.mono{font-family:var(--f-m);font-size:12.5px;letter-spacing:.06em;color:var(--faint)}
.rcontact{color:var(--mute);font-size:13.5px;line-height:1.6;margin:10px 0 0}
.rcontact .lnk{font-size:13.5px}

.kblock{border:1px solid var(--line3);border-radius:var(--r);padding:16px 16px 14px;margin:22px 0 8px;
  background:linear-gradient(180deg,rgba(165,123,255,.06),transparent 60%)}
.kblock-hd{display:flex;gap:11px;align-items:center;margin-bottom:12px}
.kblock-seal{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--accent);color:var(--accent-hi);font-family:var(--f-m);font-size:8.5px;
  letter-spacing:.08em}
.kblock-hd h3{font-size:15.5px;font-weight:600;letter-spacing:-.022em;margin:0}
.kblock-hd p{color:var(--mute);font-size:13px;margin:3px 0 0;line-height:1.4}

.krow{display:flex;gap:14px;padding:10px 0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.krow:last-child{box-shadow:none;padding-bottom:0}
.klabel{flex:0 0 116px;font-size:12.5px;font-weight:500;letter-spacing:-.01em}
.klabel span{display:block;color:var(--faint);font-size:11px;font-weight:400;margin-top:2px;line-height:1.3}
.kwrap{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.klist{flex:1}
.kchip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;
  font-size:13px;letter-spacing:-.012em;background:var(--surface2);color:var(--ink2)}
.kchip b{font-family:var(--f-m);font-size:11px;opacity:.8;font-weight:500}
.kchip.gold{background:rgba(255,191,77,.14);color:#FFD9A0;box-shadow:inset 0 0 0 1px rgba(255,191,77,.3)}
.kchip.accent{background:var(--accent-wash);color:var(--accent-hi)}
.kchip.grey{background:var(--surface2);color:var(--mute)}
.kchip.event{background:rgba(67,224,255,.1);color:#9EEBFF}
.kproj{padding:6px 0;font-size:13.5px}
.kproj b{font-weight:500;margin-right:8px}
.kproj span{color:var(--mute);font-size:12.5px;display:block;margin-top:2px}

.rsec{margin-top:22px}
.rsec h3{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);margin:0 0 10px;padding-bottom:6px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1)}
.rsec-note{text-transform:none;letter-spacing:0;color:var(--faint);font-weight:400;margin-left:8px}
.rentry{margin-bottom:14px}
.rentry-hd{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rentry-hd b{font-size:15.5px;font-weight:500;letter-spacing:-.022em}
.rdate{color:var(--faint);font-size:12.5px;white-space:nowrap;font-family:var(--f-m)}
.rwhere{color:var(--mute);font-size:13.5px;margin-top:2px}
.rtext{color:var(--ink2);font-size:14px;line-height:1.5;margin:6px 0 0}
.rbul{margin:6px 0 0;padding-left:18px;color:var(--ink2);font-size:14px;line-height:1.5}
.rbul li{margin-bottom:3px}
.rlink{display:inline-block;margin-top:5px;font-size:12.5px;word-break:break-all}

/* --- editor --- */
.rprog{margin-bottom:16px}
.rprog-bar{height:5px;border-radius:99px;background:var(--surface2);overflow:hidden}
.rprog-bar i{display:block;height:100%;border-radius:99px;background:var(--accent-fill);
  transition:width .5s var(--spring)}
.rprog-t{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:11px}
.rprog-t b{font-size:15px;font-weight:600}
.rprog-t span{color:var(--mute);font-size:13.5px}

.rsecs{display:flex;flex-direction:column;gap:8px}
.rsecbox{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--e1)}
.rsecbtn{display:flex;align-items:center;gap:13px;width:100%;padding:16px 18px;text-align:left;
  background:none;border:none;color:inherit;cursor:pointer}
.rsecbtn:hover{background:var(--surface2)}
.rsecbtn .ico{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--surface2);color:var(--mute)}
.rsecbtn .bd{flex:1;min-width:0}
.rsecbtn .bd b{display:block;font-size:16px;font-weight:500;letter-spacing:-.022em}
.rsecbtn .bd span{display:block;color:var(--faint);font-size:13px;margin-top:2px}
.rsecbtn .chev{color:var(--faint);transition:transform .3s var(--spring)}
.rsecbox.open .rsecbtn{background:var(--surface2)}
.rsecbox.open .rsecbtn .chev{transform:rotate(90deg)}
.rsecbody{padding:16px 18px 20px}

.rfield{display:block;margin-bottom:14px}
.rflabel{display:block;font-size:13px;font-weight:500;color:var(--ink2);margin-bottom:6px}
.rflabel i{font-style:normal;color:var(--faint);font-weight:400;font-size:11.5px;margin-left:7px}
.rfhelp{display:block;color:var(--faint);font-size:12px;line-height:1.4;margin-top:5px}
.rrow{background:var(--surface2);border-radius:var(--r-s);padding:14px 14px 2px;margin-bottom:12px}
.rrow-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.rrow-hd b{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.rtag{cursor:pointer;border:none}
.rtag span{opacity:.6;font-size:15px;line-height:1}
.rtagin{width:100%}

.rvis{display:flex;gap:14px;align-items:center;padding:13px 0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.rvis:last-child{box-shadow:none}
.rvis.off{opacity:.42}
.rvis .bd{flex:1;min-width:0}
.rvis .bd b{display:block;font-size:15px;font-weight:500;letter-spacing:-.02em}
.rvis .bd span{display:block;color:var(--faint);font-size:12.5px;margin-top:2px;line-height:1.35}

@media (max-width:420px){
  .klabel{flex:0 0 96px;font-size:12px}
  .rsheet{padding:20px 16px}
}

/* --- the public profile, seen by whoever scans the barcode --- */
.verifypage{max-width:640px;margin:0 auto;padding:26px 20px 60px}
.vhead{margin-bottom:20px}
.vhead .org{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;color:var(--mute);
  text-transform:uppercase}
.vhead h1{font-family:var(--f-d);font-size:20px;font-weight:600;letter-spacing:-.03em;margin:6px 0 0}

.vhero{position:relative;background:var(--surface);border-radius:var(--r-xl);padding:26px 22px 8px;
  overflow:hidden;box-shadow:var(--e2);margin-bottom:20px}
.vhero-glow{position:absolute;top:-150px;right:-60px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,77,255,.26),transparent 68%);filter:blur(10px);
  pointer-events:none}
.vhero h2{font-family:var(--f-d);font-size:clamp(28px,7vw,36px);font-weight:600;
  letter-spacing:-.04em;margin:14px 0 0;position:relative;line-height:1.08}
.vhero-meta{color:var(--ink2);font-size:15px;margin:8px 0 0;position:relative;letter-spacing:-.016em}
.vhero-id{color:var(--accent);font-size:13px;letter-spacing:.08em;margin:6px 0 0;position:relative}
.vstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px -22px 0;
  padding:16px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);position:relative}
.vstats b{display:block;font-family:var(--f-d);font-size:24px;font-weight:600;letter-spacing:-.04em}
.vstats span{display:block;color:var(--faint);font-size:11.5px;margin-top:3px;line-height:1.25}
@media (max-width:400px){ .vstats{grid-template-columns:repeat(2,1fr);gap:14px 8px} }