:root{color-scheme:dark;--bg:#080808;--surface:#111;--surface-raised:#191919;--hover:#232323;--border:#2b2b2b;--text:#ededed;--text-muted:#999;--accent:#83b5ff;--accent-ink:#09172d;--selected:#17263d;--canvas:#000;--badge:rgba(0,0,0,.78);--danger:#ed8585;--danger-bg:#301b1b;--shadow:0 16px 64px #0008}:root[data-theme=light]{color-scheme:light;--bg:#f1f2f4;--surface:#fff;--surface-raised:#f5f6f8;--hover:#e9edf3;--border:#dce0e7;--text:#252932;--text-muted:#707888;--accent:#315fa4;--accent-ink:#fff;--selected:#e3ecfa;--canvas:#e9edf3;--badge:rgba(255,255,255,.88);--danger:#a84242;--danger-bg:#fae9e9;--shadow:0 16px 64px #20282018}*{box-sizing:border-box;margin:0;scrollbar-width:thin;scrollbar-color:var(--border) transparent}html,body{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text);font-size:14px;-webkit-user-select:none;user-select:none}input,textarea{-webkit-user-select:text;user-select:text}button,input,select{font:inherit;font-size:13px;border:1px solid var(--border);border-radius:6px;color:var(--text);background:var(--surface-raised)}button{padding:6px 11px;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}button:hover{background:var(--hover);border-color:var(--text-muted)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input,select{padding:6px 9px;min-width:0}input[type=checkbox],input[type=range]{accent-color:var(--accent)}input[type=checkbox]{width:15px;height:15px;cursor:pointer;flex-shrink:0}input[type=range]{cursor:pointer}a{color:var(--accent)}.primary,.tool-active,.group-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}.primary:hover,.tool-active:hover,.group-btn.active:hover{background:var(--accent);color:var(--accent-ink);filter:brightness(1.08)}.wide{display:block;width:100%;margin-top:10px;text-align:center}.muted{color:var(--text-muted);font-size:12px;line-height:1.65}.pad{padding:20px}.row{display:flex;gap:8px;margin-top:6px}.icon-btn{padding:1px 6px;border:0;background:transparent;color:var(--text-muted);font-size:16px}.icon-btn:hover{color:var(--danger);background:var(--danger-bg)}.app{height:100dvh;display:flex;flex-direction:column}.topbar{height:60px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 20px;background:var(--bg);border-bottom:1px solid var(--border);z-index:10}.topbar button{background:transparent}.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:650;letter-spacing:-.4px;white-space:nowrap}.brand-mark{display:flex;gap:3px;padding:7px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.brand-mark:before,.brand-mark:after{content:"";display:block;width:7px;height:17px;background:var(--accent);border-radius:1px}.brand-mark:after{opacity:.4}.tagline{color:var(--text-muted);font-size:12px;margin-left:6px;padding-left:14px;border-left:1px solid var(--border)}.account{margin-left:auto;color:var(--text-muted);font-size:12px}.shared-badge{background:var(--selected);padding:4px 9px;border-radius:5px;color:var(--accent);font-size:12px}.topbar .view-toggle{background:var(--selected);border-color:var(--accent);color:var(--accent);font-weight:700;min-width:132px;padding:9px 14px;text-align:center}.topbar .view-toggle:hover{background:var(--accent);color:var(--accent-ink)}.workspace{flex:1;min-height:0;display:flex}.app.view-pick .main,.app.view-compare .picker{display:none}.picker{flex:1;min-height:0;display:grid;grid-template-columns:230px 5px minmax(0,1fr)}.tree{overflow:auto;background:var(--surface);padding:16px 8px}.section-title{font-size:12px;font-weight:600;letter-spacing:1.4px;color:var(--text-muted);padding:4px 9px 14px}.tnode{display:flex;align-items:center;min-width:0;border-radius:5px;padding:2px 0}.tnode:hover{background:var(--hover)}.ttoggle{padding:3px;border:0;background:transparent;color:var(--text-muted);font-size:12px;flex-shrink:0}.tname{flex:1;min-width:0;text-align:left;border:0;background:transparent;padding:6px 4px;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tname:hover{background:transparent}.picker-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);padding:20px 22px;gap:12px}.picker-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:2px}.picker-heading h1{font-size:23px;font-weight:600;letter-spacing:-.7px}.filebar{display:flex;gap:7px}.filebar input{flex:1;background:var(--surface)}.actionbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:5px 0}.side-section{border-top:1px solid var(--border);margin-top:18px;padding-top:16px;padding-bottom:9px}.side-note{padding:0 9px 8px}.side-selected,.side-rules{display:flex;flex-direction:column;gap:5px}.side-item{display:flex;align-items:center;gap:3px;min-width:0;border-radius:5px;padding:3px 5px;font-size:12px}.side-item>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side-form{display:flex;gap:4px;padding:0 4px}.side-form input{width:100%;min-width:0}.group-draft.active{background:var(--selected)}.group-draft-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left;background:transparent;border:0;padding:5px}.side-rules{padding:8px 4px}.side-rules>input{width:100%}.side-rules .wide{margin-top:0;white-space:normal}.rule-item{color:var(--text-muted)}.check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);white-space:nowrap}.filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.filter-row input{width:260px;background:var(--surface)}.filter-row button{flex-shrink:0}.filter-row select{max-width:142px}.filter-row .crumb-path{flex-basis:100%;text-align:left}.crumb-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;text-align:right}.ftable{flex:1;min-height:0;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px}.frow{display:grid;grid-template-columns:26px minmax(0,1fr) 90px 140px;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px}.frow:not(.head):hover{background:var(--hover)}.frow.checked{background:var(--selected)}.frow.head{position:sticky;top:0;background:var(--surface-raised);color:var(--text-muted);padding:10px 14px;z-index:1;flex-shrink:0}.hbtn{border:0;background:transparent;color:var(--text-muted);text-align:left;padding:0;font-size:12px}.hbtn:hover{color:var(--text);background:transparent}.fname{border:0;background:transparent;text-align:left;padding:0;color:var(--text);white-space:normal;word-break:break-all;line-height:1.5;font-size:13px}.fname:hover{color:var(--accent);background:transparent}.fsize,.fmtime{color:var(--text-muted);text-align:right;white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}.gutter{background:var(--border);cursor:col-resize;border:1px solid var(--surface)}.gutter:hover,.gutter:active{background:var(--accent)}.gutter-rail{grid-column:2;grid-row:1/4}.main{flex:1;display:grid;grid-template-columns:150px 5px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto 28px;min-width:0;min-height:0}.toolbar,.toolbar-bottom{grid-column:3;background:var(--surface);padding:8px 12px;overflow:hidden;min-width:0}.toolbar{grid-row:1;border-bottom:1px solid var(--border)}.toolbar-bottom{grid-row:3;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}.toolbar-bottom .tool-row{flex:1;min-width:0}.tool-row{display:flex;align-items:center;justify-content:safe center;gap:5px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px;min-height:32px}.tool-row button{font-size:13px;padding:5px 9px;flex-shrink:0}.tool-label{font-size:12px;color:var(--text-muted);letter-spacing:.5px;margin-right:4px;flex-shrink:0}.separator{width:1px;height:18px;background:var(--border);flex:0 0 auto;margin:0 7px}.control{display:flex;flex:0 0 auto;align-items:center;gap:7px;white-space:nowrap;font-size:12px;color:var(--text-muted)}.control select{padding:4px 6px;max-width:150px;font-size:12px}.control select[aria-label=差分基准]{width:128px}.range-wrap{display:flex;align-items:center;gap:7px}.range-wrap input{width:82px;padding:0}.range-wrap output{font-variant-numeric:tabular-nums;min-width:30px;font-size:12px;color:var(--accent)}.range-edit{width:64px;padding:2px 4px;font-size:12px}.lane-rail{grid-column:1;grid-row:1/4;overflow-y:auto;background:var(--surface);padding:12px 9px;display:flex;flex-direction:column;gap:10px;min-height:0}.group-search{width:100%;font-size:12px}.compare-group-list{display:flex;flex-direction:column;gap:4px;max-height:33%;min-height:40px;overflow:auto;flex-shrink:0}.compare-group{display:flex;justify-content:space-between;gap:4px;padding:6px;border:1px solid var(--border);border-radius:5px;font-size:12px;cursor:grab}.compare-group span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compare-group small{color:var(--text-muted)}.compare-group.active{background:var(--selected);border-color:var(--accent)}.rail-title{padding:6px 2px 0}.lane{border:1px solid var(--border);border-radius:6px;padding:5px;cursor:grab}.lane:hover{border-color:var(--text-muted)}.lane.diff-base{border-color:var(--accent)}.lane-thumb{height:86px;background:var(--canvas);display:grid;place-items:center;overflow:hidden;border-radius:3px}.lane-thumb img{max-width:100%;max-height:100%;object-fit:contain}.lane-name{font-size:12px;color:var(--text-muted);word-break:break-all;line-height:1.5;margin:6px 2px 2px}.canvas-wrap{grid-column:3;grid-row:2;position:relative;min-height:0;min-width:0;overflow:hidden;background:var(--canvas)}#compare-canvas{display:block;width:100%;height:100%;cursor:crosshair;outline:none;touch-action:none}#compare-canvas.dragging{cursor:grabbing}.groups{display:flex;gap:6px;align-items:center;justify-content:flex-start;flex:0 0 auto;min-width:0}.groups>span{white-space:nowrap;color:var(--text-muted);font-size:12px}.groups>input{width:48px;text-align:center;padding:4px}.groups .page-info{max-width:100px;overflow:hidden;text-overflow:ellipsis}.group-arrow{padding:0 9px;font-size:20px;line-height:27px}.statusbar{grid-column:1/-1;grid-row:4;background:var(--bg);border-top:1px solid var(--border);font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 14px;color:var(--text-muted);overflow:hidden}.statusbar span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.notice-error{padding:9px 16px;background:var(--danger-bg);color:var(--danger);border-bottom:1px solid var(--border);cursor:pointer;z-index:50;font-size:13px}.notice-info{padding:9px 16px;background:var(--selected);color:var(--accent);border-bottom:1px solid var(--border);cursor:pointer;z-index:50;font-size:13px}.area-tag{color:var(--text-muted);font-size:11px;flex-shrink:0;padding:0 8px 0 2px}.fname-cell{display:flex;align-items:center;gap:10px;min-width:0}.fname-cell .fname{flex:1;min-width:0}.row-actions{display:flex;gap:4px;flex-shrink:0}.mini{padding:2px 7px;font-size:12px;background:var(--surface-raised)}.tcard-actions{position:absolute;top:7px;right:7px;z-index:1}.tcard-actions .row-actions{gap:4px}.guest-banner{display:flex;align-items:center;gap:12px;padding:8px 20px;background:var(--selected);border-bottom:1px solid var(--border);color:var(--accent);font-size:12px;line-height:1.6;z-index:20}.guest-banner>span{flex:1;min-width:0}.guest-banner button{flex-shrink:0}.field-label{font-size:12px;color:var(--text-muted);letter-spacing:.5px;margin:16px 0 6px}.radio-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:4px}.share-list{display:flex;flex-direction:column;gap:6px;max-height:210px;overflow:auto}.share-row{display:flex;align-items:center;gap:6px;font-size:12px}.share-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-variant-numeric:tabular-nums}.share-row select{max-width:132px;padding:3px 5px;font-size:12px}.share-row button{padding:3px 8px;font-size:12px}.guest-rules{margin:10px 0 0;padding-left:20px;color:var(--text-muted);font-size:13px;line-height:1.8}.login-admin{font-size:12px;color:var(--text-muted)}.login-admin summary{cursor:pointer;padding:6px 0}.login-form{display:flex;flex-direction:column;gap:12px;margin-top:8px}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:40;display:grid;place-items:center;padding:20px}.dialog{width:560px;max-width:100%;max-height:90vh;overflow:auto;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);line-height:1.7;color:var(--text)}.dialog-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.dialog-title h2{font-size:18px;font-weight:600}.dialog p{color:var(--text-muted);font-size:13px}.dialog>input{width:100%;padding:9px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.dialog dt{font-weight:600;margin-top:16px;font-size:13px}.dialog dd{color:var(--text-muted);margin:5px 0 0;font-size:13px}.gif-row{display:flex;align-items:center;gap:12px;margin:8px 0}.gif-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-muted)}.gif-row input{width:220px}.gif-out img{display:block;max-width:100%;margin-top:16px}.login{min-height:100dvh;display:grid;place-items:center;background:var(--bg)}.login-card{width:360px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}.login-mark{width:44px;height:44px;border:1px solid var(--border);border-radius:10px;background:var(--surface-raised);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:16px;margin-bottom:8px}.login-card h1{font-size:25px;font-weight:600;letter-spacing:-.8px}.login-card p{color:var(--text-muted);font-size:13px;line-height:1.6}.login-card label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--text-muted)}.login-card input{padding:10px;font-size:14px}.login-card button[type=submit]{margin-top:6px;padding:10px;background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.login-error{color:var(--danger);font-size:12px}.danger{background:var(--danger-bg);border-color:var(--border);color:var(--danger)}.danger:hover{background:var(--danger-bg);border-color:var(--danger)}.thumbgrid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-auto-rows:max-content;gap:14px;padding:3px;background:var(--bg);align-content:start}.tcard{position:relative;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer;overflow:hidden}.tcard input[type=checkbox]{position:absolute;top:10px;left:10px}.tcard:hover{border-color:var(--text-muted)}.tcard.checked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--selected)}.tcard img{display:block;width:100%;height:132px;object-fit:contain;background:var(--canvas)}.tcard .tdir{height:132px;display:grid;place-items:center;font-size:36px;color:var(--accent);background:var(--surface-raised)}.tname2{font-size:12px;color:var(--text);word-break:break-all;padding:10px 12px;line-height:1.5}@media(max-width:1100px){.tagline,.statusbar .quality-status{display:none}.topbar{padding:0 12px}.picker-main{padding:16px}}@media(max-width:760px){.topbar{height:52px;gap:5px}.account{display:none}.brand{margin-right:auto;font-size:14px}.brand-mark{display:none}.topbar button{padding:5px 7px;font-size:12px}.picker-main{padding:12px;gap:9px}.filebar{flex-wrap:wrap}.filebar input{flex-basis:100%}.picker-heading h1{font-size:20px}.picker-heading .muted{display:none}.filter-row input{width:160px}.frow{grid-template-columns:20px minmax(0,1fr) 60px 105px;padding:9px 8px}.thumbgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.toolbar{padding:7px 9px}.statusbar{font-size:12px}}@media(prefers-reduced-motion:reduce){button{transition:none}}