/* A perspective camera, one shared 3D context, genuine task planes only. */
.task-deck.spatial-deck{padding:72px 8px 76px;overflow:clip;touch-action:pan-x pinch-zoom;isolation:auto;}
.task-deck.spatial-deck[data-multiple=false]{touch-action:pan-y pinch-zoom;}
.space-camera{position:relative;width:100%;aspect-ratio:1.586;perspective:var(--perspective,1400px);perspective-origin:50% 50%;transform-style:preserve-3d;}
.space-scene{position:absolute;inset:0;transform:translateY(var(--edge-y,0px));transform-style:preserve-3d;}
.space-plane{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:hidden;}
.space-skin{position:absolute;inset:0;border-radius:16px;background:var(--ground);}
/* The separate solid paint backing blocks task content, while the existing
   translucent light optics retain their frost and hue over a page-colour plate. */
.space-skin::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--ground);}
.space-skin>.bank-card{height:100%;}
.space-plane:not([data-front=true]) .frost-orb{animation-play-state:paused;}
.spatial-deck:not([data-motion-phase=settled]) .space-plane{will-change:transform;}
.spatial-deck[data-motion-phase=settled] .space-plane{will-change:auto;}
.spatial-deck:has(.space-plane:not([data-front=true])){cursor:grab;}
.spatial-deck[data-motion-phase=drag]{cursor:grabbing;}
@media(max-width:650px){.task-deck.spatial-deck{padding:60px 5px 76px;}}
@media(prefers-reduced-motion:reduce){.space-skin{filter:none!important;}}
/* Compact app adapter for the saved Apple-style framework. All rules are scoped. */
.cn-anchor{display:block;width:134px;height:34px;pointer-events:none}
.cn-position{position:fixed;z-index:55;transform:translateX(-50%);pointer-events:none;isolation:isolate}
.cn-position.cn-front{z-index:104}
.cn-bar{position:relative;isolation:isolate;height:34px;max-width:calc(100vw - 24px);padding:3px;border:0;border-radius:999px;pointer-events:auto;background:color-mix(in srgb,var(--segment-track) 88%,transparent);color:var(--ink);box-shadow:0 4px 14px rgb(24 29 47 / 9%);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35)}
.cn-bar button,.cn-drawer button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cn-bar button:focus-visible,.cn-drawer button:focus-visible{outline:2px solid var(--purple,#7481ac);outline-offset:-2px}
.cn-bar button:disabled,.cn-drawer button:disabled{cursor:default;opacity:.55}
.cn-bar button{position:relative;min-height:28px;border-radius:999px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cn-bar button::before{content:'';position:absolute;inset:-4px 0;pointer-events:auto;border-radius:inherit}
.cn-summary{position:absolute!important;inset:3px 32px 3px 3px;display:flex;gap:6px;align-items:center;justify-content:center;padding:0 5px;font-size:12px!important;font-weight:550!important;white-space:nowrap;overflow:hidden}
.cn-summary>span{overflow:hidden;text-overflow:ellipsis}.cn-summary>svg{flex-shrink:0;opacity:.65}
.cn-bar:not(:has(.cn-drawer-toggle)) .cn-summary{right:3px}
.cn-bar[data-expanded=true] .cn-summary{visibility:hidden;pointer-events:none;opacity:0}
.cn-expanded{position:absolute;inset:3px 32px 3px 3px;display:flex;align-items:center;visibility:hidden;opacity:0;pointer-events:none}
.cn-bar[data-expanded=true] .cn-expanded{visibility:visible;opacity:1;pointer-events:auto}
.cn-bar:not(:has(.cn-drawer-toggle)) .cn-expanded{right:3px}
.cn-fixed-tabs{display:flex;flex-shrink:0}.cn-optional-tabs{display:flex;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:999px;flex:1}
.cn-optional-tabs::-webkit-scrollbar{display:none}
.cn-tab-slot{position:relative;flex-shrink:0;height:28px;border-radius:999px}
.cn-tab{display:flex;align-items:center;justify-content:center;isolation:isolate;min-width:56px;height:28px;padding:0 10px;white-space:nowrap;font-size:12px!important;line-height:1;color:var(--segment-ink)!important}
.cn-tab>span:not(.cn-selection){position:relative;z-index:1;pointer-events:none}
.cn-selection{position:absolute;inset:0;background:var(--segment-thumb);border-radius:999px;box-shadow:0 2px 6px rgb(15 22 37 / 6%)}
.cn-tab[aria-selected=true]{color:var(--segment-active)!important;font-weight:600!important}
.cn-tab:hover{background:rgb(255 255 255 / 10%)}
.cn-bar[data-editing=true] .cn-tab:not(.cn-fixed){background:color-mix(in srgb,var(--ink) 12%,transparent);cursor:grab;touch-action:none}
.cn-bar[data-editing=true] .cn-tab.cn-fixed{opacity:.58;touch-action:none}
.cn-tab-slot[data-source=true]>.cn-tab{opacity:0}.cn-tab-slot[data-source=true]{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.cn-fold{display:grid;place-items:center;width:24px;min-width:24px;height:28px;padding:0;flex-shrink:0;opacity:.7}
.cn-drawer-toggle{position:absolute!important;right:3px;top:3px;display:grid;place-items:center;width:28px;height:28px;padding:0;color:var(--segment-ink)!important}
.cn-drawer-toggle:hover,.cn-fold:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.cn-wall{position:absolute;bottom:0;transform:translateX(-50%);width:55px;height:2px;pointer-events:none;background:#e0797d;box-shadow:0 -2px 8px #dc747650;border-radius:999px}
.cn-backdrop{position:fixed;inset:0;z-index:91;border:0;margin:0;padding:0;background:rgb(24 28 42 / 20%);touch-action:none;cursor:default}
.cn-drawer{--cn-accent:#39637e;position:fixed;inset:0 0 0 auto;z-index:100;width:min(288px,calc(100vw - 24px));padding:calc(18px + env(safe-area-inset-top,0px)) 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;background:rgb(244 247 252 / 96%);color:var(--ink);box-shadow:-8px 0 30px rgb(24 29 47 / 12%);backdrop-filter:blur(32px) saturate(1.25);-webkit-backdrop-filter:blur(32px) saturate(1.25)}
:root[data-theme=dark] .cn-drawer{--cn-accent:#a8deef;background:rgb(32 31 38 / 96%)}
.cn-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;padding:0 2px;margin-bottom:12px}
.cn-drawer-header button{min-height:36px;padding:5px 3px;color:var(--cn-accent);font-size:13px;border-radius:8px;display:flex;gap:6px;align-items:center}
.cn-drawer-header .cn-done{font-weight:600}.cn-instruction{font-size:12px;color:var(--muted,#77808d);line-height:1.65;margin:0 3px 15px;min-height:40px}
.cn-mobile-shelf{display:none}
.cn-drawer-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 20%,transparent) transparent;padding:3px 0 10px}
.cn-row{display:flex;align-items:center;position:relative;min-height:44px;border-radius:9px;margin:0 0 4px}
.cn-row-body{min-height:44px;display:flex;align-items:center;gap:11px;width:100%;padding:0 9px!important;text-align:left;font-size:14px!important;border-radius:inherit;touch-action:pan-y}
.cn-row-body>svg{color:var(--cn-accent);flex-shrink:0}.cn-row-body>span:not(.cn-check){flex:1}.cn-row-available{color:var(--muted,#77808d)}
.cn-row-editable{background:color-mix(in srgb,var(--ink) 9%,transparent)}.cn-row-editable .cn-row-body{touch-action:none;cursor:grab}
.cn-row:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}.cn-row-lifted .cn-row-body{opacity:.25}
.cn-check{display:grid;place-items:center;width:18px;height:18px;flex-shrink:0;border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:50%}
.cn-check.cn-checked{background:var(--cn-accent);border-color:var(--cn-accent);color:#fff}:root[data-theme=dark] .cn-check.cn-checked{color:#253342}
.cn-cancel{align-self:flex-start;color:var(--muted,#77808d)!important;padding:9px 8px!important;min-height:36px;margin-top:12px;font-size:12px!important;border-radius:8px}
.cn-save-error{margin:16px 3px 0;padding:12px;border-radius:10px;background:rgb(181 68 82 / 9%);color:#a53f4f;font-size:12px;line-height:1.7}
.cn-save-error p{margin:0 0 7px}.cn-save-error button{padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.cn-ghost{position:fixed;left:0;top:0;z-index:122;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 10px;background:color-mix(in srgb,var(--segment-track) 95%,transparent);color:var(--ink);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 10px 26px rgb(10 15 30 / 22%),0 2px 6px rgb(10 15 30 / 10%);border-radius:9px;font-size:12px;pointer-events:none;white-space:nowrap;will-change:transform,width,height}
.cn-ghost>span{overflow:hidden;text-overflow:ellipsis}.cn-ghost>svg{flex-shrink:0;color:var(--purple,#7886a4)}.cn-ghost-pill{border-radius:999px;justify-content:center;gap:0}.cn-ghost-pill>svg{display:none}.cn-ghost>i{position:absolute;top:-5px;right:-4px;display:grid;place-items:center;width:17px;height:17px;background:var(--segment-thumb);border-radius:50%;font-style:normal;box-shadow:0 2px 5px rgb(15 20 35 / 15%)}
.cn-announcement{position:fixed;bottom:100px;left:50%;z-index:140;max-width:calc(100vw - 32px);padding:9px 14px;transform:translateX(-50%);background:#35323c;color:#f9f7fc;font-size:12px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.cn-announcement:empty{display:none}
html[data-dragging=true] :is(.cn-bar,.cn-drawer,.cn-bar *,.cn-drawer *){cursor:grabbing!important;user-select:none!important}
@media(max-width:899px){.cn-mobile-shelf{display:block;min-height:47px}.cn-drawer-position{top:calc(106px + env(safe-area-inset-top,0px))!important}}
@media(prefers-reduced-motion:reduce){.cn-position,.cn-bar,.cn-tab,.cn-row{transition:none!important}.cn-ghost{will-change:auto}}
.swipe-row {
  --sr-h: 64px;
  --sr-r: 16px;
  --sr-a: 80px;
  --sr-row: #27272a;
  --sr-text: #f5f5f5;
  --sr-drawer: #3f3f46;
  --sr-on-drawer: #ffffff;
  --sr-action: #e5484d;
  --sr-on-action: #ffffff;
  --sr-collapse: 200ms;
  --sr-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  position: relative;
  height: var(--sr-h);
  overflow: hidden;
  opacity: 1;
  transition:
    height var(--sr-collapse) var(--sr-ease-out),
    margin-bottom var(--sr-collapse) var(--sr-ease-out),
    opacity var(--sr-collapse) var(--sr-ease-out);
}

.swipe-row[data-phase='collapsing'] {
  height: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0;
}

.swipe-row[data-disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.swipe-row__clip {
  position: relative;
  height: var(--sr-h);
  border-radius: var(--sr-r);
  overflow: hidden;
  background: var(--sr-row);
}

.swipe-row__rail {
  position: absolute;
  inset: 0;
  background: var(--sr-drawer);
}

.swipe-row__action {
  position: absolute;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--sr-a);
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sr-drawer);
  color: var(--sr-on-drawer);
  font: inherit;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.swipe-row__action::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .swipe-row__action::after {
    transition: opacity 150ms ease;
  }

  .swipe-row__action:hover::after {
    opacity: 0.08;
  }
}

.swipe-row__glyph {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: transform 160ms var(--sr-ease-out);
}

.swipe-row__icon {
  display: inline-flex;
}

.swipe-row__action:active .swipe-row__glyph {
  transform: scale(0.97);
}

.swipe-row__block {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--sr-action);
}

.swipe-row[data-direction='left'] .swipe-row__block {
  left: calc(100% - var(--sr-a));
}

.swipe-row[data-direction='right'] .swipe-row__block {
  right: calc(100% - var(--sr-a));
}

.swipe-row__action--commit {
  background: transparent;
  color: var(--sr-on-action);
}

.swipe-row[data-direction='left'] .swipe-row__action--commit {
  left: 0;
}

.swipe-row[data-direction='right'] .swipe-row__action--commit {
  right: 0;
}

.swipe-row__surface {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 16px;
  background: var(--sr-row);
  color: var(--sr-text);
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .swipe-row__surface {
    cursor: grab;
  }

  .swipe-row[data-dragging] .swipe-row__surface {
    cursor: grabbing;
  }
}

@media (pointer: coarse) {
  .swipe-row__surface {
    user-select: none;
    -webkit-user-select: none;
  }
}

.swipe-row[data-dragging] .swipe-row__surface,
.swipe-row[data-dragging] .swipe-row__surface * {
  user-select: none;
  -webkit-user-select: none;
}

.swipe-row__toggle {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  background: transparent;
  color: var(--sr-text);
  font: inherit;
  outline: none;
}

.swipe-row[data-direction='left'] .swipe-row__toggle {
  right: 12px;
}

.swipe-row[data-direction='right'] .swipe-row__toggle {
  left: 12px;
}

.swipe-row__toggle:focus-visible {
  width: auto;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  overflow: visible;
  clip-path: none;
  background: color-mix(in srgb, var(--sr-text) 12%, transparent);
  font-size: 12px;
  white-space: nowrap;
  transform: translateY(-50%);
}

.swipe-row__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (prefers-reduced-motion: reduce) {
  .swipe-row__action:active .swipe-row__glyph {
    transform: none;
  }
}
.auth-page { min-height:100dvh; padding:38px clamp(24px,6vw,96px) 24px; color:#233746; position:relative; isolation:isolate; background:#edf4fa; }
.auth-sea { position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 72% 20%,#dcdff2,transparent 55%),radial-gradient(ellipse at 20% 85%,#c6e2f2,transparent 65%),linear-gradient(135deg,#f6f9fc,#e8f0f7); }
.auth-brand { display:flex; align-items:center; gap:14px; font-weight:600; font-size:22px; letter-spacing:-.03em; }
.auth-brand .brand-icon { color:#c79335; }
.auth-brand strong { color:#197eac; font-weight:600; }
.auth-layout { max-width:1100px; margin:0 auto; padding:90px 0 80px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:clamp(32px,8vw,110px); }
.auth-eyebrow { color:#357897; font-size:13px; letter-spacing:.12em; }
.auth-intro h1 { font-size:clamp(32px,3.8vw,52px); line-height:1.4; font-weight:600; letter-spacing:-.04em; margin:22px 0; }
.auth-intro p { font-size:16px; line-height:1.9; color:#586d7c; }
.auth-horizon { height:3px; width:66px; background:#3893bc; border-radius:5px; margin:38px 0 18px; }
.auth-intro small { color:#667a88; }
.auth-card { padding:32px; border-radius:24px; background:rgb(255 255 255 / 65%); backdrop-filter:blur(20px); box-shadow:0 18px 55px rgb(34 67 94 / 10%),inset 0 1px 0 rgb(255 255 255 / 90%); }
.auth-tabs { display:flex; padding:4px; border-radius:12px; background:#e1e9f0; margin-bottom:28px; gap:4px; }
.auth-tabs button { flex:1; border:0; border-radius:9px; padding:10px; background:transparent; color:#5a6c7b; }
.auth-tabs button[aria-pressed=true] { background:#fff; color:#243c4f; box-shadow:0 2px 6px rgb(45 69 95 / 7%); }
.auth-card h2 { font-size:24px; font-weight:600; letter-spacing:-.03em; }
.auth-subtitle { color:#607482; font-size:14px; line-height:1.7; margin:10px 0 24px; }
.auth-form { display:flex; flex-direction:column; gap:9px; }
.auth-form label { font-size:13px; font-weight:550; margin-top:8px; }
.auth-form input { width:100%; min-width:0; height:46px; border:1px solid #c4d2df; background:rgb(255 255 255 / 65%); border-radius:10px; padding:0 13px; color:#233746; font-size:16px; }
.auth-form input::placeholder { color:#8192a0; font-size:14px; }
.auth-password { position:relative; }
.auth-password input { padding-right:46px; }
.auth-password button { position:absolute; right:3px; top:3px; width:40px; height:40px; border:0; background:transparent; color:#657c8c; display:grid; place-items:center; border-radius:8px; }
.auth-page .auth-submit { width:100%; margin-top:20px; min-height:46px; background:#286a8c; color:white; border:0; border-radius:10px; }
.auth-page .auth-submit:hover { background:#205b7b; }
.auth-error { font-size:13px; color:#a33b4d; line-height:1.6; margin-top:8px; }
.auth-note { font-size:12px; line-height:1.7; color:#6c7d89; margin-top:18px; }
.auth-footer { text-align:center; color:#6b8090; font-size:12px; }
.auth-loading { min-height:100dvh; display:flex; gap:16px; flex-direction:column; justify-content:center; align-items:center; background:#edf4fa; padding:24px; }
.account-actions { margin-top:24px; }
.account-actions p { margin-top:12px; color:#a33b4d; font-size:13px; }
@media(max-width:700px){ .auth-page { padding:24px 20px; } .auth-layout { grid-template-columns:1fr; padding:36px 0; gap:28px; max-width:430px; } .auth-intro h1 { font-size:31px; margin:14px 0; } .auth-intro p { font-size:14px; } .auth-horizon { margin:22px 0 12px; } .auth-card { padding:25px; } .auth-brand { font-size:20px; } }
/* Source order: styles.css */:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  color: #23333b;
  background: #f7f9fc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #23333b;
  --muted: #4c5d67;
  --border: rgb(90 113 139 / 12%);
  --green: #3f6b58;
  --primary: #2d444e;
  --surface: rgb(255 255 255 / 18%);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="checkbox"]:focus-visible { outline: 2px solid #527b89; outline-offset: 4px; }
input, textarea { caret-color: #385e6e; }
::selection { background: #c7dbe7; color: #1d3442; }
html { scrollbar-color: #b5c4d0 transparent; scrollbar-width: thin; }
svg { flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-shell { min-height: 100dvh; isolation: isolate; }
.light-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 57% at 88% 79%, rgb(239 202 177 / 78%), transparent 76%),
    radial-gradient(ellipse 52% 72% at 68% 28%, rgb(196 196 234 / 69%), transparent 77%),
    radial-gradient(ellipse 54% 68% at 17% 67%, rgb(188 215 239 / 72%), transparent 76%),
    radial-gradient(ellipse 60% 32% at 43% 0%, rgb(255 255 255 / 90%), transparent 80%),
    #f7f9fc;
}
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 210px; border-right: 1px solid rgb(255 255 255 / 58%); background: rgb(255 255 255 / 22%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); display: flex; flex-direction: column; padding: 34px 20px 22px; }
.brand { display: flex; align-items: center; gap: 9px; padding: 0 9px; font-size: 21px; line-height: 1.35; letter-spacing: -.02em; font-weight: 650; }
.brand-icon { width: 36px; height: 42px; display: grid; place-items: center; color: #506975; }
.brand-second { display: block; font-size: 12px; font-weight: 450; letter-spacing: .05em; }
.sidebar nav { display: flex; flex-direction: column; gap: 8px; margin-top: 50px; }
.button { border: 1px solid transparent; border-radius: 11px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; font-size: 14px; font-weight: 550; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease; }
.button:disabled { opacity: .5; }
.button-default { box-shadow: 0 4px 12px rgb(40 70 85 / 8%); }
.button-default:hover { background: #385460; }
.button-secondary { color: #38505c; background: rgb(255 255 255 / 33%); border-color: rgb(255 255 255 / 78%); }
.button-secondary:hover { background: rgb(255 255 255 / 60%); }
.button-ghost { background: transparent; color: #38505c; padding: 0 5px; }
.button-ghost:hover { background: rgb(255 255 255 / 33%); }
.button-icon, .icon-button { color: #556b79; background: transparent; padding: 0; width: 40px; height: 40px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.button-icon:hover, .icon-button:hover { background: rgb(255 255 255 / 42%); color: #2b4652; }
.button-nav { justify-content: flex-start; height: 48px; padding: 0 14px; gap: 13px; color: #536873; background: transparent; font-weight: 450; }
.button-nav:hover { background: rgb(255 255 255 / 28%); }
.button-nav.active { color: #243f4b; font-weight: 600; background: rgb(255 255 255 / 55%); }
.sidebar-bottom { margin-top: auto; }
.button-profile { border-top: 1px solid var(--border); border-radius: 0; background: transparent; width: 100%; justify-content: flex-start; padding: 20px 3px 0; text-align: left; gap: 10px; }
.button-profile > span:nth-child(2) { flex: 1; }
.button-profile strong { display: block; font-size: 12px; font-weight: 550; }
.button-profile small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); font-weight: 400; }
.avatar { width: 34px; height: 34px; background: rgb(255 255 255 / 48%); color: #416356; border: 1px solid rgb(255 255 255 / 65%); border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 550; }
.main-shell { margin-left: 210px; }
.topbar { position: relative; z-index: 35; padding: 0 46px; background: rgb(255 255 255 / 12%); border-bottom: 1px solid rgb(255 255 255 / 54%); display: flex; align-items: center; }
.breadcrumb { display: flex; align-items: center; gap: 13px; font-size: 13px; color: var(--muted); }
.breadcrumb strong { font-weight: 550; color: #35505d; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
main { max-width: 1320px; margin: 0 auto; padding: 42px 46px 32px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 32px; }
.page-date { margin-bottom: 12px; }
h1 { font-size: 32px; font-weight: 600; text-wrap: balance; }
.page-heading p { font-size: 14px; line-height: 1.7; margin-top: 10px; }
.study-link { margin-top: 19px; }
.task-board { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 27px; align-items: start; }
.panel { border: 1px solid rgb(255 255 255 / 77%); border-radius: 20px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%), 0 10px 30px rgb(43 65 104 / 4%); }
.panel-heading { padding: 24px 27px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.heading-with-icon { display: flex; align-items: center; gap: 9px; }
.heading-with-icon > svg { color: #5e7583; }
h2 { font-size: 18px; line-height: 1.5; font-weight: 600; letter-spacing: -.015em; }
.panel-heading p { margin-top: 6px; }
.daily-summary { padding: 0 27px 21px; border-bottom: 1px solid var(--border); }
.progress { display: block; }
.progress-track { height: 5px; border-radius: 20px; background: rgb(52 90 96 / 10%); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 20px; transition: width 180ms ease; }
.daily-summary > span { display: block; margin-top: 12px; font-size: 12px; color: var(--muted); }
.checkbox { flex-shrink: 0; position: relative; display: grid; place-items: center; border: 0; color: white; border-radius: 10px; height: 44px; width: 44px; padding: 0; }
.checkbox::before { content: ''; position: absolute; inset: 10px; border: 1.3px solid #879ba8; background: rgb(255 255 255 / 27%); border-radius: 7px; }
.checkbox:hover::before { border-color: #3f6b58; background: rgb(255 255 255 / 58%); }
.checkbox > span { position: relative; display: grid; place-items: center; }
.habit-text { flex: 1; min-width: 0; }
.habit-title { font-size: 16px; line-height: 1.6; font-weight: 500; overflow-wrap: anywhere; }
.habit-text p { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.7; overflow-wrap: anywhere; }
.is-done .habit-title { color: #4e635b; text-decoration: line-through; text-decoration-color: #81938b; }
.done-label { display: flex; gap: 4px; align-items: center; color: #3f6b58; font-size: 11px; white-space: nowrap; }
.todo-label { font-size: 11px; white-space: nowrap; }
.panel-foot { padding: 16px 26px; background: transparent; border-top: 1px solid var(--border); border-radius: 0 0 20px 20px; display: flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.7; }
.goals-panel { padding: 0 0 6px; }
.goals-heading { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 24px 27px 20px; gap: 10px; }
.goal-group { padding: 0 27px 22px; }
.goal-group-heading { display: flex; align-items: center; gap: 9px; padding: 0 0 12px; }
.group-name { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #2c4753; }
.group-name svg { color: #5e7583; }
.group-empty { padding: 20px 16px; margin: 0; font-size: 12px; color: var(--muted); line-height: 1.7; border: 1px dashed rgb(255 255 255 / 78%); border-radius: 14px; background: rgb(255 255 255 / 16%); text-align: center; }
.subtle-count { font-size: 12px; background: rgb(255 255 255 / 40%); padding: 2px 7px; border-radius: 6px; margin-left: 1px; }
.section-hint { color: var(--muted); font-size: 11px; white-space: nowrap; }
.goal-card { padding: 22px 24px 18px; border-radius: 15px; background: rgb(255 255 255 / 34%); border: 1px solid rgb(255 255 255 / 70%); }
.goal-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); gap: 10px; }
.type-tag { background: rgb(255 255 255 / 38%); border-radius: 6px; padding: 5px 8px; display: flex; align-items: center; gap: 5px; font-size: 11px; color: #46606c; }
h3 { margin-top: 14px; font-weight: 600; font-size: 18px; line-height: 1.6; }
.goal-description { margin-top: 6px; line-height: 1.8; }
.quantity-line { display: flex; justify-content: space-between; align-items: baseline; margin-top: 21px; margin-bottom: 13px; }
.quantity-line strong { font-size: 27px; font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.quantity-total { font-size: 13px; color: var(--muted); margin-left: 3px; }
.percentage { font-size: 14px; font-weight: 600; color: #365f4e; }
.goal-action { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }
.goal-action > span { color: var(--muted); font-size: 11px; }
.goal-action .button { font-size: 12px; min-height: 35px; }
.steps-summary { margin-top: 18px; color: var(--muted); }
.steps-summary strong { color: #365c4b; font-weight: 550; }
.button-ai { position: fixed; bottom: 24px; right: 24px; z-index: 40; border: 1px solid rgb(255 255 255 / 85%); color: #39574d; background: rgb(255 255 255 / 46%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); min-height: 45px; box-shadow: 0 5px 20px rgb(60 72 80 / 8%); font-size: 12px; border-radius: 13px; padding: 0 16px; }
.button-ai:hover { background: rgb(255 255 255 / 75%); }
.dialog-backdrop { position: fixed; inset: 0; background: rgb(31 53 70 / 17%); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); z-index: 100; }
.dialog-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgb(245 248 252 / 77%); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgb(255 255 255 / 85%); width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 28px; border-radius: 20px; z-index: 110; box-shadow: 0 20px 60px rgb(35 53 76 / 14%); }
.dialog-wide { width: min(490px, calc(100vw - 32px)); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.dialog-heading h2 { font-size: 20px; }
.dialog-heading .icon-button { margin: -8px -8px 0 0; }
.dialog-description { font-size: 13px; line-height: 1.8; }
.task-form { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.segmented { display: flex; padding: 4px; border-radius: 11px; background: rgb(60 92 119 / 7%); gap: 4px; }
.segmented > button { flex: 1; font-size: 13px; color: var(--muted); background: none; border: 0; min-height: 37px; padding: 5px 14px; border-radius: 8px; }
.segmented > button[data-active] { background: rgb(255 255 255 / 69%); color: #2e4653; box-shadow: 0 2px 4px rgb(49 76 96 / 5%); font-weight: 550; }
.field { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.field > span { color: #364e5b; font-weight: 550; }
.optional { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 9px; }
.field input, .field textarea { width: 100%; border: 1px solid rgb(109 136 158 / 30%); border-radius: 10px; min-height: 44px; background: rgb(255 255 255 / 43%); padding: 11px 13px; font-size: 14px; line-height: 1.7; }
.field input::placeholder, .field textarea::placeholder { color: #536a78; }
.field textarea { resize: vertical; }
.field small { color: var(--muted); font-size: 12px; line-height: 1.7; }
.field-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 13px; }
.dialog-footer .button { min-height: 42px; }
.toast { position: fixed; bottom: 35px; left: calc(50% + 90px); transform: translateX(-50%); max-width: calc(100vw - 30px); padding: 15px 21px; display: flex; align-items: center; gap: 10px; background: #304d43; color: white; border-radius: 12px; box-shadow: 0 6px 25px rgb(34 67 52 / 16%); font-size: 13px; z-index: 150; }
.info-body { font-size: 14px; line-height: 1.85; color: var(--muted); padding-top: 20px; }
.info-body p + p { margin-top: 15px; }
.profile-preview { display: flex; gap: 15px; align-items: center; padding: 28px 0 10px; }
.avatar.large { width: 52px; height: 52px; font-size: 18px; }
.profile-preview strong { display: block; font-size: 16px; font-weight: 600; }
.profile-preview div span { display: block; font-size: 13px; color: var(--muted); margin-top: 5px; }
.mobile-menu-button, .mobile-overlay, .mobile-nav, .mobile-ai-button { display: none; }

.study-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr); gap: 26px; align-items: start; }
.timer-panel { padding: 32px 33px 26px; }
.timer-tabs { width: 225px; margin: 0 auto; }
.timer-center { display: flex; flex-direction: column; align-items: center; padding: 49px 0 31px; }
.timer-label { color: var(--muted); font-size: 13px; }
.timer-digits { font-size: clamp(64px, 6.5vw, 86px); line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 18px; color: #294450; }
.timer-digits span { color: #617d89; font-weight: 300; margin: 0 7px; }
.timer-note { color: var(--muted); font-size: 12px; margin-top: 15px; }
.timer-controls { display: flex; justify-content: center; gap: 12px; margin-top: 7px; }
.timer-controls .button { height: 44px; }
.start-button { min-width: 157px; }
.timer-settings { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; margin-top: 43px; padding-top: 25px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.duration-list { display: flex; gap: 7px; margin-top: 10px; }
.duration-list button { background: rgb(255 255 255 / 20%); border: 1px solid rgb(255 255 255 / 65%); color: var(--muted); border-radius: 8px; padding: 8px 10px; font-size: 12px; min-height: 36px; }
.duration-list button[data-active] { color: #36594a; border-color: #96b1a1; background: rgb(255 255 255 / 48%); }
.break-select { display: flex; flex-direction: column; gap: 10px; }
select { border: 1px solid rgb(255 255 255 / 75%); border-radius: 8px; background: rgb(255 255 255 / 33%); color: #3d5665; padding: 8px 11px; font-size: 12px; min-height: 36px; }
.study-aside { display: flex; flex-direction: column; gap: 19px; }
.sound-panel, .focus-records { padding: 25px; }
.section-description { margin-top: 9px; line-height: 1.8; }
.sound-option { display: flex; align-items: center; gap: 13px; padding: 24px 0 17px; }
.sound-icon { height: 42px; background: rgb(255 255 255 / 29%); color: #476c60; border-radius: 11px; display: grid; place-items: center; }
.sound-option > div { flex: 1; }
.sound-option strong { display: block; font-size: 14px; font-weight: 550; }
.sound-option div span { display: block; font-size: 11px; margin-top: 5px; color: var(--muted); }
.volume-control { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 11px; padding-top: 5px; }
.volume-control input { flex: 1; min-width: 0; accent-color: var(--green); }
.volume-control > span { width: 28px; }
.focus-total { margin: 21px 0; display: flex; align-items: baseline; gap: 7px; }
.focus-total strong { font-size: 32px; font-weight: 550; letter-spacing: -.025em; }
.focus-total > span { color: var(--muted); font-size: 12px; }
.focus-total .today-label { margin-left: auto; }
.monthly-summary { display: flex; gap: 44px; padding: 0 27px 25px; }
.monthly-summary strong { font-size: 29px; font-weight: 550; letter-spacing: -.025em; }
.monthly-summary strong span { font-size: 15px; color: var(--muted); font-weight: 400; }
.monthly-summary p { font-size: 11px; margin-top: 6px; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--muted); padding: 0 27px 11px; }
.heatmap-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 27px; }
.calendar-day { border: 1px solid transparent; min-height: 60px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #284e3c; font-size: 12px; }
.calendar-day:not(:disabled):hover { outline: 2px solid #587b68; outline-offset: 1px; }
.calendar-count { font-size: 10px; }
.heat-0 { background: rgb(245 218 219 / 72%); color: #854347; }
.heat-1 { background: rgb(223 237 224 / 63%); }
.heat-2 { background: rgb(205 226 210 / 70%); }
.heat-3 { background: #a8c9b3; }
.heat-4 { background: #456f55; color: white; }
.heat-future { background: rgb(255 255 255 / 22%); color: #6a7e8b; }
.heatmap-legend { display: flex; justify-content: space-between; gap: 14px; padding: 24px 27px; font-size: 10px; color: var(--muted); }
.heatmap-legend > span { display: flex; align-items: center; gap: 5px; }
.heatmap-legend i { display: inline-block; height: 10px; width: 10px; border-radius: 3px; }
.legend-none { background: #efd2d4; }
.legend-light { background: #cde2d2; }
.legend-middle { background: #a8c9b3; }
.legend-full { background: #456f55; }
.goal-stats .panel-heading, .weekly-focus .panel-heading { padding-bottom: 16px; }
.goal-counts { display: flex; gap: 10px; padding: 0 27px 20px; }
.goal-counts > div { flex: 1; min-width: 0; }
.goal-counts strong { display: block; font-size: 23px; font-weight: 550; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.goal-counts span { display: block; margin-top: 5px; font-size: 11px; }
.event-axis { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; align-items: end; height: 34px; padding: 0 27px; }
.axis-cell { border: 0; border-radius: 3px; height: 100%; padding: 0; min-width: 0; background: rgb(52 90 96 / 8%); }
.axis-cell:disabled { opacity: 1; background: rgb(52 90 96 / 8%); }
.axis-cell.has-event { background: #7ba392; }
.axis-cell.has-event.level-2 { background: #55806c; }
.axis-cell.has-event.level-3 { background: #3f6b58; }
.goal-stats-steps .axis-cell, .goal-stats-steps .axis-cell:disabled { background: rgb(84 74 140 / 9%); }
.goal-stats-steps .axis-cell.has-event { background: #a49cd6; }
.goal-stats-steps .axis-cell.has-event.level-2 { background: #776cbe; }
.goal-stats-steps .axis-cell.has-event.level-3 { background: #534ab7; }
.axis-cell:not(:disabled):hover { outline: 2px solid #46606c; outline-offset: 2px; }
.axis-scale { display: flex; justify-content: space-between; padding: 7px 27px 0; font-size: 10px; }
.axis-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 27px 17px; font-size: 10px; }
.axis-legend > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.axis-legend .button { font-size: 11px; min-height: 30px; color: #3f6152; padding-right: 0; }
.legend-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 3px; background: #3f6b58; }
.legend-dot.dot-steps { background: #534ab7; }
.weekly-total { margin: 0 27px 21px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.weekly-total strong { font-size: 25px; font-weight: 550; letter-spacing: -.025em; }
.weekly-total strong span { font-size: 12px; margin: 0 9px 0 4px; color: var(--muted); font-weight: 400; }
.weekly-total > span { font-size: 11px; color: var(--muted); }
.focus-trend-row { margin: 0 27px 14px; display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); }
.focus-trend-row .progress { flex: 1; }
.focus-trend-row .progress-fill { background: #698b7c; }
.focus-trend-row > span:last-child { width: 44px; text-align: right; white-space: nowrap; }
.weekly-focus { padding-bottom: 8px; }
.history-summary { display: flex; justify-content: space-between; font-size: 12px; color: #3f6252; padding: 21px 0 12px; }
.history-summary > span:last-child { color: var(--muted); }
.history-list > div { display: flex; align-items: center; gap: 11px; padding: 16px 0; border-top: 1px solid var(--border); font-size: 14px; }
.history-check { width: 20px; height: 20px; border: 1px solid #879ca4; border-radius: 6px; display: grid; place-items: center; }
.history-check.completed { background: var(--green); color: white; border-color: var(--green); }
.history-list > div > span:last-child { margin-left: auto; font-size: 11px; color: var(--muted); }

@media (min-width: 1600px) { main { padding-top: 52px; } }
@media (max-width: 1150px) {
  .sidebar { width: 186px; padding-left: 15px; padding-right: 15px; }
  .main-shell { margin-left: 186px; }
  .topbar { padding: 0 28px; }
  main { padding: 35px 28px 28px; }
  .panel-heading, .goal-card, .sound-panel, .focus-records { padding-left: 21px; padding-right: 21px; }
  .daily-summary { padding-left: 21px; padding-right: 21px; }
  .goals-heading > .section-hint { display: none; }
  .goals-heading, .goal-group { padding-left: 21px; padding-right: 21px; }
  .goal-counts, .event-axis, .axis-scale, .axis-legend { padding-left: 21px; padding-right: 21px; }
  .study-layout { gap: 20px; grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr); }
  .timer-panel { padding-left: 20px; padding-right: 20px; }
  .timer-settings { gap: 12px; flex-wrap: wrap; }
  .calendar-day { min-height: 54px; }
  .heatmap-legend { font-size: 9px; }
  .goal-card h3 { font-size: 17px; }
}
@media (max-width: 900px) {
  .page-heading { align-items: flex-start; gap: 14px; }
  h1 { font-size: 28px; }
  .study-link { font-size: 12px; padding: 0 11px; }
  .study-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
  .goals-panel { margin-top: 7px; }
  .goals-heading > .section-hint { display: inline; }
  .calendar-day { min-height: 65px; }
  .goal-card h3 { font-size: 18px; }
}
@media (max-width: 650px) {
  .light-field {
    background:
      radial-gradient(ellipse 105% 55% at 112% 80%, rgb(239 200 175 / 82%), transparent 76%),
      radial-gradient(ellipse 108% 74% at 89% 22%, rgb(194 193 231 / 73%), transparent 77%),
      radial-gradient(ellipse 105% 59% at -20% 62%, rgb(183 211 237 / 80%), transparent 76%),
      radial-gradient(ellipse 160% 37% at 45% -7%, rgb(255 255 255 / 100%), transparent 82%),
      #f7f9fc;
  }
  .sidebar { width: 226px; transform: translateX(-100%); transition: transform 160ms ease; background: rgb(245 248 252 / 83%); }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-overlay { display: block; position: fixed; inset: 0; z-index: 45; background: rgb(31 53 70 / 16%); border: 0; }
  .main-shell { margin-left: 0; }
  .mobile-menu-button, .mobile-ai-button { display: inline-flex; }
  .topbar { padding: 0 14px; min-height: 65px; }
  .breadcrumb { gap: 6px; font-size: 13px; }
  .breadcrumb > span, .breadcrumb > svg { display: none; }
  .topbar-actions { gap: 0; }
  .topbar-actions .button-icon, .mobile-menu-button { width: 40px; height: 44px; }
  main { padding: 25px 20px 118px; }
  .page-heading { flex-direction: column; gap: 14px; margin-bottom: 25px; }
  h1 { font-size: 26px; letter-spacing: -.025em; }
  .page-date { font-size: 12px; margin-bottom: 11px; }
  .page-heading p { font-size: 13px; margin-top: 9px; }
  .study-link { margin: 0; min-height: 40px; font-size: 12px; }
  .study-aside { grid-template-columns: 1fr; }
  .panel-heading { padding: 20px 22px 17px; }
  .daily-summary { padding: 0 22px 19px; }
  .daily-summary > span { font-size: 11px; }
  .habit-title { font-size: 15px; }
  .habit-text p { font-size: 11px; }
  .panel-foot { font-size: 10px; padding: 15px 22px; }
  .goal-card { padding: 22px 22px 19px; }
  .goal-meta { font-size: 10px; }
  .goal-description { font-size: 12px; }
  .dialog-popup { padding: 24px; }
  .dialog-heading h2 { font-size: 20px; }
  .dialog-footer .button { min-height: 44px; }
  .toast { left: 50%; bottom: 102px; min-width: 235px; justify-content: center; font-size: 12px; }
  .button-ai { display: none; }
  .mobile-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; bottom: max(13px, env(safe-area-inset-bottom)); left: 18px; right: 18px; max-width: 530px; margin: 0 auto; z-index: 40; padding: 5px; background: rgb(255 255 255 / 48%); border: 1px solid rgb(255 255 255 / 84%); border-radius: 24px; backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); box-shadow: 0 8px 24px rgb(61 75 105 / 10%); }
  .button-mobile-nav { flex-direction: column; gap: 5px; padding: 7px 2px; min-height: 56px; border-radius: 18px; font-size: 10px; font-weight: 450; color: #526b7b; background: transparent; }
  .button-mobile-nav.active { color: #2a505c; font-weight: 600; background: rgb(255 255 255 / 54%); }
  .button-mobile-nav:hover { background: rgb(255 255 255 / 38%); }
  .timer-panel { padding: 27px 21px 24px; }
  .timer-center { padding: 41px 0 26px; }
  .timer-digits { font-size: 73px; }
  .timer-settings { margin-top: 36px; }
  .duration-list { gap: 6px; }
  .duration-list button { padding: 8px 9px; font-size: 11px; min-height: 40px; }
  .break-select select { min-height: 40px; }
  .monthly-summary { padding-left: 22px; padding-right: 22px; }
  .calendar-weekdays, .heatmap-calendar { padding-left: 22px; padding-right: 22px; }
  .goals-heading, .goal-group { padding-left: 22px; padding-right: 22px; }
  .goal-counts, .event-axis, .axis-scale, .axis-legend { padding-left: 22px; padding-right: 22px; }
  .event-axis { height: 30px; gap: 2px; }
  .calendar-day { min-height: 52px; font-size: 11px; }
  .calendar-count { font-size: 9px; }
  .heatmap-calendar { gap: 5px; }
  .heatmap-legend { padding: 22px; gap: 8px; font-size: 8px; }
}
@media (prefers-reduced-transparency: reduce) { .panel, .sidebar, .topbar, .dialog-popup, .mobile-nav { background: #f3f6fa; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* v0.3 functional components, using the existing light/glow tokens. */
[hidden] { display: none !important; }
.save-error, .demo-date-banner { padding: 12px 16px; margin-bottom: 22px; border: 1px solid #bc9994; border-radius: 12px; background: rgb(255 245 236 / 75%); font-size: 13px; line-height: 1.7; }
.demo-date-banner { border-color: #aaadca; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.messages-button { min-height: 37px; font-size: 12px; gap: 6px; padding: 0 10px; }
.messages-button i { font-style: normal; color: white; background: var(--green); padding: 2px 5px; border-radius: 8px; }
.goal-group-heading .group-add { margin-left: auto; min-height: 34px; font-size: 12px; }
.task-board > *, .study-layout > *, .board-grid > *, .completion-cards > * { min-width: 0; }
.goal-meta { gap: 7px; }
.goal-meta > span:nth-child(2) { margin-left: auto; }
.goal-meta .button { width: 28px; height: 28px; min-height: 28px; }
.goal-card h3, .goal-description { overflow-wrap: anywhere; }
.daily-shortcut, .todo-completion { display: flex; align-items: center; gap: 4px; margin-top: 15px; }
.todo-completion { margin: 32px 0 20px; }
.daily-shortcut strong, .todo-completion strong { font-size: 13px; font-weight: 550; }
.daily-shortcut small, .todo-completion small { display: block; font-size: 10px; line-height: 1.7; margin-top: 3px; }
.records-link { font-size: 11px; min-height: 30px; margin-top: 2px; }
.task-time { display: flex; align-items: baseline; gap: 5px; font-size: 10px; margin-top: 10px; }
.step-strip { position: relative; padding: 17px 10px 12px 0; overscroll-behavior-x: contain; }
.steps-summary { gap: 5px; }
.steps-summary > span { margin-left: auto; font-size: 10px; }
.step-origin { flex: 0 0 42px; display: flex; align-items: center; flex-direction: column; font-size: 12px; padding-top: 5px; color: var(--muted); }
.step-origin i { width: 14px; height: 14px; border: 2px solid #9396ac; border-radius: 50%; background: #f1f2f8; margin-bottom: 9px; }
.step-origin > span { font-size: 10px; margin-top: 5px; }
.step-node.button { flex: 0 0 106px; width: 106px; padding: 0; min-height: 96px; border: 0; flex-direction: column; position: relative; justify-content: flex-start; white-space: normal; border-radius: 0; color: var(--muted); gap: 0; }
.energy-cell { display: block; height: 10px; width: calc(100% - 13px); margin: 7px 13px 0 0; border-radius: 3px; background: rgb(110 107 164 / 12%); border: 1px solid rgb(110 107 164 / 25%); }
.filled .energy-cell { background: #827db7; border-color: #827db7; }
.boundary-node { position: absolute; right: 0; top: 0; width: 23px; height: 23px; display: grid; place-items: center; border: 1.5px solid #9694b3; border-radius: 50%; font-size: 11px; background: #f0eff7; }
.filled .boundary-node { background: #7670b0; border-color: #7670b0; color: white; }
.selected-node .boundary-node { outline: 2px solid #666096; outline-offset: 3px; }
.node-name { display: block; padding: 20px 3px 0; max-width: 100px; font-size: 11px; line-height: 1.6; max-height: 66px; overflow: hidden; overflow-wrap: anywhere; }
.selected-step { border-top: 1px solid var(--border); padding-top: 8px; max-height: 160px; overflow-y: auto; margin-top: 6px; }
.selected-step-title { display: flex; align-items: center; }
.selected-step-title > div { min-width: 0; }
.selected-step strong { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.selected-step small { font-size: 10px; }
.selected-step p { font-size: 11px; margin: 5px 0 0 44px; }
.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.template-grid .button { flex-direction: column; align-items: flex-start; padding: 13px; white-space: normal; gap: 5px; min-height: 68px; }
.template-grid strong { font-size: 13px; }
.template-grid small { font-weight: 400; font-size: 11px; color: var(--muted); }
.selected-template { border-color: #68887b; background: rgb(242 255 247 / 58%); }
.field-caption { font-size: 13px; margin-bottom: 10px; font-weight: 550; }
.schedule-fields summary, details summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: #3a5664; min-height: 34px; }
.schedule-fields[open] > div, details[open] > .field { margin-top: 12px; }
.schedule-fields small { display: block; color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 12px; }
.step-editor-item { border: 1px solid var(--border); border-radius: 12px; padding: 13px; margin-bottom: 12px; }
.step-editor-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 9px; }
.step-editor-head .button { font-size: 11px; min-height: 30px; }
.step-editor-item > small { font-size: 10px; color: var(--muted); }
.step-editor-item .schedule-fields { margin-top: 8px; }
.progress-preview { padding: 12px 14px; font-size: 12px; border-radius: 10px; background: rgb(255 255 255 / 40%); line-height: 1.7; }
.ledger-list, .reorder-list, .message-list { margin-top: 22px; }
.ledger-row, .reorder-row { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--border); padding: 15px 0; }
.ledger-row > div, .reorder-row > span { flex: 1; min-width: 0; }
.ledger-row strong { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.ledger-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.ledger-row .button { font-size: 12px; }
.ledger-row.undone strong { color: var(--muted); text-decoration: line-through; }
.reorder-row > span { font-size: 13px; overflow-wrap: anywhere; }
.task-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.task-menu .button { justify-content: flex-start; min-height: 46px; }
.message-actions { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.message-actions .button { font-size: 12px; }
.message-item { display: flex; gap: 12px; padding: 18px 8px; border-top: 1px solid var(--border); }
.message-item.unread { background: rgb(255 255 255 / 36%); border-radius: 10px; }
.message-item > div { min-width: 0; flex: 1; }
.message-item strong { font-size: 13px; overflow-wrap: anywhere; }
.message-item small { display: block; margin: 6px 0; color: var(--muted); font-size: 11px; }
.message-item .button { font-size: 11px; min-height: 30px; }
.choice-trigger { display: inline-flex; width: 100%; min-height: 40px; padding: 8px 12px; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid rgb(255 255 255 / 80%); border-radius: 10px; color: #3a5664; background: rgb(255 255 255 / 38%); font-size: 12px; }
.choice-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-positioner { z-index: 200; }
.choice-popup { min-width: var(--anchor-width); max-width: min(360px, calc(100vw - 32px)); background: rgb(244 248 253 / 94%); backdrop-filter: blur(24px); border: 1px solid white; border-radius: 12px; padding: 5px; box-shadow: 0 12px 30px rgb(39 54 79 / 12%); }
.choice-item { padding: 11px 13px; min-height: 38px; border-radius: 8px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; cursor: pointer; }
.choice-item[data-highlighted] { background: #e1eae8; }
.sound-panel > .choice-trigger { margin-top: 18px; }
.import-audio { margin-top: 20px; font-size: 12px; }
.end-focus { display: flex; justify-content: center; margin-top: 12px; }
.end-focus .button { font-size: 12px; }
.custom-timer { margin-top: 15px; }
.custom-timer > .field { max-width: 180px; }
.board-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.completion-cards { display: flex; flex-direction: column; gap: 20px; }
.board-grid > .weekly-focus { grid-column: 1 / -1; }
.focus-week-grid { display: grid; grid-template-columns: 1fr 1fr; }
.month-control { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.month-control .button { width: 30px; }
.completion-axis { margin-bottom: 13px; }
.axis-row-label { display: block; font-size: 10px; padding: 0 27px 8px; }
.event-axis .axis-cell { min-height: 0; width: 100%; border-radius: 3px; }
.calendar-day { padding: 0; white-space: normal; }
.calendar-count { line-height: 1.2; }
.demo-date-settings { margin-top: 22px; }
.demo-date-settings small { font-size: 11px; }
.info-body > .button { margin-top: 17px; }
@media(max-width: 1000px) { .board-grid { grid-template-columns: 1fr; } .completion-cards { display: grid; grid-template-columns: 1fr 1fr; } }
@media(max-width: 900px) { .task-board, .study-layout { grid-template-columns: minmax(0, 1fr); } }
@media(max-width: 650px) {
  .messages-button > span { display: none; }
  .messages-button { min-width: 39px; padding: 0 8px; }
  .messages-button i { position: absolute; margin-left: 27px; margin-top: -23px; font-size: 9px; }
  .goals-heading { min-height: 76px; }
  .goal-group { padding-left: 17px; padding-right: 17px; }
  .field-columns { grid-template-columns: 1fr; gap: 14px; }
  .completion-cards, .focus-week-grid { grid-template-columns: 1fr; }
  .calendar-day { min-height: 48px; }
  .month-control { gap: 0; }
  .month-control .button { width: 26px; min-height: 40px; }
  .heatmap-legend { flex-wrap: wrap; font-size: 9px; }
}

/* v0.3.1: bounded content, warehouse cards and independently paged months. */
.danger-action.button { color: #994a4a; border-color: rgb(167 92 92 / 35%); }
.danger-action.button:hover { background: rgb(251 226 226 / 75%); }
.ledger-list { max-height: 420px; overflow-y: auto; }
.study-layout { align-items: start; }
.study-layout > .timer-panel { height: auto; overflow: visible; }
.study-aside { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
.study-aside > section { min-height: auto; overflow: visible; }
.study-aside > .focus-records { display: flex; flex-direction: column; }
.focus-records > .heading-with-icon { flex-shrink: 0; }
.focus-records .focus-total { margin: 11px 0; flex-shrink: 0; }
.focus-records .focus-total strong { font-size: 28px; }
.today-focus-chart { min-height: 94px; flex-shrink: 0; }
.today-focus-chart > p { font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.today-focus-bars { display: flex; align-items: flex-end; height: 77px; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.today-focus-bar { display: flex; flex: 0 0 34px; flex-direction: column; align-items: center; gap: 5px; height: 74px; justify-content: flex-end; }
.today-focus-bar i { display: block; width: 21px; background: #7f9e91; border-radius: 4px 4px 0 0; }
.today-focus-bar span { font-size: 9px; color: var(--muted); }
.retention-note { font-size: 9px; color: var(--muted); padding-top: 8px; flex-shrink: 0; line-height: 1.5; }
.today-focus-chart { flex: 1; min-height: 158px; }
.today-focus-bars { height: 140px; overflow-y: hidden; }
.today-focus-bar { height: 124px; }

/* The chosen task hierarchy: one floating capsule, two primary categories. */
.task-category-shell { position: sticky; top: 14px; z-index: 38; display: flex; justify-content: center; margin-bottom: 25px; pointer-events: none; }
.task-category-panel { outline: none; }
.task-category-panel .task-board { display: block; }
.task-category-panel .daily-panel { max-width: 850px; margin: 0 auto; }
.task-category-panel .habit-list { max-height: 430px; overflow-y: auto; }
.task-category-panel .goals-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.task-category-panel .goals-heading { grid-column: 1 / -1; }
.task-category-panel .goal-group { min-width: 0; }
.task-category-panel .goal-group-ordinary { border-right: 1px solid var(--border); }
.task-category-panel .goal-group > .group-empty { height: 360px; display: grid; place-items: center; }
.focus-summary { flex-shrink: 0; margin: 0 0 9px; }
.focus-summary > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.focus-summary-track { display: flex; gap: 2px; height: 7px; border-radius: 8px; background: rgb(52 90 96 / 9%); overflow: hidden; }
.focus-summary-track > i { flex-basis: 0; min-width: 0; background: #7f9e91; }
.focus-summary-track > i:nth-child(2n) { background: #aec5ba; }
.today-focus-chart { min-height: 117px; }
.today-focus-bars { height: 102px; }
.today-focus-bar { flex-basis: 64px; height: 85px; gap: 4px; }
.focus-bar-duration { font-size: 10px !important; color: var(--green) !important; font-weight: 550; }
@media(max-width: 650px) {
  .task-category-shell { top: 9px; margin-bottom: 21px; }
  .task-category-panel .goals-panel { grid-template-columns: minmax(0, 1fr); }
  .task-category-panel .goal-group-ordinary { border-right: 0; border-bottom: 1px solid var(--border); margin-bottom: 17px; }
}
.board-grid { --board-height: 600px; align-items: stretch; }
.board-grid > .heatmap-panel { height: var(--board-height); display: flex; flex-direction: column; }
.board-grid .heatmap-calendar { flex: 1; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
.board-grid .calendar-day { min-height: 0; }
.board-grid > .completion-cards { height: var(--board-height); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 20px; }
.completion-cards > .goal-stats { min-height: 0; display: flex; flex-direction: column; }
.completion-cards .panel-heading { padding: 17px 21px 12px; flex-shrink: 0; }
.completion-cards h2 { font-size: 16px; }
.completion-cards .panel-heading p { font-size: 10px; }
.completion-cards .month-control { gap: 0; font-size: 11px; }
.completion-cards .month-control .button { width: 25px; min-height: 34px; }
.completion-cards .goal-counts { padding: 0 21px 13px; }
.completion-cards .goal-counts strong { font-size: 23px; }
.completion-cards .goal-counts span { font-size: 10px; }
.completion-axes { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.completion-cards .completion-axis { margin-bottom: 9px; }
.completion-cards .axis-row-label { padding: 0 21px 5px; }
.completion-cards .event-axis { height: 25px; padding: 0 21px; gap: 3px; }
.completion-cards .axis-scale { padding: 0 21px; }
.completion-cards .axis-legend { padding: 9px 21px 12px; }
.completion-cards .axis-legend .button { min-height: 28px; }
.board-grid .focus-trend-row > span:last-child { width: 73px; }
@media(max-width: 1000px) {
  .board-grid > .heatmap-panel { height: 530px; }
  .board-grid > .completion-cards { height: 305px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .completion-cards .panel-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media(max-width: 900px) {
  .study-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; align-items:start; }
}
@media(max-width: 650px) {
  .study-aside { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .board-grid > .heatmap-panel { height: 495px; }
  .board-grid > .completion-cards { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 280px 310px; }
  .completion-cards .panel-heading { flex-direction: row; }
  .completion-cards h2 { font-size: 15px; }
}
/* Source order: ui-v4.css */
/* Material rebuild v0.4.1. Text has solid ink; task surfaces own their colour. */
:root{color-scheme:only light;--ink:#243344;--muted:#4c5b6e;--green:#396b58;--primary:#394855;--border:#b9c5d6;--surface:#f3f6fb;--control:#edf1f7;--hover:#fff;--track:#d5dfeb;--ground:#edf3f9;--purple:#7253a8;}
:root[data-theme=dark]{color-scheme:only dark;--ink:#f6f7fb;--muted:#c1c8d5;--green:#b6dcc6;--primary:#cbded5;--border:#596173;--surface:#272b37;--control:#373d4c;--hover:#464d5d;--track:#4b5264;--ground:#171a24;--purple:#d7c3f6;}
body{background:var(--ground);color:var(--ink);}
:root[data-theme=dark] .light-field{background:radial-gradient(ellipse 65% 65% at 5% 70%,#314b6580,transparent 80%),radial-gradient(ellipse 55% 60% at 65% 15%,#65507688,transparent 78%),radial-gradient(ellipse 50% 60% at 100% 85%,#73534c70,transparent 80%),#171a24;}
.fluid-background{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.50;}
.main-shell{position:relative;z-index:1;margin-left:76px;}
.sidebar{width:68px;padding:29px 10px 20px;background:rgb(245 248 252 / 96%);border-color:#d6deea;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;transition:width 220ms cubic-bezier(.16,1,.3,1);}
:root[data-theme=dark] .sidebar{background:rgb(35 39 51 / 96%);border-color:#414957;}
.sidebar:is(:hover,:has(:focus-visible),.mobile-open){width:224px;}
.brand{gap:12px;padding:0;width:196px;}
.brand-icon{width:46px;color:var(--ink);}
.brand-second{color:var(--muted);}
.sidebar-label{opacity:0;white-space:nowrap;transform:translateX(-8px);transition:opacity 130ms,transform 200ms cubic-bezier(.16,1,.3,1);}
.sidebar:is(:hover,:has(:focus-visible),.mobile-open) .sidebar-label{opacity:1;transform:none;}
.sidebar nav{margin-top:42px;gap:9px;}
.button-nav{width:100%;min-width:46px;height:46px;padding:0 13px;gap:16px;color:var(--muted);border-radius:11px;font-size:15px;flex-shrink:0;}
.button-nav svg{transition:transform 200ms cubic-bezier(.16,1,.3,1);}
.button-nav:hover svg{transform:translateY(-2px);}
.button-nav:hover, .button-nav.active{background:var(--control);color:var(--ink);}
.button-profile{width:196px;gap:15px;padding:18px 6px 0;color:var(--ink);}
.button-profile strong{font-size:13px;}
.avatar{flex-shrink:0;background:var(--control);color:var(--green);border-color:var(--border);}
.topbar{padding:0 34px;min-height:76px;background:transparent;border:0;}
.topbar-actions{gap:6px;}
.breadcrumb strong{color:var(--ink);}
.topbar-actions .button-icon{color:var(--ink);}
.theme-disc{display:block;width:19px;height:19px;border-radius:50%;background:conic-gradient(#f0f6fb 0deg 180deg,#344d67 180deg 360deg);border:1px solid var(--border);transform:rotate(-35deg);transition:transform 240ms;}
.theme-toggle:hover .theme-disc{transform:rotate(145deg);}
main{max-width:1270px;padding:24px 34px 64px;}
.page-heading{margin-bottom:28px;}
h1{font-size:30px;line-height:1.4;letter-spacing:-.025em;}
.page-heading p, .page-date{color:var(--muted);}
.button{border-radius:10px;}
.button-default{background:var(--primary);color:#fff;}
.button-default:hover{background:var(--green);}
:root[data-theme=dark] .button-default{color:#263b31;}
.button-secondary, .button-ghost{background:var(--control);border:1px solid var(--border);padding:0 13px;color:var(--ink);}
.button-secondary:hover, .button-ghost:hover{background:var(--hover);color:var(--ink);border-color:var(--border);}
.button-icon, .icon-button{color:var(--muted);}
.button-icon:hover, .icon-button:hover{background:var(--control);color:var(--ink);}
.button-icon:disabled{opacity:.55;}
/* Dark, substantially opaque panels on BOTH page backgrounds. */
.panel, .bank-card, .goal-card, .dialog-popup, .choice-popup{color-scheme:only dark;--ink:#f7f5fb;--muted:#d1cedd;--green:#b7ddc8;--primary:#dfd7f1;--purple:#d4c2f3;--border:rgb(232 224 255 / 26%);--surface:rgb(34 35 44 / 97%);--control:#353743;--hover:#484854;--track:#51505f;color:var(--ink);}
.panel{background:var(--surface);border:1px solid rgb(230 223 250 / 20%);border-radius:17px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 32px rgb(26 31 45 / 10%);}
.panel .button-default, .bank-card .button-default, .goal-card .button-default, .dialog-popup .button-default{background:var(--primary);color:#292235;}
.panel .button-default:hover, .bank-card .button-default:hover, .goal-card .button-default:hover, .dialog-popup .button-default:hover{background:#efe8ff;}
.heading-with-icon>svg{color:var(--muted);}
.panel-heading p, .panel-foot, .section-description, .goal-description, .task-time, .goal-action, .todo-completion small, .daily-shortcut small, .selected-step p, .selected-step small, .goal-counts span, .monthly-summary p, .axis-scale, .axis-legend, .axis-row-label{color:var(--muted);font-size:12px;}
.panel-foot{background:rgb(255 255 255 / 3%);}
.habit-title, .group-name{color:var(--ink);}
.todo-label{color:var(--muted);}
.done-label{color:var(--green);}
.subtle-count, .type-tag{background:var(--control);color:var(--muted);}
.progress-track{background:var(--track);}
.progress-fill{background:var(--green);}
.checkbox{background:transparent;color:#292334;}
.checkbox::before{border-color:#a7abbc;background:rgb(235 232 251 / 8%);}
.checkbox:hover::before{background:rgb(235 232 251 / 18%);border-color:var(--ink);}
.task-category-shell{top:18px;margin-bottom:24px;}
.task-category-panel{container-type:inline-size;}
.task-category-panel .goals-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink);}
.task-category-panel .goals-heading{display:none;}
.task-category-panel .goal-group{padding:0;border:0;margin:0;}
.goal-group-heading{padding:0 4px 6px;}
.goal-group-heading .group-add{min-height:36px;color:var(--ink);}
.goal-group-heading .subtle-count{background:var(--control);color:var(--muted);}
.task-deck{width:100%;min-width:0;padding:22px 8px 55px;touch-action:pan-x;overflow:hidden;border-radius:20px;outline-offset:3px;}
.task-deck:focus-visible{outline:2px solid var(--purple);}
.bank-card, .goal-card{position:relative;isolation:isolate;background:rgb(35 31 45 / 97%);border:1px solid rgb(239 225 255 / 36%);border-radius:16px;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.bank-card{display:flex;flex-direction:column;gap:7px;width:100%;height:100%;min-width:0;aspect-ratio:1.586;padding:18px 21px;}
.bank-card::before{display:none;}
.bank-card>*:not(.frost-material), .goal-card>*:not(.frost-material){position:relative;z-index:1;}
.frost-material{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;}
.frost-chroma{position:absolute;inset:0;padding:3px;background:#c084fc;opacity:.85;}
.frost-carbon{width:100%;height:100%;border-radius:13px;border-top-right-radius:100px;border-bottom-right-radius:45px;background:#25232c;}
.frost-optic{position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.frost-orb{position:absolute;width:43%;aspect-ratio:1;right:5%;top:15%;border-radius:50%;background:linear-gradient(35deg,#a855f7,#fdba74);animation:material-orbit 16s linear infinite;}
.frost-pane{position:absolute;inset:7px auto 7px 7px;width:71%;border-radius:11px;background:rgb(249 250 251 / 10%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
@keyframes material-orbit{to{transform:rotate(360deg);}}
.bank-kind-steps .frost-orb{background:linear-gradient(35deg,#7375e5,#b9d9f0);}
.bank-kind-todo .frost-orb{background:linear-gradient(35deg,#b772c7,#efb895);}
.bank-top{display:flex;align-items:center;gap:10px;min-height:25px;font-size:12px;line-height:1.3;color:var(--muted);}
.bank-type{display:flex;align-items:center;gap:6px;}
.bank-status{margin-left:auto;font-size:11px;}
.bank-top .button-icon{margin:-5px -7px -5px 0;width:31px;height:31px;min-height:31px;border-radius:50%;background:rgb(248 239 255 / 10%);color:#f8f4fc;border:1px solid rgb(248 239 255 / 18%);}
.bank-top .button-icon:hover{background:rgb(248 239 255 / 20%);}
.bank-card h3{font-size:20px;line-height:1.35;font-weight:600;letter-spacing:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;flex-shrink:0;max-width:91%;color:#fff;}
.bank-quantity{display:flex;flex-direction:column;gap:9px;flex:1;justify-content:center;min-height:0;}
.bank-card .quantity-line{margin:0;}
.bank-card .quantity-line strong{font-size:36px;line-height:1.05;font-weight:550;font-variant-numeric:tabular-nums;color:#fff;}
.bank-card .quantity-total{font-size:13px;color:#ddd6e8;}
.bank-card .percentage{font-size:12px;color:#c6f0d7;background:rgb(34 31 44 / 78%);border:1px solid rgb(247 241 255 / 18%);border-radius:6px;padding:4px 7px;}
.bank-shortcut{display:flex;gap:9px;align-items:center;}
.bank-shortcut .checkbox, .bank-todo .checkbox{width:32px;height:32px;min-width:32px;flex-shrink:0;}
.bank-card .checkbox::before{inset:4px;border-radius:5px;border-width:1px;}
.bank-shortcut strong{font-size:13px;font-weight:550;color:#fff;}
.bank-shortcut small{display:block;margin-top:2px;color:#d5cedf;font-size:11px;}
.bank-todo{display:flex;gap:13px;align-items:center;flex:1;}
.bank-todo strong{font-size:16px;color:#fff;}
.bank-todo p{margin-top:6px;font-size:13px;color:var(--muted);}
.bank-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;flex-shrink:0;}
.bank-bottom>div{display:flex;align-items:center;gap:7px;}
.bank-bottom .button{font-size:12px;min-height:35px;padding:0 11px;}
.bank-bottom .button-secondary{background:rgb(35 30 48 / 76%);border-color:rgb(237 226 255 / 32%);color:#f5efff;}
.bank-bottom .button-secondary:hover{background:#494057;}
.bank-created{color:#e2d9ed;background:rgb(35 30 48 / 76%);border-radius:6px;padding:5px 7px;display:flex;align-items:center;gap:5px;font-size:12px;}
/* Four slim spans + five quiet boundaries. A completed point is a check, never a ring. */
.steps-summary{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#e5deef;font-size:12px;padding:0;}
.steps-summary strong{font-weight:600;color:#f5efff;}
.steps-summary>span:last-child{color:#d2cbdc;}
.step-strip{display:flex;align-items:flex-start;gap:0;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:8px 2px 6px;margin:8px 0;}
.step-origin{position:relative;flex:0 0 22px;min-width:22px;height:22px;padding:0;border:1px solid #9690a5;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#e4dfed;background:#37333f;}
.step-origin i{display:none;}
.step-origin>span{position:absolute;top:27px;font-size:11px;}
.step-strip .step-node.button{flex:1 0 64px;width:auto;min-width:64px;height:65px;min-height:65px;padding:0;border:0;background:none;border-radius:0;color:#e3dce9;}
.step-strip .step-node .energy-cell{position:absolute;left:7px;right:19px;top:10px;width:auto;height:2px;margin:0;border:0;border-radius:2px;background:#797281;}
.step-strip .step-node.filled .energy-cell{background:#cbbbdf;}
.step-strip .step-node .boundary-node{position:absolute;right:0;top:0;width:22px;height:22px;font-size:11px;line-height:1;border:1px solid #9d94ad;background:#39333f;color:#efe9f7;outline:none;box-shadow:none;}
.step-strip .step-node.filled .boundary-node{background:#d4c5e9;border-color:#d4c5e9;color:#35283f;}
.step-strip .step-node.selected-node .boundary-node{background:#f1eafb;border-color:#f1eafb;color:#35283f;outline-offset:0;box-shadow:none;}
.step-strip .node-name{margin-top:30px;line-height:1.4;color:#e2d9eb;font-size:12px;}
.selected-step{padding:14px;margin:0;background:rgb(29 27 38 / 84%);border:1px solid rgb(235 221 255 / 27%);border-radius:10px;color:#f6efff;max-height:none;overflow:visible;}
.selected-step-title{gap:10px;}
.selected-step-title>div{min-width:0;}
.selected-step strong{font-size:14px;line-height:1.4;color:#fff;}
.selected-step small{display:block;margin-top:3px;font-size:12px;color:#d1c9df;}
.step-detail-stage{position:relative;overflow:hidden;}
.compact-steps{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:5px;}
.compact-steps .step-strip{height:34px;min-height:34px;margin:0;padding:6px 1px 4px;scrollbar-width:none;}
.compact-steps .step-origin>span{display:none;}
.compact-steps .step-strip .step-node.button{flex:1 0 46px;min-width:46px;height:26px;min-height:26px;}
.compact-steps .node-name{display:none;}
.compact-steps .step-detail-stage{height:49px;min-height:49px;flex-shrink:0;}
.compact-steps .selected-step{min-height:49px;padding:7px 10px;overflow:hidden;}
.compact-steps .selected-step strong{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.compact-steps .selected-step .checkbox{width:28px;height:28px;min-width:28px;}
.compact-steps .selected-step .checkbox::before{inset:2px;}
.compact-steps .selected-step p{display:none;}
.goal-card h3{color:#fff;overflow-wrap:anywhere;}
.goal-card .quantity-line, .goal-card .percentage{color:var(--green);}
.dialog-popup{background:var(--surface);border-color:var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:17px;}
.dialog-wide{width:min(590px,calc(100vw - 32px));}
.dialog-popup>.goal-card{margin-top:20px;padding:22px;height:auto;max-height:none;}
.dialog-description{color:var(--muted);}
.field>span, .field input, .field textarea{color:var(--ink);}
.field input, .field textarea, .choice-trigger, .choice-popup, .choice-item{background:var(--control);border-color:var(--border);color:var(--ink);}
.field input::placeholder, .field textarea::placeholder{color:var(--muted);}
.choice-popup{background:#282a35;}
.choice-item[data-highlighted]{background:#454250;}
.segmented{background:var(--track);}
.segmented>button{color:var(--muted);}
.segmented>button[data-active]{background:var(--control);color:var(--ink);border:1px solid var(--border);}
.heatmap-calendar .calendar-day{min-height:54px;font-size:14px;opacity:1;background:#343642;color:#f0f0f7;border:1px solid #545663;}
.heatmap-calendar .calendar-day.heat-future{opacity:1;background:#343642;color:#ececf4;}
.heatmap-calendar .calendar-day.heat-0{background:#62404d;color:#ffe8f0;border-color:#ad7b8a;}
.heatmap-calendar .calendar-day.heat-1{background:#384f45;color:#e1f4e8;}
.heatmap-calendar .calendar-day.heat-2{background:#496456;color:#e9fff2;}
.heatmap-calendar .calendar-day.heat-3{background:#6a8c74;color:#fff;}
.heatmap-calendar .calendar-day.heat-4{background:#badbc5;color:#213b2a;}
.calendar-count{font-size:11px;}
.calendar-weekdays{color:#d4d3df;}
.event-axis .axis-cell{padding:0;border:0;background:#555462;}
.event-axis .axis-cell:hover{background:#777281;}
.event-axis .axis-cell.has-event{background:#a9cfb9;}
.goal-stats-steps .event-axis .axis-cell.has-event{background:#c6b0e6;}
.axis-legend .button{padding:0 10px;color:#e5f2ea;}
.timer-digits{color:#faf9ff;}
.timer-digits span{color:#d0cadb;}
.timer-label, .timer-note{color:#ded9e6;}
.end-focus .button{min-height:42px;padding:0 18px;background:#36323f;border:1px solid #7d738a;color:#f6efff;}
.custom-timer>summary{display:list-item;list-style-position:inside;padding:13px 16px;background:#36323f;border:1px solid #7d738a;border-radius:10px;color:#f6efff;font-size:14px;font-weight:550;cursor:pointer;}
.custom-timer>summary:hover{background:#494051;}
.custom-timer[open]>summary{margin-bottom:16px;}
.custom-timer>summary:focus-visible{outline:2px solid #d1bae8;outline-offset:3px;}
.duration-list button{color:#f3edf9;background:#373340;border-color:#7b7388;}
.duration-list button[data-active]{color:#def4e5;background:#49554c;border-color:#a2c7b0;}
.sound-icon{background:#45404f;color:#d3e9df;}
.sound-option>div{min-width:0;}
.sound-option strong{overflow-wrap:anywhere;}
.sound-option div span, .volume-control{font-size:12px;color:#d9d3e2;}
.today-focus-bar{flex-basis:56px;}
.today-focus-bar span, .retention-note{font-size:11px;color:#e1dae9;}
.today-focus-bar .focus-bar-duration{color:#d8eddf;}
.today-focus-bar i{background:#b0cfbd;}
.focus-summary-track>i{background:#aecab9;}
.focus-summary-track>i:nth-child(2n){background:#d8e5dd;}
.today-focus-chart>p, .focus-summary>span{font-size:12px;color:#ded5e7;}
.appearance-setting{display:flex;gap:12px;align-items:center;margin-bottom:22px;}
.appearance-setting strong{color:var(--ink);}
.appearance-setting p{font-size:12px;margin-top:3px;}
.toast{left:calc(50% + 38px);background:#302736;color:#faf4ff;}
.danger-action.button{color:#ffd0d4;border-color:#bb7f89;}
.button-ai{background:#302c39;border-color:#7e748e;color:#e1f3e8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.button-ai:hover{background:#453a50;}
.warehouse-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;}
.warehouse-heading p{color:var(--muted);font-size:13px;}
.warehouse-toolbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.warehouse-toolbar .segmented{min-width:270px;flex-shrink:0;}
.warehouse-toolbar .segmented button{display:flex;align-items:center;gap:7px;white-space:nowrap;}
.warehouse-toolbar .segmented button span{font-size:12px;}
.warehouse-search{display:flex;gap:9px;align-items:center;min-width:180px;flex:1;padding:0 12px;min-height:44px;background:var(--control);border:1px solid var(--border);border-radius:10px;color:var(--muted);}
.warehouse-search input{width:100%;min-width:0;border:0;background:none;color:var(--ink);outline-offset:3px;font-size:14px;}
.warehouse-search input::placeholder{color:var(--muted);}
.warehouse-toolbar>.choice-trigger{width:auto;min-width:128px;}
.warehouse-note{margin:20px 0 26px;font-size:13px;color:var(--muted);}
.warehouse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.warehouse-grid>div{min-width:0;}
.warehouse-grid .bank-card{height:auto;}
.warehouse-empty{padding:70px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:17px;color:var(--muted);}
.warehouse-empty h2{color:var(--ink);font-size:20px;}
.warehouse-empty p{font-size:13px;text-align:center;line-height:1.8;}
html{scrollbar-color:#8a8799 transparent;}
::selection{background:#c7b2e5;color:#30203c;}
input, textarea{caret-color:var(--green);}
button:focus-visible, input:focus-visible, textarea:focus-visible, [role=checkbox]:focus-visible{outline-color:#b895d4;}
@container(max-width:720px){.task-category-panel .goals-panel{grid-template-columns:minmax(0,1fr);gap:18px;}}
@media(min-width:1440px){.bank-card{padding:22px 26px;gap:11px;}.bank-kind-steps{gap:6px;}.bank-card h3{font-size:22px;}.bank-card .quantity-line strong{font-size:40px;}.compact-steps .selected-step{padding:11px 13px;}.compact-steps .selected-step strong{font-size:15px;}}
@media(min-width:651px){.main-shell{transition:margin-left 220ms cubic-bezier(.16,1,.3,1);}}
@media(max-width:850px){.task-category-panel .goals-panel{grid-template-columns:minmax(0,1fr);gap:18px;}.task-deck{max-width:570px;margin:auto;}.warehouse-grid{grid-template-columns:minmax(0,1fr);}}
@media(max-width:650px){.sidebar{width:224px;transform:translateX(-100%);padding:25px 14px;}.sidebar.mobile-open{transform:translateX(0);}.sidebar .sidebar-label{opacity:1;transform:none;}.brand{width:auto;}.button-profile{width:100%;}.topbar{min-height:66px;}.topbar-actions{gap:0;}.breadcrumb>span, .breadcrumb>svg{display:none;}.breadcrumb{gap:4px;}.breadcrumb strong{font-size:12px;}.messages-button>span{display:none;}.messages-button{width:40px;padding:0;background:transparent;border:0;}.mobile-ai-button{display:none;}
 main{padding:20px 18px 106px;}.page-heading{gap:14px;align-items:flex-start;margin-bottom:24px;}h1{font-size:25px;}.page-heading .study-link{display:none;}.page-heading p{font-size:13px;}.page-date{margin-bottom:8px;}.mobile-nav{background:rgb(43 39 53 / 96%);border-color:#80758c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}.button-mobile-nav{color:#e4ddeb;}.button-mobile-nav.active{color:#fff;background:#5a4c67;}.button-ai{display:none;}.task-category-shell{margin-bottom:22px;}.task-deck{padding:18px 5px 46px;}.goal-group-heading{padding-bottom:3px;}
 .bank-card{padding:12px 15px;gap:5px;}.bank-top{font-size:11px;min-height:22px;}.bank-status{font-size:10px;}.bank-card h3{font-size:17px;line-height:1.3;-webkit-line-clamp:1;}.bank-card .quantity-line strong{font-size:29px;}.bank-card .quantity-total{font-size:12px;}.bank-shortcut strong{font-size:12px;}.bank-shortcut small{font-size:10px;}.bank-quantity{gap:6px;}.bank-shortcut .checkbox{width:28px;height:28px;min-width:28px;}.bank-card .checkbox::before{inset:2px;}.bank-bottom .button{font-size:11px;min-height:31px;padding:0 8px;}.bank-bottom .record-button-label{display:none;}.bank-created{font-size:11px;}.compact-steps{gap:3px;}.compact-steps .step-strip{height:30px;min-height:30px;padding:4px 1px;}.compact-steps .step-detail-stage{height:44px;min-height:44px;}.compact-steps .selected-step{padding:5px 8px;min-height:44px;}.compact-steps .selected-step small{font-size:10px;}.toast{left:50%;bottom:88px;}.warehouse-heading{flex-direction:column;align-items:flex-start;}.warehouse-toolbar{gap:10px;}.warehouse-toolbar .segmented{width:100%;}.warehouse-search{min-width:0;}.warehouse-toolbar>.choice-trigger{min-width:110px;}.warehouse-grid{gap:18px;}.warehouse-empty{padding:46px 20px;}
}
@media(prefers-reduced-motion:reduce){*, *::before, *::after{scroll-behavior:auto!important;animation:none!important;transition-duration:0s!important;}.fluid-background{display:none;}}
/* Final proportions: quiet markers, full-width spans, legible state badges. */
.steps-summary>span:first-child{margin-left:0;color:#e9e1f1;}
.steps-summary>span:last-child{margin-left:auto;color:#f2e8fa;background:rgb(31 26 40 / 88%);border:1px solid rgb(237 220 255 / 22%);padding:3px 6px;border-radius:5px;font-size:11px;}
.step-strip .step-origin{width:18px;min-width:18px;height:18px;flex-basis:18px;border:0;background:none;color:#d9cde3;font-size:10px;}
.step-strip .step-node .energy-cell{top:8px;right:15px;}
.step-strip .step-node .boundary-node{width:18px;height:18px;border-radius:5px;border:0;background:#3f3549;color:#f3e8fc;font-size:10px;}
.step-strip .step-node.filled .boundary-node{background:#735e88;color:#faf4ff;border:0;}
.step-strip .step-node.selected-node .boundary-node{background:#dfd0ef;color:#36223f;border:0;outline:none;}
.bank-kind-steps .frost-orb{background:linear-gradient(35deg,#a875dc,#efba9b);}
.panel{position:relative;isolation:isolate;box-shadow:none;}
.panel::before{content:'';position:absolute;inset:7px;z-index:-1;pointer-events:none;border-radius:12px;background:linear-gradient(120deg,rgb(248 242 255 / 7%),transparent 74%);}
.task-deck:not([data-motion-phase=settled]) .bank-card button, .task-deck:not([data-motion-phase=settled]) .bank-card [role=checkbox]{pointer-events:none;}
/* Keep the light sculpture below the headline; reserve a reliable reading area. */
.frost-orb{width:36%;top:23%;animation-play-state:var(--orb-play,paused);}
.task-deck:not([data-motion-phase=settled]) .frost-orb{animation-play-state:paused;}
.bank-card h3{max-width:87%;-webkit-line-clamp:1;}
.steps-summary{line-height:1.35;}
.steps-summary>span:last-child{line-height:1.35;padding:2px 5px;}
.compact-steps .step-strip{height:30px;min-height:30px;}
.compact-steps .step-detail-stage{height:52px;min-height:52px;}
.compact-steps .selected-step{min-height:52px;}
.compact-steps .selected-step strong{line-height:1.35;}
.compact-steps .selected-step small{line-height:1.3;margin-top:2px;}
.goal-card .percentage{background:rgb(31 26 40 / 88%);border:1px solid rgb(237 220 255 / 22%);border-radius:6px;padding:4px 7px;font-size:13px;}
@media(min-width:1440px){.compact-steps .step-detail-stage{height:58px;min-height:58px;}.compact-steps .selected-step{min-height:58px;}}
@media(max-width:650px){.compact-steps .step-detail-stage{height:46px;min-height:46px;}.compact-steps .selected-step{min-height:46px;}}
/* Reviewed repair: four dedicated rows, never footer over the selected step. */
.bank-kind-steps{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:5px;}
.bank-kind-steps>.bank-bottom{margin:0;align-self:end;}
.bank-kind-steps>.step-content{align-self:center;min-height:0;}
.compact-steps{gap:3px;}
.compact-steps .steps-summary{min-height:16px;font-size:12px;line-height:1.2;}
.compact-steps .steps-summary>span:last-child{display:none;}
.compact-steps .step-strip{height:24px;min-height:24px;padding:3px 1px;}
.compact-steps .step-detail-stage{height:44px;min-height:44px;}
.compact-steps .selected-step{min-height:44px;padding:4px 8px;}
.compact-steps .selected-step strong{font-size:13px;line-height:1.2;}
.compact-steps .selected-step small{font-size:11px;line-height:1.15;margin-top:1px;}
@media(min-width:1440px){.compact-steps .step-detail-stage{height:52px;min-height:52px;}.compact-steps .selected-step{min-height:52px;padding:7px 10px;}.compact-steps .selected-step strong{font-size:14px;}}
@media(max-width:650px){.compact-steps .steps-summary{font-size:11px;min-height:14px;}.compact-steps .step-detail-stage{height:40px;min-height:40px;}.compact-steps .selected-step{min-height:40px;padding:3px 8px;}.compact-steps .selected-step strong{font-size:12px;line-height:1.2;}.compact-steps .selected-step small{font-size:11px;line-height:1.15;}}
.bank-card h3{margin:0;}
.compact-steps .steps-summary{margin:0;}
/* Source order: ui-refinements.css */
/* v0.4.2: source components, spaced vertical travel, independent light optics. */
:root{--row-surface:rgb(250 252 255 / 78%);--segment-track:#dce1eb;--segment-thumb:#fff;--segment-ink:#304053;--segment-active:#233247;}
:root[data-theme=dark]{--row-surface:#30303b;--segment-track:#27272a;--segment-thumb:#f4f4f7;--segment-ink:#f4f4f7;--segment-active:#18181b;}
.sidebar{z-index:80;transition:width 480ms cubic-bezier(.22,1,.36,1),transform 480ms cubic-bezier(.22,1,.36,1);}
.sidebar-label{transition:opacity 160ms ease,transform 360ms cubic-bezier(.22,1,.36,1);}
.sidebar:is(:hover,:has(:focus-visible),.mobile-open) .sidebar-label{transition-delay:100ms;transition-duration:280ms,420ms;}
.button-nav svg{transition:transform 360ms cubic-bezier(.22,1,.36,1);}
.topbar{position:sticky;top:0;z-index:60;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;background:rgb(237 243 249 / 88%);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
:root[data-theme=dark] .topbar{background:rgb(23 26 36 / 87%);}
.topbar-actions{justify-self:end;}
.breadcrumb{min-width:0;}
.task-category-shell{position:static;margin:0;display:block;}
.category-capsule{position:relative;isolation:isolate;pointer-events:auto;overflow:hidden;width:146px;height:48px;border-radius:999px;background:rgb(48 43 58 / 96%);border:1px solid #91839e;box-shadow:0 6px 18px rgb(12 9 22 / 14%);transition:width 420ms cubic-bezier(.22,1,.36,1);}
.category-capsule[data-expanded=true]{width:280px;}
.capsule-current{position:absolute;inset:0;border:0;border-radius:inherit;background:transparent;color:#faf6ff;font:inherit;font-weight:600;cursor:pointer;transition:opacity 100ms;}
.category-capsule[data-expanded=true] .capsule-current{opacity:0;visibility:hidden;pointer-events:none;}
.capsule-segments{position:absolute;width:268px;left:50%;top:5px;transform:translateX(-50%);opacity:0;visibility:hidden;transition:opacity 160ms 80ms;}
.capsule-segments .rubber-segment{width:100%;}
.category-capsule[data-expanded=true] .capsule-segments{opacity:1;visibility:visible;}
.rubber-segment__item{font-family:inherit;}
main{padding-top:14px;}
.page-heading{margin-bottom:16px;}
.page-date{font-size:12px;margin-bottom:9px;}
.task-deck{position:relative;padding:36px 8px 80px;}
.task-deck .bank-card{background:#25232c;}
.task-deck .frost-chroma{opacity:1;}
.bank-kind-steps{grid-template-columns:minmax(0,1fr);}
.step-content, .step-detail-stage{min-width:0;max-width:100%;}
.step-strip{width:100%;min-width:0;}
.selected-step{width:100%;}
.step-detail-stage{isolation:isolate;}
.checkbox[data-checked], .checkbox[data-checked]:hover{color:#292334;}
.checkbox[data-checked]::before, .checkbox[data-checked]:hover::before, .checkbox[data-checked]:focus-visible::before{background:var(--green);border-color:var(--green);}
.checkbox[data-checked] svg{color:#292334;opacity:1;visibility:visible;}
.habit-list{display:flex;flex-direction:column;gap:10px;padding:0 18px 18px;}
.habit-swipe .swipe-row__surface{padding:0 14px;gap:12px;}
.habit-swipe .habit-text p, .warehouse-swipe .habit-text p{font-size:12px;color:var(--muted);line-height:1.5;}
.habit-swipe .habit-title{font-size:15px;line-height:1.4;}
.habit-swipe .habit-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.habit-swipe.is-done .habit-title{color:var(--ink);}
.habit-swipe .habit-text p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.habit-swipe .habit-text{flex:1;min-width:0;}
.habit-swipe .habit-text p{margin-top:3px;}
.habit-swipe .todo-label, .habit-swipe .done-label{font-size:11px;white-space:nowrap;}
.habit-swipe .checkbox{flex-shrink:0;}
.swipe-row__surface{padding-right:46px;}
.swipe-row__toggle{width:32px;height:32px;top:50%;right:8px!important;margin-top:-16px;clip-path:none;overflow:visible;display:grid;place-items:center;border-radius:8px;cursor:pointer;color:var(--sr-text);background:color-mix(in srgb,var(--sr-text) 7%,transparent);}
.swipe-row__toggle:focus-visible{width:32px;height:32px;padding:0;transform:none;border-radius:8px;outline:2px solid var(--purple);outline-offset:2px;}
.habit-swipe .swipe-row__surface{padding-right:46px;}
.warehouse-rows{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;}
.warehouse-swipe .habit-text{flex:1;min-width:0;}
.warehouse-swipe .habit-text strong{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.warehouse-row-icon{color:var(--muted);flex-shrink:0;}
.habit-detail>p{font-size:14px;line-height:1.7;color:var(--muted);}
.habit-history{margin:18px 0;max-height:310px;overflow:auto;}
.habit-history-row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);font-size:13px;}
.habit-history-row>span:last-child{display:flex;gap:6px;align-items:center;}
/* Light is milk glass: the background passes through, the ink stays solid. */
:root:not([data-theme=dark]) :is(.panel,.bank-card,.goal-card,.dialog-popup,.choice-popup){color-scheme:only light;--ink:#253344;--muted:#4d5b70;--green:#3b6b59;--primary:#354657;--purple:#745591;--border:rgb(115 135 161 / 42%);--surface:rgb(249 252 255 / 72%);--control:rgb(247 250 255 / 86%);--hover:#fff;--track:rgb(113 132 161 / 22%);color:var(--ink);}
:root:not([data-theme=dark]) .panel{background:var(--surface);border-color:rgb(255 255 255 / 82%);backdrop-filter:blur(28px) saturate(1.15);-webkit-backdrop-filter:blur(28px) saturate(1.15);}
:root:not([data-theme=dark]) :is(.bank-card,.goal-card){background:rgb(244 249 255 / 76%);border-color:rgb(255 255 255 / 94%);backdrop-filter:blur(28px) saturate(1.15);-webkit-backdrop-filter:blur(28px) saturate(1.15);}
:root:not([data-theme=dark]) .frost-chroma{background:linear-gradient(125deg,rgb(230 236 255 / 78%),rgb(240 214 239 / 66%),rgb(207 232 249 / 72%));opacity:.7;}
:root:not([data-theme=dark]) .frost-carbon{background:rgb(255 255 255 / 40%);}
:root:not([data-theme=dark]) .frost-orb{opacity:.45;filter:blur(14px);background:linear-gradient(35deg,#bf9cda,#f4c1ad);}
:root:not([data-theme=dark]) .frost-pane{background:rgb(255 255 255 / 35%);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);}
:root:not([data-theme=dark]) :is(.bank-card h3,.goal-card h3,.bank-card .quantity-line strong,.bank-shortcut strong,.bank-todo strong,.selected-step strong,.steps-summary strong){color:var(--ink);}
:root:not([data-theme=dark]) :is(.bank-card .quantity-total,.bank-shortcut small,.steps-summary,.steps-summary>span:first-child,.selected-step small,.step-strip .node-name){color:var(--muted);}
:root:not([data-theme=dark]) :is(.bank-card .percentage,.goal-card .percentage){background:rgb(246 251 255 / 88%);border-color:rgb(118 141 165 / 35%);color:var(--green);}
:root:not([data-theme=dark]) :is(.bank-bottom .button-secondary,.bank-created,.bank-top .button-icon){background:rgb(250 252 255 / 78%);border-color:rgb(104 124 151 / 45%);color:var(--ink);}
:root:not([data-theme=dark]) :is(.panel,.bank-card,.goal-card,.dialog-popup) .button-default{background:var(--primary);color:#fff;}
:root:not([data-theme=dark]) :is(.panel,.bank-card,.goal-card,.dialog-popup) .button-default:hover{background:#496a60;}
:root:not([data-theme=dark]) .selected-step{color:var(--ink);background:rgb(250 253 255 / 80%);border-color:rgb(111 127 157 / 34%);}
:root:not([data-theme=dark]) .step-strip .step-origin{color:#5e6b7c;}
:root:not([data-theme=dark]) .step-strip .step-node .energy-cell{background:#a4adbc;}
:root:not([data-theme=dark]) .step-strip .step-node.filled .energy-cell{background:#8e78a9;}
:root:not([data-theme=dark]) .step-strip .step-node .boundary-node{background:#d4dbea;color:#4b5366;}
:root:not([data-theme=dark]) .step-strip .step-node.filled .boundary-node{background:#816694;color:#fff;}
:root:not([data-theme=dark]) .step-strip .step-node.selected-node .boundary-node{background:#ece5f5;color:#4d345f;outline:1px solid #957ca7;}
:root:not([data-theme=dark]) .checkbox::before{background:rgb(255 255 255 / 45%);border-color:#7a8ba3;}
:root:not([data-theme=dark]) .checkbox[data-checked]::before{background:var(--green);border-color:var(--green);}
:root:not([data-theme=dark]) .checkbox[data-checked], :root:not([data-theme=dark]) .checkbox[data-checked] svg{color:#fff;}
:root:not([data-theme=dark]) .checkbox[data-checked]:hover::before{background:var(--green);border-color:var(--green);}
:root:not([data-theme=dark]) .category-capsule{background:rgb(249 252 255 / 90%);border-color:rgb(133 143 166 / 55%);box-shadow:0 6px 18px rgb(64 73 97 / 8%);}
:root:not([data-theme=dark]) .capsule-current{color:#273647;}
:root:not([data-theme=dark]) .choice-popup{background:rgb(245 249 255 / 97%);}
:root:not([data-theme=dark]) .choice-item[data-highlighted]{background:#e1e8f3;}
:root:not([data-theme=dark]) .heatmap-calendar .calendar-day{color:#3d4c61;background:rgb(251 253 255 / 78%);border-color:#bfcede;}
:root:not([data-theme=dark]) .heatmap-calendar .calendar-day.heat-future{color:#4b5b71;background:rgb(251 253 255 / 65%);}
:root:not([data-theme=dark]) .heatmap-calendar .calendar-day.heat-0{background:#f0d9e0;color:#6e394b;border-color:#d6a8b7;}
:root:not([data-theme=dark]) .heatmap-calendar .calendar-day.heat-1{background:#dcebe2;color:#345c45;}
:root:not([data-theme=dark]) .heatmap-calendar .calendar-day.heat-2{background:#bed8c9;color:#284937;}
:root:not([data-theme=dark]) .heatmap-calendar .calendar-day.heat-3{background:#678c76;color:#fff;}
:root:not([data-theme=dark]) .heatmap-calendar .calendar-day.heat-4{background:#35614d;color:#fff;}
:root:not([data-theme=dark]) .calendar-weekdays{color:var(--muted);}
:root:not([data-theme=dark]) .event-axis .axis-cell{background:#c7cfe0;}
:root:not([data-theme=dark]) .event-axis .axis-cell.has-event{background:#46755d;}
:root:not([data-theme=dark]) .goal-stats-steps .event-axis .axis-cell.has-event{background:#7654aa;}
:root:not([data-theme=dark]) .axis-legend .button{color:var(--green);}
:root:not([data-theme=dark]) :is(.timer-digits,.timer-digits span,.timer-label,.timer-note){color:var(--ink);}
:root:not([data-theme=dark]) :is(.end-focus .button,.custom-timer>summary,.duration-list button){background:rgb(250 252 255 / 82%);color:var(--ink);border-color:#b5c4d6;}
:root:not([data-theme=dark]) .duration-list button[data-active]{background:#dfebe3;border-color:#7eaa94;color:#355344;}
:root:not([data-theme=dark]) .sound-icon{background:#e7ecef;color:#365b4c;}
:root:not([data-theme=dark]) :is(.sound-option div span,.volume-control,.today-focus-bar span,.retention-note,.today-focus-chart>p,.focus-summary>span){color:var(--muted);}
:root:not([data-theme=dark]) .today-focus-bar .focus-bar-duration{color:var(--green);}
:root:not([data-theme=dark]) .today-focus-bar i{background:#6c9584;}
:root:not([data-theme=dark]) .button-ai{background:rgb(247 251 255 / 90%);color:#365d4b;border-color:#b5c4d6;}
:root:not([data-theme=dark]) .danger-action.button{color:#8a3547;border-color:#c5919c;}
@media(min-width:651px){.main-shell{transition:margin-left 480ms cubic-bezier(.22,1,.36,1);}}
@media(max-width:950px){.breadcrumb>span, .breadcrumb>svg{display:none;}.messages-button>span{display:none;}.messages-button{width:40px;padding:0;}.topbar{padding-inline:24px;gap:8px;}}
@media(max-width:650px){
 .topbar{padding:0 18px;grid-template-columns:1fr auto;gap:0;min-height:64px;}.topbar-tasks{grid-template-rows:64px 52px;}.topbar-actions{grid-column:2;grid-row:1;}.breadcrumb{grid-row:1;}
 main{padding-top:16px;}.page-heading{margin-bottom:14px;}.page-date{font-size:11px;}.page-heading p{font-size:12px;}.task-deck{padding:28px 5px 70px;}
 .habit-list{padding-inline:12px;}.habit-swipe .todo-label, .habit-swipe .done-label{display:none;}.warehouse-swipe .habit-text strong{font-size:14px;}.warehouse-swipe .habit-text p{font-size:11px;}.warehouse-swipe .button-secondary{padding-inline:9px;min-height:34px;font-size:12px;}
 :root:not([data-theme=dark]) .mobile-nav{background:rgb(246 251 255 / 92%);border-color:#c0cddd;}:root:not([data-theme=dark]) .button-mobile-nav{color:#536377;}:root:not([data-theme=dark]) .button-mobile-nav.active{background:#e0e9f3;color:#233c4d;}
}
@media(prefers-reduced-motion:reduce){.sidebar, .main-shell, .category-capsule{transition:none;}.capsule-segments{transition:opacity 120ms;}}
/* Source order: ui-frosted.css */
/* v0.4.6 — v0.4.4 app surfaces with original v0.4.3 goal task faces. */
:root {
  --frost-surface: rgb(247 251 255 / 54%);
  --frost-row: rgb(249 252 255 / 63%);
  --frost-light: rgb(255 255 255 / 60%);
  --frost-violet: rgb(164 158 218 / 12%);
  --frost-blue: rgb(141 187 221 / 13%);
  --frost-shadow: 0 18px 42px rgb(61 80 112 / 10%), 0 3px 9px rgb(61 80 112 / 4%);
  --frost-highlight: inset 0 1px 0 rgb(255 255 255 / 88%), inset 0 0 0 1px rgb(255 255 255 / 44%);
  --sun-ink: #b38337;
}
:root[data-theme=dark] {
  --frost-surface: rgb(44 40 58 / 72%);
  --frost-row: rgb(47 43 62 / 82%);
  --frost-light: rgb(223 207 250 / 8%);
  --frost-violet: rgb(169 133 224 / 13%);
  --frost-blue: rgb(128 173 219 / 9%);
  --frost-shadow: 0 20px 46px rgb(7 8 18 / 22%), 0 4px 12px rgb(9 9 22 / 12%);
  --frost-highlight: inset 0 1px 0 rgb(233 220 255 / 23%), inset 0 0 0 1px rgb(233 220 255 / 9%);
  --sun-ink: #ddbc77;
}
/* The page remains visible through the same finish over the whole surface. */
:root :is(.panel,.dialog-popup,.warehouse-empty) {
  background: radial-gradient(ellipse at 0% 0%,var(--frost-light),transparent 62%),
    radial-gradient(ellipse at 100% 80%,var(--frost-violet),transparent 70%),var(--frost-surface);
  border: 0;
  border-radius: 18px;
  box-shadow: var(--frost-shadow),var(--frost-highlight);
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
}
.panel::before { display:none; }
.panel-foot { background:transparent; }
.panel :is(.choice-trigger,.segmented,.sound-icon) { background:color-mix(in srgb,var(--control) 64%,transparent); }
.timer-panel { background:radial-gradient(ellipse at 90% 10%,var(--frost-violet),transparent 70%),radial-gradient(ellipse at 10% 90%,var(--frost-blue),transparent 75%),var(--frost-surface)!important; }
.timer-center { position:relative; }
.timer-digits { font-weight:350; letter-spacing:-.035em; }
.timer-tabs { box-shadow:inset 0 1px 2px rgb(0 0 0 / 4%); }
.timer-settings { border-color:color-mix(in srgb,var(--border) 48%,transparent); }
.sound-panel, .focus-records { border-radius:18px; }
.board-grid { gap:28px; }
.heatmap-calendar .calendar-day { border-color:color-mix(in srgb,var(--border) 52%,transparent); }
:root[data-theme=dark] .heatmap-calendar .calendar-day.heat-future {
  background:rgb(195 190 225 / 8%); border-color:rgb(219 211 238 / 17%); color:#ddd8eb;
}
:root:not([data-theme=dark]) .heatmap-calendar .calendar-day.heat-future {
  background:rgb(255 255 255 / 46%); border-color:rgb(146 165 189 / 25%); color:#49586e;
}
/* Goal task faces and spatial motion intentionally remain v0.4.3. */
/* Independent daily strips, with the summary and history note on the canvas. */
.task-category-panel .daily-floating { background:none; border:0; box-shadow:none; border-radius:0; max-width:950px; width:100%; margin:14px auto 0; }
.daily-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 4px; }
.daily-heading h2 { font-size:19px; font-weight:600; }
.daily-heading .heading-with-icon>svg { color:var(--sun-ink); }
.daily-heading p { color:var(--muted); font-size:12px; margin-top:7px; }
.daily-heading-actions { display:flex; align-items:center; gap:16px; }
.daily-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.daily-count strong { font-size:22px; font-weight:500; color:var(--ink); padding-right:2px; }
.daily-floating .daily-summary { padding:17px 4px 22px; border:0; display:flex; flex-direction:row-reverse; align-items:center; gap:24px; }
.daily-floating .daily-summary>.progress { flex:0 1 155px; margin-left:auto; }
.daily-floating .daily-summary .progress-track { height:3px; background:color-mix(in srgb,var(--ink) 12%,transparent); }
.daily-floating .daily-summary>span { margin:0; font-size:12px; }
.daily-floating .habit-list { padding:0; gap:16px; max-height:none; overflow:visible; }
.daily-foot { display:flex; align-items:center; gap:7px; margin:23px 4px 0; font-size:12px; color:var(--muted); line-height:1.7; }
:is(.habit-swipe,.warehouse-swipe).swipe-row { overflow:visible; border-radius:var(--sr-r); box-shadow:var(--frost-shadow); }
:is(.habit-swipe,.warehouse-swipe) .swipe-row__clip { background:transparent; }
:is(.habit-swipe,.warehouse-swipe) .swipe-row__surface {
  border-radius:var(--sr-r);
  background:radial-gradient(ellipse at 0% 0%,var(--frost-light),transparent 66%),
    radial-gradient(ellipse at 100% 100%,var(--frost-violet),transparent 72%),var(--frost-row);
  box-shadow:var(--frost-highlight);
  backdrop-filter:blur(28px) saturate(1.2);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);
  padding-left:24px; padding-right:58px; gap:18px;
}
.habit-swipe .habit-title { font-size:16px; font-weight:550; letter-spacing:.005em; }
.habit-swipe .habit-text p { margin-top:6px; font-size:12px; }
.habit-swipe .swipe-row__toggle { right:17px!important; background:transparent; }
.habit-swipe .checkbox { width:34px; height:34px; }
.habit-swipe .checkbox::before { inset:5px; border-radius:6px; }
.habit-swipe :is(.todo-label,.done-label) { font-size:12px; padding-inline:8px; }
/* Compact and expanded controls share one height and one rectangular track. */
.topbar { display:flex; justify-content:space-between; }
.topbar-tasks { grid-template-rows:none; }
.page-heading-tasks { position:relative; min-height:122px; margin-bottom:24px; }
.heading-category { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:12; }
.page-heading-tasks .page-intro { max-width:calc(50% - 86px); }
.page-heading-tasks h1 { font-size:28px; }
:root .category-capsule {
  width:146px; height:36px; border:0; border-radius:10px; background:var(--segment-track);
  box-shadow:0 6px 18px rgb(20 17 35 / 10%); backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:width 440ms cubic-bezier(.22,1,.36,1);
}
:root .category-capsule[data-expanded=true] { width:280px; background:transparent; box-shadow:none; }
.capsule-current { color:var(--ink); font-weight:550; font-size:13px; }
.capsule-current::after { content:''; display:inline-block; width:5px; height:5px; margin:0 0 3px 10px; border-right:1.2px solid currentColor; border-bottom:1.2px solid currentColor; transform:rotate(45deg); opacity:.6; }
.capsule-segments { width:280px; height:36px; top:0; transition:opacity 120ms 90ms; }
/* A small warm sun answers the pointer, then settles back into the sidebar. */
.brand-icon { position:relative; flex-shrink:0; color:var(--sun-ink); }
.brand-icon::before { content:''; position:absolute; width:42px; height:42px; left:2px; top:50%; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle,rgb(241 189 85 / 28%),transparent 70%); opacity:0; transition:opacity 800ms ease; }
.brand-sun { position:relative; transition:transform 900ms cubic-bezier(.22,1,.36,1),filter 900ms; }
.brand-sun circle { fill:rgb(236 184 87 / 6%); transition:fill 650ms ease; }
.brand:hover .brand-sun { transform:rotate(90deg); filter:drop-shadow(0 0 5px rgb(238 182 85 / 35%)); }
.brand:hover .brand-icon::before { opacity:1; }
.brand:hover .brand-sun circle { fill:rgb(241 195 106 / 28%); }
.brand:hover .brand-sun path { animation:sun-ray-light 1100ms ease both; }
.brand:hover .brand-sun path:nth-of-type(2n) { animation-delay:100ms; }
.brand:hover .brand-sun path:nth-of-type(3n) { animation-delay:200ms; }
@keyframes sun-ray-light { 45% { stroke:#f9d787; } }
@media (max-width:1100px) {
  .page-heading-tasks { padding-bottom:62px; min-height:0; }
  .page-heading-tasks .page-intro { max-width:none; }
  .heading-category { top:auto; bottom:0; transform:translateX(-50%); }
}
@media (max-width:650px) {
  .topbar-tasks { min-height:64px; }
  .page-heading-tasks { padding-bottom:58px; margin-bottom:22px; }
  .page-heading-tasks h1 { font-size:25px; }
  .daily-floating { margin-top:0!important; }
  .daily-heading { padding:0 2px; gap:10px; }
  .daily-heading h2 { font-size:17px; }
  .daily-heading-actions { gap:8px; }
  .daily-count { font-size:11px; }
  .daily-count strong { font-size:19px; }
  .daily-heading-actions>.button { min-height:34px; padding:0 9px; font-size:11px; }
  .daily-floating .daily-summary { gap:12px; padding:15px 2px 20px; }
  .daily-floating .daily-summary>.progress { flex-basis:70px; }
  .daily-floating .daily-summary>span { font-size:11px; }
  .daily-floating .habit-list { gap:13px; }
  .habit-swipe .swipe-row__surface { padding-right:46px; }
  .habit-swipe .habit-title { font-size:14px; }
  .habit-swipe .habit-text p { font-size:11px; margin-top:5px; }
  .habit-swipe .swipe-row__toggle { right:9px!important; }
  .habit-swipe .checkbox { width:30px; height:30px; }
  .habit-swipe .checkbox::before { inset:3px; }
  .daily-foot { font-size:11px; margin-top:19px; }
}
@media (prefers-reduced-motion:reduce) {
  .brand-sun, .brand-icon::before, .brand-sun circle, .category-capsule { transition:none; }
  .brand:hover .brand-sun { transform:none; }
  .brand:hover .brand-sun path { animation:none; }
}
/* Source order: ui-card-polish.css */
/* Quiet refinement of the chosen first variant. Goal task cards are excluded. */
.glass-mobile-button { display:none; }
.daily-floating .daily-heading { padding-inline:8px; }
.daily-floating .daily-summary { padding-inline:8px; }
.daily-floating .daily-foot { margin-inline:8px; }
.daily-count { font-variant-numeric:tabular-nums; }
.habit-swipe .swipe-row__surface { padding-left:24px; gap:16px; }
.habit-swipe .habit-title { line-height:1.5; }
.habit-swipe.is-done .habit-title { text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb,var(--ink) 38%,transparent); }
.habit-swipe :is(.done-label,.todo-label) { border-radius:7px; padding:5px 8px; font-size:11px; line-height:1.3; }
.habit-swipe .done-label { color:var(--green); background:color-mix(in srgb,var(--green) 9%,transparent); }
.habit-swipe .todo-label { color:var(--muted); background:color-mix(in srgb,var(--muted) 6%,transparent); }
.daily-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:45px 20px; border-radius:16px; background:var(--frost-row); box-shadow:var(--frost-shadow),var(--frost-highlight); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); }
.daily-empty>svg { color:var(--sun-ink); }
.daily-empty strong { font-size:15px; font-weight:550; color:var(--ink); }
.daily-empty p { font-size:12px; color:var(--muted); line-height:1.7; }
/* Each study card keeps its full content in the page's single vertical flow. */
.study-aside { grid-template-rows:auto auto; gap:22px; }
.study-aside :is(.sound-panel,.focus-records) { padding:24px; }
.study-aside .heading-with-icon>svg { color:var(--green); }
.sound-panel .section-description { margin-top:8px; }
.sound-panel>.choice-trigger { margin-top:15px; min-height:42px; border-radius:10px; }
.sound-panel .sound-option { padding-top:18px; padding-bottom:13px; gap:12px; }
.sound-icon { width:42px; flex-shrink:0; }
.sound-panel .import-audio { margin-top:17px; }
.sound-panel .volume-control { padding-top:3px; }
.focus-records .focus-total { margin:14px 0 12px; }
.focus-records .today-label { padding:4px 7px; border-radius:6px; background:color-mix(in srgb,var(--muted) 7%,transparent); font-size:11px; }
.focus-records .today-focus-chart { min-height:110px; }
.focus-records .today-focus-bars { height:98px; align-items:flex-end; }
.focus-records .today-focus-bar { height:94px; }
.focus-records .today-focus-chart.is-empty { position:relative; min-height:76px; flex:1; }
.focus-records .today-focus-chart.is-empty .today-focus-bars { display:none; }
.focus-records .today-focus-chart>.focus-empty { display:flex; align-items:center; justify-content:center; min-height:64px; margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.focus-records .retention-note { padding-top:10px; font-size:11px; line-height:1.6; }
.timer-panel .timer-tabs { width:224px; min-height:44px; border-radius:11px; padding:4px; }
.timer-panel .timer-tabs>button { border:0; min-height:36px; border-radius:8px; }
.timer-panel .timer-tabs>button[data-active] { background:var(--primary); color:var(--ground); box-shadow:0 2px 5px rgb(11 15 26 / 7%),inset 0 1px 0 rgb(255 255 255 / 14%); }
.timer-panel .timer-note { margin-top:13px; }
.timer-panel .timer-settings { border-top-color:color-mix(in srgb,var(--border) 48%,transparent); }
.timer-panel .timer-controls .start-button { min-width:168px; }
/* Keep the data strong while aligning the smaller statistics surfaces. */
.board-grid { gap:26px; }
.board-grid .panel-heading { align-items:flex-start; }
.board-grid .panel-heading h2 { font-size:18px; line-height:1.5; }
.board-grid .panel-heading p { margin-top:5px; line-height:1.6; }
.board-grid .month-control { margin-top:1px; flex-shrink:0; }
.board-grid .calendar-day { border-radius:11px; }
.board-grid .calendar-count { line-height:1.3; font-variant-numeric:tabular-nums; }
.board-grid .goal-counts strong { font-weight:550; }
.board-grid .axis-scale { font-variant-numeric:tabular-nums; }
.board-grid .axis-legend { line-height:1.6; }
.warehouse-empty { padding:58px 24px; }
.warehouse-empty>svg { color:var(--muted); }
.warehouse-swipe .habit-text strong { line-height:1.5; }
.warehouse-swipe .habit-text p { margin-top:5px; }
@media(max-width:950px) and (min-width:651px) {
  .study-aside :is(.sound-panel,.focus-records) { padding:20px; }
}
@media(max-width:650px) {
  .glass-mobile-button { display:inline-flex; }
  .daily-floating .daily-heading, .daily-floating .daily-summary { padding-inline:3px; }
  .daily-floating .daily-foot { margin-inline:3px; }
  .habit-swipe .swipe-row__surface { padding-left:15px; gap:10px; }
  .study-aside { grid-template-rows:auto auto; gap:18px; }
  .study-aside :is(.sound-panel,.focus-records) { padding:22px; }
  .focus-records .today-focus-chart { min-height:110px; }
  .timer-panel .timer-controls .start-button { min-width:146px; }
  .board-grid { gap:20px; }
  .board-grid .panel-heading h2 { font-size:17px; }
  .board-grid .panel-heading { gap:8px; }
  .daily-empty { padding:36px 16px; }
}
/* Source order: glass-boundaries.css */
/* The sidebar shares the page; a solid header covers content scrolling behind it. */
:root .app-shell .sidebar { background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
:root .app-shell .topbar { background:var(--ground); border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.main-shell { margin-left:68px; }
/* Each navigation option has a solid, readable surface; the sidebar stays open. */
:root { --nav-fill:#e9edf4; --nav-hover:#dce4ef; --nav-ink:#374359; --nav-active:#d5dfec; --nav-active-ink:#26384d; --brand-ray:#a64b97; }
:root[data-theme=dark] { --nav-fill:#30323e; --nav-hover:#413c4b; --nav-ink:#e7e3ec; --nav-active:#5a4c67; --nav-active-ink:#fff; --brand-ray:#e7ade8; }
:root .sidebar :is(.button-nav,.button-profile) { width:100%; min-width:46px; min-height:46px; border:0; border-radius:12px; background:var(--nav-fill); color:var(--nav-ink); box-shadow:none; transition:background-color 240ms ease,color 240ms ease,box-shadow 240ms ease; }
:root .sidebar :is(.button-nav,.button-profile):hover { background:var(--nav-hover); color:var(--nav-ink); box-shadow:0 4px 12px rgb(35 38 59 / 9%); }
:root .sidebar .button-nav:is(.active,[aria-expanded=true]) { background:var(--nav-active); color:var(--nav-active-ink); }
:root .sidebar :is(.button-nav,.button-profile):active { box-shadow:inset 0 2px 5px rgb(0 0 0 / 12%); }
:root .sidebar :is(.button-nav,.button-profile):focus-visible { outline:2px solid var(--purple); outline-offset:3px; }
:root .sidebar .button-nav svg { flex-shrink:0; transition:transform 280ms ease; }
:root .sidebar .button-nav:hover svg { transform:translateX(1px); }
:root .sidebar .button-profile { height:48px; padding:8px; gap:13px; overflow:hidden; }
:root .sidebar .button-profile .avatar { width:30px; height:30px; min-width:30px; border:0; background:var(--nav-active); color:var(--nav-active-ink); }
:root .sidebar-bottom { padding-top:16px; border:0; }
:root .sidebar .glass-nav-dot { background:var(--brand-ray); }
@media(prefers-reduced-motion:reduce) { :root .sidebar :is(.button-nav,.button-profile) { transition:none; } :root .sidebar .brand:hover .brand-sun path { animation:none; } }
.glass-lab-body { overscroll-behavior:contain; }
.app-liquid-layer { overflow:clip; contain:layout paint; }
.app-liquid-root>svg { overflow:hidden; pointer-events:none; }
.app-liquid-layer>span { display:none; }
.app-liquid-layer .glass::after { box-shadow:inset 0 1px 3px rgb(255 255 255 / 22%),inset 0 -1px 2px rgb(0 0 0 / 5%); }
.glass-background-choice { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 17px; }
.glass-background-choice select { width:146px; border:1px solid var(--border); border-radius:8px; background:var(--control); color:var(--ink); font:inherit; font-size:12px; min-height:34px; }
.glass-playground-link { display:block; color:var(--green); font-size:12px; text-decoration:none; margin:-6px 0 15px; }
.app-shell:has(.sidebar.glass-drawer-open) .main-shell { margin-left:68px; }
/* All three study surfaces use the same base material. */
:root .study-layout .panel:not(.app-glass-host) { background:radial-gradient(ellipse at 0% 0%,var(--frost-light),transparent 62%),radial-gradient(ellipse at 100% 80%,var(--frost-violet),transparent 70%),var(--frost-surface)!important; border:0; box-shadow:var(--frost-shadow),var(--frost-highlight); backdrop-filter:blur(32px) saturate(1.2); -webkit-backdrop-filter:blur(32px) saturate(1.2); }
/* Borderless calendar cells have their own readable data colour. */
:root .heatmap-calendar .calendar-day { border:0!important; box-shadow:none; opacity:1; }
:root:not([data-theme=dark]) .heatmap-calendar .calendar-day:not(.heat-0):not(.heat-1):not(.heat-2):not(.heat-3):not(.heat-4) { background:#d4ddeb; color:#30425b; }
:root[data-theme=dark] .heatmap-calendar .calendar-day:not(.heat-0):not(.heat-1):not(.heat-2):not(.heat-3):not(.heat-4) { background:#494b60; color:#f2f1fb; }
.heatmap-calendar .calendar-day:focus-visible { outline:2px solid var(--purple); outline-offset:3px; }
.heatmap-calendar .calendar-day:not(:disabled):hover { filter:brightness(1.05); }
/* Crisp background alternatives make the material easier to see. */
:root[data-background=solid] .light-field { background:#e8edf4!important; }
:root[data-theme=dark][data-background=solid] .light-field { background:#19202a!important; }
:root[data-background=ribbons] .light-field { background:linear-gradient(135deg,#f1f4fa 0% 31%,#a8bfd4 31% 43%,#d5d9ed 43% 64%,#c3acbd 64% 74%,#edf0f7 74%)!important; }
:root[data-theme=dark][data-background=ribbons] .light-field { background:linear-gradient(135deg,#171d28 0% 31%,#324d68 31% 43%,#292e46 43% 64%,#624652 64% 74%,#1d2433 74%)!important; }
:root[data-background=contrast] .light-field { background:linear-gradient(105deg,#edf3f7 0% 33%,#a9b2ca 33% 66%,#e6ded4 66%)!important; }
:root[data-theme=dark][data-background=contrast] .light-field { background:linear-gradient(105deg,#142532 0% 33%,#3e3652 33% 66%,#242f38 66%)!important; }
/* Dedicated page for the Codex right-hand browser panel. */
.material-playground { position:relative; isolation:isolate; min-height:100vh; }
.material-playground-main { margin-left:370px; max-width:none; padding:35px 30px 50px; }
.standalone-drawer.glass-lab-drawer { left:20px; top:20px; bottom:20px; width:330px; }
.material-playground-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:30px; }
.material-playground-header h1 { font-size:29px; margin:0; }
.material-playground-header p { font-size:13px; color:var(--muted); line-height:1.8; margin-top:10px; max-width:48ch; }
.material-playground-header>a { display:flex; align-items:center; gap:6px; color:var(--ink); text-decoration:none; white-space:nowrap; font-size:12px; padding:10px 12px; border-radius:9px; background:var(--control); }
.material-example-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; }
.material-example { position:relative; padding:25px; border-radius:18px; background:var(--frost-surface); box-shadow:var(--frost-shadow),var(--frost-highlight); }
.material-example>*:not(.app-liquid-layer) { position:relative; z-index:1; }
.material-example-title { display:flex; align-items:center; gap:9px; }
.material-example-title h2 { font-size:18px; font-weight:600; }
.material-example-title>svg { color:var(--green); }
.material-example>p { font-size:12px; color:var(--muted); line-height:1.8; margin-top:12px; }
.material-example-large { min-height:350px; display:flex; flex-direction:column; }
.material-example-number { margin:auto 0; padding:30px 0; font-size:64px; font-weight:350; letter-spacing:-.035em; }
.material-example-number span { color:var(--muted); }
.material-example-actions { display:flex; align-items:center; gap:14px; }
.material-example-actions button { background:var(--primary); color:var(--ground); border:0; border-radius:9px; padding:11px 16px; font:inherit; font-size:13px; }
.material-example-actions span { color:var(--muted); font-size:11px; }
.material-example-aside { display:grid; gap:24px; grid-template-rows:1fr 1fr; }
.material-example-line { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; font-size:13px; }
.material-example-mini { display:flex; align-items:baseline; gap:8px; margin-top:18px; }
.material-example-mini strong { font-size:32px; font-weight:500; }
.material-example-mini span { font-size:11px; color:var(--muted); }
.material-example-row { grid-column:1/-1; display:flex; align-items:center; gap:15px; min-height:95px; font-size:12px; }
.material-example-row strong { flex:1; font-size:15px; font-weight:550; }
.material-example-row>span:last-child { color:var(--muted); }
.material-playground-note { font-size:12px; color:var(--muted); line-height:1.8; margin:25px 3px; max-width:70ch; }
.material-playground-message { position:fixed; bottom:23px; right:24px; z-index:150; background:var(--control); color:var(--ink); border-radius:10px; box-shadow:0 10px 24px rgb(0 0 0 / 10%); padding:12px 18px; font-size:12px; }
@media(min-width:651px){.app-shell:has(.sidebar:is(:hover,:has(:focus-visible))) .main-shell { margin-left:224px; }.app-shell:has(.sidebar.glass-drawer-open) .main-shell { margin-left:68px; }}
@media(max-width:1000px){.material-example-grid { grid-template-columns:1fr; }.material-example-aside { grid-template-columns:1fr 1fr; grid-template-rows:auto; }.material-playground-header { flex-direction:column; gap:13px; }}
@media(max-width:720px){.material-playground-main { margin-left:0; padding:26px 20px 45px; }.standalone-drawer.glass-lab-drawer { position:relative; left:auto; top:auto; bottom:auto; width:auto; margin:16px; min-height:650px; max-height:none; }.standalone-drawer .glass-lab-body { overflow:visible; }.material-example-aside { grid-template-columns:1fr; }.material-playground-header h1 { font-size:25px; }.material-example-row { flex-wrap:wrap; }.material-example-row strong { flex-basis:100%; }}
@media(max-width:650px){
  .main-shell, .app-shell:has(.sidebar.glass-drawer-open) .main-shell { margin-left:0; }
  :root .app-shell .sidebar.mobile-open { background:var(--ground); }
  .app-shell:has(.sidebar.mobile-open) .mobile-nav { visibility:hidden; }
  /* Let the month grow with its rows instead of compressing tall buttons. */
  .board-grid > .heatmap-panel { height:auto; min-height:0; }
  .board-grid .heatmap-calendar { flex:0 0 auto; grid-auto-rows:minmax(56px,auto); gap:7px; }
  .board-grid .calendar-day { min-width:0; width:100%; min-height:56px; height:auto; padding:6px 0; gap:5px; line-height:1.2; }
  .board-grid .calendar-count { white-space:nowrap; font-size:clamp(9px,2.5vw,10px); line-height:1.2; }
  .board-grid .calendar-weekdays { column-gap:7px; }
}
/* Source order: vision-ocean.css */
/* A solid blue sea sits below the warm sun. */
:root { --ocean-wordmark:#0f6dbd; --ocean-horizon:#258cca; }
:root[data-theme=dark] { --ocean-wordmark:#7ac2f4; --ocean-horizon:#3da3df; }
.brand .brand-second { display:block; color:var(--ocean-wordmark); font-size:12px; font-weight:600; letter-spacing:.14em; }
.brand .brand-icon::after { content:''; position:absolute; left:50%; bottom:1px; transform:translateX(-50%); width:32px; height:3px; border-radius:2px; background:var(--ocean-horizon); pointer-events:none; transition:width 700ms cubic-bezier(.22,1,.36,1); }
.brand:hover .brand-icon::after { width:36px; }
/* Keep each saved background mode, shaping only the default soft field. */
:root:not([data-theme=dark])[data-background=aurora] .light-field { background:radial-gradient(ellipse 70% 70% at 0% 85%,rgb(133 187 217 / 28%),transparent 76%),radial-gradient(ellipse 65% 60% at 70% 6%,rgb(205 167 202 / 25%),transparent 78%),radial-gradient(ellipse 45% 55% at 100% 85%,rgb(224 195 205 / 20%),transparent 80%),var(--ground); }
:root[data-theme=dark][data-background=aurora] .light-field { background:radial-gradient(ellipse 70% 70% at 0% 80%,rgb(51 110 143 / 30%),transparent 78%),radial-gradient(ellipse 65% 55% at 70% 8%,rgb(112 80 126 / 27%),transparent 80%),radial-gradient(ellipse 45% 55% at 100% 85%,rgb(106 69 98 / 18%),transparent 80%),var(--ground); }
@media(prefers-reduced-motion:reduce) { .brand .brand-icon::after { transition:none; } }

/* Theme choices share the existing control and palette. */
.theme-popup{min-width:152px}
.theme-popup .choice-item{min-height:44px}
.main-shell main.main-timetable{position:relative;min-height:var(--timetable-page-height,calc(100dvh - 76px))}
.main-timetable .page-heading{position:relative;z-index:12;pointer-events:none}
.main-timetable .page-intro,.main-timetable .study-link{visibility:hidden;pointer-events:none}
.main-timetable .heading-category{pointer-events:auto}
.timetable-tab[hidden]{display:none!important}
.main-timetable>.timetable-tab{position:absolute;inset:0 0 auto;height:var(--timetable-area-height,calc(100dvh - 160px))}
.timetable-module{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;position:relative;background:#fff}
.timetable-save-state{padding:5px 12px;color:#7d7d87;font-size:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff}
.timetable-save-state:not(.failed){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.timetable-save-state.failed{color:#b93843;background:#fff2f3;justify-content:flex-start;font-size:14px}
.timetable-save-state span{display:flex;gap:12px;flex-wrap:wrap}.timetable-save-state button{color:inherit;text-decoration:underline;background:none;border:0;padding:4px;cursor:pointer;font:inherit}
.timetable-frame{display:block;width:100%;border:0;height:100%;flex:1;min-height:0;background:#fff;color-scheme:only light}
:root .category-capsule.customizable-capsule[data-expanded=true]{width:min(var(--capsule-expanded-width),calc(100vw - 32px))}
.customizable-capsule .capsule-segments{display:flex;align-items:center;gap:4px;width:100%}
.customizable-capsule .rubber-segment{width:calc(100% - 36px);min-width:0;flex:1}
.customizable-capsule .rubber-segment__item{padding-inline:6px}
.capsule-customize{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:0;border-radius:9px;background:var(--segment-track);color:var(--ink);cursor:pointer}
.capsule-customize:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.capsule-choice{display:flex;gap:14px;align-items:center;padding:15px 4px;cursor:pointer;color:var(--ink)}
@media(max-width:360px){.customizable-capsule .rubber-segment__item{font-size:12px;padding-inline:3px}}