/* coins.html page styles (kit-based). Also styles the classes that the live-directory script generates. */
:root{
  --sp-sm:10px;--sp-md:16px;--sp-lg:24px;--sp-xl:40px;--sp-2xl:56px;
  --bg-input:rgba(255,255,255,.06);--bg-surface:rgba(255,255,255,.05);--border-glass:rgba(255,255,255,.14);
  --radius-sm:12px;--text-primary:var(--white);--text-secondary:#e2d8cf;--text-muted:var(--ash);
  --flame-warm:var(--amber);--neon-charlie:var(--amber);
}
.coins-head{max-width:46rem}
.coins-head .lede{max-width:40rem}
.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.tools input{max-width:34rem;flex:1 1 260px}
.freshness-tag{font:500 .78rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid var(--line-hot);border-radius:999px;padding:8px 14px;background:rgba(255,176,58,.08);min-height:36px;display:inline-flex;align-items:center}
.filter-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 32px}
.filter-tab{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:600 .92rem var(--body);cursor:pointer;transition:border-color .2s,background .2s}
.filter-tab:hover{border-color:var(--amber)}
.filter-tab.active{border-color:var(--ember);background:rgba(255,106,26,.16);color:var(--white);box-shadow:0 0 22px -6px rgba(255,106,26,.7)}
.filter-badge-count{font:600 .72rem var(--mono);color:var(--amber);background:rgba(255,176,58,.12);border-radius:999px;padding:2px 8px}

/* coin rows (static + generated by the live-directory script) */
#coinsList{display:flex;flex-direction:column;gap:16px}
.coin-item{position:relative;padding:22px 20px;border-radius:20px;border:1px solid var(--line-hot);background:var(--panel);backdrop-filter:blur(6px);transition:border-color .3s,transform .2s,box-shadow .3s;overflow:hidden}
.coin-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--amber),var(--ember),var(--red));opacity:.8}
.coin-item:hover{border-color:rgba(255,176,58,.6);box-shadow:0 14px 44px -18px rgba(255,106,26,.6)}
.coin-item h3{font-family:var(--mono);font-weight:500}
.coin-item p{color:var(--text-secondary)}
.cyber-corner{display:none}
.coin-item .font-mono,.coin-item .mono{font-family:var(--mono)}
.coin-item img{border:1px solid var(--line)}
.badge-kind{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:999px;font:600 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.kind-burn{color:var(--amber);border:1px solid rgba(255,176,58,.5);background:rgba(255,176,58,.1)}
.kind-ops{color:#9ec5ff;border:1px solid rgba(158,197,255,.45);background:rgba(158,197,255,.08)}
.status-pill{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 11px;border-radius:999px;border:1px solid rgba(61,220,151,.45);color:var(--pass);background:rgba(61,220,151,.08);font:600 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.status-pill-led{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.status-pill-text{font:inherit}
.pills{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.coin-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.coin-sym{font:700 1.05rem var(--disp);color:var(--amber)}
.coin-note{font-size:.85rem;color:var(--ash);margin:6px 0 0}
.coin-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.btn-conic-glow{display:inline-flex;border-radius:999px}
.btn-submit,.btn-paste,.btn-copy{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:999px;border:1px solid transparent;font:600 .92rem var(--body);cursor:pointer;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s,background .25s}
.btn-submit{padding:0 20px;background:linear-gradient(135deg,#ff3a00,#ff9a1f 60%,#ffd27a);color:#1a0800;box-shadow:0 8px 30px -8px rgba(255,106,26,.7)}
.btn-submit:hover{box-shadow:0 0 0 5px rgba(255,106,26,.16),0 12px 40px -6px rgba(255,106,26,.9);transform:translateY(-1px)}
.btn-paste,.btn-copy{padding:0 16px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:var(--text)}
.btn-paste:hover,.btn-copy:hover{border-color:var(--amber);background:rgba(255,176,58,.1)}
.btn-copy{min-height:36px;padding:0 12px;font-size:.78rem}
.btn-copy.copied{border-color:var(--pass);color:var(--pass)}

/* micro split bar: glows when the row fills in */
.micro-split-wrap{margin-top:14px;max-width:36rem}
.micro-split-header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:500 .72rem var(--mono);letter-spacing:.06em;color:var(--ash);margin-bottom:6px;text-transform:uppercase}
.micro-split-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;display:flex}
.bar-seg{height:100%;border-radius:999px}
.seg-sol-burn{background:linear-gradient(90deg,var(--red),var(--ember),var(--amber));box-shadow:0 0 18px rgba(255,106,26,.8)}
.seg-ops{background:linear-gradient(90deg,#4c7dd6,#9ec5ff)}
.fx .bar-seg{transform-origin:left;animation:fill 1.1s cubic-bezier(.16,1,.3,1) both}
.fx .seg-sol-burn{animation:fill 1.1s cubic-bezier(.16,1,.3,1) both,hotpulse 3.2s ease-in-out 1.2s infinite}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hotpulse{50%{box-shadow:0 0 28px rgba(255,160,60,.95)}}

#emptyResults{text-align:center;padding:48px 20px;background:var(--bg-surface);border:1px dashed var(--border-glass);border-radius:20px;margin-top:24px}
#emptyResults p{color:var(--text-secondary);margin:0 0 16px}
.missing{margin-top:56px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:28px 24px;border-radius:22px;border:1px solid var(--line-hot);background:var(--panel)}
.missing h3{font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.03em;margin-bottom:6px}
.missing p{margin:0;color:var(--text-secondary);font-size:.95rem;max-width:36rem}