* {
         box-sizing: border-box;
         margin: 0;
         padding: 0
     }

     :root {
         --g1: #0b5244;
         --g2: #147a60;
         --g3: #1fa87e;
         --g4: #4ecba0;
         --g5: #9de5ca;
         --g6: #e2f7f0;
         --g7: #f0fbf7;
         --sidebar: 230px;
         --topbar: 56px;
         --border: #cfe8df;
         --border-light: #e5f4ee;
         --text: #1a2e27;
         --text2: #4a7a67;
         --text3: #7aaa97;
     }

     html,
     body {
         height: 100%
     }

     body {
         font-family: 'DM Sans', sans-serif;
         background: #f3fbf7;
         color: var(--text);
         font-size: 14px;
         line-height: 1.5
     }

     a {
         text-decoration: none;
         color: inherit
     }

     input,
     select,
     textarea,
     button {
         font-family: inherit;
         font-size: 13px
     }

     /* LAYOUT */
     .shell {
         display: flex;
         height: 100vh;
         overflow: hidden
     }

     .sidebar {
         width: var(--sidebar);
         background: #fff;
         border-right: 1px solid var(--border);
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
         overflow-y: auto;
         transition: transform .25s ease;
         z-index: 100
     }

     .main {
         flex: 1;
         display: flex;
         flex-direction: column;
         overflow: hidden;
         min-width: 0
     }

     .content {
         flex: 1;
         overflow-y: auto;
         padding: 20px 22px;
         background: #f3fbf7
     }

     /* SIDEBAR */
     .sb-logo {
         padding: 16px 18px 14px;
         border-bottom: 1px solid var(--border-light);
         display: flex;
         align-items: center;
         gap: 10px
     }

     .sb-logo img {
         height: 38px;
         object-fit: contain;
         max-width: 140px
     }

     .sb-nav {
         padding: 8px 0 16px;
         flex: 1
     }

     .sb-section {
         padding: 12px 18px 4px;
         font-size: 10px;
         font-weight: 600;
         letter-spacing: .08em;
         text-transform: uppercase;
         color: var(--text3)
     }

     .sb-item {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 9px 18px;
         font-size: 13px;
         color: var(--text2);
         transition: all .15s;
         position: relative;
         user-select: none
     }

     .sb-item:hover {
         background: var(--g7);
         color: var(--g1)
     }

     .sb-item.active {
         background: var(--g6);
         color: var(--g1);
         font-weight: 500
     }

     .sb-item.active::before {
         content: '';
         position: absolute;
         left: 0;
         top: 4px;
         bottom: 4px;
         width: 3px;
         background: var(--g2);
         border-radius: 0 3px 3px 0
     }

     .sb-item svg {
         flex-shrink: 0;
         opacity: .7
     }

     .sb-item.active svg {
         opacity: 1
     }

     .sb-badge {
         margin-left: auto;
         background: var(--g6);
         color: var(--g2);
         font-size: 10px;
         padding: 1px 7px;
         border-radius: 10px;
         font-weight: 600
     }

     .sb-user {
         padding: 12px 18px;
         border-top: 1px solid var(--border-light);
         display: flex;
         align-items: center;
         gap: 10px
     }

     .sb-user-info {
         flex: 1;
         min-width: 0
     }

     .sb-user-name {
         font-size: 12px;
         font-weight: 600;
         color: var(--g1);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis
     }

     .sb-user-role {
         font-size: 10px;
         color: var(--text3)
     }

     .sb-overlay {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(7, 50, 38, .35);
         z-index: 99
     }

     /* TOPBAR */
     .topbar {
         height: var(--topbar);
         background: #fff;
         border-bottom: 1px solid var(--border);
         display: flex;
         align-items: center;
         padding: 0 18px;
         gap: 12px;
         flex-shrink: 0;
         position: sticky;
         top: 0;
         z-index: 50
     }

     .hamburger {
         display: none;
         width: 36px;
         height: 36px;
         border-radius: 8px;
         border: 1px solid var(--border);
         background: #fff;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         flex-shrink: 0;
         color: var(--text2)
     }

     .topbar-title {
         font-size: 15px;
         font-weight: 600;
         color: var(--g1);
         white-space: nowrap
     }

     .search-wrap {
         flex: 1;
         max-width: 360px;
         position: relative
     }

     .search-wrap input {
         width: 100%;
         padding: 7px 12px 7px 34px;
         border: 1px solid var(--border);
         border-radius: 20px;
         font-size: 13px;
         background: #f3fbf7;
         color: var(--text);
         outline: none;
         transition: border .15s
     }

     .search-wrap input:focus {
         border-color: var(--g3);
         background: #fff
     }

     .search-ic {
         position: absolute;
         left: 11px;
         top: 50%;
         transform: translateY(-50%);
         color: var(--text3);
         pointer-events: none
     }

     /* Search Results Dropdown */
     .search-results {
         margin-top: 4px;
     }

     .search-section {
         border-bottom: 1px solid var(--border-light);
     }

     .search-section:last-child {
         border-bottom: none;
     }

     .search-section-title {
         padding: 8px 16px;
         font-size: 11px;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         color: var(--text2);
         background: var(--g7);
         border-bottom: 1px solid var(--border-light);
     }

     .search-result-item {
         display: block;
         padding: 12px 16px;
         border-bottom: 1px solid var(--border-light);
         transition: background .15s;
         text-decoration: none;
         color: inherit;
     }

     .search-result-item:hover {
         background: var(--g7);
     }

     .search-result-item:last-child {
         border-bottom: none;
     }

     .search-result-title {
         font-weight: 500;
         color: var(--text);
         margin-bottom: 2px;
     }

     .search-result-desc {
         font-size: 12px;
         color: var(--text2);
         margin-bottom: 4px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }

     .search-result-meta {
         font-size: 11px;
         color: var(--text3);
         text-transform: uppercase;
         letter-spacing: 0.3px;
     }

     .search-no-results {
         padding: 16px;
         text-align: center;
         color: var(--text3);
         font-size: 13px;
     }

     .tb-spacer {
         flex: 1
     }

     .notif-btn {
         width: 34px;
         height: 34px;
         border-radius: 50%;
         border: 1px solid var(--border);
         background: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         position: relative;
         color: var(--text2);
         flex-shrink: 0
     }

     .notif-dot {
         position: absolute;
         top: 4px;
         right: 5px;
         width: 7px;
         height: 7px;
         background: #e24b4a;
         border-radius: 50%;
         border: 2px solid #fff
     }

     .btn {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         padding: 7px 14px;
         border-radius: 7px;
         font-size: 13px;
         font-weight: 500;
         cursor: pointer;
         border: 1px solid var(--border);
         background: #fff;
         color: var(--g1);
         transition: all .15s;
         white-space: nowrap
     }

     .btn:hover {
         background: var(--g7);
         border-color: var(--g4)
     }

     .btn-primary {
         background: var(--g2);
         color: #fff;
         border-color: var(--g2)
     }

     .btn-primary:hover {
         background: var(--g1)
     }

     .btn-sm {
         padding: 5px 10px;
         font-size: 12px
     }

     .btn-danger {
         background: #fff;
         color: #a32d2d;
         border-color: #f7c1c1
     }

     .btn-danger:hover {
         background: #fcebeb
     }

     .btn-lbl {
         display: inline
     }

     /* AVATARS */
     .avatar {
         border-radius: 50%;
         background: var(--g2);
         color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 600;
         flex-shrink: 0;
         font-size: 11px
     }

     .av-sm {
         width: 26px;
         height: 26px
     }

     .av-md {
         width: 32px;
         height: 32px;
         font-size: 12px
     }

     .av-teal {
         background: #3db58a
     }

     .av-mid {
         background: var(--g4);
         color: var(--g1)
     }

     .av-gray {
         background: #c5c3bb
     }

     /* STAT CARDS */
     .stat-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 12px;
         margin-bottom: 18px
     }

     .stat-card {
         background: #fff;
         border: 1px solid var(--border);
         border-radius: 10px;
         padding: 14px 16px;
         position: relative;
         overflow: hidden
     }

     .stat-card::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         height: 3px
     }

     .sc-teal::after {
         background: var(--g2)
     }

     .sc-green::after {
         background: var(--g3)
     }

     .sc-amber::after {
         background: #e49f27
     }

     .sc-blue::after {
         background: #378add
     }

     .stat-label {
         font-size: 10px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: .05em;
         color: var(--text3);
         margin-bottom: 5px
     }

     .stat-val {
         font-size: 26px;
         font-weight: 600;
         color: var(--g1);
         line-height: 1;
         font-family: 'DM Serif Display', serif
     }

     .stat-trend {
         font-size: 11px;
         margin-top: 4px;
         font-weight: 500
     }

     .trend-up {
         color: #0f6e56
     }

     .trend-down {
         color: #a32d2d
     }

     .trend-neutral {
         color: var(--text3)
     }

     /* CARDS */
     .card {
         background: #fff;
         border: 1px solid var(--border);
         border-radius: 10px;
         padding: 16px
     }

     .card-head {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 14px;
         flex-wrap: wrap;
         gap: 6px
     }

     .card-title {
         font-size: 14px;
         font-weight: 600;
         color: var(--g1)
     }

     .card-link {
         font-size: 12px;
         color: var(--g2);
         cursor: pointer;
         font-weight: 500
     }

     .two-col {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 14px;
         margin-bottom: 14px
     }

     .three-col {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 14px;
         margin-bottom: 14px
     }

     /* CHARTS */
     .bar-chart-area {
         height: 140px;
         display: flex;
         align-items: flex-end;
         gap: 4px;
         padding: 0 2px
     }

     .bc-bar {
         flex: 1;
         border-radius: 4px 4px 0 0;
         background: var(--g5);
         cursor: pointer;
         min-height: 4px
     }

     .bc-bar:hover {
         background: var(--g3)
     }

     .bc-bar.hi {
         background: var(--g2)
     }

     .bc-labels {
         display: flex;
         justify-content: space-between;
         padding: 4px 2px 0;
         font-size: 9px;
         color: var(--text3)
     }

     .donut-section {
         display: flex;
         align-items: center;
         gap: 18px;
         flex-wrap: wrap
     }

     .legend-list {
         display: flex;
         flex-direction: column;
         gap: 7px
     }

     .leg-row {
         display: flex;
         align-items: center;
         gap: 7px;
         font-size: 12px;
         color: var(--text2)
     }

     .leg-dot {
         width: 9px;
         height: 9px;
         border-radius: 50%;
         flex-shrink: 0
     }

     .progress-row {
         margin-bottom: 10px
     }

     .prog-head {
         display: flex;
         justify-content: space-between;
         font-size: 12px;
         margin-bottom: 4px;
         color: var(--text2)
     }

     .prog-head span:last-child {
         font-weight: 600;
         color: var(--g1)
     }

     .prog-bar {
         height: 6px;
         background: var(--g6);
         border-radius: 3px;
         overflow: hidden
     }

     .prog-fill {
         height: 100%;
         border-radius: 3px;
         background: var(--g2)
     }

     /* TABLES */
     .table-wrap {
         overflow-x: auto;
         border-radius: 10px;
         border: 1px solid var(--border);
         -webkit-overflow-scrolling: touch
     }

     table {
         width: 100%;
         border-collapse: collapse;
         font-size: 13px;
         background: #fff;
         min-width: 480px
     }

     thead th {
         text-align: left;
         padding: 10px 12px;
         font-size: 10px;
         font-weight: 700;
         letter-spacing: .06em;
         text-transform: uppercase;
         color: var(--text3);
         border-bottom: 1px solid var(--border);
         white-space: nowrap;
         background: #fafdfb
     }

     tbody td {
         padding: 10px 12px;
         border-bottom: 1px solid var(--border-light);
         color: var(--text);
         vertical-align: middle
     }

     tbody tr:last-child td {
         border-bottom: none
     }

     tbody tr:hover td {
         background: var(--g7)
     }

     /* PILLS */
     .pill {
         display: inline-flex;
         align-items: center;
         padding: 2px 8px;
         border-radius: 10px;
         font-size: 11px;
         font-weight: 600;
         white-space: nowrap
     }

     .p-pub {
         background: #d5f2e7;
         color: #0a6645
     }

     .p-unpub {
         background: #fef0d6;
         color: #7a4a05
     }

     .p-draft {
         background: #e6f0fb;
         color: #1555a0
     }

     .p-admin {
         background: #ede8fe;
         color: #3c3489
     }

     .p-mgr {
         background: var(--g6);
         color: var(--g1)
     }

     .p-pdf {
         background: #fce8e8;
         color: #9e2424
     }

     .p-doc {
         background: #e6f0fb;
         color: #1555a0
     }

     .p-xls {
         background: #eaf5d8;
         color: #336010
     }

     .p-img {
         background: #fbe8f4;
         color: #7e1f5d
     }

     .p-arch {
         background: #f2f0e9;
         color: #555350
     }

     .p-sys {
         background: #e8f7f2;
         color: #0b5244
     }

     .p-denied {
         background: #fce8e8;
         color: #9e2424
     }

     .p-failed {
         background: #fce8e8;
         color: #9e2424
     }

     .p-success {
         background: #d5f2e7;
         color: #0a6645
     }

     /* SECTION */
     .sec-head {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 14px;
         flex-wrap: wrap;
         gap: 8px
     }

     .sec-title {
         font-size: 16px;
         font-weight: 700;
         color: var(--g1);
         font-family: 'DM Serif Display', serif
     }

     .filter-bar {
         display: flex;
         gap: 6px;
         margin-bottom: 12px;
         flex-wrap: wrap;
         align-items: center
     }

     .flt {
         padding: 5px 11px;
         border-radius: 16px;
         font-size: 12px;
         font-weight: 500;
         cursor: pointer;
         border: 1px solid var(--border);
         background: #fff;
         color: var(--text2);
         transition: all .15s;
         white-space: nowrap
     }

     .flt.on {
         background: var(--g6);
         border-color: var(--g4);
         color: var(--g1)
     }

     .flt-spacer {
         flex: 1
     }

     .icon-btn {
         width: 30px;
         height: 30px;
         border-radius: 6px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         border: 1px solid var(--border);
         background: #fff;
         color: var(--text3);
         font-size: 13px;
         transition: all .15s;
         flex-shrink: 0
     }

     .icon-btn:hover {
         background: var(--g7);
         color: var(--g1);
         border-color: var(--g4)
     }

     .icon-btn.del:hover {
         background: #fcebeb;
         color: #a32d2d;
         border-color: #f7c1c1
     }

     .row-actions {
         display: flex;
         gap: 4px;
         align-items: center
     }

     .pagination {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-top: 12px;
         font-size: 12px;
         color: var(--text3);
         flex-wrap: wrap;
         gap: 8px
     }

     .page-btns {
         display: flex;
         gap: 3px
     }

     .pag-btn {
         width: 28px;
         height: 28px;
         border-radius: 5px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         border: 1px solid var(--border);
         background: #fff;
         color: var(--text2);
         font-size: 12px
     }

     .pag-btn.cur {
         background: var(--g6);
         color: var(--g1);
         border-color: var(--g4)
     }

     /* FORMS */
     .form-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 12px
     }

     .fg-full {
         grid-column: 1/-1
     }

     .form-group {
         display: flex;
         flex-direction: column;
         gap: 4px
     }

     .form-label {
         font-size: 12px;
         font-weight: 600;
         color: var(--text2)
     }

     .form-label span.req {
         color: #e24b4a
     }

     .form-input,
     .form-select,
     .form-textarea {
         padding: 8px 11px;
         border: 1px solid var(--border);
         border-radius: 7px;
         font-size: 13px;
         background: #fff;
         color: var(--text);
         outline: none;
         transition: border .15s;
         width: 100%
     }

     .form-input:focus,
     .form-select:focus,
     .form-textarea:focus {
         border-color: var(--g3)
     }

     .form-input.is-invalid,
     .form-select.is-invalid {
         border-color: #e24b4a
     }

     .invalid-feedback {
         font-size: 11px;
         color: #a32d2d;
         margin-top: 2px
     }

     .form-textarea {
         resize: vertical;
         min-height: 72px;
         line-height: 1.5
     }

     .upload-zone {
         border: 2px dashed var(--g5);
         border-radius: 10px;
         padding: 24px;
         text-align: center;
         background: var(--g7);
         cursor: pointer;
         transition: all .2s
     }

     .upload-zone:hover {
         border-color: var(--g3);
         background: var(--g6)
     }

     .upload-zone p {
         font-size: 13px;
         color: var(--text3);
         margin-top: 8px
     }

     .upload-zone p strong {
         color: var(--g2)
     }

     /* MODAL */
     .modal-overlay {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(7, 50, 38, .22);
         z-index: 300;
         align-items: center;
         justify-content: center;
         padding: 16px
     }

     .modal-box {
         background: #fff;
         border-radius: 14px;
         padding: 20px;
         border: 1px solid var(--border);
         max-height: 92vh;
         overflow-y: auto;
         box-shadow: 0 8px 32px rgba(11, 82, 68, .14);
         width: 100%;
         max-width: 560px
     }

     .modal-box.wide {
         max-width: 620px
     }

     .modal-head {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 16px
     }

     .modal-title {
         font-size: 15px;
         font-weight: 700;
         color: var(--g1);
         font-family: 'DM Serif Display', serif
     }

     .modal-foot {
         display: flex;
         justify-content: flex-end;
         gap: 8px;
         margin-top: 16px;
         padding-top: 14px;
         border-top: 1px solid var(--border-light);
         flex-wrap: wrap
     }

     /* LOGS */
     .log-entry {
         display: flex;
         gap: 10px;
         padding: 9px 0;
         border-bottom: 1px solid var(--border-light)
     }

     .log-entry:last-child {
         border-bottom: none
     }

     .log-indicator {
         width: 8px;
         height: 8px;
         border-radius: 50%;
         flex-shrink: 0;
         margin-top: 5px
     }

     .li-ok {
         background: var(--g3)
     }

     .li-warn {
         background: #e49f27
     }

     .li-err {
         background: #e24b4a
     }

     .li-sys {
         background: #378add
     }

     .log-body {
         flex: 1;
         min-width: 0
     }

     .log-text {
         font-size: 13px;
         color: var(--text)
     }

     .log-text strong {
         font-weight: 600;
         color: var(--g1)
     }

     .log-meta {
         font-size: 11px;
         color: var(--text3);
         margin-top: 2px
     }

     /* MINI STATS */
     .mini-row {
         display: flex;
         align-items: center;
         padding: 8px 0;
         border-bottom: 1px solid var(--border-light)
     }

     .mini-row:last-child {
         border-bottom: none
     }

     .mini-label {
         font-size: 12px;
         color: var(--text2);
         flex: 1
     }

     .mini-val {
         font-size: 13px;
         font-weight: 600;
         color: var(--g1)
     }

     /* TABS */
     .tab-row {
         display: flex;
         border-bottom: 1px solid var(--border);
         margin-bottom: 14px;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch
     }

     .tab {
         padding: 8px 16px;
         font-size: 13px;
         cursor: pointer;
         color: var(--text3);
         border-bottom: 2px solid transparent;
         margin-bottom: -1px;
         font-weight: 500;
         white-space: nowrap;
         flex-shrink: 0
     }

     .tab.on {
         color: var(--g1);
         border-bottom-color: var(--g2)
     }

     /* BLOG */
     .blog-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 14px;
         margin-bottom: 14px
     }

     .blog-card {
         background: #fff;
         border: 1px solid var(--border);
         border-radius: 10px;
         overflow: hidden;
         display: flex;
         flex-direction: column
     }

     .blog-thumb {
         height: 80px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 11px;
         font-weight: 600;
         color: var(--g1)
     }

     .blog-body {
         padding: 12px;
         flex: 1;
         display: flex;
         flex-direction: column
     }

     .blog-title {
         font-size: 13px;
         font-weight: 700;
         color: var(--g1);
         margin-bottom: 3px;
         line-height: 1.35;
         font-family: 'DM Serif Display', serif
     }

     .blog-meta {
         font-size: 11px;
         color: var(--text3);
         margin-bottom: 5px;
         display: flex;
         align-items: center;
         gap: 5px;
         flex-wrap: wrap
     }

     .blog-excerpt {
         font-size: 12px;
         color: var(--text2);
         line-height: 1.5;
         flex: 1
     }

     .blog-actions {
         display: flex;
         align-items: center;
         gap: 5px;
         margin-top: 8px
     }

     /* EDITOR */
     .editor-toolbar {
         padding: 6px 8px;
         border-bottom: 1px solid var(--border-light);
         display: flex;
         gap: 3px;
         flex-wrap: wrap;
         background: #fafdfb
     }

     .ed-btn {
         padding: 3px 7px;
         border-radius: 4px;
         font-size: 11px;
         cursor: pointer;
         border: 1px solid var(--border);
         background: #fff;
         color: var(--text2);
         font-weight: 600
     }

     /* ARCHIVES */
     .arch-entry {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 10px 0;
         border-bottom: 1px solid var(--border-light)
     }

     .arch-entry:last-child {
         border-bottom: none
     }

     .arch-icon {
         width: 36px;
         height: 36px;
         border-radius: 8px;
         background: var(--g6);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 15px;
         flex-shrink: 0
     }

     .arch-name {
         font-size: 13px;
         font-weight: 600;
         color: var(--text)
     }

     .arch-meta {
         font-size: 11px;
         color: var(--text3);
         margin-top: 1px
     }

     /* ENGAGEMENT */
     .eng-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         margin-bottom: 14px
     }

     .eng-cell {
         text-align: center;
         padding: 10px 8px;
         background: var(--g7);
         border-radius: 8px;
         border: 1px solid var(--border-light)
     }

     .eng-label {
         font-size: 9px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: .05em;
         color: var(--text3);
         margin-bottom: 3px
     }

     .eng-val {
         font-size: 20px;
         font-weight: 700;
         color: var(--g1);
         font-family: 'DM Serif Display', serif
     }

     /* ALERTS */
     .alert {
         padding: 10px 14px;
         border-radius: 8px;
         font-size: 13px;
         margin-bottom: 14px;
         display: flex;
         align-items: flex-start;
         gap: 8px
     }

     .alert-success {
         background: #d5f2e7;
         color: #0a6645;
         border: 1px solid #a8e4c8
     }

     .alert-danger {
         background: #fcebeb;
         color: #a32d2d;
         border: 1px solid #f7c1c1
     }

     .alert-warning {
         background: #fef0d6;
         color: #7a4a05;
         border: 1px solid #f9d88a
     }

     /* SCROLLBAR */
     ::-webkit-scrollbar {
         width: 4px;
         height: 4px
     }

     ::-webkit-scrollbar-track {
         background: transparent
     }

     ::-webkit-scrollbar-thumb {
         background: var(--g5);
         border-radius: 10px
     }

     input[type=checkbox] {
         accent-color: var(--g2);
         width: 14px;
         height: 14px
     }

     /* BOTTOM NAV */
     .bottom-nav {
         display: none;
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         background: #fff;
         border-top: 1px solid var(--border);
         z-index: 50;
         height: 60px;
         padding: 0 4px
     }

     .bn-item {
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 3px;
         cursor: pointer;
         color: var(--text3);
         font-size: 9px;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: .04em;
         padding: 4px 2px;
         border-radius: 8px;
         transition: all .15s;
         position: relative
     }

     .bn-item.active {
         color: var(--g2)
     }

     .bn-item svg {
         opacity: .6
     }

     .bn-item.active svg {
         opacity: 1
     }

     .bn-dot {
         position: absolute;
         top: 6px;
         right: calc(50% - 14px);
         width: 6px;
         height: 6px;
         background: #e24b4a;
         border-radius: 50%;
         border: 1.5px solid #fff
     }

     /* RESPONSIVE */
     @media(max-width:1024px) {
         :root {
             --sidebar: 200px
         }

         .stat-grid {
             grid-template-columns: repeat(2, 1fr)
         }

         .eng-grid {
             grid-template-columns: repeat(2, 1fr)
         }

         .three-col {
             grid-template-columns: 1fr 1fr
         }

         .blog-grid {
             grid-template-columns: 1fr 1fr
         }

         .btn-lbl {
             display: none
         }

         .search-wrap {
             max-width: 220px
         }
     }

     @media(max-width:768px) {
         .shell {
             height: 100vh;
             overflow: hidden
         }

         .sidebar {
             position: fixed;
             top: 0;
             left: 0;
             bottom: 0;
             width: 260px;
             transform: translateX(-100%);
             z-index: 100;
             overflow-y: auto
         }

         .sidebar.open {
             transform: translateX(0)
         }

         .sb-overlay {
             display: block;
             position: fixed;
             inset: 0;
             background: rgba(7, 50, 38, .35);
             z-index: 99;
             opacity: 0;
             pointer-events: none;
             transition: opacity .25s
         }

         .sb-overlay.show {
             opacity: 1;
             pointer-events: auto
         }

         .hamburger {
             display: flex
         }

         .main {
             width: 100%;
             overflow: hidden
         }

         .topbar {
             padding: 0 12px;
             gap: 8px;
             height: 52px
         }

         .topbar-title {
             font-size: 14px;
             max-width: 130px;
             overflow: hidden;
             text-overflow: ellipsis
         }

         .search-wrap {
             display: none
         }

         .tb-spacer {
             flex: 1
         }

         .content {
             padding: 14px;
             padding-bottom: 76px;
             overflow-y: auto
         }

         .stat-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 8px;
             margin-bottom: 12px
         }

         .two-col,
         .three-col {
             grid-template-columns: 1fr;
             gap: 10px
         }

         .blog-grid {
             grid-template-columns: 1fr;
             gap: 10px
         }

         .eng-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 8px
         }

         .form-grid {
             grid-template-columns: 1fr
         }

         .fg-full {
             grid-column: 1
         }

         .stat-val {
             font-size: 22px
         }

         .stat-card {
             padding: 12px 14px
         }

         .card {
             padding: 14px
         }

         .sec-head .btn {
             width: 100%;
             justify-content: center
         }

         .filter-bar {
             flex-wrap: nowrap;
             overflow-x: auto;
             padding-bottom: 4px
         }

         .flt-spacer {
             display: none
         }

         .pagination {
             flex-direction: column;
             align-items: flex-start;
             gap: 6px
         }

         .modal-overlay {
             align-items: flex-end;
             padding: 0
         }

         .modal-box,
         .modal-box.wide {
             max-width: 100%;
             width: 100%;
             border-radius: 18px 18px 0 0;
             max-height: 92vh
         }

         .tab {
             padding: 8px 12px;
             font-size: 12px
         }

         .col-hide-sm {
             display: none !important
         }

         .bottom-nav {
             display: flex
         }

         .btn-lbl {
             display: none
         }
     }

     @media(max-width:480px) {
         .stat-grid {
             grid-template-columns: 1fr 1fr
         }

         .stat-val {
             font-size: 20px
         }

         .eng-grid {
             grid-template-columns: 1fr 1fr
         }

         .col-hide-xs {
             display: none !important
         }
     }