/* Phone mockups rebuilt from the Flutter widgets (lib/presentation/**). Sizes are logical points at 390 wide. */
.phone{--z:.78;zoom:var(--z);width:414px;padding:12px;border-radius:64px;background:#0E0E12;box-shadow:0 0 0 1px #2a2833 inset,0 40px 80px -20px rgba(53,42,122,.35),0 18px 36px -18px rgba(0,0,0,.35);flex:none;direction:ltr;text-align:left}
@media (prefers-color-scheme:dark){.phone{box-shadow:0 0 0 1px #4B4462 inset,0 40px 80px -20px rgba(0,0,0,.6)}}
@media (max-width:520px){.phone{--z:.7}}
@media (max-width:380px){.phone{--z:.62}}
.phone.lg{--z:.86}
@media (max-width:520px){.phone.lg{--z:.74}}
.scr{position:relative;width:390px;height:844px;border-radius:52px;overflow:hidden;background:var(--canvas);color:var(--ink);display:flex;flex-direction:column;font-family:"Poppins",sans-serif;line-height:normal;transition:background .3s}
.scr *{transition:background-color .3s,color .3s,border-color .3s}
.sb{flex:none;height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 34px 0 46px;font-size:17px;font-weight:600;color:var(--ink);position:relative}
.sb::after{content:"";position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000}
.sb .r{display:flex;align-items:center;gap:6px}
.sig{display:flex;align-items:flex-end;gap:2px;height:12px}.sig i{width:3px;border-radius:1px;background:var(--ink)}
.sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:6px}.sig i:nth-child(3){height:9px}.sig i:nth-child(4){height:12px}
.bat{width:25px;height:12px;border-radius:4px;border:1.2px solid color-mix(in srgb,var(--ink) 45%,transparent);padding:1.5px;position:relative}.bat i{display:block;height:100%;width:78%;border-radius:2px;background:var(--ink)}
.app{flex:1;position:relative;display:flex;flex-direction:column;min-height:0}
.m-ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;line-height:1;display:inline-block;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24;-webkit-font-smoothing:antialiased}
.m-ms.o{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}

/* AppBottomNavigation */
.bnav{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;background:var(--surface);border-top:1px solid var(--border);padding:8px 0 34px}
.bnav .it{flex:1;display:flex;flex-direction:column;align-items:center;min-height:48px;color:var(--nav-unselected)}
.bnav .ib{width:56px;height:32px;display:grid;place-items:center}
.bnav .ib i{width:22px;height:22px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.bnav .it span{margin-top:4px;font-size:12px;font-weight:500;line-height:1.2}
.bnav .it.on{color:var(--primary)}.bnav .it.on span{font-weight:600}
.bnav .ind{position:absolute;top:0;width:56px;height:4px;border-radius:0 0 4px 4px;background:var(--primary);left:calc(12.5% - 28px)}
.bnav .ind.p2{left:calc(37.5% - 28px)}.bnav .ind.p3{left:calc(62.5% - 28px)}
.i-focus{--ico:url(../assets/nav/stopwatch.svg)}.i-plans{--ico:url(../assets/nav/honor-star.svg)}.i-ins{--ico:url(../assets/nav/graph-mixed.svg)}.i-prof{--ico:url(../assets/nav/user.svg)}

/* FocusView */
.f-col{flex:1;display:flex;flex-direction:column;padding-bottom:100px;min-height:0}
.f-title{height:54px;margin-top:4px;display:grid;place-items:center;font-size:20px;font-weight:600;letter-spacing:-.35px;line-height:1.2}
.trig{margin:14px 16px 0;min-height:52px;padding:4px 4px 4px 16px;border-radius:20px;background:var(--surface);border:1.2px solid var(--border);box-shadow:0 4px 14px var(--shadow);display:flex;align-items:center}
.trig .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,var(--primary),var(--primary-light));flex:none}
.trig .t{flex:1;margin-left:12px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kind{margin-left:8px;height:26px;padding:0 10px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:600;line-height:1;background:var(--subtle);color:var(--primary-strong)}
.kind.task{background:var(--canvas);color:var(--muted);border:1px solid var(--border)}
.trig .chev{width:44px;height:44px;margin-left:8px;display:grid;place-items:center;color:var(--muted);font-size:24px}
.sess{padding:12px 16px 0;display:flex;justify-content:center;align-items:center}
.sess .d{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.sess .n{margin-left:4px;font-size:14px;font-weight:500}
.sess .p{margin-left:8px;height:28px;padding:0 12px;border-radius:24px;background:var(--subtle);color:var(--primary);font-size:12px;font-weight:500;display:grid;place-items:center}
.f-mid{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.f-stack{padding:8px 0 40px;display:flex;flex-direction:column;align-items:center}
.hold{position:relative;width:280px;height:280px;display:grid;place-items:center}
.hold svg{position:absolute;inset:0}
.hold circle{fill:none;stroke:var(--timer-outer);stroke-width:6}
.hold .arc{stroke:var(--primary);stroke-width:8;stroke-linecap:round}
.face{position:relative;width:252px;height:252px;border-radius:50%;background:var(--face);border:1px solid var(--hairline);box-shadow:0 10px 30px rgba(23,21,34,.07);padding:0 37.8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
@media (prefers-color-scheme:dark){.face{box-shadow:0 10px 30px rgba(0,0,0,.25)}}
[data-scheme="dark"] .face{box-shadow:0 10px 30px rgba(0,0,0,.25)}[data-scheme="light"] .face{box-shadow:0 10px 30px rgba(23,21,34,.07)}
.face .st{font-size:12px;font-weight:600;letter-spacing:1.2px;color:var(--muted)}
.face .lb{margin-top:10px;font-size:43px;font-weight:600;line-height:1;letter-spacing:-.5px;color:var(--primary)}
.face .hn{margin-top:10px;font-size:12px;font-weight:500;line-height:1.4;color:var(--muted)}
.readout{margin-top:28px;display:flex;font-size:48px;font-weight:500;letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums;color:var(--primary)}
.readout .dim{color:var(--dim)}
.readout.paused{color:var(--primary-strong)}
.eslot{padding-top:22px;height:88px;display:flex;justify-content:center;align-items:flex-start}
.eind{min-height:44px;padding:0 16px 0 8px;border-radius:999px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--secondary)}
.erow{display:flex;flex-direction:column;align-items:center}
.erow .pill{min-height:44px;padding:0 8px 0 6px;border-radius:999px;background:var(--subtle);display:flex;align-items:center}
.erow .pill b{margin:0 4px 0 6px;font-size:13px;font-weight:600;color:var(--primary-strong)}
.msw{width:36px;height:22px;border-radius:11px;background:var(--primary);margin-left:6px;position:relative}
.msw::after{content:"";position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.erow .cap{margin-top:6px;font-size:12px;font-weight:500;color:var(--muted)}

/* MiniMono */
.mm{display:grid;place-items:center;flex:none}
.mm .rot{display:grid;place-items:center}
.mm.rest .rot{transform:rotate(-90deg)}
.mm.rest .br{animation:mono-breath 2.5s ease-in-out infinite alternate}
.mm.off{opacity:.45}
@keyframes mono-breath{from{transform:scale(1,1)}to{transform:scale(1.04,1.07)}}
.mm .bd-a{stop-color:var(--mono-start)}.mm .bd-b{stop-color:var(--mono-end)}

/* PlansView */
.pl-head{margin-top:4px;padding:0 12px 0 16px;height:54px;display:flex;align-items:center}
.pl-head h4{flex:1;font-size:24px;font-weight:600;letter-spacing:-.5px;line-height:1}
.hib{width:44px;height:44px;display:grid;place-items:center}
.hib i{width:40px;height:40px;border-radius:50%;background:var(--subtle);color:var(--primary-strong);display:grid;place-items:center;font-size:20px}
.xbtn{margin-left:4px;display:flex;align-items:center;gap:6px;padding:12px 14px;border-radius:999px;background:var(--subtle);color:var(--primary);font-size:14px;font-weight:600;line-height:1}
.xbtn .m-ms{font-size:18px}
.pl-filter{padding:6px 16px 8px;display:flex;align-items:center}
.stat{height:44px;display:flex;align-items:center}
.stat .pp{min-height:36px;padding:0 8px 0 12px;border-radius:999px;background:var(--subtle);display:flex;align-items:center;gap:6px;color:var(--primary-strong);font-size:13px;font-weight:600}
.cbadge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--primary);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
.vdiv{width:1px;height:24px;background:var(--border);margin:0 10px}
.tabs{display:flex;gap:2px;position:relative}
.tab{height:44px;padding:0 10px;display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--muted);position:relative}
.tab small{font-size:12px;font-weight:500;color:var(--soft-text)}
.tab.on{color:var(--ink)}
.tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:3px;border-radius:3px;background:var(--primary)}
.pl-list{padding:12px 16px 0;display:flex;flex-direction:column;gap:12px}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:14px 4px 4px 16px}
.pcard .top{display:flex;align-items:center}
.pcard .nm{flex:1;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.pcard .nm b{font-size:16px;font-weight:600;line-height:1.3}
.pcard .nm span{margin-top:2px;font-size:12px;font-weight:400;line-height:1.3;color:var(--muted)}
.kebab{width:44px;height:44px;display:grid;place-items:center;color:var(--muted);font-size:24px}
.today{height:26px;padding:0 10px;border-radius:999px;background:var(--success-surface);color:var(--success-ink);font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px;margin-left:8px}
.pcard .hl{height:1px;margin:12px 12px 0 0;background:var(--hairline)}
.disc{min-height:48px;display:flex;align-items:center}
.disc .m-ms{font-size:18px;color:var(--primary)}
.disc b{margin-left:8px;font-size:13px;font-weight:600;line-height:1.35}
.disc .md{width:3px;height:3px;border-radius:50%;background:var(--meta-dot);margin:0 8px}
.disc .tm{flex:1;font-size:13px;font-weight:500;color:var(--secondary);font-variant-numeric:tabular-nums}
.disc .cv{width:44px;height:44px;display:grid;place-items:center}
.disc .cv i{width:32px;height:32px;border-radius:50%;background:var(--canvas);color:var(--primary-strong);display:grid;place-items:center;font-size:22px;font-style:normal}

/* InsightsView */
.in-head{margin-top:4px;padding:0 16px;height:54px;display:flex;align-items:center}
.in-head h4{flex:1;font-size:24px;font-weight:600;letter-spacing:-.5px;line-height:1}
.share{height:40px;padding:0 14px;border-radius:999px;background:var(--subtle);color:var(--primary-strong);display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.share .m-ms{font-size:18px}
.in-body{padding:8px 16px 0;display:flex;flex-direction:column}
.wk{min-height:44px;display:flex;align-items:center}
.wk .cb{width:44px;height:44px;display:grid;place-items:center;color:var(--primary);font-size:26px}
.wk .mid{flex:1;text-align:center;display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.wk .mid b{font-size:15px;font-weight:600}
.wk .mid span{font-size:12px;font-weight:500;color:var(--muted)}
.wk .mid em{font-style:normal;font-size:12px;font-weight:600;color:var(--primary);padding:0 6px}
.icard{margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px 20px 16px}
.icard .r1{display:flex;align-items:flex-start}
.icard .tot{flex:1}
.icard .tot b{display:block;font-size:32px;font-weight:600;letter-spacing:-.5px;line-height:1.1}
.icard .tot span{display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--muted)}
.icard .chg{padding-top:4px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.chip-up{padding:4px 10px 4px 7px;border-radius:999px;background:var(--success-surface);color:var(--success-ink);display:flex;align-items:center;gap:3px;font-size:13px;font-weight:600;line-height:1.2}
.chip-up .m-ms{font-size:16px}
.icard .chg span{font-size:12px;font-weight:500;color:var(--muted)}
.icard .r2{margin-top:6px;display:flex;align-items:center;font-size:12px;font-weight:500;color:var(--muted)}
.icard .r2 span{flex:1}.icard .r2 b{min-height:44px;padding:0 8px;display:grid;place-items:center;color:var(--primary);font-weight:600}
.chart{position:relative;height:170px;margin-top:12px}
.chart .gl{position:absolute;left:28px;right:0;height:1px;background:var(--chart-grid)}
.chart .ax{position:absolute;left:0;width:24px;font-size:11px;font-weight:500;line-height:1.3;color:var(--muted)}
.chart .days{position:absolute;left:28px;right:0;top:0;bottom:0;display:flex}
.chart .day{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.chart .bar{width:64%;border-radius:6px 6px 0 0;background:var(--primary)}
.chart .bar.miss{background:var(--goal-missed)}
.chart .dl{height:20px;display:flex;align-items:flex-end;font-size:11px;font-weight:500;color:var(--muted)}
.chart .day.sel .dl{color:var(--ink);font-weight:600}
.chart svg{position:absolute;left:28px;top:0;width:calc(100% - 28px);height:100%;overflow:visible}
.chart .halo{stroke:var(--surface);stroke-width:4;fill:none}
.chart .tl{stroke:var(--timer-ink);stroke-width:1.5;stroke-dasharray:4 3;fill:none}
.chart .ttag{position:absolute;right:0;padding:1px 6px;border-radius:6px;background:var(--timer-ink);color:var(--surface);font-size:11px;font-weight:600;line-height:1.3}
.chart .tip{position:absolute;transform:translateX(-50%);padding:3px 6px;border-radius:8px;background:var(--primary-strong);color:#fff;font-size:11px;font-weight:600;line-height:1.3;white-space:nowrap}
@media (prefers-color-scheme:dark){.chart .tip{color:#161615}}
[data-scheme="dark"] .chart .tip{color:#161615}[data-scheme="light"] .chart .tip{color:#fff}
.icard .hr{height:1px;margin:14px 0 12px;background:var(--hairline)}
.icard .stats{display:flex;gap:8px}
.icard .stats div{flex:1}
.icard .stats b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.icard .stats span{display:block;font-size:12px;font-weight:500;line-height:1.3;color:var(--muted)}

/* Endurance details sheet */
.scrim{position:absolute;inset:0;z-index:2;background:rgba(22,22,21,.45)}
.sheet{position:absolute;z-index:3;left:0;right:0;bottom:0;background:var(--surface);border-radius:28px 28px 0 0;padding:12px 20px 58px;display:flex;flex-direction:column}
.sheet .hd{width:40px;height:4px;border-radius:4px;background:var(--divider);align-self:center}
.sheet h5{margin-top:12px;text-align:center;font-size:20px;font-weight:600;letter-spacing:-.35px;line-height:1.25}
.sheet p{margin-top:8px;text-align:center;font-size:14px;font-weight:400;line-height:1.55;letter-spacing:-.14px;color:var(--body)}
.tline{margin-top:18px;height:10px;border-radius:5px;background:var(--timer-outer);position:relative;overflow:hidden}
.tline i{position:absolute;top:0;bottom:0;background:var(--primary)}
.tl-l{margin-top:8px;display:flex;justify-content:space-between;font-size:11px;font-weight:500;color:var(--muted)}
.estats{margin-top:14px;display:flex;gap:8px}
.estats div{flex:1;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.estats b{display:block;font-size:20px;font-weight:600;letter-spacing:-.35px;line-height:1.2}
.estats span{display:block;font-size:12px;font-weight:500;line-height:1.3;color:var(--muted);white-space:nowrap}
.sheet .cap{margin-top:12px;text-align:center;font-size:12px;font-weight:500;line-height:1.4;color:var(--muted)}
.mbtn{height:52px;border-radius:17px;display:grid;place-items:center;font-size:14px;font-weight:600}
.mbtn.p{margin-top:20px;background:var(--primary);color:#fff}
.mbtn.o{margin-top:8px;border:1px solid var(--outline);color:var(--ink)}