/* 首屏在 .dx 之外（布局里 @yield('hero') 在 .pn-main 之前），所以品牌深紫
   必须定义在 :root 上，否则 .dx-hero 取不到这个变量，背景会直接消失。 */
:root{--dx-brand-deep:#241478}
:root[data-theme="dark"]{--dx-brand-deep:#1A0F5E}
.dx{
    /* 取色跟着 logo 走：logo 主色是 #4D33DE，站内品牌紫 4C32DF，深色用 241478。
       正文墨色与分隔线都往紫偏一点，整页才像一套，而不是黑白稿上贴了个紫按钮。 */
    --dx-ink:#14112E;
    --dx-text:#221F3A;
    --dx-muted:#6B6884;
    --dx-faint:#9A98AE;
    --dx-line:#E7E6F0;
    --dx-line-strong:#D5D3E4;
    --dx-bg:#fff;
    --dx-soft:#F7F6FC;
    --dx-accent:#4D33DE;
    --dx-ease:cubic-bezier(.22,.61,.36,1);
    background:var(--dx-bg);
    color:var(--dx-text);
    font-variant-numeric:tabular-nums;
    -webkit-font-smoothing:antialiased;
}
:root[data-theme="dark"] .dx{
    --dx-ink:#F3F2FB;
    --dx-text:#D8D6E8;
    --dx-muted:#9694AC;
    --dx-faint:#6D6B84;
    --dx-line:#26243F;
    --dx-line-strong:#343150;
    --dx-bg:#0F0E1E;
    --dx-soft:#16152A;
    --dx-accent:#A99BFF;
}

/* 内容区不再受 .pn-main 的 1440/40px 约束：极简版式要能整幅通栏，
   宽度交给 .dx-wrap 决定。 */
body.page-ownhero .pn-main{padding:0;max-width:none}
.dx-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.dx-wrap--wide{max-width:1240px}
.dx-sec{padding:84px 0}
.dx-sec--sm{padding:56px 0}
.dx-sec--rule{border-top:1px solid var(--dx-line)}
/* 首屏下沿到第一块内容的留白：统一按域名首页那条来（56px），并且不加分隔线——
   首屏本身就是一条强分界，再压一条线只是额外多出一道。 */
.dx > section:first-child{padding-top:56px;border-top:0}

/* ── 小标签与标题 ─────────────────────────────────────────────── */
.dx-eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dx-faint);margin-bottom:14px}
.dx-head{max-width:660px;margin-bottom:40px}
.dx-head h2{font-size:clamp(23px,2.5vw,30px);line-height:1.22;font-weight:600;
    letter-spacing:-.025em;color:var(--dx-ink)}
.dx-head p{margin-top:12px;font-size:15.5px;line-height:1.75;color:var(--dx-muted)}

/* ── 首屏：一整块品牌深紫，无渐变无纹理 ───────────────────────── */
.dx-hero{background:var(--dx-brand-deep);color:#fff}
/* 高度随内容自然撑开；居中与上下留白统一由 sections.hero-layout 管理。 */
.dx-hero{min-height:0}
body.page-ownhero .dx-hero{
    margin-top:calc(-1 * var(--nav-h, 73px));
    padding-top:calc(var(--nav-h, 73px) + 52px);
}
.dx-hero__in{max-width:1120px;margin:0 auto;padding:0 28px 44px}
.dx-crumb{font-size:12.5px;color:rgba(255,255,255,.5);margin-bottom:26px}
.dx-crumb a{color:inherit;text-decoration:none}
.dx-crumb a:hover{color:rgba(255,255,255,.85)}
.dx-hero h1{font-size:clamp(31px,4.4vw,52px);line-height:1.07;font-weight:600;
    letter-spacing:-.035em;color:#fff;max-width:17ch}
/* 标题默认限宽 17ch（中文太长会折行）。个别页面标题要一行显示时加这个类，
   字号不变，只是放开宽度限制。 */
.dx-hero h1.dx-wide{max-width:none}
.dx-hero__lead{margin-top:16px;font-size:16.5px;line-height:1.72;
    color:rgba(255,255,255,.72);max-width:58ch}
.dx-form{display:flex;margin-top:28px;max-width:620px}
.dx-form input{flex:1;min-width:0;height:56px;padding:0 18px;background:transparent;
    border:1px solid rgba(255,255,255,.34);border-right:0;border-radius:2px 0 0 2px;
    color:#fff;font:inherit;font-size:15.5px;outline:none;transition:border-color .16s}
.dx-form input::placeholder{color:rgba(255,255,255,.5)}
.dx-form input:focus{border-color:rgba(255,255,255,.75)}
.dx-form button{height:56px;padding:0 30px;background:#fff;color:var(--dx-brand-deep);border:1px solid #fff;
    border-radius:0 2px 2px 0;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
    transition:background .16s}
.dx-form button:hover{background:#E9E9EE;border-color:#E9E9EE}
.dx-hero__links{margin-top:24px}
.dx-hero__links span{display:block;font-size:12px;font-weight:600;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px}
.dx-hero__links ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px}
.dx-hero__links a{font-size:14px;color:rgba(255,255,255,.75);text-decoration:none;
    border-bottom:1px solid transparent;padding-bottom:2px;transition:color .16s,border-color .16s}
.dx-hero__links a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

/* ── 表格：只有横线，数字右对齐 ───────────────────────────────── */
.dx-table{width:100%;border-collapse:collapse}
.dx-table--narrow{max-width:760px}
.dx-table th{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--dx-faint);text-align:left;padding:0 0 13px;border-bottom:1px solid var(--dx-line-strong)}
.dx-table td{padding:15px 0;border-bottom:1px solid var(--dx-line);font-size:15px;
    color:var(--dx-text);transition:background .12s}
.dx-table tbody tr:hover td{background:var(--dx-soft)}
.dx-table th+th,.dx-table td+td{text-align:right}
.dx-tld{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;
    font-weight:600;color:var(--dx-ink);letter-spacing:-.01em}
.dx-tag{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid var(--dx-line-strong);
    border-radius:2px;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--dx-faint);
    vertical-align:1px}
.dx-price{font-weight:600;color:var(--dx-ink)}
.dx-alert{padding:14px 18px;border:1px solid var(--dx-line-strong);border-left:3px solid #D64545;
    font-size:13.5px;line-height:1.78;color:var(--dx-text);max-width:820px;margin-top:22px}
.dx-local-warning{display:none}
.dx-table__foot{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;
    padding-top:20px;font-size:14px}
.dx-note{margin-top:16px;font-size:13px;line-height:1.7;color:var(--dx-faint)}

/* ── 数字栏 ───────────────────────────────────────────────────── */
.dx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    border-top:1px solid var(--dx-line)}
.dx-stat{padding:30px 26px 0 0}
.dx-stat+.dx-stat{border-left:1px solid var(--dx-line);padding-left:26px}
.dx-stat b{display:block;font-size:clamp(28px,3vw,38px);font-weight:500;
    letter-spacing:-.035em;color:var(--dx-ink);line-height:1}
.dx-stat span{display:block;margin-top:10px;font-size:13.5px;line-height:1.65;color:var(--dx-muted)}

/* ── 分栏清单 ─────────────────────────────────────────────────── */
.dx-grid{display:grid;gap:36px 40px}
.dx-grid--2{grid-template-columns:repeat(2,1fr)}
.dx-grid--3{grid-template-columns:repeat(3,1fr)}
.dx-grid--4{grid-template-columns:repeat(4,1fr)}
.dx-item h3{font-size:16px;font-weight:600;color:var(--dx-ink);letter-spacing:-.015em}
.dx-item p{margin-top:9px;font-size:14px;line-height:1.72;color:var(--dx-muted)}
.dx-item a{display:inline-block;margin-top:14px;font-size:13.5px;color:var(--dx-accent);
    text-decoration:none}
.dx-item a:hover{text-decoration:underline}
.dx-item__n{display:block;font-size:11.5px;color:var(--dx-faint);margin-bottom:14px;
    letter-spacing:.1em}

/* 一行一条：序号 + 标题 + 说明 + 入口 */
.dx-rows{border-top:1px solid var(--dx-line)}
.dx-road{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;
    border-bottom:1px solid var(--dx-line);align-items:start}
.dx-road__n{font-size:12px;color:var(--dx-faint);letter-spacing:.08em;padding-top:4px}
.dx-road>div{display:grid;grid-template-columns:1fr auto;gap:5px 20px;align-items:baseline}
.dx-road h3{grid-column:1;font-size:16.5px;font-weight:600;color:var(--dx-ink);
    letter-spacing:-.015em}
.dx-road p{grid-column:1;font-size:14px;line-height:1.72;color:var(--dx-muted);margin:0}
.dx-road a{grid-column:2;grid-row:1;justify-self:end;font-size:13.5px;color:var(--dx-accent);
    text-decoration:none;white-space:nowrap}
.dx-road a:hover{text-decoration:underline}

/* ── 步骤 ─────────────────────────────────────────────────────── */
.dx-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--dx-line)}
.dx-step{padding:28px 26px 0 0}
.dx-step+.dx-step{border-left:1px solid var(--dx-line);padding-left:26px}
.dx-step b{display:block;font-size:12px;letter-spacing:.12em;color:var(--dx-faint);
    margin-bottom:16px}
.dx-step h3{font-size:16px;font-weight:600;color:var(--dx-ink)}
.dx-step p{margin-top:10px;font-size:14px;line-height:1.7;color:var(--dx-muted)}

/* ── 页签 ─────────────────────────────────────────────────────── */
.dx-tabs{display:flex;gap:30px;border-bottom:1px solid var(--dx-line);margin-bottom:36px;
    flex-wrap:wrap}
.dx-tab{padding:0 0 15px;background:none;border:0;border-bottom:2px solid transparent;
    margin-bottom:-1px;font:inherit;font-size:14.5px;color:var(--dx-muted);cursor:pointer;
    transition:color .16s,border-color .16s}
.dx-tab:hover{color:var(--dx-ink)}
.dx-tab.is-active{color:var(--dx-ink);border-bottom-color:var(--dx-accent)}
.dx-panel{display:none}
.dx-panel.is-active{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;
    animation:dx-in .26s var(--dx-ease)}
@keyframes dx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dx-panel h3{font-size:20px;font-weight:600;color:var(--dx-ink);letter-spacing:-.02em}
.dx-panel p{margin-top:12px;font-size:14.5px;line-height:1.78;color:var(--dx-muted);
    max-width:62ch}
.dx-panel ul{list-style:none;margin-top:22px}
.dx-panel li{padding:13px 0;border-top:1px solid var(--dx-line);font-size:14px;
    line-height:1.65;color:var(--dx-text)}
.dx-panel li:last-child{border-bottom:1px solid var(--dx-line)}

/* ── 常见问题 ─────────────────────────────────────────────────── */
.dx-faq{border-top:1px solid var(--dx-line)}
.dx-faq details{border-bottom:1px solid var(--dx-line)}
.dx-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
    align-items:center;gap:24px;padding:21px 0;font-size:15.5px;font-weight:500;
    color:var(--dx-ink);letter-spacing:-.01em}
.dx-faq summary::-webkit-details-marker{display:none}
.dx-faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;
    border-right:1.4px solid var(--dx-faint);border-bottom:1.4px solid var(--dx-faint);
    transform:rotate(45deg);transition:transform .18s var(--dx-ease)}
.dx-faq details[open] summary::after{transform:rotate(-135deg)}
.dx-faq p{padding:0 0 24px;font-size:14.5px;line-height:1.82;color:var(--dx-muted);
    max-width:78ch}

/* ── 按钮 ─────────────────────────────────────────────────────── */
.dx-link{font-size:14px;color:var(--dx-accent);text-decoration:none}
.dx-link:hover{text-decoration:underline}
.dx-btn{display:inline-flex;align-items:center;height:48px;padding:0 26px;border-radius:2px;
    font-size:14.5px;font-weight:600;text-decoration:none;transition:background .16s,
    border-color .16s,color .16s}
.dx-btn--solid{background:#fff;color:var(--dx-brand-deep)}
.dx-btn--solid:hover{background:#E9E9EE}
.dx-btn--ghost{border:1px solid rgba(255,255,255,.3);color:#fff}
.dx-btn--ghost:hover{border-color:rgba(255,255,255,.7)}
/* 白底上的主按钮：用品牌紫，不用墨黑 —— 墨黑按钮是上一版留下的，跟 logo 不同色系。 */
.dx-btn--brand{background:var(--dx-accent);color:#fff}
.dx-btn--brand:hover{background:#3B22C4}

/* ── 首屏搜索：输入 + 后缀 + 按钮 排成一条 ────────────────────── */
.dx-form__tld{position:relative;display:flex;align-items:center;
    height:56px;border:1px solid rgba(255,255,255,.34);border-left:0;border-right:0}
/* 只作用在搜索条里的后缀选择（.dx-form__tld），不要写成 .dx-form select——
   那样连表单里独立的下拉框一起覆盖（border:0 + background:transparent），
   下拉框就没有边框和箭头了。
   select 撑满容器高度：不这么写，容器高度是「内容 56 + 上下边框」=58，
   而 input 是「height 56 含边框」，两者底部会差 2px，接缝处出现一个台阶。 */
.dx-form__tld select{height:100%;appearance:none;-webkit-appearance:none;background:transparent;border:0;
    color:#fff;font:inherit;font-size:15px;font-weight:600;padding:0 38px 0 16px;outline:none;
    cursor:pointer}
.dx-form__tld select option{color:#14112E;background:#fff}
.dx-form__tld::after{content:"";position:absolute;right:15px;width:7px;height:7px;pointer-events:none;
    border-right:1.4px solid rgba(255,255,255,.65);border-bottom:1.4px solid rgba(255,255,255,.65);
    transform:rotate(45deg) translateY(-2px)}

/* ── 搜索结果 ─────────────────────────────────────────────────── */
.dx-result{border-top:1px solid var(--dx-line);border-bottom:1px solid var(--dx-line);
    padding:26px 0;display:grid;grid-template-columns:1fr auto;gap:18px 32px;align-items:center}
.dx-result__name{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:clamp(19px,2.3vw,26px);font-weight:600;color:var(--dx-ink);
    letter-spacing:-.02em;word-break:break-all}
.dx-result__state{margin-top:9px;font-size:14px;font-weight:600}
.dx-state--ok{color:#0F9D58}
.dx-state--bad{color:#D64545}
.dx-state--unknown{color:#B45309}
.dx-result__side{display:flex;align-items:center;gap:28px}
.dx-result__price{text-align:right}
.dx-result__price b{display:block;font-size:24px;font-weight:600;color:var(--dx-ink);
    letter-spacing:-.02em;line-height:1.1}
.dx-result__price span{display:block;margin-top:4px;font-size:12.5px;color:var(--dx-faint)}
.dx-result__fine{margin-top:10px;font-size:12.5px;color:var(--dx-faint)}

/* 备选：三列细线清单，比一排卡片好扫 */
.dx-alt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;margin-top:36px;
    border-top:1px solid var(--dx-line)}
.dx-alt{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:15px 0;
    border-bottom:1px solid var(--dx-line)}
.dx-alt__name{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;
    font-weight:600;color:var(--dx-ink);word-break:break-all}
.dx-alt__state{font-size:12.5px;font-weight:600;white-space:nowrap}
.dx-alt__price{font-size:14px;color:var(--dx-text);white-space:nowrap}
.dx-mini{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--dx-accent);
    cursor:pointer;white-space:nowrap}
.dx-mini:hover{text-decoration:underline}

/* 列多的表：窄屏横向滚动，别把页面撑宽 */
.dx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dx-scroll table{min-width:760px}

/* 说明清单（图例、注意事项） */
.dx-facts{border-top:1px solid var(--dx-line);max-width:820px}
.dx-facts li{list-style:none;padding:14px 0;border-bottom:1px solid var(--dx-line);
    font-size:14px;line-height:1.78;color:var(--dx-muted)}
.dx-facts li b,.dx-facts li strong{color:var(--dx-ink);font-weight:600}

/* 一排短句承诺 */
.dx-strip{display:flex;flex-wrap:wrap;gap:12px 40px;padding:22px 0;
    border-top:1px solid var(--dx-line);border-bottom:1px solid var(--dx-line);
    font-size:14px;color:var(--dx-muted)}

/* 导语：比正文大一号，最多 74 字符宽 */
.dx-lead p{font-size:17px;line-height:1.8;color:var(--dx-muted);max-width:74ch;
    margin-bottom:16px}
.dx-lead p:last-child{margin-bottom:0}

/* ── 表单：首屏里的（深底）与正文里的（白底）两套 ─────────────── */
.dx-form--stack{display:block;max-width:620px;margin-top:20px}
/* 文本域 + 按钮并排：按钮落在文本域右侧，整块表单省下一行按钮的高度，
   首屏要放这类表单时才不至于超高。 */
.dx-form__row{display:flex;gap:14px;align-items:flex-start}
.dx-form__row .dx-textarea{flex:1 1 auto;min-width:0}
.dx-form__row .dx-btn{flex:none;height:52px;margin-top:0}
.dx-label{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:10px}
.dx-input,.dx-textarea{width:100%;background:transparent;border:1px solid rgba(255,255,255,.34);
    border-radius:2px;color:#fff;font:inherit;font-size:15.5px;height:52px;padding:0 16px;
    outline:none;transition:border-color .16s}
.dx-textarea{height:auto;min-height:136px;padding:14px 16px;line-height:1.72;resize:vertical;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px}
.dx-input::placeholder,.dx-textarea::placeholder{color:rgba(255,255,255,.42)}
.dx-input:focus,.dx-textarea:focus{border-color:rgba(255,255,255,.75)}
.dx-form--stack .dx-btn{margin-top:18px}
.dx-hint{margin-top:12px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.55)}
.dx-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* 深底上的下拉：自绘箭头，选项沿用系统弹层（白底深字） */
.dx-select{width:100%;height:52px;padding:0 38px 0 16px;border:1px solid rgba(255,255,255,.34);
    border-radius:2px;background-color:transparent;color:#fff;font:inherit;font-size:15px;
    outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.65) 50%),
        linear-gradient(135deg,rgba(255,255,255,.65) 50%,transparent 50%);
    background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px);
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:border-color .16s}
.dx-select:focus{border-color:rgba(255,255,255,.75)}
.dx-select option{color:#14112E;background:#fff}
/* 同样的表单控件放到白底区块里：换一套配色，其余不变 */
.dx-form--light .dx-label,.dx-form--light .dx-hint{color:var(--dx-faint)}
.dx-form--light .dx-input,.dx-form--light .dx-textarea,.dx-form--light .dx-select{
    border-color:var(--dx-line-strong);color:var(--dx-text);background:var(--dx-bg)}
.dx-form--light .dx-input::placeholder,.dx-form--light .dx-textarea::placeholder{color:var(--dx-faint)}
.dx-form--light .dx-input:focus,.dx-form--light .dx-textarea:focus{border-color:var(--dx-accent)}
.dx-form--light .dx-btn--solid{background:var(--dx-accent);color:#fff}
.dx-form--light .dx-btn--solid:hover{background:#3B22C4}
/* 深底上的开关是白的，放进白底区块要换回墨色，否则整行看不见。 */
.dx-form--light .dx-switch{color:var(--dx-text)}
.dx-form--light .dx-switch input{accent-color:var(--dx-accent)}
/* 站内对 select 有一层全局样式（自带背景图且 background-size 被撑满），
   所以这里把 background 的几个分量全部重新声明一遍，否则箭头会被拉成一大块灰。 */
.dx-form--light .dx-select{border:1px solid var(--dx-line-strong);background-color:var(--dx-bg);
    background-image:linear-gradient(45deg,transparent 50%,var(--dx-faint) 50%),
        linear-gradient(135deg,var(--dx-faint) 50%,transparent 50%);
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px)}
/* 首屏里的一排示例词（点一下直接查） */
.dx-chips{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-top:12px}
.dx-chips>span{font-size:12.5px;color:rgba(255,255,255,.5)}
.dx-chips button{background:none;border:0;padding:0 0 2px;font:inherit;font-size:13.5px;
    color:rgba(255,255,255,.75);cursor:pointer;border-bottom:1px solid transparent;
    transition:color .16s,border-color .16s}
.dx-chips button:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

/* ── 首屏里的查询模块（高级搜索这一页）───────────────────────────
   参考 Dynadot 高级搜索：一行关键词 + 一行条件（长度、价格、几个开关），
   下面再给一句「已选多少个后缀」的摘要；后缀长列表放正文，首屏放不下。 */
.dx-module{margin-top:26px;max-width:880px}
.dx-module__row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.dx-module__row+.dx-module__row{margin-top:14px}
.dx-module input[type=number]{width:104px;height:48px;padding:0 12px;background:transparent;
    border:1px solid rgba(255,255,255,.34);border-radius:2px;color:#fff;font:inherit;
    font-size:14px;outline:none;transition:border-color .16s}
.dx-module input[type=number]::placeholder{color:rgba(255,255,255,.42)}
.dx-module input[type=number]:focus{border-color:rgba(255,255,255,.75)}
.dx-module__field{display:inline-flex;align-items:center;gap:10px;font-size:13px;
    color:rgba(255,255,255,.6)}
.dx-switch{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;
    color:rgba(255,255,255,.78);cursor:pointer;white-space:nowrap}
.dx-switch input{accent-color:#fff;margin:0;width:15px;height:15px}
.dx-module__note{display:block;margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.55)}
.dx-module__note b{color:#fff;font-weight:600}

/* 已选中的后缀：面板头（计数 + 清除）+ 一行 chip。勾选后立刻看得到选了哪些，
   而不是只给一个数字。 */
.dx-picked{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.dx-picked__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    font-size:12.5px;color:rgba(255,255,255,.6)}
.dx-picked__head b{color:#fff;font-weight:600}
.dx-picked__clear{background:none;border:0;padding:0;font:inherit;font-size:12.5px;
    color:rgba(255,255,255,.72);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.3)}
.dx-picked__clear:hover{color:#fff;border-bottom-color:#fff}
.dx-picked__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.dx-picked__chip{display:inline-block;padding:3px 9px;border:1px solid rgba(255,255,255,.28);
    border-radius:2px;font-size:12.5px;color:#fff;font-family:ui-monospace,SFMono-Regular,
    Menlo,Consolas,monospace}
.dx-picked__more{font-size:12.5px;color:rgba(255,255,255,.6);align-self:center}
.dx-picked__none{font-size:12.5px;color:rgba(255,255,255,.5)}
/* 同一块面板放到白底正文里（高级搜索的「选中的TLDs」在首屏下方） */
.dx-picked--light{margin-top:0;border-top:1px solid var(--dx-line)}
.dx-picked--light .dx-picked__head{color:var(--dx-muted)}
.dx-picked--light .dx-picked__head b{color:var(--dx-ink)}
.dx-picked--light .dx-picked__clear{color:var(--dx-accent);
    border-bottom-color:var(--dx-line-strong)}
.dx-picked--light .dx-picked__clear:hover{color:var(--dx-accent);
    border-bottom-color:var(--dx-accent)}
.dx-picked--light .dx-picked__chip{border-color:var(--dx-line-strong);color:var(--dx-ink)}
.dx-picked--light .dx-picked__more{color:var(--dx-faint)}

/* 后缀选择区：标题 + 搜索后缀 + 级别筛选（对应 Dynadot 的「搜索TLDs / TLD级别」） */
.dx-picker__bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:16px}
.dx-picker__bar h2{font-size:20px;font-weight:600;color:var(--dx-ink);letter-spacing:-.02em;
    margin-right:auto}
.dx-picker__search{width:220px}
.dx-picker__levels{display:flex;gap:8px}
.dx-picker__empty{margin-top:14px;font-size:13.5px;color:var(--dx-faint)}

/* 价格区间（起—止）：与 Dynadot 高级搜索同一行的排法 */
.dx-range{display:inline-flex;align-items:center;gap:10px;font-size:13px;
    color:rgba(255,255,255,.6);white-space:nowrap}

/* 高级搜索：整个模块放进首屏，结构照 Dynadot ——
   上半部左栏是搜索、右栏是「标签 / 控件」成对的一组行；下半部是一整条后缀列表。
   551px 里放得下，靠把「行」压到 34px、列表盒压到 96px。 */
.dx-adv{display:grid;gap:12px}
/* 左栏收窄到 340：标题与导语自己换行，把宽度让给右边的条件行 */
.dx-adv__top{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:20px 56px;align-items:start}
.dx-adv__left{min-width:0}
/* 右栏：条件行 + 后缀列表，列表吃掉剩下的高度 */
.dx-adv__right{min-width:0;display:flex;flex-direction:column}
.dx-adv__opts--left{margin-top:18px}
.dx-adv__count{font-size:13px;color:rgba(255,255,255,.72)}
.dx-adv__hint{font-size:12px;color:rgba(255,255,255,.45);margin-left:auto}
/* 左栏压紧：这些是页面级的局部收紧，不动全局节奏 */
.dx-adv .dx-crumb{margin-bottom:8px}
.dx-adv__left .dx-hero__lead{margin-top:6px}
.dx-adv__left .dx-adv__search{margin-top:8px}
.dx-adv__opts--left{margin-top:8px}
/* 一整行都是控件（左侧那三个开关）：不占「标签」那一列，就不会折成两行 */
.dx-adv__line--wide{grid-template-columns:minmax(0,1fr)}
/* 已选中 + 清除 + chips 合成一行（chips 横滚，不换行） */
.dx-adv__pickedline{display:flex;align-items:center;gap:12px;min-width:0;
    min-height:26px;overflow:hidden}
.dx-adv__pickedline .dx-picked__chips{margin:0}
.dx-adv__search{display:flex;gap:10px;align-items:center;margin-top:14px;max-width:340px}
/* 左侧域名输入框做大一点，跟下面两个入口之间留出呼吸的空间 */
.dx-adv__search .dx-input{flex:1 1 auto;width:100%;min-width:0;height:50px;font-size:15.5px}
.dx-adv__actions{display:flex;align-items:center;gap:18px;margin-top:16px}
.dx-adv__actions .dx-btn{height:48px}
.dx-adv__opts{display:grid;gap:4px;align-content:start}
/* 一行 = 标签在左、控件在右（Dynadot 的排法） */
.dx-adv__line{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;
    align-items:center;min-height:24px}
/* 选中的TLDs 那排 chip 只走一行，横滚看全部：勾再多也不会把首屏顶高 */
.dx-adv .dx-picked__chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    height:22px;align-items:center;gap:6px}
.dx-adv .dx-picked__chip{flex:none;padding:1px 7px;font-size:11.5px}
.dx-adv .dx-picked__more{flex:none}
/* 「已选中 N 个 + chips + 清除 ( N )」整行锁一行高 */
.dx-adv__line--picked .dx-adv__ctl{flex-wrap:nowrap;overflow:hidden;gap:10px}
.dx-adv__line--picked .dx-adv__count{flex:none;white-space:nowrap}
.dx-adv__line--picked .dx-picked__chips{flex:1 1 auto;min-width:0}
.dx-adv__line--picked .dx-picked__clear{flex:none;white-space:nowrap}
.dx-adv__label{font-size:12.5px;color:rgba(255,255,255,.55)}
.dx-adv__ctl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;min-width:0}
.dx-adv__ctl .dx-input{height:30px;font-size:13.5px;padding:0 12px;width:100%}
.dx-adv .dx-switch{margin:0;font-size:13px}
.dx-adv .dx-picked{margin:0;padding-top:0;border-top:0}
.dx-adv .dx-picked__chips{margin-top:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    height:26px;align-items:center;gap:6px}
.dx-adv .dx-picked__chip{white-space:nowrap;flex:none}
.dx-adv .dx-picked__more{flex:none}
/* 价格区间的输入要有框：深底上一圈细白边 */
.dx-adv input[type=number]{width:74px;height:30px;font-size:13.5px;padding:0 10px;
    border:1px solid rgba(255,255,255,.34);border-radius:2px;background:transparent;
    color:#fff;font-family:inherit;outline:none;transition:border-color .16s}
.dx-adv input[type=number]::placeholder{color:rgba(255,255,255,.42)}
.dx-adv input[type=number]:focus{border-color:rgba(255,255,255,.75)}
.dx-adv__list .dx-cloud{max-height:52px;overflow-y:auto;border-top:0;padding-top:0;
    gap:0 24px}
.dx-adv__list{display:flex;flex-direction:column;margin-top:14px;flex:1 1 auto;min-height:0}
.dx-adv__list .dx-cloud--tall{max-height:122px;overflow-y:auto;flex:1 1 auto}
.dx-adv__extra{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.dx-adv__extralabel{font-size:12.5px;color:var(--dx-faint);letter-spacing:.04em}
.dx-adv__extra .dx-check--plain{display:inline-flex;align-items:center;gap:9px;
    font-size:13.5px;color:var(--dx-text)}
.dx-adv__extra input[type=number]{width:64px;height:32px;padding:0 10px;border:1px solid var(--dx-line-strong);
    border-radius:2px;background:var(--dx-bg);color:var(--dx-text);font:inherit;font-size:13.5px;
    outline:none}
.dx-adv__list .dx-cloud--tall .dx-cloud__item{padding:6px 0}
.dx-adv__list .dx-cloud__item{padding:4px 0;font-size:13px}
.dx-adv__foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:6px}
/* 预选下拉（深底） */
.dx-adv select{height:28px;padding:0 26px 0 9px;border:1px solid rgba(255,255,255,.34);
    border-radius:2px;background-color:transparent;color:#fff;font:inherit;font-size:13px;
    outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.65) 50%),
        linear-gradient(135deg,rgba(255,255,255,.65) 50%,transparent 50%);
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px)}
.dx-adv select option{color:#14112E;background:#fff}
.dx-adv .dx-adv__saves{display:flex;gap:8px;align-items:center;overflow-x:auto;
    flex-wrap:nowrap;height:26px}
.dx-adv .dx-adv__preset{display:inline-flex;align-items:center;gap:6px;flex:none;
    padding:2px 8px;border:1px solid rgba(255,255,255,.28);border-radius:2px;
    font-size:12px;color:rgba(255,255,255,.85);cursor:pointer;background:none;font-family:inherit}
.dx-adv .dx-adv__preset:hover{border-color:#fff;color:#fff}
.dx-adv .dx-adv__preset i{font-style:normal;opacity:.6}
.dx-adv .dx-adv__preset i:hover{opacity:1}
.dx-adv input[type=text].dx-adv__name{height:30px;width:120px;font-size:13px;padding:0 10px;
    background:transparent;border:1px solid rgba(255,255,255,.34);border-radius:2px;color:#fff;
    outline:none}
.dx-adv input[type=text].dx-adv__name::placeholder{color:rgba(255,255,255,.4)}

/* 后缀 chip 云：照 Dynadot 的「选择TLDs」——4 列、一行一个后缀；
   我们比它多给一个首年价（价格是读者真正要比的东西）。 */
.dx-cloud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;
    border-top:1px solid var(--dx-line);padding-top:4px}
.dx-cloud__item{position:relative;display:flex;align-items:baseline;gap:12px;padding:10px 0;
    border-bottom:1px solid var(--dx-line);cursor:pointer;font-size:14px}
.dx-cloud__item input{position:absolute;opacity:0;pointer-events:none}
.dx-cloud__item::before{content:"";width:11px;height:11px;flex:none;border-radius:2px;
    border:1px solid rgba(255,255,255,.32);transition:background .12s,border-color .12s}
.dx-cloud__item.is-on::before{background:#fff;border-color:#fff}
.dx-cloud__item.is-on .dx-cloud__ext{color:#fff}
.dx-cloud__ext{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-weight:600;color:var(--dx-ink)}
.dx-cloud__price{margin-left:auto;font-size:12.5px;color:var(--dx-faint)}
.dx-cloud__more{display:flex;justify-content:flex-end;margin-top:14px}
@media(max-width:1000px){.dx-cloud{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.dx-cloud{grid-template-columns:1fr}}

/* 首屏分两栏：左标题、右查询模块。只在「模块本身就是首屏主要内容」的页面用
   （高级搜索这类），不拿它去填普通页面的右侧空白。 */
.dx-hero__in--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,470px);
    gap:40px 56px;align-items:start}
.dx-hero__aside{padding-top:4px}
.dx-hero__aside .dx-module{margin-top:0;max-width:none}
.dx-hero__aside .dx-module__row{gap:10px 14px}
.dx-hero__aside .dx-form,.dx-hero__aside .dx-form--stack{margin-top:0;max-width:none}

/* 正文里的表单（白底）：高级搜索、建议工具的选择区 */
/* 正文里的表单块（高级搜索、建议工具）。
   注意别叫 .dx-panel —— 那个类名是总览页页签面板用的，带 display:none，
   套到表单上会把整块内容藏起来（踩过一次）。 */
.dx-formblock{max-width:880px}
.dx-formblock h2{font-size:18px;font-weight:600;color:var(--dx-ink);letter-spacing:-.015em;
    margin-bottom:14px}
.dx-formblock h2+*{margin-top:0}
.dx-field{width:100%;height:44px;padding:0 14px;border:1px solid var(--dx-line-strong);
    border-radius:2px;background:var(--dx-bg);color:var(--dx-text);font:inherit;font-size:14px;
    outline:none;transition:border-color .16s}
.dx-field:focus{border-color:var(--dx-accent)}
.dx-checks{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;
    border-top:1px solid var(--dx-line);margin-top:6px;
    /* 四百多个后缀铺开会把页面拉到几千像素：列表自己在框内滚动。 */
    max-height:456px;overflow-y:auto}
.dx-check{display:flex;align-items:baseline;gap:10px;padding:11px 0;
    border-bottom:1px solid var(--dx-line);font-size:14px;color:var(--dx-text);cursor:pointer}
.dx-check input{accent-color:var(--dx-accent);margin:0;flex:none}
.dx-check .dx-check__price{margin-left:auto;font-size:12.5px;color:var(--dx-faint)}
.dx-inline{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.dx-check--plain{display:inline-flex;padding:0;border:0}
.dx-facts--kv li{display:grid;grid-template-columns:180px 1fr;gap:16px}
.dx-facts--kv b{font-weight:600;color:var(--dx-ink)}

/* 结果表里的状态用文字，不用徽章 */
.dx-state--ok{color:#0F9D58}
.dx-state--bad{color:#D64545}
.dx-state--unknown{color:#B45309}

/* 中段理由带：不要整幅深紫横带——页面中段压一条满宽深色，跟上下的小节不是一套节奏。
   改成和正文其它小节一样的白底细线。 */
.dx-band{background:transparent;color:var(--dx-text);padding:84px 0;
    border-top:1px solid var(--dx-line)}
.dx-band h2{color:var(--dx-ink);font-size:clamp(21px,2.3vw,27px);font-weight:600;
    letter-spacing:-.025em}
.dx-band__lead{margin-top:12px;font-size:15px;line-height:1.72;color:var(--dx-muted);
    max-width:56ch}
.dx-band__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:44px;
    border-top:1px solid var(--dx-line);padding-top:32px}
.dx-band__grid b{display:block;font-size:15.5px;font-weight:600;color:var(--dx-ink)}
.dx-band__grid span{display:block;margin-top:9px;font-size:13.5px;line-height:1.7;
    color:var(--dx-muted)}

/* 相关工具：细线清单 */
.dx-related{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;
    border-top:1px solid var(--dx-line)}
.dx-related a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:15px 0;border-bottom:1px solid var(--dx-line);text-decoration:none}
.dx-related b{font-size:14.5px;font-weight:500;color:var(--dx-ink)}
.dx-related a:hover b{color:var(--dx-accent)}
.dx-related i{font-style:normal;font-size:13px;color:var(--dx-faint)}

/* ── 表格工具条（标题 + 数量 + 筛选）─────────────────────────── */
.dx-tablebar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:16px 24px;margin-bottom:22px}
.dx-tablebar h2{font-size:clamp(21px,2.3vw,27px);font-weight:600;letter-spacing:-.025em;
    color:var(--dx-ink)}
.dx-count{font-size:13px;color:var(--dx-faint);margin-left:10px}
.dx-filter{height:40px;padding:0 14px;border:1px solid var(--dx-line-strong);border-radius:2px;
    background:var(--dx-bg);color:var(--dx-text);font:inherit;font-size:13.5px;outline:none;
    width:200px;transition:border-color .16s}
.dx-filter:focus{border-color:var(--dx-accent)}
.dx-more{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0 0;
    border-top:1px solid var(--dx-line);margin-top:4px}
.dx-more__count{font-size:12.5px;color:var(--dx-faint)}

/* ── 长文分节 ─────────────────────────────────────────────────── */
.dx-long-sec{padding-bottom:38px;margin-bottom:38px;border-bottom:1px solid var(--dx-line)}
.dx-long-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.dx-long-sec h2{font-size:21px;font-weight:600;color:var(--dx-ink);letter-spacing:-.02em;
    margin-bottom:10px}
.dx-long-sec p{font-size:14.5px;line-height:1.82;color:var(--dx-muted);max-width:74ch;
    margin-bottom:12px}
.dx-long-kicker{font-size:14px !important;color:var(--dx-faint) !important;margin-bottom:16px !important}
.dx-long-sec ul{margin:14px 0 0}
.dx-long-note{margin-top:18px;padding-left:16px;border-left:2px solid var(--dx-line-strong);
    font-size:13.5px !important;line-height:1.78 !important;color:var(--dx-faint) !important;
    max-width:74ch}
.dx-long-sec .dx-table{margin-top:18px}

/* ── 收尾：与首屏呼应的一整块品牌深紫 ─────────────────────────── */
.dx-cta{background:var(--dx-brand-deep);color:#fff;padding:76px 0}
/* dd-ui 里有一条 h1..h5{color:var(--dd-ink)}，元素选择器不会继承 .dx-cta 的白色，
   紫底上的标题必须显式给白，否则会被染成深蓝紫。 */
.dx-cta h2{color:#fff;font-size:clamp(22px,2.5vw,30px);font-weight:600;letter-spacing:-.028em}
.dx-cta p{margin-top:14px;font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.72);
    max-width:58ch}
.dx-cta__btns{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}

/* ── 窄屏 ─────────────────────────────────────────────────────── */
@media(max-width:1000px){
    .dx-sec{padding:64px 0}
    .dx-stats{grid-template-columns:repeat(2,1fr);gap:0}
    .dx-stat{padding:24px 20px 22px 0}
    .dx-stat:nth-child(odd){border-left:0;padding-left:0}
    .dx-stat:nth-child(n+3){border-top:1px solid var(--dx-line)}
    .dx-grid--3,.dx-grid--4{grid-template-columns:repeat(2,1fr);gap:30px 32px}
    .dx-steps{grid-template-columns:repeat(2,1fr)}
    .dx-step:nth-child(odd){border-left:0;padding-left:0}
    .dx-step:nth-child(n+3){border-top:1px solid var(--dx-line)}
    .dx-panel.is-active{grid-template-columns:1fr;gap:32px}
    .dx-hero__in--split{grid-template-columns:1fr;gap:28px}
    .dx-band__grid{grid-template-columns:repeat(2,1fr);gap:26px}
    .dx-alt-grid,.dx-related{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
    .dx-wrap,.dx-hero__in{padding:0 20px}
    .dx-sec{padding:52px 0}
    .dx-grid--2,.dx-grid--3,.dx-grid--4,.dx-steps{grid-template-columns:1fr}
    .dx-grid--2,.dx-grid--3,.dx-grid--4{gap:28px}
    .dx-step{border-left:0 !important;padding-left:0;padding-right:0}
    .dx-step+.dx-step{border-top:1px solid var(--dx-line)}
    .dx-road{grid-template-columns:34px 1fr;gap:14px}
    .dx-form{flex-wrap:wrap}
    .dx-form input{flex:1 1 100%;border-right:1px solid rgba(255,255,255,.24);
        border-radius:2px 2px 0 0;border-bottom:0}
    .dx-form button{flex:1 1 100%;border-radius:0 0 2px 2px}
    .dx-tabs{gap:20px}
    .dx-cta{padding:56px 0}
    .dx-result{grid-template-columns:1fr;gap:16px}
    .dx-result__side{justify-content:space-between;width:100%}
    .dx-alt-grid,.dx-related{grid-template-columns:1fr}
    .dx-band{padding:52px 0}
    .dx-band__grid{grid-template-columns:1fr;gap:22px}
    .dx-form__tld{border:1px solid rgba(255,255,255,.34);border-top:0;border-bottom:0;border-radius:0}
    .dx-form__tld{width:100%}
    .dx-form select{width:100%}
    /* 窄屏上不再横向滚动：表格自己收窄，次要列由 .dx-col-sm 标记后隐藏
       （在页面上标哪几列次要，比在这里按 nth-child 数第几列清楚）。 */
    .dx-scroll table{min-width:0}
    .dx-col-sm{display:none}
}
/* ── 批量搜索的左栏：页签 + 名单框（框内右下角是「导入域名列表」） ───────── */
.dx-adv__tabs{display:flex;gap:24px;border-bottom:1px solid var(--dx-line-strong);
    margin-bottom:14px}
.dx-adv__box{display:flex;flex-direction:column;border:1px solid var(--dx-line-strong);
    border-radius:3px;background:var(--dx-bg);overflow:hidden}
.dx-adv__box textarea{min-height:250px;border:0;outline:none;padding:14px 16px;resize:vertical;
    background:transparent;color:var(--dx-text);font:inherit;font-size:14px;line-height:1.8;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dx-adv__box textarea::placeholder{color:var(--dx-faint)}
.dx-adv__import{align-self:flex-start;margin:0 0 12px 14px;font-size:13px;color:var(--dx-accent);
    cursor:pointer;text-decoration:underline}
/* ── 模块放到白底正文里（首屏下方）时的一整套配色 ───────────────── */
.dx-adv--light .dx-adv__label,
.dx-adv--light .dx-adv__hint{color:var(--dx-faint)}
.dx-adv--light .dx-adv__count{color:var(--dx-muted)}
.dx-adv--light .dx-adv__left .dx-hero__lead{color:var(--dx-muted)}
.dx-adv--light .dx-adv__left h1{color:var(--dx-ink);font-size:32px}
.dx-adv--light .dx-input,
.dx-adv--light input[type=number],
.dx-adv--light input[type=text].dx-adv__name,
.dx-adv--light select{border-color:var(--dx-line-strong);color:var(--dx-text);
    background-color:var(--dx-bg)}
.dx-adv--light .dx-input::placeholder,
.dx-adv--light input::placeholder{color:var(--dx-faint)}
.dx-adv--light select option{color:var(--dx-text);background:var(--dx-bg)}
.dx-adv--light select{background-image:linear-gradient(45deg,transparent 50%,var(--dx-faint) 50%),
    linear-gradient(135deg,var(--dx-faint) 50%,transparent 50%);
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px)}
.dx-adv--light .dx-switch{color:var(--dx-text)}
.dx-adv--light .dx-switch input{accent-color:var(--dx-accent)}
.dx-adv--light .dx-tab{color:var(--dx-muted)}
.dx-adv--light .dx-tab.is-active{color:var(--dx-ink);border-bottom-color:var(--dx-accent)}
.dx-adv--light .dx-mini{color:var(--dx-accent)}
.dx-adv--light .dx-picked__clear{color:var(--dx-accent);border-bottom-color:var(--dx-line-strong)}
.dx-adv--light .dx-picked__clear:hover{color:var(--dx-accent);border-bottom-color:var(--dx-accent)}
.dx-adv--light .dx-picked__chip{border-color:var(--dx-line-strong);color:var(--dx-ink)}
.dx-adv--light .dx-picked__more{color:var(--dx-faint)}
.dx-adv--light .dx-adv__preset{border-color:var(--dx-line-strong);color:var(--dx-text)}
.dx-adv--light .dx-adv__preset:hover{border-color:var(--dx-accent);color:var(--dx-accent)}
.dx-adv--light .dx-adv__saves span{color:var(--dx-faint)}
.dx-adv--light .dx-cloud{border-top:1px solid var(--dx-line)}
.dx-adv--light .dx-cloud__item{border-bottom:1px solid var(--dx-line)}
.dx-adv--light .dx-cloud__item::before{border-color:var(--dx-line-strong)}
.dx-adv--light .dx-cloud__item.is-on::before{background:var(--dx-accent);
    border-color:var(--dx-accent)}
.dx-adv--light .dx-cloud__ext{color:var(--dx-text)}
.dx-adv--light .dx-cloud__item.is-on .dx-cloud__ext{color:var(--dx-ink);font-weight:700}
/* 白底区里列表可以铺得高一些（不再受首屏 551px 限制） */
.dx-adv--light .dx-cloud--tall{max-height:262px}

/* ── IDN 页：语言那一行是一排可选中的词条（带「更多」收纳） ─────── */
/* 只用 --dx-* 这套变量，深浅两套底色都直接能用，不需要再写 .dx-adv--light 覆盖。 */
.dx-lang{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;min-width:0}
.dx-lang__chip{position:relative;display:inline-flex;align-items:center;padding:4px 11px;
    border:1px solid var(--dx-line-strong);border-radius:3px;font-size:13px;color:var(--dx-text);
    cursor:pointer;white-space:nowrap;transition:border-color .16s,color .16s}
.dx-lang__chip input{position:absolute;opacity:0;pointer-events:none}
.dx-lang__chip:hover{border-color:var(--dx-accent);color:var(--dx-accent)}
.dx-lang__chip.is-on{border-color:var(--dx-accent);color:var(--dx-accent);font-weight:600}
.dx-lang__chip.is-extra{display:none}
.dx-lang.is-open .dx-lang__chip.is-extra{display:inline-flex}
.dx-lang__more{border:0;background:none;font:inherit;font-size:13px;color:var(--dx-accent);
    cursor:pointer;padding:4px 0;text-decoration:underline}
/* 结果表里，Punycode 下面补一行它写出来的样子（只有 IDN 结果带这个键） */
.dx-unicode{display:block;margin-top:4px;font-size:12.5px;color:var(--dx-faint)}

/* ── 文章列表与正文（域名资讯 / 新闻通讯共用）──────────────────── */
/* 一行一条、细线分隔：比卡片好扫，也省掉一层阴影。 */
.dx-posts{list-style:none;border-top:1px solid var(--dx-line);max-width:860px}
.dx-posts>li{padding:24px 0;border-bottom:1px solid var(--dx-line)}
.dx-posts a{text-decoration:none;color:inherit}
.dx-posts h3{font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.015em;
    color:var(--dx-ink);transition:color .16s}
.dx-posts a:hover h3{color:var(--dx-accent)}
.dx-posts__meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;
    margin-bottom:9px;font-size:12.5px;color:var(--dx-faint)}
.dx-posts__tag{padding:1px 8px;border:1px solid var(--dx-line-strong);border-radius:2px;
    font-size:12px;font-weight:600;color:var(--dx-muted)}
.dx-posts__pin{color:var(--dx-accent);font-weight:600}
.dx-posts p{margin-top:9px;font-size:14px;line-height:1.78;color:var(--dx-muted)}
/* 相关文章那几条：字号收小，跟正文里的链接区分开 */
.dx-posts--brief>li{padding:16px 0}
.dx-posts--brief h3{font-size:15.5px}
/* 正文：与站内其它长文同一套排版 */
.dx-prose{max-width:760px;font-size:16px;line-height:1.85;color:var(--dx-text)}
.dx-prose>p{margin-bottom:20px}
.dx-prose h2{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--dx-ink);margin:38px 0 14px}
.dx-prose h3{font-size:18px;font-weight:600;color:var(--dx-ink);margin:30px 0 12px}
.dx-prose ul,.dx-prose ol{margin:0 0 20px 22px}
.dx-prose li{margin-bottom:9px}
.dx-prose a{color:var(--dx-accent)}
.dx-prose blockquote{margin:24px 0;padding:2px 0 2px 20px;border-left:2px solid var(--dx-line-strong);
    color:var(--dx-muted)}
.dx-prose img{max-width:100%;height:auto;margin:10px 0}
.dx-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
    background:var(--dx-soft);padding:1px 5px;border-radius:2px}
.dx-prose pre{background:var(--dx-soft);border:1px solid var(--dx-line);border-radius:2px;
    padding:16px 18px;overflow-x:auto;margin:0 0 20px}
.dx-prose pre code{background:none;padding:0}
.dx-prose table{width:100%;border-collapse:collapse;margin:0 0 20px}
.dx-prose th,.dx-prose td{padding:11px 0;border-bottom:1px solid var(--dx-line);text-align:left;font-size:14.5px}
/* 法律正文里两张宽表：窄屏上自己横滑，不要把页面撑宽 */
.dx-prose table{display:block;overflow-x:auto}
/* 法律正文专用的两个块：提示框，以及卖方/控制者信息表 */
.dx-prose .legal-note{margin:24px 0;padding:16px 20px;border-left:2px solid var(--dx-accent);
    background:var(--dx-soft);font-size:15px}
.dx-prose .legal-note p:last-child{margin-bottom:0}
.dx-prose .legal-seller th{width:32%;font-weight:600;color:var(--dx-ink)}

/* ── 帮助文档：正文页左边一栏目录（分类 → 文章）───────────────── */
/* 侧栏跟着页面走，但不跟着滚一整页：自己带滚动条，滚到底部时停住。 */
.dx-kb{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:56px;align-items:start}
.dx-kb__side{position:sticky;top:calc(var(--nav-h,73px) + 24px);
    max-height:calc(100vh - var(--nav-h,73px) - 56px);
    /* 两个轴都要写死：只设 overflow-y，另一个轴的 visible 会被算成 auto，
       于是侧栏多出一条横向滚动条。 */
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    border-top:1px solid var(--dx-line);padding-top:6px}
.dx-kb__group{border-bottom:1px solid var(--dx-line)}
/* 分类这一行就是折叠开关：默认收起，只有当前文章所在的那一类是展开的，
   否则九类一起铺开，左栏比正文还长。 */
.dx-kb__cat{display:flex;align-items:center;gap:8px;padding:14px 0;cursor:pointer;
    list-style:none;font-size:13px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dx-faint);transition:color .14s}
.dx-kb__cat::-webkit-details-marker{display:none}
.dx-kb__cat:hover{color:var(--dx-ink)}
.dx-kb__group[open] .dx-kb__cat{color:var(--dx-ink)}
/* 名字负责让位（太长就省略号），计数与三角不参与收缩——不然这三个挤在一起
   会把这一行顶出容器一两像素，右边的三角被裁掉一点。 */
.dx-kb__cat>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-kb__n,.dx-kb__caret{flex:none}
.dx-kb__n{font-style:normal;font-size:12px;letter-spacing:0;color:var(--dx-faint);
    background:var(--dx-soft);border-radius:999px;padding:1px 7px}
/* 小三角：收起时朝右，展开时转下来 */
.dx-kb__caret{margin-left:auto;margin-right:2px;width:6px;height:6px;border-right:1.4px solid currentColor;
    border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px);
    transition:transform .16s}
.dx-kb__group[open] .dx-kb__caret{transform:rotate(225deg) translateY(-1px)}
.dx-kb__group ul{list-style:none;margin:0 0 10px;padding:0}
.dx-kb__group li{margin-bottom:2px}
.dx-kb__group a{display:block;padding:8px 10px;border-radius:2px;font-size:15px;line-height:1.65;
    color:var(--dx-muted);text-decoration:none;transition:background .14s,color .14s}
.dx-kb__group a:hover{color:var(--dx-ink);background:var(--dx-soft)}
.dx-kb__group a.is-on{color:var(--dx-accent);font-weight:600;background:var(--dx-soft)}
.dx-kb__main{min-width:0}
/* 右栏只是内容（比如联系页的主体信息），不是目录：不吸顶、不自己滚。 */
.dx-kb__side--plain{position:static;max-height:none;overflow:visible;border-top:0;padding-top:0}
.dx-kb__meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
    margin-bottom:26px;font-size:12.5px;color:var(--dx-faint)}
.dx-kb__foot{border-top:1px solid var(--dx-line);padding-top:30px;margin-top:14px}
@media(max-width:1000px){
    .dx-kb{grid-template-columns:1fr;gap:34px}
    .dx-kb__side{position:static;max-height:none;overflow:visible}
}

/* ── 转移页首屏：域名 + 授权码两格，右边是批量转移入口 ───────────── */
/* 排在首屏的深紫底上，所以按钮照搜索条那条来：白底、紫字，不用品牌紫。 */
.dx-tf{display:flex;flex-wrap:wrap;align-items:stretch;margin-top:30px;max-width:900px}
.dx-tf__domain,.dx-tf__code{height:56px;padding:0 18px;background:transparent;color:#fff;
    border:1px solid rgba(255,255,255,.34);font:inherit;font-size:15.5px;outline:none;
    min-width:0;transition:border-color .16s}
.dx-tf__domain{flex:1 1 320px;border-radius:2px 0 0 2px}
.dx-tf__code{flex:0 1 230px;border-left:0;border-radius:0}
.dx-tf__domain::placeholder,.dx-tf__code::placeholder{color:rgba(255,255,255,.5)}
.dx-tf__domain:focus,.dx-tf__code:focus{border-color:rgba(255,255,255,.75)}
.dx-tf__go{height:56px;padding:0 28px;background:#fff;color:var(--dx-brand-deep);
    border:1px solid #fff;border-radius:0 2px 2px 0;font:inherit;font-size:15px;font-weight:600;
    cursor:pointer;white-space:nowrap;transition:background .16s}
.dx-tf__go:hover{background:#E9E9EE;border-color:#E9E9EE}
.dx-tf__link{align-self:center;margin-left:22px;font-size:14px;color:rgba(255,255,255,.75);
    text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
    transition:color .16s,border-color .16s}
.dx-tf__link:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.dx-tf__trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;
    font-size:12.5px;color:rgba(255,255,255,.55)}
.dx-tf__trust li{position:relative;padding-left:15px}
.dx-tf__trust li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;
    border-radius:50%;background:rgba(255,255,255,.35)}
@media(max-width:760px){
    .dx-tf{max-width:none}
    .dx-tf__domain,.dx-tf__code{flex:1 1 100%;border:1px solid rgba(255,255,255,.34);
        border-bottom:0;border-radius:0}
    .dx-tf__domain{border-radius:2px 2px 0 0}
    .dx-tf__go{flex:1 1 100%;border-radius:0 0 2px 2px}
    .dx-tf__link{margin:14px 0 0}
}

/* ── 批量转移页首屏：一张贴清单的框（域名,授权码）───────────────── */
/* 底色、边框、按钮都跟单个转移那组输入对齐，两个页面看起来是一套东西。 */
.dx-bt{margin-top:20px;max-width:900px}
.dx-bt__hint{margin-bottom:8px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62)}
.dx-bt textarea{display:block;width:100%;min-height:92px;padding:12px 16px;
    background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34);border-radius:2px;
    font:inherit;font-size:14px;line-height:1.7;resize:vertical;outline:none;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    transition:border-color .16s}
.dx-bt textarea::placeholder{color:rgba(255,255,255,.42)}
.dx-bt textarea:focus{border-color:rgba(255,255,255,.75)}
.dx-bt__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:12px}
.dx-bt__go{height:48px;padding:0 26px;background:#fff;color:var(--dx-brand-deep);
    border:1px solid #fff;border-radius:2px;font:inherit;font-size:14.5px;font-weight:600;
    cursor:pointer;white-space:nowrap;transition:background .16s}
.dx-bt__go:hover{background:#E9E9EE;border-color:#E9E9EE}
.dx-bt__row .dx-tf__link{margin-left:0}
/* 这排链接（批量转入 / 联系我们 / 帮助文档）接在「单个域名转移 ›」后面同一行，
   所以按行内元素排，去掉它平时自带的上间距。 */
.dx-hero__links--inline{display:inline-flex;margin-top:0}
.dx-hero__links--inline ul{gap:6px 20px;align-items:center}
.dx-hero__links--inline a{font-size:13.5px}
@media(max-width:760px){
    .dx-bt{max-width:none}
}


/* ══ dsh-mobile-adapt ══ 手机适配：仅 ≤680px / ≤420px 生效，桌面版式不受影响。
   两列网格改单列、长链接断行、输入控件字号抬到 16px（避免 iOS 聚焦自动放大）。 */
@media(max-width:680px){
    /* 高级搜索：写死的两列网格在窄屏会把右列算成 0 宽，内容甩出屏幕 → 单列 */
    .dx-adv__top{grid-template-columns:minmax(0,1fr);gap:22px}
    .dx-adv__left,.dx-adv__right,.dx-adv__opts{min-width:0}
    .dx-adv__line{grid-template-columns:minmax(0,1fr);gap:6px;align-items:start}
    .dx-adv__line--wide{grid-template-columns:minmax(0,1fr)}
    .dx-adv__label{white-space:normal}
    .dx-adv__search{max-width:none}
    .dx-adv__search .dx-input{height:46px;font-size:16px}
    .dx-adv__ctl .dx-input{height:38px;font-size:16px}
    .dx-adv__actions{flex-wrap:wrap;gap:12px}
    .dx-adv__hint{margin-left:0}
    /* 表单两列改单列（联系页等） */
    .dx-grid2{grid-template-columns:minmax(0,1fr)}
    /* 正文长 URL / 长单词不再撑破容器 */
    .dx-prose,.dx-prose a,.dx-prose p,.dx-prose li,.dx-prose td{overflow-wrap:anywhere}
    .dx-prose{max-width:none}
    /* 输入控件字号 ≥16px：iOS 聚焦不放大页面 */
    .dx-input,.dx-textarea,.dx-select,.dx-filter,
    .dx-form input,.dx-form select,.dx-form textarea,
    .dx-adv input,.dx-adv select,.dx-adv textarea{font-size:16px}
    /* 小字抬到手机可读下限 */
    .dx-label{font-size:12px;letter-spacing:.12em}
    .dx-posts__tag,.dx-picked__chip,.dx-adv .dx-picked__chip{font-size:12px}
}
@media(max-width:420px){
    /* 极窄屏：多列控件降为单列 */
    .dx-checks{grid-template-columns:minmax(0,1fr)}
    .dx-wrap,.dx-hero__in{padding:0 16px}
}


/* ══ dsh-mobile-adapt-2 ══ 第二轮：修优先级没压住的项（仍仅窄屏生效） */
@media(max-width:680px){
    /* .dx-kb 的两列定义（minmax(0,290px) minmax(0,1fr)）在窄屏会把右栏算成 0 宽，
       1000px 断点的 1fr 压不住它 —— 这里用 !important 明确单列。 */
    .dx-kb{grid-template-columns:minmax(0,1fr) !important}
    .dx-kb__side,.dx-kb__main{min-width:0}
    /* iOS 聚焦不放大：输入控件字号 ≥16px。
       用 !important 压过 .dx-adv input[type="number"]{13.5px} 这类更具体的选择器。 */
    .dx input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .dx select,.dx textarea{font-size:16px !important}
}


/* ══ dsh-mobile-adapt-3 ══ 第三轮：补 hero 区与极窄屏（仍仅窄屏生效） */
@media(max-width:680px){
    /* hero 区的输入框（.dx-tf 转移、.dx-bt 批量转移）不在 .dx 容器内，单独覆盖字号 */
    .dx-hero input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .dx-hero select,.dx-hero textarea,
    .dx-tf__domain,.dx-tf__code,.dx-bt textarea{font-size:16px !important}
    /* 表头 / 区块小标签抬到手机可读下限 */
    .dx-table th,.dx-eyebrow,.dx-hero__links span{font-size:12px}
}
@media(max-width:420px){
    /* 极窄屏：路线图每条的标题与右侧链接改上下排，标题不再被挤成 166px */
    .dx-road>div{grid-template-columns:minmax(0,1fr)}
    .dx-road a{grid-column:1;grid-row:auto;justify-self:start}
}


/* ══ dsh-hero-unify ══ 首屏留白统一：以首页首屏为基准（内上 96 / 内下 46 / 首屏下方 68）。
   仅手机断点生效，桌面版式不受影响。 */
@media(max-width:720px){
    /* 去掉固定 545px：首屏高度改为贴合内容，内下留白才不会再时有时无（原来 2~193px） */
    .dx-hero{min-height:0}
    body.page-ownhero .dx-hero{
        padding-top:96px;      /* 与首页 .page-home .hero 同值 */
        padding-bottom:46px;   /* 与首页同值 */
    }
    .dx-hero__in{padding-bottom:0}
    /* 首屏下方留白统一为首页的 68px（原 .dx-sec 移动端上内边距 52 → 64） */
    .pn-main .dx > .dx-sec:first-child,
    .pn-main .dx > section.dx-sec:first-of-type{padding-top:64px}
}


/* ══ dsh-hero-unify-2 ══ 修正：首屏下方留白定到 68px，并补上 .dx-band 这一类首块。 */
@media(max-width:720px){
    .pn-main .dx > .dx-sec:first-child,
    .pn-main .dx > section.dx-sec:first-of-type,
    .pn-main .dx > .dx-band:first-child,
    .pn-main .dx > section.dx-band:first-of-type{padding-top:68px}
}