:root{
  --bg: #fafafa;
  --text: #222;
  --muted: #6b7280;
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.06);

  /* Farah (default pinks) */
  --accent: #ff4d8d;
  --accent-2: #ffa3c0;
  --accent-3: #ffe4ee;

  --prio-high: #ff3b30;
  --prio-med:  #ff9500;
  --prio-low:  #34c759;
}

body.theme-majd{
  --accent:   #2b7bff;
  --accent-2: #95baff;
  --accent-3: #e8f0ff;

  --prio-high:#f44336;
  --prio-med: #ff9800;
  --prio-low: #4caf50;
}

/* base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
img{max-width:100%;display:block}

/* topbar */
.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;background:linear-gradient(180deg,var(--accent-3),transparent)}
.topbar .back{color:var(--accent);text-decoration:none;font-weight:600}
.topbar h1{flex:1;margin:0;font-size:20px}
.tabs{display:flex;gap:8px}
.tabs .tab{border:1px solid #eee;background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer}
.tabs .tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* layout */
.layout{display:grid;grid-template-columns:320px 1fr;gap:18px;max-width:1100px;margin:20px auto;padding:0 16px}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
}

/* calendar */
.calendar{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:12px}
.cal-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center}
#calTitle{text-align:center;font-weight:700}
.cal-head button{border:none;background:#fff;border-radius:8px;padding:6px;cursor:pointer;box-shadow:var(--shadow)}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 4px}
.dow span{font-size:12px;color:var(--muted);text-align:center}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.grid .empty{height:46px}
.daycell{height:58px;border:1px solid #eee;background:#fff;border-radius:12px;display:grid;grid-template-rows:auto 1fr;align-items:start;padding:6px;cursor:pointer}
.daycell .num{font-weight:700}
.daycell .badges{display:flex;gap:4px;align-items:center}
.badge{width:6px;height:6px;border-radius:50%;background:#eee}
.badge.high{background:var(--prio-high)}
.badge.med{background:var(--prio-med)}
.badge.low{background:var(--prio-low)}
.daycell.today{outline:2px dashed var(--accent-2)}
.daycell.selected{box-shadow:0 0 0 2px var(--accent) inset;border-color:var(--accent)}

/* panels */
.panel{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px}
#dayTitle{margin:0 0 8px 0}

/* form */
.form .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}
@media (max-width:700px){ .form .row{grid-template-columns:1fr} }
.form label{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.form input,.form select,.form textarea{border:1px solid #eee;border-radius:10px;padding:10px 12px;font:inherit;background:#fff}
.form textarea{min-height:80px}
.form .actions{display:flex;gap:10px;margin-top:10px}
.form .primary{background:var(--accent);border:none;color:#fff;border-radius:12px;padding:10px 16px;cursor:pointer}
.form button{cursor:pointer}

/* day list */
.day-list .item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid #f2f2f2;border-radius:12px;padding:10px;margin-top:10px;background:#fff}
.prio-dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.prio-dot.high{background:var(--prio-high)}
.prio-dot.med{background:var(--prio-med)}
.prio-dot.low{background:var(--prio-low)}
.actions{display:flex;gap:8px}
.icon-btn{border:1px solid #eee;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.item .time{font-size:12px;color:var(--muted)}
.item .title{font-weight:600}
.item .notes{grid-column:1/-1;font-size:13px;color:#444}

/* cute heart “Done” pill */
.done-toggle{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid #eee;background:#fff;padding:6px 10px;cursor:pointer}
.done-toggle .heart{width:16px;height:16px;display:inline-block;background:var(--accent);clip-path:path("M8 14s-6-3.3-6-8a3.5 3.5 0 0 1 6-2 3.5 3.5 0 0 1 6 2c0 4.7-6 8-6 8z")}
.done-toggle .label{font-weight:600}
.done-toggle.is-done{background:var(--accent);color:#fff;border-color:var(--accent)}
.done-toggle.is-done .heart{background:#fff}

/* To-Do */
.chipbar{display:flex;gap:8px;margin:4px 0 12px}
.chip{border:1px solid #eee;background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.todo-section{margin-bottom:18px}
.todo-section h3{margin:12px 0 8px 0;font-size:16px}
.todo-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.todo-item{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:8px;align-items:center;border:1px solid #f2f2f2;border-radius:10px;padding:8px;background:#fff}
.todo-item .label .topic{color:var(--muted);font-weight:400}
.todo-item .when{font-size:12px;color:var(--muted)}

/* --- Study Tracker (Farah only) --- */
.study-head{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.study-title{margin:0}
.study-stats{display:flex;align-items:center;gap:12px}
.streak{background:var(--accent-3);color:#111;padding:6px 10px;border-radius:999px;font-weight:700}
.progress{width:220px;height:12px;background:#f3f4f6;border-radius:999px;overflow:hidden}
.bar{height:100%;width:0;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;transition:width .35s ease}
.study-note{color:var(--muted);font-size:13px;margin-top:10px}

.study-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.study-day{aspect-ratio:1/1;border:1px dashed #ffd6e6;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:transform .1s ease}
.study-day:hover{transform:translateY(-2px)}
.study-day .num{position:absolute;top:6px;left:8px;font:600 11px/1 system-ui}
.study-day .heart{
  width:24px;height:24px;background:var(--accent);
  clip-path:path("M12 21s-9-5-9-12a5.2 5.2 0 0 1 9-3 5.2 5.2 0 0 1 9 3c0 7-9 12-9 12z");
  opacity:.15; transition:opacity .2s ease, transform .2s ease;
}
.study-day.checked{border-style:solid;border-color:var(--accent)}
.study-day.checked .heart{opacity:1; transform:scale(1.05)}

.study-day.future,
.study-day[disabled]{
  opacity:.55;
  cursor:not-allowed;
}
.study-day[disabled]:hover{ transform:none; }