/* Gemini-inspired unified visual layer for 德译智
 * Loaded last so legacy/page-local styles resolve into one system.
 */

:root {
  --gemini-blue: #0b57d0;
  --gemini-blue-2: #1a73e8;
  --gemini-violet: #7c4dff;
  --gemini-cyan: #00a7f5;
  --gemini-surface: rgba(255,255,255,.82);
  --gemini-surface-strong: #fff;
  --gemini-border: rgba(32,33,36,.08);
  --gemini-shadow: 0 2px 8px rgba(60,64,67,.07);
  --gemini-shadow-hover: 0 3px 10px rgba(60,64,67,.10);
  --gemini-ease: cubic-bezier(.2,.8,.2,1);
  --gemini-radius-sm: 14px;
  --gemini-radius-md: 18px;
  --gemini-radius-lg: 24px;
  --gemini-radius-xl: 30px;
  --gemini-pill: 999px;
}
[data-theme="dark"] {
  --gemini-surface: rgba(30,31,36,.82);
  --gemini-surface-strong: #23242a;
  --gemini-border: rgba(255,255,255,.09);
  --gemini-shadow: 0 2px 8px rgba(0,0,0,.24);
  --gemini-shadow-hover: 0 3px 10px rgba(0,0,0,.30);
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}
body {
  min-height: 100vh;
  background: var(--bg) !important;
  background-attachment: scroll;
  animation: none !important;
}

/* Disable the legacy fixed, continuously animated gradient layer. */
body::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  filter: none !important;
}

::selection { background: rgba(26,115,232,.18); }

a, button, input, textarea, select, summary, [role="button"], .suggest-item, .history-item {
  -webkit-tap-highlight-color: transparent;
}

/* Animate only controls, never every link or content card. */
.btn, .search-btn, #assistant-send-btn, .mode-btn, .review-btn,
.theme-toggle-btn, #mobile-menu-btn, .close-modal-btn,
.pc-nav a, .mobile-nav a, .mobile-app-nav a,
.search-clear-btn, .forms-toggle-summary, .btn-deconstruct {
  transition: color .16s var(--gemini-ease),
    background-color .16s var(--gemini-ease),
    border-color .16s var(--gemini-ease),
    transform .12s var(--gemini-ease) !important;
}
.search-area, .modal-input, .export-textarea {
  transition: border-color .16s var(--gemini-ease) !important;
}

/* Navigation */
.navbar {
  top: 10px !important;
  width: min(calc(100% - 24px), 1180px);
  margin: 10px auto 0;
  padding: 10px 14px !important;
  border: 1px solid var(--gemini-border) !important;
  border-radius: 22px !important;
  background: var(--gemini-surface) !important;
  box-shadow: var(--gemini-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* A small desktop-only glass accent; mobile stays opaque. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .navbar {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}
.navbar { will-change: auto; }
.nav-left { gap: 18px !important; }
.logo {
  gap: 9px !important;
  font-weight: 650 !important;
  letter-spacing: -.35px !important;
}
.site-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(26,115,232,.12);
}
.pc-nav { gap: 3px !important; }
.pc-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px !important;
  border-radius: var(--gemini-pill) !important;
  font-weight: 540 !important;
}
.pc-nav a:hover {
  background: rgba(60,64,67,.06) !important;
  transform: none;
}
.pc-nav a.active {
  color: var(--gemini-blue-2) !important;
  background: linear-gradient(135deg, rgba(26,115,232,.12), rgba(124,77,255,.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(26,115,232,.06);
}

/* Unified buttons */
.btn,
.search-btn,
#assistant-send-btn,
.mode-btn,
.theme-toggle-btn,
#mobile-menu-btn {
  border-radius: var(--gemini-pill) !important;
  font-weight: 560 !important;
  letter-spacing: -.05px;
}
.btn {
  min-height: 40px;
  padding: 9px 18px !important;
}
.btn-primary,
.search-btn,
#assistant-send-btn {
  background: linear-gradient(135deg, var(--gemini-blue-2), #4f46e5) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(26,115,232,.16) !important;
}
.btn-primary:hover,
.search-btn:hover,
#assistant-send-btn:hover {
  transform: none;
  box-shadow: 0 3px 8px rgba(26,115,232,.20) !important;
  filter: none;
}
.btn-outline {
  border: 1px solid var(--gemini-border) !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
}
.btn-outline:hover {
  background: rgba(60,64,67,.06) !important;
  transform: none;
}
.btn:active,
.search-btn:active,
#assistant-send-btn:active,
.theme-toggle-btn:active,
.pc-nav a:active {
  transform: scale(.97) !important;
}

/* Focus system */
:where(button, a, input, textarea, select, summary):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(26,115,232,.16), 0 0 0 1px rgba(26,115,232,.42) !important;
}

/* Layout rhythm */
.main-content,
.profile-container,
.assistant-layout {
  animation: none !important;
}
.main-content {
  max-width: 860px !important;
  margin-top: 72px !important;
}
.main-title {
  font-size: clamp(34px, 5vw, 48px) !important;
  font-weight: 620 !important;
  letter-spacing: -1.4px !important;
  margin-bottom: 34px !important;
}
.main-title::after {
  content: "";
  display: block;
  width: 76px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: var(--gemini-pill);
  background: linear-gradient(90deg, var(--gemini-blue-2), var(--gemini-violet), var(--gemini-cyan));
  opacity: .72;
}

/* Search */
.search-area {
  max-width: 680px !important;
  min-height: 60px;
  align-items: center;
  border-radius: var(--gemini-pill) !important;
  border: 1px solid var(--gemini-border) !important;
  background: var(--gemini-surface-strong) !important;
  box-shadow: var(--gemini-shadow) !important;
  overflow: hidden;
}
.search-area:hover {
  box-shadow: var(--gemini-shadow-hover) !important;
  transform: none;
}
.search-area:focus-within {
  border-color: rgba(26,115,232,.24) !important;
  outline: 3px solid rgba(26,115,232,.16);
  outline-offset: 2px;
  box-shadow: var(--gemini-shadow) !important;
}
.search-input {
  min-height: 58px;
  padding: 0 20px !important;
  font-size: 16px !important;
}
.search-btn {
  min-height: 48px;
  margin-right: 6px;
  padding: 0 24px !important;
}
.search-clear-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
}
#suggestions {
  max-width: 660px !important;
  margin-top: 8px !important;
}
.suggest-item {
  margin-bottom: 6px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  border-color: var(--gemini-border) !important;
  background: var(--gemini-surface-strong) !important;
  box-shadow: 0 2px 10px rgba(60,64,67,.04);
}
.suggest-item:hover,
.suggest-item.active {
  transform: none;
  box-shadow: var(--gemini-shadow);
}

/* The search container supplies the focus ring for its borderless input. */
.search-input:focus-visible { box-shadow: none !important; }

/* Cards */
.result-card,
.contribute-section,
.profile-card,
.assistant-card,
.review-card,
.about-card,
.calligraphy-box,
.practice-stats,
.translation-box,
.stat-card,
.extra-info {
  border: 1px solid var(--gemini-border) !important;
  box-shadow: var(--gemini-shadow) !important;
}
.result-card,
.contribute-section,
.profile-card,
.assistant-card,
.review-card,
.about-card {
  border-radius: var(--gemini-radius-xl) !important;
  background: var(--gemini-surface-strong) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.result-card {
  max-width: 680px !important;
  padding: 30px 32px !important;
}
.contribute-section {
  max-width: 680px !important;
}
.stat-card,
.calligraphy-box,
.practice-stats,
.translation-box,
.extra-info {
  border-radius: var(--gemini-radius-md) !important;
}

/* Static reading surfaces should not animate on hover or theme changes. */
.result-card, .profile-card, .stat-card, .calligraphy-box,
.assistant-card, .review-card, .about-card, .contribute-section,
.practice-stats, .translation-box, .suggest-item, .history-item {
  transition: none !important;
}
.result-card:hover, .profile-card:hover, .stat-card:hover, .calligraphy-box:hover {
  transform: none !important;
  box-shadow: var(--gemini-shadow) !important;
}

/* Inputs */
.modal-input,
.export-textarea,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select {
  border-radius: 16px !important;
}
.modal-input,
.export-textarea {
  border-color: var(--gemini-border) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
}
.modal-input:focus,
.export-textarea:focus {
  border-color: rgba(26,115,232,.32) !important;
  box-shadow: 0 0 0 4px rgba(26,115,232,.10) !important;
}

/* Modal / sidebar */
.overlay {
  background: rgba(20,22,26,.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.modal-panel {
  border: 1px solid var(--gemini-border) !important;
  border-radius: var(--gemini-radius-xl) !important;
  background: var(--gemini-surface-strong) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.close-modal-btn,
.sidebar .close-btn,
.theme-toggle-btn,
#mobile-menu-btn {
  border-radius: 50% !important;
}
.sidebar {
  left: -320px !important;
  width: min(320px, 88vw) !important;
  padding: 22px !important;
  border-radius: 0 28px 28px 0 !important;
  border-right: 1px solid var(--gemini-border);
  background: var(--gemini-surface-strong) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sidebar.open { left: 0 !important; }
.mobile-nav a {
  border-radius: 16px !important;
  padding: 12px 14px !important;
}

/* Tables & compact controls */
table {
  border-radius: 18px !important;
  overflow: hidden;
  border: 1px solid var(--gemini-border);
}
table th {
  background: color-mix(in srgb, var(--bg) 90%, transparent) !important;
}
.forms-toggle-summary,
.btn-deconstruct,
.custom-select-option {
  border-radius: 12px !important;
}
.custom-select-panel {
  border-radius: 18px !important;
  border: 1px solid var(--gemini-border);
  box-shadow: var(--gemini-shadow-hover) !important;
  padding: 6px !important;
}

/* Assistant page */
.assistant-card {
  overflow: hidden;
}
.assistant-header {
  border-bottom-color: var(--gemini-border) !important;
}
.mode-switch {
  gap: 6px !important;
}
.mode-btn {
  border: 1px solid var(--gemini-border) !important;
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
}
.mode-btn.active {
  color: var(--gemini-blue-2) !important;
  background: linear-gradient(135deg, rgba(26,115,232,.13), rgba(124,77,255,.09)) !important;
  border-color: rgba(26,115,232,.14) !important;
}
.assistant-input {
  border-top-color: var(--gemini-border) !important;
}
.assistant-input textarea {
  border-radius: 18px !important;
}
.quick button,
.quick .quick-btn {
  border-radius: var(--gemini-pill) !important;
}

/* Profile */
.profile-container { max-width: 880px !important; }
.profile-card { padding: 34px !important; }
.avatar {
  width: 88px !important;
  height: 88px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(26,115,232,.09), rgba(124,77,255,.09)) !important;
}
.role-badge,
.pos-tag,
.gender-badge {
  border-radius: var(--gemini-pill) !important;
}

/* Review overlay */
.review-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.review-card { max-width: 460px !important; }
.review-btn {
  border-radius: 16px !important;
  transition: background-color .16s var(--gemini-ease), transform .12s var(--gemini-ease) !important;
}
.review-btn:hover {
  opacity: 1 !important;
  transform: none;
  filter: none;
}

/* Mobile bottom nav */
.mobile-app-nav {
  left: 12px !important;
  right: 12px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  border: 1px solid var(--gemini-border) !important;
  border-radius: 22px !important;
  background: var(--gemini-surface) !important;
  box-shadow: var(--gemini-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
}
.mobile-app-nav a {
  border-radius: 16px !important;
  margin: 5px 2px;
}
.mobile-app-nav a.active {
  background: linear-gradient(135deg, rgba(26,115,232,.12), rgba(124,77,255,.08)) !important;
}

/* Render content immediately, including legacy page and mobile animations. */
.main-title,
.search-area,
.result-card,
.suggest-item,
.profile-card,
.stat-card,
.history-item {
  animation: none !important;
}
.history-item:hover {
  transform: none;
  background: rgba(26,115,232,.05) !important;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(127,127,127,.28) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(127,127,127,.22);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(127,127,127,.36); }

/* Responsive */
@media (max-width: 900px) {
  .navbar {
    width: calc(100% - 16px);
    margin-top: 8px;
    top: 8px !important;
  }
}
@media (max-width: 768px) {
  body { padding-bottom: 92px; }
  .navbar {
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }
  .main-content {
    margin-top: 34px !important;
    padding: 0 16px !important;
  }
  html body .main-title::after {
    width: auto;
    height: auto;
    margin: 10px 0 0;
    background: none;
  }
  .main-title {
    font-size: 34px !important;
    margin-bottom: 26px !important;
  }
  .search-area {
    min-height: 56px;
    border-radius: 24px !important;
  }
  .search-input { min-height: 54px; padding-left: 16px !important; }
  .search-btn {
    min-height: 44px;
    padding: 0 18px !important;
  }
  .result-card,
  .contribute-section,
  .profile-card,
  .assistant-card,
  .review-card,
  .about-card {
    border-radius: 24px !important;
  }
  .result-card,
  .profile-card { padding: 24px 20px !important; }
}

/* Higher specificity also covers mobile CSS appended by mobile-ui.js. */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
  html body :is(.navbar, .mobile-app-nav, .search-area, .result-card,
    .contribute-section, .profile-card, .assistant-card, .review-card,
    .about-card, .modal-panel, .sidebar, .grammar-input, .sentence-input) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--gemini-surface-strong) !important;
    box-shadow: var(--gemini-shadow) !important;
  }
  html body :is(.overlay, .review-overlay) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body :is(.btn, .search-btn, #assistant-send-btn, .review-btn,
    .theme-toggle-btn, #mobile-menu-btn, .pc-nav a, .mobile-nav a,
    .mobile-app-nav a, .search-area, .suggest-item, .history-item,
    .result-card, .profile-card, .stat-card, .calligraphy-box, .avatar,
    .user-avatar, .emoji-option, .home-recent-chip, .speak-btn,
    .bookmark-btn, .copy-btn):hover:not(:active) {
    transform: none !important;
    filter: none !important;
  }
  html body .search-area:focus-within { transform: none !important; }
  html body :is(.theme-toggle-btn, #mobile-menu-btn) {
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}