.kit-palette{display:grid;gap:16px;padding:16px 0}.kit-swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.kit-swatch,.kit-custom-color{position:relative;display:inline-grid;place-items:center;flex:0 0 34px;width:34px;height:34px;min-height:34px;padding:0;border:2px solid #ffffff60;border-radius:50%;background:var(--swatch);cursor:pointer}.kit-swatch.selected{outline:2px solid var(--accent,#298cff);outline-offset:3px}.kit-swatch:focus-visible,.kit-custom-color:focus-within{outline:3px solid var(--accent,#298cff);outline-offset:3px}.kit-custom-color{overflow:hidden;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);color:white;font-size:24px;text-shadow:0 1px 3px black}.kit-custom-color input{position:absolute;inset:0;opacity:0;width:100%;height:100%;padding:0;cursor:pointer}.kit-render-preview{object-fit:contain}.kit-draft>img.kit-render-preview{width:80px;height:80px}
.kit-palette .kit-color-label{display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px!important;margin-top:0}.kit-palette .kit-color-label>span{margin-right:0}.kit-palette .kit-color-label .kit-swatch{font-size:0;min-width:34px}.kit-palette .kit-color-label .kit-custom-color input{min-width:0;width:100%;height:100%;border:0}.kit-palette #kit-reset-color{justify-self:start}.kit-palette .kit-swatches{margin:0}
/* custom colour: rainbow ring around the chosen colour */
.kit-custom-color{background:conic-gradient(#ff4d4d,#ffd93d,#3ddc84,#22d5e8,#298cff,#a35bff,#fa68ad,#ff4d4d)!important;border:0!important;padding:3px!important;text-shadow:none!important}
.kit-custom-dot{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#1b1b1b;border:2px solid #1b1b1b;transition:background .15s}
.kit-custom-dot svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.kit-custom-color.selected .kit-custom-dot{background:var(--custom)}
.kit-custom-color.selected .kit-custom-dot svg{stroke:#ffffffcc;filter:drop-shadow(0 1px 2px #0008)}
.kit-custom-color.selected{outline:2px solid #f1f1f1;outline-offset:3px}
.kit-swatch.selected{outline-color:#f1f1f1!important}
/* set title field */
.kit-title-field{display:grid!important;gap:8px;font-size:14px!important;font-weight:650;color:#e8e8e8!important}
.kit-title-input{display:flex;align-items:center;gap:10px;border:1px solid #3a3a3a;background:#151515;border-radius:14px;padding:0 14px;transition:border-color .15s,background .15s}
.kit-title-input:focus-within{border-color:#f1f1f1;background:#1a1a1a}
.kit-title-input svg{width:18px;height:18px;fill:none;stroke:#8d8d8d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.kit-title-input input#kit-title{border:0!important;background:transparent!important;padding:14px 0!important;font-size:16px!important;font-weight:600;color:#fff;outline:none!important;margin:0!important;width:100%}
#kit-reset-color{font-size:13px!important;color:#bdbdbd!important}
/* preview tiles: skeleton instead of broken-image text while loading */
.kit-render-preview{background:#232323;border-radius:14px}
.kit-render-preview:not([src]){animation:kit-skeleton 1.2s ease-in-out infinite}
@keyframes kit-skeleton{0%,100%{opacity:.5}50%{opacity:1}}

/* title-field-single-frame-v1: focus belongs to the whole icon/text control */
.kit-title-input{min-width:0;min-height:52px;cursor:text}
.kit-title-input input#kit-title,
.kit-title-input input#kit-title:focus,
.kit-title-input input#kit-title:focus-visible{box-shadow:none!important;outline:none!important;outline-offset:0!important;border:0!important;border-radius:0!important;min-width:0;flex:1 1 0;width:100%;max-width:100%;height:auto;line-height:1.4;appearance:none}
.kit-title-field:has(input#kit-title:focus-visible){outline:none!important;box-shadow:none!important}
.kit-title-input:focus-within{border-color:#f1f1f1;box-shadow:none}

/* publication-menu-readable-v1 */
#publish-dialog{width:min(480px,calc(100vw - 24px));padding:30px 24px;border:1px solid #3b3b3f;border-radius:24px;background:#171719;color:#f5f5f5;box-shadow:0 24px 90px #0009}
#publish-dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}
#publish-form{display:grid;gap:18px}#publish-form>p,#publish-form>div{margin:0}
#publish-form h2{font-size:26px;line-height:1.2;font-weight:800;margin:0;padding-right:20px}
#publish-form>p{font-size:15px;line-height:1.6;color:#c5c5cc}
#publish-form>label{display:grid;gap:10px;font-size:16px;font-weight:750;color:#f0f0f3;margin:0}
#publish-form input,#publish-form select{width:100%;min-width:0;min-height:56px;margin:0;padding:15px 16px;border:1px solid #49494f;border-radius:14px;background:#232326;color:#fff;font-family:inherit;font-size:16px;font-weight:600;line-height:1.4;box-sizing:border-box}
#publish-form input:focus,#publish-form select:focus{outline:2px solid #ededf2;outline-offset:2px;box-shadow:none}
#publish-form .primary-button{min-height:56px;font-size:17px;font-weight:750;border-radius:15px;text-align:center}
#publish-form .inline-note{padding:14px 16px;border-radius:14px;background:#242427;font-size:14px;line-height:1.6}
#publish-form .pack-choice{padding:12px;font-size:15px;font-weight:650;border-radius:14px;min-height:60px;background:#232326}
#publish-form #publish-status{font-size:16px;font-weight:650;line-height:1.5}
.kit-logo-upload{display:grid;gap:10px;padding:20px!important;border:1px dashed #66666e!important;border-radius:16px!important;background:#1d1d21;font-size:17px!important;font-weight:750;line-height:1.45;cursor:pointer}
.kit-logo-upload:hover{background:#25252a;border-color:#aaa!important}
.kit-logo-upload small{display:block;font-size:14px!important;line-height:1.65;color:#bfc0c9;font-weight:450}