:root {
  color-scheme: light;
  --maple-bg: #f6faff;
  --maple-surface: #ffffff;
  --maple-surface-soft: #f8fbff;
  --maple-ink: #24364b;
  --maple-muted: #64748b;
  --maple-subtle: #8190a4;
  --maple-line: #dce7f3;
  --maple-blue: #69b8e7;
  --maple-blue-deep: #4c8fca;
  --maple-purple: #917dde;
  --maple-purple-deep: #7161bd;
  --maple-hunt: #4e9f75;
  --maple-hunt-soft: #eaf7f0;
  --maple-meso: #d68a4c;
  --maple-meso-soft: #fff4e8;
  --maple-warning: #d95670;
  --maple-warning-soft: #fff0f3;
  --maple-danger: #c84d65;
  --maple-shadow: 0 18px 48px rgba(58, 84, 124, .11);
  --maple-shadow-soft: 0 10px 28px rgba(58, 84, 124, .08);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --state-accent: var(--maple-purple);
  --state-accent-deep: var(--maple-purple-deep);
  --state-soft: #f2efff;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--maple-bg); scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--maple-ink);
  background:
    radial-gradient(circle at 8% 0, rgba(195, 233, 255, .64), transparent 31rem),
    radial-gradient(circle at 96% 4%, rgba(222, 211, 255, .56), transparent 35rem),
    linear-gradient(180deg, #f8fcff 0%, #f5f7ff 52%, #f8fbff 100%);
  font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  word-break: keep-all;
}
body[data-timer-state="running"][data-phase="hunt"] { --state-accent: var(--maple-hunt); --state-accent-deep: #367e5a; --state-soft: var(--maple-hunt-soft); }
body[data-timer-state="running"][data-phase="rec"] { --state-accent: var(--maple-meso); --state-accent-deep: #b66d35; --state-soft: var(--maple-meso-soft); }
body[data-timer-state="paused"] { --state-accent: var(--maple-purple); --state-accent-deep: var(--maple-purple-deep); --state-soft: #f2efff; }
body[data-timer-state="pending"] { --state-accent: #7f68d0; --state-accent-deep: #6750b2; --state-soft: #f2efff; }
body[data-warning="true"] { --state-accent: var(--maple-warning); --state-accent-deep: #b93754; --state-soft: var(--maple-warning-soft); }
body.timer-drawer-open { overflow: hidden; }

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(76, 143, 202, .34);
  outline-offset: 2px;
}
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon .fill { fill: currentColor; stroke: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden-media { position: fixed !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
kbd { min-width: 34px; min-height: 28px; display: inline-grid; place-items: center; padding: 0 7px; border: 1px solid #c9d7e7; border-bottom-width: 3px; border-radius: 8px; color: #40566f; background: #fff; box-shadow: 0 2px 0 #edf2f7; font-size: 11px; font-weight: 900; }

/* World surface and shell */
.camp-page { position: relative; isolation: isolate; width: min(1480px, 100%); margin: 0 auto; padding: 18px clamp(16px, 2.2vw, 32px) calc(38px + var(--safe-bottom)); }
.camp-page::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(105, 184, 231, .2) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(145, 125, 222, .16) 0 1px, transparent 1.5px);
  background-position: 0 0, 23px 29px;
  background-size: 46px 46px, 62px 62px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 58%);
  content: "";
  pointer-events: none;
}
.camp-page::after {
  position: fixed;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(209, 235, 233, 0), rgba(209, 235, 233, .42));
  clip-path: polygon(0 64%, 7% 50%, 13% 68%, 21% 42%, 29% 63%, 38% 33%, 47% 61%, 57% 41%, 67% 66%, 77% 35%, 86% 56%, 94% 40%, 100% 57%, 100% 100%, 0 100%);
  content: "";
  pointer-events: none;
}
.camp-app { position: relative; }
.field-card, .dashboard-card, .record-summary-card {
  border: 1px solid rgba(220, 231, 243, .96);
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--maple-shadow);
}
@supports (backdrop-filter: blur(14px)) {
  .camp-topbar, .field-card, .dashboard-card, .record-summary-card, .main-action-dock { backdrop-filter: blur(16px); }
}

/* Command header */
.camp-topbar {
  position: sticky;
  z-index: 60;
  top: calc(var(--mwr-navbar-height, 0px) + 10px);
  min-height: 70px;
  display: grid;
  grid-template-columns: auto minmax(330px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 21px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 34px rgba(56, 82, 120, .12);
}
.camp-brand { min-width: 190px; display: inline-flex; align-items: center; gap: 11px; color: var(--maple-ink); text-decoration: none; }
.brand-emblem { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #72c397, var(--maple-blue)); box-shadow: inset 0 1px rgba(255,255,255,.55), 0 8px 18px rgba(77, 149, 134, .2); }
.brand-emblem .icon { width: 24px; height: 24px; }
.camp-brand > span:last-child { display: grid; line-height: 1.08; }
.camp-brand small { color: var(--maple-subtle); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.camp-brand strong { margin-top: 4px; font-size: 21px; letter-spacing: -.045em; }
.hub-tabs { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--maple-line); border-radius: 14px; background: #f6f9fd; }
.hub-tabs a { min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; color: var(--maple-muted); text-decoration: none; font-size: 12px; font-weight: 850; }
.hub-tabs a:hover { color: var(--maple-blue-deep); background: #fff; }
.hub-tabs a.active { color: #fff; background: linear-gradient(135deg, var(--maple-blue), var(--maple-purple)); box-shadow: 0 6px 16px rgba(87, 108, 185, .2); }
.hub-tabs .icon { width: 17px; height: 17px; }
.hub-account-control { min-width: 190px; }
.hub-account-control label, .hub-profile-link { min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--maple-line); border-radius: 14px; color: #50667f; background: #f8fbff; }
.hub-account-control label > span { flex: none; font-size: 11px; font-weight: 850; }
.hub-account-control select { min-width: 0; max-width: 170px; border: 0; color: var(--maple-ink); background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }
.hub-profile-link { justify-content: center; color: var(--maple-blue-deep); text-decoration: none; font-size: 12px; font-weight: 850; }
.top-actions { display: flex; gap: 6px; }
.header-pip-button, .top-action-button, .drawer-close { min-height: 44px; border: 1px solid var(--maple-line); border-radius: 13px; cursor: pointer; }
.header-pip-button { min-width: 150px; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--maple-blue), var(--maple-purple)); box-shadow: 0 8px 18px rgba(87, 108, 185, .2); }
.header-pip-button > .icon { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: rgba(255,255,255,.18); }
.header-pip-button > span { min-width: 0; display: grid; text-align: left; }
.header-pip-button strong { font-size: 12px; white-space: nowrap; }
.header-pip-button small { margin-top: 2px; color: rgba(255,255,255,.82); font-size: 10px; white-space: nowrap; }
.header-pip-button[aria-pressed="true"] { background: linear-gradient(135deg, #4b84c5, #725bc0); box-shadow: inset 0 2px 7px rgba(39, 51, 102, .22); }
.top-action-button, .drawer-close { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; color: #566b83; background: #fff; font-size: 12px; font-weight: 850; }
.top-action-button:hover, .drawer-close:hover { border-color: #b9d4ec; color: var(--maple-blue-deep); background: #f7fbff; }
.top-action-button span { display: none; }
.hub-inline-alert { min-height: 44px; display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 9px 12px; border: 1px solid #ead9a9; border-radius: 13px; color: #806638; background: #fff9e9; font-size: 13px; }
.hub-inline-alert .icon { color: #c4933f; }

/* Twelve-column dashboard */
.camp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.operation-card { position: relative; grid-column: span 8; min-width: 0; overflow: hidden; padding: clamp(18px, 2vw, 26px); }
.operation-card::before { position: absolute; top: -155px; right: -115px; width: 330px; height: 330px; border: 1px solid rgba(145, 125, 222, .12); border-radius: 50%; background: radial-gradient(circle, rgba(145,125,222,.13), transparent 68%); content: ""; pointer-events: none; }
.operation-card::after { position: absolute; bottom: -66px; left: -30px; width: 240px; height: 115px; border-radius: 50% 60% 0 0; background: linear-gradient(180deg, rgba(111, 181, 151, .11), rgba(105,184,231,.04)); content: ""; pointer-events: none; }
.camp-sidebar { min-width: 0; grid-column: span 4; }
.session-command-card { padding: 19px; background: radial-gradient(circle at 100% 0, rgba(220, 209, 255, .32), transparent 16rem), rgba(255,255,255,.97); }
.camp-insights-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: 16px; }
.event-feed-card, .record-summary-card { min-width: 0; padding: 19px; }

/* Timer command surface */
.field-card-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.phase-badge { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(145, 125, 222, .24); border-radius: 999px; color: var(--state-accent-deep); background: var(--state-soft); font-size: 12px; font-weight: 900; }
.phase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--state-accent); box-shadow: 0 0 0 5px rgba(145,125,222,.12); }
body[data-timer-state="running"] .phase-dot { animation: phasePulse 1.7s ease-in-out infinite; }
.hotkey-chip { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; color: var(--maple-muted); font-size: 12px; font-weight: 800; }
.hotkey-chip .icon { color: var(--maple-purple-deep); }
.dashboard-timer-console { position: relative; z-index: 2; min-height: 390px; display: grid; grid-template-columns: minmax(260px, 335px) minmax(270px, 1fr); align-items: center; gap: clamp(24px, 4vw, 54px); padding: clamp(20px, 3vw, 38px); border: 1px solid #e1ebf5; border-radius: 21px; background: linear-gradient(145deg, rgba(239,249,255,.96), rgba(247,243,255,.96)); }
.dashboard-timer-console::before { position: absolute; inset: 14px; border: 1px dashed rgba(105, 184, 231, .16); border-radius: 16px; content: ""; pointer-events: none; }
.timer-ring { position: relative; width: min(325px, 100%); aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(67, 94, 136, .13)); }
.timer-ring::before, .timer-ring::after { position: absolute; z-index: 2; width: 9px; height: 9px; border: 3px solid #fff; border-radius: 50%; background: var(--state-accent); box-shadow: 0 4px 12px rgba(67,94,136,.2); content: ""; }
.timer-ring::before { top: 9px; left: calc(50% - 4px); }
.timer-ring::after { right: 9px; bottom: calc(50% - 4px); }
.timer-ring svg { width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.timer-ring circle { fill: none; }
.ring-aura { stroke: rgba(105, 184, 231, .13); stroke-width: 2; }
.ring-runes { stroke: rgba(113, 97, 189, .32); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1.2 4.8; }
.ring-track { stroke: rgba(129, 149, 177, .14); stroke-width: 15; }
.ring-value { stroke: var(--state-accent); stroke-width: 15; stroke-linecap: round; stroke-dasharray: 854.5; stroke-dashoffset: 854.5; transition: stroke-dashoffset .18s linear, stroke .25s ease; }
.timer-face { position: absolute; inset: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.98); border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: inset 0 1px rgba(255,255,255,.9), 0 14px 36px rgba(70,98,140,.12); }
.timer-face span { color: var(--state-accent-deep); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.timer-face strong { margin: 8px 0 5px; color: #1f3248; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: clamp(66px, 6.1vw, 92px); font-weight: 900; line-height: .92; letter-spacing: -.095em; font-variant-numeric: tabular-nums; }
.timer-face small { color: var(--maple-muted); font-size: 12px; font-weight: 800; }
body[data-warning="true"] .timer-face { box-shadow: 0 0 0 8px rgba(217,86,112,.08), 0 14px 36px rgba(151,51,74,.15); }
body[data-warning="true"] .timer-face strong { color: #b93754; animation: warningPulse .72s ease-in-out infinite alternate; }
.timer-message { position: relative; min-width: 0; }
.timer-section-kicker { display: block; margin-bottom: 7px; color: var(--state-accent-deep); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.timer-message h1 { max-width: 13ch; margin: 0; color: #263950; font-size: clamp(31px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.05em; }
.timer-message > p { max-width: 47ch; min-height: 44px; margin: 13px 0 20px; color: var(--maple-muted); font-size: 14px; line-height: 1.7; }
.next-callout { min-height: 76px; display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid #dbe7f3; border-radius: 17px; color: #435b73; background: rgba(255,255,255,.86); box-shadow: var(--maple-shadow-soft); }
.next-callout-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--state-accent), var(--state-accent-deep)); }
.next-callout > span:last-child { min-width: 0; display: grid; }
.next-callout small { color: var(--maple-subtle); font-size: 11px; font-weight: 850; }
.next-callout strong { overflow: hidden; margin-top: 2px; color: #31475f; font-size: 15px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.focus-meta-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.focus-meta-strip > span { min-width: 0; min-height: 50px; display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid #e0e9f3; border-radius: 13px; color: #527a97; background: rgba(255,255,255,.72); }
.focus-meta-strip > span:nth-child(2) { color: #6d65ad; }
.focus-meta-strip > span:nth-child(3) { color: #4a827f; }
.focus-meta-strip .icon { width: 17px; height: 17px; }
.focus-meta-strip > span > span { min-width: 0; display: grid; }
.focus-meta-strip small { color: var(--maple-subtle); font-size: 10px; font-weight: 800; }
.focus-meta-strip strong { overflow: hidden; margin-top: 1px; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }

.route-strip { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; gap: 7px; margin-top: 13px; }
.route-step { min-width: 0; min-height: 62px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e1e9f2; border-radius: 15px; background: #f9fbfe; opacity: .65; }
.route-step.active { border-color: rgba(78,159,117,.35); background: var(--maple-hunt-soft); box-shadow: 0 8px 18px rgba(78,159,117,.09); opacity: 1; }
#recStep.active { border-color: rgba(214,138,76,.36); background: var(--maple-meso-soft); box-shadow: 0 8px 18px rgba(214,138,76,.09); }
.route-step.disabled { filter: grayscale(.75); }
.route-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--maple-hunt); background: #fff; }
#recStep .route-icon { color: var(--maple-meso); }
.route-step > span:nth-child(2) { min-width: 0; display: grid; }
.route-step small { color: var(--maple-subtle); font-size: 10px; font-weight: 800; }
.route-step strong, .route-step b { font-size: 13px; font-weight: 900; }
.route-step b { color: #40556d; font-variant-numeric: tabular-nums; }
.route-arrow { color: #9aaabd; font-weight: 900; text-align: center; }
.field-progress { position: relative; z-index: 2; height: 8px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #e8eef5; }
.field-progress span, .goal-track span, .confidence-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--state-accent), var(--maple-purple)); transition: width .18s linear; }
.status-bar { position: relative; z-index: 2; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 7px 0; padding: 6px 10px; border-radius: 11px; color: #5f7289; background: #f8fbff; font-size: 12px; font-weight: 800; text-align: center; }
.status-bar .icon { width: 16px; height: 16px; color: var(--state-accent-deep); }

.main-action-dock { position: relative; z-index: 3; display: grid; grid-template-areas: "controls" "end"; gap: 9px; }
.main-controls { grid-area: controls; display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 8px; }
.camp-control { min-width: 0; min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border: 1px solid #d8e3ee; border-bottom-width: 3px; border-radius: 15px; color: #40566e; background: #fff; box-shadow: 0 7px 17px rgba(67,93,129,.07); cursor: pointer; font-weight: 900; transition: transform .14s ease, box-shadow .14s ease; }
.camp-control:hover { transform: translateY(-1px); border-color: #bad4eb; box-shadow: 0 10px 20px rgba(67,93,129,.11); }
.camp-control:active { transform: translateY(1px); }
.camp-control.primary { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--maple-blue), var(--maple-purple)); }
.camp-control span { display: grid; }
.camp-control strong { font-size: 13px; }
.camp-control small { color: rgba(255,255,255,.84); font-size: 10px; }
.session-end-action { grid-area: end; width: 100%; min-height: 72px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #dce5ef; border-radius: 17px; color: #6b7b8f; background: #f8fafc; box-shadow: 0 7px 17px rgba(72,91,122,.05); text-align: left; cursor: pointer; }
.session-end-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #8290a2; background: #edf2f7; }
.session-end-copy { min-width: 0; display: grid; }
.session-end-copy strong { font-size: 15px; }
.session-end-copy small { overflow: hidden; margin-top: 3px; color: #8390a2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.session-end-action[data-state="active"], .session-end-action[data-state="pending"] { border-color: transparent; color: #fff; box-shadow: 0 11px 24px rgba(84,105,190,.2); }
.session-end-action[data-state="active"] { background: linear-gradient(135deg, var(--maple-blue-deep), var(--maple-purple)); }
.session-end-action[data-state="pending"] { background: linear-gradient(135deg, #7b64c9, #9a75da); }
.session-end-action[data-state="active"] .session-end-icon, .session-end-action[data-state="pending"] .session-end-icon { color: #fff; background: rgba(255,255,255,.16); }
.session-end-action[data-state="active"] small, .session-end-action[data-state="pending"] small { color: rgba(255,255,255,.84); }
.session-end-action:disabled { cursor: not-allowed; opacity: .78; }
.session-end-action:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.02); }

/* Live metrics */
.section-heading { display: flex; align-items: center; gap: 10px; }
.section-heading > div { min-width: 0; display: grid; }
.section-heading small, .drawer-title small { color: var(--maple-subtle); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.section-heading h2 { margin: 2px 0 0; color: #2d4159; font-size: 17px; letter-spacing: -.035em; }
.section-heading p { margin: 3px 0 0; color: var(--maple-subtle); font-size: 11px; }
.section-heading.compact h2 { font-size: 16px; }
.heading-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--maple-blue-deep); background: #eaf7ff; }
.heading-icon.purple { color: var(--maple-purple-deep); background: #f1edff; }
.heading-icon.orange { color: #b66d35; background: var(--maple-meso-soft); }
.text-button { margin-left: auto; border: 0; color: var(--maple-purple-deep); background: transparent; cursor: pointer; font-size: 12px; font-weight: 900; text-decoration: none; }
.material-insight-card { position: relative; min-height: 77px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 14px; padding: 11px 12px 17px; overflow: hidden; border: 1px solid #d8e9f5; border-radius: 16px; background: linear-gradient(135deg, #edf8ff, #f4f1ff); }
.material-insight-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--maple-blue), var(--maple-purple)); box-shadow: 0 8px 18px rgba(96,121,196,.17); }
.material-insight-card > span:nth-child(2) { min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1px 9px; }
.material-insight-card small { grid-column: 1/-1; color: var(--maple-subtle); font-size: 10px; font-weight: 800; }
.material-insight-card strong { color: #385d87; font-size: 20px; letter-spacing: -.04em; }
.material-insight-card b { color: #7068a5; font-size: 11px; }
.material-progress { position: absolute; right: 12px; bottom: 8px; left: 12px; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(104,131,181,.13); }
.material-progress span, .cycle-alert-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--maple-blue), var(--maple-purple)); transition: width .2s linear; }
.cycle-alert-card { margin-top: 9px; padding: 12px; border: 1px solid #e0d9f5; border-radius: 16px; background: linear-gradient(145deg, #f7f3ff, #eff8ff); }
.cycle-alert-card[data-enabled="false"] { filter: saturate(.55); opacity: .7; }
.cycle-alert-head, .cycle-alert-head > span, .cycle-alert-main { display: flex; align-items: center; }
.cycle-alert-head { justify-content: space-between; gap: 8px; }
.cycle-alert-head > span { min-width: 0; gap: 8px; color: var(--maple-purple-deep); }
.cycle-alert-head > span > span { min-width: 0; display: grid; }
.cycle-alert-head small { color: #877ba9; font-size: 10px; font-weight: 800; }
.cycle-alert-head strong { color: #564a82; font-size: 13px; }
.cycle-alert-head > b, #cycleAlertSettingState { padding: 4px 8px; border-radius: 99px; color: #6956b6; background: rgba(133,105,218,.11); font-size: 10px; }
.cycle-alert-main { gap: 7px; margin: 10px 0 8px; }
.cycle-alert-main > span { min-width: 0; flex: 1; display: grid; padding: 8px 9px; border-radius: 11px; background: rgba(255,255,255,.76); }
.cycle-alert-main small { color: var(--maple-subtle); font-size: 10px; font-weight: 800; }
.cycle-alert-main strong { overflow: hidden; margin-top: 2px; color: #435873; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cycle-alert-progress { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(117,98,185,.13); }
.cycle-alert-card > button { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px; border: 1px solid #ddd6f1; border-radius: 11px; color: #6757a5; background: rgba(255,255,255,.82); cursor: pointer; font-size: 12px; font-weight: 850; }
.dashboard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 13px 0 10px; }
.dashboard-stat { min-width: 0; min-height: 67px; display: flex; flex-direction: column; justify-content: center; padding: 10px 11px; border: 1px solid #e1e9f2; border-radius: 13px; background: #fafcff; }
.dashboard-stat.featured { background: linear-gradient(145deg, #eef8ff, #f3efff); }
.dashboard-stat span { color: var(--maple-muted); font-size: 11px; font-weight: 800; }
.dashboard-stat strong { overflow: hidden; margin-top: 4px; color: #354b63; font-size: 18px; font-weight: 900; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dashboard-stat.featured strong { color: #526dae; }
.goal-card { padding: 13px; border: 1px solid #e2ddf4; border-radius: 16px; background: linear-gradient(145deg, #f5faff, #f6f2ff); }
.goal-head, .goal-head > span { display: flex; align-items: center; }
.goal-head { justify-content: space-between; gap: 10px; }
.goal-head > span { gap: 8px; }
.goal-head > span > span { display: grid; }
.goal-head .icon { color: var(--maple-purple-deep); }
.goal-head small { color: #7c729e; font-size: 10px; font-weight: 800; }
.goal-head strong { font-size: 13px; }
.goal-head b { color: #6753ae; font-size: 15px; }
.goal-track, .confidence-track { height: 8px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgba(117,93,190,.12); }
.goal-celebration { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #6a53b4; font-size: 12px; }

/* Session feed and connected ledger */
.event-feed-count { min-width: 30px; margin-left: auto; padding: 4px 8px; border-radius: 99px; color: #6956b6; background: #f0ebff; font-size: 11px; font-weight: 900; text-align: center; }
.session-event-list { max-height: 300px; display: grid; gap: 0; margin: 12px 0 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.session-event-list li { position: relative; min-width: 0; display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 9px; padding: 9px 4px; }
.session-event-list li + li { border-top: 1px solid #edf1f6; }
.event-marker { width: 9px; height: 9px; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; background: var(--maple-blue); box-shadow: 0 0 0 2px rgba(105,184,231,.18); }
.session-event-list li[data-type="cycle"] .event-marker { background: var(--maple-purple); box-shadow: 0 0 0 2px rgba(145,125,222,.18); }
.session-event-list li[data-type="pause"] .event-marker, .session-event-list li[data-type="break"] .event-marker { background: var(--maple-meso); }
.session-event-list li[data-type="screen"] .event-marker { background: var(--maple-warning); }
.session-event-list li > span:last-child { min-width: 0; display: grid; }
.session-event-list strong { overflow: hidden; color: #465b73; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.session-event-list small { margin-top: 2px; color: var(--maple-subtle); font-size: 11px; }
.event-feed-empty { display: block !important; padding: 28px 12px !important; color: var(--maple-subtle); font-size: 12px; line-height: 1.6; text-align: center; }
.hunting-ledger-card { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(241,250,255,.98), rgba(248,244,255,.98)); }
.hunting-ledger-card::before { position: absolute; top: -74px; right: -58px; width: 155px; height: 155px; border-radius: 50%; background: radial-gradient(circle, rgba(148,126,224,.12), transparent 68%); content: ""; pointer-events: none; }
.ledger-heading { position: relative; }
.ledger-heading > div { min-width: 0; flex: 1; }
.ledger-heading .text-button { flex: none; }
.ledger-quick-actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.ledger-quick-actions a { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dce8f3; border-radius: 11px; color: #58739c; background: rgba(255,255,255,.82); font-size: 12px; font-weight: 900; text-decoration: none; }
.ledger-quick-actions a:last-child { color: #6b5ba7; background: rgba(248,245,255,.9); }
.ledger-quick-actions svg { width: 15px; height: 15px; }
.record-summary-empty { position: relative; display: flex; align-items: flex-start; gap: 11px; }
.record-summary-empty > div { min-width: 0; }
.record-summary-empty small { color: var(--maple-subtle); font-size: 10px; font-weight: 900; }
.record-summary-empty h2 { margin: 3px 0 0; font-size: 17px; }
.record-summary-empty p { margin: 7px 0 0; color: var(--maple-muted); font-size: 12px; line-height: 1.6; }
.record-summary-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 11px; }
.record-summary-stats > span { min-width: 0; min-height: 74px; display: flex; flex-direction: column; justify-content: center; padding: 10px; border: 1px solid #e0e9f3; border-radius: 12px; background: rgba(255,255,255,.84); }
.record-summary-stats > span.primary { border-color: #cfe2f2; background: linear-gradient(145deg, #eaf8ff, #f1efff); }
.record-summary-stats small, .record-summary-stats strong, .record-summary-stats b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-summary-stats small { color: var(--maple-subtle); font-size: 10px; font-weight: 800; }
.record-summary-stats strong { margin-top: 4px; color: #425a75; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.record-summary-stats b { margin-top: 2px; color: #8996a6; font-size: 10px; }
.record-summary-stats .primary strong { color: #4e6eaa; }
.ledger-total-row { position: relative; display: grid; grid-template-columns: 1.35fr .65fr; gap: 7px; margin-top: 7px; }
.ledger-total-row > span { min-width: 0; padding: 9px 10px; border: 1px solid rgba(129,151,191,.16); border-radius: 11px; background: rgba(255,255,255,.7); }
.ledger-total-row small, .ledger-total-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-total-row small { color: var(--maple-subtle); font-size: 10px; font-weight: 800; }
.ledger-total-row strong { margin-top: 3px; color: #4b6079; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.record-recent-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin-top: 9px; overflow: hidden; border: 1px solid rgba(129,151,191,.16); border-radius: 11px; background: #e6edf4; }
.record-recent-list > a { min-width: 0; min-height: 46px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 3px; padding: 7px 9px; color: #607187; background: rgba(255,255,255,.9); text-decoration: none; }
.record-recent-list > a:hover { background: #fff; }
.record-recent-list > a span { min-width: 0; display: flex; align-items: center; gap: 5px; font-size: 11px; }
.record-recent-list > a span small { padding: 2px 5px; border-radius: 99px; color: #5f6cb0; background: #f0edff; font-size: 9px; font-weight: 900; }
.record-recent-list > a strong { max-width: 100%; overflow: hidden; color: #4e6380; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.record-recent-list > p { grid-column: 1/-1; margin: 0; padding: 16px 10px; color: var(--maple-subtle); background: rgba(255,255,255,.86); font-size: 12px; text-align: center; }
.record-primary-link { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; margin-top: 12px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--maple-blue), var(--maple-purple)); box-shadow: 0 8px 18px rgba(87,107,184,.18); font-size: 13px; font-weight: 900; text-decoration: none; }
.shortcut-help { margin: 12px 0 0; color: var(--maple-muted); font-size: 12px; text-align: center; }
.shortcut-help strong { color: var(--maple-purple-deep); }

/* Drawers and form components */
.drawer-backdrop { position: fixed; z-index: 100; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(34,47,68,.38); cursor: default; }
.camp-drawer { position: fixed; z-index: 101; top: 0; right: 0; width: min(460px, 100%); height: 100vh; height: 100dvh; overflow: hidden; border-left: 1px solid var(--maple-line); color: var(--maple-ink); background: #f7faff; box-shadow: -24px 0 70px rgba(35,49,73,.23); }
.drawer-header { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--maple-line); background: rgba(255,255,255,.97); }
.drawer-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.drawer-title > .icon { width: 42px; height: 42px; padding: 10px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--maple-blue), var(--maple-purple)); }
.drawer-title > span { min-width: 0; display: grid; }
.drawer-title strong { margin-top: 2px; font-size: 17px; }
.drawer-close { width: 44px; padding: 0; }
.drawer-tabs { height: 58px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--maple-line); background: rgba(255,255,255,.94); }
.drawer-tabs button { min-width: 0; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 11px; color: #70839a; background: transparent; cursor: pointer; font-size: 12px; font-weight: 850; }
.drawer-tabs button.active { border-color: #dce6f2; color: #5e62aa; background: linear-gradient(135deg, #edf8ff, #f2edff); }
.drawer-tabs .icon { width: 17px; height: 17px; }
.drawer-body { height: calc(100vh - 72px); height: calc(100dvh - 72px); padding: 13px; overflow-y: auto; overscroll-behavior: contain; }
.settings-drawer-body { height: calc(100vh - 130px); height: calc(100dvh - 130px); }
.drawer-tab-panel { display: grid; gap: 10px; }
.drawer-section { padding: 14px; border: 1px solid #dfe8f2; border-radius: 17px; background: #fff; box-shadow: 0 7px 18px rgba(70,94,129,.05); }
.drawer-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.drawer-section-head > div { min-width: 0; }
.drawer-section-head h3 { margin: 0; font-size: 14px; }
.drawer-section-head p { margin: 4px 0 0; color: var(--maple-muted); font-size: 11px; line-height: 1.5; }
.drawer-section-head > span, .drawer-section-head > b { flex: none; color: #5e6da8; font-size: 11px; font-weight: 900; }
.duration-control { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 7px; }
.duration-control button { min-height: 44px; display: grid; place-items: center; border: 1px solid var(--maple-line); border-radius: 11px; color: #5d7190; background: #f8fbff; cursor: pointer; }
.duration-control label { position: relative; }
.duration-control input { width: 100%; min-height: 44px; padding: 0 44px 0 12px; border: 1px solid #d8e3ef; border-radius: 11px; color: var(--maple-ink); background: #fbfdff; font-size: 14px; font-weight: 850; }
.duration-control label span { position: absolute; top: 50%; right: 13px; color: var(--maple-muted); font-size: 11px; transform: translateY(-50%); }
.drawer-section input[type="range"] { width: 100%; margin: 12px 0 5px; accent-color: var(--maple-purple); }
.preset-row { display: flex; flex-wrap: wrap; gap: 5px; }
.preset-row button { min-height: 38px; flex: 1 0 58px; padding: 0 8px; border: 1px solid var(--maple-line); border-radius: 10px; color: #61758e; background: #f9fbfe; cursor: pointer; font-size: 11px; font-weight: 850; }
.preset-row button.active { border-color: #b9d7ec; color: #507dad; background: #edf8ff; }
.split-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.select-field, .sound-select-label { min-width: 0; display: grid; gap: 6px; }
.select-field > span, .sound-select-label > span { color: #61758e; font-size: 11px; font-weight: 850; }
.select-field input, .select-field select, .sound-select-label select { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid #d8e3ef; border-radius: 11px; color: var(--maple-ink); background: #fbfdff; font-size: 12px; }
.switch-stack { display: grid; gap: 7px; }
.switch-row { min-height: 46px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #e1e9f2; border-radius: 11px; color: #4e637b; background: #f8fbff; font-size: 12px; cursor: pointer; }
.switch-row.standalone { margin-top: 9px; }
.switch-row input { width: 18px; height: 18px; accent-color: var(--maple-purple); }
.switch-row b { color: #6d62aa; font-size: 10px; }
.cycle-alert-fields { margin-top: 9px; }
.drawer-primary-button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--maple-blue), var(--maple-purple)); box-shadow: 0 8px 18px rgba(83,106,186,.16); cursor: pointer; font-size: 12px; font-weight: 900; }
.drawer-primary-button.subtle { border: 1px solid #ded7f2; color: #6858ac; background: #f8f5ff; box-shadow: none; }
.drawer-primary-button:disabled { filter: grayscale(.35); opacity: .55; }
.routine-preset-list { display: grid; gap: 7px; }
.routine-preset-empty { margin: 0; padding: 13px; border: 1px dashed #d7e2ed; border-radius: 11px; color: var(--maple-subtle); background: #fbfdff; font-size: 11px; line-height: 1.55; text-align: center; }
.routine-preset-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid #dfe8f1; border-radius: 12px; background: #fbfdff; }
.routine-preset-card > div:first-child { min-width: 0; display: grid; }
.routine-preset-card strong { overflow: hidden; color: #445872; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.routine-preset-card small { margin-top: 3px; color: var(--maple-subtle); font-size: 10px; }
.routine-preset-card > div:last-child { display: flex; gap: 4px; }
.routine-preset-card button { min-height: 34px; padding: 0 8px; border: 1px solid #dbe4ee; border-radius: 9px; color: #61758d; background: #fff; cursor: pointer; font-size: 10px; font-weight: 850; }
.routine-preset-card button[data-preset-action="apply"] { color: #4f7cac; background: #eef8ff; }
.routine-preset-card button[data-preset-action="delete"] { color: #ad586c; }
.sound-card .section-heading { margin-bottom: 11px; }
.volume-percent { margin-left: auto; color: #6956b6; font-size: 12px; }
.volume-control { display: grid; gap: 8px; margin-top: 10px; }
.volume-control > span { display: flex; align-items: center; gap: 7px; color: #52677f; font-size: 11px; font-weight: 850; }
.volume-control input { width: 100%; accent-color: var(--maple-purple); }
.sound-actions, .utility-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.utility-row:not(.two) { grid-template-columns: 1fr; }
.sound-actions button, .utility-button, .tool-card-button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--maple-line); border-radius: 11px; color: #5b7089; background: #f9fbfe; cursor: pointer; font-size: 12px; font-weight: 850; }
.tool-quick-grid.single { padding: 0; border: 0; background: transparent; box-shadow: none; }
.tool-card-button { width: 100%; justify-content: flex-start; padding: 10px; background: #fff; }
.tool-card-button > span { display: grid; text-align: left; }
.tool-card-button small { margin-top: 2px; color: var(--maple-subtle); font-size: 10px; }
.tool-card-button.waiting { border-color: #b9d6ed; color: var(--maple-blue-deep); background: #edf8ff; }
.memo-card textarea { width: 100%; min-height: 100px; margin-top: 10px; padding: 10px 11px; resize: vertical; border: 1px solid #d8e3ef; border-radius: 11px; color: var(--maple-ink); background: #fbfdff; font-size: 12px; line-height: 1.6; }
.memo-card > p { margin: 7px 1px 0; color: var(--maple-subtle); font-size: 10px; }
.memo-count { margin-left: auto; color: var(--maple-subtle); font-size: 10px; }
.wake-lock-card > p { margin: 10px 1px; color: var(--maple-muted); font-size: 11px; line-height: 1.6; }
.wake-lock-card .section-heading > b { margin-left: auto; color: #4c8188; font-size: 11px; }
.device-support-note, .privacy-note { margin-top: 9px; padding: 9px 10px; border-radius: 10px; color: #5f748c; background: linear-gradient(135deg, #eef9ff, #f5f2ff); font-size: 10px; line-height: 1.55; }

/* Screen monitor */
.monitor-strip { min-height: 54px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid #dfe8f1; border-radius: 13px; background: #f8fbff; }
.monitor-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: #9aa9ba; }
.monitor-strip[data-state="active"] .monitor-mark { background: var(--maple-hunt); }
.monitor-strip[data-state="missing"] .monitor-mark { background: var(--maple-warning); }
.monitor-strip > span:nth-child(2) { min-width: 0; display: grid; }
.monitor-strip strong { font-size: 12px; }
.monitor-strip small { overflow: hidden; margin-top: 2px; color: var(--maple-subtle); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.monitor-strip > b { color: #5e6f83; font-size: 11px; }
.monitor-strip > button { min-height: 36px; padding: 0 9px; border: 1px solid #d9e4ee; border-radius: 9px; color: #557596; background: #fff; cursor: pointer; font-size: 10px; font-weight: 850; }
.monitor-settings-card { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 10px; margin-top: 9px; padding: 9px; border: 1px solid #e1e9f2; border-radius: 13px; background: #fbfdff; }
.monitor-live-preview { overflow: hidden; border-radius: 10px; background: #172231; }
.monitor-live-preview canvas { display: block; width: 84px; height: 86px; object-fit: cover; }
.monitor-card-copy { min-width: 0; }
.monitor-card-copy > strong { font-size: 12px; }
.monitor-card-copy > p { margin: 4px 0 0; color: var(--maple-muted); font-size: 10px; line-height: 1.45; }
.monitor-state-row { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 5px; margin-top: 7px; }
.monitor-state-row > span { width: 7px; height: 7px; border-radius: 50%; background: #9aa9ba; }
.monitor-state-row[data-state="active"] > span { background: var(--maple-hunt); }
.monitor-state-row[data-state="missing"] > span { background: var(--maple-warning); }
.monitor-state-row b, .monitor-state-row strong { font-size: 10px; }
.confidence-track { height: 5px; margin-top: 6px; background: #e5ecf3; }
.privacy-note { display: flex; gap: 7px; }
.privacy-note .icon { width: 15px; height: 15px; color: var(--maple-hunt); }

/* Modal surfaces */
.hunt-result-dialog, .preset-dialog, .capture-dialog { position: fixed; inset: 0; max-width: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid #dce6f1; color: var(--maple-ink); background: #fff; box-shadow: 0 28px 86px rgba(31,43,66,.3); }
.hunt-result-dialog { width: min(690px, calc(100% - 24px)); max-height: min(88vh, 780px); max-height: min(88dvh, 780px); border-radius: 23px; }
.hunt-result-dialog[open] { display: block; position: fixed; inset: 0; margin: auto; }
.hunt-result-dialog::backdrop, .preset-dialog::backdrop, .capture-dialog::backdrop { background: rgba(32,45,67,.48); }
@supports (backdrop-filter: blur(4px)) { .hunt-result-dialog::backdrop, .preset-dialog::backdrop, .capture-dialog::backdrop { backdrop-filter: blur(4px); } }
.hunt-result-dialog form { max-height: min(88vh,780px); max-height: min(88dvh,780px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.hunt-result-dialog header, .preset-dialog header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #e8eef5; background: linear-gradient(135deg, #f0f9ff, #f6f2ff); }
.hunt-result-dialog header > div, .preset-dialog header > div { min-width: 0; display: grid; }
.hunt-result-dialog header small, .preset-dialog header small { color: #7769a6; font-size: 10px; font-weight: 900; }
.hunt-result-dialog header h2, .preset-dialog header h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.04em; }
.hunt-result-dialog header > button, .preset-dialog header > button { width: 44px; height: 44px; display: grid; place-items: center; margin-left: auto; border: 1px solid #dbe5ef; border-radius: 12px; color: #60758d; background: #fff; cursor: pointer; }
.result-dialog-body { min-height: 0; padding: 15px 18px; overflow-y: auto; }
.result-session-strip { display: grid; grid-template-columns: 1.1fr 1fr .7fr; gap: 7px; padding: 10px; border: 1px solid #dfe8f2; border-radius: 14px; background: linear-gradient(145deg,#eff9ff,#f5f1ff); }
.result-session-strip span { min-width: 0; display: grid; }
.result-session-strip small { color: var(--maple-subtle); font-size: 10px; font-weight: 800; }
.result-session-strip strong { overflow: hidden; margin-top: 3px; color: #405873; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.result-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.result-fields > label, .result-field { min-width: 0; display: grid; gap: 6px; }
.result-fields .wide { grid-column: 1/-1; }
.result-fields label > span, .result-field > span { color: #5f738b; font-size: 11px; font-weight: 850; }
.result-fields input, .result-fields textarea { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid #d8e3ef; border-radius: 11px; color: var(--maple-ink); background: #fbfdff; font-size: 13px; }
.result-fields textarea { min-height: 84px; padding-block: 10px; resize: vertical; }
.result-duration-field { padding: 11px; border: 1px solid #dce7f3; border-radius: 13px; background: linear-gradient(135deg,#f1f9ff,#f5f1ff); }
.result-duration-inputs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.result-duration-inputs label { position: relative; }
.result-duration-inputs input { padding-right: 38px; }
.result-duration-inputs b { position: absolute; top: 50%; right: 11px; color: var(--maple-muted); font-size: 10px; transform: translateY(-50%); }
.result-duration-field > small { color: var(--maple-subtle); font-size: 10px; }
.material-recommendation { min-height: 29px; display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.material-recommendation small { color: var(--maple-subtle); font-size: 10px; }
.material-recommendation button { min-height: 30px; padding: 0 8px; border: 1px solid #ded8f0; border-radius: 8px; color: #6658a8; background: #f7f3ff; cursor: pointer; font-size: 10px; font-weight: 850; }
.result-price-note { margin: 11px 1px 0; color: var(--maple-muted); font-size: 10px; line-height: 1.55; }
.result-price-note a { color: var(--maple-purple-deep); font-weight: 850; }
.result-status { min-height: 19px; margin: 8px 1px 0; color: var(--maple-muted); font-size: 11px; font-weight: 800; }
.result-status.error { color: var(--maple-danger); }
.result-status.success { color: #3d805f; }
.hunt-result-dialog footer, .preset-dialog footer { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; padding: 11px 18px calc(16px + var(--safe-bottom)); border-top: 1px solid #e8eef5; background: rgba(255,255,255,.98); box-shadow: 0 -9px 22px rgba(48,63,91,.05); }
.hunt-result-dialog footer button, .preset-dialog footer button { min-height: 48px; border-radius: 13px; cursor: pointer; font-size: 13px; font-weight: 900; }
.hunt-result-dialog footer .secondary, .preset-dialog footer .secondary { border: 1px solid #d8e2ec; color: #60758d; background: #fff; }
.hunt-result-dialog footer .primary, .preset-dialog footer .primary { border: 0; color: #fff; background: linear-gradient(135deg,var(--maple-blue),var(--maple-purple)); box-shadow: 0 9px 19px rgba(92,103,194,.19); }
.preset-dialog { width: min(430px,calc(100% - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 21px; }
.preset-dialog form { display: grid; grid-template-rows: auto 1fr auto; }
.preset-dialog-body { padding: 16px 18px; }
.preset-dialog-body label { display: grid; gap: 7px; }
.preset-dialog-body label span { color: #5f738b; font-size: 11px; font-weight: 850; }
.preset-dialog-body input { width: 100%; min-height: 46px; padding: 0 11px; border: 1px solid #d8e3ef; border-radius: 11px; color: var(--maple-ink); background: #fbfdff; }
.preset-dialog-body > p { margin: 9px 1px 0; color: var(--maple-subtle); font-size: 10px; line-height: 1.55; }
.capture-dialog { width: min(1040px,calc(100% - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 22px; }
.capture-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--maple-line); }
.capture-dialog-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 900; }
.capture-dialog-body { padding: 13px; }
.capture-tip { display: flex; gap: 9px; margin-bottom: 10px; padding: 10px; border-radius: 12px; color: #52677e; background: #eaf7ff; font-size: 11px; line-height: 1.55; }
.capture-tip > strong { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #fff; background: var(--maple-blue-deep); }
.capture-stage { overflow: auto; max-height: 56vh; max-height: 56dvh; border-radius: 13px; background: #172231; }
.capture-stage canvas { display: block; max-width: 100%; height: auto; margin: auto; cursor: crosshair; }
.capture-dialog-bottom { display: grid; grid-template-columns: 100px 1fr; gap: 10px; margin-top: 10px; }
.capture-magnifier { overflow: hidden; border-radius: 12px; background: #172231; }
.capture-magnifier canvas { display: block; width: 100px; height: 100px; }
.capture-selection-copy { display: flex; flex-direction: column; justify-content: center; color: var(--maple-muted); font-size: 11px; line-height: 1.5; }
.capture-selection-copy strong { color: var(--maple-ink); font-size: 12px; }
.capture-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 13px calc(13px + var(--safe-bottom)); border-top: 1px solid var(--maple-line); }
.capture-dialog-actions button { min-height: 44px; padding: 0 14px; border: 1px solid #d8e1eb; border-radius: 11px; color: #53687d; background: #fff; cursor: pointer; font-size: 12px; font-weight: 850; }
.capture-dialog-actions .primary { border-color: transparent; color: #fff; background: linear-gradient(135deg,var(--maple-blue),var(--maple-purple)); }
.monitor-toast { position: fixed; z-index: 120; right: 18px; bottom: calc(18px + var(--safe-bottom)); width: min(430px,calc(100% - 36px)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(217,86,112,.3); border-radius: 16px; color: #672e3a; background: #fff3f5; box-shadow: 0 18px 44px rgba(111,44,54,.2); }
.monitor-toast-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--maple-warning); }
.monitor-toast > span:nth-child(2) { min-width: 0; display: grid; }
.monitor-toast strong { font-size: 12px; }
.monitor-toast small { margin-top: 2px; color: #8d5d65; font-size: 10px; }
.monitor-toast-actions { display: flex; gap: 5px; }
.monitor-toast-actions button { min-height: 36px; border: 1px solid #e2b7bd; border-radius: 9px; color: #8c4b55; background: #fff; cursor: pointer; font-size: 10px; font-weight: 850; }
.monitor-toast-actions .primary { border-color: var(--maple-warning); color: #fff; background: var(--maple-warning); }
.hub-mobile-nav { display: none; }

@keyframes phasePulse { 50% { transform: scale(.78); box-shadow: 0 0 0 7px rgba(105,184,231,.08); } }
@keyframes warningPulse { to { transform: scale(1.025); } }

/* Tablet */
@media (max-width: 1199px) {
  .camp-topbar { grid-template-columns: auto minmax(220px,1fr) auto; }
  .header-hub-tabs { display: none; }
  .camp-grid { grid-template-columns: repeat(12,minmax(0,1fr)); }
  .operation-card { grid-column: 1/-1; }
  .camp-sidebar { grid-column: 1/-1; }
  .session-command-card { display: grid; grid-template-columns: minmax(250px,.8fr) minmax(0,1.2fr); gap: 10px 14px; }
  .session-command-card > .section-heading { grid-column: 1/-1; }
  .material-insight-card, .cycle-alert-card { margin-top: 0; }
  .dashboard-stats { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
  .goal-card { align-self: stretch; }
  .camp-insights-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .record-summary-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .record-recent-list { grid-template-columns: 1fr; }
  .record-recent-list > a { align-items: center; justify-content: space-between; flex-direction: row; }
}

@media (max-width: 900px) {
  .camp-page { padding-inline: 10px; }
  .camp-topbar { top: calc(var(--mwr-navbar-height,0px) + 7px); grid-template-columns: auto 1fr auto; }
  .header-account-control { justify-self: end; }
  .header-pip-button { min-width: 46px; width: 46px; justify-content: center; padding: 5px; }
  .header-pip-button > span { display: none; }
  .dashboard-timer-console { min-height: 360px; grid-template-columns: minmax(240px,300px) minmax(250px,1fr); gap: 24px; }
  .timer-face strong { font-size: 64px; }
  .camp-insights-grid { grid-template-columns: 1fr; }
  .record-summary-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .record-recent-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .record-recent-list > a { align-items: flex-start; justify-content: center; flex-direction: column; }
}

/* Mobile app */
@media (max-width: 767px) {
  html { scroll-behavior: auto; }
  body { padding-bottom: calc(214px + var(--safe-bottom)); }
  .camp-page { padding: 7px 7px calc(14px + var(--safe-bottom)); }
  .camp-page::after { height: 90px; opacity: .7; }
  .camp-topbar { top: calc(var(--mwr-navbar-height,0px) + 6px); grid-template-columns: minmax(0,1fr) auto; gap: 7px; min-height: 62px; margin-bottom: 8px; padding: 8px; border-radius: 17px; }
  .camp-brand { min-width: 0; }
  .brand-emblem { width: 40px; height: 40px; border-radius: 13px; }
  .camp-brand small { display: none; }
  .camp-brand strong { font-size: 17px; }
  .top-actions { grid-column: 2; grid-row: 1; gap: 4px; }
  .header-pip-button { width: 42px; min-width: 42px; min-height: 42px; }
  .header-pip-button > .icon { width: 31px; height: 31px; }
  .top-action-button { width: 40px; min-height: 40px; padding: 0; }
  .header-account-control { grid-column: 1/-1; grid-row: 2; width: 100%; justify-self: stretch; }
  .header-account-control label, .header-account-control .hub-profile-link { width: 100%; min-height: 44px; }
  .header-account-control select { max-width: none; flex: 1; }
  .hub-inline-alert { margin-bottom: 7px; border-radius: 12px; font-size: 11px; }
  .camp-grid { display: block; }
  .field-card, .dashboard-card, .record-summary-card { border-radius: 19px; box-shadow: 0 10px 28px rgba(55,78,112,.1); }
  .operation-card { overflow: visible; padding: 10px; }
  .operation-card::before, .operation-card::after { display: none; }
  .field-card-head { margin: 1px 2px 8px; }
  .phase-badge { min-height: 32px; font-size: 11px; }
  .hotkey-chip > span { display: none; }
  .dashboard-timer-console { min-height: 0; grid-template-columns: 1fr; gap: 4px; padding: 12px; border-radius: 16px; }
  .dashboard-timer-console::before { inset: 7px; }
  .timer-ring { width: 226px; }
  .timer-face { inset: 29px; }
  .timer-face strong { font-size: 54px; }
  .timer-message { margin-top: -5px; text-align: center; }
  .timer-section-kicker { display: none; }
  .timer-message h1 { max-width: none; font-size: 23px; }
  .timer-message > p { min-height: 0; margin: 7px auto 11px; font-size: 12px; line-height: 1.55; }
  .next-callout { min-height: 60px; padding: 9px; text-align: left; }
  .next-callout-icon { width: 38px; height: 38px; }
  .next-callout small { font-size: 10px; }
  .next-callout strong { font-size: 13px; }
  .focus-meta-strip { gap: 4px; margin-top: 7px; }
  .focus-meta-strip > span { min-height: 45px; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; text-align: center; }
  .focus-meta-strip > span > span { justify-items: center; }
  .focus-meta-strip .icon { width: 15px; height: 15px; }
  .focus-meta-strip small { display: none; }
  .focus-meta-strip strong { max-width: 26vw; font-size: 10px; }
  .route-strip { grid-template-columns: 1fr 14px 1fr; gap: 3px; margin-top: 8px; }
  .route-step { min-height: 53px; gap: 6px; padding: 7px; border-radius: 12px; }
  .route-icon { width: 32px; height: 32px; }
  .route-step small { display: none; }
  .route-step strong, .route-step b { font-size: 11px; }
  .field-progress { margin-top: 8px; }
  .status-bar { min-height: 31px; margin: 5px 0 2px; font-size: 10px; }
  .main-action-dock { position: fixed; z-index: 72; right: 7px; bottom: calc(70px + var(--safe-bottom)); left: 7px; grid-template-areas: "end" "controls"; gap: 5px; padding: 6px; border: 1px solid rgba(255,255,255,.95); border-radius: 17px; background: rgba(255,255,255,.95); box-shadow: 0 14px 34px rgba(42,61,93,.25); }
  .main-controls { grid-template-columns: 1.18fr 1fr 1fr; gap: 5px; }
  .camp-control { min-height: 54px; gap: 5px; padding: 6px; border-radius: 12px; }
  .camp-control strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .camp-control small { font-size: 9px; }
  .camp-control .icon { width: 18px; height: 18px; }
  .session-end-action { min-height: 60px; grid-template-columns: 42px minmax(0,1fr); gap: 9px; padding: 7px 10px; border-radius: 13px; }
  .session-end-icon { width: 42px; height: 42px; border-radius: 11px; }
  .session-end-copy strong { font-size: 14px; }
  .session-end-copy small { font-size: 10px; }
  .camp-sidebar { margin-top: 8px; }
  .session-command-card { display: block; padding: 13px; }
  .material-insight-card { margin-top: 11px; }
  .cycle-alert-card { margin-top: 8px; }
  .dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 11px 0 9px; }
  .camp-insights-grid { gap: 8px; margin-top: 8px; }
  .event-feed-card, .record-summary-card { padding: 13px; }
  .session-event-list { max-height: 190px; }
  .record-summary-stats { grid-template-columns: 1fr 1fr; }
  .record-recent-list { grid-template-columns: 1fr; }
  .record-recent-list > a { align-items: center; justify-content: space-between; flex-direction: row; }
  .shortcut-help { display: none; }
  .hub-mobile-nav { position: fixed; z-index: 76; right: 7px; bottom: calc(7px + var(--safe-bottom)); left: 7px; min-height: 58px; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; padding: 5px; border: 1px solid rgba(255,255,255,.95); border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 12px 30px rgba(43,61,91,.23); }
  .hub-mobile-nav a { min-width: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border-radius: 12px; color: #687c94; text-decoration: none; font-size: 10px; font-weight: 850; }
  .hub-mobile-nav a.active { color: #fff; background: linear-gradient(135deg,var(--maple-blue),var(--maple-purple)); }
  .hub-mobile-nav .icon { width: 18px; height: 18px; }
  .camp-drawer { width: 100%; border-left: 0; }
  .drawer-body { padding: 11px; }
  .routine-preset-card { grid-template-columns: 1fr; }
  .routine-preset-card > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); }
  .hunt-result-dialog, .preset-dialog { inset: auto 0 0; width: 100%; max-height: 91vh; max-height: 91dvh; margin: 0; border-width: 1px 0 0; border-radius: 23px 23px 0 0; }
  .hunt-result-dialog[open] { inset: auto 0 0; margin: 0; }
  .hunt-result-dialog form { max-height: 91vh; max-height: 91dvh; }
  .hunt-result-dialog header, .preset-dialog header { padding: 14px; }
  .result-dialog-body { padding: 13px 14px; }
  .result-fields { grid-template-columns: 1fr; }
  .result-fields .wide { grid-column: auto; }
  .hunt-result-dialog footer, .preset-dialog footer { padding: 10px 14px calc(13px + var(--safe-bottom)); }
  .capture-dialog { width: 100%; max-height: 96vh; max-height: 96dvh; border-radius: 18px 18px 0 0; }
  .monitor-toast { right: 8px; bottom: calc(145px + var(--safe-bottom)); left: 8px; width: auto; }
}

@media (max-width: 390px) {
  .camp-brand strong { font-size: 16px; }
  .top-actions { gap: 3px; }
  .top-action-button { width: 38px; min-height: 38px; }
  .header-pip-button { width: 40px; min-width: 40px; min-height: 40px; }
  .timer-ring { width: 208px; }
  .timer-face strong { font-size: 49px; }
  .timer-message > p { display: none; }
  .next-callout { margin-top: 8px; }
  .focus-meta-strip strong { font-size: 9px; }
  .material-insight-card { grid-template-columns: 39px minmax(0,1fr); padding-inline: 9px; }
  .material-insight-icon { width: 39px; height: 39px; }
  .cycle-alert-main { gap: 5px; }
  .cycle-alert-main > span { padding-inline: 7px; }
  .split-fields, .cycle-alert-fields { grid-template-columns: 1fr; }
  .result-session-strip { grid-template-columns: 1fr 1fr; }
  .result-session-strip span:last-child { grid-column: 1/-1; }
  .result-duration-inputs { gap: 5px; }
  .monitor-toast { grid-template-columns: auto 1fr; }
  .monitor-toast-actions { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; }
}

/* Readability floor */
.camp-app { font-size: 13px; }
.camp-app p, .hunt-result-dialog p, .preset-dialog p, .capture-dialog p { font-size: 13px !important; }
.camp-app small, .hunt-result-dialog small, .preset-dialog small, .capture-dialog small, .monitor-toast small { font-size: 11px !important; }
.camp-app button, .camp-app [role="button"], .hunt-result-dialog button, .preset-dialog button, .capture-dialog button, .monitor-toast button { font-size: 13px !important; }
.camp-app button strong { font-size: 13px !important; }
.camp-app .focus-meta-strip strong, .camp-app .record-recent-list > a span small { font-size: 11px !important; }
.camp-app .cycle-alert-head > b, .camp-app #cycleAlertSettingState, .camp-app .switch-row b, .camp-app .memo-count, .camp-app .monitor-state-row b, .camp-app .monitor-state-row strong { font-size: 11px; }
.hub-mobile-nav a { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .field-card, .dashboard-card, .record-summary-card, .camp-topbar, .main-action-dock { border: 1px solid CanvasText; }
  .ring-value, .ring-runes, .ring-aura { stroke: Highlight; }
  .phase-dot, .event-marker { background: Highlight; }
  .camp-control.primary, .header-pip-button, .session-end-action[data-state="active"], .session-end-action[data-state="pending"] { border: 2px solid ButtonText; }
}