/*
 * skin-cyber.css —— 赛博朋克皮（业主 2026-10-17 选对比图 C，用 augmented-ui 做）
 *
 * ⚠️ 只在 <html data-skin="cyber"> 时生效。哪一屏要这身皮，就在屏的返回值里写 skin: 'cyber'，
 *    main.js 的 paintOnce 换屏时贴上 / 摘掉。现在只有首页「项目」那一屏（一次只做一件，规则 366）。
 * ⚠️ 不管人选的是深色还是浅色，这身皮都是黑底 —— 跟 39 号 logo 一个世界。
 *    选择器 :root[data-skin] 和 tokens.css 里浅色那两条一样重，这个文件排在后面所以压得住。
 *
 * 切角 / 发光边框交给 augmented-ui（vendor/augmented-ui，BSD-2）：
 *   元素上写 data-augmented-ui="tl-clip br-clip border"，这里只给它 --aug-* 几个数。
 */
:root[data-skin="cyber"] {
  color-scheme: dark;
  --bg:   #060708;
  --s1:   #0b0f12;
  --s2:   #10161a;
  --s3:   #152026;
  --line: #00f0ff33;
  --line-soft: #00f0ff1f;
  --fg:   #eef2f4;
  --fg2:  #8fa3ab;
  --fg3:  #5b6d75;
  --brand:      #00f0ff;
  --brand-dim:  #00a9b5;
  --brand-ink:  #031014;
  --brand-wash: #00f0ff1a;
  --brand-line: #00f0ff55;
  --danger:     #ff4f6d;
  --bar-bg:     #060708e6;
  --tabbar-bg:  #08090be6;

  /* 霓虹红：只给错位和「待办」那种提醒，不当第二个按钮色 */
  --cy-red: #ff2b4f;
  --cy-cut: 10px;
}

/* 底上一层很淡的扫描线 —— 只有这一处纹理 */
:root[data-skin="cyber"] body {
  background: var(--bg) repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px);
}

/* ── 顶栏：logo + 等宽字标题 ── */
:root[data-skin="cyber"] .topbar { border-bottom-color: var(--line); }
:root[data-skin="cyber"] .topbar h1 {
  font-family: var(--font-num); letter-spacing: .12em; font-weight: 600;
}
.topbar .brandmark { display: flex; align-items: center; gap: 8px; flex: none; }
.topbar .brandmark svg { display: block; }
.topbar .brandmark small {
  font: 600 10px/1 var(--font-num); letter-spacing: .14em; color: var(--brand);
  opacity: .75;
}

/* ── 主按钮「拍照开新单」：实心青、两个切角 ── */
:root[data-skin="cyber"] .bigcta[data-augmented-ui] {
  --aug-tl: var(--cy-cut); --aug-br: var(--cy-cut);
  border-radius: 0; border: 0;
  font-family: var(--font-num); letter-spacing: .08em;
  text-shadow: -1px 0 #ff2b4f55;
}
:root[data-skin="cyber"] .bigcta[data-augmented-ui]:active { filter: brightness(.9); }

/* ── 项目卡：切角 + 1px 青边（augmented-ui 画边，不用 border） ── */
:root[data-skin="cyber"] .card[data-augmented-ui] {
  --aug-tl: var(--cy-cut); --aug-br: var(--cy-cut);
  --aug-border-all: 1px; --aug-border-bg: var(--line);
  --aug-inlay-bg: var(--s1);
  border: 0; border-radius: 0; background: none;
}
:root[data-skin="cyber"] .card.tap[data-augmented-ui]:hover {
  --aug-border-bg: var(--brand-line); --aug-inlay-bg: var(--s2);
}
:root[data-skin="cyber"] .card[data-augmented-ui] .thumb { border-radius: 0; }

/* 药丸：方的、等宽字 */
:root[data-skin="cyber"] .pill { border-radius: 0; font-family: var(--font-num); }

/* 「没有图，自己建」那几行 */
:root[data-skin="cyber"] .linkrow { border-radius: 0; font-family: var(--font-num); }

/* 搜索框 · 排序 · 其它按钮 · 第一次进来那张提示卡：一律方角（这身皮里只有切角，没有圆角） */
:root[data-skin="cyber"] input[type="search"] { border-radius: 0; font-family: var(--font-num); }
:root[data-skin="cyber"] main .btn,
:root[data-skin="cyber"] main .card,
:root[data-skin="cyber"] main .ch { border-radius: 0; font-family: var(--font-num); }

/* ── 底部页签：当前那一格发一点光 ── */
:root[data-skin="cyber"] .tabbar { border-top-color: var(--line); font-family: var(--font-num); }
:root[data-skin="cyber"] .tabbar [aria-current="page"] { text-shadow: 0 0 6px #00f0ff88; }

/* ── 39 号 logo 抖一下（每 3.2 秒） ── */
.ald-r { transform: translate(-1.3px, 0); }
.ald-c { transform: translate(1.3px, 0); }
@keyframes ald-r { 0%, 92%, 100% { transform: translate(-1.3px, 0) } 94% { transform: translate(-3px, 1px) } 96% { transform: translate(1px, -1px) } }
@keyframes ald-c { 0%, 92%, 100% { transform: translate(1.3px, 0) } 94% { transform: translate(3px, -1px) } 96% { transform: translate(-1px, 1px) } }
.ald-live .ald-r { animation: ald-r 3.2s steps(1) infinite; }
.ald-live .ald-c { animation: ald-c 3.2s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .ald-live .ald-r, .ald-live .ald-c { animation: none; }
}