/* ==========================================
   007 × Defender — Spy/Hacker Edition
   Fonts: Orbitron (titles), Rajdhani (UI), IBM Plex Mono (body)
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Rajdhani:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --bg:#0B0C0C;
  --hero-grad: radial-gradient(1200px 700px at 20% 10%, rgba(20,40,38,0.45) 0%, rgba(20,40,38,0.0) 60%), linear-gradient(180deg, #0F1815 0%, #15201B 60%, #0B0C0C 100%);
  --panel:#0F1211; --panel-deeper:#0D100F;
  --line:rgba(192,192,192,0.22);
  --brass:#A98E64; --ink:#E9E9E7; --ink-strong:#F5F5F3; --ink-soft:#CFCFCA; --ink-mid:#B9B9B4;
}

/* ==================== Base ==================== */
*{box-sizing:border-box;}
body{
  font-family: 'Rajdhani', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  letter-spacing:0.4px;
}
.app-root{min-height:100vh; background:var(--bg); color:var(--ink);}

/* ==================== Typography ==================== */
.display{
  font-family:'Orbitron', sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink-strong);
}
.display.h2{font-size:32px; margin:0 0 24px; color:var(--brass);}
.display.h3{font-size:20px; margin:0 0 6px; color:var(--ink);}
.lead{
  margin:20px auto 0;
  font-size:18px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:720px;
  font-family:'IBM Plex Mono', monospace;
}
.body{
  margin-top:12px;
  color:var(--ink-soft);
  line-height:1.7;
  font-family:'IBM Plex Mono', monospace;
}
.small{font-size:13px; font-family:'IBM Plex Mono', monospace;}
.semibold{font-weight:600;}
.muted{color:var(--ink-soft);}
.brass{color:var(--brass);}
.flex-row{display:flex; align-items:center; justify-content:space-between;}
.center{text-align:center;}
.row{display:flex; align-items:center; justify-content:center;}
.gap-48{gap:48px;}

/* ==================== Layout ==================== */
.container{max-width:1120px; margin:0 auto; padding:0 24px;}
.section{padding:80px 0; border-top:1px solid var(--line);}
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--hero-grad);
}
.hero .hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-shadow:0 0 12px rgba(169,142,100,0.25);
}
.hero-alt{background:var(--hero-grad);}
.hero .hero-overlay-grid{
  position:absolute; inset:0;
  mix-blend-mode:overlay;
  opacity:.06;
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 1px, transparent 2px, transparent 6px);
}
.hero .hero-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 30%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 70%);
}

/* ======= MP4 background ======= */
.hero .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.18;
  z-index:0;
  filter:brightness(0.65) contrast(1.05) saturate(0.75);
}
.hero-overlay-grid,
.hero-vignette,
.hero-inner{position:relative; z-index:1;}

/* ==================== Panels & Grid ==================== */
.panel{background:var(--panel);}
.panel-deeper{background:var(--panel-deeper);}
.grid{display:grid; gap:24px;}
.grid-4{grid-template-columns:repeat(1,1fr);}
.grid-3{grid-template-columns:repeat(1,1fr);}
@media(min-width:900px){
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
}

/* ==================== Card ==================== */
.card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  background:rgba(255,255,255,0.035);
}
.card:hover{
  border-color:rgba(169,142,100,0.55);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.sheen-card{position:relative; overflow:hidden;}
.sheen-card::before{
  content:''; position:absolute; top:0; left:-40%;
  width:40%; height:100%;
  background:linear-gradient(75deg, rgba(255,255,255,0), rgba(255,255,255,0.06), rgba(255,255,255,0));
  transform:skewX(-10deg);
  opacity:0;
  transition:opacity .3s ease, left .8s ease;
}
.sheen-card:hover::before{opacity:1; left:110%;}

/* ==================== Buttons ==================== */
.btn-elegant{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:12px 20px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(169,142,100,0.22), rgba(169,142,100,0.12));
  border:1px solid rgba(169,142,100,0.45);
  color:var(--ink);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-elegant:hover{
  background:linear-gradient(180deg, rgba(169,142,100,0.3), rgba(169,142,100,0.16));
}
.btn-elegant:active{
  transform:scale(0.97) translateY(1px);
  box-shadow:0 0 0 2px rgba(169,142,100,0.18);
}
.btn-ghost{
  display:inline-block;
  padding:12px 20px;
  border-radius:10px;
  border:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease;
}
.btn-ghost:hover{border-color:rgba(169,142,100,0.45);}
.btn-ghost:active{transform:scale(0.98) translateY(1px);}

/* ==================== Header ==================== */
.header{
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,#121816 0%,rgba(11,12,12,0.94) 100%);
  border-bottom:1px solid rgba(169,142,100,0.35);
  box-shadow:0 6px 16px rgba(0,0,0,0.45);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:12px;
  border:1px solid rgba(169,142,100,0.6);
  background:linear-gradient(145deg,#0E1813,#1A2F23);
  color:var(--brass);
  font-family:'Orbitron',sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:1px;
  box-shadow:inset 0 0 10px rgba(169,142,100,0.25);
  text-transform:uppercase;
}
.nav a{
  margin-left:32px;
  text-decoration:none;
  color:var(--ink-soft);
  font-family:'Rajdhani',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  transition:color 0.3s ease, letter-spacing 0.3s ease;
}
.nav a:hover{
  color:var(--brass);
  letter-spacing:1px;
}
.hero{padding-top:120px;}

/* ==================== Chip & Box ==================== */
.chip{
  background:linear-gradient(135deg,#D4AF37,#B88900);
  border-radius:12px;
  padding:0.2rem 0.6rem;
  color:#0E1813;
  font-weight:600;
  font-size:0.8rem;
  font-family:'IBM Plex Mono',monospace;
}
.chip--ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft);
}
.box{
  width:72px;height:72px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;background:rgba(255,255,255,.9);color:#000;
}

/* ==================== Responsive ==================== */
@media(max-width:768px){
  .header-inner{height:64px;}
  .nav a{margin-left:20px;font-size:14px;}
  .display.h2{font-size:26px;}
  .lead{font-size:16px;}
}

/* ===== POLISH: Mission Path Typography ===== */
#pipeline .display.h2 {
  font-size: 30px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 40px;
}

#pipeline .card {
  padding: 28px 22px;
  border-radius: 12px;
  line-height: 1.5;
}

#pipeline .display.h3 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.6px;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--brass);
  text-transform: uppercase;
}

#pipeline .muted.small {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2px;
  line-height: 1.3;
  color: var(--ink-mid);
  margin-bottom: 6px;
}

#pipeline .body {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.1px;
  margin-top: 8px;
  color: var(--ink-soft);
  max-width: 95%;
}

/* Grid layout refinement */
#pipeline .grid-4 {
  gap: 32px;
}

@media (max-width: 900px) {
  #pipeline .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 600px) {
  #pipeline .grid-4 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ===== Pipeline: make V1 chip fixed at top-right across all cards ===== */
#pipeline .card {
  position: relative;              /* 让内部元素可绝对定位 */
  padding: 28px 22px;              /* 你之前的卡片内边距 */
  padding-right: 72px;             /* 预留右侧给 V1 徽章 */
}

#pipeline .card .display.h3 {
  margin: 0 0 6px;
  padding-right: 72px;             /* 防止标题文字与 V1 重叠 */
  line-height: 1.2;
  display: block;                   /* 避免 flex-row 的高度影响 */
}

#pipeline .card .chip:not(.chip--ghost) {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  padding: 0.18rem 0.6rem;          /* 更紧致一些 */
  transform: translateZ(0);         /* 提升抗抖动 */
}

/* 如果你的 h3 还保留了 flex-row 类，统一移除其影响 */
#pipeline .card .flex-row {
  display: block;
}

/* ===== Contact Section (Centered Layout) ===== */
#contact {
  background: var(--hero-grad);
  padding: 100px 0 90px;
  text-align: center;
}

#contact h2.display.h2 {
  font-size: 32px;
  margin-bottom: 16px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#contact .lead.muted {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

#contact .contact-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 48px; /* 控制二维码之间的间距 */
}

#contact .contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#contact .qr-box {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  border: 1px solid rgba(169,142,100,0.45);
  overflow: hidden;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 32px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#contact .qr-box:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 36px rgba(169,142,100,0.3);
}

#contact .qr-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#contact .contact-card p {
  margin-top: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Responsive behavior */
@media (max-width: 768px) {
  #contact {
    padding: 80px 0;
  }
  #contact .contact-row {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  #contact .qr-box {
    width: 90px;
    height: 90px;
  }
}

/* ========== Admin Dashboard ========== */
.admin-shell{
  position:relative;
  min-height:100vh;
  padding:120px 0 80px;
  background:radial-gradient(1200px 700px at 20% 0%, rgba(23,70,50,0.55) 0%, rgba(11,12,12,0.2) 45%), #060807;
  color:var(--ink);
  overflow:hidden;
}
.admin-hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.32;
  filter:brightness(0.6) contrast(1.1);
  z-index:0;
  pointer-events:none;
}
.admin-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(60% 70% at 50% 30%, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 70%);
  z-index:1;
  pointer-events:none;
}
.admin-bg-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(169,142,100,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,142,100,0.08) 1px, transparent 1px);
  background-size:120px 120px;
  opacity:.25;
  z-index:1;
}
.admin-wrapper{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  z-index:2;
}
.admin-headline h1{
  font-family:'Orbitron',sans-serif;
  font-size:44px;
  margin:4px 0 10px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.admin-headline .lede{
  max-width:820px;
  line-height:1.7;
  color:var(--ink-soft);
}
.eyebrow{
  font-size:12px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:rgba(169,142,100,0.8);
  margin:0;
}
.admin-grid{
  margin-top:32px;
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}
.admin-card{
  background:linear-gradient(160deg, rgba(26,33,30,0.9), rgba(12,14,15,0.95));
  border:1px solid rgba(169,142,100,0.35);
  border-radius:14px;
  padding:22px;
  box-shadow:0 18px 38px rgba(0,0,0,0.35);
}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(169,142,100,0.35);
  background:rgba(169,142,100,0.1);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--ink);
}
.pill-ok{
  border-color:rgba(124,187,115,0.55);
  background:rgba(124,187,115,0.16);
}
.badge-on{
  border-color:rgba(124,187,115,0.55);
  background:rgba(124,187,115,0.16);
}
.badge-off{
  border-color:rgba(214,105,98,0.55);
  background:rgba(214,105,98,0.16);
}
.label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--ink-mid);
  margin-bottom:6px;
}
.form-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.input-field{
  height:42px;
  border-radius:10px;
  border:1px solid rgba(169,142,100,0.4);
  background:rgba(12,14,15,0.9);
  color:var(--ink);
  padding:0 14px;
  font-family:'IBM Plex Mono',monospace;
}
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}
.btn-strong, .btn-danger{
  border-radius:10px;
  padding:12px 16px;
  border:1px solid rgba(169,142,100,0.5);
  background:linear-gradient(180deg, rgba(169,142,100,0.22), rgba(169,142,100,0.12));
  color:var(--ink);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-strong:disabled,
.btn-danger:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.btn-danger{
  border-color:rgba(214,105,98,0.55);
  background:linear-gradient(180deg, rgba(214,105,98,0.22), rgba(214,105,98,0.12));
}
.status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
  margin:10px 0 14px;
}
.status-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.status-block{
  padding:12px;
  border:1px solid rgba(169,142,100,0.25);
  border-radius:10px;
  background:rgba(255,255,255,0.03);
}
.metric{
  font-size:28px;
  font-family:'Orbitron',sans-serif;
  letter-spacing:1px;
}
.mono{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  word-break:break-all;
}
.alert{
  margin-top:12px;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(214,105,98,0.55);
  background:rgba(214,105,98,0.12);
  color:#f5c4b9;
}
.footnote{
  font-size:12px;
  color:var(--ink-mid);
}
.btn-neutral{
  border-radius:10px;
  padding:12px 16px;
  border:1px solid rgba(120,125,130,0.35);
  background:rgba(90,95,100,0.28);
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-neutral:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,0.25);}
.btn-neutral:active{transform:translateY(0);}

/* ==================== Study (List) ==================== */
.study-shell{min-height:100vh; background:var(--bg); padding-bottom:64px;}
.study-hero{position:relative; padding:96px 0 72px; overflow:hidden;}
.study-hero-grid{position:absolute; inset:0; background:radial-gradient(900px 500px at 10% 20%, rgba(169,142,100,0.2), transparent 60%); opacity:0.18; mix-blend-mode:screen;}
.study-hero-vignette{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);}
.study-hero-inner{position:relative; z-index:1; text-align:center;}
.study-list{padding:32px 0 64px;}
.study-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px;}
.study-card{border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:rgba(255,255,255,0.04); text-decoration:none; color:var(--ink);}
.study-card:hover{border-color:var(--brass); transform:translateY(-1px);}
.study-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.study-table{border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.study-table-head, .study-table-row{
  display:grid;
  grid-template-columns:0.7fr 3.3fr;
  gap:24px;
  padding:14px 20px;
  align-items:center;
}
.study-table-head{
  background:linear-gradient(90deg, rgba(169,142,100,0.12), rgba(169,142,100,0.04));
  border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-mid);
}
.study-table-row:nth-child(odd){background:rgba(255,255,255,0.02);}
.study-table-row:nth-child(even){background:rgba(255,255,255,0.03);}
.study-table-row span.preview{word-break:break-word;}
.link-row{
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid var(--line);
  text-align:left;
  cursor:pointer;
}
.link-row:hover{border-color:var(--brass); box-shadow:0 6px 18px rgba(0,0,0,0.2); background:rgba(255,255,255,0.05);}
.link-row.active{border-left:3px solid var(--brass); padding-left:15px; background:rgba(169,142,100,0.08);}
.title-link{display:block; padding:6px 0;}
.study-two-col{display:grid; grid-template-columns:1fr; gap:16px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--panel-deeper);}
@media(min-width:960px){.study-two-col{grid-template-columns:1fr 1fr;}}
.study-col{display:flex; flex-direction:column; gap:12px;}
.study-col-head{margin-bottom:4px;}
.md-panel{min-height:320px; border:1px solid var(--line); border-radius:10px; padding:14px; background:rgba(255,255,255,0.02); line-height:1.6;}
.md-line{margin:0 0 10px; font-family:'IBM Plex Mono', monospace; white-space:pre-wrap;}
.md-span{display:inline;}
.excalicanvas{width:100%; height:360px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,0.02);}