/* Rahbar Planner — dark theme matching the Muse "Personal Planning and Organising" app.
   Script font: Caveat (handwritten, for the hero line and sticky titles).
   Body font: Inter with system fallbacks. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Inter:wght@400;500;600;700;800&display=swap');

*{box-sizing:border-box}
html{background:#131313}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#131313;color:#f2f2f2;min-height:100vh;padding-bottom:96px}
a{color:#fb923c;font-weight:600}
button{border:0;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer;background:#f2f2f2;color:#111;font:inherit}
button:hover{opacity:.92}
button.secondary,button.pill{background:#262626;color:#f2f2f2;border:1px solid #3a3a3a}
button.brown{background:#8b5a2b;color:#f5e6d0}
button.danger{background:#3a2020;color:#fca5a5;border:1px solid #7f1d1d}
input,select,textarea{width:100%;padding:11px 14px;border:1px solid #3a3a3a;border-radius:14px;margin:6px 0;font:inherit;background:#262626;color:#f2f2f2}
input::placeholder,textarea::placeholder{color:#8a8a8a}
input[type="date"],input[type="time"]{color-scheme:dark}
label{font-size:13px;color:#b5b5b5;font-weight:600}
.err{color:#f87171;font-weight:700}
.hidden{display:none!important}

/* Header / user bar */
header.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px}
header.topbar .who{color:#d4d4d4;font-size:14px}
header.topbar .who b{color:#fff}

/* Auth + setup/reset cards */
.authwrap{max-width:480px;margin:36px auto;padding:0 20px}
.card,.dark-card{background:#1e1e1e;border:1px solid #2c2c2c;border-radius:20px;padding:18px}
.card h2,.dark-card h2{margin-top:0}
.auth-card{border-radius:26px;padding:26px 24px;box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(251,146,60,.15)}
.auth-script{font-family:'Caveat',cursive;font-size:44px;line-height:1;color:#fb923c;margin:0 0 2px;transform:rotate(-1deg)}
.auth-tag{color:#a3a3a3;font-size:15px;line-height:1.6;margin:0 0 14px}
.auth-tag b{color:#e5e5e5}

/* Carried-over work-log entries */
.carry-badge{display:inline-block;background:#fb923c;color:#1a1207;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;margin-bottom:10px}
.carried-card{border-left:4px solid #fb923c}
.carry-note{color:#a3a3a3;font-size:14px}
.view{padding:0 20px 30px;max-width:1100px;margin:0 auto}

/* Hero — matches the Muse app */
.hero{padding:8px 0 4px}
.hero-script{font-family:'Caveat',cursive;font-size:38px;line-height:1;color:#fb923c;margin:0 0 2px;transform:rotate(-1deg)}
.hero h1{margin:0;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.3px}
.hero-desc{color:#a3a3a3;font-size:15px;line-height:1.6;max-width:720px}
.hero-desc b{color:#e5e5e5}

/* Pill tab bar */
.tabs{display:flex;flex-wrap:wrap;gap:8px;background:#1e1e1e;border:1px solid #2c2c2c;border-radius:999px;padding:8px;margin:16px 0 12px}
.tab{border:0;border-radius:999px;padding:9px 16px;font-weight:600;cursor:pointer;background:transparent;color:#a3a3a3;font-size:14px}
.tab.active{background:#fff;color:#111}
.tab .badge{display:inline-block;background:#ef4444;color:#fff;border-radius:999px;min-width:20px;height:20px;line-height:20px;text-align:center;font-size:12px;padding:0 5px;margin-left:6px}
.counts{color:#a3a3a3;font-size:14px;margin:0 0 18px}
.counts b{color:#e5e5e5}

/* Composer (New sticky) */
.composer{background:#1e1e1e;border:1px solid #2c2c2c;border-radius:20px;padding:18px;margin-bottom:16px}
.composer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.composer-head h3{margin:0;font-size:19px}
.dots{display:flex;gap:10px}
.dot{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
.dot.active{border-color:#fff;box-shadow:0 0 0 2px #fb923c}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
.toolbar input{margin:0;flex:1;min-width:180px}
.toolbar select{margin:0;width:auto}

/* Sticky cards — pastel, tape strip, handwritten titles */
.sticky-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:14px}
.sticky{position:relative;border-radius:16px;padding:36px 16px 16px;box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:default}
.sticky .tape{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);width:104px;height:24px;border-radius:4px;opacity:.9}
.sticky .pin{position:absolute;top:6px;right:14px;font-size:20px}
.sticky h3{font-family:'Caveat',cursive;font-size:34px;line-height:1.05;margin:0 0 4px;font-weight:700}
.sticky .sdate{font-size:13px;opacity:.75}
.sticky .sbody{font-size:14px;line-height:1.55;margin-top:8px;white-space:pre-wrap}
.sticky .expand{font-size:13px;opacity:.7;margin-top:6px;cursor:pointer}
.sticky .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sticky .actions button{padding:7px 13px;font-size:13px}
/* Colour backgrounds use two-class selectors on purpose: a bare .c-* rule loses
   to the themed `button` background rule (composer dots are <button>s), which
   is why every dot rendered black. These cover dots, sticky cards and
   brainstorm nodes in both themes. */
.dot.c-yellow,.sticky.c-yellow,.bs-node.c-yellow{background:#fdf3c4;color:#3f2d20}.c-yellow .tape{background:#f59e0b}.c-yellow h3{color:#7c2d12}
.dot.c-pink,.sticky.c-pink,.bs-node.c-pink{background:#ffd9e2;color:#3f2d20}.c-pink .tape{background:#f472b6}.c-pink h3{color:#be185d}
.dot.c-green,.sticky.c-green,.bs-node.c-green{background:#d3f5d3;color:#243b24}.c-green .tape{background:#4ade80}.c-green h3{color:#166534}
.dot.c-blue,.sticky.c-blue,.bs-node.c-blue{background:#d6e9ff;color:#1e2f45}.c-blue .tape{background:#60a5fa}.c-blue h3{color:#1e40af}
.dot.c-purple,.sticky.c-purple,.bs-node.c-purple{background:#e7deff;color:#2e2347}.c-purple .tape{background:#a78bfa}.c-purple h3{color:#6d28d9}
.dot.c-orange,.sticky.c-orange,.bs-node.c-orange{background:#ffe6c4;color:#3f2a18}.c-orange .tape{background:#fb923c}.c-orange h3{color:#9a3412}

/* Generic dark cards / lists */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.item{background:#1e1e1e;border:1px solid #2c2c2c;border-radius:18px;padding:16px}
.item h3,.item b.title{font-size:17px}
.item .meta{color:#a3a3a3;font-size:13px;margin:4px 0}
.item p{margin:8px 0 0}
.kanban-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media(max-width:760px){.kanban-cols{grid-template-columns:1fr}}
.kanban-col h3{margin:0 0 10px;font-size:15px;color:#d4d4d4}
.kanban-card{background:#1e1e1e;border:1px solid #2c2c2c;border-radius:16px;padding:14px;margin-bottom:12px}
.kanban-card b{font-size:15px}
.tag{display:inline-block;background:#333;border:1px solid #444;border-radius:999px;padding:1px 9px;font-size:12px;margin-right:5px;color:#e5e5e5}
.bar{height:12px;background:#2a2a2a;border-radius:999px;overflow:hidden}
.bar>div{height:100%;background:#fb923c}
table{width:100%;border-collapse:collapse;background:#1e1e1e;border:1px solid #2c2c2c;border-radius:12px;overflow:hidden}
th,td{padding:9px;text-align:left;border-bottom:1px solid #2c2c2c;font-size:14px}
th{color:#a3a3a3}
table select{margin:0;padding:7px 10px}

/* Modal: centred window on desktop, bottom sheet on phone (behaviour kept) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:flex-end;justify-content:center;z-index:50}
@media(min-width:700px){.modal-backdrop{align-items:center}}
.modal{background:#1e1e1e;border:1px solid #333;border-radius:22px 22px 0 0;padding:20px;width:100%;max-width:560px;max-height:90vh;overflow:auto}
@media(min-width:700px){.modal{border-radius:22px}}

/* Bottom navigation (dark, like the Muse app) */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-around;gap:4px;background:#1a1a1a;border-top:1px solid #2c2c2c;padding:10px 8px calc(10px + env(safe-area-inset-bottom))}
.bottomnav button{background:transparent;color:#a3a3a3;padding:8px 10px;font-size:20px;line-height:1}
.bottomnav button.active{background:#2c2c2c;color:#fff}
.bottomnav button span{display:block;font-size:10px;font-weight:600;margin-top:3px}
.section-title{font-size:20px;margin:18px 0 4px}
.muted{color:#a3a3a3;font-size:14px}

/* ---- Light theme: same layout, same fonts (Caveat + Inter), light surfaces.
   Default is dark; light applies only when body[data-theme="light"] is set
   (toggled in the header / login card, persisted in localStorage). ---- */
body[data-theme="light"]{background:#f7f4ef;color:#1c1a17}
body[data-theme="light"] html{background:#f7f4ef}
body[data-theme="light"] a{color:#c2410c}
body[data-theme="light"] button{background:#1c1a17;color:#fff}
body[data-theme="light"] button.secondary,body[data-theme="light"] button.pill{background:#fff;color:#1c1a17;border-color:#e0d8cc}
body[data-theme="light"] button.brown{background:#8b5a2b;color:#f5e6d0}
body[data-theme="light"] button.danger{background:#fef2f2;color:#991b1b;border-color:#fecaca}
body[data-theme="light"] input,body[data-theme="light"] select,body[data-theme="light"] textarea{background:#fff;color:#1c1a17;border-color:#e0d8cc}
body[data-theme="light"] input::placeholder,body[data-theme="light"] textarea::placeholder{color:#9a938a}
body[data-theme="light"] input[type="date"],body[data-theme="light"] input[type="time"]{color-scheme:light}
body[data-theme="light"] label{color:#6b6560}
body[data-theme="light"] header.topbar .who{color:#57534e}
body[data-theme="light"] header.topbar .who b{color:#1c1a17}
body[data-theme="light"] .card,body[data-theme="light"] .dark-card{background:#fff;border-color:#e7e0d4;box-shadow:0 6px 24px rgba(60,40,20,.08)}
body[data-theme="light"] .auth-card{box-shadow:0 18px 50px rgba(60,40,20,.14),0 0 0 1px rgba(234,88,12,.15)}
body[data-theme="light"] .auth-tag{color:#6b6560}
body[data-theme="light"] .auth-script{color:#ea580c}
body[data-theme="light"] .hero-script{color:#ea580c}
body[data-theme="light"] .hero-desc{color:#6b6560}
body[data-theme="light"] .hero-desc b{color:#292524}
body[data-theme="light"] .tabs{background:#fff;border-color:#e7e0d4}
/* Pill tabs / bottom-nav buttons must stay transparent in light mode: the
   themed `button` rule (dark background) otherwise beats the base .tab /
   .bottomnav rules and renders black pills with dark, unreadable text. */
body[data-theme="light"] .tab{background:transparent;color:#78716c}
body[data-theme="light"] .hero-script{line-height:1.35;margin:0 0 10px}
body[data-theme="light"] .hero h1{margin-top:2px}
body[data-theme="light"] .tab.active{background:#1c1a17;color:#fff}
body[data-theme="light"] .counts{color:#6b6560}
body[data-theme="light"] .counts b{color:#292524}
body[data-theme="light"] .composer{background:#fff;border-color:#e7e0d4}
body[data-theme="light"] .item{background:#fff;border-color:#e7e0d4}
body[data-theme="light"] .item .meta{color:#78716c}
body[data-theme="light"] .kanban-col h3{color:#57534e}
body[data-theme="light"] .kanban-card{background:#fff;border-color:#e7e0d4}
body[data-theme="light"] .tag{background:#f0ebe2;border-color:#e0d8cc;color:#44403c}
body[data-theme="light"] .bar{background:#e7e0d4}
body[data-theme="light"] table{background:#fff;border-color:#e7e0d4}
body[data-theme="light"] th,body[data-theme="light"] td{border-bottom-color:#efe9df}
body[data-theme="light"] th{color:#78716c}
body[data-theme="light"] .modal{background:#fff;border-color:#e7e0d4}
body[data-theme="light"] .bottomnav{background:#fff;border-top-color:#e7e0d4}
body[data-theme="light"] .bottomnav button{background:transparent;color:#78716c}
body[data-theme="light"] .bottomnav button.active{background:#f0ebe2;color:#1c1a17}
body[data-theme="light"] .muted,body[data-theme="light"] .carry-note{color:#6b6560}
body[data-theme="light"] .sticky{box-shadow:0 4px 14px rgba(60,40,20,.18)}
body[data-theme="light"] .bs-canvas{background-color:#fff;border-color:#e7e0d4;background-image:radial-gradient(#d8d0c2 1.2px,transparent 1.2px)}

/* ---- Brainstorm canvas (dotted, draggable nodes, SVG link lines) ---- */
.bs-canvas{position:relative;height:560px;overflow:auto;border:1px solid #2c2c2c;border-radius:20px;background-color:#1e1e1e;background-image:radial-gradient(#3f3f3f 1.2px,transparent 1.2px);background-size:26px 26px;margin-top:12px}
.bs-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bs-svg line{pointer-events:stroke}
.bs-edge{stroke:#fb923c;stroke-width:2}
.bs-edge-hit{stroke:transparent;stroke-width:18;cursor:pointer}
.bs-edge.sel{stroke:#ef4444;stroke-width:3}
.bs-node{position:absolute;width:170px;padding:12px 14px;border-radius:14px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.bs-node:active{cursor:grabbing}
.bs-node b{display:block;font-size:15px;line-height:1.3}
.bs-node .detail{font-size:13px;line-height:1.4;margin-top:4px;opacity:.85;white-space:pre-wrap}
.bs-node.central{border:3px solid #fb923c;width:200px;text-align:center;cursor:default}
.bs-node.link-from{outline:3px solid #fb923c;outline-offset:2px}
.bs-node.sel{outline:3px solid #60a5fa;outline-offset:2px}
.bs-inspector{margin-top:12px}
.bs-inspector input,.bs-inspector textarea,.bs-inspector select{max-width:520px}