/* ==========================================================================
   RainMC — restrained flat UI, Apple-style. White surfaces, one sky-blue
   accent, small radii, no gradients. Every colour pair below meets WCAG AA.
   ========================================================================== */

:root {
  --blue: #0071c8;          /* 5.0:1 on white */
  --blue-hover: #0062ae;
  --blue-active: #00579a;
  --blue-soft: #e8f4fc;
  --blue-line: #bcddf3;
  --blue-glow: rgba(0, 113, 200, .14);

  --ink: #1d1d1f;            /* 16.8:1 on white */
  --ink-2: #3f3f46;
  --muted: #6e6e73;          /* 5.1:1 on white */

  --line: #d2d2d7;
  --line-soft: #e9e9ed;
  --bg: #f5f5f7;
  --surface: #fff;
  --surface-2: #fafafc;

  --red: #d70015;            /* 5.4:1 on white */
  --red-soft: #fdeced;
  --red-line: #f0c8cc;
  --red-glow: rgba(215, 0, 21, .14);
  --amber: #8a5300;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;

  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, .12);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --fast: .16s;
  --base: .24s;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark mode — same tokens, swapped values. `data-theme-resolved` is set by
   the inline bootstrap script in base.html (explicit choice, or system
   preference when the user's mode is "auto"), so every rule below only
   ever needs this one attribute regardless of how the mode was picked. */
:root[data-theme-resolved="dark"] {
  --blue: #3aa3e8;
  --blue-hover: #4cb0f2;
  --blue-active: #2e95d9;
  --blue-soft: rgba(58, 163, 232, .14);
  --blue-line: rgba(58, 163, 232, .32);
  --blue-glow: rgba(58, 163, 232, .18);

  --ink: #f5f5f7;
  --ink-2: #d1d1d6;
  --muted: #98989d;

  --line: #3a3a3c;
  --line-soft: #2c2c2e;
  --bg: #1c1c1e;
  --surface: #242426;
  --surface-2: #2a2a2c;

  --red: #ff453a;
  --red-soft: rgba(255, 69, 58, .14);
  --red-line: rgba(255, 69, 58, .4);
  --red-glow: rgba(255, 69, 58, .18);
  --amber: #ffd60a;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  accent-color: var(--blue);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--base) var(--ease), color var(--base) var(--ease);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbars -------------------------------------------------------------
   Thin, quiet, and theme-aware: the thumb and its hover state come from the
   same tokens as the rest of the UI, so light and dark mode stay consistent
   with no extra rules. `scrollbar-width`/`scrollbar-color` cover Firefox and
   recent Chromium; the `::-webkit-scrollbar` rules cover Safari and older
   Chromium. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  /* Transparent border + padding-box clip keep the visible thumb inset from
     the track edges, the macOS-style "floating" bar. */
  background-color: var(--line);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Icons ------------------------------------------------------------------ */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon > svg { width: 1em; height: 1em; display: block; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-line: var(--line);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  min-height: 38px;
  border: 1px solid var(--btn-line);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-primary {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  --btn-line: var(--blue);
  /* Apple-style elevation for the key action: a soft blue halo keeps the
     solid blue button from sitting flat against the card. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 4px 14px var(--blue-glow);
}
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn-primary:active { background: var(--blue-active); }

.btn-danger { --btn-fg: var(--red); --btn-line: var(--red-line); }
.btn-danger:hover { background: var(--red-soft); }

.btn-ghost { --btn-line: transparent; --btn-bg: transparent; }
.btn-ghost:hover { background: var(--line-soft); }

/* Apple-style tinted dashed action: soft blue fill, dashed outline that
   sharpens on hover — used for secondary, draggable actions. */
.btn-dashed {
  --btn-bg: var(--blue-soft);
  --btn-fg: var(--blue);
  --btn-line: var(--blue-line);
  border-style: dashed;
}
.btn-dashed:hover {
  background: var(--blue-glow);
  border-color: var(--blue);
}
.btn-dashed:active { background: var(--blue-soft); }

.btn-lg { min-height: 48px; padding: 0 28px; font-size: 17px; border-radius: 12px; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 14px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }

/* Cards ------------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 20px;
}
/* Vertical rhythm comes from the `.col` grid, never from sibling margins —
   margins would also apply inside grid tracks and knock rows out of line. */
.col { display: grid; gap: 16px; align-content: start; }
.card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.card-head .icon { color: var(--blue); font-size: 17px; }
.card-title { font-size: 16px; font-weight: 600; }
.card-head .spacer { margin-left: auto; }

/* Forms ------------------------------------------------------------------ */
.field { display: block; margin-bottom: 14px; }
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.input {
  width: 100%;
  min-height: 42px;
  padding: 9px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input::placeholder { color: #a1a1a8; }
.input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
.input:disabled { background: var(--surface-2); color: var(--muted); }
.input.is-error { border-color: var(--red); }
.input.is-error:focus { box-shadow: 0 0 0 3px var(--red-glow); }

textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }

/* Checkbox — flat, minimal, no native chrome ------------------------------ */
.checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.checkbox:hover { border-color: var(--muted); }
.checkbox:checked { background: var(--blue); border-color: var(--blue); }
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox:focus-visible { outline-offset: 2px; }
.checkbox:disabled { opacity: .45; cursor: not-allowed; }

.field-error {
  display: none;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--red);
}
.field-error.is-visible { display: flex; animation: nudge var(--base) var(--ease); }
.field-hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.field-ok { margin-top: 6px; font-size: 13px; color: var(--blue); }

/* Input with a fixed, non-editable suffix (the @qq.com domain) */
.input-suffix { position: relative; display: flex; align-items: center; }
.input-suffix .input { padding-right: 6px; border-radius: var(--r) 0 0 var(--r); }
.input-suffix .suffix {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 13px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--r) var(--r) 0;
  white-space: nowrap;
}

/* Segmented control ----------------------------------------------------- */
.segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--line-soft);
  border-radius: 9px;
}
.segmented button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.segmented button[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* Tags ------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}
.tag .icon { font-size: 12px; color: var(--muted); }
/* Model tag: reveal only the icon for the currently active model */
.model-icon { display: none; }
#model-tag[data-model="slim"] .model-icon[data-which="slim"],
#model-tag[data-model="default"] .model-icon[data-which="default"] { display: inline; }
.tag-blue { color: var(--blue); background: var(--blue-soft); border-color: var(--blue-line); }
.tag-blue .icon { color: var(--blue); }
.tag-red { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.tag-red .icon { color: var(--red); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Modal (native dialog) -------------------------------------------------- */
dialog.modal {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
dialog.modal.modal-wide { width: min(560px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .32); backdrop-filter: blur(2px); }
dialog.modal[open] { animation: modal-in var(--base) var(--ease); }
dialog.modal[open]::backdrop { animation: fade-in var(--base) var(--ease); }
.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 20px 0;
}
.modal-head .icon { font-size: 18px; color: var(--blue); margin-top: 2px; }
.modal-title { font-size: 17px; font-weight: 600; }
.modal-sub { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.modal-body { padding: 16px 20px; }
.modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px 20px;
}
.modal-foot .btn { min-width: 92px; }
.modal-foot.stack { flex-direction: column; }
.modal-foot.stack .btn { width: 100%; }

/* Toast ------------------------------------------------------------------
   The host is a non-modal <dialog>: native dialogs render in the browser's
   top layer, above *any* z-indexed content — and crucially above other open
   modals — so toasts stay visible even when a modal is showing. ui.js opens
   it lazily and re-stacks it on every toast and on every modal open. The
   rules below override the UA dialog chrome (border, padding, centering). */
.toast-host {
  position: fixed;
  inset: auto auto 28px 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  max-width: none;
  pointer-events: none;
  z-index: 90;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 40px);
  padding: 10px 16px;
  font-size: 14px;
  color: #fff;
  background: rgba(29, 29, 31, .94);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  animation: toast-in var(--base) var(--ease);
}
.toast.is-out { animation: toast-out var(--base) var(--ease) forwards; }
.toast .icon { font-size: 15px; }
.toast-error .icon { color: #ff8f8a; }
.toast-ok .icon { color: #7ec8f0; }

/* Animations ------------------------------------------------------------- */
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes pop {
  0% { opacity: 0; transform: scale(.9); }
  60% { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.rise { animation: rise var(--base) var(--ease) both; }

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn:not(.btn-primary) .spinner {
  border-color: rgba(0, 0, 0, .18);
  border-top-color: var(--ink);
}
:root[data-theme-resolved="dark"] .btn:not(.btn-primary) .spinner {
  border-color: rgba(255, 255, 255, .18);
}

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

/* Utilities -------------------------------------------------------------- */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.stack-8 > * + * { margin-top: 8px; }
.stack-12 > * + * { margin-top: 12px; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}