/* ═══ Base stylesheet (shared by all themes) ═════════════
   A theme overrides only the CSS custom properties in :root.
   No rules belong to a specific theme here. */

:root {
    --bg:#3B0000;--pink:#D2691E;--pink-light:#E0CC79;
    --pink-rgb:210,105,30;--pink-light-rgb:224,204,121;--bg-rgb:59,0,0;
    --accent:var(--pink-light);          /* per-theme accent alias */
    --black:#000;--white:#fff;--side:#6e5057;
    --hover-blue:#78beff;--track:#fff7fb;
    --max:520px;--max-wide:1040px;--font-size:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background-color:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior:none;}
#app{max-width:var(--max);margin:0 auto;height:100vh;height:100dvh;border:1px solid var(--pink);padding:3px;position:relative;transition:max-width .2s;}
#app.wide{max-width:var(--max-wide)}
@media (max-width:1100px){#app.wide{max-width:var(--max)}}
#app-inner{background:var(--black);border:1px solid var(--pink);height:100%;display:flex;flex-direction:column;overflow:hidden;font-size:var(--font-size);}
.screen{display:flex;flex-direction:column;flex:1;min-height:0}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background-color:var(--track)}
::-webkit-scrollbar-thumb{background-color:var(--pink)}
.top-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background-image:linear-gradient(to right,var(--pink),var(--pink-light));border-bottom:1px solid var(--pink);color:var(--white);letter-spacing:2px;flex-shrink:0;-webkit-user-select:none;user-select:none;}
.top-bar h1{font-size:1.15em;white-space:nowrap;margin:0}
.room-title{font-size:1.1em;font-weight:bold;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.header-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.user-badge{color:var(--white);font-size:0.8em;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:1px;}
.admin-tag{background:var(--black);color:var(--pink);font-size:0.65em;padding:1px 5px;border:1px solid var(--pink);border-radius:3px;letter-spacing:1px;}
.master-tag{background:var(--pink);color:var(--black);font-size:0.65em;padding:1px 5px;border:1px solid var(--pink-light);border-radius:3px;letter-spacing:2px;font-weight:bold;}
.badge-star{font-size:1em;line-height:1;cursor:default;user-select:none;-webkit-user-select:none;}
.master-star{color:var(--pink-light);}
.admin-star{color:var(--pink);}
.dm-badge{color:var(--pink);font-size:1em;cursor:default;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--side);display:inline-block;transition:.3s;flex-shrink:0;}
.conn-dot.connected{background:#a6e3a1}
.conn-dot.disconnected{background:var(--pink)}
.conn-dot.stale{background:var(--pink-light);animation:pulse 1.2s infinite;}
.btn-primary{background-image:linear-gradient(to right,var(--pink),var(--pink-light));color:var(--white);border:1px solid var(--pink);padding:8px 16px;border-radius:0;cursor:pointer;font-family:inherit;font-size:0.85em;font-weight:bold;letter-spacing:2px;transition:.15s;width:100%;}
.btn-primary:hover{text-shadow:0 0 2px var(--hover-blue)}
.btn-primary:active{transform:scale(.97)}
.btn-secondary{background:var(--black);color:var(--pink);border:1px solid var(--pink);padding:6px 14px;cursor:pointer;font-family:inherit;font-size:0.8em;letter-spacing:1px;transition:.15s;width:100%;}
.btn-secondary:hover{text-shadow:0 0 2px var(--hover-blue)}
.btn-small{background:var(--black);color:var(--pink);border:1px solid var(--pink);padding:4px 10px;cursor:pointer;font-family:inherit;font-size:0.75em;letter-spacing:1px;transition:.15s;white-space:nowrap;}
.btn-small:hover{text-shadow:0 0 2px var(--hover-blue)}
.btn-icon{background:transparent;color:var(--white);border:1px solid var(--white);width:28px;height:28px;border-radius:0;cursor:pointer;font-family:inherit;font-size:0.9em;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0;}
.btn-icon:hover{text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue)}
.btn-icon.locked{color:var(--accent);border-color:var(--accent);text-shadow:0 0 3px var(--accent)}
.btn-icon.locked:hover{text-shadow:0 0 5px var(--accent);border-color:var(--accent)}
#auth-screen{align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.auth-box{width:100%;max-width:380px;border:1px solid var(--pink);background:var(--black);}
.auth-header{background-image:linear-gradient(to right,var(--pink),var(--pink-light));border-bottom:1px solid var(--pink);padding:12px;color:var(--white);letter-spacing:3px;text-align:center;}
.auth-header h1{font-size:1.4em;margin:0}
.auth-header p{font-size:0.7em;color:var(--white);opacity:.8;margin-top:4px;letter-spacing:1px}
.auth-header .auth-sub{font-size:0.65em;opacity:.6;margin-top:2px;font-style:italic}
.auth-body{padding:20px 16px}
.tabs{display:flex;gap:0;margin-bottom:16px;border:1px solid var(--pink)}
.tab{flex:1;padding:7px;border:none;background:var(--black);color:var(--pink);cursor:pointer;font-family:inherit;font-size:0.8em;letter-spacing:2px;transition:.15s;}
.tab.active{background-image:linear-gradient(to right,var(--pink),var(--pink-light));color:var(--white);}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form input{background:var(--black);border:1px solid var(--pink);color:var(--white);padding:9px 12px;border-radius:0;font-family:inherit;font-size:0.9em;outline:none;transition:.15s;width:100%;letter-spacing:1px;}
.auth-form input:focus{box-shadow:0 0 3px var(--hover-blue)}
.auth-form input::placeholder{color:var(--side)}
.error-text{color:var(--pink);font-size:0.8em;min-height:1.2em;margin-top:8px;letter-spacing:1px}
.auth-settings-row{display:flex;justify-content:center;gap:8px;margin-top:16px;padding-top:12px;border-top:1px dotted var(--pink);}
.lobby-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.lobby-search{background:var(--black);border:1px solid var(--pink);color:var(--white);padding:8px 10px;font-family:inherit;font-size:0.85em;outline:none;letter-spacing:1px;width:100%;}
.lobby-search:focus{box-shadow:0 0 3px var(--hover-blue)}
.lobby-search::placeholder{color:var(--side)}
.room-list{display:flex;flex-direction:column;gap:6px}
.room-item{border:1px solid var(--pink);background:var(--black);padding:12px 14px;cursor:pointer;transition:.15s;display:flex;align-items:flex-start;gap:8px;}
.room-item:hover{box-shadow:0 0 4px var(--hover-blue) inset}
.room-item.dm-room-item{border-style:dashed;background:rgba(var(--pink-rgb),.03);}
.room-item-content{flex:1;min-width:0;}
.room-name{font-weight:bold;color:var(--white);font-size:1em;letter-spacing:1px;}
.room-name .dm-icon-prefix{color:var(--pink-light)}
.room-topic{color:var(--side);font-size:0.75em;margin-top:3px;letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.room-meta{color:var(--side);font-size:0.7em;margin-top:5px;display:flex;gap:12px;letter-spacing:1px;flex-wrap:wrap;}
.unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pink);margin-left:6px;vertical-align:middle;}
.unread-count{background:var(--pink);color:var(--white);font-size:0.6em;padding:1px 5px;border-radius:8px;margin-left:6px;font-weight:bold;letter-spacing:0;}
.muted{color:var(--side);text-align:center;padding:2rem;font-size:0.85em;letter-spacing:1px}
.section-label{color:var(--side);font-size:0.7em;letter-spacing:2px;text-transform:uppercase;margin-top:8px;margin-bottom:4px;border-bottom:1px dotted var(--pink);padding-bottom:4px;}
.room-delete-btn{background:transparent;color:var(--pink);border:1px solid var(--pink);width:24px;height:24px;cursor:pointer;font-family:inherit;font-size:0.8em;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0;padding:0;}
.room-delete-btn:hover{text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue)}
.room-controls{display:flex;flex-direction:column;gap:3px;flex-shrink:0;}
.room-arrow-btn{background:transparent;color:var(--side);border:1px solid var(--side);width:22px;height:18px;cursor:pointer;font-family:inherit;font-size:0.65em;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0;}
.room-arrow-btn:hover:not(:disabled){text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue);color:var(--hover-blue)}
.room-arrow-btn:disabled{opacity:.3;cursor:not-allowed;}
.checkbox-label{color:var(--white);font-size:0.75em;letter-spacing:1px;display:inline-flex;align-items:flex-start;gap:6px;width:auto;max-width:100%;align-self:flex-start;}
.checkbox-label input[type="checkbox"]{flex-shrink:0;margin-top:2px;cursor:pointer;}
.checkbox-label .checkbox-text{line-height:1.4;color:var(--white);}
.checkbox-label .checkbox-text .inline-link{color:var(--pink-light);}
.checkbox-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.toggle-row{display:flex;gap:8px;}
.toggle-btn{flex:1;background:var(--black);color:var(--side);border:1px solid var(--pink);padding:8px 12px;cursor:pointer;font-family:inherit;font-size:0.8em;letter-spacing:1px;transition:.15s;text-align:center;}
.toggle-btn:hover{color:var(--pink-light);border-color:var(--pink-light);}
.toggle-btn.active{background-image:linear-gradient(to right,var(--pink),var(--pink-light));color:var(--white);border-color:var(--pink);}
.toggle-btn.active::before{content:'✓ ';}
.invites-create-row{display:flex;gap:6px;align-items:center;}
.invites-create-row input{flex:1;min-width:0;background:var(--black);border:1px solid var(--pink);color:var(--white);padding:7px 10px;font-family:inherit;font-size:0.85em;outline:none;letter-spacing:1px;}
.invites-create-row input:focus{box-shadow:0 0 3px var(--hover-blue)}
.invite-note-input{width:100%;box-sizing:border-box;background:var(--black);border:1px solid var(--pink);color:var(--white);padding:7px 10px;font-family:inherit;font-size:0.85em;outline:none;letter-spacing:1px;margin:6px 0;}
.invite-note-input:focus{box-shadow:0 0 3px var(--hover-blue)}
.invites-list{margin-top:8px;display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto;}
.invite-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px dotted var(--pink);font-size:0.78em;letter-spacing:1px;}
.invite-row .invite-code{color:var(--pink-light);font-weight:bold;font-family:monospace;letter-spacing:2px;}
.invite-row .invite-meta{color:var(--side);font-size:0.85em;flex:1;}
.invite-row .invite-revoke{background:transparent;color:var(--pink);border:1px solid var(--pink);cursor:pointer;font-family:inherit;font-size:0.8em;padding:2px 6px;letter-spacing:1px;}
.invite-row .invite-revoke:hover{text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue)}
.invite-row.revoked{opacity:0.5;text-decoration:line-through;}
.invite-row.admin-grant{border-color:var(--pink-light);background:rgba(var(--pink-light-rgb),0.06);}
.invite-row.admin-grant .invite-code{color:var(--white);}
.invite-row.admin-grant::after{content:'ADMIN';color:var(--black);background:var(--pink);font-size:0.7em;padding:1px 4px;letter-spacing:1px;font-weight:bold;margin-left:auto;}

.ban-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px dotted var(--pink);font-size:0.78em;letter-spacing:1px;}
.ban-row .ban-target{color:var(--pink-light);font-weight:bold;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ban-row .ban-reason{color:var(--side);font-size:0.85em;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ban-row .ban-remove{background:transparent;color:var(--pink);border:1px solid var(--pink);cursor:pointer;font-family:inherit;font-size:0.8em;padding:2px 6px;letter-spacing:1px;}
.ban-row .ban-remove:hover{text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue)}

.user-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px dotted var(--pink);font-size:0.78em;letter-spacing:1px;}
.user-row .user-name-admin{color:var(--pink-light);font-weight:bold;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-row .user-row-tag{font-size:0.7em;padding:1px 4px;letter-spacing:1px;border:1px solid var(--pink);color:var(--pink);background:var(--black);}
.user-row .user-row-tag.master{background:var(--pink);color:var(--black);border-color:var(--pink-light);font-weight:bold;}
.user-row button{background:transparent;color:var(--pink);border:1px solid var(--pink);cursor:pointer;font-family:inherit;font-size:0.78em;padding:2px 6px;letter-spacing:1px;}
.user-row button:hover{text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue)}

.content-edit-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dotted var(--pink);}
.content-edit-row label{color:var(--pink);font-size:0.8em;letter-spacing:1px;text-transform:uppercase;}
.content-edit-row textarea{background:var(--black);border:1px solid var(--pink);color:var(--white);padding:8px 10px;font-family:inherit;font-size:0.85em;outline:none;transition:.15s;width:100%;letter-spacing:0.5px;line-height:1.4;resize:vertical;}
.content-edit-row textarea:focus{box-shadow:0 0 3px var(--hover-blue)}
.content-edit-row .content-save{align-self:flex-start;}
.create-room{border:1px solid var(--pink);background:var(--black);padding:12px;display:flex;flex-direction:column;gap:8px;}
.create-room input{background:var(--black);border:1px solid var(--pink);color:var(--white);padding:9px 12px;border-radius:0;font-family:inherit;font-size:0.9em;outline:none;transition:.15s;width:100%;letter-spacing:1px;}
.create-room input:focus{box-shadow:0 0 3px var(--hover-blue)}
.create-room input::placeholder{color:var(--side)}
.topic-bar{padding:5px 14px;background:var(--black);border-bottom:1px solid var(--pink);color:var(--side);font-size:0.75em;font-style:italic;letter-spacing:1px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topic-bar:empty{display:none}
.dm-meta-bar{padding:5px 14px;background:var(--black);border-bottom:1px solid var(--pink);color:var(--side);font-size:0.75em;letter-spacing:1px;flex-shrink:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#dm-collapse-btn{margin-left:auto;}
.dm-call-start-btn{color:var(--accent);border-color:var(--accent);}
.dm-call-bar{padding:6px 14px;background:var(--black);border-bottom:1px solid var(--pink);color:var(--white);font-size:0.85em;letter-spacing:1px;flex-shrink:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dm-call-bar.incoming{border-bottom-color:var(--accent);}
.dm-call-bar.active{border-bottom-color:var(--green,var(--pink));}
.dm-call-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-call-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.dm-call-accept-btn{color:var(--green,#0f0);border-color:var(--green,#0f0);}
.dm-call-reject-btn{color:var(--accent);border-color:var(--accent);}
.dm-call-end-btn{color:var(--pink);border-color:var(--pink);}
.dm-call-mute-btn{min-width:34px;text-align:center;}
.dm-call-mute-btn.muted{color:var(--accent);border-color:var(--accent);}
#room-screen.dm-collapsed .messages,#room-screen.dm-collapsed .typing-indicator,#room-screen.dm-collapsed .input-bar,#room-screen.dm-collapsed #subroom-area{display:none !important;}
#subroom-area{flex-shrink:0;border-bottom:1px solid var(--pink);padding:8px 14px;background:var(--black);display:none;}
.subroom-create-btn{background:var(--black);color:var(--pink);border:1px dashed var(--pink);padding:6px 12px;cursor:pointer;font-family:inherit;font-size:0.75em;letter-spacing:1px;transition:.15s;text-align:left;width:100%;}
.subroom-create-btn:hover{text-shadow:0 0 2px var(--hover-blue)}
.create-subroom{border:1px solid var(--pink);background:var(--black);padding:10px;margin-top:6px;display:flex;flex-direction:column;gap:6px;}
.create-subroom input{background:var(--black);border:1px solid var(--pink);color:var(--white);padding:8px 10px;border-radius:0;font-family:inherit;font-size:0.85em;outline:none;transition:.15s;width:100%;letter-spacing:1px;}
.create-subroom input:focus{box-shadow:0 0 3px var(--hover-blue)}
.create-subroom input::placeholder{color:var(--side)}
.create-subroom-label{color:var(--pink);font-size:0.75em;letter-spacing:1px}
.messages{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth;min-height:0;background:var(--black);}
.msg{padding:4px 0;line-height:1.4;word-wrap:break-word;word-break:break-word;position:relative}
.msg-content strong,.msg-content b{font-weight:700;color:var(--white);}
.msg-content em,.msg-content i{font-style:italic;}
.msg-content u{text-decoration:underline;text-decoration-color:var(--accent);}
.msg-content del{text-decoration:line-through;text-decoration-color:var(--pink);opacity:.85;}
.msg-content strong em,.msg-content em strong,.msg-content strong u,.msg-content u strong,.msg-content strong del,.msg-content del strong,.msg-content em u,.msg-content u em,.msg-content em del,.msg-content del em,.msg-content u del,.msg-content del u{font-style:italic;font-weight:700;}
.msg-deleted{opacity:.5;}
.msg-deleted .msg-content{text-decoration:line-through;color:var(--side);font-style:italic;}
.msg-deleted .msg-delete-btn{color:var(--accent);border-color:var(--accent);}
.msg-time{color:var(--side);font-size:0.7em;margin-right:5px;cursor:help;}
.msg-user{color:var(--pink);font-weight:bold;margin-right:6px;letter-spacing:1px}
.msg-user.admin{color:var(--white)}
.msg-user.admin::after{content:' ★';color:var(--pink);font-size:0.8em}
.msg-user.as-user{color:var(--pink-light);font-style:italic}
.msg-content{color:var(--white);text-align:justify;text-justify:inter-word}
.msg-mention{background:rgba(var(--pink-rgb),0.25);color:var(--white);padding:0 3px;border-radius:2px;}
.msg-greentext{padding-left:14px;border-left:2px solid var(--side);}
.msg-greentext .msg-content{color:var(--side);font-style:italic;}
.msg-mention-user{color:var(--pink);font-weight:bold;letter-spacing:1px;cursor:default;}
.msg-mention-user:hover{color:var(--pink-light);}
.msg-mention-quote{background:rgba(var(--pink-rgb),0.04);border-left:2px solid var(--pink);padding:2px 0 2px 6px;margin:3px 0;}
.msg-mention-quote .msg-mention-quote-content{display:flex;flex-direction:column;gap:3px;}
.mention-quote-line{color:var(--side);font-size:0.78em;letter-spacing:0.5px;}
.mention-quote-room-link{color:var(--pink-light);font-weight:bold;text-decoration:underline;cursor:pointer;}
.mention-quote-room-link:hover{text-shadow:0 0 2px var(--hover-blue);}
.mention-quote-block{margin:0;padding:4px 8px;border-left:2px solid var(--side);background:rgba(0,0,0,0.35);font-size:0.85em;color:var(--side);}
.mention-quote-author{color:var(--pink);font-weight:bold;margin-right:6px;letter-spacing:1px;}
.mention-quote-text{color:var(--white);}
.msg-delete-btn{background:transparent;color:var(--side);border:none;cursor:pointer;font-size:0.75em;padding:0 4px;margin-left:6px;opacity:0.4;transition:.15s;}
.msg-delete-btn:hover{color:var(--pink);opacity:1;}
.msg-edit-btn{background:transparent;color:var(--side);border:none;cursor:pointer;font-size:0.75em;padding:0 4px;margin-left:2px;opacity:0.4;transition:.15s;}
.msg-edit-btn:hover{color:var(--accent);opacity:1;}
.msg-edited-note{color:var(--side);font-size:0.7em;font-style:italic;margin-left:6px;opacity:.7;}
.msg-comment{margin:4px 0 2px 0;padding:3px 8px;border-left:2px solid var(--side);background:rgba(0,0,0,0.35);font-size:0.85em;letter-spacing:0.5px;}
.msg-comment-by{color:var(--accent);font-weight:bold;letter-spacing:1px;}
.msg-comment-text{color:var(--side);}
.msg-comment-inline{border-left:2px solid var(--side);background:rgba(0,0,0,0.35);padding:2px 0 2px 8px;}
.msg-comment-inline .msg-content{color:var(--side);}
.msg-comment-inline .msg-comment-quote{color:var(--accent);font-weight:bold;margin:0 6px;}
.action-msg{color:var(--pink-light)}
.action-msg em{color:var(--pink-light)}
.system-msg{color:var(--side);font-style:italic;padding:1px 0;font-size:0.85em}
.dm-call-log-msg{text-align:center;padding:3px 0}
.dm-call-log-msg .dm-call-log{display:inline-block;background:rgba(var(--pink-rgb),0.12);border:1px solid rgba(var(--pink-rgb),0.25);border-radius:12px;padding:2px 10px;color:var(--side);font-style:normal;font-size:0.85em;letter-spacing:0.3px}
.error-msg{color:var(--pink);background:rgba(var(--pink-rgb),.08);padding:5px 10px;margin:3px 0;font-size:0.85em;border:1px dotted var(--pink);letter-spacing:1px;}
.subroom-card{border:1px solid var(--pink);background:rgba(var(--pink-rgb),.05);padding:10px 14px;margin:4px 0;cursor:pointer;transition:.15s;}
.subroom-card:hover{box-shadow:0 0 4px var(--hover-blue) inset;border-color:var(--hover-blue);}
.subroom-card-header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.subroom-card-created{color:var(--side);font-size:0.7em;letter-spacing:1px;}
.subroom-card-creator{color:var(--side);font-size:0.75em;letter-spacing:1px;}
.subroom-card-body{display:flex;align-items:baseline;gap:8px;margin-top:4px;flex-wrap:wrap;}
.subroom-card-icon{color:var(--pink);font-size:0.9em}
.subroom-card-name{color:var(--white);font-weight:bold;letter-spacing:1px;}
.subroom-card-topic{color:var(--side);font-size:0.8em}
.subroom-card-meta{color:var(--side);font-size:0.7em;margin-top:2px;display:flex;gap:10px;}
.subroom-rename-btn{background:transparent;color:var(--side);border:1px solid var(--side);width:22px;height:18px;cursor:pointer;font-family:inherit;font-size:0.65em;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0;margin-left:auto;}
.subroom-rename-btn:hover{text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue);color:var(--hover-blue)}
.subroom-delete-btn{background:transparent;color:var(--side);border:1px solid var(--side);width:22px;height:18px;cursor:pointer;font-family:inherit;font-size:0.65em;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0;margin-left:4px;}
.subroom-delete-btn:hover{text-shadow:0 0 2px var(--pink);border-color:var(--pink);color:var(--pink)}
.typing-indicator{color:var(--side);font-size:0.75em;font-style:italic;padding:2px 14px;height:1.4em;flex-shrink:0;letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.input-bar{display:flex;gap:8px;padding:10px 14px;background:var(--black);border-top:1px solid var(--pink);flex-shrink:0;padding-bottom:calc(10px + env(safe-area-inset-bottom));}
#message-input{flex:1;background:var(--black);border:1px solid var(--pink);color:var(--white);padding:9px 12px;border-radius:0;font-family:inherit;font-size:0.9em;outline:none;transition:.15s;min-width:0;letter-spacing:1px;resize:none;overflow-y:auto;max-height:50vh;line-height:1.4;}
#message-input:focus{box-shadow:0 0 3px var(--hover-blue)}
#message-input::placeholder{color:var(--side)}
#send-btn{flex-shrink:0;width:auto;padding:9px 18px}
.users-sidebar{position:absolute;top:0;right:0;bottom:0;width:75%;max-width:280px;background:var(--black);border-left:1px solid var(--pink);padding:0;transform:translateX(100%);transition:transform .2s;z-index:20;overflow-y:auto;display:flex;flex-direction:column;}
.users-sidebar.open{transform:translateX(0)}
.users-header{background-image:linear-gradient(to right,var(--pink),var(--pink-light));border-bottom:1px solid var(--pink);padding:10px 14px;color:var(--white);letter-spacing:2px;font-size:0.85em;}
.users-body{padding:10px 14px}
#user-list{list-style:none;display:flex;flex-direction:column;gap:6px;padding:0;margin:0;}
#user-list li{color:var(--pink);font-size:1em;padding:6px 0;letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px;}
#user-list li .user-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#user-list li::before{content:'● ';font-size:0.8em}
#user-list li.you{color:var(--white)}
#user-list li.you::before{content:'◆ ';font-size:0.8em}
#user-list li.admin-user{color:var(--pink-light)}
#user-list li.admin-user::before{content:'☆ ';font-size:0.8em}
#user-list li.master-user{color:var(--pink-light)}
#user-list li.master-user::before{content:'★ ';font-size:0.8em}
#user-list li.offline{color:var(--side);opacity:0.6;}
#user-list li.offline::before{content:'○ ';font-size:0.8em}
#user-list li.user-separator{color:var(--side);font-size:0.85em;letter-spacing:2px;text-transform:uppercase;border-bottom:1px dotted var(--pink);padding:8px 0 4px;margin-top:6px;list-style:none;}
#user-list li.user-separator::before{content:'';}
.dm-icon{background:var(--black);color:var(--pink);border:2px solid var(--pink);width:38px;height:38px;cursor:pointer;font-family:inherit;font-size:1.3em;font-weight:bold;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0;padding:0;border-radius:10px;box-shadow:0 2px 0 rgba(var(--pink-rgb),0.25),0 3px 8px rgba(0,0,0,0.18);}
.dm-icon:hover{text-shadow:0 0 4px var(--hover-blue);border-color:var(--hover-blue);background:rgba(var(--pink-rgb),0.15);transform:scale(1.08);box-shadow:0 3px 0 rgba(var(--pink-rgb),0.35),0 5px 12px rgba(0,0,0,0.22);}
.dm-icon:active{transform:translateY(2px) scale(1.02);box-shadow:0 1px 0 rgba(var(--pink-rgb),0.25),0 2px 5px rgba(0,0,0,0.18);}
.users-search{width:100%;background:var(--black);border:1px solid var(--pink);color:var(--white);padding:9px 12px;font-family:inherit;font-size:0.95em;outline:none;transition:.15s;letter-spacing:1px;}
.users-search:focus{box-shadow:0 0 3px var(--hover-blue)}
.users-search::placeholder{color:var(--side)}
.dm-call-icon{background:transparent;color:var(--accent);border:1px solid var(--accent);width:26px;height:26px;cursor:pointer;font-family:inherit;font-size:0.9em;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0;padding:0;margin-left:auto;}
.dm-call-icon:hover{text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue)}
.contacts-btn{width:100%;margin-bottom:6px;}
.backdrop{position:absolute;inset:0;background:rgba(var(--bg-rgb),.6);z-index:15;display:none;opacity:0;transition:opacity .2s;}
.backdrop.show{display:block;opacity:1}
.settings-overlay{position:absolute;inset:0;background:rgba(var(--bg-rgb),.7);z-index:30;display:none;align-items:center;justify-content:center;padding:24px;}
.settings-overlay.show{display:flex}
.settings-box{border:1px solid var(--pink);background:var(--black);width:100%;max-width:320px;}
.settings-header{background-image:linear-gradient(to right,var(--pink),var(--pink-light));border-bottom:1px solid var(--pink);padding:10px 14px;color:var(--white);letter-spacing:2px;font-size:0.9em;display:flex;justify-content:space-between;align-items:center;}
.settings-body{padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.setting-row{display:flex;flex-direction:column;gap:4px}
.setting-row-horizontal{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.setting-row-horizontal .setting-label{flex-shrink:0}
.setting-row-horizontal .setting-controls{flex:1;justify-content:flex-end}
.setting-row input[type="password"],.setting-row input[type="text"]{background:var(--black);border:1px solid var(--pink);color:var(--white);padding:8px 10px;border-radius:0;font-family:inherit;font-size:0.9em;outline:none;transition:.15s;width:100%;letter-spacing:1px;}
.setting-row input[type="password"]:focus,.setting-row input[type="text"]:focus{box-shadow:0 0 3px var(--hover-blue)}
.setting-row input[type="password"]::placeholder,.setting-row input[type="text"]::placeholder{color:var(--side)}
.setting-controls-stacked{flex-direction:column;align-items:stretch;gap:4px;}
.setting-controls-stacked .btn-secondary{align-self:flex-start;width:auto}
.setting-label{color:var(--side);font-size:0.75em;letter-spacing:2px;text-transform:uppercase}
.setting-controls{display:flex;gap:6px;align-items:center}
.size-display{color:var(--white);font-size:0.85em;min-width:45px;text-align:center;letter-spacing:1px;}
.size-btn{background:var(--black);color:var(--pink);border:1px solid var(--pink);width:30px;height:30px;cursor:pointer;font-family:inherit;font-size:1em;display:flex;align-items:center;justify-content:center;transition:.15s;}
.size-btn:hover{text-shadow:0 0 2px var(--hover-blue)}
.font-btn{background:var(--black);color:var(--pink);border:1px solid var(--pink);padding:5px 12px;cursor:pointer;font-family:inherit;font-size:0.8em;letter-spacing:1px;transition:.15s;flex:1;}
.font-btn.active{background-image:linear-gradient(to right,var(--pink),var(--pink-light));color:var(--white);}
.font-btn:hover{text-shadow:0 0 2px var(--hover-blue)}
.toggle-switch{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--black);border:1px solid var(--pink);transition:.15s}
.toggle-slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;top:3px;background:var(--pink);transition:.15s}
.toggle-switch input:checked + .toggle-slider{background:var(--pink)}
.toggle-switch input:checked + .toggle-slider:before{background:var(--white);transform:translateX(17px)}
.toggle-switch input:focus + .toggle-slider{box-shadow:0 0 3px var(--hover-blue)}
.modal{position:absolute;inset:0;background:rgba(var(--bg-rgb),.7);z-index:30;display:none;align-items:center;justify-content:center;padding:24px;}
.modal.show{display:flex}
.modal-box{border:1px solid var(--pink);background:var(--black);width:100%;max-width:300px;}
.modal-box-wide{max-width:420px;max-height:80vh;display:flex;flex-direction:column;}
.modal-header{background-image:linear-gradient(to right,var(--pink),var(--pink-light));border-bottom:1px solid var(--pink);padding:10px 14px;color:var(--white);letter-spacing:2px;font-size:0.85em;}
.modal-body{padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.scrollable-body{overflow-y:auto;flex:1;min-height:0;padding-right:6px;}
.scrollable-body h3{color:var(--pink);font-size:0.9em;letter-spacing:1px;margin-top:10px;margin-bottom:4px;text-transform:uppercase;}
.scrollable-body p,.scrollable-body ul{color:var(--white);font-size:0.85em;line-height:1.5;letter-spacing:0.5px;}
.scrollable-body ul{padding-left:20px;}
.scrollable-body li{margin:3px 0;}
.announcement-view{padding:4px 0;}
.announcement-view h3{color:var(--pink);font-size:1em;letter-spacing:1px;margin-top:14px;margin-bottom:6px;text-transform:uppercase;}
.announcement-view p{color:var(--white);font-size:0.95em;line-height:1.6;letter-spacing:0.5px;margin-bottom:10px;}
.announcement-view ul{color:var(--white);font-size:0.95em;line-height:1.6;padding-left:24px;margin-bottom:10px;}
.announcement-view li{margin:4px 0;}
.room-item.announcement-item{border-style:solid;border-color:var(--pink-light);background:rgba(var(--pink-light-rgb),0.06);}
.video-card{display:flex;align-items:center;gap:12px;margin:12px 0;padding:12px 14px;border:1px solid var(--pink);background:rgba(var(--pink-rgb),0.06);cursor:pointer;transition:.15s;}
.video-card:hover{background:rgba(var(--pink-rgb),0.12);box-shadow:0 0 4px var(--hover-blue);}
.video-card-play{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--pink);background:var(--black);color:var(--pink);font-size:1.1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
.video-card-play:hover{background:var(--pink);color:var(--black);}
.video-card-title{color:var(--white);font-size:0.9em;letter-spacing:0.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.video-card-thumb{flex-wrap:wrap;padding:8px;position:relative;}
.video-card-poster-wrap{position:relative;flex:0 0 auto;width:100%;max-width:240px;line-height:0;}
.video-card-poster{width:100%;height:auto;max-height:135px;object-fit:cover;border:1px solid var(--pink);background:var(--black);display:block;}
.video-card-poster-placeholder{aspect-ratio:16/9;min-height:120px;background:var(--black);border:1px solid var(--pink);}
.video-card-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);color:var(--pink);border:1px solid var(--pink);font-size:0.9em;pointer-events:none;}
#video-modal-player{max-height:70vh;object-fit:contain;}
@media (max-width:600px){
  .video-card{padding:8px 10px;gap:8px;}
  .video-card-poster-wrap{max-width:180px;}
  .video-card-poster{max-height:101px;}
  .video-card-poster-placeholder{min-height:101px;}
  .video-card-title{font-size:0.85em;}
}
.yt-card{display:inline-block;vertical-align:top;margin:0 0 0 0;max-width:256px;border:1px solid var(--pink);background:rgba(var(--pink-rgb),0.06);text-decoration:none;cursor:pointer;transition:.15s;}
.yt-card:hover{background:rgba(var(--pink-rgb),0.12);box-shadow:0 0 4px var(--hover-blue);}
.yt-card-thumb-wrap{position:relative;line-height:0;}
.yt-card-thumb{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:16/9;max-height:144px;background:var(--black);border-bottom:1px solid var(--pink);}
.yt-card-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);color:var(--pink);border:1px solid var(--pink);font-size:1em;pointer-events:none;}
.yt-card-meta{padding:6px 10px;display:flex;flex-direction:column;gap:2px;}
.yt-card-title{color:var(--white);font-size:0.85em;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.yt-card-author{color:var(--side);font-size:0.75em;letter-spacing:0.5px;}
@media (max-width:600px){
  .yt-card{max-width:256px;}
}
.inline-gif{display:inline-block;vertical-align:top;max-width:256px;max-height:256px;width:auto;height:auto;object-fit:contain;border:1px solid var(--pink);background:var(--black);margin:0;cursor:pointer;}
.inline-gif:hover{box-shadow:0 0 4px var(--hover-blue);}
.rebelleon-logo-inline{display:block;margin:8px auto;width:100%;max-width:240px;height:auto;aspect-ratio:480/262;background:url('/assets/rebelleon-logo.png') center/contain no-repeat;pointer-events:none;}
.privacy-notice{color:var(--side);font-size:0.78em;line-height:1.5;letter-spacing:0.5px;padding:10px 14px;margin:6px 0;border:1px dotted var(--pink);background:rgba(var(--pink-rgb),0.03);font-style:italic;}
.modal-body input{background:var(--black);border:1px solid var(--pink);color:var(--white);padding:9px 12px;border-radius:0;font-family:inherit;font-size:0.9em;outline:none;transition:.15s;width:100%;letter-spacing:1px;}
.modal-body input:focus{box-shadow:0 0 3px var(--hover-blue)}
.modal-body input::placeholder{color:var(--side)}
.modal-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;padding:0 14px 14px;}
.modal-agree-note{padding:0 14px;color:var(--side);font-size:0.78em;letter-spacing:1px;font-style:italic;}
.modal-buttons .btn-small{width:auto;padding:6px 16px}
.inline-link{color:var(--pink-light);text-decoration:underline;cursor:pointer;}
.inline-link:hover{color:var(--hover-blue);text-shadow:0 0 2px var(--hover-blue)}
.msg-link{color:var(--hover-blue);text-decoration:underline;word-break:break-all;}
.msg-link:visited{color:#c89dff}
.msg-as-user{color:var(--pink-light);font-weight:bold;margin-right:6px;letter-spacing:1px;font-style:italic;}
.as-msg{background:rgba(var(--pink-light-rgb),0.04);border-left:2px solid var(--pink-light);padding-left:6px;}
.update-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--black);border:1px solid var(--pink-light);color:var(--white);padding:10px 16px;font-size:0.85em;letter-spacing:1px;z-index:100;display:flex;gap:10px;align-items:center;box-shadow:0 0 12px rgba(0,0,0,0.6);}
.update-toast button{background:var(--pink);color:var(--white);border:none;padding:4px 10px;cursor:pointer;font-family:inherit;font-size:0.85em;letter-spacing:1px;}
.load-older-row{padding:6px 14px;text-align:center;color:var(--side);font-size:0.75em;letter-spacing:1px;cursor:pointer;border-bottom:1px dotted var(--pink);}
.load-older-row:hover{color:var(--pink-light);text-shadow:0 0 2px var(--hover-blue)}
.msg.sending{opacity:0.55;}
.msg.sending .msg-content::after{content:' ⏳';color:var(--side);font-size:0.7em;}

/* ═══ Toasts ═══════════════════════════════════════════ */
.toast-stack{position:fixed;left:50%;bottom:calc(60px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:200;display:flex;flex-direction:column-reverse;gap:6px;align-items:center;pointer-events:none;width:100%;max-width:var(--max);padding:0 12px;box-sizing:border-box;}
.toast{pointer-events:auto;background:var(--black);border:1px solid var(--pink);color:var(--white);padding:8px 14px;font-size:0.85em;letter-spacing:1px;display:flex;gap:10px;align-items:center;box-shadow:0 0 12px rgba(0,0,0,0.6);max-width:100%;animation:toast-in .15s ease-out;flex-wrap:wrap;}
.toast.error{border-color:var(--pink);color:var(--pink);}
.toast.success{border-color:#a6e3a1;color:#a6e3a1;}
.toast.info{border-color:var(--pink-light);color:var(--pink-light);}
.toast.removing{animation:toast-out .2s ease-in forwards;}
.toast-action{background:var(--pink);color:var(--white);border:none;padding:3px 10px;cursor:pointer;font-family:inherit;font-size:0.85em;letter-spacing:1px;flex-shrink:0;}
.toast-action:hover{text-shadow:0 0 2px var(--hover-blue);}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes toast-out{from{opacity:1;}to{opacity:0;transform:translateY(-8px);}}

/* ═══ Confirm modal ═════════════════════════════════════ */
.confirm-body{color:var(--white);font-size:0.9em;line-height:1.5;letter-spacing:0.5px;margin:0;}
.confirm-ok-btn{border-color:var(--pink);color:var(--pink);font-weight:bold;}

/* ═══ Reconnect banner ═════════════════════════════════ */
.reconnect-banner{position:absolute;top:0;left:0;right:0;z-index:40;background:rgba(var(--pink-rgb),0.95);color:var(--white);padding:8px 14px;display:flex;gap:10px;align-items:center;justify-content:center;font-size:0.8em;letter-spacing:1px;border-bottom:1px solid var(--pink);box-shadow:0 2px 8px rgba(0,0,0,0.4);}
.reconnect-banner .reconnect-text{flex:1;text-align:right;}
.reconnect-banner .btn-small{flex-shrink:0;background:var(--black);color:var(--white);border-color:var(--white);}

/* ═══ Scroll-to-bottom button ══════════════════════════ */
.scroll-bottom-btn{position:absolute;bottom:calc(70px + env(safe-area-inset-bottom));right:18px;z-index:25;background:var(--black);border:1px solid var(--pink);color:var(--pink-light);border-radius:18px;padding:4px 12px;font-size:0.8em;letter-spacing:1px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(0,0,0,0.5);transition:.15s;}
.scroll-bottom-btn:hover{text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue);}
.scroll-bottom-btn #scroll-bottom-count{background:var(--pink);color:var(--white);font-size:0.7em;padding:0 5px;border-radius:8px;font-weight:bold;}
.scroll-bottom-btn:empty::before,.scroll-bottom-btn #scroll-bottom-count:empty{display:none;}

/* ═══ Reduced motion ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
    .messages{scroll-behavior:auto;}
    .dm-badge{animation:none;}
    .conn-dot.stale{animation:none;}
}