@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,300..700&display=swap');



/* ==============================================

   D.A. Assets — Main Stylesheet

   ==============================================

   1.  Design Tokens (CSS Variables)

   2.  Reset & Base

   3.  Layout (Container, Header, Nav, Footer)

   4.  Section & Section Variants

   5.  Product Detail (Product pages)

   6.  Product Card Grid (Homepage)

   7.  Feature Grid (Product pages)

   8.  FAQ Accordion (Product pages)

   9.  Breadcrumb

   10. Buttons

   11. Changelog

   12. WeChat Modal

   13. Result Panels (Success / Error / Warning)

   14. Receipt Card

   15. Utilities

   16. Responsive (@media)

   ============================================== */



/* ========================================

   1. Design Tokens

   ======================================== */



:root {

    color-scheme: light dark;



    /* Brand colors */

    --primary-color: #004B9B;

    --link-color: #5B9BD5;

    --error-color: #dc3545;

    --reset-color: #7a2038;

    --buy-color: #27AE60;

    --warning-color: #F39C12;

    --youtube-color: #CD201F;

    --discord-color: #7289da;

    --telegram-color: #24A1DE;

    --wechat-color: #07c160;

    --github-color: #24292e;

    --accent-blue: #4A96B6;

    --accent-purple: #8B5CC8;

    --accent-pink: #FF007E;

    --accent-gradient-blue-purple-mid: #6E7DC3;

    --accent-gradient-purple-pink-mid: #C447A0;

    --on-accent-color: #ffffff;



    /* Base palette */

    --background-color: #101010;

    --surface-color: #1b1b1b;

    --text-color: #ffffff;

    --text-muted: #888888;

    --text-subtle: #cccccc;

    --border-color: #333333;

    --text-fg-rgb: 255, 255, 255;

    --surface-fg-rgb: 255, 255, 255;

    --cursor-light-rgb: 255, 255, 255;

    --reveal-outline-rgb: var(--surface-fg-rgb);



    /* Text alpha levels */

    --text-alpha-95: rgba(var(--text-fg-rgb), 0.95);

    --text-alpha-80: rgba(var(--text-fg-rgb), 0.80);

    --text-alpha-75: rgba(var(--text-fg-rgb), 0.75);

    --text-alpha-65: rgba(var(--text-fg-rgb), 0.65);

    --text-alpha-60: rgba(var(--text-fg-rgb), 0.60);

    --text-alpha-50: rgba(var(--text-fg-rgb), 0.50);

    --text-alpha-40: rgba(var(--text-fg-rgb), 0.40);



    /* Surface alpha levels */

    --surface-alpha-18: rgba(var(--surface-fg-rgb), 0.18);

    --surface-alpha-12: rgba(var(--surface-fg-rgb), 0.12);

    --surface-alpha-10: rgba(var(--surface-fg-rgb), 0.10);

    --surface-alpha-08: rgba(var(--surface-fg-rgb), 0.08);

    --surface-alpha-06: rgba(var(--surface-fg-rgb), 0.06);

    --surface-alpha-05: rgba(var(--surface-fg-rgb), 0.05);

    --surface-alpha-03: rgba(var(--surface-fg-rgb), 0.03);



    /* Panel backgrounds */

    --panel-bg: var(--surface-color);

    --overlay-bg: rgba(0, 0, 0, 0.65);

    --code-block-bg: var(--surface-alpha-12);

    --code-block-fg: #ff9d00;



    /* Semantic section borders */

    --success-border: rgba(39, 174, 96, 0.3);

    --error-border: rgba(220, 53, 69, 0.3);

    --warning-border: rgba(243, 156, 18, 0.3);



    /* Success icon gradient */

    --success-icon-gradient: linear-gradient(135deg, #10a37f, #1ec99a);

    /* Error icon gradient */

    --error-icon-gradient: linear-gradient(135deg, #dc3545, #ff6b6b);



    /* Site background */

    --auth-page-background:

        radial-gradient(ellipse 105% 82% at -18% 8%, rgba(74, 150, 182, 0.16) 0%, rgba(74, 150, 182, 0.10) 32%, rgba(74, 150, 182, 0.045) 58%, rgba(115, 115, 115, 0) 88%),

        radial-gradient(ellipse 104% 84% at 118% 2%, rgba(255, 0, 126, 0.16) 0%, rgba(238, 14, 124, 0.12) 24%, rgba(220, 29, 123, 0.075) 48%, rgba(185, 58, 120, 0.04) 68%, rgba(115, 115, 115, 0) 90%),

        var(--background-color);

    --bgfx-base: #101010;

    --bgfx-pink-color: 255, 0, 126;

    --bgfx-pink-alpha: 0.14;

    --bgfx-pink-center: 1.18, 0.02;

    --bgfx-pink-radii: 1.04, 0.84;

    --bgfx-blue-color: 74, 150, 182;

    --bgfx-blue-alpha: 0.14;

    --bgfx-blue-center: -0.18, 0.08;

    --bgfx-blue-radii: 1.05, 0.82;



    /* Shape & spacing */

    --item-rounding: 20px;

    --section-rounding: 40px;

    --button-rounding: 10px;

    --reveal-outline-thickness: 1px;

    --reveal-outline-radius-section: var(--section-rounding);

    --reveal-outline-radius-item: var(--item-rounding);

    --reveal-outline-radius-button: var(--button-rounding);

    --reveal-outline-baseline: 0.08;

    --reveal-cursor-light-intensity: 0;

    --reveal-cursor-light-alpha: calc(var(--reveal-cursor-light-intensity) * 0.075);

    --reveal-cursor-light-alpha-soft: calc(var(--reveal-cursor-light-intensity) * 0.026);

    --reveal-light-x: -999px;

    --reveal-light-y: -999px;

    --button-cursor-light-alpha: calc(var(--reveal-cursor-light-intensity) * 0.22);

    --button-cursor-light-alpha-soft: calc(var(--reveal-cursor-light-intensity) * 0.08);

    --button-light-x: -999px;

    --button-light-y: -999px;

    --reveal-light-radius: 340px;

    --button-reveal-radius: 220px;

    --loader-overlay-bg:

        linear-gradient(rgba(20, 20, 20, 0.82), rgba(20, 20, 20, 0.82)),

        rgba(20, 20, 20, 0.96);

    --space-1: 4px;

    --space-2: 8px;

    --space-3: 12px;

    --space-4: 16px;

    --space-5: 20px;

    --space-6: 24px;

    --space-8: 32px;

    --scrollbar-width: 26px;

    --scrollbar-visual-width: 6px;

    --scrollbar-inset-end: 12px;

    --scrollbar-inset-block: 12px;

    --tree-node-indent: calc(var(--space-4) + var(--space-2));

    --section-padding: var(--space-5);

    --card-padding: var(--space-5);

    --button-padding-block: var(--space-2);

    --button-padding-inline: 14px;

    --button-control-height: calc((1rem * 1.2) + (var(--button-padding-block) * 2));

    --form-control-height: 34px;

    --select-arrow: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5' stroke='%23cccccc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --font-size-xxs: 0.55rem;

    --font-size-tiny: 0.75rem;

    --font-size-ui: 0.8rem;

    --font-size-small: 0.85rem;

    --font-size-base: 1rem;

    --font-size-large: 1.2rem;

    --font-size-xlarge: 1.5rem;

    --font-size-heading: 1.75rem;

    --font-size-display: 2rem;

    --font-size-hero: 2.5rem;

    --font-size-icon: 24px;

    --font-size-close: 28px;

    --line-height-body: 1.5;

    --line-height-popup: 1.45;

    --line-height-tight: 1.25;

    --line-height-control: 1.2;

    --line-height-loose: 1.6;

    --font-weight-light: 300;

    --font-weight-regular: 400;

    --font-weight-medium: 500;

    --font-weight-button: 550;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    --rounded-title-inset: 15px;

    --section-title-inset: 10px;

    --title-optical-trim-start: -5px;



    /* Interaction */

    --brightness-hover: 1.25;

    --scale-hover: 1.025;

    --nav-scale-hover: 1.1;

    --nav-transition-time: 0.75s;

    --transition-time: 0.3s;

    --transition-function: ease;

    --animation-time-medium: 0.7s;



    /* Typography */

    --heading-text-gradient: linear-gradient(180deg, #fff 0%, #d8d8d8 100%);



    --accent-gradient: linear-gradient(135deg,

            var(--accent-blue) 0%,

            var(--accent-gradient-blue-purple-mid) 25%,

            var(--accent-purple) 50%,

            var(--accent-gradient-purple-pink-mid) 75%,

            var(--accent-pink) 100%);

    --accent-gradient-soft: linear-gradient(135deg,

            rgba(74, 150, 182, 0.95) 0%,

            rgba(110, 125, 195, 0.92) 25%,

            rgba(139, 92, 200, 0.90) 50%,

            rgba(196, 71, 160, 0.92) 75%,

            rgba(255, 0, 126, 0.90) 100%);

    --accent-gradient-horizontal: linear-gradient(90deg,

            var(--accent-blue) 0%,

            var(--accent-gradient-blue-purple-mid) 25%,

            var(--accent-purple) 50%,

            var(--accent-gradient-purple-pink-mid) 75%,

            var(--accent-pink) 100%);



    /* Slider controls */

    --slider-thumb-hover-scale: 1.08;

    --slider-disabled-opacity: 0.5;

    --slider-width: min(200px, 52%);

    --slider-height: 18px;

    --slider-track-height: 6px;

    --slider-thumb-size: 18px;

    --slider-thumb-offset: -6px;

    --compact-slider-width: min(170px, 50%);

    --slider-thumb-glow:

        0 0 0 4px rgba(var(--thumb-color-rgb, 255, 0, 126), 0.16),

        0 0 18px rgba(var(--thumb-color-rgb, 255, 0, 126), 0.32);



}



body.plugin-ui {

    color-scheme: dark;

    --item-rounding: 16px;

    --section-rounding: 24px;

    --title-optical-trim-start: -8px;

}



:root[data-theme="dark"] {

    color-scheme: dark;

}



:root[data-theme="light"] {

    color-scheme: light;

    --background-color: #ffffff;

    --surface-color: #ffffff;

    --text-color: #111111;

    --text-muted: #5b5b5b;

    --text-subtle: #3a3a3a;

    --border-color: #dcdcdc;

    --text-fg-rgb: 17, 17, 17;

    --surface-fg-rgb: 0, 0, 0;

    --cursor-light-rgb: 255, 255, 255;

    --overlay-bg: rgba(20, 20, 20, 0.45);

    --code-block-bg: rgba(0, 0, 0, 0.06);

    --code-block-fg: #b65a00;

    --auth-page-background: var(--background-color);

    --bgfx-base: #ffffff;

    --bgfx-pink-color: 255, 0, 126;

    --bgfx-pink-alpha: 0;

    --bgfx-pink-center: 1.22, -0.04;

    --bgfx-pink-radii: 0.46, 0.74;

    --bgfx-blue-color: 74, 150, 182;

    --bgfx-blue-alpha: 0;

    --bgfx-blue-center: -0.22, 0.04;

    --bgfx-blue-radii: 0.48, 0.78;

    --reveal-outline-baseline: 0.10;

    --reveal-cursor-light-alpha: 0;

    --reveal-cursor-light-alpha-soft: 0;

    --button-cursor-light-alpha: 0;

    --button-cursor-light-alpha-soft: 0;

    --loader-overlay-bg:

        linear-gradient(rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.76)),

        rgba(255, 255, 255, 0.92);

    --heading-text-gradient: linear-gradient(180deg, #1a1a1a 0%, #555 100%);

}



@media (prefers-color-scheme: light) {

    :root:not([data-theme]) {

        color-scheme: light;

        --background-color: #ffffff;

        --surface-color: #ffffff;

        --text-color: #111111;

        --text-muted: #5b5b5b;

        --text-subtle: #3a3a3a;

        --border-color: #dcdcdc;

        --text-fg-rgb: 17, 17, 17;

        --surface-fg-rgb: 0, 0, 0;

        --overlay-bg: rgba(20, 20, 20, 0.45);

        --code-block-bg: rgba(0, 0, 0, 0.06);

        --code-block-fg: #b65a00;

        --auth-page-background: var(--background-color);

        --bgfx-base: #ffffff;

        --bgfx-pink-alpha: 0;

        --bgfx-pink-center: 1.22, -0.04;

        --bgfx-pink-radii: 0.46, 0.74;

        --bgfx-blue-alpha: 0;

        --bgfx-blue-center: -0.22, 0.04;

        --bgfx-blue-radii: 0.48, 0.78;

        --reveal-outline-baseline: 0.10;

        --reveal-cursor-light-alpha: 0;

        --reveal-cursor-light-alpha-soft: 0;

        --button-cursor-light-alpha: 0;

        --button-cursor-light-alpha-soft: 0;

        --heading-text-gradient: linear-gradient(180deg, #1a1a1a 0%, #555 100%);

    }

}