/* ──────────────────────────────────────────────────────────────────
   SlotsHunter Admin Panel — Glass Theme
   Mirrors slotshunter-v8.html landing page design system, adapted
   for an admin panel (sidebar + topbar + main).

   Page-level inline styles in templates reference legacy var names
   (--accent, --text-primary, --bg-card, etc.). Those aliases live at
   the bottom of :root and remap onto the new warm palette so existing
   markup keeps working without per-page edits.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Landing-page palette (source of truth) ─── */
  --bg:        #f5f1eb;
  --amber:     #d97706;
  --amber-lt:  rgba(217,119,6,0.11);
  --amber-md:  rgba(217,119,6,0.22);
  --amber-glow:rgba(217,119,6,0.30);
  --sage:      #2d6a4f;
  --ink:       #17130f;
  --body-c:    #3c322a;
  --muted-c:   #877669;
  --border-c:  rgba(0,0,0,0.07);
  --border2-c: rgba(0,0,0,0.05);
  --glass:     rgba(255,255,255,0.60);
  --glass-hv:  rgba(255,255,255,0.84);
  --shine:     rgba(255,255,255,0.92);
  --green-c:   #16a34a;
  --green-bright: #22c55e;
  --red-c:     #dc2626;
  --display:   'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif:     'Lora', Georgia, serif;
  --mono:      'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-pill:100px;
  --sh-sm: 0 2px 10px rgba(0,0,0,0.05);
  --sh-md: 0 8px 32px rgba(0,0,0,0.09);
  --sh-lg: 0 18px 60px rgba(0,0,0,0.11);
  --sh-xl: 0 30px 90px rgba(0,0,0,0.13);

  /* ─── Legacy aliases — every old var() call maps onto the warm palette
     so page-level inline <style> blocks keep working with no edits. ─── */
  --bg-body:           var(--bg);
  --bg-sidebar:        rgba(255,255,255,0.68);
  --bg-sidebar-rail:   rgba(255,255,255,0.50);
  --bg-card:           var(--glass);
  --bg-card-hover:     var(--glass-hv);
  --bg-active-nav:     rgba(255,255,255,0.95);
  --bg-panel:          var(--glass);
  --panel:             var(--glass);
  --panel-soft:        rgba(255,255,255,0.45);
  --bg-primary:        var(--bg);
  --bg-secondary:      #efe8dc;
  --bg-2:              transparent;
  --sidebar-1:         var(--bg-sidebar);
  --sidebar-2:         var(--bg-sidebar);

  --border:            var(--border-c);
  --border-soft:       var(--border-c);
  --border-strong:     rgba(0,0,0,0.10);
  --border-card:       rgba(255,255,255,0.82);
  --border-hover:      rgba(217,119,6,0.40);
  --glass-border:      rgba(255,255,255,0.82);

  --accent:            var(--amber);
  --accent-hover:      #b45309;
  --accent-light:      var(--amber-lt);
  --accent-soft:       rgba(217,119,6,0.06);
  --accent-blue:       var(--amber);
  --accent-blue-hover: #b45309;
  --accent-blue-light: var(--amber-lt);
  --accent-blue-soft:  rgba(217,119,6,0.06);
  --accent-gold:       var(--amber);
  --accent-gold-light: var(--amber-lt);
  --accent-gold-soft:  rgba(217,119,6,0.06);
  --text-accent:       var(--amber);
  --gold:              var(--amber);
  --gold-2:            #b45309;
  --gold-light:        var(--amber-lt);
  --gold-soft:         var(--amber-lt);
  --gold-dim:          var(--amber-lt);
  --gold-glow:         0 0 20px var(--amber-glow);
  --blue:              var(--amber);

  --green:             var(--green-bright);
  --green-2:           var(--green-c);
  --green-light:       rgba(34,197,94,0.10);
  --green-dim:         rgba(34,197,94,0.10);
  --red:               #ef4444;
  --red-2:             var(--red-c);
  --red-light:         rgba(239,68,68,0.10);
  --red-dim:           rgba(239,68,68,0.10);
  --orange:            #f97316;
  --orange-light:      rgba(249,115,22,0.10);
  --orange-dim:        rgba(249,115,22,0.10);
  --yellow:            #eab308;
  --yellow-light:      rgba(234,179,8,0.12);
  --purple:            #a855f7;
  --purple-light:      rgba(168,85,247,0.12);
  --pink:              #ec4899;
  --teal:              #14b8a6;
  --indigo:            #6366f1;

  --text-primary:      var(--ink);
  --text-secondary:    var(--body-c);
  --text:              var(--ink);
  --text-muted:        var(--muted-c);
  --text-label:        var(--muted-c);
  --muted:             var(--muted-c);

  --shadow-card:       var(--sh-sm);
  --shadow-card-hover: var(--sh-lg);
  --shadow-rail:       2px 0 16px rgba(0,0,0,0.05);
  --shadow-sidebar:    var(--shadow-rail);
  --shadow-button:     var(--sh-sm);
  --glass-shadow:      var(--sh-sm);
  --radius:            16px;
  --radius-sm:         12px;
}

/* ─── Reset + base typography ───────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--body-c);
  font-family:var(--display);
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.005em;
  overflow-x:hidden;
  min-height:100vh;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--ink);
  line-height:1.15;
}
em.serif, .serif-em{font-family:var(--serif);font-style:italic;font-weight:400}
a{color:var(--amber);text-decoration:none}
a:hover{color:#b45309}

/* ─── Animated background blobs ─────────────────────────────────── */
.bg-wrap{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bl{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform;
    animation:drift 22s ease-in-out infinite alternate}
.bl-1{width:700px;height:700px;background:radial-gradient(circle,
      rgba(255,210,120,0.50),rgba(255,170,60,0.20) 55%,transparent);
      top:-220px;left:-140px;animation-duration:26s}
.bl-2{width:580px;height:580px;background:radial-gradient(circle,
      rgba(160,210,255,0.40),rgba(100,175,255,0.16) 55%,transparent);
      top:10%;right:-170px;animation-duration:20s;animation-delay:-8s}
.bl-3{width:520px;height:520px;background:radial-gradient(circle,
      rgba(175,235,205,0.42),rgba(130,210,170,0.16) 55%,transparent);
      bottom:5%;left:8%;animation-duration:28s;animation-delay:-14s}
.bl-4{width:400px;height:400px;background:radial-gradient(circle,
      rgba(255,190,205,0.34),rgba(210,145,165,0.12) 55%,transparent);
      bottom:22%;right:5%;animation-duration:22s;animation-delay:-6s}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  25%{transform:translate(22px,-14px) scale(1.03)}
  50%{transform:translate(-10px,18px) scale(0.97)}
  75%{transform:translate(14px,6px) scale(1.02)}
  100%{transform:translate(-6px,-10px) scale(1.01)}
}

/* ─── Layout: sidebar + topbar + main ───────────────────────────── */
.shell{display:flex;min-height:100vh;position:relative;z-index:1}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:240px;z-index:50;
  background:var(--bg-sidebar);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-right:1px solid rgba(255,255,255,0.85);
  box-shadow:var(--shadow-rail), inset 0 1px 0 var(--shine);
  display:flex;flex-direction:column;
  overflow:hidden;
}
/* Top image strip — fades into the sidebar background */
.sidebar-strip{
  position:relative;height:120px;flex-shrink:0;overflow:hidden;
  background-image:url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=300&q=80');
  background-size:cover;background-position:center;
}
.sidebar-strip::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(245,241,235,0.05) 0%,
    rgba(245,241,235,0.30) 55%,
    rgba(255,255,255,0.78) 100%);
}
.sidebar-logo{
  display:flex;align-items:center;gap:10px;
  padding:18px 20px 14px;flex-shrink:0;
}
.sl-mark{
  width:34px;height:34px;flex-shrink:0;
  background:linear-gradient(135deg,#f5c842,var(--amber));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1rem;box-shadow:0 3px 14px var(--amber-glow);
  animation:markPulse 3s ease-in-out infinite;
}
@keyframes markPulse{
  0%,100%{box-shadow:0 3px 14px var(--amber-glow)}
  50%{box-shadow:0 3px 22px rgba(217,119,6,0.48)}
}
.sl-text{display:flex;flex-direction:column;gap:1px;line-height:1.1}
.sl-name{font-weight:800;font-size:0.95rem;color:var(--ink);letter-spacing:-0.02em}
.sl-sub{font-family:var(--mono);font-size:0.6rem;color:var(--muted-c);
        text-transform:uppercase;letter-spacing:0.14em}

/* Sidebar nav */
nav.menu{
  flex:1;overflow-y:auto;padding:6px 12px 14px;
  display:flex;flex-direction:column;gap:2px;
}
nav.menu::-webkit-scrollbar{width:6px}
nav.menu::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:3px}
nav.menu a{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:10px;
  color:var(--body-c);text-decoration:none;
  font-size:0.86rem;font-weight:500;letter-spacing:-0.005em;
  transition:background 0.2s, color 0.2s, transform 0.2s;
  position:relative;
}
nav.menu a .ico{
  width:26px;height:26px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--amber-lt);
  border:1px solid rgba(217,119,6,0.16);
  border-radius:7px;
  color:var(--amber);font-size:0.78rem;font-weight:700;
  transition:all 0.2s;
}
nav.menu a .nav-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav.menu a:hover{background:rgba(255,255,255,0.66);color:var(--ink);transform:translateX(2px)}
nav.menu a:hover .ico{background:var(--amber-md);transform:scale(1.06)}
nav.menu a.active{
  background:rgba(255,255,255,0.92);color:var(--ink);font-weight:700;
  box-shadow:inset 3px 0 0 var(--amber), 0 1px 4px rgba(0,0,0,0.04);
}
nav.menu a.active .ico{background:var(--amber);color:#fff;border-color:transparent}

/* Sidebar nav groups (collapsible) */
.nav-group{display:flex;flex-direction:column;margin:6px 0 2px}
.nav-group-header{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:10px;
  font-size:0.86rem;font-weight:600;color:var(--body-c);
  cursor:pointer;user-select:none;transition:all 0.2s;
}
.nav-group-header:hover{background:rgba(255,255,255,0.66);color:var(--ink)}
.nav-group-header.active{background:rgba(255,255,255,0.86);color:var(--ink)}
.nav-group-header .ico{
  width:26px;height:26px;flex-shrink:0;display:inline-flex;
  align-items:center;justify-content:center;background:var(--amber-lt);
  border:1px solid rgba(217,119,6,0.16);border-radius:7px;
  color:var(--amber);font-size:0.78rem;font-weight:700;
}
.nav-group-header.active .ico{background:var(--amber);color:#fff;border-color:transparent}
.nav-group-header .nav-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-arrow{font-size:0.7rem;color:var(--muted-c);transition:transform 0.25s;margin-left:auto}
.nav-group-header.active .nav-arrow{transform:rotate(180deg)}
.nav-group-items{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px 6px;margin-left:18px;
                 border-left:1px solid rgba(0,0,0,0.06)}
.nav-group-items.hidden{display:none}
.nav-group-items a{
  padding:7px 10px;font-size:0.82rem;border-radius:8px;
  display:flex;align-items:center;gap:8px;color:var(--body-c);
  text-decoration:none;transition:all 0.2s;
}
.nav-group-items a:hover{background:rgba(255,255,255,0.66);color:var(--ink)}
.nav-group-items a.active{background:rgba(255,255,255,0.92);color:var(--ink);font-weight:700;
                          box-shadow:inset 2px 0 0 var(--amber)}

/* Sidebar footer (user pill + logout) */
.side-foot{padding:10px 12px 14px;flex-shrink:0;border-top:1px solid rgba(0,0,0,0.05)}
.who{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:12px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.85);
}
.who .avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#f5c842,var(--amber));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:0.78rem;
  box-shadow:0 2px 8px var(--amber-glow);
}
.who .avatar.gold{background:linear-gradient(135deg,#f5c842,var(--amber))}
.who .avatar.green{background:linear-gradient(135deg,#86efac,var(--green-c))}
.who .avatar.blue,.who .avatar.indigo{background:linear-gradient(135deg,#93c5fd,#1d4ed8)}
.who .avatar.purple{background:linear-gradient(135deg,#d8b4fe,#7c3aed)}
.who .avatar.gray{background:linear-gradient(135deg,#cbd5e1,#475569)}
.who .info{flex:1;min-width:0}
.who .nm{font-size:0.82rem;font-weight:700;color:var(--ink);
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .role{font-family:var(--mono);font-size:0.6rem;color:var(--muted-c);
           text-transform:uppercase;letter-spacing:0.1em;margin-top:1px}
.who .role.gold{color:var(--amber)}
.who .role.green{color:var(--green-c)}
.who .role.blue,.who .role.indigo{color:#1d4ed8}
.who .role.purple{color:#7c3aed}
.logout-btn{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(0,0,0,0.06);
  color:var(--muted-c);text-decoration:none;
  margin-left:auto;flex-shrink:0;
  transition:all 0.2s;
}
.logout-btn:hover{background:#fee2e2;border-color:#fecaca;color:var(--red-c)}

/* ─── Topbar ───────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 28px;
  background:rgba(255,255,255,0.62);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.85);
  box-shadow:0 1px 0 rgba(0,0,0,0.03);
}
.tb-title{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--display);font-weight:800;font-size:1.05rem;
  letter-spacing:-0.025em;color:var(--ink);
}
.tb-title .tb-crumb{
  font-family:var(--mono);font-size:0.62rem;color:var(--muted-c);
  text-transform:uppercase;letter-spacing:0.14em;font-weight:500;
}
.tb-actions{display:flex;align-items:center;gap:12px}
.live-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:var(--r-pill);
  background:rgba(34,197,94,0.10);
  border:1px solid rgba(34,197,94,0.25);
  color:var(--green-c);font-family:var(--mono);
  font-size:0.65rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.1em;
}
.ldot{
  width:7px;height:7px;background:var(--green-bright);border-radius:50%;
  animation:livePop 1.8s ease-in-out infinite;
}
@keyframes livePop{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0.45)}
  50%{transform:scale(1.3);box-shadow:0 0 0 6px rgba(34,197,94,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.tb-signout{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.65);
  border:1px solid var(--border-c);
  color:var(--ink);text-decoration:none;
  font-size:0.8rem;font-weight:600;
  transition:all 0.25s;
}
.tb-signout:hover{background:var(--ink);color:#fff;border-color:transparent}

/* ─── Main column ──────────────────────────────────────────────── */
.main{
  flex:1;min-width:0;
  margin-left:240px;
  display:flex;flex-direction:column;
  min-height:100vh;
  position:relative;z-index:1;
}
.page{padding:24px 28px 56px;max-width:1280px;margin:0 auto;width:100%}

/* ─── Page banner (header image strip per page) ───────────────── */
.page-banner{
  position:relative;height:140px;border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:24px;
  box-shadow:var(--sh-md);
  background:linear-gradient(135deg,#e8dfd3,#d4c4ae);
}
.page-banner img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;animation:kenBurns 14s ease-in-out infinite alternate;
}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.06)}}
.page-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(23,19,15,0.55) 0%,rgba(23,19,15,0.30) 50%,rgba(23,19,15,0.15) 100%);
}
.page-banner-text{
  position:absolute;left:28px;bottom:20px;right:28px;z-index:2;
  color:#fff;
}
.page-banner-text .pb-tag{
  display:inline-block;font-family:var(--mono);font-size:0.62rem;
  letter-spacing:0.18em;text-transform:uppercase;
  background:rgba(255,255,255,0.18);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.30);
  padding:4px 11px;border-radius:var(--r-pill);
  color:rgba(255,255,255,0.95);margin-bottom:10px;
}
.page-banner-text h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.4rem,2.6vw,1.95rem);letter-spacing:-0.03em;
  color:#fff;line-height:1.1;
}
.page-banner-text h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:#f5c842}
.page-banner-text .pb-sub{
  font-size:0.85rem;color:rgba(255,255,255,0.82);margin-top:6px;
}

/* ─── Glass card (.gc) ────────────────────────────────────────── */
.gc{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(175%);
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  border:1px solid rgba(255,255,255,0.82);
  border-radius:var(--r-md);
  position:relative;overflow:hidden;
  box-shadow:var(--sh-sm), inset 0 1px 0 var(--shine);
  transition:all 0.45s cubic-bezier(0.23,1,0.32,1);
}
.gc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.95),transparent);
  pointer-events:none;
}
.gc:hover{
  background:var(--glass-hv);
  border-color:rgba(255,255,255,0.94);
  box-shadow:var(--sh-lg), inset 0 1px 0 var(--shine);
  transform:translateY(-3px);
}
.gc-pad{padding:22px}
.gc-pad-lg{padding:28px}
.gc-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:0.62rem;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--amber);
  margin-bottom:12px;
}
.gc-h{font-family:var(--display);font-weight:800;font-size:1.15rem;
      letter-spacing:-0.025em;color:var(--ink);margin-bottom:6px;line-height:1.2}
.gc-sub{color:var(--muted-c);font-size:0.86rem;line-height:1.6;margin-bottom:12px}

/* ─── Stat cards (4-up grid) ──────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat-card{
  position:relative;padding:20px 22px;
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(175%);
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  border:1px solid rgba(255,255,255,0.82);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm), inset 0 1px 0 var(--shine);
  transition:all 0.4s cubic-bezier(0.23,1,0.32,1);
  overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.95),transparent);
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md), inset 0 1px 0 var(--shine);
                 background:var(--glass-hv)}
.sc-icon{
  width:38px;height:38px;border-radius:11px;
  background:var(--amber-lt);border:1px solid var(--amber-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);font-size:1rem;margin-bottom:14px;
}
.sc-icon.green{background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.25);color:var(--green-c)}
.sc-icon.red{background:rgba(220,38,38,0.10);border-color:rgba(220,38,38,0.25);color:var(--red-c)}
.sc-icon.blue{background:rgba(59,130,246,0.10);border-color:rgba(59,130,246,0.25);color:#2563eb}
.sc-icon.purple{background:rgba(168,85,247,0.10);border-color:rgba(168,85,247,0.25);color:#7c3aed}
.sc-val{font-family:var(--display);font-weight:800;font-size:1.7rem;
        letter-spacing:-0.04em;color:var(--ink);line-height:1}
.sc-val em{font-family:var(--serif);font-style:italic;color:var(--amber);font-weight:400}
.sc-lbl{font-family:var(--mono);font-size:0.62rem;color:var(--muted-c);
        text-transform:uppercase;letter-spacing:0.12em;margin-top:8px}
.sc-trend{margin-top:10px;font-size:0.74rem;color:var(--muted-c);font-family:var(--mono)}
.sc-trend.up{color:var(--green-c)}
.sc-trend.down{color:var(--red-c)}

/* Compatibility shim for the dashboard's existing .val / .lbl / .stat-line */
.val{font-family:var(--display);font-weight:800;font-size:1.7rem;
     letter-spacing:-0.04em;color:var(--ink);line-height:1}
.lbl{font-family:var(--mono);font-size:0.62rem;color:var(--muted-c);
     text-transform:uppercase;letter-spacing:0.12em;margin-top:8px}
.stat-line{display:flex;justify-content:space-between;align-items:center;
           padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.06)}
.stat-line:last-child{border-bottom:none}
.stat-line .k{color:var(--muted-c);font-size:0.84rem}
.stat-line .v{color:var(--ink);font-weight:700;font-size:0.9rem}

/* ─── Status pills ────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:0.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.1em;
  background:rgba(255,255,255,0.70);
  border:1px solid var(--border-c);
  color:var(--muted-c);
}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.open,.pill.success,.pill.green,.pill.active,.pill.online{
  background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.25);color:var(--green-c)}
.pill.closed,.pill.danger,.pill.red,.pill.error,.pill.offline,.pill.expired{
  background:rgba(220,38,38,0.10);border-color:rgba(220,38,38,0.25);color:var(--red-c)}
.pill.pending,.pill.warn,.pill.amber,.pill.gold{
  background:var(--amber-lt);border-color:rgba(217,119,6,0.25);color:var(--amber)}
.pill.info,.pill.blue{
  background:rgba(59,130,246,0.10);border-color:rgba(59,130,246,0.25);color:#2563eb}

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn-primary,
button.btn-primary,
input[type='submit'].btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff;
  padding:11px 22px;border-radius:var(--r-pill);
  font-family:var(--display);font-weight:700;font-size:0.86rem;
  letter-spacing:-0.005em;text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 6px 22px rgba(23,19,15,0.18);
  transition:all 0.3s cubic-bezier(0.23,1,0.32,1);
}
.btn-primary:hover{background:var(--amber);transform:translateY(-2px) scale(1.02);
                   box-shadow:0 12px 30px var(--amber-glow);color:#fff}
.btn-outline,
button.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,0.70);color:var(--ink);
  padding:10px 20px;border-radius:var(--r-pill);
  font-family:var(--display);font-weight:600;font-size:0.84rem;
  text-decoration:none;border:1px solid var(--border-c);cursor:pointer;
  box-shadow:var(--sh-sm);
  transition:all 0.25s;
}
.btn-outline:hover{background:rgba(255,255,255,0.95);box-shadow:var(--sh-md);
                   transform:translateY(-1px);color:var(--ink)}
.btn-danger{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red-c);color:#fff;
  padding:10px 20px;border-radius:var(--r-pill);
  font-weight:700;font-size:0.84rem;border:none;cursor:pointer;
  text-decoration:none;transition:all 0.25s;
}
.btn-danger:hover{background:#b91c1c;transform:translateY(-1px)}
.btn-amber{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--amber);color:#fff;
  padding:10px 20px;border-radius:var(--r-pill);
  font-weight:700;font-size:0.84rem;border:none;cursor:pointer;
  text-decoration:none;transition:all 0.25s;
  box-shadow:0 6px 22px var(--amber-glow);
}
.btn-amber:hover{background:#b45309;transform:translateY(-1px);color:#fff}

/* Existing .btn from old base — restyle softly */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.70);color:var(--ink);
  border:1px solid var(--border-c);
  font-family:var(--display);font-weight:600;font-size:0.84rem;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--sh-sm);
  transition:all 0.25s;
}
.btn:hover{background:rgba(255,255,255,0.95);box-shadow:var(--sh-md);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(0.98)}
.btn.primary{background:var(--ink);color:#fff;border-color:transparent;
             box-shadow:0 6px 22px rgba(23,19,15,0.18)}
.btn.primary:hover{background:var(--amber);box-shadow:0 12px 30px var(--amber-glow)}
.btn.danger{background:var(--red-c);color:#fff;border-color:transparent}
.btn.danger:hover{background:#b91c1c}

/* ─── Forms ───────────────────────────────────────────────────── */
input[type='text'],input[type='email'],input[type='password'],input[type='number'],
input[type='tel'],input[type='url'],input[type='search'],input[type='date'],
input[type='datetime-local'],input[type='time'],input:not([type]),
select,textarea{
  font-family:var(--display);font-size:0.88rem;color:var(--ink);
  background:rgba(255,255,255,0.66);
  backdrop-filter:blur(8px);
  border:1px solid var(--border-c);
  border-radius:var(--r-sm);
  padding:10px 14px;width:100%;
  transition:border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
textarea{min-height:90px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{
  outline:none;background:rgba(255,255,255,0.92);
  border-color:var(--amber);
  box-shadow:0 0 0 3px var(--amber-lt);
}
label{
  display:block;font-family:var(--mono);font-size:0.66rem;
  color:var(--muted-c);text-transform:uppercase;letter-spacing:0.12em;
  font-weight:600;margin-bottom:6px;
}

/* ─── Tables ──────────────────────────────────────────────────── */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,0.82);
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-sm), inset 0 1px 0 var(--shine);
}
table thead{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(8px);
}
table thead th{
  text-align:left;font-family:var(--mono);
  font-size:0.62rem;color:var(--muted-c);
  text-transform:uppercase;letter-spacing:0.12em;font-weight:600;
  padding:12px 16px;
  border-bottom:1px solid var(--border-c);
  white-space:nowrap;
}
table tbody td{
  padding:12px 16px;font-size:0.85rem;color:var(--body-c);
  border-bottom:1px solid var(--border2-c);
  vertical-align:middle;
}
table tbody tr:last-child td{border-bottom:none}
table tbody tr{transition:background 0.18s}
table tbody tr:hover{background:rgba(255,255,255,0.55)}
table.compact thead th,table.compact tbody td{padding:8px 12px;font-size:0.8rem}

/* ─── Misc utilities ──────────────────────────────────────────── */
.muted{color:var(--muted-c)}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif);font-style:italic}
.amber-text{color:var(--amber)}
.ink-text{color:var(--ink)}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:0.62rem;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--amber);
  background:var(--amber-lt);border:1px solid var(--amber-md);
  padding:4px 11px;border-radius:var(--r-pill);
}
hr{border:none;height:1px;background:var(--border-c);margin:18px 0}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-c),transparent);margin:18px 0}

/* ─── Scroll-reveal ───────────────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}
.reveal{opacity:0;transform:translateY(24px);
        transition:opacity 0.7s cubic-bezier(0.23,1,0.32,1),
                   transform 0.7s cubic-bezier(0.23,1,0.32,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:0.06s}
.reveal.d2{transition-delay:0.12s}
.reveal.d3{transition-delay:0.18s}
.reveal.d4{transition-delay:0.24s}
.reveal.d5{transition-delay:0.30s}
.reveal.d6{transition-delay:0.36s}

/* ─── Onboarding modal (preserves existing class names + JS) ──── */
.onb-backdrop{position:fixed;inset:0;z-index:200;background:rgba(23,19,15,0.55);
              backdrop-filter:blur(10px);display:flex;align-items:center;
              justify-content:center;padding:20px;opacity:0;transition:opacity 0.3s}
.onb-backdrop.show{opacity:1}
.onb-backdrop[hidden]{display:none}
.onb-modal{background:var(--glass-hv);border:1px solid rgba(255,255,255,0.94);
           border-radius:var(--r-lg);max-width:560px;width:100%;
           box-shadow:var(--sh-xl);padding:30px 30px 24px;
           backdrop-filter:blur(28px) saturate(180%);
           -webkit-backdrop-filter:blur(28px) saturate(180%)}
.onb-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.onb-header .step{font-family:var(--mono);font-size:0.66rem;color:var(--muted-c);
                  text-transform:uppercase;letter-spacing:0.14em}
.onb-close{background:transparent;border:none;color:var(--muted-c);
           font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:8px;
           transition:all 0.2s}
.onb-close:hover{background:rgba(0,0,0,0.06);color:var(--ink)}
.onb-body{margin-bottom:22px}
.onb-slide{animation:fadeUp 0.45s cubic-bezier(0.23,1,0.32,1)}
.onb-screenshot{width:100%;height:160px;border-radius:var(--r-md);
                background:linear-gradient(135deg,rgba(245,200,66,0.20),var(--amber-lt));
                border:1px solid rgba(217,119,6,0.20);
                display:flex;flex-direction:column;align-items:center;justify-content:center;
                gap:10px;margin-bottom:18px;position:relative}
.onb-screenshot .ico{font-size:2.2rem}
.onb-screenshot .placeholder-tag{font-family:var(--mono);font-size:0.6rem;
                                 color:var(--amber);text-transform:uppercase;letter-spacing:0.12em}
.onb-title{font-family:var(--display);font-weight:800;font-size:1.4rem;
           letter-spacing:-0.03em;color:var(--ink);margin-bottom:8px}
.onb-text{font-size:0.9rem;color:var(--body-c);line-height:1.65}
.onb-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.onb-dots{display:flex;gap:6px}
.onb-dot{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,0.12);
         border:none;cursor:pointer;transition:all 0.3s;padding:0}
.onb-dot.active{background:var(--amber);width:22px;border-radius:4px}
.onb-dot.done{background:rgba(217,119,6,0.45)}
.onb-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.onb-skip{background:transparent;border:none;color:var(--muted-c);
          font-size:0.82rem;font-weight:500;cursor:pointer;padding:8px 12px;
          border-radius:8px;transition:all 0.2s}
.onb-skip:hover{color:var(--ink);background:rgba(0,0,0,0.04)}

/* ─── Sidebar UAE clock + help button (existing markup) ───────── */
.clock{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,0.40);
       border:1px solid rgba(255,255,255,0.65);margin-top:10px}
.clock .lbl{font-family:var(--mono);font-size:0.56rem;color:var(--muted-c);
            text-transform:uppercase;letter-spacing:0.14em}
.clock .val{font-family:var(--mono);font-size:1.1rem;font-weight:600;
            color:var(--ink);margin-top:3px;letter-spacing:-0.01em}
.help-btn{display:flex;align-items:center;gap:8px;
          margin-top:8px;padding:9px 12px;border-radius:10px;
          background:rgba(255,255,255,0.55);border:1px solid var(--border-c);
          color:var(--body-c);font-size:0.82rem;font-weight:600;cursor:pointer;
          transition:all 0.2s;width:100%;justify-content:center}
.help-btn:hover{background:rgba(255,255,255,0.85);color:var(--ink)}
.help-btn .icn{display:inline-flex;align-items:center;justify-content:center;
               width:18px;height:18px;border-radius:50%;
               background:var(--amber);color:#fff;font-size:0.7rem;font-weight:700}

/* ─── Page-head normalisation ────────────────────────────────────
   Every page has a banner now, so its inline .page-head / .greet h1
   becomes a duplicate of the banner title. Hide the duplicate h1
   but keep the action buttons and subtitle visible. */
.page .page-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:0 0 18px;
}
.page .page-head > div:first-child > h1,
.page .greet h1,
.page .greet > div:first-child > h1{
  display:none;
}
.page .page-head .sub,
.page .greet .sub{
  font-family:var(--display);font-size:0.92rem;color:var(--muted-c);
  letter-spacing:-0.005em;line-height:1.55;margin:0;
}
.page .page-head .actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;
}

/* Auto-glass for common card shells page templates use ────────── */
.info-card,
.panel,
.card,
.snapshot,
.insight,
.empty,
.empty-center,
.detail-head,
.ub-hero{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(175%);
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  border:1px solid rgba(255,255,255,0.82);
  border-radius:var(--r-md);
  padding:20px 22px;
  box-shadow:var(--sh-sm), inset 0 1px 0 var(--shine);
  margin-bottom:16px;
  position:relative;
}
.info-card h2,.info-card h3,
.panel h1,.panel h2,
.snapshot h2,.snapshot h3,
.insight h2,.insight h3{
  font-family:var(--display);font-weight:800;font-size:1.05rem;
  letter-spacing:-0.025em;color:var(--ink);margin-bottom:10px;
}

/* Tables wrapped in scrollable containers shouldn't overflow horizontally
   on narrow viewports — wrap them implicitly. */
.page table{margin:0 0 16px;table-layout:auto}

/* .table-wrap is the scroll container many pages use around wide tables.
   Without overflow-x:auto the table bleeds past the page edge — that's
   what put subscribers' Revoke buttons outside the card. */
.table-wrap{
  overflow-x:auto;
  border-radius:var(--r-md);
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,0.82);
  box-shadow:var(--sh-sm), inset 0 1px 0 var(--shine);
  margin-bottom:16px;
  position:relative;
}
.table-wrap > table{
  margin:0;border:none;border-radius:0;box-shadow:none;background:transparent;
}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.10);border-radius:4px}
.page table tbody td .btn,
.page table tbody td button{
  padding:6px 12px;font-size:0.78rem;border-radius:var(--r-pill);
}
.page table tbody td .actions,
.page table tbody td form{display:inline-flex;gap:6px;align-items:center;margin:0}

/* Old "ah-pill" / status indicators inside tables ─────────────── */
.ah-pill,.status-pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
  border-radius:var(--r-pill);font-family:var(--mono);font-size:0.6rem;
  text-transform:uppercase;letter-spacing:0.08em;font-weight:600;
  background:rgba(255,255,255,0.65);border:1px solid var(--border-c);
  color:var(--muted-c);
}

/* Heat-map cells, calendar tiles — preserve their custom layout but
   give them a subtle glass-friendly background where they're naked. */
.cal-page-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.cal-page-head .titles h1{display:none}
.cal-page-head .titles .sub{
  font-family:var(--display);font-size:0.92rem;color:var(--muted-c);
}

/* Sub-nav button rows (calendar source toggle, heatmap centre tabs) */
.center-tabs,.src-toggle,.pay-toggle{
  display:inline-flex;background:rgba(255,255,255,0.55);
  border:1px solid var(--border-c);border-radius:var(--r-pill);
  padding:4px;gap:2px;backdrop-filter:blur(10px);
}
.center-tabs button,.src-toggle button,.pay-toggle button{
  background:transparent;border:none;padding:7px 14px;border-radius:var(--r-pill);
  font-family:var(--display);font-size:0.78rem;font-weight:600;
  color:var(--muted-c);cursor:pointer;transition:all 0.2s;
}
.center-tabs button:hover,.src-toggle button:hover,.pay-toggle button:hover{color:var(--ink)}
.center-tabs button.active,.src-toggle button.active,.pay-toggle button.active{
  background:rgba(255,255,255,0.95);color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

/* ─── .grid.stat-grid + .stat-card with .icon/.label/.value pattern
   Used by: revenue.html, panel_users.html. The inner structure is
   <div class="stat-card COLOR"><div class="icon">…</div>
     <div><div class="label">…</div><div class="value">…</div></div></div>
   Old base.html styled this; rewrite restores it as a 4-up glass grid. */
.grid.stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin:0 0 18px;
}
.grid.stat-grid > .stat-card{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(175%);
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  border:1px solid rgba(255,255,255,0.82);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm), inset 0 1px 0 var(--shine);
  position:relative;overflow:hidden;
  transition:all 0.4s cubic-bezier(0.23,1,0.32,1);
  margin-bottom:0;
}
.grid.stat-grid > .stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.95),transparent);
}
.grid.stat-grid > .stat-card:hover{
  background:var(--glass-hv);transform:translateY(-2px);
  box-shadow:var(--sh-md), inset 0 1px 0 var(--shine);
}
.grid.stat-grid > .stat-card > .icon{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  background:var(--amber-lt);border:1px solid var(--amber-md);
  color:var(--amber);
}
.grid.stat-grid > .stat-card.green > .icon{
  background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.25);color:var(--green-c)}
.grid.stat-grid > .stat-card.blue > .icon{
  background:rgba(59,130,246,0.10);border-color:rgba(59,130,246,0.25);color:#2563eb}
.grid.stat-grid > .stat-card.purple > .icon{
  background:rgba(168,85,247,0.10);border-color:rgba(168,85,247,0.25);color:#7c3aed}
.grid.stat-grid > .stat-card.red > .icon{
  background:rgba(220,38,38,0.10);border-color:rgba(220,38,38,0.25);color:var(--red-c)}
.grid.stat-grid > .stat-card.gold > .icon,
.grid.stat-grid > .stat-card.amber > .icon{
  background:var(--amber-lt);border-color:var(--amber-md);color:var(--amber)}
.grid.stat-grid > .stat-card .label{
  font-family:var(--mono);font-size:0.6rem;
  color:var(--muted-c);text-transform:uppercase;letter-spacing:0.12em;
  font-weight:600;line-height:1.2;
}
.grid.stat-grid > .stat-card .value{
  font-family:var(--display);font-weight:800;font-size:1.4rem;
  letter-spacing:-0.035em;color:var(--ink);line-height:1.1;margin-top:3px;
}

/* ─── Button size modifiers ────────────────────────────────────── */
.btn.sm{padding:6px 14px;font-size:0.76rem}
.btn.lg{padding:13px 26px;font-size:0.92rem}

/* ─── Badge (status pills used in tables) ─────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:0.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.1em;
  background:rgba(255,255,255,0.65);
  border:1px solid var(--border-c);
  color:var(--muted-c);
}
.badge.green{background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.25);color:var(--green-c)}
.badge.red{background:rgba(220,38,38,0.10);border-color:rgba(220,38,38,0.25);color:var(--red-c)}
.badge.amber,.badge.gold,.badge.yellow{
  background:var(--amber-lt);border-color:rgba(217,119,6,0.25);color:var(--amber)}
.badge.blue{background:rgba(59,130,246,0.10);border-color:rgba(59,130,246,0.25);color:#2563eb}
.badge.purple{background:rgba(168,85,247,0.10);border-color:rgba(168,85,247,0.25);color:#7c3aed}
.badge.gray{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.10);color:var(--muted-c)}

/* ─── Inline alert blocks ─────────────────────────────────────── */
.alert{
  padding:11px 16px;border-radius:var(--r-sm);
  margin-bottom:14px;font-size:0.86rem;line-height:1.5;
  background:rgba(255,255,255,0.65);border:1px solid var(--border-c);
}
.alert.error,.alert.danger{
  background:rgba(220,38,38,0.10);border-color:rgba(220,38,38,0.30);color:var(--red-c)}
.alert.success{
  background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.30);color:var(--green-c)}
.alert.warning,.alert.warn{
  background:var(--amber-lt);border-color:rgba(217,119,6,0.30);color:var(--amber)}
.alert.info{
  background:rgba(59,130,246,0.10);border-color:rgba(59,130,246,0.30);color:#2563eb}

/* Action button rows ─────────────────────────────────────────── */
.row-actions,.actions{
  display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center;
}

/* Code/keyboard styling for inline `code` */
code{
  background:var(--amber-lt);color:var(--amber);
  padding:2px 6px;border-radius:5px;
  font-family:var(--mono);font-size:0.82em;
  border:1px solid rgba(217,119,6,0.20);
}

/* ─── Mobile ──────────────────────────────────────────────────── */
@media(max-width:960px){
  .sidebar{transform:translateX(-100%);transition:transform 0.3s}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .topbar{padding:12px 16px}
  .page{padding:16px 14px 40px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .page-banner{height:120px;border-radius:var(--r-md)}
  .page-banner-text{left:18px;right:18px;bottom:14px}
}

/* ─── 3-tier plan badges (subscribers list) ─────────────────────── */
.plan-badge { display: inline-block; padding: 4px 10px; border-radius: 100px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.badge-infinite { background: linear-gradient(135deg, #d97706, #f5c842); color: #fff; }
.badge-team { background: rgba(217,119,6,.18); color: #b45309; border: 1px solid rgba(217,119,6,.3); }
.badge-solo { background: rgba(45,106,79,.15); color: #2d6a4f; border: 1px solid rgba(45,106,79,.3); }
.badge-bot { background: rgba(160,210,255,.25); color: #1e40af; border: 1px solid rgba(160,210,255,.5); }
.badge-legacy { background: rgba(0,0,0,.06); color: #6b6661; border: 1px solid rgba(0,0,0,.1); }

/* ─── Public legal pages (/terms, /privacy) ────────────────────────────── */
.legal-body {
  font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #2c2620;
  background: #fbf8f3;
  margin: 0;
}
.legal-page {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1rem 3rem;
  line-height: 1.7;
}
.legal-page h1 {
  color: #d97706;
  font-size: 2rem;
  margin-bottom: 0.25rem;
}
.legal-page h2 {
  color: #b45309;
  font-size: 1.15rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.legal-page section { margin-bottom: 2rem; }
.legal-page .meta {
  color: #877669;
  font-size: 0.85rem;
  margin-top: 0;
  margin-bottom: 2rem;
}
.legal-page a { color: #d97706; }
.legal-page a:hover { text-decoration: underline; }

.legal-footer {
  margin-top: 3rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  text-align: center;
  font-size: 0.85rem;
  color: #877669;
}
.legal-footer a {
  color: #877669;
  text-decoration: none;
  margin: 0 0.25rem;
}
.legal-footer a:hover {
  color: #d97706;
  text-decoration: underline;
}

/* ─── Bug report form (/report-bug) ───────────────────────────────────── */
.bug-report-page,
.bug-report-success {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.bug-report-page h1 { color: #d97706; }
.bug-report-page .subtitle { color: #877669; margin-bottom: 2rem; }
.bug-report-form .form-group { margin-bottom: 1.5rem; }
.bug-report-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.bug-report-form label .required { color: #dc2626; }
.bug-report-form input,
.bug-report-form select,
.bug-report-form textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}
.bug-report-form textarea { resize: vertical; min-height: 100px; }
.bug-report-form small {
  display: block;
  color: #877669;
  font-size: 0.8rem;
  margin: 0.3rem 0;
}
.bug-report-form .form-actions {
  margin-top: 2rem;
  display: flex;
  gap: 0.75rem;
}
.bug-report-success { text-align: center; }
.bug-report-success .success-icon { font-size: 4rem; margin-bottom: 1rem; }
.bug-report-success .success-actions {
  margin-top: 2rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
.alert-error {
  background: #fee2e2;
  color: #991b1b;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}
.alert-success {
  background: #d1fae5;
  color: #065f46;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

/* ─── Admin bug-reports list + detail (/admin/bug-reports) ────────────── */
.admin-bug-reports .status-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 2rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.admin-bug-reports .tab {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #877669;
  border-bottom: 2px solid transparent;
}
.admin-bug-reports .tab.active {
  color: #d97706;
  border-bottom-color: #d97706;
  font-weight: 600;
}
.admin-bug-reports .data-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-bug-reports .data-table th,
.admin-bug-reports .data-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  text-align: left;
  font-size: 0.9rem;
}
.admin-bug-reports .description-preview { max-width: 300px; }
.admin-bug-reports .empty-state {
  text-align: center;
  padding: 2rem;
  color: #877669;
}

.badge {
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}
.badge-bug             { background: #fef2f2; color: #991b1b; }
.badge-feature_request { background: #f0fdf4; color: #166534; }
.badge-question        { background: #eff6ff; color: #1e40af; }
.badge-other           { background: #f3f4f6; color: #374151; }

.status-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-new         { background: #fee2e2; color: #991b1b; }
.status-in_progress { background: #fef3c7; color: #92400e; }
.status-resolved    { background: #d1fae5; color: #065f46; }
.status-closed      { background: #e5e7eb; color: #374151; }
.status-duplicate   { background: #ede9fe; color: #5b21b6; }

.admin-bug-detail .meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  background: #fbf8f3;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
.admin-bug-detail .report-text {
  background: #f9fafb;
  padding: 1rem;
  border-radius: 6px;
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}
.admin-bug-detail .back-link {
  color: #877669;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1rem;
}
.admin-bug-detail .back-link:hover { color: #d97706; }
.admin-bug-detail .btn-link {
  color: #d97706;
  text-decoration: none;
}