/* ============================================================
   Revenue Focus - style.css  v3.2
   OtimusFlow "Revenue Focus (Final, Approved)" from Claude Design.
   Light tokens live on :root, dark tokens on body.dark (the app's
   existing theme switch). Fonts load from index.html.
   v3.2: the background atmosphere and the wordmark load from files in
   assets/, which ships in the deploy zip.
   ============================================================ */

/* ---------- TOKENS: light (default) ---------- */
:root {
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-quote: 'Newsreader', Georgia, serif;

  --of-bg: #EDF1F4;
  --of-sd: rgba(232,238,242,0.88);
  --of-rp: rgba(236,241,244,0.86);
  --of-cd: rgba(255,255,255,0.94);
  --of-cd2: rgba(20,50,70,0.035);
  --of-in: rgba(237,242,245,0.90);
  --of-inB: rgba(20,50,70,0.24);
  --of-sec: rgba(255,255,255,0.70);
  --of-ln: rgba(20,50,70,0.10);
  --of-ln2: rgba(20,50,70,0.20);
  --of-fg: #0F1C26;
  --of-pw: #0F1C26;
  --of-f2: #2F3D48;
  --of-f3: #46545F;
  --of-t: #2A7279;
  --of-tH: #236369;
  --of-tB: #2A7279;
  --of-tFg: #FFFFFF;
  --of-lk: #1F6C73;
  --of-teal: #2F8389;
  --of-go: #9A7224;
  --of-goT: #8A6519;
  --of-co: #C9483C;
  --of-coT: #A93A30;
  --of-act: rgba(47,131,137,0.11);
  --of-actB: #2F8389;
  --of-tr: rgba(20,50,70,0.10);
  --of-sh: inset 0 0 0 1px rgba(20,50,70,0.08), inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 40px -28px rgba(20,45,65,0.28);
  --of-imgO: 0.16;
  --of-arcB: 1;
  --of-starO: 0.08;
  --of-imgF: invert(1) hue-rotate(180deg) saturate(1.2);
  --of-vig: radial-gradient(120% 105% at 66% 14%, rgba(237,241,244,0) 40%, rgba(237,241,244,0.93) 100%);
  --toast-bg: #0F1C26;

  /* fixed accents, identical in both themes */
  --of-grad-gold: linear-gradient(180deg, #E3BE6E, #C9973F);
  --of-gold-ink: #1A1206;
  --of-grad-blue: linear-gradient(180deg, #1E3A8A, #132A66);
  --of-grad-red: linear-gradient(180deg, #C9483C, #9E2A22);
  --of-blue-line: #2F5FD0;
  --of-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

/* ---------- TOKENS: dark ---------- */
body.dark {
  --of-bg: #081522;
  --of-sd: rgba(7,17,28,0.90);
  --of-rp: rgba(8,19,31,0.88);
  --of-cd: rgba(14,33,51,0.93);
  --of-cd2: rgba(255,255,255,0.045);
  --of-in: rgba(4,12,20,0.62);
  --of-inB: rgba(170,205,222,0.26);
  --of-sec: rgba(255,255,255,0.06);
  --of-ln: rgba(170,205,222,0.15);
  --of-ln2: rgba(170,205,222,0.30);
  --of-fg: #F5F8FA;
  --of-pw: #FFFFFF;
  --of-f2: #D0DAE2;
  --of-f3: #A9B7C2;
  --of-t: #2C7A80;
  --of-tH: #35888E;
  --of-tB: rgba(127,195,199,0.45);
  --of-tFg: #FFFFFF;
  --of-lk: #86C8CC;
  --of-teal: #5CA4A9;
  --of-go: #D6A84F;
  --of-goT: #E3BE6E;
  --of-co: #FF6F61;
  --of-coT: #FF6F61;
  --of-act: rgba(92,164,169,0.13);
  --of-actB: #5CA4A9;
  --of-tr: rgba(150,190,210,0.14);
  --of-sh: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 48px -32px rgba(0,0,0,0.75);
  --of-imgO: 0.54;
  --of-arcB: 1.3;
  --of-starO: 0.34;
  --of-imgF: saturate(1);
  --of-vig: radial-gradient(140% 120% at 50% 45%, rgba(7,16,27,0) 55%, rgba(6,14,24,0.7) 100%), linear-gradient(90deg, rgba(7,16,27,0.35), rgba(7,16,27,0) 22%);
  --toast-bg: #13304A;
  color-scheme: dark;
}

/* names script.js reads (ring colors, fonts). Declared on body so dark mode re-resolves them. */
body {
  --font-body: var(--font-sans);
  --text: var(--of-fg);
  --border: var(--of-tr);
  --rpa-accent: var(--of-go);
  --support-accent: var(--of-teal);
  --distract-accent: var(--of-co);
}

/* numbers: Manrope tabular figures */
.num, .score-num, .ring-label, .timer-display, .stat-num, .wg-value, .fuel-num, .bd-count, .bucket-count, .dl-days, .m-amt, .wk-num {
  font-variant-numeric: tabular-nums;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  background: var(--of-bg);
  color: var(--of-fg);
  -webkit-font-smoothing: antialiased;
}
input, textarea, button, select { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--of-f3); opacity: 0.85; font-weight: 400; }
input, textarea { font-weight: 500; }
svg.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.ic-play { fill: currentColor; stroke-width: 1.5; }

/* ---------- background atmosphere ---------- */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmos-arc {
  position: absolute; inset: -6% -4% -10% -8%;
  background: url("assets/atmos-arc.webp") 26% 40% / cover no-repeat;
  opacity: var(--of-imgO);
  filter: var(--of-imgF) brightness(var(--of-arcB)) blur(10px);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 42%, rgba(0,0,0,0.6) 68%, rgba(0,0,0,0.45) 100%);
  mask-image: linear-gradient(100deg, #000 0%, #000 42%, rgba(0,0,0,0.6) 68%, rgba(0,0,0,0.45) 100%);
}
.atmos-stars {
  position: absolute; inset: -4%;
  background: url("assets/atmos-stars.webp") 70% 20% / cover no-repeat;
  opacity: var(--of-starO);
  filter: var(--of-imgF);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(60% 55% at 82% 8%, #000 10%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 82% 8%, #000 10%, transparent 75%);
  animation: ofDrift 140s ease-in-out infinite alternate;
}
.atmos-vig { position: absolute; inset: 0; background: var(--of-vig); }

/* ---------- motion ---------- */
@keyframes ofDrift { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-2.5%,1.5%,0) scale(1.08); } }
@keyframes ofNavIn { 0% { transform: translateX(0) scale(1); } 100% { transform: translateX(6px) scale(1.045); } }
@keyframes ofNavBg { 0% { background-color: transparent; } 100% { background-color: var(--of-act); } }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* every button lifts on hover, like the approved design */
button {
  cursor: pointer; white-space: nowrap;
  transition: transform 260ms var(--of-ease), filter 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
button:not(:disabled):hover { transform: translateY(-3px) scale(1.04); }
button:not(:disabled):active { transform: translateY(-1px) scale(1.01); transition-duration: 90ms; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
/* rows and inline controls that are buttons in code but not "buttons" in the design */
.nav-item:not(:disabled):hover, .nav-item:not(:disabled):active,
.fuel:not(:disabled):hover, .fuel:not(:disabled):active,
.task-menu:hover, .task-menu:active, .override-pop button:hover, .override-pop button:active,
.idea-count:hover, .idea-count:active, .log-del:hover, .log-del:active,
.toast-x:hover, .toast-x:active, .btn-link:hover, .btn-link:active,
.role-card:not(:disabled):active { transform: none; }

/* ============================================================
   APP LAYOUT: sidebar 248 / main / rail 304
   ============================================================ */
.app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 304px;
  height: 100vh;
  overflow: hidden;
}

/* ---------- SIDEBAR ---------- */
.sidebar {
  overflow-y: auto;
  padding: 22px 16px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--of-sd);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset -1px 0 0 var(--of-ln);
}
.sidebar > * { flex: none; }
.brand { display: flex; align-items: center; padding: 8px 8px 24px; }
.brand .wordmark { display: none; } /* drawn below instead, so a missing image file can never show a broken logo */
.brand::before {
  content: ""; display: block; width: 150px; max-width: 100%; aspect-ratio: 300 / 38;
  background: url("assets/revenue-focus-wordmark-dark.webp") left center / contain no-repeat;
}
body.dark .brand::before { background-image: url("assets/revenue-focus-wordmark-duo.webp"); }

.dark-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 38px; margin-bottom: 14px;
  border-radius: 999px; border: 1px solid var(--of-ln2);
  background: var(--of-sec); color: var(--of-f2);
  font-size: 13px; font-weight: 500;
}
.dark-toggle:hover { color: var(--of-fg); border-color: var(--of-actB); }
.dark-toggle svg.ic { width: 16px; height: 16px; }
#darkIcon { display: none; }
#darkLabel { color: var(--of-pw); }
.ti-sun { display: none; }
body.dark .ti-sun { display: block; }
body.dark .ti-moon { display: none; }

.nav { display: flex; flex-direction: column; gap: 6px; }
.nav-group {
  padding: 14px 12px 6px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--of-f3);
}
.nav-group.first { padding-top: 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 12px; border-radius: 11px;
  border: none; background: transparent;
  color: var(--of-pw); font-size: 17px; font-weight: 700; text-align: left;
  transition: background-color 160ms ease, color 160ms ease;
}
.nav-item:hover { background: var(--of-cd2); color: var(--of-fg); }
.nav-ico { display: inline-flex; flex: none; }
.nav-item.active {
  background: var(--of-act);
  box-shadow: inset 3px 0 0 var(--of-actB);
  font-weight: 800;
  animation: ofNavBg 420ms var(--of-ease) both;
}
.nav-item.active > .nav-ico, .nav-item.active > .nav-text {
  transform-origin: left center;
  animation: ofNavIn 520ms var(--of-ease) both;
}

.stats-card { margin-top: 22px; border-radius: 16px; background: var(--of-cd); box-shadow: var(--of-sh); overflow: hidden; }
.score-card { padding: 16px 16px 15px; }
.weekly-goal { padding: 15px 16px 16px; box-shadow: inset 0 1px 0 var(--of-ln); }
.score-label, .wg-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--of-f3); }
.score-num { margin-top: 4px; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--of-goT); }
.wg-value { margin-top: 4px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--of-fg); }
.score-bar { height: 3px; margin: 10px 0 8px; border-radius: 999px; background: var(--of-tr); overflow: hidden; }
.score-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--of-go); transition: width .4s; }
.score-sub { font-size: 13px; line-height: 1.4; color: var(--of-f2); }

/* ---------- MAIN ---------- */
.main { position: relative; overflow-y: auto; padding: 44px 48px 80px; }
.main > * { max-width: 1180px; }

/* page header (all pages but Focus Mode) */
.page-head { margin-bottom: 30px; }
.page-head h1 { font-size: 42px; line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; color: var(--of-fg); text-wrap: balance; }
.page-head h1 .kw { color: var(--of-go); }
.page-head .page-sub { margin-top: 10px; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--of-f2); }
.page-head .page-sub.intro-italic { font-style: italic; }
.page-head .page-sub.intro-sm { font-size: 17px; font-weight: 400; }

/* Focus Mode hero */
.page-head.hero { margin-bottom: 36px; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px 40px; flex-wrap: wrap; }
.head-row > div:first-child { flex: 1 1 420px; min-width: 0; }
.hero-stack { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; }
.rpa-line { font-size: 14px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--of-f2); text-align: center; }
.hero h1 { margin-top: 16px; font-size: 52px; line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; }
.hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 700; color: var(--of-go); letter-spacing: -0.015em; }
.hero .page-sub { margin-top: 14px; max-width: 520px; text-align: center; font-size: 17px; line-height: 1.55; font-weight: 700; font-style: italic; }

/* weekly revenue goal */
.goal-card {
  flex: 0 1 280px;
  padding: 18px 20px; border-radius: 18px;
  background: var(--of-cd);
  border: 1px solid rgba(214,168,79,0.45);
  box-shadow: inset 0 1px 0 rgba(255,236,190,0.10), 0 0 0 4px rgba(214,168,79,0.06), var(--of-sh);
  transition: border-color 180ms ease;
}
.goal-card:focus-within { border-color: rgba(214,168,79,0.75); }
.goal-card label { display: block; font-size: 15px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--of-pw); cursor: text; }
.goal-input-row { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.goal-input-row span { font-size: 28px; font-weight: 500; color: var(--of-pw); }
.goal-card input {
  width: 100%; min-width: 0; border: none; background: transparent; padding: 0;
  color: var(--of-pw); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.goal-card input::-webkit-outer-spin-button, .goal-card input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.goal-card input:focus { outline: none; box-shadow: none; }
.goal-hint { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--of-pw); }

/* generic card */
.card {
  background: var(--of-cd); border: 1px solid transparent; border-radius: 20px;
  box-shadow: var(--of-sh); padding: 24px 26px; margin-bottom: 18px;
}
.card-title { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--of-pw); margin-bottom: 14px; }
.page-sub { font-size: 14px; line-height: 1.5; color: var(--of-f2); }
.page-sub.tight { margin: 0 0 14px; }
.field-hint { font-size: 13.5px; line-height: 1.45; color: var(--of-f2); margin-top: 10px; }

/* ---------- ACCENT CARDS: 1px accent border, 8px top line, bottom glow ---------- */
.bucket.rpa, .lib-card:has(.lib-head.mint), .lib-card:has(.lib-head.yellow),
.card:has(#nsLineInput), .card:has(#mAmt), .tracker-grid > div > .tracker-list:first-child {
  --acc: var(--of-go); --acc-border: rgba(214,168,79,0.45);
  --acc-glow1: rgba(196,140,40,0.24); --acc-glow2: rgba(170,120,35,0.08); --acc-wash: rgba(214,168,79,0.07);
}
.bucket.support, .lib-card:has(.lib-head.peach), .brief-grid .card:has([data-copybrief="morning"]) {
  --acc: var(--of-teal); --acc-border: rgba(92,164,169,0.6);
  --acc-glow1: rgba(92,164,169,0.30); --acc-glow2: rgba(70,140,150,0.11); --acc-wash: rgba(92,164,169,0.08);
}
.bucket.distract, .lib-card:has(.lib-head.lavender), .card:has(#distText), .card:has(#clearOverrides) {
  --acc: var(--of-co); --acc-border: rgba(255,111,97,0.40);
  --acc-glow1: rgba(150,30,45,0.16); --acc-glow2: rgba(120,25,40,0.05); --acc-wash: rgba(255,111,97,0.06);
}
.card:has(#dlLabel), .brief-grid .card:has([data-copybrief="evening"]), .tracker-grid > div > .tracker-list:nth-child(2) {
  --acc: var(--of-blue-line); --acc-border: rgba(60,110,220,0.55);
  --acc-glow1: rgba(38,92,170,0.26); --acc-glow2: rgba(30,70,140,0.09); --acc-wash: rgba(60,110,210,0.07);
}
.lib-card:has(.lib-head.mint) { --acc-border: rgba(214,168,79,0.40); }
.lib-card:has(.lib-head.peach) { --acc-border: rgba(92,164,169,0.45); }

.bucket, .lib-card:has(.lib-head.mint), .lib-card:has(.lib-head.peach), .lib-card:has(.lib-head.lavender),
.card:has(#nsLineInput), .card:has(#mAmt), .card:has(#dlLabel), .card:has(#distText), .card:has(#clearOverrides),
.tracker-grid > div > .tracker-list:first-child, .tracker-grid > div > .tracker-list:nth-child(2),
.brief-grid .card:has([data-copybrief="morning"]), .brief-grid .card:has([data-copybrief="evening"]) {
  position: relative; overflow: hidden;
  border: 1px solid var(--acc-border);
  background:
    radial-gradient(90% 80% at 50% 100%, var(--acc-glow1), var(--acc-glow2) 50%, transparent 80%),
    linear-gradient(180deg, var(--acc-wash), transparent 160px),
    var(--of-cd);
}
.lib-card:has(.lib-head.yellow) { position: relative; overflow: hidden; }
.bucket::before, .lib-card::before,
.card:has(#nsLineInput)::before, .card:has(#mAmt)::before, .card:has(#dlLabel)::before, .card:has(#distText)::before, .card:has(#clearOverrides)::before,
.tracker-grid > div > .tracker-list:first-child::before, .tracker-grid > div > .tracker-list:nth-child(2)::before,
.brief-grid .card:has([data-copybrief="morning"])::before, .brief-grid .card:has([data-copybrief="evening"])::before {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 8px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, var(--acc), transparent 80%);
  pointer-events: none;
}
/* thick-border variants */
.brief-grid .card:has([data-copybrief="weekly"]), .brief-grid .card:has([data-copybrief="monthly"]) { border: 1px solid rgba(214,168,79,0.45); }
.card.ring-wrap { border: 2px solid rgba(214,168,79,0.6); }
.card:has(#ideaInput2) { border: 3px solid rgba(38,82,170,0.85); }

/* ============================================================
   BUTTONS: gold / teal / blue / red / secondary / link
   ============================================================ */
/* teal: interactive primary (default for Add, Copy Prompt, Add Block, Export, Start, Park) */
.btn-add, .btn-primary, .btn-start, .btn-idea, .btn-focus {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 12px;
  border: 1px solid var(--of-tB); background: var(--of-t); color: var(--of-tFg);
  font-size: 16px; font-weight: 800;
}
.btn-add:not(:disabled):hover, .btn-primary:not(:disabled):hover, .btn-start:not(:disabled):hover,
.btn-idea:not(:disabled):hover, .btn-focus:not(:disabled):hover { background: var(--of-tH); }

/* gold: revenue actions */
.btn-analyze, .one-btn, .one-set button, .toast-btn,
#nsLineSave, #evLog, #mLog, #lSave, #setupAddBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 12px;
  border: none; background: var(--of-grad-gold); color: var(--of-gold-ink);
  font-size: 16px; font-weight: 900;
  box-shadow: 0 10px 24px -14px rgba(214,168,79,0.8);
}
.btn-analyze:not(:disabled):hover, .one-btn:not(.ghost):not(:disabled):hover, .one-set button:not(:disabled):hover, .toast-btn:hover,
#nsLineSave:not(:disabled):hover, #evLog:not(:disabled):hover, #mLog:not(:disabled):hover, #lSave:not(:disabled):hover, #setupAddBtn:not(:disabled):hover {
  filter: brightness(1.07); background: var(--of-grad-gold);
}

/* deep blue: informational */
.btn-brief, #dlAdd, #tmSet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 12px;
  border: 1px solid rgba(110,145,240,0.40); background: var(--of-grad-blue); color: #FFFFFF;
  font-size: 16px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 24px -14px rgba(40,80,200,0.8);
}
.btn-brief:not(:disabled):hover, #dlAdd:not(:disabled):hover, #tmSet:not(:disabled):hover { filter: brightness(1.1); background: var(--of-grad-blue); }

/* deep red: distraction log */
.btn-log {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; border-radius: 12px;
  border: 1px solid rgba(255,140,125,0.35); background: var(--of-grad-red); color: #FFFFFF;
  font-size: 16px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 24px -14px rgba(160,40,30,0.8);
}
.btn-log:not(:disabled):hover { filter: brightness(1.08); }

/* secondary: neutral */
.btn-change, .btn-ghost, .btn-ghost-sm, .btn-mini, .btn-reset, .one-btn.ghost, .btn-add.idea, #importBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--of-ln2); background: var(--of-sec); color: var(--of-fg);
  font-size: 16px; font-weight: 800; box-shadow: none; filter: none;
}
.btn-change:not(:disabled):hover, .btn-ghost:not(:disabled):hover, .btn-ghost-sm:not(:disabled):hover, .btn-mini:not(:disabled):hover,
.btn-reset:not(:disabled):hover, .one-btn.ghost:not(:disabled):hover, .btn-add.idea:not(:disabled):hover, #importBtn:not(:disabled):hover {
  border-color: var(--of-actB); background: var(--of-sec); filter: none;
}
.btn-ghost-sm, #importBtn { font-size: 14px; font-weight: 600; }
.btn-mini { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.btn-mini.danger { color: var(--of-co); }
.btn-add.idea { height: 44px; padding: 0 20px; }

/* link buttons */
.btn-set, .btn-tip, .btn-link {
  height: auto; padding: 0; border: none; background: none; color: var(--of-lk);
  font-weight: 800; box-shadow: none;
}
.btn-set:hover, .btn-tip:hover, .btn-link:hover { color: var(--of-fg); }
.btn-link { font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* desktop alerts "On" pill, setup danger buttons */
#setNotify { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--of-tB); background: var(--of-act); color: var(--of-lk); font-size: 16px; font-weight: 800; }
#setNotify:not(:disabled):hover { border-color: var(--of-actB); background: var(--of-act); }
#clearOverrides { background: rgba(255,111,97,0.10) !important; color: var(--of-coT) !important; border: 1px solid rgba(255,111,97,0.5); }
#resetAll { background: #E85A4D !important; color: #000000 !important; border: none; }
#clearOverrides:not(:disabled):hover, #resetAll:not(:disabled):hover { filter: brightness(1.06); }

/* keyboard focus */
button:focus-visible, .role-card:focus-visible { outline: 2px solid var(--of-actB); outline-offset: 2px; }

/* ============================================================
   INPUTS
   ============================================================ */
.add-row input, .log-input-row input, .dl-add input, .money-row > input, .ladder-inputs input,
.set-row input[type="number"], .idea-quick input, .ns-title-input, .one-set input {
  height: 42px; padding: 0 12px; border-radius: 11px;
  border: 1px solid var(--of-inB); background: var(--of-in); color: var(--of-fg);
  font-size: 14px; font-weight: 500;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.task-textarea, .ns-textarea {
  display: block; width: 100%;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--of-inB); background: var(--of-in); color: var(--of-fg);
  font-size: 15px; line-height: 1.6; resize: vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, input:not([type]):focus, textarea:focus {
  outline: none; border-color: var(--of-actB); box-shadow: 0 0 0 3px rgba(92,164,169,0.28);
}
.goal-card input:focus, .money-amt input:focus { box-shadow: none; }

/* ============================================================
   FOCUS MODE
   ============================================================ */
.cockpit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; margin-bottom: 18px; }

.one-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  min-height: 196px; padding: 24px 26px; border-radius: 20px;
  background: var(--of-cd);
  box-shadow: inset 0 0 0 1px rgba(214,168,79,0.32), var(--of-sh);
}
.one-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.one-label { font-size: 16px; font-weight: 800; letter-spacing: 0.03em; color: var(--of-goT); }
.one-date { font-size: 13.5px; font-weight: 700; color: var(--of-f2); }
.one-text { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--of-fg); text-wrap: balance; overflow-wrap: anywhere; }
.one-card.is-done .one-text { text-decoration: line-through; color: var(--of-f3); }
.one-prompt { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; color: var(--of-fg); }
.one-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; }
.one-btn { height: 42px; padding: 0 18px; font-size: 14px; }
.one-btn.ghost { height: 42px; padding: 0 16px; font-size: 14px; font-weight: 600; }
.one-badge { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(214,168,79,0.14); color: var(--of-goT); font-size: 14px; font-weight: 800; }
.one-set { display: flex; gap: 8px; }
.one-set input { flex: 1; min-width: 0; }
.one-set button { height: 42px; padding: 0 18px; font-size: 14px; }
.one-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.one-pick {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; max-width: 100%;
  border-radius: 999px; border: 1px solid var(--of-ln2); background: var(--of-sec); color: var(--of-fg);
  font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
}
.one-pick:not(:disabled):hover { border-color: rgba(214,168,79,0.6); background: rgba(214,168,79,0.08); }
.one-star { color: var(--of-goT); font-size: 14px; line-height: 1; }

/* status card: deadline, money, streak */
.fuel-card { display: flex; flex-direction: column; padding: 10px 10px 12px; border-radius: 20px; background: var(--of-cd); box-shadow: var(--of-sh); }
.fuel {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center;
  width: 100%; padding: 12px 14px; border: none; background: transparent;
  color: var(--of-fg); text-align: left; white-space: normal;
}
.fuel + .fuel { box-shadow: inset 0 1px 0 var(--of-ln); }
.fuel:hover { background: var(--of-cd2); }
.fuel-num { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--of-fg); }
.fuel[data-goto="money"] .fuel-num { font-weight: 800; color: var(--of-goT); }
.fuel-cap { min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--of-f2); }
.fuel[data-goto="money"] .fuel-cap { font-weight: 700; }
.fuel-cap span { display: block; margin-top: 1px; font-size: 15px; font-weight: 600; color: var(--of-fg); }
.fuel-cap .fuel-bar { height: 3px; margin-top: 8px; border-radius: 999px; background: var(--of-tr); overflow: hidden; }
.fuel-cap .fuel-bar i { display: block; height: 100%; background: var(--of-go); border-radius: 999px; }
.btn-brief { height: 42px; margin: 6px 4px 0; padding: 0 18px; font-size: 14px; }

/* pinned North Star strip */
.ns-strip { margin-bottom: 18px; padding: 16px 18px 16px 22px; border-radius: 18px; background: var(--of-cd); box-shadow: var(--of-sh); }
.ns-strip-head { display: flex; align-items: center; gap: 14px; }
.ns-ico { display: inline-flex; color: var(--of-go); }
.ns-ico svg.ic { width: 20px; height: 20px; }
.ns-line { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--of-fg); overflow-wrap: anywhere; }
.ns-hint { margin-top: 6px; font-size: 13.5px; color: var(--of-f2); }
.ns-strip-body { margin-top: 12px; }
.ns-strip:not(.open):not(.fits) .ns-strip-body {
  max-height: 168px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
}
.ns-strip-title { font-size: 13.5px; font-weight: 800; color: var(--of-f2); margin-bottom: 6px; }
.ns-body { white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; font-size: 15px; line-height: 1.6; color: var(--of-fg); }

/* three columns */
.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-bottom: 18px; }
.bucket { padding: 24px 22px 26px; min-height: 220px; border-radius: 20px; box-shadow: var(--of-sh); }
.bucket-head { display: flex; align-items: center; gap: 10px; }
.bucket-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bucket-dot.rpa { background: var(--of-go); }
.bucket-dot.support { background: var(--of-teal); }
.bucket-dot.distract { background: var(--of-co); }
.bucket-title { flex: 1; min-width: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.012em; color: var(--of-fg); }
.bucket-count { min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.bucket.rpa .bucket-count { background: rgba(214,168,79,0.14); color: var(--of-goT); }
.bucket.support .bucket-count { background: rgba(92,164,169,0.16); color: var(--of-lk); }
.bucket.distract .bucket-count { background: rgba(255,111,97,0.13); color: var(--of-coT); }
.bucket-desc { margin: 6px 0 16px 18px; font-size: 14px; color: var(--of-f2); }

/* task rows */
.task {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 10px 14px; margin-bottom: 8px; border-radius: 12px;
  background: var(--of-cd2); box-shadow: inset 0 0 0 2px var(--of-ln2);
  line-height: 1.35; color: var(--of-fg);
}
.task input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0;
  border-radius: 50%; border: 1.5px solid var(--of-f3); background: transparent; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.task input[type="checkbox"]:checked { background: var(--of-go); border-color: var(--of-go); }
.bucket.support .task input[type="checkbox"]:checked, .tracker-grid > div > .tracker-list:nth-child(2) .task input[type="checkbox"]:checked { background: var(--of-teal); border-color: var(--of-teal); }
.bucket.distract .task input[type="checkbox"]:checked { background: var(--of-co); border-color: var(--of-co); }
.task input[type="checkbox"]:focus-visible { outline: 2px solid var(--of-actB); outline-offset: 2px; }
.task-text { flex: 1; min-width: 0; font-size: 15px; color: var(--of-fg); overflow-wrap: anywhere; }
.task.done .task-text { text-decoration: line-through; color: var(--of-f3); }
.task-menu { opacity: 0; flex: none; border: none; background: transparent; color: var(--of-f2); font-size: 18px; line-height: 1; padding: 0 4px; }
.task:hover .task-menu, .task-menu:focus-visible { opacity: 1; }

/* task input card: Quick-Add + Add Your Tasks */
.task-input { padding: 0; }
.ti-sec { padding: 24px 26px 22px; }
.ti-sec + .ti-sec { padding: 22px 26px 24px; box-shadow: inset 0 1px 0 var(--of-ln); }
.task-input .card-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--of-fg); }
.quick-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quick-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px 0 12px; border-radius: 999px;
  border: 1px solid var(--of-ln2); background: var(--of-sec); color: var(--of-fg);
  font-size: 14px; font-weight: 500;
}
.quick-pill::before {
  content: ""; width: 11px; height: 11px; flex: none; background: var(--of-go);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quick-pill:not(:disabled):hover { border-color: rgba(214,168,79,0.6); background: rgba(214,168,79,0.08); }
.task-textarea { margin-top: 14px; min-height: 124px; }
.ti-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.btn-analyze { height: 44px; padding: 0 20px; font-size: 14px; }

/* override popup */
.override-pop {
  position: fixed; z-index: 999;
  background: var(--of-cd); border: 1px solid var(--of-ln2); border-radius: 14px; padding: 6px;
  box-shadow: 0 22px 48px -18px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: flex; flex-direction: column; gap: 2px; min-width: 180px;
}
.override-pop button { background: transparent; border: none; text-align: left; font-size: 14px; font-weight: 600; color: var(--of-fg); padding: 9px 12px; border-radius: 9px; }
.override-pop button:hover { background: var(--of-cd2); }
.override-pop button.pop-delete { color: var(--of-co); box-shadow: inset 0 1px 0 var(--of-ln); margin-top: 2px; }
.override-pop button.pop-delete:hover { background: rgba(255,111,97,0.10); }

/* ============================================================
   RIGHT RAIL
   ============================================================ */
.right-panel {
  overflow-y: auto; padding: 20px 18px 28px;
  display: flex; flex-direction: column;
  background: var(--of-rp);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 1px 0 0 var(--of-ln);
}
.right-panel > * { flex: none; }
.timer-card {
  padding: 22px 20px 20px; border-radius: 20px; text-align: center;
  border: 2px solid rgba(92,164,169,0.55);
  background: radial-gradient(100% 60% at 50% 0%, rgba(92,164,169,0.14), rgba(92,164,169,0) 100%), var(--of-cd);
  box-shadow: var(--of-sh);
}
.timer-presets { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--of-in); box-shadow: inset 0 0 0 1px var(--of-ln); }
.preset { flex: 1; height: 34px; border: none; border-radius: 9px; background: transparent; color: var(--of-f2); font-size: 15px; font-weight: 800; }
.preset.active { background: var(--of-act); box-shadow: inset 0 0 0 1px var(--of-tB); color: var(--of-fg); }
.timer-display { margin-top: 18px; font-size: 60px; line-height: 1; font-weight: 500; letter-spacing: -0.045em; color: var(--of-fg); }
.timer-focus { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--of-f2); }
.timer-focus span { color: var(--of-fg); font-weight: 600; }
.timer-controls { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; margin-top: 18px; }
.btn-start { height: 46px; padding: 0 12px; font-size: 17px; }
.btn-reset { height: 46px; padding: 0 10px; font-size: 16px; }
.timer-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--of-ln); font-size: 13.5px; color: var(--of-f2); text-align: left; }
.timer-custom { display: flex; align-items: center; gap: 8px; }
.timer-custom label { font-size: 13.5px; color: var(--of-f2); }
.timer-custom input {
  width: 56px; height: 34px; padding: 0 6px; border-radius: 9px;
  border: 1px solid var(--of-inB); background: var(--of-in); color: var(--of-fg);
  font-size: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.timer-custom input::-webkit-outer-spin-button, .timer-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-set { padding: 0 4px; font-size: 14px; font-weight: 600; }
.timer-sessions { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }

.breakdown-card { padding: 28px 4px 24px; box-shadow: inset 0 -1px 0 var(--of-ln); }
.bd-title, .idea-card .tip-label { font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--of-pw); }
.bd-title { margin-bottom: 16px; }
.bd-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 22px; gap: 12px; align-items: center; margin-bottom: 14px; font-size: 14px; }
.bd-row:last-child { margin-bottom: 0; }
.bd-name { font-weight: 700; color: var(--of-fg); }
.bd-track { height: 4px; border-radius: 2px; background: var(--of-tr); overflow: hidden; }
.bd-fill { height: 100%; width: 0%; border-radius: 2px; transition: width .4s; }
.bd-fill.rpa { background: var(--of-go); }
.bd-fill.support { background: var(--of-teal); }
.bd-fill.distract { background: var(--of-co); }
.bd-count { text-align: right; color: var(--of-f2); }

.idea-card { padding: 24px 4px; box-shadow: inset 0 -1px 0 var(--of-ln); }
.idea-quick { display: flex; gap: 8px; margin-top: 14px; }
.idea-quick input { flex: 1; min-width: 0; }
.btn-idea { height: 42px; padding: 0 16px; border-radius: 11px; font-size: 15.5px; color: #FFFFFF; }
.idea-count { display: block; margin-top: 10px; padding: 0; border: none; background: none; text-align: left; font-size: 13.5px; color: var(--of-f2); white-space: normal; }
.idea-count:hover { color: var(--of-fg); text-decoration: underline; }

.tip-card { padding: 24px 4px 0; }
.tip-card .tip-label { font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--of-f3); }
.tip-text { margin-top: 14px; font-family: var(--font-quote); font-style: italic; font-weight: 600; font-size: 23px; line-height: 1.5; letter-spacing: 0.002em; color: var(--of-fg); text-wrap: pretty; }
.tip-from { margin-top: 6px; font-size: 13px; color: var(--of-f2); }
.tip-from:empty { display: none; }
.btn-tip { margin-top: 14px; font-size: 16px; }

/* ============================================================
   NORTH STAR
   ============================================================ */
.ns-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ns-grid .card { margin-bottom: 18px; }
.add-row { display: flex; gap: 8px; }
.add-row input { flex: 1; min-width: 0; }
.add-row.wrap { flex-wrap: wrap; }
.add-row.compact input { height: 42px; }
.dl-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--of-ln); }
.dl-row.past { opacity: .5; }
.dl-days { min-width: 56px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--of-fg); }
.dl-text { flex: 1; min-width: 0; font-size: 14px; }
.dl-text strong { display: block; font-size: 16px; font-weight: 700; color: var(--of-fg); overflow-wrap: anywhere; }
.dl-text span { font-size: 13.5px; color: var(--of-f2); }
.dl-row .btn-mini.danger { height: 32px; padding: 0 10px; border: none; background: transparent; color: var(--of-co); border-radius: 9px; }
.dl-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dl-add input[type="text"] { flex: 1; min-width: 140px; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.slot-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--of-ln2); background: var(--of-sec); color: var(--of-fg); font-size: 14px; font-weight: 500; }
.slot-chip:not(:disabled):hover { border-color: var(--of-actB); }
.slot-chip.on { background: var(--of-act); border-color: var(--of-tB); color: var(--of-fg); font-weight: 700; }
.ns-title-input { display: block; width: 100%; margin-bottom: 10px; font-size: 15px; font-weight: 700; }
.ns-textarea { min-height: 150px; tab-size: 4; }
.ns-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.ns-foot .field-hint { margin-top: 0; }
.ns-starter { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--of-ln2); font-size: 14px; color: var(--of-f2); }
.ns-starter .btn-link { text-decoration: none; }
.ns-block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ns-block-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--of-pw); overflow-wrap: anywhere; }
.pin-dot { margin-right: 6px; }
.ns-block-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-block.pinned { box-shadow: inset 3px 0 0 var(--of-actB), var(--of-sh); }
.ns-block-foot { font-size: 13px; color: var(--of-f2); margin-top: 12px; }
.empty-card { text-align: center; padding: 34px 18px; font-size: 15px; color: var(--of-f2); background: transparent; border: 1px dashed var(--of-ln2); box-shadow: none; }

/* ============================================================
   BRIEFS
   ============================================================ */
.brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.brief-grid .card { margin-bottom: 0; }
.brief-head { display: flex; align-items: center; gap: 14px; }
.brief-ico { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; background: rgba(214,168,79,0.14); color: var(--of-go); }
.brief-ico svg.ic { width: 20px; height: 20px; }
.brief-ico-evening, .brief-ico-weekly { background: rgba(92,164,169,0.14); color: var(--of-lk); }
.brief-title { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--of-pw); }
.brief-when { font-size: 14px; font-weight: 700; color: var(--of-f2); }
.brief-what { margin: 14px 0 16px; font-size: 15.5px; line-height: 1.55; color: var(--of-fg); }
.brief-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-actions .btn-add, .brief-actions .btn-ghost-sm { height: 42px; }
.brief-preview {
  margin-top: 14px; max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--of-in); border: 1px solid var(--of-inB); border-radius: 12px; padding: 14px;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.6; color: var(--of-f2);
}
.brief-extra { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 16px; border-radius: 14px; background: var(--of-cd2); box-shadow: inset 0 0 0 1px var(--of-ln); }
.extra-label { font-size: 14.5px; font-weight: 500; color: var(--of-fg); }
.extra-label strong { color: var(--of-goT); }
#evLog, #tmSet { height: 42px; padding: 0 18px; border-radius: 11px; }
.tomorrow-set { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--of-goT); overflow-wrap: anywhere; }

/* ============================================================
   DAILY TRACKER
   ============================================================ */
.tracker-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.tracker-list .task { margin-bottom: 8px; }
.btn-focus { height: 30px; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 800; flex: none; }
.ring-wrap { display: flex; flex-direction: column; align-items: center; }
.ring-label { font-size: 30px; font-weight: 700; }
.card.ring-wrap .card-title { color: var(--of-goT); }
.card.ring-wrap .stat-block ~ .stat-block .card-title { color: var(--of-pw); }
.stat-block { margin-top: 20px; }
.stat-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--of-ln); font-size: 14.5px; color: var(--of-fg); }
.stat-line .stat-num { font-weight: 700; }
.stat-link { margin-top: 12px; font-size: 15px; text-decoration: none; }
.wk-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.wk-col { text-align: center; }
.wk-bar { position: relative; height: 64px; overflow: hidden; background: var(--of-cd2); border: 1px solid var(--of-ln); border-radius: 10px; }
.wk-bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--of-go); border-radius: 8px 8px 0 0; }
.wk-col.today .wk-bar { border: 1px solid var(--of-go); }
.wk-col.none .wk-bar { opacity: .7; }
.wk-num { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--of-fg); }
.wk-day { font-size: 12.5px; color: var(--of-f2); }
.wk-foot { margin-top: 16px; font-size: 14px; color: var(--of-f2); }
.wk-foot strong { color: var(--of-fg); }

/* ============================================================
   MONEY IN
   ============================================================ */
.money-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.money-row > input[type="text"] { flex: 1; min-width: 150px; }
.money-amt { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--of-inB); background: var(--of-in); transition: border-color 160ms ease, box-shadow 160ms ease; }
.money-amt:focus-within { border-color: var(--of-actB); box-shadow: 0 0 0 3px rgba(92,164,169,0.28); }
.money-amt span { font-weight: 700; color: var(--of-f3); }
.money-amt input { width: 110px; border: none; outline: none; background: transparent; color: var(--of-fg); padding: 0; font-size: 15px; font-weight: 700; }
.money-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.m-stat { padding: 18px 20px; border-radius: 18px; background: var(--of-cd); box-shadow: var(--of-sh); }
.m-stat .stat-num { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--of-goT); }
.m-stat .stat-cap { margin-top: 2px; font-size: 13.5px; color: var(--of-f2); }
.m-bar { height: 4px; margin-top: 10px; overflow: hidden; background: var(--of-tr); border-radius: 999px; }
.m-bar i { display: block; height: 100%; background: var(--of-go); border-radius: 999px; }
.ladder-inputs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.ladder-inputs label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--of-fg); }
.ladder-summary { margin-bottom: 12px; font-size: 15px; line-height: 1.55; color: var(--of-f2); }
.ladder-summary strong { color: var(--of-fg); }
.ladder-bars { display: flex; align-items: stretch; gap: 6px; height: 150px; margin-top: 16px; padding-bottom: 2px; overflow-x: auto; }
.lb-col { flex: 1 0 28px; display: flex; flex-direction: column; align-items: center; }
.lb-track { position: relative; flex: 1; width: 100%; }
.lb-target { position: absolute; left: 0; right: 0; bottom: 0; border: 2px dashed var(--of-go); border-radius: 6px 6px 0 0; opacity: .5; }
.lb-col.now .lb-target { opacity: 1; }
.lb-actual { position: absolute; left: 4px; right: 4px; bottom: 0; background: var(--of-go); border-radius: 4px 4px 0 0; }
.lb-label { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--of-fg); }
.lb-year { min-height: 12px; font-size: 10.5px; color: var(--of-f2); }
.ladder-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--of-f2); }
.ladder-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -2px; }
.lg-target { border: 2px dashed var(--of-go); }
.lg-actual { background: var(--of-go); }
.m-row { display: grid; grid-template-columns: 64px 110px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--of-ln); font-size: 14.5px; color: var(--of-fg); }
.m-date { font-size: 13.5px; color: var(--of-f2); }
.m-amt { font-weight: 800; color: var(--of-goT); }
.m-src { overflow-wrap: anywhere; }
.m-note { display: block; font-size: 13px; color: var(--of-f2); }
.m-src-line { margin: -4px 0 8px; }

/* ============================================================
   DISTRACTION LOG + PARKING LOT
   ============================================================ */
.log-input-row { display: flex; gap: 8px; flex-wrap: wrap; }
.log-input-row input[type="text"] { flex: 1; min-width: 160px; }
.log-input-row input[type="number"] { width: 92px; }
.log-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.log-stat { padding: 20px; border-radius: 18px; background: var(--of-cd); box-shadow: var(--of-sh); text-align: center; }
.log-stat .stat-num { display: block; font-size: 30px; font-weight: 700; color: var(--of-co); }
.log-stat .stat-cap { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--of-fg); }
.log-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; padding: 11px 14px; border-radius: 12px; background: var(--of-cd2); box-shadow: inset 0 0 0 1px var(--of-ln); font-size: 15px; color: var(--of-fg); }
.log-row .log-min { font-weight: 700; }
.log-right { display: flex; align-items: center; gap: 12px; }
.log-del { border: none; background: transparent; color: var(--of-co); font-size: 14px; font-weight: 700; padding: 2px 6px; line-height: 1; opacity: .8; }
.log-del:hover { opacity: 1; }
.card:has(#ideaInput2) > .page-sub.tight { font-size: 15.5px; font-weight: 700; color: var(--of-fg); }
.idea-list { margin-top: 14px; }
.idea-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px 14px; border-radius: 12px; background: var(--of-cd2); box-shadow: inset 0 0 0 1px var(--of-ln); color: var(--of-fg); }
.idea-row.kept { box-shadow: inset 3px 0 0 var(--of-actB), inset 0 0 0 1px var(--of-ln); }
.idea-text { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.idea-date { display: block; font-size: 12.5px; color: var(--of-f2); }

/* ============================================================
   RPA LIBRARY
   ============================================================ */
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.lib-card { border-radius: 20px; background: var(--of-cd); box-shadow: var(--of-sh); }
.lib-head { padding: 22px 22px 14px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--of-pw); background: transparent !important; box-shadow: inset 0 -1px 0 var(--of-ln); }
.lib-list { padding: 14px 22px 20px; }
.lib-item { display: flex; gap: 10px; padding: 6px 0; font-size: 15px; font-weight: 500; color: var(--of-fg); }
.li-mark { flex: none; color: var(--of-go); }
.lib-card:has(.lib-head.peach) .li-mark { color: var(--of-teal); }
.lib-card:has(.lib-head.lavender) .li-mark { color: var(--of-co); }

/* ============================================================
   MY RPA SETUP
   ============================================================ */
.setup-role { display: flex; align-items: center; gap: 14px; }
.setup-role .ico { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; background: rgba(214,168,79,0.14); font-size: 20px; }
.setup-role .lbl { font-size: 18px; font-weight: 700; color: var(--of-fg); }
.pill-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(214,168,79,0.14); color: var(--of-goT); font-size: 14px; font-weight: 700; }
.pill .x { cursor: pointer; font-weight: 800; opacity: .75; }
.pill .x:hover { opacity: 1; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--of-ln); font-size: 15px; color: var(--of-fg); }
.set-row:last-child { border-bottom: none; }
.set-row input[type="number"] { width: 92px; }
.set-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--of-teal); cursor: pointer; }
.ov-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--of-ln); font-size: 14.5px; color: var(--of-fg); }
.ov-row .x { margin-left: auto; cursor: pointer; opacity: .7; font-weight: 800; }
.ov-row .x:hover { opacity: 1; }
.ov-cat { font-weight: 700; text-transform: capitalize; }

/* ============================================================
   ONBOARDING MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(4,10,18,0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal { width: 100%; max-width: 720px; max-height: 92vh; overflow-y: auto; padding: 40px 44px; border-radius: 24px; background: var(--of-cd); box-shadow: var(--of-sh), 0 30px 80px -24px rgba(0,0,0,0.6); }
body:not(.dark) .modal { background: #FFFFFF; }
body.dark .modal { background: #0E2133; }
.modal-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; }
.modal-dots .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--of-ln2); }
.modal-dots .dot.active { width: 22px; background: var(--of-actB); }
.step-title { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; text-align: center; color: var(--of-fg); }
.step-sub { margin: 8px 0 28px; font-size: 16px; line-height: 1.5; text-align: center; color: var(--of-f2); }
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.role-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 12px; border-radius: 18px; text-align: center; white-space: normal;
  background: var(--of-cd2); border: 2px solid var(--of-ln2);
}
.role-card:not(:disabled):hover { border-color: var(--of-actB); }
.role-card.selected { border-color: var(--of-actB); background: var(--of-act); box-shadow: 0 0 0 3px rgba(92,164,169,0.22); }
.role-icon { font-size: 32px; }
.role-label { font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--of-fg); }
.role-desc { font-size: 12.5px; line-height: 1.35; color: var(--of-f2); }
.step-actions { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.btn-primary { flex: 1; height: 50px; border-radius: 12px; font-size: 16px; }
.btn-ghost { flex: 1; height: 50px; }
.check-circle { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 99px; display: flex; align-items: center; justify-content: center; background: var(--of-grad-gold); color: var(--of-gold-ink); font-size: 30px; box-shadow: 0 10px 24px -14px rgba(214,168,79,0.8); }
.role-badge { text-align: center; font-size: 17px; font-weight: 800; margin-bottom: 16px; color: var(--of-fg); }
.rules { display: flex; flex-direction: column; gap: 8px; max-width: 360px; margin: 0 auto; }
.rule { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--of-f2); }
.rule strong { color: var(--of-fg); }
.rule-dot { width: 10px; height: 10px; border-radius: 99px; }
.rule-dot.rpa { background: var(--of-go); }
.rule-dot.support { background: var(--of-teal); }
.rule-dot.distract { background: var(--of-co); }

/* ---------- toasts ---------- */
.toast-wrap {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1100;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(560px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 12px; max-width: 100%; pointer-events: auto;
  background: var(--toast-bg); color: #F5F8FA; border-radius: 14px; padding: 11px 12px 11px 16px;
  font-size: 14.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 18px 40px -12px rgba(0,0,0,0.5);
  animation: toast-in .18s ease-out;
}
.toast span { flex: 1; }
.toast-btn { height: 34px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.toast-x { background: transparent; border: none; color: inherit; opacity: .75; font-size: 14px; padding: 2px 4px; }
.toast-x:hover { opacity: 1; }
.toast .toast-btn:focus-visible, .toast .toast-x:focus-visible { outline-color: #F5F8FA; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .atmos-stars, .nav-item.active, .nav-item.active > .nav-ico, .nav-item.active > .nav-text, .toast { animation: none; }
  button:not(:disabled):hover, button:not(:disabled):active { transform: none; }
  .score-fill, .bd-fill { transition: none; }
}

/* ============================================================
   RESPONSIVE
   The design hides the timer rail under 1180px. Revenue Focus keeps
   it on screen at every width (it lives inside OtimusFlow at about
   1024px), so the sidebar becomes the 76px icon rail instead.
   ============================================================ */
@media (max-width: 1180px) {
  .app { grid-template-columns: 76px minmax(0, 1fr) 272px; }
  .sidebar { padding: 20px 12px; }
  .brand, .nav-group, .nav-text, .stats-card, #darkLabel { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item.active > .nav-ico { animation: none; }
  .dark-toggle { padding: 0; }
  .main { padding: 36px 32px 72px; }
  .right-panel { padding: 16px 14px 24px; }
  .timer-display { font-size: 52px; }
  .tip-text { font-size: 20px; }
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tracker-grid { grid-template-columns: 1fr; }
  .role-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .ns-grid, .brief-grid { grid-template-columns: 1fr; }
  .money-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .sidebar { grid-row: 1 / span 2; }
  .main { grid-column: 2; grid-row: 1; padding: 24px 20px 64px; }
  .right-panel {
    grid-column: 2; grid-row: 2; flex-direction: row; align-items: stretch; gap: 12px;
    overflow-x: auto; overflow-y: hidden; padding: 10px 12px;
    box-shadow: inset 0 1px 0 var(--of-ln); scroll-snap-type: x proximity;
  }
  .right-panel > * { flex: 0 0 248px; scroll-snap-align: start; }
  .timer-card { padding: 14px; }
  .timer-display { font-size: 38px; margin-top: 10px; }
  .timer-foot, .breakdown-card { display: none; }
  .idea-card, .tip-card { padding: 14px; border-radius: 16px; background: var(--of-cd); box-shadow: var(--of-sh); }
  .tip-text { font-size: 17px; }
  .hero h1 { font-size: 40px; }
  .page-head h1 { font-size: 34px; }
  .lib-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .head-row { flex-direction: column; align-items: stretch; }
  .log-stats { grid-template-columns: 1fr; }
  .m-row { grid-template-columns: 54px 88px minmax(0, 1fr) auto; gap: 8px; }
  .role-grid { grid-template-columns: 1fr 1fr; }
}