/* ============================================================================
   KURO FANGS — COMPLETE TABLET DASHBOARD REDESIGN & UI/UX ARCHITECTURE (v22.0)
   Primary Reference Device: Redmi Pad Pro + iPad Mini / Air / 10th Gen / Pro
   Scope: Tablet Devices (600px <= width <= 1366px, height >= 501px)
   Covers:
   - Redmi Pad Pro & Android Tablets (600×960, 800×1280, 960×600, 1280×800)
   - iPad Pro 13" / 12.9" (1024×1366 Portrait, 1366×1024 Landscape)
   - iPad Pro 11" & iPad Air (820×1180, 834×1194, 1112×834, 1194×834)
   - Standard iPad (768×1024, 810×1080, 1024×768)
   - iPad mini (744×1133, 1133×744)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. SHARED DESIGN TOKENS & COMPONENT BASE ENHANCEMENTS (All Viewports)
   ---------------------------------------------------------------------------- */
:root {
  --kf-tab-burgundy: #7D1E30;
  --kf-tab-burgundy-deep: #581B29;
  --kf-tab-ivory: #FAF7F0;
  --kf-tab-cream: #F5F0E7;
  --kf-tab-card: #FFFFFF;
  --kf-tab-beige: #E8DED1;
  --kf-tab-blush: #F2E4E5;
  --kf-tab-text: #30272A;
  --kf-tab-text-sec: #796F70;
  --kf-tab-border: #E6DED4;
}

/* Hide redundant Study Rooms item inside desktop/tablet More dropdown
   when Study Rooms is already visible as a primary top-bar destination */
.tablet-study-rooms-item {
  display: none !important;
}

/* Empty-Schedule CTA Button */
.keds-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-block-start: 10px;
  padding-block: 8px;
  padding-inline: 18px;
  min-height: 38px;
  border-radius: 9999px;
  background: var(--kf-tab-burgundy, #7D1E30);
  color: #FFFFFF !important;
  border: 1px solid #581B29;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 10px rgba(125, 30, 48, 0.20);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.18s ease,
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.keds-action-btn:hover {
  background: var(--kf-tab-burgundy-deep, #581B29);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px rgba(125, 30, 48, 0.26);
}

.keds-action-btn:active {
  transform: scale(0.98);
}

.keds-action-btn svg {
  width: 14px;
  height: 14px;
}

/* Empty Day Schedule Icon Emblem */
.keds-mascot-wrap {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #F9E6E8;
  border: 1px solid rgba(125, 30, 48, 0.16);
  color: #7D1E30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 10px;
  box-shadow: inset 0 1px 0 #FFFFFF;
}

.keds-mascot-wrap svg {
  width: 24px;
  height: 24px;
  stroke: #7D1E30;
  color: #7D1E30;
}

/* Upgraded Schedule Entry Row (Icon Box + Stacked Content + Status Pill) */
.ksrc-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(125, 30, 48, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-inline-start: 4px;
}

.ksrc-icon-box svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.1;
}

.ksrc-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-inline-start: auto;
}

.ksrc-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #F5EFE6;
  border: 1px solid #E6DED4;
  color: #6E5D53;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Continue Studying View All Secondary Button */
.kuro-continue-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 6px;
  padding-inline: 14px;
  min-height: 34px;
  border-radius: 10px;
  background: #FAF6F0;
  border: 1px solid #E2D5C6;
  color: var(--kf-tab-burgundy, #7D1E30);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.kuro-continue-view-all-btn:hover {
  background: #F2E4E5;
  border-color: rgba(125, 30, 48, 0.28);
  transform: translateY(-1px);
}

.kuro-continue-view-all-btn svg {
  width: 14px;
  height: 14px;
}

/* Continue Studying Card Header Badge Row & Category Icon Box */
.continue-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-block-end: 4px;
}

.continue-card-type-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.continue-card-type-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.1;
}

.continue-card-type-icon.sheet-icon {
  background: #F9E8EA;
  color: #7D1E30;
  border: 1px solid rgba(125, 30, 48, 0.16);
}

.continue-card-type-icon.recording-icon {
  background: #F1ECFE;
  color: #6D28D9;
  border: 1px solid rgba(109, 40, 217, 0.16);
}

.continue-card-type-icon.questions-icon {
  background: #FEF2DE;
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.20);
}

.continue-card-type-icon.questions-icon.completed-icon {
  background: #E6F6EE;
  color: #059669;
  border-color: rgba(5, 150, 105, 0.20);
}

.continue-progress-pct {
  font-weight: 800;
  color: var(--kf-tab-burgundy, #7D1E30);
}

/* Shared Dashboard Visual Polish across Tablet & Wide Tablet/Laptop Viewports (>= 600px, height >= 501px) */
@media (min-width: 600px) and (min-height: 501px) {
  .kuro-study-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .kuro-summary-stat-card {
    background: var(--kf-tab-card, #FFFFFF) !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 8px rgba(48, 39, 42, 0.03) !important;
  }

  .stat-classes .kssc-icon-box {
    background: #F9E6E8 !important;
    color: #7D1E30 !important;
    border: 1px solid rgba(125, 30, 48, 0.16) !important;
  }

  .stat-streak .kssc-icon-box {
    background: #FFF0E0 !important;
    color: #D97706 !important;
    border: 1px solid rgba(217, 119, 6, 0.20) !important;
  }

  .stat-time .kssc-icon-box {
    background: #ECEEFE !important;
    color: #4F46E5 !important;
    border: 1px solid rgba(79, 70, 229, 0.18) !important;
  }

  .stat-questions .kssc-icon-box {
    background: #E6F6EE !important;
    color: #059669 !important;
    border: 1px solid rgba(5, 150, 105, 0.18) !important;
  }

  .kssc-val {
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    color: var(--kf-tab-text, #30272A) !important;
  }

  .kssc-label {
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    color: var(--kf-tab-text-sec, #796F70) !important;
  }

  .kuro-view-full-schedule-btn {
    min-height: 34px !important;
    padding-block: 6px !important;
    padding-inline: 13px !important;
    border-radius: 10px !important;
    background: #FAF6F0 !important;
    border: 1px solid #DFD2C3 !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .kuro-view-full-schedule-btn:hover {
    background: var(--kf-tab-blush, #F2E4E5) !important;
    border-color: rgba(125, 30, 48, 0.28) !important;
    color: var(--kf-tab-burgundy-deep, #581B29) !important;
  }

  .ksrc-location {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 550 !important;
    color: var(--kf-tab-text-sec, #796F70) !important;
  }

  .ksrc-location svg {
    width: 12px !important;
    height: 12px !important;
    color: #9C8F8C !important;
  }

  .continue-action-btn.secondary {
    background: #F5EFE6 !important;
    border: 1px solid #E2D5C6 !important;
    color: var(--kf-tab-text, #30272A) !important;
  }
}

/* ============================================================================
   1. MASTER TABLET ARCHITECTURE (600px <= width <= 1366px, height >= 501px)
   ============================================================================ */
@media (min-width: 600px) and (max-width: 1366px) and (min-height: 501px) {

  /* Zero horizontal overflow while preserving smooth vertical scrolling */
  html,
  body,
  .app-layout,
  .app-main-wrapper {
    max-width: 100vw !important;
    overflow-x: clip !important;
    background-color: var(--kf-tab-ivory, #FAF7F0) !important;
  }

  [data-theme="dark"] html,
  [data-theme="dark"] body,
  [data-theme="dark"] .app-layout,
  [data-theme="dark"] .app-main-wrapper {
    background-color: #121118 !important;
  }

  /* Sidebar operates as a slide-over drawer on tablets so the main container
     uses the full tablet width without squishing columns */
  .app-sidebar {
    width: 286px !important;
    transform: translateX(-100%) !important;
    box-shadow: 0 0 40px rgba(20, 21, 30, 0.38) !important;
    z-index: 1150 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html[dir="rtl"] .app-sidebar {
    transform: translateX(100%) !important;
  }

  .app-sidebar.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .sidebar-close-btn {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
  }

  html[dir="ltr"] .app-main-wrapper,
  html[dir="rtl"] .app-main-wrapper {
    margin-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure mobile bottom bar is never shown on tablets */
  .mobile-bottom-nav,
  .mobile-more-backdrop,
  .mobile-more-sheet {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     REDESIGNED SINGLE-ROW TABLET HEADER (Matches Reference #1)
     [Brand Identity] | [Home, Sheets, Recordings, Questions, Study Rooms, Schedules, More] | [Search, Bell, Profile]
     -------------------------------------------------------------------------- */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding-block: 0 !important;
    padding-inline: 18px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: rgba(250, 247, 240, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-block-end: 1px solid var(--kf-tab-border, #E6DED4) !important;
    box-shadow: 0 1px 6px rgba(48, 39, 42, 0.03) !important;
    z-index: 1020 !important;
    box-sizing: border-box !important;
  }

  [data-theme="dark"] .site-header,
  [data-theme="kuro-dark"] .site-header {
    background: rgba(22, 20, 30, 0.95) !important;
    border-block-end-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* 1. Left Group: Kuro Brand Identity */
  .header-left-group {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  /* Hide hamburger toggle on tablets >= 768px since all primary destinations
     are directly accessible in the single top row */
  .mobile-toggle-btn {
    display: none !important;
  }

  .header-brand-identity {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    text-decoration: none !important;
  }

  .header-brand-avatar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
  }

  .header-brand-name {
    font-size: 0.96rem !important;
    font-weight: 850 !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    max-width: none !important;
  }

  [data-theme="dark"] .header-brand-name {
    color: #FDA4AF !important;
  }

  /* 2. Center Navigation: Clean Horizontal Text Pills (Matches Reference #2) */
  .header-nav-center {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
  }

  .header-nav-pill {
    flex: 0 1 auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 36px !important;
    padding-block: 6px !important;
    padding-inline: 11px !important;
    border-radius: 9999px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #4A3E40 !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Hide top stacked icon inside tablet nav pills so they render as clean text pills like Reference #2 */
  .header-nav-pill .nav-pill-icon,
  .header-nav-pill svg:not(.header-more-chevron) {
    display: none !important;
  }

  .header-nav-pill .header-more-chevron {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    stroke-width: 2.2 !important;
    color: currentColor !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
  }

  .header-nav-pill:hover {
    background: rgba(125, 30, 48, 0.06) !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
  }

  /* Active Navigation Pill: Subtle Muted Blush Background & Burgundy Accent (Reference #2) */
  .header-nav-pill.active {
    background: var(--kf-tab-blush, #F2E4E5) !important;
    border-color: rgba(125, 30, 48, 0.18) !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
    font-weight: 750 !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] .header-nav-pill {
    color: #C4BDB7 !important;
  }

  [data-theme="dark"] .header-nav-pill.active {
    background: rgba(125, 30, 48, 0.28) !important;
    border-color: rgba(253, 164, 175, 0.24) !important;
    color: #FDA4AF !important;
  }

  /* Safe anchoring for More dropdown menu */
  .header-nav-dropdown-wrap {
    position: relative !important;
    flex: 0 0 auto !important;
  }

  .header-dropdown-menu {
    top: calc(100% + 8px) !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    transform: none !important;
    min-width: 220px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 8px !important;
    border-radius: 14px !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    box-shadow: 0 14px 34px rgba(48, 39, 42, 0.14) !important;
    z-index: 1250 !important;
  }

  .header-dropdown-item {
    min-height: 40px !important;
    padding-block: 8px !important;
    padding-inline: 12px !important;
    font-size: 0.84rem !important;
    border-radius: 10px !important;
  }

  /* 3. Right Tools: Search Icon Trigger, Notification Bell, User Profile Pill */
  .header-right-tools {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  /* Hide redundant settings gear in header (Settings is inside More dropdown) */
  #settings-trigger-wrapper {
    display: none !important;
  }

  /* Compact Search Trigger Button in the Single Row */
  .mobile-search-toggle-btn {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--kf-tab-text, #30272A) !important;
    cursor: pointer !important;
    transition: all 0.16s ease !important;
  }

  .mobile-search-toggle-btn:hover,
  .site-header.mobile-search-open .mobile-search-toggle-btn {
    background: var(--kf-tab-blush, #F2E4E5) !important;
    border-color: rgba(125, 30, 48, 0.18) !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
  }

  .mobile-search-toggle-btn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #4A3E40 !important;
    stroke: #4A3E40 !important;
  }

  /* Anchored Floating Search Bar when Search Icon is tapped on Tablet */
  .header-right-tools .header-search-box {
    display: none !important;
  }

  .site-header.mobile-search-open .header-right-tools .header-search-box {
    display: flex !important;
    align-items: center !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    inset-inline-end: 18px !important;
    width: min(420px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    padding: 6px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 36px rgba(48, 39, 42, 0.16) !important;
    z-index: 1260 !important;
  }

  [data-theme="dark"] .site-header.mobile-search-open .header-right-tools .header-search-box {
    background: #1E1C28 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  .site-header.mobile-search-open .header-right-tools .header-search-box input {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-inline-start: 36px !important;
    padding-inline-end: 36px !important;
    background: var(--kf-tab-ivory, #FAF7F0) !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    border-radius: 10px !important;
    font-size: 0.86rem !important;
    color: var(--kf-tab-text, #30272A) !important;
  }

  .site-header.mobile-search-open .header-right-tools .header-search-box .search-icon {
    inset-inline-start: 18px !important;
    width: 15px !important;
    height: 15px !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
  }

  .site-header.mobile-search-open .mobile-search-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    inset-inline-end: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    border: none !important;
    background: #EFE8DC !important;
    color: #5A4E50 !important;
    cursor: pointer !important;
  }

  .site-header.mobile-search-open .mobile-search-close-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Notifications Bell Button */
  .notifications-bell-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--kf-tab-text, #30272A) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .notifications-bell-btn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #4A3E40 !important;
    stroke: #4A3E40 !important;
  }

  .notifications-bell-btn:hover {
    background: var(--kf-tab-blush, #F2E4E5) !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
  }

  /* User Profile Control (#header-auth-action-box) — Ordered [Search] -> [Bell] -> [Avatar + Name] */
  .notifications-bell-wrapper {
    order: 2 !important;
  }

  #header-auth-action-box {
    order: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  #header-auth-action-box .header-user-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 36px !important;
    padding: 4px 12px 4px 5px !important;
    border-radius: 9999px !important;
    background: var(--kf-tab-cream, #F5F0E7) !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    box-sizing: border-box !important;
  }

  /* Keep profile pill clean [T] Taha on tablet without extra signout button clutter */
  #header-auth-action-box .btn-header-signout {
    display: none !important;
  }

  #header-auth-action-box .header-user-avatar-circle,
  #header-auth-action-box .header-user-avatar-initial {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }

  #header-auth-action-box .user-display-name {
    font-size: 0.8rem !important;
    font-weight: 750 !important;
    color: var(--kf-tab-text, #30272A) !important;
    max-width: 84px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  [data-theme="dark"] #header-auth-action-box .header-user-badge {
    background: #232030 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  [data-theme="dark"] #header-auth-action-box .user-display-name {
    color: #F5F2EB !important;
  }

  /* --------------------------------------------------------------------------
     GLOBAL TABLET CONTAINER & SPACING RHYTHM (No Excessive Bottom Whitespace)
     -------------------------------------------------------------------------- */
  .app-layout,
  .app-main-wrapper {
    min-height: auto !important;
  }

  .main-content {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 1220px !important;
    margin-inline: auto !important;
    padding-block: 18px 24px !important;
    padding-inline: 20px !important;
    box-sizing: border-box !important;
  }

  .kuro-dashboard-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  /* --------------------------------------------------------------------------
     REDESIGNED HERO BANNER (Reference #3: Character-Free Academic Study Desk)
     -------------------------------------------------------------------------- */
  .kuro-hero-workspace {
    border-radius: 16px !important;
    margin-block: 0 !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    box-shadow: 0 3px 14px rgba(48, 39, 42, 0.05) !important;
    overflow: hidden !important;
  }

  .kuro-hero-banner {
    height: 164px !important;
    min-height: 164px !important;
    max-height: 164px !important;
  }

  .kuro-hero-bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: right center !important;
  }

  .kuro-hero-vignette {
    background: linear-gradient(90deg, rgba(250, 247, 240, 0.96) 0%, rgba(250, 247, 240, 0.88) 40%, rgba(250, 247, 240, 0.22) 65%, rgba(250, 247, 240, 0) 84%) !important;
  }

  html[dir="ltr"] .kuro-hero-greeting-overlay {
    left: 26px !important;
    right: auto !important;
    text-align: left !important;
    width: clamp(280px, 54%, 490px) !important;
  }

  html[dir="rtl"] .kuro-hero-greeting-overlay {
    left: 26px !important;
    right: auto !important;
    text-align: right !important;
    width: clamp(280px, 54%, 490px) !important;
  }

  .kuro-hero-greeting-title {
    font-size: clamp(1.32rem, 2.2vw, 1.54rem) !important;
    font-weight: 800 !important;
    color: var(--kf-tab-burgundy-deep, #581B29) !important;
    margin-block-end: 5px !important;
    line-height: 1.2 !important;
  }

  .kuro-hero-greeting-sub {
    font-size: 0.86rem !important;
    font-weight: 550 !important;
    color: #6E474B !important;
    margin-block-end: 12px !important;
    line-height: 1.35 !important;
  }

  .kuro-hero-date-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    color: var(--kf-tab-text, #30272A) !important;
    padding: 5px 13px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
  }

  .kuro-hero-date-chip svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
    stroke: var(--kf-tab-burgundy, #7D1E30) !important;
    flex-shrink: 0 !important;
  }

  /* --------------------------------------------------------------------------
     REDESIGNED STUDY STATISTICS CARDS (Reference #4: Crisp Icons & Full Labels)
     -------------------------------------------------------------------------- */
  .kuro-study-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-block: 0 !important;
  }

  .kuro-summary-stat-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 13px 13px !important;
    background: var(--kf-tab-card, #FFFFFF) !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 8px rgba(48, 39, 42, 0.03) !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
  }

  .kssc-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .kssc-icon-box svg {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    stroke-width: 2.1 !important;
  }

  .stat-classes .kssc-icon-box {
    background: #F9E6E8 !important;
    color: #7D1E30 !important;
    border: 1px solid rgba(125, 30, 48, 0.16) !important;
  }

  .stat-streak .kssc-icon-box {
    background: #FFF0E0 !important;
    color: #D97706 !important;
    border: 1px solid rgba(217, 119, 6, 0.20) !important;
  }

  .stat-time .kssc-icon-box {
    background: #ECEEFE !important;
    color: #4F46E5 !important;
    border: 1px solid rgba(79, 70, 229, 0.18) !important;
  }

  .stat-questions .kssc-icon-box {
    background: #E6F6EE !important;
    color: #059669 !important;
    border: 1px solid rgba(5, 150, 105, 0.18) !important;
  }

  .kssc-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: start !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .kssc-val {
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    color: var(--kf-tab-text, #30272A) !important;
    line-height: 1.15 !important;
  }

  /* Ensure "Completed Questions" is 100% readable and never truncated with ellipsis */
  .kssc-label {
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    color: var(--kf-tab-text-sec, #796F70) !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  /* --------------------------------------------------------------------------
     REDESIGNED TODAY & TOMORROW SECTION (Reference #5 & #6)
     -------------------------------------------------------------------------- */
  .kuro-schedule-split-section {
    margin-block: 0 !important;
  }

  .kuro-schedule-split-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .kuro-split-card {
    background: var(--kf-tab-card, #FFFFFF) !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    min-height: 0 !important;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(48, 39, 42, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .kuro-split-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-block-end: 14px !important;
    padding-block-end: 10px !important;
    border-block-end: 1px solid #F2ECE4 !important;
    min-height: 40px !important;
  }

  .kuro-split-card-title {
    font-size: 1.04rem !important;
    font-weight: 800 !important;
    color: var(--kf-tab-text, #30272A) !important;
  }

  .kuro-split-card-date {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: var(--kf-tab-text-sec, #796F70) !important;
  }

  /* Refined Secondary View Full Schedule Button */
  .kuro-view-full-schedule-btn {
    min-height: 34px !important;
    padding-block: 6px !important;
    padding-inline: 13px !important;
    border-radius: 10px !important;
    background: #FAF6F0 !important;
    border: 1px solid #DFD2C3 !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .kuro-view-full-schedule-btn:hover {
    background: var(--kf-tab-blush, #F2E4E5) !important;
    border-color: rgba(125, 30, 48, 0.28) !important;
    color: var(--kf-tab-burgundy-deep, #581B29) !important;
  }

  /* Schedule Lecture Entry Row */
  .kuro-mini-lecture-list {
    gap: 11px !important;
  }

  .kuro-schedule-row-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    min-height: 72px !important;
    border-radius: 13px !important;
    background: var(--kf-tab-ivory, #FAF7F0) !important;
    border: 1px solid #ECE3D8 !important;
  }

  .ksrc-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding-inline-start: 0 !important;
  }

  .ksrc-top {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .ksrc-time {
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
  }

  .ksrc-subject {
    font-size: 0.92rem !important;
    font-weight: 750 !important;
    color: var(--kf-tab-text, #30272A) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .ksrc-location {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 550 !important;
    color: var(--kf-tab-text-sec, #796F70) !important;
    margin-block-start: 1px !important;
  }

  .ksrc-location svg {
    width: 12px !important;
    height: 12px !important;
    color: #9C8F8C !important;
    flex-shrink: 0 !important;
  }

  /* Compact Empty Schedule State */
  .kuro-empty-day-state {
    padding: 20px 16px !important;
    background: var(--kf-tab-ivory, #FAF7F0) !important;
    border: 1px solid #EDE5DA !important;
    border-radius: 13px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
  }

  .keds-title {
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    color: var(--kf-tab-text, #30272A) !important;
    margin-block-end: 4px !important;
  }

  .keds-desc {
    font-size: 0.78rem !important;
    color: var(--kf-tab-text-sec, #796F70) !important;
    max-width: 280px !important;
    line-height: 1.38 !important;
  }

  /* --------------------------------------------------------------------------
     REDESIGNED CONTINUE STUDYING SECTION (Reference #6: No Title Overlap, Equal Height)
     -------------------------------------------------------------------------- */
  .continue-studying-section {
    margin-block: 0 4px !important;
  }

  .continue-studying-header {
    margin-block-end: 12px !important;
  }

  .continue-studying-header .kuro-section-title {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--kf-tab-text, #30272A) !important;
  }

  .kuro-continue-studying-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .continue-study-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 18px 16px !important;
    min-height: 204px !important;
    background: var(--kf-tab-card, #FFFFFF) !important;
    border: 1px solid var(--kf-tab-border, #E6DED4) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(48, 39, 42, 0.03) !important;
  }

  .continue-card-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-block-end: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }

  .continue-card-badge-row {
    flex-shrink: 0 !important;
  }

  .continue-tag-badge {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
  }

  .continue-card-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--kf-tab-text, #30272A) !important;
    line-height: 1.38 !important;
    margin-block: 4px 2px !important;
    display: block !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  .continue-card-title-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.38 !important;
  }

  .continue-card-subject {
    font-size: 0.78rem !important;
    color: var(--kf-tab-text-sec, #796F70) !important;
    line-height: 1.38 !important;
    margin-block: 0 !important;
    flex-shrink: 0 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .continue-card-meta {
    font-size: 0.73rem !important;
    font-weight: 600 !important;
    color: #938683 !important;
    margin-block-start: auto !important;
    padding-block-start: 4px !important;
    flex-shrink: 0 !important;
  }

  .continue-progress-wrap {
    margin-block-start: auto !important;
    padding-block-start: 4px !important;
    flex-shrink: 0 !important;
  }

  .continue-card-bottom {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .continue-action-btn {
    width: 100% !important;
    min-height: 40px !important;
    padding-block: 9px !important;
    padding-inline: 14px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: var(--kf-tab-burgundy, #7D1E30) !important;
    color: #FFFFFF !important;
  }

  .continue-action-btn:hover {
    background: var(--kf-tab-burgundy-deep, #581B29) !important;
  }

  .continue-action-btn.secondary {
    background: #F5EFE6 !important;
    border: 1px solid #E2D5C6 !important;
    color: var(--kf-tab-text, #30272A) !important;
  }

  .continue-action-btn.secondary:hover {
    background: var(--kf-tab-blush, #F2E4E5) !important;
    border-color: rgba(125, 30, 48, 0.26) !important;
    color: var(--kf-tab-burgundy, #7D1E30) !important;
  }

  /* --------------------------------------------------------------------------
     FLOATING STUDY ROOMS TIMER SAFE AREA ON TABLETS
     -------------------------------------------------------------------------- */
  .sr-floating-widget {
    inset-block-end: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    inset-inline-start: 20px !important;
    max-width: calc(100vw - 40px) !important;
  }
}

/* ============================================================================
   2. WIDE & LANDSCAPE TABLETS (820px <= width <= 1366px, height >= 501px)
   Covers:
   - Redmi Pad Pro Landscape (1280×800, 960×600) & Portrait (800×1280 -> see below)
   - iPad Pro 13"/12.9" (1366×1024, 1024×1366)
   - iPad Pro 11" & iPad Air (1194×834, 1112×834, 834×1194, 820×1180)
   - Standard iPad Landscape (1024×768)
   ============================================================================ */
@media (min-width: 820px) and (max-width: 1366px) and (min-height: 501px) {

  /* All 7 primary navigation items visible in the single top row */
  .desktop-only-nav-item {
    display: inline-flex !important;
  }

  .tablet-schedules-item {
    display: none !important;
  }

  /* Other Pages on Wide Tablets (Sheets, Questions, Recordings, Schedules, Study Rooms) */
  .schedules-cards-grid,
  .sheets-subject-grid,
  .sheets-grid-container,
  .questions-subject-grid,
  .bento-sheet-grid,
  .audio-subject-grid,
  .audio-sheets-grid,
  .sr-rooms-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* Compact header spacing for 720px–920px tablets so all 7 nav items fit with zero overlap */
@media (min-width: 720px) and (max-width: 920px) and (min-height: 501px) {
  .site-header {
    padding-inline: 12px !important;
    gap: 4px !important;
  }

  .header-brand-name {
    font-size: 0.84rem !important;
    letter-spacing: 0.01em !important;
  }

  .header-nav-center {
    gap: 1px !important;
  }

  .header-nav-pill {
    padding-inline: 5px !important;
    padding-block: 5px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
  }

  .header-nav-pill.active {
    padding-inline: 8px !important;
  }

  #header-auth-action-box .header-guest-pill,
  #header-auth-action-box .header-guest-badge {
    display: none !important;
  }

  #header-auth-action-box .header-signin-btn,
  #header-auth-action-box .btn-header-signin {
    height: 32px !important;
    padding: 4px 10px !important;
    font-size: 0.74rem !important;
  }

  #header-auth-action-box .header-user-badge {
    height: 32px !important;
    padding: 3px 9px 3px 4px !important;
    gap: 5px !important;
  }
}

/* ============================================================================
   3. MEDIUM PORTRAIT TABLETS (720px <= width <= 819px, height >= 501px)
   Covers:
   - Redmi Pad Pro Portrait (800×1280)
   - Standard iPad Portrait (768×1024, 810×1080)
   - iPad mini Portrait (744×1133)
   ============================================================================ */
@media (min-width: 720px) and (max-width: 819px) and (min-height: 501px) {

  /* Keep all 7 nav items visible in the single row using clean horizontal text pills */
  .desktop-only-nav-item {
    display: inline-flex !important;
  }

  .tablet-schedules-item {
    display: none !important;
  }

  .main-content {
    padding-inline: 16px !important;
  }

  /* Portrait Hero: balanced academic study desk height */
  .kuro-hero-banner {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
  }

  /* Statistics cards on 720px-819px: ensure "Completed Questions" fits cleanly */
  .kuro-summary-stat-card {
    padding: 12px 11px !important;
    gap: 9px !important;
  }

  .kssc-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  .kssc-label {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  /* Continue Studying: 3 balanced vertical columns on >= 768px (768, 800, 810),
     and 2 columns on 720px–767px */
  @media (max-width: 767px) {
    .kuro-continue-studying-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 12px !important;
    }
    .kuro-continue-studying-grid .continue-study-card:nth-child(3) {
      grid-column: 1 / -1 !important;
      min-height: 155px !important;
    }
  }

  /* Secondary Grids on Portrait Tablets: 2 balanced columns */
  .schedules-cards-grid,
  .sheets-subject-grid,
  .sheets-grid-container,
  .questions-subject-grid,
  .bento-sheet-grid,
  .audio-subject-grid,
  .audio-sheets-grid,
  .sr-rooms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .schedules-cards-grid .sched-card:nth-child(3) {
    grid-column: 1 / -1 !important;
    min-height: 200px !important;
  }
}

/* ============================================================================
   4. COMPACT PORTRAIT TABLETS (600px <= width <= 719px, height >= 501px)
   Covers:
   - Compact Android Tablet Portrait (600×960)
   ============================================================================ */
@media (min-width: 600px) and (max-width: 719px) and (min-height: 501px) {

  .site-header {
    padding-inline: 12px !important;
    gap: 4px !important;
  }

  .header-brand-name {
    font-size: 0.86rem !important;
  }

  /* On 600px–719px portrait, collapse Schedules into More dropdown so the
     remaining 6 items + Brand + Search/Bell/Profile fit in 1 single row! */
  .desktop-only-nav-item {
    display: none !important;
  }

  .tablet-schedules-item {
    display: flex !important;
  }

  .header-nav-pill {
    padding-inline: 7px !important;
    font-size: 0.68rem !important;
  }

  /* Hide text name in profile badge on 600px–680px so avatar + signout stay compact */
  #header-auth-action-box .user-display-name {
    display: none !important;
  }

  .main-content {
    padding-block: 14px 40px !important;
    padding-inline: 14px !important;
  }

  .kuro-hero-banner {
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
  }

  /* Statistics: 2×2 Grid on 600px–719px so labels never clip */
  .kuro-study-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Today & Tomorrow: Stack into 1 column on 600px–719px for generous width */
  .kuro-schedule-split-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  /* Continue Studying: 2-Column Grid (never 1 giant wide row) */
  .kuro-continue-studying-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .kuro-continue-studying-grid .continue-study-card:nth-child(3) {
    grid-column: 1 / -1 !important;
    min-height: 155px !important;
  }

  .schedules-cards-grid,
  .sheets-subject-grid,
  .sheets-grid-container,
  .questions-subject-grid,
  .bento-sheet-grid,
  .audio-subject-grid,
  .audio-sheets-grid,
  .sr-rooms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}