@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Russo+One&display=swap');

/* Obninsk404 refresh v3 — visual skin only (TEST).
   Structure / texts / links / JS of the live pages are untouched.
   Accent recoloured to the mascot wordmark orange #f06431 ("404 ДАЙТЕ VPN", from top-logo.png).
   Deliberately NOT restyled:
     - index.html subscription shield  (#o404Shield / .rdy-* / .sh-* / #shGo — the
       "generation animation" + the stepper window with the balls & frame)
     - lk.html reissue flow            (.o404-reissue-progress-* / .o404-ready-* / .o404-modal-*)
   Bump ?v= on redeploy to bust the browser cache. */

:root {
  --o404-ink: #17241d;
  --o404-paper: #f7f2e7;
  --o404-paper-2: #fffaf0;
  --o404-orange: #f06431;
  --o404-orange-hot: #f47644;
  --o404-yellow: #ffc857;
  --o404-blue: #43b9e8;
  --o404-muted: #68756d;
  --o404-line: rgba(23, 36, 29, .22);
  --orange: var(--o404-orange) !important;
  --orange2: var(--o404-orange-hot) !important;
  --dark: var(--o404-ink) !important;
  --muted: var(--o404-muted) !important;
  --border: var(--o404-line) !important;
}

html { background-color: var(--o404-ink); }

body,
body.lk-body {
  color: var(--o404-ink) !important;
  font-family: 'Manrope', Arial, sans-serif !important;
  background-color: var(--o404-ink) !important;
  /* just the mesh/"fabric" — the corner glows are now the moving #o404fx light */
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    radial-gradient(circle at 12% 6%, rgba(67, 185, 232, .10), transparent 24rem) !important;
  background-size: 24px 24px, 24px 24px, auto !important;
}

.card {
  color: var(--o404-ink) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), transparent 45%), var(--o404-paper) !important;
  border-color: #0c1710 !important;
  border-radius: 18px !important;
  box-shadow: 7px 7px 0 var(--o404-orange), 11px 11px 0 #0c1710 !important;
}

.topbar,
.lk-topbar { border-bottom-color: var(--o404-ink) !important; }

.top-logo-img,
.hero-wordmark,
.brand-helper-img,
.logo-about-stack img { mix-blend-mode: multiply; }

.about-top-link {
  color: var(--o404-paper-2) !important;
  background: var(--o404-ink) !important;
  border-color: var(--o404-ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--o404-orange) !important;
  text-decoration: none !important;
  /* top-logo.png is letterboxed inside its 120x120 box (~37px empty at the
     bottom, same geometry as the step-badge fix) — pull the button up near
     the visible mascot (small breathing gap, not flush against it). */
  margin-top: -32px !important;
  /* the negative margin above overlaps the logo <img>'s full (letterboxed)
     bounding box, not just its visible pixels — without a higher stacking
     order the img (painted after in some browsers' hit-test order) eats the
     click there and the button becomes dead on desktop. Force the button on
     top so it's always clickable regardless of the overlap. */
  position: relative !important;
  z-index: 6 !important;
}
@media (max-width: 480px) {
  /* index.html's own ≤480px rule shrinks .top-logo-img to 70px — the -32px
     pull above was sized for the 120px desktop box and overshoots on mobile.
     Same letterbox math (542x206 image), just for the 70px box. */
  #badge.step-badge,
  .topbar .dots {
    margin-top: 22px !important;
  }
}

h1,
h2,
h3,
.support-title,
.lk-panel-title,
.lk-modal-title {
  color: var(--o404-ink) !important;
  font-family: 'Russo One', 'Manrope', sans-serif !important;
  /* Russo One ships a single weight (400). Inheriting font-weight:900 makes the
     browser fake-bold it, which reads as a fuzzy "glow" around the letters. */
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}

.card-title { color: var(--o404-ink) !important; }

.orange,
h1 .orange,
h2 .orange { color: var(--o404-orange) !important; }

.card-subtitle,
.note,
.support-text,
.install-card-text,
.info-text,
.legal-section p,
.lk-mini-note,
.lk-modal-text { color: var(--o404-muted) !important; }

.telegram-card,
.setup-card,
.info-block,
.install-card,
.support-card,
.final-key-block,
.lk-panel,
.lk-key-card,
.lk-alert,
.lk-empty {
  background-color: rgba(255, 255, 255, .68) !important;
  background-image: none !important;
  border-color: var(--o404-ink) !important;
  border-radius: 7px !important;
  box-shadow: 4px 4px 0 rgba(23, 36, 29, .15) !important;
}
/* ЛК: drop the thin border on the outer panel only — keeps the offset
   shadow, per-key-card borders stay as in the shared rule above */
.lk-panel {
  border-color: transparent !important;
}

/* Both step-1 cards have overflow:hidden AND their inner .info-icon carries a
   soft coloured drop-shadow -> that icon shadow gets clipped by the card edge
   and looks crooked. Kill the icon shadows; the card's own offset shadow
   (painted outside the border box) is not clipped and stays even. */
#step-1 .telegram-card .info-icon,
#step-1 .setup-card .info-icon {
  box-shadow: none !important;
  filter: none !important;
}

/* setup card (block 2): its content is shorter than block 1 (no big button) so
   grid-centering left a big void at the bottom. Stretch the text column to the
   card height and spread the pieces -> title lines up with block 1, no void. */
#step-1 .setup-card { align-items: stretch !important; }
#step-1 .setup-card .info-icon { align-self: center !important; }
#step-1 .setup-card .info-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 13px 0 !important;
}
#step-1 .setup-card .mini-steps { margin-top: 0 !important; }

/* step-5 ("УРА🥳 Почти готово!") — was missing from the mobile top-padding list,
   so its <h2> overlapped the "О нас" button. Match #step-2/3/4/incy. */
@media (max-width: 900px) { #step-5.active { padding-top: 40px !important; } }
@media (max-width: 360px) { #step-5.active { padding-top: 34px !important; } }

/* first block (telegram card): same contour as the setup card — ink 1px border,
   small radius (its own is heavily rounded) — but no shadow. */
.telegram-card,
#step-1 .telegram-card,
#step-1 .info-block.telegram-card {
  border: 1px solid var(--o404-ink) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  filter: none !important;
}

/* second block (setup card): match the device-select option button exactly —
   ink 1px border, small radius, subtle hard-offset shadow. The old crookedness
   came from the big 20px radius (offset shadow tapered at the corners) plus the
   orange ::before stripe on the left; both are neutralised here. */
.setup-card,
#step-1 .setup-card,
#step-1 .info-block.setup-card {
  border: 1px solid var(--o404-ink) !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 rgba(23, 36, 29, .15) !important;
  filter: none !important;
}
#step-1 .setup-card::before { display: none !important; }

.step-badge {
  color: var(--o404-ink) !important;
  background: var(--o404-yellow) !important;
  border-color: var(--o404-ink) !important;
  border-radius: 3px !important;
}

/* nudge the step badge + dots up so they don't sit lower than the logo —
   but stay below its top edge */
#badge.step-badge,
.topbar .dots {
  align-self: start !important;
  /* top-logo.png is 542x206 inside a 120x120 contain-fit box -> the visible
     mark starts ~37px down (letterboxed). Match that, not the box edge. */
  margin-top: 37px !important;
}
.topbar .dots {
  /* same box-height as the badge so the same margin-top gives them the same
     vertical centre — the dots track was riding higher than the badge */
  height: 30px !important;
}

/* "О нас" -> "ТЕХ.ПОДДЕРЖКА" on every step but the first: same pill; JS
   shrinks the font just enough for the longer label to fit on one line */
.about-top-link.is-support {
  /* pin the pill to the exact same 120px as "О нас" — without this,
     white-space:nowrap makes a flex-item's auto min-width grow to fit the
     unbroken text, stretching the button past its declared width */
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
@media (max-width: 480px) {
  /* match the button's width to the logo, which index.html itself shrinks to
     70px at this breakpoint — was pinned to 120px (desktop width) on both
     states, so the pill ran wider than the picture above it. */
  .about-top-link,
  .about-top-link.is-support {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    margin-top: -17px !important;
  }
}

.dots .dot,
.mini-steps span,
.mini-steps i { border-color: var(--o404-ink) !important; }

.dots .dot.active,
.mini-steps span {
  color: #fff !important;
  background: var(--o404-orange) !important;
}

.btn,
button.btn,
a.btn {
  border-color: var(--o404-ink) !important;
  border-radius: 4px !important;
  font-family: 'Russo One', 'Manrope', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  transition: filter .12s ease, box-shadow .12s ease !important;
}

.btn:hover,
button.btn:hover,
a.btn:hover { filter: brightness(1.05); }

.btn-primary {
  color: #fff !important;
  background: var(--o404-orange) !important;
  border-color: var(--o404-ink) !important;
  box-shadow: 4px 4px 0 var(--o404-ink) !important;
}

.btn-secondary {
  color: var(--o404-ink) !important;
  background: var(--o404-paper-2) !important;
  border-color: var(--o404-ink) !important;
  box-shadow: 3px 3px 0 rgba(23, 36, 29, .18) !important;
}

/* "Активировать в Telegram" stays Telegram-blue, white text */
.tg-btn {
  color: #fff !important;
  background: var(--o404-blue) !important;
  border-color: var(--o404-ink) !important;
  box-shadow: 4px 4px 0 var(--o404-ink) !important;
}

/* "Добавить в Happ" (landing step-5 + LK) — orange like the other primary buttons */
.sub-happ,
.lk-cfg-happ,
#happAddButton {
  color: #fff !important;
  background: var(--o404-orange) !important;
  background-image: none !important;
  border-color: var(--o404-ink) !important;
  box-shadow: 4px 4px 0 var(--o404-ink) !important;
}

.option {
  color: var(--o404-ink) !important;
  background: rgba(255, 255, 255, .76) !important;
  border-color: var(--o404-ink) !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 rgba(23, 36, 29, .15) !important;
  transition: background-color .12s ease, box-shadow .12s ease !important;
}

.option:hover {
  background: #fff !important;
  box-shadow: 4px 4px 0 var(--o404-orange) !important;
}

.pixel-icon,
.region-icon-circle,
.install-download-icon {
  background: var(--o404-paper-2) !important;
  border-color: var(--o404-ink) !important;
  border-radius: 4px !important;
}

.install-card-link,
.inline-link,
.lk-download-link {
  color: var(--o404-orange) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px;
}

/* step-4 "СКАЧАТЬ ПРИЛОЖЕНИЕ →" — highlight it: bigger; the trailing arrow
   nudges right-and-back (horizontal only, never drops below the text). */
#downloadLinkInline {
  font-size: 15px !important;
  letter-spacing: .3px;
  text-decoration-thickness: 2.5px !important;
}
#downloadLinkInline .dl-arr {
  display: inline-block;
  animation: o404arr 1.25s ease-in-out infinite;
}
#downloadLinkInline:hover .dl-arr { animation-duration: .7s; }
@keyframes o404arr {
  0%, 58%, 100% { transform: translateX(0); }
  30% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  #downloadLinkInline .dl-arr { animation: none !important; }
}

/* trial-already-used error: make the message fill the width like the button below it */
.error .err-msg {
  text-align: justify !important;
  text-justify: inter-word;
}

.final-key-block,
.lk-config-sub {
  color: #fff !important;
  background: var(--o404-ink) !important;
  border-color: var(--o404-ink) !important;
  border-radius: 6px !important;
}

.final-key-block .final-key-title,
.final-key-block pre,
.lk-config-sub-label { color: #fff !important; }

#subLinkText,
.lk-config-sub-url {
  color: #d7ffe4 !important;
  background: #0c1811 !important;
  border-color: rgba(119, 216, 138, .48) !important;
  border-radius: 3px !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.fb-input,
.fb-textarea {
  color: var(--o404-ink) !important;
  background: var(--o404-paper-2) !important;
  border-color: var(--o404-line) !important;
  border-radius: 5px !important;
}

.fb-input:focus,
.fb-textarea:focus {
  background: #fff !important;
  border-color: var(--o404-orange) !important;
  box-shadow: 0 0 0 3px rgba(240, 100, 49, .15) !important;
}

.support-modal,
.lk-modal {
  background: rgba(7, 20, 15, .8) !important;
  backdrop-filter: blur(7px);
}

.support-card,
.lk-modal-card {
  color: var(--o404-ink) !important;
  background: var(--o404-paper) !important;
  border-color: var(--o404-ink) !important;
  border-radius: 9px !important;
  box-shadow: 7px 7px 0 var(--o404-orange) !important;
}

.lk-top-title-main,
.lk-top-title-id,
.lk-key-name,
.lk-key-device,
.lk-server-label,
.lk-provider-value { color: var(--o404-ink) !important; }

.lk-top-title-main,
.lk-key-name {
  font-family: 'Russo One', 'Manrope', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-shadow: none !important;
}

.lk-panel-title {
  color: #fff !important;
  background: var(--o404-ink) !important;
  border-color: var(--o404-ink) !important;
}

.lk-key-head,
.lk-key-details {
  background-color: rgba(255, 255, 255, .66) !important;
  border-color: var(--o404-line) !important;
}

.lk-row { border-color: var(--o404-line) !important; }

.lk-badge {
  border-color: var(--o404-ink) !important;
  border-radius: 3px !important;
}

.lk-manage-btn,
.lk-cfg-btn {
  border-color: var(--o404-ink) !important;
  border-radius: 4px !important;
  font-family: 'Russo One', 'Manrope', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-shadow: none !important;
}

.lk-manage-btn {
  color: #fff !important;
  background: var(--o404-orange) !important;
  box-shadow: 3px 3px 0 var(--o404-ink) !important;
}

.lk-cfg-copy {
  color: var(--o404-ink) !important;
  background: var(--o404-yellow) !important;
}

.lk-alert,
.lk-empty { background: #fff5d6 !important; }

.lk-loader-bar {
  background: rgba(23, 36, 29, .14) !important;
  border-color: var(--o404-ink) !important;
  border-radius: 0 !important;
}

.lk-loader-bar::after { background: var(--o404-orange) !important; }

/* ---------------------------------------------------------------------------
   Supplement — landing accents hard-coded in index.html that the base skin
   above (var / .btn based) does not reach. Everything here is orange->mascot.
   NOTHING here targets #o404Shield / .rdy-* / .sh-* / #shGo.
   --------------------------------------------------------------------------- */

/* hero title — centre it on every width (the page left-aligns / indents it at
   some breakpoints via #step-1 h1 { margin-left: 55px } etc.) */
#step-1 .hero-exact,
#step-1 .hero-brand-exact { text-align: center !important; }

#step-1 h1 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/* step-4 (download Happ): pin the Constitution note to the bottom of the page.
   #step-4 has a tall min-height; make it a flex column and let the note take
   the slack. #step-4.active keeps .step { display:none } working when inactive. */
#step-4.active {
  display: flex !important;
  flex-direction: column !important;
}
#step-4 .step-footer-note {
  margin-top: auto !important;
}

/* step-4: a touch more air between the buttons */
#step-4 > .btn { margin-top: 16px !important; }
#step-4 > .btn:first-of-type { margin-top: 24px !important; }

/* step-1..4 mini-step number bubbles (were #ff3d16 text) */
#step-1 .mini-steps span,
#step-2 .mini-steps span,
#step-3 .mini-steps span,
#step-4 .mini-steps span,
#step-incy .mini-steps span {
  color: var(--o404-orange) !important;
  border-color: rgba(240, 100, 49, .42) !important;
}


/* device-select + region pixel icons (SVG stroke/fill attrs #ff3d16 / #ff7a2f) */
.pixel-icon svg [stroke="#ff3d16"],
.pixel-icon svg [stroke="#ff7a2f"],
.region-icon-circle svg [stroke="#ff3d16"] { stroke: var(--o404-orange) !important; }

.pixel-icon svg [fill="#ff3d16"],
.pixel-icon svg [fill="#ff7a2f"] { fill: var(--o404-orange) !important; }

/* primary landing buttons whose own CSS paints an orange gradient */
.btn-primary,
#createSubBtn,
#incyCreateSubBtn {
  background-image: none !important;
  background-color: var(--o404-orange) !important;
}

/* step-5 numbered circles (were #ff7a2f->#ff2d08 gradient) — NOT the shield */
#step-5 .info-icon.step5-icon-num {
  background-image: none !important;
  background-color: var(--o404-orange) !important;
}

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