/* ─────────────────────────────────────────────────────────────────────────
   crawl · 2026 Redesign
   - OKLCH color tokens, perceptually uniform accents
   - Layered surfaces (bg-0..bg-3) for depth without harsh borders
   - Glassmorphism 2.0 only on floating layers (sheets, fab, toasts)
   - Container queries on cards, :has() for state-driven styling
   - View-Transitions friendly
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg-0: #07101f;
  --bg-1: #0e1828;
  --bg-2: #15223a;
  --bg-3: #1d2d4d;

  /* Borders (mixed, never harsh white) */
  --border:        color-mix(in oklch, white 7%, transparent);
  --border-strong: color-mix(in oklch, white 14%, transparent);

  /* Text */
  --text-1: #ecf2fb;
  --text-2: #a8b6d0;
  --text-3: #6e7c98;

  /* Brand: cyan (monitoring vibe) */
  --accent:        oklch(72% 0.16 210);
  --accent-strong: oklch(80% 0.20 210);
  --accent-soft:   color-mix(in oklch, var(--accent) 18%, transparent);
  --accent-glow:   0 0 32px color-mix(in oklch, var(--accent) 40%, transparent);

  /* Semantic */
  --success: oklch(75% 0.19 150);
  --warning: oklch(80% 0.17  85);
  --danger:  oklch(68% 0.22  20);
  --info:    oklch(70% 0.17 270);

  /* Layout */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --topbar-h: 56px;
  --bottom-nav-h: 64px;
  --shadow-lift:
    0 1px 0 inset color-mix(in oklch, white 4%, transparent),
    0 8px 24px -8px rgba(0, 0, 0, .55),
    0 24px 48px -16px rgba(0, 0, 0, .45);
  --shadow-card: 0 1px 0 inset color-mix(in oklch, white 3%, transparent),
                 0 2px 8px rgba(0, 0, 0, .25);

  /* Easing */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in:  cubic-bezier(.4, 0, .6, 1);
}

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

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-0);
  color: var(--text-1);
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  font-feature-settings: "cv11", "ss01";
}

body {
  padding-bottom: env(safe-area-inset-bottom);
  /* Subtle ambient gradient — gives depth without busy backgrounds */
  background:
    radial-gradient(1200px 600px at 20% -10%,
      color-mix(in oklch, var(--accent) 8%, transparent) 0%, transparent 70%),
    radial-gradient(900px 500px at 90% 110%,
      color-mix(in oklch, var(--info) 6%, transparent) 0%, transparent 70%),
    var(--bg-0);
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

::selection { background: color-mix(in oklch, var(--accent) 50%, transparent); color: white; }

code, kbd {
  background: color-mix(in oklch, black 50%, transparent);
  padding: 1px .4em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .88em;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  padding: .6em 1em;
  border-radius: var(--radius-sm);
  min-height: 40px;
  transition: background .15s var(--ease-out), transform .08s, border-color .15s;
}
button:hover { background: var(--bg-3); }
button:active { transform: scale(.97); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primary {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 90%, white 4%),
    color-mix(in oklch, var(--accent) 70%, black 12%));
  border-color: color-mix(in oklch, var(--accent) 60%, black);
  color: #00131b;
  font-weight: 600;
  box-shadow: 0 0 0 0 transparent;
}
button.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px -6px color-mix(in oklch, var(--accent) 50%, transparent);
}
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover { background: color-mix(in oklch, white 5%, transparent); }
button.danger { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 30%, transparent); }
button.danger:hover { background: color-mix(in oklch, var(--danger) 12%, transparent); }
button.disabled-look {
  opacity: .55; cursor: not-allowed; filter: grayscale(.4);
  background: var(--bg-2); color: var(--text-2);
}

input, select, textarea {
  font: inherit;
  background: var(--bg-1);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .65em .8em;
  width: 100%;
  transition: border-color .15s var(--ease-out), background .15s;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
input[type=checkbox], input[type=radio] {
  width: auto; min-width: 18px; min-height: 18px;
  margin: 0; accent-color: var(--accent);
}
label { display: block; margin-bottom: .9rem; }
label > span { display: block; font-size: .82rem; color: var(--text-2); margin-bottom: .35em; font-weight: 500; }
label small { color: var(--text-3); font-size: .8em; display: block; margin-top: .25em; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8em 1em; margin: 0 0 .9em; }
legend { padding: 0 .4em; color: var(--text-2); font-size: .82rem; }

.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
.error {
  color: var(--danger);
  background: color-mix(in oklch, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent);
  padding: .6em .8em;
  border-radius: var(--radius-sm);
  margin-bottom: .8em;
  font-size: .9rem;
}

/* ── Login ────────────────────────────────────────────────────────────── */
.login-view {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.login-card {
  width: 100%; max-width: 380px;
  background: color-mix(in oklch, var(--bg-1) 80%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lift);
}
.login-head { text-align: center; margin-bottom: 1.4rem; }
.login-head img {
  margin-bottom: .75rem;
  filter: drop-shadow(0 0 24px color-mix(in oklch, var(--accent) 50%, transparent));
}
.login-head h1 { margin: 0; font-size: 1.8rem; letter-spacing: -0.02em; font-weight: 700; }
.login-head p { margin: .3rem 0 0; color: var(--text-2); font-size: .92rem; }
.login-card button[type=submit] { width: 100%; margin-top: .25rem; }

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .6rem .9rem;
  padding-top: calc(.6rem + env(safe-area-inset-top));
  background: color-mix(in oklch, var(--bg-0) 75%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
}
.brand { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.brand img { filter: drop-shadow(0 0 10px color-mix(in oklch, var(--accent) 40%, transparent)); }
.topbar-status {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--text-2);
}
.topbar-actions { display: flex; gap: .3rem; }
.topbar-actions button { padding: .45em .65em; min-height: 36px; }

/* ── Main container ────────────────────────────────────────────────────── */
.container {
  max-width: 920px; margin: 0 auto;
  padding: 1rem 1rem calc(1rem + var(--bottom-nav-h) + env(safe-area-inset-bottom));
}

.banner {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: .8em 1em;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: .9rem;
  display: flex; flex-direction: column; gap: .2em;
}
.banner.warn { border-left-color: var(--warning); }
.banner strong { color: var(--text-1); }

/* ── Filter bar ────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; gap: .35rem; flex-wrap: wrap;
  padding: .5rem; margin-bottom: 1rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top) + .5rem);
  z-index: 4;
}
.filter-bar .chip {
  background: transparent;
  border: 1px solid transparent;
  padding: .35em .8em;
  border-radius: 999px;
  font-size: .85rem;
  color: var(--text-2);
  min-height: 32px;
}
.filter-bar .chip[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.filter-bar .spacer { flex: 1; }
.filter-bar .bulk-actions { display: flex; gap: .3rem; }

/* ── Crawl list ────────────────────────────────────────────────────────── */
.crawls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: .9rem;
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

.crawl-card {
  container-type: inline-size;
  container-name: card;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  position: relative;
  isolation: isolate;
  transition: transform .2s var(--ease-out), border-color .2s, background .2s;
  will-change: transform;
  view-transition-name: var(--vt, none);
}
.crawl-card:hover {
  transform: translate3d(0, -2px, 0);
  border-color: var(--border-strong);
  background: color-mix(in oklch, var(--bg-1) 80%, var(--bg-2));
}
.crawl-card.inactive { opacity: .6; }
.crawl-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px -4px color-mix(in oklch, var(--accent) 30%, transparent);
}

/* :has() state styling — no JS needed */
.crawl-card:has([data-status="error"]) {
  border-color: color-mix(in oklch, var(--danger) 30%, transparent);
}
.crawl-card:has([data-status="running"])::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  z-index: -1;
  background: conic-gradient(from var(--angle),
    transparent 60%, var(--accent) 80%, transparent);
  animation: spin 2.6s linear infinite;
}
@keyframes spin { to { --angle: 360deg; } }

.crawl-card header {
  display: flex; align-items: flex-start; gap: .6em;
  margin-bottom: .5em;
}
.crawl-card header .title-block { flex: 1; min-width: 0; }
.crawl-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4em;
}
.crawl-card .url {
  display: block; word-break: break-all;
  color: var(--text-3); font-size: .82em; margin-top: .25em;
  text-decoration: none;
}
.crawl-card .url:hover { color: var(--accent-strong); }
.crawl-card .last-value {
  background: var(--bg-0);
  border: 1px solid var(--border);
  padding: .55em .75em;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .85em;
  word-break: break-word;
  margin-bottom: .55em;
  max-height: 88px;
  overflow: auto;
  scrollbar-width: thin;
}
.crawl-card .last-value.muted { color: var(--text-3); font-style: italic; font-family: inherit; }

.crawl-card .meta {
  display: flex; flex-wrap: wrap; gap: .35em .9em;
  color: var(--text-2); font-size: .8em;
  margin-bottom: .5em;
}
.crawl-card .actions { display: flex; gap: .35em; flex-wrap: wrap; }
.crawl-card .actions button {
  padding: .35em .7em;
  font-size: .85em;
  min-height: 36px;
  background: color-mix(in oklch, var(--bg-2) 70%, transparent);
}
.crawl-card .actions .primary-sub.sub-on {
  background: var(--accent);
  color: #00131b;
  font-weight: 600;
  border-color: color-mix(in oklch, var(--accent) 50%, black);
}

/* Container queries — compact cards in tight columns */
@container card (max-width: 280px) {
  .crawl-card .meta { display: none; }
  .crawl-card .actions button .label-long { display: none; }
}

/* Selection checkbox (bulk mode) */
.crawl-card .select-tick {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bg-0);
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
body.bulk-mode .crawl-card .select-tick { opacity: 1; pointer-events: auto; }
body.bulk-mode .crawl-card.selected .select-tick {
  background: var(--accent); border-color: var(--accent);
  color: #00131b;
}
body.bulk-mode .crawl-card { padding-right: 2.4rem; }

/* Status dot (animated pulse) */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--text-3);
}
.dot.ok       { background: var(--success); }
.dot.err      { background: var(--danger); }
.dot.running  { background: var(--success); animation: pulse-ring 1.6s var(--ease-in) infinite; }
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0    color-mix(in oklch, var(--success) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklch, var(--success)  0%, transparent); }
  100% { box-shadow: 0 0 0 0    color-mix(in oklch, var(--success)  0%, transparent); }
}

.badge {
  display: inline-block;
  padding: .15em .55em;
  border-radius: 999px;
  font-size: .68em; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  vertical-align: middle;
  background: color-mix(in oklch, white 6%, transparent);
  color: var(--text-2);
}
.badge.ok    { background: color-mix(in oklch, var(--success) 18%, transparent); color: var(--success); }
.badge.err   { background: color-mix(in oklch, var(--danger)  18%, transparent); color: var(--danger); }
.badge.warn  { background: color-mix(in oklch, var(--warning) 18%, transparent); color: var(--warning); }
.badge.info  { background: color-mix(in oklch, var(--accent)  18%, transparent); color: var(--accent-strong); }
.badge.muted { background: color-mix(in oklch, white 6%, transparent); color: var(--text-3); }

/* Sparkline */
.sparkline {
  display: inline-block;
  vertical-align: middle;
  width: 80px; height: 24px;
  margin-left: .5em;
}
.sparkline path { fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .fill { fill: var(--accent-soft); stroke: none; }

/* Empty state */
.empty {
  text-align: center; color: var(--text-2);
  padding: 4rem 1rem;
  display: grid; gap: .6em;
}
.empty strong { font-size: 1.1em; color: var(--text-1); }
.empty .hint { color: var(--text-3); font-size: .9em; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-1) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-card { height: 160px; }

/* ── Bottom navigation ─────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed; left: 0; right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  background: color-mix(in oklch, var(--bg-0) 80%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid var(--border);
  padding: 0 .5rem;
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
.bottom-nav button {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: .72rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: var(--bottom-nav-h);
  padding: 0;
  border-radius: 0;
}
.bottom-nav button .ico {
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .2s var(--ease-out);
}
.bottom-nav button:hover { background: transparent; }
.bottom-nav button[aria-current="page"] { color: var(--accent-strong); }
.bottom-nav button[aria-current="page"] .ico {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--accent) 50%, transparent));
}

/* ── FAB ───────────────────────────────────────────────────────────────── */
.fab {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + var(--bottom-nav-h) + env(safe-area-inset-bottom));
  z-index: 7;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #00131b;
  font-size: 1.6rem;
  font-weight: 700;
  border: none;
  display: grid; place-items: center;
  box-shadow:
    0 1px 0 inset color-mix(in oklch, white 20%, transparent),
    0 12px 24px -6px color-mix(in oklch, var(--accent) 50%, transparent),
    0 4px 12px rgba(0, 0, 0, .35);
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.fab:hover { transform: scale(1.05); }
.fab:active { transform: scale(.95); }

/* ── Sheet modal (bottom-sheet on mobile, centered on desktop) ─────────── */
.sheet {
  position: fixed; inset: 0;
  z-index: 50;
  display: grid;
  background: color-mix(in oklch, black 60%, transparent);
  backdrop-filter: blur(6px);
  padding: 0;
  align-items: end;
  justify-items: stretch;
  opacity: 1;
  transition: opacity .25s var(--ease-out);
}
.sheet[hidden] { display: none; }
.sheet.closing { opacity: 0; pointer-events: none; }
.sheet-card {
  background: var(--bg-1);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  padding: .5rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  transform: translateY(0);
  transition: transform .3s var(--ease-out);
  scrollbar-width: thin;
}
.sheet[hidden] .sheet-card,
.sheet.closing .sheet-card { transform: translateY(100%); }

@starting-style {
  .sheet:not([hidden]) { opacity: 0; }
  .sheet:not([hidden]) .sheet-card { transform: translateY(100%); }
}

@media (min-width: 720px) {
  .sheet { align-items: center; justify-items: center; padding: 1rem; }
  .sheet-card {
    border-radius: var(--radius-lg);
    border-bottom: 1px solid var(--border-strong);
    max-width: 580px; width: 100%;
    max-height: calc(100dvh - 2rem);
    padding-bottom: 1.4rem;
    transform: translateY(20px) scale(.98);
  }
  .sheet[hidden] .sheet-card,
  .sheet.closing .sheet-card { transform: translateY(20px) scale(.98); opacity: 0; }
  @starting-style {
    .sheet:not([hidden]) .sheet-card { transform: translateY(20px) scale(.98); }
  }
}

.sheet-handle {
  display: block;
  width: 40px; height: 4px;
  margin: .6rem auto 1rem;
  background: var(--border-strong);
  border-radius: 2px;
}
@media (min-width: 720px) {
  .sheet-handle { display: none; }
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
  position: sticky; top: 0;
  background: var(--bg-1);
  padding-bottom: .3rem;
}
.sheet-head h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.sheet-actions { display: flex; justify-content: flex-end; gap: .5em; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast-wrap {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottom-nav-h) + 1rem + env(safe-area-inset-bottom));
  z-index: 100;
  display: flex; flex-direction: column; gap: .5em;
  pointer-events: none;
  width: min(440px, calc(100vw - 2rem));
}
.toast {
  pointer-events: auto;
  background: color-mix(in oklch, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  color: var(--text-1);
  padding: .8em 1em;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  font-size: .92rem;
}
.toast-ok   { border-left-color: var(--success); }
.toast-warn { border-left-color: var(--warning); }
.toast-err  { border-left-color: var(--danger); }

/* ── Form: schedule / advanced / headers ───────────────────────────────── */
.schedule .radio {
  display: flex; align-items: center; gap: .55em;
  margin-bottom: .55em; flex-wrap: wrap;
}
.schedule .radio input[type=number],
.schedule .radio input[type=text],
.schedule .radio input:not([type]) {
  display: inline-block; width: auto;
}
label.row { display: flex; align-items: center; gap: .6em; }
details.advanced {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6em .9em;
  margin-bottom: .9em;
  background: var(--bg-0);
}
details.advanced summary {
  cursor: pointer; color: var(--text-2); font-size: .9em; padding: .2em 0;
  list-style: none;
}
details.advanced summary::before {
  content: '▸ '; color: var(--text-3); transition: transform .15s;
  display: inline-block;
}
details.advanced[open] summary::before { content: '▾ '; }
details.advanced[open] summary { margin-bottom: .8em; }

.headers-list { display: grid; gap: .5em; margin-bottom: .5em; }
.header-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr auto;
  gap: .4em; align-items: center;
}

.webhook-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: .4em; align-items: center;
  margin-bottom: .5em;
}
.webhook-row select { padding: .45em .55em; }

/* ── History view ──────────────────────────────────────────────────────── */
.history-row {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
  padding: .6em .85em;
  margin-bottom: .4em;
}
.history-row.err { border-left-color: var(--danger); }
.history-row.suppressed { opacity: .55; }
.history-meta { color: var(--text-3); font-size: .78em; margin-bottom: .25em; display: flex; gap: .8em; flex-wrap: wrap; }
.history-value {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .85em;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Diff viewer */
.diff-pane {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8em 1em;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .85em;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
  max-height: 50dvh;
  overflow-y: auto;
}
.diff-pane ins {
  background: color-mix(in oklch, var(--success) 18%, transparent);
  color: var(--success); text-decoration: none;
  padding: 0 2px; border-radius: 2px;
}
.diff-pane del {
  background: color-mix(in oklch, var(--danger) 16%, transparent);
  color: var(--danger); text-decoration: line-through;
  padding: 0 2px; border-radius: 2px;
}
.diff-toggle { display: flex; gap: .4em; margin-bottom: .8em; }

/* ── Settings sections ─────────────────────────────────────────────────── */
.settings-section { margin-bottom: 1.8em; }
.settings-section h3 {
  margin: 0 0 .7em;
  font-size: 1rem; font-weight: 600;
  display: flex; align-items: center; gap: .5em;
}
.users-list { display: grid; gap: .4em; margin-bottom: .8em; }
.user-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4em .8em;
  align-items: center;
  padding: .6em .85em;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.user-name { font-weight: 600; }
.user-actions {
  grid-column: 1 / -1;
  display: flex; gap: .4em; flex-wrap: wrap;
}
.user-actions button { padding: .35em .7em; font-size: .85em; min-height: 36px; }

.token-display {
  background: var(--bg-0);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: .8em 1em;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .85em;
  word-break: break-all;
  margin: .5em 0;
}

/* ── Scrollbars ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklch, white 18%, transparent); }

/* ── Body lock when sheet is open ──────────────────────────────────────── */
body.sheet-open { overflow: hidden; }

/* ── Offline ───────────────────────────────────────────────────────────── */
.offline-shell {
  min-height: 100dvh;
  display: grid; place-items: center;
  text-align: center;
  padding: 2rem;
  gap: 1rem;
  grid-auto-rows: max-content;
  align-content: center;
}
.offline-shell h1 { margin: 0; }
.offline-shell p  { color: var(--text-2); max-width: 32ch; margin: 0 auto; }

/* ── View Transitions ──────────────────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-group(*) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

/* ── Pull-to-refresh indicator ─────────────────────────────────────────── */
.ptr-indicator {
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  left: 50%; transform: translate(-50%, -40px);
  z-index: 8;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--accent-strong);
  font-size: 1.1rem;
  box-shadow: var(--shadow-lift);
  transition: transform .15s var(--ease-out), opacity .15s;
  opacity: 0;
}
.ptr-indicator.visible { opacity: 1; }
.ptr-indicator.spinning {
  animation: spin360 .8s linear infinite;
}
@keyframes spin360 { to { transform: translate(-50%, 0) rotate(360deg); } }