:root {
  --bg: #0f1115; --bg2: #161a21; --card: #1b2029; --line: #2a313d; --text: #e9edf3; --muted: #8f99a8;
  --gold: #f5b942; --gold-soft: rgba(245, 185, 66, .13); --green: #3ecf8e; --red: #ff6b6b; --blue: #5aa9ff;
  --radius: 14px; --font: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; }
a { color: var(--gold); }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.3; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.err { color: var(--red); }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.side { background: var(--bg2); border-inline-start: 1px solid var(--line); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.side .brand { font-weight: 800; font-size: 1.2rem; padding: 4px 10px 16px; display: flex; gap: 8px; align-items: center; }
.side a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; margin-bottom: 2px; }
.side a:hover { background: var(--card); }
.side a.on { background: var(--gold-soft); color: var(--gold); font-weight: 700; }
.side .sep { height: 1px; background: var(--line); margin: 10px 4px; }
main.page { padding: 22px clamp(14px, 3vw, 36px) 110px; max-width: 1100px; width: 100%; }
.tabbar { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .tabbar { display: flex; position: fixed; bottom: 0; inset-inline: 0; background: var(--bg2); border-top: 1px solid var(--line);
            padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 50; justify-content: space-around; }
  .tabbar a { flex: 1; text-align: center; color: var(--muted); text-decoration: none; font-size: .72rem; padding: 4px 0; }
  .tabbar a span { display: block; font-size: 1.3rem; line-height: 1.2; }
  .tabbar a.on { color: var(--gold); }
  main.page { padding-top: 14px; }
}

/* ---------- pieces ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card.gold { border-color: rgba(245, 185, 66, .45); background: linear-gradient(160deg, rgba(245,185,66,.10), var(--card) 60%); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.pill.gold { color: var(--gold); border-color: rgba(245,185,66,.4); background: var(--gold-soft); }
.pill.green { color: var(--green); border-color: rgba(62,207,142,.4); }
.pill.red { color: var(--red); border-color: rgba(255,107,107,.4); }

.btn { border: 1px solid var(--line); background: var(--bg2); padding: 8px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--gold); color: #1a1405; border-color: var(--gold); font-weight: 700; }
.btn.danger { color: var(--red); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); padding: 6px 8px; }
.btn.ghost:hover { color: var(--text); }
.btn.sm { padding: 4px 10px; font-size: .85rem; }
.btn.big { padding: 12px 18px; font-size: 1.05rem; }
.btn:disabled { opacity: .5; cursor: default; }

input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input:not([type]), textarea, select {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
textarea { resize: vertical; min-height: 70px; }
label { display: block; font-size: .9rem; color: var(--muted); margin: 10px 0 4px; }
label.row { display: flex; }
label.row input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--gold); }

/* ---------- the ONE thing ---------- */
.one { text-align: center; padding: 22px 16px; }
.one .q { color: var(--muted); font-size: .92rem; margin-bottom: 10px; }
.one .one-input { text-align: center; font-size: 1.45rem; font-weight: 800; line-height: 1.4; background: transparent; border: none; border-bottom: 2px dashed var(--line); border-radius: 0; padding: 8px; resize: none; min-height: 0; color: var(--gold); }
.one .one-input:focus { border-bottom-color: var(--gold); }
.one .title { font-size: 1.5rem; font-weight: 800; color: var(--gold); }
.one.done .title, .one.done .one-input { text-decoration: line-through; opacity: .7; }
.chain { display: flex; flex-direction: column; gap: 6px; }
.chain .lnk { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.chain .lnk b { color: var(--gold); min-width: 74px; font-size: .82rem; }
.chain .lnk.empty { color: var(--muted); border-style: dashed; }
.chain .arrow { text-align: center; color: var(--muted); font-size: .8rem; line-height: 1; }

.check { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.check:last-child { border-bottom: none; }
.check input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--gold); flex: none; cursor: pointer; }
.check.done .t { text-decoration: line-through; color: var(--muted); }
.check .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.streak { font-weight: 800; color: var(--gold); }
.bar { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.bar.green > i { background: var(--green); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.kpi .v { font-size: 1.6rem; font-weight: 800; }
.kpi .l { color: var(--muted); font-size: .82rem; }
.kpi.gold .v { color: var(--gold); }

.heat { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; direction: ltr; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: var(--bg); border: 1px solid var(--line); }
.heat i.on { background: var(--green); border-color: var(--green); }
.heat i.today { outline: 2px solid var(--gold); }

.hbars { display: flex; flex-direction: column; gap: 6px; }
.hbars .r { display: grid; grid-template-columns: 130px 1fr 54px; gap: 8px; align-items: center; font-size: .9rem; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 70px; direction: ltr; }
.hours i { background: var(--red); border-radius: 2px 2px 0 0; min-height: 1px; opacity: .85; }
.hours-l { display: grid; grid-template-columns: repeat(24, 1fr); font-size: .6rem; color: var(--muted); direction: ltr; text-align: center; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; font-size: .9rem; }
.chip.on { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); }
.scale { display: flex; gap: 4px; direction: ltr; }
.scale button { flex: 1; padding: 8px 0; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; }
.scale button.on { background: var(--gold); color: #1a1405; border-color: var(--gold); font-weight: 800; }

.goal { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--bg2); }
.goal.is-one { border-color: var(--gold); background: var(--gold-soft); }
.goal.done .gt { text-decoration: line-through; color: var(--muted); }
.goal .gt { font-weight: 700; }
.goal .why { color: var(--muted); font-size: .85rem; white-space: pre-wrap; }
.levels { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.levels a { flex: none; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; color: var(--text); background: var(--bg2); font-size: .92rem; }
.levels a.on { background: var(--gold); color: #1a1405; border-color: var(--gold); font-weight: 700; }
.pager { display: flex; align-items: center; gap: 8px; }
.pager .lbl { font-weight: 700; min-width: 120px; text-align: center; }

.rule { padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); margin-bottom: 6px; }
.rule b { color: var(--gold); }
.lesson { padding: 12px 14px; border-inline-start: 3px solid var(--gold); background: var(--bg2); border-radius: 8px; margin-bottom: 8px; white-space: pre-wrap; }

.timer { font-size: 3rem; font-weight: 800; text-align: center; direction: ltr; letter-spacing: 2px; }
.timer.run { color: var(--gold); }

/* ---------- vision board ---------- */
.vboard { columns: 3 220px; column-gap: 12px; }
.vitem { break-inside: avoid; margin-bottom: 12px; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); position: relative; }
.vitem img { width: 100%; display: block; }
.vitem .cap { padding: 10px 12px; font-weight: 700; }
.vitem.quote { padding: 22px 16px; text-align: center; font-size: 1.15rem; font-weight: 800; color: var(--gold); background: linear-gradient(160deg, rgba(245,185,66,.13), var(--card)); }
.vitem.goal { padding: 16px; border-color: rgba(62,207,142,.4); }
.vitem .tools { position: absolute; top: 6px; inset-inline-start: 6px; display: none; gap: 4px; }
.vitem:hover .tools { display: flex; }
.vitem .tools button { background: rgba(0,0,0,.65); border: none; color: #fff; border-radius: 8px; padding: 3px 8px; cursor: pointer; }
@media (hover: none) { .vitem .tools { display: flex; position: static; justify-content: flex-end; padding: 6px; } .vitem.quote .tools { padding: 10px 0 0; } }

/* ---------- modal + toast ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; width: min(520px, 100%); max-height: 90vh; overflow: auto; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-start; margin-top: 16px; flex-wrap: wrap; }
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 99px; z-index: 200; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.fabs { position: fixed; bottom: 86px; inset-inline-start: 18px; z-index: 60; display: flex; gap: 8px; align-items: center; }
.fab { background: var(--red); color: #fff; border: none; border-radius: 99px; padding: 12px 18px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.45); cursor: pointer; }
.fab.cap { background: var(--card); border: 1px solid var(--line); padding: 12px 14px; }
@media (min-width: 861px) { .fabs { bottom: 24px; } }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-card { width: min(380px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px 22px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.auth-card .logo { font-size: 2.4rem; }
.empty { text-align: center; color: var(--muted); padding: 18px 8px; }
.loading { text-align: center; color: var(--muted); padding: 40px; }

/* ---------- v2: ONE Thing focus page ---------- */
body.on-one main.page { max-width: 1400px; }
.onegrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .onegrid { grid-template-columns: minmax(0, 1fr); } }
.onegrid .col { min-width: 0; }
.brief .pre, .pre { white-space: pre-wrap; margin-top: 6px; }
.w-auto { width: auto !important; }
.w-num { width: 74px !important; }
.w-year { width: 96px !important; }
.pomo { text-align: center; }
.phases { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.phases button { border: 1px solid var(--line); background: var(--bg2); border-radius: 99px; padding: 5px 12px; cursor: pointer; font-size: .88rem; }
.phases button.on { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); font-weight: 700; }
.pomo-time { font-size: clamp(3.4rem, 9vw, 5.6rem); font-weight: 800; direction: ltr; letter-spacing: 2px; line-height: 1.1; margin: 6px 0; font-variant-numeric: tabular-nums; }
.pomo-time.run.focus { color: var(--red); }
.pomo-time.run.short, .pomo-time.run.long { color: var(--green); }
.pomo-bar { height: 10px; }
.pomo-bar > i { background: var(--red); transition: width .25s linear; }
.pomo-dots { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 12px 0 4px; }
.pomo-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); display: inline-block; }
.pomo-dots i.done { background: var(--red); border-color: var(--red); }
.pomo-dots i.cur { border-color: var(--red); }
.pomo-set { text-align: start; margin-top: 10px; }
.pomo-set summary, details summary { cursor: pointer; color: var(--muted); }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.grid4 label { margin: 6px 0 0; }
.slide { display: grid; grid-template-columns: 110px 1fr 54px; gap: 10px; align-items: center; margin: 10px 0; }
.slide input[type=range] { width: 100%; accent-color: var(--gold); }
.slide b { text-align: center; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; margin: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: .2s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 20px; height: 20px; inset-inline-start: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--gold); }
.switch input:checked + span::before { transform: translateX(-20px); }
#energyNow button { font-size: 1.3rem; }
.check.now { background: rgba(255,107,107,.08); border-radius: 10px; padding-inline: 8px; }
.goal-title { font-size: 1.2rem; font-weight: 800; margin-top: 6px; }
.why-box { background: var(--bg2); border-radius: 10px; padding: 8px 12px; margin-top: 8px; white-space: pre-wrap; }
.chain-line { margin-top: 10px; color: var(--muted); font-size: .85rem; line-height: 1.8; }
.chain-card .chain { margin-top: 8px; }
.banner { display: block; text-decoration: none; color: var(--gold); font-weight: 700; border-color: rgba(245,185,66,.45); }
.one-link { display: block; text-decoration: none; color: var(--text); text-align: center; }
.one-link .title { font-size: 1.4rem; font-weight: 800; color: var(--gold); margin: 4px 0; }
.mini-timer { position: fixed; top: 12px; inset-inline-start: 14px; z-index: 70; background: var(--card); border: 1px solid var(--red); color: var(--text); border-radius: 99px; padding: 6px 14px; font-weight: 800; text-decoration: none; direction: ltr; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.mini-timer[hidden] { display: none; }
@media (max-width: 860px) { .mini-timer { top: auto; bottom: 146px; } }

/* ---------- v2: inbox ---------- */
.inbox-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg2); }
.inbox-item.has-ai { border-color: rgba(245,185,66,.35); }
.inbox-item .t { overflow-wrap: anywhere; }
.reason { color: var(--muted); font-size: .88rem; margin: 4px 0; }
.inbox-ctl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; margin-top: 6px; }
@media (max-width: 760px) { .inbox-ctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .inbox-ctl input { grid-column: 1 / -1; } }
.levels a.add { padding: 8px 12px; }
.goal-cb { width: 22px; height: 22px; accent-color: var(--gold); margin-top: 2px; flex: none; }

/* ---------- v2: lessons / patterns / energy ---------- */
.pattern { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.bar.red > i { background: var(--red); }
.chip.red { color: var(--red); border-color: rgba(255,107,107,.45); cursor: default; }
.ehours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 90px; direction: ltr; }
.ehours > div { position: relative; display: flex; align-items: flex-end; gap: 1px; }
.ehours i { flex: 1; border-radius: 2px 2px 0 0; min-height: 1px; }
.ehours i.en { background: var(--gold); }
.ehours i.fo { background: var(--blue); opacity: .8; }

/* ---------- v2: compass ---------- */
.decision { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); }
.decision.green { border-color: var(--green); } .decision.red { border-color: var(--red); } .decision.gold { border-color: var(--gold); }
.decision ul { margin: 6px 0; padding-inline-start: 20px; }
.wheel-wrap { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 700px) { .wheel-wrap { grid-template-columns: minmax(0, 1fr); } .slide { grid-template-columns: 1fr 1fr 40px; } }
.radar { width: 100%; max-width: 260px; display: block; margin: 0 auto; }
.radar text { fill: var(--text); }

/* ---------- v2: ritual + settings ---------- */
.stepper { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 4px; }
.stepper a { flex: none; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; color: var(--muted); font-size: .9rem; }
.stepper a.on { background: var(--gold); color: #1a1405; border-color: var(--gold); font-weight: 700; }
.stepper a.past { color: var(--green); border-color: rgba(62,207,142,.4); }
.ritual-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rd { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--bg2); display: flex; flex-direction: column; gap: 6px; }
.code { direction: ltr; text-align: left; font-family: ui-monospace, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; overflow-x: auto; white-space: nowrap; user-select: all; }
.hz { margin-bottom: 6px; flex-wrap: nowrap; }
.hz span { font-size: .85rem; white-space: nowrap; }

/* ---------- v3: decide now / pulls ---------- */
.strip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.strip .pill { text-decoration: none; padding: 5px 12px; font-size: .88rem; }
.decide-btn { text-decoration: none; }
.decide { max-width: 760px; margin: 0 auto; }
.decide h1 { font-size: 1.35rem; }
.decide .chips { margin-bottom: 4px; }
.decide .chip { padding: 9px 14px; font-size: .95rem; }
.verdict { text-align: center; padding: 26px 18px; }
.v-title { font-size: clamp(1.5rem, 4.5vw, 2.2rem); font-weight: 800; color: var(--gold); margin: 8px 0 10px; line-height: 1.35; overflow-wrap: anywhere; }
.forced { margin-top: 12px; padding: 12px; border: 1px dashed var(--gold); border-radius: 12px; }
.big-input { font-size: 1.2rem; font-weight: 700; text-align: center; padding: 12px; }
.pull { max-width: 760px; margin: 0 auto 14px; }
.pq { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.yn { display: flex; gap: 6px; }
.yn button { border: 1px solid var(--line); background: var(--bg2); border-radius: 10px; padding: 6px 16px; cursor: pointer; }
.yn button.on { background: var(--gold); color: #1a1405; border-color: var(--gold); font-weight: 700; }
.pull-link { display: inline-block; margin-bottom: 10px; text-decoration: none; }

/* ---------- v3: GTD lists ---------- */
.filters .chip { font-size: .85rem; }
.banner-red { border-color: rgba(255,107,107,.5) !important; color: var(--text); }
.banner-red a { color: var(--red); }
.inbox-ctl2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-top: 6px; }
.inbox-more summary { margin-top: 6px; }
.inbox-item .g-cal, .inbox-item .g-wait, .inbox-item .g-proj { display: none; }
.inbox-item[data-gtd=calendar] .g-cal, .inbox-item[data-gtd=waiting] .g-wait, .inbox-item[data-gtd=project] .g-proj { display: block; }
.inbox-item[data-gtd=trash] .g-act, .inbox-item[data-gtd=someday] .g-act, .inbox-item[data-gtd=reference] .g-act, .inbox-item[data-gtd=waiting] select.g-act[name=when] { display: none; }

/* ---------- v3: Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 860px) { .kanban { grid-template-columns: minmax(0, 1fr); } }
.kcol { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-height: 120px; }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.kcard.stuck { border-color: var(--red); }
.next-act { margin-top: 6px; font-size: .9rem; color: var(--gold); }
.next-act.warn { color: var(--red); }

/* ---------- v3: reference notes ---------- */
.note { cursor: pointer; }
.note:hover { border-color: var(--muted); }
.note-body { color: var(--muted); font-size: .88rem; white-space: pre-wrap; margin-top: 6px; max-height: 6.5em; overflow: hidden; }

/* ---------- v3: 12 weeks ---------- */
.wbars { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 140px; align-items: end; direction: ltr; padding-bottom: 18px; }
.wbars a { position: relative; height: 100%; display: flex; align-items: flex-end; text-decoration: none; border-radius: 6px; }
.wbars a i { display: block; width: 100%; border-radius: 6px 6px 0 0; min-height: 3px; }
.wbars a span { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: .75rem; color: var(--muted); }
.wbars a.on { outline: 2px solid var(--gold); outline-offset: 2px; }
.wbars a.cur span { color: var(--gold); font-weight: 800; }
.line85 { position: absolute; left: 0; right: 0; bottom: calc(18px + (100% - 18px) * .85); border-top: 2px dashed var(--green); pointer-events: none; }
.cgoal { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg2); }
.tcount { min-width: 44px; text-align: center; direction: ltr; }

/* ---------- v3: time blocking ---------- */
.timeline { display: flex; flex-direction: column; gap: 6px; }
.tb { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); border-inline-start: 4px solid var(--blue); background: var(--bg2); }
.tb.deep { border-inline-start-color: var(--gold); }
.tb.shallow { border-inline-start-color: var(--blue); }
.tb.break { border-inline-start-color: var(--green); }
.tb.now { background: var(--gold-soft); border-color: var(--gold); }
.tb .tt { direction: ltr; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; min-width: 92px; }

/* ---------- v4: Selfbook (كتاب المستقبل) ---------- */
.book { max-width: 820px; margin: 0 auto; }
.bpage { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px clamp(16px, 4vw, 34px); margin-bottom: 16px; }
.bpage h2 { font-size: 1.3rem; color: var(--gold); margin-bottom: 12px; }
.principle { font-size: 1.08rem; line-height: 1.95; margin: 0 0 14px; }
.belief-cycle { width: 100%; max-width: 560px; display: block; margin: 0 auto; color: var(--text); }
.book-words { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.book-words span { font-size: 1.15rem; font-weight: 800; padding: 6px 14px; border-radius: 99px; background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(245,185,66,.4); }
.book-imgs { columns: 3 160px; column-gap: 10px; margin: 10px 0; }
.book-imgs figure { break-inside: avoid; margin: 0 0 10px; border-radius: 12px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); position: relative; }
.book-imgs img { width: 100%; display: block; }
.book-imgs figcaption { padding: 6px 10px; font-weight: 700; font-size: .9rem; }
.book-imgs figure.q { padding: 16px; text-align: center; font-weight: 800; color: var(--gold); }
.book-imgs.edit figure button { position: absolute; top: 4px; inset-inline-start: 4px; background: rgba(0,0,0,.6); color: #fff; }
.bio, .manifesto { font-size: 1.08rem; line-height: 1.9; white-space: pre-wrap; }
.manifesto { font-style: italic; border-inline-start: 3px solid var(--gold); padding-inline-start: 14px; }
.affirm { font-size: 1.3rem; font-weight: 800; line-height: 1.6; margin: 0 0 12px; }
.ach { list-style: none; padding: 0; margin: 8px 0; } .ach li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.bgoal { padding: 8px 0; border-bottom: 1px solid var(--line); } .bgoal .bar { margin-top: 6px; }
.ritual-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 14px; }
.ritual-steps div { background: var(--bg2); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.book-done { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 20px 0 30px; }
.book-pill { text-decoration: none; }
.sheet-wrap { overflow-x: auto; padding: 8px; }
.sheet { border-collapse: collapse; width: 100%; min-width: 860px; font-size: .9rem; }
.sheet th { background: var(--bg); color: var(--gold); padding: 8px 6px; position: sticky; top: 0; font-weight: 700; white-space: nowrap; }
.sheet td { border-top: 1px solid var(--line); padding: 4px; text-align: center; white-space: nowrap; }
.sheet tr.today td { background: var(--gold-soft); }
.sheet tr.future td { opacity: .45; }
.sheet input[type=time], .sheet select { width: 108px; padding: 4px 6px; font-size: .85rem; }
.yn1 { border: 1px solid var(--line); background: var(--bg2); border-radius: 8px; padding: 4px 10px; cursor: pointer; min-width: 52px; font-weight: 700; }
.yn1.y { background: var(--green); color: #052; border-color: var(--green); }
.yn1.n { background: rgba(255,107,107,.18); color: var(--red); border-color: var(--red); }
.dream { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.yrs { display: flex; gap: 4px; direction: ltr; }
.yrs button { border: 1px solid var(--line); background: var(--bg2); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.yrs button.on { background: var(--gold); color: #1a1405; border-color: var(--gold); font-weight: 800; }
.dream-why { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; background: var(--bg2); }
.dream-why.kept { border-color: var(--gold); }

main.page { min-width: 0; }
.sheet-wrap { max-width: 100%; }