/* FlyHigh — dashboardning moslashuvchan joylashuvi */

html:has(body.fh-desktop-fit),
html body.fh-desktop-fit {
  height: auto !important;
  min-height: 100dvh;
  overflow: visible !important;
}

/* KOMPYUTER VA PLANSHET */
@media (min-width: 701px) {
  html body.fh-desktop-fit :is(.app, #fh-layout-root) {
    /* Eski turlicha masshtablash qoidalarini to‘xtatish */
    --fu: 1px !important;
    --du: 1px !important;

    /* Barcha asosiy masofalar shu yerdan boshqariladi */
    --layout-gap: clamp(12px, 1vw, 20px);
    --layout-pad: clamp(12px, 1vw, 20px);
    --panel-pad: clamp(16px, 1.4vw, 26px);

    --hero-height: clamp(290px, 32dvh, 360px);
    --tools-height: clamp(260px, 28dvh, 310px);
    --gift-height: clamp(130px, 15dvh, 160px);

    display: grid !important;
    grid-template-columns:
      clamp(252px, 17vw, 280px)
      minmax(0, 1fr) !important;

    align-items: start !important;
    gap: var(--layout-gap) !important;

    width: 100% !important;
    max-width: 1920px !important;
    height: auto !important;
    min-height: 100dvh !important;

    margin: 0 auto !important;
    padding: var(--layout-pad) !important;
    box-sizing: border-box;

    & .main {
      display: flex !important;
      flex-direction: column !important;
      min-width: 0 !important;
      min-height: 0 !important;
      height: auto !important;
      overflow: visible !important;
    }

    /* SIDEBAR */

    & .sidebar.fh-sidebar-beta {
      position: sticky !important;
      top: var(--layout-pad) !important;

      display: flex !important;
      flex-direction: column !important;

      width: 100% !important;
      min-width: 0 !important;
      height: calc(100dvh - 2 * var(--layout-pad)) !important;
      min-height: 0 !important;

      padding: 20px 12px 12px !important;
      gap: 0 !important;
      overflow: hidden !important;
      box-sizing: border-box;
    }

    & .sidebar .brand {
      flex: 0 0 auto !important;
      padding: 14px 0 18px !important;
    }

    & .sidebar .brand-row {
      justify-content: center !important;
      gap: 8px !important;
      padding: 0 !important;
    }

    & .sidebar .brand img {
      flex: 0 0 42px !important;
      width: 42px !important;
      height: 35px !important;
      object-fit: contain;
    }

    & .sidebar .brand-name {
      position: relative;
      font-size: 29px !important;
      line-height: 1.2 !important;
      white-space: nowrap;
    }

    & .sidebar .fh-beta-label {
      left: auto !important;
      right: 0 !important;
      top: -18px !important;
      font-size: 9px !important;
      line-height: 1.2 !important;
      transform: none !important;
    }

    & .sidebar .slogan {
      margin-top: 10px !important;
      font-size: 16px !important;
      line-height: 1.3 !important;
    }

    /* Menyu kengaysa, profilni pastga surib yubormaydi */
    & .sidebar .menu {
      display: flex !important;
      flex-direction: column !important;
      flex: 0 1 auto !important;

      min-height: 0 !important;
      gap: 4px !important;
      padding: 6px !important;

      overflow: auto !important;
      scrollbar-width: none;
    }

    & .sidebar .menu::-webkit-scrollbar {
      display: none;
    }

    & .sidebar .menu > button[data-view] {
      display: grid !important;
      grid-template-columns: 28px minmax(0, 1fr) !important;
      align-items: center !important;

      gap: 8px !important;
      flex-shrink: 0 !important;
      height: auto !important;
      min-height: 44px !important;
      padding: 8px !important;
    }

    /* Ikonka, matn, strelka — uchta alohida joy */
    & .sidebar .menu > button[data-view="home"] {
      grid-template-columns:
        28px minmax(0, 1fr) 18px !important;
      gap: 6px !important;
    }

    & .sidebar .menu > button > .fh-sidebar-label {
      min-width: 0 !important;
      font-size: 15px !important;
      line-height: 1.25 !important;
      white-space: normal !important;
      overflow-wrap: normal !important;
    }

    & .sidebar .menu > button[data-view="home"] > .fh-sidebar-label {
      white-space: nowrap !important;
    }

    & .sidebar .menu > button > svg.fh-nav-icon {
      width: 28px !important;
      min-width: 28px !important;
      max-width: 28px !important;
      height: 28px !important;
      flex-basis: 28px !important;
    }

    & .sidebar .fh-dashboard-arrow {
      width: 18px !important;
      min-width: 18px !important;
      height: 26px !important;
      margin: 0 !important;
      justify-self: end;
    }

    & .sidebar .fh-dashboard-arrow svg {
      width: 14px !important;
      height: 14px !important;
    }

    & .sidebar #fh-dashboard-submenu,
    & .sidebar .fh-coming-group {
      flex-shrink: 0 !important;
    }

    /* Pastki bo‘lim doim sidebar ichida qoladi */
    & .sidebar .fh-sidebar-bottom {
      flex: 0 0 auto !important;
      margin-top: auto !important;
      padding-top: 12px !important;
    }

    & .sidebar .fh-sidebar-utility button {
      min-height: 38px !important;
      height: auto !important;
      padding: 8px 10px !important;
      font-size: 15px !important;
    }

    & .sidebar .fh-sidebar-profile {
      margin-top: 10px !important;
      padding: 10px !important;
    }

    & .sidebar .fh-sidebar-avatar {
      width: 36px !important;
      height: 36px !important;
      flex: 0 0 36px !important;
    }

    & .sidebar .fh-sidebar-profile-copy strong {
      font-size: 16px !important;
    }

    & .sidebar .fh-sidebar-profile-copy small {
      font-size: 13px !important;
    }

    /* QIDIRUV, SPIN VA BILDIRISHNOMALAR */

    & .topbar {
      display: flex !important;
      align-items: center !important;
      flex: 0 0 auto !important;

      height: 54px !important;
      min-width: 0;
      gap: 12px !important;
      margin: 0 0 var(--layout-gap) !important;
    }

    & .topbar .search {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      height: 54px !important;
      min-height: 54px !important;
      padding: 0 18px !important;
    }

    & .search input {
      width: 100%;
      min-width: 0;
      font-size: 18px !important;
    }

    & .topbar :is(#bell, .fh-spin) {
      width: 50px !important;
      min-width: 50px !important;
      max-width: 50px !important;

      height: 50px !important;
      min-height: 50px !important;
      max-height: 50px !important;

      flex: 0 0 50px !important;
    }

    /* DASHBOARD USTUNLARI */

    & #home-view {
      flex: none !important;
      min-width: 0;
      height: auto !important;
    }

    & #home-view .content-grid {
      display: grid !important;
      grid-template-columns:
        minmax(0, 1fr)
        clamp(280px, 21vw, 320px) !important;

      align-items: stretch !important;
      gap: var(--layout-gap) !important;
      height: auto !important;
    }

    /* Chap va o‘ng ustun bir xil qator o‘lchamlarini ishlatadi */
    & #home-view :is(.left-column, .right-column) {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows:
        var(--hero-height)
        minmax(var(--tools-height), auto)
        minmax(var(--gift-height), auto) !important;

      gap: var(--layout-gap) !important;
      align-content: stretch !important;

      min-width: 0 !important;
      min-height: 0 !important;
      height: auto !important;
      margin: 0 !important;
    }

    & #home-view :is(.left-column, .right-column) > * {
      min-width: 0 !important;
      min-height: 0 !important;
      height: 100% !important;
      margin: 0 !important;
      box-sizing: border-box;
    }

    /* SALOMLASHUV VA ROBOT */

    & #home-view .welcome {
      display: grid !important;
      grid-template-columns: 1.1fr 1fr !important;
      overflow: hidden;
    }

    & #home-view .welcome-copy {
      min-width: 0;
      align-self: center;
      padding: var(--panel-pad) !important;
    }

    & #home-view .fh-personal-greeting {
      margin: 0 !important;
      gap: 6px !important;
    }

    & #home-view .fh-greeting-name {
      font-size: clamp(25px, 2vw, 32px) !important;
      line-height: 1.2 !important;
      overflow-wrap: anywhere;
    }

    & #home-view .fh-greeting-brand {
      font-size: clamp(32px, 2.6vw, 44px) !important;
      line-height: 1.15 !important;
    }

    & #home-view .fh-greeting-message {
      font-size: clamp(28px, 2.2vw, 38px) !important;
      line-height: 1.15 !important;
    }

    & #home-view .welcome-art {
      position: relative !important;
      min-width: 0;
      height: 100% !important;
    }

    & #home-view .welcome-art img {
      position: absolute !important;
      inset: 14px !important;

      width: calc(100% - 28px) !important;
      height: calc(100% - 28px) !important;
      max-width: none !important;
      max-height: none !important;

      object-fit: contain !important;
      scale: 1 !important;
    }

    /* KALKULYATOR, OTM VA EZGU AMAL */

    & #home-view .fh-tools {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: var(--layout-gap) !important;
    }

    & #home-view .fh-tool {
      min-width: 0;
      min-height: 0 !important;
      height: 100% !important;
      padding: var(--panel-pad) !important;
    }

    & #home-view .fh-tool strong {
      font-size: clamp(24px, 1.8vw, 30px) !important;
      line-height: 1.15 !important;
      overflow-wrap: break-word;
    }

    & #home-view :is(.fh-tool, .fh-ezgu) p {
      font-size: 17px !important;
      line-height: 1.35 !important;
    }

    & #home-view .fh-tool-link {
      font-size: 16px !important;
    }

    & #home-view .fh-tool-icon {
      width: 46px !important;
      height: 46px !important;
      flex-shrink: 0;
    }

    & #home-view .fh-ezgu {
      padding: var(--panel-pad) !important;
      gap: 16px !important;
    }

    & #home-view .fh-ezgu strong {
      font-size: 28px !important;
      line-height: 1.2 !important;
    }

    /* KALENDAR */

    & #home-view .fh-calendar-card {
      grid-row: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 16px !important;
    }

    & .fh-calendar-heading {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      min-height: 28px;
      margin-bottom: 10px !important;
    }

    & .fh-calendar-heading #fh-month {
      font-size: 21px !important;
      line-height: 1.2 !important;
    }

    & .fh-month-nav {
      margin-left: auto;
      flex-wrap: nowrap !important;
    }

    /* Olti haftalik oy ham panelni cho‘zmaydi */
    & #home-view #fh-calendar {
      display: grid !important;
      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
      grid-template-rows:
        20px repeat(6, minmax(0, 1fr)) !important;

      gap: 3px !important;
      flex: 1 1 0 !important;
      min-height: 0 !important;
      align-items: center !important;
      justify-items: center !important;
    }

    & #fh-calendar > :is(.fh-date-cell, .fh-date-blank) {
      display: grid !important;
      place-items: center !important;

      width: 28px !important;
      height: 28px !important;
      max-width: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;

      margin: 0 !important;
      padding: 0 !important;
    }

    & #fh-calendar .fh-date-number {
      font-size: 17px !important;
      line-height: 1 !important;
    }

    & #fh-calendar > .fh-week {
      padding: 0 !important;
      font-size: 12px !important;
      line-height: 1 !important;
    }

    /* REYTING */

    & #home-view .fh-ranking-card {
      grid-row: 2 / 4 !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 16px !important;
      overflow: hidden !important;
    }

    & .fh-ranking-card .fh-heading {
      flex-shrink: 0;
      margin-bottom: 12px !important;
    }

    & .fh-ranking-card .fh-heading h2 {
      font-size: 24px !important;
      line-height: 1.2 !important;
    }

    & .fh-ranking-card .fh-tabs {
      flex-shrink: 0;
    }

    & #fh-ranking {
      flex: 1 1 0 !important;
      min-height: 0 !important;
    }

    & #fh-ranking .fh-rank-row {
      grid-template-columns:
        24px 28px minmax(0, 1fr) auto !important;
      gap: 5px !important;
    }

    & #fh-ranking .fh-ranking-self .fh-rank-row {
      grid-template-columns:
        40px 28px minmax(0, 1fr) auto !important;
    }

    /* BOSHQA ICHKI SAHIFALAR */

    & .main > :is(
      #detail-view,
      #fh-uni-view,
      #fh-subject-view,
      .fh-beta-coming
    ):not([hidden]) {
      flex: none !important;
      min-width: 0 !important;
      min-height: 300px !important;
      height: auto !important;
      max-width: 100% !important;
      overflow: auto !important;
    }

    /* TOR PLANSHET / TOR BRAUZER OYNASI */
    @media (max-width: 1099px) {
      grid-template-columns: 252px minmax(0, 1fr) !important;

      & #home-view .content-grid {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      & #home-view .right-column {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 440px !important;
      }

      & #home-view .right-column >
      :is(.fh-calendar-card, .fh-ranking-card) {
        grid-row: 1 !important;
      }
    }

    @media (max-width: 899px) {
      & #home-view .left-column {
        grid-template-rows: var(--hero-height) auto auto !important;
      }

      & #home-view .fh-tools {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      & #home-view .fh-tool {
        min-height: 220px !important;
      }

      & #home-view .fh-ezgu {
        min-height: 130px !important;
      }

      & #home-view .right-column {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 320px 440px !important;
      }

      & #home-view .right-column > .fh-ranking-card {
        grid-row: 2 !important;
      }

      & #home-view .welcome {
        grid-template-columns: 1.25fr .75fr !important;
      }

      & #home-view .welcome-copy {
        padding: 16px !important;
      }

      & #home-view .fh-greeting-brand {
        font-size: 30px !important;
      }

      & #home-view .fh-greeting-message {
        font-size: 27px !important;
      }
    }

    /* Past bo‘yli ekranlarda sidebar oraliqlari qisqaradi */
    @media (max-height: 700px) {
      & .sidebar.fh-sidebar-beta {
        padding-top: 12px !important;
      }

      & .sidebar .brand {
        padding-bottom: 12px !important;
      }

      & .sidebar .fh-sidebar-bottom {
        padding-top: 8px !important;
      }
    }
  }
}

/* DIALOGLAR EKRAN CHEGARASI ICHIDA */

html body.fh-desktop-fit dialog {
  box-sizing: border-box;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
}

html body.fh-desktop-fit #fh-spin-studio
:is(.sp-head, .sp-footer) {
  flex-wrap: wrap;
}

html body.fh-desktop-fit #notifications {
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
}

/* TELEFONNING MAVJUD VAQTINCHALIK TARTIBI */

@media (max-width: 700px) {
  html body.fh-desktop-fit .app {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    padding: 12px !important;
  }

  html body.fh-desktop-fit .sidebar.fh-sidebar-beta {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
  }

  html body.fh-desktop-fit .sidebar .fh-sidebar-bottom {
    margin-top: 20px !important;
  }
}
@media (min-width: 701px) {
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-greeting-name {
    font-size: clamp(36px, 3vw, 48px) !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-greeting-brand {
    font-size: clamp(44px, 4vw, 66px) !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-greeting-message {
    font-size: clamp(38px, 3.4vw, 56px) !important;
  }
}
/* Dashboard — bir qatorda to‘rtta tik kartochka */
@media (min-width: 1100px) {
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .content-grid {
    height: calc(
      100dvh
      - var(--layout-pad, 16px)
      - var(--layout-pad, 16px)
      - 54px
      - var(--layout-gap, 16px)
    ) !important;

    min-height: 554px !important;

    grid-template-rows:
  minmax(230px, .95fr)
  minmax(210px, .9fr)
  minmax(90px, .4fr) !important;
  }

  /* Ikkala ustun bir xil qatorlardan foydalanadi */
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root)
  #home-view :is(.left-column, .right-column) {
    grid-row: 1 / 4 !important;
    grid-template-rows: subgrid !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .left-column {
    grid-column: 1 !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .right-column {
    grid-column: 2 !important;
  }

  /* To‘rttalasi bitta qatorda */
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-tools {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;

    gap: var(--layout-gap, 16px) !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-tool {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(12px, 1vw, 20px) !important;

    box-sizing: border-box;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-tool strong {
    max-width: 100% !important;
    margin: 10px 0 8px !important;
    font-size: clamp(22px, 1.4vw, 28px) !important;
    line-height: 1.15 !important;
    overflow-wrap: break-word;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-tool p {
    margin: 0 0 12px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-tool-link {
    margin-top: auto !important;
    font-size: 15px !important;
    gap: 8px;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-tool .fh-tool-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
  }

  /* Yangiliklar pastki qatordan chiqib ketmaydi */
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-dashboard-news {
    height: 100% !important;
    min-height: 0 !important;
    padding: 12px 18px !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-dashboard-news strong {
    font-size: 26px !important;
    margin-bottom: 4px !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-dashboard-news p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-calendar-card {
    grid-row: 1 !important;
    padding: 12px !important;
  }

  /* Past bo‘yli ekranda kalendar ham o‘z qatoriga sig‘adi */
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root)
  #fh-calendar > :is(.fh-date-cell, .fh-date-blank) {
    width: 24px !important;
    height: 24px !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-ranking-card {
    grid-row: 2 / 4 !important;
  }
}

/* Tor planshetda o‘qilishi uchun ikki ustunga qaytadi */
@media (min-width: 701px) and (max-width: 1099px) {
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .left-column {
    grid-template-rows:
      var(--hero-height, 290px)
      auto
      minmax(100px, auto) !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(220px, auto)) !important;
  }
}
/* Past bo‘yli noutbuk ekranida dashboardni joylashtirish */
@media (min-width: 1100px) and (min-height: 640px) and (max-height: 740px) {
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .content-grid {
    min-height: 0 !important;

    grid-template-rows:
      minmax(210px, .95fr)
      minmax(210px, .9fr)
      minmax(90px, .4fr) !important;
  }
}
/* Kartochkalar o‘zlariga ajratilgan kenglikka moslashadi */
@media (min-width: 701px) {
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-tools {
    container-type: inline-size;
    container-name: fh-tools;
  }
}

/*
  To‘rtta kartochka joylashgan maydon torayganda:
  ikonka chapda, sarlavha uning o‘ngida.
*/
@container fh-tools (max-width: 1050px) {
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root) #home-view .fh-tool {
    display: grid !important;

    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-rows:
      auto
      auto
      minmax(0, 1fr)
      auto !important;

    align-items: start !important;
    align-content: stretch !important;
    column-gap: 8px !important;
    row-gap: 10px !important;

    min-width: 0 !important;
    padding: clamp(10px, 1.7cqw, 18px) !important;
    text-align: left !important;
  }

  /* Ikonka */
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root)
  #home-view .fh-tool > .fh-tool-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;

    align-self: center !important;
    justify-self: start !important;

    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }

  /* Ikonkaning o‘ngidagi sarlavha */
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root)
  #home-view .fh-tool > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;

    align-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;

    font-size: clamp(21px, 1.4vw, 27px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }

  /* Hozirgi izoh matni — keyin shu joyga tezkor havolalar qo‘yamiz */
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root)
  #home-view .fh-tool > p {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    min-width: 0 !important;
    margin: 0 !important;

    font-size: clamp(12px, 1.7cqw, 15px) !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
  }

  /* Pastki ochish havolasi */
  html body.fh-desktop-fit
  :is(.app, #fh-layout-root)
  #home-view .fh-tool > .fh-tool-link {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    align-self: end !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 8px !important;

    font-size: clamp(12px, 1.7cqw, 15px) !important;
    line-height: 1.2 !important;
  }

  html body.fh-desktop-fit
  :is(.app, #fh-layout-root)
  #home-view .fh-tool > .fh-tool-link svg {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
  }
}

/* Milliy sertifikat — Coming Soon */
html body.fh-desktop-fit:has(
  #fh-subject-view.fh-subject-coming:not([hidden])
) .topbar {
  display: none !important;
}

html body.fh-desktop-fit :is(.app, #fh-layout-root)
#fh-subject-view.fh-subject-coming:not([hidden]) {
  display: grid !important;
  align-items: center !important;
  justify-items: stretch !important;

  container-type: inline-size;
  container-name: fh-national-coming;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;

  min-height: calc(
    100dvh
    - var(--layout-pad, 16px)
    - var(--layout-pad, 16px)
  ) !important;

  margin: 0 !important;
  padding: clamp(20px, 3vw, 48px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  background: transparent !important;
  text-align: left !important;
}

#fh-subject-view .fh-cs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(20px, 3cqw, 48px);

  width: 100%;
  max-width: 1480px;
  min-width: 0;
  margin: 0 auto;
}

#fh-subject-view .fh-cs-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
  color: #faead2;
}

/* Yuqoridagi ikonka va bo‘lim nomi */
#fh-subject-view .fh-cs-label {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

#fh-subject-view .fh-cs-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  width: clamp(48px, 4.7cqw, 62px);
  height: clamp(52px, 5cqw, 66px);

  border: 1px solid #93bfff40;
  border-radius: 16px;
  background: linear-gradient(145deg, #245ca735, #06255035);
  box-shadow: inset 0 1px 0 #ffffff12;
  color: #faead2;
}

#fh-subject-view .fh-cs-emblem > svg.fh-cs-header-icon {
  display: block;
  width: clamp(30px, 3cqw, 38px);
  height: clamp(38px, 3.8cqw, 48px);
  max-width: 75%;
  max-height: 80%;
  fill: currentColor;
  stroke: none;
}

#fh-subject-view .fh-cs-header-icon :is(path, circle) {
  fill: #faead2;
  stroke: none;
}

#fh-subject-view .fh-cs-label-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#fh-subject-view .fh-cs-label-copy strong {
  color: #faead2 !important;
  -webkit-text-fill-color: #faead2 !important;

  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(28px, 2.8cqw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}

/* Asosiy sarlavha */
#fh-subject-view .fh-cs-title {
  margin: clamp(24px, 3cqw, 42px) 0 22px !important;

  color: #faead2 !important;
  -webkit-text-fill-color: #faead2 !important;

  font-family: "Crimson Pro", Georgia, serif !important;
  font-size: clamp(64px, min(10.5cqw, 17dvh), 164px) !important;
  font-weight: 600 !important;
  line-height: .94 !important;
  letter-spacing: -.045em;
}

#fh-subject-view .fh-cs-title > span {
  display: block;
}

#fh-subject-view .fh-cs-accent {
  display: block;
  width: clamp(56px, 7cqw, 105px);
  height: 4px;
  margin-bottom: clamp(18px, 2cqw, 28px);

  border-radius: 999px;
  background: #559cff;
  transform-origin: left center;
}

#fh-subject-view :is(.fh-cs-lead, .fh-cs-description) {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

#fh-subject-view .fh-cs-lead {
  margin: 0 0 10px !important;
  color: #faead2 !important;
  -webkit-text-fill-color: #faead2 !important;

  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(20px, 2.05cqw, 30px) !important;
  font-weight: 600;
  line-height: 1.25 !important;
}

#fh-subject-view .fh-cs-description {
  margin: 0 !important;
  color: #c4d4e9 !important;
  -webkit-text-fill-color: #c4d4e9 !important;

  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(16px, 1.5cqw, 21px) !important;
  line-height: 1.45 !important;
}

/* Tayyorlanmoqda belgisi */
#fh-subject-view .fh-cs-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;

  margin-top: clamp(22px, 2.5cqw, 36px);
  padding: 11px 18px;

  border: 1px solid #81b5ed60;
  border-radius: 14px;
  background: #0c346329;
  box-shadow: inset 0 1px 0 #ffffff08;

  color: #faead2;
  font: 600 clamp(16px, 1.5cqw, 21px)/1.2
    "Crimson Pro", Georgia, serif;
}

#fh-subject-view .fh-cs-dot {
  display: block;
  flex: 0 0 9px;
  width: 9px;
  height: 9px;

  border-radius: 50%;
  background: #559cff;
}

#fh-subject-view .fh-cs-slogan {
  margin: clamp(26px, 4cqw, 56px) 0 0 !important;

  color: #c4d4e9 !important;
  -webkit-text-fill-color: #c4d4e9 !important;

  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(15px, 1.4cqw, 20px) !important;
  font-style: italic;
  line-height: 1.3;
}

/* Rasmning burilgan chegarasi ham ajratilgan maydonga sig‘adi. */
#fh-subject-view .fh-cs-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: min(100%, 62dvh, 560px);
  min-width: 0;
  aspect-ratio: 1;
  margin: 0;
  justify-self: center;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

#fh-subject-view .fh-cs-art::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #327ee225, #245ca708 55%, transparent 75%);
}

#fh-subject-view .fh-cs-3d-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 75%;
  max-width: 75%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  object-fit: contain;
  /* Reference pose: top edge rises right; top of the sheet leans right. */
  transform: matrix(.85, .12, -.46, 1.1, 0, 0);
  transform-origin: center;
  filter: drop-shadow(0 16px 24px #00112b25);
  user-select: none;
  pointer-events: none;
}

/* Sahifaga kirganda matnlarning ketma-ket chiqishi */
#fh-subject-view:not([hidden]) :is(
  .fh-cs-label,
  .fh-cs-title > span,
  .fh-cs-lead,
  .fh-cs-description,
  .fh-cs-status,
  .fh-cs-slogan
) {
  animation: fh-cs-text-enter 850ms
    cubic-bezier(.22, 1, .36, 1) both;
}

#fh-subject-view:not([hidden]) .fh-cs-label {
  animation-delay: 0ms;
}

#fh-subject-view:not([hidden]) .fh-cs-title > span:first-child {
  animation-delay: 100ms;
}

#fh-subject-view:not([hidden]) .fh-cs-title > span:last-child {
  animation-delay: 200ms;
}

#fh-subject-view:not([hidden]) .fh-cs-lead {
  animation-delay: 310ms;
}

#fh-subject-view:not([hidden]) .fh-cs-description {
  animation-delay: 390ms;
}

#fh-subject-view:not([hidden]) .fh-cs-status {
  animation-delay: 470ms;
}

#fh-subject-view:not([hidden]) .fh-cs-slogan {
  animation-delay: 550ms;
}

#fh-subject-view:not([hidden]) .fh-cs-accent {
  animation: fh-cs-line-enter 800ms
    cubic-bezier(.22, 1, .36, 1) 240ms both;
}

#fh-subject-view:not([hidden]) .fh-cs-dot {
  animation: fh-cs-pulse 2.6s ease-in-out infinite;
}

@keyframes fh-cs-text-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fh-cs-line-enter {
  from {
    opacity: 0;
    transform: scaleX(.2);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes fh-cs-pulse {
  0%, 100% {
    opacity: .3;
    box-shadow: 0 0 0 0 #559cff00;
  }

  50% {
    opacity: 1;
    box-shadow:
      0 0 0 5px #559cff12,
      0 0 14px #559cff80;
  }
}

/* Tor ekranda pastma-past joylashuv */
@container fh-national-coming (max-width: 760px) {
  #fh-subject-view .fh-cs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  #fh-subject-view .fh-cs-title {
    font-size: clamp(64px, 16cqw, 112px) !important;
  }

  #fh-subject-view .fh-cs-art {
    width: 100%;
    max-width: min(100%, 360px);
    margin: 0 auto;
  }

  #fh-subject-view .fh-cs-slogan {
    margin-top: 24px !important;
  }
}

@media (min-width: 701px) and (max-height: 700px) {
  #fh-subject-view .fh-cs-title {
    margin-top: 22px !important;
    margin-bottom: 18px !important;
  }

  #fh-subject-view .fh-cs-slogan {
    margin-top: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fh-subject-view :is(
    .fh-cs-label,
    .fh-cs-title > span,
    .fh-cs-accent,
    .fh-cs-lead,
    .fh-cs-description,
    .fh-cs-status,
    .fh-cs-slogan,
    .fh-cs-dot
  ) {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
/* Sertifikat rasmini tabiiy holatda kattaroq ko‘rsatish */
#fh-subject-view .fh-cs-art {
  width: 100% !important;
  max-width: 680px !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  justify-self: center;
  overflow: visible !important;
}

#fh-subject-view .fh-cs-3d-image {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 78dvh;
  aspect-ratio: auto !important;
  object-fit: contain;

  transform: none !important;
  rotate: none !important;
  scale: none !important;
  margin: 0 auto !important;
}

/* Matn va rasm pastma-past turgan kichik ekranlar */
@container fh-national-coming (max-width: 760px) {
  #fh-subject-view .fh-cs-art {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
  }

  #fh-subject-view .fh-cs-3d-image {
    max-height: 60dvh;
  }
}

/* Avtotest — indexdagi rasm o‘z nisbatlarini saqlaydi. */
#fh-subject-view[data-coming-view="avtotest"] .fh-cs-art {
  max-width: 720px !important;
}

#fh-subject-view[data-coming-view="avtotest"] .fh-cs-3d-image {
  max-height: 72dvh;
}

#fh-subject-view:is([data-coming-view="avtotest"], [data-coming-view="prezident"]) .fh-cs-emblem > svg {
  display: block;
  width: 36px;
  height: 36px;
  max-width: 75%;
  max-height: 80%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@container fh-national-coming (max-width: 760px) {
  #fh-subject-view[data-coming-view="avtotest"] .fh-cs-art {
    max-width: 480px !important;
  }
}


/* Avtotest rasmiga yengil kattalashtirish; mobil ekranlarda asl o‘lcham. */
#fh-subject-view[data-coming-view="avtotest"] .fh-cs-3d-image {
  scale: 1.27 !important;
  transform-origin: center;
}

/* Prezident maktabi indexdagi rasm bilan bir xil Coming Soon oynasida. */
#fh-subject-view[data-coming-view="prezident"] .fh-cs-art {
  max-width: 680px !important;
}

@container fh-national-coming (max-width: 760px) {
  #fh-subject-view[data-coming-view="avtotest"] .fh-cs-3d-image {
    scale: 1 !important;
  }

  #fh-subject-view[data-coming-view="prezident"] .fh-cs-art {
    max-width: 440px !important;
    margin: 0 auto !important;
  }
}

/* Dashboard qidiruvi: natijalar sahifa tartibini siljitmaydi. */
.topbar:has(#fh-search-results) {
  position: relative;
  z-index: 12;
}
#fh-search-results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 8px);
  max-height: min(240px, 40dvh);
  overflow: auto;
  padding: 6px;
  border: 1px solid #faead24d;
  border-radius: 14px;
  background: #112747;
  color: #faead2;
  box-shadow: 0 12px 24px #00112b45;
}
#fh-search-results[hidden] { display: none !important; }
#fh-search-results button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
#fh-search-results button:is(:hover, :focus-visible) { background: #ffffff1a; }
#fh-search-results p { margin: 0; padding: 9px 12px; }
#fh-subject-view .fh-cs-emblem > svg.fh-shared-coming-icon {
  width: min(36px, 75%) !important;
  height: min(36px, 75%) !important;
}
#fh-subject-view .fh-shared-coming-icon .fh-game-reference,
#fh-subject-view .fh-shared-coming-icon .fh-game-reference-buttons circle {
  fill: #faead2 !important;
  stroke: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  #home-view #fh-ezgu-card.fh-dashboard-news { transition: translate .2s ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #home-view #fh-ezgu-card.fh-dashboard-news:hover { translate: 0 -4px; }
}
/* Yangiliklar — bukilgan gazeta */
#fh-subject-view .fh-cs-emblem
svg .fh-news-back {
  fill: url(#fh-news-back-heading) !important;
  stroke: none !important;
}

#fh-subject-view .fh-cs-emblem
svg .fh-news-paper {
  fill: url(#fh-news-paper-heading) !important;
  stroke: #fff9ee80 !important;
  stroke-width: 0.35;
}

#fh-subject-view .fh-cs-emblem
svg .fh-news-edge {
  fill: none !important;
  stroke: #ffffffb3 !important;
  stroke-width: 0.45;
}

#fh-subject-view .fh-cs-emblem
svg .fh-news-title {
  fill: #173e64 !important;
  stroke: none !important;
  font-family: Arial, sans-serif;
  font-size: 6.1px;
  font-weight: 900;
  letter-spacing: -0.3px;
}

#fh-subject-view .fh-cs-emblem
svg .fh-news-lines {
  fill: none !important;
  stroke: #36536a !important;
  stroke-width: 1.25;
  stroke-linecap: round;
}