/* Teacher mobile V1 responsive layer. Desktop rules stay in page styles. */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    -webkit-text-size-adjust: 100%;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button,
  a,
  .fpill,
  .grade-card,
  .course-bubble,
  .video-card,
  .related-item {
    -webkit-tap-highlight-color: rgba(255, 111, 159, 0.18);
  }

  .nav-links,
  .top-nav,
  .nav-user,
  .navbar .nav-links,
  .navbar .nav-user {
    display: none !important;
  }

  .app-top,
  .glass-nav,
  .navbar {
    position: relative !important;
    top: auto !important;
    height: 60px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 8px 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .brand,
  .logo {
    min-width: 0 !important;
    max-width: 100% !important;
    position: static !important;
    gap: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }

  .brand-mark,
  .logo-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: block !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("/mobile/images/home/%E7%BD%91%E7%AB%99logo.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .brand-mark img,
  .logo-icon img {
    display: none !important;
  }

  .brand-name,
  .brand span:not(.brand-mark),
  .logo,
  #siteName,
  #navSiteName {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px !important;
    line-height: 1.2;
  }

  .avatar-btn,
  .top-nav .avatar-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
  }

  .admin-return-link:not(.mobile-admin-entry) {
    display: none !important;
  }

  .mobile-admin-entry {
    display: none !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid rgba(214, 222, 238, 0.9);
    box-shadow: 0 -10px 28px rgba(38, 51, 79, 0.14);
    backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav a {
    min-width: 0;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 16px;
    color: #596681;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
  }

  .mobile-bottom-nav a::before {
    font-size: 20px;
    line-height: 1;
  }

  .mobile-bottom-nav a[data-mobile-nav="home"]::before { content: "⌂"; }
  .mobile-bottom-nav a[data-mobile-nav="videos"]::before { content: "▶"; }
  .mobile-bottom-nav a[data-mobile-nav="plans"]::before { content: "▤"; }
  .mobile-bottom-nav a[data-mobile-nav="mine"]::before { content: "●"; }

  .mobile-bottom-nav a.active {
    background: #ffe8f0;
    color: #e94968;
  }

  .video-library-shell .mobile-filter-selects {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .video-library-shell .mobile-filter-selects select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 24px 0 10px !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 13px !important;
    outline: 0 !important;
    background: rgba(255, 255, 255, .86) !important;
    color: #53617d !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
  }

  .video-library-shell .filter-bar {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 20px !important;
  }

  .video-library-shell .filter-row:not(:last-child) {
    display: none !important;
  }

  .video-library-shell .filter-row:last-child {
    display: block !important;
    margin: 10px 0 0 !important;
  }

  .video-library-shell .filter-row:last-child .filter-label {
    display: none !important;
  }

  .video-library-shell .filter-row:last-child .search-bar {
    width: 100% !important;
    max-width: none !important;
    height: 46px !important;
    padding: 4px !important;
    border-radius: 14px !important;
  }

  .video-library-shell .filter-row:last-child .search-bar input {
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }

  .video-library-shell .filter-row:last-child .search-bar button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
  }

  .mobile-bottom-nav a span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-app,
  .app-shell {
    min-height: 100svh !important;
    width: 100% !important;
    padding: 14px 12px 24px !important;
  }

  .home-app {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh + 76px) !important;
    padding-bottom: 92px !important;
  }

  .home-app .course-stage {
    position: static !important;
    flex: 1 1 auto;
    min-height: auto !important;
    padding: 10px 0 0 !important;
  }

  .home-app .course-grid {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: min(430px, 100%) !important;
    margin: 0 auto !important;
    padding-bottom: 80px !important;
  }

  .home-app .course-bubble,
  .home-app .course-bubble:nth-child(n),
  body[data-home-theme] .course-bubble,
  body[data-home-theme] .course-bubble:nth-child(n) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    translate: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 132px !important;
    aspect-ratio: auto !important;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: 28px !important;
    animation: none !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 16px 36px rgba(70, 95, 145, 0.16) !important;
    overflow: hidden !important;
  }

  body[data-mobile-home-theme] .home-app .course-stage {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: block !important;
    padding-top: 4px !important;
  }

  body[data-mobile-home-theme] .home-app .course-grid {
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-content: start !important;
    align-items: stretch !important;
    gap: 15px !important;
    row-gap: 15px !important;
    width: min(390px, calc(100% - 12px)) !important;
    padding-bottom: 96px !important;
  }

  body[data-mobile-home-theme] .home-app .course-bubble.has-mobile-art,
  body[data-mobile-home-theme] .home-app .course-bubble.coming-soon-course {
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  body[data-mobile-home-theme] .home-app .course-bubble.has-mobile-art .course-art,
  body[data-mobile-home-theme] .home-app .course-bubble.coming-soon-course .course-art {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  body[data-mobile-home-theme] .home-app .course-bubble.has-mobile-art .course-art img,
  body[data-mobile-home-theme] .home-app .course-bubble.coming-soon-course .course-art img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    filter: none !important;
  }

  body[data-mobile-home-theme] .home-app .course-bubble.has-mobile-art .course-label,
  body[data-mobile-home-theme] .home-app .course-bubble.coming-soon-course .course-label,
  body[data-mobile-home-theme] .home-app .course-bubble.has-mobile-art .course-note,
  body[data-mobile-home-theme] .home-app .course-bubble.coming-soon-course .course-note {
    display: none !important;
  }

  .coming-soon-course {
    position: relative !important;
  }

  .coming-soon-badge {
    position: absolute;
    right: 14px;
    top: 12px;
    z-index: 2;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(36, 50, 82, 0.78);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  .home-app .course-bubble.has-image .course-art,
  .home-app .course-art {
    width: 96px !important;
    height: 96px !important;
    border-radius: 22px !important;
  }

  .home-app .course-label,
  .home-app .course-bubble.has-image .course-label {
    display: block !important;
    max-width: 100% !important;
    text-align: left !important;
    font-size: 24px !important;
    line-height: 1.22 !important;
    color: #26334f !important;
    word-break: keep-all;
  }

  .stage {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }

  .course-title {
    margin: 0 auto 28px !important;
  }

  .course-icon-large {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
  }

  h1,
  .page-title h1 {
    font-size: 32px !important;
    line-height: 1.18 !important;
  }

  .subtitle,
  .page-title p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-top: 10px !important;
  }

  .grade-grid,
  body[data-course-theme] .grade-grid {
    width: min(430px, 100%) !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .grade-card,
  body[data-course-theme] .grade-card {
    min-height: 132px !important;
    aspect-ratio: auto !important;
    border-radius: 24px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 14px 28px rgba(70, 95, 145, 0.14) !important;
  }

  .grade-card.has-mobile-grade-icon,
  body[data-course-theme] .grade-card.has-mobile-grade-icon {
    min-height: 206px !important;
    gap: 8px !important;
    padding: 14px 10px 12px !important;
    justify-content: center !important;
  }

  body[data-course-theme] .grade-name,
  body[data-course-theme] .grade-hint {
    display: block !important;
  }

  body[data-course-theme] .grade-card.has-mobile-grade-icon .grade-name {
    display: none !important;
  }

  .grade-icon,
  body[data-course-theme] .grade-icon {
    width: 64px !important;
    height: 64px !important;
    font-size: 38px !important;
  }

  .grade-icon img,
  body[data-course-theme] .grade-icon img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
  }

  .grade-card.has-mobile-grade-icon .mobile-grade-icon,
  body[data-course-theme] .grade-card.has-mobile-grade-icon .mobile-grade-icon {
    width: 52% !important;
    height: 156px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .grade-card.has-mobile-grade-icon .mobile-grade-icon img,
  body[data-course-theme] .grade-card.has-mobile-grade-icon .mobile-grade-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  .grade-name {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .filter-bar {
    width: 100% !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .filter-row {
    display: block !important;
    margin-bottom: 11px !important;
  }

  .filter-label {
    display: block !important;
    min-width: 0 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .fpills {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 1px 2px 4px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .fpills::-webkit-scrollbar {
    display: none;
  }

  .fpill {
    min-height: 34px !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 15px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }

  .search-bar {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
    padding: 3px !important;
    gap: 6px !important;
  }

  .search-bar input {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
  }

  .search-bar button {
    width: 42px !important;
    height: 40px !important;
    min-width: 42px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    font-size: 17px !important;
  }

  body[data-mobile-home-theme] .home-app .course-stage {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
  }

  body[data-mobile-home-theme] .home-app .mobile-theme-course-grid,
  body[data-mobile-home-theme] .home-app .theme2-course-grid {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    row-gap: 15px !important;
    width: min(390px, calc(100% - 12px)) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 96px !important;
  }

  body[data-mobile-home-theme] .home-app .mobile-theme-course-card,
  body[data-mobile-home-theme] .home-app .mobile-theme-course-card:nth-child(n),
  body[data-mobile-home-theme] .home-app .theme2-course-card,
  body[data-mobile-home-theme] .home-app .theme2-course-card:nth-child(n) {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    animation: none !important;
  }

  body[data-mobile-home-theme] .home-app .mobile-theme-course-art,
  body[data-mobile-home-theme] .home-app .theme2-course-art {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  body[data-mobile-home-theme] .home-app .mobile-theme-course-img,
  body[data-mobile-home-theme] .home-app .theme2-course-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    filter: none !important;
  }

  body[data-mobile-home-theme] .home-app .mobile-theme-course-card .course-label,
  body[data-mobile-home-theme] .home-app .mobile-theme-course-card .course-note,
  body[data-mobile-home-theme] .home-app .theme2-course-card .course-label,
  body[data-mobile-home-theme] .home-app .theme2-course-card .course-note {
    display: none !important;
  }

  .result-line {
    align-items: center !important;
    flex-direction: row !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
  }

  .video-result-line {
    flex-wrap: wrap !important;
  }

  .result-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .result-actions .fpills {
    padding-bottom: 0 !important;
  }

  .mobile-view-toggle {
    display: flex !important;
  }

  .video-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-bottom: 16px !important;
  }

  .video-card {
    border-radius: 18px !important;
  }

  .video-library-shell .app-top {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .video-library-shell .page-title {
    margin: 0 0 10px !important;
  }

  .video-library-shell .page-title h1 {
    font-size: 32px !important;
    line-height: 1.12 !important;
  }

  .video-library-shell .page-title p {
    display: block !important;
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .video-grid.mobile-compact .video-card {
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 126px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  .video-grid.mobile-compact .video-thumb {
    width: 126px !important;
    max-width: 100% !important;
    height: 104px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 14px !important;
    background: #f4f6fb !important;
    overflow: hidden !important;
  }

  .video-grid.mobile-compact .video-cover-media {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .video-grid.mobile-compact .duration {
    right: 6px !important;
    bottom: 6px !important;
    font-size: 10px !important;
    padding: 1px 6px !important;
  }

  .video-grid.mobile-compact .video-card-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 4px 6px 4px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .video-grid.mobile-compact .video-card-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  .video-grid.mobile-compact .video-card-meta {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .video-grid.mobile-compact .video-card-category {
    display: none !important;
  }

  .video-grid.mobile-large .video-card {
    display: block !important;
  }

  .video-card:hover,
  .grade-card:hover,
  .course-bubble:hover,
  .related-item:hover {
    transform: none !important;
  }

  .lesson-board {
    width: 100% !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .lesson-board::before,
  .board-cloud,
  .decor,
  .side-icons {
    display: none !important;
  }

  .board-content {
    padding-top: 0 !important;
  }

  .video-stage {
    display: block !important;
  }

  .video-shell {
    width: 100% !important;
    padding: 6px !important;
    border-radius: 18px !important;
  }

  .video-wrap {
    border-radius: 14px !important;
  }

  .video-wrap video,
  .no-video-box {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }

  .custom-fullscreen {
    width: 44px !important;
    height: 44px !important;
  }

  .video-meta-card {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .video-title {
    font-size: 21px !important;
    overflow-wrap: anywhere;
  }

  .video-tags {
    justify-content: flex-start !important;
  }

  .tag {
    min-height: 32px !important;
  }

  .section-ribbon {
    max-width: 100% !important;
    margin: 18px 0 -10px !important;
    padding: 10px 18px !important;
    font-size: 24px !important;
  }

  .plan-card {
    width: 100% !important;
    padding: 30px 14px 22px !important;
    border-radius: 22px !important;
    overflow: hidden;
  }

  .plan-grid {
    gap: 20px !important;
  }

  .plan-section-title {
    font-size: 19px !important;
    line-height: 1.35;
  }

  .plan-content {
    max-width: 100%;
    font-size: 16px !important;
    line-height: 1.85 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .plan-content img,
  .plan-card img {
    max-width: 100%;
    height: auto;
  }

  .plan-content table,
  .plan-card table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
  }

  .related-section {
    width: 100% !important;
  }

  .related-list {
    grid-template-columns: 1fr !important;
  }

  .related-item {
    min-height: 88px !important;
    border-radius: 20px !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }

  .profile-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 8px 0 24px !important;
  }

  .profile-main {
    min-height: calc(100svh - 72px) !important;
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .profile-main .site-icp-footer,
  .site-icp-footer.site-icp-auth {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: auto !important;
    margin: 18px auto 0 !important;
    padding: 0 10px !important;
    width: 100% !important;
  }

  .lesson-main {
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .lesson-mobile-search {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: -14px 0 10px !important;
    padding: 4px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(214, 222, 238, 0.9) !important;
    box-shadow: 0 10px 24px rgba(38, 51, 79, 0.08) !important;
  }

  .lesson-mobile-search input {
    width: 100% !important;
    min-height: 38px !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    padding: 7px 12px !important;
    color: #26334f !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .lesson-mobile-search input::placeholder {
    color: #9aa5ba !important;
  }

  .lesson-main .lp-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .lesson-main .lp-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 11px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(255, 143, 171, 0.1) !important;
  }

  .lesson-main .lp-card-head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .lesson-main .lp-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .lesson-main .lp-card-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .lesson-main .lp-title {
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
    margin: 0 0 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  .lesson-main .lp-meta {
    color: #7b8498 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }

  .lesson-main .lp-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .lesson-main .lp-status,
  .lesson-main .lp-preview-btn {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .lesson-main .lp-status.has-plan {
    background: #e8f5e9 !important;
    color: #388e3c !important;
  }

  .lesson-main .lp-status.no-plan {
    background: #f5f5f5 !important;
    color: #9aa0aa !important;
  }

  .lesson-main .lp-preview-btn {
    height: 32px !important;
    border: 0 !important;
    background: var(--pink-light) !important;
    color: var(--pink-deep) !important;
    cursor: pointer !important;
    font-family: var(--font) !important;
  }

  .lesson-empty {
    padding: 24px 12px !important;
    text-align: center !important;
    color: #9aa5ba !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .lesson-main .site-icp-footer {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 20px auto 0 !important;
    padding: 0 10px !important;
  }

  .profile-card,
  .form-panel {
    width: 100% !important;
    border-radius: 20px !important;
    padding: 20px 16px !important;
  }

  .profile-card .avatar,
  .avatar {
    width: 76px !important;
    height: 76px !important;
  }

  .tab-nav {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
    scrollbar-width: none;
  }

  .tab-nav::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    min-height: 44px !important;
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 769px) {
  .mobile-bottom-nav,
  .mobile-admin-entry {
    display: none !important;
  }
}