/* Client portal (/portal). Builds on styles.css + client.css. */
.portal .brandbar { display: flex; align-items: center; gap: 14px; }
.portal .brandbar .who { margin-left: auto; font-size: 13px; color: #cbd5e1; }
.portal .brandbar .who button { margin-left: 10px; background: transparent; color: #fff; border-color: #475569; padding: 4px 10px; font-size: 13px; }
.portal .wrap { max-width: 1180px; }
.tabsbar { display: flex; gap: 6px; margin: 4px 0 18px; }
.tabsbar button { border-radius: 999px; padding: 8px 18px; font-weight: 600; }
.tabsbar button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.login-card { max-width: 420px; margin: 10vh auto; }
.builder { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.builder .preview { position: sticky; top: 14px; }
.step-title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 17px; }
.step-title .n { background: var(--brand); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.print-row, .line-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #fafbfc; }
.print-row .top, .line-row .top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.print-row select, .line-row select { width: auto; min-width: 160px; }
.logo-pick { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.logo-pick button { padding: 6px; border-radius: 8px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 112px; font-size: 12px; }
.logo-pick button img { width: 96px; height: 60px; object-fit: contain; }
.logo-pick button.on { border-color: var(--brand); box-shadow: 0 0 0 2px #f9c4e2; }
.inks { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ink-slot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ink-slot .label { width: 64px; color: var(--muted); }
.ink-btn { width: 26px; height: 26px; border-radius: 50%; padding: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px #c5cad4; cursor: pointer; }
.ink-btn.on { box-shadow: 0 0 0 2px var(--brand); }
.ink-name { font-size: 12px; color: var(--muted); margin-left: 4px; }
.sizes-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sizes-grid label { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--muted); font-weight: 600; }
.sizes-grid input { width: 58px; text-align: center; margin-top: 2px; }
.line-price { margin-top: 8px; font-size: 14px; }
.views { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.views .vlabel { text-align: center; font-size: 12px; color: var(--muted); margin-top: 4px; }
.mock { position: relative; width: 100%; aspect-ratio: 200 / 220; }
.mock svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.12)); }
.mock img { position: absolute; height: auto; pointer-events: none; }
.preview-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.preview-pick button { font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.preview-pick button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.summary table { width: 100%; font-size: 14px; }
.summary td { padding: 4px 0; }
.summary .grand td { font-size: 18px; font-weight: 800; border-top: 1px solid var(--line); padding-top: 8px; }
.hint { font-size: 12px; color: var(--muted); }
.err { color: var(--bad); font-size: 13px; margin-top: 6px; }
.portal .status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef0f6; }
@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
  .builder .preview { position: static; order: -1; }
}

/* ink picker */
.ink-slot-wrap { margin-bottom: 4px; }
.ink-big { display: inline-block; width: 26px; height: 26px; border-radius: 6px; border: 1px solid #0002; vertical-align: middle; }
.ink-big.lg { width: 56px; height: 56px; border-radius: 10px; }
.ink-panel.open { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 6px 0 10px; background: #fff; }
.fam-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fam-chips button { font-size: 12px; padding: 3px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.fam-chips button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.fam-chips .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid #0002; }
.ink-search { width: 190px; padding: 4px 8px; margin-left: auto; }
.ink-current { display: flex; gap: 12px; align-items: center; margin: 12px 0 6px; }
.ink-slider { width: 100%; margin: 4px 0 8px; accent-color: var(--brand); }
.ink-strip { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.ink-strip .ink-btn { flex: 0 0 auto; border-radius: 5px; width: 22px; height: 30px; }

/* live logo preview + which-part swatch */
.logo-live-wrap { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
.logo-live-wrap .inks { flex: 1; min-width: 260px; margin-top: 0; }
.logo-live-box { width: 170px; text-align: center; }
.logo-live { width: 170px; height: 110px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line);
  background: repeating-conic-gradient(#eef0f4 0% 25%, #fff 0% 50%) 50% / 14px 14px; }
.part-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #0003; margin-left: 5px; vertical-align: 0; }
.ink-slot .label { width: auto; min-width: 72px; white-space: nowrap; }

/* full-screen color studio */
.zoomable { cursor: zoom-in; }
.studio { position: fixed; inset: 0; z-index: 70; background: #f4f5f8; display: flex; flex-direction: column; }
.studio-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.studio-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.studio-tabs button { font-size: 13px; padding: 5px 12px; border-radius: 999px; }
.studio-tabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.studio-close { margin-left: auto; font-size: 20px; line-height: 1; padding: 6px 12px; border-radius: 8px; }
.studio-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
.studio-garment { height: 100%; aspect-ratio: 200 / 220; max-width: 100%; }
.studio-garment .mock { height: 100%; width: auto; aspect-ratio: 200 / 220; max-width: 100%; margin: 0 auto; }
.studio-logo { width: min(92vw, 1100px); height: 100%; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 4%; box-shadow: inset 0 0 0 1px #0001; }
.studio-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.studio-bottom { background: #fff; border-top: 1px solid var(--line); padding: 10px 16px 14px; box-shadow: 0 -6px 20px #0000000f; max-height: 46vh; overflow: auto; }
.studio-slots { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.studio-slots button { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 13px; }
.studio-slots button.on { border-color: var(--brand); box-shadow: 0 0 0 2px #f9c4e2; }
.slot-part { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #0003; display: inline-block; }
.studio-pick { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.studio .ink-strip .ink-btn { width: 26px; height: 34px; }
@media (max-width: 700px) {
  .studio-bottom { max-height: 52vh; padding: 8px 10px 10px; }
  .studio .fam-chips button { padding: 2px 8px; }
  .studio .ink-search { width: 100%; margin-left: 0; }
}

.show-all { margin-left: 8px; font-size: 13px; white-space: nowrap; }

/* stock */
.stk { font-size: 10px; font-weight: 700; margin-top: 3px; white-space: nowrap; }
.stk.ok { color: var(--ok); }
.stk.low { color: var(--warn); }
.stk.out { color: var(--bad); }
.sizes-grid input.short { border-color: var(--bad); background: #fef2f2; }
.sizes-grid input:disabled { background: #f1f3f7; }
.swatches button.some-out::after { content: ''; position: absolute; right: -2px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); border: 1px solid #fff; }
.swatches button.all-out { opacity: .35; }
.swatches button { position: relative; }