:root{--bg:#0b0b0f;--panel:#16161d;--line:#2a2a36;--text:#f2f2f7;--mute:#9a9ab0;--green:#22cc44;--red:#e5484d;--purple:#7b5cfa;--amber:#f0a30a}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Tamil",sans-serif;font-size:16px;-webkit-tap-highlight-color:transparent}
.wrap{max-width:520px;margin:0 auto;padding:18px 16px 60px}
h1{font-size:1.4rem;margin:6px 0 4px}h2{font-size:1.05rem;margin:18px 0 8px}
.sub{color:var(--mute);font-size:.9rem;margin:0 0 16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0}
input,select{width:100%;background:#0f0f15;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:14px;font:inherit;margin:6px 0}
input:focus{outline:2px solid var(--purple)}
button{font:inherit;border:0;border-radius:14px;padding:14px 18px;font-weight:700;cursor:pointer;color:#fff;background:#2b2b38}
button:active{transform:scale(.98)}button:disabled{opacity:.5}
.btn-green{background:var(--green);color:#04210b}.btn-red{background:var(--red)}.btn-purple{background:var(--purple)}.btn-amber{background:var(--amber);color:#2a1a00}
.btn-big{width:100%;padding:18px;font-size:1.15rem}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 120px}
.hidden{display:none!important}
.status{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:.85rem}
.dot{width:10px;height:10px;border-radius:50%;background:#555}.dot.on{background:var(--green)}
.msg{min-height:1.4em;margin:8px 0;font-size:.95rem}.msg.err{color:#ff8a8d}.msg.ok{color:#6ee787}
.big{font-size:2.2rem;font-weight:800;text-align:center;margin:8px 0}
.center{text-align:center}
.pulse{width:92px;height:92px;border-radius:50%;background:var(--green);margin:14px auto;animation:p 1.4s infinite;display:flex;align-items:center;justify-content:center;font-size:2.4rem}
@keyframes p{0%{box-shadow:0 0 0 0 rgba(34,204,68,.6)}100%{box-shadow:0 0 0 34px rgba(34,204,68,0)}}
.incoming{border:2px solid var(--green);animation:glow 1s infinite alternate}
@keyframes glow{from{box-shadow:0 0 0 0 rgba(34,204,68,.0)}to{box-shadow:0 0 22px 2px rgba(34,204,68,.45)}}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:10px 0}.tabs button{flex:0 0 auto;padding:10px 14px;background:#1d1d27}.tabs button.on{background:var(--purple)}
.item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.item:last-child{border:0}.item small{color:var(--mute)}
.pill{font-size:.75rem;padding:3px 9px;border-radius:99px;background:#26263a;color:var(--mute)}
.tbtn{padding:10px 12px;font-size:.9rem}
.banner{background:#2a2310;border:1px solid #6b5514;color:#ffd666;border-radius:12px;padding:10px 12px;margin:10px 0;font-size:.9rem}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:10px}.keys button{padding:20px;font-size:1.1rem;background:#23233a}
a{color:#9db4ff}