/* =============================================================================
   Features: clock, rings, toasts, modals, palette, lock screen, auth pages,
   widgets, links, notes, vault, settings
   ============================================================================= */

@property --border-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@layer components {

  /* ================================================================ shared bits */
  .center { text-align: center; }
  .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .btn--block { inline-size: 100%; }

  .form-error {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-s);
    color: oklch(82% 0.12 22);
    animation: rise-in var(--dur-3) var(--ease-out) both;
  }
  .form-error::before { content: "!"; display: grid; place-items: center; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; font-size: 0.75rem; font-weight: 700; background: color-mix(in oklch, var(--danger) 35%, transparent); }

  .notice {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-m);
    font-size: var(--fs-s);
    text-align: start;
    background: var(--surface);
    border: 1px solid var(--border);
  }
  .notice--warn { border-color: color-mix(in oklch, var(--warning) 45%, transparent); background: color-mix(in oklch, var(--warning) 10%, transparent); }
  .notice--info { border-color: var(--accent-line); background: var(--accent-soft); }

  .icon-btn--danger:hover { color: var(--danger); background: color-mix(in oklch, var(--danger) 14%, transparent); border-color: color-mix(in oklch, var(--danger) 40%, transparent); }
  .icon-btn.is-on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
  .icon-btn:disabled { opacity: 0.35; pointer-events: none; }

  .select {
    appearance: none;
    block-size: 2.5rem;
    padding: 0 2.2rem 0 var(--s-3);
    border-radius: var(--radius-s);
    color: var(--text);
    background:
      linear-gradient(45deg, transparent 50%, var(--text-dim) 50%) calc(100% - 16px) 50% / 5px 5px no-repeat,
      linear-gradient(135deg, var(--text-dim) 50%, transparent 50%) calc(100% - 11px) 50% / 5px 5px no-repeat,
      var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
  }
  .select option { background: var(--bg-raise); color: var(--text); }

  .switch--compact .switch__label { font-size: var(--fs-s); color: var(--text-dim); }

  .search-field--sm { block-size: 2.6rem; }

  .chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .chip-row--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; }
  .chip-btn {
    --focus-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: color var(--dur-2), background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-spring);
  }
  .chip-btn:hover { color: var(--text); border-color: var(--border-strong); }
  .chip-btn:active { transform: scale(0.95); }
  .chip-btn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  .chip-btn__count { font-family: var(--font-mono); opacity: 0.7; }
  .chip-btn--tag { font-family: var(--font-mono); font-weight: 500; }

  /* ================================================================ rolling clock */
  .clock { display: inline-flex; align-items: baseline; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .clock__slot { display: inline-block; overflow: hidden; block-size: 1.15em; line-height: 1.15; vertical-align: bottom; }
  .clock__digit { display: inline-block; animation: digit-roll 420ms var(--ease-spring) both; }
  .clock__sep { opacity: 0.5; padding-inline: 0.04em; animation: sep-blink 2s steps(1) infinite; }
  @keyframes digit-roll { from { transform: translateY(calc(-105% * var(--m))); opacity: 0; filter: blur(calc(2px * var(--m))); } }
  @keyframes sep-blink { 50% { opacity: 0.2; } }

  .clock--xl {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.8rem, 1.6rem + 4vw, 4.6rem);
    letter-spacing: -0.04em;
    line-height: 1;
    font-feature-settings: "tnum";
  }

  /* ================================================================ progress ring */
  .ring { transform: rotate(-90deg); flex: none; }
  .ring__track { fill: none; stroke: oklch(100% 0 0 / 0.1); stroke-width: 3; }
  .ring__value {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--p, 0));
    transition: stroke-dashoffset 900ms var(--ease-out), stroke var(--dur-2);
    filter: drop-shadow(0 0 4px color-mix(in oklch, var(--accent) 70%, transparent));
  }
  .ring--warn .ring__value { stroke: var(--warning); }
  .ring--year .ring__track, .ring--year .ring__value { stroke-width: 2.4; }

  /* ================================================================ toasts */
  .toasts {
    position: fixed;
    inset-block-end: var(--s-5);
    inset-inline-end: var(--s-5);
    z-index: var(--z-toast);
    display: grid;
    gap: var(--s-2);
    justify-items: end;
    pointer-events: none;
  }
  .toast {
    --tone: var(--accent);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    max-inline-size: min(26rem, calc(100vw - 2rem));
    padding: 0.65rem 0.6rem 0.65rem 0.9rem;
    border-radius: var(--radius-m);
    font-size: var(--fs-s);
    background: var(--glass-solid);
    border: 1px solid color-mix(in oklch, var(--tone) 35%, var(--border));
    box-shadow: var(--shadow-3);
    animation: toast-pop var(--dur-3) var(--ease-spring) both;
  }
  .toast > .icon { color: var(--tone); }
  .toast--success { --tone: var(--success); }
  .toast--warning { --tone: var(--warning); }
  .toast--error { --tone: var(--danger); }
  .toast__close { inline-size: 1.8rem; block-size: 1.8rem; }
  @keyframes toast-pop { from { opacity: 0; translate: 0 calc(14px * var(--m)); scale: calc(1 - 0.06 * var(--m)); } }

  @media (max-width: 600px) {
    .toasts { inset-inline: var(--s-3); justify-items: stretch; }
  }

  /* ================================================================ modal */
  .modal-layer { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: var(--s-4); }
  .modal-backdrop { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in var(--dur-3) var(--ease-out) both; }
  .modal {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    inline-size: min(32rem, 100%);
    max-block-size: min(88dvh, 52rem);
    border-radius: var(--radius-xl);
    background: var(--glass-solid);
    box-shadow: var(--highlight), var(--shadow-3);
    animation: modal-in var(--dur-3) var(--ease-spring) both;
  }
  .modal--wide { inline-size: min(46rem, 100%); }
  .modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-2) var(--s-5); }
  .modal__body { overflow-y: auto; padding: var(--s-3) var(--s-5) var(--s-4); }
  .modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); border-block-start: 1px solid var(--border); }
  @keyframes modal-in { from { opacity: 0; translate: 0 calc(18px * var(--m)); scale: calc(1 - 0.04 * var(--m)); } }

  /* ================================================================ command palette (neon / terminal) */
  .palette-layer { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; justify-items: center; align-items: start; padding: 12vh var(--s-3) var(--s-3); }
  .palette-backdrop { position: absolute; inset: 0; background: color-mix(in oklch, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); animation: fade-in var(--dur-2) var(--ease-out) both; }

  .palette {
    --neon: var(--accent);
    position: relative;
    overflow: hidden;
    inline-size: min(40rem, 100%);
    border-radius: var(--radius-l);
    font-family: var(--font-mono);
    background:
      linear-gradient(180deg, color-mix(in oklch, var(--neon) 7%, transparent), transparent 40%),
      oklch(11% 0.025 var(--hue-2) / 0.96);
    border: 1px solid color-mix(in oklch, var(--neon) 45%, transparent);
    box-shadow:
      0 0 0 1px oklch(0% 0 0 / 0.5),
      0 0 32px -6px color-mix(in oklch, var(--neon) 55%, transparent),
      0 40px 90px -20px oklch(0% 0 0 / 0.8);
    animation: palette-in 260ms var(--ease-spring) both;
  }
  @keyframes palette-in { from { opacity: 0; translate: 0 calc(-12px * var(--m)); scale: calc(1 - 0.03 * var(--m)); filter: blur(calc(4px * var(--m))); } }

  /* Scanlines + a sweeping beam */
  .palette__scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, oklch(100% 0 0 / 0.025) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
  }
  .palette__scan::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 30%;
    background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--neon) 9%, transparent), transparent);
    animation: scan-beam 3.2s linear infinite;
  }
  @keyframes scan-beam { from { translate: 0 -100%; } to { translate: 0 400%; } }

  .palette__input-row { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4); border-block-end: 1px solid color-mix(in oklch, var(--neon) 22%, transparent); }
  .palette__prompt { color: var(--neon); font-weight: 700; text-shadow: 0 0 10px var(--neon); animation: caret-blink-op 1.1s steps(1) infinite; }
  @keyframes caret-blink-op { 50% { opacity: 0.35; } }
  .palette__input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    outline: none;
    background: none;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    color: var(--text);
    caret-color: var(--neon);
    caret-shape: block;
  }
  .palette__input:focus-visible { outline: none; animation: none; }
  .palette__input::placeholder { color: var(--text-faint); }

  .palette__list { list-style: none; margin: 0; padding: var(--s-2); max-block-size: min(52vh, 28rem); overflow-y: auto; }
  .palette__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0.6rem var(--s-3);
    border-radius: var(--radius-s);
    cursor: pointer;
    color: var(--text-dim);
    transition: background-color 120ms, color 120ms;
    animation: rise-in 300ms var(--ease-out) both;
  }
  .palette__item[style*="--card-hue"] { --neon: oklch(83% 0.14 var(--card-hue)); }
  .palette__item:hover { background: oklch(100% 0 0 / 0.04); color: var(--text); }
  .palette__item.is-active {
    color: var(--text);
    background: linear-gradient(90deg, color-mix(in oklch, var(--neon) 18%, transparent), transparent);
    box-shadow: inset 2px 0 0 var(--neon);
  }
  .palette__icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; flex: none; border-radius: var(--radius-xs); color: var(--neon); background: color-mix(in oklch, var(--neon) 12%, transparent); }
  .palette__text { display: grid; min-inline-size: 0; flex: 1; }
  .palette__title { font-family: var(--font-sans); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .palette__title mark { background: none; color: var(--neon); text-shadow: 0 0 8px color-mix(in oklch, var(--neon) 60%, transparent); }
  .palette__sub { font-size: 0.72rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .palette__kind { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); padding: 0.1rem 0.45rem; border: 1px solid oklch(100% 0 0 / 0.08); border-radius: 6px; }
  .palette__item.is-active .palette__kind { color: var(--neon); border-color: color-mix(in oklch, var(--neon) 40%, transparent); }
  .palette__empty { display: grid; gap: 0.2rem; padding: var(--s-5); text-align: center; color: var(--text-dim); }
  .palette__empty small { color: var(--text-faint); }
  .palette__empty em { color: var(--neon); font-style: normal; }
  .palette__foot { display: flex; flex-wrap: wrap; gap: var(--s-4); padding: 0.6rem var(--s-4); font-size: 0.7rem; color: var(--text-faint); border-block-start: 1px solid oklch(100% 0 0 / 0.06); }
  .palette__foot .kbd { min-inline-size: 1.3rem; block-size: 1.3rem; font-size: 0.62rem; margin-inline-end: 0.15rem; }
  .palette__count { margin-inline-start: auto; }

  /* ================================================================ lock screen */
  .lockscreen {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--s-4);
    background: color-mix(in oklch, var(--bg) 55%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    backdrop-filter: blur(28px) saturate(130%);
    animation: fade-in var(--dur-4) var(--ease-out) both;
  }
  .lockscreen__inner { display: grid; justify-items: center; gap: var(--s-3); inline-size: min(26rem, 100%); text-align: center; }
  .lockscreen__clock { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 2rem + 6vw, 6rem); letter-spacing: -0.05em; line-height: 1; }
  .lockscreen__date { color: var(--text-dim); margin-block-end: var(--s-3); }
  .lockscreen__form { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); inline-size: 100%; align-items: center; }

  .lock-orb {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 5rem;
    block-size: 5rem;
    border-radius: 50%;
    color: var(--accent);
    background: radial-gradient(circle at 35% 30%, color-mix(in oklch, var(--accent) 30%, transparent), transparent 70%), var(--surface);
    border: 1px solid var(--accent-line);
    box-shadow: 0 0 40px -6px color-mix(in oklch, var(--accent) 60%, transparent), inset 0 1px 0 oklch(100% 0 0 / 0.15);
    animation: float 6s var(--ease-in-out) infinite;
  }
  .lock-orb--sm { inline-size: 3.6rem; block-size: 3.6rem; }
  @keyframes float { 50% { translate: 0 calc(-6px * var(--m)); } }

  .is-shake { animation: shake 420ms var(--ease-out); }
  @keyframes shake { 15%, 55% { translate: calc(-8px * var(--m)) 0; } 35%, 75% { translate: calc(7px * var(--m)) 0; } 90% { translate: calc(-2px * var(--m)) 0; } }

  /* ================================================================ auth pages */
  .auth-page { display: grid; place-items: center; min-block-size: 100dvh; padding: var(--s-5) var(--s-4); }
  .auth-card { inline-size: min(28rem, 100%); border-radius: var(--radius-xl); }
  .auth-card__inner { display: grid; justify-items: center; gap: var(--s-4); padding: clamp(var(--s-5), 5vw, var(--s-7)); text-align: center; }
  .display-m { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem); letter-spacing: -0.04em; line-height: 1.05; }
  .auth-points { display: grid; gap: var(--s-2); text-align: start; font-size: var(--fs-s); color: var(--text-dim); }
  .auth-points li { display: flex; align-items: flex-start; gap: var(--s-2); }
  .auth-points .icon { color: var(--accent); margin-block-start: 0.2rem; }
  .back-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-s); color: var(--text-faint); transition: color var(--dur-2), gap var(--dur-2) var(--ease-spring); }
  .back-link:hover { color: var(--text); gap: 0.6rem; }

  /* Rotating gradient rim for hero panels */
  .aurora-border { position: relative; isolation: isolate; }
  .aurora-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--border-spin), transparent 0 25%, var(--accent) 38%, var(--accent-2) 50%, transparent 62% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: border-spin 7s linear infinite;
    pointer-events: none;
  }
  @keyframes border-spin { to { --border-spin: 360deg; } }

  .denied-art { position: relative; display: grid; place-items: center; inline-size: 9rem; block-size: 9rem; }
  .denied-art__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in oklch, var(--danger) 45%, transparent); animation: aurora-turn 30s linear infinite; }
  .denied-art__ring--2 { inset: 14%; border-style: solid; border-color: color-mix(in oklch, var(--danger) 20%, transparent); animation-duration: 18s; animation-direction: reverse; }
  .denied-art .lock-orb { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 50%, transparent); box-shadow: 0 0 40px -8px var(--danger); }

  /* ================================================================ dashboard home */
  .dash-grid {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-5) var(--gutter) var(--s-8);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
  }
  .dash-grid > * { min-inline-size: 0; display: grid; animation: rise-in var(--dur-4) var(--ease-out) both; }
  .dash-grid__hero { grid-column: span 12; }
  .dash-grid__links { grid-column: span 7; animation-delay: 80ms; }
  .dash-grid__steam { grid-column: span 5; animation-delay: 140ms; }
  .dash-grid__notes { grid-column: span 5; animation-delay: 200ms; }
  .dash-grid__daylight { grid-column: span 4; animation-delay: 260ms; }
  .dash-grid__year { grid-column: span 3; animation-delay: 320ms; }
  .dash-grid__uptime { grid-column: span 7; animation-delay: 380ms; }

  @media (max-width: 1200px) {
    .dash-grid__links, .dash-grid__uptime { grid-column: span 12; }
    .dash-grid__steam, .dash-grid__notes { grid-column: span 6; }
    .dash-grid__daylight, .dash-grid__year { grid-column: span 6; }
  }
  @media (max-width: 720px) {
    .dash-grid > * { grid-column: span 12; }
  }

  .widget { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-xl); }
  .widget__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
  .widget__title { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-s); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
  .widget__title .icon { color: var(--accent); }
  .widget__more { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-xs); color: var(--text-faint); transition: color var(--dur-2), gap var(--dur-2) var(--ease-spring); }
  .widget__more:hover { color: var(--accent); gap: 0.5rem; }

  .widget--hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-5);
    padding: clamp(var(--s-5), 4vw, var(--s-7));
    background:
      radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 55%),
      radial-gradient(90% 120% at 100% 100%, color-mix(in oklch, var(--accent-2) 14%, transparent), transparent 60%),
      var(--glass-bg);
  }
  .widget-hero__text { display: grid; gap: var(--s-2); }
  .widget-hero__greeting { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); letter-spacing: -0.045em; line-height: 1.02; }
  .widget-hero__clock { display: grid; justify-items: end; gap: var(--s-2); }
  @media (max-width: 760px) {
    .widget--hero { grid-template-columns: 1fr; }
    .widget-hero__clock { justify-items: start; }
  }

  .day-bar { position: relative; inline-size: min(100%, 18rem); block-size: 6px; border-radius: 6px; background: oklch(100% 0 0 / 0.08); overflow: hidden; }
  .day-bar__fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 12px var(--accent); transition: inline-size 1s var(--ease-out); }

  .mini-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-2); }
  .mini-tile {
    --accent: oklch(83% 0.14 var(--card-hue, var(--hue)));
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    border-radius: var(--radius-m);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--fs-s);
    font-weight: 600;
    min-inline-size: 0;
    transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-3);
  }
  .mini-tile:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--accent) 50%, transparent); background: color-mix(in oklch, var(--accent) 9%, transparent); box-shadow: 0 10px 30px -14px var(--accent); }
  .mini-tile__icon { display: grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; flex: none; border-radius: var(--radius-s); color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); }
  .mini-tile__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .note-rows { display: grid; gap: var(--s-1); }
  .note-row { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem var(--s-3); padding: var(--s-3); border-radius: var(--radius-m); transition: background-color var(--dur-2); }
  .note-row:hover { background: var(--surface); }
  .note-row__title { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; min-inline-size: 0; }
  .note-row__excerpt { grid-column: 1 / -1; font-size: var(--fs-s); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-row__time { grid-row: 1; grid-column: 2; font-size: var(--fs-xs); color: var(--text-faint); }

  .steam-me { display: flex; align-items: center; gap: var(--s-3); }
  .steam-avatar { position: relative; flex: none; }
  .steam-avatar img { inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius-m); object-fit: cover; border: 1px solid var(--border-strong); }
  .steam-avatar .status-dot { position: absolute; inset-block-end: -3px; inset-inline-end: -3px; inline-size: 0.85rem; block-size: 0.85rem; border: 2px solid var(--bg); }
  .widget--steam { --tone: var(--text-faint); }
  .widget--steam.is-online { --tone: var(--success); }
  .widget--steam.is-playing { --tone: oklch(80% 0.17 145); }
  .widget--steam.is-away { --tone: var(--warning); }
  .widget--steam.is-offline .status-dot::after { display: none; }
  .steam-me__text { display: grid; line-height: 1.3; min-inline-size: 0; }
  .steam-me__text strong { font-size: 1.1rem; }
  .steam-me__state { color: var(--tone); font-weight: 600; font-size: var(--fs-s); }
  .widget--steam.is-playing { background: radial-gradient(120% 100% at 100% 0%, color-mix(in oklch, var(--tone) 14%, transparent), transparent 60%), var(--glass-bg); }
  .steam-games { display: grid; gap: var(--s-2); }
  .steam-games li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); font-size: var(--fs-s); }
  .steam-games img { inline-size: 92px; block-size: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
  .steam-games__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .steam-games__hours { color: var(--text-faint); font-size: var(--fs-xs); }

  .sun-arc { inline-size: 100%; block-size: auto; overflow: visible; }
  .arc-stop-a { stop-color: var(--accent-2); }
  .arc-stop-b { stop-color: var(--warning); }
  .sun-arc__horizon { stroke: var(--border-strong); stroke-dasharray: 2 4; }
  .sun-arc__track { fill: none; stroke: oklch(100% 0 0 / 0.08); stroke-width: 2; stroke-dasharray: 3 5; }
  .sun-arc__done { fill: none; stroke: url(#arc-grad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset 1.2s var(--ease-out); }
  .sun-arc__sun { fill: var(--warning); filter: drop-shadow(0 0 8px var(--warning)); animation: sun-glow 3s var(--ease-in-out) infinite alternate; }
  .is-night .sun-arc__sun { fill: var(--text-faint); filter: none; animation: none; }
  @keyframes sun-glow { to { filter: drop-shadow(0 0 16px var(--warning)); } }
  .daylight-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); text-align: center; }
  .daylight-facts dt, .stat-grid dt, .about-grid dt { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
  .daylight-facts dd, .stat-grid dd, .about-grid dd { margin: 0; font-weight: 600; }

  .year-ring { position: relative; display: grid; place-items: center; margin-block: var(--s-2); }
  .year-ring__label { position: absolute; display: grid; justify-items: center; line-height: 1.1; }
  .year-ring__label strong { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.03em; }
  .year-ring__label small { color: var(--text-faint); font-size: var(--fs-xs); }

  .uptime-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; }
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--s-2); margin-block-start: var(--s-2); }
  .stat-grid > div { padding: var(--s-3); border-radius: var(--radius-m); background: var(--surface); border: 1px solid oklch(100% 0 0 / 0.05); }
  .live-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--success); }
  .live-badge .pulse-dot { background: var(--success); }

  /* ================================================================ links page */
  .tile__meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-block-start: var(--s-2); }
  .tile__badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); font-size: 0.66rem; color: var(--text-faint); background: oklch(100% 0 0 / 0.05); }
  .tile__icon--sm { inline-size: 2.4rem; block-size: 2.4rem; margin: 0; border-radius: var(--radius-s); }

  .tile-grid--edit { list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
  .edit-tile {
    --accent: oklch(83% 0.14 var(--card-hue));
    --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
    --accent-line: color-mix(in oklch, var(--accent) 45%, transparent);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--radius-l);
    cursor: grab;
    transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-3);
    animation: wiggle-in var(--dur-3) var(--ease-spring) both;
  }
  .edit-tile:active { cursor: grabbing; }
  .edit-tile.is-dragging { opacity: 0.45; transform: scale(0.97); }
  .edit-tile.is-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .edit-tile__handle { color: var(--text-faint); }
  .edit-tile__text { display: grid; flex: 1; min-inline-size: 0; line-height: 1.25; }
  .edit-tile__text strong, .edit-tile__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .edit-tile__text small { color: var(--text-faint); font-size: var(--fs-xs); }
  .edit-tile__actions { display: flex; gap: 0.1rem; }
  .edit-tile__actions .icon-btn { inline-size: 2rem; block-size: 2rem; }
  @keyframes wiggle-in { from { opacity: 0; transform: rotate(calc(-1.5deg * var(--m))) scale(calc(1 - 0.04 * var(--m))); } }

  .link-editor { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-5); }
  .link-editor__preview { position: sticky; inset-block-start: 0; align-self: start; }
  .link-editor__fields { display: grid; gap: var(--s-3); }
  .tile--preview { --glow: 1; min-block-size: 11rem; box-shadow: var(--highlight), var(--shadow-3); }
  .link-editor__preview[style*="--card-hue"] .glow-card { --accent: oklch(83% 0.14 var(--card-hue)); --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent); --accent-line: color-mix(in oklch, var(--accent) 45%, transparent); }
  @media (max-width: 640px) {
    .link-editor { grid-template-columns: 1fr; }
    .link-editor__preview { position: static; }
  }

  .picker { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
  .picker__legend { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-block-end: var(--s-2); }
  .icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); gap: 0.3rem; }
  .icon-picker__item {
    --focus-radius: var(--radius-s);
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--radius-s);
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid transparent;
    transition: color var(--dur-2), background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-spring);
  }
  .icon-picker__item:hover { color: var(--text); transform: scale(1.08); }
  .icon-picker__item[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }

  .swatch-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
  .swatch-btn {
    --focus-radius: 50%;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: oklch(78% 0.15 var(--card-hue));
    box-shadow: inset 0 0 0 2px oklch(0% 0 0 / 0.25), 0 0 14px -4px oklch(78% 0.15 var(--card-hue));
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
  }
  .swatch-btn:hover { transform: scale(1.12); }
  .swatch-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px oklch(78% 0.15 var(--card-hue)); }
  .range--inline { flex: 1; min-inline-size: 8rem; }

  .toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s-3); }

  .field-row { display: flex; align-items: center; gap: var(--s-2); }
  .field-row .field { flex: 1; }
  .icon-btn--field { inline-size: 3rem; block-size: 3.4rem; border-radius: var(--radius-m); background: var(--surface); border-color: var(--border); }
  .field--area .field__label { inset-block-start: 1.2rem; }
  .field__textarea { block-size: auto; min-block-size: 6rem; padding-block-start: 1.6rem; resize: vertical; line-height: 1.5; }
  .field--area .field__textarea:focus + .field__label,
  .field--area .field__textarea:not(:placeholder-shown) + .field__label { translate: 0 -70%; }

  /* ================================================================ notes */
  .notes {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: var(--s-4);
    block-size: calc(100dvh - 4.25rem);
    padding: var(--s-4) var(--gutter) var(--s-4);
  }
  .notes__list, .notes__editor { min-block-size: 0; border-radius: var(--radius-xl); }
  .notes__list { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); }
  .notes__search { display: grid; gap: var(--s-2); }
  .notes__items { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; align-content: start; gap: 0.2rem; }
  .note-item {
    position: relative;
    display: grid;
    gap: 0.15rem;
    padding: var(--s-3);
    border-radius: var(--radius-m);
    transition: background-color var(--dur-2);
  }
  .note-item:hover { background: var(--surface); }
  .note-item.is-active { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 2px 0 0 var(--accent); }
  .note-item__title { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-item__excerpt { font-size: var(--fs-s); color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .note-item__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.7rem; color: var(--text-faint); }
  .note-item__tag { font-family: var(--font-mono); color: color-mix(in oklch, var(--accent) 70%, var(--text-faint)); }

  .notes__editor { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: var(--s-2); padding: var(--s-4) var(--s-5); }
  .notes__editor > .empty-state { grid-row: 1 / -1; align-self: center; }
  .notes__back { display: none; }
  .editor-bar { display: flex; align-items: center; gap: var(--s-2); }
  .editor-bar__spacer { flex: 1; }
  .segmented--sm .segmented__item { padding: 0.3rem 0.75rem; font-size: var(--fs-xs); }

  .save-state { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); padding-inline: var(--s-2); }
  .save-state__dot { inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: var(--success); transition: background-color var(--dur-2); }
  .save-state--dirty .save-state__dot { background: var(--warning); }
  .save-state--saving .save-state__dot { background: var(--accent); animation: pulse 900ms var(--ease-out) infinite; }
  .save-state--error .save-state__dot { background: var(--danger); }

  .editor-title {
    inline-size: 100%;
    border: 0;
    outline: none;
    background: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
    letter-spacing: -0.035em;
    color: var(--text);
  }
  .editor-title:focus-visible { outline: none; animation: none; }
  .editor-title::placeholder { color: var(--text-faint); }
  .editor-tags { display: flex; align-items: center; gap: var(--s-2); padding-block-end: var(--s-2); border-block-end: 1px solid var(--border); }
  .editor-tags__input { flex: 1; border: 0; outline: none; background: none; font-family: var(--font-mono); font-size: var(--fs-s); color: var(--accent); }
  .editor-tags__input:focus-visible { outline: none; animation: none; }
  .editor-tags__input::placeholder { color: var(--text-faint); }

  .editor-body { display: grid; gap: var(--s-4); min-block-size: 0; }
  .editor-body--split { grid-template-columns: 1fr 1fr; }
  .editor-text {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 16rem;
    resize: none;
    padding: var(--s-4);
    border-radius: var(--radius-m);
    border: 1px solid var(--border);
    background: oklch(0% 0 0 / 0.2);
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.7;
    tab-size: 2;
    transition: border-color var(--dur-2), box-shadow var(--dur-2);
  }
  .editor-text:focus-visible { outline: none; animation: none; border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
  .editor-body .prose { overflow-y: auto; padding: var(--s-2) var(--s-3); }
  .editor-foot { padding-block-start: var(--s-2); }

  @media (max-width: 960px) {
    .notes { grid-template-columns: minmax(0, 1fr); block-size: auto; min-block-size: calc(100dvh - 4.25rem); }
    .notes.is-editor .notes__list { display: none; }
    .notes.is-list .notes__editor { display: none; }
    .notes__back { display: inline-grid; }
    .editor-body--split { grid-template-columns: 1fr; }
  }

  /* Markdown preview */
  .prose { line-height: 1.75; color: var(--text); overflow-wrap: anywhere; }
  .prose > * + * { margin-block-start: 0.85em; }
  .prose h1, .prose h2, .prose h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.2; margin-block-start: 1.3em; }
  .prose h1 { font-size: 1.7rem; }
  .prose h2 { font-size: 1.35rem; }
  .prose h3 { font-size: 1.12rem; }
  .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
  .prose code { padding: 0.12em 0.4em; border-radius: 6px; background: var(--surface-2); color: var(--accent); }
  .prose pre { padding: var(--s-4); border-radius: var(--radius-m); background: oklch(0% 0 0 / 0.35); border: 1px solid var(--border); overflow-x: auto; }
  .prose pre code { padding: 0; background: none; color: var(--text); }
  .prose blockquote { padding-inline-start: var(--s-4); border-inline-start: 3px solid var(--accent-line); color: var(--text-dim); }
  .prose ul, .prose ol { padding-inline-start: 1.4em; }
  .prose li::marker { color: var(--accent); }
  .prose li.task-list-item { list-style: none; margin-inline-start: -1.4em; }
  .prose input[type="checkbox"] { accent-color: var(--accent); margin-inline-end: 0.5em; }
  .prose table { border-collapse: collapse; inline-size: 100%; font-size: var(--fs-s); }
  .prose th, .prose td { padding: 0.5em 0.75em; border: 1px solid var(--border); text-align: start; }
  .prose th { background: var(--surface); }
  .prose hr { margin-block: 1.5em; }
  .prose img { border-radius: var(--radius-m); }

  /* ================================================================ vault */
  /* Vault: one dark photo behind frosted panels, no aurora. */
  .app:has(.vault-page) .aurora { display: none; }
  .app:has(.vault-page) .photo-backdrop { z-index: -1; }
  .vault-page { position: relative; }
  .vault-page .glass {
    background: linear-gradient(180deg, oklch(100% 0 0 / 0.08), oklch(100% 0 0 / 0.035));
    border-color: oklch(100% 0 0 / 0.12);
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12), 0 30px 60px -30px oklch(0% 0 0 / 0.7);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
  }
  .vault-page .center-card, .vault-page .vault, .vault-page .vault-tabs { animation: rise-in 700ms var(--ease-out) both; }
  .vault-page .vault-tabs { border-radius: var(--radius-pill); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .vault-gate { max-inline-size: 30rem; }
  .vault-gate__inner { display: grid; justify-items: center; gap: var(--s-3); inline-size: 100%; }
  .vault-gate__inner > form { inline-size: 100%; text-align: start; }
  /* Calm glass badge (replaces the pulsing rings) */
  .vault-badge {
    display: grid; place-items: center;
    inline-size: 4.25rem; block-size: 4.25rem;
    border-radius: 22px;
    color: var(--accent);
    background: linear-gradient(180deg, oklch(100% 0 0 / 0.1), oklch(100% 0 0 / 0.03));
    border: 1px solid oklch(100% 0 0 / 0.14);
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.15), 0 18px 40px -18px color-mix(in oklch, var(--accent) 70%, transparent);
    animation: badge-float 6s var(--ease-in-out) infinite;
  }
  .vault-badge--locked { color: var(--warning); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.15), 0 18px 40px -18px color-mix(in oklch, var(--warning) 60%, transparent); }
  @keyframes badge-float { 50% { translate: 0 calc(-4px * var(--m)); } }

  .vault-unlock { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-2); inline-size: 100%; }
  .hint-list { display: grid; gap: var(--s-2); font-size: var(--fs-s); color: var(--text-dim); }
  .hint-list li { display: flex; align-items: flex-start; gap: var(--s-2); }
  .hint-list .icon { color: var(--accent); margin-block-start: 0.25rem; }

  .vault {
    display: grid;
    grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
    gap: var(--s-4);
    min-block-size: calc(100dvh - 9rem);
  }
  .vault__list { display: grid; grid-template-rows: auto auto minmax(0, 1fr); align-content: start; gap: var(--s-3); padding: var(--s-3); border-radius: var(--radius-xl); }
  .vault__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; overflow-y: auto; align-content: start; }
  .vault-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    inline-size: 100%;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-m);
    text-align: start;
    transition: background-color var(--dur-2), transform var(--dur-2) var(--ease-spring);
  }
  .vault-item:hover { background: var(--surface); }
  .vault-item:active { transform: scale(0.98); }
  .vault-item.is-active { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 2px 0 0 var(--accent); }
  .vault-item__text { display: grid; flex: 1; min-inline-size: 0; line-height: 1.3; }
  .vault-item__text strong, .vault-item__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vault-item__text small { font-size: var(--fs-xs); color: var(--text-faint); }
  .vault-item__badge { font-family: var(--font-mono); font-size: 0.62rem; padding: 0.1rem 0.4rem; border-radius: 6px; color: var(--success); border: 1px solid color-mix(in oklch, var(--success) 40%, transparent); }

  .kind-icon { --k: var(--hue); display: grid; place-items: center; inline-size: 2.3rem; block-size: 2.3rem; flex: none; border-radius: var(--radius-s); color: oklch(83% 0.14 var(--k)); background: oklch(83% 0.14 var(--k) / 0.13); }
  .kind-icon--password { --k: 200; }
  .kind-icon--steamaccount { --k: 250; }
  .kind-icon--recoverycodes { --k: 70; }
  .kind-icon--securenote { --k: 320; }
  .kind-icon--lg { inline-size: 3.2rem; block-size: 3.2rem; border-radius: var(--radius-m); }

  .vault__detail { padding: var(--s-5); border-radius: var(--radius-xl); align-content: start; display: grid; gap: var(--s-4); }
  .vault__detail > .empty-state { align-self: center; min-block-size: 50vh; align-content: center; }
  .vault-detail__head { display: flex; align-items: center; gap: var(--s-3); animation: rise-in var(--dur-3) var(--ease-out) both; }
  .vault-detail__title { display: grid; min-inline-size: 0; }

  .secret-fields { display: grid; gap: var(--s-2); }
  .secret-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-m);
    background: var(--surface);
    border: 1px solid oklch(100% 0 0 / 0.05);
    animation: rise-in var(--dur-3) var(--ease-out) both;
  }
  .secret-row:nth-child(2) { animation-delay: 50ms; }
  .secret-row:nth-child(3) { animation-delay: 100ms; }
  .secret-row:nth-child(4) { animation-delay: 150ms; }
  .secret-row dt { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
  .secret-row dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
  .secret-row dd a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--accent); }
  .secret-row__actions { display: flex; gap: 0.1rem; }
  .secret-row--secret dd { position: relative; }
  .secret-row--secret.is-revealed { border-color: color-mix(in oklch, var(--warning) 35%, transparent); background: color-mix(in oklch, var(--warning) 6%, var(--surface)); }
  .secret-mask { letter-spacing: 0.2em; color: var(--text-faint); }
  .secret-value { white-space: pre-wrap; color: var(--text); animation: decrypt 380ms steps(6) both; }
  @keyframes decrypt { from { filter: blur(6px); opacity: 0.2; letter-spacing: 0.3em; } }
  .reveal-bar { position: absolute; inset-inline: 0; inset-block-end: -0.55rem; block-size: 2px; border-radius: 2px; background: var(--warning); transform-origin: left; animation: reveal-countdown 15s linear forwards; }
  @keyframes reveal-countdown { to { transform: scaleX(0); } }
  .secret-row--notes { align-items: start; }

  .totp { display: flex; align-items: center; gap: var(--s-3); }
  .totp__code { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); text-shadow: 0 0 18px color-mix(in oklch, var(--accent) 50%, transparent); }

  @media (max-width: 960px) {
    .vault { grid-template-columns: 1fr; }
    .secret-row { grid-template-columns: 1fr auto; }
    .secret-row dt { grid-column: 1 / -1; }
  }

  .segmented--wrap { flex-wrap: wrap; border-radius: var(--radius-m); }
  .segmented--wrap .segmented__item { display: inline-flex; align-items: center; gap: 0.35rem; }

  .generator { display: grid; gap: var(--s-4); }
  .generator__out {
    display: block;
    padding: var(--s-4);
    border-radius: var(--radius-m);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    text-align: center;
    color: var(--accent);
    background: oklch(0% 0 0 / 0.3);
    border: 1px dashed var(--accent-line);
    animation: decrypt 300ms steps(5) both;
  }

  .strength { display: flex; align-items: center; gap: var(--s-3); }
  .strength__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; max-inline-size: 14rem; }
  .strength__bars span { block-size: 5px; border-radius: 5px; background: oklch(100% 0 0 / 0.08); transition: background-color var(--dur-3), box-shadow var(--dur-3); }
  .strength__label { font-size: var(--fs-xs); color: var(--text-dim); display: inline-flex; gap: 0.5rem; }
  .strength__label small { color: var(--text-faint); }
  .strength--s0 .is-on { background: var(--danger); }
  .strength--s1 .is-on { background: oklch(72% 0.17 40); }
  .strength--s2 .is-on { background: var(--warning); }
  .strength--s3 .is-on { background: oklch(80% 0.15 140); }
  .strength--s4 .is-on { background: var(--success); box-shadow: 0 0 8px var(--success); }
  .strength--compact .strength__bars { max-inline-size: 8rem; }

  /* ================================================================ settings */
  .settings { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; }
  .settings__toc { position: sticky; inset-block-start: 5.5rem; display: grid; gap: 0.1rem; padding: var(--s-2); border-radius: var(--radius-l); }
  .settings__toc a { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius-s); font-size: var(--fs-s); color: var(--text-dim); transition: color var(--dur-2), background-color var(--dur-2); }
  .settings__toc a:hover { color: var(--text); background: var(--surface); }
  .settings__main { display: grid; gap: var(--s-4); min-inline-size: 0; }
  .settings-card { display: grid; gap: var(--s-4); border-radius: var(--radius-xl); scroll-margin-top: 5.5rem; }
  .settings-card__head { display: grid; gap: 0.2rem; }
  .settings-card__head--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .settings-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-block-start: 1px solid oklch(100% 0 0 / 0.05); }
  .settings-row > div:first-child { flex: 1; min-inline-size: 14rem; }
  .settings-row--stack { flex-direction: column; align-items: stretch; }
  .settings-form { display: grid; gap: var(--s-3); align-content: start; }
  .settings-sub { display: flex; align-items: center; gap: var(--s-2); font-size: 1rem; }
  .split-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s-5); }
  .download-ready { animation: rise-in var(--dur-3) var(--ease-spring) both; }

  .theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); }
  .theme-card {
    position: relative;
    display: grid;
    gap: var(--s-2);
    padding: var(--s-3);
    border-radius: var(--radius-l);
    text-align: start;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-3);
  }
  .theme-card:hover { transform: translateY(-3px); }
  .theme-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .theme-card__preview { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; block-size: 4.5rem; padding: 6px; border-radius: var(--radius-s); overflow: hidden; }
  .theme-card__preview span { border-radius: 6px; }
  .theme-card__preview span:first-child { grid-row: span 2; }
  .theme-card--aurora .theme-card__preview { background: radial-gradient(circle at 20% 20%, oklch(62% 0.17 172 / 0.8), transparent 60%), radial-gradient(circle at 90% 80%, oklch(55% 0.2 270 / 0.8), transparent 60%), #0b0d14; }
  .theme-card--aurora .theme-card__preview span { background: oklch(100% 0 0 / 0.1); border: 1px solid oklch(100% 0 0 / 0.15); }
  .theme-card--neon .theme-card__preview { background: radial-gradient(circle at 80% 20%, oklch(60% 0.26 330 / 0.9), transparent 60%), #07050d; }
  .theme-card--neon .theme-card__preview span { border: 1px solid oklch(86% 0.19 330); box-shadow: 0 0 8px oklch(86% 0.19 330 / 0.6); }
  .theme-card--minimal .theme-card__preview { background: #121316; }
  .theme-card--minimal .theme-card__preview span { background: oklch(100% 0 0 / 0.05); }
  .theme-card--sunset .theme-card__preview { background: radial-gradient(circle at 25% 25%, oklch(70% 0.17 60 / 0.9), transparent 60%), radial-gradient(circle at 85% 85%, oklch(60% 0.2 350 / 0.85), transparent 60%), #1a0f0d; }
  .theme-card--sunset .theme-card__preview span { background: oklch(100% 0 0 / 0.1); border: 1px solid oklch(90% 0.08 60 / 0.25); }
  .theme-card--abyss .theme-card__preview { background: radial-gradient(circle at 70% 30%, oklch(55% 0.15 215 / 0.9), transparent 60%), radial-gradient(circle at 20% 90%, oklch(45% 0.17 265 / 0.8), transparent 60%), #050a14; }
  .theme-card--abyss .theme-card__preview span { background: oklch(80% 0.12 205 / 0.08); border: 1px solid oklch(80% 0.12 205 / 0.3); }
  .theme-card--terminal .theme-card__preview { background: repeating-linear-gradient(180deg, oklch(0% 0 0 / 0.35) 0 1px, transparent 1px 3px), #040805; }
  .theme-card--terminal .theme-card__preview span { border-radius: 2px; border: 1px solid oklch(86% 0.2 145 / 0.7); box-shadow: 0 0 6px oklch(86% 0.2 145 / 0.4); }
  .theme-card__name { font-weight: 600; font-size: var(--fs-s); }
  .theme-card__desc { font-size: 0.72rem; color: var(--text-faint); line-height: 1.35; }
  .theme-card__check { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; display: grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; color: var(--accent-ink); background: var(--accent); opacity: 0; scale: 0.5; transition: opacity var(--dur-2), scale var(--dur-3) var(--ease-spring); }
  .theme-card[aria-checked="true"] .theme-card__check { opacity: 1; scale: 1; }

  .file-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--radius-m);
    border: 1.5px dashed var(--border-strong);
    color: var(--text-dim);
    cursor: pointer;
    transition: border-color var(--dur-2), background-color var(--dur-2);
  }
  .file-drop:hover, .file-drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
  .file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

  .session-list { display: grid; gap: var(--s-2); }
  .session { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--radius-m); background: var(--surface); border: 1px solid oklch(100% 0 0 / 0.05); animation: rise-in var(--dur-3) var(--ease-out) both; }
  .session.is-current { border-color: var(--accent-line); }
  .session__icon { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--radius-s); color: var(--accent); background: var(--accent-soft); flex: none; }
  .session__text { display: grid; flex: 1; min-inline-size: 0; }
  .session__text strong { display: flex; align-items: center; gap: var(--s-2); }
  .session__text small { font-size: var(--fs-xs); color: var(--text-faint); }

  .about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s-3); }
  .about-grid > div { padding: var(--s-3); border-radius: var(--radius-m); background: var(--surface); overflow-wrap: anywhere; }

  @media (max-width: 960px) {
    .settings { grid-template-columns: 1fr; }
    .settings__toc { position: static; display: flex; overflow-x: auto; }
    .settings__toc a { flex: none; }
  }
}

/* ---- Photo backdrop for sign-in / error pages */
@layer components {
  .photo-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #050507; }
  .photo-backdrop__img {
    position: absolute;
    inset: -4%;
    background: var(--img) center / cover no-repeat;
    filter: saturate(1.15) brightness(0.62);
    animation: backdrop-drift 40s var(--ease-in-out) infinite alternate, fade-in 1.2s var(--ease-out) both;
  }
  .photo-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(70% 60% at 50% 50%, transparent, oklch(0% 0 0 / 0.65)),
      linear-gradient(180deg, oklch(0% 0 0 / 0.2), oklch(0% 0 0 / 0.55));
  }
  @keyframes backdrop-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(calc(1.02 + 0.08 * var(--m))) translate(calc(-1.5% * var(--m)), calc(-1% * var(--m))); } }
  .app:has(.photo-backdrop) .aurora { opacity: 0.25; }
  .auth-page { position: relative; z-index: 1; }
}

/* ---- Dashboard hero: time-of-day photo under the glass */
@layer components {
  .widget--photo { position: relative; isolation: isolate; overflow: hidden; min-block-size: 15rem; }
  .widget-photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--img) center 60% / cover no-repeat;
    opacity: 0.55;
    animation: backdrop-drift 50s var(--ease-in-out) infinite alternate;
  }
  .widget--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--bg) 88%, transparent) 0%, color-mix(in oklch, var(--bg) 45%, transparent) 55%, color-mix(in oklch, var(--bg) 70%, transparent) 100%),
      linear-gradient(0deg, color-mix(in oklch, var(--bg) 60%, transparent), transparent 50%);
  }
  .widget--photo .widget-hero__greeting { text-shadow: 0 4px 30px oklch(0% 0 0 / 0.5); }
}

@layer components {
  .widget--steam.widget--photo { min-block-size: 0; }
  .widget-photo--steam { opacity: 0.32; filter: blur(2px) saturate(1.2); background-position: center; animation: none; }
  .widget--steam.widget--photo::before {
    background: linear-gradient(180deg, color-mix(in oklch, var(--bg) 55%, transparent), color-mix(in oklch, var(--bg) 92%, transparent) 75%);
  }
}

/* ---- Vault: encrypted file manager */
@layer components {
  .vault-tabs { inline-size: fit-content; margin-block-end: var(--s-4); }
  .vault-tabs .segmented__item { display: inline-flex; align-items: center; gap: 0.4rem; }

  .icon-btn--sm { inline-size: 2rem; block-size: 2rem; }
  .icon-btn--danger:hover { color: var(--danger, oklch(70% 0.19 25)); background: oklch(60% 0.2 25 / 0.14); }

  .files { display: grid; gap: var(--s-4); padding: clamp(var(--s-4), 2.5vw, var(--s-6)); border-radius: var(--radius-xl); }
  .files__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .files__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-inline-size: 0; font-size: 1.05rem; }
  .files__crumb { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem; border-radius: var(--radius-s); color: var(--text-dim); font-weight: 600; background: none; border: 0; cursor: pointer; max-inline-size: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color var(--dur-2), color var(--dur-2); }
  .files__crumb:hover { color: var(--text); background: var(--surface-2, oklch(100% 0 0 / 0.06)); }
  .files__crumb.is-current { color: var(--text); }
  .files__sep { color: var(--text-faint); }
  .files__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
  .files__search { inline-size: min(15rem, 100%); }

  .files__upload { position: relative; overflow: hidden; cursor: pointer; }
  .files__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; font-size: 0; }
  .files__upload:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

  .files__uploads { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
  .upload { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2); padding: 0.55rem 0.8rem; border-radius: var(--radius-s); background: oklch(100% 0 0 / 0.04); border: 1px solid var(--border); overflow: hidden; font-size: var(--fs-s); }
  .upload .icon { color: var(--accent); }
  .upload.is-error .icon, .upload.is-error .upload__meta { color: oklch(72% 0.17 25); }
  .upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .upload__meta { font-size: var(--fs-xs); color: var(--text-dim); }
  .upload__bar { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; }
  .upload__bar span { display: block; block-size: 100%; inline-size: var(--p, 0%); background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent); transition: inline-size 200ms linear; }

  .files__head, .file-row__main { display: grid; align-items: center; gap: var(--s-3); }
  .files__head { grid-template-columns: minmax(0, 1fr) 6.5rem 8rem 8.6rem; padding-inline: 0.75rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
  .files__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.6rem;
    align-items: center;
    border-radius: var(--radius-m);
    transition: background-color var(--dur-2);
    animation: rise-in var(--dur-3) var(--ease-out) both;
  }
  .file-row:hover, .file-row:focus-within { background: oklch(100% 0 0 / 0.05); }
  .file-row__main { min-inline-size: 0; padding: 0.55rem 0.75rem; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: var(--radius-m); }
  .file-row__main { grid-template-columns: auto minmax(0, 1fr) 6.5rem 8rem; }
  .file-row__name { display: grid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .file-row__name small { font-size: var(--fs-xs); font-weight: 400; }
  .file-row__size, .file-row__date { font-size: var(--fs-xs); white-space: nowrap; }
  .file-row__tools { display: flex; justify-content: flex-end; gap: 2px; padding-inline-end: 0.4rem; opacity: 0.35; transition: opacity var(--dur-2); }
  .file-row:hover .file-row__tools, .file-row:focus-within .file-row__tools { opacity: 1; }
  .file-row--up .file-row__main { grid-template-columns: auto 1fr; }

  .file-icon { --k: 230; display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: var(--radius-s); color: oklch(84% 0.13 var(--k)); background: oklch(80% 0.13 var(--k) / 0.13); margin-inline-end: 0.15rem; }
  .file-icon--folder { --k: 85; }
  .file-icon--image { --k: 330; }
  .file-icon--text { --k: 200; }
  .file-icon--pdf { --k: 25; }
  .file-icon--archive { --k: 55; }
  .file-icon--audio { --k: 290; }
  .file-icon--video { --k: 150; }
  .file-icon--other { --k: 250; }

  .files__drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--s-4);
    border: 1.5px dashed var(--border-strong, oklch(100% 0 0 / 0.18));
    border-radius: var(--radius-l);
    color: var(--text-dim);
    font-size: var(--fs-s);
    text-align: center;
    transition: border-color var(--dur-2), background-color var(--dur-2), color var(--dur-2);
  }
  .files__drop:hover, .files__drop:focus-within { border-color: var(--accent); color: var(--text); background: color-mix(in oklch, var(--accent) 8%, transparent); }
  .files__drop--big { flex-direction: column; gap: var(--s-2); padding: clamp(2.5rem, 8vh, 5rem) var(--s-4); }
  .files__drop-art { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; margin-block-end: var(--s-2); border-radius: 50%; color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); box-shadow: 0 0 40px -6px var(--accent); animation: float 4s var(--ease-in-out) infinite alternate; }
  @keyframes float { to { translate: 0 calc(-6px * var(--m)); } }

  .files__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); }
  .files__foot span { display: inline-flex; align-items: center; gap: 0.35rem; }

  .file-editor {
    align-self: stretch;
    justify-self: stretch;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: min(100%, 40rem);
    min-block-size: 50vh;
    padding: var(--s-4);
    border-radius: var(--radius-m);
    border: 1px solid var(--border);
    background: oklch(0% 0 0 / 0.3);
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.55;
    resize: vertical;
    tab-size: 4;
  }
  .file-editor:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .file-preview { display: block; max-inline-size: 100%; max-block-size: 70vh; margin-inline: auto; border-radius: var(--radius-m); object-fit: contain; background: repeating-conic-gradient(oklch(100% 0 0 / 0.05) 0 25%, transparent 0 50%) 0 0 / 20px 20px; }

  .move-list { display: grid; gap: 2px; max-block-size: 50vh; overflow: auto; margin: 0; padding: 0; list-style: none; }
  .move-list__item { display: flex; align-items: center; gap: 0.5rem; inline-size: 100%; padding: 0.5rem 0.7rem 0.5rem calc(0.7rem + var(--depth, 0) * 1.2rem); border: 0; border-radius: var(--radius-s); background: none; color: var(--text-dim); font: inherit; text-align: start; cursor: pointer; }
  .move-list__item:hover:not(:disabled) { color: var(--text); background: oklch(100% 0 0 / 0.06); }
  .move-list__item.is-active { color: var(--text); background: color-mix(in oklch, var(--accent) 18%, transparent); }
  .move-list__item:disabled { opacity: 0.35; cursor: not-allowed; }

  @media (max-width: 720px) {
    .files__head { display: none; }
    .file-row__main { grid-template-columns: auto minmax(0, 1fr) auto; }
    .file-row__date { display: none; }
    .file-row { grid-template-columns: minmax(0, 1fr) auto; }
    .file-row__tools { opacity: 1; }
    .files__search { inline-size: 100%; order: 5; }
  }
}

/* ---- Notes: Obsidian-style links, backlinks and graph */
@layer components {
  .prose a.wikilink { color: var(--accent); text-decoration: none; border-block-end: 1px solid color-mix(in oklch, var(--accent) 40%, transparent); padding-inline: 0.1em; border-radius: 3px; transition: background-color var(--dur-2), border-color var(--dur-2); }
  .prose a.wikilink::before { content: "[["; opacity: 0.35; font-size: 0.8em; }
  .prose a.wikilink::after { content: "]]"; opacity: 0.35; font-size: 0.8em; }
  .prose a.wikilink:hover { background: color-mix(in oklch, var(--accent) 16%, transparent); border-color: var(--accent); }
  .prose a.wikilink--new { color: var(--text-faint); border-block-end-style: dashed; border-color: var(--text-faint); }
  .prose a.wikilink--new:hover { color: var(--text); }

  .note-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--border); }
  .note-links__col { display: grid; align-content: start; gap: var(--s-2); min-inline-size: 0; }
  .note-links__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
  .note-links__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .backlink { display: grid; gap: 0.1rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-s); background: oklch(100% 0 0 / 0.03); border: 1px solid var(--border); transition: border-color var(--dur-2), background-color var(--dur-2), translate var(--dur-3) var(--ease-spring); animation: rise-in var(--dur-3) var(--ease-out) both; }
  .backlink:hover { border-color: color-mix(in oklch, var(--accent) 50%, transparent); background: color-mix(in oklch, var(--accent) 8%, transparent); translate: calc(3px * var(--m)) 0; }
  .backlink strong { font-size: var(--fs-s); display: flex; align-items: center; gap: 0.35rem; }
  .backlink span { font-size: var(--fs-xs); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-links__empty { font-size: var(--fs-xs); color: var(--text-faint); }

  .graph { position: relative; inline-size: 100%; border-radius: var(--radius-l); overflow: hidden; background: radial-gradient(80% 90% at 50% 45%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 70%), oklch(0% 0 0 / 0.22); border: 1px solid var(--border); }
  .graph::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(oklch(100% 0 0 / 0.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
  .graph svg { position: relative; display: block; inline-size: 100%; block-size: auto; }
  .graph--compact svg { max-block-size: 15rem; }
  .graph__nodes { animation: graph-breathe 14s var(--ease-in-out) infinite alternate; transform-origin: 50% 50%; transform-box: fill-box; }
  @keyframes graph-breathe { to { scale: calc(1 + 0.012 * var(--m)); } }

  .gedge { vector-effect: non-scaling-stroke; stroke: oklch(100% 0 0 / 0.22); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke var(--dur-2), opacity var(--dur-2), stroke-width var(--dur-2); animation: edge-draw 900ms var(--ease-out) calc(300ms + min(var(--k), 60) * 18ms) forwards; }
  @keyframes edge-draw { to { stroke-dashoffset: 0; } }

  .gnode { --c: oklch(80% 0.13 var(--node-hue, var(--hue))); color: var(--c); cursor: pointer; transition: opacity var(--dur-2); animation: node-pop 600ms var(--ease-spring) calc(min(var(--i), 80) * 14ms) both; transform-box: fill-box; transform-origin: center; }
  @keyframes node-pop { from { opacity: 0; scale: calc(1 - 0.8 * var(--m)); } }
  .gnode__dot { fill: var(--c); stroke: color-mix(in oklch, var(--c) 40%, black); stroke-width: 1.5; filter: drop-shadow(0 0 6px color-mix(in oklch, var(--c) 70%, transparent)); transition: r var(--dur-2), filter var(--dur-2); }
  .gnode.is-orphan .gnode__dot { fill: color-mix(in oklch, var(--c) 45%, oklch(40% 0 0)); filter: none; }
  .gnode__label { fill: var(--text-dim); font-family: var(--font-body); font-size: 15px; font-weight: 500; paint-order: stroke; stroke: oklch(0% 0 0 / 0.65); stroke-width: 3px; opacity: 0; pointer-events: none; transition: opacity var(--dur-2), fill var(--dur-2); }
  .graph--compact .gnode__label { font-size: 30px; stroke-width: 5px; }
  .gnode.has-label .gnode__label { opacity: 0.85; }
  .gnode:hover .gnode__label, .gnode:focus-visible .gnode__label { opacity: 1; fill: var(--text); }
  .gnode:hover .gnode__dot, .gnode:focus-visible .gnode__dot { filter: drop-shadow(0 0 12px var(--c)) brightness(1.25); }
  .gnode:focus-visible { outline: none; }
  .gnode.is-focus { --c: var(--accent); }
  .gnode.is-focus .gnode__label { opacity: 1; fill: var(--text); font-weight: 700; }
  .gnode__halo { animation: halo 2.6s var(--ease-in-out) infinite alternate; transform-box: fill-box; transform-origin: center; }
  @keyframes halo { from { opacity: 0.5; scale: 0.8; } to { opacity: 1; scale: calc(1 + 0.25 * var(--m)); } }

  /* Hover: fade everything, then the per-node rules (generated) light up its links and neighbours. */
  .graph:has(.gnode:hover) .gnode { opacity: 0.22; }
  .graph:has(.gnode:hover) .gedge { opacity: 0.12; }
  .graph:has(.gnode:hover) .gnode:hover { opacity: 1; }
  .graph .gnode[style], .graph .gedge { --lit: 0; }
  .graph:has(.gnode:hover) .gedge:is([class]) { stroke-width: calc(1.2 + var(--lit, 0) * 1.3); stroke: color-mix(in oklch, var(--accent) calc(var(--lit, 0) * 100%), oklch(100% 0 0 / 0.22)); }
  .graph:has(.gnode:hover) .gnode:is([class]) .gnode__label { opacity: calc(var(--lit, 0)); }
  .graph:has(.gnode:hover) .gnode:is([class]):hover .gnode__label { opacity: 1; }

  .gnode.is-dim { opacity: 0.18; }
  .gnode.is-match .gnode__dot { filter: drop-shadow(0 0 14px var(--c)); }
  .gnode.is-match .gnode__label { opacity: 1; fill: var(--text); }

  .graph-page { display: grid; gap: var(--s-4); }
  .graph-page__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .graph-page__stats { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
  .graph-page .graph svg { min-block-size: 60vh; }

  .link-picker { display: grid; gap: 2px; max-block-size: 50vh; overflow: auto; margin: 0; padding: 0; list-style: none; }
  .link-picker button { display: grid; inline-size: 100%; gap: 0.1rem; padding: 0.55rem 0.7rem; border: 0; border-radius: var(--radius-s); background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
  .link-picker button:hover { background: color-mix(in oklch, var(--accent) 12%, transparent); }
  .link-picker small { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  @media (max-width: 900px) { .note-links { grid-template-columns: 1fr; } }
}

/* ---- Share links (owner side + public page) */
@layer components {
  .share-url { display: flex; gap: var(--s-2); align-items: center; }
  .share-url__input { flex: 1; min-inline-size: 0; padding: 0.6rem 0.75rem; border-radius: var(--radius-s); border: 1px solid var(--border); background: oklch(0% 0 0 / 0.3); color: var(--text); font-size: 0.78rem; }
  .share-admin { display: grid; gap: 4px; margin: 0 0 var(--s-3); padding: 0; list-style: none; }
  .share-admin__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 0.55rem 0.7rem; border-radius: var(--radius-m); background: oklch(100% 0 0 / 0.03); border: 1px solid var(--border); }
  .share-admin__row.is-off { opacity: 0.5; }
  .share-admin__text { display: grid; min-inline-size: 0; }
  .share-admin__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .share-admin__text small { color: var(--text-faint); font-size: var(--fs-xs); }

  .share-page { position: relative; z-index: 1; display: grid; place-items: center; min-block-size: 100dvh; padding: var(--s-5) var(--s-4); }
  .share-card { display: grid; gap: var(--s-4); inline-size: min(34rem, 100%); padding: clamp(var(--s-5), 4vw, var(--s-7)); border-radius: var(--radius-xl); animation: modal-in var(--dur-4) var(--ease-spring) both; }
  .share-brand { display: inline-flex; align-items: center; gap: 0.5rem; inline-size: fit-content; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
  .share-brand .brand-orb { inline-size: 1.4rem; block-size: 1.4rem; }
  .share-head { display: grid; gap: var(--s-2); justify-items: start; }
  .share-icon { display: grid; place-items: center; inline-size: 3.4rem; block-size: 3.4rem; border-radius: var(--radius-m); color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); box-shadow: 0 0 40px -8px var(--accent); }
  .share-icon--gone { color: oklch(75% 0.15 25); background: oklch(60% 0.15 25 / 0.14); box-shadow: none; }
  .share-title { overflow-wrap: anywhere; }
  .share-list { display: grid; gap: 4px; max-block-size: 50vh; overflow: auto; margin: 0; padding: 0; list-style: none; }
  .share-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); padding: 0.45rem 0.55rem; border-radius: var(--radius-m); transition: background-color var(--dur-2); }
  .share-file:hover { background: oklch(100% 0 0 / 0.05); }
  .share-file__thumb { inline-size: 2.2rem; block-size: 2.2rem; border-radius: var(--radius-s); object-fit: cover; }
  .share-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-s); }
  .share-file__size { font-size: var(--fs-xs); }
  .share-foot { display: flex; align-items: center; gap: 0.4rem; }
}

/* ---- Music: search, library, stats and the floating player */
@layer components {
  .music { display: grid; gap: var(--s-5); padding-block-end: 10rem; }
  .music-search { display: flex; align-items: center; gap: var(--s-3); padding: 0.45rem 0.45rem 0.45rem 1.1rem; border-radius: var(--radius-pill); background: var(--glass-bg); border: 1px solid var(--border-strong, var(--border)); box-shadow: var(--highlight), 0 20px 60px -30px var(--accent); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); transition: border-color var(--dur-2), box-shadow var(--dur-3); }
  .music-search:focus-within { border-color: var(--accent); box-shadow: var(--highlight), 0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent), 0 20px 60px -20px var(--accent); }
  .music-search__icon { color: var(--text-faint); flex: none; }
  .music-search__input { flex: 1; min-inline-size: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 1.05rem; padding-block: 0.5rem; }
  .music-search__input:focus { outline: none; }
  .music-tabs { inline-size: fit-content; }
  .music-tabs .segmented__item { display: inline-flex; align-items: center; gap: 0.4rem; }
  .music-section { display: grid; gap: var(--s-3); }
  .music-h { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
  .music-empty { display: grid; justify-items: center; gap: var(--s-2); padding: clamp(2rem, 6vh, 4rem) var(--s-5); border-radius: var(--radius-xl); text-align: center; }
  .music-empty__art { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; margin-block-end: var(--s-2); border-radius: 50%; color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); box-shadow: 0 0 50px -6px var(--accent); animation: float 4s var(--ease-in-out) infinite alternate; }
  .provider-setup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); border-radius: var(--radius-l); font-size: var(--fs-s); color: var(--text-dim); }
  .provider-setup p { max-inline-size: 60ch; }

  .src { display: inline-block; padding: 0.08rem 0.4rem; border-radius: 5px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; color: var(--sc); background: color-mix(in oklch, var(--sc) 15%, transparent); }
  .src, .src-dot { --sc: oklch(75% 0.14 290); }
  .src--spotify, .src-dot--spotify { --sc: oklch(76% 0.19 150); }
  .src--youtube, .src-dot--youtube { --sc: oklch(68% 0.22 27); }
  .src--soundcloud, .src-dot--soundcloud { --sc: oklch(74% 0.18 52); }
  .src-dot { display: inline-block; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--sc); box-shadow: 0 0 10px var(--sc); }

  .track-list { display: grid; gap: 2px; }
  .track-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.5rem; grid-auto-flow: column; grid-auto-columns: auto; align-items: center; gap: var(--s-3); padding: 0.3rem 0.5rem 0.3rem 0.3rem; border-radius: var(--radius-m); transition: background-color var(--dur-2); animation: rise-in var(--dur-3) var(--ease-out) both; }
  .track-row:hover, .track-row.is-playing { background: oklch(100% 0 0 / 0.05); }
  .track-row.is-playing { box-shadow: inset 2px 0 0 var(--accent); }
  .track-row__play { display: flex; align-items: center; gap: var(--s-3); min-inline-size: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
  .track-row__text { display: grid; min-inline-size: 0; }
  .track-row__text strong, .track-row__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .track-row__text small { color: var(--text-faint); font-size: var(--fs-xs); }
  .track-row__meta { font-size: var(--fs-xs); text-align: end; }
  .track-art { position: relative; display: grid; place-items: center; flex: none; inline-size: 2.9rem; block-size: 2.9rem; border-radius: 8px; overflow: hidden; color: var(--text-faint); background: oklch(100% 0 0 / 0.06) var(--art, none) center / cover no-repeat; }
  .track-art__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: oklch(0% 0 0 / 0.5); opacity: 0; transition: opacity var(--dur-2); }
  .track-row:hover .track-art__play, .track-row.is-playing .track-art__play { opacity: 1; }

  .track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--s-4); }
  .track-card { display: grid; gap: 0.25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; animation: rise-in var(--dur-3) var(--ease-out) both; }
  .track-card strong, .track-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .track-card small { color: var(--text-faint); font-size: var(--fs-xs); }
  .track-card__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-block-end: 0.35rem; border-radius: var(--radius-l); overflow: hidden; color: var(--text-faint); background: oklch(100% 0 0 / 0.05) var(--art, none) center / cover no-repeat; box-shadow: 0 20px 40px -24px #000; transition: translate var(--dur-3) var(--ease-spring), box-shadow var(--dur-3); }
  .track-card:hover .track-card__art { translate: 0 calc(-4px * var(--m)); box-shadow: 0 26px 50px -20px var(--accent); }
  .track-card__play { position: absolute; inset-block-end: 0.6rem; inset-inline-end: 0.6rem; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; color: #06140b; background: oklch(80% 0.18 150); box-shadow: 0 10px 24px -8px #000; opacity: 0; translate: 0 6px; transition: opacity var(--dur-2), translate var(--dur-3) var(--ease-spring); }
  .track-card:hover .track-card__play, .track-card.is-playing .track-card__play { opacity: 1; translate: 0 0; }
  .track-card__src { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

  /* Stats */
  .stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
  .stat-tile { display: grid; gap: 0.15rem; padding: var(--s-4); border-radius: var(--radius-l); animation: rise-in var(--dur-3) var(--ease-out) both; }
  .stat-tile span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
  .stat-tile strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; background: linear-gradient(120deg, var(--text), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .stat-tile strong em { font-style: normal; font-size: 0.5em; margin-inline-start: 0.1em; }
  .stat-tile small { color: var(--text-faint); font-size: var(--fs-xs); }
  .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .stats-card { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-l); }
  .stats-card--wide { grid-column: 1 / -1; }
  .bars { display: flex; align-items: flex-end; gap: 4px; block-size: 9rem; }
  .bars__bar { flex: 1; min-block-size: 3px; block-size: var(--v); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--accent), color-mix(in oklch, var(--accent-2) 60%, transparent)); box-shadow: 0 0 14px -4px var(--accent); transform-origin: bottom; animation: bar-grow 700ms var(--ease-spring) calc(var(--i) * 18ms) both; }
  .bars__bar.is-today { background: linear-gradient(180deg, #fff, var(--accent)); }
  @keyframes bar-grow { from { scale: 1 calc(1 - var(--m)); opacity: 0; } }
  .bars__axis { display: flex; justify-content: space-between; }
  .toplist { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
  .toplist__row { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: 0.4rem 0.6rem; border-radius: var(--radius-s); overflow: hidden; isolation: isolate; animation: rise-in var(--dur-3) var(--ease-out) calc(var(--i) * 40ms) both; }
  .toplist__row::before { content: ""; position: absolute; inset: 0; z-index: -1; inline-size: var(--w); border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 22%, transparent), color-mix(in oklch, var(--accent) 6%, transparent)); transform-origin: left; animation: bar-grow-x 900ms var(--ease-out) calc(var(--i) * 50ms) both; }
  @keyframes bar-grow-x { from { scale: calc(1 - var(--m)) 1; } }
  .toplist__rank { color: var(--text-faint); font-size: var(--fs-xs); }
  .toplist__main { display: grid; min-inline-size: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
  .toplist__main strong, .toplist__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toplist__main small { color: var(--text-faint); font-size: var(--fs-xs); }
  .toplist__count { font-size: var(--fs-s); color: var(--text-dim); }
  .hours { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
  .hours__cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; font-size: 0.58rem; color: var(--text-faint); background: color-mix(in oklch, var(--accent) calc(6% + var(--v) * 80%), oklch(100% 0 0 / 0.03)); box-shadow: 0 0 calc(var(--v) * 18px) color-mix(in oklch, var(--accent) calc(var(--v) * 60%), transparent); }
  .hours__cell b { font-weight: 500; opacity: 0.8; }
  .sources { display: flex; align-items: center; gap: var(--s-5); }
  .sources__ring { flex: none; inline-size: 7rem; block-size: 7rem; border-radius: 50%; background: var(--ring, oklch(100% 0 0 / 0.1)); -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 53%); mask: radial-gradient(circle, transparent 0 52%, #000 53%); animation: spin-in 900ms var(--ease-spring) both; }
  @keyframes spin-in { from { rotate: calc(-90deg * var(--m)); opacity: 0; } }
  .sources__legend { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); }
  .sources__legend li { display: flex; align-items: center; gap: 0.5rem; }

  /* Floating player */
  .player {
    position: fixed;
    inset-inline-end: clamp(0.75rem, 2vw, 1.5rem);
    inset-block-end: clamp(0.75rem, 2vw, 1.5rem);
    z-index: var(--z-overlay, 60);
    display: grid;
    gap: 0.55rem;
    inline-size: min(24rem, calc(100vw - 1.5rem));
    padding: 0.6rem;
    border-radius: var(--radius-l);
    background: color-mix(in oklch, var(--glass-solid) 92%, transparent);
    border: 1px solid var(--border-strong, var(--border));
    box-shadow: var(--highlight), 0 30px 80px -24px #000, 0 0 60px -20px var(--accent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    animation: modal-in var(--dur-3) var(--ease-spring) both;
  }
  .player__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; }
  .player__art { position: relative; display: grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem; border-radius: 9px; overflow: hidden; color: var(--text-faint); background: oklch(100% 0 0 / 0.06) var(--art, none) center / cover no-repeat; }
  .player__eq { position: absolute; inset-inline: 0; inset-block-end: 3px; display: flex; justify-content: center; align-items: flex-end; gap: 2px; block-size: 0.8rem; color: #fff; filter: drop-shadow(0 0 3px #000); }
  .player__eq i { inline-size: 3px; block-size: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: eq 760ms var(--ease-in-out) infinite alternate; }
  .player__eq i:nth-child(2) { animation-duration: 520ms; animation-delay: -150ms; }
  .player__eq i:nth-child(3) { animation-duration: 640ms; animation-delay: -330ms; }
  @keyframes eq { from { scale: 1 calc(1 - 0.75 * var(--m)); } to { scale: 1 1; } }
  .player__text { display: grid; min-inline-size: 0; line-height: 1.25; }
  .player__text strong, .player__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .player__text small { color: var(--text-faint); font-size: var(--fs-xs); }
  .player__tools { display: flex; gap: 1px; }
  .player__tools .is-on { color: oklch(70% 0.2 10); }
  .player__body { display: none; }
  .player.is-expanded .player__body { display: block; }
  .player__embed { display: block; inline-size: 100%; border: 0; border-radius: 12px; background: #000; }
  .player__embed--spotify { block-size: 152px; }
  .player__embed--youtube { aspect-ratio: 16 / 9; block-size: auto; }
  .player__embed--soundcloud { block-size: 120px; }
  .player__audio { display: block; inline-size: 100%; block-size: 2.6rem; color-scheme: dark; }
  .player__foot { display: none; justify-content: space-between; gap: var(--s-2); padding-inline: 0.2rem; }
  .player.is-expanded .player__foot { display: flex; }
  .player__foot a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.2rem; }
  .player__foot a:hover, .player__close:hover { color: var(--text); }
  .player__close { border: 0; background: none; cursor: pointer; font: inherit; }

  @media (max-width: 900px) {
    .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: 1fr; }
    .track-row { grid-template-columns: minmax(0, 1fr) auto; }
    .track-row__meta { display: none; }
  }
}

@layer components {
  .share-preview { display: grid; gap: 0.35rem; margin: 0; }
  .share-preview__text { max-block-size: 22rem; overflow: auto; margin: 0; padding: var(--s-4); border-radius: var(--radius-m); border: 1px solid var(--border); background: oklch(0% 0 0 / 0.35); color: var(--text); font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
  .share-preview-img { display: block; max-inline-size: 100%; max-block-size: 55vh; margin-inline: auto; border-radius: var(--radius-m); object-fit: contain; box-shadow: 0 20px 50px -20px #000; }
}

/* ---- Song clock, player controls, queue, live pill */
@layer components {
  /* Progress + "1:23 / 3:45" tick on CSS alone: --t counts seconds from --pos to --dur. */
  .tclock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; font-size: 0.7rem; color: var(--text-faint);
            animation: tclock-t calc(var(--dur) * 1s) linear both; animation-delay: calc(var(--pos) * -1s); }
  @keyframes tclock-t { from { --t: 0; } to { --t: var(--dur); } }
  .tclock__now { --mm: calc((var(--t) - 30) / 60); --ss: calc(var(--t) - var(--mm) * 60); counter-reset: mm var(--mm) ss var(--ss); min-inline-size: 2.4em; text-align: end; }
  .tclock__now::before { content: counter(mm) ":" counter(ss, decimal-leading-zero); }
  .tclock__bar { position: relative; block-size: 4px; border-radius: 99px; background: oklch(100% 0 0 / 0.12); overflow: hidden; }
  .tclock__bar > i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 70%, white), var(--accent));
                     transform-origin: left; animation: tclock-bar calc(var(--dur) * 1s) linear both; animation-delay: calc(var(--pos) * -1s); box-shadow: 0 0 10px var(--accent); }
  @keyframes tclock-bar { from { scale: 0 1; } to { scale: 1 1; } }
  .tclock__bar--unknown { grid-column: 1 / -1; }
  .tclock__bar--unknown > i { inset-inline-end: auto; inline-size: 30%; animation: tclock-wander 2.4s var(--ease-in-out) infinite alternate; }
  @keyframes tclock-wander { from { translate: -100% 0; } to { translate: 330% 0; } }
  .tclock.is-paused, .tclock.is-paused .tclock__bar > i { animation-play-state: paused; }
  .tclock.is-seekable .tclock__bar { block-size: 6px; overflow: visible; cursor: pointer; transition: block-size var(--dur-2); }
  .tclock.is-seekable:hover .tclock__bar { block-size: 8px; }
  .tclock__bar input { position: absolute; inset: -8px 0; inline-size: 100%; block-size: calc(100% + 16px); margin: 0; opacity: 0; cursor: pointer; }

  .player__controls { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
  .player__pp { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border: 0; border-radius: 50%; color: var(--bg, #000); background: var(--text);
                box-shadow: 0 8px 24px -8px var(--accent); cursor: pointer; transition: scale var(--dur-2) var(--ease-spring); }
  .player__pp:hover { scale: 1.06; }
  .player__pp:active { scale: 0.94; }
  .player__pp .icon { fill: currentColor; }
  .icon-btn.is-on-accent { color: var(--accent); }
  .player__frame { position: relative; }
  /* The Hub runs the clock for YouTube: YouTube's own pause/seek would quietly break the sync. */
  .player__frame.is-locked::after { content: ""; position: absolute; inset: 0; }
  .player__paused { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 12px; background: #000 var(--art, none) center / cover no-repeat; overflow: hidden; }
  .player__paused span { padding: 0.3rem 0.8rem; border-radius: 99px; font-size: 0.75rem; font-weight: 600; background: oklch(0% 0 0 / 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .player.player--spotify .player__paused { aspect-ratio: auto; block-size: 152px; }

  .player__queue { display: grid; gap: 0.4rem; max-block-size: 15rem; overflow: auto; padding: 0.5rem; border-radius: 12px; background: oklch(0% 0 0 / 0.22); }
  .player__queue p .icon { display: inline-block; vertical-align: -2px; }
  .player__queue-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; }
  .link-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0; border: 0; background: none; color: var(--text-dim); font: inherit; cursor: pointer; }
  .link-btn:hover { color: var(--text); }
  .player__queue-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .player__queue-list li { display: flex; align-items: center; gap: 0.25rem; }
  .player__qitem { display: flex; flex: 1; align-items: center; gap: 0.5rem; min-inline-size: 0; padding: 0.25rem; border: 0; border-radius: 8px; color: inherit; background: none; font: inherit; text-align: start; cursor: pointer; }
  .player__qitem:hover { background: oklch(100% 0 0 / 0.06); }
  .player__qart { flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 6px; background: oklch(100% 0 0 / 0.08) var(--art, none) center / cover no-repeat; }

  .live-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: 99px; color: var(--text-dim); background: none; font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
  .live-pill.is-live { color: oklch(86% 0.15 150); border-color: oklch(74% 0.19 150 / 0.4); background: oklch(74% 0.19 150 / 0.12); }
  .live-pill.is-live .icon { animation: live-blink 2s var(--ease-in-out) infinite; }
  @keyframes live-blink { 50% { opacity: 0.45; } }
  .live-pill__count { display: inline-flex; align-items: center; gap: 0.2rem; padding-inline-start: 0.35rem; border-inline-start: 1px solid currentColor; }
  .player__foot { flex-wrap: wrap; align-items: center; }
  .player.is-paused .player__art { filter: saturate(0.6); }
}