/* LUDOPANDA_AAA_WEB_DESIGN_SYSTEM_V1 */
:root{
  --lp-bg:#050505;
  --lp-surface:#0d0d0d;
  --lp-surface-2:#121212;
  --lp-surface-3:#181818;
  --lp-border:rgba(255,255,255,.09);
  --lp-border-strong:rgba(255,212,0,.27);
  --lp-yellow:#FFD400;
  --lp-yellow-2:#FFEA70;
  --lp-gold:#D6A620;
  --lp-text:#FAFAF7;
  --lp-muted:#A3A3A3;
  --lp-soft:#737373;
  --lp-green:#69E38F;
  --lp-red:#FF6B68;
  --lp-shadow:0 28px 80px rgba(0,0,0,.34);
  --lp-shadow-soft:0 16px 44px rgba(0,0,0,.23);
  --lp-radius-xl:28px;
  --lp-radius-lg:22px;
  --lp-radius-md:16px;
  --lp-radius-sm:12px;
}
html{background:var(--lp-bg);color:var(--lp-text);color-scheme:dark}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 78% -12%,rgba(255,212,0,.105),transparent 34rem),
    radial-gradient(circle at -10% 34%,rgba(255,212,0,.035),transparent 28rem),
    var(--lp-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
a,button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(255,212,0,.34)!important;
  outline-offset:2px!important;
}
input,select,textarea{
  min-height:48px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,transform .16s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(255,212,0,.65)!important;
  box-shadow:0 0 0 4px rgba(255,212,0,.08)!important;
}
.topbar{
  min-height:74px!important;
  background:rgba(5,5,5,.88)!important;
  border-bottom:1px solid var(--lp-border)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.16);
}
.brand,.brand:visited{color:var(--lp-text)!important}
.brand-mark,.mark{
  overflow:hidden;
  background:linear-gradient(145deg,#FFE66D,#FFC900 54%,#E3A100)!important;
  border:1px solid rgba(255,228,91,.45)!important;
  box-shadow:0 10px 28px rgba(255,199,0,.16)!important;
}
.brand-mark img,.mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.brand strong{font-weight:950!important;letter-spacing:-.02em}
.brand small{color:#8e8e8e!important}
.eyebrow{
  color:var(--lp-yellow)!important;
  font-weight:950!important;
  letter-spacing:.14em!important;
}
h1,h2,h3,strong{letter-spacing:-.015em}
.primary,.primary-btn{
  background:linear-gradient(145deg,var(--lp-yellow-2),var(--lp-yellow) 52%,#F2B800)!important;
  color:#090909!important;
  border:1px solid rgba(255,236,128,.72)!important;
  box-shadow:0 12px 26px rgba(255,199,0,.14),inset 0 1px 0 rgba(255,255,255,.28)!important;
  font-weight:950!important;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease!important;
}
.primary:hover,.primary-btn:hover{filter:brightness(1.035);transform:translateY(-1px)}
.primary:active,.primary-btn:active{transform:translateY(1px) scale(.995)}
.ghost,.ghost-btn,.secondary,.secondary-btn{
  background:rgba(255,255,255,.035)!important;
  border:1px solid var(--lp-border)!important;
  color:var(--lp-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.ghost:hover,.ghost-btn:hover,.secondary:hover,.secondary-btn:hover{
  border-color:rgba(255,212,0,.28)!important;
  background:rgba(255,212,0,.045)!important;
}
.hidden{display:none!important}
.toast{
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(16px)!important;
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media(max-width:680px){
  body{background:radial-gradient(circle at 100% -8%,rgba(255,212,0,.09),transparent 27rem),var(--lp-bg)}
  .topbar{min-height:68px!important}
}

/* RESPONSIBLE PLAY */
body{margin:0;padding-bottom:max(28px,env(safe-area-inset-bottom));font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.topbar{
  position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:max(12px,env(safe-area-inset-top)) 18px 12px
}
.back{justify-self:start;color:#ddd;text-decoration:none;font-size:11px;font-weight:900;border:1px solid var(--lp-border);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.025)}
.brand{justify-self:center;display:flex;align-items:center;gap:10px}.brand-mark{width:42px;height:42px;border-radius:14px;display:block}.brand strong,.brand small{display:block}.brand strong{font-size:14px}.brand small{font-size:9px;margin-top:2px}
.topbar>.ghost{justify-self:end;min-height:38px;border-radius:12px;padding:0 13px;font-size:10px;font-weight:900}
.shell{width:min(100%,900px);margin:0 auto;padding:22px 18px 50px}
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:27px;border-radius:28px;border:1px solid rgba(255,212,0,.20);
  background:linear-gradient(145deg,#15140f,#0b0b0b 58%,#080808);box-shadow:var(--lp-shadow)
}
.hero h1{margin:7px 0 10px;font-size:clamp(30px,5vw,46px);line-height:1.02}.hero p{margin:0;color:#a8a8a8;line-height:1.6;max-width:660px}
.status-pill{border-radius:999px;padding:10px 13px;background:#151515;border:1px solid var(--lp-border);font-size:10px;font-weight:950;letter-spacing:.06em;white-space:nowrap}
.status-pill.bad,.status-pill.blocked{color:#ff9a98;border-color:rgba(255,107,104,.22);background:rgba(255,107,104,.06)}
.usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}
.usage-card{
  padding:18px;border-radius:20px;background:linear-gradient(145deg,#121212,#0c0c0c);border:1px solid var(--lp-border);box-shadow:var(--lp-shadow-soft)
}
.usage-card span,.usage-card small{display:block;color:#7f7f7f;font-size:10px}.usage-card strong{display:block;font-size:27px;margin:5px 0}.usage-card small{line-height:1.45}
.panel{
  margin-top:12px;padding:20px;border-radius:22px;background:#0e0e0e;border:1px solid var(--lp-border);box-shadow:var(--lp-shadow-soft)
}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.panel-head h2{margin:4px 0 0;font-size:20px}
.hint{color:#737373;font-size:10px;line-height:1.4}.muted{color:#929292;line-height:1.6;font-size:12px}
.fields{display:grid;gap:9px}.fields.three{grid-template-columns:repeat(3,1fr)}.fields label,.modal-card label{font-size:10px;color:#8b8b8b;font-weight:850}
.fields input,.modal-card input{display:block;width:100%;margin-top:7px;border:1px solid var(--lp-border);background:#141414;color:#fff;border-radius:14px;padding:0 13px}
.choice-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.choice-row button{
  min-height:40px;border-radius:999px;padding:0 14px;background:#151515;color:#aaa;border:1px solid var(--lp-border);font-size:10px;font-weight:900;cursor:pointer
}
.choice-row button.active{background:#FFD400!important;color:#0a0a0a!important;border-color:#FFE66D!important;box-shadow:0 8px 20px rgba(255,212,0,.12)}
.toggle-row{margin:16px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border-radius:16px;background:#121212;border:1px solid var(--lp-border)}
.toggle-row strong,.toggle-row small{display:block}.toggle-row strong{font-size:12px}.toggle-row small{color:#7e7e7e;font-size:10px;line-height:1.45;margin-top:4px}
.toggle-row input{width:22px;height:22px;accent-color:#FFD400}
.wide{width:100%;min-height:50px;border-radius:14px;cursor:pointer}
.note{margin-top:10px;padding:11px 12px;border-radius:13px;background:rgba(255,212,0,.05);border:1px solid rgba(255,212,0,.12);font-size:11px;color:#b9b39f}
.panel.serious{
  border-color:rgba(255,107,104,.16);background:linear-gradient(145deg,rgba(37,15,15,.42),#0d0d0d 52%);
}
.danger-text{color:#ff8e8b!important}.danger-actions{display:grid;gap:8px;margin-top:14px}.danger-actions.three{grid-template-columns:repeat(3,1fr)}.danger-actions.four{grid-template-columns:repeat(4,1fr)}
.danger-actions button,.danger{
  min-height:44px;border-radius:13px;background:rgba(255,107,104,.07);color:#ffaaa8;border:1px solid rgba(255,107,104,.20);font-size:10px;font-weight:950;cursor:pointer
}
.danger-actions button:hover,.danger:hover{background:rgba(255,107,104,.11);border-color:rgba(255,107,104,.34)}
.authority{margin-top:12px;padding:15px 16px;border-radius:16px;background:rgba(255,212,0,.035);border:1px solid rgba(255,212,0,.12)}
.authority strong{font-size:11px;color:#f0ce51}.authority p{margin:6px 0 0;color:#777;font-size:10.5px;line-height:1.55}
.auth-card{
  width:min(100%,600px);margin:8vh auto 0;padding:30px;text-align:center;border-radius:28px;
  background:linear-gradient(145deg,#151515,#090909);border:1px solid var(--lp-border-strong);box-shadow:var(--lp-shadow)
}
.shield{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;margin:0 auto 14px;background:#FFD400;color:#111;font-size:24px;font-weight:1000}
.auth-card h1{font-size:clamp(30px,6vw,45px);line-height:1.03;margin:0}.auth-card p{color:#999;line-height:1.6;margin:12px 0 20px}
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.76);backdrop-filter:blur(7px)}
.modal-card{width:min(100%,520px);padding:22px;border-radius:24px;background:#0d0d0d;border:1px solid rgba(255,107,104,.20);box-shadow:0 30px 90px rgba(0,0,0,.55)}
.modal-card h2{margin:6px 0 10px;font-size:24px}.modal-card p{color:#9c9c9c;line-height:1.55;font-size:12px}.modal-actions{display:grid;grid-template-columns:1fr 1.15fr;gap:9px;margin-top:14px}
.modal-actions .ghost,.modal-actions .danger{min-height:46px;border-radius:13px}
.toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:100;background:rgba(246,246,242,.96);color:#111;border-radius:999px;padding:11px 15px;font-size:10.5px;font-weight:850;max-width:calc(100% - 28px)}
@media(max-width:680px){
  .topbar{grid-template-columns:auto 1fr auto;padding-left:12px;padding-right:12px}.back{font-size:0;width:40px;height:40px;padding:0;display:grid;place-items:center}.back:before{content:"←";font-size:17px}
  .brand-mark{width:38px;height:38px}.shell{padding:14px 12px 42px}.hero{grid-template-columns:1fr;padding:20px}.status-pill{width:max-content}
  .fields.three{grid-template-columns:1fr}.usage-grid{gap:8px}.panel{padding:16px}.danger-actions.three,.danger-actions.four{grid-template-columns:1fr 1fr}.modal-actions{grid-template-columns:1fr}
}