:root { --ink:#f9f4e8; --muted:#bdb5cc; --night:#100d21; --plum:#201735; --panel:rgba(38,28,58,.78); --gold:#e8c982; --sage:#9dc4a8; --violet:#a58bd4; --line:rgba(255,255,255,.1); color-scheme:dark; font-family:"DM Sans",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 50% -10%,#4a3261 0,#20162f 28%,#100d21 65%); color:var(--ink); }
button,a { font:inherit; }
button { color:inherit; }
.app-shell { width:min(100%,760px); min-height:100vh; margin:auto; position:relative; padding:0 18px calc(94px + env(safe-area-inset-bottom)); overflow-x:hidden; }
.app-shell::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px); background-size:51px 47px; mask-image:linear-gradient(#000,transparent 65%); }
.topbar { height:86px; display:grid; grid-template-columns:48px 1fr 48px; align-items:center; position:relative; z-index:2; }
.brand { text-align:center; }.brand h1,.world h2 { font-family:Marcellus,serif; font-weight:400; margin:2px 0 0; letter-spacing:.02em; }.brand h1 { font-size:25px; }
.eyebrow { font-size:9px; font-weight:700; letter-spacing:.22em; color:var(--gold); }
.icon-button { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.055); cursor:pointer; }
.avatar { display:grid; place-items:center; width:32px; height:32px; margin:auto; border-radius:50%; background:linear-gradient(145deg,#ab8dc7,#5d496f); font-size:18px; }.sparkle { color:var(--gold); font-size:20px; }
main { display:grid; gap:20px; }.screen { display:none; }.screen.active-screen { display:grid; }.balance-card,.world,.schedule-card { border:1px solid var(--line); box-shadow:0 18px 45px rgba(4,2,12,.22); }
.balance-card { padding:18px; border-radius:22px; background:linear-gradient(135deg,rgba(101,77,120,.3),rgba(32,25,49,.82)); }
.balance-copy { display:flex; justify-content:space-between; align-items:end; }.balance-copy h2 { font:400 23px Marcellus,serif; margin:4px 0 0; }.xp-total { color:var(--gold); font-weight:700; }.xp-total small { color:var(--muted); font-weight:500; }
.progress-track { margin:14px 0 10px; height:8px; background:#161126; border:1px solid rgba(255,255,255,.07); border-radius:10px; position:relative; }.progress-track span { display:block; width:0; height:100%; border-radius:10px; background:linear-gradient(90deg,#8cb89b,#ecd18b); box-shadow:0 0 14px rgba(232,201,130,.45); transition:width .35s ease; }.progress-track i { font-style:normal; position:absolute; left:calc(0% - 8px); top:-9px; color:#fff2bc; font-size:17px; transition:left .35s ease; }.balance-card p { margin:0; color:var(--muted); font-size:12px; }
.world { border-radius:28px; padding:19px 12px 13px; background:linear-gradient(180deg,rgba(58,42,77,.72),rgba(19,18,35,.93)); overflow:hidden; }
.world-heading { padding:0 7px 14px; display:flex; justify-content:space-between; align-items:end; }.world h2 { font-size:25px; }.weather { font-size:11px; color:var(--muted); padding-bottom:4px; }
.map { height:470px; position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(230,217,245,.12); background:radial-gradient(circle at 50% 51%,rgba(236,209,141,.18),transparent 9%),radial-gradient(ellipse at 25% 75%,#263b36 0,transparent 36%),radial-gradient(ellipse at 82% 20%,#382b53 0,transparent 34%),linear-gradient(165deg,#27213d,#182c32 55%,#151424); }
.map::before,.map::after { content:""; position:absolute; border-radius:50%; filter:blur(1px); }.map::before { width:190px; height:110px; bottom:-42px; left:10px; background:#365044; box-shadow:190px -20px 0 #2c3b37; }.map::after { width:150px; height:80px; top:125px; right:-70px; background:rgba(91,73,112,.3); }
.map-sky span { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff6c7; box-shadow:0 0 9px 2px rgba(255,240,174,.6); }.map-sky span:nth-child(1){top:9%;left:29%}.map-sky span:nth-child(2){top:18%;right:22%}.map-sky span:nth-child(3){top:43%;left:50%}
.paths i { position:absolute; left:50%; top:50%; width:42%; height:1px; background:linear-gradient(90deg,rgba(233,211,152,.45),transparent); transform-origin:left; }.paths i:nth-child(1){transform:rotate(-42deg)}.paths i:nth-child(2){transform:rotate(25deg)}.paths i:nth-child(3){transform:rotate(137deg)}
.realm { position:absolute; width:118px; min-height:85px; padding:7px 5px; border:1px solid rgba(255,255,255,.13); border-radius:19px; background:rgba(21,19,37,.76); backdrop-filter:blur(9px); cursor:pointer; box-shadow:0 9px 24px rgba(2,2,9,.34); transition:.2s ease; z-index:2; }.realm:hover,.realm:focus-visible { transform:translateY(-4px) scale(1.03); outline:none; border-color:rgba(232,201,130,.65); box-shadow:0 0 28px rgba(232,201,130,.18); }.realm-art { font-size:25px; display:block; filter:saturate(.7); }.realm-name { display:block; font:400 12px Marcellus,serif; margin-top:3px; }.realm small { display:block; margin-top:2px; color:var(--gold); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.realm-vitality{top:31px;left:13px}.realm-spirit{top:25px;right:15px}.realm-sanctuary{top:181px;left:6px}.realm-life{top:176px;right:7px}.realm-creation{bottom:24px;left:19px}.realm-connection{bottom:29px;right:13px}
.map-heart { position:absolute; inset:calc(50% - 21px) auto auto calc(50% - 21px); display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#d4bc82; color:#342a43; box-shadow:0 0 30px rgba(232,201,130,.5); z-index:3; }
.map-hint { color:#8f899d; text-align:center; font-size:11px; margin:12px 0 0; }
.next-section { display:grid; gap:12px; }.whats-next { border:1px solid rgba(245,218,153,.34); border-radius:22px; background:linear-gradient(110deg,#786094,#493d67); padding:17px; display:grid; grid-template-columns:46px 1fr 32px; align-items:center; text-align:left; cursor:pointer; box-shadow:0 12px 30px rgba(11,5,22,.32); }.next-orb { display:grid; place-items:center; width:38px;height:38px;border-radius:50%;background:#f0d99c;color:#493d67;box-shadow:0 0 20px rgba(240,217,156,.42)}.whats-next small { color:#e8d9b0; font-size:8px; letter-spacing:.18em; }.whats-next strong,.whats-next em { display:block; }.whats-next strong { font:400 20px Marcellus,serif; }.whats-next em { font-size:11px;color:#d8d0df;font-style:normal;margin-top:2px}.whats-next b { font-size:25px;font-weight:400;color:#f0d99c;text-align:center}.whats-next:hover { filter:brightness(1.09); }
.schedule-grid { display:grid; gap:10px; }.schedule-card { min-height:116px; padding:16px; border-radius:20px; background:var(--panel); display:grid; grid-template-columns:40px 1fr auto; gap:11px; align-items:start; position:relative; }.card-icon { width:36px;height:36px;border-radius:12px;background:rgba(157,196,168,.12);display:grid;place-items:center;color:var(--sage)}.schedule-card small { color:var(--gold);letter-spacing:.15em;font-size:8px;font-weight:700}.schedule-card h3 { margin:4px 0 7px;font:400 16px Marcellus,serif}.schedule-card p,.schedule-card time { margin:0;color:var(--muted);font-size:11px}.schedule-card time { color:var(--sage);display:block;margin-top:3px;font-weight:600}.dismiss { background:none;border:0;color:#8f899d;font-size:20px;cursor:pointer;padding:0 4px}.schedule-card.hidden { display:none; }
.bottom-nav { position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,760px); height:76px; padding:8px 18px calc(8px + env(safe-area-inset-bottom)); display:grid;grid-template-columns:repeat(4,1fr);background:rgba(16,13,33,.9);backdrop-filter:blur(18px);border-top:1px solid var(--line)}.bottom-nav a { color:#858091;text-decoration:none;text-align:center;display:grid;place-content:center;gap:3px;font-size:18px}.bottom-nav b { font-size:10px;font-weight:500}.bottom-nav .active { color:var(--gold) }.toast { position:fixed;left:50%;bottom:88px;transform:translate(-50%,12px);padding:10px 16px;border-radius:30px;background:#f5e8c1;color:#2e2540;font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:20;max-width:min(90vw,360px);white-space:normal;text-align:center}.toast.show { opacity:1;transform:translate(-50%,0) }
@media (min-width:600px) { .app-shell{padding-inline:26px}.map{height:510px}.realm{width:150px;min-height:92px}.realm-name{font-size:14px}.realm-vitality{left:35px}.realm-spirit{right:38px}.realm-sanctuary{left:50px}.realm-life{right:47px}.realm-creation{left:76px}.realm-connection{right:69px}.schedule-grid{grid-template-columns:1fr 1fr}.schedule-card{min-height:132px} }
@media (max-width:370px) { .app-shell{padding-inline:10px}.map{height:450px}.realm{width:107px}.realm-name{font-size:11px}.realm-vitality{left:7px}.realm-spirit{right:7px}.realm-creation{left:8px}.realm-connection{right:8px} }
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.realm-page { display:grid; gap:16px; padding:5px 0 22px; min-height:calc(100vh - 105px); }
.back-button { justify-self:start; border:1px solid var(--line); border-radius:30px; padding:9px 14px 9px 11px; background:rgba(255,255,255,.055); color:var(--muted); cursor:pointer; }.back-button span { color:var(--gold); margin-right:7px; font-size:17px; }.back-button:hover,.back-button:focus-visible { border-color:rgba(232,201,130,.55); color:var(--ink); outline:none; }
.realm-page-heading { text-align:center; padding:9px 12px 5px; }.realm-page-glyph { display:grid; place-items:center; width:74px; height:74px; margin:0 auto 13px; border-radius:24px; font-size:38px; background:linear-gradient(145deg,rgba(157,196,168,.22),rgba(165,139,212,.13)); border:1px solid rgba(232,201,130,.24); box-shadow:0 0 38px rgba(165,139,212,.16); }.realm-page-heading h2 { margin:5px 0 6px; font:400 32px Marcellus,serif; }.realm-page-heading p { margin:0; color:var(--muted); font-size:12px; }
.realm-level-card { padding:18px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(135deg,rgba(101,77,120,.3),rgba(32,25,49,.82)); }.realm-level-card h3 { margin:4px 0 0; font:400 22px Marcellus,serif; }.realm-level-card>p { color:var(--muted); font-size:12px; margin:0; }
.developer-controls { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:14px 16px; border:1px dashed rgba(232,201,130,.3); border-radius:18px; background:rgba(232,201,130,.055); }.developer-controls p { margin:3px 0 0; color:var(--muted); font-size:10px; }.xp-buttons { display:flex; gap:7px; }.xp-buttons button { border:1px solid rgba(232,201,130,.28); border-radius:12px; padding:9px 10px; color:var(--gold); background:rgba(20,16,35,.65); font-size:11px; font-weight:700; cursor:pointer; }.xp-buttons button:hover,.xp-buttons button:focus-visible { background:rgba(232,201,130,.16); outline:none; border-color:var(--gold); }
.artwork-placeholder { position:relative; min-height:350px; overflow:hidden; display:grid; place-items:center; border:1px solid rgba(232,201,130,.16); border-radius:28px; background:radial-gradient(circle at 50% 30%,rgba(196,167,219,.2),transparent 20%),linear-gradient(165deg,#292140,#172c30 68%,#111120); box-shadow:inset 0 -40px 70px rgba(5,4,13,.35); }.artwork-placeholder::before { content:""; position:absolute; inset:0; opacity:.35; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px); background-size:58px 53px; }.placeholder-moon { position:absolute; top:35px; right:45px; color:#f2dfa6; font-size:42px; text-shadow:0 0 23px rgba(242,223,166,.5); }.placeholder-land { position:absolute; inset:auto 0 0; height:120px; }.placeholder-land span { position:absolute; bottom:-55px; width:220px; height:140px; border-radius:50%; background:#2d453b; }.placeholder-land span:nth-child(1){left:-55px}.placeholder-land span:nth-child(2){left:24%;bottom:-80px;background:#243b35}.placeholder-land span:nth-child(3){right:-65px;background:#293b39}.placeholder-copy { position:relative; z-index:2; width:min(82%,310px); text-align:center; padding:25px 22px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:rgba(18,16,33,.66); backdrop-filter:blur(10px); }.placeholder-copy>span { color:var(--gold); font-size:20px; }.placeholder-copy strong { display:block; margin:8px 0 5px; font:400 18px Marcellus,serif; }.placeholder-copy p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.locked-hint { display:flex; gap:12px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.035); }.locked-hint>span { color:var(--gold); font-size:24px; }.locked-hint strong { font:400 14px Marcellus,serif; }.locked-hint p { margin:2px 0 0; color:var(--muted); font-size:10px; }
body.realm-open .topbar,body.realm-open .bottom-nav { display:none; } body.realm-open .app-shell { padding-bottom:20px; }
@media (max-width:390px) { .developer-controls { align-items:flex-start; flex-direction:column; }.xp-buttons { width:100%; }.xp-buttons button { flex:1; } }

/* Today screen */
.today-intro { padding:4px 3px 0; }.today-intro h2 { margin:3px 0 0; font:400 31px Marcellus,serif; }.today-intro p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.daily-card { border:1px solid var(--line); border-radius:22px; padding:17px; background:linear-gradient(145deg,rgba(52,40,71,.88),rgba(27,23,42,.91)); box-shadow:0 15px 35px rgba(4,2,12,.18); }.daily-card h2 { margin:3px 0 0; font:400 21px Marcellus,serif; }.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }.section-count { color:var(--gold); font-size:11px; font-weight:700; white-space:nowrap; }
.today-next { border-color:rgba(232,201,130,.3); background:radial-gradient(circle at 85% 10%,rgba(214,186,130,.15),transparent 30%),linear-gradient(135deg,#493a60,#28223d); }.mode-toggle { padding:3px; display:flex; border-radius:12px; background:rgba(11,8,23,.35); }.mode-toggle button { border:0; border-radius:9px; padding:7px 9px; background:transparent; color:#a8a1b4; font-size:9px; cursor:pointer; }.mode-toggle .active { color:#332b42; background:var(--gold); font-weight:700; }.next-mode { display:none; margin-top:17px; }.next-mode.active-next-mode { display:block; }.current-action { display:flex; align-items:center; gap:13px; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:17px; background:rgba(14,12,27,.3); }.action-glyph { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border-radius:14px; background:rgba(232,201,130,.13); font-size:24px; }.current-action small { display:block; color:var(--gold); font-size:8px; letter-spacing:.13em; }.current-action strong { display:block; font:400 18px Marcellus,serif; margin-top:3px; }.current-action p { margin:2px 0 0; color:var(--muted); font-size:10px; }.action-buttons { display:grid; grid-template-columns:1fr 2fr; gap:9px; margin-top:11px; }.action-buttons button { border-radius:13px; padding:11px; cursor:pointer; font-weight:700; font-size:12px; }.secondary-action { border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--muted); }.primary-action { border:1px solid #dbc386; background:var(--gold); color:#312940; }.primary-action span { margin-left:6px; }
.choice-prompt { margin:0 0 8px; color:var(--muted); font-size:10px; }.task-choice { width:100%; display:grid; grid-template-columns:32px 1fr 20px; align-items:center; gap:9px; text-align:left; border:1px solid var(--line); border-radius:15px; padding:11px; margin-top:7px; background:rgba(10,8,22,.28); color:var(--ink); cursor:pointer; }.task-choice>span { color:var(--gold); font-size:18px; }.task-choice strong,.task-choice small { display:block; }.task-choice strong { font-size:12px; }.task-choice small { color:var(--muted); font-size:9px; margin-top:2px; }.task-choice b { color:var(--gold); font-weight:400; }.two-more { display:block; margin:11px auto 0; border:0; background:none; color:var(--gold); font-size:10px; cursor:pointer; }
.mini-progress { height:6px; margin:12px 0 17px; border-radius:10px; background:#151123; overflow:hidden; }.mini-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--sage),var(--gold)); border-radius:10px; transition:width .3s; }.routine-group+.routine-group { margin-top:15px; }.routine-group h3 { display:flex; align-items:center; gap:7px; margin:0 0 7px; color:#d8d0df; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.routine-group h3 span { color:var(--gold); font-size:14px; }.routine-list { display:grid; gap:5px; }.routine-item { display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:8px; min-height:37px; padding:7px 9px; border-radius:12px; border:1px solid transparent; color:#9b95a6; font-size:11px; }.routine-item .state-dot { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; border:1px solid #5d5768; font-size:10px; }.routine-item.completed { color:#8faaa0; }.routine-item.completed .state-dot { border-color:#6e9b89; background:rgba(110,155,137,.18); color:#9dccba; }.routine-item.current { border-color:rgba(232,201,130,.27); background:rgba(232,201,130,.08); color:var(--ink); }.routine-item.current .state-dot { border-color:var(--gold); box-shadow:0 0 10px rgba(232,201,130,.25); color:var(--gold); }.routine-item small { color:#817b8c; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }.optional-group>p { margin:7px 2px 0; color:#777181; font-size:9px; }
.bonus-indicator { border:1px solid rgba(232,201,130,.2); border-radius:20px; padding:6px 9px; color:#a79a7b; font-size:9px; white-space:nowrap; }.bonus-indicator.earned { color:#332b42; background:var(--gold); }.food-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px; }.food-item { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--line); border-radius:13px; padding:10px; background:rgba(15,12,28,.28); color:var(--ink); cursor:pointer; }.food-item strong { font-size:11px; }.food-item small { color:#8d8799; font-size:8px; text-transform:uppercase; }.food-item[data-state="Eaten"] small { color:var(--sage); }.food-item[data-state="Swapped"] small { color:var(--violet); }.food-item[data-state="Skipped"] { opacity:.65; }.card-note { margin:10px 0 0; color:#777181; font-size:9px; }
.hydration-row { display:grid; grid-template-columns:56px 1fr; gap:13px; align-items:center; margin-top:15px; }.water-orb { width:54px; height:54px; display:grid; place-items:center; position:relative; overflow:hidden; border:1px solid rgba(135,189,209,.25); border-radius:50%; background:#19182b; }.water-orb span { position:absolute; inset:auto 0 0; height:0; background:rgba(94,164,190,.38); transition:height .3s; }.water-orb b { position:relative; font-size:21px; }.hydration-main>strong { font-size:11px; }.hydration-main .mini-progress { margin:7px 0; }.quick-add { display:flex; flex-wrap:wrap; gap:6px; }.quick-add button,.electrolyte-row button { border:1px solid rgba(121,174,194,.24); border-radius:10px; padding:7px 9px; background:rgba(91,148,171,.1); color:#a8d3e0; font-size:9px; cursor:pointer; }.electrolyte-row { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:9px; margin-top:14px; padding:11px; border-radius:13px; background:rgba(255,255,255,.035); }.electrolyte-row>span { color:#e6d384; }.electrolyte-row strong,.electrolyte-row small { display:block; }.electrolyte-row strong { font-size:10px; }.electrolyte-row small { color:var(--muted); margin-top:2px; font-size:9px; }
.today-schedule { display:grid; gap:10px; }.support-card { display:grid; grid-template-columns:43px 1fr; gap:12px; }.large-card-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:rgba(157,196,168,.1); color:var(--sage); font-size:19px; }.support-card p { margin:5px 0 9px; color:var(--muted); font-size:10px; }.support-card aside { padding:9px 11px; border-radius:11px; background:rgba(255,255,255,.035); color:#a9a2b4; font-size:9px; line-height:1.45; }.support-card aside b { color:var(--gold); margin-right:4px; }
.appointment-card[hidden],.appointment-card[data-calendar-state="hidden"] { display:none !important; }
.appointment-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.appointment-card[data-calendar-state="ready"] .appointment-actions { display:none; }
.calendar-connect,.calendar-retry { border:1px solid rgba(232,201,130,.35); border-radius:11px; padding:8px 10px; background:rgba(232,201,130,.1); color:var(--gold); font-size:10px; font-weight:700; cursor:pointer; }
.appointment-card[data-calendar-state="loading"] #world-appointment-time,.appointment-card[data-calendar-state="disconnected"] #world-appointment-time,.appointment-card[data-calendar-state="error"] #world-appointment-time { display:none; }
.appointment-buffers { margin-top:8px; padding:9px 11px; border-radius:11px; background:rgba(255,255,255,.035); color:#a9a2b4; font-size:9px; line-height:1.45; }
.calendar-portal { background:radial-gradient(circle at 20% 20%,rgba(226,193,119,.16),transparent 28%),linear-gradient(135deg,#3f3850,#221d32); }
.bottom-nav a { cursor:pointer; }
@media (min-width:600px) { .today-schedule { grid-template-columns:1fr 1fr; }.food-list { grid-template-columns:repeat(3,1fr); } }

/* Tasks */
.tasks-header { display:flex; justify-content:space-between; gap:16px; align-items:end; padding:4px 2px 2px; }.tasks-header h2 { margin:3px 0 0; font:400 31px Marcellus,serif; }.tasks-header p { margin:4px 0 0; max-width:390px; color:var(--muted); font-size:11px; }.add-task-button { flex:0 0 auto; border:1px solid rgba(232,201,130,.35); border-radius:15px; padding:11px 13px; background:linear-gradient(135deg,#80669a,#55456d); color:var(--ink); font-size:11px; font-weight:700; cursor:pointer; box-shadow:0 8px 22px rgba(9,5,18,.25); }.add-task-button span { color:var(--gold); font-size:15px; }
.task-filters { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:12px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.035); }.task-filters label>span,.field>span { display:block; margin:0 0 5px 2px; color:#9992a4; font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.task-filters select,.field input,.field select,.field textarea { width:100%; border:1px solid var(--line); border-radius:11px; padding:9px 10px; background:#1a1529; color:var(--ink); font:inherit; font-size:11px; outline:none; }.task-filters select:focus,.field input:focus,.field select:focus,.field textarea:focus { border-color:rgba(232,201,130,.55); }.field textarea { resize:vertical; }
.task-groups { display:grid; gap:17px; }.task-group-heading { display:flex; justify-content:space-between; align-items:center; margin:0 2px 7px; }.task-group-heading h3 { margin:0; font:400 15px Marcellus,serif; }.task-group-heading span { color:#898393; font-size:9px; }.task-list { display:grid; gap:8px; }.task-card { border:1px solid var(--line); border-radius:17px; padding:13px; background:linear-gradient(145deg,rgba(48,38,64,.84),rgba(27,23,41,.9)); }.task-card-top { display:grid; grid-template-columns:1fr auto; gap:10px; }.task-card h4 { margin:0; font:500 13px "DM Sans",sans-serif; }.task-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }.task-badge { padding:4px 6px; border-radius:8px; background:rgba(255,255,255,.05); color:#aaa3b5; font-size:8px; }.task-badge.realm { color:var(--sage); }.task-badge.priority-high { color:#f0b2a7; background:rgba(194,100,91,.1); }.task-status { align-self:start; color:var(--gold); font-size:8px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }.task-note { margin:9px 0 0; padding:8px 9px; border-left:2px solid rgba(165,139,212,.5); color:#aaa3b5; background:rgba(165,139,212,.06); font-size:9px; }.task-meta { display:flex; gap:11px; margin-top:9px; color:#827c8d; font-size:8px; }.task-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }.task-actions button { border:1px solid var(--line); border-radius:9px; padding:7px 8px; background:rgba(255,255,255,.035); color:#aaa3b5; font-size:8px; cursor:pointer; }.task-actions .start-task { color:var(--gold); border-color:rgba(232,201,130,.25); }.task-actions .complete-task { color:var(--sage); border-color:rgba(157,196,168,.24); }.task-actions .delete-task { margin-left:auto; color:#b48c91; }.empty-tasks { margin:0; padding:16px; border:1px dashed var(--line); border-radius:15px; color:#777181; text-align:center; font-size:10px; }
.modal-backdrop { position:fixed; z-index:50; inset:0; display:grid; place-items:end center; padding:18px; background:rgba(7,5,15,.74); backdrop-filter:blur(7px); }.modal-backdrop[hidden] { display:none; }.task-modal-card { width:min(100%,560px); max-height:90vh; overflow:auto; position:relative; padding:22px; border:1px solid rgba(232,201,130,.2); border-radius:25px; background:linear-gradient(150deg,#31263f,#181424); box-shadow:0 30px 80px rgba(0,0,0,.45); }.task-modal-card h2 { margin:4px 0 14px; font:400 25px Marcellus,serif; }.modal-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.04); color:var(--muted); font-size:19px; cursor:pointer; }.capture-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:14px; border-radius:12px; background:rgba(8,6,17,.35); }.capture-tabs button { border:0; border-radius:9px; padding:8px; background:transparent; color:#918a9b; font-size:10px; cursor:pointer; }.capture-tabs .active { background:rgba(232,201,130,.15); color:var(--gold); }.task-modal-card form { display:grid; gap:11px; }.task-modal-card #full-task-fields { grid-template-columns:1fr 1fr; gap:10px; }.task-modal-card #full-task-fields:not([hidden]) { display:grid; }.full-width { grid-column:1/-1; }.check-field { display:flex; align-items:center; gap:8px; color:#aaa3b5; font-size:10px; }.save-task-button { width:100%; border:1px solid #e1c880; border-radius:13px; padding:11px; background:var(--gold); color:#30283e; font-weight:700; cursor:pointer; }.duplicate-warning { padding:12px; border:1px solid rgba(222,157,125,.32); border-radius:13px; background:rgba(167,89,71,.09); }.duplicate-warning strong { color:#efb8a4; font-size:11px; }.duplicate-warning p { margin:4px 0; font:400 14px Marcellus,serif; }.duplicate-warning span { display:block; color:#aaa3b5; font-size:9px; }.duplicate-warning button { margin-top:9px; border:1px solid rgba(239,184,164,.32); border-radius:9px; padding:7px 9px; background:transparent; color:#efb8a4; font-size:9px; cursor:pointer; }.small-modal { max-width:430px; }
@media (min-width:600px) { .modal-backdrop { place-items:center; }.task-list { grid-template-columns:1fr 1fr; } }
@media (max-width:390px) { .tasks-header { align-items:flex-start; flex-direction:column; }.add-task-button { width:100%; }.task-modal-card #full-task-fields:not([hidden]) { grid-template-columns:1fr; }.full-width { grid-column:auto; } }
.task-badge.realm-tag { color:var(--sage); }

/* Spiritual & wellbeing trackers */
.quick-logging { display:flex; align-items:center; justify-content:space-between; gap:14px; }.quick-logging h2 { margin:3px 0 0; }.quick-logging p { margin:3px 0 0; color:var(--muted); font-size:9px; }.quick-logging>div:last-child { display:flex; gap:7px; }.quick-logging button,.tracker-hero>button { border:1px solid rgba(232,201,130,.25); border-radius:11px; padding:9px 10px; background:rgba(232,201,130,.08); color:var(--gold); font-size:9px; cursor:pointer; }.quick-logging button span { font-size:13px; }
.tracker-portals { display:grid; gap:11px; }.tracker-portal { width:100%; display:grid; grid-template-columns:58px 1fr 25px; gap:13px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:23px; text-align:left; color:var(--ink); cursor:pointer; box-shadow:0 15px 35px rgba(4,2,12,.2); }.spirit-portal { background:radial-gradient(circle at 20% 20%,rgba(168,133,203,.2),transparent 28%),linear-gradient(135deg,#3d2d51,#211a33); }.vitality-portal { background:radial-gradient(circle at 20% 20%,rgba(126,180,143,.17),transparent 28%),linear-gradient(135deg,#293e3a,#1d2530); }.portal-glyph { display:grid; place-items:center; width:54px; height:54px; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:rgba(255,255,255,.055); font-size:28px; }.tracker-portal small { color:var(--gold); font-size:8px; letter-spacing:.14em; }.tracker-portal h2 { margin:4px 0 3px; font:400 20px Marcellus,serif; }.tracker-portal p { margin:0; color:var(--muted); font-size:10px; }.tracker-portal b { color:var(--gold); font-size:20px; font-weight:400; }
.tracker-screen { align-content:start; }.tracker-hero { display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:14px; padding:20px; border:1px solid var(--line); border-radius:25px; }.spiritual-hero { background:radial-gradient(circle at 12% 30%,rgba(174,137,210,.22),transparent 25%),linear-gradient(135deg,#3c2b50,#211a32); }.wellbeing-hero { background:radial-gradient(circle at 12% 30%,rgba(130,186,147,.2),transparent 25%),linear-gradient(135deg,#283f3a,#1d2630); }.tracker-hero-glyph { display:grid; place-items:center; width:60px; height:60px; border-radius:19px; background:rgba(255,255,255,.07); font-size:31px; }.tracker-hero h2 { margin:4px 0 3px; font:400 24px Marcellus,serif; }.tracker-hero p { margin:0; color:var(--muted); font-size:10px; }
.activity-history { display:grid; gap:8px; margin-top:14px; }.activity-entry { display:grid; grid-template-columns:39px 1fr auto; gap:10px; align-items:start; padding:12px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }.activity-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:rgba(165,139,212,.1); color:var(--gold); }.activity-entry strong { display:block; font-size:11px; }.activity-entry time,.activity-entry small { display:block; margin-top:3px; color:#888291; font-size:8px; }.activity-entry p { margin:6px 0 0; color:#aaa3b5; font-size:9px; }.activity-xp { color:var(--gold); font-size:9px; font-weight:700; white-space:nowrap; }.optional-log-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.log-xp-preview { margin:0; padding:9px 11px; border-radius:11px; color:var(--gold); background:rgba(232,201,130,.07); font-size:10px; }
.optional-group .routine-item { cursor:pointer; }.optional-group .routine-item:hover { background:rgba(232,201,130,.06); color:var(--ink); }
@media (max-width:480px) { .quick-logging { align-items:flex-start; flex-direction:column; }.quick-logging>div:last-child { width:100%; }.quick-logging button { flex:1; }.tracker-hero { grid-template-columns:50px 1fr; }.tracker-hero-glyph { width:48px; height:48px; }.tracker-hero>button { grid-column:1/-1; width:100%; }.optional-log-grid { grid-template-columns:1fr; } }

/* PA management */
.pa-portal { background:radial-gradient(circle at 20% 20%,rgba(226,193,119,.18),transparent 28%),linear-gradient(135deg,#463b3d,#242032); }.pa-heading { display:flex; justify-content:space-between; align-items:end; gap:14px; }.pa-heading h2 { margin:3px 0 0; font:400 29px Marcellus,serif; }.pa-heading p { margin:3px 0 0; color:var(--muted); font-size:10px; }.pa-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.pa-summary-grid article { padding:13px 10px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.035); }.pa-summary-grid small { display:block; color:#8f8999; font-size:7px; letter-spacing:.1em; }.pa-summary-grid strong { display:block; margin-top:5px; color:var(--gold); font:400 18px Marcellus,serif; }.small-text-button { border:1px solid rgba(232,201,130,.2); border-radius:10px; padding:7px 8px; background:rgba(232,201,130,.06); color:var(--gold); font-size:8px; cursor:pointer; }
.shift-list { display:grid; gap:8px; margin-top:14px; }.shift-card { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:start; padding:12px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }.shift-date-box { width:40px; padding:6px 3px; border-radius:11px; background:rgba(232,201,130,.09); color:var(--gold); text-align:center; }.shift-date-box small,.shift-date-box strong { display:block; }.shift-date-box small { font-size:7px; text-transform:uppercase; }.shift-date-box strong { font:400 17px Marcellus,serif; }.shift-card h3 { margin:0; font:500 12px "DM Sans",sans-serif; }.shift-card p { margin:4px 0 0; color:var(--muted); font-size:9px; }.shift-card .shift-hours { color:#8b8595; }.shift-card .shift-note { margin-top:7px; padding:7px 8px; border-radius:9px; background:rgba(255,255,255,.03); }.shift-side { text-align:right; }.shift-status { display:block; color:var(--gold); font-size:8px; text-transform:uppercase; }.shift-side button { margin-top:9px; border:1px solid var(--line); border-radius:8px; padding:6px 7px; background:transparent; color:#aaa3b5; font-size:8px; cursor:pointer; }.cover-alert { display:inline-block; margin-top:5px; color:#efaa9b; font-size:8px; }.arrival-countdown { display:block; margin:-4px 0 9px; color:var(--gold); font-size:9px; }.cover-warning { margin-top:8px; padding:8px; border:1px solid rgba(225,139,120,.24); border-radius:10px; background:rgba(175,78,65,.08); color:#efb1a4; font-size:9px; }
.pa-team-list { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:13px; }.pa-person { display:flex; justify-content:space-between; align-items:center; gap:7px; padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }.pa-person strong { font-size:10px; }.pa-person button { border:0; background:none; color:var(--sage); font-size:8px; cursor:pointer; }.pa-person.inactive { opacity:.55; }.pa-person.inactive button { color:#a58f94; }.checkpoint-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:14px; }.monthly-hours-list { display:grid; gap:6px; margin-top:12px; }.monthly-row { display:grid; grid-template-columns:1fr 100px; align-items:center; gap:10px; }.monthly-row label { color:#aaa3b5; font-size:10px; }.monthly-row input { width:100%; border:1px solid var(--line); border-radius:9px; padding:7px 8px; background:#191527; color:var(--ink); font-size:10px; }.shift-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
@media (max-width:520px) { .pa-summary-grid { grid-template-columns:1fr 1fr; }.checkpoint-grid { grid-template-columns:1fr 1fr; }.pa-team-list { grid-template-columns:1fr; }.shift-card { grid-template-columns:40px 1fr; }.shift-side { grid-column:2; display:flex; align-items:center; justify-content:space-between; }.shift-form-grid { grid-template-columns:1fr; }.shift-form-grid .full-width { grid-column:auto; } }

/* Food tracker */
.food-portal { background:radial-gradient(circle at 20% 20%,rgba(205,171,103,.18),transparent 28%),linear-gradient(135deg,#403b32,#21272e); }.food-heading h2 { margin:3px 0 0; font:400 29px Marcellus,serif; }.food-heading p { margin:3px 0 0; color:var(--muted); font-size:10px; }.cycle-control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px; }.compact-select { border:1px solid var(--line); border-radius:10px; padding:7px 9px; background:#191527; color:var(--ink); font-size:9px; }.plan-day-meta { display:flex; gap:7px; margin:13px 0 9px; }.plan-day-meta span { padding:5px 8px; border-radius:9px; background:rgba(232,201,130,.08); color:var(--gold); font-size:8px; }.plan-meals { display:grid; gap:7px; }.plan-meal { display:grid; grid-template-columns:72px 1fr auto; gap:9px; align-items:start; padding:10px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }.plan-meal strong { color:var(--gold); font-size:9px; }.plan-meal p { margin:0; color:#b4adbd; font-size:10px; line-height:1.4; }.plan-meal button { border:0; background:none; color:#8f8998; font-size:8px; cursor:pointer; }.plan-actions { display:flex; gap:7px; margin-top:10px; }.plan-actions button { flex:1; border:1px solid rgba(232,201,130,.2); border-radius:10px; padding:8px; background:rgba(232,201,130,.05); color:var(--gold); font-size:8px; cursor:pointer; }.pa-prep-plan { margin-top:10px; padding:10px; border-left:2px solid var(--gold); background:rgba(232,201,130,.05); color:#aaa3b5; font-size:9px; }.portion-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:13px; }.portion-grid span { padding:8px 9px; border-radius:10px; background:rgba(255,255,255,.03); color:#aaa3b5; font-size:9px; }.food-history { display:grid; gap:7px; margin-top:13px; }.food-history-day { padding:11px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }.food-history-day header { display:flex; justify-content:space-between; color:var(--gold); font-size:9px; }.food-history-day p { margin:7px 0 0; color:#918a99; font-size:8px; }.food-pa-prep { margin-top:10px; padding:9px 10px; border-radius:11px; background:rgba(232,201,130,.06); color:#b7ad93; font-size:9px; }.food-next-hint[hidden] { display:none; }.food-item { text-align:left; }.food-item>span { min-width:0; }.food-item strong,.food-item em { display:block; }.food-item em { margin-top:4px; color:#9992a3; font-size:8px; font-style:normal; line-height:1.35; }.food-item small { flex:0 0 auto; }.food-item[data-state="Swapped"] small { color:var(--violet); }.food-item[data-state="Skipped"] { opacity:.58; }
@media (max-width:480px) { .cycle-control-grid { grid-template-columns:1fr; }.portion-grid { grid-template-columns:1fr; }.plan-meal { grid-template-columns:65px 1fr; }.plan-meal button { grid-column:2; justify-self:start; } }

/* Hydration tracker */
.hydration-portal { background:radial-gradient(circle at 20% 20%,rgba(104,178,207,.2),transparent 28%),linear-gradient(135deg,#293d4c,#202532); }.hydration-dashboard { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.hydration-big-total { display:flex; justify-content:space-between; align-items:end; margin-top:12px; }.hydration-big-total strong { font:400 23px Marcellus,serif; }.hydration-big-total span { color:#9bc6d6; font-size:11px; }.hydration-dashboard article>small { display:block; margin-top:-8px; color:#817b89; font-size:8px; }.hydration-control-groups { display:grid; gap:14px; margin-top:14px; }.hydration-control-groups>div>strong { display:block; margin-bottom:7px; color:#bbb4c1; font-size:10px; }.hydration-control-groups .quick-add { flex-wrap:wrap; }.hydration-history { display:grid; gap:7px; margin-top:13px; }.hydration-history-row { display:grid; grid-template-columns:85px 1fr 1fr; gap:9px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }.hydration-history-row strong { font-size:9px; }.hydration-history-row span { color:#a7a0ad; font-size:9px; }.hydration-history-row b { color:#9bc6d6; font-weight:500; }.hydration-prompt { margin:11px 0 0; padding:9px 10px; border:1px solid rgba(135,189,209,.18); border-radius:10px; background:rgba(91,148,171,.06); color:#abd1dc; font-size:9px; }.electrolyte-row>.quick-add { justify-content:flex-end; flex-wrap:wrap; }.quick-add button { cursor:pointer; }
@media (max-width:480px) { .hydration-dashboard { grid-template-columns:1fr; }.hydration-history-row { grid-template-columns:75px 1fr; }.hydration-history-row span:last-child { grid-column:2; } }

.routine-item.skipped { border-color:rgba(226,193,119,.22); color:#d8c7a4; background:rgba(226,193,119,.05); }
.routine-item.skipped .state-dot { border-color:#c9b07a; color:#e6d384; }
.routine-item .complete-now { border:1px solid rgba(157,196,168,.3); border-radius:8px; padding:5px 7px; background:rgba(157,196,168,.1); color:var(--sage); font-size:8px; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; }
.pinned-links { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.pinned-link { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04); color:var(--ink); text-decoration:none; font-size:11px; }
.pinned-link small { color:#8d8799; font-size:8px; text-transform:uppercase; }
.quick-link-row { display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }
.quick-link-row + .quick-link-row { margin-top:7px; }
.quick-link-row a { color:var(--ink); text-decoration:none; }
.quick-link-row p { margin:3px 0 0; color:#8d8799; font-size:9px; }
.quick-link-actions { display:flex; gap:6px; }
.quick-link-actions button { border:1px solid var(--line); border-radius:8px; padding:6px 7px; background:transparent; color:#aaa3b5; font-size:8px; cursor:pointer; }
.calendar-event { width:100%; display:grid; grid-template-columns:74px 1fr; gap:10px; text-align:left; padding:11px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); color:var(--ink); cursor:pointer; }
.calendar-event + .calendar-event { margin-top:7px; }
.calendar-event time { color:var(--gold); font-size:9px; }
.calendar-event strong { display:block; font-size:12px; }
.calendar-event small { display:block; margin-top:3px; color:#8d8799; font-size:8px; text-transform:uppercase; }
.calendar-day-group { margin-top:12px; }
.calendar-day-group h3 { margin:0 0 7px; color:var(--gold); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.event-details { display:grid; gap:10px; margin:16px 0 0; }
.event-details div { padding:10px; border-radius:11px; background:rgba(255,255,255,.04); }
.event-details dt { color:#8d8799; font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.event-details dd { margin:4px 0 0; font-size:12px; white-space:pre-wrap; }
.links-portal { background:radial-gradient(circle at 20% 20%,rgba(157,196,168,.16),transparent 28%),linear-gradient(135deg,#2f3a3c,#242032); }
.cycle-control-grid { grid-template-columns:repeat(2,1fr); }
#cycle-mapping { margin-top:12px; line-height:1.55; }