@property --bg { syntax: '<color>'; inherits: true; initial-value: #eef3fb; }
@property --bg-2 { syntax: '<color>'; inherits: true; initial-value: #f8fbff; }
@property --primary { syntax: '<color>'; inherits: true; initial-value: #5668ff; }
@property --primary-2 { syntax: '<color>'; inherits: true; initial-value: #7a8cff; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #67d9ff; }

:root {
  --bg: #eef3fb;
  --bg-2: #f8fbff;
  --surface: rgba(255,255,255,.72);
  --surface-strong: rgba(255,255,255,.90);
  --surface-solid: #ffffff;
  --surface-soft: rgba(255,255,255,.62);
  --text: #172033;
  --muted: #6f7b93;
  --line: rgba(100,114,143,.15);
  --line-strong: rgba(100,114,143,.24);
  --primary: #5668ff;
  --primary-2: #7a8cff;
  --accent: #67d9ff;
  --success: #1cc986;
  --danger: #f25b7a;
  --shadow: 0 32px 80px rgba(88,102,167,.18), 0 10px 24px rgba(76,89,142,.12);
  --shadow-soft: 0 18px 50px rgba(88,102,167,.12), 0 8px 20px rgba(76,89,142,.08);
  --radius: 32px;
  --radius-md: 24px;
  --radius-sm: 18px;
  --topbar-h: 78px;
  --blur: blur(22px);
  transition: --bg .68s cubic-bezier(.16,1,.3,1), --bg-2 .68s cubic-bezier(.16,1,.3,1), --primary .68s cubic-bezier(.16,1,.3,1), --primary-2 .68s cubic-bezier(.16,1,.3,1), --accent .68s cubic-bezier(.16,1,.3,1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

:root[data-theme-preset="sakura"] { --primary:#ff6aa9; --primary-2:#ff9ac8; --accent:#ffd0e4; --bg:#fff0f7; --bg-2:#fffafd; }
:root[data-theme-preset="matcha"] { --primary:#2fb879; --primary-2:#72d98c; --accent:#b8f7ce; --bg:#f1fbf3; --bg-2:#fbfff8; }
:root[data-theme-preset="sunset"] { --primary:#ff7a43; --primary-2:#ffb15f; --accent:#ffe0a3; --bg:#fff4ea; --bg-2:#fffaf5; }
:root[data-theme-preset="aurora"] { --primary:#8b5cf6; --primary-2:#5eead4; --accent:#b9f6ff; --bg:#f4f2ff; --bg-2:#fbfbff; }
:root.dark, :root[data-theme-preset="night"] {
  --bg:#0c1324; --bg-2:#111a2f; --surface:rgba(20,29,48,.74); --surface-strong:rgba(17,25,42,.90); --surface-solid:#121a2d; --surface-soft:rgba(18,25,41,.62);
  --text:#edf3ff; --muted:#9aa9c3; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --primary:#38bdf8; --primary-2:#818cf8; --accent:#22d3ee;
  --shadow:0 28px 80px rgba(0,0,0,.36),0 10px 24px rgba(0,0,0,.18); --shadow-soft:0 18px 50px rgba(0,0,0,.24),0 8px 20px rgba(0,0,0,.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; color:var(--text); background: radial-gradient(circle at 6% 8%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 24%), radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 24%), linear-gradient(180deg,var(--bg-2),var(--bg)); background-size: 120% 120%, 120% 120%, 100% 160%; background-position: 6% 8%, 92% 22%, 50% 0%; transition: color .28s ease; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.muted { color:var(--muted); }

.scroll-progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:100; background:linear-gradient(90deg,var(--primary),var(--accent)); transform-origin:left center; transition:width .08s linear; }
.bg-orb { position:fixed; border-radius:999px; filter:blur(10px); opacity:.24; pointer-events:none; z-index:-2; animation:floatOrb 10s ease-in-out infinite alternate; }
.orb-a { width:380px; height:380px; left:-120px; top:120px; background:var(--primary); }
.orb-b { width:450px; height:450px; right:-170px; top:390px; background:var(--accent); animation-delay:1.2s; }
.orb-c { width:280px; height:280px; left:46%; bottom:30px; background:var(--primary); opacity:.08; animation-delay:.5s; }
@keyframes floatOrb { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(0,-18px,0) scale(1.04); } }
.mouse-aura { position:fixed; left:0; top:0; width:360px; height:360px; border-radius:50%; pointer-events:none; z-index:-1; opacity:0; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--primary) 9%, transparent) 42%, transparent 70%); filter:blur(4px); transform:translate3d(-50%,-50%,0) scale(.85); transition:opacity .35s ease, transform .18s linear; }
body.motion-ready .mouse-aura { opacity:1; }

.quick-island { position:fixed; top:12px; left:50%; transform:translate(-50%,-145%) scale(.94); z-index:90; min-width:168px; max-width:min(420px,calc(100% - 32px)); height:42px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; background:color-mix(in srgb,var(--surface-strong) 88%,transparent); border:1px solid var(--line); box-shadow:var(--shadow-soft); backdrop-filter:blur(24px); opacity:0; transition:transform .55s cubic-bezier(.18,1.25,.28,1), opacity .45s ease; }
.quick-island.show { opacity:1; transform:translate(-50%,0) scale(1); }
.island-pulse { width:8px; height:8px; border-radius:50%; background:var(--success); animation:islandPulse 1.8s ease-out infinite; }
@keyframes islandPulse { 0% { box-shadow:0 0 0 0 rgba(28,201,134,.45); } 70% { box-shadow:0 0 0 10px rgba(28,201,134,0); } 100% { box-shadow:0 0 0 0 rgba(28,201,134,0); } }

.topbar { position:sticky; top:0; z-index:50; height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 clamp(16px,3vw,40px); border-bottom:1px solid var(--line); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.glass-nav { background:color-mix(in srgb,var(--surface-strong) 86%,transparent); box-shadow:0 8px 26px rgba(0,0,0,.04); }
.brand { display:inline-flex; align-items:center; gap:12px; min-width:0; font-weight:800; letter-spacing:.01em; }
.brand-logo-wrap { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:14px; overflow:hidden; }
.brand-logo-img { width:100%; height:100%; object-fit:cover; display:block; border-radius:14px; box-shadow:var(--shadow-soft); }
.brand-mark { width:38px; height:38px; border-radius:14px; background:linear-gradient(145deg,var(--primary),var(--accent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 24px color-mix(in srgb,var(--primary) 24%,transparent); position:relative; }
.brand-mark::after { content:""; position:absolute; inset:8px; border:2px solid rgba(255,255,255,.72); border-radius:10px; }
.nav { display:inline-flex; align-items:center; gap:8px; position:relative; }
.nav-pill { padding:6px; border-radius:999px; background:color-mix(in srgb,var(--surface-soft) 90%,transparent); border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.nav a,.icon-btn,.ghost,.small-btn,.row-actions button { border:1px solid transparent; background:transparent; color:var(--muted); border-radius:999px; padding:10px 14px; transition:.22s ease; }
.nav a:hover,.icon-btn:hover,.ghost:hover,.small-btn:hover,.row-actions button:hover { color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,transparent); border-color:color-mix(in srgb,var(--primary) 16%,transparent); transform:translateY(-1px); }
.icon-btn { min-width:44px; }
.theme-menu { position:absolute; right:0; top:calc(100% + 12px); z-index:60; min-width:190px; padding:10px; display:grid; gap:6px; border-radius:22px; background:var(--surface-strong); border:1px solid var(--line); box-shadow:var(--shadow-soft); backdrop-filter:var(--blur); }
.theme-menu button { display:flex; align-items:center; gap:10px; padding:10px 12px; border:0; border-radius:14px; background:transparent; color:var(--text); text-align:left; }
.theme-menu button:hover,.theme-menu button.active { background:color-mix(in srgb,var(--primary) 10%,transparent); }
.theme-swatch { width:16px; height:16px; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 3px color-mix(in srgb,var(--swatch) 18%,transparent); }

.card,.card-lite { border:1px solid var(--line); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.card { position:relative; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft); }
.card-lite { background:color-mix(in srgb,var(--surface-strong) 92%,transparent); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); }

.hero { width:min(1250px,calc(100% - 24px)); margin:18px auto 0; position:relative; overflow:hidden; }
.hero-hyper { min-height:600px; border-radius:42px; padding:clamp(34px,5vw,58px); background:linear-gradient(130deg,color-mix(in srgb,var(--primary) 88%,#fff 8%),color-mix(in srgb,var(--accent) 75%,#fff 10%)), radial-gradient(circle at 78% 20%,rgba(255,255,255,.25),transparent 30%); box-shadow:var(--shadow); transform-style:preserve-3d; perspective:1200px; --mx:0; --my:0; }
.hero-tilt-card { --tilt-perspective:1200px; --tilt-scale:1; transform-origin:center; transition:transform .42s cubic-bezier(.18,.9,.22,1), box-shadow .42s ease; }
.hero-tilt-card:hover { --tilt-scale:1.006; box-shadow:0 46px 110px color-mix(in srgb,var(--primary) 24%,transparent),0 16px 36px rgba(76,89,142,.16); }
.hero-noise { position:absolute; inset:0; opacity:.08; background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px); background-size:20px 20px; pointer-events:none; }
.hero-glow { position:absolute; border-radius:999px; filter:blur(18px); opacity:.35; pointer-events:none; transition:transform .18s linear; }
.hero-glow-a { width:260px; height:260px; left:10%; top:12%; background:rgba(255,255,255,.3); transform:translate(calc(var(--mx) * 12px),calc(var(--my) * 12px)); }
.hero-glow-b { width:340px; height:340px; right:-4%; bottom:-8%; background:rgba(255,255,255,.22); transform:translate(calc(var(--mx) * -18px),calc(var(--my) * -18px)); }
.hero-grid { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:clamp(24px,5vw,64px); align-items:center; min-height:485px; }
.hero-copy { text-align:left; }
.hero-chip-row { display:flex; justify-content:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.hero-chip { display:inline-flex; padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.96); backdrop-filter:blur(16px); }
.eyebrow { margin:0; text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; opacity:.9; }
.hero h1 { margin:16px 0 18px; font-size:clamp(2.2rem,5vw,5rem); line-height:1.02; color:#fff; letter-spacing:-.055em; text-shadow:0 20px 45px rgba(42,55,130,.2); }
.hero p { max-width:740px; margin:0 0 0; color:rgba(255,255,255,.93); font-size:clamp(1rem,2vw,1.18rem); }
.searchbar { display:flex; align-items:center; gap:10px; width:min(680px,100%); margin:28px 0 0; padding:8px; border-radius:999px; }
.glass-input { background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.45); box-shadow:0 18px 36px rgba(40,53,125,.18); backdrop-filter:blur(20px); }
.searchbar input { flex:1; border:0; outline:0; background:transparent; color:#172033; padding:12px 16px; }
.searchbar button,.primary { border:0; border-radius:999px; color:#fff; padding:12px 18px; background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 12px 24px color-mix(in srgb,var(--primary) 28%,transparent); transition:transform .2s ease, box-shadow .2s ease; }
.searchbar button:hover,.primary:hover { transform:translateY(-1px); box-shadow:0 16px 28px color-mix(in srgb,var(--primary) 32%,transparent); }
.hero-stage { position:relative; min-height:440px; transform-style:preserve-3d; transform:rotateX(calc(var(--my,0) * -6deg)) rotateY(calc(var(--mx,0) * 7deg)); transition:transform .18s ease-out; }
.stage-orbit { position:absolute; inset:42px; border-radius:50%; border:1px solid rgba(255,255,255,.22); transform:rotateX(68deg) rotateZ(12deg); animation:orbitSpin 16s linear infinite; }
.orbit-two { inset:74px 18px; opacity:.55; animation-duration:22s; animation-direction:reverse; }
@keyframes orbitSpin { to { transform:rotateX(68deg) rotateZ(372deg); } }
.floating-device { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateZ(80px); animation:deviceFloat 4.8s ease-in-out infinite alternate; }
@keyframes deviceFloat { from { transform:translate(-50%,-50%) translateZ(80px) translateY(8px); } to { transform:translate(-50%,-50%) translateZ(80px) translateY(-14px); } }
.phone-shell { width:min(260px,58vw); aspect-ratio:9/16; border-radius:42px; padding:14px; background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.16)); border:1px solid rgba(255,255,255,.35); box-shadow:0 30px 70px rgba(30,48,120,.26),inset 0 1px 0 rgba(255,255,255,.55); backdrop-filter:blur(24px); }
.phone-island { width:76px; height:22px; margin:2px auto 12px; border-radius:999px; background:rgba(18,31,65,.88); }
.phone-screen { height:calc(100% - 36px); border-radius:32px; padding:18px; overflow:hidden; background:radial-gradient(circle at 18% 10%,rgba(255,255,255,.95),transparent 16%),linear-gradient(160deg,rgba(255,255,255,.86),rgba(215,239,255,.46)); }
.phone-card { height:64px; border-radius:22px; margin-top:14px; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:0 16px 26px color-mix(in srgb,var(--primary) 18%,transparent); animation:screenBreath 2.8s ease-in-out infinite alternate; }
.phone-card.big { height:118px; margin-top:0; }
.phone-card.small { width:72%; }
.phone-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.phone-row span { height:56px; border-radius:20px; background:rgba(255,255,255,.72); box-shadow:0 10px 22px color-mix(in srgb,var(--primary) 12%,transparent); }
@keyframes screenBreath { from { filter:saturate(1); transform:translateY(0); } to { filter:saturate(1.18); transform:translateY(-3px); } }
.floating-panel { position:absolute; min-width:150px; color:white; transform:translateZ(120px); animation:panelFloat 4.4s ease-in-out infinite alternate; pointer-events:auto; }
.floating-panel-card { display:block; position:relative; min-width:158px; padding:16px 18px; border-radius:26px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.24); box-shadow:0 20px 50px rgba(36,55,125,.18); backdrop-filter:blur(22px); }
.floating-panel small { display:block; opacity:.78; margin-bottom:4px; }
.floating-panel b { font-size:1.04rem; display:block; }
.card-icon { display:block; font-size:1.2rem; margin-bottom:6px; }
.panel-dynamic-0 { left:5%; top:20%; animation-delay:.2s; }
.panel-dynamic-1 { right:3%; top:38%; animation-delay:.7s; }
.panel-dynamic-2 { left:12%; bottom:12%; animation-delay:1.1s; }
.panel-dynamic-3 { right:14%; bottom:10%; animation-delay:1.5s; }
@keyframes panelFloat { from { transform:translateZ(120px) translateY(8px); } to { transform:translateZ(120px) translateY(-10px); } }
.motion-marquee { position:absolute; left:0; right:0; bottom:16px; z-index:2; display:flex; gap:36px; white-space:nowrap; overflow:hidden; opacity:.18; color:white; font-weight:900; letter-spacing:.18em; font-size:clamp(1.8rem,5vw,4.8rem); pointer-events:none; }
.motion-marquee span { animation:marqueeFlow 22s linear infinite; }
@keyframes marqueeFlow { from { transform:translateX(0); } to { transform:translateX(-100%); } }

.layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:24px; width:min(1250px,calc(100% - 24px)); margin:24px auto 48px; align-items:start; }
.sidebar { position:sticky; top:calc(var(--topbar-h) + 16px); display:grid; gap:18px; }
.profile-card { padding:28px 22px; text-align:center; }
.avatar { width:98px; height:98px; margin:0 auto 16px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); background-size:cover; background-position:center; border:6px solid rgba(255,255,255,.35); box-shadow:var(--shadow-soft); }
.profile-card h2 { margin:6px 0 8px; font-size:1.18rem; }
.profile-card p { margin:0 0 18px; color:var(--muted); line-height:1.76; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.stats-soft a { padding:12px 10px; border-radius:18px; background:color-mix(in srgb,var(--surface-strong) 90%,transparent); border:1px solid var(--line); }
.stats a { display:grid; gap:4px; color:var(--muted); }
.stats b { color:var(--text); font-size:1.2rem; }
.side-card { padding:22px; }
.section-title-wrap { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.section-title-wrap h3 { margin:0; }
.section-dot { width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); }
.chip-list { display:flex; flex-wrap:wrap; gap:10px; }
.chip,.tag { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface-strong) 88%,transparent); color:var(--muted); font-size:.88rem; transition:.22s ease; }
.chip:hover,.tag:hover { color:var(--primary); border-color:color-mix(in srgb,var(--primary) 24%,transparent); transform:translateY(-1px); }
.content { display:grid; gap:20px; }
.list-title { margin:6px 0 2px; font-size:1.55rem; }
.article-card { overflow:hidden; transition:transform .22s ease, box-shadow .22s ease; }
.article-card:hover { box-shadow:var(--shadow); }
.article-cover { width:100%; height:250px; object-fit:cover; display:block; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,transparent),color-mix(in srgb,var(--accent) 16%,transparent)); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.article-card:hover img { transform:scale(1.045); }
.article-body { padding:24px; }
.article-body h2 { margin:0 0 10px; font-size:clamp(1.35rem,3vw,1.95rem); }
.article-meta { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; color:var(--muted); font-size:.92rem; margin-bottom:14px; }
.article-excerpt { margin:0 0 16px; color:var(--muted); line-height:1.82; }
.article-tags { display:flex; flex-wrap:wrap; gap:8px; }
.empty { padding:36px; text-align:center; color:var(--muted); }
.post-full { overflow:hidden; }
.post-hero { padding:34px 34px 20px; text-align:center; }
.post-full .article-cover { height:340px; }
.post-content { padding:6px 34px 34px; line-height:1.92; font-size:1.02rem; }
.post-content h1,.post-content h2,.post-content h3 { line-height:1.34; margin-top:1.7em; }
.post-content p { margin:1em 0; }
.post-content blockquote { margin:1.2rem 0; padding:1rem 1.2rem; border-left:4px solid var(--primary); border-radius:16px; background:color-mix(in srgb,var(--primary) 8%,transparent); color:var(--muted); }
.post-content pre,.markdown-preview pre { overflow:auto; padding:1rem; border-radius:18px; background:#111827; color:#e5e7eb; }
.post-content code:not(pre code) { padding:.15rem .36rem; border-radius:8px; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); }
.post-content img { max-width:100%; border-radius:18px; }
.post-bottom { padding:0 34px 34px; }
.toc,.comments { padding:24px; }
.comment { border-top:1px solid var(--line); padding:15px 0; }
.comment:first-of-type { border-top:0; }
.comment p { white-space:pre-wrap; color:var(--muted); line-height:1.74; }
.archive-grid { display:grid; gap:14px; }
.archive-row { padding:18px 22px; display:flex; justify-content:space-between; gap:18px; align-items:center; }
.archive-row small { color:var(--muted); }
.footer { width:min(1250px,calc(100% - 24px)); margin:0 auto 26px; padding:20px; text-align:center; color:var(--muted); }
.float-btn { position:fixed; right:24px; bottom:24px; width:50px; height:50px; border:0; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:var(--shadow); opacity:0; transform:translateY(12px); transition:.22s ease; z-index:40; }
.float-btn.show { opacity:1; transform:translateY(0); }

.feature-grid-wrap { width:min(1250px,calc(100% - 24px)); margin:24px auto; }
.feature-grid-head { margin:0 0 14px; }
.feature-grid-head h2 { margin:8px 0; font-size:clamp(1.5rem,3vw,2.1rem); }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-card { padding:22px; min-height:190px; display:block; }
.feature-icon { font-size:1.6rem; display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center; border-radius:18px; background:color-mix(in srgb,var(--primary) 10%,transparent); margin-bottom:14px; }
.feature-card small { color:var(--primary); font-weight:700; }
.feature-card h3 { margin:8px 0; }
.feature-card p { color:var(--muted); line-height:1.7; margin:0; }

.tilt-card { --rx:0deg; --ry:0deg; --tx:0px; --ty:0px; --shine-x:50%; --shine-y:50%; transform:perspective(var(--tilt-perspective,900px)) translate3d(var(--tx),var(--ty),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--tilt-scale,1)); transform-style:preserve-3d; transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease; }
.tilt-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255,255,255,.42), transparent 34%); transition:opacity .25s ease; }
.tilt-card:hover::after { opacity:1; }
.route-out { animation:routeOut .18s ease forwards; }
.route-in { animation:routeIn .5s cubic-bezier(.18,1,.28,1) both; }
@keyframes routeOut { to { opacity:0; transform:translateY(10px) scale(.99); filter:blur(4px); } }
@keyframes routeIn { from { opacity:0; transform:translateY(22px) scale(.99); filter:blur(8px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
.reveal-up { opacity:1; transform:translateY(0) scale(1); filter:blur(0); animation:revealLoad .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes revealLoad { from { opacity:0; transform:translateY(28px) scale(.98); filter:blur(8px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
.delay-1 { animation-delay:.08s; } .delay-2 { animation-delay:.16s; } .delay-3 { animation-delay:.24s; } .delay-4 { animation-delay:.32s; }

.form-grid { display:grid; gap:14px; }
.form-grid label { display:grid; gap:7px; color:var(--muted); font-size:.94rem; }
input,textarea,select { width:100%; border:1px solid var(--line); border-radius:18px; padding:12px 14px; color:var(--text); outline:0; background:color-mix(in srgb,var(--surface-strong) 90%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.30); }
textarea { resize:vertical; }
input:focus,textarea:focus,select:focus { border-color:color-mix(in srgb,var(--primary) 45%,transparent); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.message { min-height:22px; color:var(--primary); }
.upload-box { border:1px dashed var(--line-strong); border-radius:22px; padding:16px; background:color-mix(in srgb,var(--primary) 4%,transparent); }
.upload-box b { display:block; margin-bottom:4px; }
.upload-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.upload-row input[type="file"] { flex:1; min-width:220px; }
.full-line { grid-column:1 / -1; }

/* Admin layout: no overlap, no sticky collision */
.admin-body { min-height:100vh; }
.admin-shell { width:min(1360px,calc(100% - 24px)); margin:22px auto 56px; display:block; }
.admin-login-wrap { min-height:calc(100vh - var(--topbar-h) - 90px); display:grid; place-items:center; }
.admin-login-card { width:min(540px,100%); padding:34px; }
.login-badge { display:inline-flex; margin-bottom:16px; padding:10px 14px; border-radius:999px; background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--primary); border:1px solid color-mix(in srgb,var(--primary) 14%,transparent); }
#adminPanel { display:grid; gap:22px; }
#adminPanel.hidden { display:none !important; }
.admin-overview { padding:28px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:22px; align-items:center; }
.admin-overview h1 { margin:10px 0; font-size:clamp(1.8rem,4vw,3rem); }
.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.summary-card { padding:18px; }
.summary-card small { display:block; color:var(--muted); margin-bottom:8px; }
.summary-card b { font-size:2rem; line-height:1; }
.admin-grid { display:grid; grid-template-columns:minmax(420px,.95fr) minmax(520px,1.05fr); gap:22px; align-items:start; }
.admin-card { padding:24px; }
.admin-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:18px; }
.admin-head h2,.editor-header h2 { margin:0; }
.admin-list { display:grid; gap:12px; }
.admin-post-row { border:1px solid var(--line); border-radius:22px; padding:16px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; background:color-mix(in srgb,var(--surface-strong) 92%,transparent); }
.admin-post-row h3 { margin:0 0 6px; }
.row-actions { display:flex; gap:8px; flex-wrap:wrap; }
.row-actions button:disabled { opacity:.45; cursor:not-allowed; }
.danger:hover { color:var(--danger) !important; border-color:color-mix(in srgb,var(--danger) 28%,transparent) !important; background:color-mix(in srgb,var(--danger) 8%,transparent) !important; }
.editor-card { position:static; top:auto; }
.editor-header { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:18px; }
.editor-hint { color:var(--muted); font-size:.88rem; padding:8px 12px; border-radius:999px; background:color-mix(in srgb,var(--primary) 8%,transparent); border:1px solid color-mix(in srgb,var(--primary) 14%,transparent); }
.editor-preview { padding:14px; border-radius:24px; }
.editor-preview-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }
.editor-preview-head p { margin:4px 0 0; }
.markdown-preview { min-height:160px; max-height:420px; overflow:auto; padding:16px; border-radius:20px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface-strong) 88%,transparent); line-height:1.8; }
.markdown-preview img { max-width:100%; border-radius:16px; }
.settings-card { grid-column:1 / -1; }
.settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.settings-grid > .settings-module,
.settings-grid > .upload-box,
.settings-grid > label:nth-child(3),
.settings-grid > label:has(textarea),
.settings-grid > button { grid-column:1 / -1; }
.settings-module { padding:18px; border:1px solid var(--line); border-radius:26px; background:color-mix(in srgb,var(--surface-strong) 60%,transparent); }
.module-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:14px; }
.module-head h3 { margin:0 0 6px; }
.module-head p { margin:0; }
.theme-preset-grid,.layout-option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.theme-option,.layout-option { position:relative; display:grid; gap:6px; padding:14px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--surface-strong) 86%,transparent); color:var(--text); }
.theme-option input,.layout-option input { position:absolute; opacity:0; pointer-events:none; }
.theme-option span::before { content:""; width:16px; height:16px; border-radius:50%; background:var(--swatch); display:inline-block; margin-right:8px; vertical-align:-2px; }
.theme-option:has(input:checked),.layout-option:has(input:checked) { border-color:color-mix(in srgb,var(--primary) 48%,transparent); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 10%,transparent); }
.layout-option span { color:var(--muted); line-height:1.5; }
.card-editor-list { display:grid; gap:12px; }
.home-card-editor-row { padding:16px; }
.card-row-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.card-row-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

@media (max-width:1100px) {
  .hero-grid,.layout,.admin-overview,.admin-grid { grid-template-columns:1fr; }
  .sidebar { position:static; order:2; }
  .content { order:1; }
  .hero-copy { text-align:center; }
  .hero-copy .hero-chip-row { justify-content:center; }
  .hero-copy p,.hero-copy .searchbar { margin-left:auto; margin-right:auto; }
  .hero-stage { min-height:380px; }
  .feature-grid { grid-template-columns:1fr; }
  .theme-preset-grid,.layout-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .topbar { padding:0 12px; }
  .brand span:last-child { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav { gap:4px; }
  .nav a,.icon-btn,.ghost { padding:8px 10px; }
  .quick-island { top:86px; height:38px; font-size:.9rem; }
  .hero-hyper { min-height:auto; padding:34px 18px 28px; border-radius:30px; }
  .hero h1 { font-size:2.35rem; }
  .hero-stage { min-height:315px; }
  .floating-panel { min-width:128px; }
  .floating-panel-card { min-width:128px; padding:12px 14px; border-radius:20px; }
  .panel-dynamic-1 { right:0; } .panel-dynamic-0 { left:0; } .panel-dynamic-2 { left:4%; }
  .motion-marquee { font-size:2rem; bottom:8px; }
  .searchbar { border-radius:24px; flex-direction:column; }
  .searchbar button { width:100%; }
  .article-cover,.post-full .article-cover { height:220px; }
  .post-hero,.post-content,.post-bottom { padding-left:20px; padding-right:20px; }
  .two-col,.settings-grid,.summary-grid,.theme-preset-grid,.layout-option-grid,.card-row-fields { grid-template-columns:1fr; }
  .settings-grid > * { grid-column:1 / -1 !important; }
  .admin-post-row { grid-template-columns:1fr; }
  .admin-card,.admin-overview,.admin-login-card { padding:20px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; } .mouse-aura { display:none; } }

/* RyuChan Plus modules */
.quick-nav-list { display:grid; gap:10px; }
.quick-nav-item { position:relative; display:grid; grid-template-columns:36px 1fr; gap:4px 10px; align-items:center; padding:12px; border-radius:18px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface-strong) 86%,transparent); overflow:hidden; }
.quick-nav-item span { grid-row:1 / span 2; width:36px; height:36px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb,var(--primary) 10%,transparent); }
.quick-nav-item b { font-size:.95rem; }
.quick-nav-item small { color:var(--muted); line-height:1.45; }
.showcase-wrap,.friends-wrap { width:min(1250px,calc(100% - 24px)); margin:24px auto 0; }
.section-head { text-align:center; margin:0 auto 18px; max-width:720px; }
.section-head h2 { margin:8px 0; font-size:clamp(1.6rem,3vw,2.4rem); }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.project-card { position:relative; overflow:hidden; display:grid; grid-template-columns:180px 1fr; min-height:190px; }
.project-card > img,.project-placeholder { width:100%; height:100%; min-height:190px; object-fit:cover; display:grid; place-items:center; font-size:2rem; font-weight:900; color:white; background:linear-gradient(135deg,var(--primary),var(--accent)); }
.project-card-body { padding:22px; display:grid; align-content:center; }
.project-card-body h3 { margin:0 0 8px; }
.project-card-body p { margin:0 0 14px; color:var(--muted); line-height:1.7; }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; }
.project-tags span { padding:6px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:.82rem; background:color-mix(in srgb,var(--surface-strong) 86%,transparent); }
.friend-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.friend-card { position:relative; padding:16px; display:flex; gap:12px; align-items:center; overflow:hidden; }
.friend-avatar { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:18px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:white; font-weight:900; overflow:hidden; }
.friend-avatar img { width:100%; height:100%; object-fit:cover; }
.friend-card b { display:block; margin-bottom:4px; }
.friend-card small { color:var(--muted); line-height:1.45; }
.music-player { position:fixed; right:24px; bottom:86px; z-index:60; display:flex; align-items:center; gap:10px; max-width:min(360px,calc(100vw - 48px)); padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface-strong) 88%,transparent); backdrop-filter:var(--blur); box-shadow:var(--shadow-soft); }
.music-toggle,.music-mini-btn { border:0; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:white; background:linear-gradient(135deg,var(--primary),var(--primary-2)); }
.music-mini-btn { width:32px; height:32px; color:var(--text); background:color-mix(in srgb,var(--primary) 10%,transparent); }
.music-meta { min-width:0; flex:1; }
.music-meta b,.music-meta small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.music-meta small { color:var(--muted); }
.license-box { padding:18px 22px; margin-bottom:18px; }
.license-box p { margin:8px 0 0; color:var(--muted); line-height:1.7; }
.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.post-nav-card { padding:16px 18px; display:grid; gap:6px; }
.post-nav-card small { color:var(--muted); }
.post-filter-bar { display:flex; gap:10px; align-items:center; padding:10px; width:max-content; max-width:100%; }
.post-filter-bar .active { color:white; background:linear-gradient(135deg,var(--primary),var(--primary-2)); border-color:transparent; }
.compact-editor .card-row-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-module label textarea { min-height:74px; }
@media (max-width:900px) { .project-grid,.friend-grid { grid-template-columns:1fr; } .project-card { grid-template-columns:1fr; } .project-card > img,.project-placeholder { height:220px; } .post-nav { grid-template-columns:1fr; } .compact-editor .card-row-fields { grid-template-columns:1fr; } }
@media (max-width:720px) { .music-player { left:12px; right:12px; bottom:78px; } .showcase-wrap,.friends-wrap { width:min(1250px,calc(100% - 20px)); } }

/* V7: independent pages + frontend preview workspace */
.admin-workspace {
  padding: 18px;
  margin-top: 22px;
}
.workspace-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  border: 1px solid var(--line);
  width: fit-content;
}
.workspace-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 10px 18px;
  border-radius: 999px;
  transition: .22s ease;
}
.workspace-tab.active,
.workspace-tab:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 22px rgba(86,104,255,.20);
}
.workspace-panel { display: none; }
.workspace-panel.active { display: grid; gap: 22px; }
.admin-grid-balanced {
  grid-template-columns: minmax(360px, .95fr) minmax(460px, 1.05fr);
}
.pane-card {
  padding: 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-radius: var(--radius);
}
.preview-pane {
  overflow: hidden;
}
.front-preview-shell {
  margin-top: 16px;
  padding: 18px;
  min-height: 360px;
  max-height: 760px;
  overflow: auto;
  border-radius: 26px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 0 0, rgba(86,104,255,.08), transparent 28%),
    color-mix(in srgb, var(--surface-solid) 78%, transparent);
}
.front-preview-shell .post-full,
.front-preview-shell .page-full {
  box-shadow: none;
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
}
.preview-cover-placeholder {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.86);
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.page-full { overflow: hidden; }
.page-hero {
  padding: clamp(28px, 5vw, 56px) 34px 22px;
  text-align: center;
}
.page-hero h1 {
  margin: 10px 0 12px;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.06;
}
.page-type-label {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(86,104,255,.10);
  border: 1px solid rgba(86,104,255,.16);
  font-weight: 700;
}
.page-content { padding-top: 0; }
.template-landing .page-hero {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  margin-bottom: 24px;
}
.template-landing .page-type-label {
  color: #fff;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
}
.template-narrow {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.settings-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.settings-module {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}
.settings-module h3 { margin-top: 0; }
.page-row { border-style: dashed; }
.preview-post .comments { opacity: .9; }
.preview-page .post-content { padding-bottom: 38px; }

@media (max-width: 1100px) {
  .admin-grid-balanced { grid-template-columns: 1fr; }
  .workspace-tabs { width: 100%; justify-content: center; border-radius: 24px; }
}
@media (max-width: 720px) {
  .settings-two { grid-template-columns: 1fr; }
  .front-preview-shell { padding: 10px; }
  .workspace-tab { flex: 1; }
}

/* V8：左右实时预览 + Clean URL + 后台导航编辑 */
.header-nav-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-nav-links a {
  display: inline-flex;
  align-items: center;
}
.content-list-card {
  margin-bottom: 18px;
}
.editor-preview-split {
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(430px, 1fr);
  gap: 18px;
  align-items: start;
}
.side-preview-pane {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  max-height: calc(100vh - var(--topbar-h) - 40px);
  overflow: auto;
}
.front-preview-shell {
  min-height: 520px;
}
.front-preview-shell .post-full,
.front-preview-shell .page-full {
  box-shadow: none;
  border-radius: 24px;
  overflow: hidden;
}
.front-preview-shell .article-cover {
  height: 220px;
}
.preview-cover-placeholder {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.88);
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.form-tip {
  margin: -6px 0 2px;
  color: var(--muted);
  font-size: .9rem;
}
.form-tip code {
  color: var(--primary);
  background: rgba(86,104,255,.10);
  border: 1px solid rgba(86,104,255,.14);
  border-radius: 999px;
  padding: 4px 10px;
}
.card-row-fields .wide-field,
.home-card-editor-row > .wide-field {
  grid-column: 1 / -1;
}
.home-card-editor-row select {
  margin-top: 7px;
}
.row-actions a.small-btn {
  display: inline-flex;
  align-items: center;
}
.admin-post-row .row-actions {
  align-items: center;
}
@media (max-width: 1180px) {
  .editor-preview-split {
    grid-template-columns: 1fr;
  }
  .side-preview-pane {
    position: static;
    max-height: none;
  }
}
@media (max-width: 720px) {
  .header-nav-links a:nth-child(n+3) {
    display: none;
  }
  .editor-preview-split {
    gap: 14px;
  }
}

/* V9: all-card tilt + third-party video embeds */
.card,
.card-lite,
.summary-card,
.pane-card,
.settings-module,
.admin-post-row,
.upload-box,
.theme-option,
.layout-option,
.home-card-editor-row,
.quick-nav-item,
.post-nav-card {
  position: relative;
}
.tilt-card {
  will-change: transform;
  backface-visibility: hidden;
}
.tilt-soft-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255,255,255,.28), transparent 34%);
  transition: opacity .22s ease;
}
.tilt-soft-card:hover::after { opacity: 1; }
.video-embed {
  margin: 24px 0;
  padding: 12px;
  overflow: hidden;
}
.video-frame {
  position: relative;
  width: 100%;
  padding-top: var(--video-ratio, 56.25%);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(86,104,255,.18), rgba(103,217,255,.16));
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed figcaption {
  margin: 10px 6px 2px;
  color: var(--muted);
  font-size: .92rem;
  text-align: center;
}
.video-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}
.video-help-card {
  padding: 14px;
  display: grid;
  gap: 8px;
}
.video-help-card code {
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--muted);
}
.editor-tools { margin-top: -6px; }
@media (max-width: 760px) {
  .video-help-grid { grid-template-columns: 1fr; }
}

/* V9.1: theme transition overlay + backend tilt disabled */
.theme-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 0 0 0);
  will-change: clip-path, opacity, filter;
}
.theme-transition-overlay.show::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.32), transparent 38%);
  mix-blend-mode: soft-light;
}
.admin-body .tilt-card,
.admin-body .tilt-soft-card {
  transform: none !important;
  transition: box-shadow .22s ease, background .22s ease, border-color .22s ease !important;
}
.admin-body .tilt-card::after,
.admin-body .tilt-soft-card::after {
  display: none !important;
}

/* V9.2: cinematic theme transition - more dramatic, directional, non-linear */
.cinematic-theme-overlay {
  position: fixed;
  inset: -1px;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--next-accent, #67d9ff) 88%, transparent), transparent 32%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--next-primary-2, #7a8cff) 70%, transparent), transparent 30%),
    linear-gradient(135deg, var(--next-bg-2, #f8fbff), var(--next-bg, #eef3fb) 42%, color-mix(in srgb, var(--next-primary, #5668ff) 65%, var(--next-bg, #eef3fb)) 120%);
  will-change: clip-path, opacity, filter, transform;
  transform-origin: center;
}
.cinematic-theme-overlay::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    conic-gradient(from 180deg at 50% 50%, transparent 0 16%, rgba(255,255,255,.38) 22%, transparent 32%, rgba(255,255,255,.18) 48%, transparent 62%, rgba(255,255,255,.32) 78%, transparent 100%);
  filter: blur(24px);
  opacity: .42;
  animation: cinemaRotate 2.4s cubic-bezier(.16,1,.3,1) both;
  mix-blend-mode: soft-light;
}
.cinematic-theme-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 33%, rgba(255,255,255,.40) 45%, transparent 58% 100%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.34), transparent 38%);
  transform: translateX(-60%);
  animation: cinemaShine 1.55s cubic-bezier(.16,1,.3,1) .12s both;
  mix-blend-mode: screen;
}
.theme-cinema-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--next-primary, #5668ff) 52%, transparent), transparent 22%),
    radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--next-accent, #67d9ff) 52%, transparent), transparent 26%);
  filter: blur(22px) saturate(1.25);
  animation: cinemaBreathe 1.7s cubic-bezier(.16,1,.3,1) both;
}
.theme-cinema-wipe {
  position: absolute;
  inset: -8%;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.54), transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--next-primary, #5668ff) 86%, transparent), color-mix(in srgb, var(--next-accent, #67d9ff) 74%, transparent));
  opacity: .58;
  filter: blur(14px);
  mix-blend-mode: screen;
}
.direction-left .theme-cinema-wipe,
.direction-right .theme-cinema-wipe { width: 42%; height: auto; }
.direction-left .theme-cinema-wipe { left: -18%; right: auto; animation: wipeLR 1.35s cubic-bezier(.12,.86,.16,1) both; }
.direction-right .theme-cinema-wipe { right: -18%; left: auto; animation: wipeRL 1.35s cubic-bezier(.12,.86,.16,1) both; }
.direction-top .theme-cinema-wipe,
.direction-bottom .theme-cinema-wipe { height: 42%; width: auto; }
.direction-top .theme-cinema-wipe { top: -18%; bottom: auto; animation: wipeTB 1.35s cubic-bezier(.12,.86,.16,1) both; }
.direction-bottom .theme-cinema-wipe { bottom: -18%; top: auto; animation: wipeBT 1.35s cubic-bezier(.12,.86,.16,1) both; }
.theme-cinema-wave {
  position: absolute;
  width: 48vmax;
  height: 48vmax;
  border-radius: 43% 57% 55% 45% / 46% 42% 58% 54%;
  background: color-mix(in srgb, var(--next-primary-2, #7a8cff) 35%, transparent);
  border: 1px solid rgba(255,255,255,.16);
  filter: blur(2px);
  opacity: .56;
  animation: waveMorph 2.4s cubic-bezier(.18,1,.28,1) infinite alternate;
}
.wave-a { left: -16vmax; top: -16vmax; }
.wave-b { right: -18vmax; bottom: -16vmax; background: color-mix(in srgb, var(--next-accent, #67d9ff) 34%, transparent); animation-delay: .24s; }
.theme-cinema-ribbon {
  position: absolute;
  width: 80vmax;
  height: 16vmax;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  filter: blur(10px);
  mix-blend-mode: screen;
}
.ribbon-a { transform: translate(-50%, -50%) rotate(18deg); animation: ribbonSlideA 1.35s cubic-bezier(.12,.86,.16,1) both; }
.ribbon-b { transform: translate(-50%, -50%) rotate(-24deg); animation: ribbonSlideB 1.55s cubic-bezier(.12,.86,.16,1) .08s both; opacity: .72; }
.theme-cinema-particles {
  position: absolute;
  inset: 0;
}
.theme-cinema-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(5px, .72vw, 10px);
  height: clamp(5px, .72vw, 10px);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 0 24px rgba(255,255,255,.65);
  opacity: 0;
  transform: scale(.25) translateY(16px);
  animation: particlePop 1.1s cubic-bezier(.16,1,.3,1) var(--d) both;
}
.theme-cinema-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 10px;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  text-shadow: 0 12px 30px rgba(0,0,0,.18);
  animation: cinemaCopy 1.35s cubic-bezier(.16,1,.3,1) both;
}
.theme-cinema-copy small {
  letter-spacing: .22em;
  font-weight: 800;
  opacity: .82;
}
.theme-cinema-copy b {
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.06em;
}
.theme-cinema-copy span {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(20px);
}
body.theme-shifting .topbar,
body.theme-shifting .hero,
body.theme-shifting .layout,
body.theme-shifting .feature-grid-wrap,
body.theme-shifting .showcase-wrap,
body.theme-shifting .friends-wrap,
body.theme-shifting .footer {
  animation: pageDepth .96s cubic-bezier(.16,1,.3,1) both;
}
body.theme-pop .card,
body.theme-pop .hero-hyper,
body.theme-pop .topbar {
  animation: themePop .72s cubic-bezier(.18,1.35,.28,1) both;
}
@keyframes cinemaRotate { from { transform: rotate(0deg) scale(.96); } to { transform: rotate(72deg) scale(1.05); } }
@keyframes cinemaShine { from { transform: translateX(-80%); opacity: 0; } 28% { opacity: 1; } to { transform: translateX(80%); opacity: .15; } }
@keyframes cinemaBreathe { from { transform: scale(.94); opacity: .2; } 45% { opacity: .85; } to { transform: scale(1.08); opacity: .55; } }
@keyframes wipeLR { from { transform: translateX(-70%) skewX(-10deg); } to { transform: translateX(330%) skewX(-10deg); } }
@keyframes wipeRL { from { transform: translateX(70%) skewX(10deg); } to { transform: translateX(-330%) skewX(10deg); } }
@keyframes wipeTB { from { transform: translateY(-70%) skewY(-8deg); } to { transform: translateY(330%) skewY(-8deg); } }
@keyframes wipeBT { from { transform: translateY(70%) skewY(8deg); } to { transform: translateY(-330%) skewY(8deg); } }
@keyframes waveMorph { from { transform: rotate(0deg) scale(.92); border-radius: 43% 57% 55% 45% / 46% 42% 58% 54%; } to { transform: rotate(18deg) scale(1.08); border-radius: 57% 43% 42% 58% / 58% 54% 46% 42%; } }
@keyframes ribbonSlideA { from { opacity: 0; transform: translate(-72%, -58%) rotate(18deg) scaleX(.65); } to { opacity: .85; transform: translate(-50%, -50%) rotate(18deg) scaleX(1); } }
@keyframes ribbonSlideB { from { opacity: 0; transform: translate(-28%, -42%) rotate(-24deg) scaleX(.65); } to { opacity: .72; transform: translate(-50%, -50%) rotate(-24deg) scaleX(1); } }
@keyframes particlePop { 0% { opacity: 0; transform: scale(.2) translateY(22px); } 38% { opacity: .85; } 100% { opacity: 0; transform: scale(1.4) translateY(-48px); } }
@keyframes cinemaCopy { from { opacity: 0; transform: translate(-50%, -44%) scale(.92); filter: blur(12px); } 40% { opacity: 1; filter: blur(0); } to { opacity: .94; transform: translate(-50%, -50%) scale(1); } }
@keyframes pageDepth { 0% { transform: scale(1); filter: blur(0); } 45% { transform: scale(.972); filter: blur(5px); } 100% { transform: scale(.99); filter: blur(1px); } }
@keyframes themePop { from { transform: translateY(8px) scale(.992); } 55% { transform: translateY(-2px) scale(1.006); } to { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cinematic-theme-overlay *,
  body.theme-shifting .topbar,
  body.theme-shifting .hero,
  body.theme-shifting .layout,
  body.theme-shifting .feature-grid-wrap,
  body.theme-shifting .showcase-wrap,
  body.theme-shifting .friends-wrap,
  body.theme-shifting .footer,
  body.theme-pop .card,
  body.theme-pop .hero-hyper,
  body.theme-pop .topbar { animation: none !important; }
}


/* V9.3: 轻量背景主题切换。去掉全屏覆盖层、粒子、扫光和页面缩放，只让 body 背景按随机方向非线性过渡。 */
.theme-transition-overlay,
.cinematic-theme-overlay {
  display: none !important;
}
body.theme-bg-flow {
  will-change: background-position;
  animation-duration: .72s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: both;
}
body.theme-bg-flow[data-theme-flow="top"] { animation-name: bgFlowTop; }
body.theme-bg-flow[data-theme-flow="bottom"] { animation-name: bgFlowBottom; }
body.theme-bg-flow[data-theme-flow="left"] { animation-name: bgFlowLeft; }
body.theme-bg-flow[data-theme-flow="right"] { animation-name: bgFlowRight; }
@keyframes bgFlowTop {
  0% { background-position: 6% -18%, 92% -12%, 50% -55%; }
  62% { background-position: 4% 13%, 90% 27%, 50% 18%; }
  100% { background-position: 6% 8%, 92% 22%, 50% 0%; }
}
@keyframes bgFlowBottom {
  0% { background-position: 6% 118%, 92% 112%, 50% 155%; }
  62% { background-position: 8% 5%, 94% 17%, 50% 18%; }
  100% { background-position: 6% 8%, 92% 22%, 50% 0%; }
}
@keyframes bgFlowLeft {
  0% { background-position: -24% 8%, -16% 22%, -70% 0%; }
  62% { background-position: 10% 8%, 82% 22%, 12% 0%; }
  100% { background-position: 6% 8%, 92% 22%, 50% 0%; }
}
@keyframes bgFlowRight {
  0% { background-position: 124% 8%, 116% 22%, 170% 0%; }
  62% { background-position: 1% 8%, 98% 22%, 88% 0%; }
  100% { background-position: 6% 8%, 92% 22%, 50% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-bg-flow { animation: none !important; }
}

/* V10 模块化编辑器：文字 / 图片 / 第三方视频可自由插入并实时预览 */
.block-editor {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
}
.block-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.block-editor-head b { display: block; margin-bottom: 4px; }
.block-editor-head p { margin: 0; line-height: 1.6; }
.block-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.block-list { display: grid; gap: 12px; }
.block-item {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.block-item.active {
  border-color: color-mix(in srgb, var(--primary) 46%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
}
.block-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.block-item-head > div:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.block-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: .78rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
.block-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.block-fields .wide-field,
.block-textarea-label { grid-column: 1 / -1; }
.block-textarea-label textarea {
  min-height: 180px;
  resize: vertical;
}
.editor-preview-split {
  align-items: start;
}
.preview-pane {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  max-height: calc(100vh - var(--topbar-h) - 32px);
  overflow: auto;
}
.front-preview-shell .post-content img,
.front-preview-shell .page-content-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 18px auto;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 1100px) {
  .block-editor-head { flex-direction: column; }
  .block-toolbar { justify-content: flex-start; }
  .preview-pane { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .block-fields { grid-template-columns: 1fr; }
  .block-item-head { align-items: flex-start; flex-direction: column; }
}

/* v10.1 分类 / 标签管理 */
.taxonomy-input-row label { align-content: start; }
.taxonomy-chip-box {
  min-height: 46px;
  padding: 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
}
.taxonomy-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(86,104,255,.10);
  border: 1px solid rgba(86,104,255,.16);
  font-size: .9rem;
}
.taxonomy-token button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(86,104,255,.12);
}
.taxonomy-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  margin: 10px 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  border: 1px solid var(--line);
}
.taxonomy-panel { display: none; }
.taxonomy-panel.active { display: block; }
.taxonomy-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}
.taxonomy-editor-list {
  display: grid;
  gap: 10px;
}
.taxonomy-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}
.taxonomy-editor-row input { border-radius: 14px; }
@media (max-width: 720px) {
  .taxonomy-add-row, .taxonomy-editor-row { grid-template-columns: 1fr; }
}



/* v10.14 文章编辑器：分类 / 标签选项栏 */
.taxonomy-option-wrap {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
}
.taxonomy-option-wrap small {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
}
.taxonomy-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  align-items: center;
}
.taxonomy-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  color: var(--muted);
  transition: transform .18s cubic-bezier(.2,.75,.25,1), border-color .18s ease, background .18s ease, color .18s ease;
}
.taxonomy-option-btn:hover {
  transform: translateY(-1px);
  color: var(--primary);
  border-color: rgba(86,104,255,.28);
  background: rgba(86,104,255,.08);
}
.taxonomy-option-btn.active {
  color: var(--primary);
  border-color: rgba(86,104,255,.34);
  background: rgba(86,104,255,.13);
  box-shadow: inset 0 0 0 1px rgba(86,104,255,.06);
}
.taxonomy-option-empty {
  color: var(--muted);
  font-size: .9rem;
}

/* v10.3 编辑器优化：模块折叠、复制、轻量动画 */
.block-item {
  transform-origin: center top;
}
.block-item.module-added {
  animation: moduleSpringIn .52s cubic-bezier(.18, .89, .28, 1.16);
}
@keyframes moduleSpringIn {
  0% { opacity: 0; transform: translateY(18px) scale(.975); filter: blur(8px); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.006); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.block-item.collapsed {
  background: color-mix(in srgb, var(--surface-solid) 68%, transparent);
}
.block-item.collapsed .block-item-head {
  margin-bottom: 0;
}
.block-item.collapsed .block-item-body {
  margin-top: 10px;
}
.block-collapsed-hint {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
}
.block-actions {
  align-items: center;
}
.block-actions button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.module-inline-upload {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
}
.module-inline-upload input[type="file"] {
  margin-bottom: 10px;
}
.admin-note-card {
  padding: 18px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-strong));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
@media (max-width: 720px) {
  .block-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* v10.5 站点设置：左侧表单 + 右侧主页实时预览 */
.settings-preview-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 22px;
  align-items: start;
}
.settings-form-pane {
  min-width: 0;
}
.settings-home-preview-pane {
  position: sticky;
  top: calc(var(--topbar-h) + 18px);
  min-width: 0;
  max-height: calc(100vh - var(--topbar-h) - 42px);
  overflow: auto;
}
.sticky-preview-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 12px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 88%, transparent), color-mix(in srgb, var(--surface-solid) 62%, transparent));
  backdrop-filter: blur(16px);
}
.settings-home-preview-shell {
  --p-primary: var(--primary);
  --p-primary-2: var(--primary-2);
  --p-accent: var(--accent);
  --p-bg: var(--bg);
  --p-bg-2: var(--bg-2);
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--p-bg-2), var(--p-bg));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.preview-home {
  min-height: 720px;
  font-size: 12px;
  color: #172033;
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--p-primary) 22%, transparent), transparent 28%),
    radial-gradient(circle at 96% 18%, color-mix(in srgb, var(--p-accent) 22%, transparent), transparent 26%),
    linear-gradient(180deg, var(--p-bg-2), var(--p-bg));
}
.preview-theme-night { color: #eef4ff; }
.preview-topbar {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  background: rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(80, 98, 140, .12);
  backdrop-filter: blur(14px);
}
.preview-theme-night .preview-topbar { background: rgba(17,25,42,.62); border-color: rgba(255,255,255,.08); }
.preview-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.preview-brand b { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-brand-logo-img,
.preview-brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 9px;
  display: inline-block;
  object-fit: cover;
  background: linear-gradient(145deg, var(--p-primary), var(--p-accent));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--p-primary) 28%, transparent);
}
.preview-topbar nav { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.preview-topbar nav span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  white-space: nowrap;
  color: inherit;
}
.preview-theme-night .preview-topbar nav span { background: rgba(255,255,255,.08); }
.preview-hero {
  margin: 14px;
  min-height: 210px;
  border-radius: 28px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  color: white;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--p-primary) 24%, transparent);
}
.preview-hero small { letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.preview-hero h1 { margin: 10px 0; font-size: 28px; line-height: 1.08; }
.preview-hero p { margin: 0; opacity: .9; line-height: 1.6; }
.preview-hero-cards { display: grid; gap: 10px; align-content: center; }
.preview-mini-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  color: white;
  backdrop-filter: blur(12px);
}
.preview-mini-card span { font-size: 18px; }
.preview-mini-card small { letter-spacing: 0; text-transform: none; opacity: .82; }
.preview-body {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  padding: 0 14px 14px;
}
.preview-sidebar,
.preview-post-flow { display: grid; gap: 10px; align-content: start; }
.preview-profile,
.preview-side-block,
.preview-post-card,
.preview-footer {
  border: 1px solid rgba(80,98,140,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(80,98,140,.08);
}
.preview-theme-night .preview-profile,
.preview-theme-night .preview-side-block,
.preview-theme-night .preview-post-card,
.preview-theme-night .preview-footer { background: rgba(18,27,46,.68); border-color: rgba(255,255,255,.08); }
.preview-profile { padding: 14px; text-align: center; }
.preview-avatar {
  width: 56px;
  height: 56px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  background-size: cover;
  background-position: center;
}
.preview-profile p { color: currentColor; opacity: .65; line-height: 1.55; margin: 8px 0 0; }
.preview-side-block { padding: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.preview-side-block b { width: 100%; }
.preview-side-block span,
.preview-post-card span {
  display: inline-flex;
  padding: 5px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--p-primary) 10%, transparent);
  color: color-mix(in srgb, var(--p-primary) 82%, #172033);
}
.preview-post-card { padding: 16px; }
.preview-post-card h3 { margin: 0 0 8px; font-size: 18px; }
.preview-post-card p { margin: 0 0 12px; opacity: .68; line-height: 1.65; }
.preview-post-card div { display: flex; flex-wrap: wrap; gap: 6px; }
.preview-footer { margin: 0 14px 14px; padding: 12px; text-align: center; opacity: .74; }
.preview-layout-focus .preview-body { grid-template-columns: 1fr; }
.preview-layout-focus .preview-sidebar { display: none; }
.preview-layout-magazine .preview-post-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preview-layout-compact .preview-hero { min-height: 150px; grid-template-columns: 1fr; }
.preview-layout-compact .preview-hero-cards { display: none; }
.preview-layout-compact .preview-post-card { padding: 12px; }
@media (max-width: 1180px) {
  .settings-preview-workspace { grid-template-columns: 1fr; }
  .settings-home-preview-pane { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .preview-hero, .preview-body { grid-template-columns: 1fr; }
  .preview-hero-cards { grid-template-columns: 1fr; }
  .preview-layout-magazine .preview-post-flow { grid-template-columns: 1fr; }
}

/* v10.6：模块显示开关 */
.visibility-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.visibility-toggle-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  color: var(--text);
}
.visibility-toggle-grid input {
  width: auto;
  accent-color: var(--primary);
}
.preview-disabled {
  min-height: 120px;
  display: grid;
  place-items: center;
  opacity: .72;
}
@media (max-width: 900px) {
  .visibility-toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .visibility-toggle-grid { grid-template-columns: 1fr; }
}

/* v10.7 评论管理 + 评论验证码 */
.captcha-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 180px) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 16px);
  background: color-mix(in srgb, var(--surface-strong, #fff) 82%, transparent);
}
.captcha-question {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.captcha-question b {
  color: var(--text);
  font-size: 1.1rem;
  letter-spacing: .04em;
}
.captcha-answer { margin: 0; }
.comment-admin-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 16px 0;
}
.comment-admin-list { gap: 12px; }
.admin-comment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
}
.comment-row-main p {
  margin: 8px 0 0;
  line-height: 1.7;
  white-space: pre-wrap;
}
.comment-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
}
@media (max-width: 760px) {
  .captcha-row,
  .comment-admin-tools,
  .admin-comment-row {
    grid-template-columns: 1fr;
  }
}

/* v10.8：手机端 UA 专用模板 + 系统明暗自动跟随 */
.mobile-template {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% -10%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 30%),
    radial-gradient(circle at 100% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 28%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.mobile-template .mouse-aura,
.mobile-template .hero-stage,
.mobile-template .motion-marquee {
  display: none !important;
}
.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.mobile-brand {
  min-width: 0;
  font-size: 0.98rem;
}
.mobile-brand #brandText {
  max-width: 54vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mobile-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.mobile-actions .icon-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
}
.mobile-theme-menu {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  right: 12px;
  left: 12px;
  width: auto;
  max-height: 52vh;
  overflow: auto;
  border-radius: 22px;
  z-index: 80;
}
.mobile-nav-tabs {
  position: sticky;
  top: calc(64px + env(safe-area-inset-top));
  z-index: 55;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  scrollbar-width: none;
}
.mobile-nav-tabs::-webkit-scrollbar { display: none; }
.mobile-nav-tabs a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}
.mobile-shell {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 12px 12px 24px;
}
.mobile-hero {
  width: 100%;
  margin: 6px 0 14px;
  min-height: auto;
  padding: 28px 16px 18px;
  border-radius: 30px;
  box-shadow: 0 20px 44px color-mix(in srgb, var(--primary) 16%, transparent);
  transform: none !important;
}
.mobile-hero-content {
  position: relative;
  z-index: 3;
}
.mobile-hero .hero-chip-row {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}
.mobile-hero .hero-chip {
  font-size: 0.78rem;
  padding: 7px 10px;
}
.mobile-hero .eyebrow {
  font-size: 0.68rem;
  letter-spacing: .14em;
  text-align: left;
}
.mobile-hero h1 {
  text-align: left;
  font-size: clamp(2.15rem, 13vw, 3.65rem);
  line-height: .98;
  margin: 12px 0 12px;
  word-break: break-word;
}
.mobile-hero p {
  text-align: left;
  font-size: 0.98rem;
  line-height: 1.72;
}
.mobile-hero .searchbar {
  margin-top: 18px;
  width: 100%;
  border-radius: 22px;
  flex-direction: row;
  padding: 6px;
}
.mobile-hero .searchbar input {
  min-width: 0;
  padding: 11px 12px;
}
.mobile-hero .searchbar button {
  padding: 10px 14px;
  white-space: nowrap;
}
.mobile-hero-cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
}
.mobile-hero-cards .floating-panel {
  position: static !important;
  transform: none !important;
}
.mobile-hero-cards .floating-panel-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
}
.mobile-hero-cards .floating-panel-card .card-icon {
  grid-row: span 2;
  font-size: 1.35rem;
}
.mobile-hero-cards .floating-panel-card small,
.mobile-hero-cards .floating-panel-card b {
  color: #fff;
}
.mobile-profile-strip,
.mobile-taxonomy,
.mobile-quick {
  padding: 16px;
  margin: 12px 0;
  border-radius: 26px;
}
.mobile-profile-strip {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
}
.mobile-profile-strip .avatar {
  width: 64px;
  height: 64px;
  margin: 0;
  border-width: 4px;
}
.mobile-profile-strip h2 {
  margin: 0 0 4px;
  font-size: 1.08rem;
}
.mobile-profile-strip p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
}
.mobile-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.mobile-stats a {
  display: grid;
  gap: 2px;
  text-align: center;
  padding: 10px 6px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  border: 1px solid var(--line);
}
.mobile-stats b { font-size: 1.1rem; }
.mobile-stats span { color: var(--muted); font-size: .78rem; }
.mobile-template .feature-grid-wrap,
.mobile-template .showcase-wrap,
.mobile-template .friends-wrap,
.mobile-template .footer {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.mobile-template .feature-grid-head,
.mobile-template .section-head {
  text-align: left;
  padding: 0 4px;
}
.mobile-template .feature-grid,
.mobile-template .project-grid,
.mobile-template .friend-grid {
  grid-template-columns: 1fr !important;
  gap: 12px;
}
.mobile-template .feature-card,
.mobile-template .project-card,
.mobile-template .friend-card,
.mobile-template .article-card,
.mobile-template .post-full,
.mobile-template .page-full,
.mobile-template .archive-row {
  transform: none !important;
  border-radius: 24px;
}
.mobile-template .project-card {
  grid-template-columns: 1fr;
}
.mobile-template .project-card > img,
.mobile-template .project-placeholder {
  height: 190px;
}
.mobile-tag-title { margin-top: 16px; }
.mobile-template .quick-nav-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mobile-template .quick-nav-item {
  transform: none !important;
}
.mobile-content {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.mobile-template .list-title {
  font-size: 1.25rem;
  padding: 0 4px;
}
.mobile-template .article-cover,
.mobile-template .post-full .article-cover {
  height: 210px;
  border-radius: 24px 24px 0 0;
}
.mobile-template .article-body,
.mobile-template .post-hero,
.mobile-template .post-content,
.mobile-template .post-bottom,
.mobile-template .page-hero {
  padding-left: 18px;
  padding-right: 18px;
}
.mobile-template .post-content {
  font-size: 1rem;
  line-height: 1.86;
}
.mobile-template .two-col,
.mobile-template .captcha-row,
.mobile-template .post-nav {
  grid-template-columns: 1fr !important;
}
.mobile-template .music-player {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  border-radius: 22px;
}
.mobile-template .float-btn {
  width: 46px;
  height: 46px;
  right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom));
}
.mobile-template .footer {
  margin-top: 14px;
  margin-bottom: calc(18px + env(safe-area-inset-bottom));
}
@media (max-width: 420px) {
  .mobile-shell { padding-left: 10px; padding-right: 10px; }
  .mobile-hero { border-radius: 26px; padding: 24px 14px 16px; }
  .mobile-hero h1 { font-size: clamp(2rem, 12vw, 3.1rem); }
  .mobile-hero .searchbar { flex-direction: column; align-items: stretch; }
  .mobile-hero .searchbar button { width: 100%; }
}
@media (hover: none), (pointer: coarse) {
  .tilt-card,
  .card,
  .feature-card,
  .project-card,
  .friend-card,
  .quick-nav-item {
    transform: none !important;
  }
  .tilt-card::after { display: none !important; }
}

/* v10.12：修复手机端非夜间主题下 Hero 底部黑色高斯模糊块
   原因：手机端仍继承桌面端大尺寸 bg-orb / hero-glow / 强阴影，部分浏览器在浅色主题下会把混合背景渲染成黑色模糊块。
   做法：手机模板禁用桌面大光斑，改用轻量圆形背景氛围光。 */
.mobile-template .bg-orb,
.mobile-template .orb-a,
.mobile-template .orb-b,
.mobile-template .orb-c,
.mobile-template .hero-glow,
.mobile-template .hero-glow-a,
.mobile-template .hero-glow-b {
  display: none !important;
  opacity: 0 !important;
  filter: none !important;
}

.mobile-template {
  isolation: isolate;
  background:
    radial-gradient(circle at 18% -8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 32%),
    radial-gradient(circle at 110% 16%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
    linear-gradient(180deg, var(--bg-2), var(--bg)) !important;
}

.mobile-safe-glow {
  position: fixed;
  pointer-events: none;
  z-index: -3;
  right: -92px;
  top: 22vh;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent) 0%, color-mix(in srgb, var(--primary) 10%, transparent) 38%, transparent 72%);
  opacity: .42;
  filter: blur(18px);
  transform: translateZ(0);
}

.mobile-template .mobile-hero {
  overflow: hidden !important;
  contain: paint;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #fff 4%), color-mix(in srgb, var(--accent) 82%, #fff 8%)) !important;
  box-shadow: 0 18px 36px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

.mobile-template .mobile-hero::before,
.mobile-template .mobile-hero::after {
  content: none !important;
  display: none !important;
}

.mobile-template .hero-noise {
  opacity: .045 !important;
}

:root[data-theme-preset="night"] .mobile-template .mobile-safe-glow,
:root.dark .mobile-template .mobile-safe-glow {
  opacity: .18;
  filter: blur(20px);
}

/* v10.13 final: system check panel */
.system-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.system-check-item {
  padding: 16px;
}
.system-check-item small {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}
.system-check-item b {
  display: block;
  line-height: 1.45;
  overflow-wrap: anywhere;
}