:root{
  --tg-bg:#e7f0fb;
  --tg-bg-soft:#f4f8ff;
  --tg-surface:#ffffff;
  --tg-surface-2:#eef4fd;
  --tg-surface-3:#e3eefc;
  --tg-border:#d6e3f4;
  --tg-text:#152033;
  --tg-muted:#5e6f89;
  --tg-primary:#2aabee;
  --tg-primary-strong:#229ed9;
  --tg-primary-weak:#d9f0ff;
  --tg-positive:#37b24d;
  --tg-danger:#d94848;
  --tg-shadow:0 14px 34px rgba(23, 51, 92, 0.14);
  --tg-radius:16px;
  --tg-radius-sm:12px;
  --tg-radius-pill:999px;
  --tg-chat-in:#ffffff;
  --tg-chat-out:#dff3ff;
  --tg-chat-system:#eaf3ff;
  --tg-success-bg:#eaf9ef;
  --tg-success-border:#b9e8c5;
  --tg-error-bg:#fff1f1;
  --tg-error-border:#ffc9c9;
}

html[data-theme='light']{
  --tg-bg:#ebf3ff;
  --tg-bg-soft:#f6f9ff;
  --tg-surface:#ffffff;
  --tg-surface-2:#eff4ff;
  --tg-surface-3:#e5eeff;
  --tg-border:#d6e3fb;
  --tg-text:#122039;
  --tg-muted:#5c6f92;
  --tg-primary:#2aabee;
  --tg-primary-strong:#229ed9;
  --tg-primary-weak:#d9f0ff;
  --tg-shadow:0 14px 34px rgba(20, 49, 90, 0.12);
  --tg-chat-in:#ffffff;
  --tg-chat-out:#def3ff;
  --tg-chat-system:#eaf3ff;
}

html[data-theme='medium']{
  --tg-bg:#e7f0fb;
  --tg-bg-soft:#f4f8ff;
  --tg-surface:#ffffff;
  --tg-surface-2:#eef4fd;
  --tg-surface-3:#e3eefc;
  --tg-border:#d6e3f4;
  --tg-text:#152033;
  --tg-muted:#5e6f89;
  --tg-primary:#2aabee;
  --tg-primary-strong:#229ed9;
  --tg-primary-weak:#d9f0ff;
  --tg-shadow:0 14px 34px rgba(23, 51, 92, 0.14);
  --tg-chat-in:#ffffff;
  --tg-chat-out:#dff3ff;
  --tg-chat-system:#eaf3ff;
}

html[data-theme='dark']{
  --tg-bg:#0e1624;
  --tg-bg-soft:#111c2d;
  --tg-surface:#17212b;
  --tg-surface-2:#1f2d3a;
  --tg-surface-3:#233445;
  --tg-border:#2d4255;
  --tg-text:#eaf2ff;
  --tg-muted:#9bb2c9;
  --tg-primary:#2ea6ff;
  --tg-primary-strong:#4ba7ff;
  --tg-primary-weak:#1f3a52;
  --tg-positive:#63cf7a;
  --tg-danger:#ff6b6b;
  --tg-shadow:0 16px 34px rgba(0, 0, 0, 0.45);
  --tg-chat-in:#1b2a39;
  --tg-chat-out:#23445f;
  --tg-chat-system:#223446;
  --tg-success-bg:#19382a;
  --tg-success-border:#2c6546;
  --tg-error-bg:#3a1f24;
  --tg-error-border:#6a2b36;
}

html,
body{
  background:var(--tg-bg) !important;
  color:var(--tg-text) !important;
}

body,
html.app-shell body{
  font-family:"SF Pro Text","Segoe UI","Inter",system-ui,sans-serif !important;
}

.gradient-bg,
html.app-shell,
html.app-shell body{
  background:
    radial-gradient(1100px 380px at 0% -10%, rgba(42, 171, 238, 0.16), transparent 52%),
    radial-gradient(900px 340px at 100% 0%, rgba(42, 171, 238, 0.11), transparent 48%),
    linear-gradient(180deg, var(--tg-bg-soft) 0%, var(--tg-bg) 100%) !important;
}

.top,
html.app-shell .top{
  position:sticky;
  top:0;
  z-index:45;
  background:color-mix(in srgb, var(--tg-surface) 86%, transparent) !important;
  border-bottom:1px solid var(--tg-border) !important;
  backdrop-filter:blur(14px);
  box-shadow:0 6px 18px rgba(30, 68, 120, 0.08);
}

.top h1,
html.app-shell .top h1{
  color:var(--tg-text) !important;
  font-weight:700;
  letter-spacing:0;
}

.top-menu-grid,
html.app-shell .top > div{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  gap:8px !important;
  width:100%;
}

.top-menu-grid > span,
html.app-shell .top > div > span{
  flex-basis:100%;
}

.top-menu-grid > .btn,
.top-menu-grid > .btn.small,
.top-menu-grid > a,
.top-menu-grid > form,
.top-menu-grid > form .btn,
html.app-shell .top > div > .btn,
html.app-shell .top > div > .btn.small,
html.app-shell .top > div > a,
html.app-shell .top > div > form,
html.app-shell .top > div > form .btn{
  width:auto;
  justify-content:flex-start;
}

.top-menu-grid > form,
html.app-shell .top > div > form{
  margin:0;
  width:auto;
}

.btn,
button.btn,
html.app-shell .btn,
html.app-shell button.btn{
  background:linear-gradient(160deg, var(--tg-primary) 0%, var(--tg-primary-strong) 100%) !important;
  color:#fff !important;
  border:none !important;
  border-radius:var(--tg-radius-sm) !important;
  box-shadow:0 8px 20px rgba(42, 171, 238, 0.28) !important;
  font-weight:650;
  letter-spacing:0;
}

.btn:hover,
button.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
}

.btn.small,
html.app-shell .btn.small{
  background:var(--tg-surface-2) !important;
  color:var(--tg-text) !important;
  border:1px solid var(--tg-border) !important;
  box-shadow:none !important;
  border-radius:var(--tg-radius-pill) !important;
}

.top-menu-grid .btn.small,
.top-menu-grid form .btn.small,
.top-menu-grid > a.btn.small,
.top-menu-grid > form .btn,
.top > div:not(.top-title-row) > a.btn.small,
.top > div:not(.top-title-row) > form .btn,
.top > a.btn.small,
.top > form .btn{
  background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%) !important;
  color:#fff !important;
  border:1px solid #0ea5e9 !important;
  box-shadow:0 10px 24px rgba(14,165,233,.28) !important;
  border-radius:999px !important;
}

.top-menu-grid .btn.small:hover,
.top-menu-grid form .btn.small:hover,
.top-menu-grid > a.btn.small:hover,
.top-menu-grid > form .btn:hover,
.top > div:not(.top-title-row) > a.btn.small:hover,
.top > div:not(.top-title-row) > form .btn:hover,
.top > a.btn.small:hover,
.top > form .btn:hover{
  background:linear-gradient(135deg,#22d3ee 0%,#0284c7 100%) !important;
  box-shadow:0 14px 30px rgba(2,132,199,.3) !important;
}

.btn.small:hover,
.btn.small:active,
html.app-shell .btn.small:hover,
html.app-shell .btn.small:active{
  background:var(--tg-surface-3) !important;
  border-color:var(--tg-primary) !important;
}

.btn.secondary,
.btn.state-off{
  background:var(--tg-surface-3) !important;
  color:var(--tg-text) !important;
  border:1px solid var(--tg-border) !important;
  box-shadow:none !important;
}

.btn.warning,
.btn.state-muted,
.btn.state-on,
.btn.audio-toggle{
  border:none !important;
  color:#fff !important;
}

.btn.warning,
.btn.state-muted{
  background:linear-gradient(160deg, #ff6b6b, #e03131) !important;
  box-shadow:0 8px 20px rgba(224, 49, 49, 0.24) !important;
}

.btn.state-on{
  background:linear-gradient(160deg, #40c057, #2f9e44) !important;
  box-shadow:0 8px 20px rgba(47, 158, 68, 0.24) !important;
}

.panel,
.card,
.stat,
.metric,
.login-box,
.call-box,
.box,
.quick-respond,
table,
html.app-shell .panel,
html.app-shell .card,
html.app-shell .stat,
html.app-shell .metric,
html.app-shell .login-box,
html.app-shell .call-box,
html.app-shell .box,
html.app-shell .quick-respond,
html.app-shell table{
  background:var(--tg-surface) !important;
  border:1px solid var(--tg-border) !important;
  border-radius:var(--tg-radius) !important;
  box-shadow:var(--tg-shadow) !important;
  color:var(--tg-text) !important;
}

.card::before,
html.app-shell .card::before{
  display:none !important;
}

.card.topic-meeting,
html.app-shell .card.topic-meeting{
  border-color:color-mix(in srgb, #2ea6ff 55%, var(--tg-border)) !important;
}

.card.topic-sport,
html.app-shell .card.topic-sport{
  border-color:color-mix(in srgb, #40c057 55%, var(--tg-border)) !important;
}

.card.topic-ad,
html.app-shell .card.topic-ad{
  border-color:color-mix(in srgb, #f59f00 55%, var(--tg-border)) !important;
}

.muted,
.mutedline,
.meta,
.status,
.chat-meta,
.chat-preview,
.chat-time,
.remote-audio-meta,
.volume-value,
html.app-shell .muted,
html.app-shell .mutedline,
html.app-shell .meta,
html.app-shell .status,
html.app-shell .chat-meta{
  color:var(--tg-muted) !important;
}

label,
.type,
.desc,
.chat-title,
.chat-author,
.remote-audio-title,
h1,
h2,
h3,
h4,
h5,
h6{
  color:var(--tg-text) !important;
}

input,
textarea,
select,
html.app-shell input,
html.app-shell textarea,
html.app-shell select,
input[type="text"],
input[type="number"],
input[type="date"]{
  background:var(--tg-surface-2) !important;
  color:var(--tg-text) !important;
  border:1px solid var(--tg-border) !important;
  border-radius:12px !important;
}

input::placeholder,
textarea::placeholder{
  color:color-mix(in srgb, var(--tg-muted) 80%, transparent) !important;
}

input:focus,
textarea:focus,
select:focus,
html.app-shell input:focus,
html.app-shell textarea:focus,
html.app-shell select:focus{
  border-color:var(--tg-primary) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tg-primary) 24%, transparent) !important;
  outline:none !important;
}

.notice,
html.app-shell .notice{
  background:var(--tg-success-bg) !important;
  border:1px solid var(--tg-success-border) !important;
  color:var(--tg-text) !important;
}

.error,
html.app-shell .error{
  background:var(--tg-error-bg) !important;
  border:1px solid var(--tg-error-border) !important;
  color:var(--tg-text) !important;
}

.layout,
.queue-layout,
.chat-layout,
.stats,
.metrics,
.row,
.field-row,
html.app-shell .layout,
html.app-shell .queue-layout,
html.app-shell .chat-layout,
html.app-shell .stats,
html.app-shell .metrics,
html.app-shell .row,
html.app-shell .field-row{
  gap:12px !important;
}

.chat-list,
.chat-log,
#chat-log,
#lobby-chat-log,
#friend-chat-log,
html.app-shell #chat-log,
html.app-shell .chat-log{
  background:var(--tg-bg-soft) !important;
  border:1px solid var(--tg-border) !important;
  border-radius:14px !important;
}

.chat-item,
.chat-log li,
#chat-log li,
#lobby-chat-log li,
#friend-chat-log li,
html.app-shell #chat-log li{
  border:1px solid var(--tg-border) !important;
  border-radius:12px !important;
  background:var(--tg-chat-in) !important;
}

.chat-item.active,
.chat-log li.self,
#chat-log li.self,
#lobby-chat-log li.self,
#friend-chat-log li.self{
  background:var(--tg-chat-out) !important;
  border-color:color-mix(in srgb, var(--tg-primary) 36%, var(--tg-border)) !important;
}

.chat-log li.system,
#chat-log li.system,
#lobby-chat-log li.system,
#friend-chat-log li.system{
  background:var(--tg-chat-system) !important;
}

.chat-window,
.input-card,
.voice-panel,
.chat-box,
.remote-audio-card,
.friend-chats-drawer,
.friend-chats-head,
.friend-chats-frame,
.gif-item-btn,
html.app-shell .chat-window,
html.app-shell .input-card,
html.app-shell .voice-panel{
  border:1px solid var(--tg-border) !important;
  border-radius:14px !important;
  background:var(--tg-surface-2) !important;
}

.friend-chats-backdrop{
  background:rgba(13, 25, 42, 0.5) !important;
}

.remote-audio-card.remote-connected{
  background:var(--tg-success-bg) !important;
  border-color:var(--tg-success-border) !important;
}

.remote-audio-card.remote-owner-muted{
  background:var(--tg-error-bg) !important;
  border-color:var(--tg-error-border) !important;
}

.participants{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.participants li{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--tg-border);
  background:var(--tg-surface-2);
  color:var(--tg-text);
}

.lobby-name{
  color:var(--tg-text) !important;
  font-weight:700;
}

html[data-theme='dark'] .lobby-name{
  color:var(--tg-primary) !important;
}

html[data-theme='dark'] .lobby-item strong{
  color:var(--tg-primary) !important;
}

.chat-gif img,
.gif-item-btn img{
  border:1px solid var(--tg-border) !important;
  border-radius:10px !important;
}

.volume-wrap input[type="range"]{
  accent-color:var(--tg-primary);
}

.embed-mode,
body.embed-mode{
  background:var(--tg-bg) !important;
}

@media (max-width: 1120px){
  .top-menu-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  html.app-shell .top > div{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .layout,
  .queue-layout,
  .chat-layout,
  .stats,
  .metrics,
  .field-row,
  .row,
  html.app-shell .layout,
  html.app-shell .queue-layout,
  html.app-shell .chat-layout,
  html.app-shell .field-row,
  html.app-shell .row{
    grid-template-columns:1fr !important;
  }

  .top,
  html.app-shell .top{
    padding:12px !important;
  }

  .top-menu-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  html.app-shell .top > div{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .top-menu-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  html.app-shell .top > div{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}