/* LYRC design-token skin for settings.html.
 * Revert: remove `lyrc-app` from <body class> OR delete the <link> in settings.html.
 * Visual layer only - no layout, behaviour or copy changes. Tokens come from
 * cutflux-tokens.css. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

body.lyrc-app {
  --bg: var(--cf-bg);
  --surface: var(--cf-surface);
  --surface-2: var(--cf-input);
  --surface-3: var(--cf-hover);
  --line: var(--cf-border-subtle);
  --line-2: var(--cf-border);
  --text: var(--cf-text);
  --muted: var(--cf-text-2);
  --accent: var(--cf-accent);
  --accent-2: var(--cf-accent-hover);
  --success: var(--cf-ok);
  --radius: var(--cf-r-panel);
  --radius-sm: var(--cf-r-button);
  font-family: var(--cf-font);
  background: var(--cf-bg);
}
body.lyrc-app button,
body.lyrc-app select { font-family: var(--cf-font); }

/* Top bar */
body.lyrc-app .topbar { background: rgba(10, 10, 13, 0.85); border-bottom-color: var(--cf-border-subtle); }
body.lyrc-app .topbar .brand { font-weight: 700; }
body.lyrc-app .topbar .brand img { border-radius: var(--cf-r-xs); }
body.lyrc-app .topbar .crumb { color: var(--cf-text-2); }
body.lyrc-app .topbar .crumb::before { color: var(--cf-text-4); }
body.lyrc-app .topbar .back {
  color: var(--cf-text-2);
  background: var(--cf-raised);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-button);
  font-weight: 500;
  transition: background-color var(--cf-t-fast), border-color var(--cf-t-fast), color var(--cf-t-fast);
}
body.lyrc-app .topbar .back:hover { color: var(--cf-text); background: var(--cf-hover); border-color: var(--cf-border-strong); }

/* Sidebar / phone tab strip */
@media (max-width: 820px) {
  body.lyrc-app .sidebar { background: rgba(10, 10, 13, 0.92); border-bottom-color: var(--cf-border-subtle); }
}
body.lyrc-app .side-title { font-weight: 600; color: var(--cf-text-3); }
body.lyrc-app .side-link {
  border-radius: var(--cf-r-button);
  color: var(--cf-text-2);
  transition: background-color var(--cf-t-fast), color var(--cf-t-fast);
}
body.lyrc-app .side-link:hover { color: var(--cf-text); background: var(--cf-surface); }
body.lyrc-app .side-link.is-active { color: var(--cf-text); background: var(--cf-accent-soft); }
body.lyrc-app .side-link.is-active svg { color: var(--cf-accent); }
body.lyrc-app .side-link svg { opacity: 0.7; }

/* Headings */
body.lyrc-app .page-title { font-weight: 700; letter-spacing: -0.03em; }
body.lyrc-app .page-sub { color: var(--cf-text-2); }
body.lyrc-app .section-head h2 { font-weight: 600; }
body.lyrc-app .section-head p { color: var(--cf-text-2); }

/* Section cards: flat surface, one border */
body.lyrc-app .section {
  background: var(--cf-surface);
  border-color: var(--cf-border-subtle);
  border-radius: var(--cf-r-panel);
  box-shadow: none;
}
body.lyrc-app .section.is-danger {
  background: var(--cf-surface); /* no gradient */
  border-color: rgba(255, 107, 107, 0.35);
}
body.lyrc-app .row { border-top-color: var(--cf-border-subtle); }
body.lyrc-app .row-label { font-weight: 600; }
body.lyrc-app .row-hint { color: var(--cf-text-2); }

/* Toggle switch: flat track, no thumb shadow */
body.lyrc-app .toggle .track {
  background: var(--cf-hover);
  border-color: var(--cf-border-strong);
  transition: background-color var(--cf-t-base), border-color var(--cf-t-base);
}
body.lyrc-app .toggle .thumb { box-shadow: none; transition: transform var(--cf-t-base); }
body.lyrc-app .toggle input:checked ~ .track { background: var(--cf-accent); border-color: var(--cf-accent); }
body.lyrc-app .toggle input:focus-visible ~ .track { outline: none; box-shadow: var(--cf-focus); }

/* Select */
body.lyrc-app select {
  background-color: var(--cf-input);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-button);
  transition: border-color var(--cf-t-fast), background-color var(--cf-t-fast);
}
body.lyrc-app select:hover { border-color: var(--cf-border-strong); }
body.lyrc-app select:focus-visible { outline: none; border-color: var(--cf-accent); box-shadow: var(--cf-focus); }
body.lyrc-app select option { background: var(--cf-raised); color: var(--cf-text); }

/* Buttons */
body.lyrc-app .btn,
body.lyrc-app .btn-ghost,
body.lyrc-app .btn-danger {
  border-radius: var(--cf-r-button);
  font-weight: 600;
  box-shadow: none;
  transition: background-color var(--cf-t-fast), border-color var(--cf-t-fast), color var(--cf-t-fast), transform var(--cf-t-fast);
}
body.lyrc-app .btn { background: var(--cf-accent); color: #fff; border-color: var(--cf-accent); }
body.lyrc-app .btn:hover { background: var(--cf-accent-hover); border-color: var(--cf-accent-hover); color: #fff; text-decoration: none; }
body.lyrc-app .btn-ghost { background: var(--cf-raised); border-color: var(--cf-border); color: var(--cf-text); }
body.lyrc-app .btn-ghost:hover { background: var(--cf-hover); border-color: var(--cf-border-strong); color: var(--cf-text); text-decoration: none; }
body.lyrc-app .btn-danger { background: transparent; }
body.lyrc-app .btn-danger:disabled,
body.lyrc-app .btn:disabled,
body.lyrc-app .btn-ghost:disabled { opacity: 0.5; cursor: progress; }
body.lyrc-app .btn:focus-visible,
body.lyrc-app .btn-ghost:focus-visible,
body.lyrc-app .btn-danger:focus-visible,
body.lyrc-app .side-link:focus-visible,
body.lyrc-app .topbar .back:focus-visible { outline: none; box-shadow: var(--cf-focus); }

/* Plan badge: pill, flat */
body.lyrc-app .plan-badge {
  font-weight: 600;
  background: var(--cf-accent-soft);
  color: var(--cf-accent-hover);
  border-color: rgba(59, 130, 246, 0.35);
  border-radius: var(--cf-r-pill);
}
body.lyrc-app .plan-badge.premium {
  background: rgba(245, 166, 35, 0.14); /* status colour, flat */
  color: var(--cf-warn);
  border-color: rgba(245, 166, 35, 0.4);
}

/* Meter: flat fills */
body.lyrc-app .meter { background: var(--cf-hover); }
body.lyrc-app .meter .fill { background: var(--cf-accent); transition: width var(--cf-t-slow); }
body.lyrc-app .meter.warn .fill { background: var(--cf-warn); }

/* Toast (floating - keeps a shadow) */
body.lyrc-app .toast {
  background: var(--cf-raised);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-card);
  box-shadow: var(--cf-shadow-lg);
  transition: opacity var(--cf-t-base), transform var(--cf-t-base);
}
body.lyrc-app .toast.is-success { border-color: rgba(52, 211, 153, 0.35); }

/* Confirm dialog (modal) */
body.lyrc-app .confirm-back { background: rgba(0, 0, 0, 0.7); }
body.lyrc-app .confirm-box {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-panel);
  box-shadow: var(--cf-shadow-lg);
  animation: lyrcPop var(--cf-t-base) both;
}
body.lyrc-app .confirm-box h3 { font-weight: 600; }
body.lyrc-app .confirm-box p { color: var(--cf-text-2); }
@keyframes lyrcPop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

/* Loading: account rows show a shimmer line (same height as the text it
   replaces, so nothing jumps) until the auth lookup fills them in. */
body.lyrc-app .row-hint.lyrc-loading {
  width: 160px;
  max-width: 60%;
  color: transparent;
  border-radius: var(--cf-r-xs);
  background: linear-gradient(90deg, var(--cf-raised) 0%, var(--cf-hover) 50%, var(--cf-raised) 100%);
  background-size: 200% 100%;
  animation: cfSkel 1.2s linear infinite;
  user-select: none;
}
body.lyrc-app .row-hint { transition: color var(--cf-t-base); }
@media (prefers-reduced-motion: reduce) {
  body.lyrc-app .row-hint.lyrc-loading { animation: none; }
}