@font-face {
  font-family: "YandexThin";
  src: url("../fonts/YandexSansText-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YandexRegular";
  src: url("../fonts/YandexSansText-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YandexMedium";
  src: url("../fonts/YandexSansText-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YandexBold";
  src: url("../fonts/YandexSansDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.yandex-thin{font-family:"YandexThin", var(--font-body) !important;}
.yandex-regular{font-family:"YandexRegular", var(--font-body) !important;}
.yandex-medium{font-family:"YandexMedium", var(--font-body) !important;}
.yandex-bold{font-family:"YandexBold", var(--font-body) !important;}

:root{
  /* Color tokens */
  --color-surface: #0b1326;
  --color-surface-dim: #0b1326;
  --color-surface-bright: #31394d;
  --color-surface-container: #171f33;
  --color-surface-container-high: #222a3d;
  --color-surface-container-highest: #2d3449;
  --color-on-surface: #dae2fd;
  --color-on-surface-variant: #c7c4d7;
  --color-outline: #908fa0;
  --color-surface-tint: #c0c1ff;
  --color-primary: #c0c1ff;
  --color-on-primary: #1000a9;
  --color-primary-container: #8083ff;
  --color-secondary: #b9c8de;
  --color-on-secondary: #233143;
  --color-tertiary: #bcc7de;
  --color-error: #ffb4ab;
  --color-background: #0b1326;

  /* Obsidian Precision theme overrides */
  --obs-surface: #0b1326;
  --obs-surface-dim: #0b1326;
  --obs-surface-bright: #31394d;
  --obs-surface-container: #171f33;
  --obs-surface-container-high: #222a3d;
  --obs-surface-container-highest: #2d3449;
  --obs-on-surface: #dae2fd;
  --obs-on-surface-variant: #c7c4d7;
  --obs-outline: #908fa0;
  --obs-primary: #8083ff;
  --obs-primary-container: #8083ff;
  --obs-secondary: #b9c8de;
  --obs-tertiary: #bcc7de;
  --obs-error: #ffb4ab;

  /* Spacing */
  --space-unit: 4px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --container-max: 1280px;

  /* Obsidian specific spacing & radii */
  --g-unit: 4px;
  --g-xs: 4px;
  --g-sm: 8px;
  --g-md: 16px;
  --g-lg: 24px;
  --g-xl: 40px;
  --g-container-max: 1280px;

  /* Typography tokens */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono';

  --display-lg-size: 48px;
  --display-lg-weight: 700;
  --headline-lg-size: 32px;
  --headline-md-size: 24px;
  --body-lg-size: 18px;
  --body-md-size: 16px;
  --label-md-size: 14px;
  --label-sm-size: 12px;

  --display-lg: 48px;
  --headline-lg: 32px;
  --headline-md: 24px;
  --body-lg: 18px;
  --body-md: 16px;
  --label-md: 14px;
  --label-sm: 12px;

  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --r-sm: 2px;
  --r: 4px;
  --r-md: 6px;
  --r-lg: 8px;
}

/* Base layout */
html, body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  display: flex;          /* Добавлено */
  flex-direction: column;
  background: linear-gradient(180deg, var(--obs-surface) 0%, var(--obs-surface-container) 100%);
  color: var(--obs-on-surface);
  font-family: var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.content-wrapper{flex:1 0 auto;display:flex;flex-direction:column}

/* Header */
.header{
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(144,143,160,0.12);
  padding: 12px var(--space-lg);
}

.header-logo-image{
  height: 20cqi;
  width: auto;
  margin:0;
  padding:0;
}

@media (min-width: 768px) {
  .header-logo-image{
    height: 10cqi;
  }
}

.header-controls{
  display:flex;
  align-items:center;
  gap:12px;
}

.theme-toggle{
  background:transparent;
  border:1px solid rgba(144,143,160,0.12);
  color:var(--obs-on-surface);
  width:36px;
  height:36px;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
}

.theme-toggle:hover{
  background:rgba(192,193,255,0.1);
  border-color:rgba(144,143,160,0.2);
}

.main-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100;
  max-width:var(--g-container-max);
  padding:0 var(--g-lg);
  box-sizing:border-box;
  margin:56px auto;
  gap:0;
}

/* Footer */
.footer{
  margin-top: auto;
  background: var(--obs-surface-container);
  backdrop-filter: blur(8px);
  width: 100%; /* Гарантирует ширину родителя */
  margin-left: 0; /* Обнуляем возможные сдвиги */
  margin-right: 0;
  border-top: 1px solid rgba(144,143,160,0.08);
  color: var(--obs-on-surface-variant);
  padding-bottom: 20px;
}

.footer-container{
  /* padding:0 var(--g-lg); */
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width: 100%;
  padding-left: var(--g-lg); /* Добавлено для мобильных */
  padding-right: var(--g-lg);
  box-sizing:border-box;
  padding-bottom: 20px;
  padding-top: 20px;
  gap:10px;
}

.footer-section{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.footer-support-text{font-size:20px; user-select: none}
.footer-section.support-block{order:1; gap:10px; user-select: text;}
.footer-section.brand-block{order:2; user-select: none;}
.footer-section.links-block{order:3; gap:10px; user-select: none;}

.footer-image{width:40vw;max-width:180px;filter:grayscale(20%) brightness(1.05)}
.footer-text,.footer-year{font-size:14px;margin:0;color:var(--obs-on-surface-variant); user-select: none;}
.footer-link,.support-link{color:#fff;text-decoration:none;font-size:14px;transition:color .18s ease}
.footer-link:hover,.support-link:hover{color:#fff}

@media (min-width:768px){
  .footer-container{flex-direction:row;justify-content:space-between;align-items:center;width:100%;gap:0}
  .footer-section{width:33.333%}
  .footer-image{width:15vw;max-width:180px}
}

@media (max-width:767px) {
  .footer-support-text{font-size:20px;margin-bottom: 10px;}
  .footer-section.support-block{order:1;margin-bottom:23px;}
  .footer-section.links-block{order:2;}
  .footer-section.brand-block{order:3;margin-top: 23px;}
}

/* Scrollbar */
@media screen and (min-width:1024px){
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(192,193,255,0.12);border-radius:8px}
  ::-webkit-scrollbar-thumb:hover{background:rgba(192,193,255,0.18)}
  html{scrollbar-width:thin;scrollbar-color: rgba(192,193,255,0.12) transparent}
}
@media screen and (max-width:1023px){
  ::-webkit-scrollbar{display:none}
  html{scrollbar-width:none;-ms-overflow-style:none}
}

/* Buttons */
.btn {
  font-family: var(--font-body);
  border-radius: var(--r);
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}
.btn-small { padding: 10px 16px; font-size: 0.95rem; }
.btn-link { background: transparent; border: none; padding: 0; color: inherit; }

/* Light theme overrides (Inverted logic) */
html.light-theme{
  --obs-surface: #f8fbff;
  --obs-surface-dim: #eef3f9;
  --obs-surface-bright: #ffffff;
  --obs-surface-container: #f2f6fc;
  --obs-surface-container-high: #ffffff;
  --obs-surface-container-highest: #e6ecf6;
  --obs-on-surface: #0f172a;
  --obs-on-surface-variant: #475569;
  --obs-outline: #94a3b8;
  --obs-primary: #3a48db;
  --obs-primary-container: #dfe3ff;
  --obs-secondary: #64748b;
  --obs-tertiary: #475569;
  --obs-error: #b91c1c;
  
  --color-surface: var(--obs-surface);
  --color-on-surface: var(--obs-on-surface);
  --color-background: var(--obs-surface);
}

html.light-theme body{
  background: linear-gradient(180deg, var(--obs-surface) 0%, var(--obs-surface-container) 100%);
  color: var(--obs-on-surface);
}

html.light-theme .header{
  border-bottom-color: rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.8), transparent);
}

html.light-theme .theme-toggle{
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--obs-on-surface);
}

html.light-theme .theme-toggle:hover{
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.18);
}

html.light-theme input[type="text"],
html.light-theme input[type="email"],
html.light-theme input[type="password"],
html.light-theme textarea{
  background: rgba(255,255,255,0.9);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--obs-on-surface);
}

html.light-theme input:focus,
html.light-theme textarea:focus{
  border-color: var(--obs-primary);
  box-shadow: 0 0 12px rgba(58, 72, 219, 0.18);
}

html.light-theme .card,
html.light-theme .auth-card,
html.light-theme .dashboard-support-block,
html.light-theme .instruction-step,
html.light-theme .footer,
html.light-theme .cookie-banner{
  background: var(--obs-surface-container-high);
  border-color: rgba(15, 23, 42, 0.08);
}

html.light-theme .footer{
  background: var(--obs-surface-container);
  border-top-color: rgba(15, 23, 42, 0.08);
  color: var(--obs-on-surface-variant);
}

html.light-theme .platform-tab{
  background: rgba(58,72,219,0.08);
  border-color: rgba(58,72,219,0.14);
  color: var(--obs-on-surface);
}

html.light-theme .platform-tab.active{
  background: rgba(58,72,219,0.16);
  border-color: rgba(58,72,219,0.22);
}

html.light-theme .btn-main,
html.light-theme .btn-primary{
  background: var(--obs-primary);
  color: #ffffff;
}

html.light-theme .btn-main:hover,
html.light-theme .btn-primary:hover{
  background: #2d39b4;
}

html.light-theme .btn-secondary{
  background: rgba(58,72,219,0.08);
  border-color: rgba(58,72,219,0.16);
  color: var(--obs-on-surface);
}

html.light-theme .btn-secondary:hover{
  background: rgba(58,72,219,0.14);
}

html.light-theme .btn-copy{
  background: rgba(58,72,219,0.08);
  border-color: rgba(58,72,219,0.16);
}

html.light-theme .btn-copy:hover{
  background: rgba(58,72,219,0.16);
  border-color: rgba(58,72,219,0.24);
}

html.light-theme a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-submit):not(.btn-back):not(.btn-secondary):not(.btn-copy){
  color:#b45309;
}

html.light-theme .cookie-banner {
  background: rgba(255,255,255,0.96);
  color: var(--obs-on-surface);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* Inputs */
input,textarea,select{background:transparent;border-radius:var(--r);color:var(--obs-on-surface);font-size:var(--body-md);font-family:"YandexRegular", var(--font-body)}
input[type="text"],input[type="email"],input[type="password"],textarea{background:rgba(255,255,255,0.01);border:1px solid rgba(144,143,160,0.06);padding:8px 10px}
input:focus,textarea:focus{outline:none;border-color:var(--obs-primary);box-shadow:0 0 8px rgba(128,131,255,0.12)}

/* Links */
a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-submit):not(.btn-back):not(.btn-secondary):not(.btn-copy){color:#fff;text-decoration:none}
a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-submit):not(.btn-back):not(.btn-secondary):not(.btn-copy):hover,a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-submit):not(.btn-back):not(.btn-secondary):not(.btn-copy):focus{color:#bdbdbd;text-decoration:none}

/* Components */
.card{background:var(--obs-surface-container-high);border:1px solid rgba(144,143,160,0.06);border-radius:var(--r-lg);padding:16px}
.card.featured{border-top:2px solid rgba(128,131,255,0.12)}
.chip{font-family:var(--font-mono);font-size:var(--label-sm);padding:4px 8px;border-radius:var(--r);background:rgba(128,131,255,0.08);color:var(--obs-on-surface)}
.list-item{border-bottom:1px solid rgba(144,143,160,0.04);padding:12px 8px}
.list-item:hover{background:rgba(255,255,255,0.02)}

/* Auth cards & Modals */
.modal-backdrop{backdrop-filter:blur(12px);background:rgba(11,19,38,0.45)}
.auth-card{max-width:520px;width:100%;background:var(--obs-surface-container-high);border-radius:var(--r-lg);padding:24px;box-shadow:none}
.auth-title{font-size:20px;color:var(--obs-on-surface-variant)}
.btn-submit{border-radius:var(--r);padding:10px 14px}

/* Typography & focus */
h1,h2,h3{color:var(--obs-on-surface);margin:0 0 8px}
button:focus, a:focus, input:focus{outline:2px solid rgba(192,193,255,0.12);outline-offset:2px}

/* Cookie banner */
.cookie-banner{background:rgba(6,14,32,0.96);color:var(--obs-on-surface)}

/* Responsive */
@media (max-width:700px){
  .main-container{padding:0 16px;margin-top:32px}
  .footer-container{padding-bottom: 20px;}
}