/* ===========================================================================
   accounts.css — auth gate, profile menu, API-keys page, trading-mode dropdown
   Dark theme to match the app (navy surfaces, amber accent).
   =========================================================================== */

:root{
  --acc-amber:#f59e0b; --acc-green:#16a34a; --acc-red:#ef4444;
  --acc-bg:#0b1220; --acc-panel:#141e33; --acc-panel2:#1b2740;
  --acc-border:#26324d; --acc-text:#e8edf7; --acc-mut:#8a95ad;
}

/* ── Auth overlay ─────────────────────────────────────────────────────────── */
#auth-overlay{
  position:fixed; inset:0; z-index:10000;
  background:linear-gradient(150deg,#0b1220,#141e33 60%,#1b2740);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-card{
  width:380px; max-width:100%; background:var(--acc-panel);
  border:1px solid var(--acc-border); border-radius:14px; padding:28px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.auth-logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; color:#fff; margin-bottom:4px;}
.auth-logo svg{color:var(--acc-amber);}
.auth-sub{color:var(--acc-mut); font-size:12.5px; margin-bottom:20px;}
.auth-tabs{display:flex; gap:6px; margin-bottom:16px;}
.auth-tab{flex:1; text-align:center; padding:8px; border-radius:8px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--acc-mut); background:var(--acc-panel2);
  border:1px solid transparent;}
.auth-tab.active{color:#0b1220; background:var(--acc-amber); }
.auth-field{margin-bottom:12px;}
.auth-field label{display:block; font-size:11px; color:var(--acc-mut); margin-bottom:5px; text-transform:uppercase; letter-spacing:.4px;}
.auth-field input{width:100%; box-sizing:border-box; padding:10px 12px; border-radius:8px;
  background:var(--acc-bg); border:1px solid var(--acc-border); color:var(--acc-text); font-size:14px;}
.auth-field input:focus{outline:none; border-color:var(--acc-amber);}
.auth-btn{width:100%; padding:11px; border:none; border-radius:9px; cursor:pointer;
  background:var(--acc-amber); color:#0b1220; font-weight:700; font-size:14px; margin-top:6px;}
.auth-btn:disabled{opacity:.6; cursor:default;}
.auth-err{color:var(--acc-red); font-size:12.5px; min-height:16px; margin:8px 0 2px;}
.auth-hint{color:var(--acc-mut); font-size:11.5px; text-align:center; margin-top:14px;}

/* ── Profile menu (top bar) ───────────────────────────────────────────────── */
#profile-btn{display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 8px 4px 4px;
  border-radius:20px; border:1px solid var(--acc-border); background:var(--acc-panel2); margin-left:10px;}
#profile-btn:hover{border-color:var(--acc-amber);}
.pf-avatar{width:26px; height:26px; border-radius:50%; background:var(--acc-amber); color:#0b1220;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px;}
.pf-name{font-size:12.5px; color:var(--acc-text); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-plan{font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:10px; text-transform:uppercase;}
.pf-plan.free{background:#33405c; color:#cdd7ee;}
.pf-plan.premium{background:var(--acc-amber); color:#0b1220;}

#profile-menu{position:fixed; top:52px; right:14px; width:248px; z-index:10001;
  background:var(--acc-panel); border:1px solid var(--acc-border); border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.5); overflow:hidden; display:none;}
#profile-menu.open{display:block;}
.pm-head{padding:14px 15px; border-bottom:1px solid var(--acc-border);}
.pm-head .nm{font-weight:700; color:#fff; font-size:14px;}
.pm-head .em{color:var(--acc-mut); font-size:11.5px; margin-top:2px;}
.pm-item{display:flex; align-items:center; gap:10px; padding:10px 15px; cursor:pointer; color:var(--acc-text); font-size:13px;}
.pm-item:hover{background:var(--acc-panel2);}
.pm-item svg{color:var(--acc-mut); flex:0 0 auto;}
.pm-item.danger{color:#fca5a5;}
.pm-sep{height:1px; background:var(--acc-border);}

/* ── Generic modal ────────────────────────────────────────────────────────── */
.acc-modal-bg{position:fixed; inset:0; z-index:10002; background:rgba(5,9,18,.65);
  display:flex; align-items:center; justify-content:center; padding:24px;}
.acc-modal{width:560px; max-width:100%; max-height:86vh; overflow:auto; background:var(--acc-panel);
  border:1px solid var(--acc-border); border-radius:14px; padding:22px 24px;}
.acc-modal h3{margin:0 0 4px; color:#fff; font-size:17px;}
.acc-modal .mh-sub{color:var(--acc-mut); font-size:12.5px; margin-bottom:16px;}
.acc-modal .close-x{float:right; cursor:pointer; color:var(--acc-mut); font-size:20px; line-height:1;}

/* ── Plans (billing) ──────────────────────────────────────────────────────── */
.plan-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.plan-card{border:1px solid var(--acc-border); border-radius:12px; padding:16px; background:var(--acc-panel2);}
.plan-card.current{border-color:var(--acc-amber);}
.plan-card .pname{font-weight:800; font-size:15px; color:#fff;}
.plan-card .pprice{font-size:22px; font-weight:800; color:var(--acc-amber); margin:6px 0;}
.plan-card .pprice small{font-size:12px; color:var(--acc-mut); font-weight:500;}
.plan-card ul{list-style:none; padding:0; margin:10px 0; font-size:12.5px; color:var(--acc-text);}
.plan-card li{padding:3px 0; display:flex; gap:7px;}
.plan-card li .ok{color:var(--acc-green);} .plan-card li .no{color:var(--acc-mut);}
.plan-card .pbtn{width:100%; padding:9px; border:none; border-radius:8px; cursor:pointer; font-weight:700; font-size:13px;}
.pbtn.up{background:var(--acc-amber); color:#0b1220;}
.pbtn.cur{background:#33405c; color:#cdd7ee; cursor:default;}
.billing-note{margin-top:14px; font-size:11.5px; color:var(--acc-mut); text-align:center;}

/* ── API Keys page ────────────────────────────────────────────────────────── */
.akp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:14px;}
.ak-card{border:1px solid var(--acc-border); border-radius:12px; background:var(--acc-panel); padding:16px;}
.ak-card .ak-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.ak-ex{font-weight:800; color:#fff; font-size:15px; text-transform:capitalize;}
.ak-badge{font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:9px; text-transform:uppercase;}
.ak-badge.paper{background:#1f3a2e; color:#7ee0a8;}
.ak-badge.live{background:#3a2330; color:#f6a5c0;}
.ak-badge.test{background:#33405c; color:#cdd7ee;}
.ak-row{font-size:12px; color:var(--acc-mut); margin:3px 0; font-family:monospace;}
.ak-actions{margin-top:12px; display:flex; gap:8px;}
.ak-empty{color:var(--acc-mut); font-size:12.5px; padding:10px 0;}
.ak-locked{opacity:.55;}

.acc-btn{padding:8px 13px; border-radius:8px; border:1px solid var(--acc-border); cursor:pointer;
  background:var(--acc-panel2); color:var(--acc-text); font-size:12.5px; font-weight:600;}
.acc-btn.primary{background:var(--acc-amber); color:#0b1220; border-color:var(--acc-amber);}
.acc-btn.danger{color:#fca5a5; border-color:#5b2b32;}
.acc-btn:hover{filter:brightness(1.08);}

/* ── Trading-mode dropdown ────────────────────────────────────────────────── */
.tm-wrap{position:relative; display:inline-block;}
.tm-btn{display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:8px;
  border:1px solid var(--acc-border); background:var(--acc-panel2); color:var(--acc-text);
  cursor:pointer; font-size:13px; font-weight:600;}
.tm-btn .dot{width:8px; height:8px; border-radius:50%; background:var(--acc-amber);}
.tm-menu{position:absolute; top:110%; left:0; min-width:200px; z-index:50; background:var(--acc-panel);
  border:1px solid var(--acc-border); border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.5);
  overflow:hidden; display:none;}
.tm-menu.open{display:block;}
.tm-opt{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px;
  cursor:pointer; font-size:13px; color:var(--acc-text);}
.tm-opt:hover{background:var(--acc-panel2);}
.tm-opt.locked{opacity:.6; cursor:not-allowed;}
.tm-opt .tm-reason{font-size:10px; color:var(--acc-mut);}
.tm-opt .tm-lock{color:var(--acc-amber); font-size:11px;}
.nav-lock{margin-left:auto; font-size:10px; opacity:.7;}

/* ── Screener gear popup + Telegram form fields ───────────────────────────── */
.scf-gear{margin-left:auto;}
.scf-tabs{display:flex; gap:6px; margin:4px 0 14px; flex-wrap:wrap;}
.scf-tab{padding:6px 12px; border-radius:8px; background:var(--acc-panel2); color:var(--acc-mut);
  font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid transparent;}
.scf-tab.active{background:var(--acc-amber); color:#0b1220;}
.scf-desc{font-size:12px; color:var(--acc-mut); margin-bottom:12px;}
.scf-group{margin-bottom:14px;}
.scf-glabel{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--acc-amber); margin-bottom:6px; font-weight:700;}
.scf-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;}
.scf-field{display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--acc-mut);}
.scf-field > span em{font-style:normal; opacity:.7;}
.scf-field input[type=number], .scf-field input[type=text], .scf-field input[type=password],
.scf-field input:not([type]), .scf-field select{
  padding:8px 10px; border-radius:7px; background:var(--acc-bg); border:1px solid var(--acc-border);
  color:var(--acc-text); font-size:13px;}
.scf-field input:focus, .scf-field select:focus{outline:none; border-color:var(--acc-amber);}
.scf-bool{flex-direction:row; align-items:center; justify-content:space-between;}
.scf-multi{display:flex; flex-wrap:wrap; gap:8px;}
.scf-chk{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--acc-text);}
.scf-enable{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--acc-text); margin:6px 0 12px;}
.scf-actions{display:flex; align-items:center; justify-content:flex-end; gap:12px; border-top:1px solid var(--acc-border); padding-top:12px;}
.scf-msg{font-size:12px; color:var(--acc-mut);}