/* LEGI STUDIO 16.1.0 — CSS 3D fallback + shared Three.js WebGL renderer.
   Geometry, perspective and lighting are live HTML/CSS, not a background mockup. */
html.legi-step16 {
  --ls16-cyan:#25dfff; --ls16-blue:#14bfd2; --ls16-white:#fff; --ls16-ink:#031126;
  --ls16-bg:#f4f8ff; --ls16-soft:#eaf2ff; --ls16-panel:#fff;
  --ls16-text:#102449; --ls16-muted:#526989; --ls16-line:#d4e2f6;
  --ls16-accent:#1261d8; --ls16-shadow:0 12px 32px #1642890d;
  --bg:var(--ls16-bg); --bg-soft:var(--ls16-soft); --surface:var(--ls16-panel);
  --surface-solid:var(--ls16-panel); --surface-raised:var(--ls16-soft); --surface-soft:var(--ls16-soft);
  --text:var(--ls16-text); --muted:var(--ls16-muted); --border:var(--ls16-line);
  --cyan:var(--ls16-cyan); --cyan-dark:var(--ls16-accent); --cyan-soft:#299aff12;
  --border-strong:#3eafff; --shadow:var(--ls16-shadow); --shadow-soft:var(--ls16-shadow);
  --legi-neon:#24dfff; --legi-blue:#14bfd2; --legi-violet:#0aaabd; --legi-purple:#0a94a6;
  --radius:14px; --radius-lg:22px; --container:1320px;
  --motion-ease:cubic-bezier(.2,.8,.2,1); --motion-spring:cubic-bezier(.18,.9,.25,1.16);
  background:var(--bg); color-scheme:light;
}
html.legi-step16[data-theme="dark"] {
  --ls16-bg:#020a18; --ls16-soft:#0c1c36; --ls16-panel:#071326;
  --ls16-text:#f1f6ff; --ls16-muted:#9eafcb; --ls16-line:#20385b;
  --ls16-accent:#60daff; --ls16-shadow:0 14px 36px #0005; color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  html.legi-step16[data-theme="auto"] {
    --ls16-bg:#020a18; --ls16-soft:#0c1c36; --ls16-panel:#071326;
    --ls16-text:#f1f6ff; --ls16-muted:#9eafcb; --ls16-line:#20385b;
    --ls16-accent:#60daff; --ls16-shadow:0 14px 36px #0005; color-scheme:dark;
  }
}
html.legi-step16 body {
  background:radial-gradient(ellipse at 90% 0%,#1279ff0c,transparent 48%),var(--bg);
  color:var(--text); font-size:14px; line-height:1.6; overflow-x:clip;
}
html.legi-step16 body::before { opacity:.06; background-size:80px 80px; }
html.legi-step16 :is(h1,h2,h3) { letter-spacing:-.035em; line-height:1.2; }
html.legi-step16 h1 { font-size:clamp(1.6rem,2.2vw,2.3rem); }
html.legi-step16 h2 { font-size:clamp(1.1rem,1.55vw,1.5rem); }
html.legi-step16 :is(.card,.step5-card,.step5-hero,.service-card,.stat-card,.workspace-card,.eco-product,.license-card) {
  border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(135deg,#2497ff06,transparent 60%),var(--surface);
  box-shadow:var(--shadow); min-width:0;
}
html.legi-step16 :is(.card,.service-card,.stat-card,.feature-card):hover { border-color:#3c81bb; }
html.legi-step16 :is(.card,.service-card,.stat-card,.feature-card) { transform:none; }
html.legi-step16 .eyebrow { font-size:10px; letter-spacing:.11em; color:var(--cyan-dark); }
html.legi-step16 .btn {
  min-height:42px; border-radius:9px; border:1px solid var(--border-strong); padding:10px 18px;
  background:var(--surface); color:var(--text); font-size:12px; line-height:1.5;
  box-shadow:0 3px 0 #0001; transition:box-shadow .2s,border-color .2s,transform .28s var(--motion-spring);
}
html.legi-step16 .btn-primary {
  color:#fff; background:linear-gradient(108deg,#1850ed 0%,#167dff 56%,#1fd5f8 100%);
  border-color:#54baff; box-shadow:0 5px 20px #207aff40,inset 0 1px 1px #fff5; animation:none;
}
html.legi-step16 .btn-danger { color:var(--danger); background:var(--danger-soft); border-color:var(--danger); }
html.legi-step16 .btn:hover { box-shadow:0 7px 24px #168eff40; }
html.legi-step16 :is(.icon-btn,.balance-button) { border-radius:9px; background:var(--surface); }
html.legi-step16 :is(.input,select,textarea) { border-radius:8px; min-height:42px; background:var(--surface); }
html.legi-step16 :is(.input,select,textarea):focus { border-color:#2caaff; box-shadow:0 0 0 3px #158bff20; transform:none; }
html.legi-step16 :focus-visible { outline:3px solid var(--cyan-dark); outline-offset:4px; }
html.legi-step16 [hidden] { display:none!important; }
.ls15-mobile-nav,.ls16-mobile-nav { display:none!important; }

/* Motion is tied to actual pointer events, independent of display width.
   Header/table/form panels only get light. Only selected tiles own transform. */
html.legi-step16 [data-ls16-surface] { position:relative; transition:border-color .22s,box-shadow .3s,transform .45s var(--motion-ease); }
html.legi-step16 [data-ls16-surface]::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(350px circle at var(--motion-px,50%) var(--motion-py,50%),#37b9ff18,transparent 72%);
  opacity:0; transition:opacity .24s; z-index:1;
}
html.legi-step16 [data-ls16-surface][data-motion-hover]::after { opacity:1; }
html.legi-step16 [data-ls16-tilt] {
  transform:perspective(1000px) rotateX(var(--motion-rx,0deg)) rotateY(var(--motion-ry,0deg));
  transform-origin:center; transition:transform .38s var(--motion-ease),box-shadow .25s,border-color .25s;
}
html.legi-step16 [data-ls16-tilt][data-motion-hover] { box-shadow:0 16px 32px #006ac226,0 0 0 1px #3caeff55; }
html.legi-step16 [data-ls16-button] { transform:translate(var(--motion-mx,0px),var(--motion-my,0px)); }
html.legi-step16 .ls16-pressed { box-shadow:0 0 0 3px #2ec9ff55,0 0 28px #239fff42; }
html.legi-step16 [data-ls16-button]:active { scale:.975; }
.ls16-enter { animation:ls16-enter .5s var(--motion-ease) var(--entry-delay,0ms) backwards; }
@keyframes ls16-enter { from { opacity:.25; } to { opacity:1; } }

/* Three.js layer: one transparent fixed WebGL canvas renders every visible model via scissor viewports.
   It never receives pointer events; the semantic .ls16-model element remains the interaction target. */
.ls16-three-stage {
  position:fixed; inset:0; width:100vw; height:100vh; z-index:8; pointer-events:none;
  background:transparent; contain:strict; opacity:1; transition:opacity .18s ease;
}
html.legi-step16 .dashboard-topbar,html.legi-step16 .sidebar,html.legi-step16 .site-header { isolation:isolate; }
.ls16-model.ls16-three-ready .ls16-kinetic { opacity:0; visibility:hidden; }
.ls16-model.ls16-three-ready .ls16-model-floor { opacity:.24; filter:blur(5px); }
.ls16-model.ls16-three-ready::after {
  content:""; position:absolute; inset:12% 3% 5%; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse,#1a94ff32 0%,#0d62ff18 36%,transparent 72%);
  filter:blur(8px); opacity:.82; transition:opacity .2s ease,transform .22s var(--motion-ease);
}
.ls16-model.ls16-three-ready.is-active::after { opacity:1; transform:scale(1.12); }
html.legi-step16.ls16-save-data .ls16-three-stage { display:none!important; }
@media (max-width:759px) { .ls16-three-stage { display:none!important; } .ls16-model.ls16-three-ready .ls16-kinetic { opacity:1; visibility:visible; } }

/* Five model families. Float / user tilt / click spin each use a different layer. */
.ls16-model {
  --size:88px; --depth:calc(var(--size) / 2); --model-blue:#1d6aff;
  display:block; position:relative; isolation:isolate; width:calc(var(--size) * 1.6); height:calc(var(--size) * 1.9);
  perspective:900px; flex:none; cursor:pointer; touch-action:pan-y; border-radius:18px;
}
.ls16-model * { box-sizing:border-box; pointer-events:none; }
.ls16-model-float,.ls16-model-turn,.ls16-kinetic,.ls16-mesh { position:absolute; width:var(--size); height:var(--size); transform-style:preserve-3d; }
.ls16-kinetic { inset:0; will-change:transform,filter; transition:transform .16s var(--motion-ease),filter .2s ease; }
.ls16-model-float { left:calc(50% - var(--size) / 2); top:23%; animation:ls16-float 6s ease-in-out infinite; }
.ls16-model-turn { transform:rotateX(var(--motion-rx,0deg)) rotateY(var(--motion-ry,0deg)); transition:transform .45s var(--motion-ease); }
.ls16-mesh { transform:rotateX(-19deg) rotateY(-32deg); }
.ls16-face {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9%; border:1.5px solid #82e8ff; border-radius:3px; color:#efffff;
  background:linear-gradient(135deg,#4bdcff66,#0759ff8c 48%,#082662cc);
  box-shadow:inset 0 0 24px #5ed6ff40,0 0 9px #259bff8a; backface-visibility:visible;
}
.ls16-face::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(40deg,transparent 49.6%,#9ff5ff40 50%,transparent 50.5%); }
.ls16-face svg,.ls16-face img { width:35%; height:35%; color:#b8f7ff; filter:drop-shadow(0 0 7px #39bcff); }
.ls16-scene-core .ls16-face b { font-size:calc(var(--size) * .12); }
.ls16-face b { display:block; font-size:calc(var(--size) * .105); max-width:90%; text-align:center; line-height:1.15; overflow-wrap:anywhere; }
.face-front { transform:translateZ(var(--depth)); }
.face-back { transform:rotateY(180deg) translateZ(var(--depth)); }
.face-left { transform:rotateY(-90deg) translateZ(var(--depth)); background:linear-gradient(145deg,#0066cbb3,#020d52b3); }
.face-right { transform:rotateY(90deg) translateZ(var(--depth)); background:linear-gradient(145deg,#1fc7ff80,#0653ded9); }
.face-top { transform:rotateX(90deg) translateZ(var(--depth)); background:linear-gradient(145deg,#b0f6ff8c,#20bcff80); }
.face-bottom { transform:rotateX(-90deg) translateZ(var(--depth)); }
.ls16-model-floor { position:absolute; width:90%; height:25%; left:5%; bottom:0; background:radial-gradient(ellipse,#057eff6b,transparent 70%); pointer-events:none; }
.ls16-model:not([data-ls16-waapi="1"]).is-active .ls16-kinetic { animation:ls16-kinetic-launch .86s var(--motion-spring); }
.ls16-model:not([data-ls16-waapi="1"]).is-active .ls16-mesh { animation:ls16-energy-material .86s ease-out; }
.ls16-model[data-motion-hover] .ls16-face { border-color:#deffff; }
@keyframes ls16-float { 50% { transform:translateY(-10px); } }
@keyframes ls16-kinetic-launch { 0%,100% { transform:translate3d(0,0,0) translateZ(0) scale(1) rotateZ(0deg); } 12% { transform:translate3d(0,4px,0) translateZ(-10px) scale(.91); } 46% { transform:translate3d(0,-18px,0) translateZ(52px) scale(1.16) rotateZ(-4deg); } 76% { transform:translate3d(0,5px,0) translateZ(12px) scale(.975) rotateZ(2deg); } }
@keyframes ls16-energy-material { 0%,100% { filter:brightness(1) saturate(1); } 48% { filter:brightness(1.58) saturate(1.45) drop-shadow(0 0 24px #21cbd9); } 80% { filter:brightness(1.08) saturate(1.08) drop-shadow(0 0 8px #43dfff); } }
.model-portal .ls16-mesh { height:140%; top:-15%; transform:rotateY(-22deg) rotateZ(3deg); }
.ls16-portal-back,.ls16-portal-door { position:absolute; inset:0; border:3px solid #68dfff; border-radius:7px; box-shadow:0 0 20px #1475ff,inset 0 0 14px #248bff; }
.ls16-portal-back { transform:translateZ(-22px) translate(-20%,-8%); background:linear-gradient(140deg,#09183b,#061326); }
.ls16-portal-door { display:flex; flex-direction:column; justify-content:center; gap:8%; padding:14%; color:white; background:linear-gradient(145deg,#105bf1b3,#07143be6); transform:translateZ(15px); }
.ls16-portal-door small { font-size:calc(var(--size) * .1); color:#b6f6ff; }
.ls16-portal-door strong { font-size:calc(var(--size) * .19); line-height:1.3; letter-spacing:-.03em; }
.ls16-portal-door > span { font-size:calc(var(--size) * .075); white-space:nowrap; letter-spacing:.04em; }
.model-portal:not([data-ls16-waapi="1"]).is-active .ls16-mesh { animation:ls16-energy-material .86s ease-out; }
.ls16-shield-back,.ls16-shield-front { position:absolute; inset:-10% 0; clip-path:polygon(50% 0,96% 20%,93% 65%,77% 83%,50% 100%,23% 83%,7% 65%,4% 20%); }
.ls16-shield-back { background:#1356d3; transform:translateZ(-14px) translate(8%,5%); }
.ls16-shield-front { display:grid; place-items:center; background:linear-gradient(135deg,#b8faff,#2196ff 17%,#114dde 48%,#60eaff); }
.ls16-shield-front::before { content:""; position:absolute; inset:6%; background:linear-gradient(140deg,#163c87,#011235); clip-path:inherit; }
.ls16-shield-front svg { width:50%; height:50%; color:#80eaff; position:relative; filter:drop-shadow(0 0 8px #2986ff); }
.ls16-profile-back,.ls16-profile-front { position:absolute; inset:0; border:2px solid #8fe6ff; border-radius:14%; }
.ls16-profile-back { transform:translateZ(-20px) translate(-15%,15%); background:#164bce; }
.ls16-profile-front { display:grid; place-items:center; background:linear-gradient(145deg,#97dfff,#1557fb); color:#e9fcff; box-shadow:inset 0 0 22px #b6faff66; }
.ls16-profile-front svg { width:65%; height:65%; }
.ls16-profile-front i { position:absolute; right:-18%; bottom:-15%; width:44%; height:44%; border-radius:50%; border:2px solid #99f5ff; background:linear-gradient(145deg,#59deff,#1470ef); text-align:center; font-size:calc(var(--size) * .3); line-height:1.3; font-style:normal; }
.ls16-gear-back,.ls16-gear-front { position:absolute; inset:0; }
.ls16-gear-back { transform:translateZ(-12px) translate(8%,8%); color:#063f92; }
.ls16-gear-front { color:#71d4ff; filter:drop-shadow(0 0 8px #3187ff); }
.ls16-gear-front svg,.ls16-gear-back svg { width:100%; height:100%; fill:#2164b9; }

/* Home: image 1's horizontal masthead and asymmetric copy / podium composition. */
html.legi-step16 .site-header { min-height:76px; border-bottom:1px solid var(--border); }
html.legi-step16 .brand-logo { width:34px; height:34px; }
html.legi-step16 .brand-name { letter-spacing:-.025em; font-size:16px; }
html.legi-step16 .header-nav { gap:24px; font-size:12px; }
html.legi-step16 .header-nav a { position:relative; }
html.legi-step16 .header-nav a:hover::after { content:""; position:absolute; height:2px; bottom:-8px; inset-inline:0; background:linear-gradient(90deg,#226aff,#27d9ff); }
html.legi-step16 .hero { padding:36px 0 48px; overflow:hidden; }
html.legi-step16 .hero-grid { grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:12px; align-items:center; }
html.legi-step16 .hero-copy { position:relative; z-index:2; padding-block:30px; }
html.legi-step16 .hero .eyebrow { display:inline-block; padding:5px 12px; border:1px solid #328ce75c; border-radius:30px; letter-spacing:.035em; }
html.legi-step16 .hero h1 { margin:22px 0 20px; font-size:clamp(2rem,3.3vw,3.3rem); line-height:1.12; letter-spacing:-.045em; }
html.legi-step16 .hero h1 .gradient-text { display:inline-block; font-size:1.2em; margin-bottom:8px; background:linear-gradient(90deg,var(--text) 5%,#438fff 57%,#13c8f5 100%); background-clip:text; -webkit-background-clip:text; }
html.legi-step16 .hero-copy > p { max-width:440px; font-size:14px; line-height:1.8; }
html.legi-step16 .hero-actions { margin:24px 0 0; gap:12px; }
html.legi-step16 .hero-actions .btn { min-width:165px; }
html.legi-step16 .trust-row { gap:13px; margin-top:22px; font-size:10px; }
html.legi-step16 .trust-item::before { background:#246aff; color:#fff; width:16px; height:16px; display:grid; place-items:center; border-radius:5px; box-shadow:0 0 9px #1679ff55; }
.ls15-hero-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:34px; padding-top:20px; border-top:1px solid var(--border); gap:10px; }
.ls15-hero-metrics > span + span { padding-left:12px; border-left:1px solid var(--border); }
.ls15-hero-metrics strong,.ls15-hero-metrics small { display:block; }
.ls15-hero-metrics strong { font-size:17px; line-height:1.4; }
.ls15-hero-metrics small { color:var(--muted); font-size:9px; }
html.legi-step16 .hero-panel { min-height:570px; height:100%; padding:0; border:0; box-shadow:none; overflow:visible; background:none; }
html.legi-step16 .hero-panel::before { content:none; }
.ls16-hero-scene { position:relative; width:100%; height:570px; isolation:isolate; }
.ls16-hero-scene::before { content:""; position:absolute; inset:4% -15% -6%; background:radial-gradient(ellipse,#0c55ff22,transparent 68%); pointer-events:none; }
.ls16-scene-stars { position:absolute; inset:4% 0; pointer-events:none; background:radial-gradient(circle at 35% 4%,#9cf5ff 1px,transparent 3px),radial-gradient(circle at 85% 58%,#55cfff 2px,transparent 4px),radial-gradient(circle at 12% 40%,#3a9bff 2px,transparent 4px),radial-gradient(circle at 69% 21%,#63edff 2px,transparent 4px); }
.ls16-scene-core { position:absolute; z-index:3; top:16%; left:26%; width:48%; display:grid; place-items:center; }
.ls16-scene-core .ls16-model { --size:184px; }
.ls16-scene-orbit { position:absolute; z-index:1; width:92%; height:32%; left:5%; top:42%; border:2px solid #1873ff8c; border-radius:50%; transform:rotate(-18deg); box-shadow:0 0 16px #1363ff55,inset 0 0 18px #28d4ff17; pointer-events:none; }
.ls16-scene-orbit::after { content:""; position:absolute; left:20%; top:0; width:10px; height:10px; border-radius:50%; background:#80f1ff; box-shadow:0 0 16px #8defff; }
.ls16-scene-orbit.orbit-b { width:108%; left:-5%; top:52%; transform:rotate(14deg); border-color:#25caff65; }
.ls16-podium { position:absolute; z-index:2; width:64%; height:125px; left:18%; bottom:44px; }
.ls16-podium i { display:block; position:absolute; inset:0; border:2px solid #56d9ff; border-radius:50%; background:linear-gradient(#08214a,#020b20); box-shadow:0 13px 0 #041330,0 16px 0 #2866ca,0 20px 25px #0005,0 0 22px #2cacff59; }
.ls16-podium i:nth-child(2) { inset:6% 8% 20%; box-shadow:0 7px 0 #082657,inset 0 0 18px #309fff80; background:radial-gradient(ellipse,#1646a966,#001025 70%); }
.ls16-podium i:nth-child(3) { inset:15% 20% 34%; border-color:#70efff; background:radial-gradient(ellipse,#2eacffa6,transparent 65%); box-shadow:0 0 20px #25b9ff99,inset 0 0 16px #3688ff; }
.ls16-podium > span { position:absolute; bottom:-10%; left:0; width:100%; text-align:center; font-size:8px; letter-spacing:.12em; color:#bdeaff; }
.ls16-podium b { color:#28ceff; margin:0 9px; }
.ls16-satellite { position:absolute; z-index:4; width:88px; height:108px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border:1.5px solid #6ceaff; border-radius:10px; color:#e6fbff; background:linear-gradient(140deg,#1d63ffb3,#07245ecc); box-shadow:inset 0 0 18px #1ad2ff55,5px 5px 0 #1153c8,0 0 20px #1769ff66; rotate:12deg; }
.ls16-satellite svg { width:34px; height:34px; filter:drop-shadow(0 0 7px #26caff); }
.ls16-satellite strong { font-size:11px; letter-spacing:.025em; }
.satellite-api { left:16%; top:6%; rotate:14deg; }
.satellite-plugin { right:5%; top:22%; rotate:-12deg; }
.satellite-qr { left:0; top:36%; rotate:9deg; width:75px; height:90px; }
.satellite-pay { right:0; bottom:15%; rotate:18deg; width:92px; height:96px; }
.ls16-scene-caption { position:absolute; bottom:0; right:0; color:var(--cyan-dark); font-size:13px; font-style:italic; }
html.legi-step16 .section { padding:54px 0; }
html.legi-step16 .section-head { max-width:none; }
html.legi-step16 .feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
html.legi-step16 .feature-card { padding:24px; }
html.legi-step16 :is(.feature-icon,.service-icon,.quick-icon,.product-icon,.tool-icon)[data-ls16-icon] { width:100px; height:120px; padding:0; margin:0 0 10px; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
[data-ls16-icon] .ls16-model { --size:62px; }
html.legi-step16 .feature-card h3 { font-size:17px; margin:10px 0; }

/* Workspace: consistent padding, real title grid and no fixed height header. */
html.legi-step16 .dashboard-content { width:100%; max-width:1440px; margin:auto; padding:28px 30px 48px; }
html.legi-step16 .dashboard-topbar { min-height:72px; background:var(--surface); border-bottom:1px solid var(--border); }
html.legi-step16 .sidebar { background:var(--surface); border-right:1px solid var(--border); }
html.legi-step16 .nav-item { border-radius:8px; min-height:41px; font-size:12px; transition:background .2s,color .2s,translate .2s; }
html.legi-step16 .nav-item:hover { translate:3px 0; }
html.legi-step16 .nav-item.active { color:var(--text); border-color:#348aff; background:linear-gradient(90deg,#1765ff33,#14caff12); box-shadow:inset 3px 0 0 #2bcfff; }
html.legi-step16 .sidebar .brand-name { font-size:14px; }
html.legi-step16 .workspace-grid { gap:20px; }
html.legi-step16 .workspace-card { padding:24px; }
html.legi-step16 .ls16-intro {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:20px; min-height:112px; height:auto; width:100%; max-width:none;
  margin:0 0 24px; padding:24px 28px; border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(110deg,var(--surface),var(--bg-soft)); overflow:visible;
}
html.legi-step16 .ls16-intro::before,html.legi-step16 .ls16-intro::after { content:none; }
.ls16-intro-model { width:90px; height:90px; display:grid; place-items:center; }
.ls16-intro-model .ls16-model { --size:52px; }
.ls16-intro-copy { min-width:0; }
html.legi-step16 .ls16-intro h1 { margin:7px 0; font-size:clamp(22px,2.2vw,32px); overflow-wrap:anywhere; }
html.legi-step16 .ls16-intro p { margin:0; max-width:760px; color:var(--muted); font-size:13px; }
html.legi-step16 .ls16-intro > .role-badge { position:static; align-self:center; margin:0; max-width:100%; white-space:normal; }
html.legi-step16 .legacy-service-stage .card { padding:0; }
html.legi-step16 .legacy-service-stage .hd { padding:18px 22px; min-height:68px; }
html.legi-step16 .legacy-service-stage .bd { padding:22px; }
html.legi-step16 :is(.table-wrap,.admin-table-wrap,.eco-table-wrap) { max-width:100%; overflow-x:auto; }
html.legi-step16 .api-page { min-width:0; }
html.legi-step16 .api-page :is(.grid,.stack) > * { min-width:0; }
html.legi-step16 .service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
html.legi-step16 .service-card { padding:22px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
html.legi-step16 .service-card .service-arrow { margin-top:auto; align-self:flex-end; color:var(--cyan-dark); }
html.legi-step16 .stat-card { padding:20px; }
html.legi-step16 .welcome-card { padding:30px; grid-template-columns:minmax(0,1fr) 230px; }
html.legi-step16 .welcome-mark { display:grid; place-items:center; background:none; border:0; width:230px; height:220px; }
.welcome-mark .ls16-model { --size:112px; }

/* Store: one category rail, not a category rail inside a second desktop sidebar. */
html.legi-step16 .ls16-page-store .dashboard-shell { grid-template-columns:minmax(0,1fr); }
html.legi-step16 .ls16-page-store .sidebar { position:fixed; left:0; top:0; width:min(86vw,290px); height:100dvh; transform:translateX(-105%); transition:transform .25s; visibility:hidden; }
html.legi-step16 .ls16-page-store .sidebar.open { transform:translateX(0); visibility:visible; }
html.legi-step16 .ls16-page-store .sidebar-backdrop.show { display:block; }
html.legi-step16 .ls16-page-store .menu-button { display:inline-grid; }
html.legi-step16 .ls16-page-store .dashboard-topbar { padding:14px max(24px,calc((100vw - 1320px) / 2)); gap:22px; }
html.legi-step16 .ls16-page-store .page-heading { display:none; }
html.legi-step16 .ls16-page-store .dashboard-content { max-width:1370px; padding-top:22px; }
.ls16-store-nav { display:flex; gap:26px; margin-left:auto; font-size:12px; }
.ls16-store-nav [aria-current] { color:var(--cyan-dark); border-bottom:2px solid #2788ff; }
.ls16-store-brand { white-space:nowrap; font-size:14px; }
.ls16-store-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:22px; align-items:start; }
.ls16-categories { position:sticky; top:98px; display:grid; align-content:start; gap:5px; padding:18px 10px 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.ls16-categories h2 { padding:0 10px; margin:0 0 12px; font-size:13px!important; letter-spacing:0!important; }
[data-store-filter] { display:flex; align-items:center; gap:10px; border:1px solid transparent; border-radius:7px; padding:10px 12px; min-height:41px; background:transparent; color:var(--muted); font-size:11px; text-align:left; }
[data-store-filter] svg { width:16px; height:16px; flex-shrink:0; }
[data-store-filter][aria-pressed="true"] { color:var(--text); background:linear-gradient(100deg,#216dff4d,#12b5ff26); border-color:#3090fa; box-shadow:inset 2px 0 #44cbff; }
.ls16-store-promo { display:grid; margin-top:46px; padding:18px 12px; gap:10px; border-radius:8px; color:white; background:linear-gradient(130deg,#174dd6,#0285d3); }
.ls16-store-promo svg { width:32px; height:32px; color:#85f0ff; }
.ls16-store-promo strong { font-size:20px; line-height:1.2; }
.ls16-store-promo small { font-size:10px; }
.ls16-store-main { min-width:0; }
.ls16-store-toolbar { display:flex; align-items:center; gap:15px; margin-bottom:25px; }
.ls16-search { flex:1; display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:8px; padding:0 12px; min-width:140px; background:var(--surface); }
.ls16-search svg { width:17px; height:17px; color:var(--muted); }
.ls16-search input { width:100%; min-width:0; padding:12px 0; border:0; background:none; font-size:11px; }
.ls16-search:focus-within { outline:2px solid var(--cyan-dark); outline-offset:2px; }
.ls16-store-chips { display:flex; gap:6px; flex-shrink:0; }
.ls16-store-chips button { border-color:var(--border); padding:9px 12px; }
html.legi-step16 .ls16-store-main > .section-head { margin:0 0 18px; }
html.legi-step16 .ls16-store-main > .section-head h2 { font-size:20px; }
html.legi-step16 .ls16-store-main > .section-head p { font-size:11px; max-width:780px; margin-top:7px; }
html.legi-step16 .ls16-page-store #productGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:stretch; }
html.legi-step16 .ls16-page-store .eco-product { display:flex; flex-direction:column; padding:12px; border-radius:10px; gap:7px; min-height:0; overflow:visible; }
html.legi-step16 .eco-product::before { content:none; }
.ls16-product-visual { height:176px; position:relative; overflow:hidden; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 70%,#157dff20,transparent 72%); border:1px solid #349bff24; border-radius:6px; }
.ls16-product-visual .ls16-model { --size:76px; }
.ls16-product-visual .model-portal { --size:68px; }
html.legi-step16 .ls16-page-store .eco-product h3 { font-size:15px; margin:7px 0; overflow-wrap:anywhere; }
html.legi-step16 .ls16-page-store .eco-product p { font-size:11px; margin:0; }
html.legi-step16 .ls16-page-store .eco-tag { font-size:9px; padding:3px 6px; }
html.legi-step16 .ls16-page-store .eco-price { display:grid; grid-template-columns:1fr; gap:5px; margin:8px 0; }
html.legi-step16 .ls16-page-store .eco-price > div { padding:7px 0; background:none; border:0; border-bottom:1px solid var(--border); border-radius:0; }
html.legi-step16 .ls16-page-store .eco-price strong { font-size:17px; color:var(--cyan-dark); }
html.legi-step16 .ls16-page-store .eco-ownership { font-size:10px; padding:8px; }
html.legi-step16 .ls16-page-store .eco-actions { display:grid; grid-template-columns:1fr; gap:7px; padding-top:6px; margin-top:auto; }
html.legi-step16 .ls16-page-store .eco-actions .btn { font-size:10px; padding:9px 6px; min-height:38px; white-space:normal; }
html.legi-step16 .ls16-store-note { margin-top:24px; padding:18px; border-radius:10px; }
html.legi-step16 .ls16-store-note h1 { font-size:16px; }
html.legi-step16 .ls16-store-note p { font-size:11px; }
.ls16-filter-empty { text-align:center; padding:35px; color:var(--muted); }

/* Auth: visual and form occupy separate columns, never overlapping inputs. */
html.legi-step16 .auth-main { padding:32px 0; }
html.legi-step16 .auth-layout { width:min(calc(100% - 32px),980px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-radius:16px; }
html.legi-step16 .auth-info { padding:32px; gap:18px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:radial-gradient(ellipse at 50% 48%,#1677ff18,transparent 66%),var(--bg); }
html.legi-step16 .auth-info::before,html.legi-step16 .auth-form-panel::before { content:none; }
html.legi-step16 .auth-info h1 { font-size:28px; line-height:1.18; margin:14px 0 12px; }
html.legi-step16 .auth-info p { font-size:12px; }
html.legi-step16 .auth-form-panel { padding:32px; border-radius:0; min-width:0; }
html.legi-step16 .auth-form { gap:13px; }
html.legi-step16 .form-title { margin-bottom:10px; }
html.legi-step16 .form-title h2 { font-size:24px; }
html.legi-step16 .form-title p { font-size:12px; }
html.legi-step16 .form-label { font-size:11px; }
html.legi-step16 .form-hint,html.legi-step16 .checkbox-row { font-size:10px; }
html.legi-step16 .auth-form .input { font-size:12px; }
html.legi-step16 .auth-switch { margin:10px 0 0; font-size:11px; }
html.legi-step16 .auth-point { font-size:11px; }
html.legi-step16 .auth-form .input-wrap { position:relative; display:block; width:100%; }
html.legi-step16 .auth-form .input-action { position:absolute; top:50%; right:7px; bottom:auto; margin:0; transform:translateY(-50%); height:32px; min-height:32px; }
.ls16-auth-visual { position:relative; display:grid; place-items:center; min-height:300px; flex:1; }
.ls16-auth-visual::after { content:""; position:absolute; bottom:10%; left:12%; right:12%; height:70px; border:1px solid #28b5ff; border-radius:50%; background:radial-gradient(ellipse,#155eff40,transparent 70%); box-shadow:0 9px 0 #0b2d65,0 10px 0 #349bff; pointer-events:none; }
.ls16-auth-visual .ls16-model { --size:156px; z-index:1; }
.ls16-auth-login .auth-form-panel { grid-column:1; grid-row:1; }
.ls16-auth-login .auth-info { grid-column:2; grid-row:1; border-left:1px solid var(--border); border-right:0; }
.ls16-auth-login .ls16-auth-visual { min-height:350px; }
.ls16-auth-login .ls16-auth-visual .ls16-model { --size:164px; }
.ls16-otp-visual { display:grid; place-items:center; height:125px; }
.ls16-otp-visual .ls16-model { --size:60px; }
.ls16-otp-ready { border-color:var(--success)!important; box-shadow:0 0 0 3px #27b69726!important; }

/* Withdraw: request at left, bank controls at right; all IDs and values retained. */
html.legi-step16 .withdraw-page { max-width:1280px; gap:20px; }
html.legi-step16 .withdraw-hero { padding:24px; align-items:center; }
html.legi-step16 .withdraw-hero h1 { font-size:25px; }
html.legi-step16 .withdraw-hero p { font-size:12px; max-width:710px; }
html.legi-step16 .withdraw-mode { min-width:180px; font-size:12px; background:var(--bg-soft); }
html.legi-step16 .withdraw-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
html.legi-step16 .withdraw-stats .stat-card { background:linear-gradient(120deg,#27b5ff0d,transparent),var(--surface); gap:12px; }
html.legi-step16 .withdraw-stats strong { font-size:clamp(17px,1.6vw,23px); color:var(--cyan-dark); }
html.legi-step16 .withdraw-stats span { font-size:11px; }
html.legi-step16 .withdraw-grid { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; gap:20px; }
html.legi-step16 .withdraw-grid > :first-child { grid-column:2; grid-row:1; }
html.legi-step16 .withdraw-grid > :nth-child(2) { grid-column:1; grid-row:1; }
html.legi-step16 .withdraw-card { padding:24px; }
html.legi-step16 .withdraw-form { gap:16px; }
html.legi-step16 .withdraw-form label { font-size:12px; }
html.legi-step16 .bank-account { background:var(--bg-soft); }
html.legi-step16 .withdraw-details summary { font-size:12px; color:var(--cyan-dark); }

/* Access pages keep their state-specific copy; their 3D emblem is now focusable. */
html.legi-step16 .access-state-card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:32px; }
html.legi-step16 .ls16-access-visual { display:grid; place-items:center; width:100%; height:240px; margin:0 0 22px; }
.ls16-access-visual .ls16-model { --size:125px; }
html.legi-step16 .access-state-card h1 { font-size:28px; }

/* Breakpoints change layout only. Mouse/pen interaction continues at every size. */
@media (min-width:981px) { html.legi-step16 .dashboard-shell { grid-template-columns:230px minmax(0,1fr); } }
@media (max-width:1200px) {
  html.legi-step16 .header-nav { gap:14px; }
  html.legi-step16 .dashboard-content { padding:22px; }
  html.legi-step16 .ls16-page-store #productGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ls16-store-layout { grid-template-columns:172px minmax(0,1fr); gap:18px; }
  .ls16-store-toolbar { flex-wrap:wrap; }
  .ls16-store-nav { gap:15px; }
  html.legi-step16 .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ls16-scene-core .ls16-model { --size:150px; }
}
@media (max-width:980px) {
  html.legi-step16 .dashboard-shell { grid-template-columns:minmax(0,1fr); }
  html.legi-step16 .header-nav { display:none; }
  html.legi-step16 .hero-grid { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:0; }
  html.legi-step16 .hero-panel,.ls16-hero-scene { min-height:460px; height:460px; }
  .ls16-scene-core .ls16-model { --size:124px; }
  .ls16-satellite { width:63px; height:80px; }
  .ls16-satellite svg { width:24px; height:24px; }
  .ls16-satellite strong { font-size:9px; }
  .ls16-store-nav { display:none; }
  .ls16-store-chips { gap:4px; }
  html.legi-step16 .withdraw-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html.legi-step16 .withdraw-hero { flex-direction:column; align-items:stretch; }
  html.legi-step16 .withdraw-grid { grid-template-columns:1fr; }
  html.legi-step16 .withdraw-grid > :first-child { grid-column:1; grid-row:2; }
  html.legi-step16 .withdraw-grid > :nth-child(2) { grid-column:1; grid-row:1; }
}
@media (max-width:760px) {
  html.legi-step16 .hero { padding:18px 0 30px; }
  html.legi-step16 .hero-grid { grid-template-columns:1fr; gap:8px; }
  html.legi-step16 .hero-copy { padding:18px 0 0; }
  html.legi-step16 .hero h1 { font-size:clamp(29px,6.5vw,43px); }
  html.legi-step16 .hero-copy > p { max-width:540px; font-size:13px; }
  html.legi-step16 .hero-panel { width:min(100%,540px); margin:auto; }
  .ls16-scene-core .ls16-model { --size:144px; }
  .ls16-satellite { width:78px; height:95px; }
  .ls15-hero-metrics { margin-top:24px; }
  html.legi-step16 .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html.legi-step16 .ls16-page-store .dashboard-topbar { padding:12px; gap:8px; }
  .ls16-store-brand { font-size:12px; gap:6px; }
  .ls16-store-brand .brand-logo { width:26px!important; height:26px!important; }
  .ls16-store-layout { grid-template-columns:1fr; gap:16px; }
  .ls16-categories { position:static; display:flex; gap:6px; padding:8px; overflow-x:auto; }
  .ls16-categories h2,.ls16-store-promo { display:none; }
  .ls16-categories button { white-space:nowrap; flex:none; }
  .ls16-store-toolbar { gap:10px; margin-bottom:18px; }
  .ls16-store-chips { display:none; }
  html.legi-step16 .ls16-page-store #productGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  html.legi-step16 .ls16-intro { grid-template-columns:minmax(0,1fr); padding:20px 16px; gap:14px; }
  .ls16-intro-model { width:60px; height:76px; }
  .ls16-intro-model .ls16-model { --size:38px; }
  html.legi-step16 .ls16-intro > .role-badge { grid-column:1; justify-self:start; font-size:10px; min-height:28px; }
  html.legi-step16 .auth-layout { grid-template-columns:1fr; width:calc(100% - 24px); }
  html.legi-step16 .auth-info { display:none; }
  html.legi-step16 .auth-form-panel { grid-column:1; grid-row:1; padding:25px; }
  html.legi-step16 .ls16-auth-register .auth-info { display:flex; grid-column:1; grid-row:1; padding:24px; }
  .ls16-auth-register .ls16-auth-visual { min-height:180px; height:180px; }
  .ls16-auth-register .ls16-auth-visual .ls16-model { --size:92px; }
  html.legi-step16 .ls16-auth-register .auth-form-panel { grid-row:2; }
  html.legi-step16 .welcome-card { grid-template-columns:1fr; }
  html.legi-step16 .welcome-mark { display:none; }
}
@media (max-width:480px) {
  html.legi-step16 .container { width:calc(100% - 28px); }
  html.legi-step16 .brand-tagline { display:none; }
  html.legi-step16 .brand-name { font-size:12px; }
  html.legi-step16 .header-actions { gap:6px; }
  html.legi-step16 .btn-small { padding:8px 11px; font-size:10px; }
  html.legi-step16 .hero-actions .btn { width:auto; min-width:0; flex:1; }
  html.legi-step16 .trust-row { gap:8px; font-size:9px; }
  html.legi-step16 .hero-panel,.ls16-hero-scene { height:400px; min-height:400px; }
  .ls16-scene-core .ls16-model { --size:112px; }
  .ls16-scene-core { top:22%; }
  .ls16-satellite { width:65px; height:77px; }
  .ls16-podium { bottom:44px; width:74%; left:13%; height:86px; }
  .ls16-podium > span { font-size:6px; }
  .ls16-podium b { margin:0 4px; }
  .ls15-hero-metrics strong { font-size:14px; }
  .ls15-hero-metrics small { font-size:8px; }
  .ls15-hero-metrics > span + span { padding-left:7px; }
  html.legi-step16 .dashboard-content { padding:18px 12px 30px; }
  html.legi-step16 .feature-grid,html.legi-step16 .service-grid { grid-template-columns:1fr; }
  html.legi-step16 .withdraw-card { padding:18px; }
  html.legi-step16 .withdraw-stats .stat-card { padding:14px; }
  html.legi-step16 .withdraw-stats strong { font-size:16px; }
  html.legi-step16 .ls16-page-store #productGrid { grid-template-columns:1fr; }
  .ls16-product-visual { height:200px; }
  .ls16-product-visual .ls16-model { --size:94px; }
  html.legi-step16 .ls16-page-store .eco-product { padding:16px; }
  html.legi-step16 .ls16-page-store .eco-actions { grid-template-columns:1fr 1fr; }
  html.legi-step16 .ls16-page-store .balance-button { font-size:10px; max-width:115px; padding:7px; }
  html.legi-step16 .ls16-page-store .topbar-left { gap:5px; }
  .ls16-store-brand strong { max-width:68px; white-space:normal; font-size:10px; line-height:1.3; }
  html.legi-step16 .legacy-service-stage .hd,html.legi-step16 .legacy-service-stage .bd { padding:16px; }
}
/* Prefer stable geometry for reduced motion; still show focus/click feedback. */
.ls16-reduced .ls16-model-float,.ls16-save-data .ls16-model-float { animation:none; }
.ls16-paused .ls16-model-float { animation-play-state:paused; }
.ls16-reduced .ls16-model.is-active .ls16-mesh { animation:none; }
html.legi-step16.ls16-reduced [data-ls16-tilt],html.legi-step16.ls16-reduced [data-ls16-button] { transform:none; }
.ls16-reduced .ls16-model-turn { transform:none; }
@media (prefers-reduced-motion:reduce) {
  html.legi-step16 { scroll-behavior:auto; }
  html.legi-step16 *,html.legi-step16 *::before,html.legi-step16 *::after { animation:none!important; transition:none!important; }
}

/* Pointer feedback never covers a clickable target or participates in layout. */
.ls16-sparks { position:absolute; left:50%; top:45%; z-index:5; pointer-events:none; }
.ls16-sparks i { position:absolute; width:5px; height:5px; border-radius:50%; background:#a8f5ff; box-shadow:0 0 8px #30cfff; animation:ls16-spark .65s ease-out forwards; }
@keyframes ls16-spark { from { opacity:1; transform:translate(0,0) scale(1.4); } to { opacity:0; transform:translate(var(--spark-x),var(--spark-y)) scale(.2); } }
html.legi-step16 [data-ls16-button][data-motion-hover] { border-color:#82eaff; filter:brightness(1.12); }
html.legi-step16 .ls16-model:focus-visible { outline:2px solid #50dcff; outline-offset:3px; }
html.legi-step16 .withdraw-history { border-top:1px solid var(--border); padding:22px 0 0; margin:24px 0 0; box-shadow:none; background:none; }
html.legi-step16 .withdraw-history h2 { font-size:16px; }
html.legi-step16 .withdraw-history .admin-table { font-size:11px; }
html.legi-step16 .captcha-box:focus-within { box-shadow:0 0 0 3px #23baff22; }
html.legi-step16 .auth-form-panel .captcha-image { max-width:100%; object-fit:contain; }
html.legi-step16 .ls16-auth-register .auth-info { background:radial-gradient(ellipse at 30% 55%,#c8e8ff90,transparent 65%),var(--bg); }
html.legi-step16 .ls16-auth-login .auth-info > div:first-child { display:none; }
html.legi-step16 .ls16-auth-login .auth-points { font-size:11px; }
html.legi-step16 .ls16-auth-login .ls16-auth-visual { min-height:430px; }
@media (max-width:360px) {
  html.legi-step16 .header-actions .btn-small { padding:7px 8px; }
  html.legi-step16 .brand-name { font-size:11px; }
  html.legi-step16 .brand-logo { width:28px; height:28px; }
  html.legi-step16 .hero h1 .gradient-text { font-size:1.05em; }
}

/* STEP 16.0.3 — ambient meteor field, always behind the application. */
html.legi-step16 body {
  position:relative;
  isolation:isolate;
  background:transparent;
}
html.legi-step16 body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(900px 560px at 8% -5%,#087dff18,transparent 67%),
    radial-gradient(760px 520px at 96% 12%,#1acfff10,transparent 70%),
    linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 94%,#00183c));
}
html.legi-step16 body::before { z-index:-1; }
.ls16-meteor-field {
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  opacity:.72;
}
.ls16-meteor-field::before {
  content:"";
  position:absolute;
  inset:-10%;
  background-image:
    radial-gradient(circle at 12% 23%,#d8fbff 0 1px,transparent 1.8px),
    radial-gradient(circle at 37% 69%,#55dfff 0 1px,transparent 2px),
    radial-gradient(circle at 71% 17%,#bdefff 0 1px,transparent 1.8px),
    radial-gradient(circle at 89% 81%,#418cff 0 1px,transparent 2px);
  background-size:210px 170px,280px 230px,330px 260px,390px 310px;
  opacity:.42;
  animation:ls16-star-drift 28s linear infinite;
}
.ls16-bg-star {
  position:absolute;
  left:var(--star-x);
  top:var(--star-y);
  width:var(--star-size);
  height:var(--star-size);
  border-radius:50%;
  background:#d8fbff;
  box-shadow:0 0 5px #69dcff,0 0 12px #208cff;
  animation:ls16-star-twinkle 3.4s ease-in-out var(--star-delay) infinite;
}
.ls16-bg-meteor {
  position:absolute;
  left:var(--meteor-x);
  top:var(--meteor-y);
  width:clamp(120px,13vw,240px);
  height:2px;
  border-radius:999px;
  opacity:0;
  background:linear-gradient(90deg,transparent 0%,#258cff33 35%,#51dcff 82%,#efffff 100%);
  filter:drop-shadow(0 0 5px #39cfff);
  transform-origin:right center;
  will-change:transform,opacity;
  animation:ls16-meteor-flight var(--meteor-duration) linear var(--meteor-delay) infinite;
}
.ls16-bg-meteor::after {
  content:"";
  position:absolute;
  right:-3px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 7px 2px #8defff,0 0 18px 4px #237dff;
  transform:translateY(-50%);
}
@keyframes ls16-star-drift { to { transform:translate3d(70px,36px,0); } }
@keyframes ls16-star-twinkle { 0%,100% { opacity:.18; scale:.7; } 45% { opacity:1; scale:1.45; } }
@keyframes ls16-meteor-flight {
  0%,58% { opacity:0; transform:translate3d(-18vw,-16vh,0) rotate(34deg) scaleX(.08) scaleY(var(--meteor-scale)); }
  61% { opacity:1; }
  76% { opacity:.96; transform:translate3d(50vw,42vh,0) rotate(34deg) scaleX(1) scaleY(var(--meteor-scale)); }
  82%,100% { opacity:0; transform:translate3d(78vw,66vh,0) rotate(34deg) scaleX(.45) scaleY(var(--meteor-scale)); }
}
html.legi-step16:not([data-theme="dark"]) .ls16-meteor-field { opacity:.38; }

/* Desktop model press is intentionally large and rendered outside clipped cards. */
.ls16-model.is-active { animation:ls16-model-press .78s var(--motion-spring); }
.ls16-model.is-active .ls16-model-floor { animation:ls16-floor-pulse .78s ease-out; }
@keyframes ls16-model-press {
  0%,100% { filter:brightness(1) saturate(1) drop-shadow(0 0 0 transparent); }
  36% { filter:brightness(1.42) saturate(1.32) drop-shadow(0 0 18px #35dfff); }
  72% { filter:brightness(1.1) saturate(1.12) drop-shadow(0 0 8px #1c72ff); }
}
@keyframes ls16-floor-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  45% { opacity:.35; transform:scale(1.45); }
}
.ls16-click-burst {
  position:fixed;
  left:var(--burst-x);
  top:var(--burst-y);
  z-index:2147483000;
  width:1px;
  height:1px;
  pointer-events:none;
}
.ls16-click-burst::before {
  content:"";
  position:absolute;
  inset:-8px;
  border:2px solid #8ff5ff;
  border-radius:50%;
  box-shadow:0 0 14px #27cfff,0 0 34px #14bfd2;
  animation:ls16-burst-ring .78s ease-out forwards;
}
.ls16-click-burst i {
  position:absolute;
  left:-3px;
  top:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#eaffff;
  box-shadow:0 0 7px #7cecff,0 0 16px #1c72ff;
  animation:ls16-viewport-spark .72s var(--motion-ease) var(--burst-delay) forwards;
}
@keyframes ls16-burst-ring { to { opacity:0; transform:scale(5.8); } }
@keyframes ls16-viewport-spark { to { opacity:0; transform:translate3d(var(--burst-dx),var(--burst-dy),0) scale(.1); } }

/* One source of truth for sidebar geometry. This removes the 34px overlap
   introduced when STEP 16 used a 230px track with a 264px fixed sidebar. */
html.legi-step16 { --ls16-sidebar-width:264px; }
html.legi-step16 .dashboard-shell,
html.legi-step16 .dashboard-main,
html.legi-step16 .dashboard-content { box-sizing:border-box; min-width:0; max-width:100%; }
html.legi-step16 .dashboard-shell { width:100%; }
html.legi-step16 .dashboard-main { width:100%; overflow-x:clip; }
html.legi-step16 .dashboard-content { width:min(100%,1440px); }
html.legi-step16 .dashboard-content > * { box-sizing:border-box; min-width:0; max-width:100%; }
html.legi-step16 .dashboard-content :is(form,fieldset,.grid,.stack,.workspace-grid,.step5-grid,.step7-grid,.admin-grid) { min-width:0; max-width:100%; }
html.legi-step16 .dashboard-content :is(h1,h2,h3,p,.muted,.section-title-row) { overflow-wrap:anywhere; }
html.legi-step16 :is(.table-wrap,.admin-table-wrap,.eco-table-wrap) { width:100%; min-width:0; max-width:100%; overflow-x:auto; }
html.legi-step16 .dashboard-topbar { width:100%; max-width:100%; }

@media (min-width:981px) {
  html.legi-step16 .dashboard-shell { grid-template-columns:var(--ls16-sidebar-width) minmax(0,1fr); }
  html.legi-step16 .sidebar { width:var(--ls16-sidebar-width); }
  html.legi-step16 .dashboard-main { grid-column:2; }
}

/* Store intentionally has no account sidebar. Display:block prevents the old
   grid-column:2 rule from creating an implicit, empty first column. */
html.legi-step16 .ls16-page-store .dashboard-shell { display:block; width:100%; }
html.legi-step16 .ls16-page-store .dashboard-main { grid-column:1!important; width:100%; max-width:none; }
html.legi-step16 .ls16-page-store .dashboard-content { width:min(100%,1370px); margin-inline:auto; }
html.legi-step16 .ls16-page-store .ls16-store-layout,
html.legi-step16 .ls16-page-store .ls16-store-main,
html.legi-step16 .ls16-page-store #productGrid { min-width:0; max-width:100%; }

/* Explicit section spacing for Withdraw remains stable even when older page
   styles or browser cache supply margins of their own. */
html.legi-step16 .withdraw-page { display:grid!important; gap:24px!important; }
html.legi-step16 .withdraw-page > * { margin-block:0!important; }
html.legi-step16 .withdraw-stats { gap:16px!important; }
html.legi-step16 .withdraw-grid { display:grid!important; gap:22px!important; }
html.legi-step16 .withdraw-grid > .withdraw-card { margin:0!important; min-width:0; width:100%; }
html.legi-step16 .withdraw-grid > .ls16-withdraw-bank { grid-column:2; grid-row:1; }
html.legi-step16 .withdraw-grid > .ls16-withdraw-request { grid-column:1; grid-row:1; }
html.legi-step16 .bank-account-list { gap:12px; }

@media (max-width:980px) {
  html.legi-step16 .dashboard-main { grid-column:1!important; }
  html.legi-step16 .withdraw-grid > .ls16-withdraw-bank { grid-column:1; grid-row:2; }
  html.legi-step16 .withdraw-grid > .ls16-withdraw-request { grid-column:1; grid-row:1; }
}
@media (max-width:760px) {
  .ls16-meteor-field { opacity:.48; }
  .ls16-bg-meteor:nth-of-type(n+5) { display:none; }
}
.ls16-save-data .ls16-bg-meteor:nth-of-type(n+3) { display:none; }
.ls16-reduced .ls16-bg-meteor,
.ls16-reduced .ls16-meteor-field::before { animation:none!important; }
.ls16-reduced .ls16-bg-meteor { display:none; }
.ls16-reduced .ls16-bg-star { animation:none; opacity:.35; }
.ls16-reduced .ls16-click-burst { display:none; }


/* ==========================================================================\n   STEP 16.0.4 — Kinetic CSS-3D interaction + desktop License sidebar\n   ========================================================================== */

/* Keep activation on its own transform layer. Hover, base mesh and click no longer
   overwrite each other, which was the main source of invisible PC feedback. */
html.legi-step16 .ls16-model[data-ls16-interactive="kinetic"]::before {
  content:"";
  position:absolute;
  z-index:4;
  left:50%;
  top:43%;
  width:calc(var(--size) * 1.18);
  height:calc(var(--size) * 1.18);
  translate:-50% -50%;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--motion-px,50%) var(--motion-py,50%),#d9ffffd9 0 3%,#38dcff70 12%,#166dff2b 36%,transparent 68%);
  filter:blur(.2px) drop-shadow(0 0 16px #2ecfff);
  transform:scale(.7) translateZ(30px);
}
html.legi-step16 .ls16-model[data-ls16-interactive="kinetic"][data-motion-hover] .ls16-kinetic {
  transform:translateZ(10px) scale(1.025);
}
html.legi-step16 .ls16-model[data-ls16-interactive="kinetic"].is-pressing .ls16-kinetic {
  transform:translateY(3px) translateZ(-8px) scale(.92);
  transition-duration:.07s;
}
html.legi-step16 .ls16-model[data-ls16-interactive="kinetic"].is-active::before {
  animation:ls16-holo-impact .78s ease-out;
}
html.legi-step16 .ls16-model[data-ls16-interactive="kinetic"].is-active .ls16-model-floor {
  animation:ls16-floor-pulse .82s ease-out;
}
@keyframes ls16-holo-impact {
  0% { opacity:0; transform:scale(.52) translateZ(30px); }
  26% { opacity:.96; transform:scale(.95) translateZ(30px); }
  70% { opacity:.34; transform:scale(1.55) translateZ(30px); }
  100% { opacity:0; transform:scale(1.9) translateZ(30px); }
}

/* New two-stage viewport burst. It stays outside card overflow and therefore is
   visible on desktop even when the product artwork is clipped. */
html.legi-step16 .ls16-click-burst::after {
  content:"";
  position:absolute;
  inset:-14px;
  border:1px solid #2f8fffba;
  border-radius:50%;
  box-shadow:0 0 24px #1379ff80,inset 0 0 18px #3ae7ff42;
  animation:ls16-burst-ring-secondary .9s .04s ease-out forwards;
}
@keyframes ls16-burst-ring-secondary { to { opacity:0; transform:scale(4.3) rotate(22deg); } }
html.legi-step16 .ls16-click-burst.is-static::before,
html.legi-step16 .ls16-click-burst.is-static::after {
  animation:none!important;
  opacity:.9;
  transform:scale(2.1);
}
html.legi-step16 .ls16-click-burst.is-static i { display:none!important; }

/* Reduce Motion keeps a clear click acknowledgement without large travel. */
html.legi-step16.ls16-reduced .ls16-model.is-active {
  animation:none!important;
  filter:brightness(1.28) saturate(1.18) drop-shadow(0 0 14px #31dfff);
}
html.legi-step16.ls16-reduced .ls16-model.is-active .ls16-kinetic {
  animation:none!important;
  transform:none;
}
html.legi-step16.ls16-reduced .ls16-model.is-active .ls16-mesh {
  animation:none!important;
}
html.legi-step16.ls16-reduced .ls16-model.is-active::before {
  animation:none!important;
  opacity:.7;
  transform:scale(1.2) translateZ(0);
}

/* LICENSE / STORE: PC keeps the normal account sidebar permanently visible.
   The category rail remains inside the store content. Only <=980px uses drawer mode. */
@media (min-width:981px) {
  html.legi-step16 .ls16-page-store .dashboard-shell {
    display:grid;
    grid-template-columns:var(--ls16-sidebar-width) minmax(0,1fr);
    width:100%;
  }
  html.legi-step16 .ls16-page-store .sidebar {
    position:sticky;
    left:auto;
    top:0;
    width:var(--ls16-sidebar-width);
    height:100dvh;
    transform:none;
    visibility:visible;
    transition:none;
  }
  html.legi-step16 .ls16-page-store .sidebar-backdrop,
  html.legi-step16 .ls16-page-store .sidebar-backdrop.show { display:none!important; }
  html.legi-step16 .ls16-page-store .menu-button { display:none!important; }
  html.legi-step16 .ls16-page-store .ls16-store-brand { display:none!important; }
  html.legi-step16 .ls16-page-store .page-heading { display:block; }
  html.legi-step16 .ls16-page-store .dashboard-main {
    grid-column:2!important;
    width:100%;
    max-width:none;
  }
  html.legi-step16 .ls16-page-store .dashboard-content {
    width:min(100%,1370px);
    margin-inline:auto;
  }
}
@media (max-width:980px) {
  html.legi-step16 .ls16-page-store .dashboard-shell {
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  html.legi-step16 .ls16-page-store .sidebar {
    position:fixed;
    left:0;
    top:0;
    width:min(86vw,290px);
    height:100dvh;
    transform:translateX(-105%);
    visibility:hidden;
    transition:transform .25s var(--motion-ease),visibility .25s;
  }
  html.legi-step16 .ls16-page-store .sidebar.open {
    transform:translateX(0);
    visibility:visible;
  }
  html.legi-step16 .ls16-page-store .sidebar-backdrop.show { display:block; }
  html.legi-step16 .ls16-page-store .menu-button { display:inline-grid; }
  html.legi-step16 .ls16-page-store .ls16-store-brand { display:flex; }
  html.legi-step16 .ls16-page-store .page-heading { display:none; }
  html.legi-step16 .ls16-page-store .dashboard-main { grid-column:1!important; }
}


/* ========================================================================== 
   STEP 16.1.1 — DARK CYAN WHITE / VISUAL-FIRST PREMIUM UI
   Visual reference: deep navy surfaces, luminous cyan edges, crisp white type.
   These rules are shared by all 53 pages and intentionally avoid layout-canvas
   internals so creator tools keep their exact editing geometry.
   ========================================================================== */
html.legi-step16 {
  --ls16-cyan:#38e7ff;
  --ls16-cyan-2:#74f5ff;
  --ls16-blue:#1387ff;
  --ls16-navy:#020711;
  --ls16-panel:#071422;
  --ls16-panel-2:#0a1b2d;
  --ls16-white:#f7fdff;
  --ls16-glow:0 0 0 1px #3fe7ff22,0 18px 52px #00101f66,0 0 28px #18bde814;
  --motion-ease:cubic-bezier(.2,.72,.24,1);
}
html.legi-step16[data-theme="dark"] {
  --ls16-bg:#020711;
  --ls16-soft:#071421;
  --ls16-panel:#06111f;
  --ls16-text:#f5fcff;
  --ls16-muted:#8fa9bd;
  --ls16-line:#17405a;
  --ls16-accent:#42e9ff;
  --bg:var(--ls16-bg);
  --bg-soft:var(--ls16-soft);
  --surface:linear-gradient(145deg,#081827f2,#05111ef5);
  --surface-solid:#071421;
  --surface-raised:#0a1a2b;
  --surface-soft:#071421;
  --text:var(--ls16-text);
  --muted:var(--ls16-muted);
  --border:#163d55;
  --border-strong:#31cfea;
  --cyan:#3fe9ff;
  --cyan-dark:#42e9ff;
  --cyan-soft:#29dfff16;
  --shadow:0 16px 48px #0008;
  --shadow-soft:0 10px 30px #0005;
}
@media (prefers-color-scheme:dark) {
  html.legi-step16[data-theme="auto"] {
    --ls16-bg:#020711;--ls16-soft:#071421;--ls16-panel:#06111f;--ls16-text:#f5fcff;
    --ls16-muted:#8fa9bd;--ls16-line:#17405a;--ls16-accent:#42e9ff;
    --bg:var(--ls16-bg);--bg-soft:var(--ls16-soft);--surface:linear-gradient(145deg,#081827f2,#05111ef5);
    --surface-solid:#071421;--surface-raised:#0a1a2b;--surface-soft:#071421;
    --text:var(--ls16-text);--muted:var(--ls16-muted);--border:#163d55;--border-strong:#31cfea;
    --cyan:#3fe9ff;--cyan-dark:#42e9ff;--cyan-soft:#29dfff16;--shadow:0 16px 48px #0008;--shadow-soft:0 10px 30px #0005;
  }
}
html.legi-step16[data-theme="light"] {
  --ls16-bg:#f7fbff;--ls16-soft:#edf8ff;--ls16-panel:#ffffff;--ls16-text:#07172c;
  --ls16-muted:#587188;--ls16-line:#c9dfec;--ls16-accent:#0585b9;
  --bg:var(--ls16-bg);--bg-soft:var(--ls16-soft);--surface:#ffffff;--surface-solid:#ffffff;
  --surface-raised:#f4fbff;--surface-soft:#edf8ff;--text:var(--ls16-text);--muted:var(--ls16-muted);
  --border:#c8e2ef;--border-strong:#39cce5;--cyan:#00b9dc;--cyan-dark:#007fa8;--cyan-soft:#00b9dc12;
  --shadow:0 18px 45px #13628a14;--shadow-soft:0 10px 30px #13628a10;
}

html.legi-step16 body {
  min-height:100dvh;
  background:
    radial-gradient(circle at 12% -10%,#0abfe31a,transparent 30%),
    radial-gradient(circle at 88% 2%,#137cff18,transparent 27%),
    linear-gradient(180deg,transparent 0 60%,#00b9df05),
    var(--bg);
}
html.legi-step16[data-theme="dark"] body,
html.legi-step16[data-theme="auto"] body {
  background-color:#020711;
}
html.legi-step16 body::before {
  opacity:.16;
  background-image:linear-gradient(#50e9ff08 1px,transparent 1px),linear-gradient(90deg,#50e9ff08 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
}

/* Navigation + shell ------------------------------------------------------ */
html.legi-step16 :is(.site-header,.dashboard-topbar) {
  background:color-mix(in srgb,var(--surface-solid) 88%,transparent);
  border-color:color-mix(in srgb,var(--border) 82%,#42e9ff 18%);
  box-shadow:0 10px 34px #00101b20;
  backdrop-filter:blur(16px) saturate(1.15);
}
html.legi-step16 .site-header { border-bottom:1px solid var(--border); }
html.legi-step16 .site-header .header-inner { min-height:68px; }
html.legi-step16 .brand-logo { filter:drop-shadow(0 0 9px #36dcff55); }
html.legi-step16 .brand-name { color:var(--text); font-weight:850; letter-spacing:-.02em; }
html.legi-step16 .brand-tagline { color:var(--muted); }
html.legi-step16 :is(.header-nav,.ls16-store-nav) a {
  position:relative;color:var(--muted);font-weight:650;transition:color .18s ease;
}
html.legi-step16 :is(.header-nav,.ls16-store-nav) a:hover,
html.legi-step16 :is(.header-nav,.ls16-store-nav) a[aria-current="page"] { color:var(--text); }
html.legi-step16 :is(.header-nav,.ls16-store-nav) a::after {
  content:"";position:absolute;left:18%;right:18%;bottom:-10px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#54edff,transparent);transform:scaleX(0);opacity:0;
  transition:transform .2s ease,opacity .2s ease;
}
html.legi-step16 :is(.header-nav,.ls16-store-nav) a:hover::after,
html.legi-step16 :is(.header-nav,.ls16-store-nav) a[aria-current="page"]::after { transform:scaleX(1);opacity:1; }

html.legi-step16 .sidebar {
  background:linear-gradient(180deg,#061321 0%,#04101c 55%,#020b13 100%);
  border-right:1px solid #14435a;
  box-shadow:18px 0 45px #00101d22;
}
html.legi-step16[data-theme="light"] .sidebar { background:linear-gradient(180deg,#fff,#f4fbff); }
html.legi-step16 .sidebar::before {
  content:"";position:absolute;inset:0 0 auto;height:180px;pointer-events:none;
  background:radial-gradient(circle at 35% 0%,#25d9ff18,transparent 72%);
}
html.legi-step16 .sidebar-nav { gap:5px; }
html.legi-step16 .sidebar-nav a {
  min-height:43px;border:1px solid transparent;border-radius:10px;color:var(--muted);
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .2s ease;
}
html.legi-step16 .sidebar-nav a:hover { color:var(--text);background:#18c9eb0b;border-color:#28ddff20; }
html.legi-step16 .sidebar-nav a.active,
html.legi-step16 .sidebar-nav a[aria-current="page"] {
  color:#eaffff;background:linear-gradient(100deg,#08bfe31f,#0b81e11c);
  border-color:#37def063;box-shadow:inset 3px 0 #49ebff,0 0 22px #14cde513;
}
html.legi-step16[data-theme="light"] .sidebar-nav a.active,
html.legi-step16[data-theme="light"] .sidebar-nav a[aria-current="page"] { color:#063044; }
html.legi-step16 .dashboard-topbar { min-height:70px; }
html.legi-step16 .page-heading strong { font-size:13px;letter-spacing:.01em; }
html.legi-step16 .page-heading span { color:var(--muted);font-size:10px; }
html.legi-step16 .balance-button {
  border:1px solid #35dceb66;background:linear-gradient(135deg,#0b2b3c8c,#071724);
  color:#8af3ff;box-shadow:inset 0 0 18px #1edcff0d,0 0 18px #18c9ed0b;
}
html.legi-step16[data-theme="light"] .balance-button { background:#f3fcff;color:#056f91; }

/* Cards / panels ---------------------------------------------------------- */
html.legi-step16 :is(.card,.step5-card,.step5-hero,.service-card,.stat-card,.workspace-card,.eco-product,.license-card,.api-endpoint,.access-state-card,.modal) {
  border-color:color-mix(in srgb,var(--border) 80%,#45e9ff 20%);
  background:
    linear-gradient(145deg,#4aeaff08,transparent 36%),
    var(--surface);
  box-shadow:var(--ls16-glow);
}
html.legi-step16 :is(.card,.step5-card,.service-card,.stat-card,.workspace-card,.eco-product,.license-card,.api-endpoint):hover {
  border-color:#3edff06e;
  box-shadow:0 0 0 1px #49efff20,0 20px 52px #00101f4d,0 0 30px #1edff012;
}
html.legi-step16 :is(.step5-hero,.eco-hero,.profile-hero,.studio-hero,.welcome-card,.withdraw-hero,.service-intro,.api-intro) {
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 88% 0%,#2edfff12,transparent 34%),
    linear-gradient(145deg,#0a2435aa,#06131fee 64%),
    var(--surface-solid);
}
html.legi-step16[data-theme="light"] :is(.step5-hero,.eco-hero,.profile-hero,.studio-hero,.welcome-card,.withdraw-hero,.service-intro,.api-intro) {
  background:radial-gradient(circle at 88% 0%,#2edfff18,transparent 34%),linear-gradient(145deg,#fff,#f3fbff);
}
html.legi-step16 :is(.step5-hero,.eco-hero,.profile-hero,.studio-hero,.welcome-card,.withdraw-hero,.service-intro,.api-intro)::after {
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#70f4ffb8 35%,#2c94ff78 68%,transparent);
}
html.legi-step16 :is(.card,.step5-card,.step5-hero,.eco-product,.license-card,.api-endpoint) h1,
html.legi-step16 :is(.card,.step5-card,.step5-hero,.eco-product,.license-card,.api-endpoint) h2,
html.legi-step16 :is(.card,.step5-card,.step5-hero,.eco-product,.license-card,.api-endpoint) h3 { color:var(--text); }
html.legi-step16 .muted,html.legi-step16 .card p { color:var(--muted); }

/* Buttons / form fields --------------------------------------------------- */
html.legi-step16 .btn {
  border-color:#28536c;background:linear-gradient(180deg,#0a1b29,#071521);color:var(--text);
  box-shadow:inset 0 1px #ffffff08,0 6px 18px #0002;
}
html.legi-step16[data-theme="light"] .btn { background:linear-gradient(180deg,#fff,#f4fbff);border-color:#b9dce8; }
html.legi-step16 .btn-primary {
  color:#001019;background:linear-gradient(105deg,#7af6ff 0%,#2ee0f5 42%,#14a9ed 100%);
  border-color:#89f7ff;box-shadow:0 0 0 1px #53ecff36,0 8px 24px #12bddf38,inset 0 1px #fff9;
  font-weight:800;
}
html.legi-step16 .btn-primary:hover { box-shadow:0 0 0 1px #70f6ff66,0 12px 30px #12bddf4a,0 0 24px #27e5ff25; }
html.legi-step16 :is(.input,input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  border-color:#1b455d;background:color-mix(in srgb,var(--surface-solid) 88%,#0ddfff 4%);color:var(--text);
  box-shadow:inset 0 1px 0 #ffffff07;
}
html.legi-step16[data-theme="light"] :is(.input,input:not([type="checkbox"]):not([type="radio"]),select,textarea) { border-color:#c6dee9;background:#fff; }
html.legi-step16 :is(.input,input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus {
  border-color:#45e7f5;box-shadow:0 0 0 3px #2ddbef18,0 0 24px #24dff00e;
}

/* Tables / data-heavy workspace pages ------------------------------------ */
html.legi-step16 :is(table,.admin-table,.data-table) { border-collapse:separate;border-spacing:0;color:var(--text); }
html.legi-step16 :is(table,.admin-table,.data-table) thead th {
  background:color-mix(in srgb,var(--surface-raised) 90%,#20dff0 5%);color:#9bc2d2;
  border-bottom:1px solid #1d4d63;font-size:10px;text-transform:uppercase;letter-spacing:.055em;
}
html.legi-step16 :is(table,.admin-table,.data-table) tbody tr { transition:background .15s ease; }
html.legi-step16 :is(table,.admin-table,.data-table) tbody tr:hover { background:#22dff008; }
html.legi-step16 :is(table,.admin-table,.data-table) td { border-bottom-color:#15394d; }

/* Home / hero ------------------------------------------------------------- */
html.legi-step16 .hero { padding-top:34px; }
html.legi-step16 .hero-grid {
  position:relative;padding:clamp(18px,2vw,28px);border:1px solid #1b536b;border-radius:20px;
  background:linear-gradient(145deg,#071723b8,#020a13aa);box-shadow:0 25px 80px #0007,inset 0 0 60px #0de2ff05;
}
html.legi-step16[data-theme="light"] .hero-grid { background:linear-gradient(145deg,#fff,#f4fbff); }
html.legi-step16 .hero h1 { color:var(--text);text-shadow:0 0 34px #27dff014; }
html.legi-step16 .hero h1 .gradient-text {
  background:linear-gradient(95deg,#fff 8%,#8af7ff 50%,#21d6f2 82%);background-clip:text;-webkit-background-clip:text;color:transparent;
}
html.legi-step16[data-theme="light"] .hero h1 .gradient-text { background:linear-gradient(95deg,#081a2c,#078cb9 56%,#00bddc);background-clip:text;-webkit-background-clip:text; }
html.legi-step16 .trust-item { border-color:#23576c;background:#07182480;color:#a6bdc9; }
html.legi-step16 .ls16-hero-scene::after {
  content:"";position:absolute;inset:10% 3% 7%;border:1px solid #38e7ff1e;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 60px #15ddff08,0 0 70px #0c8fff0c;
}

/* Store ------------------------------------------------------------------- */
html.legi-step16 .ls16-categories {
  border:1px solid #17465e;border-radius:14px;background:linear-gradient(180deg,#071827,#04101c);box-shadow:0 16px 36px #0004;
}
html.legi-step16[data-theme="light"] .ls16-categories { background:#fff;border-color:#cce2ec; }
html.legi-step16 .ls16-categories [data-store-filter] { border-radius:9px;color:var(--muted); }
html.legi-step16 .ls16-categories [data-store-filter][aria-pressed="true"] {
  color:#dffcff;background:linear-gradient(100deg,#11bedf25,#0a73e122);border-color:#39dff070;box-shadow:inset 3px 0 #50edff;
}
html.legi-step16[data-theme="light"] .ls16-categories [data-store-filter][aria-pressed="true"] { color:#06334a; }
html.legi-step16 .ls16-store-toolbar {
  padding:10px;border:1px solid #17465b;border-radius:12px;background:#061522b8;box-shadow:0 12px 30px #0002;
}
html.legi-step16[data-theme="light"] .ls16-store-toolbar { background:#fff; }
html.legi-step16 .eco-product { isolation:isolate; }
html.legi-step16 .eco-product::after {
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.55;
  background:radial-gradient(circle at 50% 4%,#2ce6ff0f,transparent 42%);
}
html.legi-step16 .ls16-product-visual { border-radius:10px;border:1px solid #19526a;background:radial-gradient(circle at 50% 55%,#13bfe81a,transparent 62%),#04101b; }

/* Auth / OTP / access ----------------------------------------------------- */
html.legi-step16 .auth-layout { border:1px solid #1b536a;box-shadow:0 28px 90px #0007,0 0 45px #13dced0c;overflow:hidden; }
html.legi-step16 .auth-info { background:radial-gradient(circle at 45% 48%,#12c8e71a,transparent 52%),linear-gradient(160deg,#061726,#020a13)!important; }
html.legi-step16[data-theme="light"] .auth-info { background:radial-gradient(circle at 45% 48%,#11cde518,transparent 52%),linear-gradient(160deg,#f6fcff,#eaf8ff)!important; }
html.legi-step16 .auth-form-panel { background:color-mix(in srgb,var(--surface-solid) 96%,transparent); }
html.legi-step16 .auth-point::before { color:#4ceeff; }
html.legi-step16 .access-state-body { background:radial-gradient(circle at 50% 18%,#14d9ef13,transparent 34%),var(--bg); }
html.legi-step16 .access-state-card { box-shadow:0 28px 80px #0007,0 0 40px #22dff00d; }
html.legi-step16 .access-state-card::before { content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#5cefff0e,transparent 28%); }

/* Three/CSS hybrid polish ------------------------------------------------- */
html.legi-step16 .ls16-model::before {
  content:"";position:absolute;left:50%;top:46%;width:80%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,#72f7ff16 0%,#22d6ff10 28%,transparent 67%);filter:blur(5px);
}
html.legi-step16 .ls16-model::after {
  content:"";position:absolute;left:50%;top:43%;width:72%;height:72%;translate:-50% -50%;border:1px solid #55f1ff24;border-radius:50%;pointer-events:none;
  transform:rotateX(68deg) rotateZ(12deg);box-shadow:0 0 18px #1bdff00c;
}
html.legi-step16[data-ls16-quality="high"] .ls16-model::after { animation:ls16-premium-orbit 8s linear infinite; }
html.legi-step16[data-ls16-quality="medium"] .ls16-model::after { animation:ls16-premium-orbit 13s linear infinite; }
@keyframes ls16-premium-orbit { to { transform:rotateX(68deg) rotateZ(372deg); } }
html.legi-step16 .ls16-model.is-active::after { border-color:#a4fbff92;box-shadow:0 0 26px #40eaff58; }

/* Navigation progress: no full-screen transition and no artificial delay. */
.ls16-nav-progress {
  position:fixed;z-index:2147483600;left:0;top:0;width:0;height:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,#77f7ff,#17d7ef,#1c92ff);box-shadow:0 0 12px #35eaff;transition:width .42s ease,opacity .16s ease;
}
.ls16-nav-progress.active { width:72%;opacity:1; }
html.ls16-navigation-pending .ls16-three-stage { opacity:.35; }
html.ls16-navigation-pending body { cursor:progress; }

/* Adaptive low-power mode ------------------------------------------------- */
html.legi-step16[data-ls16-quality="low"] :is(.site-header,.dashboard-topbar) { backdrop-filter:none; }
html.legi-step16[data-ls16-quality="low"] [data-ls16-surface]::after { display:none; }
html.legi-step16[data-ls16-quality="low"] .ls16-model::after { animation:none!important;opacity:.35; }
html.legi-step16[data-ls16-quality="low"] :is(.card,.step5-card,.service-card,.stat-card,.eco-product,.license-card) { box-shadow:0 8px 22px #0003; }
html.legi-step16[data-ls16-quality="low"] .ls16-meteor-field { opacity:.28; }
html.legi-step16[data-ls16-quality="low"] .ls16-bg-meteor:nth-of-type(n+3) { display:none; }
html.legi-step16[data-ls16-quality="low"] [data-ls16-tilt] { transform:none!important;transition:none!important; }

@media (max-width:760px) {
  html.legi-step16 body::before { background-size:38px 38px;opacity:.1; }
  html.legi-step16 .hero-grid { padding:14px;border-radius:16px; }
  html.legi-step16 :is(.card,.step5-card,.step5-hero,.service-card,.stat-card,.workspace-card,.eco-product,.license-card) { box-shadow:0 9px 24px #0003; }
  html.legi-step16 .dashboard-topbar { backdrop-filter:none; }
  html.legi-step16 .ls16-product-visual { min-height:150px; }
}
@media (prefers-reduced-motion:reduce) {
  .ls16-nav-progress { transition:none; }
  html.legi-step16 .ls16-model::after { animation:none!important; }
}

/* ========================================================================== 
   LEGI STUDIO STEP 16.1.0 — Dark / Cyan / White UI rebuild
   The previous 16.0.x palette mixed a light page with a dark grey hero when an
   old light-theme preference was present. 16.1.0 uses one coherent visual
   language, keeps light mode intentional, and reduces GPU-heavy blur layers.
   ========================================================================== */
html.legi-ui-161 {
  --ls161-bg: #020b11;
  --ls161-bg-2: #04131b;
  --ls161-panel: #071923;
  --ls161-panel-2: #0a202b;
  --ls161-panel-3: #0d2733;
  --ls161-text: #f5fdff;
  --ls161-muted: #8ba9b5;
  --ls161-dim: #678591;
  --ls161-cyan: #39e4ef;
  --ls161-cyan-2: #12bfd3;
  --ls161-cyan-3: #0b8ea1;
  --ls161-line: #173846;
  --ls161-line-strong: #2ecbdd;
  --ls161-success: #5ce1b5;
  --ls161-danger: #ff7b8d;
  --ls161-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --ls161-soft-shadow: 0 12px 34px rgba(0, 0, 0, .2);
  --bg: var(--ls161-bg);
  --bg-soft: var(--ls161-bg-2);
  --surface: var(--ls161-panel);
  --surface-solid: var(--ls161-panel);
  --surface-raised: var(--ls161-panel-2);
  --surface-soft: var(--ls161-panel-2);
  --text: var(--ls161-text);
  --muted: var(--ls161-muted);
  --border: var(--ls161-line);
  --border-strong: var(--ls161-line-strong);
  --cyan: var(--ls161-cyan);
  --cyan-dark: #7af4fb;
  --cyan-soft: rgba(57, 228, 239, .095);
  --success: var(--ls161-success);
  --danger: var(--ls161-danger);
  --danger-soft: rgba(255, 123, 141, .09);
  --shadow: var(--ls161-shadow);
  --shadow-soft: var(--ls161-soft-shadow);
  --legi-neon: var(--ls161-cyan);
  --legi-blue: var(--ls161-cyan-2);
  --legi-violet: #0aaabd;
  --legi-purple: #0a94a6;
  --legi-glow: rgba(57, 228, 239, .14);
  --legi-glow-cyan: rgba(57, 228, 239, .12);
  --container: 1380px;
  color-scheme: dark;
}

/* Light mode remains available, but is a complete white/cyan theme instead of a
   half-dark composition. Dark is the default selected by theme-init.js. */
html.legi-ui-161[data-theme="light"] {
  --ls161-bg: #eef8fa;
  --ls161-bg-2: #e4f3f6;
  --ls161-panel: #ffffff;
  --ls161-panel-2: #f4fbfc;
  --ls161-panel-3: #eaf7f9;
  --ls161-text: #08232c;
  --ls161-muted: #58737d;
  --ls161-dim: #78919a;
  --ls161-line: #c9e3e8;
  --ls161-line-strong: #4ac7d5;
  --ls161-shadow: 0 24px 65px rgba(20, 69, 81, .12);
  --ls161-soft-shadow: 0 10px 30px rgba(20, 69, 81, .08);
  --bg: var(--ls161-bg);
  --bg-soft: var(--ls161-bg-2);
  --surface: var(--ls161-panel);
  --surface-solid: var(--ls161-panel);
  --surface-raised: var(--ls161-panel-2);
  --surface-soft: var(--ls161-panel-2);
  --text: var(--ls161-text);
  --muted: var(--ls161-muted);
  --border: var(--ls161-line);
  --border-strong: var(--ls161-line-strong);
  --shadow: var(--ls161-shadow);
  --shadow-soft: var(--ls161-soft-shadow);
  color-scheme: light;
}

html.legi-ui-161 body {
  background:
    radial-gradient(900px 520px at 84% -12%, rgba(18, 191, 211, .11), transparent 66%),
    radial-gradient(700px 440px at -8% 18%, rgba(57, 228, 239, .055), transparent 70%),
    linear-gradient(180deg, var(--ls161-bg-2), var(--ls161-bg) 36%, var(--ls161-bg));
  color: var(--text);
  font-size: 14px;
}
html.legi-ui-161 body::before {
  opacity: .032;
  background-image:
    linear-gradient(rgba(57,228,239,.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,228,239,.32) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 82%);
}
html.legi-ui-161 .ls16-meteor-field { opacity: .55; }
html.legi-ui-161.ls16-reduced .ls16-meteor-field,
html.legi-ui-161[data-ls16-quality="low"] .ls16-meteor-field { display: none; }

html.legi-ui-161 :is(h1,h2,h3,strong) { color: var(--text); }
html.legi-ui-161 :is(p,.muted,.small,.form-hint) { color: var(--muted); }
html.legi-ui-161 .eyebrow {
  color: #84f4fa;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html.legi-ui-161[data-theme="light"] .eyebrow { color: #087f90; }

/* Surfaces: fewer backdrop filters, clearer contrast, soft cyan edge. */
html.legi-ui-161 :is(.card,.step5-card,.step5-hero,.service-card,.stat-card,.workspace-card,.eco-product,.license-card,.api-endpoint,.access-state-card,.modal,.auth-layout) {
  background:
    linear-gradient(145deg, rgba(57,228,239,.035), transparent 34%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
html.legi-ui-161 :is(.card,.step5-card,.service-card,.stat-card,.workspace-card,.eco-product,.license-card,.api-endpoint)[data-ls16-surface] {
  overflow: clip;
}
html.legi-ui-161 :is(.card,.step5-card,.service-card,.stat-card,.workspace-card,.eco-product,.license-card,.api-endpoint):hover {
  border-color: color-mix(in srgb, var(--border-strong) 58%, var(--border));
}
html.legi-ui-161 [data-ls16-surface]::after {
  background: radial-gradient(300px circle at var(--motion-px,50%) var(--motion-py,50%), rgba(57,228,239,.10), transparent 70%);
}
html.legi-ui-161 [data-ls16-tilt][data-motion-hover] {
  box-shadow: 0 18px 42px rgba(0,0,0,.22), 0 0 0 1px rgba(57,228,239,.14);
}

/* Buttons / inputs */
html.legi-ui-161 .btn {
  min-height: 42px;
  border: 1px solid #23505d;
  border-radius: 11px;
  background: #0a2029;
  color: #eefdff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  font-weight: 760;
}
html.legi-ui-161[data-theme="light"] .btn { background:#f7fdfe; color:#0a3039; border-color:#b8dfe5; }
html.legi-ui-161 .btn:hover {
  border-color: var(--ls161-line-strong);
  background: #0c2832;
  box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 0 0 1px rgba(57,228,239,.08);
}
html.legi-ui-161[data-theme="light"] .btn:hover { background:#ecf9fb; }
html.legi-ui-161 .btn-primary,
html.legi-ui-161 button.primary,
html.legi-ui-161 .primary.btn {
  color: #02161c !important;
  background: linear-gradient(110deg, #7af5fa 0%, #38dce9 48%, #19b9cf 100%) !important;
  border-color: #89f6fb !important;
  box-shadow: 0 9px 26px rgba(27,197,216,.18), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
html.legi-ui-161 .btn-primary:hover,
html.legi-ui-161 button.primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
html.legi-ui-161 .btn-danger { background:rgba(255,123,141,.07); color:#ff9aaa; border-color:rgba(255,123,141,.35); }
html.legi-ui-161 :is(.input,select,textarea,.select,.field input,.field select,.field textarea) {
  background: #061720;
  color: #effcff;
  border-color: #1a3c48;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
html.legi-ui-161[data-theme="light"] :is(.input,select,textarea,.select,.field input,.field select,.field textarea) {
  background:#fbfeff; color:#0a2831; border-color:#c6e2e7;
}
html.legi-ui-161 :is(.input,select,textarea,.select):focus {
  border-color: #36d9e6;
  box-shadow: 0 0 0 3px rgba(57,228,239,.10);
}
html.legi-ui-161 ::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }

/* Header / public navigation */
html.legi-ui-161 .site-header {
  min-height: 72px;
  border-bottom: 1px solid #15343f;
  background: rgba(3, 15, 22, .94);
  color:#f5fdff;
  backdrop-filter: blur(12px) saturate(115%);
}
html.legi-ui-161[data-theme="light"] .site-header { background:rgba(250,254,255,.94); color:#08232c; border-bottom-color:#c9e3e8; }
html.legi-ui-161 .site-header .brand-name { color: currentColor; }
html.legi-ui-161 .site-header .brand-tagline { color: #6f929f; }
html.legi-ui-161 .header-nav a { color:#8faab4; font-weight:720; }
html.legi-ui-161 .header-nav a:hover { color:#ddfbff; }
html.legi-ui-161[data-theme="light"] .header-nav a:hover { color:#087f90; }

/* Home — rebuilt composition. The hero itself owns a dark palette so it never
   becomes grey-on-grey even if the user switches to light mode. */
html.legi-ui-161 .hero {
  padding: 34px 0 58px;
  overflow: hidden;
  background: transparent;
}
html.legi-ui-161 .hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  min-height: 650px;
  padding: clamp(34px,5vw,70px);
  border:1px solid #17414e;
  border-radius: 28px;
  background:
    radial-gradient(620px 400px at 76% 46%, rgba(18,191,211,.13), transparent 70%),
    radial-gradient(430px 300px at 9% 0%, rgba(57,228,239,.07), transparent 72%),
    linear-gradient(135deg,#071b24 0%,#04131b 52%,#031018 100%);
  box-shadow: 0 34px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.025);
  color:#f5fdff;
}
html.legi-ui-161 .hero-grid::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background: linear-gradient(105deg, rgba(255,255,255,.025), transparent 28%, transparent 74%, rgba(57,228,239,.025));
}
html.legi-ui-161 .hero-copy { padding:0; }
html.legi-ui-161 .hero .eyebrow {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 12px;
  border:1px solid rgba(57,228,239,.25);
  border-radius:999px;
  background:rgba(57,228,239,.055);
  color:#8cf7fb;
}
html.legi-ui-161 .hero h1 {
  margin:22px 0 18px;
  color:#f7feff;
  font-size:clamp(2.5rem,4.6vw,4.65rem);
  line-height:1.02;
  letter-spacing:-.055em;
}
html.legi-ui-161 .hero h1 .gradient-text {
  background:linear-gradient(90deg,#ffffff 0%,#a8fbff 42%,#35dbe8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
html.legi-ui-161 .hero-copy > p { color:#91adb7; max-width:600px; font-size:14px; line-height:1.85; }
html.legi-ui-161 .trust-row { gap:9px; margin-top:22px; }
html.legi-ui-161 .trust-item {
  padding:6px 9px;
  border:1px solid #1b3e48;
  border-radius:8px;
  background:#071b24;
  color:#b5ccd4;
}
html.legi-ui-161 .trust-item::before { background:#19c5d5; color:#02161c; box-shadow:none; }
html.legi-ui-161 .hero-actions { margin-top:24px; }
html.legi-ui-161 .hero-actions .btn { min-width:150px; }
html.legi-ui-161 .ls15-hero-metrics { margin-top:34px; padding-top:22px; border-top-color:#173943; }
html.legi-ui-161 .ls15-hero-metrics strong { color:#eafdff; }
html.legi-ui-161 .ls15-hero-metrics small { color:#698893; }
html.legi-ui-161 .hero-panel { min-height:540px; height:540px; }

/* New lighter visual stage: one primary cube + three low-cost floating actions. */
.ls161-hero-stage {
  position:relative;
  width:100%;
  height:540px;
  min-width:0;
  isolation:isolate;
  perspective:1100px;
}
.ls161-stage-grid {
  position:absolute;
  inset:7% 3% 10%;
  border:1px solid rgba(74,220,231,.13);
  border-radius:48% 52% 44% 56%;
  transform:rotate(-8deg) rotateX(66deg);
  background:
    linear-gradient(rgba(55,220,232,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(55,220,232,.07) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse,#000 20%,transparent 72%);
  opacity:.7;
}
.ls161-stage-glow {
  position:absolute;
  width:62%;
  aspect-ratio:1;
  left:19%;
  top:14%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(45,224,236,.19),rgba(20,172,190,.055) 45%,transparent 71%);
  filter:blur(8px);
  pointer-events:none;
}
.ls161-core-wrap { position:absolute; z-index:5; left:50%; top:48%; transform:translate(-50%,-50%); }
.ls161-core-wrap .ls16-model { --size:clamp(150px,15vw,205px); }
.ls161-core-ring {
  position:absolute;
  z-index:2;
  left:50%;
  top:52%;
  width:72%;
  height:27%;
  border:1px solid rgba(57,228,239,.34);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-11deg);
  box-shadow:0 0 25px rgba(57,228,239,.055),inset 0 0 25px rgba(57,228,239,.025);
  pointer-events:none;
}
.ls161-core-ring.ring-two { width:58%; height:38%; top:48%; transform:translate(-50%,-50%) rotate(68deg); opacity:.38; }
.ls161-float-card {
  position:absolute;
  z-index:7;
  display:flex;
  align-items:center;
  gap:10px;
  width:150px;
  padding:11px 12px;
  border:1px solid #1d4b58;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(11,39,49,.94),rgba(5,21,29,.96));
  color:#e9fdff;
  box-shadow:0 14px 34px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025);
  transform-style:preserve-3d;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.ls161-float-card:hover { transform:translateY(-4px) rotateX(4deg) rotateY(-5deg); border-color:#35cedc; box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 24px rgba(57,228,239,.08); }
.ls161-float-card svg { width:28px; height:28px; color:#64edf4; flex:0 0 auto; }
.ls161-float-card span { min-width:0; }
.ls161-float-card strong,.ls161-float-card small { display:block; }
.ls161-float-card strong { font-size:12px; color:#effeff; }
.ls161-float-card small { margin-top:2px; font-size:9px; color:#7799a4; white-space:nowrap; }
.ls161-float-card.card-api { left:3%; top:15%; transform:rotate(-4deg); }
.ls161-float-card.card-plugin { right:1%; top:22%; transform:rotate(4deg); }
.ls161-float-card.card-secure { right:8%; bottom:11%; transform:rotate(-3deg); }
.ls161-stage-status {
  position:absolute;
  left:6%;
  bottom:12%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid #153946;
  border-radius:999px;
  background:#061821;
  color:#7798a4;
  font-size:10px;
}
.ls161-stage-status i { width:7px;height:7px;border-radius:50%;background:#5ce1b5;box-shadow:0 0 10px rgba(92,225,181,.45); }

/* STEP 16.1.1: keep the layered 16.0.6 blue/cyan hologram geometry for CSS fallback. */
html.legi-ui-161 .ls16-model[data-ls16-engine="three"] .ls16-mesh { opacity:0; }

/* Generic page 3D identity mark added to all dashboard pages. */
.ls161-page-mark {
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  margin-left:2px;
}
.ls161-page-mark .ls16-model { --size:38px; }
.ls161-page-mark .ls16-model-floor { display:none; }
.ls161-page-mark .ls16-model-float { animation:none; }
.ls161-page-mark .ls16-face b { display:none; }
.ls161-public-mark { float:right; width:76px; height:76px; margin:0 0 12px 18px; display:grid; place-items:center; }
.ls161-public-mark .ls16-model { --size:58px; }
.ls161-public-mark .ls16-model-floor { display:none; }

/* Dashboard / all 43 account/admin pages */
@media (min-width:981px) {
  html.legi-ui-161 .dashboard-shell { grid-template-columns:248px minmax(0,1fr); }
  html.legi-ui-161 .sidebar { width:248px; }
}
html.legi-ui-161 .sidebar {
  padding:15px 12px;
  background:
    radial-gradient(280px 180px at 12% 0%,rgba(57,228,239,.055),transparent 70%),
    #04141c;
  border-right:1px solid #153540;
  box-shadow:12px 0 40px rgba(0,0,0,.12);
  backdrop-filter:none;
}
html.legi-ui-161[data-theme="light"] .sidebar { background:#f8fdfe; border-right-color:#cce4e9; }
html.legi-ui-161 .sidebar .brand { border-bottom:1px solid #11303a; margin-bottom:5px; }
html.legi-ui-161[data-theme="light"] .sidebar .brand { border-bottom-color:#d6e9ed; }
html.legi-ui-161 .sidebar .brand-name { color:#edfdff; letter-spacing:.02em; }
html.legi-ui-161[data-theme="light"] .sidebar .brand-name { color:#08232c; }
html.legi-ui-161 .nav-item {
  min-height:42px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#7898a4;
  font-weight:690;
}
html.legi-ui-161 .nav-item:hover { transform:none; translate:2px 0; color:#dffcff; background:#071e28; border-color:#143943; }
html.legi-ui-161[data-theme="light"] .nav-item:hover { color:#0b5663; background:#edf8fa; border-color:#c6e3e8; }
html.legi-ui-161 .nav-item.active {
  color:#92f7fb;
  background:linear-gradient(90deg,rgba(57,228,239,.11),rgba(57,228,239,.035));
  border-color:#1e5a66;
  box-shadow:inset 3px 0 0 #38dce8;
}
html.legi-ui-161[data-theme="light"] .nav-item.active { color:#087f90; background:#e8f8fa; }
html.legi-ui-161 .sidebar-bottom { background:transparent; border-top-color:#153540; }
html.legi-ui-161 .account-button { background:#071b24; border-color:#153b47; }
html.legi-ui-161[data-theme="light"] .account-button { background:#fff; border-color:#cbe4e8; }
html.legi-ui-161 .avatar-letter { background:linear-gradient(135deg,#83f4f8,#23c7d7); color:#04191f; box-shadow:none; }

html.legi-ui-161 .dashboard-topbar {
  min-height:72px;
  padding:10px clamp(16px,2vw,30px);
  background:rgba(3,15,22,.93);
  border-bottom:1px solid #153540;
  backdrop-filter:blur(10px) saturate(110%);
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
html.legi-ui-161[data-theme="light"] .dashboard-topbar { background:rgba(250,254,255,.93); border-bottom-color:#cce4e9; }
html.legi-ui-161 .topbar-left { gap:12px; }
html.legi-ui-161 .page-heading { padding-left:12px; border-left:2px solid #22c9d8; }
html.legi-ui-161 .page-heading strong { color:#effdff; font-size:.95rem; }
html.legi-ui-161 .page-heading span { color:#6f909c; }
html.legi-ui-161[data-theme="light"] .page-heading strong { color:#08232c; }
html.legi-ui-161 .balance-button,
html.legi-ui-161 .icon-btn {
  border:1px solid #1a424d;
  background:#071b24;
  color:#c9f9fc;
  box-shadow:none;
}
html.legi-ui-161[data-theme="light"] :is(.balance-button,.icon-btn) { background:#fff; color:#0a4a55; border-color:#c4e2e7; }
html.legi-ui-161 .balance-button { color:#6debf1; }
html.legi-ui-161 .dashboard-content { max-width:1500px; padding:28px clamp(18px,2.2vw,34px) 52px; }
html.legi-ui-161 .welcome-card,
html.legi-ui-161 .eco-hero,
html.legi-ui-161 .step5-hero,
html.legi-ui-161 .service-intro,
html.legi-ui-161 .api-intro,
html.legi-ui-161 .withdraw-hero {
  border-color:#1b4550;
  background:
    radial-gradient(500px 260px at 90% 20%,rgba(57,228,239,.075),transparent 72%),
    linear-gradient(135deg,#081d27,#061720);
  color:#eefeff;
  box-shadow:0 18px 52px rgba(0,0,0,.20);
}
html.legi-ui-161[data-theme="light"] :is(.welcome-card,.eco-hero,.step5-hero,.service-intro,.api-intro,.withdraw-hero) {
  background:linear-gradient(135deg,#f7fdfe,#edf9fb); color:#08232c; border-color:#bcdde3;
}
html.legi-ui-161 .stats-grid { gap:12px; }
html.legi-ui-161 .stat-card { background:#071923; }
html.legi-ui-161[data-theme="light"] .stat-card { background:#fff; }
html.legi-ui-161 .stat-value { color:#eefdff; }
html.legi-ui-161[data-theme="light"] .stat-value { color:#0b3540; }
html.legi-ui-161 .service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
html.legi-ui-161 .service-card { min-height:210px; padding:20px; background:#071923; }
html.legi-ui-161[data-theme="light"] .service-card { background:#fff; }
html.legi-ui-161 .service-card h3 { margin-top:10px; }
html.legi-ui-161 .feature-icon[data-ls16-icon] { width:76px; height:82px; margin-bottom:2px; }
html.legi-ui-161 [data-ls16-icon] .ls16-model { --size:54px; }

/* Store / License page */
html.legi-ui-161 .ls16-store-layout { gap:18px; }
html.legi-ui-161 .ls16-categories {
  border-color:#163c47;
  background:#061821;
  box-shadow:none;
}
html.legi-ui-161[data-theme="light"] .ls16-categories { background:#f9feff; border-color:#c7e2e7; }
html.legi-ui-161 .ls16-categories button { color:#7d9ba6; border-color:transparent; background:transparent; }
html.legi-ui-161 .ls16-categories button:hover,
html.legi-ui-161 .ls16-categories button[aria-pressed="true"] { color:#dffcff; border-color:#1e5d68; background:rgba(57,228,239,.08); }
html.legi-ui-161[data-theme="light"] .ls16-categories button:hover,
html.legi-ui-161[data-theme="light"] .ls16-categories button[aria-pressed="true"] { color:#087b8a; background:#eaf8fa; }
html.legi-ui-161 .ls16-store-promo {
  background:linear-gradient(145deg,#0b323c,#071e27);
  border:1px solid #1b5662;
  color:#ecfeff;
  box-shadow:none;
}
html.legi-ui-161 .ls16-search,
html.legi-ui-161 .ls16-store-chips button {
  background:#061821;
  border-color:#173b47;
  color:#94b0ba;
}
html.legi-ui-161[data-theme="light"] :is(.ls16-search,.ls16-store-chips button) { background:#fff; border-color:#c7e3e8; color:#536f79; }
html.legi-ui-161 .ls16-store-chips button[aria-pressed="true"] { color:#bffbfe; border-color:#2acbd9; background:rgba(57,228,239,.08); }
html.legi-ui-161 .eco-product { background:#061821; border-color:#173d48; }
html.legi-ui-161[data-theme="light"] .eco-product { background:#fff; border-color:#cce4e9; }
html.legi-ui-161 .ls16-product-visual { background:radial-gradient(circle,rgba(57,228,239,.085),transparent 67%); }

/* Auth / registration / password reset */
html.legi-ui-161 .auth-page {
  background:
    radial-gradient(780px 500px at 8% 8%,rgba(57,228,239,.07),transparent 68%),
    linear-gradient(160deg,#031018,#020b11 60%);
}
html.legi-ui-161 .auth-layout {
  width:min(calc(100% - 28px),1080px);
  grid-template-columns:.88fr 1.12fr;
  border-color:#1c4a55;
  border-radius:24px;
  box-shadow:0 34px 90px rgba(0,0,0,.38);
  background:#061821;
}
html.legi-ui-161 .auth-info {
  padding:clamp(30px,5vw,54px);
  background:
    radial-gradient(380px 300px at 15% 5%,rgba(57,228,239,.10),transparent 70%),
    #071b24;
  border-right:1px solid #173d48;
}
html.legi-ui-161 .auth-info::before { opacity:.28; border-color:rgba(57,228,239,.23); box-shadow:none; }
html.legi-ui-161 .auth-form-panel { background:#05151d; padding:clamp(28px,5vw,52px); }
html.legi-ui-161 .auth-form-panel::before { opacity:.22; }
html.legi-ui-161 .auth-info h1,
html.legi-ui-161 .auth-form-panel h2 { color:#f4fdff; }
html.legi-ui-161 .auth-form .form-label { color:#acc3cb; }
html.legi-ui-161 .ls16-auth-visual { margin:10px 0 20px; }
html.legi-ui-161 .ls16-auth-visual .ls16-model { --size:120px; }

/* Modals — fixes screenshot 2 contrast + narrow white scrollbar. */
html.legi-ui-161 .modal-layer {
  background:rgba(0,8,12,.72);
  backdrop-filter:blur(8px);
}
html.legi-ui-161 .modal {
  width:min(100%,520px);
  padding:26px;
  color:#edfefe;
  background:#061821;
  border:1px solid #2a7180;
  border-radius:20px;
  box-shadow:0 30px 90px rgba(0,0,0,.48),0 0 0 1px rgba(57,228,239,.035);
  scrollbar-color:#2a7180 #071821;
  scrollbar-width:thin;
}
html.legi-ui-161 .modal h2 { color:#f5feff !important; font-size:1.25rem; }
html.legi-ui-161 .modal p { color:#9ab3bc !important; }
html.legi-ui-161 .modal-icon { background:rgba(57,228,239,.08); color:#6bedf3; border:1px solid rgba(57,228,239,.12); }
html.legi-ui-161 .modal-actions { background:linear-gradient(to top,#061821 75%,transparent); }
html.legi-ui-161 .modal::-webkit-scrollbar { width:8px; }
html.legi-ui-161 .modal::-webkit-scrollbar-track { background:#071821; }
html.legi-ui-161 .modal::-webkit-scrollbar-thumb { background:#285966; border-radius:99px; }

/* Access denied / maintenance / 404 */
html.legi-ui-161 .access-state-body {
  background:
    radial-gradient(700px 480px at 50% 30%,rgba(57,228,239,.08),transparent 70%),
    #020b11;
}
html.legi-ui-161 .access-state-card { background:#061821; border-color:#245b67; color:#effdff; }
html.legi-ui-161 .access-state-card h1 { color:#f4feff; }
html.legi-ui-161 .access-state-card p { color:#8faab4; }
html.legi-ui-161 .ls16-access-visual .ls16-model { --size:150px; }

/* Admin / service / API tables */
html.legi-ui-161 :is(.admin-table-wrap,.tableWrap,.api-table-wrap,.ff-table-wrap) {
  border:1px solid #153b46;
  border-radius:14px;
  background:#051720;
}
html.legi-ui-161[data-theme="light"] :is(.admin-table-wrap,.tableWrap,.api-table-wrap,.ff-table-wrap) { background:#fff; border-color:#c8e3e8; }
html.legi-ui-161 table { color:var(--text); }
html.legi-ui-161 :is(th,thead td) { color:#91b1bc; background:#071c25; border-color:#173b46; }
html.legi-ui-161[data-theme="light"] :is(th,thead td) { color:#52707a; background:#eef9fb; border-color:#cfe6ea; }
html.legi-ui-161 td { border-color:#12323d; }
html.legi-ui-161[data-theme="light"] td { border-color:#d9eaed; }
html.legi-ui-161 tr:hover td { background:rgba(57,228,239,.025); }
html.legi-ui-161 .founder-nav {
  position:sticky;
  top:82px;
  z-index:20;
  padding:8px;
  margin:-8px 0 14px;
  border:1px solid #153b46;
  border-radius:14px;
  background:rgba(4,20,28,.92);
  backdrop-filter:blur(8px);
}
html.legi-ui-161[data-theme="light"] .founder-nav { background:rgba(250,254,255,.94); border-color:#c9e3e8; }
html.legi-ui-161 .api-code-block,
html.legi-ui-161 .api-code,
html.legi-ui-161 pre { background:#031219; border-color:#173b46; color:#bdf8fb; }

/* Service pages with legacy .shell/.service content */
html.legi-ui-161 .weblegi-service-page { background:var(--bg); }
html.legi-ui-161 .weblegi-service-content { max-width:1500px; }
html.legi-ui-161 .legacy-service-stage,
html.legi-ui-161 .workspace-card { background:#061821; border-color:#173d48; }
html.legi-ui-161[data-theme="light"] :is(.legacy-service-stage,.workspace-card) { background:#fff; border-color:#c9e3e8; }

/* Navigation progress only; no whole-page filter/blur while leaving. */
.ls16-nav-progress {
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  height:2px;
  width:0;
  pointer-events:none;
  background:linear-gradient(90deg,#82f5f8,#21cbd9);
  box-shadow:0 0 14px rgba(57,228,239,.45);
  opacity:0;
}
.ls16-nav-progress.active { opacity:1; animation:ls161-nav-progress 2.8s cubic-bezier(.15,.8,.2,1) forwards; }
@keyframes ls161-nav-progress { 0%{width:4%} 40%{width:56%} 80%{width:82%} 100%{width:92%} }
html.ls16-navigation-pending body { cursor:progress; }
html.ls16-navigation-pending body > *:not(.ls16-nav-progress) { pointer-events:none; }

/* Below-the-fold containment reduces layout/paint cost without hiding content. */
html.legi-ui-161 :is(.service-section,.section-gap,.step5-card,.workspace-card) {
  content-visibility:auto;
  contain-intrinsic-size:auto 360px;
}

/* Responsive */
@media (max-width:1100px) {
  html.legi-ui-161 .hero-grid { grid-template-columns:1fr 1fr; padding:38px; gap:24px; }
  html.legi-ui-161 .hero h1 { font-size:clamp(2.35rem,5vw,3.8rem); }
  .ls161-float-card { width:132px; }
}
@media (max-width:980px) {
  html.legi-ui-161 .dashboard-shell { grid-template-columns:1fr; }
  html.legi-ui-161 .sidebar { width:min(86vw,284px); }
  html.legi-ui-161 .dashboard-content { padding-inline:16px; }
  .ls161-page-mark { display:none; }
  html.legi-ui-161 .founder-nav { top:78px; }
}
@media (max-width:820px) {
  html.legi-ui-161 .hero { padding-top:18px; }
  html.legi-ui-161 .hero-grid { grid-template-columns:1fr; min-height:0; padding:30px 24px; border-radius:22px; }
  html.legi-ui-161 .hero-copy { text-align:left; }
  html.legi-ui-161 .hero h1 { font-size:clamp(2.35rem,11vw,4rem); }
  html.legi-ui-161 .hero-panel { min-height:420px; height:420px; }
  .ls161-hero-stage { height:420px; max-width:600px; margin:auto; }
  .ls161-core-wrap .ls16-model { --size:150px; }
  .ls161-float-card { transform:none !important; }
  .ls161-float-card.card-api { left:2%; top:9%; }
  .ls161-float-card.card-plugin { right:0; top:16%; }
  .ls161-float-card.card-secure { right:4%; bottom:8%; }
  html.legi-ui-161 .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html.legi-ui-161 .auth-layout { grid-template-columns:1fr; }
  html.legi-ui-161 .auth-info { border-right:0; border-bottom:1px solid #173d48; }
}
@media (max-width:620px) {
  html.legi-ui-161 body { font-size:13px; }
  html.legi-ui-161 .container { width:min(calc(100% - 20px),var(--container)); }
  html.legi-ui-161 .hero-grid { padding:24px 18px; }
  html.legi-ui-161 .hero h1 { font-size:clamp(2.15rem,12vw,3.3rem); }
  html.legi-ui-161 .trust-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  html.legi-ui-161 .hero-actions { display:grid; grid-template-columns:1fr 1fr; }
  html.legi-ui-161 .hero-actions .btn { min-width:0; width:100%; }
  html.legi-ui-161 .ls15-hero-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:16px; }
  html.legi-ui-161 .ls15-hero-metrics > span:nth-child(3) { border-left:0; padding-left:0; }
  html.legi-ui-161 .hero-panel { min-height:350px; height:350px; }
  .ls161-hero-stage { height:350px; }
  .ls161-core-wrap .ls16-model { --size:122px; }
  .ls161-float-card { width:auto; min-width:105px; padding:8px; }
  .ls161-float-card svg { width:22px;height:22px; }
  .ls161-float-card small { display:none; }
  .ls161-stage-status { display:none; }
  html.legi-ui-161 .service-grid { grid-template-columns:1fr; }
  html.legi-ui-161 .dashboard-content { padding:14px 10px 34px; }
  html.legi-ui-161 .dashboard-topbar { padding-inline:10px; }
  html.legi-ui-161 .modal { padding:20px; border-radius:18px; }
  html.legi-ui-161 .modal-actions { margin-inline:-20px; padding-inline:20px; }
  .ls161-public-mark { width:58px;height:58px; }
  .ls161-public-mark .ls16-model { --size:44px; }
}

@media (prefers-reduced-motion:reduce) {
  .ls161-float-card,
  .ls161-core-ring,
  html.legi-ui-161 [data-ls16-tilt] { transform:none !important; transition:none !important; }
}

/* STEP 16.1.0 — physical page atmosphere present in every HTML document.
   It is intentionally CSS-only and uses no blur/filter so weak GPUs pay almost nothing. */
html.legi-ui-161 body { isolation:isolate; }
.ls161-page-atmosphere {
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  contain:strict;
}
.ls161-atmosphere-grid {
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:
    linear-gradient(rgba(57,228,239,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(57,228,239,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.68),transparent 86%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.68),transparent 86%);
}
.ls161-atmosphere-orb {
  position:absolute;
  width:min(52vw,720px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:.18;
  background:radial-gradient(circle,rgba(57,228,239,.30) 0,rgba(18,191,211,.10) 32%,transparent 70%);
}
.ls161-atmosphere-orb.orb-a { top:-34%; right:-14%; }
.ls161-atmosphere-orb.orb-b { bottom:-42%; left:-18%; opacity:.11; }
html.legi-ui-161[data-theme="light"] .ls161-atmosphere-grid { opacity:.09; }
html.legi-ui-161[data-theme="light"] .ls161-atmosphere-orb { opacity:.09; }
html[data-ls16-quality="low"] .ls161-atmosphere-orb { opacity:.08; }
@media (prefers-reduced-motion:reduce) {
  .ls161-atmosphere-orb { opacity:.08; }
}


/* ========================================================================== 
   STEP 16.1.1 — VISUAL-FIRST 3D + UNIFIED LICENSE/DASHBOARD GEOMETRY
   ========================================================================== */
html.legi-ui-161 { --ls161-sidebar-width:248px; }

/* License/Store must use the exact same desktop shell as every dashboard page.
   Older STEP16 Store rules used 264px + sticky while 16.1 uses 248px + fixed,
   which shifted the entire page and topbar. */
@media (min-width:981px) {
  html.legi-ui-161 .dashboard-shell,
  html.legi-ui-161 .ls16-page-store .dashboard-shell {
    display:grid!important;
    grid-template-columns:var(--ls161-sidebar-width) minmax(0,1fr)!important;
    width:100%!important;
  }
  html.legi-ui-161 .sidebar,
  html.legi-ui-161 .ls16-page-store .sidebar {
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:var(--ls161-sidebar-width)!important;
    height:100vh!important;
    height:100dvh!important;
    transform:none!important;
    visibility:visible!important;
    transition:none!important;
  }
  html.legi-ui-161 .dashboard-main,
  html.legi-ui-161 .ls16-page-store .dashboard-main {
    grid-column:2!important;
    width:100%!important;
    max-width:none!important;
  }
  html.legi-ui-161 .ls16-page-store .dashboard-topbar {
    min-height:72px!important;
    padding:10px clamp(16px,2vw,30px)!important;
    gap:14px!important;
  }
  html.legi-ui-161 .ls16-page-store .page-heading { display:block!important; }
  html.legi-ui-161 .ls16-page-store .menu-button,
  html.legi-ui-161 .ls16-page-store .sidebar-backdrop,
  html.legi-ui-161 .ls16-page-store .ls16-store-brand,
  html.legi-ui-161 .ls16-page-store .ls16-store-nav { display:none!important; }
  html.legi-ui-161 .ls16-page-store .dashboard-content {
    width:100%!important;
    max-width:1500px!important;
    margin-inline:auto!important;
    padding:28px clamp(18px,2.2vw,34px) 52px!important;
  }
}

/* 16.0.6-inspired luminous fallback: keep full depth, glow and kinetic response. */
html.legi-ui-161 .ls16-face {
  border-color:#6edfff;
  background:linear-gradient(145deg,#155cff73,#071a44d9);
  box-shadow:inset 0 0 22px #5ceaff26,0 0 18px #176dff25;
}
html.legi-ui-161 .ls16-face.face-front {
  background:linear-gradient(145deg,#1871f6a8,#07183ee8);
}
html.legi-ui-161 .ls16-face b {
  color:#f5feff;
  text-shadow:0 0 9px #2abfff,0 0 18px #175cff;
}
html.legi-ui-161 .ls16-model-floor {
  opacity:1;
  filter:none;
  background:radial-gradient(ellipse,#0786ff80,transparent 70%);
}
html.legi-ui-161 .ls16-model[data-ls16-interactive="kinetic"][data-motion-hover] .ls16-kinetic {
  filter:brightness(1.08) saturate(1.16);
}

@media (max-width:980px) {
  html.legi-ui-161 .ls16-page-store .dashboard-shell {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  html.legi-ui-161 .ls16-page-store .sidebar {
    position:fixed!important;
    left:0!important;
    top:0!important;
    width:min(86vw,284px)!important;
    height:100dvh!important;
    transform:translateX(-105%)!important;
    visibility:hidden!important;
    transition:transform .22s ease,visibility .22s!important;
  }
  html.legi-ui-161 .ls16-page-store .sidebar.open {
    transform:translateX(0)!important;
    visibility:visible!important;
  }
  html.legi-ui-161 .ls16-page-store .sidebar-backdrop.show { display:block!important; }
  html.legi-ui-161 .ls16-page-store .menu-button { display:inline-grid!important; }
  html.legi-ui-161 .ls16-page-store .page-heading { display:block!important; }
  html.legi-ui-161 .ls16-page-store .dashboard-main { grid-column:1!important; }
  html.legi-ui-161 .ls16-page-store .dashboard-content {
    max-width:1500px!important;
    padding-inline:16px!important;
  }
}