:root{color:#111827;background:#f5f7fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg: #f5f7fb;--surface: #ffffff;--surface-muted: #f8fafc;--ink: #111827;--muted: #667085;--subtle: #98a2b3;--line: #dde3ee;--line-strong: #c8d0df;--accent: #2f49d7;--accent-strong: #2037b6;--accent-soft: #edf2ff;--danger: #dc2626;--shadow: 0 18px 45px rgba(15, 23, 42, .08);--topbar-bg: rgba(255, 255, 255, .94);--drop-bg: rgba(255, 255, 255, .42);--table-head: #fbfcfe;--row-ink: #344054;--pill-bg: #eef0f3;--pill-ink: #526071;--checker: #eef2f7;--thumb-bg: #e9edf5;--drop-border: #b8c0ce;--focus-ring: rgba(47, 73, 215, .16)}:root[data-theme=dark]{color:#e5e7eb;background:#0b1120;--bg: #0b1120;--surface: #111827;--surface-muted: #162033;--ink: #eef2ff;--muted: #a5b4cf;--subtle: #718096;--line: #273449;--line-strong: #3b4a63;--accent: #5b7cfa;--accent-strong: #7b95ff;--accent-soft: rgba(91, 124, 250, .16);--danger: #f87171;--shadow: 0 18px 45px rgba(0, 0, 0, .26);--topbar-bg: rgba(17, 24, 39, .9);--drop-bg: rgba(17, 24, 39, .34);--table-head: #121c2c;--row-ink: #dbe4f5;--pill-bg: #243044;--pill-ink: #c6d1e4;--checker: #1b2639;--thumb-bg: #1d2a3d;--drop-border: #41506a;--focus-ring: rgba(91, 124, 250, .22)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(180deg,#ffffffe6,#f5f7fbf2),var(--bg)}:root[data-theme=dark] body{background:linear-gradient(180deg,#111827b8,#0b1120f5),var(--bg)}button,input{font:inherit}button{cursor:pointer}button:disabled,a[aria-disabled=true]{cursor:not-allowed;opacity:.58}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-panel{width:min(420px,100%);display:grid;gap:18px;padding:30px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--shadow)}:root[data-theme=dark] .login-panel{border-color:#5b7cfa38;background:#111827eb}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:8px;color:var(--accent);background:var(--accent-soft)}.login-panel h1,.page-heading h1{margin:0;font-size:26px;line-height:1.15;letter-spacing:0}.login-panel p,.page-heading p{margin:7px 0 0;color:var(--muted)}.field{display:grid;gap:8px;color:var(--muted);font-size:14px}.field input{width:100%;height:44px;border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--ink);background:var(--surface);outline:none}.field input::placeholder{color:var(--subtle)}:root[data-theme=dark] .field input{border-color:#33445f;background:#0c1424}:root[data-theme=dark] .primary-action{border-color:var(--accent);color:#fff;background:#536fe8}:root[data-theme=dark] .primary-action:hover:not(:disabled){background:var(--accent-strong)}.field input:focus,.dropzone:focus-visible,.dropzone:focus-within,.icon-button:focus-visible,.page-tabs button:focus-visible,.primary-action:focus-visible,.secondary-action:focus-visible{border-color:var(--accent);outline:3px solid var(--focus-ring)}.app-shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:10;height:64px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:54px;padding:0 32px;border-bottom:1px solid var(--line);background:var(--topbar-bg)}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:999px;background:transparent;color:var(--accent);font-weight:750;font-size:13px}.brand strong,.brand span{display:block}.brand strong{font-size:20px;font-weight:750;letter-spacing:0}.brand span{margin-top:2px;color:var(--subtle);font-size:12px}.page-tabs{display:flex;align-items:center;align-self:stretch;gap:28px;padding:0;border:0;border-radius:0;background:transparent}.page-tabs button{position:relative;height:100%;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:0;padding:0 12px;color:var(--muted);background:transparent;font-size:16px;font-weight:650}.page-tabs svg,.brand-icon svg,.top-actions svg{stroke-width:2.1}.page-tabs button.active{color:var(--accent);border-color:transparent;background:transparent;box-shadow:none}.page-tabs button.active:after{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);content:""}.page{width:min(960px,calc(100% - 64px));margin:0 auto;padding:32px 0 24px}.upload-page{width:min(960px,calc(100% - 64px))}.page-drop-hint{position:fixed;top:14px;right:14px;bottom:14px;left:14px;z-index:30;display:grid;place-items:center;align-content:center;gap:10px;border:1px dashed var(--accent);border-radius:8px;color:var(--accent);background:color-mix(in srgb,var(--surface) 78%,transparent);box-shadow:inset 0 0 0 1px var(--focus-ring);pointer-events:none}.page-drop-hint strong{color:var(--ink);font-size:16px;font-weight:650}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.upload-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;align-items:start}.surface{border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 18px 48px #0f172a0a}.upload-surface,.preview-surface{padding:18px}.dropzone{width:100%;min-height:230px;display:grid;place-items:center;align-content:center;gap:9px;border:1px dashed var(--line-strong);border-radius:8px;padding:24px;color:var(--muted);background:var(--surface-muted);text-align:center}.dropzone.compact{min-height:150px}.dropzone svg{color:var(--accent)}.dropzone strong{max-width:100%;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropzone span{max-width:320px;font-size:13px;line-height:1.5}.queue-surface{margin-top:20px;padding:0;border:0;background:transparent;box-shadow:none}.queue-dropzone{position:relative;min-height:164px;margin:0 0 22px;border-color:var(--drop-border);background:var(--drop-bg);cursor:pointer;overflow:hidden}.upload-page.dragging .queue-dropzone{border-color:var(--accent);background:var(--accent-soft)}.queue-card{overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 18px 48px #0f172a0a}.queue-dropzone svg{color:var(--accent);width:46px;height:46px}.file-input-native{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;opacity:0;cursor:pointer}.queue-dropzone>svg,.queue-dropzone>strong,.queue-dropzone>span{pointer-events:none}.queue-dropzone strong{margin-top:8px;font-size:16px;font-weight:650}.queue-dropzone span{max-width:none;color:var(--muted);font-size:14px}.queue-toolbar{min-height:68px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:0 26px}.queue-toolbar strong,.queue-toolbar span{display:block}.queue-toolbar strong{color:var(--ink);font-size:18px;font-weight:650}.queue-toolbar span{margin-top:5px;color:var(--muted);font-size:13px}.queue-tools{display:flex;align-items:center;gap:14px}.quality-control{width:280px;display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:10px}.quality-control label{display:grid;gap:8px;color:var(--muted);font-size:12px}.quality-control input{width:100%;accent-color:var(--accent)}.quality-control output{height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface-muted);color:var(--ink);font-size:13px;font-weight:650}.queue-header,.queue-row{display:grid;grid-template-columns:minmax(280px,2fr) minmax(100px,.7fr) minmax(150px,1fr) minmax(100px,.7fr) minmax(230px,1.2fr);align-items:center}.queue-header{min-height:44px;padding:0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);background:var(--table-head);font-size:14px}.queue-header span:last-child{text-align:center}.upload-queue{display:grid}.queue-row{min-width:0;min-height:68px;gap:0;padding:0 26px;border-bottom:1px solid var(--line);background:var(--surface)}.queue-row:last-child{border-bottom:0}.queue-name{min-width:0;display:flex;align-items:center;gap:18px}.queue-thumb{width:68px;height:44px;display:block;flex:0 0 auto;border-radius:6px;object-fit:cover;background:var(--thumb-bg)}.queue-file{min-width:0;display:grid;gap:4px}.queue-file strong,.queue-file small,.queue-size{overflow:hidden;color:var(--row-ink);text-overflow:ellipsis;white-space:nowrap}.queue-file strong,.queue-size{font-size:15px;font-weight:500}.queue-file small{max-width:420px;color:var(--muted);font-size:11px}.queue-file .row-error{color:var(--danger)}.status-pill{width:fit-content;min-width:74px;display:inline-flex;justify-content:center;border:0;border-radius:999px;padding:5px 11px;color:var(--pill-ink);background:var(--pill-bg);font-size:13px;line-height:1;white-space:nowrap}.status-pill.ready,.status-pill.done{color:var(--pill-ink);background:var(--pill-bg)}.status-pill.uploading{color:var(--accent);background:var(--accent-soft)}.status-pill.error{color:var(--danger);background:#fef2f2}.queue-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px}.queue-actions .icon-button{width:28px;height:28px;border:0;border-radius:6px;color:var(--row-ink);background:transparent}.queue-actions .icon-button svg{width:20px;height:20px;stroke-width:1.9}.queue-actions .icon-button:hover:not(:disabled){color:var(--accent);background:transparent}.queue-tools>.icon-button{width:60px;height:46px;border-color:var(--accent);color:#fff;background:var(--accent)}.queue-tools>.icon-button:hover:not(:disabled){border-color:var(--accent-strong);color:#fff;background:var(--accent-strong)}.empty-queue{min-height:110px;display:grid;place-items:center;gap:8px;color:var(--subtle);background:var(--surface);font-size:14px}.control-row{display:grid;grid-template-columns:1fr 48px;align-items:center;gap:14px;margin-top:18px}.control-row label{display:grid;gap:10px;color:var(--muted);font-size:14px}.control-row input{width:100%;accent-color:var(--accent)}.control-row output{height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface-muted);font-weight:650}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.primary-action,.secondary-action{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:0 14px;font-weight:650}.primary-action{border:1px solid var(--accent);color:#fff;background:var(--accent)}.primary-action:hover:not(:disabled){background:var(--accent-strong)}.secondary-action{border:1px solid var(--line);color:var(--ink);background:var(--surface)}.secondary-action:hover:not(:disabled),.icon-button:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-muted)}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.preview-item{min-width:0}.preview-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;color:var(--muted);font-size:13px}.preview-title span{color:var(--ink);font-weight:650}.image-preview{aspect-ratio:4 / 3;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:8px;color:var(--subtle);background:linear-gradient(45deg,var(--checker) 25%,transparent 25%),linear-gradient(-45deg,var(--checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker) 75%),linear-gradient(-45deg,transparent 75%,var(--checker) 75%),var(--surface);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.image-preview img{width:100%;height:100%;object-fit:contain}.result-bar{min-height:72px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-muted)}.result-bar.ready{border-color:#4f46e547;background:var(--accent-soft)}.result-bar span,.result-bar strong{display:block}.result-bar span{color:var(--muted);font-size:12px}.result-bar strong{margin-top:5px;overflow:hidden;color:var(--ink);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.result-actions,.tile-actions{display:flex;align-items:center;gap:6px}.icon-button{width:36px;height:36px;display:inline-grid;place-items:center;flex:0 0 auto;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:var(--surface);text-decoration:none}.settings-menu{position:relative;display:flex;justify-content:flex-end}.settings-menu>.icon-button{border-color:transparent;color:var(--row-ink);background:transparent}.top-actions{display:flex;align-items:center;gap:16px}.top-actions>.icon-button{width:38px;height:38px;border-color:transparent;color:var(--row-ink);background:transparent}.top-divider{width:1px;height:30px;background:var(--line)}.settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:28px;background:#0f172a57}.settings-modal{width:min(760px,100%);max-height:min(720px,calc(100vh - 56px));overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 28px 80px #0f172a3d}.settings-modal-header{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px 16px 22px;border-bottom:1px solid var(--line)}.settings-modal-header h2,.settings-modal-header p{margin:0}.settings-modal-header h2{color:var(--ink);font-size:18px;font-weight:700}.settings-modal-header p{margin-top:4px;color:var(--muted);font-size:12px}.settings-modal-body{display:grid;grid-template-columns:156px minmax(0,1fr);min-height:380px}.settings-tabs{display:grid;align-content:start;gap:4px;padding:14px;border-right:1px solid var(--line);background:var(--surface-muted)}.settings-tabs button{height:38px;border:0;border-radius:7px;padding:0 12px;color:var(--muted);background:transparent;text-align:left;font-weight:650}.settings-tabs button.active,.settings-tabs button:hover{color:var(--ink);background:var(--surface)}.settings-panel{overflow:auto;padding:20px 22px}.settings-section{display:grid;gap:14px}.settings-section>strong{color:var(--muted);font-size:12px;font-weight:650}.settings-field{display:grid;gap:7px;color:var(--muted);font-size:12px}.settings-field input,.settings-field select{width:100%;height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;color:var(--ink);background:var(--surface-muted);outline:none}.settings-field input:focus,.settings-field select:focus{border-color:var(--accent);outline:3px solid var(--focus-ring)}.settings-range{display:grid;grid-template-columns:minmax(0,1fr) 46px;align-items:center;gap:10px}.settings-range input{height:auto;padding:0;accent-color:var(--accent)}.settings-range output{height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface-muted);font-size:13px;font-weight:650}.settings-hint{margin:0;color:var(--subtle);font-size:12px;line-height:1.6}.settings-logout{width:100%;height:36px;display:flex;align-items:center;gap:8px;border:0;border-radius:6px;margin-top:8px;padding:0 10px;color:var(--row-ink);background:transparent}.settings-logout:hover{background:var(--surface-muted)}.icon-button.danger{color:var(--danger)}.gallery-heading-actions{display:flex;align-items:center;gap:8px}.gallery-grid.masonry{columns:236px;column-gap:14px}.gallery-grid.detail{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.image-tile{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 12px 28px #0f172a0f}.gallery-grid.masonry .image-tile{width:100%;display:inline-block;break-inside:avoid;margin:0 0 14px}.thumb{display:block;overflow:hidden;background:var(--thumb-bg)}.gallery-grid.detail .thumb{aspect-ratio:1 / .78}.thumb img{width:100%;display:block}.gallery-grid.masonry .thumb img{height:auto}.gallery-grid.detail .thumb img{height:100%;object-fit:cover}.tile-overlay{min-width:0}.gallery-grid.masonry .tile-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;padding:10px;background:linear-gradient(180deg,rgba(15,23,42,.28),transparent 34%),linear-gradient(0deg,rgba(15,23,42,.5),transparent 44%);opacity:0;pointer-events:none;transition:opacity .16s ease}.gallery-grid.masonry .image-tile:is(:hover,:focus-within) .tile-overlay{opacity:1;pointer-events:auto}.gallery-grid.detail .tile-overlay{display:block}.tile-meta{display:grid;gap:5px;padding:11px 11px 0}.gallery-grid.masonry .tile-meta{position:absolute;left:10px;right:10px;bottom:10px;padding:0}.tile-meta strong{overflow:hidden;color:var(--ink);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.tile-meta span{color:var(--muted);font-size:12px}.gallery-grid.masonry .tile-meta strong,.gallery-grid.masonry .tile-meta span{color:#ffffffe0;text-shadow:0 1px 5px rgba(0,0,0,.18)}.tile-actions{justify-content:flex-end;padding:10px}.gallery-grid.masonry .tile-actions{position:absolute;top:10px;right:10px;padding:0}.tile-actions .icon-button{width:32px;height:32px;border-radius:7px}.gallery-grid.masonry .tile-actions .icon-button{border-color:#ffffff3d;color:#ffffffdb;background:#0f172a42}.gallery-grid.masonry .tile-actions .icon-button:hover:not(:disabled){border-color:#fff6;color:#fffffff5;background:#0f172a6b}.form-error{margin:14px 0 0;color:var(--danger);font-size:13px}.empty-state,.load-more{margin-top:28px;display:grid;place-items:center;color:var(--muted)}.spin{animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:860px){.topbar{grid-template-columns:1fr auto;height:auto;padding:14px 16px}.page-tabs{grid-column:1 / -1;width:100%}.page-tabs button{flex:1;justify-content:center}.top-actions{justify-content:flex-end}.page{width:min(100% - 28px,680px);padding-top:24px}.upload-layout,.preview-grid,.result-bar,.queue-toolbar,.queue-row{grid-template-columns:1fr}.queue-header{display:none}.queue-tools{flex-wrap:wrap;justify-content:flex-start}.queue-actions{justify-content:flex-start}.settings-modal-body{grid-template-columns:1fr}.settings-tabs{grid-template-columns:repeat(4,1fr);border-right:0;border-bottom:1px solid var(--line)}.settings-tabs button{text-align:center}}@media(max-width:520px){.page-heading{align-items:flex-start}.page-heading h1{font-size:24px}.action-row{grid-template-columns:1fr}.upload-page{width:min(100% - 28px,680px)}.queue-row{gap:10px}.status-pill{width:fit-content}.login-panel{padding:22px}.settings-backdrop{padding:12px}.settings-tabs{grid-template-columns:repeat(2,1fr)}}