/* Басты бет пен «Датчиктер» беті үшін ортақ стиль (қосымшалармен бірдей түстер) */
:root{
  --bg:#f3f5f1; --surface:#ffffff; --surface2:#e9eee8; --line:#d3dbd2;
  --fg:#17221d; --muted:#5b6b63; --accent:#1f6b5c; --accent2:#e3a234; --accentFg:#ffffff;
  --ok:#2f8a4c; --warn:#c98a10; --bad:#c2412d; --info:#2f6fb0;
  --z1:#e3a234; --z2:#b5653a; --z3:#7d4c9e; --z4:#3a8fb5;
  --display:"Rubik","Segoe UI",system-ui,sans-serif; --body:"Inter","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1714; --surface:#16211d; --surface2:#1d2a25; --line:#2b3a34;
  --fg:#e3ece7; --muted:#93a59c; --accent:#4fb39c; --accent2:#f0b552; --accentFg:#0c1411;
  --ok:#5cc07a; --warn:#e9b145; --bad:#ef6f5a; --info:#6aa6e6;
  --z1:#f0b552; --z2:#d98b5f; --z3:#a882c6; --z4:#6bb6d8; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1714; --surface:#16211d; --surface2:#1d2a25; --line:#2b3a34;
  --fg:#e3ece7; --muted:#93a59c; --accent:#4fb39c; --accent2:#f0b552; --accentFg:#0c1411;
  --ok:#5cc07a; --warn:#e9b145; --bad:#ef6f5a; --info:#6aa6e6;
  --z1:#f0b552; --z2:#d98b5f; --z3:#a882c6; --z4:#6bb6d8; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:var(--body);font-size:15px;line-height:1.55}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.2;text-wrap:balance}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
header.top{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand h1{font-size:18px;font-weight:700}
.brand small{display:block;color:var(--muted);font:12px var(--body)}
.topnav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.pill{display:inline-flex;align-items:center;gap:6px;font:12px var(--mono);color:var(--muted)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.pill i.ok{background:var(--ok)} .pill i.bad{background:var(--bad)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
button,select,input{font:inherit;color:inherit}
select,input{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
button{padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);cursor:pointer}
footer{padding:28px 0 40px;color:var(--muted);font-size:13px}