*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#f4f7fb;--nav:#ffffff;--card:#ffffff;--card2:#f8fafc;
  --txt:#0f172a;--txt2:#334155;--txt3:#64748b;--muted:#94a3b8;
  --border:#dbe5f0;--border2:#cbd5e1;--input-bg:#ffffff;--input-disabled:#f1f5f9;
  --hover:#eef4ff;--danger-bg:#fff1f2;--platform-row-bg:#ffffff;
  --avatar-bg:#eaf1f8;--avatar-border:#dbe5f0;--avatar-ring:#f4f7fb;
  --plan-bg:#eaf4ff;--plan-border:#93c5fd;--plan-color:#2563eb;
  --pro-bg:#ecfdf5;--pro-border:#86efac;--pro-color:#16a34a;
  --red:#dc2626;--red-soft:#fff1f2;--green:#16a34a;--green-soft:#ecfdf5;
  --accent:#2563eb;--accent-soft:rgba(37,99,235,.08);
}
:root.dark{
  --bg:#061221;--nav:#0a1726;--card:#0a111c;--card2:#0f1e30;
  --txt:#dde8f5;--txt2:#7a9bbf;--txt3:#4d7196;--muted:#2a4766;
  --border:#1e3048;--border2:#243d57;--input-bg:#061221;--input-disabled:#081728;
  --hover:#0a111c;--danger-bg:#2d0a0a;--platform-row-bg:#061221;
  --avatar-bg:#1a2e44;--avatar-border:#1e3048;--avatar-ring:#061221;
  --plan-bg:#1a2e44;--plan-border:#2d8fc8;--plan-color:#38bdf8;
  --pro-bg:#0d2818;--pro-border:#4ade80;--pro-color:#4ade80;
  --red:#f87171;--red-soft:#2d0a0a;--green:#4ade80;--green-soft:#0d2818;
  --accent:#2563eb;--accent-soft:rgba(37,99,235,.08);
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;}
nav{background:var(--nav);border-bottom:1px solid var(--border);padding:0 28px;display:flex;align-items:center;gap:16px;height:60px;position:sticky;top:0;z-index:50;}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;}
.logo-bar{width:6px;height:26px;background:linear-gradient(180deg,#2563eb,#0891b2);border-radius:3px;}
.logo-txt{font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:var(--txt);letter-spacing:-0.02em;}
.nav-links{display:flex;gap:4px;margin-left:auto;}
.nav-link{background:transparent;border:none;color:var(--txt3);padding:7px 14px;border-radius:6px;cursor:pointer;font-size:13px;text-decoration:none;display:flex;align-items:center;}
.nav-link:hover{background:var(--hover);color:var(--txt);}
.nav-link.active{color:#2563eb;font-weight:600;}
.btn-logout{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--txt3);padding:6px 14px;cursor:pointer;font-size:12px;font-family:'DM Sans',sans-serif;}
.btn-logout:hover{color:var(--red);border-color:var(--red);}
main{max-width:640px;margin:0 auto;padding:40px 20px;}
h1{font-size:24px;font-weight:700;margin-bottom:4px;}
.subtitle{color:var(--txt3);font-size:14px;margin-bottom:32px;}
.section{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px;}
.section h2{font-size:14px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.section h2 span{font-size:16px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px;}
.field input{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:7px;color:var(--txt);padding:10px 13px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .15s;}
.field input:focus{border-color:#2563eb;}
.field input:disabled{background:var(--input-disabled);opacity:.7;cursor:not-allowed;}
.btn{background:linear-gradient(135deg,#2563eb,#3b82f6);border:none;border-radius:7px;color:#fff;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s;}
.btn:hover{opacity:.9;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-ghost{background:transparent;border:1px solid var(--border);border-radius:7px;color:var(--txt3);padding:9px 20px;font-size:13px;font-weight:500;cursor:pointer;}
.btn-ghost:hover{border-color:var(--border2);color:var(--txt);}
.btn-danger{background:transparent;border:1px solid var(--red);border-radius:7px;color:var(--red);padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;}
.btn-danger:hover{background:var(--red-soft);}
.btn-secondary{background:transparent;border:1px solid var(--border2);border-radius:7px;color:var(--txt);padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;}
.btn-secondary:hover{border-color:#2563eb;background:var(--accent-soft);}
.btn-secondary:disabled{opacity:.6;cursor:wait;}
.plan-badge{display:inline-flex;align-items:center;gap:5px;background:var(--plan-bg);border:1px solid var(--plan-border);border-radius:20px;color:var(--plan-color);padding:3px 12px;font-size:11px;font-weight:700;letter-spacing:0.05em;}
.plan-badge.pro{background:var(--pro-bg);border-color:var(--pro-border);color:var(--pro-color);}
.plan-badge.individual{background:#eef6ff;border-color:#93c5fd;color:#2563eb;}
.plan-badge.enterprise{background:#f5f3ff;border-color:#a78bfa;color:#7c3aed;}
.plan-badge.test{background:#ecfeff;border-color:#22d3ee;color:#0e7490;}
:root.dark .plan-badge.individual{background:#10233d;border-color:#2563eb;color:#60a5fa;}
:root.dark .plan-badge.enterprise{background:#23193d;border-color:#7c3aed;color:#c4b5fd;}
:root.dark .plan-badge.test{background:#083344;border-color:#0891b2;color:#67e8f9;}
.plan-card{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:14px;}
.plan-card-title{font-size:13px;font-weight:800;color:var(--txt);margin-bottom:5px;}
.plan-card-copy{font-size:12px;line-height:1.55;color:var(--txt3);}
.plan-feature-list{list-style:none;margin-top:10px;display:grid;gap:7px;}
.plan-feature-list li{font-size:12px;line-height:1.35;color:var(--txt2);display:flex;gap:7px;}
.plan-feature-list li:before{content:'✓';color:var(--green);font-weight:800;}
.billing-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.billing-actions .btn-secondary{flex:1 1 150px;min-height:38px;}
.billing-actions .btn-secondary.active-plan{border-color:var(--green);color:var(--green);background:var(--green-soft);}
.billing-actions .btn-secondary:disabled{cursor:not-allowed;opacity:.62;}
.billing-cycle-row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;margin-top:12px;}
.billing-cycle-row label{font-size:11px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.08em;}
.plan-test-grid{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px;}
.plan-select{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:7px;color:var(--txt);padding:9px 12px;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;}
.plan-select:disabled{opacity:.6;cursor:not-allowed;}
.plan-note{font-size:11.5px;line-height:1.5;color:var(--txt3);margin-top:10px;}
.msg{padding:8px 12px;border-radius:6px;font-size:12px;margin-top:10px;display:none;}
.msg.ok{background:var(--green-soft);border:1px solid var(--green);color:var(--green);display:block;}
.msg.err{background:var(--red-soft);border:1px solid var(--red);color:var(--red);display:block;}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.loading{text-align:center;color:var(--txt3);padding:60px;font-size:14px;}
.platform-grid{display:grid;gap:10px;}
.platform-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--platform-row-bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.platform-main{display:flex;align-items:center;gap:10px;min-width:0;}
.platform-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#0891b2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;flex-shrink:0;}
.platform-name{font-size:13px;font-weight:700;color:var(--txt);}
.platform-status{font-size:11px;color:var(--txt3);margin-top:2px;white-space:normal;}
.platform-status.connected{color:var(--green);}
.platform-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.platform-actions .btn,.platform-actions .btn-ghost{padding:7px 12px;font-size:12px;}
@media(max-width:620px){
  .platform-row{align-items:flex-start;flex-direction:column;}
  .platform-actions{width:100%;}
  .platform-actions button{flex:1;}
}