:root {
  --accent: #ff7a1a;
  --accent-2: #d9530f;
}

.hero {
  background: radial-gradient(circle at 78% 36%, rgba(255, 122, 26, .2), transparent 25%), linear-gradient(125deg, #0b0b0d 20%, #17110d 100%);
}
.orb-one { border-color: rgba(255, 122, 26, .28); box-shadow: inset 0 0 80px rgba(255, 122, 26, .09); }
.orb-two { background: radial-gradient(circle at 35% 35%, #ffad70, #a63808 60%, transparent 61%); }
.primary-button { box-shadow: 0 10px 32px rgba(255, 122, 26, .22); }
.primary-button:hover { background: #ff913d; }
.tab.active span, .status-badge.new { background: rgba(255, 122, 26, .12); color: #ffad70; }
.file-drop:hover, .file-drop.has-file { background: rgba(255, 122, 26, .05); }
.summary-chip { color: #ffd0ad; background: #2c211a; border-color: #463124; }
.reference b { color: #ffad70; }
.colour-row > i { background: #ff7a1a; }
.stat-card i { background: rgba(255, 122, 26, .09); }
.filter-pills button.active { background: #31241c; color: #ffb57e; }
.brand-mark { font-size: 19px; }
.brand-mark .fa-rpc { color: #fff; }
.product-info > div { min-width: 0; }
.product-info .product-label { display: block; color: #f3f0f5; font-family: var(--display); font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-info .product-code { display: inline-flex; align-items: center; margin-top: 8px; padding: 4px 7px; border: 1px solid rgba(255, 122, 26, .38); border-radius: 3px; background: rgba(255, 122, 26, .12); color: #ff9b52; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.basket-label { display: block; color: #d2ced6; font-size: 11px; font-weight: 500; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basket-thumb { position: relative; overflow: hidden; }
.basket-thumb img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.selection-ready { position: fixed; z-index: 80; right: 28px; bottom: 28px; min-width: 285px; padding: 10px 11px 10px 16px; border: 1px solid rgba(255,122,26,.45); border-radius: 5px; background: #181410; color: #fff; box-shadow: 0 15px 45px rgba(0,0,0,.45), 0 0 30px rgba(255,122,26,.1); display: flex; align-items: center; justify-content: space-between; gap: 25px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .25s, transform .25s, visibility .25s, border-color .2s; }
.selection-ready.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.selection-ready:hover { border-color: #ff8d39; transform: translateY(-2px); }
.selection-ready span { display: flex; align-items: center; gap: 8px; color: #aaa5ad; font-size: 10px; }
.selection-ready span i { color: var(--accent); font-size: 14px; }
.selection-ready span b { font-weight: 600; }
.selection-ready > strong { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 3px; background: var(--accent); font-size: 12px; }
.detail-items span b { color: #ffad70; }
.field-help { display: block; margin-top: 6px; color: #77737e; font-size: 10px; font-weight: 400; }
.discord-name { color: #ffad70; }
.order-main .order-discord { margin: 3px 0 2px; color: #ff9b52; }
.order-main .order-discord i { margin-right: 3px; }
.attachment-field { display: flex; flex-direction: column; gap: 9px; }
.attachment-heading { display: flex; align-items: end; justify-content: space-between; }
.attachment-heading > small { color: #77737e; font-size: 10px; }
.attachment-heading label { flex: 1; }
.attachment-heading .optional { margin-left: 8px; float: none; }
.attachment-list { display: flex; flex-direction: column; gap: 7px; }
.attachment-item { display: grid; grid-template-columns: 30px 1fr 30px; gap: 10px; align-items: center; min-height: 54px; padding: 8px 10px; border: 1px solid #323139; background: #19191e; }
.attachment-item > i { color: var(--accent); text-align: center; }
.attachment-item b { display: block; max-width: 310px; color: #d9d5dd; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-item small { color: #716e77; font-size: 9px; }
.attachment-item button { width: 28px; height: 28px; border: 0; background: transparent; color: #77737d; cursor: pointer; }
.attachment-item button:hover { color: var(--danger); }
.add-attachment { min-height: 52px; border: 1px dashed #484550; background: #18181d; color: #bbb7c0; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-size: 11px; font-weight: 600; }
.add-attachment i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,122,26,.12); color: var(--accent); font-size: 10px; }
.add-attachment:hover { border-color: var(--accent); background: rgba(255,122,26,.04); }
.add-attachment:disabled { opacity: .45; cursor: not-allowed; }
.asset-preview { width: min(1000px, calc(100% - 36px)); max-height: calc(100dvh - 36px); padding: 0; border: 1px solid #39363e; background: #101013; color: #fff; overflow: hidden; }
.asset-preview::backdrop { background: rgba(0,0,0,.66); backdrop-filter: blur(3px); }
.asset-preview-header { min-height: 70px; padding: 14px 18px 14px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #17171b; }
.asset-preview-header > div { min-width: 0; }
.asset-preview-header small { display: block; margin-bottom: 4px; color: var(--accent); font-size: 8px; font-weight: 700; letter-spacing: .17em; }
.asset-preview-header b { display: block; max-width: 760px; overflow: hidden; color: #d8d4dc; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.asset-preview-body { height: min(70dvh, 720px); min-width: 0; min-height: 320px; padding: 24px; display: grid; place-items: center; background-color: #0c0c0f; background-image: linear-gradient(45deg,#121216 25%,transparent 25%),linear-gradient(-45deg,#121216 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#121216 75%),linear-gradient(-45deg,transparent 75%,#121216 75%); background-size: 24px 24px; background-position: 0 0,0 12px,12px -12px,-12px 0; overflow: hidden; }
.asset-preview-body img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(calc(70dvh - 48px), 672px); object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
.asset-download { position: absolute; right: 22px; bottom: 22px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.preview-unavailable { padding: 45px; text-align: center; background: rgba(16,16,19,.88); }
.preview-unavailable > i { display: block; margin-bottom: 17px; color: var(--accent); font-size: 46px; }
.preview-unavailable b { font-family: var(--display); font-size: 18px; }
.preview-unavailable p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.garment-placeholder.mask {
  width: 42%; height: 29%; border-radius: 48% 48% 38% 38%;
  clip-path: polygon(8% 6%, 92% 6%, 100% 38%, 88% 100%, 58% 84%, 50% 100%, 42% 84%, 12% 100%, 0 38%);
}
.garment-placeholder.mask::before, .garment-placeholder.mask::after {
  content: ''; position: absolute; top: 36%; width: 25%; height: 13%; background: #111115; border-radius: 50%;
}
.garment-placeholder.mask::before { left: 15%; }
.garment-placeholder.mask::after { right: 15%; }
.garment-placeholder.armour {
  width: 45%; height: 55%;
  clip-path: polygon(23% 0, 77% 0, 95% 17%, 82% 100%, 18% 100%, 5% 17%);
  background: linear-gradient(90deg, #25242a, #55515a 50%, #25242a);
}
.garment-placeholder.armour::after {
  content: ''; position: absolute; inset: 12% 18%; border: 2px solid rgba(255,255,255,.12); border-radius: 4px;
}
@media (max-width: 620px) {
  .selection-ready { right: 14px; bottom: 14px; left: 14px; min-width: 0; }
}