@layer reset, base, background, components, responsive;

@layer reset {
  html {
    min-block-size: 100%;
    box-sizing: border-box;
  }

  body {
    min-block-size: 100%;
    margin: 0;
  }

  body,
  main,
  header,
  nav,
  section,
  article,
  div,
  form,
  a,
  button,
  input,
  p,
  h1,
  h2,
  h3,
  span,
  strong,
  small,
  em,
  img {
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  button,
  input {
    font: inherit;
  }

  button {
    border: 0;
  }

  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }
}

@layer base {
  :root {
    color-scheme: dark;
    accent-color: #67e8f9;
    --bg: #020305;
    --bg-soft: #07101a;
    --glass: rgb(0 0 0 / 40%);
    --glass-2: rgb(255 255 255 / 6%);
    --glass-3: rgb(255 255 255 / 10%);
    --line: rgb(255 255 255 / 10%);
    --line-strong: rgb(255 255 255 / 22%);
    --text: #f8fafc;
    --soft: #cbd5e1;
    --muted: #8b98a9;
    --dim: #5f6b7c;
    --cyan: #67e8f9;
    --sky: #38bdf8;
    --telegram: #2aabee;
    --green: #6ee7b7;
    --amber: #fde68a;
    --red: #fca5a5;
    --radius: 28px;
    --content: min(1280px, calc(100% - 48px));
  }

  body {
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  body > main {
    position: relative;
    z-index: 1;
  }

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

  :focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
  }
}

@layer background {
  .antigravity-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    opacity: 0.96;
    background:
      linear-gradient(135deg, rgb(2 6 12), rgb(1 3 7) 52%, rgb(0 1 3)),
      #020305;
  }

  .concept-app {
    position: relative;
    min-block-size: 100dvh;
    max-inline-size: 100vw;
    overflow: hidden;
    isolation: isolate;
    background:
      linear-gradient(115deg, rgb(4 12 24 / 72%) 0%, rgb(3 5 10 / 18%) 42%, rgb(0 0 0 / 78%) 100%),
      radial-gradient(ellipse at calc(50% + var(--cursor-x, 0px)) calc(42% + var(--cursor-y, 0px)), rgb(29 78 216 / 14%), transparent 34rem),
      linear-gradient(180deg, rgb(0 0 0 / 52%) 0%, rgb(3 12 22 / 18%) 48%, rgb(0 0 0 / 80%) 100%);
  }

  .concept-app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(112deg, transparent 0 28%, rgb(255 255 255 / 5%) 36%, transparent 48%),
      linear-gradient(292deg, transparent 0 54%, rgb(45 212 191 / 8%) 62%, transparent 74%);
    mix-blend-mode: screen;
    opacity: 0.26;
    transform: translate3d(calc(var(--cursor-bg-x, 0px) * -0.4), calc(var(--cursor-bg-y, 0px) * -0.4), 0);
  }

  .concept-app::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 4%) 0%, transparent 34%, rgb(0 0 0 / 56%) 100%),
      repeating-linear-gradient(90deg, transparent 0 179px, rgb(255 255 255 / 2.8%) 180px),
      repeating-linear-gradient(0deg, transparent 0 139px, rgb(255 255 255 / 2.4%) 140px);
    opacity: 0.28;
  }

  .network-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.18;
    mix-blend-mode: screen;
    transform: translate3d(var(--cursor-bg-x, 0px), calc(var(--parallax-y, 0px) + var(--cursor-bg-y, 0px)), 0) scale(var(--parallax-scale, 1));
    will-change: transform, background-position;
    background:
      linear-gradient(120deg, transparent, rgb(103 232 249 / 6%), transparent 58%),
      url("/static/lumonet-network.png") center calc(50% + var(--parallax-bg-y, 0px)) / min(1480px, 112vw) auto no-repeat;
  }

  .network-bg::before,
  .network-bg::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    background: linear-gradient(90deg, transparent, rgb(103 232 249 / 8%), rgb(139 92 246 / 5%), transparent);
    block-size: 1px;
    box-shadow: 0 0 38px rgb(34 211 238 / 16%);
  }

  .network-bg::before {
    inset-block-start: 62%;
  }

  .network-bg::after {
    inset-block-start: 39%;
    opacity: 0.34;
  }

  .net-ring {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: spin-slow 42s linear infinite;
  }

  .net-ring-one {
    inline-size: 58rem;
    block-size: 58rem;
  }

  .net-ring-two {
    inline-size: 36rem;
    block-size: 36rem;
    border-color: rgb(103 232 249 / 8%);
    animation-duration: 34s;
    animation-direction: reverse;
  }

  .net-line {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 72rem;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, rgb(103 232 249 / 8%), transparent);
    transform-origin: center;
  }

  .net-line-one {
    transform: translate(-50%, -50%) rotate(12deg);
  }

  .net-line-two {
    transform: translate(-50%, -50%) rotate(-24deg);
  }

  .net-line-three {
    transform: translate(-50%, -50%) rotate(38deg);
  }

  .net-node {
    position: absolute;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: rgb(225 250 255 / 72%);
    box-shadow: 0 0 22px rgb(103 232 249 / 34%);
    animation: node-pulse 4.8s ease-in-out infinite;
  }

  .net-node-a { inset-inline-start: 22%; inset-block-start: 30%; }
  .net-node-b { inset-inline-start: 38%; inset-block-start: 48%; }
  .net-node-c { inset-inline-start: 52%; inset-block-start: 28%; }
  .net-node-d { inset-inline-start: 66%; inset-block-start: 53%; }
  .net-node-e { inset-inline-start: 78%; inset-block-start: 35%; }
  .net-node-f { inset-inline-start: 46%; inset-block-start: 70%; }

  @keyframes spin-slow {
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes node-pulse {
    0%,
    100% {
      opacity: 0.35;
      transform: scale(0.86);
    }

    50% {
      opacity: 0.9;
      transform: scale(1.45);
    }
  }

  @keyframes network-parallax {
    from {
      transform: translate3d(0, -36px, 0) scale(1.03);
      background-position: center calc(50% - 34px);
    }

    to {
      transform: translate3d(0, 72px, 0) scale(1.08);
      background-position: center calc(50% + 86px);
    }
  }

  @supports (animation-timeline: scroll()) {
    .network-bg {
      animation: network-parallax linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@layer components {
  .glass-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px max(24px, calc((100vw - 1280px) / 2 + 24px));
    border-block-end: 1px solid var(--line);
    background: rgb(0 0 0 / 55%);
    backdrop-filter: blur(22px);
  }

  .brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-block-size: 44px;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  :is(.shield-mark, .telegram-mark, .globe-mark, .card-icon, .modal-title-icon, .device-card-icon, .device-icon, .button-symbol) {
    display: none !important;
  }

  .shield-mark,
  .telegram-mark,
  .globe-mark {
    display: inline-grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 5%);
  }

  .shield-mark {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
  }

  .shield-mark::before {
    content: "";
    inline-size: 18px;
    block-size: 22px;
    background: currentColor;
    color: white;
    clip-path: polygon(50% 0, 88% 14%, 78% 72%, 50% 100%, 22% 72%, 12% 14%);
  }

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

  .soft-chip,
  .solid-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 42px;
    padding-inline: 20px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 700;
  }

  .soft-chip {
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 5%);
    color: #e5e7eb;
  }

  .soft-chip:hover {
    background: rgb(255 255 255 / 10%);
    color: white;
  }

  .solid-chip {
    background: white;
    color: black;
  }

  .concept-main,
  .dashboard-main,
  .auth-main {
    position: relative;
    z-index: 1;
  }

  .mega-hero {
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    padding: 136px 24px 96px;
    text-align: center;
  }

  .hero-inner {
    display: grid;
    justify-items: center;
    gap: 34px;
    inline-size: min(100%, 1040px);
    min-inline-size: 0;
  }

  .hero-inner h1 {
    font-size: 11rem;
    line-height: 0.9;
    font-weight: 950;
    letter-spacing: 0;
    color: #f4f4f5;
    text-transform: lowercase;
    overflow-wrap: anywhere;
    text-wrap: balance;
    max-inline-size: 100%;
  }

  .hero-inner p {
    inline-size: 100%;
    max-inline-size: 760px;
    color: #aeb6c4;
    font-size: 1.45rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    max-inline-size: 100%;
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 54px;
    max-inline-size: 100%;
    padding-inline: 26px;
    border: 1px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }

  .button:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .button:disabled {
    cursor: wait;
    opacity: 0.7;
  }

  .button-white {
    background: white;
    color: black;
  }

  .button-white:hover:not(:disabled) {
    background: #e5e7eb;
  }

  .button-ghost {
    border-color: var(--line-strong);
    background: rgb(255 255 255 / 5%);
    color: white;
  }

  .button-ghost:hover:not(:disabled) {
    background: rgb(255 255 255 / 11%);
  }

  .button-symbol {
    font-size: 1.1em;
    line-height: 1;
  }

  .button-black,
  .button-dark {
    border-color: var(--line-strong);
    background: rgb(0 0 0 / 40%);
    color: white;
    backdrop-filter: blur(10px);
  }

  .button-black {
    background: black;
  }

  .button-dark:hover:not(:disabled),
  .button-black:hover:not(:disabled) {
    background: rgb(255 255 255 / 10%);
  }

  .featured-price .button-black:hover:not(:disabled) {
    background: #18181b;
  }

  .button-telegram {
    background: var(--telegram);
    color: white;
    box-shadow: 0 18px 40px rgb(42 171 238 / 22%);
  }

  .button-danger {
    border-color: rgb(252 165 165 / 28%);
    background: rgb(127 29 29 / 30%);
    color: #fecaca;
  }

  .button-danger:hover:not(:disabled) {
    border-color: rgb(252 165 165 / 42%);
    background: rgb(127 29 29 / 42%);
  }

  .button-small {
    min-block-size: 44px;
    padding-inline: 18px;
    border-radius: 14px;
    font-size: 0.95rem;
  }

  .inline-delete-form {
    display: grid;
    justify-self: stretch;
    inline-size: 100%;
    margin-block-start: 4px;
  }

  .inline-delete-form .button {
    inline-size: 100%;
  }

  .pricing-section {
    inline-size: var(--content);
    margin-inline: auto;
    padding-block: 76px 110px;
  }

  .section-copy {
    display: grid;
    gap: 12px;
    max-inline-size: 720px;
    min-inline-size: 0;
    margin-block-end: 34px;
  }

  .center-copy {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .section-kicker {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .section-copy h2 {
    inline-size: 100%;
    max-inline-size: 100%;
    font-size: 3.1rem;
    line-height: 1.05;
    font-weight: 850;
    overflow-wrap: anywhere;
  }

  .section-copy p {
    inline-size: 100%;
    max-inline-size: 100%;
    color: #9aa5b5;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .site-footer {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    inline-size: var(--content);
    margin: 0 auto;
    padding: 0 0 42px;
  }

  .legal-link-button,
  .legal-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 40px;
    padding-inline: 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgb(255 255 255 / 5%);
    color: #e5e7eb;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
  }

  .legal-link-button:hover,
  .legal-back:hover {
    border-color: rgb(255 255 255 / 24%);
    background: rgb(255 255 255 / 10%);
    color: white;
  }

  .legal-dialog-panel {
    gap: 18px;
  }

  .legal-frame {
    inline-size: 100%;
    block-size: min(72dvh, 760px);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 20px;
    background: #020305;
  }

  .legal-main {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 28px;
    inline-size: var(--content);
    margin-inline: auto;
    padding-block: 132px 58px;
  }

  .legal-main .site-footer {
    inline-size: 100%;
  }

  .legal-article {
    display: grid;
    gap: 18px;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid var(--line);
    border-radius: 32px;
    background:
      linear-gradient(135deg, rgb(255 255 255 / 6%), transparent 46%),
      rgb(3 5 9 / 84%);
    color: #d1d5db;
    backdrop-filter: blur(12px);
  }

  .legal-article h1 {
    color: white;
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    line-height: 0.96;
    overflow-wrap: anywhere;
  }

  .legal-article h2 {
    margin-block-start: 12px;
    color: white;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.15;
  }

  .legal-article p,
  .legal-article li {
    max-inline-size: 980px;
    color: #b2bbc9;
    font-size: 1.03rem;
  }

  .legal-article ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-inline-start: 22px;
  }

  .legal-lead {
    color: #dce7f5 !important;
    font-size: 1.12rem !important;
  }

  .legal-back {
    justify-self: start;
  }

  .price-column {
    position: relative;
    display: grid;
    align-content: start;
    gap: 20px;
    min-inline-size: 0;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgb(255 255 255 / 4%);
    color: white;
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
    animation: surface-rise 680ms ease both;
    contain: layout style paint;
  }

  .featured-price {
    border-color: rgb(255 255 255 / 32%);
    background: white;
    color: black;
  }

  .popular-label {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-end: 20px;
    display: inline-flex;
    align-items: center;
    min-block-size: 28px;
    padding-inline: 12px;
    border-radius: 999px;
    background: black;
    color: white;
    font-size: 0.76rem;
    font-weight: 800;
  }

  .price-column h3 {
    padding-inline-end: 94px;
    font-size: 1.35rem;
  }

  .price-column p {
    color: rgb(203 213 225 / 78%);
  }

  .featured-price p,
  .featured-price small {
    color: #52525b;
  }

  .plan-list,
  .plan-form {
    display: grid;
    gap: 10px;
  }

  .plan-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 12px;
    align-items: center;
    inline-size: 100%;
    min-block-size: 72px;
    padding: 14px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 18px;
    background: rgb(0 0 0 / 22%);
    color: inherit;
    text-align: start;
  }

  .featured-price .plan-line {
    border-color: rgb(0 0 0 / 10%);
    background: rgb(0 0 0 / 4%);
  }

  .plan-line:hover {
    border-color: rgb(103 232 249 / 42%);
  }

  .plan-line span {
    display: grid;
    gap: 3px;
    min-inline-size: 0;
  }

  .plan-line strong {
    overflow-wrap: anywhere;
  }

  .plan-line small {
    color: #8b98a9;
  }

  .plan-line b {
    white-space: nowrap;
  }

  .plan-button {
    cursor: pointer;
  }

  .dashboard-main {
    inline-size: var(--content);
    margin-inline: auto;
    padding-block: 44px 80px;
  }

  .dashboard-title {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-block-end: 30px;
    text-align: center;
  }

  .globe-mark {
    position: relative;
    inline-size: 54px;
    block-size: 54px;
    border-radius: 50%;
  }

  .globe-mark::before,
  .globe-mark::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: white;
  }

  .globe-mark::after {
    inset-inline: 20px;
  }

  .dashboard-title h1 {
    font-size: 4.7rem;
    line-height: 0.96;
    font-weight: 900;
    text-transform: lowercase;
  }

  .dashboard-title p {
    color: var(--muted);
  }

  .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr);
    gap: 28px;
  }

  .hero-card,
  .date-card,
  .metric-tile,
  .action-card,
  .payments-section,
  .auth-card,
  .order-card {
    border: 1px solid var(--line);
    border-radius: 32px;
    background: rgb(0 0 0 / 35%);
    box-shadow: 0 28px 70px rgb(0 0 0 / 20%);
    backdrop-filter: blur(12px);
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
    animation: surface-rise 680ms ease both;
    contain: layout style paint;
  }

  .hero-card:hover,
  .date-card:hover,
  .metric-button:hover,
  .action-card:hover,
  .price-column:hover,
  .proxy-card:hover,
  .payment-card:hover,
  .device-card:hover,
  .family-member-card:hover,
  .family-slot-card:hover,
  .device-slot-card:hover,
  .support-row:hover {
    transform: translateY(-3px);
    border-color: rgb(59 130 246 / 46%);
    box-shadow:
      0 28px 90px rgb(0 0 0 / 32%),
      0 0 44px rgb(37 99 235 / 12%);
  }

  @keyframes surface-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-card {
    display: grid;
    align-content: center;
    gap: 30px;
    min-block-size: 360px;
    padding: 36px;
  }

  .pill-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: fit-content;
    min-block-size: 34px;
    padding-inline: 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #d1d5db;
    font-size: 0.86rem;
    font-weight: 800;
    font-style: normal;
  }

  .status-active,
  .status-approved {
    border-color: rgb(110 231 183 / 20%);
    background: rgb(110 231 183 / 12%);
    color: var(--green);
  }

  .status-info {
    border-color: rgb(56 189 248 / 20%);
    background: rgb(56 189 248 / 12%);
    color: #bae6fd;
  }

  .status-user {
    border-color: rgb(255 255 255 / 12%);
    background: rgb(255 255 255 / 5%);
    color: #d4d4d8;
  }

  .status-pending {
    border-color: rgb(253 230 138 / 25%);
    background: rgb(253 230 138 / 12%);
    color: var(--amber);
  }

  .status-rejected {
    border-color: rgb(252 165 165 / 25%);
    background: rgb(252 165 165 / 12%);
    color: var(--red);
  }

  .status-muted {
    color: var(--muted);
  }

  .hero-card h2 {
    max-inline-size: 760px;
    font-size: 4rem;
    line-height: 1.02;
    font-weight: 900;
    text-wrap: balance;
  }

  .dashboard-side,
  .mini-grid {
    display: grid;
    gap: 16px;
  }

  .date-card {
    display: grid;
    gap: 12px;
    align-content: center;
    min-block-size: 190px;
    padding: 26px;
  }

  .date-card span,
  .date-card small,
  .metric-tile span,
  .action-card p,
  .key-text,
  .empty-state {
    color: #9ca3af;
  }

  .date-card strong {
    font-size: 2.5rem;
    line-height: 1.05;
  }

  .mini-grid {
    grid-template-columns: 0.72fr 1.28fr;
  }

  .metric-tile {
    display: grid;
    align-content: center;
    gap: 4px;
    min-block-size: 150px;
    padding: 26px;
  }

  .metric-tile strong {
    font-size: 2.4rem;
    line-height: 1;
  }

  .cabinet-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-block-start: 28px;
  }

  .cabinet-actions > :nth-child(1) { animation-delay: 40ms; }
  .cabinet-actions > :nth-child(2) { animation-delay: 80ms; }
  .cabinet-actions > :nth-child(3) { animation-delay: 120ms; }
  .cabinet-actions > :nth-child(4) { animation-delay: 160ms; }
  .cabinet-actions > :nth-child(5) { animation-delay: 200ms; }
  .cabinet-actions > :nth-child(6) { animation-delay: 240ms; }
  .cabinet-actions > :nth-child(7) { animation-delay: 280ms; }
  .cabinet-actions > :nth-child(8) { animation-delay: 320ms; }
  .cabinet-actions > :nth-child(9) { animation-delay: 360ms; }

  .action-card {
    display: grid;
    gap: 18px;
    align-content: center;
    min-block-size: 220px;
    padding: 30px;
    color: inherit;
    text-align: start;
  }

  .action-card:hover {
    background: rgb(255 255 255 / 5%);
  }

  .action-wide {
    grid-column: span 2;
  }

  .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: fit-content;
    min-block-size: 32px;
    padding-inline: 10px;
    border-radius: 999px;
    background: rgb(103 232 249 / 10%);
    color: #cffafe;
    font-size: 0.74rem;
    font-weight: 900;
  }

  .action-card h3 {
    font-size: 1.3rem;
  }

  .key-text {
    overflow-wrap: anywhere;
  }

  .qr-action {
    justify-items: start;
  }

  .qr-image,
  .qr-placeholder {
    inline-size: 160px;
    block-size: 160px;
    border-radius: 18px;
  }

  .qr-image {
    padding: 8px;
    background: white;
  }

  .qr-placeholder {
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background:
      linear-gradient(90deg, rgb(255 255 255 / 18%) 10px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(rgb(255 255 255 / 18%) 10px, transparent 1px) 0 0 / 32px 32px,
      rgb(255 255 255 / 5%);
  }

  .qr-placeholder::before {
    content: "QR";
    color: var(--muted);
    font-weight: 900;
  }

  .dashboard-pricing {
    padding-block-end: 52px;
  }

  .payments-section {
    display: grid;
    gap: 18px;
    margin-block-start: 20px;
    padding: 26px;
  }

  .devices-section {
    display: grid;
    gap: 18px;
    margin-block-start: 28px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 32px;
    background: rgb(0 0 0 / 35%);
    box-shadow: 0 28px 70px rgb(0 0 0 / 20%);
    backdrop-filter: blur(12px);
  }

  .device-list {
    display: grid;
    gap: 12px;
  }

  .device-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) minmax(220px, 0.56fr);
    gap: 16px;
    align-items: center;
    min-block-size: 92px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgb(255 255 255 / 4%);
  }

  .device-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 48px;
    block-size: 48px;
    border: 1px solid rgb(103 232 249 / 28%);
    border-radius: 16px;
    background: rgb(103 232 249 / 10%);
    color: #cffafe;
    font-weight: 900;
  }

  .device-main {
    display: grid;
    gap: 4px;
    min-inline-size: 0;
  }

  .device-main h3 {
    overflow-wrap: anywhere;
    font-size: 1.08rem;
  }

  .device-main p,
  .device-seen span,
  .devices-empty p {
    color: #9ca3af;
  }

  .device-main p {
    overflow-wrap: anywhere;
  }

  .device-seen {
    display: grid;
    gap: 4px;
    justify-items: end;
    text-align: end;
  }

  .device-seen strong {
    color: white;
    font-size: 0.95rem;
  }

  .devices-empty {
    display: grid;
    gap: 10px;
    justify-items: start;
    padding: 22px;
    border: 1px dashed rgb(255 255 255 / 18%);
    border-radius: 22px;
    background: rgb(255 255 255 / 3%);
  }

  .devices-empty h3 {
    font-size: 1.24rem;
  }

  .dashboard-main {
    padding-block: 44px 76px;
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  .hero-card,
  .date-card,
  .metric-tile,
  .action-card,
  .payments-section {
    border-color: rgb(255 255 255 / 13%);
    border-radius: 28px;
    background:
      linear-gradient(135deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1.5%) 42%, rgb(0 0 0 / 48%)),
      rgb(3 5 9 / 76%);
    box-shadow:
      0 26px 70px rgb(0 0 0 / 24%),
      inset 0 1px 0 rgb(255 255 255 / 5%);
    backdrop-filter: blur(10px);
  }

  .hero-card {
    min-block-size: 266px;
    padding: 34px;
    gap: 24px;
  }

  .hero-card h2 {
    max-inline-size: 740px;
    font-size: clamp(3rem, 5.4vw, 5.4rem);
    line-height: 0.96;
  }

  .hero-actions-left {
    justify-content: start;
  }

  .date-card {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    min-block-size: 120px;
    padding: 24px;
  }

  .date-card div {
    display: grid;
    gap: 4px;
    min-inline-size: 0;
  }

  .date-card strong {
    font-size: clamp(2rem, 3vw, 3rem);
    white-space: nowrap;
  }

  .mini-grid {
    grid-template-columns: minmax(132px, 0.62fr) minmax(0, 1.38fr);
    gap: 14px;
  }

  .metric-tile {
    min-block-size: 132px;
    padding: 22px;
    border-radius: 24px;
  }

  .metric-tile strong {
    font-size: clamp(2rem, 3.1vw, 3.1rem);
  }

  .metric-button {
    inline-size: 100%;
    color: inherit;
    text-align: start;
    cursor: pointer;
  }

  .metric-button:hover,
  button.action-card:hover {
    border-color: rgb(255 255 255 / 25%);
    background:
      linear-gradient(135deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%) 42%, rgb(0 0 0 / 44%)),
      rgb(5 5 6 / 92%);
  }

  .traffic-tile {
    align-content: center;
    gap: 8px;
  }

  .traffic-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    min-inline-size: 0;
  }

  .traffic-heading strong {
    overflow-wrap: anywhere;
  }

  .traffic-tile small {
    color: #9ca3af;
    font-size: 1rem;
  }

  .traffic-bar {
    display: block;
    overflow: hidden;
    inline-size: 100%;
    block-size: 9px;
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
  }

  .traffic-bar i {
    display: block;
    inline-size: var(--traffic-width, 0%);
    max-inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    background: white;
  }

  .cabinet-actions {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin-block-start: 22px;
  }

  .action-card {
    min-block-size: 160px;
    padding: 26px;
    border-radius: 24px;
  }

  button.action-card {
    inline-size: 100%;
    color: inherit;
    cursor: pointer;
  }

  .action-third {
    grid-column: span 4;
  }

  .action-quarter,
  .logout-card-form {
    grid-column: span 3;
  }

  .logout-card-form {
    display: block;
    min-inline-size: 0;
  }

  .logout-card-form .action-card {
    block-size: 100%;
  }

  .danger-action {
    border-color: rgb(248 113 113 / 26%);
    background:
      linear-gradient(135deg, rgb(248 113 113 / 12%), rgb(0 0 0 / 48%)),
      rgb(14 4 6 / 92%);
  }

  .danger-action h3 {
    color: #fecaca;
  }

  .modal-sheet {
    inline-size: min(720px, calc(100vw - 32px));
    max-block-size: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    overflow: visible;
  }

  .modal-sheet:focus,
  .modal-sheet:focus-visible {
    outline: none;
  }

  .modal-sheet-wide {
    inline-size: min(1120px, calc(100vw - 32px));
  }

  .modal-sheet::backdrop {
    background: rgb(0 0 0 / 72%);
    backdrop-filter: blur(8px);
  }

  .modal-sheet[open]::backdrop {
    animation: backdrop-in 180ms ease both;
  }

  .modal-panel {
    display: grid;
    gap: 18px;
    max-block-size: calc(100dvh - 32px);
    padding: 26px;
    overflow: auto;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 28px;
    background:
      linear-gradient(135deg, rgb(255 255 255 / 6%), transparent 44%),
      rgb(5 6 8 / 94%);
    box-shadow: 0 30px 90px rgb(0 0 0 / 62%);
  }

  .modal-sheet[open] .modal-panel {
    animation: modal-pop 220ms ease both;
  }

  .modal-panel-wide {
    inline-size: min(1120px, calc(100vw - 32px));
  }

  .modal-sheet-devices,
  .modal-sheet-devices .modal-panel-wide {
    inline-size: min(1600px, calc(100vw - 32px));
  }

  .modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
  }

  .modal-head div {
    display: grid;
    gap: 8px;
    min-inline-size: 0;
  }

  .modal-head h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .modal-head-large h2 {
    font-size: clamp(3rem, 7vw, 5.6rem);
    letter-spacing: 0;
  }

  .modal-head-icon {
    align-items: center;
    justify-content: space-between;
    padding-block-end: 18px;
    border-block-end: 1px solid rgb(255 255 255 / 10%);
  }

  .modal-head-icon .icon-button {
    margin-inline-start: auto;
  }

  .modal-title-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 62px;
    block-size: 62px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    color: white;
    font-size: 2.5rem;
    line-height: 1;
  }

  .icon-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background: white;
    color: black;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
  }

  .modal-pricing {
    inline-size: 100%;
  }

  .modal-empty {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 20px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 22px;
    background: rgb(255 255 255 / 4%);
  }

  .modal-empty h3 {
    font-size: 1.2rem;
  }

  .modal-empty p,
  .copy-panel label,
  .promo-form label,
  .stat-grid span {
    color: #9ca3af;
  }

  .copy-panel,
  .promo-form {
    display: grid;
    gap: 10px;
  }

  .discount-panel {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 18px;
    background: rgb(255 255 255 / 4%);
  }

  .discount-panel label {
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 800;
  }

  .discount-panel input {
    inline-size: 100%;
    min-block-size: 48px;
    padding-inline: 14px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 14px;
    background: rgb(0 0 0 / 22%);
    color: white;
    outline: none;
  }

  .discount-panel input:focus {
    border-color: rgb(255 255 255 / 32%);
  }

  .copy-panel label,
  .promo-form label {
    font-size: 0.9rem;
    font-weight: 750;
  }

  .copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px;
    align-items: center;
  }

  .copy-row input,
  .promo-form input {
    inline-size: 100%;
    min-block-size: 54px;
    padding-inline: 16px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 16px;
    background: rgb(255 255 255 / 5%);
    color: white;
    outline: none;
  }

  .copy-row input:focus,
  .promo-form input:focus {
    border-color: rgb(255 255 255 / 32%);
  }

  .promo-form {
    padding: 20px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 22px;
    background: rgb(255 255 255 / 4%);
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .stat-grid article {
    display: grid;
    gap: 6px;
    min-block-size: 112px;
    align-content: center;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 20px;
    background: rgb(255 255 255 / 4%);
  }

  .stat-grid strong {
    color: white;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .referral-admin-panel {
    gap: 18px;
  }

  .admin-referral-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr) max-content;
    gap: 10px 12px;
    align-items: end;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 20px;
    background: rgb(255 255 255 / 4%);
  }

  .admin-referral-form label {
    display: block;
    margin-block-end: 8px;
    color: #9ca3af;
    font-size: 0.86rem;
    font-weight: 800;
  }

  .admin-referral-form input {
    inline-size: 100%;
    min-block-size: 48px;
    padding-inline: 14px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 14px;
    background: rgb(0 0 0 / 24%);
    color: white;
    outline: none;
  }

  .period-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .period-tabs a {
    min-block-size: 40px;
    padding: 10px 16px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 999px;
    background: rgb(255 255 255 / 5%);
    color: #d1d5db;
    font-weight: 850;
  }

  .period-tabs a.is-active {
    background: white;
    color: black;
  }

  .referral-table-wrap {
    overflow-x: auto;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 20px;
  }

  .referral-table {
    inline-size: 100%;
    min-inline-size: 1040px;
    border-collapse: collapse;
  }

  .referral-table caption {
    padding: 14px 16px;
    color: #9ca3af;
    text-align: start;
    font-weight: 850;
  }

  .referral-table th,
  .referral-table td {
    padding: 14px 16px;
    border-block-start: 1px solid rgb(255 255 255 / 10%);
    color: #d1d5db;
    text-align: start;
    vertical-align: middle;
  }

  .referral-table th {
    color: #8f98a8;
    font-size: 0.86rem;
    text-transform: uppercase;
  }

  .referral-table code {
    color: white;
    font-family: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 850;
  }

  .payout-inline-form {
    display: grid;
    grid-template-columns: minmax(78px, 1fr) max-content;
    gap: 8px;
    align-items: end;
    min-inline-size: 190px;
  }

  .payout-inline-form label {
    grid-column: 1 / -1;
    color: #9ca3af;
    font-size: 0.78rem;
    font-weight: 850;
  }

  .payout-inline-form input {
    min-block-size: 38px;
    inline-size: 100%;
    padding-inline: 10px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 12px;
    background: rgb(0 0 0 / 28%);
    color: white;
    font: inherit;
    font-size: 1rem;
    outline: none;
  }

  .payout-inline-form input:focus-visible {
    border-color: rgb(255 255 255 / 42%);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 18%);
  }

  .payout-button {
    min-block-size: 38px;
  }

  @media (max-width: 760px) {
    .admin-referral-form {
      grid-template-columns: 1fr;
    }
  }

  .compact-list .device-row {
    min-block-size: 78px;
  }

  .proxy-list {
    display: grid;
    gap: 12px;
  }

  .proxy-panel {
    gap: 26px;
  }

  .proxy-card {
    display: grid;
    gap: 22px;
    min-block-size: 260px;
    padding: 26px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 26px;
    background:
      linear-gradient(135deg, rgb(255 255 255 / 5%), transparent 45%),
      rgb(255 255 255 / 4%);
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
  }

  .proxy-main {
    display: grid;
    gap: 7px;
    min-inline-size: 0;
  }

  .proxy-main h3 {
    font-size: 1.65rem;
  }

  .proxy-main p,
  .proxy-main small {
    color: #9ca3af;
    overflow-wrap: anywhere;
  }

  .proxy-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .proxy-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) 140px minmax(0, 1.5fr);
    gap: 12px;
  }

  .proxy-field {
    display: grid;
    gap: 8px;
    min-inline-size: 0;
    padding: 14px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 18px;
    background: rgb(0 0 0 / 28%);
  }

  .proxy-field span {
    color: #8f98a8;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .proxy-field code {
    min-inline-size: 0;
    color: white;
    font-family: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 850;
    overflow-wrap: anywhere;
  }

  .copy-mini {
    justify-self: start;
    min-block-size: 36px;
    padding-inline: 12px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    color: white;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 800;
  }

  .copy-mini:hover {
    background: rgb(255 255 255 / 12%);
  }

  .family-panel,
  .devices-panel,
  .payments-panel {
    gap: 26px;
  }

  .family-board {
    display: grid;
    grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
  }

  .family-limit-card {
    display: grid;
    align-content: center;
    gap: 18px;
    min-block-size: 250px;
    padding: 26px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 24px;
    background:
      linear-gradient(135deg, rgb(255 255 255 / 4%), transparent 52%),
      rgb(255 255 255 / 3%);
  }

  .family-limit-card > span {
    color: #8f98a8;
    font-size: 0.86rem;
    font-weight: 850;
    text-transform: uppercase;
  }

  .family-limit-card p {
    color: #a1a1aa;
    font-size: 1.08rem;
  }

  .family-members-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 260px);
    gap: 16px;
    overflow-x: auto;
    padding-block-end: 10px;
    scrollbar-color: rgb(255 255 255 / 42%) rgb(255 255 255 / 10%);
  }

  .family-member-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 12px;
    min-block-size: 250px;
    padding: 22px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 24px;
    background: rgb(255 255 255 / 5%);
    text-align: center;
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
  }

  .family-owner-card {
    border-color: rgb(255 255 255 / 22%);
    background:
      radial-gradient(circle at 50% 0, rgb(255 255 255 / 10%), transparent 48%),
      rgb(255 255 255 / 6%);
  }

  .member-avatar {
    display: inline-grid;
    place-items: center;
    inline-size: 68px;
    block-size: 68px;
    border: 2px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    color: white;
    font-size: 1.4rem;
    font-weight: 900;
  }

  .family-member-card h3 {
    max-inline-size: 100%;
    color: white;
    font-size: 1.18rem;
    overflow-wrap: anywhere;
  }

  .family-member-card p,
  .family-member-card small {
    color: #8f98a8;
    overflow-wrap: anywhere;
  }

  .family-copy-panel {
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 22px;
    background: rgb(255 255 255 / 3%);
  }

  .family-expand-card {
    display: grid;
    gap: 20px;
    padding: 26px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 28px;
    background:
      radial-gradient(circle at 80% 0, rgb(255 255 255 / 7%), transparent 35%),
      rgb(255 255 255 / 3%);
  }

  .family-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .family-section-title div {
    display: grid;
    gap: 6px;
    min-inline-size: 0;
  }

  .family-section-title h3 {
    color: white;
    font-size: 1.45rem;
  }

  .family-section-title p {
    color: #a1a1aa;
  }

  .family-rate-note {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 16px;
    background: rgb(255 255 255 / 5%);
    color: #a1a1aa;
    font-weight: 750;
  }

  .family-rate-note b {
    color: #d4d4d8;
  }

  .family-slot-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .family-slot-form {
    display: grid;
  }

  .family-slot-card {
    display: grid;
    gap: 7px;
    min-block-size: 154px;
    padding: 20px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 22px;
    background: rgb(0 0 0 / 25%);
    color: white;
    cursor: pointer;
    text-align: start;
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
  }

  .family-slot-card:hover {
    border-color: rgb(255 255 255 / 26%);
    background: rgb(255 255 255 / 7%);
  }

  .family-slot-card span {
    font-size: 1.18rem;
    font-weight: 900;
  }

  .family-slot-card small,
  .family-slot-card em {
    color: #8f98a8;
    font-style: normal;
    font-weight: 800;
  }

  .family-slot-card strong {
    color: white;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1;
  }

  .family-bottom-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }

  .family-locked {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .support-panel {
    gap: 18px;
  }

  .support-actions {
    display: grid;
    gap: 12px;
  }

  .support-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    inline-size: 100%;
    min-block-size: 92px;
    padding: 16px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 20px;
    background: rgb(255 255 255 / 5%);
    color: white;
    cursor: pointer;
    text-align: start;
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
  }

  .support-row:hover {
    border-color: rgb(255 255 255 / 22%);
    background: rgb(255 255 255 / 8%);
  }

  .support-row div {
    display: grid;
    gap: 5px;
    min-inline-size: 0;
  }

  .support-row h3 {
    font-size: 1.08rem;
    overflow-wrap: anywhere;
  }

  .support-row p {
    color: #9ca3af;
    overflow-wrap: anywhere;
  }

  .devices-board {
    display: flex;
    gap: 16px;
    align-items: stretch;
    overflow-x: auto;
    padding-block-end: 10px;
    scrollbar-color: rgb(255 255 255 / 42%) rgb(255 255 255 / 10%);
    scrollbar-gutter: stable;
    overscroll-behavior-x: contain;
  }

  .device-limit-card {
    flex: 0 0 clamp(320px, 34vw, 390px);
    display: grid;
    align-content: center;
    gap: 16px;
    min-block-size: 264px;
    padding: 24px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 24px;
    background: rgb(255 255 255 / 4%);
  }

  .device-limit-card > span {
    color: #8f98a8;
    font-size: 0.86rem;
    font-weight: 850;
    text-transform: uppercase;
  }

  .device-limit-card p {
    max-inline-size: 360px;
    color: #a1a1aa;
    font-size: 1.1rem;
  }

  .limit-stats,
  .limit-labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .limit-stats strong {
    color: white;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1;
  }

  .limit-labels span {
    color: #a1a1aa;
    font-weight: 750;
  }

  .device-cards-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 250px);
    gap: 16px;
    overflow-x: auto;
    padding-block-end: 10px;
    scrollbar-color: rgb(255 255 255 / 42%) rgb(255 255 255 / 10%);
  }

  .device-card {
    flex: 0 0 clamp(230px, 24vw, 280px);
    display: grid;
    grid-template-rows: minmax(58px, auto) 28px 28px 1fr auto;
    justify-items: center;
    align-items: start;
    align-content: stretch;
    gap: 10px;
    min-block-size: 264px;
    padding: 22px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 24px;
    background: rgb(255 255 255 / 5%);
    text-align: center;
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
  }

  .device-card-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 64px;
    block-size: 64px;
    border: 2px solid rgb(255 255 255 / 16%);
    border-radius: 50%;
    color: #d4d4d8;
    font-size: 2rem;
  }

  .device-card h3 {
    display: -webkit-box;
    min-block-size: 58px;
    max-inline-size: 100%;
    margin: 0;
    color: white;
    font-size: 1.15rem;
    line-height: 1.22;
    text-wrap: balance;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .device-card p,
  .device-card small {
    display: block;
    max-inline-size: 100%;
    min-block-size: 24px;
    margin: 0;
    color: #8f98a8;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .device-card p {
    font-size: 1.02rem;
  }

  .device-card small {
    font-size: 0.92rem;
  }

  .device-card .inline-delete-form {
    align-self: end;
    margin-block-start: 0;
  }

  .device-empty-card {
    flex: 0 0 clamp(280px, 30vw, 360px);
    min-block-size: 264px;
  }

  .device-expand-card {
    display: grid;
    gap: 20px;
    padding: 26px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 28px;
    background:
      radial-gradient(circle at 80% 0, rgb(59 130 246 / 10%), transparent 35%),
      rgb(255 255 255 / 3%);
  }

  .device-section-title {
    display: grid;
    gap: 8px;
  }

  .device-section-title h3 {
    color: white;
    font-size: 1.45rem;
  }

  .device-section-title p {
    color: #a1a1aa;
  }

  .device-rate-note {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 16px;
    background: rgb(255 255 255 / 5%);
    color: #a1a1aa;
    font-weight: 750;
  }

  .device-rate-note b {
    color: #d4d4d8;
  }

  .device-slot-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .device-slot-form {
    display: grid;
  }

  .device-slot-card {
    display: grid;
    gap: 7px;
    min-block-size: 154px;
    padding: 20px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 22px;
    background: rgb(0 0 0 / 25%);
    color: white;
    cursor: pointer;
    text-align: start;
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
  }

  .device-slot-card:hover {
    border-color: rgb(255 255 255 / 26%);
    background: rgb(255 255 255 / 7%);
  }

  .device-slot-card span {
    font-size: 1.18rem;
    font-weight: 900;
  }

  .device-slot-card small,
  .device-slot-card em {
    color: #8f98a8;
    font-style: normal;
    font-weight: 800;
  }

  .device-slot-card strong {
    color: white;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1;
  }

  .payment-cards {
    display: grid;
    gap: 12px;
  }

  .payment-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) max-content;
    gap: 18px;
    align-items: center;
    min-block-size: 112px;
    padding: 20px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 18px;
    background: rgb(255 255 255 / 5%);
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
  }

  @keyframes backdrop-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes modal-pop {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.985);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .payment-card:hover {
    border-color: rgb(255 255 255 / 22%);
    background: rgb(255 255 255 / 8%);
  }

  .payment-card time {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding-inline-end: 18px;
    border-inline-end: 1px solid rgb(255 255 255 / 14%);
    color: #8f98a8;
    text-align: center;
  }

  .payment-card time strong {
    color: white;
    font-size: 1.5rem;
    line-height: 1;
  }

  .payment-card time span,
  .payment-card time small {
    color: #7e858f;
    font-size: 0.95rem;
  }

  .payment-card div {
    display: grid;
    gap: 6px;
    min-inline-size: 0;
  }

  .payment-card h3 {
    color: white;
    font-size: 1.25rem;
    overflow-wrap: anywhere;
  }

  .payment-card p,
  .payment-status {
    color: var(--green);
    font-weight: 850;
  }

  .payment-card b {
    color: white;
    font-size: 1.45rem;
    white-space: nowrap;
  }

  .payment-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  .payment-head,
  .payment-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.9fr) minmax(0, 1.2fr) max-content max-content;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
  }

  .payment-head {
    background: rgb(255 255 255 / 4%);
    color: var(--muted);
    font-size: 0.9rem;
  }

  .payment-row {
    border-block-start: 1px solid var(--line);
    color: #d1d5db;
  }

  .payment-row:hover {
    background: rgb(255 255 255 / 5%);
  }

  .payment-row em {
    color: white;
    font-style: normal;
    font-weight: 800;
  }

  .logout-line {
    display: flex;
    justify-content: center;
    margin-block-start: 26px;
  }

  .auth-main {
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    padding: 120px 24px 70px;
  }

  .auth-card,
  .order-card {
    display: grid;
    justify-items: center;
    gap: 20px;
    inline-size: min(100%, 780px);
    padding: 40px;
    text-align: center;
  }

  .telegram-mark {
    inline-size: 64px;
    block-size: 64px;
    border-radius: 18px;
    background: rgb(42 171 238 / 14%);
    color: #bae6fd;
  }

  .telegram-mark::before {
    content: "";
    inline-size: 28px;
    block-size: 28px;
    background: currentColor;
    clip-path: polygon(0 46%, 100% 4%, 74% 96%, 46% 62%, 24% 82%, 32% 58%);
  }

  .auth-card h1,
  .order-card h1 {
    font-size: 3rem;
    line-height: 1.05;
    font-weight: 850;
  }

  .auth-card p,
  .order-card p {
    max-inline-size: 620px;
    color: #cbd5e1;
    font-size: 1.08rem;
  }

  .telegram-auth-slot {
    display: grid;
    place-items: center;
    gap: 12px;
    min-inline-size: 240px;
    min-block-size: 60px;
    overflow: visible;
  }

  .telegram-login-button {
    min-inline-size: min(100%, 320px);
    min-block-size: 58px;
    border-radius: 999px;
    font-size: 1rem;
  }

  .bot-login-status {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.95rem;
  }

  .telegram-bot-fallback {
    color: #93c5fd;
    font-weight: 800;
  }

  .telegram-widget-slot {
    display: grid;
    place-items: center;
    min-block-size: 44px;
    max-inline-size: 100%;
  }

  .telegram-widget-slot iframe {
    display: block;
    max-inline-size: 100%;
  }

  .order-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    inline-size: 100%;
  }

  .order-facts div {
    display: grid;
    gap: 5px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgb(255 255 255 / 4%);
    text-align: start;
  }

  .order-facts span {
    color: var(--muted);
    font-size: 0.88rem;
  }

  .flash-stack,
  .flash {
    inline-size: var(--content);
    margin-inline: auto;
  }

  .flash-stack {
    position: relative;
    z-index: 30;
    display: grid;
    gap: 10px;
    margin-block-start: 88px;
  }

  .dashboard-main > .flash {
    inline-size: 100%;
    margin-block-end: 20px;
  }

  .flash {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgb(0 0 0 / 72%);
    color: white;
    backdrop-filter: blur(12px);
  }

  .flash-error {
    border-color: rgb(252 165 165 / 28%);
  }

  .flash-success {
    border-color: rgb(110 231 183 / 28%);
  }
}

@layer responsive {
  @media (max-width: 1100px) {
    :root {
      --content: min(1280px, calc(100% - 32px));
    }

    .hero-inner h1 {
      font-size: 7rem;
    }

    .pricing-grid,
    .dashboard-grid,
    .cabinet-actions {
      grid-template-columns: 1fr;
    }

    .cabinet-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .action-third,
    .action-quarter,
    .logout-card-form {
      grid-column: auto;
    }

    .action-wide {
      grid-column: auto;
    }

    .mini-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 720px) {
    :root {
      --content: min(440px, calc(100% - 20px));
    }

    body {
      font-size: 0.96rem;
    }

    .antigravity-bg {
      opacity: 0.88;
    }

    .concept-app {
      background:
        linear-gradient(145deg, rgb(5 13 26 / 68%) 0%, rgb(0 0 0 / 30%) 48%, rgb(0 0 0 / 76%) 100%),
        radial-gradient(ellipse at calc(50% + var(--cursor-x, 0px)) calc(30% + var(--cursor-y, 0px)), rgb(37 99 235 / 22%), transparent 24rem),
        #020305;
    }

    .concept-app::before {
      opacity: 0.16;
    }

    .concept-app::after {
      opacity: 0.18;
      background:
        linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 52%) 100%),
        repeating-linear-gradient(90deg, transparent 0 119px, rgb(255 255 255 / 2%) 120px),
        repeating-linear-gradient(0deg, transparent 0 119px, rgb(255 255 255 / 1.8%) 120px);
    }

    .glass-header {
      position: relative;
      flex-direction: column;
      align-items: stretch;
      inline-size: var(--content);
      margin-inline: auto;
      margin-block-start: 10px;
      padding: 12px;
      border: 1px solid rgb(255 255 255 / 12%);
      border-radius: 20px;
      background: rgb(0 0 0 / 62%);
    }

    .header-actions {
      display: grid;
      grid-template-columns: 1fr;
      inline-size: 100%;
    }

    .soft-chip,
    .solid-chip {
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }

    .mega-hero {
      min-block-size: auto;
      padding-block: 48px 54px;
    }

    .hero-inner {
      gap: 24px;
    }

    .hero-inner h1 {
      font-size: clamp(3.2rem, 17vw, 4.8rem);
    }

    .hero-inner p {
      font-size: 1rem;
    }

    .hero-actions,
    .button {
      inline-size: 100%;
    }

    .hero-actions {
      display: grid;
    }

    .popular-label {
      position: static;
      justify-self: start;
    }

    .pricing-grid {
      gap: 14px;
    }

    .site-footer {
      gap: 8px;
      padding-block-end: 26px;
    }

    .legal-link-button,
    .legal-back {
      inline-size: 100%;
    }

    .legal-frame {
      block-size: min(68dvh, 680px);
      border-radius: 16px;
    }

    .legal-main {
      padding-block: 34px 34px;
    }

    .legal-article {
      padding: 22px;
      border-radius: 24px;
    }

    .legal-article h1 {
      font-size: clamp(1.6rem, 6.8vw, 2.1rem);
    }

    .price-column {
      padding: 20px;
      border-radius: 22px;
    }

    .price-column h3 {
      padding-inline-end: 0;
    }

    .plan-line {
      grid-template-columns: 1fr;
    }

    .plan-line b {
      justify-self: start;
    }

    .section-copy h2,
    .auth-card h1,
    .order-card h1 {
      font-size: 1.85rem;
    }

    .pricing-section {
      padding-block: 46px 70px;
    }

    .dashboard-main {
      inline-size: var(--content);
      padding-block: 24px 48px;
    }

    .dashboard-grid {
      gap: 14px;
    }

    .dashboard-title {
      gap: 8px;
      margin-block-end: 18px;
    }

    .dashboard-title h1 {
      font-size: clamp(2.4rem, 13vw, 3.2rem);
    }

    .hero-card,
    .date-card,
    .metric-tile,
    .action-card,
    .payments-section,
    .devices-section,
    .auth-card,
    .order-card {
      border-radius: 24px;
    }

    .hero-card {
      min-block-size: auto;
      padding: 22px;
      gap: 18px;
    }

    .hero-card h2 {
      font-size: clamp(2.35rem, 13vw, 3.65rem);
    }

    .date-card {
      min-block-size: auto;
      padding: 20px;
      gap: 18px;
    }

    .date-card .button {
      justify-self: stretch;
    }

    .date-card strong {
      font-size: clamp(1.8rem, 10vw, 2.5rem);
      white-space: normal;
    }

    .mini-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .metric-tile {
      min-block-size: 112px;
      padding: 18px;
    }

    .metric-tile strong {
      font-size: clamp(1.85rem, 10vw, 2.6rem);
    }

    .traffic-heading {
      display: grid;
      gap: 3px;
    }

    .date-card,
    .cabinet-actions,
    .copy-row,
    .stat-grid,
    .proxy-fields,
    .proxy-card,
    .family-board,
    .family-locked,
    .family-slot-options,
    .device-slot-options,
    .device-rate-note,
    .devices-board,
    .payment-card,
    .device-row,
    .support-row,
    .payment-head,
    .payment-row,
    .order-facts {
      grid-template-columns: 1fr;
    }

    .cabinet-actions {
      gap: 12px;
      margin-block-start: 14px;
    }

    .action-card {
      min-block-size: 148px;
      padding: 22px;
      border-radius: 22px;
    }

    .action-card h3 {
      font-size: 1.5rem;
    }

    .action-card p {
      font-size: 1rem;
    }

    .modal-sheet,
    .modal-sheet-wide,
    .modal-sheet-devices,
    .modal-sheet-devices .modal-panel-wide {
      inline-size: calc(100vw - 12px);
      max-block-size: calc(100dvh - 12px);
    }

    .modal-panel {
      inline-size: 100%;
      max-block-size: calc(100dvh - 12px);
      padding: 16px;
      border-radius: 20px;
    }

    .modal-head {
      align-items: center;
      gap: 12px;
    }

    .icon-button {
      inline-size: 42px;
      block-size: 42px;
    }

    .proxy-actions {
      justify-content: stretch;
    }

    .proxy-actions .button {
      flex: 1 1 100%;
    }

    .modal-head-large h2 {
      font-size: clamp(2.25rem, 15vw, 3.45rem);
    }

    .modal-head h2 {
      font-size: clamp(1.85rem, 11vw, 2.75rem);
    }

    .modal-title-icon {
      inline-size: 52px;
      block-size: 52px;
      font-size: 2rem;
    }

    .family-members-scroll,
    .device-cards-scroll {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      overflow-x: visible;
    }

    .devices-board {
      display: grid;
      grid-template-columns: 1fr;
      overflow-x: visible;
      gap: 12px;
    }

    .device-limit-card,
    .device-card,
    .device-empty-card {
      flex-basis: auto;
    }

    .device-limit-card,
    .device-card {
      min-block-size: 220px;
      padding: 18px;
      border-radius: 22px;
    }

    .device-card {
      grid-template-rows: minmax(52px, auto) 26px 26px 1fr auto;
      gap: 8px;
    }

    .device-card h3 {
      min-block-size: 52px;
      font-size: 1.08rem;
    }

    .device-card p,
    .device-card small {
      min-block-size: 22px;
      font-size: 0.92rem;
    }

    .device-expand-card,
    .family-expand-card {
      padding: 18px;
      border-radius: 22px;
    }

    .device-rate-note,
    .family-rate-note {
      padding: 14px;
    }

    .device-slot-card,
    .family-slot-card {
      min-block-size: 126px;
      padding: 18px;
    }

    .proxy-card {
      min-block-size: auto;
      padding: 18px;
      border-radius: 22px;
    }

    .proxy-field {
      padding: 12px;
    }

    .payment-card {
      padding: 16px;
      gap: 14px;
    }

    .payment-card time {
      justify-items: start;
      padding-inline-end: 0;
      padding-block-end: 12px;
      border-inline-end: 0;
      border-block-end: 1px solid rgb(255 255 255 / 14%);
      text-align: start;
    }

    .payment-card b {
      justify-self: start;
    }

    .device-seen {
      justify-items: start;
      text-align: start;
    }

    .payment-head {
      display: none;
    }

    .payment-row {
      gap: 8px;
    }

    .network-bg {
      background-size: 780px auto;
      opacity: 0.16;
    }
  }

  @media (max-width: 420px) {
    :root {
      --content: min(390px, calc(100% - 16px));
    }

    .hero-actions .button,
    .date-card .button,
    .proxy-actions .button {
      inline-size: 100%;
    }

    .mini-grid {
      grid-template-columns: 1fr;
    }

    .modal-panel {
      padding: 14px;
      border-radius: 18px;
    }

    .hero-card,
    .date-card,
    .metric-tile,
    .action-card,
    .payments-section,
    .devices-section,
    .auth-card,
    .order-card {
      border-radius: 20px;
    }

    .copy-row,
    .proxy-actions {
      gap: 8px;
    }

    .copy-row .button {
      inline-size: 100%;
    }
  }

  @media (pointer: coarse) {
    .button,
    .soft-chip,
    .solid-chip,
    .metric-button,
    .icon-button,
    button.action-card,
    .plan-line {
      min-block-size: 48px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .network-bg,
    .net-ring,
    .net-node,
    .button,
    .hero-card,
    .date-card,
    .metric-tile,
    .action-card,
    .price-column,
    .proxy-card,
    .payment-card,
    .device-card,
    .family-member-card,
    .family-slot-card,
    .device-slot-card,
    .support-row,
    .modal-sheet[open] .modal-panel,
    .modal-sheet[open]::backdrop {
      animation: none;
      transition: none;
    }

    .network-bg {
      transform: none;
    }

    .button:hover:not(:disabled) {
      transform: none;
    }

    .antigravity-bg {
      opacity: 0.72;
    }
  }
}