/* ================================================================
   Inflection Playground — 科技感主题层（深空底 + 霓虹渐变 + 网格光晕）
   仅覆盖变量与少量组件表面，不改布局结构；配合 <body class="tech"> 使用。
   ================================================================ */

.tech {
  --bg: #05070f;
  --bg-alt: #0a0e1c;
  --bg-elev: #0d1226;
  --ink: #e8ecff;
  --ink-2: #c5cdf0;
  --ink-3: #97a3cd;
  --ink-4: #7e8ab2;
  --line: #2b3459;
  --line-2: #1d2647;
  --accent: #5b8cff;
  --accent-hover: #7aa2ff;
  --accent-soft: rgba(91, 140, 255, 0.14);
  --ok: #4ade80;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.55);
  --sh-3: 0 12px 44px rgba(0, 0, 0, 0.6);
  --sh-lift: 0 24px 64px rgba(0, 0, 0, 0.65);
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(160, 107, 255, 0.13), transparent 62%),
    radial-gradient(900px 460px at 8% 12%, rgba(91, 140, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #070a16 0%, #05070f 46%, #060913 100%);
  background-attachment: fixed;
  color: var(--ink);
}

/* 网格坐标纸底纹（细线 + 顶部渐隐遮罩） */
.tech::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(123, 160, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 160, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 78%);
}

.tech > * { position: relative; z-index: 1; }

/* ---- 导航：深色玻璃 ---- */
.tech .nav {
  background: rgba(6, 9, 19, 0.78);
  border-bottom: 1px solid rgba(123, 160, 255, 0.14);
}
.tech .brand-mark { background: linear-gradient(135deg, #5b8cff, #a06bff); }
.tech .nav-cta {
  background: linear-gradient(135deg, #5b8cff, #a06bff);
  color: #fff;
  box-shadow: 0 4px 18px -6px rgba(91, 140, 255, 0.7);
}
.tech .nav-cta:hover { filter: brightness(1.12); background: linear-gradient(135deg, #5b8cff, #a06bff); }

/* ---- 文字与标题 ---- */
.tech .sec-eyebrow {
  color: #6ea8ff;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.tech .stat-num {
  background: linear-gradient(120deg, #7cc4ff 8%, #5b8cff 40%, #a06bff 74%, #ff7ac6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- 搜索 ---- */
.tech .search-input { background: rgba(13, 18, 38, 0.85); border-color: var(--line); color: var(--ink); }
.tech .search-input:focus {
  background: var(--bg-elev);
  border-color: #5b8cff;
  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.18), 0 0 24px -6px rgba(91, 140, 255, 0.55);
}

/* ---- 按钮 ---- */
.tech .btn-primary {
  background: linear-gradient(135deg, #4f7dff, #8f6bff);
  box-shadow: 0 8px 26px -10px rgba(102, 126, 255, 0.85);
}
.tech .btn-primary:hover { filter: brightness(1.1); background: linear-gradient(135deg, #4f7dff, #8f6bff); }
.tech .btn-outline:hover { background: rgba(91, 140, 255, 0.08); border-color: #5b8cff; }

/* ---- 徽标胶囊 ---- */
.tech .ai-badge { background: rgba(13, 18, 38, 0.85); border-color: var(--line-2); color: var(--ink-2); }
.tech .ai-badge:hover { border-color: #3d4a7d; }

/* ---- 应用卡片：暗玻璃 + 品牌色辉光描边 ---- */
.tech .app-card {
  background:
    linear-gradient(180deg, rgba(91, 140, 255, 0.05) 0%, rgba(13, 18, 38, 0.5) 30%, var(--bg-elev) 74%);
  border-color: var(--line-2);
  backdrop-filter: blur(8px);
}
.tech .app-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 65%, transparent), transparent 46%, color-mix(in srgb, var(--brand) 30%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}
.tech .app-card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 18px 48px -14px rgba(0, 0, 0, 0.8), 0 0 32px -10px var(--brand);
}
.tech .app-card:hover::after { opacity: 1; }
.tech .ac-media { background: var(--bg-alt); }
.tech .ac-cat {
  color: var(--ink-2);
  background: rgba(6, 9, 19, 0.78);
  backdrop-filter: blur(6px);
  border-color: var(--line-2);
}

/* ---- 今日灵感 / 心情 / 说明卡 ---- */
.tech .daily-strip { background: var(--bg-elev); border-color: var(--line-2); box-shadow: var(--sh-2); }
.tech .ds-card { background: rgba(10, 14, 28, 0.72); }
.tech .ds-card:hover { background: var(--bg-elev); border-color: var(--line); box-shadow: 0 0 22px -8px rgba(91, 140, 255, 0.5); }
.tech .ds-card em { color: var(--ok); }
.tech .mood-card { background: var(--bg-elev); }
.tech .mood-card:hover { border-color: transparent; box-shadow: 0 0 26px -8px rgba(91, 140, 255, 0.55); }
.tech .note-card { background: var(--bg-elev); }

/* ---- 门户英雄区 ---- */
.tech .portal-hero::before {
  background: radial-gradient(ellipse, rgba(91, 140, 255, 0.16) 0%, rgba(160, 107, 255, 0.07) 42%, transparent 66%);
}
.tech .hero-title .accent {
  background: linear-gradient(120deg, #7cc4ff, #5b8cff 34%, #a06bff 68%, #ff7ac6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(122, 162, 255, 0.35));
}

/* ---- 预览墙 ---- */
.tech .g-cell { background: var(--bg-elev); border-color: var(--line-2); }
.tech .g-cell:hover { box-shadow: 0 0 30px -10px rgba(91, 140, 255, 0.45); }
.tech .g-frame { background: var(--bg-alt); }
.tech .g-hero { background: transparent; border-bottom-color: var(--line-2); }
.tech .g-note { background: rgba(91, 140, 255, 0.1); color: #8fb4ff; }
.tech .collection-card { background: var(--bg-elev); }

/* ---- 页脚 ---- */
.tech .footer { background: rgba(6, 9, 19, 0.6); border-top-color: var(--line-2); }