/* ════════════════════════════════════════════════════════
   EXTENDED VARIABLES + FULL VISUAL POLISH
   ════════════════════════════════════════════════════════ */

/* ── Aliases for legacy vars used across components ── */
:root{
  --t1:var(--t-base);
  --t2:var(--t-muted);
  --ok:#34D399;
  --bg-panel:var(--bg-card);
}

/* All themes inherit --t1/t2/ok/bg-panel from :root unless overridden */

/* ════ AMBIENT BODY GLOW ════ */
body{
  background:
    radial-gradient(ellipse 65% 38% at 55% -8%,
      color-mix(in oklab,var(--primary) 7%,transparent),
      transparent 58%),
    var(--bg-body);
}

/* ════ PAGE HEADER ════ */
.page-header{
  border-bottom:none;
  position:relative;
  padding-bottom:16px;
  margin-bottom:22px;
}
.page-header::after{
  content:"";
  position:absolute;
  bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(to left,
    transparent 0%,
    color-mix(in oklab,var(--primary) 60%,transparent) 40%,
    rgba(255,255,255,.04) 65%,
    transparent 100%);
  opacity:.7;
}
.page-title{
  background:linear-gradient(130deg,var(--t-base) 55%,var(--primary-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ════ CARD HOVER LIFT ════ */
.card{
  transition:box-shadow .2s ease,border-color .2s ease,transform .18s ease;
}
.card:hover{
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.07);
  border-color:color-mix(in oklab,var(--primary) 14%,var(--border));
}
.card-head{
  background:linear-gradient(180deg,rgba(255,255,255,.035) 0%,transparent 100%);
}

/* ════ MODAL POLISH ════ */
.modal,#history-modal-inner{
  animation:modal-in .24s cubic-bezier(.34,1.18,.64,1) both;
}
@keyframes modal-in{
  from{opacity:0;transform:scale(.95) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.modal-hd,.modal-head{
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
}

/* ════ SIDEBAR DEPTH ════ */
.d-sidebar{
  background:
    radial-gradient(ellipse 130% 32% at 50% 0%,
      color-mix(in oklab,var(--primary) 9%,transparent),
      transparent 44%),
    var(--bg-sidebar);
}
.brand-logo{
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.4);
}
.nav-section + .nav-section{
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.04);
  margin-top:4px;
}
.sidebar-footer{
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:12px;
}

/* ════ TOPBAR ════ */
.d-topbar{
  box-shadow:0 1px 0 var(--border-soft),0 4px 22px rgba(0,0,0,.14);
}

/* auth-lock-card replaced by the unified login screen */

/* ════ SPINNER ════ */
.spinner{
  border-color:var(--border);
  border-top-color:var(--primary);
  border-right-color:color-mix(in oklab,var(--primary) 28%,transparent);
}

/* ════ GLOBAL THIN SCROLLBAR ════ */
*{
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
::-webkit-scrollbar-thumb:hover{
  background:color-mix(in oklab,var(--border) 65%,var(--primary) 35%);
}

/* ════ INPUT FOCUS GLOW ════ */
.fi:focus,textarea:focus,select:focus,
input[type="text"]:focus,input[type="date"]:focus,input[type="number"]:focus{
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px var(--primary-ring),inset 0 1px 0 rgba(255,255,255,.025)!important;
  background:color-mix(in oklab,var(--bg-card) 92%,var(--primary) 8%)!important;
  transition:border-color .15s,box-shadow .15s,background .18s;
}

/* ════ PRIMARY BUTTON GRADIENT ════ */
.btn.gold,.btn.primary,.tb-btn.gold,.av-tab.active{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  border-color:transparent;
  box-shadow:0 2px 14px var(--primary-ring),inset 0 1px 0 rgba(255,255,255,.1);
}
.btn.gold:hover,.btn.primary:hover,.tb-btn.gold:hover,.av-tab.active:hover{
  background:linear-gradient(135deg,
    color-mix(in oklab,var(--primary) 83%,#fff 17%),
    var(--primary));
  box-shadow:0 5px 22px var(--primary-ring),inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateY(-1px);
}
.btn:not(.gold):not(.primary):not(.danger):hover,.tb-btn:not(.gold):not(.danger):hover{
  background:var(--bg-hover);
  border-color:color-mix(in oklab,var(--primary) 22%,var(--border));
}
.btn:active,.tb-btn:active{transform:translateY(0)!important;box-shadow:none!important}

/* ════ ICON BUTTON HOVER GLOW ════ */
.icon-btn{
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.icon-btn:hover{
  background:var(--primary-soft);
  border-color:color-mix(in oklab,var(--primary) 38%,var(--border));
  color:var(--primary-light);
  box-shadow:0 0 0 2px var(--primary-ring);
}

/* ════ NOTIFY ANIMATION ════ */
#notify.show{
  animation:notify-in .22s cubic-bezier(.34,1.18,.64,1);
}
@keyframes notify-in{
  from{opacity:0;transform:translateY(8px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
#notify{border-left:3px solid var(--primary)}
#notify.notify-success{border-left-color:var(--success)}
#notify.notify-error{border-left-color:var(--danger)}
#notify.notify-info{border-left-color:var(--info)}

/* ════ STAT CARD HOVER ════ */
.stat{
  transition:border-color .18s,box-shadow .18s,transform .15s;
}
.stat:hover{
  border-color:color-mix(in oklab,var(--primary) 26%,var(--border));
  box-shadow:var(--shadow-sm),0 0 0 1px var(--primary-ring);
  transform:translateY(-1px);
}

/* ════ DASHBOARD HERO ════ */
.dashboard-hero{
  background:linear-gradient(135deg,
    color-mix(in oklab,var(--primary) 8%,var(--bg-card)) 0%,
    var(--bg-card) 62%);
  border-color:color-mix(in oklab,var(--primary) 18%,var(--border));
}
.dashboard-hero-title{
  background:linear-gradient(130deg,var(--t-base) 52%,var(--primary-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.dashboard-kicker{color:var(--primary-light)}

/* ════ DASHBOARD REPORT CARDS ════ */
.dashboard-report-card{
  transition:border-color .18s,box-shadow .18s,transform .15s;
}
.dashboard-report-card:hover{
  border-color:color-mix(in oklab,var(--primary) 28%,var(--border));
  box-shadow:var(--shadow-md),0 0 0 1px var(--primary-ring);
  transform:translateY(-2px);
}
.dashboard-report-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.dashboard-simple-head{
  background:linear-gradient(135deg,
    color-mix(in oklab,var(--primary) 5%,var(--bg-card)),
    var(--bg-card));
}
.dashboard-mini-card{
  transition:border-color .18s,box-shadow .18s;
}
.dashboard-mini-card:hover{
  border-color:color-mix(in oklab,var(--primary) 20%,var(--border-soft));
  box-shadow:0 0 0 1px var(--primary-ring);
}

/* ════ SCHEDULE ENHANCEMENTS ════ */
.schedule-batch-title{
  background:linear-gradient(130deg,var(--t-base) 55%,var(--primary-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.schedule-table-title{
  background:linear-gradient(130deg,var(--t-base) 55%,var(--primary-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.schedule-grid th{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.024));
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:var(--t-light);
}
.schedule-grid tbody tr:hover td{background:rgba(255,255,255,.028)}
.schedule-batch-kicker{color:var(--primary)}

/* ════ TODAY ADMIN ROWS ════ */
.today-present-row td{background:rgba(31,157,90,.022)!important}
.today-absent-row td{background:rgba(214,59,59,.014)!important}
.today-present-row:hover td{background:rgba(31,157,90,.044)!important}
.today-absent-row:hover td{background:rgba(214,59,59,.028)!important}

/* ════ WEEK ROW HOVER ════ */
.week-row{transition:border-color .18s,box-shadow .18s}
.week-row:hover{
  border-color:color-mix(in oklab,var(--primary) 22%,var(--border-soft));
  box-shadow:var(--shadow-sm),0 0 0 1px var(--primary-ring);
}

/* ════ PROMO HERO — redesigned ════ */
.promo-hero{padding:0;overflow:hidden;background:linear-gradient(145deg,color-mix(in oklab,var(--primary) 7%,var(--bg-card)) 0%,var(--bg-card) 55%)}
.ph-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 20px;flex-wrap:wrap}
.ph-head-left{display:flex;align-items:center;gap:16px;min-width:0}
.ph-head-info{display:grid;gap:6px;min-width:0}
.ph-kicker{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t-muted)}
.ph-name{font-family:'Inter Tight',Inter,sans-serif;font-size:26px;font-weight:800;line-height:1.1;background:linear-gradient(130deg,var(--t-base) 55%,var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ph-pills{display:flex;gap:6px;flex-wrap:wrap}
.ph-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-subtle);font-size:11px;font-weight:600;color:var(--t-muted)}
.ph-head-right{display:grid;gap:6px;justify-items:end;flex-shrink:0}
.ph-duty{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--border-soft);background:rgba(0,0,0,.12);flex-wrap:wrap}
.ph-duty-stat{display:grid;gap:4px}
.ph-duty-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t-muted)}
.ph-duty-value{font-family:'Inter Tight',Inter,sans-serif;font-size:30px;font-weight:800;line-height:1;color:var(--t-base)}
.ph-duty-value.live{color:#22c55e}
.ph-duty-info{display:grid;gap:8px;text-align:right;flex:1}
.ph-duty-meta{font-size:12px;color:var(--t-muted);line-height:1.8;display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.ph-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.22);animation:live-pulse 2s ease-in-out infinite;flex-shrink:0}
@keyframes live-pulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.22)}50%{box-shadow:0 0 0 6px rgba(34,197,94,.06)}}
.ph-duty-btn{font-size:12px;font-weight:700;color:var(--primary);background:none;border:none;padding:0;cursor:pointer;text-align:right;transition:color .15s}
.ph-duty-btn:hover{color:var(--primary-light)}
.promo-hero-stats{padding:16px 24px;border-top:1px solid var(--border-soft)}
@media(max-width:600px){
  .ph-head{padding:18px 16px 16px}
  .ph-duty{padding:14px 16px}
  .promo-hero-stats{padding:14px 16px}
  .ph-name{font-size:22px}
  .ph-head-right{justify-items:start}
}

/* ════ PROMO TICKET BOXES ════ */
.promo-ticket-box{transition:border-color .18s,box-shadow .18s,transform .15s}
.promo-ticket-box:hover{
  border-color:color-mix(in oklab,var(--primary) 26%,var(--border-soft));
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

/* ════ SEGMENTED CONTROL ════ */
.today-admin-segmented .seg.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 2px 8px var(--primary-ring);
}

/* ════ CHIPS ════ */
.chip-g{box-shadow:0 0 0 1px rgba(32,166,94,.3)!important}
.chip-r,.chip-a,.chip-warn{box-shadow:0 0 0 1px rgba(217,68,68,.3)!important}

/* ════ WARNING LEVEL CHIPS ════ */
.warning-level-chip.active{
  background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(245,158,11,.06));
  box-shadow:0 0 0 1px rgba(245,158,11,.3);
}

/* ════ PERM CARDS ════ */
.perm-admin-card{transition:border-color .18s,box-shadow .18s}
.perm-admin-card:hover{
  border-color:color-mix(in oklab,var(--primary) 18%,var(--border));
  box-shadow:var(--shadow-sm);
}
.perm-section-block{transition:border-color .18s}

/* ════ RISK TABLE ROWS ════ */
.risk-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.014)}

/* ════ ADMINS TOOLBAR ════ */
.admins-toolbar{
  background:linear-gradient(180deg,var(--bg-subtle),rgba(255,255,255,.004));
}

/* ════ ADMINS TABLE HEADER ════ */
.admins-table-scroll .tbl th{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.022));
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:var(--t-light);
  border-bottom:2px solid var(--border);
}

/* ════ TEMP ADMINS CURRENT CARD ════ */
.temp-admins-card.current-card{
  box-shadow:0 14px 28px rgba(3,12,24,.24),0 0 0 1px rgba(52,211,153,.14);
}
.temp-admins-section.current{
  box-shadow:0 18px 40px rgba(3,12,24,.28),0 0 0 1px rgba(52,211,153,.1);
}

/* ════ LOGIN LOG ════ */
.loginlog-section.collapsed{background:rgba(255,255,255,.016)}
.loginlog-section-head:hover{background:rgba(255,255,255,.016)}

/* ════ ARCHIVE PANEL ════ */
.archive-panel-head:hover{background:rgba(255,255,255,.02)}

/* ════ UPDATE BANNER ════ */
.update-banner{
  background:linear-gradient(135deg,
    color-mix(in oklab,var(--primary) 10%,rgba(6,6,10,.98)),
    rgba(6,6,10,.98));
  border-color:color-mix(in oklab,var(--primary) 22%,rgba(255,255,255,.08));
  box-shadow:var(--shadow-lg),0 0 0 1px var(--primary-ring);
}
.update-banner-title{
  background:linear-gradient(130deg,var(--t-base) 55%,var(--primary-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ════ TAB BADGE PULSE ════ */
.nav-tab-badge[style*="inline-flex"],.nav-tab-badge:not([style*="none"]){
  animation:tab-badge-pulse 2.6s ease-in-out infinite;
}
@keyframes tab-badge-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.45),0 0 0 2px var(--bg-card)}
  55%{box-shadow:0 0 0 6px rgba(248,113,113,0),0 0 0 2px var(--bg-card)}
}

/* ════ NOTIFICATIONS PANEL ════ */
.notifications-panel{border-color:var(--border);overflow:hidden}
.notification-item.ticket{border-right-color:var(--success)}
.notification-item.jail{border-right-color:var(--warning)}

/* ════ LOADING / EMPTY STATE ════ */
.loading{padding:52px 18px}
.empty-state{padding:52px 18px}
.empty-state .em{
  font-size:14px;
  color:var(--t-light);
}

/* ════ SEARCH BAR ════ */
#search-input{
  font-size:15px;
  padding:13px 48px 13px 16px;
  border-radius:16px;
}
.search-wrap .si{
  font-size:18px;
  top:50%;
  transform:translateY(-50%);
}

/* ════ PROMO WIDGET (shadow handled by .promo-login-card) ════ */

/* ════ HISTORY MODAL (custom modal) ════ */
#history-modal{
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* ════ WARNING HISTORY ITEMS ════ */
.warning-history-item{
  transition:border-color .18s,background .18s;
}
.warning-history-item:hover{
  border-color:color-mix(in oklab,var(--warning) 22%,var(--border-soft));
  background:color-mix(in oklab,var(--bg-subtle) 96%,var(--warning) 4%);
}

/* ════ PRIVATE NOTES ════ */
.private-note-item{
  transition:border-color .18s;
}
.private-note-item:hover{
  border-color:color-mix(in oklab,var(--warning) 22%,var(--border-soft));
}

/* ════ SECURITY / ITS-ADMIN TABLE ════ */
#security-content .tbl th,
#itsadmin-content .tbl th,
#discordlogsecurity-content .tbl th,
#warnban-content .tbl th,
#dataissues-content .tbl th,
#admin-ban-feed-content .tbl th,
#admin-duty-feed-content .tbl th,
#admin-jail-feed-content .tbl th{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.022));
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:11px;
  font-weight:800;
  color:var(--t-light);
  border-bottom:2px solid var(--border);
}

/* ════ FORM HINT ════ */
.form-hint{
  font-size:12px;
  color:var(--t-muted);
  margin-top:5px;
  line-height:1.7;
}

/* ════ SCHEDULE COUNTDOWN CHIPS ════ */
.schedule-countdown{font-weight:800;letter-spacing:.02em}

/* ════ WK BOXES ════ */
.wk-box.ok{
  box-shadow:0 0 0 1px rgba(32,166,94,.22);
}
.wk-box.no,.wk-box.wait{
  box-shadow:0 0 0 1px rgba(217,68,68,.22);
}
.wk-box.current{
  box-shadow:0 0 0 1px rgba(209,138,20,.22);
}

/* ════ PROMO PROGRESS BAR ════ */
.promo-progress-bar{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}
.promo-progress-fill{
  border-radius:999px;
  box-shadow:0 0 8px rgba(255,255,255,.08);
}

/* ════ EMBED TEXTAREA (dark code style) ════ */
#embed-text,#warning-preview,#week-awards-batch-text,#week-awards-admin-text{
  background:rgba(0,0,0,.25)!important;
  border-color:var(--border-soft)!important;
  border-radius:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  line-height:1.7;
  color:var(--t-muted);
}

/* ════════════════════════════════════════════════════════
   PROMO LOGIN CARD + OVERLAY HEADER
   ════════════════════════════════════════════════════════ */

/* Widget hide/show toggle button */
.promo-widget-toggle-btn{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 14px;
  font-size:11px;
  color:var(--t-light);
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  transition:background .15s,color .15s;
}
.promo-widget-toggle-btn:hover{background:var(--bg-hover);color:var(--t-base)}

/* ── Login Card ── */
.promo-login-card{
  position:relative;
  width:100%;
  min-width:280px;
  box-sizing:border-box;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:24px 22px 18px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.04),0 0 32px var(--primary-ring);
  overflow:hidden;
}
/* Ambient glow overlay */
.promo-lc-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 95% 55% at 50% 0%,
    color-mix(in oklab,var(--primary) 16%,transparent),
    transparent 65%);
  pointer-events:none;
  z-index:0;
}
.promo-lc-header,
.promo-lc-body,
.promo-lc-themes{position:relative;z-index:1}

/* Header */
.promo-lc-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.promo-lc-icon{
  width:44px;height:44px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  flex-shrink:0;
  box-shadow:0 4px 16px var(--primary-ring),inset 0 1px 0 rgba(255,255,255,.18);
}
.promo-lc-brand{
  font-family:'Inter Tight',Inter,sans-serif;
  font-size:18px;
  font-weight:800;
  background:linear-gradient(130deg,var(--t-base) 52%,var(--primary-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.2;
}
.promo-lc-sub{
  font-size:11px;
  color:var(--t-muted);
  margin-top:3px;
  letter-spacing:.01em;
}

/* Body */
.promo-lc-body{margin-bottom:18px}
.promo-lc-label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:var(--t-light);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.promo-lc-input{
  display:block;
  width:100%;
  box-sizing:border-box;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  color:var(--t-base);
  font-size:14px;
  font-family:inherit;
  margin-bottom:10px;
  transition:border-color .15s,box-shadow .15s,background .18s;
}
.promo-lc-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-ring);
  background:color-mix(in oklab,var(--bg-subtle) 87%,var(--primary) 13%);
}
.promo-lc-input::placeholder{color:var(--t-light);opacity:.6}
.promo-lc-btn{
  display:flex!important;
  width:100%!important;
  justify-content:center!important;
  border-radius:12px!important;
  font-size:13px!important;
  font-weight:700!important;
  padding:11px 16px!important;
  margin-top:4px;
}
.promo-lc-btn + .promo-lc-btn{margin-top:8px}

/* Theme switcher */
.promo-lc-themes{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:14px;
  border-top:1px solid var(--border-soft);
}
.promo-lc-themes-label{
  font-size:11px;
  font-weight:700;
  color:var(--t-light);
  letter-spacing:.03em;
  white-space:nowrap;
}
.promo-lc-dots{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/* ── Dot buttons (shared) ── */
.plc-dot{
  width:18px;height:18px;
  border-radius:50%;
  background:var(--dc,#5865F2);
  border:2px solid rgba(0,0,0,.22);
  cursor:pointer;
  padding:0;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  outline:none;
}
.plc-dot:hover{
  transform:scale(1.25);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--dc,#5865F2) 30%,transparent);
}
.plc-dot.sm{width:13px;height:13px}
/* Active state — highlight the dot matching current theme */
[data-theme="dark"]     .plc-dot[data-t="dark"],
[data-theme="midnight"] .plc-dot[data-t="midnight"],
[data-theme="blue"]     .plc-dot[data-t="blue"],
[data-theme="purple"]   .plc-dot[data-t="purple"],
[data-theme="green"]    .plc-dot[data-t="green"],
[data-theme="amber"]    .plc-dot[data-t="amber"],
[data-theme="rose"]     .plc-dot[data-t="rose"]{
  border-color:rgba(255,255,255,.75);
  transform:scale(1.18);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--dc) 36%,transparent);
}

/* ── Promo Overlay Header ── */
.promo-ov-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.05);
  position:relative;
}
.promo-ov-head::after{
  content:"";
  position:absolute;
  bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(to left,
    transparent,
    color-mix(in oklab,var(--primary) 50%,transparent) 40%,
    transparent 70%);
  opacity:.6;
}
.promo-ov-title-group{display:grid;gap:4px}
.promo-ov-title{
  font-family:'Inter Tight',Inter,sans-serif;
  font-size:26px;
  font-weight:800;
  background:linear-gradient(130deg,var(--t-base) 55%,var(--primary-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.2;
}
.promo-ov-welcome{font-size:13px;color:var(--t-muted)}
.promo-ov-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.promo-ov-theme-dots{
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border:1px solid var(--border-soft);
  border-radius:999px;
  background:var(--bg-subtle);
}

/* ── Better Promo Overlay Shell ── */
.promo-inline-surface .promo-overlay-shell{
  max-width:1320px;
  margin:0 auto;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:24px;
  padding:24px 22px 22px;
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.04);
  background-image:radial-gradient(ellipse 70% 30% at 60% 0%,
    color-mix(in oklab,var(--primary) 6%,transparent),
    transparent 55%);
}

/* auth-locked centering — override widget inline styles behavior */
body.auth-locked:not(.promo-session-active) #promo-widget{
  top:50%!important;left:50%!important;
  right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:550!important;
  align-items:stretch!important;
  width:min(340px,calc(100vw - 28px))!important;
}
body.auth-locked:not(.promo-session-active) #promo-widget-body{
  width:100%!important;min-width:0!important;box-sizing:border-box!important;
}
body.auth-locked:not(.promo-session-active) #promo-widget-toggle{display:none!important}

/* ════════════════════════════════════════════════════════
   AUTH LOGIN — SIMPLE TWO-CARD
   ════════════════════════════════════════════════════════ */

/* auth-lock is already full-screen centered flex */

/* Top-left corner badge */
.al-corner{
  position:absolute;
  top:18px;
  left:18px;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 12px;
  box-shadow:var(--shadow-sm);
}
.al-corner-label{
  font-size:12px;
  font-weight:700;
  color:var(--t-muted);
  white-space:nowrap;
}
.al-corner-btn{
  background:var(--primary);
  border:none;
  border-radius:8px;
  padding:5px 11px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity .15s;
}
.al-corner-btn:hover{opacity:.85}

/* Main centered card */
.al-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--shadow-md);
}
.al-card-main{width:300px}
.al-card-title{
  font-family:'Inter Tight',Inter,sans-serif;
  font-size:17px;
  font-weight:800;
  color:var(--t-base);
}
.al-card-sub{
  font-size:13px;
  color:var(--t-muted);
  line-height:1.7;
  margin-top:-4px;
}
.al-input{
  width:100%;
  box-sizing:border-box;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 13px;
  outline:none;
  color:var(--t-base);
  font-size:15px;
  font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.al-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-ring);
}
.al-input::placeholder{color:var(--t-light);opacity:.4}
.al-btn{
  width:100%;
  justify-content:center;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  padding:12px 16px;
}

body.auth-locked:not(.promo-session-active) #promo-widget{display:none!important}

@media(max-width:480px){
  .al-card-main{width:calc(100vw - 48px)}
  .al-corner{top:12px;left:12px}
}

/* ════════════════════════════════════════════════════════════
   PROMO PROFILE — FULL PAGE REDESIGN
   ════════════════════════════════════════════════════════════ */

.promo-profile-shell{gap:18px}
.promo-profile-main{gap:16px}
.promo-top-strip{gap:0}

.promo-hero-stats{background:transparent}
.promo-hero .promo-meta-shell{gap:8px}
.promo-hero .promo-meta-box{min-height:88px;border-radius:10px;padding:12px 14px;background:rgba(255,255,255,.03);border-color:var(--border-soft);transition:background .15s}
.promo-hero .promo-meta-box:hover{background:rgba(255,255,255,.06)}
.promo-hero .promo-meta-box label{font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.promo-hero .promo-meta-box .val{font-size:17px}
.promo-hero .promo-meta-box .sub{font-size:10px;color:var(--primary-light);font-weight:600}

.promo-ticket-card{background:var(--bg-card);border-color:var(--border-soft);overflow:hidden;min-width:0}
.promo-ticket-card .card-body{display:flex;flex-direction:column;gap:0;padding:0}
.promo-ticket-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px;border-bottom:1px solid var(--border-soft);margin-bottom:0}
.promo-ticket-title{font-size:14px;font-weight:700;letter-spacing:.01em}
.promo-ticket-badge{font-size:10px;font-weight:800;padding:3px 9px;letter-spacing:.06em;text-transform:uppercase;background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.22);color:#22c55e;gap:5px}
.promo-ticket-badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2);animation:live-pulse 2s ease-in-out infinite}
.promo-ticket-split{display:grid;grid-template-columns:3fr 2fr;gap:0}
.promo-ticket-box{min-height:unset;padding:20px 20px 18px;border-radius:0;background:transparent;border:none;border-left:1px solid var(--border-soft);display:flex;flex-direction:column;gap:6px;text-align:right;direction:rtl;justify-items:unset;overflow:hidden;position:relative;min-width:0}
.promo-ticket-box::before{content:"";position:absolute;top:0;right:0;left:0;height:2px;background:rgba(255,255,255,.05)}
.promo-ticket-box.live{min-height:unset;background:rgba(34,197,94,.025)}
.promo-ticket-box.live::before{background:#22c55e}
.promo-ticket-box.daily{min-height:unset;max-width:none;justify-self:auto;background:rgba(255,255,255,.015)}
.promo-ticket-box.daily::before{background:var(--primary)}
.promo-ticket-box::after{display:none}
.promo-ticket-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
.promo-ticket-value{font-family:'Inter Tight',Inter,sans-serif;font-size:72px;font-weight:900;line-height:.9;letter-spacing:-.04em;color:var(--t-base)}
.promo-ticket-value.live{color:#22c55e}
.promo-ticket-value.daily{font-size:38px;letter-spacing:-.02em;color:var(--primary-light)}
.promo-ticket-meta{font-size:11px;color:var(--t-muted);line-height:1.7;text-align:right}
.promo-ticket-note{font-size:10px;color:var(--t-muted);text-align:right;opacity:.65;margin-top:2px}
.promo-ticket-foot{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;border:none}
.promo-ticket-jail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;direction:rtl;padding:13px 18px;border-top:1px solid var(--border-soft);border-radius:0;background:rgba(255,166,0,.025);border-left:none;border-right:none;border-bottom:none}
.promo-ticket-jail-icon{width:34px;height:34px;border-radius:9px;font-size:16px;background:rgba(255,166,0,.12);color:#d18a14}
.promo-ticket-jail-copy{min-width:0;display:grid;gap:3px}
.promo-ticket-jail-title{font-size:12px;font-weight:800;color:var(--t-base)}
.promo-ticket-jail-meta{font-size:11px;color:var(--t-muted);line-height:1.6}
.promo-ticket-jail-count{font-family:'Inter Tight',Inter,sans-serif;font-size:32px;font-weight:900;color:#d18a14;line-height:1}
.promo-ticket-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 18px 12px;border-top:1px solid var(--border-soft);flex-wrap:wrap}
.promo-ticket-action-buttons{gap:8px;display:flex}
.promo-ticket-action-buttons .btn{font-size:11px;padding:5px 10px}
.promo-ticket-note{text-align:right;font-size:10px;opacity:.6;flex:1}

.promo-progress-card{background:linear-gradient(160deg,rgba(255,255,255,.02),var(--bg-card))}
.promo-progress-title{font-size:16px}
.promo-progress-total{font-family:'Inter Tight',Inter,sans-serif;font-weight:800;color:var(--t-base);font-size:13px}
.promo-progress-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}
.promo-progress-row{display:flex;flex-direction:column;gap:7px;border-bottom:none;padding:14px 14px 12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.02);transition:transform .18s,box-shadow .18s,background .18s;position:relative;overflow:hidden;text-align:center;min-width:0}
.promo-progress-row::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.07)}
.promo-progress-row:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.promo-progress-row:last-child{border-bottom:1px solid rgba(255,255,255,.07)}
.promo-progress-row:has(.promo-progress-fill.ok){border-color:rgba(34,197,94,.28);background:linear-gradient(150deg,rgba(34,197,94,.07),rgba(34,197,94,.01) 70%)}
.promo-progress-row:has(.promo-progress-fill.ok)::before{background:#22c55e}
.promo-progress-row:has(.promo-progress-fill.ok):hover{box-shadow:0 8px 24px rgba(34,197,94,.14)}
.promo-progress-row:has(.promo-progress-fill.no){border-color:rgba(215,80,80,.25);background:linear-gradient(150deg,rgba(215,80,80,.06),rgba(215,80,80,.01) 70%)}
.promo-progress-row:has(.promo-progress-fill.no)::before{background:rgba(215,80,80,.8)}
.promo-progress-row:has(.promo-progress-fill.no):hover{box-shadow:0 8px 24px rgba(215,80,80,.12)}
.promo-progress-row:has(.promo-progress-fill.live){border-color:color-mix(in oklab,var(--primary) 35%,transparent);background:linear-gradient(150deg,color-mix(in oklab,var(--primary) 8%,transparent),transparent 70%)}
.promo-progress-row:has(.promo-progress-fill.live)::before{background:var(--primary);animation:live-pulse-bar 2s ease-in-out infinite}
@keyframes live-pulse-bar{0%,100%{opacity:1}50%{opacity:.5}}
.promo-progress-date{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--t-muted);text-align:center}
.promo-progress-bar{height:4px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin:0 2px}
.promo-progress-val{font-family:'Inter Tight',Inter,sans-serif;font-size:24px;font-weight:900;line-height:1;text-align:center}
.promo-progress-quota{font-size:11px;font-weight:600;color:var(--t-muted);text-align:center;margin-top:-3px}
.promo-progress-state{justify-content:center;text-align:center}
.promo-progress-fill{transition:width .6s cubic-bezier(.4,0,.2,1)}
.promo-progress-summary{background:rgba(255,255,255,.025);border-radius:12px;padding:14px 16px;border:1px solid var(--border-soft);gap:10px}

.top-week-card{background:linear-gradient(160deg,color-mix(in oklab,#9ec0ff 5%,var(--bg-card)),var(--bg-card) 70%)}
.top-week-card .card-body{padding:20px;gap:14px}
.top-week-title{font-size:20px}
.top-week-slot{padding:12px 14px;border-radius:10px;background:rgba(158,192,255,.04);border-color:rgba(158,192,255,.14)}
.top-week-slot.primary{border-color:rgba(158,192,255,.22);background:rgba(158,192,255,.06)}
.top-week-rank{font-size:15px;color:#7faef7}
.top-week-label{font-size:10px;color:#7faef7}
.top-week-meta{font-size:10px;color:#ccd9f5;white-space:normal;word-break:break-all}
.top-week-role{padding:10px 14px;border-radius:10px;background:rgba(158,192,255,.03);border-color:rgba(158,192,255,.10)}
.top-week-role-title{font-size:10px;color:#7faef7}
.top-week-role-meta{font-size:10px;color:#ccd9f5;white-space:normal;word-break:break-all}
.top-week-divider{background:rgba(158,192,255,.12)}

.promo-note-card{border-color:rgba(186,111,121,.35);background:linear-gradient(145deg,rgba(186,111,121,.04),var(--bg-card));border-right:3px solid rgba(186,111,121,.55)}
.promo-note-card .card-head{border-bottom-color:rgba(186,111,121,.15)}
.promo-note-card .card-title{font-size:16px}
.promo-note-copy{font-size:14px;line-height:2;border-right:2px solid rgba(186,111,121,.22);padding-right:12px}
.promo-note-meta{font-size:11px;margin-top:12px}

.promo-achievements-card{border-color:rgba(212,170,57,.22);background:linear-gradient(145deg,rgba(212,170,57,.03),var(--bg-card));border-right:3px solid rgba(212,170,57,.44)}
.promo-achievements-card .card-head{background:transparent;border-bottom-color:rgba(212,170,57,.12)}
.promo-achievements-card .card-title{font-size:16px}
.promo-achievements-card .promo-list-item{border-bottom-color:rgba(212,170,57,.1)}
.promo-achievements-card .promo-list-title{font-size:13px;display:flex;align-items:flex-start;gap:8px}
.promo-achievements-card .promo-list-title::before{content:"🏅";font-size:14px;flex-shrink:0;margin-top:1px}
.promo-achievement-compose{background:rgba(255,255,255,.02);border-radius:10px;padding:12px;border:1px solid var(--border-soft)}

.promo-history-card{border-color:var(--border-soft)}
.promo-history-card .card-head .card-title{font-size:16px}
.promo-history-scroll .tbl thead th{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t-muted);background:rgba(255,255,255,.025);padding:10px 14px;border-bottom:1px solid var(--border-soft)}
.promo-history-scroll .tbl tbody tr{transition:background .12s}
.promo-history-scroll .tbl tbody tr:hover{background:rgba(255,255,255,.04)}
.promo-history-scroll .tbl tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.promo-history-scroll .tbl tbody tr:nth-child(even):hover{background:rgba(255,255,255,.04)}
.promo-history-scroll .tbl td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.promo-history-scroll .tbl tbody tr:last-child td{border-bottom:none}

.btn.section-link{font-size:11px;font-weight:700;padding:5px 12px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--primary-light);transition:background .15s,border-color .15s}
.btn.section-link:hover{background:rgba(255,255,255,.08);border-color:var(--primary)}

@media(max-width:860px){
  .promo-lower-grid{grid-template-columns:1fr}
  .promo-ticket-split{grid-template-columns:1fr}
}
@media(max-width:600px){
  .promo-ticket-foot{flex-direction:column;align-items:flex-start;gap:10px}
  .promo-ticket-actions{align-items:flex-start}
}
@media(max-width:480px){
  .promo-ticket-box{padding:16px 16px 14px}
  .promo-ticket-value{font-size:46px}
  .promo-ticket-value.daily{font-size:28px}
  .promo-ticket-jail-icon{width:30px;height:30px;font-size:14px}
  .promo-ticket-jail-count{font-size:24px}
  .promo-progress-strip{grid-template-columns:1fr}
  .top-week-card .card-body{padding:16px}
}

/* ════ MOBILE RESPONSIVE TWEAKS ════ */
@media (max-width:900px){
  .shell{grid-template-columns:1fr!important}
  .d-sidebar{display:none}
  body.sidebar-open .d-sidebar{
    display:flex;
    position:fixed;
    inset:0 auto 0 0;
    width:280px;
    z-index:600;
    animation:sidebar-slide-in .25s ease;
  }
  html[data-sidebar-side="right"] body.sidebar-open .d-sidebar{
    inset:0 0 0 auto;
    animation:sidebar-slide-in-right .25s ease;
  }
  @keyframes sidebar-slide-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
  @keyframes sidebar-slide-in-right{from{transform:translateX(100%)}to{transform:translateX(0)}}
}