:root{--bg:#070a0f;--panel:#101620;--line:#263243;--text:#edf4ff;--muted:#8fa0b6;--cyan:#36d9ff;--lime:#b8ff42;--red:#ff5b6e}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 75% 0,#10263a 0,transparent 38%),var(--bg);color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;min-height:100vh}
header{height:78px;display:flex;align-items:center;gap:14px;padding:0 max(24px,5vw);border-bottom:1px solid var(--line);background:#080c12cc;backdrop-filter:blur(16px);position:sticky;top:0;z-index:2}
.mark{width:42px;height:42px;border:1px solid var(--cyan);display:grid;place-items:center;font-weight:900;color:var(--cyan);clip-path:polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%)}
header h1{font-size:17px;letter-spacing:.08em;margin:0}
header p{font-size:11px;color:var(--muted);margin:0;letter-spacing:.14em}
.pill{margin-left:auto;border:1px solid var(--line);border-radius:99px;padding:6px 12px;color:var(--muted);font-size:11px}
.pill.ok{color:var(--lime);border-color:#587526}
main{width:min(1500px,92vw);margin:auto}
.hero{min-height:315px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.eyebrow{color:var(--cyan);font:700 11px monospace;letter-spacing:.15em}
.hero h2{font-size:clamp(42px,6vw,80px);line-height:.92;margin:20px 0;font-weight:800;letter-spacing:-.055em}
.hero em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--cyan)}
.hero p{max-width:680px;color:var(--muted);font-size:17px}
.stat{border-left:1px solid var(--line);padding:55px;display:flex;flex-direction:column}
.stat b{font:800 28px monospace;color:var(--lime)}
.stat span{font:11px monospace;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:36px 0}
.grid article{background:linear-gradient(150deg,#121923,#0d121a);padding:28px;min-height:410px}
.step{font:800 12px monospace;color:var(--cyan)}
h3{font-size:22px;margin:8px 0}
.grid p{color:var(--muted);min-height:66px}
label{display:block;color:var(--muted);font-size:12px;margin:13px 0}
input,select{width:100%;margin-top:6px;background:#080c12;border:1px solid var(--line);color:var(--text);padding:12px;border-radius:4px;outline:none}
input:focus,select:focus{border-color:var(--cyan)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drop{border:1px dashed #38536b;padding:30px 18px;text-align:center;cursor:pointer;background:#09111a}
.drop input{display:none}
.drop strong,.drop span{display:block}
.drop strong{color:var(--cyan)}
.drop span{margin-top:5px}
.control{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
button,.button{background:var(--cyan);border:0;padding:13px 20px;color:#031117;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;cursor:pointer;border-radius:3px}
.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.reset{border-color:#75404a;color:#ff9daa}
button:disabled,.disabled{opacity:.35;pointer-events:none}
.control p{color:var(--muted);flex-basis:100%}
.monitor{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);margin:26px 0 60px}
.monitor div{padding:20px;border-right:1px solid var(--line)}
.monitor div:last-child{border:0}
.monitor span,.monitor b{display:block}
.monitor span{font:10px monospace;color:var(--muted)}
.monitor b{font:700 24px monospace;margin-top:5px}
@media(max-width:900px){.grid{grid-template-columns:1fr}
.hero{display:block;padding:60px 0}
.stat{padding:20px 0;border:0}
.monitor{grid-template-columns:1fr 1fr}
.monitor div{border-bottom:1px solid var(--line)}
}
.auto-connect,.preset-summary{border:1px solid #26546a;background:#09151e;padding:16px;margin:18px 0;display:flex;flex-direction:column}
.auto-connect strong,.preset-summary b{color:var(--lime);font:800 13px monospace}
.auto-connect span,.preset-summary span{color:var(--muted);font-size:12px;margin-top:4px}
details{border-top:1px solid var(--line);padding-top:12px}
summary{color:var(--cyan);cursor:pointer;font-size:12px}
#customLabel{display:none}
.progress-track{height:8px;background:#131d29;border:1px solid var(--line);margin-top:26px}
.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--lime));transition:width .5s}
.monitor{grid-template-columns:repeat(7,1fr);margin-top:8px}
.monitor b i{font-style:normal}
.monitor b{font-size:20px}
.assessor{border:1px solid var(--line);background:#0b1119;padding:18px;margin-top:24px}
.assessor-head{display:flex;justify-content:space-between;font:800 12px monospace;color:var(--cyan)}
.assessor p{color:var(--muted);margin:10px 0}
.assessment-track{margin-top:12px}
.assessment-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.assessment-steps span{border:1px solid var(--line);padding:8px;color:#68788c;font:700 10px monospace;text-align:center}
.assessment-steps span.active{color:var(--cyan);border-color:#2d7790}
.assessment-steps span.done{color:var(--lime);border-color:#587526}
.assessor.failed{border-color:#75404a}
.assessor.failed .assessor-head,.assessor.failed #assessmentStage{color:#ff9daa}
.academy{border:1px solid var(--line);background:linear-gradient(145deg,#0d1822,#0a1018);padding:26px;margin:0 0 28px}
.academy-title{display:flex;align-items:center;justify-content:space-between;gap:24px}
.academy-title h3{font-size:28px;margin:8px 0}.academy-title p,.academy>p{color:var(--muted)}
.academy-policy{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line);margin-top:18px;padding-top:8px}
.academy-policy .check{display:flex;align-items:center;gap:10px;padding-top:24px}.academy-policy .check input{width:auto;margin:0}
.academy-stats{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);margin:16px 0}
.academy-stats div{padding:14px;border-right:1px solid var(--line)}.academy-stats div:last-child{border:0}
.academy-stats span,.academy-stats b{display:block}.academy-stats span{font:10px monospace;color:var(--muted)}.academy-stats b{font:700 18px monospace;color:var(--lime);margin-top:4px}
.command-test{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.command-test input{margin:0}
.academy pre{white-space:pre-wrap;background:#070b10;border:1px solid var(--line);padding:14px;color:var(--cyan);min-height:54px}
@media(max-width:1200px){.monitor{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){.academy-title{display:block}.academy-title button{margin-top:12px}.academy-policy,.academy-stats{grid-template-columns:1fr}.academy-stats div{border-right:0;border-bottom:1px solid var(--line)}}

.training-center{margin-top:28px;padding:24px;border:1px solid var(--line,#2c394b);border-radius:20px;background:rgba(9,18,31,.78)}
.training-head{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.training-head h3{margin:.35rem 0 .5rem}.training-toggle{min-width:230px}
.training-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.training-grid article{padding:18px;border:1px solid rgba(130,160,200,.18);border-radius:14px;background:rgba(12,24,40,.72)}
.training-grid article.wide{grid-column:1/-1}
.mini-title{font-size:.72rem;letter-spacing:.13em;color:#9db4cc;font-weight:800}
.provider-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.provider-card{padding:10px;border-radius:10px;border:1px solid rgba(130,160,200,.16);font-size:.82rem}
.provider-card b{display:block;margin-bottom:3px}.provider-card.ok b{color:#65d6a6}.provider-card.off b{color:#e0a46e}
.training-center textarea{width:100%;box-sizing:border-box;resize:vertical;border-radius:10px;padding:10px;background:#071321;color:#dce9f5;border:1px solid rgba(130,160,200,.25)}
.training-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.training-center pre{white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto}
.drop.compact{padding:14px;margin:10px 0}
@media(max-width:800px){.training-grid{grid-template-columns:1fr}.training-grid article.wide{grid-column:auto}.training-head{flex-direction:column}.provider-cards{grid-template-columns:1fr}}


.small-note{font-size:.82rem;opacity:.78;line-height:1.45}
#cloudflareDeployment code{display:inline-block;padding:.2rem .4rem;border-radius:.35rem;background:rgba(120,160,210,.12)}
#cfCommands{min-height:180px}

/* V4.6 exceptionally reactive interaction layer */
:root{--reactive-ok:#9cff41;--reactive-warn:#ffd166;--reactive-bad:#ff6b6b;--reactive-info:#48d8ff}
.reactive-status{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 18px;border-bottom:1px solid rgba(94,220,255,.18);background:rgba(5,15,26,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:.82rem}
.reactive-status-main,.reactive-metrics{display:flex;align-items:center;gap:9px;min-width:0}
.reactive-status-main span:last-child{opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reactive-metrics{font-variant-numeric:tabular-nums;opacity:.72}
.reactive-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.reactive-dot.checking{background:var(--reactive-info);animation:reactivePulse 1.2s infinite}
.reactive-dot.online{background:var(--reactive-ok);box-shadow:0 0 14px rgba(156,255,65,.6)}
.reactive-dot.degraded{background:var(--reactive-warn);box-shadow:0 0 14px rgba(255,209,102,.5)}
.reactive-dot.offline{background:var(--reactive-bad);box-shadow:0 0 14px rgba(255,107,107,.45)}
@keyframes reactivePulse{0%{box-shadow:0 0 0 0 rgba(72,216,255,.45)}70%{box-shadow:0 0 0 10px rgba(72,216,255,0)}100%{box-shadow:0 0 0 0 rgba(72,216,255,0)}}
.reactive-toasts{position:fixed;right:14px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:min(360px,calc(100vw - 28px))}
.reactive-toast{padding:11px 13px;border-radius:12px;background:rgba(7,20,35,.96);border:1px solid rgba(120,180,220,.24);box-shadow:0 12px 32px rgba(0,0,0,.3);animation:toastIn .16s ease-out}
.reactive-toast.ok{border-color:rgba(156,255,65,.4)}.reactive-toast.warn{border-color:rgba(255,209,102,.45)}.reactive-toast.bad{border-color:rgba(255,107,107,.5)}
@keyframes toastIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
button,.secondary,input,select,textarea,.drop{transition:transform .08s ease,opacity .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease}
button:active:not(:disabled){transform:scale(.985)}
button[data-busy="1"]{opacity:.72;cursor:progress}
button[data-busy="1"]::after{content:"";width:12px;height:12px;margin-left:8px;display:inline-block;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .55s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
[data-reactive-highlight="1"]{box-shadow:0 0 0 2px rgba(72,216,255,.18) inset}
html.reduced-motion *,html.reduced-motion *::before,html.reduced-motion *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
@media(max-width:760px){
  .reactive-status{padding:8px 12px;align-items:flex-start}
  .reactive-status-main{flex:1;flex-wrap:wrap;gap:6px}
  .reactive-status-main span:last-child{width:100%;white-space:normal}
  .reactive-metrics{flex-direction:column;align-items:flex-end;gap:2px;font-size:.72rem}
  button,.secondary{min-height:44px}
  input,select,textarea{font-size:16px!important}
}

.runtime-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0 16px}.runtime-summary-card,.runtime-card{border:1px solid rgba(120,180,220,.18);background:rgba(7,18,31,.72);border-radius:12px;padding:12px}.runtime-summary-card b{display:block;font-size:1.35rem}.runtime-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.runtime-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.runtime-card h4{margin:.15rem 0 .35rem}.runtime-meta{font-size:.76rem;opacity:.72;line-height:1.45}.runtime-health{font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:.28rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.12)}.runtime-health.healthy{color:#9cff41}.runtime-health.degraded{color:#ffd166}.runtime-health.unhealthy{color:#ff6b6b}.runtime-health.unknown{color:#48d8ff}.runtime-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.runtime-card-actions button{font-size:.76rem;padding:.45rem .65rem}@media(max-width:850px){.runtime-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.runtime-grid{grid-template-columns:1fr}}

/* V4.16 Master Teacher / Settings / Diagnostics */
.top-tabs{display:flex;gap:8px;padding:12px max(18px,calc((100vw - 1200px)/2));border-bottom:1px solid var(--line);background:#07101a;position:sticky;top:45px;z-index:70}
.tab-button{background:transparent;color:var(--muted);border:1px solid var(--line);padding:10px 14px}.tab-button.active{color:var(--lime);border-color:#557b2f;background:#0c1b17}
.tab-panel{display:none}.tab-panel.active{display:block}.panel-shell{max-width:1200px;margin:0 auto;padding:34px 18px 70px}
.master-teacher{border:1px solid #476c36;background:linear-gradient(145deg,#0b1a18,#09111a);padding:26px;margin:0 0 28px;box-shadow:0 0 50px rgba(130,255,90,.04)}
.master-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.master-head h3{font-size:30px;margin:8px 0}.master-head p{color:var(--muted);max-width:800px}.master-badge{border:1px solid #587d32;color:var(--lime);padding:8px 12px;font:800 11px monospace;white-space:nowrap}
.master-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}.master-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.master-actions #mtRun{font-size:15px;padding:12px 24px}
.module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.module-choice{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:10px;font-size:12px}.module-choice input{width:auto;margin:0}
#mtResult{max-height:360px;overflow:auto;background:#05090d;border:1px solid var(--line);padding:14px;margin-top:14px;white-space:pre-wrap}
.model-portfolio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.model-card{border:1px solid var(--line);padding:14px;background:#07111c}.model-card b{display:block;color:var(--cyan);word-break:break-word}.model-card span{display:block;color:var(--muted);font-size:12px;margin-top:5px}.model-card .license{color:var(--lime);font:700 10px monospace;text-transform:uppercase}
.diagnostic-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.diagnostic-card{border:1px solid var(--line);padding:14px;background:#07111c}.diagnostic-card span{display:block;color:var(--muted);font:10px monospace}.diagnostic-card b{display:block;font-size:20px;margin-top:5px}
@media(max-width:900px){.master-grid,.module-grid,.model-portfolio,.diagnostic-summary{grid-template-columns:1fr 1fr}.top-tabs{overflow:auto}.master-head{display:block}.master-badge{display:inline-block;margin-top:10px}}
@media(max-width:600px){.master-grid,.module-grid,.model-portfolio,.diagnostic-summary{grid-template-columns:1fr}.top-tabs{top:72px}.master-actions{flex-direction:column}.master-actions button{width:100%}}

/* V4.21 dedicated pages + minimal floating navigation */
.floating-menu-button{position:fixed;left:16px;top:16px;z-index:120;width:46px;height:46px;border-radius:14px;padding:0;font-size:22px;display:grid;place-items:center;background:rgba(8,20,34,.94);border:1px solid rgba(120,190,230,.28);box-shadow:0 14px 36px rgba(0,0,0,.32);backdrop-filter:blur(14px)}
.menu-backdrop{position:fixed;inset:0;z-index:109;background:rgba(0,0,0,.46);backdrop-filter:blur(3px)}
.floating-menu{position:fixed;left:14px;top:14px;bottom:14px;z-index:110;width:min(310px,calc(100vw - 28px));padding:14px;border-radius:20px;background:rgba(6,16,28,.98);border:1px solid rgba(115,180,225,.24);box-shadow:0 28px 80px rgba(0,0,0,.5);transform:translateX(calc(-100% - 28px));transition:transform .18s ease;display:flex;flex-direction:column}
.floating-menu.open{transform:translateX(0)}
.floating-menu-head{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 16px;border-bottom:1px solid var(--line)}
.floating-menu-head b{display:block;font-size:18px;margin-top:4px}.menu-close{width:38px;height:38px;border-radius:12px;padding:0;background:transparent;border:1px solid var(--line);font-size:24px}
.menu-nav{display:grid;gap:7px;padding:14px 0}.menu-nav .tab-button{width:100%;display:flex;gap:11px;align-items:center;text-align:left;border-radius:12px;padding:12px 13px}.menu-nav .tab-button span{width:20px;text-align:center;color:var(--cyan)}
.menu-nav .tab-button.active{color:var(--lime);border-color:rgba(156,255,65,.28);background:rgba(156,255,65,.06)}
.floating-menu-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:12px 5px 4px;color:var(--muted);font-size:11px}
.dedicated-shell{max-width:1120px}.page-intro{padding:18px 4px 22px}.page-intro h2{font-size:clamp(30px,5vw,48px);margin:7px 0 8px;letter-spacing:-.04em}.page-intro p{max-width:720px;color:var(--muted);font-size:15px;line-height:1.6}
#tab-master .master-teacher{margin-top:0}.dedicated-panel .academy,.dedicated-panel .training-center{margin-top:0}
#tab-master .grid{margin-top:18px}
#tab-master .grid article:nth-child(2),#tab-master .grid article:nth-child(3){opacity:.92}
@media(max-width:760px){.floating-menu-button{left:10px;top:10px;width:42px;height:42px}.floating-menu{left:8px;top:8px;bottom:8px;width:calc(100vw - 16px)}header{padding-left:62px}.page-intro{padding-top:10px}.page-intro h2{font-size:34px}}