*{box-sizing:border-box}
body{margin:0;font-family:system-ui,sans-serif;background:#0f172a;color:#e2e8f0;padding-bottom:64px}
header{display:flex;gap:10px;align-items:center;padding:12px 16px;background:#1e293b;position:sticky;top:0;z-index:5}
header span{margin-left:auto;font-size:.85rem;opacity:.7}
main{max-width:720px;margin:auto;padding:14px}
h2{margin:.2em 0 .6em}
.card{background:#1e293b;border-radius:12px;padding:12px;margin:10px 0}
input,select,button,textarea{font:inherit;padding:10px;border-radius:8px;border:1px solid #334155;background:#0b1220;color:inherit;width:100%;margin:4px 0}
button{background:#2563eb;border:0;cursor:pointer;width:auto;color:#fff}
button.sec{background:#334155}button.red{background:#dc2626}button.green{background:#16a34a}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row>*{flex:1}.row>button{flex:0 0 auto}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#1e293b;border-top:1px solid #334155}
nav a{flex:1;text-align:center;padding:12px 4px;color:#94a3b8;text-decoration:none;font-size:.8rem}
nav a.on{color:#fff;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.tile{background:#2563eb;border-radius:16px;padding:18px 6px;text-align:center;font-weight:600;color:#fff;text-decoration:none;word-break:break-word}
.chat{height:55vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.msg{max-width:80%;padding:8px 10px;border-radius:12px;background:#334155}
.msg.me{align-self:flex-end;background:#2563eb}
.msg small{display:block;opacity:.6;font-size:.7rem}
.msg img,.msg video{max-width:100%;border-radius:8px}
iframe{width:100%;height:320px;border:0;border-radius:12px}
.lock{text-align:center;padding:40px 10px}
table{width:100%;border-collapse:collapse;font-size:.85rem}td,th{padding:4px;border-bottom:1px solid #334155;text-align:left}
.err{color:#f87171}