: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");
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: -webkit-fill-available;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg);
    background-image:
        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.045'/%3E%3C/svg%3E"),
        radial-gradient(circle, #9B59D033 1px, transparent 1px);
    background-size: 400px 400px, 22px 22px;
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-height);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font: inherit;
}

a {
    color: var(--purple-light);
}

:focus-visible {
    outline: 2px solid var(--purple-light);
    outline-offset: 2px;
}