.mp-screen{position:fixed;inset:0;z-index:70;overflow:auto;background:linear-gradient(160deg,rgba(8,31,55,.82),rgba(21,70,105,.62));backdrop-filter:blur(18px);color:#18304e}
.mp-screen[hidden]{display:none!important}
.mp-topbar{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:16px clamp(16px,3vw,34px);background:rgba(255,255,255,.9);border-bottom:1px solid rgba(18,54,88,.1);backdrop-filter:blur(18px)}
.mp-back,.mp-server-btn{border:0;border-radius:13px;min-height:42px;padding:0 14px;background:#edf5ff;color:#27567f;font-weight:850;cursor:pointer}
.mp-title{min-width:0;text-align:center}.mp-title strong{display:block;font-size:1rem;letter-spacing:.08em}.mp-title small{display:block;margin-top:2px;color:#74859a;font-size:.72rem;font-weight:700}
.mp-conn{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:9px 12px;background:#eef3f8;color:#718095;font-size:.72rem;font-weight:900}.mp-conn i{width:8px;height:8px;border-radius:50%;background:#9aa7b6}.mp-conn.online{background:#e3faf4;color:#11866d}.mp-conn.online i{background:#2fd2ad}.mp-conn.warn{background:#fff2df;color:#a96714}.mp-conn.warn i{background:#ffae3d}
.mp-shell{width:min(1120px,calc(100% - 28px));margin:26px auto 40px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr);gap:20px;align-items:start}
.mp-card{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.75);border-radius:28px;box-shadow:0 28px 90px rgba(0,22,48,.24);overflow:hidden}.mp-main{padding:clamp(22px,4vw,38px)}
.mp-eyebrow{margin:0 0 8px;color:#2c86df;font-size:.72rem;font-weight:950;letter-spacing:.18em}.mp-main h2{margin:0;color:#132d49;font-size:clamp(2rem,5vw,3.6rem);line-height:1.03}.mp-lead{margin:12px 0 24px;max-width:680px;color:#677a90;line-height:1.6;font-weight:620}
.mp-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mp-choice{border:1px solid #e1eaf4;border-radius:22px;padding:22px;text-align:left;background:#fff;cursor:pointer;box-shadow:0 12px 28px rgba(25,64,101,.08);transition:.18s ease}.mp-choice:hover{transform:translateY(-2px);border-color:#bcd8f5}.mp-choice .icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;margin-bottom:14px;color:white;font-size:1.25rem;font-weight:900;background:linear-gradient(135deg,#248cf6,#5d6cff)}.mp-choice.join .icon{background:linear-gradient(135deg,#ff6e7d,#ff9960)}.mp-choice strong{display:block;color:#19334f;font-size:1.05rem}.mp-choice small{display:block;margin-top:5px;color:#728398;line-height:1.45}
.mp-callout{display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;padding:14px 16px;border-radius:16px;background:#f3f8fe;color:#57708b;font-size:.82rem;line-height:1.5}.mp-callout b{color:#274d73}
.mp-form{display:grid;gap:14px;margin-top:22px}.mp-field{display:grid;gap:7px}.mp-field label{font-size:.76rem;font-weight:900;color:#60758c}.mp-field input,.mp-chat-form input{width:100%;min-height:50px;border:1px solid #d8e4ef;border-radius:14px;padding:0 14px;background:#fbfdff;color:#18324f;font:inherit;font-weight:750;outline:none}.mp-field input:focus,.mp-chat-form input:focus{border-color:#52a4f7;box-shadow:0 0 0 4px rgba(54,146,239,.12)}
.mp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.mp-btn{border:0;border-radius:14px;min-height:48px;padding:0 18px;font-weight:900;cursor:pointer}.mp-btn.primary{color:white;background:linear-gradient(135deg,#218cf5,#3775ef);box-shadow:0 12px 28px rgba(34,128,236,.25)}.mp-btn.secondary{color:#27577f;background:#edf5fd}.mp-btn.danger{color:#ad4250;background:#fff0f2}.mp-btn:disabled{opacity:.5;cursor:not-allowed}
.mp-error{display:none;margin-top:14px;padding:12px 14px;border-radius:14px;background:#fff1f2;color:#a43c48;font-size:.82rem;font-weight:800}.mp-error.show{display:block}
.mp-code-card{margin:22px 0;padding:20px;border-radius:22px;background:linear-gradient(135deg,#edf7ff,#f2f0ff);text-align:center;border:1px solid #d9e9fb}.mp-code-label{color:#70849a;font-size:.72rem;font-weight:900;letter-spacing:.12em}.mp-code{margin:7px 0 3px;color:#173857;font-size:clamp(2rem,8vw,4.2rem);line-height:1;font-weight:1000;letter-spacing:.16em}.mp-code-card small{color:#6f8194}.mp-waiting{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;color:#2e876f;font-size:.78rem;font-weight:900}.mp-waiting i{width:9px;height:9px;border-radius:50%;background:#32d2a8;box-shadow:0 0 0 6px rgba(50,210,168,.12)}
.mp-couple{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:22px 0}.mp-person{padding:18px;border:1px solid #e1eaf3;border-radius:20px;background:#fbfdff;text-align:center}.mp-person-avatar{width:72px;height:72px;margin:0 auto 9px;border-radius:50%;display:grid;place-items:center;background:#e7f2ff;color:#347bb9;font-weight:1000;font-size:1.4rem;background-size:cover;background-position:center}.mp-person strong{display:block}.mp-person small{display:block;margin-top:3px;color:#73849a}.mp-heart{font-size:1.5rem;color:#ff6278}.mp-online{display:inline-flex;align-items:center;gap:5px;margin-top:7px;color:#7a899a;font-size:.68rem;font-weight:900}.mp-online i{width:7px;height:7px;border-radius:50%;background:#a7b1bd}.mp-online.yes{color:#13866d}.mp-online.yes i{background:#2fd1aa}
.mp-chat{margin-top:22px;border-top:1px solid #e6edf4;padding-top:20px}.mp-chat h3{margin:0 0 12px}.mp-messages{display:grid;gap:9px;max-height:240px;overflow:auto;padding-right:4px}.mp-msg{max-width:82%;padding:10px 12px;border-radius:14px;background:#f0f5fa;color:#34516e;font-size:.82rem;line-height:1.45}.mp-msg.me{justify-self:end;background:#dceeff;color:#1e5b91}.mp-msg small{display:block;margin-top:4px;opacity:.66;font-size:.63rem}.mp-chat-empty{padding:18px;border-radius:14px;background:#f7fafc;color:#8290a0;text-align:center;font-size:.8rem}.mp-chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.mp-chat-form button{border:0;border-radius:13px;padding:0 16px;background:#238cf5;color:white;font-weight:900;cursor:pointer}
.mp-aside{padding:24px}.mp-aside h3{margin:0 0 14px;color:#193550}.mp-step{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid #edf1f5}.mp-step:last-child{border-bottom:0}.mp-step span{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:#edf5ff;color:#2e78bc;font-weight:950}.mp-step strong{display:block;font-size:.84rem}.mp-step small{display:block;margin-top:2px;color:#75869a;line-height:1.4}.mp-server-state{margin-top:18px;padding:14px;border-radius:16px;background:#f6f9fc}.mp-server-state small{display:block;color:#8492a2;font-weight:750}.mp-server-state code{display:block;margin-top:5px;word-break:break-all;color:#315b7f;font-size:.72rem}.mp-note{margin-top:14px;color:#7a8898;font-size:.72rem;line-height:1.5}
@media(max-width:860px){.mp-shell{grid-template-columns:1fr}.mp-aside-card{order:2}.mp-topbar{grid-template-columns:auto 1fr}.mp-conn{grid-column:1/-1;justify-self:center}.mp-choice-grid{grid-template-columns:1fr}.mp-couple{grid-template-columns:1fr}.mp-heart{transform:rotate(90deg)}}
@media(max-width:520px){.mp-shell{width:calc(100% - 16px);margin:10px auto 24px}.mp-card{border-radius:22px}.mp-main{padding:20px 16px}.mp-topbar{padding:11px 10px;gap:8px}.mp-title small{display:none}.mp-back{padding:0 11px}.mp-conn{font-size:.66rem}.mp-code{font-size:2.4rem}.mp-chat-form{grid-template-columns:1fr}.mp-chat-form button{min-height:44px}}