:root {
  --bg: #F6F4FB;
  --bg-elevated: #FFFFFF;
  --text: #1A1625;
  --text-dim: #6B6478;
  --border: #E4DFF0;
  --radius: 16px;
  --shadow: 0 4px 20px rgba(80, 50, 140, 0.08);
  --accent: #7C3AED;

  --c-violet-bg: #F1E9FE; --c-violet-fg: #6D28D9; --c-violet-line: #C9AFF7;
  --c-indigo-bg: #E9ECFE; --c-indigo-fg: #4338CA; --c-indigo-line: #ADB6F5;
  --c-blue-bg: #E6F1FE;   --c-blue-fg: #1D4ED8;   --c-blue-line: #A8CCF8;
  --c-amber-bg: #FEF3DC;  --c-amber-fg: #B45309;  --c-amber-line: #F6CD7E;
  --c-emerald-bg: #E3FAEE; --c-emerald-fg: #047857; --c-emerald-line: #92E5C0;
  --c-rose-bg: #FEE9F1;   --c-rose-fg: #BE185D;   --c-rose-line: #F4A8C8;
  --c-teal-bg: #E1F8F6;   --c-teal-fg: #0F766E;   --c-teal-line: #8FDDD5;
  --c-fuchsia-bg: #FBE6FB; --c-fuchsia-fg: #A21CAF; --c-fuchsia-line: #E5A7E8;
  --c-orange-bg: #FEEAE0; --c-orange-fg: #C2410C; --c-orange-line: #F5AD86;
}

[data-theme="dark"] {
  --bg: #100E18;
  --bg-elevated: #1B1828;
  --text: #F1EEFA;
  --text-dim: #9C94B5;
  --border: #322C46;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);

  --c-violet-bg: #2B1F4D; --c-violet-fg: #C4A6FA;
  --c-indigo-bg: #1F234D; --c-indigo-fg: #AEB6FA;
  --c-blue-bg: #1B2C4D;   --c-blue-fg: #9DC4FA;
  --c-amber-bg: #3A2A0E;  --c-amber-fg: #F3C16A;
  --c-emerald-bg: #0F3326; --c-emerald-fg: #7FE3B8;
  --c-rose-bg: #3A1224;   --c-rose-fg: #F496BE;
  --c-teal-bg: #0E312E;   --c-teal-fg: #7FD9CE;
  --c-fuchsia-bg: #321433; --c-fuchsia-fg: #E29BE5;
  --c-orange-bg: #361B0D; --c-orange-fg: #F2A276;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background .25s, color .25s;
}

/* allow pinch-zoom reflow: rem-based, fluid grids, no fixed px widths on containers */
html, body { font-size: 16px; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 1.25rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; }
.brand-mark { color: var(--accent); }

.tabs { display: flex; gap: 0.4rem; background: var(--bg); padding: 0.3rem; border-radius: 999px; border: 1px solid var(--border); }
.tab { border: none; background: transparent; padding: 0.45rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; color: var(--text-dim); cursor: pointer; }
.tab.active { background: var(--accent); color: white; }

.topbar-actions { display: flex; gap: 0.5rem; align-items: center; }
.icon-btn {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 0.5rem 0.8rem; border-radius: 999px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #BBB; display: inline-block; }
.dot.pulse { background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 70%{box-shadow:0 0 0 8px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }

.view-panel { display: none; padding: 1.25rem; max-width: 1400px; margin: 0 auto; }
.view-panel.active { display: block; }

.view-switcher { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.view-btn { border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-dim); padding: 0.45rem 0.9rem; border-radius: 10px; cursor: pointer; font-size: 0.82rem; font-weight: 600; }
.view-btn.active { color: var(--accent); border-color: var(--accent); }

.board-toolbar { display: flex; gap: 0.75rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.btn { border: none; padding: 0.6rem 1.1rem; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 0.88rem; }
.btn.primary { background: var(--accent); color: white; }
.btn.ghost { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); }
.btn.danger { background: #FEE2E2; color: #B91C1C; }
input[type="search"], input[type="text"], textarea, select {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
  padding: 0.55rem 0.85rem; border-radius: 10px; font-size: 0.88rem; flex: 1; min-width: 180px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
}

.solution-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.solution-card .card-head {
  padding: 1rem 1.1rem;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.solution-card .eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.solution-card .card-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.solution-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.solution-card .desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.45; margin: 0; }
.progress-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 0.3rem; }
.progress-fill { height: 100%; border-radius: 999px; transition: width .3s; }
.chevron { transition: transform .2s; font-size: 0.8rem; color: var(--text-dim); }
.solution-card.collapsed .chevron { transform: rotate(-90deg); }

.card-body { padding: 0 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.solution-card.collapsed .card-body { display: none; }

.task-row { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.85rem; padding: 0.3rem 0; }
.task-row input[type="checkbox"] { margin-top: 0.2rem; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.task-row.done span { text-decoration: line-through; color: var(--text-dim); }
.task-row span { flex: 1; word-break: break-word; }
.task-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; padding: 0 0.2rem; }

.card-actions { display: flex; gap: 0.5rem; padding: 0.75rem 1.1rem; border-top: 1px solid var(--border); }
.card-actions button { flex: 1; }

.add-task-row { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.add-task-row input { font-size: 0.82rem; padding: 0.4rem 0.6rem; }
.add-task-row button { padding: 0.4rem 0.6rem; font-size: 0.8rem; }

/* Table view */
table { width: 100%; border-collapse: collapse; background: var(--bg-elevated); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; vertical-align: top; }
th { color: var(--text-dim); font-weight: 700; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.05em; }
tr:last-child td { border-bottom: none; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.4rem; }
.table-wrap { overflow-x: auto; }

/* Mindmap */
#mindmapView svg { width: 100%; height: auto; min-height: 480px; }
.mindmap-node rect { stroke-width: 1.5; }
.mindmap-node text { font-size: 11px; font-weight: 600; }
.mindmap-link { stroke: var(--border); stroke-width: 1.5; fill: none; }

/* Drawer */
.drawer {
  position: fixed; top: 0; right: -380px; width: 360px; max-width: 90vw; height: 100%;
  background: var(--bg-elevated); border-left: 1px solid var(--border);
  z-index: 50; transition: right .25s; display: flex; flex-direction: column; padding: 1.1rem;
  box-shadow: -8px 0 24px rgba(0,0,0,0.12);
}
.drawer.open { right: 0; }
.drawer-header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 0.6rem; }
.drawer-hint { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }
#captureInput { width: 100%; min-height: 90px; margin: 0.6rem 0; resize: vertical; }
#captureInbox { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; }
.inbox-item { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem; font-size: 0.8rem; display: flex; justify-content: space-between; gap: 0.4rem; }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,8,20,0.5); z-index: 60; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--bg-elevated); border-radius: var(--radius); padding: 1.3rem; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal-box h3 { margin-top: 0; }
.field { margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: 0.75rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.modal-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.color-pick { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.color-dot { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.color-dot.selected { border-color: var(--text); }

@media (max-width: 640px) {
  .topbar { padding: 0.7rem 0.9rem; }
  .brand-name { display: none; }
  .view-panel { padding: 0.9rem; }
}