/* Account selector styles on DropIQ tokens. Variables assume the app
   shell already defines them; fallbacks included so this file renders
   standalone in review. */
:root {
  --bg-elev: #0c0c12;
  --bg-card: #12121c;
  --bg-card-hi: #191926;
  --ink: #fff;
  --ink-dim: #9d9aae;
  --ink-mute: #57556a;
  --line: #1c1a2a;
  --line-bright: #2c2a42;
  --purple: #a855f7;
  --cyan: #22d3ee;
  --green: #10b981;
  --amber: #fbbf24;
  --red: #ef4444;
  --grad: linear-gradient(120deg, #a855f7, #6366f1, #22d3ee);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

.acct-selector { display: flex; flex-direction: column; height: 100%; background: var(--bg-elev); color: var(--ink); }

.asel-head { padding: .9rem 1.1rem .7rem; border-bottom: 1px solid var(--line); }
.asel-back { border: none; background: none; color: var(--ink-dim); font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: .2rem 0; }
.asel-title { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; margin-top: .1rem; }
.asel-sub { font-family: var(--mono); font-size: .6rem; color: var(--ink-dim); margin-top: .15rem; }

.asel-tools { position: sticky; top: 0; z-index: 2; background: var(--bg-elev); padding: .8rem 1.1rem .55rem; }
.asel-count { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin-bottom: .5rem; }
.asel-search { width: 100%; min-height: 40px; background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='5' cy='5' r='3.5' stroke='%2357556a' fill='none' stroke-width='1.4'/%3E%3Cpath d='M8 8l3 3' stroke='%2357556a' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat .7rem center; padding: 0 .8rem 0 2rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-family: var(--mono); font-size: .64rem; }
.asel-groupbtns { display: flex; gap: .4rem; margin-top: .55rem; }
.asel-tool { min-height: 34px; padding: 0 .7rem; border: 1px solid var(--line-bright); border-radius: 100px; background: var(--bg-card); color: var(--ink-dim); font-family: var(--mono); font-size: .56rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }

.asel-list { flex: 1; overflow-y: auto; border-top: 1px solid var(--line); }

.acct-letter { position: sticky; top: 0; z-index: 1; padding: .3rem 1.1rem; background: #0f0f17; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .54rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }

.acct-row { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .4rem 1.1rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.acct-box { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; border: 1.5px solid var(--line-bright); position: relative; }
.acct-row[aria-checked="true"] .acct-box { border-color: var(--purple); background: var(--grad); }
.acct-row[aria-checked="true"] .acct-box::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .66rem; font-weight: 700; }
.acct-name { font-family: var(--mono); font-size: .7rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-row[aria-disabled="true"] { opacity: .5; cursor: default; }
.acct-status-slot { flex-shrink: 0; }

.acct-status { font-family: var(--mono); font-size: .52rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 100px; padding: .14rem .45rem; white-space: nowrap; }
.as-on { color: var(--green); border: 1px solid rgba(16,185,129,.45); background: rgba(16,185,129,.1); }
.as-pending { color: var(--cyan); border: 1px solid rgba(34,211,238,.45); background: rgba(34,211,238,.08); }
.as-failed { color: #f87171; border: 1px solid rgba(239,68,68,.5); background: rgba(239,68,68,.08); }
.as-unavailable { color: var(--amber); border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.07); }

.asel-empty { padding: 1.6rem 1.1rem; text-align: center; color: var(--ink-dim); font-size: .82rem; }

.asel-foot { padding: .8rem 1.1rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.asel-done { width: 100%; min-height: 50px; border: none; border-radius: 100px; background: var(--grad); color: #fff; font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.asel-done:disabled { background: var(--bg-card-hi); color: var(--ink-mute); cursor: default; }

/* card panel */
.wl-accts { padding: .15rem 1rem .2rem; }
.wl-accts-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .45rem; }
.wl-accts-head .lab { font-family: var(--mono); font-size: .56rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.wl-accts-head .frac { font-family: var(--mono); font-size: .62rem; font-weight: 700; color: var(--green); }
.acct-line { display: flex; align-items: center; gap: .55rem; min-height: 40px; padding: .35rem .6rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 9px; margin-bottom: .35rem; }
.acct-line .nm { font-family: var(--mono); font-size: .68rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-line.s-pending { border-color: rgba(34,211,238,.35); }
.acct-line.s-failed { border-color: rgba(239,68,68,.4); }
.wl-more { width: 100%; min-height: 38px; border: 1px dashed var(--line-bright); border-radius: 9px; background: transparent; color: var(--ink-dim); font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }

@keyframes lineFlash { 0% { background: rgba(16,185,129,.28); } 100% { background: var(--bg-elev); } }
.acct-line.flash { animation: lineFlash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .acct-line.flash { animation: none; } }