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

:root{
  --bg:#0F1626;
  --bg-elev:#131B30;
  --surface:#1B2540;
  --surface-hi:#232F52;
  --border: rgba(255,255,255,0.09);
  --border-soft: rgba(255,255,255,0.05);
  --amber:#E7A53C;
  --amber-soft: rgba(231,165,60,0.14);
  --teal:#38D39F;
  --teal-soft: rgba(56,211,159,0.14);
  --rose:#F16767;
  --rose-soft: rgba(241,103,103,0.14);
  --blue:#5B9CE8;
  --blue-soft: rgba(91,156,232,0.14);
  --text:#EEF1FA;
  --text-dim:#96A1C2;
  --text-faint:#5B6789;
  --radius:18px;
  --radius-sm:12px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

/* چون فلاش آبی پیش‌فرض تپ رو با tap-highlight-color حذف کردیم، این‌جا
   یه فیدبک بصری جایگزین برای همه‌ی المان‌های قابل‌کلیک می‌ذاریم. */
.mini-btn, .ghost-btn, .btn-primary, .btn-secondary, .cat-chip, .pri-choice,
.tab, .reminder-item, .plan-card, .task-node, .ord-btn, .del-btn, .bell-btn,
.price-card .pcta, .due-actions button, .nav-cta, .hero-cta-primary, .hero-cta-secondary,
.data-table button{
  transition: transform .1s ease, opacity .1s ease;
}
.mini-btn:active, .ghost-btn:active, .btn-primary:active, .btn-secondary:active,
.cat-chip:active, .pri-choice:active, .tab:active, .reminder-item:active,
.plan-card:active, .task-node:active, .ord-btn:active, .del-btn:active, .bell-btn:active,
.price-card .pcta:active, .due-actions button:active, .nav-cta:active,
.hero-cta-primary:active, .hero-cta-secondary:active, .data-table button:active{
  transform: scale(.94);
  opacity: .8;
}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(231,165,60,0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(91,156,232,0.06), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Vazirmatn', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01" on;
  padding-bottom:100px;
  overflow-x:hidden;
}

.app{max-width:560px; margin:0 auto; padding:0 16px;}

.topbar{
  padding:22px 4px 14px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.brand{display:flex; flex-direction:column; gap:2px;}
.brand-name{font-weight:900; font-size:21px; letter-spacing:-.3px; display:flex; align-items:center; gap:8px;}
.brand-name .dot{width:8px;height:8px;border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-soft); flex-shrink:0;}
.brand-sub{font-size:12.5px; color:var(--text-faint); font-weight:500;}

.bell-btn{
  width:42px;height:42px;border-radius:14px;
  background:var(--surface); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim); cursor:pointer; flex-shrink:0;
  transition:.15s;
}
.bell-btn.active{ color:var(--amber); background:var(--amber-soft); border-color:transparent;}
.bell-btn:active{transform:scale(.92);}

.datecard{
  background:linear-gradient(155deg, var(--surface), var(--bg-elev));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.date-info .weekday{font-size:13.5px; color:var(--amber); font-weight:700; margin-bottom:2px;}
.date-info .fulldate{font-size:15.5px; font-weight:600; color:var(--text);}
.date-info .now-clock{font-size:12px; color:var(--text-faint); margin-top:4px; font-weight:500; direction:ltr; display:inline-block;}

.ring-wrap{position:relative; width:64px; height:64px; flex-shrink:0;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-track{fill:none; stroke:var(--border); stroke-width:6;}
.ring-fill{fill:none; stroke:var(--amber); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .5s ease;}
.ring-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;}

.streak-row{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--text-dim); font-weight:600;
  padding:0 6px 16px; margin-top:-2px;
}
.streak-row b{color:var(--amber); font-weight:800;}
.streak-fire{font-size:14px;}

.tabs{
  display:flex; gap:6px; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; padding:5px; margin-bottom:18px;
}
.tab{
  flex:1; min-width:0; text-align:center; padding:11px 0; border-radius:10px;
  font-weight:700; font-size:14.5px; color:var(--text-faint);
  cursor:pointer; transition:.15s; user-select:none; position:relative;
}
.tab.active{background:var(--surface-hi); color:var(--text);}
.tab .badge-count{
  display:inline-block; margin-inline-start:6px; font-size:11px; font-weight:800;
  color:var(--text-faint);
}
.tab.active .badge-count{color:var(--amber);}

.a2hs{
  background:var(--blue-soft); border:1px solid rgba(91,156,232,0.3);
  border-radius:var(--radius-sm); padding:13px 15px; margin-bottom:16px;
  display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-dim); line-height:1.9;
}
.a2hs b{color:var(--text); font-weight:700;}
.a2hs .a2hs-close{margin-inline-start:auto; color:var(--text-faint); cursor:pointer; font-size:16px; flex-shrink:0; padding:2px;}

.now-strip{
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
  font-size:12.5px; color:var(--text-faint); font-weight:600;
}
.now-strip .live-dot{width:6px;height:6px;border-radius:50%; background:var(--rose); animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

.timeline{position:relative; padding-inline-end:2px;}
.timeline::before{
  content:''; position:absolute; top:6px; bottom:6px; right:19px;
  width:2px; background:linear-gradient(var(--border), var(--border) 80%, transparent);
}

.task-row{position:relative; display:flex; gap:14px; margin-bottom:12px;}
.task-node{
  position:relative; z-index:1; width:40px; height:40px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  cursor:pointer; transition:.15s;
}
.task-node.pri-high{border-color:var(--rose);}
.task-node.pri-medium{border-color:var(--amber);}
.task-node.pri-low{border-color:var(--blue);}
.task-node.done{background:var(--teal); border-color:var(--teal);}
.task-node.due-now{animation:glow 1.4s infinite;}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 var(--amber-soft);}50%{box-shadow:0 0 0 8px transparent;}}
.task-node svg{width:18px;height:18px;}

.task-card{
  flex:1; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 15px; min-width:0;
}
.task-card.done{opacity:.55;}
.task-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.task-title{font-weight:700; font-size:14.5px; word-break:break-word;}
.task-card.done .task-title{text-decoration:line-through; color:var(--text-faint);}
.task-time{
  font-size:12px; font-weight:700; color:var(--text-dim); flex-shrink:0;
  direction:ltr; background:var(--bg-elev); padding:3px 8px; border-radius:7px;
}
.task-note{font-size:12.5px; color:var(--text-faint); margin-top:5px; line-height:1.7;}
.task-actions{display:flex; gap:8px; margin-top:10px;}
.mini-btn{
  border:none; background:var(--bg-elev); color:var(--text-dim);
  font-family:inherit; font-size:12px; font-weight:700; padding:7px 12px;
  border-radius:9px; cursor:pointer; display:flex; align-items:center; gap:5px;
}
.mini-btn.done-btn{background:var(--teal-soft); color:var(--teal);}
.mini-btn.skip-btn{background:var(--rose-soft); color:var(--rose);}
.mini-btn:active{transform:scale(.95);}

.order-col{display:flex; flex-direction:column; gap:3px; justify-content:center;}
.ord-btn{
  width:22px;height:22px;border-radius:6px; border:none; background:var(--bg-elev);
  color:var(--text-faint); font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ord-btn:active{background:var(--surface-hi);}

.plan-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:13px 15px; margin-bottom:10px; display:flex; align-items:center; gap:12px;
}
.plan-pri-dot{width:9px;height:9px;border-radius:50%; flex-shrink:0;}
.plan-pri-dot.pri-high{background:var(--rose);}
.plan-pri-dot.pri-medium{background:var(--amber);}
.plan-pri-dot.pri-low{background:var(--blue);}
.plan-info{flex:1; min-width:0;}
.plan-info .task-title{font-size:14px;}
.plan-info .task-note{margin-top:3px;}
.plan-meta{display:flex; gap:8px; align-items:center;}
.plan-time{font-size:11.5px; color:var(--text-faint); direction:ltr;}
.del-btn{
  width:30px;height:30px;border-radius:9px; border:none; background:var(--rose-soft); color:var(--rose);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}

/* ---------- Reminders (financial/vehicle/health) ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;}
.cat-chip{
  background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:12px 6px;
  text-align:center; cursor:pointer; transition:.15s;
}
.cat-chip.sel{border-color:var(--amber); background:var(--amber-soft);}
.cat-chip .ic{font-size:20px; margin-bottom:4px;}
.cat-chip .lb{font-size:10.5px; color:var(--text-dim); font-weight:600; line-height:1.4;}

.reminder-group-title{font-size:12.5px; font-weight:800; color:var(--text-faint); margin:18px 0 10px; padding:0 2px;}
.reminder-group-title:first-child{margin-top:0;}

.reminder-item{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:13px 15px; margin-bottom:10px; display:flex; gap:12px; align-items:center; cursor:pointer;
}
.reminder-item .ic{font-size:20px; flex-shrink:0;}
.reminder-item .info{flex:1; min-width:0;}
.reminder-item .rtitle{font-weight:700; font-size:14px;}
.reminder-item .rdue{font-size:12px; color:var(--text-faint); margin-top:2px;}
.days-left{font-size:11px; font-weight:800; padding:4px 9px; border-radius:20px; flex-shrink:0; white-space:nowrap;}

/* ---------- Cycle tracker ---------- */
.cycle-card{
  background:linear-gradient(155deg, var(--rose-soft), var(--surface)); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; margin-bottom:16px;
}
.cycle-card .cc-label{font-size:12.5px; color:var(--text-dim); margin-bottom:4px;}
.cycle-stat{display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--border-soft); font-size:13px;}
.cycle-stat:first-child{border-top:none;}
.cycle-stat b{color:var(--text);}

.empty{
  text-align:center; padding:50px 20px 30px; color:var(--text-faint);
}
.empty .emoji{font-size:34px; margin-bottom:10px;}
.empty h3{font-size:15.5px; color:var(--text-dim); margin:0 0 6px; font-weight:700;}
.empty p{font-size:13px; line-height:1.9; margin:0 0 16px;}
.empty .quick-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}

.ghost-btn{
  border:1px solid var(--border); background:var(--surface); color:var(--text-dim);
  font-family:inherit; font-weight:700; font-size:13px; padding:9px 16px;
  border-radius:11px; cursor:pointer;
}
.ghost-btn:active{background:var(--surface-hi);}

.fab{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--amber); color:#1A1200; border:none;
  padding:15px 26px; border-radius:16px; font-family:inherit;
  font-weight:800; font-size:14.5px; display:flex; align-items:center; gap:8px;
  box-shadow:0 10px 30px -6px rgba(231,165,60,0.5); cursor:pointer; z-index:20;
}
.fab:active{transform:translateX(-50%) scale(.96);}

.overlay{
  position:fixed; inset:0; background:rgba(6,9,18,0.72); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center; z-index:100;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.overlay.show{opacity:1; pointer-events:auto;}
.sheet{
  background:var(--bg-elev); border:1px solid var(--border); border-bottom:none;
  border-radius:22px 22px 0 0; width:100%; max-width:560px; padding:22px 20px 26px;
  transform:translateY(20px); transition:transform .25s;
  max-height:88vh; overflow-y:auto; overflow-x:hidden;
}
.overlay.show .sheet{transform:translateY(0);}
.sheet-handle{width:38px; height:4px; background:var(--border); border-radius:3px; margin:0 auto 18px;}
.sheet h2{font-size:16.5px; margin:0 0 18px; font-weight:800;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--text-dim); margin-bottom:7px;}
.field input[type=text], .field textarea, .field input[type=time], .field input[type=password], .field input[type=tel], .field input[type=number], .field input[type=date]{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:14.5px; padding:12px 14px; border-radius:12px; outline:none;
  -webkit-appearance:none; appearance:none;
}
.field input[type=date]{direction:ltr; text-align:center; font-weight:700; color-scheme:dark;}
.field input[type=time]{direction:ltr; text-align:center; font-weight:700;}
.field textarea{resize:none; min-height:60px; line-height:1.8;}
.field input:focus, .field textarea:focus{border-color:var(--amber);}

.pri-choices{display:flex; gap:8px;}
.pri-choice{
  flex:1; min-width:0; text-align:center; padding:11px 0; border-radius:12px; border:1.5px solid var(--border);
  font-size:13px; font-weight:700; color:var(--text-dim); cursor:pointer;
}
.pri-choice.sel{border-color:var(--amber); background:var(--amber-soft); color:var(--amber);}
.pri-choice[data-p=high].sel{border-color:var(--rose); background:var(--rose-soft); color:var(--rose);}
.pri-choice[data-p=medium].sel{border-color:var(--amber); background:var(--amber-soft); color:var(--amber);}
.pri-choice[data-p=low].sel{border-color:var(--blue); background:var(--blue-soft); color:var(--blue);}

.sheet-actions{display:flex; gap:10px; margin-top:20px;}
.btn-primary{
  flex:1; background:var(--amber); color:#1A1200; border:none; padding:14px 0;
  border-radius:13px; font-family:inherit; font-weight:800; font-size:14.5px; cursor:pointer;
}
.btn-secondary{
  background:var(--surface); color:var(--text-dim); border:1px solid var(--border);
  padding:14px 18px; border-radius:13px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer;
}

.due-overlay{
  position:fixed; inset:0; background:rgba(6,9,18,0.8); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.due-overlay.show{opacity:1; pointer-events:auto;}
.due-card{
  background:var(--bg-elev); border:1.5px solid var(--amber); border-radius:20px;
  padding:26px 22px; max-width:360px; width:100%; text-align:center;
  box-shadow:0 0 60px -10px rgba(231,165,60,0.35);
}
.due-card .clock-emoji{font-size:32px; margin-bottom:10px;}
.due-card .due-time{color:var(--amber); font-weight:800; font-size:13px; margin-bottom:4px;}
.due-card h3{font-size:17px; margin:0 0 22px; font-weight:800; line-height:1.6;}
.due-actions{display:flex; flex-direction:column; gap:9px;}

::-webkit-scrollbar{width:0px;}

/* ---------- Landing page ---------- */
.landing{max-width:1080px; margin:0 auto; padding:0 20px;}
.landing-nav{
  display:flex; align-items:center; justify-content:space-between; padding:22px 0;
}
.landing-nav .nav-cta{
  background:var(--amber); color:#1A1200; border:none; padding:10px 20px;
  border-radius:11px; font-family:inherit; font-weight:800; font-size:13.5px; cursor:pointer; text-decoration:none;
}

.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:50px 0 30px; gap:16px;
}
.hero-badge{
  background:var(--amber-soft); color:var(--amber); font-size:12.5px; font-weight:700;
  padding:6px 16px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;
}
.hero-title{
  font-size:36px; font-weight:900; line-height:1.35; max-width:680px; letter-spacing:-.5px;
}
.hero-title .accent{color:var(--amber);}
.hero-sub{
  font-size:15.5px; color:var(--text-dim); line-height:1.9; max-width:520px;
}
.hero-actions{display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; justify-content:center;}
.hero-cta-primary{
  background:var(--amber); color:#1A1200; border:none; padding:15px 28px;
  border-radius:14px; font-family:inherit; font-weight:800; font-size:15px; cursor:pointer;
  text-decoration:none; box-shadow:0 10px 30px -6px rgba(231,165,60,0.4);
}
.hero-cta-secondary{
  background:var(--surface); color:var(--text-dim); border:1px solid var(--border); padding:15px 24px;
  border-radius:14px; font-family:inherit; font-weight:700; font-size:14.5px; cursor:pointer; text-decoration:none;
}
.hero-note{font-size:12px; color:var(--text-faint); margin-top:2px;}

/* phone mockup */
.phone-mockup-wrap{display:flex; justify-content:center; padding:40px 0 10px;}
.phone-frame{
  width:290px; background:var(--bg-elev); border:8px solid #060A14; border-radius:36px;
  padding:14px 14px 20px; box-shadow:0 40px 80px -20px rgba(0,0,0,0.6);
}
.phone-notch{width:70px; height:18px; background:#060A14; border-radius:10px; margin:0 auto 10px;}
.phone-screen-title{font-size:11px; color:var(--amber); font-weight:700; margin-bottom:2px;}
.phone-screen-date{font-size:13px; font-weight:800; margin-bottom:14px;}
.phone-task{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:9px 10px; margin-bottom:8px;
}
.phone-task .pdot2{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800;}
.phone-task .ptxt{font-size:11.5px; font-weight:600; flex:1;}
.phone-task .ptime{font-size:10px; color:var(--text-faint); direction:ltr;}
.phone-task.done{opacity:.5;}
.phone-task.done .ptxt{text-decoration:line-through;}

/* feature grid */
.section-heading{text-align:center; margin:70px 0 36px;}
.section-heading .eyebrow{font-size:12.5px; color:var(--amber); font-weight:700; margin-bottom:8px;}
.section-heading h2{font-size:26px; font-weight:900; margin:0 0 10px;}
.section-heading p{font-size:14px; color:var(--text-faint); max-width:480px; margin:0 auto; line-height:1.8;}

.features-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
.feature-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 20px; transition:.2s;
}
.feature-card:hover{border-color:var(--amber); transform:translateY(-3px);}
.feature-card .ficon{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:14px;
}
.feature-card h3{font-size:15px; font-weight:800; margin:0 0 8px;}
.feature-card p{font-size:13px; color:var(--text-faint); line-height:1.9; margin:0;}

/* steps */
.steps-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; position:relative;}
.step-item{text-align:center; position:relative;}
.step-num{
  width:38px; height:38px; border-radius:50%; background:var(--amber-soft); color:var(--amber);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; margin:0 auto 14px;
}
.step-item h4{font-size:14.5px; font-weight:800; margin:0 0 8px;}
.step-item p{font-size:13px; color:var(--text-faint); line-height:1.8; margin:0;}

/* pricing (landing) */
.pricing-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px;}
.price-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 18px; text-align:center; position:relative; transition:.2s;
}
.price-card.featured{border-color:var(--amber); background:linear-gradient(155deg, var(--amber-soft), var(--surface));}
.price-card .pbadge2{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--amber); color:#1A1200;
  font-size:10.5px; font-weight:800; padding:4px 12px; border-radius:20px; white-space:nowrap;
}
.price-card .ptitle2{font-size:14px; font-weight:700; color:var(--text-dim); margin-bottom:10px;}
.price-card .pamount{font-size:22px; font-weight:900; margin-bottom:4px;}
.price-card .pamount small{font-size:12px; font-weight:600; color:var(--text-faint);}
.price-card .pperday{font-size:11.5px; color:var(--text-faint); margin-bottom:18px;}
.price-card .pcta{
  display:block; width:100%; background:var(--bg-elev); color:var(--text); border:1px solid var(--border);
  padding:11px 0; border-radius:11px; font-family:inherit; font-weight:700; font-size:13px; cursor:pointer;
  text-decoration:none;
}
.price-card.featured .pcta{background:var(--amber); color:#1A1200; border:none;}

/* faq */
.faq-list{max-width:640px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border-soft); padding:18px 4px;}
.faq-item summary{
  font-size:14.5px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:20px; color:var(--text-faint); font-weight:400;}
.faq-item[open] summary::after{content:'−';}
.faq-item p{font-size:13.5px; color:var(--text-faint); line-height:1.9; margin:12px 0 0;}

/* final cta */
.final-cta{
  text-align:center; background:linear-gradient(155deg, var(--surface), var(--bg-elev)); border:1px solid var(--border);
  border-radius:var(--radius); padding:50px 24px; margin:70px 0 40px;
}
.final-cta h2{font-size:22px; font-weight:900; margin:0 0 12px;}
.final-cta p{font-size:14px; color:var(--text-faint); margin:0 0 24px;}

.landing-footer{
  text-align:center; padding:24px 0 40px; font-size:12px; color:var(--text-faint); border-top:1px solid var(--border-soft); margin-top:30px;
}

@media (max-width:800px){
  .features-grid{grid-template-columns:1fr 1fr;}
  .pricing-grid{grid-template-columns:1fr 1fr;}
  .steps-row{grid-template-columns:1fr;}
  .hero-title{font-size:28px;}
}
@media (max-width:480px){
  .features-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
}

/* ---------- Jalali date picker ---------- */
.jdate-input{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; font-weight:700; font-size:14.5px; color:var(--text);
}
.jdate-input .placeholder{ color:var(--text-faint); font-weight:500; }
.jdate-cal-icon{ font-size:15px; opacity:.6; }

.jdate-panel{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:14px;
  padding:14px; margin-top:8px; max-width:100%; overflow:hidden; box-sizing:border-box;
}
.jdate-header{ display:flex; align-items:center; gap:8px; margin-bottom:12px; min-width:0; }
.jdate-select{
  flex:1; min-width:0; background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:13px; font-weight:700; padding:9px 4px; border-radius:10px;
  outline:none; -webkit-appearance:none; appearance:none; text-align:center; color-scheme:dark;
}
.jdate-weekdays{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); text-align:center;
  font-size:11px; color:var(--text-faint); font-weight:700; margin-bottom:6px;
}
.jdate-days{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.jdate-day{
  aspect-ratio:1; min-width:0; border:none; background:transparent; color:var(--text-dim); border-radius:9px;
  font-size:12.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-family:inherit; padding:0;
}
.jdate-day.empty{ cursor:default; }
.jdate-day.today{ box-shadow: inset 0 0 0 1.5px var(--amber); }
.jdate-day.sel{ background:var(--amber); color:#1A1200; font-weight:800; }
.jdate-today-btn{
  width:100%; margin-top:10px; background:var(--surface); border:1px solid var(--border); color:var(--amber);
  font-family:inherit; font-weight:700; font-size:12.5px; padding:9px 0; border-radius:10px; cursor:pointer;
  box-sizing:border-box;
}

/* ---------- Toast ---------- */
.toast-box{
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--teal); color:#06301f; font-weight:800; font-size:13.5px;
  padding:12px 22px; border-radius:14px; box-shadow:0 10px 30px -6px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:300; white-space:nowrap;
}
.toast-box.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.sheet-error{
  background:var(--rose-soft); color:var(--rose); font-size:13px; font-weight:600;
  padding:10px 14px; border-radius:10px; margin-bottom:14px; text-align:center; display:none;
}

/* ---------- Login page ---------- */
.login-body{display:flex; align-items:center; justify-content:center; padding:20px;}
.login-wrap{width:100%; max-width:380px;}
.login-brand{text-align:center; margin-bottom:26px;}
.login-brand .brand-name{justify-content:center; font-size:24px;}
.login-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 22px;
}
.login-card h2{margin:0 0 20px; font-size:16.5px; font-weight:800; text-align:center;}
.login-error{
  background:var(--rose-soft); color:var(--rose); font-size:13px; font-weight:600;
  padding:10px 14px; border-radius:10px; margin-bottom:16px; text-align:center;
}

/* ---------- Admin dashboard ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-bottom:18px;
}
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:16px; text-align:center;
}
.stat-num{font-size:22px; font-weight:900; color:var(--text);}
.stat-label{font-size:12px; color:var(--text-faint); margin-top:4px; font-weight:600;}

.search-box{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:14px; padding:11px 14px; border-radius:12px; outline:none;
  margin-bottom:14px;
}
.search-box:focus{border-color:var(--amber);}

.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm);}
.data-table{width:100%; border-collapse:collapse; font-size:13px;}
.data-table th{
  background:var(--bg-elev); color:var(--text-faint); font-weight:700; font-size:11.5px;
  text-align:right; padding:10px 12px; white-space:nowrap;
}
.data-table td{
  padding:10px 12px; border-top:1px solid var(--border-soft); white-space:nowrap; color:var(--text-dim);
}
.data-table input[type=text], .data-table input[type=number]{
  background:var(--bg-elev); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:12.5px; padding:6px 8px; border-radius:7px; outline:none;
}

.status-pill{
  display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;
}
.status-teal{background:var(--teal-soft); color:var(--teal);}
.status-amber{background:var(--amber-soft); color:var(--amber);}
.status-rose{background:var(--rose-soft); color:var(--rose);}
.status-blue{background:var(--blue-soft); color:var(--blue);}

@media (max-width:380px){
  .brand-name{font-size:19px;}
  .task-title{font-size:14px;}
}