:root{font-family:Inter,Avenir,Segoe UI,system-ui,sans-serif;color:#182027;background:#e8e8e3;font-synthesis:none;--ink:#101417;--paper:#f7f6f2;--line:#c9cbc7;--muted:#677078;--green:#167653;--green-soft:#dff1e8;--red:#a83a3a;--red-soft:#f7e2df;--amber:#945d16;--amber-soft:#f7ebd7 }*{box-sizing:border-box}body{margin:0;min-width:720px;min-height:100vh}button,textarea,input{font:inherit}button{cursor:pointer}button:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid #4f8dce;outline-offset:2px}.app-shell{min-height:100vh}.topbar{min-height:70px;padding:12px 22px;color:#f7f6f2;background:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #30373b}.brand-block{display:flex;align-items:center;gap:20px}.brand{color:inherit;text-decoration:none;font-weight:700;font-size:1.03rem;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}.privacy-note{color:#b7c0c4;font-size:.8rem;display:flex;align-items:center;gap:7px}.privacy-dot{width:7px;height:7px;border-radius:50%;background:#65d4a0;box-shadow:0 0 0 3px #65d4a020}.mode-switch{border:1px solid #3b454a;border-radius:9px;padding:3px;display:flex;background:#070a0c}.mode-switch button{color:#aeb7bb;background:transparent;border:0;border-radius:6px;padding:8px 14px;display:flex;align-items:center;gap:7px;font-weight:600}.mode-switch button.active{color:var(--ink);background:#f4f1e8}main{padding:18px 22px 40px}.workspace{min-width:676px;display:grid;grid-template-columns:minmax(330px,1fr) minmax(330px,1fr);border:1px solid #b8bbb8;border-radius:12px;overflow:hidden;background:var(--paper);box-shadow:0 8px 26px #1b20230c}.pane-header{padding:11px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.pane-header:nth-child(2){border-left:1px solid var(--line)}.pane-header>div{display:flex;gap:9px;align-items:baseline}.pane-header strong{font-size:.9rem}.pane-header>span{font-size:.75rem;color:var(--muted)}.eyebrow{font-size:.67rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}.editor-wrap{min-width:0}.editor-wrap+.editor-wrap{border-left:1px solid var(--line)}textarea{width:100%;height:255px;min-height:120px;resize:vertical;padding:17px 18px;border:0;display:block;background:#fbfaf7;color:#172028;font:400 .9rem/1.65 Cascadia Code,SFMono-Regular,Consolas,monospace;-moz-tab-size:2;tab-size:2;white-space:pre}.editor-wrap.has-error textarea{background:#fff8f7;box-shadow:inset 0 0 0 2px #c8625b}.input-error{min-height:42px;padding:9px 14px;color:#8f2f2f;background:#f8e1dd;border-top:1px solid #e9b9b2;font-size:.8rem}.actionbar{min-width:676px;margin:12px 0;min-height:46px;display:flex;align-items:center;gap:7px}.actionbar button{height:38px;padding:0 13px;color:#354047;background:#f5f4ef;border:1px solid #bec1be;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:.84rem}.actionbar button:hover:not(:disabled){background:#fff;border-color:#8e9698}.actionbar button.primary{color:#fff;background:var(--ink);border-color:var(--ink);padding-inline:19px}.actionbar button.primary:hover{background:#2c353a}.actionbar button:disabled{cursor:default;opacity:.42}.action-spacer{flex:1}.toggle{display:inline-flex;align-items:center;gap:8px;color:#374148;font-size:.82rem;font-weight:600;cursor:pointer}.toggle input{position:absolute;opacity:0}.toggle-track{width:35px;height:20px;padding:2px;background:#aeb4b4;border-radius:99px;transition:background .15s}.toggle-track span{display:block;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px #0003}.toggle input:checked+.toggle-track{background:var(--ink)}.toggle input:checked+.toggle-track span{transform:translate(15px)}.difference-nav{margin-left:8px;display:flex;align-items:center;border:1px solid #bec1be;border-radius:8px;overflow:hidden;background:#f5f4ef}.difference-nav button{width:36px;border:0;border-radius:0;padding:0}.difference-nav span{min-width:72px;text-align:center;color:var(--muted);font-size:.76rem;font-variant-numeric:tabular-nums}.stale-banner{min-width:676px;margin-bottom:10px;padding:9px 12px;border:1px solid #dfbe8a;border-radius:8px;background:var(--amber-soft);color:#74480f;font-size:.8rem;display:flex;align-items:center;gap:7px}.empty-state{min-width:676px;height:160px;border:1px dashed #aeb2ae;border-radius:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#edede8}.empty-state strong{color:#2e373c}.empty-state span{font-size:.85rem}.results{min-width:676px;border:1px solid #b8bbb8;border-radius:12px;overflow:hidden;background:#fbfaf7;box-shadow:0 8px 26px #1b20230c}.result-summary{min-height:46px;padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.78rem}.result-summary strong{color:#283137;font-size:.86rem;margin-right:auto}.summary-add{color:var(--green);font-weight:700}.summary-remove{color:var(--red);font-weight:700}.diff-table-shell{position:relative}.result-panes{display:grid;grid-template-columns:minmax(330px,1fr) minmax(330px,1fr);max-height:560px;overflow:hidden}.result-pane-scroll{min-width:0;max-height:560px;overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain}.result-pane-scroll+.result-pane-scroll{border-left:1px solid var(--line)}.result-pane-title{position:sticky;z-index:4;top:0;left:0;min-width:100%;width:max-content;padding:8px 13px;background:#ecece7ee;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);color:#596269;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.line-cell,.json-cell{width:max-content;min-width:100%;min-height:31px;border-bottom:1px solid #e7e6e1;display:flex;align-items:stretch;position:relative}.line-number{width:48px;flex:0 0 48px;padding:6px 9px;color:#909797;background:#f0f0eb;border-right:1px solid #ddded9;text-align:right;font:.7rem/1.6 Cascadia Code,Consolas,monospace;-webkit-user-select:none;user-select:none}.line-cell code{min-width:max-content;padding:6px 10px;white-space:pre;font:.78rem/1.6 Cascadia Code,Consolas,monospace}.json-filter-bar{min-height:45px;padding:7px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);background:#f3f2ed}.json-filter-bar>span{color:var(--muted);font-size:.72rem;white-space:nowrap}.json-filter-input{min-width:240px;max-width:480px;flex:1;display:flex;border:1px solid #b9bfbc;border-radius:7px;overflow:hidden;background:#fff}.json-filter-input:focus-within{outline:2px solid #4f8dce;outline-offset:1px}.json-filter-input.has-error{border-color:#bd4b43}.json-filter-input input{min-width:0;flex:1;padding:7px 9px;border:0;outline:0;background:transparent;font-size:.78rem}.json-filter-input button{width:34px;flex:0 0 34px;border:0;border-left:1px solid #d5d8d5;background:#f6f6f3;color:#56615b;font:700 .75rem/1 Cascadia Code,Consolas,monospace}.json-filter-input button.active{background:#283238;color:#fff}.result-pane-scroll:first-child .row-modified,.result-pane-scroll:first-child .row-removed{background:var(--red-soft)}.result-pane-scroll:last-child .row-modified,.result-pane-scroll:last-child .row-added{background:var(--green-soft)}.segment-added{background:#9ddcbd;color:#104d36;border-radius:2px}.segment-removed{background:#efaea6;color:#792727;border-radius:2px}.gap-row{width:100%;min-width:max-content;height:31px;border:0;border-bottom:1px solid #c9d3d5;background:repeating-linear-gradient(135deg,#e9eef0,#e9eef0 4px,#e2e9eb 4px,#e2e9eb 8px);color:#53646b;font-size:.74rem;font-weight:600}.gap-row-copy{display:flex;align-items:center;justify-content:center}.active-difference{box-shadow:inset 0 0 0 2px #4279b9}.json-row{width:max-content;min-width:100%;position:relative}.json-cell{padding:5px 9px;align-items:center;background:#fbfaf7;font:.78rem/1.55 Cascadia Code,Consolas,monospace}.tree-indent{width:calc(var(--depth)*20px);flex:0 0 calc(var(--depth)*20px)}.tree-toggle{width:22px;height:22px;flex:0 0 22px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:#677078;border-radius:4px}.tree-toggle:hover{background:#dfe2df}.tree-toggle-spacer{width:22px;flex:0 0 22px}.json-key{color:#5a3e9e;font-weight:500;white-space:nowrap}.json-separator{color:#9a9f9d;margin:0 7px 0 2px}.json-value{white-space:pre}.value-string{color:#986020}.value-number{color:#1b699d}.value-boolean{color:#a13f74}.array-drag-handle{width:20px;height:22px;flex:0 0 20px;padding:0;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;color:#8a9294;cursor:grab}.array-drag-handle:hover{color:#26333a;background:#dfe2df}.array-drag-handle:active{cursor:grabbing}.compare-value-action,.cancel-pair{margin-left:10px;padding:2px 7px;border:1px solid #9da9ac;border-radius:5px;background:#fff;color:#40535a;font:600 .65rem Inter,Avenir,Segoe UI,sans-serif;white-space:nowrap}.compare-value-action.pair-ready{color:#fff;background:#356f7d;border-color:#356f7d}.key-mismatch{background:#e4edf4!important}.badge-key{color:#376579;border-color:#8eafbd}.cancel-pair{margin-left:0}.result-pane-scroll:first-child .status-changed{background:var(--red-soft)}.result-pane-scroll:last-child .status-changed{background:var(--green-soft)}.status-type{background:#eee3f5}.result-pane-scroll:first-child .status-missing-left,.result-pane-scroll:last-child .status-missing-right{background:#ecece8}.result-pane-scroll:last-child .status-missing-left{background:var(--green-soft)}.result-pane-scroll:first-child .status-missing-right{background:var(--red-soft)}.status-badge{position:sticky;z-index:3;left:calc(100% - 84px);margin-left:16px;align-self:center;padding:2px 6px;border-radius:10px;border:1px solid;background:#fff;font:600 .62rem/1.3 Inter,Avenir,Segoe UI,sans-serif;white-space:nowrap;pointer-events:none}.badge-changed{color:var(--amber);border-color:#d9ad70}.badge-type{color:#76429a;border-color:#be9fd1}.badge-missing-left{color:var(--green);border-color:#8fc5aa}.badge-missing-right{color:var(--red);border-color:#dda29b}.unstringify-actions{margin-left:auto;display:inline-flex;gap:4px;padding:0 54px 0 10px}.unstringify-actions button{border:1px solid #aeb6b4;border-radius:5px;color:#3a4c50;background:#fff;padding:2px 7px;font:600 .65rem Inter,Avenir,Segoe UI,sans-serif;white-space:nowrap}.diff-minimap{position:absolute;z-index:8;top:35px;right:2px;bottom:15px;width:5px;pointer-events:none;background:#fffa;border-radius:3px;box-shadow:0 0 0 1px #9ca4a555}.diff-minimap span{position:absolute;left:0;width:5px;height:4px;min-height:3px;transform:translateY(-50%);border-radius:2px}.minimap-added{background:#20a06e}.minimap-removed{background:#cf5353}.minimap-changed{background:#d08a26}.minimap-type{background:#8652aa}@media(max-width:900px){.privacy-note{display:none}main{padding-inline:12px}.topbar{padding-inline:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.password-page{min-height:100vh;min-width:320px;padding:20px;display:flex;align-items:center;justify-content:center;background:#f4f6f8;font-family:Arial,Helvetica,sans-serif;color:#1f2937}.password-card{width:min(440px,92vw);padding:36px;border-radius:16px;background:#fff;box-shadow:0 10px 35px #00000014}.password-card h1{margin:0 0 10px;font-size:28px}.password-subtitle{margin:0 0 28px;color:#6b7280;line-height:1.5}.password-card label{display:block;margin-bottom:8px;font-weight:600}.password-card input{width:100%;padding:14px;border:2px solid #d1d5db;border-radius:9px;outline:0;font-size:17px}.password-card input:focus{border-color:#2563eb}.password-card button{width:100%;margin-top:14px;padding:14px;border:0;border-radius:9px;background:#2563eb;color:#fff;font-size:16px;font-weight:600}.password-card button:hover{background:#1d4ed8}.password-warning-overlay{position:fixed;z-index:999;top:0;right:0;bottom:0;left:0;padding:30px;display:flex;align-items:center;justify-content:center;overflow:auto;background:#b91c1c;color:#fff;text-align:center}.password-warning-content{max-width:850px}.password-warning-icon{width:90px;height:90px;margin-bottom:20px}.password-warning-overlay h2{margin:0 0 24px;font-size:clamp(38px,7vw,80px);line-height:1.05}.password-warning-overlay p{margin:0;font-size:clamp(18px,2.5vw,28px);line-height:1.5}.password-warning-overlay strong{text-decoration:underline}
