/* =========================================================
   NepalType layout: phone / tablet / desktop
   Loaded last so it wins over older overlapping media queries.
   Phone  : <= 767px
   Tablet : 768px – 1199px
   Desktop: >= 1200px
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

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

.glass-header,
.secondary-nav-container,
.app-container {
    max-width: 100%;
}

.glass-header {
    min-width: 0;
}

.header-right,
.header-actions,
.header-left {
    min-width: 0;
}

.nt-signin-btn span,
.nt-user-name,
.stats-nav-btn span {
    white-space: nowrap;
}

.mobile-menu-card {
    max-width: min(360px, calc(100vw - 24px));
}

.lb-tabs-container,
.heatmap-switcher,
.lb-timeframe-tabs {
    flex-wrap: wrap;
}

/* ---------- DESKTOP (>= 1200px) ---------- */
@media (min-width: 1200px) {
    .mobile-hamburger,
    .tablet-mode-toggle,
    .tablet-nav-toggle,
    .mobile-nav-trigger {
        display: none !important;
    }

    .desktop-nav {
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .input-mode-switcher {
        display: flex !important;
    }

    .glass-header {
        width: min(1420px, calc(100% - 24px));
        padding: 8px 18px !important;
        gap: 12px;
    }

    .secondary-nav-container {
        width: min(1380px, calc(100% - 24px));
        flex-wrap: nowrap;
    }

    .secondary-nav-content {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
    }

    .nt-signin-btn {
        height: 38px;
    }
}

/* Compact laptop / small desktop */
@media (min-width: 1200px) and (max-width: 1360px) {
    .mode-label {
        display: none !important;
    }

    .stats-nav-btn span {
        display: none !important;
    }

    .stats-nav-btn {
        width: 40px !important;
        justify-content: center !important;
        padding: 8px !important;
    }

    .logo {
        font-size: 1.7rem !important;
        padding: 6px 10px !important;
    }
}

/* ---------- TABLET (768px – 1199px) ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
    .mobile-hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text-primary);
        flex-shrink: 0;
    }

    .desktop-nav,
    .input-mode-switcher:not(.active) {
        display: none !important;
    }

    .tablet-mode-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 40px;
        min-width: 44px;
        max-width: 150px;
        padding: 0 12px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text-primary);
        font-weight: 700;
        flex-shrink: 0;
    }

    .glass-header {
        width: calc(100% - 16px);
        margin: 6px auto;
        padding: 6px 10px !important;
        border-radius: 16px;
        gap: 8px;
        flex-wrap: nowrap !important;
    }

    .logo {
        font-size: 1.45rem !important;
        padding: 4px 8px !important;
    }

    .header-actions {
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .stats-nav-btn span,
    .nt-user-name {
        display: none !important;
    }

    .stats-nav-btn,
    .mode-right-actions .view-toggle-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    #theme-config-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .nt-signin-btn {
        height: 40px;
        padding: 0 10px !important;
        border-radius: 12px;
    }

    .input-mode-switcher.active {
        display: flex !important;
        position: absolute;
        top: calc(100% + 8px);
        right: 8px;
        flex-direction: column;
        width: min(240px, calc(100vw - 24px));
        padding: 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
        z-index: 4000;
    }

    .input-mode-switcher.active .mode-btn,
    .input-mode-switcher.active .mode-btn-split-group {
        width: 100%;
    }

    .input-mode-switcher.active .mode-btn-split-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .secondary-nav-container {
        width: calc(100% - 16px);
        margin: 0 auto 8px;
        padding: 8px 10px !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .secondary-nav-content {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
    }

    .nav-left-curriculum,
    .view-toggle-group,
    .nav-center-lesson {
        flex: 1 1 auto;
        min-width: 0;
    }

    .nav-center-lesson {
        justify-content: center;
        max-width: 100%;
    }

    .mobile-nav-trigger {
        display: none !important;
    }

    .stats-bar {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .typing-area-wrapper {
        margin: 0 8px;
        padding: 14px !important;
    }

    .keyboard-section {
        padding: 8px !important;
        transform: none;
    }

    .heatmap-switcher,
    .lb-tabs-container {
        justify-content: center;
        gap: 8px;
    }

    .stats-modal-content {
        width: min(96vw, 860px);
        max-height: 92vh;
        overflow: auto;
    }
}

@media (min-width: 768px) and (max-width: 960px) {
    .tablet-mode-toggle span {
        display: none !important;
    }

    .tablet-mode-toggle {
        width: 42px !important;
        padding: 0 !important;
    }

    .nt-signin-btn span {
        display: none;
    }

    .nt-signin-btn {
        width: 42px;
        justify-content: center;
        padding: 0 !important;
    }

    .nav-section-group {
        flex-wrap: wrap;
    }

    .stats-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ---------- PHONE (<= 767px) ---------- */
@media (max-width: 767px) {
    .app-container {
        padding: 0 !important;
        width: 100%;
        min-height: 100dvh;
    }

    .mobile-hamburger {
        display: flex !important;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .desktop-nav,
    .tablet-mode-toggle,
    .input-mode-switcher,
    .header-center,
    .blog-nav-text,
    .stats-nav-btn span,
    .nt-user-name,
    .nt-signin-btn span,
    .nt-chevron {
        display: none !important;
    }

    .glass-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 3000;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border-radius: 0 !important;
        gap: 6px !important;
        min-height: 56px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .logo {
        font-size: 1.2rem !important;
        padding: 0 !important;
        gap: 4px !important;
    }

    .header-left {
        gap: 6px !important;
        flex: 1;
        min-width: 0;
    }

    .header-right,
    .header-actions,
    .mode-right-actions {
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .nt-signin-btn,
    .stats-nav-btn,
    .mode-right-actions .view-toggle-btn,
    .nt-avatar-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    #theme-config-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .nt-avatar-btn {
        padding: 2px !important;
    }

    .nt-avatar-img {
        width: 32px;
        height: 32px;
    }

    .mobile-menu-card {
        top: 60px !important;
        left: 10px !important;
        right: 10px;
        width: calc(100vw - 20px) !important;
        max-width: none;
        border-radius: 16px;
    }

    .mobile-nav-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .secondary-nav-container {
        width: calc(100% - 16px);
        margin: 8px auto !important;
        padding: 6px !important;
        flex-direction: column;
        border-radius: 14px;
        overflow: visible !important;
    }

    .mobile-nav-trigger {
        display: flex !important;
        width: 100%;
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 12px;
        justify-content: space-between;
        align-items: center;
        font-size: 0.95rem;
        font-weight: 800;
        text-align: left;
        gap: 8px;
    }

    #mobile-lesson-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .secondary-nav-content {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 12px;
        padding: 10px 4px 6px;
    }

    .secondary-nav-content.active {
        display: flex !important;
    }

    .nav-section-group,
    .view-toggle-group,
    .nav-center-lesson {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .nav-center-lesson {
        justify-content: space-between;
    }

    .active-lesson-glow {
        flex: 1;
        min-width: 0;
    }

    #current-lesson-label {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .typing-area-wrapper {
        margin: 0 8px 8px !important;
        padding: 12px !important;
        border-radius: 14px !important;
        min-height: 42vh !important;
    }

    .stats-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 4px 0 !important;
    }

    .stat-item,
    #daily-goal-ui,
    #streak-ui {
        min-width: 0 !important;
        width: 100% !important;
        padding: 6px 4px !important;
        border: none !important;
    }

    .keyboard-section {
        padding: 8px 4px 16px !important;
        margin-top: 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .keyboard,
    .heatmap-keyboard {
        transform-origin: top center;
    }

    .stats-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow: auto;
    }

    .heatmap-switcher button,
    .lb-tab,
    .lb-timeframe {
        font-size: 0.78rem;
        padding: 8px 10px !important;
    }

    .lb-table {
        font-size: 0.8rem;
    }

    .nt-profile-dropdown {
        position: fixed !important;
        right: 10px !important;
        left: 10px !important;
        top: 62px !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    .theme-popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(92vw, 340px) !important;
        max-height: 80vh;
        overflow: auto;
        z-index: 6000 !important;
    }

    .contact-fab {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: 12px;
    }
}

@media (max-width: 380px) {
    .logo {
        font-size: 1.05rem !important;
    }

    .glass-header {
        padding: 6px 8px !important;
    }

    .header-actions {
        gap: 4px !important;
    }
}

/* Blog / guide / article pages */
@media (max-width: 768px) {
    .glass-header .header-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .nav-pills {
        gap: 8px !important;
    }

    .hero {
        padding: 6.5rem 1.1rem 3rem !important;
    }

    .hero h1 {
        font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
        line-height: 1.2;
    }

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .content-section {
        display: block !important;
        gap: 1.5rem !important;
    }

    .guide-content table,
    .article-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero {
        padding: 7.5rem 2rem 4rem;
    }

    .content-section {
        gap: 2rem !important;
    }
}