/* ============================================================
components.css —— 组件层（v3.0「档案 / Ledger」）
⚠ 本文件由 tools/build_css.js 自动生成，请勿直接编辑。
要改组件样式：改 assets/css/_src/ 下对应的源文件，再跑
node tools/build_css.js
------------------------------------------------------------
源文件与职责：
_src/01-core.css 控件：按钮 / 表单 / 勾选 / 开关 / 标签 / 徽标 / 进度 / FAB
_src/02-data.css 数据展示：卡片 / 表格 / 统计 / 金额 / 步骤 / 分页 / 时间线 / 空态 / 骨架 / 价格卡
_src/03-overlay.css 浮层：遮罩 / 弹窗 / 抽屉 / Toast / 撤销条
_src/04-visual.css 可视化与 DNS 基元：图表 / 迷你图 / 窗口 / 记录类型字形 / zone 区 / 委派链 / TTL 环
设计契约：prototype/DESIGN.md（token 唯一来源：assets/css/tokens.css）
============================================================ */
/* ============================================================
01-core.css
============================================================ */
/* Shared controls. Public class names and semantic states are kept stable. */
.dd-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
height:36px;padding:0 var(--sp-4);border:1px solid transparent;border-radius:var(--r-pill);
background:transparent;color:var(--text-1);font-family:inherit;font-size:var(--fs-14);font-weight:var(--fw-medium);
line-height:1;letter-spacing:var(--ls-normal);white-space:nowrap;text-decoration:none;cursor:pointer;
-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
transition:background-color var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),
border-color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std),transform var(--dur-instant) var(--ease-std)}
.dd-btn .dd-ico{margin-top:-1px}
.dd-btn--sm{height:28px;gap:var(--sp-1);padding:0 var(--sp-3);font-size:var(--fs-13)}
.dd-btn--sm .dd-ico{width:14px;height:14px}
.dd-btn--lg{height:52px;padding:14px var(--sp-8);font-size:var(--fs-16);line-height:24px}
.dd-btn--block{display:flex;width:100%}
.dd-btn:not([disabled]):not(.is-disabled):not([aria-disabled="true"]):active{transform:scale(.98)}
.dd-btn--primary,.dd-btn--glow{background:var(--color-primary);color:var(--lq-action-text);box-shadow:var(--shadow-sm)}
.dd-btn--primary:active,.dd-btn--glow:active{background:var(--color-primary-active);color:var(--lq-action-text)}
.dd-btn--glow{height:52px;padding:14px var(--sp-8);font-size:var(--fs-16);line-height:24px;box-shadow:var(--shadow-glow)}
.dd-btn--secondary{background:var(--lq-surface);border:var(--border-control);color:var(--text-1);box-shadow:var(--shadow-sm)}
.dd-btn--secondary:active{background:var(--fill-3);color:var(--text-1)}
.dd-btn--danger{background:var(--color-danger);color:var(--lq-action-text)}
.dd-btn--danger:active{background:var(--color-danger-active);color:var(--lq-action-text)}
.dd-btn--warning{background:var(--color-warning-light);color:var(--color-warning);border:1px solid var(--color-warning-disabled)}
.dd-btn--warning:active{background:var(--color-warning-light);color:var(--color-warning-active)}
.dd-btn--text{background:transparent;border-color:transparent;box-shadow:none;padding:0 var(--sp-2);color:var(--color-link)}
.dd-btn--text.dd-btn--danger{background:transparent;color:var(--color-danger)}
.dd-btn--text.dd-btn--warning{background:transparent;color:var(--color-warning)}
.dd-btn--text:active{color:var(--color-primary-active)}
.dd-btn--text.dd-btn--danger:active{color:var(--color-danger-active)}
.dd-btn--text.dd-btn--warning:active{color:var(--color-warning-active)}
.dd-btn--ghost{background:var(--fill-4);color:var(--text-2)}
.dd-btn--ghost:active{background:var(--fill-2);color:var(--text-1)}
.dd-btn:focus-visible{outline:var(--focus-ring);outline-offset:3px}
@media (hover:hover){
.dd-btn--primary:hover,.dd-btn--glow:hover{background:var(--color-primary-hover);color:var(--lq-action-text);box-shadow:var(--shadow-glow)}
.dd-btn--secondary:hover{background:var(--lq-surface-solid);border-color:var(--gray-300);box-shadow:var(--shadow-md)}
.dd-btn--danger:hover{background:var(--color-danger-hover);color:var(--lq-action-text)}
.dd-btn--warning:hover{background:var(--color-warning-light);color:var(--color-warning-hover)}
.dd-btn--text:hover{background:var(--color-primary-light);color:var(--color-link)}
.dd-btn--text.dd-btn--danger:hover{background:var(--color-danger-light);color:var(--color-danger)}
.dd-btn--text.dd-btn--warning:hover{background:var(--color-warning-light);color:var(--color-warning)}
.dd-btn--ghost:hover{background:var(--fill-3);color:var(--text-1)}
}
.dd-btn[disabled],.dd-btn.is-disabled,.dd-btn[aria-disabled="true"]{
background:var(--fill-3);border-color:transparent;color:var(--text-4);box-shadow:none;transform:none;cursor:not-allowed}
.dd-btn__spin{width:14px;height:14px;flex:0 0 auto;border-radius:var(--r-full);
border:2px solid var(--fill-2);border-top-color:currentColor;animation:ddspin .7s linear infinite}
@supports (color:color-mix(in srgb,red,blue)){
.dd-btn__spin{border-color:color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor}
}
.dd-btn:has(.dd-btn__spin){cursor:progress}
@keyframes ddspin{to{transform:rotate(360deg)}}
.dd-field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.dd-label{font-size:var(--fs-14);font-weight:var(--fw-medium);line-height:var(--lh-heading);color:var(--text-2)}
.dd-label .req{margin-left:var(--sp-0-5);color:var(--color-danger)}
.dd-hint{font-size:var(--fs-12);line-height:var(--lh-base);color:var(--text-3)}
.dd-err{display:flex;align-items:flex-start;gap:var(--sp-1);font-size:var(--fs-12);line-height:var(--lh-base);color:var(--color-danger)}
.dd-err .dd-ico{margin-top:2px}
.dd-input,.dd-textarea,.dd-select{width:100%;min-width:0;height:40px;padding:0 var(--sp-3);
border:var(--border-control);border-radius:var(--r-lg);background:var(--lq-surface);box-shadow:var(--shadow-inset-hair);
font-family:inherit;font-size:var(--fs-14);line-height:var(--lh-base);color:var(--text-1);
transition:border-color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std),background-color var(--dur-fast) var(--ease-std)}
.dd-textarea{height:auto;min-height:96px;padding:var(--sp-3);resize:vertical}
.dd-select{cursor:pointer;padding-right:var(--sp-6)}
.dd-select option{background:var(--lq-surface-solid);color:var(--text-1)}
.dd-input--lg{height:52px;font-size:var(--fs-16);padding-inline:var(--sp-4)}
.dd-input--mono{font-family:var(--font-mono);letter-spacing:var(--ls-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"zero" 1}
@media (hover:hover){
.dd-input:hover,.dd-textarea:hover,.dd-select:hover{border-color:var(--gray-300);background:var(--lq-surface-solid)}
}
.dd-input:focus,.dd-textarea:focus,.dd-select:focus{border-color:var(--color-primary);background:var(--lq-surface-solid)}
.dd-input:focus-visible,.dd-textarea:focus-visible,.dd-select:focus-visible{outline:var(--focus-ring);outline-offset:2px;box-shadow:var(--ring-focus)}
.dd-input.is-error,.dd-textarea.is-error,.dd-select.is-error{border-color:var(--color-danger);box-shadow:none}
.dd-input.is-error:focus-visible,.dd-textarea.is-error:focus-visible,.dd-select.is-error:focus-visible{outline-color:var(--color-danger)}
.dd-input[disabled],.dd-textarea[disabled],.dd-select[disabled]{background:var(--fill-4);border-color:var(--divider);color:var(--text-4);box-shadow:none;cursor:not-allowed}
.dd-input-group{display:flex;align-items:stretch;min-width:0}
.dd-input-group>.dd-input{position:relative;z-index:1;border-radius:var(--r-lg) 0 0 var(--r-lg)}
.dd-input-group:not(:has(>.dd-suffix)):not(:has(>.dd-btn))>.dd-input{border-radius:var(--r-lg)}
.dd-input-group .dd-suffix{display:flex;align-items:center;padding:0 var(--sp-3);margin-left:-1px;
border:var(--border-control);border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--bg-recess);
font-family:var(--font-mono);font-size:var(--fs-13);letter-spacing:var(--ls-mono);color:var(--text-3);white-space:nowrap}
.dd-input-group>.dd-btn{height:auto;margin-left:var(--sp-2)}
button.dd-suffix{cursor:pointer;transition:background-color var(--dur-instant) var(--ease-std),color var(--dur-instant) var(--ease-std)}
.dd-input-group:has(>.dd-input:focus-visible){border-radius:var(--r-lg);outline:var(--focus-ring);outline-offset:2px}
.dd-input-group:has(>.dd-input:focus-visible)>.dd-input{outline:0;box-shadow:none}
.dd-input-group:has(>.dd-input--lg)>.dd-suffix{font-size:var(--fs-14)}
.dd-input-group:has(>.dd-input[disabled])>.dd-suffix{color:var(--text-4)}
@media (hover:hover){button.dd-suffix:hover{background:var(--fill-3);color:var(--text-1)}}
.dd-input-wrap{position:relative;display:flex;align-items:center;min-width:0}
.dd-input-wrap .dd-input{padding-right:var(--sp-8)}
.dd-input-wrap__icon{position:absolute;right:var(--sp-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;color:var(--text-4);pointer-events:none}
.dd-check{display:inline-flex;align-items:flex-start;gap:var(--sp-2);min-height:24px;font-size:var(--fs-14);line-height:var(--lh-base);color:var(--text-2);cursor:pointer}
.dd-check input{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;
border:var(--border-control);border-radius:var(--r-sm);background-color:var(--lq-surface-solid);
background-repeat:no-repeat;background-position:center;
transition:background-color var(--dur-instant) var(--ease-std),border-color var(--dur-instant) var(--ease-std)}
.dd-check input[type=radio]{border-radius:var(--r-full)}
.dd-check input:checked{background-color:var(--color-primary);border-color:var(--color-primary)}
.dd-check input[type=checkbox]:checked{background-image:url("data:image/svg+xml;utf8,");background-size:14px 14px}
.dd-check input[type=radio]:checked{background-image:url("data:image/svg+xml;utf8,");background-size:8px 8px}
.dd-check input[type=checkbox]:indeterminate{background-color:var(--color-primary);border-color:var(--color-primary);
background-image:url("data:image/svg+xml;utf8,");background-size:12px 12px}
.dd-check input:disabled{background-color:var(--fill-3);border-color:var(--divider);cursor:not-allowed}
.dd-check input:disabled:checked{background-color:var(--color-primary-disabled)}
.dd-check:has(input:disabled){color:var(--text-4);cursor:not-allowed}
.dd-switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;width:40px;height:24px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dd-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dd-switch__track{position:relative;width:100%;height:100%;border-radius:var(--r-full);background:var(--fill-2);transition:background-color var(--dur-fast) var(--ease-std)}
.dd-switch__track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
border-radius:var(--r-full);background:var(--text-on-brand);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease-std)}
.dd-switch input:checked+.dd-switch__track{background:var(--color-success-fill)}
.dd-switch input:checked+.dd-switch__track::after{transform:translateX(16px)}
.dd-switch input:focus-visible+.dd-switch__track{outline:var(--focus-ring);outline-offset:2px}
.dd-switch input:disabled,.dd-switch:has(input:disabled){cursor:not-allowed}
.dd-switch input:disabled+.dd-switch__track{background:var(--fill-4)}
.dd-switch input:disabled:checked+.dd-switch__track{background:var(--color-success-disabled)}
.dd-tag{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-2);border-radius:var(--r-sm);
background:var(--fill-4);color:var(--text-3-strong);font-size:var(--fs-12);font-weight:var(--fw-medium);line-height:1;letter-spacing:var(--ls-normal);white-space:nowrap}
.dd-tag--sm{height:20px}
.dd-tag--pill{padding:0 var(--sp-3);border-radius:var(--r-pill)}
.dd-tag--primary{background:var(--color-primary-light);color:var(--color-link)}
.dd-tag--success{background:var(--color-success-light);color:var(--color-success)}
.dd-tag--warning{background:var(--color-warning-light);color:var(--color-warning)}
.dd-tag--danger{background:var(--color-danger-light);color:var(--color-danger-deep)}
.dd-tag--info{background:var(--color-info-light);color:var(--color-info)}
.dd-tag--outline{background:transparent;box-shadow:var(--hairline);color:var(--text-3)}
.dd-badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-0-5);min-width:18px;height:18px;
padding:0 var(--sp-1);border-radius:var(--r-full);background:var(--fill-3);color:var(--text-2);
font-size:var(--fs-11);font-weight:var(--fw-medium);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.dd-badge--danger,.dd-bell .dd-badge{background:var(--color-danger);color:var(--lq-action-text)}
.dd-dot{width:6px;height:6px;flex:0 0 auto;border-radius:var(--r-full);background:var(--color-info-fill)}
.dd-dot--active{background:var(--color-primary)}
.dd-dot--success{background:var(--color-success-fill)}
.dd-dot--warning{background:var(--color-warning-fill)}
.dd-dot--danger{background:var(--color-danger-fill)}
.dd-divider{height:1px;margin:var(--sp-4) 0;border:0;background:var(--divider)}
/* Long code fragments (formulas, token prefixes) must wrap instead of pushing past 360px. */
.dd-kbd{display:inline-block;max-width:100%;min-width:0;padding:1px var(--sp-1);border-radius:var(--r-sm);
background:var(--lq-surface-solid);box-shadow:var(--hairline);font-family:var(--font-mono);
font-size:var(--fs-11);line-height:1.4;letter-spacing:var(--ls-mono);color:var(--text-3);
white-space:normal;overflow-wrap:anywhere}
.dd-code{padding:1px var(--sp-1);border-radius:var(--r-sm);background:var(--fill-4);font-family:var(--font-mono);
font-size:var(--fs-12);letter-spacing:var(--ls-mono);color:var(--text-2);max-width:100%;min-width:0;overflow-wrap:anywhere}
.dd-progress{height:6px;border-radius:var(--r-full);background:var(--fill-3);overflow:hidden}
.dd-progress__bar{height:100%;border-radius:var(--r-full);background:var(--grad-bar);transition:width var(--dur-base) var(--ease-std)}
.dd-progress--warning .dd-progress__bar{background:var(--color-warning-fill)}
.dd-progress--danger .dd-progress__bar{background:var(--color-danger-fill)}
.dd-fab{position:fixed;right:var(--sp-6);bottom:var(--sp-6);z-index:var(--z-fab);display:flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:var(--r-full);background:var(--color-primary);color:var(--lq-action-text);box-shadow:var(--shadow-lg);
cursor:pointer;transition:background-color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std),transform var(--dur-instant) var(--ease-std)}
.dd-fab .dd-ico{width:var(--ico-24);height:var(--ico-24)}
.dd-fab:active{transform:scale(.98)}
@media (hover:hover){.dd-fab:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-xl)}}
@media (max-width:767px){
.dd-fab{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + var(--sp-4))}
.dd-input,.dd-select,.dd-textarea{font-size:var(--fs-16)}
}
/* Details menus: the shared mechanism behind .dd-page-head__more (更多操作), .dd-filters__more
(更多筛选) and .dd-table__more (行内更多). Pure CSS; pages own the content. Menu items are
.dd-menu__item buttons/links inside a .dd-menu__panel. */
.dd-menu,.dd-page-head__more,.dd-filters__more,.dd-table__more{position:relative;display:inline-flex}
.dd-menu>summary,.dd-page-head__more>summary,.dd-filters__more>summary,.dd-table__more>summary{
display:inline-flex;align-items:center;gap:var(--sp-1);height:32px;min-height:32px;padding:0 var(--sp-2);
border-radius:var(--r-md);color:var(--text-3);font-size:var(--fs-13);font-weight:var(--fw-medium);
line-height:1;white-space:nowrap;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none;
transition:background-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out)}
.dd-table__more>summary{height:28px;min-height:28px}
.dd-menu>summary::-webkit-details-marker,.dd-page-head__more>summary::-webkit-details-marker,
.dd-filters__more>summary::-webkit-details-marker,.dd-table__more>summary::-webkit-details-marker{display:none}
.dd-menu>summary::after,.dd-page-head__more>summary::after,.dd-filters__more>summary::after,.dd-table__more>summary::after{
content:"";width:0;height:0;margin-left:2px;flex:0 0 auto;
border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;opacity:.72}
.dd-menu[open]>summary,.dd-page-head__more[open]>summary,.dd-filters__more[open]>summary,.dd-table__more[open]>summary,
.dd-menu>summary:active,.dd-page-head__more>summary:active,.dd-filters__more>summary:active,.dd-table__more>summary:active{
background:var(--fill-3);color:var(--text-1)}
@media (hover:hover){
.dd-menu>summary:hover,.dd-page-head__more>summary:hover,.dd-filters__more>summary:hover,.dd-table__more>summary:hover{
background:var(--fill-3);color:var(--text-1)}
}
.dd-menu__panel{position:absolute;top:calc(100% + var(--sp-1));right:0;z-index:var(--z-popper);
display:flex;flex-direction:column;min-width:200px;max-width:min(320px,calc(100vw - var(--sp-8)));
padding:var(--sp-1);background:var(--lq-surface-solid);border:1px solid var(--lq-border);
border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.dd-menu__item{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:32px;padding:var(--sp-1) var(--sp-2);
border-radius:var(--r-sm);font-size:var(--fs-13);color:var(--text-2);text-align:left;
transition:background-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out)}
.dd-menu__item:active{background:var(--fill-2);color:var(--text-1)}
.dd-menu__item--danger{color:var(--color-danger)}
.dd-menu__item--danger:active{background:var(--color-danger-light);color:var(--color-danger-deep)}
@media (hover:hover){
.dd-menu__item:hover{background:var(--fill-3);color:var(--text-1)}
.dd-menu__item--danger:hover{background:var(--color-danger-light);color:var(--color-danger-deep)}
}
.dd-menu__sep{height:1px;margin:var(--sp-1) var(--sp-2);background:var(--divider)}
.dd-menu__hint{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-11);line-height:var(--lh-base);color:var(--text-4)}
/* 移动端触控达标（主线6）：≤767 按钮最小 44×44，行内资金类/删除类操作不再 28px；
桌面尺寸不变。紧凑 chrome（顶栏余额胶囊）在 layout.css 单独豁免。
min-height 会钳过 height:32 的页头次要钮，移动端一并升到 44（与页头既有口径一致）。 */
@media (max-width:767px){
.dd-btn{min-height:44px;min-width:44px}
}
@supports selector(:has(*)){
/* An open row menu must escape the table's own scroll box, not be clipped by it. */
.dd-table-wrap:has(.dd-menu[open]),.dd-table-wrap:has(.dd-table__more[open]),
.dd-table-wrap--scroll:has(.dd-menu[open]),.dd-table-wrap--scroll:has(.dd-table__more[open]){overflow:visible;max-height:none}
}
/* ============================================================
02-data.css
============================================================ */
/* Glass surfaces, data and business components. DNS/status semantics keep their own colors. */
/* Surface hierarchy (docs/llmapi-density-review.md): --primary is the page's single main work
area; the default card is denoised context; --flat carries notes/history/口径; --diagnostic
recesses raw evidence (zone files, payload snapshots). No transform/filter/contain on card
bodies — fixed children (batch bars) must keep the viewport as containing block. */
.dd-card{--dd-card-pad:var(--sp-5);min-width:0;background:var(--lq-surface-quiet);
border:1px solid var(--lq-border-quiet);border-radius:var(--r-card);box-shadow:var(--shadow-card-quiet)}
.dd-card--xl{border-radius:var(--r-2xl)}
.dd-card--primary{--dd-card-pad:var(--sp-6);background:var(--lq-surface-primary);
border-color:var(--lq-border-primary);box-shadow:var(--lq-shadow)}
.dd-card--flat{box-shadow:none;background:var(--fill-4);border-color:transparent}
.dd-card--diagnostic{--dd-card-pad:var(--sp-4);border-radius:var(--r-lg);background:var(--bg-recess);
border-color:transparent;box-shadow:var(--shadow-inset-hair)}
.dd-card--diagnostic .dd-card__title{font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--text-2)}
.dd-card--diagnostic .dd-card__desc{color:var(--text-4)}
.dd-card__label{display:inline-flex;align-items:center;height:20px;padding:0 var(--sp-1);max-width:100%;
border-radius:var(--r-sm);background:var(--fill-2);color:var(--text-3);font-family:var(--font-mono);
font-size:var(--fs-11);letter-spacing:var(--ls-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-card--hover{transition:box-shadow var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std)}
.dd-card--hover:active{border-color:var(--color-primary)}
@media (hover:hover){.dd-card--hover:hover{box-shadow:var(--shadow-card-hover);border-color:var(--color-primary-disabled)}}
.dd-card.is-active{border-color:var(--color-primary);box-shadow:var(--lq-shadow)}
.dd-card__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);
padding:var(--dd-card-pad);border-bottom:1px solid var(--divider)}
.dd-card__head--top,.dd-card__head:has(.dd-card__desc){align-items:flex-start}
.dd-card__head--top>.dd-card__actions,.dd-card__head:has(.dd-card__desc)>.dd-card__actions{align-self:flex-start}
.dd-card__head--plain{border-bottom:0}
.dd-card__head-main{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;flex:1}
.dd-card__title{font-family:var(--font-sans);font-size:var(--fs-17);font-weight:var(--fw-semibold);color:var(--text-1);
line-height:var(--lh-heading);letter-spacing:var(--ls-normal)}
.dd-card__desc{font-size:var(--fs-12);color:var(--text-3);line-height:var(--lh-base)}
.dd-card__desc--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.dd-card__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto;flex-wrap:wrap;min-height:28px;max-width:100%}
.dd-card__body{padding:var(--dd-card-pad)}
.dd-card__body--tight{padding:var(--sp-4)}
.dd-card__body--flush{padding:0}
.dd-card__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);
padding:var(--sp-3) var(--dd-card-pad);border-top:1px solid var(--divider);font-size:var(--fs-13);color:var(--text-3)}
.dd-card>.dd-card__foot{border-radius:0 0 var(--r-card) var(--r-card)}
.dd-card--xl>.dd-card__foot{border-radius:0 0 var(--r-2xl) var(--r-2xl)}
.dd-card--diagnostic>.dd-card__foot{border-radius:0 0 var(--r-lg) var(--r-lg)}
/* Tables scroll inside their own surface; opaque sticky headings remain readable over data. */
.dd-table-wrap{overflow-x:auto;position:relative;max-width:100%;border-radius:var(--r-lg);-webkit-overflow-scrolling:touch}
.dd-table-wrap--scroll{max-height:min(520px,72vh);overflow-y:auto}
.dd-table{width:100%;font-size:var(--fs-13);color:var(--text-2)}
.dd-table th{position:sticky;top:0;z-index:2;background:var(--table-head-sticky-bg);color:var(--table-head-text);
font-weight:var(--fw-medium);font-size:var(--fs-13);text-align:left;white-space:nowrap;padding:var(--sp-3) var(--sp-4);
letter-spacing:var(--ls-normal);box-shadow:inset 0 -1px 0 var(--divider)}
.dd-table td{padding:var(--sp-3) var(--sp-4);height:52px;vertical-align:middle;color:var(--text-2);
border-bottom:1px solid var(--divider);overflow-wrap:anywhere;
transition:background-color var(--dur-instant) var(--ease-std)}
.dd-table--dense td{height:44px;padding:var(--sp-2) var(--sp-4)}
.dd-table--striped tbody tr:nth-child(even) td{background:var(--table-stripe)}
@media (hover:hover){.dd-table tbody tr:hover td{background:var(--table-row-hover)}}
.dd-table tbody tr:last-child td{border-bottom:0}
.dd-table .num,.dd-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.dd-table .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-mono);color:var(--text-1)}
.dd-table__actions,.dd-table__acts{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-1);min-width:0;flex-wrap:wrap}
.dd-table__actions .dd-btn,.dd-table__acts .dd-btn{flex:0 0 auto}
.dd-table__main{display:flex;flex-direction:column;gap:var(--sp-0-5);min-width:0;font-size:var(--fs-14);
font-weight:var(--fw-medium);color:var(--text-1);line-height:var(--lh-snug)}
.dd-table__main>.dd-table__sub,.dd-table__main>.t-note{font-size:var(--fs-12);font-weight:var(--fw-regular);color:var(--text-3);line-height:var(--lh-base)}
.dd-table__sub{font-size:var(--fs-12);color:var(--text-3);line-height:var(--lh-base);min-width:0;overflow-wrap:anywhere}
.dd-card__body--flush .dd-table th:first-child,.dd-card__body--flush .dd-table td:first-child{padding-left:var(--dd-card-pad)}
.dd-card__body--flush .dd-table th:last-child,.dd-card__body--flush .dd-table td:last-child{padding-right:var(--dd-card-pad)}
.dd-tr--risk{background:var(--color-danger-light);box-shadow:inset 3px 0 0 var(--color-danger)}
.dd-table tbody tr.dd-tr--risk td{background:var(--color-danger-light)}
.dd-table tbody tr.dd-tr--risk td:first-child{box-shadow:inset 3px 0 0 var(--color-danger)}
.dd-table--striped tbody tr.dd-tr--risk td,.dd-table--striped tbody tr.dd-tr--risk:nth-child(even) td{background:var(--color-danger-light)}
/* 表格移动降级（可选修饰类，页面按需挂，不挂则维持默认横滚；桌面不受影响）：
--pin-first 首列钉住：横滚时主键/域名列保持可见（条纹/风险行底色同步补齐）；
--hint 横滚提示：由 dd.js 实测 scrollWidth 挂 is-scrollable——右缘渐隐（mask）+ 底部
sticky 提示条，滚到末端自动摘除；仅 ≤767 生效。 */
.dd-table-wrap--pin-first .dd-table th:first-child{position:sticky;left:0;z-index:3;
background:var(--lq-surface-solid);box-shadow:inset -1px 0 0 var(--divider),inset 0 -1px 0 var(--divider)}
.dd-table-wrap--pin-first .dd-table td:first-child{position:sticky;left:0;z-index:1;
background:var(--lq-surface-solid);box-shadow:inset -1px 0 0 var(--divider)}
.dd-table-wrap--pin-first .dd-table tbody tr:nth-child(even) td:first-child{background:var(--table-stripe)}
.dd-table-wrap--pin-first .dd-table tbody tr.dd-tr--risk td:first-child,
.dd-table-wrap--pin-first .dd-table tbody tr.dd-tr--risk:nth-child(even) td:first-child{background:var(--color-danger-light)}
@media (max-width:767px){
.dd-table-wrap--hint.is-scrollable{
-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,1) calc(100% - 24px),rgba(0,0,0,.4));
mask-image:linear-gradient(90deg,rgba(0,0,0,1) calc(100% - 24px),rgba(0,0,0,.4))}
.dd-table-wrap--hint.is-scrollable::after{
content:"← 左右滑动查看更多列";display:block;position:sticky;bottom:0;z-index:2;
padding:var(--sp-1) var(--sp-3);background:var(--lq-surface-solid);box-shadow:inset 0 1px 0 var(--divider);
font-size:var(--fs-11);line-height:var(--lh-base);color:var(--text-3);text-align:right;white-space:nowrap}
}
@media (hover:hover){
.dd-table tbody tr.dd-tr--risk:hover td{box-shadow:inset 0 0 0 999px var(--table-row-hover)}
.dd-table tbody tr.dd-tr--risk:hover td:first-child{box-shadow:inset 3px 0 0 var(--color-danger),inset 0 0 0 999px var(--table-row-hover)}
}
.dd-stat{--stat-accent:var(--color-primary);position:relative;min-width:0;padding:var(--sp-6);
background:var(--lq-surface-quiet);border:1px solid var(--lq-border-quiet);border-radius:var(--r-xl);box-shadow:var(--shadow-card-quiet);
}
.dd-stat::before{display:none}
.dd-stat--success,.dd-stat:has(>.dd-stat__ico--success){--stat-accent:var(--color-success)}
.dd-stat--warning,.dd-stat:has(>.dd-stat__ico--warning){--stat-accent:var(--color-warning)}
.dd-stat--danger,.dd-stat:has(>.dd-stat__ico--danger){--stat-accent:var(--color-danger)}
.dd-stat--info,.dd-stat:has(>.dd-stat__ico--info){--stat-accent:var(--color-info)}
.dd-stat--flush,.dd-stat--mini{padding:var(--sp-4)}
.dd-stat--flush::before,.dd-stat--mini::before{display:none}
.dd-stat--mini .dd-stat__value{font-size:var(--fs-24)}
.dd-stat--mini .dd-stat__foot{margin-top:var(--sp-1)}
.dd-stat--mini .dd-stat__ico{width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-md)}
.dd-stat--mini .dd-stat__ico .dd-ico{width:var(--ico-16);height:var(--ico-16)}
.dd-stat__label{font-size:var(--fs-13);color:var(--text-3);display:flex;align-items:center;gap:var(--sp-1);min-width:0;flex-wrap:wrap;line-height:var(--lh-base)}
.dd-stat__value{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2);
font-family:var(--font-sans);font-size:var(--fs-32);font-weight:var(--fw-semibold);color:var(--text-1);
line-height:var(--lh-tight);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.dd-stat__value--sm{font-size:var(--fs-24)}
.dd-stat__value--lg{font-size:var(--fs-40)}
.dd-stat__unit{font-family:var(--font-sans);font-size:var(--fs-13);font-weight:var(--fw-regular);color:var(--text-3);letter-spacing:var(--ls-normal)}
.dd-stat__foot{margin-top:var(--sp-2);font-size:var(--fs-12);color:var(--text-3);line-height:var(--lh-base);overflow-wrap:anywhere}
.dd-stat__ico{width:var(--ico-swatch);height:var(--ico-swatch);border-radius:var(--ico-swatch-r);flex:0 0 auto;
display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--sp-3);background:var(--color-primary-light);color:var(--stat-accent)}
.dd-stat__ico .dd-ico{width:var(--ico-20);height:var(--ico-20)}
.dd-stat__ico--success{background:var(--color-success-light);color:var(--color-success)}
.dd-stat__ico--warning{background:var(--color-warning-light);color:var(--color-warning)}
.dd-stat__ico--danger{background:var(--color-danger-light);color:var(--color-danger)}
.dd-stat__ico--info{background:var(--color-info-light);color:var(--color-info)}
.dd-stat__ico--brand,.dd-stat__ico--spark{background:var(--color-primary-light);color:var(--color-primary)}
.dd-stat__ico--inline{width:auto;height:auto;background:transparent;border-radius:0;margin:0;padding:0}
.dd-stat__ico--inline .dd-ico{width:var(--ico-16);height:var(--ico-16)}
.dd-stat__ico--inline.dd-stat__ico--brand,.dd-stat__ico--inline.dd-stat__ico--spark{color:var(--color-primary)}
.dd-stat__ico--inline.dd-stat__ico--success{color:var(--color-success)}
.dd-stat__ico--inline.dd-stat__ico--warning{color:var(--color-warning)}
.dd-stat__ico--inline.dd-stat__ico--danger{color:var(--color-danger)}
.dd-stat__ico--inline.dd-stat__ico--info{color:var(--text-3)}
.dd-stat:has(>.dd-stat__ico),.dd-stat--ico{display:grid;grid-template-columns:var(--ico-swatch) minmax(0,1fr);column-gap:var(--sp-3);align-items:start}
.dd-stat:has(>.dd-stat__ico)>.dd-stat__ico,.dd-stat--ico>.dd-stat__ico{grid-row:1/span 4;margin-bottom:0}
.dd-stat:has(>.dd-stat__ico)>.dd-stat__label,.dd-stat--ico>.dd-stat__label{margin-top:1px}
.dd-stat:has(>.dd-stat__ico)>.dd-stat__value,.dd-stat--ico>.dd-stat__value{margin-top:var(--sp-1)}
.dd-stat--mini.dd-stat:has(>.dd-stat__ico),.dd-stat--mini.dd-stat--ico{grid-template-columns:var(--sp-8) minmax(0,1fr)}
.dd-stat:has(>.dd-stat__ico)>.dd-stat__label>.dd-stat__ico,.dd-stat__label>.dd-stat__ico~.dd-stat__ico{display:none}
.dd-stat__delta{display:inline-flex;align-items:center;gap:var(--sp-0-5);font-size:var(--fs-12);font-weight:var(--fw-medium);
color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.dd-stat__delta .dd-ico{width:12px;height:12px}
.dd-stat__delta.is-up{color:var(--color-success)}
.dd-stat__delta.is-down{color:var(--color-danger)}
.dd-stat__delta.is-flat{color:var(--text-3)}
.dd-stat__label .dd-stat__delta{margin-left:auto}
.dd-stat__spark{display:block;margin-top:var(--sp-3);height:28px;color:var(--stat-accent)}
.dd-stat__spark svg{display:block;width:100%;height:100%;overflow:visible}
.dd-stat--hero .dd-stat__value{font-size:var(--fs-40)}
.dd-stat--accent{border-color:var(--color-primary-disabled)}
.dd-money{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium);color:var(--text-1);letter-spacing:var(--ls-mono);white-space:nowrap}
.dd-money--lg{font-size:var(--fs-24);font-weight:var(--fw-heading)}
.dd-money--xl{font-size:var(--fs-40);font-weight:var(--fw-heading);color:var(--color-primary);letter-spacing:var(--ls-tight)}
.dd-balance-card .dd-money,.dd-balance-card .dd-money--xl{color:var(--text-on-brand)}
.dd-money--danger{color:var(--color-danger)}
.dd-money--success{color:var(--color-success)}
.dd-money--muted{color:var(--text-3);font-weight:var(--fw-regular)}
.dd-steps{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.dd-step{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-13);color:var(--text-3);line-height:var(--lh-base)}
.dd-step__no{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:24px;height:24px;border-radius:var(--r-full);
background:var(--fill-3);color:var(--text-3);font-size:var(--fs-12);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
.dd-step.is-active{color:var(--text-1);font-weight:var(--fw-medium)}
.dd-step.is-active .dd-step__no{background:var(--color-primary);color:var(--text-on-brand)}
.dd-step.is-done .dd-step__no{background:var(--color-success);color:var(--text-on-brand)}
.dd-step__sep{width:var(--sp-6);height:1px;flex:0 0 auto;background:var(--gray-200)}
.dd-tabs{display:flex;align-items:flex-end;gap:var(--sp-5);border-bottom:1px solid var(--divider);overflow-x:auto;overscroll-behavior-x:contain}
.dd-tab{padding:var(--sp-3) 0;font-size:var(--fs-14);color:var(--text-3);white-space:nowrap;border-bottom:2px solid transparent;
transition:color var(--dur-instant) var(--ease-std)}
@media (hover:hover){.dd-tab:hover{color:var(--text-1)}}
.dd-tab:active{color:var(--text-1)}
.dd-tab.is-active{color:var(--color-link);font-weight:var(--fw-medium);border-bottom-color:var(--color-primary)}
.dd-seg{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);max-width:100%;overflow-x:auto;background:var(--fill-4);border-radius:var(--r-lg)}
.dd-seg button{height:28px;flex:0 0 auto;padding:0 var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-13);color:var(--text-3);
transition:background-color var(--dur-instant) var(--ease-std),color var(--dur-instant) var(--ease-std),box-shadow var(--dur-instant) var(--ease-std)}
@media (hover:hover){.dd-seg button:hover:not(.is-active){color:var(--text-1)}}
.dd-seg button:active{transform:scale(.98)}
.dd-seg button.is-active{background:var(--lq-surface-solid);color:var(--color-link);font-weight:var(--fw-medium);box-shadow:var(--shadow-sm)}
.dd-chip{display:inline-flex;align-items:center;height:32px;padding:0 var(--sp-4);border:1px solid var(--divider);
border-radius:var(--r-full);background:var(--lq-surface);font-size:var(--fs-13);color:var(--text-2);white-space:nowrap;
transition:border-color var(--dur-instant) var(--ease-std),color var(--dur-instant) var(--ease-std)}
@media (hover:hover){.dd-chip:hover{border-color:var(--color-primary-disabled);color:var(--text-1)}}
.dd-chip:active{transform:scale(.98)}
.dd-chip.is-active{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-link);font-weight:var(--fw-medium)}
.dd-card--hover:focus-visible,.dd-price-card:focus-visible,.dd-session-card:focus-visible,.dd-qual-card:focus-visible,
.dd-record:focus-visible,.dd-dropzone:focus-visible,.dd-chip:focus-visible,.dd-tab:focus-visible,
.dd-seg button:focus-visible,.dd-pager button:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.dd-chip[disabled],.dd-tab[disabled],.dd-seg button[disabled],.dd-pager button[disabled]{color:var(--text-4);background:var(--fill-4);
border-color:transparent;box-shadow:none;transform:none;cursor:not-allowed;font-weight:var(--fw-regular)}
.dd-alert{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);
background:var(--color-info-light);box-shadow:inset 3px 0 0 var(--color-info);font-size:var(--fs-13);line-height:var(--lh-base);color:var(--text-2)}
.dd-alert--info{background:var(--color-info-light);box-shadow:inset 3px 0 0 var(--color-info)}
.dd-alert--success{background:var(--color-success-light);box-shadow:inset 3px 0 0 var(--color-success)}
.dd-alert--warning{background:var(--color-warning-light);box-shadow:inset 3px 0 0 var(--color-warning)}
.dd-alert--danger{background:var(--color-danger-light);box-shadow:inset 3px 0 0 var(--color-danger);color:var(--text-1)}
.dd-alert__icon{flex:0 0 auto;display:inline-flex;align-items:center;height:20px;font-weight:var(--fw-heading);color:var(--text-3)}
.dd-alert--info .dd-alert__icon{color:var(--color-info)}
.dd-alert--success .dd-alert__icon{color:var(--color-success)}
.dd-alert--warning .dd-alert__icon{color:var(--color-warning)}
.dd-alert--danger .dd-alert__icon{color:var(--color-danger)}
.dd-empty{display:flex;flex-direction:column;align-items:center;gap:0;padding:var(--sp-10) var(--sp-6);text-align:center}
.dd-empty>*+*{margin-top:var(--sp-2)}
.dd-empty__art+*,.dd-empty>.dd-art+*{margin-top:var(--sp-3)}
.dd-empty>.dd-btn,.dd-empty>.l-flex{margin-top:var(--sp-5)}
.dd-empty__art{width:var(--art-96);height:var(--art-96);flex:0 0 auto;display:flex;align-items:center;justify-content:center;
color:var(--art-color);background:none;border-radius:0;font-size:0;line-height:0}
.dd-empty__art svg{display:block;width:100%;height:100%}
.dd-empty__art--sm,.dd-empty--sm .dd-empty__art{width:calc(var(--art-96) / 1.5);height:calc(var(--art-96) / 1.5)}
/* Archived illustrations remain available at a quiet, bounded scale. */
.dd-plate{display:block;width:100%;max-width:var(--art-plate);max-height:180px;object-fit:contain;height:auto;margin:0 auto;flex:0 0 auto;
opacity:.58;filter:var(--lq-plate-filter);background:none;border:0;border-radius:0;box-shadow:none}
.dd-plate--sm{max-width:calc(var(--art-plate) * .62)}
.dd-plate--wide{max-width:min(100%,var(--art-plate-wide));max-height:140px}
.dd-empty .dd-plate,.dd-empty__plate{margin-bottom:var(--sp-4)}
.dd-empty--sm .dd-plate{max-width:calc(var(--art-plate) * .5)}
.dd-empty__title{font-size:var(--fs-17);font-weight:var(--fw-heading);color:var(--text-1);line-height:var(--lh-heading);letter-spacing:var(--ls-normal)}
.dd-empty__desc{font-size:var(--fs-14);color:var(--text-3);line-height:var(--lh-relaxed);max-width:var(--measure);text-wrap:pretty}
.dd-empty--sm{padding:var(--sp-8) var(--sp-4);gap:0}
.dd-empty--sm>*,.dd-empty--sm>*+*{margin-top:0}
.dd-empty--sm .dd-empty__title{font-size:var(--fs-14);font-weight:var(--fw-medium)}
.dd-empty--sm .dd-empty__art+*{margin-top:var(--sp-2)}
.dd-empty--inline{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--sp-4);padding:var(--sp-6);text-align:left}
.dd-empty--inline>*,.dd-empty--inline>*+*{margin-top:0}
.dd-skeleton{height:16px;border-radius:var(--r-sm);background:var(--fill-3);position:relative;overflow:hidden;animation:ddsh 1.6s var(--ease-std) infinite}
.dd-skeleton::after{display:none}
@keyframes ddsh{0%,100%{opacity:.55}50%{opacity:1}}
.dd-pager{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-13);color:var(--text-3)}
.dd-pager button{min-width:32px;height:32px;padding:0 var(--sp-2);border:1px solid var(--divider);border-radius:var(--r-md);
background:var(--lq-surface);color:var(--text-2);font-variant-numeric:tabular-nums;
transition:border-color var(--dur-instant) var(--ease-std),color var(--dur-instant) var(--ease-std)}
@media (hover:hover){.dd-pager button:hover:not(.is-active):not([disabled]){border-color:var(--color-primary-disabled);color:var(--text-1)}}
.dd-pager button:active:not([disabled]){transform:scale(.98)}
.dd-pager button.is-active{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-link);font-weight:var(--fw-medium)}
.dd-pager button[disabled]{background:var(--fill-4);border-color:transparent;box-shadow:none;color:var(--text-4)}
.dd-timeline{display:flex;flex-direction:column;gap:var(--sp-4)}
.dd-timeline__item{position:relative;display:flex;gap:var(--sp-3);font-size:var(--fs-13);color:var(--text-2);line-height:var(--lh-base)}
.dd-timeline__item:not(:last-child)::before{content:"";position:absolute;left:3.5px;top:14px;bottom:calc(var(--sp-4) * -1);width:1px;background:var(--divider)}
.dd-timeline__dot{position:relative;z-index:1;width:8px;height:8px;margin-top:6px;border-radius:var(--r-full);background:var(--fill-1);flex:0 0 auto}
.dd-timeline__item.is-done .dd-timeline__dot{background:var(--color-success-fill)}
.dd-timeline__item.is-active .dd-timeline__dot{background:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}
.dd-desc{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--sp-3) var(--sp-4);font-size:var(--fs-13);align-items:baseline}
.dd-desc dt{color:var(--text-3);line-height:var(--lh-base)}
.dd-desc dd{margin:0;color:var(--text-1);min-width:0;overflow-wrap:anywhere}
.dd-list-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--divider);overflow:hidden}
.dd-list-row:last-child{border-bottom:0}
.dd-record{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--divider);
border-radius:var(--r-lg);background:var(--lq-surface-quiet);transition:border-color var(--dur-fast) var(--ease-std)}
@media (hover:hover){.dd-record:hover{border-color:var(--color-primary-disabled)}}
.dd-record__type{width:56px;flex:0 0 auto;font-family:var(--font-mono);font-size:var(--fs-12);font-weight:var(--fw-medium);color:var(--color-link);letter-spacing:var(--ls-mono)}
.dd-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
/* Filters: frequent fields inline; low-frequency fields fold into .dd-filters__more (details);
active filters echo back as removable .dd-filters__chip. */
.dd-filters{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;min-width:0}
.dd-filters__item{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.dd-filters__more .dd-menu__panel{right:auto;left:0;min-width:min(320px,calc(100vw - var(--sp-8)))}
.dd-filters__more-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3) var(--sp-4);padding:var(--sp-3)}
.dd-filters__chips{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0;width:100%}
.dd-filters__chip{display:inline-flex;align-items:center;gap:var(--sp-1);max-width:100%;min-width:0;height:24px;
padding:0 var(--sp-2);border-radius:var(--r-pill);background:var(--color-primary-light);color:var(--color-link);
font-size:var(--fs-12);font-weight:var(--fw-medium);line-height:1;white-space:nowrap}
.dd-filters__chip--muted{background:var(--fill-3);color:var(--text-3-strong)}
.dd-filters__chip__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dd-filters__chip__x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 auto;
border-radius:var(--r-full);color:currentColor;font-size:var(--fs-12);line-height:1;cursor:pointer;opacity:.72;
transition:background-color var(--dur-instant) var(--ease-out),opacity var(--dur-instant) var(--ease-out)}
.dd-filters__chip__x:active{opacity:1}
.dd-filters__chip__x:focus-visible{outline:var(--focus-ring);outline-offset:1px}
@media (hover:hover){.dd-filters__chip__x:hover{background:var(--fill-2);opacity:1}}
.dd-dropzone{padding:var(--sp-10) var(--sp-6);border:1px dashed var(--gray-300);border-radius:var(--r-xl);background:var(--lq-surface);
text-align:center;font-size:var(--fs-13);line-height:var(--lh-base);color:var(--text-3);
transition:border-color var(--dur-instant) var(--ease-std),color var(--dur-instant) var(--ease-std)}
@media (hover:hover){.dd-dropzone:hover{border-color:var(--color-primary);color:var(--text-2)}}
.dd-dropzone:active{border-color:var(--color-primary)}
.dd-dropzone.is-over{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--text-1)}
.dd-quote{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);border-radius:var(--r-lg);background:var(--bg-recess);
box-shadow:var(--shadow-inset-hair);font-size:var(--fs-13);color:var(--text-2)}
.dd-quote__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.dd-quote__row--total{margin-top:var(--sp-1);padding-top:var(--sp-3);border-top:1px solid var(--divider);font-size:var(--fs-14);color:var(--text-1);font-weight:var(--fw-medium)}
.dd-balance-card{padding:var(--sp-6);border-radius:var(--r-xl);background:var(--grad-hero-deep);color:var(--text-on-brand);box-shadow:var(--shadow-md)}
.dd-balance-card__row{display:flex;gap:var(--sp-8);margin-top:var(--sp-4);flex-wrap:wrap}
.dd-balance-card__cell{display:flex;flex-direction:column;gap:var(--sp-0-5);font-size:var(--fs-12);color:var(--on-brand-dim);line-height:var(--lh-base)}
.dd-qual-card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);border:1px solid var(--lq-border);
border-left:3px solid var(--color-primary);border-radius:var(--r-xl);background:var(--lq-surface);box-shadow:var(--lq-shadow);
transition:box-shadow var(--dur-fast) var(--ease-std)}
@media (hover:hover){.dd-qual-card:hover{box-shadow:var(--shadow-card-hover)}}
.dd-qual-card.is-used{border-left-color:var(--text-4);background:var(--bg-recess)}
.dd-qual-card.is-expiring{border-left-color:var(--color-warning)}
.dd-session-card{display:block;border:1px solid var(--lq-border);border-radius:var(--r-xl);background:var(--lq-surface);box-shadow:var(--lq-shadow);overflow:hidden;
transition:box-shadow var(--dur-fast) var(--ease-std)}
@media (hover:hover){.dd-session-card:hover{box-shadow:var(--shadow-card-hover)}}
.dd-session-card:active{border-color:var(--color-primary)}
.dd-session-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--divider)}
.dd-session-card__body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6)}
.dd-countdown{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium);letter-spacing:var(--ls-mono);color:var(--color-warning)}
.dd-price-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-6);
border:1px solid var(--lq-border);border-radius:var(--r-xl);background:var(--lq-surface);box-shadow:var(--lq-shadow);cursor:pointer;
transition:box-shadow var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std)}
@media (hover:hover){.dd-price-card:hover{box-shadow:var(--shadow-card-hover)}}
.dd-price-card:active{border-color:var(--color-primary)}
.dd-price-card.is-active{border-color:var(--color-primary);box-shadow:var(--lq-shadow)}
.dd-price-card__name{font-size:var(--fs-17);font-weight:var(--fw-heading);color:var(--text-1);line-height:var(--lh-heading);letter-spacing:var(--ls-normal)}
.dd-price-card__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-1)}
.dd-price-card__unit{font-size:var(--fs-12);color:var(--text-3)}
.dd-price-card__feat{display:flex;flex-direction:column;gap:var(--sp-3);font-size:var(--fs-13);color:var(--text-2);line-height:var(--lh-base)}
.dd-price-card__feat .dd-ico{color:var(--color-success)}
.dd-price-card__feat .is-no .dd-ico{color:var(--text-4)}
.dd-price-card .dd-btn{margin-top:auto}
.dd-price-card__flag{position:absolute;top:-10px;right:var(--sp-4);padding:2px var(--sp-3);border-radius:var(--r-pill);
background:var(--lq-surface-solid);box-shadow:var(--hairline);color:var(--color-link);font-size:var(--fs-12);font-weight:var(--fw-medium);line-height:1.4}
.dd-price-card__flag--top{top:0;right:auto;left:50%;transform:translate(-50%,-50%);padding:3px var(--sp-3);
background:var(--color-primary);color:var(--text-on-brand);box-shadow:var(--shadow-sm);letter-spacing:var(--ls-normal)}
.dd-price-card.is-recommended,.dd-price-card--rec{border-color:var(--color-primary);box-shadow:var(--shadow-card-hover)}
@media (hover:hover){.dd-price-card.is-recommended:hover,.dd-price-card--rec:hover{box-shadow:var(--shadow-card-lift)}}
.dd-price-card.is-recommended:active,.dd-price-card--rec:active{border-color:var(--color-primary)}
/* This legacy label occupies flow space, never the title or a control. */
.dd-price-card--rec::after{content:'推荐';order:-1;align-self:flex-end;padding:2px var(--sp-2);border-radius:var(--r-pill);
background:var(--color-primary-light);color:var(--color-link);font-size:var(--fs-11);font-weight:var(--fw-medium);line-height:1.5}
@media (max-width:767px){
.dd-table td{height:44px}
.dd-table th,.dd-table td{padding-left:var(--sp-3);padding-right:var(--sp-3)}
/* 行内按钮 44px 后间距同步放宽；两容器本就 flex-wrap:wrap，放不下换行不挤压 */
.dd-table__actions,.dd-table__acts{gap:var(--sp-2)}
.dd-card__head,.dd-card__body,.dd-card__foot{padding:var(--sp-4)}
.dd-card__body--flush{padding:0}
.dd-card__body--flush .dd-table th:first-child,.dd-card__body--flush .dd-table td:first-child{padding-left:var(--sp-4)}
.dd-card__body--flush .dd-table th:last-child,.dd-card__body--flush .dd-table td:last-child{padding-right:var(--sp-4)}
.dd-filters__more .dd-menu__panel{left:calc(-1 * var(--sp-4))}
.dd-desc{grid-template-columns:1fr;gap:var(--sp-1)}
.dd-desc dt{margin-top:var(--sp-3)}
.dd-desc dd{margin-bottom:var(--sp-2)}
}
/* —— 行转卡（--stack 修饰类，与 --pin-first/--hint 同族）：≤767px 时宽表不再依赖横向滚动，
每个 tbody tr 竖排成一张卡（四级表面里的 quiet 档：发丝边 + --lq-surface-quiet 底）。
「标签:值」的标签来自 td[data-label]，由 dd.js Dd.tableStack 按 thead 列名自动写入
（幂等，页面可手写覆盖）；无 data-label 的 td（勾选列 / colspan 合并行 / 操作列）
不出 ::before，整行展开。
斑马纹 / hover / 风险行底色不删除——逐 td 平铺后自然升级为整卡底色；
≥768px 完全不生效；与 --pin-first 同挂时 stack 优先：thead 隐藏 + 下方 reset 让
sticky 首列干净失效，卡片态无横滚可钉。 */
@media (max-width:767px){
.dd-table.dd-table--stack{display:block;min-width:0}
/* 覆盖页面级「.pg-xx .dd-table{min-width:760px}」横滚预留（domains/dns 等） */
.dd-table-wrap .dd-table.dd-table--stack{min-width:0}
.dd-table.dd-table--stack thead{display:none}
.dd-table.dd-table--stack tbody{display:block}
.dd-table.dd-table--stack tbody tr{display:block;overflow:hidden;margin-top:var(--sp-3);
border:1px solid var(--lq-border-quiet);border-radius:var(--r-lg);background:var(--lq-surface-quiet);
box-shadow:var(--shadow-card-quiet)}
.dd-table.dd-table--stack tbody tr:first-child{margin-top:0}
.dd-table.dd-table--stack tbody tr td{display:flow-root;height:auto;min-height:32px;
padding:var(--sp-1) var(--sp-3);border-bottom:0;text-align:right;color:var(--text-1)}
.dd-table.dd-table--stack tbody tr td::before{content:attr(data-label);float:left;max-width:44%;
margin-right:var(--sp-4);color:var(--text-3);font-family:var(--font-sans);font-size:var(--fs-12);
font-weight:var(--fw-regular);letter-spacing:var(--ls-normal);line-height:var(--lh-base);
text-align:left;overflow-wrap:anywhere}
.dd-table.dd-table--stack tbody tr td:not([data-label]){text-align:left}
.dd-table.dd-table--stack tbody tr td:not([data-label])::before{content:none}
.dd-table.dd-table--stack .dd-table__actions,.dd-table.dd-table--stack .dd-table__acts{justify-content:flex-start}
/* pin-first 同挂时复位 sticky/实底/发丝，卡片态由 tr 承担卡面 */
.dd-table-wrap--pin-first .dd-table.dd-table--stack tbody td:first-child{position:static;background:none;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.dd-skeleton{animation:none;opacity:1}}
@media print{
.dd-table-wrap,.dd-table-wrap--scroll{max-height:none;overflow:visible}
.dd-table th{position:static;box-shadow:none;border-bottom:1px solid var(--gray-200)}
.dd-table tr{break-inside:avoid}
.dd-card,.dd-stat,.dd-price-card,.dd-session-card,.dd-qual-card,.dd-record{box-shadow:none;border:1px solid var(--gray-200)}
.dd-card--flat,.dd-card--diagnostic{background:none}
.dd-menu__panel{position:static;box-shadow:none;border:1px solid var(--gray-200)}
.dd-skeleton,.dd-skeleton::after{animation:none}
}
/* ============================================================
03-overlay.css
============================================================ */
/* Modal, drawer and notification surfaces. The mask never creates a fixed containing block. */
.dd-mask{position:fixed;inset:0;z-index:var(--z-mask);display:flex;align-items:center;justify-content:center;
padding:var(--sp-5);background:var(--mask-bg);animation:ddmaskin var(--dur-base) var(--ease-out)}
.dd-modal{position:relative;z-index:var(--z-modal);flex:0 0 auto;display:flex;flex-direction:column;
width:min(560px,100%);max-height:100%;border:1px solid var(--lq-border);border-radius:var(--r-xl);
background:var(--lq-surface-solid);box-shadow:var(--shadow-xl);overflow:hidden;animation:ddpop var(--dur-base) var(--ease-out)}
.dd-modal--sm{width:min(420px,100%)}
.dd-modal--lg{width:min(720px,100%)}
.dd-modal__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
padding:var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-6);border-bottom:1px solid var(--divider)}
.dd-modal__title{min-width:0;font-family:var(--font-sans);font-size:var(--fs-20);font-weight:var(--fw-semibold);
line-height:var(--lh-heading);letter-spacing:var(--ls-normal);color:var(--text-1);overflow-wrap:anywhere}
.dd-modal__body{flex:1 1 auto;min-height:0;padding:var(--sp-6);overflow:auto;overscroll-behavior:contain}
.dd-modal__foot{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-3);
padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--divider);background:var(--fill-4)}
.dd-modal__x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
font-size:var(--fs-20);line-height:1;color:var(--text-3);background:var(--fill-4);border:0;border-radius:var(--r-full);cursor:pointer;
transition:background-color var(--dur-instant) var(--ease-std),color var(--dur-instant) var(--ease-std)}
@media (hover:hover){.dd-modal__x:hover{background:var(--fill-3);color:var(--text-1)}}
.dd-modal__x:active{background:var(--fill-2);color:var(--text-1)}
.dd-modal__x:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.dd-modal__x:disabled{background:none;color:var(--text-4);cursor:not-allowed}
.dd-drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);display:flex;flex-direction:column;
width:min(480px,100%);background:var(--lq-surface-solid);border-left:1px solid var(--lq-border);
border-radius:var(--r-xl) 0 0 var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;animation:ddslide var(--dur-slow) var(--ease-out)}
.dd-drawer--bottom{top:auto;left:0;right:0;bottom:0;width:100%;max-height:85vh;max-height:85dvh;
border-radius:var(--r-xl) var(--r-xl) 0 0;border-left:0;border-top:1px solid var(--lq-border);
padding-bottom:env(safe-area-inset-bottom,0px);animation:ddup var(--dur-slow) var(--ease-out)}
.dd-toast-wrap{position:fixed;right:var(--sp-6);bottom:var(--sp-6);z-index:var(--z-toast);
display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2);max-width:calc(100vw - var(--sp-12));pointer-events:none}
.dd-undo-wrap{position:fixed;left:calc(var(--shell-offset-x) + var(--sp-6));bottom:var(--sp-6);z-index:var(--z-toast);
display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);
max-width:calc(100vw - var(--shell-offset-x) - var(--sp-12));pointer-events:none}
.dd-toast{--toast-accent:var(--color-info-fill);position:relative;display:flex;align-items:center;gap:var(--sp-3);
max-width:420px;padding:var(--sp-4);background:var(--lq-surface-solid);border:1px solid var(--lq-border);
border-left:3px solid var(--toast-accent);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
font-size:var(--fs-14);line-height:var(--lh-heading);color:var(--text-1);animation:ddtoastin var(--dur-base) var(--ease-out)}
.dd-toast::before{display:none}
.dd-toast__ico{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--toast-accent)}
.dd-toast__msg{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.dd-toast__act{flex:0 0 auto;min-height:28px;padding:0 var(--sp-1);font:inherit;font-weight:var(--fw-semibold);
color:var(--color-link);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
transition:color var(--dur-instant) var(--ease-std)}
@media (hover:hover){.dd-toast__act:hover{color:var(--color-primary-hover)}}
.dd-toast__act:active{color:var(--color-primary-active)}
.dd-toast__act:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.dd-toast__act:disabled{color:var(--text-4);text-decoration:none;cursor:not-allowed}
.dd-toast--success{--toast-accent:var(--color-success-fill)}
.dd-toast--error{--toast-accent:var(--color-danger-fill)}
.dd-toast--warning{--toast-accent:var(--color-warning-fill)}
.dd-toast--info{--toast-accent:var(--color-info-fill)}
.dd-toast--undo{--toast-accent:var(--color-primary);pointer-events:auto}
@keyframes ddmaskin{from{background-color:transparent}}
@keyframes ddpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes ddslide{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes ddup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes ddtoastin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.dd-toast.is-out,.dd-undo-wrap.is-out{opacity:0;transform:translateY(6px);
transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);pointer-events:none}
@media (max-width:767px){
.dd-mask{padding:var(--sp-3)}
.dd-modal__head{padding:var(--sp-4)}
.dd-modal__title{font-size:var(--fs-18)}
.dd-modal__body,.dd-modal__foot{padding:var(--sp-4)}
.dd-drawer{border-radius:0}
.dd-drawer--bottom{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:88vh;max-height:88dvh}
.dd-toast-wrap,.dd-undo-wrap{left:var(--sp-4);right:var(--sp-4);
bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + var(--sp-4));align-items:stretch;max-width:none}
.dd-toast{max-width:none}
}
@media (prefers-reduced-motion:reduce){
.dd-mask,.dd-modal,.dd-drawer,.dd-toast{animation:none}
.dd-toast.is-out,.dd-undo-wrap.is-out{transform:none}
}
/* ============================================================
04-visual.css
============================================================ */
/* Charts, product windows and DNS-specific visual primitives. */
.dd-chart{position:relative;width:100%;color:var(--color-primary)}
.dd-chart__svg{display:block;width:100%;overflow:visible}
.dd-chart__grid{stroke:var(--chart-grid);stroke-width:1;stroke-dasharray:3 5;shape-rendering:crispEdges}
.dd-chart__axis{fill:var(--chart-axis-text);font-size:var(--fs-11);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.dd-chart__axis--x{text-anchor:middle}
.dd-chart__axis--y{text-anchor:end;dominant-baseline:middle}
.dd-chart__baseline{stroke:var(--gray-200);stroke-width:1;shape-rendering:crispEdges}
.dd-chart__bar{fill:var(--color-primary);rx:var(--chart-bar-r);ry:var(--chart-bar-r);transition:opacity var(--dur-fast) var(--ease-out)}
.dd-chart__g0{stop-color:var(--blue-300);stop-opacity:1}
.dd-chart__g1{stop-color:var(--color-primary);stop-opacity:1}
.dd-chart__f0{stop-color:var(--color-primary);stop-opacity:.15}
.dd-chart__f1{stop-color:var(--color-primary);stop-opacity:.015}
.dd-art{display:block;width:100%;height:100%;color:var(--art-color)}
.dd-chart__hit{fill:transparent}
.dd-chart__area{fill:var(--color-primary);fill-opacity:.10;stroke:none}
.dd-chart__line{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dd-chart__dot{fill:var(--lq-surface-solid);stroke:var(--chart-1);stroke-width:2}
@media (hover:hover){
.dd-chart__col:hover .dd-chart__bar{opacity:.82}
.dd-chart__col:hover .dd-chart__hit{fill:var(--color-primary-light);fill-opacity:1}
.dd-chart__point:hover .dd-chart__dot{fill:var(--chart-1)}
}
.dd-chart__tip{position:absolute;z-index:var(--z-popper);transform:translate(-50%,-100%);
background:var(--lq-surface-solid);border:1px solid var(--lq-border);color:var(--text-1);font-size:var(--fs-12);line-height:var(--lh-snug);
padding:var(--sp-3);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;
opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.dd-chart__tip.is-on{opacity:1}
.dd-chart__tip b{font-family:var(--font-mono);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-mono)}
.dd-chart__tip i{font-style:normal;color:var(--text-3);margin-right:var(--sp-2)}
.dd-chart__empty{display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:var(--fs-13)}
.dd-chart__legend{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-12);color:var(--text-3)}
.dd-chart__legend i{width:10px;height:10px;border-radius:3px;background:var(--chart-1);display:inline-block;margin-right:var(--sp-1)}
.dd-spark{display:block;width:100%;height:28px;color:var(--color-primary)}
.dd-spark__line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dd-spark__area{fill:currentColor;fill-opacity:.10;stroke:none}
.dd-spark__dot{fill:currentColor}
.dd-spark--success{color:var(--color-success)}
.dd-spark--danger{color:var(--color-danger)}
.dd-spark--muted{color:var(--text-4)}
.dd-appwin{position:relative;border:1px solid var(--lq-border);border-radius:var(--r-xl);background:var(--lq-surface);
box-shadow:var(--shadow-window);overflow:hidden}
.dd-appwin__bar{display:flex;align-items:center;gap:var(--sp-3);height:44px;padding:0 var(--sp-4);
background:var(--lq-surface);border-bottom:1px solid var(--divider)}
.dd-appwin__dots{display:flex;gap:6px;flex:0 0 auto}
.dd-appwin__dots i{width:9px;height:9px;border-radius:var(--r-full);background:var(--gray-300)}
.dd-appwin__url{flex:1;min-width:0;height:24px;border:1px solid var(--divider);border-radius:var(--r-md);
background:var(--lq-surface);color:var(--text-3);font-family:var(--font-mono);font-size:var(--fs-11);
display:flex;align-items:center;justify-content:center;padding:0 var(--sp-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-appwin__img{display:block;width:100%;height:auto;background:var(--bg-subtle)}
.dd-appwin--fade .dd-appwin__img{-webkit-mask-image:none;mask-image:none}
.dd-appwin--fade::after{display:none}
.dd-appwin__float{position:absolute;z-index:var(--z-content);background:var(--lq-surface-solid);border:1px solid var(--lq-border);
border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;
gap:var(--sp-2);font-size:var(--fs-13);color:var(--text-2)}
.dd-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.dd-shot{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;color:inherit}
.dd-shot:hover{color:inherit}
.dd-shot:active{color:var(--color-link)}
.dd-shot .dd-appwin{transition:box-shadow var(--dur-fast) var(--ease-out)}
@media (hover:hover){.dd-shot:hover .dd-appwin{box-shadow:var(--shadow-window-hover)}}
.dd-shot__cap{display:flex;flex-direction:column;gap:var(--sp-1)}
.dd-shot__t{font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--text-1)}
.dd-shot__d{font-size:var(--fs-13);color:var(--text-3);line-height:var(--lh-base)}
.dd-eyebrow{font-size:var(--fs-12);line-height:var(--lh-base);color:var(--text-3)}
.dd-tr--risk{background:var(--color-danger-light);box-shadow:inset 3px 0 0 var(--color-danger)}
.dd-table--striped tbody tr.dd-tr--risk td,.dd-table--striped tbody tr.dd-tr--risk:nth-child(even) td{background:var(--color-danger-light)}
/* DNS record hues are independent of the terracotta brand. */
.dd-rtype{font-family:var(--font-mono);font-weight:var(--fw-semibold);font-size:inherit;letter-spacing:var(--ls-mono);white-space:nowrap;color:var(--rt-default)}
.dd-rtype[data-type="A"]{color:var(--rt-a)}
.dd-rtype[data-type="AAAA"]{color:var(--rt-aaaa)}
.dd-rtype[data-type="CNAME"]{color:var(--rt-cname)}
.dd-rtype[data-type="MX"]{color:var(--rt-mx)}
.dd-rtype[data-type="TXT"]{color:var(--rt-txt)}
.dd-rtype[data-type="NS"]{color:var(--rt-ns)}
.dd-rtype[data-type="SRV"]{color:var(--rt-srv)}
.dd-rtype[data-type="CAA"]{color:var(--rt-caa)}
.dd-rtype--sm{font-size:var(--fs-11)}
.dd-rtype--box{display:inline-block;padding:var(--sp-0-5) var(--sp-1);line-height:var(--lh-tight);background:var(--fill-4);border-radius:var(--r-sm)}
.dd-zone{--zone-cols:minmax(0,1.6fr) 72px 48px 72px minmax(0,1fr);
background:var(--lq-surface);border:1px solid var(--lq-border);border-radius:var(--r-xl);box-shadow:var(--lq-shadow);
font-family:var(--font-mono);font-size:var(--fs-13);font-variant-numeric:tabular-nums;max-width:100%;
padding:var(--sp-5) 0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.dd-zone__row{display:grid;grid-template-columns:var(--zone-cols);align-items:baseline;column-gap:var(--sp-3);
min-width:560px;padding:0 var(--sp-6);line-height:2}
.dd-zone__row--comment{grid-template-columns:minmax(0,1fr);color:var(--text-3)}
.dd-zone__row--comment>*{color:inherit}
.dd-zone__name,.dd-zone__ttl,.dd-zone__class,.dd-zone__type,.dd-zone__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-zone__name{color:var(--text-2)}
.dd-zone__ttl,.dd-zone__class{color:var(--text-3)}
.dd-zone__type{color:var(--text-2)}
.dd-zone__value{color:var(--text-1)}
.dd-zone__caret{display:inline-block;width:1ch;height:1em;margin-left:var(--sp-0-5);vertical-align:-.14em;
background:var(--color-primary);animation:ddzonecaret 1.1s linear infinite}
@keyframes ddzonecaret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Inside a diagnostic surface the zone viewer gives up its own card grammar. */
.dd-card--diagnostic .dd-zone{background:transparent;border-color:transparent;box-shadow:none;padding-block:var(--sp-2)}
.dd-digchain{--dg-node:12px;display:flex;align-items:flex-start;width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:var(--sp-1) 0}
.dd-digchain__hop{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);flex:0 0 auto;text-align:center}
.dd-digchain__node{width:var(--dg-node);height:var(--dg-node);border-radius:var(--r-full);background:var(--fill-3);box-shadow:var(--hairline);flex:0 0 auto}
.dd-digchain__name{font-family:var(--font-mono);font-size:var(--fs-13);letter-spacing:var(--ls-mono);color:var(--text-3);white-space:nowrap}
.dd-digchain__meta{font-family:var(--font-mono);font-size:var(--fs-11);font-variant-numeric:tabular-nums;color:var(--text-4);white-space:nowrap}
.dd-digchain__link{flex:1 1 auto;min-width:var(--sp-6);height:1px;margin-top:calc(var(--dg-node) / 2);background:var(--divider)}
.dd-digchain__hop.is-done .dd-digchain__node{background:var(--color-success)}
.dd-digchain__hop.is-done .dd-digchain__name{color:var(--text-2)}
.dd-digchain__hop.is-done+.dd-digchain__link{background:var(--gray-300)}
.dd-digchain__hop.is-current .dd-digchain__node{background:var(--color-primary)}
.dd-digchain__hop.is-current .dd-digchain__name{color:var(--text-1);font-weight:var(--fw-semibold)}
.dd-digchain__hop.is-current .dd-digchain__meta{color:var(--text-3)}
.dd-digchain__hop.is-error .dd-digchain__node{background:var(--color-danger)}
.dd-digchain__hop.is-error .dd-digchain__name{color:var(--color-danger)}
/* The TTL progress ring is masked, not covered by a pseudo-element. */
.dd-ttl{--ttl-size:56px;--ttl-w:2px;--ttl-p:100%;--ttl-tone:var(--color-primary);--ttl-hole:var(--bg-card);
position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:var(--sp-1);width:var(--ttl-size)}
.dd-ttl__ring{position:relative;display:block;width:var(--ttl-size);height:var(--ttl-size);border-radius:var(--r-full);
background:conic-gradient(var(--ttl-tone) var(--ttl-p),var(--fill-3) 0);
-webkit-mask-image:radial-gradient(farthest-side,transparent calc(100% - var(--ttl-w)),var(--mask-fade) calc(100% - var(--ttl-w) + .5px));
mask-image:radial-gradient(farthest-side,transparent calc(100% - var(--ttl-w)),var(--mask-fade) calc(100% - var(--ttl-w) + .5px))}
.dd-ttl__ring::before,.dd-ttl__ring::after{display:none}
.dd-ttl__val{position:absolute;top:0;left:0;right:0;height:var(--ttl-size);display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:var(--fs-13);font-weight:var(--fw-semibold);letter-spacing:var(--ls-mono);font-variant-numeric:tabular-nums;color:var(--text-1)}
.dd-ttl__label{font-size:var(--fs-11);color:var(--text-3);font-variant-numeric:tabular-nums;text-align:center}
.dd-ttl--sm{--ttl-size:40px}
.dd-ttl--lg{--ttl-size:72px}
.dd-ttl--sm .dd-ttl__val{font-size:var(--fs-11)}
.dd-ttl--lg .dd-ttl__val{font-size:var(--fs-17)}
.dd-ttl.is-expiring{--ttl-tone:var(--color-warning)}
.dd-ttl.is-dead{--ttl-tone:var(--color-danger)}
.dd-ttl.is-expiring .dd-ttl__val{color:var(--color-warning)}
.dd-ttl.is-dead .dd-ttl__val{color:var(--color-danger)}
@media (max-width:900px){.dd-shots{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
.dd-chart__axis--y{font-size:10px}
.dd-appwin__bar{height:36px;padding:0 var(--sp-3)}
.dd-appwin__float{display:none}
.dd-zone{font-size:var(--fs-12);padding-block:var(--sp-4)}
.dd-zone__row{min-width:480px;padding:0 var(--sp-4)}
.dd-digchain{flex-direction:column;overflow:visible}
.dd-digchain__hop{flex-direction:row;align-items:center;gap:var(--sp-2);text-align:left;flex-wrap:wrap}
.dd-digchain__link{flex:0 0 auto;width:1px;height:var(--sp-4);min-width:0;margin:0 0 0 calc(var(--dg-node) / 2)}
}
@media (prefers-reduced-motion:reduce){.dd-zone__caret{animation:none;opacity:1}}