// SPDX-License-Identifier: Apache-2.0

'use strict';
'require baseclass';

const CSS = [
	'.dd-log-toolbar .dd-log-toggle[aria-pressed="true"]{background:rgba(74,160,101,.16);border-color:#4aa065;box-shadow:inset 0 0 0 1px rgba(74,160,101,.2)}',
	'.dd-log-toolbar .dd-log-toggle:focus-visible{outline:2px solid #4aa065;outline-offset:2px}',

	'.dd-wrap{padding:4px 0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}',
	'.dd-card{border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:9px 14px;margin-bottom:7px;box-shadow:0 2px 8px rgba(0,0,0,.03);background:rgba(255,255,255,.02)}',
	/* padding:0 neutralizes Argon's h4{padding:.75rem 1.25rem}, which otherwise
	   indents the title 20px past the card body and looks misaligned */
	'.dd-card-title{font-size:11px;font-weight:600;opacity:.55;margin:0 0 8px;padding:0;letter-spacing:.3px;text-transform:uppercase}',
	'.dd-status-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:0}',
	'.dd-status-row .dd-grow{flex:1 1 auto}',
	'.dd-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.3px;border:1px solid transparent;line-height:1.3}',
	'.dd-badge-run{color:#3da66a;border-color:rgba(61,166,106,.5)}',
	'.dd-badge-stop{color:#d96d6d;border-color:rgba(217,109,109,.55)}',
	'.dd-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}',
	'.dd-meta{font-size:11.5px;opacity:.7;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}',
	'.dd-meta-label{opacity:.55;margin-right:4px}',
	'.dd-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}',
	'.dd-actions .cbi-button{font-size:11.5px;padding:4px 12px;border-radius:5px}',
	'.dd-actions a.cbi-button{display:inline-flex;align-items:center;gap:4px}',
	'.dd-wrap .cbi-button{font-size:11px !important;line-height:1.4 !important;min-height:0 !important;height:auto !important;padding:4px 12px !important;border-radius:5px !important;border:1px solid rgba(128,128,128,.35) !important;background:transparent !important;color:inherit !important;box-shadow:none !important;cursor:pointer;white-space:nowrap}',
	'.dd-wrap .cbi-button:hover{background:rgba(128,128,128,.12) !important}',
	'.dd-wrap .cbi-button:disabled{opacity:.45;cursor:not-allowed}',
	'.dd-wrap .cbi-button-action,.dd-wrap .cbi-button-positive,.dd-wrap .cbi-button-add,.dd-wrap .cbi-button-edit{border-color:#4aa065 !important;color:#4aa065 !important}',
	'.dd-wrap .cbi-button-remove{border-color:#d96d6d !important;color:#d96d6d !important}',
	'.dd-wrap .cbi-button-remove:hover{background:rgba(217,109,109,.12) !important}',
	'.dd-switch{position:relative;width:42px;height:22px;border:0;border-radius:999px;background:rgba(128,128,128,.28);padding:0;cursor:pointer;transition:background .18s ease,opacity .18s ease;flex-shrink:0}',
	'.dd-switch .dd-switch-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .18s ease}',
	'.dd-switch.is-on{background:rgba(74,160,101,.65)}',
	'.dd-switch.is-on .dd-switch-knob{transform:translateX(20px)}',
	'.dd-switch:disabled{opacity:.45;cursor:not-allowed}',
	'.dd-switch-label{font-size:10.5px;font-weight:600;opacity:.62;letter-spacing:.3px}',
	'.dd-switch-wrap{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}',
	'.dd-backend-card{padding:10px 14px}',
	'.dd-backend-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}',
	'.dd-backend-label{flex:0 0 calc(200px - 10px);font-size:12px;font-weight:600;opacity:.72}',
	'.dd-backend-segment{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:7px;background:rgba(128,128,128,.10)}',
	'.dd-backend-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:78px;height:24px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:inherit;font-size:11px;font-weight:500;opacity:.65;cursor:pointer;transition:background .18s ease,color .18s ease,opacity .18s ease}',
	'.dd-backend-btn:hover{background:rgba(128,128,128,.10)}',
	'.dd-backend-btn.is-active{background:linear-gradient(#3886a1,#2f7288);color:#fff;opacity:1;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}',
	'.dd-backend-btn:disabled{opacity:.55;cursor:not-allowed}',
	'.dd-backend-state{font-size:10.5px;font-weight:500;opacity:.70;margin-left:2px}',
	'.dd-backend-btn.is-active .dd-backend-state{opacity:.85}',
	'.dd-backend-help{margin:6px 0 0 200px;font-size:11.5px;line-height:1.45;opacity:.66}',
	'.dd-backend-help:empty{display:none}',
	'html[data-daede-theme="argon"] .dd-backend-label{flex-basis:calc(240px - 10px)}',
	'html[data-daede-theme="argon"] .dd-backend-help{margin-left:240px}',
	'html[data-daede-theme="argon"]:not([data-darkmode="true"]) .dd-config-page .dd-card{background:rgba(255,255,255,.78);border-color:rgba(50,50,93,.12);box-shadow:0 2px 8px rgba(50,50,93,.06)}',
	'html[data-daede-theme="argon"]:not([data-darkmode="true"]) .dd-config-page .dd-card-title{opacity:.78}',
	'html[data-daede-theme="argon"]:not([data-darkmode="true"]) .dd-config-page .dd-settings-card .cbi-value-title{opacity:1}',
	'html[data-daede-theme="argon"]:not([data-darkmode="true"]) .dd-config-page .dd-settings-card .cbi-value-field input,html[data-daede-theme="argon"]:not([data-darkmode="true"]) .dd-config-page .dd-settings-card .cbi-value-field select,html[data-daede-theme="argon"]:not([data-darkmode="true"]) .dd-config-page .dd-settings-card .cbi-value-field textarea{background:#fff!important;border-color:rgba(50,50,93,.24)!important}',
	'html[data-daede-theme="argon"]:not([data-darkmode="true"]) .dd-config-page .dd-adv-bar{background:rgba(50,50,93,.04);border-color:rgba(50,50,93,.14);opacity:.78}',
	'@media (max-width:640px){.dd-backend-label{flex-basis:100%!important;width:100%}.dd-backend-segment{width:100%}.dd-backend-btn{flex:1;min-width:0}.dd-backend-help{margin-left:0!important}}',
	/* daed/dae settings card —— LuCI form.Map 字体/边框对齐 dd 卡片体系 */
	'.dd-settings-card{padding:10px 14px}',
	'.dd-settings-card>h2,.dd-settings-card .cbi-map>h2,.dd-settings-card .cbi-section>h3{display:none}',
	'.dd-settings-card .cbi-map>.cbi-map-descr,.dd-settings-card .cbi-section-descr{font-size:11.5px;opacity:.62;margin:0 0 8px;line-height:1.45}',
	'.dd-settings-descr{font-size:11.5px;opacity:.62;margin:0 0 8px;line-height:1.45}',
	'.dd-settings-card .cbi-section{margin:0;padding:0;background:transparent;border:0;box-shadow:none}',
	'.dd-settings-card .cbi-value{padding:6px 0;border:0;min-height:0}',
	/* Argon's .td.cbi-value-field padding + 40px .cbi-checkbox make table rows
	   too tall — tighten both for our compact subscription/node tables */
	'.dd-settings-card .cbi-section-table-row>td{padding:6px 10px !important}',
	'.dd-settings-card .cbi-section-table-row .cbi-checkbox{height:20px !important;min-height:0 !important}',
	'.dd-settings-card .cbi-value-title{font-size:12.5px !important;font-weight:500;opacity:.85;padding:6px 12px 6px 0;min-width:140px}',
	'.dd-settings-card .cbi-value-field input,.dd-settings-card .cbi-value-field select,.dd-settings-card .cbi-value-field textarea{font-size:12.5px !important;padding:5px 8px;border-radius:5px;border:1px solid rgba(128,128,128,.28);background:transparent;color:inherit}',
	'.dd-settings-card .cbi-value-field input:focus,.dd-settings-card .cbi-value-field select:focus,.dd-settings-card .cbi-value-field textarea:focus{border-color:rgba(56,134,161,.7);outline:0;box-shadow:0 0 0 2px rgba(56,134,161,.15)}',
	'.dd-settings-card .cbi-value-description,.dd-settings-card .cbi-value-helptext{font-size:11.5px !important;opacity:.6;line-height:1.45;padding-top:3px}',
	'.dd-settings-card .cbi-section-remove{background:transparent !important;border:0 !important;box-shadow:none !important}',
	'.dd-settings-card .cbi-section-remove .cbi-button{border-color:#d96d6d !important;color:#d96d6d !important}',
	/* themes (esp. Argon) restyle checkboxes into faint, near-invisible boxes;
	   force native rendering + brand accent so the checkmark is always clear */
	'.dd-settings-card input[type="checkbox"]{-webkit-appearance:checkbox !important;appearance:checkbox !important;width:16px;height:16px;background:none !important;border:0 !important;box-shadow:none !important;background-image:none !important}',
	'.dd-settings-card input[type="checkbox"]:before,.dd-settings-card input[type="checkbox"]:after{content:none !important;display:none !important}',
	/* line the Subscriptions and Nodes grid tables up column-for-column. fixed
	   layout + explicit per-column percentages make the widths authoritative
	   across themes (Argon's auto layout otherwise sizes the empty Nodes table
	   by content, and even ignores px cell widths, so they drift apart) */
	'.dd-settings-card .cbi-section-table{table-layout:fixed !important;width:100%}',
	/* flatten the table header: Argon tints header cells (#f6f9fc), which reads
	   as an off-colour band on the white card — keep it transparent */
	'.dd-settings-card .cbi-section-table-titles,.dd-settings-card .cbi-section-table-titles .cbi-section-table-cell{background:transparent !important;background-image:none !important}',
	'.dd-settings-card .cbi-section-table-cell:nth-child(1){width:14% !important}',
	'.dd-settings-card .cbi-section-table-cell:nth-child(2){width:62% !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
	'.dd-settings-card .cbi-section-table-cell:nth-child(3){width:10% !important}',
	'.dd-settings-card .cbi-section-table-cell:nth-child(4){width:auto !important;min-width:0 !important;white-space:nowrap;text-align:right}',
	/* icon row-action buttons stay narrow, never stretch to fill the cell */
	'.dd-settings-card .cbi-section-actions .cbi-button-edit,.dd-settings-card .cbi-section-actions .cbi-button-remove{width:auto !important;min-width:0 !important;display:inline-block !important;flex:0 0 auto !important}',
	/* proxy-test result coloring */
	'.dd-meta.dd-ok{color:#3da66a;font-weight:600}',
	'.dd-meta.dd-err{color:#d96d6d;font-weight:600}',
	/* 手风琴折叠组 —— 视觉与 clashoo cl-component-adv 一致 */
	'.dd-adv{margin-top:10px}',
	'.dd-adv-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;cursor:pointer;user-select:none;font-size:12px;font-weight:600;background:rgba(128,128,128,.06);border:1px solid rgba(128,128,128,.16);border-radius:7px;color:inherit;opacity:.55}',
	'.dd-adv-bar:hover{background:rgba(56,134,161,.08);opacity:1}',
	'.dd-adv-chevron{font-size:14px;font-weight:700;opacity:.55;transition:transform .2s}',
	'.dd-adv:not(.dd-closed) .dd-adv-chevron{transform:rotate(90deg)}',
	'.dd-adv-body{margin-top:8px;padding:2px 4px 4px}',
	'.dd-adv.dd-closed .dd-adv-body{display:none}',
	'.dd-editor{width:100%;min-height:460px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px;line-height:1.5;box-sizing:border-box;resize:vertical;border-radius:6px 6px 0 0}',
	/* syntax-highlight overlay: a <pre> sits behind a transparent <textarea>.
	   both share identical box metrics so glyphs line up; the textarea stays the
	   real editor (caret, selection, insert-at-cursor, jump-to-line all native) */
	'.dd-edit-wrap{position:relative}',
	'.dd-edit-wrap .dd-editor,.dd-edit-wrap .dd-hl{margin:0;padding:10px 12px;border-width:1px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px;line-height:1.5;letter-spacing:0;tab-size:4;white-space:pre;word-break:normal;overflow-x:auto;box-sizing:border-box}',
	'.dd-edit-wrap .dd-hl{position:absolute;inset:0;margin:0;overflow:hidden;border:1px solid transparent;border-radius:6px 6px 0 0;pointer-events:none;background:#f6f8fa;color:#3b4252;z-index:1}',
	/* reset Argon's code{background:var(--lighter)} so the overlay inherits the
	   pre background uniformly — otherwise a dark pre shows as side bars.
	   color:inherit so plain text follows .dd-hl (light in dark mode) instead of
	   the theme's own code{color}, which is dark and vanishes on a dark pre */
	'.dd-edit-wrap .dd-hl code{font:inherit;white-space:inherit;word-break:inherit;display:block;color:inherit !important;background:transparent !important}',
	'.dd-edit-wrap .dd-editor-hl{position:relative;z-index:2;color:transparent !important;background:transparent !important;caret-color:#2f7288;border:1px solid rgba(128,128,128,.28)}',
	'.dd-edit-wrap .dd-editor-hl::placeholder{color:rgba(128,128,128,.55)}',
	/* keep selected text transparent too — else the browser force-colors it and
	   it ghosts over the highlight pre underneath */
	'.dd-edit-wrap .dd-editor-hl::selection{background:rgba(56,134,161,.25);color:transparent}',
	'@media screen and (max-device-width:600px){.dd-edit-wrap .dd-editor,.dd-edit-wrap .dd-hl,.dd-edit-wrap .dd-hl code{font-size:16px}}',
	'.dh-c{color:#8a919a}',
	'.dh-s{color:#2a8a4a}',
	'.dh-k{color:#9a3fb5}',
	'.dh-f{color:#2f7288}',
	'.dh-o{color:#c2772a}',
	'.dh-g{color:#b0226a}',
	'html[data-darkmode="true"] .dd-edit-wrap .dd-hl,body.dark .dd-edit-wrap .dd-hl,html[data-bs-theme="dark"] .dd-edit-wrap .dd-hl{color:#c8cdd6;background:#1e2228}',
	'html[data-darkmode="true"] .dd-edit-wrap .dd-editor-hl,body.dark .dd-edit-wrap .dd-editor-hl,html[data-bs-theme="dark"] .dd-edit-wrap .dd-editor-hl{caret-color:#7fd0e8}',
	'html[data-darkmode="true"] .dh-c,body.dark .dh-c{color:#6b7280}',
	'html[data-darkmode="true"] .dh-s,body.dark .dh-s{color:#7ec699}',
	'html[data-darkmode="true"] .dh-k,body.dark .dh-k{color:#c792ea}',
	'html[data-darkmode="true"] .dh-f,body.dark .dh-f{color:#82c4dd}',
	'html[data-darkmode="true"] .dh-o,body.dark .dh-o{color:#e0a35a}',
	'html[data-darkmode="true"] .dh-g,body.dark .dh-g{color:#ec6fa8}',
	'.dd-editor-footer{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:5px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10.5px;background:rgba(128,128,128,.06);border:1px solid rgba(0,0,0,.06);border-top:0;border-radius:0 0 6px 6px;color:inherit;opacity:.78}',
	'.dd-editor-footer .dd-fb-item{display:inline-flex;align-items:center;gap:5px}',
	'.dd-editor-footer .dd-fb-key{opacity:.55}',
	'.dd-editor-footer .dd-fb-warn{color:#b07d00;font-weight:600}',
	'.dd-editor-footer .dd-fb-ok{color:#3da66a;font-weight:600}',
	'body.dark .dd-editor-footer,html[data-theme="dark"] .dd-editor-footer,html[data-bs-theme="dark"] .dd-editor-footer,html[data-darkmode="true"] .dd-editor-footer{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04)}',
	'body.dark .dd-editor-footer .dd-fb-warn,html[data-theme="dark"] .dd-editor-footer .dd-fb-warn,html[data-bs-theme="dark"] .dd-editor-footer .dd-fb-warn,html[data-darkmode="true"] .dd-editor-footer .dd-fb-warn{color:#e0b34a}',
	/* match the action buttons' size (h25 / 11px / 5px radius) for a consistent row */
	'.dd-insert-select{font-size:11px;line-height:1.4;height:25px;padding:0 10px;border-radius:5px;border:1px solid rgba(128,128,128,.35);background:transparent;color:inherit;cursor:pointer;box-sizing:border-box}',
	'.dd-insert-select:hover{border-color:rgba(56,134,161,.55)}',
	'.dd-editor-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}',
	'.dd-editor-status{margin-left:auto;font-size:11.5px;opacity:0;transition:opacity .25s ease;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}',
	'.dd-editor-status.show{opacity:1}',
	'.dd-editor-status.ok{color:#3da66a}',
	'.dd-editor-status.err{color:#d96d6d}',
	'.dd-editor-hint{font-size:11.5px;opacity:.62;line-height:1.5;margin:0 0 8px;padding:7px 10px;border-radius:6px;background:rgba(56,134,161,.06)}',
	'.dd-editor-hint b{font-weight:600;opacity:.85}',
		'.dd-sub-card{margin:0 0 10px;padding:10px 14px;border:0;border-radius:8px;background:transparent}',
		'.dd-sub-card-title{font-size:11px;font-weight:600;opacity:.55;margin:0 0 8px;letter-spacing:.3px;text-transform:uppercase}',
		'.dd-sub-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}',
		'.dd-sub-row input{flex:1;min-width:200px;font-size:12px;padding:6px 10px;border-radius:5px;border:1px solid rgba(128,128,128,.28);background:transparent;color:var(--text-color,inherit)}',
		'.dd-sub-row input:focus{border-color:rgba(74,160,101,.55);outline:0;box-shadow:0 0 0 2px rgba(74,160,101,.12)}.dd-sub-row input::placeholder{opacity:.45;color:rgba(92,102,120,.8)}',
		'.dd-sub-apply{font-size:11px;padding:5px 14px;border-radius:5px;border:1px solid #4aa065;color:#4aa065;background:transparent;cursor:pointer;white-space:nowrap;font-weight:600}',
		'.dd-sub-apply:hover{background:rgba(74,160,101,.12)}',
		'.dd-sub-apply:disabled{opacity:.45;cursor:not-allowed}',
		'.dd-sub-status{font-size:11px;margin-left:8px;opacity:0;transition:opacity .2s;white-space:nowrap}',
		'.dd-sub-status.show{opacity:1}',
	'.dd-ph-warn{display:none;font-size:12px;line-height:1.6;margin:0 0 8px;padding:10px 12px;border-radius:6px;background:rgba(217,158,0,.08);color:inherit}',
	'.dd-ph-warn.show{display:block}',
	'.dd-ph-warn-title{font-weight:600;margin-bottom:6px;color:#b07d00;font-size:12.5px}',
	'body.dark .dd-ph-warn-title,html[data-theme="dark"] .dd-ph-warn-title,html[data-bs-theme="dark"] .dd-ph-warn-title,html[data-darkmode="true"] .dd-ph-warn-title{color:#e0b34a}',
	'.dd-ph-howto{margin:4px 0 8px;opacity:.85}',
	'.dd-ph-howto code{padding:1px 5px;border-radius:3px;background:rgba(128,128,128,.18);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}',
	'.dd-ph-list{margin:6px 0 0;padding:6px 0 0;list-style:none;border-top:1px dashed rgba(217,158,0,.3)}',
	'.dd-ph-list-label{font-size:11px;opacity:.6;margin:0 0 4px}',
	'.dd-ph-list li{padding:2px 0;display:flex;gap:8px;align-items:baseline;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px}',
	'.dd-ph-list .dd-ph-ln{display:inline-block;min-width:38px;text-align:center;padding:1px 4px;border-radius:3px;background:rgba(217,158,0,.18);color:#8a6300;opacity:.95;cursor:pointer;font-weight:600;text-decoration:none}',
	'.dd-ph-list .dd-ph-ln:hover{background:rgba(217,158,0,.32)}',
	'body.dark .dd-ph-list .dd-ph-ln,html[data-theme="dark"] .dd-ph-list .dd-ph-ln,html[data-bs-theme="dark"] .dd-ph-list .dd-ph-ln,html[data-darkmode="true"] .dd-ph-list .dd-ph-ln{color:#f0c763;background:rgba(217,158,0,.22)}',
	'.dd-ph-list .dd-ph-txt{opacity:.7;word-break:break-all}',
	'body.dark .dd-card,html[data-theme="dark"] .dd-card,html[data-bs-theme="dark"] .dd-card,html[data-darkmode="true"] .dd-card{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}',
	'body.dark .dd-adv-bar,html[data-theme="dark"] .dd-adv-bar,html[data-bs-theme="dark"] .dd-adv-bar,html[data-darkmode="true"] .dd-adv-bar{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}',
	'body.dark .dd-settings-card .cbi-value-field input,body.dark .dd-settings-card .cbi-value-field select,body.dark .dd-settings-card .cbi-value-field textarea,html[data-theme="dark"] .dd-settings-card .cbi-value-field input,html[data-theme="dark"] .dd-settings-card .cbi-value-field select,html[data-theme="dark"] .dd-settings-card .cbi-value-field textarea,html[data-bs-theme="dark"] .dd-settings-card .cbi-value-field input,html[data-bs-theme="dark"] .dd-settings-card .cbi-value-field select,html[data-bs-theme="dark"] .dd-settings-card .cbi-value-field textarea,html[data-darkmode="true"] .dd-settings-card .cbi-value-field input,html[data-darkmode="true"] .dd-settings-card .cbi-value-field select,html[data-darkmode="true"] .dd-settings-card .cbi-value-field textarea{border-color:rgba(255,255,255,.18)}',
	/* No prefers-color-scheme dark block: OS dark mode must NOT force a dark
	   editor when the user picked a LIGHT theme. Dark styling is driven solely
	   by data-darkmode (config.js reads the real page background). */
	/* status card line-2 meta (backend · pid), below the badge+toggle line */
	'.dd-status-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}',
	/* compact icon-only row actions — the 编辑/删除 text buttons are too wide
	   (esp. Bootstrap); show a pencil / trash glyph instead, both themes */
	'.dd-settings-card .cbi-section-actions .cbi-button-edit,.dd-settings-card .cbi-section-actions .cbi-button-remove{font-size:0 !important;padding:4px 7px !important;min-width:0 !important}',
	'.dd-settings-card .cbi-section-actions .cbi-button-edit::before{content:"\\270E";font-size:13px;line-height:1}',
	'.dd-settings-card .cbi-section-actions .cbi-button-remove::before{content:"\\1F5D1\\FE0E";font-size:13px;line-height:1}',
	/* phone: keep each subscription/node row on ONE line; the URL cell
	   middle-ellipsizes (via ellipsisCell) and flex-shrinks to fit the screen */
	'@media (max-width:600px){',
	'.dd-settings-card .cbi-section-table-titles{display:none !important}',
	/* drop table layout so flex rows are constrained to the card width and the
	   URL cell can actually shrink (a flex <tr> inside table-layout:fixed grows
	   past the table and overflows the screen on narrow/Argon) */
	'.dd-settings-card .cbi-section-table{display:block !important;table-layout:auto !important;width:auto !important;overflow:visible !important}',
	'.dd-settings-card .cbi-section-table>tbody,.dd-settings-card .cbi-section-table>div{display:block !important;width:auto !important}',
	'.dd-settings-card .cbi-section-table-row{display:flex !important;flex-wrap:nowrap !important;width:auto !important;align-items:center;gap:6px;padding:5px 0;margin:0;border:0;border-bottom:1px solid rgba(128,128,128,.15);background:transparent}',
	/* target the real cells (td.cbi-value-field / actions) — LuCI forces them
	   block+full-width at mobile, so override on the direct children */
	'.dd-settings-card .cbi-section-table-row>td{display:inline-block !important;align-self:center !important;width:auto !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0 !important}',
	'.dd-settings-card .cbi-section-table-row>td::before{content:none !important;display:none !important}',
	'.dd-settings-card .cbi-section-table-row>td input{vertical-align:middle !important;margin:0 !important}',
	'.dd-settings-card .cbi-section-table-row>td:nth-child(1){flex:0 0 auto !important;max-width:60px;opacity:.6;font-size:11px}',
	'.dd-settings-card .cbi-section-table-row>td:nth-child(2){flex:1 1 auto !important}',
	'.dd-settings-card .cbi-section-table-row>td:nth-child(3){flex:0 0 auto !important;text-align:center}',
	'.dd-settings-card .cbi-section-table-row>td.cbi-section-actions{flex:0 0 auto !important;display:flex;gap:4px}',
	/* clear the floated title so a Flag description gets the full row width
	   instead of wrapping around it (e.g. "局域网 / 私有地址不走代理。") */
	'.dd-settings-card .cbi-value-description,.dd-settings-card .cbi-value-helptext{clear:both;width:100%}',
	'}',
	'.dd-converter{width:100%!important;max-width:1180px;margin:0 auto}',
	'.dd-conv-card{padding:18px 20px;margin-bottom:12px}',
	'.dd-conv-url-row{display:grid;grid-template-columns:minmax(280px,1fr) 230px max-content;align-items:center;gap:8px}',
	'.dd-conv-import,.dd-conv-toolbar,.dd-conv-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap}',
	'.dd-converter input,.dd-converter select,.dd-converter .cbi-button{box-sizing:border-box!important;height:32px!important;min-height:32px!important;margin:0!important;font-size:12px!important;line-height:22px!important}',
	'.dd-converter input,.dd-converter select{padding:4px 8px!important;border:1px solid rgba(128,128,128,.28)!important;border-radius:6px!important;background-color:transparent;color:inherit;box-shadow:none!important}',
		'.dd-converter input::placeholder,.dd-conv-yaml::placeholder,.dd-conv-filter::placeholder,.dd-conv-airport-name::placeholder{color:inherit;opacity:.55}',
	'.dd-converter select{padding-right:28px!important}',
	'.dd-converter .cbi-button{padding:4px 12px!important}',
	'.dd-conv-url-row input,.dd-conv-filter,.dd-conv-target,.dd-conv-ua,.dd-conv-yaml{box-sizing:border-box;border:1px solid rgba(128,128,128,.28);border-radius:6px;background:transparent;color:inherit;font-size:12px;padding:7px 9px}',
	'.dd-conv-url-row input{width:100%;min-width:0}',
	'.dd-conv-ua{width:230px;max-width:230px}',
	'.dd-conv-yaml{width:100%;min-height:150px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.5}',
	'.dd-conv-or{text-align:center;font-size:11px;opacity:.5;margin:7px 0}',
	'.dd-conv-heading{justify-content:space-between;gap:10px;margin-bottom:10px}',
	'.dd-conv-heading .dd-card-title{margin:0}',
	'.dd-conv-summary{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 10px;font-size:11px;font-variant-numeric:tabular-nums}',
	'.dd-conv-summary-item{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;color:inherit;opacity:.62}',
	'.dd-conv-summary-item strong{font-size:12px;font-weight:650;opacity:1;color:inherit}',
	'.dd-conv-summary-label{font-size:10.5px}',
	'.dd-conv-toolbar{margin-bottom:8px}',
	'.dd-conv-filter{margin-left:auto;min-width:220px}',
	'.dd-conv-results{border:1px solid rgba(128,128,128,.18);border-radius:7px;max-height:420px;overflow:auto}',
	'.dd-conv-empty{display:flex;align-items:center;justify-content:center;min-height:72px;padding:16px;text-align:center;font-size:11.5px;opacity:.48}',
	'.dd-conv-result{display:grid;grid-template-columns:22px minmax(100px,1fr) 90px minmax(130px,1.3fr);gap:8px;align-items:center;padding:7px 9px;border-bottom:1px solid rgba(128,128,128,.13);font-size:12px}',
	'.dd-conv-result:last-child{border-bottom:0}',
	'.dd-conv-result input{appearance:checkbox !important;-webkit-appearance:checkbox !important;accent-color:#4aa065;width:15px;height:15px}',
	'.dd-conv-name,.dd-conv-result-state{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
	'.dd-conv-proto{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;opacity:.7}',
	'.dd-conv-result-state.good,.dd-conv-status.ok{color:#3da66a}',
	'.dd-conv-result-state.dup{opacity:.55}',
	'.dd-conv-result-state.bad,.dd-conv-status.err{color:#d96d6d}',
	'.dd-conv-import label{font-size:12px;font-weight:600;opacity:.72}',
	'.dd-conv-airport{display:grid;grid-template-columns:max-content minmax(240px,420px) max-content 130px;gap:8px;align-items:center;margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid rgba(128,128,128,.15)}',
	'.dd-conv-airport .dd-conv-target,.dd-conv-airport-name{box-sizing:border-box;width:100% !important;min-width:0 !important;height:32px !important;min-height:32px !important;margin:0 !important;padding:4px 8px !important;border:1px solid rgba(128,128,128,.28);border-radius:6px;background-color:transparent;color:inherit;font-size:12px !important;line-height:22px !important;box-shadow:none}',
	'.dd-conv-airport-name{max-width:420px}',
	'.dd-conv-group-summary{margin:2px 0 10px;padding:9px 11px;border-left:3px solid rgba(74,160,101,.65);border-radius:3px;background:rgba(74,160,101,.07);font-size:12px;line-height:1.5}',
	'.dd-conv-group-summary.err{border-left-color:#d96d6d;background:rgba(217,109,109,.07);color:#d96d6d}',
	'.dd-conv-submit{justify-content:flex-end}',
	'.dd-conv-import .cbi-button{margin-left:auto}',
	'.dd-conv-status{margin-top:9px;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;min-height:16px}',
	'.dd-daed-login{box-sizing:border-box;width:min(560px,100%);margin:0 auto}',
	'.dd-daed-login .cbi-value{display:grid!important;grid-template-columns:110px minmax(0,1fr)!important;gap:12px;align-items:center;padding:6px 0!important}',
	'.dd-daed-login .cbi-value-title,.dd-daed-login .cbi-value-field{box-sizing:border-box;width:auto!important;min-width:0!important;margin:0!important;padding:0!important}',
	'.dd-daed-login .cbi-value-field input{box-sizing:border-box;width:100%!important;max-width:none!important;min-width:0!important;height:36px!important;margin:0!important;padding:6px 10px!important}',
	'.dd-daed-login-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}',
	'@media(max-width:640px){.dd-conv-card{padding:14px}.dd-conv-heading{align-items:flex-start}.dd-conv-heading .dd-card-title{width:100%}.dd-conv-summary{justify-content:flex-start;width:100%;gap:5px 12px;padding-top:2px}.dd-conv-summary-item{min-width:74px}.dd-conv-filter{margin-left:0;width:100%}.dd-conv-result{grid-template-columns:20px minmax(90px,1fr) 68px}.dd-conv-result-state{grid-column:2/4;font-size:11px}.dd-conv-submit .cbi-button{width:100%!important}.dd-conv-airport{grid-template-columns:82px minmax(0,1fr)}.dd-conv-airport>*{max-width:none !important}.dd-conv-url-row{grid-template-columns:1fr}.dd-conv-url-row input,.dd-conv-url-row .dd-conv-ua,.dd-conv-url-row .cbi-button{width:100%;max-width:none}.dd-daed-login .cbi-value{grid-template-columns:1fr!important;gap:4px}.dd-daed-login-actions .cbi-button{flex:1 1 0}}'
].join('');

return baseclass.extend({ CSS: CSS });