/* LEGI STUDIO STEP 17.0.0
 * Detail-page visual system: Dark / Cyan / White, spatial panels, neon dashboard shell.
 * Loaded after STEP 16 so all backend contracts, form IDs and existing page scripts remain unchanged.
 */
html[data-legi-step="17"] {
  --ls17-bg:#020814;
  --ls17-bg-2:#030d1e;
  --ls17-panel:#06142a;
  --ls17-panel-2:#071a34;
  --ls17-panel-3:#0a2140;
  --ls17-line:#0c5fbd;
  --ls17-line-soft:rgba(36,163,255,.24);
  --ls17-cyan:#25e7ff;
  --ls17-cyan-2:#00b9ff;
  --ls17-blue:#2d66ff;
  --ls17-violet:#7d38ff;
  --ls17-magenta:#d32cff;
  --ls17-white:#f7fbff;
  --ls17-text:#eaf5ff;
  --ls17-muted:#8eacd2;
  --ls17-success:#23e0a2;
  --ls17-danger:#ff4775;
  --ls17-warning:#ffb24a;
  --ls17-shadow:0 18px 52px rgba(0,0,0,.42);
  --ls17-glow:0 0 0 1px rgba(31,191,255,.12),0 0 28px rgba(0,135,255,.12);
  --ls17-radius:14px;
  --ls17-sidebar:248px;
  --ls17-topbar:70px;
  --ls17-content-max:1460px;
  color-scheme:dark;
  background:#020814;
}
html[data-legi-step="17"] body {
  color:var(--ls17-text);
  background:
    radial-gradient(circle at 86% -10%,rgba(25,108,255,.20),transparent 31%),
    radial-gradient(circle at 8% 25%,rgba(0,220,255,.08),transparent 27%),
    linear-gradient(180deg,#020814 0%,#031022 50%,#020814 100%) !important;
}
html[data-legi-step="17"] body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(20,111,210,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,111,210,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 92%);
}
html[data-legi-step="17"] ::selection{background:rgba(37,231,255,.25);color:#fff}
html[data-legi-step="17"] :is(h1,h2,h3,h4,strong){color:var(--ls17-white)}
html[data-legi-step="17"] .muted{color:var(--ls17-muted)!important}
html[data-legi-step="17"] .eyebrow{
  color:var(--ls17-cyan)!important;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:900;
}

/* ---------- shared shell ---------- */
html[data-legi-step="17"] .dashboard-shell{
  min-height:100vh;
  display:grid!important;
  grid-template-columns:var(--ls17-sidebar) minmax(0,1fr)!important;
  background:transparent!important;
}
html[data-legi-step="17"] .sidebar{
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:var(--ls17-sidebar)!important;
  z-index:80!important;
  padding:14px 12px!important;
  border-right:1px solid rgba(39,137,255,.34)!important;
  background:
    radial-gradient(circle at 50% 0,rgba(41,104,255,.16),transparent 30%),
    linear-gradient(180deg,rgba(4,17,38,.98),rgba(2,10,24,.99))!important;
  box-shadow:16px 0 38px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(20px);
}
html[data-legi-step="17"] .sidebar .brand{
  min-height:76px;
  padding:10px 9px 16px!important;
  border-bottom:1px solid rgba(49,135,229,.22);
}
html[data-legi-step="17"] .sidebar .brand-logo{width:38px!important;height:38px!important;filter:drop-shadow(0 0 12px rgba(33,213,255,.36))}
html[data-legi-step="17"] .sidebar .brand-name{font-size:17px!important;font-weight:950!important;letter-spacing:.02em}
html[data-legi-step="17"] .sidebar .brand-tagline{color:#6f92bf!important;font-size:10px!important}
html[data-legi-step="17"] .sidebar-nav{
  padding:12px 0 170px!important;
  gap:4px!important;
}
html[data-legi-step="17"] .sidebar-nav :is(a,.nav-item){
  min-height:42px!important;
  border-radius:10px!important;
  padding:9px 12px!important;
  color:#bfd5ee!important;
  border:1px solid transparent!important;
  background:transparent!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
html[data-legi-step="17"] .sidebar-nav :is(a,.nav-item):hover{
  color:#fff!important;
  background:rgba(11,69,133,.34)!important;
  border-color:rgba(46,157,255,.26)!important;
  transform:translateX(2px);
}
html[data-legi-step="17"] .sidebar-nav :is(a.active,.nav-item.active,[aria-current="page"]){
  color:#fff!important;
  border-color:rgba(56,214,255,.58)!important;
  background:
    linear-gradient(90deg,rgba(139,42,255,.48),rgba(18,166,255,.62))!important;
  box-shadow:0 0 22px rgba(42,85,255,.27),inset 0 0 20px rgba(32,225,255,.12)!important;
}
html[data-legi-step="17"] .sidebar-bottom{
  left:12px!important; right:12px!important; bottom:14px!important;
  border-top:1px solid rgba(69,135,211,.24)!important;
  padding-top:12px!important;
  background:linear-gradient(180deg,transparent,rgba(2,10,24,.94) 16%)!important;
}
html[data-legi-step="17"] .account-button{
  border:1px solid rgba(52,160,244,.32)!important;
  background:rgba(7,28,55,.82)!important;
  border-radius:12px!important;
}
html[data-legi-step="17"] .avatar-letter{
  background:linear-gradient(135deg,var(--ls17-violet),var(--ls17-cyan))!important;
  color:#fff!important;
  box-shadow:0 0 18px rgba(38,207,255,.25);
}

html[data-legi-step="17"] .dashboard-main{
  grid-column:2!important;
  min-width:0!important;
  background:transparent!important;
}
html[data-legi-step="17"] .dashboard-topbar{
  position:sticky!important; top:0!important; z-index:60!important;
  min-height:var(--ls17-topbar)!important;
  padding:8px clamp(18px,2.4vw,34px)!important;
  border-bottom:1px solid rgba(42,137,245,.28)!important;
  background:rgba(2,10,24,.90)!important;
  box-shadow:0 8px 26px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(20px) saturate(150%);
}
html[data-legi-step="17"] .dashboard-topbar .page-heading strong{font-size:14px!important;color:#fff!important}
html[data-legi-step="17"] .dashboard-topbar .page-heading span{font-size:10px!important;color:#7194bf!important}
html[data-legi-step="17"] .balance-button{
  color:#dffaff!important;
  background:linear-gradient(180deg,rgba(8,38,72,.92),rgba(5,24,48,.92))!important;
  border:1px solid rgba(64,204,255,.48)!important;
  box-shadow:0 0 18px rgba(0,173,255,.12)!important;
}
html[data-legi-step="17"] .dashboard-content{
  width:min(var(--ls17-content-max),calc(100% - 36px))!important;
  margin:0 auto!important;
  padding:18px 0 42px!important;
}

/* ---------- public shell ---------- */
html[data-legi-step="17"] :is(.public-topbar,.site-header){
  min-height:70px;
  border-bottom:1px solid rgba(48,143,255,.28)!important;
  background:rgba(2,10,24,.92)!important;
  backdrop-filter:blur(20px);
  color:#fff;
}
html[data-legi-step="17"] .public-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px max(18px,calc((100vw - 1320px)/2));
}
html[data-legi-step="17"] .site-header .header-inner{min-height:70px!important}
html[data-legi-step="17"] :is(.public-topbar,.site-header) .brand-name{color:#fff!important}
html[data-legi-step="17"] :is(.public-topbar,.site-header) .brand-tagline{color:#7899c1!important}

/* ---------- panel language ---------- */
html[data-legi-step="17"] :is(.card,.step5-card,.service-card,.license-card,.workspace-card,.eco-product,.api-endpoint,.stat-card){
  border:1px solid rgba(40,128,242,.48)!important;
  border-radius:var(--ls17-radius)!important;
  background:
    linear-gradient(140deg,rgba(15,63,126,.18),transparent 38%),
    linear-gradient(180deg,rgba(5,20,43,.97),rgba(3,14,31,.98))!important;
  box-shadow:var(--ls17-shadow),inset 0 1px rgba(255,255,255,.025)!important;
  color:var(--ls17-text)!important;
}
html[data-legi-step="17"] :is(.card,.service-card,.license-card,.workspace-card,.eco-product,.api-endpoint):hover{
  border-color:rgba(48,205,255,.62)!important;
}
html[data-legi-step="17"] :is(.card .hd,.section-title-row,.studio-section-title,.section-head,.analytics-head){
  border-color:rgba(46,130,221,.30)!important;
}
html[data-legi-step="17"] :is(.input,.select,input,select,textarea){
  color:#e7f3ff!important;
  border-color:rgba(39,119,219,.58)!important;
  background:rgba(5,22,48,.92)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-legi-step="17"] :is(.input,.select,input,select,textarea):focus{
  border-color:var(--ls17-cyan)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(37,231,255,.09),0 0 20px rgba(21,144,255,.10)!important;
}
html[data-legi-step="17"] :is(input,textarea)::placeholder{color:#6e8bae!important}
html[data-legi-step="17"] .btn{
  border-radius:9px!important;
  border-color:rgba(64,155,244,.48)!important;
  background:linear-gradient(180deg,rgba(11,41,78,.96),rgba(6,24,48,.96))!important;
  color:#e9f7ff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04)!important;
}
html[data-legi-step="17"] :is(.btn.primary,.btn.btn-primary,.btn-primary){
  color:#fff!important;
  border-color:rgba(62,219,255,.76)!important;
  background:linear-gradient(105deg,#9e28ff 0%,#5a35ff 35%,#00c7ff 100%)!important;
  box-shadow:0 0 18px rgba(100,44,255,.25),0 0 24px rgba(0,200,255,.12)!important;
}
html[data-legi-step="17"] :is(.btn.primary,.btn.btn-primary,.btn-primary):hover{
  filter:brightness(1.12);
  box-shadow:0 0 24px rgba(122,45,255,.36),0 0 30px rgba(0,207,255,.2)!important;
}
html[data-legi-step="17"] .btn-danger{border-color:rgba(255,77,122,.46)!important;color:#ff9cb6!important}
html[data-legi-step="17"] :is(table,.admin-table){color:#cfe5ff!important}
html[data-legi-step="17"] :is(table,.admin-table) thead{background:rgba(9,43,82,.8)!important;color:#8bdfff!important}
html[data-legi-step="17"] :is(table,.admin-table) :is(th,td){border-color:rgba(36,102,181,.28)!important}
html[data-legi-step="17"] .badge{
  border-color:rgba(49,155,245,.42)!important;
  background:rgba(6,31,61,.92)!important;
  color:#bfe8ff!important;
}

/* ---------- STEP 17 hero ---------- */
html[data-legi-step="17"] .ls17-hero,
html[data-legi-step="17"] .service-intro.ls17-hero,
html[data-legi-step="17"] .api-intro.ls17-hero{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)!important;
  align-items:stretch!important;
  min-height:238px!important;
  margin:0 0 14px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(36,138,255,.66)!important;
  border-radius:15px!important;
  background:
    radial-gradient(circle at 72% 25%,rgba(75,44,255,.30),transparent 28%),
    radial-gradient(circle at 92% 70%,rgba(0,211,255,.20),transparent 24%),
    linear-gradient(120deg,#041329 0%,#061837 52%,#030d20 100%)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.04)!important;
}
html[data-legi-step="17"] .ls17-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 42%,rgba(39,126,255,.11) 42.5%,transparent 43%),
    repeating-linear-gradient(145deg,transparent 0 32px,rgba(33,126,243,.028) 33px 34px);
}
html[data-legi-step="17"] .ls17-hero-copy,
html[data-legi-step="17"] .ls17-hero .ls16-intro-copy{
  position:relative;z-index:2;
  padding:28px 30px 24px!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
  min-width:0;
}
html[data-legi-step="17"] .ls17-hero h1{
  margin:5px 0 7px!important;
  max-width:760px;
  font-size:clamp(2rem,3.2vw,3.7rem)!important;
  line-height:1.03!important;
  letter-spacing:-.045em!important;
  color:#fff!important;
  text-wrap:balance;
}
html[data-legi-step="17"] .ls17-hero p{
  margin:0!important;
  color:#a8c1df!important;
  font-size:14px!important;
}
html[data-legi-step="17"] .ls17-hero .role-badge{
  position:absolute!important;right:20px!important;top:18px!important;z-index:4!important;
  color:#ffc3ff!important;
  border:1px solid #d938ff!important;
  background:rgba(79,10,102,.64)!important;
  box-shadow:0 0 18px rgba(218,50,255,.26)!important;
}
html[data-legi-step="17"] .ls17-feature-row{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;position:relative;z-index:2;
}
html[data-legi-step="17"] .ls17-feature{
  display:flex;align-items:center;gap:9px;min-width:150px;
  padding:8px 11px;border-radius:10px;
  border:1px solid rgba(48,130,237,.34);
  background:rgba(4,18,39,.74);color:#d8ebff;
}
html[data-legi-step="17"] .ls17-feature svg{width:18px;height:18px;color:var(--ls17-cyan);filter:drop-shadow(0 0 8px rgba(37,231,255,.42))}
html[data-legi-step="17"] .ls17-feature strong{display:block;font-size:11px}
html[data-legi-step="17"] .ls17-feature small{display:block;font-size:9px;color:#7899bd;margin-top:1px}

/* CSS 3D hero scene */
html[data-legi-step="17"] .ls17-hero-visual{
  position:relative;min-height:238px;overflow:hidden;perspective:900px;z-index:1;
  --mx:0;--my:0;
  background:
    radial-gradient(circle at 55% 60%,rgba(0,187,255,.22),transparent 25%),
    linear-gradient(90deg,transparent,rgba(34,74,255,.08));
}
html[data-legi-step="17"] .ls17-scene{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--my) * -3deg)) rotateY(calc(var(--mx) * 4deg));
  transition:transform .18s ease-out;
}
html[data-legi-step="17"] .ls17-stage-grid{
  position:absolute;inset:12% 4% 2%;
  transform:rotateX(72deg) translateZ(-70px);
  transform-origin:center bottom;
  border-radius:50%;
  background:
    radial-gradient(ellipse,rgba(0,185,255,.2),transparent 52%),
    repeating-radial-gradient(ellipse at center,rgba(44,122,255,.34) 0 1px,transparent 2px 28px);
  opacity:.82;
}
html[data-legi-step="17"] .ls17-core{
  position:absolute;left:50%;top:50%;
  width:116px;height:116px;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) translateZ(52px) rotateX(-11deg) rotateY(34deg);
  animation:ls17Float 4.2s ease-in-out infinite;
}
html[data-legi-step="17"] .ls17-core::before,
html[data-legi-step="17"] .ls17-core::after{
  content:"";position:absolute;inset:0;border-radius:18px;
  border:1px solid rgba(93,221,255,.95);
  background:linear-gradient(145deg,rgba(58,170,255,.34),rgba(63,42,255,.16));
  box-shadow:inset 0 0 28px rgba(38,198,255,.20),0 0 28px rgba(26,122,255,.34);
}
html[data-legi-step="17"] .ls17-core::after{
  transform:translateZ(-24px) scale(.82);
  border-color:rgba(147,59,255,.7);
  box-shadow:inset 0 0 30px rgba(139,46,255,.20),0 0 28px rgba(125,56,255,.2);
}
html[data-legi-step="17"] .ls17-core-face{
  position:absolute;inset:17px;display:grid;place-items:center;text-align:center;
  transform:translateZ(28px);border-radius:13px;
  border:1px solid rgba(103,229,255,.85);
  background:radial-gradient(circle,rgba(57,209,255,.22),rgba(15,55,116,.7));
  color:#fff;box-shadow:0 0 28px rgba(0,198,255,.28);
}
html[data-legi-step="17"] .ls17-core-face svg{width:38px;height:38px;color:#8cecff;filter:drop-shadow(0 0 9px #2fd9ff)}
html[data-legi-step="17"] .ls17-core-face strong{display:block;font-size:11px;letter-spacing:.08em;margin-top:4px}
html[data-legi-step="17"] .ls17-orbit{
  position:absolute;left:50%;top:50%;border:1px solid rgba(44,177,255,.55);border-radius:50%;
  transform-style:preserve-3d;pointer-events:none;
}
html[data-legi-step="17"] .ls17-orbit.o1{width:330px;height:112px;transform:translate(-50%,-50%) rotateZ(-10deg) rotateX(68deg);animation:ls17Orbit 12s linear infinite}
html[data-legi-step="17"] .ls17-orbit.o2{width:285px;height:150px;transform:translate(-50%,-50%) rotateZ(28deg) rotateX(70deg);animation:ls17Orbit 16s linear reverse infinite;border-color:rgba(123,62,255,.5)}
html[data-legi-step="17"] .ls17-satellite{
  position:absolute;display:flex;align-items:center;justify-content:center;gap:5px;
  min-width:78px;height:46px;padding:0 10px;border-radius:10px;
  border:1px solid rgba(66,189,255,.73);
  background:linear-gradient(145deg,rgba(25,74,155,.92),rgba(11,32,76,.95));
  color:#dff8ff;font-weight:900;font-size:9px;letter-spacing:.04em;
  box-shadow:0 0 22px rgba(33,131,255,.25),inset 0 0 18px rgba(36,190,255,.11);
  transform-style:preserve-3d;
  transition:transform .22s ease,box-shadow .22s ease;
}
html[data-legi-step="17"] .ls17-satellite svg{width:17px;height:17px;color:#74eaff}
html[data-legi-step="17"] .ls17-satellite.s1{left:12%;top:24%;transform:rotate(-8deg) translateZ(26px)}
html[data-legi-step="17"] .ls17-satellite.s2{right:10%;top:22%;transform:rotate(8deg) translateZ(32px)}
html[data-legi-step="17"] .ls17-satellite.s3{right:8%;bottom:16%;transform:rotate(10deg) translateZ(20px)}
html[data-legi-step="17"] .ls17-satellite:hover{transform:scale(1.08) translateZ(45px);box-shadow:0 0 34px rgba(39,207,255,.38)}
html[data-legi-step="17"] .ls17-hero-visual.is-activated .ls17-core{animation:ls17Activate .8s cubic-bezier(.2,.85,.2,1.2),ls17Float 4.2s .8s ease-in-out infinite}
@keyframes ls17Float{0%,100%{translate:0 -3px}50%{translate:0 8px}}
@keyframes ls17Orbit{to{rotate:1turn}}
@keyframes ls17Activate{0%{scale:1}35%{scale:1.16;rotate:0 20deg}100%{scale:1;rotate:0 0deg}}

/* ---------- detail page composition ---------- */
html[data-legi-step="17"] .weblegi-service-content{display:block!important}
html[data-legi-step="17"] .legacy-service-stage{margin-top:0!important}
html[data-legi-step="17"] .legacy-service-stage > .stack{gap:14px!important}
html[data-legi-step="17"] .legacy-service-stage > .grid.two.mainGrid{
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important;
  gap:14px!important;
  align-items:start!important;
}
html[data-legi-step="17"] .legacy-service-stage > .grid.two.mainGrid > .card{
  overflow:hidden!important;
}
html[data-legi-step="17"] .legacy-service-stage .card > .hd{
  min-height:58px!important;
  padding:13px 16px!important;
  background:linear-gradient(90deg,rgba(12,51,103,.50),rgba(9,29,63,.28))!important;
  border-bottom:1px solid rgba(41,131,230,.31)!important;
}
html[data-legi-step="17"] .legacy-service-stage .card > .hd h3{
  font-size:17px!important;
  letter-spacing:-.02em!important;
}
html[data-legi-step="17"] .legacy-service-stage .card > .bd{padding:16px!important}
html[data-legi-step="17"] .form .label,
html[data-legi-step="17"] .form-label{font-weight:800!important;color:#dcecff!important;font-size:11px!important}
html[data-legi-step="17"] .field{gap:6px!important}
html[data-legi-step="17"] .grid.two{gap:12px!important}
html[data-legi-step="17"] .row.end{gap:9px!important}

/* Key page */
html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] #keyForm{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] #keyForm > :first-child{display:none}
html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] #keyForm .field:nth-of-type(1){grid-column:1/2}
html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] #keyForm .field:nth-of-type(2){grid-column:2/3}
html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] #keyForm .field:nth-of-type(3){grid-column:1/2}
html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] #keyForm .field:nth-of-type(4){grid-column:2/3;grid-row:2/4}
html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] #keyForm > .row.end{grid-column:1/-1}
html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] .logoPicker{
  min-height:48px;padding:8px;border:1px dashed rgba(63,148,244,.52);border-radius:10px;background:rgba(5,25,54,.52)
}
html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] .stack > .card.soft .hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px
}

/* Team page */
html[data-legi-step="17"] body[data-legi-page="teams"] #teamForm .memberGrid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important
}
html[data-legi-step="17"] body[data-legi-page="teams"] .logoPicker{
  padding:8px;border:1px dashed rgba(63,148,244,.52);border-radius:10px;background:rgba(5,25,54,.52)
}

/* create/render pages */
html[data-legi-step="17"] body:is([data-legi-page="tinhdiem"],[data-legi-page="taobanner"],[data-legi-page="taolineup"],[data-legi-page="taoprofile"],[data-legi-page="taoqr"]) .mainGrid > .card.soft{
  position:sticky;top:calc(var(--ls17-topbar) + 14px);
  min-height:620px;
}
html[data-legi-step="17"] body:is([data-legi-page="taobanner"],[data-legi-page="taolineup"],[data-legi-page="taoprofile"],[data-legi-page="taoqr"]) #historyList:empty::before,
html[data-legi-step="17"] body[data-legi-page="tinhdiem"] #historyList:empty::before{
  content:"Chưa có ảnh nào. Kết quả mới sẽ xuất hiện tại đây.";
  min-height:420px;display:grid;place-items:center;text-align:center;color:#7899c0;
  border:1px dashed rgba(58,142,238,.26);border-radius:12px;
  background:radial-gradient(circle at 50% 45%,rgba(46,111,255,.12),transparent 26%);
}
html[data-legi-step="17"] .layoutPreviewRow{
  border:1px solid rgba(38,124,227,.32);border-radius:12px;padding:9px;background:rgba(3,18,42,.74)
}
html[data-legi-step="17"] .layoutPreviewRow img{max-height:230px;object-fit:contain!important;width:100%!important}

/* score page */
html[data-legi-step="17"] body[data-legi-page="tinhdiem"] .progressCard{
  border-color:rgba(87,69,255,.42)!important;background:rgba(8,19,47,.84)!important
}
html[data-legi-step="17"] .scoreProgressTrack{background:#04132d!important}
html[data-legi-step="17"] .scoreProgressFill{background:linear-gradient(90deg,var(--ls17-violet),var(--ls17-cyan))!important}

/* Withdraw */
html[data-legi-step="17"] .withdraw-page{display:block!important}
html[data-legi-step="17"] .withdraw-hero.ls17-withdraw-header{
  padding:18px 20px!important;min-height:auto!important;margin-bottom:12px!important;
  background:linear-gradient(110deg,rgba(9,41,82,.94),rgba(4,20,45,.98))!important;
}
html[data-legi-step="17"] .withdraw-hero.ls17-withdraw-header h1{font-size:24px!important}
html[data-legi-step="17"] .withdraw-stats{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:0 0 12px!important
}
html[data-legi-step="17"] .withdraw-stats .stat-card{
  position:relative;overflow:hidden;padding:14px!important;min-height:96px;
}
html[data-legi-step="17"] .withdraw-stats .stat-card::before{
  content:"";position:absolute;width:54px;height:54px;border-radius:50%;right:-12px;top:-12px;background:rgba(36,200,255,.08)
}
html[data-legi-step="17"] .withdraw-stats .stat-card span{font-size:10px;color:#86a7cb}
html[data-legi-step="17"] .withdraw-stats .stat-card strong{font-size:18px;color:#dffbff}
html[data-legi-step="17"] .withdraw-stats .stat-highlight{
  border-color:rgba(42,225,194,.52)!important;background:linear-gradient(140deg,rgba(19,111,93,.25),rgba(4,20,45,.98))!important
}
html[data-legi-step="17"] .ls17-withdraw-workspace{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:12px;align-items:start
}
html[data-legi-step="17"] .ls17-withdraw-main,
html[data-legi-step="17"] .ls17-withdraw-side{display:grid;gap:12px}
html[data-legi-step="17"] .withdraw-card{padding:0!important;overflow:hidden}
html[data-legi-step="17"] .withdraw-card .ls17-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  border-bottom:1px solid rgba(42,125,215,.28);background:rgba(8,37,76,.44)
}
html[data-legi-step="17"] .withdraw-card .ls17-card-body{padding:16px}
html[data-legi-step="17"] .withdraw-form{display:grid!important;gap:11px!important}
html[data-legi-step="17"] .withdraw-form label{display:grid;gap:6px;color:#d9ecff;font-weight:750;font-size:11px}
html[data-legi-step="17"] .ls17-quick-amounts{display:flex;flex-wrap:wrap;gap:7px}
html[data-legi-step="17"] .ls17-quick-amounts button{
  padding:7px 9px;border-radius:8px;border:1px solid rgba(47,139,239,.35);background:#071d3b;color:#9fc6ee;font-size:10px;cursor:pointer
}
html[data-legi-step="17"] .withdraw-quote{
  border:1px solid rgba(52,134,225,.32)!important;background:rgba(7,28,58,.8)!important;color:#a9c4e5!important;border-radius:10px!important
}
html[data-legi-step="17"] .bank-account{
  border-color:rgba(42,127,222,.33)!important;background:rgba(5,22,48,.76)!important
}
html[data-legi-step="17"] .withdraw-history{padding:0!important}
html[data-legi-step="17"] .withdraw-history .admin-table-wrap{max-height:390px;overflow:auto}

/* Layout Studio */
html[data-legi-step="17"] .studio-hero{
  position:relative;overflow:hidden;padding:22px 24px!important;
  background:
    radial-gradient(circle at 72% 30%,rgba(96,39,255,.25),transparent 24%),
    linear-gradient(110deg,#061630,#071b3c)!important;
}
html[data-legi-step="17"] .studio-hero::after{
  content:"";position:absolute;right:3%;top:-40px;width:320px;height:220px;transform:rotate(-8deg);
  background:
    linear-gradient(135deg,transparent 42%,rgba(49,208,255,.6) 43% 44%,transparent 45%),
    linear-gradient(45deg,transparent 46%,rgba(122,61,255,.5) 47% 48%,transparent 49%);
  filter:drop-shadow(0 0 16px rgba(51,159,255,.3));opacity:.5;pointer-events:none
}
html[data-legi-step="17"] .studio-create-card{padding:18px!important}
html[data-legi-step="17"] .studio-project-layout{
  display:grid!important;grid-template-columns:320px minmax(0,1fr)!important;gap:12px!important
}
html[data-legi-step="17"] .studio-project-sidebar{position:sticky;top:calc(var(--ls17-topbar) + 14px);align-self:start}
html[data-legi-step="17"] .studio-empty{min-height:520px!important;background:
  radial-gradient(circle at 50% 50%,rgba(77,51,255,.14),transparent 22%),
  linear-gradient(180deg,rgba(5,20,43,.98),rgba(3,13,30,.99))!important
}

/* Profile */
html[data-legi-step="17"] .profile-page{display:grid;gap:12px!important}
html[data-legi-step="17"] .profile-hero{
  display:grid!important;
  grid-template-columns:130px minmax(240px,.8fr) minmax(420px,1.4fr)!important;
  gap:18px!important;align-items:center!important;padding:22px!important;position:relative;overflow:hidden
}
html[data-legi-step="17"] .profile-hero::after{
  content:"CREATE\A DESIGN\A COMPETE";white-space:pre;position:absolute;right:2%;top:22px;
  color:rgba(45,174,255,.16);font-size:30px;font-weight:950;font-style:italic;line-height:1.05;transform:rotate(-7deg);pointer-events:none
}
html[data-legi-step="17"] .profile-avatar-xl{
  width:112px!important;height:112px!important;border:2px solid #2cddff!important;
  background:radial-gradient(circle,#394eff,#6b22d9 70%,#06172f)!important;
  box-shadow:0 0 0 7px rgba(43,136,255,.10),0 0 34px rgba(42,188,255,.24)!important;
}
html[data-legi-step="17"] .profile-main-copy h1{font-size:32px!important;margin:2px 0 8px!important}
html[data-legi-step="17"] .profile-info-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;position:relative;z-index:2
}
html[data-legi-step="17"] .profile-info-grid > div{
  border:1px solid rgba(47,135,235,.36)!important;background:rgba(7,31,64,.82)!important;border-radius:11px!important;padding:11px 13px!important
}
html[data-legi-step="17"] .analytics-summary{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
html[data-legi-step="17"] .analytics-summary article{
  border:1px solid rgba(42,128,226,.34)!important;background:linear-gradient(140deg,rgba(20,64,130,.31),rgba(5,24,51,.85))!important
}
html[data-legi-step="17"] .chart-shell{border-color:rgba(44,133,232,.30)!important;background:linear-gradient(180deg,rgba(4,20,44,.82),rgba(4,15,34,.94))!important}
html[data-legi-step="17"] .profile-log-grid{gap:12px!important}

/* Policies */
html[data-legi-step="17"] .policy-main{padding-top:24px!important;padding-bottom:48px!important;max-width:1180px!important}
html[data-legi-step="17"] .policy-main > article{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
  padding:18px!important;background:linear-gradient(180deg,rgba(5,21,45,.97),rgba(3,13,30,.99))!important
}
html[data-legi-step="17"] .policy-main > article > div:first-child{
  grid-column:1/-1;padding:20px;border:1px solid rgba(42,135,234,.35);border-radius:12px;
  background:
    radial-gradient(circle at 90% 20%,rgba(73,45,255,.24),transparent 25%),
    linear-gradient(120deg,rgba(8,41,82,.85),rgba(4,19,41,.9))
}
html[data-legi-step="17"] .policy-main > article > div:first-child h1{font-size:34px!important;margin:5px 0!important}
html[data-legi-step="17"] .policy-main > article > section{
  margin:0!important;padding:16px;border:1px solid rgba(40,116,207,.28);border-radius:11px;background:rgba(5,23,49,.64)
}
html[data-legi-step="17"] .policy-main > article > section h2{font-size:15px!important;color:#dff5ff!important;margin:0 0 7px!important}
html[data-legi-step="17"] .policy-main > article > section p{font-size:12px!important;color:#93afd0!important;line-height:1.65!important;margin:0}
html[data-legi-step="17"] .policy-main > article > .row:last-child{grid-column:1/-1}

/* API / ecosystem / admin generic surfaces */
html[data-legi-step="17"] body:is(
 [data-legi-page^="founder"],
 [data-legi-page="bankapi"],
 [data-legi-page="bankapitest"],
 [data-legi-page="keyapi"],
 [data-legi-page="free-fire-api"],
 [data-legi-page="video-downloader-api"],
 [data-legi-page="discord-bot"],
 [data-legi-page="api-docs"],
 [data-legi-page="api-activity"],
 [data-legi-page="roles"],
 [data-legi-page="staff"],
 [data-legi-page="support"],
 [data-legi-page="licenses"],
 [data-legi-page="bankplans"]
) .dashboard-content > :is(.section-head,.api-intro,.service-intro,.eco-hero):first-child{
  border:1px solid rgba(45,139,244,.48)!important;
  border-radius:14px!important;
  padding:20px!important;
  margin-bottom:12px!important;
  background:
    radial-gradient(circle at 85% 30%,rgba(85,43,255,.20),transparent 26%),
    linear-gradient(110deg,rgba(7,34,72,.96),rgba(4,18,40,.98))!important;
}
html[data-legi-step="17"] .admin-table-wrap,
html[data-legi-step="17"] .tableWrap{border-radius:10px!important;border:1px solid rgba(44,126,220,.24)!important}

/* tiny depth interaction on panels */
html[data-legi-step="17"] [data-ls17-depth="1"]{
  --dx:0;--dy:0;
  transform:perspective(900px) rotateX(calc(var(--dy) * -1deg)) rotateY(calc(var(--dx) * 1deg));
  transform-origin:center;
  transition:transform .16s ease-out,border-color .18s ease,box-shadow .18s ease;
}
html[data-legi-step="17"] [data-ls17-depth="1"]:hover{
  box-shadow:var(--ls17-shadow),0 0 24px rgba(34,145,255,.09)!important;
}

/* chat */
html[data-legi-step="17"] :is(.chat-fab,#chatButton,.support-fab){
  box-shadow:0 0 20px rgba(31,214,255,.28)!important;
}

/* ---------- light-mode compatibility ---------- */
html[data-legi-step="17"][data-theme="light"]{
  --ls17-bg:#eef7ff;--ls17-bg-2:#f8fbff;--ls17-panel:#fff;--ls17-panel-2:#f2f8ff;
  --ls17-text:#102442;--ls17-white:#0a2344;--ls17-muted:#5e7797;--ls17-line-soft:#c3def7;
  color-scheme:light;
}
html[data-legi-step="17"][data-theme="light"] body{
  background:linear-gradient(180deg,#eef8ff,#f8fbff)!important;color:#102442
}
html[data-legi-step="17"][data-theme="light"] :is(.sidebar,.dashboard-topbar,.public-topbar,.site-header){
  background:rgba(246,251,255,.94)!important;color:#102442!important
}
html[data-legi-step="17"][data-theme="light"] :is(.card,.service-card,.license-card,.workspace-card,.eco-product,.api-endpoint,.stat-card){
  background:#fff!important;color:#102442!important;border-color:#c4def4!important;box-shadow:0 14px 34px rgba(27,76,117,.10)!important
}
html[data-legi-step="17"][data-theme="light"] :is(h1,h2,h3,h4,strong){color:#102442}
html[data-legi-step="17"][data-theme="light"] :is(.input,.select,input,select,textarea){background:#fff!important;color:#102442!important;border-color:#b9d8f2!important}
html[data-legi-step="17"][data-theme="light"] .ls17-hero{background:linear-gradient(120deg,#eaf7ff,#dfeeff)!important}
html[data-legi-step="17"][data-theme="light"] .ls17-hero h1{color:#102442!important}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  html[data-legi-step="17"] .ls17-hero{grid-template-columns:minmax(0,1fr) 360px!important}
  html[data-legi-step="17"] .legacy-service-stage > .grid.two.mainGrid{grid-template-columns:minmax(0,1fr) minmax(340px,.82fr)!important}
  html[data-legi-step="17"] .profile-hero{grid-template-columns:110px 1fr!important}
  html[data-legi-step="17"] .profile-info-grid{grid-column:1/-1!important}
  html[data-legi-step="17"] .analytics-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:980px){
  html[data-legi-step="17"] .dashboard-shell{display:block!important}
  html[data-legi-step="17"] .dashboard-main{grid-column:auto!important}
  html[data-legi-step="17"] .sidebar{
    width:min(86vw,300px)!important;
    transform:translateX(-104%);
    transition:transform .22s ease!important;
  }
  html[data-legi-step="17"] body.sidebar-open .sidebar{transform:translateX(0)}
  html[data-legi-step="17"] .dashboard-content{width:min(100% - 24px,var(--ls17-content-max))!important;padding-top:12px!important}
  html[data-legi-step="17"] .ls17-hero{grid-template-columns:1fr!important}
  html[data-legi-step="17"] .ls17-hero-visual{min-height:210px}
  html[data-legi-step="17"] .legacy-service-stage > .grid.two.mainGrid{grid-template-columns:1fr!important}
  html[data-legi-step="17"] body:is([data-legi-page="tinhdiem"],[data-legi-page="taobanner"],[data-legi-page="taolineup"],[data-legi-page="taoprofile"],[data-legi-page="taoqr"]) .mainGrid > .card.soft{position:relative;top:auto;min-height:0}
  html[data-legi-step="17"] .withdraw-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[data-legi-step="17"] .ls17-withdraw-workspace{grid-template-columns:1fr}
  html[data-legi-step="17"] .studio-project-layout{grid-template-columns:1fr!important}
  html[data-legi-step="17"] .studio-project-sidebar{position:relative;top:auto}
  html[data-legi-step="17"] .policy-main > article{grid-template-columns:1fr!important}
  html[data-legi-step="17"] .policy-main > article > :is(div:first-child,.row:last-child){grid-column:1!important}
}
@media (max-width:680px){
  html[data-legi-step="17"] .dashboard-topbar{padding:7px 10px!important}
  html[data-legi-step="17"] .dashboard-content{width:calc(100% - 16px)!important}
  html[data-legi-step="17"] .ls17-hero-copy,
  html[data-legi-step="17"] .ls17-hero .ls16-intro-copy{padding:20px 16px!important}
  html[data-legi-step="17"] .ls17-hero h1{font-size:clamp(1.8rem,10vw,2.6rem)!important}
  html[data-legi-step="17"] .ls17-feature-row{display:grid;grid-template-columns:1fr 1fr;width:100%}
  html[data-legi-step="17"] .ls17-feature{min-width:0}
  html[data-legi-step="17"] .ls17-hero-visual{min-height:190px}
  html[data-legi-step="17"] .ls17-core{width:92px;height:92px}
  html[data-legi-step="17"] .ls17-orbit.o1{width:260px}
  html[data-legi-step="17"] .ls17-orbit.o2{width:235px}
  html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] #keyForm{grid-template-columns:1fr}
  html[data-legi-step="17"] body[data-legi-page="keytinhdiem"] #keyForm :is(.field:nth-of-type(1),.field:nth-of-type(2),.field:nth-of-type(3),.field:nth-of-type(4),.row.end){grid-column:1!important;grid-row:auto!important}
  html[data-legi-step="17"] body[data-legi-page="teams"] #teamForm .memberGrid{grid-template-columns:1fr!important}
  html[data-legi-step="17"] .withdraw-stats{grid-template-columns:1fr!important}
  html[data-legi-step="17"] .profile-hero{grid-template-columns:1fr!important;text-align:center}
  html[data-legi-step="17"] .profile-avatar-xl{margin:auto}
  html[data-legi-step="17"] .profile-info-grid{grid-template-columns:1fr!important}
  html[data-legi-step="17"] .analytics-summary{grid-template-columns:1fr!important}
  html[data-legi-step="17"] .profile-log-grid{grid-template-columns:1fr!important}
  html[data-legi-step="17"] .policy-main{padding-left:8px!important;padding-right:8px!important}
}
@media (prefers-reduced-motion:reduce){
  html[data-legi-step="17"] .ls17-core,
  html[data-legi-step="17"] .ls17-orbit{animation-duration:.001ms!important;animation-iteration-count:1!important}
  html[data-legi-step="17"] [data-ls17-depth="1"],
  html[data-legi-step="17"] .ls17-scene{transform:none!important}
}


/* ==========================================================================
   STEP 17.0.1 — generic consoles, light-mode contrast and mobile drawer hotfix
   ========================================================================== */

/* Generic service/admin pages now use the same cinematic card language as the
   rebuilt detail pages instead of inheriting the old flat STEP 5/7 layout. */
html[data-legi-step="17"] body.ls17-generic-dashboard .dashboard-content{
  display:grid!important;
  gap:14px!important;
  align-content:start!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard .dashboard-content > .ls17-hero{
  grid-column:1/-1;
}
html[data-legi-step="17"] body.ls17-generic-dashboard .ls17-section-card,
html[data-legi-step="17"] body.ls17-generic-dashboard .dashboard-content > section.card:not(.ls17-hero){
  position:relative;
  overflow:hidden;
  border:1px solid rgba(44,136,245,.44)!important;
  background:
    radial-gradient(circle at 100% 0,rgba(56,52,255,.10),transparent 30%),
    linear-gradient(180deg,rgba(5,22,47,.98),rgba(3,14,31,.99))!important;
  box-shadow:0 16px 38px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.03)!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard .ls17-section-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--ls17-cyan),transparent 72%);
  opacity:.72;
  pointer-events:none;
}
html[data-legi-step="17"] body.ls17-generic-dashboard .ls17-section-card > :is(h2,.api-section-head,.step5-toolbar,.section-head):first-child{
  margin-top:0!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard :is(.step5-card,.workspace-card,.ls17-section-card){
  padding:18px!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard :is(.step71-two-column,.discord-layout,.step5-grid,.api-docs-grid,.ls17-workspace-grid){
  gap:14px!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard .api-summary-grid{
  gap:12px!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard .api-summary-grid > *,
html[data-legi-step="17"] body.ls17-generic-dashboard .step5-stats > *,
html[data-legi-step="17"] body.ls17-generic-dashboard .step71-meta-grid > *{
  border:1px solid rgba(48,132,229,.34)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(8,32,65,.88),rgba(4,19,41,.92))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard .api-section-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding-bottom:12px!important;
  margin-bottom:14px!important;
  border-bottom:1px solid rgba(44,126,220,.27)!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard :is(.api-status-pill,.api-type-pill,.eco-tag){
  border:1px solid rgba(36,218,255,.42)!important;
  background:rgba(5,48,78,.82)!important;
  color:#99f5ff!important;
  box-shadow:0 0 18px rgba(25,204,255,.10)!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard :is(.api-table-wrap,.admin-table-wrap,.tableWrap){
  overflow:auto;
  border:1px solid rgba(44,126,220,.28)!important;
  border-radius:12px!important;
  background:rgba(2,12,28,.56)!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard :is(.api-table,.admin-table) tbody tr:hover{
  background:rgba(24,102,192,.12)!important;
}
html[data-legi-step="17"] body.ls17-generic-dashboard :is(code,.api-code,pre){
  color:#bceeff!important;
}

/* Video downloader was the only dashboard page still using the old shell and
   linear card stack. It now gets a proper hero and desktop workspace. */
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .ls17-video-api-page{
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr)!important;
}
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .ls17-video-api-page > .ls17-hero{
  grid-column:1/-1!important;
}
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .ls17-video-block-1,
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .ls17-video-block-2{
  min-height:100%;
}
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .ls17-video-block-3{
  grid-column:1/-1;
}
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .ls17-video-block-4{
  grid-column:1;
}
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .ls17-video-block-5{
  grid-column:2;
}
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .step71-plan-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .step71-plan-grid > *{
  min-width:0;
  border-radius:13px!important;
  border:1px solid rgba(47,151,248,.34)!important;
  background:
    radial-gradient(circle at 100% 0,rgba(103,48,255,.13),transparent 34%),
    linear-gradient(180deg,rgba(7,29,58,.96),rgba(4,18,38,.98))!important;
}
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] #summary{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] #result{
  min-height:160px;
  margin-top:14px;
  border-radius:10px;
  padding:14px;
  background:#020a17!important;
  border:1px solid rgba(40,128,230,.28)!important;
}

/* Service pages with already-good internal grids get a stronger premium frame. */
html[data-legi-step="17"] body.ls17-service-console :is(.step71-two-column,.discord-layout){
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
html[data-legi-step="17"] body[data-legi-page="licenses"] .eco-grid,
html[data-legi-step="17"] body[data-legi-page="discord-bot"] .guild-grid,
html[data-legi-step="17"] body[data-legi-page="enterprise"] .asset-grid{
  gap:14px!important;
}
html[data-legi-step="17"] body[data-legi-page="licenses"] .eco-product,
html[data-legi-step="17"] body[data-legi-page="discord-bot"] .guild-card,
html[data-legi-step="17"] body[data-legi-page="enterprise"] .asset-card{
  border-radius:13px!important;
  border-color:rgba(45,143,244,.42)!important;
  background:linear-gradient(180deg,rgba(6,25,52,.97),rgba(3,16,34,.99))!important;
}

/* Founder/staff console: keep dense data usable but visually aligned. */
html[data-legi-step="17"] body .ls17-admin-console .founder-nav{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  padding:10px!important;
  margin:0 0 2px!important;
  border:1px solid rgba(44,129,226,.32)!important;
  border-radius:12px!important;
  background:rgba(4,17,37,.86)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18)!important;
}
html[data-legi-step="17"] body .ls17-admin-console .step5-chart-grid{
  gap:14px!important;
}
html[data-legi-step="17"] body .ls17-admin-console .step5-chart{
  border:1px solid rgba(44,126,220,.28)!important;
  border-radius:12px!important;
  background:rgba(3,15,32,.7)!important;
}

/* --------------------------------------------------------------------------
   Light theme: exhaustive contrast repair.
   STEP 17.0.0 inherited several explicit dark-mode colors from the sidebar,
   cards and generated service components, which caused white-on-white text.
   -------------------------------------------------------------------------- */
html[data-legi-step="17"][data-theme="light"]{
  --ls17-bg:#eef7fc;
  --ls17-bg-2:#f8fcff;
  --ls17-panel:#ffffff;
  --ls17-panel-2:#f3f9fd;
  --ls17-panel-3:#eaf5fb;
  --ls17-text:#10253b;
  --ls17-white:#0a2138;
  --ls17-muted:#5a748e;
  --ls17-shadow:0 14px 34px rgba(28,73,106,.10);
}
html[data-legi-step="17"][data-theme="light"] body{
  background:
    radial-gradient(circle at 90% 0,rgba(36,188,232,.11),transparent 28%),
    linear-gradient(180deg,#f4fbff,#edf7fc 58%,#f8fcff)!important;
  color:#10253b!important;
}
html[data-legi-step="17"][data-theme="light"] body::before{
  background-image:
    linear-gradient(rgba(17,126,175,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,126,175,.035) 1px,transparent 1px);
}
html[data-legi-step="17"][data-theme="light"] .sidebar{
  background:
    radial-gradient(circle at 35% -5%,rgba(41,205,236,.13),transparent 32%),
    linear-gradient(180deg,rgba(248,253,255,.99),rgba(238,248,253,.99))!important;
  border-right-color:#c8e3ef!important;
  box-shadow:12px 0 34px rgba(31,75,102,.08)!important;
}
html[data-legi-step="17"][data-theme="light"] .sidebar .brand{
  border-bottom-color:#d7e9f2!important;
}
html[data-legi-step="17"][data-theme="light"] .sidebar .brand-name,
html[data-legi-step="17"][data-theme="light"] .account-copy strong,
html[data-legi-step="17"][data-theme="light"] .dashboard-topbar .page-heading strong{
  color:#0b2940!important;
}
html[data-legi-step="17"][data-theme="light"] .sidebar .brand-tagline,
html[data-legi-step="17"][data-theme="light"] .account-copy span,
html[data-legi-step="17"][data-theme="light"] .dashboard-topbar .page-heading span{
  color:#648097!important;
}
html[data-legi-step="17"][data-theme="light"] .sidebar-label{
  color:#59778e!important;
}
html[data-legi-step="17"][data-theme="light"] .sidebar-nav :is(a,.nav-item){
  color:#46647b!important;
  background:transparent!important;
}
html[data-legi-step="17"][data-theme="light"] .sidebar-nav :is(a,.nav-item):hover{
  color:#0a3049!important;
  border-color:#b9e0ed!important;
  background:#e9f8fc!important;
}
html[data-legi-step="17"][data-theme="light"] .sidebar-nav :is(a.active,.nav-item.active,[aria-current="page"]){
  color:#073a50!important;
  border-color:#7dddea!important;
  background:linear-gradient(90deg,#dff9fb,#c8f4fa)!important;
  box-shadow:inset 3px 0 0 #13c9df,0 7px 20px rgba(24,176,205,.10)!important;
}
html[data-legi-step="17"][data-theme="light"] .sidebar-bottom{
  border-top-color:#d2e7f0!important;
  background:linear-gradient(180deg,transparent,rgba(242,250,253,.97) 18%)!important;
}
html[data-legi-step="17"][data-theme="light"] .account-button{
  color:#10253b!important;
  border-color:#bfe0ec!important;
  background:linear-gradient(180deg,#fff,#edf8fc)!important;
  box-shadow:0 7px 18px rgba(23,88,117,.07)!important;
}
html[data-legi-step="17"][data-theme="light"] .avatar-letter{
  color:#063344!important;
  background:linear-gradient(135deg,#67e8f9,#22cfe5)!important;
}
html[data-legi-step="17"][data-theme="light"] .dashboard-topbar{
  background:rgba(247,252,255,.94)!important;
  border-bottom-color:#c9e3ee!important;
  box-shadow:0 8px 24px rgba(24,76,104,.07)!important;
}
html[data-legi-step="17"][data-theme="light"] .balance-button{
  color:#0b2d43!important;
  background:linear-gradient(180deg,#fff,#edf8fc)!important;
  border-color:#a7dbe8!important;
  box-shadow:none!important;
}
html[data-legi-step="17"][data-theme="light"] :is(.card,.step5-card,.service-card,.license-card,.workspace-card,.eco-product,.api-endpoint,.stat-card),
html[data-legi-step="17"][data-theme="light"] body.ls17-generic-dashboard .ls17-section-card,
html[data-legi-step="17"][data-theme="light"] body.ls17-generic-dashboard .dashboard-content > section.card:not(.ls17-hero){
  color:#10253b!important;
  background:#fff!important;
  border-color:#c6e0ec!important;
  box-shadow:0 13px 30px rgba(24,72,104,.08)!important;
}
html[data-legi-step="17"][data-theme="light"] :is(.card,.step5-card,.service-card,.license-card,.workspace-card,.eco-product,.api-endpoint,.stat-card) :is(h1,h2,h3,h4,h5,h6,strong,label),
html[data-legi-step="17"][data-theme="light"] body.ls17-generic-dashboard :is(h1,h2,h3,h4,h5,h6,strong,label){
  color:#10253b!important;
}
html[data-legi-step="17"][data-theme="light"] :is(.muted,p,.form-label,.label,.api-section-head p,.section-head p){
  color:#5b748d!important;
}
html[data-legi-step="17"][data-theme="light"] :is(.input,.select,input,select,textarea){
  color:#10253b!important;
  background:#fbfdff!important;
  border-color:#bcdbea!important;
}
html[data-legi-step="17"][data-theme="light"] :is(input,textarea)::placeholder{
  color:#7991a6!important;
}
html[data-legi-step="17"][data-theme="light"] .btn:not(.btn-primary):not(.primary){
  color:#14344b!important;
  background:linear-gradient(180deg,#fff,#eef8fc)!important;
  border-color:#b9dbe8!important;
}
html[data-legi-step="17"][data-theme="light"] .btn-danger{
  color:#bf3558!important;
  border-color:#efb6c4!important;
  background:#fff7f9!important;
}
html[data-legi-step="17"][data-theme="light"] :is(table,.api-table,.admin-table){
  color:#17354c!important;
}
html[data-legi-step="17"][data-theme="light"] :is(table,.api-table,.admin-table) thead{
  color:#0b6680!important;
  background:#edf8fc!important;
}
html[data-legi-step="17"][data-theme="light"] :is(table,.api-table,.admin-table) :is(th,td){
  border-color:#d7e8f0!important;
}
html[data-legi-step="17"][data-theme="light"] body.ls17-generic-dashboard :is(.api-table-wrap,.admin-table-wrap,.tableWrap){
  background:#fbfdff!important;
  border-color:#c8e0ec!important;
}
html[data-legi-step="17"][data-theme="light"] body.ls17-generic-dashboard .api-summary-grid > *,
html[data-legi-step="17"][data-theme="light"] body.ls17-generic-dashboard .step5-stats > *,
html[data-legi-step="17"][data-theme="light"] body.ls17-generic-dashboard .step71-meta-grid > *{
  color:#10253b!important;
  background:linear-gradient(180deg,#fff,#f2f9fc)!important;
  border-color:#c4e0eb!important;
}
html[data-legi-step="17"][data-theme="light"] body.ls17-generic-dashboard :is(code,.api-code,pre){
  color:#164d69!important;
  background:#f2f8fc!important;
}
html[data-legi-step="17"][data-theme="light"] body.ls17-generic-dashboard :is(.api-status-pill,.api-type-pill,.eco-tag){
  color:#08708a!important;
  background:#e8fbfd!important;
  border-color:#8bdde8!important;
}
html[data-legi-step="17"][data-theme="light"] .founder-nav{
  background:#fff!important;
  border-color:#c7e1ec!important;
}

/* Keep the hero copy bright and high-contrast in light mode without placing
   white text on a white surface. The visual half remains cinematic. */
html[data-legi-step="17"][data-theme="light"] .ls17-hero{
  background:
    radial-gradient(circle at 80% 20%,rgba(62,115,255,.13),transparent 28%),
    linear-gradient(120deg,#f8fcff 0%,#eaf7fd 55%,#e0f2fb 100%)!important;
  border-color:#a8dcec!important;
}
html[data-legi-step="17"][data-theme="light"] .ls17-hero .ls17-hero-copy :is(h1,h2,h3,strong){
  color:#09263e!important;
}
html[data-legi-step="17"][data-theme="light"] .ls17-hero .ls17-hero-copy :is(p,.muted){
  color:#58748e!important;
}
html[data-legi-step="17"][data-theme="light"] .ls17-hero .eyebrow{
  color:#068aa4!important;
}
html[data-legi-step="17"][data-theme="light"] .ls17-feature{
  color:#17384f!important;
  background:rgba(255,255,255,.78)!important;
  border-color:#b8dfea!important;
}
html[data-legi-step="17"][data-theme="light"] .ls17-feature strong{color:#17384f!important}
html[data-legi-step="17"][data-theme="light"] .ls17-feature small{color:#6a8398!important}
html[data-legi-step="17"][data-theme="light"] .ls17-hero-visual{
  background:
    radial-gradient(circle at 55% 60%,rgba(0,187,255,.22),transparent 25%),
    linear-gradient(135deg,rgba(5,27,65,.94),rgba(10,39,95,.96))!important;
}

/* --------------------------------------------------------------------------
   Mobile/tablet sidebar hotfix.
   app.js toggles .sidebar.open; STEP 17.0.0 accidentally waited for
   body.sidebar-open and also placed the backdrop above the drawer.
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  html[data-legi-step="17"] .sidebar{
    z-index:130!important;
    transform:translate3d(-105%,0,0)!important;
    visibility:hidden;
    opacity:.985;
    pointer-events:none;
    will-change:transform;
  }
  html[data-legi-step="17"] .sidebar.open,
  html[data-legi-step="17"] body.sidebar-open .sidebar{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  html[data-legi-step="17"] .sidebar-backdrop{
    z-index:120!important;
  }
  html[data-legi-step="17"] .sidebar-backdrop.show{
    display:block!important;
  }
  html[data-legi-step="17"] body.sidebar-modal-open{
    overflow:hidden!important;
    touch-action:none;
  }
  html[data-legi-step="17"] .menu-button{
    display:inline-grid!important;
    place-items:center;
    flex:0 0 auto;
  }
  html[data-legi-step="17"] body.ls17-service-console :is(.step71-two-column,.discord-layout){
    grid-template-columns:1fr!important;
  }
  html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .ls17-video-api-page{
    grid-template-columns:1fr!important;
  }
  html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .ls17-video-api-page > *{
    grid-column:1!important;
  }
  html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .step71-plan-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:560px){
  html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] .step71-plan-grid{
    grid-template-columns:1fr!important;
  }
  html[data-legi-step="17"] body[data-legi-page="video-downloader-api"] #summary{
    grid-template-columns:1fr!important;
  }
  html[data-legi-step="17"] body.ls17-generic-dashboard :is(.step5-card,.workspace-card,.ls17-section-card){
    padding:14px!important;
  }
}

/* Version marker for runtime diagnostics */
html[data-legi-step="17"] body[data-legi-ui="18.0.0"]{--ls17-patch:"18.0.0";}


html[data-legi-step="17"][data-theme="light"] :is(.public-topbar,.site-header) :is(.brand-name,.header-nav a,.site-nav a,.nav-link){
  color:#12344b!important;
}
html[data-legi-step="17"][data-theme="light"] :is(.public-topbar,.site-header) .brand-tagline{
  color:#688298!important;
}


/* ==========================================================================
   STEP 17.0.2 — responsive composition + unified light theme
   - Mobile heroes are real stacked layouts instead of squeezed desktop grids.
   - "auto" theme receives the same STEP 17 palette as explicit light mode.
   - Service, API and License cards no longer mix dark surfaces into light mode.
   ========================================================================== */

html[data-legi-step="17"] body[data-legi-ui="18.0.0"]{--ls17-patch:"18.0.0";}

/* The JS runtime resolves data-theme="auto" to this attribute. */
html[data-legi-step="17"][data-ls17-resolved-theme="light"]{
  --ls17-bg:#eef7fc;
  --ls17-bg-2:#f8fcff;
  --ls17-panel:#ffffff;
  --ls17-panel-2:#f3f9fd;
  --ls17-panel-3:#e9f5fb;
  --ls17-text:#10253b;
  --ls17-white:#0a2138;
  --ls17-muted:#5a748e;
  --ls17-line:#58bad2;
  --ls17-line-soft:rgba(34,139,177,.18);
  --ls17-shadow:0 14px 34px rgba(28,73,106,.10);
  color-scheme:light;
}

html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body{
  color:#10253b!important;
  background:
    radial-gradient(circle at 88% 0,rgba(28,190,224,.11),transparent 30%),
    radial-gradient(circle at 8% 24%,rgba(73,135,255,.055),transparent 28%),
    linear-gradient(180deg,#f5fbfe 0%,#edf7fb 52%,#f9fcfe 100%)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body::before{
  background-image:
    linear-gradient(rgba(18,126,169,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,126,169,.035) 1px,transparent 1px)!important;
}

/* Shared shell, including the account block at the bottom of the sidebar. */
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .sidebar{
  background:
    radial-gradient(circle at 35% -5%,rgba(41,205,236,.13),transparent 32%),
    linear-gradient(180deg,rgba(249,253,255,.995),rgba(238,248,253,.995))!important;
  border-right-color:#c7e3ee!important;
  box-shadow:12px 0 34px rgba(31,75,102,.08)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .dashboard-topbar{
  color:#10253b!important;
  background:rgba(248,253,255,.96)!important;
  border-bottom-color:#c9e3ee!important;
  box-shadow:0 8px 24px rgba(24,76,104,.07)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) :is(
  .sidebar .brand-name,.account-copy strong,.dashboard-topbar .page-heading strong
){color:#0b2940!important}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) :is(
  .sidebar .brand-tagline,.account-copy span,.dashboard-topbar .page-heading span,.sidebar-label
){color:#627f96!important}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .sidebar-nav :is(a,.nav-item){
  color:#49687f!important;background:transparent!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .sidebar-nav :is(a,.nav-item):hover{
  color:#0a3049!important;border-color:#b9e0ed!important;background:#e9f8fc!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .sidebar-nav :is(a.active,.nav-item.active,[aria-current="page"]){
  color:#073a50!important;
  border-color:#70d9e8!important;
  background:linear-gradient(90deg,#e2fafc,#c9f3f7)!important;
  box-shadow:inset 3px 0 0 #13c9df,0 7px 20px rgba(24,176,205,.10)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .sidebar-bottom{
  border-top-color:#d2e7f0!important;
  background:linear-gradient(180deg,transparent,rgba(242,250,253,.98) 18%)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .account-button{
  color:#10253b!important;
  border-color:#bfe0ec!important;
  background:linear-gradient(180deg,#fff,#edf8fc)!important;
  box-shadow:0 7px 18px rgba(23,88,117,.07)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .balance-button{
  color:#0b2d43!important;background:linear-gradient(180deg,#fff,#edf8fc)!important;
  border-color:#a7dbe8!important;box-shadow:none!important;
}

/* One light visual language for every STEP 17 panel. */
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) :is(
  .card,.card.soft,.step5-card,.service-card,.license-card,.workspace-card,.eco-product,.api-endpoint,.stat-card,
  .withdraw-card,.studio-create-card,.profile-hero,.modal,.access-state-card
){
  color:#10253b!important;
  background:
    radial-gradient(circle at 100% 0,rgba(36,188,232,.055),transparent 30%),
    linear-gradient(180deg,#ffffff,#fbfdff)!important;
  border-color:#c5e0eb!important;
  box-shadow:0 13px 30px rgba(24,72,104,.08)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) :is(
  .card,.card.soft,.step5-card,.service-card,.license-card,.workspace-card,.eco-product,.api-endpoint,.stat-card,
  .withdraw-card,.studio-create-card,.profile-hero
) :is(h1,h2,h3,h4,h5,h6,strong,label,.label,.form-label){
  color:#10253b!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) :is(
  .muted,p,.small,.form-help,.hint,.api-section-head p,.section-head p
){
  color:#5b748d!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) :is(.input,.select,input,select,textarea){
  color:#10253b!important;background:#fbfdff!important;border-color:#bcdbea!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) :is(input,textarea)::placeholder{
  color:#7891a6!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .btn:not(.btn-primary):not(.primary){
  color:#14344b!important;background:linear-gradient(180deg,#fff,#eef8fc)!important;border-color:#b9dbe8!important;
}

/* Hero: light mode is a single continuous surface instead of a light/dark split. */
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-hero,
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body:is(
  [data-legi-page^="founder"],[data-legi-page="bankapi"],[data-legi-page="bankapitest"],[data-legi-page="keyapi"],
  [data-legi-page="free-fire-api"],[data-legi-page="video-downloader-api"],[data-legi-page="discord-bot"],
  [data-legi-page="api-docs"],[data-legi-page="api-activity"],[data-legi-page="roles"],[data-legi-page="staff"],
  [data-legi-page="support"],[data-legi-page="licenses"],[data-legi-page="bankplans"],[data-legi-page="enterprise"]
) .dashboard-content > :is(.section-head,.api-intro,.service-intro,.eco-hero):first-child{
  color:#10253b!important;
  background:
    radial-gradient(circle at 79% 18%,rgba(36,188,232,.14),transparent 29%),
    radial-gradient(circle at 98% 80%,rgba(84,111,255,.07),transparent 24%),
    linear-gradient(120deg,#fbfeff 0%,#eef9fd 54%,#e7f5fb 100%)!important;
  border-color:#a9dce9!important;
  box-shadow:0 14px 34px rgba(29,83,111,.09)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-hero :is(h1,h2,h3,strong),
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-hero .ls16-intro-copy :is(h1,h2,h3,strong){
  color:#09263e!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-hero :is(p,.muted){
  color:#58748e!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-hero .eyebrow{color:#078ba4!important}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-hero-visual{
  background:
    radial-gradient(circle at 54% 56%,rgba(22,201,230,.20),transparent 27%),
    radial-gradient(circle at 76% 24%,rgba(88,97,255,.07),transparent 32%),
    linear-gradient(135deg,#f7fcff,#e8f7fc)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-stage-grid{
  background:
    radial-gradient(ellipse,rgba(0,181,210,.12),transparent 52%),
    repeating-radial-gradient(ellipse at center,rgba(27,139,199,.22) 0 1px,transparent 2px 28px)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-core::before,
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-core::after{
  border-color:rgba(31,169,207,.72)!important;
  background:linear-gradient(145deg,rgba(123,231,244,.42),rgba(122,148,255,.15))!important;
  box-shadow:inset 0 0 28px rgba(38,198,255,.13),0 12px 32px rgba(36,111,154,.14)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-core-face{
  color:#0b3850!important;
  border-color:rgba(38,174,207,.68)!important;
  background:radial-gradient(circle,#f8feff,#dff6fb 72%)!important;
  box-shadow:0 9px 26px rgba(38,127,163,.14)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-core-face strong{color:#0b3850!important}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-satellite{
  color:#184359!important;
  border-color:#8bd8e7!important;
  background:linear-gradient(145deg,#ffffff,#e9f8fc)!important;
  box-shadow:0 10px 28px rgba(42,112,144,.12),inset 0 0 18px rgba(36,190,255,.07)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-satellite b{color:#184359!important}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-feature{
  color:#17384f!important;background:rgba(255,255,255,.88)!important;border-color:#b8dfea!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-feature strong{color:#17384f!important}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-feature small{color:#6a8398!important}

/* Old service component internals had explicit dark fills. Normalize them too. */
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .legacy-service-stage .card > .hd{
  color:#10253b!important;
  background:linear-gradient(90deg,#f3fafc,#eef8fb)!important;
  border-bottom-color:#cce3ec!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .legacy-service-stage .card > .bd{
  color:#10253b!important;background:transparent!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) :is(
  .logoPicker,.layoutPreviewRow,.withdraw-quote,.bank-account,.scoreProgressTrack,.profile-info-grid > div,
  .analytics-summary article,.chart-shell,.step5-chart,.api-table-wrap,.admin-table-wrap,.tableWrap
){
  color:#10253b!important;background:#f8fcfe!important;border-color:#c6e0eb!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .progressCard{
  color:#10253b!important;background:#fff!important;border-color:#c6e0eb!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .withdraw-hero.ls17-withdraw-header,
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .studio-hero,
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .studio-empty{
  color:#10253b!important;
  background:
    radial-gradient(circle at 78% 20%,rgba(36,188,232,.11),transparent 30%),
    linear-gradient(120deg,#ffffff,#edf9fc)!important;
  border-color:#c4e0eb!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .withdraw-card .ls17-card-head{
  background:#f3fafd!important;border-bottom-color:#cae1eb!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .ls17-quick-amounts button{
  color:#345c73!important;background:#f7fcfe!important;border-color:#bedee9!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .policy-main > article,
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .policy-main > article > :is(div:first-child,section){
  color:#10253b!important;background:#fff!important;border-color:#c7e1eb!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .policy-main > article > section h2{color:#10253b!important}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) .policy-main > article > section p{color:#5b748d!important}

/* Generic service/admin dashboard cards. */
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body.ls17-generic-dashboard .ls17-section-card,
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body.ls17-generic-dashboard .dashboard-content > section.card:not(.ls17-hero),
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body.ls17-generic-dashboard .api-summary-grid > *,
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body.ls17-generic-dashboard .step5-stats > *,
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body.ls17-generic-dashboard .step71-meta-grid > *{
  color:#10253b!important;background:linear-gradient(180deg,#fff,#f4fafc)!important;border-color:#c6e0eb!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="video-downloader-api"] .step71-plan-grid > *{
  color:#10253b!important;background:linear-gradient(180deg,#fff,#f3fafc)!important;border-color:#c6e0eb!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="video-downloader-api"] #result{
  color:#17455f!important;background:#f3f9fc!important;border-color:#c3dfe9!important;
}

/* License Center: force product and ownership cards to use the same light palette. */
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="licenses"] .eco-product{
  color:#10253b!important;
  background:linear-gradient(180deg,#ffffff,#f9fcfe)!important;
  border-color:#bddde9!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="licenses"] .eco-product :is(h3,strong){
  color:#10253b!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="licenses"] .eco-product :is(p,.eco-price span,.ownership-note){
  color:#5b748d!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="licenses"] .eco-product .eco-price strong{
  color:#087c9a!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="licenses"] :is(.eco-ownership,.license-meta > div,.ls16-product-visual){
  color:#17384f!important;
  background:linear-gradient(180deg,#f8fcfe,#eef9fc)!important;
  border-color:#c3e1eb!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="licenses"] .eco-price > div{
  border-color:#cfe4ec!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="licenses"] .eco-product::after{
  background:radial-gradient(circle at 50% 4%,rgba(25,196,220,.08),transparent 42%)!important;
}

/* ---------------------- responsive layout repairs ----------------------- */
@media (max-width:980px){
  html[data-legi-step="17"] .ls17-hero,
  html[data-legi-step="17"] :is(.section-head,.service-intro,.api-intro,.step5-hero,.eco-hero).ls17-hero{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(176px,auto)!important;
    min-height:0!important;
    width:100%!important;
  }
  html[data-legi-step="17"] .ls17-hero > .ls17-hero-copy,
  html[data-legi-step="17"] .ls17-hero > .ls16-intro-copy{
    grid-column:1!important;grid-row:1!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    box-sizing:border-box!important;
  }
  html[data-legi-step="17"] .ls17-hero > .ls17-hero-visual{
    grid-column:1!important;grid-row:2!important;
    width:100%!important;max-width:none!important;min-width:0!important;
  }
  html[data-legi-step="17"] .ls17-hero h1{
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    text-wrap:balance;
  }

  html[data-legi-step="17"] body[data-legi-page="licenses"] .eco-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:680px){
  html[data-legi-step="17"] .dashboard-content{
    width:calc(100% - 14px)!important;
    padding-top:9px!important;
  }
  html[data-legi-step="17"] .ls17-hero-copy,
  html[data-legi-step="17"] .ls17-hero .ls16-intro-copy{
    padding:52px 16px 16px!important;
  }
  html[data-legi-step="17"] .ls17-hero h1{
    margin:4px 0 8px!important;
    font-size:clamp(1.8rem,8.6vw,2.55rem)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
  }
  html[data-legi-step="17"] .ls17-hero p{
    max-width:42rem!important;
    font-size:12px!important;
    line-height:1.55!important;
  }
  html[data-legi-step="17"] .ls17-hero .role-badge{
    top:12px!important;right:12px!important;
    max-width:42%!important;
    font-size:10px!important;
  }
  html[data-legi-step="17"] .ls17-feature-row{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    margin-top:14px!important;
  }
  html[data-legi-step="17"] .ls17-feature{
    min-width:0!important;
    width:100%!important;
    min-height:64px!important;
    padding:8px!important;
    gap:6px!important;
    border-radius:9px!important;
  }
  html[data-legi-step="17"] .ls17-feature svg{width:16px!important;height:16px!important;flex:0 0 16px!important}
  html[data-legi-step="17"] .ls17-feature strong{
    font-size:9.5px!important;line-height:1.18!important;overflow-wrap:break-word!important;
  }
  html[data-legi-step="17"] .ls17-feature small{
    font-size:8px!important;line-height:1.25!important;overflow-wrap:break-word!important;
  }
  html[data-legi-step="17"] .ls17-hero-visual{
    min-height:176px!important;height:176px!important;
  }
  html[data-legi-step="17"] .ls17-core{width:82px!important;height:82px!important}
  html[data-legi-step="17"] .ls17-core-face{inset:12px!important}
  html[data-legi-step="17"] .ls17-core-face svg{width:28px!important;height:28px!important}
  html[data-legi-step="17"] .ls17-satellite{
    min-width:64px!important;height:38px!important;padding:0 7px!important;font-size:7.5px!important;
  }
  html[data-legi-step="17"] .ls17-satellite svg{width:13px!important;height:13px!important}
  html[data-legi-step="17"] .ls17-orbit.o1{width:min(76vw,270px)!important;height:84px!important}
  html[data-legi-step="17"] .ls17-orbit.o2{width:min(68vw,235px)!important;height:110px!important}
  html[data-legi-step="17"] .ls17-stage-grid{inset:8% 4% -20%!important}

  html[data-legi-step="17"] :is(
    .api-summary-grid,.step5-stats,.step71-meta-grid,.profile-info-grid,.analytics-summary,.withdraw-stats
  ){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html[data-legi-step="17"] .legacy-service-stage > .grid.two.mainGrid,
  html[data-legi-step="17"] .legacy-service-stage .grid.two{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html[data-legi-step="17"] .legacy-service-stage .card,
  html[data-legi-step="17"] .legacy-service-stage .card.soft{
    width:100%!important;min-width:0!important;max-width:100%!important;
  }
  html[data-legi-step="17"] body[data-legi-page="licenses"] .eco-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@media (max-width:430px){
  html[data-legi-step="17"] .dashboard-topbar{
    min-height:62px!important;padding:6px 8px!important;
  }
  html[data-legi-step="17"] .dashboard-topbar .topbar-left{
    min-width:0!important;gap:7px!important;
  }
  html[data-legi-step="17"] .dashboard-topbar .page-heading{
    min-width:0!important;max-width:46vw!important;
  }
  html[data-legi-step="17"] .dashboard-topbar .page-heading :is(strong,span){
    display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  html[data-legi-step="17"] .balance-button{
    max-width:128px!important;min-width:0!important;padding:7px 9px!important;font-size:10px!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  html[data-legi-step="17"] .ls17-feature-row{gap:5px!important}
  html[data-legi-step="17"] .ls17-feature{
    grid-template-columns:1fr!important;
    align-content:center!important;text-align:center!important;justify-items:center!important;
    min-height:58px!important;padding:6px 4px!important;
  }
  html[data-legi-step="17"] .ls17-feature small{display:none!important}
  html[data-legi-step="17"] .ls17-feature strong{font-size:9px!important}
  html[data-legi-step="17"] .ls17-hero-visual{height:162px!important;min-height:162px!important}
  html[data-legi-step="17"] :is(
    .api-summary-grid,.step5-stats,.step71-meta-grid,.profile-info-grid,.analytics-summary,.withdraw-stats
  ){
    grid-template-columns:minmax(0,1fr)!important;
  }
}


/* ==========================================================================
   STEP 17.0.3 — Founder navigation + withdrawal runtime hotfix
   ========================================================================== */

html[data-legi-step="17"] body[data-legi-ui="18.0.0"]{--ls17-patch:"18.0.0";}

/* STEP 17.0.1 changed the admin nav to flex while founder-admin.css still
   gives every link width:100%; that combination created one giant vertical
   navigation panel covering almost the whole Founder dashboard. */
html[data-legi-step="17"] body[data-legi-page="founder"] .dashboard-content.ls17-admin-console > .founder-nav,
html[data-legi-step="17"] body.founder-admin-body .founder-nav{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(118px,1fr))!important;
  align-items:stretch!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  padding:9px!important;
  margin:0 0 6px!important;
  overflow:visible!important;
  border-radius:14px!important;
}
html[data-legi-step="17"] body.founder-admin-body .founder-nav > a{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  min-height:40px!important;
  height:auto!important;
  margin:0!important;
  padding:7px 8px!important;
  line-height:1.15!important;
  white-space:normal!important;
}

/* Founder nav must follow Light/Auto theme too. */
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body.founder-admin-body .founder-nav,
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body[data-legi-page="founder"] .dashboard-content.ls17-admin-console > .founder-nav{
  color:#10253b!important;
  background:rgba(255,255,255,.96)!important;
  border-color:#c5e0eb!important;
  box-shadow:0 10px 28px rgba(24,72,104,.08)!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body.founder-admin-body .founder-nav > a{
  color:#557187!important;
  background:transparent!important;
  border-color:transparent!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body.founder-admin-body .founder-nav > a:hover{
  color:#0b354a!important;
  background:#eef9fc!important;
  border-color:#bddfe9!important;
}
html[data-legi-step="17"]:is([data-theme="light"],[data-ls17-resolved-theme="light"]) body.founder-admin-body .founder-nav > a.active{
  color:#08738c!important;
  background:linear-gradient(135deg,#e2fafc,#eef9fc)!important;
  border-color:#78d7e5!important;
  box-shadow:0 7px 18px rgba(20,166,192,.10)!important;
}

@media (max-width:1320px){
  html[data-legi-step="17"] body.founder-admin-body .founder-nav{
    grid-template-columns:repeat(4,minmax(112px,1fr))!important;
  }
}
@media (max-width:900px){
  html[data-legi-step="17"] body.founder-admin-body .founder-nav{
    position:relative!important;
    top:auto!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media (max-width:620px){
  html[data-legi-step="17"] body.founder-admin-body .founder-nav{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    padding:7px!important;
  }
  html[data-legi-step="17"] body.founder-admin-body .founder-nav > a{
    min-height:38px!important;
    font-size:.69rem!important;
  }
}
@media (max-width:390px){
  html[data-legi-step="17"] body.founder-admin-body .founder-nav{
    grid-template-columns:1fr!important;
  }
}