/* TumaMaoni light professional UI layer: visual only, no behavior changes. */
:root {
    --tm-bg: #f5f8fd;
    --tm-surface: #ffffff;
    --tm-soft: #f8fbff;
    --tm-border: #dbe6f4;
    --tm-border-strong: #c4d4ea;
    --tm-text: #102033;
    --tm-muted: #64748b;
    --tm-primary: #4f46e5;
    --tm-primary-dark: #4338ca;
    --tm-primary-soft: #eef2ff;
    --tm-teal: #10b981;
    --tm-teal-soft: #ecfdf5;
    --tm-amber: #d97706;
    --tm-red: #dc2626;
    --tm-radius: 12px;
    --tm-radius-lg: 20px;
    --tm-pill: 999px;
    --tm-shadow: 0 16px 40px rgba(16, 32, 51, 0.10);
    --tm-shadow-sm: 0 1px 3px rgba(16, 32, 51, 0.08);
}

html,
body {
    background:
        radial-gradient(circle at 10% 0%, rgba(79, 70, 229, 0.14), transparent 28rem),
        radial-gradient(circle at 90% 0%, rgba(16, 185, 129, 0.10), transparent 26rem),
        var(--tm-bg) !important;
    color: var(--tm-text) !important;
    letter-spacing: 0 !important;
}

.dashboard-page::before,
.auth-page::before {
    display: none !important;
}

.main-content {
    background: transparent !important;
}

.sidebar {
    width: 248px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border-right: 1px solid var(--tm-border) !important;
    box-shadow: 12px 0 36px rgba(16, 32, 51, 0.05) !important;
}

menu-item,
logout-btn,
.btn,
.btn-next,
.btn-prev,
.btn-submit,
.btn-nav,
.lang-btn,
.pagination-link,
.mobile-menu-toggle {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.menu-item {
    min-height: 42px !important;
    font-size: 0.84rem !important;
}

.hamburger.mobile-menu-toggle {
    background: #ffffff !important;
    border: 1px solid var(--tm-border) !important;
    color: var(--tm-primary) !important;
    box-shadow: 0 12px 24px rgba(16, 32, 51, 0.08) !important;
}

.hamburger.mobile-menu-toggle:hover {
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary-dark) !important;
}

.mobile-menu {
    width: min(54vw, 320px) !important;
    background: #f8fbff !important;
    border-left: 1px solid var(--tm-border) !important;
    box-shadow: -18px 0 42px rgba(16, 32, 51, 0.16) !important;
}

.mobile-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--tm-primary);
}

.mobile-nav-link {
    background: #ffffff !important;
    border-color: var(--tm-border) !important;
}

.mobile-nav-link:hover {
    background: var(--tm-primary-soft) !important;
    border-color: var(--tm-border-strong) !important;
    color: var(--tm-primary) !important;
}

.mobile-menu-header {
    min-height: 46px !important;
    margin-bottom: 16px !important;
    padding-right: 48px !important;
}

.mobile-menu-logo {
    display: block;
    width: 58px !important;
    height: auto !important;
}

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

.mobile-nav-link,
.mobile-btn-nav {
    min-height: 48px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    gap: 10px !important;
}

.mobile-nav-link i,
.mobile-btn-nav i {
    width: 20px !important;
    text-align: center !important;
    flex: 0 0 20px !important;
}

.footer,
.footer * {
    color: #ffffff !important;
}

.footer {
    background: #1e293b !important;
}

.footer-brand p,
.footer-bottom,
.footer-bottom p {
    color: rgba(255, 255, 255, 0.72) !important;
}

.footer-link,
.footer-link:visited,
.footer-link:active {
    color: rgba(255, 255, 255, 0.9) !important;
}

.footer-link:hover {
    color: #ffffff !important;
}

.footer-content {
    padding-bottom: 20px !important;
}

.footer-social {
    margin-bottom: 10px !important;
}

.social-link {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.social-link:hover {
    background: var(--tm-primary) !important;
}

.menu-item.active,
.btn-primary,
.btn-next,
.btn-submit,
.btn-nav {
    background: linear-gradient(135deg, var(--tm-primary), var(--tm-teal)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22) !important;
}

.menu-item:hover,
.logout-btn:hover,
.btn-secondary,
.btn-prev,
.lang-btn,
.pagination-link {
    background: #ffffff !important;
    border: 1px solid var(--tm-border) !important;
    color: var(--tm-primary) !important;
}

.dashboard-header,
.header-card {
    position: relative !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(16, 185, 129, 0.08)),
        #ffffff !important;
    border: 1px solid rgba(79, 70, 229, 0.15) !important;
    border-radius: var(--tm-radius-lg) !important;
    box-shadow: var(--tm-shadow) !important;
}

.dashboard-header::after,
.header-card::after {
    display: none !important;
}

.auth-card::after {
    display: none !important;
}

.dashboard-header > *,
.auth-card > *,
.header-card > * {
    position: relative !important;
    z-index: 1 !important;
}

.stat-card,
.dashboard-card,
.table-card,
.chart-card,
.settings-container,
.settings-card,
.filters-card,
.modal-content,
.smooth-card,
.auth-card,
.feature-card,
.pricing-card,
.testimonial-card,
.contact-card,
.help-card,
.legal-card,
.feedback-item,
.trend-item,
.detail-item {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-lg) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.stat-card:hover,
.dashboard-card:hover,
.table-card:hover,
.smooth-card:hover,
.auth-card:hover,
.feature-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--tm-border-strong) !important;
    box-shadow: var(--tm-shadow) !important;
}

.card-header,
.table-header,
.filters-header,
.modal-header,
.settings-card .card-header {
    background: linear-gradient(180deg, #ffffff, var(--tm-soft)) !important;
    border-bottom: 1px solid var(--tm-border) !important;
}

.stat-card::before,
.auth-card::before {
    background: linear-gradient(90deg, var(--tm-primary), var(--tm-teal)) !important;
    opacity: 1 !important;
}

.stat-icon,
.department-icon,
.product-icon,
.section-heading i,
.feature-icon,
.benefit-icon,
.contact-icon {
    background: transparent !important;
    color: var(--tm-text) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.stat-card:nth-child(2n) .stat-icon {
    background: transparent !important;
    color: var(--tm-text) !important;
}

h1,
h2,
h3,
h4,
.header-title h1,
.auth-header h1,
.auth-header h2,
.section-heading h3,
.card-header h3,
.table-header h3 {
    color: var(--tm-text) !important;
    letter-spacing: 0 !important;
}

/* Hero/header title: responsive, larger than previous override */
.header-title h1,
.hero h1,
.auth-header h1 {
    /* restore responsive scaling while keeping it compact on small screens */
    font-size: clamp(1.55rem, 3.6vw, 2.55rem) !important;
    line-height: 1.06 !important;
}

/* Increase hero title specifically to make main headline larger */
.hero .hero-title {
    font-size: clamp(1.8rem, 4vw, 3rem) !important;
    line-height: 1.04 !important;
    font-weight: 1000 !important;
}

@media (max-width: 768px) {
    .hero .hero-title {
        font-size: 1.75rem !important;
    }
}

p,
.header-title p,
.stat-content p,
.user-shop,
.form-description {
    color: var(--tm-muted) !important;
}

.form-group input,
.form-group select,
.form-group textarea,
.filter-group input,
.filter-group select,
.input-control {
    background: #ffffff !important;
    border: 1px solid var(--tm-border-strong) !important;
    border-radius: 16px !important;
    color: var(--tm-text) !important;
    box-shadow: 0 1px 0 rgba(16, 32, 51, 0.03) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.filter-group input:focus,
.filter-group select:focus,
.input-control:focus {
    border-color: var(--tm-primary) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14) !important;
    outline: none !important;
}

.table-container {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: none !important;
}

.feedbacks-table th,
.departments-table th,
.products-table th {
    background: #f6f9fe !important;
    color: #506176 !important;
}

.feedbacks-table tr:hover,
.departments-table tr:hover,
.products-table tr:hover {
    background: #f8fbff !important;
}

.tag,
.category-tag,
.feedback-count,
.status-badge,
.recommend-badge,
.stat-trend,
.score-num,
.trend-count {
    border-radius: var(--tm-pill) !important;
    font-weight: 800 !important;
}

.tag-department,
.category-tag {
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary) !important;
}

.tag-location,
.feedback-count {
    background: var(--tm-teal-soft) !important;
    color: var(--tm-teal) !important;
}

.auth-page {
    align-items: center !important;
}

.auth-container {
    max-width: 420px !important;
}

.auth-card {
    position: relative !important;
    overflow: hidden !important;
    padding: 24px !important;
    backdrop-filter: none !important;
    box-shadow: var(--tm-shadow) !important;
}

.form-wrapper {
    max-width: 760px !important;
    padding-top: 28px !important;
}

.brand-header {
    position: sticky !important;
    top: 14px !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-lg) !important;
    padding: 12px 14px !important;
    box-shadow: var(--tm-shadow-sm) !important;
    backdrop-filter: blur(18px) !important;
}

.logo-box,
.shop-logo {
    background: linear-gradient(135deg, var(--tm-primary), var(--tm-teal)) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
}

.logo-circle,
.logo-icon {
    background: transparent !important;
    color: var(--tm-text) !important;
    border-radius: 16px !important;
}

.smooth-card {
    padding: 26px !important;
}

.step-dot {
    width: 34px !important;
    height: 8px !important;
    border-radius: var(--tm-pill) !important;
    background: #d8e2f0 !important;
}

.step-dot.active {
    background: var(--tm-primary) !important;
}

.rating-box,
.radio-label {
    background: var(--tm-soft) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
}

.radio-btn input:checked + .radio-label {
    background: var(--tm-primary-soft) !important;
    border-color: var(--tm-primary) !important;
    color: var(--tm-primary) !important;
}

.navbar {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid var(--tm-border) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.hero,
.hero-section {
    background:
    radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 30rem),
        linear-gradient(180deg, #ffffff, #f7faff) !important;
}

body .hero,
body .hero-section {
    background:
        radial-gradient(circle at 82% 8%, rgba(16, 185, 129, 0.10), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, #f7faff 68%, #ffffff 100%) !important;
}

@media (max-width: 768px) {
    .main-content {
        padding: 16px !important;
        padding-top: 82px !important;
    }

    .dashboard-header,
    .auth-card,
    .smooth-card,
    .stat-card,
    .dashboard-card,
    .table-card {
        border-radius: 20px !important;
    }

    .brand-header {
        position: static !important;
    }

    body .mobile-menu {
        width: min(54vw, 300px) !important;
        border-radius: 0 0 0 22px !important;
    }
}

@media (max-width: 520px) {
    body .mobile-menu {
        width: 58vw !important;
        min-width: 220px !important;
        border-radius: 0 0 0 18px !important;
    }
}

@media (max-width: 768px) {
    body:has(.hero) .hero-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    body:has(.hero) .btn-hero {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        gap: 8px !important;
    }

    body:has(.hero) .btn-hero i {
        flex: 0 0 auto !important;
        font-size: 0.9rem !important;
    }

    body:has(.hero) .features-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 14px !important;
    }

    body:has(.hero) .feature-card {
        text-align: center !important;
    }

    body:has(.hero) .feature-icon {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.hero) .feature-description {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1024px) {
    body:has(.hero) .nav-container {
        padding: 10px 0 !important;
    }

    body:has(.hero) .nav-logo {
        height: 52px !important;
    }

    body:has(.hero) .logo-image {
        max-height: 50px !important;
    }

    body:has(.hero) .nav-links {
        gap: 10px !important;
    }

    body:has(.hero) .nav-link,
    body:has(.hero) .btn-nav {
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 0.88rem !important;
    }

    body:has(.hero) .hero {
        padding: 104px 5% 58px !important;
    }

    body:has(.hero) .hero-content {
        max-width: 1220px !important;
        gap: 44px !important;
    }

    body:has(.hero) .hero-text {
        max-width: 660px !important;
    }

    body:has(.hero) .hero-eyebrow {
        padding: 8px 15px !important;
        margin-top: 50px !important;
        margin-bottom: 18px !important;
        font-size: 0.88rem !important;
    }

    body:has(.hero) .hero .hero-title {
        font-size: clamp(2.75rem, 4vw, 4rem) !important;
        line-height: 1.06 !important;
        margin-bottom: 18px !important;
    }

    body:has(.hero) .hero-subtitle {
        max-width: 620px !important;
        font-size: 1.08rem !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
    }

    body:has(.hero) .hero-buttons {
        gap: 12px !important;
    }

    body:has(.hero) .btn-hero,
    body:has(.hero) .btn-cta {
        min-height: 48px !important;
        padding: 11px 20px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }

    body:has(.hero) .hero-image {
        max-width: 500px !important;
    }

    body:has(.hero) .features {
        padding: 58px 5% !important;
    }

    body:has(.hero) .section-header {
        margin-bottom: 28px !important;
    }

    body:has(.hero) .section-title {
        font-size: clamp(1.65rem, 2.4vw, 2.25rem) !important;
        margin-bottom: 10px !important;
    }

    body:has(.hero) .section-subtitle {
        font-size: 0.95rem !important;
        max-width: 620px !important;
    }

    body:has(.hero) .features-grid {
        max-width: 1120px !important;
        gap: 16px !important;
    }

    body:has(.hero) .feature-card {
        padding: 22px 20px !important;
        border-radius: 16px !important;
    }

    body:has(.hero) .feature-icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 14px !important;
        font-size: 1.2rem !important;
        border-radius: 14px !important;
    }

    body:has(.hero) .feature-title {
        font-size: 1.02rem !important;
        margin-bottom: 8px !important;
    }

    body:has(.hero) .feature-description {
        font-size: 0.86rem !important;
        line-height: 1.55 !important;
    }

    body:has(.hero) .cta {
        padding: 56px 5% !important;
    }

    body:has(.hero) .cta-title {
        font-size: clamp(1.65rem, 2.4vw, 2.25rem) !important;
    }

    body:has(.hero) .cta-subtitle {
        font-size: 0.98rem !important;
        margin-bottom: 22px !important;
    }

    body:has(.hero) .footer {
        padding: 44px 5% 28px !important;
    }

    body:has(.hero) .footer-content {
        max-width: 1120px !important;
        gap: 22px !important;
        padding-bottom: 16px !important;
    }

    body:has(.hero) .footer-brand h3 {
        font-size: 1.35rem !important;
        margin-bottom: 10px !important;
    }

    body:has(.hero) .footer-column h4 {
        font-size: 0.96rem !important;
        margin-bottom: 12px !important;
    }

    body:has(.hero) .footer-brand p,
    body:has(.hero) .footer-link,
    body:has(.hero) .footer-bottom p {
        font-size: 0.86rem !important;
    }

    body:has(.hero) .footer-links {
        gap: 8px !important;
    }
}

/* Authenticated mobile layout polish */
@media (max-width: 1024px) {
    body.dashboard-page {
        background: var(--tm-bg) !important;
    }

    body.dashboard-page .sidebar {
        width: min(86vw, 320px) !important;
        max-width: 320px !important;
        border-radius: 0 18px 18px 0 !important;
        overflow-y: auto !important;
    }

    body.dashboard-page .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 84px 16px 24px !important;
    }

    body.dashboard-page .mobile-menu-toggle {
        display: inline-flex !important;
        top: 14px !important;
        left: 14px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        border: 1px solid var(--tm-border) !important;
        color: var(--tm-primary) !important;
        box-shadow: 0 10px 24px rgba(16, 32, 51, 0.12) !important;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
    }

    body.dashboard-page .mobile-menu-toggle.is-scroll-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-16px) scale(0.92) !important;
    }

    body.dashboard-page .mobile-menu-toggle.active {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.dashboard-page .dashboard-header,
    body.dashboard-page .dashboard-card,
    body.dashboard-page .table-card,
    body.dashboard-page .settings-card,
    body.dashboard-page .filters-card {
        border-radius: 18px !important;
        box-shadow: 0 10px 26px rgba(16, 32, 51, 0.07) !important;
    }

    body.dashboard-page .dashboard-header {
        padding: 18px !important;
        margin-bottom: 16px !important;
    }

    body.dashboard-page .header-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    body.dashboard-page .header-title h1 {
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 6px !important;
    }

    body.dashboard-page .header-title p {
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
    }

    body.dashboard-page .header-actions,
    body.dashboard-page .feedback-link-container,
    body.dashboard-page .feedback-link-box {
        width: 100% !important;
    }

    body.dashboard-page .feedback-link-container {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    body.dashboard-page .feedback-link-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    body.dashboard-page .feedback-link-box code {
        display: none !important;
    }

    body.dashboard-page .feedback-link-box .btn,
    body.dashboard-page .stat-action .btn,
    body.dashboard-page .card-header .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 42px !important;
    }

    body.dashboard-page .stats-grid,
    body.dashboard-page .dashboard-grid,
    body.dashboard-page .tables-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.dashboard-page .stat-card {
        display: grid !important;
        grid-template-columns: 44px 1fr !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 16px !important;
        text-align: left !important;
        border-radius: 16px !important;
    }

    body.dashboard-page .stat-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        font-size: 1rem !important;
    }

    body.dashboard-page .stat-content h3 {
        font-size: 1.45rem !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
    }

    body.dashboard-page .stat-content p {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    body.dashboard-page .stat-trend,
    body.dashboard-page .stat-action {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin-top: 2px !important;
    }

    body.dashboard-page .dashboard-card {
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.dashboard-page .card-header,
    body.dashboard-page .table-header,
    body.dashboard-page .filters-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 16px !important;
    }

    body.dashboard-page .card-header h3,
    body.dashboard-page .table-header h3,
    body.dashboard-page .filters-header h3 {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    body.dashboard-page .card-content,
    body.dashboard-page .table-container {
        padding: 16px !important;
    }

    body.dashboard-page .feedback-item,
    body.dashboard-page .trend-item {
        border-radius: 14px !important;
    }

    body.dashboard-page .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.dashboard-page .settings-container {
        padding-top: 0 !important;
        overflow: visible !important;
    }

    body.dashboard-page .settings-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 !important;
        gap: 0 !important;
        border-bottom: 1px solid var(--tm-border) !important;
        background: #ffffff !important;
    }

    body.dashboard-page .settings-tabs::-webkit-scrollbar {
        display: none;
    }

    body.dashboard-page .settings-tabs .tab-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 3px solid transparent !important;
        background: transparent !important;
        color: var(--tm-muted) !important;
        font-weight: 600 !important;
        font-size: 0.72rem !important;
        padding: 12px 6px !important;
        justify-content: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        min-height: 48px !important;
    }

    body.dashboard-page .settings-tabs .tab-btn i {
        font-size: 0.95rem !important;
        flex-shrink: 0;
    }

    body.dashboard-page .settings-tabs .tab-btn:hover {
        background: var(--tm-primary-soft) !important;
        color: var(--tm-primary) !important;
        border-bottom-color: transparent !important;
    }

    body.dashboard-page .settings-tabs .tab-btn.active {
        color: var(--tm-primary) !important;
        background: transparent !important;
        border-bottom-color: var(--tm-primary) !important;
    }

    body.dashboard-page .settings-tabs .tab-btn.active:hover {
        border-bottom-color: var(--tm-primary) !important;
    }

    body.dashboard-page .tab-content {
        padding: 16px !important;
    }

    body.dashboard-page .settings-card .card-header,
    body.dashboard-page .settings-card .card-content {
        padding: 16px !important;
    }

    body.dashboard-page .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

@media (max-width: 420px) {
    body.dashboard-page .main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.dashboard-page .dashboard-header,
    body.dashboard-page .dashboard-card,
    body.dashboard-page .table-card,
    body.dashboard-page .settings-card,
    body.dashboard-page .filters-card {
        border-radius: 16px !important;
    }

    body.dashboard-page .stat-card {
        grid-template-columns: 40px 1fr !important;
        padding: 14px !important;
    }

    body.dashboard-page .stat-icon {
        width: 40px !important;
        height: 40px !important;
    }

    body.dashboard-page .settings-tabs .tab-btn {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        padding: 10px 12px !important;
        font-size: 0.7rem !important;
    }
}

/* Settings tabs: flat underline (desktop + base) */
body.dashboard-page .settings-container {
    padding-top: 0 !important;
}

body.dashboard-page .settings-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 !important;
    border-bottom: 1px solid var(--tm-border) !important;
}

body.dashboard-page .settings-tabs::-webkit-scrollbar {
    display: none;
}

body.dashboard-page .settings-tabs .tab-btn {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    justify-content: center;
    white-space: nowrap;
}

body.dashboard-page .settings-tabs .tab-btn:hover {
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary) !important;
    border-bottom-color: transparent !important;
}

body.dashboard-page .settings-tabs .tab-btn.active {
    color: var(--tm-primary) !important;
    background: transparent !important;
    border-bottom-color: var(--tm-primary) !important;
}