/* Tahaddi-like palette and responsive UI (Mabni vibe) */
:root {
  --bg: #f6faf8;
  --card: #ffffff;
  --ink: #102a27;
  --muted: #5b7a74;
  --primary: #118a67;
  --primary-ink: #ffffff;
  --accent: #e8a93a;
  --accent-ink: #1f1400;
  --ring: rgba(17, 138, 103, 0.28);
  --border: #dbe7e4;
  --danger: #d62828;
  --success: #2e7d32;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
[data-theme="dark"]{
  --bg:#0e1312; --card:#121a19; --ink:#e6f2ef; --muted:#9bc2bb;
  --primary:#11b78a; --primary-ink:#08231c; --accent:#f0b544; --accent-ink:#2a1b00;
  --ring: rgba(17, 183, 138, 0.35); --border:#1c2a28; --danger:#ff6b6b; --success:#4caf50;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
.container{width:100%;max-width:1200px;margin:0 auto;padding:16px}
.appbar{position:sticky;top:0;z-index:50;background:rgba(246,250,248,0.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
[data-theme="dark"] .appbar{background:rgba(14,19,18,0.8)}
.appbar-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:100%;padding:10px 16px;max-width:1400px;margin:0 auto}
.brand{font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:10px}
.brand-title{font-size:18px}
.logo-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#2aa696);display:flex;align-items:center;justify-content:center;color:var(--primary-ink);font-size:18px;font-weight:900;box-shadow:var(--shadow)}
.center-logo img{height:44px;object-fit:contain;display:block;margin:0 auto}
.right-controls{justify-self:end;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card.narrow{max-width:560px;margin:24px auto}
.auth-card{margin-top:26px}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row.space-between{justify-content:space-between}
.center{align-items:center}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.sep{height:1px;background:var(--border);margin:12px 0}
.muted{color:var(--muted)}
.small{font-size:12px}
.footer{text-align:center;padding:20px 10px;color:var(--muted);font-size:13px}

.btn{appearance:none;border:1px solid transparent;background:var(--card);color:var(--ink);padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;transition:.15s;box-shadow:0 2px 0 rgba(0,0,0,.04)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:focus{outline:none;box-shadow:0 0 0 4px var(--ring)}
.btn.primary{background:var(--primary);color:var(--primary-ink)}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;border:1px solid var(--border)}
.btn.small{padding:6px 10px;font-size:14px}
.btn.danger-ghost{background:transparent;border:1px solid var(--danger);color:var(--danger)}

.input, select{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;color:var(--ink)}
.input:focus, select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.w-220{width:220px}

.tabs{display:flex;gap:8px}
.tab{padding:8px 12px;border:1px solid var(--border);background:var(--card);border-radius:10px;cursor:pointer;font-weight:700}
.tab.active{border-color:var(--primary);color:var(--primary)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.g-12{grid-column:span 12}
.g-6{grid-column:span 6}
.g-4{grid-column:span 4}
.g-8{grid-column:span 8}
@media (max-width:900px){.g-6,.g-4,.g-8{grid-column:span 12}}

.avatar{width:28px;height:28px;border-radius:999px;object-fit:cover;border:1px solid var(--border)}

.link{border:none;background:transparent;color:var(--primary);cursor:pointer;font-weight:700;padding:0}
.link:hover{text-decoration:underline}

.banner{background:linear-gradient(90deg,var(--accent),#ffd386);color:#2c2105;padding:10px 14px;border-radius:12px;border:1px solid #f3cd7a;margin:12px 0;box-shadow:var(--shadow)}
.banner.danger{background:linear-gradient(90deg,#ffb3b3,#ffd7d7);border-color:#ffb3b3;color:#4a0f0f}

/* tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--border);padding:8px;vertical-align:top}
.table th{background:rgba(17,138,103,0.08);text-align:left}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);padding:4px 8px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.6)}
.select{padding:6px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card)}
.statusP{color:var(--success);font-weight:800}
.statusA{color:var(--danger);font-weight:800}
.statusL{color:#b36b00;font-weight:800}

/* planner editors */
.editable{width:100%;min-height:110px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);overflow:auto}
.editable.short{min-height:120px}
.editable.tall{min-height:220px}
.editable:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tool-btn{border:1px solid var(--border);background:var(--card);padding:6px 10px;border-radius:8px;cursor:pointer}
.color-input{width:36px;height:28px;border:1px solid var(--border);border-radius:8px;padding:0}
.tabs-line{gap:2px;border-bottom:2px solid var(--border);overflow-x:auto;display:flex}
.tabs-line .day-tab{padding:10px 14px;border:1px solid var(--border);border-bottom:none;background:var(--card);border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;transform:translateY(2px);white-space:nowrap}
.tabs-line .day-tab.active{transform:translateY(0);box-shadow:var(--shadow);border-color:var(--primary);color:var(--primary)}

/* modal */
dialog::backdrop{background:rgba(0,0,0,0.35)}
dialog{border:none;border-radius:var(--radius);padding:0}
dialog .card{width:min(620px,95vw)}