/* Sminkelj!: pink, pearl and rose-gold, glass panels, gentle motion. Portrait frame, centred on
   landscape screens. Sizes in cqw/cqh of #app (container-type: size). */
:root {
  --rose: #e46f97; --rose-d: #b8466f; --plum: #6d2c4f; --ink: #4a2338; --pearl: #fff8fa;
  --rg: #e9b3a0; --gold: #d9ac62; --glass: rgba(255, 250, 252, 0.74); --line: rgba(160, 80, 110, 0.18);
  --shadow: 0 0.8cqw 3cqw rgba(120, 40, 80, 0.18), 0 0.2cqw 0.6cqw rgba(120, 40, 80, 0.12);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #2a1520; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  background: radial-gradient(120% 80% at 50% 0%, #5a2a40 0%, #2a1520 70%);
}
#app {
  position: fixed; left: 50%; top: 0; transform: translateX(-50%);
  height: 100vh; height: 100dvh; width: min(100vw, calc(100dvh * 0.5));
  container-type: size; overflow: hidden; background: #fbe3ea;
}
@media (min-aspect-ratio: 1/1) { #app { box-shadow: 0 0 60px rgba(0, 0, 0, 0.45); border-radius: 0; } }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 2cqw;
  min-height: 12.5cqw; padding: 0 6cqw; border-radius: 99px; font-weight: 800; font-size: 4.4cqw; letter-spacing: 0.01em;
  color: #fff; background: linear-gradient(180deg, #f08bb0 0%, #db5f8a 100%);
  box-shadow: 0 1.2cqw 3cqw rgba(200, 60, 110, 0.35), inset 0 0.4cqw 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:active { transform: scale(0.96); filter: brightness(0.96); }
.btn.ghost { color: var(--rose-d); background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn.gold { background: linear-gradient(180deg, #f3cf8e 0%, #d39d4f 100%); box-shadow: 0 1.2cqw 3cqw rgba(190, 130, 40, 0.35), inset 0 0.4cqw 0 rgba(255, 255, 255, 0.5); }
.btn.small { min-height: 10cqw; padding: 0 4.2cqw; font-size: 3.7cqw; }
.icon-btn {
  width: 11.5cqw; height: 11.5cqw; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--rose-d); font-weight: 800; font-size: 3cqw; transition: transform 0.12s;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 55%; height: 55%; }
.icon-btn.on { background: linear-gradient(180deg, #f08bb0, #db5f8a); color: #fff; }
.icon-btn[disabled] { opacity: 0.4; }
.glass { background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.7); }

/* ---------------------------------------------------------------- title */
.title-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.title-wrap > * { pointer-events: auto; }
.logo { margin-top: calc(var(--safe-t) + 7cqh); width: 80cqw; height: 26cqw; display: block; filter: drop-shadow(0 1cqw 2cqw rgba(150, 40, 90, 0.25)); cursor: pointer; }
.tagline { margin-top: 0.4cqw; padding: 1cqw 3.6cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.72); font-weight: 800; font-size: 3.8cqw; color: var(--rose-d); letter-spacing: 0.05em; box-shadow: 0 0.6cqw 2cqw rgba(150, 40, 90, 0.12); }
.menu { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 7cqh); display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.menu .btn { width: 66cqw; }
.menu-row { display: flex; gap: 3cqw; }
.menu-row .btn { width: 31.5cqw; padding: 0 2cqw; }
.corner { position: absolute; top: calc(var(--safe-t) + 3cqw); display: flex; gap: 2.5cqw; }
.corner.r { right: 3.5cqw; } .corner.l { left: 3.5cqw; }

/* ---------------------------------------------------------------- salon */
.chat { position: absolute; left: 5cqw; right: 5cqw; top: calc(var(--safe-t) + 4cqw); display: flex; flex-direction: column; gap: 2cqw; align-items: flex-start; }
.who { display: flex; align-items: center; gap: 2.4cqw; padding: 1.6cqw 4cqw 1.6cqw 1.6cqw; border-radius: 99px; font-weight: 800; font-size: 3.9cqw; }
.who .av { width: 8.5cqw; height: 8.5cqw; border-radius: 50%; background: linear-gradient(135deg, #ffd1df, #f3a6c0); display: grid; place-items: center; color: #fff; font-size: 4cqw; }
.who small { font-weight: 600; opacity: 0.7; }
.bubble {
  max-width: 78cqw; padding: 2.3cqw 3.8cqw; border-radius: 5cqw 5cqw 5cqw 1.4cqw; font-size: 3.85cqw; line-height: 1.32; font-weight: 600;
  background: #fff; box-shadow: var(--shadow); animation: pop 0.38s cubic-bezier(.2, 1.4, .4, 1) both;
}
.bubble.me { align-self: flex-end; border-radius: 5cqw 5cqw 1.4cqw 5cqw; background: linear-gradient(180deg, #f08bb0, #db5f8a); color: #fff; }
.typing { display: inline-flex; gap: 1.2cqw; padding: 3.4cqw 4cqw; border-radius: 5cqw 5cqw 5cqw 1.4cqw; background: #fff; box-shadow: var(--shadow); }
.typing i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #e7a0b9; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-1.2cqw); opacity: 1; } }
@keyframes pop { from { transform: scale(0.6) translateY(2cqw); opacity: 0; } to { transform: none; opacity: 1; } }
.moodcard { position: absolute; left: 5cqw; right: 5cqw; bottom: calc(var(--safe-b) + 24cqw); padding: 3.4cqw 4.4cqw; border-radius: 5cqw; display: flex; align-items: center; gap: 3cqw; animation: pop 0.4s 0.2s both; }
.moodcard b { font-size: 4.4cqw; color: var(--plum); }
.moodcard p { margin: 0.6cqw 0 0; font-size: 3.4cqw; opacity: 0.75; font-weight: 600; }
.dots { display: flex; gap: 1.4cqw; margin-left: auto; }
.dots i { width: 6cqw; height: 6cqw; border-radius: 50%; box-shadow: inset 0 -0.6cqw 0 rgba(0, 0, 0, 0.12), 0 0.4cqw 1cqw rgba(0, 0, 0, 0.15); border: 0.6cqw solid #fff; }
.bottom-cta { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 6cqw); display: flex; justify-content: center; gap: 3cqw; }
.bottom-cta .btn { min-width: 56cqw; }

/* ---------------------------------------------------------------- makeup */
.topbar { position: absolute; left: 3cqw; right: 3cqw; top: calc(var(--safe-t) + 2.6cqw); display: flex; align-items: center; gap: 2.2cqw; }
.topbar .spacer { flex: 1; }
.brief-pill { display: flex; align-items: center; gap: 2cqw; max-width: 48cqw; padding: 1.2cqw 3.4cqw 1.2cqw 1.2cqw; border-radius: 99px; font-size: 3.3cqw; font-weight: 700; }
.brief-pill .av { width: 9cqw; height: 9cqw; flex: none; border-radius: 50%; background: linear-gradient(135deg, #ffd1df, #f3a6c0); display: grid; place-items: center; color: #fff; font-weight: 800; }
.brief-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.done { min-height: 11.5cqw; padding: 0 4.6cqw; font-size: 4cqw; }
.tray { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4cqw 0 calc(var(--safe-b) + 2.6cqw); border-radius: 6cqw 6cqw 0 0; }
.tray .row { display: flex; gap: 2.2cqw; overflow-x: auto; padding: 1cqw 3.5cqw; scrollbar-width: none; scroll-snap-type: x proximity; }
.tray .row::-webkit-scrollbar { display: none; }
.prod { flex: none; width: 15.5cqw; display: flex; flex-direction: column; align-items: center; gap: 0.8cqw; font-size: 2.8cqw; font-weight: 700; color: var(--plum); scroll-snap-align: start; }
.prod .ic { width: 13cqw; height: 13cqw; border-radius: 4cqw; display: grid; place-items: center; background: #fff; box-shadow: 0 0.5cqw 1.6cqw rgba(140, 50, 90, 0.14); transition: transform 0.15s, box-shadow 0.15s; }
.prod .ic canvas, .prod .ic img { width: 86%; height: 86%; }
.prod.sel .ic { transform: translateY(-1cqw); box-shadow: 0 0 0 0.8cqw #f08bb0, 0 1.6cqw 3cqw rgba(200, 60, 110, 0.3); }
.prod.sel { color: var(--rose-d); }
.swatches { display: flex; gap: 2.4cqw; overflow-x: auto; padding: 2cqw 3.5cqw 1cqw; scrollbar-width: none; align-items: center; min-height: 14cqw; }
.swatches::-webkit-scrollbar { display: none; }
.sw { flex: none; width: 10cqw; height: 10cqw; border-radius: 50%; border: 0.8cqw solid #fff; box-shadow: 0 0.6cqw 1.4cqw rgba(120, 40, 80, 0.22), inset 0 -1cqw 1.4cqw rgba(0, 0, 0, 0.12), inset 0 0.8cqw 1cqw rgba(255, 255, 255, 0.35); transition: transform 0.15s; position: relative; }
.sw.sel { transform: scale(1.18); box-shadow: 0 0 0 0.7cqw #e46f97, 0 1cqw 2cqw rgba(120, 40, 80, 0.3); }
.sw.locked { filter: grayscale(0.7) brightness(1.05); opacity: 0.55; }
.sw.locked::after { content: ''; position: absolute; inset: 28%; border-radius: 1cqw; background: rgba(255, 255, 255, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b8466f' d='M7 10V8a5 5 0 0 1 10 0v2h1v11H6V10zm2 0h6V8a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center/70% no-repeat; }
.sw.stk { border-radius: 3cqw; background: #fff; display: grid; place-items: center; width: 12cqw; height: 12cqw; }
.sw.stk canvas, .sw.stk img { width: 80%; height: 80%; }
.sw.chip { width: auto; height: 10cqw; padding: 0 3.6cqw; border-radius: 99px; background: #fff; font-size: 3.4cqw; font-weight: 700; color: var(--plum); display: grid; place-items: center; }
.sw.chip.locked { padding-right: 7.6cqw; }
.sw.chip.locked::after { inset: auto; right: 2cqw; top: 50%; width: 4.4cqw; height: 4.4cqw; margin-top: -2.2cqw; border-radius: 50%; background-size: 64%; }
.sw.chip.sel { background: linear-gradient(180deg, #f08bb0, #db5f8a); color: #fff; }
.hint { position: absolute; left: 50%; transform: translateX(-50%); padding: 2cqw 4.4cqw; border-radius: 99px; font-size: 3.5cqw; font-weight: 700; color: var(--plum); white-space: nowrap; transition: opacity 0.4s; pointer-events: none !important; }
.hint.hide { opacity: 0; }
.toast { position: absolute; left: 50%; top: 22cqh; transform: translateX(-50%); padding: 3cqw 5.4cqw; border-radius: 99px; font-size: 4cqw; font-weight: 800; color: #fff; background: linear-gradient(180deg, #f3cf8e, #d39d4f); box-shadow: var(--shadow); animation: toast 2.4s both; pointer-events: none !important; white-space: nowrap; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 3cqw) scale(0.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -2cqw); } }
.moodboard { position: absolute; left: 4cqw; right: 4cqw; top: calc(var(--safe-t) + 17cqw); padding: 4cqw 4.6cqw; border-radius: 5cqw; animation: pop 0.3s both; }
.moodboard h3 { margin: 0 0 2cqw; font-size: 4.2cqw; color: var(--plum); }
.moodboard p { margin: 0 0 2cqw; font-size: 3.7cqw; line-height: 1.35; font-weight: 600; }
.moodboard ul { margin: 0; padding-left: 5cqw; font-size: 3.5cqw; line-height: 1.5; font-weight: 600; opacity: 0.85; }

/* ---------------------------------------------------------------- rating */
.rate { position: absolute; left: 4cqw; right: 4cqw; bottom: calc(var(--safe-b) + 4cqw); padding: 4.4cqw 4.6cqw 4cqw; border-radius: 6cqw; text-align: center; animation: pop 0.45s both; }
.stars { display: flex; justify-content: center; gap: 1.6cqw; margin: 0 0 2cqw; }
.stars svg { width: 12cqw; height: 12cqw; transform: scale(0); }
.stars .gstar { width: 13cqw; height: 13cqw; transform: scale(0); }
.stars .gstar.in { animation: star 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
.stars svg.in { animation: star 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes star { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
.rate h2 { margin: 0 0 1.4cqw; font-size: 4.8cqw; color: var(--plum); }
.rate .say { margin: 0 0 2cqw; font-size: 3.9cqw; line-height: 1.35; font-weight: 600; }
.rate .tip { margin: 0 0 1.4cqw; font-size: 3.4cqw; line-height: 1.35; font-weight: 600; color: var(--rose-d); background: rgba(255, 255, 255, 0.7); border-radius: 3cqw; padding: 1.8cqw 3cqw; }
.rate .acts { display: flex; gap: 2.4cqw; justify-content: center; margin-top: 3cqw; flex-wrap: wrap; }
.rate .acts .btn { flex: 1; padding: 0 3cqw; }

/* ---------------------------------------------------------------- photo */
.photo-wrap { background: rgba(251, 227, 234, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.photo-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--safe-t) + 4cqw); }
.photo-card { width: 74cqw; aspect-ratio: 4 / 5; border-radius: 2cqw; box-shadow: 0 3cqw 8cqw rgba(110, 30, 70, 0.35); background: #fff; }
.photo-card canvas { width: 100%; height: 100%; display: block; border-radius: 2cqw; }
.photo-tools { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4cqw 0 calc(var(--safe-b) + 3cqw); border-radius: 6cqw 6cqw 0 0; }
.photo-tools .lbl { padding: 0 4.4cqw; font-size: 3.1cqw; font-weight: 800; color: var(--rose-d); text-transform: uppercase; letter-spacing: 0.08em; }
.photo-tools .acts { display: flex; gap: 2.4cqw; padding: 2.4cqw 4cqw 0; }
.photo-tools .acts .btn { flex: 1; padding: 0 2cqw; }
.flash { position: absolute; inset: 0; background: #fff; animation: flash 0.6s ease-out both; pointer-events: none !important; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* ---------------------------------------------------------------- live */
.live-top { position: absolute; left: 3cqw; right: 3cqw; top: calc(var(--safe-t) + 17cqw); display: flex; align-items: center; gap: 2cqw; pointer-events: none !important; }
.badge { padding: 1cqw 2.6cqw; border-radius: 1.6cqw; background: linear-gradient(180deg, #ff5d8f, #e2336d); color: #fff; font-weight: 900; font-size: 3.2cqw; letter-spacing: 0.08em; box-shadow: 0 0.6cqw 1.6cqw rgba(226, 51, 109, 0.4); }
.viewers { padding: 1cqw 2.6cqw; border-radius: 1.6cqw; background: rgba(40, 10, 25, 0.45); color: #fff; font-weight: 800; font-size: 3.2cqw; backdrop-filter: blur(6px); }
.timer { margin-left: auto; width: 14cqw; height: 14cqw; position: relative; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.4cqw; font-weight: 900; color: var(--plum); }
.timer.urgent b { color: #e2336d; animation: pulse 0.5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.15); } }
.comments { position: absolute; left: 3cqw; width: 62cqw; bottom: 46cqw; display: flex; flex-direction: column; gap: 1.4cqw; align-items: flex-start; pointer-events: none !important;
  -webkit-mask-image: linear-gradient(to top, #000 70%, transparent); mask-image: linear-gradient(to top, #000 70%, transparent); }
.cm { padding: 1.4cqw 3cqw; border-radius: 3.4cqw; background: rgba(40, 10, 25, 0.42); color: #fff; font-size: 3.3cqw; line-height: 1.3; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cm 0.35s ease-out both; max-width: 100%; }
.cm b { color: #ffc2d6; font-weight: 800; margin-right: 1.2cqw; }
@keyframes cm { from { opacity: 0; transform: translateY(3cqw); } to { opacity: 1; transform: none; } }
.score-chip { position: absolute; right: 3cqw; top: calc(var(--safe-t) + 33cqw); padding: 1.2cqw 3cqw; border-radius: 99px; font-weight: 900; font-size: 3.6cqw; color: var(--rose-d); pointer-events: none !important; }
.live-intro, .live-end { position: absolute; left: 6cqw; right: 6cqw; top: 50%; transform: translateY(-50%); padding: 6cqw 5cqw; border-radius: 6cqw; text-align: center; animation: pop 0.4s both; }
.live-intro h2, .live-end h2 { margin: 0 0 2cqw; font-size: 6cqw; color: var(--plum); }
.live-intro p { margin: 0 0 4cqw; font-size: 4cqw; font-weight: 600; line-height: 1.35; }
.live-end .big { font-size: 10cqw; font-weight: 900; color: var(--rose-d); margin: 1cqw 0 2cqw; }
.live-end table { width: 100%; font-size: 3.8cqw; font-weight: 700; margin-bottom: 3cqw; }
.live-end td:last-child { text-align: right; color: var(--rose-d); }
.live-end .new { color: #d39d4f; font-weight: 900; font-size: 4.4cqw; margin-bottom: 2cqw; animation: pulse 0.6s infinite alternate; }
.live-end { top: auto; bottom: calc(var(--safe-b) + 4cqw); transform: none; padding: 4.4cqw 5cqw; }
.live-end .acts { display: flex; flex-direction: column; gap: 2.4cqw; align-items: center; }
.live-end .acts .btn { width: 70%; }

/* ---------------------------------------------------------------- panels: best, gallery, settings */
.panel { position: absolute; left: 4cqw; right: 4cqw; top: calc(var(--safe-t) + 18cqw); bottom: calc(var(--safe-b) + 6cqw); border-radius: 6cqw; padding: 5cqw; display: flex; flex-direction: column; animation: pop 0.35s both; }
.panel h2 { margin: 0 0 3cqw; font-size: 5.6cqw; color: var(--plum); text-align: center; }
.panel .body { flex: 1; overflow-y: auto; touch-action: pan-y; }
.panel .empty { text-align: center; font-weight: 600; opacity: 0.7; margin-top: 10cqw; font-size: 4cqw; }
.panel .foot { display: flex; justify-content: center; gap: 3cqw; margin-top: 3cqw; }
.best-row { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 1cqw; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 3.8cqw; }
.best-row .n { width: 7cqw; color: var(--rose-d); font-weight: 900; }
.best-row .s { margin-left: auto; color: var(--rose-d); font-weight: 900; }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.gal img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2cqw; box-shadow: 0 0.8cqw 2cqw rgba(110, 30, 70, 0.2); }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 3cqw 1cqw; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 4cqw; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--rose-d); font-size: 4.4cqw; background: #fbe3ea; z-index: 5; transition: opacity 0.5s; }
.loading.hide { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- cheat menu */
.cheat-pill { position: absolute; right: 2cqw; bottom: 40cqh; z-index: 30; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(109, 44, 79, 0.75); color: #fff; font-size: 2.8cqw; font-weight: 900; display: grid; place-items: center; }
.cheat { position: absolute; left: 3cqw; right: 3cqw; top: calc(var(--safe-t) + 3cqw); max-height: 86cqh; overflow-y: auto; z-index: 31; border-radius: 4cqw; padding: 3.4cqw; background: rgba(255, 245, 249, 0.96); box-shadow: 0 3cqw 8cqw rgba(60, 10, 40, 0.4); font-size: 3.2cqw; touch-action: pan-y; }
.cheat h4 { margin: 2.4cqw 0 1.4cqw; font-size: 3cqw; color: var(--rose-d); text-transform: uppercase; letter-spacing: 0.08em; }
.cheat .grid { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.cheat button { padding: 1.8cqw 2.8cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 0.4cqw 1cqw rgba(110, 30, 70, 0.15); font-weight: 700; color: var(--plum); }
.cheat button.on { background: #e46f97; color: #fff; }
.cheat .x { position: sticky; top: 0; float: right; }
.cheat pre { white-space: pre-wrap; font-size: 2.6cqw; background: #fff; padding: 2cqw; border-radius: 2cqw; max-height: 30cqh; overflow: auto; user-select: text; }

/* GKFullscreen: the floating corner button sat on the salon name pill; the title corner has its own inline button */
body > .gk-fs-btn { display: none !important; }
.icon-btn.gfx { padding: 0; }
.icon-btn.gfx canvas { width: 9.2cqw; height: 9.2cqw; display: block; }
.sw.chip.has-thumb { padding-left: 1cqw; gap: 1.4cqw; grid-auto-flow: column; }
.sw.chip .thumb { width: 8cqw; height: 8.9cqw; object-fit: contain; border-radius: 50%; }
.badge-img { height: 7cqw; width: auto; filter: drop-shadow(0 0.6cqw 1.2cqw rgba(226, 51, 109, 0.35)); }