/* ═══════════════════════════════════════════════════════════
   🐡 pufferfish_report_theme — v1
   Deploy at: https://puffer.zingplay.dev/static/puffer-theme/v1/theme.css
   
   Modes:
     Scrollable report: <body>           = dark (default)
                        <body class="light"> = light
     Slide 1280×720:    <body>           = light (default)
                        <body class="dark">  = dark
   
   Load:
     <link rel="stylesheet" href="https://puffer.zingplay.dev/static/puffer-theme/v1/theme.css">
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════ */

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── SCROLLABLE MODE: DARK DEFAULT ── */
:root {
  /* Backgrounds */
  --bg:       #040d0a;
  --bg2:      #071510;
  --bg-body:  #020a07;
  --surface:  #0a1e18;
  --surface2: #0e2820;
  --card:     #0a1e18;

  /* Borders */
  --border:   rgba(0,229,160,0.12);
  --border2:  rgba(0,229,160,0.06);
  --bdr:      rgba(0,229,160,0.12);
  --bdr2:     rgba(0,229,160,0.06);
  --slide-border: rgba(0,229,160,0.18);

  /* Brand colors */
  --accent:   #00e5a0;
  --accent2:  #ffcc02;
  --blue:     #00bcd4;
  --red:      #ff4757;
  --orange:   #ff9800;
  --purple:   #c792ea;
  --warn:     #ffcc02;

  /* Text */
  --text:     #e8faf4;
  --txt:      #e8faf4;
  --sub:      #9abfb0;
  --muted:    #6aada0;

  /* Semantic */
  --up:       #00e5a0;
  --down:     #ff4757;
  --warn-col: #ffcc02;

  /* Segment colors (New/Old/Return/Total + 6-seg) */
  --new:          #c792ea;
  --old:          #00e5a0;
  --ret:          #ffcc02;
  --total:        #00bcd4;
  --seg-no:       #6aada0;
  --seg-starter:  #ff9800;
  --seg-weekly:   #00bcd4;
  --seg-bi:       #c792ea;
  --seg-monthly:  #00e5a0;
  --seg-perfect:  #ffcc02;

  /* PCT badge vars */
  --up-bg:    rgba(0,229,160,0.12);   --up-c:    #00e5a0;
  --up-bg2:   rgba(0,229,160,0.18);   --up-c2:   #00e5a0;
  --dn-bg:    rgba(255,71,87,0.12);   --dn-c:    #ff4757;
  --dn-bg2:   rgba(255,71,87,0.18);   --dn-c2:   #ff4757;

  /* Misc */
  --dot:      rgba(0,229,160,0.10);
  --shadow:   rgba(0,0,0,0.3);
  --mono:     'JetBrains Mono', monospace;
}

/* ── SCROLLABLE MODE: LIGHT via body.light ── */
body.light {
  --bg:       #f0f7f4;
  --bg2:      #e4f0ea;
  --bg-body:  #e6f4ec;
  --surface:  #ffffff;
  --surface2: #f0f9f5;
  --card:     #ffffff;
  --border:   rgba(0,140,85,0.18);
  --border2:  rgba(0,140,85,0.08);
  --bdr:      rgba(0,140,85,0.18);
  --bdr2:     rgba(0,140,85,0.08);
  --slide-border: rgba(0,140,85,0.25);
  --accent:   #006b45;
  --accent2:  #8a5a00;
  --blue:     #005f80;
  --red:      #c0202e;
  --orange:   #7a3c00;
  --purple:   #5c3a80;
  --warn:     #7a4e00;
  --text:     #0d2b1e;
  --txt:      #0d2b1e;
  --sub:      #2d5c44;
  --muted:    #4a8c6a;
  --up:       #1a6b3a;
  --down:     #c0202e;
  --warn-col: #7a4e00;
  --new:      #5c3a80;
  --old:      #006b45;
  --ret:      #7a4e00;
  --total:    #005f80;
  --seg-no:       #4a8c6a;
  --seg-starter:  #7a3c00;
  --seg-weekly:   #005f80;
  --seg-bi:       #5c3a80;
  --seg-monthly:  #006b45;
  --seg-perfect:  #7a4e00;
  --up-bg:    rgba(0,140,85,0.12);    --up-c:    #006b45;
  --up-bg2:   rgba(0,140,85,0.20);    --up-c2:   #004d30;
  --dn-bg:    rgba(192,32,46,0.10);   --dn-c:    #c0202e;
  --dn-bg2:   rgba(192,32,46,0.18);   --dn-c2:   #a01820;
  --dot:      rgba(0,140,85,0.07);
  --shadow:   rgba(0,0,0,0.08);
}

/* ── SLIDE MODE: LIGHT DEFAULT (body.slide-mode) ── */
/* Slides dùng convention ngược: light default, dark via body.dark */
/* Trigger: thêm class "slide-mode" vào body để bật */
body.slide-mode {
  /* Light is already applied via base :root swap below */
}

body.slide-mode:not(.dark) {
  --bg:       #f0faf5;
  --bg2:      #e4f0ea;
  --bg-body:  #e6f4ec;
  --surface:  #ffffff;
  --surface2: #f0f9f5;
  --card:     #ffffff;
  --border:   rgba(0,140,85,0.18);
  --border2:  rgba(0,140,85,0.08);
  --bdr:      rgba(0,140,85,0.18);
  --bdr2:     rgba(0,140,85,0.08);
  --slide-border: rgba(0,140,85,0.25);
  --accent:   #006b45;  --accent2:  #8a5a00;
  --blue:     #005f80;  --red:      #c0202e;
  --orange:   #7a3c00;  --purple:   #5c3a80;
  --warn:     #7a4e00;
  --text:     #0d2b1e;  --txt: #0d2b1e;
  --sub:      #2d5c44;  --muted:    #4a8c6a;
  --up:       #1a6b3a;  --down:     #c0202e;
  --warn-col: #7a4e00;
  --new: #5c3a80; --old: #006b45; --ret: #7a4e00; --total: #005f80;
  --seg-no: #4a8c6a; --seg-starter: #7a3c00; --seg-weekly: #005f80;
  --seg-bi: #5c3a80; --seg-monthly: #006b45; --seg-perfect: #7a4e00;
  --up-bg:  rgba(0,140,85,0.12); --up-c:  #006b45;
  --up-bg2: rgba(0,140,85,0.20); --up-c2: #004d30;
  --dn-bg:  rgba(192,32,46,0.10); --dn-c:  #c0202e;
  --dn-bg2: rgba(192,32,46,0.18); --dn-c2: #a01820;
  --dot: rgba(0,140,85,0.07); --shadow: rgba(0,0,0,0.08);
}

/* ── BODY & GLOBAL ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  padding: 32px 24px 64px;
  transition: background 0.3s, color 0.3s;
}

/* Slide mode body override */
body.slide-mode {
  background: var(--bg-body);
  padding: 20px 20px 36px;
}

/* Dot grid overlay (scrollable) */
body:not(.slide-mode)::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: 32px 32px;
  transition: background-image 0.3s;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── SLIDE CONTAINER ── */
.slide {
  width: 1280px; height: 720px;
  overflow: hidden; position: relative;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 10% 0%, var(--dot) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, var(--dot) 0%, transparent 50%),
    radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px;
  padding: 14px 18px 10px;
  display: flex; flex-direction: column;
  border: 1px solid var(--slide-border);
  border-radius: 10px;
}
.slide + .slide { margin-top: 24px; }

/* ── THEME TOGGLE ── */
.theme-toggle {
  position: fixed; top: 16px; right: 20px; z-index: 999;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 14px 6px 10px;
  cursor: pointer;
  box-shadow: 0 2px 12px var(--shadow);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
  transition: all 0.2s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--text); }

.toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--border);
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}
body.light .toggle-track,
body.slide-mode:not(.dark) .toggle-track { background: rgba(0,140,85,0.25); }

.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
}
body.light .toggle-thumb,
body.slide-mode:not(.dark) .toggle-thumb {
  left: 18px;
  background: #006b45;
}