:root {
  --bg: #fbf8ff;
  --surface: #ffffff;
  --surface-soft: #f7f1fb;
  --ink: #332d3c;
  --muted: #766f7f;
  --line: #e9deee;
  --accent: #8e6aa8;
  --accent-dark: #705188;
  --pink: #e7a8cf;
  --pink-soft: #f7e0ee;
  --teal: #68c8d4;
  --teal-soft: #dcf5f7;
  --green: #9bd66f;
  --green-soft: #e8f7db;
  --yellow: #f1cd76;
  --danger: #b95c72;
  --shadow: 0 16px 42px rgba(77, 53, 91, .10);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-rounded, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 18px; border-right: 1px solid var(--line); background: rgba(255,255,255,.86); backdrop-filter: blur(16px); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 10px 26px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px; color: #6d4f81; background: linear-gradient(145deg,#f4c8e1,#d8c8f3); font-size: 23px; box-shadow: 0 8px 20px rgba(142,106,168,.18); }
.brand strong,.brand small { display:block; }
.brand strong { font-size: 15px; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 11px; }
nav { display: grid; gap: 7px; }
.nav-button { border: 0; background: transparent; color: var(--muted); border-radius: 14px; padding: 12px 14px; text-align: left; display: flex; gap: 11px; align-items: center; }
.nav-button span { width: 22px; text-align: center; font-size: 18px; }
.nav-button:hover,.nav-button.active { color: var(--accent-dark); background: #f1e8f6; }
.save-state { margin-top:auto; color:var(--muted); font-size:12px; display:flex; gap:8px; align-items:center; padding:12px; }
.save-dot { width:9px; height:9px; border-radius:99px; background:var(--green); box-shadow:0 0 0 4px var(--green-soft); }
.save-state.saving .save-dot { background:var(--yellow); box-shadow:0 0 0 4px #fff3ce; }
.save-state.error .save-dot { background:var(--danger); box-shadow:0 0 0 4px #f9dce3; }

.main-content { min-width: 0; padding: 28px 34px 60px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.eyebrow { margin:0 0 4px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(28px,4vw,42px); line-height:1.05; }
h2,h3,h4,p { overflow-wrap:anywhere; }
.top-actions { display:flex; gap:10px; }
.primary-button,.secondary-button,.ghost-button,.danger-button,.icon-button { border-radius:13px; padding:10px 14px; font-weight:700; border:1px solid transparent; }
.primary-button { background:var(--accent); color:white; box-shadow:0 8px 20px rgba(142,106,168,.22); }
.primary-button:hover { background:var(--accent-dark); }
.secondary-button { background:var(--surface); color:var(--accent-dark); border-color:var(--line); }
.ghost-button { background:transparent; color:var(--accent-dark); border-color:var(--line); }
.danger-button { background:#fff1f4; color:var(--danger); border-color:#efcbd4; }
.icon-button { width:40px; height:40px; padding:0; background:var(--surface); border-color:var(--line); color:var(--ink); }
.mobile-only { display:none; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:12px; }

.dashboard-grid { display:grid; grid-template-columns:minmax(270px, .72fr) minmax(0, 1.6fr); gap:22px; align-items:start; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.panel-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.category-heading { flex:1; min-width:0; }
.panel-header h2,.panel-header h3 { margin:0; font-size:19px; }
.segmented { display:flex; padding:3px; gap:2px; background:var(--surface-soft); border-radius:11px; }
.segmented button { border:0; background:transparent; color:var(--muted); padding:6px 9px; border-radius:8px; font-size:11px; font-weight:700; }
.segmented button.active { background:var(--surface); color:var(--accent-dark); box-shadow:0 2px 8px rgba(70,50,82,.08); }
.filter-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.filter-row select,.filter-row input { min-width:150px; }
.field, input, textarea, select { width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px; color:var(--ink); background:#fff; outline:none; }
input:focus,textarea:focus,select:focus { border-color:#bfa4cf; box-shadow:0 0 0 3px #f1e8f6; }
textarea { min-height:110px; resize:vertical; line-height:1.5; }
.long-text { min-height:260px; }
label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid .wide { grid-column:1 / -1; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

.todo-list { display:grid; gap:8px; }
.todo-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.todo-row:hover { border-color:#d6c4df; }
.todo-row input[type=checkbox] { appearance:none; width:21px; height:21px; padding:0; border:2px solid #c9b6d5; border-radius:7px; display:grid; place-content:center; }
.todo-row input[type=checkbox]::before { content:"✓"; color:white; font-size:14px; font-weight:900; transform:scale(0); transition:.15s; }
.todo-row input[type=checkbox]:checked { background:var(--green); border-color:var(--green); }
.todo-row input[type=checkbox]:checked::before { transform:scale(1); }
.todo-title { font-size:14px; font-weight:650; }
.todo-row.done .todo-title { color:#99919d; text-decoration:line-through; }
.todo-meta { margin-top:3px; font-size:11px; color:var(--muted); }
.todo-actions { display:flex; gap:4px; }
.mini-button { border:0; background:transparent; color:#8a8191; width:27px; height:27px; border-radius:8px; padding:0; }
.mini-button:hover { background:var(--surface-soft); color:var(--accent-dark); }
.empty-state { text-align:center; padding:35px 20px; color:var(--muted); }
.empty-state .empty-icon { font-size:34px; margin-bottom:8px; }

.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:15px; }
.work-card { position:relative; min-height:190px; border:1px solid var(--line); border-radius:20px; padding:17px; background:linear-gradient(150deg,#fff,#fdfbff); transition:.18s ease; overflow:hidden; }
.work-card::after { content:""; position:absolute; right:-30px; bottom:-42px; width:110px; height:110px; border-radius:999px; background:var(--category-color,#e7d7ef); opacity:.35; }
.work-card:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(70,50,82,.11); }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.category-dot { width:10px; height:10px; border-radius:99px; background:var(--category-color); box-shadow:0 0 0 4px color-mix(in srgb,var(--category-color),white 72%); }
.card-menu-button { position:relative; z-index:2; border:0; background:transparent; border-radius:8px; font-size:20px; line-height:1; color:var(--muted); }
.work-card h3 { margin:14px 0 5px; font-size:18px; }
.card-subtitle { margin:0; color:var(--muted); font-size:12px; min-height:34px; }
.badge-row { display:flex; gap:7px; flex-wrap:wrap; margin:13px 0; }
.badge { border-radius:999px; padding:5px 8px; font-size:10px; font-weight:800; letter-spacing:.02em; }
.status-not-started { background:var(--pink-soft); color:#95577c; }
.status-in-progress { background:var(--teal-soft); color:#267a85; }
.status-done { background:var(--green-soft); color:#477d28; }
.progress-track { height:8px; background:#eee8f1; border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),var(--green)); }
.progress-text { display:flex; justify-content:space-between; margin-top:7px; color:var(--muted); font-size:11px; }

.summary-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.summary-card { border:1px solid var(--line); border-radius:17px; background:var(--surface); padding:15px; }
.summary-card strong { display:block; font-size:24px; }
.summary-card span { color:var(--muted); font-size:11px; }
.list-stack { display:grid; gap:12px; }
.list-card { border:1px solid var(--line); border-radius:17px; padding:15px; background:var(--surface); display:grid; gap:9px; }
.list-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.list-card h3 { margin:0; font-size:16px; }
.list-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.inline-actions { display:flex; gap:7px; flex-wrap:wrap; }
.color-swatch { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:-1px; }

.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(45,34,52,.32); display:grid; place-items:center; padding:18px; }
.modal { width:min(850px,100%); max-height:min(90vh,920px); overflow:auto; background:var(--surface); border-radius:24px; box-shadow:0 26px 80px rgba(45,34,52,.25); border:1px solid var(--line); }
.modal-header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:18px 20px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.modal-header h2 { margin:0; font-size:21px; }
.modal-body { padding:20px; }
.tabs { display:flex; gap:5px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tab-button { border:0; background:transparent; color:var(--muted); padding:10px 13px; font-weight:700; border-bottom:3px solid transparent; }
.tab-button.active { color:var(--accent-dark); border-color:var(--accent); }
.tab-wrap { display:inline-flex; align-items:center; }
.tab-wrap .tab-button { padding-right:5px; }
.tab-remove,.tab-add { border:0; background:transparent; color:var(--muted); font-weight:800; border-radius:8px; padding:5px 7px; }
.tab-remove:hover,.tab-add:hover { background:var(--surface-soft); color:var(--accent-dark); }
.tab-edit-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.tab-edit-header h3 { margin:0; }
.item-detail-footer { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
.task-accordion { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); }
.task-accordion + .task-accordion { margin-top:8px; }
.task-accordion .todo-row { border:0; border-radius:0; }
.inline-task-form { display:grid; grid-template-columns:1fr 180px; gap:12px; padding:14px; background:var(--surface-soft); border-top:1px solid var(--line); }
.inline-task-form .wide,.inline-task-form .form-actions { grid-column:1/-1; }
.new-inline-task { border:1px solid var(--line); border-radius:14px; margin-bottom:8px; }
.note-list,.note-editor-list { display:grid; gap:10px; margin-bottom:14px; }
.note-card,.note-editor { border:1px solid var(--line); border-radius:14px; padding:13px; background:var(--surface-soft); }
.note-card p { margin:7px 0 0; color:var(--muted); white-space:pre-wrap; }
.note-editor { display:grid; grid-template-columns:minmax(160px,.7fr) 1.3fr; gap:10px; }
.story-editor { min-height:340px; }
.detail-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:18px; }
.detail-header h2 { margin:0 0 5px; }
.detail-copy { margin:0; color:var(--muted); line-height:1.6; white-space:pre-wrap; }
.section-title { margin:24px 0 10px; font-size:15px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.stat-box { padding:12px; border-radius:13px; background:var(--surface-soft); }
.stat-box strong,.stat-box span { display:block; }
.stat-box span { color:var(--muted); font-size:11px; margin-top:4px; }
.related-link { border:1px solid var(--line); background:var(--surface); color:var(--accent-dark); border-radius:11px; padding:8px 10px; }

.context-menu { position:fixed; z-index:150; min-width:170px; padding:6px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:var(--shadow); }
.context-menu button { display:block; width:100%; border:0; background:transparent; text-align:left; border-radius:8px; padding:9px 10px; color:var(--ink); }
.context-menu button:hover { background:var(--surface-soft); }
.context-menu button.danger { color:var(--danger); }
.toast-region { position:fixed; right:20px; bottom:20px; z-index:200; display:grid; gap:8px; }
.toast { max-width:350px; padding:12px 15px; border-radius:13px; background:#3d3444; color:white; box-shadow:var(--shadow); font-size:13px; animation:toast-in .18s ease-out; }
.toast.error { background:#8d4154; }
@keyframes toast-in { from { transform:translateY(8px); opacity:0; } }
.import-preview { max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:13px; padding:10px; background:#fcfbfd; }
.preview-row { display:flex; gap:9px; padding:7px; border-bottom:1px solid #eee8f1; font-size:13px; }
.preview-row:last-child { border-bottom:0; }
.warning { color:#9b681e; background:#fff7dc; border-radius:12px; padding:10px 12px; font-size:12px; }
.save-confirmation { color:#477d28; background:var(--green-soft); border-radius:10px; padding:9px 12px; font-size:12px; font-weight:700; }
.settings-block { max-width:720px; }

@media (max-width: 980px) {
  .dashboard-grid { grid-template-columns:1fr; }
  .summary-strip { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px) {
  .app-shell { display:block; }
  .sidebar { position:fixed; left:0; transform:translateX(-105%); width:min(290px,86vw); transition:.2s; box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .main-content { padding:20px 15px 50px; }
  .mobile-only { display:inline-grid; place-items:center; }
  .topbar { align-items:flex-start; }
  .top-actions { position:fixed; left:12px; right:12px; bottom:12px; z-index:40; background:rgba(255,255,255,.93); border:1px solid var(--line); box-shadow:var(--shadow); padding:8px; border-radius:16px; }
  .top-actions button { flex:1; }
  .form-grid,.stat-grid { grid-template-columns:1fr; }
  .cards-grid { grid-template-columns:1fr; }
  .summary-strip { grid-template-columns:repeat(2,1fr); }
  .panel { padding:15px; border-radius:18px; }
  .panel-header { align-items:flex-start; flex-wrap:wrap; }
  .modal-backdrop { padding:7px; place-items:end center; }
  .modal { max-height:94vh; border-radius:22px 22px 10px 10px; }
  .inline-task-form,.note-editor { grid-template-columns:1fr; }
  .inline-task-form .wide,.inline-task-form .form-actions { grid-column:auto; }
}

/* Individual notes use the same white card surface as tasks. */
.note-accordion { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.note-row { display:flex; align-items:flex-start; gap:12px; padding:13px; background:#fff; }
.note-copy { flex:1; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.note-actions { display:flex; gap:5px; flex-shrink:0; }
.inline-note-form { background:#fff; grid-template-columns:1fr; }
.note-actions button:disabled { opacity:.35; cursor:default; }

/* Cloud controls and responsive touch layout only; original cards stay unchanged. */
.cloud-gate { position:fixed; inset:0; z-index:250; display:grid; place-items:center; padding:24px; overflow:auto; background:var(--bg); }
.cloud-card { width:min(460px,100%); padding:30px; border:1px solid var(--line); border-radius:24px; background:white; box-shadow:var(--shadow); margin:auto; }
.cloud-card h1 { font-size:28px; margin:20px 0 12px; }
.cloud-card p { line-height:1.6; }
.cloud-card form { display:grid; gap:16px; }
.cloud-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.cloud-actions button { flex:1 1 160px; }
.cloud-message { min-height:24px; color:var(--danger); }
.cloud-account { display:grid; gap:10px; margin-top:20px; overflow-wrap:anywhere; }
.cloud-account:empty { display:none; }
.cloud-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 14px; margin-bottom:18px; border:1px solid var(--line); border-radius:14px; background:white; font-size:12px; }
.cloud-toolbar [data-cloud-status] { flex:1; }
.cloud-notice { background:#fff4df; padding:16px; border-radius:14px; margin-bottom:18px; line-height:1.6; }
.cloud-notice button { margin:6px; }
[data-cloud-status].error { color:var(--danger); }
button:disabled { cursor:wait; opacity:.6; }
@media (max-width:1024px) {
  button { min-height:42px; }
  input:not([type=checkbox]):not([type=color]),textarea,select { font-size:16px; min-width:0; }
  .tabs { flex-wrap:wrap; }
  .note-row { flex-wrap:wrap; }
  .note-actions { flex-wrap:wrap; margin-left:auto; }
  .task-title, .task-copy, .note-copy { overflow-wrap:anywhere; }
  .form-actions { flex-wrap:wrap; }
}
@media (max-width:720px) {
  .sidebar { z-index:80; height:100dvh; overflow-y:auto; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
  .main-content { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
  .top-actions { bottom:calc(10px + env(safe-area-inset-bottom)); }
  .modal { max-height:calc(100dvh - 16px); }
  .modal-body { padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
  .cloud-gate { padding:16px; }
  .cloud-card { padding:22px; }
  .filter-row > * { max-width:100%; }
  .note-actions { width:100%; justify-content:flex-end; }
  .topbar { gap:10px; }
  .topbar h1 { font-size:30px; }
  .list-card-head { flex-wrap:wrap; }
}