/* SakibPro DLS Kit Creator */
:root {
  --bg: #070d1a; --bg2: #0b1324; --card: #0f1a30; --card2: #13213d; --line: rgba(148, 163, 184, .14); --line2: rgba(148, 163, 184, .26);
  --txt: #e6edf7; --mut: #93a3bb; --acc: #00e5ff; --acc2: #0072ff; --ok: #22c55e; --bad: #f43f5e;
  --r: 14px; --head: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: radial-gradient(1200px 600px at 20% -10%, #10264f 0%, transparent 60%), var(--bg); color: var(--txt); font: 15px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color: var(--acc); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

/* top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: rgba(7, 13, 26, .82); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 50; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--txt); text-decoration: none; font: 800 20px var(--head); letter-spacing: .02em; }
.brand img { border-radius: 7px; }
.toplinks { display: flex; gap: 16px; }
.toplinks a { color: var(--mut); text-decoration: none; font-size: 13px; font-weight: 600; }
.toplinks a:hover { color: var(--txt); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 18px 18px 40px; }
.intro h1 { margin: 6px 0 4px; font: 800 clamp(30px, 4.4vw, 46px)/1 var(--head); letter-spacing: .01em; text-transform: uppercase; }
.intro h1 span { font-size: .55em; vertical-align: .55em; padding: 2px 8px; border-radius: 6px; background: linear-gradient(90deg, var(--acc2), var(--acc)); color: #001018; margin-left: 6px; }
.intro p { margin: 0 0 16px; color: var(--mut); max-width: 760px; }

/* layout */
.app { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stage { position: sticky; top: 66px; background: linear-gradient(180deg, #102449 0%, #0a1428 70%); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.stage-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; }
.view { position: relative; height: clamp(360px, calc(100vh - 300px), 640px); }
.view canvas { display: block; touch-action: none; }
#view3d canvas { cursor: grab; } #view3d canvas:active { cursor: grabbing; }
.v3-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mut); font-size: 14px; padding: 20px; text-align: center; }
#view2d { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 10px 0; }
#cv2d { width: min(100%, clamp(320px, calc(100vh - 350px), 600px)); height: auto; aspect-ratio: 1; border-radius: 10px; background: repeating-conic-gradient(#1b2740 0 25%, #121b2e 0 50%) 0 0 / 22px 22px; border: 1px solid var(--line); }
.hint2d { margin: 6px 0 0; color: var(--mut); font-size: 12px; }
.stage-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; background: rgba(7, 13, 26, .55); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.pills button { border: 0; background: transparent; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--mut); }
.pills button.on { background: rgba(0, 229, 255, .16); color: var(--acc); }
.pills select { width: auto; background: transparent; border: 0; border-radius: 999px; color: var(--mut); font-size: 12.5px; font-weight: 600; padding: 4px 6px; }
.pills select option { background: var(--card); color: var(--txt); }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: rgba(7, 13, 26, .45); }

.seg { display: inline-flex; background: rgba(7, 13, 26, .6); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--mut); display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: linear-gradient(90deg, var(--acc2), var(--acc)); color: #001018; }
.seg.small { display: flex; flex-wrap: wrap; width: 100%; }
.seg.small button { flex: 1 1 auto; font-size: 12.5px; padding: 7px 9px; }
.hist { display: flex; gap: 6px; }
.ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(7, 13, 26, .55); color: var(--txt); }
.ico:disabled { opacity: .35; cursor: default; }
.ico.sm { width: 30px; height: 30px; border: 0; background: transparent; color: var(--mut); }
.ico.sm.on { color: var(--acc); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--line2); background: var(--card2); color: var(--txt); font-weight: 700; font-size: 13.5px; transition: transform .12s, background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { border-color: rgba(0, 229, 255, .45); }
.btn:active { transform: scale(.97); }
.btn.acc { background: linear-gradient(90deg, var(--acc2), var(--acc)); color: #001018; border: 0; }
.btn.ghost { background: transparent; }
.btn.danger { background: rgba(244, 63, 94, .1); border-color: rgba(244, 63, 94, .35); color: #fda4af; }
.btn.full { width: 100%; margin-top: 10px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.file { position: relative; overflow: hidden; }
.btn.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.link { border: 0; background: none; color: var(--acc); font-weight: 600; font-size: 13px; padding: 4px 0; }

/* panel */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.tabs { display: flex; gap: 2px; padding: 6px; background: var(--bg2); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; position: sticky; top: 49px; z-index: 3; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; border: 0; background: none; padding: 9px 12px; border-radius: 10px; font-weight: 700; font-size: 13px; color: var(--mut); white-space: nowrap; }
.tabs button.on { background: var(--card2); color: var(--txt); box-shadow: inset 0 -2px 0 var(--acc); }
.tab { display: none; padding: 14px 16px 18px; }
.tab.on { display: block; }
.tab h3 { margin: 18px 0 8px; font: 700 15px var(--head); letter-spacing: .08em; text-transform: uppercase; color: #cbd6e6; }
.tab h3:first-child { margin-top: 2px; }
.note { margin: 0 0 10px; color: var(--mut); font-size: 13px; }
.row2, .row3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; margin: 8px 0; }
.row3 { grid-template-columns: repeat(3, 1fr); }

/* colour field */
.clr { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; min-width: 0; }
.clr .sw { position: relative; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .25); flex: none; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.clr .sw input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.clr .meta { display: flex; flex-direction: column; min-width: 0; }
.clr .meta small { color: var(--mut); font-size: 11px; font-weight: 600; line-height: 1.1; }
.clr .meta input { width: 100%; min-width: 0; background: none; border: 0; padding: 0; font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; color: var(--txt); outline: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.swatches button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .22); padding: 0; }

input[type=text], select { background: var(--bg2); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; width: 100%; outline: none; }
input[type=text]:focus, select:focus { border-color: rgba(0, 229, 255, .5); }
select option { background: var(--card); }
.rng { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--mut); font-weight: 600; }
.rng span { display: flex; justify-content: space-between; }
.rng b { color: var(--txt); font-weight: 700; }
input[type=range] { width: 100%; accent-color: var(--acc); }
.tog { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; }
.tog input { width: 18px; height: 18px; accent-color: var(--acc); }

/* grids */
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.presets .cat { grid-column: 1 / -1; margin: 8px 0 0; font: 700 13px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.pre, .pat { border: 1px solid var(--line); background: radial-gradient(circle at 50% 30%, #1d2c4b, #0d1628 75%); border-radius: 12px; padding: 6px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--mut); transition: border-color .15s, transform .12s; }
.pre:hover, .pat:hover { border-color: rgba(0, 229, 255, .45); transform: translateY(-1px); }
.pre.on, .pat.on { border-color: var(--acc); color: var(--txt); box-shadow: 0 0 0 1px var(--acc) inset; }
.pre canvas { width: 76px; height: 76px; }
.patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; }
.pat canvas { width: 54px; height: 54px; border-radius: 8px; }

/* logos */
.slots { display: grid; gap: 7px; }
.slot { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 7px 9px; }
.slot.sel { border-color: var(--acc); }
.slot .thumb { width: 38px; height: 38px; border-radius: 8px; background: repeating-conic-gradient(#1b2740 0 25%, #121b2e 0 50%) 0 0 / 10px 10px; display: grid; place-items: center; overflow: hidden; flex: none; }
.slot .thumb img { max-width: 34px; max-height: 34px; }
.slot .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; }
.slot .nm small { display: block; color: var(--mut); font-weight: 500; font-size: 11.5px; }
.slot label, .slot button { font-size: 12.5px; padding: 7px 10px; }
.editor { margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(0, 229, 255, .05); border: 1px solid rgba(0, 229, 255, .25); }
.editor h3 { margin-top: 0 !important; }

/* export */
.steps { margin: 0 0 10px; padding-left: 20px; color: var(--mut); font-size: 13.5px; }
.steps b { color: var(--txt); }
.urlbox { display: flex; gap: 8px; margin: 8px 0; }
.saved { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.saved .it { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; text-align: center; font-size: 12px; font-weight: 600; cursor: pointer; }
.saved .it img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: repeating-conic-gradient(#1b2740 0 25%, #121b2e 0 50%) 0 0 / 12px 12px; }
.saved .it button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 6px; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; line-height: 1; }
.saved .empty { grid-column: 1 / -1; color: var(--mut); font-size: 13px; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #0f1a30; border: 1px solid rgba(0, 229, 255, .45); color: var(--txt); padding: 11px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); transition: .25s; z-index: 200; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: rgba(244, 63, 94, .6); }

/* guide */
.guide { max-width: 860px; margin: 34px auto 0; color: #c4cfdf; }
.guide h2 { font: 800 26px var(--head); text-transform: uppercase; letter-spacing: .03em; color: var(--txt); margin: 26px 0 8px; }
.guide li { margin: 5px 0; }
.guide details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin: 8px 0; }
.guide summary { cursor: pointer; font-weight: 700; color: var(--txt); }
.guide details p { margin: 8px 0 2px; }
.foot { text-align: center; color: var(--mut); font-size: 12px; padding: 22px 16px 34px; border-top: 1px solid var(--line); }

/* phones / tablets */
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; gap: 12px; }
  /* phones / tablets: the preview stays on screen while the options scroll under it */
  .stage { top: 49px; z-index: 20; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
  .stage-top { padding: 6px 8px; }
  .view { height: 36vh; min-height: 220px; }
  #view2d { padding: 4px 8px 0; }
  #cv2d { width: auto; height: calc(36vh - 26px); min-height: 190px; }
  .hint2d { font-size: 11px; margin-top: 3px; }
  .stage-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px 8px; justify-content: flex-start; }
  .stage-bar::-webkit-scrollbar { display: none; }
  .pills { flex-wrap: nowrap; flex: none; }
  .tabs { position: static; }
  .quick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; border-top: 1px solid var(--line2); background: rgba(7, 13, 26, .94); backdrop-filter: blur(10px); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  body { padding-bottom: 72px; }
  .toast { bottom: 84px; }
}
@media (max-width: 600px) {
  .wrap { padding: 12px 10px 30px; }
  .toplinks { gap: 10px; } .toplinks a:nth-child(n+2) { display: none; }
  .intro p { font-size: 14px; }
  .stage { border-radius: 14px; }
  .intro h1 { font-size: 28px; }
  .intro p { display: none; }
  .quick { grid-template-columns: auto 1fr 1fr; gap: 6px; }
  .quick .btn { padding: 10px 8px; font-size: 12.5px; }
  .quick .btn:first-child span, .quick .btn:first-child { font-size: 0; gap: 0; } .quick .btn:first-child svg { width: 20px; height: 20px; }
  .btn { padding: 10px 10px; font-size: 13px; }
  .stage-bar { justify-content: center; }
  .tab { padding: 12px 12px 16px; }
  .row3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .row3 .clr { flex-direction: column; align-items: stretch; text-align: center; gap: 4px; }
  .row3 .clr .sw { width: 100%; height: 30px; }
  .seg button { padding: 7px 9px; }
  .presets { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .pre canvas { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ============================================================
   UI update (Nov 2026): floating live preview on phones,
   sticky option tabs, two-button export bar
   ============================================================ */
.panel { overflow: clip; min-width: 0; }
.stage { min-width: 0; }
.quick { grid-template-columns: 1fr 1.5fr; }

/* floating live preview card (phones / tablets) */
.mini { position: fixed; left: 8px; right: 8px; top: calc(var(--hdr, 49px) + 6px); z-index: 45; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 16px; background: rgba(11, 19, 36, .93); border: 1px solid var(--line2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 32px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-14px) scale(.98); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.mini.show { opacity: 1; transform: none; pointer-events: auto; }
.mini-thumb { position: relative; flex: none; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 28%, #1d3f78 0%, #0a1428 75%); box-shadow: inset 0 0 0 2px rgba(0, 229, 255, .45); }
.mini-thumb .view { height: 100% !important; min-height: 0 !important; width: 100%; }
.mini-thumb .view canvas { pointer-events: none; }
.mini-thumb #view2d { padding: 0 !important; display: flex; align-items: center; justify-content: center; }
.mini-thumb #view2d.hidden { display: none !important; }
.mini-thumb #cv2d { width: 100% !important; height: 100% !important; min-height: 0 !important; }
.mini-thumb .hint2d, .mini-thumb .v3-msg { display: none; }
.mini-thumb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(0, 229, 255, .45); pointer-events: none; }
.mini-info { flex: 1; min-width: 0; overflow: hidden; padding: 0; border: 0; background: none; text-align: left; line-height: 1.15; }
.mini-info b { display: flex; align-items: center; gap: 6px; white-space: nowrap; font: 800 14px/1.1 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.mini-info b::before { flex: none; content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.mini-info small { display: block; margin-top: 2px; color: var(--mut); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-hist .hist { display: flex; gap: 4px; }
.mini > .btn { flex: none; padding: 11px 14px; font-size: 13.5px; white-space: nowrap; }
@media (min-width: 981px) { .mini { display: none; } }
@media (max-width: 380px) { .mini-info small { display: none; } .mini > .btn { padding: 11px 10px; } }

@media (max-width: 980px) {
  /* the big preview no longer covers half the screen while you scroll; the floating card takes over */
  .app { grid-template-columns: minmax(0, 1fr); }
  .stage { position: relative; top: auto; z-index: auto; }
  .view { height: 46vh; min-height: 280px; }
  #cv2d { height: calc(46vh - 26px); min-height: 250px; }
  .quick { position: static; padding: 10px; border-top: 1px solid var(--line); background: rgba(7, 13, 26, .45); backdrop-filter: none; grid-template-columns: 1fr 1.5fr; }
  body { padding-bottom: 0; }
  .toast { bottom: 20px; }
  .tabs { position: sticky; top: var(--hdr, 49px); z-index: 30; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
  body.mini-on .tabs { top: calc(var(--hdr, 49px) + 84px); }
}
@media (max-width: 600px) {
  .quick { grid-template-columns: 1fr 1.5fr; gap: 8px; }
  .quick .btn:first-child, .quick .btn:first-child span { font-size: 13px; gap: 6px; }
  .quick .btn:first-child svg { width: 18px; height: 18px; }
  .stage-bar { justify-content: flex-start; }
}


/* ============================================================
   UI update 2 (Nov 2026): kit link sheet, quick colours,
   style chips, first-visit steps, readability
   ============================================================ */
:root { --mut: #a3b2c8; }
.pre span { font-size: 12.5px; }
.clr .meta small { font-size: 12px; }
.note { font-size: 13.5px; }

/* bottom sheet */
.ksheet { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.ks-back { position: absolute; inset: 0; background: rgba(2, 6, 14, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease; }
.ks-card { position: relative; width: min(520px, 100%); max-height: 92vh; overflow: auto; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); background: var(--card); border: 1px solid var(--line2); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px rgba(0, 0, 0, .5); transform: translateY(100%); transition: transform .22s ease; }
.ksheet.show .ks-back { opacity: 1; }
.ksheet.show .ks-card { transform: none; }
@media (min-width: 640px) { .ksheet { align-items: center; } .ks-card { border-radius: 22px; } }
.ks-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--mut); font-size: 20px; line-height: 1; }
.ks-head { display: flex; gap: 14px; align-items: center; padding-right: 34px; margin-bottom: 14px; }
.ks-img, .ks-big { background: repeating-conic-gradient(#1a2440 0 25%, #111a30 0 50%) 0 0 / 16px 16px; border: 1px solid var(--line); border-radius: 12px; }
.ks-img { width: 84px; height: 84px; flex: none; object-fit: contain; }
.ks-kicker { margin: 0; color: var(--ok); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ksheet h3 { margin: 2px 0 4px; font: 800 24px/1.05 var(--head); text-transform: uppercase; letter-spacing: .01em; }
.ks-sub { margin: 0; color: var(--mut); font-size: 13px; }
.ks-url { display: flex; gap: 8px; margin: 4px 0 16px; }
.ks-url input { flex: 1; min-width: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); color: var(--txt); font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ks-copy { flex: none; min-width: 112px; }
.ks-copy.done { background: var(--ok); color: #04130a; }
.ks-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.ks-steps li { counter-increment: s; position: relative; min-height: 24px; padding: 2px 0 0 34px; font-size: 14px; line-height: 1.4; }
.ks-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--acc); background: rgba(0, 229, 255, .12); border: 1px solid rgba(0, 229, 255, .35); }
.ks-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ks-actions.one { grid-template-columns: 1fr; }
.ks-actions .btn { padding: 12px 14px; }
.ks-big { display: block; width: min(100%, 360px); aspect-ratio: 1; margin: 14px auto; -webkit-touch-callout: default; user-select: auto; }

/* quick colours */
.pal-btn { flex: none; margin-left: auto; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--bg2); background: conic-gradient(#ef4444, #f59e0b, #facc15, #22c55e, #38bdf8, #6366f1, #ec4899, #ef4444); box-shadow: 0 0 0 1px var(--line2); }
.pal-btn:hover { box-shadow: 0 0 0 2px var(--acc); }
.swatches { grid-column: 1 / -1; align-items: center; }
.sw-lbl { flex-basis: 100%; margin-top: 2px; color: var(--mut); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* style category chips */
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cat-chips button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg2); color: var(--txt); font-weight: 700; font-size: 12.5px; }
.cat-chips button:hover, .cat-chips button:focus-visible { border-color: var(--acc); color: var(--acc); }

/* first-visit steps */
.firsthint { position: relative; margin: 10px 10px 0; padding: 10px 40px 10px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(0, 229, 255, .12), rgba(0, 114, 255, .08)); border: 1px solid rgba(0, 229, 255, .3); font-size: 13px; }
.firsthint ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.firsthint li b { color: var(--acc); margin-right: 3px; }
.firsthint .fh-x { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--mut); font-size: 18px; }

@media (max-width: 600px) {
  .row3 .clr { position: relative; }
  .row3 .clr .pal-btn { position: absolute; top: 5px; right: 5px; margin: 0; width: 22px; height: 22px; }
  .swatches button { width: 30px; height: 30px; border-radius: 8px; }
  .swatches { gap: 7px; }
}

/* 3D shirt number preview */
.numfield { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; cursor: text; }
.numfield span { font-size: 13px; font-weight: 600; line-height: 1.25; }
.numfield small { display: block; color: var(--mut); font-size: 11.5px; font-weight: 500; }
.numfield input { flex: none; width: 64px; padding: 6px; text-align: center; font: 800 22px/1 var(--head); color: var(--txt); background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; }
.numfield input:focus { outline: 2px solid var(--acc); outline-offset: 1px; }

/* site header / footer (from /players/) + ads */
.stage { top: calc(var(--hdr, 70px) + 14px); }
.tabs { top: var(--hdr, 70px); }
.ksheet { z-index: 2500; }
.toast { z-index: 2400; }
.kad { max-width: 980px; min-height: 100px; margin: 26px auto; padding: 0 10px; text-align: center; overflow: hidden; }
.kad::before { content: 'Advertisement'; display: block; margin-bottom: 6px; color: var(--mut); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.guide .kad { margin: 22px 0; padding: 0; }
@media (max-width: 980px) { .stage { top: auto; } }

/* the site header's off-screen menu panel must not make the page scroll sideways on phones */
body { overflow-x: clip; }