:root{ --bg:#f4f6fb; --sidebar:#1f2a44; --sidebar-hover:#2c3a5e; --sidebar-active:#3b82f6; --card:#ffffff; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb; --primary:#3b82f6; --primary-dark:#2563eb; --danger:#ef4444; --blue:#2563eb; /* 7天内 */ --yellow:#d97706; /* 3天内 */ --red:#dc2626; /* 过期 */ /* ---- 语义化颜色（暗色模式的地基）---- 上面那批是「原始变量」，下面这批是「角色变量」。 角色变量的值只在 :root 里定义一次（浅色），暗色模式在 body.dark 里整批覆盖， 这样所有规则都写 var(--角色)，不需要为暗色再抄一遍选择器。 命名约定： --surface 卡片/弹窗/输入框的「面」 --surface-2 次级面（表头、说明条、chip 底） --surface-3 三级面（控件容器、进度槽） --tint-* 淡色底（徽章、提示块） --border-* 边框（含「醒目边框」与语义色边框） --text-strong 主文字（原 #1f2937 / #111827） --text-2 次主文字（原 #374151） --text-3 弱化文字（原 #6b7280 一族） --ok-green / --accent-blue / --warn-amber / --danger-red / --slate / --teal 语义文字色 */ --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9; --tint-blue:#eef2ff; --tint-success:#ecfdf5; --tint-danger:#fef2f2; --tint-warn:#fffbeb; --border-strong:#cbd5e1; --border-success:#a7f3d0; --border-danger:#fecaca; --border-warn:#fde68a; --text-strong:#1f2937; --text-2:#374151; --text-3:#6b7280; --ok-green:#047857; --accent-blue:#1d4ed8; --warn-amber:#b45309; --danger-red:#dc2626; --slate:#334155; --teal:#0f766e; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg);color:var(--text);font-size:14px;line-height:1.5} /* ===== 登录页 ===== */ .login-view{height:100vh;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#1f2a44 0%,#3b82f6 100%)} .login-card{background:var(--surface);border-radius:16px;padding:40px 36px;width:340px; box-shadow:0 20px 50px rgba(0,0,0,.25);text-align:center} .login-logo{font-size:46px;margin-bottom:8px} .login-card h1{font-size:22px;margin-bottom:4px} .login-sub{color:var(--muted);margin-bottom:24px} .login-card label{display:block;text-align:left;font-size:13px;color:var(--muted);margin-bottom:14px} .login-card input{width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--border); border-radius:9px;font-size:14px;outline:none;transition:border .2s} .login-card input:focus{border-color:var(--primary)} .login-error{color:var(--danger);font-size:12px;min-height:16px;margin-bottom:8px} .login-hint{margin-top:16px;font-size:12px;color:var(--muted)} /* ===== 按钮 ===== */ .btn-primary{background:var(--primary);color:#fff;border:none;border-radius:9px; padding:10px 18px;font-size:14px;cursor:pointer;transition:background .2s;font-weight:500} .btn-primary:hover{background:var(--primary-dark)} /* 顶栏「增加」主按钮：保留突出身份，增加精致感与按压反馈 */ #add-btn{display:inline-flex;align-items:center;gap:5px;font-weight:600; box-shadow:0 2px 6px rgba(59,130,246,.32);transition:background .2s,box-shadow .2s,transform .08s} #add-btn::before{content:"+";font-size:16px;line-height:1;font-weight:700;margin-top:-1px} #add-btn:hover{box-shadow:0 4px 12px rgba(59,130,246,.42)} #add-btn:active{transform:translateY(1px);box-shadow:0 1px 4px rgba(59,130,246,.3)} .btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:9px; padding:10px 18px;font-size:14px;cursor:pointer} .btn-ghost:hover{background:var(--surface-2)} .btn-side{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2); border-radius:9px;padding:9px 14px;cursor:pointer;width:100%;font-size:13px;transition:background .2s} .btn-side:hover{background:rgba(255,255,255,.22)} .btn-logout{background:rgba(239,68,68,.18);color:#fecaca;border:1px solid rgba(239,68,68,.35); border-radius:9px;padding:9px 14px;cursor:pointer;width:100%;font-size:13px;transition:background .2s} .btn-logout:hover{background:rgba(239,68,68,.3);color:#fff} .btn-sm{padding:5px 11px;font-size:12px;border-radius:7px;border:1px solid var(--border); background:var(--surface);cursor:pointer;margin-right:6px;transition:all .15s} .btn-sm:hover{background:var(--tint-blue);border-color:var(--primary);color:var(--primary)} .btn-danger{color:var(--danger);border-color:var(--border-danger)} .btn-danger:hover{background:var(--tint-danger);border-color:var(--danger);color:var(--danger)} /* 上传中的「取消上传」：与「保存」同套尺寸的实心红按钮。 注意不能直接用 .btn-danger——那个类只改了 color/border-color， 本来是给 .btn-sm 搭配的修饰类，单独用会掉回浏览器默认按钮样式（灰底+默认内边距）， 跟旁边的 .btn-primary 完全不是一套。 */ .upload-cancel-btn{background:var(--danger);color:#fff;border:1px solid var(--danger);border-radius:9px; padding:10px 18px;font-size:14px;font-weight:500;cursor:pointer; transition:background .2s ease,border-color .2s ease,opacity .2s ease} .upload-cancel-btn:hover{background:var(--danger-red);border-color:var(--danger-red)} .upload-cancel-btn:active{opacity:.85} .btn-login{color:var(--primary);border-color:var(--border-strong)} .btn-login:hover{background:var(--tint-blue);border-color:var(--primary)} /* ===== 应用布局 ===== */ .app-view{display:flex;height:100vh} .sidebar{width:220px;background:var(--sidebar);color:#fff;display:flex;flex-direction:column;padding:18px 14px} .sidebar-brand{font-size:18px;font-weight:600;padding:6px 8px 18px;cursor:pointer;user-select:none;transition:opacity .15s} .sidebar-brand:hover{opacity:.85} .sidebar-brand.ip-hidden{opacity:.6} .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1} .nav-item{background:transparent;border:none;color:#cbd5e1;text-align:left;padding:12px 14px; border-radius:10px;cursor:pointer;font-size:14px;transition:background .2s;position:relative;overflow:hidden} .nav-item:hover{background:var(--sidebar-hover)} .nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:500} /* 导航点击进度条：铺在按钮底部的一条 3px 细线。 点击 → JS 加 .nav-loading（细线从 0 匀速长到 70%）， 视图数据渲染完 → JS 加 .nav-done（冲到 100% 并淡出），最后清掉两个类。 用伪元素而不是额外 DOM：不动 8 个按钮的 HTML 结构， 也不会被 data-page-node-id 之类的属性污染。 */ .nav-item::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0; background:linear-gradient(90deg,var(--primary),#7dd3fc);border-radius:0 2px 2px 0; opacity:0;pointer-events:none} .nav-item.nav-loading::after{opacity:1;width:70%;transition:width .9s ease-out} .nav-item.nav-done::after{opacity:1;width:100%;transition:width .18s ease-out,opacity .3s ease .18s} .sidebar-footer{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:8px} .sidebar-footer-row{display:flex;gap:8px} .sidebar-footer-row .btn-side{flex:1 1 0;width:auto;text-align:center} /* 退出登录 hover 浮层：网关设置/按钮设置/修改密码/登录记录（默认隐藏，hover 退出按钮时浮出） */ /* 浮层的定位祖先必须是「包含按钮的父级」：兄弟元素上的 position:relative 对绝对定位无效， 会把浮层交给初始包含块（视口）定位，导致撑满视口宽并跑到屏幕外 */ .logout-wrap{position:relative;display:flex;flex-direction:column} .logout-menu{ display:none; position:absolute; bottom:100%; left:0; right:0; flex-direction:row; flex-wrap:wrap; gap:8px; padding:10px; background:rgba(30,41,59,.98); border:1px solid rgba(255,255,255,.15); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:30; } #logout-btn:hover + .logout-menu, .logout-menu:hover, .logout-menu.show{display:flex} /* 透明桥：填补按钮顶边与菜单底边之间的缝隙，鼠标移动途中不丢失 hover */ .logout-menu::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px} .logout-menu .btn-side{flex:0 0 calc(50% - 4px);min-width:0;padding:6px 4px;font-size:12px;white-space:nowrap;text-align:center} .logout-menu .sidebar-footer-row{margin:0} /* 自定义按钮弹窗：标题/链接/操作 列表 */ .custom-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .custom-col-hint{font-size:12px;color:var(--muted)} .custom-rows{display:flex;flex-direction:column;gap:10px;max-height:50vh;overflow:auto;padding-right:4px} .custom-row{display:flex;gap:8px;align-items:center} .custom-row .custom-title{flex:0 0 28%;max-width:28%;margin-top:0} .custom-row .custom-url{flex:1 1 auto;margin-top:0} .custom-row .custom-open{flex:0 0 96px;margin-top:0} .custom-row .custom-del{flex:0 0 auto;white-space:nowrap;padding:9px 14px;margin-top:0} .custom-row .drag-handle{flex:0 0 auto;cursor:grab;color:var(--muted);font-size:16px;line-height:1;padding:0 4px;user-select:none;touch-action:none} .custom-row .drag-handle:active{cursor:grabbing} .custom-row.dragging{opacity:.45;outline:2px dashed var(--primary);outline-offset:2px} .content{flex:1;display:flex;flex-direction:column;overflow:hidden} .topbar{display:flex;align-items:center;justify-content:space-between; padding:18px 26px;background:var(--surface);border-bottom:1px solid var(--border)} .topbar h2{font-size:18px} /* 顶栏右侧按钮组：DOM 顺序为「🔑账号 → 👥分组 → ＋增加」。 难点：账号按钮只在阿里域名页显示（其它视图 display:none），而 flex 的 margin-left:auto 只能把「自己及之后的兄弟」推到右边。若只有分组带 auto， 排在它前面的账号就会被孤零零留在标题旁边。 解法（纯 CSS，不依赖 JS 显隐）： 1) 默认让「分组」带 auto —— 保证其它列表页右侧按钮组靠右； 2) 当账号按钮可见时，用「相邻兄弟 + :not([hidden])」把 auto 转交给账号， 同时取消分组的 auto，这样阿里域名页整组（账号→分组→增加）一起靠右。 注意：账号按钮是用 display:none 隐藏的，:not([hidden]) 不适用，改用 「账号按钮存在且其后面的兄弟是分组」不好使——所以这里用 JS 在 buildShell 里给 body 加 .has-dns-account 类来切换（见 app.js）。 */ .group-page-btn{margin-left:auto;margin-right:18px} .dns-account-btn{margin-right:10px} .add-btn{margin-left:2px} /* 主题切换按钮：常驻顶栏最右侧，和「增加」按钮同一行。 设计上做成「幽灵按钮的紧凑版」——不抢主按钮的视觉重量，但一眼能找到。 emoji 会随主题在 JS 里换成 🌙 / ☀️，所以这里只定尺寸，不定内容。 */ .theme-btn{margin-left:10px;padding:7px 10px;font-size:16px;line-height:1; border-radius:8px;flex:0 0 auto;transition:transform .15s ease,background .15s ease} .theme-btn:hover{transform:scale(1.08)} .theme-btn:active{transform:scale(.94)} /* 移动端顶栏空间紧，主题按钮缩成纯图标 */ @media (max-width:768px){ .theme-btn{margin-left:6px;padding:6px 8px;font-size:14px} } /* 云解析服务商徽章（阿里域名页：账号列表「云厂商」列、域名列表「账号」列、账号下拉） 阿里云=橙、腾讯云=蓝、Cloudflare=琥珀金，与各家品牌色呼应 */ .prov-badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;line-height:16px; font-weight:600;white-space:nowrap;vertical-align:middle;margin-left:6px} .prov-badge--aliyun{color:var(--warn-amber);background:var(--tint-warn);border:1px solid var(--border-warn)} .prov-badge--tencent{color:var(--accent-blue);background:var(--tint-blue);border:1px solid var(--border-strong)} /* Cloudflare 品牌色 #F6821F 偏橙，和阿里云撞车。改用中性灰蓝（CF 控制台侧栏即深灰）， 三个厂商放一起能一眼分开：阿里云=暖橙、腾讯云=蓝、Cloudflare=石板灰 */ .prov-badge--cloudflare{color:var(--slate);background:var(--surface-3);border:1px solid var(--border-strong)} /* 「云厂商」选项卡（新增/编辑账号弹窗）：不用下拉，改成左右两个可点击的标签页。 radio 本体视觉隐藏但保留可聚焦/键盘操作，选中态由 :checked + 相邻兄弟选择器驱动。 */ .prov-tabs{display:flex;align-items:center;gap:12px;margin-bottom:14px} .prov-tabs-label{flex:0 0 auto;font-size:13px;color:var(--muted)} .prov-tabs-group{display:inline-flex;padding:3px;gap:3px;background:var(--surface-3);border:1px solid var(--border);border-radius:10px} .prov-tab{position:relative;display:block;cursor:pointer;user-select:none} .prov-tab input{position:absolute;opacity:0;width:0;height:0;margin:0} .prov-tab-badge{display:inline-block;padding:5px 18px;border-radius:7px;font-size:13px;font-weight:600; color:var(--muted);background:transparent;border:1px solid transparent; transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap} .prov-tab:hover .prov-tab-badge{color:var(--text)} /* 选中态：白底 + 品牌色描边，像常见的分段控件 */ .prov-tab input:checked + .prov-tab-badge{background:var(--surface);box-shadow:0 1px 3px rgba(15,23,42,.12)} .prov-tab input:checked + .prov-tab-badge.prov-badge--aliyun{color:var(--warn-amber);border-color:var(--border-warn)} .prov-tab input:checked + .prov-tab-badge.prov-badge--tencent{color:var(--accent-blue);border-color:var(--border-strong)} .prov-tab input:checked + .prov-tab-badge.prov-badge--cloudflare{color:var(--slate);border-color:var(--border-strong)} /* 键盘可达性：焦点落在 radio 上时给对应标签描边 */ .prov-tab input:focus-visible + .prov-tab-badge{outline:2px solid var(--primary);outline-offset:1px} /* 阿里域名页：auto 转交给账号按钮（它排在分组前面，只有它带 auto 才能带飞整组） */ .has-dns-account .dns-account-btn{margin-left:auto} .has-dns-account .group-page-btn{margin-left:0} .view-content{padding:22px 26px;overflow:auto;flex:1} /* 存储模式提示 */ .banner{padding:9px 26px;font-size:12px;border-bottom:1px solid var(--border)} .banner-ok{background:var(--tint-success);color:var(--ok-green)} .banner-warn{background:var(--tint-warn);color:var(--warn-amber)} .banner-error{background:var(--tint-danger);color:var(--danger-red);font-weight:600} /* 全局提醒条（域名即将到期 / 存储将超配额）——跟在 banner 下面，同一套内边距与字号 */ .alert-bar{padding:9px 26px;font-size:12px;border-bottom:1px solid var(--border); display:flex;align-items:center;gap:10px;flex-wrap:wrap} .alert-bar--warn{background:var(--tint-warn);color:var(--warn-amber)} .alert-bar--danger{background:var(--tint-danger);color:var(--danger-red);font-weight:600} .alert-bar__jump{margin-left:auto;background:none;border:1px solid currentColor;border-radius:6px; padding:2px 10px;font-size:12px;color:inherit;cursor:pointer;white-space:nowrap} .alert-bar__jump:hover{opacity:.75} .alert-bar__close{background:none;border:0;color:inherit;cursor:pointer;font-size:14px; line-height:1;padding:0 2px;opacity:.7} .alert-bar__close:hover{opacity:1} /* ===== 表格 ===== */ .table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:12px;overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06)} .table th,.table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle} .table th{background:var(--surface-2);font-weight:600;color:var(--text-2);font-size:13px;white-space:nowrap} .table tr:last-child td{border-bottom:none} .table tbody tr:hover{background:var(--tint-blue)} .table .actions{white-space:nowrap} .table .col-nowrap{white-space:nowrap} /* 登录记录弹窗：8 列表格需要更宽，并强制单元格不换行、横向滚动 必须用 .modal-card.login-records-card 提升优先级，否则会被后面的 .modal-card{width:400px} 覆盖 */ .modal-card.login-records-card{width:1040px;max-width:96vw} #tool-links{display:flex;flex-direction:column;gap:8px} /* 动态工具按钮（Alist/本地工具等）文本不换行，避免长标题被折成两行 */ #tool-links .btn-side{white-space:nowrap} .modal-card.gwcfg-card{width:720px;max-width:92vw} /* 自定义按钮「iframe 打开方式」全屏弹窗 */ .modal-card.toolframe-card{width:80vw;max-width:80vw;height:88vh;display:flex;flex-direction:column} .toolframe-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .toolframe-head h3{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .toolframe-frame{flex:1 1 auto;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface)} .login-records-body{max-height:60vh;overflow:auto} .login-records-body .table{min-width:960px} .login-records-body .table th, .login-records-body .table td{white-space:nowrap;vertical-align:middle} /* copyCell 内部 .copy-val 默认 pre-wrap，需覆盖掉才能避免国家/省份/IP 被折断 */ .login-records-body .copy-val{white-space:nowrap;word-break:normal;overflow-wrap:normal} .pw{font-family:Consolas,Menlo,monospace;background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:12px} /* ===== 点击复制（IP / 账号 / 密码） ===== */ /* 表格单元格内的行内按钮（如链接管理「访问」、文件三页「下载」）： 放在值内容左边，与值同一格。用负 margin 抵消 .btn-sm 自带的外边距， 让按钮左缘仍与表头对齐；flex 布局让按钮与值基线对齐、值区可压缩换行。 */ .cell-btn{flex:0 0 auto;align-self:center;margin-right:6px;margin-left:-11px} td>.cell-btn{vertical-align:middle} /* 含行内按钮的单元格：值区要能压缩，否则长地址会把表格撑破 */ td>span.copyable{display:inline-flex;vertical-align:middle} td>.muted{display:inline-block;vertical-align:middle} /* 负 margin 抵消自身 padding，保证文字仍与表头左对齐 */ .copyable{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none; padding:2px 6px;margin:-2px -6px;border-radius:6px; transition:background .15s ease,color .15s ease} .copyable:hover{background:var(--tint-blue);color:var(--accent-blue)} .copyable:active{background:var(--tint-blue)} .copyable:focus-visible{outline:2px solid var(--border-strong);outline-offset:1px} .copyable .copy-ico{flex:none;font-size:11px;line-height:1;color:var(--text-3);opacity:0;transition:opacity .15s ease} .copyable:hover .copy-ico,.copyable:focus-visible .copy-ico{opacity:1} /* 复制成功瞬时反馈 */ .copyable.copied{background:var(--tint-success);color:var(--ok-green)} .copyable.copied .copy-ico{opacity:1;color:var(--ok-green)} /* 让备注等含换行的文本在单元格内保留换行（也避免长内容撑破表格） */ .copy-val{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;min-width:0} /* 密码列脱敏显示（前2位+••••+后2位），点击复制的仍是完整明文 */ .pw .copy-val{letter-spacing:.5px} /* 密码列保留等宽 chip 外观，不做负 margin */ .pw.copyable{margin:0;background:var(--surface-2)} .pw.copyable:hover{background:var(--tint-blue)} .pw.copyable.copied{background:var(--tint-success)} /* 触屏无 hover，图标常驻以示可点 */ @media (hover:none){.copyable .copy-ico{opacity:.55}} /* 表单内明文密码框：等宽字体，避免 l/1/I、0/O 混淆 */ .input-mono{font-family:Consolas,Menlo,monospace;letter-spacing:.3px} /* 到期颜色规则 */ .exp-expired{color:var(--red);font-weight:600} .exp-warn{color:var(--yellow);font-weight:600} .exp-near{color:var(--blue);font-weight:600} .exp-ok{color:var(--text)} .exp-expired small,.exp-warn small,.exp-near small{font-weight:400;font-size:11px;opacity:.8} /* 域名管理页「到期时间」列：日期可点击复制 + 下面跟「剩 N 天」小字。 .copyable 默认是 inline-flex（单行 chip），这里改成两行： 第一行 = 日期 + ⧉，第二行 = 小字（撑满整行才能换到下一行）。 */ .copyable.exp-date{flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:0} .copyable.exp-date>small{flex:1 0 100%;text-align:left} /* hover/复制成功的底色改成整块，视觉上仍是「一个可点的日期」 */ .copyable.exp-date:hover{color:inherit} .copyable.exp-date.exp-expired:hover{color:var(--red)} .copyable.exp-date.exp-warn:hover{color:var(--yellow)} .copyable.exp-date.exp-near:hover{color:var(--blue)} .empty{padding:60px;text-align:center;color:var(--muted);background:var(--surface);border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06)} /* ===== 备忘录卡片（块级列表） ===== */ .memo-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media (max-width:900px){.memo-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.memo-list{grid-template-columns:1fr}} .memo-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04)} .memo-card:hover{border-color:var(--border-strong);box-shadow:0 2px 6px rgba(79,70,229,.08)} .memo-head{display:flex;align-items:center;gap:10px;margin-bottom:8px} .memo-sort{flex:0 0 auto;min-width:30px;height:24px;padding:0 9px;display:inline-flex;align-items:center; justify-content:center;background:var(--tint-blue);color:var(--primary);border-radius:999px;font-size:12px; font-weight:600;font-variant-numeric:tabular-nums} .memo-title{font-weight:600;font-size:15px;color:var(--text);min-width:0;flex:1 1 auto} /* 备忘录卡片右上角的分组标签（备忘录页自己的分组，与其它页面不共用） */ .memo-group-tag{flex:0 0 auto;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding:2px 9px;background:var(--surface-3);color:var(--muted);border:1px solid var(--border); border-radius:999px;font-size:11px;line-height:18px} .memo-meta{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:nowrap} .memo-time{flex:1 1 auto;font-size:12px;color:var(--muted);min-width:0} .memo-time small{font-weight:400;font-size:11px;opacity:.8} /* 过期颜色提示（权重高于 .memo-time 的 muted，避免被覆盖） */ .memo-time.exp-expired{color:var(--red);font-weight:600} .memo-time.exp-warn{color:var(--yellow);font-weight:600} .memo-time.exp-near{color:var(--blue);font-weight:600} .memo-time.exp-ok{color:var(--text)} .memo-body{font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:12px;word-break:break-word;overflow-wrap:anywhere} .memo-body img.memo-inline-img,.rt-editor img.memo-inline-img{max-width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:8px;margin:6px 0} .memo-body audio.memo-inline-media,.rt-editor audio.memo-inline-media,.memo-body video.memo-inline-media,.rt-editor video.memo-inline-media{max-width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:8px;margin:6px 0;background:#000} /* 内联媒体包裹层 + 显式删除按钮（解决控件吞点击导致无法删除） */ .memo-media{position:relative;display:inline-block;max-width:100%;vertical-align:top;margin:6px 0} .memo-media img.memo-inline-img,.memo-media audio.memo-inline-media,.memo-media video.memo-inline-media{margin:0} .memo-media-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;line-height:20px;padding:0; text-align:center;border:none;border-radius:50%;background:rgba(17,24,39,.65);color:#fff;font-size:14px; cursor:pointer;z-index:3;opacity:0;transition:opacity .15s;user-select:none} .memo-media:hover .memo-media-remove{opacity:1} .memo-media-remove:hover{background:rgba(220,38,38,.92)} .memo-body a{color:var(--blue);text-decoration:underline} .memo-actions{display:flex;gap:8px;flex:0 0 auto;white-space:nowrap} /* 备忘录文件选择弹窗 */ .picker-search{width:100%;box-sizing:border-box;padding:9px 12px;margin:2px 0 10px;border:1px solid var(--border);border-radius:9px;font-size:14px;color:var(--text-strong);outline:none;background:var(--surface)} .picker-search:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px rgba(199,210,254,.35)} .picker-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;min-height:30px} .picker-pager .pager-info{font-size:12px;color:var(--muted)} .picker-pager .pager-btns{display:flex;gap:6px} .picker-pager .btn-sm:disabled{opacity:.45;cursor:not-allowed} .picker-list{max-height:320px;overflow:auto;margin:4px 0 14px;padding-right:2px} .picker-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border); border-radius:9px;margin-bottom:8px;background:var(--surface)} .picker-item .pi-name{flex:1 1 auto;min-width:0;font-size:14px;color:var(--text-strong); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .picker-item .pi-meta{flex:0 0 auto;font-size:12px;color:var(--muted);white-space:nowrap} .picker-item .pi-act{flex:0 0 auto;display:flex;gap:6px} .picker-empty{color:var(--muted);font-size:13px;padding:10px 2px;line-height:1.7} /* ===== 备忘录富文本编辑区 ===== */ .rt-toolbar{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:3px;padding:6px 8px; background:var(--surface-2);border:1px solid var(--border);border-radius:9px 9px 0 0;border-bottom:none; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none} .rt-toolbar::-webkit-scrollbar{display:none} .rt-btn{height:30px;min-width:30px;padding:0 8px;border:1px solid var(--border);background:var(--surface); border-radius:7px;cursor:pointer;font-size:14px;color:var(--text-2);line-height:1; display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .rt-btn:hover{background:var(--tint-blue);border-color:var(--border-strong)} .rt-btn:active{background:var(--tint-blue)} .rt-sep{flex:0 0 auto;width:1px;height:20px;background:var(--border);margin:0 3px} .rt-color{position:relative;width:30px;height:30px;border:1px solid var(--border);border-radius:7px; background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center; font-size:14px;line-height:1;color:var(--text-2);overflow:hidden;flex:0 0 auto} .rt-color:hover{background:var(--tint-blue);border-color:var(--border-strong)} .rt-color input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0} .rt-upload{background:var(--tint-blue);color:var(--accent-blue);font-weight:600} .rt-upload:hover{background:var(--tint-blue)} .rt-editor{min-height:200px;max-height:440px;overflow:auto;padding:12px 14px;border:1px solid var(--border); border-radius:0 0 9px 9px;font-size:14px;color:var(--text-strong);line-height:1.7;outline:none;word-break:break-word} .rt-editor:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px rgba(79,70,229,.12)} .rt-editor:empty:before{content:attr(placeholder);color:var(--muted)} .rt-editor a{color:var(--primary);text-decoration:underline} .rt-hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.6} /* HTML 源码视图（编辑框内切换）：尺寸/边框与 .rt-editor 保持一致，切换时不改变框大小 */ .memo-html-area{width:100%;min-height:200px;max-height:440px;overflow:auto;resize:none;margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.6; color:var(--text-strong);background:var(--surface-2);border:1px solid var(--border);border-radius:0 0 9px 9px;padding:12px 14px; white-space:pre-wrap;word-break:break-all;outline:none} .rt-html{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700} .rt-html.active{background:var(--tint-blue);border-color:var(--border-strong);color:var(--accent-blue)} /* 备忘录新增/编辑弹窗：加宽，权重25%+时间25%+标题50%单行并排，富文本工具栏一行放下 */ .modal-card.memo-card{width:740px;max-width:94vw} .memo-meta-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px} .memo-meta-row>label{margin-bottom:0} .memo-meta-row>.memo-sort-label{flex:0 0 calc(20% - 8px)} .memo-meta-row>.memo-time-label{flex:0 0 calc(20% - 8px)} .memo-meta-row>.memo-title-label{flex:0 0 calc(40% - 8px)} .memo-meta-row>.memo-group-label{flex:0 0 calc(20% - 8px)} /* ===== 弹窗 ===== */ .modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex; align-items:center;justify-content:center;z-index:50} /* 分组编辑弹窗从「分组列表弹窗」内打开，需盖在列表弹窗之上（同 z-index 时 DOM 靠前会被挡） */ #group-modal{z-index:60} /* 分组相关弹窗统一加宽（默认 .modal-card 仅 400px，列表/表单偏挤） */ #group-modal .modal-card,#group-list-modal .modal-card{width:560px;max-width:94vw} /* 阿里域名「账号 / 解析记录」弹窗：记录表列多，加宽并允许横向滚动 */ /* 账号列表弹窗与新增/编辑弹窗保持一致宽度（920）：云厂商列 + AK/SK 列才排得开 */ #dns-account-modal .modal-card{width:920px;max-width:96vw} /* 解析记录弹窗要铺开看「记录值」列：按用户要求取页面宽度的 85%（移动端仍退化为 94vw） */ #dns-records-modal .modal-card{width:85vw;max-width:85vw} #dns-records-body .table{min-width:760px} #dns-account-body .table{min-width:600px} /* 解析记录弹窗内嵌套「新增/编辑记录」弹窗，需盖在其上 */ #dns-record-modal{z-index:60} /* 「新增解析记录」弹窗加宽三分之一（默认 .modal-card 为 400px，400×4/3≈533px）， 让「记录值」长文本框和下方两列（优先级/权重）排布更舒展 */ #dns-record-modal .modal-card{width:533px;max-width:94vw} /* 从账号弹窗内打开账号编辑弹窗，同样盖在上面 */ #dns-account-edit-modal{z-index:60} /* 账号编辑弹窗加宽到 920px：云厂商下拉独占一行 + 权重/账号两列，排布更舒展 */ #dns-account-edit-modal .modal-card{width:920px;max-width:96vw} /* 批量改备注弹窗从解析记录弹窗（z50）内打开，需盖在其上 */ #dns-batch-remark-modal{z-index:60} /* 域名单元格：可点击样式（蓝色 + 下划线），提示有弹窗 */ .dns-domain-link{color:var(--primary);cursor:pointer;text-decoration:underline;text-decoration-style:dotted;font-weight:600;word-break:break-all} .dns-domain-link:hover{color:var(--primary-dark);text-decoration-style:solid} .dns-domain-link:focus-visible{outline:2px solid var(--border-strong);outline-offset:1px;border-radius:4px} /* 记录数徽章 */ .dns-count{display:inline-block;padding:2px 10px;border-radius:11px;font-size:12px;font-weight:600;line-height:1.6;background:var(--tint-blue);color:var(--accent-blue);border:1px solid var(--border-strong);font-variant-numeric:tabular-nums} .dns-count--none{background:var(--surface-2);color:var(--text-3);border-color:var(--border)} /* 同步状态徽章（成功 / 失败 / 未同步） */ .dns-sync{display:inline-block;padding:2px 9px;border-radius:11px;font-size:12px;line-height:1.6;white-space:nowrap} .dns-sync--ok{background:var(--tint-success);color:var(--ok-green);border:1px solid var(--border-success)} .dns-sync--err{background:var(--tint-danger);color:var(--danger-red);border:1px solid var(--border-danger)} .dns-sync--none{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)} .dns-sync small{display:block;font-size:11px;opacity:.75;font-weight:400} /* 解析记录弹窗内表格里的记录值（可能很长） */ .col-record-value{max-width:320px;word-break:break-all} /* 批量操作条：选中记录后才显示，紧跟在按钮行右侧 */ .rec-batch-actions{display:inline-flex;align-items:center;gap:8px;margin-left:12px} .rec-batch-count{font-size:12px;color:var(--muted);white-space:nowrap} /* 解析记录表格：复选框列（窄、居中） */ .rec-check{width:38px;text-align:center} .rec-check input{width:15px;height:15px;cursor:pointer;vertical-align:middle;accent-color:var(--primary)} #dns-records-body tr.rec-checked{background:var(--tint-blue)} /* 备注列：可能较长，允许换行但限宽 */ .col-record-remark{max-width:180px;word-break:break-all} .col-record-remark .muted{color:var(--text-3)} /* ---------- 域名注册信息（持有者 / 注册时间 / DNS）---------- */ /* 持有者列：公司名可能很长，限宽 + 允许换行，避免把表格撑爆 */ .col-registrant{max-width:190px;word-break:break-all} /* DNS 列：只显示第一条 + 「+N」徽章，全量在 title 里 */ .col-dns{max-width:170px;word-break:break-all} .dns-dns{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);cursor:help;line-height:1.5} .dns-dns>small{flex:none;padding:0 5px;border-radius:8px;font-size:11px;font-weight:600; background:var(--surface-2);color:var(--text-3);border:1px solid var(--border);font-variant-numeric:tabular-nums} /* 「域名详情」弹窗 */ #dns-info-modal .modal-card{width:560px;max-width:94vw} .dns-info-body{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto} .info-row{display:flex;align-items:baseline;gap:12px;padding:8px 10px;border-radius:8px} .info-row:nth-child(odd){background:var(--surface-2)} .info-k{flex:none;width:96px;font-size:13px;color:var(--muted)} .info-v{flex:1;min-width:0;word-break:break-all} /* DNS 这类多值字段：key 顶对齐，值区放列表 */ .info-row--block{align-items:flex-start} .info-dns-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .info-dns-list li{line-height:1.5} /* 没取到注册信息时的说明条 */ .info-note{margin-top:10px;padding:9px 12px;border-radius:8px;font-size:12px;line-height:1.7; background:var(--tint-warn);color:var(--warn-amber);border:1px solid var(--border-warn)} @media (max-width:640px){ .info-row{flex-direction:column;gap:4px} .info-k{width:auto} .col-registrant,.col-dns{max-width:130px} } .dns-status-badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;line-height:1.6} .dns-status--on{background:var(--tint-success);color:var(--ok-green);border:1px solid var(--border-success)} .dns-status--off{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)} /* 弹窗内「权重 + 分组」并排一行：权重占 1/6，分组占剩余 5/6 */ .form-row{display:flex;gap:12px;align-items:flex-start} .form-row .fw-weight{flex:0 0 calc(100%/6);max-width:calc(100%/6)} .form-row .fw-rest{flex:1 1 auto;min-width:0} /* 链接弹窗是「权重 + 分组 + 打开方式」三字段一行：权重保持 1/6，后两者用 flex-grow 平分剩余宽度。 只在 #link-form 内覆盖，避免影响只有「权重 + 分组」两字段的域名/账号等弹窗。 */ #link-modal .modal-card{width:520px;max-width:94vw} #link-form .form-row .fw-rest{flex:1 1 auto;min-width:0} #link-form .form-row .fw-rest select{width:100%} /* 窄屏下三字段横排会挤爆下拉，改成两列（权重独占一行，分组/打开方式并排） */ @media (max-width:480px){ #link-modal .modal-card{width:auto;max-width:92vw} #link-form .form-row{flex-wrap:wrap} #link-form .form-row .fw-weight{flex:0 0 100%;max-width:100%} #link-form .form-row .fw-rest{flex:0 0 calc(50% - 6px);max-width:calc(50% - 6px)} } /* 常用命令「增加/编辑」弹窗加宽到 560px（默认 400px 偏挤） */ #command-modal .modal-card{width:560px;max-width:94vw} /* 确认弹窗永远置顶，避免从更高层弹窗（如分组编辑 z60）触发时被挡住 */ #confirm-modal{z-index:100} .modal-card{background:var(--surface);border-radius:14px;padding:26px;width:400px;max-width:92vw; box-shadow:0 20px 50px rgba(0,0,0,.3)} .modal-card h3{font-size:18px;margin-bottom:18px} /* 分组列表弹窗（服务器页「分组」按钮弹出） */ .group-list-head{margin-bottom:14px} .group-list-head .btn-ghost{margin-left:8px} .group-list-body{max-height:60vh;overflow:auto} .modal-hint{font-size:12px;color:var(--muted);line-height:1.7;margin:-8px 0 16px; background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px} .modal-hint code{font-family:Consolas,Menlo,monospace;background:var(--tint-blue);color:var(--accent-blue); padding:1px 6px;border-radius:5px;font-size:11px} .modal-card label{font-size:13px;color:var(--muted);} /* 备忘录「内容」区：不能用