/* ==========================================
   1. ROOT VARIABLES & RESET
   ========================================== */
:root {
    --p: #4f46e5;
    --p2: #7c3aed;
    --bg: #f8fafc;
    --cd: #ffffff;
    --tx: #0f172a;
    --tx2: #334155;
    --mu: #64748b;
    --mu2: #94a3b8;
    --bd: #e2e8f0;
    --hv: #f1f5f9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Hind Siliguri', 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg);
    color: var(--tx);
    overflow-x: hidden;
    padding-bottom: 80px;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: transparent; }
input { font-family: inherit; }
::-webkit-scrollbar { width: 0px; background: transparent; }


/* Added tokens (the original FAB used --shadow-color without defining it) */
:root{--shadow-color:rgba(79,70,229,.35);--danger:#ef4444;--ok:#16a34a}
/* Dark mode: set by the theme feature through <html data-theme="dark"> */
[data-theme="dark"]{--bg:#0b1020;--cd:#131a2e;--tx:#f1f5f9;--tx2:#cbd5e1;--mu:#94a3b8;--mu2:#64748b;--bd:#1f2a44;--hv:#1a2340;--shadow-color:rgba(99,102,241,.45)}
[data-theme="dark"] body{background-color:var(--bg);color:var(--tx)}
/* Generic bottom sheet and toast used by features through TM.sheet() / TM.toast() */
.tm-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000000;display:flex;align-items:flex-end;justify-content:center}
.tm-sheet{background:var(--cd);color:var(--tx);width:100%;max-width:480px;max-height:85vh;overflow:auto;border-radius:20px 20px 0 0;padding:18px 18px 28px}
.tm-sheet h3{font-size:16px;font-weight:800;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.tm-sheet h3 button{font-size:18px;color:var(--mu)}
.tm-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;z-index:2000001;max-width:90%}
.tm-form input{width:100%;padding:12px;margin-bottom:10px;border-radius:10px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font-size:14px}
.tm-form button.primary{width:100%;padding:12px;border-radius:10px;background:var(--p);color:#fff;font-weight:700}
.tm-empty{text-align:center;padding:24px;color:var(--mu);grid-column:1/-1}

/* Shared interaction sizing: keep tap targets and surfaces consistent across features. */
:root { --tap-size: 44px; --control-radius: 12px; --surface-shadow: 0 8px 24px rgba(15,23,42,.08); }
button, [role="button"], .header-icon-btn, .back-btn-clean { touch-action: manipulation; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 58%, white); outline-offset: 2px; }
.tm-form input, input, select, textarea { max-width: 100%; }
@media (max-width: 520px) {
  .auth-card, .pf-group, .pf-quick-grid { border-radius: 18px; }
  .auth-page-wrapper, .profile-page-wrapper { width: 100%; max-width: 480px; }
  .auth-tab, .social-btn, .submit-btn, .pf-guest-cta, .pf-logout { min-height: var(--tap-size); }
  .pf-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 8px; }
  .pf-qa .lbl { font-size: 10px; }
}


/* TELIMINE Premium Design System v2 — shared sizing and purple/gold surfaces */
:root{
  --p:#6d28d9;--p2:#8b5cf6;--gold:#f5c451;--gold-2:#dba82e;
  --bg:#f7f5fc;--cd:#ffffff;--tx:#19132b;--tx2:#403653;--mu:#756b88;--mu2:#a39ab2;
  --bd:#e8e1f2;--hv:#f0eafa;--shadow-color:rgba(109,40,217,.22);
  --radius-sm:10px;--radius-md:16px;--radius-lg:22px;--tap-size:46px;
  --surface-shadow:0 12px 34px rgba(38,20,69,.09);
}
[data-theme="dark"]{
  --bg:#0e0a19;--cd:#171126;--tx:#f8f4ff;--tx2:#e0d7ef;--mu:#b0a4c6;--mu2:#807493;
  --bd:#302443;--hv:#241936;--p:#a78bfa;--p2:#7c3aed;--gold:#f5c451;--shadow-color:rgba(124,58,237,.3);
  --surface-shadow:0 14px 38px rgba(0,0,0,.25);
}
html{scroll-behavior:smooth}
body{font-size:14px;line-height:1.5;background:var(--bg);color:var(--tx);padding-bottom:max(82px,env(safe-area-inset-bottom))}
button,a,input,select,textarea,[role="button"]{font:inherit}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{outline:3px solid color-mix(in srgb,var(--gold) 75%,white);outline-offset:2px}
button:not(.plain),.submit-btn,.social-btn,.pf-guest-cta,.pf-logout,.auth-tab,.header-icon-btn,.back-btn-clean{min-height:var(--tap-size)}
input,select,textarea{min-height:44px;border-radius:12px}
img{max-width:100%}
/* Harmonise independently-built feature panels without changing their behavior. */
.auth-card,.pf-group,.pf-quick-grid,.settings-card,.settings-group,.search-panel,.game-card,.category-card,.promo-card{box-shadow:var(--surface-shadow)}
.auth-card,.pf-group,.pf-quick-grid,.settings-card,.settings-group{border-color:var(--bd)!important}
.page-header-clean{background:color-mix(in srgb,var(--cd) 92%,transparent)!important;backdrop-filter:blur(18px);border-color:var(--bd)!important}
.back-btn-clean,.header-icon-btn{width:46px!important;height:46px!important;border-radius:14px!important;background:var(--hv)!important;color:var(--p)!important;border:1px solid var(--bd)!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
@media(min-width:700px){.profile-page-wrapper{max-width:560px!important;left:auto!important;right:24px!important;top:18px!important;bottom:18px!important;border:1px solid var(--bd);border-radius:26px;box-shadow:0 28px 90px rgba(10,5,20,.28)}.auth-page-wrapper{max-width:560px!important;border-radius:26px;overflow-y:auto;box-shadow:0 28px 90px rgba(10,5,20,.28)}}
@media(max-width:520px){.auth-page-wrapper,.profile-page-wrapper{max-width:100%!important}.auth-card{margin-inline:14px}.pf-content{padding-inline:14px}.pf-quick-grid{gap:8px}.pf-qa .lbl{font-size:11px}.pf-item{padding:13px 16px}.pf-group-head{padding-inline:16px}}


/* TELIMINE shared Admin/Public appearance contract. Keep public components in the same
   violet, near-black, soft-lilac and gold palette used by Admin Studio. */
:root {
  color-scheme: light;
  --admin-shared-bg:#f6f3fb; --admin-shared-surface:#ffffff;
  --admin-shared-surface-2:#f0eafa; --admin-shared-border:#e7def2;
  --admin-shared-text:#1c1530; --admin-shared-muted:#8c819e;
  --admin-shared-violet:#6d28d9; --admin-shared-violet-2:#a78bfa;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0c0915; --cd:#171124; --tx:#f8f4ff; --tx2:#ded4ee;
  --mu:#9e91b4; --mu2:#807493; --bd:#322542; --hv:#241a35;
  --p:#a78bfa; --p2:#7c3aed; --gold:#f5c451;
  --shadow-color:rgba(124,58,237,.3); --surface-shadow:0 14px 38px rgba(0,0,0,.25);
  --admin-shared-bg:#0c0915; --admin-shared-surface:#171124;
  --admin-shared-surface-2:#241a35; --admin-shared-border:#322542;
  --admin-shared-text:#f8f4ff; --admin-shared-muted:#9e91b4;
  --admin-shared-violet:#a78bfa; --admin-shared-violet-2:#7c3aed;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .page-view,
html[data-theme="dark"] .page-view.active { background-color:var(--bg); color:var(--tx); }
html[data-theme="dark"] .game-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .promo-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .pf-group,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-group,
html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .profile-page-wrapper,
html[data-theme="dark"] .auth-page-wrapper,
html[data-theme="dark"] .tm-sheet {
  background-color:var(--cd); color:var(--tx); border-color:var(--bd);
}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea {
  background-color:var(--cd); color:var(--tx); border-color:var(--bd);
}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder { color:var(--mu); }
html[data-theme="dark"] .page-header-clean,html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar-panel,html[data-theme="dark"] .bottom-bar,
html[data-theme="dark"] .bottom-nav,html[data-theme="dark"] .pf-group-head {
  background-color:color-mix(in srgb,var(--cd) 94%,transparent); color:var(--tx); border-color:var(--bd);
}
html[data-theme="dark"] .tm-toast { background:#241a35; color:#f8f4ff; border:1px solid #49335f; }