:root {
    --purple:       #7B2FBE;
    --purple-dark:  #4A1772;
    --purple-deep:  #2D0A4E;
    --purple-light: #A855F7;
    --purple-soft:  #C084FC;
    --purple-pale:  #EFE6FF;
    --purple-mid:   #E5DAFF;
    --bg:           #EAE3F5;
    --surface:      #F4EFF9;
    --text:         #1E0A3C;
    --text-muted:   #6B5080;

    --header-height: 56px;
    --ticker-height: 34px;
    --sidebar-width: 260px;
    --content-max:   720px;
    --radius-sm:     0;
    --shadow-pixel:  4px 4px 0 var(--purple-dark);
    --shadow-sm:     3px 3px 0 var(--purple-dark);
    --transition:    0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* Mobile / in-app browser (Telegram, TikTok) — updated by js/viewport-inline.js */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --app-height: 100vh;
    --chrome-offset: calc(var(--header-height) + var(--ticker-height) + var(--safe-top));

    --panel-bg: var(--purple-deep);
    --panel-dot: radial-gradient(circle, rgba(168, 85, 247, 0.22) 1px, transparent 1px);
    --panel-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}