/* UI kits: gallery tiles and the preview window. */
.kt-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.kt-panel { display: grid; gap: 12px; padding: 18px 20px; align-content: start; }
.kt-card { display: grid; text-align: left; padding: 0; border: 2px solid transparent; border-radius: 16px; overflow: hidden; background: var(--surface-solid, #14102a); color: var(--text, #f1eeff); color-scheme: dark; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.kt-card:hover, .kt-card:focus-visible { transform: translateY(-3px); border-color: var(--accent, #9b7bff); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.kt-card.on { border-color: #2ee59d; }
.kt-box { height: 190px; overflow: hidden; background: #fff; position: relative; }
.kt-box iframe { border: 0; width: 200%; height: 380px; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.kt-cap { display: grid; gap: 4px; padding: 10px 12px 12px; background: var(--surface-solid, #14102a); }
.kt-cap b { font-size: 14px; }
.kt-dots { display: flex; gap: 4px; }
.kt-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(128,128,128,.4); }
.kt-modal { width: min(1240px, 96vw) !important; max-width: none !important; display: grid; gap: 12px; max-height: 94vh; overflow: auto; }
.kt-stage { height: min(40vh, 440px); background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid rgba(128,128,128,.3); display: flex; justify-content: center; }
.kt-stage[data-device="phone"] { background: rgba(128,128,128,.12); }
.kt-frame { border: 0; width: 100%; height: 100%; background: #fff; transition: width .25s ease; }
.kt-stage[data-device="phone"] .kt-frame { width: 390px; max-width: 100%; border-left: 1px solid rgba(128,128,128,.3); border-right: 1px solid rgba(128,128,128,.3); }
.kt-more summary { cursor: pointer; font-size: 13px; }
.kt-tabs { display: flex; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .kt-card, .kt-frame { transition: none; } .kt-card:hover { transform: none; } }
@media (max-width: 720px) { .kt-stage { height: 52vh; } .kt-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .kt-box { height: 150px; } }
.kt-actions { position: sticky; bottom: -1px; gap: 8px; padding: 12px 0 4px; background: linear-gradient(to top, var(--surface-solid, #14102a) 70%, transparent); }
.kt-build { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }