/* 基础主题与赛博视觉 */
:root{
  --bg:#0a0f1e;
  --bg-2:#0b1124;
  --grid:#0e1630;
  --fg:#b8d7ff;
  --muted:#7ea3cf;
  --neon:#00f0ff;
  --neon-2:#ff00e6;
  --accent:#0ef5a8;
  --danger:#ff4d6d;
  --shadow:0 0 1.6rem rgba(0,240,255,.35);
}

body{
  margin:0; color:var(--fg); background:
    radial-gradient(1200px 800px at 10% 10%, #0f1838 0%, var(--bg) 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  font-family:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  min-height:100vh; position:relative;
  padding-bottom: 0;
}

/* 扫描线与霓虹网格 */
.scanlines{ position:fixed; inset:0; pointer-events:none; background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  mix-blend-mode:overlay;
}

.header{ display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; border-bottom:1px solid #152036; background:linear-gradient(180deg, rgba(13,20,40,.7), rgba(10,15,30,.4)); position:sticky; top:0; backdrop-filter:blur(6px); }
.brand{ display:flex; align-items:center; gap:.8rem; }
.logo{ color:var(--neon); font-size:1.6rem; text-shadow:var(--shadow); }

.glitch{ font-family:'Orbitron', sans-serif; font-weight:700; font-size:1.6rem; letter-spacing:.15rem; position:relative; }
.glitch::before,.glitch::after{ content:attr(data-text); position:absolute; left:0; top:0; color:var(--neon); mix-blend-mode:screen; }
.glitch::before{ transform:translateX(-1px); filter:drop-shadow(0 0 2px var(--neon)); }
.glitch::after{ transform:translateX(1px); color:var(--neon-2); filter:drop-shadow(0 0 2px var(--neon-2)); }

.nav{ display:flex; align-items:center; gap:1rem; }
.nav-link{ color:var(--muted); text-decoration:none; padding:.4rem .6rem; border:1px solid #1b2a44; border-radius:6px; transition:.2s; }
.nav-link:hover{ color:var(--fg); border-color:var(--neon); box-shadow:0 0 .6rem rgba(0,240,255,.35); }
.btn{ background:transparent; color:var(--fg); border:1px solid #1b2a44; padding:.4rem .8rem; border-radius:6px; cursor:pointer; }
.btn:hover{ border-color:var(--accent); box-shadow:0 0 .6rem rgba(14,245,168,.35); }

.container{ max-width:1100px; margin:0 auto; padding:2rem; }
.hero{ padding:2rem; border:1px solid #182643; border-radius:16px; background:
  linear-gradient(135deg, rgba(0,240,255,.08), rgba(255,0,230,.06)); box-shadow:0 0 1rem rgba(18,28,56,.6);
}
.tagline{ font-size:1.4rem; color:var(--neon); text-shadow:var(--shadow); }
.sub{ color:var(--muted); margin-top:.6rem; }

.section-title{ margin:2rem 0 1rem; font-family:'Orbitron', sans-serif; letter-spacing:.2rem; color:#cbe6ff; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.card{ border:1px solid #1a2e4b; border-radius:14px; padding:1rem; background:
  linear-gradient(180deg, rgba(10,16,32,.6), rgba(9,14,28,.4)); box-shadow:0 0 .8rem rgba(0,0,0,.3);
}
.card-header{ display:flex; justify-content:space-between; align-items:center; }
.pill{ color:#00131a; background:var(--neon); padding:.15rem .5rem; border-radius:999px; font-size:.72rem; box-shadow:var(--shadow); }
.pill-tech{ background:var(--accent); }
.pill-dev{ background:#ffcf33; }
.date{ color:#86a4c7; font-size:.8rem; }
.card-title{ margin:.6rem 0; color:#e8f3ff; }
.card-desc{ color:#89a8cc; min-height:3rem; }
.btn-primary{ display:inline-block; text-decoration:none; margin-top:.6rem; color:#00131a; background:var(--neon); padding:.4rem .8rem; border-radius:8px; box-shadow:var(--shadow); }
.btn-primary:hover{ filter:brightness(1.15); }

.footer{ display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; border-top:1px solid #152036; color:#6f8fb3; position: fixed; left: 0; right: 0; bottom: 0; background:linear-gradient(180deg, rgba(13,20,40,.28), rgba(10,15,30,.16)); backdrop-filter:blur(2px); z-index: 1; }
.social{ display:flex; gap:.8rem; }
.social-link{ color:#91b3d6; text-decoration:none; }
.social-link:hover{ color:#d4e8ff; }

/* 主题切换（高亮模式） */
.theme-bright{ --bg:#101426; --bg-2:#111733; --fg:#eaf5ff; --muted:#a5c6ea; --grid:#132042; --neon:#00d7ff; --neon-2:#ff4df2; --accent:#42f5b6; }

/* 小型屏幕 */
@media (max-width:680px){ .header{ padding:.8rem 1rem; } .nav{ gap:.6rem; } .container{ padding:1rem; } }

/* Expandable content on post pages */
.details { margin-top: 8px; }
.details > summary { cursor: pointer; list-style: none; display: inline-block; padding: 6px 10px; border: 1px solid #0ff; border-radius: 999px; color: #0ff; font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 0.08em; }
.details > summary::-webkit-details-marker { display: none; }
.details .more { margin-top: 10px; }
/* Hide summary when open */
.details[open] > summary { display: none !important; }
/* Collapse button */
.collapse-btn { margin-top: 8px; cursor: pointer; background: transparent; color: #0ff; border: 1px solid #0ff; border-radius: 999px; padding: 6px 12px; font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 0.08em; }
.collapse-btn:hover { box-shadow: 0 0 .6rem rgba(0,240,255,.35); }

/* Netrunner codeflow background */
.codeflow, .codeflow * { pointer-events: none; }
.codeflow { position: fixed; inset: 0; z-index: 0; }
.codechip { position: absolute; color: rgba(0,240,255,0.22); font-family: 'Roboto Mono', monospace; font-size: 12px; white-space: nowrap; filter: drop-shadow(0 0 6px rgba(0,240,255,.18)); opacity: .75; }
.codechip { animation-name: code-drift; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes code-drift { from { transform: translate(0,0); } to { transform: translate(var(--dx, 22px), var(--dy, -12px)); } }
/* layering: keep under header/main content */
.header, .container { position: relative; z-index: 1; }

/* Intrusion code blocks */
.codeblock { position:absolute; width:var(--size,140px); height:var(--size,140px); border:1px solid rgba(0,240,255,.35); box-shadow:0 0 12px rgba(0,240,255,.25), inset 0 0 8px rgba(0,240,255,.1); background:
  linear-gradient(90deg, rgba(0,240,255,.08) 1px, transparent 1px),
  linear-gradient(0deg, rgba(0,240,255,.06) 1px, transparent 1px),
  linear-gradient(180deg, rgba(0,240,255,.06), rgba(255,0,230,.04));
background-size:10px 10px, 10px 10px, auto; backdrop-filter: blur(.5px); border-radius:8px; display:flex; align-items:flex-start; justify-content:flex-start; padding:8px; color:#b8d7ff; font-family:'Roboto Mono', monospace; font-size:11px; letter-spacing:.02em; opacity:.95; transition: border-color .6s ease, box-shadow .6s ease, opacity .6s ease, transform .6s ease; }
.codeblock::before { content:""; position:absolute; inset:2px; border:1px dashed rgba(0,240,255,.2); mix-blend-mode:screen; animation:hack-flicker var(--flicker,2.6s) steps(2) infinite alternate; }
.codeblock::after { content:""; position:absolute; left:-30%; top:0; bottom:0; width:30%; background:linear-gradient(90deg, rgba(0,240,255,.08), rgba(255,255,255,.02)); animation:scan-sweep 6s linear infinite; }
.codeblock { animation:block-drift var(--drift,18s) linear infinite alternate; }
@keyframes hack-flicker { 0% { opacity:.9; } 50% { opacity:.7; filter: drop-shadow(0 0 4px rgba(0,240,255,.25)); } 100% { opacity:.9; } }
@keyframes scan-sweep { 0% { transform:translateX(0); } 100% { transform:translateX(420%); } }
@keyframes block-drift { from { transform: translate(0,0); } to { transform: translate(var(--dx, 14px), var(--dy, -10px)); } }

/* state: risk(red) -> safe(green) -> hide */
.codeblock.state-risk { border-color: rgba(255,77,109,.6); box-shadow: 0 0 12px rgba(255,77,109,.35), inset 0 0 8px rgba(255,77,109,.18); }
.codeblock.state-risk::after { background: linear-gradient(90deg, rgba(255,77,109,.12), rgba(255,255,255,.02)); }
.codeblock.state-safe { border-color: rgba(14,245,168,.6); box-shadow: 0 0 12px rgba(14,245,168,.35), inset 0 0 8px rgba(14,245,168,.18); }
.codeblock.state-safe::after { background: linear-gradient(90deg, rgba(14,245,168,.12), rgba(255,255,255,.02)); }
.codeblock.hide { opacity: 0; transform: scale(.96); }

.codeblock pre { margin:0; white-space:pre-wrap; line-height:1.25; overflow:auto; }
/* risk jitter on text */
/* === Visibility boost overrides === */
/* stronger glow for risk/safe states */
.codeblock.state-risk { border-color: rgba(255,77,109,.80); box-shadow: 0 0 16px rgba(255,77,109,.45), inset 0 0 10px rgba(255,77,109,.25); }
.codeblock.state-risk::after { background: linear-gradient(90deg, rgba(255,77,109,.16), rgba(255,255,255,.03)); }
.codeblock.state-safe { border-color: rgba(14,245,168,.80); box-shadow: 0 0 16px rgba(14,245,168,.45), inset 0 0 10px rgba(14,245,168,.25); }
.codeblock.state-safe::after { background: linear-gradient(90deg, rgba(14,245,168,.16), rgba(255,255,255,.03)); }

/* amplify risk jitter slightly */
@keyframes risk-jitter { 0% { transform: translate(0,0); } 50% { transform: translate(1.2px, -1.2px); } 100% { transform: translate(0,0); } }
.codeblock.state-risk pre { text-shadow: 0 0 8px rgba(255,77,109,.35); animation: risk-jitter var(--jitter,0.6s) steps(3) infinite; }
.codeblock.state-safe pre { text-shadow: 0 0 6px rgba(14,245,168,.25); }
/* Containment fixes: keep snippets inside square blocks */
.codeblock {
  overflow: hidden;
  box-sizing: border-box;
}
/* Auto-scroll styling: hide scrollbars, keep content scrollable */
.codeblock pre {
  display: block;
  overflow: auto; /* allow programmatic scroll; bars hidden via rules below */
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 8px;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}
.codeblock pre::-webkit-scrollbar { width: 0; height: 0; } /* WebKit */

/* Loader dots shown during processing pauses */
.loader { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 3px; opacity: 0; transition: opacity .2s ease; }
.codeblock.processing .loader { opacity: .9; }
.loader .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--neon); opacity: .28; animation: dot-blink 1s infinite; }
.loader .dot:nth-child(2) { animation-delay: .2s; }
.loader .dot:nth-child(3) { animation-delay: .4s; }
@keyframes dot-blink { 0%, 80%, 100% { opacity:.22; } 40% { opacity:.88; } }
/* state-linked loader tint */
.codeblock.state-risk .loader .dot { background: var(--danger); opacity: .38; }
.codeblock.state-safe .loader .dot { background: var(--accent); opacity: .32; }

/* Side response label removed; response line now injected into <pre> during pauses */
/* Tools toolbar */
.toolbar { margin: 2rem 0; padding: 1.2rem 1.6rem; border: 1px solid #182643; border-radius: 16px; background:
  linear-gradient(135deg, rgba(0,240,255,.06), rgba(255,0,230,.05)); box-shadow: 0 0 1rem rgba(18,28,56,.5);
}
.toolbar .section-title { margin: 0 0 1rem; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.tool-card { border: 1px solid #1a2e4b; border-radius: 14px; padding: 1rem; background:
  linear-gradient(180deg, rgba(10,16,32,.55), rgba(9,14,28,.38)); box-shadow: 0 0 .8rem rgba(0,0,0,.28);
}
.tool-media { height: 140px; border: 1px dashed rgba(0,240,255,.28); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #7ea3cf; background:
  linear-gradient(90deg, rgba(0,240,255,.06) 1px, transparent 1px),
  linear-gradient(0deg, rgba(0,240,255,.05) 1px, transparent 1px);
  background-size: 10px 10px, 10px 10px; margin-bottom: .8rem;
}
.tool-title { margin: .4rem 0; color: #e8f3ff; font-family: 'Orbitron', sans-serif; letter-spacing: .12rem; font-size: 1rem; }
.tool-desc { color: #89a8cc; font-size: .92rem; min-height: 2.6rem; }
.tool-actions { margin-top: .6rem; display: flex; gap: .6rem; }
.btn-download { display:inline-block; text-decoration:none; color:#00131a; background:var(--accent); padding:.4rem .8rem; border-radius:8px; box-shadow:0 0 .6rem rgba(14,245,168,.35); }
.btn-download:hover { filter: brightness(1.12); }
.btn-outline { display:inline-block; text-decoration:none; color:var(--muted); border:1px solid #1b2a44; padding:.4rem .8rem; border-radius:8px; }
.btn-outline:hover { color:var(--fg); border-color:var(--neon); box-shadow: 0 0 .6rem rgba(0,240,255,.35); }
.collapse-btn { margin-top: 8px; cursor: pointer; background: transparent; color: #0ff; border: 1px solid #0ff; border-radius: 999px; padding: 6px 12px; font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 0.08em; }
.collapse-btn:hover { box-shadow: 0 0 .6rem rgba(0,240,255,.35); }
.collapse-btn { margin-top: 8px; cursor: pointer; background: transparent; color: #0ff; border: 1px solid #0ff; border-radius: 999px; padding: 6px 12px; font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 0.08em; }
.collapse-btn:hover { box-shadow: 0 0 .6rem rgba(0,240,255,.35); }
/* Media grid for post visuals */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.8rem;
}
.media img {
   width: 100%;
   height: auto;
   aspect-ratio: 3 / 2;
   object-fit: cover;
   border-radius: 8px;
   border: 1px solid #1b2a44;
   box-shadow: 0 0 1rem rgba(0, 240, 255, 0.12);
 }
 
 /* Gallery layout tweaks for reading pages */
 .gallery img {
   width: 100%;
   height: auto;
   border-radius: 8px;
 }
 
 @media (max-width: 640px) {
   .gallery {
     grid-template-columns: 1fr;
   }
 }
.media .caption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.4rem;
}
.collapse-btn { margin-top: 8px; cursor: pointer; background: transparent; color: #0ff; border: 1px solid #0ff; border-radius: 999px; padding: 6px 12px; font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 0.08em; }
.collapse-btn:hover { box-shadow: 0 0 .6rem rgba(0,240,255,.35); }
/* Footer visibility: homepage only */
.footer { display: none !important; }
.home .footer { display: flex !important; }

/* Footer spacing: homepage keeps extra bottom padding */
body { padding-bottom: 0 !important; }
.home { padding-bottom: 80px !important; }