:root {
  --mp-bg: #08110d;
  --mp-panel: #142119;
  --mp-panel-2: #1c2d23;
  --mp-text: #edf5ef;
  --mp-muted: #9aada1;
  --mp-gold: #d7b45e;
  --mp-border: rgba(255,255,255,.12);
  --mp-danger: #ff9f9f;
}
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#06100b; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button, input, select { font:inherit; }
.hidden { display:none !important; }
.mp-overlay, .mp-disconnect { position:fixed; z-index:1100; inset:0; display:grid; place-items:center; padding:18px; background:rgba(2,8,5,.78); backdrop-filter:blur(10px); color:var(--mp-text); }
.mp-card { width:min(650px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:24px; border:1px solid rgba(227,201,122,.24); border-radius:22px; background:radial-gradient(circle at 50% 0,rgba(215,180,94,.09),transparent 40%),linear-gradient(160deg,#1a2b21,#09130e); box-shadow:0 30px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.06); }
.mp-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.mp-head small { color:var(--mp-gold); font-weight:900; font-size:9px; letter-spacing:.16em; }
.mp-head h2 { margin:4px 0 0; font:850 30px/1.1 Georgia,serif; }
.mp-icon { width:40px; height:40px; border:1px solid var(--mp-border); border-radius:10px; background:rgba(255,255,255,.03); color:#fff; font-size:25px; cursor:pointer; }
.mp-lead { margin:18px 0; color:#bdcac2; font-size:13px; line-height:1.6; }
.mp-field { display:grid; gap:6px; color:var(--mp-muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.mp-field input, .mp-field select, .mp-join-row input { width:100%; min-height:46px; border:1px solid var(--mp-border); border-radius:11px; padding:10px 12px; color:#fff; background:#0d1913; outline:none; text-transform:none; letter-spacing:normal; }
.mp-field input:focus, .mp-field select:focus, .mp-join-row input:focus { border-color:rgba(215,180,94,.7); box-shadow:0 0 0 3px rgba(215,180,94,.1); }
.mp-home-actions { display:grid; gap:11px; margin-top:16px; }
.mp-join-row { display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:9px; }
.mp-join-row input { text-align:center; letter-spacing:.12em; text-transform:uppercase; font-weight:900; }
.mp-primary, .mp-secondary, .mp-join-row button, #mp-copy-room { min-height:46px; border-radius:11px; padding:10px 15px; cursor:pointer; font-weight:900; }
.mp-primary { border:0; color:#211a0a; background:linear-gradient(180deg,#e5c86f,#b98d36); box-shadow:0 10px 24px rgba(185,141,54,.18); }
.mp-primary:disabled { opacity:.4; cursor:not-allowed; }
.mp-secondary, .mp-join-row button, #mp-copy-room { border:1px solid var(--mp-border); color:var(--mp-text); background:rgba(255,255,255,.035); }
.mp-status { min-height:20px; margin-top:12px; color:#d9e4dd; font-size:11px; line-height:1.5; }
.mp-status.error { color:var(--mp-danger); }
.mp-note { margin:8px 0 0; color:#71847a; font-size:9px; line-height:1.5; }
.mp-roomline { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:20px 0 14px; padding:14px; border:1px solid rgba(215,180,94,.18); border-radius:14px; background:rgba(215,180,94,.06); }
.mp-roomline span { display:block; color:var(--mp-muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.mp-roomline strong { display:block; margin-top:4px; font:900 27px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; color:#f3dc94; }
.mp-seats { display:grid; gap:8px; }
.mp-seat { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--mp-border); border-radius:13px; background:linear-gradient(145deg,rgba(27,43,34,.96),rgba(11,20,15,.96)); }
.mp-seat-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:#23382c; font-size:11px; font-weight:900; }
.mp-seat b, .mp-seat small { display:block; }
.mp-seat b { font-size:13px; }
.mp-seat small { margin-top:3px; color:var(--mp-muted); font-size:9px; }
.mp-seat-state { padding:5px 8px; border-radius:999px; color:#a8b8ae; background:rgba(255,255,255,.04); font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.mp-seat-state.ready { color:#bdf3ce; background:rgba(57,155,90,.14); }
.mp-seat-state.bot { color:#f1d994; background:rgba(215,180,94,.12); }
.mp-bot-panel { margin-top:12px; padding:12px; border:1px solid var(--mp-border); border-radius:13px; background:rgba(255,255,255,.025); }
.mp-toggle { display:flex; gap:10px; align-items:flex-start; }
.mp-toggle input { width:18px; height:18px; margin-top:2px; accent-color:#d7b45e; }
.mp-toggle b, .mp-toggle small { display:block; }
.mp-toggle b { font-size:12px; }
.mp-toggle small { margin-top:4px; color:var(--mp-muted); font-size:9px; line-height:1.4; }
.mp-inline-field { grid-template-columns:minmax(0,1fr) 160px; align-items:center; margin-top:10px; }
.mp-inline-field select { min-height:38px; }
.mp-footer { display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.mp-footer > * { min-width:120px; }
.mp-disconnect-card { width:min(460px,100%); padding:24px; border:1px solid rgba(255,128,128,.24); border-radius:18px; background:linear-gradient(160deg,#271817,#0d1110); color:#fff; box-shadow:0 28px 80px rgba(0,0,0,.6); text-align:center; }
.mp-disconnect-card h3 { margin:0 0 10px; font:800 24px/1.2 Georgia,serif; }
.mp-disconnect-card p { color:#cbb; font-size:12px; line-height:1.5; }
.mp-disconnect-card button { margin-top:8px; width:100%; }
@media (max-width:640px) {
  .mp-overlay { padding:8px; align-items:start; overflow:auto; }
  .mp-card { margin:6px 0; padding:16px; max-height:none; border-radius:16px; }
  .mp-head h2 { font-size:24px; }
  .mp-join-row { grid-template-columns:1fr; }
  .mp-roomline strong { font-size:22px; }
  .mp-inline-field { grid-template-columns:1fr; }
}
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px) {
  .mp-overlay { padding:5px; align-items:start; overflow:auto; }
  .mp-card { width:min(760px,calc(100vw - 10px)); max-height:none; margin:0 auto; padding:10px 13px; border-radius:12px; }
  .mp-head h2 { font-size:20px; }
  .mp-head small, .mp-note { display:none; }
  .mp-lead { margin:6px 0 8px; font-size:10px; line-height:1.3; }
  .mp-field input, .mp-field select, .mp-join-row input, .mp-primary, .mp-secondary, .mp-join-row button, #mp-copy-room { min-height:34px; padding:6px 9px; font-size:10px; }
  .mp-home-actions { grid-template-columns:1fr 1.5fr; margin-top:7px; gap:7px; }
  .mp-join-row { grid-template-columns:1fr 90px; gap:5px; }
  .mp-roomline { margin:7px 0; padding:7px 9px; }
  .mp-roomline strong { font-size:18px; }
  .mp-seats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .mp-seat { grid-template-columns:28px minmax(0,1fr); gap:5px; padding:6px; }
  .mp-seat-avatar { width:28px; height:28px; }
  .mp-seat-state { grid-column:1/-1; justify-self:start; }
  .mp-bot-panel { margin-top:6px; padding:7px; display:grid; grid-template-columns:1.5fr 1fr; gap:8px; }
  .mp-inline-field { margin-top:0; grid-template-columns:1fr 110px; }
  .mp-footer { margin-top:7px; }
}