/* ============================================================
   BULBVPN — "Личный кабинет" (account dashboard) stylesheet
   Self-contained: @font-face + reset + .canvas/.bp-* scaffold copied
   from pricing.css so this page does NOT depend on main.css/pricing.css.

   This page has a DIFFERENT structure from the marketing pages:
   no top pill-nav, no footer — just one dark rounded panel over a
   diagonal neon-lightning texture, a left nav rail (desktop/tablet)
   and stacked status/tariff/server cards.

   Three fixed-size absolute canvases (one per Figma artboard), toggled
   by the SAME media queries the marketing pages use:
     desktop canvas  1660 x 1236   shown >= 1394px   (Figma 518:375)
     tablet  canvas  1133 x 1137   shown 813..1393px (Figma 835:281)
     phone   canvas   493-wide fluid (aspect 493:1207) shown <= 812px (858:982)
   Per-node coordinates are kept inline in account.html as a direct
   transcription of the Figma absolute layout.
   ============================================================ */

/* ---------- self-hosted fonts (copied from pricing.css) ---------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* ---------- reset (copied from pricing.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-page);
  color: var(--c-text-dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; border: 0; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--c-purple);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- canvas ---------- */
.canvas {
  position: relative;
  margin: 0 auto;
  background: var(--c-page);
  overflow: hidden;          /* clip artboard bleed exactly like the Figma frame */
}
.bp-d { width: 1660px; height: 1236px; }
.bp-t { width: 1133px; height: 1137px; }
/* phone canvas is FLUID: caps at the 493px artboard width and scales down.
   Height is definite via aspect-ratio so absolutely-positioned children have
   a box to resolve against (design frame 493 x 1207). */
.bp-p {
  width: 100%;
  max-width: 493px;
  aspect-ratio: 493 / 1207;
  container-type: inline-size;
  --u: calc(100cqw / 493);      /* one Figma design pixel, fluid */
}

/* breakpoint switching — identical boundaries to the marketing pages:
   midpoints between the three target widths. */
.bp-d, .bp-t, .bp-p { display: none; }

/* scale-to-fit: fixed artboard fills the viewport width at any size. */
.fit { display: none; width: 100%; overflow: hidden; container-type: inline-size; }
@media (min-width: 1394px) {
  .fit-d { display: block; aspect-ratio: 1660 / 1236; }
  .fit-d > .bp-d { margin: 0; transform-origin: top left; transform: scale(calc(100cqw / 1660px)); }
}
@media (min-width: 813px) and (max-width: 1393px) {
  .fit-t { display: block; aspect-ratio: 1133 / 1137; }
  .fit-t > .bp-t { margin: 0; transform-origin: top left; transform: scale(calc(100cqw / 1133px)); }
}
@media (min-width: 1394px) { .bp-d { display: block; } }
@media (min-width: 813px) and (max-width: 1393px) { .bp-t { display: block; } }
@media (max-width: 812px) { .bp-p { display: block; } }

/* ---------- primitives ---------- */
.abs { position: absolute; }
.nowrap { white-space: nowrap; }
.lm { display: contents; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #000; color: #fff; padding: 10px 16px; z-index: 99;
  font-family: var(--font-body);
}
.skip-link:focus { left: 8px; top: 8px; }

/* typography roles */
.dm    { font-family: var(--font-heading); font-variation-settings: "opsz" 14; line-height: normal; }
.dm-m  { font-weight: var(--w-medium); }
.dm-b  { font-weight: var(--w-bold); }
.dm-eb { font-weight: var(--w-extrabold); }
.dm-bl { font-weight: var(--w-black); }
.inter   { font-family: var(--font-body); font-weight: var(--w-regular); line-height: normal; }
.inter-m { font-family: var(--font-body); font-weight: var(--w-medium);  line-height: normal; }

.c-w { color: var(--c-text-light); }
.c-b { color: var(--c-text-dark); }

/* account accent text colors (exact Figma values) */
.ac-green  { color: #00ff15; }   /* "Активна" + prices "$" */
.ac-violet { color: #692dff; }   /* "До: 5 июля" / "Франкфурт" */
/* "Главная" active nav label — green->cyan gradient text */
.ac-grad {
  background: linear-gradient(90.96deg, #84ff00 0.31%, #51dcff 101.53%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Baseline match (same technique as the marketing pages): Figma renders these
   absolutely-positioned text nodes with more leading above the cap height than
   the browser's line-height:normal, so flowing text sits ~0.35em too high on
   desktop/tablet. Nudge it down. Opt out the Latin logo wordmark; the phone
   artboard uses its own raw offsets (no nudge). */
.bp-d .dm, .bp-d .inter, .bp-d .inter-m,
.bp-t .dm, .bp-t .inter, .bp-t .inter-m { transform: translateY(0.35em); }
.logo-text { transform: translateY(0); }
.bp-p .dm, .bp-p .inter, .bp-p .inter-m { transform: none; }

/* image helpers */
.cover   { width: 100%; height: 100%; object-fit: cover; }
.contain { width: 100%; height: 100%; object-fit: contain; }
.ic      { position: absolute; object-fit: contain; }

/* Header/logo sits ABOVE the background art (parity with the marketing pages). */
header .abs, header img { z-index: 20; }

/* ============================================================
   ACCOUNT-SPECIFIC COMPONENTS
   ============================================================ */

/* full-canvas dark rounded panel = neon texture clipped to the Figma
   "Subtract" silhouette (rounded card + top-left logo notch), darkened 65%.
   Uses clip-path: path() (renders reliably) instead of an external SVG mask
   (the mask SVG has no intrinsic size -> clipped to nothing -> blank panel).
   Desktop/tablet panels are fixed px == the mask viewBox, so the path coords
   map 1:1. The fluid phone panel can't use fixed path coords, so it rounds. */
.ac-panel { position: absolute; overflow: hidden; }
.ac-panel > .cover { position: absolute; inset: 0; }
.ac-panel > .veil  { position: absolute; inset: 0; background: var(--overlay-65); }
.ac-mask-d {
  clip-path: path("M391.523 0C414.43 0.000263886 433 18.5706 433 41.4775C433 64.3845 451.571 82.9541 474.478 82.9541H1458C1481.2 82.9541 1500 101.758 1500 124.954V1083.95C1500 1107.15 1481.2 1125.95 1458 1125.95H42C18.804 1125.95 1.15579e-06 1107.15 0 1083.95V107.454C1.06543e-05 94.1347 10.6287 83.2976 23.8672 82.9619L25.1328 82.9463C38.3713 82.6106 49 71.7735 49 58.4541V41.4775C49 18.5704 67.5704 0 90.4775 0H391.523Z");
}
.ac-mask-t {
  clip-path: path("M338.5 0C361.062 0 379.418 18.004 379.986 40.4287L380.014 42.5713C380.582 64.996 398.938 83 421.5 83H1051C1074.2 83 1093 101.804 1093 125V1039C1093 1062.2 1074.2 1081 1051 1081H42C18.804 1081 1.65113e-07 1062.2 0 1039V125C0 101.804 18.804 83 42 83H50.5C73.0616 83 91.4181 64.996 91.9863 42.5713L92.0137 40.4287C92.5819 18.004 110.938 2.5371e-07 133.5 0H338.5Z");
}
.ac-mask-p {
  border-radius: calc(25 * var(--u));
}

/* opaque black cards that sit on the textured panel (border/radius inline) */
.ac-card { position: absolute; background: var(--c-black); }
/* tariff-picker rows (bordered black pills; border/radius inline) */
.ac-row  { position: absolute; background: var(--c-black); }

/* outlined pill buttons (ПРОДЛИТЬ ПРОПИСКУ / СМЕНИТЬ СЕРВЕР) — text is
   flex-centered like the marketing buy buttons, so it is NOT a .dm node and
   does not receive the baseline nudge. border/radius/size inline. */
.ac-btn {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-black);
  color: var(--c-text-light);
  font-family: var(--font-heading);
  font-weight: var(--w-bold);
  font-variation-settings: "opsz" 14;
  line-height: normal;
  text-align: center;
}

/* circular Germany flag with white ring */
.ac-flag {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--c-white);
}
.ac-flag > img { width: 100%; height: 100%; object-fit: cover; }

/* soft glow layer behind the VPN-bulb illustration */
.ac-glow { filter: blur(34.5px); }

/* ============================================================
   PHONE / MOBILE (Figma 858:982 "Phone Личный кабинет" — 493 x 1207)
   Fluid 1:1: every coordinate expressed in the design-pixel unit
        --u = canvas-width / 493
   via inline custom props on .pp nodes:
        --l left, --t top, --w width, --h height, --fs font-size
   ============================================================ */
.bp-p img { max-width: none; }
.bp-p .pp {
  position: absolute;
  left: calc(var(--l, 0) * var(--u));
  top:  calc(var(--t, 0) * var(--u));
  font-size: calc(var(--fs, 16) * var(--u));
}
.bp-p .pp-b {
  width:  calc(var(--w, 0) * var(--u));
  height: calc(var(--h, 0) * var(--u));
}
/* scale glow blur with --u on phone so the halo stays proportional */
.bp-p .ac-glow { filter: blur(calc(34.5 * var(--u))); }