/* ============ Seven · Noir 侦探主题 ============ */
/* 设计关键词：案卷、便笺、纸夹、微颗粒、黄铜+青绿点缀、昏暗光晕 */

:root{
  --seven-bg: #081214;             /* 主背景更暗更深 */
  --seven-panel: #0e1b1e;          /* 卡片背景 */
  --seven-panel-2: #0b1517;
  --seven-ink: #dbe9e5;            /* 正文 */
  --seven-muted: #8db1a8;          /* 次要文字 */
  --seven-border: #203a3f;         /* 边框 */
  --seven-accent: #59e4cf;         /* 青绿点缀 */
  --seven-brass: #c9a86a;          /* 黄铜色 · 用于分隔线/小装饰 */
  --seven-danger: #d66b6b;         /* 盖章红 */
  --seven-ok: #4cd3a8;             /* 通过绿色 */
}

/* ---- 背景：暗角 + 轻噪点 ---- */
body.noir{
  background: radial-gradient(1100px 700px at 20% 0%, #0c1b1e 0%, #081214 60%, #050b0c 100%);
  color: var(--seven-ink);
  font-feature-settings: "liga" 1;
}
body.noir::before{
  content:"";
  position:fixed; inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(89,228,207,.10), transparent 60%),
    radial-gradient(800px 400px at -10% 40%, rgba(201,168,106,.08), transparent 65%);
  mix-blend-mode: overlay; opacity:.6;
}
/* 细微颗粒感（无需图片） */
body.noir::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 3px);
  opacity:.35;
}

/* ---- 顶部导航：小型徽记 + 黄铜下划线 ---- */
.noir .nav{
  background: linear-gradient(180deg, rgba(11,25,27,.7), rgba(8,18,20,.6));
  border:1px solid var(--seven-border);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
.noir .brand .title{
  letter-spacing:.5px; font-weight:800;
  text-shadow: 0 1px 0 #000;
}
.noir .brand .subtitle{
  color: var(--seven-muted);
}
.noir .nav::after{
  content:""; display:block; height:1px; margin-top:8px;
  background: linear-gradient(90deg, transparent, var(--seven-brass), transparent);
  opacity:.5;
}

/* ---- 工具条：放大镜 / 筛选像案件检索 ---- */
.noir .panel .toolbar .filters input,
.noir .panel .toolbar .filters select{
  background: linear-gradient(180deg, #0b1517, #0a1416);
  border:1px solid var(--seven-border);
  color: var(--seven-ink);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.noir input#q{
  padding-left: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%2359e4cf' stroke-width='2'/%3E%3Cpath d='M20 20L17 17' stroke='%2359e4cf' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:10px 50%;
}

/* ---- 卡片：案卷卡（Evidence Card） ---- */
.noir .card{
  position:relative;
  background: linear-gradient(180deg, var(--seven-panel), var(--seven-panel-2));
  border:1px solid var(--seven-border);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.02) inset,
    0 16px 40px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
/* 左上角纸夹 */
.noir .card::before{
  content:"";
  position:absolute; left:14px; top:-10px;
  width:18px; height:26px;
  border:2px solid var(--seven-brass);
  border-radius: 6px 6px 10px 10px;
  transform: rotate(-12deg);
  opacity:.7;
}
/* 右上角案件条（点缀） */
.noir .card::after{
  content:"FILE";
  position:absolute; right:-18px; top:12px;
  padding:2px 12px; font-weight:800; font-size:11px; letter-spacing:.08em;
  color:#091214; background: var(--seven-accent);
  transform: rotate(12deg);
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  opacity:.7;
}
.noir .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(0,0,0,.55);
  border-color: #2a5259;
}

/* 标题：像打字机打印在案卷上 */
.noir .q-card .title{
  font-weight:900;
  color:#dff4f0;
  text-shadow: 0 1px 0 #000;
  letter-spacing:.2px;
}
.noir .q-card .title a,
.noir .q-card .title span{ color:inherit; text-decoration:none; }

/* 标签：像档案边签 */
.noir .pill{
  background: linear-gradient(180deg, #0f1f22, #0b1416);
  border: 1px solid var(--seven-border);
  color: var(--seven-muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  border-radius: 10px;
}
.noir .q-meta .pill{
  border-color:#2a5259;
  color:#9dd2c9;
}
.noir .q-stats .pill{
  border-color:#3d494b;
  color:#a9c0bc;
}

/* 卡片内分隔细线（黄铜） */
.noir .q-stats{ border-top:1px dashed rgba(201,168,106,.25); padding-top:8px; }

/* 状态角标（如果以后卡片上有 .is-closed/.is-accepted 类） */
.noir .card.is-closed::after{
  content:"CLOSED";
  background: var(--seven-danger); color:#2a0d12;
}
.noir .card.is-accepted::after{
  content:"RESOLVED";
  background: var(--seven-ok); color:#05261d;
}

/* 顶部按钮微调：更像工具栏 */
.noir .btn,
.noir .btn-link{
  border-radius: 12px;
  border:1px solid var(--seven-border);
  background: linear-gradient(180deg, #0f1f22, #0b1416);
  color: var(--seven-ink);
}
.noir .btn.primary{
  background: linear-gradient(180deg, #0b2b2c, #0a1d1e);
  border-color: #2a5259;
  box-shadow: 0 6px 20px rgba(89,228,207,.15);
}
.noir .btn.primary:hover{ box-shadow: 0 10px 26px rgba(89,228,207,.22); }

/* 列表区的外层 panel 更像案桌 */
.noir .panel{
  background: linear-gradient(180deg, rgba(9,21,23,.6), rgba(7,15,17,.6));
  border:1px solid var(--seven-border);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

/* 移动端：稍微放大触发区 */
@media (max-width: 640px){
  .noir .card{ border-radius: 12px; }
  .noir .panel .toolbar .filters input,
  .noir .panel .toolbar .filters select{ min-width: 140px; }
}