:root {
  --stok-background: #f5f7ff;
  --stok-background-deep: #edf1ff;
  --stok-surface: #ffffff;
  --stok-glass: rgba(255, 255, 255, 0.76);
  --stok-glass-strong: rgba(255, 255, 255, 0.92);
  --stok-glass-muted: rgba(246, 248, 255, 0.76);
  --stok-text: #17213b;
  --stok-muted: #5f6983;
  --stok-subtle: #68738e;
  --stok-border: rgba(104, 119, 174, 0.18);
  --stok-border-strong: rgba(92, 105, 165, 0.3);
  --stok-blue: #4d6df3;
  --stok-purple: #7657e9;
  --stok-teal: #22b9ad;
  --stok-success: #189c72;
  --stok-success-soft: #e4f8f1;
  --stok-warning: #c67b1f;
  --stok-warning-soft: #fff4df;
  --stok-danger: #d24c67;
  --stok-danger-soft: #ffebf0;
  --stok-info-soft: #eaf0ff;
  --stok-gradient-primary: linear-gradient(135deg, #4d75f4 0%, #7657e9 56%, #28b9b1 125%);
  --stok-gradient-hero: linear-gradient(142deg, rgba(98, 116, 245, 0.98) 0%, rgba(117, 84, 231, 0.96) 54%, rgba(39, 183, 177, 0.92) 118%);
  --stok-gradient-soft: linear-gradient(135deg, rgba(227, 234, 255, 0.9), rgba(240, 229, 255, 0.86) 56%, rgba(220, 249, 246, 0.88));
  --stok-gradient-canvas:
    radial-gradient(circle at 12% 8%, rgba(149, 174, 255, 0.27), transparent 30%),
    radial-gradient(circle at 94% 26%, rgba(196, 157, 255, 0.2), transparent 28%),
    radial-gradient(circle at 30% 90%, rgba(94, 223, 210, 0.15), transparent 35%),
    #f5f7ff;
  --stok-radius-sm: 10px;
  --stok-radius-md: 14px;
  --stok-radius-lg: 18px;
  --stok-radius-xl: 24px;
  --stok-radius-2xl: 28px;
  --stok-radius-pill: 999px;
  --stok-shadow-soft: 0 10px 28px rgba(48, 61, 115, 0.08);
  --stok-shadow-card: 0 18px 46px rgba(45, 57, 112, 0.11);
  --stok-shadow-lifted: 0 24px 58px rgba(63, 64, 144, 0.19);
  --stok-font-ui: Inter, "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
  font-family: var(--stok-font-ui);
}

:root[data-theme="dark"] {
  --stok-background: #090d1a;
  --stok-background-deep: #101629;
  --stok-surface: #171f35;
  --stok-glass: rgba(20, 27, 48, 0.82);
  --stok-glass-strong: rgba(25, 33, 56, 0.94);
  --stok-glass-muted: rgba(17, 24, 42, 0.82);
  --stok-text: #eef3ff;
  --stok-muted: #aab6d0;
  --stok-subtle: #8491ae;
  --stok-border: rgba(160, 177, 224, 0.18);
  --stok-border-strong: rgba(164, 181, 230, 0.32);
  --stok-blue: #8aa4ff;
  --stok-purple: #aa91ff;
  --stok-teal: #5ed8cf;
  --stok-success: #53d4a7;
  --stok-success-soft: rgba(39, 143, 111, 0.2);
  --stok-warning: #f0b76e;
  --stok-warning-soft: rgba(173, 109, 35, 0.2);
  --stok-danger: #ff829d;
  --stok-danger-soft: rgba(158, 49, 76, 0.2);
  --stok-info-soft: rgba(75, 103, 194, 0.24);
  --stok-gradient-soft: linear-gradient(135deg, rgba(55, 73, 133, 0.32), rgba(94, 61, 145, 0.28) 56%, rgba(29, 124, 118, 0.22));
  --stok-gradient-canvas:
    radial-gradient(circle at 12% 8%, rgba(79, 108, 205, 0.17), transparent 30%),
    radial-gradient(circle at 94% 26%, rgba(113, 73, 188, 0.15), transparent 30%),
    radial-gradient(circle at 30% 90%, rgba(42, 170, 160, 0.1), transparent 36%),
    #090d1a;
  --stok-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.24);
  --stok-shadow-card: 0 20px 50px rgba(0, 0, 0, 0.3);
  --stok-shadow-lifted: 0 28px 70px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--stok-background); font-size: 16px; }
body { margin: 0; min-height: 100vh; background: var(--stok-gradient-canvas); background-attachment: fixed; color: var(--stok-text); line-height: 1.45; }
body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 999px; filter: blur(2px); pointer-events: none; }
body::before { width: 340px; height: 340px; top: -160px; right: 8%; background: rgba(117, 87, 233, 0.09); }
body::after { width: 280px; height: 280px; left: -120px; bottom: -90px; background: rgba(34, 185, 173, 0.09); }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(77, 109, 243, 0.45); outline-offset: 2px; }
.pagination { align-items: center; border-top: 1px solid var(--stok-border); display: flex; gap: 12px; justify-content: flex-end; padding: 16px 18px; }
.pagination span { color: var(--stok-muted); font-size: 14px; min-width: 180px; text-align: center; }
.pagination button:disabled { cursor: not-allowed; opacity: 0.5; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--stok-text); letter-spacing: -0.035em; }
h1 { margin-bottom: 5px; font-size: clamp(1.55rem, 2.8vw, 2.15rem); line-height: 1.05; }
h2 { margin-bottom: 5px; font-size: 1.25rem; line-height: 1.15; }
h3 { margin: 0; font-size: 1rem; line-height: 1.2; }