/* room.css — หน้าตาของห้องข้อมูลผู้ลงทุน
   สีตั้งต้นเป็นกลาง ไม่ใช่สีของกิจการใด · สีของกิจการเจ้าของห้องถูกเซ็ตเป็น --ws-accent /
   --ws-accent2 ตอนรันไทม์จากค่าที่ /api/room/room คืนมา ไฟล์นี้จึงใช้ร่วมกันได้ทุกกิจการ */
:root{
  --ink:#1b2430; --muted:#5a6472; --line:#e2e5e9; --bg:#f6f7f9; --panel:#fff;
  --accent:#243447; --accent2:#c8a44b;
  --ok:#1e6e4a; --warn:#8a6300; --bad:#9c3c32;
  --shadow:0 10px 26px rgba(20,32,48,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif}
button,input,select{font:inherit}
.hidden{display:none!important}
a{color:var(--ws-accent,var(--accent))}

.topbar{background:var(--ws-accent,var(--accent));color:#fff;padding:0 26px;min-height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:4px solid var(--ws-accent2,var(--accent2));position:sticky;top:0;z-index:20}
.topbar h1{font-size:17px;margin:0}
.topbar p{margin:3px 0 0;font-size:11.5px;color:#d6dde6}
.who{text-align:right;font-size:12px;color:#dde3ea}
.who strong{display:block;font-size:13px;color:#fff}
.ghost{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  border-radius:8px;padding:8px 12px;cursor:pointer;text-decoration:none;font-size:13px}
.ghost:hover{background:rgba(255,255,255,.1)}

.wrap{max-width:1080px;margin:auto;padding:24px 26px 56px}
.head h2{font-size:23px;margin:0 0 6px}
.head p{margin:0;color:var(--muted);line-height:1.65}

/* แถบนี้ต้องอยู่เหนือเอกสารเสมอ ไม่ใช่ท้ายหน้า — ผู้ลงทุนต้องอ่านก่อนเห็นตัวเลข ไม่ใช่หลัง */
.caveat{background:#fdf6e3;border:1px solid #e6d29a;border-radius:11px;padding:13px 16px;
  color:#6a4e10;font-size:12.5px;line-height:1.6;margin:18px 0}

.tiers{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 6px}
.tier{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 15px;min-width:196px}
.tier b{display:block;font-size:13px}
.tier span{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.tier em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:7px}

.group{margin-top:26px}
.group h3{font-size:14px;margin:0 0 10px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em}
.doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  margin-bottom:10px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  box-shadow:0 3px 10px rgba(20,32,48,.04)}
.doc h4{margin:0 0 5px;font-size:15px}
.doc .meta{font-size:11.5px;color:var(--muted);line-height:1.6}
.doc .actions{display:flex;gap:8px;flex:none}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;
  padding:8px 13px;cursor:pointer;font-size:13px;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--ws-accent,var(--accent));border-color:var(--ws-accent,var(--accent));color:#fff}
.pill{display:inline-block;font-size:10.5px;font-weight:700;border-radius:999px;
  padding:4px 9px;background:#eef1f5;color:#4a5b6e;margin-right:7px}

table{border-collapse:collapse;width:100%;font-size:13px;margin-top:12px}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:#f1f3f6;font-weight:600}
td.num{text-align:right;font-variant-numeric:tabular-nums;
  font-family:"SF Mono",Consolas,"Courier New",monospace;white-space:nowrap}

.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.card{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.card h2{margin:0 0 7px;font-size:23px}
.card .sub{margin:0 0 22px;color:var(--muted);line-height:1.6;font-size:13.5px}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.field input{width:100%;border:1px solid #cfd6de;border-radius:9px;padding:11px 12px;
  background:#fbfcfd;outline:none}
.field input:focus{border-color:var(--ws-accent,var(--accent));box-shadow:0 0 0 3px rgba(36,52,71,.1)}
.submit{width:100%;border:none;border-radius:9px;background:var(--ws-accent,var(--accent));
  color:#fff;padding:12px 16px;font-weight:700;cursor:pointer}
.submit:disabled{opacity:.6;cursor:default}
.err{margin-top:12px;padding:10px 12px;border-radius:8px;background:#fff1ef;
  border:1px solid #efc8c3;color:var(--bad);font-size:13px}
.note{margin-top:16px;padding:11px 13px;background:#f4f6f8;border:1px solid var(--line);
  border-radius:9px;color:var(--muted);font-size:12px;line-height:1.6}
footer{text-align:center;color:#8b96a3;font-size:11px;padding:22px}
@media(max-width:640px){.wrap{padding:16px 14px 40px}.topbar{padding:10px 14px}
  .doc{flex-direction:column}.who{display:none}}