:root{
  --bg:#022d27;
  --panel:#06483b;
  --panel-2:#053b33;
  --line:rgba(167,243,208,.24);
  --line-strong:rgba(167,243,208,.42);
  --text:#f4fffb;
  --muted:rgba(226,255,247,.72);
  --brand:#10b981;
  --brand-2:#0ea5e9;
  --warn:#f59e0b;
  --danger:#ef4444;
  --radius:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Kanit","Sarabun",Tahoma,system-ui,sans-serif;background:
  radial-gradient(circle at 20% 0%,rgba(16,185,129,.20),transparent 34%),
  linear-gradient(135deg,#021f1c,#064e3b 62%,#022c22);color:var(--text)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.hidden{display:none!important}
.text-center{text-align:center;display:grid;place-items:center}
.center-shell,.auth-layout{min-height:100vh;display:grid;place-items:center;padding:22px}
.auth-layout{grid-template-columns:minmax(0,1fr) 420px;gap:24px;max-width:1100px;margin:0 auto}
.auth-layout.clean-login{grid-template-columns:420px;justify-content:center}
.auth-copy{width:100%;padding:32px}
.brand-line{display:flex;align-items:center;gap:14px}
.auth-title{margin-bottom:18px}
.brand-line.small{gap:10px}
.brand-mark{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--brand),#047857);display:grid;place-items:center;font-weight:1000;box-shadow:0 16px 32px rgba(16,185,129,.22)}
.brand-line.small .brand-mark{width:40px;height:40px;border-radius:12px}
h1,h2,h3,p{margin:0}
.brand-line h1{font-size:2rem;line-height:1;font-weight:1000}
.brand-line.small h1{font-size:1.25rem}
.brand-line p,.muted{color:var(--muted);font-weight:750}
.feature-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.feature-strip span,.pill{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:9px 13px;color:#d1fae5;font-weight:900}
.glass-panel{background:rgba(6,72,59,.88);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.glass-panel.compact{width:min(420px,100%)}
.auth-card h2,.glass-panel h2{font-size:1.35rem;margin-bottom:8px}
.form-stack{display:grid;gap:14px;margin-top:18px}
label{display:grid;gap:7px;color:#d1fae5;font-size:.86rem;font-weight:900}
.admin-toggle-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:12px;padding:12px 14px}
.admin-toggle-row input{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--brand)}
.admin-toggle-row.compact{align-self:end;min-height:46px}
.admin-plan-row{display:grid;grid-template-columns:1.35fr .7fr .8fr auto auto;gap:10px;align-items:end;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:14px;padding:12px}
.admin-plan-delete{min-height:46px;align-self:end}
.plan-actions{display:flex;gap:10px;flex-wrap:wrap}
input,select{width:100%;border:1px solid var(--line-strong);background:#042f2b;color:#fff;border-radius:12px;min-height:46px;padding:0 14px;outline:none;font-weight:900}
input:focus,select:focus{border-color:#67e8f9;box-shadow:0 0 0 3px rgba(103,232,249,.16)}
.password-field{position:relative;display:block;width:100%}
.password-field input{padding-right:54px}
.password-toggle{
  position:absolute;
  top:50%;
  right:7px;
  width:40px;
  height:40px;
  padding:0;
  transform:translateY(-50%);
  border:0;
  border-radius:10px;
  background:transparent;
  color:#a7f3d0;
  cursor:pointer;
  display:grid;
  place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.password-toggle:hover{background:rgba(255,255,255,.08);color:#fff}
.password-toggle:focus-visible{outline:2px solid #67e8f9;outline-offset:1px}
.password-eye{
  position:relative;
  width:22px;
  height:14px;
  display:block;
  border:2px solid currentColor;
  border-radius:50% / 62%;
}
.password-eye:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.password-toggle.is-visible .password-eye:after{
  content:"";
  position:absolute;
  left:9px;
  top:-6px;
  width:2px;
  height:27px;
  border-radius:999px;
  background:#fca5a5;
  box-shadow:0 0 0 1px #042f2b;
  transform:rotate(-45deg);
}
input[type="date"],input[type="number"],input[type="file"],select{min-width:0}
input[type="file"]{height:auto;min-height:58px;padding:11px 12px;line-height:1.5}
input[type="file"]::file-selector-button{border:0;border-radius:999px;background:rgba(255,255,255,.13);color:#fff;padding:9px 13px;margin-right:10px;font-weight:1000}
.primary-btn,.ghost-btn,.danger-btn{border:0;border-radius:12px;min-height:44px;padding:0 16px;cursor:pointer;font-weight:1000}
.primary-btn{background:linear-gradient(135deg,#10b981,#0f766e);color:#fff}
.ghost-btn{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff}
.danger-btn{background:rgba(239,68,68,.18);border:1px solid rgba(248,113,113,.38);color:#fecaca}
.quick-row{display:flex;gap:10px;margin-top:14px}
.quick-row>*{flex:1}
.contact-box{margin-top:14px;display:flex;justify-content:center}
.contact-link{border:1px solid var(--line);background:rgba(14,165,233,.14);border-radius:999px;padding:10px 14px;font-weight:1000;color:#e0f2fe}
.facebook-contact-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;background:rgba(24,119,242,.18);border-color:rgba(96,165,250,.50);box-shadow:0 14px 26px rgba(24,119,242,.12)}
.fb-app-icon{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;background:#1877f2;color:#fff;font-family:Arial,sans-serif;font-size:1.15rem;font-weight:1000;line-height:1}
.contact-link-disabled{opacity:.78;cursor:default;flex-wrap:wrap}
.contact-link-disabled small{width:100%;font-size:.68rem;color:var(--muted);font-weight:850;text-align:center;margin-top:-2px}
.lock-contact-note{margin-top:18px;border-top:1px solid rgba(255,255,255,.10);padding-top:14px;display:grid;gap:10px}
.lock-contact-note b{font-size:.95rem;color:#d1fae5}
.contact-panel{margin-top:14px;text-align:center}
.contact-panel .contact-box{margin-top:12px}
.qr-preview{display:flex;justify-content:center;margin:10px 0 4px}
.qr-preview img{width:140px;max-width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:16px;padding:8px}
.tiny-note{margin-top:14px;color:rgba(226,255,247,.58);font-size:.72rem;font-weight:800}
.site-legal-links{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap}
.site-legal-links a{color:#a7f3d0;text-decoration:underline;text-decoration-color:rgba(167,243,208,.32);text-underline-offset:3px}
.site-legal-links a:hover{color:#fff;text-decoration-color:#fff}
.member-legal-footer{margin:22px auto 0;padding:18px 12px 4px;border-top:1px solid rgba(255,255,255,.10);color:var(--muted);font-size:.78rem;font-weight:800;text-align:center}
.payment-legal-note{grid-column:1/-1;border:1px solid rgba(167,243,208,.16);border-radius:12px;background:rgba(255,255,255,.035);padding:11px 13px;color:var(--muted);font-size:.76rem;font-weight:800;line-height:1.65}
.payment-legal-note a{color:#a7f3d0;text-decoration:underline;text-underline-offset:3px}
.legal-page{min-height:100vh;padding-bottom:48px}
.legal-nav{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(167,243,208,.16);background:rgba(2,31,28,.94);backdrop-filter:blur(14px)}
.legal-nav-inner{max-width:920px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.legal-nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.legal-nav-actions a{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.05);font-size:.8rem;font-weight:900}
.legal-shell{width:min(920px,calc(100% - 28px));margin:34px auto 0}
.legal-hero{border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(6,78,59,.90),rgba(3,47,41,.96));padding:clamp(24px,5vw,42px);box-shadow:0 28px 70px rgba(0,0,0,.24)}
.legal-kicker{display:inline-flex;border:1px solid rgba(52,211,153,.32);border-radius:999px;background:rgba(16,185,129,.10);padding:7px 11px;color:#a7f3d0;font-size:.76rem;font-weight:1000}
.legal-hero h1{margin-top:14px;font-size:clamp(2rem,5vw,3.1rem);line-height:1.12}
.legal-hero p{margin-top:13px;color:var(--muted);font-weight:800;line-height:1.75}
.legal-meta{display:flex;gap:8px 14px;flex-wrap:wrap;margin-top:18px;color:#d1fae5;font-size:.78rem;font-weight:900}
.legal-summary{margin-top:16px;border-left:4px solid #34d399;border-radius:12px;background:rgba(16,185,129,.08);padding:14px 16px;color:#d1fae5;font-weight:800;line-height:1.7}
.legal-content{display:grid;gap:14px;margin-top:18px}
.legal-section{border:1px solid rgba(167,243,208,.18);border-radius:18px;background:rgba(3,47,41,.82);padding:clamp(18px,4vw,26px)}
.legal-section h2{font-size:1.2rem;line-height:1.35;margin-bottom:10px}
.legal-section h3{font-size:1rem;line-height:1.4;margin:16px 0 7px;color:#d1fae5}
.legal-section p,.legal-section li{color:var(--muted);font-weight:750;line-height:1.8}
.legal-section p+p{margin-top:9px}
.legal-list{margin:8px 0 0;padding-left:22px;display:grid;gap:7px}
.legal-section a{color:#a7f3d0;text-decoration:underline;text-underline-offset:3px}
.legal-warning{border-color:rgba(250,204,21,.28);background:rgba(113,63,18,.18)}
.legal-warning h2{color:#fde68a}
.legal-contact{display:grid;gap:10px}
.legal-contact a{width:max-content;max-width:100%;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid rgba(52,211,153,.34);border-radius:12px;background:rgba(16,185,129,.10);text-decoration:none;font-weight:1000}
.legal-footer{max-width:920px;margin:24px auto 0;padding:18px 20px;border-top:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted);font-size:.76rem;font-weight:800}
.promo-page{min-height:100vh;overflow-x:hidden;padding:18px clamp(16px,4vw,54px) 34px;background:
  radial-gradient(circle at 82% 12%,rgba(20,184,166,.22),transparent 34%),
  radial-gradient(circle at 12% 16%,rgba(245,158,11,.12),transparent 28%),
  linear-gradient(135deg,#021f1c,#064e3b 58%,#022c22)}
.promo-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 auto 42px;max-width:1120px}
.promo-brand{display:flex;align-items:center;gap:12px;font-size:1.45rem;font-weight:1000}
.promo-nav-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.promo-nav-contact:empty{display:none}
.promo-nav-contact .contact-link{min-height:44px;max-width:100%;display:inline-flex;align-items:center;white-space:nowrap;background:rgba(14,165,233,.12)}
.promo-nav-contact .contact-link-disabled small{display:none}
.nav-trial-btn{background:rgba(16,185,129,.12);border-color:rgba(110,231,183,.42);box-shadow:0 12px 28px rgba(16,185,129,.12)}
.auth-menu{position:absolute;right:0;top:56px;width:210px;background:rgba(4,47,43,.96);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 24px 50px rgba(0,0,0,.28);z-index:20}
.auth-menu button{width:100%;text-align:left;border:0;background:transparent;color:#fff;border-radius:12px;padding:12px;font-weight:1000;cursor:pointer}
.auth-menu button:hover{background:rgba(255,255,255,.08)}
.auth-switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 0}
.form-stack .auth-switcher{margin:4px 0 0}
.auth-native-submit-hidden{display:none!important}
.auth-switcher .ghost-btn{min-height:38px;padding:0 10px;font-size:.88rem}
.auth-switcher .ghost-btn.active{background:linear-gradient(135deg,#10b981,#0f766e);border-color:rgba(167,243,208,.45)}
.auth-only .promo-nav,.auth-only .promo-copy,.auth-only .promo-showcase,.auth-only .promo-grid,.auth-only .promo-disclaimer{display:none}
.auth-only .promo-page{display:grid;place-items:center;padding:18px;min-height:100vh}
.auth-only .promo-hero{display:grid;grid-template-columns:minmax(0,440px);place-items:center;width:100%;max-width:520px}
.auth-only .promo-auth-card{display:block!important;min-height:auto;width:100%}
.auth-only .auth-card{padding:26px;border-radius:24px;background:linear-gradient(145deg,rgba(4,62,53,.94),rgba(3,37,34,.96));box-shadow:0 28px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08)}
.auth-only .auth-card h2{font-size:1.7rem;margin-bottom:8px}
.auth-only label{font-size:1rem;gap:9px}
.auth-only input{min-height:58px;border-radius:14px;font-size:1.02rem;background:#032723}
.auth-only .primary-btn{min-height:58px;border-radius:14px;font-size:1.08rem}
.auth-only .auth-switcher{grid-template-columns:1fr;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:18px;padding:8px}
.auth-only .auth-switcher .ghost-btn{text-align:center;justify-content:center;min-height:48px}
.promo-hero{max-width:980px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;justify-items:start}
.promo-copy{width:100%;max-width:820px}
.promo-kicker{display:inline-flex;border:1px solid rgba(251,191,36,.34);background:rgba(245,158,11,.12);color:#fde68a;border-radius:999px;padding:9px 12px;font-weight:1000;margin-bottom:18px}
.promo-copy h1{font-size:clamp(2.1rem,4.4vw,4rem);line-height:1.06;max-width:760px}
.promo-copy p{font-size:1.05rem;line-height:1.8;color:var(--muted);font-weight:850;max-width:700px;margin-top:18px}
.promo-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.promo-stats article,.promo-grid article{border:1px solid var(--line);border-radius:18px;background:rgba(6,72,59,.72);padding:16px}
.promo-stats b{display:block;font-size:1.45rem;color:#fff}
.promo-stats span,.promo-grid p{display:block;color:var(--muted);font-weight:850;margin-top:5px;line-height:1.55}
.promo-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.promo-cta-row .primary-btn,.promo-cta-row .ghost-btn{min-width:160px}
.promo-auth-card{min-height:520px}
.promo-showcase{max-width:1180px;margin:30px auto 0;display:grid;grid-template-columns:1.05fr 1.05fr 1.25fr 1.25fr;gap:14px}
.showcase-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:
  linear-gradient(145deg,rgba(6,78,59,.88),rgba(3,47,41,.92));padding:18px;box-shadow:0 26px 50px rgba(0,0,0,.18)}
.showcase-card:before{content:"";position:absolute;inset:auto -30% -42% 20%;height:150px;background:radial-gradient(circle,rgba(16,185,129,.22),transparent 66%);pointer-events:none}
.showcase-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px -4px 14px;padding:12px 14px;border-radius:16px;background:linear-gradient(90deg,#1e40af,#f8fafc 46%,#be123c);font-weight:1000}
.showcase-head b{font-size:.8rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.lao .showcase-head{background:linear-gradient(90deg,#b91c1c,#f8fafc 48%,#075985)}
.lottery-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.lottery-buttons span{min-height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#2563eb,#0f766e);border:1px solid rgba(255,255,255,.18);font-weight:1000;text-align:center}
.lao .lottery-buttons span{background:linear-gradient(135deg,#0ea5e9,#0f766e)}
.showcase-card p{position:relative;color:var(--muted);font-weight:850;line-height:1.55;margin-top:13px}
.summary-preview h3,.formula-preview h3{font-size:1.15rem;margin-bottom:8px}
.summary-date{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:#d1fae5;font-weight:950;margin-bottom:12px}
.big-digits{display:flex;align-items:center;justify-content:center;gap:16px;border:1px solid var(--line);border-radius:18px;background:#042f2b;padding:16px;margin-bottom:12px}
.big-digits span{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#047857;font-size:2.2rem;font-weight:1000;box-shadow:0 18px 28px rgba(0,0,0,.18)}
.big-digits i{font-style:normal;font-size:1.4rem;font-weight:1000}
.drill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.drill-grid b,.chip-row b{min-height:38px;border-radius:12px;display:grid;place-items:center;background:#0f766e;border:1px solid rgba(167,243,208,.25);font-size:1.1rem}
.formula-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.formula-cols span{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.05);padding:10px;font-size:.74rem;font-weight:1000;color:#d1fae5}
.formula-cols b{font-size:.85rem;color:#fff}
.chip-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.promo-grid{max-width:1180px;margin:30px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.promo-grid h3{margin:0;color:#fff;font-size:1.03rem}
.promo-disclaimer{max-width:1180px;margin:24px auto 0;color:rgba(226,255,247,.74);font-weight:850;text-align:center;border-top:1px solid rgba(255,255,255,.09);padding-top:18px}
.promo-contact-box{display:flex;justify-content:center;margin-top:14px}
.promo-contact-box:empty{display:none}
.setup-warning{display:none;margin:14px 0 0;border:1px solid rgba(251,191,36,.45);background:rgba(120,53,15,.28);color:#fde68a;border-radius:14px;padding:12px 14px;font-weight:900;line-height:1.45}
.loader-bar{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:18px}
.loader-bar span{display:block;width:42%;height:100%;background:linear-gradient(90deg,var(--brand),#67e8f9);border-radius:inherit;animation:load 1.1s infinite alternate}
@keyframes load{from{transform:translateX(-45%)}to{transform:translateX(145%)}}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:rgba(3,47,41,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.top-actions{display:flex;align-items:center;gap:9px}
.top-actions a{border:1px solid var(--line);background:rgba(255,255,255,.07);border-radius:12px;padding:10px 13px;font-weight:950;color:#fff}
.top-actions .pill{display:inline-flex;align-items:center;min-height:42px}
.page-shell,.admin-shell{width:min(1180px,100%);margin:0 auto;padding:22px 16px 42px}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:14px}
.page-head h2{font-size:1.55rem}
.page-head p{color:var(--muted);font-weight:800}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.plans-note{grid-column:1/-1;color:var(--muted);font-weight:900;line-height:1.45;margin:-2px 0 0}
.plan-card{background:#06483b;border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:14px;position:relative}
.plan-card.active{border-color:#facc15;box-shadow:0 0 0 2px rgba(250,204,21,.18)}
.plan-card.recommended{border-color:rgba(250,204,21,.58);box-shadow:0 18px 36px rgba(0,0,0,.16),0 0 0 2px rgba(250,204,21,.10)}
.plan-card h3{font-size:1.12rem;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.plan-badges{display:flex;gap:6px;flex-wrap:wrap}
.plan-badges b{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:rgba(250,204,21,.18);border:1px solid rgba(250,204,21,.44);color:#fde68a;font-size:.68rem;font-weight:1000}
.plan-badges.subtle b{background:rgba(255,255,255,.08);border-color:var(--line);color:#d1fae5}
.trial-panel{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}
.price{font-size:2rem;font-weight:1000;color:#fff}
.price small{font-size:.82rem;color:var(--muted)}
.pay-grid,.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.single-grid{grid-template-columns:1fr}
.qr-box{min-height:160px;border:1px dashed var(--line-strong);border-radius:16px;display:grid;place-items:center;text-align:center;background:#042f2b;padding:16px;font-weight:1000}
.qr-code-demo{width:116px;height:116px;border-radius:12px;background:
  linear-gradient(90deg,#fff 10px,transparent 10px) 0 0/24px 24px,
  linear-gradient(#fff 10px,transparent 10px) 0 0/24px 24px,#031b18;margin:auto auto 10px}
.bank-box{display:grid;gap:9px;margin-top:10px}
.bank-line{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:8px;color:#fff;font-weight:950}
.copy-account-btn{justify-self:end;margin-top:2px;padding:8px 18px;border:1px solid rgba(52,211,153,.55);border-radius:10px;background:linear-gradient(135deg,#10b981,#0f766e);color:#fff;font-family:inherit;font-size:.86rem;font-weight:1000;cursor:pointer;box-shadow:0 8px 18px rgba(16,185,129,.18)}
.copy-account-btn:hover{filter:brightness(1.08)}
.copy-account-btn:active{transform:translateY(1px)}
.payment-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.payment-form .span-2{grid-column:span 2}
.payment-approval-warning{grid-column:1/-1;border:2px solid rgba(248,113,113,.78);background:linear-gradient(135deg,rgba(185,28,28,.92),rgba(146,64,14,.86));color:#fff7ed;border-radius:14px;padding:12px 14px;font-size:1.02rem;font-weight:1000;line-height:1.35;text-align:center;box-shadow:0 14px 28px rgba(185,28,28,.22),0 0 0 3px rgba(251,191,36,.12)}
.payment-time-warning{margin-top:1px}
.account-delete-panel{margin-top:14px;border-color:rgba(248,113,113,.42);background:linear-gradient(145deg,rgba(69,10,10,.34),rgba(4,47,43,.96))}
.account-delete-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.danger-kicker{color:#fca5a5;font-size:.75rem;font-weight:1000;letter-spacing:.04em;margin:0 0 3px}
.danger-badge{display:inline-flex;align-items:center;border:1px solid rgba(248,113,113,.55);background:rgba(185,28,28,.22);color:#fecaca;border-radius:999px;padding:5px 10px;font-size:.72rem;font-weight:1000}
.delete-account-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin-top:16px}
.delete-account-form>label:first-child{min-width:0}
.delete-confirm-row{grid-column:1/-1;display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px!important;border:1px solid rgba(248,113,113,.25);background:rgba(127,29,29,.15);border-radius:13px;padding:11px 12px}
.delete-confirm-row input{width:18px!important;height:18px!important;min-height:0!important;flex:0 0 auto;margin-top:2px;accent-color:#ef4444}
.delete-confirm-row span{color:#fee2e2;font-size:.88rem;font-weight:900;line-height:1.45}
.delete-account-btn{min-height:50px;white-space:nowrap}
.inline-status{min-height:1.4em;margin-top:10px;color:#fecaca;font-size:.84rem;font-weight:900}
.selected-plan-box{margin:12px 0 14px;border:1px solid rgba(250,204,21,.46);background:rgba(250,204,21,.10);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.selected-plan-box span{color:#fde68a;font-size:.78rem;font-weight:1000}
.selected-plan-box b{font-size:1rem;color:#fff;font-weight:1000;white-space:normal}
.selected-plan-box strong{font-size:1.08rem;color:#fef3c7;font-weight:1000;white-space:nowrap}
.payment-qr-img{width:168px;max-width:100%;aspect-ratio:1;border-radius:18px;background:#fff;padding:8px;object-fit:contain;box-shadow:0 18px 34px rgba(0,0,0,.18)}
.pay-title{font-size:1.05rem;font-weight:1000;margin-top:10px}
.pay-value{font-size:1.35rem;font-weight:1000;color:#fff}
.slip-link{display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;background:rgba(14,165,233,.18);border:1px solid rgba(125,211,252,.35);font-weight:1000;color:#e0f2fe}
.status-box{margin-top:14px;display:grid;gap:8px}
.status-item{border:1px solid var(--line);border-radius:14px;padding:12px;background:#053b33;display:flex;justify-content:space-between;gap:12px}
.status-item small{display:block;color:var(--muted);font-weight:850;margin-top:2px}
.approval-notice{border:1px solid rgba(74,222,128,.46);background:rgba(16,185,129,.14);border-radius:16px;padding:13px 14px;display:grid;gap:3px;text-align:left}
.approval-notice b{color:#bbf7d0;font-size:1rem;font-weight:1000}
.approval-notice span{color:#ecfdf5;font-weight:900;line-height:1.45}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:1000}
.badge.pending{background:rgba(245,158,11,.18);color:#fde68a}
.badge.active,.badge.approved{background:rgba(16,185,129,.18);color:#bbf7d0}
.badge.rejected,.badge.expired{background:rgba(239,68,68,.18);color:#fecaca}
.app-frame-wrap{height:calc(100vh - 69px);display:grid;place-items:center;padding:16px}
.app-topbar{padding:8px 14px;min-height:52px}
.app-topbar .brand-mark{width:34px;height:34px;border-radius:10px}
.app-topbar .brand-line h1{font-size:1rem}
.app-topbar .brand-line p{font-size:.76rem;line-height:1.15}
.app-topbar .top-actions a,.app-topbar .top-actions .ghost-btn,.app-topbar .top-actions .pill{min-height:34px;padding:7px 10px;font-size:.78rem;border-radius:10px}
.app-topbar + .app-frame-wrap{height:calc(100vh - 52px);padding:8px}
.formula-frame{width:100%;height:100%;border:1px solid var(--line);border-radius:18px;background:#021f1c}
.lock-card{text-align:center}
.lock-card .quick-row{margin-top:18px}
.rent-closed-panel{grid-column:1/-1;text-align:center;padding:30px 24px!important;border-color:rgba(251,191,36,.34)!important;background:linear-gradient(145deg,rgba(6,78,59,.94),rgba(69,26,3,.28))!important}
.rent-closed-panel h3{font-size:1.35rem;margin-bottom:8px;color:#fde68a}
.rent-closed-panel .muted{max-width:620px;margin:0 auto 16px;line-height:1.7}
.rent-closed-panel .contact-link{width:max-content;max-width:100%;margin:0 auto}
.admin-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}
.stat-card{background:#06483b;border:1px solid var(--line);border-radius:16px;padding:16px}
.stat-card b{display:block;font-size:1.65rem}
.stat-card span{color:var(--muted);font-size:.78rem;font-weight:900}
.table-wrap{overflow:auto;margin-top:12px}
table{width:100%;border-collapse:separate;border-spacing:0 8px;min-width:720px}
th{font-size:.78rem;color:#a7f3d0;text-align:left;padding:0 10px}
td{background:#053b33;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 10px;font-weight:850}
td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}
td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}
.table-actions{display:flex;gap:7px;flex-wrap:wrap}
#paymentsTable table{min-width:900px}
.payment-member-cell{display:grid;gap:3px;min-width:116px}
.payment-member-cell b{color:#fff;font-size:.92rem;line-height:1.2}
.payment-member-cell small{color:#a7f3d0;font-size:.72rem;line-height:1.25}
.admin-date-cell{display:grid;gap:1px;min-width:82px;color:#fff;font-size:.72rem;font-weight:950;line-height:1.14;white-space:normal}
.admin-date-cell em{font-style:normal;color:#fde68a;font-size:.62rem;font-weight:1000;line-height:1}
.admin-date-cell b{font-size:.76rem;font-weight:1000;line-height:1.05;color:#ecfdf5}
.admin-date-cell.empty{display:block;color:var(--muted)}
.renewed-note{display:block;margin-top:5px!important;color:#fde68a!important;font-size:.62rem!important;font-weight:1000!important;line-height:1.18!important;white-space:normal!important}
#paymentsTable th:nth-child(5),#paymentsTable th:nth-child(6),
#paymentsTable td:nth-child(5),#paymentsTable td:nth-child(6){width:92px}
#paymentsTable th:last-child,#paymentsTable td:last-child{width:128px}
#paymentsTable .table-actions{min-width:112px}
#paymentsTable .table-actions .badge{max-width:100%;white-space:normal;text-align:center;justify-content:center}
.admin-table-tools{display:flex;justify-content:flex-start;margin:4px 0 10px}
.admin-table-tools label{max-width:360px;width:100%;font-size:.78rem}
.admin-user-toolbar{display:grid;gap:10px;margin:4px 0 12px}
.admin-user-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.admin-user-filter{min-height:42px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#d1fae5;border-radius:12px;padding:7px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:1000;cursor:pointer}
.admin-user-filter span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-user-filter b{min-width:28px;height:26px;border-radius:999px;display:grid;place-items:center;background:rgba(16,185,129,.16);color:#fff;font-size:.78rem}
.admin-user-filter.active{background:linear-gradient(135deg,#10b981,#0f766e);border-color:rgba(167,243,208,.52);color:#fff;box-shadow:0 12px 24px rgba(16,185,129,.16)}
.admin-user-filter.active b{background:rgba(255,255,255,.18)}
.admin-grant{display:flex;align-items:center;gap:7px;min-width:260px}
.admin-grant input{min-height:38px;width:72px;padding:0 9px}
td small{display:block;color:var(--muted);font-weight:850;margin-top:3px}
.member-cell{display:grid;gap:3px;min-width:0}
#usersTable.table-wrap{overflow-x:auto}
#usersTable table{min-width:0;width:100%;table-layout:fixed}
#usersTable th,#usersTable td{font-size:.76rem;line-height:1.22;vertical-align:middle;padding-left:7px;padding-right:7px}
#usersTable td{padding-top:9px;padding-bottom:9px}
#usersTable th:nth-child(5),#usersTable td:nth-child(5){
  width:12.5%;
  min-width:0;
  white-space:normal;
  font-size:.7rem;
  line-height:1.14;
}
#usersTable th:nth-child(6),#usersTable th:nth-child(7),
#usersTable td:nth-child(6),#usersTable td:nth-child(7){
  width:10.5%;
  min-width:0;
  white-space:normal;
  font-size:.7rem;
  line-height:1.14;
}
#usersTable th:first-child,#usersTable td:first-child{width:20%}
#usersTable th:nth-child(2),#usersTable td:nth-child(2){width:7%}
#usersTable th:nth-child(3),#usersTable td:nth-child(3){width:9.5%}
#usersTable th:nth-child(4),#usersTable td:nth-child(4){width:6.5%;white-space:nowrap}
#usersTable th:nth-child(8),#usersTable td:nth-child(8){width:21%}
#usersTable td,#usersTable th{overflow:hidden;text-overflow:ellipsis}
#usersTable td small{font-size:.66rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#usersTable .badge{font-size:.58rem;padding:3px 7px}
#usersTable .admin-grant{min-width:0;width:100%;gap:5px;flex-wrap:wrap}
#usersTable .admin-grant input{min-height:32px;width:54px;padding:0 7px;font-size:.72rem}
#usersTable .admin-grant .primary-btn,#usersTable .admin-grant .ghost-btn,#usersTable .admin-grant .danger-btn{min-height:32px;padding:0 8px;border-radius:9px;font-size:.68rem}
@media(max-width:820px){
  .auth-layout,.plan-grid,.pay-grid,.admin-grid,.admin-stats{grid-template-columns:1fr}
  .promo-hero,.promo-grid,.promo-stats,.promo-showcase{grid-template-columns:1fr}
  .promo-auth-card{min-height:auto}
  .auth-switcher{grid-template-columns:1fr}
  .auth-copy{padding:12px}
  .payment-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .selected-plan-box{grid-template-columns:1fr auto;margin:10px 0 12px;padding:11px 12px;gap:4px 10px}
  .selected-plan-box span{grid-column:1/-1;font-size:.72rem}
  .selected-plan-box b{font-size:.94rem}
  .selected-plan-box strong{font-size:1rem}
  .payment-form label{grid-column:1/-1;font-size:1rem;gap:9px}
  .payment-form label:nth-child(5),
  .payment-form label:nth-child(6),
  .payment-form label:has(#paidHour),
  .payment-form label:has(#paidMinute){grid-column:span 1}
  .payment-form .span-2{grid-column:1/-1}
  .payment-form input,
  .payment-form select{min-height:58px;border-radius:14px;font-size:1.02rem;padding:0 15px}
  .payment-form input[type="file"]{min-height:70px;padding:13px 14px;display:flex;align-items:center}
  .payment-form input[type="file"]::file-selector-button{padding:11px 14px;font-size:.95rem}
  .payment-form .primary-btn{grid-column:1/-1;min-height:58px;border-radius:14px;font-size:1.05rem}
  .delete-account-form{grid-template-columns:1fr}
  .delete-account-form .delete-account-btn{width:100%}
  .topbar{align-items:center;gap:10px;padding:10px 12px}
  .topbar .brand-line.small{min-width:0;flex:1}
  .topbar .brand-line.small .brand-mark{width:34px;height:34px;border-radius:10px;font-size:.9rem;flex:0 0 auto}
  .topbar .brand-line.small h1{font-size:1.1rem}
  .topbar .brand-line.small p{font-size:.72rem;line-height:1.25}
  .top-actions{flex-wrap:nowrap;justify-content:flex-end;gap:5px;flex:0 0 auto}
  .top-actions a,.top-actions .ghost-btn{min-height:34px;padding:6px 8px;border-radius:10px;font-size:.72rem;white-space:nowrap}
  .app-topbar{align-items:center}
  .trial-panel{display:grid}
  .promo-page{padding:16px 14px 28px;background:
    radial-gradient(circle at 85% 4%,rgba(20,184,166,.18),transparent 30%),
    radial-gradient(circle at 10% 10%,rgba(245,158,11,.10),transparent 24%),
    linear-gradient(145deg,#021f1c,#064e3b 62%,#022c22)}
  .promo-nav{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:28px;width:100%;max-width:520px}
  .promo-brand{font-size:1.34rem;gap:10px}
  .promo-brand .brand-mark{width:54px;height:54px;border-radius:16px;font-size:1.15rem}
  .promo-nav-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;justify-content:stretch}
  .promo-nav-contact{grid-column:1/-1;min-width:0}
  .promo-nav-contact .contact-link{width:100%;min-height:42px;padding:8px 10px;border-radius:14px;justify-content:center;font-size:.86rem;overflow:hidden;text-overflow:ellipsis}
  .promo-nav-contact .contact-link span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .promo-nav-actions .primary-btn,.promo-nav-actions .ghost-btn{min-height:46px;width:100%;padding:0 10px;font-size:.92rem;border-radius:14px;white-space:nowrap}
  .promo-hero{max-width:520px;gap:20px;justify-items:stretch}
  .promo-copy{max-width:none}
  .promo-kicker{max-width:100%;padding:8px 11px;margin-bottom:16px;font-size:.9rem;white-space:normal;line-height:1.35}
  .promo-copy h1{font-size:clamp(2.18rem,10.2vw,3.05rem);line-height:1.1;max-width:100%}
  .promo-copy p{font-size:.98rem;line-height:1.7;max-width:100%;margin-top:14px}
  .promo-stats{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .promo-stats article{border-radius:16px;padding:14px 15px}
  .promo-stats b{font-size:1.55rem}
  .promo-stats span{font-size:.92rem;line-height:1.5}
  .promo-cta-row{display:none}
  .admin-shell,.page-shell{padding:14px 10px 30px}
  .plan-grid{gap:9px;margin-bottom:12px}
  .plans-note{font-size:.82rem;line-height:1.35;padding:0 4px}
  .plan-card{padding:12px 14px;border-radius:14px;gap:8px}
  .plan-card h3{font-size:.98rem;gap:7px}
  .plan-badges{gap:4px}
  .plan-badges b{font-size:.58rem;padding:3px 7px}
  .price{font-size:1.65rem;line-height:1.05}
  .price small{font-size:.7rem}
  .plan-card .primary-btn{min-height:40px;border-radius:10px;font-size:.86rem}
  .admin-shell .glass-panel{padding:16px;border-radius:16px}
  .admin-user-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .admin-user-filter{min-height:40px;padding:7px 9px;font-size:.78rem}
  .admin-user-filter b{min-width:26px;height:24px;font-size:.72rem}
  .admin-plan-row{grid-template-columns:1fr}
  .admin-toggle-row.compact{align-self:stretch}
  .plan-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .table-wrap{overflow:visible}
  .table-wrap table,
  #usersTable table{
    min-width:0;
    width:100%;
    display:block;
    border-spacing:0;
    table-layout:auto;
  }
  .table-wrap thead{display:none}
  .table-wrap tbody{display:grid;gap:12px}
  .table-wrap tr{
    display:grid;
    gap:8px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#053b33;
    padding:12px;
  }
  .table-wrap td,
  #usersTable td{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    align-items:start;
    gap:10px;
    width:auto!important;
    border:0!important;
    border-radius:0!important;
    background:transparent;
    padding:0!important;
    font-size:.84rem;
    line-height:1.35;
    overflow:visible;
    text-overflow:clip;
    white-space:normal!important;
  }
  .table-wrap td:before{
    content:attr(data-label);
    color:#a7f3d0;
    font-weight:1000;
    font-size:.72rem;
    line-height:1.35;
  }
  .table-wrap td:first-child{
    font-size:1rem;
    font-weight:1000;
  }
  #usersTable td small{
    font-size:.72rem;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    margin-top:4px;
  }
  .member-cell b{font-size:1rem;line-height:1.25}
  #usersTable .badge{font-size:.68rem;padding:4px 8px;width:max-content}
  .table-actions,
  #usersTable .admin-grant{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    width:100%;
  }
  #usersTable .admin-grant input{width:70px;min-height:34px}
  #usersTable .admin-grant .primary-btn,
  #usersTable .admin-grant .ghost-btn,
  #usersTable .admin-grant .danger-btn,
  .table-actions .primary-btn,
  .table-actions .danger-btn{
    min-height:34px;
    padding:0 10px;
    font-size:.74rem;
  }
  #paymentsTable table{min-width:0!important;width:100%;display:block}
  #paymentsTable tbody{display:grid;gap:12px}
  #paymentsTable tr{display:grid;gap:8px;border:1px solid var(--line);border-radius:16px;background:#053b33;padding:12px}
  #paymentsTable td{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:start;gap:10px;width:auto!important;border:0!important;border-radius:0!important;background:transparent!important;padding:0!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important}
  #paymentsTable td:before{content:attr(data-label);color:#a7f3d0;font-weight:1000;font-size:.72rem;line-height:1.35}
  #paymentsTable td:first-child{font-size:1rem;font-weight:1000}
  #paymentsTable .member-cell b{font-size:1.08rem;line-height:1.22}
  #paymentsTable .member-cell small{font-size:.82rem;line-height:1.2}
  #paymentsTable .admin-date-cell{min-width:0;font-size:.9rem;line-height:1.2}
  #paymentsTable .admin-date-cell b{font-size:.95rem}
  #paymentsTable td:last-child{margin-top:2px}
  #paymentsTable td:last-child .table-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%;min-width:0}
  #paymentsTable .table-actions .primary-btn,
  #paymentsTable .table-actions .danger-btn,
#paymentsTable .table-actions .badge{min-height:38px;width:max-content;max-width:100%;padding:0 13px;border-radius:12px;font-size:.78rem}
.slip-link{width:max-content}
}

@media(max-width:600px){
  .legal-nav-inner{padding:10px 12px}
  .legal-nav .promo-brand{font-size:1.05rem}
  .legal-nav .brand-mark{width:38px;height:38px;border-radius:11px;font-size:.85rem}
  .legal-nav-actions a{min-height:36px;padding:0 10px;font-size:.72rem}
  .legal-shell{width:min(100% - 20px,920px);margin-top:20px}
  .legal-hero{border-radius:19px;padding:22px 18px}
  .legal-section{border-radius:16px;padding:18px}
  .legal-footer{display:grid;text-align:center}
}