/* ═══════════════════════════════════════════════════════════════════════
   brand-page.css — mavjud MBeauty sahifalari uchun yengil qatlam.
   Faqat TOKENLAR + animatsiyalar + bir nechta yordamchi sinf beradi.
   Ataylab `table`, `.header`, `h1`, `input` kabi umumiy qoidalar YO'Q —
   ular sahifalarning o'z uslubiga aralashib, tartibini buzardi.
   Sahifaning <style> bloki BUNDAN KEYIN ulanadi, ya'ni sahifa har doim ustun.
   Ranglar: scripts/brand_colors.py --color "#d0197c"
   ═══════════════════════════════════════════════════════════════════════ */
/* Brend: #d0197c · OKLCH L=0.57 C=0.221 h=355 · oq bilan kontrast 5.11 */
  :root{
    --brand:#d0197c;
    --brand-2:#aa1064;
    --brand-3:#e94f96;
    --on-brand:#ffffff;
    --bg:#fef4f7;
    --surface:#ffffff;
    --surface-2:#fff9fb;
    --sunken:#fbebf1;
    --line:#f4e5ea;
    --line-2:#e9d0d8;
    --ink:#211017;
    --ink-2:#6b535c;
    --ink-3:#9c858d;
    --accent:#d0197c;
    --accent-2:#ad1667;
    --ok:#15803d;
    --warn:#b45309;
    --info:#1d4ed8;
    --pink:#be185d;
    --bad:#dc2626;
    --s-brand:#d0197c;
    --s-warn:#eda100;
    --s-ok:#008300;
    --s-info:#2a78d6;
    --s-pink:#e87ba4;
    --s-bad:#e34948;
    --s-muted:#dfcbd2;
    --s-prev:#c8b0b8;
    --grid:#f6ebef;
    --axis:#e0cfd5;
    --shadow:0 1px 2px rgba(81,17,48,0.05),0 10px 30px -14px rgba(81,17,48,0.2);
    --shadow-lg:0 2px 6px rgba(81,17,48,0.06),0 26px 50px -20px rgba(81,17,48,0.35);
    --side-bg:linear-gradient(165deg,#e94f96 0%,#d0197c 45%,#aa1064 100%);
    --footer-bg:#1f1015;        /* pastki qora chiziq - brend tusida */
    --header-bg:linear-gradient(135deg,#e94f96 0%,#d0197c 58%,#aa1064 140%);  /* yon menyu bilan bir butun */
    /* Tugma foni: --ok/--bad kabi tokenlar matn uchun yorug', tugmada oq yozuv o'qilmaydi */
    --ok-btn:#15803d; --bad-btn:#dc2626; --warn-btn:#b45309; --info-btn:#1d4ed8;
  }
  [data-theme=dark]{
    --bg:#13090d;
    --surface:#1c1014;
    --surface-2:#211419;
    --sunken:#2a1a20;
    --line:#301e25;
    --line-2:#432a34;
    --ink:#f9eff2;
    --ink-2:#cbb3bb;
    --ink-3:#907981;
    --accent:#f24398;
    --accent-2:#fd6ead;
    --ok:#4ade80;
    --warn:#fbbf24;
    --info:#7aa2ff;
    --pink:#f472b6;
    --bad:#f87171;
    --s-brand:#f24398;
    --s-warn:#c98500;
    --s-ok:#008300;
    --s-info:#3987e5;
    --s-pink:#d55181;
    --s-bad:#e66767;
    --s-muted:#422f36;
    --s-prev:#634f56;
    --grid:#25191d;
    --axis:#3a282e;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 32px -18px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 28px 56px -22px rgba(0,0,0,.8);
    --side-bg:linear-gradient(165deg,#980a59 0%,#730942 50%,#490228 100%);
    --footer-bg:#241519;        /* tunda sahifadan bir oz ochiqroq */
    --header-bg:linear-gradient(135deg,#a8135f 0%,#8a0f4e 58%,#5c0733 140%);
    --ok-btn:#177c45; --bad-btn:#b3241f; --warn-btn:#9a4c08; --info-btn:#2447b0;
  }

  /* Brauzerning o'z elementlari (sana tanlash, scrollbar) ham rejimga moslashsin */
  :root{color-scheme:light}
  :root[data-theme=dark]{color-scheme:dark}

  /* ── O'zgarmas tokenlar ── */
  :root{
    --font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-display:var(--font);
    --radius:18px;
    --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  }

  /* ── 3D emoji va chiziqli ikonka ── */
  .em{width:1.3em;height:1.3em;display:inline-block;vertical-align:-.28em;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
  .em-lg{width:1.6em;height:1.6em}
  .ic{width:17px;height:17px;flex:none;display:inline-block;vertical-align:-3px}

  /* ── Xabarlar ── */
  .msg{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;padding:10px 13px;border-radius:12px;animation:msgIn .45s var(--spring) backwards}
  .msg .em{width:22px;height:22px;flex:none}
  .msg.ok{background:color-mix(in srgb,var(--ok) 13%,var(--surface));color:var(--ok)}
  .msg.err{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad)}

  /* ── Kutish aylanasi va bosish to'lqini ── */
  .spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:none;display:inline-block}
  .ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.2;transform:scale(0);animation:ripple .6s var(--ease) forwards;pointer-events:none}

  /* ── Kichik harakatlar ── */
  .wave{width:1.4em;height:1.4em;transform-origin:70% 80%;animation:wave 2.4s ease-in-out 1s infinite}
  .shake{animation:shake .45s ease!important}

  /* ── Sahifa bloklari ketma-ket paydo bo'ladi ──
     Ota elementga .intro qo'ying — bolalari birin-ketin ko'tariladi. */
  .intro>*{animation:fadeUp .5s var(--ease) backwards}
  .intro>*:nth-child(1){animation-delay:.02s}
  .intro>*:nth-child(2){animation-delay:.07s}
  .intro>*:nth-child(3){animation-delay:.12s}
  .intro>*:nth-child(4){animation-delay:.17s}
  .intro>*:nth-child(5){animation-delay:.22s}
  .intro>*:nth-child(6){animation-delay:.27s}
  .intro>*:nth-child(7){animation-delay:.32s}
  .intro>*:nth-child(8){animation-delay:.37s}

  /* ── Kun/tun tugmasi (sarlavha ichida) ── */
  .theme-btn{width:34px;height:34px;flex:none;display:inline-grid;place-items:center;cursor:pointer;
    border:1.5px solid rgba(255,255,255,.45);border-radius:11px;background:rgba(255,255,255,.14);color:#fff;
    transition:background .18s,border-color .18s,transform .18s var(--spring)}
  .theme-btn:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.8);transform:rotate(-12deg)}
  .theme-btn svg{width:17px;height:17px}
  /* Kunduzi oy ko'rinadi (bosilsa tunga o'tadi), tunda quyosh */
  [data-theme=dark] .theme-btn .i-moon,
  :root:not([data-theme=dark]) .theme-btn .i-sun{display:none}

  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes growY{from{transform:scaleY(0)}}
  @keyframes growX{from{transform:scaleX(0)}}
  @keyframes arc{from{stroke-dasharray:0 var(--c)}}

  /* Animatsiyalar */
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}
  @keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}}
  @keyframes fadeIn{from{opacity:0}}
  @keyframes fadeOut{to{opacity:0}}
  @keyframes popIn{from{opacity:0;transform:translateY(22px) scale(.93)}}
  @keyframes popOut{to{opacity:0;transform:translateY(12px) scale(.96)}}
  @keyframes pop{0%{opacity:0;transform:scale(.4) rotate(-14deg)}60%{opacity:1;transform:scale(1.14) rotate(4deg)}100%{transform:none}}
  @keyframes slideIn{from{opacity:0;transform:translateX(-18px)}}
  @keyframes rowIn{from{opacity:0;transform:translateX(-10px)}}
  @keyframes msgIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes hop{from{transform:translateY(0) rotate(-10deg)}to{transform:translateY(-14px) rotate(10deg)}}
  @keyframes drift{from{transform:translate(0,0) rotate(-7deg)}to{transform:translate(var(--dx,14px),var(--dy,-26px)) rotate(9deg)}}
  @keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22px,-18px) scale(1.08)}}
  @keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(18deg)}20%,40%{transform:rotate(-10deg)}}
  @keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes spinIn{from{opacity:0;transform:rotate(-120deg) scale(.4)}}
  @keyframes ripple{to{transform:scale(2.6);opacity:0}}
  @keyframes shimmer{to{background-position:-200% 0}}
  @keyframes grow{from{width:0}}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  }