/* ========================================
 * 音效库图标系统
 * 阿里矢量图标风格 + Bootstrap Icons 字体
 * 支持 CSS fallback，确保图标始终可见
 * ======================================== */

/* Bootstrap Icons 字体 - 多 CDN 回退 */
@font-face {
    font-family: "bootstrap-icons";
    font-display: swap;
    src: url("https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.3/fonts/bootstrap-icons.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2"),
         url("https://unpkg.com/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2");
}

/* 图标基础样式 - 阿里矢量图标风格 */
.icon {
    display: inline-block;
    font-family: "bootstrap-icons", sans-serif;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    vertical-align: middle;
    font-weight: normal;
    color: inherit;
}

/* 旋转动画 */
.icon-spin {
    display: inline-block;
    animation: icon-spin 1s infinite linear;
}

@keyframes icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 特殊图标默认着色 */
.icon.icon-success { color: #07C160; }
.icon.icon-error  { color: #dc3545; }
.icon.icon-warn   { color: #ffc107; }
.icon.icon-info   { color: #17a2b8; }
.icon.icon-wechat { color: #07C160; }
.icon.icon-alipay { color: #1677FF; }
.icon.icon-play   { color: #FF6B00; }
.icon.icon-download { color: #4f8cff; }
.icon.icon-qrcode { color: #4f8cff; }

/* 尺寸工具类 */
.icon-sm { font-size: 14px; }
.icon-md { font-size: 18px; }
.icon-lg { font-size: 24px; }
.icon-xl { font-size: 32px; }
.icon-xxl { font-size: 48px; }

/* ========== CSS Fallback：字体加载失败时的降级方案 ========== */
.icon-speaker::before   { content: "\1F50A"; }
.icon-speaker-fill::before { content: "\1F50A"; }
.icon-music::before     { content: "\1F3B5"; }
.icon-play::before      { content: "\25B6"; }
.icon-play-fill::before { content: "\25B6"; }
.icon-download::before  { content: "\2B07"; }
.icon-upload::before    { content: "\2B06"; }
.icon-card::before      { content: "\1F4B3"; }
.icon-money::before     { content: "\1F4B0"; }
.icon-user::before      { content: "\1F464"; }
.icon-search::before    { content: "\1F50D"; }
.icon-settings::before  { content: "\2699"; }
.icon-gear::before      { content: "\2699"; }
.icon-tag::before       { content: "\1F3F7"; }
.icon-book::before      { content: "\1F4D6"; }
.icon-document::before  { content: "\1F4C4"; }
.icon-chat::before      { content: "\1F4AC"; }
.icon-globe::before     { content: "\1F310"; }
.icon-chart::before     { content: "\1F4CA"; }
.icon-lock::before      { content: "\1F512"; }
.icon-trophy::before    { content: "\1F3C6"; }
.icon-warn::before      { content: "\26A0"; }
.icon-close::before     { content: "\2716"; }
.icon-check::before     { content: "\2714"; }
.icon-refresh::before   { content: "\21BB"; }
.icon-list::before      { content: "\2630"; }
.icon-yuan::before      { content: "\1F4B4"; }
.icon-bolt::before      { content: "\26A1"; }
.icon-bell::before      { content: "\1F514"; }
.icon-news::before      { content: "\1F4F0"; }
.icon-wave::before      { content: "\1F30A"; }
.icon-headphone::before { content: "\1F3A7"; }
.icon-headphones::before { content: "\1F3A7"; }
.icon-qrcode::before    { content: "\1F4F7"; }
.icon-wechat::before    { content: "\1F4AC"; }
.icon-alipay::before    { content: "\1F4B3"; }
.icon-home::before      { content: "\1F3E0"; }
.icon-ranking::before   { content: "\1F3C6"; }
.icon-help::before      { content: "\2753"; }
.icon-share::before     { content: "\1F4E4"; }
.icon-copy::before      { content: "\1F4CB"; }
.icon-delete::before    { content: "\1F5D1"; }
.icon-edit::before      { content: "\270F"; }
.icon-eye::before       { content: "\1F441"; }
.icon-time::before      { content: "\23F0"; }
.icon-size::before      { content: "\1F4CF"; }
.icon-calendar::before  { content: "\1F4C5"; }
.icon-car::before       { content: "\1F697"; }
.icon-folder::before    { content: "\1F4C1"; }
.icon-file::before      { content: "\1F4C4"; }
.icon-image::before     { content: "\1F5BC"; }
.icon-video::before     { content: "\1F39E"; }
.icon-sound::before     { content: "\1F50A"; }
.icon-cpu::before       { content: "\2699"; }
.icon-database::before  { content: "\1F5C3"; }
.icon-link::before      { content: "\1F517"; }
.icon-external::before  { content: "\2197"; }
.icon-back::before      { content: "\2190"; }
.icon-forward::before   { content: "\2192"; }
.icon-menu::before      { content: "\2630"; }
.icon-filter::before    { content: "\2696"; }
.icon-star::before      { content: "\2B50"; }
.icon-heart::before     { content: "\2764"; }
.icon-like::before      { content: "\1F44D"; }
.icon-dislike::before   { content: "\1F44E"; }
.icon-loading::before   { content: "\23F3"; }
.icon-success::before   { content: "\2705"; }
.icon-error::before     { content: "\274C"; }
.icon-info::before      { content: "\2139"; }
.icon-question::before  { content: "\2753"; }
.icon-notice::before    { content: "\1F514"; }
.icon-activity::before  { content: "\26A1"; }
.icon-notification::before { content: "\1F514"; }
.icon-feedback::before  { content: "\1F4AC"; }
.icon-logout::before    { content: "\21AA"; }
.icon-login::before     { content: "\21A9"; }
.icon-register::before  { content: "\1F464"; }
.icon-mobile::before    { content: "\1F4F1"; }
.icon-email::before     { content: "\2709"; }
.icon-weibo::before     { content: "\1F4E6"; }
.icon-qq::before        { content: "\1F4AC"; }
.icon-google::before    { content: "\1F310"; }
.icon-github::before    { content: "\1F4BB"; }
.icon-apple::before     { content: "\1F34E"; }
.icon-play-fill::before { content: "\25B6"; }
.icon-pause::before     { content: "\23F8"; }
.icon-stop::before      { content: "\23F9"; }
.icon-skip-back::before { content: "\23EE"; }
.icon-skip-forward::before { content: "\23ED"; }
.icon-volume::before    { content: "\1F50A"; }
.icon-fullscreen::before { content: "\26F6"; }
.icon-mic::before       { content: "\1F3A4"; }
.icon-camera::before    { content: "\1F4F7"; }
.icon-photo::before     { content: "\1F4F8"; }
.icon-map::before       { content: "\1F5FA"; }
.icon-location::before  { content: "\1F4CD"; }
.icon-building::before  { content: "\1F3E2"; }
.icon-person::before    { content: "\1F464"; }
.icon-people::before    { content: "\1F465"; }
.icon-group::before     { content: "\1F465"; }
.icon-bank::before      { content: "\1F3E6"; }
.icon-store::before     { content: "\1F3EA"; }
.icon-cart::before      { content: "\1F6D2"; }
.icon-wallet::before    { content: "\1F4B0"; }
.icon-credit::before    { content: "\1F4B3"; }
.icon-currency::before  { content: "\1F4B1"; }
.icon-gift::before      { content: "\1F381"; }
.icon-diamond::before   { content: "\1F48E"; }
.icon-crown::before     { content: "\1F451"; }
.icon-medal::before     { content: "\1F3C5"; }
.icon-fire::before      { content: "\1F525"; }
.icon-rocket::before    { content: "\1F680"; }
.icon-bullseye::before  { content: "\1F3AF"; }
.icon-target::before    { content: "\1F3AF"; }
.icon-shield::before    { content: "\1F6E1"; }
.icon-security::before  { content: "\1F512"; }
.icon-privacy::before   { content: "\1F512"; }
.icon-dashboard::before { content: "\1F4CA"; }
.icon-layout::before    { content: "\1F5C3"; }
.icon-window::before    { content: "\1FA9F"; }
.icon-browser::before   { content: "\1F310"; }
.icon-device::before    { content: "\1F4BB"; }
.icon-server::before    { content: "\1F5A5"; }
.icon-cloud::before     { content: "\2601"; }
.icon-network::before   { content: "\1F4E1"; }
.icon-wifi::before      { content: "\1F4F6"; }
.icon-bluetooth::before { content: "\1F50C"; }
.icon-battery::before   { content: "\1F50B"; }
.icon-power::before     { content: "\26A1"; }
.icon-plug::before      { content: "\1F50C"; }
.icon-tools::before     { content: "\1F527"; }
.icon-wrench::before    { content: "\1F527"; }
.icon-paint::before     { content: "\1F3A8"; }
.icon-brush::before     { content: "\1F58C"; }
.icon-pencil::before    { content: "\270F"; }
.icon-pen::before       { content: "\1F58A"; }
.icon-highlight::before { content: "\1F58D"; }
.icon-eraser::before    { content: "\1F4DD"; }
.icon-scissors::before  { content: "\2702"; }
.icon-copy-file::before { content: "\1F4C4"; }
.icon-cut::before      { content: "\2702"; }
.icon-paste::before    { content: "\1F4CB"; }
.icon-save::before      { content: "\1F4BE"; }
.icon-undo::before     { content: "\21A9"; }
.icon-redo::before      { content: "\21AA"; }
.icon-zoom-in::before   { content: "\1F50D"; }
.icon-zoom-out::before  { content: "\1F50D"; }
.icon-maximize::before { content: "\26F6"; }
.icon-minimize::before { content: "\25A0"; }
.icon-expand::before    { content: "\26F6"; }
.icon-collapse::before  { content: "\2196"; }
.icon-arrow-up::before { content: "\2191"; }
.icon-arrow-down::before { content: "\2193"; }
.icon-arrow-left::before { content: "\2190"; }
.icon-arrow-right::before { content: "\2192"; }
.icon-chevron-up::before { content: "\2303"; }
.icon-chevron-down::before { content: "\2304"; }
.icon-chevron-left::before { content: "\2302"; }
.icon-chevron-right::before { content: "\2301"; }
.icon-double-left::before { content: "\23EE"; }
.icon-double-right::before { content: "\23ED"; }
.icon-end::before      { content: "\23ED"; }
.icon-start::before    { content: "\23EE"; }
.icon-eject::before    { content: "\23CF"; }
.icon-record::before   { content: "\23FA"; }
.icon-stop-circle::before { content: "\23F9"; }
.icon-pause-circle::before { content: "\23F8"; }
.icon-play-circle::before { content: "\25B6"; }
.icon-sliders::before  { content: "\1F39A"; }
.icon-toggles::before  { content: "\2699"; }
.icon-switch::before   { content: "\21C4"; }
.icon-toggle::before   { content: "\21C4"; }
.icon-checkbox::before  { content: "\2611"; }
.icon-radio::before    { content: "\25C9"; }
.icon-circle::before   { content: "\25CF"; }
.icon-square::before   { content: "\25A0"; }
.icon-triangle::before { content: "\25B2"; }
.icon-dew::before      { content: "\1F4A7"; }
.icon-thermometer::before { content: "\1F321"; }
.icon-umbrella::before { content: "\2602"; }
.icon-hourglass::before { content: "\23F3"; }
.icon-stopwatch::before { content: "\23F1"; }
.icon-alarm::before    { content: "\23F0"; }
.icon-watch::before    { content: "\231A"; }
.icon-calendar2::before { content: "\1F4C5"; }
.icon-mouse::before    { content: "\1F5B1"; }
.icon-keyboard::before { content: "\2328"; }
.icon-printer::before   { content: "\1F5B6"; }
.icon-scanner::before  { content: "\1F4E5"; }
.icon-folder2::before  { content: "\1F4C2"; }
.icon-archive::before  { content: "\1F5C3"; }
.icon-inbox::before    { content: "\1F4E5"; }
.icon-trash::before    { content: "\1F5D1"; }
.icon-recycle::before  { content: "\267B"; }
.icon-sort::before     { content: "\2195"; }
.icon-filter2::before  { content: "\2696"; }
.icon-grid::before     { content: "\2588"; }
.icon-grid-list::before { content: "\2630"; }
.icon-view::before     { content: "\1F441"; }
.icon-hide::before     { content: "\1F441"; }
.icon-sun::before      { content: "\2600"; }
.icon-moon::before     { content: "\1F319"; }
.icon-cloud-sun::before { content: "\2600"; }
.icon-cloud-rain::before { content: "\1F327"; }
.icon-cloudy::before   { content: "\2601"; }
.icon-wind::before     { content: "\1F343"; }
.icon-snow::before     { content: "\2744"; }
.icon-fog::before      { content: "\1F32B"; }
.icon-compass::before  { content: "\1F9ED"; }
.icon-aperture::before { content: "\1F4F7"; }
.icon-magnet::before   { content: "\1F9ED"; }
.icon-puzzle::before   { content: "\1F9E9"; }
.icon-gamepad::before  { content: "\1F3AE"; }
.icon-controller::before { content: "\1F3AE"; }
.icon-dice::before     { content: "\1F3B2"; }
.icon-flag::before     { content: "\1F6A9"; }
.icon-palette::before  { content: "\1F3A8"; }
.icon-badge::before    { content: "\1F3C5"; }
.icon-stars::before    { content: "\1F31F"; }
.icon-sparkles::before { content: "\2728"; }
.icon-magic::before    { content: "\1FA84"; }
.icon-wand::before     { content: "\1FA84"; }
.icon-album::before    { content: "\1F4BF"; }
.icon-disc::before     { content: "\1F4BF"; }
.icon-vinyl::before    { content: "\1F4BF"; }
.icon-tape::before     { content: "\1F3B5"; }
.icon-score::before    { content: "\1F3B5"; }
.icon-megaphone::before { content: "\1F4E3"; }
.icon-speaker2::before { content: "\1F50A"; }
.icon-broadcast::before { content: "\1F4E1"; }
.icon-podcast::before  { content: "\1F4E1"; }
.icon-radio::before    { content: "\1F4E1"; }
.icon-tv::before       { content: "\1F4FA"; }
.icon-display::before  { content: "\1F5A5"; }
.icon-projector::before { content: "\1F4FC"; }
.icon-memory::before   { content: "\1F9E0"; }
.icon-gpu::before      { content: "\2699"; }
.icon-harddrive::before { content: "\1F5A5"; }
.icon-ssd::before     { content: "\1F5A5"; }
.icon-usb::before      { content: "\1F50C"; }
.icon-ethernet::before { content: "\1F4E1"; }
.icon-wifi2::before    { content: "\1F4F6"; }
.icon-signal::before   { content: "\1F4E6"; }
.icon-tower::before    { content: "\1F5FC"; }
.icon-satellite::before { content: "\1F4E1"; }
.icon-ufo::before      { content: "\1F6F8"; }
.icon-infinity::before { content: "\267E"; }
.icon-terminal::before { content: "\1F4BB"; }
.icon-code::before     { content: "\1F4DC"; }
.icon-braces::before   { content: "\1F4DC"; }
.icon-brackets::before { content: "\1F4DC"; }
.icon-semicolon::before { content: "\25CF"; }
.icon-exclamation::before { content: "\26A0"; }
.icon-information::before { content: "\2139"; }
.icon-text::before     { content: "\24DD"; }
.icon-font::before     { content: "\1F524"; }
.icon-type::before    { content: "\1F524"; }
.icon-bold::before     { content: "\1F4DD"; }
.icon-italic::before   { content: "\1F4DD"; }
.icon-underline::before { content: "\1F4DD"; }
.icon-strikethrough::before { content: "\1F4DD"; }
.icon-list-ul::before  { content: "\2022"; }
.icon-list-ol::before  { content: "\2460"; }
.icon-indent::before   { content: "\2196"; }
.icon-outdent::before  { content: "\2196"; }
.icon-align-left::before { content: "\2190"; }
.icon-align-center::before { content: "\2194"; }
.icon-align-right::before { content: "\2192"; }
.icon-justify::before  { content: "\25A0"; }
.icon-text-wrap::before { content: "\21B5"; }
.icon-text-indent::before { content: "\2196"; }
.icon-mark::before     { content: "\1F4DD"; }
.icon-markdown::before { content: "\1F4DD"; }
.icon-quote::before    { content: "\275D"; }
.icon-highlighter::before { content: "\1F4DD"; }
.icon-subscript::before { content: "\208B"; }
.icon-superscript::before { content: "\00B2"; }
.icon-file-text::before { content: "\1F4C4"; }
.icon-file-pdf::before { content: "\1F4C4"; }
.icon-file-word::before { content: "\1F4C4"; }
.icon-file-excel::before { content: "\1F4C4"; }
.icon-file-ppt::before { content: "\1F4C4"; }
.icon-file-image::before { content: "\1F5BC"; }

/* ========== 浏览器回退：没有字体时使用系统图标 ========== */
@supports not (font-family: "bootstrap-icons") {
    .icon {
        font-family: sans-serif !important;
    }
}