:root{
  --brand-red:#f20000;
  --brand-red-dark:#c90000;
  --brand-blue:#00378b;
  --brand-blue-dark:#00245c;
  --brand-gray:#64748b;
  --bg:#f8f9fa;
  --card:#fff;
  --card-bg:#fff;
  --border:#e2e8f0;
  --text:#2d3748;
  --text-light:#64748b;
  --input-bg:#fff;
  --input-border:#cbd5e1;
  --calc-bg:#f8fafc;
  --shadow-sm:0 4px 8px -4px rgba(15,35,70,.12);
  --shadow-md:0 12px 30px -18px rgba(0,55,139,.28);
  --shadow-lg:0 22px 45px -24px rgba(0,55,139,.34);
  --radius:16px;
  --radius-sm:10px;
}
[data-theme="dark"]{
  --bg:#0f172a;
  --card:#1e293b;
  --card-bg:#1e293b;
  --border:#334155;
  --text:#f8fafc;
  --text-light:#cbd5e1;
  --input-bg:#0f172a;
  --input-border:#475569;
  --calc-bg:#162033;
}
html,body{margin:0;min-height:100%;background:var(--bg)!important}
.bill-engine{padding:14px 0 30px!important;color:var(--text)!important;font-size:14px}
.bill-engine main{display:block}

/* Primary water/electricity switch */
.main-tabs-wrap{position:sticky;top:0;z-index:30;max-width:none!important;margin:0!important;padding:10px 20px!important;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(15px);border-bottom:1px solid color-mix(in srgb,var(--border) 78%,transparent)}
.main-tabs{max-width:1160px;margin:0 auto 0!important;display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
.main-tab{min-height:58px;border:1px solid var(--border)!important;border-radius:14px!important;background:var(--card)!important;color:var(--text)!important;padding:13px 18px!important;font-family:inherit;font-size:15px!important;font-weight:800;cursor:pointer;box-shadow:var(--shadow-sm)!important;transition:all .25s ease!important}
.main-tab:hover{border-color:color-mix(in srgb,var(--brand-blue) 45%,var(--border))!important;transform:translateY(-1px)}
.main-tab.active{background:linear-gradient(135deg,var(--brand-blue),#0757b5)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 14px 28px -14px rgba(0,55,139,.72)!important}
.main-tab .icon{font-size:20px!important;margin-inline-end:8px!important;margin-left:0!important}
.bill-engine .bill-svg-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;color:currentColor;vertical-align:middle}
.bill-engine .bill-svg-icon svg{display:block;width:100%;height:100%;overflow:visible}
.bill-engine .main-tab .bill-svg-icon{width:22px;height:22px;flex-basis:22px;margin-inline-end:9px!important}
.bill-engine .sub-tab .bill-svg-icon{width:18px;height:18px;flex-basis:18px;color:var(--brand-blue)}
.bill-engine .sub-tab.active .bill-svg-icon{color:#fff}
.bill-engine .card-hdr > .bill-svg-icon--inline{color:var(--brand-blue);margin-inline-end:2px}
.bill-engine .legal-row .bill-svg-icon--inline{color:var(--brand-blue);margin-inline-end:7px}

/* Account-type navigation */
.bill-engine .sub-tabs-wrap{max-width:1160px!important;margin:14px auto 0!important;padding:0!important}
#section-water .sub-tabs-wrap{margin-top:14px!important}
.bill-engine .sub-tabs{display:flex;gap:6px!important;margin:0 0 18px!important;border:1px solid var(--border);border-radius:14px!important;padding:6px!important;background:var(--card)!important;box-shadow:var(--shadow-sm)!important}
.bill-engine .sub-tab{min-height:45px;border-radius:10px!important;color:var(--text-light)!important;padding:11px 14px!important;font-size:13px!important;display:flex;justify-content:center;align-items:center;gap:6px}
.bill-engine .sub-tab:hover{background:color-mix(in srgb,var(--brand-blue) 7%,var(--card))!important;color:var(--brand-blue)!important}
.bill-engine .sub-tab.active{background:linear-gradient(135deg,var(--brand-red),#d90000)!important;color:#fff!important;box-shadow:0 10px 22px -13px rgba(242,0,0,.75)!important}
.bill-engine .sub-tab .icon{font-size:16px!important;margin:0!important}

.bill-engine .container{max-width:1160px!important;padding:0 0 28px!important}

/* Premium site cards */
.bill-engine .card{margin-bottom:18px!important;border:1px solid var(--border);border-radius:16px!important;background:var(--card)!important;box-shadow:var(--shadow-md)!important;overflow:hidden;transition:all .25s ease!important}
.bill-engine .card:hover{box-shadow:var(--shadow-lg)!important;border-color:color-mix(in srgb,var(--brand-blue) 18%,var(--border));transform:translateY(-1px)}
.bill-engine .card-hdr{min-height:60px;padding:16px 20px!important;background:var(--card)!important;color:var(--text)!important;border-bottom:1px solid var(--border);font-size:15px!important;font-weight:800;position:relative}
.bill-engine .card-hdr:before{content:"";display:block;width:4px;height:24px;border-radius:4px;background:linear-gradient(180deg,var(--brand-red) 0 42%,var(--brand-blue) 42% 100%)}
.bill-engine .card-hdr .num{width:30px!important;height:30px!important;background:color-mix(in srgb,var(--brand-blue) 10%,var(--card))!important;color:var(--brand-blue);border-radius:9px!important;font-size:12px!important}
.bill-engine .card-hdr .badge{margin-inline-start:auto;background:color-mix(in srgb,var(--brand-red) 9%,var(--card))!important;color:var(--brand-red)!important;border:1px solid color-mix(in srgb,var(--brand-red) 18%,transparent);padding:4px 10px!important}
.bill-engine .card-body{padding:22px!important}

/* Inputs */
.bill-engine .grid-2{gap:22px!important}
.bill-engine .grid-3{gap:16px!important}
.bill-engine .inp-group{display:flex!important;flex-direction:column!important;gap:7px!important;min-width:0!important}
.bill-engine .inp-group label,.bill-engine .form-row label{color:var(--text)!important;font-size:12px!important;font-weight:700!important;line-height:1.65}
.bill-engine .form-row{gap:9px 14px!important;margin-bottom:13px!important}
.bill-engine input:not([type="checkbox"]),.bill-engine select{width:100%;min-height:44px;padding:10px 12px!important;border:1px solid var(--input-border)!important;border-radius:10px!important;background:var(--input-bg)!important;color:var(--text)!important;font:700 13px/1.4 inherit!important;box-shadow:0 1px 2px rgba(15,23,42,.025);transition:border-color .2s,box-shadow .2s,background .2s!important}
.bill-engine input:not([type="checkbox"]):hover,.bill-engine select:hover{border-color:color-mix(in srgb,var(--brand-blue) 42%,var(--input-border))!important}
.bill-engine input:not([type="checkbox"]):focus,.bill-engine select:focus{outline:0!important;border-color:var(--brand-blue)!important;box-shadow:0 0 0 4px rgba(0,55,139,.11)!important;background:var(--card)!important}
.bill-engine select{cursor:pointer}
.bill-engine .chk{min-height:44px;padding:8px 11px;border:1px solid var(--border);border-radius:10px;background:var(--calc-bg)}
.bill-engine .chk input[type="checkbox"]{width:18px;height:18px;accent-color:var(--brand-blue)}
.bill-engine .section-divider{margin:18px 0 12px!important;padding-bottom:8px!important;border-bottom:1px solid var(--border)!important;color:var(--brand-blue)!important;font-size:12px!important;font-weight:800!important}
.bill-engine .tou-row input.peak{border-color:color-mix(in srgb,var(--peak-color) 55%,var(--input-border))!important}
.bill-engine .tou-row input.mid{border-color:color-mix(in srgb,var(--mid-color) 55%,var(--input-border))!important}
.bill-engine .tou-row input.off{border-color:color-mix(in srgb,var(--off-color) 55%,var(--input-border))!important}

/* Calculated-value cards */
.bill-engine .calc-grid{gap:12px!important}
.bill-engine .calc-item{min-height:86px;padding:14px 15px!important;border:1px solid var(--border);border-inline-start:4px solid var(--brand-blue)!important;border-right:1px solid var(--border)!important;border-radius:12px!important;background:var(--calc-bg)!important;display:flex;flex-direction:column;justify-content:center}
.bill-engine .calc-item .label{font-size:11px!important;color:var(--text-light)!important;margin-bottom:5px!important}
.bill-engine .calc-item .value{font-size:17px!important;color:var(--brand-blue)!important;font-weight:800!important}
.bill-engine .calc-item.peak{border-inline-start-color:var(--peak-color)!important}.bill-engine .calc-item.peak .value{color:var(--peak-color)!important}
.bill-engine .calc-item.mid{border-inline-start-color:var(--mid-color)!important}.bill-engine .calc-item.mid .value{color:#b45309!important}
.bill-engine .calc-item.off{border-inline-start-color:var(--off-color)!important}.bill-engine .calc-item.off .value{color:#15803d!important}

/* Tables */
.bill-engine .table-wrap{margin:0!important;padding:0!important;border:1px solid var(--border);border-radius:12px;overflow:auto}
.bill-engine table{font-size:12px!important;background:var(--card)}
.bill-engine thead th,.bill-engine .result-table th{height:46px;padding:11px 10px!important;background:color-mix(in srgb,var(--brand-blue) 7%,var(--card))!important;color:var(--brand-blue)!important;border-bottom:1px solid color-mix(in srgb,var(--brand-blue) 24%,var(--border))!important;font-weight:800!important}
.bill-engine tbody td,.bill-engine .result-table td{padding:11px 10px!important;border-bottom:1px solid var(--border)!important;color:var(--text)!important}
.bill-engine tbody tr:nth-child(even){background:var(--calc-bg)!important}
.bill-engine tbody tr:hover{background:color-mix(in srgb,var(--brand-blue) 6%,var(--card))!important}
.bill-engine .result-table tr:last-child td{color:var(--brand-blue)!important;background:color-mix(in srgb,var(--brand-blue) 5%,var(--card));font-size:14px!important}
.bill-engine .chart-data-table thead th{box-shadow:0 2px 0 color-mix(in srgb,var(--brand-blue) 28%,transparent)!important}

/* Bill summary */
.bill-engine .summary-list{gap:0!important;border:1px solid var(--border);border-radius:13px!important;background:var(--card)!important}
.bill-engine .summary-item{min-height:55px;padding:12px 16px!important;background:var(--card)!important;border-bottom:1px solid var(--border);font-size:13px!important}
.bill-engine .summary-item:last-child{border-bottom:0}
.bill-engine .summary-item .name{color:var(--text)!important}
.bill-engine .summary-item .name small{color:var(--text-light)!important}
.bill-engine .summary-item .amount{color:var(--brand-blue)!important;font-weight:800!important}
.bill-engine .summary-item.final{padding:17px 18px!important;background:linear-gradient(135deg,var(--brand-blue),#0757b5)!important;color:#fff!important;border:0}
.bill-engine .summary-item.final .name,.bill-engine .summary-item.final .amount{color:#fff!important}
.bill-engine .summary-item.toman{background:color-mix(in srgb,var(--brand-red) 6%,var(--card))!important;border-top:1px solid color-mix(in srgb,var(--brand-red) 18%,var(--border))!important}
.bill-engine .summary-item.toman .name,.bill-engine .summary-item.toman .amount{color:var(--brand-red-dark)!important}
.bill-engine .legal-row{gap:10px!important;margin-top:12px!important;padding:12px 14px!important;border:1px solid color-mix(in srgb,var(--brand-blue) 14%,var(--border));border-radius:11px!important;background:color-mix(in srgb,var(--brand-blue) 5%,var(--card))!important}
.bill-engine .note-box{margin-top:12px!important;padding:12px 14px!important;border:1px solid color-mix(in srgb,var(--brand-blue) 13%,var(--border));border-radius:11px!important;background:color-mix(in srgb,var(--brand-blue) 5%,var(--card))!important;color:var(--text-light)!important}

/* Charts and export actions */
.bill-engine .chart-wrap{padding:12px!important;border:1px solid var(--border);border-radius:13px;background:var(--card)}
.bill-engine .chart-controls{padding:12px 14px!important;border:1px solid var(--border);border-radius:11px!important;background:var(--calc-bg)!important}
.bill-engine button[id*="export"]{min-height:42px!important;border:0!important;border-radius:10px!important;padding:10px 17px!important;background:var(--brand-blue)!important;color:#fff!important;font:800 12px/1.4 inherit!important;box-shadow:0 9px 20px -12px rgba(0,55,139,.8);transition:.2s!important}
.bill-engine button[id*="export"]:hover{transform:translateY(-1px);filter:brightness(1.08)}
.bill-engine #w-export-jpeg{background:var(--brand-red)!important}

.engine-source-note{max-width:1120px;margin:18px auto 0;padding:14px 18px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text-light);font-size:12px;line-height:1.8;box-shadow:var(--shadow-sm)}
.engine-source-note strong{color:var(--brand-blue)}
.engine-source-note p{display:inline;margin:0 8px}
.bill-engine--en{direction:ltr}
.bill-engine--en input,.bill-engine--en select{direction:ltr;text-align:left}
.bill-engine--en .result-table,.bill-engine--en table{direction:ltr;text-align:left}

@media(max-width:900px){
  .bill-engine{padding-top:8px!important}
  .main-tabs-wrap{padding:8px 12px!important}
  .bill-engine .sub-tabs-wrap,.bill-engine .container{padding-inline:12px!important}
  .bill-engine .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  .main-tab{min-height:50px;padding:10px 8px!important}
  .bill-engine .sub-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;overflow:visible!important}
  .bill-engine .sub-tab{width:auto!important;min-width:0!important;min-height:48px;white-space:normal;text-align:center;line-height:1.5}
  .bill-engine #section-elec .sub-tab:last-child{grid-column:1/-1}
  .bill-engine .grid-2,.bill-engine .grid-3{grid-template-columns:1fr!important}
  .bill-engine .card-body{padding:16px!important}
  .bill-engine .card-hdr{padding:14px 16px!important}
  .bill-engine .form-row{grid-template-columns:1fr!important;gap:6px!important}
  .bill-engine .container,.bill-engine .sub-tabs-wrap{padding-inline:8px!important}
  .engine-source-note{margin-inline:8px}
}
@media print{.bill-engine .card{box-shadow:none!important}.main-tabs-wrap{position:static}.engine-source-note{display:none}}