:root{--bg:#0f172a;--card:#1e293b;--text:#f1f5f9;--muted:#94a3b8;--accent:#10b981;--err:#f87171;--line:#334155}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,'Segoe UI',system-ui,sans-serif;min-height:100vh}
main.card{max-width:640px;margin:2rem auto;background:var(--card);border-radius:14px;padding:1.2rem;box-shadow:0 8px 30px rgba(0,0,0,.35)}
h1,h2,h3{margin:.2rem 0 .6rem}
.center{text-align:center}
.top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
label{display:block;margin:.7rem 0 .25rem;color:var(--muted);font-size:.9rem}
input,select{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font-size:1rem}
input[type=password]{direction:ltr;text-align:left}
button{background:var(--accent);color:#052e16;border:0;border-radius:8px;padding:.65rem 1rem;font-size:1rem;margin:.4rem .2rem 0 0;cursor:pointer;font-weight:bold}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
button.danger{color:var(--err)}
.row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
video{width:100%;border-radius:10px;background:#000;display:none}
img#preview{width:100%;border-radius:10px;display:none}
.msg{padding:.6rem .8rem;border-radius:8px;background:#0b1220;margin:.6rem 0}
.msg.err{background:#450a0a;color:var(--err)}
.ok-card{border:1px solid var(--accent);border-radius:10px;padding:.8rem 1rem;margin-top:.8rem}
dl{margin:0;display:grid;grid-template-columns:1fr 2fr;gap:.35rem .5rem}
dt{color:var(--muted)}
dd{margin:0}
.sugg{border:1px solid var(--line);border-radius:8px;padding:.6rem;margin:.4rem 0}
.sub{background:#0b1220;border-radius:8px;padding:.8rem;margin:.6rem 0}
table{width:100%;border-collapse:collapse}
th,td{text-align:right;padding:.4rem .3rem;border-bottom:1px solid var(--line)}
a{color:#7dd3fc}
.filebtn{background:var(--accent);color:#052e16;padding:.65rem 1rem;border-radius:8px;display:inline-block;margin:.4rem .2rem 0 0;cursor:pointer;font-weight:bold}
.modes{display:flex;gap:.5rem;margin-bottom:.8rem}
.modes button{flex:1;background:transparent;color:var(--muted);border:1px solid var(--line)}
.modes button.active{background:var(--accent);color:#052e16}
.entry{display:flex;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap;align-items:start}
.entry input{flex:1;min-width:130px}
.entry button{margin-top:0}