/* Кнопки мини-аппа. Нужен colors/palette.css.
   Материал «плитки»: тёмная заливка + кромка-блик в левом верхнем и правом нижнем углах.
   Кромка — рамка 1px (0.5px на ретине), под которой лежит градиент; без псевдоэлементов, чтобы не тормозило */

.btn, .btn-round, .tile {
    border: 1px solid transparent;
    background:
        linear-gradient(rgb(var(--fill)), rgb(var(--fill))) padding-box,
        linear-gradient(135deg, rgb(var(--ink) / .36), rgb(var(--ink) / .1) 26%, rgb(var(--ink) / 0) 46%, rgb(var(--ink) / 0) 56%, rgb(var(--ink) / .08) 76%, rgb(var(--ink) / .28)) border-box;
    --fill: var(--tile-rgb);
}

@media (min-resolution: 2dppx) {
    .btn, .btn-round, .tile {
        border-width: .5px;
    }
}

/* главная кнопка: капсула во всю ширину, 60px, шрифт Unbounded */
.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    width: 100%;
    height: 3.75rem;
    border-radius: 9999px;
    color: var(--text);
    font: 600 .875rem/1 var(--display);
    letter-spacing: -.01em;
    transition: transform .2s var(--ease);
}

.btn:active {
    transform: scale(.98);
}

/* компактная: по ширине текста, 48px */
.btn--sm {
    width: auto;
    height: 3rem;
    padding: 0 1.75rem;
    font-size: .8125rem;
}

/* акцентная: золотая заливка, тёмный текст */
.btn--accent {
    --fill: 243 180 67;
    color: #141616;
}

/* цена внутри кнопки: число + значок звезды акцентом */
.btn-price {
    display: inline-flex;
    align-items: center;
    gap: .1875rem;
}

.btn-price svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--accent);
}

/* круглая кнопка 40px (закрыть, назад, настройки) */
.btn-round {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--hint);
    transition: transform .2s var(--ease);
}

.btn-round svg {
    width: 1.125rem;
    height: 1.125rem;
}

.btn-round:active {
    transform: scale(.94);
}

/* таблетка-переключатель 32px (фильтры, «режим админа») */
.chip {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .875rem;
    border-radius: 999px;
    background: rgb(var(--ink) / .08);
    color: var(--hint);
    font-size: .8125rem;
    transition: transform .2s var(--ease), color .2s;
}

.chip.is-on {
    color: var(--accent);
}

.chip:active {
    transform: scale(.96);
}

/* поле поиска: залитая капсула без обводки, как в Telegram */
.search {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.75rem;
    padding: 0 .875rem;
    border-radius: 999px;
    background: rgb(var(--ink) / .08);
}

.search svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--hint);
    flex: none;
}

.search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: 0 0;
    color: var(--text);
    font-size: 1.0625rem;
}

.search input::placeholder {
    color: var(--hint);
}

/* квадратная плитка-кнопка (каталог), скругление-сквиркл где поддерживается */
.tile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    width: 100%;
    border-radius: 20%;
    overflow: clip;
    transition: transform .2s var(--ease);
}

@supports (corner-shape: squircle) {
    .tile {
        corner-shape: squircle;
        border-radius: 34%;
    }
}

.tile:active {
    transform: scale(.97);
}