/* =============================================================
   account.css — the Account area (Dashboard, Exchange Connections, Profile, Security, Preferences).
   Uses the terminal's own tokens (--panel, --line, --amber, --green, --red, --dim …) so it reads as the same app.
   Layout is flex/grid with wrapping rather than wide tables, so rows turn into stacked cards on phones and nothing scrolls sideways.
   ============================================================= */
#panelAccount{ min-width:0; }
#panelAccount .ac-section[hidden]{ display:none; }
.ac-section{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.ac-block{ min-width:0; }

/* sub-tabs: one scrollable row on every width, never wrapping off-screen */
.ac-tabs{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ac-tabs::-webkit-scrollbar{ display:none; }
.ac-tabs .navtab{ flex:none; white-space:nowrap; }

/* welcome */
.ac-welcome{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ac-welcome h3{ margin:0; font-family:var(--disp); font-size:20px; line-height:1.2; overflow-wrap:anywhere; }
.ac-sub{ margin-top:4px; font-size:12px; color:var(--dim); line-height:1.5; overflow-wrap:anywhere; }

/* stat cards: 4-up on desktop, 2-up on tablet/phone, 1-up on the narrowest */
.ac-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.ac-stats .ov-card{ min-width:0; }
.ac-stats .ov-value{ overflow-wrap:anywhere; }
.ac-card-sub{ margin-top:6px; font-size:11px; line-height:1.45; color:var(--dim); }
.ac-pos{ color:var(--green); }
.ac-neg{ color:var(--red); }
.ac-dim{ color:var(--dim); }
@media (max-width:900px){ .ac-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:340px){ .ac-stats{ grid-template-columns:minmax(0, 1fr); } }

/* quick actions: icon tiles (a quiet surface, one icon, one label — gold only on hover/focus) */
.ac-actions{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }
.ac-tile{
  display:flex; align-items:center; gap:12px; min-width:0; min-height:52px; padding:9px 12px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); color:var(--ink); text-decoration:none;
  font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.01em;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ac-tile-ic{
  flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; font-size:16px;
  color:var(--amber); background:rgba(240,180,41,.08); border:1px solid rgba(240,180,41,.22); border-radius:8px;
}
.ac-tile-t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-tile-go{ flex:none; color:var(--dim2, var(--dim)); font-size:15px; transition:transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.ac-tile:hover{ border-color:rgba(240,180,41,.55); background:#171d19; transform:translateY(-1px); }
.ac-tile:hover .ac-tile-go{ color:var(--amber); transform:translateX(2px); }
.ac-tile:active{ transform:translateY(0); }
.ac-tile:focus-visible{ outline:none; border-color:var(--amber); box-shadow:var(--focus-ring); }

/* icon button (Refresh, per-row Test) and the one text+icon button of the page */
.ac-iconbtn, .ac-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font:inherit;
  color:var(--ink-dim); background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-btn);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ac-iconbtn{ width:var(--touch-target, 44px); height:var(--touch-target, 44px); padding:0; font-size:18px; }
.ac-iconbtn.ac-mini{ width:34px; height:34px; min-height:0; padding:0; font-size:16px; }
.ac-btn{ min-height:var(--touch-target, 44px); padding:0 16px; font-family:var(--disp); font-weight:600; font-size:12.5px; }
.ac-btn .icon{ font-size:16px; color:var(--amber); }
.ac-iconbtn:hover:not(:disabled), .ac-btn:hover:not(:disabled){ color:var(--amber); border-color:rgba(240,180,41,.55); background:#171d19; }
.ac-iconbtn:focus-visible, .ac-btn:focus-visible{ outline:none; border-color:var(--amber); box-shadow:var(--focus-ring); }
.ac-iconbtn:disabled, .ac-btn:disabled{ cursor:progress; opacity:.7; }
.ac-iconbtn.is-busy .icon, .ac-btn.is-busy .icon, .ac-iconbtn:disabled .icon{ animation:acSpin 1s linear infinite; }
@keyframes acSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .ac-iconbtn.is-busy .icon, .ac-btn.is-busy .icon, .ac-iconbtn:disabled .icon{ animation:none; }
  .ac-tile, .ac-tile-go{ transition:none; }
}
.ac-cell-act{ display:flex; justify-content:flex-end; }
.ac-link{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; min-height:38px; }
.ac-mini{ min-height:32px; padding:5px 12px; font-size:11.5px; }

/* list rows: a wrapping grid so each row is a table row on desktop and a small card on phones */
.ac-list{ display:flex; flex-direction:column; }
.ac-row{
  display:grid; grid-template-columns:minmax(0, 2fr) repeat(auto-fit, minmax(120px, 1fr)); gap:6px 14px; align-items:center;
  padding:11px 0; border-top:1px solid var(--line-soft); font-size:12.5px;
}
.ac-row:first-child{ border-top:0; }
.ac-main{ min-width:0; overflow-wrap:anywhere; }
.ac-cell{ min-width:0; overflow-wrap:anywhere; }
.ac-empty{ padding:12px 0; font-size:12.5px; color:var(--dim); line-height:1.6; }
.ac-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; padding-top:12px; border-top:1px solid var(--line-soft); }
.ac-foot[hidden]{ display:none; }
.ac-hint{ font-size:11.5px; line-height:1.5; color:var(--dim); font-weight:400; text-transform:none; letter-spacing:0; }
.ac-note{ margin-bottom:2px; }
.ac-callout{ font-size:12.5px; line-height:1.65; color:var(--ink-dim); background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:var(--r-md); padding:12px 14px; margin:8px 0 12px; }
.ac-messages:empty{ display:none; }

/* forms */
.ac-form{ display:flex; flex-direction:column; gap:12px; max-width:460px; margin-top:12px; }
.ac-form .field input{ width:100%; box-sizing:border-box; min-height:44px; font-size:16px; }   /* 16px stops iOS zooming into the field */
.ac-form .btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
.ac-msg{ min-height:0; font-size:12px; line-height:1.5; }
.ac-msg.ok{ color:var(--green); }
.ac-msg.bad{ color:var(--red); }
.ac-msg:empty{ display:none; }

/* profile list */
.ac-dl{ margin:6px 0 4px; display:flex; flex-direction:column; }
.ac-dl-row{ display:grid; grid-template-columns:minmax(110px, 170px) minmax(0, 1fr); gap:10px; padding:9px 0; border-top:1px solid var(--line-soft); font-size:12.5px; }
.ac-dl-row:first-child{ border-top:0; }
.ac-dl dt{ color:var(--dim); text-transform:uppercase; letter-spacing:.07em; font-size:10.5px; padding-top:2px; }
.ac-dl dd{ margin:0; overflow-wrap:anywhere; }

/* danger zone */
.ac-danger{ margin-top:14px; border:1px solid var(--red-line, #4a2024); border-radius:var(--r-md); background:#140c0d; }
.ac-danger > summary{ cursor:pointer; padding:12px 14px; color:var(--red); font-weight:600; font-size:12.5px; list-style:none; min-height:44px; display:flex; align-items:center; }
.ac-danger > summary::-webkit-details-marker{ display:none; }
.ac-danger-body{ padding:2px 14px 14px; font-size:12.5px; line-height:1.65; color:var(--ink-dim); display:flex; flex-direction:column; gap:10px; }
.ac-danger-body p, .ac-danger-body ul{ margin:0; }
.ac-danger-body ul{ padding-left:18px; }
button.primary.danger{ background:var(--red); border-color:var(--red); color:#fff; }
button.primary.danger:disabled{ opacity:.45; cursor:not-allowed; }

/* exchange connection rows (rendered by js/autotrade.js) */
#panelAccount .connect-note{ grid-column:1 / -1; font-size:11px; color:var(--dim); line-height:1.5; overflow-wrap:anywhere; }

/* ---------- phones ---------- */
@media (max-width:768px){
  .ac-row{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); padding:12px 0; }
  .ac-row > .ac-main{ grid-column:1 / -1; }
  .ac-dl-row{ grid-template-columns:minmax(0, 1fr); gap:2px; }
  .ac-form{ max-width:none; }
  .ac-welcome{ flex-wrap:nowrap; }   /* title left, icon button right — an icon doesn't need a full-width row */
  .ac-welcome > .ac-iconbtn{ flex:none; }
  .ac-actions{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ac-tile{ padding:8px 10px; gap:9px; }
  .ac-tile-go{ display:none; }
  .ac-foot > .ac-btn{ width:100%; }
  .ac-cell-act{ justify-content:flex-start; }
  .ac-form .btn-row > button{ flex:1 1 100%; min-height:46px; }
  #panelAccount .btn-row > button{ min-height:44px; }
  /* the sticky sub-tab bar sits under the app bar; keep long section content clear of the fixed bottom tab bar */
  #panelAccount{ padding-bottom:12px; }
}
@media (max-width:340px){ .ac-actions{ grid-template-columns:minmax(0, 1fr); } }