:root { --bg:#f4f6f8; --panel:#fff; --ink:#17212b; --muted:#6d7784; --line:#dde3e8; --dark:#101923; --cyan:#087e8b; --cyan-soft:#e1f5f5; --amber:#c88112; --amber-soft:#fff3dd; --green:#23805b; --green-soft:#e5f5eb; --violet:#6d5bb5; --violet-soft:#eeebfb; --danger:#b74b4b; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; } button,input,textarea,select { font:inherit; } button { cursor:pointer; } .topbar { height:66px; background:var(--dark); color:#fff; display:flex; align-items:center; padding:0 26px; gap:30px; position:sticky; top:0; z-index:5; } .brand { display:flex; align-items:center; color:#fff; text-decoration:none; min-width:245px; gap:10px; } .brand-emblem { width:34px; height:34px; display:grid; place-items:center; } .brand-emblem img { display:block; width:100%; height:100%; object-fit:contain; } .brand strong { display:block; font-size:15px; letter-spacing:0; } .brand small { display:block; margin-top:2px; color:#95a5b4; font-size:8px; letter-spacing:1.3px; } .project-summary { color:#d4dde4; font-size:13px; display:flex; align-items:center; gap:9px; flex:1; } .status-dot { width:8px; height:8px; background:#45c28a; border-radius:50%; box-shadow:0 0 0 3px #45c28a26; } .separator { height:15px; width:1px; background:#50606f; } .top-actions { display:flex; align-items:center; gap:8px; } .button,.icon-button { border:1px solid transparent; border-radius:5px; transition:background .15s,border-color .15s,transform .15s; } .button { min-height:36px; padding:0 14px; font-weight:650; font-size:13px; } .button:active,.icon-button:active { transform:translateY(1px); } .button.primary { background:var(--cyan); color:white; } .button.primary:hover { background:#076e79; } .button.secondary { border-color:#c9d1d8; background:#fff; color:#2a3947; } .button.secondary:hover { background:#f0f3f5; } .button.wide { width:100%; margin-top:17px; } .icon-button { width:32px; height:32px; background:transparent; color:#c6d0d9; font-size:21px; } .icon-button:hover { background:#293744; color:#fff; }
.app-shell { display:flex; min-height:calc(100vh - 66px); } .sidebar { width:230px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; flex-shrink:0; } .sidebar-heading { color:#93a0ab; padding:25px 19px 9px; text-transform:uppercase; font-size:10px; font-weight:750; letter-spacing:1px; } .sidebar-heading.spacing { padding-top:26px; } .nav-list { display:grid; gap:2px; padding:0 10px; } .nav-item { border:0; background:transparent; color:#536270; height:38px; border-radius:4px; text-align:left; padding:0 10px; display:flex; align-items:center; gap:12px; font-size:13px; } .nav-item span { color:#778694; width:15px; text-align:center; font-size:15px; } .nav-item b { margin-left:auto; font-size:11px; background:#edf1f3; color:#6d7a84; padding:2px 6px; border-radius:10px; } .nav-item:hover { background:#f2f5f6; color:#1e2c38; } .nav-item.active { background:#e4f4f4; color:#087580; font-weight:700; } .nav-item.active span { color:#087e8b; } .nav-item.active b { background:#c9e9e9; color:#087580; }.sidebar-footer { margin-top:auto; border-top:1px solid var(--line); padding:16px 19px; display:grid; gap:7px; color:#81909b; font-size:11px; }.version-chip { color:#5c6872; font-weight:700; font-size:10px; letter-spacing:.7px; }
.content { flex:1; min-width:0; padding:38px clamp(22px,4vw,62px); overflow:auto; }.view { display:none; max-width:1280px; margin:auto; }.view.active { display:block; }.page-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:29px; }.page-heading h1 { font-size:27px; letter-spacing:0; margin:3px 0 7px; font-weight:720; }.page-heading p:not(.eyebrow) { margin:0; font-size:14px; color:var(--muted); }.eyebrow { color:#16818a; text-transform:uppercase; letter-spacing:1.2px; font-size:10px; font-weight:800; margin:0; }.heading-actions { display:flex; gap:9px; flex-shrink:0; }.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }.stat-card { background:var(--panel); border:1px solid var(--line); min-height:104px; padding:20px; display:flex; align-items:center; gap:14px; border-radius:5px; }.stat-card strong { display:block; font-size:26px; line-height:1; font-weight:720; }.stat-card span:not(.stat-icon) { display:block; margin-top:6px; font-size:12px; color:var(--muted); }.stat-icon,.quick-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:5px; font-size:18px; font-weight:700; }.cyan { background:var(--cyan-soft); color:var(--cyan); }.amber { background:var(--amber-soft); color:var(--amber); }.green { background:var(--green-soft); color:var(--green); }.violet { background:var(--violet-soft); color:var(--violet); }.overview-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }.panel { border:1px solid var(--line); background:#fff; border-radius:5px; }.activity-panel,.quick-panel { min-height:290px; }.panel-title { padding:19px 20px 16px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; }.panel-title h2,.panel h2 { font-size:15px; margin:0 0 4px; }.panel-title p { margin:0; color:var(--muted); font-size:12px; }.text-button { border:0; color:#087e8b; background:transparent; font-size:12px; font-weight:700; }.recent-item { width:100%; appearance:none; border:0; border-bottom:1px solid #edf0f2; background:transparent; color:inherit; display:grid; grid-template-columns:27px minmax(0,1fr) max-content; align-items:center; gap:11px; padding:14px 20px; text-align:left; }.recent-item:hover { background:#f4f7f8; }.recent-item:focus-visible { outline:2px solid var(--cyan); outline-offset:-2px; }.recent-item:last-child { border-bottom:0; }.file-dot { width:27px; height:27px; display:grid; place-items:center; border-radius:4px; font-size:11px; font-weight:800; }.recent-main { min-width:0; }.recent-main strong { display:block; font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.recent-main small { display:block; overflow:hidden; color:var(--muted); font-size:11px; white-space:nowrap; text-overflow:ellipsis; }.recent-time { color:#8a969f; font-size:11px; white-space:nowrap; }.empty { padding:35px 20px; color:var(--muted); font-size:13px; text-align:center; }.quick-list { padding:8px; }.quick-action { width:100%; background:transparent; border:0; display:flex; align-items:center; text-align:left; gap:12px; padding:11px; border-radius:4px; }.quick-action:hover { background:#f4f7f8; }.quick-action b { display:block; font-size:13px; }.quick-action small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }.quick-action i { font-style:normal; margin-left:auto; color:#9ba6ae; font-size:22px; }.quick-icon { width:32px; height:32px; font-size:14px; flex-shrink:0; }
.collection-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }.collection-header h1 { font-size:26px; margin:4px 0; }.collection-header p:not(.eyebrow) { margin:0; color:var(--muted); font-size:13px; }.filter-bar { display:flex; gap:10px; margin-bottom:12px; }.filter-bar input { width:280px; max-width:100%; border:1px solid #cbd4db; background:#fff; border-radius:4px; height:36px; padding:0 11px; outline:0; }.filter-bar input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px #087e8b16; }.table-panel { overflow:hidden; }.file-table { width:100%; border-collapse:collapse; }.file-table th { background:#f7f9fa; color:#71808c; font-size:10px; text-align:left; padding:11px 16px; letter-spacing:.8px; text-transform:uppercase; }.file-table td { padding:13px 16px; border-top:1px solid #e9edef; font-size:13px; }.file-table tr[data-path] { cursor:pointer; }.file-table tr[data-path]:hover td { background:#f5faf9; }.path-cell { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; color:#33424e; font-size:12px!important; }.type-label { display:inline-block; min-width:48px; text-align:center; padding:3px 6px; border-radius:3px; font-size:10px; font-weight:800; }.muted { color:var(--muted); font-size:12px; }.file-actions { white-space:nowrap; }.row-button { color:#087e8b; border:0; background:transparent; font-weight:700; font-size:12px; padding:3px 5px; }.row-button.danger { color:var(--danger); }
.converter-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:18px; }.convert-panel,.mapping-panel { padding:23px; }.loader-switch { display:grid; grid-template-columns:1fr 1fr; border:1px solid #cbd4db; border-radius:5px; padding:3px; margin-top:17px; }.loader-switch button { border:0; border-radius:3px; height:36px; background:transparent; color:#667581; font-weight:700; font-size:13px; }.loader-switch button.active { background:#e1f3f3; color:#087e8b; }.support-note,.notice { color:var(--muted); font-size:12px; line-height:1.7; margin:17px 0 0; }.mapping-row { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid #e8edf0; color:#53616d; font-size:13px; }.mapping-row b { color:#23805b; font-size:11px; }.mapping-row .warn-text { color:#b36f0d; }.notice { border-left:3px solid #dfaa4a; background:#fff9ee; padding:10px 12px; margin-top:17px; }.validation-summary { padding:17px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; font-size:13px; font-weight:700; }.log-list { min-height:180px; }.log-entry { display:flex; gap:10px; padding:12px 20px; border-bottom:1px solid #edf0f2; font-size:12px; line-height:1.5; }.log-entry .log-badge { width:17px; flex:0 0 17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:900; }.log-entry.info .log-badge { background:#e1f5f5; color:#087e8b; }.log-entry.warn .log-badge { background:#fff3dd; color:#a8690c; }.log-entry.error .log-badge { background:#fae6e6; color:#ac4141; }.log-entry.success .log-badge { background:#e4f4ea; color:#237c58; }.log-entry code { color:#4c5a66; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.editor-dialog { width:min(830px,calc(100vw - 30px)); padding:0; border:1px solid #cdd5db; border-radius:7px; box-shadow:0 18px 60px #15233145; color:var(--ink); }.editor-dialog::backdrop { background:#0d1721a8; }.editor-dialog form { margin:0; }.editor-dialog header,.editor-dialog footer { display:flex; align-items:center; justify-content:space-between; padding:15px 19px; border-bottom:1px solid var(--line); }.editor-dialog header h2 { font-size:17px; margin:4px 0 0; }.editor-dialog header .icon-button { color:#5c6a75; }.editor-dialog header .icon-button:hover { background:#edf1f3; color:#17212b; }.dialog-body { padding:18px 19px; display:grid; gap:15px; }.dialog-body label { display:grid; color:#586774; gap:6px; font-size:12px; font-weight:700; }.dialog-body input,.dialog-body select,.dialog-body textarea { border:1px solid #cbd4db; border-radius:4px; color:#23313c; background:#fff; padding:9px 10px; outline:0; font-weight:400; }.dialog-body input:focus,.dialog-body select:focus,.dialog-body textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px #087e8b15; }.dialog-body textarea { min-height:380px; resize:vertical; line-height:1.55; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:2; }.editor-dialog footer { border-top:1px solid var(--line); border-bottom:0; gap:8px; justify-content:flex-end; }.form-error { color:#b33939; background:#fff1f1; border-left:3px solid #d75a5a; margin:0; padding:8px 10px; font-weight:500; }.small-dialog { width:min(480px,calc(100vw - 30px)); }.small-dialog .dialog-body { gap:13px; }.lock-screen { position:fixed; inset:0; z-index:20; background:#0d1620e8; display:grid; place-items:center; padding:20px; }.lock-screen[hidden] { display:none; }.lock-panel { background:#fff; width:min(420px,100%); text-align:center; padding:38px; border-radius:7px; box-shadow:0 20px 60px #0006; }.lock-mark { background:#fff0d8; color:#b87008; width:45px; height:45px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; font-weight:900; font-size:23px; }.lock-panel h1 { margin:0 0 10px; font-size:19px; }.lock-panel p { color:var(--muted); font-size:13px; line-height:1.7; margin:0 0 20px; }.toast { position:fixed; z-index:30; bottom:22px; left:50%; transform:translate(-50%,15px); opacity:0; pointer-events:none; background:#182631; color:#fff; padding:10px 14px; box-shadow:0 7px 18px #0003; border-radius:4px; font-size:13px; transition:.18s; }.toast.show { opacity:1; transform:translate(-50%,0); }
.editor-page { max-width:none; }.editor-page-header { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:16px; }.editor-page-heading h1 { margin:4px 0 13px; font-size:23px; letter-spacing:0; }.editor-page-heading label { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:700; }.editor-page-heading input { width:min(620px,60vw); border:1px solid #cbd4db; border-radius:4px; background:#fff; color:#23313c; padding:8px 9px; font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }.editor-page-actions { display:flex; gap:8px; flex-shrink:0; }.editor-workbench { display:grid; grid-template-columns:minmax(380px,1fr) minmax(400px,1fr); border:1px solid var(--line); background:var(--panel); min-height:calc(100vh - 240px); }.editor-pane { min-width:0; display:flex; flex-direction:column; }.editor-pane + .editor-pane { border-left:1px solid var(--line); }.editor-pane > header { min-height:45px; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid var(--line); background:#f7f9fa; }.editor-pane h2 { margin:0; color:#65747f; font-size:11px; letter-spacing:1px; text-transform:uppercase; }.editor-pane-body { flex:1; min-height:0; overflow:auto; padding:16px; }.code-pane .editor-pane-body { padding:0; display:flex; }.code-pane textarea { width:100%; min-height:100%; border:0; resize:none; outline:0; padding:16px; background:#17212b; color:#d8e3eb; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:2; }.editor-page > .form-error { margin-top:12px; }.editor-page .visual-editor { min-height:100%; }
@media (max-width:900px) { .sidebar { width:64px; }.sidebar-heading,.nav-item:not(.active)::after,.nav-item b,.sidebar-footer { display:none; }.nav-list { padding:10px; }.nav-item { justify-content:center; padding:0; }.nav-item span { width:auto; }.nav-item.active { font-size:0; }.nav-item.active span { font-size:15px; }.brand { min-width:auto; }.project-summary { display:none; }.stats-grid { grid-template-columns:repeat(2,1fr); }.overview-grid,.converter-layout { grid-template-columns:1fr; }.content { padding:28px 25px; } }
@media (max-width:600px) { .topbar { padding:0 14px; height:58px; }.brand strong { font-size:13px; }.brand small { display:none; }.top-actions { margin-left:auto; }.app-shell { min-height:calc(100vh - 58px); }.sidebar { width:52px; }.content { padding:24px 14px; }.page-heading,.collection-header { display:block; }.heading-actions { margin-top:17px; }.stats-grid { gap:9px; }.stat-card { min-height:80px; padding:13px; gap:9px; }.stat-card strong { font-size:22px; }.stat-icon { width:30px; height:30px; }.filter-bar input { width:100%; }.file-table th:nth-child(3),.file-table td:nth-child(3),.file-table th:nth-child(4),.file-table td:nth-child(4) { display:none; }.dialog-body textarea { min-height:300px; }.top-actions .icon-button { display:none; } }

.nav-item em { font-style:normal; }.language-select { appearance:none; height:32px; padding:0 22px 0 9px; border:1px solid #40505e; border-radius:4px; background:#17232e; color:#dce6ed; font-size:12px; font-weight:700; cursor:pointer; }.language-select:hover { background:#23313e; }
html[data-theme="dark"] { --bg:#111922; --panel:#19232d; --ink:#e6edf2; --muted:#a5b2bd; --line:#31404c; --cyan:#2aaeb4; --cyan-soft:#18383c; --amber:#e0a53b; --amber-soft:#3d311c; --green:#56bd8c; --green-soft:#1b3a2b; --violet:#9b8cdb; --violet-soft:#302b49; --danger:#e17676; color-scheme:dark; }
html[data-theme="dark"] body { background:var(--bg); } html[data-theme="dark"] .sidebar,html[data-theme="dark"] .panel,html[data-theme="dark"] .stat-card,html[data-theme="dark"] .editor-dialog,html[data-theme="dark"] .dialog-body input,html[data-theme="dark"] .dialog-body select,html[data-theme="dark"] .dialog-body textarea,html[data-theme="dark"] .filter-bar input { background:var(--panel); color:var(--ink); border-color:var(--line); } html[data-theme="dark"] .sidebar-footer,html[data-theme="dark"] .panel-title,html[data-theme="dark"] .editor-dialog header,html[data-theme="dark"] .editor-dialog footer,html[data-theme="dark"] .validation-summary { border-color:var(--line); } html[data-theme="dark"] .nav-item { color:#bcc8d1; } html[data-theme="dark"] .nav-item:hover,html[data-theme="dark"] .quick-action:hover,html[data-theme="dark"] .file-table tr[data-path]:hover td { background:#24313c; } html[data-theme="dark"] .nav-item.active { background:#193a3d; color:#75d7d8; } html[data-theme="dark"] .nav-item b { background:#2b3944; color:#c7d2d9; } html[data-theme="dark"] .button.secondary,html[data-theme="dark"] .file-table th { background:#202c36; color:#d9e4eb; border-color:#40505d; } html[data-theme="dark"] .button.secondary:hover { background:#293844; } html[data-theme="dark"] .file-table td,html[data-theme="dark"] .recent-item,html[data-theme="dark"] .mapping-row,html[data-theme="dark"] .log-entry { border-color:#293741; } html[data-theme="dark"] .path-cell { color:#c8d4dc; } html[data-theme="dark"] .notice { background:#352d1f; } html[data-theme="dark"] .lock-panel { background:var(--panel); color:var(--ink); } html[data-theme="dark"] .form-error { background:#3b2225; } html[data-theme="dark"] .empty { color:var(--muted); }
html[data-theme="dark"] .editor-page-heading input { background:#202c36; color:#e5edf2; border-color:#40505d; } html[data-theme="dark"] .editor-pane > header { background:#202c36; border-color:var(--line); } html[data-theme="dark"] .editor-pane h2 { color:#b5c2cc; }

.project-button { background:#243440; color:#e6f0f3; border-color:#40515d; }.project-button:hover { background:#304450; }.projects-dialog { width:min(620px,calc(100vw - 30px)); }.projects-note { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }.project-list { border:1px solid var(--line); border-radius:5px; overflow:auto; max-height:240px; }.project-row { width:100%; border:0; border-bottom:1px solid var(--line); background:var(--panel); color:var(--ink); text-align:left; padding:11px 13px; display:flex; align-items:center; gap:10px; }.project-row:last-child { border-bottom:0; }.project-row:hover { background:#f4f8f9; }.project-row.selected { background:#e6f5f5; }.project-row-mark { color:var(--cyan); font-size:13px; }.project-row strong,.project-row small { display:block; }.project-row strong { font-size:13px; }.project-row small { margin-top:3px; color:var(--muted); font-size:11px; }.project-row em { margin-left:auto; color:var(--cyan); font-size:10px; font-style:normal; font-weight:800; }.project-actions { display:flex; gap:8px; flex-wrap:wrap; }.danger-button { border:1px solid #d58a8a; border-radius:5px; background:#fff; color:#a93d3d; padding:0 12px; font-weight:650; font-size:13px; }.danger-button:hover { background:#fff0f0; } html[data-theme="dark"] .project-row { background:var(--panel); color:var(--ink); border-color:var(--line); } html[data-theme="dark"] .project-row:hover { background:#24313c; } html[data-theme="dark"] .project-row.selected { background:#193a3d; } html[data-theme="dark"] .danger-button { background:#382326; border-color:#a85858; color:#f1aaaa; }
.editor-mode { display:flex; border-bottom:1px solid var(--line); gap:4px; }.mode-button { border:0; background:transparent; color:var(--muted); padding:7px 11px; font-size:12px; font-weight:750; }.mode-button.active { color:var(--cyan); border-bottom:2px solid var(--cyan); }.visual-editor { min-height:260px; }.visual-form { display:grid; grid-template-columns:1fr; gap:13px; }.visual-field { display:grid; gap:6px; color:#586774; font-size:12px; font-weight:700; }.visual-field input,.visual-field select,.visual-field textarea { width:100%; border:1px solid #cbd4db; border-radius:4px; background:#fff; color:#23313c; padding:8px 9px; font-weight:400; }.visual-field textarea { min-height:92px; resize:vertical; font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }.visual-field.checkbox-field { display:flex; align-items:center; gap:8px; padding-top:24px; }.checkbox-field input { width:15px; height:15px; accent-color:var(--cyan); }.list-field { grid-column:1 / -1; }.list-values { display:grid; gap:6px; }.list-values > div { display:flex; gap:6px; }.list-values button { width:30px; border:1px solid #d59a9a; background:#fff5f5; color:#aa4444; border-radius:4px; }.visual-field .invalid { border-color:#c54646; background:#fff4f4; }.visual-field:focus-within > span { color:var(--cyan); } html[data-theme="dark"] .visual-field { color:#b5c2cc; } html[data-theme="dark"] .visual-field input,html[data-theme="dark"] .visual-field select,html[data-theme="dark"] .visual-field textarea { background:#202c36; color:#e5edf2; border-color:#40505d; } html[data-theme="dark"] .list-values button { background:#382326; border-color:#a85858; color:#f1aaaa; } html[data-theme="dark"] .visual-field .invalid { background:#44272a; border-color:#db6666; }
.optional-field,.optional-boolean { align-content:start; border:1px solid var(--line); border-radius:4px; padding:8px 9px; }.optional-field.enabled,.optional-boolean:has(input:checked) { border-color:#9bc9cc; }.optional-toggle,.optional-boolean,.checkbox-control { display:flex; align-items:center; gap:8px; min-height:20px; cursor:pointer; }.optional-toggle input,.optional-boolean input,.checkbox-control input { width:15px; height:15px; margin:0; accent-color:var(--cyan); }.optional-control { margin-top:8px; }.component-controls { display:grid; grid-template-columns:1fr; gap:7px; }.nested-list { display:grid; gap:9px; }.nested-list-entry { position:relative; }.nested-remove { position:absolute; z-index:1; top:9px; right:9px; width:25px; height:25px; border:1px solid #d59a9a; border-radius:4px; background:#fff5f5; color:#aa4444; }.nested-field .nested-field { margin-top:9px; }.nested-type { display:grid; grid-template-columns:1fr; gap:5px; margin-top:10px; color:var(--muted); font-size:11px; }.nested-field .optional-field { min-width:0; }.nested-fields > .visual-field { min-width:0; }.nested-fields > .nested-field { grid-column:1 / -1; }.nested-fields .component-controls { grid-template-columns:1fr; }.nested-fields .optional-toggle,.nested-fields .optional-boolean { font-size:11px; }.nested-fields .checkbox-control { font-size:11px; }.nested-fields .list-values input { min-width:0; }.nested-fields .row-button { justify-self:start; } html[data-theme="dark"] .optional-field,html[data-theme="dark"] .optional-boolean { border-color:#40505d; } html[data-theme="dark"] .optional-field.enabled,html[data-theme="dark"] .optional-boolean:has(input:checked) { border-color:#4e8d92; } html[data-theme="dark"] .nested-remove { background:#382326; border-color:#a85858; color:#f1aaaa; }
.add-field { display:grid; grid-template-columns:minmax(130px,1fr) 150px auto; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }.add-field input,.add-field select { border:1px solid #cbd4db; border-radius:4px; background:#fff; color:#23313c; padding:8px 9px; font-size:12px; } html[data-theme="dark"] .add-field input,html[data-theme="dark"] .add-field select { background:#202c36; color:#e5edf2; border-color:#40505d; } @media (max-width:600px) { .visual-form { grid-template-columns:1fr; }.add-field { grid-template-columns:1fr; } }
.nested-field { grid-column:1 / -1; border:1px solid var(--line); border-radius:4px; padding:10px; }.nested-field summary { cursor:pointer; color:var(--cyan); font-weight:800; }.nested-field > select { margin-top:10px; }.nested-fields { display:grid; grid-template-columns:1fr; gap:9px; margin-top:10px; }.nested-fields label { display:grid; gap:5px; font-size:11px; color:var(--muted); }.nested-fields input,.nested-fields select,.nested-fields textarea { width:100%; border:1px solid #cbd4db; border-radius:4px; padding:7px; background:#fff; color:#23313c; }.nested-fields textarea { min-height:70px; resize:vertical; font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; } html[data-theme="dark"] .nested-fields input,html[data-theme="dark"] .nested-fields select,html[data-theme="dark"] .nested-fields textarea { background:#202c36; color:#e5edf2; border-color:#40505d; } @media (max-width:600px) { .nested-fields { grid-template-columns:1fr; } }
.language-panel { overflow:hidden; }.language-toolbar { padding:14px 16px; border-bottom:1px solid var(--line); display:flex; align-items:end; justify-content:space-between; gap:14px; color:var(--muted); font-size:12px; }.language-toolbar label { display:grid; gap:5px; color:#586774; font-weight:700; }.language-toolbar select,.language-table input { border:1px solid #cbd4db; border-radius:4px; background:#fff; color:#23313c; padding:7px 8px; font:inherit; }.language-table input { width:100%; min-width:140px; }.language-add { padding:12px 16px; border-top:1px solid var(--line); }.component-field { grid-column:span 1; }.component-field textarea { min-height:74px; } html[data-theme="dark"] .language-toolbar,html[data-theme="dark"] .language-add { border-color:var(--line); } html[data-theme="dark"] .language-toolbar label { color:#b5c2cc; } html[data-theme="dark"] .language-toolbar select,html[data-theme="dark"] .language-table input { background:#202c36; color:#e5edf2; border-color:#40505d; } @media (max-width:600px) { .language-toolbar { align-items:stretch; flex-direction:column; }.language-table th:last-child,.language-table td:last-child { display:table-cell; } }
@media (max-width:1050px) { .editor-workbench { grid-template-columns:1fr; min-height:auto; }.editor-pane + .editor-pane { border-left:0; border-top:1px solid var(--line); }.editor-pane-body { min-height:420px; }.code-pane .editor-pane-body { min-height:460px; } } @media (max-width:600px) { .editor-page-header { display:block; }.editor-page-actions { margin-top:14px; }.editor-page-heading label { display:grid; }.editor-page-heading input { width:100%; }.editor-workbench { margin-left:-14px; margin-right:-14px; border-left:0; border-right:0; }.editor-pane-body { padding:12px; }.code-pane .editor-pane-body { min-height:420px; } }
html[data-theme="dark"] .recent-item:hover { background:#24313c; } html[data-theme="dark"] .recent-item:focus-visible { outline-color:#75d7d8; }

.recent-item { grid-template-columns:minmax(0,1fr) max-content; }
.id-cell { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; font-weight:650; }

.tag-filter-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }.tag-filter-bar .filter-bar { margin:0; flex:1; }.tag-category-tabs { display:flex; gap:6px; flex-wrap:wrap; }.tag-category-tabs .row-button.active { border-color:var(--cyan); background:var(--cyan-soft); color:#086f78; } html[data-theme="dark"] .tag-category-tabs .row-button.active { color:#75d7d8; }
.type-control { display:grid; gap:7px; }
.add-field-error { grid-column:1 / -1; margin:0; color:#b33939; font-size:11px; line-height:1.4; } html[data-theme="dark"] .add-field-error { color:#f1aaaa; }
@media (max-width:600px) { .tag-filter-bar { display:grid; }.tag-filter-bar .filter-bar { width:100%; } }

.nested-fields .optional-boolean { display:flex; align-items:center; gap:8px; }
.nested-fields .optional-boolean > input { width:15px; flex:0 0 15px; }
.nested-entry-number { display:grid; gap:5px; margin:10px 34px 0 0; color:var(--muted); font-size:11px; }

.visual-field.optional-boolean { display:block !important; }
.visual-field.optional-boolean > .boolean-row,
.nested-fields .visual-field.optional-boolean > .boolean-row { display:flex !important; align-items:center; gap:8px; min-height:20px; }
.visual-field.optional-boolean > .boolean-row > input,
.nested-fields .visual-field.optional-boolean > .boolean-row > input { width:15px !important; height:15px; flex:0 0 15px; margin:0; }

.optional-field > .optional-toggle,
.nested-fields .optional-field > .optional-toggle { display:flex !important; align-items:center; gap:8px; min-height:20px; }
.optional-field > .optional-toggle > input,
.nested-fields .optional-field > .optional-toggle > input { width:15px !important; height:15px; flex:0 0 15px; margin:0; }

.modifier-tree { display:grid; gap:9px; border:1px solid var(--line); border-radius:4px; padding:10px; }
.modifier-tree > label,.modifier-tree .modifier-resource > label { display:grid; gap:5px; color:var(--muted); font-size:11px; }
.modifier-tree input,.modifier-tree select { width:100%; border:1px solid #cbd4db; border-radius:4px; background:#fff; color:#23313c; padding:7px; }
.modifier-children { display:grid; gap:7px; color:var(--muted); font-size:11px; }
.modifier-children > span { font-weight:700; }
html[data-theme="dark"] .modifier-tree { border-color:#40505d; }
html[data-theme="dark"] .modifier-tree input,html[data-theme="dark"] .modifier-tree select { background:#202c36; color:#e5edf2; border-color:#40505d; }

.badge-tree { display:grid; gap:9px; border:1px solid var(--line); border-radius:4px; padding:10px; }
.badge-tree > label { display:grid; gap:5px; color:var(--muted); font-size:11px; }
.badge-tree input,.badge-tree select { width:100%; border:1px solid #cbd4db; border-radius:4px; background:#fff; color:#23313c; padding:7px; }
.badge-fields { margin-top:0; }
html[data-theme="dark"] .badge-tree { border-color:#40505d; }
html[data-theme="dark"] .badge-tree input,html[data-theme="dark"] .badge-tree select { background:#202c36; color:#e5edf2; border-color:#40505d; }