/* =========================================================
   SAEED — DESIGN TOKENS
   ========================================================= */
:root{
  /* Dark theme (default) */
  --bg-0: #0A0C10;
  --bg-1: #0E1116;
  --bg-2: #12161D;
  --surface: rgba(255,255,255,0.035);
  --surface-hover: rgba(255,255,255,0.06);
  --surface-solid: #151922;
  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.05);

  --text-1: #EDEFF3;
  --text-2: #A6ADBB;
  --text-3: #6C7382;

  --accent: #43B8E8;
  --accent-strong: #5FCBF5;
  --accent-soft: rgba(67,184,232,0.14);
  --accent-2: #8B7CF6;
  --accent-2-soft: rgba(139,124,246,0.14);

  --success: #3ECF8E;
  --warning: #E8A93D;
  --danger: #EE6A6A;

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 30px -12px rgba(0,0,0,0.55);
  --shadow-pop: 0 20px 60px -20px rgba(0,0,0,0.65);

  --font-ar: 'Noto Sans Arabic', 'Inter', sans-serif;
  --font-en: 'Inter', 'Noto Sans Arabic', sans-serif;

  --ease: cubic-bezier(.22,.9,.32,1);
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 84px;
}

[data-theme="light"]{
  --bg-0: #F4F5F7;
  --bg-1: #EEF0F3;
  --bg-2: #E7E9ED;
  --surface: rgba(20,24,32,0.03);
  --surface-hover: rgba(20,24,32,0.055);
  --surface-solid: #FFFFFF;
  --border: rgba(20,24,32,0.09);
  --border-soft: rgba(20,24,32,0.06);

  --text-1: #171A21;
  --text-2: #565D6B;
  --text-3: #8A909C;

  --accent: #1F8FC2;
  --accent-strong: #1279A6;
  --accent-soft: rgba(31,143,194,0.10);
  --accent-2: #6F5FE0;
  --accent-2-soft: rgba(111,95,224,0.10);

  --success: #1FA875;
  --warning: #C7860F;
  --danger: #D5504F;

  --shadow-card: 0 10px 24px -14px rgba(30,35,50,0.18);
  --shadow-pop: 0 24px 60px -20px rgba(30,35,50,0.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(120% 140% at 85% -10%, var(--bg-2) 0%, var(--bg-0) 55%) fixed;
  color: var(--text-1);
  font-family: var(--font-ar);
  -webkit-font-smoothing: antialiased;
  transition: background .35s var(--ease), color .35s var(--ease);
}
[dir="rtl"] body{ font-family: var(--font-ar); }
h1,h2,h3,h4{ margin:0; font-weight:700; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
input{ font-family:inherit; }

::selection{ background: var(--accent-soft); color: var(--text-1); }

/* Numbers / latin use Inter for crisp tabular figures */
.num, .metric-value, .memory-count-num, .progress-percent, .expense-amount{
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

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

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================
   APP SHELL
   ========================================================= */
.app-shell{
  display:flex;
  min-height:100vh;
  width:100%;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-inline-start: 1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  padding: 20px 16px;
  gap: 20px;
  transition: width .3s var(--ease);
  position: sticky;
  top:0;
  height:100vh;
  z-index: 40;
}
.app-shell.is-collapsed .sidebar{ width: var(--sidebar-w-collapsed); }

.sidebar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 4px 4px 8px;
}
.brand{ display:flex; align-items:center; gap:12px; overflow:hidden; }
.brand-mark{
  width:40px; height:40px; border-radius: 13px;
  background: linear-gradient(145deg, var(--accent-2), var(--accent));
  padding: 2px;
  flex-shrink:0;
  box-shadow: 0 6px 18px -6px rgba(67,184,232,0.55);
  position:relative;
}
.brand-mark-img{
  width:100%; height:100%; object-fit:cover;
  border-radius: 11px;
  display:block;
}
.brand-mark-dot{
  position:absolute; bottom:-2px; inset-inline-end:-2px;
  width:11px; height:11px; border-radius:50%;
  background: var(--success);
  border: 2.5px solid var(--bg-1);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.25; white-space:nowrap; }
.brand-name{ font-weight:800; font-size:16px; letter-spacing:.2px; }
.brand-sub{ font-size:11.5px; color: var(--text-3); }
.app-shell.is-collapsed .brand-text{ display:none; }

.sidebar-collapse-btn{
  width:30px; height:30px; border-radius:8px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.sidebar-collapse-btn:hover{ background: var(--surface-hover); color: var(--text-1); }
.sidebar-collapse-btn i{ font-size:13px; transition: transform .3s var(--ease); }
.app-shell.is-collapsed .sidebar-collapse-btn i{ transform: rotate(180deg); }

.nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  color: var(--text-2);
  font-size: 14px;
  font-weight:500;
  position: relative;
  cursor:pointer;
  white-space:nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-item:hover{ background: var(--surface); color: var(--text-1); }
.nav-item.is-active{
  background: var(--accent-soft);
  color: var(--text-1);
}
.nav-item.is-active .nav-icon{ color: var(--accent); }
.nav-item.is-active::before{
  content:"";
  position:absolute;
  inset-inline-start: -16px;
  top:50%; transform: translateY(-50%);
  width:3px; height:18px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}
[dir="rtl"] .nav-item.is-active::before{ inset-inline-start:auto; inset-inline-end:-16px; border-radius:4px 0 0 4px; }
.nav-icon{ font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.nav-label{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.app-shell.is-collapsed .nav-label,
.app-shell.is-collapsed .nav-badge{ display:none; }
.nav-badge{
  font-family: var(--font-en);
  font-size:11px; font-weight:700;
  background: var(--surface-hover);
  color: var(--text-2);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
}
.nav-item.is-active .nav-badge{ background: var(--accent); color: #061019; }

.sidebar-bottom{ display:flex; flex-direction:column; gap:10px; padding-top:10px; border-top:1px solid var(--border-soft); }
.sidebar-user{
  display:flex; align-items:center; gap:10px;
  padding: 8px;
  border-radius: var(--radius-s);
}
.sidebar-user-avatar{
  width:34px; height:34px; border-radius:10px;
  background: var(--surface-hover);
  color: var(--text-1);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
  flex-shrink:0;
  border:1px solid var(--border);
}
.sidebar-user-info{ display:flex; flex-direction:column; line-height:1.25; overflow:hidden; }
.sidebar-user-name{ font-size:13.5px; font-weight:600; white-space:nowrap; }
.sidebar-user-role{ font-size:11px; color: var(--text-3); }
.app-shell.is-collapsed .sidebar-user-info{ display:none; }

.sidebar-scrim{
  display:none;
  position:fixed; inset:0;
  background: rgba(0,0,0,0.5);
  z-index:39;
}

/* =========================================================
   MAIN
   ========================================================= */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  position: sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding: 18px 28px;
  background: color-mix(in srgb, var(--bg-0) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.mobile-menu-btn{ display:none; }
.topbar-greeting{ flex:1; min-width:0; }
.greeting-title{ font-size:19px; font-weight:700; display:flex; align-items:center; gap:8px; }
.wave{ display:inline-block; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave{ 0%,60%,100%{ transform:rotate(0);} 10%{ transform:rotate(14deg);} 20%{ transform:rotate(-8deg);} 30%{ transform:rotate(14deg);} 40%{ transform:rotate(-4deg);} }
.greeting-sub{ font-size:13px; color: var(--text-2); margin-top:2px; }

.topbar-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.ai-status-pill{
  display:flex; align-items:center; gap:9px;
  padding: 5px 14px 5px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size:12.5px; font-weight:600;
  color: var(--text-2);
  margin-inline-end: 4px;
}
[dir="rtl"] .ai-status-pill{ padding: 5px 6px 5px 14px; }
.ai-status-avatar{
  position:relative;
  width:26px; height:26px;
  flex-shrink:0;
}
.ai-status-avatar img{
  width:100%; height:100%; object-fit:cover;
  border-radius:50%;
  border: 1.5px solid var(--border);
}
.ai-status-dot{
  position:absolute; bottom:-1px; inset-inline-end:-1px;
  width:8px; height:8px; border-radius:50%;
  background: var(--success);
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 0 0 rgba(62,207,142,0.6);
  animation: statusPulse 2.2s ease-in-out infinite;
}
.ai-status-dot.is-thinking{ background: var(--warning); animation: statusPulse 0.9s ease-in-out infinite; }
@keyframes statusPulse{
  0%{ box-shadow: 0 0 0 0 rgba(62,207,142,0.45); }
  70%{ box-shadow: 0 0 0 6px rgba(62,207,142,0); }
  100%{ box-shadow: 0 0 0 0 rgba(62,207,142,0); }
}

.icon-btn{
  width:38px; height:38px; border-radius: var(--radius-s);
  display:flex; align-items:center; justify-content:center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor:pointer;
  position:relative;
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.icon-btn:hover{ background: var(--surface-hover); color: var(--text-1); }
.icon-btn:active{ transform: scale(.94); }
.icon-btn i{ font-size:15px; }
.icon-btn.has-dot::after{
  content:"";
  position:absolute; top:8px; inset-inline-end:9px;
  width:7px; height:7px; border-radius:50%;
  background: var(--danger);
  border: 2px solid var(--bg-0);
}

.avatar-btn{
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(145deg, var(--accent-2), var(--accent));
  color:#061019; font-weight:800; font-size:14px;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

.content{ flex:1; padding: 24px 28px 60px; display:flex; flex-direction:column; gap:28px; max-width: 1360px; width:100%; margin: 0 auto; }

/* =========================================================
   HERO / AI COMMAND
   ========================================================= */
.hero-card{
  position:relative;
  border-radius: var(--radius-l);
  border:1px solid var(--border);
  background: linear-gradient(155deg, var(--surface-solid), var(--bg-1));
  padding: 28px 28px 22px;
  overflow:hidden;
  box-shadow: var(--shadow-card);
}
.hero-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--accent-2-soft), transparent 40%, var(--accent-soft));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.hero-card-glow{
  position:absolute;
  inset-inline-end:-120px; top:-160px;
  width:420px; height:420px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  pointer-events:none;
}
.hero-head{ position:relative; z-index:1; max-width:680px; display:flex; align-items:center; gap:16px; }
.hero-head-text{ min-width:0; }
.hero-title{ font-size:26px; font-weight:800; }
.hero-sub{ margin-top:6px; font-size:14px; color: var(--text-2); line-height:1.6; }

.hero-avatar{
  position:relative;
  width:58px; height:58px;
  flex-shrink:0;
}
.hero-avatar img{
  width:100%; height:100%; object-fit:cover;
  border-radius:16px;
  border: 1.5px solid var(--border);
  position:relative; z-index:1;
}
.hero-avatar-ring{
  position:absolute; inset:-5px;
  border-radius:19px;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
  opacity:.55;
  filter: blur(7px);
  animation: heroRingSpin 6s linear infinite;
}
@keyframes heroRingSpin{ to{ transform: rotate(360deg); } }
.hero-avatar-dot{
  position:absolute; bottom:-3px; inset-inline-end:-3px;
  width:14px; height:14px; border-radius:50%;
  background: var(--success);
  border: 2.5px solid var(--surface-solid);
  z-index:2;
}

.chat-log{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:12px;
  margin-top: 18px;
  max-height: 0;
  overflow:hidden;
  transition: max-height .4s var(--ease);
}
.chat-log.has-messages{ max-height: 520px; overflow-y:auto; padding-inline-end:4px; margin-bottom:6px; }

.chat-msg{
  max-width: 78%;
  padding: 12px 15px;
  border-radius: var(--radius-m);
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  animation: msgIn .35s var(--ease);
}
@keyframes msgIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.chat-msg.user{
  align-self:flex-end;
  background: var(--accent);
  color:#06121b;
  border-bottom-left-radius: 4px;
  font-weight:500;
}
[dir="rtl"] .chat-msg.user{ border-bottom-left-radius: var(--radius-m); border-bottom-right-radius:4px; }
.chat-msg.assistant{
  align-self:flex-start;
  background: var(--surface);
  border:1px solid var(--border);
  color: var(--text-1);
  border-bottom-right-radius:4px;
}
[dir="rtl"] .chat-msg.assistant{ border-bottom-right-radius: var(--radius-m); border-bottom-left-radius:4px; }

.typing-dots{ display:inline-flex; gap:4px; align-items:center; padding: 4px 0; }
.typing-dots span{
  width:6px; height:6px; border-radius:50%;
  background: var(--text-3);
  animation: typingBounce 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{ 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-4px); opacity:1; } }

.composer{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 6px 6px 6px 6px;
  margin-top: 6px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.composer:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer-input{
  flex:1; background:transparent; border:none; outline:none;
  color: var(--text-1); font-size:14.5px;
  padding: 10px 8px;
}
.composer-input::placeholder{ color: var(--text-3); }
.composer-btn{
  width:38px; height:38px; border-radius:10px;
  border:none; background: var(--surface);
  color: var(--text-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.composer-btn:hover{ background: var(--surface-hover); color: var(--text-1); }
.composer-btn:active{ transform: scale(.92); }
.composer-btn i{ font-size:15px; }
[dir="rtl"] .composer-send i{ transform: scaleX(-1); }
.composer-btn.composer-send{ background: var(--accent); color:#06121b; }
.composer-btn.composer-send:hover{ background: var(--accent-strong); }
.composer-btn.is-recording{ background: var(--danger); color:#fff; animation: recordPulse 1s infinite; }
@keyframes recordPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(238,106,106,0.5);} 50%{ box-shadow: 0 0 0 6px rgba(238,106,106,0);} }

.quick-prompts{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.quick-prompt-chip{
  font-size:12.5px; font-weight:500;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor:pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.quick-prompt-chip:hover{ background: var(--surface-hover); color: var(--text-1); border-color: var(--accent); }

/* =========================================================
   SECTION / METRICS
   ========================================================= */
.section-block{ display:flex; flex-direction:column; gap:14px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; }
.section-title{ font-size:15.5px; font-weight:700; color: var(--text-1); }

.metrics-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.metric-card{
  background: var(--surface-solid);
  border:1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 18px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow: var(--shadow-card);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.metric-card:hover{ transform: translateY(-2px); border-color: var(--accent); }
.metric-top{ display:flex; align-items:center; justify-content:space-between; }
.metric-icon{
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size:14px;
}
.metric-trend{ font-size:11px; font-weight:700; padding:2px 8px; border-radius: var(--radius-pill); }
.metric-trend.up{ color: var(--success); background: rgba(62,207,142,0.12); }
.metric-trend.down{ color: var(--danger); background: rgba(238,106,106,0.12); }
.metric-trend.flat{ color: var(--text-3); background: var(--surface); }
.metric-value{ font-size:28px; font-weight:800; line-height:1; }
.metric-label{ font-size:13px; color: var(--text-2); font-weight:600; }
.metric-context{ font-size:12px; color: var(--text-3); }
.metric-bar{ height:4px; border-radius:4px; background: var(--border-soft); overflow:hidden; margin-top:2px; }
.metric-bar-fill{ height:100%; border-radius:4px; background: var(--accent); transition: width .6s var(--ease); }

/* =========================================================
   DASHBOARD GRID / PANELS
   ========================================================= */
.dashboard-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.panel{
  background: var(--surface-solid);
  border:1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 20px;
  box-shadow: var(--shadow-card);
  display:flex; flex-direction:column;
  min-width:0;
}
.panel-large{ grid-column: span 2; grid-row: span 2; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; }
.panel-title{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
.panel-icon{ font-size:13px; color: var(--accent); }
.panel-link{ font-size:12.5px; font-weight:600; color: var(--accent); white-space:nowrap; transition: opacity .2s; }
.panel-link:hover{ opacity:.75; }
.panel-note{ font-size:12px; color: var(--text-3); margin-top:-10px; margin-bottom:14px; }

/* Tasks */
.task-list{ display:flex; flex-direction:column; gap:8px; }
.task-item{
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-soft);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.task-item:hover{ background: var(--surface); border-color: var(--border); }
.task-checkbox{
  width:19px; height:19px; border-radius:6px;
  border: 1.5px solid var(--text-3);
  flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.task-checkbox:active{ transform: scale(.85); }
.task-checkbox svg{ opacity:0; transform: scale(.5); transition: opacity .15s var(--ease), transform .15s var(--ease); }
.task-checkbox.is-checked{ background: var(--accent); border-color: var(--accent); }
.task-checkbox.is-checked svg{ opacity:1; transform: scale(1); }
.task-priority-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.task-priority-dot.high{ background: var(--danger); }
.task-priority-dot.mid{ background: var(--warning); }
.task-priority-dot.low{ background: var(--text-3); }
.task-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.task-title{ font-size:13.5px; font-weight:600; }
.task-item.is-checked .task-title{ text-decoration: line-through; color: var(--text-3); }
.task-due{ font-size:11.5px; color: var(--text-3); }
.task-due.overdue{ color: var(--danger); font-weight:600; }
.task-project-tag{
  font-size:11px; font-weight:600; color: var(--text-2);
  background: var(--surface); border:1px solid var(--border);
  padding: 3px 9px; border-radius: var(--radius-pill); flex-shrink:0; white-space:nowrap;
}

/* Projects */
.project-list{ display:flex; flex-direction:column; gap:10px; }
.project-item{
  padding:13px 14px; border-radius: var(--radius-s);
  border:1px solid var(--border-soft);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.project-item:hover{ background: var(--surface); border-color: var(--border); }
.project-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.project-name{ font-size:13.5px; font-weight:700; }
.project-status{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color: var(--text-2); }
.project-status-dot{ width:6px; height:6px; border-radius:50%; }
.project-status-dot.active{ background: var(--accent); }
.project-status-dot.done{ background: var(--success); }
.project-status-dot.paused{ background: var(--text-3); }
.project-cat{ font-size:11.5px; color: var(--text-3); margin-bottom:8px; }
.project-progress-track{ height:5px; border-radius:6px; background: var(--border-soft); overflow:hidden; }
.project-progress-fill{ height:100%; border-radius:6px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .6s var(--ease); }
.project-meta{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color: var(--text-3); }

/* Calendar */
.calendar-list{ display:flex; flex-direction:column; gap:10px; }
.calendar-item{ display:flex; gap:12px; align-items:flex-start; padding: 10px 4px; border-bottom:1px solid var(--border-soft); }
.calendar-item:last-child{ border-bottom:none; }
.calendar-date-chip{
  width:52px; flex-shrink:0; text-align:center;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-s); padding:6px 0;
}
.calendar-date-day{ font-size:10.5px; color: var(--text-3); font-weight:600; }
.calendar-date-time{ font-size:12.5px; font-weight:700; color: var(--accent); font-family: var(--font-en); }
.calendar-body{ flex:1; min-width:0; padding-top:2px; }
.calendar-title{ font-size:13px; font-weight:600; }
.calendar-sub{ font-size:11.5px; color: var(--text-3); margin-top:2px; }

/* Email */
.email-list{ display:flex; flex-direction:column; gap:4px; }
.email-item{ display:flex; align-items:flex-start; gap:12px; padding:11px 6px; border-radius: var(--radius-s); transition: background .2s var(--ease); cursor:pointer; }
.email-item:hover{ background: var(--surface); }
.email-avatar{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-2-soft); color: var(--accent-2);
  font-weight:700; font-size:13px;
}
.email-body{ flex:1; min-width:0; }
.email-top{ display:flex; justify-content:space-between; gap:8px; }
.email-sender{ font-size:13px; font-weight:700; }
.email-time{ font-size:11px; color: var(--text-3); white-space:nowrap; font-family: var(--font-en); }
.email-subject{ font-size:12.5px; color: var(--text-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.email-flag{ font-size:13px; flex-shrink:0; margin-top:2px; color: var(--warning); }

/* Activity */
.activity-timeline{ display:flex; flex-direction:column; }
.activity-item{ display:flex; gap:12px; padding-bottom:16px; position:relative; }
.activity-item::before{
  content:""; position:absolute; inset-inline-start:15px; top:30px; bottom:0;
  width:1px; background: var(--border);
}
.activity-item:last-child::before{ display:none; }
.activity-item:last-child{ padding-bottom:0; }
.activity-icon{
  width:31px; height:31px; border-radius:9px; flex-shrink:0;
  background: var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color: var(--accent-2); z-index:1;
}
.activity-body{ flex:1; padding-top:4px; }
.activity-desc{ font-size:13px; font-weight:500; color: var(--text-1); }
.activity-time{ font-size:11px; color: var(--text-3); margin-top:2px; font-family: var(--font-en); }

/* Memory */
.memory-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.memory-list li{
  font-size:12.5px; line-height:1.6; color: var(--text-2);
  padding-inline-start:16px; position:relative;
}
.memory-list li::before{
  content:""; position:absolute; inset-inline-start:0; top:7px;
  width:5px; height:5px; border-radius:50%; background: var(--accent-2);
}
.memory-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); }
.memory-count{ display:flex; align-items:baseline; gap:6px; }
.memory-count-num{ font-size:20px; font-weight:800; color: var(--accent-2); }
.memory-count-label{ font-size:11.5px; color: var(--text-3); }

/* Expenses */
.expenses-body{ display:flex; flex-direction:column; gap:14px; }
.expense-headline{ display:flex; align-items:baseline; justify-content:space-between; }
.expense-amount{ font-size:26px; font-weight:800; }
.expense-trend{ font-size:12px; font-weight:700; padding:3px 9px; border-radius: var(--radius-pill); }
.expense-trend.up{ color: var(--danger); background: rgba(238,106,106,0.12); }
.expense-trend.down{ color: var(--success); background: rgba(62,207,142,0.12); }
.expense-caption{ font-size:11.5px; color: var(--text-3); margin-top:-8px; }
.expense-chart{ width:100%; height:86px; }
.expense-chart-bar{ transition: height .5s var(--ease); }

/* Quick actions */
.quick-actions-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.quick-action-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding: 14px 12px;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-1);
  cursor:pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
  text-align: start;
}
.quick-action-btn:hover{ background: var(--surface-hover); border-color: var(--accent); }
.quick-action-btn:active{ transform: scale(.97); }
.quick-action-icon{ font-size:15px; color: var(--accent); }
.quick-action-label{ font-size:12px; font-weight:600; }

/* Empty state */
.empty-state{ padding: 30px 10px; text-align:center; color: var(--text-3); font-size:13px; }

/* =========================================================
   NOTIFICATIONS PANEL
   ========================================================= */
.notif-panel{
  position:fixed; top:0; inset-inline-end:0; bottom:0;
  width: 380px; max-width: 92vw;
  background: var(--surface-solid);
  border-inline-start: 1px solid var(--border);
  z-index: 100;
  display:flex; flex-direction:column;
  transform: translateX(105%);
  transition: transform .35s var(--ease);
  box-shadow: var(--shadow-pop);
}
[dir="rtl"] .notif-panel{ transform: translateX(-105%); }
.notif-panel.is-open{ transform: translateX(0); }
.notif-panel-head{ display:flex; align-items:center; justify-content:space-between; padding: 20px 20px; border-bottom:1px solid var(--border-soft); }
.notif-panel-head h3{ font-size:15px; }
.notif-list{ padding: 10px 14px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.notif-item{ display:flex; gap:12px; padding:13px 10px; border-radius: var(--radius-s); transition: background .2s var(--ease); }
.notif-item:hover{ background: var(--surface); }
.notif-item.is-unread{ background: var(--accent-soft); }
.notif-icon{ font-size:14px; flex-shrink:0; margin-top:2px; color: var(--accent); }
.notif-text{ font-size:13px; font-weight:500; line-height:1.5; }
.notif-time{ font-size:11px; color: var(--text-3); margin-top:3px; }

.notif-scrim{
  display:none;
  position:fixed; inset:0; background: rgba(0,0,0,0.45);
  z-index:99;
}
.notif-scrim.is-open{ display:block; }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; bottom:24px; left:50%;
  transform: translate(-50%, 20px);
  background: var(--surface-solid);
  border:1px solid var(--border);
  color: var(--text-1);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size:13px; font-weight:600;
  box-shadow: var(--shadow-pop);
  opacity:0; pointer-events:none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index: 200;
  white-space:nowrap;
}
.toast.is-visible{ opacity:1; transform: translate(-50%, 0); pointer-events:auto; }