/* ============================================================================ AlgoGuru SaaS — Design System (dual theme: LIGHT default + DARK override) Theme driven by [data-theme] on . Light = default identity; dark = refined slate/midnight. One source of truth for tokens. ============================================================================ */ :root { --bg-0:#e9edf4; --bg-1:#f9fafc; --bg-2:#eef1f7; --bg-3:#e2e7f0; --line:#d6dde7; --line-soft:#e3e8f0; --tx-0:#0e1726; --tx-1:#3c4a60; --tx-2:#6b7889; --tx-3:#9aa6b6; --acc:#0a9c78; --acc-2:#0e9fc0; --acc-dim:rgba(10,156,120,.10); --acc-line:rgba(10,156,120,.30); --acc-on:#ffffff; --up:#0a9c78; --up-dim:rgba(10,156,120,.12); --down:#d83a5a; --down-dim:rgba(216,58,90,.10); --warn:#c77a12; --info:#2f7fd1; --grid:rgba(14,23,38,.05); --nav-bg:rgba(233,237,244,.85); --sh:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06); --sh-glow:0 0 0 1px var(--acc-line),0 12px 34px rgba(10,156,120,.10); --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; --mono:"SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace; --r-sm:6px; --r:10px; --r-lg:16px; } html[data-theme="dark"] { /* lifted slate / charcoal (variant 2) */ --bg-0:#171b22; --bg-1:#1d222c; --bg-2:#232934; --bg-3:#2c3340; --line:#2e3744; --line-soft:#242b36; --tx-0:#eef2f7; --tx-1:#b6c0cd; --tx-2:#7c8696; --tx-3:#5a6473; --acc:#2ad9aa; --acc-2:#19bcd6; --acc-dim:rgba(42,217,170,.12); --acc-line:rgba(42,217,170,.34); --acc-on:#06231c; --up:#36e3ad; --up-dim:rgba(54,227,173,.12); --down:#ff6b86; --down-dim:rgba(255,107,134,.12); --warn:#ffb84d; --info:#5aa9ff; --grid:rgba(255,255,255,.035); --nav-bg:rgba(23,27,34,.78); --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.32); --sh-glow:0 0 0 1px var(--acc-line),0 12px 34px rgba(42,217,170,.12); } * { box-sizing:border-box; } html,body { margin:0; padding:0; } body { background:var(--bg-0); color:var(--tx-0); font-family:var(--font); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .2s ease,color .2s ease; } body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse at 50% 0%,#000 40%,transparent 85%); } a { color:var(--acc); text-decoration:none; } a:hover { filter:brightness(1.1); } h1,h2,h3,h4 { margin:0 0 .4em; font-weight:650; letter-spacing:-.02em; color:var(--tx-0); } h1 { font-size:clamp(28px,5vw,52px); line-height:1.05; } h2 { font-size:clamp(22px,3vw,32px); } p { color:var(--tx-1); margin:0 0 1em; } .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; } .muted { color:var(--tx-2); } .tiny { font-size:12px; } .wrap { max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:1; } .row { display:flex; gap:16px; } .col { display:flex; flex-direction:column; gap:16px; } .between { justify-content:space-between; align-items:center; } .center { align-items:center; } .grid { display:grid; gap:16px; } @media(max-width:860px){ .wrap{padding:0 16px;} } .btn { display:inline-flex; align-items:center; gap:8px; justify-content:center; font:inherit; font-weight:600; font-size:14px; cursor:pointer; padding:10px 18px; border-radius:var(--r); border:1px solid transparent; transition:.16s ease; white-space:nowrap; line-height:1; } .btn-primary { background:linear-gradient(135deg,var(--acc),var(--acc-2)); color:var(--acc-on); box-shadow:0 6px 18px var(--acc-dim); } .btn-primary:hover { filter:brightness(1.06); transform:translateY(-1px); color:var(--acc-on); } .btn-ghost { background:var(--bg-1); color:var(--tx-0); border-color:var(--line); } .btn-ghost:hover { background:var(--bg-2); border-color:var(--acc-line); color:var(--tx-0); } .btn-block { width:100%; } .btn-lg { padding:14px 26px; font-size:15px; } .btn-sm { padding:7px 12px; font-size:13px; } .card { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; position:relative; box-shadow:var(--sh); } .card.glow { box-shadow:var(--sh-glow); } .panel { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); } label.field { display:block; margin-bottom:14px; } label.field > span { display:block; font-size:12.5px; color:var(--tx-2); margin-bottom:6px; font-weight:500; } .input { width:100%; background:var(--bg-2); border:1px solid var(--line); color:var(--tx-0); font:inherit; font-size:14px; padding:11px 13px; border-radius:var(--r); transition:.15s; outline:none; } .input:focus { border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-dim); background:var(--bg-1); } .input::placeholder { color:var(--tx-3); } .pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--tx-1); background:var(--bg-2); } .pill.acc { color:var(--acc); border-color:var(--acc-line); background:var(--acc-dim); } .pill.up { color:var(--up); border-color:var(--acc-line); background:var(--up-dim); } .pill.down { color:var(--down); border-color:rgba(216,58,90,.3); background:var(--down-dim); } .alert { padding:11px 14px; border-radius:var(--r); font-size:13.5px; margin-bottom:14px; border:1px solid; } .alert.err { background:var(--down-dim); border-color:rgba(216,58,90,.3); color:var(--down); } .alert.ok { background:var(--up-dim); border-color:var(--acc-line); color:var(--acc); } hr.sep { border:0; border-top:1px solid var(--line); margin:22px 0; } .theme-tog { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-1); color:var(--tx-1); cursor:pointer; font-size:16px; transition:.15s; line-height:1; } .theme-tog:hover { border-color:var(--acc-line); color:var(--acc); } .theme-tog .moon{ display:none; } .theme-tog .sun{ display:inline; } html[data-theme="dark"] .theme-tog .moon{ display:inline; } html[data-theme="dark"] .theme-tog .sun{ display:none; }