/*
 * Final responsive layer
 * Keeps the existing design, but fixes overflow and layout issues on tablet/mobile.
 */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

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

input,
select,
textarea,
button {
    max-width: 100%;
}

.main-shell,
.content-area,
.card,
.panel-card,
.form-card,
.history-card,
.nid-result-card,
.section-card,
.wallet-wrap,
.login-wrapper,
.wrapper {
    min-width: 0;
    max-width: 100%;
}

.table-wrapper,
.tbl-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper table,
.tbl-wrap table {
    width: 100%;
}

.form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

.search-form,
.form-card form,
.wallet-wrap form {
    width: 100%;
    max-width: 100%;
}

.topbar > div:first-of-type {
    min-width: 0;
}

.topbar-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-balance,
.topbar-user,
.menu-toggle,
.bottom-nav-item,
.nav-item,
.btn-primary,
.btn-secondary,
.btn-search,
.btn-submit,
.btn-login,
.btn-save,
.quick-link,
.btn,
button {
    touch-action: manipulation;
}

@media screen and (max-width: 1200px) {
    .dashboard-hero {
        grid-template-columns: 1fr !important;
    }

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

    .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    }
}

@media screen and (max-width: 960px) {
    .dashboard-layout {
        display: block;
        width: 100%;
    }

    .main-shell {
        width: 100%;
        min-height: 100dvh;
    }

    .sidebar {
        width: min(86vw, 305px) !important;
        max-width: 305px;
    }

    .topbar {
        width: auto;
        max-width: calc(100vw - 28px);
    }

    .topbar-title {
        font-size: clamp(1rem, 3.8vw, 1.18rem) !important;
    }

    .hero-card,
    .service-hero {
        flex-direction: column;
        align-items: stretch;
    }
}

@media screen and (max-width: 768px) {
    .content-area {
        padding-inline: 12px !important;
    }

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

    .quick-links,
    .method-grid,
    .nid-grid,
    .panel-grid,
    .service-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-actions,
    .dashboard-hero-actions,
    .modal-actions,
    .copy-row,
    .balance-status-bar,
    .nid-result-footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hero-actions > *,
    .dashboard-hero-actions > *,
    .modal-actions > *,
    .btn-primary,
    .btn-secondary,
    .btn-search,
    .btn-submit,
    .btn-copy,
    .btn-print,
    .quick-link {
        width: 100%;
        justify-content: center;
    }

    .dashboard-hero {
        min-height: auto !important;
        padding: 22px 18px !important;
        border-radius: 24px !important;
    }

    .dashboard-hero h2 {
        font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
        letter-spacing: -0.02em;
    }

    .dashboard-hero p,
    .service-card-modern p,
    .muted-text,
    .placeholder-card p {
        font-size: .92rem;
        line-height: 1.65;
    }

    .form-card,
    .panel-card,
    .placeholder-card,
    .service-card-modern,
    .history-card,
    .nid-result-card,
    .card {
        border-radius: 20px !important;
    }

    .form-card {
        padding: 20px 16px !important;
    }

    .nid-profile-header {
        gap: 14px !important;
        padding: 16px 16px 0 !important;
    }

    .nid-profile-info {
        width: 100%;
    }

    .nid-info-body {
        padding: 14px 16px !important;
    }

    .nid-result-footer {
        padding: 12px 16px !important;
    }

    .copy-number {
        width: 100%;
        text-align: center;
        word-break: break-word;
    }

    /* Admin panel */
    .adm-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 70px 14px 24px !important;
    }

    .adm-sidebar {
        width: min(86vw, 280px) !important;
        max-width: 280px;
    }

    .adm-topbar,
    .section-header,
    .search-bar,
    .page-header {
        flex-wrap: wrap;
    }

    .adm-topbar > div,
    .page-header > * {
        min-width: 0;
    }

    .page-header {
        align-items: stretch !important;
        gap: 10px !important;
    }

    .page-header h1 {
        width: 100%;
        font-size: 1.12rem !important;
    }

    .back-btn {
        flex: 1 1 160px;
        text-align: center;
    }

    .card-title {
        line-height: 1.4;
    }
}

@media screen and (max-width: 640px) {
    :root {
        --bottom-nav-h: 66px;
    }

    .topbar {
        max-width: calc(100vw - 20px);
        min-width: 0;
        padding: 0 10px !important;
        gap: 8px !important;
    }

    .topbar > div:first-of-type {
        flex: 1 1 auto;
    }

    .topbar-title {
        font-size: 1rem !important;
    }

    .topbar-balance {
        flex: 0 0 auto;
        max-width: 132px;
        white-space: nowrap;
    }

    .bal-num {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content-area {
        padding: 10px 10px 0 !important;
        padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 30px) !important;
    }

    .dashboard-hero-badge {
        max-width: 100%;
        white-space: normal;
        line-height: 1.45;
    }

    .hero-mini-card,
    .service-card-modern,
    .stat-card,
    .panel-card,
    .form-card,
    .history-card,
    .placeholder-card,
    .method-card,
    .recharge-card,
    .balance-card {
        padding: 16px !important;
    }

    .stat-value,
    .stat-val {
        font-size: clamp(1.25rem, 8vw, 1.65rem) !important;
    }

    .section-header.with-padding,
    .with-padding {
        padding: 16px 16px 0 !important;
    }

    .form-group label {
        align-items: flex-start;
    }

    .label-hint {
        width: 100%;
        border-radius: 12px;
        line-height: 1.45;
    }

    .history-table {
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
    }

    .history-table thead {
        display: none !important;
    }

    .history-table,
    .history-table tbody,
    .history-table tr,
    .history-table td {
        display: block !important;
        width: 100% !important;
    }

    .history-table tr {
        border: 1px solid var(--border, rgba(15,118,110,.14));
        border-radius: 16px;
        padding: 8px 10px;
        background: var(--bg-card, #fff);
        box-shadow: 0 8px 24px rgba(17,94,89,.06);
    }

    .history-table td {
        display: flex !important;
        justify-content: space-between;
        gap: 12px;
        text-align: right !important;
        border-bottom: 1px dashed var(--border-light, #edf7f5) !important;
        padding: 9px 2px !important;
        white-space: normal !important;
        word-break: break-word;
    }

    .history-table td:last-child {
        border-bottom: 0 !important;
    }

    .history-table td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        color: var(--text-light, #64748b);
        font-weight: 700;
    }

    .bottom-nav {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto;
    }

    /* Auth pages */
    body:has(.login-wrapper),
    body:has(.wrapper) {
        padding: 14px !important;
        align-items: flex-start !important;
    }

    .login-wrapper,
    .wrapper {
        width: 100% !important;
        max-width: 448px !important;
        margin-inline: auto;
    }

    .login-wrapper .card,
    .wrapper .card {
        padding: 22px 18px !important;
        border-radius: 24px !important;
    }

    /* Admin panel */
    .adm-main {
        padding: 66px 12px 22px !important;
    }

    .adm-topbar h1 {
        font-size: 1.05rem !important;
    }

    .section-header h3 {
        font-size: .94rem !important;
    }

    .modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
}

@media screen and (max-width: 480px) {
    .stats-grid,
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .dashboard-hero {
        padding: 18px 14px !important;
    }

    .dashboard-hero h2 {
        font-size: 1.32rem !important;
    }

    .service-title,
    .hero-title {
        font-size: 1.18rem !important;
    }

    .nid-profile-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }

    .nid-badges {
        justify-content: center;
    }

    .topbar-balance {
        max-width: 110px;
        padding-inline: 8px !important;
    }

    .bal-num {
        max-width: 54px;
    }

    .method-grid,
    .form-grid,
    .quick-links,
    .panel-grid,
    .service-grid,
    .nid-grid {
        grid-template-columns: 1fr !important;
    }

    .page-header {
        flex-direction: column;
    }

    .back-btn {
        width: 100%;
    }
}

@media screen and (max-width: 380px) {
    .stats-grid,
    .grid {
        grid-template-columns: 1fr !important;
    }

    .topbar-title {
        font-size: .92rem !important;
    }

    .topbar-balance {
        max-width: 96px;
    }

    .bottom-nav-label {
        font-size: .58rem;
    }
}

@media screen and (max-width: 560px) {
    .hw-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .hw-thumb-wrap {
        grid-column: 1;
        grid-row: 1;
    }

    .hw-serial {
        position: absolute;
        transform: translate(-6px, -6px);
        z-index: 1;
    }

    .hw-info {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .hw-actions {
        grid-column: 1 / -1;
        width: 100%;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .hw-actions > *,
    .hw-btn-detail,
    .hw-btn-print-one,
    .hw-btn-edit,
    .hw-no-data {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }

    .hw-name-bn,
    .hw-name-en {
        white-space: normal !important;
    }

    .hw-meta-row,
    .hw-badge-row {
        gap: 6px !important;
    }
}

/* =========================================================
   TOPBAR DESKTOP FIX
   Problem: on laptop/desktop the profile icon gets clipped/squeezed
   when the title text or balance pill takes too much horizontal space.
   Fix: title area takes remaining space with overflow-hidden + ellipsis;
   balance and profile are flex-shrink:0 so they always keep their size.
   ========================================================= */
@media screen and (min-width: 961px) {
    .topbar {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 24px !important;
        overflow: visible !important;
    }

    /* The title/subtitle wrapper grows to fill available space but clips */
    .topbar > div:first-of-type {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Title stays on one line, shows … when too long */
    .topbar-title {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Balance pill: never shrinks, never wraps */
    .topbar-balance {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    /* Theme toggle: never shrinks, always fully visible */
    .theme-toggle {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        clip-path: none !important;
        margin-right: 4px !important;
    }
}

/* =========================================================
   SIDEBAR DESKTOP FIX
   Problem fixed: on desktop the sidebar was scrolling away with page content,
   leaving a blank/light area on the left. Keep the user sidebar locked to the
   viewport and offset the content by the sidebar width.
   ========================================================= */
@media screen and (min-width: 961px) {
    .dashboard-layout {
        display: block !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
    }

    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--sidebar-w, 260px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: none !important;
        z-index: 1000 !important;
        flex-shrink: 0 !important;
    }

    .main-shell {
        margin-left: var(--sidebar-w, 260px) !important;
        width: calc(100% - var(--sidebar-w, 260px)) !important;
        max-width: calc(100% - var(--sidebar-w, 260px)) !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    .sidebar-overlay,
    body.sidebar-open .sidebar-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.sidebar-open {
        overflow: auto !important;
    }
}

/* =========================================================
   MOBILE DASHBOARD POLISH FIX
   Screenshot issue: mobile dashboard text/buttons were too large and cramped.
   This final layer makes the home dashboard compact, readable and app-like on phones.
   ========================================================= */
@media screen and (max-width: 640px) {
    html {
        font-size: 14px !important;
    }

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .main-shell {
        background: linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%) !important;
    }

    .topbar {
        min-height: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border-radius: 0 0 18px 18px !important;
        gap: 8px !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    }

    .menu-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
        font-size: 1.05rem !important;
    }

    .topbar-title {
        font-size: .98rem !important;
        line-height: 1.2 !important;
        max-width: 150px !important;
    }

    .topbar-subtitle {
        display: none !important;
    }

    .topbar-balance {
        height: 42px !important;
        max-width: 118px !important;
        padding: 5px 8px !important;
        gap: 5px !important;
        border-radius: 999px !important;
    }

    .bal-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 1rem !important;
    }

    .bal-num {
        max-width: 54px !important;
        font-size: .9rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .theme-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
        font-size: 1rem !important;
    }

    .topbar-user,
    .topbar-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .topbar-user {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .topbar-avatar {
        font-size: .92rem !important;
        border-width: 2px !important;
    }

    .content-area {
        padding: 12px 10px 0 !important;
        padding-bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 30px) !important;
    }

    .notice-bar {
        min-height: 44px !important;
        border-radius: 14px !important;
        padding: 9px 12px !important;
        margin-bottom: 12px !important;
    }

    .notice-text-center {
        font-size: .84rem !important;
        line-height: 1.45 !important;
        font-weight: 700 !important;
    }

    .dashboard-hero {
        display: block !important;
        min-height: auto !important;
        padding: 18px 16px !important;
        border-radius: 22px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .dashboard-hero-badge {
        display: inline-flex !important;
        max-width: 100% !important;
        padding: 5px 10px !important;
        font-size: .76rem !important;
        line-height: 1.25 !important;
        gap: 5px !important;
        white-space: nowrap !important;
    }

    .dashboard-hero h2 {
        font-size: clamp(1.05rem, 4.45vw, 1.22rem) !important;
        line-height: 1.42 !important;
        letter-spacing: -.015em !important;
        margin: 12px 0 8px !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .dashboard-hero p {
        font-size: .84rem !important;
        line-height: 1.58 !important;
        margin: 0 !important;
        color: #64748b !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .dashboard-hero-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 13px !important;
        width: 100% !important;
    }

    .dashboard-hero-actions a {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        height: auto !important;
        padding: 8px 9px !important;
        border-radius: 12px !important;
        font-size: .82rem !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .dashboard-hero-actions a:nth-child(3) {
        grid-column: 1 / -1 !important;
    }

    .dashboard-hero-side {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }

    .hero-mini-card {
        min-height: 68px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .hero-mini-card span {
        font-size: .74rem !important;
        line-height: 1.3 !important;
    }

    .hero-mini-card strong {
        font-size: .98rem !important;
        line-height: 1.35 !important;
        margin-top: 4px !important;
    }

    .service-grid,
    .panel-grid,
    .quick-links,
    .method-grid,
    .form-grid,
    .nid-grid {
        gap: 10px !important;
    }

    .service-card-modern,
    .panel-card,
    .history-card,
    .form-card,
    .card,
    .stat-card {
        border-radius: 18px !important;
        padding: 14px !important;
    }

    .service-card-modern .svc-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 13px !important;
        font-size: .86rem !important;
    }

    .service-card-modern h3,
    .service-title,
    .section-header h3 {
        font-size: .98rem !important;
        line-height: 1.35 !important;
        margin-top: 9px !important;
        margin-bottom: 5px !important;
    }

    .service-card-modern p,
    .muted-text,
    .placeholder-card p,
    .empty-state p,
    .empty-state small {
        font-size: .82rem !important;
        line-height: 1.55 !important;
    }

    .service-card-modern a,
    .quick-link,
    .text-link {
        font-size: .82rem !important;
        line-height: 1.35 !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .stat-card {
        min-height: 84px !important;
        padding: 12px !important;
    }

    .stat-label {
        font-size: .76rem !important;
        line-height: 1.35 !important;
    }

    .stat-value,
    .stat-val {
        font-size: 1.18rem !important;
        line-height: 1.25 !important;
    }

    .section-header,
    .section-header.with-padding,
    .with-padding {
        padding: 14px 14px 0 !important;
        gap: 8px !important;
    }

    .section-chip {
        font-size: .72rem !important;
        padding: 4px 8px !important;
    }

    .bottom-nav {
        left: 10px !important;
        right: 10px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
        height: 58px !important;
        min-height: 58px !important;
        border-radius: 20px !important;
        padding: 5px !important;
    }

    .bottom-nav-inner {
        height: 100% !important;
        gap: 2px !important;
    }

    .bottom-nav-item {
        min-height: 48px !important;
        padding: 4px 2px !important;
        border-radius: 16px !important;
        font-size: .72rem !important;
    }

    .bottom-nav-icon {
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .bottom-nav-label {
        font-size: .62rem !important;
        line-height: 1.15 !important;
    }
}

@media screen and (max-width: 390px) {
    html { font-size: 13.5px !important; }

    .topbar-title { max-width: 128px !important; }

    .topbar-balance { max-width: 108px !important; }
    .bal-num { max-width: 48px !important; }

    .dashboard-hero {
        padding: 16px 14px !important;
        border-radius: 20px !important;
    }

    .dashboard-hero h2 {
        font-size: 1.02rem !important;
        line-height: 1.42 !important;
    }

    .dashboard-hero p,
    .service-card-modern p,
    .muted-text {
        font-size: .8rem !important;
    }

    .dashboard-hero-actions {
        grid-template-columns: 1fr !important;
    }

    .dashboard-hero-actions a:nth-child(3) {
        grid-column: auto !important;
    }
}

/* =========================================================
   SIDEBAR FINAL HARD FIX (desktop + mobile)
   Fixes blank/light area under sidebar and prevents content overlap.
   Added after all earlier responsive rules so it wins the cascade.
   ========================================================= */
@media screen and (min-width: 961px) {
    :root {
        --sidebar-w: 286px;
    }

    body {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
    }

    .dashboard-layout {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        background: transparent !important;
    }

    /* Permanent dark strip behind sidebar. Even if any old CSS clips the
       sidebar height, this strip keeps the left side full-height. */
    .dashboard-layout::before {
        content: '' !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--sidebar-w, 286px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: linear-gradient(180deg, #0f172a 0%, #111827 52%, #0b1220 100%) !important;
        z-index: 900 !important;
        pointer-events: none !important;
    }

    aside.sidebar,
    .sidebar,
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        inset: 0 auto 0 0 !important;
        width: var(--sidebar-w, 286px) !important;
        min-width: var(--sidebar-w, 286px) !important;
        max-width: var(--sidebar-w, 286px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
        flex-shrink: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        transform: none !important;
        margin: 0 !important;
        padding: 18px 14px !important;
        background: linear-gradient(180deg, #0f172a 0%, #111827 52%, #0b1220 100%) !important;
        color: #f8fafc !important;
        border-right: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 10px 0 30px rgba(15,23,42,.18) !important;
        z-index: 1001 !important;
        isolation: isolate !important;
        clip-path: none !important;
        contain: none !important;
    }

    aside.sidebar::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar,
    #sidebar::-webkit-scrollbar {
        display: none !important;
    }

    /* Keep sidebar dark all the way to bottom inside the element too. */
    aside.sidebar::before,
    .sidebar::before,
    #sidebar::before {
        content: '' !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--sidebar-w, 286px) !important;
        background: linear-gradient(180deg, #0f172a 0%, #111827 52%, #0b1220 100%) !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    .main-shell {
        margin-left: var(--sidebar-w, 286px) !important;
        width: calc(100vw - var(--sidebar-w, 286px)) !important;
        max-width: calc(100vw - var(--sidebar-w, 286px)) !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .topbar {
        left: auto !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-overlay,
    body.sidebar-open .sidebar-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media screen and (max-width: 960px) {
    .dashboard-layout::before {
        display: none !important;
        content: none !important;
    }

    aside.sidebar,
    .sidebar,
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(86vw, 305px) !important;
        max-width: 305px !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(-105%) !important;
        z-index: 1001 !important;
        background: linear-gradient(180deg, #0f172a 0%, #111827 52%, #0b1220 100%) !important;
        box-shadow: 18px 0 55px rgba(15,23,42,.26) !important;
    }

    body.sidebar-open aside.sidebar,
    body.sidebar-open .sidebar,
    body.sidebar-open #sidebar {
        transform: translateX(0) !important;
    }

    .main-shell {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   HARD FIX: Order history "📋 দেখুন" modal must open on top
   of the current screen, not inside the scrolled content area.
   ========================================================== */
html.hw-modal-lock,
body.hw-modal-lock {
    overflow: hidden !important;
    overscroll-behavior: contain !important;
}

.hw-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: clamp(16px, 7vh, 76px) 16px 24px !important;
    overflow-y: auto !important;
    background: rgba(15, 23, 42, .58) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}

.hw-modal-backdrop.open {
    display: flex !important;
}

.hw-modal-box {
    position: relative !important;
    width: min(720px, calc(100vw - 28px)) !important;
    max-width: 720px !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    transform: none !important;
}

@media (min-width: 1024px) {
    .hw-modal-backdrop {
        padding-top: 84px !important;
    }
}

@media (max-width: 640px) {
    .hw-modal-backdrop {
        padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    }
    .hw-modal-box {
        width: 100% !important;
        max-height: calc(100dvh - 28px) !important;
        border-radius: 18px !important;
    }
    .hw-modal-header {
        padding: 14px 14px 12px !important;
        gap: 10px !important;
    }
}


/* V1/V2/V3/V4 print template button chooser in order history */
.hw-print-variants {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.hw-template-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    cursor: pointer;
    min-width: 50px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hw-template-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
    filter: brightness(1.04);
}
.hw-template-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
}
.hw-template-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .25);
    outline-offset: 2px;
}
.hw-template-v1 {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: rgba(37, 99, 235, .28);
    color: #fff;
}
.hw-template-v2 {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border-color: rgba(124, 58, 237, .28);
    color: #fff;
}
.hw-template-v3 {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: rgba(20, 184, 166, .30);
    color: #fff;
}
.hw-template-v4 {
    background: linear-gradient(135deg, #be123c, #e11d48);
    border-color: rgba(225, 29, 72, .30);
    color: #fff;
}
.hw-template-v1:visited,
.hw-template-v2:visited,
.hw-template-v3:visited,
.hw-template-v4:visited {
    color: #fff;
}

.hw-template-tin {
    background: linear-gradient(135deg, #16a34a, #0f766e);
    border-color: rgba(22, 163, 74, .30);
    color: #fff;
}
.hw-template-tin:visited {
    color: #fff;
}

.hw-template-icon {
    font-size: .88rem;
    line-height: 1;
}
.hw-template-modal {
    min-width: 96px;
    min-height: 38px;
    padding-inline: 14px;
    border-radius: 14px;
}

@media screen and (max-width: 560px) {
    .hw-print-variants { justify-content: center; }
    .hw-template-btn { flex: 1 1 0; min-width: 0; }
    .hw-template-modal { flex: 0 0 auto; min-width: 92px; }
}

/* =========================================================
   2026-05-08 Compact Responsive Polish
   Goal: smaller, cleaner, app-like UI across desktop, tablet and mobile.
   This block is loaded last so it safely overrides earlier larger spacing.
   ========================================================= */
@media screen {
    :root {
        --sidebar-w: 252px !important;
        --topbar-h: 58px !important;
        --bottom-nav-h: 58px !important;
        --radius-card: 14px !important;
        --radius-btn: 10px !important;
        --radius-nav: 10px !important;
        --shadow: 0 6px 18px rgba(17, 94, 89, .075) !important;
    }

    html { font-size: 15px !important; }
    body { overflow-x: hidden !important; }

    .content-area {
        padding: 18px 20px 28px !important;
        gap: 14px !important;
    }

    .topbar {
        min-height: var(--topbar-h) !important;
        height: var(--topbar-h) !important;
        padding: 0 18px !important;
        gap: 10px !important;
    }

    .topbar-title {
        font-size: 1.16rem !important;
        line-height: 1.25 !important;
    }

    .topbar-subtitle {
        font-size: .76rem !important;
        line-height: 1.25 !important;
    }

    .topbar-balance {
        padding: 6px 12px 6px 9px !important;
        gap: 6px !important;
        min-height: 38px !important;
    }

    .bal-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: .95rem !important;
    }

    .bal-num {
        font-size: .96rem !important;
        line-height: 1.1 !important;
    }

    .topbar-balance > span:last-child {
        font-size: .76rem !important;
    }

    .topbar-avatar,
    .topbar-user {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .theme-toggle,
    .menu-toggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 11px !important;
        font-size: .98rem !important;
    }

    .sidebar {
        gap: 12px !important;
        padding: 16px 11px !important;
    }

    .sidebar-brand {
        gap: 9px !important;
        padding: 0 5px 11px !important;
    }

    .brand-logo {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 11px !important;
        font-size: 17px !important;
    }

    .brand-name { font-size: .96rem !important; line-height: 1.25 !important; }
    .brand-tagline { font-size: .68rem !important; line-height: 1.25 !important; }

    .nav-item,
    .nav-item-logout {
        gap: 8px !important;
        padding: 8px 9px !important;
        min-height: 38px !important;
        font-size: .84rem !important;
        border-radius: 10px !important;
    }

    .nav-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 8px !important;
        font-size: .76rem !important;
    }

    .sb-user {
        gap: 8px !important;
        padding: 9px 10px !important;
        border-radius: 11px !important;
    }

    .sb-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: .86rem !important;
    }
    .sb-uname { font-size: .78rem !important; }
    .sb-umobile { font-size: .66rem !important; }

    .card,
    .panel-card,
    .placeholder-card,
    .form-card,
    .history-card,
    .nid-result-card,
    .section-card,
    .service-card-modern,
    .method-card,
    .recharge-card,
    .balance-card,
    .profile-wrap,
    .wallet-wrap,
    .order-edit-card {
        border-radius: 14px !important;
    }

    .stat-card,
    .panel-card,
    .placeholder-card,
    .form-card,
    .hero-card,
    .service-hero,
    .service-card-modern,
    .method-card,
    .recharge-card,
    .balance-card,
    .profile-wrap,
    .wallet-wrap,
    .order-edit-card {
        padding: 16px !important;
    }

    .dashboard-hero {
        min-height: auto !important;
        padding: 22px !important;
        border-radius: 18px !important;
        gap: 14px !important;
    }

    .dashboard-hero-badge,
    .hero-badge,
    .section-chip,
    .form-badge,
    .status-pill,
    .badge,
    .pill {
        font-size: .74rem !important;
        padding: 4px 9px !important;
        line-height: 1.25 !important;
    }

    .dashboard-hero h2,
    .hero-title,
    .service-title {
        font-size: clamp(1.15rem, 2vw, 1.34rem) !important;
        line-height: 1.38 !important;
        margin: 8px 0 5px !important;
    }

    .dashboard-hero p,
    .hero-text,
    .service-subtitle,
    .muted-text,
    .placeholder-card p,
    .service-card-modern p {
        font-size: .86rem !important;
        line-height: 1.58 !important;
    }

    .dashboard-hero-actions,
    .hero-actions,
    .modal-actions,
    .copy-row,
    .nid-result-footer {
        gap: 8px !important;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-search,
    .btn-submit,
    .btn-login,
    .btn-save,
    .btn-copy,
    .btn-print,
    .quick-link,
    .hero-action-primary,
    .hero-action-secondary,
    .method-btn,
    .oe-btn,
    button[type="submit"] {
        min-height: 38px !important;
        padding: 9px 12px !important;
        border-radius: 10px !important;
        font-size: .86rem !important;
        line-height: 1.25 !important;
    }

    .stats-grid,
    .panel-grid,
    .service-grid,
    .quick-links,
    .method-grid,
    .form-grid,
    .nid-grid,
    .oe-grid,
    .grid {
        gap: 10px !important;
    }

    .stat-card { min-height: 78px !important; }
    .stat-label,
    .stat-lbl { font-size: .78rem !important; line-height: 1.35 !important; }
    .stat-value,
    .stat-val { font-size: 1.28rem !important; line-height: 1.22 !important; }

    .section-header,
    .section-header.with-padding,
    .with-padding,
    .page-header,
    .history-header,
    .order-edit-head,
    .adm-topbar {
        gap: 9px !important;
        margin-bottom: 10px !important;
    }

    .section-header h3,
    .section-title,
    .card-title,
    .page-header h1,
    .adm-topbar h1 {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    .with-padding,
    .section-header.with-padding {
        padding: 14px 14px 0 !important;
    }

    .form-group { margin-bottom: 12px !important; }
    .form-group label,
    .label-text,
    .nid-label,
    .info-label,
    .oe-field label {
        font-size: .84rem !important;
        line-height: 1.35 !important;
    }

    .label-hint {
        font-size: .7rem !important;
        padding: 3px 8px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .oe-field input,
    .oe-field select,
    .oe-field textarea,
    input,
    select,
    textarea {
        min-height: 40px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        font-size: .9rem !important;
    }

    textarea { line-height: 1.45 !important; }

    .history-table th,
    .history-table td,
    .tbl-wrap table th,
    .tbl-wrap table td,
    .users-table-wrap table th,
    .users-table-wrap table td {
        padding: 10px 12px !important;
        font-size: .84rem !important;
        line-height: 1.35 !important;
    }

    .nid-profile-header { padding: 16px 16px 0 !important; gap: 14px !important; }
    .nid-info-body { padding: 14px 16px !important; }
    .nid-result-footer { padding: 12px 16px !important; }
    .nid-name-bn { font-size: 1.12rem !important; line-height: 1.35 !important; }
    .nid-name-en { font-size: .86rem !important; }
    .nid-photo,
    .nid-photo-placeholder { width: 76px !important; height: 92px !important; }
    .nid-field { padding: 10px 11px !important; border-radius: 10px !important; }
    .nid-value { font-size: .88rem !important; line-height: 1.45 !important; }

    .hw-row { padding: 11px 14px !important; gap: 10px !important; }
    .hw-thumb,
    .hw-thumb-ph { width: 42px !important; height: 52px !important; }
    .hw-serial { width: 24px !important; height: 24px !important; font-size: .7rem !important; }
    .hw-name-bn { font-size: .88rem !important; }
    .hw-name-en,
    .hw-meta-item,
    .hw-time { font-size: .73rem !important; }
    .hw-actions { gap: 7px !important; }
    .hw-btn-detail,
    .hw-btn-print,
    .hw-btn-edit,
    .hw-template-btn { min-height: 32px !important; padding: 7px 9px !important; font-size: .72rem !important; border-radius: 10px !important; }

    .login-wrapper .card,
    .wrapper .card,
    .login-card {
        padding: 22px 20px !important;
        border-radius: 18px !important;
    }

    .login-logo,
    .logo-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }

    .adm-sidebar { width: 210px !important; }
    .adm-main { margin-left: 210px !important; padding: 18px !important; }
    .adm-brand { padding: 14px 12px !important; }
    .adm-nav a { padding: 9px 12px !important; font-size: .84rem !important; }
    .adm-badge { font-size: .68rem !important; padding: 3px 7px !important; }
    .section-card { border-radius: 12px !important; }
    .mobile-menu-btn { width: 38px !important; height: 38px !important; border-radius: 10px !important; }
}

@media screen and (min-width: 961px) {
    :root { --sidebar-w: 252px !important; }

    .dashboard-layout::before,
    aside.sidebar::before,
    .sidebar::before,
    #sidebar::before {
        width: var(--sidebar-w, 252px) !important;
    }

    aside.sidebar,
    .sidebar,
    #sidebar {
        width: var(--sidebar-w, 252px) !important;
        min-width: var(--sidebar-w, 252px) !important;
        max-width: var(--sidebar-w, 252px) !important;
        padding: 16px 11px !important;
    }

    .main-shell {
        margin-left: var(--sidebar-w, 252px) !important;
        width: calc(100vw - var(--sidebar-w, 252px)) !important;
        max-width: calc(100vw - var(--sidebar-w, 252px)) !important;
    }
}

@media screen and (max-width: 1200px) {
    .content-area { padding: 16px 16px 26px !important; }
    .dashboard-hero { grid-template-columns: 1fr !important; }
    .service-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; }
}

@media screen and (max-width: 960px) {
    html { font-size: 14.5px !important; }

    .topbar {
        padding: 0 12px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    .content-area {
        padding: 12px 12px 22px !important;
        gap: 12px !important;
    }

    aside.sidebar,
    .sidebar,
    #sidebar {
        width: min(82vw, 284px) !important;
        max-width: 284px !important;
        padding: 14px 10px !important;
    }

    .adm-sidebar {
        width: min(82vw, 250px) !important;
        max-width: 250px !important;
    }

    .adm-main {
        margin-left: 0 !important;
        padding: 64px 12px 22px !important;
    }
}

@media screen and (max-width: 640px) {
    :root { --bottom-nav-h: 56px !important; }
    html { font-size: 14px !important; }

    .topbar {
        height: 52px !important;
        min-height: 52px !important;
        padding: 7px 8px !important;
        gap: 6px !important;
        border-radius: 0 0 14px 14px !important;
    }

    .topbar-title {
        font-size: .9rem !important;
        max-width: 132px !important;
    }

    .topbar-balance {
        max-width: 104px !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 4px 7px !important;
    }

    .bal-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }

    .bal-num { max-width: 46px !important; font-size: .82rem !important; }
    .topbar-balance > span:last-child { display: none !important; }

    .theme-toggle,
    .menu-toggle,
    .topbar-avatar,
    .topbar-user {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .content-area {
        padding: 10px 9px 0 !important;
        padding-bottom: calc(var(--bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 22px) !important;
        gap: 10px !important;
    }

    .dashboard-hero {
        padding: 15px 13px !important;
        border-radius: 16px !important;
    }

    .dashboard-hero h2,
    .hero-title,
    .service-title {
        font-size: 1.02rem !important;
        line-height: 1.4 !important;
    }

    .dashboard-hero p,
    .hero-text,
    .service-subtitle,
    .muted-text,
    .placeholder-card p,
    .service-card-modern p {
        font-size: .79rem !important;
        line-height: 1.52 !important;
    }

    .dashboard-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .dashboard-hero-actions a,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-search,
    .btn-submit,
    .btn-login,
    .btn-save,
    .btn-copy,
    .btn-print,
    .quick-link,
    .method-btn,
    .oe-btn,
    button[type="submit"] {
        min-height: 36px !important;
        padding: 8px 9px !important;
        font-size: .79rem !important;
        border-radius: 9px !important;
    }

    .stat-card,
    .panel-card,
    .placeholder-card,
    .form-card,
    .hero-card,
    .service-hero,
    .service-card-modern,
    .method-card,
    .recharge-card,
    .balance-card,
    .profile-wrap,
    .wallet-wrap,
    .order-edit-card,
    .card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .stats-grid,
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .service-grid,
    .panel-grid,
    .quick-links,
    .method-grid,
    .form-grid,
    .nid-grid,
    .oe-grid,
    .oe-grid-basic,
    .oe-grid-addr {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .stat-card { min-height: 70px !important; }
    .stat-label,
    .stat-lbl { font-size: .72rem !important; }
    .stat-value,
    .stat-val { font-size: 1.08rem !important; }

    .section-header,
    .section-header.with-padding,
    .with-padding {
        padding: 12px 12px 0 !important;
        margin-bottom: 8px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .oe-field input,
    .oe-field select,
    .oe-field textarea,
    input,
    select,
    textarea {
        min-height: 38px !important;
        padding: 9px 10px !important;
        font-size: .84rem !important;
    }

    .history-table tr {
        border-radius: 12px !important;
        padding: 6px 8px !important;
    }

    .history-table td {
        padding: 7px 2px !important;
        font-size: .78rem !important;
        gap: 8px !important;
    }

    .history-table td::before {
        flex-basis: 38% !important;
        font-size: .72rem !important;
    }

    .nid-profile-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 13px 13px 0 !important;
    }

    .nid-photo,
    .nid-photo-placeholder { width: 66px !important; height: 80px !important; }
    .nid-info-body { padding: 12px !important; }
    .nid-result-footer { padding: 10px 12px !important; }

    .bottom-nav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 7px) !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 4px !important;
        border-radius: 17px !important;
    }

    .bottom-nav-icon { width: 22px !important; height: 22px !important; font-size: .92rem !important; }
    .bottom-nav-label { font-size: .57rem !important; }

    .hw-row {
        grid-template-columns: auto minmax(0, 1fr) !important;
        padding: 10px !important;
        gap: 8px !important;
    }

    .hw-actions { gap: 6px !important; }
    .hw-template-btn { min-height: 30px !important; padding: 6px 7px !important; font-size: .68rem !important; }

    .login-wrapper,
    .wrapper { max-width: 420px !important; }
    .login-wrapper .card,
    .wrapper .card,
    .login-card { padding: 18px 15px !important; border-radius: 16px !important; }

    .adm-main { padding: 60px 10px 20px !important; }
    .adm-topbar h1,
    .page-header h1 { font-size: .96rem !important; }
    .section-card { border-radius: 10px !important; }
}

@media screen and (max-width: 420px) {
    .topbar-title { max-width: 116px !important; font-size: .84rem !important; }
    .topbar-balance { max-width: 92px !important; }
    .bal-num { max-width: 38px !important; }
    .stats-grid,
    .grid { grid-template-columns: 1fr !important; }
    .dashboard-hero-actions { grid-template-columns: 1fr !important; }
    .dashboard-hero-actions a:nth-child(3) { grid-column: auto !important; }
    .hw-actions { flex-wrap: wrap !important; }
    .hw-actions > * { flex: 1 1 calc(50% - 6px) !important; }
}

/* =========================================================
   PERFECT COMPACT SIZE LAYER - 2026-05-08
   Goal: balanced small UI; not tiny, not oversized.
   Uses rem/clamp + breakpoints so every page feels consistent.
   ========================================================= */
@media screen {
    :root {
        --sidebar-w: 232px !important;
        --topbar-h: 54px !important;
        --bottom-nav-h: 52px !important;
        --radius-card: 14px !important;
        --radius-btn: 10px !important;
        --radius-nav: 10px !important;
    }

    html {
        font-size: clamp(12px, .76vw, 13px) !important;
    }

    body {
        font-size: 1rem !important;
        line-height: 1.42 !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    p, span, label, small, a, li, td, th, input, select, textarea, button {
        line-height: 1.38 !important;
    }

    h1, .page-title, .adm-topbar h1 { font-size: clamp(1.08rem, 1.2vw, 1.22rem) !important; line-height: 1.28 !important; }
    h2, .dashboard-hero h2, .hero-title, .section-title { font-size: clamp(1rem, 1.05vw, 1.15rem) !important; line-height: 1.3 !important; }
    h3, .card-title, .service-title, .panel-title { font-size: clamp(.92rem, .95vw, 1.04rem) !important; line-height: 1.32 !important; }
    h4, h5, h6 { font-size: .9rem !important; line-height: 1.32 !important; }

    .dashboard-layout { min-height: 100dvh !important; }

    .sidebar {
        width: var(--sidebar-w) !important;
        gap: 10px !important;
        padding: 13px 9px !important;
    }

    .sidebar-brand {
        gap: 8px !important;
        padding: 1px 5px 10px !important;
    }

    .brand-logo {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }

    .brand-name { font-size: .92rem !important; line-height: 1.18 !important; }
    .brand-tagline { font-size: .66rem !important; margin-top: 1px !important; }
    .sidebar-nav { gap: 2px !important; }
    .nav-item {
        gap: 8px !important;
        padding: 8px 9px !important;
        border-radius: 10px !important;
        font-size: .78rem !important;
        min-height: 34px !important;
    }
    .nav-icon, .nav-item i, .nav-item svg {
        width: 18px !important;
        min-width: 18px !important;
        font-size: .88rem !important;
    }

    .main-shell {
        margin-left: var(--sidebar-w) !important;
        width: calc(100% - var(--sidebar-w)) !important;
        max-width: calc(100% - var(--sidebar-w)) !important;
    }

    .content-area, .main-content, .adm-main, .page-content {
        padding: 14px 14px 18px !important;
        gap: 12px !important;
    }

    .topbar {
        min-height: 52px !important;
        height: 52px !important;
        padding: 7px 12px !important;
        margin-bottom: 12px !important;
        gap: 9px !important;
        border-radius: 14px !important;
    }

    .topbar-title { font-size: .9rem !important; line-height: 1.18 !important; }
    .topbar-subtitle { font-size: .66rem !important; line-height: 1.15 !important; }
    .topbar-balance {
        height: 34px !important;
        padding: 4px 8px !important;
        gap: 5px !important;
        font-size: .72rem !important;
    }
    .bal-icon, .topbar-avatar, .theme-toggle, .menu-toggle, .topbar-user {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 10px !important;
    }
    .bal-num { font-size: .8rem !important; }
    .bal-label { font-size: .58rem !important; }

    .dashboard-hero, .hero-card, .service-hero {
        padding: 16px !important;
        gap: 12px !important;
        border-radius: 15px !important;
    }
    .dashboard-hero p, .hero-text, .service-subtitle, .muted-text, .placeholder-card p, .service-card-modern p {
        font-size: .78rem !important;
        line-height: 1.45 !important;
    }
    .dashboard-hero-actions, .quick-links, .stats-grid, .service-grid, .panel-grid, .method-grid, .form-grid, .nid-grid, .oe-grid, .oe-grid-basic, .oe-grid-addr {
        gap: 9px !important;
    }

    .stat-card, .panel-card, .placeholder-card, .form-card, .service-card-modern, .method-card, .recharge-card, .balance-card, .profile-wrap, .wallet-wrap, .order-edit-card, .history-card, .nid-result-card, .section-card, .card {
        padding: 13px !important;
        border-radius: 13px !important;
    }

    .stat-card { min-height: 76px !important; gap: 5px !important; }
    .stat-label, .stat-lbl, .card-subtitle, .text-muted { font-size: .69rem !important; }
    .stat-value, .stat-val { font-size: 1.12rem !important; line-height: 1.15 !important; }

    .section-header, .section-header.with-padding, .with-padding, .card-header, .panel-header {
        padding: 10px 12px 0 !important;
        margin-bottom: 8px !important;
        gap: 7px !important;
    }

    .btn, button, .btn-primary, .btn-secondary, .btn-search, .btn-submit, .btn-login, .btn-save, .btn-copy, .btn-print, .quick-link, .method-btn, .oe-btn, button[type="submit"], input[type="submit"] {
        min-height: 34px !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        font-size: .78rem !important;
        gap: 6px !important;
    }

    .btn-sm, .small-btn, .hw-template-btn, .action-btn {
        min-height: 28px !important;
        padding: 5px 7px !important;
        border-radius: 8px !important;
        font-size: .68rem !important;
    }

    input, select, textarea, .form-control, .form-input, .form-group input, .form-group select, .form-group textarea, .oe-field input, .oe-field select, .oe-field textarea {
        min-height: 34px !important;
        padding: 7px 9px !important;
        border-radius: 9px !important;
        font-size: .78rem !important;
    }
    textarea { min-height: 76px !important; }
    .form-group, .oe-field { gap: 5px !important; margin-bottom: 9px !important; }
    .form-group label, .oe-field label { font-size: .72rem !important; margin-bottom: 3px !important; }

    table, .table, .history-table, .data-table { font-size: .72rem !important; }
    th, td, .history-table th, .history-table td, .data-table th, .data-table td {
        padding: 6px 7px !important;
        line-height: 1.35 !important;
    }
    .table-wrapper, .tbl-wrap { border-radius: 11px !important; }

    .history-table tr { border-radius: 10px !important; }
    .history-table td::before { font-size: .66rem !important; }

    .nid-profile-header { padding: 12px 12px 0 !important; gap: 10px !important; }
    .nid-photo, .nid-photo-placeholder { width: 62px !important; height: 76px !important; border-radius: 10px !important; }
    .nid-info-body { padding: 12px !important; }
    .nid-result-footer { padding: 9px 12px !important; }

    .login-wrapper, .wrapper { max-width: 400px !important; }
    .login-wrapper .card, .wrapper .card, .login-card {
        padding: 18px 15px !important;
        border-radius: 15px !important;
    }
    .login-logo, .auth-logo { width: 44px !important; height: 44px !important; font-size: 18px !important; }

    .adm-topbar { min-height: 50px !important; padding: 8px 12px !important; }
    .adm-card, .admin-card, .admin-section { padding: 12px !important; border-radius: 12px !important; }
    .adm-table th, .adm-table td { padding: 6px 7px !important; font-size: .7rem !important; }

    .hw-row { padding: 9px !important; gap: 8px !important; border-radius: 11px !important; }
    .hw-actions { gap: 6px !important; }
}

@media screen and (max-width: 960px) {
    :root { --sidebar-w: 228px !important; }
    .main-shell {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .sidebar { width: var(--sidebar-w) !important; }
}

@media screen and (max-width: 640px) {
    html { font-size: 12px !important; }

    .content-area, .main-content, .adm-main, .page-content {
        padding: 9px 8px 0 !important;
        padding-bottom: calc(var(--bottom-nav-h, 50px) + env(safe-area-inset-bottom, 0px) + 18px) !important;
        gap: 8px !important;
    }

    .topbar {
        min-height: 48px !important;
        height: 48px !important;
        padding: 6px 8px !important;
        margin-bottom: 8px !important;
        border-radius: 0 0 14px 14px !important;
        gap: 6px !important;
    }
    .topbar-title { font-size: .84rem !important; max-width: 128px !important; }
    .topbar-balance { height: 32px !important; max-width: 104px !important; padding: 4px 7px !important; }
    .bal-icon, .topbar-avatar, .theme-toggle, .menu-toggle, .topbar-user {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 9px !important;
    }
    .bal-num { max-width: 46px !important; font-size: .76rem !important; }

    .dashboard-hero, .hero-card, .service-hero {
        padding: 12px 11px !important;
        gap: 9px !important;
        border-radius: 13px !important;
    }
    .dashboard-hero h2, .hero-title, .service-title { font-size: .96rem !important; }
    .dashboard-hero p, .hero-text, .service-subtitle, .muted-text, .placeholder-card p, .service-card-modern p { font-size: .74rem !important; line-height: 1.42 !important; }

    .stat-card, .panel-card, .placeholder-card, .form-card, .service-card-modern, .method-card, .recharge-card, .balance-card, .profile-wrap, .wallet-wrap, .order-edit-card, .history-card, .nid-result-card, .section-card, .card {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    .stat-card { min-height: 64px !important; }
    .stat-label, .stat-lbl { font-size: .66rem !important; }
    .stat-value, .stat-val { font-size: 1rem !important; }

    .dashboard-hero-actions, .quick-links, .stats-grid, .service-grid, .panel-grid, .method-grid, .form-grid, .nid-grid, .oe-grid, .oe-grid-basic, .oe-grid-addr {
        gap: 7px !important;
    }

    .btn, button, .btn-primary, .btn-secondary, .btn-search, .btn-submit, .btn-login, .btn-save, .btn-copy, .btn-print, .quick-link, .method-btn, .oe-btn, button[type="submit"], input[type="submit"] {
        min-height: 32px !important;
        padding: 6px 8px !important;
        font-size: .74rem !important;
        border-radius: 8px !important;
    }

    input, select, textarea, .form-control, .form-input, .form-group input, .form-group select, .form-group textarea, .oe-field input, .oe-field select, .oe-field textarea {
        min-height: 32px !important;
        padding: 6px 8px !important;
        font-size: .76rem !important;
        border-radius: 8px !important;
    }
    textarea { min-height: 66px !important; }

    .section-header, .section-header.with-padding, .with-padding, .card-header, .panel-header {
        padding: 9px 10px 0 !important;
        margin-bottom: 6px !important;
    }

    th, td, .history-table th, .history-table td, .data-table th, .data-table td {
        padding: 5px 6px !important;
        font-size: .7rem !important;
    }

    .nid-photo, .nid-photo-placeholder { width: 58px !important; height: 70px !important; }
    .nid-info-body { padding: 10px !important; }
    .nid-result-footer { padding: 8px 10px !important; }

    .bottom-nav {
        left: 7px !important;
        right: 7px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 3px !important;
        border-radius: 15px !important;
    }
    .bottom-nav-icon { width: 20px !important; height: 20px !important; font-size: .82rem !important; }
    .bottom-nav-label { font-size: .52rem !important; }

    .login-wrapper, .wrapper { max-width: 380px !important; }
    .login-wrapper .card, .wrapper .card, .login-card { padding: 15px 12px !important; border-radius: 14px !important; }
    .adm-main { padding-top: 56px !important; }
}

@media screen and (max-width: 420px) {
    html { font-size: 11.75px !important; }
    .topbar-title { max-width: 108px !important; }
    .topbar-balance { max-width: 92px !important; }
    .bal-num { max-width: 36px !important; }
    .content-area, .main-content, .page-content { padding-left: 7px !important; padding-right: 7px !important; }
    .dashboard-hero-actions { grid-template-columns: 1fr !important; }
    .stats-grid, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .quick-link { min-height: 31px !important; }
}

@media screen and (max-width: 360px) {
    html { font-size: 11.25px !important; }
    .stats-grid, .grid { grid-template-columns: 1fr !important; }
    .topbar-title { max-width: 96px !important; }
    .topbar-balance { max-width: 86px !important; }
}

/* =========================================================
   BALANCED MEDIUM SIZE FIX - 2026-05-08
   User feedback: previous compact layer made the whole website too small.
   This final override restores comfortable readable sizes while keeping the
   layout neat and responsive.
   ========================================================= */
html {
    font-size: 14.5px !important;
}

body,
p,
span,
label,
div,
a,
button,
input,
select,
textarea {
    letter-spacing: normal;
}

@media screen and (min-width: 961px) {
    :root { --sidebar-w: 248px !important; }

    .sidebar {
        width: var(--sidebar-w) !important;
        padding: 16px 12px !important;
    }

    .brand-logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }

    .brand-name { font-size: 1rem !important; line-height: 1.2 !important; }
    .brand-tagline { font-size: .72rem !important; line-height: 1.25 !important; }

    .sidebar-nav { gap: 4px !important; }
    .nav-item {
        gap: 9px !important;
        padding: 9px 10px !important;
        border-radius: 11px !important;
        font-size: .86rem !important;
        min-height: 38px !important;
    }

    .nav-icon,
    .nav-item i,
    .nav-item svg {
        width: 19px !important;
        min-width: 19px !important;
        font-size: .95rem !important;
    }

    .main-shell {
        margin-left: var(--sidebar-w) !important;
        width: calc(100% - var(--sidebar-w)) !important;
        max-width: calc(100% - var(--sidebar-w)) !important;
    }

    .content-area,
    .main-content,
    .adm-main,
    .page-content {
        padding: 18px 18px 22px !important;
        gap: 14px !important;
    }

    .topbar {
        min-height: 58px !important;
        height: auto !important;
        padding: 9px 14px !important;
        margin-bottom: 14px !important;
        gap: 10px !important;
        border-radius: 15px !important;
    }

    .topbar-title { font-size: 1rem !important; line-height: 1.25 !important; }
    .topbar-subtitle { font-size: .74rem !important; line-height: 1.25 !important; }
    .topbar-balance {
        height: 38px !important;
        padding: 5px 10px !important;
        gap: 6px !important;
        font-size: .82rem !important;
    }

    .bal-icon,
    .topbar-avatar,
    .theme-toggle,
    .menu-toggle,
    .topbar-user {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 11px !important;
    }

    .bal-num { font-size: .9rem !important; }
    .bal-label { font-size: .65rem !important; }

    .dashboard-hero,
    .hero-card,
    .service-hero {
        padding: 20px !important;
        gap: 14px !important;
        border-radius: 16px !important;
    }

    .dashboard-hero h1,
    .dashboard-hero h2,
    .hero-title,
    .service-title,
    .page-title {
        font-size: 1.32rem !important;
        line-height: 1.25 !important;
    }

    .dashboard-hero p,
    .hero-text,
    .service-subtitle,
    .muted-text,
    .placeholder-card p,
    .service-card-modern p {
        font-size: .88rem !important;
        line-height: 1.55 !important;
    }

    .stat-card,
    .panel-card,
    .placeholder-card,
    .form-card,
    .service-card-modern,
    .method-card,
    .recharge-card,
    .balance-card,
    .profile-wrap,
    .wallet-wrap,
    .order-edit-card,
    .history-card,
    .nid-result-card,
    .section-card,
    .card {
        padding: 16px !important;
        border-radius: 15px !important;
    }

    .stat-card { min-height: 86px !important; gap: 7px !important; }
    .stat-label,
    .stat-lbl,
    .card-subtitle,
    .text-muted { font-size: .78rem !important; line-height: 1.4 !important; }
    .stat-value,
    .stat-val { font-size: 1.25rem !important; line-height: 1.2 !important; }

    .section-header,
    .section-header.with-padding,
    .with-padding,
    .card-header,
    .panel-header {
        padding: 12px 14px 0 !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    .btn,
    button,
    .btn-primary,
    .btn-secondary,
    .btn-search,
    .btn-submit,
    .btn-login,
    .btn-save,
    .btn-copy,
    .btn-print,
    .quick-link,
    .method-btn,
    .oe-btn,
    button[type="submit"],
    input[type="submit"] {
        min-height: 38px !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
        font-size: .88rem !important;
        gap: 7px !important;
        line-height: 1.25 !important;
    }

    .btn-sm,
    .small-btn,
    .hw-template-btn,
    .action-btn {
        min-height: 32px !important;
        padding: 6px 9px !important;
        border-radius: 9px !important;
        font-size: .78rem !important;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-input,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .oe-field input,
    .oe-field select,
    .oe-field textarea {
        min-height: 38px !important;
        padding: 8px 11px !important;
        border-radius: 10px !important;
        font-size: .88rem !important;
        line-height: 1.35 !important;
    }

    textarea { min-height: 90px !important; }
    .form-group,
    .oe-field { gap: 6px !important; margin-bottom: 11px !important; }
    .form-group label,
    .oe-field label { font-size: .82rem !important; margin-bottom: 4px !important; }

    table,
    .table,
    .history-table,
    .data-table { font-size: .82rem !important; }
    th,
    td,
    .history-table th,
    .history-table td,
    .data-table th,
    .data-table td {
        padding: 8px 9px !important;
        line-height: 1.42 !important;
    }

    .nid-photo,
    .nid-photo-placeholder {
        width: 70px !important;
        height: 86px !important;
        border-radius: 11px !important;
    }
    .nid-profile-header { padding: 14px 14px 0 !important; gap: 12px !important; }
    .nid-info-body { padding: 14px !important; }
    .nid-result-footer { padding: 11px 14px !important; }

    .login-wrapper,
    .wrapper { max-width: 430px !important; }
    .login-wrapper .card,
    .wrapper .card,
    .login-card {
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }
    .login-logo,
    .auth-logo { width: 52px !important; height: 52px !important; font-size: 21px !important; }

    .adm-topbar { min-height: 56px !important; padding: 10px 14px !important; }
    .adm-card,
    .admin-card,
    .admin-section { padding: 15px !important; border-radius: 14px !important; }
    .adm-table th,
    .adm-table td { padding: 8px 9px !important; font-size: .8rem !important; }
}

@media screen and (max-width: 960px) {
    html { font-size: 14px !important; }
    :root { --sidebar-w: 244px !important; }

    .sidebar { width: var(--sidebar-w) !important; }

    .main-shell {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 640px) {
    html { font-size: 13.5px !important; }

    .content-area,
    .main-content,
    .adm-main,
    .page-content {
        padding: 12px 10px 0 !important;
        padding-bottom: calc(var(--bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 20px) !important;
        gap: 10px !important;
    }

    .topbar {
        min-height: 54px !important;
        height: auto !important;
        padding: 8px 10px !important;
        margin-bottom: 10px !important;
        border-radius: 0 0 15px 15px !important;
        gap: 8px !important;
    }

    .topbar-title { font-size: .96rem !important; max-width: 150px !important; line-height: 1.25 !important; }
    .topbar-subtitle { font-size: .7rem !important; line-height: 1.2 !important; }
    .topbar-balance { height: 36px !important; max-width: 122px !important; padding: 5px 8px !important; }
    .bal-icon,
    .topbar-avatar,
    .theme-toggle,
    .menu-toggle,
    .topbar-user {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
    }
    .bal-num { max-width: 58px !important; font-size: .86rem !important; }
    .bal-label { font-size: .62rem !important; }

    .dashboard-hero,
    .hero-card,
    .service-hero {
        padding: 15px 13px !important;
        gap: 11px !important;
        border-radius: 14px !important;
    }

    .dashboard-hero h1,
    .dashboard-hero h2,
    .hero-title,
    .service-title,
    .page-title { font-size: 1.12rem !important; line-height: 1.28 !important; }

    .dashboard-hero p,
    .hero-text,
    .service-subtitle,
    .muted-text,
    .placeholder-card p,
    .service-card-modern p { font-size: .84rem !important; line-height: 1.5 !important; }

    .stat-card,
    .panel-card,
    .placeholder-card,
    .form-card,
    .service-card-modern,
    .method-card,
    .recharge-card,
    .balance-card,
    .profile-wrap,
    .wallet-wrap,
    .order-edit-card,
    .history-card,
    .nid-result-card,
    .section-card,
    .card {
        padding: 13px !important;
        border-radius: 13px !important;
    }

    .stat-card { min-height: 74px !important; gap: 6px !important; }
    .stat-label,
    .stat-lbl,
    .card-subtitle,
    .text-muted { font-size: .76rem !important; line-height: 1.4 !important; }
    .stat-value,
    .stat-val { font-size: 1.12rem !important; line-height: 1.2 !important; }

    .dashboard-hero-actions,
    .quick-links,
    .stats-grid,
    .service-grid,
    .panel-grid,
    .method-grid,
    .form-grid,
    .nid-grid,
    .oe-grid,
    .oe-grid-basic,
    .oe-grid-addr {
        gap: 9px !important;
    }

    .btn,
    button,
    .btn-primary,
    .btn-secondary,
    .btn-search,
    .btn-submit,
    .btn-login,
    .btn-save,
    .btn-copy,
    .btn-print,
    .quick-link,
    .method-btn,
    .oe-btn,
    button[type="submit"],
    input[type="submit"] {
        min-height: 36px !important;
        padding: 7px 10px !important;
        font-size: .84rem !important;
        border-radius: 9px !important;
        line-height: 1.25 !important;
    }

    .btn-sm,
    .small-btn,
    .hw-template-btn,
    .action-btn {
        min-height: 31px !important;
        padding: 6px 8px !important;
        font-size: .76rem !important;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-input,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .oe-field input,
    .oe-field select,
    .oe-field textarea {
        min-height: 36px !important;
        padding: 7px 10px !important;
        font-size: .84rem !important;
        border-radius: 9px !important;
        line-height: 1.35 !important;
    }

    textarea { min-height: 78px !important; }
    .form-group,
    .oe-field { gap: 6px !important; margin-bottom: 10px !important; }
    .form-group label,
    .oe-field label { font-size: .78rem !important; margin-bottom: 4px !important; }

    .section-header,
    .section-header.with-padding,
    .with-padding,
    .card-header,
    .panel-header {
        padding: 10px 12px 0 !important;
        margin-bottom: 8px !important;
    }

    table,
    .table,
    .history-table,
    .data-table { font-size: .78rem !important; }
    th,
    td,
    .history-table th,
    .history-table td,
    .data-table th,
    .data-table td {
        padding: 7px 8px !important;
        font-size: .78rem !important;
        line-height: 1.4 !important;
    }

    .nid-photo,
    .nid-photo-placeholder { width: 64px !important; height: 78px !important; }
    .nid-profile-header { padding: 13px 13px 0 !important; gap: 11px !important; }
    .nid-info-body { padding: 13px !important; }
    .nid-result-footer { padding: 10px 13px !important; }

    .bottom-nav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 7px) !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 4px !important;
        border-radius: 16px !important;
    }
    .bottom-nav-icon { width: 23px !important; height: 23px !important; font-size: .92rem !important; }
    .bottom-nav-label { font-size: .6rem !important; line-height: 1.1 !important; }

    .login-wrapper,
    .wrapper { max-width: 400px !important; }
    .login-wrapper .card,
    .wrapper .card,
    .login-card { padding: 18px 15px !important; border-radius: 15px !important; }
    .adm-main { padding-top: 60px !important; }
}

@media screen and (max-width: 420px) {
    html { font-size: 13.25px !important; }
    .topbar-title { max-width: 132px !important; }
    .topbar-balance { max-width: 112px !important; }
    .bal-num { max-width: 48px !important; }
    .content-area,
    .main-content,
    .page-content { padding-left: 9px !important; padding-right: 9px !important; }
    .quick-link { min-height: 35px !important; }
}

@media screen and (max-width: 360px) {
    html { font-size: 13px !important; }
    .topbar-title { max-width: 116px !important; }
    .topbar-balance { max-width: 100px !important; }
}


/* =========================================================
   SIDEBAR UI REDESIGN — PURPLE / INDIGO PREMIUM THEME
   Added: 2026-05-08
   Purpose: Change old sidebar color and give menu a cleaner modern UI.
   ========================================================= */
:root {
    --sidebar-w: 252px !important;
    --sb-deep: #17113f;
    --sb-mid: #4c1d95;
    --sb-bright: #7c3aed;
    --sb-accent: #22d3ee;
    --sb-gold: #fbbf24;
    --sb-text: #f8fafc;
    --sb-muted: rgba(226,232,240,.78);
    --sb-glass: rgba(255,255,255,.095);
    --sb-glass-2: rgba(255,255,255,.14);
    --sb-border: rgba(255,255,255,.15);
}

@media screen and (min-width: 961px) {
    .dashboard-layout::before {
        width: var(--sidebar-w, 252px) !important;
        background:
            radial-gradient(circle at 15% 8%, rgba(34,211,238,.34), transparent 28%),
            radial-gradient(circle at 92% 4%, rgba(251,191,36,.20), transparent 24%),
            linear-gradient(165deg, #17113f 0%, #312e81 38%, #4c1d95 72%, #160f35 100%) !important;
    }

    .main-shell {
        margin-left: var(--sidebar-w, 252px) !important;
        width: calc(100vw - var(--sidebar-w, 252px)) !important;
        max-width: calc(100vw - var(--sidebar-w, 252px)) !important;
    }
}

aside.sidebar,
.sidebar,
#sidebar {
    width: var(--sidebar-w, 252px) !important;
    min-width: var(--sidebar-w, 252px) !important;
    max-width: var(--sidebar-w, 252px) !important;
    padding: 16px 13px !important;
    gap: 14px !important;
    background:
        radial-gradient(circle at 12% 6%, rgba(34,211,238,.32), transparent 28%),
        radial-gradient(circle at 94% 8%, rgba(251,191,36,.20), transparent 26%),
        radial-gradient(circle at 72% 92%, rgba(124,58,237,.30), transparent 34%),
        linear-gradient(165deg, #17113f 0%, #312e81 38%, #4c1d95 74%, #120b2f 100%) !important;
    color: var(--sb-text) !important;
    border-right: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 18px 0 44px rgba(30, 27, 75, .24) !important;
}

aside.sidebar::before,
.sidebar::before,
#sidebar::before {
    width: var(--sidebar-w, 252px) !important;
    background:
        radial-gradient(circle at 12% 6%, rgba(34,211,238,.32), transparent 28%),
        radial-gradient(circle at 94% 8%, rgba(251,191,36,.20), transparent 26%),
        linear-gradient(165deg, #17113f 0%, #312e81 38%, #4c1d95 74%, #120b2f 100%) !important;
}

.sidebar-brand {
    margin: 0 0 3px !important;
    padding: 12px 11px !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 30px rgba(15, 23, 42, .16) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.brand-logo,
.logo-icon,
.adm-brand-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #22d3ee 0%, #7c3aed 52%, #fbbf24 115%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    box-shadow: 0 12px 26px rgba(34,211,238,.20), inset 0 1px 0 rgba(255,255,255,.26) !important;
}

.sidebar .brand-name,
.brand-name {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

.sidebar .brand-tagline,
.brand-tagline {
    color: var(--sb-muted) !important;
    font-weight: 500 !important;
}

.sidebar-nav {
    gap: 5px !important;
    padding: 2px 0 !important;
}

.nav-item,
.nav-item-wallet,
.nav-item-logout {
    min-height: 42px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    color: rgba(248,250,252,.86) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.nav-item::before,
.nav-item-wallet::before,
.nav-item-logout::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(251,191,36,.11), transparent) !important;
    opacity: 0 !important;
    transform: translateX(-18%) !important;
    transition: opacity .18s ease, transform .18s ease !important;
    pointer-events: none !important;
}

.nav-item:hover,
.nav-item-wallet:hover,
.nav-item-logout:hover {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.16) !important;
}

.nav-item:hover::before,
.nav-item-wallet:hover::before,
.nav-item-logout:hover::before,
.nav-item.active::before {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,253,245,.88)) !important;
    color: #2e1065 !important;
    border-color: rgba(255,255,255,.55) !important;
    box-shadow: 0 14px 30px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.70) !important;
    transform: translateX(4px) !important;
}

.nav-icon {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.12) !important;
    color: currentColor !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
    position: relative !important;
    z-index: 1 !important;
}

.nav-item.active .nav-icon {
    background: linear-gradient(135deg, #7c3aed, #22d3ee) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 16px rgba(124,58,237,.24) !important;
}

.nav-text {
    position: relative !important;
    z-index: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
}

.nav-item-wallet {
    background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(255,255,255,.06)) !important;
    color: #cffafe !important;
    border-color: rgba(34,211,238,.16) !important;
}

.nav-item-logout {
    background: linear-gradient(135deg, rgba(251,113,133,.16), rgba(255,255,255,.05)) !important;
    color: #ffe4e6 !important;
    border-color: rgba(251,113,133,.14) !important;
}

.sb-user,
.sidebar-footer {
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.065)) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 17px !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 26px rgba(15,23,42,.15) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.sb-avatar,
.topbar-avatar {
    background: linear-gradient(135deg, #22d3ee, #7c3aed) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.30) !important;
}

/* Admin sidebar gets the same premium look */
.adm-sidebar {
    background:
        radial-gradient(circle at 12% 7%, rgba(34,211,238,.30), transparent 30%),
        radial-gradient(circle at 96% 8%, rgba(251,191,36,.18), transparent 28%),
        linear-gradient(165deg, #17113f 0%, #312e81 40%, #4c1d95 76%, #120b2f 100%) !important;
    border-right: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 18px 0 44px rgba(30,27,75,.24) !important;
}

.adm-nav a {
    border-radius: 14px !important;
    color: rgba(248,250,252,.86) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease !important;
}

.adm-nav a:hover {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.adm-nav a.active {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,253,245,.88)) !important;
    color: #2e1065 !important;
    border-color: rgba(255,255,255,.55) !important;
    box-shadow: 0 14px 30px rgba(15,23,42,.22) !important;
}

.adm-nav .nav-icon,
.adm-nav a.active .nav-icon {
    background: linear-gradient(135deg, #7c3aed, #22d3ee) !important;
    color: #ffffff !important;
    border: 0 !important;
}

@media screen and (max-width: 960px) {
    aside.sidebar,
    .sidebar,
    #sidebar {
        width: min(84vw, 292px) !important;
        min-width: 0 !important;
        max-width: min(84vw, 292px) !important;
        box-shadow: 24px 0 70px rgba(15,23,42,.34) !important;
    }

    body.sidebar-open .sidebar-overlay {
        background: rgba(15, 23, 42, .58) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
}

/* =========================================================
   Header right side balance card match with left title side
   Update: 20260508-header-right-match-v1
   Goal: right side should look balanced like the left side.
========================================================= */
.topbar {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    overflow: visible !important;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.90)) !important;
    border: 1px solid rgba(226,232,240,.86) !important;
    box-shadow: 0 14px 38px rgba(15,23,42,.07) !important;
}

.topbar > div:first-of-type {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 4px !important;
}

.topbar-balance {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    min-height: 44px !important;
    height: 44px !important;
    max-width: none !important;
    padding: 6px 13px 6px 8px !important;
    gap: 8px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.95)) !important;
    border: 1px solid rgba(99,102,241,.16) !important;
    color: #1e3a8a !important;
    box-shadow: 0 10px 26px rgba(79,70,229,.09) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.topbar-balance::before {
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(34,211,238,.06)) !important;
    opacity: 1 !important;
}

.topbar-balance:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(99,102,241,.28) !important;
    box-shadow: 0 14px 34px rgba(79,70,229,.14) !important;
}

.bal-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #eef2ff, #dbeafe) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99,102,241,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.80) !important;
}

.bal-num {
    color: #2563eb !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
}

.topbar-balance > span:last-child {
    color: #111827 !important;
    opacity: .88 !important;
    font-weight: 700 !important;
    font-size: .78rem !important;
}

.theme-toggle,
.topbar-user {
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
    border: 1px solid rgba(99,102,241,.14) !important;
    box-shadow: 0 10px 26px rgba(79,70,229,.08) !important;
    border-radius: 15px !important;
}

.topbar-avatar {
    background: linear-gradient(135deg, #eef2ff, #dbeafe) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99,102,241,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(79,70,229,.10) !important;
}

@media screen and (max-width: 640px) {
    .topbar {
        gap: 8px !important;
        padding: 8px 10px !important;
    }
    .topbar > div:first-of-type {
        min-height: 40px !important;
    }
    .topbar-balance {
        height: 38px !important;
        min-height: 38px !important;
        max-width: 136px !important;
        padding: 5px 9px 5px 6px !important;
        border-radius: 13px !important;
        gap: 6px !important;
    }
    .bal-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 10px !important;
    }
    .bal-num {
        max-width: 64px !important;
        font-size: .9rem !important;
    }
    .topbar-balance > span:last-child {
        font-size: .67rem !important;
    }
}

@media screen and (max-width: 420px) {
    .topbar-balance {
        max-width: 118px !important;
        padding-right: 7px !important;
    }
    .topbar-balance > span:last-child {
        display: none !important;
    }
    .bal-num {
        max-width: 68px !important;
    }
}

/* =========================================================
   DESKTOP HEADER WIDTH FIX WITH FIXED SIDEBAR
   Update: 20260508-header-sidebar-width-fix-v1
   Problem: on large screens the fixed sidebar is visible and some older
   rules forced .topbar to width:100% while it also had left/right margin.
   That made the header wider than the remaining content area and clipped
   the right side. Keep the main shell beside sidebar, and let topbar size
   inside the shell.
========================================================= */
@media screen and (min-width: 961px) {
    :root {
        --sidebar-w: 232px !important;
        --topbar-side-gap: 14px !important;
    }

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

    .dashboard-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    aside.sidebar,
    .sidebar,
    #sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
        max-width: var(--sidebar-w) !important;
        transform: none !important;
        flex: 0 0 var(--sidebar-w) !important;
    }

    .dashboard-layout::before,
    aside.sidebar::before,
    .sidebar::before,
    #sidebar::before {
        width: var(--sidebar-w) !important;
        max-width: var(--sidebar-w) !important;
    }

    .main-shell {
        position: relative !important;
        margin-left: var(--sidebar-w) !important;
        width: calc(100vw - var(--sidebar-w)) !important;
        max-width: calc(100vw - var(--sidebar-w)) !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    .topbar {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 14px var(--topbar-side-gap) 0 var(--topbar-side-gap) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
    }

    .topbar > div:first-of-type {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .topbar-title,
    .topbar-subtitle {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .topbar-balance,
    .theme-toggle,
    .topbar-user,
    .topbar-avatar,
    .menu-toggle {
        flex: 0 0 auto !important;
    }

    .content-area,
    .main-content,
    .page-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

@media screen and (min-width: 961px) and (max-width: 1120px) {
    .topbar {
        gap: 8px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .topbar-balance {
        max-width: 148px !important;
        padding-right: 9px !important;
    }

    .topbar-balance > span:last-child {
        display: none !important;
    }

    .bal-num {
        max-width: 78px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   V1/V2 Narrow Search Form Override
   Date: 2026-05-08
   Purpose: make only V1 & V2 search form cards narrower on desktop
   ========================================================= */
#ajaxPageContent[data-page="v1"] > .form-card.slim-card,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card {
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 17px 18px !important;
    border-radius: 16px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-hero-top,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top {
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(14, 165, 181, 0.20) !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .service-title,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .service-title {
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .service-subtitle,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .service-subtitle {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 0 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    gap: 12px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-group,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-group {
    margin-bottom: 0 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-group label,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-group label {
    margin-bottom: 7px !important;
    font-size: 12px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form input,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form input {
    height: 37px !important;
    min-height: 37px !important;
    border-radius: 11px !important;
    padding: 0 11px !important;
    font-size: 12.5px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice {
    min-height: 42px !important;
    padding: 8px 12px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .btn-search,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .btn-search {
    min-width: 130px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
}

@media (max-width: 820px) {
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 14px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .service-title,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .service-title {
        font-size: 17.5px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .service-subtitle,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .service-subtitle {
        font-size: 12px !important;
    }
}

@media (max-width: 460px) {
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form input,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form input {
        height: 39px !important;
        min-height: 39px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .btn-search,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .btn-search {
        width: 100% !important;
    }
}



/* =========================================================
   V1/V2 Search Form & Order History Gap Fix
   Date: 2026-05-08
   Purpose: add clean vertical breathing space between compact search form and order history
   ========================================================= */
#ajaxPageContent[data-page="v1"] > .form-card.slim-card,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card {
    margin-bottom: 26px !important;
}

#ajaxPageContent[data-page="v1"] > .hw-card,
#ajaxPageContent[data-page="v2"] > .hw-card,
#ajaxPageContent[data-page="v1"] > section.card.hw-card,
#ajaxPageContent[data-page="v2"] > section.card.hw-card {
    margin-top: 0 !important;
    clear: both !important;
}

@media (max-width: 820px) {
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card {
        margin-bottom: 18px !important;
    }
}

@media (max-width: 460px) {
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card {
        margin-bottom: 15px !important;
    }
}

/* =========================================================
   Order History Compact Table UI
   Date: 2026-05-08
   Purpose: make V1/V2 order history match compact table preview while
   keeping V1/V2/V3/V4/Edit buttons in the previous colored style.
   ========================================================= */
@media screen {
    .hw-card {
        border: 1px solid rgba(226, 232, 240, 0.95) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .055) !important;
        overflow: hidden !important;
    }

    .hw-card > .section-header.with-padding,
    .hw-card .section-header.with-padding {
        padding: 14px 16px 10px !important;
        border-bottom: 1px solid rgba(226, 232, 240, .72) !important;
        background: #ffffff !important;
        align-items: flex-start !important;
    }

    .hw-card .section-header h3 {
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        color: #0f172a !important;
        margin: 0 0 4px !important;
    }

    .hw-subtitle {
        font-size: 11.5px !important;
        color: #64748b !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    .section-chip {
        min-height: 28px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        color: #64748b !important;
        background: #eff6ff !important;
        border: 1px solid #dbeafe !important;
    }

    .hw-btn-print-all {
        min-height: 30px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        border: 0 !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .20) !important;
    }

    .hw-table-rows {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding: 12px 16px 12px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .hw-table-head,
    .hw-table-rows > .hw-row {
        min-width: 820px !important;
        display: grid !important;
        grid-template-columns: 104px 126px 126px 150px 138px minmax(310px, 1fr) !important;
        column-gap: 12px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .hw-table-head {
        padding: 10px 10px !important;
        background: #f8fafc !important;
        border: 1px solid #eef2f7 !important;
        border-radius: 12px 12px 0 0 !important;
        color: #475569 !important;
        font-size: 11px !important;
        font-weight: 900 !important;
    }

    .hw-table-rows > .hw-row {
        position: relative !important;
        margin: 0 !important;
        padding: 10px 10px !important;
        gap: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
        border-left: 1px solid #eef2f7 !important;
        border-right: 1px solid #eef2f7 !important;
        border-bottom: 1px solid #eef2f7 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .hw-table-rows > .hw-row:last-child {
        border-radius: 0 0 12px 12px !important;
    }

    .hw-table-rows > .hw-row:hover {
        background: #fbfdff !important;
        transform: none !important;
    }

    .hw-table-rows .hw-serial {
        position: static !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    .hw-table-rows .hw-thumb-wrap,
    .hw-table-rows .hw-thumb,
    .hw-table-rows .hw-thumb-ph,
    .hw-table-rows .hw-name-bn,
    .hw-table-rows .hw-name-en,
    .hw-table-rows .hw-unknown,
    .hw-table-rows .hw-blood,
    .hw-table-rows .hw-meta-sep,
    .hw-table-rows .hw-meta-lbl {
        display: none !important;
    }

    .hw-table-rows .hw-info,
    .hw-table-rows .hw-meta-row,
    .hw-table-rows .hw-badge-row {
        display: contents !important;
    }

    .hw-table-rows .hw-meta-row > .hw-meta-item:nth-child(1) {
        display: block !important;
        grid-column: 2 !important;
    }

    .hw-table-rows .hw-meta-row > .hw-meta-item:nth-child(3) {
        display: block !important;
        grid-column: 3 !important;
    }

    .hw-table-rows .hw-meta-val {
        display: inline !important;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }

    .hw-table-rows .hw-badge-row > .status-pill:first-child {
        display: inline-flex !important;
        grid-column: 4 !important;
        justify-self: start !important;
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hw-table-rows .hw-badge-row > .status-pill:not(:first-child) {
        display: none !important;
    }

    .hw-table-rows .hw-time {
        display: block !important;
        grid-column: 5 !important;
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    .hw-table-rows .hw-actions {
        grid-column: 6 !important;
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
    }

    .hw-table-rows .hw-print-variants {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        width: auto !important;
    }

    .hw-table-rows .hw-template-btn,
    .hw-table-rows .hw-btn-edit {
        flex: 0 0 auto !important;
        min-width: 50px !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .12) !important;
        transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
    }

    .hw-table-rows .hw-template-btn:hover,
    .hw-table-rows .hw-btn-edit:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, .18) !important;
        filter: brightness(1.04) !important;
    }

    .hw-table-rows .hw-template-v1 {
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        border: 1px solid rgba(37, 99, 235, .28) !important;
        color: #fff !important;
    }
    .hw-table-rows .hw-template-v2 {
        background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
        border: 1px solid rgba(124, 58, 237, .28) !important;
        color: #fff !important;
    }
    .hw-table-rows .hw-template-v3 {
        background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
        border: 1px solid rgba(20, 184, 166, .30) !important;
        color: #fff !important;
    }
    .hw-table-rows .hw-template-v4 {
        background: linear-gradient(135deg, #be123c, #e11d48) !important;
        border: 1px solid rgba(225, 29, 72, .30) !important;
        color: #fff !important;
    }
    .hw-table-rows .hw-template-tin {
        background: linear-gradient(135deg, #16a34a, #0f766e) !important;
        border: 1px solid rgba(22, 163, 74, .30) !important;
        color: #fff !important;
    }
    .hw-table-rows .hw-btn-edit {
        min-width: 74px !important;
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        border: 1px solid rgba(245, 158, 11, .35) !important;
        color: #fff !important;
    }

    .hw-table-rows .hw-no-data {
        grid-column: 6 !important;
        font-size: 11px !important;
        color: #94a3b8 !important;
    }
}

@media screen and (max-width: 760px) {
    .hw-table-rows {
        padding: 10px 12px 12px !important;
        overflow-x: visible !important;
    }

    .hw-table-head {
        display: none !important;
    }

    .hw-table-rows > .hw-row {
        min-width: 0 !important;
        display: block !important;
        padding: 12px !important;
        margin-bottom: 10px !important;
        border: 1px solid #eef2f7 !important;
        border-radius: 14px !important;
        background: #fff !important;
    }

    .hw-table-rows .hw-info,
    .hw-table-rows .hw-meta-row,
    .hw-table-rows .hw-badge-row {
        display: flex !important;
    }

    .hw-table-rows .hw-meta-row,
    .hw-table-rows .hw-badge-row {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 7px !important;
    }

    .hw-table-rows .hw-meta-row > .hw-meta-item:nth-child(1),
    .hw-table-rows .hw-meta-row > .hw-meta-item:nth-child(3) {
        display: inline-flex !important;
        grid-column: auto !important;
        gap: 4px !important;
    }

    .hw-table-rows .hw-meta-lbl {
        display: inline-flex !important;
        font-size: 10px !important;
        padding: 2px 6px !important;
        border-radius: 999px !important;
        background: #f1f5f9 !important;
        color: #64748b !important;
        font-weight: 900 !important;
    }

    .hw-table-rows .hw-badge-row > .status-pill:first-child,
    .hw-table-rows .hw-time {
        grid-column: auto !important;
    }

    .hw-table-rows .hw-actions,
    .hw-table-rows .hw-print-variants {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        margin-top: 10px !important;
        gap: 7px !important;
    }

    .hw-table-rows .hw-template-btn,
    .hw-table-rows .hw-btn-edit {
        flex: 1 1 calc(33.333% - 8px) !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   V1/V2 More Narrow + Button Visible Fix
   Date: 2026-05-08
   Purpose: make V1/V2 search forms narrower from left/right and reduce
   vertical height so the search button stays visible without scrolling.
   ========================================================= */
#ajaxPageContent[data-page="v1"] > .form-card.slim-card,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
    overflow: visible !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-hero-top,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-badge,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-badge {
    font-size: 10.5px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .service-title,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .service-title {
    font-size: 17px !important;
    line-height: 1.22 !important;
    margin: 5px 0 5px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .service-subtitle,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .service-subtitle {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
}

#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top > div[style*="fef3c7"] {
    padding: 7px 10px !important;
    margin-top: 8px !important;
    border-width: 1px !important;
    border-radius: 10px !important;
    gap: 8px !important;
}

#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top > div[style*="fef3c7"] > div:first-child {
    font-size: 1rem !important;
}

#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top > div[style*="fef3c7"] p {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) !important;
    align-items: end !important;
    gap: 8px 10px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-group,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-group {
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-group label,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-group label {
    margin-bottom: 5px !important;
    font-size: 11.2px !important;
    line-height: 1.2 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .label-hint,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .label-hint {
    font-size: 9.7px !important;
    padding: 3px 7px !important;
    white-space: nowrap !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form input,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form input {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice {
    grid-column: 1 / 2 !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    border-radius: 11px !important;
    font-size: 11.8px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice + div,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice + div {
    grid-column: 2 / 3 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: right !important;
    margin: 0 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .btn-search,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .btn-search {
    min-width: 122px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card {
    margin-bottom: 24px !important;
}

@media (max-width: 760px) {
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 13px 12px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice,
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice + div,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice + div {
        grid-column: 1 / -1 !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice + div,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice + div {
        justify-content: center !important;
        text-align: center !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .btn-search,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .btn-search {
        width: 100% !important;
    }
}

@media (max-height: 720px) and (min-width: 761px) {
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-hero-top,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top {
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }
}

/* =========================================================
   V1/V2 Premium Compact Search Form Redesign
   Date: 2026-05-08
   Purpose: make the search panel cleaner, prettier, shorter,
   and keep the search button visible without extra scrolling.
   ========================================================= */
#ajaxPageContent[data-page="v1"] > .form-card.slim-card,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card {
    position: relative !important;
    width: min(100%, 580px) !important;
    max-width: 580px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 30px !important;
    padding: 13px 14px 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(96, 165, 250, .26) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(99, 102, 241, .12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.97)) !important;
    box-shadow:
        0 24px 55px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
    overflow: hidden !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card::before,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #2563eb, #7c3aed, #06b6d4) !important;
    opacity: .96 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-hero-top,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top {
    position: relative !important;
    text-align: left !important;
    padding: 4px 2px 10px !important;
    margin: 0 0 11px !important;
    border-bottom: 1px dashed rgba(37, 99, 235, .20) !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-badge,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 5px 10px !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    border-radius: 999px !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(37, 99, 235, .18) !important;
    background: linear-gradient(135deg, #eff6ff, #eef2ff) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .service-title,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .service-title {
    font-size: 18px !important;
    line-height: 1.18 !important;
    margin: 8px 0 5px !important;
    color: #111827 !important;
    letter-spacing: -.02em !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .service-subtitle,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .service-subtitle {
    max-width: 440px !important;
    font-size: 11.7px !important;
    line-height: 1.45 !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* Compact V2 warning box */
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top > div[style*="fef3c7"] {
    margin-top: 9px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(245, 158, 11, .55) !important;
    background: linear-gradient(135deg, #fff7ed, #fffbeb) !important;
    box-shadow: 0 9px 20px rgba(245, 158, 11, .10) !important;
}

#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top > div[style*="fef3c7"] > div:first-child {
    font-size: 18px !important;
}

#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top > div[style*="fef3c7"] p:first-child {
    font-size: 11.2px !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
}

#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top > div[style*="fef3c7"] p:last-child {
    font-size: 10.7px !important;
    line-height: 1.25 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, .94fr) !important;
    align-items: end !important;
    gap: 9px 10px !important;
    width: 100% !important;
    margin: 0 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-group,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-group {
    min-width: 0 !important;
    margin: 0 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-group label,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-group label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 0 5px !important;
    color: #172033 !important;
    font-size: 11.3px !important;
    font-weight: 900 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .label-hint,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .label-hint {
    flex: 0 0 auto !important;
    padding: 3px 7px !important;
    font-size: 9.6px !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
    color: #64748b !important;
    border: 1px solid #dbeafe !important;
    background: #f8fafc !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form input,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form input {
    height: 35px !important;
    min-height: 35px !important;
    border-radius: 12px !important;
    border: 1px solid #d7dfeb !important;
    background: #ffffff !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    color: #0f172a !important;
    box-shadow: 0 7px 16px rgba(15, 23, 42, .04) !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form input:focus,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10), 0 8px 18px rgba(37, 99, 235, .08) !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice {
    grid-column: 1 / 2 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(14, 165, 233, .28) !important;
    background: linear-gradient(135deg, #eff6ff, #f0fdfa) !important;
    color: #0f766e !important;
    font-size: 11.7px !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.80) !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice strong,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice strong {
    color: #0f766e !important;
    font-size: 12.6px !important;
    font-weight: 900 !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice + div,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice + div {
    grid-column: 2 / 3 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    text-align: right !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .btn-search,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .btn-search {
    height: 38px !important;
    min-height: 38px !important;
    min-width: 132px !important;
    padding: 0 15px !important;
    border-radius: 14px !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #4f46e5 55%, #7c3aed) !important;
    box-shadow: 0 13px 25px rgba(79, 70, 229, .28) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
    white-space: nowrap !important;
}

#ajaxPageContent[data-page="v1"] > .form-card.slim-card .btn-search:hover,
#ajaxPageContent[data-page="v2"] > .form-card.slim-card .btn-search:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 17px 28px rgba(79, 70, 229, .34) !important;
}

@media (max-width: 760px) {
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 13px 12px !important;
        border-radius: 18px !important;
        margin-bottom: 22px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .search-form,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .search-form {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice,
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice + div,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice + div {
        grid-column: 1 / -1 !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .price-notice + div,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .price-notice + div {
        justify-content: center !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .btn-search,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .btn-search {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-height: 720px) and (min-width: 761px) {
    #ajaxPageContent[data-page="v1"] > .form-card.slim-card,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card {
        padding-top: 11px !important;
        padding-bottom: 12px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .form-hero-top,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .form-hero-top {
        padding-bottom: 8px !important;
        margin-bottom: 9px !important;
    }

    #ajaxPageContent[data-page="v1"] > .form-card.slim-card .service-title,
    #ajaxPageContent[data-page="v2"] > .form-card.slim-card .service-title {
        font-size: 17px !important;
        margin-top: 6px !important;
    }
}

/* =========================================================
   SIDEBAR FINAL MATCH POLISH — GREEN/TURQUOISE SERVICE UI
   Update: 2026-05-11
   Goal: match main site color, make V1/V2/TIN sidebar items consistent.
========================================================= */
:root {
    --sidebar-w: 272px !important;
    --sb-deep: #052e2b;
    --sb-mid: #0f766e;
    --sb-bright: #14b8a6;
    --sb-aqua: #22d3ee;
    --sb-gold: #fbbf24;
    --sb-rose: #fb7185;
    --sb-text: #f8fafc;
    --sb-muted: rgba(226,232,240,.78);
    --sb-glass: rgba(255,255,255,.092);
    --sb-glass-2: rgba(255,255,255,.145);
    --sb-border: rgba(255,255,255,.14);
}

@media screen and (min-width: 961px) {
    .dashboard-layout::before {
        width: var(--sidebar-w, 272px) !important;
        background:
            radial-gradient(circle at 20% 4%, rgba(34,211,238,.30), transparent 30%),
            radial-gradient(circle at 94% 10%, rgba(20,184,166,.28), transparent 28%),
            radial-gradient(circle at 45% 92%, rgba(251,191,36,.12), transparent 30%),
            linear-gradient(160deg, #042421 0%, #064e49 46%, #0f766e 74%, #03201e 100%) !important;
    }

    .main-shell {
        margin-left: var(--sidebar-w, 272px) !important;
        width: calc(100vw - var(--sidebar-w, 272px)) !important;
        max-width: calc(100vw - var(--sidebar-w, 272px)) !important;
    }
}

aside.sidebar,
.sidebar,
#sidebar {
    width: var(--sidebar-w, 272px) !important;
    min-width: var(--sidebar-w, 272px) !important;
    max-width: var(--sidebar-w, 272px) !important;
    padding: 16px 13px !important;
    gap: 12px !important;
    background:
        radial-gradient(circle at 18% 3%, rgba(34,211,238,.34), transparent 28%),
        radial-gradient(circle at 93% 10%, rgba(45,212,191,.28), transparent 28%),
        radial-gradient(circle at 50% 97%, rgba(251,191,36,.12), transparent 32%),
        linear-gradient(160deg, #042421 0%, #064e49 46%, #0f766e 74%, #03201e 100%) !important;
    color: var(--sb-text) !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 18px 0 46px rgba(5,46,43,.28) !important;
}

aside.sidebar::before,
.sidebar::before,
#sidebar::before {
    width: var(--sidebar-w, 272px) !important;
    background:
        radial-gradient(circle at 18% 3%, rgba(34,211,238,.34), transparent 28%),
        radial-gradient(circle at 93% 10%, rgba(45,212,191,.28), transparent 28%),
        linear-gradient(160deg, #042421 0%, #064e49 46%, #0f766e 74%, #03201e 100%) !important;
}

.sidebar-brand {
    margin: 0 0 2px !important;
    padding: 13px 12px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.065)) !important;
    border: 1px solid rgba(255,255,255,.17) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 15px 32px rgba(2,44,39,.22) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.brand-logo,
.logo-icon,
.adm-brand-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #22d3ee 0%, #14b8a6 47%, #0f766e 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    box-shadow: 0 12px 26px rgba(34,211,238,.24), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.sidebar .brand-name,
.brand-name {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
}

.sidebar .brand-tagline,
.brand-tagline {
    color: rgba(226,232,240,.82) !important;
    font-weight: 600 !important;
}

.sidebar-nav {
    gap: 5px !important;
    padding: 0 !important;
}

.sidebar-section-label {
    margin: 10px 8px 4px !important;
    color: rgba(204,251,241,.72) !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.sidebar-section-label::after {
    content: '' !important;
    height: 1px !important;
    flex: 1 !important;
    background: linear-gradient(90deg, rgba(204,251,241,.28), transparent) !important;
}
.sidebar-section-label.service-label { color: #e0f2fe !important; }

.nav-item,
.nav-item-wallet,
.nav-item-logout {
    min-height: 45px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
    color: rgba(248,250,252,.88) !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.065) !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.nav-item::before,
.nav-item-wallet::before,
.nav-item-logout::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(34,211,238,.20), rgba(20,184,166,.16), transparent 70%) !important;
    opacity: 0 !important;
    transform: translateX(-22%) !important;
    transition: opacity .18s ease, transform .18s ease !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.nav-item:hover,
.nav-item-wallet:hover,
.nav-item-logout:hover {
    background: rgba(255,255,255,.112) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
    box-shadow: 0 10px 24px rgba(2,44,39,.22) !important;
}

.nav-item:hover::before,
.nav-item-wallet:hover::before,
.nav-item-logout:hover::before,
.nav-item.active::before {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,253,245,.90)) !important;
    color: #064e49 !important;
    border-color: rgba(255,255,255,.65) !important;
    box-shadow: 0 16px 32px rgba(2,44,39,.26), inset 0 1px 0 rgba(255,255,255,.75) !important;
    transform: translateX(5px) !important;
}

.nav-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.12) !important;
    color: currentColor !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
    position: relative !important;
    z-index: 1 !important;
    font-size: 1rem !important;
}

.nav-item.active .nav-icon {
    background: linear-gradient(135deg, #14b8a6, #0f766e) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 16px rgba(15,118,110,.24) !important;
}

.nav-text {
    position: relative !important;
    z-index: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
    white-space: normal !important;
}

.nav-item-wallet {
    background: linear-gradient(135deg, rgba(34,211,238,.20), rgba(20,184,166,.10)) !important;
    color: #cffafe !important;
    border-color: rgba(34,211,238,.20) !important;
}

.nav-item-service {
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(20,184,166,.075)) !important;
    border-color: rgba(94,234,212,.12) !important;
}

.nav-item-v1 .nav-icon { background: linear-gradient(135deg, rgba(20,184,166,.34), rgba(15,118,110,.22)) !important; }
.nav-item-v2 .nav-icon { background: linear-gradient(135deg, rgba(34,211,238,.30), rgba(37,99,235,.18)) !important; }
.nav-item-tin {
    background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(20,184,166,.08)) !important;
    border-color: rgba(251,191,36,.22) !important;
}
.nav-item-tin .nav-icon { background: linear-gradient(135deg, rgba(251,191,36,.42), rgba(20,184,166,.24)) !important; }
.nav-item-tin.active .nav-icon { background: linear-gradient(135deg, #fbbf24, #0f766e) !important; }

.nav-item-logout {
    margin-top: 8px !important;
    background: linear-gradient(135deg, rgba(251,113,133,.18), rgba(255,255,255,.055)) !important;
    color: #ffe4e6 !important;
    border-color: rgba(251,113,133,.16) !important;
}

.sb-user,
.sidebar-footer {
    background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.07)) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 18px !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 12px 26px rgba(2,44,39,.20) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.sb-avatar,
.topbar-avatar {
    background: linear-gradient(135deg, #22d3ee, #14b8a6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.30) !important;
}

.bottom-nav-inner {
    border-radius: 22px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,118,110,.12) !important;
    box-shadow: 0 -10px 36px rgba(5,46,43,.13) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
.bottom-nav-item.active {
    color: #0f766e !important;
    font-weight: 900 !important;
}
.bottom-nav-item.active .bottom-nav-icon {
    background: linear-gradient(135deg, rgba(20,184,166,.22), rgba(15,118,110,.12)) !important;
    color: #0f766e !important;
}

/* Admin sidebar: same color language */
.adm-sidebar {
    background:
        radial-gradient(circle at 15% 6%, rgba(34,211,238,.30), transparent 30%),
        radial-gradient(circle at 95% 8%, rgba(20,184,166,.24), transparent 28%),
        linear-gradient(160deg, #042421 0%, #064e49 46%, #0f766e 76%, #03201e 100%) !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 18px 0 46px rgba(5,46,43,.28) !important;
}
.adm-nav a {
    border-radius: 15px !important;
    color: rgba(248,250,252,.88) !important;
    border: 1px solid transparent !important;
    background: rgba(255,255,255,.045) !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease !important;
}
.adm-nav a:hover {
    background: rgba(255,255,255,.112) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}
.adm-nav a.active {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,253,245,.90)) !important;
    color: #064e49 !important;
    border-color: rgba(255,255,255,.65) !important;
    box-shadow: 0 16px 32px rgba(2,44,39,.24) !important;
}
.adm-nav .nav-icon,
.adm-nav a.active .nav-icon {
    background: linear-gradient(135deg, #22d3ee, #14b8a6) !important;
    color: #ffffff !important;
    border: 0 !important;
}

@media screen and (max-width: 960px) {
    aside.sidebar,
    .sidebar,
    #sidebar {
        width: min(86vw, 304px) !important;
        min-width: 0 !important;
        max-width: min(86vw, 304px) !important;
        box-shadow: 24px 0 70px rgba(2,44,39,.34) !important;
    }
    body.sidebar-open .sidebar-overlay {
        background: rgba(3,24,23,.58) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
}

@media screen and (max-width: 640px) {
    .sidebar-section-label { margin-top: 8px !important; }
    .nav-item, .nav-item-wallet, .nav-item-logout { min-height: 43px !important; }
}


/* =========================================================
   GLOBAL BLUE + WHITE THEME OVERRIDE
   Requested: whole website in blue/white, including sidebar.
   ========================================================= */
:root,
[data-theme="dark"] {
    --primary: #2563eb !important;
    --primary-dark: #1d4ed8 !important;
    --primary-light: #60a5fa !important;
    --primary-soft: #dbeafe !important;
    --bg-main: #f5f9ff !important;
    --bg-card: #ffffff !important;
    --bg-card-solid: #ffffff !important;
    --border: #d8e6ff !important;
    --border-light: #eaf2ff !important;
    --text-dark: #0f172a !important;
    --text-mid: #334155 !important;
    --text-light: #64748b !important;
    --shadow: 0 14px 42px rgba(37, 99, 235, .10) !important;
    --shadow-hover: 0 20px 56px rgba(37, 99, 235, .16) !important;
}

html,
body,
[data-theme="dark"] body {
    background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 46%, #eef6ff 100%) !important;
    color: #0f172a !important;
    color-scheme: light !important;
}

body::before {
    background-image:
        radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .10), transparent 30%),
        radial-gradient(circle at 92% 2%, rgba(96, 165, 250, .16), transparent 28%) !important;
    opacity: 1 !important;
}

.dashboard-layout,
.main-shell,
.content-area,
.page-wrap,
.page-content,
.main-content,
.container,
.app-shell {
    background: transparent !important;
    color: #0f172a !important;
}

/* Sidebar: clean white card with blue active states */
.dashboard-layout::before,
aside.sidebar::before,
.sidebar::before,
#sidebar::before {
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
}

aside.sidebar,
.sidebar,
#sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 54%, #eff6ff 100%) !important;
    color: #0f172a !important;
    border-right: 1px solid #d8e6ff !important;
    box-shadow: 12px 0 38px rgba(37, 99, 235, .10) !important;
}

.sidebar-brand,
#sidebar .sidebar-brand {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
    border: 1px solid #d8e6ff !important;
    color: #0f172a !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .09) !important;
}

.brand-logo,
.sidebar .brand-logo,
#sidebar .brand-logo {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    color: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, .25) !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .22) !important;
}

.brand-name,
.sidebar .brand-name,
#sidebar .brand-name {
    color: #0f172a !important;
}

.brand-tagline,
.sidebar .brand-tagline,
#sidebar .brand-tagline,
.sidebar-footer,
.sidebar-footer small {
    color: #64748b !important;
    opacity: 1 !important;
}

.sidebar-footer {
    background: #eff6ff !important;
    border: 1px solid #d8e6ff !important;
}

.nav-group-label,
.sidebar .nav-group-label,
#sidebar .nav-group-label {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border: 1px solid #d8e6ff !important;
}

.nav-item,
.sidebar .nav-item,
#sidebar .nav-item {
    color: #334155 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.nav-item::after,
.sidebar .nav-item::after,
#sidebar .nav-item::after {
    background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(96, 165, 250, .04)) !important;
}

.nav-item:hover,
.sidebar .nav-item:hover,
#sidebar .nav-item:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
    transform: translateX(3px) !important;
}

.nav-item.active,
.sidebar .nav-item.active,
#sidebar .nav-item.active,
.nav-item.active:hover,
.sidebar .nav-item.active:hover,
#sidebar .nav-item.active:hover {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .24) !important;
}

.nav-icon,
.sidebar .nav-icon,
#sidebar .nav-icon {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #d8e6ff !important;
}

.nav-item.active .nav-icon,
.sidebar .nav-item.active .nav-icon,
#sidebar .nav-item.active .nav-icon {
    background: rgba(255,255,255,.20) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.25) !important;
}

.nav-item-wallet,
.nav-item-logout {
    border-color: #bfdbfe !important;
}

/* Header and cards */
.topbar,
.header,
.mobile-topbar {
    background: rgba(255,255,255,.92) !important;
    border-bottom: 1px solid #d8e6ff !important;
    color: #0f172a !important;
    box-shadow: 0 8px 28px rgba(37, 99, 235, .07) !important;
}

.topbar-title,
.topbar h1,
.page-title,
h1, h2, h3, h4,
.card-title,
.section-title {
    color: #0f172a !important;
}

.topbar-subtitle,
.page-subtitle,
.muted,
small,
.card-subtitle,
.section-subtitle {
    color: #64748b !important;
}

.card,
.stat-card,
.service-card,
.feature-card,
.section-card,
.notice-card,
.search-card,
.result-card,
.order-card,
.profile-card,
.wallet-card,
.table-card,
.form-card,
.info-card,
.user-card,
.hw-modal-card,
.modal-content,
.dropdown-menu,
.table-wrap,
.box,
.panel {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #d8e6ff !important;
    box-shadow: 0 14px 42px rgba(37, 99, 235, .09) !important;
}

.card:hover,
.service-card:hover,
.order-card:hover,
.stat-card:hover {
    border-color: #bfdbfe !important;
    box-shadow: 0 20px 58px rgba(37, 99, 235, .13) !important;
}

input,
select,
textarea,
.form-control,
.form-input,
.search-input {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #bfdbfe !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-input:focus,
.search-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12) !important;
    outline: none !important;
}

.btn,
button,
.button,
.submit-btn,
.search-btn,
.primary-btn,
.btn-primary {
    border-color: #2563eb !important;
}

.btn-primary,
.primary-btn,
.search-btn,
.submit-btn,
button[type="submit"] {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .22) !important;
}

.btn-secondary,
.secondary-btn,
.btn-outline,
a.btn-outline {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

table,
.table {
    background: #ffffff !important;
    color: #0f172a !important;
}

thead,
th {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

td,
th {
    border-color: #eaf2ff !important;
}

.alert-info,
.info-box {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-color: #bfdbfe !important;
}

.alert-success {
    background: #ecfdf5 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
}

.alert-danger,
.alert-error {
    background: #fff1f2 !important;
    color: #b91c1c !important;
    border-color: #fecdd3 !important;
}

.alert-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}

/* Mobile bottom nav: blue-white matching */
.bottom-nav,
.mobile-bottom-nav {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid #d8e6ff !important;
    box-shadow: 0 -10px 35px rgba(37, 99, 235, .12) !important;
}

.bottom-nav-item,
.mobile-bottom-nav a {
    color: #64748b !important;
}

.bottom-nav-item.active,
.bottom-nav-item:hover,
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover {
    color: #2563eb !important;
}

.bottom-nav-icon {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.bottom-nav-item.active .bottom-nav-icon {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    color: #ffffff !important;
}

.sidebar-overlay,
.mobile-overlay {
    background: rgba(15,23,42,.42) !important;
}

/* Login/register/public pages */
.auth-card,
.login-card,
.register-card,
.auth-panel {
    background: #ffffff !important;
    border: 1px solid #d8e6ff !important;
    box-shadow: 0 18px 58px rgba(37,99,235,.13) !important;
    color: #0f172a !important;
}

/* Admin panel blue-white match */
.adm-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
    color: #0f172a !important;
    border-right: 1px solid #d8e6ff !important;
    box-shadow: 12px 0 38px rgba(37,99,235,.10) !important;
}

.adm-brand {
    background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
    border-bottom: 1px solid #d8e6ff !important;
    color: #0f172a !important;
}

.adm-brand-icon {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.22) !important;
}

.adm-brand h2,
.adm-topbar h1,
.stat-val,
.modal h3,
.section-header h2,
.section-header h3 {
    color: #0f172a !important;
}

.adm-brand p,
.adm-topbar p,
.stat-lbl,
.modal label,
.section-header p,
.empty-state,
.empty-state p {
    color: #64748b !important;
}

.adm-nav a {
    color: #334155 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

.adm-nav a:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
}

.adm-nav a.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 12px 30px rgba(37,99,235,.22) !important;
}

.adm-nav .nav-icon {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #d8e6ff !important;
}

.adm-nav a.active .nav-icon {
    background: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.28) !important;
}

.adm-main,
body:has(.adm-sidebar) {
    background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%) !important;
    color: #0f172a !important;
}

.stat-card,
.section-card,
.modal,
.user-card,
.recharge-card,
.order-item,
#noticeEditor,
#activeNoticeCard {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #d8e6ff !important;
    box-shadow: 0 14px 42px rgba(37,99,235,.09) !important;
}

.section-header,
.search-bar,
.user-card-meta,
.adm-logout {
    border-color: #d8e6ff !important;
}

.adm-badge {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

.adm-logout a {
    background: #fff1f2 !important;
    color: #dc2626 !important;
    border-color: #fecdd3 !important;
}

/* Convert common inline dark admin blocks to blue-white */
.adm-main [style*="background:#0f172a"],
.adm-main [style*="background: #0f172a"],
.adm-main [style*="background:#1e293b"],
.adm-main [style*="background: #1e293b"] {
    background: #ffffff !important;
    border-color: #d8e6ff !important;
    color: #0f172a !important;
}

.adm-main [style*="color:#f1f5f9"],
.adm-main [style*="color: #f1f5f9"],
.adm-main [style*="color:#e2e8f0"],
.adm-main [style*="color: #e2e8f0"] {
    color: #0f172a !important;
}

.adm-main [style*="color:#94a3b8"],
.adm-main [style*="color: #94a3b8"],
.adm-main [style*="color:#64748b"],
.adm-main [style*="color: #64748b"] {
    color: #64748b !important;
}

/* Keep terminal/hacking animations readable while matching blue tone */
.searching-terminal,
.login-hack-box,
.terminal-box,
.terminal-screen {
    background: #0f172a !important;
    color: #dbeafe !important;
    border-color: rgba(96,165,250,.35) !important;
}


/* =========================================================
   BALANCED BLUE + WHITE THEME OVERRIDE
   Purpose: keep blue/white brand but reduce excessive plain white.
   Added after user's feedback: "সব কিছু সাদা সাদা হয়ে আছে বেশি".
   ========================================================= */
:root,
[data-theme="dark"] {
    --primary: #2563eb !important;
    --primary-dark: #0f2f6b !important;
    --primary-light: #60a5fa !important;
    --primary-soft: #dbeafe !important;
    --bg-main: #eaf2ff !important;
    --bg-card: #f8fbff !important;
    --bg-card-solid: #f8fbff !important;
    --border: #bcd4ff !important;
    --border-light: #d8e6ff !important;
    --text-dark: #0f172a !important;
    --text-mid: #334155 !important;
    --text-light: #64748b !important;
    --shadow: 0 16px 42px rgba(15, 47, 107, .13) !important;
    --shadow-hover: 0 22px 58px rgba(37, 99, 235, .18) !important;
}

html,
body,
[data-theme="dark"] body,
.adm-main,
body:has(.adm-sidebar) {
    background:
        radial-gradient(circle at 8% 0%, rgba(37,99,235,.18), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(96,165,250,.20), transparent 30%),
        linear-gradient(180deg, #dbeafe 0%, #eaf2ff 44%, #dbeafe 100%) !important;
    color: #0f172a !important;
    color-scheme: light !important;
}

body::before {
    background-image:
        radial-gradient(circle at 12% 8%, rgba(37, 99, 235, .16), transparent 28%),
        radial-gradient(circle at 88% 0%, rgba(14, 165, 233, .18), transparent 30%) !important;
    opacity: .95 !important;
}

.content-area,
.page-content,
.main-content,
.container,
.app-shell {
    background: transparent !important;
}

/* Sidebar: make it premium blue instead of too-white */
aside.sidebar,
.sidebar,
#sidebar,
.adm-sidebar {
    background: linear-gradient(180deg, #0f2f6b 0%, #164a9f 52%, #2563eb 100%) !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 14px 0 42px rgba(15,47,107,.30) !important;
}

.dashboard-layout::before,
aside.sidebar::before,
.sidebar::before,
#sidebar::before {
    background: linear-gradient(180deg, #0f2f6b 0%, #164a9f 58%, #2563eb 100%) !important;
}

.sidebar-brand,
#sidebar .sidebar-brand,
.adm-brand {
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px rgba(15,23,42,.16) !important;
}

.brand-logo,
.sidebar .brand-logo,
#sidebar .brand-logo,
.adm-brand-icon {
    background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.32) !important;
    box-shadow: 0 12px 28px rgba(56,189,248,.22) !important;
}

.brand-name,
.sidebar .brand-name,
#sidebar .brand-name,
.adm-brand h2 {
    color: #ffffff !important;
}

.brand-tagline,
.sidebar .brand-tagline,
#sidebar .brand-tagline,
.sidebar-footer,
.sidebar-footer small,
.adm-brand p {
    color: rgba(255,255,255,.76) !important;
    opacity: 1 !important;
}

.sidebar-footer,
.adm-logout {
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.86) !important;
}

.nav-group-label,
.sidebar .nav-group-label,
#sidebar .nav-group-label {
    color: #bfdbfe !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}

.nav-item,
.sidebar .nav-item,
#sidebar .nav-item,
.adm-nav a {
    color: rgba(255,255,255,.86) !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: none !important;
}

.nav-icon,
.sidebar .nav-icon,
#sidebar .nav-icon,
.adm-nav .nav-icon {
    background: rgba(255,255,255,.12) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}

.nav-item:hover,
.sidebar .nav-item:hover,
#sidebar .nav-item:hover,
.adm-nav a:hover {
    background: rgba(255,255,255,.13) !important;
    color: #ffffff !important;
    border-color: rgba(191,219,254,.32) !important;
    transform: translateX(3px) !important;
}

.nav-item.active,
.sidebar .nav-item.active,
#sidebar .nav-item.active,
.nav-item.active:hover,
.sidebar .nav-item.active:hover,
#sidebar .nav-item.active:hover,
.adm-nav a.active {
    background: linear-gradient(135deg, #ffffff, #dbeafe) !important;
    color: #0f2f6b !important;
    border-color: rgba(255,255,255,.68) !important;
    box-shadow: 0 14px 32px rgba(15,23,42,.24) !important;
}

.nav-item.active .nav-icon,
.sidebar .nav-item.active .nav-icon,
#sidebar .nav-item.active .nav-icon,
.adm-nav a.active .nav-icon {
    background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
    color: #ffffff !important;
    border-color: rgba(37,99,235,.25) !important;
}

/* Top/header should be tinted, not pure white */
.topbar,
.header,
.mobile-topbar,
.adm-topbar {
    background: rgba(234,242,255,.92) !important;
    border-bottom: 1px solid #bcd4ff !important;
    color: #0f172a !important;
    box-shadow: 0 10px 30px rgba(15,47,107,.11) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* Cards/forms: light-blue cards instead of flat white */
.card,
.stat-card,
.service-card,
.feature-card,
.section-card,
.notice-card,
.search-card,
.result-card,
.order-card,
.profile-card,
.wallet-card,
.table-card,
.form-card,
.info-card,
.user-card,
.hw-modal-card,
.modal-content,
.dropdown-menu,
.table-wrap,
.box,
.panel,
.auth-card,
.login-card,
.register-card,
.auth-panel,
.modal,
.recharge-card,
.order-item,
#noticeEditor,
#activeNoticeCard {
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
    color: #0f172a !important;
    border: 1px solid #bcd4ff !important;
    box-shadow: 0 16px 44px rgba(15,47,107,.12) !important;
}

.card:hover,
.service-card:hover,
.order-card:hover,
.stat-card:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 22px 60px rgba(37,99,235,.17) !important;
}

.dashboard-hero,
.hero-card,
.service-hero,
.notice-hero {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 52%, #38bdf8 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 22px 60px rgba(37,99,235,.25) !important;
}
.dashboard-hero *,
.hero-card *,
.service-hero *,
.notice-hero * {
    color: inherit;
}
.hero-action-primary {
    background: #ffffff !important;
    color: #1d4ed8 !important;
}
.hero-action-secondary {
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.24) !important;
}

input,
select,
textarea,
.form-control,
.form-input,
.search-input {
    background: #f8fbff !important;
    color: #0f172a !important;
    border: 1px solid #93c5fd !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-input:focus,
.search-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.14) !important;
    outline: none !important;
}

.btn-primary,
.primary-btn,
.search-btn,
.submit-btn,
button[type="submit"] {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 13px 30px rgba(37,99,235,.24) !important;
}

.btn-secondary,
.secondary-btn,
.btn-outline,
a.btn-outline {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd !important;
}

table,
.table {
    background: #f8fbff !important;
    color: #0f172a !important;
}

thead,
th {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
    color: #0f2f6b !important;
}

td,
th {
    border-color: #cfe0ff !important;
}

.bottom-nav,
.mobile-bottom-nav {
    background: rgba(219,234,254,.96) !important;
    border: 1px solid #93c5fd !important;
    box-shadow: 0 -12px 36px rgba(15,47,107,.18) !important;
}

.bottom-nav-item,
.mobile-bottom-nav a {
    color: #475569 !important;
}

.bottom-nav-icon {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.bottom-nav-item.active,
.bottom-nav-item:hover,
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover {
    color: #1d4ed8 !important;
}

.bottom-nav-item.active .bottom-nav-icon {
    background: linear-gradient(135deg, #1d4ed8, #38bdf8) !important;
    color: #ffffff !important;
}

/* Convert previous white admin inline overrides to tinted cards */
.adm-main [style*="background:#0f172a"],
.adm-main [style*="background: #0f172a"],
.adm-main [style*="background:#1e293b"],
.adm-main [style*="background: #1e293b"] {
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
    border-color: #bcd4ff !important;
    color: #0f172a !important;
}

/* Keep terminal/hacking animations dark and readable */
.searching-terminal,
.login-hack-box,
.terminal-box,
.terminal-screen {
    background: #0f172a !important;
    color: #dbeafe !important;
    border-color: rgba(96,165,250,.38) !important;
}


/* =========================================================
   U HEADER SIDEBAR NAVIGATION - FINAL OVERRIDE
   User request: left sidebar moved to header, U-shaped menu.
   ========================================================= */
@media (min-width: 769px) {
    :root {
        --u-nav-h: 92px;
        --u-nav-top: 12px;
        --u-nav-side: 18px;
    }

    body {
        background: linear-gradient(180deg, #eaf5ff 0%, #f5fbff 48%, #eef7ff 100%) !important;
    }

    .dashboard-layout,
    .main-shell,
    .content-area {
        max-width: 100% !important;
    }

    .dashboard-layout {
        display: block !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding-top: calc(var(--u-nav-h) + var(--u-nav-top) + 14px) !important;
        margin: 0 !important;
    }

    .dashboard-layout::before,
    aside.sidebar::before,
    .sidebar::before,
    #sidebar::before,
    body::before {
        display: none !important;
        content: none !important;
    }

    aside.sidebar,
    .sidebar,
    #sidebar {
        position: fixed !important;
        top: var(--u-nav-top) !important;
        left: var(--u-nav-side) !important;
        right: var(--u-nav-side) !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - (var(--u-nav-side) * 2)) !important;
        height: var(--u-nav-h) !important;
        min-height: var(--u-nav-h) !important;
        max-height: var(--u-nav-h) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 10px 14px !important;
        overflow: visible !important;
        color: #fff !important;
        background:
            radial-gradient(circle at 15% 5%, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 28%),
            linear-gradient(135deg, #0b2f70 0%, #1262c7 48%, #22a7f0 100%) !important;
        border: 1px solid rgba(255,255,255,.22) !important;
        border-top: 0 !important;
        border-radius: 0 0 34px 34px !important;
        box-shadow: 0 18px 45px rgba(13, 71, 161, .26) !important;
        z-index: 1000 !important;
        transform: none !important;
        scrollbar-width: none !important;
    }

    aside.sidebar::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar,
    #sidebar::-webkit-scrollbar {
        display: none !important;
    }

    aside.sidebar::after,
    .sidebar::after,
    #sidebar::after {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        bottom: -16px !important;
        transform: translateX(-50%) !important;
        width: 210px !important;
        height: 28px !important;
        background: linear-gradient(135deg, #1262c7 0%, #22a7f0 100%) !important;
        border-radius: 0 0 90px 90px !important;
        box-shadow: 0 16px 35px rgba(18, 98, 199, .23) !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    .sidebar-brand,
    #sidebar .sidebar-brand {
        width: auto !important;
        min-width: 220px !important;
        max-width: 260px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 14px 8px 4px !important;
        margin: 0 !important;
        border-bottom: 0 !important;
        border-right: 1px solid rgba(255,255,255,.24) !important;
        flex-shrink: 0 !important;
    }

    .brand-logo,
    .sidebar .brand-logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.18) !important;
        border: 1px solid rgba(255,255,255,.28) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

    .brand-name,
    .sidebar .brand-name {
        color: #fff !important;
        font-size: .96rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .brand-tagline,
    .sidebar .brand-tagline {
        color: rgba(255,255,255,.75) !important;
        font-size: .70rem !important;
        white-space: nowrap !important;
    }

    .sidebar-nav,
    #sidebar .sidebar-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    .sidebar-nav::-webkit-scrollbar,
    #sidebar .sidebar-nav::-webkit-scrollbar {
        display: none !important;
    }

    .sidebar-section-label,
    .nav-group-label,
    .sidebar .nav-group-label {
        display: none !important;
    }

    .sidebar .nav-item,
    #sidebar .nav-item {
        height: 48px !important;
        min-height: 48px !important;
        width: auto !important;
        min-width: max-content !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        border-radius: 17px !important;
        color: rgba(255,255,255,.92) !important;
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
        transform: none !important;
        white-space: nowrap !important;
        transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
        flex-shrink: 0 !important;
    }

    .sidebar .nav-item:hover,
    #sidebar .nav-item:hover {
        color: #fff !important;
        background: rgba(255,255,255,.20) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 22px rgba(4,33,79,.16), inset 0 1px 0 rgba(255,255,255,.12) !important;
    }

    .sidebar .nav-item.active,
    #sidebar .nav-item.active {
        color: #0b2f70 !important;
        background: #ffffff !important;
        border-color: rgba(255,255,255,.75) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 12px 26px rgba(4,33,79,.18) !important;
    }

    .sidebar .nav-icon,
    #sidebar .nav-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.16) !important;
        color: inherit !important;
        font-size: .92rem !important;
        border: 1px solid rgba(255,255,255,.14) !important;
    }

    .sidebar .nav-item.active .nav-icon,
    #sidebar .nav-item.active .nav-icon {
        background: #eaf5ff !important;
        color: #0b63ce !important;
        border-color: #dbeafe !important;
    }

    .sidebar .nav-text,
    #sidebar .nav-text {
        font-size: .83rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .nav-item-wallet {
        background: rgba(255,255,255,.15) !important;
        border-color: rgba(255,255,255,.22) !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    .nav-item-service,
    .nav-item-v1,
    .nav-item-v2,
    .nav-item-tin {
        background: rgba(255,255,255,.12) !important;
    }

    .sb-user {
        height: 48px !important;
        min-width: 172px !important;
        max-width: 220px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 7px 11px !important;
        border-radius: 17px !important;
        background: rgba(255,255,255,.11) !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        color: #fff !important;
        flex-shrink: 0 !important;
    }

    .sb-avatar {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        border-radius: 13px !important;
        font-size: .82rem !important;
    }

    .sb-uname {
        font-size: .78rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 135px !important;
    }

    .sb-umobile {
        display: none !important;
    }

    .nav-item-logout {
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        border-radius: 17px !important;
        box-shadow: none !important;
        transform: none !important;
        flex-shrink: 0 !important;
    }

    .sidebar-overlay,
    body.sidebar-open .sidebar-overlay {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.sidebar-open {
        overflow: auto !important;
    }

    .main-shell {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: calc(100vh - var(--u-nav-h)) !important;
    }

    .topbar {
        position: sticky !important;
        top: calc(var(--u-nav-h) + var(--u-nav-top) + 14px) !important;
        z-index: 850 !important;
        margin: 0 20px 0 !important;
        border-radius: 24px !important;
        border: 1px solid rgba(37,99,235,.15) !important;
        background: rgba(255,255,255,.82) !important;
        box-shadow: 0 14px 34px rgba(37,99,235,.10) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }

    .menu-toggle {
        display: none !important;
    }

    .content-area {
        padding: 20px 22px 38px !important;
    }

    .bottom-nav {
        display: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1240px) {
    :root { --u-nav-h: 88px; --u-nav-side: 12px; }
    .sidebar-brand,
    #sidebar .sidebar-brand {
        min-width: 168px !important;
        max-width: 190px !important;
        padding-right: 10px !important;
    }
    .brand-tagline { display: none !important; }
    .sidebar .nav-item,
    #sidebar .nav-item {
        padding: 8px 9px !important;
        gap: 6px !important;
    }
    .sidebar .nav-text,
    #sidebar .nav-text {
        font-size: .76rem !important;
    }
    .sb-user {
        min-width: 122px !important;
        max-width: 152px !important;
    }
    .sb-uname { max-width: 88px !important; }
}

@media (min-width: 769px) and (max-width: 980px) {
    .brand-name { font-size: .82rem !important; }
    .sidebar .nav-text,
    #sidebar .nav-text {
        display: none !important;
    }
    .sidebar .nav-item,
    #sidebar .nav-item {
        width: 48px !important;
        min-width: 48px !important;
        padding: 8px !important;
    }
    .sb-user {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        justify-content: center !important;
        padding: 7px !important;
    }
    .sb-user > div:not(.sb-avatar) { display: none !important; }
}

/* Admin panel: make its sidebar match the same U header idea on desktop */
@media (min-width: 769px) {
    body:has(.adm-sidebar) {
        display: block !important;
        padding-top: 110px !important;
        background: linear-gradient(180deg, #eaf5ff 0%, #f5fbff 52%, #eef7ff 100%) !important;
    }

    .adm-sidebar {
        position: fixed !important;
        top: 12px !important;
        left: 18px !important;
        right: 18px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: calc(100vw - 36px) !important;
        height: 86px !important;
        min-height: 86px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 10px 14px !important;
        overflow: visible !important;
        background: radial-gradient(circle at 15% 5%, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 28%), linear-gradient(135deg, #0b2f70 0%, #1262c7 48%, #22a7f0 100%) !important;
        border: 1px solid rgba(255,255,255,.22) !important;
        border-top: 0 !important;
        border-radius: 0 0 34px 34px !important;
        box-shadow: 0 18px 45px rgba(13,71,161,.26) !important;
        z-index: 1200 !important;
        color: #fff !important;
    }

    .adm-sidebar::after {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        bottom: -15px !important;
        transform: translateX(-50%) !important;
        width: 200px !important;
        height: 26px !important;
        background: linear-gradient(135deg, #1262c7 0%, #22a7f0 100%) !important;
        border-radius: 0 0 90px 90px !important;
        box-shadow: 0 16px 35px rgba(18,98,199,.22) !important;
        z-index: -1 !important;
    }

    .adm-brand {
        width: auto !important;
        min-width: 190px !important;
        max-width: 230px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 14px 8px 4px !important;
        margin: 0 !important;
        border-bottom: 0 !important;
        border-right: 1px solid rgba(255,255,255,.24) !important;
        flex-shrink: 0 !important;
    }

    .adm-brand-icon {
        margin: 0 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.18) !important;
        border: 1px solid rgba(255,255,255,.28) !important;
    }

    .adm-brand h2,
    .adm-brand p {
        color: #fff !important;
    }

    .adm-brand p {
        opacity: .78 !important;
    }

    .adm-nav {
        flex: 1 !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    .adm-nav::-webkit-scrollbar { display: none !important; }

    .adm-nav a,
    .adm-logout a {
        height: 46px !important;
        min-width: max-content !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        border-radius: 17px !important;
        color: rgba(255,255,255,.92) !important;
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .adm-nav a:hover,
    .adm-nav a.active {
        color: #0b2f70 !important;
        background: #fff !important;
        transform: translateY(-2px) !important;
    }

    .adm-nav .nav-icon {
        background: rgba(255,255,255,.16) !important;
        color: inherit !important;
        border: 1px solid rgba(255,255,255,.14) !important;
    }

    .adm-logout {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        flex-shrink: 0 !important;
    }

    .adm-logout a {
        background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
        color: #fff !important;
        border-color: rgba(255,255,255,.15) !important;
    }

    .adm-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 18px 22px 34px !important;
        min-height: calc(100vh - 110px) !important;
    }

    .mobile-menu-btn,
    .mobile-overlay {
        display: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .adm-brand { min-width: 160px !important; max-width: 180px !important; }
    .adm-brand p { display: none !important; }
    .adm-nav a,
    .adm-logout a { padding: 8px 10px !important; font-size: .78rem !important; }
}

@media (min-width: 769px) and (max-width: 980px) {
    .adm-nav a { width: 46px !important; min-width: 46px !important; padding: 8px !important; font-size: 0 !important; }
    .adm-nav a .nav-icon { font-size: .9rem !important; }
    .adm-brand h2 { font-size: .82rem !important; }
}

/* =========================================================
   RESTORE LEFT SIDEBAR + WHITE SIDEBAR FINAL OVERRIDE
   Added: 2026-05-12
   Request: U/header style বাদ দিয়ে আগের মতো বাম পাশের sidebar,
            sidebar color সাদা রাখা।
   ========================================================= */
:root {
    --sidebar-w: 252px !important;
}

@media (min-width: 769px) {
    :root {
        --sidebar-w: 252px !important;
        --u-nav-h: 0px !important;
        --u-nav-top: 0px !important;
        --u-nav-side: 0px !important;
    }

    body,
    body:has(.adm-sidebar) {
        padding-top: 0 !important;
        background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 52%, #eef6ff 100%) !important;
    }

    .dashboard-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding-top: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    .dashboard-layout::before {
        content: '' !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--sidebar-w) !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        border-right: 1px solid #d8e6ff !important;
        box-shadow: 12px 0 36px rgba(37, 99, 235, .08) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    aside.sidebar,
    .sidebar,
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
        max-width: var(--sidebar-w) !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 16px 12px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: #0f172a !important;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 58%, #eff6ff 100%) !important;
        border: 0 !important;
        border-right: 1px solid #d8e6ff !important;
        border-radius: 0 !important;
        box-shadow: 12px 0 36px rgba(37, 99, 235, .10) !important;
        transform: none !important;
        z-index: 1000 !important;
        scrollbar-width: thin !important;
    }

    aside.sidebar::before,
    .sidebar::before,
    #sidebar::before,
    aside.sidebar::after,
    .sidebar::after,
    #sidebar::after {
        display: none !important;
        content: none !important;
    }

    .sidebar-brand,
    #sidebar .sidebar-brand {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 64px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 10px !important;
        margin: 0 0 4px 0 !important;
        background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
        border: 1px solid #d8e6ff !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 26px rgba(37, 99, 235, .08) !important;
        flex-shrink: 0 !important;
    }

    .brand-logo,
    .sidebar .brand-logo,
    #sidebar .brand-logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 15px !important;
        background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
        color: #ffffff !important;
        border: 1px solid rgba(37, 99, 235, .25) !important;
        box-shadow: 0 12px 24px rgba(37, 99, 235, .18) !important;
    }

    .brand-name,
    .sidebar .brand-name,
    #sidebar .brand-name {
        color: #0f172a !important;
        font-size: .98rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .brand-tagline,
    .sidebar .brand-tagline,
    #sidebar .brand-tagline {
        display: block !important;
        color: #64748b !important;
        font-size: .72rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        opacity: 1 !important;
    }

    .sidebar-nav,
    #sidebar .sidebar-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }

    .sidebar-section-label,
    .nav-group-label,
    .sidebar .nav-group-label,
    #sidebar .nav-group-label {
        display: block !important;
        width: 100% !important;
        margin: 10px 4px 3px !important;
        padding: 0 !important;
        color: #1d4ed8 !important;
        background: transparent !important;
        border: 0 !important;
        font-size: .72rem !important;
        font-weight: 800 !important;
        letter-spacing: .02em !important;
        opacity: .95 !important;
    }

    .sidebar .nav-item,
    #sidebar .nav-item,
    .nav-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 43px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        padding: 9px 10px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        color: #334155 !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
        transform: none !important;
        white-space: normal !important;
        flex-shrink: 0 !important;
    }

    .sidebar .nav-item:hover,
    #sidebar .nav-item:hover,
    .nav-item:hover {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #bfdbfe !important;
        transform: translateX(3px) !important;
        box-shadow: 0 8px 20px rgba(37, 99, 235, .08) !important;
    }

    .sidebar .nav-item.active,
    #sidebar .nav-item.active,
    .nav-item.active,
    .sidebar .nav-item.active:hover,
    #sidebar .nav-item.active:hover,
    .nav-item.active:hover {
        background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
        transform: translateX(3px) !important;
        box-shadow: 0 12px 28px rgba(37, 99, 235, .22) !important;
    }

    .sidebar .nav-icon,
    #sidebar .nav-icon,
    .nav-icon {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        border-radius: 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border: 1px solid #d8e6ff !important;
        font-size: .95rem !important;
    }

    .sidebar .nav-item.active .nav-icon,
    #sidebar .nav-item.active .nav-icon,
    .nav-item.active .nav-icon {
        background: rgba(255,255,255,.20) !important;
        color: #ffffff !important;
        border-color: rgba(255,255,255,.25) !important;
    }

    .sidebar .nav-text,
    #sidebar .nav-text,
    .nav-text {
        display: inline !important;
        color: inherit !important;
        font-size: .88rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .nav-item-wallet {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #bfdbfe !important;
        box-shadow: none !important;
    }

    .nav-item-logout {
        background: #fff1f2 !important;
        color: #dc2626 !important;
        border-color: #fecdd3 !important;
        box-shadow: none !important;
    }

    .nav-item-logout:hover {
        background: #ffe4e6 !important;
        color: #b91c1c !important;
    }

    .sb-user {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        margin: 10px 0 4px !important;
        padding: 9px 10px !important;
        border-radius: 15px !important;
        background: #f8fbff !important;
        border: 1px solid #d8e6ff !important;
        color: #0f172a !important;
        box-shadow: none !important;
    }

    .sb-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 13px !important;
        background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
        color: #ffffff !important;
        border: 0 !important;
        font-size: .86rem !important;
    }

    .sb-uname {
        display: block !important;
        max-width: 165px !important;
        color: #0f172a !important;
        font-size: .82rem !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .sb-umobile {
        display: block !important;
        color: #64748b !important;
        font-size: .70rem !important;
        opacity: 1 !important;
    }

    .main-shell {
        position: relative !important;
        margin-left: var(--sidebar-w) !important;
        width: calc(100vw - var(--sidebar-w)) !important;
        max-width: calc(100vw - var(--sidebar-w)) !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .topbar {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 14px 14px 0 !important;
        border-radius: 20px !important;
        background: rgba(255,255,255,.94) !important;
        border: 1px solid #d8e6ff !important;
        box-shadow: 0 12px 32px rgba(37, 99, 235, .08) !important;
        z-index: 850 !important;
    }

    .content-area {
        padding: 20px 18px 38px !important;
    }

    .menu-toggle {
        display: none !important;
    }

    .bottom-nav {
        display: none !important;
    }

    .sidebar-overlay,
    body.sidebar-open .sidebar-overlay {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.sidebar-open {
        overflow: auto !important;
    }
}

/* Admin panel sidebar: same left-side white sidebar on desktop */
@media (min-width: 769px) {
    body:has(.adm-sidebar) {
        display: block !important;
        padding-top: 0 !important;
    }

    .adm-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
        max-width: var(--sidebar-w) !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: #0f172a !important;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 58%, #eff6ff 100%) !important;
        border: 0 !important;
        border-right: 1px solid #d8e6ff !important;
        border-radius: 0 !important;
        box-shadow: 12px 0 36px rgba(37, 99, 235, .10) !important;
        z-index: 1200 !important;
    }

    .adm-sidebar::after {
        display: none !important;
        content: none !important;
    }

    .adm-brand {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 10px !important;
        margin: 0 0 4px 0 !important;
        background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
        border: 1px solid #d8e6ff !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 26px rgba(37, 99, 235, .08) !important;
        flex-shrink: 0 !important;
    }

    .adm-brand-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 15px !important;
        background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
        color: #ffffff !important;
        border: 1px solid rgba(37,99,235,.22) !important;
        box-shadow: 0 12px 24px rgba(37,99,235,.18) !important;
    }

    .adm-brand h2,
    .adm-brand p {
        color: #0f172a !important;
    }

    .adm-brand p {
        color: #64748b !important;
        opacity: 1 !important;
    }

    .adm-nav {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .adm-nav a,
    .adm-logout a {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 43px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        padding: 9px 10px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        color: #334155 !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        white-space: normal !important;
        flex-shrink: 0 !important;
    }

    .adm-nav a:hover {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #bfdbfe !important;
        transform: translateX(3px) !important;
    }

    .adm-nav a.active {
        background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
        box-shadow: 0 12px 28px rgba(37,99,235,.22) !important;
        transform: translateX(3px) !important;
    }

    .adm-nav .nav-icon {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border: 1px solid #d8e6ff !important;
    }

    .adm-nav a.active .nav-icon {
        background: rgba(255,255,255,.20) !important;
        color: #ffffff !important;
        border-color: rgba(255,255,255,.25) !important;
    }

    .adm-logout {
        padding: 0 !important;
        margin: 8px 0 0 !important;
        border: 0 !important;
    }

    .adm-logout a {
        background: #fff1f2 !important;
        color: #dc2626 !important;
        border-color: #fecdd3 !important;
    }

    .adm-main {
        margin-left: var(--sidebar-w) !important;
        width: calc(100vw - var(--sidebar-w)) !important;
        max-width: calc(100vw - var(--sidebar-w)) !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 18px 22px 34px !important;
        overflow-x: hidden !important;
    }

    .mobile-menu-btn,
    .mobile-overlay {
        display: none !important;
    }
}


/* WALLET PAGE HERO FIX: keep wallet guide background clean, not blue */
.wallet-wrap .wallet-hero {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #0f172a !important;
}
.wallet-wrap .wallet-hero::before,
.wallet-wrap .wallet-hero::after {
    display: none !important;
    content: none !important;
}


/* FINAL FIX: remove profile icon from header and keep mobile header text inside bar */
.topbar-user,
.topbar-avatar {
    display: none !important;
}

.topbar {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.topbar > div {
    min-width: 0 !important;
    overflow: hidden !important;
}

.topbar-title,
.topbar-subtitle {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.menu-toggle,
.theme-toggle,
.topbar-balance {
    flex: 0 0 auto !important;
}

@media (max-width: 640px) {
    .topbar {
        min-height: 58px !important;
        height: 58px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .topbar-title {
        font-size: .98rem !important;
        line-height: 1.15 !important;
    }

    .topbar-subtitle {
        display: none !important;
    }
}