:root { color-scheme:light; --bg:#f4f6f8; --panel:#fff; --ink:#17212b; --muted:#6d7784; --line:#dde3e8; --dark:#101923; --cyan:#087e8b; --cyan-soft:#e1f5f5; --danger:#b74b4b; --code:#17222b; --sidebar-width:260px; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#111923; --panel:#19252f; --ink:#e6edf3; --muted:#9aaab8; --line:#344655; --dark:#0d141c; --cyan:#63d3d5; --cyan-soft:#183b43; --danger:#ff9b9b; --code:#0d141a; }
* { box-sizing:border-box; } body { min-width:320px; margin:0; color:var(--ink); background:var(--bg); font:14px/1.45 Inter,ui-sans-serif,system-ui,"Microsoft YaHei",sans-serif; } button,input,textarea,select { font:inherit; } button { cursor:pointer; color:inherit; }
.topbar { position:sticky; top:0; z-index:10; height:66px; display:flex; align-items:center; gap:28px; padding:0 26px; color:#fff; background:var(--dark); }.brand { display:flex; align-items:center; gap:10px; min-width:260px; color:#fff; white-space:nowrap; }.brand-mark { display:grid; width:34px; height:34px; place-items:center; color:#d7f7f7; border:1px solid #4cbbc0; font:700 11px/1 ui-monospace,monospace; }.brand strong,.brand small { display:block; }.brand strong { font-size:15px; }.brand small { margin-top:2px; color:#93a5b5; font-size:8px; font-weight:650; letter-spacing:1.15px; text-transform:uppercase; }.project-summary { display:flex; flex:1; align-items:center; gap:9px; color:#cbd7e0; font-size:13px; }.status-dot { width:8px; height:8px; border-radius:50%; background:#45c28a; box-shadow:0 0 0 3px #45c28a26; }.separator { width:1px; height:15px; background:#50606f; }.topbar-actions { display:flex; align-items:center; gap:8px; }.icon-button { display:grid; width:32px; height:32px; place-items:center; border:1px solid transparent; border-radius:4px; color:#c6d0d9; background:transparent; font-size:19px; }.icon-button:hover { color:#fff; background:#293744; }.language-menu { position:relative; }.language-icon-button { border-color:#3b4c5a; background:#1c2935; }.language-icon-button img { width:17px; height:17px; filter:invert(91%) sepia(10%) saturate(501%) hue-rotate(158deg) brightness(98%) contrast(88%); }.language-dropdown { position:absolute; top:calc(100% + 7px); right:0; z-index:30; display:grid; min-width:144px; border:1px solid #3b4c5a; border-radius:4px; padding:5px; color:#d9e5ec; background:#1c2935; box-shadow:0 12px 26px #0005; }.language-dropdown[hidden] { display:none; }.language-dropdown button { display:grid; width:100%; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:5px; border:0; border-radius:3px; padding:8px 9px; color:inherit; background:transparent; text-align:left; font-size:12px; font-weight:700; }.language-dropdown button:hover,.language-dropdown button.selected { background:#2d4352; }.language-check { color:#63d3d5; text-align:center; }.button { min-height:36px; border:1px solid transparent; border-radius:4px; padding:0 14px; font-size:13px; font-weight:700; }.button.primary { color:#fff; background:var(--cyan); }.button.primary:hover { background:#076d78; }
.app-shell { display:grid; min-height:calc(100vh - 66px); grid-template-columns:var(--sidebar-width) 8px minmax(0,1fr); }.sidebar { display:flex; min-width:0; min-height:0; flex-direction:column; overflow:auto; border-right:1px solid var(--line); background:var(--panel); }.side-section { padding:0 10px; }.sidebar-topline { display:flex; align-items:center; justify-content:space-between; padding:0 4px 0 9px; }.sidebar-heading { padding:21px 0 10px; color:#93a0ab; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }.sidebar-collapse { width:26px; height:26px; border:1px solid transparent; border-radius:4px; color:var(--muted); background:transparent; font-size:22px; line-height:1; }.sidebar-collapse:hover { border-color:var(--line); color:var(--ink); background:var(--bg); }.sidebar-resizer { position:relative; z-index:2; cursor:col-resize; }.sidebar-resizer::after { position:absolute; top:0; bottom:0; left:3px; width:2px; content:""; background:transparent; transition:background .15s; }.sidebar-resizer:hover::after,.resizing-sidebar .sidebar-resizer::after { background:var(--cyan); }.resizing-sidebar { cursor:col-resize; user-select:none; }.nav-item { display:flex; width:100%; align-items:center; gap:9px; min-width:0; height:36px; border:0; border-radius:4px; padding:0 9px; text-align:left; color:#536270; background:transparent; }.nav-item::before { width:14px; height:14px; flex:0 0 14px; border:1px solid currentColor; content:""; opacity:.65; }.nav-item:hover { color:#1e2c38; background:#f2f5f6; }.nav-item.active { color:#087580; background:var(--cyan-soft); font-weight:750; }.schema-version { display:grid; gap:4px; margin:11px 8px 18px; color:var(--muted); font-size:10px; font-weight:700; }.schema-version select { width:100%; border:1px solid var(--line); border-radius:4px; padding:6px 7px; color:var(--ink); background:var(--panel); font-size:12px; }.workspace-tree-heading { border-top:1px solid var(--line); padding:16px 9px 8px; color:#93a0ab; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }.workspace-tree { display:grid; gap:2px; padding-bottom:18px; }.tree-folder { min-width:0; }.tree-folder-name { display:flex; align-items:center; height:28px; padding:0 9px; color:var(--muted); font:700 11px/1.2 ui-monospace,Consolas,monospace; }.tree-folder-name::before { width:13px; margin-right:7px; color:#d89b31; content:"▾"; font-size:12px; }.tree-folder-children { display:grid; gap:1px; padding-left:12px; }.tree-file { display:grid; width:100%; min-width:0; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:5px; height:31px; border:0; border-radius:4px; padding:0 8px; text-align:left; color:#536270; background:transparent; }.tree-file:hover { color:var(--ink); background:var(--bg); }.tree-file.active { color:#087580; background:var(--cyan-soft); font-weight:700; }.tree-file-icon { color:#668594; font:700 9px/1 ui-monospace,monospace; }.tree-file-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.tree-file small { color:var(--muted); font-size:9px; }.sidebar-collapsed .app-shell { grid-template-columns:48px 8px minmax(0,1fr); }.sidebar-collapsed .side-section { padding:0 6px; }.sidebar-collapsed .sidebar-heading,.sidebar-collapsed .schema-version,.sidebar-collapsed .workspace-tree-heading,.sidebar-collapsed .workspace-tree { display:none; }.sidebar-collapsed .sidebar-topline { justify-content:center; padding:10px 0; }.sidebar-collapsed .sidebar-collapse { transform:rotate(180deg); }.sidebar-collapsed .home-nav { justify-content:center; padding:0; }.sidebar-collapsed .home-nav::before { margin:0; }
.content { min-width:0; height:calc(100vh - 66px); overflow:auto; padding:32px 38px 46px; }.content:has(#editor-view:not([hidden])) { overflow:hidden; }.content:has(#home-view:not([hidden])) { overflow:auto; }.workspace-head { display:flex; flex:0 0 auto; align-items:flex-start; justify-content:space-between; gap:20px; max-width:1280px; margin:0 auto 22px; }.eyebrow { margin:0 0 4px; color:var(--cyan); font:700 11px/1.3 ui-monospace,monospace; }.workspace h1 { margin:0; font-size:26px; letter-spacing:0; }.page-description { max-width:720px; margin:7px 0 0; color:var(--muted); }.heading-actions { padding-top:12px; }.status { max-width:330px; text-align:right; color:var(--muted); font-size:12px; }.status.error { color:var(--danger); }.status.ok { color:var(--cyan); }#editor-view:not([hidden]) { display:flex; height:100%; min-height:0; flex-direction:column; }
.output-path { display:flex; align-items:center; gap:8px; margin:12px 0 0; color:var(--muted); font-size:11px; }.output-path code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--line); border-radius:3px; padding:3px 6px; color:var(--cyan); background:var(--panel); font:11px/1.4 ui-monospace,Consolas,monospace; }.path-inputs { display:flex; justify-content:flex-end; gap:8px; margin-bottom:9px; }.path-inputs label { display:grid; gap:3px; color:var(--muted); font-size:10px; font-weight:700; text-align:left; }.path-inputs input { width:138px; border:1px solid var(--line); border-radius:4px; padding:6px 7px; color:var(--ink); background:var(--panel); font-size:12px; }.path-inputs label:last-child input { width:166px; }
.editor-workbench { display:grid; width:100%; max-width:1280px; min-height:0; flex:1 1 auto; grid-template-columns:minmax(400px,1.08fr) minmax(340px,.92fr); margin:0 auto; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:var(--panel); box-shadow:0 8px 26px #2537470a; }.editor-pane { display:flex; min-width:0; min-height:0; flex-direction:column; overflow:hidden; }.editor-pane + .editor-pane { border-left:1px solid var(--line); }.editor-pane > header { display:flex; min-height:60px; flex:0 0 auto; align-items:center; border-bottom:1px solid var(--line); padding:11px 18px; }.editor-pane h2 { margin:0; font-size:14px; }.editor-pane header p { margin:2px 0 0; color:var(--muted); font-size:11px; }.editor-pane-body { min-height:0; flex:1 1 auto; padding:0 20px 20px; overflow:auto; overscroll-behavior:contain; }.editor-form { padding-top:4px; }.field { border-bottom:1px solid var(--line); padding:15px 0; }.field-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px; }.field-name { font-size:13px; font-weight:750; }.required { color:var(--danger); }.field-description { color:var(--muted); font-size:11px; }.field-control { min-width:0; }.field-control input,.field-control select,.field-control textarea,dialog input { width:100%; border:1px solid #cbd4db; border-radius:4px; padding:8px 9px; color:var(--ink); background:var(--panel); }.field-control textarea { min-height:82px; resize:vertical; font-family:ui-monospace,Consolas,monospace; }.object { border:1px solid var(--line); border-radius:4px; padding:0 13px; background:#fbfcfc; }.object > .field:last-child { border-bottom:0; }.array-items { display:grid; gap:8px; }.array-row { display:grid; grid-template-columns:minmax(0,1fr) 30px; gap:7px; align-items:start; border:1px solid var(--line); border-radius:4px; padding:0 9px 9px; background:#f8fafb; }.array-row > button { height:32px; margin-top:9px; border:1px solid #d99b9b; border-radius:4px; color:var(--danger); background:#fff5f5; }.add-button { border:1px solid #b8ccd0; border-radius:4px; margin-top:9px; padding:6px 10px; color:#2b6570; background:#fff; font-size:12px; font-weight:700; }.add-button:hover { border-color:var(--cyan); color:var(--cyan); }.type-picker { display:flex; align-items:center; gap:8px; margin:0 0 12px; border:1px solid var(--line); border-radius:4px; padding:8px; color:var(--muted); background:#f5f8f8; font-size:12px; }.type-picker select { flex:1; }.enum-suggestion { display:grid; gap:4px; }.enum-suggestion small { color:var(--muted); font-size:10px; }.boolean { width:auto !important; margin-right:7px; accent-color:var(--cyan); }
.editor-json { display:flex; height:100%; flex:1; flex-direction:column; gap:10px; padding-top:16px; }.editor-json textarea { width:100%; min-height:530px; height:100%; resize:vertical; border:1px solid #24323e; border-radius:4px; padding:14px; color:#d5e3e5; background:var(--code); font:12px/1.55 ui-monospace,Consolas,monospace; }.editor-json .button { align-self:flex-end; }
dialog { width:min(430px,calc(100vw - 30px)); border:1px solid var(--line); padding:0; color:var(--ink); background:var(--panel); box-shadow:0 18px 60px #0005; } dialog::backdrop { background:#0008; } dialog form { padding:18px; }.dialog-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.dialog-head h2 { margin:0; font-size:18px; } dialog label { display:grid; gap:5px; margin:10px 0; color:var(--muted); } dialog menu { display:flex; justify-content:flex-end; gap:8px; margin:18px 0 0; padding:0; } dialog menu button { border:1px solid var(--line); border-radius:4px; padding:7px 10px; color:var(--ink); background:var(--panel); }
:root[data-theme="dark"] .nav-item,:root[data-theme="dark"] .tree-file { color:#b3c0ca; }:root[data-theme="dark"] .nav-item:hover,:root[data-theme="dark"] .tree-file:hover { color:#e6edf3; background:#22313d; }:root[data-theme="dark"] .object,:root[data-theme="dark"] .array-row,:root[data-theme="dark"] .type-picker { background:#202e39; }:root[data-theme="dark"] .field-control input,:root[data-theme="dark"] .field-control select,:root[data-theme="dark"] .field-control textarea,:root[data-theme="dark"] dialog input { border-color:#405262; background:#1d2a35; }:root[data-theme="dark"] .array-row > button { border-color:#a85858; color:#f1aaaa; background:#382326; }:root[data-theme="dark"] .add-button { border-color:#486271; color:#7bd4d7; background:#1d2a35; }
:root[data-theme="dark"] .output-path code,:root[data-theme="dark"] .path-inputs input { border-color:#405262; color:var(--ink); background:#1d2a35; }
.object { padding-bottom:10px; }.object > .type-picker { margin-top:12px; }.object > .type-picker:last-child { margin-bottom:0; }.object-field { position:relative; }.object-field > .field { padding-right:38px; }.object-field > .field:last-child { border-bottom:0; }.object-remove { position:absolute; top:13px; right:0; width:28px; height:28px; border:1px solid #d99b9b; border-radius:4px; color:var(--danger); background:#fff5f5; font-size:17px; line-height:1; }.object-remove:hover { border-color:var(--danger); background:#ffe8e8; }:root[data-theme="dark"] .object-remove { border-color:#a85858; color:#f1aaaa; background:#382326; }
@media (max-width:1050px) { .editor-workbench { grid-template-columns:1fr; min-height:auto; }.editor-pane + .editor-pane { border-top:1px solid var(--line); border-left:0; }.editor-json textarea { min-height:430px; height:430px; } }
@media (max-width:760px) { .topbar { height:56px; gap:10px; padding:0 10px; }.brand { min-width:0; }.brand strong { font-size:13px; }.brand small,.project-summary,.topbar-actions .icon-button:nth-of-type(2) { display:none; }.topbar-actions { margin-left:auto; }.app-shell,.sidebar-collapsed .app-shell { display:block; min-height:calc(100vh - 56px); }.sidebar { max-height:270px; border-right:0; }.sidebar-resizer { display:none; }.sidebar-collapsed .sidebar { display:none; }.side-section { padding:0 8px; }.sidebar-heading { padding-top:13px; }.content { padding:22px 14px 34px; }.workspace-head { display:block; }.heading-actions { padding-top:12px; }.path-inputs { justify-content:flex-start; flex-wrap:wrap; }.path-inputs input,.path-inputs label:last-child input { width:min(190px,calc(50vw - 26px)); }.status { text-align:left; }.workspace h1 { font-size:22px; }.editor-workbench { margin:0 -14px; border-right:0; border-left:0; border-radius:0; }.editor-pane-body { padding-right:14px; padding-left:14px; }.editor-json textarea { min-height:390px; height:390px; } }
@media (max-width:760px) { #export-document { display:none; }.topbar-actions .button { white-space:nowrap; } }

:root[data-theme="dark"] .schema-version select { border-color:#405262; color:var(--ink); background:#1d2a35; }
.schema-version { margin-bottom:30px; }
.workspace-empty { margin:4px 9px; color:var(--muted); font-size:11px; line-height:1.5; }
.home-nav { margin:0 0 14px; }
.home-nav::before { content:"⌂"; display:grid; width:14px; height:14px; place-items:center; border:0; opacity:.9; font-size:16px; }
.home-heading { max-width:1180px; margin:0 auto 26px; }
.home-heading h1 { margin:0; font-size:28px; }
.folder-filter { display:flex; max-width:1180px; flex-wrap:wrap; gap:6px; margin:0 auto 20px; border:1px solid var(--line); border-radius:5px; padding:6px; background:var(--panel); box-shadow:0 4px 12px #25374708; }
.folder-button { min-height:32px; border:1px solid transparent; border-radius:3px; padding:0 13px; color:var(--muted); background:transparent; font-size:12px; font-weight:700; transition:background .15s,color .15s,border-color .15s; }
.folder-button:hover { border-color:var(--line); color:var(--ink); background:var(--bg); }
.folder-button.active { border-color:var(--cyan); color:#fff; background:var(--cyan); box-shadow:0 1px 2px #087e8b55; }
.schema-grid { display:grid; max-width:1180px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; margin:0 auto; }
.schema-card { display:flex; min-height:250px; flex-direction:column; border:1px solid var(--line); border-radius:5px; padding:18px; background:var(--panel); box-shadow:0 6px 18px #2537470a; }
.schema-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--cyan); font:700 10px/1.3 ui-monospace,monospace; }
.schema-card-version { color:var(--muted); }
.schema-card h2 { margin:15px 0 7px; font-size:17px; }
.schema-card-description { min-height:48px; margin:0; color:var(--muted); font-size:12px; }
.schema-card-path { display:grid; gap:4px; margin:16px 0; color:var(--muted); font-size:10px; }
.schema-card-path code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cyan); font:10px/1.4 ui-monospace,Consolas,monospace; }
.schema-card .button { align-self:flex-start; margin-top:auto; }
:root[data-theme="dark"] .schema-card { background:#202e39; }
:root[data-theme="dark"] .folder-filter { border-color:#405262; background:#19252f; }:root[data-theme="dark"] .folder-button:hover { border-color:#486271; color:var(--ink); background:#22313d; }:root[data-theme="dark"] .folder-button.active { color:#10212a; background:var(--cyan); }
@media (max-width:760px) { .home-heading h1 { font-size:23px; }.schema-grid { grid-template-columns:1fr; }.schema-card { min-height:0; } }