/* Site-wide visual polish: soft surfaces, calmer motion, and consistent focus states. */
:root {
  --polish-bg: #f7f9fc;
  --polish-surface: rgba(255, 255, 255, 0.92);
  --polish-surface-strong: #ffffff;
  --polish-border: rgba(199, 210, 229, 0.72);
  --polish-border-strong: rgba(157, 172, 205, 0.6);
  --polish-text: #253041;
  --polish-muted: #667085;
  --polish-primary: #5b6cff;
  --polish-primary-soft: #edf1ff;
  --polish-success: #14a085;
  --polish-danger: #d94b5a;
  --polish-shadow-sm: 0 8px 22px rgba(37, 48, 65, 0.07);
  --polish-shadow-md: 0 16px 38px rgba(37, 48, 65, 0.11);
  --polish-shadow-lg: 0 26px 64px rgba(37, 48, 65, 0.16);
  --polish-ease: cubic-bezier(.2, .8, .2, 1);
}

html {
  scroll-behavior: smooth;
  background: var(--polish-bg);
}

body {
  color: var(--polish-text);
  background:
    linear-gradient(180deg, #fbfcff 0%, var(--polish-bg) 42%, #f4f8f7 100%) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::selection {
  background: rgba(91, 108, 255, 0.18);
}

a {
  color: inherit;
}

img {
  image-rendering: auto;
}

.header,
.site-header-shell {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(215, 222, 238, 0.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(43, 55, 80, 0.06);
}

.header-inner,
.site-header-inner {
  border-bottom-color: transparent !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.logo-mark,
.site-header-mark,
.cover,
.homepage-config-thumb {
  background: linear-gradient(135deg, #eef3ff 0%, #f6fbfa 100%) !important;
  color: #4f61d8 !important;
  box-shadow: inset 0 0 0 1px rgba(197, 209, 237, 0.62);
}

.card,
.hero-card,
.panel,
.box-card,
.users-panel,
.sidebar,
.topbar,
.tab-bar,
.modal-card,
.homepage-config-card,
.users-card,
.user-btn,
#goodsbox,
#collectionitem,
.search-summary,
.notice,
.site-notice,
.detail-modal-card {
  border-color: var(--polish-border) !important;
  background-color: var(--polish-surface) !important;
  box-shadow: var(--polish-shadow-sm) !important;
}

.hero-card,
.panel,
.box-card,
.users-panel,
.homepage-config-card,
.modal-card,
.detail-modal-card {
  box-shadow: var(--polish-shadow-md) !important;
}

.card,
.homepage-config-card,
.users-card,
.user-btn,
#goodsbox,
#collectionitem,
.feature-carousel-card {
  transition:
    transform .22s var(--polish-ease),
    box-shadow .22s var(--polish-ease),
    border-color .22s var(--polish-ease),
    background-color .22s var(--polish-ease) !important;
}

.card:hover,
.homepage-config-card:hover,
.users-card:hover,
.user-btn:hover,
#goodsbox:hover,
#collectionitem:hover,
.feature-carousel-card:hover {
  border-color: var(--polish-border-strong) !important;
  box-shadow: var(--polish-shadow-md) !important;
  transform: translateY(-2px);
}

.button,
.primary-button,
.secondary-button,
.pager-btn,
.pager-page-btn,
.pager-arrow-btn,
.close-button,
button {
  transition:
    transform .18s var(--polish-ease),
    box-shadow .18s var(--polish-ease),
    border-color .18s var(--polish-ease),
    background-color .18s var(--polish-ease),
    color .18s var(--polish-ease);
}

.button:hover,
.primary-button:hover,
.secondary-button:hover,
.pager-btn:hover,
.pager-page-btn:hover,
.pager-arrow-btn:hover,
.close-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(47, 61, 92, 0.11);
}

.button.primary,
.primary-button,
.pager-btn.active,
.pager-page-btn.is-active,
.homepage-config-pill--info {
  box-shadow: 0 10px 20px rgba(91, 108, 255, 0.18);
}

.button:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.pager-btn:disabled,
.pager-page-btn:disabled,
.pager-arrow-btn:disabled {
  transform: none;
  box-shadow: none;
}

.text-input,
.input,
.search,
.search-mode,
.select,
select,
textarea,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"] {
  border-color: var(--polish-border) !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  color: var(--polish-text);
  transition:
    border-color .18s var(--polish-ease),
    box-shadow .18s var(--polish-ease),
    background-color .18s var(--polish-ease);
}

.text-input:focus,
.input:focus,
.search:focus,
.search-mode:focus,
.select:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: rgba(91, 108, 255, 0.68) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.12);
}

button:focus-visible,
a:focus-visible,
.card:focus-visible,
.user-btn:focus-visible {
  outline: 3px solid rgba(91, 108, 255, 0.26);
  outline-offset: 3px;
}

.thumb,
.thumb-empty,
.good-img,
.feature-avatar,
.detail-modal-media-box,
.preview-gallery__stage,
.homepage-merch-editor-thumb,
.homepage-role-config-thumb {
  background: linear-gradient(180deg, #f0f4fb 0%, #fbfdff 100%) !important;
}

.thumb,
.good-img,
.feature-avatar,
.homepage-merch-editor-thumb img,
.homepage-role-config-thumb img {
  transition: transform .28s var(--polish-ease), filter .28s var(--polish-ease);
}

.card:hover .thumb,
#goodsbox:hover .good-img,
#collectionitem:hover .good-img,
.feature-carousel-card:hover .feature-avatar {
  transform: scale(1.015);
}

.thumb.game-thumb,
.thumb-empty.game-thumb-empty {
  background: linear-gradient(135deg, #202a44 0%, #26395f 52%, #173d3a 100%) !important;
}

.thumb.game-thumb {
  object-fit: contain !important;
  padding: 18px;
}

.game-cover-image {
  background: linear-gradient(135deg, #202a44 0%, #26395f 52%, #173d3a 100%) !important;
  object-fit: contain !important;
}

.meta,
.sub,
.muted,
.muted-text,
.field-label,
.divider-note,
.homepage-config-summary,
.homepage-config-meta {
  color: var(--polish-muted) !important;
}

.divider,
.section-title,
.page-title,
.title,
.hero-title,
.homepage-config-title,
.character-side-title,
.group-title {
  color: var(--polish-text) !important;
}

.modal,
.detail-modal {
  backdrop-filter: blur(10px);
}

.modal-card,
.detail-modal-card {
  box-shadow: var(--polish-shadow-lg) !important;
}

.toast {
  box-shadow: var(--polish-shadow-md) !important;
}

.app-shell,
.shell,
.main,
.main-area,
.page-host {
  min-width: 0;
}

.sidebar,
.right-panel,
.fixed-panel {
  background: rgba(255, 255, 255, 0.82) !important;
}

.tree button,
.chip,
.tag,
.version-badge,
.homepage-config-pill,
.homepage-limit-badge,
.user-badge,
.site-user-badge {
  transition:
    background-color .18s var(--polish-ease),
    border-color .18s var(--polish-ease),
    color .18s var(--polish-ease),
    transform .18s var(--polish-ease);
}

.tree button:hover,
.chip:hover,
.tag:hover,
.version-badge:hover {
  transform: translateY(-1px);
}

.hidden {
  animation: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .shell,
  .app-shell,
  .main,
  .main-area,
  .page-stack {
    animation: polish-fade-in .22s var(--polish-ease);
  }
}

@keyframes polish-fade-in {
  from {
    opacity: .001;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .header-inner,
  .site-header-inner {
    border-radius: 0 !important;
  }

  .card,
  .hero-card,
  .panel,
  .box-card,
  .users-panel,
  .modal-card {
    box-shadow: 0 10px 24px rgba(37, 48, 65, 0.08) !important;
  }
}