:root{--color-text: #172033;--color-page: #f5f8fc;--color-panel: #ffffff;--color-border: #d7e0ed;--color-border-strong: #cad6e5;--color-muted: #66748a;--color-accent: #2563eb;--color-accent-soft: #eef5ff;--color-teal: #0f766e;--color-warning: #b45309;--color-danger: #b42318;--diff-added-bg: #d9fbe8;--diff-added-line-bg: rgba(23, 178, 106, .08);--diff-added-accent: #1d9a65;--diff-removed-bg: #ffe0e0;--diff-removed-line-bg: rgba(222, 67, 67, .08);--diff-removed-accent: #d94646;--diff-modified-bg: #fff1b8;--diff-modified-line-bg: rgba(217, 146, 22, .1);--diff-modified-accent: #c47f00;--editor-line-height: 23.8px;color:#172033;background:var(--color-page);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{min-width:320px;height:100vh;margin:0;background:var(--color-page);overflow:hidden}#root{height:100%}button{font:inherit}.app-shell{display:flex;height:100%;min-height:0;flex-direction:column;overflow:hidden}.topbar{display:grid;min-height:62px;grid-template-columns:minmax(250px,1fr) auto minmax(380px,1fr);align-items:center;gap:18px;border-bottom:1px solid var(--color-border);background:#fffffff0;padding:10px 28px}.brand-block{display:flex;min-width:0;align-items:center;gap:12px}.brand-mark{display:grid;width:32px;height:32px;flex:0 0 auto;place-items:center;border-radius:8px;overflow:hidden;background:#f8bf28}.brand-mark img{width:100%;height:100%;object-fit:cover}.brand-block h1{margin:0;font-size:20px;line-height:1.15}.brand-block p{margin:5px 0 0;color:var(--color-muted);font-size:12px}.page-tabs{display:flex;align-items:center;justify-content:center;gap:8px}.page-tab,.page-remove-button,.icon-button,.primary-action,.secondary-action{display:inline-flex;height:36px;align-items:center;justify-content:center;gap:8px;border:1px solid #cbd8ea;border-radius:8px;background:var(--color-panel);color:var(--color-text);cursor:pointer;font-weight:700}.page-tab-shell{display:inline-flex;align-items:center}.page-tab{border-top-right-radius:0;border-bottom-right-radius:0;min-width:94px;padding:0 22px}.page-remove-button{width:34px;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;color:#6b778a;padding:0}.page-tab-active,.page-tab-shell-active .page-remove-button{border-color:#aec8f7;background:var(--color-accent-soft);color:#175ab8}.icon-button{width:36px;padding:0}.add-page-button{border-color:#a8d7d1;background:#effbf9;color:#087b6e}.toolbar{display:flex;min-width:0;align-items:center;justify-content:flex-end;gap:10px}.primary-action{border-color:var(--color-accent);background:var(--color-accent);color:#fff;padding:0 18px}.secondary-action{padding:0 16px}.secondary-action-active{border-color:var(--color-teal);background:#e9fbf7;color:var(--color-teal)}.shortcut-badge{display:inline-flex;height:20px;align-items:center;border:1px solid currentColor;border-radius:5px;background:#ffffff2e;color:inherit;font:700 11px/1 SFMono-Regular,Consolas,Liberation Mono,monospace;padding:0 6px}.secondary-action .shortcut-badge{background:#f8fbff;color:#5d6b80}.secondary-action-active .shortcut-badge{background:#fff;color:var(--color-teal)}.page-tab:focus-visible,.page-remove-button:focus-visible,.icon-button:focus-visible,.primary-action:focus-visible,.secondary-action:focus-visible,.locale-option:focus-visible,.storage-notice-actions button:focus-visible{outline:2px solid rgba(37,99,235,.42);outline-offset:2px}.locale-switch{display:inline-flex;height:36px;align-items:center;gap:4px;border:1px solid #ccd7e7;border-radius:8px;background:#f8fbff;color:#5c6b81;padding:0 8px;font-size:12px;font-weight:800}.locale-option{min-width:32px;border:0;border-radius:5px;background:transparent;color:#5c6b81;cursor:pointer;font-size:12px;font-weight:800;padding:5px 7px}.locale-active{background:#d7fbef;color:#087b6e}.workspace{display:flex;min-height:0;flex:1;flex-direction:column;gap:16px;overflow:hidden;padding:26px 28px 28px}.storage-notice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid #b8cbe8;border-left-width:4px;border-radius:8px;background:var(--color-panel);padding:12px 14px;box-shadow:0 12px 28px #1c2e4a0f}.storage-notice-loading{border-color:#b8cbe8;border-left-color:var(--color-accent)}.storage-notice-warning{border-color:#f1d19a;border-left-color:var(--color-warning);background:#fffaf0}.storage-notice-danger{border-color:#f2b8ae;border-left-color:var(--color-danger);background:#fff8f6}.storage-notice-icon{color:var(--color-warning)}.storage-notice-loading .storage-notice-icon{color:var(--color-accent)}.storage-notice-danger .storage-notice-icon{color:var(--color-danger)}.spinning{animation:spin .9s linear infinite}.storage-notice div:first-of-type{display:flex;min-width:0;flex-direction:column;gap:4px}.storage-notice strong{font-size:14px}.storage-notice span{color:#5d6c82;font-size:12px}.storage-notice-actions{display:inline-flex;flex:0 0 auto;gap:8px}.storage-notice-actions button{min-height:32px;border:1px solid #cbd8ea;border-radius:8px;background:#f8fbff;color:var(--color-text);cursor:pointer;font-size:12px;font-weight:700;padding:0 12px}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.page-title-row{display:flex;align-items:center;gap:10px}.page-title-row h2{margin:0;font-size:16px}.mode-pill{border:1px solid #aec8f7;border-radius:999px;background:#eff5ff;color:#1d5ec5;padding:5px 10px;font-size:12px;font-weight:700}.editor-grid{display:grid;min-height:0;flex:1;gap:16px;overflow:hidden}.editor-grid-single{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.editor-grid-compare{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:10px}.editor-frame{display:flex;min-height:0;flex:1;flex-direction:column;overflow:hidden;border:1px solid var(--color-border-strong);border-radius:8px;background:#fff;box-shadow:0 18px 40px #1c2e4a12}.editor-header{display:grid;align-items:center;gap:12px;background:#fbfdff;color:#5f6f85;font-size:12px}.editor-header{grid-template-columns:minmax(0,1fr);min-height:40px;border-bottom:1px solid #dbe4ef;padding:0 18px 0 51px}.editor-title{display:inline-flex;position:relative;align-items:center;color:#203049;font-weight:800}.status-dot{position:absolute;left:-18px;width:10px;height:10px;border-radius:50%;background:#168f87}.editor-body{display:flex;min-height:0;flex:1;width:100%;overflow:hidden}.json-editor-host{display:flex;min-width:0;min-height:0;flex:1;overflow:hidden}.json-editor-host,.json-editor-host .cm-editor{min-height:0}.json-editor-host .cm-editor{flex:1;height:100%;background:#fff;color:#233149;font:14px/1.7 SFMono-Regular,Consolas,Liberation Mono,monospace;line-height:var(--editor-line-height)}.json-editor-host .cm-focused{outline:none;box-shadow:inset 0 0 0 2px #2563eb38}.json-editor-host .cm-scroller{height:100%;overflow:auto}.json-editor-host .cm-gutters{border-right:1px solid #e1e8f1;background:#f7faff;color:#8190a5}.json-editor-host .cm-foldGutter{min-width:18px}.json-editor-host .cm-foldGutter .cm-gutterElement{display:grid;place-items:center;color:#68778d;cursor:pointer}.json-editor-host .cm-line{padding:0 12px}.json-editor-host .cm-content{min-height:100%;padding:12px 0}.json-editor-host .cm-placeholder{color:#7a8799;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:18px;font-weight:800}.json-editor-host .cm-json-diff{border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:1px 0}.json-editor-host .cm-json-diff-line{background:var(--diff-row-bg);box-shadow:inset 3px 0 0 var(--diff-row-accent),-100vw 0 0 var(--diff-row-bg),100vw 0 0 var(--diff-row-bg)}.json-editor-host .cm-json-diff-spacer{height:calc(var(--diff-spacer-lines) * 1lh);background:var(--diff-row-bg);box-shadow:inset 3px 0 0 var(--diff-row-accent),-100vw 0 0 var(--diff-row-bg),100vw 0 0 var(--diff-row-bg)}.json-editor-host .cm-json-diff-line-added,.json-editor-host .cm-json-diff-spacer-added{--diff-row-bg: var(--diff-added-line-bg);--diff-row-accent: var(--diff-added-accent)}.json-editor-host .cm-json-diff-line-removed,.json-editor-host .cm-json-diff-spacer-removed{--diff-row-bg: var(--diff-removed-line-bg);--diff-row-accent: var(--diff-removed-accent)}.json-editor-host .cm-json-diff-line-modified,.json-editor-host .cm-json-diff-spacer-modified{--diff-row-bg: var(--diff-modified-line-bg);--diff-row-accent: var(--diff-modified-accent)}.json-editor-host .cm-json-diff-spacer:after{display:block;height:100%;content:""}.json-editor-host .cm-json-diff-spacer-added:after,.json-editor-host .cm-json-diff-spacer-removed:after{background-image:linear-gradient(135deg,rgba(255,255,255,.44) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.44) 50%,rgba(255,255,255,.44) 75%,transparent 75%,transparent);background-size:28px 28px}.json-editor-host .cm-json-diff-added{background:var(--diff-added-bg)}.json-editor-host .cm-json-diff-removed{background:var(--diff-removed-bg)}.json-editor-host .cm-json-diff-modified{background:var(--diff-modified-bg)}.json-editor-host .cm-json-syntax-error{background-image:url("data:image/svg+xml,%3Csvg width='12' height='5' viewBox='0 0 12 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3' fill='none' stroke='%23dc2626' stroke-width='1.5'/%3E%3C/svg%3E");background-position:0 calc(100% - 1px);background-repeat:repeat-x;background-size:12px 5px;background-color:#dc26260f;box-decoration-break:clone;padding-bottom:2px;-webkit-box-decoration-break:clone}.compare-gutter{display:flex;min-height:0;flex-direction:column;overflow:hidden;border:1px solid #d8e2ee;border-radius:8px;background:#fbfdff}.compare-gutter-header{min-height:40px;border-bottom:1px solid #dbe4ef;background:#fbfdff}.compare-gutter-track{min-height:0;flex:1;overflow:hidden}.compare-gutter-lines{position:relative;min-height:max(100%,var(--compare-gutter-content-height, 100%))}.compare-gutter-marker{display:grid;position:absolute;top:var(--diff-marker-top);left:calc(50% + var(--diff-marker-lane-offset, 0px));width:var(--diff-marker-width, 30px);height:var(--diff-marker-height);min-height:22px;transform:translate(-50%);place-items:center;border:1px solid var(--diff-marker-border);border-radius:7px;background:var(--diff-marker-bg);color:var(--diff-marker-color);font-size:12px;font-weight:900;line-height:1;box-shadow:0 6px 16px #1c2e4a14}.compare-gutter-marker-added{--diff-marker-bg: #ecfdf4;--diff-marker-border: #a7e8c2;--diff-marker-color: #117848}.compare-gutter-marker-removed{--diff-marker-bg: #fff0f0;--diff-marker-border: #f5b9b9;--diff-marker-color: #b42318}.compare-gutter-marker-modified{--diff-marker-bg: #fff8dc;--diff-marker-border: #efd179;--diff-marker-color: #9a6100}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 960px){.topbar{grid-template-columns:1fr;justify-items:stretch}.page-tabs,.toolbar{justify-content:flex-start;overflow-x:auto}.workspace{padding:18px}.workspace-header,.storage-notice{align-items:flex-start;grid-template-columns:auto minmax(0,1fr)}.storage-notice-actions{grid-column:2}.editor-header{align-items:start;grid-template-columns:minmax(0,1fr)}.editor-header{padding:12px 14px 12px 51px}.editor-frame{min-height:0}.editor-grid-compare{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 34px minmax(0,1fr)}.compare-gutter{min-height:34px;flex-direction:row}.compare-gutter-header{display:none}.compare-gutter-track{width:100%;overflow:hidden}.compare-gutter-lines{display:flex;align-items:center;justify-content:center;gap:6px;min-height:100%;padding:0 8px}.compare-gutter-marker{position:static;width:30px;height:22px;min-height:22px;transform:none}}@media (max-width: 640px){.topbar{gap:12px;padding:10px 16px}.workspace{gap:12px;padding:14px}.json-editor-host .cm-content{padding:12px 0}}