/**
 * ACG Night Glass System 1.3.3
 *
 * Canonical visual tokens. Feature plugins may define layout, but shared
 * typography, text colors, surfaces, borders, radii, shadows and states must
 * come from this file.
 */

:root {
    --acg-ng-system-ready: 1;

    /* Page palette */
    --acg-ng-page-base: #151522;
    --acg-ng-page-top: #1b192b;
    --acg-ng-page-mid: #1c1d32;
    --acg-ng-page-lower: #181a2c;
    --acg-ng-page-gradient: linear-gradient(180deg, var(--acg-ng-page-top) 0%, var(--acg-ng-page-mid) 42%, var(--acg-ng-page-lower) 72%, var(--acg-ng-page-base) 100%);

    /* Four normal text roles */
    --acg-ng-text-primary: #eceaf1;
    --acg-ng-text-primary-rgb: 236, 234, 241;
    --acg-ng-text-secondary: #aaa8b8;
    --acg-ng-text-secondary-rgb: 170, 168, 184;
    --acg-ng-text-tertiary: rgba(170, 168, 184, .72);
    --acg-ng-text-highlight: #c4bdf2;
    --acg-ng-text-highlight-rgb: 196, 189, 242;

    /* Brand and semantic colors. These are not general-purpose text colors. */
    --acg-ng-accent: #9993c8;
    --acg-ng-accent-rgb: 153, 147, 200;
    --acg-ng-warm: #d4cdb9;
    --acg-ng-warm-rgb: 212, 205, 185;
    --acg-ng-danger: #d96873;
    --acg-ng-danger-rgb: 217, 104, 115;
    --acg-ng-danger-soft: #d9a0a7;
    --acg-ng-danger-soft-rgb: 217, 160, 167;
    --acg-ng-warning: #d89a32;
    --acg-ng-warning-rgb: 216, 154, 50;
    --acg-ng-success: #58c98a;
    --acg-ng-success-rgb: 88, 201, 138;
    --acg-ng-rating: #e7c87e;
    --acg-ng-rating-rgb: 231, 200, 126;

    /* Rating Engine palette. Geometry and interaction remain owned by the
     * Rating Engine; only its palette is centralized here. */
    --acg-ng-rating-engine-text: var(--acg-ng-text-primary);
    --acg-ng-rating-engine-text-rgb: var(--acg-ng-text-primary-rgb);
    --acg-ng-rating-engine-muted: var(--acg-ng-text-secondary);
    --acg-ng-rating-engine-muted-rgb: var(--acg-ng-text-secondary-rgb);
    --acg-ng-rating-engine-community: #f4d447;
    --acg-ng-rating-engine-community-rgb: 244, 212, 71;
    --acg-ng-rating-engine-user: var(--acg-ng-accent);
    --acg-ng-rating-engine-user-rgb: var(--acg-ng-accent-rgb);
    --acg-ng-rating-engine-hover: #c0bae8;
    --acg-ng-rating-engine-hover-rgb: 192, 186, 232;
    --acg-ng-rating-engine-cancel: var(--acg-ng-danger);
    --acg-ng-rating-engine-cancel-rgb: var(--acg-ng-danger-rgb);
    --acg-ng-rating-engine-neutral: rgba(var(--acg-ng-rating-engine-text-rgb), .34);
    --acg-ng-rating-engine-line: var(--acg-ng-border-default);
    --acg-ng-rating-engine-surface: linear-gradient(135deg, rgba(42, 40, 64, .98), rgba(27, 28, 46, .99));
    --acg-ng-rating-engine-shadow: 0 18px 46px rgba(var(--acg-ng-shadow-rgb), .38);
    --acg-ng-rating-engine-track: rgba(var(--acg-ng-rating-engine-text-rgb), .09);
    --acg-ng-rating-engine-tooltip-bg: rgba(21, 21, 34, .97);
    --acg-ng-rating-engine-tooltip-shadow: 0 8px 24px rgba(var(--acg-ng-shadow-rgb), .28);
    /* Shared report-control palette. The icon remains orange/yellow in every plugin. */
    --acg-ng-report: #ffaa02;
    --acg-ng-report-rgb: 255, 170, 2;
    --acg-ng-report-hover: #ffc14d;
    --acg-ng-report-active: #e39400;
    --acg-ng-report-outline: rgba(var(--acg-ng-report-rgb), .72);
    --acg-ng-report-focus-ring: 0 0 0 3px rgba(var(--acg-ng-report-rgb), .18);

    /* Canonical toast: report-derived surface with stronger site-wide presence. */
    --acg-ng-toast-bg: rgba(25, 25, 40, .98);
    --acg-ng-toast-text: var(--acg-ng-text-primary);
    --acg-ng-toast-border: rgba(var(--acg-ng-text-highlight-rgb), .82);
    --acg-ng-toast-error-border: rgba(var(--acg-ng-danger-rgb), .84);
    --acg-ng-toast-max-width: 460px;
    --acg-ng-toast-padding: 13px 18px;
    --acg-ng-toast-radius: 8px;
    --acg-ng-toast-font-size: 18px;
    --acg-ng-toast-font-weight: 600;
    --acg-ng-toast-line-height: 1.45;
    --acg-ng-toast-shadow: 0 12px 32px rgba(var(--acg-ng-shadow-rgb), .46), 0 0 18px rgba(var(--acg-ng-accent-rgb), .10);
    --acg-ng-toast-offset: 28px;
    --acg-ng-toast-mobile-offset: 14px;
    --acg-ng-toast-shift: 12px;
    --acg-ng-toast-z-index: 1000001;
    --acg-ng-toast-transition: .2s ease;

    /* Surface RGB foundations */
    --acg-ng-surface-rgb: 31, 30, 49;
    --acg-ng-surface-2-rgb: 38, 37, 59;
    --acg-ng-surface-3-rgb: 49, 46, 71;
    --acg-ng-canvas-rgb: 7, 8, 16;
    --acg-ng-shadow-rgb: 4, 5, 12;
    --acg-ng-line-rgb: 226, 223, 242;

    /* Shared backgrounds */
    --acg-ng-bg-region: linear-gradient(135deg, rgba(42, 40, 62, .78), rgba(27, 28, 46, .70));
    --acg-ng-bg-region-soft: linear-gradient(145deg, rgba(36, 35, 54, .72), rgba(24, 25, 42, .68));
    --acg-ng-bg-feature: linear-gradient(130deg, rgba(61, 56, 91, .66), rgba(37, 44, 74, .56) 58%, rgba(66, 53, 84, .50));
    --acg-ng-bg-card: rgba(var(--acg-ng-surface-rgb), .74);
    --acg-ng-bg-card-soft: rgba(var(--acg-ng-surface-3-rgb), .48);
    --acg-ng-bg-card-strong: rgba(25, 25, 42, .92);
    --acg-ng-bg-control: rgba(39, 39, 59, .72);
    --acg-ng-bg-control-hover: rgba(65, 62, 92, .72);
    --acg-ng-bg-control-active: rgba(91, 86, 133, .58);
    --acg-ng-bg-input: linear-gradient(135deg, rgba(36, 35, 54, .86), rgba(27, 29, 48, .82));
    --acg-ng-bg-input-focus: rgba(31, 31, 49, .96);
    --acg-ng-bg-media: rgba(38, 39, 64, .72);
    --acg-ng-bg-canvas: rgba(var(--acg-ng-canvas-rgb), .92);
    --acg-ng-bg-floating: rgba(24, 24, 38, .985);
    --acg-ng-bg-overlay: rgba(7, 8, 16, .72);
    --acg-ng-bg-accent-soft: rgba(var(--acg-ng-accent-rgb), .14);
    --acg-ng-bg-accent: rgba(var(--acg-ng-accent-rgb), .28);
    --acg-ng-bg-accent-strong: rgba(var(--acg-ng-accent-rgb), .48);
    --acg-ng-bg-danger-soft: rgba(var(--acg-ng-danger-rgb), .14);
    --acg-ng-bg-danger: rgba(var(--acg-ng-danger-rgb), .28);
    --acg-ng-bg-warning-soft: rgba(var(--acg-ng-warning-rgb), .14);
    --acg-ng-bg-success-soft: rgba(var(--acg-ng-success-rgb), .14);
    --acg-ng-bg-rating-soft: rgba(var(--acg-ng-rating-rgb), .14);

    /* Shared borders */
    --acg-ng-border-subtle: rgba(var(--acg-ng-line-rgb), .08);
    --acg-ng-border-default: rgba(var(--acg-ng-line-rgb), .14);
    --acg-ng-border-strong: rgba(var(--acg-ng-line-rgb), .22);
    --acg-ng-border-accent: rgba(var(--acg-ng-accent-rgb), .52);
    --acg-ng-border-accent-strong: rgba(var(--acg-ng-accent-rgb), .72);
    --acg-ng-border-danger: rgba(var(--acg-ng-danger-rgb), .58);
    --acg-ng-border-warning: rgba(var(--acg-ng-warning-rgb), .58);
    --acg-ng-border-success: rgba(var(--acg-ng-success-rgb), .58);
    --acg-ng-border-width: 1px;
    --acg-ng-border-width-strong: 2px;
    --acg-ng-border-standard: var(--acg-ng-border-width) solid var(--acg-ng-border-default);
    --acg-ng-border-subtle-line: var(--acg-ng-border-width) solid var(--acg-ng-border-subtle);
    --acg-ng-border-strong-line: var(--acg-ng-border-width) solid var(--acg-ng-border-strong);
    --acg-ng-border-accent-line: var(--acg-ng-border-width) solid var(--acg-ng-border-accent);
    --acg-ng-border-danger-line: var(--acg-ng-border-width) solid var(--acg-ng-border-danger);
    --acg-ng-border-warning-line: var(--acg-ng-border-width) solid var(--acg-ng-border-warning);
    --acg-ng-border-success-line: var(--acg-ng-border-width) solid var(--acg-ng-border-success);
    --acg-ng-border-strong-heavy-line: var(--acg-ng-border-width-strong) solid var(--acg-ng-border-strong);
    --acg-ng-border-standard-dashed: var(--acg-ng-border-width) dashed var(--acg-ng-border-default);
    --acg-ng-border-strong-dashed: var(--acg-ng-border-width) dashed var(--acg-ng-border-strong);
    --acg-ng-border-transparent-line: var(--acg-ng-border-width) solid transparent;
    --acg-ng-border-transparent-heavy-line: var(--acg-ng-border-width-strong) solid transparent;
    --acg-ng-border-current-heavy-line: var(--acg-ng-border-width-strong) solid currentColor;
    --acg-ng-outline-focus: var(--acg-ng-border-width-strong) solid var(--acg-ng-border-accent);
    --acg-ng-outline-focus-dashed: var(--acg-ng-border-width) dashed var(--acg-ng-border-accent);
    --acg-ng-focus-offset: 3px;
    --acg-ng-decoration-thickness: var(--acg-ng-border-width);

    /* Shared shadows */
    --acg-ng-shadow-card: 0 18px 48px rgba(var(--acg-ng-shadow-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .035);
    --acg-ng-shadow-region: 0 22px 58px rgba(var(--acg-ng-shadow-rgb), .26);
    --acg-ng-shadow-hover: 0 16px 38px rgba(var(--acg-ng-shadow-rgb), .30), 0 0 0 1px rgba(var(--acg-ng-accent-rgb), .08);
    --acg-ng-shadow-floating: 0 22px 60px rgba(var(--acg-ng-shadow-rgb), .48), 0 0 0 1px var(--acg-ng-border-subtle);
    --acg-ng-shadow-media: 0 12px 34px rgba(var(--acg-ng-shadow-rgb), .24);
    --acg-ng-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .035);
    --acg-ng-shadow-focus: 0 0 0 3px rgba(var(--acg-ng-accent-rgb), .16);
    --acg-ng-shadow-danger-focus: 0 0 0 3px rgba(var(--acg-ng-danger-rgb), .14);
    --acg-ng-text-shadow: 0 1px 2px rgba(var(--acg-ng-shadow-rgb), .52);
    --acg-ng-filter-accent-glow: drop-shadow(0 0 3px rgba(var(--acg-ng-accent-rgb), .20));
    --acg-ng-filter-highlight-glow: drop-shadow(0 0 5px rgba(var(--acg-ng-text-highlight-rgb), .28));
    --acg-ng-filter-danger-glow: drop-shadow(0 0 2px rgba(var(--acg-ng-danger-rgb), .12));
    --acg-ng-rating-neutral: rgba(var(--acg-ng-text-primary-rgb), .34);
    --acg-ng-scrollbar-rgb: 210, 224, 251;
    --acg-ng-scrollbar-thumb: rgba(var(--acg-ng-scrollbar-rgb), .25);
    --acg-ng-scrollbar-thumb-active: rgb(var(--acg-ng-scrollbar-rgb));
    --acg-ng-mask-solid: #000;
    --acg-ng-mask-vertical-fade: linear-gradient(to bottom, transparent 0, var(--acg-ng-mask-solid) 12px, var(--acg-ng-mask-solid) calc(100% - 12px), transparent 100%);
    --acg-ng-backdrop-subtle: blur(8px);
    --acg-ng-backdrop-control: blur(10px);
    --acg-ng-backdrop-card: blur(12px);
    --acg-ng-backdrop: blur(14px) saturate(112%);
    --acg-ng-backdrop-floating: blur(18px) saturate(116%);
    --acg-ng-filter-disabled: grayscale(.55) saturate(.25);
    --acg-ng-filter-disabled-hover: grayscale(.25) saturate(.45);
    --acg-ng-filter-selected: brightness(1.14) saturate(1.08);

    /* Five geometry roles */
    --acg-ng-radius-region: 18px;
    --acg-ng-radius-card: 12px;
    --acg-ng-radius-control: 8px;
    --acg-ng-radius-small: 6px;
    --acg-ng-radius-pill: 999px;

    /* Four type roles */
    --acg-ng-font-family: inherit;
    --acg-ng-font-caption: 13px;
    --acg-ng-font-small: 15px;
    --acg-ng-font-body: 17px;
    --acg-ng-font-heading: clamp(22px, 2vw, 32px);
    --acg-ng-line-tight: 1.25;
    --acg-ng-line-ui: 1.4;
    --acg-ng-line-body: 1.65;

    /* Shared dimensions and motion */
    --acg-ng-control-height: 42px;
    --acg-ng-input-height: 48px;
    --acg-ng-transition-fast: 160ms ease;
    --acg-ng-transition-normal: 180ms ease;
    --acg-ng-transition-slow: 240ms ease;
    --acg-ng-motion-reduced: .01ms;

    /* Canonical tag component */
    --acg-ng-tag-height: 34px;
    --acg-ng-tag-padding: 0 11px;
    --acg-ng-tag-font-size: var(--acg-ng-font-body);
    --acg-ng-tag-gap: 7px;
    --acg-ng-tag-bg: var(--acg-ng-bg-accent-soft);
    --acg-ng-tag-bg-hover: var(--acg-ng-bg-accent);
    --acg-ng-tag-border: var(--acg-ng-border-default);
    --acg-ng-tag-border-hover: var(--acg-ng-border-accent);
    --acg-ng-tag-exclude-color: var(--acg-ng-danger-soft);
    --acg-ng-tag-exclude-bg: var(--acg-ng-bg-danger-soft);
    --acg-ng-tag-exclude-bg-hover: var(--acg-ng-bg-danger);
    --acg-ng-tag-exclude-border: var(--acg-ng-border-danger);

    /* Decorative background tokens. These reproduce ACG Site Background 2.1.0 exactly. */
    --acg-ng-ambient-light-a-default-rgb: 126, 108, 180;
    --acg-ng-ambient-light-b-default-rgb: 58, 91, 157;
    --acg-ng-ambient-light-c-default-rgb: 94, 68, 132;
    --acg-ng-glow-a-rgb: var(--acg-ng-ambient-light-a-default-rgb);
    --acg-ng-glow-b-rgb: var(--acg-ng-ambient-light-b-default-rgb);
    --acg-ng-glow-c-rgb: var(--acg-ng-ambient-light-c-default-rgb);
    --acg-ng-glow-a: rgba(var(--acg-ng-glow-a-rgb), .24);
    --acg-ng-glow-b: rgba(var(--acg-ng-glow-b-rgb), .20);
    --acg-ng-glow-c: rgba(var(--acg-ng-glow-c-rgb), .16);

    /* Exact seven-layer desktop composition from Site Background 2.1.0. */
    --acg-ng-ambient-image-desktop:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 88vmax 34vmax at var(--acg-light-a-x) var(--acg-light-a-y), rgba(var(--acg-light-a-color), .28) 0%, rgba(var(--acg-light-a-color), .145) 34%, rgba(var(--acg-light-a-color), 0) 72%),
        radial-gradient(ellipse 72vmax 28vmax at var(--acg-light-b-x) var(--acg-light-b-y), rgba(var(--acg-light-b-color), .24) 0%, rgba(var(--acg-light-b-color), .115) 36%, rgba(var(--acg-light-b-color), 0) 74%),
        radial-gradient(ellipse 92vmax 38vmax at var(--acg-light-c-x) var(--acg-light-c-y), rgba(var(--acg-light-c-color), .19) 0%, rgba(var(--acg-light-c-color), .078) 40%, rgba(var(--acg-light-c-color), 0) 73%),
        linear-gradient(var(--acg-aurora-angle), transparent 0%, transparent 27%, rgba(153, 147, 200, .095) 36%, rgba(83, 110, 180, .068) 44%, rgba(126, 91, 166, .052) 51%, transparent 61%, transparent 100%),
        linear-gradient(calc(var(--acg-aurora-angle) - 7deg), transparent 0%, transparent 39%, rgba(212, 205, 185, .026) 43%, rgba(153, 147, 200, .055) 47%, rgba(72, 101, 174, .038) 51%, transparent 56%, transparent 100%),
        linear-gradient(180deg, #1b192b 0%, #1c1d32 42%, #181a2c 72%, #151522 100%);

    /* Exact four-layer mobile composition from Site Background 2.1.0. */
    --acg-ng-ambient-image-mobile:
        radial-gradient(ellipse 92vmax 34vmax at var(--acg-light-a-x) var(--acg-light-a-y), rgba(var(--acg-light-a-color), .22) 0%, rgba(var(--acg-light-a-color), .09) 38%, rgba(var(--acg-light-a-color), 0) 73%),
        radial-gradient(ellipse 80vmax 31vmax at var(--acg-light-b-x) var(--acg-light-b-y), rgba(var(--acg-light-b-color), .18) 0%, rgba(var(--acg-light-b-color), .07) 40%, rgba(var(--acg-light-b-color), 0) 74%),
        linear-gradient(var(--acg-aurora-angle), transparent 0%, transparent 31%, rgba(153, 147, 200, .07) 40%, rgba(72, 101, 174, .048) 48%, transparent 59%, transparent 100%),
        linear-gradient(180deg, #1b192b 0%, #1c1d32 42%, #181a2c 72%, #151522 100%);
    --acg-ng-achievement-spectrum: linear-gradient(95deg, #e2d8ff 0%, #c8eef0 27%, #efcada 53%, #f0dba8 76%, #d8d0ff 100%);

    /* Achievement tiers */
    --acg-ng-tier-1: #e2a47e;
    --acg-ng-tier-1-rgb: 226, 164, 126;
    --acg-ng-tier-2: #dedce8;
    --acg-ng-tier-2-rgb: 222, 220, 232;
    --acg-ng-tier-3: #e7c87e;
    --acg-ng-tier-3-rgb: 231, 200, 126;
    --acg-ng-tier-4: #c2bcff;
    --acg-ng-tier-4-rgb: 194, 188, 255;
    --acg-ng-tier-5: #f0edf6;
    --acg-ng-tier-1-border: rgba(226, 164, 126, .76);
    --acg-ng-tier-1-bg: linear-gradient(135deg, rgba(111, 64, 43, .25), rgba(48, 37, 48, .76));
    --acg-ng-tier-2-border: rgba(222, 220, 232, .72);
    --acg-ng-tier-2-bg: linear-gradient(135deg, rgba(134, 132, 151, .20), rgba(42, 40, 57, .78));
    --acg-ng-tier-3-border: rgba(231, 200, 126, .78);
    --acg-ng-tier-3-bg: linear-gradient(135deg, rgba(139, 101, 41, .24), rgba(49, 40, 42, .78));
    --acg-ng-tier-4-border: rgba(194, 188, 255, .82);
    --acg-ng-tier-4-bg: linear-gradient(135deg, rgba(92, 80, 165, .27), rgba(39, 38, 65, .80));
    --acg-ng-tier-5-border: transparent;
    --acg-ng-tier-5-bg: linear-gradient(rgba(31, 30, 50, .95), rgba(31, 30, 50, .95)) padding-box, linear-gradient(105deg, rgba(166, 146, 213, .90), rgba(106, 166, 172, .82), rgba(196, 125, 154, .78), rgba(198, 166, 105, .74), rgba(151, 132, 207, .88)) border-box;

    /* Compatibility aliases. They resolve to canonical roles and contain no
     * independent values. */
    --acg-ng-text: var(--acg-ng-text-primary);
    --acg-ng-text-rgb: var(--acg-ng-text-primary-rgb);
    --acg-ng-muted: var(--acg-ng-text-secondary);
    --acg-ng-muted-rgb: var(--acg-ng-text-secondary-rgb);
    --acg-ng-accent-bright: var(--acg-ng-text-highlight);
    --acg-ng-accent-bright-rgb: var(--acg-ng-text-highlight-rgb);
    --acg-ng-line: var(--acg-ng-border-default);
    --acg-ng-line-soft: var(--acg-ng-border-subtle);
    --acg-ng-line-strong: var(--acg-ng-border-strong);
    --acg-ng-surface: var(--acg-ng-bg-card);
    --acg-ng-surface-strong: var(--acg-ng-bg-card-strong);
    --acg-ng-surface-soft: var(--acg-ng-bg-card-soft);
    --acg-ng-surface-gradient: var(--acg-ng-bg-region);
    --acg-ng-surface-gradient-soft: var(--acg-ng-bg-region-soft);
    --acg-ng-surface-gradient-feature: var(--acg-ng-bg-feature);
    --acg-ng-media-bg: var(--acg-ng-bg-media);
    --acg-ng-canvas: var(--acg-ng-bg-canvas);
    --acg-ng-control-bg: var(--acg-ng-bg-control);
    --acg-ng-control-bg-hover: var(--acg-ng-bg-control-hover);
    --acg-ng-control-bg-active: var(--acg-ng-bg-control-active);
    --acg-ng-input-bg: var(--acg-ng-bg-input);
    --acg-ng-input-bg-focus: var(--acg-ng-bg-input-focus);
    --acg-ng-focus-ring: var(--acg-ng-shadow-focus);
    --acg-ng-shadow-float: var(--acg-ng-shadow-floating);
    --acg-ng-font-ui: var(--acg-ng-font-body);

    --acg-bg: var(--acg-ng-page-base);
    --acg-bg-top: var(--acg-ng-page-top);
    --acg-bg-mid: var(--acg-ng-page-mid);
    --acg-bg-lower: var(--acg-ng-page-lower);
    --acg-text: var(--acg-ng-text-primary);
    --acg-text-muted: var(--acg-ng-text-secondary);
    --acg-muted: var(--acg-ng-text-secondary);
    --acg-accent: var(--acg-ng-accent);
    --acg-accent-warm: var(--acg-ng-warm);
    --acg-warm: var(--acg-ng-warm);
    --acg-line: var(--acg-ng-border-default);
    --acg-surface: var(--acg-ng-bg-feature);
    --acg-surface-feature: var(--acg-ng-bg-feature);
    --acg-media-bg: var(--acg-ng-bg-media);
    --acg-radius-region: var(--acg-ng-radius-region);
    --acg-radius-card: var(--acg-ng-radius-card);
    --acg-radius-small: var(--acg-ng-radius-control);
    --acg-transition-fast: var(--acg-ng-transition-fast);
    --acg-transition-normal: var(--acg-ng-transition-normal);
    --acg-night-page-base: var(--acg-ng-page-base);
    --acg-night-text: var(--acg-ng-text-primary);
    --acg-night-muted: var(--acg-ng-text-secondary);
    --acg-night-accent: var(--acg-ng-accent);
    --acg-night-warm: var(--acg-ng-warm);
    --acg-night-line: var(--acg-ng-border-default);
}

.acg-ui-region,
.acg-ui-card,
.acg-ui-control,
.acg-ui-button,
.acg-ui-input,
.acg-ui-tag,
.acg-ui-notice,
.acg-ui-empty {
    box-sizing: border-box;
    font-family: var(--acg-ng-font-family);
}

.acg-ui-region {
    border: var(--acg-ng-border-standard);
    border-radius: var(--acg-ng-radius-region);
    background: var(--acg-ng-bg-region);
    box-shadow: var(--acg-ng-shadow-region);
    color: var(--acg-ng-text-primary);
    -webkit-backdrop-filter: var(--acg-ng-backdrop);
    backdrop-filter: var(--acg-ng-backdrop);
}

.acg-ui-card {
    border: var(--acg-ng-border-standard);
    border-radius: var(--acg-ng-radius-card);
    background: var(--acg-ng-bg-card);
    box-shadow: var(--acg-ng-shadow-card);
    color: var(--acg-ng-text-primary);
}

.acg-ui-control,
.acg-ui-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--acg-ng-control-height);
    border: var(--acg-ng-border-standard);
    border-radius: var(--acg-ng-radius-control);
    background: var(--acg-ng-bg-control);
    color: var(--acg-ng-text-secondary);
    font: inherit;
    font-size: var(--acg-ng-font-body);
    text-decoration: none;
    transition: color var(--acg-ng-transition-normal), border-color var(--acg-ng-transition-normal), background var(--acg-ng-transition-normal), transform var(--acg-ng-transition-normal);
}

.acg-ui-control:hover,
.acg-ui-control:focus-visible,
.acg-ui-button:hover,
.acg-ui-button:focus-visible {
    border-color: var(--acg-ng-border-accent);
    background: var(--acg-ng-bg-control-hover);
    color: var(--acg-ng-text-primary);
    outline: none;
}

.acg-ui-control:focus-visible,
.acg-ui-button:focus-visible,
.acg-ui-input:focus-visible,
.acg-ui-tag:focus-visible {
    box-shadow: var(--acg-ng-shadow-focus);
}

.acg-ui-control:active,
.acg-ui-button:active {
    transform: translateY(1px);
    background: var(--acg-ng-bg-control-active);
}

.acg-ui-input {
    width: 100%;
    min-height: var(--acg-ng-input-height);
    border: var(--acg-ng-border-standard);
    border-radius: var(--acg-ng-radius-control);
    background: var(--acg-ng-bg-input);
    color: var(--acg-ng-text-primary);
    font: inherit;
    font-size: var(--acg-ng-font-body);
    transition: border-color var(--acg-ng-transition-fast), background var(--acg-ng-transition-fast), box-shadow var(--acg-ng-transition-fast);
}

.acg-ui-input::placeholder {
    color: var(--acg-ng-text-tertiary);
    opacity: 1;
}

.acg-ui-input:focus {
    border-color: var(--acg-ng-border-accent-strong);
    background: var(--acg-ng-bg-input-focus);
    box-shadow: var(--acg-ng-shadow-focus);
    outline: none;
}

.acg-ui-tag {
    display: inline-flex;
    align-items: center;
    min-height: var(--acg-ng-tag-height);
    padding: var(--acg-ng-tag-padding);
    border: var(--acg-ng-border-standard);
    border-radius: var(--acg-ng-radius-control);
    background: var(--acg-ng-tag-bg);
    color: var(--acg-ng-text-primary);
    font-size: var(--acg-ng-font-small);
    line-height: var(--acg-ng-line-tight);
    text-decoration: none;
    transition: color var(--acg-ng-transition-fast), border-color var(--acg-ng-transition-fast), background var(--acg-ng-transition-fast);
}

.acg-ui-tag:hover,
.acg-ui-tag:focus-visible {
    border-color: var(--acg-ng-tag-border-hover);
    background: var(--acg-ng-tag-bg-hover);
    color: var(--acg-ng-text-primary);
    outline: none;
}

.acg-ui-notice,
.acg-ui-empty {
    border: var(--acg-ng-border-standard);
    border-radius: var(--acg-ng-radius-card);
    background: var(--acg-ng-bg-card-soft);
    color: var(--acg-ng-text-secondary);
    font-size: var(--acg-ng-font-body);
}

/* -------------------------------------------------------------------------
 * Canonical question-mark help control
 *
 * Shared by account panels, search preferences, and any future compact help
 * affordance. Feature plugins provide only the tooltip text and placement.
 * ------------------------------------------------------------------------- */
.acg-ng-help {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    vertical-align: middle;
}

html body button.acg-ng-help__button,
html body button.acg-ng-help__button:hover,
html body button.acg-ng-help__button:focus,
html body button.acg-ng-help__button:focus-visible,
html body button.acg-ng-help__button:active {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: var(--acg-ng-border-strong-line) !important;
    border-radius: var(--acg-ng-radius-pill) !important;
    background: var(--acg-ng-bg-control) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--acg-ng-text-secondary) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--acg-ng-font-family) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
    cursor: help !important;
}

html body button.acg-ng-help__button:hover,
html body button.acg-ng-help__button:focus-visible {
    border-color: var(--acg-ng-border-accent) !important;
    background: var(--acg-ng-bg-control-hover) !important;
    color: var(--acg-ng-text-primary) !important;
    outline: none !important;
}

html body button.acg-ng-help__button:focus-visible {
    box-shadow: var(--acg-ng-shadow-focus) !important;
}

.acg-ng-help__tooltip {
    box-sizing: border-box;
    position: absolute;
    z-index: 10020;
    left: 50%;
    width: max-content;
    max-width: min(270px, calc(100vw - 32px));
    margin: 0;
    padding: 9px 11px;
    border: var(--acg-ng-border-strong-line);
    border-radius: var(--acg-ng-radius-control);
    background: var(--acg-ng-bg-floating);
    box-shadow: var(--acg-ng-shadow-floating);
    color: var(--acg-ng-text-primary);
    -webkit-text-fill-color: currentColor;
    font-family: var(--acg-ng-font-family);
    font-size: var(--acg-ng-font-caption);
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    white-space: normal;
    overflow-wrap: anywhere;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--acg-ng-transition-fast),
        transform var(--acg-ng-transition-fast),
        visibility var(--acg-ng-transition-fast);
}

.acg-ng-help--above .acg-ng-help__tooltip {
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
}

.acg-ng-help--below .acg-ng-help__tooltip {
    top: calc(100% + 8px);
    transform: translate(-50%, -4px);
}

.acg-ng-help:hover .acg-ng-help__tooltip,
.acg-ng-help:focus-within .acg-ng-help__tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.acg-ng-help--above:hover .acg-ng-help__tooltip,
.acg-ng-help--above:focus-within .acg-ng-help__tooltip,
.acg-ng-help--below:hover .acg-ng-help__tooltip,
.acg-ng-help--below:focus-within .acg-ng-help__tooltip {
    transform: translate(-50%, 0);
}

.acg-ng-help__list,
.acg-ng-help__item {
    display: block;
    margin: 0;
    padding: 0;
}

.acg-ng-help__list {
    display: grid;
    gap: 4px;
}

.acg-ng-help__item {
    position: relative;
    padding-left: 12px;
}

.acg-ng-help__item::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--acg-ng-text-highlight);
}

@media (max-width: 520px) {
    .acg-ng-help__tooltip,
    .acg-ng-help--above .acg-ng-help__tooltip,
    .acg-ng-help--below .acg-ng-help__tooltip {
        position: fixed;
        z-index: 1000002;
        top: auto;
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        left: max(14px, env(safe-area-inset-left));
        width: auto;
        max-width: none;
        transform: translateY(6px);
    }

    .acg-ng-help:hover .acg-ng-help__tooltip,
    .acg-ng-help:focus-within .acg-ng-help__tooltip,
    .acg-ng-help--above:hover .acg-ng-help__tooltip,
    .acg-ng-help--above:focus-within .acg-ng-help__tooltip,
    .acg-ng-help--below:hover .acg-ng-help__tooltip,
    .acg-ng-help--below:focus-within .acg-ng-help__tooltip {
        transform: none;
    }
}

/* -------------------------------------------------------------------------
 * Canonical frontend toast
 *
 * Based on the Better Messages report toast, with stronger typography and a
 * clearly visible border so site-wide notices remain legible and significant.
 * All toasts use the project-wide bottom-right placement.
 * ------------------------------------------------------------------------- */
.acg-ng-toast {
    box-sizing: border-box;
    position: fixed;
    right: max(var(--acg-ng-toast-offset), env(safe-area-inset-right));
    bottom: max(var(--acg-ng-toast-offset), env(safe-area-inset-bottom));
    z-index: var(--acg-ng-toast-z-index);
    width: max-content;
    max-width: min(
        var(--acg-ng-toast-max-width),
        calc(100vw - (var(--acg-ng-toast-offset) * 2))
    );
    margin: 0;
    transform: translateY(var(--acg-ng-toast-shift));
    opacity: 0;
    border: var(--acg-ng-border-width-strong) solid var(--acg-ng-toast-border);
    border-radius: var(--acg-ng-toast-radius);
    padding: var(--acg-ng-toast-padding);
    background: var(--acg-ng-toast-bg);
    box-shadow: var(--acg-ng-toast-shadow);
    color: var(--acg-ng-toast-text);
    -webkit-text-fill-color: currentColor;
    font-family: inherit;
    font-size: var(--acg-ng-toast-font-size);
    font-weight: var(--acg-ng-toast-font-weight);
    line-height: var(--acg-ng-toast-line-height);
    letter-spacing: inherit;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    white-space: normal;
    overflow-wrap: anywhere;
    transition:
        opacity var(--acg-ng-toast-transition),
        transform var(--acg-ng-toast-transition);
    pointer-events: none;
}

.acg-ng-toast.is-error {
    border-color: var(--acg-ng-toast-error-border);
}

.acg-ng-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Old theme containers are obsolete. Compatibility function names are supplied
 * by the central runtime and no longer use these elements. */
html body #toast-center.toast-center,
html body #toast-corner.toast-corner {
    display: none !important;
}

@media (max-width: 520px) {
    .acg-ng-toast {
        right: max(var(--acg-ng-toast-mobile-offset), env(safe-area-inset-right));
        bottom: max(var(--acg-ng-toast-mobile-offset), env(safe-area-inset-bottom));
        max-width: calc(100vw - (var(--acg-ng-toast-mobile-offset) * 2));
        padding: 12px 16px;
        font-size: var(--acg-ng-font-body);
    }
}

@media (prefers-reduced-motion: reduce) {
    .acg-ng-toast {
        transform: none;
        transition-duration: .001ms;
    }
}