:root{
            --bg0:#F4F7FF;
            --bg1:#EEF3FF;
            --card:#FFFFFF;
            --stroke: rgba(16,24,40,.12);
            --text:#0B1220;
            --muted:#526073;

            --blue:#1D4ED8;
            --green:#10B981;
            --amber:#F59E0B;
            --red:#EF4444;

            --shadow: 0 18px 50px rgba(15,23,42,.12);
            --shadow2: 0 10px 26px rgba(15,23,42,.08);
        }

        html, body { height: 100%; }
        body{
            font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            background:
                radial-gradient(900px 500px at 12% -10%, rgba(29,78,216,.20), transparent 60%),
                radial-gradient(900px 520px at 110% 10%, rgba(16,185,129,.14), transparent 55%),
                radial-gradient(800px 520px at 60% 120%, rgba(245,158,11,.10), transparent 55%),
                linear-gradient(180deg, var(--bg0), var(--bg1));
            color: var(--text);
            overflow-x: hidden;
        }

        /* HARD remove rounded corners */
        *{ border-radius: 0 !important; }

        /* Top header – lively but clean (inspired by modern sites) */
        .mast{
            margin: 18px 0 14px;
            border: 1px solid var(--stroke);
            background: linear-gradient(90deg, rgba(29,78,216,.10), rgba(16,185,129,.08), rgba(245,158,11,.08));
            box-shadow: var(--shadow);
            overflow: hidden;
            position: relative;
        }
        .mast:before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(600px 220px at 20% 40%, rgba(255,255,255,.55), transparent 55%),
                radial-gradient(520px 220px at 70% 10%, rgba(255,255,255,.40), transparent 55%),
                linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.60));
        }
        .mast-inner{
  position: relative;
            position: relative;
            padding: 14px 16px;
            display:flex;
            align-items:center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .mast h1{
            margin:0;
            font-size: 18px;
            font-weight:500;
            letter-spacing: .2px;
        }
        .mast .pill{
            border: 1px solid rgba(16,24,40,.12);
            background: rgba(255,255,255,.78);
            padding: 7px 10px;
            font-weight:500;
            color: rgba(11,18,32,.86);
        }

        /* Cards */
        .card{
            border: 1px solid var(--stroke);
            background: var(--card);
            box-shadow: var(--shadow2);
        }
        .card-pad{ padding: 14px; }
        .section-gap{ margin-bottom: 16px; }

        /* Chart toolbar */
        .toolbar{
            display:flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items:center;
            justify-content: space-between;
            padding: 12px 12px 0;
        }
        .toolbar .btn-group .btn{
            border: 1px solid rgba(16,24,40,.14);
            background: #fff;
            color: var(--text);
            padding: 8px 12px;
            font-weight:500;
            box-shadow: 0 6px 12px rgba(15,23,42,.06);
        }
        .toolbar .btn-group .btn:hover{ background:#fff; }
        #chartStatus{ color: var(--muted); font-weight:500; }

        /* Tabs */
        .nav-tabs{
            margin: 12px 12px 0;
            border-bottom: 1px solid rgba(16,24,40,.10);
        }
        .nav-tabs>li>a{
            border: 0 !important;
            color: rgba(11,18,32,.65);
            background: transparent !important;
            font-weight:500;
        }
        .nav-tabs>li.active>a,
        .nav-tabs>li.active>a:hover,
        .nav-tabs>li.active>a:focus{
            color: var(--text);
        }
        .tab-content{ padding: 10px 12px 14px; }

        /* Chart area */
        .chart-wrap{
            position: relative;
            height: 380px;
            border: 1px solid rgba(16,24,40,.10);
            background: linear-gradient(180deg, rgba(29,78,216,.06), rgba(255,255,255,1));
            overflow: hidden;
        }
        .chart-wrap:before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(90deg, rgba(29,78,216,.06), transparent 35%),
                linear-gradient(270deg, rgba(16,185,129,.05), transparent 35%);
            pointer-events:none;
        }
        .chart-wrap canvas{ width:100% !important; height:100% !important; }

        /* Loading */
        .loading-overlay{
            position:absolute;
            inset:0;
            background: rgba(255,255,255,.72);
            display:none;
            align-items:center;
            justify-content:center;
            z-index:10;
        }
        .loading-overlay.active{ display:flex; }
        .shimmer{
            width: 78%;
            max-width: 520px;
            height: 120px;
            background: linear-gradient(110deg, rgba(16,24,40,.06) 20%, rgba(16,24,40,.10) 38%, rgba(16,24,40,.06) 55%);
            background-size: 200% 100%;
            animation: shimmer 1.05s linear infinite;
            border: 1px solid rgba(16,24,40,.10);
        }
        @keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

        /* Last record blocks: bring back colors */
        .last-record h3{
            margin: 10px 0 12px;
            font-weight:500;
            font-size: 14px;
        }
        .lr-item{
            padding: 10px 10px;
            border: 1px solid rgba(16,24,40,.10);
            background: rgba(255,255,255,.92);
            margin-bottom: 10px;
            border-left: 6px solid rgba(16,24,40,.12);
        }
        .lr-k{ color: var(--muted); font-weight:500; }
        .lr-v{ font-weight:500; }

        .lr-out{ border-left-color: var(--blue); }
        .lr-out .lr-v{ color: var(--blue); }

        .lr-in{ border-left-color: var(--green); }
        .lr-in .lr-v{ color: var(--green); }

        .lr-hum{ border-left-color: var(--amber); }
        .lr-hum .lr-v{ color: var(--amber); }

        .lr-pre{ border-left-color: var(--red); }
        .lr-pre .lr-v{ color: var(--red); }

        /* Grid */
        .grid-head{
            display:flex;
            align-items:center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }
        .grid-head label{ margin:0; color: var(--muted); font-weight:500; }
        .grid-head .form-control{
            border: 1px solid rgba(16,24,40,.14);
            background: #fff;
            color: var(--text);
            font-weight:500;
        }

        .table{
            color: var(--text);
            background: #fff;
            margin-bottom: 0;
        }
        .table>thead>tr>th{
            border-bottom: 1px solid rgba(16,24,40,.12) !important;
            color: rgba(11,18,32,.78);
            font-weight:500;
        }
        .table>tbody>tr>td{
            border-top: 1px solid rgba(16,24,40,.08) !important;
            font-weight: 700;
        }
        .table-striped>tbody>tr:nth-of-type(odd){ background-color: rgba(15,23,42,.02); }
        .table-bordered{ border: 1px solid rgba(16,24,40,.10); }

        .dataTables_wrapper .dataTables_paginate .paginate_button{
            border: 1px solid rgba(16,24,40,.14) !important;
            background: #fff !important;
            color: var(--text) !important;
            margin: 0 4px;
            font-weight:500;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current{
            background: rgba(29,78,216,.10) !important;
        }
        .dataTables_wrapper .dataTables_info{ color: var(--muted); font-weight:500; }

        /* Row animation */
        .row-fade-in{ animation: rowFade .34s ease-out both; }
        @keyframes rowFade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

        @media (min-width: 1200px){ .container { width: 1180px; } }
        @media (max-width: 991px){ .chart-wrap{ height: 320px; } }
        @media (prefers-reduced-motion: reduce){
            .row-fade-in, .shimmer{ animation: none !important; }
        }

/* v2.4.1 flat clean overrides */
:root { --bg:#f7f9fc; --card:#ffffff; --line:#e7ecf3; --text:#1f2937; }
html, body { background: var(--bg) !important; color: var(--text); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
* { box-shadow:none !important; }
h1,h2,h3,h4,h5, .mast h1 { font-weight:400 !important; letter-spacing:0; }
.mast, .mast-inner, .mast .pill { background:transparent !important; border:0 !important; }
.card, .panel, .mast-inner { border-radius:0 !important; border:1px solid var(--line); background:var(--card) !important; }
.btn, .nav-tabs>li>a { border-radius:0 !important; font-weight:400 !important; }
.nav-tabs { border-bottom:1px solid var(--line); }
.nav-tabs>li>a { border:1px solid var(--line); margin-right:6px; }
.nav-tabs>li.active>a { border-bottom-color:var(--card); }
.table, table.dataTable { border-collapse:separate; border-spacing:0; background:var(--card); }
.table th, .table td { font-weight:400 !important; border-color:var(--line) !important; }
.table thead th { background:transparent !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius:0 !important; font-weight:400 !important; }
.lr-row .lr-k { font-weight:400 !important; }

/* v2.4.13 layout improvements */
.header-flex {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header-stats span {
  margin-left:20px;
  font-weight:600;
}
.chart-container {
  width:100% !important;
}
.main-grid {
  display:block !important;
}

table {
  border-collapse:collapse;
}
table th, table td {
  border-bottom:1px solid #e5e5e5;
}
table th {
  background:#fafafa;
  font-weight:600;
}


/* v2.4.13 - UI refresh */
body { background:#fff !important; }
.wd-container, .container, .main { background:transparent !important; }
.wd-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 14px 6px 14px; }
.wd-header .wd-title { font-size:20px; font-weight:600; margin:0; }
.wd-header .wd-subtitle { margin-top:4px; color:#666; }
.wd-header-latest { flex:1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 18px; padding:2px 0; border:1px solid #e9e9e9; border-radius:10px; background:#fafafa; min-height:34px; }
.wd-latest-item { display:flex; gap:6px; align-items:baseline; padding:6px 10px; white-space:nowrap; }
.wd-lbl { color:#555; font-size:12px; }
.wd-val { font-weight:600; font-size:12px; color:#111; }

.wd-top-single { width:100%; }
.wd-chart-card, .chart-card, #chartCard { width:100% !important; }
#chartWrap, .chart-wrap { width:100% !important; }
#chartWrap canvas { width:100% !important; }

/* Modern table */
table.dataTable { border-collapse:separate !important; border-spacing:0 8px !important; background:transparent !important; }
table.dataTable thead th { background:transparent !important; border-bottom:1px solid #e6e6e6 !important; color:#444; font-weight:600; }
table.dataTable tbody tr { background:#fff !important; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
table.dataTable tbody td { border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; }
table.dataTable tbody tr td:first-child { border-left:1px solid #f0f0f0; border-top-left-radius:10px; border-bottom-left-radius:10px; }
table.dataTable tbody tr td:last-child { border-right:1px solid #f0f0f0; border-top-right-radius:10px; border-bottom-right-radius:10px; }
.dataTables_wrapper .dataTables_filter input { border:1px solid #ddd; border-radius:8px; padding:6px 10px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border:0 !important; background:transparent !important; }


/* v2.4.14 - header latest horizontal + full-width chart */
.mast-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.mast-latest { flex:1; max-width: 520px; border:1px solid #e9e9e9; border-radius:10px; background:#fafafa; padding:10px 12px; }
.mast-latest-title { font-weight:600; margin-bottom:6px; }
.mast-latest-data { font-size:13px; line-height:1.45; }
.mast-latest-data b { font-weight:600; }
.section-gap .card { width:100%; }


/* v2.4.32 - last record in one horizontal line */
.lr-line { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:baseline; }
.lr-item { display:inline-flex; gap:6px; white-space:nowrap; }
.lr-k { color:#555; font-size:12px; }
.lr-v { font-weight:600; font-size:12px; color:#111; }


/* v2.4.32 – force latest values ONE ROW */
.lr-line-single{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:24px;
  align-items:center;
  white-space:nowrap;
}
.lr-line-single .lr{
  font-size:13px;
}

.mast-latest{width:100%!important;max-width:none!important}


/* v2.4.32 – restore metric colors in single row */
.lr-line-single .lr:nth-child(1){border-left:4px solid #9aa0a6;padding-left:8px;}
.lr-line-single .lr:nth-child(2){border-left:4px solid #1a73e8;padding-left:8px;}
.lr-line-single .lr:nth-child(3){border-left:4px solid #0f9d58;padding-left:8px;}
.lr-line-single .lr:nth-child(4){border-left:4px solid #f9ab00;padding-left:8px;}
.lr-line-single .lr:nth-child(5){border-left:4px solid #d93025;padding-left:8px;}




/* v2.4.32 – language switch (top-right flags) */
.wd-lang{
  position:absolute;
  top:6px;
  right:6px;
  display:flex;
  gap:8px;
  align-items:center;
}
.wd-flag{
  width:28px;
  height:18px;
  display:inline-block;
  border-radius:3px;
  border:1px solid #d7dce3;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.wd-flag:hover{ filter:brightness(0.95); }
.wd-flag-sl{ background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2224%22%20viewBox%3D%220%200%2036%2024%22%3E%0A%3Crect%20width%3D%2236%22%20height%3D%228%22%20y%3D%220%22%20fill%3D%22%23ffffff%22/%3E%0A%3Crect%20width%3D%2236%22%20height%3D%228%22%20y%3D%228%22%20fill%3D%22%230052b4%22/%3E%0A%3Crect%20width%3D%2236%22%20height%3D%228%22%20y%3D%2216%22%20fill%3D%22%23d80027%22/%3E%0A%3C/svg%3E'); }
.wd-flag-en{ background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2224%22%20viewBox%3D%220%200%2036%2024%22%3E%0A%3Crect%20width%3D%2236%22%20height%3D%2224%22%20fill%3D%22%23012169%22/%3E%0A%3Cpath%20d%3D%22M0%200%20L36%2024%20M36%200%20L0%2024%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%226%22/%3E%0A%3Cpath%20d%3D%22M0%200%20L36%2024%20M36%200%20L0%2024%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%223%22/%3E%0A%3Cpath%20d%3D%22M18%200%20V24%20M0%2012%20H36%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%2210%22/%3E%0A%3Cpath%20d%3D%22M18%200%20V24%20M0%2012%20H36%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%226%22/%3E%0A%3C/svg%3E'); }