:root{
    --body-bg-color: #fff;
    
    --headline-text-color: hsl(0 0% 10%);
    
    --card-bg: hsl(0 0% 95%);
    --card-border: hsl(222 14% 22%);
    --card-border-radius: 13px;
    --card-shadow: 0 12px 32px hsl(222 80% 2% / .55), 0 2px 6px hsl(222 80% 2% / .35);
    --card-text-color: #212121;
    --card-muted-text-color: hsl(0 0% 30%);
    
    --card-input-text-color: hsl(0 0% 10%);
    
    --input-bg: hsl(0 0% 85%);
    --placeholder-color: hsl(0 0% 60%);
    
    --card-section-bg: hsl(0 0% 85%);
    
    --brightness-up-low: brightness(1.05);
    --brightness-up-hight: brightness(1.2);
    
    --btn-accent-bg: hsl(222 90% 64%);
    --btn-accent-color: #fff;
    --btn-accent-font-weight: 700;
    --btn-accent-font-size: 14px;
    
    --color-reverse: invert(0);
    
    --gradient--preloader: linear-gradient(270deg, #EBEBEB, #EBEBEB, #F5F5F5, #E3E3E3, #DCDCDC);
    
    --error-text-color: #D54C4C;
    
    --switch-section-primary-btn-bg: hsl(0 0% 10%);
    --switch-section-primary-btn-color: hsl(0 0% 100%);
    --switch-section-muted-btn-bg: hsl(0 0% 85%);
    --switch-section-muted-btn-color: hsl(0 0% 10%);
}

@media (prefers-color-scheme: dark){
  :root{
    --body-bg-color: hsl(0 0% 12%);
    
    --headline-text-color: hsl(0 0% 95%);
    
    --card-bg: #2B2B2B;
    --card-border: hsl(222 14% 22%);
    --card-shadow: 0 12px 32px hsl(222 80% 2% / .55), 0 2px 6px hsl(222 80% 2% / .35);
    --card-text-color: #fff;
    --card-muted-text-color: hsl(0 0% 80%);
    
    --card-input-text-color: hsl(0 0% 90%);
    
    --input-bg: hsl(0 0% 11%);
    --placeholder-color: hsl(0 0% 70%);
    
    --card-section-bg: #252525;
    
    --btn-accent-bg: hsl(222 90% 64%);
    --btn-accent-color: #fff;
    
    --color-reverse: invert(1);
    
    --gradient--preloader: linear-gradient(270deg, #393939, #4E4E4E, #111, #6B6B6B, #5F5F5F);
    
    --error-text-color: #D27777;
    
    --switch-section-primary-btn-bg: hsl(0 0% 10%);
    --switch-section-primary-btn-color: hsl(0 0% 100%);
    --switch-section-muted-btn-bg: hsl(0 0% 85%);
    --switch-section-muted-btn-color: hsl(0 0% 10%);
  }
}

* { 
    box-sizing: border-box; 
    scrollbar-width: none;               /* auto | thin | none */
}

body { 
    margin: 0; 
    font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: var(--body-bg-color);
}

a { color: inherit; text-decoration: none; }

input,
textarea,
label,
select,
button{
    font-size: 16px;
    font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial
}

button, 
a {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder-color);   /* нейтрально-серый */
  opacity: 1;             /* убираем "прозрачность по умолчанию" в некоторых браузерах */
}

select{
    appearance: none;           /* убираем стандартную стрелку (Chrome, Safari, FF) */
    -webkit-appearance: none;   /* Safari, iOS */
    -moz-appearance: none;      /* Firefox */
}

[hidden]{ display: none !important; }

.page-tab-btn{
    background: var(--card-bg);
    color: var(--card-text-color);
    border: none;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    opacity: .85;
}

.page-tab-btn:hover{ filter: var(--brightness-up-low); }

.page-tab-btn.is-active{
  background: var(--card-text-color);
  color: var(--card-bg);
}