/* ============================================================
   THEME PICKER — floating panel, liquid glass style
   ============================================================ */

/* ---------- Кнопка-триггер ---------- */
#gt-picker-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
        0 4px 20px rgba(100, 80, 200, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.60);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
}
#gt-picker-btn:hover {
    transform: scale(1.10);
    box-shadow:
        0 6px 28px rgba(100, 80, 200, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
#gt-picker-btn.open {
    transform: scale(1.05) rotate(30deg);
}

/* ---------- Панель ---------- */
#gt-picker-panel {
    position: fixed;
    bottom: 84px;
    right: 28px;
    z-index: 9999;
    width: 260px;
    background: rgba(30, 20, 50, 0.72);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    padding: 18px 16px 20px;
    display: none;
    flex-direction: column;
    gap: 16px;
    transform-origin: bottom right;
    animation: gt-panel-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#gt-picker-panel.visible {
    display: flex;
}

@keyframes gt-panel-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---------- Заголовок / режимы ---------- */
.gt-panel-modes {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.gt-mode-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
}
.gt-mode-btn:hover {
    background: rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.90);
}
.gt-mode-btn.active {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
}

/* ---------- Свотчи палитр ---------- */
.gt-swatches-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gt-swatches {
    display: flex;
    gap: 7px;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
}
.gt-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    flex-shrink: 0;
}
.gt-swatch:hover {
    transform: scale(1.18);
    border-color: rgba(255, 255, 255, 0.60);
}
.gt-swatch.active {
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 2px 10px rgba(0,0,0,0.30);
    transform: scale(1.12);
}

/* ---------- Разделитель ---------- */
.gt-divider {
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: 0 -4px;
}

/* ---------- Слайдер шума ---------- */
.gt-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gt-slider-icon {
    font-size: 15px;
    opacity: 0.55;
    flex-shrink: 0;
    color: #fff;
}
.gt-slider-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    width: 36px;
}
input[type="range"].gt-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.20);
    outline: none;
    cursor: pointer;
}
input[type="range"].gt-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    cursor: pointer;
    transition: transform 0.15s;
}
input[type="range"].gt-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
input[type="range"].gt-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    cursor: pointer;
}