/* Readability layer: keeps the compact layout while avoiding tiny desktop text. */
html,
body {
    font-size: 16px;
    font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

button,
input,
select,
textarea,
table,
code,
pre {
    font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.sidebar {
    width: 248px;
}

.main {
    width: calc(100% - 248px);
    margin-left: 248px;
}

.brand b { font-size: 17px; }
.brand small { font-size: 11px; }
.sidebar nav p { font-size: 11px; }
.sidebar nav a { height: 45px; font-size: 14px; }
.sidebar-user b { font-size: 14px; }
.sidebar-user small { font-size: 13px; }
.topbar { height: 72px; font-size: 15px; }
.topbar > div { font-size: 14px; }
.page-head h1 { font-size: 26px; }
.page-head p:not(.eyebrow) { font-size: 14px; line-height: 1.65; }
.eyebrow { font-size: 12px; }
.btn { padding: 10px 16px; font-size: 14px; }
.btn.tiny { padding: 7px 10px; font-size: 12px; }
.stats-grid small { font-size: 13px; }
.stats-grid b { font-size: 24px; }
.stats-grid b.smaller { font-size: 17px; }
.stats-grid em { font-size: 12px; }
.card-head h2 { font-size: 17px; }
.card-head p { font-size: 12px; line-height: 1.55; }
th { padding: 13px 20px; font-size: 12px; }
td { padding: 16px 20px; font-size: 14px; }
.node-name small { font-size: 11px; }
.proto-icon,
.tag,
.status { font-size: 11px; }
.row-actions a,
.row-actions button { padding: 7px 10px; font-size: 12px; }
.search input { font-size: 13px; }
.section-title h2 { font-size: 16px; }
.section-title p,
.preset b,
.form-grid label > span,
.inline-form label > span { font-size: 13px; }
.preset small,
.preset em,
label.check small,
.details dt,
.note { font-size: 12px; }
.form-grid input,
.form-grid select,
.form-grid textarea,
.inline-form input,
.inline-form select,
.inline-form textarea { font-size: 14px; }
.details dd,
.config-warning,
.alert,
.toast { font-size: 13px; }
.config-warning p { font-size: 12px; }
.config-code { font-size: 13px; }
details pre { font-size: 12px; }
.login-brand li,
.login-card > div > p:not(.eyebrow) { font-size: 14px; }
.login-card label span { font-size: 13px; }
.login-card small { font-size: 12px; }

.socks-single-form {
    grid-template-columns: repeat(6, minmax(120px, 1fr)) auto;
}

.checkbox-cell {
    width: 42px;
    padding-left: 18px;
    padding-right: 8px;
    text-align: center;
}

.checkbox-cell input,
.protocol-choice input {
    width: 17px;
    height: 17px;
    accent-color: #6265de;
}

.bulk-textarea {
    width: 100%;
    min-height: 250px;
    padding: 16px;
    resize: vertical;
    color: #344054;
    border: 1px solid #dce0e7;
    border-radius: 10px;
    outline: 0;
    background: #fbfcfd;
    font-size: 14px;
    line-height: 1.75;
}

.bulk-textarea:focus {
    border-color: #787bea;
    box-shadow: 0 0 0 3px rgba(100, 103, 224, .08);
}

.format-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    color: #697386;
    font-size: 12px;
}

.format-help code {
    padding: 5px 8px;
    border-radius: 6px;
    background: #f1f3f7;
}

.protocol-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.protocol-choice {
    padding: 15px !important;
    border: 1px solid #dfe2e9;
    border-radius: 10px;
    background: #fbfcfd;
}

.selected-socks-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.selected-socks-list > span {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e4e7ee;
    border-radius: 8px;
    background: #fafbfc;
}

.selected-socks-list b,
.selected-socks-list small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-socks-list b { font-size: 13px; }
.selected-socks-list small { margin-top: 4px; color: #8b94a3; font-size: 11px; }

.form-grid label.wide {
    grid-column: 1 / -1;
}

.form-grid textarea,
.inline-form textarea {
    width: 100%;
    min-height: 96px;
    padding: 11px;
    resize: vertical;
    color: #3f4a5d;
    border: 1px solid #dce0e7;
    border-radius: 8px;
    outline: 0;
    background: #fbfcfd;
    line-height: 1.65;
}

.form-grid textarea:focus,
.inline-form textarea:focus {
    border-color: #787bea;
    box-shadow: 0 0 0 3px rgba(100, 103, 224, .08);
}

.client-create-form {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    padding-bottom: 21px;
}

.node-note {
    max-width: 340px;
    color: #6d7485 !important;
    font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif !important;
    white-space: normal !important;
    line-height: 1.5;
}

.readonly-note {
    margin: 0;
    padding: 0 22px 22px;
    color: #5f6879;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.export-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.export-textarea {
    width: calc(100% - 42px);
    min-height: 430px;
    margin: 0 21px 21px;
    padding: 15px;
    resize: vertical;
    color: #344054;
    border: 1px solid #dce0e7;
    border-radius: 10px;
    background: #fbfcfd;
    font-size: 13px;
    line-height: 1.7;
}

.qr-details {
    position: relative;
}

.qr-details summary {
    padding: 7px 10px;
    color: #5c61d8;
    border: 1px solid #e1e2fa;
    border-radius: 6px;
    background: #f7f7ff;
    font-size: 12px;
    list-style: none;
}

.qr-details img {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 240px;
    height: 240px;
    padding: 10px;
    border: 1px solid #dfe2ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(28, 38, 58, .18);
    z-index: 30;
}

.qr-download {
    position: absolute;
    right: 10px;
    top: calc(100% + 222px);
    min-width: 220px;
    padding: 7px 10px;
    color: #5c61d8;
    border-radius: 0 0 8px 8px;
    background: #f7f7ff;
    text-align: center;
    z-index: 31;
}

.format-example {
    margin-bottom: 13px;
    padding: 13px 15px;
    color: #8a93a4;
    border: 1px solid #edf0f4;
    border-radius: 10px;
    background: #f7f8fa;
}
.format-example b,
.format-example code { display: block; }
.format-example b { margin-bottom: 7px; font-size: 12px; }
.format-example code { color: #99a2b0; background: transparent; font-size: 12px; line-height: 1.75; }

.central-entry-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.central-entry-card > div {
    min-width: 0;
    padding: 13px;
    border: 1px solid #e3e6ed;
    border-radius: 10px;
    background: #fafbfc;
}
.central-entry-card small,
.central-entry-card b { display: block; }
.central-entry-card small { color: #8d96a6; font-size: 11px; }
.central-entry-card b { margin-top: 6px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.compact-grid { margin-top: 15px; }
.gap-section { margin-top: 16px; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.readonly-permission { margin: 0; padding: 18px 23px; color: #6d7585; background: #f7f8fa; }

.note-editor { position: relative; }
.note-editor > summary { padding: 7px 10px; color: #5c61d8; border: 1px solid #e1e2fa; border-radius: 6px; background: #f7f7ff; list-style: none; cursor: pointer; font-size: 12px; }
.note-editor form { position: absolute; right: 0; top: calc(100% + 7px); width: 280px; padding: 12px; border: 1px solid #dfe3eb; border-radius: 10px; background: #fff; box-shadow: 0 15px 40px rgba(28,38,58,.18); z-index: 35; }
.note-editor textarea { width: 100%; min-height: 100px; margin-bottom: 8px; padding: 9px; resize: vertical; border: 1px solid #dce0e7; border-radius: 8px; font-size: 13px; }
.node-export-table { min-width: 1400px; }

.edge-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.config-code.compact { max-height: 520px; font-size: 12px; }

@media (max-width: 1200px) {
    .socks-single-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .selected-socks-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .central-entry-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
    .main {
        width: 100%;
        margin-left: 0;
    }
    .protocol-options,
    .selected-socks-list,
    .socks-single-form,
    .export-grid,
    .client-create-form {
        grid-template-columns: 1fr;
    }
    .central-entry-card,
    .two-columns,
    .edge-config-grid { grid-template-columns: 1fr; }
}

/* 2026-08 layout/function polish */
.content {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 28px 24px 46px;
}
.page-head { margin-bottom: 20px; }
.page-head .btn { padding: 9px 13px; font-size: 13px; }
.head-actions { gap: 7px; }
.stats-grid { gap: 12px; }
.card-head { padding-left: 18px; padding-right: 18px; }
th, td { padding-left: 16px; padding-right: 16px; }
.gap-left { margin-left: 6px; }
.inline-edit-link { display:inline-block; margin-left:8px; color:#5c61d8; font-size:12px; font-weight:700; }
.socks-edit-form { padding: 0 21px 21px; }
.wide-actions { grid-column: 1 / -1; padding: 2px 0 0; }
.dashboard-link { cursor:pointer; }
.dashboard-link:hover { border-color:#d7d9f4; transform:translateY(-1px); }
@media (min-width: 1500px) {
    .content { padding-left: 22px; padding-right: 22px; }
}


.password-reset summary { cursor: pointer; list-style: none; }
.password-reset summary::-webkit-details-marker { display: none; }
.password-reset form { display: grid; gap: 6px; min-width: 190px; margin-top: 8px; }
.password-reset input { min-width: 180px; }
.password-card { max-width: 760px; }

/* Password page: keep fields in one clean vertical column. */
.password-card { max-width: 620px; }
.password-card .password-form { grid-template-columns: 1fr; gap: 16px; }
.password-card .password-form label, .password-card .password-form > div { width: 100%; }
.password-card .password-form .btn { min-width: 140px; }


/* R15: password form — one clean vertical column. */
.password-card {
    width: 100%;
    max-width: 720px;
}
.password-card .password-form-vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 560px;
    padding: 0 21px 22px;
}
.password-card .password-form-vertical label,
.password-card .password-form-vertical > div {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    grid-column: auto !important;
}
.password-card .password-form-vertical label > span {
    display: block;
    margin-bottom: 7px;
    color: #616b7c;
    font-size: 13px;
    font-weight: 700;
}
.password-card .password-form-vertical input {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}
.password-card .password-form-vertical .btn {
    min-width: 140px;
}

/* R15: compact quick-create SOCKS5 box. */
[data-batch-node-form] .bulk-textarea {
    min-height: 96px !important;
    height: 110px !important;
    resize: vertical;
}


/* R16: merge SOCKS5 examples into textarea placeholder and prevent helper text overflow. */
[data-batch-node-form] .socks-quick-input {
    min-height: 150px !important;
    height: 165px !important;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
[data-batch-node-form] .socks-quick-input::placeholder {
    color: #aeb5c2;
    opacity: 1;
    white-space: pre-line;
}
[data-batch-node-form] .compact-format-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
[data-batch-node-form] .compact-format-help code {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (max-width: 780px) {
    [data-batch-node-form] .socks-quick-input { height: 180px !important; }
    [data-batch-node-form] .compact-format-help { align-items: flex-start; }
}


/* r17: table actions use viewport modals instead of clipped <details> popovers */
.icon-action { width:34px; height:34px; display:inline-grid; place-items:center; padding:0; border:1px solid #e1e2fa; border-radius:8px; background:#f7f7ff; color:#5c61d8; cursor:pointer; }
.icon-action svg { width:18px; height:18px; fill:currentColor; }
.icon-action:hover { background:#efefff; }
.app-modal[hidden] { display:none !important; }
.app-modal { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:24px; }
.app-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.48); backdrop-filter:blur(2px); }
.app-modal-dialog { position:relative; z-index:1; width:min(520px, calc(100vw - 36px)); max-height:calc(100vh - 48px); overflow:auto; padding:24px; border-radius:16px; background:#fff; box-shadow:0 24px 80px rgba(15,23,42,.28); }
.qr-modal-dialog { width:min(390px, calc(100vw - 36px)); text-align:center; }
.qr-modal-image { display:block; width:min(280px, 80vw); height:auto; margin:18px auto; padding:10px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.modal-close { position:absolute; right:14px; top:12px; width:34px; height:34px; border:0; border-radius:50%; background:#f4f5f7; color:#667085; font-size:24px; line-height:1; cursor:pointer; }
.modal-form textarea { width:100%; min-height:130px; box-sizing:border-box; margin-top:12px; padding:12px; resize:vertical; border:1px solid #dce0e7; border-radius:10px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
body.modal-open { overflow:hidden; }

/* r17: certificate paths and public keys must never be clipped */
.cert-path-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.cert-path-grid > div { min-width:0; padding:14px; border:1px solid #e3e6ed; border-radius:10px; background:#fafbfc; }
.cert-path-grid > div:last-child { grid-column:1 / -1; }
.cert-path-grid small,.cert-path-grid b,.cert-path-grid code,.cert-path-grid p { display:block; }
.cert-path-grid code { margin-top:7px; color:#1d2939; white-space:normal; overflow-wrap:anywhere; word-break:break-all; font:600 12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; }
.cert-path-grid p { margin:7px 0 0; color:#7c8798; font-size:12px; line-height:1.6; }
.key-status-card { min-width:0; padding:13px 14px; border:1px solid #e3e6ed; border-radius:10px; background:#fafbfc; }
.key-status-card span,.key-status-card code,.key-status-card small { display:block; }
.key-status-card code { margin:7px 0; white-space:normal; overflow-wrap:anywhere; word-break:break-all; color:#344054; font-size:12px; line-height:1.6; }
.key-status-card small { color:#7c8798; }
.danger-zone { padding:14px; border:1px solid #f4c7c7; border-radius:12px; background:#fff8f8; }
.key-rotate-confirm { margin-top:12px; max-width:420px; }
.key-history-block { margin-top:18px; padding:0 0 4px; }
.subsection-head { margin:0 0 12px; }
.subsection-head h3 { margin:0 0 4px; }
.subsection-head p { margin:0; color:#7c8798; font-size:13px; }
.compact-table { min-width:900px; }
.compact-table th,.compact-table td { padding:10px 12px; font-size:12px; }
.key-cell { display:block; max-width:260px; white-space:normal; overflow-wrap:anywhere; word-break:break-all; font-size:11px; }
@media (max-width:780px) { .cert-path-grid { grid-template-columns:1fr; } .cert-path-grid > div:last-child { grid-column:auto; } }

/* r18: editable client remark and expiry controls */
.node-name-edit { display:flex; align-items:center; gap:8px; max-width:100%; }
.node-name-edit input { min-width:0; width:min(360px, 100%); height:36px; padding:7px 9px; border:1px solid #dfe3ea; border-radius:8px; background:#fff; }
.node-name-edit .btn { flex:0 0 auto; }
.client-create-form select, .modal-form select { width:100%; min-height:42px; padding:8px 10px; border:1px solid #dce0e7; border-radius:10px; background:#fff; }
@media (max-width:780px) { .node-name-edit { align-items:stretch; flex-direction:column; } .node-name-edit input { width:100%; } }


/* Unified typography */
html, body, button, input, select, textarea, option, table, th, td, a, label, small, strong, b, span, div, p, h1, h2, h3, h4, h5, h6 {
  font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", Arial, sans-serif !important;
}

/* Node filter readability */
.node-filter-bar label > span {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}
.node-filter-bar input,
.node-filter-bar select {
    min-height: 46px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}
.node-filter-bar .filter-search > span {
    font-size: 17px !important;
    top: 13px !important;
}
.node-filter-bar .filter-actions .btn {
    min-height: 46px !important;
    font-size: 14px !important;
    padding: 11px 18px !important;
}

/* 客户端创建卡片：最终覆盖，避免基础样式把 grid 重置为普通表单 */
.card .client-create-form.simplified-client-form{
  display:grid !important;
  grid-template-columns:minmax(210px,1.2fr) minmax(220px,1.15fr) minmax(180px,.9fr) minmax(150px,.72fr) minmax(190px,.9fr) auto !important;
  gap:14px !important;
  align-items:end !important;
  padding:0 24px 24px !important;
}
.card .client-create-form.simplified-client-form > label{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  min-width:0 !important;
  margin:0 !important;
}
.card .client-create-form.simplified-client-form > label > span{
  display:block !important;
  min-height:22px !important;
  margin:0 0 7px !important;
  color:#4f5b6d !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:22px !important;
}
.card .client-create-form.simplified-client-form input,
.card .client-create-form.simplified-client-form select{
  box-sizing:border-box !important;
  width:100% !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 13px !important;
  border:1px solid #d9dee8 !important;
  border-radius:10px !important;
  background:#fbfcfe !important;
  color:#273449 !important;
  font-size:14px !important;
  line-height:46px !important;
  outline:none !important;
}
.card .client-create-form.simplified-client-form input:focus,
.card .client-create-form.simplified-client-form select:focus{
  border-color:#7074ed !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.09) !important;
  background:#fff !important;
}
.card .client-create-form.simplified-client-form small{
  display:block !important;
  min-height:18px !important;
  margin-top:5px !important;
  color:#929bab !important;
  font-size:12px !important;
  line-height:18px !important;
}
.card .client-create-form.simplified-client-form .client-create-submit{
  box-sizing:border-box !important;
  height:46px !important;
  min-height:46px !important;
  margin:0 !important;
  padding:0 24px !important;
  border-radius:10px !important;
  font-size:14px !important;
  white-space:nowrap !important;
}
.card .client-create-form.simplified-client-form .client-advanced{
  grid-column:1 / -1 !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.card .client-create-form.simplified-client-form .client-advanced summary{
  display:inline-flex !important;
  align-items:center !important;
  min-height:34px !important;
  padding:0 10px !important;
  border-radius:8px !important;
  color:#6266df !important;
  background:#f5f5ff !important;
  font-size:13px !important;
  font-weight:700 !important;
  cursor:pointer !important;
}
.card .client-create-form.simplified-client-form .client-advanced label{
  display:block !important;
  max-width:620px !important;
  margin-top:12px !important;
}
.card .client-create-form.simplified-client-form .client-advanced label > span{
  display:block !important;
  margin-bottom:7px !important;
  color:#4f5b6d !important;
  font-size:14px !important;
  font-weight:700 !important;
}
@media(max-width:1450px){
  .card .client-create-form.simplified-client-form{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .card .client-create-form.simplified-client-form .client-create-submit{width:100% !important;}
}
@media(max-width:850px){
  .card .client-create-form.simplified-client-form{grid-template-columns:1fr !important;}
}


/* Client controls final layout: align all control tops and polish settings modal. */
.card .client-create-form.simplified-client-form{
  align-items:start !important;
}
.card .client-create-form.simplified-client-form > label{
  align-self:start !important;
}
.card .client-create-form.simplified-client-form > label > span{
  height:22px !important;
  min-height:22px !important;
  line-height:22px !important;
}
.card .client-create-form.simplified-client-form .client-create-submit{
  align-self:start !important;
  margin-top:29px !important;
}
.card .client-create-form.simplified-client-form small{
  min-height:18px !important;
}
.client-settings-dialog{
  width:min(620px,calc(100vw - 36px)) !important;
  padding:28px !important;
  border-radius:18px !important;
}
.client-settings-dialog > h3{
  margin:2px 44px 22px 0 !important;
  font-size:20px !important;
  line-height:1.35 !important;
}
.client-settings-form{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  padding:0 !important;
}
.client-settings-form > label{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  margin:0 !important;
}
.client-settings-form > label > span{
  display:block !important;
  height:22px !important;
  margin:0 0 7px !important;
  color:#4f5b6d !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:22px !important;
}
.client-settings-form input,
.client-settings-form select{
  box-sizing:border-box !important;
  width:100% !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 13px !important;
  border:1px solid #d9dee8 !important;
  border-radius:10px !important;
  background:#fbfcfe !important;
  color:#273449 !important;
  font-size:14px !important;
  line-height:46px !important;
  outline:none !important;
}
.client-settings-form input:focus,
.client-settings-form select:focus{
  border-color:#7074ed !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.09) !important;
  background:#fff !important;
}
.client-settings-form small{
  display:block !important;
  min-height:36px !important;
  margin:6px 0 0 !important;
  color:#929bab !important;
  font-size:12px !important;
  line-height:18px !important;
}
.client-settings-form .modal-actions{
  grid-column:1/-1 !important;
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-top:4px !important;
  padding-top:18px !important;
  border-top:1px solid #eef0f4 !important;
}
.client-settings-form .modal-actions .btn{
  min-width:76px !important;
  height:42px !important;
  font-size:14px !important;
}
@media(max-width:680px){
  .client-settings-form{grid-template-columns:1fr !important;}
}

/* r37 visual scale: keep the desktop UI compact and proportional. */
.page-head h1 { font-size: 22px !important; line-height: 1.25 !important; }
.page-head p:not(.eyebrow) { font-size: 12px !important; line-height: 1.55 !important; }
.page-head .eyebrow { font-size: 10px !important; }
.page-head .btn,
.head-actions .btn { padding: 8px 12px !important; font-size: 12px !important; }
.stats-grid article { gap: 12px !important; padding: 15px 16px !important; }
.stats-grid small { font-size: 11px !important; }
.stats-grid b { font-size: 20px !important; line-height: 1.2 !important; }
.stats-grid b.smaller { font-size: 15px !important; }
.stats-grid em { font-size: 10px !important; }
.card-head h2 { font-size: 15px !important; }
.card-head p { font-size: 11px !important; }
th { font-size: 11px !important; }
td { font-size: 13px !important; }
.row-actions a,
.row-actions button { font-size: 11px !important; padding: 6px 9px !important; }
.status { font-size: 10px !important; }


/* r38 compact density: keep readable font sizes, reduce vertical whitespace. */
.content{padding-top:24px;padding-bottom:30px}
.page-head{margin-bottom:16px}
.page-head p:not(.eyebrow){margin-top:5px;margin-bottom:0}
.eyebrow{margin-bottom:5px}
.card,.form-card{margin-bottom:13px}
.card-head{padding-top:14px;padding-bottom:12px}
.card-head p{margin-top:3px}
th{padding-top:10px;padding-bottom:10px}
td{padding-top:11px;padding-bottom:11px}
.form-card>section{padding-top:15px;padding-bottom:15px}
.section-title{margin-bottom:10px}
.section-title p{margin-top:3px}
.stats-grid{margin-bottom:14px}
.stats-grid article{padding-top:13px;padding-bottom:13px}
.inline-form{gap:8px}
.note{margin-top:10px}
.row-actions{gap:4px;flex-wrap:wrap}
.head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.danger-text{color:#c24152!important;border-color:#f0d7dc!important;background:#fff7f8!important}
/* r39 - 系统工具采用紧凑布局，保持现有字号，压缩上下留白 */
.tool-card{margin-top:12px;padding-top:18px;padding-bottom:18px}.tool-card .section-title{margin-bottom:12px}.tool-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 12px}.tool-status-grid>div{padding:12px 14px;border:1px solid var(--line,#e6e9f0);border-radius:12px;background:#fafbfc;display:flex;flex-direction:column;gap:3px}.tool-status-grid small{font-size:12px}.tool-status-grid b{font-size:14px}.status-ok{color:#16835d}.status-bad{color:#c73737}.inline-tool-form{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:12px;align-items:end}.inline-tool-form label{margin:0}.tool-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.top-gap-small{margin-top:10px}.compact-empty{padding:10px 0}.migration-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 12px}.migration-actions form{border:1px solid var(--line,#e6e9f0);border-radius:12px;padding:12px;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.migration-actions form label{flex:1;min-width:220px}.migration-actions small{display:block;width:100%}.health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.health-item{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line,#e6e9f0);border-radius:10px;padding:9px 11px}.health-item>span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:700}.health-item.ok>span{background:#e8f7ef;color:#167a55}.health-item.bad>span{background:#fff0f0;color:#b42318}.health-item div{display:flex;flex-direction:column;gap:2px;min-width:0}.health-item b{font-size:13px}.health-item small{font-size:11px;white-space:normal;overflow-wrap:anywhere}@media(max-width:900px){.tool-status-grid,.migration-actions,.health-grid{grid-template-columns:1fr}.inline-tool-form{grid-template-columns:1fr}}

/* r46 typography normalization: readable text everywhere, compact spacing remains. */
/* Keep the dense layout from r38+, but do not use tiny 8–11px UI copy. */
.brand small,
.sidebar nav p,
.page-head .eyebrow,
.page-head p:not(.eyebrow),
.card-head p,
.stats-grid small,
.stats-grid em,
.node-name small,
.proto-icon,
.tag,
.status,
.row-actions a,
.row-actions button,
.preset small,
.preset em,
label.check small,
.details dt,
.note,
.config-warning p,
details pre,
.login-card small,
.selected-socks-list small,
.format-help,
.client-settings-form small,
.tool-status-grid small,
.health-item small,
.compact-empty,
.migration-actions small {
    font-size: 12px !important;
    line-height: 1.55 !important;
}

/* Normal form/table/help labels should be comfortably readable. */
.form-grid label > span,
.inline-form label > span,
.section-title p,
.preset b,
.details dd,
.config-warning,
.alert,
.toast,
.search input,
.config-code,
.health-item b,
.tool-status-grid b {
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* Main controls and table content. */
.btn,
.form-grid input,
.form-grid select,
.form-grid textarea,
.inline-form input,
.inline-form select,
.inline-form textarea,
td,
.login-brand li,
.login-card > div > p:not(.eyebrow) {
    font-size: 14px !important;
}

/* Tiny buttons are still compact, but no longer tiny text. */
.btn.tiny,
.page-head .btn,
.head-actions .btn {
    font-size: 13px !important;
}

/* Tables stay compact while headers remain readable. */
th {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* Section hierarchy: readable without making the page feel oversized. */
.card-head h2 { font-size: 16px !important; }
.section-title h2 { font-size: 16px !important; }
.page-head h1 { font-size: 22px !important; }

/* Settings / certificate / system tool cards specifically. */
.tool-card .section-title p,
.tool-card .note,
.tool-card label > span,
.tool-card label small,
.tool-card .compact-empty,
.form-card .section-title p,
.form-card .note {
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.tool-status-grid > div,
.health-item {
    line-height: 1.5;
}

/* Preserve compact vertical density while allowing the larger text to breathe. */
.card-head { padding-top: 13px; padding-bottom: 11px; }
th { padding-top: 9px; padding-bottom: 9px; }
td { padding-top: 10px; padding-bottom: 10px; }
.form-card > section { padding-top: 14px; padding-bottom: 14px; }
.section-title { margin-bottom: 9px; }
.stats-grid article { padding-top: 12px !important; padding-bottom: 12px !important; }

/* r48 typography balance: normal-size labels, readable table headers, restrained table actions. */
/* Certificate / SSL status area: labels were still inheriting legacy 8-9px rules. */
.cert-path-grid small,
.cert-list-head > div > span,
.form-grid > small.form-help {
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.cert-list-head small {
    font-size: 12px !important;
    line-height: 1.5 !important;
}
.cert-path-grid b {
    font-size: 14px !important;
    line-height: 1.5 !important;
}
.cert-path-grid code {
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-family: Consolas, "Microsoft YaHei", "微软雅黑", monospace !important;
}
.cert-path-grid > div {
    min-height: 72px !important;
    padding: 12px 16px !important;
}
.cert-list-head {
    margin-top: 6px !important;
}

/* Every data-table header must remain clearly legible. */
table th,
.table-wrap th,
.node-export-table th {
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    color: #697386 !important;
}

/* Keep table body readable without making action controls visually dominant. */
table td,
.table-wrap td,
.node-export-table td {
    font-size: 13px !important;
}
.table-wrap .btn.tiny,
.node-export-table .btn.tiny,
.table-wrap .row-actions a,
.table-wrap .row-actions button,
.node-export-table .row-actions a,
.node-export-table .row-actions button,
.table-wrap .danger-text,
.node-export-table .danger-text {
    font-size: 12px !important;
    line-height: 1.35 !important;
    padding: 6px 9px !important;
}

/* Secondary text in rows should not fall below normal readable size. */
.table-wrap small,
.node-export-table small,
.node-name small,
.table-wrap .tag,
.table-wrap .status,
.node-export-table .tag,
.node-export-table .status,
.usage-count {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* System/health/migration cards: remove the last legacy tiny labels. */
.tool-status-grid small,
.subsection-head p,
.migration-actions label > span,
.health-item small,
.cert-path-grid small,
.cert-list-head small,
.form-grid > small.form-help {
}
.subsection-head h3 { font-size: 14px !important; }
.subsection-head p { font-size: 12px !important; }
.migration-actions label > span { font-size: 13px !important; }
.health-item b { font-size: 13px !important; }
.health-item small { font-size: 12px !important; }
.tool-status-grid small { font-size: 12px !important; }
.tool-status-grid b { font-size: 14px !important; }

/* r50: node table action controls use one visual size; headers stay clearly readable. */
.node-export-table th,
.table-wrap th { font-size:13px !important; line-height:1.45 !important; font-weight:700 !important; }
.node-export-table td .btn.tiny,
.node-export-table td .row-actions a,
.node-export-table td .row-actions button,
.node-export-table td .danger-text {
  font-size:11px !important;
  line-height:1.35 !important;
  padding:5px 8px !important;
  font-weight:600 !important;
}

/* r50 login slider captcha */
.slider-captcha{margin:15px 0 16px;padding:12px 13px;border:1px solid #dfe3eb;border-radius:10px;background:#fafbfe;transition:.18s}
.slider-captcha-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.slider-captcha-title>span{font-size:13px;font-weight:700;color:#4d586b}
.slider-captcha-title small{margin:0!important;font-size:12px!important;color:#8b94a5}
.slider-captcha-track{position:relative;height:36px;border-radius:9px;background:#eef1f6;overflow:hidden}
.slider-captcha-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#e8e9ff,#dfe1ff);transition:width .05s linear}
.slider-captcha-target{position:absolute;top:7px;width:22px;height:22px;border:2px dashed #6d70df;border-radius:6px;background:rgba(255,255,255,.8);z-index:2}
.slider-captcha-range{position:absolute!important;inset:0!important;width:100%!important;height:36px!important;margin:0!important;padding:0!important;opacity:.04;cursor:grab;z-index:3}
.slider-captcha-range:active{cursor:grabbing}
.slider-captcha.passed{border-color:#bfe7d5;background:#f2fbf6}.slider-captcha.passed .slider-captcha-target{border-style:solid;border-color:#24a16f;background:#e6f8ef}.slider-captcha.passed .slider-captcha-title small{color:#16845d!important;font-weight:700}.slider-captcha.shake{animation:captcha-shake .32s ease}@keyframes captcha-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
\n\n/* r52: compact, aligned action controls for Xray version management and SOCKS5 pages. */
#xray-core-manager .xray-version-form {
    grid-template-columns: minmax(360px, 1fr) auto !important;
    gap: 10px !important;
    align-items: end !important;
}
#xray-core-manager .xray-version-form label {
    margin: 0 !important;
}
#xray-core-manager .xray-version-form select {
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}
#xray-core-manager .xray-version-form .tool-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
}
#xray-core-manager .xray-version-form .tool-actions .btn {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 13px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* SOCKS5 page: keep action areas visually secondary to the form/table content. */
.socks-page-head .head-actions .btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 13px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
.socks-single-form .socks-save-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 13px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
.socks-batch-actions .btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
.socks-batch-actions { gap: 7px !important; }

@media (max-width: 1000px) {
    #xray-core-manager .xray-version-form {
        grid-template-columns: 1fr !important;
    }
    #xray-core-manager .xray-version-form .tool-actions {
        justify-content: flex-start !important;
    }
}

/* r53: Xray version selector uses a compact fixed width and aligns actions with the select itself. */
#xray-core-manager .xray-version-form {
    display: grid !important;
    grid-template-columns: minmax(360px, 480px) auto !important;
    justify-content: start !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
}
#xray-core-manager .xray-version-form > label {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 !important;
}
#xray-core-manager .xray-version-form > label > span {
    margin-bottom: 7px !important;
}
#xray-core-manager .xray-version-form select {
    width: 100% !important;
    height: 40px !important;
}
#xray-core-manager .xray-version-form .tool-actions {
    align-self: start !important;
    margin-top: 24px !important;
    height: 40px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
}
#xray-core-manager .xray-version-form .tool-actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
@media (max-width: 900px) {
    #xray-core-manager .xray-version-form {
        grid-template-columns: 1fr !important;
    }
    #xray-core-manager .xray-version-form > label {
        max-width: none !important;
    }
    #xray-core-manager .xray-version-form .tool-actions {
        margin-top: 8px !important;
    }
}