:root{--border:#d9d7de;--panel:#f5f4f7;--chip-bg:#fdf2d0;--chip-border:#e7caaa;--accent:#162e64;--accent-contrast:#fff;--muted:#6f6b78;--warn-text:#9a3b12;--warn-bg:#fdeee5;--error:#c22f2f}@media (prefers-color-scheme:dark){:root{--border:#3a3841;--panel:#201f24;--chip-bg:#3b2d1e;--chip-border:#7a5f45;--accent:#fb713c;--accent-contrast:#041b55;--muted:#a09caa;--warn-text:#f2b28c;--warn-bg:#3a2417;--error:#ef8080}}main{max-width:72rem;margin:0 auto;padding:2rem 1rem 4rem}.app-header p{color:var(--muted)}.step{margin-top:2.5rem}.step h2{border-bottom:1px solid var(--border);padding-bottom:.4rem;font-size:1.15rem}.hint{color:var(--muted);font-size:.9rem}.dropzone{border:2px dashed var(--border);text-align:center;color:var(--muted);cursor:pointer;border-radius:8px;padding:2rem 1rem}.dropzone-active,.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);color:var(--accent)}.file-list{flex-direction:column;gap:.35rem;margin:.5rem 0 0;padding:0;list-style:none;display:flex}.file-item{background:var(--panel);border:1px solid var(--border);cursor:grab;touch-action:none;border-radius:6px;align-items:center;gap:.6rem;padding:.45rem .7rem;display:flex}.file-item.dragging{opacity:.5}.file-position{min-width:1.5rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}.file-name{overflow-wrap:anywhere;flex:1}.thumb{width:var(--thumb-size,44px);height:var(--thumb-size,44px);object-fit:cover;border:1px solid var(--border);background:var(--panel);border-radius:6px;flex:none}.thumb-placeholder{font-size:calc(var(--thumb-size,44px) * .4);justify-content:center;align-items:center;display:inline-flex}.thumb-button{cursor:zoom-in;background:0 0;border:none;border-radius:6px;flex:none;padding:0;display:inline-flex}.lightbox-backdrop{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.lightbox-content{flex-direction:column;align-items:center;gap:.6rem;margin:0;display:flex}.lightbox-content img{background:var(--bg);border-radius:8px;width:auto;max-width:calc(100vw - 3rem);height:auto;max-height:calc(100vh - 6rem)}.lightbox-content figcaption{color:#fff;text-align:center;overflow-wrap:anywhere;max-width:calc(100vw - 3rem);font-size:.9rem}.lightbox-close{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:50%;width:2.4rem;height:2.4rem;font-size:1.1rem;position:fixed;top:1rem;right:1rem}.lightbox-close:hover{background:#ffffff4d}.thumb-cell{width:var(--thumb-size,44px)}.thumb-size-control{color:var(--muted);align-items:center;gap:.4rem;margin-bottom:.6rem;font-size:.85rem;display:flex}.thumb-size-button{font:inherit;border:1px solid var(--border);background:var(--panel);width:1.7rem;height:1.7rem;color:inherit;cursor:pointer;border-radius:6px;line-height:1}.thumb-size-button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.thumb-size-button:disabled{opacity:.4;cursor:not-allowed}.remove-button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.1rem .35rem;font-size:.85rem}.remove-button:hover{color:var(--error);background:var(--border)}.palette{flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;display:flex}.token-chip{background:var(--chip-bg);border:1px solid var(--chip-border);color:inherit;border-radius:999px;align-items:center;gap:.3rem;padding:.35rem .7rem;font-size:.9rem;display:inline-flex}.palette-chip{cursor:grab;touch-action:none}.palette-chip.dragging{z-index:10;opacity:.85;position:relative}.rule-area{border:2px dashed var(--border);border-radius:8px;flex-wrap:wrap;align-items:center;gap:.4rem;min-height:3.4rem;padding:.6rem;display:flex}.rule-area-over{border-color:var(--accent)}.rule-placeholder{color:var(--muted);font-size:.9rem}.drop-slot{border:2px dashed var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);border-radius:999px;align-self:center;width:2.75rem;height:2rem;animation:.13s ease-out drop-slot-in}@keyframes drop-slot-in{0%{opacity:0;width:0}to{opacity:1;width:2.75rem}}@media (prefers-reduced-motion:reduce){.drop-slot{animation:none}}.rule-chip{cursor:grab;touch-action:none}.rule-chip.dragging{opacity:.5}.ext-chip{border-style:dashed;border-color:var(--border);color:var(--muted);background:0 0;margin-left:auto}.token-settings{flex-direction:column;gap:.6rem;margin-top:.75rem;display:flex}.settings-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:.7rem .9rem}.settings-label{margin-bottom:.4rem;font-size:.9rem;font-weight:600;display:block}.settings-row{flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;display:flex}.settings-row label{align-items:center;gap:.4rem;font-size:.9rem;display:inline-flex}.source-choice{flex-wrap:wrap;gap:.25rem 1rem;display:flex}.settings-panel input[type=text],.settings-panel select,.settings-panel input[type=date],.settings-panel input[type=time]{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.3rem .5rem}.settings-panel input[type=text]{width:min(100%,20rem)}.field-error{color:var(--error);margin:.35rem 0 0;font-size:.85rem}.duplicate-notice{color:var(--warn-text);background:var(--warn-bg);border-radius:6px;padding:.6rem .9rem;font-size:.9rem}.preview-table{border-collapse:collapse;width:100%;font-size:.95rem}.preview-table th,.preview-table td{text-align:left;border-bottom:1px solid var(--border);overflow-wrap:anywhere;padding:.45rem .6rem}.preview-table th{color:var(--muted);font-size:.85rem;font-weight:600}.preview-table .arrow{color:var(--muted);white-space:nowrap}.duplicate-row td{background:var(--warn-bg);color:var(--warn-text)}.confirm-row{flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1.25rem;display:flex}.confirm-button{font:inherit;background:var(--accent);color:var(--accent-contrast);cursor:pointer;border:none;border-radius:8px;padding:.55rem 1.4rem;font-weight:600}.confirm-button:disabled{opacity:.45;cursor:not-allowed}.confirm-note{color:var(--muted);margin:0;font-size:.85rem}.confirm-error{color:var(--error);margin:0;font-size:.85rem}