/* --- CSS variables --- */ :root { --color-bg: #f6f8fb; --color-surface: #ffffff; --color-text: #1a2332; --color-muted: #5c6b7f; --color-accent: #2563eb; --color-accent-hover: #1d4ed8; --color-border: #e2e8f0; --header-h: 4rem; --content-max: 1540px; --radius: 12px; --shadow: 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08); --font: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.65; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } body.page-loader-active { overflow: hidden; } /* 正式上线时在根元素 上加 class="site-live"，可隐藏带 .hint-remove-at-launch 的说明性提示 */ html.site-live .hint-remove-at-launch { display: none !important; } /* --- 全页加载（动态正弦波） --- */ .page-loader { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.35rem; background: rgba(246, 248, 251, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.38s ease, visibility 0.38s ease; } .page-loader--hide { opacity: 0; visibility: hidden; pointer-events: none; } .page-loader-wave { width: min(320px, 88vw); height: 52px; overflow: hidden; border-radius: 10px; background: linear-gradient( 180deg, rgba(37, 99, 235, 0.06), rgba(99, 102, 241, 0.04) ); border: none; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 14%, #000 86%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 14%, #000 86%, transparent 100% ); } .page-loader-wave-svg { width: 720px; height: 48px; display: block; animation: page-loader-wave-slide 2.4s linear infinite; } @keyframes page-loader-wave-slide { from { transform: translateX(0); } to { transform: translateX(-360px); } } .page-loader-label { margin: 0; font-size: 0.9375rem; color: var(--color-muted); letter-spacing: 0.04em; } @media (prefers-reduced-motion: reduce) { .page-loader-wave-svg { animation: none; transform: translateX(-120px); } .page-loader { transition: opacity 0.2s ease, visibility 0.2s ease; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(246, 248, 251, 0.92); } } /* 已登录：隐藏「请登录」类提示与入口 */ .user-only { display: none; } html[data-auth="user"] .guest-only, html[data-auth="admin"] .guest-only { display: none !important; } html[data-auth="user"] .user-only, html[data-auth="admin"] .user-only { display: block; } html[data-auth="user"] .user-only.hero-actions, html[data-auth="admin"] .user-only.hero-actions { display: flex; } body > main { flex: 1 0 auto; width: 100%; min-height: 0; display: flex; flex-direction: column; } main.auth-page { flex: 1; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } .container { width: min(var(--content-max), 100% - 2rem); margin-inline: auto; } /* --- Header --- */ .site-header { position: sticky; top: 0; z-index: 100; background: linear-gradient( 105deg, rgba(239, 246, 255, 0.97) 0%, rgba(255, 255, 255, 0.95) 45%, rgba(238, 242, 255, 0.96) 100% ); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(37, 99, 235, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, var(--shadow); /* 移动端下拉导航 position:absolute 的定位参考 */ isolation: isolate; } .header-inner { display: flex; align-items: center; justify-content: space-between; width: min(var(--content-max), 100% - 2rem); margin-inline: auto; min-height: var(--header-h); gap: 1rem; } .header-cluster { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.65rem 1.25rem; flex: 1; min-width: 0; } .header-auth { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; } .header-auth .auth-link { padding: 0.4rem 0.65rem; font-size: 0.875rem; font-weight: 500; color: var(--color-muted); text-decoration: none; border-radius: 8px; transition: color 0.15s, background 0.15s; } .header-auth .auth-link:hover { color: var(--color-accent); background: var(--color-bg); text-decoration: none; } .header-auth .auth-link.nav-link-active { color: var(--color-accent); font-weight: 600; } .header-auth .auth-btn-register { padding: 0.4rem 0.85rem; font-size: 0.875rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--color-accent) 0%, #6366f1 100%); border-radius: 8px; text-decoration: none; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28); transition: filter 0.15s, box-shadow 0.15s; } .header-auth .auth-btn-register:hover { color: #fff; filter: brightness(1.06); text-decoration: none; } .header-auth .auth-btn-register.nav-link-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-accent), 0 4px 14px rgba(37, 99, 235, 0.35); } .logo { font-weight: 700; font-size: 1.125rem; background: linear-gradient(120deg, #1e40af 0%, var(--color-accent) 45%, #6366f1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; white-space: nowrap; } .logo:hover { filter: brightness(1.08); text-decoration: none; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); cursor: pointer; } .nav-toggle-bar { display: block; width: 1.25rem; height: 2px; margin-inline: auto; background: var(--color-text); border-radius: 1px; } .site-nav .nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; } .site-nav .nav-list > li { position: relative; } /* 仅管理员可见：顶栏「网站管理」 */ .site-nav .nav-list > li.nav-admin-only { display: none; } html[data-auth="admin"] .site-nav .nav-list > li.nav-admin-only { display: block; } .site-nav .nav-list > li:not(.nav-dropdown-wrap) > a { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; border-radius: 999px; transition: color 0.15s, background 0.15s, box-shadow 0.15s; } .site-nav a { color: var(--color-muted); font-weight: 500; font-size: 0.9375rem; text-decoration: none; } .site-nav .nav-list > li:not(.nav-dropdown-wrap) > a:hover { color: var(--color-accent); background: rgba(37, 99, 235, 0.08); text-decoration: none; } .site-nav a.nav-link-active { color: #fff; font-weight: 600; text-decoration: none; background: linear-gradient(135deg, var(--color-accent) 0%, #4f46e5 100%); box-shadow: 0 2px 12px rgba(37, 99, 235, 0.35); } .site-nav .nav-list > li:not(.nav-dropdown-wrap) > a.nav-link-active { padding: 0.35rem 0.85rem; } .site-nav a.nav-link-active:hover { color: #fff; filter: brightness(1.05); text-decoration: none; } /* --- 动画演示：下拉菜单 --- */ .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.35rem 0.65rem; font-family: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--color-muted); background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(37, 99, 235, 0.1); cursor: pointer; border-radius: 999px; transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s; } .nav-dropdown-trigger:hover { color: var(--color-accent); background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.2); } .nav-dropdown-trigger.nav-trigger-active { color: #fff; font-weight: 600; background: linear-gradient(135deg, var(--color-accent) 0%, #4f46e5 100%); border-color: transparent; box-shadow: 0 2px 12px rgba(37, 99, 235, 0.35); } .nav-dropdown-trigger.nav-trigger-active:hover { color: #fff; filter: brightness(1.05); } .nav-dropdown-chevron { display: inline-block; width: 0.4em; height: 0.4em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -0.15em; opacity: 0.75; transition: transform 0.2s ease; } .nav-dropdown-wrap.is-submenu-open .nav-dropdown-chevron { transform: rotate(225deg); margin-top: 0.1em; } .nav-dropdown { position: absolute; top: 100%; left: 0; z-index: 120; min-width: 11rem; margin: 0; padding: 0.45rem 0 0.35rem; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown-wrap:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nav-dropdown a { display: block; padding: 0.5rem 1rem; color: var(--color-muted); font-weight: 500; font-size: 0.9375rem; text-decoration: none; } .nav-dropdown a:hover { color: var(--color-accent); background: var(--color-bg); text-decoration: none; } .nav-dropdown a.nav-link-active { color: var(--color-accent); font-weight: 600; background: rgba(37, 99, 235, 0.1); border-left: 3px solid var(--color-accent); padding-left: calc(1rem - 3px); } .nav-dropdown a.nav-link-active:hover { color: var(--color-accent-hover); background: rgba(37, 99, 235, 0.14); } @media (max-width: 768px) { .nav-toggle { display: flex; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.28s ease, visibility 0.28s; } .site-nav.is-open { max-height: min(92vh, 720px); overflow-y: auto; visibility: visible; } .site-nav .nav-list { flex-direction: column; align-items: stretch; padding: 0.75rem 1rem 1rem; gap: 0; } .site-nav .nav-list > li:not(.nav-dropdown-wrap) a { display: block; padding: 0.65rem 0.75rem; border-radius: 8px; } .site-nav .nav-list > li:not(.nav-dropdown-wrap) a:hover { background: var(--color-bg); } .nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown-wrap:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: 0.65rem 0.75rem; border-radius: 8px; text-align: left; } .nav-dropdown-trigger:hover { background: var(--color-bg); } .nav-dropdown-wrap .nav-dropdown { position: static; display: none; min-width: 0; width: 100%; padding: 0 0 0.25rem; border: none; border-radius: 0; box-shadow: none; background: transparent; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none; } .nav-dropdown-wrap.is-submenu-open .nav-dropdown { display: block; } .nav-dropdown a { padding: 0.5rem 0.75rem 0.5rem 1.75rem; border-radius: 8px; } .nav-dropdown a:hover { background: var(--color-bg); } } /* --- Sections --- */ .section { scroll-margin-top: calc(var(--header-h) + 0.5rem); padding: 3.5rem 0; } .page-main { flex: 1; display: flex; flex-direction: column; min-height: 0; } .page-main > .section { flex: 1; display: flex; flex-direction: column; min-height: 0; } .page-main > .section > .container { flex: 1; min-height: 0; } .page-main .section:first-child { padding-top: 2.75rem; } main:has(.hero) { flex: 1; } main:has(.hero) > .section.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; } .h-card { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; color: var(--color-text); } .page-single-card { max-width: min(100%, 52rem); } .page-single-card p { margin: 0; font-size: 0.9375rem; color: var(--color-muted); } .section-alt { background: linear-gradient(180deg, #eef2f7 0%, var(--color-bg) 100%); } .hero { padding: 4rem 0 3.5rem; text-align: center; } .hero .container { max-width: min(100%, 56rem); } .hero--physics { position: relative; overflow: hidden; background: linear-gradient( 165deg, #f0f6ff 0%, #f6f8fb 42%, #eef8f5 100% ); } .hero--physics .container { position: relative; z-index: 1; } .hero-physics { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .hero-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; opacity: 0.55; overflow: hidden; } /* 加宽 SVG 并把位移动画作用在整图上，避免 path 左移时在右侧露出空隙 */ .hero-wave svg { position: relative; left: -8%; width: 116%; max-width: none; height: 100%; display: block; animation: hero-wave-shift 8s ease-in-out infinite; } @keyframes hero-wave-shift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2.5%); } } .hero-photons { position: absolute; inset: 0; } .hero-photon { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--color-accent)); opacity: 0.5; box-shadow: 0 0 12px rgba(37, 99, 235, 0.45); animation: hero-float 7s ease-in-out infinite; } .hero-photon:nth-child(1) { left: 12%; top: 28%; animation-delay: 0s; } .hero-photon:nth-child(2) { right: 18%; top: 22%; animation-delay: -2s; background: radial-gradient(circle at 30% 30%, #fff, #6366f1); } .hero-photon:nth-child(3) { left: 22%; bottom: 30%; animation-delay: -4s; width: 4px; height: 4px; opacity: 0.4; } @keyframes hero-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(8px, -14px) scale(1.08); } 66% { transform: translate(-6px, 10px) scale(0.95); } } .hero-atom-wrap { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(320px, 70vw); height: min(320px, 70vw); opacity: 0.22; } .hero-atom { position: relative; width: 100%; height: 100%; } .hero-atom-nucleus { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b); box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); } .hero-orbit { position: absolute; left: 50%; top: 50%; border: 1.5px solid rgba(37, 99, 235, 0.35); border-radius: 50%; transform: translate(-50%, -50%); animation: hero-spin linear infinite; } .hero-orbit--1 { width: 55%; height: 38%; animation-duration: 14s; } .hero-orbit--2 { width: 62%; height: 42%; transform: translate(-50%, -50%) rotate(55deg); animation-duration: 18s; border-color: rgba(99, 102, 241, 0.32); } .hero-orbit--3 { width: 48%; height: 48%; transform: translate(-50%, -50%) rotate(-28deg); animation-duration: 11s; border-color: rgba(14, 165, 233, 0.3); } .hero-electron { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 10px rgba(37, 99, 235, 0.7); } @keyframes hero-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .hero-orbit--2.hero-orbit { animation-name: hero-spin-2; } @keyframes hero-spin-2 { from { transform: translate(-50%, -50%) rotate(55deg) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(55deg) rotate(360deg); } } .hero-orbit--3.hero-orbit { animation-name: hero-spin-3; } @keyframes hero-spin-3 { from { transform: translate(-50%, -50%) rotate(-28deg) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-28deg) rotate(-360deg); } } .hero-caption { margin: 1.25rem 0 0; font-size: 0.8125rem; color: var(--color-muted); letter-spacing: 0.04em; } .hero-auth-hint { margin: 1.5rem 0 0; font-size: 0.875rem; color: var(--color-muted); } .hero-auth-hint a { font-weight: 600; } @media (prefers-reduced-motion: reduce) { .hero-wave svg, .hero-photon, .hero-orbit { animation: none !important; } .hero-orbit--2.hero-orbit { animation: none !important; } .hero-orbit--3.hero-orbit { animation: none !important; } } h1 { margin: 0 0 1rem; font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; } h2 { margin: 0 0 0.75rem; font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 700; } h3 { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; } h4 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; } .lead { margin: 0 0 1.75rem; font-size: 1.0625rem; color: var(--color-muted); } .section-kicker { margin: 0 0 0.35rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-accent); } .section-intro { margin: 0 0 2rem; max-width: min(100%, 72rem); color: var(--color-muted); } .subsection { margin-top: 2.5rem; } .subsection:first-of-type { margin-top: 1.5rem; } /* --- Buttons --- */ .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.25rem; font-family: inherit; font-size: 0.9375rem; font-weight: 600; border-radius: 10px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover { background: var(--color-accent-hover); color: #fff; text-decoration: none; } .btn-ghost { background: transparent; color: var(--color-accent); border-color: var(--color-border); } .btn-ghost:hover { background: var(--color-surface); border-color: var(--color-accent); text-decoration: none; } /* --- Cards --- */ .card-grid { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.35rem 1.5rem; box-shadow: var(--shadow); } .card h3, .card h4, .card .h-card { color: var(--color-text); } .card p { margin: 0; font-size: 0.9375rem; color: var(--color-muted); } .card-compact { padding: 1.15rem 1.35rem; } /* --- GGB 动画页：介绍 + 装饰动效 --- */ .ggb-showcase { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 0 0 0.5rem; align-items: stretch; } @media (min-width: 900px) { .ggb-showcase { grid-template-columns: 1fr 1fr; } } .ggb-intro-card p { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.65; color: var(--color-muted); } .ggb-intro-card p:last-child { margin-bottom: 0; } .ggb-intro-card code { font-size: 0.8125rem; padding: 0.1rem 0.35rem; background: rgba(37, 99, 235, 0.08); border-radius: 4px; } .ggb-motion-panel { border-radius: var(--radius); border: 1px solid var(--color-border); background: linear-gradient( 165deg, #eef4ff 0%, #f0f9ff 45%, #ecfdf5 100% ); box-shadow: var(--shadow-md); padding: 1rem 1.15rem 1.25rem; display: flex; flex-direction: column; min-height: 220px; } .ggb-motion-caption { margin: 0 0 0.65rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); } .ggb-motion-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 160px; } .ggb-motion-wave { width: 100%; max-width: 320px; height: auto; display: block; } .ggb-motion-pendulum { position: relative; width: 4px; height: min(100px, 14vw); margin-top: 0.25rem; transform-origin: top center; animation: ggb-pendulum-swing 2.8s ease-in-out infinite; } .ggb-motion-pendulum__rod { position: absolute; left: 50%; top: 0; width: 3px; height: 100%; margin-left: -1.5px; border-radius: 2px; background: linear-gradient( 180deg, rgba(37, 99, 235, 0.5), rgba(37, 99, 235, 0.15) ); } .ggb-motion-pendulum__bob { position: absolute; left: 50%; bottom: 0; width: 26px; height: 26px; margin-left: -13px; margin-bottom: -13px; border-radius: 50%; background: radial-gradient(circle at 32% 32%, #fff, var(--color-accent)); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); } @keyframes ggb-pendulum-swing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } } @media (prefers-reduced-motion: reduce) { .ggb-motion-pendulum { animation: none !important; } .ggb-motion-wave circle { display: none; } } /* --- GGB placeholder（备用） --- */ .ggb-placeholder { aspect-ratio: 16 / 9; max-width: 960px; margin: 0 auto 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(145deg, #e8edf5 0%, #dce4f0 100%); border: 2px dashed var(--color-border); border-radius: var(--radius); color: var(--color-muted); text-align: center; padding: 1.5rem; } .ggb-placeholder p { margin: 0; font-weight: 500; color: var(--color-text); } .ggb-hint { font-size: 0.8125rem; opacity: 0.85; } .video-demo-grid { margin-top: 0.5rem; /* 避免 card-grid 的 auto-fit 在宽屏下挤出「第三列」空栏，看起来像三个分区 */ grid-template-columns: 1fr; } @media (min-width: 720px) { .video-demo-grid { grid-template-columns: 1fr 1fr; } } .link-list { margin: 0; padding-left: 1.25rem; color: var(--color-muted); } .link-list li { margin-bottom: 0.35rem; } /* --- Footer --- */ .site-footer { flex-shrink: 0; border-top: 1px solid var(--color-border); background: var(--color-surface); padding: 1.5rem 0; margin-top: auto; } .footer-inner { text-align: center; } .footer-inner p { margin: 0; font-size: 0.875rem; color: var(--color-muted); } .footer-site { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.35rem; max-width: 36rem; margin-inline: auto; } .footer-site-brand { width: 100%; } .footer-site-copy { margin: 0 0 0.35rem !important; font-size: 0.9375rem !important; color: var(--color-text) !important; } .footer-site-tagline { margin: 0 !important; font-size: 0.8125rem !important; color: var(--color-muted) !important; line-height: 1.5; } .footer-site-extra { margin: 0.35rem 0 0 !important; font-size: 0.75rem !important; color: var(--color-muted) !important; } .footer-beian { width: 100%; margin-top: 0.5rem; text-align: center; font-size: 0.75rem; color: var(--color-muted); } .footer-beian-link { color: inherit; text-decoration: none; } .footer-beian-link:hover, .footer-beian-link:focus-visible { text-decoration: underline; } .footer-beian { line-height: 1.7; } .hero-share { margin: 1rem auto 0; max-width: 36rem; font-size: 0.875rem; line-height: 1.55; color: var(--color-muted); text-align: center; } .hero-share code { font-size: 0.8125rem; padding: 0.1rem 0.35rem; border-radius: 4px; background: rgba(15, 23, 42, 0.06); color: var(--color-accent); } /* --- 共享资源库 --- */ .library-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .library-toolbar .btn { flex-shrink: 0; } .library-status { margin: 0; font-size: 0.875rem; color: var(--color-muted); } .library-status.library-status--error { color: #b45309; } .owner-library-filters { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0 0 0.75rem; } .owner-filter-btn { padding: 0.4rem 0.85rem; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); background: rgba(255, 255, 255, 0.75); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s; } .owner-filter-btn:hover { color: var(--color-accent); border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.06); } .owner-filter-btn.is-active { color: #fff; background: linear-gradient( 135deg, var(--color-accent) 0%, #4f46e5 100% ); border-color: transparent; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3); } .owner-library-filters--narrow .owner-filter-btn:not(.is-active) { display: none; } .owner-main-back-wrap { margin: 0 0 0.5rem; } .owner-main-back-btn { font-size: 0.8125rem; } .owner-library-subfilters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.75rem; margin: 0 0 0.85rem; padding: 0.5rem 0.65rem; border-radius: 10px; border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.65); } .owner-subfilter-group { display: none; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; } .owner-subfilter-group.owner-subfilter-group--active { display: flex; } .owner-subfilter-label { width: 100%; flex-basis: 100%; font-size: 0.7rem; font-weight: 700; text-transform: none; letter-spacing: 0.02em; color: var(--color-muted); } .owner-subfilter-btn { padding: 0.28rem 0.65rem; font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--color-text); background: #fff; border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; transition: color 0.12s, background 0.12s, border-color 0.12s; } .owner-subfilter-btn:hover { border-color: rgba(37, 99, 235, 0.45); color: var(--color-accent); } .owner-subfilter-btn.is-active { color: #fff; background: var(--color-accent); border-color: var(--color-accent); } .owner-toolbar--pending-sub .owner-toolbar-actions { opacity: 0.55; pointer-events: none; } .owner-td-drag--na { width: 2.25rem; padding: 0.35rem !important; background: transparent; } /* --- 资源总览 · 随堂判断（紧凑列表 + 分类标签） --- */ .owner-quiz-topic-bar { position: sticky; top: 0; z-index: 4; padding: 0.45rem 0.5rem 0.55rem; margin: 0; border-bottom: 1px solid var(--color-border); background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); } .owner-quiz-topic-bar-label { display: block; font-size: 0.7rem; font-weight: 700; color: var(--color-muted); letter-spacing: 0.02em; margin-bottom: 0.35rem; } .owner-quiz-topic-chips { display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; align-items: center; } .owner-quiz-chip { padding: 0.28rem 0.65rem; font-family: inherit; font-size: 0.74rem; font-weight: 600; color: var(--color-text); background: #fff; border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.12s, background 0.12s, border-color 0.12s; } .owner-quiz-chip:hover { border-color: rgba(37, 99, 235, 0.45); color: var(--color-accent); } .owner-quiz-chip.is-active { color: #fff; background: var(--color-accent); border-color: var(--color-accent); } .owner-quiz-chip-more { font-size: 0.68rem; color: var(--color-muted); margin-left: 0.15rem; } .owner-quiz-group-row .owner-quiz-group-cell { padding: 0.35rem 0.5rem !important; background: rgba(37, 99, 235, 0.07); border-bottom: 1px solid rgba(37, 99, 235, 0.12); font-size: 0.75rem; font-weight: 600; color: var(--color-text); vertical-align: middle; } .owner-quiz-group-sub { color: var(--color-accent); } .owner-quiz-group-sep { color: var(--color-muted); font-weight: 400; margin: 0 0.15rem; } .owner-quiz-group-count { margin-left: 0.35rem; font-size: 0.68rem; font-weight: 600; color: var(--color-muted); } .owner-resource-table.owner-resource-table--quiz-compact { min-width: 34rem; font-size: 0.75rem; } .owner-resource-table--quiz-compact col.owner-col-quiz-hide { visibility: collapse; width: 0; min-width: 0; } .owner-resource-table--quiz-compact tbody td { padding: 0.38rem 0.35rem !important; vertical-align: middle; } .owner-quiz-td-stem .owner-title-text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; max-width: 16rem; } .owner-quiz-td-sub { max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; } .owner-quiz-td-muted { color: var(--color-muted) !important; } .owner-quiz-ab { display: inline-block; min-width: 1.35rem; text-align: center; font-weight: 700; color: var(--color-accent); } .owner-quiz-td-time { font-size: 0.68rem; color: var(--color-muted); white-space: nowrap; } .owner-quiz-actions .owner-table-actions { display: flex; flex-wrap: nowrap; gap: 0.35rem; justify-content: flex-end; } .owner-quiz-actions .owner-quiz-act { padding: 0.26rem 0.5rem; font-size: 0.74rem; } .owner-sub-pick-hint { width: 100%; flex-basis: 100%; margin: 0 0 0.35rem; padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-accent); line-height: 1.45; } body.owner-quiz-modal-open { overflow: hidden; } .owner-quiz-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; } .owner-quiz-modal[hidden] { display: none !important; } .owner-quiz-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); cursor: pointer; } .owner-quiz-modal-panel { position: relative; z-index: 1; width: min(100%, 26rem); max-height: min(90vh, 32rem); overflow: auto; padding: 1.1rem 1.15rem 1rem; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2); } .owner-quiz-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } .owner-quiz-modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; } .owner-quiz-modal-close { flex-shrink: 0; padding: 0.15rem 0.5rem; font-size: 1.35rem; line-height: 1; } .owner-quiz-modal-topic { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--color-accent); } .owner-quiz-modal-progress { margin: 0 0 0.65rem; font-size: 0.75rem; color: var(--color-muted); } .owner-quiz-modal-stem { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.55; color: var(--color-text); } .owner-quiz-modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.65rem; } .owner-quiz-modal-feedback { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.45; } .owner-quiz-modal-feedback--ok { color: #15803d; } .owner-quiz-modal-feedback--bad { color: #b45309; } .owner-quiz-modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.35rem; border-top: 1px solid var(--color-border); } .owner-quiz-modal-foot--end { justify-content: flex-end; } .quiz-practice-topic-root { margin-top: 1rem; } .quiz-practice-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; } .quiz-practice-topic-card { padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.65rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .quiz-practice-topic-card--sortable { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem 0.85rem; align-items: stretch; cursor: default; } .quiz-practice-topic-card--sortable .quiz-practice-topic-drag-handle { align-self: stretch; min-height: 3rem; } .quiz-practice-topic-card-main { display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; cursor: pointer; } .quiz-practice-topic-card:hover { border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12); } .quiz-practice-topic-card-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--color-text); } .quiz-practice-topic-card-meta { margin: 0; font-size: 0.8125rem; color: var(--color-muted); line-height: 1.45; } .quiz-practice-topic-start { align-self: flex-start; margin-top: 0.15rem; } .quiz-practice-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .quiz-practice-card { padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); } .quiz-practice-meta { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--color-muted); } .quiz-practice-stem { margin: 0 0 0.75rem; font-size: 0.95rem; line-height: 1.55; } .quiz-practice-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .quiz-practice-feedback { margin: 0.65rem 0 0; font-size: 0.875rem; } .quiz-practice-feedback--ok { color: #15803d; } .quiz-practice-feedback--bad { color: #b45309; } .quiz-practice-empty { margin: 0.5rem 0 0; color: var(--color-muted); } .admin-upload-page .quiz-practice-upload-card { margin-top: 0.75rem; padding: 1rem; border-radius: 10px; border: 1px dashed rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.04); } .qp-correct-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; } .qp-correct-label { font-size: 0.875rem; cursor: pointer; } .library-toolbar--owner { flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; } .owner-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-left: auto; } .owner-search-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); } .owner-search-input { width: min(100vw - 8rem, 16rem); padding: 0.4rem 0.65rem; font-family: inherit; font-size: 0.875rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); } .owner-search-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } .owner-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .owner-table-scroll { margin-top: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); } .owner-resource-table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: 0.8125rem; } .owner-resource-table thead th { position: sticky; top: 0; z-index: 1; padding: 0.65rem 0.5rem; text-align: left; font-weight: 600; color: var(--color-text); background: linear-gradient(180deg, #f1f5f9 0%, #e8eef5 100%); border-bottom: 2px solid var(--color-border); white-space: nowrap; } .owner-resource-table tbody tr:nth-child(even) { background: rgba(15, 23, 42, 0.02); } .owner-resource-table tbody tr:hover { background: rgba(37, 99, 235, 0.05); } .owner-resource-table td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--color-border); vertical-align: top; color: var(--color-text); } .owner-th-drag { width: 2.25rem; padding-left: 0.35rem !important; padding-right: 0.35rem !important; } .owner-td-drag { width: 2.25rem; padding: 0.35rem !important; } .owner-td-drag .owner-drag-handle { width: 1.75rem; min-height: 2.25rem; padding: 0.25rem 0.1rem; align-self: center; } .owner-td-title { min-width: 10rem; max-width: 14rem; font-weight: 600; } .owner-title-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .owner-td-cat, .owner-td-sub { white-space: nowrap; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; } .owner-td-kind { white-space: nowrap; max-width: 5rem; } .owner-td-sum { min-width: 12rem; max-width: 22rem; color: var(--color-muted); line-height: 1.45; } .owner-td-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .owner-badge-fig { display: inline-block; margin-right: 0.2rem; padding: 0.08rem 0.35rem; font-size: 0.6875rem; font-weight: 700; color: #6d28d9; background: rgba(124, 58, 237, 0.12); border-radius: 4px; vertical-align: middle; } .owner-td-time { white-space: nowrap; color: var(--color-muted); font-variant-numeric: tabular-nums; } .owner-td-actions { white-space: nowrap; } .owner-table-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .owner-table-actions .btn { padding: 0.3rem 0.55rem; font-size: 0.75rem; } .resource-card-top { display: flex; gap: 0.65rem; align-items: flex-start; } .resource-card-main { flex: 1; min-width: 0; } .resource-card-main h3 { margin-top: 0; } .owner-drag-handle { flex-shrink: 0; width: 1.65rem; padding: 0.4rem 0.2rem; margin: 0; border: none; border-radius: 8px; background: rgba(37, 99, 235, 0.06); color: var(--color-muted); cursor: grab; font-size: 0.75rem; line-height: 1.2; align-self: stretch; min-height: 3rem; } .owner-drag-handle::before { content: "⋮⋮⋮"; display: block; letter-spacing: -0.12em; text-align: center; opacity: 0.85; } .owner-drag-handle:hover { background: rgba(37, 99, 235, 0.12); color: var(--color-accent); } .owner-drag-handle:active { cursor: grabbing; } .owner-sortable-ghost { opacity: 0.42; } .owner-sortable-chosen { box-shadow: 0 0 0 2px var(--color-accent); } .resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .resource-card .resource-meta { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--color-muted); } .resource-card .resource-desc { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--color-muted); } .resource-card .resource-actions { margin-top: 1rem; } .upload-hint { margin: 0 0 1.25rem; font-size: 0.875rem; color: var(--color-muted); max-width: min(100%, 72rem); } .resource-download-block .resource-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .resource-row { padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(246, 248, 251, 0.85); } .resource-row h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; color: var(--color-text); } .resource-row .btn-sm-resource { margin-top: 0.65rem; padding: 0.45rem 1rem; font-size: 0.875rem; } /* --- 登录 / 注册页 --- */ .auth-page { min-height: calc(100vh - var(--header-h) - 5rem); display: grid; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 900px) { .auth-page { grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-h) - 4rem); } } .auth-physics { position: relative; min-height: 220px; background: linear-gradient( 145deg, #e8f0ff 0%, #dbeafe 35%, #e0f2fe 70%, #ecfdf5 100% ); overflow: hidden; } @media (min-width: 900px) { .auth-physics { min-height: auto; } } .auth-physics-pendulum { position: absolute; left: 50%; top: 38%; width: 4px; height: min(38vh, 200px); margin-left: -2px; background: linear-gradient( 180deg, rgba(37, 99, 235, 0.45), rgba(37, 99, 235, 0.12) ); border-radius: 2px; transform-origin: top center; animation: auth-pendulum 2.8s ease-in-out infinite; } .auth-physics-bob { position: absolute; left: 50%; bottom: 0; width: 28px; height: 28px; margin-left: -14px; margin-bottom: -14px; border-radius: 50%; background: radial-gradient(circle at 32% 32%, #fff, var(--color-accent)); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35); } @keyframes auth-pendulum { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } } .auth-physics-field { position: absolute; inset: 0; background-image: repeating-linear-gradient( 90deg, transparent, transparent 23px, rgba(37, 99, 235, 0.06) 23px, rgba(37, 99, 235, 0.06) 24px ); opacity: 0.85; pointer-events: none; } .auth-physics-label { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; font-size: 0.8125rem; color: var(--color-muted); line-height: 1.4; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .auth-card-wrap { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem 3rem; background: var(--color-bg); } .auth-card { width: min(400px, 100%); padding: 2rem 1.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); } .auth-card h1 { margin: 0 0 0.35rem; font-size: 1.5rem; text-align: center; } .auth-card .auth-lead { margin: 0 0 1.5rem; font-size: 0.9375rem; color: var(--color-muted); text-align: center; } .auth-form label { display: block; margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text); } .auth-form .field { margin-bottom: 1rem; } .auth-form fieldset.field--radios { border: none; padding: 0; margin: 0 0 1rem; } .auth-form .field-legend { padding: 0; margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text); } .auth-form .radio-label { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1.25rem; font-weight: 400; cursor: pointer; } .auth-form .radio-label input { width: auto; margin: 0; } .auth-form .input-readonly { background: #f1f5f9; color: var(--color-muted); cursor: default; } .auth-form input, .auth-form select, .auth-form textarea { width: 100%; padding: 0.6rem 0.75rem; font-family: inherit; font-size: 0.9375rem; border: 1px solid var(--color-border); border-radius: 8px; background: #fafbfc; transition: border-color 0.15s, box-shadow 0.15s; } .auth-form textarea { min-height: 4rem; resize: vertical; line-height: 1.5; } .auth-form select { cursor: pointer; color: var(--color-text); } .auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); background: #fff; } .upload-ocr-row .upload-ocr-label { display: block; margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text); } .upload-ocr-hint { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--color-muted); line-height: 1.5; } .upload-field-hint { margin: 0.45rem 0 0; font-size: 0.8125rem; color: var(--color-muted); line-height: 1.5; } .qbank-kw-intro { margin: 0.25rem 0 0.35rem; font-size: 0.8125rem; color: var(--color-muted); line-height: 1.5; } .upload-qbank-kw-filters { margin-bottom: 0.5rem; } .upload-kw-custom-label { display: block; margin: 0.65rem 0 0.35rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text); } .auth-form .qbank-sim-filter-item select { width: 100%; box-sizing: border-box; } .btn-block { width: 100%; margin-top: 0.25rem; } .auth-switch { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--color-muted); text-align: center; } .auth-switch a { font-weight: 600; } @media (prefers-reduced-motion: reduce) { .auth-physics-pendulum { animation: none !important; } } /* --- 顶栏登录态 --- */ .auth-user-pill { display: inline-flex; align-items: center; max-width: 8rem; padding: 0.35rem 0.65rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-text); background: rgba(37, 99, 235, 0.08); border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-logout-btn { border: none; background: none; cursor: pointer; font: inherit; text-decoration: none; color: var(--color-muted); } .auth-logout-btn:hover { color: var(--color-accent); } /* --- 栏目分区资料列表 --- */ .resource-zone-intro { margin: 0 0 0.35rem; font-size: 0.875rem; color: var(--color-muted); max-width: min(100%, 72rem); } .resource-zone { margin-top: 0.75rem; } .resource-zone-status { margin: 0 0 0.5rem; min-height: 1.25rem; max-width: min(100%, 72rem); } .resource-name-list { list-style: none; margin: 0; padding: 0; } .resource-name-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; margin-bottom: 0.45rem; } .file-kind-badge { display: inline-block; flex-shrink: 0; padding: 0.1rem 0.45rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.35; color: var(--color-accent); background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.2); border-radius: 6px; } .resource-card h3 .file-kind-badge { vertical-align: middle; margin-left: 0.15rem; } .resource-name-item a { font-weight: 600; color: var(--color-accent); text-decoration: none; } .resource-name-item a:hover { text-decoration: underline; color: var(--color-accent-hover); } /* --- 物理题库（模拟题 + 分页） --- */ .qbank-sim { max-width: 100%; margin-inline: 0; } .qbank-sim-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.35rem; margin-bottom: 1rem; } .qbank-sim-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; margin-bottom: 1rem; } .qbank-sim-filter-item { display: flex; flex-direction: column; gap: 0.3rem; min-width: 7.5rem; flex: 1 1 calc(33.333% - 1rem); } @media (min-width: 720px) { .qbank-sim-filter-item { flex: 1 1 calc(16.666% - 1rem); min-width: 6.5rem; } } .qbank-sim-filter-item label { font-size: 0.75rem; font-weight: 600; color: var(--color-muted); } .qbank-sim-filter-item select { font: inherit; font-size: 0.875rem; padding: 0.45rem 0.5rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); width: 100%; } .qbank-sim-search-row { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; } .qbank-sim-kw-wrap { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 12rem; } .qbank-sim-kw-wrap label { font-size: 0.8125rem; color: var(--color-muted); white-space: nowrap; } .qbank-sim-kw-wrap input { flex: 1; min-width: 0; font: inherit; padding: 0.5rem 0.65rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); } .qbank-sim-kw-hint { font-size: 0.75rem; color: var(--color-muted); } .qbank-sim-list { display: flex; flex-direction: column; gap: 1rem; } .qbank-sim .q-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow); } .qbank-sim .q-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin-bottom: 0.65rem; } .qbank-sim .q-tag { font-size: 0.6875rem; font-weight: 600; padding: 0.12rem 0.45rem; border-radius: 6px; background: rgba(37, 99, 235, 0.08); color: var(--color-accent); border: 1px solid rgba(37, 99, 235, 0.15); } .qbank-sim .q-stem { margin: 0 0 0.65rem; font-size: 0.9375rem; font-weight: 500; } .qbank-sim .q-stem--pre { white-space: pre-wrap; } .qbank-sim .q-figure { margin: 0 0 0.75rem; max-width: 100%; } /* 上下型：题干在上、配图居中块级在下、选项等再跟随 */ .qbank-sim .q-figure.q-figure--wrap-tb { margin: 0.65rem auto 0.85rem; max-width: 100%; text-align: center; clear: both; } .qbank-sim .q-figure.q-figure--wrap-tb img { display: block; margin-inline: auto; width: auto; max-width: min(100%, 26rem); max-height: clamp(10rem, 32vh, 15rem); height: auto; object-fit: contain; border-radius: 8px; border: 1px solid var(--color-border); } /* 未加修饰类的配图（若有）沿用原规则 */ .qbank-sim .q-figure:not(.q-figure--wrap-tb) img { display: block; width: auto; max-width: min(100%, 34rem); max-height: clamp(9rem, 30vh, 18rem); height: auto; object-fit: contain; border-radius: 8px; border: 1px solid var(--color-border); } .qbank-sim .q-more { margin: 0.5rem 0 0; } .qbank-sim .q-tag-topic { background: rgba(124, 58, 237, 0.08); color: #6d28d9; border-color: rgba(124, 58, 237, 0.2); } .qbank-login-hint { margin: 0 0 1.25rem; padding: 0.85rem 1rem; font-size: 0.9375rem; color: var(--color-text); background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.2); border-radius: var(--radius); max-width: min(100%, 72rem); } .qbank-login-hint a { font-weight: 600; } .qbank-sim .q-options { margin: 0; padding-left: 1.15rem; font-size: 0.875rem; color: var(--color-text); } .qbank-sim .q-options li { margin-bottom: 0.25rem; } .qbank-sim .q-ans-wrap { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px dashed var(--color-border); } .qbank-sim .q-ans-toggle { font-size: 0.875rem; padding: 0.35rem 0.75rem; } .qbank-sim .q-ans-body { margin-top: 0.55rem; } .qbank-sim .q-ans-text { margin: 0; font-size: 0.875rem; color: var(--color-muted); line-height: 1.55; } .qbank-sim .q-ans-text strong { color: var(--color-text); } .qbank-sim .q-ans-none { margin: 0.65rem 0 0; padding-top: 0.55rem; border-top: 1px dashed var(--color-border); font-size: 0.875rem; color: var(--color-muted); font-style: italic; } .qbank-sim-empty { text-align: center; padding: 2rem 1rem; color: var(--color-muted); font-size: 0.9375rem; } .qbank-sim-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: 0.875rem; color: var(--color-muted); } .qbank-sim-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .qbank-sim-pager button { font: inherit; font-size: 0.8125rem; padding: 0.35rem 0.65rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); cursor: pointer; color: var(--color-text); } .qbank-sim-pager button:disabled { opacity: 0.45; cursor: not-allowed; } .qbank-sim-pager button:not(:disabled):hover { border-color: var(--color-accent); color: var(--color-accent); } .qbank-sim .qbank-sim-pages { display: flex; flex-wrap: wrap; gap: 0.25rem; } .qbank-sim .qbank-sim-pages button.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } /* --- 资料预览页 --- */ .resource-view-main { flex: 1; display: flex; flex-direction: column; min-height: 0; } .viewer-toolbar { padding-top: 1.5rem; padding-bottom: 0.75rem; } .viewer-back-link { display: inline-block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--color-muted); text-decoration: none; } .viewer-back-link:hover { color: var(--color-accent); } .viewer-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 1.5rem); } .viewer-subline { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--color-muted); } .viewer-body { flex: 1; display: flex; flex-direction: column; min-height: 0; width: min(var(--content-max), 100% - 2rem); margin: 0 auto; padding: 0 0 1rem; } .viewer-frame { flex: 1; width: 100%; min-height: max(min(75vh, 520px), calc(100vh - var(--header-h) - 14rem)); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } /* PDF.js 画布预览（公式/嵌入字体通常优于部分浏览器内置 PDF 插件） */ .viewer-pdf-shell { flex: 1; min-height: max(min(75vh, 520px), calc(100vh - var(--header-h) - 14rem)); display: flex; flex-direction: column; min-width: 0; padding: 0.75rem 1rem 1.25rem; overflow: hidden; } .viewer-pdf-pages { flex: 1; min-height: 0; overflow: auto; background: #525659; border-radius: var(--radius); border: 1px solid var(--color-border); } .viewer-pdf-pages-inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem; box-sizing: border-box; } .viewer-pdf-page { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: var(--shadow-md); border-radius: 4px; } .viewer-pdf-slot { display: block; } .viewer-pdf-page--placeholder { background: linear-gradient( 90deg, rgba(229, 231, 235, 0.85) 0%, rgba(243, 244, 246, 0.95) 50%, rgba(229, 231, 235, 0.85) 100% ); background-size: 220% 100%; animation: viewerPdfSkeleton 1.2s ease-in-out infinite; } @keyframes viewerPdfSkeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .viewer-pdf-embed-hint { margin: 0.65rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--color-muted); } .section-title-sm { margin: 1.4rem 0 0.45rem; font-size: 1.12rem; font-weight: 700; } .viewer-ggb-mount { flex: 1; width: 100%; min-height: max(min(70vh, 480px), calc(100vh - var(--header-h) - 15rem)); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); overflow: auto; } .viewer-ggb-inner { width: 100%; min-height: 420px; } .viewer-pptx { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); overflow: hidden; font-family: "Noto Sans SC", "Noto Sans", "Noto Sans Math", system-ui, sans-serif; } .viewer-pptx-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--color-border); background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); } .viewer-pptx-toolbar .btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .viewer-pptx-counter { font-size: 0.875rem; font-weight: 600; color: var(--color-muted); min-width: 4.5rem; text-align: center; } .viewer-pptx-canvas-wrap { flex: 1; min-height: min(75vh, 640px); padding: 1rem; overflow: auto; display: flex; align-items: flex-start; justify-content: center; background: var(--color-bg); } .viewer-pptx-canvas { display: block; max-width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow-md); } .viewer-video { width: 100%; max-height: 80vh; border-radius: var(--radius); background: #000; } .viewer-image { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius); } .viewer-q-stem, .viewer-q-figure { margin-bottom: 1rem; } /* 预览页「题目配图」：限制最大尺寸，与上方说明、下方正文比例协调 */ .viewer-q-figure .viewer-image { width: auto; max-width: min(100%, 44rem); max-height: min(65vh, 36rem); height: auto; object-fit: contain; } .viewer-q-stem-body { font-size: 0.9375rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; } .viewer-q-answer { margin-bottom: 1rem; } .viewer-q-answer summary { cursor: pointer; font-weight: 600; font-size: 0.9375rem; } .viewer-q-answer-body { margin-top: 0.65rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-muted); white-space: pre-wrap; word-break: break-word; } .viewer-fallback { padding: 1.5rem; max-width: 36rem; margin: 0 auto; } .viewer-office-fallback { margin-top: 1rem; max-width: 56rem; margin-left: auto; margin-right: auto; } .viewer-office-fallback .viewer-office-iframe { display: block; width: 100%; min-height: 32rem; margin-top: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .viewer-download { margin-top: auto; padding: 2rem 0 3rem; border-top: 1px solid var(--color-border); background: linear-gradient(180deg, var(--color-bg) 0%, #eef2f7 100%); } .viewer-download-inner { text-align: center; } .viewer-download-hint { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--color-muted); } .viewer-dl-btn { padding: 0.75rem 1.75rem; font-size: 1rem; } .viewer-docx-loading { margin: 1rem 0; text-align: center; } .viewer-docx-html { max-width: 100%; padding: 1.25rem 1.5rem 2rem; font-size: 0.9375rem; line-height: 1.7; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; font-family: "Noto Sans SC", "Noto Sans Math", "Segoe UI Symbol", "Cambria Math", system-ui, sans-serif; } .viewer-docx-html .docx-wrapper, .viewer-docx-html .docx { font-family: inherit; } /* MathML：块级公式需 display=block（由 resource-view.js 补属性）；CSS 辅助 Chromium MathML Core */ .viewer-docx-html math { font-family: "Noto Sans Math", "Cambria Math", "STIX Two Math", "Latin Modern Math", serif; math-style: normal; } @supports (display: math) { .viewer-docx-html math[display="block"] { display: block math; margin: 0.5rem 0; } .viewer-docx-html math:not([display="block"]) { display: inline-math; } } .viewer-docx-html .docx span math mi, .viewer-docx-html .docx span math mo, .viewer-docx-html .docx span math mn, .viewer-docx-html .docx span math mrow { white-space: normal; } .viewer-docx-html p { margin: 0 0 0.75rem; } .viewer-docx-html h1, .viewer-docx-html h2, .viewer-docx-html h3 { margin: 1.25rem 0 0.5rem; font-weight: 700; } .viewer-docx-html table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.875rem; } .viewer-docx-html td, .viewer-docx-html th { border: 1px solid var(--color-border); padding: 0.35rem 0.5rem; vertical-align: top; } .viewer-docx-html img { max-width: 100%; height: auto; } .viewer-docx-html ul, .viewer-docx-html ol { margin: 0 0 0.75rem; padding-left: 1.5rem; } .cms-mount { margin-top: 1rem; line-height: 1.65; } /* 网站团队 / 站长随笔：图片适中、块级居中，正文自然在上下环绕 */ .cms-mount img { display: block; width: auto; max-width: min(100%, 26rem); max-height: 15rem; height: auto; object-fit: contain; margin: 1rem auto; border-radius: 8px; border: 1px solid var(--color-border); box-sizing: border-box; } .cms-mount figure { margin: 1rem auto; max-width: min(100%, 26rem); text-align: center; } .cms-mount figure img { margin: 0 auto; } .cms-feed { display: flex; flex-direction: column; gap: 1rem; } .cms-post__meta { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--color-muted); } .cms-post__text { margin: 0 0 0.75rem; white-space: pre-wrap; word-break: break-word; font-size: 0.9375rem; line-height: 1.65; color: var(--color-text); } .cms-post__images { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; width: 100%; align-items: stretch; } .cms-post__image-row { --row-cols: 4; display: grid; grid-template-columns: repeat(var(--row-cols), minmax(0, 1fr)); gap: 0.5rem; width: calc(100% * var(--row-cols) / 4); max-width: 100%; margin-inline: auto; box-sizing: border-box; } .cms-post__images .cms-post__figure { margin: 0; min-width: 0; text-align: center; } .cms-post__images .cms-post__figure img { display: block; width: 100%; height: auto; max-width: none; max-height: min(50vh, 18rem); aspect-ratio: 1; object-fit: cover; margin: 0 auto; border-radius: 8px; border: 1px solid var(--color-border); } .cms-post__figure { margin: 0; text-align: center; } .cms-post__figure img { display: block; margin: 0 auto; max-width: min(100%, 26rem); max-height: 15rem; width: auto; height: auto; object-fit: contain; border-radius: 8px; border: 1px solid var(--color-border); } .cms-legacy { padding: 1.35rem 1.5rem; } .cms-zoomable { cursor: zoom-in; } body.cms-img-lightbox-open { overflow: hidden; } .cms-img-lightbox { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; } .cms-img-lightbox[hidden] { display: none !important; } .cms-img-lightbox-backdrop { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: rgba(15, 23, 42, 0.88); cursor: zoom-out; } .cms-img-lightbox-inner { position: relative; z-index: 1; max-width: min(96vw, 1200px); max-height: 92vh; display: flex; align-items: center; justify-content: center; } .cms-img-lightbox-inner img { display: block; max-width: 96vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow-lg, 0 20px 40px rgba(0, 0, 0, 0.35)); } .cms-img-lightbox-close { position: absolute; top: -2.5rem; right: 0; z-index: 2; font-size: 1.5rem; line-height: 1; padding: 0.25rem 0.6rem; color: #fff; border-color: rgba(255, 255, 255, 0.35); } @media (max-width: 640px) { .cms-img-lightbox-close { top: -2rem; right: -0.25rem; } } .admin-user-actions-cell { white-space: normal; text-align: right; } .admin-user-actions-cell .btn { margin: 0.15rem 0 0.15rem 0.35rem; } .admin-cms-feed-title { margin: 1.5rem 0 0.75rem; font-size: 1rem; font-weight: 600; } .cms-feed-admin { display: flex; flex-direction: column; gap: 0.5rem; } .cms-feed-admin-empty { margin: 0; font-size: 0.875rem; color: var(--color-muted); } .cms-feed-admin-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); } .cms-feed-admin-row-main { flex: 1; min-width: 0; } .cms-feed-admin-row-main time { display: block; font-size: 0.75rem; color: var(--color-muted); margin-bottom: 0.25rem; } .cms-feed-admin-row-main p { margin: 0; font-size: 0.875rem; color: var(--color-text); } .cms-admin-bar { display: none; margin-top: 0.35rem; } html[data-auth="admin"] .cms-admin-bar { display: block; } .admin-stats-summary { margin-bottom: 1.25rem; } .admin-stats-summary p { margin: 0 0 0.5rem; } .admin-stats-h2 { font-size: 1.125rem; margin: 1.25rem 0 0.5rem; font-weight: 600; } .admin-table-wrap { overflow-x: auto; margin-bottom: 1rem; } .admin-stats-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .admin-stats-table th, .admin-stats-table td { border: 1px solid var(--color-border); padding: 0.45rem 0.65rem; text-align: left; vertical-align: top; } .admin-cms-textarea { width: 100%; box-sizing: border-box; min-height: 320px; font-family: inherit; font-size: 0.9375rem; line-height: 1.55; } .admin-cms-page .admin-cms-form.page-single-card { max-width: none; width: 100%; } .admin-upload-page h1 { text-align: center; } .admin-upload-page .upload-hint { max-width: min(48rem, 100%); margin-left: auto; margin-right: auto; text-align: center; } .admin-upload-page .page-single-card { margin-left: auto; margin-right: auto; max-width: min(100%, 44rem); } /* --- 留言板 --- */ .guestbook-toolbar { margin-bottom: 1rem; } .guestbook-toolbar label { display: block; margin-bottom: 0.35rem; font-size: 0.875rem; font-weight: 500; } .guestbook-sort-select { max-width: 16rem; width: 100%; padding: 0.5rem 0.65rem; font-size: 0.9375rem; border: 1px solid var(--color-border); border-radius: 8px; background: #fafbfc; } .guestbook-mod-panel { margin-bottom: 1.25rem; padding: 1.25rem 1.5rem; } .guestbook-mod-panel[hidden] { display: none !important; } .guestbook-mod-title { margin: 0 0 0.35rem; font-size: 1.05rem; } .guestbook-mod-hint { margin: 0 0 0.85rem; font-size: 0.8125rem; color: var(--color-muted); } .guestbook-mod-row { margin-bottom: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); } .guestbook-mod-postref { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--color-muted); } .guestbook-mod-comment { font-size: 0.875rem; line-height: 1.55; word-break: break-word; margin-bottom: 0.5rem; } .guestbook-mod-meta { margin: 0 0 0.65rem; font-size: 0.8125rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; } .guestbook-mod-author { font-weight: 600; color: var(--color-text); padding: 0.2rem 0.5rem; background: rgba(15, 23, 42, 0.045); border: 1px solid var(--color-border); border-radius: 6px; } .guestbook-mod-sep { color: var(--color-muted); opacity: 0.65; user-select: none; } .guestbook-mod-time { font-weight: 400; color: var(--color-muted); font-variant-numeric: tabular-nums; } .guestbook-mod-row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .guestbook-mod-empty { margin: 0; font-size: 0.875rem; color: var(--color-muted); } .guestbook-page #guestbook-msg.library-status { white-space: pre-line; } .guestbook-compose { margin-bottom: 1.25rem; padding: 1.25rem 1.5rem; } .guestbook-compose-label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.9375rem; } .guestbook-textarea { width: 100%; box-sizing: border-box; margin-bottom: 0.75rem; padding: 0.65rem 0.85rem; border: 1px solid var(--color-border); border-radius: 8px; font-family: inherit; font-size: 0.9375rem; line-height: 1.55; min-height: 6.5rem; resize: vertical; background: #fafbfc; } .guestbook-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); background: #fff; } .guestbook-mount { display: flex; flex-direction: column; gap: 1rem; } .guestbook-post-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.65rem; } .guestbook-post-meta-stack { flex: 1; min-width: 0; } .guestbook-post-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.65rem; padding: 0.45rem 0.7rem; background: rgba(15, 23, 42, 0.045); border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.875rem; line-height: 1.45; } .guestbook-post-who-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; min-width: 0; flex: 1 1 auto; } .guestbook-post-when { margin: 0; padding: 0; flex: 0 0 auto; margin-left: auto; text-align: right; font-size: 0.8125rem; color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .guestbook-post-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .guestbook-author { font-weight: 600; color: var(--color-text); } .guestbook-badge { font-size: 0.75rem; padding: 0.12rem 0.45rem; border-radius: 4px; background: #f1f5f9; color: var(--color-muted); } .guestbook-badge--user { background: rgba(37, 99, 235, 0.12); color: var(--color-accent); } .guestbook-badge--pin { background: rgba(234, 179, 8, 0.2); color: #a16207; } .guestbook-badge--pending { background: rgba(220, 38, 38, 0.12); color: #b91c1c; } .guestbook-mod-subtitle { margin: 0.85rem 0 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--color-text); } .guestbook-mod-subtitle:first-child { margin-top: 0; } .guestbook-comment-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.35rem 0.75rem; margin-bottom: 0.4rem; } .guestbook-comment-meta-stack { flex: 1; min-width: 0; } .guestbook-comment-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.65rem; padding: 0.35rem 0.55rem; background: rgba(15, 23, 42, 0.045); border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.8125rem; line-height: 1.45; } .guestbook-comment-who-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; min-width: 0; flex: 1 1 auto; } .guestbook-comment-when { margin: 0; padding: 0; flex: 0 0 auto; margin-left: auto; text-align: right; font-size: 0.75rem; color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .guestbook-comment-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; } .guestbook-comment-like { font-size: 0.8125rem; padding: 0.2rem 0.45rem; } .guestbook-comment-like.is-liked { color: var(--color-accent); font-weight: 600; } .guestbook-comment-pin { font-size: 0.8125rem; padding: 0.2rem 0.45rem; } .guestbook-post-body { white-space: normal; word-break: break-word; line-height: 1.65; margin-top: 0.5rem; margin-bottom: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); font-size: 0.9375rem; color: var(--color-text); text-indent: 2em; } .guestbook-comments-block { margin-bottom: 0.75rem; } .guestbook-toggle-commentslist { font-size: 0.8125rem; padding: 0.25rem 0.5rem; margin: 0 0 0.4rem; } .guestbook-comments-panel { border-top: 1px solid var(--color-border); padding-top: 0.65rem; } .guestbook-comments-block.is-comments-collapsed .guestbook-comments-panel { display: none; } .guestbook-comments { list-style: none; margin: 0 0 0.5rem; padding: 0; } .guestbook-comments--empty { margin: 0; padding: 0; border: none; } .guestbook-comment { margin: 0 0 0.65rem; padding-left: 0.75rem; border-left: 3px solid rgba(37, 99, 235, 0.2); } .guestbook-comment-body { margin: 0.5rem 0 0; padding: 0.55rem 0.7rem; font-size: 0.875rem; line-height: 1.55; color: var(--color-text); background: rgba(248, 250, 252, 0.95); border: 1px solid var(--color-border); border-radius: 8px; text-indent: 2em; } .guestbook-comment-body--collapsible { text-indent: 0; } .guestbook-comment-body--collapsible.is-collapsed .guestbook-comment-body-inner { max-height: 4.35rem; overflow: hidden; } .guestbook-comment-body-inner { font-size: 0.875rem; line-height: 1.55; word-break: break-word; color: var(--color-text); text-indent: 2em; } .guestbook-toggle-comment { margin-top: 0.35rem; font-size: 0.8125rem; padding: 0.2rem 0.45rem; } .guestbook-reply { margin-top: 0.35rem; } .guestbook-reply-label { display: block; margin-bottom: 0.35rem; font-size: 0.8125rem; font-weight: 500; } .guestbook-reply-text { width: 100%; box-sizing: border-box; margin-bottom: 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid var(--color-border); border-radius: 8px; font-family: inherit; font-size: 0.875rem; resize: vertical; background: #fafbfc; } .guestbook-like.is-liked { color: var(--color-accent); font-weight: 600; } .guestbook-delete { display: none; } html[data-auth="admin"] .guestbook-delete { display: inline-flex; } .guestbook-empty { text-align: center; color: var(--color-muted); padding: 2rem 1rem; margin: 0; }