/* Merch.Ink DTF builder styles. Brand: Eigengrau #16161D, cyan #00ACD1 (primary),
   yellow #FFD100 (secondary), magenta #ED047A (promo/alerts). Montserrat is
   already loaded by the site typography view. Buttons are 48px, never
   transparent, plain 1px keylines only (no accent borders). */
.mi-dtf { font-family: 'Montserrat', sans-serif; color: #16161D; }
.mi-dtf * { box-sizing: border-box; }
.mi-dtf-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.mi-dtf-tab { height: 48px; padding: 0 22px; border-radius: 8px; border: 1px solid #dcdcdc; background: #fff;
  font-weight: 700; font-size: 15px; cursor: pointer; color: #16161D; }
.mi-dtf-tab[aria-selected="true"] { background: #16161D; color: #fff; border-color: #16161D; }
.mi-dtf-panel[hidden] { display: none; }
.mi-dtf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 991px) { .mi-dtf-grid { grid-template-columns: 1fr; } }
.mi-dtf-stage { background: #16161D; border-radius: 12px; padding: 12px; overflow: auto; max-height: 78vh; position: relative; }
.mi-dtf-stage canvas { display: block; margin: 0 auto; border-radius: 4px; background: #fff; touch-action: none; }
.mi-dtf-stagebar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mi-dtf-side { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; padding: 18px; }
.mi-dtf-side h3 { font-size: 15px; font-weight: 800; margin: 0 0 10px; letter-spacing: .02em; }
.mi-dtf-btn { height: 48px; padding: 0 22px; border-radius: 8px; border: none; font-weight: 700; font-size: 15px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.mi-dtf-btn-primary { background: #00ACD1; color: #fff; }
.mi-dtf-btn-primary:hover { background: #0098B8; }
.mi-dtf-btn-secondary { background: #FFD100; color: #16161D; }
.mi-dtf-btn-secondary:hover { background: #E6BC00; }
.mi-dtf-btn-promo { background: #ED047A; color: #fff; }
.mi-dtf-btn-promo:hover { background: #B00359; }
.mi-dtf-btn-ghost { background: #F5F5F5; color: #16161D; height: 40px; padding: 0 14px; font-size: 13px; }
.mi-dtf-btn-ghost:hover { background: #e9e9e9; }
.mi-dtf-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mi-dtf-block { width: 100%; }
.mi-dtf-drop { border: 1px dashed #b9b9b9; border-radius: 10px; padding: 22px; text-align: center; color: #555; background: #fafafa; cursor: pointer; }
.mi-dtf-drop.is-over { border-color: #00ACD1; background: #eefaff; }
.mi-dtf-drop input { display: none; }
.mi-dtf-list { list-style: none; margin: 12px 0 0; padding: 0; max-height: 34vh; overflow: auto; }
.mi-dtf-item { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid #eee; align-items: center; }
.mi-dtf-item img { width: 48px; height: 48px; object-fit: contain; background:
  repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 6px; }
.mi-dtf-item .mi-dtf-name { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-dtf-item .mi-dtf-dims { display: flex; gap: 6px; align-items: center; font-size: 12px; margin-top: 4px; flex-wrap: wrap; }
.mi-dtf-item input[type="number"] { width: 62px; height: 32px; border: 1px solid #ddd; border-radius: 6px; padding: 0 6px; font: inherit; font-size: 12px; }
.mi-dtf-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #F5F5F5; color: #444; }
.mi-dtf-badge.warn { background: #FFF1F7; color: #B00359; }
.mi-dtf-badge.ok { background: #E8F8FC; color: #00708A; }
.mi-dtf-price { font-size: 32px; font-weight: 800; letter-spacing: -.01em; }
.mi-dtf-sub { color: #666; font-size: 13px; }
.mi-dtf-field { margin: 12px 0; }
.mi-dtf-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.mi-dtf-field input, .mi-dtf-field select, .mi-dtf-field textarea { width: 100%; height: 44px; border: 1px solid #ddd; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; }
.mi-dtf-field textarea { height: 72px; padding: 8px 10px; resize: vertical; }
.mi-dtf-row { display: flex; gap: 10px; }
.mi-dtf-row .mi-dtf-field { flex: 1; }
.mi-dtf-msg { border: 1px solid #e3e3e3; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 10px 0; background: #fafafa; }
.mi-dtf-msg.err { background: #FFF1F7; border-color: #f3b9d6; color: #7a0240; }
.mi-dtf-msg.ok { background: #E8F8FC; border-color: #bfe9f3; color: #00506a; }
.mi-dtf-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mi-dtf-tier { border: 1px solid #ddd; background: #fff; border-radius: 6px; padding: 6px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.mi-dtf-tier[aria-pressed="true"] { background: #16161D; color: #fff; border-color: #16161D; }
.mi-dtf-tier.auto { border-style: dashed; }
.mi-dtf-kicker { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #00ACD1; margin-bottom: 6px; }
.mi-dtf-hint { font-size: 12px; color: #666; margin-top: 6px; line-height: 1.5; }
.mi-dtf-progress { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; margin: 8px 0; }
.mi-dtf-progress span { display: block; height: 100%; width: 40%; background: #00ACD1; animation: mi-dtf-slide 1.1s infinite ease-in-out; }
@keyframes mi-dtf-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.mi-dtf-preview { max-width: 100%; border-radius: 8px; border: 1px solid #e3e3e3; background:
  repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; }

/* text tool */
.mi-dtf-textpanel { margin-top: 10px; }
.mi-dtf-textbody { border: 1px solid #e3e3e3; border-radius: 10px; padding: 12px; margin-top: 8px; background: #fafafa; }
.mi-dtf-textbody textarea { width: 100%; height: 60px; border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; background: #fff; resize: vertical; }
.mi-dtf-textrow { display: flex; gap: 10px; margin-top: 10px; }
.mi-dtf-textrow label { flex: 1; font-size: 12px; font-weight: 700; }
.mi-dtf-textrow label span { display: block; margin-bottom: 4px; }
.mi-dtf-textrow select, .mi-dtf-textrow input[type="number"] { width: 100%; height: 38px; border: 1px solid #ddd; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 14px; background: #fff; }
.mi-dtf-textrow input[type="color"] { width: 100%; height: 38px; border: 1px solid #ddd; border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.mi-dtf-outline { display: flex; align-items: center; gap: 8px; height: 38px; }
.mi-dtf-outline input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
.mi-dtf-outline input[type="color"] { flex: 1; height: 38px; border: 1px solid #ddd; border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.mi-dtf-textbody .mi-dtf-btn { margin-top: 12px; }

/* unfinished-sheet offer */
.mi-dtf-restore { border: 1px solid #bfe9f3; background: #E8F8FC; border-radius: 10px; padding: 12px; margin-top: 10px; }
.mi-dtf-restore .mi-dtf-hint { margin-top: 0; color: #00506a; }
.mi-dtf-restorebtns { display: flex; gap: 8px; margin-top: 10px; }
.mi-dtf-restorebtns .mi-dtf-btn { flex: 1; height: 34px; padding: 0 10px; }