@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

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

:root{
  --bg0:#060810;--bg1:#0c0f1a;--bg2:#121726;--bg3:#181e30;--bg4:#1e2438;
  --border:rgba(255,255,255,0.06);--borderG:rgba(99,179,255,0.2);
  --a1:#4f8ef7;--a2:#9b6cf7;--a3:#06d6a0;--aw:#f59e0b;--ar:#ef4444;--ap:#ec4899;
  --txt:#eef2ff;--txt2:#7885a3;--txt3:#2e3850;
  --r1:8px;--r2:14px;--r3:20px;--r4:28px;
  --font:'Vazirmatn',sans-serif;
  --glow1:0 0 30px rgba(79,142,247,.2);--glow2:0 0 30px rgba(155,108,247,.2);
}
html{font-size:15px}
body{font-family:var(--font);background:var(--bg0);color:var(--txt);direction:rtl;min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--a1),var(--a2));border-radius:99px}

/* ── LOADING SCREEN ── */
#loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  transition:opacity .5s ease, visibility .5s ease;
}
#loader.hidden{opacity:0;visibility:hidden}
.loader-logo{
  font-size:2rem;font-weight:900;
  background:linear-gradient(135deg,var(--a1),var(--a2),var(--a3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:logoPulse 1.5s ease infinite;
}
@keyframes logoPulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.loader-ring{
  width:56px;height:56px;border-radius:50%;
  border:3px solid var(--bg3);
  border-top-color:var(--a1);border-right-color:var(--a2);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-dots{display:flex;gap:7px}
.loader-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--a1);
  animation:dotBounce 1.2s ease infinite;
}
.loader-dot:nth-child(2){background:var(--a2);animation-delay:.2s}
.loader-dot:nth-child(3){background:var(--a3);animation-delay:.4s}
@keyframes dotBounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-10px);opacity:1}}

/* ── WEATHER CANVAS ── */
#weather-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}

/* ── BG ── */
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 10% 5%,rgba(79,142,247,.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 70% at 90% 90%,rgba(155,108,247,.08) 0%,transparent 60%),
    radial-gradient(ellipse 30% 30% at 50% 40%,rgba(6,214,160,.04) 0%,transparent 70%)}

/* ── APP ── */
#app{position:relative;z-index:1;animation:appIn .6s ease both}
@keyframes appIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ════ TOPBAR ════ */
.topbar{
  background:rgba(8,10,18,.88);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:200;
}
.topbar-inner{
  max-width:1460px;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:10px;height:56px;
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.brand-icon{
  width:33px;height:33px;border-radius:9px;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff;
  box-shadow:0 3px 12px rgba(79,142,247,.4);
  transition:transform .2s;
}
.brand:hover .brand-icon{transform:rotate(-8deg) scale(1.1)}
.brand-text{font-size:1.1rem;font-weight:900;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Search */
.search-box{flex:1;max-width:250px;position:relative}
.search-box input{
  width:100%;background:var(--bg3);border:1px solid var(--border);
  border-radius:99px;color:var(--txt);font-family:var(--font);
  padding:7px 36px 7px 14px;font-size:.8rem;transition:all .2s;outline:none;
}
.search-box input:focus{border-color:var(--a1);background:var(--bg4);box-shadow:0 0 0 3px rgba(79,142,247,.12)}
.search-box input::placeholder{color:var(--txt3)}
.s-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--txt3);font-size:.75rem;pointer-events:none}
.search-results{position:absolute;top:calc(100% + 5px);right:0;left:0;background:var(--bg2);
  border:1px solid var(--borderG);border-radius:var(--r2);box-shadow:0 8px 32px rgba(0,0,0,.5);
  z-index:500;overflow:hidden;display:none}
.search-results.open{display:block;animation:srIn .15s ease}
@keyframes srIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.sr-item{display:flex;align-items:center;gap:9px;padding:9px 13px;cursor:pointer;
  transition:background .12s;font-size:.78rem;border-bottom:1px solid var(--border)}
.sr-item:last-child{border:none}
.sr-item:hover{background:var(--bg4)}
.sr-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sr-name{flex:1;font-weight:700}
.sr-date{font-size:.64rem;color:var(--txt2)}
.sr-empty{padding:12px;text-align:center;color:var(--txt2);font-size:.78rem}

/* Clock */
.topbar-clock{
  background:var(--bg3);border:1px solid var(--border);border-radius:99px;
  padding:5px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.clock-time{
  font-size:1.05rem;font-weight:800;letter-spacing:1.5px;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,var(--a1),var(--a3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.clock-sep{color:var(--a1);opacity:.4;animation:blink 1s infinite;font-weight:300;-webkit-text-fill-color:var(--a1)}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:.1}}
.clock-date-mini{font-size:.62rem;color:var(--txt2);line-height:1.3}

/* Analog clock */
.analog-wrap{flex-shrink:0;cursor:pointer;transition:transform .2s}
.analog-wrap:hover{transform:scale(1.05)}
.clock-face{
  width:40px;height:40px;border-radius:50%;
  background:var(--bg3);border:1.5px solid var(--border);
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.4);
}
.clock-face::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(79,142,247,.06),transparent 30%)}
.ch,.cm,.cs{position:absolute;bottom:50%;left:50%;transform-origin:bottom center;border-radius:2px;transition:transform .3s}
.ch{width:2px;height:11px;background:var(--txt);margin-left:-1px}
.cm{width:1.5px;height:14px;background:var(--a1);margin-left:-.75px}
.cs{width:1px;height:17px;background:var(--ar);margin-left:-.5px;transition:none}
.clock-center{position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--a2);top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}

/* Weather */
.weather-badge{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);
  border-radius:99px;padding:4px 12px;font-size:.72rem;color:var(--txt2);flex-shrink:0;transition:all .2s}
.weather-badge:hover{border-color:var(--borderG)}
.temp{font-weight:800;color:var(--a1)}

/* Nav */
.topbar-nav{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:99px;padding:3px;flex-shrink:0}
.nav-btn{background:none;border:none;cursor:pointer;color:var(--txt2);font-family:var(--font);
  padding:5px 13px;border-radius:99px;font-size:.76rem;font-weight:700;transition:all .2s;
  white-space:nowrap;display:flex;align-items:center;gap:5px}
.nav-btn:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.nav-btn.active{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;box-shadow:0 2px 10px rgba(79,142,247,.4)}

.icon-btn{width:33px;height:33px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r1);
  cursor:pointer;color:var(--txt2);display:flex;align-items:center;justify-content:center;
  font-size:.82rem;transition:all .2s;flex-shrink:0}
.icon-btn:hover{background:var(--bg4);color:var(--txt);border-color:var(--borderG)}

/* ════ DATE HERO ════ */
.date-hero{max-width:1460px;margin:0 auto;padding:16px 18px 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dc{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);
  padding:15px 18px;display:flex;align-items:center;gap:13px;
  transition:all .3s;position:relative;overflow:hidden;
  animation:dcIn .5s ease both;
}
.dc:nth-child(1){animation-delay:.1s}.dc:nth-child(2){animation-delay:.2s}.dc:nth-child(3){animation-delay:.3s}
@keyframes dcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.dc::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);pointer-events:none}
.dc:hover{transform:translateY(-2px);border-color:var(--borderG);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.dc-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.dc-icon.sh{background:rgba(79,142,247,.13);color:var(--a1)}
.dc-icon.mi{background:rgba(155,108,247,.13);color:var(--a2)}
.dc-icon.gh{background:rgba(6,214,160,.13);color:var(--a3)}
.dc-label{font-size:.58rem;color:var(--txt3);letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;font-weight:800}
.dc-date{font-size:1.3rem;font-weight:900;line-height:1;letter-spacing:-.5px}
.dc-day{font-size:.72rem;color:var(--txt2);margin-top:2px}
.dc-date.sh{color:var(--a1)}.dc-date.mi{color:var(--a2)}.dc-date.gh{color:var(--a3)}

/* ════ LAYOUT ════ */
.page-wrap{max-width:1460px;margin:14px auto 0;padding:0 18px 40px;display:grid;grid-template-columns:1fr 305px;gap:16px}

/* ════ CALENDAR PANEL ════ */
.cal-panel{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r4);overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.4);animation:panelIn .5s .2s ease both}
@keyframes panelIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.cal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(79,142,247,.05),rgba(155,108,247,.05))}
.cal-title{font-size:1.35rem;font-weight:900;letter-spacing:-.5px}
.cal-sub{font-size:.68rem;color:var(--txt2);margin-top:2px}
.cal-head-right{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

.view-sw{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:99px;padding:3px}
.view-btn{background:none;border:none;cursor:pointer;color:var(--txt2);font-family:var(--font);
  padding:5px 12px;border-radius:99px;font-size:.7rem;font-weight:700;transition:all .15s;
  display:flex;align-items:center;gap:4px}
.view-btn:hover:not(.active){color:var(--txt);background:rgba(255,255,255,.05)}
.view-btn.active{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}

.cal-nav{display:flex;gap:5px;align-items:center}
.cn-btn{width:31px;height:31px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r1);
  color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.78rem;transition:all .18s}
.cn-btn:hover{background:var(--a1);border-color:var(--a1);color:#fff;box-shadow:0 2px 10px rgba(79,142,247,.4)}
.cn-today{padding:0 11px;width:auto;font-family:var(--font);font-size:.7rem;font-weight:800}

/* ── WEEKDAYS ── */
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border);background:var(--bg2)}
.wd{text-align:center;padding:9px 4px;font-size:.62rem;font-weight:800;letter-spacing:.5px;color:var(--txt3)}
.wd.fri{color:rgba(239,68,68,.65)}

/* ── DAYS GRID ── */
.days-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.day-cell{min-height:84px;padding:7px 6px;cursor:pointer;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--bg1);transition:background .12s;position:relative;
}
.day-cell:hover{background:var(--bg3);z-index:1}
.day-cell:active{background:var(--bg4)}
.day-cell.other-m{opacity:.22;pointer-events:none}
.day-cell.today-c{background:rgba(79,142,247,.07)}
.day-cell.sel-c{background:rgba(79,142,247,.13);box-shadow:inset 0 0 0 2px var(--a1)}
.day-cell.hol-c{background:rgba(239,68,68,.04)}
.day-cell.fri-c .dn{color:var(--ar)}

.dn{display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:50%;font-size:.78rem;font-weight:800;color:var(--txt);transition:all .2s}
.today-c .dn{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff !important;
  box-shadow:0 3px 10px rgba(79,142,247,.5);animation:todayGlow 2.5s ease infinite}
@keyframes todayGlow{0%,100%{box-shadow:0 3px 10px rgba(79,142,247,.5)}50%{box-shadow:0 3px 20px rgba(79,142,247,.8),0 0 30px rgba(155,108,247,.3)}}
.hol-c .dn{color:var(--ar)}
.dn-g{font-size:.54rem;color:var(--txt3);display:block;margin-top:1px;font-variant-numeric:tabular-nums}

.day-evts{margin-top:3px;display:flex;flex-direction:column;gap:2px}
.ev-pill{font-size:.54rem;font-weight:700;padding:1px 5px;border-radius:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}
.ev-pill.holiday  {background:rgba(239,68,68,.16);color:#fca5a5}
.ev-pill.national {background:rgba(245,158,11,.16);color:#fcd34d}
.ev-pill.event    {background:rgba(79,142,247,.16);color:#93c5fd}
.ev-pill.personal {background:rgba(6,214,160,.16);color:#6ee7b7}
.ev-pill.religious{background:rgba(155,108,247,.16);color:#c4b5fd}

/* ── WEEK VIEW ── */
.week-view{overflow-x:auto}
.wv-grid{display:grid;grid-template-columns:44px repeat(7,1fr);min-width:540px}
.wv-head{padding:8px 4px;text-align:center;border-bottom:1px solid var(--border);border-left:1px solid var(--border);font-size:.66rem;font-weight:700}
.wv-head .wvhd{font-size:1.15rem;font-weight:900}
.wv-head.wv-tod{background:rgba(79,142,247,.08)}
.wv-head.wv-tod .wvhd{color:var(--a1)}
.wv-hl{font-size:.56rem;color:var(--txt3);padding:2px 4px;border-bottom:1px solid var(--border);min-height:42px;display:flex;align-items:flex-start;justify-content:center;padding-top:3px}
.wv-cell{border-left:1px solid var(--border);border-bottom:1px solid var(--border);min-height:42px;position:relative}
.now-line{position:absolute;left:0;right:0;height:2px;background:var(--ar);z-index:2}
.now-line::before{content:'';position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ar)}

/* ── YEAR VIEW ── */
.year-view{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:13px}
.ym-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:10px;
  cursor:pointer;transition:all .2s;animation:ymIn .4s ease both}
@keyframes ymIn{from{opacity:0;scale:.95}to{opacity:1;scale:1}}
.ym-card:hover{border-color:var(--borderG);box-shadow:var(--glow1);transform:translateY(-2px)}
.ym-name{font-size:.76rem;font-weight:900;color:var(--a1);margin-bottom:5px}
.ym-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:1px}
.ym-wd{font-size:.46rem;color:var(--txt3);padding:1px}
.ym-d{font-size:.5rem;padding:2px;border-radius:50%}
.ym-d.hol{color:var(--ar)}.ym-d.tod{background:var(--a1);color:#fff}.ym-d.oth{opacity:.18}

/* ════ SIDEBAR ════ */
.sidebar{display:flex;flex-direction:column;gap:13px}
.scard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;
  transition:box-shadow .2s;animation:scardIn .5s ease both}
@keyframes scardIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.scard:hover{box-shadow:0 4px 20px rgba(0,0,0,.3)}
.sc-head{padding:11px 15px;border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;background:linear-gradient(135deg,rgba(255,255,255,.02),transparent)}
.sc-title{font-size:.8rem;font-weight:800;display:flex;align-items:center;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.d-blue{background:var(--a1);box-shadow:0 0 5px var(--a1)}
.d-green{background:var(--a3);box-shadow:0 0 5px var(--a3)}
.d-amber{background:var(--aw);box-shadow:0 0 5px var(--aw)}
.d-purple{background:var(--a2);box-shadow:0 0 5px var(--a2)}
.d-red{background:var(--ar);box-shadow:0 0 5px var(--ar)}
.sc-body{padding:12px 15px}

/* Mini cal */
.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mini-wd{font-size:.54rem;color:var(--txt3);padding:2px;font-weight:800}
.mini-wd.fri{color:rgba(239,68,68,.55)}
.mini-d{font-size:.66rem;padding:3px 1px;border-radius:50%;cursor:pointer;color:var(--txt2);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;transition:all .15s}
.mini-d:hover{background:var(--bg4);color:var(--txt)}
.mini-d.tod{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-weight:800}
.mini-d.sel{outline:2px solid var(--a1);outline-offset:-1px}
.mini-d.hol{color:var(--ar)}
.mini-d.oth{opacity:.18;pointer-events:none}
.mini-nav{display:flex;gap:4px;align-items:center}
.mn-btn{width:21px;height:21px;background:var(--bg3);border:none;border-radius:5px;cursor:pointer;
  color:var(--txt2);display:flex;align-items:center;justify-content:center;font-size:.58rem;transition:all .15s}
.mn-btn:hover{background:var(--a1);color:#fff}
.mn-label{font-size:.7rem;font-weight:800}

/* Day Detail */
.dd-title{font-size:.9rem;font-weight:900;margin-bottom:4px}
.dd-meta{font-size:.7rem;color:var(--txt2);display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.dd-badge{display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:700;
  padding:2px 7px;border-radius:99px;margin:2px 2px 2px 0}
.dd-badge.holiday  {background:rgba(239,68,68,.13);color:#fca5a5}
.dd-badge.national {background:rgba(245,158,11,.13);color:#fcd34d}
.dd-badge.event    {background:rgba(79,142,247,.13);color:#93c5fd}
.dd-badge.personal {background:rgba(6,214,160,.13);color:#6ee7b7}
.dd-badge.religious{background:rgba(155,108,247,.13);color:#c4b5fd}
.dd-sec{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--txt3);margin:9px 0 5px}

/* Events */
.evlist{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto;padding-right:2px}
.evi{display:flex;gap:7px;align-items:flex-start;padding:8px 9px;background:var(--bg3);
  border:1px solid var(--border);border-radius:var(--r1);transition:all .15s;cursor:pointer}
.evi:hover{border-color:var(--borderG);background:var(--bg4);transform:translateX(-2px)}
.evi-stripe{width:3px;border-radius:2px;align-self:stretch;flex-shrink:0}
.evi-stripe.holiday  {background:var(--ar)}.evi-stripe.national{background:var(--aw)}
.evi-stripe.event    {background:var(--a1)}.evi-stripe.personal{background:var(--a3)}
.evi-stripe.religious{background:var(--a2)}
.evi-name{font-size:.72rem;font-weight:700;margin-bottom:2px}
.evi-date{font-size:.6rem;color:var(--txt2)}
.evi-badge{font-size:.52rem;font-weight:700;padding:2px 6px;border-radius:99px;flex-shrink:0;align-self:flex-start;margin-top:1px}
.evi-badge.holiday  {background:rgba(239,68,68,.16);color:#fca5a5}
.evi-badge.national {background:rgba(245,158,11,.16);color:#fcd34d}
.evi-badge.event    {background:rgba(79,142,247,.16);color:#93c5fd}
.evi-badge.personal {background:rgba(6,214,160,.16);color:#6ee7b7}
.evi-badge.religious{background:rgba(155,108,247,.16);color:#c4b5fd}
.no-ev{text-align:center;color:var(--txt3);font-size:.72rem;padding:8px 0}

/* Progress */
.prog-wrap{display:flex;flex-direction:column;gap:8px}
.prog-row{display:flex;align-items:center;gap:7px}
.prog-lbl{font-size:.66rem;color:var(--txt2);width:42px;flex-shrink:0;display:flex;align-items:center;gap:3px}
.prog-track{flex:1;height:5px;background:var(--bg3);border-radius:99px;overflow:hidden}
.prog-fill{height:100%;border-radius:99px;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.prog-fill.year  {background:linear-gradient(90deg,var(--a1),var(--a2))}
.prog-fill.month {background:linear-gradient(90deg,var(--a3),var(--a1))}
.prog-fill.week  {background:linear-gradient(90deg,var(--a2),var(--ap))}
.prog-pct{font-size:.62rem;color:var(--txt3);width:26px;text-align:left}

/* World clocks mini */
.wc-mini{display:flex;flex-direction:column;gap:5px}
.wc-row{display:flex;align-items:center;justify-content:space-between;padding:5px 7px;
  background:var(--bg3);border-radius:var(--r1);border:1px solid var(--border)}
.wc-city{font-size:.7rem;font-weight:700}.wc-zone{font-size:.54rem;color:var(--txt3)}
.wc-time{font-size:.88rem;font-weight:800;color:var(--a1);font-variant-numeric:tabular-nums}

.add-btn{width:100%;padding:9px;background:linear-gradient(135deg,var(--a1),var(--a2));border:none;
  border-radius:var(--r1);color:#fff;font-family:var(--font);font-size:.78rem;font-weight:800;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.add-btn:hover{opacity:.88;transform:translateY(-1px);box-shadow:0 4px 14px rgba(79,142,247,.4)}

/* ════ SECTIONS ════ */
.section-wrap{max-width:1460px;margin:18px auto;padding:0 18px 40px}
.sec-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;flex-wrap:wrap;gap:8px}
.sec-head{font-size:1.05rem;font-weight:900}
.sec-filter select{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r1);
  color:var(--txt);font-family:var(--font);padding:6px 10px;font-size:.75rem;cursor:pointer;outline:none}

/* Converter */
.conv-group{margin-bottom:11px}
.conv-label{font-size:.66rem;font-weight:800;color:var(--txt2);margin-bottom:4px;display:block;letter-spacing:.5px}
.conv-input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r1);
  color:var(--txt);font-family:var(--font);padding:9px 12px;font-size:.85rem;transition:all .2s;outline:none}
.conv-input:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(79,142,247,.12)}
.conv-input::placeholder{color:var(--txt3)}
.conv-result{background:var(--bg3);border:1px solid var(--borderG);border-radius:var(--r1);
  padding:11px 13px;font-size:.82rem;font-weight:600;color:var(--a1);min-height:48px;line-height:1.8}
.conv-swap{width:100%;padding:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r1);
  cursor:pointer;color:var(--txt2);font-family:var(--font);font-size:.72rem;font-weight:700;
  transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.conv-swap:hover{border-color:var(--a1);color:var(--a1)}
.mtable{width:100%;border-collapse:collapse;font-size:.76rem}
.mtable th{padding:7px 7px;color:var(--txt3);font-weight:800;text-align:right;border-bottom:1px solid var(--border)}
.mtable td{padding:7px 7px;border-bottom:1px solid var(--border)}
.mtable tr:last-child td{border:none}
.mtable tr:hover td{background:var(--bg3)}

/* World Clocks Full */
.wc-full-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:9px}
.wc-full-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);
  padding:13px;transition:all .2s;animation:wcIn .3s ease both}
@keyframes wcIn{from{opacity:0;scale:.95}to{opacity:1;scale:1}}
.wc-full-card:hover{border-color:var(--borderG);transform:translateY(-2px);box-shadow:var(--glow1)}
.wcf-flag{font-size:1.4rem;margin-bottom:5px}
.wcf-city{font-size:.82rem;font-weight:800;margin-bottom:1px}
.wcf-time{font-size:1.3rem;font-weight:900;color:var(--a1);font-variant-numeric:tabular-nums;margin-bottom:2px}
.wcf-date{font-size:.6rem;color:var(--txt2)}.wcf-tz{font-size:.54rem;color:var(--txt3)}

/* Events Full */
.evf-month{margin-bottom:15px}
.evf-mhead{font-size:.78rem;font-weight:900;color:var(--a1);padding:5px 0;border-bottom:1px solid var(--border);
  margin-bottom:7px;display:flex;align-items:center;gap:6px}
.evf-list{display:flex;flex-direction:column;gap:5px}

/* ════ MODAL ════ */
.modal-overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r4);padding:24px;
  width:390px;max-width:93vw;transform:scale(.93) translateY(12px);transition:transform .22s;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modal-overlay.open .modal{transform:scale(1) translateY(0)}
.modal-head{font-size:.98rem;font-weight:900;margin-bottom:15px;display:flex;align-items:center;gap:7px}
.form-group{margin-bottom:11px}
.form-lbl{font-size:.66rem;font-weight:800;color:var(--txt2);margin-bottom:4px;display:block;letter-spacing:.5px}
.form-input,.form-select,.form-ta{width:100%;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r1);color:var(--txt);font-family:var(--font);padding:8px 11px;font-size:.83rem;transition:all .2s;outline:none}
.form-input:focus,.form-select:focus,.form-ta:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(79,142,247,.12)}
.form-select{cursor:pointer}.form-select option{background:var(--bg2)}
.form-ta{resize:vertical;min-height:68px}
.modal-acts{display:flex;gap:7px;margin-top:15px}
.btn-p{flex:1;padding:10px;background:linear-gradient(135deg,var(--a1),var(--a2));border:none;border-radius:var(--r1);
  color:#fff;font-family:var(--font);font-size:.83rem;font-weight:800;cursor:pointer;transition:all .2s}
.btn-p:hover{opacity:.88;box-shadow:0 4px 12px rgba(79,142,247,.4)}
.btn-s{flex:1;padding:10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r1);
  color:var(--txt2);font-family:var(--font);font-size:.83rem;font-weight:700;cursor:pointer;transition:all .2s}
.btn-s:hover{background:var(--bg4);color:var(--txt)}

/* ════ TOAST ════ */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:9999;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);
  padding:9px 16px;font-size:.78rem;font-weight:700;
  display:flex;align-items:center;gap:7px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:toastIn .3s ease;white-space:nowrap;pointer-events:all}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.toast.ok {border-color:rgba(6,214,160,.3);color:var(--a3)}
.toast.info{border-color:rgba(79,142,247,.3);color:var(--a1)}
.toast.err {border-color:rgba(239,68,68,.3);color:var(--ar)}

/* ════ LIGHT THEME ════ */
body.light{
  --bg0:#f0f4ff;--bg1:#fff;--bg2:#f5f8ff;--bg3:#eaeeff;--bg4:#dde4fa;
  --border:rgba(0,0,0,0.07);--borderG:rgba(79,142,247,.25);
  --txt:#0f172a;--txt2:#4b5675;--txt3:#94a3b8;
}
body.light .topbar{background:rgba(240,244,255,.88)}
body.light #loader{background:#f0f4ff}

/* ══ MOBILE BOTTOM NAV ══ */
.mobile-nav{display:none}
@media(max-width:768px){
  body{padding-bottom:70px}
  .mobile-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;
    background:rgba(8,10,18,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--border);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  body.light .mobile-nav{background:rgba(240,244,255,.92)}
  .mnav-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    background:none;border:none;cursor:pointer;color:var(--txt2);font-family:var(--font);
    padding:7px 2px;border-radius:var(--r1);font-size:.66rem;font-weight:700;transition:all .18s;
  }
  .mnav-btn i{font-size:1.15rem}
  .mnav-btn:active{background:var(--bg3)}
  .mnav-btn.active{color:var(--a1)}
  .mnav-btn.active i{filter:drop-shadow(0 0 6px rgba(79,142,247,.6))}
}

/* ══ MOBILE MENU SHEET (opened from "بیشتر") ══ */
.mmenu-overlay{
  display:none;position:fixed;inset:0;z-index:400;
  background:rgba(3,5,12,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s ease;
}
.mmenu-overlay.open{display:block;opacity:1}
.mmenu-sheet{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--bg1);border-radius:22px 22px 0 0;
  border:1px solid var(--border);border-bottom:none;
  padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -20px 60px rgba(0,0,0,.4);
}
.mmenu-overlay.open .mmenu-sheet{transform:translateY(0)}
.mmenu-handle{width:38px;height:4px;border-radius:99px;background:var(--border);margin:6px auto 14px}
.mmenu-title{font-size:.8rem;font-weight:900;color:var(--txt2);margin-bottom:14px}
.mmenu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mmenu-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);
  padding:14px 6px;cursor:pointer;font-family:var(--font);color:var(--txt);
  font-size:.72rem;font-weight:800;transition:all .18s;
}
.mmenu-item:active{transform:scale(.96)}
.mmenu-item.active{border-color:var(--borderG);background:var(--bg3)}
.mmenu-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.15rem}

/* ══ RESPONSIVE GRID HELPER (converter / prayer two-column panels) ══ */
.two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px}
@media(max-width:900px){.two-col-grid{grid-template-columns:1fr;max-width:100%}}
@media(max-width:1100px){.page-wrap{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .date-hero{grid-template-columns:1fr}.topbar-inner{flex-wrap:wrap;height:auto;padding:8px 12px}
  .topbar-nav{display:none}.sidebar{grid-template-columns:1fr}
  .year-view{grid-template-columns:repeat(2,1fr)}
  .section-wrap{padding:0 12px 24px;margin:12px auto}
  .sec-top{align-items:flex-start}
  .sec-filter{width:100%}.sec-filter select{width:100%}
  .wc-full-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px}
  .mtable{font-size:.68rem}.mtable th,.mtable td{padding:6px 4px}
  #evf-body{max-height:none!important}
}
@media(max-width:500px){
  .day-cell{min-height:58px;padding:4px 3px}.ev-pill{display:none}.brand-text{display:none}
  .year-view{grid-template-columns:1fr 1fr}
  .wc-full-grid{grid-template-columns:1fr 1fr}
  .mmenu-grid{grid-template-columns:repeat(3,1fr)}
  .mmenu-item{padding:11px 4px;font-size:.66rem}.mmenu-icon{width:38px;height:38px;font-size:1rem}
}

/* ══ ANALOG CLOCK IMPROVED ══ */
.clock-face{
  width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #1e2a45, #0c1020);
  border:2px solid rgba(79,142,247,.3);
  position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),inset 0 2px 8px rgba(0,0,0,.5),0 0 15px rgba(79,142,247,.15);
}
.clock-mark{
  position:absolute;width:1px;height:4px;
  background:rgba(255,255,255,.25);
  top:2px;left:50%;transform-origin:bottom center;
  transform:translateX(-50%) rotate(var(--r));
}
.ch{position:absolute;bottom:50%;left:50%;width:2.5px;height:12px;
  background:linear-gradient(to top,#e2e8ff,#a0aec0);
  border-radius:2px 2px 0 0;transform-origin:bottom center;margin-left:-1.25px;
  box-shadow:0 0 3px rgba(160,174,192,.5);}
.cm{position:absolute;bottom:50%;left:50%;width:2px;height:16px;
  background:linear-gradient(to top,var(--a1),#93c5fd);
  border-radius:2px 2px 0 0;transform-origin:bottom center;margin-left:-1px;
  box-shadow:0 0 4px rgba(79,142,247,.6);}
.cs{position:absolute;bottom:50%;left:50%;width:1px;height:19px;
  background:var(--ar);border-radius:1px;transform-origin:bottom center;margin-left:-.5px;
  box-shadow:0 0 4px rgba(239,68,68,.7);}
.cs::after{content:'';position:absolute;bottom:-5px;left:-1.5px;width:4px;height:6px;
  background:var(--ar);border-radius:50%;}
.clock-center-dot{position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--a1);top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  box-shadow:0 0 6px var(--a1);}
.clock-cap{position:absolute;width:2px;height:2px;border-radius:50%;
  background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;}

/* ══ PRAYER TIMES ══ */
.prayer-list{display:flex;flex-direction:column;gap:8px}
.prayer-row{display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r1);transition:all .2s}
.prayer-row:hover{border-color:var(--borderG)}
.prayer-next{background:rgba(155,108,247,.08);border-color:rgba(155,108,247,.3) !important;
  box-shadow:0 0 12px rgba(155,108,247,.1)}
.prayer-icon{width:28px;height:28px;border-radius:50%;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}
.prayer-name{flex:1;font-size:.8rem;font-weight:700}
.prayer-time{font-size:.88rem;font-weight:800;color:var(--a1);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:6px}
.prayer-badge{font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:99px;
  background:rgba(155,108,247,.18);color:#c4b5fd}

/* ══ WORLD CLOCK CARD IMPROVED ══ */
.wcf-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.wcf-flag{font-size:1.3rem}
.wcf-tz{font-size:.52rem;color:var(--txt3);background:var(--bg2);padding:1px 5px;border-radius:4px}