:root{
  --bg:#0B1020;
  --panel:#0F172A;
  --panel2:#0B1226;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10);
  --text:#E5E7EB;
  --muted:#A7B0C0;
  --accent:#7C3AED;
  --accent2:#22C55E;
  --danger:#F43F5E;
  --warn:#F59E0B;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --r:18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Vazirmatn, IRANSans, system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(34,197,94,.22), transparent 55%),
    radial-gradient(800px 500px at 50% 90%, rgba(245,158,11,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), #070A12 70%);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
.container{
  max-width:1360px;
  margin:18px auto;
  padding:0 14px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:14px;
  align-items:start;
}

.card{
  background:linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.sidebar{
  position:sticky; top:14px;
  padding:14px;
}

.brand{
  display:flex;align-items:center;gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
}
.logo{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg, rgba(124,58,237,1), rgba(34,197,94,1));
  display:flex;align-items:center;justify-content:center;
  font-weight:950;color:#071018;
  box-shadow:0 14px 30px rgba(124,58,237,.35);
}
.brand .t{
  display:flex;flex-direction:column;gap:2px;
}
.brand .t .h{font-weight:950;letter-spacing:-.2px}
.brand .t .s{font-size:12px;color:var(--muted)}

.nav{
  margin-top:12px;
  display:flex;flex-direction:column;gap:8px;
}
.nav button{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  transition:.15s ease;
}
.nav button:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
.nav button.active{
  background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(34,197,94,.12));
  border-color:rgba(124,58,237,.35);
}
.nav svg{width:18px;height:18px;opacity:.95}

.mini-cards{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.pill{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}
.pill .k{font-size:12px;color:var(--muted);font-weight:900;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.pill .v{font-weight:950}
.pill .v small{font-weight:800;color:var(--muted)}

.hero{
  padding:16px 18px;
}
.hero-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.hero-top .title{
  display:flex;flex-direction:column;gap:2px;
}
.hero-top .title .h{font-weight:950;font-size:16px}
.hero-top .title .s{color:var(--muted);font-size:12px}
.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.badge{
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-size:12px;font-weight:900;color:var(--muted);
}
.badge.accent{color:#EDE9FE;border-color:rgba(124,58,237,.35);background:rgba(124,58,237,.14)}
.badge.green{color:#DCFCE7;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.12)}

.clock-wrap{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 240px;
  gap:14px;
  align-items:stretch;
}
.bigtime{
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(34,197,94,.10));
  padding:16px;
  display:flex;flex-direction:column;justify-content:center;
  min-height:190px;
}
.bigtime .time{
  font-weight:1000;
  font-size:40px;
  letter-spacing:1px;
}
.bigtime .sub{
  margin-top:8px;color:var(--muted);font-weight:900;font-size:12px;line-height:1.6
}
.bigtime .sub b{color:var(--text)}
.analog{
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  padding:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.dial{
  width:160px;height:160px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(124,58,237,.18), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(34,197,94,.12), transparent 48%),
    rgba(255,255,255,.03);
  border:1px solid var(--border);
  position:relative;
}
.center{
  width:10px;height:10px;border-radius:50%;
  background:var(--text);
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:6;
}
.hand{position:absolute;left:50%;top:50%;transform-origin:8px 50%;transform:translate(-8px,-50%) rotate(var(--rot,0deg));border-radius:999px;background:var(--text)}
.hand.hour{width:40px;height:5px}
.hand.min{width:62px;height:4px}
.hand.sec{width:70px;height:2px;background:var(--danger)}
.tick{position:absolute;left:50%;top:50%;transform-origin:50% 80px;background:#94A3B8;opacity:.8}
.small{
  font-size:12px;color:var(--muted);font-weight:900;text-align:center;line-height:1.35
}

/* Calendar area */
.panel{margin-top:14px}
.hidden{display:none}
.grid-wrap{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap:14px;
  align-items:start;
}
.cal-card{padding:0}
.cal-head{
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.cal-head .m{
  display:flex;flex-direction:column;gap:2px;text-align:center
}
.cal-head .m .j{font-weight:100}
.cal-head .m .g{font-size:12px;color:var(--muted);font-weight:900}
.btn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:950;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}

table.grid{width:100%;border-collapse:separate;border-spacing:0}
.grid th{
  background:linear-gradient(135deg, rgba(124,58,237,.85), rgba(34,197,94,.75));
  color:#081018;
  font-weight:1000;
  padding:10px 2px;
  font-size:12px;
}
.grid td{
  border-bottom:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.06);
  height:90px;
 
  vertical-align:top;
  padding:1px;
}
.grid tr td:last-child{border-left:0}

.cell{
  border-radius:16px;
  padding:10px;
  height:100%;
  cursor:pointer;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition:.15s ease;
}
.cell:hover{transform:translateY(-1px); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10)}
.cell.empty{background:transparent;border:0;cursor:default}
.dayrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.jday{font-weight:100;font-size:16px}
.gday,.hday{font-size:12px;color:var(--muted);font-weight:900;line-height:1.15;text-align:left}
.today{outline:2px solid rgba(124,58,237,.55);outline-offset:-2px}
.friday{background:rgba(244,63,94,.10)}
.holiday .jday{color:#FFE4E6}
.mini{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.3;
  max-height:34px;
  overflow:hidden;
}
.mini .h{color:#FFD1D9;font-weight:1000}

.side{
  padding:14px 14px 10px 14px;
}
.side-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
.side-title .h{font-weight:1000}
.search{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:10px 12px;
  color:var(--text);
  width:100%;
  outline:none;
}
.search::placeholder{color:rgba(167,176,192,.7)}
.timeline{
  margin-top:12px;
  display:flex;flex-direction:column;gap:10px;
  max-height:520px;
  overflow:auto;
  padding-right:6px;
}
.item{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  padding:12px;
}
.item .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.item .d{
  font-weight:1000;
  color:#EDE9FE;
  font-size:10px;
}
.tag{
  font-size:11px;
  font-weight:1000;
  color:#081018;
  background:linear-gradient(135deg, rgba(124,58,237,.9), rgba(34,197,94,.75));
  padding:6px 8px;border-radius:999px;
}
.item .t{margin-top:8px;font-weight:600;font-size:12px;line-height:1.6}
.item .t.h{color:#FFD1D9}
.item .meta{margin-top:6px;font-size:10px;color:var(--muted);font-weight:900}

.footer{
  margin-top:12px;
  color:rgba(167,176,192,.85);
  font-size:12px;
  line-height:1.8;
  padding:12px 14px;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.03);
}

/* forms panels */
.form{
  padding:16px;
}
.form h3{margin:0 0 10px 0;font-weight:1000}
.row{display:grid;grid-template-columns: 1fr 1fr 1fr; gap:12px}
.field{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:12px;
}
.field label{display:block;font-size:12px;color:var(--muted);font-weight:1000;margin-bottom:8px}
.field input,.field select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(2,6,23,.55);
  color:var(--text);
  outline:none;
}
.field input:focus,.field select:focus{border-color:rgba(124,58,237,.55); box-shadow:0 0 0 6px rgba(124,58,237,.14)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.out{
  margin-top:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:14px;
  min-height:48px;
}
.kv{display:flex;gap:10px;flex-wrap:wrap}
.pill2{
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-weight:1000;
}
.pill2 b{color:#EDE9FE}

/* modal */
#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:18px;z-index:50}
.modalbox{
  width:min(820px,100%);
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.95));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  overflow:hidden;
}
.modalhead{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.modalhead .t{font-weight:1000}
.modalbody{padding:14px}
@media (max-width: 1050px){
  .container{grid-template-columns:1fr}
  .sidebar{position:static}
  .clock-wrap{grid-template-columns:1fr}
  .grid-wrap{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}


/* Friday column highlight */
.grid th.friday-h{
  background:linear-gradient(135deg, rgba(244,63,94,.85), rgba(245,158,11,.75));
}
td.friday-col{
  background:rgba(244,63,94,.05);
}

#bigTime{direction:ltr;text-align:left;}

.bigtime .time{direction:ltr;unicode-bidi:embed;}

.mini{display:none !important}
/* Holiday cells (real red) */
.cell.holiday{
  background: rgba(244,63,94,.14);
  border-color: rgba(244,63,94,.45);
}
.cell.holiday .jday{
  color:#F43F5E;
  font-size: 16px;
}
.cell.holiday .gday,
.cell.holiday .hday{
  color: rgba(255,255,255,.80);
}

.mystic-quote{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.app-footer{
  margin-top: 30px;
  padding: 18px 14px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.brand-name{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  color: #E5E7EB;
}

.brand-tag{
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

.footer-copy{
  font-size: 11px;
  color: rgba(255,255,255,.45);
}