@font-face{
  font-family:'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

:root{
  --bg-deep:#050f24;
  --bg-mid:#0a2748;
  --cyan:#35b6e8;
  --cyan-2:#4fd8d0;
  --gold:#f2c265;
  --violet:#8a6ef0;
  --ice:#eaf7ff;
  --ice-rgb:234,247,255;
  --danger:#ef5b6b;
  --success:#39c98f;
  --warn:#f0ad4e;
  --glass:rgba(255,255,255,0.05);
  --glass-brd:rgba(255,255,255,0.12);
  --surface-1:rgba(255,255,255,0.055);
  --surface-2:rgba(255,255,255,0.02);
  --input-bg:rgba(255,255,255,0.06);
  --panel-grad-1:#0c2d52;
  --panel-grad-2:#071a33;
  --sidebar-grad-1:rgba(12,45,82,0.75);
  --sidebar-grad-2:rgba(7,26,51,0.75);
  --scrollbar-thumb:rgba(255,255,255,0.15);
  --select-opt-bg:#0a2748;
  --sidebar-w:260px;
}

/* ---------- تم روشن ---------- */
:root[data-theme="light"]{
  --bg-deep:#eef3fa;
  --bg-mid:#e2ebf6;
  --ice:#152238;
  --ice-rgb:21,34,56;
  --glass:rgba(20,45,90,0.05);
  --glass-brd:rgba(20,45,90,0.14);
  --surface-1:rgba(255,255,255,0.75);
  --surface-2:rgba(255,255,255,0.4);
  --input-bg:rgba(20,45,90,0.045);
  --panel-grad-1:#ffffff;
  --panel-grad-2:#eef3fa;
  --sidebar-grad-1:rgba(255,255,255,0.85);
  --sidebar-grad-2:rgba(226,235,246,0.85);
  --scrollbar-thumb:rgba(20,45,90,0.18);
  --select-opt-bg:#ffffff;
}
:root[data-theme="light"] .orb{ opacity:.18; }
:root[data-theme="light"] .chk{ border-color:rgba(20,45,90,0.22); }
:root[data-theme="light"] .glass-card{ box-shadow:0 18px 40px -26px rgba(30,60,110,0.28); }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:'Vazirmatn', Tahoma, sans-serif;
  background: var(--bg-deep);
  color: var(--ice);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* ---------- background mesh ---------- */
.mesh{ position:fixed; inset:0; z-index:-2; background:
  radial-gradient(circle at 15% 15%, rgba(63,196,241,0.18), transparent 45%),
  radial-gradient(circle at 85% 85%, rgba(138,110,240,0.16), transparent 50%),
  linear-gradient(160deg, var(--bg-deep), var(--bg-mid) 60%, var(--bg-deep));
}
.orb{ position:fixed; width:420px; height:420px; border-radius:50%; filter:blur(90px); opacity:.35; z-index:-1; }
.orb-1{ top:-120px; right:-100px; background:var(--cyan); }
.orb-2{ bottom:-160px; left:-120px; background:var(--violet); }

/* ---------- layout ---------- */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 auto;
  background:linear-gradient(180deg, var(--sidebar-grad-1), var(--sidebar-grad-2));
  border-inline-start:1px solid var(--glass-brd);
  backdrop-filter:blur(14px);
  display:flex; flex-direction:column;
  padding:26px 20px; gap:8px;
  position:sticky; top:0; height:100vh;
  overflow-y:auto; overflow-x:hidden;
}
.brand{ display:flex; align-items:center; gap:10px; margin-bottom:24px; padding:0 4px; }
.brand .logo{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(150deg, var(--cyan), var(--violet));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(63,196,241,0.35);
}
.brand .logo svg{ width:22px; height:22px; stroke:#04101f; stroke-width:2; fill:none; }
.brand h1{ font-size:16px; font-weight:800; }
.brand span{ font-size:11px; color:rgba(var(--ice-rgb),0.5); }

.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  color:rgba(var(--ice-rgb),0.7); text-decoration:none;
  font-size:13.5px; font-weight:600;
  transition:background .2s ease, color .2s ease, transform .2s ease;
  border:1px solid transparent;
}
.nav-link svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; flex:0 0 auto; }
.nav-link:hover{ background:var(--glass); color:var(--ice); transform:translateX(-3px); }
.nav-link.active{
  background:linear-gradient(120deg, color-mix(in srgb, var(--cyan) 22%, transparent), rgba(255,255,255,0.04));
  color:var(--ice); border-color:rgba(255,255,255,0.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
}
.nav-link.active svg{ color:var(--cyan); }
.nav-group-label{ font-size:11px; color:rgba(var(--ice-rgb),0.35); margin:14px 6px 2px; font-weight:700; letter-spacing:.5px; }

.sidebar-footer{ margin-top:auto; padding-top:16px; border-top:1px solid var(--glass-brd); font-size:11px; color:rgba(var(--ice-rgb),0.4); }

.pwa-install-btn{
  width:100%; cursor:pointer; font-family:inherit; background:linear-gradient(120deg, rgba(53,182,232,0.18), rgba(138,110,240,0.14));
  border:1px solid rgba(255,255,255,0.16); margin-top:6px;
}
.pwa-install-btn:hover{ background:linear-gradient(120deg, rgba(53,182,232,0.28), rgba(138,110,240,0.22)); }
.pwa-install-btn svg{ color:var(--cyan); }

.ios-install-hint{
  font-size:11px; line-height:1.7; color:rgba(var(--ice-rgb),0.55);
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:12px;
  padding:10px 12px; margin-top:8px;
}

.main{ flex:1 1 auto; padding:26px 32px 60px; max-width:100%; overflow-x:hidden; }

.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:14px; }
.topbar h2{ font-size:22px; font-weight:800; }
.topbar .today{
  display:flex; align-items:center; gap:8px; font-size:12.5px;
  background:var(--glass); border:1px solid var(--glass-brd);
  padding:8px 16px; border-radius:100px; color:rgba(var(--ice-rgb),0.75);
}
.topbar .today svg{ width:15px; height:15px; stroke:var(--gold); fill:none; stroke-width:1.8; }

/* ---------- cards / glass ---------- */
.glass-card{
  background:linear-gradient(160deg, var(--surface-1), var(--surface-2));
  border:1px solid var(--glass-brd);
  border-radius:18px;
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,0.6);
}

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px; margin-bottom:22px; }
.stat-card{ padding:20px; position:relative; overflow:hidden; }
.stat-card .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat-card .icon{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent, var(--cyan)) 26%, transparent), rgba(255,255,255,0.05));
  color:var(--accent, var(--cyan));
}
.stat-card .icon svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; }
.stat-card .num{ font-size:26px; font-weight:800; }
.stat-card .label{ font-size:12px; color:rgba(var(--ice-rgb),0.55); margin-top:2px; }
.stat-card .badge-trend{ position:absolute; top:16px; left:16px; font-size:11px; padding:3px 9px; border-radius:100px; background:rgba(57,201,143,0.15); color:var(--success); }

.charts-row{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:22px; }
.chart-box{ padding:20px 22px; }
.chart-box h3{ font-size:14px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.chart-box h3 svg{ width:16px; height:16px; stroke:var(--cyan); fill:none; stroke-width:1.8; }
.chart-canvas-wrap{ position:relative; height:230px; }

@media (max-width:980px){ .charts-row{ grid-template-columns:1fr; } }

/* ---------- filter tabs ---------- */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tab-btn{
  padding:9px 18px; border-radius:100px; font-size:12.5px; font-weight:700; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-brd); color:rgba(var(--ice-rgb),0.65);
  transition:all .2s ease; white-space:nowrap;
}
.tab-btn:hover{ color:var(--ice); }
.tab-btn.active{ background:linear-gradient(90deg, var(--cyan), var(--cyan-2)); color:#03192c; border-color:transparent; }

.toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.search-box{ position:relative; flex:1 1 240px; min-width:200px; }
.search-box input{
  width:100%; padding:10px 40px 10px 14px; border-radius:12px;
  background:var(--glass); border:1px solid var(--glass-brd); color:var(--ice); font-family:inherit; font-size:13px;
}
.search-box svg{ position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:rgba(var(--ice-rgb),0.4); fill:none; stroke-width:1.8; }
select.filter-select{
  padding:10px 14px; border-radius:12px; background:var(--glass); border:1px solid var(--glass-brd);
  color:var(--ice); font-family:inherit; font-size:12.5px; cursor:pointer;
}
select.filter-select option{ background:var(--select-opt-bg); color:var(--ice); }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:12px;
  font-size:13px; font-weight:700; cursor:pointer; border:none; font-family:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.btn-primary{ background:linear-gradient(90deg, var(--cyan), var(--cyan-2)); color:#03192c; box-shadow:0 10px 24px rgba(63,196,241,0.3); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:var(--glass); color:var(--ice); border:1px solid var(--glass-brd); }
.btn-ghost:hover{ background:rgba(255,255,255,0.1); }
.btn-danger{ background:rgba(239,91,107,0.15); color:var(--danger); border:1px solid rgba(239,91,107,0.3); }
.btn-danger:hover{ background:rgba(239,91,107,0.25); }
.btn-sm{ padding:6px 12px; font-size:11.5px; border-radius:9px; }
.btn-icon{ width:34px; height:34px; padding:0; justify-content:center; border-radius:10px; }

/* ---------- task list ---------- */
.task-list{ display:flex; flex-direction:column; gap:12px; }
.task-card{
  padding:16px 18px; display:flex; align-items:center; gap:14px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.task-card:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -20px rgba(0,0,0,0.7); }
.task-card.completed{ opacity:.55; }
.task-card.completed .task-title{ text-decoration:line-through; }
.task-card.overdue{ border-color:rgba(239,91,107,0.4); }

.chk{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; cursor:pointer;
  border:2px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center;
  transition:all .2s ease; color:transparent;
}
.chk svg{ width:14px; height:14px; stroke:#04101f; fill:none; stroke-width:3; }
.chk.done{ background:linear-gradient(135deg, var(--success), var(--cyan-2)); border-color:transparent; color:#04101f; }

.task-body{ flex:1 1 auto; min-width:0; }
.task-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.task-title{ font-size:14.5px; font-weight:700; }
.task-desc{ font-size:12px; color:rgba(var(--ice-rgb),0.5); margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.badge{ font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:100px; white-space:nowrap; }
.badge-daily{ background:rgba(63,196,241,0.16); color:var(--cyan); }
.badge-weekly{ background:rgba(138,110,240,0.18); color:var(--violet); }
.badge-monthly{ background:rgba(242,194,101,0.18); color:var(--gold); }
.badge-project{ background:rgba(57,201,143,0.16); color:var(--success); }

.badge-low{ background:rgba(255,255,255,0.08); color:rgba(var(--ice-rgb),0.6); }
.badge-medium{ background:rgba(240,173,78,0.16); color:var(--warn); }
.badge-high{ background:rgba(239,91,107,0.16); color:var(--danger); }
.badge-urgent{ background:var(--danger); color:#fff; }

.due-tag{ font-size:11px; color:rgba(var(--ice-rgb),0.55); display:flex; align-items:center; gap:5px; }
.due-tag svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; }
.due-tag.overdue{ color:var(--danger); font-weight:700; }

.progress-wrap{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.progress-bar{ flex:1 1 auto; height:6px; border-radius:100px; background:rgba(255,255,255,0.08); overflow:hidden; max-width:220px; }
.progress-fill{ height:100%; border-radius:100px; background:linear-gradient(90deg, var(--cyan), var(--cyan-2)); transition:width .4s ease; }
.progress-pct{ font-size:11px; color:rgba(var(--ice-rgb),0.55); min-width:30px; }

.task-actions{ flex:0 0 auto; display:flex; gap:6px; }

.empty-state{ text-align:center; padding:60px 20px; color:rgba(var(--ice-rgb),0.45); }
.empty-state svg{ width:52px; height:52px; stroke:rgba(var(--ice-rgb),0.25); fill:none; stroke-width:1.4; margin-bottom:14px; }

/* ---------- modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(2,8,18,0.75); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal-overlay.show{ display:flex; animation:fadeIn .2s ease; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.modal{
  width:100%; max-width:520px; padding:28px; position:relative;
  background:linear-gradient(160deg, var(--panel-grad-1), var(--panel-grad-2));
  border:1px solid rgba(255,255,255,0.16); border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,0.55);
  max-height:90vh; overflow-y:auto;
}
.modal h3{ font-size:17px; font-weight:800; margin-bottom:18px; color:var(--gold); }
.form-row{ margin-bottom:14px; }
.form-row label{ display:block; font-size:12px; color:rgba(var(--ice-rgb),0.6); margin-bottom:6px; font-weight:600; }
.form-row input[type=text], .form-row input[type=date], .form-row input[type=password], .form-row textarea, .form-row select{
  width:100%; padding:11px 14px; border-radius:11px; background:var(--input-bg);
  border:1px solid var(--glass-brd); color:var(--ice); font-family:inherit; font-size:13px;
  -webkit-appearance:none; appearance:none; outline:none; transition:border-color .15s ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ border-color:rgba(53,182,232,0.55); }
.form-row select option{ background:var(--select-opt-bg); color:var(--ice); }

/* حذف آیکون پیش‌فرض مرورگر برای نمایش رمز عبور (مثلاً Edge) تا از آیکون سفارشی استفاده شود */
input[type=password]::-ms-reveal, input[type=password]::-ms-clear{ display:none; }

/* رفع پس‌زمینه‌ی زرد پیش‌فرض مرورگر هنگام تکمیل خودکار فرم */
.form-row input:-webkit-autofill,
.form-row input:-webkit-autofill:hover,
.form-row input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ice);
  -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset;
  transition:background-color 9999s ease-in-out 0s;
  caret-color:var(--ice);
}

.password-field{ position:relative; }
.password-field input[type=password], .password-field input[type=text]{
  padding-inline-end:44px; direction:ltr; text-align:right; letter-spacing:2px;
}
.password-toggle-btn{
  position:absolute; inset-inline-end:4px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer; border-radius:9px; padding:0;
  color:rgba(var(--ice-rgb),0.5); transition:color .15s ease, background .15s ease;
}
.password-toggle-btn:hover{ color:var(--ice); background:rgba(255,255,255,0.08); }
.password-toggle-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
.password-toggle-btn .icon-eye-off{ display:none; }
.password-toggle-btn.showing .icon-eye{ display:none; }
.password-toggle-btn.showing .icon-eye-off{ display:block; }
.form-row textarea{ resize:vertical; min-height:70px; }
.form-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-row input[type=range]{ width:100%; accent-color:var(--cyan); }
.range-val{ font-size:12px; color:var(--cyan); font-weight:700; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ---------- مودال تأییدیه‌ی سفارشی ---------- */
.confirm-modal{ max-width:400px; text-align:center; padding:34px 28px 26px; }
.confirm-icon{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  animation:confirmPop .28s cubic-bezier(.34,1.56,.64,1);
}
.confirm-icon svg{ width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.9; }
.confirm-icon.confirm-icon-danger{ background:rgba(239,91,107,0.15); color:var(--danger); box-shadow:0 0 0 8px rgba(239,91,107,0.06); }
.confirm-icon.confirm-icon-info{ background:rgba(63,196,241,0.15); color:var(--cyan); box-shadow:0 0 0 8px rgba(63,196,241,0.06); }
@keyframes confirmPop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }
.confirm-modal h3{ text-align:center; margin-bottom:10px; }
.confirm-message{ font-size:13px; color:rgba(var(--ice-rgb),0.72); line-height:1.9; margin:0; }
.confirm-modal .modal-actions{ justify-content:center; }
.confirm-modal .btn{ min-width:110px; justify-content:center; }

.priority-picker{ display:flex; gap:8px; }
.priority-opt{ flex:1; text-align:center; padding:9px; border-radius:10px; font-size:11.5px; font-weight:700; cursor:pointer; border:1px solid var(--glass-brd); background:var(--glass); color:rgba(var(--ice-rgb),0.6); }
.priority-opt.sel-low.selected{ background:rgba(255,255,255,0.14); color:var(--ice); border-color:rgba(255,255,255,0.3); }
.priority-opt.sel-medium.selected{ background:rgba(240,173,78,0.2); color:var(--warn); border-color:var(--warn); }
.priority-opt.sel-high.selected{ background:rgba(239,91,107,0.2); color:var(--danger); border-color:var(--danger); }
.priority-opt.sel-urgent.selected{ background:var(--danger); color:#fff; border-color:var(--danger); }

/* ---------- jalali datepicker ---------- */
.jdp-wrap{ position:relative; }
.jdp-input{ cursor:pointer; padding-inline-end:40px !important; }
.jdp-input::placeholder{ color:rgba(var(--ice-rgb),0.35); }
.jdp-icon{
  position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; stroke:var(--cyan); fill:none; stroke-width:1.8; cursor:pointer; pointer-events:auto;
}
.jdp-inline{
  width:100%; box-sizing:border-box; padding:14px 16px 16px; margin:-6px 0 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-brd); border-radius:14px;
  font-family:'Vazirmatn', Tahoma, sans-serif;
}
.jdp-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.jdp-title{ font-size:13.5px; font-weight:800; color:var(--gold); }
.jdp-nav{
  width:28px; height:28px; border-radius:9px; background:var(--glass); border:1px solid var(--glass-brd);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ice);
}
.jdp-nav:hover{ background:rgba(255,255,255,0.12); }
.jdp-nav svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.jdp-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.jdp-weekdays span{ text-align:center; font-size:11px; color:rgba(var(--ice-rgb),0.4); font-weight:700; padding:4px 0; }
.jdp-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.jdp-day{
  display:flex; align-items:center; justify-content:center; height:32px; border-radius:9px;
  font-size:12.5px; cursor:pointer; color:rgba(var(--ice-rgb),0.85); transition:all .15s ease;
}
.jdp-day:not(.empty):hover{ background:rgba(255,255,255,0.1); }
.jdp-day.today{ border:1px solid var(--cyan); color:var(--cyan); font-weight:700; }
.jdp-day.selected{ background:linear-gradient(135deg, var(--cyan), var(--cyan-2)); color:#03192c; font-weight:800; }
.jdp-day.empty{ cursor:default; }
.jdp-footer{ display:flex; gap:8px; margin-top:12px; border-top:1px solid var(--glass-brd); padding-top:12px; }
.jdp-btn{
  flex:1; padding:8px; border-radius:9px; font-size:11.5px; font-weight:700; cursor:pointer; border:none;
  background:linear-gradient(90deg, var(--cyan), var(--cyan-2)); color:#03192c; font-family:inherit;
}
.jdp-btn.ghost{ background:var(--glass); color:rgba(var(--ice-rgb),0.7); border:1px solid var(--glass-brd); }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:linear-gradient(160deg, var(--panel-grad-1), var(--panel-grad-2)); border:1px solid var(--glass-brd);
  padding:12px 22px; border-radius:100px; font-size:13px; font-weight:600; z-index:100;
  box-shadow:0 15px 40px rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:all .3s cubic-bezier(.34,1.2,.64,1);
  display:flex; align-items:center; gap:9px; max-width:calc(100vw - 32px);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast-icon{ display:flex; flex:0 0 auto; width:20px; height:20px; border-radius:50%; align-items:center; justify-content:center; }
.toast-icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.toast-msg{ line-height:1.6; }
.toast.error{ color:var(--danger); border-color:rgba(239,91,107,0.4); }
.toast.error .toast-icon{ color:var(--danger); }
.toast.success{ color:var(--success); border-color:rgba(57,201,143,0.4); }
.toast.success .toast-icon{ color:var(--success); }
.toast.info{ color:var(--cyan); border-color:rgba(63,196,241,0.4); }
.toast.info .toast-icon{ color:var(--cyan); }

/* ---------- منوی همبرگری و سایدبار کشویی موبایل ---------- */
.mobile-menu-toggle{
  display:none; position:fixed; top:16px; right:16px; z-index:60;
  width:44px; height:44px; border-radius:13px; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--cyan), var(--violet)); border:none; cursor:pointer;
  box-shadow:0 10px 24px rgba(63,196,241,0.35);
  transition:opacity .2s ease, transform .2s ease;
}
.mobile-menu-toggle svg{ width:20px; height:20px; stroke:#04101f; stroke-width:2.2; fill:none; }
.mobile-menu-toggle.hidden{ opacity:0; pointer-events:none; transform:scale(.85); }
.sidebar-close-btn{
  display:none; margin-inline-start:auto; width:32px; height:32px; border-radius:10px; flex:0 0 auto;
  background:var(--glass); border:1px solid var(--glass-brd); color:var(--ice); cursor:pointer;
  align-items:center; justify-content:center;
}
.sidebar-close-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(2,8,18,0.55); backdrop-filter:blur(3px);
  z-index:45; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.sidebar-backdrop.show{ opacity:1; pointer-events:auto; }

.theme-toggle-btn{
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer; font-family:inherit;
  background:var(--glass); border:1px solid var(--glass-brd); color:var(--ice);
  padding:10px 14px; border-radius:12px; font-size:12.5px; font-weight:700; margin-bottom:10px;
  transition:background .2s ease;
}
.theme-toggle-btn:hover{ background:rgba(255,255,255,0.1); }
.theme-toggle-btn svg{ width:17px; height:17px; stroke:var(--gold); fill:none; stroke-width:1.8; flex:0 0 auto; }
.theme-toggle-btn .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle-btn .icon-sun{ display:block; }
:root[data-theme="light"] .theme-toggle-btn .icon-moon{ display:none; }

.sidebar-user{
  display:flex; align-items:center; gap:10px; padding:12px; margin-top:10px;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:14px;
}
.sidebar-user-avatar{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--cyan), var(--violet)); color:#04101f; font-weight:800; font-size:15px;
}
.sidebar-user-info{ min-width:0; }
.sidebar-user-name{ font-size:12.5px; font-weight:700; color:var(--ice); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-logout{ font-size:11px; color:var(--danger); text-decoration:none; }
.sidebar-logout:hover{ text-decoration:underline; }

@media (max-width:900px){
  .app{ flex-direction:column; }
  .mobile-menu-toggle{ display:flex; }
  .sidebar-backdrop{ display:block; }
  .sidebar-close-btn{ display:flex; }

  .sidebar{
    position:fixed; top:0; right:0; height:100vh; width:min(82vw, 300px);
    flex-direction:column; align-items:stretch; overflow-y:auto; overflow-x:hidden;
    padding:22px 18px; z-index:50;
    transform:translateX(100%);
    transition:transform .28s ease;
    box-shadow:-10px 0 40px rgba(0,0,0,0.35);
  }
  .sidebar.open{ transform:translateX(0); }

  .brand{ margin-bottom:14px; }
  .sidebar-footer{ display:block; }
  .nav-group-label{ display:block; }
  .nav-link{ padding:11px 14px; }
  .nav-link span{ display:inline; }
  .main{ padding:78px 16px 50px; }
  .form-grid2{ grid-template-columns:1fr; }
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:10px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- صفحه‌ی ورود / ثبت‌نام اولیه ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:100%; max-width:420px; padding:32px; }
.auth-title{ font-size:18px; font-weight:800; margin-bottom:8px; color:var(--gold); text-align:center; }
.auth-sub{ font-size:12.5px; line-height:1.9; color:rgba(var(--ice-rgb),0.6); text-align:center; margin-bottom:20px; }
.auth-error{
  background:rgba(239,91,107,0.12); border:1px solid rgba(239,91,107,0.35); color:var(--danger);
  padding:10px 14px; border-radius:12px; font-size:12.5px; margin-bottom:16px; text-align:center;
}
.auth-tabs{ justify-content:center; margin-bottom:14px; }

/* ---------- انتخاب‌گر روزهای هفته (کارهای تکرارشونده) ---------- */
.weekday-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.weekday-chip{
  padding:10px 14px; border-radius:11px; font-size:12px; font-weight:700; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-brd); color:rgba(var(--ice-rgb),0.65);
  transition:all .15s ease;
}
.weekday-chip:hover{ color:var(--ice); }
.weekday-chip.selected{ background:linear-gradient(120deg, var(--cyan), var(--violet)); color:#04101f; border-color:transparent; }

/* ---------- انتخاب‌گر روزهای ماه (کارهای تکرارشونده) ---------- */
.monthday-picker{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.monthday-cell{
  display:flex; align-items:center; justify-content:center; height:36px; border-radius:9px;
  font-size:12.5px; font-weight:600; cursor:pointer; color:rgba(var(--ice-rgb),0.7);
  background:var(--glass); border:1px solid var(--glass-brd); transition:all .15s ease;
}
.monthday-cell:hover{ background:rgba(255,255,255,0.1); }
.monthday-cell.selected{ background:linear-gradient(135deg, var(--cyan), var(--cyan-2)); color:#03192c; font-weight:800; border-color:transparent; }

/* ---------- نشان و کارت کارهای تکرارشونده ---------- */
.badge-recurring{ background:rgba(138,110,240,0.18); color:var(--violet); display:inline-flex; align-items:center; }
.recurring-icon{ cursor:default; border-color:rgba(138,110,240,0.4); color:var(--violet); }
.recurring-icon svg{ stroke:var(--violet); }
.recurring-days{ font-size:12px; color:rgba(var(--ice-rgb),0.7); margin-top:2px; }
.recurring-meta{ font-size:11px; color:rgba(var(--ice-rgb),0.4); margin-top:6px; }
.recurring-card{ align-items:flex-start; }

.recurring-hint{
  display:flex; align-items:flex-start; gap:8px; font-size:11.5px; line-height:1.9;
  color:rgba(var(--ice-rgb),0.55); background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:12px; padding:10px 12px; margin-top:4px;
}
.recurring-hint svg{ width:15px; height:15px; stroke:var(--violet); fill:none; stroke-width:1.8; flex:0 0 auto; margin-top:2px; }
.recurring-hint a{ color:var(--cyan); text-decoration:none; font-weight:700; }
.recurring-hint a:hover{ text-decoration:underline; }