.accounts-hero{align-items:stretch}
.hero-panel{width:min(320px,100%);padding:20px;display:grid;align-content:center;gap:7px;background:linear-gradient(180deg,rgba(37,99,235,.17),rgba(15,23,42,.82))}
.hero-panel small{color:#67e8f9;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:1000}
.hero-panel strong{color:#fff;font-size:24px;letter-spacing:-.045em;font-weight:1000}
.hero-panel span{color:#94a3b8;line-height:1.5;font-size:13px}
.account-stats .stat{position:relative;overflow:hidden}
.account-stats .stat:after{content:"";position:absolute;right:-28px;top:-28px;width:76px;height:76px;border-radius:999px;background:rgba(96,165,250,.10)}
.account-filter{grid-template-columns:1.2fr .55fr .55fr .35fr auto}
.account-grid{align-items:stretch}
.account-card{position:relative;padding:22px;min-height:292px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:.18s ease}
.account-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 8%,rgba(37,99,235,.14),transparent 180px);pointer-events:none}
.account-card>*{position:relative}
.account-card:hover{transform:translateY(-3px);border-color:rgba(96,165,250,.42)}
.account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.account-protocol{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#67e8f9;font-weight:1000}
.account-name{margin:9px 0 0;color:#fff;font-size:24px;line-height:1.1;letter-spacing:-.045em;font-weight:1000;word-break:break-word}
.account-meta{margin-top:13px;color:#94a3b8;font-size:13px;line-height:1.7}
.account-meta strong{color:#cbd5e1}
.account-bottom{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:16px;margin-top:22px}
.account-days{display:block;color:#fff;font-size:32px;letter-spacing:-.06em;font-weight:1000;line-height:1}
.account-days small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#64748b}
.account-caption{display:block;margin-top:5px;color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:1000}
.account-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.account-actions .btn{min-height:38px;padding:8px 11px;border-radius:13px;font-size:12px}
.deleted-card{opacity:.64}
.expired-card{border-color:rgba(245,158,11,.26)}
.protocol-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tab{min-height:40px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#cbd5e1;padding:9px 13px;font-weight:1000;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.tab.active{border-color:transparent;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}
.modal-headline{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.account-modal-wide{width:min(980px,100%)}
.pin-modal{width:min(520px,100%)}
.config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;background:transparent;padding:0}
.config-grid .copy-row{border:1px solid rgba(148,163,184,.14);border-radius:18px;background:rgba(2,6,23,.34);padding:13px}
.config-grid .copy-row:last-child{border-bottom:1px solid rgba(148,163,184,.14)}
.config-grid .copy-value{max-height:90px;overflow:auto;padding-right:4px}
.output{min-height:210px}
.pin-input{text-align:center;font-size:28px;letter-spacing:.35em;font-weight:1000}
.summary .row strong{max-width:60%}
@media(max-width:1120px){
  .accounts-hero{display:block}
  .hero-panel{margin-top:16px;width:100%}
  .account-filter{grid-template-columns:1fr 1fr}
  .account-bottom{grid-template-columns:1fr}
  .account-actions{justify-content:flex-start}
}
@media(max-width:720px){
  .account-filter{grid-template-columns:1fr}
  .config-grid{grid-template-columns:1fr}
  .modal-headline{display:block}
  .account-actions .btn{flex:1 1 calc(50% - 8px)}
  .summary .row{display:block}
  .summary .row strong{display:block;max-width:none;text-align:left;margin-top:4px}
}


/* Stage 3 - account detail copy readability */
.copy-value{word-break:break-word;white-space:pre-wrap;max-height:150px;overflow:auto}
.copy-row:has(.copy-key){align-items:flex-start}
.output-text, textarea#fullOutput{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;line-height:1.55;white-space:pre;min-height:220px}
@media(max-width:760px){.copy-row{grid-template-columns:1fr}.copy-row .btn{width:100%}.output-text,textarea#fullOutput{min-height:260px;font-size:12px}}