/* css/05-account.css — Account / My Profile page */
.acct-wrap{max-width:940px;margin:0 auto;padding:24px 20px 70px}

/* header card */
.acct-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:20px}
.acct-id{display:flex;align-items:center;gap:14px;min-width:0}
.acct-av{width:52px;height:52px;font-size:19px;font-weight:800;flex:none;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(180deg,var(--green-2),var(--green));color:#fff}
.acct-name{font-size:18px;font-weight:800;line-height:1.2}
.acct-email{font-size:12.5px;color:var(--txt-2);margin-top:2px}
.acct-headmeta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.acct-since{font-size:11.5px;color:var(--txt-3)}
.kyc-pill{font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;letter-spacing:.2px}
.kyc-pill.kyc-unverified{background:rgba(239,77,90,.14);color:var(--neg)}
.kyc-pill.kyc-pending{background:rgba(253,214,46,.16);color:var(--gold-2)}
.kyc-pill.kyc-verified{background:rgba(34,192,122,.16);color:var(--pos)}

/* body: tab rail + panel */
.acct-body{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start}
.acct-tabs{display:flex;flex-direction:column;gap:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:8px}
.acct-tab{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:13px;
  font-weight:600;color:var(--txt-2);text-align:left;transition:.14s}
.acct-tab .ic{font-size:15px;width:18px;text-align:center}
.acct-tab:hover{background:var(--panel-2);color:var(--txt)}
.acct-tab.on{background:rgba(34,160,109,.12);color:var(--green-2);border:1px solid rgba(34,160,109,.35)}
.acct-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 24px;min-height:340px}

/* panel content */
.ap-head h2{font-size:18px;font-weight:800}
.ap-head p{font-size:12.5px;color:var(--txt-3);margin:5px 0 18px;line-height:1.6}
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.ap-grid.one{grid-template-columns:1fr}
.fld{display:flex;flex-direction:column;gap:6px}
.fld span{font-size:11.5px;font-weight:700;color:var(--txt-2)}
.fld input,.fld select,.fld textarea{background:var(--input);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;color:var(--txt);font-size:13px;width:100%;transition:.14s}
.fld textarea{resize:vertical;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--green-2)}
.ap-save{max-width:200px}

/* sections */
.ap-sec{padding:16px 0;border-top:1px solid var(--line)}
.ap-sec:first-of-type{border-top:none;padding-top:0}
.ap-sub{font-size:13px;font-weight:700}
.ap-hint{font-size:11.5px;color:var(--txt-3);margin-top:2px}
.ap-note{font-size:11.5px;color:var(--txt-3);margin-top:10px;line-height:1.6}
.ap-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}

/* toggle switch */
.sw{width:44px;height:25px;border-radius:20px;background:var(--line-2);position:relative;flex:none;transition:.16s}
.sw i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.16s;
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw.on{background:var(--green-2)}
.sw.on i{left:22px}

/* KYC */
.kyc-status{display:inline-block;font-size:12px;font-weight:800;padding:6px 14px;border-radius:20px;margin-bottom:16px}
.kyc-status.kyc-unverified{background:rgba(239,77,90,.14);color:var(--neg)}
.kyc-status.kyc-pending{background:rgba(253,214,46,.16);color:var(--gold-2)}
.kyc-status.kyc-verified{background:rgba(34,192,122,.16);color:var(--pos)}
.kyc-steps{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.kyc-step{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--txt-2)}
.kyc-step:last-child{border-bottom:none}
.kyc-step .tick{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;background:var(--panel-3);color:var(--txt-3);flex:none}
.kyc-step.done{color:var(--txt)}
.kyc-step.done .tick{background:var(--pos);color:#fff}
.kyc-done{background:rgba(34,192,122,.1);border:1px solid rgba(34,192,122,.3);color:var(--pos);
  border-radius:10px;padding:14px 16px;font-size:13px;font-weight:600}

/* sessions */
.sess{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.sess b{font-weight:700}.sess span{color:var(--txt-3);margin-left:0}
.sess>div{display:flex;flex-direction:column;gap:2px}
.sess-now{color:var(--pos);font-weight:700}
.ap-sec .modal-btn.ghost{max-width:260px;margin-top:12px}

@media(max-width:720px){
  .acct-body{grid-template-columns:1fr}
  .acct-tabs{flex-direction:row;overflow-x:auto}
  .acct-tab{white-space:nowrap}
  .ap-grid{grid-template-columns:1fr}
  .acct-headmeta{align-items:flex-start}
}

/* ---- inline SVG icons (js/icons.js) — alignment across surfaces ---- */
.ic-svg{flex:none;vertical-align:-0.18em}
.acct-tab .ic{display:inline-flex;align-items:center;justify-content:center;width:18px;text-align:initial}
.acct-tab .ic .ic-svg,.dd-lbl .ic-svg,.dd-actions .mini .ic-svg,.kyc-done .ic-svg{vertical-align:0}
.dd-lbl{display:inline-flex;align-items:center;gap:9px}
.dd-actions .mini{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.kyc-done{display:flex;align-items:center;gap:9px}
.kyc-step .tick .ic-svg{vertical-align:0}
.close{display:inline-flex;align-items:center;justify-content:center}
.close .ic-svg{opacity:.75}.close:hover .ic-svg{opacity:1}
.seg button .ic-svg{vertical-align:-0.2em;margin-right:1px}

/* dropdown header refresh icon */
.dd-user-main{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.dd-refresh{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--txt-3);background:var(--panel);border:1px solid var(--line);transition:.15s}
.dd-refresh:hover{color:var(--green-2);border-color:var(--green-2)}
.dd-refresh.spin .ic-svg{animation:ddspin .6s linear infinite}
@keyframes ddspin{to{transform:rotate(360deg)}}