/* Pretendard 적용 */
  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: 'Pretendard', sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    padding-top: var(--site-header-offset, 0px);
  }

  :root {
    --bg-main: #0b0f14;
    --text-main: #e5e7eb;
    --text-muted: #94a3b8;
    --panel-bg: #111822;
    --panel-bg-soft: #16212e;
    --border-color: #2f3f56;
    --header-bg: rgba(13, 17, 23, 0.82);
    --bg-glow: radial-gradient(800px 380px at 50% 18%, rgba(56, 189, 248, 0.14), rgba(56, 189, 248, 0) 65%);
  }

  :root[data-theme="light"] {
    --bg-main: #f3f6fb;
    --text-main: #0f172a;
    --text-muted: #475569;
    --panel-bg: #ffffff;
    --panel-bg-soft: #eef3fb;
    --border-color: #cbd5e1;
    --header-bg: rgba(255, 255, 255, 0.88);
    --bg-glow: none;
  }

  :root[data-theme="light"] .site-header a,
  :root[data-theme="light"] .site-header button {
    color: #0f172a;
  }


  /* 네비게이션 바 */
  .nav-bar,
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--header-bg);
    color: var(--text-main);
    backdrop-filter: saturate(180%) blur(12px);
    border-color: var(--border-color);
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--bg-glow);
    pointer-events: none;
    z-index: -1;
  }



  .header-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .header-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-icon-btn--plain {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .header-main-icon {
    width: 31px;
    height: 31px;
  }

  .calc-dropdown[open] .header-icon-btn {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
  }
  .calc-dropdown[open] .header-icon-btn--plain {
    border-color: transparent;
    box-shadow: none;
  }
  .theme-toggle-btn {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
  }

  /* 기본 카드 스타일 */
  .card {
    background: #11151c;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    transition: all 0.15s ease;
  }
  .card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
  }

  /* 아이템 카드 */
  .item-card {
    background: linear-gradient(180deg, #11151c 0%, #0c0f14 100%);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: 0.15s ease;
  }
  .item-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }

  /* 검색창 스타일 */
  .search-input {
    background: rgba(17, 21, 28, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    transition: 0.15s;
  }
  .search-input:focus {
    border-color: #3b82f6;
    outline: none;
    background: rgba(17, 21, 28, 0.95);
  }

  /* 필터 버튼 */
  .filter-btn {
    padding: 8px 14px;
    background: rgba(22, 27, 34, 0.9);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
    transition: 0.15s;
  }
  .filter-btn:hover {
    border-color: rgba(255,255,255,0.18);
    background: rgba(22, 27, 34, 1);
  }

  /* 인기 아이템 */
  .popular-card {
    transition: 0.2s ease;
    border-radius: 12px;
    background: #11151c;
    border: 1px solid rgba(255,255,255,0.07);
    padding: 16px 8px;
  }
  .popular-card:hover {
    border-color: rgba(255,255,255,0.2);
    background: #161b22;
    transform: scale(1.05);
  }

  /* 글쓰기 영역 */
  .form-input {
    background: rgba(17, 21, 28, 0.9);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    transition: 0.15s;
  }
  .form-input:focus {
    border-color: #3b82f6;
    outline: none;
    background: rgba(17,21,28,0.95);
  }

  /* 버튼 기본 */
  .btn-primary {
    background: #3b82f6;
    padding: 12px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    transition: 0.15s;
  }
  .btn-primary:hover {
    background: #2563eb;
  }

  /* 섬세한 Divider */
  .divider {
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
.item-box {
  @apply bg-[#11151c] p-3 rounded-lg border border-gray-700 hover:border-gray-500 transition text-gray-300 flex flex-col items-center justify-center;
}
.item-box:hover {
  cursor: pointer;
}


.themed-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.themed-input {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.themed-muted {
  color: var(--text-muted);
}



@media (max-width: 768px) {
  .mobile-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .site-header .max-w-7xl {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-shell {
    gap: 8px;
  }

  .header-nav {
    align-items: center;
  }

  .header-actions {
    gap: 8px;
  }

  .header-icon-btn,
  .theme-toggle-btn {
    width: 32px;
    height: 32px;
  }

  .header-icon-btn--plain {
    width: 38px;
    height: 38px;
  }

  .header-main-icon {
    width: 30px;
    height: 30px;
  }

  .calc-dropdown {
    position: static;
  }

  .calc-dropdown-panel {
    position: fixed !important;
    top: 64px;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none;
  }

}

  .shout-bar {
    margin-top: 8px;
    border: 1px solid var(--border-color);
    background: rgba(15, 23, 42, 0.62);
    border-radius: 10px;
    overflow: hidden;
    height: 30px;
    display: flex;
    align-items: center;
  }

  .shout-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 24px;
    min-width: max-content;
    will-change: transform;
    animation: shout-marquee 28s linear infinite;
    padding-left: 100%;
  }

  .shout-item {
    color: var(--text-main);
    font-size: 13px;
    text-decoration: none;
    opacity: 0.92;
  }

  .shout-item b {
    margin-right: 6px;
    color: #93c5fd;
  }

  .shout-item--notice b {
    color: #f87171;
  }

  .shout-item--event {
    color: #5ff6dc;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(95, 246, 220, 0.25);
  }

  .shout-item--event b {
    color: #5ff6dc;
    font-weight: 700;
  }

  .shout-item--max-level {
    color: #f9a8d4;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(249, 168, 212, 0.35);
  }

  .shout-item--max-level b {
    color: #f472b6;
    font-weight: 700;
  }

  .shout-item:hover {
    opacity: 1;
    text-decoration: underline;
  }

  .shout-item--placeholder {
    color: var(--text-muted);
  }

  @keyframes shout-marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }

  .shout-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.62);
    display: grid;
    place-items: center;
    z-index: 80;
    padding: 12px;
  }

  .shout-modal.hidden {
    display: none;
  }

  .shout-modal-panel {
    width: min(460px, 100%);
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
  }

  .shout-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .shout-close-btn {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    background: transparent;
  }

  .shout-form {
    display: grid;
    gap: 10px;
  }

  .shout-label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
  }

  .shout-input {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--panel-bg-soft);
    color: var(--text-main);
    padding: 8px 10px;
  }

  .shout-counter {
    text-align: right;
    color: var(--text-muted);
    font-size: 12px;
  }

  .shout-error {
    min-height: 16px;
    color: #fda4af;
    font-size: 12px;
    margin: 0;
  }

  .shout-submit-btn {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
    border-radius: 10px;
    padding: 9px 10px;
    font-weight: 700;
  }

  @media (max-width: 640px) {
    .shout-bar {
      height: 28px;
      border-radius: 8px;
      margin-top: 6px;
    }

    .shout-item {
      font-size: 12px;
    }
  }


  /* Light mode coverage for legacy pages that still use hard-coded Tailwind dark utilities. */
  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  :root[data-theme="light"] body {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
  }

  :root[data-theme="light"] .bg-\[\#0b0f14\],
  :root[data-theme="light"] .bg-\[\#020617\],
  :root[data-theme="light"] .bg-\[\#030712\],
  :root[data-theme="light"] .bg-\[\#07111f\],
  :root[data-theme="light"] .bg-\[\#08111f\],
  :root[data-theme="light"] .bg-\[\#0f172a\],
  :root[data-theme="light"] .bg-slate-950,
  :root[data-theme="light"] .bg-slate-900,
  :root[data-theme="light"] .bg-gray-950,
  :root[data-theme="light"] .bg-gray-900 {
    background-color: var(--bg-main) !important;
  }

  :root[data-theme="light"] .bg-\[\#111827\],
  :root[data-theme="light"] .bg-\[\#11151c\],
  :root[data-theme="light"] .bg-\[\#111822\],
  :root[data-theme="light"] .bg-\[\#132133\],
  :root[data-theme="light"] .bg-\[\#16212e\],
  :root[data-theme="light"] .bg-\[\#18263d\],
  :root[data-theme="light"] .bg-\[\#1d2840\],
  :root[data-theme="light"] .bg-slate-800,
  :root[data-theme="light"] .bg-gray-800,
  :root[data-theme="light"] .card,
  :root[data-theme="light"] .item-card,
  :root[data-theme="light"] .popular-card,
  :root[data-theme="light"] .panel,
  :root[data-theme="light"] .rank-card,
  :root[data-theme="light"] .rank-table-wrap,
  :root[data-theme="light"] .panel-box {
    background: var(--panel-bg) !important;
    background-color: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  }

  :root[data-theme="light"] .bg-slate-700,
  :root[data-theme="light"] .bg-gray-700,
  :root[data-theme="light"] .bg-slate-800\/50,
  :root[data-theme="light"] .bg-slate-900\/50,
  :root[data-theme="light"] .bg-slate-900\/60,
  :root[data-theme="light"] .bg-slate-900\/70,
  :root[data-theme="light"] .bg-slate-900\/80,
  :root[data-theme="light"] .bg-slate-900\/90,
  :root[data-theme="light"] .bg-gray-900\/70,
  :root[data-theme="light"] .bg-gray-900\/80,
  :root[data-theme="light"] .bg-black\/20,
  :root[data-theme="light"] .bg-black\/30,
  :root[data-theme="light"] .bg-black\/40,
  :root[data-theme="light"] .bg-black\/50,
  :root[data-theme="light"] .bg-black\/60 {
    background-color: var(--panel-bg-soft) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
  }

  :root[data-theme="light"] .text-white,
  :root[data-theme="light"] .text-gray-100,
  :root[data-theme="light"] .text-gray-200,
  :root[data-theme="light"] .text-gray-300,
  :root[data-theme="light"] .text-slate-50,
  :root[data-theme="light"] .text-slate-100,
  :root[data-theme="light"] .text-slate-200,
  :root[data-theme="light"] .text-slate-300,
  :root[data-theme="light"] .text-blue-100,
  :root[data-theme="light"] .text-cyan-100 {
    color: var(--text-main) !important;
  }

  :root[data-theme="light"] .text-gray-400,
  :root[data-theme="light"] .text-gray-500,
  :root[data-theme="light"] .text-slate-400,
  :root[data-theme="light"] .text-slate-500,
  :root[data-theme="light"] .themed-muted {
    color: var(--text-muted) !important;
  }

  :root[data-theme="light"] .border-gray-700,
  :root[data-theme="light"] .border-gray-800,
  :root[data-theme="light"] .border-slate-600,
  :root[data-theme="light"] .border-slate-700,
  :root[data-theme="light"] .border-slate-800,
  :root[data-theme="light"] .border-white\/5,
  :root[data-theme="light"] .border-white\/10,
  :root[data-theme="light"] .border-white\/20 {
    border-color: var(--border-color) !important;
  }

  :root[data-theme="light"] input,
  :root[data-theme="light"] select,
  :root[data-theme="light"] textarea,
  :root[data-theme="light"] .search-input,
  :root[data-theme="light"] .form-input,
  :root[data-theme="light"] .themed-input {
    background: #ffffff !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
  }

  :root[data-theme="light"] input::placeholder,
  :root[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
  }

  :root[data-theme="light"] .hover\:bg-slate-700:hover,
  :root[data-theme="light"] .hover\:bg-gray-700:hover,
  :root[data-theme="light"] .hover\:bg-slate-800:hover,
  :root[data-theme="light"] .hover\:bg-gray-800:hover {
    background-color: #e2e8f0 !important;
  }


  /* Extra coverage for calculator/main cards and page-local dark components. */
  :root[data-theme="light"] .bg-neutral-950,
  :root[data-theme="light"] .bg-neutral-900,
  :root[data-theme="light"] .bg-neutral-800,
  :root[data-theme="light"] .bg-zinc-950,
  :root[data-theme="light"] .bg-zinc-900,
  :root[data-theme="light"] .bg-zinc-800,
  :root[data-theme="light"] [class*="bg-neutral-950"],
  :root[data-theme="light"] [class*="bg-neutral-900"],
  :root[data-theme="light"] [class*="bg-zinc-950"],
  :root[data-theme="light"] [class*="bg-zinc-900"],
  :root[data-theme="light"] [class*="bg-[#0"],
  :root[data-theme="light"] [class*="bg-[#1"],
  :root[data-theme="light"] [class*="from-slate-900"],
  :root[data-theme="light"] [class*="via-slate-900"],
  :root[data-theme="light"] [class*="to-slate-800"] {
    background: var(--panel-bg) !important;
    background-color: var(--panel-bg) !important;
    background-image: none !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
  }

  :root[data-theme="light"] .bg-neutral-700,
  :root[data-theme="light"] .bg-zinc-700,
  :root[data-theme="light"] [class*="bg-neutral-800"],
  :root[data-theme="light"] [class*="bg-zinc-800"],
  :root[data-theme="light"] [class*="bg-black/"],
  :root[data-theme="light"] [class*="bg-slate-8"],
  :root[data-theme="light"] [class*="bg-slate-7"],
  :root[data-theme="light"] [class*="bg-gray-8"],
  :root[data-theme="light"] [class*="bg-gray-7"] {
    background: var(--panel-bg-soft) !important;
    background-color: var(--panel-bg-soft) !important;
    background-image: none !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
  }

  :root[data-theme="light"] .text-neutral-100,
  :root[data-theme="light"] .text-neutral-200,
  :root[data-theme="light"] .text-neutral-300,
  :root[data-theme="light"] [class*="text-slate-100"],
  :root[data-theme="light"] [class*="text-slate-200"],
  :root[data-theme="light"] [class*="text-slate-300"],
  :root[data-theme="light"] [class*="text-gray-100"],
  :root[data-theme="light"] [class*="text-gray-200"],
  :root[data-theme="light"] [class*="text-gray-300"],
  :root[data-theme="light"] [class*="text-neutral-100"],
  :root[data-theme="light"] [class*="text-neutral-200"],
  :root[data-theme="light"] [class*="text-neutral-300"] {
    color: var(--text-main) !important;
  }

  :root[data-theme="light"] .text-neutral-400,
  :root[data-theme="light"] .text-neutral-500,
  :root[data-theme="light"] [class*="text-slate-400"],
  :root[data-theme="light"] [class*="text-slate-500"],
  :root[data-theme="light"] [class*="text-gray-400"],
  :root[data-theme="light"] [class*="text-gray-500"],
  :root[data-theme="light"] [class*="text-neutral-400"],
  :root[data-theme="light"] [class*="text-neutral-500"] {
    color: var(--text-muted) !important;
  }

  :root[data-theme="light"] .border-neutral-700,
  :root[data-theme="light"] .border-neutral-800,
  :root[data-theme="light"] [class*="border-neutral-"],
  :root[data-theme="light"] [class*="border-gray-"],
  :root[data-theme="light"] [class*="border-slate-"],
  :root[data-theme="light"] [class*="border-white/"] {
    border-color: var(--border-color) !important;
  }

  :root[data-theme="light"] .stat-card,
  :root[data-theme="light"] .quick-link-card,
  :root[data-theme="light"] .quick-link-card.best-silver,
  :root[data-theme="light"] .coupon-slider,
  :root[data-theme="light"] .coupon-track,
  :root[data-theme="light"] .coupon-percent {
    background: var(--panel-bg) !important;
    background-color: var(--panel-bg) !important;
    background-image: none !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  }

  :root[data-theme="light"] .stat-title,
  :root[data-theme="light"] .quick-link-type,
  :root[data-theme="light"] .quick-link-desc {
    color: var(--text-muted) !important;
  }

  :root[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none !important;
  }


/* 실시간 채팅 패널 */
.chat-launcher {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(103, 232, 249, 0.38);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.96), rgba(37, 99, 235, 0.94));
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 22px rgba(56, 189, 248, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.chat-launcher:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 28px rgba(56, 189, 248, 0.36);
}

.chat-launcher img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.chat-panel {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 78px));
  z-index: 46;
  display: none;
  width: min(380px, calc(100vw - 28px));
  max-height: min(82vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(103, 232, 249, 0.28);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel-bg, #111827) 94%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(56, 189, 248, 0.12);
  backdrop-filter: blur(10px);
  color: var(--text-main, #e5e7eb);
}

.chat-panel.is-open {
  display: flex;
  flex-direction: column;
}

.chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.18), rgba(15, 23, 42, 0.1));
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.chat-panel-head strong { display: block; font-size: 0.95rem; }
.chat-panel-head span { display: block; font-size: 0.72rem; color: #94a3b8; }
.chat-panel-head span[data-tone="ok"] { color: #67e8f9; }
.chat-panel-head span[data-tone="warn"] { color: #fbbf24; }
.chat-panel-head button {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.7);
}

.chat-panel-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.chat-messages {
  height: clamp(420px, 58vh, 560px);
  min-height: 0;
  overflow-y: auto;
  padding: 6px 10px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
}

.chat-message {
  padding: 6px 2px;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  overflow-wrap: anywhere;
}

.chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 1px;
  color: #cbd5e1;
  font-size: 0.76rem;
}
.chat-message-meta strong { color: #67e8f9; font-weight: 800; }
.chat-message-meta time { color: #64748b; white-space: nowrap; }
.chat-message-body { font-size: 0.84rem; line-height: 1.35; }
.chat-system { color: #94a3b8; font-size: 0.82rem; text-align: center; padding: 24px 8px; }
.chat-system--error { color: #fca5a5; }

.chat-form {
  padding: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.24);
}
.chat-nickname,
.chat-input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.86);
  color: var(--text-main, #e5e7eb);
  outline: none;
}
.chat-nickname { height: 34px; padding: 0 10px; margin-bottom: 7px; font-size: 0.82rem; }
.chat-input-row { display: flex; gap: 7px; }
.chat-input { height: 38px; padding: 0 10px; font-size: 0.88rem; }
.chat-input-row button {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0891b2, #2563eb);
  color: white;
  font-weight: 800;
  font-size: 0.84rem;
}
.chat-form-foot {
  min-height: 18px;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #94a3b8;
  font-size: 0.72rem;
}
#chatError { color: #fca5a5; }

@media (max-width: 640px) {
  .chat-launcher {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    padding: 0;
  }

  .chat-panel {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 70px));
    width: calc(100vw - 16px);
    max-height: min(72vh, 520px);
  }
  .chat-messages { height: min(42vh, 260px); padding: 8px 10px; }
}

.chat-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.22);
}
.chat-room-tab {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  padding: 6px 4px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
}
.chat-room-tab.is-active { border-color: rgba(103, 232, 249, 0.65); color: #67e8f9; background: rgba(8, 145, 178, 0.22); }
.chat-room-tab b { color: #fef3c7; }
.chat-notice { padding: 0 10px; background: rgba(250, 204, 21, 0.08); color: #fde68a; font-size: 0.76rem; }
.chat-notice div { padding: 7px 0; border-bottom: 1px solid rgba(250, 204, 21, 0.14); }
.chat-templates { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
.chat-templates:empty { display: none; }
.chat-templates button, .chat-message-actions button {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.75);
  color: #cbd5e1;
  font-size: 0.72rem;
}
.chat-message { display: flex; gap: 7px; }
.chat-message--admin { padding: 7px 8px; border: 1px solid rgba(250, 204, 21, 0.35); border-radius: 10px; background: linear-gradient(135deg, rgba(120, 53, 15, 0.42), rgba(15, 23, 42, 0.78)); }
.chat-avatar { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.32); object-fit: cover; background: rgba(15, 23, 42, 0.9); }
.chat-message-content { min-width: 0; flex: 1 1 auto; }
.chat-message-actions { display: flex; gap: 5px; margin-top: 3px; opacity: 0.72; }
.chat-message:hover .chat-message-actions { opacity: 1; }
.chat-user-label { margin-bottom: 7px; color: #94a3b8; font-size: 0.76rem; }
.chat-guest-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
}
.chat-guest-controls[hidden] { display: none; }
.chat-guest-controls label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: #cbd5e1;
  font-weight: 700;
}
.chat-guest-controls input {
  min-width: 0;
  flex: 1 1 auto;
  height: 33px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  padding: 0 8px;
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.86);
  font-size: 0.78rem;
}
.chat-guest-controls input:focus { outline: 1px solid rgba(103, 232, 249, .65); }
.chat-guest-controls button {
  flex: 0 0 auto;
  border: 1px solid rgba(103, 232, 249, .4);
  background: rgba(8, 145, 178, .19);
  color: #a5f3fc;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.73rem;
  font-weight: 800;
}
@media (max-width: 380px) {
  .chat-guest-controls { flex-wrap: wrap; }
  .chat-guest-controls label { width: 100%; }
}

.chat-message--admin .chat-message-meta strong { color: #fde68a; }