/* ---- Sell page ---- */
.sell-hero { background: linear-gradient(135deg,#1a0a0e 0%,#3d0010 60%,#1a0a0e 100%); padding: var(--sp-4xl) 0; position: relative; overflow: hidden; }
.sell-hero::before { content:''; position:absolute; inset:0; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M20 20.5V18H0v5h5v5H0v5h20v-9.5zm-2.5 4.5l-.4-.4 1.4-1.4-1.4-1.4.4-.4 1.8 1.8-1.8 1.8z'/%3E%3C/g%3E%3C/svg%3E"); }
.sell-hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--margin); position: relative; }
.sell-hero h1 { font-family: var(--font-serif); font-size: clamp(36px,5vw,60px); font-weight: 500; color: #fff; line-height: 1.15; }
.sell-hero h1 em { font-style: italic; color: rgba(255,200,190,0.9); }
.sell-hero p { font-size: 17px; color: rgba(255,255,255,0.68); margin-top: var(--sp-md); max-width: 540px; line-height: 1.7; }
.sell-hero-stats { display: flex; gap: var(--sp-2xl); margin-top: var(--sp-2xl); flex-wrap: wrap; }
.sell-hero-stat .num { font-family: var(--font-serif); font-size: 36px; font-weight: 600; color: #fff; }
.sell-hero-stat .lbl { font-size: 13px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

/* How it works */
.how-it-works { padding: var(--sp-4xl) 0; background: var(--clr-white); }
.steps-row { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-xl); }
@media (min-width: 1024px) { .steps-row { grid-template-columns: repeat(4,1fr); } }
.step-card { text-align: center; padding: var(--sp-xl); position: relative; }
.step-card::after { content: '→'; position:absolute; right:-12px; top:40px; font-size:20px; color:var(--clr-outline-v); display:none; }
@media (min-width:1024px) { .step-card:not(:last-child)::after { display:block; } }
.step-icon { width: 64px; height: 64px; background: linear-gradient(135deg,rgba(143,0,20,0.1),rgba(188,0,30,0.05)); border: 1px solid var(--clr-outline-v); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-md); color: var(--clr-primary); font-size: 28px; }
.how-step-num { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-primary); margin-bottom: 8px; }
.step-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.step-desc { font-size: 14px; color: var(--clr-secondary); line-height: 1.6; }

/* Upload form section */
.upload-section { padding: var(--sp-4xl) 0 var(--sp-5xl); }
.upload-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-2xl); align-items: start; }
@media (min-width: 1024px) { .upload-layout { grid-template-columns: 1fr 380px; } }

/* Step indicator */
.step-indicator { display: flex; align-items: center; gap: 0; margin-bottom: var(--sp-2xl); }
.step-indicator .step {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--clr-secondary);
  position: relative;
}
.step-indicator .step .step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--clr-s-highest);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: var(--clr-white);
  transition: all var(--tr);
  flex-shrink: 0;
}
.step-indicator .step.active .step-circle { border-color: var(--clr-primary); background: var(--clr-primary); color: #fff; }
.step-indicator .step.active { color: var(--clr-on-surface); }
.step-indicator .step.done .step-circle { border-color: var(--clr-success); background: var(--clr-success); color: #fff; }
.step-indicator .connector { flex: 1; height: 1px; background: var(--clr-s-highest); margin: 0 8px; min-width: 20px; }
.step-indicator .connector.done { background: var(--clr-success); }

/* Upload step panels */
.upload-step { display: none; }
.upload-step.active { display: block; }
.form-card { background: var(--clr-white); border: 1px solid var(--clr-s-high); border-radius: var(--r-lg); padding: var(--sp-2xl); }
.form-card h2 { font-family: var(--font-serif); font-size: 26px; font-weight: 500; margin-bottom: var(--sp-xs); }
.form-card .subtitle { font-size: 14px; color: var(--clr-secondary); margin-bottom: var(--sp-xl); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .full { grid-column: 1/-1; }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--clr-s-highest);
  border-radius: var(--r-md);
  background: var(--clr-s-low);
  padding: var(--sp-3xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--tr);
  position: relative;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--clr-primary); background: rgba(143,0,20,0.04); }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone-icon { font-size: 48px; color: var(--clr-secondary); margin-bottom: var(--sp-md); }
.upload-zone h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.upload-zone p { font-size: 13px; color: var(--clr-secondary); }
.upload-requirements { margin-top: var(--sp-md); padding: var(--sp-md); background: rgba(143,0,20,0.04); border-radius: var(--r-sm); }
.upload-requirements li { font-size: 12px; color: var(--clr-secondary); display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.upload-requirements li .material-symbols-outlined { font-size: 14px; color: var(--clr-primary); }
#uploadPreview { display: none; max-width: 200px; max-height: 200px; margin: var(--sp-md) auto 0; border-radius: var(--r-md); border: 1px solid var(--clr-s-high); object-fit: contain; }

/* Tag input */
.tag-input-wrap { position: relative; }
.tag-display { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; border: 1px solid var(--clr-s-highest); border-radius: var(--r-sm); padding: 8px 10px; background: var(--clr-white); cursor: text; }
.tag-display:focus-within { border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(143,0,20,0.1); }
.tag-pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(143,0,20,0.1); color: var(--clr-primary); padding: 3px 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; }
.tag-pill button { font-size: 14px; color: var(--clr-primary); }
.tag-display input { border: none; outline: none; font-size: 14px; flex: 1; min-width: 80px; background: transparent; }

/* Checkbox groups */
.check-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
@media (min-width: 640px) { .check-grid { grid-template-columns: repeat(3,1fr); } }
.check-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--clr-s-highest); border-radius: var(--r-sm); cursor: pointer; transition: all var(--tr); }
.check-option:hover { border-color: var(--clr-primary); background: rgba(143,0,20,0.03); }
.check-option input { accent-color: var(--clr-primary); width: 15px; height: 15px; flex-shrink: 0; }
.check-option label { font-size: 13px; font-weight: 500; cursor: pointer; }

/* Step buttons */
.step-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-xl); padding-top: var(--sp-xl); border-top: 1px solid var(--clr-s-high); }

/* Right sidebar - preview & info */
.sell-sidebar { display: flex; flex-direction: column; gap: var(--sp-md); }
.preview-card { background: var(--clr-white); border: 1px solid var(--clr-s-high); border-radius: var(--r-lg); overflow: hidden; }
.preview-card-header { background: linear-gradient(135deg,var(--clr-s-low),var(--clr-s)); padding: var(--sp-2xl); text-align: center; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.preview-card-header .preview-placeholder { color: var(--clr-secondary); font-size: 14px; }
.preview-tshirt { font-size: 80px; opacity: 0.15; }
.preview-card-body { padding: var(--sp-md); }
.preview-card-body p { font-size: 13px; color: var(--clr-secondary); margin-bottom: 6px; }
.preview-card-body strong { font-size: 20px; color: var(--clr-primary); font-family: var(--font-serif); }

.royalty-card { background: linear-gradient(135deg,rgba(143,0,20,0.05),rgba(188,0,30,0.02)); border: 1px solid var(--clr-outline-v); border-radius: var(--r-lg); padding: var(--sp-xl); }
.royalty-card h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin-bottom: var(--sp-md); }
.royalty-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--clr-outline-v); font-size: 14px; }
.royalty-row:last-child { border-bottom: none; font-weight: 700; color: var(--clr-primary); }
.royalty-row .amount { font-weight: 600; }

.trust-card { background: var(--clr-white); border: 1px solid var(--clr-s-high); border-radius: var(--r-lg); padding: var(--sp-md); }
.trust-item { display: flex; align-items: flex-start; gap: var(--sp-sm); padding: 10px 0; border-bottom: 1px solid var(--clr-s-high); }
.trust-item:last-child { border-bottom: none; }
.trust-item .icon { color: var(--clr-primary); flex-shrink: 0; }
.trust-item h4 { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.trust-item p { font-size: 12px; color: var(--clr-secondary); line-height: 1.5; }

/* Success state */
.success-state { text-align: center; padding: var(--sp-4xl); }
.success-state .success-icon { font-size: 72px; color: var(--clr-success); font-variation-settings: 'FILL' 1; margin-bottom: var(--sp-lg); }
.success-state h2 { font-family: var(--font-serif); font-size: 36px; font-weight: 500; margin-bottom: var(--sp-md); }
.success-state p { font-size: 16px; color: var(--clr-secondary); max-width: 420px; margin: 0 auto var(--sp-xl); line-height: 1.7; }