:root {
  color-scheme: light;
  --theme-primary: #0ea5e9;
  --theme-secondary: #6366f1;
  --theme-accent: #f472b6;
  --theme-primary-strong: color-mix(in srgb, var(--theme-primary) 72%, #0f172a);
  --theme-primary-light: color-mix(in srgb, var(--theme-primary) 30%, white);
  --theme-primary-pale: color-mix(in srgb, var(--theme-primary) 12%, white);
  --theme-primary-border: color-mix(in srgb, var(--theme-primary) 30%, white);
  --ocean: var(--theme-primary);
  --indigo: var(--theme-secondary);
  --ink: #0f172a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
::selection { background: var(--theme-primary-light); color: var(--theme-primary-strong); }

.page-enter { animation: pageEnter .55s ease both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.hero-ocean,
.page-hero,
.login-ocean,
.cta-ocean {
  background:
    radial-gradient(circle at 80% 20%, rgba(244, 114, 182, .24), transparent 26%),
    radial-gradient(circle at 15% 75%, rgba(34, 211, 238, .22), transparent 30%),
    linear-gradient(135deg, #075985 0%, #0ea5e9 45%, #4f46e5 100%);
  background:
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--theme-accent) 30%, transparent), transparent 26%),
    radial-gradient(circle at 15% 75%, color-mix(in srgb, var(--theme-primary) 30%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 55%, #020617) 0%, var(--theme-primary) 48%, var(--theme-secondary) 100%);
}

.hero-background-image { z-index: 0; }
.hero-background-overlay {
  z-index: 0;
  background: linear-gradient(112deg, color-mix(in srgb, var(--theme-primary) 76%, #020617), color-mix(in srgb, var(--theme-primary) 68%, transparent) 48%, color-mix(in srgb, var(--theme-secondary) 78%, #020617));
  opacity: var(--hero-overlay-opacity, .82);
}

.page-hero { position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent);
}
.page-hero > * { position: relative; z-index: 1; }

.sea-grid {
  background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.hero-orb { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .3; }
.hero-ocean.has-custom-background .hero-orb { opacity: var(--hero-orb-opacity, .3); }
.hero-ocean.has-custom-background .sea-grid { opacity: var(--hero-grid-opacity, .2) !important; }
.hero-orb-one { width: 28rem; height: 28rem; top: 6rem; right: -8rem; background: var(--theme-primary-light); }
.hero-orb-two { width: 22rem; height: 22rem; bottom: 2rem; left: -9rem; background: var(--theme-secondary); }
.text-gradient-sun { background: linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 35%, #fde68a), var(--theme-accent)); color: transparent; -webkit-background-clip: text; background-clip: text; }
.brand-visual-glow { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 42%, transparent), color-mix(in srgb, var(--theme-secondary) 42%, transparent)); }
.brand-visual-panel { background: linear-gradient(135deg, var(--theme-primary), color-mix(in srgb, var(--theme-primary) 70%, var(--theme-secondary)), var(--theme-secondary)); }

.float-soft { animation: floatSoft 4s ease-in-out infinite; }
.float-card { animation: floatCard 5s ease-in-out infinite; }
.float-card-delayed { animation: floatCard 5s 1.2s ease-in-out infinite; }
@keyframes floatSoft { 50% { transform: translateY(-12px) rotate(-3deg); } }
@keyframes floatCard { 50% { transform: translateY(-9px); } }

.site-header.header-scrolled { background: rgba(255,255,255,.92); border-color: rgba(226,232,240,.9); box-shadow: 0 8px 30px rgba(15,23,42,.07); backdrop-filter: blur(18px); }
.site-header.header-scrolled [data-nav-text] { color: #0f172a; }
.site-header.header-scrolled [data-nav-muted] { color: var(--theme-primary-strong); }
.site-header.header-scrolled [data-nav-link]:not(.bg-white) { color: #475569; }
.site-header.header-scrolled [data-nav-link]:not(.bg-white):hover { background: var(--theme-primary-pale); color: var(--theme-primary-strong); }
.site-header.header-scrolled .mobile-menu-toggle { color: var(--theme-primary-strong); border-color: var(--theme-primary-border); }

.section-kicker, .page-kicker { display: inline-block; color: var(--theme-primary-strong); font-size: .72rem; line-height: 1rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.page-kicker { color: var(--theme-primary-light); }
.section-title { margin-top: .6rem; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; font-weight: 900; letter-spacing: -.035em; color: #0f172a; }
.section-subtitle { margin-top: 1rem; max-width: 38rem; color: #64748b; line-height: 1.8; }
.page-title { margin-top: .75rem; font-size: clamp(2.7rem, 7vw, 5rem); line-height: 1.05; font-weight: 900; letter-spacing: -.045em; }
.page-lead { margin-top: 1.2rem; max-width: 42rem; color: #e0f2fe; font-size: 1.1rem; line-height: 1.8; }

.lift-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.lift-card:hover, .review-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(14, 116, 144, .13); border-color: #bae6fd; }
.news-placeholder { background: linear-gradient(135deg, #e0f2fe, #c7d2fe); overflow: hidden; position: relative; }
.news-placeholder::before { content: ""; position: absolute; width: 13rem; height: 13rem; border: 24px solid rgba(255,255,255,.42); border-radius: 50%; top: -6rem; right: -4rem; }
.placeholder-2 { background: linear-gradient(135deg, #cffafe, #bae6fd); }
.placeholder-3 { background: linear-gradient(135deg, #fce7f3, #c7d2fe); }
.news-placeholder span, .news-placeholder:not(:has(span)) { position: relative; z-index: 1; }

.review-scroll { scrollbar-width: thin; scrollbar-color: #7dd3fc transparent; }
.review-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; border-color: #e2e8f0; }
.featured-card { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--theme-primary), var(--theme-accent)) border-box; }
.avatar-placeholder { display: grid; flex: 0 0 auto; width: 3.5rem; height: 3.5rem; place-items: center; border: 2px solid var(--theme-primary-border); border-radius: 999px; background: linear-gradient(135deg, var(--theme-primary-pale), color-mix(in srgb, var(--theme-secondary) 13%, white)); }
.avatar-small { width: 2.75rem; height: 2.75rem; font-size: .9rem; }
.review-content > :first-child, .prose-seafur > :first-child { margin-top: 0; }
.review-content > :last-child, .prose-seafur > :last-child { margin-bottom: 0; }
.review-content p { margin: .5rem 0; }

.prose-seafur { color: #475569; font-size: 1.05rem; line-height: 1.95; overflow-wrap: anywhere; }
.prose-seafur h1, .prose-seafur h2, .prose-seafur h3 { margin: 2rem 0 .8rem; color: #0f172a; font-weight: 900; line-height: 1.3; }
.prose-seafur h1 { font-size: 2rem; } .prose-seafur h2 { font-size: 1.55rem; } .prose-seafur h3 { font-size: 1.25rem; }
.prose-seafur p, .prose-seafur ul, .prose-seafur ol, .prose-seafur blockquote { margin: 1rem 0; }
.prose-seafur ul { list-style: disc; padding-left: 1.5rem; } .prose-seafur ol { list-style: decimal; padding-left: 1.5rem; }
.prose-seafur blockquote { border-left: 4px solid var(--theme-primary); border-radius: 0 .75rem .75rem 0; background: var(--theme-primary-pale); padding: .75rem 1.25rem; color: var(--theme-primary-strong); }
.prose-seafur a, .review-content a { color: var(--theme-primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.prose-seafur img { max-width: 100%; border-radius: 1rem; }
.prose-seafur code { border-radius: .35rem; background: #e2e8f0; padding: .15rem .35rem; color: #be185d; }
.prose-seafur pre { overflow-x: auto; border-radius: 1rem; background: #0f172a; padding: 1.25rem; color: #e2e8f0; }

.badge { display: inline-flex; border-radius: 999px; padding: .35rem .7rem; font-size: .7rem; font-weight: 800; }
.empty-state { border: 1px dashed var(--theme-primary-border); border-radius: 2rem; background: white; padding: 4rem 1.5rem; text-align: center; color: var(--theme-primary-strong); font-size: 3rem; }
.empty-state h2 { margin-top: 1rem; color: #0f172a; font-size: 1.4rem; font-weight: 900; }
.empty-state p { margin-top: .5rem; color: #94a3b8; font-size: .9rem; }

.admin-panel, .admin-table-wrap { border: 1px solid rgba(226,232,240,.9); border-radius: 1.5rem; background: white; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.settings-group[open] .settings-chevron { transform: rotate(180deg); }
.settings-chevron { transition: transform .2s ease; }
.admin-panel { overflow: hidden; }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f1f5f9; padding: 1rem 1.25rem; }
.admin-panel-head h2, .panel-title { color: #0f172a; font-weight: 800; }
.admin-panel-head a { color: #0284c7; font-size: .75rem; font-weight: 700; }
.admin-table-wrap { overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; }
.admin-table th { white-space: nowrap; border-bottom: 1px solid #e2e8f0; background: #f8fafc; padding: .85rem 1rem; color: #64748b; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-table td { border-bottom: 1px solid #f1f5f9; padding: 1rem; vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: rgba(248,250,252,.75); }
.table-action { display: inline-flex; border-radius: .65rem; padding: .45rem .65rem; color: #0369a1; font-size: .75rem; font-weight: 800; transition: background .2s; }
.table-action:hover { background: #f0f9ff; }
.status-dot { display: block; width: .45rem; height: .45rem; flex: 0 0 auto; border-radius: 999px; }
.status-badge { display: inline-flex; white-space: nowrap; border-radius: 999px; padding: .35rem .65rem; font-size: .68rem; font-weight: 800; transition: filter .2s; }
button.status-badge:hover { filter: brightness(.94); }
.status-published { background: #d1fae5; color: #047857; }
.status-draft { background: #f1f5f9; color: #64748b; }
.status-urgent { background: #ffe4e6; color: #be123c; }
.status-important { background: #fef3c7; color: #b45309; }

.form-field { display: block; }
.form-field > span { display: block; margin-bottom: .5rem; color: #334155; font-size: .82rem; font-weight: 800; }
.form-field input:not([type="checkbox"]), .form-field textarea, .form-field select, .form-control {
  width: 100%; border: 1px solid #cbd5e1; border-radius: .85rem; background: white; padding: .72rem .9rem; color: #0f172a; font-size: .875rem; outline: none; transition: border .2s, box-shadow .2s;
}
.form-field textarea { resize: vertical; line-height: 1.65; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus, .form-control:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.16); }
.field-help { margin-top: .45rem; display: block; color: #94a3b8; font-size: .7rem; }
.fa-picker-result { display: flex; min-width: 0; min-height: 5.5rem; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; border: 1px solid #e2e8f0; border-radius: .85rem; background: #fff; padding: .65rem .35rem; color: #475569; transition: border-color .18s, background .18s, color .18s, transform .18s; }
.fa-picker-result:hover, .fa-picker-result.is-selected { transform: translateY(-2px); border-color: #38bdf8; background: #f0f9ff; color: #0369a1; }
.fa-picker-result i { font-size: 1.35rem; }
.fa-picker-result span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: .62rem; font-weight: 700; }
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .85rem; padding: .72rem 1rem; font-size: .84rem; font-weight: 800; transition: transform .2s, background .2s, box-shadow .2s; }
.btn-primary { background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)); color: white; box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-primary) 24%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px color-mix(in srgb, var(--theme-primary) 32%, transparent); }
.btn-primary:disabled { cursor: wait; opacity: .72; transform: none; box-shadow: none; }
.btn-secondary { border: 1px solid #cbd5e1; background: white; color: #475569; }
.btn-secondary:hover { background: #f8fafc; }
.upload-field { display: flex; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #7dd3fc; border-radius: 1rem; background: #f0f9ff; padding: 1.25rem; text-align: center; }
.upload-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-field span { color: #0369a1; font-size: .8rem; font-weight: 800; }
.upload-field small { margin-top: .3rem; color: #94a3b8; font-size: .68rem; }
.theme-color-control { display: flex !important; align-items: center; gap: .8rem; margin-bottom: 0 !important; border: 1px solid #cbd5e1; border-radius: .85rem; background: white; padding: .45rem .7rem; }
.form-field input.theme-color-input { width: 3rem; height: 2.5rem; flex: 0 0 auto; cursor: pointer; border: 0; border-radius: .55rem; padding: 0; box-shadow: none; }
.theme-color-control output { color: #475569; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; font-weight: 800; letter-spacing: .04em; }
.theme-range-control { display: flex !important; align-items: center; gap: 1rem; margin-bottom: 0 !important; border: 1px solid #cbd5e1; border-radius: .85rem; background: white; padding: .8rem .9rem; }
.form-field input.theme-range-input { min-width: 0; flex: 1; cursor: pointer; border: 0; padding: 0; accent-color: var(--theme-primary); box-shadow: none; }
.theme-range-control output { width: 3.5rem; flex: 0 0 auto; color: var(--theme-primary-strong); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; font-weight: 900; text-align: right; }

.switch-input { position: relative; width: 2.7rem; height: 1.5rem; flex: 0 0 auto; cursor: pointer; appearance: none; border-radius: 999px; background: #cbd5e1; transition: background .2s; }
.switch-input::after { content: ""; position: absolute; left: .2rem; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(15,23,42,.2); transition: transform .2s; }
.switch-input:checked { background: var(--theme-primary); }
.switch-input:checked::after { transform: translateX(1.2rem); }
.star-picker { display: flex; gap: .35rem; }
.star-picker button { color: #cbd5e1; font-size: 2rem; line-height: 1; transition: color .15s, transform .15s; }
.star-picker button.active { color: #fbbf24; }
.star-picker button:hover { transform: scale(1.12); }

.CodeMirror, .CodeMirror-scroll { min-height: 420px; }
.CodeMirror { border-color: #cbd5e1; border-radius: 0 0 .85rem .85rem; font-size: .9rem; }
.editor-toolbar { border-color: #cbd5e1; border-radius: .85rem .85rem 0 0; background: #f8fafc; }

.flash-message { animation: flashIn .3s ease both; }
@keyframes flashIn { from { opacity: 0; transform: translateX(14px); } }
.flash-message.flash-out { animation: flashOut .25s ease both; }
@keyframes flashOut { to { opacity: 0; transform: translateX(14px); } }
.content-upload-notice { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; max-width: calc(100vw - 2rem); transform: translateY(12px); border: 1px solid; border-radius: .9rem; padding: .8rem 1rem; color: white; font-size: .8rem; font-weight: 800; opacity: 0; box-shadow: 0 16px 36px rgba(15,23,42,.2); transition: opacity .2s ease, transform .2s ease; }
.content-upload-notice.is-visible { transform: translateY(0); opacity: 1; }
.content-upload-notice.is-success { border-color: #34d399; background: #047857; }
.content-upload-notice.is-error { border-color: #fb7185; background: #be123c; }

/* 前台常用 Tailwind 色阶跟随后台主题色，保留原有明暗层级。 */
.site-theme [class~="text-sky-800"],
.site-theme [class~="text-sky-700"],
.site-theme [class~="text-sky-600"] { color: var(--theme-primary-strong) !important; }
.site-theme [class~="text-sky-500"] { color: var(--theme-primary) !important; }
.site-theme [class~="text-sky-300"],
.site-theme [class~="text-sky-200"],
.site-theme [class~="text-sky-100"] { color: var(--theme-primary-light) !important; }
.site-theme [class~="bg-sky-600"],
.site-theme [class~="bg-sky-500"] { background-color: var(--theme-primary) !important; }
.site-theme [class~="bg-sky-100"] { background-color: color-mix(in srgb, var(--theme-primary) 16%, white) !important; }
.site-theme [class~="bg-sky-50"],
.site-theme [class~="bg-sky-50/60"],
.site-theme [class~="bg-sky-50/70"] { background-color: var(--theme-primary-pale) !important; }
.site-theme [class~="border-sky-300"],
.site-theme [class~="border-sky-200"],
.site-theme [class~="border-sky-100"] { border-color: var(--theme-primary-border) !important; }
.site-theme [class~="hover:text-sky-800"]:hover,
.site-theme [class~="hover:text-sky-600"]:hover { color: var(--theme-primary-strong) !important; }
.site-theme [class~="hover:bg-sky-600"]:hover { background-color: var(--theme-primary-strong) !important; }
.site-theme [class~="hover:bg-sky-50"]:hover { background-color: var(--theme-primary-pale) !important; }
.site-theme [class~="text-pink-600"],
.site-theme [class~="text-pink-500"] { color: color-mix(in srgb, var(--theme-accent) 78%, #0f172a) !important; }
.site-theme [class~="bg-pink-100"] { background-color: color-mix(in srgb, var(--theme-accent) 18%, white) !important; }

@media (max-width: 1023px) {
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-overlay.is-open { display: block; }
}

@media (max-width: 640px) {
  .hero-ocean { min-height: 700px; }
  .page-title { font-size: 2.75rem; }
  .admin-table th, .admin-table td { padding: .8rem; }
}

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