:root { font-family:"Microsoft YaHei","PingFang SC",system-ui,"Segoe UI",sans-serif; color:#1c292a; background:#f5f6f3; font-size:16px; line-height:1.65; --accent:#d5ed79; --line:#e3e7df; --muted:#596b60}
* { box-sizing:border-box}
body { margin:0}
small { font-size:14px}
p { overflow-wrap:anywhere}
button,input,select,textarea { font:inherit}
button,a,input,select { outline-offset:3px}
button { cursor:pointer; border:1px solid var(--line); border-radius:8px; padding:10px 16px; background:white; color:inherit}
button:hover { background:#edf1e8}
button:disabled { opacity:.6; cursor:not-allowed}
.primary { background:#253b32; color:white; border-color:#253b32}
.primary:hover { background:#385344}
.ghost { background:transparent}
.muted { color:var(--muted); line-height:1.8}
h1 { font-size:30px; font-weight:650; letter-spacing:0; margin:0 0 10px}
h2 { font-size:20px; margin:0}
h3 { font-size:18px}
.app { display:flex; min-height:100vh}
aside { width:240px; flex-shrink:0; background:#182a26; color:#c0cec5; position:fixed; inset:0 auto 0 0; padding:28px 22px; display:flex; flex-direction:column; overflow-y:auto}
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; color:#fff; font-weight:700; letter-spacing:0; font-size:19px}
.brand-mark { display:block; width:40px; height:40px; flex-shrink:0}
.brand-sub { display:block; font-size:14px; letter-spacing:0; color:#bacbbf; margin-top:4px}
nav { display:grid; gap:7px; margin-top:28px}
nav button { text-align:left; color:#b4c4b9; border:0; background:transparent; display:flex; gap:14px; padding:12px 14px; font-size:16px}
nav button.active { background:var(--accent); color:#24362b; font-weight:650}
nav button:hover { background:#31483b; color:white}
.aside-bottom { margin-top:auto; padding:24px 10px 0; font-size:14px}
.aside-bottom p { font-size:14px; color:#b4c7b8; margin:10px 0 20px}
.aside-bottom button { color:#c0cec5; border-color:#3a4d42}
.dot { display:inline-block; width:6px; height:6px; background:#9bbd72; border-radius:50%; margin-right:7px}
main { margin-left:240px; flex:1; min-width:0}
header { height:78px; padding:0 42px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; background:#fafbf8}
.breadcrumb { font-size:14px; color:#53695a}
.breadcrumb span { margin-left:16px}
.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0}
.account-button { display:flex; align-items:center; gap:10px; padding:4px 6px; border-color:transparent; background:transparent; min-height:44px}
#account-name { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:#435d4a}
.avatar { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; background:#e8eddf; border-radius:50%; color:#415c46}
.content { padding:32px 36px 48px; max-width:1800px; margin:auto}
.page-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; gap:20px}
.page-heading .muted { margin:0; font-size:15px}
.toolbar { display:flex; gap:8px; align-items:center}
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:26px}
.card,.panel { background:white; border:1px solid var(--line); border-radius:12px}
.card { padding:22px 24px}
.card-label { font-size:15px; color:#516656}
.card-value { font-size:36px; line-height:1.2; margin:17px 0 10px; letter-spacing:-1px; font-weight:600}
.card-note { font-size:14px; color:#586c5e}
.card.featured { background:#e6eddb}
.panel { overflow:hidden; margin-bottom:22px}
.panel-heading { padding:23px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center}
.panel-heading small { font-size:14px; color:#596c5f}
.table-scroll { overflow:auto}
table { width:100%; border-collapse:collapse; white-space:nowrap; text-align:left}
th { font-size:14px; color:#586b5f; font-weight:600; background:#fcfdfb; padding:14px 22px}
td { padding:18px 22px; border-top:1px solid #edf0e9; font-size:15px}
td strong { font-weight:600}
td small { display:block; color:#5e7063; font-size:14px; margin-top:6px}
.mono { font-family:Consolas,monospace; font-size:14px}
.badge { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:5px; background:#edf2e9; color:#385c32; font-size:14px}
.client-version { display:flex; align-items:center; gap:8px}
.badge.warn { background:#faf0dc; color:#795700}
.badge.bad { background:#f9e9e6; color:#934536}
.badge.off { background:#f0f1ee; color:#59645b}
.actions { display:flex; gap:6px}
.actions button { font-size:14px; padding:6px 9px; border-radius:5px}
.danger { color:#b55b50}
.empty { padding:60px 24px; text-align:center; color:#637460}
.empty h3 { color:#435c48; font-weight:500}
.grid-two { display:grid; grid-template-columns:1.4fr 1fr; gap:22px}
.steps { padding:5px 25px 20px; list-style:none; counter-reset:steps}
.steps li { position:relative; padding:15px 0 15px 39px; font-size:14px; line-height:1.8; color:#5a6e5c; counter-increment:steps}
.steps li:before { content:counter(steps); position:absolute; left:0; top:17px; border:1px solid #dce4d5; color:#526b49; border-radius:50%; width:24px; height:24px; text-align:center; font-size:14px}
.steps strong { display:block; color:#354e3d; font-weight:500}
footer { padding:0 36px 24px; color:#5e7063; font-size:14px; letter-spacing:0; display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap}
.login { min-height:100vh; display:grid; place-items:center; background:radial-gradient(ellipse at 20% 15%,#d9e3c5,transparent 70%),#f2f5ed}
.login-card { width:480px; max-width:calc(100vw - 32px); padding:40px; background:#fff; border:1px solid #e2e8da; border-radius:16px}
.login-card>.brand-mark { margin-bottom:24px}
.login-card h1 { font-size:27px}
.login-card .primary { width:100%; margin-top:12px}
.login-card label { margin-top:28px}
label { display:flex; flex-direction:column; gap:8px; font-size:15px; color:#435c4b; margin-bottom:18px}
input,select,textarea { width:100%; border:1px solid #d9e1d3; border-radius:7px; padding:10px 12px; background:#fcfdfb; color:#2d4033}
input:focus,select:focus,textarea:focus { outline:2px solid #789744}
input[type=checkbox] { width:auto; margin-right:8px}
label.check { display:block}
textarea { min-height:115px; resize:vertical}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px}
.full { grid-column:1/-1}
.form-actions { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding-top:20px; margin-top:12px}
.error { color:#b65a49; font-size:14px; white-space:pre-wrap}
.hint { font-size:14px; line-height:1.85; color:#5b6d60}
dialog { border:1px solid #dce2d4; border-radius:14px; width:640px; max-width:95vw; padding:0; box-shadow:0 20px 100px #14291f33}
dialog::backdrop { background:#13271e77; backdrop-filter:blur(3px)}
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:23px 27px; border-bottom:1px solid var(--line)}
#modal-content { padding:25px 27px}
.icon { border:0; font-size:24px; padding:0 8px; color:#60745c}
#notice { position:fixed; inset:auto; top:20px; right:24px; z-index:1000; width:max-content; max-width:min(480px,calc(100vw - 32px)); margin:0; padding:12px 18px; background:#e7eedb; color:#243e34; border:1px solid #d7e1ca; border-radius:8px; box-shadow:0 6px 24px #192e2026; font-size:14px; overflow-wrap:anywhere; pointer-events:none }
@media(max-width:620px) { #notice { top:12px; right:16px } }
.help { padding:25px; line-height:1.85; color:#465e4b}
.help code { font-size:14px; background:#f1f4ed; padding:3px 7px; border-radius:3px}
pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; background:#f3f6ef; padding:15px; border-radius:7px}
select.filter { width:210px}
[hidden] { display:none!important}
@media(min-width:1450px) { .content { padding-top:36px}
}
@media(max-width:1100px) { aside { width:208px; padding:24px 14px}
main { margin-left:208px}
.content { padding:28px 24px}
header { padding:0 24px}
.cards { grid-template-columns:repeat(2,1fr)}
.grid-two { grid-template-columns:1fr}
.page-heading { align-items:flex-start; flex-direction:column}
.brand { font-size:18px}
}
@media(max-width:620px) { aside { position:static; width:100%; padding:12px; overflow:visible}
aside .brand,.aside-bottom { display:none}
nav { display:flex; overflow:auto; gap:5px; margin-top:0}
nav button { white-space:nowrap; padding:10px 12px; font-size:14px; gap:7px; flex-shrink:0}
.app { display:block}
main { margin:0}
header { height:55px}
#account-name { display:none}
.header-actions { gap:4px}
.account-button { padding:4px; min-width:44px}
.content { padding:25px 16px}
.cards { gap:10px}
.card { padding:18px 16px}
.card-value { font-size:30px}
h1 { font-size:25px}
.form-grid { grid-template-columns:1fr}
.toolbar { flex-wrap:wrap}
footer { padding:0 16px 20px; font-size:14px}
.login-card { width:92vw; padding:30px}
}
#logout-mobile { display:none}
@media(max-width:620px) { #logout-mobile { display:block; padding:6px 10px; font-size:14px}
}
.list-filters { display:flex; gap:10px; padding:18px 22px; flex-wrap:wrap; border-bottom:1px solid var(--line)}
.list-filters input { flex:1; min-width:180px}
.list-filters select { width:150px}
.pagination { padding:16px 22px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.pagination select { width:auto}
.pagination .actions { align-items:center; flex-wrap:wrap}
.panel-heading { gap:12px; flex-wrap:wrap}
.panel-heading small button { margin-left:10px; font-size:14px}
.ip-cell { min-width:150px; vertical-align:middle}
.device-ip-list { display:flow-root }
.ip-link { display:block; padding:2px 0; border:0; border-radius:0; background:transparent; color:#496b54; text-align:left; line-height:1.6}
.ip-link:hover { background:transparent; text-decoration:underline}
.ip-more { font-size:14px; color:var(--muted); margin-top:5px}
.ip-more summary { cursor:pointer}
.ip-more[open] summary { margin-bottom:5px}
.ip-entry { margin-bottom:4px}
.ip-region { display:block; max-width:230px; white-space:normal; line-height:1.5; color:#5d6f61; font-family:inherit; font-size:14px; margin-top:0}
.location-note { white-space:normal; max-width:240px; overflow-wrap:anywhere}
.geo-note { padding:12px 22px; margin:0; border-top:1px solid var(--line); font-size:14px; color:var(--muted); line-height:1.8; overflow-wrap:anywhere}
.update-counts>span { display:inline-block; margin:0 24px 12px 0}
.actions { flex-wrap:wrap}
.address-grid { grid-template-columns:1fr}
.upload-drop { border:1px dashed #bdccb1; border-radius:12px; padding:26px; display:flex; gap:18px; align-items:center; background:#f8faf4; transition:background .15s,border-color .15s}
.upload-drop.dragging { background:#e8f0d7; border-color:#78984c}
.upload-icon { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; border-radius:12px; background:#e7eedb; color:#3e603d; font-size:28px}
.upload-file { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px}
.upload-file strong { font-size:16px; color:#2d4535; overflow-wrap:anywhere}
.upload-file span { font-size:14px; color:var(--muted)}
.upload-drop button { flex-shrink:0}
.upload-busy { border-style:solid}
.upload-progress { margin:22px 0 16px}
.upload-progress-top { display:flex; justify-content:space-between; gap:15px; font-size:14px; margin-bottom:9px}
.upload-progress-top strong { color:#35583b; flex-shrink:0}
progress { display:block; appearance:none; width:100%; height:9px; border:0; border-radius:10px; overflow:hidden; background:#edf1e7}
progress::-webkit-progress-bar { background:#edf1e7; border-radius:10px}
progress::-webkit-progress-value { background:#a8c45e; border-radius:10px; transition:width .15s}
progress::-moz-progress-bar { background:#a8c45e; border-radius:10px}
.upload-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
@media(max-width:620px) { .upload-drop { padding:20px 16px; flex-wrap:wrap; gap:12px}
.upload-drop button { width:100%}
.upload-icon { width:38px; height:38px}
.upload-progress-top { font-size:14px}
}

.profile-summary { display:flex; align-items:center; gap:14px; margin-bottom:24px}
.profile-summary .avatar { width:48px; height:48px; font-size:22px}
.profile-summary strong { font-size:18px; overflow-wrap:anywhere}
.profile-summary .hint { margin:4px 0 0}
.profile-summary>div { min-width:0}
.profile-actions { display:flex; justify-content:flex-end; margin:18px 0 0}
.password-section { border-top:1px solid var(--line); margin-top:26px; padding-top:20px}
.password-section h3 { margin:0 0 18px}


/* Compact login header and update controls, without reducing text size. */
#login-form { padding:32px }
.login-heading { display:flex; align-items:center; gap:12px; margin-bottom:24px }
.login-heading h1 { margin:0; font-size:26px; line-height:1.3; white-space:nowrap }
#login-form label { margin:0 0 18px }
#login-form .primary { margin-top:4px }
.updates-grid { align-items:stretch; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:20px }
.updates-grid>.panel { display:flex; flex-direction:column; min-width:0; margin-bottom:0 }
.updates-grid .panel-heading { padding:16px 20px }
.updates-grid .help { display:flex; flex-direction:column; flex:1; padding:18px 20px; line-height:1.65 }
.updates-grid .help>p { margin:0 0 12px }
.updates-grid .help>p:last-child { margin-bottom:0 }
.updates-grid label { margin-bottom:12px }
.update-panel-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:4px }
@media(max-width:1100px) { .updates-grid { grid-template-columns:1fr } }
@media(max-width:620px) {
  #login-form { padding:28px 24px }
  .updates-grid .panel-heading { padding:14px 16px }
  .updates-grid .help { padding:16px }
}

/* Settings keep common fields visible and reserve detailed guidance for expansion. */
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:20px }
.settings-grid>.panel { display:flex; flex-direction:column; min-width:0; margin-bottom:0 }
.settings-grid .panel-heading { padding:16px 20px }
.settings-grid .help { display:flex; flex-direction:column; flex:1; gap:12px; padding:18px 20px; line-height:1.65 }
.settings-grid .form-grid { grid-template-columns:minmax(0,1fr); gap:12px }
.settings-grid label { margin:0; gap:6px }
.settings-grid p { margin:0 }
.settings-grid .form-actions { flex-wrap:wrap; justify-content:flex-start; margin-top:auto; padding-top:14px; gap:8px }
.settings-details { color:var(--muted); line-height:1.75 }
.settings-details summary { cursor:pointer; width:fit-content; color:#435e49 }
.settings-details[open] summary { margin-bottom:8px }
.settings-details p+p { margin-top:8px }
@media(max-width:1100px) { .settings-grid { grid-template-columns:1fr } }
@media(max-width:620px) {
  .settings-grid .panel-heading { padding:14px 16px }
  .settings-grid .help { padding:16px }
}

/* Batch identity and bounded device search share existing form components. */
.device-identity { min-width:190px; max-width:250px }
.device-identity .serial { max-width:210px; overflow:hidden; text-overflow:ellipsis }
.device-picker { display:flex; align-items:flex-end; gap:10px; margin-bottom:18px }
.device-picker label { flex:1; min-width:0; margin:0 }
.device-picker button { flex-shrink:0 }
.picker-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:18px; font-size:14px; color:var(--muted) }
.list-filters select { max-width:100%; width:210px }
.proxy-runtime small,.proxy-check small { max-width:260px; white-space:normal }
input[readonly] { color:var(--muted); background:#f2f4ef }
@media(max-width:620px) {
 .device-picker { align-items:stretch; flex-direction:column }
 .list-filters select { width:100% }
}
.proxy-runtime { min-width:170px }
.proxy-check { min-width:230px }

.ip-family + .ip-family { margin-top:10px }

#modal.bulk-modal { width:min(1120px,calc(100vw - 24px)); max-width:1120px }
#bulk-devices input[type="checkbox"] { width:18px; height:18px }
#bulk-preview select,#bulk-preview input { min-width:180px; margin:3px 0 }
#bulk-preview td { max-width:270px; white-space:normal; overflow-wrap:anywhere }

#bulk-devices .table-scroll { max-height:280px; overflow:auto }
#bulk-preview > .table-scroll { max-height:440px; overflow:auto }


.proxy-credentials { margin-top:8px; font-size:14px; color:var(--muted) }
.proxy-credentials > div { display:flex; align-items:baseline; gap:4px; margin-top:3px }
button.credential-copy { border:0; border-radius:4px; padding:2px 5px; margin-left:-5px; background:transparent; color:#243e34; font-size:14px; text-align:left; max-width:260px; overflow-wrap:anywhere; white-space:normal }
button.credential-copy:hover { background:#edf2e4; text-decoration:underline }
button.credential-copy:focus-visible { outline:2px solid #6d873d; outline-offset:2px }
.clipboard-buffer { position:fixed; left:-9999px; top:0; width:1px; height:1px; opacity:0 }


/* Feedback slots keep form controls stationary while messages change. */
p.error[role="alert"] { display:block; height:2.8em; min-height:2.8em; line-height:1.4; overflow:auto; margin:8px 0 0 }
#copy-status { height:4.2em; line-height:1.4; overflow:auto; margin:8px 0 0 }
#public-url-status { height:3.3em; line-height:1.65; overflow:auto; margin:8px 0 0 }
.settings-grid p.error[role="alert"],.settings-grid #public-url-status { margin:0 }
.upload-progress-top > #upload-status { flex:1; min-width:0; height:3.3em; line-height:1.65; overflow:auto }
.upload-progress-top > #upload-percent { min-width:3em; text-align:right }
.upload-actions button { min-width:7.5em }
.upload-actions button[hidden] { display:inline-block!important; visibility:hidden }
#notice::backdrop { pointer-events:none }

.confirm-message { white-space:pre-wrap; margin:0 0 20px; line-height:1.85 }

.failure-link{border:0;padding:0;background:transparent;color:var(--muted);font-size:14px;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.failure-link.error{color:#b65a49}

#udp-probe-form input[name="dns"] { min-width:0; width:100% }
.check-raw { margin-top:20px }
.check-raw pre { max-height:320px; overflow:auto; overflow-wrap:anywhere; white-space:pre-wrap }

.settings-grid > .panel:last-child { grid-column:1 / -1 }

#modal.key-modal { width:min(1020px,calc(100vw - 24px)); max-width:1020px }
#key-picker { border:0; padding:0; margin:0; min-width:0 }
#key-devices .table-scroll, #key-detail-devices .table-scroll { max-height:340px; overflow:auto }
.key-picker-actions { margin:12px 0; flex-wrap:wrap }
#key-selected { min-height:1.65em; margin:12px 0 }
#key-missing:empty { display:none }

/* VPS grouping */
.group-filters{grid-template-columns:minmax(140px,190px) minmax(140px,190px) minmax(180px,1fr) minmax(140px,180px) auto auto}
.group-selection{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.selection-cell{width:42px}.selection-cell input,[data-group-page]{width:18px;height:18px;accent-color:#29483b}
.device-group-label{color:#3c6651}
.group-modal{width:min(840px,calc(100vw - 32px))}
.group-manager{display:grid;gap:18px}.group-manager .table-scroll{max-height:400px;overflow:auto}
@media(max-width:1100px){.group-filters{grid-template-columns:1fr 1fr}.group-filters input{grid-column:1/-1}}
@media(max-width:600px){.group-filters{grid-template-columns:1fr}.group-filters input{grid-column:auto}.group-selection{padding:14px}.group-selection .actions{flex-wrap:wrap}}

/* Navigation labels share an icon column on desktop and mobile. */
nav button{align-items:center}
.nav-icon{display:inline-grid;place-items:center;width:22px;min-width:22px;flex:0 0 22px;line-height:1.4}
.nav-text{display:block;text-align:left}
.groups-workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.group-directory,.group-members{min-width:0}
.group-catalog-search{padding:18px 20px 0}
.group-catalog-search label{margin-bottom:12px}
#group-catalog{max-height:540px;overflow:auto;padding:0 12px 12px}
.group-catalog-row{display:flex;align-items:center;gap:6px;margin:4px 0;border-radius:8px;border:1px solid transparent;padding:4px}
.group-catalog-row.selected{border-color:#c9d9ae;background:#f0f5e7}
.group-open{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left;border:0;background:transparent;padding:8px}
.group-open strong{display:block;font-size:16px}.group-open small{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.group-catalog-row .actions{flex-direction:column;flex-shrink:0}
.group-members-tools{padding:16px 22px}
.group-members-tools .hint{margin:0 0 12px}
.group-members-tools .actions{flex-wrap:wrap}
.group-member-filters{display:grid;grid-template-columns:minmax(130px,170px) minmax(170px,1fr) minmax(100px,140px) auto auto}
.group-member-filters select{width:100%}
@media(max-width:1450px){.groups-workspace{grid-template-columns:270px minmax(0,1fr)}.group-member-filters{grid-template-columns:1fr 1fr}.group-member-filters input{grid-column:1/-1}}
@media(max-width:1000px){.groups-workspace{grid-template-columns:1fr}#group-catalog{max-height:300px}}
@media(max-width:620px){.group-member-filters{grid-template-columns:1fr}.group-member-filters input{grid-column:auto}.group-members-tools{padding:16px}.group-catalog-row .actions{flex-direction:row}}

.key-group-list{max-height:240px;overflow:auto;padding:8px}.key-group-list .check{margin:8px 0}

.key-extension{display:flex;align-items:flex-end;gap:12px;margin-top:12px}.key-extension label{flex:1;min-width:0;margin:0}.key-extension button{flex-shrink:0}.key-extension input,.key-extension button{height:48px;min-height:48px}
.button-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-size:16px}
.api-docs .hint{margin:0 0 18px}

/* SSH batch installation */
.install-tabs{display:flex;gap:8px;margin:0 0 24px;flex-wrap:wrap}
.install-tabs [aria-selected="true"]{background:var(--ink,#243c32);color:#fff;border-color:var(--ink,#243c32)}
#modal.ssh-modal{width:min(1100px,calc(100vw - 32px));max-width:1100px}
.ssh-import{margin:24px 0 16px}.ssh-import details{margin-top:16px}.ssh-import summary{cursor:pointer}
.ssh-import textarea{margin:12px 0;min-height:120px}.ssh-import .button-link{margin:0}
.ssh-draft-scroll{overflow:auto;max-height:360px;border:1px solid #dce2d8;border-radius:8px}
.ssh-draft-table{min-width:800px;width:100%;table-layout:fixed}
.ssh-draft-table th,.ssh-draft-table td{padding:10px 8px;vertical-align:middle}
.ssh-draft-table th:nth-child(1){width:52px}.ssh-draft-table th:nth-child(2){width:28%}
.ssh-draft-table th:nth-child(3){width:92px}.ssh-draft-table th:nth-child(6){width:72px}
.ssh-draft-table input{width:100%;min-width:0;margin:0;height:42px}
.ssh-summary p{margin:16px 0 0}.ssh-controls{flex-wrap:wrap}.ssh-summary .badge{margin-right:8px}
.ssh-result{max-width:420px;white-space:normal;overflow-wrap:anywhere}
.ssh-fingerprint{max-width:330px;margin-top:8px;font-size:14px;overflow-wrap:anywhere;white-space:normal}.ssh-fingerprint summary{cursor:pointer}
@media(max-width:640px){#modal.ssh-modal{width:calc(100vw - 16px)}.ssh-import .actions{flex-wrap:wrap}.ssh-import .button-link{padding:10px 12px}.ssh-summary{padding:16px}.install-tabs{margin-bottom:16px}}

.ssh-log-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ssh-log-filter input{flex:1;min-width:180px;margin:0}.ssh-log-view .hint{margin:16px 0}.ssh-log-message{white-space:normal;overflow-wrap:anywhere;min-width:240px}.ssh-log-view .table-scroll{max-height:50vh;overflow:auto}.ssh-log-view td{vertical-align:top}.ssh-log-view .empty{padding:24px}

.ssh-summary + .table-scroll table{min-width:920px}
@media(max-width:640px){
 .ssh-log-view .table-scroll{overflow-x:hidden}
 .ssh-log-view table,.ssh-log-view tbody,.ssh-log-view tr,.ssh-log-view td{display:block;width:100%;min-width:0}
 .ssh-log-view thead{display:none}
 .ssh-log-view tr{padding:12px 0;border-bottom:1px solid var(--line)}
 .ssh-log-view td{padding:4px 0;border:0;white-space:normal;overflow-wrap:anywhere}
 .ssh-log-view td:first-child{font-size:14px;color:var(--muted)}
 .ssh-log-view td small{display:inline;margin-left:10px}
}