@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700&display=swap");
:root { --navy:#0f3460; --paper:#f4f1ea; --card:#fffdf8; --gold:#c4a35a; --ink:#1a1a2e; --line:#e4ddd2; --err:#9b1c1c; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--paper); color:var(--ink); font-family:"Vazirmatn", Tahoma, sans-serif; }
.bar { background:var(--navy); color:#fff; padding:12px 20px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.wrap { width:min(1100px, calc(100% - 2rem)); margin:24px auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px; }
.split { display:grid; grid-template-columns:280px 1fr; gap:16px; }
label { display:block; margin:10px 0; }
input, textarea, select, button { font:inherit; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
button { background:var(--navy); color:#fff; border:0; cursor:pointer; width:auto; }
button.ghost { background:transparent; color:var(--navy); border:1px solid var(--line); }
.row { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.log { min-height:240px; max-height:420px; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; margin:12px 0; }
.msg { margin:8px 0; }
.msg .who { font-size:12px; color:#5b6472; }
.err { color:var(--err); }
.hint { color:#5b6472; }
ul { list-style:none; padding:0; margin:0; }
li button { width:100%; text-align:right; margin-bottom:6px; background:#fff; color:var(--navy); border:1px solid var(--line); }
@media (max-width:800px) { .split { grid-template-columns:1fr; } }