/* =============================================
   admin.css — Admin Panel Design Token System
   =============================================
   Scoped to html[data-theme] for specificity over
   body.ui-light.ui-admin (0-2-1) in base.html inline <style>.

   The inline <style> in base.html is LEFT UNTOUCHED.
   These tokens coexist with it and will gradually replace
   scattered {% if ui_theme %} Jinja conditionals in templates.

   Naming: at-* = "admin token" utility classes
   ============================================= */

/* ── Dark tokens (default) ──────────────────── */
html[data-theme="dark"] {
  /* page */
  --admin-bg:              #09090b;
  /* surfaces */
  --admin-surface:         rgba(24,24,27,.6);
  --admin-surface-solid:   #18181b;
  --admin-surface-hover:   #27272a;
  /* borders & rings */
  --admin-border:          #27272a;
  --admin-border-muted:    #3f3f46;
  --admin-ring:            rgba(39,39,42,.55);
  /* typography */
  --admin-text:            #fafafa;
  --admin-text-secondary:  #d4d4d8;
  --admin-text-muted:      #a1a1aa;
  --admin-text-subtle:     #71717a;
  /* inputs */
  --admin-input-bg:        #18181b;
  --admin-input-border:    #3f3f46;
  --admin-input-text:      #fafafa;
  --admin-placeholder:     #71717a;
  /* neutral button */
  --admin-btn-bg:          #27272a;
  --admin-btn-text:        #e4e4e7;
  --admin-btn-border:      transparent;
  --admin-btn-hover:       #3f3f46;
  /* dropdowns */
  --admin-dropdown-bg:     #18181b;
  --admin-dropdown-ring:   #27272a;
  --admin-dropdown-hover:  #27272a;
  /* misc */
  --admin-separator:       #27272a;
  --admin-badge-bg:        rgba(39,39,42,.7);
  /* feedback */
  --admin-ok:              #34d399;
  --admin-ok-surface:      rgba(6,78,59,.25);
  --admin-accent:          #60a5fa;
  --admin-accent-surface:  rgba(37,99,235,.15);

  color-scheme: dark;
}

/* ── Light tokens ───────────────────────────── */
html[data-theme="light"] {
  /* page */
  --admin-bg:              #f0ede8;
  /* surfaces */
  --admin-surface:         rgba(245,243,240,.97);
  --admin-surface-solid:   #ffffff;
  --admin-surface-hover:   rgba(220,216,210,.90);
  /* borders & rings */
  --admin-border:          rgba(212,212,216,.70);
  --admin-border-muted:    rgba(212,212,216,.50);
  --admin-ring:            rgba(212,212,216,.55);
  /* typography */
  --admin-text:            rgba(24,24,27,.92);
  --admin-text-secondary:  rgba(24,24,27,.85);
  --admin-text-muted:      rgba(82,82,91,1);
  --admin-text-subtle:     rgba(113,113,122,1);
  /* inputs */
  --admin-input-bg:        #ffffff;
  --admin-input-border:    rgba(212,212,216,1);
  --admin-input-text:      rgba(24,24,27,1);
  --admin-placeholder:     rgba(161,161,170,1);
  /* neutral button */
  --admin-btn-bg:          rgba(235,232,227,.95);
  --admin-btn-text:        rgba(24,24,27,1);
  --admin-btn-border:      rgba(200,196,190,.80);
  --admin-btn-hover:       rgba(220,216,210,.90);
  /* dropdowns */
  --admin-dropdown-bg:     #ffffff;
  --admin-dropdown-ring:   rgba(212,212,216,1);
  --admin-dropdown-hover:  #f4f4f5;
  /* misc */
  --admin-separator:       rgba(212,212,216,.70);
  --admin-badge-bg:        rgba(212,212,216,.40);
  /* feedback */
  --admin-ok:              #059669;
  --admin-ok-surface:      rgba(209,250,229,.5);
  --admin-accent:          #2563eb;
  --admin-accent-surface:  rgba(219,234,254,.5);

  color-scheme: light;
}


/* ══════════════════════════════════════════════
   Utility classes consuming the tokens.
   Replace Jinja {% if ui_theme %} conditionals
   with these single classes.
   ══════════════════════════════════════════════ */

/* ── Text ── */
.at-text           { color: var(--admin-text); }
.at-text-secondary { color: var(--admin-text-secondary); }
.at-text-muted     { color: var(--admin-text-muted); }
.at-text-subtle    { color: var(--admin-text-subtle); }

/* ── Surfaces ── */
.at-surface        { background-color: var(--admin-surface); }
.at-surface-solid  { background-color: var(--admin-surface-solid); }
.at-bg             { background-color: var(--admin-bg); }

/* ── Borders ── */
.at-border         { border-color: var(--admin-border); }
.at-border-muted   { border-color: var(--admin-border-muted); }
.at-ring           { --tw-ring-color: var(--admin-ring); }
.at-separator      { border-color: var(--admin-separator); }

/* ── Inputs ── */
.at-input {
  background-color: var(--admin-input-bg);
  color: var(--admin-input-text);
  border-color: var(--admin-input-border);
}
.at-input::placeholder {
  color: var(--admin-placeholder);
}

/* ── Neutral button (header, action) ── */
.at-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--admin-btn-bg);
  color: var(--admin-btn-text);
  border: 1px solid var(--admin-btn-border);
  transition: background .15s, border-color .15s;
}
.at-btn:hover {
  background-color: var(--admin-btn-hover);
}

/* ── Dropdown / popover ── */
.at-dropdown {
  background-color: var(--admin-dropdown-bg);
  --tw-ring-color: var(--admin-dropdown-ring);
}
.at-dropdown-btn {
  background: var(--admin-btn-bg);
  color: var(--admin-text);
  border: 1px solid var(--admin-border);
  transition: background .15s, border-color .15s;
}
.at-dropdown-btn:hover {
  background: var(--admin-btn-hover);
}
.at-dropdown-panel {
  background: var(--admin-dropdown-bg);
  border: 1px solid var(--admin-dropdown-ring);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.at-dropdown-item {
  color: var(--admin-text);
  transition: background .15s, color .15s;
}
.at-dropdown-item:hover {
  background-color: var(--admin-dropdown-hover);
}
.at-dropdown-item.on {
  background: var(--admin-surface-hover);
  color: var(--admin-text);
}
.at-dropdown-meta { color: var(--admin-text-muted); }
.at-dropdown-div  { border-color: var(--admin-border); }
.at-dropdown-logout { background: var(--admin-surface); }
.at-dropdown-logout:hover { background: var(--admin-surface-hover); }

/* ── Card (panel surface + border) ── */
.at-card {
  background-color: var(--admin-surface);
  border-color: var(--admin-border);
}

/* ── Badge ── */
.at-badge {
  background-color: var(--admin-badge-bg);
  color: var(--admin-text-muted);
}


/* ══════════════════════════════════════════════
   Sticky topnav, tabs, theme toggle, mobile pills
   ══════════════════════════════════════════════ */

/* ── Sticky topnav ── */
.admin-topnav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--admin-surface-solid);
  border-bottom: 1px solid var(--admin-border);
  transition: background .25s, border-color .25s;
}
.admin-topnav-inner {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 8px;
}

/* ── Brand ── */
.admin-brand {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--admin-text-muted);
  letter-spacing: .04em;
  text-decoration: none;
  flex-shrink: 0;
}
.admin-brand:hover { color: var(--admin-text); }

/* ── Nav separator ── */
.admin-nav-sep {
  width: 1px;
  height: 18px;
  background: var(--admin-border);
  flex-shrink: 0;
  margin: 0 4px;
}

/* ── Desktop tab links ── */
.admin-nav-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-nav-tabs::-webkit-scrollbar { display: none; }

.admin-ntab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--admin-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.admin-ntab:hover {
  color: var(--admin-text);
  background: var(--admin-surface-hover);
}
.admin-ntab.on {
  color: var(--admin-text);
  background: var(--admin-surface-hover);
}

/* ── Right controls group ── */
.admin-nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Theme toggle button (animated sun/moon) ── */
.admin-thm-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--admin-border);
  background: none;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  position: relative;
  overflow: hidden;
}
.admin-thm-btn:hover {
  background: var(--admin-surface-hover);
  color: var(--admin-text);
}
.admin-thm-btn svg {
  position: absolute;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}

/* Sun/moon icon swap driven by data-theme on <html> */
[data-theme="dark"] .ico-s  { transform: rotate(0) scale(1); opacity: 1; }
[data-theme="dark"] .ico-m  { transform: rotate(90deg) scale(0); opacity: 0; }
[data-theme="light"] .ico-s { transform: rotate(-90deg) scale(0); opacity: 0; }
[data-theme="light"] .ico-m { transform: rotate(0) scale(1); opacity: 1; }

/* ── Mobile pill tabs ── */
.admin-mob-tabs {
  display: none;
  gap: 4px;
  padding: 10px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  scrollbar-width: none;
  background: var(--admin-surface-solid);
  border-bottom: 1px solid var(--admin-border);
  position: sticky;
  top: 52px;
  z-index: 190;
  opacity: 0;
  transition: opacity .15s ease, background .25s, border-color .25s;
}
.admin-mob-tabs::-webkit-scrollbar { display: none; }

.admin-mtab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-text-subtle);
  white-space: nowrap;
  border: 1.5px solid transparent;
  background: var(--admin-surface-hover);
  text-decoration: none;
  flex-shrink: 0;
  transition: color .15s, background .15s, border-color .15s;
}
.admin-mtab.on {
  color: var(--admin-text);
  background: var(--admin-surface);
  border-color: var(--admin-border-muted);
}
.admin-mtab:active { transform: scale(.96); }

/* ── Responsive: hide desktop tabs, show mobile pills ── */
@media (max-width: 768px) {
  .admin-nav-tabs { display: none; }
  .admin-mob-tabs { display: flex; }
  .admin-topnav-inner { padding: 0 12px; gap: 6px; }
}


/* ══════════════════════════════════════════════
   Edit-page layout: sidebar + main + sections
   ══════════════════════════════════════════════ */

/* ── Page header ── */
.at-ph {
  padding: 24px 0 0;
}
.at-ph h1 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--admin-text);
}
.at-ph .at-slug {
  margin-top: 2px;
  font-size: .8125rem;
  color: var(--admin-text-subtle);
}

/* ── Two-column layout ── */
.at-layout {
  display: flex;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* ── Sidebar ── */
.at-sb {
  position: sticky;
  top: 68px;
  align-self: flex-start;
  width: 180px;
  flex-shrink: 0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.at-sb-a {
  display: block;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--admin-text-subtle);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.at-sb-a:hover {
  color: var(--admin-text);
  background: var(--admin-surface-hover);
}
.at-sb-a.on {
  color: var(--admin-text);
  background: var(--admin-surface-hover);
}

/* ── Main column ── */
.at-main {
  flex: 1;
  min-width: 0;
}

/* ── Section ── */
.at-sec {
  padding-top: 32px;
}
.at-sec + .at-sec {
  border-top: 1px solid var(--admin-separator);
}

/* ── Section heading ── */
.at-sh {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 20px;
}
.at-sh-sub {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--admin-text-muted);
  margin-top: 2px;
}

/* ── Field row ── */
.at-fr {
  margin-bottom: 16px;
}
.at-fr label,
.at-fl {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--admin-text-secondary);
  margin-bottom: 4px;
}
.at-fl-hint {
  font-weight: 400;
  color: var(--admin-text-subtle);
}
.at-fhelp {
  margin-top: 4px;
  font-size: .75rem;
  color: var(--admin-text-subtle);
}
.at-ferr {
  margin-top: 4px;
  font-size: .75rem;
  color: #fb7185;
}

/* ── Themed input ── */
.at-inp {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--admin-input-border);
  background: var(--admin-input-bg);
  color: var(--admin-input-text);
  padding: 10px 14px;
  font-size: .875rem;
  outline: none;
  transition: border-color .15s;
}
.at-inp:focus {
  border-color: var(--admin-text-subtle);
}
.at-inp::placeholder {
  color: var(--admin-placeholder);
}
textarea.at-inp {
  resize: vertical;
}
/* Override browser autofill colours to match theme */
.at-inp:-webkit-autofill,
.at-inp:-webkit-autofill:hover,
.at-inp:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--admin-input-text);
  -webkit-box-shadow: 0 0 0 1000px var(--admin-input-bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Themed checkbox row ── */
.at-ck {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background: var(--admin-surface);
  margin-bottom: 12px;
}
.at-ck input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.at-ck-label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--admin-text);
}
.at-ck-help {
  font-size: .8125rem;
  color: var(--admin-text-muted);
}

/* ── Radio group ── */
.at-rg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.at-ro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--admin-surface);
  cursor: pointer;
  transition: background .15s;
}
.at-ro:hover {
  background: var(--admin-surface-hover);
}
.at-ro input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.at-ro-label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--admin-text);
}
.at-ro-help {
  font-size: .8125rem;
  color: var(--admin-text-muted);
}

/* ── Card panel ── */
.at-card {
  background-color: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

/* ── Theme selector row ── */
.at-trow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Social field inline ── */
.at-sfi {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.at-sfi svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.at-sfi .at-sfi-wrap {
  flex: 1;
  min-width: 0;
}

/* ── Upload card ── */
.at-up {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--admin-surface);
  margin-bottom: 16px;
}
.at-up-info {
  flex: 1;
  min-width: 0;
}
.at-up-title {
  font-size: .875rem;
  font-weight: 500;
  color: var(--admin-text);
}
.at-up-help {
  font-size: .8125rem;
  color: var(--admin-text-muted);
  margin-top: 2px;
}
.at-up-preview {
  flex-shrink: 0;
}
.at-up-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 500;
  background: var(--admin-btn-bg);
  color: var(--admin-btn-text);
  border: 1px solid var(--admin-btn-border);
  cursor: pointer;
  transition: background .15s;
}
.at-up-btn:hover {
  background: var(--admin-btn-hover);
}
.at-up-fname {
  font-size: .8125rem;
  color: var(--admin-text-muted);
  margin-top: 6px;
}
.at-up-rm {
  font-size: .75rem;
  color: #fb7185;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 6px;
}
.at-up-rm:hover {
  color: #f43f5e;
}

/* ── Save bar ── */
.at-sbar {
  position: sticky;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-top: 32px;
  border-radius: 12px 12px 0 0;
  background: var(--admin-surface-solid);
  border-top: 1px solid var(--admin-border);
}
.at-sbar-st {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: var(--admin-text-muted);
}
.at-ud {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  display: none;
}
.at-sbar-act {
  flex-shrink: 0;
}
.at-btn-sv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--admin-text);
  color: var(--admin-bg);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s;
}
.at-btn-sv:hover {
  opacity: .88;
}
.at-btn-disc {
  display: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.at-btn-disc:hover {
  background: var(--admin-surface-hover);
  color: var(--admin-text);
}

/* ── Flash messages ── */
.at-flash {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.at-flash-success {
  background: var(--admin-ok-surface);
  border: 1px solid var(--admin-ok);
  color: var(--admin-ok);
}
.at-flash-error {
  background: rgba(239,68,68,.12);
  border: 1px solid #ef4444;
  color: #ef4444;
}
.at-flash-info {
  background: var(--admin-accent-surface);
  border: 1px solid var(--admin-accent);
  color: var(--admin-accent);
}
.at-flash-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  transition: opacity .15s;
}
.at-flash-dismiss:hover {
  opacity: 1;
}

/* ── Language tabs ── */
.at-ltabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}
.at-ltab {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  background: var(--admin-btn-bg);
  color: var(--admin-text-subtle);
}
.at-ltab.on {
  background: #7c3aed;
  color: #fff;
}
.at-ltab-hint {
  margin-left: 8px;
  font-size: .625rem;
  color: var(--admin-text-subtle);
}

/* ── Tip box ── */
.at-tip {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  font-size: .8125rem;
  color: var(--admin-text-muted);
  margin-top: 14px;
}
.at-tip strong {
  color: var(--admin-text-secondary);
}

/* ── Grid helpers ── */
.at-g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .at-g2 { grid-template-columns: 1fr; }
}

/* ── Mobile section pills (edit_page intra-page nav) ── */
.admin-mob-sections {
  display: none;
  gap: 4px;
  padding: 8px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  scrollbar-width: none;
  background: var(--admin-surface);
  border-bottom: 1px solid var(--admin-border);
  position: sticky;
  top: 96px;
  z-index: 180;
  opacity: 0;
  transition: opacity .15s ease, background .25s, border-color .25s;
}
.admin-mob-sections::-webkit-scrollbar { display: none; }

.admin-msec {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-text-subtle);
  white-space: nowrap;
  border: 1.5px solid transparent;
  background: var(--admin-surface-hover);
  text-decoration: none;
  flex-shrink: 0;
  transition: color .15s, background .15s, border-color .15s;
}
.admin-msec.on {
  color: var(--admin-text);
  background: var(--admin-surface-solid);
  border-color: var(--admin-border-muted);
}
.admin-msec:active { transform: scale(.96); }

/* ── Responsive: hide sidebar on mobile, show section pills ── */
@media (max-width: 768px) {
  .at-layout { padding: 0 14px 80px; }
  .at-sb { display: none; }
  .at-ph { padding: 16px 0 0; }
  .admin-mob-sections { display: flex; }
}


/* ══════════════════════════════════════════════
   Gallery & Albums page
   ══════════════════════════════════════════════ */

/* ── Gallery page wrapper ── */
.at-gallery-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem 5rem;
}

/* ── Page header variant with right-side actions ── */
.at-ph-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 24px 0 0;
}
.at-ph-row h1 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--admin-text);
}
.at-ph-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Quota / meter bar ── */
.at-quota {
  border-radius: 16px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  padding: 12px 16px;
  margin-bottom: 12px;
  transition: background .25s, border-color .25s;
}
.at-quota-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.at-quota-label {
  font-size: .875rem;
  color: var(--admin-text-secondary);
}
.at-quota-val {
  font-weight: 500;
  color: var(--admin-text);
}
.at-quota-badge {
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 500;
}
.at-quota-badge-ok {
  background: var(--admin-ok-surface);
  color: var(--admin-ok);
}
.at-quota-badge-full {
  background: rgba(239,68,68,.15);
  color: #fb7185;
}
.at-quota-track {
  margin-top: 8px;
  height: 6px;
  width: 100%;
  border-radius: 9999px;
  background: var(--admin-btn-bg);
}
.at-quota-fill {
  height: 6px;
  border-radius: 9999px;
  transition: width .3s;
}
.at-quota-fill-ok   { background: var(--admin-ok); }
.at-quota-fill-warn { background: #f59e0b; }
.at-quota-fill-full { background: #ef4444; }

/* ── Upload zone ── */
.at-uz {
  border-radius: 16px;
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  padding: 16px;
  margin-top: 20px;
  transition: background .25s, border-color .25s;
}
.at-uz h2 {
  font-size: .875rem;
  font-weight: 500;
  color: var(--admin-text-secondary);
}

/* ── Quality radio cards ── */
.at-quality-card {
  border-radius: 12px;
  border: 1px solid var(--admin-input-border);
  background: var(--admin-input-bg);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.at-quality-card:has(input:checked) {
  border-color: var(--admin-accent);
  background: var(--admin-accent-surface);
}
.at-quality-card .at-qc-title {
  font-size: .875rem;
  font-weight: 500;
  color: var(--admin-text);
}
.at-quality-card .at-qc-sub {
  margin-top: 4px;
  font-size: .6875rem;
  color: var(--admin-text-muted);
}
.at-quality-card .at-qc-hint {
  margin-top: 4px;
  font-size: .625rem;
  color: var(--admin-text-subtle);
}
.at-qc-rec {
  font-size: .625rem;
  color: var(--admin-accent);
  margin-left: 4px;
}

/* ── Album card (gallery + albums page) ── */
.at-album-card {
  border-radius: 16px;
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  overflow: hidden;
  transition: border-color .15s, background .25s;
}
.at-album-card:hover {
  border-color: var(--admin-border-muted);
}
.at-album-cover {
  height: 8rem;
  background: var(--admin-btn-bg);
  position: relative;
  overflow: hidden;
}
.at-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.at-album-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-subtle);
}
.at-album-badge {
  position: absolute;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 500;
}
.at-album-badge-count {
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.6);
  color: #fafafa;
}
.at-album-badge-inactive {
  top: 8px;
  left: 8px;
  background: rgba(217,119,6,.85);
  color: #fff;
}
.at-album-card-inactive {
  opacity: .45;
}
.at-album-card-inactive:hover {
  opacity: .7;
}
.at-album-info {
  padding: 12px;
}
.at-album-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 4px;
}
.at-album-desc {
  font-size: .75rem;
  color: var(--admin-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.at-album-thumbs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.at-album-thumb {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--admin-btn-bg);
  flex-shrink: 0;
}
.at-album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.at-album-thumb-more {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 8px;
  background: var(--admin-btn-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .625rem;
  color: var(--admin-text-subtle);
}
.at-album-actions {
  display: flex;
  gap: 8px;
}

/* ── Gallery tile (image + link cards) ── */
.at-tile {
  border-radius: 16px;
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  overflow: hidden;
  transition: border-color .15s, background .25s;
}
.at-tile-img {
  height: 14rem;
  width: 100%;
  object-fit: cover;
  transition: opacity .15s;
}
.at-tile-img-hidden { opacity: .4; }
.at-tile-handle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  border-radius: 12px;
  background: rgba(0,0,0,.6);
  padding: 4px 8px;
  font-size: .75rem;
  color: #fafafa;
  border: none;
  cursor: grab;
  transition: background .15s;
}
.at-tile-handle:hover { background: rgba(0,0,0,.8); }
.at-tile-badge {
  position: absolute;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: .75rem;
  font-weight: 500;
  z-index: 10;
}
.at-tile-badge-hidden {
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.6);
  color: #fafafa;
}
.at-tile-badge-platform {
  top: 8px;
  right: 8px;
  color: #fff;
}
.at-tile-badge-album {
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,.6);
  color: var(--admin-ok);
}
.at-tile-body {
  padding: 12px;
}
.at-tile-meta {
  margin-top: 8px;
  font-size: .75rem;
  color: var(--admin-text-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.at-tile-meta a {
  text-decoration: underline;
  color: var(--admin-text-subtle);
  transition: color .15s;
}
.at-tile-meta a:hover { color: var(--admin-text); }
.at-tile-id {
  font-size: .6875rem;
  color: var(--admin-text-subtle);
}

/* ── Toolbar buttons (select mode) ── */
.at-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.at-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text-secondary);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.at-toolbar-btn:hover {
  background: var(--admin-surface-hover);
}

/* ── Caption language tab ── */
.at-clang {
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .625rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  background: var(--admin-btn-bg);
  color: var(--admin-text-subtle);
}
.at-clang.on {
  background: #7c3aed;
  color: #fff;
}

/* ── Link tile placeholder ── */
.at-tile-link-area {
  height: 14rem;
  background: var(--admin-input-bg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.at-tile-link-empty {
  color: var(--admin-text-subtle);
}
.at-tile-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.at-tile-play-icon {
  border-radius: 9999px;
  background: rgba(0,0,0,.6);
  padding: 12px;
}

/* ── Toast ── */
.at-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  border-radius: 16px;
  background: var(--admin-surface-solid);
  border: 1px solid var(--admin-border);
  padding: 12px 16px;
  font-size: .875rem;
  color: var(--admin-text);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.at-toast-err {
  border-color: #ef4444;
  background: rgba(127,29,29,.9);
}

/* ── Empty state ── */
.at-empty {
  border-radius: 16px;
  border: 1px dashed var(--admin-border);
  background: var(--admin-surface);
  padding: 48px;
  text-align: center;
  transition: background .25s, border-color .25s;
}
.at-empty-icon {
  margin: 0 auto 16px;
  width: 4rem;
  height: 4rem;
  border-radius: 16px;
  background: var(--admin-btn-bg);
  color: var(--admin-text-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.at-empty-text {
  font-size: .875rem;
  color: var(--admin-text-muted);
  margin-bottom: 20px;
}

/* ── Reorder up/down buttons ── */
.at-reorder-pair {
  display: flex;
  gap: 6px;
}
.at-reorder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 0;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .at-reorder-btn {
    width: 44px;
    height: 44px;
  }
  .at-reorder-btn svg {
    width: 22px;
    height: 22px;
  }
  .at-reorder-pair {
    gap: 10px;
  }
}

/* ── Accent buttons (non-theme-dependent) ── */
.at-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, opacity .15s;
}
.at-btn-accent:hover { opacity: .88; }
.at-btn-accent-emerald { background: #059669; }
.at-btn-accent-purple  { background: #7c3aed; }
.at-btn-accent-sky     { background: #0284c7; }

/* ── Danger button (outline-red, theme-aware) ── */
.at-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.3);
  color: #ef4444;
  transition: background .15s, border-color .15s;
}
.at-btn-danger:hover {
  background: rgba(239,68,68,.22);
  border-color: rgba(239,68,68,.5);
}

/* ── Upload resize status ── */
.at-uz-status {
  margin-top: 12px;
  border-radius: 12px;
  background: var(--admin-btn-bg);
  padding: 12px 16px;
  font-size: .875rem;
  color: var(--admin-text-secondary);
  align-items: center;
  gap: 8px;
}
.at-uz-status:not(.hidden) {
  display: flex;
}

/* ── Disabled form control overlay ── */
.at-disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Gallery grid ── */
.at-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .at-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .at-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Album grid ── */
.at-album-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .at-album-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .at-album-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Section heading (gallery) ── */
.at-gsh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.at-gsh h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--admin-text);
}
.at-gsh a {
  font-size: .875rem;
  color: var(--admin-text-muted);
  text-decoration: none;
  transition: color .15s;
}
.at-gsh a:hover { color: var(--admin-text); }

/* ── Upload form 2-col grid ── */
.at-uz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .at-uz-grid { grid-template-columns: 1fr; }
}

/* ── Quality grid (3-col) ── */
.at-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* ── Checkbox control (gallery inline) ── */
.at-ck-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--admin-text-secondary);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   Employees — tables, badges, icon buttons,
   filter bar, pagination, danger zone
   ══════════════════════════════════════════════ */

/* ── Table ── */
.at-tbl-wrap {
  border-radius: 12px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  overflow: hidden;
}
.at-tbl-scroll { overflow-x: auto; }
.at-tbl { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.at-tbl thead { background: var(--admin-surface-solid); }
.at-tbl th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--admin-text-secondary);
  white-space: nowrap;
}
.at-tbl td { padding: 10px 16px; color: var(--admin-text); }
.at-tbl-divide > tr + tr { border-top: 1px solid var(--admin-border); }
.at-tbl tbody tr { transition: background .12s; }
.at-tbl tbody tr:hover { background: var(--admin-surface-hover); }

/* ── Color badges (pills) ── */
.at-badge-green,
.at-badge-blue,
.at-badge-purple,
.at-badge-red,
.at-badge-yellow,
.at-badge-orange,
.at-badge-muted {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: .6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.at-badge-green  { background: rgba(5,150,105,.15); color: #34d399; }
.at-badge-blue   { background: rgba(59,130,246,.15); color: #60a5fa; }
.at-badge-purple { background: rgba(124,58,237,.15); color: #a78bfa; }
.at-badge-red    { background: rgba(239,68,68,.15);  color: #f87171; }
.at-badge-yellow { background: rgba(234,179,8,.15);  color: #facc15; }
.at-badge-orange { background: rgba(249,115,22,.15); color: #fb923c; }
.at-badge-muted  { background: var(--admin-badge-bg); color: var(--admin-text-muted); }

html[data-theme="light"] .at-badge-green  { background: rgba(5,150,105,.12); color: #059669; }
html[data-theme="light"] .at-badge-blue   { background: rgba(59,130,246,.12); color: #2563eb; }
html[data-theme="light"] .at-badge-purple { background: rgba(124,58,237,.12); color: #7c3aed; }
html[data-theme="light"] .at-badge-red    { background: rgba(239,68,68,.12);  color: #dc2626; }
html[data-theme="light"] .at-badge-yellow { background: rgba(234,179,8,.12);  color: #ca8a04; }
html[data-theme="light"] .at-badge-orange { background: rgba(249,115,22,.12); color: #ea580c; }

/* ── Code badge (slug) ── */
.at-code {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--admin-badge-bg);
  color: var(--admin-text-muted);
}

/* ── Icon action buttons ── */
.at-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  text-decoration: none;
}
.at-icon-btn:hover {
  background: var(--admin-surface-hover);
  color: var(--admin-text);
}
.at-icon-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.at-icon-btn-danger:hover {
  background: rgba(239,68,68,.12);
  color: #ef4444;
}

/* ── Avatar (32x32 circle) ── */
.at-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}
.at-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6875rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── Section title (form cards) ── */
.at-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 16px;
}

/* ── Danger zone ── */
.at-danger-zone {
  margin-top: 1.5rem;
  border-radius: 12px;
  background: var(--admin-surface);
  padding: 20px 24px;
  border: 1px solid rgba(239,68,68,.25);
}
.at-danger-zone-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #ef4444;
  margin-bottom: 6px;
}
.at-danger-zone-text {
  font-size: .8125rem;
  color: var(--admin-text-muted);
  margin-bottom: 12px;
}

/* ── Filter bar ── */
.at-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  border-radius: 12px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  padding: 16px;
  margin-top: 1.5rem;
}

/* ── Pagination ── */
.at-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1.5rem;
}
.at-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: var(--admin-btn-bg);
  color: var(--admin-btn-text);
  border: 1px solid var(--admin-btn-border);
  transition: background .15s;
}
.at-page-btn:hover { background: var(--admin-btn-hover); }
.at-page-info {
  font-size: .8125rem;
  color: var(--admin-text-muted);
}

/* ── File input ── */
.at-file-input {
  display: block;
  width: 100%;
  font-size: .8125rem;
  color: var(--admin-text-muted);
}
.at-file-input::file-selector-button {
  margin-right: 12px;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--admin-btn-border);
  background: var(--admin-btn-bg);
  color: var(--admin-btn-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.at-file-input::file-selector-button:hover {
  background: var(--admin-btn-hover);
}

/* ── Shared permissions letters ── */
.at-perm-u { color: #34d399; }
.at-perm-e { color: #60a5fa; }
.at-perm-d { color: #f87171; }
html[data-theme="light"] .at-perm-u { color: #059669; }
html[data-theme="light"] .at-perm-e { color: #2563eb; }
html[data-theme="light"] .at-perm-d { color: #dc2626; }

/* ── Profile photo circle (form) ── */
.at-photo-preview {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid var(--admin-border);
}

/* ── 2-col inline row (rate limit) ── */
.at-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.at-inline-row .at-inp { flex: 0 0 auto; }
.at-inline-row .at-inp:first-child { width: 7rem; }

/* ══════════════════════════════════════════════
   Statistics page
   ══════════════════════════════════════════════ */

/* ── Stat card (JS-rendered metric card) ── */
.at-stat-card {
  border-radius: 12px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  padding: 16px;
}
.at-stat-label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--admin-text-subtle);
  margin-bottom: 4px;
}
.at-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-text);
}
.at-stat-extra {
  font-size: .6875rem;
  color: var(--admin-text-subtle);
  margin-top: 4px;
}

/* ── Stats tab bar ── */
.at-stats-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--admin-border);
  margin-bottom: 1.5rem;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
}
.at-stats-tabs::-webkit-scrollbar { display: none; }
.at-stats-tab {
  padding: 8px 16px;
  font-size: .8125rem;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  border: none;
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: color .12s, background .12s;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex: 0 0 auto;
}
.at-stats-tab:hover { color: var(--admin-text); }
.at-stats-tab.on {
  color: var(--admin-text);
  background: var(--admin-surface-solid);
  border-bottom-color: var(--admin-accent);
}

/* ── Chart container ── */
.at-chart-card {
  border-radius: 12px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  padding: 16px;
}
.at-chart-title {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--admin-text-muted);
  margin-bottom: 12px;
}

/* ── Insights lock overlay ── */
.at-insights-lock {
  position: absolute;
  inset: 0;
  background: var(--admin-surface);
  opacity: .92;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.at-insights-lock-inner {
  text-align: center;
}
.at-insights-lock-text {
  font-size: .8125rem;
  color: var(--admin-text-muted);
  margin-bottom: 8px;
}

/* ── Storage gauge ── */
.at-gauge-track {
  flex: 1;
  height: 16px;
  border-radius: 9999px;
  background: var(--admin-surface-solid);
  overflow: hidden;
}
.at-gauge-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width .5s, background-color .3s;
}
.at-gauge-label {
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Range preset button (small pill) ── */
.at-range-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: .6875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .12s;
}
.at-range-btn:hover { opacity: .85; }

/* ── Stats loading spinner ── */
.at-stats-loading {
  text-align: center;
  padding: 3rem 0;
  color: var(--admin-text-muted);
}
.at-stats-loading .at-spin {
  display: inline-block;
  animation: at-spin 1s linear infinite;
  font-size: 1.5rem;
}
@keyframes at-spin { to { transform: rotate(360deg); } }

/* ── Stats error state ── */
.at-stats-error {
  text-align: center;
  padding: 3rem 0;
  display: none;
}
.at-stats-error:not(.hidden) { display: block; }
.at-stats-error-msg { color: #ef4444; }
.at-stats-error-retry {
  color: var(--admin-accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  margin-left: 8px;
}
.at-stats-error-retry:hover { text-decoration: underline; }

/* ── Stats bottom actions bar ── */
.at-stats-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--admin-border);
}

/* ── Stats card grid (2-col, 4-col on md) ── */
.at-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .at-stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Stats 2-col chart grid ── */
.at-chart-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .at-chart-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Upgrade box ── */
.at-upgrade-box {
  border-radius: 12px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  padding: 2rem;
  text-align: center;
}
.at-upgrade-box-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 8px;
}
.at-upgrade-box-desc {
  font-size: .875rem;
  color: var(--admin-text-muted);
  margin-bottom: 1.5rem;
}

/* ── Share URL input ── */
.at-share-input {
  border-radius: 8px;
  background: var(--admin-input-bg);
  border: 1px solid var(--admin-input-border);
  color: var(--admin-text-secondary);
  font-size: .75rem;
  padding: 6px 12px;
  width: 18rem;
}

/* ── Disabled state for stats inputs ── */
.at-inp-disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════
   QR Tools page
   ══════════════════════════════════════════════ */

/* ── QR pill tab bar ── */
.at-qr-tab-bar {
  display: flex;
  gap: 4px;
  background: var(--admin-surface-solid);
  border-radius: 12px;
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
}
.at-qr-tab-bar::-webkit-scrollbar { display: none; }
.at-qr-tab {
  flex: 1 0 auto;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.at-qr-tab:hover { color: var(--admin-text); }
.at-qr-tab.on {
  background: var(--admin-surface-hover);
  color: var(--admin-text);
}

/* ── QR example picker tile ── */
.at-qr-example {
  text-align: left;
  border-radius: 8px;
  background: var(--admin-btn-bg);
  border: 1px solid var(--admin-btn-border);
  padding: 8px 12px;
  cursor: pointer;
  transition: background .12s;
}
.at-qr-example:hover { background: var(--admin-btn-hover); }

/* ── Gallery selection tile ── */
.at-qr-tile {
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--admin-border);
  transition: border-color .15s;
  position: relative;
}
.at-qr-tile:hover { border-color: var(--admin-accent); }
.at-qr-tile.selected { border-color: #6366f1; }

.at-qr-tile-check {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #6366f1;
  color: #fff;
  font-size: .6875rem;
  align-items: center;
  justify-content: center;
}
.at-qr-tile.selected .at-qr-tile-check { display: flex; }

/* ── QR tile cover image area ── */
.at-qr-tile-cover {
  background: var(--admin-surface-solid);
  overflow: hidden;
}
.at-qr-tile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.at-qr-tile-label {
  padding: 4px 8px;
  font-size: .6875rem;
  color: var(--admin-text-secondary);
  background: var(--admin-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Paper size radio card ── */
.at-qr-paper-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 2px solid var(--admin-border);
  cursor: pointer;
  padding: 8px 4px;
  transition: border-color .15s;
}
.at-qr-paper-btn:hover { border-color: var(--admin-accent); }
.at-qr-paper-btn.selected {
  border-color: #6366f1;
  background: rgba(99,102,241,.1);
}

/* ── Advisory boxes ── */
.at-qr-advisory-red {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .75rem;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.3);
  color: #f87171;
}
.at-qr-advisory-yellow {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .75rem;
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.3);
  color: #fbbf24;
}
.at-qr-advisory-info {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .8125rem;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.3);
  color: #a5b4fc;
}
html[data-theme="light"] .at-qr-advisory-red {
  background: rgba(239,68,68,.08);
  color: #dc2626;
}
html[data-theme="light"] .at-qr-advisory-yellow {
  background: rgba(234,179,8,.08);
  color: #ca8a04;
}
html[data-theme="light"] .at-qr-advisory-info {
  background: rgba(99,102,241,.08);
  color: #4f46e5;
}

/* ── NFC status badges ── */
.at-nfc-status-success {
  border-radius: 8px; padding: 12px 16px; font-size: .8125rem; text-align: center;
  background: rgba(5,150,105,.15); border: 1px solid rgba(5,150,105,.3); color: #34d399;
}
.at-nfc-status-error {
  border-radius: 8px; padding: 12px 16px; font-size: .8125rem; text-align: center;
  background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: #f87171;
}
.at-nfc-status-info {
  border-radius: 8px; padding: 12px 16px; font-size: .8125rem; text-align: center;
  background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3); color: #a5b4fc;
}
.at-nfc-status-waiting {
  border-radius: 8px; padding: 12px 16px; font-size: .8125rem; text-align: center;
  background: var(--admin-btn-bg); color: var(--admin-text-secondary);
}
html[data-theme="light"] .at-nfc-status-success { background: rgba(5,150,105,.08); color: #059669; }
html[data-theme="light"] .at-nfc-status-error { background: rgba(239,68,68,.08); color: #dc2626; }
html[data-theme="light"] .at-nfc-status-info { background: rgba(99,102,241,.08); color: #4f46e5; }

/* ── QR counter colors ── */
.at-counter-red { font-size: .75rem; color: #f87171; }
.at-counter-yellow { font-size: .75rem; color: #fbbf24; }
.at-counter-muted { font-size: .75rem; color: var(--admin-text-subtle); }
html[data-theme="light"] .at-counter-red { color: #dc2626; }
html[data-theme="light"] .at-counter-yellow { color: #ca8a04; }

/* ── QR preview area ── */
.at-qr-preview-card {
  border-radius: 12px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 320px;
}

/* ── QR preview spinner ── */
.at-qr-spinner {
  width: 40px;
  height: 40px;
  border: 2px solid #6366f1;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: at-spin 1s linear infinite;
  margin-bottom: 12px;
}

/* ── QR usage quota bar ── */
.at-quota-bar {
  border-radius: 12px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  padding: 12px 16px;
}

/* ── QR section divider ── */
.at-qr-divider {
  border-top: 1px solid var(--admin-border);
  padding-top: 12px;
}

/* ── Details/summary (advanced options) ── */
.at-qr-details summary {
  cursor: pointer;
  font-size: .75rem;
  color: var(--admin-text-subtle);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .12s;
}
.at-qr-details summary:hover { color: var(--admin-text-secondary); }
.at-qr-details summary::-webkit-details-marker { display: none; }

/* ── NFC record display ── */
.at-nfc-record {
  border-radius: 8px;
  background: var(--admin-btn-bg);
  padding: 8px 12px;
}

/* ── QR example tile text ── */
.at-qr-example-title { font-size: .875rem; color: var(--admin-fg); }
.at-qr-example-desc  { display: block; font-size: .75rem; color: var(--admin-muted); margin-top: 2px; }

/* ── QR 2-column responsive grid ── */
.at-qr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media(max-width:768px) { .at-qr-grid { grid-template-columns: 1fr; } }

/* ── PWA setup page ── */
.at-pwa-wrap {
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 1rem 5rem;
}
.at-pwa-section {
  border-radius: 16px;
  padding: 16px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
}
.at-pwa-mode-card {
  display: block;
  cursor: pointer;
  border-radius: 16px;
  padding: 16px;
  border: 2px solid var(--admin-border);
  background: var(--admin-surface);
  transition: border-color .15s, box-shadow .15s;
}
.at-pwa-mode-card:hover { border-color: var(--admin-border-muted); }
.at-pwa-mode-card.selected {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20,184,166,.2);
}
.at-pwa-warning {
  border-radius: 16px;
  padding: 16px;
  font-size: .875rem;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  color: #fcd34d;
}
html[data-theme="light"] .at-pwa-warning {
  background: #fffbeb;
  border-color: rgba(245,158,11,.25);
  color: #92400e;
}
.at-pwa-info {
  border-radius: 12px;
  padding: 12px;
  font-size: .875rem;
}
.at-pwa-info ol { list-style: decimal inside; }
.at-pwa-info ol li + li { margin-top: 4px; }
.at-pwa-info-teal {
  background: rgba(20,184,166,.12);
  border: 1px solid rgba(20,184,166,.3);
  color: #5eead4;
}
.at-pwa-info-green {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  color: #86efac;
}
.at-pwa-info-blue {
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.3);
  color: #93c5fd;
}
html[data-theme="light"] .at-pwa-info-teal {
  background: #f0fdfa;
  border-color: rgba(20,184,166,.25);
  color: #0f766e;
}
html[data-theme="light"] .at-pwa-info-green {
  background: #f0fdf4;
  border-color: rgba(34,197,94,.25);
  color: #166534;
}
html[data-theme="light"] .at-pwa-info-blue {
  background: #eff6ff;
  border-color: rgba(59,130,246,.25);
  color: #1e40af;
}
.at-pwa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-radius: 12px;
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity .12s;
}
.at-pwa-btn:hover { opacity: .88; }
.at-pwa-btn:disabled { opacity: .5; cursor: not-allowed; }
.at-pwa-btn-teal  { background: #0d9488; }
.at-pwa-btn-green { background: #16a34a; }
.at-pwa-btn-blue  { background: #2563eb; }
.at-pwa-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 1rem;
  right: 1rem;
  z-index: 60;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.2);
  font-size: .875rem;
  color: #fff;
  transition: opacity .3s ease, transform .3s ease;
}
@media(min-width:640px) { .at-pwa-toast { right: auto; max-width: 24rem; } }