:root {
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-alt: #e8f3f3;
  --text: #122026;
  --secondary-brand: var(--brand-secondary, #111827);
  --muted: #5f6f77;
  --primary: var(--brand-primary, #0ea5a4);
  --primary-dark: color-mix(in srgb, var(--brand-primary, #0ea5a4) 78%, #001418);
  --border: #d7e2e4;
  --success: #127a4a;
  --error: #b42318;
  --shadow: 0 24px 60px rgba(10, 30, 45, 0.12);
  --radius: 24px;
}

html[data-theme="dark"] {
  --bg: #0f1720;
  --surface: #17212b;
  --surface-alt: #1d2a35;
  --text: #e7eef2;
  --muted: #a7b4bd;
  --primary: #28c7c4;
  --primary-dark: #1aa8a5;
  --border: #233543;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: radial-gradient(circle at top left, rgba(14,165,164,.18), transparent 35%), var(--bg);
  color: var(--text);
}

a { color: var(--primary-dark); text-decoration: none; }
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
}
.brand-panel, .form-panel {
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-panel {
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.brand-panel h1 { font-size: clamp(42px, 7vw, 82px); margin: 0; }
.brand-panel p { max-width: 560px; font-size: 18px; color: var(--muted); }
.logo-mark { display: inline-flex; gap: 8px; }
.logo-mark span {
  width: 14px; height: 14px; border-radius: 999px; background: var(--primary);
  animation: pulse 1.1s infinite ease-in-out;
}
.logo-mark span:nth-child(2){ animation-delay:.15s; }
.logo-mark span:nth-child(3){ animation-delay:.3s; }
.splash-preview {
  position: relative; width: min(100%, 520px); min-height: 260px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px;
}
.avatar {
  width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #7dd3fc); position: absolute;
}
.avatar.left { left: 24px; bottom: 26px; }
.avatar.right { right: 24px; top: 26px; }
.bubble {
  max-width: 68%; padding: 14px 16px; border-radius: 18px; position: absolute; font-weight: 600;
  animation: floaty 2.4s infinite ease-in-out;
}
.bubble-left { left: 110px; bottom: 44px; background: var(--surface-alt); }
.bubble-right { right: 106px; top: 58px; background: var(--primary); color: white; animation-delay: .35s; }
.card {
  width: min(100%, 460px); background: var(--surface); border: 1px solid var(--border); border-radius: 28px;
  box-shadow: var(--shadow); padding: 28px;
}
.card-head, .inline-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.card h2 { margin: 12px 0 8px; font-size: 34px; }
.muted { color: var(--muted); margin: 0 0 20px; }
.tag {
  display: inline-flex; padding: 8px 12px; border-radius: 999px; background: var(--surface-alt);
  color: var(--primary-dark); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.theme-toggle {
  border: 1px solid var(--border); background: transparent; color: var(--text); width: 42px; height: 42px; border-radius: 999px;
}
.auth-form { display: grid; gap: 16px; }
.auth-form label span { display: inline-block; margin-bottom: 8px; font-weight: 600; }
.auth-form input {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-size: 16px;
}
.checkbox { display: inline-flex; align-items: center; gap: 8px; }
.checkbox input { width: auto; }
.btn-primary {
  padding: 15px 18px; border: 0; border-radius: 16px; background: var(--primary); color: white; font-weight: 700; font-size: 16px;
}
.alert { padding: 13px 14px; border-radius: 14px; margin-bottom: 16px; font-size: 14px; }
.alert.success { background: rgba(18, 122, 74, 0.12); color: var(--success); }
.alert.error { background: rgba(180, 35, 24, 0.12); color: var(--error); }
.single-screen { grid-template-columns: 1fr; }
.only { width: 100%; }
@keyframes pulse { 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(-8px);opacity:1} }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (max-width: 920px) {
  .auth-shell { grid-template-columns: 1fr; }
  .brand-panel { padding-bottom: 0; text-align: center; }
  .brand-panel p { font-size: 16px; }
}
@media (max-width: 560px) {
  .brand-panel, .form-panel { padding: 20px; }
  .card { padding: 22px; border-radius: 24px; }
  .bubble { position: static; display: inline-block; margin: 8px 0; max-width: 100%; }
  .splash-preview { display: grid; gap: 10px; }
  .avatar { position: static; }
}

.auth-footer { margin-top: 14px; color: var(--muted); }
.dashboard-shell { min-height: 100vh; display: grid; grid-template-columns: 300px 1fr; }
.sidebar { padding: 28px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.sidebar h2 { margin: 14px 0 10px; }
.nav-links { display: grid; gap: 10px; }
.nav-links a { padding: 12px 14px; border-radius: 14px; background: var(--surface-alt); color: var(--text); font-weight: 600; }
.dashboard-main { padding: 28px; display: grid; gap: 22px; }
.hero-card, .mini-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); }
.hero-card { padding: 26px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini-card { padding: 20px; display: grid; gap: 8px; }
@media (max-width: 920px) {
  .dashboard-shell { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
}

.settings-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.settings-form { display: grid; gap: 22px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.settings-form select,
.settings-form input[type="text"],
.settings-form input[type="number"],
.settings-form input[type="color"] {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 16px;
}
.feature-toggles { display: grid; gap: 12px; }
.brand-preview-card { display: grid; gap: 18px; align-content: start; }
.brand-preview {
  border-radius: 24px; padding: 22px; min-height: 260px; background: linear-gradient(145deg, color-mix(in srgb, var(--preview-primary) 14%, white), color-mix(in srgb, var(--preview-secondary) 18%, white));
  display: grid; gap: 14px;
}
.preview-header { display: grid; gap: 4px; }
.preview-header strong { font-size: 22px; }
.preview-chat { max-width: 85%; padding: 12px 14px; border-radius: 16px; font-weight: 600; }
.preview-left { background: white; color: #122026; }
.preview-right { background: var(--preview-primary); color: white; margin-left: auto; }
.splash-page {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at top, color-mix(in srgb, var(--primary) 22%, transparent), transparent 35%), var(--bg);
}
.splash-card {
  width: min(100%, 760px); background: var(--surface); border: 1px solid var(--border); border-radius: 34px; box-shadow: var(--shadow);
  padding: 34px; text-align: center; display: grid; gap: 18px;
}
.logo-mark.large { justify-content: center; }
.logo-mark.large span { width: 18px; height: 18px; }
.splash-scene {
  display: grid; grid-template-columns: 120px 1fr 120px; gap: 16px; align-items: end;
  background: var(--surface-alt); border-radius: 28px; padding: 22px; min-height: 280px;
}
.character { display: grid; justify-items: center; gap: 8px; }
.character .head { width: 54px; height: 54px; border-radius: 999px; background: linear-gradient(145deg, var(--primary), #8fd3ff); }
.character .body { width: 78px; height: 110px; border-radius: 28px; background: var(--secondary-brand); opacity: .92; }
.message-track { display: grid; gap: 12px; align-content: center; }
.message-balloon {
  display: inline-flex; width: fit-content; padding: 12px 14px; border-radius: 16px; font-weight: 700;
  animation: floaty 2.5s infinite ease-in-out;
}
.message-balloon.left { background: white; color: #122026; }
.message-balloon.right { background: var(--primary); color: white; justify-self: end; animation-delay: .25s; }
.message-balloon.second { animation-delay: .45s; }
.loading-dots { display: inline-flex; justify-content: center; gap: 10px; }
.loading-dots span {
  width: 12px; height: 12px; border-radius: 999px; background: var(--primary); animation: pulse 1.15s infinite ease-in-out;
}
.loading-dots span:nth-child(2){ animation-delay: .15s; }
.loading-dots span:nth-child(3){ animation-delay: .3s; }
.splash-enter { width: fit-content; justify-self: center; }
@media (max-width: 920px) {
  .settings-layout, .settings-grid { grid-template-columns: 1fr; }
  .splash-scene { grid-template-columns: 1fr; justify-items: center; }
  .message-track { width: 100%; }
}

.chat-layout { min-height: 100vh; display: grid; grid-template-columns: 320px 1fr; background: var(--bg); }
.chat-sidebar { border-right: 1px solid var(--border); background: var(--surface); padding: 20px; display: grid; gap: 18px; }
.chat-sidebar-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.outline-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); color: var(--text); background: transparent; }
.conversation-list { display: grid; gap: 10px; align-content: start; }
.conversation-item { display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: var(--surface-alt); color: var(--text); }
.conversation-item.active { border: 1px solid var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent); }
.conversation-item span { color: var(--muted); font-size: 14px; }
.chat-main { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: 20px; min-height: 100vh; }
.chat-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.messages-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 20px; display: grid; gap: 12px; overflow: auto; min-height: 420px; max-height: calc(100vh - 250px); }
.message-bubble { max-width: 78%; background: var(--surface-alt); border-radius: 18px; padding: 12px 14px; display: grid; gap: 8px; }
.message-bubble.mine { margin-left: auto; background: color-mix(in srgb, var(--primary) 16%, white); }
.message-bubble img, .message-bubble video, .message-bubble audio { width: 100%; border-radius: 14px; }
.message-bubble p { margin: 0; }
.chat-composer { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 16px; }
.chat-composer textarea { width: 100%; resize: vertical; min-height: 76px; border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: transparent; color: var(--text); }
.composer-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.upload-btn { cursor: pointer; }
@media (max-width: 920px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-topbar { flex-direction: column; align-items: flex-start; }
}

.mini-form { display: grid; gap: 12px; }
.mini-form input, .mini-form select { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: transparent; color: var(--text); }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.invite-panel { display: grid; grid-template-columns: 1fr 180px; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 16px; }
.invite-panel input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: transparent; color: var(--text); margin-top: 8px; }
.qrcode-box { display: grid; place-items: center; min-height: 160px; background: white; border-radius: 18px; padding: 10px; }
.composer-tools { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 920px) { .invite-panel { grid-template-columns: 1fr; } }

.settings-form { display: grid; gap: 18px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-grid label, .checkbox-grid label { display: grid; gap: 8px; color: var(--text); }
.settings-grid input, .settings-grid select { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--text); }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.server-note { border: 1px dashed var(--border); border-radius: 18px; padding: 14px; background: var(--surface-alt); }
.group-admin-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; }
.participant-list { display: grid; gap: 12px; }
.participant-item { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; }
.participant-item span { color: var(--muted); font-size: 14px; }
.participant-actions, .participant-actions form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.participant-actions select { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text); }
.danger-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, #dc2626 40%, var(--border)); color: #b91c1c; background: transparent; }
@media (max-width: 920px) { .settings-grid, .checkbox-grid, .group-admin-grid { grid-template-columns: 1fr; } }

.audit-list { display: grid; gap: 10px; }
.audit-item { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; }
.audit-item span { color: var(--muted); font-size: 14px; }

.inline-admin-form { margin-top: 6px; }

.search-card, .pinned-card { display: grid; gap: 12px; }
.search-inline { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.search-inline input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--text); }
.search-results, .pinned-list { display: grid; gap: 10px; }
.search-item, .pinned-item { padding: 12px; border: 1px solid var(--border); border-radius: 14px; display: grid; gap: 4px; }
.reply-preview { margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-radius: 10px; font-size: 14px; }
.reply-box { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-alt); border: 1px solid var(--border); }
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.reply-btn { margin-top: 6px; }
.message-status { color: var(--muted); font-size: 12px; margin-left: 6px; }
@media (max-width: 920px) { .search-inline { grid-template-columns: 1fr; } }

.empty-state-card { text-align: left; border: 1px dashed var(--border); }