/**
 * Mobile Responsive Styles & Bottom Navigation
 * Comprehensive mobile-first responsive design for IELTS Lab
 */

/* ============================================
   MOBILE BOTTOM NAVIGATION
   ============================================ */

.mobile-bottom-nav {
  display: none; /* Hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(15, 15, 15, 0.08);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  transition: transform 0.3s ease;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.mobile-bottom-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

html[data-theme='dark'] .mobile-bottom-nav {
  background: rgba(24, 33, 31, 0.98);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}

.mobile-bottom-nav__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  min-width: min-content;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 70px;
  flex-shrink: 0;
  text-decoration: none;
}

.mobile-nav-item:active {
  transform: scale(0.95);
}

.mobile-nav-item.is-active {
  background: rgba(0, 191, 166, 0.12);
  color: var(--teal-dark);
}

html[data-theme='dark'] .mobile-nav-item.is-active {
  background: rgba(0, 191, 166, 0.16);
  color: #dff8f3;
}

.mobile-nav-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.mobile-nav-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Scroll indicator shadows */
.mobile-bottom-nav::before,
.mobile-bottom-nav::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.mobile-bottom-nav::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.98), transparent);
}

.mobile-bottom-nav::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.98), transparent);
}

html[data-theme='dark'] .mobile-bottom-nav::before {
  background: linear-gradient(to right, rgba(24, 33, 31, 0.98), transparent);
}

html[data-theme='dark'] .mobile-bottom-nav::after {
  background: linear-gradient(to left, rgba(24, 33, 31, 0.98), transparent);
}

/* ============================================
   TABLET BREAKPOINT (max-width: 1200px)
   ============================================ */

@media (max-width: 1200px) {
  /* Landing page adjustments */
  .landing-hero__copy h1,
  .landing-copy h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
  }

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

  .landing-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .landing-footer__actions {
    justify-items: center;
  }

  .landing-footer__meta {
    justify-content: center;
  }

  /* App layout adjustments */
  .ai-form-grid {
    grid-template-columns: 1fr;
  }

  .practice-grid,
  .mode-grid,
  .feature-grid,
  .resource-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 900px)
   ============================================ */

@media (max-width: 900px) {
  /* Show mobile bottom nav */
  .mobile-bottom-nav {
    display: block;
  }

  /* Hide desktop sidebar */
  .sidebar {
    display: none;
  }

  /* Adjust shell layout for mobile */
  .shell {
    grid-template-columns: 1fr;
    padding-bottom: 80px; /* Space for bottom nav */
  }

  /* Workspace adjustments */
  .workspace {
    padding: 16px 12px 24px;
  }

  .workspace-inner {
    max-width: 100%;
  }

  /* Topbar mobile layout */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .topbar-tools {
    width: 100%;
    justify-content: space-between;
  }

  /* Page copy adjustments */
  .page-copy h1 {
    font-size: clamp(1.4rem, 5vw, 1.85rem);
  }

  .page-copy p {
    font-size: 0.9rem;
  }

  /* Dashboard hero mobile */
  .dashboard-hero {
    padding: 20px 18px;
  }

  .dashboard-hero h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }

  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Stats grid mobile */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stat-card {
    min-height: 110px;
    padding: 14px;
  }

  .stat-value {
    font-size: 1.3rem;
  }

  /* Practice cards mobile */
  .practice-grid,
  .mode-grid,
  .feature-grid,
  .resource-grid,
  .plan-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Two column to single column */
  .two-column {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Library layout mobile */
  .library-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .library-panel {
    min-height: auto;
  }

  .library-list {
    max-height: 400px;
  }

  /* Library search mobile */
  .library-search {
    margin: 12px 0;
  }

  .library-search .input {
    width: 100%;
  }

  /* Library category tags mobile */
  .tag-list {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }

  .tag-list::-webkit-scrollbar {
    display: none;
  }

  /* Library preview mobile */
  .library-preview-body {
    min-height: auto;
    max-height: 600px;
  }

  .preview-frame {
    padding: 14px;
  }

  .preview-pdf-iframe,
  .preview-html {
    min-height: 400px;
  }

  /* Activity items mobile */
  .activity-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .activity-meta {
    width: 100%;
    justify-content: flex-start;
  }

  /* Auth modal mobile */
  .auth-modal-content {
    padding: 24px 20px;
  }

  .auth-card {
    padding: 24px 20px;
  }

  .auth-card h2 {
    font-size: 1.5rem;
  }

  /* Writing studio modal mobile */
  .writing-studio-modal {
    padding: 24px 20px;
    max-height: 95dvh;
  }

  .writing-studio-header {
    margin-right: 0;
    padding-bottom: 16px;
  }

  .writing-studio-title {
    font-size: 1.4rem;
  }

  .writing-studio-close {
    top: 12px;
    right: 12px;
  }

  /* AI test sections mobile */
  .ai-listening-grid {
    grid-template-columns: 1fr;
  }

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

  .ai-meta-grid--two {
    grid-template-columns: 1fr;
  }

  .ai-question-card {
    padding: 14px;
  }

  /* AI form grids mobile */
  .ai-form-grid {
    grid-template-columns: 1fr;
  }

  .ai-builder-card,
  .ai-session-card,
  .ai-score-card,
  .ai-questions-card {
    padding: 16px;
  }

  /* Audio card mobile */
  .audio-card {
    padding: 16px;
  }

  /* Writing/Reading content mobile */
  .reading-passage,
  .writing-sample {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  /* Question cards mobile */
  .reading-question,
  .ai-question-card {
    padding: 16px;
  }

  /* Choice options mobile */
  .choice-list {
    gap: 8px;
  }

  .choice-option {
    padding: 10px 12px;
  }

  /* Writing image generator mobile */
  .writing-image-container {
    margin: 16px 0;
  }

  .writing-image-wrapper {
    padding: 16px;
    min-height: 250px;
  }

  .writing-image {
    max-width: 100%;
    height: auto;
  }

  /* Speaking exam mobile */
  .speaking-exam-container {
    padding: 16px;
  }

  .speaking-exam-header {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .speaking-exam-main {
    padding: 20px 16px;
  }

  .speaking-exam-question {
    padding: 20px 16px;
  }

  /* Timer displays mobile */
  .timer-circle {
    width: 120px;
    height: 120px;
  }

  .timer-circle-large {
    width: 140px;
    height: 140px;
  }

  .timer-value {
    font-size: 2rem;
  }

  /* Recording controls mobile */
  .recording-controls {
    padding: 16px;
  }

  .transcript-box {
    padding: 16px;
  }

  /* Library specific mobile improvements */
  .library-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .library-panel {
    min-height: auto;
    padding: 16px;
  }

  .library-panel h3 {
    font-size: 1.1rem;
  }

  .library-list {
    max-height: 400px;
    padding: 8px;
  }

  .list-link {
    padding: 12px;
  }

  .list-link strong {
    font-size: 0.95rem;
  }

  .library-preview-body {
    min-height: auto;
    max-height: 600px;
  }

  .preview-frame {
    padding: 14px;
  }

  .preview-pdf-iframe,
  .preview-html {
    min-height: 400px;
  }

  .preview-image {
    max-width: 100%;
    height: auto;
  }

  .preview-audio {
    width: 100%;
  }

  /* Tag list horizontal scroll */
  .tag-list {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    gap: 8px;
  }

  .tag-list::-webkit-scrollbar {
    display: none;
  }

  .tag-button {
    flex-shrink: 0;
  }

  /* Listening section mobile */
  .ai-listening-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Speaking section mobile */
  .speaking-exam-topic {
    padding: 16px;
  }

  .part2-points ul {
    padding-left: 20px;
  }

  /* Writing section mobile */
  .writing-studio-modal {
    padding: 20px 16px;
    max-height: 95vh;
  }

  .writing-studio-header {
    margin-right: 0;
    padding-bottom: 16px;
  }

  .writing-studio-title {
    font-size: 1.4rem;
  }

  /* Reading section mobile */
  .reading-question {
    padding: 16px;
  }

  .reading-passage {
    padding: 16px;
    font-size: 0.9rem;
  }

  /* Metrics grid mobile */
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

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

  /* Profile grid mobile */
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-card--span-2 {
    grid-column: span 1;
  }

  /* Plan options mobile */
  .plan-options {
    grid-template-columns: 1fr;
  }

  /* Landing page mobile */
  .landing-topbar {
    padding: 14px 16px;
  }

  .landing-topbar__inner {
    flex-direction: column;
    gap: 14px;
  }

  .landing-nav {
    order: 2;
    width: 100%;
  }

  .landing-topbar__actions {
    order: 1;
    width: 100%;
    justify-content: space-between;
  }

  .landing-hero {
    padding: 32px 0 20px;
  }

  .landing-hero__copy {
    padding: 0 16px;
  }

  .landing-hero__copy h1 {
    font-size: clamp(2rem, 6vw, 3.2rem);
  }

  .landing-hero__copy p {
    font-size: 0.95rem;
  }

  .landing-proof {
    justify-content: flex-start;
  }

  .landing-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .landing-hero__actions .btn {
    width: 100%;
  }

  .landing-band {
    padding: 60px 0;
  }

  .landing-band__inner {
    padding: 0 16px;
  }

  .landing-copy h2 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
  }

  .landing-copy p {
    font-size: 0.95rem;
  }

  .landing-media-stack--hero {
    padding: 12px 16px 40px;
  }

  .landing-media-stack--section {
    padding-bottom: 24px;
  }

  .landing-process {
    padding: 24px 0 48px;
  }

  .landing-process__inner {
    padding: 0 16px;
  }

  .landing-process__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .landing-process-card {
    padding: 20px;
  }

  .landing-auth-zone {
    padding: 48px 0 60px;
  }

  .landing-auth-zone__inner {
    padding: 0 16px;
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

  .landing-footer {
    padding: 0 16px 12px;
  }

  .landing-footer__inner {
    padding: 24px 20px 16px;
  }

  .landing-footer__copy h2 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
  }

  /* Auth feature grid mobile */
  .auth-feature-grid {
    grid-template-columns: 1fr;
  }

  /* Form adjustments */
  .form-grid--admin {
    grid-template-columns: 1fr;
  }

  .button-row {
    flex-direction: column;
  }

  .button-row .btn {
    width: 100%;
  }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (max-width: 640px)
   ============================================ */

@media (max-width: 640px) {
  /* Further mobile optimizations */
  .workspace {
    padding: 12px 8px 20px;
  }

  /* Stats grid to single column on very small screens */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Metrics compact to single column */
  .metrics-grid--compact {
    grid-template-columns: 1fr;
  }

  /* Landing summary to single column */
  .landing-summary-grid {
    grid-template-columns: 1fr;
  }

  /* AI meta grid to single column */
  .ai-meta-grid {
    grid-template-columns: 1fr;
  }

  /* Smaller text on very small screens */
  .page-copy h1 {
    font-size: 1.3rem;
  }

  .dashboard-hero h1 {
    font-size: 1.4rem;
  }

  /* Smaller cards */
  .stat-card,
  .practice-card,
  .mode-card,
  .feature-card,
  .resource-card,
  .metrics-card,
  .profile-card,
  .activity-card {
    padding: 12px;
  }

  /* Smaller modals */
  .auth-card {
    padding: 20px 16px;
  }

  .writing-studio-modal {
    padding: 20px 16px;
  }

  /* Small mobile nav adjustments */
  .mobile-nav-item {
    min-width: 60px;
    padding: 6px 10px;
  }

  .mobile-nav-label {
    font-size: 0.65rem;
  }

  .mobile-nav-icon {
    width: 20px;
    height: 20px;
  }

  /* Ensure all content is accessible */
  .library-list {
    max-height: 350px;
  }

  .preview-pdf-iframe,
  .preview-html {
    min-height: 350px;
  }

  /* Compact spacing */
  .list-link {
    padding: 10px;
  }

  .list-link strong {
    font-size: 0.9rem;
  }

  .list-meta {
    font-size: 0.75rem;
  }

  /* Writing/Reading tables responsive */
  .writing-topics-table,
  .reading-tests-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Question cards compact */
  .ai-question-card,
  .reading-question {
    padding: 12px;
  }

  .ai-question-card h4,
  .reading-question h4 {
    font-size: 0.95rem;
  }

  /* Form inputs full width */
  .input,
  .textarea,
  select {
    width: 100%;
    font-size: 16px; /* Prevent zoom on iOS */
  }

  /* Button text smaller */
  .btn {
    font-size: 0.9rem;
    padding: 10px 14px;
  }

  /* Timer displays compact */
  .timer-circle {
    width: 100px;
    height: 100px;
  }

  .timer-value {
    font-size: 1.6rem;
  }

  /* Speaking exam compact */
  .speaking-exam-question h3 {
    font-size: 1.2rem;
  }

  /* Listening audio player full width */
  audio {
    width: 100%;
  }

  /* Image generation compact */
  .writing-image-wrapper {
    padding: 8px;
    min-height: 180px;
  }

  .writing-image-loading-text strong {
    font-size: 0.95rem;
  }

  .writing-image-spinner {
    width: 35px;
    height: 35px;
  }
}

  /* Landing page very small screens */
  .landing-hero__copy h1 {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  .landing-copy h2,
  .landing-footer__copy h2 {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

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

  .landing-topbar {
    padding: 12px;
  }

  .landing-hero {
    padding: 24px 0 16px;
  }

  .landing-band {
    padding: 40px 0;
  }

  .landing-process {
    padding: 20px 0 36px;
  }

  .landing-auth-zone {
    padding: 36px 0 48px;
  }

  .landing-footer__inner {
    padding: 20px 16px 12px;
  }

  /* Auth shell mobile */
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    display: none;
  }

  .auth-panel {
    padding: 32px 16px;
  }
}

/* ============================================
   LANDSCAPE MOBILE ADJUSTMENTS
   ============================================ */

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  /* Adjust bottom nav for landscape */
  .mobile-bottom-nav {
    padding: 4px 0;
  }

  .mobile-nav-item {
    padding: 4px 8px;
    gap: 2px;
  }

  .mobile-nav-icon {
    width: 20px;
    height: 20px;
  }

  .mobile-nav-label {
    font-size: 0.6rem;
  }

  /* Reduce shell bottom padding */
  .shell {
    padding-bottom: 60px;
  }

  /* Smaller modals in landscape */
  .writing-studio-modal {
    max-height: 98dvh;
    padding: 16px;
  }

  .auth-modal-content {
    padding: 20px 16px;
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn,
  .nav-button,
  .sidebar-action,
  .sound-button,
  .list-link,
  .tag-button,
  .mobile-nav-item {
    min-height: 44px;
  }

  /* Remove hover effects on touch devices */
  .btn:hover,
  .nav-button:hover,
  .sidebar-action:hover,
  .sound-button:hover,
  .list-link:hover,
  .tag-button:hover {
    transform: none;
  }

  /* Add active states for touch feedback */
  .btn:active,
  .nav-button:active,
  .sidebar-action:active,
  .sound-button:active,
  .list-link:active,
  .tag-button:active {
    transform: scale(0.97);
  }
}

/* ============================================
   SAFE AREA INSETS (for notched devices)
   ============================================ */

@supports (padding: max(0px)) {
  .mobile-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .shell {
    padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
  }

  .workspace {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .landing-topbar__inner,
  .landing-hero__copy,
  .landing-band__inner,
  .landing-process__inner,
  .landing-auth-zone__inner,
  .landing-footer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav,
  .mobile-nav-item,
  .btn,
  .nav-button,
  .sidebar-action {
    transition: none;
  }

  .mobile-nav-item:active {
    transform: none;
  }
}

/* Focus visible for keyboard navigation */
.mobile-nav-item:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Smooth scrolling for mobile nav */
.mobile-bottom-nav {
  scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
.mobile-bottom-nav {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-bottom-nav::-webkit-scrollbar {
  display: none;
}

/* Snap scrolling for better UX (optional) */
@supports (scroll-snap-type: x mandatory) {
  .mobile-bottom-nav__inner {
    scroll-snap-type: x proximity;
  }
  
  .mobile-nav-item {
    scroll-snap-align: center;
  }
}

/* ============================================
   ADDITIONAL RESPONSIVE IMPROVEMENTS
   ============================================ */

/* Ensure all tables are scrollable on mobile */
@media (max-width: 900px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Override inline styles for responsive tables */
  table[style*="width: 100%"] {
    display: block !important;
  }

  /* Library improvements */
  .library-panel:first-child {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }

  /* Better touch targets */
  .list-link,
  .nav-button,
  .sidebar-action,
  .btn {
    min-height: 44px;
  }

  /* Improved form layouts */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Better modal sizing */
  .writing-studio-modal,
  .auth-modal {
    max-width: 100%;
    margin: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  /* Improved card spacing */
  .panel-card,
  .stat-card,
  .practice-card {
    margin-bottom: 16px;
  }

  /* Better image handling */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Improved video embeds */
  iframe {
    max-width: 100%;
  }

  /* Writing/Reading section responsive overrides */
  div[style*="max-width: 1000px"] {
    max-width: 100% !important;
    padding: 20px 12px !important;
  }

  div[style*="max-width: 800px"] {
    max-width: 100% !important;
    padding: 20px 12px !important;
  }

  /* Grid layouts responsive */
  div[style*="display: grid"][style*="gap: 16px"] {
    gap: 12px !important;
  }

  /* Topic cards responsive */
  .topic-card,
  div[style*="cursor: pointer"][style*="padding: 20px"] {
    padding: 16px !important;
  }

  /* Button groups responsive */
  div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Preserve horizontal button groups */
  div[style*="display: flex"][style*="gap: 8px"] button {
    flex: 1;
  }

  /* Text sizing responsive */
  h2[style*="font-size: 2.4rem"] {
    font-size: 1.8rem !important;
  }

  h3[style*="font-size: 1.2rem"] {
    font-size: 1.1rem !important;
  }

  p[style*="font-size: 16px"] {
    font-size: 15px !important;
  }

  /* Inline grid responsive */
  div[style*="grid-template-columns: 1fr 300px"] {
    grid-template-columns: 1fr !important;
  }

  /* Timer sidebar on mobile */
  div[style*="grid-template-columns: 1fr 300px"] > div:last-child {
    order: -1;
  }

  /* Speaking exam structure responsive */
  div[style*="display: flex; gap: 16px"] {
    flex-direction: column !important;
  }

  /* Process steps responsive */
  div[style*="display: flex; gap: 16px; align-items: flex-start"] {
    flex-direction: row !important;
  }

  /* Listening audio card responsive */
  .audio-card,
  div[style*="background: #fff"][style*="border-radius: 12px"] {
    padding: 16px !important;
  }

  /* Question numbering responsive */
  div[style*="font-weight: bold"][style*="width: 40px"] {
    width: 35px !important;
    height: 35px !important;
    font-size: 0.9rem !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .mobile-bottom-nav,
  .sidebar,
  .topbar-tools,
  .btn,
  .nav-button {
    display: none !important;
  }

  .shell {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .workspace {
    padding: 0;
  }
}