/* JetTags configurator — all rules scoped under .jt so it can be dropped into a page or a modal */
.jt{
  --jt-bg:#d6d5d0; --jt-bg2:#c4c3bd; --jt-ink:#232323; --jt-ink2:#5a5955; --jt-panel:#f3f2ee; --jt-line:#b9b8b2; --jt-focus:#1f5fbf;
  font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--jt-ink);
  display:grid; grid-template-rows:auto 1fr auto; min-height:100%; box-sizing:border-box;
  background:radial-gradient(120% 90% at 50% 35%,#e6e5e0 0%,var(--jt-bg) 55%,var(--jt-bg2) 100%);
}
.jt *,.jt *::before,.jt *::after{box-sizing:border-box}

/* side switch above the preview */
.jt .sides{display:flex;justify-content:center;padding:18px 16px 0}
.jt .seg{display:inline-flex;background:rgba(255,255,255,.55);border:1px solid var(--jt-line);border-radius:999px;padding:3px}
.jt .seg button{font:inherit;font-weight:600;letter-spacing:.04em;padding:7px 22px;border:0;border-radius:999px;background:transparent;color:var(--jt-ink2);cursor:pointer}
.jt .seg button[aria-pressed=true]{background:var(--jt-ink);color:#fff}

.jt .stage{display:grid;place-items:center;padding:20px 16px 8px}
.jt .stage svg{width:min(100%,1000px);height:auto;display:block}

/* controls */
.jt .bar{margin:0 16px 16px;background:var(--jt-panel);border:1px solid var(--jt-line);border-radius:10px;padding:14px 16px;
  display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-start}
.jt label{display:flex;flex-direction:column;gap:6px;color:var(--jt-ink2);font-size:12.5px}
.jt textarea,.jt select,.jt input[type=search]{font:inherit;padding:8px 10px;border:1px solid var(--jt-line);border-radius:6px;background:#fff;color:var(--jt-ink)}
.jt textarea{font-weight:600;font-size:15px;line-height:1.35;letter-spacing:.02em;min-width:260px;resize:none;text-transform:uppercase}
.jt .lbl{white-space:nowrap}
.jt .hint{font-size:11.5px;color:var(--jt-ink2)}
.jt .swatch{display:flex;align-items:center;gap:8px}
.jt input[type=color]{appearance:none;-webkit-appearance:none;width:38px;height:34px;border:1px solid var(--jt-line);border-radius:6px;padding:2px;background:#fff;cursor:pointer}
.jt input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.jt input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}
.jt .hex{font-variant-numeric:tabular-nums;color:var(--jt-ink);font-size:13px;min-width:62px}
.jt input[type=range]{width:120px;accent-color:var(--jt-ink);margin:8px 0}
.jt .presets{display:flex;gap:8px;flex-wrap:wrap}
.jt .chip{width:34px;height:34px;border-radius:6px;border:1px solid var(--jt-line);cursor:pointer;padding:0;position:relative;overflow:hidden;background:var(--c1)}
.jt .chip::after{content:"";position:absolute;left:8px;right:8px;top:14px;height:6px;background:var(--c2);border-radius:1px}
.jt :is(button,input,select,textarea):focus-visible{outline:2px solid var(--jt-focus);outline-offset:2px}
.jt .actions{margin-left:auto;display:flex;gap:8px;align-self:flex-end}
.jt .act{font:inherit;font-weight:600;padding:9px 14px;border-radius:6px;border:1px solid var(--jt-ink);background:var(--jt-ink);color:#fff;cursor:pointer}
.jt .act.secondary{background:#fff;color:var(--jt-ink)}

/* palette cards: fabric photo (turned 90° so the weave runs along the card) on the left, flat render colour on the right */
.jt .palettes{display:flex;flex-wrap:wrap;gap:12px}
.jt .palette{position:relative;width:96px;background:#f9fafc;border-radius:4px;display:flex;flex-direction:column;padding:0;border:0;
  cursor:pointer;text-align:left;font:inherit;color:var(--jt-ink);
  box-shadow:0 1px 2px rgba(67,74,84,.06),4px 4px 12px rgba(67,74,84,.05),12px 12px 24px rgba(67,74,84,.03)}
.jt .palette .colours{height:38px;display:flex;flex-direction:row;border-radius:4px 4px 0 0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.jt .palette .colours>*{flex-grow:1;min-width:0;transition:flex-grow .25s ease;background-color:var(--c);position:relative;overflow:hidden}
.jt .palette .colours>*:hover{flex-grow:1.5}
.jt .palette .c1::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,2.6em);aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(-90deg);background:var(--img) center/cover no-repeat}
.jt .palette .details{padding:5px 8px}
.jt .palette .name{font-weight:400;font-size:12px;line-height:1.25}
.jt .palette .name .sub{display:block;color:var(--jt-ink2);font-weight:300;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jt .palette .values{display:none;font-size:11px;color:#aab2bd}
.jt .palette[aria-pressed=true]{outline:2px solid var(--jt-ink);outline-offset:2px}
.jt .palette.more{background:transparent;border:2px dashed #b9b8b2;box-shadow:none;align-items:center;justify-content:center;color:var(--jt-ink2);font-size:12px;text-align:center;padding:6px}

/* full-library picker */
.jt-picker{border:0;border-radius:12px;padding:0;width:min(92vw,1040px);max-height:88vh;background:#eef0f3;color:#232323;box-shadow:0 24px 60px rgba(0,0,0,.28);
  font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.jt-picker::backdrop{background:rgba(30,30,30,.45)}
.jt-picker header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid #d9dce1;position:sticky;top:0;background:#eef0f3;z-index:1}
.jt-picker h2{margin:0;font-size:16px;font-weight:600}
.jt-picker input[type=search]{font:inherit;padding:7px 10px;border:1px solid #b9b8b2;border-radius:6px;background:#fff;min-width:180px}
.jt-picker .close{margin-left:auto;font:inherit;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:#5a5955}
.jt-picker .palettes{padding:20px;gap:20px;justify-content:center}
.jt-picker .palette{width:140px}
.jt-picker .palette .colours{height:50px}
.jt-picker .palette .name{font-size:14px;font-weight:300}

@media (max-width:640px){.jt .actions{margin-left:0}.jt textarea{min-width:0;width:100%}}