/* ==========================================================================
   快乐学霸AI工作台 · Design tokens & base layer
   A restrained, editorial token system: warm neutrals, mineral teal accent,
   hairline borders, soft layered shadows.
   ========================================================================== */

:root {
  /* --- Surfaces --------------------------------------------------------- */
  --bg: #f3f3f1;
  --bg-2: #eeeeeb;
  --white: #ffffff;
  --surface: rgba(255, 255, 255, 0.74);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --surface-solid: #ffffff;
  --surface-sunken: #f7f7f5;
  --ink-panel: #131519;
  --ink-panel-2: #1b1e23;

  /* --- Lines ------------------------------------------------------------ */
  --line: rgba(20, 22, 27, 0.085);
  --line-2: rgba(20, 22, 27, 0.14);
  --line-3: rgba(20, 22, 27, 0.22);
  --line-on-dark: rgba(255, 255, 255, 0.12);

  /* --- Ink -------------------------------------------------------------- */
  --ink-900: #14161b;
  --ink-800: #23262c;
  --ink-700: #3b3f47;
  --ink-600: #555a63;
  --ink-500: #6e737c;
  --ink-400: #8b9098;
  --ink-300: #a9adb4;
  --ink-200: #c8cbd0;
  --ink-100: #e4e5e7;

  /* --- Brand (mineral teal) --------------------------------------------- */
  --brand-900: #063c34;
  --brand-700: #0a5f52;
  --brand-600: #0d7264;
  --brand-500: #128c7a;
  --brand-400: #3ea795;
  --brand-200: #bfdcd5;
  --brand-100: #dcebe7;
  --brand-50: #eef5f3;

  /* --- Secondary accents (used sparingly) -------------------------------- */
  --amber-700: #8a5d18;
  --amber-500: #b8822b;
  --amber-100: #f3e8d5;
  --amber-50: #faf4e9;
  --clay-600: #a4503f;
  --clay-100: #f5e5e0;
  --indigo-600: #4059a8;
  --indigo-100: #e5e8f5;
  --ok-600: #2f7a4e;
  --ok-100: #dcece1;
  --danger-600: #b0423a;
  --danger-100: #f6e4e2;

  /* --- Radii ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-full: 999px;

  /* --- Shadows (soft, layered, never glowing) --------------------------- */
  --sh-hairline: 0 1px 0 rgba(20, 22, 27, 0.04);
  --sh-1: 0 1px 2px rgba(20, 22, 27, 0.045), 0 1px 1px rgba(20, 22, 27, 0.03);
  --sh-2: 0 1px 2px rgba(20, 22, 27, 0.04), 0 6px 16px -8px rgba(20, 22, 27, 0.14);
  --sh-3: 0 2px 4px rgba(20, 22, 27, 0.04), 0 14px 34px -16px rgba(20, 22, 27, 0.2);
  --sh-4: 0 4px 10px rgba(20, 22, 27, 0.06), 0 28px 60px -24px rgba(20, 22, 27, 0.28);
  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* --- Type ------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", Inter, system-ui, sans-serif;
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-display: 30px;
  --fs-h1: 21px;
  --fs-h2: 16px;
  --fs-h3: 14px;
  --fs-body: 13.5px;
  --fs-xs: 12px;
  --fs-micro: 11.5px;

  /* --- Rhythm ----------------------------------------------------------- */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-8: 32px;
  --gap-10: 40px;
  --gap-12: 56px;

  --shell-sidebar: 248px;
  --shell-topbar: 60px;
  --shell-max: 1320px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 300ms;

  --z-topbar: 40;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-800);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 0;
}

/* Ambient field: two very quiet washes + paper grain. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 520px at 88% -8%, rgba(18, 140, 122, 0.07), transparent 68%),
    radial-gradient(680px 480px at 4% 104%, rgba(184, 130, 43, 0.05), transparent 66%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--gap-5) 0;
}

::selection {
  background: var(--brand-100);
  color: var(--brand-900);
}

/* ==========================================================================
   Typography primitives
   ========================================================================== */

.display {
  font-size: var(--fs-display);
  line-height: 1.18;
  letter-spacing: -0.028em;
  font-weight: 600;
  color: var(--ink-900);
}

.h1 {
  font-size: var(--fs-h1);
  line-height: 1.25;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--ink-900);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.35;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--ink-900);
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink-900);
}

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.005em;
}

.sub {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  line-height: 1.55;
}

.micro {
  font-size: var(--fs-micro);
  color: var(--ink-400);
  letter-spacing: 0.01em;
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.num-lg {
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.num-md {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--ink-500);
}

.dim {
  color: var(--ink-400);
}

.ink {
  color: var(--ink-900);
}

.tone-brand {
  color: var(--brand-700);
}

.tone-danger {
  color: var(--danger-600);
}

.tone-ok {
  color: var(--ok-600);
}

.tone-amber {
  color: var(--amber-700);
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */

.stack {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: center;
}

.row-top {
  display: flex;
  align-items: flex-start;
}

.wrap {
  flex-wrap: wrap;
}

.between {
  justify-content: space-between;
}

.center {
  justify-content: center;
  align-items: center;
}

.grow {
  flex: 1;
  min-width: 0;
}

.g1 { gap: var(--gap-1); }
.g2 { gap: var(--gap-2); }
.g3 { gap: var(--gap-3); }
.g4 { gap: var(--gap-4); }
.g5 { gap: var(--gap-5); }
.g6 { gap: var(--gap-6); }
.g8 { gap: var(--gap-8); }

.mt1 { margin-top: var(--gap-1); }
.mt2 { margin-top: var(--gap-2); }
.mt3 { margin-top: var(--gap-3); }
.mt4 { margin-top: var(--gap-4); }
.mt5 { margin-top: var(--gap-5); }
.mt6 { margin-top: var(--gap-6); }
.mt8 { margin-top: var(--gap-8); }

.nowrap {
  white-space: nowrap;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  width: 100%;
}

.v-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}

.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;
}

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(20, 22, 27, 0.14);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 22, 27, 0.24);
  background-clip: content-box;
}

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

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