:root{
  --bg:#0d0f14; --bg2:#151922; --card:#1a1f2b; --card2:#20263400; --line:#2a3140;
  --txt:#e7ecf3; --muted:#8a94a6; --accent:#6c8cff; --accent2:#a06bff;
  --ok:#38d39f; --warn:#ffb454; --err:#ff5c6c;
  --ig1:#feda75; --ig2:#d62976; --ig3:#4f5bd5;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  background:var(--bg);color:var(--txt);font-size:14px;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.muted{color:var(--muted)}
a{color:var(--accent)}
button{cursor:pointer;border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;transition:.15s}
button:hover{filter:brightness(1.08)}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:500}
button.ghost:hover{color:var(--txt);border-color:var(--muted)}
button.danger{background:transparent;border:1px solid #4a2530;color:var(--err);font-weight:500}
input,textarea,select{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);padding:11px 13px;font-size:14px;font-family:inherit;outline:none}
input:focus,textarea:focus{border-color:var(--accent)}
label{display:block;margin:14px 0 6px;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%,#1c2540,transparent),var(--bg)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px;width:340px;text-align:center}
.login-card input{margin:18px 0 12px;text-align:center}
.login-card button{width:100%}
.logo-big{font-size:24px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.err{color:var(--err);font-size:13px;margin-top:10px;min-height:16px}

/* topbar */
.topbar{display:flex;align-items:center;gap:20px;padding:0 22px;height:58px;
  background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:800;font-size:17px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.tabs{display:flex;gap:4px;flex:1;overflow-x:auto}
.tabs .tab{padding:8px 15px;border-radius:9px;color:var(--muted);font-weight:600;white-space:nowrap;
  background:transparent;border:none;font-size:14px}
.tabs .tab:hover{color:var(--txt);background:#ffffff08}
.tabs .tab.active{color:var(--txt);background:#ffffff12}
.tabs .tab .dot{font-size:9px;margin-left:6px}
.topright{display:flex;align-items:center;gap:12px}
.pill{font-size:12px;color:var(--muted);background:#ffffff08;padding:5px 11px;border-radius:20px}
.pill .on{color:var(--ok)} .pill .off{color:var(--err)}

/* layout */
main{padding:26px;max-width:1180px;margin:0 auto}
.page-title{font-size:22px;font-weight:700;margin:0 0 4px}
.page-sub{color:var(--muted);margin:0 0 22px}
.grid{display:grid;gap:16px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid.c3,.grid.c2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h3{margin:0 0 12px;font-size:15px}
.stat{font-size:26px;font-weight:800;margin:6px 0 2px}
.stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* tables / lists */
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0}
.row .sub{color:var(--muted);font-size:12px}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:#ffffff10}
.tag.ok{background:#123c30;color:var(--ok)} .tag.warn{background:#3a2c12;color:var(--warn)}
.tag.err{background:#3a1820;color:var(--err)} .tag.new{background:#1c2a4a;color:var(--accent)}
.tag.queued{background:#2a2340;color:var(--accent2)}

/* network hero */
.hero{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.hero .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px}
.ic.instagram{background:linear-gradient(135deg,var(--ig1),var(--ig2) 55%,var(--ig3))}
.ic.tiktok{background:#111;border:1px solid #333}
.ic.tenchat{background:linear-gradient(135deg,#ff7a45,#ff4d6d)}
.badge-soon{font-size:11px;font-weight:700;color:var(--warn);border:1px solid #3a2c12;padding:3px 8px;border-radius:20px}

/* device */
.device-card{display:flex;gap:16px}
.screen{width:150px;height:266px;border-radius:14px;border:2px solid var(--line);background:#000;object-fit:cover;flex:none}
.checks label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;color:var(--txt);font-weight:500;margin:8px 0}
.checks input{width:auto}
.net-pick{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.net-pick .np{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.net-pick .np.on{border-color:var(--accent);background:#6c8cff18}
.net-pick .np.disabled{opacity:.4;cursor:not-allowed}
.toast{position:fixed;bottom:22px;right:22px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--ok);padding:13px 18px;border-radius:10px;opacity:0;transform:translateY(10px);transition:.25s;z-index:50}
.toast.show{opacity:1;transform:none}
.empty{color:var(--muted);text-align:center;padding:30px;border:1px dashed var(--line);border-radius:12px}

/* interactive phone */
.ig-layout{display:grid;grid-template-columns:390px 1fr;gap:18px;align-items:start}
@media(max-width:900px){.ig-layout{grid-template-columns:1fr}}
.open-app{padding:8px 14px;font-size:13px}
.phone-wrap{margin-top:6px}
.phone-frame{background:#000;border:7px solid #04060b;border-radius:28px;overflow:hidden;width:100%;max-width:340px;
  margin:0 auto;box-shadow:0 10px 44px #000a}
.phone-screen{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#000;
  touch-action:none;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none}
.phone-ctrl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.phone-ctrl button{padding:9px 16px;font-size:15px;min-width:48px}
.phone-hint{font-size:12px;text-align:center;margin-top:10px;line-height:1.5}

/* embedded live browser */
.browser-frame{width:100%;height:72vh;min-height:520px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#000}
.browser-frame iframe{width:100%;height:100%;border:none;display:block}

/* connections */
.conn-card{display:flex;flex-direction:column}
.conn-ic{width:38px;height:38px;border-radius:10px;background:#ffffff10;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.mbadge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.mbadge.m-api{background:#123c30;color:var(--ok)}
.mbadge.m-oauth{background:#123c30;color:var(--ok)}
.mbadge.m-web{background:#2a2340;color:var(--accent2)}
.mbadge.m-emu{background:#3a1820;color:var(--err)}
.mbadge.m-native{background:#1c2a4a;color:var(--accent)}
.conn-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.cchip{font-size:11px;padding:3px 9px;border-radius:20px;background:#ffffff0d;color:var(--muted);border:1px solid var(--line)}
.conn-lim{font-size:11px;color:var(--muted);margin:8px 0 2px;padding:6px 9px;background:#ffffff08;border-radius:8px;cursor:help}
.conn-body{margin-top:8px}
.conn-body label{margin:10px 0 5px}
.conn-help{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.conn-help summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:600;list-style:none}
.conn-help summary::-webkit-details-marker{display:none}
.conn-help ol{margin:10px 0 2px;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.7}
.conn-help li{margin:2px 0}