:root {
    --bg:#1B001C;--pink:#ff668a;--pink-light:#ffbfce;
    --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;}
.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)}
.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)}
#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-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}
.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(255,102,138,.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;}
.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)}
.checkbox-label{color:var(--side);font-size:0.75em;letter-spacing:1px;display:flex;align-items:center;gap:6px;}
.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;}
#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:1px;scroll-behavior:smooth;min-height:0;background:var(--black);}
.msg{padding:2px 0;line-height:1.4;word-wrap:break-word;word-break:break-word}
.msg-time{color:var(--side);font-size:0.7em;margin-right:5px}
.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}
.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}
.error-msg{color:var(--pink);background:rgba(255,102,138,.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(255,102,138,.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;}
.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;}
#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:4px}
#user-list li{color:var(--pink);font-size:0.85em;padding:3px 0;letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px;}
#user-list li .user-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#user-list li::before{content:'● ';font-size:0.7em}
#user-list li.you{color:var(--white)}
#user-list li.you::before{content:'◆ ';font-size:0.7em}
#user-list li.admin-user{color:var(--pink-light)}
#user-list li.admin-user::before{content:'★ ';font-size:0.7em}
.dm-icon{background:transparent;color:var(--pink);border:1px solid var(--pink);width:22px;height:22px;cursor:pointer;font-family:inherit;font-size:0.8em;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0;padding:0;}
.dm-icon:hover{text-shadow:0 0 2px var(--hover-blue);border-color:var(--hover-blue)}
.backdrop{position:absolute;inset:0;background:rgba(27,0,28,.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(27,0,28,.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:16px 14px;display:flex;flex-direction:column;gap:16px}
.setting-row{display:flex;flex-direction:column;gap:6px}
.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)}
.modal{position:absolute;inset:0;background:rgba(27,0,28,.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-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}
.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}
.modal-buttons .btn-small{width:auto;padding:6px 16px}