/* Responsive UX rules loaded after page styles. */
body:not(.admin-desktop) {
  overflow-x: hidden;
}

body:not(.admin-desktop) .user-work-panel {
  min-width: 0;
}

body:not(.admin-desktop).user-desktop-like .user-workbench {
  grid-template-columns: minmax(0, 1fr) !important;
}

body:not(.admin-desktop).user-desktop-like .user-side-rail {
  display: none !important;
}

body:not(.admin-desktop).user-desktop-like .user-work-panel {
  grid-column: 1 / -1;
}

@media (min-width: 1101px) {
  body:not(.admin-desktop) {
    --ux-front-rail: 232px;
    --ux-page-gap: 18px;
  }

  body:not(.admin-desktop) .page {
    width: 100%;
    max-width: none;
  }

  body:not(.admin-desktop):has(.front-app-rail) .container,
  body:not(.admin-desktop):has(.front-app-rail) .content-container,
  body:not(.admin-desktop):has(.front-app-rail) .psd-profile-main,
  body:not(.admin-desktop):has(.front-app-rail) .psd-home-main,
  body:not(.admin-desktop):has(.front-app-rail) .site-footer {
    width: min(1760px, calc(100% - 280px)) !important;
    max-width: none !important;
    margin-left: 256px !important;
    margin-right: 24px !important;
  }

  body:not(.admin-desktop):not(:has(.front-app-rail)) .container,
  body:not(.admin-desktop):not(:has(.front-app-rail)) .content-container,
  body:not(.admin-desktop):not(:has(.front-app-rail)) .psd-home-main,
  body:not(.admin-desktop):not(:has(.front-app-rail)) .psd-profile-main,
  body:not(.admin-desktop):not(:has(.front-app-rail)) .site-footer {
    width: min(1360px, calc(100% - 48px)) !important;
    max-width: none !important;
  }

  body:not(.admin-desktop) .container.single {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:not(.admin-desktop):not(:has(.front-app-rail)) .container.single {
    grid-template-columns: minmax(0, min(1120px, 100%)) !important;
    justify-content: center !important;
  }

  body.user-desktop-like .user-work-panel {
    display: grid;
    gap: var(--ux-page-gap);
  }

  .psd-home-page .home-workbench .user-work-panel,
  .psd-profile-page .user-work-panel {
    gap: 18px;
  }

  .psd-home-page .psd-search-form {
    grid-template-columns: minmax(360px, 1fr) minmax(160px, 240px);
    align-items: center;
  }

  .psd-home-page .psd-like-grid,
  .psd-profile-page .user-training-grid,
  .practice-entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .psd-profile-page .user-center-card {
    grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .psd-profile-page .user-center-stats,
  .psd-profile-page .user-center-training,
  .psd-profile-page .user-center-notice {
    grid-column: 1 / -1;
  }

  .psd-profile-page .psd-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .profile-basic-cards,
  .psd-profile-page .profile-basic-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .library-zone-layout,
  .reading-library-layout,
  .wordbook-layout,
  .typing-layout {
    gap: 18px !important;
  }

  .wordbook-layout {
    grid-template-columns: minmax(250px, 0.26fr) minmax(0, 1fr) !important;
  }

  .reading-layout {
    grid-template-columns: minmax(300px, 0.35fr) minmax(0, 1fr) !important;
  }

  .reading-session-shell {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.28fr) !important;
  }

  .practice-center-hero {
    min-height: 124px !important;
    align-items: center !important;
    padding: 22px 24px !important;
  }

  .practice-entry {
    min-height: 124px !important;
    align-content: start;
  }

  .paper-practice-page .paper-setup-card,
  .paper-session-card {
    max-width: none !important;
  }

  .paper-exam-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .paper-practice-shell {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 22vw, 390px) !important;
    gap: 20px !important;
  }

  .paper-answer-panel {
    top: 18px !important;
  }

  .paper-document-page {
    max-width: min(1320px, 100%) !important;
    padding: 44px clamp(46px, 4vw, 72px) !important;
  }

  .paper-info-title {
    margin: 48px 0 38px !important;
  }

  .paper-question-block {
    grid-template-columns: 48px minmax(0, 1fr) 36px !important;
    gap: 12px !important;
  }

  .paper-choice-list.choice-layout-medium {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }

  .paper-choice-list .choice {
    min-height: 34px !important;
    height: auto !important;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 1600px) {
  body:not(.admin-desktop):has(.front-app-rail) .container,
  body:not(.admin-desktop):has(.front-app-rail) .content-container,
  body:not(.admin-desktop):has(.front-app-rail) .psd-profile-main,
  body:not(.admin-desktop):has(.front-app-rail) .psd-home-main,
  body:not(.admin-desktop):has(.front-app-rail) .site-footer {
    width: min(1880px, calc(100% - 300px)) !important;
    margin-left: 264px !important;
    margin-right: 28px !important;
  }

  body.user-desktop-like .user-workbench {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .paper-exam-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .psd-profile-page .psd-stats-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  body:not(.admin-desktop) {
    font-size: 14px;
    overflow-x: hidden;
  }

  body:not(.admin-desktop) .page {
    width: 100%;
    max-width: none;
    padding: 6px 0 12px !important;
    overflow-x: hidden;
  }

  body:not(.admin-desktop) .front-topbar,
  body:not(.admin-desktop) .topbar,
  body:not(.admin-desktop) .container,
  body:not(.admin-desktop) .content-container,
  body:not(.admin-desktop) .psd-home-main,
  body:not(.admin-desktop) .psd-profile-main,
  body:not(.admin-desktop) .site-footer {
    width: min(100% - 14px, 720px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:not(.admin-desktop) .front-topbar,
  body:not(.admin-desktop) .topbar {
    top: 6px;
    min-height: 42px !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }

  body:not(.admin-desktop) .topbar-brand,
  body:not(.admin-desktop) .topbar > h1 {
    min-height: 38px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
  }

  body:not(.admin-desktop) .site-menu-toggle,
  body:not(.admin-desktop) .menu-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  body:not(.admin-desktop) .container.single {
    grid-template-columns: 1fr !important;
  }

  body.user-desktop-like .user-workbench {
    gap: 10px !important;
  }

  body:not(.admin-desktop) .card,
  body:not(.admin-desktop) .psd-panel,
  body:not(.admin-desktop) .psd-profile-card,
  body:not(.admin-desktop) .psd-info-panel,
  body:not(.admin-desktop) .psd-profile-other-panel,
  body:not(.admin-desktop) .library-card,
  body:not(.admin-desktop) .library-row,
  body:not(.admin-desktop) .wordbook-sidebar,
  body:not(.admin-desktop) .wordbook-content,
  body:not(.admin-desktop) .wordbook-card,
  body:not(.admin-desktop) .typing-main-card,
  body:not(.admin-desktop) .typing-article-item,
  body:not(.admin-desktop) .settings-block,
  body:not(.admin-desktop) .feature-mini-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .psd-home-page .home-line-decoration {
    min-height: 48px !important;
    margin-bottom: 0 !important;
  }

  .psd-home-page .psd-search-form {
    grid-template-columns: minmax(0, 1fr) 116px !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }

  .psd-home-page .psd-search-input-wrap input,
  .psd-home-page .psd-search-form select {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    font-size: 13px;
  }

  .psd-home-page .psd-search-submit {
    width: 38px !important;
    height: 38px !important;
  }

  .psd-home-page .psd-like-grid,
  .psd-profile-page .user-training-grid,
  .practice-entry-grid,
  .feature-card-grid,
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .psd-profile-page .user-center-card {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .psd-profile-page .psd-profile-hero {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 10px !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .psd-profile-page .psd-avatar-box {
    width: 54px !important;
    height: 54px !important;
  }

  .psd-profile-page .psd-profile-name h2 {
    font-size: 18px !important;
  }

  .psd-profile-page .psd-profile-name p {
    font-size: 12px !important;
    line-height: 1.45;
  }

  .psd-profile-page .psd-profile-actions {
    grid-column: 3;
    display: flex !important;
    gap: 5px !important;
    justify-content: flex-end !important;
  }

  .psd-profile-page .psd-profile-actions .btn,
  .psd-profile-page .psd-settings-link {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  .psd-profile-page .psd-settings-link {
    width: 32px !important;
    min-width: 32px !important;
  }

  .psd-profile-page .profile-basic-cards,
  .psd-profile-page .psd-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .psd-profile-page .profile-basic-cards > div,
  .psd-profile-page .psd-stats-grid > div {
    min-height: 54px !important;
    padding: 8px !important;
  }

  .practice-center-hero {
    min-height: 72px !important;
    padding: 10px 12px !important;
  }

  .practice-center-hero h2 {
    font-size: 20px !important;
  }

  .practice-center-hero p {
    font-size: 12px !important;
  }

  .practice-entry {
    min-height: 84px !important;
    padding: 10px !important;
    gap: 5px !important;
  }

  .practice-entry strong {
    font-size: 15px !important;
  }

  .practice-entry small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .paper-practice-shell,
  .paper-document-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .paper-session-head {
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  .paper-session-head h2 {
    font-size: 17px !important;
    line-height: 1.25;
  }

  .paper-session-head p {
    font-size: 12px !important;
  }

  .paper-document-page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 9px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    line-height: 1.55;
  }

  .paper-info-title {
    margin: 30px 0 26px !important;
  }

  .paper-info-title h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  .paper-info-block {
    padding: 12px 0 !important;
  }

  .paper-document-section {
    padding: 16px 0 !important;
  }

  .paper-section-header {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .paper-section-header strong {
    font-size: 15px !important;
  }

  .paper-question-block {
    grid-template-columns: 28px minmax(0, 1fr) 18px !important;
    gap: 6px !important;
    padding: 8px 0 !important;
  }

  .paper-question-text,
  .ocr-paragraph {
    font-size: 13px !important;
    line-height: 1.58 !important;
  }

  .paper-choice-list.choice-layout-short {
    grid-template-columns: repeat(4, minmax(30px, 1fr)) !important;
  }

  .paper-choice-list.choice-layout-medium {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .paper-choice-list.choice-layout-long {
    grid-template-columns: 1fr !important;
  }

  .paper-choice-list .choice,
  .paper-answer-sheet .choice {
    min-height: 28px !important;
    height: auto !important;
    padding: 4px 5px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .paper-answer-panel {
    --paper-drawer-width: min(76vw, 318px);
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    z-index: 1000 !important;
    width: var(--paper-drawer-width) !important;
    max-width: var(--paper-drawer-width) !important;
    max-height: calc(100vh - 56px) !important;
    padding: 10px !important;
    overflow: auto !important;
    transform: translate(100%, -50%) !important;
    transition: transform 180ms ease !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22) !important;
  }

  .paper-answer-panel.is-open {
    transform: translate(0, -50%) !important;
  }

  .paper-answer-panel-body {
    gap: 8px !important;
  }

  .paper-timer-box {
    padding: 10px !important;
  }

  .paper-timer-box strong {
    font-size: 24px !important;
  }

  .paper-answer-panel .actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
  }

  .paper-answer-panel .actions .btn {
    width: 100% !important;
    min-height: 32px !important;
    padding: 5px 7px !important;
    font-size: 12px !important;
  }

  .paper-answer-sheet .question-grid {
    gap: 6px !important;
    padding: 7px !important;
  }

  .paper-answer-sheet .question {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .paper-answer-sheet .choices {
    grid-template-columns: repeat(4, minmax(28px, 1fr)) !important;
    gap: 4px !important;
  }

  .paper-answer-drawer-toggle {
    --paper-drawer-width: min(76vw, 318px);
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    z-index: 1001 !important;
    display: inline-grid !important;
    place-items: center;
    width: 34px !important;
    min-width: 34px !important;
    height: 92px !important;
    min-height: 92px !important;
    padding: 6px 3px !important;
    transform: translateY(-50%) !important;
    transition: right 180ms ease, transform 180ms ease !important;
    border: 1px solid var(--line) !important;
    border-right: 0 !important;
    border-radius: 9px 0 0 9px !important;
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    writing-mode: vertical-rl;
  }

  .paper-answer-drawer-toggle.is-open {
    right: var(--paper-drawer-width) !important;
  }
}

@media (max-width: 640px) {
  body:not(.admin-desktop) {
    font-size: 13px;
  }

  body:not(.admin-desktop) .front-topbar,
  body:not(.admin-desktop) .topbar,
  body:not(.admin-desktop) .container,
  body:not(.admin-desktop) .content-container,
  body:not(.admin-desktop) .psd-home-main,
  body:not(.admin-desktop) .psd-profile-main,
  body:not(.admin-desktop) .site-footer {
    width: calc(100% - 12px) !important;
  }

  body:not(.admin-desktop) .topbar-brand h1,
  body:not(.admin-desktop) .topbar > h1 {
    font-size: 18px !important;
  }

  body:not(.admin-desktop) .btn,
  body:not(.admin-desktop) input,
  body:not(.admin-desktop) select,
  body:not(.admin-desktop) textarea {
    min-height: 36px !important;
    font-size: 13px;
  }

  .psd-home-page .psd-search-form {
    grid-template-columns: minmax(0, 1fr) 96px !important;
  }

  .psd-home-page .psd-like-grid,
  .psd-profile-page .user-training-grid,
  .practice-entry-grid,
  .feature-card-grid,
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .psd-profile-page .psd-info-panel h2,
  .psd-panel-title-row h2 {
    font-size: 16px !important;
  }

  .psd-profile-page .profile-basic-cards > div,
  .psd-profile-page .psd-stats-grid > div {
    min-height: 48px !important;
  }

  .paper-answer-panel {
    --paper-drawer-width: min(82vw, 292px);
    max-height: calc(100vh - 44px) !important;
  }

  .paper-answer-drawer-toggle {
    --paper-drawer-width: min(82vw, 292px);
    width: 32px !important;
    min-width: 32px !important;
    height: 84px !important;
    min-height: 84px !important;
    font-size: 11px !important;
  }

  .paper-timer-box strong {
    font-size: 22px !important;
  }
}

@media (max-width: 380px) {
  body:not(.admin-desktop) .front-topbar,
  body:not(.admin-desktop) .topbar,
  body:not(.admin-desktop) .container,
  body:not(.admin-desktop) .content-container,
  body:not(.admin-desktop) .psd-home-main,
  body:not(.admin-desktop) .psd-profile-main,
  body:not(.admin-desktop) .site-footer {
    width: calc(100% - 10px) !important;
  }

  .psd-home-page .psd-search-form {
    grid-template-columns: 1fr !important;
  }

  .practice-entry strong {
    font-size: 14px !important;
  }

  .paper-document-page {
    padding: 14px 7px !important;
  }

  .paper-choice-list.choice-layout-short {
    grid-template-columns: repeat(4, minmax(26px, 1fr)) !important;
  }

  .paper-answer-panel {
    --paper-drawer-width: min(84vw, 280px);
  }

  .paper-answer-drawer-toggle {
    --paper-drawer-width: min(84vw, 280px);
  }
}