:root{color-scheme:light;font-family:Inter,Segoe UI,system-ui,sans-serif;background-color:#f4f6fb;color:#1d1f27}*{box-sizing:border-box}body{margin:0;padding:0;background:radial-gradient(circle at top,#f8f9ff,#eef2f8 45%,#e9eef6)}.app{max-width:1280px;margin:0 auto;padding:40px 32px 56px;display:flex;flex-direction:column;gap:28px}header h1{margin-bottom:8px;font-size:2rem}.workspace{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:24px}.panel{display:flex;flex-direction:column;gap:20px;background:#fff;border-radius:18px;padding:22px;box-shadow:0 16px 40px #1b275e1f}.panel-header h2{margin:0 0 6px;font-size:1.25rem}.panel-header p{margin:0;color:#5d6477;font-size:.95rem}.panel-right{gap:18px}.control{display:flex;flex-direction:column;gap:8px}.control-label{font-weight:600;color:#3b4359}.template-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;max-height:520px;overflow:auto;padding-right:6px}.template-option{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:#f6f8ff;border:1px solid transparent;transition:border .2s ease,background .2s ease}.template-option input{position:absolute;top:10px;right:10px;width:18px;height:18px;accent-color:#2f6fed}.template-option:hover{border-color:#c6d4f7;background:#eef3ff}.template-preview{width:100%;border-radius:12px;overflow:hidden;border:1px solid #d9deeb;background:#fff}.template-preview img{display:block;width:100%;height:120px;object-fit:cover}.template-name{font-weight:600;color:#3b4359;font-size:.92rem}.drop-zone{border:2px dashed #b2b7c6;border-radius:14px;padding:18px;text-align:center;color:#5d6477;background:#f5f6fb;transition:border .2s ease,background .2s ease,color .2s ease}.drop-zone.dragging{border-color:#2f6fed;color:#1f4ed6;background:#eaf0ff}button{padding:12px 18px;border-radius:10px;border:none;background:#2f6fed;color:#fff;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease;box-shadow:0 8px 20px #2f6fed33}button:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 12px 22px #2f6fed47}button[disabled]{background:#c4c4c4;cursor:not-allowed;box-shadow:none}.status{display:flex;flex-direction:column;gap:8px}progress{width:100%;height:12px}.output{display:flex;flex-direction:column;gap:14px}.output-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.output-hint{font-size:.9rem;color:#5f677a}.preview-table{width:100%;overflow:auto;border-radius:12px;border:1px solid #e3e8f4}.preview-table table{width:100%;border-collapse:collapse;min-width:640px}.preview-table th,.preview-table td{padding:12px;text-align:left;border-bottom:1px solid #e3e8f4}.artwork-cell{display:flex;align-items:center;gap:12px}.artwork-thumb{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid #d9deeb;background:#fff}.preview-table th{background:#f4f6ff;font-weight:600;color:#3a4256}.preview-table td{background:#fff;color:#4a5166;vertical-align:top}@media (max-width: 960px){.workspace{grid-template-columns:1fr}}.preview-cell{display:flex;flex-direction:column;gap:8px}.preview-cell img{width:100%;max-width:220px;height:auto;border-radius:10px;box-shadow:0 8px 18px #1b275e1f}.preview-placeholder{font-size:.85rem;color:#8a91a6}.preview-error{font-size:.85rem;color:#c03543}.status-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.02em}.status-ready{background:#e4f4ec;color:#19724b}.status-rendering{background:#e9f0ff;color:#1b57c5}