:root{
  color-scheme: light;
  /* ===== Brand tokens (\u043f\u043e\u0434 \u0432\u0430\u0448 \u043b\u043e\u0433\u043e: \u0447\u0451\u0440\u043d\u044b\u0439 + \u0433\u043e\u043b\u0443\u0431\u043e\u0439) ===== */
  --brand-ink:#0f172a;
  --brand-cyan:#12aff0;
  --brand-cyan-600:#0e8bc0;
  --brand-blue:#2563eb;
  /* ===== UI tokens ===== */
  --bg:#f7fafc;
  --surface:#ffffff;
  --soft:#f1f5f9;
  --text:var(--brand-ink);
  --muted:#475569;
  --line:#e5eaf0;
  --primary:var(--brand-cyan);
  --primary-ink:#06222e;
  --primary-50:#e6f7ff;
  --primary-600:var(--brand-cyan-600);
  /* \u0421\u0435\u0442\u043a\u0430 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b (8\u2011pt) */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:40px; --space-6:48px; --space-8:64px;
  --section-y: var(--space-8);
  /* \u0420\u0430\u0434\u0438\u0443\u0441\u044b \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u043a\u0435\u043d\u044b \u2014 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u00ab\u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u043e\u043c\u00bb \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 */
  --r-card:16px;
  --r-btn:12px;
  --r-chip:999px;
  --shadow:0 10px 24px rgba(15,23,42,.06);
--w:clamp(300px,92vw,1320px);

}
*{box-sizing:border-box}
html,body{height:100%}
body{
 
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.6 var(--font-sans),-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand-blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gap)}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:.5rem .75rem;border-radius:8px;z-index:1000}
:focus-visible{outline:3px solid var(--brand-blue);outline-offset:2px}
/* Header */
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(10px);
}
/* Make the header container flush with the edges of the viewport and span full width */
header .wrap{
  margin-left:0;
  margin-right:0;
  max-width:none;
    width:100%;
  padding-left:var(--space-1);
  padding-right:var(--space-1);
}
/* Reduce left padding on the nav within the header so the burger sits near the edge */
header .nav{
  padding-left:0;
}
.nav{
  display:flex;
  align-items:center;
  gap:18px;
  padding:12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}
.brand svg{width:28px;height:28px}
.grow{flex:1}
.auth-buttons{
  display:flex;
  margin-left:auto;
  
  margin-right: var(--space-2);
  align-items:center;
  gap:var(--space-1)
}
.header-icons{
  
  display:none;
  align-items:center;
  gap:8px;
}
.icon-btn{
  border:none;
  background:transparent;
  padding:0 4px;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.icon-btn .material-symbols-outlined{
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
  font-size:22px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:.6rem 1rem;border-radius:var(--r-btn);border:1px solid #000;
  background:#12aff0; color:#ffffff;
  font-weight:700; letter-spacing:.1px; min-height:44px;
  box-shadow:none; transition:transform .06s ease-out, box-shadow .2s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px); background:#0e8bc0}
.btn--ghost{background:transparent;border:1px solid #000;color:#000;box-shadow:none}
.btn--ghost:hover{border-color:#000;color:#000;background:rgba(0,0,0,0.06)}
/* \u0411\u0435\u0442\u0430\u2011\u0431\u0430\u043d\u043d\u0435\u0440 */
.phase{background:var(--primary-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.phase .content{display:flex;gap:12px;align-items:center;padding:10px 0}
.tag{font-size:.8rem;font-weight:800;color:#0b3cbd;background:#e0e7ff;border:1px solid #c7d2fe;border-radius:6px;padding:.25rem .5rem}
.phase .text{color:#1e293b}
/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap);align-items:center;padding:var(--space-6) 0}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
h1{margin:.2em 0 .5em;font-size:clamp(28px,4.2vw,44px);line-height:1.12}
.lead{color:var(--muted);max-width:64ch}
.hero-art{
  background:radial-gradient(1000px 500px at 80% -40%, rgba(14,197,255,.18), transparent 60%),
             radial-gradient(700px 420px at 0% 20%, rgba(37,99,235,.12), transparent 60%);
  border-radius:20px;border:1px solid var(--line);
  box-shadow:var(--shadow); padding:18px; overflow:hidden;
}
.hero-figure{width:100%;height:auto;display:block}
/* Sections */
section{padding:var(--section-y) 0}
.section-title{font-size:clamp(22px,3vw,32px);margin:0 0 var(--space-3)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:900px){.cards-3{grid-template-columns:1fr}}
.cards-6{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:900px){.cards-6{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--space-3);box-shadow:var(--shadow)}
.card h3{margin:.1em 0 .35em;font-size:clamp(18px,2.2vw,22px)}
.card p{color:var(--muted)}
/* Status table */
.status-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;align-items:center}
@media (max-width:900px){.status-grid{grid-template-columns:1fr 1fr;row-gap:10px} .status-grid .h{grid-column:1 / -1}}
.badge{display:inline-flex;align-items:center;gap:8px;padding:.25rem .5rem;border-radius:var(--r-chip);border:1px solid var(--line);font-size:.85rem}
.b-done{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.b-soon{background:#fff7ed;color:#7c2d12;border-color:#fed7aa}
.b-todo{background:#f8fafc;color:#0f172a;border-color:#e2e8f0}
footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted)}
/* Dark scheme */
@media (prefers-color-scheme: dark){
  :root{color-scheme: dark;
    --bg:#0b1220; --surface:#0f172a; --soft:#0b1323; --text:#e6edf6; --muted:#9cb3c8; --line:#12213a;
    --shadow:0 10px 24px rgba(0,0,0,.35);
  }
  .btn{color:var(--primary-ink)}
  header{background:rgba(15,23,42,.75)}
  .phase .text{color:#e6edf6}
}

/* v7 overrides: refined buttons + font token */
:root{
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --brand-cyan: #12aff0;
  --brand-cyan-600: #0e8bc0;
  --brand-blue: #2563eb;
  --brand-blue-600: #1d4ed8;
  --btn-elev: 0 6px 14px rgba(2,132,199,.16);
  --btn-elev-hover: 0 12px 24px rgba(2,132,199,.22);
  --btn-elev-active: 0 4px 10px rgba(2,132,199,.18);
  --btn-min-h: 44px;
  --btn-pad-x: 1rem;
  --btn-pad-y: 0.625rem;
}
body{ font-family: var(--font-sans); }
/* Base button (filled) */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--r-btn, 12px);
  border:1px solid #000;
  background: var(--brand-cyan);
  color: #ffffff;
  font-weight: 700; letter-spacing:.1px;
  box-shadow: none;
  transition: transform .12s ease, box-shadow .22s ease, background .18s ease, border-color .18s ease, filter .18s ease;
  text-decoration: none !important; cursor: pointer;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: none;
  background: var(--brand-cyan-600);
}
.btn:active{
  transform: translateY(0);
  box-shadow: none;
  filter: none;
}
/* State layer for subtle sheen */
.btn::after{
  content:''; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: none;
  opacity:0; transition: none;
}
.btn:hover::after{ opacity:0 }
/* Focus-visible ring */
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0,0,0,.3);
}
/* Ghost button */
.btn.btn--ghost{
  color: #000;
  background: transparent; border-color: #000;
  box-shadow: none;
}
.btn.btn--ghost:hover{
  background: rgba(0,0,0,0.06);
  border-color: #000;
  color: #000;
}
/* Disabled state */
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.55; pointer-events:none; box-shadow:none }
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none !important }
  .btn:hover,.btn:active{ transform: none }
}

/* Custom button colors */
.btn,
.btn:visited {
  background: #12aff0 !important;
  background-color: #12aff0 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: none !important;
  filter: none !important;
}
.btn::after { display: none !important; }
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active {
  background: #0e8bc0 !important;
  background-color: #0e8bc0 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: none !important;
  outline: none !important;
}
.btn.btn--ghost,
.btn.btn--ghost:visited {
  background: transparent !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}
.btn.btn--ghost:hover,
.btn.btn--ghost:focus,
.btn.btn--ghost:focus-visible,
.btn.btn--ghost:active {
  background: rgba(0,0,0,0.06) !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Cards 6 */
.cards-6{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:900px){.cards-6{grid-template-columns:1fr}}

/* Sidebar and burger */
:root {
  --sidebar-collapsed-width: 46px;
  --sidebar-expanded-width: 260px;
  --header-height: 64px;
  --bg-sidebar: #f9fafb;
  --bg-sidebar-hover: #e5e7eb;
  --border-color-soft: #e5e7eb;
  --sidebar-accent: #0ea5e9;
  --sidebar-accent-strong: #0ea5e9;
  --transition-fast: 0.25s ease;
}
/* Shift content when sidebar collapses */
body {
  padding-left: 0;
   
  transition: none;
}
body > .phase,
body > main,
 body > .upgr-hx,
body > footer {
  margin-left: var(--sidebar-collapsed-width);
  transition: margin-left var(--transition-fast);
}
body > .upgr-hx {
  width: calc(100% - var(--sidebar-collapsed-width));
}
body.menu-open > .phase,
  body.menu-open > .upgr-hx,
body.menu-open > main,
body.menu-open > footer {
  margin-left: var(--sidebar-expanded-width);
}
body.menu-open > .upgr-hx {
  width: calc(100% - var(--sidebar-expanded-width));
}
/* Sidebar */
.sidebar {
  position: fixed;
  z-index: 40;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-collapsed-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color-soft);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-fast);
}
body.menu-open .sidebar {
  width: var(--sidebar-expanded-width);
}
.sidebar-inner {
  flex: 1 1 auto;
  padding: 8px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #9ca3af transparent;
}
.sidebar-inner::-webkit-scrollbar {
  width: 6px;
}
.sidebar-inner::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 999px;
}
.sidebar-inner::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #6b7280;
  padding: 8px 18px 4px;
  white-space: normal;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 14px;
  color: #111827;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
  border-radius: 10px;
  margin: 0 8px;
}
.menu-item:hover {
  background: var(--bg-sidebar-hover);
  transform: translateX(2px);
}
.menu-item.active {
  background: #e0edff;
  color: var(--sidebar-accent-strong);
  font-weight: 600;
}
.menu-icon.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
  font-size: 22px;
  line-height: 1;
  color: var(--sidebar-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-item:hover .menu-icon,
.menu-item.active .menu-icon {
  color: var(--sidebar-accent-strong);
}
.menu-label {
  opacity: 1;
  white-space: normal;
  line-height: 1.3;
  word-break: break-word;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}
body:not(.menu-open) .menu-item {
  justify-content: center;
  padding-inline: 0;
  margin-inline: 0;
}

body:not(.menu-open) .menu-label,
body:not(.menu-open) .sidebar-section-label {
  display: none;
}
.menu-separator {
  margin: 6px 10px;
  border-bottom: 1px solid rgba(209, 213, 219, 0.9);
}
/* Burger button */
.burger {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-right: 16px;
}
body:not(.menu-open) header .wrap {
  padding-left: 0;
}
body:not(.menu-open) .burger {
  margin-left: calc(var(--sidebar-collapsed-width)/2 - 16px);
}
.burger-icon {
  width: 18px;
  height: 14px;
  position: relative;
}
.burger-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: #000000;
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast),
    top var(--transition-fast),
    bottom var(--transition-fast);
}
.burger-line:nth-child(1) {
  top: 0;
}
.burger-line:nth-child(2) {
  top: 6px;
}
.burger-line:nth-child(3) {
  bottom: 0;
}
body.menu-open .burger-line:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
body.menu-open .burger-line:nth-child(2) {
  opacity: 0;
}
body.menu-open .burger-line:nth-child(3) {
  bottom: 6px;
  transform: rotate(-45deg);
}
@media (max-width: 768px) {
  body > .phase,
  body > main,
      body > .upgr-hx,

  body > footer {
    margin-left: 0;
  }
  
  body.menu-open > .phase,
  body.menu-open > main,
      body.menu-open > .upgr-hx,

  body.menu-open > footer {
    margin-left: 0;
  }
  body > .upgr-hx,
  body.menu-open > .upgr-hx {
    width: 100%;
  }
  .sidebar {
    width: var(--sidebar-expanded-width);
    transform: translateX(-100%);
    transition: transform var(--transition-fast);
  }
  body.menu-open .sidebar {
    transform: translateX(0);
  }
  .auth-buttons {
    display: none;
  }
  .header-icons {
    display: flex;
  }
  .nav {
    padding-left: 8px;
    padding-right: 8px;
  }
  .brand img {
    height: 32px;
  }
}

/* v9 auth burger adjustments */
.auth-buttons .btn {
  min-height: 40px;
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}
/* Shift collapsed burger button slightly right to center it */
body:not(.menu-open) .burger {
  margin-left: calc(var(--sidebar-collapsed-width)/2 - 14px);
}
/* Keep burger aligned when menu is open so cross and lines stay in same position */
body.menu-open .burger {
  margin-left: calc(var(--sidebar-collapsed-width)/2 - 14px);
}

/* Remove underline from menu items */
.menu-item,
.menu-item *,
.menu-item:hover,
.menu-item:hover *,
.menu-item:focus,
.menu-item:focus *,
.menu-item:active,
.menu-item:active * {
  text-decoration: none !important;
}



/* Align auth buttons flush right */
header .nav {
  width: 100%;
}
.auth-buttons {
  margin-right: 0;
}