/* ── Telegram theme bridge ── */
:root {
    --bg:    var(--tg-theme-bg-color,           #ffffff);
    --text:  var(--tg-theme-text-color,         #1a1a1a);
    --hint:  var(--tg-theme-hint-color,         #8e8e93);
    --link:  var(--tg-theme-link-color,         #2481cc);
    --btn:   var(--tg-theme-button-color,       #2481cc);
    --btntx: var(--tg-theme-button-text-color,  #ffffff);
    --sec:   var(--tg-theme-secondary-bg-color, #f2f2f7);

    /* ── Fonts ── */
    --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    --font-ui:   'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Light theme palette ── */
    --surface:      #ffffff;
    --white:        #ffffff;
    --brd:          rgba(0,0,0,.08);
    --brd-strong:   #c7c7c7;
    --brd-light:    #e5e7eb;
    --brd-faint:    #f3f4f6;
    --red:          #ff3b30;
    --red-txt:      #ffffff;
    --success:      #34c759;
    --search-bg:    #f9fafb;
    --icon-bg:      #ebf2f9;
    --qty-bg:       #f3f4f6;
    --placeholder:  #c3c3c3;
    --overlay:      rgba(0,0,0,.45);
    --press-dark:   rgba(0,0,0,.1);
    --press-faint:  rgba(0,0,0,.06);

    /* ── Radii ── */
    --r:        14px;
    --r2:       10px;
    --r-sm:     8px;
    --r-icon:   12px;
    --r-search: 16px;
    --r-card:   20px;

    /* ── Shadow ── */
    --sh: 0 2px 10px rgba(0,0,0,.07);
}

/* ── Dark theme palette ── */
[data-theme="dark"] {
    --surface:     var(--bg);
    --brd:         rgba(255,255,255,.08);
    --brd-strong:  rgba(255,255,255,.16);
    --brd-light:   rgba(255,255,255,.1);
    --brd-faint:   rgba(255,255,255,.06);
    --success:     #30d158;
    --search-bg:   var(--sec);
    --icon-bg:     rgba(48,209,88,.12);
    --qty-bg:      var(--sec);
    --placeholder: #636366;
    --press-dark:  rgba(255,255,255,.1);
    --press-faint: rgba(255,255,255,.06);
    --sh:          0 2px 12px rgba(0,0,0,.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    overflow-x: hidden;
}