@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; scroll-behavior: smooth; }
  body { margin: 0; min-height: 100vh; }
  img, svg { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; }
  button, [type="button"], [type="submit"], [type="reset"] { cursor: pointer; }
  button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; }
  h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --font-display: "Bahnschrift SemiCondensed", "Arial Narrow", "Segoe UI Variable Display", "Microsoft YaHei UI", sans-serif;
    --font-body: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, ui-monospace, monospace;

    --brand: #3470b8;
    --brand-hover: #285d9d;
    --brand-soft: #ececea;
    --brand-contrast: #ffffff;
    --background: #f5f4f1;
    --background-elevated: #eeece7;
    --surface: #ffffff;
    --surface-hover: #f0eee9;
    --surface-soft: #eeece7;
    --text: #171719;
    --text-muted: #66645f;
    --text-faint: #77746e;
    --text-primary: #171719;
    --text-secondary: #66645f;
    --border: #d8d5ce;
    --border-strong: #bdbdb5;
    --shadow-sm: 0 1px 2px rgb(35 35 30 / 5%), 0 5px 18px rgb(35 35 30 / 4%);
    --shadow-md: 0 18px 48px rgb(35 35 30 / 11%);
    --shadow-lg: 0 30px 78px rgb(35 35 30 / 16%);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --duration-fast: 180ms;
    --duration-base: 320ms;
    --duration-slow: 560ms;
    --ease-standard: cubic-bezier(.2, .75, .25, 1);
    --ease-emphasized: cubic-bezier(.19, 1, .22, 1);
    --motion-fast: var(--duration-fast);
    --motion-base: var(--duration-base);
    --motion-spring: 520ms cubic-bezier(.2, .85, .2, 1.05);

    --brand-strong: #285d9d;
    --brand-ink: #244d7c;
    --on-brand: #ffffff;
    --page: #f5f4f1;
    --page-tint: #eeece7;
    --surface-raised: #ffffff;
    --surface-muted: #eeece7;
    --surface-strong: #e2e2dd;
    --focus: #165da8;
    --success: #23784a;
    --success-soft: #e3f3e9;
    --danger: #b42331;
    --danger-soft: #f9e8eb;
    --warning: #8a5a00;
    --warning-soft: #f8efd5;
    --warm: #925023;
    --warm-soft: #f9ede4;
    --radius-xs: 4px;
    --container: 1240px;
    --header-height: 68px;
    --ease-out: var(--ease-standard);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --brand: #79a8d8;
    --brand-hover: #9abbe0;
    --brand-soft: #26282a;
    --brand-contrast: #101112;
    --background: #101011;
    --background-elevated: #161617;
    --surface: #19191b;
    --surface-hover: #222225;
    --surface-soft: #222225;
    --text: #f3f2ef;
    --text-muted: #a5a39e;
    --text-faint: #8d8b86;
    --text-primary: #f3f2ef;
    --text-secondary: #a5a39e;
    --border: #343438;
    --border-strong: #50504a;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 26%), 0 7px 20px rgb(0 0 0 / 17%);
    --shadow-md: 0 24px 58px rgb(0 0 0 / 36%);
    --shadow-lg: 0 34px 88px rgb(0 0 0 / 49%);

    --brand-strong: #9abbe0;
    --brand-ink: #c6d8eb;
    --on-brand: #101112;
    --page: #101011;
    --page-tint: #161617;
    --surface-raised: #19191b;
    --surface-muted: #222225;
    --surface-strong: #29292d;
    --focus: #9bc9f7;
    --success: #72c796;
    --success-soft: #143424;
    --danger: #f18f98;
    --danger-soft: #3a2026;
    --warning: #edc875;
    --warning-soft: #362d18;
    --warm: #e4a171;
    --warm-soft: #3b281e;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --brand: #79a8d8;
      --brand-hover: #9abbe0;
      --brand-soft: #26282a;
      --brand-contrast: #101112;
      --background: #101011;
      --background-elevated: #161617;
      --surface: #19191b;
      --surface-hover: #222225;
      --surface-soft: #222225;
      --text: #f3f2ef;
      --text-muted: #a5a39e;
      --text-faint: #8d8b86;
      --text-primary: #f3f2ef;
      --text-secondary: #a5a39e;
      --border: #343438;
      --border-strong: #50504a;
      --shadow-sm: 0 1px 2px rgb(0 0 0 / 26%), 0 7px 20px rgb(0 0 0 / 17%);
      --shadow-md: 0 24px 58px rgb(0 0 0 / 36%);
      --shadow-lg: 0 34px 88px rgb(0 0 0 / 49%);
      --brand-strong: #9abbe0;
      --brand-ink: #c6d8eb;
      --on-brand: #101112;
      --page: #101011;
      --page-tint: #161617;
      --surface-raised: #19191b;
      --surface-muted: #222225;
      --surface-strong: #29292d;
      --focus: #9bc9f7;
      --success: #72c796;
      --success-soft: #143424;
      --danger: #f18f98;
      --danger-soft: #3a2026;
      --warning: #edc875;
      --warning-soft: #362d18;
      --warm: #e4a171;
      --warm-soft: #3b281e;
    }
  }
}

@layer base {
  html { background: var(--background); color: var(--text); font-family: var(--font-body); font-size: 16px; }
  body {
    overflow-x: clip;
    background:
      radial-gradient(ellipse 44rem 28rem at 8% -8%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 72%),
      radial-gradient(ellipse 36rem 24rem at 92% 12%, color-mix(in srgb, var(--brand) 4%, transparent), transparent 74%),
      var(--background);
    color: var(--text);
    line-height: 1.62;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { color: var(--text); font-family: var(--font-display); line-height: 1.08; text-wrap: balance; }
  h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 650; letter-spacing: -.055em; }
  h2 { font-size: clamp(1.55rem, 3vw, 2.45rem); font-weight: 650; letter-spacing: -.035em; }
  h3 { font-size: 1.12rem; font-weight: 650; letter-spacing: -.018em; }
  p { text-wrap: pretty; }
  a { color: var(--brand-hover); text-underline-offset: .2em; }
  a:hover { color: var(--brand); }
  code, kbd, samp, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  code { border-radius: var(--radius-xs); background: var(--surface-muted); padding: .1em .35em; font-size: .86em; }
  hr { border: 0; border-top: 1px solid var(--border); }
  ::selection { background: color-mix(in srgb, var(--brand) 27%, transparent); }
  :target { scroll-margin-top: calc(var(--header-height) + 24px); }
  :focus { scroll-margin-top: calc(var(--header-height) + 18px); scroll-margin-bottom: 72px; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
}

@layer components {
  .container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
  .skip-link { position: fixed; z-index: 120; top: .75rem; left: .75rem; transform: translateY(-180%); border-radius: var(--radius-sm); background: var(--text); padding: .65rem .9rem; color: var(--background); font-weight: 700; text-decoration: none; transition: transform var(--motion-fast); }
  .skip-link:focus { transform: translateY(0); }
  .surface { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
  .stack { display: grid; gap: 1rem; }
  .stack--tight { gap: .35rem; }
  .flash-region { padding-top: .75rem; }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, .65rem); }
  .split { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

  .button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: .62rem 1rem;
    color: var(--text);
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
  }
  .button:hover { border-color: var(--brand); background: var(--surface-hover); color: var(--brand-hover); }
  .button:active { transform: translateY(1px) scale(.985); }
  .button--primary { border-color: var(--brand); background: var(--brand); color: var(--brand-contrast); box-shadow: 0 7px 20px color-mix(in srgb, var(--brand) 19%, transparent); }
  .button--primary:hover { border-color: var(--brand-hover); background: var(--brand-hover); color: var(--brand-contrast); }
  .button--danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
  .button--danger:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
  .button--quiet { border-color: transparent; background: transparent; box-shadow: none; }
  .button--small { min-height: 36px; padding: .45rem .72rem; font-size: .875rem; }
  .button--icon { width: 44px; padding-inline: 0; }
  .button[aria-busy="true"], .button:disabled { opacity: .56; box-shadow: none; }
  .button svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .theme-switch { min-height: 40px; display: inline-flex; align-items: center; gap: .42rem; border: 0; border-radius: var(--radius-sm); background: transparent; padding: .4rem .62rem; color: var(--text-muted); }
  .theme-switch:hover { color: var(--text); }
  .theme-switch:active { transform: translateY(1px) scale(.975); }
  .theme-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

  .field { display: grid; gap: .42rem; min-width: 0; }
  .field__label { color: var(--text); font-size: .9rem; font-weight: 650; }
  .field__hint, .field__count { color: var(--text-muted); font-size: .8rem; }
  .field__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
  .input, .select, .textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: .64rem .75rem;
    color: var(--text);
    line-height: 1.45;
    box-shadow: inset 0 1px 1px rgb(15 34 57 / 3%);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
  }
  .textarea { min-height: 8rem; resize: vertical; }
  .textarea--tall { min-height: 16rem; }
  .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--brand) 58%, var(--border)); }
  .input:focus, .select:focus, .textarea:focus { border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--brand) 24%, transparent); outline-offset: 1px; background: var(--surface); }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
  .field-error { display: flex; align-items: flex-start; gap: .35rem; color: var(--danger); font-size: .84rem; font-weight: 600; }
  .field-error::before { content: "!"; width: 1.15rem; height: 1.15rem; flex: none; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 700 .7rem/1 var(--font-mono); }
  .check { min-height: 32px; display: inline-flex; align-items: center; gap: .55rem; }
  .check input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }

  .badge { display: inline-flex; align-items: center; gap: .35rem; min-height: 23px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-muted); padding: .12rem .48rem; color: var(--text-muted); font-size: .72rem; font-weight: 650; line-height: 1.35; }
  .badge--brand { border-color: color-mix(in srgb, var(--brand) 36%, var(--border)); background: var(--brand-soft); color: var(--brand-ink); }
  .badge--success { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: var(--success-soft); color: var(--success); }
  .badge--warning { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); background: var(--warning-soft); color: var(--warning); }
  .badge--danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: var(--danger-soft); color: var(--danger); }

  .notice { border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); background: var(--surface); padding: .8rem 1rem; color: var(--text-muted); }
  .notice--danger { border-left-color: var(--danger); background: var(--danger-soft); color: var(--text); }
  .notice--success { border-left-color: var(--success); background: var(--success-soft); color: var(--text); }
  .notice__title { margin-bottom: .2rem; color: var(--text); font-weight: 700; }

  .empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; border-block: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 62%, transparent); padding: clamp(1.4rem, 4vw, 2.5rem); }
  .empty-state__mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--brand); }
  .empty-state__mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .empty-state p { max-width: 58ch; margin-top: .35rem; color: var(--text-muted); }

  .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 2.2rem; }
  .pagination a, .pagination span { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: .4rem .65rem; color: var(--text-muted); text-decoration: none; }
  .pagination a:hover { border-color: var(--brand); color: var(--brand-hover); }
  .pagination [aria-current="page"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 750; }

  .safe-markdown { max-width: 72ch; color: var(--text-muted); overflow-wrap: anywhere; white-space: pre-wrap; }
  .safe-markdown--compact { max-height: 26rem; overflow: auto; }
  .safe-markdown h1, .safe-markdown h2, .safe-markdown h3 { margin: 1.5em 0 .55em; white-space: normal; }
  .safe-markdown p, .safe-markdown ul, .safe-markdown ol, .safe-markdown pre { margin-block: .75em; }
  .safe-markdown ul, .safe-markdown ol { padding-left: 1.25rem; white-space: normal; }
  .safe-markdown pre { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); padding: .85rem; white-space: pre; }

  .table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
  .data-table { width: 100%; min-width: 720px; }
  .data-table th, .data-table td { padding: .75rem .9rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
  .data-table th { background: var(--surface-muted); color: var(--text-muted); font-size: .76rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
  .data-table tr:last-child td { border-bottom: 0; }
  .data-table tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }

  dialog { max-width: min(92vw, 680px); max-height: min(88vh, 760px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 0; color: var(--text); box-shadow: var(--shadow-md); }
  dialog[open] { animation: dialog-enter var(--motion-base) var(--ease-out); }
  dialog::backdrop { background: rgb(3 10 19 / 68%); backdrop-filter: blur(4px); }
  .dialog__header, .dialog__body, .dialog__footer { padding: 1rem 1.15rem; }
  .dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); }
  .dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; border-top: 1px solid var(--border); }
  @keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } }
}

@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }
  .muted { color: var(--text-muted); }
  .text-danger { color: var(--danger); }
  .text-success { color: var(--success); }
  .nowrap { white-space: nowrap; }
  .wrap-anywhere { overflow-wrap: anywhere; }
  [hidden] { display: none !important; }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .split--mobile-stack { align-items: stretch; flex-direction: column; }
  .button--mobile-full { width: 100%; }
  .empty-state { grid-template-columns: auto minmax(0, 1fr); }
  .empty-state > .button { grid-column: 1 / -1; justify-self: start; }
}

@media (forced-colors: active) {
  .button, .badge, .surface, .input, .select, .textarea { forced-color-adjust: auto; }
}

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