/* =============================================
   main.css — БАЗОВЫЕ СТИЛИ
   Переменные, body, шрифты, loading, toast, header, navbar, onboarding, admin
   HappyGo 2.0
   ============================================= */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --g:#10b981;--gd:#059669;--gp:#ecfdf5;--gl:#d1fae5;
  --b:#2563eb;--bp:#dbeafe;
  --r:#ef4444;--a:#f59e0b;
  --ink:#0f172a;--tx:#1e293b;--mu:#64748b;--su:#94a3b8;
  --br:#e5e7eb;--bg:#f9fafb;
  --sh:0 4px 12px rgba(0,0,0,.08);
  --shx:0 20px 50px rgba(0,0,0,.15);
}
body{font-family:Inter,-apple-system,sans-serif;background:#f0f2f5;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:10px;-webkit-font-smoothing:antialiased}
body.dark{background:#1a1a2e}
.app{width:100%;max-width:430px;height:95vh;max-height:900px;background:#fff;border-radius:36px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;position:relative}
body.dark .app{background:#16213e}

/* LOADING */
#ov{position:absolute;inset:0;background:#fff;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:36px;transition:opacity .3s}
#ov.h{opacity:0;pointer-events:none}
body.dark #ov{background:#16213e}
.ov-logo{font-size:1.5rem;font-weight:900;color:var(--g)}
.ov-sp{width:32px;height:32px;border:3px solid var(--br);border-top-color:var(--g);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* TOAST */
.tw{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.t{background:#0f172a;color:#fff;padding:9px 18px;border-radius:22px;font-size:.8rem;font-weight:700;box-shadow:var(--shx);animation:tin .2s ease,tout .3s 2.5s ease forwards;max-width:90vw;text-align:center}
.t.ok{background:var(--g)}.t.w{background:var(--a);color:#0f172a}.t.e{background:var(--r)}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes tout{to{opacity:0}}

/* SCREENS */
.sc{display:none;flex-direction:column;height:100%;overflow:hidden}
.sc.on{display:flex}

/* HEADER */
.hd{background:#fff;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--br);flex-shrink:0;z-index:10;box-shadow:0 2px 12px rgba(15,23,42,.04)}
body.dark .hd{background:#0f3460;border-color:#2a3f6e}
.logo{display:flex;align-items:center;font-weight:800;font-size:17px;color:var(--ink);gap:7px}
body.dark .logo{color:#e0e0e0}
.logo i{color:var(--g);font-size:20px}
.hdr{display:flex;gap:7px;align-items:center}
.ib{width:33px;height:33px;border:none;background:var(--bg);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tx);font-size:14px;transition:background .15s}
.ib:hover{background:var(--br)}
body.dark .ib{background:#1a2a5e;color:#e0e0e0}
.pill{display:flex;align-items:center;gap:4px;background:var(--gp);color:var(--g);padding:4px 8px;border-radius:20px;font-size:.62rem;font-weight:700}
.pill.off{background:#fee2e2;color:var(--r)}
.pd{width:6px;height:6px;background:currentColor;border-radius:50%;animation:bl 1.4s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.3}}

/* Контейнер экранов — занимает всё свободное место */
#screens-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
/* Активный экран занимает весь контейнер */
#screens-container > .sc.on {
  flex: 1;
}