:root {
  --ucim-v1-surface: rgba(17, 20, 38, 0.72);
  --ucim-v1-surface-strong: rgba(24, 28, 50, 0.92);
  --ucim-v1-surface-soft: rgba(255,255,255,0.06);
  --ucim-v1-border: rgba(255,255,255,0.10);
  --ucim-v1-text: #f4f6ff;
  --ucim-v1-muted: #c7cce3;
  --ucim-v1-dim: #97a1c5;
  --ucim-v1-shadow: 0 20px 50px rgba(0,0,0,.26);
  --ucim-v1-radius-xl: 28px;
  --ucim-v1-radius-lg: 22px;
  --ucim-v1-radius-md: 16px;
}
html[data-tm="light"] {
  --ucim-v1-surface: rgba(255,255,255,.82);
  --ucim-v1-surface-strong: rgba(255,255,255,.94);
  --ucim-v1-surface-soft: rgba(107,123,255,.08);
  --ucim-v1-border: rgba(90,102,168,.12);
  --ucim-v1-text: #1d2140;
  --ucim-v1-muted: #4f587d;
  --ucim-v1-dim: #7f88af;
  --ucim-v1-shadow: 0 20px 48px rgba(58,78,148,.12);
}

body { color: var(--ucim-v1-text); }
.brand-sub--versions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.version-chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:11px; line-height:1; border:1px solid var(--ucim-v1-border); background:var(--ucim-v1-surface-soft); color:var(--ucim-v1-muted);
}
.version-chip--desk { box-shadow: 0 0 0 1px rgba(145,169,255,.08) inset; }
.version-chip--mobile { box-shadow: 0 0 0 1px rgba(255,150,216,.08) inset; }
.topbar-search {
  flex:1; max-width: 520px; display:flex; align-items:center; gap:10px; min-width: 180px;
  padding: 12px 16px; border-radius: 18px; background: var(--ucim-v1-surface-soft); border:1px solid var(--ucim-v1-border);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.topbar-search__icon { color: var(--ucim-v1-dim); font-size: 15px; }
.topbar-search input {
  all: unset; flex:1; font-size:14px; color:var(--ucim-v1-text);
}
.topbar-search input::placeholder { color: var(--ucim-v1-dim); }
.auth-link--forgot { color:#7aa6ff; margin-top:8px; }
.auth-link--forgot:hover { color:#9bbcff; }
.ui-busy-hint {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom,0px) + 22px); transform: translateX(-50%);
  z-index: 860; display:flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 16px;
  background: var(--ucim-v1-surface-strong); border:1px solid var(--ucim-v1-border); box-shadow: var(--ucim-v1-shadow);
  color: var(--ucim-v1-text); max-width:min(90vw,420px); font-size:13px;
}
.ui-busy-hint.hidden { display:none !important; }
.ui-busy-hint::before {
  content:""; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.18); border-top-color:#8db7ff;
  animation: ucim-spin .9s linear infinite;
}
@keyframes ucim-spin { to { transform: rotate(360deg);} }

.discover-tags--i18n, .archive-search-wrap .discover-tags--i18n {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ucim-v1-border);
}
.i18n-tag-title {
  width:100%; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ucim-v1-dim); margin: 6px 0 8px;
}
.discover-tag[data-i18n-tag="true"] { background: rgba(145,169,255,.08); }
.archive-search-wrap {
  display:grid; gap:12px; margin: 0 0 18px;
}
.archive-search-wrap .discover-search,
.discover-search-wrap .discover-search {
  background: var(--ucim-v1-surface-soft); border:1px solid var(--ucim-v1-border); backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
.chat-contact-card, .archive-card, .stat-card, .benefit-card, .section {
  backdrop-filter: blur(18px) saturate(1.12); -webkit-backdrop-filter: blur(18px) saturate(1.12);
}
.chat-contact-card .chat-contact__name,
.archive-card__title,
.archive-card__name,
.stat-value,
.benefit-name,
.section-title,
.profile-name,
.chat-topbar__name,
.chat-msg__bubble,
.chat-msg__bubble * { color: var(--ucim-v1-text) !important; }
.chat-contact-card .chat-contact__last,
.chat-contact-card .chat-contact__time,
.archive-card__sub,
.benefit-meta,
.muted,
.profile-sub,
.profile-uid,
.stat-sub,
.chat-topbar__sub,
.chat-msg__time,
.chat-msg__meta,
.chat-msg__col .muted { color: var(--ucim-v1-muted) !important; }
[data-tm="dark"] .chat-msg--self .chat-msg__bubble,
html[data-tm="dark"] .chat-msg--self .chat-msg__bubble,
body[data-theme="dark"] .chat-msg--self .chat-msg__bubble {
  color: #ffffff !important; background: linear-gradient(135deg, rgba(145,169,255,.34), rgba(255,150,216,.22)) !important; border-color: rgba(255,255,255,.16) !important;
}
[data-tm="dark"] .chat-msg--self .chat-msg__bubble * { color:#ffffff !important; }
[data-tm="dark"] .benefit-card, [data-tm="dark"] .stat-card { background: linear-gradient(180deg, rgba(20,24,45,.88), rgba(16,19,36,.82)) !important; }
html[data-tm="dark"] .mini-badge, html[data-tm="dark"] .inline-badge { color:#eef3ff !important; }
.chat-lang-badge {
  display:inline-flex; align-items:center; justify-content:center; min-width:58px; padding:4px 8px; border-radius:999px; font-size:11px;
  background: rgba(145,169,255,.14); border:1px solid rgba(145,169,255,.22); color: var(--ucim-v1-text);
}
.chat-contact__actions {
  display:flex; align-items:center; gap:8px; margin-top:8px;
}
.chat-contact__delete {
  margin-left:auto; border:none; background:transparent; color: var(--ucim-v1-dim); cursor:pointer; padding:6px; border-radius: 10px;
}
.chat-contact__delete:hover { color: var(--ucim-v1-text); background: rgba(255,255,255,.08); }
.chat-contact__last-row { display:flex; align-items:center; gap:10px; min-width:0; }
.chat-contact__last-row .chat-contact__last { flex:1; min-width:0; }
.archive-card__btn--chat::before, .chat-launch-label::before { content:''; }
.forgot-reset-sheet .auth-field { margin-bottom: 14px; }
.forgot-reset-sheet .auth-code-row { display:flex; gap:10px; }
.forgot-reset-sheet .auth-code-row input { flex:1; }
.archive-extra-meta, .conversation-card-i18n {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
}
.archive-chip, .conversation-chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; background: rgba(255,255,255,.06); border:1px solid var(--ucim-v1-border); color:var(--ucim-v1-muted);
}
.archive-tag-search-panel {
  display:grid; gap:10px; margin-top: 12px;
}
.archive-card__actions { gap: 8px; }
.archive-card__btn { min-width: 74px; }
.desktop-context-nav {
  display:none;
}
.desktop-hero-shell { display:none; }
.home-log-card .card-title { display:flex; align-items:center; gap:8px; }
.home-log-card .card-sub { line-height:1.6; }
.notice-cta-grid { display:grid; gap:12px; }
.placeholder-card .card-actions { margin-top: 12px; }
.tag-picker-group {
  display:grid; gap:10px; padding:14px 14px 4px; border:1px dashed var(--ucim-v1-border); border-radius:18px; margin-top:16px; background: rgba(255,255,255,.03);
}
.tag-picker-title { font-size:12px; color:var(--ucim-v1-dim); font-weight:600; }
.tag-picker-row { display:flex; flex-wrap:wrap; gap:8px; }
.tag-picker-chip {
  border:none; cursor:pointer; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.05); color:var(--ucim-v1-muted); border:1px solid var(--ucim-v1-border);
  font-size:12px;
}
.tag-picker-chip.is-active { color:var(--ucim-v1-text); background: rgba(145,169,255,.18); border-color: rgba(145,169,255,.26); }
.tag-picker-note { font-size:11px; color:var(--ucim-v1-dim); }

@media (min-width: 1100px) {
  body { overflow:hidden; }
  .app {
    display:grid;
    grid-template-columns: 92px 236px 1fr;
    grid-template-rows: auto 1fr;
    gap: 18px;
    min-height: 100vh;
    padding: 18px;
  }
  .bottom-dock-row {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: static;
    display:block;
    pointer-events:auto;
  }
  .tabbar { position: static; width:100%; height:100%; display:block; }
  .dock-pill {
    height: 100%; width: 92px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:14px; padding:18px 12px;
    border-radius: var(--ucim-v1-radius-xl); background: var(--ucim-v1-surface); border:1px solid var(--ucim-v1-border); box-shadow: var(--ucim-v1-shadow);
  }
  .dock-pill .nav-item {
    width:100%; aspect-ratio: 1/1; border-radius: 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:0 8px;
    background: transparent; border:1px solid transparent;
  }
  .dock-pill .nav-item.active {
    background: linear-gradient(145deg, rgba(145,169,255,.22), rgba(255,150,216,.16)); border-color: rgba(255,255,255,.14);
  }
  .dock-pill .nav-label { font-size: 11px; }
  .desktop-context-nav {
    display:flex; flex-direction:column; gap:12px; grid-column: 2; grid-row: 1 / span 2; padding:18px 14px; border-radius: var(--ucim-v1-radius-xl);
    background: var(--ucim-v1-surface); border:1px solid var(--ucim-v1-border); box-shadow: var(--ucim-v1-shadow); overflow:auto;
  }
  .desktop-context-nav__group { display:grid; gap:8px; }
  .desktop-context-nav__title { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--ucim-v1-dim); margin-bottom:4px; }
  .desktop-context-nav__btn {
    border:none; background:transparent; color:var(--ucim-v1-muted); text-align:left; padding:12px 14px; border-radius:16px; border:1px solid transparent; cursor:pointer;
  }
  .desktop-context-nav__btn.is-active, .desktop-context-nav__btn:hover {
    color: var(--ucim-v1-text); border-color: rgba(255,255,255,.1); background: linear-gradient(135deg, rgba(145,169,255,.16), rgba(184,152,255,.09));
  }
  .topbar {
    grid-column: 3; grid-row:1; position:relative; top:0; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:18px; min-height: 84px;
    padding: 18px 22px; border-radius: var(--ucim-v1-radius-xl); background: var(--ucim-v1-surface); border:1px solid var(--ucim-v1-border); box-shadow: var(--ucim-v1-shadow);
  }
  .main {
    grid-column:3; grid-row:2; min-width:0; overflow:auto; padding-right:2px;
  }
  .page {
    max-width: none; padding-bottom: 32px;
  }
  #page-home, #page-account, #page-chat, #page-archive {
    display:grid; gap:18px;
  }
  #page-home.active {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    align-items:start;
  }
  #page-home .home-qq-banner { grid-column: 1 / -1; }
  #homeNoticeSection { grid-column: 1; }
  #homeWorldSection, #homeCharacterSection { grid-column:2; display:block !important; }
  #page-account.active {
    grid-template-columns: minmax(320px,.95fr) minmax(0,1.1fr);
    align-items:start;
  }
  #page-account > h1 { grid-column:1 / -1; }
  #page-account .profile, #page-account .stat-grid { grid-column:1; }
  #page-account .section { grid-column:2; }
  #page-account .section:first-of-type { grid-column: 1 / -1; }
  #page-chat.active {
    grid-template-columns: minmax(360px, 420px) 1fr;
    align-items:start;
  }
  #chatListView { grid-column: 1; }
  #chatRoomView {
    grid-column:2; position: sticky; top:0; height: calc(100vh - 36px); max-height: calc(100vh - 36px); border-radius: var(--ucim-v1-radius-xl); overflow:hidden;
    background: var(--ucim-v1-surface); border:1px solid var(--ucim-v1-border); box-shadow: var(--ucim-v1-shadow);
  }
  body.chat-room-open #chatRoomView { display:flex !important; }
}
@media (max-width: 1099px) {
  .topbar-search, .desktop-context-nav { display:none !important; }
  .version-chip--desk { display:none; }
}
@media (min-width: 1100px) {
  .version-chip--mobile { opacity:.75; }
}