:root {
  --bg: #071014;
  --bg-deep: #04090c;
  --panel: rgba(11, 25, 29, .82);
  --panel-strong: #0d2024;
  --line: rgba(159, 226, 214, .18);
  --line-strong: rgba(159, 226, 214, .42);
  --mint: #9fe2d6;
  --mint-bright: #c5fff3;
  --coral: #ff8b72;
  --amber: #ffd78a;
  --text: #eaf3ef;
  --muted: #93aaa8;
  --faint: #5f7776;
  --font-ui: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --maxw: 1120px;
  --radius: 14px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text); background: var(--bg-deep);
  font: 16px/1.75 var(--font-ui); letter-spacing: .01em; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mint); text-decoration: none; }
a:hover { color: var(--mint-bright); }
img { max-width: 100%; height: auto; }
::selection { color: #06201d; background: var(--mint); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #31504f; border: 2px solid var(--bg-deep); border-radius: 9px; }

.cosmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(850px 620px at 86% 8%, rgba(46, 121, 112, .23), transparent 67%),
              radial-gradient(700px 580px at 2% 92%, rgba(112, 75, 63, .20), transparent 65%), var(--bg-deep); }
#starfield { position:absolute; inset:0; width:100%; height:100%; opacity:.7; }
.planet-system { position:absolute; inset:-6% -4% auto -4%; width:108%; height:108%; opacity:.6; }
.orbit { fill:none; stroke:rgba(159,226,214,.18); stroke-width:1; stroke-dasharray:3 12; }
.orbit-a { animation: spin 96s linear infinite; }
.orbit-b { animation: spin 64s linear infinite reverse; stroke:rgba(255,139,114,.22); }
.orbit-c { animation: spin 42s linear infinite; }
.planet-core { transform-box:fill-box; transform-origin:center; animation:bob 14s ease-in-out infinite; }
.planet-band { fill:none; stroke:rgba(197,255,243,.34); stroke-width:3; stroke-linecap:round; }
.ring-wire { fill:none; stroke:rgba(159,226,214,.42); stroke-width:1; stroke-dasharray:3 7; animation:spin 30s linear infinite; transform-box:fill-box; transform-origin:center; }
.planet-minor { transform-box:fill-box; transform-origin:center; animation:bob 11s ease-in-out infinite; }
.moon { fill:#d9fff5; opacity:.7; animation:twinkle 5s ease-in-out infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes bob { 50% { transform:translateY(-14px); } }
@keyframes twinkle { 50% { opacity:.18; } }
.grid-horizon { position:absolute; left:-20%; right:-20%; bottom:0; height:42vh;
  background-image:linear-gradient(rgba(159,226,214,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(159,226,214,.1) 1px,transparent 1px);
  background-size:100% 44px,44px 100%; transform:perspective(340px) rotateX(66deg); transform-origin:bottom center;
  mask-image:linear-gradient(to top,#000 4%,transparent 78%); opacity:.35; animation:gridflow 7s linear infinite; }
@keyframes gridflow { to { background-position:0 44px,44px 0; } }
.scanlines { position:absolute; inset:0; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 4px); opacity:.5; }
.vignette { position:absolute; inset:0; background:radial-gradient(110% 90% at 50% 38%,transparent 35%,rgba(0,0,0,.74) 100%); }

.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px; padding:16px clamp(18px,5vw,64px);
  background:rgba(5,13,16,.78); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; color:var(--text); }
.brand-mark { width:14px; height:14px; border:1px solid var(--mint); border-radius:50%; box-shadow:0 0 0 4px rgba(159,226,214,.08),0 0 18px rgba(159,226,214,.5); }
.brand-text { font:700 16px var(--font-mono); letter-spacing:.18em; }
.topnav { margin-left:auto; display:flex; align-items:center; gap:5px; }
.topnav a { color:var(--muted); font:13px var(--font-mono); letter-spacing:.08em; padding:8px 13px; border:1px solid transparent; border-radius:8px; transition:.2s ease; }
.topnav a:hover { color:var(--mint-bright); background:rgba(159,226,214,.07); border-color:var(--line); }
.topnav a.is-active { color:var(--mint-bright); background:rgba(159,226,214,.1); border-color:var(--line-strong); }
.nav-admin { color:var(--coral)!important; }
.nav-toggle { display:none; margin-left:auto; background:transparent; border:1px solid var(--line-strong); border-radius:8px; color:var(--mint); font-size:20px; line-height:1; padding:5px 10px; cursor:pointer; }

.shell { position:relative; z-index:10; max-width:var(--maxw); margin:0 auto; padding:clamp(34px,7vw,82px) clamp(18px,4vw,34px) 100px; }
.hero { max-width:820px; margin-bottom:clamp(42px,7vw,78px); }
.hero-kicker { margin:0 0 16px; color:var(--coral); font:11px var(--font-mono); letter-spacing:.26em; text-transform:uppercase; }
.hero-title { margin:0 0 18px; color:var(--mint-bright); font:700 clamp(44px,8vw,86px)/.98 var(--font-mono); letter-spacing:-.03em; text-shadow:0 0 35px rgba(159,226,214,.22); }
.hero-sub { max-width:62ch; margin:0 0 26px; color:var(--muted); font-size:17px; }
.hero-stats { display:flex; flex-wrap:wrap; gap:9px 14px; align-items:center; color:var(--faint); font:11px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.hero-stats b { color:var(--mint); font-weight:600; }
.dot { color:var(--coral); opacity:.8; }

.section-head { display:flex; align-items:center; gap:15px; margin:0 0 17px; color:var(--muted); font:11px var(--font-mono); letter-spacing:.19em; text-transform:uppercase; }
.section-head::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--line-strong),transparent); }

.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.card { position:relative; min-height:255px; display:flex; flex-direction:column; padding:24px; background:linear-gradient(145deg,rgba(16,39,42,.86),rgba(7,18,22,.84));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.card::before { content:""; position:absolute; top:0; left:24px; width:52px; height:2px; background:var(--coral); box-shadow:0 0 18px rgba(255,139,114,.65); }
.card::after { content:""; position:absolute; inset:auto -12% -46% 22%; height:150px; background:radial-gradient(closest-side,rgba(159,226,214,.12),transparent); pointer-events:none; }
.card:hover { transform:translateY(-5px); border-color:var(--line-strong); background:linear-gradient(145deg,rgba(22,52,54,.9),rgba(8,21,25,.88)); }
.card-date { color:var(--faint); font:11px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.card-title { margin:17px 0 10px; font-size:24px; line-height:1.28; letter-spacing:-.02em; }
.card-title a { color:var(--text); }
.card-title a:hover { color:var(--mint-bright); }
.card-excerpt { margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.card-foot { display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:22px; color:var(--faint); font:11px var(--font-mono); }
.tag,.chip { display:inline-flex; align-items:center; gap:5px; color:var(--mint); border:1px solid rgba(159,226,214,.22); background:rgba(159,226,214,.06); border-radius:999px; padding:3px 9px; font:11px var(--font-mono); transition:.2s; }
.tag:hover,.chip:hover { color:var(--bg-deep); background:var(--mint); border-color:var(--mint); }

.chiprow { display:flex; flex-wrap:wrap; gap:9px; }
.empty,.panel { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.pager { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:29px; font:11px var(--font-mono); }
.pager-btn { color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:7px 11px; }
.pager-btn:hover { color:var(--mint); border-color:var(--line-strong); }
.pager-btn.is-off { opacity:.38; }
.pager-now { color:var(--faint); }

.footer { position:relative; z-index:10; max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,34px) 35px; color:var(--faint); }
.footer-line { height:1px; background:linear-gradient(90deg,var(--line-strong),transparent); }
.footer-meta { display:flex; flex-wrap:wrap; gap:10px; margin:17px 0 0; font:10px var(--font-mono); letter-spacing:.09em; text-transform:uppercase; }

.prose { max-width:780px; }
.post-head { margin-bottom:34px; }
.post-title { margin:12px 0; color:var(--mint-bright); font-size:clamp(34px,6vw,60px); line-height:1.06; letter-spacing:-.035em; }
.post-meta { color:var(--faint); font:11px var(--font-mono); letter-spacing:.08em; }
.prose p,.prose li { color:#b9cbc8; }
.prose h2 { margin-top:2.2em; color:var(--mint-bright); font-size:29px; line-height:1.2; }
.prose h3 { color:var(--mint); }
.prose blockquote { margin:26px 0; padding:13px 19px; color:var(--mint); border-left:3px solid var(--coral); background:rgba(255,139,114,.07); border-radius:0 9px 9px 0; }
.prose code { color:var(--amber); background:rgba(255,215,138,.09); padding:2px 5px; border-radius:4px; }
.prose .md-code { position:relative; margin:25px 0; padding:21px; overflow:auto; color:#ccebe4; background:#061013; border:1px solid var(--line); border-radius:10px; }
.prose .md-code code { padding:0; color:inherit; background:none; }
.copy-code { position:absolute; top:9px; right:9px; padding:5px 8px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:5px; font:10px var(--font-mono); cursor:pointer; }
.copy-code:hover { color:var(--mint); border-color:var(--line-strong); }
.readbar { position:fixed; top:0; left:0; z-index:30; width:0; height:2px; background:var(--coral); box-shadow:0 0 10px rgba(255,139,114,.8); }
.postnav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:54px; }
.postnav a { padding:16px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:rgba(159,226,214,.04); }
.postnav a:hover { color:var(--mint); border-color:var(--line-strong); }

input,textarea,select { width:100%; color:var(--text); background:#071417; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:14px var(--font-ui); }
input:focus,textarea:focus,select:focus { outline:2px solid rgba(159,226,214,.25); border-color:var(--mint); }
button,.btn { color:var(--bg-deep); background:var(--mint); border:1px solid var(--mint); border-radius:8px; padding:9px 14px; font:600 12px var(--font-mono); cursor:pointer; }
button:hover,.btn:hover { background:var(--mint-bright); }
@media (max-width:760px) {
  .topbar { padding:13px 17px; }
  .nav-toggle { display:block; }
  .topnav { display:none; position:absolute; top:100%; left:12px; right:12px; flex-direction:column; align-items:stretch; padding:9px; background:rgba(7,16,20,.97); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
  .topnav.is-open { display:flex; }
  .topnav a { padding:11px 13px; }
  .shell { padding-top:48px; }
  .hero-title { font-size:clamp(43px,15vw,70px); }
  .post-grid { grid-template-columns:1fr; }
  .card { min-height:230px; padding:21px; }
  .card-title { font-size:22px; }
  .postnav { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}