:root{
  --bg:#F6F7F5;
  --card:#FFFFFF;
  --ink:#1D211F;
  --ink-soft:#5B615D;
  --ink-faint:#9AA09C;
  --line:#E3E6E1;
  --danger:#A2636E;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
.screen{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:150px;}
.page{padding:28px 20px 20px;}
.hidden{display:none !important;}

header.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.wordmark{font-family:'Fraunces',serif;font-size:26px;font-weight:600;letter-spacing:-0.02em;}
.date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-faint);}
.greeting{color:var(--ink-soft);font-size:14px;margin-bottom:26px;display:flex;justify-content:space-between;align-items:center;}
.signout{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);cursor:pointer;text-decoration:underline;}
.section-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px 0;display:flex;justify-content:space-between;align-items:center;}
.section-label span.hint{text-transform:none;letter-spacing:0;font-size:11px;color:var(--ink-faint);cursor:pointer;}

/* Logo lockup (icon + wordmark) */
.logo-lockup{display:flex;align-items:center;gap:12px;}
.logo-icon{flex-shrink:0;}
header.top .logo-lockup{gap:9px;}
header.top .logo-icon{width:28px;height:28px;}

/* Login */
.login-wrap{display:flex;align-items:center;min-height:100vh;}
.login-card{width:100%;padding:0 24px;}
.login-card .logo-lockup{margin-bottom:6px;}
.login-card .logo-icon{width:52px;height:52px;}
.login-card .wordmark{font-size:32px;}
.login-card p{color:var(--ink-soft);font-size:14px;margin-bottom:24px;margin-top:10px;}
.login-status{font-size:13px;color:var(--ink-soft);margin-top:14px;min-height:18px;}
.login-status.error{color:var(--danger);}

/* Balance */
.balance{margin-bottom:34px;}
.balance-row{display:grid;grid-template-columns:92px 1fr 34px;align-items:center;gap:10px;margin-bottom:9px;}
.balance-label{font-size:12.5px;color:var(--ink-soft);}
.balance-track{height:6px;background:var(--line);border-radius:3px;overflow:hidden;}
.balance-fill{height:100%;border-radius:3px;background:var(--cat);}
.balance-pct{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);text-align:right;}
.balance-note{font-size:12.5px;color:var(--ink-soft);margin-top:6px;padding-top:12px;border-top:1px solid var(--line);}
.balance-note b{color:var(--ink);font-weight:600;}

/* Today's plan */
.plan{margin-bottom:36px;}
.plan-list{position:relative;padding-left:22px;}
.plan-empty{font-size:13px;color:var(--ink-faint);padding-left:0;}
.plan-item{position:relative;padding:0 0 26px 18px;border-left:2px solid var(--line);}
.plan-item:last-child{border-left:2px solid transparent;padding-bottom:2px;}
.plan-dot{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;border:2.5px solid var(--card);box-shadow:0 0 0 1.5px var(--cat);background:var(--cat);}
.plan-time{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);margin-bottom:3px;}
.plan-title{font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.plan-title.done{text-decoration:line-through;color:var(--ink-faint);font-weight:400;}
.plan-tag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:0.03em;padding:2px 6px;border-radius:4px;text-transform:uppercase;background:color-mix(in srgb, var(--cat) 15%, white);color:var(--cat);}
.overdue-text{color:var(--danger);}
.why{font-size:10.5px;color:var(--ink-faint);font-style:italic;}
.plan-check{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink-faint);margin-right:2px;cursor:pointer;position:relative;flex-shrink:0;}
.plan-check:checked{background:var(--ink);border-color:var(--ink);}
.plan-check:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--bg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}

/* Timeline */
.tl-band{display:flex;flex-direction:column;align-items:center;}
.tl-date-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin-bottom:10px;}
.tl-nodes{display:flex;gap:10px;width:100%;justify-content:center;}
.tl-nodes-multi .tl-node{flex:1 1 0;min-width:0;max-width:220px;}
.tl-node{display:flex;align-items:flex-start;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;max-width:320px;width:100%;transition:border-color .15s;}
.tl-node:active{border-color:var(--ink-faint);}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--cat);flex-shrink:0;margin-top:4px;}
.tl-node-body{flex:1;min-width:0;}
.tl-node-thread{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-faint);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tl-node-title{font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px;}
.tl-node-title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.tl-connector{width:100%;height:28px;}
.tl-connector svg{display:block;}
.tl-undated{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);}
.tl-undated .tl-nodes{flex-wrap:wrap;justify-content:flex-start;}
.tl-undated .tl-node{max-width:none;width:auto;flex:1 1 200px;}

/* Threads list */
#threadList{display:flex;flex-direction:column;gap:10px;}
.thread-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 16px;cursor:pointer;transition:border-color .15s;}
.thread-card:active{border-color:var(--ink-faint);}
.thread-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.thread-cat{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:0.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-bottom:6px;display:inline-block;background:color-mix(in srgb, var(--cat) 15%, white);color:var(--cat);}
.thread-name{font-family:'Fraunces',serif;font-size:16px;font-weight:500;color:var(--cat);}
.thread-due{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);white-space:nowrap;padding-top:2px;}
.thread-due.soon{color:var(--danger);}
.thread-next{font-size:13px;color:var(--ink-soft);margin-bottom:12px;}
.thread-progress-row{display:flex;align-items:center;gap:10px;}
.thread-track{flex:1;height:5px;background:var(--line);border-radius:3px;overflow:hidden;}
.thread-fill{height:100%;border-radius:3px;background:var(--cat);}
.thread-pct{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);width:32px;text-align:right;}

.empty-state{font-size:13px;color:var(--ink-faint);padding:20px 0;text-align:center;}

footer.tab-note{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);margin-top:30px;}

/* FAB — nested in a full-width, non-interactive slot capped to the same
   480px column as .screen, so on screens wider than that it stays anchored
   to the visible content instead of the physical viewport edge. */
.fab-slot{position:fixed;left:0;right:0;bottom:86px;max-width:480px;margin:0 auto;pointer-events:none;z-index:20;}
.fab{position:absolute;right:20px;bottom:0;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--bg);border:none;font-size:26px;line-height:52px;text-align:center;box-shadow:0 6px 16px rgba(29,33,31,0.28);cursor:pointer;pointer-events:auto;}

/* Tab bar — same 480px cap so its background and buttons stay aligned with
   the content column instead of stretching across the whole viewport. */
.tabbar{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;background:var(--card);border-top:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line);z-index:25;}
.tabbar-inner{display:flex;}
.tab-btn{flex:1;background:none;border:none;padding:13px 4px 16px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink-faint);cursor:pointer;}
.tab-btn.active{color:var(--ink);}

/* Detail view */
.detail{display:none;}
.detail.active{display:block;}
.back-row{display:flex;align-items:center;gap:8px;margin-bottom:18px;cursor:pointer;color:var(--ink-soft);font-size:13px;}
.back-row svg{width:16px;height:16px;}
.detail-cat{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:0.04em;text-transform:uppercase;padding:3px 8px;border-radius:4px;display:inline-block;margin-bottom:10px;background:color-mix(in srgb, var(--cat) 15%, white);color:var(--cat);}
.detail-name{font-family:'Fraunces',serif;font-size:24px;font-weight:600;margin-bottom:6px;letter-spacing:-0.01em;color:var(--cat);}
.detail-due{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-faint);margin-bottom:20px;}
.detail-progress-wrap{margin-bottom:26px;}
.detail-progress-row{display:flex;align-items:center;gap:12px;}
.detail-track{flex:1;height:8px;background:var(--line);border-radius:4px;overflow:hidden;}
.detail-fill{height:100%;border-radius:4px;background:var(--cat);}
.detail-pct{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-soft);width:38px;text-align:right;}
.detail-notes{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:12px;white-space:pre-wrap;}
.detail-notes:empty::before{content:'No notes yet.';color:var(--ink-faint);}
.detail-actions{display:flex;gap:14px;margin-bottom:24px;}
.detail-actions span{font-size:12.5px;color:var(--ink-soft);cursor:pointer;text-decoration:underline;}
.subtasks{display:flex;flex-direction:column;gap:2px;margin-bottom:20px;}
.subtask{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);}
.subtask:last-child{border-bottom:none;}
.subtask-status{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:0.03em;text-transform:uppercase;padding:4px 6px;border-radius:5px;border:none;cursor:pointer;flex-shrink:0;margin-top:1px;-webkit-appearance:none;appearance:none;text-align:center;}
.subtask-status.status-open{background:#EEEFED;color:var(--ink-faint);}
.subtask-status.status-started{background:#F5EEDD;color:#96702B;}
.subtask-status.status-completed{background:var(--ink);color:var(--bg);}
.subtask-body{flex:1;cursor:pointer;}
.subtask-title{font-size:13.5px;}
.subtask-title.done{text-decoration:line-through;color:var(--ink-faint);}
.subtask-meta{display:flex;gap:8px;margin-top:3px;}
.subtask-meta span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-faint);}
.subtask-notes{font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.4;}
.subtask-del{color:var(--ink-faint);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;}
.add-inline{font-size:12.5px;color:var(--ink-soft);cursor:pointer;padding:10px 0 0;display:inline-block;}
.add-inline:before{content:"+ ";}

/* Modal */
.sheet-backdrop{position:fixed;inset:0;background:rgba(29,33,31,0.35);display:none;align-items:flex-end;z-index:30;}
.sheet-backdrop.active{display:flex;}
.sheet{background:var(--card);width:100%;max-width:480px;margin:0 auto;border-radius:18px 18px 0 0;padding:22px 20px 28px;max-height:88vh;overflow-y:auto;}
.sheet-title{font-family:'Fraunces',serif;font-size:18px;font-weight:600;margin-bottom:16px;}
.field{margin-bottom:14px;}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;}
.field input[type=text], .field input[type=email], .field input[type=date], .field select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-family:'Inter',sans-serif;font-size:14px;background:var(--bg);color:var(--ink);
}
.field input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--bg);}
.field.checkrow{display:flex;align-items:center;gap:8px;}
.field.checkrow label{margin:0;text-transform:none;font-size:13px;letter-spacing:0;color:var(--ink-soft);}
.field-row{display:flex;gap:10px;align-items:flex-end;}
.field-row .field{flex:1;margin-bottom:0;}
.sheet-actions{display:flex;gap:10px;margin-top:8px;}
.btn{flex:1;padding:12px;border-radius:9px;border:none;font-size:14px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;}
.btn-primary{background:var(--ink);color:var(--bg);}
.btn-secondary{background:var(--bg);color:var(--ink-soft);border:1px solid var(--line);}
.form-error{font-size:12.5px;color:var(--danger);margin-top:-6px;margin-bottom:10px;min-height:16px;}

.category-list{display:flex;flex-direction:column;gap:2px;margin-bottom:16px;}
.category-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);}
.category-row:last-child{border-bottom:none;}
.category-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;background:var(--cat);}
.category-row-label{flex:1;font-size:13.5px;}
.category-del{color:var(--ink-faint);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;}