* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; background: linear-gradient(180deg, #f4f7fb 0%, #eaf1fb 100%); color: #1d2a3a; min-height: 100vh; }
a { color: #3056d3; text-decoration: none; }
a:hover { text-decoration: underline; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 310px; background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%); border-right: 1px solid rgba(48,86,211,0.12); padding: 22px; overflow-y: auto; box-shadow: 8px 0 30px rgba(49,84,144,0.08); }
.brand { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.brand-mark { width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(135deg, #5b7cff, #7e57ff); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: bold; box-shadow: 0 10px 30px rgba(91,124,255,0.28); }
.brand-title { font-size: 20px; font-weight: 700; letter-spacing: 0.08em; }
.brand-subtitle { font-size: 12px; color: #7084a3; letter-spacing: 0.18em; }
.panel, .card { background: rgba(255,255,255,.9); border: 1px solid rgba(92,122,181,.14); border-radius: 20px; box-shadow: 0 14px 36px rgba(49,84,144,.10); }
.panel { padding: 14px; margin-bottom: 16px; }
.panel-title { font-size: 13px; color: #7084a3; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; }
.room-list, .mode-list { display: grid; gap: 8px; }
.room-button, .mode-button, button { border: 0; border-radius: 14px; background: #edf2ff; color: #24344a; padding: 11px 13px; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.room-button:hover, .mode-button:hover, button:hover { background: #dde8ff; transform: translateY(-1px); box-shadow: 0 8px 16px rgba(73,103,175,.12); }
.room-button.active, .mode-button.active, .primary { background: linear-gradient(135deg, #5b7cff, #7e57ff); color: #fff; }
.admin-link { display: inline-block; margin-top: 10px; padding: 9px 12px; background: #edf2ff; border-radius: 12px; }
.main { margin-left: 310px; padding: 24px; }
.card { padding: 18px; }
.inner-card { padding: 16px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.header-wrap { flex-wrap: wrap; }
.header-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.badge { padding: 10px 12px; border-radius: 999px; background: #eef3ff; border: 1px solid rgba(92,122,181,.18); color: #50637f; font-size: 14px; }
h1, h2 { margin: 0; font-weight: 700; }
.muted, .upload-help, .small { color: #7084a3; }
.small { font-size: 13px; }
.status-bar, .status-area, .hint-box { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: #eef3ff; color: #2c4d92; border: 1px solid rgba(92,122,181,.14); }
.status-bar.error { background: #fff1f1; color: #bb2e2e; border-color: rgba(187,46,46,.15); }
.chat-box, .private-box, .upload-list { min-height: 180px; max-height: 460px; overflow: auto; background: #f9fbff; border-radius: 18px; padding: 14px; border: 1px solid rgba(92,122,181,.10); }
.message { margin-bottom: 12px; padding: 12px; border-radius: 16px; background: #ffffff; border: 1px solid rgba(92,122,181,.10); box-shadow: 0 8px 18px rgba(49,84,144,.06); }
.message.private { background: #f3f6ff; }
.message-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; color: #7084a3; }
.message-body { line-height: 1.5; word-break: break-word; }
.composer, .form-grid { display: grid; gap: 12px; margin-top: 14px; }
.compact-form { max-width: 520px; }
.private-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.profile-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.profile-row { margin-top: 12px; }
textarea, input[type="text"], input[type="password"], input[type="file"], select { width: 100%; border: 1px solid rgba(92,122,181,.18); background: #ffffff; color: #24344a; border-radius: 14px; padding: 12px 14px; font: inherit; }
textarea { min-height: 92px; resize: vertical; }
.composer-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.grid, .admin-grid { display: grid; gap: 18px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.online-box, .admin-list { display: grid; gap: 8px; }
.online-user, .admin-item, .upload-item { padding: 10px 12px; border-radius: 14px; background: #f7faff; border: 1px solid rgba(92,122,181,.10); }
.online-count { margin-bottom: 8px; color: #7084a3; font-size: 13px; }
.empty-state { color: #7084a3; padding: 16px 8px; }
.upload-item { margin-bottom: 10px; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.admin-action-row { align-items: center; }
.scroll-list { max-height: 360px; overflow: auto; }
.verified-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #e7f8eb; color: #1d7b42; font-size: 12px; }
.admin-page { background: linear-gradient(180deg, #f4f7fb 0%, #eaf1fb 100%); }
.admin-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
.admin-card.narrow { max-width: 480px; margin: 80px auto 0; }
.back-link { display: inline-block; margin-bottom: 16px; }
.hidden { display: none; }
code { padding: 2px 6px; border-radius: 8px; background: #eef3ff; }
.upload-comment { margin: 8px 0 10px; padding: 10px 12px; border-radius: 12px; background: #f3f7ff; border: 1px solid rgba(92,122,181,.12); line-height: 1.45; white-space: pre-wrap; }
@media (max-width: 960px) { .sidebar { position: static; width: 100%; border-right: 0; border-bottom: 1px solid rgba(92,122,181,.12); } .main { margin-left: 0; padding: 16px; } .private-toolbar, .inline-form { grid-template-columns: 1fr; } }