@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
/* ============================================================================
   Sewak Sawari — Clean modern admin theme (loaded LAST so it overrides views).
   Aesthetic: flat white cards with soft shadows, a refined blue primary, light
   tinted accents, Rubik type — a clean, attractive dashboard look.
   Scope: content, cards, headers, buttons, badges, tables, modals, chrome,
          and the login / privacy pages.
   ============================================================================ */
:root {
    /* Monochrome black / white / grey theme — no colour accents. */
    --t-bg:        #f4f4f5;   /* page background (light grey) */
    --t-surface:   #ffffff;   /* cards / panels */
    --t-text:      #2b2b2b;   /* primary body text (near-black) */
    --t-heading:   #161616;   /* headings / strong text (black) */
    --t-muted:     #6b6b6b;   /* secondary text (grey) */
    --t-line:      #e3e3e3;   /* borders */

    --t-blue:      #1f1f1f;   /* primary action — charcoal/black (was blue) */
    --t-blue-dark: #000000;   /* hover */
    --t-blue-soft: #f0f0f0;   /* soft grey fill (headers / badges) */
    --t-blue-bd:   #d6d6d6;

    --t-red:       #595959;   /* danger / delete — dark grey */
    --t-red-dark:  #3d3d3d;
    --t-red-soft:  #efefef;
    --t-red-bd:    #d6d6d6;
}

/* ---------- base / content ---------- */
.app-content {
    background: var(--t-bg) !important;
    font-family: 'Rubik', 'Noto Sans Devanagari', 'Segoe UI', Arial, sans-serif;
}
.app-content, .card, .btn-crud, table, .rpt-card, .modal-content, .crud-modal,
.app-content .form-control, .app-content .rpt-input, .app-content input, .app-content select, .app-content textarea {
    font-family: 'Rubik', 'Noto Sans Devanagari', 'Segoe UI', Arial, sans-serif;
}
body { color: var(--t-text); }
.app-content h1, .app-content h2, .app-content h3, .app-content h4, .app-content h5, .app-content h6 { color: var(--t-heading); }

/* ---------- cards (flat, soft shadow) ---------- */
.card, .card.shadow-sm {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 16px rgba(52,71,103,.06) !important;
}
/* Card headers — kill the dark gradients, use a soft light-blue with dark-blue text. */
.card-header {
    background: #ffffff !important;
    color: var(--t-heading) !important;
    border-bottom: 1px solid var(--t-line) !important;
    font-weight: 600;
}
.card-header * { color: var(--t-heading) !important; }
/* keep the title icon in primary blue for a clean accent */
.card-header .card-title i, .card-header .card-title .fa, .card-header > i { color: var(--t-blue) !important; }

/* ---------- buttons (crud) ---------- */
.btn-crud { border-radius: 9px !important; font-weight: 600; }
.btn-crud-primary, .btn-crud-success {
    background: var(--t-blue) !important; border: 1px solid var(--t-blue) !important; color: #fff !important;
}
.btn-crud-primary:hover, .btn-crud-success:hover { background: var(--t-blue-dark) !important; border-color: var(--t-blue-dark) !important; }
.btn-crud-danger { background: var(--t-red) !important; border: 1px solid var(--t-red) !important; color: #fff !important; }
.btn-crud-danger:hover { background: var(--t-red-dark) !important; border-color: var(--t-red-dark) !important; }
.btn-crud-outline, .btn-crud-secondary {
    background: #fff !important; color: var(--t-blue) !important; border: 1px solid var(--t-blue-bd) !important;
}
.btn-crud-outline:hover, .btn-crud-secondary:hover { background: var(--t-blue-soft) !important; color: var(--t-blue-dark) !important; }
/* Card-header "Add" button reads on the light header */
.card-header .btn-crud-primary { background: var(--t-blue) !important; color: #fff !important; }
.card-header .btn-crud-primary * { color: #fff !important; }

/* Bootstrap buttons used here and there */
.btn-primary { background: var(--t-blue) !important; border-color: var(--t-blue) !important; }
.btn-danger  { background: var(--t-red)  !important; border-color: var(--t-red)  !important; }

/* ---------- table action icons ---------- */
.tbl-act {
    border: 1px solid var(--t-line) !important; background: #fff !important; color: var(--t-muted) !important;
    border-radius: 8px !important;
}
.tbl-act-edit, .tbl-act-view { color: var(--t-blue) !important; border-color: var(--t-blue-bd) !important; background: var(--t-blue-soft) !important; }
.tbl-act-del { color: var(--t-red) !important; border-color: var(--t-red-bd) !important; background: var(--t-red-soft) !important; }
.tbl-act:hover { filter: brightness(.97); }

/* ---------- badges (soft, blue/red/gray only) ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .3em .65em; }
.badge-info, .badge-primary { background: var(--t-blue-soft) !important; color: var(--t-blue-dark) !important; }
.badge-success { background: var(--t-blue-soft) !important; color: var(--t-blue-dark) !important; }
.badge-danger, .badge-warning, .badge-critical { background: var(--t-red-soft) !important; color: var(--t-red-dark) !important; }
.badge-secondary, .badge-dark { background: #eef0f2 !important; color: #4b5563 !important; }

/* ---------- forms / DataTables ---------- */
.form-ctrl, .form-control, .lc-input { border-radius: 9px; }
.form-ctrl:focus, .form-control:focus { border-color: var(--t-blue) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.10) !important; }
table.dataTable thead th { background: #fafbfc; color: #374151; }
.tbl-wrap, .table-bordered-custom { border-color: var(--t-line) !important; }

/* ---------- modal (crud) ---------- */
.modal-header { background: var(--t-blue-soft) !important; color: var(--t-blue-dark) !important; border-bottom: 1px solid var(--t-blue-bd) !important; }
.modal-content, .crud-modal { border-radius: 14px !important; }

/* ---------- SweetAlert buttons ---------- */
.np-swal-confirm { background: var(--t-blue) !important; color: #fff !important; }
.np-swal-confirm:hover { background: var(--t-blue-dark) !important; }
.np-swal-deny { background: var(--t-red) !important; color: #fff !important; }
.np-swal-cancel { background: #fff !important; color: var(--t-blue) !important; border: 1px solid var(--t-blue-bd) !important; }

/* ============================================================================
   LOGIN / PRIVACY (uses _LoginLayout) — clean, calm, ChatGPT-light card look.
   ============================================================================ */
body { background: var(--t-bg); }

.lc-card, .login-card {
    background: #fff !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(16,24,40,.08) !important;
}
.lc-card .login-card-header, .login-card-header {
    background: var(--t-blue-soft) !important;
    color: var(--t-blue-dark) !important;
    border-bottom: 1px solid var(--t-blue-bd) !important;
    border-radius: 16px 16px 0 0 !important;
    text-shadow: none !important;
}
.login-card-header * { color: var(--t-blue-dark) !important; }

.lc-input {
    background: #fff !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 10px !important;
    color: var(--t-text) !important;
}
.lc-input:focus { border-color: var(--t-blue) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.10) !important; }

.lc-btn, .login-btn {
    background: var(--t-blue) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: none !important;
}
.lc-btn:hover, .login-btn:hover { background: var(--t-blue-dark) !important; }
.lc-links span, .login-forgot { color: var(--t-blue) !important; }

/* Keep Devanagari readable on the new light card */
.lc-card, .login-card, .lc-card * { }

/* ============================================================================
   CHROME — lighten the top header + left sidebar to match the clean theme.
   Text/icons are explicitly darkened so nothing becomes invisible on white.
   ============================================================================ */
/* ---- top header ---- */
.app-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--t-line) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.05) !important;
}
.app-header .hdr-brand .np { color: var(--t-blue-dark) !important; }
.app-header .hdr-brand .en { color: var(--t-text) !important; }
.app-header .hdr-brand .dp { color: var(--t-muted) !important; }
.app-header .h-btn, .app-header .h-toggle, .app-header .mob-menu-btn,
.app-header .hdr-left > i, .app-header .hdr-right > i, .app-header .h-btn i { color: var(--t-text) !important; }
.app-header .hdr-search input { background: var(--t-bg) !important; color: var(--t-text) !important; border: 1px solid var(--t-line) !important; }
.app-header .hdr-search input::placeholder { color: var(--t-muted) !important; }
.app-header .hdr-search-icon { color: var(--t-muted) !important; }
.app-header .lang-btn { color: var(--t-muted) !important; }
.app-header .lang-btn.active { color: var(--t-blue) !important; }
/* user chip (name / email / chevron) — were white for the old dark header */
.app-header .user-info-text .un { color: var(--t-text) !important; }
.app-header .user-info-text .ur { color: var(--t-muted) !important; }
.app-header .user-chev { color: var(--t-muted) !important; }
.app-header .user-chip:hover { background: var(--t-blue-soft) !important; }

/* ---- left sidebar ---- */
.app-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--t-line) !important;
}
.app-sidebar .sb-header { background: #ffffff !important; color: var(--t-text) !important; border-bottom: 1px solid var(--t-line) !important; }
.app-sidebar .sb-header * { color: var(--t-text) !important; }
.app-sidebar .nav-heading { color: var(--t-muted) !important; }
.app-sidebar .sb-divider { background: var(--t-line) !important; border-color: var(--t-line) !important; }
/* menu links */
.app-sidebar a, .app-sidebar .sb-nav a, .app-sidebar li > a { color: #374151 !important; }
.app-sidebar a i, .app-sidebar a .fa, .app-sidebar a svg { color: var(--t-muted) !important; }
.app-sidebar a:hover { background: var(--t-blue-soft) !important; color: var(--t-blue-dark) !important; }
.app-sidebar a:hover i { color: var(--t-blue) !important; }
/* active item */
.app-sidebar a.active, .app-sidebar li.active > a, .app-sidebar a[aria-current="page"],
.app-sidebar .active > a, .app-sidebar a.sb-active {
    background: var(--t-blue-soft) !important; color: var(--t-blue-dark) !important; font-weight: 600;
}
.app-sidebar a.active i, .app-sidebar li.active > a i, .app-sidebar a[aria-current="page"] i { color: var(--t-blue) !important; }

/* ---- footer ---- */
.app-footer { background: #ffffff !important; color: var(--t-muted) !important; border-top: 1px solid var(--t-line) !important; }
.app-footer * { color: var(--t-muted) !important; }

/* ============================================================================
   REVERSE-ON-WHITE — the light theme turned many surfaces white, so any text
   that was WHITE (designed for the old dark backgrounds) is now invisible.
   Rule: on the light chrome + content, white text becomes dark...
   ============================================================================ */
.app-header .text-white,
.app-sidebar .text-white,
.app-content .text-white,
.app-header [style*="color:#fff"], .app-header [style*="color: #fff"],
.app-header [style*="color:white"], .app-header [style*="color: white"],
.app-content .card .text-white, .app-content .card-body .text-white {
    color: var(--t-text) !important;
}
.app-header .text-white i, .app-sidebar .text-white i,
.app-header i.text-white, .app-sidebar i.text-white,
.app-content i.text-white { color: var(--t-text) !important; }

/* ...EXCEPT elements that still carry a real colored background — there white
   text is correct and must stay white (buttons, badges, colored dropdown
   menu-headers, and any bg-* / btn-crud coloured chip). Listed AFTER so they win. */
.btn.text-white, .btn .text-white,
.badge.text-white, .badge .text-white,
.menu-header.text-white, .menu-header .text-white,
.menu-header-content.text-white, .menu-header-content .text-white,
[class*="btn-crud"].text-white, [class*="btn-crud"] .text-white,
[class*="bg-"].text-white, [class*="bg-"] .text-white,
.np-swal-confirm .text-white, .np-swal-deny .text-white,
.btn-crud-primary *, .btn-crud-success *, .btn-crud-danger * {
    color: #fff !important;
}
/* keep the coloured dropdown menu-header (Language / UserActivity / user panel) white on its image/gradient */
.menu-header .text-white i, .menu-header-content .text-white i,
.menu-header i.text-white, .menu-header-content i { color: #fff !important; }

/* ============================================================================
   REPORTS MODULE (reports.css uses .rpt-*) — replace the dark maroon header +
   buttons with the clean light blue / white palette. Loaded after reports.css.
   ============================================================================ */
.rpt-card {
    background: #fff !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.05) !important;
}
/* header: clean white with dark title (Frest style) */
.rpt-head {
    background: #ffffff !important;
    color: var(--t-heading) !important;
    border-bottom: 1px solid var(--t-line) !important;
}
.rpt-head h2, .rpt-head h2 * { color: var(--t-heading) !important; }
.rpt-head h2 i, .rpt-head i { color: var(--t-blue) !important; }
/* back button: white outline on the light header */
.rpt-back, .rpt-btn-ghost {
    background: #fff !important; color: var(--t-blue) !important;
    border: 1px solid var(--t-blue-bd) !important;
}
.rpt-back:hover, .rpt-btn-ghost:hover { background: var(--t-blue-soft) !important; color: var(--t-blue-dark) !important; }
.rpt-back i { color: var(--t-blue) !important; }

/* filter strip + labels */
.rpt-filters { background: #fafbfc !important; border-color: var(--t-line) !important; }
.rpt-field label { color: var(--t-blue-dark) !important; }
.rpt-field .rpt-input:focus, .rpt-field select.rpt-input:focus {
    border-color: var(--t-blue) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.10) !important;
}

/* buttons: Apply = solid blue, Reset = white outline, Print = solid blue (clean + attractive) */
.rpt-btn { border-radius: 9px !important; font-weight: 600; }
.rpt-btn-apply { background: var(--t-blue) !important; color: #fff !important; box-shadow: none !important; }
.rpt-btn-apply:hover { background: var(--t-blue-dark) !important; filter: none !important; }
.rpt-btn-reset { background: #fff !important; color: var(--t-blue) !important; border: 1px solid var(--t-blue-bd) !important; }
.rpt-btn-reset:hover { background: var(--t-blue-soft) !important; }
.rpt-btn-print { background: var(--t-blue) !important; color: #fff !important; box-shadow: none !important; }
.rpt-btn-print:hover { background: var(--t-blue-dark) !important; filter: none !important; }

/* stat chips + table accents → blue instead of crimson */
.rpt-chip { border-color: var(--t-line) !important; }
.rpt-chip .val { color: var(--t-blue-dark) !important; }
table.rpt-table thead th { background: var(--t-blue-soft) !important; color: var(--t-blue-dark) !important; }
.rpt-body .paginate_button.current,
.rpt-body .dataTables_wrapper .paginate_button.current {
    background: var(--t-blue) !important; border-color: var(--t-blue) !important; color: #fff !important;
}
.report-tile:hover { border-color: var(--t-blue) !important; }
.report-tile .rt-go { color: var(--t-blue) !important; }

/* ============================================================================
   CRUD MODAL (crud-modal.js builds .modal-head / .modal-title / .modal-close /
   .modal-footer — NOT .modal-header). Make the header soft light-blue so every
   header in the panel (cards, reports, modals) looks identical.
   ============================================================================ */
.modal-head {
    background: #ffffff !important;
    border-bottom: 1px solid var(--t-line) !important;
}
.modal-head::after { background: transparent !important; }   /* drop the decorative circle on white */
.modal-title, .modal-title * { color: var(--t-heading) !important; }
.modal-title i { color: var(--t-blue) !important; }
.modal-close {
    background: #fff !important; color: var(--t-blue-dark) !important;
    border: 1px solid var(--t-blue-bd) !important;
}
.modal-close:hover { background: #fff !important; color: var(--t-blue) !important; }
.modal-footer { background: #fff !important; border-top: 1px solid var(--t-line) !important; }
/* modal action buttons already use .btn-crud-* (themed above): primary=blue, danger=red, outline=white */

/* ============================================================================
   CLEAN-MODERN REFINEMENTS — flat rounded buttons, soft inputs, modern tables,
   and a solid-blue active sidebar pill (the polished dashboard look).
   ============================================================================ */
/* buttons */
.btn-crud, .rpt-btn, .btn, .lc-btn { border-radius: 6px !important; font-weight: 500 !important; }
.btn-crud-primary, .rpt-btn-apply, .rpt-btn-print, .lc-btn, .login-btn { box-shadow: 0 2px 6px rgba(0,0,0,.18) !important; }
.btn-crud-primary:hover, .rpt-btn-apply:hover, .rpt-btn-print:hover { box-shadow: 0 4px 10px rgba(0,0,0,.25) !important; }
.btn-crud-danger { box-shadow: 0 2px 6px rgba(255,91,92,.22) !important; }

/* headers: roomier + cleaner weight */
.card-header, .rpt-head, .modal-head { padding-top: 15px !important; padding-bottom: 15px !important; font-weight: 600 !important; }

/* inputs */
.app-content .form-control, .app-content .form-ctrl, .rpt-input, .lc-input,
.app-content input[type="text"], .app-content input[type="password"], .app-content input[type="email"],
.app-content input[type="number"], .app-content input[type="date"], .app-content select, .app-content textarea {
    border: 1px solid #dfe3e7 !important; border-radius: 6px !important; color: var(--t-text) !important;
}
.app-content .form-control:focus, .app-content .form-ctrl:focus, .rpt-input:focus,
.app-content select:focus, .app-content textarea:focus, .app-content input:focus {
    border-color: var(--t-blue) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.10) !important;
}

/* tables — clean Frest look */
.app-content table.dataTable thead th, table.rpt-table thead th, .app-content .table thead th {
    background: #f7f9fc !important; color: var(--t-muted) !important;
    text-transform: uppercase; font-size: 11.5px; letter-spacing: .5px; font-weight: 600;
    border-bottom: 1px solid var(--t-line) !important;
}
.app-content table.dataTable tbody td, .app-content .table tbody td { color: var(--t-text) !important; border-color: #f0f2f5 !important; }
.app-content table.dataTable tbody tr:hover td, .app-content .table tbody tr:hover td { background: #f9fbfe !important; }

/* DataTables controls */
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {
    border: 1px solid #dfe3e7 !important; border-radius: 6px !important; padding: 5px 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--t-blue) !important; border: 1px solid var(--t-blue) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--t-blue-soft) !important; border-color: var(--t-blue-bd) !important; color: var(--t-blue-dark) !important;
}

/* sidebar — rounded links + solid-blue active pill (Frest signature) */
.app-sidebar a, .app-sidebar .sb-nav a, .app-sidebar li > a { border-radius: 8px !important; margin: 1px 8px; }
.app-sidebar a.active, .app-sidebar li.active > a, .app-sidebar a[aria-current="page"],
.app-sidebar .active > a, .app-sidebar a.sb-active {
    background: linear-gradient(118deg, #1f1f1f, #444) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.30) !important;
    font-weight: 600;
}
.app-sidebar a.active i, .app-sidebar li.active > a i, .app-sidebar a[aria-current="page"] i,
.app-sidebar .active > a i, .app-sidebar a.sb-active i { color: #ffffff !important; }

/* badges — pill, soft */
.badge { border-radius: 6px; padding: .35em .6em; font-weight: 500; }

/* ============================================================================
   DASHBOARD (Home/Index) — refresh stat cards / KPIs / chips to the Frest blue
   palette (they were crimson / navy / gold for the old gov theme).
   ============================================================================ */
/* page title */
.page-title-bar { border-bottom-color: var(--t-line) !important; }
.page-title-bar::after { background: var(--t-blue) !important; }
.pt-icon { background: linear-gradient(135deg, var(--t-blue), var(--t-blue-dark)) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,.25) !important; }
.pt-text h1 { color: var(--t-heading) !important; }
.breadcrumb a { color: var(--t-blue) !important; }

/* stat cards — white with multi-colour accent + soft-tinted icon (Frest style) */
.stat-card { border-color: var(--t-line) !important; box-shadow: 0 3px 16px rgba(52,71,103,.06) !important; }
.s-val { color: var(--t-heading) !important; }
.stat-card.c1::before { background: linear-gradient(90deg, #1f1f1f, #555) !important; }
.stat-card.c2::before { background: linear-gradient(90deg, #3d3d3d, #707070) !important; }
.stat-card.c3::before { background: linear-gradient(90deg, #5a5a5a, #888) !important; }
.stat-card.c4::before { background: linear-gradient(90deg, #777, #aaa) !important; }
.stat-card.c1 .s-icon { background: var(--t-blue-soft) !important; color: var(--t-blue) !important; }
.stat-card.c2 .s-icon { background: #efefef !important; color: #444 !important; }
.stat-card.c3 .s-icon { background: #efefef !important; color: #444 !important; }
.stat-card.c4 .s-icon { background: #efefef !important; color: #444 !important; }

/* trip period chips (inline crimson → blue) */
.trip-chip { border-color: var(--t-line) !important; border-left-color: var(--t-blue) !important; box-shadow: 0 3px 16px rgba(52,71,103,.05) !important; }
.trip-chip .tc-val { color: var(--t-heading) !important; }
.trip-chip .tc-lbl i { color: var(--t-blue) !important; }

/* top-drivers list (inline crimson → blue) */
.td-rank { background: linear-gradient(135deg, var(--t-blue), var(--t-blue-dark)) !important; }
.td-trips b { color: var(--t-blue) !important; }

/* card-header accent links ("सबै →") — inline crimson → blue */
.card-header a { color: var(--t-blue) !important; }

/* dashboard data-table — same clean look as the rest */
.data-table thead th { background: #f7f9fc !important; color: var(--t-muted) !important; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; border-bottom: 1px solid var(--t-line) !important; }
.data-table tbody td { border-color: #f0f2f5 !important; }
.data-table tbody tr:hover td { background: #f9fbfe !important; }

/* small outline / refresh button */
.btn-sm-out { border-radius: 6px !important; }

/* ============================================================================
   GLOBAL "Loading…" OVERLAY — shown on every screen while data loads
   (hooked to jQuery AJAX + fetch in /js/app-loader.js).
   ============================================================================ */
#app-loader {
    position: fixed; inset: 0; z-index: 99999; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .72);
}
#app-loader.show { display: flex; }
#app-loader .al-spin {
    width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid #dcdcdc; border-top-color: #1f1f1f;
    animation: alspin .7s linear infinite;
}
#app-loader .al-text {
    margin-top: 14px; font-size: 14px; font-weight: 600; letter-spacing: .5px;
    color: #2b2b2b; font-family: 'Rubik', 'Noto Sans Devanagari', sans-serif;
}
@keyframes alspin { to { transform: rotate(360deg); } }

/* ── Header language toggle (English ⇄ नेपाली) ─────────────────────────────── */
.lang-toggle{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--t-blue-soft,#f0f0f0);
  border:1px solid var(--t-blue-bd,#d6d6d6);
  border-radius:999px; padding:3px; margin-right:6px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
.lang-toggle .lang-opt{
  min-width:34px; height:28px; padding:0 12px;
  border:0; background:transparent; cursor:pointer;
  border-radius:999px; font-size:13px; font-weight:700; line-height:1;
  color:var(--t-muted,#6b6b6b);
  transition:all .18s ease;
}
.lang-toggle .lang-opt:hover{ color:var(--t-heading,#161616); }
.lang-toggle .lang-opt.active{
  background:var(--t-blue,#1f1f1f); color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.lang-toggle .lang-opt[data-lang="ne"]{ font-family:'Segoe UI','Mangal',sans-serif; }
@media (max-width:600px){ .lang-toggle .lang-opt{ min-width:30px; padding:0 9px; } }