/* ============================================================
* Daboluo Dot-Matrix Design System — COMPONENTS
* 点阵 / Nothing-style 组件库。配方直译自 bbclaw 固件 UI。
* 用法（任意子项目，一行继承）：
*
* 该文件已内联 @import tokens.css，无需单独引用 tokens。
* 设计四原则：① 单色+单一强调青 ② 点阵优先
* ③ 点亮节奏（青闪一拍再沉淀） ④ 硬切换、克制留白
* ============================================================ */
@import url("./tokens.css");
/* —— 基底：点阵背景纹理 —— */
.dm,
body.dm{
margin:0;
background:var(--bg);
background-image:
radial-gradient(circle at 20% 0%, rgba(54,223,183,.08), transparent 26rem),
radial-gradient(var(--ghost) .8px, transparent .8px);
background-size:auto, var(--pitch) var(--pitch);
color:var(--lit);
font-family:var(--mono);
font-size:var(--fs-body);
line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;
}
.dm ::selection{ background:rgba(46,196,160,.28); color:var(--lit); }
/* —— 排版：大写小标题 + 字距 —— */
.dm h1,.dm h2,.dm h3{ color:var(--lit); font-weight:700; margin:0; }
.dm h1{ font-size:26px; letter-spacing:.18em; text-transform:uppercase; }
.dm h3{ font-size:15px; letter-spacing:.08em; }
/* 仅「纯文本链接」着青；带 dm-* 组件类的 （按钮/卡片/wordmark）保留自身配色 */
.dm a:not([class*="dm-"]){ color:var(--accent); text-decoration:none; }
.dm a:not([class*="dm-"]):hover{ text-decoration:underline; text-underline-offset:3px; }
.dm code,.dm kbd{ font-family:var(--mono); color:var(--accent); }
.dm hr{ border:0; border-top:1px solid var(--ghost); margin:24px 0; }
/* —— Wordmark 头：大写 + 字距 + 青色点状下划线 —— */
.dm-wordmark{
display:inline-block; font-weight:700; letter-spacing:.42em;
text-transform:uppercase; color:var(--lit);
border-bottom:2px dotted var(--accent); padding-bottom:3px;
}
/* —— 卡片 / 区块：ghost 描边 + 半透底 —— */
.dm-card{
background:linear-gradient(180deg, var(--panel-strong), var(--panel));
border:1px solid var(--ghost);
border-radius:var(--radius); padding:18px 20px;
box-shadow:0 16px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(241,251,252,.04);
}
/* 小标题前缀三点阵：青点 + 两个 ghost 点 */
.dm-card h2,.dm-eyebrow{
font-size:11px; letter-spacing:.14em; text-transform:uppercase;
color:var(--lit); margin:0 0 12px; display:flex; align-items:center;
}
.dm-card h2::before,.dm-eyebrow::before{
content:""; width:var(--dot); height:var(--dot); border-radius:50%;
background:var(--accent);
box-shadow:9px 0 0 var(--ghost),18px 0 0 var(--ghost);
margin-right:26px; flex:0 0 auto;
}
/* —— 行 / 列表 + 选中行 motif —— */
.dm-row{
display:flex; align-items:center; gap:12px;
padding:10px 12px; border-bottom:1px solid var(--ghost); color:var(--dim);
}
.dm-row:last-child{ border-bottom:0; }
/* 固件「ghost 行面 + 青色左缘 3px 竖条 + 冷白字」直译 */
.dm-row.sel{
background:var(--accent-soft);
box-shadow:inset 3px 0 0 var(--accent); color:var(--lit);
}
/* —— 按钮：主＝青实心，次＝ghost 描边，危险＝err 描边 —— */
.dm-btn{
font-family:var(--mono); font-weight:600; font-size:13px;
border-radius:7px; padding:8px 15px; cursor:pointer;
border:1px solid var(--accent); background:var(--accent); color:var(--ink);
box-shadow:0 0 0 1px rgba(54,223,183,.08), 0 10px 24px rgba(54,223,183,.12);
transition:filter .15s ease, transform .15s ease;
}
.dm-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.dm-btn.ghost{ background:rgba(241,251,252,.03); color:var(--lit); border-color:var(--ghost); box-shadow:none; }
.dm-btn.ghost:hover{ color:var(--lit); border-color:var(--accent); }
.dm-btn.del{ background:transparent; color:var(--err); border-color:#3a2422; }
.dm-btn.del:hover{ background:rgba(230,111,111,.10); }
/* —— chip / tag：ghost 描边 + dim 字，强调态切青 —— */
.dm-chip{
display:inline-block; padding:3px 10px; border-radius:999px;
border:1px solid var(--ghost); color:var(--dim); background:rgba(241,251,252,.025);
font-size:11px; letter-spacing:.06em;
}
.dm-chip.on{ color:var(--ink); border-color:var(--accent); background:var(--accent); font-weight:700; }
/* —— 状态点 —— */
.dm-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--dim); }
.dm-dot.on{ background:var(--accent); box-shadow:0 0 8px rgba(46,196,160,.6); }
.dm-dot.ok{ background:var(--ok); }
.dm-dot.err{ background:var(--err); }
.dm-val-on{ color:var(--accent); }
.dm-val-off{ color:var(--dim); }
.dm-val-err{ color:var(--err); }
/* —— 点亮节奏：新增项青闪一拍再褪 —— */
.dm-fresh{ animation:dm-flash var(--flash) ease-out; }
@keyframes dm-flash{
0%{ background:rgba(46,196,160,.22); }
100%{ background:transparent; }
}
/* 呼吸点（最新元素/在线心跳） */
.dm-breathe{ animation:dm-breathe 1.8s ease-in-out infinite; }
@keyframes dm-breathe{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
/* —— 模态框 / 遮罩 —— */
.dm-overlay{
position:fixed; inset:0; background:rgba(3,6,8,.7);
display:flex; align-items:center; justify-content:center;
}
.dm-modal{
background:var(--bg); border:1px solid var(--ghost); border-radius:var(--radius);
padding:20px 22px; max-width:440px; width:90%;
box-shadow:0 0 0 1px rgba(46,196,160,.08),0 20px 60px rgba(0,0,0,.5);
}
/* —— 分隔点阵（区块之间的点状分隔线） —— */
.dm-divider{
height:1px;
background-image:linear-gradient(90deg, transparent, var(--ghost), transparent);
background-size:var(--pitch) var(--pitch);
background-position:center;
}
/* —— 点阵动画屏（dm-matrix）：driven by /design/dot-matrix-anim.js ——
* 容器渲染成一格格圆点的"迷你点阵屏"，动效引擎按 motif 逐帧重着色。
* 静态降级：没加载 JS 时仍是一条 ghost 点阵带，不会塌成空白。 */
.dm-matrix{
position:relative; width:100%; height:24px;
background:
radial-gradient(var(--ghost) 1.4px, transparent 1.6px) 0 0 / var(--pitch) var(--pitch);
background-position:center;
}
.dm-matrix > i{
position:absolute; width:6px; height:6px; border-radius:50%;
background:var(--ghost); display:block; will-change:opacity,background;
}
/* JS 接管后用真实点元素，关掉降级用的背景网格 */
.dm-matrix:has(> i){ background:none; }
.dm-screen{
background:var(--panel); border:1px solid var(--ghost); border-radius:8px;
padding:7px 9px; box-shadow:inset 0 1px 0 rgba(241,251,252,.05);
}
/* —— 输入框 —— */
.dm-input{
font-family:var(--mono); font-size:13px; color:var(--lit);
background:var(--panel); border:1px solid var(--ghost);
border-radius:7px; padding:8px 12px; width:100%; box-sizing:border-box;
}
.dm-input:focus{ outline:0; border-color:var(--accent); }
.dm-input::placeholder{ color:var(--dim); }