/* The companion is decorative and local; the existing sync dashboard is unchanged. */
:root { --ink: #183245; --muted: #627884; --purple: #176276; --lavender: #e5f5f5; --line: #dce9ed; }
body { background: #dceff1; background-image: radial-gradient(ellipse at 50% 0%, #f0ffff, transparent 65%); }
.svg-defs { position: absolute; overflow: hidden; pointer-events: none; }
.phone { overflow-wrap: anywhere; }
.brandmark { background: #d9f2f0; }
.brandname { letter-spacing: .3px; font-size: 13px; }
.tagline, .hello p { color: #58717e; }
.hello h1 { font-size: 22px; }
.pet-card { background: #0c1729; padding: 16px; border: 1px solid #2d4557; border-radius: 24px; perspective: none; box-shadow: 0 16px 30px #112a3920; }
.pet-card::before, .pet-card::after { display: none; }
.focus-card { position: relative; z-index: 1; background: #142337; border: 1px solid #344a5c; border-top-color: #52737f; border-radius: 15px; padding: 16px; color: #edfafa; box-shadow: 0 6px 18px #030b1633; }
.focus-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.focus-heading strong { font-size: 16px; overflow-wrap: anywhere; }
.companion-label { color: #9cb9c5; font: 600 8px/1.5 "Segoe UI", sans-serif; letter-spacing: 1.3px; text-align: right; max-width: 110px; }
.focus-readout { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.today-label { display: block; color: #8fe9e6; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; }
.today-label span { color: #a0b6c4; font-size: 8px; letter-spacing: 1px; }
.today-timer { font: 500 clamp(25px, 7vw, 35px)/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.focus-state { display: flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; min-height: 44px; padding: 9px 10px; border: 1px solid #526e7d; border-radius: 9px; background: #1c3044; color: #c1d5df; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.is-focusing .focus-state { color: #8ff8ea; border-color: #468980; background: #173c43; }
#focusPetMessage { color: #aec4d0; font-size: 11px; line-height: 1.6; margin: 9px 0 0; }
.pet-level { color: #a6c4cd; background: transparent; margin: 7px 0 0; padding: 0; font-size: 9px; }
.cat-stage { position: relative; height: 235px; display: grid; justify-items: center; align-content: start; isolation: isolate; background: radial-gradient(ellipse at 50% 82%, #49edef70, #22b4cc22 38%, transparent 68%); }
.cat-stage::before { content: ""; position: absolute; z-index: -1; bottom: 28px; width: 85%; height: 50px; border-radius: 50%; background: radial-gradient(ellipse, #a4fff6 0%, #38dbe2 46%, #15627d 72%, transparent 74%); box-shadow: 0 10px 22px #20d8e535; }
.cat-stage::after { content: ""; position: absolute; bottom: 40px; width: 110px; height: 16px; border-radius: 50%; background: #08323f80; filter: blur(5px); }
.stage-orbit { position: absolute; bottom: 23px; width: 94%; height: 61px; border: 1px solid #66e9e57a; border-radius: 50%; }
.catbubble { position: relative; z-index: 1; width: 220px; height: 193px; flex: none; padding: 0; border: 0; border-radius: 45%; background: none; box-shadow: none; filter: none; transform: none; animation: companion-float 4s ease-in-out infinite; }
.cat-art { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes companion-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
.stage-caption { position: absolute; bottom: 0; color: #a0c6d0; font-size: 9px; letter-spacing: .5px; }
.is-happy .cat-eye { transform-box: fill-box; transform-origin: center; transform: scaleY(.5); }
/* Custom properties reach both SVG <use> instances, including their shadow trees. */
.is-happy { --cat-normal-mouth: 0; --cat-smile: 1; }
.is-angry { --cat-normal-mouth: 0; --cat-smile: 0; --cat-angry-mouth: 1; }
.is-angry .cat-eye { transform-box: fill-box; transform-origin: center; transform: scaleY(.78); }
#cat.is-angry, #floatCat.is-angry { animation: cat-angry-shiver .14s ease-in-out 12 alternate; }
@keyframes cat-angry-shiver { to { transform: translateX(3px) rotate(2deg); } }
.pet-stats { margin-top: 15px; gap: 12px; }
.pet-stat { background: #16283a; border-radius: 10px; }
.pet-statline { color: #b1cbd2; }
.pet-statline b { color: #d9f5f2; }
.mini-track { background: #294052; }
.mini-fill { background: #73d7d4; }
.mini-fill.mood { background: #99e7bd; }
.fish-flight { left: 40%; top: 65%; }
.primary { background: #19677a; box-shadow: 0 5px 12px #1a697720; }
.secondary, .rule-actions button, .note-entry button { background: #e9f5f5; color: #265d6d; }
.time-icon, .appicon.purple { background: #e9f5f5; }
.progress-fill { background: linear-gradient(90deg, #18697e, #60cfc8); }
.switch.on { background: #1d7f8a; }
.rule-copy, .screen-top > div { min-width: 0; }
.privacy { color: #607680; }
.preview-badge { color: #657985; }
.float-buddy { width: 88px; right: max(8px, calc((100vw - 460px)/2 - 5px)); gap: 0; }
.float-cat { width: 67px; height: 62px; border: 0; border-radius: 24px; background: #102135; box-shadow: 0 4px 14px #16374635; padding: 0 4px; animation: companion-float 4s ease-in-out infinite; }
.float-actions { gap: 4px; margin-top: 3px; }
.float-actions button { background: #102135; border-color: #47727f; color: #b7f8f2; min-height: 36px; min-width: 40px; padding: 5px; font-size: 10px; }
.bottomnav { border-color: #d9e9eb; background: #f8fffff2; }
.navitem.active { color: #176276; }
button:focus-visible, input:focus-visible { outline: 3px solid #13a6ac; outline-offset: 3px; }
.pet-card button:focus-visible, .float-buddy button:focus-visible { outline-color: #a1fff1; }
.screen-actions button, .sectionhead button, .rule-actions button, .note-entry button, .saved-item button { min-height: 44px; }
.note-entry:has(#reminderInput) { flex-wrap: wrap; }
#reminderInput { flex-basis: 100%; }
#reminderAt { flex: 1 1 160px; }
.toast { white-space: normal; width: max-content; text-align: center; }
@media (min-width: 700px) { .phone { background: #f5fafb; border-color: #ffffffb3; } }
@media (max-width: 350px) { .pet-card { padding: 11px; } .focus-card { padding: 12px; } .focus-state { font-size: 8px; padding: 8px; } .companion-label { max-width: 85px; font-size: 7px; } .screen-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Charcoal terminal theme. Shared tokens keep every companion surface cohesive. */
:root {
  color-scheme: dark;
  --bg: #0a0d0c;
  --surface: #101513;
  --surface-raised: #161d19;
  --ink: #e4ece7;
  --muted: #9aa99f;
  --green: #4ade80;
  --purple: var(--green);
  --lavender: #17281d;
  --line: #2a3530;
  --white: var(--surface);
  --shadow: 0 12px 35px #03060440;
  --mono: "SFMono-Regular", "Cascadia Code", "Liberation Mono", Consolas, monospace;
}
body {
  background: radial-gradient(ellipse at 50% 0, #17302050, transparent 55%), var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
::selection { background: #4ade8040; color: #effff4; }
button, input { font-family: inherit; }
button { transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s; }
.phone { background: var(--bg); padding-bottom: 120px; }
.statusbar { color: var(--muted); font-family: var(--mono); }
.status-icons { color: #83b394; font-size: 10px; }
.topline { border-bottom: 1px solid var(--line); margin-bottom: 22px; padding-bottom: 18px; gap: 10px; }
.brand { min-width: 0; }
.brandmark { background: #18271e; border: 1px solid #34533e; border-radius: 10px; flex-shrink: 0; }
.brandname { color: var(--ink); font-size: 12px; letter-spacing: .65px; line-height: 1.45; }
.tagline { color: var(--muted); font-size: 10px; }
.iconbutton, .closemodal { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; flex-shrink: 0; }
.hello { margin-bottom: 18px; }
.hello h1 { font-size: 22px; letter-spacing: -.8px; }
.hello p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.sample-note { color: #a3b4a9; background: #111a15; border-color: #2a3c30; border-left: 2px solid #4a8b60; border-radius: 8px; padding: 12px; line-height: 1.65; }
.sample-note strong { color: #c1d4c7; font-size: 10px; letter-spacing: .5px; }
.pet-card { background: #0e1511; border-color: #304436; border-radius: 16px; box-shadow: 0 0 28px #4ade8008; }
.focus-card { background: #131c16; border-color: #33463a; border-top-color: #46644f; border-radius: 10px; color: var(--ink); box-shadow: none; }
.focus-heading strong { font-size: 15px; }
.companion-label { color: #a0b7a8; font-family: var(--mono); font-size: 8px; letter-spacing: 1px; }
.today-label { color: var(--green); font-size: 10px; }
.today-label span { color: var(--muted); }
.today-timer { color: #e7f7ec; font-family: var(--mono); font-weight: 500; letter-spacing: -1.5px; }
.focus-state { background: #1a231d; border-color: #415146; color: #adbbb1; border-radius: 99px; font-size: 9px; }
.state-dot { background: #8b9a90; }
.is-focusing .focus-state { background: #193523; border-color: #467c54; color: #84eca4; }
.is-focusing .state-dot { background: var(--green); box-shadow: 0 0 8px #4ade8060; }
#focusPetMessage { color: #b0c1b5; font-size: 11px; }
.pet-level { color: #9eb0a4; font-size: 9px; }
.cat-stage { background: radial-gradient(ellipse at 50% 80%, #4ade8026, #227b3910 42%, transparent 68%); }
.cat-stage::before { height: 42px; background: radial-gradient(ellipse, #80d89b 0%, #2a6940 48%, #173421 70%, transparent 74%); box-shadow: 0 8px 24px #4ade8017; }
.cat-stage::after { background: #071d0f90; }
.stage-orbit { border-color: #549b6570; }
.stage-caption { color: #a4baac; font-size: 9px; letter-spacing: .3px; }
.pet-stat { background: #17221b; border: 1px solid #2a3b30; border-radius: 8px; }
.pet-statline { color: #a2b5a9; }
.pet-statline b { color: #d6ebdd; }
.mini-track, .progress, .rule-mini { background: #27342c; }
.mini-fill, .mini-fill.mood, .progress-fill, .rule-mini i, .rule-mini i.purplefill { background: #55b877; }
.mini-fill.mood { background: #8ac69c; }
.sectionhead { margin-top: 25px; }
.sectionhead h2 { font-size: 14px; letter-spacing: -.25px; }
.sectionhead button { color: var(--green); font-size: 10px; }
.screen-card, .rule-card, .notes-card, .monitor-setting { background: var(--surface); border-color: var(--line); border-radius: 12px; box-shadow: none; }
.screen-time { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.screen-time small { color: #a3b3a9; font-family: var(--mono); }
.screen-label, .goalrow, .rule-sub, .rule-limit, .monitor-copy span { color: var(--muted); }
.goalrow strong { color: #c3d0c8; }
.time-icon, .appicon, .appicon.purple, .break-icon { background: #1b2920; border: 1px solid #304537; border-radius: 10px; }
.progress { height: 6px; }
.primary { background: var(--green); color: #082011; border: 1px solid #71e899; border-radius: 99px; box-shadow: 0 0 18px #4ade8018; font-size: 11px; }
.secondary, .rule-actions button, .note-entry button { background: #1a251e; color: #b7e0c4; border: 1px solid #354b3d; border-radius: 8px; }
.secondary { font-size: 11px; }
.rule-time, .rule-limit { font-family: var(--mono); }
.rule-time { color: #d6e6dc; }
.rule-card { padding: 13px 11px; }
.rule-warning { color: #e0ba78; }
.rule-actions .remove-rule { color: #e4a5a9; background: #281c20; border-color: #543039; }
.break-card { background: #151f18; border-color: #304735; border-radius: 12px; }
.break-copy span { color: #a0b6a7; line-height: 1.55; }
.break-card button { background: #284331; color: #b6e8c5; border: 1px solid #43684f; border-radius: 8px; min-height: 44px; }
.switch { background: #3b4740; border: 1px solid #536257; height: 27px; width: 45px; }
.switch i { background: #d4dfd7; box-shadow: none; }
.switch.on { background: #3bba67; border-color: #6ade91; }
.switch.on i { background: #0a2815; }
.sync-copy, .sync-status, .device-total small { color: #a7b8ad; }
.sync-status { background: #18211b; border: 1px solid #324237; border-radius: 8px; padding: 10px 12px; }
.sync-status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8ca394; margin-right: 8px; vertical-align: 1px; }
.device-total { color: #d4e6da; }
.notes-card h2 { font-size: 13px; }
.note-entry input, .field input { color: var(--ink); background: #0b110d; border-color: #3a4b40; border-radius: 8px; font-family: var(--mono); min-height: 44px; }
input::placeholder { color: #8d9e93; opacity: 1; }
.field label { color: #bccdc2; line-height: 1.6; }
.field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #4ade8015; }
.saved-item { background: #18221b; border: 1px solid #2c3b31; border-radius: 8px; flex-wrap: wrap; }
.saved-item button { color: #e4a5a9; min-height: 36px; }
.saved-item small { color: #a8b8ae; }
.privacy-note { background: #18211b; border: 1px solid #2d3d32; color: #a6b9ad; border-radius: 8px; line-height: 1.65; }
.privacy, .preview-badge { color: #97a89d; }
.float-cat { background: #16261c; border: 1px solid #4a7258; border-radius: 15px; box-shadow: 0 4px 20px #03070455; }
.float-actions button { background: #17271c; border-color: #487053; color: #c1f0cf; box-shadow: 0 3px 10px #03070466; }
.bottomnav { background: #0e1511f5; border-color: #304035; padding-top: 8px; }
.navitem { color: #9eafa4; min-height: 44px; border-radius: 8px; padding: 5px; font-size: 10px; }
.navitem.active { color: #7fe6a0; background: #1b3022; box-shadow: inset 0 1px #487c57; }
.toast { color: #d9f3e2; background: #1c3224; border: 1px solid #4e795b; border-radius: 12px; box-shadow: 0 8px 24px #03070480; line-height: 1.6; }
.modal-backdrop, dialog::backdrop { background: #030805bf; backdrop-filter: blur(6px); }
.modal, dialog { color: var(--ink); background: #121a15; border: 1px solid #3a5142; border-radius: 16px; box-shadow: 0 20px 80px #03070499; max-height: calc(100dvh - 30px); overflow-y: auto; }
.modal-head h3, dialog h2 { font-size: 16px; line-height: 1.5; }
button:focus-visible, input:focus-visible, .pet-card button:focus-visible, .float-buddy button:focus-visible { outline: 2px solid #8ef0ae; outline-offset: 3px; }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled { opacity: .5; }
@media (hover: hover) {
  .primary:not(:disabled):hover { background: #7aeba0; box-shadow: 0 0 22px #4ade8030; }
  .secondary:not(:disabled):hover, .note-entry button:hover, .rule-actions button:hover, .iconbutton:hover, .closemodal:hover, .float-actions button:hover { background: #293d30; border-color: #648970; }
  .sectionhead button:hover { color: #a4f7bf; }
  .navitem:hover { background: #1b2a20; color: #c2e6ce; }
}
@media (min-width: 700px) {
  .phone { background: #0d120f; border-color: #2e3b32; border-radius: 22px; box-shadow: 0 24px 80px #02050366; }
  .bottomnav { border-radius: 0 0 22px 22px; }
  .modal-backdrop { align-items: center; }
}
@media (max-width: 380px) {
  .phone { padding-left: 12px; padding-right: 12px; }
  .brandname { font-size: 11px; }
  .brandmark { width: 36px; height: 38px; }
  .tagline { font-size: 9px; }
  .rule-card { gap: 8px; }
  .rule-actions { gap: 4px; }
  .rule-actions button { padding: 6px; }
  .appicon { width: 32px; height: 35px; font-size: 17px; }
  .today-timer { font-size: 26px; }
  .focus-readout { gap: 6px; }
}

/* A warm sculpted companion against the green terminal. Only controls catch input. */
.companion-settings { margin: 22px 0 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.companion-kicker { font-size: 10px; letter-spacing: 1.4px; color: var(--green); }
.companion-settings p { font-size: 11px; line-height: 1.7; color: #bdcfc2; }
.companion-settings > div { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.companion-settings button { min-height: 44px; padding: 8px 12px; border-radius: 8px; border: 1px solid #487053; background: #17271c; color: #c1f0cf; font-size: 11px; }
.companion-settings small { display: block; font-size: 10px; color: var(--muted); line-height: 1.7; }
.float-buddy { left: 0; top: 0; right: auto; bottom: auto; width: 180px; gap: 0; pointer-events: none; visibility: hidden; }
.float-cat { width: 180px; height: 153px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 45%; animation: none; pointer-events: auto; touch-action: manipulation; }
.roaming-art { display: block; width: 100%; height: 100%; transform: scaleX(var(--facing, 1)); overflow: visible; filter: drop-shadow(0 5px 4px #02070440); }
.float-actions { display: flex; justify-content: center; pointer-events: none; margin-top: -1px; }
.float-actions button { pointer-events: auto; min-height: 44px; min-width: 58px; touch-action: manipulation; }
.cat-tail { transform-origin: 183px 137px; animation: tail-sway 3.4s ease-in-out infinite; }
.cat-body { transform-origin: 125px 140px; animation: cat-breathe 4s ease-in-out infinite; }
.leg { transform-box: view-box; transform-origin: 110px 145px; }
.leg-back { transform-origin: 172px 149px; }
.is-walking .leg { animation: paw-step .7s ease-in-out infinite alternate; }
.is-walking .leg-far.leg-front, .is-walking .leg-near.leg-back { animation-delay: -.7s; }
.is-walking .cat-body { animation: walking-bob .7s ease-in-out infinite; }
.happy-eyes, .cat-affection { opacity: 0; }
.angry-brows, .angry-mouth { opacity: 0; transition: opacity .12s ease; }
.is-happy .roam-eyes { opacity: 0; }
.is-happy .happy-eyes, .is-happy .cat-affection { opacity: 1; }
.is-happy .roam-head { transform-origin: 100px 100px; transform: rotate(-7deg); }
.is-happy .cat-affection { animation: affection 1s ease-in-out infinite alternate; }
.is-angry .roam-eyes { opacity: .28; }
.is-angry .angry-brows, .is-angry .angry-mouth { opacity: 1; }
.is-angry .happy-eyes, .is-angry .cat-affection { opacity: 0; }
.is-angry .roam-head { transform-origin: 100px 100px; animation: angry-head  .16s ease-in-out infinite alternate; }
.is-angry .cat-tail { animation: angry-tail .18s ease-in-out infinite alternate; }
.float-buddy:focus-within .cat-tail, .float-buddy:hover .cat-tail { animation-duration: 5s; }
body:has(#catPause[aria-pressed="true"]) .float-buddy * { animation-play-state: paused; }
@keyframes tail-sway { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
@keyframes cat-breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.018); } }
@keyframes walking-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes paw-step { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes affection { to { transform: translateY(-5px); opacity: .55; } }
@keyframes angry-head { to { transform: rotate(5deg) translateY(-1px); } }
@keyframes angry-tail { to { transform: rotate(15deg); } }
@media (max-width: 600px) { .float-buddy { width: 140px; } .float-cat { width: 140px; height: 119px; } }
@media (prefers-reduced-motion: reduce) { .float-buddy *, .roaming-art, #cat.is-angry, #floatCat.is-angry { animation: none !important; transition: none !important; } }
.float-buddy.is-sleeping * { animation-play-state: paused !important; }