/* ==========================================================
   AZ-104 Lab Studio — Platform UI (RTL) · design system v3
   ========================================================== */
:root{
  --bg:#f7f8fa;--bg2:#f0f2f5;--card:#ffffff;--card2:#fafbfc;--ink:#0f1419;--ink2:#394150;--muted:#6b7280;--line:#e4e7ec;--line2:#eef0f3;
  --pri:#2f5bff;--pri2:#1f46e0;--pri-50:#f2f5ff;--pri-100:#e3e9ff;--acc:#0ea5e9;
  --ok:#0a8a5f;--ok-50:#ecfbf4;--bad:#d92d20;--bad-50:#fef3f2;--warn:#b54708;--warn-50:#fffaeb;--try:#6941c6;--try-50:#f4f1fd;
  --ring-bg:#eceef2;--r:10px;--r-lg:14px;--r-sm:8px;
  --sh-sm:0 1px 2px rgba(16,24,40,.04);--sh:0 1px 2px rgba(16,24,40,.04),0 2px 6px -2px rgba(16,24,40,.05);--sh-lg:0 20px 40px -16px rgba(16,24,40,.22),0 2px 6px rgba(16,24,40,.05);
  --side:244px;--top:56px;--grad:linear-gradient(135deg,#2f5bff 0%,#5a7dff 100%);
  --hero1:#0b0e14;--hero2:#121826;--focus:0 0 0 3px color-mix(in srgb,var(--pri) 22%,transparent);
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#0a0c10;--bg2:#13161c;--card:#111318;--card2:#15181e;--ink:#eceef2;--ink2:#c0c6d0;--muted:#8b93a1;--line:#242830;--line2:#1b1e25;
  --pri:#6d8bff;--pri2:#8ea6ff;--pri-50:#141a2e;--pri-100:#1b2442;
  --ok:#3ccf91;--ok-50:#0e241b;--bad:#f97066;--bad-50:#2a1513;--warn:#fdb022;--warn-50:#2a200c;--try:#a48afb;--try-50:#1c1730;
  --ring-bg:#22262e;--sh-sm:0 1px 2px rgba(0,0,0,.3);--sh:0 1px 2px rgba(0,0,0,.35),0 4px 12px -4px rgba(0,0,0,.45);--sh-lg:0 24px 48px -16px rgba(0,0,0,.75);
  --hero1:#07080b;--hero2:#0e1118;color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Segoe UI Variable Text","Segoe UI","Dubai","Noto Sans Arabic","Geeza Pro",Tahoma,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--pri)}
code{font-family:"Cascadia Code",Consolas,"Cascadia Mono",monospace;font-size:.88em;background:var(--pri-50);color:var(--pri2);padding:1px 6px;border-radius:6px;direction:ltr;unicode-bidi:embed}
::selection{background:#bfd4ff}
.ic{flex:none;display:inline-block;vertical-align:middle}
h1,h2,h3{line-height:1.35;letter-spacing:-.01em}
h1{font-size:28px;font-weight:800;margin:0}
h2{font-size:20px;font-weight:750}
/* ---------- app frame ---------- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--card);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;gap:6px;z-index:60}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer;padding:4px 8px 14px;border-bottom:1px solid var(--line2);margin-bottom:8px}
.logo{width:40px;height:40px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -4px rgba(37,99,235,.55);flex:none}
.brand .bt b{display:block;font-size:15.5px;font-weight:800;line-height:1.2;direction:ltr;text-align:right}
.brand .bt small{display:block;font-size:11.5px;color:var(--muted)}
.snav{display:flex;flex-direction:column;gap:3px}
.snav button{display:flex;align-items:center;gap:12px;border:0;background:none;padding:10px 12px;border-radius:11px;font-size:14.5px;font-weight:600;color:var(--ink2);text-align:start;position:relative;transition:background .15s,color .15s}
.snav button:hover{background:var(--bg)}
.snav button.on{background:var(--pri-50);color:var(--pri)}
.snav button.on::before{content:"";position:absolute;inset-inline-start:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--pri)}
[dir=rtl] .snav button.on::before{border-radius:4px 0 0 4px}
.snav .nb{margin-inline-start:auto;font-size:11px;font-weight:700;background:var(--bg2);color:var(--muted);padding:0 8px;border-radius:99px;line-height:20px}
.snav button.on .nb{background:var(--pri);color:#fff}
.side-card{margin-top:auto;background:linear-gradient(160deg,var(--pri-50),var(--card2));border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center}
.side-card b{display:block;font-size:14px}.side-card small{color:var(--muted);font-size:12px;line-height:1.5;display:block}
.side-foot{display:flex;gap:6px;padding-top:8px}
.themebtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:11px;padding:8px;font-size:13px;font-weight:600;color:var(--ink2)}
.themebtn:hover{border-color:var(--pri);color:var(--pri)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:50;height:var(--top);display:flex;align-items:center;gap:14px;padding:0 24px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.tb-title{font-weight:700;font-size:15px;white-space:nowrap;display:flex;align-items:center;gap:8px;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.tb-title .ic{color:var(--pri)}
.tb-search{position:relative;flex:1;max-width:520px;margin-inline-start:auto}
.tb-search>.ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.tb-search input{width:100%;height:40px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:0 40px 0 14px;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}
[dir=rtl] .tb-search input{padding:0 40px 0 14px}
.tb-search input:focus{border-color:var(--pri);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 18%,transparent)}
.tb-search kbd{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);font:11px Consolas,monospace;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:var(--card2)}
.sres{display:none;position:absolute;top:46px;inset-inline:0;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);max-height:440px;overflow:auto;padding:6px;z-index:80}
.sres.on{display:block}
.sres h6{margin:8px 10px 4px;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.3px}
.sres .si{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;cursor:pointer}
.sres .si:hover{background:var(--pri-50)}
.sres .si .sic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--dc,var(--pri)) 14%,transparent);color:var(--dc,var(--pri));flex:none}
.sres .si b{display:block;font-size:13.5px;font-weight:650;line-height:1.4}.sres .si small{color:var(--muted);font-size:12px}
.sres .sempty{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.tb-actions{display:flex;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap}
.chip .ic{color:var(--ok)}
.iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--ink2)}
.iconbtn:hover{color:var(--pri);border-color:var(--pri)}
.bnav{display:none}
#view{flex:1;min-width:0}
.wrap{max-width:1180px;margin:0 auto;padding:28px 28px 56px}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pri);color:#fff;border:0;border-radius:11px;padding:9px 16px;font-weight:700;font-size:14px;line-height:1.4;transition:transform .12s,box-shadow .15s,background .15s;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--pri2);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--pri) 70%,transparent)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.btn.ghost{background:var(--card);color:var(--ink2);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.btn.ghost:hover{border-color:color-mix(in srgb,var(--pri) 50%,var(--line));color:var(--pri);box-shadow:var(--sh-sm)}
.btn.soft{background:var(--pri-50);color:var(--pri)}.btn.soft:hover{background:var(--pri-100);box-shadow:none}
.btn.big{padding:13px 22px;font-size:15.5px;border-radius:13px}
.btn.try{background:linear-gradient(135deg,#7c3aed,#9f5cf5)}.btn.try:hover{box-shadow:0 8px 20px -6px rgba(124,58,237,.6)}
.btn.danger{background:var(--bad)}.btn.danger:hover{background:#b91c1c}
.btn.ok{background:var(--ok)}
.btn.glow{background:#fff;color:#0b2a5e;box-shadow:0 10px 30px -8px rgba(56,189,248,.7)}.btn.glow:hover{background:#eef6ff}
.btn.glass{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}.btn.glass:hover{background:rgba(255,255,255,.18)}
.lnk{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);padding:5px 0;font-size:13px;font-weight:600;text-decoration:none}
.lnk:hover{color:var(--pri)}
/* ---------- generic ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:40px 0 16px}
.sec-h h2{margin:0}.sec-h p{margin:2px 0 0;color:var(--muted);font-size:14px}
.sec{font-size:19px;margin:32px 0 14px;display:flex;align-items:center;gap:10px}
.sec .ic{color:var(--pri)}
.sec small{font-weight:500;color:var(--muted);font-size:13px}
.pbar{height:7px;background:var(--ring-bg);border-radius:99px;overflow:hidden;flex:1}
.pbar i{display:block;height:100%;background:var(--dc,var(--ok));border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.pbar.ok i{background:var(--ok)}.pbar.bad i{background:var(--bad)}
.ringsvg{display:block}
.ringsvg circle{transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.ringwrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ringwrap .rv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;font-weight:800;direction:ltr}
.ringwrap .rv small{font-size:10.5px;font-weight:600;color:var(--muted)}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--warn-50);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:14px;padding:12px 16px;margin-top:26px;font-size:13.5px;color:var(--ink2)}
.note .ic{color:var(--warn);margin-top:3px}
.note.info{background:var(--pri-50);border-color:color-mix(in srgb,var(--pri) 25%,transparent)}.note.info .ic{color:var(--pri)}
.empty{background:var(--card);border:1.5px dashed var(--line);padding:40px;border-radius:var(--r-lg);text-align:center;color:var(--muted)}
.empty .ic{color:var(--muted);margin-bottom:6px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;padding:2px 10px;border-radius:99px;background:var(--bg2);color:var(--ink2);line-height:1.7;white-space:nowrap}
.tag.dom{background:color-mix(in srgb,var(--dc) 12%,transparent);color:var(--dc)}
.tag.pr{background:var(--try-50);color:var(--try)}
.tag.flag{background:var(--warn-50);color:var(--warn)}
.tag.d-سهل{background:var(--ok-50);color:var(--ok)}.tag.d-متوسط{background:var(--warn-50);color:var(--warn)}.tag.d-صعب{background:var(--bad-50);color:var(--bad)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:99px;font-size:11.5px;font-weight:700;line-height:1.8}
.badge.official{background:var(--pri-50);color:var(--pri)}.badge.custom{background:var(--try-50);color:var(--try)}
.dc-ic{width:44px;height:44px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--dc) 13%,transparent);color:var(--dc);flex:none}
.dc-ic.sm{width:34px;height:34px;border-radius:10px}
.phead{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.phead .ph-ic{width:54px;height:54px;border-radius:16px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 10px 22px -8px rgba(37,99,235,.6)}
.phead h1{font-size:27px}.phead p{margin:2px 0 0;color:var(--muted);max-width:720px;font-size:14.5px;line-height:1.7}
.phead .ph-r{margin-inline-start:auto;flex:none}
.scorecard{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 16px 10px 12px;box-shadow:var(--sh-sm)}
.scorecard b{display:block;font-size:17px}.scorecard small{color:var(--muted);font-size:12px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--sh-sm)}
.toolbar .sp{flex:1}
.seg{display:inline-flex;gap:3px;background:var(--bg2);border-radius:12px;padding:3px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 13px;border-radius:9px;font-size:13px;font-weight:650;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.seg .dot{width:8px;height:8px;border-radius:50%;background:var(--dc,var(--pri))}
.seg small{font-size:11px;opacity:.7}
.finput{position:relative;flex:1;min-width:200px;max-width:320px}
.finput .ic{position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.finput input{width:100%;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--card2);padding-inline:36px 12px;font-size:13.5px;outline:none}
.finput input:focus{border-color:var(--pri);background:var(--card)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.filters button{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600}
.filters button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(1200px 500px at 85% -10%,#1d4ed8 0%,transparent 60%),radial-gradient(900px 500px at 0% 110%,#0891b2 0%,transparent 55%),linear-gradient(160deg,var(--hero2),var(--hero1));margin:0}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%)}
.hero-in{position:relative;max-width:1180px;margin:0 auto;padding:56px 28px 92px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:4px 12px;border-radius:99px;font-size:12.5px;font-weight:700;color:#bfe3ff}
.hero h1{font-size:46px;line-height:1.2;margin:16px 0 14px;font-weight:850;letter-spacing:-.02em}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#7dd3fc,#a5b4fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:17px;line-height:1.85;max-width:560px;color:#cfdcf2;margin:0}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;font-size:13px;color:#b9cbe6}
.hero-pills span{display:inline-flex;align-items:center;gap:6px}.hero-pills .ic{color:#4ade80}
.hero-vis{position:relative;min-height:330px}
.hv-win{position:relative;background:rgba(8,15,32,.82);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;transform:perspective(1200px) rotateY(8deg) rotateX(4deg);margin-top:10px}
.hv-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;color:#9fb3d1;direction:ltr}
.hv-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.hv-bar i:nth-child(2){background:#febc2e}.hv-bar i:nth-child(3){background:#28c840}
.hv-bar span{margin-left:8px;font-weight:600}
.hv-term{padding:16px 18px 20px;font:12.5px/1.9 "Cascadia Code",Consolas,monospace;color:#dbe7ff;text-align:left;min-height:220px}
.hv-term b{color:#4ade80;font-weight:700;margin-right:8px}.hv-term .ok{color:#86efac}.hv-term .dim{color:#7f93b5}
.hv-term .cur{display:inline-block;width:8px;height:15px;background:#7dd3fc;vertical-align:-3px;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hv-card{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;color:#0d1a2d;border-radius:14px;padding:10px 14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);font-size:13px;font-weight:700;animation:float 6s ease-in-out infinite}
.hv-card small{display:block;font-weight:500;color:#66758c;font-size:11.5px}
.hv-card.c1{bottom:-22px;left:18px}.hv-card.c2{top:-20px;right:14px;animation-delay:-3s}
.hv-card .okc{width:30px;height:30px;border-radius:50%;background:#e8f8f1;color:#059669;display:flex;align-items:center;justify-content:center}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* ---------- home ---------- */
.home .kpis{margin-top:-62px;position:relative;z-index:2}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh)}
.kpi .ki{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--kc) 13%,transparent);color:var(--kc);flex:none}
.kpi b{display:block;font-size:25px;font-weight:800;line-height:1.15;direction:ltr;text-align:right}
.kpi b small{font-size:14px;color:var(--muted);font-weight:600}
.kpi span{color:var(--muted);font-size:13px}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;margin-top:16px}
.ready{padding:22px;display:flex;gap:22px;align-items:center}
.ready h3{margin:0 0 2px;font-size:17px}.ready p{margin:0 0 12px;color:var(--muted);font-size:13.5px;line-height:1.6}
.ready .rbars{display:grid;gap:7px}
.rbar{display:grid;grid-template-columns:110px 1fr 38px;gap:10px;align-items:center;font-size:12.5px;color:var(--ink2)}
.rbar b{font-size:12px;text-align:left;direction:ltr;color:var(--muted)}
.next{padding:22px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.next::after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--dc,var(--pri)) 18%,transparent),transparent 70%)}
.next .nk{font-size:12px;font-weight:800;color:var(--pri);letter-spacing:.3px;display:flex;align-items:center;gap:6px}
.next h3{margin:0;font-size:19px;line-height:1.45}
.next .nmeta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.next .nmeta span{display:inline-flex;align-items:center;gap:5px}
.next .nrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:auto}
.next .pbar{max-width:240px}
.path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 18px;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:var(--sh-sm)}
.step:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--pri) 40%,var(--line))}
.step .sn{position:absolute;inset-inline-end:16px;top:14px;font-size:34px;font-weight:900;color:var(--line);line-height:1;direction:ltr}
.step .si{width:44px;height:44px;border-radius:13px;background:var(--pri-50);color:var(--pri);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step b{display:block;font-size:16px}.step span{display:block;color:var(--muted);font-size:13.5px;margin-top:4px;line-height:1.65}
.domains{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;cursor:pointer;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:var(--sh-sm)}
.dcard::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--dc)}
.dcard:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--dc) 45%,var(--line))}
.dc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dc-w{font-size:12px;font-weight:800;color:var(--dc);background:color-mix(in srgb,var(--dc) 11%,transparent);padding:2px 9px;border-radius:99px}
.dcard b{font-size:16px}.dcard small{color:var(--muted);font-size:12px;direction:ltr;text-align:right;line-height:1.5}
.dc-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin:6px 0 4px}
.dc-meta span{display:inline-flex;align-items:center;gap:4px}.dc-meta .ic{color:var(--muted)}
.dc-foot{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-top:4px}
.dc-foot .ic{color:var(--dc)}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:14px}
.feat .fi{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--fc) 13%,transparent);color:var(--fc);flex:none}
.feat b{display:block;font-size:15px}.feat span{color:var(--muted);font-size:13.5px;line-height:1.65;display:block}
.foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* ---------- cards (lessons / labs) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin:6px 0 10px}
.dgroup{margin-bottom:30px}
.dg-h{display:flex;align-items:center;gap:14px;margin:6px 0 14px}
.dg-h h2{margin:0;font-size:19px}.dg-h small{color:var(--muted);font-size:12.5px;direction:ltr;display:block;text-align:right}
.dg-h .dg-r{margin-inline-start:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);min-width:180px}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:var(--sh-sm);position:relative}
.lcard:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--dc,var(--pri)) 45%,var(--line))}
.lcard b{font-size:15.5px;line-height:1.55}
.lc-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.lc-num{font-weight:800;color:var(--dc);background:color-mix(in srgb,var(--dc) 11%,transparent);padding:1px 10px;border-radius:99px}
.lc-skills{display:flex;flex-wrap:wrap;gap:5px}
.lc-skills span{font-size:11.5px;background:var(--bg2);color:var(--ink2);padding:1px 8px;border-radius:7px;direction:ltr}
.lc-meta{display:flex;gap:12px;font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:6px;border-top:1px dashed var(--line)}
.lc-meta span{display:inline-flex;align-items:center;gap:4px}
.lcard.act{background:linear-gradient(150deg,color-mix(in srgb,var(--dc,var(--pri)) 9%,var(--card)),var(--card));border-style:dashed}
.lcard.act .ai{width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--dc,var(--pri)) 14%,transparent);color:var(--dc,var(--pri));display:flex;align-items:center;justify-content:center}
.lcard.act span{color:var(--muted);font-size:13px}
.labcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px 14px;cursor:pointer;display:flex;flex-direction:column;gap:7px;transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.labcard::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--dc)}
.labcard:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--dc) 45%,var(--line))}
.lb-top{display:flex;align-items:center;gap:8px}
.lb-id{font:700 12px "Cascadia Code",Consolas,monospace;color:var(--ink2);background:var(--bg2);padding:2px 8px;border-radius:7px}
.lb-top .badge{margin-inline-start:auto}
.labcard .lb-t{font-size:15.5px;line-height:1.55;margin-top:4px}
.lb-en{font-size:12px;color:var(--muted);direction:ltr;text-align:right;line-height:1.5}
.lb-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.lb-meta span{display:inline-flex;align-items:center;gap:4px}
.lb-foot{display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px}
.lb-foot .st{font-weight:700;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.labcard.prog .st{color:var(--pri)}.labcard.done .st{color:var(--ok)}
.labcard.done{background:linear-gradient(160deg,var(--ok-50),var(--card) 55%)}
.labcard.done .pbar i{background:var(--ok)}
/* ---------- lesson ---------- */
.lesson-l{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.crumb{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;margin-bottom:10px}
.crumb a{color:var(--muted);text-decoration:none;font-weight:600}.crumb a:hover{color:var(--pri)}
.lesson-hero{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 28px;box-shadow:var(--sh);position:relative;overflow:hidden}
.lesson-hero::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,var(--dc),color-mix(in srgb,var(--dc) 40%,#fff))}
.lesson-hero h1{font-size:28px;margin:10px 0 12px;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{background:var(--bg2);color:var(--ink2);padding:2px 10px;border-radius:8px;font-size:12px;font-weight:600}
.concepts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--sh-sm);position:relative}
.cc .cn{position:absolute;inset-inline-end:14px;top:12px;font:800 12px Consolas,monospace;color:var(--muted);opacity:.6}
.cc b{display:block;color:var(--dc,var(--pri));font-size:15.5px;text-align:right;padding-inline-end:28px}
.cc p{margin:6px 0 0;font-size:14px;color:var(--ink2);line-height:1.8}
.traps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.traps li{display:flex;gap:12px;align-items:flex-start;background:var(--bad-50);border:1px solid color-mix(in srgb,var(--bad) 22%,transparent);border-radius:14px;padding:12px 16px;font-size:14px;line-height:1.8}
.traps li .ic{color:var(--bad);margin-top:4px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.aside{position:sticky;top:calc(var(--top) + 18px);display:flex;flex-direction:column;gap:14px}
.acard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--sh-sm)}
.acard h4{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.toc{display:flex;flex-direction:column;gap:2px}
.toc button{display:flex;align-items:center;gap:8px;border:0;background:none;text-align:start;padding:7px 10px;border-radius:9px;font-size:13.5px;color:var(--ink2);font-weight:600}
.toc button:hover{background:var(--bg)}
.toc button.on{background:color-mix(in srgb,var(--dc,var(--pri)) 12%,transparent);color:var(--dc,var(--pri))}
.toc .tn{width:22px;height:22px;border-radius:7px;background:var(--bg2);font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none;font-weight:800}
.toc button.on .tn{background:var(--dc,var(--pri));color:#fff}
.calc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-top:18px;box-shadow:var(--sh-sm)}
.calc h2{margin:0;font-size:17px;display:flex;align-items:center;gap:8px}.calc p{margin:4px 0 12px;color:var(--muted);font-size:14px}
.calc-in input{font:600 17px "Cascadia Code",Consolas,monospace;padding:9px 14px;border:1px solid var(--line);border-radius:12px;width:280px;max-width:100%;background:var(--card2);outline:none;direction:ltr}
.calc-in input:focus{border-color:var(--pri);background:var(--card)}
.calc-out table{border-collapse:collapse;margin-top:12px;width:100%}.calc-out td{padding:8px 12px;border-bottom:1px solid var(--line2);font-size:14px}.calc-out td:first-child{color:var(--muted);width:230px}
.calc-bad{color:var(--bad);margin-top:10px}
/* ---------- question bank ---------- */
.qb-l{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
.qside{position:sticky;top:calc(var(--top) + 18px);display:flex;flex-direction:column;gap:12px}
.qdoms{display:flex;flex-direction:column;gap:2px}
.qdoms button{display:flex;align-items:center;gap:9px;border:0;background:none;padding:8px 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink2);text-align:start}
.qdoms button:hover{background:var(--bg)}
.qdoms button.on{background:color-mix(in srgb,var(--dc,var(--pri)) 12%,transparent);color:var(--dc,var(--pri))}
.qdoms .dot{width:9px;height:9px;border-radius:50%;background:var(--dc,var(--pri));flex:none}
.qdoms small{margin-inline-start:auto;font-size:11.5px;color:var(--muted);font-weight:700}
.qsts{display:flex;flex-wrap:wrap;gap:5px}
.qsts button{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:3px 11px;font-size:12px;font-weight:650;color:var(--ink2)}
.qsts button.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.qnums{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-height:44vh;overflow:auto;padding:2px}
.qnums button{position:relative;aspect-ratio:1;border:1px solid var(--line);background:var(--card2);border-radius:9px;font-weight:700;font-size:12.5px;color:var(--ink2);padding:0;display:flex;align-items:center;justify-content:center;direction:ltr;transition:transform .1s}
.qnums button:hover{border-color:var(--pri)}
.qnums button.on{background:var(--pri);color:#fff;border-color:var(--pri);box-shadow:0 4px 10px -3px color-mix(in srgb,var(--pri) 70%,transparent)}
.qnums button.ok{background:var(--ok-50);border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok)}
.qnums button.bad{background:var(--bad-50);border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)}
.qnums button.ans{background:var(--pri-50);border-color:color-mix(in srgb,var(--pri) 40%,transparent);color:var(--pri)}
.qnums button.on.ok,.qnums button.on.bad,.qnums button.on.ans{color:#fff;background:var(--pri)}
.qnums button.flg::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--warn)}
.qnums i{position:absolute;bottom:2px;left:3px;width:6px;height:6px;border-radius:50%;background:var(--try);font-size:0}
.qnums em{position:absolute;top:1px;left:3px;font-size:9px;color:var(--try);font-style:normal;font-weight:900}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11.5px;color:var(--muted);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:5px}.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px 26px;box-shadow:var(--sh)}
.qc-head{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.qc-n{font-size:15px;font-weight:800;margin-inline-end:6px}.qc-n small{color:var(--muted);font-weight:600;font-size:13px}
.qc-id{margin-inline-start:auto;font:600 11.5px Consolas,monospace;color:var(--muted)}
.qc-skill{font-size:12.5px;color:var(--muted);text-align:left;margin-top:10px;display:flex;align-items:center;gap:6px;justify-content:flex-end}
.stem{white-space:pre-wrap;font-size:16px;text-align:left;margin:12px 0 18px;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,Arial,sans-serif;line-height:1.7;color:var(--ink)}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;text-align:left;background:var(--card);transition:border-color .12s,background .12s,box-shadow .12s;font-size:14.5px;line-height:1.6;position:relative}
.opt:hover{border-color:color-mix(in srgb,var(--pri) 55%,var(--line));background:var(--card2)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .ol{width:28px;height:28px;border-radius:9px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--muted);flex:none;background:var(--card2);transition:.12s}
.opt.multi .ol{border-radius:7px}
.opt .ot{padding-top:2px}
.opt.sel{border-color:var(--pri);background:var(--pri-50)}
.opt.sel .ol{background:var(--pri);border-color:var(--pri);color:#fff}
.opt.correct{border-color:var(--ok);background:var(--ok-50)}.opt.correct .ol{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-50)}.opt.wrong .ol{background:var(--bad);border-color:var(--bad);color:#fff}
.opt .om{margin-left:auto;align-self:center}
.opt.correct .om{color:var(--ok)}.opt.wrong .om{color:var(--bad)}
.dd{display:grid;gap:10px}
.ddrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card);font-size:14.5px}
.ddrow span{flex:1;min-width:240px}
.ddrow select{padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);min-width:170px;background:var(--card2);font-size:13.5px;outline:none}
.ddrow select:focus{border-color:var(--pri)}
.ddrow.ok{border-color:var(--ok);background:var(--ok-50)}.ddrow.bad{border-color:var(--bad);background:var(--bad-50)}
.ddrow em{color:var(--ok);font-style:normal;font-weight:700;font-size:13px}
.verdict{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 16px;border-radius:14px;font-weight:700}
.verdict .vi{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.verdict.ok{background:var(--ok-50);color:var(--ok)}.verdict.ok .vi{background:var(--ok)}
.verdict.bad{background:var(--bad-50);color:var(--bad)}.verdict.bad .vi{background:var(--bad)}
.explain{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-top:12px}
.exh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.exh b{display:flex;align-items:center;gap:7px;font-size:15px}.exh b .ic{color:var(--warn)}
.explain p{margin:8px 0;font-size:14.5px;line-height:1.9;color:var(--ink2)}
.trap{display:flex;gap:8px;background:var(--warn-50);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.75}
.trap .ic{color:var(--warn);margin-top:3px}
.qbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;align-items:center;padding-top:16px;border-top:1px solid var(--line2)}
.qbtns .sp{flex:1}
/* ---------- exam ---------- */
.ebar{position:sticky;top:calc(var(--top) + 10px);z-index:20;display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 16px;margin-bottom:18px;box-shadow:var(--sh)}
.ebar .et{display:flex;align-items:center;gap:10px;font-weight:800}
.ebar .et .ic{color:var(--pri)}
.ebar .ep{flex:1;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);min-width:120px}
.timer{display:inline-flex;align-items:center;gap:8px;font:800 20px "Cascadia Code",Consolas,monospace;direction:ltr;background:var(--ink);color:var(--card);padding:5px 14px;border-radius:12px}
.timer.low{background:var(--bad);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.75}}
.exam-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center;background:radial-gradient(600px 300px at 90% 0%,#1d4ed8,transparent 60%),linear-gradient(150deg,var(--hero2),var(--hero1));color:#fff;border-radius:24px;padding:30px;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.exam-hero h2{margin:8px 0 6px;font-size:26px}.exam-hero p{margin:0;color:#c9d8ef;line-height:1.8}
.exam-hero .eyebrow{color:#bfe3ff}
.exam-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.exam-facts div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px}
.exam-facts b{display:block;font-size:22px;direction:ltr;text-align:right}.exam-facts span{font-size:12.5px;color:#bcd0ee}
.qz{display:flex;flex-direction:column;gap:8px}
.qz .btn{align-self:flex-start;margin-top:auto}
.score{display:flex;gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px 30px;box-shadow:var(--sh);position:relative;overflow:hidden}
.score::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 200px at 100% 0%,color-mix(in srgb,var(--sc) 14%,transparent),transparent 70%);pointer-events:none}
.score.pass{--sc:var(--ok)}.score.fail{--sc:var(--bad)}
.ring{position:relative}
.ring .rv b{font-size:38px}
.score h1{margin:0;font-size:30px}.score p{margin:4px 0;color:var(--ink2)}.score small{color:var(--muted)}
.schips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.bars{display:flex;flex-direction:column;gap:10px;margin:8px 0 18px}
.bar{display:grid;grid-template-columns:190px 1fr 56px 56px 74px;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:var(--sh-sm)}
.bar .bl{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.bar .bt{height:10px;background:var(--ring-bg);border-radius:99px;overflow:hidden}.bar .bt i{display:block;height:100%;background:var(--dc,var(--muted));border-radius:99px}
.bar.ok .bt i{background:var(--ok)}.bar.bad .bt i{background:var(--bad)}
.bar>b{direction:ltr;text-align:left}.bar small{color:var(--muted);font-size:12px}
.rlist{display:grid;gap:8px}
.ritem{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.ritem .ri{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.ritem.ok .ri{background:var(--ok)}.ritem.bad .ri{background:var(--bad)}
.ritem .rs{flex:1;color:var(--muted);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ritem b{font-family:Consolas,monospace;font-size:13px}
/* ---------- progress ---------- */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.iocard{padding:20px;display:flex;flex-direction:column;gap:10px}
.iocard .ioi{width:46px;height:46px;border-radius:14px;background:var(--pri-50);color:var(--pri);display:flex;align-items:center;justify-content:center}
.iocard h3{margin:0;font-size:16px}.iocard p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.7}
.iocard .btn{align-self:flex-start;margin-top:auto}
.progtxt{width:100%;height:140px;font:12px Consolas,monospace;border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:12px;background:var(--card2)}
label.btn{display:inline-flex;align-items:center;cursor:pointer}
/* ---------- toasts ---------- */
#toasts{position:fixed;bottom:22px;left:22px;z-index:999;display:flex;flex-direction:column;gap:10px;max-width:420px}
.toast{display:flex;align-items:center;gap:10px;background:#0d1a2d;color:#fff;padding:11px 16px;border-radius:14px;box-shadow:0 14px 34px -10px rgba(0,0,0,.45);font-size:14px;font-weight:600;animation:tin .3s cubic-bezier(.2,.8,.2,1);border-inline-start:4px solid #60a5fa}
.toast .ic{flex:none}
.toast.ok{border-color:#34d399}.toast.ok .ic{color:#34d399}.toast.warn{border-color:#fbbf24}.toast.warn .ic{color:#fbbf24}.toast.info .ic{color:#60a5fa}
.toast.out{opacity:0;transform:translateY(10px);transition:.4s}
@keyframes tin{from{transform:translateY(14px) scale(.97)}to{transform:none}}
/* ---------- entrance animation ---------- */
#view>section,#view>.wrap{animation:vin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes vin{from{transform:translateY(6px)}to{transform:none}}
/* ==========================================================
   Lab workspace
   ========================================================== */
.app.rail{--side:76px}
.app.rail .side{padding:14px 10px}
.app.rail .brand{justify-content:center;padding:4px 0 12px}
.app.rail .brand .bt,.app.rail .snav span,.app.rail .snav .nb,.app.rail .side-card,.app.rail .themebtn span{display:none}
.app.rail .snav button{justify-content:center;padding:11px 0}
.app.rail .snav button.on::before{inset-inline-start:-10px}
.app.rail .topbar{height:54px;padding:0 16px}
.app.rail{--top:54px}
.view-lab,.view-practice{height:calc(100vh - var(--top))}
.ws{display:grid;grid-template-columns:380px minmax(0,1fr);height:100%}
.ws.tp-hidden{grid-template-columns:52px minmax(0,1fr)}
.ws.tp-hidden .tp>*:not(.tp-top){display:none}.ws.tp-hidden .tp-top>div{display:none}
.mtabs{display:none}
.tp{background:var(--card);border-inline-end:1px solid var(--line);overflow:auto;padding:16px 16px 30px}
.tp-top{display:flex;gap:10px;align-items:flex-start}
.tp-hide{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--card2);flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.tp-hide:hover{color:var(--pri);border-color:var(--pri)}
.tp-kicker{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.tp h2{margin:0;font-size:17.5px;line-height:1.5}
.tp-prog{display:flex;align-items:center;gap:12px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:14px 0 10px}
.tp-prog b{display:block;font-size:14px}.tp-prog small{color:var(--muted);font-size:12px}
.tp-prog .ringwrap .rv{font-size:12px}
.scen{background:var(--pri-50);border-radius:14px;padding:8px 14px;margin-bottom:12px;font-size:13.5px;line-height:1.8}
.scen summary{cursor:pointer;font-weight:800;color:var(--pri);display:flex;align-items:center;gap:6px;list-style:none}
.scen summary::-webkit-details-marker{display:none}
.scen p{margin:6px 0 4px;color:var(--ink2)}
.tasks{position:relative}
.task{position:relative;border:1px solid var(--line);border-radius:16px;margin:10px 0;background:var(--card);transition:border-color .15s,box-shadow .15s}
.task.open{border-color:color-mix(in srgb,var(--pri) 45%,var(--line));box-shadow:0 6px 20px -10px color-mix(in srgb,var(--pri) 45%,transparent)}
.task.done{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.task-h{display:flex;gap:10px;align-items:center;padding:11px 12px;cursor:pointer;border-radius:16px}
.task-h:hover{background:var(--card2)}
.task-h b{flex:1;font-size:14px;line-height:1.5}
.tnum{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none;background:var(--bg2);color:var(--muted);border:2px solid var(--line)}
.task.open .tnum{background:var(--pri);border-color:var(--pri);color:#fff}
.task.done .tnum{background:var(--ok);border-color:var(--ok);color:#fff}
.tbadge{font-size:11.5px;font-weight:700;color:var(--muted);direction:ltr;background:var(--bg2);border-radius:99px;padding:0 8px}
.task.done .tbadge{background:var(--ok-50);color:var(--ok)}
.chev{color:var(--muted);display:flex;transition:transform .2s}
.task.open .chev{transform:rotate(180deg)}
.task-b{padding:2px 14px 14px;font-size:13.5px}
.steps{padding:0;margin:4px 0 8px;list-style:none;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding-inline-start:30px;margin:9px 0;line-height:1.85}
.steps li::before{content:counter(st);position:absolute;inset-inline-start:0;top:2px;width:21px;height:21px;border-radius:7px;background:var(--pri-50);color:var(--pri);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.sub{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--muted);margin:14px 0 6px;letter-spacing:.2px}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.checks li{display:flex;gap:9px;align-items:flex-start;padding:7px 10px;font-size:13px;color:var(--ink2);background:var(--card2);border-radius:10px;line-height:1.6}
.checks li>span{width:20px;height:20px;border-radius:50%;flex:none;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;margin-top:1px;color:transparent}
.checks li.ok{background:var(--ok-50);color:var(--ok)}
.checks li.ok>span{background:var(--ok);border-color:var(--ok);color:#fff;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.tbtns{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.tbtns button{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 11px;font-size:12.5px;font-weight:650;color:var(--ink2)}
.tbtns button:hover,.tbtns button.on{border-color:var(--pri);color:var(--pri);background:var(--pri-50)}
.hint{display:flex;gap:8px;background:var(--warn-50);border:1px solid color-mix(in srgb,var(--warn) 25%,transparent);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:13px;line-height:1.8}
.hint .ic{color:var(--warn);margin-top:3px}
.clibox{background:#0b1222;border:1px solid #1c2740;border-radius:12px;padding:10px;margin-top:10px}
.cliline{display:flex;gap:8px;align-items:flex-start;margin:3px 0;padding:4px 6px;border-radius:8px}
.cliline:hover{background:#111b31}
.cliline code{flex:1;background:transparent;color:#a7f3d0;white-space:pre-wrap;word-break:break-all;font-size:12px;text-align:left;padding:0}
.cliline button{display:inline-flex;align-items:center;gap:4px;background:#1b2741;color:#cfe0ff;border:0;border-radius:7px;padding:3px 8px;font-size:11px;font-weight:700;flex:none}
.cliline button:hover{background:#2563eb;color:#fff}
.clinote{color:#94a3b8;font-size:12px;padding:3px 6px;line-height:1.7}
.ptask{background:var(--pri-50);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.85}
.takeaways{background:linear-gradient(160deg,var(--ok-50),var(--card));border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);border-radius:16px;padding:14px 16px;margin-top:14px;font-size:13.5px}
.takeaways h3{margin:0 0 6px;color:var(--ok);display:flex;align-items:center;gap:8px;font-size:15.5px}
.takeaways ul{margin:4px 0 12px;padding-inline-start:20px}.takeaways li{margin:4px 0;line-height:1.75}
.takeaways .btn{margin:4px 0 0}
.tp-foot{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.sim{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;background:var(--bg2);padding:10px 12px 12px;gap:10px}
.sim .portal{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh)}
.sim .shell{border-radius:12px;overflow:hidden;box-shadow:var(--sh)}
/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero-in{grid-template-columns:1fr;padding-bottom:84px}.hero-vis{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo{grid-template-columns:1fr}
  .lesson-l{grid-template-columns:1fr}.aside{position:static}
  .features{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  :root{--top:56px}
  .app{grid-template-columns:1fr}
  .side{display:none}
  .topbar{padding:0 14px;gap:10px}
  .tb-title{display:none}
  .tb-search{margin:0}
  .tb-search kbd{display:none}
  .bnav{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:70;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .bnav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:700;color:var(--muted);padding:4px 0;border-radius:10px}
  .bnav button.on{color:var(--pri)}
  .bnav button.on .ic{background:var(--pri-50);border-radius:9px;box-sizing:content-box;padding:3px 12px}
  #view{padding-bottom:70px}
  .wrap{padding:20px 16px 40px}
  .hero h1{font-size:34px}.hero-in{padding:36px 18px 80px}.hero p{font-size:15.5px}
  .qb-l{grid-template-columns:1fr}.qside{position:static}
  .qnums{grid-template-columns:repeat(10,1fr);max-height:none}
  .concepts{grid-template-columns:1fr}
  .exam-hero{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .bar{grid-template-columns:1fr 50px}.bar .bt,.bar small,.bar .btn{grid-column:1/-1}
  .phead .ph-ic{width:46px;height:46px}.phead h1{font-size:23px}
  .phead{flex-wrap:wrap}.phead .ph-r{margin-inline-start:0}
  .app.rail .side{display:none}
  .view-lab,.view-practice{height:calc(100vh - var(--top) - 62px)}
  .ws,.ws.tp-hidden{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .mtabs{display:flex;gap:4px;padding:8px 10px;background:var(--card);border-bottom:1px solid var(--line)}
  .mtabs button{flex:1;border:0;border-radius:10px;padding:8px;font-weight:700;font-size:13.5px;background:var(--bg2);color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px}
  .mtabs button.on{background:var(--pri);color:#fff}
  .ws .tp{border:0;grid-row:2}
  .ws.m-sim .tp{display:none}.ws.m-tasks .sim{display:none}
  .ws .sim{grid-row:2;padding:6px}
  .tp-hide{display:none}
  .ws.tp-hidden .tp>*:not(.tp-top){display:block}.ws.tp-hidden .tp-top>div{display:block}
  .score{flex-direction:column;text-align:center}
}
@media (max-width:620px){
  .kpis{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:12px;gap:10px}.kpi .ki{width:38px;height:38px}.kpi b{font-size:20px}
  .path{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .ready{flex-direction:column;align-items:stretch;text-align:center}.ready .ringwrap{align-self:center}
  .qcard{padding:18px 16px}
  .qnums{grid-template-columns:repeat(8,1fr)}
  .toolbar .finput{max-width:none}
  .chip{display:none}
  .ebar{flex-wrap:wrap}
  .cards{grid-template-columns:1fr}
}

/* thin scrollbars */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 40%,transparent) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 35%,transparent);border-radius:8px}::-webkit-scrollbar-track{background:transparent}
.tb-logo{display:none;width:36px;height:36px;border-radius:11px;cursor:pointer}
@media (max-width:980px){.tb-logo{display:flex}}
/* ==========================================================
   v4: bilingual lessons (Microsoft Learn style), order questions, capstone
   ========================================================== */
.langsw{display:inline-flex;background:var(--bg2);border-radius:10px;padding:3px;gap:2px;flex:none}
.langsw button{border:0;background:none;padding:5px 12px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--muted);font-family:inherit}
.langsw button.on{background:var(--card);color:var(--pri);box-shadow:0 1px 3px rgba(16,24,40,.14)}
.langsw.sm{margin-inline-start:6px}.langsw.sm button{padding:3px 10px;font-size:12px}
.lp-k{display:block;font-size:11.5px;font-weight:800;color:var(--dc);letter-spacing:.2px;direction:ltr;text-align:right}
.lc-sub{font-size:12.5px;color:var(--muted);line-height:1.5}
.lc-ok{color:var(--ok);font-weight:700;display:inline-flex;align-items:center;gap:3px}
.lcard.ldone{background:linear-gradient(160deg,var(--ok-50),var(--card) 60%)}
.lcard .lc-meta .pbar{max-width:120px}
.lesson-hero .lc-top{flex-wrap:wrap}
.lh-sub{color:var(--muted);font-size:14px;margin:-6px 0 12px}
.lh-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.lh-row .pbar{max-width:220px}.lh-row small{color:var(--muted)}
.lesson-l2{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px;align-items:start;margin-top:18px}
.unav{position:sticky;top:calc(var(--top) + 16px);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - var(--top) - 32px);overflow:auto;box-shadow:var(--sh-sm)}
.unav button{display:flex;align-items:flex-start;gap:9px;border:0;background:none;padding:8px 10px;border-radius:10px;text-align:start;font-size:13.5px;font-weight:600;color:var(--ink2);line-height:1.45;font-family:inherit}
.unav button:hover{background:var(--bg)}
.unav button.on{background:color-mix(in srgb,var(--dc,var(--pri)) 12%,transparent);color:var(--dc,var(--pri))}
.unav .tn{width:22px;height:22px;border-radius:7px;background:var(--bg2);font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none;font-weight:800;margin-top:1px}
.unav button.vis .tn{background:var(--ok-50);color:var(--ok)}
.unav button.on .tn{background:var(--dc,var(--pri));color:#fff}
.unav .labbtn{margin-top:6px;border-top:1px dashed var(--line);border-radius:0 0 10px 10px;padding-top:12px}
.unav small{color:var(--muted);font-weight:700}
.lmain{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 30px;box-shadow:var(--sh);min-width:0}
.uh{font-size:23px;margin:0 0 14px;line-height:1.4}
.lobj{background:var(--pri-50);border-radius:14px;padding:12px 18px;margin-bottom:18px}.lobj b{display:block;margin-bottom:4px}.lobj ul{margin:4px 0;padding-inline-start:20px}.lobj li{margin:3px 0}
.ucontent{font-size:15.5px;line-height:1.9;color:var(--ink2)}
.ucontent[dir=ltr]{text-align:left;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;line-height:1.75}
.ucontent h3{font-size:18px;color:var(--ink);margin:24px 0 8px}.ucontent h4{font-size:16px;color:var(--ink);margin:18px 0 6px}
.ucontent p{margin:10px 0}.ucontent ul,.ucontent ol{padding-inline-start:24px}.ucontent li{margin:5px 0}
.ucontent code{font-size:.85em}
.ucontent pre{background:#0b1222;color:#d1e4ff;border-radius:12px;padding:12px 14px;overflow:auto;direction:ltr;text-align:left;font:12.5px/1.6 "Cascadia Code",Consolas,monospace}
.ucontent pre code{background:none;color:inherit;padding:0}
.ucontent table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px;display:block;overflow-x:auto}
.ucontent th,.ucontent td{border:1px solid var(--line);padding:8px 10px;text-align:start;vertical-align:top}
.ucontent th{background:var(--bg2);font-weight:700}
.ucontent .tip,.ucontent .warn,.ucontent .note{border-radius:12px;padding:10px 14px;margin:12px 0;border-inline-start:4px solid}
.ucontent .tip{background:var(--ok-50);border-color:var(--ok)}.ucontent .warn{background:var(--warn-50);border-color:var(--warn)}.ucontent .note{background:var(--pri-50);border-color:var(--pri)}
.ucontent .steps{counter-reset:st;list-style:none;padding:0}.ucontent .steps li{counter-increment:st;position:relative;padding-inline-start:34px;margin:8px 0}
.ucontent .steps li::before{content:counter(st);position:absolute;inset-inline-start:0;top:2px;width:24px;height:24px;border-radius:8px;background:var(--pri-50);color:var(--pri);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ucontent .cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.ucontent .cmp>*{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px}
.facts{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:8px}
.facts li{display:flex;gap:10px;background:var(--pri-50);border-radius:12px;padding:10px 14px;line-height:1.75}.facts li .ic{color:var(--pri);margin-top:4px}
.kcq{border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:12px 0}.kcq>b{display:block;margin-bottom:10px;font-size:15px;line-height:1.6}
.labhero{background:linear-gradient(150deg,color-mix(in srgb,var(--dc) 10%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--dc) 30%,var(--line));border-radius:18px;padding:20px}
.labhero h3{margin:8px 0;font-size:19px}.labhero p{color:var(--ink2);line-height:1.8}
.lablist{margin:8px 0 4px;padding-inline-start:22px;color:var(--ink2)}.lablist li{margin:4px 0}
.lfoot{display:flex;justify-content:space-between;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line2)}
.badge.module{background:var(--ok-50);color:var(--ok)}.badge.capstone{background:#fef3c7;color:#b45309}
.capstone{display:flex;gap:24px;align-items:center;justify-content:space-between;background:radial-gradient(600px 260px at 90% 0%,#1d4ed8,transparent 60%),linear-gradient(150deg,var(--hero2),var(--hero1));color:#fff;border-radius:22px;padding:24px 28px;margin-bottom:18px;cursor:pointer;box-shadow:var(--sh-lg);transition:transform .18s}
.capstone:hover{transform:translateY(-2px)}
.capstone h2{margin:8px 0 6px;font-size:23px}.capstone p{margin:0;color:#c9d8ef;line-height:1.75;max-width:720px}
.cap-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:#bcd0ee}.cap-meta span{display:inline-flex;align-items:center;gap:5px}
.cap-r{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none}
.qskill{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:10px;padding:7px 8px;background:var(--card2);font-size:12.5px;font-family:inherit;color:var(--ink)}
.artog{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:650;color:var(--ink2);cursor:pointer}
.qpg{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;font-size:12px;color:var(--muted)}
.qpg button{border:1px solid var(--line);background:var(--card);border-radius:8px;width:30px;height:26px;display:inline-flex;align-items:center;justify-content:center}
.qpg button:disabled{opacity:.4}
.qc-head .langsw{margin-inline-start:6px}
.ord{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ordcol{border:1.5px dashed var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.ordcol.ans{border-style:solid;border-color:color-mix(in srgb,var(--pri) 35%,var(--line));background:var(--pri-50)}
.ordcol h5{margin:0 0 2px;font-size:12.5px;color:var(--muted)}
.orditem{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:10px 12px;text-align:start;font-size:14px;line-height:1.5;font-family:inherit;color:var(--ink)}
.orditem:hover:not(:disabled){border-color:var(--pri)}
.orditem span:nth-child(2){flex:1}
.orditem .onum{width:26px;height:26px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none}
.orditem.correct{border-color:var(--ok);background:var(--ok-50)}.orditem.correct .onum{background:var(--ok)}
.orditem.wrong{border-color:var(--bad);background:var(--bad-50)}.orditem.wrong .onum{background:var(--bad)}
.ordempty{color:var(--muted);font-size:13px;padding:14px;text-align:center}
.ordok{margin-top:10px;background:var(--ok-50);border-radius:12px;padding:10px 14px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 14px}
.tp[dir=ltr] .steps li,.tp[dir=ltr] .checks li,.tp[dir=ltr] .ptask,.tp[dir=ltr] .scen p,.tp[dir=ltr] h2{text-align:left}
@media (max-width:980px){.lesson-l2{grid-template-columns:1fr}.unav{position:static;max-height:none;flex-direction:row;overflow-x:auto}.unav button{white-space:nowrap}.lmain{padding:18px}.ord{grid-template-columns:1fr}.capstone{flex-direction:column;align-items:flex-start}}
/* ---------- journey ---------- */
.jhero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:radial-gradient(700px 300px at 90% 0%,#1d4ed8,transparent 60%),radial-gradient(500px 300px at 0% 100%,#0891b2,transparent 60%),linear-gradient(150deg,var(--hero2),var(--hero1));color:#fff;border-radius:24px;padding:30px 32px;box-shadow:var(--sh-lg);margin-bottom:26px}
.jhero h1{font-size:34px;margin:10px 0 8px}.jhero p{color:#c9d8ef;line-height:1.85;max-width:720px;margin:0}
.jhero .btn.glow{white-space:normal;text-align:start}
.jbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.jb{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:12.5px;font-weight:700;color:#9fb3d1}
.jb.cur{color:#fff;border-color:#60a5fa;background:rgba(96,165,250,.18)}.jb.got{color:#0d1a2d;background:#4ade80;border-color:#4ade80}
.jring{display:flex;flex-direction:column;align-items:center;gap:10px}.jcur{text-align:center;color:#bcd0ee;font-size:12.5px}.jcur b{display:block;color:#fff;font-size:18px}
.roadmap{position:relative;display:flex;flex-direction:column;gap:16px}
.roadmap::before{content:"";position:absolute;inset-inline-start:21px;top:20px;bottom:20px;width:3px;background:var(--line);border-radius:3px}
.lvl{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px}
.lvl-dot{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--card);border:3px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:var(--muted)}
.lvl.cur .lvl-dot{border-color:var(--pri);color:var(--pri);box-shadow:0 0 0 6px color-mix(in srgb,var(--pri) 16%,transparent)}
.lvl.done .lvl-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.lvl-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-sm);overflow:hidden}
.lvl.cur .lvl-card{border-color:color-mix(in srgb,var(--pri) 45%,var(--line));box-shadow:var(--sh)}
.lvl-h{display:flex;gap:18px;align-items:center;padding:18px 20px;cursor:pointer}
.lvl-h>div:first-child{flex:1;min-width:0}
.lvl-k{font-size:12px;font-weight:800;color:var(--pri);letter-spacing:.3px}
.lvl-h h2{margin:4px 0 4px;font-size:20px}.lvl-h h2 small{font-weight:500;color:var(--muted);font-size:13px;margin-inline-start:6px}
.lvl-h p{margin:0 0 8px;color:var(--ink2);font-size:14px;line-height:1.75}
.lvl-h .chips span{background:var(--ok-50);color:var(--ok)}
.lvl-r{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}.lvl-r small{color:var(--muted);font-size:12px}
.lvl-b{border-top:1px solid var(--line2);padding:8px 16px 16px}
.jsec{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;margin:14px 4px 8px;color:var(--ink2)}.jsec small{font-weight:500;color:var(--muted);font-size:12px}
.jrow{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;border:1px solid transparent}
.jrow:hover{background:var(--card2);border-color:var(--line)}
.jrow.done{background:linear-gradient(90deg,var(--ok-50),transparent)}
.jn{width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--dc,var(--pri)) 13%,transparent);color:var(--dc,var(--pri));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;flex:none}
.jrow.done .jn{background:var(--ok);color:#fff}
.jt{flex:1;min-width:0;cursor:pointer}.jt b{display:block;font-size:14px;line-height:1.45}.jt small{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.jdots{display:inline-flex;gap:4px;flex:none}.jdots i{width:10px;height:10px;border-radius:50%;background:var(--ring-bg)}.jdots i.on{background:var(--ok)}
.jbtns{display:flex;gap:4px;flex:none}
.btn.sm{padding:6px 9px;border-radius:9px}
.jcheck{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--warn-50);border:1px dashed color-mix(in srgb,var(--warn) 45%,transparent)}
.jcheck>span{color:var(--warn)}.jcheck>div{flex:1}.jcheck b{display:block;font-size:14px}.jcheck small{color:var(--muted)}
.jcheck.ok{background:var(--ok-50);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}.jcheck.ok>span{color:var(--ok)}
.unav em.pro{font-style:normal;font-size:10px;font-weight:900;background:#fef3c7;color:#b45309;border-radius:6px;padding:0 6px;margin-inline-start:6px}
.badge.challenge{background:#fee2e2;color:#b91c1c}.badge.troubleshoot{background:#ffedd5;color:#c2410c}.badge.project{background:#e0e7ff;color:#4338ca}
.labhero.chal{border-style:dashed}
.steps.req li::before{content:"✓";background:var(--warn-50);color:var(--warn)}
@media (max-width:980px){.jhero{grid-template-columns:1fr}.lvl-h{flex-direction:column;align-items:flex-start}.jrow{flex-wrap:wrap}.jdots{order:3}}
/* ---------- case studies + Pearson-like exam ---------- */
.casebox{background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:14px;box-shadow:var(--sh-sm);overflow:hidden}
.cb-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line2);flex-wrap:wrap}.cb-h b{font-size:15px}.cb-h small{color:var(--muted)}
.cb-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--card2)}
.cb-tabs button{border:0;background:none;padding:10px 12px;font-size:13px;font-weight:650;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;font-family:inherit}
.cb-tabs button.on{color:var(--pri);border-color:var(--pri)}
.cb-body{padding:14px 18px;max-height:46vh;overflow:auto;font-size:14.5px}
.pv{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);overflow:hidden}
.pv-h{display:flex;align-items:center;gap:10px;padding:14px 20px;background:linear-gradient(90deg,#0b2a5e,#1d4ed8);color:#fff;flex-wrap:wrap}.pv-h small{opacity:.8;margin-inline-start:auto;font-size:12.5px}
.pv-b{padding:18px 24px;font-size:14.5px;line-height:1.8}.pv-b h2{margin:0 0 10px;font-size:20px}.pv-b h3{margin:16px 0 6px;font-size:16px}
.pv-b table.kv{border-collapse:collapse;width:100%;max-width:720px}.pv-b table.kv td,.pv-b table.kv th{border:1px solid var(--line);padding:8px 12px;text-align:left}.pv-b table.kv td:first-child{width:180px;color:var(--muted)}
.pv-b table.rv tr:hover td{background:var(--card2)}.pv-b table.rv tr.lk td{opacity:.5}
.pv-f{display:flex;gap:10px;align-items:center;padding:14px 20px;border-top:1px solid var(--line2);flex-wrap:wrap;background:var(--card2)}
.qnums button.lk{opacity:.35;cursor:not-allowed;background:var(--ring-bg)}
.secs{margin-top:12px;display:flex;flex-direction:column;gap:4px;font-size:12px}.secs div{padding:6px 8px;border-radius:8px;background:var(--bg2);color:var(--muted);display:flex;gap:6px;align-items:center}.secs div.on{background:var(--pri-50);color:var(--pri);font-weight:700}.secs div.done{color:var(--ok)}
.skrep{display:grid;gap:8px;margin:8px 0 18px}
.skrow{display:grid;grid-template-columns:minmax(0,1fr) 220px 52px 52px;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13.5px}
.skrow .skn{font-weight:650}.skrow .bt{height:9px;background:var(--ring-bg);border-radius:99px;overflow:hidden}.skrow .bt i{display:block;height:100%;background:var(--dc,var(--pri))}.skrow.ok .bt i{background:var(--ok)}.skrow.bad .bt i{background:var(--bad)}.skrow small{color:var(--muted)}
.rvcard .rvstats{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700}.rvbtns{display:flex;gap:6px;flex-wrap:wrap}
.rvpanel{margin-top:16px;border:2px dashed color-mix(in srgb,var(--try) 45%,var(--line));border-radius:16px;padding:14px 16px;background:var(--try-50)}
.rvh{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--try)}.rvh b{color:var(--ink)}
.rvans{background:var(--ok-50);border-radius:10px;padding:8px 12px;margin:6px 0;font-size:14px}
.rvexp{font-size:13.5px;margin:6px 0;line-height:1.7;color:var(--ink2)}
.rvform{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:flex-start}.rvform select{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--card);font-family:inherit}
.rvform textarea{flex-basis:100%;min-height:70px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-family:inherit;background:var(--card);color:var(--ink)}
@media (max-width:980px){.skrow{grid-template-columns:1fr 50px}.skrow .bt,.skrow small{grid-column:1/-1}}
/* ---------- smart study (Phase 3) ---------- */
.sttabs{margin:0 0 18px}
.st-k{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:16px}
@media (max-width:1100px){.st-k{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:16px}
.stact{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-sm);cursor:pointer;color:var(--ink);transition:transform .15s,border-color .15s}
.stact:hover:not([disabled]){transform:translateY(-2px);border-color:var(--pri)}
.stact[disabled]{opacity:.55;cursor:default}
.stact>span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--pri-50);color:var(--pri);margin-bottom:4px}
.stact b{font-size:15px}.stact small{color:var(--muted);font-size:12.5px;line-height:1.5}
.stact.pri{background:var(--grad,var(--pri));color:#fff;border-color:transparent}.stact.pri small{color:rgba(255,255,255,.85)}.stact.pri>span{background:rgba(255,255,255,.18);color:#fff}
.st-duo{margin-top:0;grid-template-columns:1fr 1fr}
@media (max-width:900px){.st-duo{grid-template-columns:1fr}}
.stcard{padding:18px}.stcard h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:16px}.stcard p{color:var(--muted);margin:0 0 10px}
.wklist{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.wk{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--bg2);border-inline-start:3px solid var(--dc)}
.wk span{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.st-sub{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px;margin:0 0 12px}
.btn.sm{padding:5px 11px;font-size:12.5px}
.nblist{display:flex;flex-direction:column;gap:12px}
.nbitem{background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--dc);border-radius:var(--r);padding:14px 16px}
.nbh{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}.nbh b{font-size:13px}
.nbstem{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--ink)}
.nbtrap{display:flex;gap:8px;align-items:flex-start;background:var(--warn-50);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--ink2);margin-bottom:10px}.nbtrap .ic{color:var(--warn);flex:none;margin-top:2px}
.nbbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fcdecks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:14px}
.fcdeck{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer;color:var(--ink)}
.fcdeck.on{border-color:var(--dc,var(--pri));box-shadow:0 0 0 3px color-mix(in srgb,var(--dc,var(--pri)) 15%,transparent)}
.fcdeck small{color:var(--muted);font-size:12px}
.fc{max-width:720px;margin:0 auto 16px;min-height:260px;background:var(--card);border:1px solid var(--line);border-top:5px solid var(--dc);border-radius:var(--r-lg);box-shadow:var(--sh);padding:22px 26px;cursor:pointer;display:flex;flex-direction:column;gap:14px}
.fch{display:flex;gap:6px;flex-wrap:wrap}
.fcf{font-size:20px;font-weight:700;line-height:1.55;color:var(--ink)}
.fcb{font-size:16px;line-height:1.7;color:var(--ink2);border-top:1px dashed var(--line);padding-top:14px}
.fchint{margin-top:auto;color:var(--muted);font-size:13px;display:flex;gap:6px;align-items:center}
.fcrate{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.btn.bad{background:var(--bad);border-color:var(--bad);color:#fff}
.mlegend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:14px;font-size:13px}
.mlegend span{display:inline-flex;align-items:center;gap:6px}.mlegend i{width:10px;height:10px;border-radius:3px;display:inline-block}.mlegend small{color:var(--muted);flex-basis:100%}
.mgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-bottom:12px;border-inline-start:4px solid var(--dc)}
.mgroup h4{margin:0 0 8px;font-size:14px;display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.mrow{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(80px,1fr) 46px 86px 56px auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line2,var(--line));font-size:13px}
.mrow:first-of-type{border-top:0}.mrow .mn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow small{color:var(--muted)}.mrow .mlv{font-weight:700;font-size:12px}
@media (max-width:800px){.mrow{grid-template-columns:1fr 70px 46px auto}.mrow small,.mrow .mlv{display:none}}
.plform{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;padding:16px 18px;margin-bottom:12px}
.plform label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650;color:var(--ink2)}
.plform input{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;min-width:170px}
.plsum{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:14px;line-height:1.7}
.plsum.ok{background:var(--ok-50)}.plsum.ok .ic{color:var(--ok)}.plsum.bad{background:var(--bad-50)}.plsum.bad .ic{color:var(--bad)}
.pldays{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.plday{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.plday.today{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-50)}
.pldh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px}.pldh small{color:var(--muted)}
.plitems{display:flex;flex-direction:column;gap:6px}
.plitem{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:6px 8px;border-radius:8px;background:var(--bg2);cursor:pointer;border-inline-start:3px solid var(--dc,var(--pri))}
.plitem:hover{background:var(--pri-50)}.plitem span[dir]{flex:1;min-width:0}.plitem small{color:var(--muted);white-space:nowrap}.plitem em{color:var(--muted);font-style:normal}
.plitem .pli{color:var(--dc,var(--pri));display:inline-flex}
.plitem.mock{--dc:#ea580c}.plitem.weak{--dc:#7c3aed}.plitem.check{--dc:#0284c7}.plitem.light{--dc:#059669}.plitem.rev{cursor:default;--dc:#64748b}
.glsearch{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px;min-width:min(420px,100%);flex:1;max-width:560px}
.glsearch input{border:0;outline:0;background:none;font:inherit;color:var(--ink);flex:1}
.gllist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.glcount{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.glitem{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--dc);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.glh{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.glh b{font-size:15px}.glh>span:not(.tag){color:var(--muted);font-size:13px}
.glitem p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink2)}.glitem small{color:var(--muted);font-size:12px}.glitem .lnk{align-self:flex-start;font-size:12.5px}
.gl{position:relative;border-bottom:1.5px dotted var(--pri);cursor:help}
.gl:focus{outline:0;background:var(--pri-50)}
.gtip{display:none;position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;z-index:60;width:320px;max-width:78vw;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg);padding:10px 12px;font-size:13px;line-height:1.6;font-weight:400;white-space:normal;text-align:start}
.gtip b{display:block;font-size:13.5px}.gtip i{display:block;font-style:normal;color:var(--muted);font-size:12px;margin-bottom:4px}
.gl:hover .gtip,.gl:focus .gtip,.gl:focus-within .gtip{display:block}

/* ==========================================================
   AZ-104 Lab Studio — design system v4 ("clean SaaS")
   Loaded after ui.css and before the simulator styles, so it never touches the
   simulated Azure portal (pz-*) or Cloud Shell. Tokens live at the top of ui.css.
   ========================================================== */

/* ---------- base ---------- */
body{font-size:14.5px;line-height:1.7;font-feature-settings:"cv11","ss01"}
h1{font-size:26px;font-weight:700;letter-spacing:-.022em}
h2{font-size:18px;font-weight:650;letter-spacing:-.012em}
h3{font-weight:650;letter-spacing:-.01em}
::selection{background:color-mix(in srgb,var(--pri) 22%,transparent)}
:focus-visible{outline:none;box-shadow:var(--focus)}
code{background:var(--bg2);color:var(--ink);border:1px solid var(--line);padding:0 5px;border-radius:5px}
[data-theme=dark] code{background:var(--card2)}

/* ---------- app frame ---------- */
.side{background:var(--card);padding:14px 10px 12px;gap:1px}
.brand{padding:2px 8px 14px;margin-bottom:2px;border-bottom:0;gap:10px}
.logo{width:32px;height:32px;border-radius:9px;background:var(--ink);box-shadow:none}
.logo svg{width:20px;height:20px}
[data-theme=dark] .logo{background:var(--pri)}
.brand .bt b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.brand .bt small{font-size:11.5px}
.snav{gap:1px}
.snav-h{font-size:11px;font-weight:600;color:var(--muted);padding:14px 10px 5px;letter-spacing:.02em}
.snav button{padding:7px 10px;border-radius:8px;font-size:14px;font-weight:550;color:var(--ink2);gap:10px;transition:background .12s,color .12s}
.snav button .ic{color:var(--muted);width:18px;height:18px}
.snav button:hover{background:var(--bg2);color:var(--ink)}
.snav button.on{background:var(--bg2);color:var(--ink);font-weight:650}
.snav button.on .ic{color:var(--pri)}
.snav button.on::before{display:none}
.snav .nb,.snav button.on .nb{background:none;color:var(--muted);font-weight:600;padding:0}
.side-card{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px;gap:10px}
.side-card b{font-size:13px;font-weight:650}.side-card small{font-size:11.5px}
.side-foot{padding-top:6px}
.themebtn{border-radius:8px;padding:7px;font-weight:550;font-size:13px;box-shadow:var(--sh-sm)}
.themebtn:hover{border-color:var(--line);background:var(--bg2);color:var(--ink)}
.topbar{height:var(--top);background:color-mix(in srgb,var(--card) 88%,transparent);padding:0 24px;gap:12px}
.tb-title{font-weight:600;font-size:14px;color:var(--ink)}
.tb-title .ic{color:var(--muted)}
.tb-search{max-width:440px}
.tb-search input{height:36px;border-radius:9px;background:var(--bg);font-size:13.5px}
.tb-search input:focus{background:var(--card);box-shadow:var(--focus)}
.tb-search kbd{border-radius:5px;background:var(--card)}
.sres{border-radius:12px;top:42px}
.sres .si{border-radius:8px}.sres .si .sic{border-radius:8px;width:28px;height:28px}
.chip{height:32px;border-radius:8px;font-weight:600;font-size:12.5px;box-shadow:var(--sh-sm)}
.iconbtn{width:34px;height:34px;border-radius:8px;box-shadow:var(--sh-sm)}
.iconbtn:hover{border-color:var(--line);background:var(--bg2);color:var(--ink)}
.wrap{max-width:1160px;padding:30px 32px 64px}

/* ---------- buttons ---------- */
.btn{border-radius:8px;padding:8px 14px;font-weight:600;font-size:13.5px;box-shadow:0 1px 2px rgba(16,24,40,.1),inset 0 1px 0 rgba(255,255,255,.14);transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.btn:hover{background:var(--pri2);box-shadow:0 1px 2px rgba(16,24,40,.1),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.ghost,.btn.glass{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-sm);backdrop-filter:none}
.btn.ghost:hover,.btn.glass:hover{background:var(--bg2);color:var(--ink);border-color:color-mix(in srgb,var(--ink) 18%,var(--line));box-shadow:var(--sh-sm)}
.btn.soft{background:var(--pri-50);color:var(--pri);box-shadow:none}
.btn.soft:hover{background:var(--pri-100);box-shadow:none}
.btn.glow{background:var(--pri);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.1),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.glow:hover{background:var(--pri2)}
.btn.big{padding:10px 18px;font-size:14.5px;border-radius:9px}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:7px}
.btn.try{background:var(--try)}.btn.try:hover{background:color-mix(in srgb,var(--try) 88%,#000);box-shadow:none}
.btn.ok{background:var(--ok)}.btn.ok:hover{background:color-mix(in srgb,var(--ok) 88%,#000)}
.btn.danger,.btn.bad{background:var(--bad)}.btn.danger:hover,.btn.bad:hover{background:color-mix(in srgb,var(--bad) 88%,#000)}
.lnk{font-weight:550}

/* ---------- generic surfaces ---------- */
.card{border-radius:12px;box-shadow:var(--sh-sm)}
.sec-h{margin:44px 0 14px}
.sec-h h2{font-size:18px}.sec-h p{font-size:13.5px}
.sec{font-size:17px;font-weight:650;margin:34px 0 12px}
.sec .ic{color:var(--muted)}
.pbar{height:6px}
.phead{gap:14px;margin-bottom:24px;align-items:flex-start}
.phead .ph-ic{width:40px;height:40px;border-radius:10px;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-sm);margin-top:2px}
.phead .ph-ic svg{width:20px;height:20px}
.phead h1{font-size:24px}.phead p{font-size:14px;margin-top:4px;line-height:1.65}
.scorecard{border-radius:12px;padding:10px 14px 10px 12px}
.scorecard b{font-size:15px}
.toolbar{border-radius:12px;padding:8px}
.seg{border-radius:9px;padding:3px;gap:2px}
.seg button{border-radius:7px;padding:5px 11px;font-weight:600;font-size:13px}
.seg button.on{box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px var(--line)}
.finput input{height:36px;border-radius:8px;background:var(--card)}
.finput input:focus{box-shadow:var(--focus)}
.filters button{border-radius:8px;font-weight:550}
.filters button.on{background:var(--ink);border-color:var(--ink);color:var(--card)}
.tag{border-radius:6px;font-weight:600;font-size:11.5px;padding:1px 8px;line-height:1.75}
.tag.dom{background:color-mix(in srgb,var(--dc) 10%,transparent)}
.badge{border-radius:6px;font-weight:650}
.dc-ic{width:36px;height:36px;border-radius:9px}
.dc-ic svg{width:19px;height:19px}
.dc-ic.sm{width:28px;height:28px;border-radius:7px}
.dc-ic.sm svg{width:15px;height:15px}
.note{border-radius:10px;margin-top:24px}
.empty{border-radius:12px;border-width:1px}
.ucontent .tip,.ucontent .warn,.ucontent .note{display:block;border-radius:8px;padding:10px 14px;border:1px solid var(--line);margin:14px 0;font-size:inherit;color:var(--ink2)}
.ucontent .tip{background:var(--ok-50);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.ucontent .warn{background:var(--warn-50);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.ucontent .note{background:var(--pri-50);border-color:color-mix(in srgb,var(--pri) 25%,transparent)}
.ucontent pre{background:#0d1117;border:1px solid #1f2430;border-radius:10px}
.ucontent th{background:var(--card2);font-weight:650;font-size:13px}
.ucontent table{border-radius:8px}

/* ---------- KPIs ---------- */
.kpis{gap:12px}
.kpi{border-radius:12px;padding:16px 18px;gap:14px;box-shadow:var(--sh-sm)}
.kpi .ki{width:38px;height:38px;border-radius:9px}
.kpi .ki svg{width:19px;height:19px}
.kpi b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.kpi b small{font-size:13px}
.kpi span{font-size:12.5px}

/* ---------- home hero (light, product-first) ---------- */
.hero{color:var(--ink);background:var(--card);border-bottom:1px solid var(--line)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(640px 320px at 22% 30%,color-mix(in srgb,var(--pri) 11%,transparent),transparent 70%);pointer-events:none}
.hero-bg{background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 72%)}
.hero-in{z-index:1;padding:60px 32px 68px;max-width:1160px}
.eyebrow{background:var(--card);border:1px solid var(--line);color:var(--ink2);font-weight:600;box-shadow:var(--sh-sm);padding:3px 12px}
.eyebrow .ic{color:var(--pri)}
.hero h1{font-size:44px;font-weight:750;letter-spacing:-.035em;line-height:1.18;color:var(--ink)}
.hero h1 em{background:none;color:var(--pri);-webkit-text-fill-color:currentColor}
.hero p{color:var(--ink2);font-size:16px;line-height:1.8}
.hero-btns{margin-top:24px;gap:10px}
.hero-pills{color:var(--muted);font-size:13px;margin-top:22px}
.hero-pills .ic{color:var(--ok)}
.hv-win{background:#0d1117;border:1px solid #232a36;border-radius:12px;box-shadow:var(--sh-lg);transform:none}
.hv-bar{background:#161b22;border-bottom:1px solid #232a36}
.hv-term{color:#d6deeb}
.hv-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-lg);animation:none;font-weight:650}
.hv-card small{color:var(--muted)}
.hv-card .okc{background:var(--ok-50);color:var(--ok)}
.home .kpis{margin-top:28px}
.foot{margin-top:48px}

/* ---------- home blocks ---------- */
.duo{gap:12px;margin-top:12px}
.ready,.next{padding:20px}
.ready h3,.next h3{font-size:16px}
.next::after{display:none}
.next .nk{color:var(--muted);font-weight:650;letter-spacing:0}
.next .nk .ic{color:var(--pri)}
.next h3{font-size:17px}
.path{gap:12px}
.step,.dcard,.feat,.lcard,.labcard{border-radius:12px;box-shadow:var(--sh-sm);transition:border-color .15s,box-shadow .15s,transform .15s}
.step:hover,.dcard:hover,.lcard:hover,.labcard:hover{transform:translateY(-1px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--ink) 16%,var(--line))}
.step{padding:18px}
.step .sn{font-size:13px;font-weight:650;color:var(--muted);top:18px;inset-inline-end:18px;font-variant-numeric:tabular-nums}
.step .si{width:36px;height:36px;border-radius:9px;background:var(--bg2);color:var(--ink);border:1px solid var(--line)}
.step .si svg{width:18px;height:18px}
.step b{font-size:15px}.step span{font-size:13px}
.domains{gap:12px}
.dcard{padding:16px}
.dcard::before{display:none}
.dcard b{font-size:15px}
.features{gap:12px}
.feat{padding:16px;box-shadow:none}
.feat .fi{width:36px;height:36px;border-radius:9px}
.feat .fi svg{width:18px;height:18px}
.feat b{font-size:14.5px}.feat span{font-size:13px}

/* ---------- catalogs: lessons + labs ---------- */
.lcard{padding:16px;gap:7px}
.lcard b{font-size:15px}
.lc-num{border-radius:6px;font-weight:650}
.lc-skills span{border-radius:5px}
.lc-meta{border-top:1px solid var(--line2)}
.lcard.act{background:var(--card2)}
.lcard.ldone{background:var(--card)}
.labcard{padding:16px 16px 14px}
.labcard::before{display:none}
.labcard .lb-t{font-size:15px}
.labcard.done{background:var(--card)}

/* ---------- lesson reader ---------- */
.lesson-hero{border-radius:14px;box-shadow:var(--sh-sm);padding:24px 26px}
.lesson-hero::before{height:3px;background:var(--dc)}
.lesson-hero h1{font-size:26px}

/* ---------- questions + exam ---------- */
.qcard{border-radius:14px;box-shadow:var(--sh-sm);padding:24px 26px}
.opt{border-width:1px;border-radius:10px;padding:11px 14px}
.opt .ol{border-width:1px;border-radius:7px;width:26px;height:26px;font-weight:700}
.opt.sel{box-shadow:0 0 0 1px var(--pri)}
.opt.correct{box-shadow:0 0 0 1px var(--ok)}.opt.wrong{box-shadow:0 0 0 1px var(--bad)}
.verdict{border-radius:10px;font-weight:650}
.verdict .vi{width:26px;height:26px}
.explain{border-radius:12px}
.score{border-radius:16px;box-shadow:var(--sh-sm)}
.score h1{font-size:28px}

/* ---------- journey ---------- */
.jhero{position:relative;overflow:hidden;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);padding:30px 32px}
.jhero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse at 85% 20%,#000,transparent 65%);mask-image:radial-gradient(ellipse at 85% 20%,#000,transparent 65%);pointer-events:none}
.jhero>*{position:relative}
.jhero h1{font-size:30px;letter-spacing:-.03em}
.jhero p{color:var(--ink2)}
.jb{background:var(--bg2);border:1px solid var(--line);color:var(--muted);border-radius:7px;font-weight:600}
.jb.cur{color:var(--pri);border-color:var(--pri-100);background:var(--pri-50)}
.jb.got{color:var(--ok);background:var(--ok-50);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.jcur{color:var(--muted)}.jcur b{color:var(--ink)}
.jhero .ringwrap .rv,.jhero .ringwrap .rv b{color:var(--ink)!important}
.roadmap::before{width:2px;inset-inline-start:22px}
.lvl-dot{border-width:2px;font-size:16px;font-weight:700}
.lvl.cur .lvl-dot{box-shadow:0 0 0 4px var(--pri-50)}
.lvl-card{border-radius:14px}
.lvl.cur .lvl-card{border-color:color-mix(in srgb,var(--pri) 35%,var(--line));box-shadow:var(--sh)}
.lvl-k{font-weight:650;letter-spacing:0;color:var(--muted)}
.lvl.cur .lvl-k{color:var(--pri)}
.lvl-h h2{font-size:18px}
.jrow{border-radius:8px}
.jrow.done{background:none}
.jrow.done .jn{background:var(--ok-50);color:var(--ok)}
.jn{border-radius:7px;font-weight:700}

/* ---------- smart study ---------- */
.stact{border-radius:12px;box-shadow:var(--sh-sm);padding:16px}
.stact:hover:not([disabled]){transform:translateY(-1px);border-color:color-mix(in srgb,var(--ink) 16%,var(--line));box-shadow:var(--sh)}
.stact>span{width:36px;height:36px;border-radius:9px;background:var(--bg2);color:var(--ink);border:1px solid var(--line)}
.stact>span svg{width:18px;height:18px}
.stact.pri{background:var(--pri);border-color:var(--pri)}
.stact.pri>span{background:rgba(255,255,255,.16);border-color:transparent}
.stcard{border-radius:12px}
.nbitem,.mgroup,.plday,.glitem,.fcdeck{border-radius:12px;box-shadow:var(--sh-sm)}
.nbitem,.mgroup{border-inline-start:1px solid var(--line)}
.glitem{border-top-width:1px}
.fc{border-radius:16px;border-top:1px solid var(--line);box-shadow:var(--sh)}

/* ---------- toasts ---------- */
.toast{border-radius:10px!important}

/* ---------- featured dark card (capstone) ---------- */
.capstone{position:relative;overflow:hidden;background:#0f1419;border:1px solid #1f2630;border-radius:16px;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.capstone::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse at 85% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 85% 0%,#000,transparent 70%);pointer-events:none}
.capstone::after{content:"";position:absolute;inset-inline-end:-80px;top:-120px;width:360px;height:280px;background:radial-gradient(closest-side,color-mix(in srgb,var(--pri) 38%,transparent),transparent);pointer-events:none}
.capstone>*{position:relative;z-index:1}
.capstone:hover{transform:translateY(-1px);box-shadow:var(--sh-lg)}
.capstone h2{font-size:21px;letter-spacing:-.02em}
.capstone p{color:#aab3c2}.cap-meta{color:#8d97a8}
.badge.capstone{background:var(--warn-50);color:var(--warn)}
[data-theme=dark] .capstone{background:#0d1015;border-color:var(--line)}
.tp[dir=ltr]{border-inline-end:0;border-inline-start:1px solid var(--line);text-align:left}
.plitem,.wk{border:1px solid var(--line);border-inline-start-width:1px;background:var(--card);border-radius:8px}
.plitem:hover{background:var(--bg2);border-color:color-mix(in srgb,var(--ink) 14%,var(--line))}
.plitem.rev{background:var(--card2)}
/* ---------- exam focus mode: no sidebar while the timer runs ---------- */
.app.focus{grid-template-columns:minmax(0,1fr)}
.app.focus .tnav,.app.focus .bnav,.app.focus .tb-search{display:none!important}
[data-theme=dark] .btn:not(.ghost):not(.soft):not(.glass):not(.try):not(.ok):not(.danger):not(.bad){background:#4a6cf7}
[data-theme=dark] .btn:not(.ghost):not(.soft):not(.glass):not(.try):not(.ok):not(.danger):not(.bad):hover{background:#5b7bff}
[data-theme=dark] .stact.pri{background:#4a6cf7;border-color:#4a6cf7}

/* ---------- top navigation (replaces the sidebar) ---------- */
.app.topnav{display:block;min-height:100vh}
.app.topnav .main{min-height:100vh}
.app.topnav .topbar{gap:10px;padding:0 20px}
.tbrand{display:flex;align-items:center;gap:9px;cursor:pointer;flex:none;padding-inline-end:4px}
.tbrand b{font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;direction:ltr}
.tnav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;margin-inline-start:10px}
.tnav::-webkit-scrollbar{display:none}
.tnav button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;height:34px;padding:0 10px;border-radius:8px;font-size:13.5px;font-weight:550;color:var(--ink2);white-space:nowrap;flex:none;transition:background .12s,color .12s}
.tnav button .ic{color:var(--muted)}
.tnav button:hover{background:var(--bg2);color:var(--ink)}
.tnav button.on{background:var(--bg2);color:var(--ink);font-weight:650}
.tnav button.on .ic{color:var(--pri)}
.tsep{width:1px;height:18px;background:var(--line);margin:0 6px;flex:none}
.app.topnav .tb-search{flex:0 1 230px;margin-inline-start:0;max-width:none;transition:flex-basis .15s}
.app.topnav .tb-search:focus-within{flex-basis:340px}
.app.topnav .sres{min-width:340px}
.rdchip{gap:7px;cursor:pointer;padding:0 10px 0 6px;color:var(--ink2)}
.rdchip .ringwrap{flex:none}.rdchip b{font-weight:700;color:var(--ink)}
.rdchip:hover{background:var(--bg2)}
@media (max-width:1320px){.tnav button .ic{display:none}.tbrand b{display:none}.rdl{display:none}}
@media (max-width:1080px){.tsep{margin:0 2px}.tnav button{padding:0 8px;font-size:13px}.app.topnav .tb-search{flex-basis:170px}.tb-search kbd{display:none}}
@media (max-width:980px){.tnav{display:none}.tbrand b{display:inline}.app.topnav .tb-search{flex:1 1 auto}.app.topnav .tb-search:focus-within{flex-basis:auto}.app.topnav .sres{min-width:0}.rdchip>span:not(.ringwrap){display:none}.rdchip{padding:0 5px}}
@media (max-width:520px){.tbrand b{display:none}}
@media (min-width:981px) and (max-width:1320px){.app.topnav .tb-search input::placeholder{color:transparent}.app.topnav .tb-search input:focus::placeholder{color:var(--muted)}}

/* ---------- free sandbox ---------- */
.sbhero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.sbhero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse at 10% 0%,#000,transparent 60%);mask-image:radial-gradient(ellipse at 10% 0%,#000,transparent 60%);pointer-events:none}
.sbhero>*{position:relative}
.sbhero h2{margin:0 0 10px;font-size:19px}
.sbhero ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px;color:var(--ink2)}
.sbhero li{display:flex;gap:8px;align-items:flex-start}.sbhero li .ic{color:var(--ok);margin-top:4px}
.sbnote{display:flex;gap:10px;align-items:flex-start;align-self:start;background:var(--warn-50);border:1px solid color-mix(in srgb,var(--warn) 25%,transparent);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.7;color:var(--ink2)}
.sbnote .ic{color:var(--warn);flex:none;margin-top:3px}
.sbform{padding:18px}
.sbtpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.sbtpl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;color:var(--ink);transition:border-color .12s,box-shadow .12s}
.sbtpl:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--line))}
.sbtpl.on{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-50)}
.sbtpl b{font-size:14.5px}.sbtpl small{color:var(--muted);font-size:12.5px;line-height:1.6}.sbtpl em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--pri);margin-top:auto;padding-top:4px}
.sbi{width:34px;height:34px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);flex:none;margin-bottom:4px}
.sbrow{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.sbrow label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
.sbrow input{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;min-width:240px}
.sbrow input:focus{outline:none;border-color:var(--pri);box-shadow:var(--focus)}
.sbrow .btn{margin-inline-start:auto}
.sbhint{display:block;color:var(--muted);font-size:12.5px;margin-top:10px}
.sbenvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.sbenv{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:12px}
.sbenv-h{display:flex;gap:10px;align-items:center}.sbenv-h .sbi{margin:0}.sbenv-h>div{flex:1;min-width:0}.sbenv-h b{display:block;font-size:15px}.sbenv-h small{color:var(--muted);font-size:12px}
.sbenv-k{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}.sbenv-k b{color:var(--ink);font-size:14px}
.sbenv-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line2);padding-top:10px}.sbenv-a .lnk{margin-inline-start:auto}
.sbgaps{padding:16px 18px}.sbgaps p{margin:0 0 12px;color:var(--ink2);font-size:13.5px}
.sbrep{display:flex;gap:8px;margin-bottom:12px}.sbrep input{flex:1;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit}
.gaptbl{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:10px;max-height:340px;overflow-y:auto}
.gaprow{display:flex;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line2);font-size:13px}.gaprow:first-child{border-top:0}
.gaprow code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gaprow small{color:var(--muted);white-space:nowrap}
.sbempty{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:13px}.sbempty .ic{color:var(--ok)}
.sbname{width:100%;font:inherit;font-size:17px;font-weight:700;color:var(--ink);background:none;border:1px solid transparent;border-radius:7px;padding:2px 6px;margin-inline-start:-6px}
.sbname:hover{border-color:var(--line)}.sbname:focus{outline:none;border-color:var(--pri);box-shadow:var(--focus)}
.sbp-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px;display:flex;flex-direction:column;gap:8px;background:var(--card)}
.sbp-h{display:flex;align-items:center;gap:7px;font-weight:650;font-size:14px}.sbp-h small{color:var(--muted);font-weight:500}.sbp-h .ic{color:var(--muted)}
.sbp-credit{display:flex;gap:12px;align-items:center}.sbp-credit b{display:block;font-size:20px;letter-spacing:-.02em}.sbp-credit small{color:var(--muted);font-size:12px}
.sbp-row small,.sbp-muted{color:var(--muted);font-size:12.5px}
.sbp-btns{display:flex;flex-wrap:wrap;gap:6px}
.sbp-types{display:flex;flex-wrap:wrap;gap:6px}.sbp-types span{font-size:12px;background:var(--bg2);border-radius:6px;padding:2px 8px;color:var(--ink2)}.sbp-types b{color:var(--ink)}
.sbp-code{display:block;text-align:left}
.sbp-tips{margin:0;padding-inline-start:18px;font-size:13px;color:var(--ink2);display:grid;gap:4px}
.sbp-gaps{display:flex;flex-direction:column;gap:5px}.sbp-gaps div{display:flex;gap:6px;align-items:center;font-size:12.5px;min-width:0}.sbp-gaps code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbp-rep{width:100%;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);resize:vertical}
.sbp-rep:focus{outline:none;border-color:var(--pri);box-shadow:var(--focus)}
.sbp-card>.btn,.sbp-card>.lnk{align-self:flex-start}
@media (max-width:980px){.sbhero{grid-template-columns:1fr}.sbtpls{grid-template-columns:1fr}.sbrow input{min-width:0;width:100%}.sbrow label{flex:1 1 100%}.sbrow .btn{margin-inline-start:0;width:100%}}
.sbp-vms{display:flex;flex-direction:column;gap:6px}
.sbp-vm{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.sbp-vm b{font-weight:650}.sbp-vm small{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.sbp-vm .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}.sbp-vm .dot.on{background:var(--ok)}
.sbp-ct{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;border-top:1px solid var(--line2);padding-top:10px}
.sbp-ct label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--ink2);flex:1 1 120px}
.sbp-ct select{height:32px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;padding:0 6px}
.sbp-ct-res{border-radius:8px;padding:8px 10px;font-size:13px;display:flex;flex-direction:column;gap:3px}
.sbp-ct-res.ok{background:var(--ok-50)}.sbp-ct-res.ok b{color:var(--ok)}.sbp-ct-res.bad{background:var(--bad-50)}.sbp-ct-res.bad b{color:var(--bad)}
.sbp-ct-res small{color:var(--muted);font-size:11.5px;text-align:left}
.sbp-mx-h{font-size:12px;font-weight:650;color:var(--ink2);margin-top:4px}
.sbp-mx{border-collapse:collapse;font-size:12px;width:100%}.sbp-mx th,.sbp-mx td{border:1px solid var(--line);padding:4px 6px;text-align:center}.sbp-mx th{background:var(--card2);font-weight:600}
.sbp-mx td.ok{color:var(--ok);font-weight:700}.sbp-mx td.bad{color:var(--bad);font-weight:700}.sbp-mx td.x{color:var(--muted)}

/* ---------- two leftovers from v3 that the cascade still carries ----------
   The toast kept a 4px colored bar down one side while its icon was already the
   state signal, and the check mark popped with an overshoot while every other
   motion in the system uses the same ease-out. Both are overridden rather than
   edited in ui.css, which is how every other v4 correction is layered. */
.toast{border-inline-start:0;padding-inline-start:14px}
.checks li.ok>span{animation:pop .3s cubic-bezier(.2,.8,.2,1)}

/* ============================================================
   Locked content, and the per-question tool scope.

   Locked is not an error, so none of this is red. It reads as "there is more here",
   with the number doing the talking: a quiet card, one lock, and exactly one call to
   action. The rows are deliberately the same shape as the real content rows above
   them, so the eye reads them as the same list continuing behind glass.
   ============================================================ */

.lk {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pri-50) 70%, var(--card)) 0%, var(--card) 72%);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

/* ---------- header ---------- */
.lk-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line2);
}
.lk-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--pri);
  background: var(--pri-100);
}
.lk-ic.big { width: 58px; height: 58px; border-radius: 16px; }
.lk-t { flex: 1; min-width: 0; }
.lk-t b { display: block; font-size: 16px; line-height: 1.35; color: var(--ink); }
.lk-t small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- rows ---------- */
.lk-rows { padding: 6px 8px 8px; }
.lk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink2);
}
.lk-row + .lk-row { box-shadow: inset 0 1px 0 var(--line2); }
.lk-row:hover { background: var(--card2); }
.lk-l { flex: none; display: grid; place-items: center; color: var(--muted); opacity: .75; }
.lk-row b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The number is the argument, so it gets the tabular treatment and never wraps. */
.lk-n {
  flex: none;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink2);
  background: var(--bg2);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.lk-note {
  margin: 0;
  padding: 11px 18px 13px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--line2);
  background: var(--card2);
}
.lk-note .ic { vertical-align: -2px; margin-inline-end: 4px; }

/* ---------- a whole view that is locked ---------- */
.lk-page { padding: 34px 24px 30px; text-align: center; }
.lk-page .lk-ic { margin: 0 auto 16px; }
.lk-page h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.35; color: var(--ink); }
.lk-page p { max-width: 62ch; margin: 0 auto 20px; font-size: 14.5px; line-height: 1.8; color: var(--ink2); }
.lk-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 22px;
}
.lk-facts > div {
  min-width: 118px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}
.lk-facts b { display: block; font-size: 21px; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.lk-facts span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.lk-sign { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); }
.lk-sign a { color: var(--pri); font-weight: 600; }

/* ---------- the strip on the home page ---------- */
.lk-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 6px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--pri-50) 0%, var(--card) 65%);
  box-shadow: var(--sh-sm);
}
.lk-strip > div { flex: 1; min-width: 0; }
.lk-strip b { display: block; font-size: 15px; color: var(--ink); }
.lk-strip small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--muted); }

.lk-cta { flex: none; white-space: nowrap; }

/* A learning path whose lessons are not in this build. */
.lp-lk { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 600; }
.lp-lk .ic { vertical-align: -1px; }

/* A unit card, or a unit in the question filter, that holds locked content. */
.dc-lk { display: inline-flex; align-items: center; color: var(--warn); opacity: .9; }
.qdoms button .ic { margin-inline-start: 4px; vertical-align: -1px; color: var(--warn); opacity: .85; }

/* A nav item that only leads to a locked page says so before it is clicked. */
.lk-nav { position: relative; }
.lk-nav::after {
  content: '';
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
}

/* ============================================================
   First run.

   A progress dashboard shown to someone with no progress is a report that they
   have achieved nothing, and it used to be the first thing on seven pages. These
   pages now lead with one sentence and one action until there is something to
   count. One block, one button: there is exactly one thing to do here.
   ============================================================ */
.start {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--sh-sm);
}
.start-t { flex: 1; min-width: 0; }
.start h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.015em; color: var(--ink); }
.start p { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.8; color: var(--ink2); }
.start-a { flex: none; }

/* The home page's "what to do next" card stands alone before there is a dashboard
   beside it, so it takes the full width rather than leaving a gap where the
   readiness ring used to be. */
.duo.solo { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 760px) {
  .start { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .start-a, .start-a .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   The tools this task opens (src/app-zscope.js), in the task panel.
   ============================================================ */
.tp-scope {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card2);
}
.tp-scope .sub { margin: 0 0 9px; }
.tp-scope-l { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.tp-scope-l .tag { background: var(--pri-100); color: var(--pri2); font-weight: 600; }
.tp-scope small { display: block; margin-bottom: 10px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

@media (max-width: 700px) {
  .lk-top, .lk-strip { flex-wrap: wrap; }
  .lk-cta { width: 100%; justify-content: center; }
  .lk-page { padding: 26px 16px 24px; }
  .lk-facts > div { min-width: 96px; padding: 11px 13px; }
  .lk-row b { white-space: normal; }
}

/* A unit card for content this build does not carry: the row that held its
   progress says what it holds instead. */
.dc-lkt { display: inline-flex; align-items: center; gap: 5px; flex: 1; color: var(--warn); font-weight: 600; }
.seg button .ic { vertical-align: -1px; opacity: .85; color: var(--warn); }

/* ============================================================
   Narrow screens: two rows that could not hold their contents.

   Measured at 375px on the lessons page -- the learning-path header overflowed its
   column by 60px and the path filter by 45px, so the whole page scrolled sideways.
   The header now wraps onto a second line, and the filter scrolls on its own the
   way the top navigation already does, instead of pushing the page with it.
   ============================================================ */
@media (max-width: 760px) {
  .dg-h { flex-wrap: wrap; }
  .dg-h .dg-r {
    min-width: 0;
    flex: 1 0 100%;
    margin-inline-start: 0;
    padding-top: 2px;
  }
}

@media (max-width: 860px) {
  .toolbar { flex-wrap: nowrap; overflow: hidden; }
  .toolbar > .seg {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .toolbar > .seg::-webkit-scrollbar { display: none; }
  .toolbar > .finput { min-width: 0; }
}

/* The sign-in link in the bar at the bottom was a bare 20px-tall anchor, which is
   not a touch target. The account bar styles itself from a runtime <style> that
   lands after this file, so this carries the extra specificity to win. */
#acct-bar a:not(.cta),
#acct-bar button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
}
#acct-bar a:not(.cta):hover,
#acct-bar button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
#acct-bar .cta { display: inline-flex; align-items: center; min-height: 36px; }

/* ===== Simulator: portal + cloud shell (LTR) ===== */
.portal{flex:1;min-height:0;display:flex;flex-direction:column;background:#faf9f8;font-family:"Segoe UI",Arial,sans-serif;font-size:13.5px;line-height:1.45;text-align:left;position:relative}

/* ===== Simulated portal (LTR) ===== */
.pz-top{display:flex;align-items:center;gap:10px;background:#1b2a41;color:#fff;height:42px;padding:0 10px;flex:none}
.pz-burger{background:none;border:0;color:#fff;font-size:18px}
.pz-brand{font-weight:600;cursor:pointer;white-space:nowrap}.pz-brand small{opacity:.6;font-weight:400;margin-left:4px}
.pz-search{flex:1;max-width:520px;margin:0 auto;position:relative}
.pz-search input{width:100%;background:#2c3e5c;border:1px solid #42587d;color:#fff;border-radius:4px;padding:5px 10px}
.pz-search input::placeholder{color:#b8c4d8}
.pz-sr{display:none;position:absolute;top:34px;left:0;right:0;background:#fff;color:#222;border:1px solid #ccc;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:40;max-height:360px;overflow:auto}
.pz-sr-h{font-size:11px;color:#666;padding:6px 10px;background:#f5f5f5}.pz-sr-i{padding:7px 10px;cursor:pointer;display:flex;align-items:center;gap:6px}.pz-sr-i:hover{background:#eef4fb}.pz-sr-i small{color:#777}
.pz-tbtn{background:none;border:0;color:#fff;font-family:Consolas,monospace;font-size:15px;padding:4px 8px;border-radius:4px;position:relative}.pz-tbtn:hover{background:#2c3e5c}
.pz-tbtn i{position:absolute;top:0;right:0;background:#d13438;color:#fff;font-size:9px;border-radius:9px;padding:0 4px;font-style:normal}
.pz-user{font-size:12px;text-align:right;line-height:1.2;white-space:nowrap}.pz-user small{display:block;opacity:.65;font-size:10px}
.pz-body{flex:1;display:flex;min-height:0;position:relative}
.pz-side{width:200px;background:#fff;border-right:1px solid #e1dfdd;overflow:auto;flex:none;padding:6px 0}
.pz-nav{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:13px;color:#323130}.pz-nav:hover{background:#f3f2f1}.pz-nav.on{background:#e8f1fb;font-weight:600;border-left:3px solid #2f7de1;padding-left:9px}
.pz-icon{display:inline-flex;width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:4px}.pz-icon svg{width:100%;height:100%}.pz-icon.big{width:30px;height:30px}
.pz-main{flex:1;overflow:auto;padding:14px 22px 40px;min-width:0}
.pz-crumbs{font-size:12px;color:#605e5c;margin-bottom:8px}.pz-crumbs a{color:#1561b8;cursor:pointer}.pz-crumbs b{color:#a19f9d;margin:0 3px;font-weight:400}
.pz-h1{font-size:20px;font-weight:600;margin:6px 0 12px}.pz-h2{font-size:16px;font-weight:600;margin:24px 0 8px}.pz-h3{font-size:14px;font-weight:600;margin:18px 0 8px;color:#323130}
.pz-p{color:#484644;max-width:820px}
.pz-tiles{display:flex;flex-wrap:wrap;gap:10px}
.pz-tile{width:118px;padding:12px 6px;text-align:center;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px}
.pz-tile:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}.pz-tile.wide{width:360px;flex-direction:row;text-align:left;background:#fff;border:1px solid #e1dfdd;padding:16px}
.pz-head{display:flex;gap:10px;align-items:center;margin-bottom:10px}.pz-head h1{font-size:20px;font-weight:600;margin:0}.pz-head small{color:#605e5c}
.pz-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:6px 0;border-bottom:1px solid #edebe9;margin-bottom:10px}
.pz-btn{background:#fff;border:1px solid #c8c6c4;border-radius:2px;padding:4px 12px;font-size:13px;color:#323130;display:inline-flex;align-items:center;gap:4px;position:relative}
.pz-btn:hover{background:#f3f2f1}.pz-btn.pri{background:#2f6fd0;border-color:#2f6fd0;color:#fff}.pz-btn.pri:hover{background:#255bb0}
.pz-btn.danger{background:#c4314b;border-color:#c4314b;color:#fff}.pz-btn:disabled{opacity:.45;cursor:default}
.pz-btn select{position:absolute;inset:0;opacity:0;cursor:pointer}
.pz-icobtn{background:none;border:0;padding:2px 5px;border-radius:3px;font-size:13px}.pz-icobtn:hover{background:#edebe9}
.pz-filter{border:1px solid #c8c6c4;padding:4px 8px;min-width:220px;margin-left:auto}
.pz-table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
.pz-table th{text-align:left;font-weight:600;color:#323130;padding:6px 8px;border-bottom:1px solid #e1dfdd;white-space:nowrap}
.pz-table td{padding:6px 8px;border-bottom:1px solid #f3f2f1;vertical-align:top}
.pz-table a,.pz-link{color:#1561b8;cursor:pointer}.pz-table a:hover,.pz-link:hover{text-decoration:underline}.pz-link{margin-left:8px;font-size:12.5px}
.pz-table tr.pz-def td{color:#605e5c;background:#fbfbfb}.pz-click{cursor:pointer}.pz-click:hover td{background:#f5f9ff}
.pz-empty{text-align:center;color:#605e5c;padding:40px 10px;background:#fff;border:1px solid #edebe9}.pz-empty .pz-icon{margin:0 auto 8px;display:flex}.pz-empty a{color:#1561b8;cursor:pointer}
.pz-muted{color:#8a8886}.pz-bad{color:#a4262c}.pz-good{color:#107c10}
.pz-tabs{display:flex;gap:2px;border-bottom:1px solid #e1dfdd;margin-bottom:14px;flex-wrap:wrap}
.pz-tabs span{padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;color:#323130}.pz-tabs span.on{border-color:#2f6fd0;font-weight:600}
.pz-subtabs{display:flex;gap:2px;margin:8px 0}.pz-subtabs span{padding:4px 12px;cursor:pointer;border-bottom:2px solid transparent}.pz-subtabs span.on{border-color:#2f6fd0;font-weight:600}
.pz-form{max-width:860px}
.pz-frow{display:grid;grid-template-columns:230px 1fr;gap:12px;align-items:start;margin:8px 0}
.pz-frow>label{padding-top:5px;color:#323130}.pz-frow>label i{color:#a4262c;font-style:normal}
.pz-frow input:not([type=checkbox]):not([type=radio]),.pz-frow select,.pz-mini input{width:100%;max-width:440px;border:1px solid #8a8886;border-radius:2px;padding:5px 8px;font-size:13px;background:#fff}
.pz-frow input:disabled,.pz-frow select:disabled{background:#f3f2f1;color:#605e5c;border-color:#c8c6c4}
.pz-help{color:#605e5c;cursor:help}
.pz-mini{background:#fff;border:1px solid #c8c6c4;padding:10px;margin-top:6px;max-width:440px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.pz-mini label{display:block;margin-bottom:4px}
.pz-row{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.pz-chk{display:inline-flex;gap:5px;align-items:center;margin-right:12px}
.pz-foot{display:flex;gap:8px;border-top:1px solid #e1dfdd;padding-top:12px;margin-top:20px}
.pz-info{background:#f0f6ff;border-left:3px solid #2f7de1;padding:7px 10px;margin:10px 0;color:#323130;max-width:860px}
.pz-warn{background:#fff4ce;border-left:3px solid #c19c00;padding:8px 10px;margin:8px 0}
.pz-valok{background:#dff6dd;color:#107c10;padding:8px 12px;font-weight:600;margin-bottom:10px}.pz-valbad{background:#fde7e9;color:#a4262c;padding:8px 12px;font-weight:600;margin-bottom:6px}
.pz-errbox{background:#fde7e9;border-left:3px solid #a4262c;padding:8px 12px;margin:10px 0;max-width:860px}
.pz-errbox b{color:#a4262c}.pz-errmsg{margin-top:3px;word-break:break-word}
.pz-ar{direction:rtl;text-align:right;background:#fff8ec;border-radius:4px;padding:6px 10px;margin-top:8px;font-family:"Segoe UI",Tahoma,sans-serif;font-size:13.5px;line-height:1.7}
.pz-kv{border-collapse:collapse;background:#fff}.pz-kv td{padding:5px 14px 5px 0;border-bottom:1px solid #f3f2f1}.pz-kv td:first-child{color:#605e5c;min-width:170px}
.pz-space{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#fff;border:1px solid #e1dfdd;padding:8px;margin-bottom:6px;max-width:700px}
.pz-space input{border:1px solid #8a8886;padding:5px 8px;width:200px}.pz-spaceinfo{flex-basis:100%;font-size:12px;color:#605e5c}
.pz-calc{padding-top:5px;font-size:12.5px}
.pz-blade{display:flex;gap:0;background:#fff;border:1px solid #edebe9;min-height:420px}
.pz-bmenu{width:180px;border-right:1px solid #edebe9;padding:6px 0;flex:none}
.pz-bitem{padding:6px 14px;cursor:pointer;font-size:13px}.pz-bitem:hover{background:#f3f2f1}.pz-bitem.on{background:#e8f1fb;font-weight:600}
.pz-bsec{font-size:11px;font-weight:700;color:#605e5c;padding:10px 14px 3px;text-transform:uppercase;letter-spacing:.3px}
.pz-bcontent{flex:1;padding:8px 16px 20px;min-width:0;overflow:auto}
.pz-ess{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;padding:10px 0 14px;border-bottom:1px solid #edebe9}
.pz-ess div{display:grid;grid-template-columns:140px 1fr;gap:6px}.pz-ess span{color:#605e5c}.pz-ess b{font-weight:400;word-break:break-word}.pz-ess a{color:#1561b8;cursor:pointer}
.pz-ns{display:flex;align-items:center;gap:4px;font-family:Consolas,monospace;font-size:12.5px}.pz-copy{border:0;background:#edebe9;border-radius:3px;font-size:11px;padding:0 5px}
.pz-st{padding:1px 7px;border-radius:9px;font-size:12px;background:#edebe9}.pz-st.Connected{background:#dff6dd;color:#107c10}.pz-st.Initiated{background:#fff4ce;color:#8a6d00}.pz-st.Disconnected{background:#fde7e9;color:#a4262c}
.pz-act{font-weight:600}.pz-act.Allow{color:#107c10}.pz-act.Deny{color:#a4262c}
.pz-code{background:#1e1e1e;color:#d4d4d4;padding:12px;font-family:Consolas,monospace;font-size:12px;overflow:auto;max-height:520px;white-space:pre;line-height:1.45}
.pz-flow{padding:10px 14px;margin-top:10px;max-width:600px}.pz-flow.Allow{background:#dff6dd}.pz-flow.Deny{background:#fde7e9}.pz-flow b{font-size:15px}
.pz-dep{background:#fff;border:1px solid #edebe9;padding:20px;max-width:760px}.pz-dep h2{font-size:18px;margin:6px 0 12px}
.pz-okc,.pz-badc{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;background:#107c10}.pz-badc{background:#a4262c}
.pz-spin{width:36px;height:36px;border:4px solid #c7e0f4;border-top-color:#2f6fd0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.pz-scrim{position:absolute;inset:0;background:rgba(0,0,0,.18);z-index:20}
.pz-panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,92%);background:#fff;z-index:21;box-shadow:-6px 0 24px rgba(0,0,0,.2);display:flex;flex-direction:column}
.pz-ph{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px;border-bottom:1px solid #edebe9}.pz-ph h2{margin:0;font-size:18px;font-weight:600}.pz-ph small{color:#605e5c}
.pz-x{background:none;border:0;font-size:16px}.pz-pbody{flex:1;overflow:auto;padding:8px 18px}
.pz-pbody .pz-frow{grid-template-columns:170px 1fr}
.pz-pfoot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid #edebe9}
.pz-modal{position:absolute;inset:0;background:rgba(0,0,0,.3);z-index:30;display:flex;align-items:center;justify-content:center}
.pz-mbox{background:#fff;padding:18px 22px;max-width:620px;width:92%;box-shadow:0 10px 30px rgba(0,0,0,.3)}.pz-mbox h3{margin:0 0 8px}
.pz-tplsum{background:#fff;border:1px solid #e1dfdd;padding:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.pz-edbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}.pz-sep{width:1px;height:22px;background:#c8c6c4;margin:0 4px}
.pz-small{border:1px solid #8a8886;padding:4px 8px;width:170px}
.pz-editor{width:100%;height:360px;font-family:Consolas,monospace;font-size:12.5px;background:#1e1e1e;color:#d4d4d4;border:1px solid #333;padding:10px;resize:vertical;white-space:pre;tab-size:2}
.pz-edstatus{font-size:12.5px;padding:4px 0}
.pz-err{background:#fde7e9;padding:10px}
/* ===== Cloud Shell ===== */
.shell{flex:none;background:#0c0c0c;color:#e5e5e5;font-family:Consolas,"Cascadia Mono","Courier New",monospace;font-size:13px;display:flex;flex-direction:column;border-top:2px solid #2f6fd0;text-align:left}
.shell.open{height:42%}.shell.big{height:78%}.shell.closed{height:30px}
.sh-bar{display:flex;justify-content:space-between;align-items:center;background:#1f1f1f;padding:4px 10px;font-family:"Segoe UI",sans-serif;font-size:12.5px;cursor:default;flex:none}
.shell.closed .sh-bar{cursor:pointer}.sh-bar small{opacity:.6;margin-left:6px}.sh-hint{opacity:.6;font-size:12px}
.sh-btns button{background:none;border:0;color:#ccc;font-size:12px;padding:2px 8px}.sh-btns button:hover{background:#333}
.sh-out{flex:1;overflow:auto;padding:8px 12px;cursor:text}
.sh-l{white-space:pre-wrap;word-break:break-word;line-height:1.45}
.sh-cmd{color:#fff;margin-top:6px}.sh-ps{color:#3ddc84;font-weight:700;margin-right:6px;white-space:nowrap}
.sh-err{color:#ff7b72}.sh-warn{color:#f2cc60}.sh-info{color:#79c0ff}.sh-muted{color:#8b949e}.sh-table{color:#e6edf3}
.sh-hint{color:#ffd58a;font-family:"Segoe UI",Tahoma,sans-serif;direction:rtl;text-align:right;background:#2a2112;border-radius:4px;padding:3px 8px;margin:3px 0}
.sh-ok-ar{color:#7ee787;font-family:"Segoe UI",Tahoma,sans-serif;direction:rtl;text-align:right}
.sh-k{color:#79c0ff}.sh-s{color:#a5d6ff}.sh-n{color:#ffa657}.sh-json{color:#e6edf3}
.sh-inrow{display:flex;align-items:flex-start;margin-top:6px}
.sh-inrow textarea{flex:1;background:transparent;border:0;outline:none;color:#fff;font:inherit;resize:none;padding:0;line-height:1.45;overflow:hidden}
@media (max-width:980px){.pz-side{display:none}.pz-frow{grid-template-columns:1fr}.pz-ess{grid-template-columns:1fr}.pz-bmenu{width:150px}}

.sh-editor{flex:1;background:#1e1e1e;color:#d4d4d4;border:0;outline:none;font:13px Consolas,monospace;padding:10px;resize:none;white-space:pre;tab-size:2}
.sh-up{color:#ccc;font-size:12px;padding:2px 8px;cursor:pointer}.sh-up:hover{background:#333}
.pz-cat{font-size:11px;font-weight:700;color:#605e5c;padding:10px 12px 3px;cursor:pointer;text-transform:uppercase;letter-spacing:.3px}
.pz-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pz-catbox{background:#fff;border:1px solid #edebe9;padding:10px}.pz-catbox b{display:block;margin-bottom:6px}.pz-catbox a{display:flex;align-items:center;gap:4px;padding:3px 0;color:#1561b8;cursor:pointer;font-size:12.5px}.pz-catbox a:hover{text-decoration:underline}
.pz-checks{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow:auto;border:1px solid #edebe9;padding:6px;background:#fff;max-width:520px}
.pz-ta{width:100%;max-width:560px;font-family:Consolas,monospace;font-size:12.5px;border:1px solid #8a8886;padding:6px}
.pz-btn.sim{background:#fff8e6;border-color:#e0b252}
.pz-mbox.wide{max-width:820px}
.pz-browser{border:1px solid #c8c6c4;margin:8px 0;background:#fff}.pz-bbar{background:#f3f2f1;padding:5px 10px;font-size:12px;color:#605e5c;border-bottom:1px solid #e1dfdd;word-break:break-all}.pz-bpage{padding:22px 18px;font-size:18px;white-space:pre-wrap;font-family:"Segoe UI",Arial,sans-serif}
.pz-rolelist{max-height:260px;overflow:auto;border:1px solid #e1dfdd;background:#fff}.pz-roleitem{display:grid;grid-template-columns:22px 1fr;padding:6px 8px;border-bottom:1px solid #f3f2f1;cursor:pointer}.pz-roleitem small{grid-column:2;color:#605e5c}.pz-roleitem.on{background:#e8f1fb}
details summary{cursor:pointer;padding:3px 0;font-weight:600}
.pz-tree{font-family:"Segoe UI",sans-serif}.pz-tree div{padding:3px 0}
.pz-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:8px 0 14px}.pz-kpi div{background:#fff;border:1px solid #edebe9;padding:10px}.pz-kpi b{display:block;font-size:22px;color:#2f6fd0}.pz-kpi span{color:#605e5c;font-size:12px}
.pz-chart{background:#fff;border:1px solid #edebe9;padding:8px;margin:8px 0}
.pz-mail{display:grid;grid-template-columns:300px 1fr;gap:0;background:#fff;border:1px solid #edebe9;min-height:300px}.pz-mail .l{border-right:1px solid #edebe9;max-height:520px;overflow:auto}.pz-mail .it{padding:8px 10px;border-bottom:1px solid #f3f2f1;cursor:pointer}.pz-mail .it.on{background:#e8f1fb}.pz-mail .it b{display:block;font-size:12.5px}.pz-mail .it small{color:#605e5c}.pz-mail .r{padding:14px;white-space:pre-wrap}

.pz-costbar{display:grid;grid-template-columns:200px 1fr 110px;gap:8px;align-items:center;margin:4px 0;max-width:760px}.pz-costbar i{display:block;height:14px;background:#2f6fd0;border-radius:2px}.pz-costbar b{font-weight:600;font-size:12.5px}
/* ---------- simulator polish v3 ---------- */
.pz-top{background:linear-gradient(90deg,#0f2342,#15325f);height:46px;gap:8px;padding:0 10px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.pz-burger{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px}.pz-burger:hover{background:rgba(255,255,255,.1)}
.pz-brand{font-size:14px;letter-spacing:.1px}.pz-brand small{font-size:11px}
.pz-search{display:flex;align-items:center}
.pz-search>.ic{position:absolute;left:10px;color:#a9bbd8;pointer-events:none}
.pz-search input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:6px 10px 6px 32px;height:32px;transition:background .15s,border-color .15s}
.pz-search input:focus{outline:none;background:#fff;color:#1b1a19;border-color:#fff}
.pz-search input:focus::placeholder{color:#8a8886}
.pz-tbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:7px;padding:0}.pz-tbtn:hover{background:rgba(255,255,255,.12)}
.pz-tbtn i{top:2px;right:2px}
.pz-user{display:flex;align-items:center;gap:8px}
.pz-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#6366f1);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.pz-nav{border-radius:6px;margin:1px 6px;padding:6px 10px}.pz-nav.on{border-left:0;padding-left:10px;background:#e8f1fb;color:#0f4fa8}
.pz-tile{border-radius:10px}.pz-tile:hover{box-shadow:0 4px 14px rgba(0,0,0,.1)}
.pz-btn{border-radius:5px}.pz-btn.pri{background:#2563eb;border-color:#2563eb}.pz-btn.pri:hover{background:#1d4ed8}
.pz-catbox,.pz-kpi div,.pz-blade,.pz-empty{border-radius:8px}
.pz-panel{border-radius:12px 0 0 12px}
.pz-mbox{border-radius:12px}
.shell{border-top:0;background:#0b0f17}
.sh-bar{background:#141a26;border-bottom:1px solid #222b3b;padding:5px 10px;gap:10px}
.sh-title{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#e5e7eb}
.sh-title .ic{color:#4ade80}
.sh-title small{opacity:.5;font-weight:400;margin-left:2px}
.sh-mode{display:inline-flex;background:#0b0f17;border:1px solid #2a3446;border-radius:7px;padding:2px;margin-left:4px}
.sh-mode button{border:0;background:none;color:#9aa4b5;font-size:11.5px;font-weight:600;padding:2px 10px;border-radius:5px}
.sh-mode button.on{background:#2563eb;color:#fff}
.sh-mode button:not(.on):hover{color:#fff}
.sh-btns{display:inline-flex;align-items:center;gap:2px}
.sh-btns button,.sh-up{display:inline-flex;align-items:center;gap:5px;border-radius:6px;color:#c3cad6}
.sh-btns button:hover,.sh-up:hover{background:#222b3b;color:#fff}
.sh-btns kbd{font:10px Consolas,monospace;border:1px solid #3a4558;border-radius:4px;padding:0 4px;opacity:.7}
.shell.closed .sh-bar{border-bottom:0}
.sh-out{padding:10px 14px}
.sh-ps{color:#4ade80}
.portal{color:#201f1e;color-scheme:light}.portal code{background:#eef2f7;color:#1b1a19}
/* Cloud Shell lives behind the header icon (like the real portal) */
.shell.closed{display:none}
.pz-tbtn.pz-cs.on{background:rgba(255,255,255,.22);box-shadow:inset 0 -2px 0 #fff}

/* ==========================================================
   Portal skin v5 — Azure-portal-like look (light theme)
   ========================================================== */
.portal{--az:#0078d4;--az2:#106ebe;--azd:#005a9e;--tx:#323130;--tx2:#605e5c;--tx3:#8a8886;--ln:#edebe9;--ln2:#e1dfdd;--in:#8a8886;--hv:#f3f2f1;--sl:#edebe9;
  font-family:"Segoe UI","Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4;color:var(--tx);background:#fff;-webkit-font-smoothing:antialiased}
.portal *{box-sizing:border-box}
.portal a{color:var(--az);cursor:pointer;text-decoration:none}.portal a:hover{text-decoration:underline}
.portal .pz-u{flex:none;display:inline-block;vertical-align:middle}
.portal .pz-icon{display:inline-flex;width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:6px}
.portal .pz-icon svg{width:100%;height:100%}
.portal .pz-icon.big{width:28px;height:28px;margin-right:10px}
.portal .pz-icon.huge{width:72px;height:72px;margin:0 auto 10px}
/* ---------- header ---------- */
.portal .pz-top{display:flex;align-items:center;gap:0;height:40px;padding:0;background:var(--az);color:#fff;flex:none;box-shadow:none;position:relative;z-index:30}
.portal .pz-tbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:0;background:transparent;color:#fff;padding:0;position:relative;font:inherit}
.portal .pz-tbtn:hover{background:var(--az2)}.portal .pz-tbtn:active{background:var(--azd)}
.portal .pz-tbtn i{position:absolute;top:5px;right:5px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#fff;color:var(--az);font:600 10px/15px "Segoe UI",sans-serif;font-style:normal;text-align:center}
.portal .pz-burger{width:48px}
.portal .pz-brand{font-size:15px;font-weight:600;color:#fff;cursor:pointer;white-space:nowrap;padding:0 14px 0 4px;display:inline-flex;align-items:center;gap:8px;height:40px}
.portal .pz-brand:hover{text-decoration:none}
.portal .pz-simtag{font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;border:1px solid rgba(255,255,255,.55);border-radius:3px;padding:0 5px;line-height:15px;opacity:.85}
.portal .pz-search{flex:1;max-width:640px;margin:0 auto;position:relative;display:flex;align-items:center}
.portal .pz-search>.pz-u{position:absolute;left:10px;color:#323130;opacity:.75;pointer-events:none}
.portal .pz-search input{width:100%;height:28px;border:1px solid transparent;border-radius:2px;background:rgba(255,255,255,.72);color:#323130;padding:0 10px 0 32px;font:13px "Segoe UI",sans-serif;outline:none;transition:background .1s}
.portal .pz-search input::placeholder{color:#323130;opacity:.85}
.portal .pz-search input:hover{background:rgba(255,255,255,.85)}
.portal .pz-search input:focus{background:#fff;border-color:#fff;box-shadow:0 0 0 1px var(--azd) inset}
.portal .pz-tright{display:flex;align-items:center;margin-left:auto;padding-left:8px}
.portal .pz-user{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 8px;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer;text-align:right}
.portal .pz-user:hover{background:var(--az2)}
.portal .pz-utxt{line-height:1.15;font-size:13px;white-space:nowrap}
.portal .pz-utxt small{display:block;font-size:10px;font-weight:600;letter-spacing:.2px;opacity:.9}
.portal .pz-av{width:28px;height:28px;border-radius:50%;background:#c8c6c4;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex:none;border:1px solid rgba(255,255,255,.4)}
.portal .pz-av.big{width:64px;height:64px;font-size:22px;background:#0078d4}
/* search dropdown */
.portal .pz-sr{display:none;position:absolute;top:34px;left:0;right:0;background:#fff;color:var(--tx);border:0;box-shadow:0 6.4px 14.4px rgba(0,0,0,.13),0 1.2px 3.6px rgba(0,0,0,.11);z-index:60;max-height:70vh;overflow:auto;padding:0 0 8px}
.portal .pz-sr-tabs{display:flex;gap:18px;padding:10px 14px 0;border-bottom:1px solid var(--ln);font-size:13px}
.portal .pz-sr-tabs span{padding:6px 0;border-bottom:2px solid transparent;color:var(--tx)}.portal .pz-sr-tabs span.on{border-color:var(--az);font-weight:600}
.portal .pz-sr-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:4px 8px}
.portal .pz-sr-sec{padding:6px 0}
.portal .pz-sr-h{font-size:14px;font-weight:600;color:var(--tx);padding:6px 8px;background:none}
.portal .pz-sr-i{display:flex;align-items:center;gap:2px;padding:6px 8px;cursor:pointer;border-radius:2px}
.portal .pz-sr-i:hover{background:var(--hv)}.portal .pz-sr-i small{color:var(--tx2);margin-left:auto;padding-left:8px}
.portal .pz-sr-empty{grid-column:1/-1;padding:18px 8px;color:var(--tx2)}
/* ---------- body / panes ---------- */
.portal .pz-body{flex:1;display:flex;min-height:0;position:relative;background:#fff}
.portal .pz-main{flex:1;overflow:auto;padding:0 24px 0 24px;min-width:0;position:relative}
.portal .pz-crumbs{font-size:13px;color:var(--tx2);margin:0;padding:9px 0 6px;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.portal .pz-crumbs a{color:var(--az)}.portal .pz-crumbs b{display:inline-flex;color:var(--tx2);margin:0 4px;font-weight:400}
.portal .pz-crumbs>span{color:var(--tx2)}
.portal .pz-head{display:flex;align-items:flex-start;gap:0;margin:4px 0 10px;position:relative;padding-right:36px}
.portal .pz-head>.pz-icon.big{width:30px;height:30px;margin:3px 10px 0 0}
.portal .pz-head h1{font-size:20px;font-weight:600;margin:0;line-height:28px;color:var(--tx);display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.portal .pz-head small{display:block;color:var(--tx2);font-size:12px;line-height:16px}
.portal .pg-create .pz-head>.pz-icon,.portal .pg-deploy .pz-head>.pz-icon{display:none}
.portal .pg-create .pz-head h1,.portal .pg-deploy .pz-head h1{font-size:20px}
.portal .pz-hacts{display:inline-flex;align-items:center;margin-left:10px}
.portal .pz-hb{border:0;background:none;color:var(--tx);width:28px;height:28px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.portal .pz-hb:hover{background:var(--hv)}
.portal .pz-hx{position:absolute;right:0;top:2px;border:0;background:none;width:32px;height:32px;border-radius:2px;color:var(--tx);display:flex;align-items:center;justify-content:center}
.portal .pz-hx:hover{background:var(--hv)}
.portal .pz-h1{font-size:20px;font-weight:600;margin:10px 0 14px}.portal .pz-h2{font-size:16px;font-weight:600;margin:22px 0 10px}.portal .pz-h3{font-size:15px;font-weight:600;margin:20px 0 8px;color:var(--tx)}
.portal .pz-p{color:var(--tx);max-width:900px;margin:6px 0 10px;line-height:1.5}
.portal .pz-muted{color:var(--tx2)}.portal .pz-good{color:#107c10}.portal .pz-bad{color:#a4262c}
.portal .pz-u.ok{color:#107c10}.portal .pz-u.bad{color:#a4262c}.portal .pz-u.inf{color:var(--az)}
/* fresh blade: loading dots then content */

/* ---------- command bar ---------- */
.portal .pz-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding:2px 0;margin:0 0 8px;border-bottom:0;min-height:36px}
.portal .pz-bar .pz-btn,.portal .pz-bar .pz-btn.pri,.portal .pz-bar .pz-btn.pz-simbtn{background:transparent;border:0;border-radius:2px;color:var(--tx);height:32px;padding:0 8px;font-size:13px;gap:6px}
.portal .pz-bar .pz-btn:hover:not(:disabled){background:var(--hv)}
.portal .pz-bar .pz-btn .pz-u.cmd{color:var(--az)}
.portal .pz-bar .pz-btn:disabled{color:#a19f9d;opacity:1}.portal .pz-bar .pz-btn:disabled .pz-u.cmd{color:#a19f9d}
.portal .pz-bar .pz-btn.danger{color:#a4262c}
.portal .pz-bar .pz-btn.pz-simbtn{color:#8a5a00}.portal .pz-bar .pz-btn.pz-simbtn .pz-u{color:#c19c00}
.portal .pz-sep{width:1px;height:20px;background:var(--ln2);margin:0 6px;display:inline-block}
.portal .pz-bar .pz-muted{margin-left:8px}
.portal .pz-bar input.pz-filter{margin-left:8px}
/* ---------- buttons ---------- */
.portal .pz-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:26px;padding:0 14px;border:1px solid var(--in);border-radius:2px;background:#fff;color:var(--tx);font:13px "Segoe UI",sans-serif;font-weight:400;cursor:pointer;white-space:nowrap;position:relative}
.portal .pz-btn:hover:not(:disabled){background:var(--hv)}
.portal .pz-btn.pri{background:var(--az);border-color:var(--az);color:#fff;font-weight:600}
.portal .pz-btn.pri:hover:not(:disabled){background:var(--az2);border-color:var(--az2)}
.portal .pz-btn.pri .pz-u.cmd{color:#fff}
.portal .pz-btn.danger{background:#a4262c;border-color:#a4262c;color:#fff}
.portal .pz-btn:disabled{background:#f3f2f1;border-color:#f3f2f1;color:#a19f9d;cursor:default}
.portal .pz-btn select{position:absolute;inset:0;opacity:0;cursor:pointer}
.portal .pz-icobtn{border:0;background:none;width:26px;height:26px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;color:var(--tx);padding:0}
.portal .pz-icobtn:hover{background:var(--hv)}.portal .pz-icobtn .pz-u{color:var(--tx)}
.portal .pz-link{color:var(--az);font-size:13px;margin-left:8px;cursor:pointer}
.portal .pz-lk{display:inline-flex;color:var(--tx2);vertical-align:-2px;margin-right:3px}
/* ---------- portal menu flyout ---------- */
.portal .pz-fly{position:absolute;top:0;left:0;bottom:0;width:260px;background:#fff;z-index:26;box-shadow:6px 0 18px rgba(0,0,0,.18);overflow:auto;padding:6px 0;animation:pzfly .16s ease}
@keyframes pzfly{from{transform:translateX(-24px)}to{transform:none}}
.portal .pz-dock{width:220px;flex:none;border-right:1px solid var(--ln);overflow:auto}.portal .pz-dock .pz-fly{position:static;box-shadow:none;width:auto;animation:none}
.portal .pz-fitem{display:flex;align-items:center;gap:6px;padding:0 16px;height:36px;cursor:pointer;color:var(--tx);font-size:13px}
.portal .pz-fitem:hover{background:var(--hv)}
.portal .pz-fitem.big{height:44px;font-size:14px}
.portal .pz-fitem .pz-icon{margin-right:10px}
.portal .pz-fsec{font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--tx2);padding:12px 16px 4px;text-transform:uppercase}
.portal .pz-scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:20}
.portal .pz-scrim.clear{background:transparent;z-index:24}
/* ---------- top panels / account ---------- */
.portal .pz-tpanel{position:absolute;top:0;right:0;bottom:0;width:min(380px,92%);background:#fff;z-index:27;box-shadow:-6px 0 18px rgba(0,0,0,.16);display:flex;flex-direction:column;animation:pzr .16s ease}
@keyframes pzr{from{transform:translateX(24px)}to{transform:none}}
.portal .pz-tpbar{display:flex;justify-content:space-between;padding:0 20px 8px;border-bottom:1px solid var(--ln)}.portal .pz-tpbar .pz-link{margin:0}
.portal .pz-tpbody{flex:1;overflow:auto;padding:8px 20px 20px}
.portal .pz-acct{position:absolute;top:0;right:0;width:320px;background:#fff;z-index:27;box-shadow:0 6.4px 14.4px rgba(0,0,0,.13),0 1.2px 3.6px rgba(0,0,0,.11)}
.portal .pz-acct-h{display:flex;justify-content:space-between;padding:10px 14px;font-size:12px;color:var(--tx2)}
.portal .pz-acct-b{display:flex;gap:14px;align-items:center;padding:8px 14px 16px}.portal .pz-acct-b b{font-size:16px;display:block}
.portal .pz-acct-f{border-top:1px solid var(--ln);padding:10px 14px;font-size:12px}
/* ---------- notifications ---------- */
.portal .pz-toasts{position:absolute;top:8px;right:12px;z-index:28;display:flex;flex-direction:column;gap:8px;width:360px;pointer-events:none}
.portal .pz-toasts .pz-notif{pointer-events:auto;background:#fff;box-shadow:0 6.4px 14.4px rgba(0,0,0,.13),0 1.2px 3.6px rgba(0,0,0,.11);border-radius:2px;animation:pzr .2s ease}
.portal .pz-notif{display:flex;gap:10px;align-items:flex-start;padding:12px 12px 12px 14px;border-bottom:1px solid var(--ln)}
.portal .pz-toasts .pz-notif{border-bottom:0}
.portal .pz-nb{flex:1;min-width:0}.portal .pz-nb b{display:block;font-size:13px;font-weight:600}.portal .pz-nb p{margin:3px 0 0;color:var(--tx);font-size:12px;line-height:1.45;word-break:break-word}
.portal .pz-nb small{display:block;color:var(--tx2);font-size:11px;margin-top:4px}
.portal .pz-nact{display:flex;gap:8px;margin-top:8px}.portal .pz-nact .pz-btn{height:24px;padding:0 10px;font-size:12px}
.portal .pz-notif .pz-x{border:0;background:none;color:var(--tx);width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0}
.portal .pz-nspin{width:16px;height:16px;border:2px solid #c7e0f4;border-top-color:var(--az);border-radius:50%;display:inline-block;animation:spin .8s linear infinite;flex:none;margin-top:1px}
.portal .pz-nspin.big{width:22px;height:22px}
/* ---------- home ---------- */
.portal .pz-home{max-width:1200px;padding:6px 0 30px}
.portal .pz-hh{font-size:16px;font-weight:600;margin:22px 0 12px;color:var(--tx)}
.portal .pz-svcrow{display:flex;flex-wrap:wrap;gap:4px}
.portal .pz-svc{width:96px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px;text-align:center;cursor:pointer;font-size:12px;line-height:1.3;color:var(--tx);border-radius:2px}
.portal .pz-svc:hover{background:var(--hv)}
.portal .pz-svci{width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.portal .pz-svci .pz-icon.big{width:40px;height:40px;margin:0}
.portal .pz-svci.plus,.portal .pz-svci.more{color:var(--az)}
.portal .pz-card{border:1px solid var(--ln);padding:12px 16px 16px;max-width:1200px}
.portal .pz-pivot{display:flex;gap:22px;border-bottom:1px solid var(--ln);margin-bottom:8px}
.portal .pz-pivot span{padding:6px 0;cursor:pointer;border-bottom:2px solid transparent;font-size:14px}.portal .pz-pivot span.on{border-color:var(--az);font-weight:600}
.portal .pz-homeempty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px;text-align:center}.portal .pz-homeempty .pz-icon.big{width:48px;height:48px;margin:0 0 6px}.portal .pz-homeempty b{font-size:15px}.portal .pz-homeempty span{color:var(--tx2);margin-bottom:8px}
.portal .pz-navrow{display:flex;flex-wrap:wrap;gap:8px 40px}
.portal .pz-navi{display:flex;align-items:center;gap:2px;cursor:pointer;color:var(--az);padding:6px 8px 6px 0;font-size:13px}.portal .pz-navi:hover span{text-decoration:underline}
.portal .pz-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;max-width:1200px}
.portal .pz-tool{display:flex;gap:4px;cursor:pointer;padding:8px 6px;border-radius:2px}.portal .pz-tool:hover{background:var(--hv)}
.portal .pz-tool b{display:block;color:var(--az);font-weight:400;font-size:13px}.portal .pz-tool span{display:block;color:var(--tx2);font-size:12px;line-height:1.4}
.portal .pz-svcl{display:grid;grid-template-columns:200px 1fr;gap:24px}
.portal .pz-svccats{border-right:1px solid var(--ln);padding-right:8px}
.portal .pz-svcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.portal .pz-svccard{display:flex;align-items:center;gap:2px;padding:8px;border:1px solid var(--ln);cursor:pointer;position:relative}.portal .pz-svccard:hover{background:var(--hv)}
.portal .pz-svccard .pz-icon.big{width:24px;height:24px}
.portal .pz-svccard .fav{margin-left:auto;color:var(--tx3)}
.portal .pz-mklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 18px}
.portal .pz-mk{display:flex;align-items:center;gap:2px;padding:10px 4px;border-bottom:1px solid var(--ln)}.portal .pz-mk b{display:block;font-weight:600;margin-bottom:2px}
.portal .pz-mk .pz-icon.big{width:36px;height:36px;margin-right:12px}
/* ---------- browse list ---------- */
.portal .pz-fbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:2px 0 10px}
.portal .pz-fin{position:relative;display:inline-flex;align-items:center}
.portal .pz-fin .pz-u{position:absolute;left:8px;color:var(--tx2)}
.portal .pz-fin input{height:26px;width:240px;border:1px solid var(--in);border-radius:2px;padding:0 8px 0 26px;font:13px "Segoe UI",sans-serif;outline:none}
.portal .pz-fin input:focus{border-color:var(--az);box-shadow:0 0 0 1px var(--az) inset}
.portal .pz-pill{position:relative;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:12px;background:#f0f6ff;color:var(--tx);font-size:12px;cursor:pointer}
.portal .pz-pill b{font-weight:600}.portal .pz-pill b:first-of-type{font-weight:400}
.portal .pz-pill select{position:absolute;inset:0;opacity:0;cursor:pointer}
.portal .pz-pill button{position:relative;z-index:2;border:0;background:none;padding:0 0 0 4px;display:inline-flex;color:var(--tx)}
.portal .pz-pill.add{background:#fff;border:1px solid transparent;color:var(--az)}.portal .pz-pill.add .pz-u{color:var(--az)}
.portal .pz-count{display:flex;align-items:center;gap:16px;color:var(--tx);font-size:13px;margin:4px 0 6px}
.portal .pz-sp{flex:1}.portal .pz-gsel{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--in);border-radius:2px;height:24px;padding:0 8px;font-size:12px;color:var(--tx)}
.portal .pz-table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
.portal .pz-table th{text-align:left;font-weight:600;color:var(--tx);padding:8px 10px;border-bottom:1px solid var(--ln2);white-space:nowrap;background:#fff}
.portal .pz-table td{padding:7px 10px;border-bottom:1px solid var(--ln);vertical-align:middle}
.portal .pz-table tbody tr:hover td{background:#faf9f8}
.portal .pz-table.az tr.sel td{background:#edebe9}
.portal .pz-table a{display:inline-flex;align-items:center}
.portal .pz-sort{cursor:pointer;user-select:none}.portal .pz-sort span{color:var(--tx2);font-weight:400;margin-left:4px}
.portal .pz-cb{width:32px;padding-right:0!important}
.portal .pz-rmore{width:30px;color:var(--tx2);text-align:center}
.portal .pz-table input:not([type=checkbox]),.portal .pz-table select{width:100%;height:26px;border:1px solid var(--in);border-radius:2px;padding:0 6px;font:13px "Segoe UI",sans-serif}
.portal .pz-bigempty{text-align:center;padding:60px 20px;max-width:560px;margin:0 auto}.portal .pz-bigempty h2{font-size:20px;font-weight:600;margin:0 0 8px}.portal .pz-bigempty p{color:var(--tx2);margin:0 0 18px}
.portal .pz-empty{text-align:center;color:var(--tx2);padding:40px 10px;background:#fff;border:0}
.portal .pz-filter{height:26px;border:1px solid var(--in);border-radius:2px;padding:0 8px;min-width:220px;font:13px "Segoe UI",sans-serif;margin-left:auto}
/* ---------- resource blade + menu ---------- */
.portal .pz-blade{display:flex;gap:0;background:#fff;border:0;min-height:calc(100% - 90px);margin:0 -24px 0 -24px;border-top:0}
.portal .pz-bmenu.az{width:236px;flex:none;border-right:1px solid var(--ln);padding:0 0 20px;display:flex;flex-direction:column;background:#fff}
.portal .pz-bmenu.az.min{width:36px;align-items:center;padding-top:6px}
.portal .pz-mexp{border:0;background:none;width:28px;height:28px;border-radius:2px;color:var(--tx)}.portal .pz-mexp:hover{background:var(--hv)}
.portal .pz-msearch{display:flex;align-items:center;gap:2px;padding:6px 6px 8px 16px}
.portal .pz-msbox{flex:1;position:relative;display:flex;align-items:center}
.portal .pz-msbox .pz-u{position:absolute;left:7px;color:var(--tx2)}
.portal .pz-msbox input{width:100%;height:24px;border:1px solid var(--in);border-radius:2px;padding:0 6px 0 24px;font:13px "Segoe UI",sans-serif;outline:none}
.portal .pz-msbox input:focus{border-color:var(--az);box-shadow:0 0 0 1px var(--az) inset}
.portal .pz-msearch button{border:0;background:none;width:24px;height:24px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;color:var(--tx);padding:0}
.portal .pz-msearch button:hover{background:var(--hv)}
.portal .pz-mlist{flex:1}
.portal .pz-mitem{display:flex;align-items:center;gap:0;min-height:30px;padding:4px 10px 4px 16px;cursor:pointer;color:var(--tx);font-size:13px;line-height:1.3;position:relative}
.portal .pz-mitem:hover{background:var(--hv)}
.portal .pz-mitem.on{background:var(--sl);font-weight:600}
.portal .pz-mitem.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--az)}
.portal .pz-mitem.pz-msub{padding-left:36px}
.portal .pz-mitem .pz-icon{margin-right:10px}
.portal .pz-mgh{display:flex;align-items:center;gap:8px;min-height:30px;padding:4px 10px 4px 16px;cursor:pointer;font-size:13px;color:var(--tx)}
.portal .pz-mgh:hover{background:var(--hv)}
.portal .pz-mgh .pz-u{color:var(--tx);margin-right:2px}
.portal .pz-mgrp .pz-mgi{display:none}.portal .pz-mgrp.open .pz-mgi{display:block}
.portal .pz-bcontent{flex:1;padding:4px 24px 30px;min-width:0;overflow:visible}
/* essentials */
.portal .pz-essh{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--ln);margin-bottom:4px}
.portal .pz-essh a{color:var(--tx);font-weight:600;display:inline-flex;align-items:center;gap:8px}.portal .pz-essh a.pz-jv{color:var(--az);font-weight:400}
.portal .pz-ess2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:6px 0}
.portal .pz-er{display:grid;grid-template-columns:190px 14px 1fr;align-items:start;padding:3px 0;font-size:13px}
.portal .pz-er.tags{border-top:0;padding:6px 0 10px;border-bottom:1px solid var(--ln);margin-bottom:12px}
.portal .pz-ek{color:var(--tx)}.portal .pz-ec{color:var(--tx)}.portal .pz-ev{color:var(--tx);word-break:break-word}
.portal .pz-mv{font-size:13px}
.portal .pz-tagc{display:inline-block;background:#f3f2f1;border-radius:2px;padding:0 8px;margin:0 6px 4px 0;line-height:20px;font-size:12px}
.portal .pz-ess{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 40px;padding:8px 0 12px;border-bottom:1px solid var(--ln);margin-bottom:12px}
.portal .pz-ess div{display:grid;grid-template-columns:190px 1fr;gap:6px}.portal .pz-ess span{color:var(--tx)}.portal .pz-ess span::after{content:" :";margin-left:auto}.portal .pz-ess b{font-weight:400}
/* tabs */
.portal .pz-tabs{display:flex;gap:0 26px;border-bottom:1px solid var(--ln);margin:0 0 16px;flex-wrap:wrap}
.portal .pz-tabs span{padding:8px 0;cursor:pointer;border-bottom:2px solid transparent;color:var(--tx);font-size:14px;margin-bottom:-1px}
.portal .pz-tabs span:hover{color:var(--tx);border-bottom-color:#c8c6c4}
.portal .pz-tabs span.on{border-color:var(--az);font-weight:600}
.portal .pz-subtabs{display:flex;gap:20px;margin:8px 0;border-bottom:1px solid var(--ln)}.portal .pz-subtabs span{padding:6px 0;cursor:pointer;border-bottom:2px solid transparent}.portal .pz-subtabs span.on{border-color:var(--az);font-weight:600}
/* ---------- forms ---------- */
.portal .pz-form{max-width:900px;padding-bottom:70px}
.portal .pz-frow{display:grid;grid-template-columns:260px minmax(0,480px);gap:12px;align-items:start;margin:10px 0}
.portal .pz-frow>label{padding-top:4px;color:var(--tx);font-size:13px;line-height:1.4}
.portal .pz-frow>label i{color:#a4262c;font-style:normal}
.portal .pz-frow.pz-indent>label{padding-left:22px;position:relative}
.portal .pz-frow.pz-indent>label::before{content:"";position:absolute;left:6px;top:-14px;width:10px;height:26px;border-left:1px solid #c8c6c4;border-bottom:1px solid #c8c6c4}
.portal .pz-help{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border:1px solid var(--tx2);border-radius:50%;font-size:9px;line-height:1;color:var(--tx2);margin-left:4px;cursor:help;font-style:normal}
.portal .pz-frow input:not([type=checkbox]):not([type=radio]),.portal .pz-frow select,.portal .pz-frow textarea,.portal .pz-mini input,.portal .pz-pbody input:not([type=checkbox]):not([type=radio]),.portal .pz-pbody select,.portal .pz-small{width:100%;max-width:none;height:26px;border:1px solid var(--in);border-radius:2px;padding:0 8px;font:13px "Segoe UI",sans-serif;background:#fff;color:var(--tx);outline:none}
.portal .pz-frow textarea,.portal .pz-ta{height:auto;padding:6px 8px;font:12.5px Consolas,"Courier New",monospace;border:1px solid var(--in);border-radius:2px;width:100%}
.portal select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23323130' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 8px center!important;padding-right:26px!important}
.portal .pz-frow input:hover,.portal .pz-frow select:hover{border-color:var(--tx)}
.portal .pz-frow input:focus,.portal .pz-frow select:focus,.portal .pz-pbody input:focus,.portal .pz-pbody select:focus,.portal .pz-ta:focus{border-color:var(--az);box-shadow:0 0 0 1px var(--az) inset}
.portal .pz-frow input:disabled,.portal .pz-frow select:disabled{background-color:#f3f2f1;color:#a19f9d;border-color:#f3f2f1}
.portal input[type=checkbox],.portal input[type=radio]{accent-color:var(--az);width:15px;height:15px;margin:0 6px 0 0;vertical-align:-3px}
.portal .pz-chk{display:inline-flex;gap:0;align-items:center;margin-right:16px;line-height:24px}
.portal .pz-checks{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow:auto;border:1px solid var(--ln);padding:6px 8px;background:#fff}
.portal .pz-mini{background:#fff;border:0;padding:12px;margin-top:6px;box-shadow:0 6.4px 14.4px rgba(0,0,0,.13),0 1.2px 3.6px rgba(0,0,0,.11);max-width:480px}
.portal .pz-mini label{display:block;margin-bottom:4px}
.portal .pz-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
/* sticky wizard footer */
.portal .pz-foot{position:sticky;bottom:0;z-index:5;display:flex;gap:8px;align-items:center;background:#fff;border-top:1px solid var(--ln);padding:12px 24px;margin:16px -24px 0;}
.portal .pz-foot .pz-btn{height:26px}
/* info / warnings / validation */
.portal .pz-info{background:#f0f6ff;border:0;border-left:0;padding:8px 12px;margin:10px 0;color:var(--tx);max-width:900px;border-radius:2px}
.portal .pz-warn{background:#fff4ce;border-left:0;padding:8px 12px;margin:8px 0;border-radius:2px}
.portal .pz-valok{display:flex;align-items:center;gap:8px;background:#dff6dd;color:var(--tx);padding:8px 12px;font-weight:400;margin-bottom:12px}
.portal .pz-valok::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#107c10;color:#fff;font-size:10px;font-weight:700}
.portal .pz-valbad{display:flex;align-items:center;gap:8px;background:#fde7e9;color:var(--tx);padding:8px 12px;font-weight:400;margin-bottom:6px}
.portal .pz-errbox{display:flex;gap:10px;background:#fde7e9;border-left:0;padding:10px 12px;margin:10px 0;max-width:900px}
.portal .pz-errbox b{color:var(--tx);font-weight:600}.portal .pz-errmsg{margin-top:2px;word-break:break-word}
.portal .pz-ar{direction:rtl;text-align:right;background:#fff8ec;border-radius:2px;padding:6px 10px;margin-top:8px;font-family:"Segoe UI",Tahoma,sans-serif;font-size:13px;line-height:1.7;color:#323130}
.portal .pz-kv{border-collapse:collapse;background:#fff}.portal .pz-kv td{padding:6px 18px 6px 0;border-bottom:1px solid var(--ln)}.portal .pz-kv td:first-child{color:var(--tx2);min-width:200px}
/* ---------- context pane ---------- */
.portal .pz-panel{position:absolute;top:0;right:0;bottom:0;width:min(640px,94%);background:#fff;z-index:21;box-shadow:-8px 0 24px rgba(0,0,0,.18);display:flex;flex-direction:column;border-radius:0;animation:pzr .18s ease}
.portal .pz-ph{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px 10px;border-bottom:0}
.portal .pz-ph h2{margin:0;font-size:20px;font-weight:600;color:var(--tx)}.portal .pz-ph small{color:var(--tx2);font-size:12px}
.portal .pz-x{border:0;background:none;width:32px;height:32px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;color:var(--tx);padding:0;font-size:14px}
.portal .pz-x:hover{background:var(--hv)}
.portal .pz-pbody{flex:1;overflow:auto;padding:4px 20px 16px}
.portal .pz-pbody .pz-frow{grid-template-columns:200px minmax(0,1fr)}
.portal .pz-pfoot{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--ln)}
/* ---------- dialogs ---------- */
.portal .pz-modal{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:40;display:flex;align-items:center;justify-content:center}
.portal .pz-mbox{background:#fff;padding:20px 24px;max-width:560px;width:92%;box-shadow:0 25.6px 57.6px rgba(0,0,0,.22),0 4.8px 14.4px rgba(0,0,0,.18);border-radius:2px}
.portal .pz-mbox.wide{max-width:820px;max-height:86%;overflow:auto}
.portal .pz-mbox h3{margin:0 0 10px;font-size:20px;font-weight:600;display:flex;align-items:center;gap:8px}
.portal .pz-mh{display:flex;justify-content:space-between;align-items:flex-start}
.portal .pz-mf{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
/* ---------- deployment ---------- */
.portal .pz-depst{display:flex;align-items:center;gap:12px;margin:14px 0 14px}
.portal .pz-depst h2{font-size:20px;font-weight:600;margin:0}
.portal .pz-dico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.portal .pz-dico.ok{background:#107c10}.portal .pz-dico.bad{background:#a4262c}.portal .pz-dico.run{background:#fff}
.portal .pz-depkv{display:grid;grid-template-columns:1fr 1fr;gap:4px 40px;max-width:980px;margin-bottom:12px}
.portal .pz-depkv div{display:grid;grid-template-columns:150px 14px 1fr}.portal .pz-depkv b{font-weight:400;display:inline-flex;align-items:center;gap:6px}
.portal .pz-dd{margin:12px 0;border-top:1px solid var(--ln);padding-top:8px;max-width:980px}
.portal .pz-dd summary{list-style:none;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;padding:4px 0}
.portal .pz-dd summary::-webkit-details-marker{display:none}
.portal .pz-dd:not([open]) summary .pz-u{transform:rotate(-90deg)}
.portal .pz-dep{background:#fff;border:0;padding:0}
/* misc existing pieces */
.portal .pz-tiles{display:flex;flex-wrap:wrap;gap:4px}
.portal .pz-tile{width:96px;padding:10px 4px;font-size:12px;border-radius:2px}.portal .pz-tile:hover{background:var(--hv);box-shadow:none}
.portal .pz-cat{font-size:11px;color:var(--tx2)}
.portal .pz-catbox{border:1px solid var(--ln);border-radius:0}
.portal .pz-kpi div{border:1px solid var(--ln);border-radius:0}.portal .pz-kpi b{color:var(--az);font-weight:600}
.portal .pz-chart{border:1px solid var(--ln)}
.portal .pz-code{background:#fff;color:#323130;border:1px solid var(--ln);font:12.5px Consolas,"Courier New",monospace;padding:12px;max-height:560px}
.portal .pz-editor{background:#fff;color:#323130;border:1px solid var(--in);font:12.5px Consolas,"Courier New",monospace}
.portal .pz-st{border-radius:2px}
.portal .pz-mail{border:1px solid var(--ln)}
.portal .pz-browser{border:1px solid var(--ln2)}
.portal .pz-flow{border-radius:2px}
@media (max-width:980px){.portal .pz-utxt,.portal .pz-simtag{display:none}.portal .pz-tright .pz-tbtn:nth-child(4),.portal .pz-tright .pz-tbtn:nth-child(6){display:none}.portal .pz-bmenu.az{width:180px}.portal .pz-er{grid-template-columns:130px 12px 1fr}.portal .pz-ess2{grid-template-columns:1fr}.portal .pz-sr-grid{grid-template-columns:1fr}.portal .pz-svcl{grid-template-columns:1fr}.portal .pz-svccats{display:none}.portal .pz-depkv{grid-template-columns:1fr}}
@media (max-width:700px){.portal .pz-brand{display:none}.portal .pz-bmenu.az{display:none}.portal .pz-frow{grid-template-columns:1fr}.portal .pz-toasts{width:auto;left:12px}}
.portal .pz-bar .pz-btn.pri .pz-u.cmd{color:var(--az)}
.portal .pz-bar .pz-btn:disabled{background:transparent;border:0}
.portal .pz-main.pg-create{display:flex;flex-direction:column}.portal .pg-create .pz-form{flex:1 0 auto;padding-bottom:24px}.portal .pg-create .pz-foot{margin-top:auto}
.portal .pz-intro{margin:0 0 6px}
/* ---------- Cloud Shell (Azure-like) ---------- */
.shell{background:#000;color:#cccccc;font-family:"Cascadia Mono",Consolas,"Courier New",monospace;font-size:13px}
.sh-bar.az{background:#f3f2f1;color:#323130;border-bottom:1px solid #e1dfdd;padding:0 4px 0 6px;height:34px;font-family:"Segoe UI",sans-serif;font-size:13px;gap:4px}
.sh-bar.az .sh-tb{display:flex;align-items:center;gap:0;min-width:0;overflow:hidden;flex-wrap:nowrap}
.sh-bar.az button,.sh-bar.az .sh-up{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px;border:0;border-radius:2px;background:transparent;color:#323130;font:13px "Segoe UI",sans-serif;white-space:nowrap;cursor:pointer}
.sh-bar.az button:hover{background:#e1dfdd;color:#323130}
.sh-bar.az .pz-u{color:#0078d4}
.sh-bar.az .sh-btns .pz-u{color:#323130}
.sh-modesel{position:relative;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid #8a8886;background:#fff;border-radius:2px;margin-right:6px;font-weight:600;min-width:118px;justify-content:space-between}
.sh-modesel .pz-u{color:#323130!important}
.sh-modesel select{position:absolute;inset:0;opacity:0;cursor:pointer}
.sh-vsep{width:1px;height:20px;background:#c8c6c4;margin:0 4px}
.sh-menu{position:relative;display:inline-flex}
.sh-dd{position:absolute;top:30px;left:0;z-index:20;background:#fff;box-shadow:0 6.4px 14.4px rgba(0,0,0,.13),0 1.2px 3.6px rgba(0,0,0,.11);min-width:170px;padding:4px 0;display:flex;flex-direction:column}
.sh-dd a,.sh-dd label{display:flex;align-items:center;gap:8px;padding:7px 12px;color:#323130;cursor:pointer;font-size:13px}
.sh-dd a:hover,.sh-dd label:hover{background:#f3f2f1;text-decoration:none}
.shell.closed .sh-bar{background:#f3f2f1;color:#323130;border-top:1px solid #e1dfdd}
.shell.closed .sh-title .pz-u{color:#0078d4}.shell.closed .sh-hint{color:#605e5c;background:none}
.sh-out{background:#000;padding:8px 12px}
.sh-l{color:#cccccc}.sh-plain{color:#f2f2f2}.sh-muted{color:#9d9d9d}.sh-info{color:#3b8eea}
.sh-cmd{color:#f2f2f2}
.sh-ps{color:#f2f2f2;font-weight:400}.sh-pu{color:#23d18b}
.sh-inrow textarea{color:#f2f2f2;caret-color:#f2f2f2}
.sh-editor{background:#1e1e1e}
.portal .pz-bar .pz-btn.pri{font-weight:400}