/* =========================================================
       БАЗА САЙТА: переменные, темы, сброс стилей
       ========================================================= */
    :root{
      --brand:#16a34a;
      --brand-2:#22c55e;
      --brand-3:#15803d;
      --accent:#84cc16;
      --text:#202027;
      --muted:#65726a;
      --line:#dceee3;
      --soft:#f0fdf4;
      --card:#ffffff;
      --page:#ffffff;
      --page-2:#f6fff9;
      --topline:#ecfdf5;
      --topline-text:#166534;
      --danger:#ff3158;
      --warning:#ffb020;
      --footer:#102217;
      --footer-text:#d7eadc;
      --shadow:0 12px 35px rgba(21, 128, 61, .10);
      --shadow-strong:0 22px 45px rgba(22,163,74,.22);
      --radius:22px;
      --radius-sm:14px;
      --container:1500px;
      --heading-font:"Manrope", "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
      --category-font:"Nunito Sans", "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
    }

    html[data-theme="night"]{
      --brand:#facc15;
      --brand-2:#eab308;
      --brand-3:#ca8a04;
      --accent:#fde047;
      --text:#fff7cc;
      --muted:#cdbc6a;
      --line:#3d3512;
      --soft:#1f1a07;
      --card:#151203;
      --page:#070604;
      --page-2:#111006;
      --topline:#111006;
      --topline-text:#fef3c7;
      --footer:#050403;
      --footer-text:#f7eeb8;
      --shadow:0 12px 35px rgba(250, 204, 21, .12);
      --shadow-strong:0 22px 45px rgba(250,204,21,.18);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
    body{
      margin:0;
      min-width:320px;
      min-height:100vh;
      min-height:100dvh;
      overflow-x:hidden;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color:var(--text);
      background:linear-gradient(180deg,var(--page) 0%,var(--page-2) 50%,var(--page) 100%);
      transition:background .25s ease,color .25s ease;
    }
    img,svg,video,canvas,iframe{max-width:100%}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    a{color:inherit;text-decoration:none}
    .container{width:min(var(--container), calc(100% - 28px));margin:0 auto}
    .app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

    @media (max-width:680px){
      body{overflow-wrap:anywhere}
      input,select,textarea{font-size:16px}
      .container{width:calc(100% - 24px)}
    }

    @media (max-width:360px){
      .container{width:calc(100% - 16px)}
    }