/* ===== AR Profile - style.css (v12) ===== */

/* スクロールバー非表示 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 超薄ガラス */
.ultra-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,0.05);
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* VRChat ソリッドUI */
.vrc-solid-bg { background-color: #21242e; }
.vrc-card-bg  { background-color: #282d3c; border-radius: 8px; }
.vrc-text-cyan { color: #4b8f9e; }

.text-glass-light {
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 5px rgba(0,0,0,0.6);
}

/* スライダー */
input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    height: 18px; width: 18px; border-radius: 50%;
    background: #8b5cf6; cursor: pointer; margin-top: -7px;
    box-shadow: 0 0 0 4px rgba(139,92,246,0.15); transition: all 0.2s;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 4px; cursor: pointer; background: #3f3f46; border-radius: 2px;
}

/* チェックボックス peer fix */
input[type="checkbox"].peer:checked ~ div > svg { opacity: 1; }

/* モーダルアニメーション */
.modal-overlay { transition: opacity 0.3s ease; }
.modal-content { transition: transform 0.3s ease, opacity 0.3s ease; }

/* ボタンツールバー */
.toolbar-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    transition: all 0.2s ease;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.toolbar-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.toolbar-btn:active {
    transform: scale(0.92);
}

.toolbar-transition {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.toolbar-hidden {
    transform: translate(-50%, 120%);
    opacity: 0;
    pointer-events: none;
}

/* トースト */
.toast-enter {
    transform: translateY(1rem); opacity: 0;
}
.toast-show {
    transform: translateY(0); opacity: 1;
    transition: all 0.3s ease;
}
.toast-hide {
    transform: translateY(1rem); opacity: 0;
    transition: all 0.3s ease;
}

select, option { background-color: #1f2937; color: white; }

@media (max-width: 768px) {
    #template-x,
    #template-karot,
    #template-instagram,
    #template-discord {
        width: 290px !important;
    }

    #template-vrchat {
        width: min(90vw, 440px) !important;
    }
}