:root {
      --bg: #171a1d;
      --top: #212120;
      --panel: #2d2e2f;
      --panel2: #303234;
      --card: #343638;
      --text: #b4b8bf;
      --title: #d8dde3;
      --muted: #7d848d;
      --line: #3c3f43;
      --accent: #f1404b;
      --blue: #2d73ff;
      --radius: 5px;
      --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
      --wrap: 1400px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      padding-top: 60px;
      color: var(--text);
      background: var(--bg);
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.6;
    }

    a {
      color: var(--text);
      text-decoration: none;
      transition: color .18s ease, background .18s ease, filter .18s ease;
    }
    a:hover { color: var(--accent); }

    .topbar {
      position: fixed;
      inset: 0 0 auto;
      z-index: 50;
      height: 60px;
      background: var(--top);
    }

    .topbar-inner {
      width: var(--wrap);
      max-width: calc(100% - 20px);
      height: 60px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 150px;
      color: var(--accent);
      font-size: 21px;
      font-weight: 700;
      white-space: nowrap;
    }

    .logo-mark {
      position: relative;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 62% 36%, #fff 0 5px, transparent 6px),
        conic-gradient(from -28deg, var(--accent) 0 67%, transparent 67% 79%, #ff8a18 79% 100%);
    }
    .logo-mark::after {
      content: "";
      position: absolute;
      left: 13px;
      top: 8px;
      width: 5px;
      height: 16px;
      border-radius: 4px;
      background: #fff;
    }

    .topnav {
      display: flex;
      gap: 2px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .topnav li { position: relative; }
    .topnav a {
      height: 60px;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--text);
      font-size: 14px;
    }
    .topnav a:hover,
    .topnav a.active { color: var(--accent); }
    .topnav li::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 18px;
      height: 3px;
      border-radius: 3px;
      background: var(--accent);
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity .18s ease;
    }
    .topnav li:hover::after,
    .topnav li:has(a.active)::after { opacity: 1; }

    .top-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 16px;
      color: var(--text);
      font-size: 13px;
      white-space: nowrap;
    }

    .wrap {
      width: var(--wrap);
      max-width: calc(100% - 20px);
      margin: 18px auto 0;
    }

    .intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 430px;
      gap: 28px;
      align-items: start;
      min-height: 300px;
    }

    .intro-main {
      padding-top: 6px;
      position: relative;
    }

    .title-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    h1 {
      margin: 0;
      color: var(--title);
      font-size: 24px;
      line-height: 1.2;
      font-weight: 500;
    }

    .fav {
      height: 25px;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 4px;
      color: var(--accent);
      background: rgba(241,64,75,.1);
      font-size: 12px;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
      color: #6d747d;
      font-size: 13px;
    }

    .meta span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .meta .css-icon {
      font-size: 13px;
      color: #707780;
    }

    .desc {
      max-width: 480px;
      margin: 0 0 16px;
      color: #c1c6cc;
      font-size: 14px;
      line-height: 1.8;
    }

    .date-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 0 14px;
      color: var(--text);
      font-size: 13px;
    }
    .date-row span { color: #d2d6dc; }

    .actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .visit {
      height: 36px;
      padding: 0 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 5px;
      color: #fff;
      background: var(--accent);
      font-size: 14px;
      font-weight: 600;
    }

    .visit .css-icon,
    .phone .css-icon,
    .fav .css-icon,
    .tag .css-icon {
      font-size: 15px;
    }
    .visit:hover { color: #fff; background: #d72f39; }

    .phone {
      height: 36px;
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid var(--accent);
      border-radius: 5px;
      color: var(--accent);
      font-size: 14px;
      background: transparent;
    }

    .comment-jump {
      height: 36px;
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 5px;
      color: #d7dbe0;
      background: #303234;
      font-size: 14px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    }

    .comment-jump:hover {
      color: #fff;
      background: #383b3e;
    }

    .tag {
      height: 26px;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 4px;
      color: #77a8ff;
      background: rgba(45,115,255,.12);
      font-size: 13px;
    }

    .preview-card {
      padding: 10px;
      border-radius: 5px;
      background: var(--panel);
      box-shadow: 0 10px 28px rgba(0,0,0,.18);
      position: relative;
    }

    .preview-reactions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .preview-reaction-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: #d5dae0;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .preview-reaction-title .css-icon {
      font-size: 15px;
      color: var(--accent);
    }

    .preview-reaction-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .preview-reaction-actions::-webkit-scrollbar { display: none; }

    .preview-reactions .reaction-btn {
      height: 30px;
      width: auto;
      min-width: max-content;
      padding: 0 12px;
      background: #343638;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .preview-img {
      height: 230px;
      border-radius: 3px;
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
      background:
        linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.64)),
        radial-gradient(circle at 24% 28%, rgba(198,52,52,.6) 0 36px, transparent 37px),
        radial-gradient(circle at 70% 22%, rgba(49,96,155,.55) 0 44px, transparent 45px),
        radial-gradient(circle at 42% 72%, rgba(180,128,52,.5) 0 42px, transparent 43px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 86px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px),
        #171a1d;
    }

    .preview-img::before {
      content: "NETFLIX";
      position: absolute;
      left: 18px;
      top: 14px;
      color: var(--accent);
      font-weight: 800;
      letter-spacing: .5px;
    }
    .preview-copy {
      color: #fff;
      text-align: center;
      font-size: 22px;
      font-weight: 800;
      line-height: 1.15;
      text-shadow: 0 2px 10px rgba(0,0,0,.45);
    }
    .preview-copy small {
      display: block;
      margin-top: 6px;
      color: #dedede;
      font-size: 11px;
      font-weight: 500;
    }
    .preview-card .visit {
      width: 112px;
      height: 31px;
      margin: 0;
      position: absolute;
      left: 50%;
      top: auto;
      bottom: 22px;
      z-index: 2;
      opacity: 0;
      transform: translateX(-50%);
      transition: opacity .18s ease, background .18s ease;
      font-size: 12px;
    }

    .preview-card:hover .visit {
      opacity: 1;
    }

    .content-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 430px;
      gap: 18px;
      align-items: start;
      margin-top: 18px;
    }

    .panel {
      border-radius: 5px;
      background: var(--panel);
      overflow: hidden;
    }

    .article {
      padding: 18px 22px 20px;
      color: #b9bec5;
      font-size: 15px;
      line-height: 1.85;
    }
    .article p { margin: 0 0 16px; }
    .article h3 {
      margin: 18px 0 12px;
      color: #d5dae0;
      font-size: 17px;
      font-weight: 600;
    }
    .article ul {
      margin: 0;
      padding-left: 18px;
    }
    .article li {
      margin: 7px 0;
    }
    .article b {
      color: #e3e7ec;
      font-weight: 600;
    }

    .stats-panel {
      margin-top: 16px;
      padding: 18px 22px 20px;
    }

    .block-title {
      margin: 0 0 14px;
      color: #d5dae0;
      font-size: 20px;
      line-height: 1.25;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .block-title-main {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .block-title-main .css-icon {
      font-size: 19px;
      color: var(--accent);
    }
    .today-counts {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .today-out,
    .today-in {
      height: 26px;
      padding: 0 9px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #9fe0bb;
      background: rgba(54,194,117,.1);
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
    }
    .today-in {
      color: #9fbfff;
      background: rgba(45,115,255,.1);
    }
    .today-out .css-icon,
    .today-in .css-icon {
      font-size: 13px;
    }

    .chart-head {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      color: #9fa6ae;
      font-size: 13px;
    }

    .chart-legend {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #9fa6ae;
      font-size: 12px;
    }
    .legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }
    .legend-dot.in { background: #2d73ff; box-shadow: 0 0 10px rgba(45,115,255,.4); }
    .legend-dot.out { background: #36c275; box-shadow: 0 0 10px rgba(54,194,117,.35); }

    .chart-box {
      height: 210px;
      padding: 18px 14px 14px;
      border-radius: 5px;
      background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        #303234;
      background-size: 100% 40px, 56px 100%;
      display: flex;
      align-items: flex-end;
      gap: 8px;
    }

    .bar-item {
      flex: 1;
      height: 100%;
      min-width: 0;
      display: grid;
      grid-template-rows: 1fr 22px;
      align-items: end;
      color: #7d848d;
      font-size: 10px;
      text-align: center;
    }

    .bar-pair {
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 3px;
    }
    .bar {
      width: 8px;
      min-height: 0;
      margin: 0 auto;
      border-radius: 4px 4px 0 0;
      background: linear-gradient(180deg, #70a2ff, #2d73ff);
      box-shadow: 0 8px 18px rgba(45,115,255,.16);
    }
    .bar.out {
      background: linear-gradient(180deg, #7fe2a9, #36c275);
      box-shadow: 0 8px 18px rgba(54,194,117,.14);
    }

    .related-section {
      margin-top: 16px;
      padding-bottom: 14px;
    }

    .related-section .side-head {
      height: 44px;
      border-bottom: 0;
    }

    .related-grid {
      padding: 0 12px 2px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .related-card {
      min-height: 68px;
      padding: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 5px;
      background: #303234;
      overflow: hidden;
    }

    .related-icon {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #fff;
      background: #2778e5;
      font-size: 14px;
      font-weight: 800;
      flex: 0 0 38px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
    }

    .related-icon img {
      width: 26px;
      height: 26px;
      display: block;
      object-fit: contain;
      border-radius: 5px;
    }

    .related-info {
      min-width: 0;
    }

    .related-title {
      display: block;
      margin-bottom: 3px;
      color: #d2d7dd;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .related-card:hover .related-title {
      color: var(--accent);
    }

    .related-desc {
      display: block;
      color: #7d848d;
      font-size: 11px;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .side-panel {
      margin-bottom: 14px;
      border-radius: 5px;
      background: var(--panel);
      overflow: hidden;
    }
    .side-head {
      height: 42px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      gap: 7px;
      color: #cdd2d8;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid rgba(255,255,255,.04);
    }
    .side-head .dot {
      width: 5px;
      height: 13px;
      border-radius: 4px;
      background: var(--accent);
      box-shadow: 6px 5px 0 rgba(241,64,75,.55);
      transform: rotate(38deg);
    }

    .hot-grid {
      padding: 12px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .hot-link {
      height: 44px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 4px;
      background: var(--card);
      font-size: 14px;
    }
    .mini-icon {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      color: #fff;
      background: #e5404b;
      font-size: 12px;
      font-weight: 700;
      flex: 0 0 28px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
    }

    .recent-grid {
      padding: 12px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .recent-card {
      min-height: 146px;
      overflow: hidden;
      color: #9fa6ae;
      font-size: 14px;
    }
    .thumb {
      height: 116px;
      margin-bottom: 8px;
      border-radius: 3px;
      background:
        linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.45)),
        radial-gradient(circle at 35% 25%, rgba(91,148,80,.55), transparent 30%),
        radial-gradient(circle at 70% 60%, rgba(177,62,56,.55), transparent 32%),
        #3a3c3e;
    }

    .comments {
      margin-top: 16px;
      padding: 16px 22px;
    }
    .comment-title {
      margin: 0 0 12px;
      color: #d5dae0;
      font-size: 16px;
      font-weight: 600;
    }

    .comment-tools {
      margin-bottom: 16px;
      padding: 14px;
      border-radius: 5px;
      background: #303234;
    }

    .reaction-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .reaction-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #d5dae0;
      font-size: 15px;
      font-weight: 600;
    }

    .reaction-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .reaction-btn {
      height: 32px;
      padding: 0 11px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 0;
      border-radius: 5px;
      color: #b4b8bf;
      background: #383b3e;
      cursor: pointer;
      font-family: var(--font);
      font-size: 13px;
      white-space: nowrap;
      width: auto;
      min-width: max-content;
      flex: 0 0 auto;
      transition: color .18s ease, background .18s ease;
    }

    .reaction-btn:hover {
      color: #fff;
      background: var(--accent);
    }

    .comment-form {
      display: grid;
      gap: 10px;
    }

    .comment-form textarea,
    .comment-form input {
      width: 100%;
      border: 0;
      outline: 0;
      border-radius: 5px;
      color: #d7dbe0;
      background: #27292b;
      font-family: var(--font);
      font-size: 14px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    }

    .comment-form textarea {
      min-height: 98px;
      padding: 12px 13px;
      resize: vertical;
      line-height: 1.65;
    }

    .comment-form input {
      height: 38px;
      padding: 0 12px;
    }

    .comment-form textarea::placeholder,
    .comment-form input::placeholder {
      color: #717982;
    }

    .comment-fields {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 10px;
    }

    .submit-comment {
      height: 38px;
      min-width: 128px;
      border: 0;
      border-radius: 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: #fff;
      background: var(--accent);
      cursor: pointer;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      transition: background .18s ease;
    }

    .submit-comment:hover {
      background: #d72f39;
    }
    .comment {
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 12px;
      padding: 12px 0;
    }
    .comment + .comment { border-top: 1px solid rgba(255,255,255,.05); }
    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: #68717c;
      font-weight: 700;
    }
    .comment-name {
      color: #d6dbe1;
      margin-bottom: 4px;
      font-weight: 600;
    }
    .comment-name span {
      color: #747b84;
      font-size: 12px;
      font-weight: 400;
    }
    .comment p {
      margin: 0;
      color: #aab0b8;
    }

    .footer {
      width: var(--wrap);
      max-width: calc(100% - 20px);
      margin: 16px auto 32px;
      color: #646b74;
      font-size: 12px;
      text-align: center;
    }

    .backtop {
      position: fixed;
      right: 18px;
      bottom: 18px;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 4px;
      color: #aab0b8;
      background: #303338;
    }
    .backtop:hover {
      color: #fff;
      background: var(--accent);
    }

    @media (max-width: 991.98px) {
      :root { --wrap: 100%; }
      body {
        padding-top: 0;
        background: #171a1d;
      }
      .topbar {
        position: absolute;
        height: 64px;
        background: #202122;
      }
      .topbar-inner {
        width: 100%;
        max-width: none;
        padding: 0 12px;
      }
      .topnav,
      .top-right {
        display: none;
      }
      .logo {
        min-width: 0;
        font-size: 20px;
      }
      .logo-mark {
        width: 31px;
        height: 31px;
      }
      .wrap {
        max-width: none;
        margin: 0;
        padding: 78px 12px 0;
      }
      .intro {
        display: block;
        min-height: 0;
      }
      .intro-main {
        padding-top: 0;
      }
      .title-row {
        margin-bottom: 8px;
      }
      h1 {
        font-size: 22px;
      }
      .meta {
        gap: 9px;
        margin-bottom: 18px;
      }
      .phone {
        display: none !important;
      }
      .desc {
        max-width: none;
      }
      .preview-card {
        margin-top: 16px;
      }
      .preview-img {
        height: 180px;
      }
      .content-grid {
        display: block;
        margin-top: 14px;
      }
      .article {
        padding: 16px;
        font-size: 14px;
      }
      .stats-panel {
        padding: 16px;
      }
      .chart-head {
        height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 10px;
      }
      .block-title {
        font-size: 18px;
        margin-bottom: 14px;
      }
      .chart-box {
        height: 150px;
        gap: 5px;
        padding: 14px 8px 12px;
        overflow-x: auto;
      }
      .bar-item {
        min-width: 34px;
        flex: 0 0 34px;
      }
      .bar {
        width: 7px;
      }
      .related-grid {
        grid-template-columns: 1fr 1fr;
        padding: 0 10px 2px;
        gap: 8px;
      }
      .related-card {
        min-height: 72px;
        padding: 10px;
      }
      .related-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
      }
      .reaction-row {
        align-items: flex-start;
        flex-direction: column;
      }
      .reaction-actions {
        width: 100%;
      }
      .reaction-btn {
        flex: 1;
        justify-content: center;
      }
      .comment-fields {
        grid-template-columns: 1fr;
      }
      .submit-comment {
        width: 100%;
      }
      .side {
        margin-top: 14px;
      }
      .hot-grid,
      .recent-grid {
        grid-template-columns: 1fr 1fr;
      }
      .footer {
        width: 100%;
        max-width: none;
        padding: 0 12px;
      }
    }
    .top-promo {
      margin-left: auto;
      height: 25px;
      padding: 0 10px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #d89096;
      background: rgba(241,64,75,.08);
      font-size: 12px;
      font-weight: 500;
    }
    .top-promo .css-icon {
      font-size: 14px;
    }
    .top-promo:hover { color: var(--accent); background: rgba(241,64,75,.13); }
    .promo-modal {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(4px);
    }
    .promo-modal.open { display: flex; }
    .promo-box {
      width: 520px;
      max-width: 100%;
      border-radius: 8px;
      background: #2d2e2f;
      box-shadow: 0 24px 70px rgba(0,0,0,.42);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.06);
    }
    .promo-head {
      height: 58px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #252728;
      color: #f0f3f6;
      font-size: 20px;
      font-weight: 700;
    }
    .promo-head .ad-badge {
      height: 24px;
      min-width: 34px;
      padding: 0 7px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: var(--accent);
      font-size: 13px;
    }
    .promo-close {
      margin-left: auto;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 4px;
      background: #35383b;
      color: #b4b8bf;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }
    .promo-body { padding: 18px; }
    .promo-note {
      margin: 0 0 14px;
      color: #aeb4bc;
      line-height: 1.7;
      background: #252729;
      border-radius: 5px;
      padding: 10px 12px;
    }
    .promo-plans {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 14px;
    }
    .promo-plan {
      position: relative;
      min-height: 94px;
      padding: 14px 10px;
      border: 1px solid #3e4247;
      border-radius: 6px;
      background: #333537;
      color: #d9dde2;
      text-align: center;
      cursor: pointer;
    }
    .promo-plan:hover,
    .promo-plan.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(241,64,75,.14);
    }
    .promo-plan b {
      display: block;
      margin-bottom: 5px;
      color: #fff;
      font-size: 17px;
    }
    .promo-plan strong {
      display: block;
      color: var(--accent);
      font-size: 21px;
      line-height: 1.1;
    }
    .promo-plan small { color: #8f969f; }
    .promo-tag {
      position: absolute;
      right: 8px;
      top: -8px;
      height: 20px;
      padding: 0 7px;
      border-radius: 10px;
      background: #ff8a18;
      color: #fff;
      font-size: 11px;
      line-height: 20px;
    }
    .pay-btn {
      width: 100%;
      height: 44px;
      border: 0;
      border-radius: 5px;
      background: var(--accent);
      color: #fff;
      font-weight: 700;
      cursor: pointer;
    }
    @media (max-width: 767.98px) {
      .top-promo {
        margin-left: 0;
        height: 25px;
        padding: 0 9px;
        font-size: 12px;
      }
      .phone { display: none !important; }
      .promo-body { padding: 14px; }
      .promo-plans { gap: 7px; }
      .promo-plan { min-height: 86px; padding: 12px 6px; }
      .promo-plan b { font-size: 14px; }
      .promo-plan strong { font-size: 18px; }
    }
  
    .mobile-cat-toggle,
    .mobile-search-toggle,
    .mobile-category-panel,
    .mobile-search-panel { display: none; }
    @media (max-width: 991.98px) {
      .topbar {
        position: absolute !important;
        height: 64px !important;
        padding: 0 !important;
        background: #202122 !important;
        pointer-events: auto !important;
      }
      .topbar-inner {
        width: 100% !important;
        max-width: none !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        background: #202122 !important;
        box-shadow: 0 5px 16px rgba(0,0,0,.24) !important;
        pointer-events: auto !important;
      }
      .topbar-inner::after { content: none !important; }
      .topnav,
      .top-right { display: none !important; }
      .topbar .logo {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        min-width: 0 !important;
        height: 64px !important;
        line-height: 64px !important;
        margin: 0 auto !important;
        gap: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        color: #ff2434 !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
      }
      .topbar .logo-mark {
        width: 31px !important;
        height: 31px !important;
        flex: 0 0 31px !important;
      }
      .topbar .logo-mark::after {
        left: 13px !important;
        top: 8px !important;
        width: 5px !important;
        height: 15px !important;
      }
      .mobile-cat-toggle,
      .mobile-search-toggle {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 5px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #c6ccd4;
        background: transparent;
        cursor: pointer;
        flex: 0 0 38px;
        z-index: 3;
      }
      .mobile-cat-toggle .css-icon,
      .mobile-search-toggle .css-icon,
      .mobile-search-line .css-icon {
        width: 23px;
        height: 23px;
      }
      body.mobile-search-open .mobile-search-toggle .css-icon { display: none; }
      body.mobile-search-open .mobile-search-toggle::before {
        content: "×";
        color: #c6ccd4;
        font-size: 38px;
        line-height: 28px;
        font-weight: 300;
      }
      .mobile-category-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 76px;
        z-index: 220;
        padding: 10px;
        border-radius: 5px;
        background: #262829;
        box-shadow: 0 16px 38px rgba(0,0,0,.35);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      body.mobile-category-open .mobile-category-panel { display: grid; }
      .mobile-category-panel a {
        height: 38px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c5cad1;
        background: #303234;
        font-size: 14px;
      }
      .mobile-category-panel a:hover { color: #fff; background: #383b3e; }
      .mobile-search-panel {
        position: fixed;
        left: 0;
        right: 0;
        top: 64px;
        z-index: 210;
        padding: 14px 12px 16px;
        background: #202122;
        box-shadow: 0 12px 26px rgba(0,0,0,.28);
      }
      body.mobile-search-open .mobile-search-panel { display: block; }
      .mobile-search-form {
        margin: 0;
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        border: 2px solid #f1404b;
        border-radius: 5px;
        overflow: hidden;
        background: #282a2d;
      }
      .mobile-search-tabs {
        display: grid;
        grid-template-columns: 1fr;
        background: #242628;
        border-right: 1px solid #383b3e;
      }
      .mobile-search-tabs button {
        height: 36px;
        border: 0;
        border-bottom: 1px solid #34373a;
        color: #9fa6ae;
        background: transparent;
        font-size: 13px;
        cursor: pointer;
      }
      .mobile-search-tabs button:last-child { border-bottom: 0; }
      .mobile-search-tabs button.active {
        color: #fff;
        background: rgba(241,64,75,.16);
      }
      .mobile-search-line {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 54px;
        min-height: 108px;
      }
      .mobile-search-line input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        padding: 0 14px;
        color: #d9dde3;
        background: #282a2d;
        font-size: 15px;
      }
      .mobile-search-line input::placeholder { color: #717983; }
      .mobile-search-line button {
        border: 0;
        display: grid;
        place-items: center;
        color: #fff;
        background: #f1404b;
        cursor: pointer;
      }
      .hero .search-wrap { display: none !important; }
      .mobile-menu,
      .mobile-side-toggle { display: none !important; }
    }

    @media (max-width: 991.98px) {
      .topbar .logo > span:last-child {
        display: inline !important;
        position: static !important;
        flex-direction: row !important;
        gap: 0 !important;
        letter-spacing: .2px !important;
      }
      .topbar .logo > span:last-child::after {
        content: none !important;
        display: none !important;
      }
      .mobile-category-panel {
        display: none;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
      }
      body.mobile-category-open .mobile-category-panel { display: grid !important; }
      .mobile-primary-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .mobile-primary-nav a,
      .mobile-subcats a {
        min-width: 0;
        height: 36px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c5cad1;
        background: #303234;
        font-size: 13px;
      }
      .mobile-primary-nav a:first-child {
        color: #fff;
        background: rgba(241,64,75,.2);
      }
      .mobile-sub-title {
        padding: 2px 2px 0;
        color: #7d848d;
        font-size: 12px;
      }
      .mobile-subcats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
      }
      .mobile-subcats a {
        height: 32px;
        color: #9fa6ae;
        background: #292b2d;
        font-size: 12px;
      }
      .mobile-subcats a:hover,
      .mobile-primary-nav a:hover {
        color: #fff;
        background: #383b3e;
      }
      .mobile-search-form {
        grid-template-columns: 94px minmax(0, 1fr) !important;
        min-height: 48px !important;
      }
      .mobile-search-select {
        height: 48px;
        display: block;
        position: relative;
        background: #242628;
        border-right: 1px solid #383b3e;
      }
      .mobile-search-select::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-right: 1px solid #9fa6ae;
        border-bottom: 1px solid #9fa6ae;
        transform: translateY(-65%) rotate(45deg);
        pointer-events: none;
      }
      .mobile-search-select select {
        width: 100%;
        height: 48px;
        border: 0;
        outline: 0;
        padding: 0 26px 0 13px;
        appearance: none;
        -webkit-appearance: none;
        color: #d8dde3;
        background: transparent;
        font-size: 14px;
      }
      .mobile-search-tabs { display: none !important; }
      .mobile-search-line {
        min-height: 48px !important;
        grid-template-columns: minmax(0, 1fr) 50px !important;
      }
    }

    .mobile-search-select select,
    .mobile-search-select select option {
      color-scheme: dark;
      color: #d8dde3 !important;
      background: #242628 !important;
    }

/* Static chart values live in CSS so the page contains no inline styles. */
.bar-h28 { height: 28%; }
.bar-h31 { height: 31%; }
.bar-h34 { height: 34%; }
.bar-h36 { height: 36%; }
.bar-h38 { height: 38%; }
.bar-h40 { height: 40%; }
.bar-h42 { height: 42%; }
.bar-h44 { height: 44%; }
.bar-h47 { height: 47%; }
.bar-h48 { height: 48%; }
.bar-h49 { height: 49%; }
.bar-h50 { height: 50%; }
.bar-h52 { height: 52%; }
.bar-h55 { height: 55%; }
.bar-h56 { height: 56%; }
.bar-h57 { height: 57%; }
.bar-h58 { height: 58%; }
.bar-h59 { height: 59%; }
.bar-h61 { height: 61%; }
.bar-h62 { height: 62%; }
.bar-h66 { height: 66%; }
.bar-h68 { height: 68%; }
.bar-h71 { height: 71%; }
.bar-h74 { height: 74%; }
.bar-h78 { height: 78%; }
.bar-h80 { height: 80%; }
.bar-h82 { height: 82%; }
.bar-h88 { height: 88%; }

/* Detail favorite and related-navigation hover enhancements. */
.site-favorite {
  margin-left: auto;
  height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 5px;
  justify-content: center;
  color: #f1404b;
  background: rgba(241, 64, 75, .11);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.site-favorite:hover,
.site-favorite:focus-visible {
  color: #fff;
  background: var(--accent);
  outline: none;
}
.site-favorite.is-active {
  color: #fff;
  border-color: #f1404b;
  background: #f1404b;
}
.site-favorite .css-icon {
  width: 17px;
  height: 17px;
  font-size: 17px;
}
.site-favorite.is-active .css-icon svg { fill: currentColor; }
.favorite-count { font-variant-numeric: tabular-nums; }

.related-card {
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
  transform: none !important;
}
.related-card:hover,
.related-card:focus-visible {
  background: #343638;
  box-shadow: none;
  transform: none !important;
  outline: none;
}
.related-card:hover .related-icon,
.related-card:focus-visible .related-icon {
  filter: brightness(1.12) saturate(1.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 18px rgba(241,64,75,.3);
}
.related-card:hover .related-title,
.related-card:focus-visible .related-title { color: var(--accent); }
.related-card:hover .related-desc,
.related-card:focus-visible .related-desc { color: #bdc4cc; }

@media (max-width: 991.98px) {
  .title-row { align-items: flex-start; }
  .site-favorite {
    width: 42px;
    height: 42px;
    padding: 0;
    flex: 0 0 42px;
    border-radius: 5px;
  }
  .site-favorite .favorite-label,
  .site-favorite .favorite-count { display: none; }
}

.intro { margin-top: 34px; }

@media (max-width: 991.98px) {
  .intro { margin-top: 12px; }
}