*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}img,svg{display:block}:root{--bg: #f0f0ee;--surface: #fafaf9;--border: #d4d4d0;--text-primary: #1a1a18;--text-secondary: #6b6b67;--accent: #1a1a18;--danger: #c0392b;--warning: #b7791f;--font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--text-xs: 11px;--text-sm: 12px;--text-base: 13px;--text-lg: 15px;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px}body{font-family:var(--font-ui);font-size:var(--text-base);line-height:1.5;color:var(--text-primary);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:grid;grid-template-rows:56px 1fr;grid-template-columns:260px 1fr;grid-template-areas:"header  header" "list    preview";height:100vh;width:100vw}.app-header{grid-area:header;display:flex;align-items:center;padding:0 var(--s-4);background:var(--surface);border-bottom:1px solid var(--border);font-size:var(--text-sm);font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--text-secondary);user-select:none}.app-list{grid-area:list;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border)}.app-preview{grid-area:preview;overflow:auto;padding:var(--s-4);display:flex;align-items:flex-start;justify-content:center;background:var(--bg)}.sheet-preview svg{display:block;max-width:100%;max-height:100%;box-shadow:0 0 0 1px var(--border);background:#fff}.toasts{position:fixed;top:var(--s-3);right:var(--s-3);z-index:9999;display:flex;flex-direction:column;gap:var(--s-2);pointer-events:none}.toast{display:flex;align-items:baseline;gap:var(--s-2);padding:var(--s-2) var(--s-3);background:var(--surface);border:1px solid var(--border);border-radius:3px;min-width:220px;max-width:360px;pointer-events:auto;opacity:0;animation:toast-in .15s ease forwards}@keyframes toast-in{to{opacity:1}}.toast-info{border-color:var(--border)}.toast-error{border-color:var(--danger);color:var(--danger)}.toast-text{flex:1;font-size:var(--text-sm);line-height:1.4;color:inherit}.toast-info .toast-text{color:var(--text-primary)}.toast-close{flex-shrink:0;appearance:none;background:none;border:none;padding:0;line-height:1;font-size:var(--text-lg);cursor:pointer;color:var(--text-secondary);opacity:.7;transition:opacity .1s}.toast-close:hover{opacity:1}.header{display:flex;align-items:center;width:100%;height:100%;gap:var(--s-4)}.header-title{font-size:var(--text-sm);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;flex-shrink:0}.header-counters{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s-3);font-size:var(--text-sm);color:var(--text-secondary);font-variant-numeric:tabular-nums}.header-warning{color:var(--warning);font-weight:500}.header-actions{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0}.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 var(--s-3);border-radius:3px;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:500;letter-spacing:.02em;cursor:pointer;white-space:nowrap;transition:background .1s ease,border-color .1s ease,opacity .1s ease;outline-offset:2px}.btn:focus-visible{outline:2px solid var(--accent)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:var(--accent);color:var(--surface);border:1px solid var(--accent)}.btn-primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 85%,transparent);border-color:color-mix(in srgb,var(--accent) 85%,transparent)}.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.slot-list{display:flex;flex-direction:column;height:100%;overflow:hidden}.slot-list-dropzone{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.slot-list-items{list-style:none;padding:0;margin:0;overflow-y:auto;flex:1}.slot-list-items li+li{border-top:1px solid var(--border)}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);padding:var(--s-4) var(--s-3);margin:var(--s-3);border:1.5px dashed var(--border);border-radius:4px;background:transparent;color:var(--text-secondary);cursor:pointer;user-select:none;transition:border-color .12s ease,background .12s ease,color .12s ease;outline:none}.drop-zone:hover,.drop-zone:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent);color:var(--text-primary)}.drop-zone--dragging{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text-primary)}.drop-zone__icon{font-size:20px;line-height:1;font-weight:300;color:var(--text-secondary);transition:color .12s ease}.drop-zone:hover .drop-zone__icon,.drop-zone:focus-visible .drop-zone__icon,.drop-zone--dragging .drop-zone__icon{color:var(--accent)}.drop-zone__label{font-size:var(--text-sm);font-weight:500}.drop-zone__hint{font-size:var(--text-xs);color:var(--text-secondary);letter-spacing:.04em}.slot-row{display:flex;align-items:flex-start;gap:var(--s-2);padding:var(--s-2) var(--s-3);cursor:pointer;border-bottom:1px solid var(--border);background:var(--surface);transition:background .1s ease;position:relative;min-height:60px}.slot-row:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}.slot-row[data-selected=true]{background:color-mix(in srgb,var(--accent) 8%,var(--surface));box-shadow:inset 2px 0 0 var(--accent)}.slot-thumb{flex-shrink:0;width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid var(--border);background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .1s ease,opacity .1s ease;outline-offset:2px}.slot-thumb:hover{border-color:var(--accent);opacity:.85}.slot-thumb:focus-visible{outline:2px solid var(--accent)}.slot-thumb img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.thumb-empty{width:100%;height:100%;border-radius:50%;background-color:var(--bg);background-image:repeating-linear-gradient(45deg,var(--border) 0px,var(--border) 1px,transparent 1px,transparent 6px)}.slot-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:2px}.slot-filename{font-size:var(--text-sm);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.slot-dims{display:flex;align-items:center;gap:var(--s-1);font-size:var(--text-xs);color:var(--text-secondary);line-height:1.3;font-variant-numeric:tabular-nums}.dpi-badge{display:inline-flex;align-items:center;padding:0 5px;height:16px;border-radius:3px;font-size:10px;font-weight:600;letter-spacing:.03em;color:var(--warning);background:color-mix(in srgb,var(--warning) 12%,transparent);border:1px solid color-mix(in srgb,var(--warning) 30%,transparent);cursor:help;white-space:nowrap}.slot-fit-toggle{display:flex;gap:2px;margin-top:3px}.slot-fit-toggle button{appearance:none;border:1px solid var(--border);border-radius:3px;background:transparent;padding:0 6px;height:18px;font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--text-secondary);cursor:pointer;transition:background .1s ease,border-color .1s ease,color .1s ease;font-family:var(--font-ui);line-height:1}.slot-fit-toggle button:hover:not(:disabled){border-color:var(--accent);color:var(--text-primary)}.slot-fit-toggle button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--surface)}.slot-fit-toggle button:disabled{opacity:.35;cursor:default}.slot-fit-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.slot-remove{flex-shrink:0;appearance:none;background:none;border:none;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--text-secondary);cursor:pointer;border-radius:3px;opacity:0;transition:opacity .1s ease,color .1s ease,background .1s ease;margin-top:2px}.slot-row:hover .slot-remove,.slot-row[data-selected=true] .slot-remove{opacity:.6}.slot-remove:hover{opacity:1!important;color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}.slot-remove:focus-visible{outline:2px solid var(--danger);outline-offset:1px;opacity:1}