/* ============================================================
   Api-Codex.ru — единая дизайн-система
   Вдохновлено OpenAI / ChatGPT: чёрно-белая тема, акцент #10A37F
   ============================================================ */

:root,
:root[data-theme="dark"]{
  --bg:#0a0a0a;
  --bg-elev:#111111;
  --surface:#161616;
  --surface-2:#1d1d1d;
  --surface-3:#242424;
  --line:#262626;
  --line-soft:#1f1f1f;
  --text:#ededed;
  --text-strong:#ffffff;
  --muted:#8e8e93;
  --muted-2:#6b6b73;
  --accent:#10a37f;
  --accent-hover:#0d8a6a;
  --accent-soft:rgba(16,163,127,.12);
  --accent-glow:rgba(16,163,127,.35);
  --danger:#f04438;
  --danger-soft:rgba(240,68,56,.12);
  --warn:#f59e0b;
  --ok:#10a37f;
  --on-accent:#0a0a0a;
  --code-bg:#0d0d0d;
  --shadow-lg:0 24px 64px -12px rgba(0,0,0,.6);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:18px;
  --font-sans:"Inter","Söhne","Segoe UI",Roboto,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1240px;
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#fafafa;
  --bg-elev:#ffffff;
  --surface:#ffffff;
  --surface-2:#f4f4f5;
  --surface-3:#ececec;
  --line:#e5e5e5;
  --line-soft:#efefef;
  --text:#1a1a1a;
  --text-strong:#0a0a0a;
  --muted:#6b7280;
  --muted-2:#9ca3af;
  --accent:#10a37f;
  --accent-hover:#0d8a6a;
  --accent-soft:rgba(16,163,127,.10);
  --accent-glow:rgba(16,163,127,.28);
  --danger:#dc2626;
  --danger-soft:rgba(220,38,38,.08);
  --warn:#d97706;
  --ok:#10a37f;
  --on-accent:#ffffff;
  --code-bg:#f4f4f5;
  --shadow-lg:0 24px 64px -12px rgba(15,23,42,.18);
  --shadow-md:0 8px 24px -10px rgba(15,23,42,.14);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .3s var(--ease),color .3s var(--ease);
}
a{color:inherit;text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--accent)}
button{font-family:inherit}
code,pre{font-family:var(--font-mono)}
code{background:var(--code-bg);padding:2px 6px;border-radius:6px;font-size:.86em;color:var(--text-strong);border:1px solid var(--line-soft)}
pre{background:var(--code-bg);padding:18px;border-radius:var(--radius);overflow:auto;font-size:.84em;border:1px solid var(--line);color:var(--text)}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  height:64px;padding:0 28px;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.brand a{display:flex;align-items:center;gap:10px;color:var(--text-strong);font-weight:680;font-size:1.02rem;letter-spacing:-.01em}
.brand-mark{width:26px;height:26px;flex:none;color:var(--accent);transition:transform .6s var(--ease)}
.brand a:hover .brand-mark{transform:rotate(90deg)}
.brand-mark svg{width:100%;height:100%;display:block}
.topbar nav{display:flex;align-items:center;gap:6px}
.topbar nav a{
  padding:8px 14px;border-radius:8px;color:var(--muted);font-size:.88rem;font-weight:500;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.topbar nav a:hover{background:var(--surface-2);color:var(--text-strong);text-decoration:none}
.topbar nav .btn-logout{color:var(--muted)}
.topbar nav .btn-logout:hover{background:var(--danger-soft);color:var(--danger)}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-left:6px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--muted);
  cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease),transform .25s var(--ease);
}
.theme-toggle:hover{color:var(--text-strong);border-color:var(--muted)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* ---------- Container / Footer ---------- */
.container{max-width:1100px;margin:32px auto;padding:0 24px}
.footer{
  margin-top:48px;padding:28px 24px;
  text-align:center;color:var(--muted);font-size:.82em;
  border-top:1px solid var(--line);
}

/* ---------- Flash ---------- */
.flash{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;margin-bottom:18px;
  border-radius:var(--radius);font-size:.92em;
  border:1px solid transparent;
  animation:flash-in .35s var(--ease);
}
@keyframes flash-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.flash.ok{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.flash.err{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}

/* ---------- Page head ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.page-head h1{margin:0;font-size:1.8rem;font-weight:680;letter-spacing:-.025em;color:var(--text-strong)}
.badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;margin-left:6px;
  border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:.62rem;font-weight:680;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;
}

/* ---------- Cards / Stats ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:22px}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;margin-bottom:22px;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.card h2{margin:0 0 14px;font-size:1.05rem;font-weight:650;color:var(--text-strong);letter-spacing:-.01em}
.card h3{margin:18px 0 10px;font-size:.95rem;font-weight:600;color:var(--text-strong)}

.stat{text-align:left}
.stat-label{color:var(--muted);font-size:.78em;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.stat-value{font-size:2.1rem;font-weight:700;margin:8px 0 4px;color:var(--text-strong);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stat-sub{color:var(--muted);font-size:.78em;font-variant-numeric:tabular-nums}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:.88em}
.tbl th,.tbl td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.tbl th{color:var(--muted);font-weight:600;font-size:.78em;text-transform:uppercase;letter-spacing:.04em}
.tbl tbody tr{transition:background .15s var(--ease)}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl td code,.key{font-family:var(--font-mono);font-size:.84em;color:var(--text-strong);word-break:break-all}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
  padding:10px 18px;border-radius:10px;cursor:pointer;
  font-size:.9rem;font-weight:600;letter-spacing:-.005em;
  transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 0 0 4px var(--accent-soft)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.small{padding:6px 12px;font-size:.8em;border-radius:8px}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger:hover{background:#b91c1c;border-color:#b91c1c;box-shadow:0 0 0 4px var(--danger-soft)}
.btn.ghost{background:transparent;color:var(--text-strong);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--muted-2);box-shadow:none}

/* ---------- Auth (login / register) ---------- */
.auth-shell{
  min-height:calc(100dvh - 64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
.auth-pane{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:48px 32px;
}
.auth-pane.form-pane{background:var(--bg)}
.auth-card{
  width:100%;max-width:380px;
  animation:auth-in .45s var(--ease);
}
@keyframes auth-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.auth-card .auth-logo{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;
  color:var(--text-strong);font-weight:680;letter-spacing:-.02em;font-size:1rem;
}
.auth-card .auth-logo .brand-mark{width:28px;height:28px;color:var(--accent)}
.auth-card h1{margin:0 0 8px;font-size:1.85rem;font-weight:680;letter-spacing:-.03em;color:var(--text-strong)}
.auth-card .auth-sub{margin:0 0 28px;color:var(--muted);font-size:.92em}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.auth-card label{
  display:flex;flex-direction:column;gap:6px;
  color:var(--muted);font-size:.78em;font-weight:500;letter-spacing:.02em;text-transform:uppercase;
}
.auth-card input{
  width:100%;padding:12px 14px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  font-size:.95em;font-family:inherit;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.auth-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-card .btn{width:100%;margin-top:8px;padding:13px}
.auth-card .auth-foot{margin:22px 0 0;color:var(--muted);font-size:.88em;text-align:center}
.auth-card .auth-foot a{color:var(--accent);font-weight:600}
.auth-card .auth-foot a:hover{text-decoration:underline}

/* Right preview pane — ChatGPT easter egg */
.auth-pane.preview-pane{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 60% at 70% 30%,var(--accent-soft),transparent 70%),
    linear-gradient(180deg,var(--surface) 0%,var(--bg-elev) 100%);
  border-left:1px solid var(--line);
}
.preview-frame{
  width:100%;max-width:460px;
  border:1px solid var(--line);border-radius:18px;
  background:var(--bg-elev);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:auth-in .6s var(--ease) .1s both;
}
.preview-head{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--line-soft);
}
.preview-dot{width:10px;height:10px;border-radius:50%;background:var(--surface-3)}
.preview-dot:nth-child(1){background:#ff5f57}
.preview-dot:nth-child(2){background:#febc2e}
.preview-dot:nth-child(3){background:#28c840}
.preview-title{margin-left:10px;color:var(--muted);font-size:.78em;font-family:var(--font-mono)}
.preview-body{padding:18px;display:flex;flex-direction:column;gap:14px;min-height:260px}
.chat-msg{display:flex;gap:12px;align-items:flex-start;animation:msg-in .35s var(--ease) both}
.chat-msg.user{flex-direction:row-reverse}
.chat-msg.user .chat-bubble{background:var(--accent);color:var(--on-accent);border-color:transparent}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-avatar{
  width:30px;height:30px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--accent);
}
.chat-msg.user .chat-avatar{background:var(--surface-3);color:var(--text-strong)}
.chat-avatar svg{width:16px;height:16px}
.chat-bubble{
  padding:10px 14px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line-soft);
  font-size:.9em;line-height:1.5;color:var(--text);
  max-width:80%;
}
.chat-bubble .cursor{display:inline-block;width:7px;height:1em;margin-left:2px;background:currentColor;vertical-align:-2px;animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr}
  .auth-pane.preview-pane{display:none}
}

/* ---------- Inline forms ---------- */
.inline-form{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}
.inline-form input[type="text"],.inline-form input[type="number"],.inline-form input[type="password"]{
  padding:9px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font:inherit;font-size:.88em;
  transition:border-color .15s var(--ease);
}
.inline-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- Chart (dashboard 7-day) ---------- */
.chart{display:flex;align-items:flex-end;gap:8px;height:170px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.bar{
  width:70%;min-height:3px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 60%,transparent));
  border-radius:6px 6px 0 0;
  transition:height .4s var(--ease),transform .2s var(--ease);
  cursor:pointer;
  animation:bar-rise .6s var(--ease) both;
}
.bar:hover{transform:scaleY(1.03);filter:brightness(1.1)}
@keyframes bar-rise{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1)}}
.bar-num{font-size:.78em;color:var(--muted);font-variant-numeric:tabular-nums}
.bar-day{font-size:.7em;color:var(--muted-2)}

.ok-dot{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:500}
.ok-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--accent-soft)}
.err-dot{display:inline-flex;align-items:center;gap:6px;color:var(--danger);font-weight:500}
.err-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}

details summary{cursor:pointer;color:var(--accent);margin:10px 0;font-weight:500;font-size:.9em}
details summary:hover{color:var(--accent-hover)}

.muted{color:var(--muted);font-size:.9em}

/* ---------- Scrollbar (subtle, like ChatGPT) ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}