@font-face {
  font-family: Calibre;
  src:  url(/fonts/CalibreWeb-Regular.woff) format("woff"),
        url(/fonts/CalibreWeb-Regular.woff2) format("woff2"),
        url(/fonts/CalibreWeb-Regular.eot) format("embedded-opentype");
}

@font-face {
  font-family: Calibre;
  src:  url(../fonts/CalibreWeb-Semibold.woff) format("woff"),
        url(../fonts/CalibreWeb-Semibold.woff2) format("woff2"),
        url(../fonts/CalibreWeb-Semibold.eot) format("embedded-opentype");
  font-weight: bold;
}

:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);
  --font-body:'Calibre',sans-serif;
  --color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;
  --color-surface-offset:#f3f0ec;--color-border:#d4d1ca;--color-divider:#dcd9d5;
  --color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;
  --color-primary:#01696f;--color-primary-hover:#0c4e54;--color-primary-active:#0f3638;
  --color-error:#c0392b;--color-success:#437a22;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/0.06);
  --shadow-md:0 4px 12px oklch(0.2 0.01 80/0.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.01 80/0.12);
}
[data-theme="dark"] {
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#22211f;--color-border:#393836;--color-divider:#262523;
  --color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;--color-primary-active:#1a626b;
  --color-error:#e06c75;--color-success:#6daa45;
  --shadow-sm:0 1px 2px oklch(0 0 0/0.2);
  --shadow-md:0 4px 12px oklch(0 0 0/0.3);
  --shadow-lg:0 12px 32px oklch(0 0 0/0.4);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.6;padding:var(--space-8) var(--space-4);transition:background var(--transition-interactive),color var(--transition-interactive);}
img{display:block;max-width:100%;}
input,select,textarea,button{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
.page-wrapper{max-width:680px;margin-inline:auto;}
.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-10);}
.logo{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--color-text);letter-spacing:-0.02em;}
.theme-toggle{float:right;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--color-text-muted);transition:background var(--transition-interactive),color var(--transition-interactive);}
.theme-toggle:hover{background:var(--color-surface-offset);color:var(--color-text);}
.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10);box-shadow:var(--shadow-md);}
.form-header{margin-bottom:var(--space-8);}
.form-title{font-size:var(--text-xl);font-weight:700;letter-spacing:-0.03em;line-height:1.15;color:var(--color-text);margin-bottom:var(--space-3);}
.form-subtitle{margin-top: 2em; clear: both;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;margin-bottom:var(--space-2);}
.required-note{font-size:var(--text-xs);color:var(--color-text-faint);}
.form-divider{height:1px;background:var(--color-divider);margin:var(--space-8) 0;}
.form-body{display:flex;flex-direction:column;gap:var(--space-6);}
.field-group{display:flex;flex-direction:column;gap:var(--space-2);}
.field-label{font-size:var(--text-sm);font-weight:500;color:var(--color-text);display:flex;align-items:center;gap:var(--space-2);}
.field-input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text);transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive);line-height:1.5;}
.field-input::placeholder{color:var(--color-text-faint);}
.field-input:hover{border-color:var(--color-text-muted);}
.field-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklch,var(--color-primary) 18%,transparent);}
textarea.field-input{min-height:110px;resize:vertical;line-height:1.6;}
select.field-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7974' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-10);cursor:pointer;}
.field-error{font-size:var(--text-xs);color:var(--color-error);display:flex;align-items:center;gap:var(--space-1);opacity:0;transform:translateY(-4px);transition:opacity var(--transition-interactive),transform var(--transition-interactive);pointer-events:none;min-height:1.2em;}
.field-error.visible{opacity:1;transform:translateY(0);}
.tooltip-wrapper{position:relative;display:inline-flex;align-items:center;}
.tooltip-icon{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--color-text-muted);color:var(--color-text-muted);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color var(--transition-interactive),color var(--transition-interactive),background var(--transition-interactive);line-height:1;user-select:none;}
.tooltip-icon:hover{border-color:var(--color-primary);color:var(--color-primary);background:color-mix(in oklch,var(--color-primary) 8%,transparent);}
.tooltip-bubble{position:absolute;left:26px;top:50%;transform:translateY(-50%);background:var(--color-text);color:var(--color-surface);font-size:var(--text-xs);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);pointer-events:none;opacity:0;transition:opacity var(--transition-interactive);z-index:10;box-shadow:var(--shadow-md);width:max-content;max-width:260px;white-space:normal;}
.tooltip-bubble::before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--color-text);}
.tooltip-wrapper:hover .tooltip-bubble,.tooltip-wrapper:focus-within .tooltip-bubble{opacity:1;}
.modal-overlay{position:fixed;inset:0;background:oklch(0.15 0.01 80/0.55);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--space-4);opacity:0;pointer-events:none;transition:opacity 240ms ease;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:min(600px,100%);box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(12px) scale(0.98);transition:transform 240ms cubic-bezier(0.16,1,0.3,1);}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal-header{padding:var(--space-6) var(--space-8) var(--space-4);border-bottom:1px solid var(--color-divider);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);}
.modal-title{font-size:var(--text-lg);font-weight:700;letter-spacing:-0.02em;color:var(--color-text);line-height:1.2;}
.modal-subtitle{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1);line-height:1.5;}
.modal-close{width:32px;height:32px;border-radius:var(--radius-md);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--transition-interactive),color var(--transition-interactive);}
.modal-close:hover{background:var(--color-surface-offset);color:var(--color-text);}
.carousel{position:relative;overflow:hidden;}
.carousel-slides{display:flex;transition:transform 300ms cubic-bezier(0.16,1,0.3,1);}
.carousel-slide{min-width:100%;padding:var(--space-8);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);}
.slide-graphic{overflow: hidden; width:100%;max-width:320px;aspect-ratio:16/9;background:var(--color-surface-offset);border:1.5px dashed var(--color-border);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-text-faint);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;font-weight:500;}
.xslide-graphic{overflow: hidden; width:100%;max-width:320px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--color-text-faint);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;font-weight:500;}

.slide-product-name{font-size:var(--text-base);font-weight:600;color:var(--color-text);text-align:center;}
.slide-description{font-size:var(--text-sm);color:var(--color-text-muted);text-align:center;line-height:1.6;max-width:400px;}
.carousel-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-8) var(--space-6);border-top:1px solid var(--color-divider);}
.carousel-btn{width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--color-border);color:var(--color-text);background:var(--color-surface);display:flex;align-items:center;justify-content:center;transition:background var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive);flex-shrink:0;}
.carousel-btn:hover{background:var(--color-surface-offset);border-color:var(--color-text-muted);box-shadow:var(--shadow-sm);}
.carousel-btn:disabled{opacity:.35;cursor:not-allowed;}
.carousel-dots{display:flex;gap:var(--space-2);align-items:center;}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:var(--color-border);transition:background var(--transition-interactive),width var(--transition-interactive);cursor:pointer;border:none;}
.carousel-dot.active{background:var(--color-primary);width:16px;border-radius:3px;}
.checkbox-row{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;user-select:none;}
.checkbox-row input[type="checkbox"]{width:18px;height:18px;border-radius:var(--radius-sm);border:1.5px solid var(--color-border);appearance:none;background:var(--color-surface-2);cursor:pointer;flex-shrink:0;position:relative;transition:background var(--transition-interactive),border-color var(--transition-interactive);}
.checkbox-row input[type="checkbox"]:checked{background:var(--color-primary);border-color:var(--color-primary);}
.checkbox-row input[type="checkbox"]:checked::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;}
.checkbox-row input[type="checkbox"]:hover{border-color:var(--color-primary);}
.checkbox-label{font-size:var(--text-sm);color:var(--color-text);}
.collapsible-fields{display:flex;flex-direction:column;gap:var(--space-5);overflow:hidden;max-height:0;opacity:0;transition:max-height 360ms cubic-bezier(0.16,1,0.3,1),opacity 280ms ease,padding 280ms ease;padding-top:0;}
.collapsible-fields.open{max-height:400px;opacity:1;padding-top:var(--space-5);}
.fields-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.section-divider{font-size:var(--text-xs);font-weight:600;color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.08em;padding-top:var(--space-2);}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;letter-spacing:.01em;border:none;transition:background var(--transition-interactive),box-shadow var(--transition-interactive),transform var(--transition-interactive);box-shadow:0 1px 2px oklch(0 0 0/0.15);width:100%;margin-top:var(--space-4);}
.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.btn-primary:active{background:var(--color-primary-active);transform:translateY(0);box-shadow:var(--shadow-sm);}
.success-state{display:none;flex-direction:column;align-items:center;text-align:center;padding:var(--space-12) var(--space-8);gap:var(--space-4);}
.success-icon{width:56px;height:56px;border-radius:50%;background:color-mix(in oklch,var(--color-primary) 12%,transparent);display:flex;align-items:center;justify-content:center;color:var(--color-primary);}
.success-title{font-size:var(--text-lg);font-weight:700;letter-spacing:-0.02em;}
.success-text{font-size:var(--text-sm);color:var(--color-text-muted);max-width:36ch;line-height:1.6;}
/* File Upload */
.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-4);text-align:center;cursor:pointer;transition:border-color var(--transition-interactive),background var(--transition-interactive);position:relative;background:var(--color-surface-2);}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--color-primary);background:color-mix(in oklch,var(--color-primary) 6%,var(--color-surface-2));}
.drop-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.drop-zone-icon{font-size:2.5rem;margin-bottom:var(--space-3);}
.drop-zone p{color:var(--color-text-muted);font-size:var(--text-sm);}
.drop-zone strong{color:var(--color-primary);}
.drop-zone-hint{margin-top:var(--space-1);font-size:var(--text-xs);}
.file-list{display:flex;flex-direction:column;gap:var(--space-3);}
.file-list:not(:empty){margin-top:var(--space-4);}
.file-item{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);}
.file-item-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);}
.file-name{font-size:var(--text-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.file-size{font-size:var(--text-sm);color:var(--color-text-muted);flex-shrink:0;}
.file-status{font-size:var(--text-sm);font-weight:500;flex-shrink:0;}
.file-status.pending{color:var(--color-text-muted);}
.file-status.uploading{color:var(--color-primary);}
.file-status.success{color:var(--color-success);}
.file-status.error{color:var(--color-error);}
.file-remove{width:22px;height:22px;border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--transition-interactive),color var(--transition-interactive);}
.file-remove:hover{background:var(--color-surface-offset);color:var(--color-error);}
.progress-bar-wrap{height:6px;background:transparent;border-radius:99px;overflow:hidden;}
.progress-bar{height:100%;background:var(--color-primary);border-radius:99px;width:0%;transition:width 200ms ease-out;}
.progress-bar.success{background:var(--color-success);}
.progress-bar.error{background:var(--color-error);}

@media(max-width:600px){.form-card{padding:var(--space-6);}.fields-row{grid-template-columns:1fr;}.modal-header{padding:var(--space-5) var(--space-5) var(--space-3);}.carousel-slide{padding:var(--space-5);}.carousel-footer{padding:var(--space-3) var(--space-5) var(--space-5);}}