/* =====================================================================
   Watchers Park panel theme v2
   Two moods, one switch:
     · PRO  (default)  — calm blue & white, soothing, university-grade
     · FUN  (body.fun) — GenZ gradients, glow, rounded everything
   Plus a real mobile layout (≤760px) for every panel.
   Loaded AFTER style.css inside panels only — overrides by specificity.
   ===================================================================== */

/* ---------- PRO: blue & white ---------- */
body{
  --bg:        #f4f7fb;
  --bg-grad:   linear-gradient(180deg,#f7fafd 0%,#eef3f9 100%);
  --card:      #ffffff;
  --line:      #dde6f0;
  --ink:       #17293e;
  --muted:     #64748b;
  --green:     #0f9aa3;            /* PU Hangouts teal (primary)     */
  --green-ink: #ffffff;
  --gold:      #ed731b;            /* PU Hangouts orange (accent)    */
  --danger:    #dc2626;
  --shadow:    0 1px 2px rgba(23,41,62,.06), 0 8px 24px rgba(23,41,62,.07);
  --radius:    14px;
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}
body .display{ font-family: Inter, system-ui, sans-serif; font-weight: 800; letter-spacing:-.02em; text-transform:none; color: var(--ink); }
body .card{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); }
body .topnav{ background:#ffffffd9; backdrop-filter: blur(10px); border:1px solid var(--line); border-radius:16px; padding:10px 14px; box-shadow: var(--shadow); position: sticky; top:10px; z-index:50; }
body .brand .name{ color: var(--ink); } body .brand .name small{ color: var(--muted); }
body .brand .ball{ background: linear-gradient(135deg, #4cbcc3, #ed731b); border:none; }
body .notice{ border-radius:12px; }
body .notice.ok{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
body .notice.err{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
body .notice.warn{ background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
body .section-title{ color: var(--muted); letter-spacing:.14em; }

body .btn{ border-radius:10px; font-weight:600; transition: all .15s; }
body .btn-primary, body .btn-green{ background: var(--green); color:#fff; border:1px solid var(--green); box-shadow: 0 2px 8px rgba(15,154,163,.30); }
body .btn-primary:hover, body .btn-green:hover{ filter: brightness(1.06); transform: translateY(-1px); }
body .btn-ghost{ background:#fff; color:#334155; border:1px solid var(--line); }
body .btn-ghost:hover{ border-color:#94a3b8; }

body .field label{ color:#334155; font-weight:600; font-size:12.5px; }
body input, body select, body textarea{
  background:#fff; color: var(--ink); border:1.5px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:14px; transition: border-color .15s, box-shadow .15s;
}
body input:focus, body select:focus, body textarea:focus{
  outline:none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(76,188,195,.22);
}
body input::placeholder{ color:#94a3b8; }
body .hint{ color: var(--muted); }
body .req{ color: var(--danger); }

body .tbl th{ background:#f1f5f9; color:#475569; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
body .tbl td{ border-color: var(--line); }
body .tbl tr:hover td{ background:#f8fafc; }
body .badge.paid{ background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }
body .badge.used{ background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
body .stat, body .hub-stat{ background:#fff; border:1px solid var(--line); box-shadow: var(--shadow); }
body .stat .n, body .stat .num, body .hub-stat .n{ color: var(--green); }
body .stat .l, body .stat .lbl, body .hub-stat .l{ color: var(--muted); }
body .stats .stat .num{ color: var(--green); }
body .hub-card{ background:#fff; border:1px solid var(--line); box-shadow: var(--shadow); }
body .hub-card:hover{ border-color: var(--green); box-shadow: 0 4px 18px rgba(15,154,163,.18); }
body .hub-state{ color: var(--gold); }
body .hub-go{ color: var(--green); }
body .pill-on{ background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }
body .pill-off{ background:#f1f5f9; color:#64748b; border:1px solid var(--line); }
body details.cfg{ background:#fff; }
body details.cfg > summary:hover{ background:#f8fafc; border-radius:14px; }
body a{ color:#0f9aa3; }
body .counter button{ background:#f1f5f9; color:var(--ink); border:1px solid var(--line); }

/* ---------- FUN: GenZ mode ---------- */
body.fun{
  --bg-grad: linear-gradient(135deg,#0f0c29 0%,#302b63 45%,#24243e 100%);
  --card: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.16);
  --ink: #f4f4ff;
  --muted:#b8b5d8;
  --green:#a855f7;
  --gold:#22d3ee;
  --danger:#fb7185;
  --shadow: 0 8px 32px rgba(0,0,0,.35);
  background: var(--bg-grad); background-attachment: fixed; color: var(--ink);
}
body.fun::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px circle at 12% 8%,  rgba(168,85,247,.22), transparent 55%),
    radial-gradient(700px circle at 88% 20%, rgba(34,211,238,.16), transparent 55%),
    radial-gradient(700px circle at 50% 100%, rgba(244,114,182,.14), transparent 55%);
}
body.fun .wrap{ position:relative; z-index:1; }
body.fun .card, body.fun .hub-card, body.fun .stat, body.fun .hub-stat, body.fun details.cfg{
  background: rgba(255,255,255,.07); border:1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink);
}
body.fun .topnav{ background: rgba(255,255,255,.08); border:1px solid var(--line); backdrop-filter: blur(14px); }
body.fun .brand .name{ color:#fff; }
body.fun .brand .ball{ background: conic-gradient(from 20deg,#a855f7,#22d3ee,#f472b6,#a855f7); box-shadow:0 0 18px rgba(168,85,247,.7); }
body.fun .display{
  background: linear-gradient(90deg,#c084fc,#22d3ee,#f472b6);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
body.fun .btn-primary, body.fun .btn-green{
  background: linear-gradient(90deg,#a855f7,#6366f1); border:none; color:#fff;
  box-shadow: 0 4px 20px rgba(168,85,247,.5); border-radius:999px;
}
body.fun .btn-ghost{ background: rgba(255,255,255,.08); color:#e8e6ff; border:1px solid var(--line); border-radius:999px; }
body.fun input, body.fun select, body.fun textarea{
  background: rgba(255,255,255,.08); color:#fff; border:1.5px solid var(--line); border-radius:12px;
}
body.fun input:focus, body.fun select:focus, body.fun textarea:focus{ border-color:#a855f7; box-shadow:0 0 0 4px rgba(168,85,247,.25); }
body.fun select option{ color:#1e1b4b; }
body.fun .field label{ color:#d6d3f0; }
body.fun .tbl th{ background: rgba(255,255,255,.06); color:#c7c3e8; }
body.fun .tbl td{ border-color: var(--line); } body.fun .tbl tr:hover td{ background: rgba(255,255,255,.05); }
body.fun .notice.ok{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.4); color:#86efac; }
body.fun .notice.err{ background:rgba(251,113,133,.14); border-color:rgba(251,113,133,.4); color:#fda4af; }
body.fun .notice.warn{ background:rgba(250,204,21,.12); border-color:rgba(250,204,21,.35); color:#fde68a; }
body.fun .badge.paid{ background:rgba(34,211,238,.15); color:#67e8f9; border:1px solid rgba(34,211,238,.4); }
body.fun .badge.used{ background:rgba(251,113,133,.15); color:#fda4af; border:1px solid rgba(251,113,133,.4); }
body.fun .stat .n, body.fun .stat .num, body.fun .hub-stat .n, body.fun .stats .stat .num{ color:#22d3ee; }
body.fun .hub-state{ color:#22d3ee; } body.fun .hub-go{ color:#c084fc; }
body.fun .hub-card:hover{ border-color:#a855f7; box-shadow:0 0 24px rgba(168,85,247,.35); transform:translateY(-3px) scale(1.01); }
body.fun a{ color:#67e8f9; }

/* ---------- mode toggle button ---------- */
.mode-toggle{
  border:1px solid var(--line); background:transparent; color:inherit; cursor:pointer;
  border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; line-height:1;
}
body.fun .mode-toggle{ background:rgba(255,255,255,.1); color:#fff; }

/* ---------- mobile layout (all panels) ---------- */
@media (max-width: 760px){
  .wrap, .wrap-wide{ padding:10px !important; }
  .topnav{ position:sticky; top:6px; flex-wrap:nowrap !important; overflow:hidden; }
  .topnav .links{
    flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; gap:6px !important; max-width:60vw;
  }
  .topnav .links::-webkit-scrollbar{ display:none; }
  .topnav .links .btn{ white-space:nowrap; flex:0 0 auto; }
  .brand .name small{ display:none; }
  .two{ grid-template-columns:1fr !important; display:grid !important; gap:0 !important; }
  .stat-grid, .stats{ grid-template-columns:repeat(2,1fr) !important; display:grid !important; gap:8px !important; }
  .hub-grid{ grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .hub-desc{ display:none; }
  .hub-card{ padding:10px !important; }
  .hub-head{ flex-direction:column; }
  .hub-head > div:last-child{ text-align:left !important; }
  .tbl-wrap, .card[style*="overflow-x"]{ overflow-x:auto !important; }
  .tbl{ font-size:11.5px !important; }
  input, select, textarea, .btn{ min-height:44px; font-size:16px !important; }  /* touch targets, no iOS zoom */
  .btn-sm{ min-height:36px; }
  details.cfg > summary{ padding:12px !important; font-size:13px !important; }
  h2.display{ font-size:19px !important; }
  .icard{ transform:scale(.82); transform-origin:top center; }
}
@media (max-width: 420px){
  .stat-grid, .stats{ grid-template-columns:1fr 1fr !important; }
  .hub-grid{ grid-template-columns:1fr !important; }
  .hub-desc{ display:block; }
}


/* ================= PU Hangouts brand type scale =================
   Poppins for headings (Extrabold/SemiBold), Inter for body/caption. */
body{ font-family: Inter, system-ui, -apple-system, sans-serif; font-size:16px; }
body .display,
body h1, body h2, body h3,
body .section-title, body .eyebrow{ font-family: Poppins, Inter, system-ui, sans-serif; }
body h1, body .h-hero{ font-size:40px; line-height:46px; font-weight:800; letter-spacing:-.02em; }
body h2, body .display{ font-size:26px; line-height:32px; font-weight:700; letter-spacing:-.015em; }
body h3{ font-size:20px; line-height:28px; font-weight:600; }
body, body .body-text{ font-size:15px; line-height:24px; }
body .hint, body .caption, body .lbl{ font-size:12.5px; line-height:18px; }
@media (min-width:900px){
  body h1, body .h-hero{ font-size:52px; line-height:60px; }
  body h2, body .display{ font-size:30px; line-height:38px; }
  body, body .body-text{ font-size:16px; line-height:26px; }
}

/* Vibe preset picker (theme editor) */
.vibe-card{display:flex;flex-direction:column;gap:7px;cursor:pointer;border:2px solid var(--line);
  border-radius:12px;padding:8px;transition:border-color .15s,transform .1s;background:var(--card)}
.vibe-card:hover{transform:translateY(-1px)}
.vibe-card.sel{border-color:var(--green)}
.vibe-sw{display:block;height:46px;border-radius:8px}
.vibe-name{font-size:12.5px;font-weight:600;text-align:center}