/* Neon dark glass UI with bulletproof overflow handling */
:root{
  --bg:#060917; --fg:#e6edf3; --muted:#9fb3c8; --brand:#7c5cff; --brand2:#2dd4bf; --accent:#7aa2ff; --danger:#ff5555; --warn:#ffb020; --glass: rgba(255,255,255,.06); --border: rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 700px at 20% 0%, rgba(124,92,255,.12), transparent), radial-gradient(1000px 600px at 100% 100%, rgba(45,212,191,.10), transparent), var(--bg); color:var(--fg); font:14px/1.6 Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, sans-serif}
.wrap{min-height:100vh; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 18px; margin:14px; border-radius:16px; border:1px solid var(--border); backdrop-filter: blur(10px);}
.brand{display:flex; gap:10px; align-items:center}
.brand svg{color:var(--brand)}
.brand span{font-weight:700; letter-spacing:.3px}
.brand em{color:var(--brand2); font-style:normal}
.actions{display:flex; gap:10px; align-items:center}
.btn{padding:8px 12px; border-radius:10px; background:var(--glass); color:var(--fg); border:1px solid var(--border); cursor:pointer; transition:.2s}
.btn.tiny{padding:4px 8px; font-size:12px}
.btn:hover{transform:translateY(-1px);}
.btn.primary{background:linear-gradient(135deg, rgba(124,92,255,.25), rgba(45,212,191,.2)); border-color: rgba(124,92,255,.4)}
.btn.ghost{background:transparent}
.switch{position:relative; width:42px; height:24px; display:inline-block}
.switch.small{width:38px; height:22px}
.switch input{display:none}
.switch span{position:absolute; inset:0; border-radius:999px; background:var(--glass); border:1px solid var(--border)}
.switch span:after{content:''; position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff2; transition:.2s}
.switch.small span:after{width:16px; height:16px}
.switch input:checked + span{background:linear-gradient(135deg, rgba(124,92,255,.25), rgba(45,212,191,.2))}
.switch input:checked + span:after{transform: translateX(18px)}
.agree-text{font-size:12px; color:var(--muted)}

.hero{margin:0 14px; border-radius:16px; padding:18px; border:1px solid var(--border);}
.hero h1{margin:0 0 6px 0; font-size:24px}
.hero h1 span{color:var(--brand2)}
.status{color:var(--accent); margin:6px 0 0 0}

.meter{position:relative; margin-top:12px; height:110px; border-radius:14px; border:1px solid var(--border); background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(122,162,255,.06)); overflow:hidden}
.meter .needle{position:absolute; left:50%; bottom:0; width:2px; height:100%; background:linear-gradient(180deg, var(--danger), var(--warn), var(--brand2)); transform-origin:bottom center; transform:rotate(-90deg); transition:transform .5s ease}
.meter .ticks{position:absolute; inset:0; background: conic-gradient(from -90deg, rgba(239,68,68,.4), rgba(250,204,21,.4), rgba(34,197,94,.4)); mask: linear-gradient(#000 60%, transparent)}

.summary{display:flex; flex-wrap:wrap; gap:10px; margin:14px; padding:12px; border:1px solid var(--border); border-radius:14px}
.pill{display:flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--glass); font-size:13px}
.pill b{font-weight:700; color:#dbeafe}

.grid{display:grid; grid-template-columns: repeat(auto-fill,minmax(380px,1fr)); gap:14px; padding:14px}
.card{border-radius:16px; border:1px solid var(--border); padding:0; overflow:hidden; contain: content}
.card .card-head{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.03)}
.card .card-head h3{margin:0; font-size:14px; color:#dbeafe; flex:1}
.card .card-head .meta{font-size:12px; color:var(--muted)}
.card .card-head .tools{display:flex; gap:6px}
.card .card-body{padding:10px 12px; max-height:240px; overflow:auto; overscroll-behavior:contain}

table.kv{width:100%; table-layout: fixed; border-collapse:collapse; font-size:13px}
.kv td{border-bottom:1px dashed rgba(255,255,255,.06); padding:6px; vertical-align:top; color:#cbd5e1}
.kv td:first-child{width:34%; color:#9fb3c8; word-break:break-word}
.kv .cell{position:relative; max-height:72px; overflow:hidden}
.kv .cell::after{content:''; position:absolute; left:0; right:0; bottom:0; height:22px; background:linear-gradient(180deg, transparent, rgba(6,9,23,.9)); pointer-events:none}
.card.open .kv .cell{max-height:none}
.card.open .kv .cell::after{display:none}
.kv pre{margin:0; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,"Liberation Mono",monospace; font-size:12px; line-height:1.45;}

.card.open .card-body{max-height:70vh}

.foot{margin:14px; border-radius:16px; padding:10px; border:1px solid var(--border); color:var(--muted);}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); backdrop-filter: blur(10px)}