:root{
  --accent:#3d648f;--accent-soft:#e7eef7;--accent-strong:#294e76;
  --bg:#f4f6f8;--surface:#ffffff;--surface-2:#f8fafb;--text:#1f2933;--muted:#697684;
  --line:#e3e8ed;--danger:#a34855;--shadow:0 12px 34px rgba(31,41,51,.08);--shadow-soft:0 6px 18px rgba(31,41,51,.055);
  --radius-xl:26px;--radius-lg:20px;--radius-md:16px;--nav-h:78px;color-scheme:light dark;
}
body[data-variant="family"]{--accent:#b45f86;--accent-soft:#f8e8ef;--accent-strong:#944666}
body[data-variant="enterprise"]{--accent:#3d648f;--accent-soft:#e7eef7;--accent-strong:#294e76}
body[data-variant="sport"]{--accent:#35665a;--accent-soft:#e5f0ec;--accent-strong:#244d43}
body.dark{--bg:#11151a;--surface:#191f25;--surface-2:#151a20;--text:#f1f5f7;--muted:#a8b2bd;--line:#2b333c;--shadow:0 12px 34px rgba(0,0,0,.28);--shadow-soft:0 6px 18px rgba(0,0,0,.2)}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}body{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 3%,var(--bg)) 0,var(--bg) 320px);-webkit-tap-highlight-color:transparent;transition:background .25s ease,color .2s ease}
button,input{font:inherit}button{border:0;cursor:pointer;color:inherit}svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell{max-width:980px;margin:0 auto;min-height:100vh;padding:0 max(16px,env(safe-area-inset-left)) calc(var(--nav-h) + 34px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right))}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:calc(22px + env(safe-area-inset-top)) 4px 15px}.brand-block{min-width:0}.brand-mark{margin-bottom:7px}.eyebrow{font-size:.72rem;font-weight:850;letter-spacing:.16em;color:var(--accent)}h1,h2,h3,p{margin:0}.topbar h1{max-width:620px;font-size:clamp(1.7rem,4vw,2.55rem);line-height:1.07;letter-spacing:-.035em}.icon-btn{width:46px;height:46px;flex:0 0 auto;border-radius:15px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow-soft);transition:transform .16s ease,background .2s ease}.icon-btn:active{transform:scale(.94)}
.variant-switcher{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);border-radius:19px;position:sticky;top:max(8px,env(safe-area-inset-top));z-index:8;box-shadow:0 8px 24px rgba(31,41,51,.06);backdrop-filter:blur(18px)}.variant-switcher button{min-height:48px;padding:10px 8px;border-radius:14px;background:transparent;color:var(--muted);font-weight:780;transition:background .18s ease,color .18s ease,transform .14s ease}.variant-switcher button:active{transform:scale(.97)}.variant-switcher button.active{background:var(--accent-soft);color:var(--accent-strong);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent)}
main{display:grid;gap:22px;padding:20px 0}.hero-card,.card,.settings-section,.summary-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft)}.hero-card{padding:22px}.hero-card h2,.page-intro h2{font-size:clamp(1.55rem,4vw,2rem);line-height:1.13;letter-spacing:-.028em;margin:5px 0 6px}.hero-card p,.page-intro p,.settings-heading p{color:var(--muted);line-height:1.5}.page-intro{padding:4px 4px 0}.page-intro>div{max-width:680px}
.section-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:2px 4px 9px;font-size:.73rem;color:var(--accent);font-weight:850;letter-spacing:.12em}.section-head small,.section-head .text-link{font-size:.76rem;letter-spacing:0;color:var(--muted);font-weight:650}.text-link{background:none;padding:4px}.text-link:active{opacity:.6}
.action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.action-btn{position:relative;min-height:126px;border-radius:22px;padding:15px;background:var(--surface);border:1px solid var(--line);text-align:left;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;box-shadow:var(--shadow-soft);overflow:hidden;transition:transform .14s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.action-btn::after{content:"";position:absolute;inset:auto -28px -46px auto;width:94px;height:94px;border-radius:50%;background:var(--accent-soft);opacity:.55;pointer-events:none}.action-btn:active{transform:scale(.965);box-shadow:0 2px 8px rgba(31,41,51,.08)}.action-btn.running{border-color:color-mix(in srgb,var(--accent) 72%,var(--line));background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent-soft) 54%,var(--surface)));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 8%,transparent),var(--shadow-soft)}.activity-icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);position:relative;z-index:1}.activity-icon svg{width:20px;height:20px}.activity-icon.small{width:32px;height:32px;border-radius:11px;flex:0 0 auto}.activity-icon.live::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);right:-1px;top:-1px;box-shadow:0 0 0 3px var(--surface)}.action-copy{display:grid;gap:3px;position:relative;z-index:1}.action-copy strong{font-size:1rem;line-height:1.2}.action-copy small{font-size:.76rem;color:var(--muted);font-weight:560}.running-badge{position:absolute;right:11px;top:12px;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:var(--accent);color:white;font-size:.69rem;font-weight:800;z-index:2}.running-badge i{width:6px;height:6px;border-radius:50%;background:white;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}
.active-section{display:grid;gap:8px}.active-list{display:grid;gap:9px}.active-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border-radius:20px;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));box-shadow:var(--shadow-soft)}.active-main,.active-actions{display:flex;align-items:center;gap:11px}.active-actions{margin-left:auto}.active-actions>.elapsed-live{font-variant-numeric:tabular-nums;font-size:.93rem}.finish-timer{min-height:42px;padding:9px 12px;border-radius:13px;background:var(--accent);color:white;display:flex;align-items:center;gap:6px;font-weight:780}.finish-timer svg{width:17px}.finish-timer:active{transform:scale(.96)}.stack{display:grid;gap:4px}.muted{color:var(--muted)}
.log-list{display:grid;padding:6px 16px}.log-list.compact{padding:4px 14px}.log-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}.log-row:last-child{border-bottom:0}.log-copy{display:grid;gap:3px;min-width:0}.log-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-row>strong{font-size:.84rem;color:var(--muted);font-weight:750}
.timeline{position:relative;display:grid;gap:12px}.timeline::before{content:"";position:absolute;left:18px;top:20px;bottom:20px;width:1px;background:var(--line)}.timeline-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;position:relative}.timeline-marker{z-index:1;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:4px solid var(--bg)}.timeline-marker svg{width:17px}.timeline-card{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-soft)}.timeline-card .muted{font-size:.8rem;margin-top:4px}.timeline-meta{display:flex;align-items:center;gap:9px;flex:0 0 auto}.timeline-meta>strong{font-size:.82rem;color:var(--muted)}
.summary-hero{padding:22px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent-soft) 55%,var(--surface)))}.summary-number{font-size:clamp(2.7rem,10vw,4.6rem);font-weight:850;letter-spacing:-.06em;line-height:1;margin:10px 0 8px}.summary-hero p{color:var(--muted);max-width:600px}.summary-list{display:grid;padding:7px 17px}.summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.summary-row:last-child{border-bottom:0}.summary-track{height:5px;border-radius:999px;background:var(--accent-soft);margin-top:8px;overflow:hidden}.summary-track span{display:block;height:100%;border-radius:inherit;background:var(--accent)}.empty-inline{display:flex;align-items:center;gap:11px;padding:12px 0}.wide{width:100%;min-height:50px}
.primary,.ghost-wide,.add-chip,.inline-control,.danger-link,.mode-pill,.icon-action{transition:transform .14s ease,background .18s ease,color .18s ease,border-color .18s ease}.primary{padding:13px 16px;border-radius:15px;background:var(--accent);color:#fff;font-weight:800;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 24%,transparent)}.primary:active,.ghost-wide:active,.add-chip:active,.inline-control:active,.mode-pill:active,.icon-action:active{transform:scale(.97)}
.settings-section{padding:17px;display:grid;gap:14px}.settings-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.settings-heading strong{font-size:1.03rem}.settings-heading p{font-size:.88rem;margin-top:4px}.add-chip{min-height:42px;padding:8px 13px;border-radius:13px;background:var(--accent);color:white;font-weight:800;display:flex;align-items:center;gap:6px;white-space:nowrap}.add-chip span{font-size:1.2rem;line-height:1}.action-editor{display:grid;gap:10px}.edit-row{padding:12px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line);display:grid;gap:10px}.edit-top{display:grid;grid-template-columns:auto minmax(0,1fr) 40px;gap:9px;align-items:center}.action-name{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:1rem;font-weight:650;padding:8px 4px;border-radius:10px}.action-name:focus{background:var(--surface);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}.mode-pill{min-height:40px;border-radius:11px;background:transparent;color:var(--muted);font-size:.8rem;font-weight:780;display:flex;align-items:center;justify-content:center;gap:7px}.mode-pill svg{width:16px}.mode-pill.active{background:var(--accent-soft);color:var(--accent-strong);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)}.icon-action{width:40px;height:40px;border-radius:12px;background:transparent;color:var(--muted);display:grid;place-items:center}.icon-action svg{width:18px}.remove-action,.remove-entry,.danger-link{color:var(--danger)}.remove-action:active,.remove-entry:active{background:color-mix(in srgb,var(--danger) 10%,transparent)}.ghost-wide{width:100%;min-height:46px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-weight:750}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-top:1px solid var(--line)}.settings-row>div{display:grid;gap:3px}.settings-row .muted{font-size:.8rem}.inline-control{min-height:40px;padding:8px 12px;border-radius:12px;background:var(--accent-soft);color:var(--accent-strong);font-weight:780}.danger-link{background:transparent;padding:9px;font-weight:750}.privacy-note{padding:3px 5px;color:var(--muted);font-size:.78rem;line-height:1.5}
.empty-card{display:flex;align-items:center;gap:13px;padding:18px}.empty-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}.empty-icon svg{width:20px}
.bottom-nav{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:min(980px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px max(9px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));background:color-mix(in srgb,var(--surface) 92%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 -8px 28px rgba(31,41,51,.08)}.bottom-nav button{min-height:60px;border-radius:16px;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.7rem;font-weight:720;transition:background .16s ease,color .16s ease,transform .14s ease}.bottom-nav button svg{width:21px;height:21px}.bottom-nav button:active{transform:scale(.95)}.bottom-nav button.active{background:var(--accent-soft);color:var(--accent-strong);font-weight:820}.bottom-nav button.active svg{stroke-width:2.15}
@media(max-width:560px){.app-shell{padding-left:14px;padding-right:14px}.topbar{padding-left:2px;padding-right:2px}.hero-card{padding:19px}.action-grid{gap:9px}.action-btn{min-height:118px;padding:14px;border-radius:20px}.active-card{align-items:flex-start}.active-actions{flex-direction:column;align-items:flex-end;gap:6px}.finish-timer span{display:none}.finish-timer{width:42px;padding:9px;justify-content:center}.settings-heading{align-items:center}.timeline-card{align-items:flex-start}.timeline-meta{flex-direction:column-reverse;align-items:flex-end}.summary-row{gap:10px}}
@media(min-width:720px){.app-shell{padding-left:24px;padding-right:24px}.action-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hero-card,.summary-hero{padding:26px}.settings-section{padding:20px}.action-editor{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}