/* ============================================================
   dracao.com 共享设计系统 · 深色赛博朋克主题 v2.1
   配色：赛博朋克2077 · 夜之城
   分工：紫=表头/店头结构 · 品红=分析/强调 · 青=数据/数值 · 电光黄=身份色
   机械感：蓝图网格 + 斜纹警戒条 + 瞄准框角 + 霓虹频闪 + glitch字效 + 切角 + 扫描线
   结构：① 令牌 ② 重置 ③ 组件 ④ 工具类
   引用：<link rel="stylesheet" href="../base.css?v=8">
   ============================================================ */

/* ============ 显示字体（赛博朋克机械标题 · Rajdhani） ============ */
@font-face{
  font-family:'Rajdhani';font-style:normal;font-display:swap;font-weight:600;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/rajdhani@5.3.0/latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Rajdhani';font-style:normal;font-display:swap;font-weight:700;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/rajdhani@5.3.0/latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}

/* ============ ① 设计令牌 ============ */
:root{
  /* 背景层级（夜之城黑） */
  --bg:#050510;
  --bg-2:#0a0a18;
  --surface:#0d0d1c;
  --surface-2:#141428;
  --surface-3:#1b1b33;
  /* 边框（深紫黑） */
  --border:#1e1e3a;
  --border-2:#2a2a4d;
  /* 霓虹主色（2077 夜之城） */
  --cyan:#00f0ff;      /* 过曝电青 */
  --yellow:#fcee0a;    /* 电光黄 · 身份色 */
  --magenta:#ff10f0;   /* 电品红 */
  --purple:#7a3bff;    /* 电紫 */
  --green:#00ff9d;     /* 终端绿 */
  --amber:#ff9e00;     /* 次级暖金 */
  --red:#ff003c;       /* 绯红 */
  /* 文本 */
  --t1:#e6ecf5;
  --t2:#9db0c8;
  --t3:#5c6c84;
  /* 辉光 */
  --glow-cyan:0 0 12px rgba(0,240,255,.5);
  --glow-yellow:0 0 12px rgba(252,238,10,.45);
  --glow-magenta:0 0 12px rgba(255,16,240,.5);
  --glow-green:0 0 12px rgba(0,255,157,.45);
  /* 尺寸 */
  --radius:10px;
  --radius-sm:8px;
  --shadow:0 4px 24px rgba(0,0,0,.45);
  --font-mono:'JetBrains Mono','SF Mono',Consolas,'Courier New',monospace;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --font-display:'Rajdhani','Exo 2','Segoe UI',sans-serif;
}

/* ============ ② 基础重置 ============ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,240,255,.08), transparent 60%),
    radial-gradient(1000px 700px at 110% 115%, rgba(255,16,240,.07), transparent 55%),
    radial-gradient(900px 600px at 85% 40%, rgba(252,238,10,.03), transparent 60%),
    var(--bg);
  color:var(--t1);
  font-family:var(--font-sans);
  font-size:15px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* 细扫描线纹理（几乎不可见，增加层次） */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
/* 全息蓝图网格（青 + 品红十字线，机械未来感） */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(0,240,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,16,240,.02) 1px, transparent 1px);
  background-size:44px 44px;
  mix-blend-mode:screen;
}
a{color:var(--t2);text-decoration:none;transition:.2s}
a:hover{color:var(--cyan)}
::selection{background:rgba(255,16,240,.25);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px;border:2px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{background:var(--magenta)}

/* ============ ③ 通用组件 ============ */

/* 卡片 */
.cyber-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.cyber-card:hover{border-color:var(--border-2)}
.cyber-card::before{ /* 顶部霓虹细线：品红→紫 */
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--magenta),var(--purple),transparent);
  opacity:.6;
}

/* 工具栏 */
.cyber-toolbar{
  position:sticky;top:0;z-index:100;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:10px 16px;
  background:rgba(5,5,16,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.cyber-toolbar::before{ /* 顶部黄黑斜纹警戒条 */
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:repeating-linear-gradient(45deg,var(--yellow) 0 8px,transparent 8px 16px);
  opacity:.55;
}
.cyber-toolbar .title{
  flex:1;min-width:120px;font-size:.95em;font-weight:600;color:var(--t1);
  letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  animation:cyber-flicker 10.4s infinite, cyber-glitch 5s infinite;
}

/* 按钮 */
.cyber-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--border-2);background:var(--surface-2);color:var(--t2);
  cursor:pointer;font-size:.85em;white-space:nowrap;transition:.18s;
}
.cyber-btn:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.cyber-btn.primary{
  background:linear-gradient(120deg,rgba(255,16,240,.15),rgba(122,59,255,.15));
  border-color:var(--magenta);color:var(--magenta);
}
.cyber-btn.primary:hover{box-shadow:var(--glow-magenta)}
/* CTA 流光按钮 · 2077 标志性电光黄黑字 */
.cyber-btn.cta{
  color:#0a0a0a;font-weight:800;border:none;
  background:linear-gradient(120deg,#fcee0a,#ffd000,#fcee0a);
  background-size:300% 100%;
  animation:cyber-cta 3s linear infinite;
  box-shadow:0 0 16px rgba(252,238,10,.45);
}
.cyber-btn.cta:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 0 26px rgba(252,238,10,.65)}
@keyframes cyber-cta{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes cyber-flicker{0%,100%{opacity:1}96%{opacity:1}97%{opacity:.15}98%{opacity:1}99%{opacity:.3}}
@keyframes page-glitch{
  0%,88%,100%{transform:none;filter:none}
  89%{transform:translateX(-1px) skewX(-.2deg);filter:blur(.18px)}
  89.33%{transform:translateX(1px) skewX(.2deg);filter:blur(.3px)}
  89.67%{transform:translateX(-.7px);filter:blur(.14px)}
  90%{transform:none;filter:none}
  92.5%{transform:translateY(-.7px) translateX(.35px);filter:blur(.2px)}
  92.83%{transform:none;filter:none}
}
@keyframes cyber-glitch{
  0%,90%,100%{transform:none;filter:none}
  91%{transform:translate(-2px,1px);filter:hue-rotate(-35deg) saturate(2)}
  92%{transform:translate(2px,-1px);filter:hue-rotate(35deg) saturate(2)}
  93%{transform:translate(-1px,0);filter:none}
}
@keyframes cyber-scan{0%{background-position:0 0}100%{background-position:0 40px}}

/* KPI */
.kpi-grid{display:flex;flex-wrap:wrap;gap:14px;padding:16px 20px}
.kpi-card{
  flex:1;min-width:160px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  padding:14px 18px;position:relative;overflow:hidden;
}
.kpi-card::after{ /* 左侧霓虹竖条：品红→紫 */
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--magenta),var(--purple));
  opacity:.85;
}
.kpi-card .k-label{font-size:.75em;color:var(--t2);margin-bottom:6px;letter-spacing:.5px}
.kpi-card .k-value{
  font-size:1.5em;font-weight:700;color:var(--cyan);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  text-shadow:var(--glow-cyan);
}
.kpi-card .k-value.green{color:var(--green);text-shadow:var(--glow-green)}
.kpi-card .k-value.yellow{color:var(--yellow);text-shadow:var(--glow-yellow)}
.kpi-card .k-sub{font-size:.72em;color:var(--t3);margin-top:4px}

/* 筛选区 */
.cyber-filters{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  padding:16px 20px;border-bottom:1px solid var(--border);
  background:rgba(13,13,28,.4);
}
.cyber-field{display:flex;flex-direction:column;gap:6px}
.cyber-field label{font-size:.75em;color:var(--t2);letter-spacing:.5px}
.cyber-field select{
  background:rgba(5,5,16,.7);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  color:var(--t1);padding:8px 12px;font-size:.88em;min-width:180px;max-width:260px;
  outline:none;cursor:pointer;transition:.18s;
}
.cyber-field select:focus{border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.cyber-field select:disabled{opacity:.4;cursor:not-allowed}

/* 表格 */
.cyber-table-wrap{
  overflow:auto;margin:0 20px 24px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);max-height:calc(100vh - 320px);
  box-shadow:inset 0 0 0 1px rgba(255,16,240,.12); /* 品红内框 */
}
.cyber-table{border-collapse:collapse;font-size:.85em;width:100%;min-width:640px}
.cyber-table thead th{
  position:sticky;top:0;z-index:2;background:#16142c;color:var(--purple);font-weight:600;
  text-align:right;padding:10px 16px;border-bottom:1px solid var(--purple);
  white-space:nowrap;text-shadow:0 0 6px rgba(122,59,255,.45);
}
.cyber-table thead th:first-child{text-align:left}
.cyber-table tbody td{
  padding:8px 16px;border-bottom:1px solid rgba(30,30,58,.6);
  white-space:nowrap;text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}
.cyber-table tbody td:first-child{text-align:left;color:var(--t1);font-family:var(--font-sans)}
.cyber-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.cyber-table tbody tr:hover{background:rgba(255,16,240,.06)}
.cyber-table tbody tr.ttl td{
  background:rgba(0,240,255,.08);color:var(--cyan);font-weight:700;border-top:1px solid var(--cyan);
}
.cyber-table tbody tr.ttl td:first-child{color:var(--cyan)}

/* 加载 / 错误全屏 */
.cyber-overlay{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:var(--bg);z-index:200;color:var(--t2);font-size:.95em;
}
.cyber-overlay::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,240,255,.05) 0 2px, transparent 2px 8px);
  animation:cyber-scan 1.6s linear infinite;
}
.cyber-spinner{
  width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--magenta);
  border-radius:50%;animation:cyber-spin .8s linear infinite;box-shadow:var(--glow-magenta);
}
@keyframes cyber-spin{to{transform:rotate(360deg)}}
.cyber-error{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:var(--bg);z-index:200;color:var(--red);font-size:1em;padding:20px;text-align:center;
}

/* 徽章 */
.cyber-badge{
  display:inline-block;padding:2px 10px;border-radius:20px;font-size:.75em;
  border:1px solid var(--border-2);color:var(--t2);background:var(--surface-2);
}
.cyber-badge.cyan{color:var(--cyan);border-color:var(--cyan)}
.cyber-badge.magenta{color:var(--magenta);border-color:var(--magenta)}
.cyber-badge.green{color:var(--green);border-color:var(--green)}
.cyber-badge.yellow{color:var(--yellow);border-color:var(--yellow)}

/* 空态 / 脚注 */
.cyber-empty{padding:40px;text-align:center;color:var(--t3);font-size:.9em}
.cyber-note{padding:0 20px 20px;color:var(--t3);font-size:.75em;line-height:1.6}

/* 文本输入 */
.cyber-field input[type=text]{
  background:rgba(5,5,16,.7);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  color:var(--t1);padding:8px 12px;font-size:.88em;min-width:220px;outline:none;transition:.18s;
}
.cyber-field input[type=text]:focus{border-color:var(--magenta);box-shadow:var(--glow-magenta)}
.cyber-field input[type=text]::placeholder{color:var(--t3)}

/* 自动补全下拉 */
.ac-wrap{position:relative}
.ac-list{
  position:absolute;top:calc(100% + 4px);left:0;min-width:320px;max-width:420px;max-height:280px;
  overflow:auto;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  z-index:60;box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.ac-item{padding:8px 14px;cursor:pointer;font-size:.85em;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item:hover{background:rgba(255,16,240,.12);color:var(--magenta)}
.ac-empty{padding:10px 14px;font-size:.82em;color:var(--t3)}

/* 门店横向区块 */
.stores-row{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;padding:0 20px 8px;align-items:flex-start}
.store-block{flex:0 0 auto;min-width:300px;max-width:340px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,16,240,.1)}
.store-head{
  padding:10px 14px;border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(122,59,255,.22),transparent);
  color:var(--purple);font-weight:700;font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.store-block table{border-collapse:collapse;font-size:.82em;width:100%}
.store-block thead th{background:#16142c;color:var(--purple);font-weight:600;text-align:right;padding:7px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.store-block thead th:first-child{text-align:left}
.store-block tbody td{padding:6px 12px;border-bottom:1px solid rgba(30,30,58,.6);white-space:nowrap;text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.store-block tbody td:first-child{text-align:left;color:var(--t1);font-family:var(--font-sans)}
.store-block tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.store-block tbody tr:hover{background:rgba(255,16,240,.06)}
.store-block tbody tr.ttl td{background:rgba(0,240,255,.08);color:var(--cyan);font-weight:700;border-top:1px solid var(--cyan)}
.store-block tbody tr.ttl td:first-child{color:var(--cyan)}

/* 分析面板（规则引擎 + 大模型） */
.cyber-analysis{
  position:relative;margin:0 20px 8px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;
}
/* 瞄准框角（品红 L 形角标，机械瞄准感） */
.cyber-analysis::before{
  content:'';position:absolute;top:6px;left:6px;width:13px;height:13px;
  border-top:2px solid var(--magenta);border-left:2px solid var(--magenta);pointer-events:none;
}
.cyber-analysis::after{
  content:'';position:absolute;bottom:6px;right:6px;width:13px;height:13px;
  border-bottom:2px solid var(--magenta);border-right:2px solid var(--magenta);pointer-events:none;
}
.cyber-analysis .an-head{display:flex;align-items:center;gap:12px}
.cyber-analysis .an-title{font-size:.9em;color:var(--magenta);font-weight:700;letter-spacing:.5px;text-shadow:0 0 6px rgba(255,16,240,.45);animation:cyber-flicker 10.4s infinite, cyber-glitch 6s infinite}
.cyber-analysis .an-toggle{background:rgba(255,16,240,.12);border:1px solid var(--magenta);color:var(--magenta);padding:5px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:.82em;transition:.2s;white-space:nowrap}
.cyber-analysis .an-toggle:hover{background:rgba(255,16,240,.26)}
.cyber-analysis .an-body{font-size:.85em;line-height:1.9;color:var(--t1);margin-top:12px}
.cyber-analysis .an-meta{font-size:.75em;color:var(--t3);margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:8px}
.cyber-analysis p{margin:0 0 6px}
.cyber-analysis strong{color:var(--magenta);font-weight:700}
.cyber-analysis .an-gen{background:rgba(0,255,157,.12);border:1px solid var(--green);color:var(--green);padding:5px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:.82em;transition:.2s;white-space:nowrap;font-weight:600}
.cyber-analysis .an-gen:hover{background:rgba(0,255,157,.24)}
.cyber-analysis .an-gen:disabled{opacity:.5;cursor:not-allowed}
.cyber-analysis .llm-loading{color:var(--t2);font-size:.85em;padding:8px 0}
.cyber-analysis .llm-result{font-size:.85em;line-height:1.9;color:var(--t1)}

/* ============ ④ 工具类 ============ */
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.glow-cyan{color:var(--cyan);text-shadow:var(--glow-cyan)}
.glow-yellow{color:var(--yellow);text-shadow:var(--glow-yellow)}
.glow-magenta{color:var(--magenta);text-shadow:var(--glow-magenta)}
.glow-green{color:var(--green);text-shadow:var(--glow-green)}

/* ============ 报告页通用（市场报告：标题闪动 + 洞察框对角框） ============ */
h1{animation:cyber-flicker 10.4s infinite;text-shadow:0 0 14px rgba(252,238,10,.35)}
.section-title{animation:cyber-flicker 10.4s infinite}
.insight-box{position:relative}
.insight-box::before{content:'';position:absolute;top:6px;left:6px;width:13px;height:13px;border-top:2px solid var(--magenta);border-left:2px solid var(--magenta);pointer-events:none}
.insight-box::after{content:'';position:absolute;bottom:6px;right:6px;width:13px;height:13px;border-bottom:2px solid var(--magenta);border-right:2px solid var(--magenta);pointer-events:none}

/* ============ 响应式 ============ */
@media(max-width:600px){
  .cyber-field select{min-width:140px}
  .cyber-field input[type=text]{min-width:160px}
  .kpi-card{min-width:130px}
  .kpi-card .k-value{font-size:1.2em}
}