:root { --ink:#20171e; --muted:#786b74; --pink:#e91e63; --pink-dark:#bf1550; --rose:#fff2f6; --line:#eadde2; --surface:#fff; --shadow:0 16px 50px rgba(82, 20, 48, .09); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fff9fb; font-family:"DM Sans", system-ui, sans-serif; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d7c7ce; border-radius:99px; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(350px, .85fr); }
.auth-panel { width:min(480px, 100%); margin:auto; padding:56px 32px; }
.auth-aside { color:#fff; background:radial-gradient(circle at 20% 10%, #ff84af, transparent 28%), linear-gradient(145deg,#6b153f,#e91e63 57%,#ff7ba6); padding:72px clamp(34px, 8vw, 120px); display:flex; flex-direction:column; justify-content:flex-end; min-height:100vh; }
.auth-aside p,.eyebrow { margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:1.5px; }
.auth-aside span { font-family:"Playfair Display", serif; font-size:clamp(42px, 5vw, 72px); line-height:.98; }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; background:var(--pink); color:#fff; font:700 28px "Playfair Display",serif; box-shadow:0 10px 25px #e91e6350; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:"Playfair Display",serif; } h1 { font-size:42px; line-height:1.08; margin:22px 0 14px; } h2 { font-size:32px; margin-bottom:0; } h3 { font-size:18px; }
.auth-copy { color:var(--muted); line-height:1.6; max-width:380px; }
.auth-tabs { display:flex; gap:20px; border-bottom:1px solid var(--line); margin:34px 0 24px; }
.tab { color:var(--muted); background:transparent; border:0; padding:0 0 12px; font-weight:700; }.tab.active { color:var(--pink); border-bottom:2px solid var(--pink); }
form label { display:block; color:#5b4e56; font-size:13px; font-weight:700; margin:14px 0; } input, textarea, select { width:100%; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); outline:0; padding:13px 14px; margin-top:6px; font-family:inherit; } input:focus,textarea:focus,select:focus { border-color:var(--pink); box-shadow:0 0 0 3px #e91e6318; } select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23786b74' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.password-field { position:relative; }.password-field input { padding-right:74px; }.password-field button { position:absolute; right:8px; top:50%; transform:translateY(-35%); border:0; background:transparent; color:var(--pink); font-size:13px; font-weight:700; }
.primary-button,.new-post { border:0; border-radius:12px; color:#fff; background:var(--pink); font-weight:700; padding:12px 18px; box-shadow:0 8px 17px #e91e6330; }.primary-button:hover,.new-post:hover { background:var(--pink-dark); }.form-error { min-height:18px; color:#bd174d; font-size:13px; margin:7px 0; }
.topbar { height:70px; position:sticky; z-index:5; top:0; display:flex; align-items:center; gap:28px; padding:0 max(20px, calc((100vw - 1220px)/2)); background:#fffcfded; backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }.wordmark { text-decoration:none; font:700 23px "Playfair Display",serif; color:var(--ink); letter-spacing:1px; }.wordmark span { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:3px; border-radius:9px; color:#fff; background:var(--pink); font-size:18px; }.main-nav { display:flex; gap:18px; margin-right:auto; overflow-x:auto; scrollbar-width:none; }.main-nav::-webkit-scrollbar { display:none; }.nav-link { flex:none; border:0; background:transparent; padding:24px 0 20px; color:var(--muted); font-weight:700; font-size:14px; }.nav-link.active { color:var(--pink); border-bottom:2px solid var(--pink); }.top-actions { display:flex; align-items:center; gap:10px; position:relative; }.new-post { padding:10px 15px; }.account-button { width:38px; height:38px; border:0; border-radius:50%; padding:3px; background:#f8d3e1; color:var(--pink-dark); font-weight:700; cursor:pointer; }.account-button span { display:grid; height:100%; place-items:center; border:1px solid #fff; border-radius:50%; }.account-popover { position:absolute; top:50px; right:0; width:225px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); z-index:10; }.account-popover strong,.account-popover small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-popover small { color:var(--muted); margin:3px 0 10px; }.account-popover button { width:100%; border:0; background:transparent; text-align:left; padding:9px 6px; color:var(--ink); border-radius:7px; }.account-popover button:hover { background:var(--rose); color:var(--pink); }
.page-shell { width:min(1220px, 100%); margin:0 auto; display:grid; grid-template-columns:230px minmax(0, 620px) 230px; gap:24px; padding:30px 20px; }.single-view { grid-template-columns:minmax(0, 620px); justify-content:center; }.side-panel { height:max-content; padding:20px; border-radius:18px; background:#fff; border:1px solid var(--line); }.profile-summary { position:sticky; top:92px; }.profile-avatar { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#ff94ba,#c31151); font-weight:700; font-size:18px; flex:none; }.profile-summary h3 { margin:12px 0 2px; }.handle,.side-panel p { color:var(--muted); font-size:13px; line-height:1.5; }.profile-stats { display:flex; gap:18px; margin-top:18px; }.profile-stats b,.profile-stats span { display:block; }.profile-stats span { font-size:11px; color:var(--muted); }.feed-heading { display:flex; align-items:center; justify-content:space-between; margin:2px 0 18px; }.status-pill { border-radius:999px; background:#eaf8ef; color:#24734a; font-size:11px; font-weight:700; padding:7px 10px; display:inline-flex; align-items:center; gap:5px; }.status-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:#24734a; }.composer-card,.post-card { border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 4px 18px rgba(70,20,46,.03); }.composer-card { padding:16px; }.composer-card textarea { min-height:88px; resize:vertical; border:0; padding:4px; font-size:16px; box-shadow:none; }.composer-footer { display:flex; align-items:center; gap:9px; border-top:1px solid var(--line); padding-top:12px; }.media-picker { color:var(--pink); font-size:12px; font-weight:700; cursor:pointer; }.media-picker input { display:none; }.composer-footer span { margin-left:auto; color:var(--muted); font-size:12px; }.composer-footer .primary-button { padding:9px 15px; }.media-preview { position:relative; margin:10px 0; }.media-preview img,.media-preview video { max-height:300px; width:100%; object-fit:cover; border-radius:12px; }.feed-list { display:grid; gap:12px; margin-top:14px; }.empty-state { text-align:center; padding:40px 20px; color:var(--muted); font-size:14px; line-height:1.6; }.post-card { padding:14px 16px; }.post-head { display:flex; gap:10px; align-items:center; }.post-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#ff94ba,#c31151); font-weight:700; font-size:14px; flex:none; }.post-name { font-weight:600; font-size:14px; }.post-time { color:var(--muted); font-size:12px; }.post-text { margin:10px 0; white-space:pre-wrap; font-size:15px; line-height:1.5; }.post-media { width:100%; max-height:340px; object-fit:cover; border-radius:13px; margin:6px 0; }.post-actions { display:flex; gap:14px; padding-top:10px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }.post-actions button,.post-actions span { border:0; background:transparent; padding:2px 0; color:var(--muted); font-weight:600; }.post-actions .liked { color:#e91e63; }.post-actions button:hover { color:var(--pink); }
@media (max-width:900px) { .page-shell { grid-template-columns:minmax(0, 1fr); max-width:680px; }.side-panel { display:none; }.main-nav { gap:14px; }.topbar { gap:16px; }.new-post { display:none; } }
@media (max-width:600px) { .auth-shell { display:block; }.auth-aside { display:none; }.auth-panel { padding:42px 22px; }.topbar { padding:0 14px; }.wordmark { font-size:20px; }.main-nav { gap:11px; }.nav-link { font-size:13px; }.page-shell { padding:20px 12px; }.feed-heading h2 { font-size:27px; }.composer-footer { flex-wrap:wrap; }.composer-footer span { margin-left:auto; }.post-card { border-radius:14px; } }
.settings-card { margin-top:16px; padding:22px; border:1px solid var(--line); border-radius:20px; background:#fff; }.settings-card h3 { margin-bottom:16px; }.settings-group + .settings-group { padding-top:20px; margin-top:20px; border-top:1px solid var(--line); }.settings-label { margin:0 0 8px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:1px; }.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.settings-grid .full { grid-column:1 / -1; }.settings-grid label { color:#5b4e56; font-size:12px; font-weight:700; }.settings-grid input,.settings-grid textarea { margin-top:5px; }.settings-grid textarea { min-height:80px; resize:vertical; }.setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; }.setting-row strong,.setting-row span { display:block; }.setting-row span { margin-top:3px; color:var(--muted); font-size:12px; }.switch { position:relative; display:inline-block; width:46px; height:26px; flex:none; }.switch input { opacity:0; width:0; height:0; }.slider { position:absolute; inset:0; border-radius:99px; background:#d7c7ce; transition:.2s; }.slider:before { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:white; transition:.2s; }.switch input:checked + .slider { background:var(--pink); }.switch input:checked + .slider:before { transform:translateX(20px); }.blocked-list { display:grid; gap:7px; }.blocked-entry { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border-radius:10px; background:var(--rose); font-size:13px; }.text-button { border:0; background:transparent; color:var(--pink); font-weight:700; padding:5px; cursor:pointer; }.text-button:hover { text-decoration:underline; }.danger-button { width:100%; border:1px solid #f0b6c8; background:#fff5f7; color:#bd174d; border-radius:10px; padding:10px; font-weight:700; }.subscription-note { border-radius:12px; padding:13px; background:var(--rose); color:#7a3b51; font-size:13px; line-height:1.5; }
.profile-page-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; }
.profile-cover { height:132px; background:radial-gradient(circle at 18% 20%, #ffb0c9, transparent 30%), linear-gradient(120deg,#75163f,#e91e63 58%,#ff83ae); }
.profile-content { padding:0 24px 24px; }
.profile-content > .profile-avatar { width:72px; height:72px; margin-top:-36px; border:4px solid #fff; font-size:24px; }
.profile-content h2 { margin:12px 0 2px; }
.profile-bio { margin:16px 0 8px; line-height:1.55; }
.profile-meta { color:var(--muted); font-size:13px; }
body.dark { --ink:#f5edf0; --muted:#b9a7af; --rose:#351420; --line:#402935; --surface:#171114; --shadow:0 16px 50px rgba(0,0,0,.28); background:#080608; } body.dark .topbar,body.dark .side-panel,body.dark .composer-card,body.dark .post-card,body.dark .profile-page-card,body.dark .settings-card,body.dark input,body.dark textarea,body.dark select,body.dark .account-popover { background:#171114; color:var(--ink); } body.dark .topbar { background:#171114ed; } body.dark .account-popover button { color:var(--ink); } body.dark .profile-avatar { border-color:#171114; } body.dark select { background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b9a7af' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); }
.subscription-note strong { display:block; color:var(--pink-dark); font-size:15px; }.subscription-note p { margin:6px 0; }
.feature-page { padding:38px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(140deg,#fff,#fff3f7); }.feature-page > p:not(.eyebrow) { max-width:580px; color:var(--muted); line-height:1.65; }.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }.feature-grid article { padding:20px; border-radius:16px; background:#fff; border:1px solid var(--line); }.feature-grid span { color:var(--pink); font-size:11px; font-weight:700; letter-spacing:1px; }.feature-grid h3 { margin:9px 0 6px; }.feature-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; } body.dark .feature-page,body.dark .feature-grid article { background:#171114; }
.room-form { display:grid; grid-template-columns:1fr 170px auto; gap:9px; }.room-form input { margin:0; }.story-editor #story-title { margin:0 0 10px; font-size:20px; font-weight:700; }.story-editor #story-body { min-height:250px; margin:0; resize:vertical; }.story-card { padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; }.story-card h3 { margin:7px 0; font-family:"Playfair Display",serif; font-size:25px; }.story-excerpt { color:var(--muted); line-height:1.55; }.story-card .tag-list { margin-top:12px; } body.dark .story-card { background:#171114; }
@media (max-width:600px) { .room-form { grid-template-columns:1fr; }.feature-grid { grid-template-columns:1fr; } }
.delete-post { margin-left:auto; color:#bd174d !important; }.modal-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:#22101899; backdrop-filter:blur(3px); }.reply-modal { width:min(620px, 100%); max-height:min(720px, calc(100vh - 40px)); display:flex; flex-direction:column; padding:20px; border-radius:20px; background:#fff; box-shadow:var(--shadow); }.modal-header { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:12px; }.modal-header h3 { margin:0; }.icon-button { border:0; background:transparent; color:var(--muted); font-size:30px; line-height:1; cursor:pointer; }.icon-button:hover { color:var(--pink); }.reply-context { color:var(--muted); font-size:13px; padding:12px 0; border-bottom:1px solid var(--line); }.comments-list { min-height:100px; overflow:auto; display:grid; gap:12px; padding:14px 0; }.comment { display:flex; gap:9px; }.comment-body { flex:1; padding:10px 12px; border-radius:12px; background:var(--rose); }.comment-meta { font-size:12px; color:var(--muted); }.comment-text { margin:4px 0 0; white-space:pre-wrap; font-size:14px; }.reply-form { display:flex; gap:9px; border-top:1px solid var(--line); padding-top:14px; }.reply-form input { margin:0; }.reply-form .primary-button { flex:none; }.reply-modal .form-error { margin-bottom:0; } body.dark .reply-modal { background:#171114; }

/* ─── Community ─────────────────────────────────────── */
.category-tabs { display:grid; gap:4px; }.category-tab { border:0; background:transparent; text-align:left; padding:8px 10px; border-radius:10px; color:var(--muted); font-weight:600; cursor:pointer; font-size:13px; }.category-tab:hover { background:var(--rose); }.category-tab.active { background:var(--rose); color:var(--pink); }
.community-card { border:1px solid var(--line); border-radius:18px; padding:18px; background:#fff; cursor:pointer; transition:box-shadow .2s; }.community-card:hover { box-shadow:0 6px 24px rgba(82,20,48,.07); }.community-card h3 { margin:0 0 4px; font-size:17px; }.community-card .community-meta { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:12px; }.community-card .community-desc { margin:10px 0; font-size:14px; line-height:1.45; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.community-card .community-footer { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }.tag { font-size:11px; color:var(--pink); background:var(--rose); padding:3px 8px; border-radius:99px; font-weight:600; }.community-join-btn { border:0; background:var(--pink); color:#fff; border-radius:9px; padding:7px 16px; font-weight:700; cursor:pointer; }.community-join-btn.joined { background:var(--rose); color:var(--pink); }.community-join-btn:hover { opacity:.85; } body.dark .community-card { background:#171114; } body.dark .community-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.2); }
.my-communities-list { display:grid; gap:8px; } .my-communities-list .community-mini { padding:10px 12px; border-radius:12px; background:var(--rose); font-size:13px; font-weight:600; cursor:pointer; }.my-communities-list .community-mini:hover { opacity:.8; }
.create-community-modal { width:min(460px, 100%); padding:20px; border-radius:20px; background:#fff; box-shadow:var(--shadow); }.create-community-form label { margin:12px 0; }.create-community-form textarea { min-height:90px; resize:vertical; }.cc-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; border-top:1px solid var(--line); padding-top:16px; } body.dark .create-community-modal { background:#171114; }
.community-modal { width:min(620px, 100%); max-height:min(720px, calc(100vh - 40px)); display:flex; flex-direction:column; padding:20px; border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.community-detail-tabs { display:flex; gap:16px; border-bottom:1px solid var(--line); margin:12px 0; flex:none; }
.community-detail-tab { border:0; background:transparent; padding:8px 0 12px; color:var(--muted); font-weight:700; cursor:pointer; }.community-detail-tab.active { color:var(--pink); border-bottom:2px solid var(--pink); }
.community-about { padding:10px 0; overflow-y:auto; flex:1; }.community-about .ca-name { font-size:22px; font-weight:700; margin-bottom:4px; }.community-about .ca-category { display:inline-block; padding:3px 10px; border-radius:99px; background:var(--rose); color:var(--pink); font-size:11px; font-weight:700; }.community-about .ca-desc { color:var(--muted); line-height:1.6; margin:14px 0; }.community-about .ca-stats { display:flex; gap:24px; margin:14px 0; }.community-about .ca-stats div { font-size:13px; }.community-about .ca-stats b { display:block; font-size:18px; }.community-about .ca-members { margin-top:16px; }.community-about .ca-members h4 { font-size:13px; color:var(--muted); margin:0 0 8px; }.ca-member-list { display:flex; flex-wrap:wrap; gap:6px; }.ca-member { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--pink); color:#fff; font-weight:700; font-size:12px; }
.community-chat { flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-messages { flex:1; overflow-y:auto; display:grid; gap:8px; padding:10px 0; min-height:140px; }
.chat-message { display:flex; gap:8px; }.chat-message .chat-bubble { flex:1; padding:9px 12px; border-radius:14px; background:var(--rose); }.chat-message .chat-bubble strong { font-size:13px; }.chat-message .chat-bubble p { margin:3px 0 0; font-size:14px; white-space:pre-wrap; line-height:1.45; }.chat-message .chat-bubble .chat-time { font-size:11px; color:var(--muted); }
.chat-form { display:flex; gap:9px; border-top:1px solid var(--line); padding-top:12px; flex:none; }.chat-form input { margin:0; }.chat-form .primary-button { flex:none; } body.dark .community-modal,body.dark .chat-message .chat-bubble,body.dark .my-communities-list .community-mini,body.dark .create-community-modal { background:#171114; }

/* ─── Rooms ─────────────────────────────────────────── */
.room-create-card { border:1px solid var(--line); border-radius:18px; padding:16px; background:#fff; box-shadow:0 4px 18px rgba(70,20,46,.03); } body.dark .room-create-card { background:#171114; }
.room-card { border:1px solid var(--line); border-radius:18px; padding:18px; background:#fff; cursor:pointer; transition:box-shadow .2s; }.room-card:hover { box-shadow:0 6px 24px rgba(82,20,46,.07); }.room-card .rc-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }.room-card .rc-live { width:8px; height:8px; border-radius:50%; background:#e91e63; animation:pulse 1.5s infinite; flex:none; } @keyframes pulse { 0%{opacity:1} 50%{opacity:.4} 100%{opacity:1} }.room-card h3 { margin:0; font-size:16px; }.room-card .rc-meta { color:var(--muted); font-size:12px; margin:4px 0 10px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.room-card .rc-topic { padding:2px 8px; border-radius:99px; background:var(--rose); color:var(--pink); font-size:10px; font-weight:700; }.room-card .rc-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; }.room-card .rc-footer .rc-count { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:4px; }.room-card .rc-footer button, .room-card .rc-footer .rc-status { border:0; background:var(--rose); color:var(--pink-dark); border-radius:9px; padding:7px 14px; font-weight:700; cursor:pointer; font-size:12px; }.room-card .rc-footer .rc-status { background:transparent; color:var(--muted); cursor:default; }.room-card .rc-footer .end-room { background:transparent; color:#bd174d; } body.dark .room-card { background:#171114; } body.dark .room-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.2); }
#room-modal.modal-backdrop { padding:0; }
.room-modal { width:100%; max-width:100%; height:100vh; max-height:100vh; display:flex; flex-direction:column; padding:20px; background:#fff; border-radius:0; }
.room-info-bar { display:flex; align-items:center; gap:10px; padding:10px 0 12px; border-bottom:1px solid var(--line); flex:none; font-size:13px; color:var(--muted); }
.room-participants { flex:1; display:grid; gap:8px; padding:14px 0; overflow-y:auto; min-height:100px; }
.room-participant { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--rose); }
.room-participant .rp-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--pink); color:#fff; font-weight:700; font-size:13px; flex:none; }
.room-participant .rp-info { flex:1; }.room-participant .rp-name { font-weight:600; font-size:14px; }.room-participant .rp-status { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:4px; }.room-participant .rp-speak { display:inline-flex; gap:2px; }.room-participant .rp-speak span { width:3px; height:10px; border-radius:99px; background:var(--pink); animation:speak .8s infinite alternate; }.room-participant .rp-speak span:nth-child(2) { animation-delay:.2s; height:14px; }.room-participant .rp-speak span:nth-child(3) { animation-delay:.4s; height:8px; } @keyframes speak { from{opacity:.3;height:6px} to{opacity:1;height:14px} }
.room-participant .rp-badge { font-size:10px; padding:2px 8px; border-radius:8px; background:var(--pink); color:#fff; font-weight:700; flex:none; }.room-participant .rp-mic { color:var(--muted); font-size:14px; }
.room-join-requests { border-top:1px solid var(--line); padding:12px 0 8px; flex:none; }
.room-join-requests .eyebrow { margin-bottom:8px; }.room-join-req { display:flex; align-items:center; gap:8px; padding:6px 0; }.room-join-req span { flex:1; font-size:13px; }.room-join-req button { border:0; background:transparent; font-weight:700; padding:6px 10px; border-radius:8px; cursor:pointer; font-size:12px; }
.room-controls { border-top:1px solid var(--line); padding:14px 0 4px; display:flex; gap:12px; justify-content:center; flex:none; }
.room-controls button { border:0; border-radius:12px; padding:10px 24px; font-weight:700; cursor:pointer; font-size:13px; }.room-controls .leave-btn { background:var(--rose); color:var(--pink-dark); }.room-controls .end-btn { background:#bd174d; color:#fff; } body.dark .room-modal,body.dark .room-participant { background:#171114; }

/* ─── Verification ──────────────────────────────────── */
.verify-status { display:flex; align-items:center; gap:10px; font-size:14px; padding:8px 0; }
.verify-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:99px; font-size:12px; font-weight:700; }
.verify-badge.verified { background:#eaf8ef; color:#24734a; }
.verify-badge.unverified,.verify-badge.failed { background:#fff2f6; color:#bd174d; }
.verify-progress { margin-top:8px; padding:10px; border-radius:10px; background:var(--rose); font-size:13px; text-align:center; color:var(--muted); }

/* ─── Room Audio (WebRTC) ───────────────────────────── */
.room-audio-bar { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; background:var(--rose); margin:10px 0; flex:none; }
.room-mic-btn { width:42px; height:42px; border-radius:50%; border:0; display:grid; place-items:center; font-size:18px; cursor:pointer; transition:.2s; flex:none; }
.room-mic-btn.active { background:var(--pink); color:#fff; }
.room-mic-btn.muted { background:var(--line); color:var(--muted); }
.room-mic-label { font-size:12px; color:var(--muted); flex:1; }
.room-volume { display:flex; gap:2px; align-items:flex-end; height:22px; }
.room-volume span { width:3px; border-radius:99px; background:var(--pink); transition:height .12s; }

/* ─── Privacy Modal ─────────────────────────────────── */
.privacy-modal { width:min(640px, 100%); max-height:min(700px, calc(100vh - 40px)); display:flex; flex-direction:column; padding:20px; border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.privacy-scroll { overflow-y:auto; padding:8px 0; flex:1; }
.privacy-scroll h4 { margin:20px 0 6px; font-size:14px; }
.privacy-scroll p { margin:0 0 6px; color:var(--muted); font-size:13px; line-height:1.65; }
body.dark .privacy-modal { background:#171114; }

/* ─── Verification Webcam ───────────────────────────── */
.verify-webcam-wrap { margin-top:12px; }
.verify-webcam-wrap video { width:100%; max-height:320px; border-radius:12px; border:1px solid var(--line); background:#000; transform:scaleX(-1); }
.verify-webcam-actions { display:flex; gap:10px; margin-top:10px; }
.verify-webcam-actions button { flex:1; }
body.dark .verify-webcam-wrap video { border-color:#402935; }