/* Гранит – общая основа: цвета, шрифты, кнопки. Подключается на всех страницах. */

:root{
  --bg:#ECEEEC;
  --bg-2:#E1E5E3;
  --card:#FFFFFF;
  --card-2:#F4F6F5;
  --ink:#15181B;
  --ink-2:#4B5359;
  --ink-3:#848D93;
  --line:#D5DBD9;

  --orange:#F25C14;
  --orange-2:#C2440A;
  --orange-soft:#FFE3D3;
  --on-orange:#FFFFFF;

  --water:#0F7C77;
  --water-soft:#D2ECE9;

  --good:#1B8A55;
  --warn:#D08A0C;
  --bad:#D23F36;

  --stone:#24292E;
  --stone-2:#30363C;
  --stone-3:#3C434A;
  --on-stone:#EFF1F0;
  --on-stone-2:#A3ACB2;

  --fur:#8A5A36;

  --speck:rgba(21,24,27,.075);
  --shadow:0 1px 2px rgba(15,20,25,.05),0 12px 32px -12px rgba(15,20,25,.14);

  --f-head:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --f-text:"Golos Text","PT Sans","Segoe UI",Arial,sans-serif;

  --gutter:clamp(20px,4vw,72px);
  --max:1440px;
  --r-lg:28px;
  --r:20px;
  --r-sm:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121517; --bg-2:#171B1E; --card:#1C2024; --card-2:#22272C;
    --ink:#EDEFEE; --ink-2:#AEB6BB; --ink-3:#737C82; --line:#2D3338;
    --orange:#FF6D26; --orange-2:#B8440B; --orange-soft:#3A2012; --on-orange:#160C05;
    --water:#3DB5AD; --water-soft:#15393A;
    --good:#3FB57B; --warn:#E5A93A; --bad:#EE625A;
    --stone:#0C0E10; --stone-2:#181C20; --stone-3:#252A2F; --on-stone:#EDEFEE; --on-stone-2:#99A2A8;
    --speck:rgba(255,255,255,.045);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121517; --bg-2:#171B1E; --card:#1C2024; --card-2:#22272C;
  --ink:#EDEFEE; --ink-2:#AEB6BB; --ink-3:#737C82; --line:#2D3338;
  --orange:#FF6D26; --orange-2:#B8440B; --orange-soft:#3A2012; --on-orange:#160C05;
  --water:#3DB5AD; --water-soft:#15393A;
  --good:#3FB57B; --warn:#E5A93A; --bad:#EE625A;
  --stone:#0C0E10; --stone-2:#181C20; --stone-3:#252A2F; --on-stone:#EDEFEE; --on-stone-2:#99A2A8;
  --speck:rgba(255,255,255,.045);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 18px/1.55 var(--f-text);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

.head{font-family:var(--f-head);font-weight:400;letter-spacing:-.01em;line-height:1.02}
.granite{
  background-image:
    radial-gradient(circle at 20% 30%,var(--speck) 0 1.3px,transparent 1.8px),
    radial-gradient(circle at 70% 75%,var(--speck) 0 1px,transparent 1.5px),
    radial-gradient(circle at 45% 10%,var(--speck) 0 .9px,transparent 1.3px);
  background-size:27px 23px,39px 31px,17px 19px;
}
.granite-dark{
  background-color:var(--stone);color:var(--on-stone);
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.07) 0 1.2px,transparent 1.7px),
    radial-gradient(circle at 45% 55%,rgba(242,92,20,.22) 0 1.1px,transparent 1.5px),
    radial-gradient(circle at 80% 20%,rgba(0,0,0,.4) 0 1.6px,transparent 2.1px),
    radial-gradient(circle at 60% 85%,rgba(255,255,255,.04) 0 2px,transparent 2.6px);
  background-size:23px 19px,47px 41px,17px 23px,61px 53px;
}

.container{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}

/* кнопка-брусок: нижняя грань вместо тени */
.btn{
  --edge:var(--orange-2);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:60px;padding:0 28px;border-radius:16px;border:0;cursor:pointer;
  font:600 18px/1 var(--f-text);text-decoration:none;white-space:nowrap;
  background:var(--orange);color:var(--on-orange);
  box-shadow:0 5px 0 var(--edge);transform:translateY(0);
  transition:transform .08s ease,box-shadow .08s ease,background-color .15s;
}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)}
.btn.light{--edge:var(--line);background:var(--card);color:var(--ink)}
.btn.stone{--edge:#000;background:var(--stone-3);color:var(--on-stone)}
.btn.sm{height:46px;padding:0 18px;font-size:16px;border-radius:13px;box-shadow:0 4px 0 var(--edge)}
.btn.sm:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
.btn svg{width:22px;height:22px;flex:none}
.btn.block{width:100%;white-space:normal;height:auto;min-height:60px;padding-block:14px;text-align:center;line-height:1.2}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid var(--water);outline-offset:3px;border-radius:10px}

.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:400 26px/1 var(--f-head);letter-spacing:-.01em;color:var(--ink)}
.logo .m{width:40px;height:40px;display:block}
.logo b{font-weight:400;color:var(--orange)}

.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:var(--card);font:500 15px/1 var(--f-text);color:var(--ink)}
.chip.ghost{background:transparent;border:1.5px dashed var(--line);color:var(--ink-3)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--good);flex:none}

.good{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad)}

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