:root{
  --bg:#f8fafc; --bg2:#ffffff; --muted:#64748b;
  --primary:#eab308; --accent:#f59e0b; --success:#34D399; --danger:#F87171;
  --radius:1rem; --pad:1.5rem; --maxw:68.75rem;
}
[dir="rtl"] body{background:linear-gradient(to bottom, #fef3c7 0%, #fffbeb 15%, #ffffff 35%); color:#1e293b; font-family:'Vazirmatn', sans-serif; min-height:100vh;}
[dir="rtl"][data-page="electricity-peak"] body{background:#f1f5f9; color:#1e293b;}
[dir="rtl"][data-page="electricity-tariff"] body{background:#f1f5f9; color:#1e293b;}
.container{max-width:var(--maxw); margin-inline:auto;}
.page-title{font-weight:800; font-size:clamp(1.375rem,3.4vw,2.25rem); text-align:center; margin:1.25rem 0 1.75rem;}
.card{background:var(--bg2); border:.0625rem solid #e2e8f0; border-radius:var(--radius);
      padding:var(--pad); box-shadow:0 .25rem 1rem rgba(0,0,0,.08); min-height:20rem; transition: all 0.3s ease;}
.card:hover{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.12); transform:translateY(-0.25rem);}
.card h3{margin:0 0 .5rem; font-weight:800; color:#0f172a;}
.card p{margin:0; color:var(--muted); font-size:.95rem;}

.title-with-icon{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.cards{display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:1rem;}
@media (min-width:768px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.cards{grid-template-columns:repeat(3,1fr);}}

.chart-canvas{aspect-ratio:16/9; width:100%;}

.actions{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.125rem;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
     padding:.8rem 1.1rem; border-radius:.75rem; font-weight:800; text-decoration:none; transition:.18s transform,.18s box-shadow;}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent)); color:#0B1220; box-shadow:0 .5rem 1.375rem rgba(34,211,238,.25);}
.btn-primary:hover{transform:translateY(-.0625rem); box-shadow:0 .75rem 1.75rem rgba(34,211,238,.32);}
.btn-ghost{background:transparent; color:#fff; border:.0625rem solid rgba(255,255,255,.18);}
.btn-ghost:hover{border-color:var(--primary); color:#c3f5ff;}
.btn:focus{outline:.125rem solid var(--accent); outline-offset:.125rem;}

.footer-note{margin-top:2.25rem; color:var(--muted); text-align:center; font-size:.9rem;}