/* Relay Controller · shared light components. Workspace layout lives in workspace.css. */
:root {
  color-scheme:light;
  --bg-base:#f5f6f8; --bg-surface:#f5f6f8; --bg-card:#ffffff; --bg-hover:#f5f6f8;
  --primary:#0f766e; --primary-hover:#115e59; --success:#0f766e; --danger:#b4233a; --warning:#99620f;
  --text-main:#17212b; --text-secondary:#344451; --text-muted:#65727e; --text-dim:#65727e; --text:var(--text-main);
  --border:#e2e7eb; --border-hover:#c9d3d9; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px);
  --nav-width:196px; --header-height:70px; --modal-gap:20px; --control-size:40px;
  --modal-viewport-height:min(100dvh,var(--visual-viewport-height,100dvh));
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + var(--safe-top) + 14px); scrollbar-gutter:stable; }
body { margin:0; min-width:320px; background:var(--bg-base); color:var(--text-main); font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-variant-numeric:tabular-nums; }
button,input,textarea,select { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button,summary { touch-action:manipulation; }
button:disabled { cursor:not-allowed; }
a { color:var(--primary-hover); }
[hidden],tr.filtered-out { display:none!important; }
:focus-visible { outline:3px solid var(--primary-hover); outline-offset:3px; }
::selection { background:#e9f4f1; }
summary { list-style:none; cursor:pointer; } summary::-webkit-details-marker { display:none; }
.sr-only { position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:8px; left:8px; padding:12px; background:var(--bg-card); z-index:20000; transform:translateY(-160%); }.skip-link:focus { transform:translateY(0); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:var(--control-size); border:1px solid var(--border-hover); border-radius:9px; padding:9px 13px; background:#f8fafb; color:var(--text-main); font-size:12px; font-weight:550; line-height:1.4; cursor:pointer; text-decoration:none; text-align:center; transition:background .15s,border-color .15s; }
.btn:hover { background:#edf1f3; border-color:#c9d3d9; }.btn:active { background:#edf1f3; }
.btn-sm { font-size:12px; padding:8px 11px; }.btn-lg { min-height:48px; padding:12px 20px; font-size:14px; }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#ffffff; font-weight:650; }.btn-primary:hover { background:#115e59; border-color:#115e59; }
.btn-danger { color:#b4233a; background:#fff0f2; border-color:#ecc2ca; }.btn-danger:hover { background:#fff0f2; }
.btn-warning { color:#99620f; background:#fff6e7; border-color:#e9d4af; }.btn-success { color:#115e59; background:#edf7f3; border-color:#0f766e; }.btn-accent { color:#344451; background:#edf7f3; border-color:#c9d3d9; }
.btn:disabled,.btn.disabled { opacity:.5; pointer-events:none; }.btn-block { width:100%; }
[data-copied="true"] { border-color:var(--success)!important; box-shadow:0 0 0 2px #0f766e20; }
.detail-copy-row,.detail-row:has(.detail-copy-value) { display:grid; grid-template-columns:65px minmax(0,1fr) auto; align-items:center; }
.detail-copy-value { text-align:left!important; max-width:none!important; }
.close-btn,.btn-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text-muted); font-size:23px; cursor:pointer; }.close-btn:hover,.btn-icon:hover { color:var(--text-main); background:var(--bg-hover); }
.dashboard { padding-left:var(--nav-width); }
.section-nav { position:fixed; top:0; bottom:0; left:0; width:var(--nav-width); z-index:80; display:flex; flex-direction:column; gap:7px; padding:28px 12px 20px; background:#f5f6f8; border-right:1px solid var(--border); }
.nav-brand { display:flex; gap:11px; align-items:center; padding:0 10px 28px; }.brand-mark { display:inline-flex; width:42px; height:42px; flex:0 0 42px; align-items:center; justify-content:center; background:var(--primary); border-radius:13px; color:#ffffff; font-size:26px; font-weight:800; }.nav-brand strong { display:block; font-size:22px; }.nav-brand small { display:block; color:var(--text-muted); font-size:10px; }
.section-nav>a { display:flex; align-items:center; gap:12px; min-height:49px; padding:11px 13px; border:1px solid transparent; border-radius:9px; color:var(--text-muted); font-size:13px; font-weight:550; text-decoration:none; }
.section-nav>a>span:first-child { width:24px; text-align:center; font-size:23px; line-height:1; }.section-nav>a.active { background:#e9f4f1; color:#17212b; border-color:#c9d3d9; }.section-nav>a:hover { background:#e9f4f1; }.section-nav b { min-width:19px; padding:1px 5px; border-radius:20px; background:var(--primary); color:#ffffff; font-size:10px; text-align:center; }
.nav-note { margin-top:auto; padding:15px 10px 0; border-top:1px solid var(--border); font-size:11px; line-height:1.8; color:var(--text-muted); }.nav-note-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#65727e; margin-right:5px; }
.header { position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:calc(var(--header-height) + var(--safe-top)); padding:calc(12px + var(--safe-top)) 28px 12px; background:#ffffffed; border-bottom:1px solid var(--border); }
.header-title { min-width:0; }.header h1 { margin:1px 0 0; font-size:17px; white-space:nowrap; }.eyebrow { margin:0; color:var(--text-muted); font-size:9px; font-weight:650; letter-spacing:1.4px; }.user-info { display:flex; gap:9px; align-items:center; }
.launcher-trigger { white-space:nowrap; }.launcher-trigger>span { font-size:20px; line-height:1; }
.account-menu { position:relative; }.account-menu>summary { gap:7px; }.account-name { max-width:100px; overflow:hidden; text-overflow:ellipsis; }.account-menu-label { display:none; }.account-symbol { font-size:15px; }
.account-menu-panel { max-height:calc(var(--visual-viewport-height,100dvh) - var(--header-height) - 25px); overflow:auto; position:absolute; right:0; top:calc(100% + 10px); z-index:120; width:210px; padding:12px; background:#ffffff; border:1px solid var(--border-hover); border-radius:12px; box-shadow:0 16px 45px #17212b12; }.account-menu-panel .btn { width:100%; justify-content:flex-start; margin-top:7px; }.account-caption { margin:0 2px 7px; color:var(--text-muted); font-size:12px; overflow-wrap:anywhere; }
.main { max-width:1900px; margin:auto; padding:24px 28px 48px; }.page-intro { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }.page-intro h2 { margin:0 0 5px; font-size:24px; font-weight:650; }.page-intro p { margin:0; color:var(--text-muted); font-size:12px; }.refresh-stamp { min-width:165px; color:var(--text-dim); font-size:11px; text-align:right; }
.session-notice { margin-bottom:18px; border:1px solid #e9d4af; border-radius:10px; background:#fff6e7; padding:12px 15px; color:var(--warning); }
.overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.card { min-width:0; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; margin-bottom:20px; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:70px; padding:15px 18px; border-bottom:1px solid var(--border); }.card-header h2 { margin:0; font-size:16px; font-weight:650; }.section-description { margin:4px 0 0; color:var(--text-muted); font-size:11px; }.header-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.section-actions-menu { position:relative; }.section-actions-menu>summary { display:none; }.section-actions-panel { display:flex; gap:7px; flex-wrap:wrap; }
.status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:12px; }.status-item { min-width:0; min-height:86px; padding:12px 10px; border:1px solid transparent; border-radius:10px; background:#ffffff; }.status-item .label { display:block; font-size:10px; margin-bottom:8px; color:var(--text-muted); }.status-item .value { display:block; min-height:34px; font:650 25px/1.35 var(--font-mono); overflow-wrap:anywhere; }.status-item .value.online { color:var(--success); }.status-item .value.offline { color:var(--danger); }.status-item.clickable { cursor:pointer; }.status-item.clickable:hover,.status-item.filter-active { border-color:var(--primary); background:#e9f4f1; }
#xui-status { padding-top:7px; font-size:12px; font-weight:650; line-height:1.5; white-space:nowrap; }#warp-card .value { font-size:11px!important; line-height:1.6; min-height:35px; display:flex; align-items:center; }#warp-card .card-header { min-height:70px; }
.landing-filter-hint { display:inline-flex; min-height:40px; align-items:center; padding:8px 11px; border-radius:9px; background:#e9f4f1; color:#17212b; font-size:12px; cursor:pointer; }
.list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 18px; border-bottom:1px solid var(--border); }.search-field { display:flex; align-items:center; gap:8px; flex:1; max-width:430px; min-width:0; border:1px solid var(--border-hover); border-radius:10px; padding:0 11px; background:#ffffff; }.search-field>span { font-size:24px; color:var(--text-muted); }.search-field input[type=search] { min-height:44px; padding:10px 0; border:0; background:transparent; outline-offset:0; }.search-field:focus-within { border-color:var(--primary); }
.list-toolbar-meta { display:flex; align-items:center; gap:12px; }.list-count { color:var(--text-muted); min-height:18px; font-size:11px; white-space:nowrap; }
.table-container { overflow:auto; }.data-table-container { scrollbar-gutter:stable; }.table { width:100%; border-collapse:collapse; }.table th { color:var(--text-muted); font-size:11px; text-align:left; padding:12px; background:#f8fafb; border-bottom:1px solid var(--border); }.table td { color:var(--text-secondary); padding:12px; font-size:12px; border-bottom:1px solid #e2e7eb; vertical-align:middle; }.table td strong { color:var(--text-main); font-weight:600; }.table tbody tr:last-child td { border-bottom:0; }.table tbody tr:hover { background:#edf1f3; }
.data-table { table-layout:fixed; min-width:980px; }.data-table td { height:78px; }.data-table th:first-child,.data-table td:first-child { padding-left:18px; }.data-table th:last-child,.data-table td:last-child { padding-right:18px; }.data-table td:first-child strong { display:block; line-height:1.6; max-height:3.2em; overflow:hidden; overflow-wrap:anywhere; }
.inbound-table th:nth-child(1) { width:15%; }.inbound-table th:nth-child(2) { width:6%; }.inbound-table th:nth-child(3) { width:7%; }.inbound-table th:nth-child(4) { width:8%; }.inbound-table th:nth-child(5) { width:14%; }.inbound-table th:nth-child(6) { width:15%; }.inbound-table th:nth-child(7) { width:35%; }
.landing-table th:nth-child(1) { width:14%; }.landing-table th:nth-child(2) { width:14%; }.landing-table th:nth-child(3) { width:12%; }.landing-table th:nth-child(4) { width:7%; }.landing-table th:nth-child(5) { width:14%; }.landing-table th:nth-child(6) { width:11%; }.landing-table th:nth-child(7) { width:28%; }.landing-table td { height:98px; }
code { padding:3px 6px; border-radius:5px; background:#f8fafb; color:#344451; font:11px var(--font-mono); overflow-wrap:anywhere; }.data-table td>code { display:inline-block; max-width:100%; max-height:54px; overflow:auto; scrollbar-width:thin; }
.status-badge,.protocol-badge { display:inline-flex; gap:5px; align-items:center; min-height:24px; border-radius:6px; padding:4px 7px; font-size:10px; line-height:1.4; font-weight:600; white-space:nowrap; background:#f8fafb; color:#344451; }.status-badge:before { content:''; width:5px; height:5px; background:currentColor; border-radius:50%; }.status-badge.online { color:#115e59; background:#edf7f3; }.status-badge.offline { color:#b4233a; background:#fff0f2; }.status-badge.unknown { color:#99620f; background:#fff6e7; }.protocol-badge.vmess { background:#0f766e; color:#344451; }.protocol-badge.vless { background:#0f766e; color:#115e59; }.protocol-badge.trojan { background:#fff6e7; color:#99620f; }.protocol-badge.shadowsocks { background:#0f766e; color:#344451; }
.status-cell { min-width:0; }.status-cell-landing { display:block; width:100%; min-height:21px; height:21px; margin-top:5px; line-height:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.action-btns { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }.action-btns .btn { font-size:11px; padding:7px 5px; min-width:0; }.inbound-table .action-btns { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }.inbound-table .action-btns .btn { min-height:38px; }
.ib-exit-ip { display:flex; align-items:center; height:44px; min-height:44px; line-height:1.5; }.ib-exit-ip>* { max-width:100%; }.ib-exit-ip>span { max-height:44px; overflow:auto; }
.landing-table .action-btns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr); grid-template-rows:36px 36px; grid-template-areas:"detail exit warp" "direct exit delete"; gap:6px; }.landing-table .action-btns>.btn { min-height:36px; height:36px; font-size:10px; padding:6px 3px; }.landing-table .action-btns>[onclick^="showDetail"] { grid-area:detail; }.landing-table .action-btns>[onclick^="toggleLandingWarp"] { grid-area:warp; }.landing-table .action-btns>[onclick^="showDirectQuickModal"] { grid-area:direct; }.landing-table .action-btns>[onclick^="deleteLanding"] { grid-area:delete; }.landing-table .exit-ip-btn-wrap { grid-area:exit; min-width:0; height:78px; display:flex; align-items:center; justify-content:center; overflow:hidden; }.landing-table .exit-ip-btn-wrap .btn { width:100%; min-height:36px; font-size:10px; padding:7px 4px; }
.exit-ip-inline { font-size:11px; overflow-wrap:anywhere; }.exit-ip-inline.match { color:var(--success); }.exit-ip-inline.mismatch { color:var(--warning); }.traffic-total { color:var(--text-main); font-weight:600; }.traffic-detail { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; color:var(--text-dim); font-size:10px; }.traffic-up { color:#344451; }.traffic-down { color:#0f766e; }
.table-pagination { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:12px 18px; min-height:68px; border-top:1px solid var(--border); }.table-pagination>label { display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:11px; }.table-pagination select { width:67px; min-height:40px; padding:7px 9px; font-size:12px; }.pager-actions { display:flex; align-items:center; gap:8px; }.pager-actions>span { min-width:50px; font:11px var(--font-mono); color:var(--text-muted); text-align:center; }
.empty-state,.loading { padding:27px 18px; color:var(--text-muted); text-align:center; }.inline-note,.muted { color:var(--text-muted); font-size:12px; line-height:1.7; }.section-footer { min-height:40px; padding:11px 18px; border-top:1px solid var(--border); font-size:11px; color:var(--text-dim); }
.jobs-list { padding:0 18px; }.job-row { display:flex; align-items:center; gap:12px; min-height:74px; padding:14px 0; border-bottom:1px solid var(--border); }.job-row:last-child { border:0; }.job-description { flex:1; min-width:0; }.job-description strong { display:block; font-size:12px; overflow-wrap:anywhere; }.job-description small { display:block; margin-top:5px; color:var(--text-dim); font-size:11px; }.log-container { min-height:140px; max-height:320px; padding:16px 18px; overflow:auto; }.log-content { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; color:#344451; font:12px/1.8 var(--font-mono); }
.modal { display:none; position:fixed; top:var(--visual-viewport-top,0px); left:0; right:0; height:var(--modal-viewport-height); z-index:1000; align-items:center; justify-content:center; padding:max(var(--modal-gap),var(--safe-top)) max(var(--modal-gap),var(--safe-right)) max(var(--modal-gap),var(--safe-bottom)) max(var(--modal-gap),var(--safe-left)); background:#17212b70; backdrop-filter:blur(3px); overscroll-behavior:contain; }.modal.show { display:flex; }
.modal-content { width:100%; max-width:640px; max-height:100%; overflow:auto; border:1px solid #c9d3d9; border-radius:16px; background:#ffffff; box-shadow:0 25px 90px #17212b12; scrollbar-gutter:stable; scroll-padding-top:78px; scroll-padding-bottom:90px; }.modal-lg { max-width:1000px; }.modal-sm { max-width:480px; }
.modal-header { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:70px; padding:12px 20px; background:#ffffff; border-bottom:1px solid var(--border); }.modal-header h3 { margin:0; font-size:18px; font-weight:650; }.modal-description { margin:4px 0 0; color:var(--text-muted); font-size:12px; }
.modal-content form,.modal-body { padding:22px; }.form-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; position:sticky; bottom:0; z-index:2; min-height:76px; padding:15px 22px; border-top:1px solid var(--border); background:#ffffff; box-shadow:0 -6px 18px #17212b12; }.form-actions>.btn { min-width:88px; min-height:44px; }form>.form-actions { margin:20px -22px -22px; }.modal-content>.form-group,.modal-content>#warp-license-result { margin:20px 22px; }
.landing-type-tabs { padding:5px; border:1px solid var(--border); border-radius:11px; background:#f5f6f8; }.landing-type-tabs .btn { background:transparent; border-color:transparent; }.landing-type-tabs .btn-primary { background:#e9f4f1; border-color:#c9d3d9; color:#17212b; }
#batch-input-area,#batch-progress-area,#qd-form-section,#qd-progress-section,#qd-result-section,#qd-error-section { padding:22px; }#batch-input-area>.form-actions,#batch-progress-area>.form-actions,#qd-form-section>.form-actions,#qd-result-section>.form-actions,#qd-error-section>.form-actions { margin:20px -22px -22px; }
.detail-section { min-width:0; padding:18px 22px; border-bottom:1px solid var(--border); }.detail-section h4 { color:var(--primary-hover); font-size:12px; margin:0 0 12px; }.detail-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:45px; padding:10px 0; border-bottom:1px solid #e2e7eb; }.detail-row:last-child { border:0; }.detail-row>.label { color:var(--text-muted); flex:0 0 auto; font-size:12px; }.detail-row>span:not(.label) { min-width:0; text-align:right; overflow-wrap:anywhere; }.detail-actions,.detail-quick-actions { display:flex; flex-wrap:wrap; gap:8px; padding:14px 22px; background:#ffffff; }
.detail-copy-value { min-width:0; overflow-wrap:anywhere; user-select:all; font-family:var(--font-mono); }.detail-copy-btn { min-height:44px; min-width:58px; flex:0 0 auto; }.detail-quick-actions>.btn { flex:1 1 120px; min-height:44px; }.copyable { cursor:pointer; color:#115e59; min-height:44px; display:inline-flex; align-items:center; justify-content:flex-end; padding:6px; border-radius:7px; }.copyable:hover { background:#edf1f3; }
.bound-inbound-header { gap:10px; }.bound-inbound-link,.share-link-box { display:flex; gap:9px; min-width:0; align-items:stretch; }.bound-inbound-link input,.share-link-box textarea { flex:1; min-width:0; }.bound-inbound-link .btn,.share-link-box .btn { flex:0 0 auto; min-width:70px; }
.qrcode-container { display:flex; flex-direction:column; align-items:center; padding:18px; }.qrcode-label { max-width:100%; margin-bottom:14px; color:var(--text-main); font-size:15px; font-weight:600; text-align:center; overflow-wrap:anywhere; }.qrcode-image-wrapper { display:flex; align-items:center; justify-content:center; min-width:0; max-width:100%; min-height:180px; padding:16px; border-radius:12px; background:white; color:#17212b; }.qrcode-image-wrapper img { display:block; width:min(280px,calc(100vw - 90px)); max-width:100%; height:auto; aspect-ratio:1; object-fit:contain; image-rendering:pixelated; }.qrcode-loading { display:flex; align-items:center; justify-content:center; min-height:180px; color:#65727e; }.qrcode-hint { margin:14px 0 0; color:var(--text-muted); font-size:12px; text-align:center; }.qrcode-error { color:#b4233a; text-align:center; }.qrcode-actions .btn { flex:1; }.qrcode-actions { min-height:73px; }
.deploy-choice-grid { padding:16px; display:grid; gap:10px; }.deploy-choice { display:flex; align-items:center; gap:13px; padding:17px 15px; min-height:89px; width:100%; border:1px solid var(--border-hover); border-radius:12px; background:#ffffff; color:var(--text-main); text-align:left; cursor:pointer; }.deploy-choice:hover { background:#e9f4f1; border-color:#c9d3d9; }.deploy-choice>span:nth-child(2) { flex:1; min-width:0; }.deploy-choice strong { display:block; margin-bottom:5px; font-size:15px; }.deploy-choice small { display:block; color:var(--text-muted); font-size:12px; }.deploy-choice>span:last-child { color:var(--primary); font-size:24px; }.deploy-choice-icon { display:flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; height:42px; border-radius:11px; background:#edf1f3; color:#115e59; font:700 15px var(--font-mono); }
.quick-import-box { padding:14px; margin-bottom:22px; border:1px solid #c9d3d9; border-radius:12px; background:#e9f4f1; }.quick-import-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:5px; margin-bottom:10px; }.quick-import-heading strong { font-size:13px; }.quick-import-heading>span { color:var(--text-muted); font-size:11px; }.quick-import-box textarea { min-height:68px; font:12px/1.6 var(--font-mono); }.quick-import-actions { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-top:9px; }.quick-import-actions p { flex:1; min-width:0; margin:0; color:var(--text-muted); font-size:11px; }.quick-import-actions .btn { flex:0 0 auto; }
#qd-import-feedback[data-state="success"] { color:var(--success); }#qd-import-feedback[data-state="error"] { color:var(--danger); }
#inbound-detail-content>.detail-quick-actions { position:sticky; top:70px; z-index:2; border-bottom:1px solid var(--border); }
.login-page { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:max(20px,var(--safe-top)) max(20px,var(--safe-right)) max(20px,var(--safe-bottom)) max(20px,var(--safe-left)); background:radial-gradient(ellipse at 50% 0,#e9f4f1,transparent 65%),var(--bg-base); }.login-container { width:100%; max-width:420px; }.login-box { padding:34px; border:1px solid #c9d3d9; border-radius:19px; background:#ffffff; box-shadow:0 20px 75px #17212b12; }.login-mark { margin-bottom:24px; }.login-box h1 { margin:8px 0; font-size:24px; font-weight:650; }.login-box .subtitle { color:var(--text-muted); font-size:13px; margin:0 0 26px; }.login-box .hint { margin:20px 0 0; color:var(--text-dim); font-size:11px; text-align:center; }.login-box .btn { min-height:46px; }.alert-error { margin-bottom:18px; padding:12px; border:1px solid #ecc2ca; border-radius:9px; background:#fff0f2; color:#b4233a; font-size:13px; }
/* Shared form, deployment progress, direct-proxy and toast components. */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.form-column { min-width:0; }
.form-row { display:flex; gap:14px; }
.flex-1 { flex:1; min-width:0; }
.flex-2 { flex:2; min-width:0; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; color:var(--text-secondary); font-size:12px; font-weight:550; margin-bottom:8px; }
.form-group small { display:block; color:var(--text-dim); font-size:11px; margin-top:7px; }
input[type=text],input[type=password],input[type=number],input[type=search],select,textarea { max-width:100%; min-width:0; width:100%; min-height:44px; background:#f5f6f8; border:1px solid var(--border-hover); border-radius:9px; padding:11px 12px; color:var(--text-main); font-size:14px; }
input::placeholder,textarea::placeholder { color:#65727e; opacity:1; }
input:focus,select:focus,textarea:focus { border-color:var(--primary); }
input[readonly],textarea[readonly] { color:#115e59; background:#f5f6f8; }
textarea { resize:vertical; line-height:1.6; }
input[type=checkbox] { width:19px; height:19px; flex:0 0 19px; accent-color:var(--primary); }
.form-section { min-width:0; padding:16px; margin-bottom:16px; border:1px solid var(--border); border-radius:12px; background:#f5f6f8; }
.form-section h4 { margin:0 0 14px; font-size:13px; }
.section-header { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.section-header h4 { flex:1; margin:0; }
.section-icon { opacity:.8; }
.form-section .form-group:last-child { margin-bottom:0; }
.input-prefix { display:flex; align-items:stretch; min-width:0; }
.input-prefix .prefix { display:flex; align-items:center; border:1px solid var(--border-hover); border-right:0; padding:0 11px; background:#f8fafb; border-radius:9px 0 0 9px; color:var(--text-muted); font:12px var(--font-mono); }
.input-prefix input { border-radius:0 9px 9px 0; }
.password-input-wrap { display:flex; align-items:center; gap:8px; }
.password-input-wrap input { flex:1; min-width:0; }
.password-input-wrap .btn-icon { font-size:16px; }
.checkbox-label { display:flex!important; align-items:flex-start; gap:10px; color:var(--text-secondary); font-size:13px; padding:10px 0; cursor:pointer; }
.checkbox-label input { margin:0; }
.ss-info-box { font-size:12px; color:#115e59; padding:12px; background:#f8fafb; border-radius:9px; }
.ss-info-box p { margin:0; }
.test-result { font-size:12px; margin-top:10px; overflow-wrap:anywhere; }
.test-result.success { color:var(--success); }
.test-result.error { color:var(--danger); }
.inbound-list { max-height:248px; overflow:auto; border:1px solid var(--border); border-radius:9px; }
.inbound-item { display:flex; gap:12px; padding:12px; border-bottom:1px solid var(--border); cursor:pointer; }
.inbound-item:last-child { border:0; }
.inbound-item:has(input:checked) { background:#e9f4f1; }
.inbound-info { min-width:0; display:flex; flex-wrap:wrap; gap:4px 8px; }
.inbound-name { width:100%; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.inbound-meta { color:var(--text-muted); font-size:11px; }
.inbound-tip { display:block; margin-top:8px; color:var(--text-muted); }
.form-hint-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:7px; align-items:center; justify-content:space-between; }
.quick-link { font-size:12px; }
.deploy-status { padding:16px; margin-top:18px; border:1px solid var(--border); border-radius:12px; background:#f5f6f8; }
.deploy-status-header { display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:space-between; }
.deploy-status-header h4 { margin:0; font-size:13px; }
.deploy-progress-bar { flex:1 1 180px; height:7px; overflow:hidden; border-radius:8px; background:#edf1f3; }
.deploy-progress-fill { width:0; height:100%; background:var(--primary); transition:width .2s; }
.status-log { max-height:260px; overflow:auto; margin-top:14px; padding:10px; border-radius:8px; background:#f8fafb; }
.log-item { display:flex; gap:9px; padding:7px 0; font-size:12px; color:var(--text-muted); line-height:1.7; overflow-wrap:anywhere; }
.log-item>span:last-child { min-width:0; }
.log-item .time { flex:0 0 auto; font:10px/2 var(--font-mono); color:#65727e; }
.log-item.success { color:var(--success); }
.log-item.error { color:var(--danger); }
.log-item.warning { color:var(--warning); }
.spinner { display:inline-block; width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin 1s linear infinite; }
.bound-inbound-header { gap:10px; }
.bound-inbound-link input,.share-link-box textarea { min-width:0; flex:1; }
.bound-inbound-link button,.share-link-box button { flex:0 0 auto; }
#dq-info-section { padding:20px; }
#dq-progress-section { padding:0 20px 20px; }
.direct-proxy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.socks5-card { min-width:0; padding:18px; border:1px solid var(--border); background:#ffffff; border-radius:12px; }
.socks5-card-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.socks5-card h4 { margin:0; font-size:14px; }
.socks5-desc { color:var(--text-muted); font-size:12px; line-height:1.65; margin:10px 0; }
.socks5-meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:14px 0; }
.socks5-meta-grid>div { min-width:0; padding:10px; border-radius:8px; background:#f5f6f8; }
.socks5-meta-grid span { display:block; color:var(--text-muted); font-size:10px; margin-bottom:4px; }
.socks5-meta-grid code { display:block; padding:0; background:none; word-break:break-all; }
.socks5-copy-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:12px 0; }
.socks5-copy-actions small { font-size:10px; color:var(--text-dim); }
.socks5-link-row { display:flex; align-items:stretch; gap:7px; min-width:0; }
.socks5-link-input { min-width:0; flex:1; font-family:var(--font-mono); font-size:11px!important; }
.socks5-link-row .btn { flex:0 0 auto; }
.socks5-empty-card { grid-column:1/-1; text-align:center; }
#direct-quick-modal .form-actions .btn { flex:1 1 auto; }
#toast-container { position:fixed; top:106px; right:24px; display:flex; flex-direction:column; gap:10px; width:min(400px,calc(100vw - 32px)); z-index:20000; pointer-events:none; }
.toast { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border:1px solid var(--border-hover); border-left:3px solid var(--primary); border-radius:10px; background:#f8fafb; box-shadow:0 12px 40px #17212b12; font-size:13px; pointer-events:auto; overflow-wrap:anywhere; }
.toast-success { border-left-color:var(--success); }
.toast-error { border-left-color:var(--danger); }
.toast-warning { border-left-color:var(--warning); }
.toast-message { min-width:0; flex:1; white-space:pre-line; }
.toast-dismiss { border:0; background:transparent; color:var(--text-muted); padding:0; font-size:19px; min-width:28px; cursor:pointer; }
.toast.hiding { opacity:0; transition:opacity .2s; }

@keyframes spin { to { transform:rotate(360deg); } }
@media(min-width:760px) {
  #inbound-detail-modal .modal-content { max-width:940px; }
  #inbound-detail-content { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-areas:"quick quick" "info share" "info qr"; align-items:start; }
  #inbound-detail-content>.detail-quick-actions { grid-area:quick; }
  .detail-info-section { grid-area:info; border-right:1px solid var(--border); }
  .detail-share-section { grid-area:share; }.detail-qr-section { grid-area:qr; }
  .detail-qr-section .qrcode-container { padding:0; }.detail-qr-section .qrcode-image-wrapper img { width:210px; }
  .detail-share-section .share-link-box { flex-wrap:wrap; }.detail-share-section .share-link-box textarea { flex-basis:100%!important; }.detail-share-section .share-link-box>.btn { flex:1; }
}
@media(min-width:1500px) {
  .main { padding-left:34px; padding-right:34px; }.status-item { padding:14px 16px; }.status-item .label { font-size:12px; }#warp-card .value { font-size:12px!important; }
  .landing-table .action-btns { grid-template-columns:48px minmax(70px,1fr) 74px 58px 48px; grid-template-rows:44px; grid-template-areas:"detail exit warp direct delete"; align-items:center; }.landing-table .exit-ip-btn-wrap { height:44px; }.landing-table th:last-child { width:31%; }.landing-table th:first-child { width:11%; }
}
@media(min-width:1025px) and (max-width:1279px) { :root { --nav-width:168px; }.section-nav { padding-left:9px; padding-right:9px; }.nav-brand { padding-left:5px; gap:8px; }.nav-brand strong { font-size:19px; }.nav-brand small { font-size:9px; }.main { padding:22px 20px 40px; }.overview-grid .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.status-item { min-height:73px; }.card-header { flex-wrap:wrap; }.inbound-actions { width:100%; } }
@media(max-width:1024px) {
  :root { --nav-width:0px; --header-height:64px; --control-size:44px; --modal-gap:12px; }
  input[type=text],input[type=password],input[type=number],input[type=search],select,textarea { font-size:16px!important; }
  html { scrollbar-gutter:auto; }.header { padding:calc(10px + var(--safe-top)) max(16px,var(--safe-right)) 10px max(16px,var(--safe-left)); }.header h1 { font-size:17px; }.header-title .eyebrow { font-size:8px; }
  .section-nav { top:auto; bottom:0; left:0; right:0; width:auto; height:calc(66px + var(--safe-bottom)); padding:6px max(7px,var(--safe-right)) calc(6px + var(--safe-bottom)) max(7px,var(--safe-left)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; border:0; border-top:1px solid var(--border); background:#ffffffed; }
  .nav-brand,.nav-note { display:none; }.section-nav>a { min-height:52px; flex-direction:column; justify-content:center; gap:4px; padding:5px 2px; font-size:10px; position:relative; border:0; }.section-nav>a>span:first-child { font-size:21px; }.section-nav b { position:absolute; top:1px; right:9%; }
  .main { padding:18px max(14px,var(--safe-right)) calc(90px + var(--safe-bottom)) max(14px,var(--safe-left)); }.page-intro { margin-bottom:16px; }.page-intro h2 { font-size:22px; }.page-intro p { font-size:12px; }
  .account-menu-label { display:inline; }.account-name,.account-symbol { display:none; }.user-info { gap:7px; }.launcher-trigger { font-size:12px; padding:8px 11px; }.account-menu>summary { padding:8px 10px; }
  .card-header { min-height:68px; padding:13px 14px; }.section-description { font-size:11px; }.header-actions { flex-wrap:nowrap; }
  .section-actions-menu>summary { display:flex; }.section-actions-panel { position:absolute; z-index:45; top:calc(100% + 8px); right:0; display:grid; grid-template-columns:1fr; min-width:215px; max-width:calc(100vw - 36px); padding:10px; border:1px solid var(--border-hover); border-radius:12px; background:#ffffff; box-shadow:0 15px 35px #17212b12; }.section-actions-panel .btn { justify-content:flex-start; min-height:44px; padding:10px 12px; }
  .overview-grid { gap:12px; }.overview-grid .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.status-item { min-height:75px; padding:10px; }.status-item .value { font-size:24px; }
  .list-toolbar { padding:11px 12px; }.search-field { max-width:none; }.list-toolbar-meta { gap:9px; }.list-toolbar-meta .btn { white-space:nowrap; }.list-count { font-size:11px; }
  .data-table-container { overflow:visible; padding:12px; scrollbar-gutter:auto; }.data-table { display:block; min-width:0; width:100%; table-layout:auto; }.data-table thead { display:none; }.data-table tbody { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%; }.data-table tbody tr { display:grid; min-width:0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 8px; border:1px solid #e2e7eb; border-radius:12px; padding:13px; background:#f5f6f8; }
  .data-table td,.data-table td:first-child,.data-table td:last-child { display:block; min-width:0; padding:0; height:auto; border:0; font-size:13px; }.data-table td:before { content:attr(data-label); display:block; margin-bottom:4px; color:var(--text-dim); font-size:10px; line-height:15px; }.data-table td:first-child strong { font-size:15px; line-height:1.45; max-height:2.9em; overflow:hidden; }.data-table td:first-child:before,.data-table td:last-child:before { display:none; }.data-table td:last-child { padding-top:10px; border-top:1px solid var(--border); }
  .data-table td>code { padding:0; border-radius:0; background:none; font-size:12px; line-height:19px; max-height:38px; }.data-table .action-btns .btn { min-height:44px; min-width:44px; font-size:11px; padding:8px 4px; }
  .inbound-table tbody tr { grid-template-areas:"name name name protocol" "port port traffic traffic" "status status exit exit" "actions actions actions actions"; grid-template-rows:44px 39px 63px 105px; }
  .inbound-table td:nth-child(1) { grid-area:name; }.inbound-table td:nth-child(2) { grid-area:port; }.inbound-table td:nth-child(3) { grid-area:protocol; text-align:right; }.inbound-table td:nth-child(3):before { display:none; }.inbound-table td:nth-child(4) { grid-area:traffic; }.inbound-table td:nth-child(5) { grid-area:status; }.inbound-table td:nth-child(6) { grid-area:exit; }.inbound-table td:nth-child(7) { grid-area:actions; }
  .inbound-table .action-btns { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:44px 44px; gap:6px; }.ib-exit-ip { height:44px; min-height:44px; }.ib-exit-ip>.btn { width:100%; }.status-cell-landing { font-size:10px!important; }
  .landing-table tbody tr { grid-template-areas:"name name name name" "ip ip traffic traffic" "port port outbound outbound" "state state state state" "actions actions actions actions"; grid-template-rows:44px 52px 52px 43px 105px; }.landing-table td:nth-child(1) { grid-area:name; }.landing-table td:nth-child(2) { grid-area:ip; }.landing-table td:nth-child(3) { grid-area:traffic; }.landing-table td:nth-child(4) { grid-area:port; }.landing-table td:nth-child(5) { grid-area:outbound; }.landing-table td:nth-child(6) { grid-area:state; }.landing-table td:nth-child(7) { grid-area:actions; }.landing-table .action-btns { grid-template-rows:44px 44px; }.landing-table .action-btns>.btn { height:44px; }.landing-table .exit-ip-btn-wrap { height:94px; }.landing-table .exit-ip-btn-wrap>.btn { min-height:44px; }
  .data-table tbody tr:has(td[colspan]) { grid-column:1/-1; display:block; min-height:110px; }.data-table td[colspan] { padding:25px 10px; text-align:center; }.table-pagination { min-height:70px; padding:12px; }.table-pagination select { min-height:44px; }.pager-actions .btn { min-height:44px; }
  .detail-quick-actions { padding:12px 16px; }.detail-quick-actions .btn { min-height:44px; }.detail-row { font-size:13px; }.detail-copy-btn { min-height:44px; }.copyable { min-height:44px; }
  .job-row { flex-wrap:wrap; }.job-description { flex:1 1 55%; }.toast-dismiss { min-width:44px; min-height:44px; }.keyboard-open .section-nav { display:none; }.keyboard-open .main { padding-bottom:20px; }
}
@media(max-width:680px) {
  :root { --modal-gap:8px; }.header { gap:9px; padding-left:max(12px,var(--safe-left)); padding-right:max(12px,var(--safe-right)); }.header h1 { font-size:16px; }.header-title .eyebrow { font-size:7px; letter-spacing:1px; }.user-info { gap:6px; }.launcher-trigger { font-size:11px; padding:9px; }.launcher-trigger>span { font-size:18px; }.account-menu>summary { font-size:11px; padding:9px 8px; }
  .main { padding-left:max(11px,var(--safe-left)); padding-right:max(11px,var(--safe-right)); }.refresh-stamp { display:none; }.page-intro h2 { font-size:21px; }.page-intro p { font-size:11px; }.overview-grid { display:block; }.card { margin-bottom:14px; border-radius:13px; }.card-header { gap:9px; }.card-header h2 { font-size:15px; }.section-description { font-size:10px; max-width:180px; }.inbound-actions { gap:6px; }.inbound-actions>.btn { min-width:44px; padding:8px; }.section-actions-menu>summary { padding:8px 10px; font-size:11px; }
  .overview-grid .status-grid { grid-template-columns:repeat(4,minmax(0,1fr)); padding:10px; gap:6px; }.status-item { min-height:74px; padding:10px 7px; }.status-item .label { font-size:10px; margin-bottom:7px; white-space:nowrap; }.status-item .value { font-size:23px; }#xui-status { font-size:10px; padding-top:8px; }#warp-card .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }#warp-card .status-item { min-height:61px; padding:7px 10px; }#warp-card .value { min-height:28px; height:28px; align-items:flex-start; line-height:1.35; }#warp-card .label { margin-bottom:4px; }
  .list-toolbar { flex-wrap:wrap; gap:8px; }.search-field { flex:1 1 100%; }.search-field input[type=search] { font-size:16px; }.list-toolbar-meta { width:100%; justify-content:space-between; min-height:44px; }.data-table-container { padding:10px; }.data-table tbody { grid-template-columns:1fr; gap:10px; }.data-table tbody tr { padding:12px; }.table-pagination>label { font-size:10px; }.table-pagination select { width:61px; }.pager-actions { gap:5px; }.pager-actions>.btn { padding:8px; font-size:10px; }.pager-actions>span { min-width:42px; font-size:10px; }
  .modal { backdrop-filter:blur(2px); }.modal-content { border-radius:14px; scrollbar-gutter:auto; scroll-padding-top:68px; }.modal-header { min-height:64px; padding:10px 14px; }.modal-header h3 { font-size:16px; }.modal-description { font-size:11px; }.modal-content form,.modal-body { padding:16px; }.modal-content>.form-group,.modal-content>#warp-license-result { margin:18px 16px; }.form-grid,.direct-proxy-grid { grid-template-columns:1fr; gap:0; }.form-row { gap:10px; }.form-section { padding:13px; margin-bottom:14px; }.form-group { margin-bottom:16px; }.form-group label { font-size:12px; }
  input[type=text],input[type=password],input[type=number],input[type=search],select,textarea { font-size:16px!important; min-height:46px; padding:11px 12px; }.form-actions { min-height:72px; padding:12px 16px; }.form-actions>.btn { flex:1 1 auto; min-width:74px; min-height:46px; }form>.form-actions { margin:18px -16px -16px; }
  #batch-input-area,#batch-progress-area,#qd-form-section,#qd-progress-section,#qd-result-section,#qd-error-section { padding:16px; }#batch-input-area>.form-actions,#batch-progress-area>.form-actions,#qd-form-section>.form-actions,#qd-result-section>.form-actions,#qd-error-section>.form-actions { margin:18px -16px -16px; }
  .landing-type-tabs { gap:4px!important; padding:4px; }.landing-type-tabs .btn { min-height:52px; padding:8px 4px; font-size:10px; }.quick-link { display:inline-flex; align-items:center; min-height:44px; }
  .detail-section { padding:16px; }.detail-row { gap:10px; align-items:flex-start; }.detail-row>span:not(.label) { max-width:72%; }.detail-copy-value { font-size:12px; }.detail-copy-btn { min-width:55px; }.detail-quick-actions { gap:7px; }.detail-quick-actions>.btn { flex:1 1 110px; }#inbound-detail-content>.detail-quick-actions { top:64px; }.bound-inbound-link,.share-link-box { flex-wrap:wrap; }.bound-inbound-link input,.share-link-box textarea { flex:1 1 100%!important; }.bound-inbound-link .btn,.share-link-box .btn { flex:1; min-height:44px; }
  .qrcode-container { padding:17px 12px; }.qrcode-label { font-size:14px; margin-bottom:13px; }.qrcode-image-wrapper { padding:14px; min-height:150px; }.qrcode-image-wrapper img { width:min(270px,calc(100vw - 82px)); }.qrcode-hint { font-size:11px; margin-top:13px; }.qrcode-actions { min-height:72px; }
  .quick-import-box { padding:12px; }.quick-import-box textarea { font-size:16px!important; }.quick-import-actions { gap:8px; align-items:flex-start; }.quick-import-actions p { font-size:10px; }.quick-import-actions .btn { min-height:44px; font-size:11px; }
  .socks5-card { padding:14px; margin-bottom:12px; }.socks5-meta-grid { grid-template-columns:1fr; }.socks5-link-row { flex-wrap:wrap; }.socks5-link-row input { flex-basis:100%; }.socks5-link-row .btn { flex:1; min-height:44px; }#direct-quick-modal .form-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }#direct-quick-modal .form-actions .btn { font-size:11px; padding:9px 5px; }
  .status-log { max-height:210px; }.log-item { flex-wrap:wrap; gap:3px 8px; font-size:11px; }.log-item>span:last-child { flex:1 1 160px; }.jobs-list { padding:0 14px; }.log-content { font-size:11px; }#toast-container { top:calc(var(--safe-top) + 10px); right:12px; width:calc(100vw - 24px); }.toast { padding:11px; font-size:12px; }.login-box { padding:28px 24px; }.login-box h1 { font-size:23px; }
}
@media(max-width:359px) { .header h1 { font-size:14px; }.header-title .eyebrow { display:none; }.header { gap:6px; }.launcher-trigger { padding:8px; }.launcher-trigger>span { display:none; }.account-menu>summary { min-width:50px; }.overview-grid #status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.status-item { min-height:67px; }.data-table tbody tr { padding:11px; }.card-header { padding:12px; }.section-description { max-width:130px; }.pager-actions .btn { padding:8px 6px; }.form-row { flex-wrap:wrap; }.form-row>.form-group { flex-basis:100%; } }
/* Phone landscape keeps vertical space and never reverts to a clipped desktop table. */
@media(min-width:600px) and (max-width:1024px) and (max-height:520px) {
  :root { --nav-width:calc(64px + var(--safe-left)); --header-height:60px; --modal-gap:6px; }
  .section-nav { top:0; bottom:0; left:0; right:auto; width:var(--nav-width); height:auto; padding:calc(7px + var(--safe-top)) 5px calc(7px + var(--safe-bottom)) calc(5px + var(--safe-left)); display:flex; gap:4px; border:0; border-right:1px solid var(--border); }.section-nav>a { min-height:49px; padding:4px 0; flex:0 0 auto; font-size:9px; }.section-nav>a>span:first-child { font-size:20px; }.section-nav b { right:0; }
  .header { padding:8px max(14px,var(--safe-right)) 8px 14px; min-height:60px; }.header-title .eyebrow { display:none; }.header h1 { font-size:16px; }.main { padding:14px max(12px,var(--safe-right)) calc(18px + var(--safe-bottom)) 12px; }.page-intro { margin-bottom:12px; }.page-intro h2 { font-size:19px; }.page-intro p { font-size:11px; }.refresh-stamp { display:none; }
  .overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.overview-grid .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:9px; }.overview-grid .status-item { min-height:64px; padding:8px; }.overview-grid .status-item .value { font-size:21px; }.overview-grid .card-header { min-height:59px; padding:8px 11px; }.card-header { min-height:60px; padding:10px 12px; }.section-description { display:none; }.list-toolbar { flex-wrap:nowrap; padding:9px 11px; min-height:62px; }.search-field { flex:1; }.search-field input[type=search] { font-size:14px; }.list-toolbar-meta { width:auto; flex:0 0 auto; gap:8px; }.list-toolbar-meta .list-count { display:none; }
  #inbounds-section,#landings-section { display:grid; grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr); }
  #inbounds-section>.card-header,#landings-section>.card-header { grid-column:1; padding:9px 11px; border-right:1px solid var(--border); }
  #inbounds-section>.list-toolbar,#landings-section>.list-toolbar { grid-column:2; min-width:0; padding:9px 10px; }
  .data-table-container,.table-pagination { grid-column:1/-1; }
  .data-table tbody { grid-template-columns:1fr; }.data-table-container { padding:9px; }.data-table tbody tr { padding:10px 12px; }
  .inbound-table tbody tr { grid-template-areas:"name name protocol protocol" "port traffic status exit" "actions actions actions actions"; grid-template-rows:31px 63px 55px; column-gap:12px; }
  .inbound-table .action-btns { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:44px; }.inbound-table td:nth-child(2),.inbound-table td:nth-child(4) { padding-top:3px; }
  .landing-table tbody tr { grid-template-areas:"name name state state" "ip traffic port outbound" "actions actions actions actions"; grid-template-rows:34px 54px 55px; }
  .landing-table .action-btns { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:44px; grid-template-areas:"detail exit warp direct delete"; }.landing-table .exit-ip-btn-wrap { height:44px; }
  .landing-table td:nth-child(6):before { display:none; }.landing-table td:nth-child(6) { text-align:right; }
  .section-actions-panel { max-height:calc(var(--visual-viewport-height,100dvh) - 160px); overflow:auto; }
  .modal-content { max-width:950px; border-radius:12px; scroll-padding-top:60px; scroll-padding-bottom:70px; }.modal-header { min-height:55px; padding:5px 14px; }.modal-header h3 { font-size:16px; }.modal-description { margin-top:0; font-size:10px; }.modal-content form,.modal-body { padding:15px; }.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.form-row { flex-wrap:nowrap; }.form-row>.form-group { flex-basis:auto; }.form-actions { min-height:65px; padding:9px 15px; }form>.form-actions { margin:15px -15px -15px; }.form-actions>.btn { min-height:44px; }.form-section { padding:13px; }
  #qrcode-modal .modal-content { max-width:650px; overflow:hidden; display:flex; flex-direction:column; }#qrcode-content { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; }#qrcode-modal .qrcode-container { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr 1fr; gap:8px 18px; height:100%; min-height:0; padding:12px 18px; }#qrcode-label { grid-column:1; grid-row:1; align-self:end; margin:0; font-size:16px; }#qrcode-image-container { grid-column:2; grid-row:1 / 3; padding:10px; min-height:0; }#qrcode-modal .qrcode-image-wrapper img { width:min(250px,calc(var(--modal-viewport-height) - max(6px,var(--safe-top)) - max(6px,var(--safe-bottom)) - 162px)); }#qrcode-modal .qrcode-hint { grid-column:1; grid-row:2; align-self:start; margin:0; font-size:11px; }#qrcode-modal .qrcode-actions { flex:0 0 auto; min-height:63px; padding:9px 16px; }
  #inbound-detail-modal .modal-content { max-width:880px; }.detail-quick-actions { padding:10px 16px; }#inbound-detail-content>.detail-quick-actions { top:55px; }.detail-share-section,.detail-qr-section { padding:13px 16px; }.detail-qr-section .qrcode-image-wrapper img { width:200px; }
  .deploy-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:12px; }.deploy-choice { align-items:flex-start; flex-wrap:wrap; min-height:148px; padding:13px; }.deploy-choice>span:nth-child(2) { flex:1 1 100%; }.deploy-choice>span:last-child { display:none; }.deploy-choice strong { font-size:13px; }.deploy-choice small { font-size:11px; }.deploy-launcher-content { max-width:820px; }
  .login-page { padding:12px max(20px,var(--safe-right)) 12px max(20px,var(--safe-left)); }.login-container { max-width:680px; }.login-box { display:grid; grid-template-columns:1fr 1.2fr; column-gap:28px; padding:22px 26px; }.login-mark { grid-column:1; margin-bottom:8px; }.login-box>.eyebrow,.login-box>h1,.login-box>.subtitle { grid-column:1; }.login-box>h1 { font-size:22px; }.login-box>.subtitle { margin-bottom:0; }.login-box>form { grid-column:2; grid-row:1 / 5; }.login-box>.hint { grid-column:1/-1; margin-top:10px; }.login-box>.alert { grid-column:1/-1; }.login-box .form-group { margin-bottom:12px; }
}
@media(max-height:520px) and (max-width:599px) { .modal { --modal-gap:5px; }.modal-header { min-height:55px; padding:5px 12px; }.modal-header h3 { font-size:15px; }.modal-content { scroll-padding-top:60px; }.form-actions { min-height:65px; padding:9px 14px; }.qrcode-image-wrapper img { width:min(230px,calc(var(--modal-viewport-height) - 205px)); }.login-page { align-items:flex-start; padding-top:12px; }.login-mark { margin-bottom:10px; }.login-box { padding:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*:before,*:after { animation:none!important; transition:none!important; } }