/* Minimal CSS (no Tailwind CDN) to satisfy CSP and keep layout clean */
:root {
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #2563eb;
  --success: #059669;
}

* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; background: var(--bg); color: var(--text); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.pt-lg { padding-top: 48px; } .py-lg { padding: 64px 0; } .pb-xl { padding-bottom: 96px; }
.center { text-align: center; }
.mt-sm { margin-top: 8px; }

.header { position: sticky; top:0; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom:1px solid var(--border); z-index: 20; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:40px; height:40px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.brand-title { font-weight: 700; font-size: 18px; }

.h1 { font-size: 40px; font-weight: 800; line-height: 1.1; }
.h3 { font-size: 18px; font-weight: 600; }

.lead { font-size: 18px; color: var(--muted); margin-top: 12px; }
.hero-logo { width: 160px; display:block; margin: 16px auto; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.08); }

.grid-4 { display:grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card { border:1px solid var(--border); border-radius: 16px; padding: 20px; display:flex; flex-direction:column; background: linear-gradient(180deg,#fff,#fbfbfd); box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.features { list-style:none; padding:0; margin: 12px 0; color: var(--muted); display:flex; flex-direction:column; gap:8px; }
.price { margin: 8px 0 12px; }
.amount { font-size: 32px; font-weight: 800; }
.unit { color: var(--muted); margin-left: 4px; }

.btn { padding: 10px 14px; border-radius: 10px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.btn:hover { filter: brightness(0.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline { background:#fff; color: var(--text); border-color: var(--border); }
.btn-success { background: var(--success); color: #fff; }
.full { width:100%; }

.tabs { display:flex; gap:8px; margin-bottom: 14px; }
.tab { padding:8px 12px; border-radius: 10px; border:1px solid var(--border); background:#fff; }
.tab.active { background: var(--primary); color:#fff; border-color: transparent; }

.form { display:flex; flex-direction:column; gap:12px; }
.input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; }
.list { margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.item { border:1px solid var(--border); border-radius:10px; padding:12px; }
.pre { white-space: pre-line; }
.bold { font-weight: 600; }
.muted { color: var(--muted); }
.muted.sm { font-size: 12px; }
.dot { color: var(--muted); margin: 0 6px; }
.link { color: var(--primary); background: none; border:0; cursor:pointer; }

.whiteboard-toolbar { display:flex; align-items:center; gap:10px; margin-bottom: 8px; }
.swatches { display:flex; gap:8px; }
.swatch { width:24px; height:24px; border-radius: 999px; border: 1px solid var(--border); background:#111; cursor:pointer; }
.swatch.selected { outline: 2px solid var(--primary); transform: scale(1.05); }
/* Make each swatch show its intended color */
.swatch[data-color="#111827"] { background: #111827; }
.swatch[data-color="#ef4444"] { background: #ef4444; }
.swatch[data-color="#2563eb"] { background: #2563eb; }
.swatch[data-color="#f59e0b"] { background: #f59e0b; }
.swatch[data-color="#10b981"] { background: #10b981; }

.canvas-wrap { border:1px solid var(--border); border-radius: 12px; overflow:hidden; }
#whiteboard-canvas { width:100%; height:360px; display:block; }

.backdrop { position: fixed; inset: 0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.4); padding:16px; }
.backdrop:not(.hidden) { display:flex; }
.modal { background:#fff; border-radius:16px; padding:20px; width:100%; max-width:420px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.close { background:none; border:0; font-size:22px; color: var(--muted); cursor:pointer; }

.overlay { position: fixed; inset:0; background: rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; z-index: 50; }
.spinner { width: 44px; height: 44px; border-radius: 999px; border: 4px solid #e5e7eb; border-top-color: transparent; animation: spin 0.9s linear infinite; }
.hidden { display:none !important; }
.row { display:flex; gap:10px; margin-top: 10px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Base style for the other variant used on your pages */
.color-swatch { width:24px; height:24px; border-radius:999px; border:1px solid var(--border); background:#111; cursor:pointer; }
.color-swatch.selected { outline:2px solid var(--primary); transform:scale(1.05); }

/* Map the exact hexes used in those pages */
.color-swatch[data-color="#000000"] { background:#000000; }
.color-swatch[data-color="#ef4444"] { background:#ef4444; }
.color-swatch[data-color="#3b82f6"] { background:#3b82f6; }
.color-swatch[data-color="#FFFFFF"] { background:#FFFFFF; }