/* SHADOWPLAY NEXT / CBT1 — visual language shared with Web Github home.
   Presentation only; all original form IDs, API bindings and behavior preserved. */
@font-face {
  font-family: "GeForce";
  src: url("/Assets/GeForce-Bold-Alt.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}
:root {
  --bg: #000;
  --surface: #111;
  --line: rgba(255,255,255,.105);
  --green: #78b802;
  --bright: #a0dd2e;
  --muted: #bebebe;
  --text: #fff;
  --card: #101010;
  font-family: "Inter","Segoe UI",system-ui,sans-serif;
}
html { scroll-padding-top: 90px; }
body {
  background: #000;
  font-family: "Inter","Segoe UI",system-ui,sans-serif;
  letter-spacing: 0;
  color: #fff;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 37% at 17% 21%, rgba(118,185,0,.075), transparent 83%),
    radial-gradient(ellipse 36% 38% at 84% 42%, rgba(118,185,0,.050), transparent 82%),
    #000;
}
.background-grid {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,.55) 60%,transparent);
}
.page { width: 100%; max-width: 1520px; padding: 0 clamp(20px,4vw,64px); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 70px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  isolation: isolate;
  gap: 22px;
}
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  background: rgba(8,8,8,.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.brand {
  gap: 11px;
  flex: none;
}
.brand-mark {
  font-family: "GeForce",Impact,"Arial Narrow",sans-serif;
  transform: none;
  width: 38px;
  height: 38px;
  font-size: 25px;
  background: #78b802;
  color: #fff;
  border: 0;
  box-shadow: 0 0 24px rgba(118,185,0,.23);
}
.brand-copy strong {
  font-family: "GeForce",Impact,"Arial Narrow",sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .016em;
}
.brand-copy b { color: #78b802; }
.brand-copy small { font-size: 9px; color: #909090; letter-spacing: .21em; }
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px,2.3vw,38px);
  margin: auto;
}
.nav-links a {
  color: #c6c6c6;
  padding: 14px 0;
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .2s ease;
  letter-spacing: .015em;
}
.nav-links a[aria-current="page"], .nav-links a:hover { color: #78b802; }
.nav-links a::after {
  content:"";
  position:absolute;
  bottom:5px;
  left:0;
  width:0;
  height:2px;
  background:#78b802;
  transition: width .25s;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width:100%; }
.environment {
  border: 1px solid rgba(118,185,0,.29);
  color: #a4cf72;
  background: rgba(118,185,0,.045);
  padding: 8px 10px;
  max-width: 240px;
  font-size: 9px;
  letter-spacing: .05em;
  line-height: 1.4;
  text-align: right;
  white-space: normal;
}
.environment .led { box-shadow: 0 0 14px rgba(118,185,0,.8); background:#78b802; flex:none; }
.hero {
  min-height: clamp(510px,64vh,740px);
  display: grid;
  grid-template-columns: minmax(0,1.07fr) minmax(330px,.93fr);
  gap: clamp(28px,5vw,80px);
  align-items: center;
  padding: clamp(60px,8vh,110px) 0 clamp(58px,8vh,92px);
  position: relative;
  max-width: none;
}
.hero::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 16%;
  bottom: 17%;
  width: 2px;
  background: linear-gradient(transparent,rgba(118,185,0,.75),transparent);
  pointer-events: none;
}
.hero-content { min-width:0; z-index:1; }
.hero-announcement {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  padding: 9px 14px;
  border: 1px solid rgba(118,185,0,.4);
  background:rgba(118,185,0,.08);
  font-weight: 750;
  letter-spacing: .10em;
  font-size: 10px;
  color: #d5ead0;
}
.hero-announcement > span:nth-child(2) { color: #78b802; }
.hero-pulse { width: 7px; height:7px; flex: none; background:#78b802; box-shadow:0 0 13px #78b802; border-radius:50%; animation:cbt-pulse 2s ease-in-out infinite; }
@keyframes cbt-pulse { 50% { opacity:.45; box-shadow:0 0 3px #78b802; } }
.eyebrow {
  font-size: 11px;
  color: #78b802;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: 18px;
}
.hero h1 {
  font-family: "GeForce",Impact,"Arial Narrow",sans-serif;
  font-weight: 800;
  font-size: clamp(62px,7.7vw,124px);
  letter-spacing: .009em;
  line-height: .93;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 7px 35px rgba(0,0,0,.4);
}
.hero h1 span { color: #78b802; }
.hero-sub {
  color: #c5c5c5;
  font-size: clamp(14px,1.16vw,17px);
  line-height: 1.75;
  max-width: 590px;
  margin: 28px 0 29px;
}
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; align-items:center; }
.hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-decoration: none;
  font-family: "GeForce",Impact,Arial,sans-serif;
  font-weight:800;
  letter-spacing: .07em;
  font-size:14px;
  min-height: 55px;
  padding: 15px 23px;
  transition: transform .22s,background .2s,border-color .2s,box-shadow .22s;
}
.hero-primary { background: #78b802; color: #080e02; border:1px solid #78b802; box-shadow:0 0 22px rgba(118,185,0,.20); }
.hero-primary:hover { background: #99d628; color: #000; box-shadow:0 0 33px rgba(118,185,0,.33); transform:translateY(-2px); }
.hero-secondary { background:rgba(0,0,0,.5); color:#e1e1e1; border:1px solid #4f4f4f; }
.hero-secondary:hover { color:#78b802; border-color:#78b802; transform:translateY(-2px); }
.hero-tags { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 39px; }
.hero-tags span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  color: #818881;
  border: none;
  border-left: 2px solid rgba(118,185,0,.75);
  padding: 1px 0 1px 11px;
  background: transparent;
}
.hero-visual {
  position: relative;
  border: 1px solid rgba(118,185,0,.34);
  background:
    linear-gradient(155deg,rgba(118,185,0,.085),rgba(5,7,5,.92) 56%,rgba(12,18,9,.86)),
    #070907;
  box-shadow: 0 0 70px rgba(118,185,0,.09), inset 0 0 65px rgba(118,185,0,.025);
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  transform: perspective(900px) rotateY(-2deg);
}
.hero-visual::before {
  content:"";position:absolute;left:-90%;top:0;height:100%;width:40%;pointer-events:none;
  background: linear-gradient(110deg,transparent,rgba(118,185,0,.12),transparent);
  animation:cbt-sheen 7s ease-in-out infinite;z-index:3;
}
@keyframes cbt-sheen { 0%,55% { left:-90% } 100% { left:130% } }
.visual-head,.visual-foot {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding: 16px 19px;position:relative;z-index:2;
  font-size: 9px;font-weight: 750;letter-spacing:.19em;
  color:#9aa198;
}
.visual-head { background:rgba(4,7,3,.85);border-bottom:1px solid rgba(118,185,0,.22); }
.visual-live {color:#78b802;white-space:nowrap;}
.visual-body {
  min-height: clamp(300px,31vw,450px);
  display:flex;align-items:center;justify-content:center;position:relative;
  background:
    radial-gradient(circle at 50% 45%,rgba(118,185,0,.11),transparent 46%),
    repeating-linear-gradient(90deg,transparent 0 34px,rgba(118,185,0,.028) 35px),
    repeating-linear-gradient(0deg,transparent 0 34px,rgba(118,185,0,.026) 35px);
}
.visual-body::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 35%,rgba(0,0,0,.14));
}
.visual-watermark {
  position:absolute;right:-9px;bottom:-18px;opacity:.05;
  font-family:"GeForce",Impact,sans-serif;font-size:clamp(180px,23vw,320px);line-height:1;
  color:#cfff7b;pointer-events:none;
}
.visual-crosshair {position:absolute;top:22px;right:22px;color:#78b802;font-size:16px;font-weight:700;}
.visual-title { text-align:center;display:flex;flex-direction:column;align-items:center;z-index:2;gap:4px; }
.visual-title > span { color:#78b802; font-weight:800; letter-spacing:.3em;font-size:clamp(11px,1.15vw,15px); }
.visual-title > strong { font-family:"GeForce",Impact,"Arial Narrow",sans-serif; font-size:clamp(98px,12vw,194px);line-height:.95;color:#fff;text-shadow:0 0 58px rgba(118,185,0,.25);letter-spacing:.015em; }
.visual-title > strong span { color:#78b802; }
.visual-title > small {letter-spacing:.23em;color:#a6b3a1;font-size:10px;font-weight:800;}
.visual-brackets i {
  display:block;position:absolute;width:27px;height:27px;border:2px solid rgba(118,185,0,.8);
}
.visual-brackets i:nth-child(1){top:22px;left:22px;border-right:0;border-bottom:0}
.visual-brackets i:nth-child(2){top:22px;right:22px;border-left:0;border-bottom:0}
.visual-brackets i:nth-child(3){bottom:22px;left:22px;border-right:0;border-top:0}
.visual-brackets i:nth-child(4){bottom:22px;right:22px;border-left:0;border-top:0}
.visual-progress {display:flex;gap:14px;align-items:center;padding:0 20px 13px;font-size:8px;color:#9da99b;letter-spacing:.15em;white-space:nowrap;font-weight:700;}
.visual-progress b{display:block;flex:1;height:5px;background:#1c2618;overflow:hidden;}
.visual-progress b i{display:block;width:63%;height:100%;background:repeating-linear-gradient(90deg,#78b802 0 20px,#a3e635 20px 23px);box-shadow:0 0 14px #78b802;}
.visual-foot{border-top:1px solid rgba(118,185,0,.2);background:rgba(5,8,4,.84);font-size:8px;color:#767d75;}
.access-flow {margin: 0 0 clamp(55px,7vw,95px);padding-top: 22px;border-top:1px solid rgba(255,255,255,.1);}
.flow-header {display:flex;align-items:center;gap:23px;color:#78b802;font-family:"GeForce",Impact,sans-serif;font-size:14px;letter-spacing:.12em;margin-bottom:28px;white-space:nowrap;}
.flow-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(118,185,0,.34),transparent);}
.flow-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.flow-step {display:flex;gap:18px;align-items:center;min-width:0;border:1px solid #272727;background:linear-gradient(150deg,#131313,#0a0a0a);padding:22px 20px;position:relative;}
.flow-step::before{content:"";height:3px;position:absolute;top:-1px;left:-1px;width:47px;background:#78b802;}
.flow-n{font-family:"GeForce",Impact,sans-serif;color:#78b802;font-size:38px;line-height:1;flex:none;}
.flow-step strong{font-family:"GeForce",Impact,sans-serif;font-size:17px;letter-spacing:.055em;color:#fff;}
.flow-step p{color:#a5a5a5;font-size:12px;line-height:1.55;margin:5px 0 0;}
.workspace {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;margin-bottom:36px;}
.surface {min-height:440px;padding:clamp(23px,2.6vw,40px);border:1px solid #303030;background:linear-gradient(155deg,#141414,#090909 80%);box-shadow:0 18px 60px rgba(0,0,0,.25);}
.surface::before {height:3px;width:110px;background:#78b802;}
.surface-head {margin-bottom:34px;}
.section-number{font-family:"GeForce",Impact,sans-serif;font-size:12px;color:#78b802;letter-spacing:.16em;}
.surface h2 {font-family:"GeForce",Impact,"Arial Narrow",sans-serif;font-size:clamp(28px,2.5vw,38px);letter-spacing:.015em;font-weight:750;}
.supporting{font-size:13px;color:#b7b7b7;}
.pill {color:#d0d0d0;border-color:#414141;background:#0d0d0d;}
.pill.active{background:rgba(118,185,0,.12);border-color:rgba(118,185,0,.58);color:#a4e84b;}
.switcher{background:#080808;border-color:#373737;}
.switch{color:#c0c0c0;}
.switch.active{background:#78b802;color:#000;}
.auth-form input,.apply-form input:not([type=checkbox]),.apply-form select,.apply-form textarea{
  background:#070707;border-color:#383838;min-height:48px;color:#f8f8f8;
}
.auth-form input::placeholder,.apply-form input::placeholder,.apply-form textarea::placeholder{color:#828282;}
.auth-form label,.apply-form label:not(.check-label){color:#dedede;}
.action {background:#78b802;color:#000;font-family:"GeForce",Impact,sans-serif;font-size:14px;letter-spacing:.07em;padding:16px 18px;margin-top:20px;min-height:53px;box-shadow:0 0 0 rgba(118,185,0,0);transition:background .2s,box-shadow .2s;}
.action:hover{background:#a0d93a;box-shadow:0 0 20px rgba(118,185,0,.22);}
.secondary{border-color:#515151;}
.secondary:hover{border-color:#78b802;}
.phase{background:#0d1309;border-color:#36482a;}
.phase-icon{color:#78b802;}
.application-summary{background:#101a0b;border-color:#425e30;}
.account-detail,.device-row{background:#090909;border-color:#343434;}
.account-management{border-color:#383838;}
.small-ghost,.device-remove{background:#0c0c0c;}
.warning-banner {
  margin:0 0 70px;
  color:#c9c9c9;
  border:1px solid rgba(118,185,0,.42);
  border-left:4px solid #78b802;
  background:linear-gradient(90deg,rgba(118,185,0,.1),rgba(10,10,10,.85));
  font-size:12px;
  padding:20px 24px;
}
.warning-banner strong{color:#a8dc4d;}
footer {border-color:#2b2b2b;color:#808080;padding:25px 0 42px;font-size:10px;}
/* Reinforce readable active user/app states without changing JS. */
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #78b802;outline-offset:3px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-visual::before,.hero-pulse{animation:none!important}.hero-actions a{transition:none!important}}
@media (max-width:1180px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(330px,.9fr);gap:32px}
  .hero h1{font-size:clamp(62px,7.8vw,100px)}
  .nav-links{gap:16px}
  .environment{font-size:8px;max-width:165px}
}
@media (max-width:980px){
  .nav-links{gap:14px}
  .nav-links a{font-size:10px}
  .environment{display:none}
  .hero{grid-template-columns:1fr;gap:34px;min-height:0;padding:69px 0}
  .hero h1{font-size:clamp(70px,12vw,110px)}
  .hero-visual{max-width:740px;transform:none;width:100%}
  .visual-body{min-height:300px}
  .visual-title > strong{font-size:clamp(110px,20vw,170px)}
  .workspace{grid-template-columns:1fr}
  .surface{min-height:0}
}
@media (max-width:650px){
  .page{padding:0 18px}
  .site-header{padding:13px 0;min-height:66px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:7px 14px}
  .nav-links{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;gap:23px;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:9px 0 12px;font-size:10px}
  .hero{padding:58px 0 45px}
  .hero-announcement{font-size:9px;margin-bottom:27px}
  .hero h1{font-size:clamp(60px,14.5vw,95px)}
  .hero-sub{font-size:14px;line-height:1.65}
  .hero-actions a{width:100%;justify-content:space-between}
  .hero-tags{gap:9px;margin-top:29px}
  .hero-visual{margin-top:8px}
  .visual-head,.visual-foot{padding:13px;font-size:8px}
  .visual-body{min-height:285px}
  .visual-progress{gap:9px;font-size:7px}
  .flow-steps{grid-template-columns:1fr;gap:10px}
  .flow-step{padding:17px 18px}
  .flow-n{font-size:32px}
  .surface{padding:23px 18px}
  .warning-banner{padding:17px 16px}
  .hero::before{left:-12px}
}
/* Account-action switcher: a lone tab must never render as a full-width CTA slab
   (app.js hides "Create account" while public registration is closed, which used
   to leave one flex:1 green bar spanning the whole card). Compact segmented
   control on both /account/ and /cbt/; presentation only, no DOM/JS changes. */
.switcher { display: inline-flex; width: max-content; max-width: 100%; }
.switch { flex: 0 0 auto; min-width: 150px; padding: 11px 22px; }
/* Web-Github (github.io) card language: labelled chips, technical uppercase
   micro-labels, thin dark borders and corner brackets on every surface. */
.section-number {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(118,185,0,.45);
  background: rgba(118,185,0,.08);
  padding: 7px 11px;
}
.surface { border-color: rgba(255,255,255,.105); }
.surface::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 22px;
  height: 22px;
  border-right: 2px solid rgba(118,185,0,.55);
  border-bottom: 2px solid rgba(118,185,0,.55);
  pointer-events: none;
}
.auth-form label,
.apply-form label:not(.check-label) {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  color: #9fb39a;
}
.management-heading h3,
.account-management h3 { font-family: "GeForce",Impact,"Arial Narrow",sans-serif; letter-spacing: .04em; }