/* ─── YLCMC DNS 面板专用样式（在 main.css 之后加载，只补面板独有的东西）─── */

/* ─── 盒模型修正 ───
   来源：main.css 没有做全局 box-sizing 归一（只在 .fg-item 的表单控件上单独补了
   border-box），所以「声明宽度 + 左右内边距」会被叠加。登录页实测两处走形：
     · .login-card   声明 width:400px + padding 32px×2 → 实际渲染成 464px（宽 64px）
     · .btn-block    声明 width:100% + padding 22px×2 → 比容器宽 44px，右侧溢出卡片 12px
   这里按「声明的宽度即最终宽度」补回 border-box。作用范围仅限本面板：
   .btn-block 目前只用在 login.php 与 errors/404.php，两处都是本面板的页面。 */
.login-card,
.btn-block {
    box-sizing: border-box;
}

/* 顶栏右侧：域名与登录账户 */
.topbar-domain,
.topbar-user {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--ac-text-secondary);
}
.topbar-domain {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 4px 10px; border: 1px solid var(--ac-border);
}
.topbar-domain i, .topbar-user i { color: var(--ac-primary); }
@media (max-width: 640px) { .topbar-user { display: none; } }

/* 等宽字体（记录值、ID、错误码） */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--ac-text-muted); }

/* 列表工具条（搜索 / 筛选） */
.dns-toolbar {
    padding: 12px 20px;
    border-bottom: 1px solid var(--ac-border-light);
    background: var(--ac-surface);
}
.dns-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dns-search input[type="text"] {
    flex: 1 1 240px; min-width: 0; max-width: 380px;
    padding: 7px 12px; font-size: 13px; font-family: inherit;
    color: var(--ac-text); background: var(--ac-surface);
    border: 1px solid var(--ac-border); border-radius: var(--ac-radius-control);
    outline: none;
}
.dns-search input[type="text"]:focus { border-color: var(--ac-primary); box-shadow: var(--ac-focus-ring); }
.dns-search select {
    padding: 7px 10px; font-size: 13px; font-family: inherit;
    color: var(--ac-text); background: var(--ac-surface);
    border: 1px solid var(--ac-border); border-radius: var(--ac-radius-control);
    outline: none;
}
.dns-search select:focus { border-color: var(--ac-primary); }
.dns-search .btn-ghost { padding: 7px 12px; font-size: 13px; }

/* 表格列宽 */
/* 「完整记录」列显示的是 主机记录.ylcmc.top（最长的一条是 _minecraft._tcp.mc.ylcmc.top），
   比原来的短写法长很多，给个下限免得被压成两行 */
.dns-table .col-rr { min-width: 200px; }
.dns-table .col-type { width: 78px; }
.dns-table .col-line { width: 90px; color: var(--ac-text-muted); }
.dns-table .col-ttl { width: 72px; }
.dns-table .col-status { width: 84px; }
.dns-table .col-time { width: 156px; }
.dns-table .col-act { width: 72px; }
.dns-table .col-ops { width: 124px; }

.rec-rr { font-weight: 700; }
/* 完整记录可点击复制：cursor: copy 是鼠标移上去最直接的提示，
   悬停再变个色，不用额外摆一个复制图标（记录值那边已经有图标按钮了）。 */
.rec-rr .rr-copy { cursor: copy; transition: color .15s ease; }
.rec-rr .rr-copy:hover { color: var(--ac-primary-strong); }

/* 记录类型徽标（0 圆角，细边框，按类型给色） */
.rec-type {
    display: inline-block; min-width: 54px; text-align: center;
    padding: 2px 6px; font-size: 11px; font-weight: 800; letter-spacing: .6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border: 1px solid var(--ac-border); border-radius: 2px;
    color: var(--ac-text-secondary); background: var(--ac-surface-2);
}
.rec-type.t-a          { color: #0f9488; background: #f0fdfa; border-color: #99f6e4; }
.rec-type.t-aaaa       { color: #0e7490; background: #ecfeff; border-color: #a5f3fc; }
.rec-type.t-cname      { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.rec-type.t-txt        { color: #475569; background: #f8fafc; border-color: #e2e8f0; }
.rec-type.t-mx         { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }
.rec-type.t-ns         { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.rec-type.t-srv        { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
.rec-type.t-caa        { color: #be185d; background: #fdf2f8; border-color: #fbcfe8; }
.rec-type.t-url,
.rec-type.t-redirect_url,
.rec-type.t-forward_url { color: #a16207; background: #fefce8; border-color: #fde68a; }

/* 记录值单元格 */
.rec-value { max-width: 520px; }
.rec-value .mono { font-size: 12.5px; color: var(--ac-text-secondary); word-break: break-all; }
.rec-prio {
    display: inline-block; margin-right: 8px; padding: 1px 6px;
    font-size: 11px; font-weight: 700; color: #c2410c;
    background: #fff7ed; border: 1px solid #fed7aa;
}
.copy-btn {
    margin-left: 8px; padding: 0; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    color: var(--ac-text-muted); font-size: 12px;
}
.copy-btn:hover { color: var(--ac-primary); }
.log-detail { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ac-text-muted); word-break: break-all; }

/* 启用 / 暂停状态点 */
.rec-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.rec-status .dot { width: 6px; height: 6px; display: inline-block; flex: 0 0 auto; border-radius: 50%; }
.rec-status.is-on { color: #1a9c54; }
.rec-status.is-on .dot { background: #1a9c54; }
.rec-status.is-off { color: var(--ac-text-muted); }
.rec-status.is-off .dot { background: #c0c4cc; }
.rec-status.is-skip { color: var(--ac-text-muted); }
.rec-status.is-skip .dot { background: #d4d7dd; }

/* 日志动作标签 */
.act-chip {
    display: inline-block; padding: 2px 7px; font-size: 11px; font-weight: 700;
    border: 1px solid var(--ac-border); border-radius: 2px;
    color: var(--ac-text-secondary); background: var(--ac-surface-2);
}
.act-add     { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.act-update  { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.act-delete  { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.act-enable  { color: #0f9488; background: #f0fdfa; border-color: #99f6e4; }
.act-disable { color: #a16207; background: #fefce8; border-color: #fde68a; }
.act-login   { color: var(--ac-text-secondary); }
.act-logout  { color: var(--ac-text-muted); }

/* 分页条 */
.pager { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--ac-border-light); }
.pager .is-disabled { pointer-events: none; opacity: .45; }

/* 自检页的键值列表 */
.kv-list { display: grid; gap: 10px; margin-bottom: 18px; }
.kv { display: flex; align-items: baseline; gap: 16px; font-size: 13px; }
.kv-k { flex: 0 0 120px; color: var(--ac-text-muted); }
.kv-v { color: var(--ac-text); word-break: break-all; }
.mini-title { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--ac-text-muted); }

/* 登录页补充 */
.login-note { margin: 0 0 16px; font-size: 13px; line-height: 1.8; color: var(--ac-text-secondary); }
.login-btn { margin-top: 4px; }
.login-foot { margin: 16px 0 0; font-size: 12px; text-align: center; color: var(--ac-text-muted); }
.setup-box { margin-top: 4px; padding: 14px 16px; background: var(--ac-surface-2); border: 1px solid var(--ac-border); }
.setup-title { font-size: 12px; font-weight: 700; color: var(--ac-text-secondary); margin-bottom: 8px; }
.setup-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.9; color: var(--ac-text-secondary); word-break: break-all; }
.setup-list .mono { color: var(--ac-primary-strong); }

/* 记录值输入框下方的格式提示：内容随记录类型切换（见 dns.js 的 VALUE_HINTS） */
.fg-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--ac-text-muted); }

/* ─── SRV 记录值：拆成 优先级 / 权重 / 端口 / 目标地址 四格 ───
   照阿里云控制台的「记录值集合」版式做的：表头一行灰底 + 下面一行输入框，
   列之间用竖线分开，输入框本身无边框（焦点整格泛品牌色底）。
   四格拼出来的字符串仍写回 #f-value，所以对表单和接口没有影响。 */
.srv-block { display: flex; flex-direction: column; gap: 7px; }
.srv-block__label { font-size: 13px; font-weight: 600; color: var(--ac-text-secondary); }
.srv-grid { border: 1px solid var(--ac-border); background: var(--ac-surface); }
.srv-grid__head,
.srv-grid__row { display: grid; grid-template-columns: 64px 64px 76px minmax(0, 1fr); }
.srv-grid__head { background: var(--ac-surface-2); border-bottom: 1px solid var(--ac-border); }
.srv-grid__head span {
    display: block; padding: 7px 10px;
    font-size: 11px; font-weight: 700; color: var(--ac-text-muted);
}
.srv-grid__head span + span,
.srv-grid__row > * + * { border-left: 1px solid var(--ac-border); }
.srv-grid__row > .srv-cell { display: flex; flex-direction: column; min-width: 0; }
.srv-cell__label { display: none; }   /* 宽屏有表头，格内小标题就不重复了，窄屏才放出来 */
.srv-grid__row input {
    width: 100%; min-width: 0; box-sizing: border-box;
    border: 0; border-radius: 0; background: none;
    padding: 9px 10px; font-size: 13px; font-family: inherit;
    color: var(--ac-text); outline: none;
}
.srv-grid__row input:focus { background: var(--ac-primary-bg); }
/* 数字框去掉浏览器自带的步进箭头（鼠标移上去才冒出来的小三角，很丑） */
.srv-grid__row input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.srv-grid__row input[type="number"]::-webkit-outer-spin-button,
.srv-grid__row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* [hidden] 要自己补：上面给 .srv-block 声明了 display，会盖掉浏览器默认的 [hidden] { display: none } */
.srv-block[hidden] { display: none; }

/* 窄屏：四列横排会挤得没法填，改成竖着一列；表头藏掉，改由每格自己的小标题认字段 */
@media (max-width: 560px) {
    .srv-grid__head { display: none; }
    .srv-grid__row { grid-template-columns: 1fr; }
    .srv-grid__row > * + * { border-left: 0; border-top: 1px solid var(--ac-border); }
    .srv-cell__label {
        display: block; padding: 8px 10px 0;
        font-size: 11px; font-weight: 700; color: var(--ac-text-muted);
    }
    .srv-grid__row input { padding-top: 3px; }
}

/* ─── 记录抽屉改成三段式卡片 ───
   阿里云控制台的弹窗是「标题栏 / 内容区 / 底部操作条」三段分明；
   本面板原来按钮紧跟字段、下面空一大片，不像一张卡片。这里：
   ① 内容区做成 flex 列并撑满抽屉，底部操作条用 auto 上边距沉到最底下；
   ② 表单长到需要滚动时，sticky 让操作条一直可见；
   ③ 操作条用负外边距抵消 .drawer-body 的左右内边距，底色与分隔线通到抽屉边缘。 */
.drawer-body { display: flex; flex-direction: column; }
.drawer-body > form { display: flex; flex-direction: column; flex: 1 1 auto; }
.drawer-body .form-actions {
    margin: auto -24px 0;
    padding: 15px 24px 18px;
    background: var(--ac-surface);
    border-top: 1px solid var(--ac-border);
}

/* 主机记录右侧的域名后缀（照着阿里云控制台的 .ylcmc.top 后缀做的）
   注意选择器要写 .fg-item .fg-suffix-wrap：main.css 里有 `.fg-item span { display:flex }`，
   只写单个类会被它压住，反而变成 flex 布局。 */
.fg-item .fg-suffix-wrap { position: relative; display: block; }
.fg-item .fg-suffix-wrap input { padding-right: 88px; }
.fg-item .fg-suffix {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    display: block; font-size: 12px; color: var(--ac-text-muted);
    pointer-events: none; white-space: nowrap;
}

/* 字段分组小标题：把「记录内容」与「生效设置」分开，长表单不再是一坨平铺 */
.fg-section {
    margin: 20px 0 12px; padding-top: 16px;
    border-top: 1px solid var(--ac-border-light);
    font-size: 12px; font-weight: 700; letter-spacing: .5px;
    color: var(--ac-text-muted);
}

@media (max-width: 767px) {
    /* main.css 在窄屏把 .drawer-body 的内边距改成 16px，这里跟着改，别露边 */
    .drawer-body .form-actions { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* ─── 统计卡片收紧 ───
   main.css 里的 .dash-stat 是照 acc 仪表盘抄的（icon 44px、内边距 16/18、数字 24px），
   放在这个只有 4 张卡、数字多为个位数的页面上显得又高又空。这里只压高度和内边距，
   结构（左图标块 + 右数字/标签）不动。只作用于本面板，main.css 保持原样。 */
.stat-grid { gap: 14px; }
.dash-stat { padding: 12px 16px; gap: 12px; }
.dash-stat__icon { width: 38px; height: 38px; font-size: 17px; }
.dash-stat__num { font-size: 22px; }
.dash-stat__num.is-text { font-size: 14px; line-height: 1.5; }
.dash-stat__label { margin-top: 3px; }

/* 前三张卡只有一个数字，第 4 张「类型分布」放的是
   「CNAME 3 · MX 3 · SRV 3 · TXT 1」这类明细。四列等宽时这行明细会折成两行
   （「1」被挤到第二行），把整行卡片一起撑高。等宽下给它多分一点宽度即可单行放下。
   注意必须套 min-width：直接写基础规则会盖掉 main.css 里 max-width:1024px 的两列降级。 */
@media (min-width: 1025px) {
    .stat-grid { grid-template-columns: repeat(3, 1fr) 1.4fr; }
}

/* ═══ 提示条（toast）与确认对话框 ═══
   全站不用浏览器原生的 alert / confirm / prompt（样式不可控、还阻塞整页）。
   操作结果走右上角划入的提示条，危险操作走自绘对话框（与记录抽屉同一套三段式版式）。
   颜色沿用列表里已有的语义：成功 = #1a9c54（与 .rec-status.is-on 同色），
   失败 = --ac-danger，注意 = #d9730d（与仪表盘 warn 卡同色）。 */

@keyframes uiToastIn  { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes uiToastOut { to { opacity: 0; transform: translateX(18px); } }

.ui-toast-stack {
    position: fixed; top: 74px; right: 20px; z-index: 3000;
    display: flex; flex-direction: column; gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;   /* 空白处不挡页面点击，只有提示条本身可点 */
}
.ui-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 12px 12px 14px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-left: 3px solid var(--ac-text-muted);
    border-radius: var(--ac-radius-control);
    box-shadow: var(--ac-shadow-lg);
    animation: uiToastIn .22s ease;
}
.ui-toast.is-out { animation: uiToastOut .18s ease forwards; }
.ui-toast--ok     { border-left-color: #1a9c54; }
.ui-toast--danger { border-left-color: var(--ac-danger); }
.ui-toast--warn   { border-left-color: #d9730d; }
.ui-toast__icon { flex: 0 0 auto; font-size: 17px; line-height: 1.4; }
.ui-toast--ok     .ui-toast__icon { color: #1a9c54; }
.ui-toast--danger .ui-toast__icon { color: var(--ac-danger); }
.ui-toast--warn   .ui-toast__icon { color: #d9730d; }
.ui-toast__body { flex: 1 1 auto; min-width: 0; }
.ui-toast__title { font-size: 13px; font-weight: 700; color: var(--ac-text); }
.ui-toast__text {
    margin: 3px 0 0; font-size: 12.5px; line-height: 1.7;
    color: var(--ac-text-secondary);
    overflow-wrap: anywhere;   /* TXT 记录值可能很长，别把提示条撑破 */
}
.ui-toast__close {
    flex: 0 0 auto; width: 22px; height: 22px; margin: -2px -2px 0 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    color: var(--ac-text-muted); font-size: 11px;
    transition: color .15s ease;
}
.ui-toast__close:hover { color: var(--ac-text); }

@media (max-width: 640px) {
    .ui-toast-stack { top: 64px; right: 12px; left: 12px; width: auto; }
}

/* ─── 确认对话框（替代 window.confirm）─── */
.ui-confirm-mask {
    position: fixed; inset: 0; z-index: 4000;   /* 要压过抽屉的 2000/2010 与提示条的 3000 */
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(16, 22, 29, .38);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
.ui-confirm-mask.show { opacity: 1; visibility: visible; }
.ui-confirm {
    width: 420px; max-width: 100%;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    box-shadow: var(--ac-shadow-lg);
    transform: translateY(10px);
    transition: transform .18s ease;
}
.ui-confirm-mask.show .ui-confirm { transform: none; }

.ui-confirm__head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 14px 20px;
    background: var(--ac-surface-2); border-bottom: 1px solid var(--ac-border);
    font-size: 14px; font-weight: 700;
}
.ui-confirm__icon { display: inline-flex; font-size: 16px; }
.ui-confirm--danger  .ui-confirm__icon { color: var(--ac-danger); }
.ui-confirm--primary .ui-confirm__icon { color: var(--ac-primary); }
.ui-confirm__title { flex: 1 1 auto; min-width: 0; }
.ui-confirm__close {
    width: 30px; height: 30px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--ac-border); color: var(--ac-text-secondary);
    cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.ui-confirm__close:hover { color: var(--ac-text); border-color: var(--ac-text-muted); }

.ui-confirm__body { padding: 18px 20px 20px; }
.ui-confirm__msg { margin: 0; font-size: 13px; line-height: 1.75; color: var(--ac-text-secondary); }
/* 被操作的那条记录：类型徽标 + 完整域名 */
.ui-confirm__target {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 0; padding: 10px 12px;
    background: var(--ac-surface-2); border: 1px solid var(--ac-border);
    font-size: 13px; overflow-wrap: anywhere;
}
.ui-confirm__target .mono { font-weight: 700; color: var(--ac-text); }
.ui-confirm__note {
    margin: 12px 0 0; padding-left: 10px;
    border-left: 2px solid var(--ac-border);
    font-size: 12px; line-height: 1.7; color: var(--ac-text-muted);
}
.ui-confirm--danger  .ui-confirm__note { border-left-color: var(--ac-danger-border); }
.ui-confirm--primary .ui-confirm__note { border-left-color: var(--ac-primary-light); }

/* [hidden] 得自己写：上面给 .ui-confirm__target 声明了 display，会盖掉浏览器
   默认的 [hidden] { display: none }（作者样式优先于 UA 样式）。 */
.ui-confirm__target[hidden],
.ui-confirm__note[hidden] { display: none; }

.ui-confirm__foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px 16px;
    background: var(--ac-surface-2); border-top: 1px solid var(--ac-border);
}
.ui-confirm__foot .btn-teal,
.ui-confirm__foot .btn-danger,
.ui-confirm__foot .btn-ghost { min-width: 92px; }

/* 键盘聚焦提示：与 main.css 里 .ui-sel-trigger 同一套做法（换掉浏览器默认那圈描边）。
   危险操作弹窗默认把焦点放在「取消」上，没这条就会露出一圈默认样式的框。 */
.ui-confirm__foot button:focus-visible,
.ui-confirm__close:focus-visible,
.ui-toast__close:focus-visible { outline: 2px solid var(--ac-primary); outline-offset: 1px; }

/* 无 JS 时 flash 仍是页面里的普通横幅；有 JS 时由 dns.js 换成提示条，这里先藏掉防闪 */
html.js .flash[data-flash] { display: none; }