/* Shared design tokens — imported by all templates */
:root {
  --bg-deep: #0c0e12;
  --bg-panel: #141720;
  --bg-card: #1a1e28;
  --bg-hover: #222738;
  --border: #2a2f3d;
  --border-light: #353b4d;
  --text-primary: #e8e6e3;
  --text-secondary: #8a8f9d;
  --text-muted: #555b6e;
  --accent: #f0a030;
  --accent-dim: rgba(240,160,48,0.12);
  --green: #34d399;
  --green-dim: rgba(52,211,153,0.12);
  --blue: #60a5fa;
  --blue-dim: rgba(96,165,250,0.12);
  --red: #f87171;
  --red-dim: rgba(248,113,113,0.12);
  --amber: #fbbf24;
  --amber-dim: rgba(251,191,36,0.12);
  --gray: #6b7280;
  --gray-dim: rgba(107,114,128,0.12);
  --font-display: 'DM Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 8px;
  --radius-lg: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-display); background: var(--bg-deep); color: var(--text-primary); -webkit-font-smoothing: antialiased; }

/* Shared confirm dialog — replaces native confirm() */
.confirm-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000;
  align-items: center; justify-content: center;
}
.confirm-overlay.open { display: flex; }
.confirm-box {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 32px; max-width: 400px; width: 90%;
}
.confirm-box p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 20px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-actions button {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; padding: 8px 18px;
  border-radius: var(--radius); border: none; cursor: pointer; transition: background 0.12s;
}
.confirm-cancel { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border) !important; }
.confirm-cancel:hover { background: var(--bg-hover); }
.confirm-ok { background: var(--accent); color: var(--bg-deep); }
.confirm-ok:hover { background: #e6951a; }
.confirm-ok.danger { background: var(--red); color: #fff; }
.confirm-ok.danger:hover { background: #ef4444; }