@layer theme {
  :root {
    /* Titles / display: Newsreader (already bundled) — Claude-style editorial serif. */
    --serif: "Newsreader", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --font-display: var(--serif);
    /* Body: Source Serif 4 is the closest public stand-in for Anthropic Serif
       (proprietary). Lora + Newsreader keep the warm Claude reading texture offline. */
    --font-body: "Source Serif 4", "Lora", "Newsreader", "Noto Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --indicator-bg: rgba(255,255,255,.56);
    --indicator-border: rgba(69,57,44,.11);
    --indicator-ink: #70685d;
  }
  html { font-size: 16px; max-width: 100%; overflow-x: clip; }
  body {
    max-width: 100%; overflow-x: clip;
    font-family: var(--font-body); font-weight: 400; line-height: 1.68;
    letter-spacing: .006em; color: #211f1a;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
  button, input, select, textarea, option { font-family: inherit; }
  strong, b { font-weight: 600; }
  p, span, label, button, input, select, textarea { text-shadow: none; }

  /* Titles: display serif (Newsreader). Body stays Anthropic Serif stand-in. */
  h1, h2, h3, h4,
  .hero h1, .dialog-head h2, .detail-cover strong,
  .subscription-card h3, .section-head h2, .section-head h3 {
    font-family: var(--font-display); font-weight: 600;
  }
  .insight-total strong, .stat-card strong, .flip-remaining strong {
    font-family: var(--font-display); font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; letter-spacing: -.01em;
  }

  /* Header alignment and one deliberately drawn currency chevron. */
  .topbar-meta { align-items: center; }
  .local-pill {
    display: inline-flex; align-items: center; justify-content: center; height: 40px;
    padding: 0 15px; line-height: 1; vertical-align: middle;
  }
  .local-pill i { margin: 0; transform: none; }
  .currency-setting { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; }
  .currency-setting select {
    min-width: 84px; height: 40px; padding: 0 35px 0 11px; line-height: 40px;
    text-align: center; text-align-last: center; vertical-align: middle;
    background-image: none; -webkit-appearance: none; appearance: none;
  }
  .currency-setting::before {
    content: ""; position: absolute; right: 5px; top: 50%; width: 25px; height: 25px;
    border: 1px solid var(--indicator-border); border-radius: 9px;
    background: linear-gradient(155deg, rgba(255,255,255,.78), var(--indicator-bg));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96); transform: translateY(-50%); pointer-events: none;
  }
  .currency-setting::after {
    content: ""; position: absolute; right: 13px; top: 50%; width: 9px; height: 6px;
    background: var(--indicator-ink); pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translateY(-50%);
  }
  .topbar-meta .icon-button {
    width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    line-height: 0; vertical-align: middle;
  }
  .topbar-meta .icon-button svg { display: block; margin: auto; transform: none; }

  /* Hero: a clean editorial spine instead of disconnected type blocks. */
  .hero {
    min-height: 640px; padding: 88px 0 84px;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(54px, 7vw, 112px); position: relative; isolation: isolate;
  }
  .hero::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset: 22px -5vw 32px; border-radius: 48px; opacity: .72;
    background:
      radial-gradient(42rem 26rem at 17% 35%, rgba(217,119,87,.075), transparent 70%),
      radial-gradient(32rem 24rem at 82% 48%, rgba(161,144,116,.075), transparent 72%),
      repeating-linear-gradient(0deg, rgba(66,53,39,.018) 0 1px, transparent 1px 5px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .hero > * { position: relative; z-index: 1; }
  .hero-copy { position: relative; padding-left: clamp(24px, 3vw, 42px); }
  .hero-copy::before {
    content: ""; position: absolute; left: 0; top: 47px; width: 1px;
    height: clamp(188px, 21vw, 246px);
    background: linear-gradient(180deg, var(--terra) 0 58%, rgba(217,119,87,.12) 58% 100%);
  }
  .hero .eyebrow { margin: 0 0 24px; font-size: .74rem; letter-spacing: .11em; }
  .hero h1 {
    margin: 0 0 32px; display: flex; flex-direction: column; align-items: flex-start;
    font-weight: 600; line-height: .96; letter-spacing: -.045em;
  }
  .hero h1 .hl-lead {
    margin: 0 0 17px; padding: 0; font-size: clamp(1.08rem, 1.55vw, 1.45rem);
    font-weight: 400; line-height: 1.2; letter-spacing: .25em; color: var(--ink-3);
  }
  .hero h1 .hl-hero {
    margin: 0; font-size: clamp(3.55rem, 6.6vw, 6.15rem); font-style: normal;
    font-weight: 600; line-height: .92; letter-spacing: -.06em; color: var(--terra);
  }
  .hero h1 .hl-tail {
    margin: .14em 0 0; padding-left: clamp(.42em, 3.7vw, .78em);
    font-size: clamp(2.85rem, 5.35vw, 5rem); line-height: .98;
    font-weight: 600; letter-spacing: -.045em; color: var(--ink);
  }
  .hero h1 .hl-tail .dot {
    display: inline-block; margin-left: .08em; font-size: .72em;
    color: var(--terra); transform: translateY(-.06em);
  }
  .hero-intro { max-width: 34rem; font-size: 1.02rem; line-height: 1.9; color: #575044; }
  .hero-actions { margin-top: 36px; }

  /* Overview: quiet architecture with a tactile jelly hover. */
  .hero-visual { min-height: 430px; place-items: center; }
  .hero-visual::before {
    top: 50%; right: auto; width: min(392px, 31vw); height: 304px;
    transform: translateY(-47%) rotate(2.2deg); background: rgba(239,233,223,.5);
    border-color: rgba(73,62,49,.07); box-shadow: none;
  }
  .hero-visual::after { right: auto; bottom: 2%; width: min(326px, 26vw); opacity: .55; }
  .insight-shell {
    width: min(424px, 34vw); padding: 31px; cursor: default; transform-origin: 50% 72%;
    background:
      radial-gradient(22rem 14rem at 8% 0%, rgba(217,119,87,.055), transparent 68%),
      linear-gradient(155deg, rgba(255,255,255,.96), rgba(247,243,235,.92));
    border-color: rgba(68,55,42,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 26px 58px -32px rgba(61,46,34,.38);
    transition: box-shadow .44s var(--ease-out), border-color .44s ease;
    will-change: transform;
  }
  .insight-shell::before {
    inset: auto 24px 0; height: 1px; border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(217,119,87,.44), transparent); filter: none;
  }
  .insight-shell::after { opacity: .35; }
  /* Overview hover/press behaviour is defined by the pointer-tilt system further
     below; the old "jelly" keyframe hover here was fully overridden (dead code). */

  /* Subscription cards: no colour haze and no cursor-follow illumination. */
  .subscription-card {
    background: linear-gradient(158deg, rgba(255,255,255,.96), rgba(249,247,242,.96));
    border-color: rgba(51,43,34,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 14px 30px -24px rgba(55,43,31,.32);
    transform: none;
    transition: border-color .25s ease, box-shadow .28s var(--ease-out), opacity .5s ease;
  }
  .subscription-card::before, .subscription-card::after { content: none; display: none; }
  .subscription-card:hover {
    transform: none; border-color: rgba(51,43,34,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 20px 38px -27px rgba(55,43,31,.4);
  }
  .subscription-card:focus,
  .subscription-card:focus-visible {
    outline: 1px solid rgba(91,78,63,.22); outline-offset: 0;
    border-color: rgba(51,43,34,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 18px 34px -27px rgba(55,43,31,.36);
  }

  /* Status colour is based only on renewal urgency, never on category. */
  .subscription-card { --status-dot: #6B7B5E; --progress-color: #6B7B5E; }
  .subscription-card.urgency-urgent,
  .subscription-card.urgency-expired,
  .subscription-card.status-expired { --status-dot: #C47369; --progress-color: #C47369; }
  .subscription-card.urgency-soon,
  .subscription-card.urgency-relaxed,
  .subscription-card.urgency-quiet { --status-dot: #6B7B5E; --progress-color: #6B7B5E; }
  .subscription-card.urgency-cancelled,
  .subscription-card.status-cancelled { --status-dot: #9a9286; --progress-color: #9a9286; }
  .subscription-card.urgency-lifetime,
  .subscription-card.status-lifetime { --status-dot: #D97757; --progress-color: #D97757; }
  .card-category i { background: var(--status-dot); box-shadow: none; }
  .cycle-progress i { background: var(--status-dot); }

  /* Optical centering for CJK serif text inside compact chips. */
  .card-header { align-items: center; }
  .renewal-countdown {
    height: 28px; min-height: 28px; padding: 2px 11px 0;
    display: inline-grid; place-items: center; line-height: 1;
    box-sizing: border-box; font-style: normal;
  }
  .card-amount { align-items: center; }
  .card-pending {
    height: 25px; min-height: 25px; padding: 2px 10px 0;
    display: inline-grid; place-items: center; line-height: 1;
    box-sizing: border-box;
  }

  /* Search/filter controls use their own vertical geometry and CSS chevrons. */
  .search-control { align-items: center; }
  .search-control svg { align-self: center; }
  .search-control input {
    height: 50px; padding: 1px 0 0; line-height: 50px;
  }
  .select-control { position: relative; align-items: center; }
  .select-control select {
    height: 50px; padding: 1px 36px 0 0; line-height: 50px;
    background-image: none; -webkit-appearance: none; appearance: none;
  }
  .select-control::before,
  .form-select-control::before,
  .category-control::before {
    content: ""; position: absolute; right: 6px; top: 50%;
    width: 28px; height: 28px; border: 1px solid var(--indicator-border); border-radius: 10px;
    background: linear-gradient(155deg, rgba(255,255,255,.78), var(--indicator-bg));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 8px 18px -15px rgba(55,42,31,.5);
    transform: translateY(-50%); pointer-events: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .24s var(--ease-out);
  }
  .select-control::after,
  .form-select-control::after,
  .category-control::after {
    content: ""; position: absolute; right: 15px; top: 50%;
    width: 10px; height: 6px; z-index: 4; pointer-events: none;
    background: var(--indicator-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translateY(-50%); transform-origin: 50% 50%;
    transition: transform .28s var(--ease-out), background .2s ease;
  }
  .select-control:hover::before,
  .select-control.is-open::before,
  .form-select-control:hover::before,
  .form-select-control.is-open::before,
  .category-control:hover::before,
  .category-control.is-open::before {
    border-color: rgba(91,75,59,.2); background: rgba(255,254,251,.94);
    box-shadow: inset 0 1px 0 #fff, 0 9px 18px -15px rgba(70,53,39,.38);
  }
  .select-control:hover::after,
  .select-control.is-open::after,
  .form-select-control:hover::after,
  .form-select-control.is-open::after,
  .category-control:hover::after,
  .category-control.is-open::after { background: #433d35; }

  /* Refined custom filter picker; the native select remains as the data source. */
  .select-control.has-custom-select select {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    opacity: 0; pointer-events: none; overflow: hidden;
  }
  .select-control > .select-trigger,
  .form-select-control > .select-trigger {
    min-width: 82px; height: 50px; padding: 1px 36px 0 0;
    display: inline-flex; align-items: center; color: var(--ink);
    font-size: .84rem; font-weight: 500; font-style: normal; letter-spacing: 0;
    line-height: 1; cursor: pointer;
    white-space: nowrap; outline: none;
  }
  .select-control > .select-trigger:focus-visible,
  .form-select-control > .select-trigger:focus-visible { color: var(--terra-deep); }
  .select-control.is-open::after,
  .form-select-control.is-open::after,
  .category-control.is-open::after { transform: translateY(-50%) rotate(180deg); }
  .select-menu {
    position: absolute; z-index: 90; top: calc(100% - 3px); left: 5px;
    min-width: max(176px, calc(100% - 10px)); max-height: 326px; padding: 8px;
    overflow: auto; overscroll-behavior: contain;
    border: 1px solid rgba(70,58,45,.13); border-radius: 15px;
    background:
      linear-gradient(155deg, rgba(255,255,255,.98), rgba(247,243,235,.97));
    box-shadow: inset 0 1px 0 #fff, 0 24px 54px -24px rgba(56,43,31,.42);
    backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%);
    opacity: 0; transform: translateY(-7px) scale(.985); transform-origin: 24px 0;
    pointer-events: none; visibility: hidden;
    transition: opacity .2s ease, transform .28s var(--ease-out), visibility 0s .28s;
    scrollbar-width: thin; scrollbar-color: rgba(85,71,56,.24) transparent;
  }
  .select-control.is-open .select-menu,
  .form-select-control.is-open .select-menu,
  .category-control.is-open .select-menu {
    opacity: 1; transform: none; pointer-events: auto; visibility: visible;
    transition: opacity .2s ease, transform .28s var(--ease-out), visibility 0s;
  }
  .select-option {
    position: relative; width: 100%; min-height: 38px; padding: 2px 30px 0 13px;
    display: flex; align-items: center; border-radius: 9px;
    color: #4f493f; font-size: .8rem; line-height: 1.25; text-align: left;
    transition: background .16s ease, color .16s ease, transform .16s ease;
  }
  .select-option:hover,
  .select-option:focus-visible { background: rgba(217,119,87,.09); color: var(--ink); outline: 0; }
  .select-option[aria-selected="true"] { color: var(--terra-deep); background: rgba(217,119,87,.075); }
  .select-option[aria-selected="true"]::after {
    content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px;
    border-radius: 50%; background: var(--terra); transform: translateY(-50%);
    box-shadow: 0 0 0 3px rgba(217,119,87,.1);
  }

  /* The header currency switch uses the same authored menu as the filters.
     This removes the operating system's dark native selected-row marker. */
  .currency-setting.select-control {
    width: 84px;
    min-width: 84px;
    height: 40px;
    border: 0;
  }
  .currency-setting.select-control.has-custom-select select {
    width: 1px;
    min-width: 0;
  }
  .currency-setting.select-control > .select-trigger {
    width: 84px;
    min-width: 84px;
    height: 40px;
    padding: 1px 35px 0 11px;
    justify-content: center;
    color: #504a42;
    border: 1px solid rgba(70,58,45,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.66);
    box-shadow: inset 0 1px rgba(255,255,255,.95), 0 8px 18px -17px rgba(55,43,32,.38);
    transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .2s ease;
  }
  .currency-setting.select-control:hover > .select-trigger,
  .currency-setting.select-control.is-open > .select-trigger {
    color: #332f2a;
    border-color: rgba(91,75,59,.2);
    background: rgba(255,254,251,.94);
    box-shadow: inset 0 1px #fff, 0 11px 22px -18px rgba(55,43,32,.44);
  }
  .currency-setting.select-control::before {
    right: 5px;
    width: 25px;
    height: 25px;
    border-radius: 9px;
  }
  .currency-setting.select-control::after {
    right: 13px;
    width: 9px;
    height: 6px;
  }
  .currency-setting.select-control > .select-menu {
    top: calc(100% + 7px);
    left: 50%;
    width: 112px;
    min-width: 112px;
    max-height: 280px;
    margin-left: -56px;
    padding: 6px;
    border-radius: 13px;
    transform-origin: 50% 0;
  }
  .currency-setting.select-control .select-option {
    min-height: 35px;
    padding: 1px 10px 0;
    justify-content: center;
    color: #5d564c;
    border-radius: 8px;
    font-size: .77rem;
    text-align: center;
  }
  .currency-setting.select-control .select-option[aria-selected="true"] {
    color: #34302a;
    background: transparent;
    font-weight: 600;
  }
  .currency-setting.select-control .select-option[aria-selected="true"]::after {
    display: none;
  }
  .currency-setting.select-control .select-option:hover,
  .currency-setting.select-control .select-option:focus-visible {
    color: #4b4339;
    background: rgba(217,119,87,.075);
  }

  /* Shorter travel and softer landings. */
  .reveal { transform: translateY(10px); animation-duration: .68s; animation-timing-function: var(--ease-out); }
  .reveal-1 { animation-delay: .12s; } .reveal-2 { animation-delay: .2s; } .reveal-3 { animation-delay: .29s; }
  /* Reveal on scroll: GPU-friendly fade + lift only. Animating filter: blur()
     and clip-path here was the main source of choppy scroll transitions. */
  .motion-item {
    opacity: 0; transform: translate3d(0, 22px, 0) scale(.99);
    transition:
      opacity .5s var(--ease-out) calc(var(--motion-index,0) * 32ms),
      transform .56s var(--ease-out) calc(var(--motion-index,0) * 32ms);
  }
  .motion-item.in-view { opacity: 1; transform: none; }
  /* Cards use their own undelayed transition so hover in/out stays snappy.
     The old shared, staggered .82s transform transition made hover feel laggy. */
  .subscription-card.motion-item {
    opacity: 0; transform: translate3d(0, 24px, 0) scale(.99);
    transition:
      opacity .45s var(--ease-out), transform .42s var(--ease-out),
      border-color .25s ease, box-shadow .3s var(--ease-out);
  }
  .subscription-card.motion-item.in-view {
    opacity: 1; transform: none;
  }
  .subscription-card.motion-item.in-view:hover {
    transform: translateY(-3px);
    border-color: rgba(51,43,34,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 24px 44px -30px rgba(55,43,31,.42);
  }
  .waterfall-section { --motion-index: 0; }

  /* Card material: paper-like surface, status hairline, no coloured glow. */
  .subscription-card {
    background:
      linear-gradient(115deg, rgba(255,255,255,.18), transparent 34%),
      repeating-linear-gradient(0deg, rgba(64,52,40,.012) 0 1px, transparent 1px 4px),
      linear-gradient(158deg, rgba(255,255,255,.975), rgba(247,244,237,.965));
  }
  .subscription-card::before {
    content: ""; display: block; position: absolute;
    z-index: 2; left: 0; top: 24px; width: 2px; height: 38px;
    border-radius: 0 3px 3px 0; background: var(--status-dot); opacity: .55;
  }
  .card-timeline { border-top-color: rgba(47,39,31,.09); }
  .card-primary h3 { letter-spacing: -.02em; }

  /* Four-quadrant pressure card: pointer point sinks, opposite edges lift. */
  .insight-shell:hover { animation: none; }
  .insight-shell {
    --pointer-x: 50%; --pointer-y: 50%; --tilt-x: 0deg; --tilt-y: 0deg;
    --shadow-x: 0px; --shadow-y: 24px;
    transform: perspective(860px) rotateX(0) rotateY(0) translateY(0);
    transition: transform .7s cubic-bezier(.16,1,.3,1);
  }
  .insight-shell.is-tracking {
    transform: perspective(860px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-5px) scale(.997);
    transition: transform .11s ease-out;
    border-color: rgba(68,55,42,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 26px 58px -32px rgba(61,46,34,.38);
  }
  .insight-shell::after {
    opacity: .28;
    background: linear-gradient(176deg, rgba(255,255,255,.58), transparent 28%);
    transition: none;
  }
  .insight-shell.is-pressed {
    animation: none;
    transform: perspective(860px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-2px) scale(.978);
  }

  /* Never hide the whole renewal radar; its children reveal individually. */
  .renewals.motion-item,
  .renewals.motion-item.in-view {
    opacity: 1; transform: none; filter: none;
    clip-path: none; transition: none;
  }

  /* Structural navigation stays visible; only its content may animate. */
  .controls.motion-item,
  .controls.motion-item.in-view {
    opacity: 1; transform: none; filter: none;
    clip-path: none; transition: none;
  }
  .footer,
  .footer.motion-item,
  .footer.motion-item.in-view {
    opacity: 1; transform: none; filter: none;
    clip-path: none; transition: none;
  }

  /* Remove the temporary status hairlines requested in the latest review. */
  .subscription-card::before { content: none; display: none; }
  .primary-button, .secondary-button, .icon-button, .text-button, .reset-button { transition-timing-function: var(--ease-out); }

  .library-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
  .flip-all-button {
    position: relative; height: 46px; min-width: 158px; padding: 0 10px 0 12px;
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;
    overflow: hidden; border: 1px solid rgba(63,53,43,.12); border-radius: 13px;
    color: #4f493f; background: rgba(255,255,255,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 12px 24px -21px rgba(55,43,31,.42);
    font-size: .82rem; font-weight: 500; letter-spacing: .01em; cursor: pointer;
    transition: color .22s ease, background .3s var(--ease-out), border-color .22s ease, box-shadow .3s var(--ease-out), transform .18s var(--ease-out);
  }
  .flip-all-button:hover { transform: translateY(-1px); border-color: rgba(63,53,43,.2); background: rgba(255,255,255,.9); }
  .flip-all-button:active { transform: scale(.985); }
  .flip-all-button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
  .flip-all-button[aria-pressed="true"] {
    color: #fffaf0; border-color: rgba(29,30,26,.9);
    background:
      radial-gradient(8rem 5rem at 8% 0%, color-mix(in srgb, var(--terra) 22%, transparent), transparent 70%),
      linear-gradient(145deg, #30312b, #1e201c);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 16px 28px -19px rgba(25,23,19,.72);
  }
  .flip-all-mark { position: relative; width: 25px; height: 25px; flex: 0 0 25px; }
  .flip-all-mark i {
    position: absolute; width: 16px; height: 20px; border: 1px solid rgba(74,62,50,.32); border-radius: 5px;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,231,221,.9));
    box-shadow: 0 5px 10px -8px rgba(45,35,26,.6);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), background .25s ease, border-color .25s ease;
  }
  .flip-all-mark i:first-child { left: 1px; top: 3px; transform: rotate(-8deg); }
  .flip-all-mark i:last-child { right: 1px; top: 1px; transform: rotate(7deg); }
  .flip-all-button[aria-pressed="true"] .flip-all-mark i { border-color: rgba(255,255,255,.28); background: rgba(255,250,240,.12); }
  .flip-all-button[aria-pressed="true"] .flip-all-mark i:first-child { transform: translateX(6px) rotateY(180deg) rotate(4deg); }
  .flip-all-button[aria-pressed="true"] .flip-all-mark i:last-child { transform: translateX(-5px) rotateY(180deg) rotate(-4deg); }
  .flip-all-button small {
    min-width: 28px; height: 24px; margin-left: auto; padding: 1px 7px 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(65,54,43,.09); border-radius: 999px;
    color: #8a8073; background: rgba(70,57,44,.045);
    font-size: .62rem; font-weight: 500; font-variant-numeric: tabular-nums;
  }
  .flip-all-button[aria-pressed="true"] small { color: #e8ded0; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.065); }

  /* The file input is programmatic; never expose a duplicate native picker. */
  #importInput, #importInput[hidden] { display: none; }
  .footer { min-height: 104px; font-weight: 400; font-style: normal; }
  .footer button { font-style: italic; }

  /* Form selects and editable categories use the same quiet indicator system. */
  .form-select-control,
  .category-control {
    position: relative; width: 100%; min-width: 0; height: 52px; display: block;
  }
  .form-select-control::before,
  .category-control::before { right: 11px; }
  .form-select-control::after,
  .category-control::after { right: 20px; }
  .form-select-control > select {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; opacity: 0; pointer-events: none;
    overflow: hidden; -webkit-appearance: none; appearance: none;
  }
  .form-select-control > .select-trigger {
    width: 100%; min-width: 0; height: 52px; padding: 1px 52px 0 16px;
    border: 1px solid rgba(66,53,41,.11); border-radius: 13px;
    background: rgba(255,255,255,.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 18px -17px rgba(60,46,34,.42);
    transition: border-color .18s ease, background .18s ease, box-shadow .22s ease;
  }
  .form-select-control:hover > .select-trigger,
  .form-select-control.is-open > .select-trigger {
    border-color: rgba(66,53,41,.2); background: rgba(255,255,255,.94);
    box-shadow: inset 0 1px 0 #fff, 0 12px 24px -20px rgba(60,46,34,.46);
  }
  .form-select-control.is-open > .select-trigger,
  .form-select-control > .select-trigger:focus-visible {
    border-color: rgba(91,75,59,.25); box-shadow: 0 0 0 3px rgba(91,75,59,.055), inset 0 1px 0 #fff;
  }
  .form-select-control > .select-menu {
    top: calc(100% + 6px); left: 0; min-width: 100%; width: 100%;
  }
  .category-control input {
    width: 100%; height: 52px; padding: 0 54px 0 16px;
  }
  .category-toggle {
    position: absolute; z-index: 5; right: 4px; top: 4px; width: 42px; height: 44px;
    padding: 0; border: 0; border-radius: 11px; background: transparent; cursor: pointer;
  }
  .category-toggle:focus-visible { outline: 2px solid rgba(91,75,59,.28); outline-offset: -6px; }
  .category-control > .select-menu {
    top: calc(100% + 6px); left: 0; min-width: 100%; width: 100%; max-height: 246px;
  }
  .category-option-custom { font-style: italic; color: var(--terra-deep); }
  .category-option-custom::before { content: "+"; margin-right: 8px; font-style: normal; }
  .custom-cycle .form-select-control { width: 84px; min-width: 84px; height: 44px; flex: 0 0 84px; }
  .custom-cycle .form-select-control::before { right: 5px; width: 26px; height: 26px; border-radius: 9px; }
  .custom-cycle .form-select-control::after { right: 13px; width: 10px; height: 6px; }
  .custom-cycle .form-select-control > .select-trigger {
    width: 84px; height: 44px; padding: 1px 34px 0 12px; border-radius: 11px;
  }
  .custom-cycle .form-select-control > .select-menu { width: 132px; min-width: 132px; }

  /* Subscription editor — warm paper, crisp hierarchy and tactile controls. */
  .subscription-dialog {
    width: min(680px, calc(100vw - 28px));
    max-height: min(900px, calc(100vh - 28px));
    border-color: rgba(71,57,43,.14); border-radius: 28px;
    background:
      radial-gradient(34rem 24rem at 0% 0%, rgba(217,119,87,.075), transparent 68%),
      linear-gradient(160deg, rgba(255,255,255,.98), rgba(245,241,233,.97));
    box-shadow: inset 0 1px 0 #fff, 0 46px 110px -34px rgba(53,39,28,.48);
    scrollbar-width: thin; scrollbar-color: rgba(92,74,57,.34) transparent;
  }
  .subscription-dialog::-webkit-scrollbar { width: 8px; }
  .subscription-dialog::-webkit-scrollbar-track { background: transparent; }
  .subscription-dialog::-webkit-scrollbar-thumb {
    border: 2px solid transparent; border-radius: 999px;
    background: rgba(92,74,57,.32); background-clip: padding-box;
  }
  .subscription-dialog form {
    position: relative; padding: 0 36px;
    background:
      repeating-linear-gradient(0deg, rgba(62,49,37,.012) 0 1px, transparent 1px 5px);
  }
  .dialog-head {
    position: sticky; z-index: 6; top: 0;
    margin: 0 -36px 30px; padding: 30px 36px 23px;
    align-items: center; border-bottom-color: rgba(55,44,34,.09);
    background: linear-gradient(180deg, rgba(252,249,244,.97), rgba(250,247,241,.91));
    backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%);
  }
  .dialog-head h2 { margin-top: 6px; font-size: 2.12rem; line-height: 1; }
  .dialog-close {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.68); border-color: rgba(64,51,39,.1);
    box-shadow: inset 0 1px 0 #fff, 0 8px 18px -14px rgba(54,41,30,.45);
  }
  .form-grid { gap: 22px 18px; }
  .field { gap: 9px; }
  .field > span:first-child,
  .field legend {
    color: #665e52; font-size: .73rem; font-style: normal; letter-spacing: .055em;
  }
  .field input,
  .field select,
  .field textarea {
    border: 1px solid rgba(66,53,41,.11); border-radius: 13px;
    background: rgba(255,255,255,.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 18px -17px rgba(60,46,34,.42);
    transition: border-color .18s ease, background .18s ease, box-shadow .22s ease, transform .18s ease;
  }
  .field input,
  .field select { height: 52px; padding-inline: 16px; }
  .field textarea { min-height: 96px; padding: 15px 16px; }
  .field input:hover,
  .field select:hover,
  .field textarea:hover {
    border-color: rgba(66,53,41,.2); background: rgba(255,255,255,.92);
    box-shadow: inset 0 1px 0 #fff, 0 12px 24px -20px rgba(60,46,34,.46);
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    border-color: rgba(217,119,87,.62); background: #fff;
    box-shadow: 0 0 0 3px rgba(217,119,87,.1), inset 0 1px 0 #fff;
  }
  .date-control {
    position: relative; width: 100%; height: 52px; display: block; overflow: visible;
    border: 1px solid rgba(66,53,41,.11); border-radius: 13px;
    background: rgba(255,255,255,.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 18px -17px rgba(60,46,34,.42);
    transition: border-color .18s ease, background .18s ease, box-shadow .22s ease;
  }
  .date-control:hover {
    border-color: rgba(66,53,41,.2); background: rgba(255,255,255,.94);
    box-shadow: inset 0 1px 0 #fff, 0 12px 24px -20px rgba(60,46,34,.46);
  }
  .date-control:focus-within {
    border-color: rgba(91,75,59,.25); background: #fff;
    box-shadow: 0 0 0 3px rgba(91,75,59,.055), inset 0 1px 0 #fff;
  }
  .field.invalid .date-control { border-color: #b85543; }
  .date-control input[type="date"] {
    position: absolute; width: 1px; height: 1px;
    left: 12px; bottom: 0; margin: 0; padding: 0;
    border: 0; opacity: 0; pointer-events: none; box-shadow: none;
  }
  .date-picker-trigger {
    position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; padding: 0;
    border: 0; border-radius: inherit; background: transparent; cursor: pointer;
  }
  .date-picker-trigger:focus-visible { outline: 2px solid rgba(91,75,59,.28); outline-offset: -3px; }
  .date-control.is-open {
    border-color: rgba(91,75,59,.25); background: #fff;
    box-shadow: 0 0 0 3px rgba(91,75,59,.055), inset 0 1px 0 #fff;
  }
  .date-value {
    position: absolute; z-index: 4; inset: 0 56px 0 16px; display: flex; align-items: center;
    color: #403b34; font-size: .94rem; font-style: normal; font-variant-numeric: tabular-nums;
    letter-spacing: .035em; pointer-events: none;
  }
  .date-value.is-placeholder { color: #948a7d; letter-spacing: .075em; }
  .date-icon {
    position: absolute; z-index: 4; right: 11px; top: 50%; width: 28px; height: 28px;
    display: grid; place-items: center; border: 1px solid var(--indicator-border); border-radius: 10px;
    color: var(--indicator-ink); background: linear-gradient(155deg, rgba(255,255,255,.78), var(--indicator-bg));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 8px 18px -15px rgba(55,42,31,.5);
    transform: translateY(-50%); pointer-events: none;
    transition: color .18s ease, border-color .18s ease, transform .22s var(--ease-out);
  }
  .date-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
  .date-control:hover .date-icon,
  .date-control:focus-within .date-icon { color: #433d35; border-color: rgba(91,75,59,.2); }
  .date-control:focus-within .date-icon { transform: translateY(-50%) scale(.96); }
  .date-popover {
    position: absolute; z-index: 120; top: calc(100% + 8px); right: 0;
    width: min(300px, calc(100vw - 76px)); padding: 14px;
    border: 1px solid rgba(70,58,45,.14); border-radius: 16px;
    background: linear-gradient(155deg, rgba(255,255,255,.99), rgba(247,243,235,.985));
    box-shadow: inset 0 1px 0 #fff, 0 26px 58px -24px rgba(56,43,31,.46);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-7px) scale(.985); transform-origin: 82% 0;
    /* Collapse when closed so this absolutely-positioned popover stops adding
       phantom scroll height (the blank space under the dialog). max-height
       flips to 0 only after the close animation via the delayed 0s step. */
    max-height: 0; overflow: hidden;
    transition: opacity .18s ease, transform .24s var(--ease-out), visibility 0s .24s, max-height 0s .24s;
  }
  .date-control.popover-up .date-popover {
    top: auto; bottom: calc(100% + 8px); transform-origin: 82% 100%;
  }
  .date-control.is-open .date-popover {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    max-height: 520px; overflow: visible;
    transition: opacity .18s ease, transform .24s var(--ease-out), visibility 0s, max-height 0s;
  }
  .date-calendar-head { height: 34px; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 6px; }
  .date-calendar-title { color: #37322c; font-size: .86rem; font-weight: 600; text-align: center; letter-spacing: .025em; }
  .date-calendar-nav {
    width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
    border: 1px solid rgba(70,58,45,.1); border-radius: 9px; color: #665e53;
    background: rgba(255,255,255,.64); cursor: pointer;
  }
  .date-calendar-nav:hover { color: var(--terra-deep); border-color: rgba(217,119,87,.22); background: #fff; }
  .date-calendar-nav svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .date-calendar-weekdays,
  .date-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .date-calendar-weekdays { margin: 10px 0 5px; }
  .date-calendar-weekdays span { color: #9a9082; font-size: .62rem; text-align: center; }
  .date-calendar-day,
  .date-calendar-blank {
    width: 100%; aspect-ratio: 1; min-height: 31px; display: grid; place-items: center;
    border: 0; border-radius: 9px; background: transparent; font-size: .76rem;
  }
  .date-calendar-day { color: #4d463d; cursor: pointer; }
  .date-calendar-day:hover { color: var(--terra-deep); background: rgba(217,119,87,.09); }
  .date-calendar-day.is-today { box-shadow: inset 0 0 0 1px rgba(91,75,59,.22); }
  .date-calendar-day.is-selected { color: #fff; background: #d97757; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
  .date-calendar-footer { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(70,58,45,.08); display: flex; justify-content: space-between; align-items: center; }
  .date-calendar-today,
  .date-calendar-clear { padding: 5px 7px; color: #786f63; font-size: .68rem; border-radius: 7px; }
  .date-calendar-today:hover,
  .date-calendar-clear:hover { color: var(--terra-deep); background: rgba(217,119,87,.07); }
  .field-hint { padding-left: 2px; color: #968b7c; }
  .price-input-wrap > b {
    left: 16px; min-width: 36px; display: inline-flex; align-items: center;
    letter-spacing: .02em; white-space: nowrap;
  }
  .price-input-wrap input { padding-left: 62px; }

  .cycle-field legend { margin-bottom: 10px; }
  .cycle-options {
    height: 56px; padding: 5px; gap: 4px; border-radius: 15px;
    background: rgba(76,61,46,.045);
    border: 1px solid rgba(67,54,41,.09); box-shadow: inset 0 1px 2px rgba(67,54,41,.045);
  }
  .cycle-options label { height: 44px; }
  .subscription-dialog .cycle-options input[type="radio"] {
    position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; border-radius: 11px;
    opacity: 0; cursor: pointer; background: transparent; box-shadow: none;
  }
  .cycle-options label span {
    border-radius: 11px; font-size: .8rem; font-style: normal;
    transition: color .18s ease, background .18s ease, box-shadow .2s ease, transform .16s ease;
  }
  .cycle-options label:hover span { background: rgba(255,255,255,.5); }
  .cycle-options input:checked + span {
    color: #fff; background: linear-gradient(180deg, #df8565, #d37150);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -12px rgba(158,76,50,.52);
  }
  .cycle-options input:active + span { transform: scale(.97); }

  .advanced-settings {
    margin-top: 28px; padding: 0 17px;
    border: 1px solid rgba(67,54,41,.1); border-radius: 16px;
    background: linear-gradient(155deg, rgba(255,255,255,.48), rgba(241,236,227,.5));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  }
  .advanced-settings summary { min-height: 62px; }
  .advanced-settings summary > span { font-weight: 500; }
  .advanced-settings summary small { font-size: .76rem; }
  .advanced-settings summary i {
    position: relative; width: 28px; height: 28px; border: 1px solid var(--indicator-border);
    border-radius: 10px; background: linear-gradient(155deg, rgba(255,255,255,.78), var(--indicator-bg));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96); transform: none;
  }
  .advanced-settings summary i::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 6px;
    background: var(--indicator-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translate(-50%, -50%); transition: transform .28s var(--ease-out);
  }
  .advanced-settings[open] summary i { transform: none; }
  .advanced-settings[open] summary i::after { transform: translate(-50%, -50%) rotate(180deg); }
  .advanced-grid { padding: 6px 0 20px; border-top: 1px solid rgba(67,54,41,.08); }
  .color-field .color-input-wrap {
    height: 52px; border: 1px solid rgba(66,53,41,.11);
    background: rgba(255,255,255,.74); box-shadow: inset 0 1px 0 rgba(255,255,255,.98);
  }
  .color-swatches button { width: 25px; height: 25px; }

  /* Specialised controls must not inherit generic input dimensions. */
  .subscription-dialog .custom-cycle {
    min-height: 64px; padding: 10px 13px; gap: 10px; flex-wrap: wrap;
  }
  .subscription-dialog .custom-cycle input[type="number"],
  .subscription-dialog .custom-cycle select {
    width: 74px; min-width: 74px; height: 44px;
    flex: 0 0 74px; margin: 0; box-sizing: border-box;
    border: 1px solid rgba(66,53,41,.12); border-radius: 11px;
    background-color: rgba(255,255,255,.88);
    box-shadow: inset 0 1px 0 #fff;
  }
  .subscription-dialog .custom-cycle input[type="number"] { padding: 0 8px; }
  .subscription-dialog .custom-cycle select { padding: 0 30px 0 12px; }

  .subscription-dialog .cycle-options input:checked + span {
    color: #fff; -webkit-text-fill-color: #fff;
    background: #d97757;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 7px 16px -12px rgba(145,66,42,.58);
  }
  .subscription-dialog .cycle-options label:has(input:checked):hover span {
    color: #fff; background: #d97757;
  }
  .subscription-dialog .cycle-options label.is-selected span {
    color: #fff; -webkit-text-fill-color: #fff;
    background: #d97757;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 7px 16px -12px rgba(145,66,42,.58);
  }

  .color-field .color-input-wrap {
    padding: 0 14px; gap: 12px;
  }
  .color-field .color-input-wrap input[type="color"] {
    width: 32px; min-width: 32px; height: 32px;
    flex: 0 0 32px; padding: 0; margin: 0;
    border: 0; border-radius: 50%; overflow: hidden;
    background: none;
    box-shadow: 0 0 0 1px rgba(60,48,37,.18), 0 4px 10px -8px rgba(48,36,27,.5);
    cursor: pointer;
  }
  .color-field .color-input-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
  .color-field .color-input-wrap input[type="color"]::-webkit-color-swatch {
    border: 3px solid #fff; border-radius: 50%;
  }
  .color-field .color-input-wrap output { color: #6f675c; font-size: .78rem; letter-spacing: .02em; }
  .color-swatches { margin-top: 3px; gap: 10px; align-items: center; }
  .color-swatches button {
    width: 26px; height: 26px; border: 3px solid #faf7f1;
    box-shadow: 0 0 0 1px rgba(62,49,37,.26);
  }
  .color-swatches button[aria-pressed="true"] {
    transform: scale(1.06); outline: 2px solid #4b463e; outline-offset: 2px;
    box-shadow: 0 0 0 1px rgba(62,49,37,.18);
  }

  .dialog-actions {
    position: relative; z-index: 2; bottom: auto;
    min-height: 78px; margin: 24px -36px 0; padding: 14px 36px 16px;
    border-top-color: rgba(55,44,34,.09);
    background: linear-gradient(0deg, rgba(247,243,235,.98), rgba(250,247,241,.96));
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 -12px 28px -28px rgba(58,44,32,.32);
  }
  .dialog-actions .text-button { border: 1px solid transparent; }
  .dialog-actions .text-button:hover { border-color: rgba(65,52,40,.09); }
  .save-button { min-width: 166px; }

  /* One scroll owner prevents stale blank space when advanced fields resize. */
  .subscription-dialog {
    max-height: none; overflow: hidden;
  }
  .subscription-dialog form {
    width: 100%; max-height: min(900px, calc(100vh - 28px)); overflow-y: auto; overflow-x: clip;
    overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin;
    scrollbar-color: rgba(92,74,57,.3) transparent;
  }
  .subscription-dialog form::-webkit-scrollbar { width: 8px; }
  .subscription-dialog form::-webkit-scrollbar-track { background: transparent; }
  .subscription-dialog form::-webkit-scrollbar-thumb {
    border: 2px solid transparent; border-radius: 999px;
    background: rgba(92,74,57,.28); background-clip: padding-box;
  }

  /* Custom intervals use an explicit stepper instead of tiny native arrows. */
  .subscription-dialog .custom-cycle input[type="number"] {
    width: 58px; min-width: 58px; flex: 0 0 58px; padding: 0 2px;
    -moz-appearance: textfield; appearance: textfield;
  }
  .custom-cycle input::-webkit-inner-spin-button,
  .custom-cycle input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
  .cycle-step {
    width: 34px; min-width: 34px; height: 44px; padding: 0; display: grid; place-items: center;
    border: 1px solid rgba(66,53,41,.12); border-radius: 11px; color: #6f675c;
    background: rgba(255,255,255,.78); box-shadow: inset 0 1px 0 #fff;
    font: 500 1rem/1 var(--font-body);
    cursor: pointer; transition: color .16s ease, background .16s ease;
  }
  .cycle-step:hover { color: var(--terra-deep); background: rgba(217,119,87,.075); }
  .cycle-step:focus-visible { outline: 2px solid rgba(217,119,87,.45); outline-offset: -3px; }

  /* =====================================================================
     FINAL COHESIVE SYSTEM — one warm editorial language across the app
     ===================================================================== */
  :root {
    --surface: rgba(252,250,246,.94);
    --surface-strong: rgba(255,254,251,.98);
    --surface-muted: rgba(244,240,232,.82);
    --border-soft: rgba(58,47,37,.105);
    --border-strong: rgba(58,47,37,.17);
    --shadow-soft: 0 18px 42px -30px rgba(57,43,31,.34);
  }

  /* Brand and top-level chrome */
  .brand { gap: 12px; }
  .brand-logo {
    width: 32px; height: 32px;
    filter: drop-shadow(0 2px 5px rgba(150,72,48,.16));
  }
  .brand-word { justify-content: center; line-height: 1; }
  .brand-word b { display: flex; align-items: center; gap: 6px; font-size: 1.08rem; }
  .brand-word b::after {
    content: "V1";
    padding: 3px 5px 2px;
    border: 1px solid rgba(116,101,84,.16);
    border-radius: 999px;
    color: #8b7f70;
    background: rgba(255,255,255,.5);
    font: 600 .48rem/1 var(--font-body);
    letter-spacing: .09em;
  }
  .brand-word i { margin-top: 4px; color: #8b8173; }
  .topbar,
  .controls {
    border-color: var(--border-soft);
    background: linear-gradient(180deg, rgba(252,250,246,.94), rgba(248,245,239,.9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 16px 40px -31px rgba(57,43,31,.32);
  }

  /* Statistics use one family; the first card is accented, not a different UI. */
  .stat-card,
  .stat-card-featured {
    color: var(--ink);
    background:
      repeating-linear-gradient(0deg, rgba(62,49,37,.01) 0 1px, transparent 1px 5px),
      linear-gradient(158deg, var(--surface-strong), rgba(247,243,235,.94));
    border-color: var(--border-soft);
    box-shadow: inset 0 1px 0 #fff, var(--shadow-soft);
  }
  .stat-card-featured {
    box-shadow: inset 0 1px 0 #fff, var(--shadow-soft);
  }
  .stat-card-featured::after { content: none; }
  .stat-card-featured .stat-head { color: var(--muted); }
  .stat-card-featured .stat-head span {
    background: rgba(217,119,87,.11); color: var(--terra-deep);
  }
  .stat-card-featured > div > p:not(.stat-head p) { color: var(--ink-3); }
  .stat-card-featured .mini-bars i { background: var(--terra); opacity: .82; }
  .stat-card-featured strong.stat-empty { color: var(--muted); }

  /* Renewal radar matches the page instead of behaving like a separate glass demo. */
  .renewals {
    background:
      repeating-linear-gradient(0deg, rgba(62,49,37,.01) 0 1px, transparent 1px 5px),
      linear-gradient(158deg, rgba(253,251,247,.94), rgba(244,240,232,.9));
    border-color: var(--border-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94), var(--shadow-soft);
  }
  .renewals::before { content: none; }
  .renewal-item {
    background: rgba(255,254,251,.74); border-color: var(--border-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px -23px rgba(57,43,31,.32);
  }
  .renewal-item::before { width: 2px; background: var(--terra); opacity: .48; }

  /* Library cards: unified spacing tokens — states differ by color only. */
  :root {
    --card-padding: 16px;
    --card-radius: 22px;
    --card-height: 168px;
    --card-gap: 14px;
    --badge-top: 12px;
    --badge-right: 16px;
    --badge-padding-x: 10px;
    --badge-padding-y: 3px;
    --badge-radius: 999px;
    --badge-font-size: 11px;
    --title-margin-top: 38px;
    --title-font-size: 16px;
    --title-font-weight: 600;
    --price-margin-top: 4px;
    --price-font-size: 16px;
    --price-font-weight: 400;
    --divider-height: 5px;
    --divider-margin-bottom: 10px;
    --divider-bottom: 32px;
    --footer-font-size: 11px;
    --footer-margin-bottom: 14px;
    --state-permanent: #D97757;
    --state-permanent-bg: #FDF6F2;
    --state-expired: #C47369;
    --state-expired-bg: #FDF5F3;
    --progress-soon: #C47369;
    --progress-ok: #6B7B5E;
    --progress-lifetime: #D97757;
    --card-tint: transparent;
    --card-ink: #1d1b16;
    --card-muted: #8a8174;
  }
  .status-items { gap: var(--card-gap); }
  .subscription-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--card-height);
    min-height: var(--card-height);
    max-height: var(--card-height);
    border-radius: var(--card-radius);
  }
  .subscription-card:not(.flip-ready) {
    padding: var(--title-margin-top) var(--card-padding) var(--footer-margin-bottom);
    border: 1px solid rgba(51,43,34,.11);
    background:
      linear-gradient(165deg, rgba(255,255,255,.72), transparent 46%),
      repeating-linear-gradient(0deg, rgba(62,49,37,.012) 0 1px, transparent 1px 5px),
      linear-gradient(158deg, #fffcf7 0%, #f6f1e8 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 0 0 1px rgba(255,255,255,.28),
      0 1px 2px rgba(55,43,31,.04),
      0 14px 32px -20px rgba(55,43,31,.34);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Absolute size lock across every status group — zero exceptions */
  .status-group .subscription-card,
  .status-group-active .subscription-card,
  .status-group-expired .subscription-card,
  .status-group-cancelled .subscription-card,
  .status-group-lifetime .subscription-card {
    height: var(--card-height);
    min-height: var(--card-height);
    max-height: var(--card-height);
    border-radius: var(--card-radius);
  }
  .subscription-card:hover,
  .subscription-card.motion-item.in-view:hover {
    border-color: var(--border-strong);
    box-shadow: inset 0 1px 0 #fff, 0 22px 42px -32px rgba(57,43,31,.4);
  }
  .subscription-card .card-header {
    position: absolute;
    top: var(--badge-top);
    right: var(--badge-right);
    left: var(--card-padding);
    min-height: 0;
    height: auto;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
  }
  .subscription-card .card-header .renewal-countdown {
    pointer-events: auto;
    flex: none;
    height: auto;
    min-height: 0;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-radius);
    font-size: var(--badge-font-size);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }
  .subscription-card .card-header .card-category {
    max-width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(3px);
    font-size: var(--badge-font-size);
    line-height: 1.2;
    pointer-events: none;
    color: var(--card-muted);
    transition: opacity .22s ease, transform .28s var(--ease-out);
  }
  .subscription-card .card-header .card-category i {
    background: var(--status-dot, #6B7B5E);
    opacity: .7;
  }
  .subscription-card:hover .card-header .card-category,
  .subscription-card:focus-visible .card-header .card-category {
    opacity: .72;
    transform: none;
  }
  .card-primary {
    margin: 0;
    flex: 0 0 auto;
  }
  .card-primary h3 {
    margin: 0;
    color: var(--card-ink, #1d1b16);
    height: 20px;
    max-height: 20px;
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: 20px;
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card-amount {
    margin-top: var(--price-margin-top);
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    align-items: center;
    overflow: hidden;
  }
  .card-amount strong {
    color: var(--card-ink);
    font-size: var(--price-font-size);
    font-weight: var(--price-font-weight);
    line-height: 20px;
  }
  .card-amount small {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .2s ease, transform .22s var(--ease-out);
  }
  .card-pending {
    height: 20px; min-height: 20px; max-height: 20px;
    padding: 0;
    border: 0; border-radius: 0;
    background: transparent;
    color: #a3998c;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: .01em;
    opacity: .85;
  }
  .card-open {
    opacity: 0; transform: translateY(3px); color: var(--terra-deep); font-size: .72rem;
  }
  .subscription-card:hover .card-amount small,
  .subscription-card:focus-visible .card-amount small { opacity: .82; transform: none; }
  .subscription-card:hover .card-open,
  .subscription-card:focus-visible .card-open { opacity: 1; transform: none; }
  .card-timeline {
    margin-top: auto;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .cycle-progress {
    height: var(--divider-height);
    min-height: var(--divider-height);
    margin: 0 0 var(--divider-margin-bottom);
    background: rgba(50,42,34,.075);
    border-radius: 99px;
    overflow: hidden;
  }
  .cycle-progress.is-hidden { visibility: visible; }
  .cycle-progress i {
    min-width: 0;
    height: 100%;
    background: var(--progress-color, var(--card-color));
    box-shadow: none;
    border-radius: inherit;
    transition: width .45s var(--ease-out), background-color .35s ease;
  }
  .card-schedule {
    height: 14px;
    min-height: 14px;
    max-height: 14px;
    padding-top: 0;
    margin: 0;
    align-items: center;
    overflow: hidden;
    color: var(--card-muted, #8a8174);
    font-size: var(--footer-font-size);
    line-height: 14px;
  }
  .card-schedule > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 14px;
  }
    /* Shared neutral surface — no status tint on card body */
  .subscription-card {
    --card-tint: transparent;
    --progress-color: var(--status-dot, #6B7B5E);
  }
  .subscription-card.status-lifetime,
  .subscription-card.urgency-lifetime {
    --card-tint: transparent;
    --status-dot: #D97757;
    --progress-color: #D97757;
  }
  .subscription-card.status-expired,
  .subscription-card.urgency-expired {
    --card-tint: transparent;
    --status-dot: #C47369;
    --progress-color: #C47369;
  }
  .subscription-card.urgency-urgent {
    --progress-color: #C47369;
  }
  .subscription-card.urgency-soon,
  .subscription-card.urgency-relaxed,
  .subscription-card.urgency-quiet {
    --progress-color: #6B7B5E;
  }
  .subscription-card.status-lifetime .renewal-countdown,
  .subscription-card.urgency-lifetime .renewal-countdown {
    --u-ink: #D97757;
    --u-bg: color-mix(in srgb, #D97757 14%, #fff);
  }
  .subscription-card.status-expired .renewal-countdown,
  .subscription-card.urgency-expired .renewal-countdown {
    --u-ink: #C47369;
    --u-bg: color-mix(in srgb, #C47369 14%, #fff);
  }
  .subscription-card.status-expired .card-primary,
  .subscription-card.status-expired .card-timeline,
  .subscription-card.status-cancelled .card-primary,
  .subscription-card.status-cancelled .card-timeline,
  .subscription-card.status-lifetime .card-primary,
  .subscription-card.status-lifetime .card-timeline {
    opacity: 1;
  }
  /* Kill any outer-card background on status (face carries the surface) */
  .subscription-card.status-lifetime,
  .subscription-card.urgency-lifetime,
  .subscription-card.status-expired,
  .subscription-card.urgency-expired {
    background: transparent;
  }
  /* Absolute content skeleton ? identical for every status */
  .subscription-card .card-primary,
  .card-face-front .card-primary {
    position: absolute;
    top: var(--title-margin-top);
    left: var(--card-padding);
    right: var(--card-padding);
    margin: 0;
    height: 44px;
  }
  .subscription-card .card-timeline,
  .card-face-front .card-timeline {
    position: absolute;
    left: var(--card-padding);
    right: var(--card-padding);
    bottom: var(--footer-margin-bottom);
    margin: 0;
    padding: 0;
    height: 30px;
    border-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
  }
  /* Premium progress track */
  .cycle-progress,
  .card-face-front .cycle-progress,
  .status-group .cycle-progress,
  .status-group-lifetime .cycle-progress,
  .status-group-expired .cycle-progress,
  .status-group-active .cycle-progress {
    display: block;
    visibility: visible;
    position: relative;
    height: var(--divider-height);
    min-height: var(--divider-height);
    max-height: var(--divider-height);
    margin: 0 0 var(--divider-margin-bottom);
    border-radius: 999px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255,255,255,.65), transparent 60%),
      rgba(55, 44, 34, .13);
    box-shadow:
      inset 0 1px 1.5px rgba(40, 30, 22, .16),
      inset 0 -0.5px 0 rgba(255,255,255,.4);
  }
  .cycle-progress i,
  .card-face-front .cycle-progress i {
    min-width: 0;
    height: 100%;
    border-radius: inherit;
    background:
      linear-gradient(180deg, rgba(255,255,255,.38), transparent 45%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--progress-color, #6B7B5E) 78%, #fff),
        var(--progress-color, #6B7B5E) 55%,
        color-mix(in srgb, var(--progress-color, #6B7B5E) 88%, #2a2118));
    box-shadow:
      0 0 0 0.5px color-mix(in srgb, var(--progress-color, #6B7B5E) 22%, transparent),
      0 2px 6px -2px color-mix(in srgb, var(--progress-color, #6B7B5E) 40%, transparent);
  }
  .status-group .status-items { gap: var(--card-gap); }
  .status-group-head span { color: #6B7B5E; }
  .status-group-expired .status-group-head span { color: #C47369; }
  .status-group-lifetime .status-group-head span { color: #D97757; }
  .status-group-cancelled .status-group-head span { color: #9a9286; }
  .legend-active { background: #6B7B5E; }
  .legend-expired { background: #C47369; }
  .legend-lifetime { background: #D97757; }
  .legend-cancelled { background: #9a9286; }
  /*   /* Badge glass chip — same geometry, color only differs */
  .subscription-card .card-header .renewal-countdown,
  .card-face-front .card-header .renewal-countdown {
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--progress-color, #6B7B5E) 22%, transparent);
    border-radius: 999px;
    color: var(--progress-color, #6B7B5E);
    background:
      linear-gradient(165deg, rgba(255,255,255,.8), transparent 55%),
      color-mix(in srgb, var(--progress-color, #6B7B5E) 10%, #fff);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 3px 8px -6px rgba(55,43,31,.22);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 20px;
  }
  /* Status-tinted chips — same 3-color logic as progress */
  .subscription-card .renewal-countdown {
    --u-ink: var(--progress-color, #6B7B5E);
    --u-bg: color-mix(in srgb, var(--progress-color, #6B7B5E) 12%, #fff);
    color: var(--progress-color, #6B7B5E);
    border-color: color-mix(in srgb, var(--progress-color, #6B7B5E) 22%, transparent);
    background:
      linear-gradient(165deg, rgba(255,255,255,.82), transparent 55%),
      color-mix(in srgb, var(--progress-color, #6B7B5E) 10%, #fff);
  }

  /* Detail: premium Claude minimalism + one Liquid Glass moment.
     Presence comes from material, type, and air — not from boxed grids. */
  .detail-dialog {
    --detail-color: #D97757;
    width: min(640px, calc(100vw - 32px));
    height: fit-content; max-height: min(900px, calc(100dvh - 32px));
    isolation: isolate; overflow: hidden;
    border: 1px solid rgba(255,255,255,.78); border-radius: 28px;
    background:
      radial-gradient(34rem 22rem at 0% 0%, color-mix(in oklab, var(--detail-color) 11%, transparent), transparent 68%),
      linear-gradient(168deg, #faf8f3 0%, #f3eee5 100%);
    backdrop-filter: blur(40px) saturate(160%);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 40px 100px -28px rgba(40,30,22,.55),
      0 12px 28px -18px color-mix(in oklab, var(--detail-color) 22%, transparent);
  }
  .detail-cover {
    --glass-x: 78%; --glass-y: 22%; --glass-shift: 0px;
    position: relative; overflow: hidden;
    min-height: 188px; margin: 0; padding: 36px 36px 34px;
    border: 0; border-bottom: 1px solid rgba(67,54,41,.06); border-radius: 0;
    background:
      radial-gradient(24rem 16rem at var(--glass-x) var(--glass-y), rgba(255,255,255,.94), transparent 55%),
      radial-gradient(18rem 14rem at 108% 118%, color-mix(in oklab, var(--detail-color) 32%, transparent), transparent 62%),
      radial-gradient(14rem 11rem at -8% -10%, color-mix(in oklab, var(--detail-color) 10%, transparent), transparent 68%),
      linear-gradient(132deg,
        rgba(255,255,255,.78) 0%,
        rgba(255,250,243,.42) 48%,
        color-mix(in oklab, var(--detail-color) 16%, rgba(246,239,230,.5)) 100%);
    backdrop-filter: blur(36px) saturate(175%) contrast(1.04);
    -webkit-backdrop-filter: blur(36px) saturate(175%) contrast(1.04);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(70,55,40,.05);
  }
  .detail-cover::before {
    content: ""; position: absolute; z-index: 0; inset: -75% -25% -10% -35%;
    border-radius: 48%; pointer-events: none;
    background: linear-gradient(116deg,
      transparent 20%,
      rgba(255,255,255,.06) 32%,
      rgba(255,255,255,.86) 43%,
      rgba(255,255,255,.12) 53%,
      transparent 65%);
    filter: blur(1.4px); opacity: .82;
    transform: translateX(var(--glass-shift)) rotate(-7deg);
    transition: transform .5s cubic-bezier(.16,1,.3,1);
  }
  .detail-cover::after {
    content: ""; position: absolute; z-index: 0; inset: 0;
    border-radius: inherit; pointer-events: none;
    background:
      radial-gradient(10rem 7rem at 97% 4%, rgba(255,255,255,.78), transparent 70%),
      linear-gradient(90deg, rgba(255,255,255,.32), transparent 12% 88%, rgba(255,255,255,.22)),
      linear-gradient(180deg, rgba(255,255,255,.28), transparent 40%);
    opacity: 1;
  }
  .detail-cover > span,
  .detail-cover > strong,
  .detail-cover > i { position: relative; z-index: 2; }
  .detail-cover > i { position: absolute; }
  .detail-cover > span {
    display: inline-flex; align-items: center;
    min-height: 28px; padding: 0 12px;
    color: color-mix(in oklab, var(--detail-color) 48%, #4a372c);
    border: 1px solid rgba(255,255,255,.86); border-radius: 999px;
    background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.4));
    box-shadow: inset 0 1px 0 #fff, 0 10px 20px -16px rgba(50,36,26,.45);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    font-family: var(--font-body); font-size: .7rem; font-weight: 500;
    letter-spacing: .06em;
  }
  .detail-cover > strong {
    margin-top: 26px; display: block; max-width: calc(100% - 56px);
    color: #1a1714;
    font-family: var(--font-display);
    font-size: clamp(2.9rem, 5.4vw, 3.7rem); font-weight: 600;
    letter-spacing: -.05em; line-height: .9;
    text-shadow:
      0 1px 0 rgba(255,255,255,.92),
      0 18px 40px color-mix(in oklab, var(--detail-color) 20%, transparent);
  }
  .detail-cover > i {
    width: 48px; height: 2.5px; right: 36px; bottom: 32px;
    border-radius: 99px; background: var(--detail-color); opacity: .92;
    box-shadow: 0 0 20px color-mix(in oklab, var(--detail-color) 55%, transparent);
  }

  .detail-content {
    position: relative; padding: 30px 36px 30px;
    background:
      repeating-linear-gradient(0deg, rgba(55,44,34,.012) 0 1px, transparent 1px 4px);
  }
  .detail-content::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 180px 180px; mix-blend-mode: multiply;
  }
  .detail-title-row {
    position: relative; z-index: 1; display: flex; flex-wrap: nowrap; align-items: flex-start;
    gap: 16px; padding: 0; margin: 0;
  }
  .detail-title-row::before { display: none; content: none; }
  .detail-title-row > div {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    flex: 1 1 auto; min-width: 0;
  }
  .detail-title-row h2 {
    margin: 0; font-family: var(--font-display); font-size: 2.05rem; font-weight: 600;
    letter-spacing: -.03em; line-height: 1.1; color: #1a1714;
  }
  .detail-title-row .detail-price {
    flex: 0 0 auto; margin-left: auto; align-self: center; text-align: right;
  }
  .status-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 24px; padding: 0 10px; line-height: 1; text-align: center;
    border: 0; border-radius: 999px;
    background: color-mix(in oklab, var(--detail-color) 12%, rgba(255,255,255,.7));
    color: color-mix(in oklab, var(--detail-color) 35%, #3d342c);
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    font-family: var(--font-body); font-size: .66rem; font-weight: 500;
    letter-spacing: .04em;
  }
  .detail-price {
    padding: 0; border: 0; border-radius: 0; background: transparent;
    box-shadow: none;
    font-family: var(--font-display); font-size: 1.55rem; font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: -.025em; color: #1a1714;
  }
  .detail-price.is-pending,
  .detail-price[data-pending="true"] {
    font-family: var(--font-body); font-size: .82rem; font-weight: 400;
    font-style: italic; letter-spacing: .01em; color: #9a9084;
  }
  .detail-note {
    margin: 12px 0 0; padding: 0;
    border: 0; color: #7a7166;
    font-family: var(--font-body); font-size: .9rem; font-style: italic;
    line-height: 1.55; letter-spacing: .005em;
  }

  /* Metrics: open editorial columns — no spreadsheet cells. */
  .detail-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; margin-top: 28px; padding: 4px 0 2px;
    border: 0; border-top: 1px solid rgba(67,54,41,.1);
    border-radius: 0; overflow: visible; background: transparent;
  }
  .detail-facts div {
    min-height: 0; padding: 18px 18px 18px 0; margin: 0;
    border: 0; border-radius: 0; border-right: 1px solid rgba(67,54,41,.08);
    background: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .detail-facts div:nth-child(3n),
  .detail-facts div:last-child { border-right: 0; padding-right: 0; }
  .detail-facts div:nth-child(n+4) {
    border-top: 1px solid rgba(67,54,41,.07); padding-top: 18px;
  }
  .detail-facts div:hover { transform: none; background: transparent; box-shadow: none; }
  .detail-facts div dt {
    display: block; margin-bottom: 8px;
    color: #8f8578; font-family: var(--font-body); font-size: .68rem;
    font-style: normal; font-weight: 500; letter-spacing: .08em; text-transform: none;
  }
  .detail-facts div dd {
    margin: 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600;
    letter-spacing: -.015em; color: #1f1c18; line-height: 1.25;
  }

  .detail-history {
    margin-top: 10px; padding: 22px 0 0; border: 0; border-radius: 0;
    border-top: 1px solid rgba(67,54,41,.1);
    background: transparent; box-shadow: none;
  }
  .detail-history > header,
  .detail-history > .detail-history-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 0 0 12px;
  }
  .detail-history > header span {
    font-family: var(--font-display); font-size: 1rem; font-weight: 600;
    letter-spacing: -.01em; color: #1f1c18;
  }
  .detail-history > header strong {
    font-family: var(--font-body); font-size: .8rem; font-weight: 500; color: #8a8073;
  }
  .detail-history > #detailHistoryList {
    max-height: 148px; overflow: auto; scrollbar-width: thin;
    padding: 2px 0 0; min-height: 1.4em;
    color: #9a9084; font-family: var(--font-body); font-style: italic; font-size: .88rem;
  }
  .detail-history .empty,
  .detail-history [data-empty],
  .detail-history > #detailHistoryList:empty,
  .detail-history .history-empty {
    color: #9a9084; font-family: var(--font-body); font-style: italic;
  }
  .history-entry {
    min-height: 42px; padding: 7px 3px; display: grid;
    grid-template-columns: minmax(110px, 1fr) auto auto; align-items: center; gap: 12px;
    border-bottom: 1px solid rgba(62,49,37,.075);
  }
  .history-entry:last-child { border-bottom: 0; }
  .history-entry time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .history-entry > strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
  .history-entry-actions { display: inline-flex; align-items: center; gap: 4px; }
  .history-entry-actions button,
  .history-edit-actions button {
    min-height: 28px; padding: 0 8px; border-radius: 8px; color: #7f7467;
    font-size: .68rem; background: rgba(255,255,255,.45); border: 1px solid rgba(68,53,40,.09);
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
  }
  .history-entry-actions button:hover,
  .history-edit-actions button:hover { color: var(--terra-deep); background: rgba(255,255,255,.88); border-color: rgba(217,119,87,.24); transform: translateY(-1px); }
  .history-entry-actions [data-history-delete].is-confirming { color: #fff; background: #c86445; border-color: #c86445; }
  .history-entry.is-editing {
    grid-template-columns: minmax(128px, 1.1fr) minmax(94px, .8fr) minmax(92px, .7fr) auto;
    padding: 9px 0;
  }
  .history-edit-field { display: grid; gap: 4px; color: #918679; font-size: .6rem; font-style: italic; }
  .history-edit-field input,
  .history-edit-field select {
    width: 100%; min-width: 0; height: 36px; padding: 0 9px; border-radius: 9px;
    color: var(--ink); font: 500 .75rem/1 var(--font-body); font-style: normal;
    border: 1px solid rgba(66,53,41,.12); background: rgba(255,255,255,.82); outline: 0;
  }
  .history-edit-field input:focus,
  .history-edit-field select:focus { border-color: rgba(217,119,87,.48); box-shadow: 0 0 0 3px rgba(217,119,87,.09); }
  .history-edit-field input.is-invalid { border-color: #c86445; }
  .history-edit-field .date-control { width: 100%; height: 36px; }
  .history-edit-field .date-value { padding: 0 42px 0 9px; font-size: .75rem; }
  .history-edit-field .date-icon { right: 4px; width: 27px; height: 27px; border-radius: 8px; }
  .history-entry.is-editing { position: relative; z-index: 4; }
  .detail-history:has(.history-entry.is-editing) > #detailHistoryList { max-height: none; overflow: visible; }
  .history-edit-actions { display: inline-flex; gap: 5px; align-self: end; padding-bottom: 4px; }
  .detail-actions {
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid rgba(67,54,41,.08);
    align-items: center;
  }
  .detail-actions .primary-button {
    min-height: 44px; padding: 0 22px; border-radius: 999px;
    font-family: var(--font-body); font-weight: 500; letter-spacing: .01em;
  }
  .detail-close {
    top: 28px; right: 28px; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 #fff, 0 10px 22px -16px rgba(48,35,25,.4);
    transition: transform .22s var(--ease-out), background .18s ease, box-shadow .22s ease;
  }
  .detail-close:hover {
    transform: scale(1.05); background: rgba(255,255,255,.88);
    box-shadow: inset 0 1px 0 #fff, 0 14px 26px -14px rgba(48,35,25,.45);
  }

  /* Global ledger reveal: one command turns every card into its renewal dossier. */
  .subscription-card.flip-ready {
    padding: 0; overflow: visible; perspective: 1200px;
    border: 0; background: transparent; box-shadow: none;
  }
  .card-flip-inner {
    position: relative; width: 100%; min-height: inherit; transform-style: preserve-3d;
    transition: transform .68s cubic-bezier(.2,.78,.22,1) var(--flip-delay, 0ms);
  }
  .subscription-card.is-flipped .card-flip-inner { transform: rotateY(180deg); }
  .card-face {
    position: absolute; inset: 0; height: 100%; min-height: 100%; max-height: 100%; padding: var(--title-margin-top) var(--card-padding) var(--footer-margin-bottom); overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border: 1px solid rgba(51,43,34,.11);
    border-radius: var(--card-radius);
    background:
      linear-gradient(165deg, rgba(255,255,255,.72), transparent 46%),
      repeating-linear-gradient(0deg, rgba(62,49,37,.012) 0 1px, transparent 1px 5px),
      linear-gradient(158deg, #fffcf7 0%, #f6f1e8 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 0 0 1px rgba(255,255,255,.28),
      0 1px 2px rgba(55,43,31,.05),
      0 12px 28px -18px rgba(55,43,31,.32),
      0 22px 40px -28px rgba(55,43,31,.14);
  }
  .card-face-front { display: flex; flex-direction: column; justify-content: flex-start; }
  .card-face-front .card-header {
    position: absolute;
    top: var(--badge-top);
    right: var(--badge-right);
    left: var(--card-padding);
    min-height: 0;
    height: auto;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
  }
  .card-face-front .card-header .renewal-countdown {
    pointer-events: auto;
    flex: none;
    height: auto;
    min-height: 0;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-radius);
    font-size: var(--badge-font-size);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }
  .card-face-front .card-header .card-category {
    max-width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(3px);
    font-size: var(--badge-font-size);
    line-height: 1.2;
    pointer-events: none;
    color: var(--card-muted);
    transition: opacity .22s ease, transform .28s var(--ease-out);
  }
  .subscription-card:hover .card-face-front .card-header .card-category,
  .subscription-card:focus-visible .card-face-front .card-header .card-category {
    opacity: .72;
    transform: none;
  }
  .card-face-front .card-header .card-category i {
    background: var(--status-dot, #6B7B5E);
    opacity: .7;
  }
  .card-face-front .card-primary { margin: 0 0 0; }
  .card-face-front .card-primary h3 {
    min-height: 0;
    color: var(--card-ink, #1d1b16);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: 1.3;
    letter-spacing: -.02em;
  }
    .card-face-front .card-amount {
    margin-top: var(--price-margin-top);
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    align-items: center;
    overflow: hidden;
  }
  .card-face-front .card-amount strong {
    color: var(--card-ink);
    font-size: var(--price-font-size);
    font-weight: var(--price-font-weight);
    line-height: 20px;
  }
  .card-face-front .card-amount small { opacity: 0; transform: translateY(2px); }
  .subscription-card:hover .card-face-front .card-amount small,
  .subscription-card:focus-visible .card-face-front .card-amount small { opacity: .82; transform: none; }
  .card-face-front .card-timeline {
    margin-top: auto;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .card-face-front .cycle-progress {
    height: var(--divider-height);
    min-height: var(--divider-height);
    margin: 0 0 var(--divider-margin-bottom);
  }
  .card-face-front .card-schedule {
    height: 14px;
    min-height: 14px;
    max-height: 14px;
    padding-top: 0;
    margin: 0;
    align-items: center;
    overflow: hidden;
    color: var(--card-muted, #8a8174);
    font-size: var(--footer-font-size);
    line-height: 14px;
  }
  .card-face-front .card-schedule > span:first-child {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 14px;
    opacity: .88;
  }
  .card-face-front .card-open { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; }
  .subscription-card:hover .card-face-front .card-open,
  .subscription-card:focus-visible .card-face-front .card-open { max-width: 82px; }
  .card-face-back {
    position: absolute; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px;
    padding: 14px 16px 12px; transform: rotateY(180deg); color: #28251f;
    background:
      radial-gradient(13rem 10rem at 108% -18%, color-mix(in oklab, var(--progress-color, #6B7B5E) 26%, transparent), transparent 70%),
      radial-gradient(9rem 7rem at -12% 118%, color-mix(in oklab, var(--progress-color, #6B7B5E) 14%, transparent), transparent 72%),
      repeating-linear-gradient(0deg, rgba(62,49,37,.012) 0 1px, transparent 1px 5px),
      linear-gradient(148deg, #fffdf8 0%, #f2ece2 100%);
  }
  .card-face-back::before {
    content: ""; position: absolute; z-index: 0; top: 0; right: 0; left: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--progress-color, #6B7B5E) 32% 68%, transparent);
    opacity: .78;
  }
  .card-face-back::after {
    content: "ST"; position: absolute; z-index: 0; right: 9px; bottom: -18px;
    color: color-mix(in srgb, var(--progress-color, #6B7B5E) 8%, transparent);
    font-family: var(--font-display); font-size: 5.2rem; font-weight: 600; line-height: 1;
    letter-spacing: -.09em; pointer-events: none;
  }
  .card-face-back > * { position: relative; z-index: 1; }
  .subscription-card:hover .card-face {
    border-color: rgba(51,43,34,.18);
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 0 0 1px rgba(255,255,255,.34),
      0 2px 4px rgba(55,43,31,.05),
      0 22px 42px -24px rgba(55,43,31,.4);
  }
  .flip-ledger-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .flip-ledger-category {
    max-width: 56%; min-height: 21px; padding: 1px 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--progress-color, #6B7B5E) 20%, transparent);
    border-radius: 999px; color: color-mix(in srgb, var(--progress-color, #6B7B5E) 74%, #40372e);
    background: color-mix(in srgb, var(--progress-color, #6B7B5E) 7%, rgba(255,255,255,.74));
    font-size: .62rem; font-style: italic;
  }
  .flip-ledger-code { color: #9a9083; font-size: .48rem; font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
  .flip-ledger-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 13px; }
  .flip-project { min-width: 0; align-self: center; }
  .flip-project span,
  .flip-remaining > span { display: block; color: #968b7d; font-size: .49rem; font-weight: 600; letter-spacing: .12em; line-height: 1.2; }
  .flip-project strong {
    max-width: 100%; margin-top: 6px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    color: #28251f; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.08; letter-spacing: -.025em;
  }
  .flip-remaining {
    min-width: 102px; padding-left: 13px; border-left: 1px solid color-mix(in srgb, var(--progress-color, #6B7B5E) 18%, rgba(61,49,38,.08));
    text-align: right;
  }
  .flip-remaining > span { color: color-mix(in srgb, var(--progress-color, #6B7B5E) 64%, #73675a); }
  .flip-remaining div { min-height: 47px; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
  .flip-remaining strong {
    color: color-mix(in srgb, var(--progress-color, #6B7B5E) 74%, #27241f);
    font-family: var(--font-display); font-size: 2.82rem; font-weight: 500; line-height: .96; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  }
  .flip-remaining em { color: #766b5e; font-size: .66rem; font-style: italic; white-space: nowrap; }
  .flip-ledger-foot {
    min-width: 0; padding-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 18px auto; align-items: center; gap: 8px;
    border-top: 1px solid rgba(64,49,37,.09); color: #7d7265; font-size: .58rem;
  }
  .flip-ledger-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .flip-ledger-foot i { width: 18px; height: 1px; background: var(--progress-color, #6B7B5E); opacity: .72; }
  .flip-ledger-foot strong { color: #5e554b; font-size: .56rem; font-weight: 500; white-space: nowrap; }
  .detail-cover > strong { max-width: calc(100% - 76px); overflow-wrap: anywhere; line-height: .95; }

  /* Buttons share the same restrained terracotta treatment. */
  .primary-button,
  .danger-button {
    background: linear-gradient(180deg, #df8565, #d37150);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 24px -16px rgba(146,66,42,.48);
  }
  .primary-button:hover { background: linear-gradient(180deg, #d97c5c, #c96646); }

  /* Status marks are informational, never ambient light effects. */
  .ov-live i { animation: none; box-shadow: none; }
  .local-pill i { box-shadow: none; }
  .pulse-symbol {
    box-shadow: none;
    outline: 1px solid rgba(217,119,87,.22); outline-offset: 4px;
  }
  .status-pill.status-lifetime { background: color-mix(in srgb, #D97757 16%, #fff); color: #9a4f36; }

  /* Pointer clicks stay clean; keyboard navigation remains unmistakable. */
  .subscription-card:focus { outline: none; }
  .subscription-card:focus-visible {
    outline: 2px solid rgba(217,119,87,.58);
    outline-offset: 3px;
  }
  .select-control > .select-trigger:focus-visible {
    color: var(--ink); border-radius: 6px;
    outline: 2px solid rgba(217,119,87,.55); outline-offset: 2px;
  }

  /* Layout rhythm: no decorative dead zones between real content blocks. */
  .stats { padding-bottom: 72px; }
  .renewals { margin-bottom: 12px; }
  .library { padding-bottom: 42px; }
  .footer { min-height: 88px; margin-top: 0; }
  .form-grid { row-gap: 18px; }
  .advanced-settings { margin-top: 22px; }
  /* lifetime cards use unified min-height via --card tokens */

  .bg-aurora {
    background:
      radial-gradient(46rem 34rem at 12% 3%, rgba(217,119,87,.105), transparent 70%),
      radial-gradient(42rem 32rem at 86% 17%, rgba(178,157,120,.1), transparent 72%),
      radial-gradient(46rem 36rem at 52% 112%, rgba(149,135,112,.09), transparent 70%),
      linear-gradient(180deg, #fbfaf6 0%, #faf8f3 45%, #f1ede3 100%);
  }
  .noise { opacity: .055; }

  /* Fixed centering: the old entry animation replaced the centering transform. */
  .subscription-dialog, .detail-dialog, .confirm-dialog {
    position: fixed; inset: 50% auto auto 50%; margin: 0; transform: translate(-50%, -50%);
  }
  .subscription-dialog[open], .detail-dialog[open], .confirm-dialog[open] {
    animation: refined-dialog-in .34s var(--ease-out);
  }
  @keyframes refined-dialog-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 22px)) scale(.975); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  /* Dialog choreography: material first, then readable content. */
  .detail-dialog[open]:not(.is-closing) {
    animation: detail-glass-enter .54s cubic-bezier(.16,1,.3,1) both;
  }
  .subscription-dialog[open]:not(.is-closing) {
    animation: editor-glass-enter .46s cubic-bezier(.16,1,.3,1) both;
  }
  .detail-dialog.is-closing,
  .subscription-dialog.is-closing,
  .confirm-dialog.is-closing {
    animation: glass-dialog-exit .2s cubic-bezier(.4,0,1,1) both;
    pointer-events: none;
  }
  .detail-dialog[open]::backdrop,
  .subscription-dialog[open]::backdrop,
  .confirm-dialog[open]::backdrop { animation: glass-backdrop-enter .36s ease both; }
  .detail-dialog.is-closing::backdrop,
  .subscription-dialog.is-closing::backdrop,
  .confirm-dialog.is-closing::backdrop { animation: glass-backdrop-exit .2s ease both; }

  .detail-dialog[open]:not(.is-closing) .detail-cover { animation: glass-cover-enter .58s .07s cubic-bezier(.16,1,.3,1) both; }
  .detail-dialog[open]:not(.is-closing) .detail-title-row { animation: detail-piece-enter .46s .15s cubic-bezier(.16,1,.3,1) both; }
  .detail-dialog[open]:not(.is-closing) .detail-note { animation: detail-piece-enter .46s .2s cubic-bezier(.16,1,.3,1) both; }
  .detail-dialog[open]:not(.is-closing) .detail-facts { animation: detail-piece-enter .5s .24s cubic-bezier(.16,1,.3,1) both; }
  .detail-dialog[open]:not(.is-closing) .detail-history { animation: detail-piece-enter .5s .29s cubic-bezier(.16,1,.3,1) both; }
  .detail-dialog[open]:not(.is-closing) .detail-actions { animation: detail-piece-enter .48s .34s cubic-bezier(.16,1,.3,1) both; }
  .subscription-dialog[open]:not(.is-closing) .dialog-head { animation: editor-piece-enter .42s .05s cubic-bezier(.16,1,.3,1) backwards; }
  .subscription-dialog[open]:not(.is-closing) .form-grid { animation: editor-piece-enter .48s .12s cubic-bezier(.16,1,.3,1) backwards; }
  .subscription-dialog[open]:not(.is-closing) .advanced-settings { animation: editor-piece-enter .46s .19s cubic-bezier(.16,1,.3,1) backwards; }
  .subscription-dialog[open]:not(.is-closing) .dialog-actions { animation: editor-piece-enter .44s .24s cubic-bezier(.16,1,.3,1) backwards; }

  /* Entrance/exit choreography kept, but the animated filter: blur() was removed.
     Re-rasterising a large glass surface every frame is what made opens choppy;
     the static backdrop-filter (the actual "glass" look) is untouched. */
  @keyframes detail-glass-enter {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)) scale(.94); }
    58% { opacity: 1; transform: translate(-50%, calc(-50% - 3px)) scale(1.006); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes editor-glass-enter {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 26px)) scale(.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes glass-dialog-exit {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.97); }
  }
  @keyframes glass-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
  @keyframes glass-backdrop-exit { from { opacity: 1; } to { opacity: 0; } }
  @keyframes glass-cover-enter {
    from { opacity: 0; transform: translateY(-12px) scale(.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes detail-piece-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes editor-piece-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  @media (max-width: 1120px) {
    .hero { grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr); gap: 42px; }
    .hero h1 .hl-tail { padding-left: .38em; }
  }
  @media (max-width: 820px) {
    .hero { min-height: auto; grid-template-columns: 1fr; gap: 44px; }
    .hero-copy { padding-left: 26px; } .hero-copy::before { height: 190px; }
    .hero-visual { min-height: 390px; place-items: center; }
    .hero-visual::before { width: min(390px, 82vw); }
    .insight-shell { width: min(424px, 88vw); max-width: none; }
  }
  @media (max-width: 600px) {
    .hero { padding-top: 54px; } .hero-copy { padding-left: 20px; }
    .hero-copy::before { top: 43px; height: 166px; }
    .hero h1 .hl-lead { font-size: 1rem; }
    .hero h1 .hl-hero { font-size: clamp(3rem, 15vw, 4.5rem); }
    .hero h1 .hl-tail { padding-left: .18em; font-size: clamp(2.45rem, 12.8vw, 3.9rem); }
    .hero-visual { min-height: 360px; } .insight-shell { min-width: 0; width: 100%; }
    .footer { align-items: flex-start; }
    .subscription-dialog form { padding: 0 20px; }
    .dialog-head { margin: 0 -20px 26px; padding: 25px 20px 20px; }
    .dialog-actions { min-height: 74px; margin: 22px -20px 0; padding: 13px 20px 15px; }
    .advanced-settings { padding-inline: 13px; }
    .custom-cycle .custom-cycle-hint { flex: 1 0 100%; padding-left: 24px; }
    .detail-dialog {
      width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
    }
    .detail-cover {
      min-height: 160px; margin: 0; padding: 28px 22px 26px; border-radius: 0;
    }
    .detail-cover > strong { font-size: 2.7rem; }
    .detail-cover > i { right: 22px; bottom: 24px; }
    .detail-close { top: 20px; right: 18px; width: 36px; height: 36px; }
    .detail-content { padding: 24px 22px 24px; }
    .detail-title-row {
      display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 0; align-items: center;
    }
    .detail-title-row h2 { font-size: 1.7rem; line-height: 1.12; overflow-wrap: anywhere; }
    .detail-price { margin-left: 0; font-size: 1.2rem; }
    .detail-note { margin: 10px 0 0; padding: 0; }
    .detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
    .detail-facts div { padding: 14px 14px 14px 0; }
    .detail-facts div:nth-child(3n) { border-right: 1px solid rgba(67,54,41,.08); padding-right: 14px; }
    .detail-facts div:nth-child(2n) { border-right: 0; padding-right: 0; }
    .detail-facts div:nth-child(n+3) { border-top: 1px solid rgba(67,54,41,.07); }
    .detail-history { margin-top: 8px; padding: 18px 0 0; }
    .history-entry { grid-template-columns: 1fr auto; gap: 5px 10px; }
    .history-entry-actions { grid-column: 1 / -1; }
    .history-entry.is-editing { grid-template-columns: 1fr 1fr; }
    .history-entry.is-editing .history-edit-field:nth-child(3),
    .history-edit-actions { grid-column: 1 / -1; }
  }

  /* Detail dialog — private ledger card.
     Only the secondary detail surface is restyled; its DOM and data logic stay intact. */
  .detail-dialog {
    width: min(790px, calc(100vw - 40px));
    height: auto;
    max-height: min(760px, calc(100dvh - 32px));
    grid-template-columns: 212px minmax(0, 1fr);
    align-items: stretch;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
      0 42px 110px -30px rgba(31,27,22,.58),
      0 16px 36px -24px rgba(31,27,22,.36);
  }
  .detail-dialog[open] { display: grid; }
  .detail-dialog[open]:not(.is-closing) {
    animation: detail-dialog-enter-clean .42s cubic-bezier(.16,1,.3,1) both;
  }
  .detail-dialog.is-closing {
    animation: detail-dialog-exit-clean .18s cubic-bezier(.4,0,1,1) both;
  }
  .detail-dialog::backdrop {
    background: rgba(35,31,26,.38);
    backdrop-filter: blur(14px) saturate(.82);
    -webkit-backdrop-filter: blur(14px) saturate(.82);
  }

  .detail-dialog .detail-cover {
    position: relative;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    margin: 0;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: #fffaf2;
    background:
      radial-gradient(15rem 17rem at 112% -8%, color-mix(in oklab, var(--detail-color) 62%, transparent), transparent 68%),
      radial-gradient(13rem 16rem at -22% 108%, color-mix(in oklab, var(--detail-color) 34%, transparent), transparent 72%),
      linear-gradient(155deg, color-mix(in oklab, var(--detail-color) 20%, #25251f) 0%, #1d1e1a 72%, #191a17 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .detail-dialog[open]:not(.is-closing) .detail-cover {
    animation: detail-cover-enter-clean .42s .04s cubic-bezier(.16,1,.3,1) both;
  }

  @keyframes detail-dialog-enter-clean {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
  @keyframes detail-cover-enter-clean {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes detail-dialog-exit-clean {
    from { opacity: 1; transform: translate(-50%, -50%); }
    to { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  }
  .detail-dialog .detail-cover::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 232px;
    height: 232px;
    left: auto;
    right: -150px;
    top: 50%;
    bottom: auto;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    box-shadow:
      0 0 0 30px rgba(255,255,255,.025),
      0 0 0 62px rgba(255,255,255,.018);
    background: transparent;
    filter: none;
    transform: translateY(-50%);
    opacity: .9;
    pointer-events: none;
  }
  .detail-dialog .detail-cover::after {
    content: "SUBTRACK\A PRIVATE LEDGER";
    position: absolute;
    z-index: 2;
    inset: auto auto 28px 28px;
    width: auto;
    height: auto;
    white-space: pre;
    color: rgba(255,250,242,.46);
    font-family: var(--font-body);
    font-size: .58rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .16em;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    pointer-events: none;
  }
  .detail-dialog .detail-cover > span,
  .detail-dialog .detail-cover > strong,
  .detail-dialog .detail-cover > i { position: relative; z-index: 2; }
  .detail-dialog .detail-cover > span {
    align-self: flex-start;
    min-height: 27px;
    padding: 0 10px;
    color: rgba(255,250,242,.76);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .08em;
  }
  .detail-dialog .detail-cover > strong {
    max-width: 100%;
    margin: auto 0;
    color: #fffaf2;
    font-family: var(--font-display);
    font-size: clamp(4.25rem, 7.8vw, 5.55rem);
    font-weight: 500;
    line-height: .78;
    letter-spacing: -.065em;
    overflow-wrap: anywhere;
    text-shadow: 0 18px 34px rgba(0,0,0,.24);
  }
  .detail-dialog .detail-cover > strong[data-icon-size="compact"] {
    font-size: 3.15rem;
    letter-spacing: -.075em;
    white-space: nowrap;
  }
  .detail-dialog .detail-cover > strong[data-icon-size="long"] {
    font-size: 2.35rem;
    letter-spacing: -.07em;
    white-space: nowrap;
  }
  .detail-dialog .detail-cover > i {
    position: absolute;
    left: 28px;
    right: auto;
    bottom: 74px;
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--detail-color) 70%, #fff);
    box-shadow: 0 0 18px color-mix(in oklab, var(--detail-color) 55%, transparent);
    opacity: .88;
  }

  .detail-dialog .detail-content {
    position: relative;
    min-width: 0;
    max-height: min(760px, calc(100dvh - 32px));
    padding: 30px 32px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(81,70,58,.22) transparent;
    background:
      radial-gradient(28rem 18rem at 100% 0%, color-mix(in oklab, var(--detail-color) 8%, transparent), transparent 70%),
      linear-gradient(152deg, rgba(255,255,255,.78), rgba(247,243,235,.94));
  }
  .detail-dialog .detail-content::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }

  .detail-dialog .detail-title-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    margin: 0;
    padding: 0 52px 0 0;
  }
  .detail-dialog .detail-title-row > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
  }
  .detail-dialog .detail-title-row h2 {
    margin: 0;
    color: #201e1a;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
  }
  .detail-dialog .status-pill {
    min-height: 23px;
    padding: 0 9px 0 8px;
    gap: 6px;
    color: color-mix(in oklab, var(--detail-color) 58%, #3f3931);
    border: 1px solid color-mix(in oklab, var(--detail-color) 17%, transparent);
    background: color-mix(in oklab, var(--detail-color) 9%, rgba(255,255,255,.72));
    font-size: .62rem;
    letter-spacing: .08em;
  }
  .detail-dialog .status-pill::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--detail-color);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--detail-color) 12%, transparent);
  }
  .detail-dialog .detail-price,
  .detail-dialog .detail-title-row .detail-price {
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin: 1px 0 0 auto;
    color: #22201c;
    font-family: var(--font-display);
    font-size: 1.58rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    white-space: nowrap;
  }
  .detail-dialog .detail-price::before {
    content: "本期金额";
    color: #948a7d;
    font-family: var(--font-body);
    font-size: .58rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .12em;
  }
  .detail-dialog .detail-price.is-pending,
  .detail-dialog .detail-price[data-pending="true"] {
    color: #766e64;
    font-family: var(--font-body);
    font-size: .75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .02em;
  }
  .detail-dialog .detail-price.is-pending::before,
  .detail-dialog .detail-price[data-pending="true"]::before { content: "金额状态"; }

  .detail-dialog .detail-note {
    position: relative;
    z-index: 1;
    margin: 15px 0 0;
    padding: 10px 12px;
    color: #756d63;
    border: 1px solid rgba(80,67,53,.065);
    border-left: 2px solid color-mix(in oklab, var(--detail-color) 58%, #b9aa98);
    border-radius: 0 10px 10px 0;
    background: rgba(255,255,255,.38);
    font-size: .74rem;
    font-style: normal;
    line-height: 1.55;
  }

  .detail-dialog .detail-facts {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
    margin: 17px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .detail-dialog .detail-facts div {
    grid-column: span 2;
    min-width: 0;
    min-height: 72px;
    margin: 0;
    padding: 13px 13px 12px;
    border: 1px solid rgba(72,61,49,.075);
    border-radius: 13px;
    background: rgba(255,255,255,.52);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.76);
    transition: transform .2s var(--ease-out), border-color .2s ease, background .2s ease;
  }
  .detail-dialog .detail-facts div:nth-child(4),
  .detail-dialog .detail-facts div:nth-child(5) { grid-column: span 3; }
  .detail-dialog .detail-facts div:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--detail-color) 18%, rgba(72,61,49,.08));
    background: rgba(255,255,255,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 9px 18px -18px rgba(45,37,29,.42);
  }
  .detail-dialog .detail-facts div dt {
    display: block;
    margin: 0 0 7px;
    color: #9a9084;
    font-family: var(--font-body);
    font-size: .59rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .11em;
  }
  .detail-dialog .detail-facts div dd {
    margin: 0;
    color: #28251f;
    font-family: var(--font-display);
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
  }

  .detail-dialog .detail-history {
    position: relative;
    z-index: 1;
    margin: 12px 0 0;
    padding: 15px;
    border: 1px solid rgba(73,61,49,.075);
    border-radius: 14px;
    background: rgba(241,236,226,.66);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.64);
  }
  .detail-dialog .detail-history > header,
  .detail-dialog .detail-history > .detail-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 10px;
  }
  .detail-dialog .detail-history > header span {
    color: #2b2822;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: -.01em;
  }
  .detail-dialog .detail-history > header strong {
    color: #8f8578;
    font-size: .68rem;
    font-weight: 500;
  }
  .detail-dialog .detail-history > #detailHistoryList {
    min-height: 35px;
    max-height: 112px;
    padding: 10px 11px;
    overflow: auto;
    color: #9a9085;
    border: 1px dashed rgba(73,61,49,.09);
    border-radius: 10px;
    background: rgba(255,255,255,.34);
    font-size: .72rem;
    font-style: normal;
    line-height: 1.35;
  }
  .detail-dialog .history-entry {
    min-height: 38px;
    padding: 6px 2px;
    border-bottom-color: rgba(62,49,37,.07);
  }

  .detail-dialog .detail-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(70,58,46,.08);
  }
  .detail-dialog .detail-delete,
  .detail-dialog .detail-record,
  .detail-dialog .detail-actions .primary-button {
    min-height: 42px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .015em;
    transition: transform .2s var(--ease-out), color .18s ease, border-color .18s ease, background .18s ease, box-shadow .2s ease;
  }
  .detail-dialog .detail-delete {
    justify-self: start;
    padding: 0 7px;
    color: #9b8f82;
    border: 1px solid transparent;
    background: transparent;
  }
  .detail-dialog .detail-delete:hover {
    color: #a14f3b;
    border-color: rgba(171,77,55,.13);
    background: rgba(255,255,255,.42);
  }
  .detail-dialog .detail-record {
    justify-self: end;
    padding: 0 15px;
    color: #514b43;
    border: 1px solid rgba(72,60,48,.11);
    background: rgba(255,255,255,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 10px 18px -18px rgba(45,37,29,.34);
  }
  .detail-dialog .detail-record:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--detail-color) 22%, rgba(72,60,48,.1));
    background: rgba(255,255,255,.92);
  }
  .detail-dialog .detail-actions .primary-button {
    min-width: 116px;
    padding: 0 17px;
    color: #fffaf3;
    border: 1px solid color-mix(in oklab, var(--detail-color) 78%, #2f2c26);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--detail-color) 84%, #fff 16%),
      color-mix(in oklab, var(--detail-color) 88%, #24231f 12%));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      0 13px 22px -15px color-mix(in oklab, var(--detail-color) 58%, rgba(32,27,22,.6));
  }
  .detail-dialog .detail-actions .primary-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--detail-color) 78%, #fff 22%),
      color-mix(in oklab, var(--detail-color) 92%, #24231f 8%));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      0 16px 25px -15px color-mix(in oklab, var(--detail-color) 64%, rgba(32,27,22,.68));
  }
  .detail-dialog .detail-delete:focus-visible,
  .detail-dialog .detail-record:focus-visible,
  .detail-dialog .detail-actions .primary-button:focus-visible,
  .detail-dialog .detail-close:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--detail-color) 58%, #fff);
    outline-offset: 3px;
  }
  .detail-dialog:focus { outline: none; }

  .detail-dialog .detail-close {
    z-index: 8;
    top: 19px;
    right: 19px;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    color: #5f584f;
    border: 1px solid rgba(67,56,45,.09);
    border-radius: 50%;
    background: rgba(255,255,255,.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 24px -18px rgba(42,34,27,.42);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
  }
  .detail-dialog .detail-close:hover {
    color: #28241f;
    transform: rotate(5deg) scale(1.04);
    border-color: rgba(67,56,45,.14);
    background: rgba(255,255,255,.9);
    box-shadow: inset 0 1px 0 #fff, 0 14px 24px -17px rgba(42,34,27,.48);
  }

  @media (max-width: 700px) {
    .detail-dialog {
      width: calc(100vw - 20px);
      max-height: calc(100dvh - 20px);
      overflow-y: auto;
      border-radius: 24px;
    }
    .detail-dialog[open] { display: block; }
    .detail-dialog .detail-cover {
      min-height: 132px;
      padding: 22px;
      display: block;
    }
    .detail-dialog .detail-cover::before {
      width: 190px;
      height: 190px;
      right: -86px;
      top: 52%;
    }
    .detail-dialog .detail-cover::after {
      inset: auto 22px 18px auto;
      text-align: right;
    }
    .detail-dialog .detail-cover > strong {
      position: absolute;
      left: 22px;
      bottom: 19px;
      margin: 0;
      max-width: 55%;
      font-size: 3.55rem;
      line-height: .8;
    }
    .detail-dialog .detail-cover > i { display: none; }
    .detail-dialog .detail-close {
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      color: rgba(255,250,242,.82);
      border-color: rgba(255,255,255,.12);
      background: rgba(255,255,255,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
    }
    .detail-dialog .detail-close:hover {
      color: #fff;
      border-color: rgba(255,255,255,.2);
      background: rgba(255,255,255,.15);
    }
    .detail-dialog .detail-content {
      max-height: none;
      padding: 23px 20px 20px;
      overflow: visible;
    }
    .detail-dialog .detail-title-row {
      gap: 12px;
      padding-right: 0;
    }
    .detail-dialog .detail-title-row h2 { font-size: 1.72rem; }
    .detail-dialog .detail-note { margin-top: 13px; }
    .detail-dialog .detail-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }
    .detail-dialog .detail-facts div,
    .detail-dialog .detail-facts div:nth-child(4),
    .detail-dialog .detail-facts div:nth-child(5) {
      grid-column: span 1;
      min-height: 68px;
      padding: 12px;
    }
    .detail-dialog .detail-facts div:last-child { grid-column: 1 / -1; }
    .detail-dialog .detail-history { margin-top: 10px; padding: 13px; }
    .detail-dialog .detail-actions {
      grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
      margin-top: 14px;
      padding-top: 14px;
    }
    .detail-dialog .detail-delete {
      grid-column: auto;
      min-height: 42px;
      padding: 0 4px;
    }
    .detail-dialog .detail-record,
    .detail-dialog .detail-actions .primary-button {
      justify-self: stretch;
      width: 100%;
      min-width: 0;
      padding-inline: 7px;
      font-size: .69rem;
    }
  }

  @media (max-width: 340px) {
    .detail-dialog .detail-title-row { grid-template-columns: minmax(0, 1fr); }
    .detail-dialog .detail-price,
    .detail-dialog .detail-title-row .detail-price {
      align-items: flex-start;
      margin: 3px 0 0;
    }
  }

  /* Subscription editor — the detail card's companion surface.
     It deliberately shares the dark identity rail, warm ledger paper and
     status colour instead of opening as an unrelated white form. */
  .subscription-dialog {
    --editor-color: #d97757;
    width: min(900px, calc(100vw - 40px));
    max-width: none;
    max-height: min(790px, calc(100dvh - 32px));
    padding: 0;
    border: 0;
    border-radius: 30px;
    overflow: hidden;
    color: #292722;
    background: transparent;
    box-shadow:
      0 34px 76px -28px rgba(31, 29, 24, .58),
      0 12px 28px -22px rgba(31, 29, 24, .46);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .subscription-dialog form {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    width: 100%;
    max-height: min(790px, calc(100dvh - 32px));
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background:
      radial-gradient(29rem 22rem at 100% 0%, color-mix(in srgb, var(--editor-color) 7%, transparent), transparent 72%),
      repeating-linear-gradient(0deg, rgba(61, 52, 42, .012) 0 1px, transparent 1px 5px),
      linear-gradient(155deg, #fdfbf7 0%, #f5f1e9 100%);
    scrollbar-gutter: auto;
  }
  .subscription-dialog .dialog-head {
    position: relative;
    z-index: 2;
    top: auto;
    grid-column: 1;
    grid-row: 1 / 4;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    padding: 30px 27px 28px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    border: 0;
    color: #f8f5ed;
    background:
      radial-gradient(circle at 113% 50%, transparent 0 87px, rgba(255,255,255,.11) 88px 89px, transparent 90px 119px, rgba(255,255,255,.045) 120px 121px, transparent 122px),
      radial-gradient(18rem 16rem at 115% 8%, color-mix(in srgb, var(--editor-color) 32%, transparent), transparent 72%),
      linear-gradient(158deg, color-mix(in srgb, #292b25 86%, var(--editor-color)) 0%, #171915 100%);
    box-shadow: inset -1px 0 rgba(255,255,255,.045);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .subscription-dialog .dialog-head::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 27px;
    bottom: 73px;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--editor-color) 72%, #f4efe4);
    box-shadow: 0 0 18px color-mix(in srgb, var(--editor-color) 28%, transparent);
  }
  .subscription-dialog .dialog-head::after {
    content: "SUBTRACK\A PRIVATE LEDGER";
    position: absolute;
    z-index: 1;
    left: 27px;
    bottom: 27px;
    white-space: pre;
    color: rgba(247, 242, 232, .5);
    font: 600 .58rem/1.6 Newsreader, Georgia, serif;
    letter-spacing: .13em;
  }
  .subscription-dialog .dialog-head > div {
    position: relative;
    z-index: 1;
    margin: auto 0;
  }
  .subscription-dialog .dialog-head .section-kicker {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    margin: 0;
    padding: 0 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: rgba(255,255,255,.74);
    background: rgba(255,255,255,.055);
    font-size: .66rem;
    font-style: italic;
    letter-spacing: .08em;
  }
  .subscription-dialog .dialog-head .section-kicker::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--editor-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--editor-color) 16%, transparent);
  }
  .subscription-dialog .dialog-head h2 {
    max-width: 3.6em;
    margin: 19px 0 0;
    color: #fffdf6;
    font-size: clamp(2.5rem, 4vw, 3.65rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.055em;
    text-wrap: balance;
    text-shadow: 0 10px 30px rgba(0,0,0,.16);
  }
  .subscription-dialog > .dialog-close {
    position: absolute;
    z-index: 20;
    top: 19px;
    right: 19px;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    color: #5f584f;
    border: 1px solid rgba(67,56,45,.09);
    border-radius: 50%;
    background: rgba(255,255,255,.6);
    box-shadow: inset 0 1px rgba(255,255,255,.92), 0 12px 24px -18px rgba(42,34,27,.42);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    transition: transform .2s var(--ease-out), color .18s ease, border-color .18s ease, background .18s ease, box-shadow .2s ease;
  }
  .subscription-dialog > .dialog-close:hover {
    color: #28241f;
    transform: rotate(5deg) scale(1.04);
    border-color: rgba(67,56,45,.14);
    background: rgba(255,255,255,.9);
    box-shadow: inset 0 1px #fff, 0 14px 24px -17px rgba(42,34,27,.48);
  }

  .subscription-dialog .form-primary {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 31px 32px 0;
    gap: 18px 14px;
  }
  .subscription-dialog .field { gap: 8px; }
  .subscription-dialog .field > span:first-child,
  .subscription-dialog .field legend {
    color: #8a8175;
    font-size: .68rem;
    letter-spacing: .055em;
  }
  .subscription-dialog .field input,
  .subscription-dialog .field select,
  .subscription-dialog .field textarea,
  .subscription-dialog .date-control,
  .subscription-dialog .color-field .color-input-wrap {
    border-color: rgba(61, 52, 42, .105);
    background: rgba(255,255,255,.73);
    box-shadow: inset 0 1px rgba(255,255,255,.95), 0 11px 24px -23px rgba(49,39,29,.48);
  }
  .subscription-dialog .field input:focus,
  .subscription-dialog .field select:focus,
  .subscription-dialog .field textarea:focus,
  .subscription-dialog .date-control:focus-within {
    border-color: color-mix(in srgb, var(--editor-color) 58%, transparent);
    background: rgba(255,255,255,.96);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--editor-color) 10%, transparent), inset 0 1px #fff;
  }
  .subscription-dialog .cycle-options {
    border-color: rgba(61,52,42,.09);
    background: rgba(76,61,46,.04);
  }
  .subscription-dialog .cycle-options input:checked + span,
  .subscription-dialog .cycle-options label:has(input:checked):hover span,
  .subscription-dialog .cycle-options label.is-selected span {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: var(--editor-color);
    box-shadow: inset 0 1px rgba(255,255,255,.28), 0 9px 20px -13px color-mix(in srgb, var(--editor-color) 72%, #342a20);
  }
  .subscription-dialog .date-calendar-day.is-selected {
    background: var(--editor-color);
  }
  .subscription-dialog .advanced-settings {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 18px 32px 0;
    border-color: rgba(61,52,42,.1);
    background: linear-gradient(145deg, rgba(255,255,255,.5), rgba(238,233,224,.5));
  }
  .subscription-dialog .advanced-settings summary { min-height: 58px; }
  .subscription-dialog .dialog-actions {
    position: sticky;
    z-index: 5;
    bottom: 0;
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    min-height: 75px;
    margin: 18px 0 0;
    padding: 15px 32px 17px;
    border-top: 1px solid rgba(70,58,46,.08);
    background: linear-gradient(0deg, rgba(247,243,235,.985), rgba(250,247,241,.94));
    box-shadow: 0 -13px 28px -28px rgba(49,39,29,.36);
  }
  .subscription-dialog .dialog-actions .text-button,
  .subscription-dialog .dialog-actions .save-button {
    min-height: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .015em;
    transition: transform .2s var(--ease-out), color .18s ease, border-color .18s ease, background .18s ease, box-shadow .2s ease;
  }
  .subscription-dialog .dialog-actions .text-button {
    min-width: 88px;
    padding: 0 15px;
    color: #514b43;
    border: 1px solid rgba(72,60,48,.11);
    background: rgba(255,255,255,.7);
    box-shadow: inset 0 1px rgba(255,255,255,.84), 0 10px 18px -18px rgba(45,37,29,.34);
  }
  .subscription-dialog .dialog-actions .text-button:hover {
    color: #37322c;
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--editor-color) 22%, rgba(72,60,48,.1));
    background: rgba(255,255,255,.92);
  }
  .subscription-dialog .dialog-actions .save-button {
    min-width: 116px;
    min-height: 46px;
    height: 46px;
    padding: 0 17px;
    color: #fffaf3;
    border: 1px solid color-mix(in oklab, var(--editor-color) 78%, #2f2c26);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--editor-color) 84%, #fff 16%),
      color-mix(in oklab, var(--editor-color) 88%, #24231f 12%));
    box-shadow:
      inset 0 1px rgba(255,255,255,.28),
      0 13px 22px -15px color-mix(in oklab, var(--editor-color) 58%, rgba(32,27,22,.6));
  }
  .subscription-dialog .save-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--editor-color) 78%, #fff 22%),
      color-mix(in oklab, var(--editor-color) 92%, #24231f 8%));
    box-shadow:
      inset 0 1px rgba(255,255,255,.32),
      0 16px 25px -15px color-mix(in oklab, var(--editor-color) 64%, rgba(32,27,22,.68));
  }
  .subscription-dialog .dialog-actions .text-button:active,
  .subscription-dialog .dialog-actions .save-button:active {
    transform: translateY(0) scale(.98);
  }
  .subscription-dialog .dialog-actions .text-button:focus-visible,
  .subscription-dialog .dialog-actions .save-button:focus-visible,
  .subscription-dialog > .dialog-close:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--editor-color) 58%, #fff);
    outline-offset: 3px;
  }

  /* The native dialog box never scales during entry: scaling can reveal its
     transparent canvas as a pale rim. Movement stays in the two inner panes. */
  .subscription-dialog[open]:not(.is-closing) {
    animation: editor-surface-enter .42s cubic-bezier(.2,.82,.2,1) both;
  }
  .subscription-dialog.is-closing {
    pointer-events: none;
    animation: editor-surface-exit .18s ease-in both;
  }
  .subscription-dialog[open]:not(.is-closing) .dialog-head {
    animation: editor-rail-enter .46s cubic-bezier(.16,.84,.22,1) both;
  }
  .subscription-dialog[open]:not(.is-closing) .form-primary {
    animation: editor-content-enter .44s .07s cubic-bezier(.18,.78,.2,1) both;
  }
  .subscription-dialog[open]:not(.is-closing) .advanced-settings,
  .subscription-dialog[open]:not(.is-closing) .dialog-actions {
    animation: editor-content-enter .42s .12s cubic-bezier(.18,.78,.2,1) both;
  }
  @keyframes editor-surface-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes editor-surface-exit {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes editor-rail-enter {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes editor-content-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 720px) {
    .topbar { padding-inline: 14px; gap: 10px; }
    .topbar-meta { min-width: 0; gap: 6px; }
    .local-pill {
      width: 32px; min-width: 32px; height: 36px; padding: 0;
      gap: 0; overflow: hidden; font-size: 0;
    }
    .currency-setting,
    .currency-setting select { height: 36px; }
    .topbar-meta .icon-button { width: 36px; height: 36px; }
    /* Keep the full-bleed paper grain exactly viewport-wide during resize. */
    .hero.shell::after {
      left: 50%;
      right: auto;
      width: 100vw;
      transform: translateX(-50%);
    }
    .subscription-dialog {
      width: min(560px, calc(100vw - 20px));
      max-height: calc(100dvh - 20px);
      border-radius: 24px;
    }
    .subscription-dialog form {
      display: block;
      max-height: calc(100dvh - 20px);
    }
    .subscription-dialog .dialog-head {
      min-height: 144px;
      padding: 22px 22px 24px;
      background:
        radial-gradient(circle at 91% 115%, transparent 0 68px, rgba(255,255,255,.09) 69px 70px, transparent 71px),
        radial-gradient(16rem 12rem at 90% 0%, color-mix(in srgb, var(--editor-color) 30%, transparent), transparent 72%),
        linear-gradient(150deg, color-mix(in srgb, #292b25 86%, var(--editor-color)), #171915);
    }
    .subscription-dialog .dialog-head > div { margin: 40px 0 0; }
    .subscription-dialog .dialog-head .section-kicker { min-height: 25px; }
    .subscription-dialog .dialog-head h2 {
      max-width: none;
      margin-top: 10px;
      font-size: 2.15rem;
      letter-spacing: -.045em;
    }
    .subscription-dialog .dialog-head::before,
    .subscription-dialog .dialog-head::after { display: none; }
    .subscription-dialog .form-primary { padding: 23px 20px 0; }
    .subscription-dialog .advanced-settings { margin: 17px 20px 0; }
    .subscription-dialog .dialog-actions {
      margin-top: 16px;
      padding: 14px 20px 18px;
    }
  }

  @media (max-width: 460px) {
    .library-actions { width: 100%; gap: 8px; }
    .library-actions > * { min-width: 0; flex: 1 1 0; }
    .flip-all-button { padding-inline: 10px; font-size: .76rem; }
    .flip-all-button small { min-width: 25px; padding-inline: 6px; }
    .subscription-dialog .form-primary { grid-template-columns: minmax(0, 1fr); }
    .subscription-dialog .form-primary > * { grid-column: 1 / -1; }
    .subscription-dialog .cycle-options { height: auto; min-height: 56px; flex-wrap: wrap; }
    .subscription-dialog .dialog-actions { gap: 7px; }
    .subscription-dialog .save-button { min-width: 132px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .insight-shell:hover, .insight-shell.is-tracking { animation: none; transform: none; }
    .motion-item, .motion-item.in-view,
    .subscription-card.motion-item, .subscription-card.motion-item.in-view {
      opacity: 1; transform: none; filter: none;
      clip-path: none; transition: none;
    }
    .detail-dialog, .subscription-dialog,
    .detail-dialog *, .subscription-dialog * { animation-duration: .01ms; animation-delay: 0s; }
  }
}