/* aTimeLogger for iPhone replica. Themes: light (2026 white), classic (blue bars), dark. */
.m-app {
  --bg: #ffffff; --group-bg: #f2f2f7; --card: #ffffff; --text: #1c1c1e; --text2: #6d6d72; --text3: #b4b4b9; --sep: #e3e3e8;
  --nav-bg: rgba(255,255,255,.96); --nav-fg: #1c1c1e; --nav-btn: #1c1c1e; --nav-sub: #8e8e93; --accent: #2f7de1;
  --tab-bg: rgba(250,250,252,.97); --tab-on: #3a8ae6; --tab-off: #b5b8be; --grid-bg: #f5f5f7; --seg-bg: #ececef; --seg-on: #ffffff;
  --seg-fg: #1c1c1e; --dayhead-bg: #f2f2f4; --sheet-bg: #f2f2f7; --fmenu-bg: #ffffff; --fmenu-fg: #1c1c1e; --chip-bg: #e2ecf8; --chip-fg: #3d6ea5;
  position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-size: 16px; overflow: hidden;
}
.m-app[data-theme="classic"] {
  --nav-bg: #3a86d8; --nav-fg: #ffffff; --nav-btn: #ffffff; --nav-sub: rgba(255,255,255,.8); --seg-bg: rgba(0,0,0,.14);
  --seg-on: rgba(255,255,255,.28); --seg-fg: #ffffff; --fmenu-bg: #3a86d8; --fmenu-fg: #ffffff; --tab-on: #3a86d8; --grid-bg: #ffffff;
}
.m-app[data-theme="dark"] {
  --bg: #000000; --group-bg: #000000; --card: #1c1c1e; --text: #ffffff; --text2: #a1a1a6; --text3: #5a5a5f; --sep: #38383a;
  --nav-bg: rgba(18,18,20,.96); --nav-fg: #ffffff; --nav-btn: #ffffff; --nav-sub: #8e8e93; --tab-bg: rgba(18,18,20,.97); --tab-off: #6b6b70;
  --grid-bg: #1c1c1e; --seg-bg: #2c2c2e; --seg-on: #636366; --seg-fg: #ffffff; --dayhead-bg: #161618; --sheet-bg: #000; --fmenu-bg: #1c1c1e;
  --fmenu-fg: #fff; --chip-bg: #24364d; --chip-fg: #9cc3ef;
  --chart-empty: #2a2a2c; --chart-grid: #3a3a3c; --chart-text: #8e8e93; --dn-title: #ddd; --dn-value: #fff;
}
.m-app svg.g { width: 22px; height: 22px; flex: none; }
.m-app svg.g.chev { width: 14px; height: 14px; color: var(--text3); stroke-width: 2.4; }
.m-screens { flex: 1; position: relative; overflow: hidden; transition: transform .3s, border-radius .3s; background: var(--bg); }
.m-app.sheeted .m-screens { transform: scale(.93) translateY(10px); border-radius: 12px; }
.m-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.m-screen.grouped { background: var(--group-bg); }
.m-screen.in-right { transform: translateX(100%); transition: none; }
.m-screen.in-left { transform: translateX(-28%); transition: none; }
.m-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 28px; }

/* nav bar */
.m-nav { flex: none; height: calc(44px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; background: var(--nav-bg); color: var(--nav-fg); border-bottom: .5px solid var(--sep); }
.m-app[data-theme="classic"] .m-nav { border-bottom: 0; }
.m-nav-side { display: flex; align-items: center; min-width: 0; }
.m-nav-side.l { justify-content: flex-start; padding-left: 4px; }
.m-nav-side.r { justify-content: flex-end; padding-right: 4px; }
.m-nav-title { text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.15; max-width: 62vw; overflow: hidden; }
.m-nav-title b { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.m-nav-title small { font-size: 11px; color: var(--nav-sub); }
.m-nav-title .caret { font-style: normal; font-size: 12px; }
.m-nav-btn { height: 44px; min-width: 40px; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 2px; color: var(--nav-btn); font-size: 17px; }
.m-nav-btn.back { padding-left: 2px; }
.m-nav-btn.back svg { width: 24px; height: 24px; stroke-width: 2.2; }
.m-nav-btn.strong { font-weight: 600; }
.m-nav-btn:active, .m-tile:active, .m-row:active, .m-hrow:active, .m-run:active { opacity: .55; }
.m-nav-btn.dot { position: relative; }
.m-nav-btn.dot::after { content: ""; position: absolute; right: 7px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; }

/* tab bar */
.m-tabbar { flex: none; display: flex; height: calc(52px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--tab-bg); border-top: .5px solid var(--sep); z-index: 2; }
.m-tab { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--tab-off); }
.m-tab.on { color: var(--tab-on); }
.m-tab svg.g { width: 27px; height: 27px; }

/* activities */
.m-running { background: var(--card); }
.m-run { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 12px; border-bottom: .5px solid var(--sep); }
.m-run-icon { width: 40px; display: flex; justify-content: center; }
.m-run-main { flex: 1; min-width: 0; }
.m-run-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-run-timers { display: flex; align-items: baseline; gap: 8px; line-height: 1.15; }
.timer { font-variant-numeric: tabular-nums; }
.timer.big { font-size: 27px; font-weight: 400; }
.timer.small { font-size: 16px; color: var(--text); }
.m-run-comment { font-size: 12px; color: var(--text2); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-run-iv { font-size: 13.5px; color: var(--text); margin-top: 1px; }
.m-run-btns { display: flex; gap: 10px; }
.m-circle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sep); display: flex; align-items: center; justify-content: center; background: var(--card); }
.m-circle svg.g { width: 17px; height: 17px; }
.m-circle.pause { color: #3a8ae6; }
.m-circle.play { color: #3dbb5a; }
.m-circle.stop { color: #e8483b; }
.m-stopall { display: block; width: calc(100% - 32px); margin: 8px 16px 0; height: 40px; border-radius: 10px; background: var(--grid-bg); color: #ff3b30; font-size: 16px; }
.m-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); margin: 12px 10px; padding: 6px 0; background: var(--grid-bg); border-radius: 14px; }
.m-app[data-theme="classic"] .m-grid { margin: 0; border-radius: 0; }
.m-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 2px 10px; min-width: 0; }
.m-tile-icon { position: relative; height: 34px; display: flex; align-items: center; }
.m-tile-name { font-size: 12px; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.m-tile.running .m-tile-name { font-weight: 600; }
.m-badge { position: absolute; right: -14px; top: -7px; min-width: 21px; height: 21px; border-radius: 11px; background: #dcdce0; color: #555; font-size: 12px; font-style: normal; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.m-newcircle { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--text2); color: var(--text2); display: flex; align-items: center; justify-content: center; }
.m-newcircle svg.g { width: 16px; height: 16px; }
.m-tagprompt { background: var(--card); padding: 4px 14px 10px 62px; border-bottom: .5px solid var(--sep); }
.m-tagprompt-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.m-tagprompt-btns button { font-size: 17px; padding: 6px 16px; border-radius: 8px; }
.m-tagprompt-btns .primary { background: var(--seg-bg); }

/* chips */
.m-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.m-chip { background: var(--chip-bg); color: var(--chip-fg); border-radius: 4px; padding: 1px 6px; font-size: 11px; line-height: 16px; }
.m-chips.big .m-chip { font-size: 16px; line-height: 22px; padding: 2px 8px; background: transparent; color: var(--text); }
.m-chips.big .m-chip.on { background: #b8d2f2; color: #1c1c1e; }

/* segmented */
.m-seg { display: inline-flex; background: var(--seg-bg); border-radius: 9px; padding: 2px; color: var(--seg-fg); }
.m-seg button { height: 30px; padding: 0 14px; border-radius: 7px; font-size: 13px; color: inherit; white-space: nowrap; }
.m-seg button.on { background: var(--seg-on); box-shadow: 0 1px 3px rgba(0,0,0,.14); font-weight: 500; }
.m-seg.icons button { width: 41px; padding: 0; display: flex; align-items: center; justify-content: center; }
.m-seg.icons svg.g { width: 19px; height: 19px; }
.m-seg.small button { height: 24px; padding: 0 11px; font-size: 11px; }
.m-seg.mini button { height: 26px; padding: 0 9px; font-size: 13px; }
.m-segwrap { display: flex; justify-content: center; padding: 10px; background: var(--card); border-bottom: .5px solid var(--sep); }
.m-segwrap .m-seg button { min-width: 92px; }

/* history */
.m-hbar { flex: none; padding: env(safe-area-inset-top) 4px 0; height: calc(48px + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; background: var(--nav-bg); color: var(--nav-fg); }
.m-hbar2 { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px 8px 12px; background: var(--nav-bg); color: var(--nav-fg); border-bottom: .5px solid var(--sep); }
.m-app[data-theme="classic"] .m-hbar2 { border-bottom: 0; }
.m-htitle { min-width: 92px; }
.m-htitle b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; }
.m-htitle small { font-size: 10.5px; color: var(--nav-sub); white-space: nowrap; }
.m-arrows { display: flex; }
.m-arrows button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--nav-sub); }
.m-arrows svg.g, .m-arrows svg.g.chev { width: 22px; height: 22px; color: var(--nav-sub); stroke-width: 2; }
.m-fmenu { background: var(--fmenu-bg); color: var(--fmenu-fg); padding: 4px 0 8px; box-shadow: 0 8px 14px rgba(0,0,0,.12); z-index: 3; flex: none; }
.m-fmenu-active { display: flex; flex-direction: column; padding: 6px 16px 2px; }
.m-fmenu-active small { font-size: 11px; opacity: .8; }
.m-fmenu-active button { text-align: left; font-size: 18px; color: inherit; }
.m-fmenu-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; }
.m-fmenu-row button { font-size: 17px; color: inherit; }
.m-fmenu-head { padding: 8px 16px; background: rgba(0,0,0,.07); font-size: 15px; }
.m-fmenu-item { display: flex; align-items: center; padding: 4px 8px 4px 16px; }
.m-fmenu-item .name { flex: 1; text-align: left; font-size: 16px; color: inherit; height: 36px; }
.m-fmenu-item.on .name { font-weight: 600; }
.m-fmenu-item button:last-child { width: 40px; height: 36px; color: inherit; }
.m-search { padding: 8px 12px 6px; background: var(--bg); }
.m-search input { width: 100%; height: 36px; border-radius: 10px; border: 0; background: var(--seg-bg); padding: 0 12px; font-size: 16px; outline: none; -webkit-appearance: none; }
.m-dayhead { display: flex; justify-content: space-between; padding: 7px 16px; background: var(--dayhead-bg); color: var(--text2); font-size: 13.5px; position: sticky; top: 0; z-index: 1; }
.m-swipe { position: relative; overflow: hidden; background: var(--card); }
.m-swipe-btns { position: absolute; right: 0; top: 0; bottom: 0; display: flex; }
.m-swipe-btns button { width: 60px; color: #fff; display: flex; align-items: center; justify-content: center; }
.m-swipe-btns .ins { background: #78c26c; }
.m-swipe-btns .ed { background: #ee8b67; }
.m-swipe-btns .del { background: #e5604e; }
.m-hrow { display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 14px; background: var(--card); border-bottom: .5px solid var(--sep); position: relative; transition: transform .2s; }
.m-hrow > .ticon { width: 30px; }
.m-hrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.m-hrow-main small { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-hrow-main span { font-size: 16px; white-space: nowrap; }
.m-hrow-main em { font-size: 12px; color: var(--text2); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-hrow-dur { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.m-hrow.running .m-hrow-dur { color: #3a8ae6; }
.m-statbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; }
.m-untracked { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--text2); }
.m-nav-btn.gear { color: var(--text); }
.m-pie { display: flex; justify-content: center; padding: 6px 0 4px; }
.m-pie svg { max-width: 86vw; height: auto; }
.m-legend { padding: 4px 0 20px; }
.m-legend-row { display: flex; align-items: center; gap: 12px; padding: 7px 16px; }
.m-legend-row .name { flex: 1; font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-legend-row .vals { text-align: right; line-height: 1.1; }
.m-legend-row .vals b { display: block; font-size: 21px; font-weight: 300; font-variant-numeric: tabular-nums; }
.m-legend-row .vals small { font-size: 11px; color: var(--text2); }
.m-dot { width: 16px; height: 16px; border-radius: 4px; flex: none; border: .5px solid rgba(0,0,0,.08); }
.m-drill { display: flex; align-items: center; gap: 2px; padding: 4px 12px; color: var(--accent); font-size: 15px; }
.m-chart { padding: 6px 8px; }
.m-chart.small { padding: 4px 0 0; }
.m-cal { position: relative; height: 1056px; background: var(--card); }
.m-cal-hour { position: absolute; left: 0; right: 0; height: 44px; border-top: .5px solid var(--sep); }
.m-cal-hour span { position: absolute; left: 6px; top: -7px; font-size: 10px; color: var(--text3); background: var(--card); padding: 0 2px; }
.m-cal-block { position: absolute; left: 58px; right: 8px; border-radius: 4px; padding: 2px 6px; font-size: 12px; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.m-cal-block small { display: block; font-size: 10px; opacity: .85; }
.m-blocks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; padding: 8px 12px 12px; background: var(--card); }
.m-blocks .b { aspect-ratio: 1; border-radius: 3px; position: relative; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.m-blocks .b.empty { background: var(--seg-bg); box-shadow: none; }
.m-blocks .b i { position: absolute; left: 2px; top: 0; font-size: 7px; font-style: normal; color: rgba(0,0,0,.4); }

/* lists */
.m-list.grouped { margin: 14px 16px; background: var(--card); border-radius: 12px; overflow: hidden; }
.m-list.flush { background: var(--card); }
.m-list-title { padding: 18px 32px 2px; font-size: 13px; color: var(--text2); text-transform: uppercase; }
.m-row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 12px 6px 16px; border-bottom: .5px solid var(--sep); }
.m-list .m-row:last-child { border-bottom: 0; }
.m-row-main { flex: 1; min-width: 0; }
.m-row-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row-sub { font-size: 12px; color: var(--text2); }
.m-row-detail { color: var(--text2); font-size: 15px; display: flex; align-items: center; gap: 6px; max-width: 62%; min-width: 0; overflow: hidden; white-space: nowrap; justify-content: flex-end; }
.m-row-detail > span { overflow: hidden; text-overflow: ellipsis; }
.m-count { background: var(--seg-bg); color: var(--text2); border-radius: 9px; padding: 1px 8px; font-size: 12px; }
.m-check svg.g, .m-check.plain svg.g { color: var(--accent); width: 20px; height: 20px; }
.m-check.plain svg.g { color: var(--text); }
.m-moreicon { width: 29px; height: 29px; border-radius: 7px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.m-moreicon svg.g { width: 18px; height: 18px; }
.m-archive-ico { width: 28px; text-align: center; color: var(--text2); }
.m-move { width: 34px; height: 34px; color: var(--accent); font-size: 18px; }
.m-section-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px 6px 16px; color: var(--text2); font-size: 15px; }
.m-section-head button { color: var(--text); width: 36px; height: 30px; display: flex; align-items: center; justify-content: center; }
.m-hint { text-align: center; color: var(--text); padding: 14px; font-size: 15px; background: var(--card); }
.m-empty { text-align: center; padding: 70px 32px; color: var(--text2); }
.m-empty b { display: block; font-size: 18px; color: var(--text); margin-bottom: 6px; font-weight: 600; }
.m-empty p { font-size: 14px; }
.muted { color: var(--text3); }

/* inputs */
.m-inline-text { border: 0; background: transparent; text-align: right; font-size: 16px; width: 100%; outline: none; color: var(--text); }
.m-inline-num { width: 58px; text-align: right; border: 0; border-bottom: 1px solid var(--sep); background: transparent; font-size: 16px; outline: none; color: var(--text); }
.m-inline-date, .m-inline-select { border: 0; background: transparent; font-size: 15px; color: var(--text2); outline: none; text-align: right; -webkit-appearance: none; }
.m-textarea { display: block; width: calc(100% - 32px); margin: 16px; min-height: 180px; border: 0; border-radius: 12px; background: var(--card); padding: 12px; font-size: 16px; outline: none; color: var(--text); }
.m-tagbox { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; background: var(--card); border-bottom: .5px solid var(--sep); }
.m-tagbox .m-chip { font-size: 14px; padding: 3px 8px; display: inline-flex; align-items: center; }
.m-tagbox .m-chip button { margin-left: 4px; color: inherit; font-size: 16px; }
.m-taginput { flex: 1; min-width: 140px; border: 0; outline: none; font-size: 16px; background: transparent; color: var(--text); }
.m-switch { display: inline-block; flex: none; }
.m-switch input { display: none; }
.m-switch span { width: 51px; height: 31px; border-radius: 16px; background: #e5e5ea; position: relative; display: block; transition: background .2s; }
.m-switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.m-switch input:checked + span { background: #34c759; }
.m-switch input:checked + span::after { transform: translateX(20px); }
.m-quick { display: flex; gap: 12px; padding: 14px 16px; }
.m-quick button { flex: 1; height: 42px; border-radius: 10px; background: var(--card); font-size: 15px; color: var(--accent); }
.m-days { display: flex; gap: 3px; }
.m-days button { width: 31px; height: 31px; border-radius: 50%; font-size: 11px; background: var(--seg-bg); }
.m-days button.on { background: var(--accent); color: #fff; }
.m-swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); display: inline-block; }
.m-iconsets { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; background: var(--card); border-bottom: .5px solid var(--sep); }
.m-iconsets button { padding: 4px 10px; border-radius: 12px; background: var(--seg-bg); font-size: 13px; white-space: nowrap; }
.m-iconsets button.on { background: var(--accent); color: #fff; }
.m-icongrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 10px; background: var(--card); }
.m-icongrid button { height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.m-icongrid button:active { background: var(--seg-bg); }
.m-colorgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 18px; background: var(--card); }
.m-colorgrid button { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.m-colorgrid button.on { outline: 3px solid var(--accent); outline-offset: 2px; }

/* cards */
.m-card { margin: 12px 16px; background: var(--card); border-radius: 12px; padding: 12px 14px; }
.m-card.head { display: flex; gap: 14px; align-items: center; }
.m-card.head b { font-size: 22px; font-weight: 400; display: block; }
.m-card.head small { color: var(--text2); font-size: 13px; }
.m-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; padding-bottom: 6px; }
.m-card-head button { color: var(--text); height: 30px; min-width: 32px; display: flex; align-items: center; justify-content: center; }
.m-card-head .btns { display: flex; gap: 6px; }
.m-card.list { padding: 0; overflow: hidden; }
.m-card.list .m-card-head { padding: 12px 14px 6px; }
.m-card.list .m-row:last-child, .m-card.list .m-hrow:last-child { border-bottom: 0; }
.m-card-sub { padding: 7px 16px; font-size: 15px; color: var(--text); background: var(--dayhead-bg); }
.m-triple { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 4px; margin: 6px 0 10px; }
.m-triple small { display: block; font-size: 13px; color: var(--text); }
.m-triple b { font-size: 17px; font-weight: 400; display: block; font-variant-numeric: tabular-nums; }
.m-triple i { font-size: 12px; color: var(--text2); font-style: normal; }
.m-plain { display: block; margin: 12px 16px; width: calc(100% - 32px); height: 48px; border-radius: 12px; background: var(--card); font-size: 17px; color: var(--text); }
.m-danger { display: block; margin: 26px 16px; width: calc(100% - 32px); height: 48px; border-radius: 12px; background: var(--card); color: #ff3b30; font-size: 17px; }
.m-rangebar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
.m-rangebar > button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.m-rangebar .m-seg button { min-width: 64px; }
.m-reportsum { text-align: center; color: var(--text2); font-size: 13px; padding: 6px 0 2px; }

/* goals */
.m-list.goals .m-row { padding-top: 9px; padding-bottom: 9px; }
.m-row.goal .m-row-title { font-size: 17px; }
.m-goalbar { width: 168px; flex: none; }
.m-goalbar .vals { display: flex; justify-content: space-between; font-size: 13px; font-variant-numeric: tabular-nums; }
.m-goalbar .track { height: 4px; background: var(--seg-bg); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.m-goalbar .track i { display: block; height: 100%; border-radius: 2px; }
.m-card .m-goalbar { width: 100%; }
.m-goalhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; margin-bottom: 8px; }
.m-goalhead b { font-size: 19px; font-weight: 400; }

/* pomodoro */
.m-screen.pomodoro .m-body { background: var(--bg); }
.m-pomo { position: relative; width: 300px; height: 300px; margin: 28px auto 12px; }
.m-pomo-ring { width: 100%; height: 100%; }
.m-pomo-ring .track { fill: none; stroke: #cfe5d4; stroke-width: 14; }
.m-pomo-ring .bar { fill: none; stroke: #4f8f5c; stroke-width: 14; }
.m-pomo-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.m-pomo-type { font-size: 17px; display: flex; align-items: center; gap: 6px; }
.m-pomo-left { font-size: 52px; font-weight: 300; font-variant-numeric: tabular-nums; }
.m-pomo-el, .m-pomo-n, .m-pomo-count { font-size: 15px; color: var(--text2); text-align: center; }
.m-pomo-btns { display: flex; justify-content: center; gap: 18px; }
.m-pomo-btns button { width: 92px; height: 92px; border-radius: 50%; background: var(--seg-bg); font-size: 16px; font-weight: 500; }
.m-about { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 24px; text-align: center; }
.m-about img { width: 84px; height: 84px; border-radius: 19px; }
.m-about b { font-size: 21px; }
.m-about small { color: var(--text2); font-size: 13px; }
.m-code { font-size: 22px; letter-spacing: 3px; color: var(--text); }

/* sheets */
.m-sheets { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.m-sheet { position: absolute; inset: 0; pointer-events: auto; background: rgba(0,0,0,.22); transition: background .25s; }
.m-sheet.under { background: transparent; }
.m-sheet-card { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 10px); bottom: 0; background: var(--sheet-bg); border-radius: 12px 12px 0 0;
  display: flex; flex-direction: column; overflow: hidden; transition: transform .32s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -2px 16px rgba(0,0,0,.08); }
.m-sheet.in .m-sheet-card, .m-sheet.out .m-sheet-card { transform: translateY(100%); }
.m-sheet.in { background: transparent; }
.m-sheet.under .m-sheet-card { transform: scale(.94) translateY(-6px); }
.m-sheet .m-nav { padding-top: 0; height: 50px; }
.m-grab { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 36px; height: 5px; border-radius: 3px; background: var(--nav-sub); opacity: .55; z-index: 2; }
.m-sheet .m-body { background: var(--sheet-bg); }
.m-action { position: fixed; inset: 0; z-index: 100; }
.m-action-dim { position: absolute; inset: 0; background: rgba(0,0,0,.3); animation: fade .2s; }
.m-action-box { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; animation: rise .26s cubic-bezier(.2,.8,.2,1); max-height: 80vh; }
.m-action.out .m-action-box { transform: translateY(120%); transition: transform .2s; }
.m-action-group { background: rgba(249,249,249,.97); border-radius: 13px; overflow-y: auto; }
.m-action-title { font-size: 13px; color: #8e8e93; padding: 14px; text-align: center; border-bottom: .5px solid #d6d6d6; }
.m-action-btn { display: flex; width: 100%; justify-content: center; align-items: center; gap: 6px; min-height: 56px; font-size: 19px; color: #2f7de1; border-bottom: .5px solid #d6d6d6; padding: 0 12px; }
.m-action-btn:last-child { border-bottom: 0; }
.m-action-btn.danger { color: #ff3b30; }
.m-action-btn.cancel { background: #fff; border-radius: 13px; font-weight: 600; border: 0; }
.m-action-btn svg.g { width: 18px; height: 18px; }
.m-app[data-theme="dark"] .m-action-group, .m-app[data-theme="dark"] .m-action-btn.cancel { background: #2c2c2e; }
.m-offline { position: fixed; top: calc(env(safe-area-inset-top) + 52px); left: 50%; transform: translateX(-50%); background: #ff9500; color: #fff; font-size: 13px; padding: 4px 12px; border-radius: 12px; z-index: 200; }
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }