/* ============================================================
   液体玻璃主题 · 面板 UI 样式
   悬浮按钮 + 主题选择面板（纯 CSS，无框架依赖）
   ============================================================ */

.gt-fab-wrap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 20000;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 悬浮按钮 */
.gt-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--glass-stroke-2);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 65%, transparent),
        color-mix(in srgb, var(--accent-2) 65%, transparent));
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    color: var(--glass-btn-text);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 34%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .25s ease, box-shadow .25s ease;
}

.gt-fab:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 46%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .5);
}

.gt-fab:active { transform: scale(.96); }

/* 面板 */
.gt-panel {
    position: absolute;
    right: 0;
    bottom: 66px;
    width: 302px;
    max-width: calc(100vw - 36px);
    padding: 16px;
    border-radius: var(--glass-radius);
    background: var(--glass-surface-2);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--glass-shadow-lg), var(--glass-inner);
    color: var(--glass-text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.96);
    transform-origin: bottom right;
    transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.4, .64, 1), visibility .28s;
}

.gt-panel.gt-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.gt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: 4px;
    letter-spacing: .2px;
}

.gt-head i { color: var(--accent); }

.gt-close {
    border: none;
    background: transparent;
    color: var(--glass-text-muted);
    font-size: 22px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.gt-close:hover {
    background: var(--glass-surface-3);
    color: var(--glass-text);
}

.gt-sub {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--glass-text-muted);
    margin: 14px 0 9px;
}

/* 主题色块网格 */
.gt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.gt-sw {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 4px 7px;
    border-radius: 13px;
    border: 1px solid var(--glass-stroke);
    background: var(--glass-surface);
    color: var(--glass-text-muted);
    font-size: .68rem;
    cursor: pointer;
    transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}

.gt-sw:hover {
    transform: translateY(-2px);
    background: var(--glass-surface-2);
    color: var(--glass-text);
}

.gt-sw-chip {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c1), var(--c2) 52%, var(--c3));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c1) 46%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: transform .25s ease;
}

.gt-sw:hover .gt-sw-chip { transform: scale(1.09); }

.gt-sw.is-active {
    border-color: color-mix(in srgb, var(--c1) 78%, transparent);
    background: color-mix(in srgb, var(--c1) 16%, var(--glass-surface-2));
    color: var(--glass-text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c1) 34%, transparent);
}

.gt-sw.is-active .gt-sw-chip {
    box-shadow: 0 4px 18px color-mix(in srgb, var(--c1) 62%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .55);
}

.gt-sw.is-active::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c1);
    box-shadow: 0 0 8px var(--c1);
}

.gt-sw-name { white-space: nowrap; }

/* 明暗切换 */
.gt-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.gt-modes button {
    padding: 9px 4px;
    border-radius: 11px;
    border: 1px solid var(--glass-stroke);
    background: var(--glass-surface);
    color: var(--glass-text-muted);
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s, border-color .2s, background .2s, color .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.gt-modes button:hover {
    transform: translateY(-2px);
    background: var(--glass-surface-2);
    color: var(--glass-text);
}

.gt-modes button.is-active {
    background: color-mix(in srgb, var(--accent) 20%, var(--glass-surface-2));
    border-color: color-mix(in srgb, var(--accent) 62%, transparent);
    color: var(--glass-text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
}

.gt-modes button i { font-size: 13px; }

/* 小屏适配 */
@media (max-width: 420px) {
    .gt-panel { width: calc(100vw - 32px); right: -4px; }
    .gt-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
    .gt-sw { font-size: .64rem; padding: 7px 2px 6px; }
    .gt-sw-chip { width: 26px; height: 26px; }
}

/* 打印时隐藏 */
@media print { .gt-fab-wrap { display: none !important; } }