/* ============================================================
   Coindaily - Account settings page
   ============================================================ */
.acct-hero { border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.acct-hero .wrap { padding: 30px 0 26px; }
.acct-crumb { font: 500 12px/1 var(--sans); color: var(--tx-mid); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.acct-crumb a { color: var(--tx-mid); text-decoration: none; }
.acct-crumb a:hover { color: var(--tx); }
.acct-crumb .sep { color: var(--tx-faint); }
.acct-hero h1 { font: 700 30px/1.1 var(--sans); color: var(--tx-hi); margin: 0 0 8px; letter-spacing: -0.01em; }
.acct-hero .lede { font: 400 14px/1.6 var(--sans); color: var(--tx); margin: 0; max-width: 60ch; }

.acct-wrap { max-width: 760px; margin: 0 auto; padding: 26px 0 64px; }

/* state panels (loading / signed out / unconfigured) */
.acct-state { text-align: center; padding: 64px 24px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--panel); }
.acct-state h2 { font: 600 18px/1.3 var(--sans); color: var(--tx-hi); margin: 0 0 8px; }
.acct-state p { font: 400 14px/1.6 var(--sans); color: var(--tx); margin: 0 auto 18px; max-width: 46ch; }
.acct-spin { width: 22px; height: 22px; border: 2px solid var(--hairline); border-top-color: var(--amber); border-radius: 50%; animation: acct-rot .7s linear infinite; margin: 0 auto 16px; }
@keyframes acct-rot { to { transform: rotate(360deg); } }

/* cards */
.acct-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--panel); margin-bottom: 16px; overflow: hidden; }
.acct-card-head { padding: 16px 20px 0; }
.acct-card-head h2 { font: 600 15px/1.3 var(--sans); color: var(--tx-hi); margin: 0; }
.acct-card-head p { font: 400 12.5px/1.5 var(--sans); color: var(--tx-mid); margin: 4px 0 0; }
.acct-card-body { padding: 16px 20px 20px; }

/* identity strip */
.acct-id { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--panel-2); margin-bottom: 20px; }
.acct-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--amber-dim); color: #1a1408; display: grid; place-items: center; font: 700 16px/1 var(--sans); flex: none; }
.acct-id-meta .nm { font: 600 15px/1.2 var(--sans); color: var(--tx-hi); }
.acct-id-meta .em { font: 400 13px/1.2 var(--mono); color: var(--tx-mid); margin-top: 3px; }

/* forms */
.acct-field { margin-bottom: 14px; }
.acct-field:last-child { margin-bottom: 0; }
.acct-field label { display: block; font: 600 12px/1 var(--sans); color: var(--tx); margin-bottom: 7px; letter-spacing: 0.01em; }
.acct-field input[type="text"],
.acct-field input[type="email"],
.acct-field input[type="password"],
.acct-field select {
  width: 100%; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--hairline);
  border-radius: var(--r); color: var(--tx-hi); font: 400 14px/1.4 var(--sans); padding: 11px 13px; transition: border-color .14s;
}
.acct-field input:focus, .acct-field select:focus { outline: none; border-color: var(--amber-dim); }
.acct-field .hint { font: 400 11.5px/1.5 var(--sans); color: var(--tx-mid); margin-top: 6px; }
.acct-check { display: flex; align-items: flex-start; gap: 9px; font: 400 13px/1.5 var(--sans); color: var(--tx); cursor: pointer; }
.acct-check input { margin-top: 2px; accent-color: var(--amber); }

.acct-row { display: flex; gap: 12px; }
.acct-row .acct-field { flex: 1; }

/* buttons */
.acct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--hairline); background: var(--panel-2); color: var(--tx-hi); font: 600 13px/1 var(--sans); padding: 11px 18px; border-radius: var(--r); cursor: pointer; transition: .14s; }
.acct-btn:hover { border-color: var(--tx-dim); color: #fff; }
.acct-btn.primary { background: var(--amber); border-color: var(--amber); color: #15100a; }
.acct-btn.primary:hover { background: var(--amber-hi); border-color: var(--amber-hi); }
.acct-btn.danger { background: transparent; border-color: rgba(190,94,108,0.5); color: var(--down); }
.acct-btn.danger:hover { background: var(--down-bg); border-color: var(--down); }
.acct-btn:disabled { opacity: .5; cursor: not-allowed; }
.acct-btn .acct-bspin { width: 13px; height: 13px; border: 2px solid rgba(0,0,0,0.25); border-top-color: currentColor; border-radius: 50%; animation: acct-rot .7s linear infinite; display: none; }
.acct-btn.loading .acct-bspin { display: inline-block; }
.acct-actions { margin-top: 16px; display: flex; gap: 10px; align-items: center; }
.acct-formmsg { font: 500 12.5px/1.5 var(--sans); margin-left: 2px; }
.acct-formmsg.ok { color: var(--up); }
.acct-formmsg.err { color: var(--down); }

/* danger zone */
.acct-card.danger { border-color: rgba(190,94,108,0.32); }
.acct-card.danger .acct-card-head h2 { color: var(--down); }
.acct-danger-confirm { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--hairline); }

/* toast */
.acct-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--elevated); border: 1px solid var(--hairline); color: var(--tx-hi); font: 500 13px/1.4 var(--sans); padding: 12px 18px; border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 9000; }

@media (max-width: 620px) {
  .acct-row { flex-direction: column; gap: 0; }
  .acct-hero h1 { font-size: 25px; }
}