*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f5f7ff; --surface:#ffffff; --surface2:#f0f4ff; --surface3:#e8eeff;
  --border:#dde4f8; --border2:#bbc8f0; --text:#1a2540; --muted:#7080a0;
  --accent:#4f6ef7; --accent-light:#eef1ff; --accent-dark:#3a56e8;
  --green:#16c98d; --green-light:#e4faf4; --yellow:#f5a623; --yellow-light:#fff8ec;
  --red:#f76060; --red-light:#fff2f2; --purple:#8b5cf6; --purple-light:#f5f0ff;
  --orange:#ff7043; --mono:'Space Mono',monospace; --sans:'Heebo',sans-serif;
  --r:14px; --shadow:0 2px 20px rgba(79,110,247,0.07); --shadow-md:0 4px 24px rgba(79,110,247,0.12); --shadow-lg:0 8px 40px rgba(79,110,247,0.16);
}

[data-theme="dark"] {
  --bg:#111827; --surface:#1f2937; --surface2:#374151; --surface3:#4b5563;
  --border:#374151; --border2:#4b5563; --text:#f9fafb; --muted:#9ca3af;
  --accent:#6366f1; --accent-light:rgba(99,102,241,0.15); --accent-dark:#4f46e5;
  --green:#10b981; --green-light:rgba(16,185,129,0.15);
  --yellow:#fbbf24; --yellow-light:rgba(251,191,36,0.15);
  --red:#f43f5e; --red-light:rgba(244,63,94,0.15);
  --purple:#8b5cf6; --purple-light:rgba(139,92,246,0.15);
  --orange:#ff8c42;
  --shadow:0 4px 20px rgba(0,0,0,0.3); --shadow-md:0 6px 24px rgba(0,0,0,0.4); --shadow-lg:0 10px 40px rgba(0,0,0,0.5);
}

html { overscroll-behavior: none; background: #080d1e; }
body {
  font-family: var(--sans);
  background: var(--bg);
  /* Added gradient background for depth */
  background-image: radial-gradient(circle at 15% 50%, rgba(79, 110, 247, 0.08), transparent 25%),
                    radial-gradient(circle at 85% 30%, rgba(22, 201, 141, 0.05), transparent 25%);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  max-width: 100vw;
  overscroll-behavior: none;
}
[data-theme="dark"] body {
  background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.12), transparent 30%),
                    radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.08), transparent 30%);
}

#setup-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,var(--surface2) 0%,var(--bg) 100%)}
.setup-card{background:var(--surface);border-radius:28px;padding:2.75rem;max-width:600px;width:100%;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.setup-logo{font-size:2rem;font-weight:900;color:var(--accent);margin-bottom:0.25rem;letter-spacing:-0.5px}
.setup-logo span{color:var(--green)}
.setup-tagline{color:var(--muted);font-size:0.92rem;margin-bottom:2rem;line-height:1.6}
.field-label{font-size:0.78rem;color:var(--muted);margin-bottom:0.45rem;font-weight:700;display:block;letter-spacing:0.3px}
input,textarea,select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--sans);font-size:0.95rem;padding:0.8rem 1rem;outline:none;transition:all 0.2s}
input:focus,textarea:focus,select:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(79,110,247,0.08)}
textarea{resize:vertical;min-height:72px;line-height:1.6}
[data-theme="dark"] select option { background-color: #1e293b; color: #f8fafc; }
.form-row{margin-bottom:1rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem}
.btn-primary{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:white;border:none;padding:1rem;border-radius:var(--r);font-family:var(--sans);font-size:1rem;font-weight:800;cursor:pointer;transition:all 0.2s;margin-top:0.5rem;box-shadow:0 4px 16px rgba(79,110,247,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(79,110,247,0.4)}
.setup-note{background:linear-gradient(135deg,var(--accent-light),var(--green-light));border-radius:12px;padding:0.85rem 1rem;font-size:0.82rem;color:var(--accent);margin-bottom:1.75rem;line-height:1.6;border:1px solid var(--border2)}
.field-hint{font-size:0.72rem;color:var(--muted);margin-top:0.3rem;line-height:1.4}
.ob-progress{display:flex;gap:0.4rem;margin-bottom:1.75rem}
.ob-dot{height:4px;border-radius:2px;background:var(--border);flex:1;transition:background 0.3s}
.ob-dot.done{background:var(--accent)}
.ob-step{display:none}.ob-step.active{display:block}
.ob-step-label{font-size:0.7rem;color:var(--accent);font-family:var(--mono);font-weight:700;letter-spacing:1px;margin-bottom:1.25rem;text-align:center;text-transform:uppercase}
.ob-q{font-size:1.1rem;font-weight:800;margin-bottom:0.4rem}
.ob-sub{font-size:0.86rem;color:var(--muted);margin-bottom:1.25rem;line-height:1.5}
.ob-opts{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;margin-bottom:1.25rem}
.ob-opt{background:var(--surface2);border:2px solid var(--border);border-radius:12px;padding:0.8rem 1rem;cursor:pointer;transition:all 0.18s;font-size:0.88rem;font-weight:500;text-align:center}
.ob-opt:hover,.ob-opt.sel{border-color:var(--accent);background:var(--accent-light);color:var(--accent);font-weight:700}
/* Anchor builder */
.anchor-builder-empty{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1.4rem 1rem;color:var(--muted);font-size:0.85rem;font-weight:600;text-align:center}
.anchor-builder-empty svg{opacity:0.35}
.anchor-builder-row{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;margin-bottom:0.7rem;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:border-color 0.2s,box-shadow 0.2s}
.anchor-builder-row:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(79,110,247,0.1)}
.ab-card-top{display:flex;align-items:center;gap:0.55rem;padding:0.75rem 0.85rem 0.6rem}
.ab-color-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;border:2px solid rgba(0,0,0,0.08);cursor:pointer;transition:transform 0.15s}
.ab-color-dot:hover{transform:scale(1.12)}
.ab-color-inp{position:absolute;opacity:0;width:28px;height:28px;cursor:pointer}
.ab-color-wrap{position:relative;flex-shrink:0}
.ab-name-inp{flex:1;font-size:0.9rem;font-weight:700;padding:0.45rem 0.7rem;border-radius:10px;border:1.5px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--sans)}
.ab-name-inp:focus{border-color:var(--accent);outline:none;background:var(--surface)}
.ab-del-btn{background:transparent;border:none;padding:0.35rem;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;transition:all 0.15s;line-height:0}
.ab-del-btn:hover{background:var(--red-light);color:var(--red)}
.ab-card-body{padding:0 0.85rem 0.85rem}
.ab-label{font-size:0.62rem;color:var(--muted);font-weight:800;letter-spacing:0.6px;text-transform:uppercase;margin-bottom:0.35rem;display:block}
.ab-required{color:var(--red)}
.ab-days{display:flex;gap:0.28rem;flex-wrap:wrap;margin-bottom:0.65rem}
.ob-day-btn{display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface2);font-size:0.76rem;font-weight:800;cursor:pointer;transition:all 0.15s;user-select:none;color:var(--muted);font-family:var(--sans)}
.ob-day-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.ob-day-btn.active{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 2px 8px rgba(79,110,247,0.25)}
.ab-times-row{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.6rem}
.ab-time-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:12px;padding:0.5rem 0.7rem;display:flex;flex-direction:column;gap:0.15rem}
.ab-time-card:focus-within{border-color:var(--accent)}
.ab-time-inp{font-size:0.95rem;font-weight:700;padding:0;border:none;background:transparent;color:var(--text);font-family:var(--sans);width:100%;cursor:pointer}
.ab-time-inp:focus{outline:none}
.ab-travel-row-new{display:flex;align-items:center;gap:0.6rem;background:var(--accent-light);border-radius:12px;padding:0.5rem 0.75rem;margin-bottom:0.5rem}
.ab-travel-num{width:56px;font-size:0.95rem;font-weight:800;padding:0.3rem 0.45rem;border-radius:8px;text-align:center;border:1.5px solid var(--border);background:var(--surface);font-family:var(--sans)}
.ab-travel-lbl{font-size:0.78rem;font-weight:700;color:var(--accent);flex:1}
.ab-forever-row{display:flex;align-items:center;gap:0.5rem;font-size:0.78rem;font-weight:600;color:var(--muted)}
.ab-forever-row input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.ab-forever-row input[type=date]{flex:1;font-size:0.82rem;padding:0.35rem 0.55rem;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);font-family:var(--sans)}
.ob-per-day-row{display:grid;grid-template-columns:65px 1fr 1fr;gap:0.4rem;align-items:center;margin-top:0.35rem}
.btn-add-anchor{width:100%;background:transparent;color:var(--accent);border:2px dashed var(--accent);border-radius:14px;padding:0.7rem 1rem;font-family:var(--sans);font-size:0.88rem;font-weight:700;cursor:pointer;transition:all 0.2s;margin-bottom:0.5rem;display:flex;align-items:center;justify-content:center;gap:0.4rem}
.btn-add-anchor:hover{background:var(--accent-light);border-style:solid}
.btn-del-row{background:var(--red-light);color:var(--red);border:none;border-radius:8px;padding:0.38rem 0.6rem;cursor:pointer;font-size:0.82rem;font-family:var(--sans)}
.btn-del-row:hover{background:var(--red);color:white}
.ab-travel-section{display:flex;align-items:flex-start;gap:0.6rem;background:var(--surface);border:1.5px solid var(--border2);border-radius:12px;padding:0.65rem 0.8rem;margin-bottom:0.35rem}
.ab-travel-icon{width:30px;height:30px;border-radius:8px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;margin-top:0.1rem}
.ab-travel-label{font-size:0.78rem;font-weight:700;color:var(--text)}
.ab-travel-hint{font-size:0.64rem;color:var(--muted);font-weight:400;margin-right:0.2rem}
.ab-travel-unit{font-size:0.8rem;color:var(--muted);font-weight:600}
/* Profile questions redesign */
.pq-block{margin-bottom:1.35rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
.pq-block:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.pq-header{display:flex;align-items:baseline;gap:0.55rem;margin-bottom:0.6rem}
.pq-num{font-size:0.63rem;font-weight:900;color:var(--accent);font-family:var(--mono);letter-spacing:0.5px;background:var(--accent-light);padding:0.12rem 0.38rem;border-radius:5px;flex-shrink:0}
.pq-q{font-size:0.92rem;font-weight:700;color:var(--text);line-height:1.3}
.pq-opts{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem}
.pq-opt{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:0.65rem 0.85rem;cursor:pointer;transition:all 0.15s;font-size:0.82rem;font-weight:500;text-align:center;color:var(--text2, var(--text));user-select:none}
.pq-opt:hover{border-color:var(--border2);background:var(--surface)}
.pq-opt.sel{border-color:var(--accent);background:var(--accent-light);color:var(--accent);font-weight:700}
.pq-other{font-size:0.77rem;color:var(--muted) !important;font-style:italic;text-align:right;justify-content:flex-end}
.pq-other-inp{width:100%;margin-top:0.4rem;font-size:0.85rem;padding:0.5rem 0.7rem;direction:rtl;border-radius:10px;box-sizing:border-box}
/* Time chart */
.tc-row{margin-bottom:0.85rem}
.tc-row-label{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.32rem}
.tc-row-type{font-size:0.78rem;flex-shrink:0}
.tc-row-name{flex:1;font-size:0.84rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tc-row-val{font-size:0.78rem;font-weight:800;color:var(--muted);font-family:var(--mono);flex-shrink:0;min-width:54px;text-align:start}
.tc-bar-wrap{height:10px;background:var(--surface2);border-radius:5px;overflow:hidden}
.tc-bar{height:100%;border-radius:5px;transition:width 0.4s cubic-bezier(0.34,1.56,0.64,1);min-width:4px}
.tc-summary{background:var(--surface2);border-radius:12px;padding:0.75rem 1rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;gap:0.5rem;flex-wrap:wrap}
.tc-summary-item{text-align:center}
.tc-summary-num{font-size:1.2rem;font-weight:900;color:var(--text);font-family:var(--mono);line-height:1}
.tc-summary-lbl{font-size:0.62rem;color:var(--muted);font-weight:700;margin-top:0.15rem;white-space:nowrap}
.today-timeline{display:flex;flex-direction:column;gap:0.75rem;}

/* Staggered Animation classes */
.timeline-events-area .tl-ev {
  opacity: 0;
  animation: slideUpFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes slideUpFadeIn {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Glassmorphism Slots */
.tl-slot {
  display: flex;
  align-items: stretch;
  border-radius: 20px; /* More rounded */
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6); /* Transparent base */
  backdrop-filter: blur(12px); /* Glassmorphism */
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, opacity 0.2s;
  position: relative;
  z-index: 1;
}
[data-theme="dark"] .tl-slot {
  background: rgba(30, 41, 59, 0.6); /* Dark mode glass */
}
.tl-slot:not(.anchor-slot):hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transform: translateY(-2px);
  border-color: var(--border2);
  z-index: 2;
}
.tl-slot:active {
  transform: scale(0.97); /* Tactile feedback */
}
.tl-slot.done{opacity:0.55;}
.tl-slot.missed{background:var(--red-light);border-color:rgba(247,96,96,0.25);}
.tl-slot.anchor-slot{background:var(--surface2);border-style:solid;border-color:var(--border);opacity:0.72;}
.tl-bar{width:5px;flex-shrink:0;}
.tl-time{width:68px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.8rem 0;background:rgba(79,110,247,0.04);border-left:2px solid rgba(79,110,247,0.15);}
.tl-time-h{font-family:var(--mono);font-size:1.5rem;font-weight:900;color:var(--accent);line-height:1;}
.tl-time-m{font-family:var(--mono);font-size:0.95rem;font-weight:800;color:var(--accent);opacity:0.85;line-height:1;margin-top:5px;}
.tl-body{flex:1;padding:0.85rem 1.1rem;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.tl-meta{display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.35rem;}
.tl-course-tag{font-size:0.65rem;font-weight:800;padding:0.15rem 0.55rem;border-radius:99px;letter-spacing:0.3px;text-transform:uppercase;white-space:nowrap;}
.tl-dur{font-size:0.9rem;font-weight:700;color:var(--text);font-family:var(--mono);opacity:0.85;}
.tl-pri{font-size:0.65rem;font-weight:800;padding:0.12rem 0.45rem;border-radius:6px;white-space:nowrap;}
.tl-status{font-size:0.65rem;font-weight:800;padding:0.15rem 0.5rem;border-radius:99px;white-space:nowrap;}
.tl-title{font-size:0.9rem;font-weight:700;color:var(--text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tl-slot.done .tl-title{text-decoration:line-through;}
.tl-notes{font-size:0.71rem;color:var(--muted);margin-top:0.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tl-actions{display:flex;flex-direction:row;gap:0.4rem;padding:0.75rem 1rem;border-right:1px solid var(--border);align-items:center;justify-content:center;background: rgba(0,0,0,0.015);flex-shrink:0;}
.tl-btn{border:none;border-radius:10px;padding:0.4rem 0.6rem;font-size:0.75rem;cursor:pointer;font-family:var(--sans);font-weight:800;transition:all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);white-space:nowrap;}
.tl-btn:hover{filter:brightness(0.92); transform: translateY(-1px);}
.tl-btn:active{transform: scale(0.92);}
.tl-btn-done{background:var(--green-light);color:var(--green);}
.tl-btn-miss{background:var(--red-light);color:var(--red);}
.tl-btn-undo{background:var(--yellow-light);color:var(--yellow);}
.tl-btn-study{background:var(--purple-light);color:var(--purple);}
.tl-btn-edit{background:var(--surface3);color:var(--muted);}
.tl-btn-del{background:var(--red-light);color:var(--red);}
@media(max-width:600px){.tl-actions{flex-direction:row;flex-wrap:wrap;border-right:none;border-top:1px solid var(--border);width:100%;}.tl-slot{flex-wrap:wrap;}.tl-actions{width:100%;}}

/* ׳×׳™׳§׳•׳Ÿ ׳¡׳œ׳™׳™׳“׳¨ ׳”׳¢׳“׳™׳₪׳•׳× ׳©׳™׳™׳©׳‘ ׳ž׳§׳¦׳” ׳œ׳§׳¦׳” */
input[type="range"] { accent-color: var(--accent); padding: 0; margin: 0; width: 100%; cursor: pointer; box-sizing: border-box; }

#app-screen{display:none}
.app-layout{display:flex;min-height:100vh;overflow-x:hidden}
/* Sidebar is always a slide-in drawer ג€” starts off-screen, opens via .open class */
.sidebar{width:260px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;padding:1rem 1rem calc(100px + env(safe-area-inset-bottom,0px));position:fixed;top:0;right:-270px;bottom:0;z-index:300;box-shadow:-4px 0 30px rgba(0,0,0,0.15);transition:right 0.28s cubic-bezier(0.4,0,0.2,1);overflow-y:scroll;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.sidebar.open{right:0}
.sidebar-hdr{margin-bottom:0.15rem}
.sidebar-logo{font-size:1.4rem;font-weight:900;color:var(--accent);letter-spacing:-0.3px}
.sidebar-logo span{color:var(--green)}
.sidebar-sub{font-size:0.68rem;color:var(--muted);margin-bottom:1.75rem}
.nav-item{display:flex;align-items:center;gap:0.7rem;padding:0.72rem 0.95rem;border-radius:11px;cursor:pointer;color:var(--muted);font-size:0.88rem;font-weight:500;transition:all 0.15s;margin-bottom:0.15rem;border:none;background:none;width:100%;text-align:right;font-family:var(--sans)}
.nav-item:hover{color:var(--text);background:var(--surface2)}
.nav-item.active{color:var(--accent);background:var(--accent-light);font-weight:800}
.nav-icon{font-size:1.1rem;min-width:20px;text-align:center}
.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:0.5rem}
.user-chip{display:flex;align-items:center;gap:0.75rem;padding:0.85rem;background:var(--surface2);border-radius:13px;border:1px solid var(--border)}
.user-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--green));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:0.9rem;color:white;flex-shrink:0}
.user-name{font-size:0.85rem;font-weight:700}
.user-plan{font-size:0.62rem;color:var(--green);font-weight:700;margin-top:1px}
.main-content{margin-right:0;flex:1;padding:1.5rem 2rem 2rem;max-width:100%;transition:margin-right 0.28s cubic-bezier(0.4,0,0.2,1)}
.page{display:none}.page.active{display:block}
.page-header{margin-bottom:1.75rem}
.page-title{font-size:1.65rem;font-weight:900;letter-spacing:-0.3px}
.page-sub{color:var(--muted);font-size:0.88rem;margin-top:0.25rem;line-height:1.5}

.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}
.stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.25rem 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  transition: opacity 0.3s;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.stat-card:hover::before { opacity: 1; }
.stat-num { font-size: 2.2rem; font-weight: 900; line-height: 1; margin-bottom: 0.35rem; font-family: var(--sans); }
.stat-label { font-size: 0.8rem; color: var(--muted); font-weight: 700; text-align: center; }

/* Elegant colors for stats */
.stat-card.blue { border-color: rgba(59, 130, 246, 0.2); }
.stat-card.blue .stat-num { color: #3b82f6; }
.stat-card.green { border-color: rgba(16, 185, 129, 0.2); }
.stat-card.green .stat-num { color: #10b981; }
.stat-card.red { border-color: rgba(244, 63, 94, 0.2); }
.stat-card.red .stat-num { color: #f43f5e; }
.stat-card.yellow { border-color: rgba(245, 158, 11, 0.2); }
.stat-card.yellow .stat-num { color: #f59e0b; }
.stat-card.purple { border-color: rgba(139, 92, 246, 0.2); }
.stat-card.purple .stat-num { color: #8b5cf6; }

[data-theme="dark"] .stat-card { background: rgba(30, 41, 59, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.05); }
.blue .stat-num{color:var(--accent)} .green .stat-num{color:var(--green)} .yellow .stat-num{color:var(--yellow)} .red .stat-num{color:var(--red)} .purple .stat-num{color:var(--purple)}

.section-box{background:var(--surface);border-radius:20px;padding:1.5rem;box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:1.5rem}
.glass-box {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .glass-box {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:0.5rem}
.section-title-sm{font-size:1rem;font-weight:800;color:var(--text)}
.btn-sm{background:var(--accent-light);color:var(--accent);border:none;padding:0.42rem 0.95rem;border-radius:9px;font-size:0.78rem;font-weight:700;cursor:pointer;font-family:var(--sans);transition:all 0.18s}
.btn-sm:hover{background:var(--accent);color:white}
.btn-sm.green{background:var(--green-light);color:var(--green)} .btn-sm.green:hover{background:var(--green);color:white}
.btn-sm.red{background:var(--red-light);color:var(--red)} .btn-sm.red:hover{background:var(--red);color:white}
.btn-sm.purple{background:var(--purple-light);color:var(--purple)} .btn-sm.purple:hover{background:var(--purple);color:white}

table{width:100%;border-collapse:collapse;font-size:0.875rem}
thead tr{background:var(--surface2)}
th{padding:0.7rem 0.9rem;text-align:right;font-size:0.75rem;font-weight:700;color:var(--muted);border-bottom:1px solid var(--border)}
td{padding:0.8rem 0.9rem;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface2)}

.badge{display:inline-flex;align-items:center;padding:0.2rem 0.6rem;border-radius:6px;font-size:0.7rem;font-weight:700;white-space:nowrap}
.badge.done{background:var(--green-light);color:var(--green)} .badge.pending{background:var(--yellow-light);color:var(--yellow)} .badge.missed{background:var(--red-light);color:var(--red)}
.badge.high{background:var(--red-light);color:var(--red)} .badge.med{background:var(--yellow-light);color:var(--yellow)} .badge.low{background:var(--green-light);color:var(--green)}
.badge.exam{background:var(--purple-light);color:var(--purple)} .badge.anchor{background:var(--surface3);color:var(--text)}

.toggle-btn{border:none;border-radius:8px;padding:0.3rem 0.75rem;font-family:var(--sans);font-size:0.75rem;font-weight:700;cursor:pointer;transition:all 0.18s;white-space:nowrap}
.mark-done{background:var(--green-light);color:var(--green)} .mark-done:hover{background:var(--green);color:white}
.mark-undone{background:var(--surface2);color:var(--muted);border:1px solid var(--border)} .mark-undone:hover{background:var(--red-light);color:var(--red)}
.mark-del{background:transparent;color:var(--muted);border:none;font-size:0.78rem;cursor:pointer;padding:0.2rem 0.4rem;border-radius:6px} .mark-del:hover{background:var(--red-light);color:var(--red)}

.course-tag { display:inline-block; padding: 0.3rem 0.7rem; border-radius: 8px; font-weight: 900; color: white !important; font-size: 0.7rem; letter-spacing: 0.5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* Horizontal Date Slider */
/* ג”€ג”€ iOS Calendar-style date strip ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.horizontal-date-slider {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 0.35rem 0 0.5rem;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.date-slide-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0; width: auto; height: auto;
  padding: 0.2rem 0;
  background: none; border: none; border-radius: 0;
  cursor: pointer; gap: 0.18rem;
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: none; box-shadow: none;
}
.date-slide-item:hover { transform: none; }
.date-slide-item:active { opacity: 0.7; }
.date-slide-item.active {
  background: none; color: inherit; border-color: transparent;
  box-shadow: 0 6px 20px rgba(79,110,247,0.35);
  transform: translateY(-2px);
}
.date-slide-day { font-size: 0.6rem; font-weight: 600; color: var(--muted); text-transform: uppercase; line-height: 1; letter-spacing: 0.3px; }
.date-slide-date {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.92rem; font-weight: 600; color: var(--text);
  transition: background 0.18s, color 0.18s;
}
.date-slide-item.is-today:not(.active) .date-slide-date { color: var(--accent); font-weight: 800; }
.date-slide-item.active .date-slide-date { background: var(--accent); color: #fff; font-weight: 800; }
.date-slide-item.active .date-slide-day { color: var(--accent); }

/* ג”€ג”€ CALENDAR GRID ג€” modern Google Calendar style ג”€ג”€ */
.calendar-grid {
  display: grid;
  grid-template-columns: 58px repeat(7, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 1rem;
  min-width: 560px;
  box-shadow: var(--shadow-md);
}
.cal-cell {
  background: var(--surface);
  min-height: 76px;
  padding: 6px 7px;
  font-size: 0.7rem;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transition: background 0.13s;
  cursor: pointer;
  overflow: hidden;
}
.cal-cell:hover { background: var(--accent-light); }
.cal-cell.today-col { background: rgba(79,110,247,0.05); }
.cal-cell.today-col:hover { background: rgba(79,110,247,0.12); }
.cal-cell.row-alt { background: rgba(0,0,0,0.012); }
.cal-cell.row-alt.today-col { background: rgba(79,110,247,0.07); }
/* Half-hour gridline — faint sub-hour reference, painted above the cell bg but behind task cards */
.cal-cell:not(.cal-hour):not(.cal-header)::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px dashed var(--border);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}
.cal-header {
  background: var(--surface);
  font-weight: 900;
  text-align: center;
  padding: 14px 4px 12px;
  font-size: 0.75rem;
  position: sticky;
  top: 56px;
  z-index: 20;
  border-bottom: 2px solid var(--border2);
  border-left: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
  letter-spacing: 0.3px;
}
.cal-header.today-col { background: rgba(79,110,247,0.08); color: var(--accent); }
.cal-hour {
  background: var(--surface2);
  font-family: var(--mono);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-weight: 800;
  font-size: 0.68rem;
  color: var(--muted);
  padding-top: 9px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--border2);
  cursor: default;
  gap: 2px;
}
.cal-hour:hover { background: var(--surface2); }
.cal-task-item {
  border-radius: 9px;
  padding: 5px 9px 5px 7px;
  border-right: 3px solid;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1.3;
  word-break: break-word;
  box-shadow: 0 1px 5px rgba(0,0,0,0.08);
  transition: all 0.15s;
  overflow: hidden;
}
.cal-task-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.cal-task-name { font-weight: 800; line-height: 1.3; }
.cal-task-course { font-size: 0.58rem; opacity: 0.7; margin-top: 1px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-empty-hint {
  color: var(--border2);
  font-size: 0.62rem;
  text-align: center;
  margin-top: auto;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.cal-cell:hover .cal-empty-hint { opacity: 1; }
.edit-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.learning-ready { border-left: 5px solid var(--green); position: relative; overflow: hidden; }.learning-ready::after { content: 'AI READY'; position: absolute; top: 2px; left: 5px; font-size: 0.5rem; font-weight: 900; color: var(--green); opacity: 0.7; }
.live-time-line { position: absolute; left: 0; right: 0; height: 2.5px; background: var(--red); z-index: 10; pointer-events: none; box-shadow: 0 0 6px rgba(247,96,96,0.5); }
.live-time-line::before { content: ''; position: absolute; right: -5px; top: -4.75px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(247,96,96,0.9); }
.live-time-label { position: absolute; left: 3px; top: -7px; font-size: 0.55rem; font-weight: 900; color: var(--red); font-family: var(--mono); background: var(--surface); padding: 0 3px; border-radius: 3px; pointer-events: none; z-index: 11; }

.tutor-overlay { position:fixed; inset:0; background:var(--bg); z-index:300; display:flex; flex-direction:column; animation: fadeIn 0.3s ease; }
.tutor-header { padding:1rem 2rem; background:var(--surface); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; box-shadow:var(--shadow); }
.tutor-body { flex:1; display:flex; overflow:hidden; }
.tutor-doc-area { flex:1; padding:2rem; overflow-y:auto; display:flex; flex-direction:column; }
.tutor-chat-area { width:450px; background:var(--surface); display:flex; flex-direction:column; border-right:1px solid var(--border); box-shadow: -4px 0 20px rgba(0,0,0,0.03); }
.tutor-textarea { flex:1; width:100%; border:2px dashed var(--border2); border-radius:16px; padding:1.5rem; resize:none; font-family:var(--sans); font-size:0.95rem; margin-top:1rem; background:var(--surface2); color:var(--text); transition:all 0.2s; }
.tutor-textarea:focus { border-color:var(--accent); background:var(--surface); outline:none; }
@media(max-width: 900px) { .tutor-body { flex-direction:column; } .tutor-chat-area { width:100%; height:55%; border-right:none; border-top:1px solid var(--border); } .tutor-doc-area { padding:1rem; height:45%; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.ai-response{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.25rem;margin-top:0.75rem;font-size:0.875rem;line-height:1.8;display:none}
.ai-response.show{display:block}
.ai-thinking{color:var(--muted);font-size:0.82rem;display:flex;align-items:center;gap:0.5rem}
.ai-thinking::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.15}}

.pomodoro-box{background:linear-gradient(135deg,var(--purple-light),var(--accent-light));border:1px solid var(--border);border-radius:18px;padding:1.25rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.pomo-timer{font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--purple);min-width:80px}
.pomo-info{flex:1}
.pomo-title{font-size:0.85rem;font-weight:800;color:var(--purple);margin-bottom:0.2rem}
.pomo-sub{font-size:0.75rem;color:var(--text);line-height:1.4;margin-bottom:0.5rem}
.pomo-btns{display:flex;gap:0.5rem;flex-wrap:wrap}
.btn-pomo{border:none;border-radius:9px;padding:0.45rem 0.95rem;font-family:var(--sans);font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.18s}
.btn-pomo.start{background:var(--purple);color:white} .btn-pomo.start:hover{background:#7c3aed}
.btn-pomo.stop{background:var(--red-light);color:var(--red)} .btn-pomo.stop:hover{background:var(--red);color:white}
.btn-pomo.reset{background:var(--surface3);color:var(--muted)} .btn-pomo.reset:hover{background:var(--border2);color:var(--text)}
.pomo-prog-wrap{width:100%;background:rgba(139,92,246,0.12);border-radius:99px;height:5px;margin-top:0.6rem}
.pomo-prog-fill{height:100%;border-radius:99px;background:var(--purple);transition:width 1s linear}
.pomo-custom-select { width: 100%; display: flex; flex-direction: column; }
.pomo-cs-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.7rem 1rem; border-radius: 13px;
  border: 1.5px solid rgba(107,143,255,0.3);
  background: rgba(107,143,255,0.07);
  color: rgba(255,255,255,0.75);
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
  cursor: pointer; text-align: right;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pomo-cs-trigger:hover { border-color: rgba(107,143,255,0.55); background: rgba(107,143,255,0.12); }
/* Inline expanding list ג€” avoids all overflow/stacking-context clipping */
.pomo-cs-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.2s;
  opacity: 0;
  border-radius: 0 0 14px 14px;
  background: rgba(8,13,30,0.97);
  border: 0px solid rgba(255,255,255,0.1);
}
.pomo-cs-list.open {
  max-height: 260px;
  overflow-y: auto;
  opacity: 1;
  border-width: 1px;
  border-top: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  -webkit-overflow-scrolling: touch;
}
.pomo-cs-opt {
  padding: 0.82rem 1rem;
  font-size: 0.9rem; font-weight: 600; font-family: var(--sans);
  color: rgba(255,255,255,0.8);
  cursor: pointer; text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.pomo-cs-opt:last-child { border-bottom: none; }
.pomo-cs-opt:hover, .pomo-cs-opt:active { background: rgba(107,143,255,0.18); color: #a5b4fc; }
/* Light mode */
[data-theme="light"] .pomo-cs-trigger { background: var(--surface2); border-color: rgba(79,110,247,0.3); color: var(--text); }
[data-theme="light"] .pomo-cs-list { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .pomo-cs-opt { color: var(--text); border-color: var(--border); }
[data-theme="light"] .pomo-cs-opt:hover { background: var(--accent-light); color: var(--accent); }

.exam-row-card{background:var(--surface2);border-radius:14px;padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem;border:1px solid var(--border);transition:all 0.2s;flex-wrap:wrap}
.exam-row-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.exam-date-pill{border-radius:12px;padding:0.55rem 0.8rem;text-align:center;min-width:52px;flex-shrink:0}
.exam-day{font-weight:900;font-size:1.4rem;line-height:1;color:white}
.exam-mon{font-size:0.62rem;color:rgba(255,255,255,0.85);margin-top:1px}
.exam-info{flex:1;min-width:180px}
.exam-name{font-size:0.95rem;font-weight:800}
.exam-meta{font-size:0.78rem;color:var(--muted);margin-top:0.2rem}
.exam-days-badge{font-weight:900;font-size:1.5rem;min-width:44px;text-align:center}

.week-nav{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.week-nav-btn{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:0.4rem 0.85rem;cursor:pointer;font-size:0.82rem;transition:all 0.18s;font-family:var(--sans);color:var(--muted)}
.week-nav-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.week-label{font-weight:800;font-size:0.9rem;color:var(--text)}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1050;display:flex;align-items:flex-start;justify-content:center;padding:1.5rem;backdrop-filter:blur(6px);overflow-y:auto;touch-action:none;overscroll-behavior:none}
.modal-box{background:var(--surface);border-radius:22px;padding:2rem;max-width:460px;width:100%;box-shadow:var(--shadow-lg);border:1px solid var(--border);margin:auto;touch-action:pan-y;overscroll-behavior:contain}
.modal-title{font-size:1.15rem;font-weight:900;margin-bottom:0.4rem}
.modal-sub{color:var(--muted);font-size:0.85rem;margin-bottom:1.5rem;line-height:1.5}
.modal-options{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.5rem}
.modal-opt{background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:0.85rem 1rem;cursor:pointer;transition:all 0.15s;font-size:0.9rem;text-align:right; color:var(--text)}
.modal-opt:hover,.modal-opt.sel{border-color:var(--accent);background:var(--accent-light);color:var(--accent);font-weight:700}
.modal-footer{display:flex;gap:0.75rem}
.btn-confirm{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:white;border:none;padding:0.7rem 1.5rem;border-radius:10px;font-family:var(--sans);font-weight:700;cursor:pointer;font-size:0.9rem;box-shadow:0 2px 10px rgba(79,110,247,0.25)}
.btn-cancel{background:transparent;border:1px solid var(--border);color:var(--muted);padding:0.7rem 1.1rem;border-radius:10px;cursor:pointer;font-family:var(--sans);font-size:0.9rem}

.planner-form{display:flex;flex-direction:column;gap:1rem}
.drop-zone{border:2px dashed var(--border2);border-radius:var(--r);padding:1.5rem;text-align:center;cursor:pointer;color:var(--muted);font-size:0.85rem;transition:all 0.2s;background:var(--surface2);line-height:1.6}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:var(--accent-light);color:var(--accent)}
.hp-report-btn{width:100%;padding:0.7rem 1rem;border-radius:14px;background:var(--surface2);color:var(--text);border:1.5px solid var(--border);font-size:0.9rem;font-weight:700;cursor:pointer;font-family:var(--sans);display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:0.75rem;transition:all 0.18s}
.hp-report-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-light)}
.btn-generate{background:linear-gradient(135deg,var(--accent),var(--green));color:white;border:none;padding:1rem;border-radius:var(--r);font-family:var(--sans);font-size:1rem;font-weight:800;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:0.5rem;box-shadow:0 4px 16px rgba(79,110,247,0.25)}
.btn-generate:hover{opacity:0.92;transform:translateY(-2px);box-shadow:0 6px 24px rgba(79,110,247,0.35)}
.btn-generate:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}

.missed-banner{background:var(--red-light);border:1px solid rgba(247,96,96,0.2);border-radius:12px;padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;margin-bottom:0.6rem;flex-wrap:wrap}
.empty-state{text-align:center;padding:3.5rem 2rem;color:var(--muted)}
.empty-icon{font-size:2.8rem;margin-bottom:0.75rem}
.empty-title{font-size:1rem;font-weight:800;color:var(--text);margin-bottom:0.4rem}
.empty-sub{font-size:0.85rem;line-height:1.6}
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);border-radius:12px;padding:0.8rem 1.75rem;font-size:0.85rem;z-index:9999;opacity:0;transition:opacity 0.3s;pointer-events:none;box-shadow:var(--shadow-lg);white-space:nowrap}
.toast.show{opacity:1}
.conf-label{display:flex;justify-content:space-between;font-size:0.7rem;color:var(--muted);margin-top:0.3rem}
input[type="date"],input[type="time"]{color:var(--text)}
.hidden{display:none!important}
.exam-urgency-banner{background:linear-gradient(135deg,var(--red-light),var(--yellow-light));border:1px solid rgba(247,96,96,0.2);border-radius:14px;padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

.tree-bar-wrap{background:var(--surface2);border-radius:99px;height:10px;overflow:hidden;margin:0.85rem 1rem}
.tree-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),#a8e063);transition:width 0.8s}
.xp-hub{background:linear-gradient(145deg,#0f0c29 0%,#302b63 50%,#1a1a4e 100%)!important;border:none!important;color:white;position:relative;overflow:hidden;padding:1.5rem!important}
.xp-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.xp-star{position:absolute;background:white;border-radius:50%;animation:xpTwinkle var(--dur,3s) ease-in-out infinite var(--delay,0s)}
@keyframes xpTwinkle{0%,100%{opacity:0.15;transform:scale(1)}50%{opacity:0.9;transform:scale(1.5)}}
.xp-ring-wrap{position:relative;width:160px;height:160px;flex-shrink:0}
.xp-ring-svg{width:160px;height:160px;transform:rotate(-90deg)}
.xp-ring-bg{fill:none;stroke:rgba(255,255,255,0.12);stroke-width:10}
.xp-ring-fill{fill:none;stroke:#a78bfa;stroke-width:10;stroke-linecap:round;stroke-dasharray:var(--dash,0) 364;transition:stroke-dasharray 1.2s cubic-bezier(0.34,1.56,0.64,1);filter:drop-shadow(0 0 8px rgba(167,139,250,0.8))}
.xp-ring-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:column;align-items:center}
.xp-stat-pill{display:flex;flex-direction:column;align-items:center;padding:0.7rem 1.1rem;border-radius:16px;color:white;min-width:85px;box-shadow:0 4px 16px rgba(0,0,0,0.35);flex:1;max-width:130px}
.xp-course-row{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.65rem}
.xp-course-name{font-size:0.78rem;font-weight:700;color:rgba(255,255,255,0.88);min-width:75px;max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-course-bar-bg{flex:1;height:8px;background:rgba(255,255,255,0.12);border-radius:99px;overflow:hidden}
.xp-course-bar-fill{height:100%;border-radius:99px;transition:width 1s ease}
.xp-course-pct{font-size:0.72rem;font-weight:700;color:rgba(255,255,255,0.75);min-width:30px;text-align:start}
.reward-banner{background:var(--green-light);border:2px solid var(--green);border-radius:12px;padding:1rem 1.25rem;font-weight:700;color:var(--green);font-size:0.9rem;margin-top:1rem;display:none;text-align:center}
.reward-banner.show{display:block}

.anchor-card{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:0.55rem;transition:all 0.2s;}
.anchor-card:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(0,0,0,0.06);}
.anchor-card-strip{width:5px;flex-shrink:0;min-height:56px;}
.anchor-card-body{flex:1;padding:0.78rem 0.9rem;min-width:0;}
.anchor-name-d{font-size:0.9rem;font-weight:800;line-height:1.3;}
.anchor-time-d{font-size:0.74rem;color:var(--muted);margin-top:0.18rem;line-height:1.4;}
.anchor-card-actions{display:flex;gap:0.3rem;padding:0 0.6rem;align-items:center;flex-shrink:0;}
.next-task-widget{display:flex;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:1rem;box-shadow:var(--shadow);overflow:hidden;}
.ntw-accent-bar{width:4px;background:linear-gradient(180deg,var(--accent),var(--green));flex-shrink:0;transition:background 0.3s;}
.ntw-accent-bar.urgent{background:var(--red);}
.ntw-body{flex:1;padding:0.85rem 1.1rem;display:flex;align-items:center;gap:1rem;}
.ntw-info{flex:1;min-width:0;}
.ntw-label{font-size:0.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:0.18rem;}
.ntw-task-name{font-size:0.97rem;font-weight:900;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ntw-course{font-size:0.74rem;color:var(--muted);margin-top:0.12rem;}
.ntw-timer{text-align:center;flex-shrink:0;padding-left:0.5rem;border-left:1px solid var(--border);}
.ntw-digits{font-family:var(--mono);font-size:1.55rem;font-weight:700;color:var(--accent);line-height:1;letter-spacing:1px;transition:color 0.3s;}
.ntw-digits.urgent{color:var(--red);}
.ntw-timer-label{font-size:0.58rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-top:0.12rem;}
.day-check{display:inline-flex;align-items:center;gap:0.3rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:0.35rem 0.65rem;font-size:0.82rem;cursor:pointer;transition:all 0.15s;user-select:none;}
.day-check:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent);}
.day-check input[type="checkbox"]{width:auto;margin:0;}
.planner-mode-btn{flex:1;padding:0.65rem 1rem;border:2px solid var(--border);background:var(--surface);border-radius:12px;font-family:var(--sans);font-size:0.88rem;font-weight:700;cursor:pointer;transition:all 0.2s;color:var(--muted);}
.planner-mode-btn.active{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 3px 12px rgba(79,110,247,0.3);}
.planner-mode-btn:not(.active):hover{border-color:var(--accent);color:var(--accent);}
.semester-course-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.25rem;margin-bottom:0.85rem;transition:border-color 0.2s;position:relative;}
.semester-course-card:hover{border-color:var(--accent);}
.sem-card-header{display:flex;align-items:center;gap:0.55rem;margin-bottom:0.85rem;}
.sem-card-header input[type="text"]{flex:1;font-size:0.9rem;font-weight:700;padding:0.5rem 0.7rem;}
.sem-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;}
@media(max-width:500px){.sem-card-grid{grid-template-columns:1fr;}}
.sem-cap-bar-wrap{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:0.85rem 1rem;margin-bottom:1rem;}
.sem-cap-row{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.45rem;}
.sem-cap-row:last-child{margin-bottom:0;}
.sem-cap-label{font-size:0.78rem;font-weight:700;width:130px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sem-cap-track{flex:1;background:var(--border);border-radius:99px;height:8px;overflow:hidden;}
.sem-cap-fill{height:100%;border-radius:99px;transition:width 0.4s;}
.sem-cap-pct{font-size:0.72rem;font-family:var(--mono);font-weight:700;width:36px;text-align:left;flex-shrink:0;}
.psych-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;backdrop-filter:blur(8px)}
.psych-box{background:var(--surface);border-radius:24px;width:100%;max-width:500px;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:85vh;border:1px solid var(--border)}

.sos-btn-fixed{position:fixed;bottom:1.5rem;left:1.5rem;z-index:50;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:white;border:none;border-radius:50px;padding:0.75rem 1.4rem;font-family:var(--sans);font-size:0.9rem;font-weight:800;cursor:pointer;box-shadow:0 4px 18px rgba(238,90,36,0.4);transition:all 0.2s;display:flex;align-items:center;gap:0.5rem}
.sos-btn-fixed:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(238,90,36,0.5)}
.sos-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;backdrop-filter:blur(8px)}
.sos-box{background:var(--surface);border-radius:24px;width:100%;max-width:500px;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:85vh; border:1px solid var(--border)}
.sos-header{background:linear-gradient(135deg,#ee5a24,#f0932b);padding:1.4rem 1.65rem;color:white;flex-shrink:0}
.sos-header-title{font-size:1.15rem;font-weight:900;margin-bottom:0.2rem}
.sos-header-sub{font-size:0.8rem;opacity:0.85}
.sos-chat{flex:1;overflow-y:auto;padding:1rem}
.sos-msg{margin-bottom:0.8rem;display:flex;flex-direction:column}
.sos-msg.user{align-items:flex-start}.sos-msg.ai{align-items:flex-end}
.sos-bubble{max-width:85%;padding:0.7rem 0.95rem;border-radius:13px;font-size:0.86rem;line-height:1.6}
.sos-msg.user .sos-bubble{background:var(--surface2);border:1px solid var(--border); color:var(--text)}
.sos-msg.ai .sos-bubble{background:linear-gradient(135deg,var(--accent-light),var(--green-light));border:1px solid var(--border2); color:var(--text)}
.sos-input-area{padding:0.9rem;border-top:1px solid var(--border);display:flex;gap:0.7rem;flex-shrink:0}
.sos-input-area input{flex:1;background:var(--surface2); border:1px solid var(--border); color:var(--text)}
.btn-sos-send{background:linear-gradient(135deg,#ee5a24,#f0932b);color:white;border:none;border-radius:10px;padding:0.65rem 1.1rem;font-family:var(--sans);font-weight:700;cursor:pointer;font-size:0.83rem}

.chat-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;backdrop-filter:blur(8px)}
.chat-box{background:var(--surface);border-radius:24px;width:100%;max-width:550px;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:85vh; border:1px solid var(--border)}
.chat-header{background:linear-gradient(135deg,var(--red),#ff7b7b);padding:1.4rem 1.65rem;color:white;flex-shrink:0}
.chat-header-title{font-size:1.15rem;font-weight:900;margin-bottom:0.2rem}
.chat-header-sub{font-size:0.8rem;opacity:0.85;line-height:1.4}
.chat-messages{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:0.8rem;background:var(--bg)}
.chat-msg{display:flex;flex-direction:column;max-width:85%}
.chat-msg.user{align-self:flex-start}
.chat-msg.ai{align-self:flex-end}
.chat-bubble{padding:0.7rem 0.95rem;border-radius:13px;font-size:0.86rem;line-height:1.6}
.chat-msg.user .chat-bubble{background:var(--surface);border:1px solid var(--border);border-bottom-right-radius:2px;color:var(--text)}
.chat-msg.ai .chat-bubble{background:var(--green-light);border:1px solid var(--green);color:var(--text);border-bottom-left-radius:2px}
.chat-input-area{padding:0.9rem;border-top:1px solid var(--border);display:flex;gap:0.7rem;background:var(--surface);flex-shrink:0}
.chat-input-area input{flex:1;background:var(--surface2);border-radius:10px;padding:0.7rem 1rem;border:1px solid var(--border);outline:none;font-family:var(--sans); color:var(--text)}
.chat-input-area input:focus{border-color:var(--red)}
.btn-chat-send{background:linear-gradient(135deg,var(--red),#ff7b7b);color:white;border:none;border-radius:10px;padding:0.65rem 1.3rem;font-family:var(--sans);font-weight:700;cursor:pointer;font-size:0.85rem}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   MOBILE HEADER & HAMBURGER
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top, 0px) 1rem 0;
  height: calc(56px + env(safe-area-inset-top, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 400;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
[data-theme="dark"] .mobile-header {
  background: rgba(8,13,30,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: rgba(255,255,255,0.07);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 20px rgba(0,0,0,0.4);
}
.mobile-logo {
  font-size: 1.1rem;
  font-weight: 900;
  background: linear-gradient(135deg, #6366f1, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}
.hamburger-btn {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  padding: 0;
  transition: background 0.15s;
}
.hamburger-btn:hover { background: var(--surface2); }
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.25s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-settings-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  font-size: 1.2rem;
  transition: background 0.15s;
}
.mobile-settings-btn:hover { background: var(--surface2); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 299;
  backdrop-filter: blur(2px);
  touch-action: none; /* prevent iOS rubber-band scroll-through behind sidebar */
}
.sidebar-overlay.visible { display: block; }
/* iOS scroll-lock: position:fixed via class, AFTER top is set inline ג€” avoids flicker */
body.scroll-locked { position: fixed; width: 100%; overflow-y: scroll; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   SETTINGS ACCORDION
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.acc-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 0.45rem;
  overflow: hidden;
  background: var(--surface);
}
.acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  background: var(--surface2);
  user-select: none;
  transition: background 0.2s;
}
.acc-header:hover { background: var(--border); }
.acc-arrow {
  font-size: 0.65rem;
  color: var(--muted);
  transition: transform 0.25s ease;
  display: inline-block;
}
.acc-section.open .acc-arrow { transform: rotate(180deg); }
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, padding 0.32s ease;
  padding: 0 1rem;
}
.acc-section.open .acc-body {
  max-height: 500px;
  padding: 0.85rem 1rem 1rem;
}
/* Legacy ג€” kept for any remaining refs */
.settings-section { margin: 0; }
.settings-section-label { display: none; }
.settings-divider { display: none; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   MOBILE RESPONSIVE (ג‰₪ 768px)
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
@media (max-width: 768px) {
  .main-content { padding: 1.25rem 1rem; overflow-x: hidden; }

  .cards-grid { grid-template-columns: repeat(2,1fr); gap: 0.75rem; }
  .stat-card { padding: 1rem 0.9rem; }
  .stat-num { font-size: 2rem; }

  .form-grid { grid-template-columns: 1fr; }
  .pomodoro-box { flex-direction: column; align-items: flex-start; }

  .page-header { margin-bottom: 1.25rem; }
  .page-title { font-size: 1.35rem; }

  /* Scrollable tables ג€” no page-level overflow */
  .section-box { overflow-x: hidden; }
  .section-box table { min-width: 520px; }
  .section-box > div > table,
  .section-box > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }

  table { font-size: 0.8rem; }
  th, td { padding: 0.5rem 0.55rem; }

  /* Bigger touch targets */
  .btn-sm { padding: 0.55rem 1rem; font-size: 0.82rem; min-height: 38px; }
  .tl-btn { padding: 0.42rem 0.65rem; font-size: 0.75rem; min-height: 34px; }
  .nav-item { padding: 0.85rem 0.95rem; min-height: 48px; }
  .toggle-btn { padding: 0.45rem 0.85rem; min-height: 36px; }
  .week-nav-btn { padding: 0.55rem 1rem; min-height: 38px; }

  /* Prevent tl-title from forcing width */
  .tl-title { white-space: normal; word-break: break-word; }
  .tl-meta { flex-wrap: wrap; }

  /* Exam card on mobile */
  .exam-row-card { flex-wrap: wrap; }
  .exam-info { min-width: 0; flex: 1 1 100%; }
}

@media (max-width: 400px) {
  .cards-grid { grid-template-columns: 1fr; }
  .main-content { padding: 1rem 0.85rem; }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   MONTHLY CALENDAR VIEW
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.month-cal-wrap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 1rem;
}
.month-cal-header {
  background: var(--surface2);
  text-align: center;
  padding: 0.55rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
}
.month-cal-cell {
  background: var(--surface);
  padding: 0.35rem;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  cursor: default;
}
.month-cal-cell.is-today { background: var(--accent-light); }
.month-cal-cell.is-past { opacity: 0.65; }
.month-cal-cell.empty { background: var(--bg); pointer-events: none; }
.month-cal-day-num {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 1px;
}
.month-cal-day-num.today-circle {
  background: var(--accent);
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
}
.month-cal-day-num.past-num { color: var(--muted); }
.month-cal-holiday {
  font-size: 0.65rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  line-height: 1.3;
}
.hol-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.month-cal-exam-chip {
  background: var(--purple-light);
  color: var(--purple);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 0.58rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-cal-task-chip {
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.55rem;
  font-weight: 700;
  border-right: 2px solid;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-cal-dots-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 1px;
}
.month-cal-task-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.month-cal-more {
  font-size: 0.56rem;
  color: var(--muted);
  font-weight: 700;
}
@media (max-width: 600px) {
  .month-cal-cell { min-height: 65px; padding: 3px 2px; }
  .month-cal-task-chip { display: none; }
  .month-cal-exam-chip { font-size: 0.5rem; padding: 1px 2px; }
  .month-cal-day-num { font-size: 0.7rem; }
  .month-cal-header { font-size: 0.62rem; padding: 0.4rem 0.1rem; }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   AUTH OVERLAY ג€” responsive, all screen sizes
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
#auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  font-family: var(--sans);
  direction: rtl;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(79,110,247,0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(99,102,241,0.14) 0%, transparent 55%),
    linear-gradient(160deg, #060b18 0%, #0c1528 55%, #060b18 100%);
  overflow-y: auto;
}

.auth-card {
  background: rgba(11,18,36,0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.5rem, 5vw, 2.25rem);
  width: min(440px, 100%);
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  position: relative;
}

.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo-icon { font-size: clamp(2rem, 5vw, 2.8rem); display: block; }
.auth-logo-name {
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: -0.5px;
  margin-top: 0.4rem;
}
.auth-logo-sub { font-size: 0.8rem; color: #64748b; margin-top: 0.2rem; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1.75rem;
  border: 1px solid rgba(255,255,255,0.07);
}
.auth-tab {
  padding: 0.6rem;
  border: none;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: #64748b;
}
.auth-tab.active {
  background: #4f6ef7;
  color: #fff;
  box-shadow: 0 2px 10px rgba(79,110,247,0.45);
}

.auth-google-btn {
  width: 100%;
  padding: 0.85rem 1rem;
  background: #fff;
  color: #1a1a2e;
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  transition: all 0.18s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  direction: ltr;
}
.auth-google-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.32);
  background: #f8f8f8;
}
.auth-google-btn:active { transform: translateY(0); }
.auth-google-btn svg { flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.auth-divider-line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.auth-divider-text { font-size: 0.72rem; color: #475569; font-weight: 600; white-space: nowrap; }

.auth-field { margin-bottom: 0.85rem; }
.auth-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.auth-label { font-size: 0.77rem; font-weight: 700; color: #94a3b8; display: block; margin-bottom: 0.4rem; }
.auth-field-header .auth-label { margin-bottom: 0; }
.auth-forgot-btn {
  background: none;
  border: none;
  font-size: 0.72rem;
  color: #4f6ef7;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  padding: 0;
  white-space: nowrap;
}
.auth-forgot-btn:hover { color: #6b8bff; }

.auth-input-wrap { position: relative; }
.auth-input {
  width: 100%;
  padding: 0.82rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #f8fafc;
  font-family: var(--sans);
  font-size: 0.92rem;
  box-sizing: border-box;
  direction: ltr;
  text-align: left;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
}
.auth-input::placeholder { color: #475569; }
.auth-input:focus {
  border-color: rgba(79,110,247,0.7);
  background: rgba(79,110,247,0.07);
}
.auth-input.has-eye { padding-right: 2.8rem; }

.auth-eye-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #475569;
  padding: 0.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.auth-eye-btn:hover { color: #94a3b8; }

.auth-submit-btn {
  width: 100%;
  padding: 0.9rem;
  background: linear-gradient(135deg, #4f6ef7, #6366f1);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.18s;
  box-shadow: 0 4px 16px rgba(79,110,247,0.35);
  letter-spacing: 0.2px;
}
.auth-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(79,110,247,0.52);
}
.auth-submit-btn:active { transform: translateY(0); }
.auth-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none !important; }

#auth-msg {
  min-height: 1.4rem;
  margin-top: 0.85rem;
  font-size: 0.82rem;
  text-align: center;
  color: #94a3b8;
  line-height: 1.5;
  transition: color 0.2s;
}
#auth-msg.auth-error { color: #f43f5e; }
#auth-msg.auth-success { color: #16c98d; }

.auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.74rem;
  color: #475569;
  line-height: 1.6;
}

/* TV / very large screens */
@media (min-width: 1800px) {
  .auth-card {
    width: min(520px, 100%);
    padding: 3rem 2.75rem;
  }
  .auth-logo-icon { font-size: 3.5rem; }
  .auth-logo-name { font-size: 2.1rem; }
  .auth-tab, .auth-google-btn, .auth-submit-btn { font-size: 1.06rem; }
  .auth-input { font-size: 1rem; padding: 0.95rem 1.1rem; }
  .auth-label, .auth-forgot-btn { font-size: 0.85rem; }
}

/* Short screens (landscape phone) */
@media (max-height: 680px) {
  .auth-logo { margin-bottom: 1rem; }
  .auth-logo-icon { font-size: 1.6rem; }
  .auth-logo-name { font-size: 1.2rem; margin-top: 0.2rem; }
  .auth-logo-sub { display: none; }
  .auth-tabs { margin-bottom: 1rem; }
  .auth-field { margin-bottom: 0.6rem; }
  .auth-submit-btn { margin-top: 0.6rem; padding: 0.75rem; }
  #auth-msg { margin-top: 0.5rem; }
  .auth-footer { margin-top: 0.75rem; padding-top: 0.75rem; }
}

/* Very small screens */
@media (max-width: 360px) {
  #auth-overlay { padding: 0.75rem; }
  .auth-card { border-radius: 18px; }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   SVG ICON SYSTEM
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.nav-icon {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 20px; height: 20px;
}
.nav-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   BOTTOM NAV BAR
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
/* ג”€ג”€ Bottom Nav ג€” dark glass pill ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%; right: auto;
  transform: translateX(-50%);
  z-index: 350;
  width: auto;
  height: auto;
  background: rgba(10,13,28,0.97);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 32px;
  padding: 7px 8px;
  box-shadow: 0 -2px 0 rgba(255,255,255,0.05), 0 12px 48px rgba(0,0,0,0.7), 0 4px 16px rgba(79,110,247,0.15);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
.bn-items {
  display: flex; height: auto; gap: 4px;
  overflow-x: visible; scrollbar-width: none;
}
.bn-items::-webkit-scrollbar { display: none; }
.bn-item {
  flex: 0 0 auto; min-width: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: none; border: none; cursor: pointer; padding: 4px 4px;
  -webkit-tap-highlight-color: transparent; transition: transform 0.12s;
}
.bn-item:active { transform: scale(0.85); }
.bn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 32px; color: rgba(255,255,255,0.38);
  border-radius: 12px; transition: color 0.2s, background 0.2s;
}
.bn-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.bn-label { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; color: rgba(255,255,255,0.35); transition: color 0.2s; line-height: 1; letter-spacing: 0.2px; }
.bn-item.active .bn-icon { background: rgba(79,110,247,0.25); color: #a5b4fc; }
.bn-item.active .bn-label { color: #a5b4fc; }

/* ג”€ג”€ FAB (floating action) ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.nav-fab { display: none !important; }
.nav-fab:active { display: none !important; }
.nav-fab svg { display: none !important; }

@media (max-width: 768px) {
  .bottom-nav { display: flex; }
  .nav-fab { display: none !important; }
  .main-content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .sos-btn-fixed { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   DESKTOP CENTERING + LAYOUT
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
@media (min-width: 769px) {
  .main-content { max-width: 820px; margin-left: auto; margin-right: auto; }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   MOBILE HEADER ENHANCEMENTS
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.mobile-header { position: relative; }
.mobile-header::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--purple), var(--green));
  opacity: 0; transition: opacity 0.3s;
}
.mobile-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
.mobile-header.scrolled::after { opacity: 1; }
.mobile-logo {
  background: linear-gradient(135deg, var(--accent), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-size: 1.1rem; font-weight: 900; letter-spacing: -0.3px;
}
.mobile-settings-btn svg { width: 20px; height: 20px; stroke: var(--text); fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   ORACLE HEADER REDESIGN
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.oracle-header {
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; background: var(--surface);
}
.oracle-icon-badge {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.oracle-icon-badge svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oracle-title-wrap { flex: 1; padding: 0 0.85rem; }
.oracle-title { font-size: 0.9rem; font-weight: 900; color: var(--text); }
.oracle-sub { font-size: 0.68rem; color: var(--muted); margin-top: 0.1rem; }
.oracle-clear-btn {
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
  padding: 0.3rem 0.75rem; border-radius: 8px; font-size: 0.72rem; cursor: pointer;
  font-family: var(--sans); font-weight: 700; transition: all 0.15s; flex-shrink: 0;
}
.oracle-clear-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   CHAT OVERLAY ג€” CLEAN HEADER
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.chat-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1rem 1.25rem !important;
}
.chat-header-title { font-size: 1rem; font-weight: 900; color: var(--text) !important; margin-bottom: 0.15rem; }
.chat-header-sub { font-size: 0.78rem; color: var(--muted) !important; line-height: 1.4; }
.chat-input-area input:focus { border-color: var(--accent) !important; }
.btn-chat-send { background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   PREMIUM EMPTY STATES
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.empty-state-icon {
  width: 52px; height: 52px; border-radius: 16px; background: var(--surface2);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
  border: 1px solid var(--border);
}
.empty-state-icon svg { width: 24px; height: 24px; stroke: var(--muted); fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.empty-state-title { font-size: 0.97rem; font-weight: 800; color: var(--text); margin-bottom: 0.35rem; }
.empty-state-sub { font-size: 0.82rem; color: var(--muted); line-height: 1.6; max-width: 260px; margin: 0 auto; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   AUTH LOGO SVG BADGE
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.auth-logo-icon-wrap {
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(135deg, #4f6ef7, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.85rem; box-shadow: 0 8px 32px rgba(79,110,247,0.4);
}
.auth-logo-icon-wrap svg { width: 32px; height: 32px; stroke: white; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   WEEK NAV ג€” SVG CHEVRONS
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.week-nav-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   SCH-DAY-GROUP (list view)
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.sch-day-group { margin-bottom: 1.25rem; }
.sch-day-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0 0.4rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem;
}
.sch-day-hdr.is-today { border-bottom-color: var(--accent); }
.sch-day-name { font-size: 0.82rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 0.4rem; }
.sch-day-date { font-size: 0.72rem; color: var(--muted); }
.sch-today-pill { background: var(--accent); color: white; font-size: 0.58rem; font-weight: 800; padding: 0.1rem 0.45rem; border-radius: 99px; letter-spacing: 0.3px; }
.sch-hol-badge { font-size: 0.7rem; font-weight: 700; }
.sch-day-items { display: flex; flex-direction: column; gap: 0.45rem; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   DAY STRIP (7-day pill nav)
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.day-strip {
  display: flex; margin: -1.25rem -1.25rem 0.85rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface2); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; gap: 0;
}
.day-strip::-webkit-scrollbar { display: none; }
.day-chip {
  flex: 1; min-width: 44px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 0.4rem 0.25rem; background: none; border: none; cursor: pointer;
  border-radius: 12px; font-family: var(--sans); -webkit-tap-highlight-color: transparent; transition: background 0.12s;
}
.day-chip:hover { background: var(--border); }
.day-chip-name { font-size: 0.55rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; }
.day-chip-num { font-size: 0.9rem; font-weight: 700; color: var(--text); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.15s; line-height: 1; }
.day-chip.is-today .day-chip-num { background: var(--accent); color: white; box-shadow: 0 2px 8px rgba(79,110,247,0.35); }
.day-chip.selected:not(.is-today) .day-chip-num { background: var(--surface3); color: var(--accent); font-weight: 900; }
.day-chip.is-today.selected .day-chip-num { background: var(--accent); color: white; }
.day-chip.selected .day-chip-name { color: var(--accent); }
.day-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.day-chip-dot.empty { opacity: 0; }
.day-chip-dot.exam { background: var(--purple); }
.date-slide-item.active .day-chip-dot { background: rgba(255,255,255,0.7); }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   DAY TIMELINE VIEW
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.tl-day-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0 0.75rem; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
.tl-day-title { font-size: 1rem; font-weight: 900; color: var(--text); }
.tl-day-meta { font-size: 0.73rem; color: var(--muted); margin-top: 0.18rem; }
.tl-day-badges { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.tl-day-exam-badge { background: var(--purple-light); color: var(--purple); font-size: 0.65rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 99px; }
.tl-day-count-badge { background: var(--accent-light); color: var(--accent); font-size: 0.65rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 99px; }

.timeline-outer {
  display: flex; overflow-y: auto;
  max-height: calc(100vh - 310px); min-height: 340px;
  border-radius: 12px; border: 1px solid var(--border);
  scroll-behavior: smooth;
}

.timeline-labels {
  width: 44px; flex-shrink: 0; position: relative;
  background: var(--surface2); border-left: 1px solid var(--border);
}

.tl-hour-label {
  position: absolute; right: 6px; transform: translateY(-7px);
  font-size: 0.55rem; font-weight: 800; color: var(--muted);
  font-family: var(--mono); line-height: 1; white-space: nowrap; user-select: none;
}

.timeline-events-area { flex: 1; position: relative; background: var(--surface); }

.tl-grid-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); pointer-events: none; }
.tl-grid-half { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); opacity: 0.3; pointer-events: none; }

.tl-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 10; pointer-events: none; }
.tl-now-dot { position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,0.2); }

/* ג”€ג”€ג”€ Timeline v2: glass-morphism task cards ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.tl-ev {
  position: absolute; border-radius: 11px; border: 1.5px solid;
  display: flex; overflow: visible; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s, opacity 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.09); min-height: 28px;
}
.tl-ev > * { border-radius: inherit; overflow: hidden; }
[data-theme="dark"] .tl-ev { background: rgba(20,30,48,0.72) !important; }
.tl-ev:hover:not(.anchor-ev) {
  transform: translateX(-3px) scale(1.015);
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
  z-index: 20;
}
.tl-ev:active { transform: scale(0.97); }
.tl-ev-bar { width: 5px; flex-shrink: 0; border-radius: 9px 0 0 9px; }
.tl-ev-body { flex: 1; padding: 4px 8px; min-width: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.tl-ev-name { font-size: 0.75rem; font-weight: 800; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-ev-done-text { text-decoration: line-through; opacity: 0.55; }
.tl-ev-course { font-size: 0.6rem; font-weight: 800; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.08rem 0.4rem; border-radius: 99px; display: inline-block; }
.tl-ev-time { font-size: 0.7rem; color: var(--muted); font-family: var(--mono); font-weight: 700; margin-top: 2px; }
.tl-ev-dur { font-size: 0.54rem; color: var(--muted); font-family: var(--mono); }
.tl-ev-check {
  position: absolute;
  bottom: 4px;
  left: 5px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 2px solid var(--green);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  transition: all 0.15s;
  z-index: 5;
}
.tl-ev-check:hover { background: var(--green); color: #fff; }
[data-theme="dark"] .tl-ev-check { background: rgba(20,30,48,0.92); }
.tl-ev-check svg { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tl-ev-sub { font-size: 0.78rem; color: var(--accent); font-family: var(--mono); font-weight: 800; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.8; }
.tl-ev-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; position: absolute; top: 5px; left: 5px; }
.tl-ev-status-dot.done { background: var(--green); }
.tl-ev-status-dot.missed { background: var(--red); }

/* Status states */
.tl-ev.ev-done { opacity: 0.52; filter: grayscale(0.25); }
.tl-ev.ev-missed { background: rgba(247,96,96,0.1) !important; border-color: rgba(247,96,96,0.5) !important; }
.tl-ev.anchor-ev { cursor: default; opacity: 0.78; }
.tl-ev.ev-hobby { }

/* ג”€ג”€ Urgency glow ג”€ג”€ */
.tl-ev.ev-urgent-med {
  box-shadow: 0 0 0 1.5px rgba(245,166,35,0.5), 0 3px 14px rgba(245,166,35,0.2);
  border-color: rgba(245,166,35,0.7) !important;
}
.tl-ev.ev-urgent-high {
  box-shadow: 0 0 0 2px rgba(247,96,96,0.5), 0 4px 18px rgba(247,96,96,0.25);
  border-color: rgba(247,96,96,0.8) !important;
}
.tl-ev.ev-urgent-critical {
  animation: urgentPulse 1.8s ease-in-out infinite;
  border-color: rgba(247,96,96,0.9) !important;
}
@keyframes urgentPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(247,96,96,0.45), 0 4px 16px rgba(247,96,96,0.22); }
  50%      { box-shadow: 0 0 0 5px rgba(247,96,96,0.2), 0 8px 26px rgba(247,96,96,0.38); }
}

/* ג”€ג”€ Focus block bracket ג”€ג”€ */
.tl-focus-bracket {
  position: absolute; left: 0; z-index: 16; pointer-events: none;
  border-left: 3px solid var(--accent);
  border-top: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  border-radius: 6px 0 0 6px;
}
.tl-focus-label {
  position: absolute; left: 5px; z-index: 17; pointer-events: none;
  font-size: 0.48rem; font-weight: 900; color: var(--accent);
  letter-spacing: 1.5px; writing-mode: vertical-lr;
  text-orientation: mixed; transform: rotate(180deg); white-space: nowrap;
}

/* ג”€ג”€ Holiday banner ג”€ג”€ */
.tl-holiday-banner {
  padding: 0.28rem 0.7rem; border-radius: 8px; margin-bottom: 0.45rem;
  font-size: 0.68rem; font-weight: 800; display: flex; align-items: center; gap: 0.4rem;
}

/* ג”€ג”€ Drag ghost & dragging state ג”€ג”€ */
.tl-drag-ghost {
  position: absolute; border-radius: 9px; pointer-events: none; z-index: 50;
  border: 2px dashed var(--accent); background: var(--accent-light);
  opacity: 0.65; display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 900; color: var(--accent);
}
.tl-ev.dragging { opacity: 0.35; cursor: grabbing !important; }

/* ג”€ג”€ Weekend tint ג”€ג”€ */
.timeline-events-area.is-weekend { background: rgba(248,250,252,0.55); }
[data-theme="dark"] .timeline-events-area.is-weekend { background: rgba(15,23,42,0.55); }

/* ג”€ג”€ Animated now-dot ג”€ג”€ */
.tl-now-dot { animation: nowPulse 2.2s ease-in-out infinite; }
@keyframes nowPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(220,38,38,0.22); }
  50%      { box-shadow: 0 0 0 7px rgba(220,38,38,0.08); }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   TASK ACTION SHEET (iOS-style)
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
#task-action-sheet { position: fixed; inset: 0; z-index: 500; pointer-events: none; }
#task-action-sheet.open { pointer-events: all; }
.tas-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.28s; }
#task-action-sheet.open .tas-backdrop { background: rgba(0,0,0,0.42); }
.tas-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-radius: 22px 22px 0 0;
  padding: 0.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 16px));
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-top: 1px solid var(--border);
}
#task-action-sheet.open .tas-panel { transform: translateY(0); }
.tas-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border2); margin: 0.5rem auto 1.1rem; }
.tas-header { display: flex; align-items: flex-start; gap: 0.85rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tas-ev-bar { width: 4px; min-height: 44px; border-radius: 2px; flex-shrink: 0; margin-top: 2px; }
.tas-info { flex: 1; min-width: 0; }
.tas-name { font-size: 0.97rem; font-weight: 800; color: var(--text); line-height: 1.3; }
.tas-meta { font-size: 0.72rem; color: var(--muted); margin-top: 0.25rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tas-meta-chip { background: var(--surface2); border-radius: 6px; padding: 0.1rem 0.45rem; }
.tas-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.tas-btn {
  flex: 1; min-width: 66px; display: flex; flex-direction: column; align-items: center;
  gap: 0.35rem; padding: 0.75rem 0.5rem; border-radius: 16px; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 800;
  background: var(--surface2); color: var(--text); transition: all 0.14s;
  -webkit-tap-highlight-color: transparent;
}
.tas-btn:active { transform: scale(0.9); }
.tas-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.tas-done { background: var(--green-light); color: var(--green); }
.tas-miss { background: var(--red-light); color: var(--red); }
.tas-undo { background: var(--yellow-light); color: var(--yellow); }
.tas-study { background: var(--purple-light); color: var(--purple); }
.tas-edit { background: var(--accent-light); color: var(--accent); }
.tas-delete { background: var(--red-light); color: var(--red); }

.action-sheet-backdrop { z-index: 499; }

/* Three-dots menu button */
.tl-btn-menu {
  background: var(--surface2) !important; color: var(--muted);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  padding: 0 !important; border-radius: 10px; box-shadow: none !important; flex-shrink: 0;
}
.tl-btn-menu:hover { background: var(--border) !important; color: var(--text); transform: none !important; }
.tl-btn-menu:active { transform: scale(0.88) !important; }

/* Done button ג€” SVG check */
.tl-btn-done svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }

/* Star rating in task completion modal */
.star-row { display: flex; justify-content: center; gap: 0.5rem; margin: 1.25rem 0 0.75rem; direction: ltr; }
.star-b { background: none; border: none; cursor: pointer; padding: 0.25rem; border-radius: 50%; transition: transform 0.12s; -webkit-tap-highlight-color: transparent; outline: none; }
.star-b:active { transform: scale(0.82); }
.star-b svg { width: 36px; height: 36px; stroke: #d1d5db; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.12s, fill 0.12s, transform 0.12s; display: block; }
.star-b.lit svg { stroke: #f59e0b; fill: #f59e0b; }
.star-b.preview svg { stroke: #fbbf24; fill: #fef3c7; }
.star-b:hover { transform: scale(1.12); }

/* Rating modal polish */
.rating-success-ring {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-light), rgba(16,185,129,0.06));
  border: 2px solid rgba(16,185,129,0.25);
  display: flex; align-items: center; justify-content: center; margin: 0.25rem auto 0.9rem;
}
.rating-success-ring svg { width: 26px; height: 26px; stroke: var(--green); fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   PROGRESS PAGE v2 ג€” WORLD-CLASS
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.tree-stage-card {
  background: linear-gradient(160deg,#0f172a 0%,#1a2a1a 50%,#0a1a0a 100%);
  border-radius: 22px; overflow: visible; position: relative;
  padding: 1.5rem 1.5rem 1.25rem; margin-bottom: 1rem;
  border: 1px solid rgba(16,185,129,0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.tree-stage-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: radial-gradient(ellipse at 30% 110%, rgba(16,185,129,0.18) 0%, transparent 65%),
              radial-gradient(ellipse at 80% 110%, rgba(52,211,153,0.08) 0%, transparent 55%);
}
.tree-hero-layout { display: flex; align-items: flex-end; gap: 1.25rem; position: relative; z-index: 1; }
.tree-hero-wrap {
  width: 150px; height: 168px; flex-shrink: 0; position: relative;
  filter: drop-shadow(0 12px 20px rgba(16,185,129,0.25));
}
.tree-hero-wrap svg { width: 100%; height: 100%; overflow: visible; }
.tree-info-col { flex: 1; color: white; padding-bottom: 0.25rem; min-width: 0; }
.tree-level-num {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: #34d399; font-family: var(--mono); margin-bottom: 0.2rem;
}
.tree-level-name { font-size: 1.4rem; font-weight: 900; line-height: 1.1; color: #fff; margin-bottom: 0.85rem; }
.tree-pts-row { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.6rem; }
.tree-pts-big { font-size: 2.2rem; font-weight: 900; color: #fff; font-family: var(--mono); line-height: 1; }
.tree-pts-label { font-size: 0.68rem; color: rgba(255,255,255,0.45); font-weight: 700; letter-spacing: 1.5px; }
.tree-xp-bar-wrap {
  height: 5px; background: rgba(255,255,255,0.1); border-radius: 99px;
  overflow: hidden; margin-bottom: 0.35rem;
}
.tree-xp-bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg,#10b981,#6ee7b7);
  transition: width 1.2s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 0 10px rgba(16,185,129,0.7);
}
.tree-xp-to-next { font-size: 0.65rem; color: rgba(255,255,255,0.38); font-weight: 600; }
[data-theme="dark"] .tree-stage-card { background: linear-gradient(160deg,#020617 0%,#0f1f0f 50%,#030a03 100%); }

/* Stats Row */
.prog-stats-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 0.65rem; margin-bottom: 1rem;
}
.prog-stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 1rem 0.75rem; display: flex; flex-direction: column;
  align-items: center; gap: 0.25rem; box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.prog-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.prog-stat-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 0.15rem;
}
.prog-stat-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.prog-stat-val { font-size: 1.65rem; font-weight: 900; color: var(--text); font-family: var(--mono); line-height: 1; }
.prog-stat-lbl { font-size: 0.58rem; color: var(--muted); font-weight: 700; text-align: center; letter-spacing: 0.2px; line-height: 1.3; }

/* Course bars on light background */
.section-box:not(.xp-hub) .xp-course-name { color: var(--text) !important; }
.section-box:not(.xp-hub) .xp-course-bar-bg { background: var(--border) !important; }
.section-box:not(.xp-hub) .xp-course-pct { color: var(--muted) !important; }

/* Activity Heatmap */
.heatmap-outer { display: flex; gap: 6px; align-items: flex-start; margin-top: 0.65rem; direction: ltr; overflow-x: auto; padding-bottom: 4px; }
.hm-day-col { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.hm-day-label { font-size: 0.52rem; color: var(--muted); font-weight: 700; height: 12px; display: flex; align-items: center; font-family: var(--mono); }
.heatmap-grid { display: grid; grid-template-rows: repeat(7,12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 2px; flex-shrink: 0; }
.hm-cell { width: 12px; height: 12px; border-radius: 2px; transition: transform 0.1s; }
.hm-cell:hover { transform: scale(1.4); }
.heatmap-legend { display: flex; align-items: center; gap: 4px; font-size: 0.6rem; color: var(--muted); margin-top: 7px; direction: ltr; }
.heatmap-legend .hm-cell { width: 10px; height: 10px; flex-shrink: 0; }

/* Timeline enhancements */
.tl-today-tag { display: inline-block; background: var(--accent); color: white; font-size: 0.58rem; font-weight: 800; padding: 0.1rem 0.45rem; border-radius: 99px; vertical-align: middle; margin-right: 4px; }
.tl-allday-row { padding: 0.35rem 0.5rem 0.45rem; display: flex; gap: 0.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 0.35rem; min-height: 32px; align-items: center; }
.tl-allday-pill { background: var(--purple-light); color: var(--purple); border: 1px solid rgba(139,92,246,0.3); border-radius: 7px; font-size: 0.65rem; font-weight: 800; padding: 0.2rem 0.6rem; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.tl-allday-pill svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tl-empty-day { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 260px; gap: 0.75rem; color: var(--muted); }
.tl-empty-day svg { width: 52px; height: 52px; stroke: var(--border2); fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; opacity: 0.7; }
.tl-empty-day-title { font-size: 1rem; font-weight: 800; }
.tl-empty-day-sub { font-size: 0.78rem; text-align: center; line-height: 1.6; max-width: 200px; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   FOCUS LOCK MODE ג€” Premium CSS
   ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.focus-lock-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: #060818;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  overflow: hidden;
}
.focus-lock-overlay.hidden { display: none; }

/* Animated orb background */
.fl-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fl-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.18;
  animation: flOrbFloat 8s ease-in-out infinite;
}
.fl-orb-1 { width: 400px; height: 400px; background: #6366f1; top: -100px; right: -100px; animation-delay: 0s; }
.fl-orb-2 { width: 350px; height: 350px; background: #8b5cf6; bottom: -80px; left: -80px; animation-delay: -3s; }
.fl-orb-3 { width: 300px; height: 300px; background: #06b6d4; bottom: 20%; right: 10%; animation-delay: -5s; }
@keyframes flOrbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-30px) scale(1.1); }
  66% { transform: translate(-20px,20px) scale(0.95); }
}

/* Content layout */
.fl-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem; padding: 2rem 1.5rem; width: 100%; max-width: 420px;
}

/* Top bar */
.fl-top { text-align: center; }
.fl-mode-badge {
  display: inline-block;
  background: rgba(99,102,241,0.25); color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 99px; padding: 0.3rem 1rem;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 1px;
  margin-bottom: 0.5rem;
}
.fl-task-name {
  color: white; font-size: 1.15rem; font-weight: 800;
  opacity: 0.9; max-width: 300px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Timer ring */
.fl-timer-wrap {
  position: relative; width: 240px; height: 240px;
  display: flex; align-items: center; justify-content: center;
}
.fl-ring-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.fl-ring-bg {
  fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 12;
}
.fl-ring-fill {
  fill: none;
  stroke: url(#flGradient);
  stroke: #6366f1;
  stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 678.6;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.fl-timer-inner {
  position: relative; text-align: center; z-index: 1;
}
.fl-breathing {
  font-size: 2.2rem; margin-bottom: 0.25rem;
  animation: flBreathePulse 4s ease-in-out infinite;
}
@keyframes flBreathePulse {
  0%,100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}
.fl-digits {
  font-size: 3rem; font-weight: 900; color: white;
  font-family: var(--mono); letter-spacing: -1px;
  line-height: 1;
}
.fl-timer-label {
  font-size: 0.72rem; color: rgba(255,255,255,0.5);
  font-weight: 700; letter-spacing: 1px; margin-top: 0.35rem;
  text-transform: uppercase;
}

/* Breathing guide */
.fl-breath-guide {
  display: flex; align-items: center; gap: 0.6rem;
  color: rgba(255,255,255,0.45); font-size: 0.8rem; font-weight: 600;
}
.fl-breath-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6366f1;
  animation: flBreatheDot 4s ease-in-out infinite;
}
@keyframes flBreatheDot {
  0%,100% { transform: scale(0.6); opacity: 0.5; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* Stats row */
.fl-stats {
  display: flex; gap: 1.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 0.9rem 1.5rem;
  width: 100%;
}
.fl-stat { flex: 1; text-align: center; }
.fl-stat-val { font-size: 1.4rem; font-weight: 900; color: white; }
.fl-stat-lbl { font-size: 0.65rem; color: rgba(255,255,255,0.4); font-weight: 700; margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.5px; }

/* Exit button */
.fl-exit-section { width: 100%; text-align: center; }
.fl-exit-trigger {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4);
  border-radius: 99px; padding: 0.55rem 1.5rem;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
  font-family: var(--sans);
  transition: all 0.25s;
}
.fl-exit-trigger:hover {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
}

/* Challenge overlay */
.fl-challenge {
  position: absolute; inset: 0;
  background: rgba(6,8,24,0.9);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
  z-index: 2;
}
.fl-challenge.visible { display: flex; }
.fl-challenge-card {
  background: #1a1f3a;
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 24px; padding: 2rem 2rem;
  max-width: 340px; width: 90%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: flSlideUp 0.3s ease;
}
@keyframes flSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.fl-challenge-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.fl-challenge-title { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin-bottom: 0.5rem; }
.fl-challenge-q {
  font-size: 2rem; font-weight: 900; color: white;
  font-family: var(--mono); margin: 0.75rem 0 1rem;
  background: rgba(99,102,241,0.2); border-radius: 12px; padding: 0.75rem;
}
.fl-challenge-input {
  width: 100%; background: rgba(255,255,255,0.08);
  border: 2px solid rgba(99,102,241,0.4); border-radius: 12px;
  color: white; font-size: 1.3rem; font-weight: 800;
  text-align: center; padding: 0.7rem;
  font-family: var(--mono);
}
.fl-challenge-input:focus { border-color: #6366f1; outline: none; background: rgba(255,255,255,0.12); }
.fl-challenge-err { color: #f43f5e; font-size: 0.82rem; font-weight: 700; margin-top: 0.6rem; }
.fl-challenge-err.hidden { display: none; }
.fl-challenge-submit {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white; border: none; border-radius: 12px;
  padding: 0.7rem 1.5rem; font-size: 0.95rem; font-weight: 800;
  cursor: pointer; font-family: var(--sans);
  transition: all 0.2s;
}
.fl-challenge-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99,102,241,0.4); }
.fl-challenge-cancel {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 0.7rem 1.25rem;
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
  font-family: var(--sans); transition: all 0.2s;
}
.fl-challenge-motivate { color: rgba(255,255,255,0.3); font-size: 0.75rem; margin-top: 1rem; }

/* Break mode colors */
.focus-lock-overlay.break-mode .fl-orb-1 { background: #10b981; }
.focus-lock-overlay.break-mode .fl-orb-2 { background: #06b6d4; }
.focus-lock-overlay.break-mode .fl-ring-fill { stroke: #10b981; }
.focus-lock-overlay.break-mode .fl-mode-badge { background: rgba(16,185,129,0.2); color: #6ee7b7; border-color: rgba(16,185,129,0.4); }

/* Streak Badge Top */
.streak-badge-top {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.5rem 0.8rem; border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  animation: slideUpFadeIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .streak-badge-top {
  background: rgba(249,115,22,0.12);
  border-color: rgba(249,115,22,0.3);
  box-shadow: 0 0 16px rgba(249,115,22,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
.streak-icon { font-size: 1.6rem; filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.4)); animation: flBreathePulse 3s infinite; }
.streak-info { display: flex; flex-direction: column; }
.streak-num { font-size: 1.1rem; font-weight: 900; line-height: 1; color: var(--text); }
.streak-lbl { font-size: 0.65rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Focus Entry Card */
.focus-entry-card {
  display: flex; flex-direction: column; gap: 1rem;
  background: linear-gradient(135deg, rgba(79, 110, 247, 0.05), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(79, 110, 247, 0.15);
  padding: 1.5rem; border-radius: 20px;
  position: relative; overflow: visible;
}
.focus-entry-card::before {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 150px; height: 150px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(79, 110, 247, 0.15) 0%, transparent 70%);
}
.focus-entry-header { display: flex; align-items: center; gap: 1rem; }
.focus-entry-icon { font-size: 2.5rem; }
.focus-entry-title { font-size: 1.1rem; font-weight: 900; color: var(--text); margin-bottom: 0.15rem; }
.focus-entry-sub { font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.btn-focus-start {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white; border: none; border-radius: 14px;
  padding: 0.9rem; font-size: 1rem; font-weight: 900; font-family: var(--sans);
  cursor: pointer; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(79, 110, 247, 0.3);
  margin-top: 0.5rem; z-index: 1;
}
.btn-focus-start:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(79, 110, 247, 0.4); }
.btn-focus-start:active { transform: scale(0.97); }

/* Duration selector */
.pomo-duration-row {
  display: flex; gap: 0.5rem; justify-content: flex-end;
}
.pomo-dur-btn {
  flex: 1;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0;
  font-size: 0.85rem; font-weight: 800; font-family: var(--sans);
  color: var(--muted); cursor: pointer;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.pomo-dur-btn.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.pomo-dur-btn:active { transform: scale(0.92); }

/* Calendar Nav Controls */
.calendar-nav-controls {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface2); padding: 0.4rem; border-radius: 12px;
  border: 1px solid var(--border);
}
.cal-nav-btn {
  background: transparent; border: none; color: var(--text);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; font-size: 0.9rem;
}
.cal-nav-btn:hover { background: var(--surface); color: var(--accent); }
.cal-nav-label {
  font-size: 0.85rem; font-weight: 800; color: var(--text);
  min-width: 100px; text-align: center; cursor: pointer;
  padding: 0 0.5rem; font-family: var(--sans);
}
.cal-nav-label:hover { color: var(--accent); }

/* Action Sheet Bottom Modal */
.action-sheet-modal {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top-left-radius: 24px; border-top-right-radius: 24px;
  padding: 1.5rem 1rem 2.5rem;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1000;
  border-top: 1px solid var(--border);
}
[data-theme="dark"] .action-sheet-modal { background: #1e293b; box-shadow: 0 -10px 40px rgba(0,0,0,0.5); }
.action-sheet-modal.open { transform: translateY(0); }
.action-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.action-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.action-sheet-drag {
  width: 40px; height: 5px; border-radius: 5px;
  background: var(--border2); margin: 0 auto 1.5rem;
}
.action-sheet-title { font-size: 1.1rem; font-weight: 800; text-align: center; margin-bottom: 1rem; color: var(--text); }
.action-sheet-options { display: flex; flex-direction: column; gap: 0.5rem; }
.action-btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 1rem;
  background: var(--surface2); border: none; padding: 1rem 1.5rem;
  border-radius: 16px; width: 100%; text-align: right;
  font-size: 1rem; font-weight: 700; color: var(--text);
  font-family: var(--sans); cursor: pointer; transition: all 0.2s;
}
.action-btn:hover { background: var(--border); }
.action-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.action-btn.green-btn { color: #10b981; }
.action-btn.red-btn { color: #f43f5e; }
.action-btn.purple-btn { color: #8b5cf6; }

/* Calendar Zoom Transition */
.schedule-view-wrap {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  perspective: 1000px;
}
.schedule-view-transition {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
  will-change: transform, opacity;
}
.schedule-view-transition.zoom-out-down {
  /* Detail view (week) becoming smaller and fading */
  opacity: 0; transform: scale(0.85); pointer-events: none; position: absolute; top: 0; left: 0; width: 100%;
}
.schedule-view-transition.zoom-out-up {
  /* Overview (month) coming from larger scale */
  opacity: 0; transform: scale(1.15); pointer-events: none; position: absolute; top: 0; left: 0; width: 100%;
}
.schedule-view-transition.zoom-active {
  /* The currently active view */
  opacity: 1; transform: scale(1); position: relative;
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   MONTH CALENDAR v2 ג€” Apple Calendar style
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.mc2-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 2px;
}
.mc2-header {
  background: var(--surface2);
  text-align: center;
  padding: 0.6rem 0;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.mc2-cell {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.45rem 0.15rem 0.4rem;
  cursor: pointer;
  min-height: 52px;
  transition: background 0.1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mc2-cell:active { background: var(--surface2); }
.mc2-empty { background: var(--bg) !important; pointer-events: none; }
.mc2-past { opacity: 0.5; }
.mc2-num {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.9rem;
  width: 1.9rem;
  text-align: center;
  border-radius: 50%;
  color: var(--text);
  transition: background 0.15s, color 0.15s;
}
.mc2-today .mc2-num {
  background: var(--accent);
  color: white;
  font-weight: 800;
}
.mc2-selected:not(.mc2-today) .mc2-num {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 800;
}
.mc2-dots {
  display: flex;
  gap: 2px;
  justify-content: center;
  min-height: 6px;
  margin-top: 3px;
}
.mc2-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.1s;
}

/* Month calendar legend */
.mc2-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.75rem;
  margin: 6px 0 2px;
  background: var(--surface2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.mc2-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
}

/* Day detail panel */
.mc2-detail-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-top: 10px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  padding: 0;
}
.mc2-detail-panel.mc2-detail-visible {
  max-height: 1200px;
  padding: 1rem 1.1rem 0.85rem;
}
.mc2-detail-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.mc2-detail-empty {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  padding: 0.35rem 0;
}
.mc2-detail-rows { display: flex; flex-direction: column; gap: 5px; }
.mc2-detail-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.55rem 0.65rem;
  border-right: 3px solid var(--border2);
  border-radius: 10px;
  transition: background 0.12s;
}
.mc2-detail-row:hover, .mc2-detail-row:active { background: var(--surface2); }
.mc2-detail-time-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 2.8rem;
  flex-shrink: 0;
  padding-top: 2px;
}
.mc2-ev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.mc2-detail-content { flex: 1; min-width: 0; }
.mc2-detail-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mc2-detail-sub {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 1px;
}
.mc2-detail-notes {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 0.25rem;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Action sheet safe area + cancel button */
.action-sheet-modal {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 16px)) !important;
}
.action-cancel-btn {
  font-weight: 600 !important;
  opacity: 0.75;
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   TASK EDIT BOTTOM SHEET
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.tes-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top-left-radius: 28px; border-top-right-radius: 28px;
  padding: 0 1.25rem calc(2rem + env(safe-area-inset-bottom,16px));
  box-shadow: 0 -8px 40px rgba(0,0,0,0.14);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1);
  z-index: 1002; max-height: 92vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
}
[data-theme="dark"] .tes-panel { background: #1e293b; }
.tes-panel.open { transform: translateY(0); }
.tes-drag { width: 40px; height: 5px; border-radius: 5px; background: var(--border2); margin: 1rem auto 1.25rem; }
.tes-task-title { font-size: 1rem; font-weight: 900; text-align: center; margin-bottom: 1.1rem; color: var(--text); line-height: 1.3; }
.tes-quick-row { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
.tes-qbtn {
  flex: 1; padding: 0.7rem 0.4rem; border-radius: 14px; border: none;
  font-family: var(--sans); font-weight: 700; font-size: 0.82rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.3rem; transition: opacity 0.15s;
}
.tes-qbtn:active { opacity: 0.75; }
.tes-qbtn.done  { background: #d1fae5; color: #065f46; }
.tes-qbtn.missed{ background: #fee2e2; color: #991b1b; }
.tes-qbtn.del   { background: var(--surface2); color: var(--muted); }
.tes-fields { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 0.9rem; }
.tes-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.tes-field label { font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-bottom: 0.22rem; display: block; text-transform: uppercase; letter-spacing: 0.02em; }
.tes-field input {
  width: 100%; padding: 0.6rem 0.8rem; border-radius: 12px;
  border: 1.5px solid var(--border2); background: var(--surface2);
  color: var(--text); font-family: var(--sans); font-size: 0.88rem; box-sizing: border-box;
}
.tes-field input:focus { border-color: var(--accent); outline: none; }
.tes-ai-btn {
  width: 100%; padding: 0.72rem; border-radius: 14px;
  background: var(--accent-light); color: var(--accent);
  border: 1.5px solid var(--accent); font-family: var(--sans);
  font-weight: 700; cursor: pointer; font-size: 0.86rem;
  margin-bottom: 0.65rem; transition: all 0.15s;
}
.tes-ai-btn:active { background: var(--accent); color: white; }
.tes-ai-result {
  background: var(--green-light); border: 1px solid var(--green);
  border-radius: 12px; padding: 0.75rem 0.9rem; font-size: 0.82rem;
  line-height: 1.55; margin-bottom: 0.75rem; display: none;
}
.tes-ai-result.show { display: block; }
.tes-save-btn {
  width: 100%; padding: 0.88rem; border-radius: 14px;
  background: linear-gradient(135deg,var(--accent),var(--accent-dark));
  color: white; border: none; font-family: var(--sans);
  font-weight: 800; font-size: 0.95rem; cursor: pointer; margin-top: 0.25rem;
}
.tes-save-btn:active { opacity: 0.85; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   QUICK REPLY CHIPS (in recalc chat)
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.quick-reply-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; justify-content: flex-end; }
.quick-chip {
  padding: 0.38rem 0.8rem; border-radius: 20px;
  border: 1.5px solid var(--accent); color: var(--accent);
  background: var(--accent-light); font-family: var(--sans);
  font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.quick-chip:active { background: var(--accent); color: white; }
.quick-chip.red   { border-color: var(--red); color: var(--red); background: var(--red-light); }
.quick-chip.red:active { background: var(--red); color: white; }
.quick-chip.muted { border-color: var(--border2); color: var(--muted); background: var(--surface2); }

/* task body tappable */
.tl-body { cursor: pointer; flex: 1; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   RECALC DIRECT-ACTION BUTTONS
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.recalc-actions-zone { padding: 0.6rem 1rem 0.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.rc-action-btn { width: 100%; padding: 0.85rem 1.1rem; border-radius: 14px; border: none; font-size: 0.95rem; font-weight: 700; font-family: var(--sans); cursor: pointer; text-align: right; transition: transform 0.12s, opacity 0.12s; direction: rtl; }
.rc-action-btn:active { transform: scale(0.97); }
.rc-action-btn.rc-blue  { background: var(--accent); color: #fff; }
.rc-action-btn.rc-green { background: #10b981; color: #fff; }
.rc-action-btn.rc-orange{ background: #f59e0b; color: #fff; }
.rc-action-btn.rc-red   { background: #ef4444; color: #fff; }
.rc-action-btn.rc-muted { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.rc-result-box { padding: 0.9rem 1.1rem; border-radius: 14px; font-weight: 700; font-size: 0.88rem; }
.rc-result-box.success  { background: #d1fae5; color: #065f46; border: 2px solid #10b981; }
.rc-result-box.deleted  { background: #fee2e2; color: #991b1b; border: 2px solid #ef4444; }
.rc-custom-toggle { display: block; width: 100%; padding: 0.4rem; background: none; border: none; color: var(--muted); font-size: 0.78rem; cursor: pointer; font-family: var(--sans); text-decoration: underline; text-align: center; margin-bottom: 0.25rem; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   SETTINGS PANEL ג€” iOS style
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.settings-panel {
  background: var(--surface);
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  margin: auto;
  border: 1px solid var(--border);
}
.settings-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
}
.settings-hdr-title {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.settings-hdr-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface2);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s;
}
.settings-hdr-close:hover { background: var(--border); }
.settings-body {
  overflow-y: auto;
  padding: 1.1rem 1.1rem 0.5rem;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.settings-sec-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 0.4rem;
  margin-bottom: 0.45rem;
  margin-top: 1.4rem;
}
.settings-sec-label:first-child { margin-top: 0; }
.settings-card {
  background: var(--surface2);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.settings-row {
  display: flex;
  align-items: center;
  padding: 0.82rem 1rem;
  gap: 0.75rem;
  min-height: 52px;
}
.settings-row-sep {
  border-top: 1px solid var(--border);
}
.settings-row-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.settings-row-input {
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: 9px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  color: var(--text);
  text-align: right;
  max-width: 55%;
  font-family: var(--sans);
  width: auto;
  transition: border-color 0.15s;
}
.settings-row-input:focus { border-color: var(--accent); outline: none; }
.settings-row-select {
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: 9px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  color: var(--text);
  font-family: var(--sans);
  cursor: pointer;
}
.settings-row-full {
  padding: 0.9rem 1rem;
}
.settings-row-full + .settings-row-full {
  border-top: 1px solid var(--border);
}
.settings-row-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.settings-row-action {
  cursor: pointer;
  transition: background 0.12s;
}
.settings-row-action:active { background: var(--border); }
.settings-row-danger:active { background: var(--red-light); }
.settings-ftr {
  padding: 1rem 1.1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
/* Remove old accordion styles' visual conflict */
.settings-panel .acc-section,
.settings-panel .acc-header,
.settings-panel .acc-body { all: unset; display: block; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   ONBOARDING 6 QUESTIONS UI
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.pq-block { 
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; 
  padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
  transition: transform 0.2s; 
}
.pq-block:hover { transform: translateY(-2px); }
.pq-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.pq-num { 
  background: var(--accent); color: white; width: 32px; height: 32px; 
  display: flex; align-items: center; justify-content: center; border-radius: 50%; 
  font-weight: 800; font-size: 0.9rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(79,110,247,0.3); 
}
.pq-q { font-size: 1.1rem; font-weight: 800; color: var(--text); line-height: 1.3; }
.pq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pq-opt { 
  background: var(--surface2); border: 2px solid transparent; border-radius: 12px; 
  padding: 0.85rem; text-align: center; font-size: 0.9rem; font-weight: 600; 
  color: var(--text); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.02); 
}
.pq-opt:hover { background: var(--surface3); }
.pq-opt.sel { 
  background: var(--accent-light); border-color: var(--accent); color: var(--accent); 
  transform: scale(1.02); box-shadow: 0 4px 12px rgba(79,110,247,0.15); 
}
.pq-other-inp { 
  margin-top: 0.75rem; width: 100%; border: 2px solid var(--border); 
  border-radius: 10px; padding: 0.75rem; font-size: 0.95rem; font-family: var(--sans); 
}
.pq-other-inp:focus { border-color: var(--accent); outline: none; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   3 DOTS MENU ENHANCEMENT
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.tl-btn-menu { 
  width: auto !important; padding: 0 0.5rem !important; border: 1.5px solid var(--border) !important; 
  background: var(--surface) !important; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}
.tl-btn-menu-text { font-family: var(--sans); display: inline-block; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   RATING STARS FIX
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.star-b svg { width: 44px; height: 44px; stroke-width: 1.5; }
.star-row { margin-bottom: 1.5rem; flex-wrap: wrap; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   CALENDAR LEGEND ENHANCEMENT
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.cal-legend { margin-top: 1.5rem; padding: 1rem; background: var(--surface2); border-radius: 12px; border: 1px solid var(--border); box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
.cal-legend-title { font-size: 0.8rem; font-weight: 800; color: var(--text); margin-bottom: 0.75rem; }
.cal-legend-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cal-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); background: var(--surface); padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); }
.cal-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   STUDYQUEST ג€“ PROGRESS PAGE
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.sq-hero-card {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #0f766e 100%);
  border-radius: 20px; padding: 1.25rem; display: flex; align-items: center;
  gap: 1.25rem; margin-bottom: 0.85rem; position: relative; overflow: hidden;
}
.sq-ring-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.sq-ring-svg { width: 140px; height: 140px; }
.sq-ring-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.sq-level-emoji { font-size: 1.65rem; line-height: 1; }
.sq-xp-num { font-size: 1.45rem; font-weight: 900; color: #fff; font-family: var(--mono); line-height: 1.1; }
.sq-xp-lbl { font-size: 0.6rem; color: rgba(255,255,255,0.45); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.sq-hero-info { flex: 1; min-width: 0; }
.sq-hero-level-name { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 0.45rem; }
.sq-xp-bar-wrap { height: 7px; background: rgba(255,255,255,0.15); border-radius: 99px; overflow: hidden; margin-bottom: 0.28rem; }
.sq-xp-bar { height: 100%; background: linear-gradient(90deg, #a78bfa, #38ef7d); border-radius: 99px; transition: width 1s cubic-bezier(0.34,1.56,0.64,1); min-width: 0; }
.sq-xp-caption { font-size: 0.7rem; color: rgba(255,255,255,0.45); margin-bottom: 0.6rem; }
.sq-streak-chip {
  display: inline-flex; align-items: center; gap: 0.28rem;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 99px; padding: 0.22rem 0.6rem;
}
.sq-fire { font-size: 0.85rem; }
.sq-streak-num { font-size: 0.92rem; font-weight: 900; color: #fff; font-family: var(--mono); }
.sq-streak-lbl { font-size: 0.67rem; color: rgba(255,255,255,0.55); font-weight: 600; }
/* Stats row */
.sq-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.85rem; }
.sq-stat-pill {
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 0.65rem 0.4rem; text-align: center;
}
.sq-stat-gold { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fbbf24; }
.sq-stat-n { display: block; font-size: 1.2rem; font-weight: 900; color: var(--text); font-family: var(--mono); line-height: 1; }
.sq-stat-l { display: block; font-size: 0.6rem; color: var(--muted); font-weight: 700; margin-top: 0.2rem; letter-spacing: 0.2px; }
.sq-stat-gold .sq-stat-n, .sq-stat-gold .sq-stat-l { color: #92400e; }
/* Daily missions */
.sq-mission-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.sq-mission-row:last-child { border-bottom: none; }
.sq-mission-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.sq-mission-text { flex: 1; min-width: 0; }
.sq-mission-title { font-size: 0.83rem; font-weight: 700; color: var(--text); }
.sq-mission-sub { font-size: 0.7rem; color: var(--muted); margin-top: 0.08rem; }
.sq-mission-xp { font-size: 0.7rem; font-weight: 800; color: var(--accent); white-space: nowrap; background: var(--accent-light); padding: 0.2rem 0.45rem; border-radius: 6px; }
.sq-mission-done .sq-mission-title { text-decoration: line-through; color: var(--muted); }
.sq-mission-check {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.sq-mission-check.done { background: var(--green); border-color: var(--green); color: #fff; }
/* Achievements ג€” card badges (no hexagon) */
.sq-badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem 0.6rem; padding: 0.25rem 0; }
.sq-badge {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 0.9rem 0.4rem 0.6rem;
  cursor: default; transition: transform 0.2s, box-shadow 0.2s;
  position: relative; overflow: hidden;
}
.sq-badge.earned { cursor: pointer; border-color: rgba(99,102,241,0.35); background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05)); }
.sq-badge.earned:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(99,102,241,0.2); }
.sq-badge-hex {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s;
}
.sq-badge.earned .sq-badge-hex { background: linear-gradient(135deg,rgba(99,102,241,0.2),rgba(139,92,246,0.15)); box-shadow: 0 2px 12px rgba(99,102,241,0.2); }
.sq-badge-hex-icon { font-size: 1.5rem; filter: grayscale(1) opacity(0.35); line-height: 1; }
.sq-badge.earned .sq-badge-hex-icon { filter: none; }
.sq-badge-name { font-size: 0.6rem; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.35; max-width: 80px; }
.sq-badge.earned .sq-badge-name { color: var(--text); font-weight: 800; }
/* Lock indicator on unearned */
.sq-badge:not(.earned)::after { content: 'נŸ”’'; position: absolute; top: 6px; left: 6px; font-size: 0.6rem; opacity: 0.4; }
[data-theme="dark"] .sq-badge { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .sq-badge.earned { background: linear-gradient(135deg,rgba(99,102,241,0.15),rgba(139,92,246,0.1)); border-color: rgba(99,102,241,0.4); }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   HOBBY / PERSONAL GOALS PAGE
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */

/* Empty state */
.hp-empty-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 3rem 1.5rem; background: var(--surface); border-radius: 24px;
  border: 2px dashed var(--border); margin-top: 0.5rem;
}
.hp-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.hp-empty-title { font-size: 1.2rem; font-weight: 900; color: var(--text); margin-bottom: 0.5rem; }
.hp-empty-sub { font-size: 0.87rem; color: var(--muted); line-height: 1.55; max-width: 300px; }

/* Tabs */
.hp-tab {
  background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 0.35rem 0.85rem; font-size: 0.82rem; font-weight: 700; color: var(--text2, var(--text));
  cursor: pointer; font-family: var(--sans); transition: all 0.15s;
}
.hp-tab.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.hp-tab-new { border-style: dashed; color: var(--muted); }
.hp-tab-new:hover { color: var(--accent); border-color: var(--accent); }

/* Hero card */
.hp-hero-card {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  border-radius: 20px; padding: 1.25rem; margin-bottom: 1rem; color: white;
}
.hp-hero-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.hp-hero-name { font-size: 1.3rem; font-weight: 900; margin-bottom: 0.2rem; }
.hp-hero-goal { font-size: 0.82rem; opacity: 0.85; line-height: 1.4; }
.hp-delete-btn { background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; color: white; width: 30px; height: 30px; cursor: pointer; font-size: 0.8rem; flex-shrink: 0; }
.hp-hero-stats { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 0.5rem; }
.hp-stat { background: rgba(255,255,255,0.15); border-radius: 12px; padding: 0.55rem 0.65rem; text-align: center; }
.hp-stat-n { display: block; font-size: 1.1rem; font-weight: 900; font-family: var(--mono); line-height: 1; }
.hp-stat-l { display: block; font-size: 0.6rem; opacity: 0.75; font-weight: 700; margin-top: 0.2rem; letter-spacing: 0.3px; }

/* Track / Roadmap */
/* Hobby progress track ג€” redesign */
.hpt-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.hpt-level-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 20px; border: 1.5px solid; font-size: 0.82rem; font-weight: 800; }
.hpt-emoji { font-size: 1rem; }
.hpt-count { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.hpt-bar-wrap { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; }
.hpt-bar-bg { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.hpt-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1); }
.hpt-pct { font-size: 0.72rem; font-weight: 800; color: var(--muted); min-width: 2.5rem; text-align: left; }
.hpt-next { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--muted); margin-bottom: 1rem; }
.hpt-next b { color: var(--text); }
.hpt-next-count { font-size: 0.72rem; font-weight: 700; color: var(--accent); background: var(--accent-light); padding: 0.15rem 0.5rem; border-radius: 8px; }
.hpt-done-msg { font-size: 0.85rem; font-weight: 800; color: var(--green); text-align: center; margin-bottom: 1rem; }
.hpt-steps { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding-top: 0.5rem; }
.hpt-steps::before { content: ''; position: absolute; top: 1.1rem; right: 0; left: 0; height: 2px; background: var(--border); z-index: 0; }
.hpt-step { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; position: relative; z-index: 1; flex: 1; }
.hpt-step-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: all 0.3s; }
.hpt-step.hpt-reached .hpt-step-dot { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.hpt-step.hpt-cur .hpt-step-dot { width: 30px; height: 30px; font-size: 0.9rem; box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
.hpt-step-lbl { font-size: 0.52rem; font-weight: 700; color: var(--muted); text-align: center; max-width: 44px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpt-step.hpt-reached .hpt-step-lbl { color: var(--text); }
.hpt-step.hpt-cur .hpt-step-lbl { color: var(--accent); font-weight: 900; }

/* Session list */
.hp-session-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.hp-session-row:last-child { border-bottom: none; }
.hp-session-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* AI Coach chat card */
.hp-coach-card { padding: 1.25rem; }

/* Task suggestion bubble */
.hp-task-suggest {
  background: var(--accent-light) !important; border: 1.5px solid var(--accent);
  border-radius: 14px; padding: 0.85rem !important;
}
.hp-add-btn {
  margin-top: 0.65rem; background: var(--accent); color: white; border: none;
  border-radius: 9px; padding: 0.45rem 1rem; font-family: var(--sans); font-weight: 700;
  cursor: pointer; font-size: 0.82rem; width: 100%;
}
.hp-add-btn:hover { opacity: 0.9; }

/* Bottom nav ג€” 5 items floating pill */

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   WEEKLY REVIEW
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */

/* Banner on today page */
.wr-banner {
  display: flex; align-items: center; gap: 0.75rem;
  background: linear-gradient(135deg, #4f6ef7 0%, #7c3aed 100%);
  border-radius: 14px; padding: 0.9rem 1.1rem; margin-bottom: 1rem;
  color: white; animation: wrPulse 2.5s ease-in-out infinite;
}
@keyframes wrPulse { 0%,100%{box-shadow:0 0 0 0 rgba(79,110,247,0.4)} 50%{box-shadow:0 0 0 8px rgba(79,110,247,0)} }
.wr-banner-icon { font-size: 1.5rem; flex-shrink: 0; }
.wr-banner-title { font-size: 0.9rem; font-weight: 800; }
.wr-banner-sub { font-size: 0.75rem; opacity: 0.85; margin-top: 0.15rem; }

/* Progress bar */
.wr-prog-wrap { height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 1.25rem; overflow: hidden; }
.wr-prog-bar { height: 100%; background: linear-gradient(90deg,#4f6ef7,#7c3aed); border-radius: 3px; transition: width 0.5s ease; }

/* Message feed */
.wr-msgs { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1rem; min-height: 80px; }
.wr-msg { max-width: 88%; padding: 0.75rem 1rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.5; animation: wrFadeIn 0.25s ease; }
@keyframes wrFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.wr-msg-ai { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 14px 14px 14px 4px; align-self: flex-start; }
.wr-msg-user { background: linear-gradient(135deg,#4f6ef7,#7c3aed); color: white; border-radius: 14px 14px 4px 14px; align-self: flex-end; font-weight: 700; }

/* Choice buttons */
.wr-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.wr-btn {
  background: var(--surface); border: 2px solid var(--border); border-radius: 12px;
  padding: 0.65rem 1rem; font-size: 0.85rem; font-weight: 700; color: var(--text);
  cursor: pointer; font-family: var(--sans); transition: all 0.15s; flex: 1; min-width: 120px;
  text-align: center;
}
.wr-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-light); color: var(--accent); transform: translateY(-1px); }
.wr-btn:disabled { opacity: 0.4; cursor: default; }
.wr-btn-inline { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 0.3rem 0.8rem; cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 0.8rem; }

/* Plan preview */
.wr-day-group { margin-bottom: 0.9rem; }
.wr-day-label { font-size: 0.7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.35rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); }
.wr-task-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.82rem; }
.wr-anchor-row { opacity: 0.65; }
.wr-anchor-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wr-task-time { font-weight: 700; min-width: 42px; color: var(--accent); font-size: 0.8rem; }
.wr-task-dur { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.wr-task-time { color: var(--muted); font-weight: 600; min-width: 42px; font-family: var(--mono); }
.wr-task-name { flex: 1; font-weight: 700; color: var(--text); }
.wr-task-course { background: var(--accent-light); color: var(--accent); font-size: 0.68rem; font-weight: 800; padding: 0.18rem 0.45rem; border-radius: 6px; white-space: nowrap; }
.wr-task-dur { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }

/* Done state */
.wr-done-card { text-align: center; padding: 2.5rem 1.5rem 1.8rem; background: var(--surface); border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.wr-done-check { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #10b981); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 4px 16px rgba(16,185,129,0.3); }
.wr-done-title { font-size: 1.4rem; font-weight: 900; color: var(--text); margin-bottom: 0.3rem; }
.wr-done-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.6rem; }
.wr-done-primary-btns { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }
.wr-done-btn-main { width: 100%; padding: 0.78rem 1rem; border-radius: 14px; background: var(--accent); color: white; border: none; font-size: 0.95rem; font-weight: 700; cursor: pointer; font-family: var(--sans); display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: opacity 0.2s; }
.wr-done-btn-main:hover { opacity: 0.88; }
.wr-done-btn-next { width: 100%; padding: 0.78rem 1rem; border-radius: 14px; background: var(--surface2); color: var(--text); border: 1.5px solid var(--border); font-size: 0.95rem; font-weight: 700; cursor: pointer; font-family: var(--sans); display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: border-color 0.2s; }
.wr-done-btn-next:hover { border-color: var(--accent); color: var(--accent); }
.wr-done-secondary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.3rem; }
.wr-done-lnk { background: none; border: none; color: var(--muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: var(--sans); padding: 0.2rem 0.1rem; transition: color 0.15s; }
.wr-done-lnk:hover { color: var(--accent); }
.wr-done-sep { color: var(--border); font-size: 0.75rem; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   WEEKLY REVIEW ג€” sidebar card
   ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
/* Weekly review nav button */
.nav-item-wr {
  margin: 0.4rem 0.5rem 0;
  background: linear-gradient(135deg, rgba(79,110,247,0.08), rgba(99,102,241,0.05));
  border: 1.5px solid rgba(79,110,247,0.18);
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
  width: calc(100% - 1rem);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: all 0.18s;
}
.nav-item-wr:hover { background: rgba(79,110,247,0.13); border-color: var(--accent); }
.nav-item-wr.wrs-done { background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(5,150,105,0.06)); border-color: rgba(16,185,129,0.3); }
.nav-item-wr.wrs-done:hover { background: rgba(16,185,129,0.15); border-color: var(--green); }
.nav-icon-wr { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; }
.nav-item-wr.wrs-done .nav-icon-wr { background: var(--green); }
.nav-wr-text { flex: 1; text-align: right; line-height: 1.3; min-width: 0; }
.nav-wr-label { display: block; font-size: 0.83rem; font-weight: 800; color: var(--accent); }
.nav-item-wr.wrs-done .nav-wr-label { color: var(--green); }
.nav-wr-sub { display: block; font-size: 0.68rem; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-wr-badge { font-size: 0.58rem; font-weight: 800; background: var(--accent); color: white; padding: 0.12rem 0.38rem; border-radius: 20px; flex-shrink: 0; }
.nav-item-wr.wrs-done .nav-wr-badge { background: var(--green); }
/* keep old wrs-sub/wrs-btn refs alive (used by JS) */
.wrs-sub { display: none; }
.wrs-btn { display: none; }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   PLANNER PAGE ג€” redesigned cards
   ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */

/* Welcome banner */
.pl-welcome {
  background: linear-gradient(135deg, #4f6ef7 0%, #6366f1 55%, #8b5cf6 100%);
  border-radius: 20px; padding: 1.85rem 1.4rem 1.6rem;
  text-align: center; color: white; margin-bottom: 1.35rem;
  box-shadow: 0 8px 28px rgba(79,110,247,0.28);
}
.pl-welcome-icon-big { font-size: 2.6rem; margin-bottom: 0.55rem; line-height: 1; }
.pl-welcome-h { font-size: 1.2rem; font-weight: 900; margin-bottom: 0.5rem; line-height: 1.3; }
.pl-welcome-p { font-size: 0.83rem; opacity: 0.86; max-width: 340px; margin: 0 auto 1.25rem; line-height: 1.6; }
.pl-welcome-flow { display: flex; align-items: center; justify-content: center; gap: 0.3rem; flex-wrap: wrap; }
.pl-wf-step { display: flex; align-items: center; gap: 0.3rem; background: rgba(255,255,255,0.15); border-radius: 18px; padding: 0.35rem 0.7rem; }
.pl-wf-n { font-weight: 900; font-size: 0.8rem; font-family: var(--mono); opacity: 0.68; }
.pl-wf-step span:last-child { font-size: 0.73rem; font-weight: 700; }
.pl-wf-line { width: 1.1rem; height: 2px; background: rgba(255,255,255,0.26); flex-shrink: 0; }
.pl-welcome-cta-primary { background: white; color: #4f6ef7; border: none; border-radius: 12px; padding: 0.7rem 1.3rem; font-family: var(--sans); font-size: 0.85rem; font-weight: 800; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,0.12); transition: all 0.18s; }
.pl-welcome-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,0.16); }
.pl-welcome-cta-secondary { background: rgba(255,255,255,0.15); color: white; border: 1.5px solid rgba(255,255,255,0.32); border-radius: 12px; padding: 0.7rem 1.3rem; font-family: var(--sans); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.18s; }
.pl-welcome-cta-secondary:hover { background: rgba(255,255,255,0.24); }

/* Section headers */
.pl-sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.pl-sec-title { font-size: 0.92rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.pl-sec-add { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 9px; padding: 0.25rem 0.7rem; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; cursor: pointer; transition: all 0.13s; }
.pl-sec-add:hover { background: var(--accent); color: white; }

/* Cards grid ג€” flex column list, full-width rows */
.pl-cards-grid { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.25rem; }

/* Course card ג€” horizontal row with color strip */
.pl-course-card { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: all 0.2s; margin-bottom: 0.5rem; }
.pl-course-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.pl-course-card.urgent { border-color: rgba(239,68,68,0.35); }
.pl-course-card.soon { border-color: rgba(245,158,11,0.35); }
.pl-cc-strip { width: 5px; flex-shrink: 0; }
.pl-cc-content { flex: 1; padding: 0.78rem 0.95rem; min-width: 0; }
.pl-cc-main-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.pl-cc-name { flex: 1; font-size: 0.93rem; font-weight: 800; color: var(--text); line-height: 1.3; min-width: 0; word-break: break-word; }
.pl-cc-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; padding: 0 0.2rem; border-radius: 6px; line-height: 1; flex-shrink: 0; transition: all 0.15s; }
.pl-cc-del:hover { background: rgba(239,68,68,0.12); color: #ef4444; }
.pl-cc-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.32rem; }
.pl-cc-exam-chip { display: inline-flex; align-items: center; gap: 0.18rem; font-size: 0.68rem; font-weight: 800; border-radius: 6px; padding: 0.15rem 0.42rem; background: var(--surface2); color: var(--muted); white-space: nowrap; }
.pl-cc-exam-chip.urgent { background: rgba(239,68,68,0.1); color: #ef4444; }
.pl-cc-exam-chip.soon { background: rgba(245,158,11,0.1); color: #d97706; }
.pl-cc-hours { font-size: 0.7rem; color: var(--muted); font-weight: 600; }
.pl-cc-pending { font-size: 0.68rem; font-weight: 700; color: var(--accent); background: var(--accent-light); padding: 0.12rem 0.4rem; border-radius: 5px; }
.pl-cc-prog { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 0.55rem; }
.pl-cc-prog-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }

/* Hobby card ג€” same horizontal row style */
.pl-hobby-card { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: all 0.2s; margin-bottom: 0.5rem; }
.pl-hobby-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.pl-hc-strip { width: 5px; flex-shrink: 0; }
.pl-hc-content { flex: 1; padding: 0.78rem 0.95rem; min-width: 0; display: flex; flex-direction: column; }
.pl-hc-main-row { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.32rem; }
.pl-hc-name { flex: 1; font-size: 0.93rem; font-weight: 800; color: var(--text); line-height: 1.3; min-width: 0; word-break: break-word; }
.pl-hc-coach-btn { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 0.26rem 0.7rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0; }
.pl-hc-coach-btn:hover { filter: brightness(1.1); }
.pl-hc-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.pl-hc-freq { font-size: 0.68rem; font-weight: 700; background: var(--accent-light); color: var(--accent); padding: 0.12rem 0.4rem; border-radius: 5px; white-space: nowrap; }
.pl-hc-done { font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.pl-hc-goal-tag { font-size: 0.68rem; color: var(--muted); margin-top: 0.22rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pl-hc-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 0.2rem; border-radius: 6px; line-height: 1; flex-shrink: 0; transition: all 0.15s; margin-right: auto; }
.pl-hc-del:hover { background: rgba(239,68,68,0.12); color: #ef4444; }

/* Quick actions */
.pl-actions-row { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pl-action-chip { flex: 1; min-width: 76px; padding: 0.52rem 0.55rem; border: 1px solid var(--border2); border-radius: 11px; background: var(--surface); color: var(--text); font-family: var(--sans); font-size: 0.74rem; font-weight: 700; cursor: pointer; transition: all 0.16s; box-shadow: 0 1px 4px rgba(0,0,0,0.04); text-align: center; white-space: nowrap; }
.pl-action-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); transform: translateY(-1px); }
.pl-action-chip.red:hover { border-color: #ef4444; color: #ef4444; background: var(--red-light); }

/* Advanced collapsible */
.pl-advanced-details { margin-top: 0.25rem; }
.pl-advanced-summary { cursor: pointer; font-weight: 700; font-size: 0.8rem; color: var(--muted); padding: 0.25rem 0; user-select: none; list-style: none; }
.pl-advanced-summary::-webkit-details-marker { display: none; }
.pl-advanced-details[open] .pl-advanced-summary { color: var(--accent); }

/* Empty hint */
.pl-empty-hint { font-size: 0.77rem; color: var(--muted); text-align: center; padding: 0.7rem; border: 1.5px dashed var(--border); border-radius: 11px; margin-bottom: 1.1rem; line-height: 1.5; }


/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   START HERE WIZARD (first-time planner)
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.pl-sh-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.5rem; box-shadow: var(--shadow); max-width: 640px; margin: 0 auto 1.5rem; }
.pl-sh-hero { text-align: center; margin-bottom: 1.5rem; }
.pl-sh-emoji { font-size: 2.4rem; line-height: 1; margin-bottom: 0.5rem; }
.pl-sh-title { font-size: 1.35rem; font-weight: 900; color: var(--text); margin-bottom: 0.35rem; }
.pl-sh-desc { font-size: 0.84rem; color: var(--muted); line-height: 1.6; max-width: 340px; margin: 0 auto; }
.pl-sh-section { border-top: 1px solid var(--border); padding-top: 1.1rem; margin-top: 1.1rem; }
.pl-sh-sec-title { font-size: 0.88rem; font-weight: 800; color: var(--text); margin-bottom: 0.75rem; }
.pl-sh-optional { font-size: 0.78rem; font-weight: 400; color: var(--muted); }
.pl-sh-courses-header { display: none; }
.pl-sh-course-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: end;
  background: var(--surface2);
  border-radius: 12px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
}
.plsh-name-wrap, .plsh-exam-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.plsh-label { font-size: 0.7rem; font-weight: 800; color: var(--muted); }
.pl-sh-course-row input { padding: 0.6rem 0.75rem; font-size: 0.88rem; border-radius: 9px; width: 100%; }
.plsh-remove {
  background: var(--red-light);
  color: var(--red);
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
  margin-bottom: 2px;
}
.plsh-remove:hover { background: var(--red); color: #fff; }
.pl-sh-hobby-add { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.pl-sh-hobby-add input { flex: 1; }
.pl-sh-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 1rem; }
.pl-sh-hobby-chip { background: var(--accent-light); color: var(--accent); border-radius: 20px; padding: 0.28rem 0.75rem; font-size: 0.82rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.25rem; }
.pl-sh-chip-x { cursor: pointer; opacity: 0.55; font-size: 1rem; margin-right: 0.15rem; transition: opacity 0.15s; }
.pl-sh-chip-x:hover { opacity: 1; }
.pl-sh-goal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }
.pl-sh-goal-opt {
  background: var(--surface2); border: 2px solid var(--border); border-radius: 18px;
  padding: 1.1rem 0.5rem 0.9rem; text-align: center; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative; overflow: hidden;
}
.pl-sh-goal-opt::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.25s; border-radius: 18px;
}
.pl-sh-goal-opt.goal-selected::before, .pl-sh-goal-opt.sel::before { opacity: 1; }
.pl-sh-goal-opt:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.pl-sh-goal-opt:hover, .pl-sh-goal-opt.sel, .pl-sh-goal-opt.goal-selected {
  border-color: var(--accent); background: var(--accent-light);
}
.pl-sh-goal-visual { display: flex; justify-content: center; margin-bottom: 0.6rem; position: relative; z-index: 1; }
.pl-sh-goal-visual svg { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); transition: transform 0.25s; }
.pl-sh-goal-opt:hover .pl-sh-goal-visual svg, .pl-sh-goal-opt.sel .pl-sh-goal-visual svg { transform: scale(1.1); }
.pl-sh-goal-name { font-size: 0.9rem; font-weight: 800; color: var(--text); position: relative; z-index: 1; }
.pl-sh-goal-desc { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.4; position: relative; z-index: 1; font-weight: 600; }

@media (max-width: 480px) {
  .pl-sh-goal-row { grid-template-columns: 1fr; }
  .pl-sh-goal-opt { display: flex; align-items: center; gap: 0.75rem; text-align: right; padding: 0.7rem 0.85rem; }
  .pl-sh-goal-icon { font-size: 1.2rem; margin-bottom: 0; flex-shrink: 0; }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   MOBILE FIXES ג€” anchor builder + modal
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
@media (max-width: 480px) {
  /* Anchor builder: prevent overflow */
  .anchor-builder-row { padding: 0.75rem; }
  .ab-header { flex-wrap: wrap; }
  .ab-days { flex-wrap: wrap; gap: 0.3rem; }
  .ob-day-btn { width: 32px; height: 32px; font-size: 0.72rem; }

  /* Modal: full-width on small screens */
  .modal-box { padding: 1.25rem 1rem; border-radius: 16px; margin: 0.5rem; max-width: calc(100vw - 1rem); }
  .modal-overlay { padding: 0.5rem; align-items: flex-end; }

  /* Anchor modal grid fields: single column */
  .modal-box .form-grid { grid-template-columns: 1fr; }

  /* Exam cards: single column */
  .exam-row-card { flex-direction: column; gap: 0.5rem; }
  .exam-date-pill { min-width: 0; width: 100%; text-align: right; display: flex; gap: 0.75rem; align-items: center; border-radius: 10px; padding: 0.4rem 0.75rem; }
  .exam-days-badge { font-size: 1.1rem; min-width: 0; }

  /* Anchor list cards ג€” strip layout already handles all screen sizes */
  .anchor-card-actions { padding: 0 0.4rem; }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   PROFILE QUESTION CARDS (pq-card)
   Beautiful onboarding redesign
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.pq-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1rem 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s;
}
.pq-card::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, #818cf8 100%);
  border-radius: 0 18px 18px 0;
}
.pq-card:last-child { margin-bottom: 0; }
.pq-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}
.pq-card-icon { font-size: 1.35rem; line-height: 1; }
.pq-card-num {
  font-size: 0.62rem;
  font-weight: 900;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-family: var(--mono);
  letter-spacing: 0.5px;
}
.pq-card-q {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.8rem;
}
/* Override old pq-opts/pq-opt inside cards */
.pq-card .pq-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.pq-card .pq-opt {
  background: var(--surface2);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  color: var(--text2, var(--text));
  transition: all 0.15s;
  user-select: none;
  line-height: 1.35;
}
.pq-card .pq-opt:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  transform: translateY(-1px);
}
.pq-card .pq-opt.sel {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(79,110,247,0.12);
}
.pq-card .pq-other {
  font-size: 0.73rem;
  color: var(--muted) !important;
  font-style: italic;
}
.pq-card .pq-other-inp {
  margin-top: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  border: 1.5px solid var(--border2);
  background: var(--surface2);
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--text);
  box-sizing: border-box;
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   WEEKLY REVIEW ג€” CONFIRM BUTTON + MULTI-SELECT
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.wr-confirm-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  border: none;
  padding: 0.95rem;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(79,110,247,0.3);
  letter-spacing: 0.2px;
}
.wr-confirm-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(79,110,247,0.4); }
.wr-confirm-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(79,110,247,0.3); }

.wr-btn-multi { transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; }
.wr-btn-multi.sel {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
  transform: scale(1.03);
}


/* --- NEW MODERN OVERRIDES --- */
.hp-prog-btn.selected {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

/* Timeline visual improvements */
.tl-hour-label {
  color: var(--muted);
  font-weight: 800;
  font-size: 0.75rem;
  background: var(--bg);
  padding: 0 4px;
  transform: translateY(-50%);
}

.timeline-events-area {
  background: transparent !important;
}

.tl-ev {
  border: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-radius: 14px !important;
}

[data-theme="dark"] .tl-ev {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

.tl-ev-body {
  padding: 6px 10px !important;
}

.tl-ev-name {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

.tl-ev-bar {
  border-radius: 14px 0 0 14px !important;
  width: 6px !important;
}

.tl-day-header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0.5rem !important;
}

.tl-day-title {
  font-weight: 900 !important;
  font-size: 1.2rem !important;
}

/* Hobby Cards Redesign */
#hp-motivation-card {
  background: var(--surface) !important;
  border: none !important;
  box-shadow: 0 12px 32px rgba(79,110,247,0.08) !important;
  border-radius: 24px !important;
  padding: 1.5rem !important;
}

[data-theme="dark"] #hp-motivation-card {
  box-shadow: 0 12px 32px rgba(0,0,0,0.3) !important;
}

#hp-track {
  background: var(--surface) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(79,110,247,0.05) !important;
  border-radius: 20px !important;
  padding: 1.5rem !important;
  margin-top: 1rem !important;
}


/* --- PREMIUM 3D & MODERN OVERRIDES --- */
/* Remove remaining emoji placeholders or replace with pure CSS dots */
.hp-lvl-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-left: 6px; vertical-align: middle;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid white;
}
.hp-lvl-dot.c1 { background: #cbd5e1; }
.hp-lvl-dot.c2 { background: #94a3b8; }
.hp-lvl-dot.c3 { background: #f5a623; }
.hp-lvl-dot.c4 { background: #f76060; }
.hp-lvl-dot.c5 { background: #8b5cf6; }
.hp-lvl-dot.c6 { background: #4f6ef7; }

/* 3D Button Effects */
.btn-3d {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  overflow: hidden;
}
.btn-3d:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(79,110,247,0.5) !important;
  filter: brightness(1.1);
}
.btn-3d:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 12px rgba(79,110,247,0.3) !important;
}
.btn-3d::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
}

.modern-level-badge {
  background: linear-gradient(135deg, var(--accent-light), #fff);
  color: var(--accent-dark);
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(79,110,247,0.15);
  border: 1px solid rgba(79,110,247,0.1);
}

/* Timeline Task Modernization */
.tl-ev {
  border: none !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08), inset 0 1px 1px rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border-radius: 16px !important;
}

[data-theme="dark"] .tl-ev {
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.1) !important;
}

.tl-ev:hover:not(.anchor-ev) {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.9) !important;
  z-index: 30 !important;
}

/* Beautiful task titles */
.tl-ev-name {
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em;
  color: var(--text) !important;
}

.tl-ev-time {
  font-size: 0.65rem !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

.tl-ev-bar {
  border-radius: 16px 0 0 16px !important;
  width: 8px !important;
}

/* Progress track design */
.hp-track-line {
  height: 8px !important;
  border-radius: 8px !important;
  background: var(--surface2) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}
.hp-track-fill {
  background: linear-gradient(90deg, var(--accent), var(--green)) !important;
  box-shadow: 0 2px 12px rgba(22, 201, 141, 0.4) !important;
  border-radius: 8px !important;
}

.tl-ev-body { justify-content: flex-start !important; padding-top: 8px !important; }
.tl-ev { min-height: 52px !important; }


.hp-prog-feel-btn.selected {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
  color: var(--accent-dark) !important;
}
.hp-del-btn:hover {
  background: rgba(255,255,255,0.4) !important;
  transform: scale(1.1);
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   OB2 ג€” Modern Step-by-Step Onboarding
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
#setup-screen { padding: 0; background: var(--bg); align-items: stretch; justify-content: flex-start; }

.ob2-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  position: relative;
}

/* Top bar */
.ob2-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0 0.5rem;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.ob2-back-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  transition: all 0.18s;
}
.ob2-back-btn:hover { background: var(--surface2); border-color: var(--accent); color: var(--accent); }
.ob2-back-btn.hidden { visibility: hidden; pointer-events: none; }
.ob2-progress-track {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.ob2-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 12.5%;
}
.ob2-counter {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  font-family: var(--mono);
  flex-shrink: 0;
  min-width: 36px;
  text-align: left;
}

/* Slides */
.ob2-slide { display: none; flex-direction: column; flex: 1; padding-top: 0.5rem; animation: ob2In 0.32s cubic-bezier(0.4,0,0.2,1); }
.ob2-slide.ob2-active { display: flex; }
@keyframes ob2In {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Illustration */
.ob2-illus {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 1.5rem;
  height: 130px;
}
.ob2-illus svg { max-height: 130px; width: auto; }
.ob2-illus.ob2-illus-sm { height: 90px; margin: 0.5rem 0 1.25rem; }
.ob2-illus.ob2-illus-sm svg { max-height: 90px; }

/* Titles */
.ob2-title {
  font-size: 1.65rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}
.ob2-sub {
  font-size: 0.93rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1.75rem;
}

/* Text fields */
.ob2-fields { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.ob2-inp {
  width: 100%;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.9rem 1.1rem;
  outline: none;
  transition: all 0.2s;
}
.ob2-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79,110,247,0.1); background: var(--surface); }
.ob2-inp-lg { font-size: 1.2rem; font-weight: 700; padding: 1rem 1.2rem; }
.ob2-inp::placeholder { color: var(--muted); font-weight: 400; }

/* Time selector row */
.ob2-time-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.ob2-time-card {
  flex: 1;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.2s;
}
.ob2-time-card:focus-within { border-color: var(--accent); }
.ob2-time-icon { display: flex; align-items: center; justify-content: center; }
.ob2-time-lbl { font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; }
.ob2-time-sel {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 800;
  padding: 0.5rem 0.6rem;
  outline: none;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: all 0.2s;
}
.ob2-time-sel:focus { border-color: var(--accent); }
.ob2-time-sep { color: var(--muted); flex-shrink: 0; display: flex; align-items: center; }

/* Choice buttons */
.ob2-choices { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.ob2-choice {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  text-align: right;
  transition: all 0.18s;
  font-family: var(--sans);
  color: var(--text);
  width: 100%;
}
.ob2-choice:hover { border-color: var(--accent); background: var(--accent-light); transform: translateX(-2px); }
.ob2-choice.ob2-sel {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(79,110,247,0.12);
}
.ob2-choice-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
  transition: all 0.18s;
}
.ob2-choice.ob2-sel .ob2-choice-icon,
.ob2-choice:hover .ob2-choice-icon { background: rgba(79,110,247,0.15); color: var(--accent); }
.ob2-choice-body { flex: 1; text-align: right; }
.ob2-choice-label { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.ob2-choice-hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
.ob2-choice.ob2-sel .ob2-choice-hint { color: var(--accent); opacity: 0.8; }
.ob2-choice-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: all 0.18s;
}
.ob2-choice.ob2-sel .ob2-choice-check {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* User type toggle */
.ob2-usertype-row { display:flex; gap:0.6rem; margin-bottom:1.2rem; }
.ob2-ut-btn { flex:1; padding:0.6rem 0.5rem; border:2px solid var(--border,#e0e0e0); border-radius:12px; background:var(--surface); color:var(--muted); font-size:0.88rem; font-weight:700; font-family:inherit; cursor:pointer; transition:border-color 0.15s,background 0.15s,color 0.15s; }
.ob2-ut-btn.ob2-ut-sel { border-color:var(--accent,#4f6ef7); background:rgba(79,110,247,0.08); color:var(--accent,#4f6ef7); }

/* Next / skip buttons */
.ob2-next-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(79,110,247,0.3);
  margin-top: auto;
}
.ob2-next-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(79,110,247,0.4); }
.ob2-next-btn:active { transform: translateY(0); }
.ob2-next-green { background: linear-gradient(135deg, var(--green), #0fa870); box-shadow: 0 4px 16px rgba(22,201,141,0.3); }
.ob2-next-green:hover { box-shadow: 0 6px 24px rgba(22,201,141,0.45); }
.ob2-skip-lnk {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.6rem;
  margin-top: 0.4rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: 100%;
  transition: color 0.2s;
}
.ob2-skip-lnk:hover { color: var(--accent); }

/* Summary chips */
.ob2-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.75rem;
}
.ob2-chip {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
.ob2-chip.accent { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.ob2-chip.green { background: var(--green-light); border-color: var(--green); color: var(--green); }

/* Mobile full-height */
@media (max-width: 520px) {
  .ob2-wrap { padding: 0 1rem 1.5rem; }
  .ob2-title { font-size: 1.4rem; }
  .ob2-illus { height: 100px; margin: 0.75rem 0 1.25rem; }
  .ob2-illus svg { max-height: 100px; }
}

/* Homework rows in first-week planner */
.pl-sh-hw-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.pl-sh-hw-row .plsh-hw-name {
  font-size: 0.88rem;
  padding: 0.55rem 0.75rem;
}
.pl-sh-hw-row .plsh-hw-course {
  font-size: 0.82rem;
  padding: 0.55rem 0.5rem;
  width: auto;
  max-width: 110px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 700;
  font-family: var(--sans);
}
.pl-sh-hw-row .plsh-hw-dur {
  font-size: 0.82rem;
  padding: 0.55rem 0.5rem;
  width: auto;
}
/* Hobby quick modal */
.hqm-card{background:var(--surface);border-radius:22px;padding:1.6rem 1.5rem 1.4rem;max-width:400px;width:calc(100% - 2rem);margin:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.18)}
.hqm-close{position:absolute;top:1rem;left:1rem;background:var(--surface2);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all 0.15s}
.hqm-close:hover{background:var(--border);color:var(--text)}
.hqm-header{display:flex;align-items:center;gap:0.85rem;margin-bottom:1.3rem}
.hqm-icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--accent-light),var(--green-light));display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.hqm-title{font-size:1.05rem;font-weight:800;color:var(--text)}
.hqm-sub{font-size:0.78rem;color:var(--muted);font-weight:500;margin-top:0.1rem}
.hqm-fields{display:flex;flex-direction:column;gap:0.75rem;margin-bottom:1.2rem}
.hqm-big-inp{font-size:1rem;font-weight:700;padding:0.65rem 0.9rem;border-radius:12px;border:2px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--sans);width:100%;box-sizing:border-box;transition:border-color 0.2s}
.hqm-big-inp:focus{border-color:var(--accent);outline:none;background:var(--surface)}
.hqm-goal-inp{font-size:0.88rem;padding:0.55rem 0.9rem;border-radius:12px;border:1.5px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--sans);width:100%;box-sizing:border-box;transition:border-color 0.2s}
.hqm-goal-inp:focus{border-color:var(--accent);outline:none}
.hqm-row-label{font-size:0.65rem;font-weight:800;color:var(--muted);letter-spacing:0.6px;text-transform:uppercase}
.hqm-pills{display:flex;gap:0.4rem;flex-wrap:wrap}
.hqm-pill{padding:0.42rem 0.85rem;border-radius:20px;border:1.5px solid var(--border);background:var(--surface2);color:var(--muted);font-size:0.84rem;font-weight:700;cursor:pointer;font-family:var(--sans);transition:all 0.15s}
.hqm-pill:hover{border-color:var(--accent);color:var(--accent)}
.hqm-pill-active{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 2px 8px rgba(79,110,247,0.3)}
.hqm-save-btn{width:100%;padding:0.8rem;border-radius:14px;background:linear-gradient(135deg,var(--accent),#6c63ff);color:white;border:none;font-size:0.98rem;font-weight:800;cursor:pointer;font-family:var(--sans);letter-spacing:0.3px;transition:opacity 0.2s;box-shadow:0 4px 14px rgba(79,110,247,0.35)}
.hqm-save-btn:hover{opacity:0.88}

/* ג”€ג”€ Mobile overrides (max 480px) ג”€ג”€ */
@media (max-width: 480px) {
  /* Homework row ג€” stack course below name */
  .pl-sh-hw-row { grid-template-columns: 1fr auto auto; flex-wrap: wrap; }
  .pl-sh-hw-row .plsh-hw-course { grid-column: 1 / -1; max-width: 100%; order: 2; }
  .pl-sh-hw-row .plsh-hw-name { order: 1; }

  /* Anchor builder ג€” tighter */
  .anchor-builder-row { border-radius: 12px; }
  .ab-times-row { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .ab-card-top { padding: 0.6rem 0.7rem 0.5rem; }
  .ab-card-body { padding: 0 0.7rem 0.7rem; }

  /* Hobby modal */
  .hqm-card { padding: 1.3rem 1.1rem 1.2rem; border-radius: 18px; }
  .hqm-pills { gap: 0.3rem; }
  .hqm-pill { padding: 0.38rem 0.65rem; font-size: 0.8rem; }

  /* Done card */
  .wr-done-card { padding: 1.8rem 1rem 1.4rem; }
  .wr-done-secondary { font-size: 0.72rem; }

  /* Progress track steps ג€” smaller labels */
  .hpt-step-lbl { font-size: 0.48rem; max-width: 36px; }
  .hpt-step-dot { width: 20px; height: 20px; font-size: 0.65rem; }
  .hpt-step.hpt-cur .hpt-step-dot { width: 26px; height: 26px; font-size: 0.8rem; }

  /* Sidebar weekly button */
  .nav-item-wr { padding: 0.5rem 0.7rem; }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   TASK EDIT MODAL (tem-*)
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.tem-card {
  background: var(--surface);
  border-radius: 24px;
  max-width: 440px;
  width: calc(100% - 2rem);
  margin: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tem-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.4rem 1rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--accent-light) 0%, transparent 80%);
}
.tem-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tem-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
  flex: 1;
}
.tem-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface2);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
  flex-shrink: 0;
}
.tem-close:hover { background: var(--border); color: var(--text); }
.tem-body {
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tem-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.tem-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tem-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.tem-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  transition: border-color 0.18s;
  box-sizing: border-box;
}
.tem-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.tem-textarea {
  width: 100%;
  min-height: 68px;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  resize: vertical;
  transition: border-color 0.18s;
  box-sizing: border-box;
}
.tem-textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.tem-footer {
  display: flex;
  gap: 0.75rem;
  padding: 0 1.4rem 1.4rem;
}
.tem-save {
  flex: 1;
  padding: 0.8rem;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: white;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.18s;
}
.tem-save:hover { background: var(--accent-dark); transform: translateY(-1px); }
.tem-save:active { transform: scale(0.97); }
.tem-cancel {
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.tem-cancel:hover { background: var(--surface2); color: var(--text); }

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   SCHEDULE PAGE REDESIGN (sch-*)
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.sch-page-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.sch-hdr-left {}
.sch-week-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.3rem 0.4rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sch-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.sch-nav-btn:hover { background: var(--accent-light); color: var(--accent); }
.sch-week-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  padding: 0 0.5rem;
  cursor: pointer;
  min-width: 90px;
  text-align: center;
  transition: color 0.15s;
}
.sch-week-label:hover { color: var(--accent); }
.sch-container {
  background: var(--surface);
  border-radius: 22px;
  padding: 0 1rem 1.2rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.sch-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--purple), var(--accent));
  border-radius: 22px 22px 0 0;
}
.sch-top-area {
  padding: 1rem 0 0.75rem;
}
.sch-action-bar {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.sch-act-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.52rem 1rem;
  border-radius: 10px;
  border: none;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex: 1;
  justify-content: center;
}
.sch-act-btn:hover { transform: translateY(-2px); filter: brightness(0.93); }
.sch-act-btn:active { transform: scale(0.95); }
.sch-act-green { background: var(--green-light); color: var(--green); }
.sch-act-green:hover { background: var(--green); color: white; }
.sch-act-purple { background: var(--purple-light); color: var(--purple); }
.sch-act-purple:hover { background: var(--purple); color: white; }
.sch-act-blue { background: var(--accent-light); color: var(--accent); }
.sch-act-blue:hover { background: var(--accent); color: white; }

/* Improved task-slot cards */
.tl-slot {
  border-radius: 14px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tl-slot:not(.anchor-slot):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.09);
}

@media (max-width: 600px) {
  .tem-card { border-radius: 22px 22px 0 0; width: 100vw; max-width: 100vw; }
  .tem-header { padding: 1rem 1.1rem 0.85rem; }
  .tem-body { padding: 1rem 1.1rem; gap: 0.85rem; }
  .tem-footer { padding: 0 1.1rem 1.1rem; }
  .tem-row2 { grid-template-columns: 1fr; gap: 0.75rem; }
  .tem-textarea { min-height: 52px; }
  .pl-sh-course-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .plsh-name-wrap { grid-column: 1; grid-row: 1; }
  .plsh-exam-wrap { grid-column: 1; grid-row: 2; }
  .plsh-remove { grid-column: 2; grid-row: 1; align-self: center; }
  .sch-page-hdr { margin-bottom: 1rem; }
  .sch-week-label { min-width: 70px; font-size: 0.76rem; }
  .sch-act-btn { font-size: 0.78rem; padding: 0.48rem 0.7rem; }
}

/* ג”€ג”€ Recalc / Collision Modal (rcm-*) ג”€ג”€ */
.rcm-card {
  background: var(--card, #fff);
  border-radius: 22px;
  width: min(420px, 94vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: temSlideUp 0.22s ease;
}
.rcm-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem 1rem;
  background: linear-gradient(135deg, #f5a623 0%, #ff7b7b 100%);
  color: #fff;
}
.rcm-icon-wrap {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.rcm-header-text { flex: 1; min-width: 0; }
.rcm-title {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcm-sub {
  font-size: 0.78rem;
  opacity: 0.88;
  margin-top: 0.1rem;
}
.rcm-close {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: #fff;
  transition: background 0.15s;
}
.rcm-close:hover { background: rgba(255,255,255,0.35); }
.rcm-body {
  padding: 1rem 1.2rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 45vh;
  overflow-y: auto;
}
.rcm-conflict-info {
  background: rgba(245,166,35,0.1);
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
}
.rcm-conflict-anchor {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text, #1a1a2e);
}
.rcm-task-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.rcm-task-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg2, #f4f6f9);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
}
.rcm-task-course { font-weight: 600; color: var(--text, #1a1a2e); }
.rcm-task-when { color: var(--muted, #888); font-size: 0.78rem; }
.rcm-question {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text, #1a1a2e);
  padding: 0.3rem 0;
}
.rcm-actions {
  padding: 0.5rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.rcm-choice-btn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  background: var(--bg2, #f4f6f9);
  text-align: right;
  width: 100%;
  transition: all 0.15s;
}
.rcm-choice-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.rcm-choice-blue  { border-color: #3b82f6; background: rgba(59,130,246,0.07); }
.rcm-choice-blue:hover { background: rgba(59,130,246,0.14); }
.rcm-choice-green { border-color: #10b981; background: rgba(16,185,129,0.07); }
.rcm-choice-green:hover { background: rgba(16,185,129,0.14); }
.rcm-choice-red   { border-color: #ef4444; background: rgba(239,68,68,0.07); }
.rcm-choice-red:hover { background: rgba(239,68,68,0.14); }
.rcm-choice-muted { border-color: #d1d5db; background: var(--bg2, #f4f6f9); }
.rcm-choice-muted:hover { background: rgba(0,0,0,0.06); }
.rcm-choice-icon { font-size: 1.4rem; flex-shrink: 0; }
.rcm-choice-text { flex: 1; min-width: 0; }
.rcm-choice-title { font-size: 0.92rem; font-weight: 700; color: var(--text, #1a1a2e); }
.rcm-choice-sub   { font-size: 0.78rem; color: var(--muted, #888); margin-top: 0.1rem; }
.rcm-result {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  font-size: 0.9rem;
  color: var(--text, #1a1a2e);
}
.rcm-result.deleted {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.25);
}
.rcm-result-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.05rem; }
.rcm-close-action {
  width: 100%;
  padding: 0.65rem;
  border: none;
  border-radius: 10px;
  background: var(--bg2, #f4f6f9);
  color: var(--text, #1a1a2e);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 0.3rem;
}
.rcm-close-action:hover { background: rgba(0,0,0,0.08); }

@media (max-width: 480px) {
  .rcm-card { border-radius: 18px; width: 98vw; }
  .rcm-header { padding: 0.9rem 1rem 0.8rem; }
  .rcm-body { padding: 0.8rem 1rem 0.4rem; }
  .rcm-actions { padding: 0.4rem 1rem 1rem; }
  .rcm-choice-btn { padding: 0.65rem 0.85rem; }
}

/* ── Recalc V2 — proposal checkbox rows ── */
.rcm-proposals {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 42vh;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}
.rcm-proposal-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: var(--bg2, #f4f6f9);
  border: 1.5px solid transparent;
  direction: rtl;
  transition: border-color 0.15s;
}
.rcm-proposal-row:has(.rcm-pcb:checked) { border-color: #3b82f6; background: rgba(59,130,246,0.07); }
.rcm-proposal-row.rcm-no-slot { opacity: 0.55; }
.rcm-pcb-wrap { flex-shrink: 0; cursor: pointer; }
.rcm-pcb { width: 18px; height: 18px; cursor: pointer; accent-color: #3b82f6; }
.rcm-proposal-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
  text-align: right;
}
.rcm-proposal-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text, #1a1a2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcm-slot-time { font-size: 0.78rem; color: #3b82f6; font-weight: 600; }
.rcm-slot-no   { font-size: 0.78rem; color: #ef4444; }
.rcm-no-slots-msg {
  text-align: center;
  color: #b45309;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  background: rgba(245,166,35,0.1);
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 8px;
  margin-bottom: 0.4rem;
}
.rcm-approve-btn {
  width: 100%;
  padding: 0.75rem;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}
.rcm-approve-btn:hover { background: #2563eb; transform: translateY(-1px); }
.rcm-other-btn {
  width: 100%;
  padding: 0.6rem;
  background: transparent;
  color: var(--muted, #888);
  border: 1.5px solid var(--border, #e0e0e0);
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.rcm-other-btn:hover { background: var(--bg2, #f4f6f9); }
.rcm-cancel-btn {
  width: 100%;
  padding: 0.45rem;
  background: transparent;
  color: var(--muted, #aaa);
  border: none;
  font-size: 0.84rem;
  cursor: pointer;
  font-family: inherit;
}

/* ג”€ג”€ Anchor Page (anc-page-*) ג”€ג”€ */
.anc-page-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.anc-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
}
.anc-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.anc-action-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.anc-action-primary:hover { background: var(--accent-dark, #3a5ce0); border-color: var(--accent-dark, #3a5ce0); color: #fff; }
.anc-ics-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}
/* Anchor cards ג€” improved */
.anchor-card {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 0.65rem;
  transition: all 0.18s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.anchor-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(0,0,0,0.09);
  transform: translateY(-1px);
}
.anchor-card-strip { width: 6px; flex-shrink: 0; }
.anchor-card-body { flex: 1; padding: 0.85rem 1rem 0.8rem; min-width: 0; }
.anchor-name-d { font-size: 0.92rem; font-weight: 800; color: var(--text); line-height: 1.3; }
.anchor-time-d { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.4; }
.anchor-notes-d { font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; opacity: 0.75; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anchor-card-actions { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.65rem 0.65rem; align-items: center; justify-content: center; flex-shrink: 0; }
.anchor-badge { font-size: 0.58rem; font-weight: 800; padding: 0.12rem 0.45rem; border-radius: 99px; margin-bottom: 0.3rem; }
.anchor-badge-onetime { background: #fef3c7; color: #b45309; }
.anchor-badge-weekly { background: var(--accent-light, rgba(79,110,247,0.1)); color: var(--accent); }
/* Anchor type toggle in modal */
.anc-type-btn {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
}
.anc-type-btn.active {
  border-color: var(--accent);
  background: var(--accent-light, rgba(79,110,247,0.1));
  color: var(--accent);
}
/* Settings header avatar */
.settings-user-hero {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
  color: #fff;
  margin-bottom: 0.5rem;
}
.settings-user-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  font-weight: 900;
  flex-shrink: 0;
}
.settings-user-name { font-size: 0.95rem; font-weight: 800; }
.settings-user-sub { font-size: 0.72rem; opacity: 0.8; margin-top: 0.1rem; }

/* ג”€ג”€ Hobby setup form ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.hp-setup-card {
  background: var(--surface);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 560px;
  margin: 0 auto;
}
.hp-setup-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.2rem 1.4rem 1rem;
  background: linear-gradient(135deg, var(--green) 0%, #06b6d4 100%);
  color: #fff;
}
.hp-setup-hdr-title { font-size: 1.05rem; font-weight: 900; }
.hp-setup-hdr-sub { font-size: 0.73rem; opacity: 0.85; margin-top: 0.1rem; }
.hp-setup-hdr .anc-cancel-btn { background: rgba(255,255,255,0.2); color: #fff; border-radius: 10px; }
.hp-setup-hdr .anc-cancel-btn:hover { background: rgba(255,255,255,0.35); }
.hp-setup-body {
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.hp-setup-footer {
  padding: 0.75rem 1.4rem 1.1rem;
  border-top: 1px solid var(--border);
}

/* ג”€ג”€ Course add modal (cam-card) ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.cam-card {
  background: var(--surface);
  border-radius: 22px;
  width: min(94vw, 400px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cam-hdr {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.2rem 1.25rem 1rem;
  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
  color: #fff;
}
.cam-hdr-icon { font-size: 1.6rem; flex-shrink: 0; }
.cam-hdr-title { font-size: 1rem; font-weight: 800; }
.cam-hdr-sub { font-size: 0.72rem; opacity: 0.82; margin-top: 0.1rem; }
.cam-hdr .anc-card-close {
  margin-right: auto;
  background: rgba(255,255,255,0.2);
  color: #fff;
  flex-shrink: 0;
}
.cam-hdr .anc-card-close:hover { background: rgba(255,255,255,0.35); }
.cam-body {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cam-footer {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border);
}

/* ג”€ג”€ Anchor modal (anc-card) ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.anc-card {
  background: var(--surface);
  border-radius: 22px;
  width: min(94vw, 420px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.anc-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.anc-card-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.anc-card-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--surface2);
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.anc-card-close:hover { background: var(--border); }
.anc-card-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }
.anc-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-bottom: 0.3rem; display: block; letter-spacing: 0.3px; }
.anc-input {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.anc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,110,247,0.08); }
.anc-type-toggle { display: flex; gap: 0.5rem; }
.anc-times-row { display: flex; gap: 0.75rem; align-items: flex-end; }
.anc-times-row > div { flex: 1; }
.anc-multiday-toggle {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.82rem; color: var(--muted); cursor: pointer;
}
.anc-advanced-btn {
  background: var(--surface2);
  border: 1.5px dashed var(--border2);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  width: 100%;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: background 0.15s, border-color 0.15s;
}
.anc-advanced-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.anc-adv-arrow { font-size: 0.75rem; transition: transform 0.2s; }
#anc-advanced-section { display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px dashed var(--border); padding-top: 0.75rem; }
.anc-card-footer {
  display: flex;
  gap: 0.65rem;
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.anc-save-btn {
  flex: 1;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 800;
  padding: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.anc-save-btn:hover { background: var(--accent-dark); }
.anc-save-btn:active { transform: scale(0.97); }
.anc-cancel-btn {
  background: var(--surface2);
  color: var(--muted);
  border: none;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.anc-cancel-btn:hover { background: var(--border); }
/* Reminders button on anchors page */
.anc-action-reminders {
  background: var(--yellow-light);
  color: #92400e;
  border-color: #fde68a;
  font-weight: 700;
}
.anc-action-reminders:hover { background: #fef3c7; }

/* ג”€ג”€ Reminders modal (rem-*) ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.rem-card {
  background: var(--surface);
  border-radius: 22px;
  width: min(94vw, 400px);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.rem-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rem-hdr-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.rem-hdr-close {
  width: 30px; height: 30px;
  border-radius: 50%; border: none;
  background: var(--surface2); color: var(--muted);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.rem-hdr-close:hover { background: var(--border); }
.rem-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.rem-add-form {
  background: var(--surface2);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.rem-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.65rem 0.85rem;
  outline: none;
  transition: border-color 0.18s;
}
.rem-input:focus { border-color: #f5a623; box-shadow: 0 0 0 3px rgba(245,166,35,0.1); }
.rem-form-row { display: flex; gap: 0.65rem; }
.rem-form-row > div { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.rem-form-row label { font-size: 0.7rem; font-weight: 700; color: var(--muted); }
.rem-add-btn {
  background: #f5a623;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 0.65rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.rem-add-btn:hover { background: #e09415; }
.rem-add-btn:active { transform: scale(0.97); }
.rem-list { display: flex; flex-direction: column; gap: 0.55rem; }
.rem-empty { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 1.5rem 0; }
.rem-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface2);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
}
.rem-item-icon { font-size: 1.1rem; flex-shrink: 0; }
.rem-item-body { flex: 1; min-width: 0; }
.rem-item-text { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.rem-item-meta { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.rem-item-del {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--red-light);
  color: var(--red);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.rem-item-del:hover { background: var(--red); color: #fff; }

/* ג”€ג”€ Reminder chips in timeline (overlay, don't occupy column space) ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.tl-reminder-chip {
  position: absolute;
  left: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(245,166,35,0.92);
  border-radius: 99px;
  padding: 3px 8px 3px 6px;
  pointer-events: none;
  max-width: 160px;
  animation: tl-ev-in 0.25s ease both;
}
.tl-reminder-bell { font-size: 0.7rem; flex-shrink: 0; }
.tl-reminder-text {
  font-size: 0.65rem;
  font-weight: 700;
  color: #78350f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ג”€ג”€ Page overflow guard ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.page { overflow-x: hidden; max-width: 100%; }
.main-content { overflow-x: hidden; }
input, textarea, select { max-width: 100%; box-sizing: border-box; }
.section-box input, .section-box textarea, .section-box select,
.pl-sh-card input, .pl-sh-card textarea, .pl-sh-card select,
.aad-form-box input, .aad-form-box textarea, .aad-form-box select,
.anc-card-body input, .anc-card-body textarea, .anc-card-body select,
.ab-card-body input, .ab-card-body textarea, .ab-card-body select { width: 100%; box-sizing: border-box; }
.plsh-name-wrap, .plsh-exam-wrap { min-width: 0; overflow: hidden; }
.aad-form-box, .ab-card { width: 100%; max-width: 100%; overflow: hidden; }
.anc-card { width: 100%; max-width: 100%; }
.ab-times-row { width: 100%; }
.ab-card-body { overflow: hidden; }

/* ג”€ג”€ Add form boxes (homework + exams) ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.aad-form-box {
  padding: 1.1rem !important;
  border-radius: 18px !important;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  background: var(--surface) !important;
}
.aad-form-box-purple { border-color: rgba(168,85,247,0.2) !important; }
.aad-form-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 1rem;
}
.aad-form-title-purple { color: var(--purple); }
.aad-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff;
  border: none;
  border-radius: 13px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 900;
  padding: 0.85rem;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  margin-top: 0.25rem;
}
.aad-submit-btn:active { transform: scale(0.98); opacity: 0.9; }
.aad-submit-purple { background: linear-gradient(135deg, var(--purple), var(--accent)); }


/* ג”€ג”€ Inline form grids (exams, homework) ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.inline-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.inline-form-grid-2 { grid-template-columns: 1fr 1fr; }
.inline-form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.inline-form-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s;
}
.inline-form-input:focus { border-color: var(--accent); }

/* ג”€ג”€ Mobile: comprehensive fixes ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
@media (max-width: 700px) {
  /* Inline form grids ג†’ single column */
  .inline-form-grid,
  .inline-form-grid-2 { grid-template-columns: 1fr; gap: 0.75rem; }

  /* pl-sh-card tighter on mobile */
  .pl-sh-card { padding: 1rem; border-radius: 16px; }
  .pl-sh-section { padding-top: 0.85rem; margin-top: 0.85rem; }
  .pl-sh-course-row { padding: 0.6rem; gap: 0.4rem; }
  .pl-sh-course-row input { font-size: 0.85rem; padding: 0.55rem 0.65rem; }
  .pl-sh-goal-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .pl-sh-goal-opt { padding: 0.65rem 0.5rem; }
  .pl-sh-goal-desc { display: none; }

  /* Section boxes: reduce padding so content doesn't overflow */
  .section-box { padding: 1rem !important; border-radius: 16px !important; }

  /* Bottom nav safe area ג€” push content up enough */
  .main-content { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  /* anc-card and rem-card: full-screen sheet on mobile */
  .anc-card, .rem-card, .cam-card, .hp-setup-card {
    width: 100vw;
    max-width: 100vw;
    border-radius: 22px 22px 0 0;
    max-height: 92vh;
  }

  /* Modal overlay: slide up from bottom on mobile */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  /* Modal-box: full width, round top corners only */
  .modal-box {
    width: 100vw;
    max-width: 100vw;
    border-radius: 22px 22px 0 0 !important;
    margin: 0 !important;
    padding: 1.25rem 1rem 1.5rem !important;
  }

  /* Prevent background scroll when modal open */
  .modal-overlay { overscroll-behavior: contain; }
  .anc-card, .rem-card, .modal-box, .cam-card {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Anchor card body: more breathing room */
  .anc-card-body, .cam-body, .rem-body { padding: 0.85rem 1rem; gap: 0.75rem; }
  .anc-card-footer, .cam-footer { padding: 0.75rem 1rem 1rem; }

  /* anc-times-row: wrap on very small screens */
  .anc-times-row { flex-wrap: wrap; }
  .anc-times-row > div { flex: 1 1 80px; }

  /* Input sizing: larger tap targets */
  .anc-input, .inline-form-input, .rem-input {
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
  }

  /* Setup onboarding pl-sh-course-row headers: hide on mobile */
  .pl-sh-courses-header { display: none; }
  .pl-sh-course-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    background: var(--surface2);
    border-radius: 10px;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    gap: 0.35rem;
  }
  .pl-sh-course-row .plsh-name { grid-column: 1 / -1; }

  /* Goal options: 2 columns instead of 3 */
  .pl-sh-goal-row { grid-template-columns: 1fr 1fr; }
}

/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   PREMIUM DARK GLASS SYSTEM ג€” Frosted Glass + Neon Glow
   Applied on dark theme (default). Five design principles:
   1. Frosted Glass   2. Inner Highlight   3. Neon Glow
   4. Dark Canvas     5. Rounded Corners
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */

/* 4. DARK CANVAS ג€” deep navy with ambient color leaks */
[data-theme="dark"] body {
  background: #070c1a !important;
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 15%, rgba(107,143,255,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 80%, rgba(139,92,246,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 55% 55%, rgba(16,217,141,0.06) 0%, transparent 50%) !important;
}

/* Update dark theme surface variables to true dark glass */
[data-theme="dark"] {
  --bg: #070c1a;
  --surface: rgba(255,255,255,0.055);
  --surface2: rgba(255,255,255,0.03);
  --surface3: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.16);
  --text: #eef2ff;
  --muted: #7a8fb5;
  --accent: #6b8fff;
  --accent-light: rgba(107,143,255,0.15);
  --accent-dark: #4f6ef7;
  --green: #10d98d;
  --green-light: rgba(16,217,141,0.15);
  --yellow: #fbbf24;
  --yellow-light: rgba(251,191,36,0.15);
  --red: #f87171;
  --red-light: rgba(248,113,113,0.15);
  --purple: #a78bfa;
  --purple-light: rgba(167,139,250,0.15);
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.7);
}

/* 1 + 2 + 5. FROSTED GLASS + INNER HIGHLIGHT + ROUNDED CORNERS on cards */
[data-theme="dark"] .section-box {
  background: rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 8px 32px rgba(0,0,0,0.45) !important;
}

/* 1. Stat cards ג€” glass with colored accent */
[data-theme="dark"] .stat-card {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 2px solid rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .stat-card.blue { background: rgba(59,130,246,0.08) !important; border-top-color: rgba(59,130,246,0.45) !important; }
[data-theme="dark"] .stat-card.green { background: rgba(16,185,129,0.08) !important; border-top-color: rgba(16,185,129,0.45) !important; }
[data-theme="dark"] .stat-card.yellow { background: rgba(245,158,11,0.08) !important; border-top-color: rgba(245,158,11,0.45) !important; }
[data-theme="dark"] .stat-card.red { background: rgba(244,63,94,0.08) !important; border-top-color: rgba(244,63,94,0.45) !important; }
[data-theme="dark"] .stat-card.purple { background: rgba(139,92,246,0.08) !important; border-top-color: rgba(139,92,246,0.45) !important; }

/* 3. Subtle shadow on primary buttons (not neon) */
[data-theme="dark"] .btn-primary {
  box-shadow: 0 4px 16px rgba(99,102,241,0.25), 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(99,102,241,0.35), 0 4px 12px rgba(0,0,0,0.4) !important;
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-confirm {
  box-shadow: 0 4px 14px rgba(99,102,241,0.2), 0 2px 8px rgba(0,0,0,0.3);
}

/* Action buttons ג€” subtle glow */
[data-theme="dark"] .sch-act-btn.sch-act-green {
  box-shadow: 0 2px 10px rgba(16,185,129,0.2), 0 2px 6px rgba(0,0,0,0.25);
}
[data-theme="dark"] .sch-act-btn.sch-act-purple {
  box-shadow: 0 2px 10px rgba(139,92,246,0.2), 0 2px 6px rgba(0,0,0,0.25);
}
[data-theme="dark"] .sch-act-btn.sch-act-blue {
  box-shadow: 0 0 14px rgba(107,143,255,0.35), 0 2px 8px rgba(0,0,0,0.3);
}

/* 3. Neon on FAB */
[data-theme="dark"] .nav-fab {
  box-shadow: 0 0 28px rgba(6,214,160,0.55), 0 0 56px rgba(6,214,160,0.2), 0 6px 20px rgba(0,0,0,0.5) !important;
}

/* 1 + 2. Modal glass */
[data-theme="dark"] .modal-box {
  background: rgba(8,13,30,0.82) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 24px 64px rgba(0,0,0,0.75),
    0 0 0 1px rgba(107,143,255,0.06) !important;
}

/* 1. Modal overlay ג€” subtle background blur */
[data-theme="dark"] .modal-overlay {
  background: rgba(2,5,20,0.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 1 + 2. anc-card, cam-card, rem-card ג€” glass sheets */
[data-theme="dark"] .anc-card,
[data-theme="dark"] .cam-card,
[data-theme="dark"] .rem-card,
[data-theme="dark"] .hp-setup-card {
  background: rgba(8,13,30,0.88) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 60px rgba(0,0,0,0.7) !important;
}

/* 1. Timeline events ג€” glass with inner highlight */
[data-theme="dark"] .tl-slot {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .tl-slot:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* 1. pl-sh-card ג€” glass card */
[data-theme="dark"] .pl-sh-card {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* 1. Sidebar glass */
[data-theme="dark"] .sidebar {
  background: rgba(7,10,22,0.9) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.05), -8px 0 48px rgba(0,0,0,0.6) !important;
}

/* 2. Inner highlight on XP hero card */
[data-theme="dark"] .sq-hero-card {
  background: linear-gradient(135deg, rgba(30,27,75,0.9) 0%, rgba(49,46,129,0.85) 45%, rgba(15,118,110,0.85) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 40px rgba(99,102,241,0.25),
    0 16px 40px rgba(0,0,0,0.5) !important;
}

/* 3. XP bar neon glow */
[data-theme="dark"] .sq-xp-bar {
  box-shadow: 0 0 12px rgba(167,139,250,0.6), 0 0 24px rgba(167,139,250,0.3) !important;
}

/* 1. Onboarding ob2-card glass */
[data-theme="dark"] .ob2-wrap,
[data-theme="dark"] .ob2-slide {
  background: transparent;
}
[data-theme="dark"] .ob2-choice {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255,255,255,0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .ob2-choice.selected {
  border-color: rgba(107,143,255,0.5) !important;
  box-shadow: 0 0 16px rgba(107,143,255,0.3), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* 3. Neon on streak chip & stat pills */
[data-theme="dark"] .sq-streak-chip {
  box-shadow: 0 0 14px rgba(251,191,36,0.3);
}
[data-theme="dark"] .sq-stat-gold {
  box-shadow: 0 0 14px rgba(251,191,36,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* 1. Input fields ג€” subtle glass in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: var(--text) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: rgba(107,143,255,0.5) !important;
  background: rgba(255,255,255,0.09) !important;
  box-shadow: 0 0 0 3px rgba(107,143,255,0.2), 0 0 14px rgba(107,143,255,0.15) !important;
}

/* 1. Horizontal date slider ג€” glass strip */
[data-theme="dark"] .horizontal-date-slider {
  background: rgba(255,255,255,0.04) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* 3. Today's date highlight ג€” neon accent dot */
[data-theme="dark"] .date-slide-item.is-today:not(.active) .date-slide-date {
  color: var(--accent) !important;
  text-shadow: 0 0 10px rgba(107,143,255,0.6) !important;
}
[data-theme="dark"] .date-slide-item.active .date-slide-date {
  background: var(--accent) !important;
  box-shadow: 0 0 14px rgba(107,143,255,0.7), 0 0 28px rgba(107,143,255,0.3) !important;
}

/* 5. Consistent border-radius across sections */
[data-theme="dark"] .cards-grid .stat-card { border-radius: 22px !important; }
[data-theme="dark"] .timeline-outer { border-radius: 20px !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .timeline-events-area { background: transparent !important; }
[data-theme="dark"] .timeline-labels { background: rgba(255,255,255,0.03) !important; border-left-color: rgba(255,255,255,0.07) !important; }

/* 2. Neon line at the top of bottom-nav bar */
[data-theme="dark"] .bottom-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,143,255,0.5), rgba(167,139,250,0.5), transparent);
  border-radius: 1px;
}

/* 1. Task edit sheet glass */
[data-theme="dark"] .tem-card {
  background: rgba(8,13,30,0.9) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 -16px 48px rgba(0,0,0,0.6) !important;
}

/* 1. Section-box inside dark modals */
[data-theme="dark"] .modal-box .section-box,
[data-theme="dark"] .tem-card .section-box {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.07) !important;
}

/* 3. Neon on btn-add-anchor (dashed outline button) */
[data-theme="dark"] .btn-add-anchor {
  border-color: rgba(107,143,255,0.4) !important;
  color: var(--accent) !important;
}
[data-theme="dark"] .btn-add-anchor:hover {
  background: rgba(107,143,255,0.1) !important;
  box-shadow: 0 0 14px rgba(107,143,255,0.2) !important;
  border-style: solid !important;
}

/* 2. Inner highlight on auth card */
[data-theme="dark"] .auth-card {
  background: rgba(10,14,28,0.88) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 24px 64px rgba(0,0,0,0.75) !important;
}

/* Smooth glow animation on neon elements */
@keyframes neonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
[data-theme="dark"] .nav-fab {
  animation: neonPulse 3s ease-in-out infinite;
}
[data-theme="dark"] .nav-fab:active { animation: none; }

/* ג”€ג”€ Time column in task cards ג€” dark mode ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
[data-theme="dark"] .tl-time-h {
  color: #7c9fff !important;
  text-shadow: 0 0 16px rgba(107,143,255,0.55) !important;
}
[data-theme="dark"] .tl-time-m {
  color: rgba(124,159,255,0.75) !important;
}
[data-theme="dark"] .tl-time {
  background: rgba(107,143,255,0.07) !important;
  border-left-color: rgba(107,143,255,0.2) !important;
}
[data-theme="dark"] .tl-dur {
  color: rgba(255,255,255,0.75) !important;
}
[data-theme="dark"] .tl-ev-sub {
  color: rgba(124,159,255,0.85) !important;
}

/* ג”€ג”€ Focus-lock overlay ג€” pure dark, no white ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.focus-lock-overlay { background: #060818 !important; }
[data-theme="dark"] .fl-digits {
  color: #a5b4fc !important;
  text-shadow: 0 0 40px rgba(107,143,255,0.7), 0 0 80px rgba(107,143,255,0.35) !important;
}
[data-theme="dark"] .pomo-select-task {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(139,92,246,0.4) !important;
  color: rgba(255,255,255,0.88) !important;
}

/* ג”€ג”€ Focus entry card ג€” dark mode ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
[data-theme="dark"] .focus-entry-card {
  background: rgba(79,110,247,0.08) !important;
  border-color: rgba(79,110,247,0.25) !important;
}
[data-theme="dark"] .pomo-dur-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}
[data-theme="dark"] .pomo-dur-btn.active {
  background: rgba(79,110,247,0.2);
  border-color: rgba(107,143,255,0.5);
  color: #7c9fff;
}
[data-theme="dark"] .pomo-select-task {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ג”€ג”€ Focus-lock overlay timer ג€” neon glow in dark mode ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
[data-theme="dark"] .fl-digits {
  color: #a5b4fc;
  text-shadow: 0 0 30px rgba(107,143,255,0.6), 0 0 60px rgba(107,143,255,0.3);
}
[data-theme="dark"] .fl-ring-fill { stroke: #6366f1; }

/* ג”€ג”€ Weekly schedule ג€” cleaner event cards ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
[data-theme="dark"] .tl-ev-name { color: rgba(255,255,255,0.95) !important; }
[data-theme="dark"] .tl-ev-sub { color: rgba(255,255,255,0.55) !important; }
[data-theme="dark"] .tl-ev-time { color: rgba(255,255,255,0.55) !important; }
[data-theme="dark"] .tl-hour-label { color: rgba(255,255,255,0.35) !important; }

/* ג”€ג”€ Settings panel / modal inner scroll ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.settings-panel { touch-action: pan-y; overscroll-behavior: contain; }
.tem-card { touch-action: pan-y; overscroll-behavior: contain; }
.anc-card, .rem-card, .cam-card, .hp-setup-card { touch-action: pan-y; overscroll-behavior: contain; }

/* ג”€ג”€ Timeline zoom controls ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.tl-zoom-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.tl-zoom-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-weight: 900;
  color: var(--text);
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.tl-zoom-btn:active { transform: scale(0.88); background: var(--border); }
.tl-zoom-label { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
[data-theme="dark"] .tl-zoom-btn { background: rgba(255,255,255,0.07); }

/* ג”€ג”€ Weekly schedule: remove dotted grid lines ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.tl-grid-line, .tl-grid-half { display: none; }

/* ג”€ג”€ FIX 3: Mobile form inputs never overflow ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
input, select, textarea { max-width: 100%; box-sizing: border-box; }
.modal-box, .sheet-inner, .glass-box { overflow-x: hidden; }
.inline-form-grid { min-width: 0; }
.inline-form-input { min-width: 0; width: 100%; }

/* ג”€ג”€ FIX 4: Timeline time visibility ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
@media (max-width: 768px) {
  .tl-time-h { font-size: 1.55rem !important; }
  .tl-time-m { font-size: 0.97rem !important; opacity: 0.9 !important; }
  .tl-dur { font-size: 0.9rem !important; opacity: 1 !important; }
}

/* ג”€ג”€ FIX 6: No dashed borders on timeline slots ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.tl-slot { border-style: solid !important; }

/* ג”€ג”€ FIX 8: Dark mode for onboarding/setup screen ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
[data-theme="dark"] #setup-screen { background: var(--bg) !important; color: var(--text) !important; }
[data-theme="dark"] .ob2-topbar { background: var(--bg) !important; }

/* ג”€ג”€ FIX 9: Focus timer mobile layout ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
@media (max-width: 768px) {
  .pomo-dur-btn { padding: 0.7rem 1.2rem; font-size: 1rem; min-width: 56px; }
  .pomo-duration-row { gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
  .focus-entry-card { padding: 1.5rem 1rem; }
}

/* ג”€ג”€ NATIVE APP FEEL ג€” Page transitions ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.page { transition: none; }
.page-fade { animation: pageFade 0.18s ease forwards; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

/* ג”€ג”€ NATIVE APP FEEL ג€” Bottom nav enhancements ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.bn-icon { position: relative; }
.bn-item.active .bn-icon::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a5b4fc;
}

/* ג”€ג”€ NATIVE APP FEEL ג€” Touch feedback ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
button, .nav-item, .tl-ev, .glass-box, .card {
  -webkit-tap-highlight-color: transparent;
}
.bn-item:active { transform: scale(0.88); background: rgba(255,255,255,0.06); border-radius: 14px; }
.glass-box:active, .tl-ev:active { opacity: 0.85; transition: opacity 0.1s; }

/* ג”€ג”€ NATIVE APP FEEL ג€” Scroll feel ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.modal-box, .sheet-inner {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ג”€ג”€ NATIVE APP FEEL ג€” Mobile typography & inputs ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
  body { font-size: 15px; }
  .page-title, h1, .section-title { font-size: 1.6rem; }
  .glass-box { padding: 1.1rem; }
}

/* ג”€ג”€ HOMEWORK EMPTY STATE ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.hw-empty { text-align: center; padding: 2.5rem 1rem; }
.hw-empty-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.hw-empty-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: 0.4rem; }
.hw-empty-sub { font-size: 0.85rem; color: var(--muted); }

/* ג”€ג”€ CARD ENTRANCE ANIMATION ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cards-grid .stat-card {
  animation: cardSlideUp 0.35s ease forwards;
  opacity: 0;
}
.cards-grid .stat-card:nth-child(1) { animation-delay: 0.05s; }
.cards-grid .stat-card:nth-child(2) { animation-delay: 0.1s; }
.cards-grid .stat-card:nth-child(3) { animation-delay: 0.15s; }
.cards-grid .stat-card:nth-child(4) { animation-delay: 0.2s; }
.glass-box {
  animation: cardSlideUp 0.4s ease forwards;
  opacity: 0;
  animation-delay: 0.1s;
}


/* ═══════════════════════════════════════════════════════════
   STUDYFLOW REDESIGN v2
   Linear × Things 3 × Duolingo × Cron × Notion
   Brand: Indigo #5E6AD2 | Light Mode Primary
   ═══════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ── */
:root {
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;--r-full:999px;
  --t-fast:0.12s cubic-bezier(0.16,1,0.3,1);
  --t-base:0.2s cubic-bezier(0.16,1,0.3,1);
  --t-slow:0.35s cubic-bezier(0.16,1,0.3,1);
  --c-brand:#5E6AD2;--c-brand-dk:#4852B4;--c-brand-soft:rgba(94,106,210,0.09);--c-brand-light:#EEF2FF;
  --c-bg:#F5F6FA;--c-surface:#FFFFFF;--c-surface-2:#F0F1F5;
  --c-border:#E4E6EC;--c-border-strong:#CDD0DA;
  --c-text:#111827;--c-text-2:#6B7280;--c-text-3:#9CA3AF;
  --c-green:#10B981;--c-red:#EF4444;--c-yellow:#F59E0B;--c-blue:#3B82F6;--c-orange:#F97316;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 14px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:0 10px 32px rgba(0,0,0,0.1),0 4px 10px rgba(0,0,0,0.05);
  --font:Inter,Heebo,-apple-system,system-ui,sans-serif;
  --mono:'Space Mono',Menlo,monospace;
}
[data-theme="dark"] {
  --c-bg:#0C0C0F;--c-surface:#17171B;--c-surface-2:#1F1F25;
  --c-border:#28282F;--c-border-strong:#38383F;
  --c-text:#F2F2F6;--c-text-2:#8E8E9E;--c-text-3:#5A5A6A;
  --c-brand:#818CF8;--c-brand-dk:#5E6AD2;--c-brand-soft:rgba(129,140,248,0.1);--c-brand-light:#1E1B4B;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:0 2px 6px rgba(0,0,0,0.45);
  --shadow-md:0 6px 20px rgba(0,0,0,0.55);
  --shadow-lg:0 14px 42px rgba(0,0,0,0.65);
}

/* ── 2. FOUNDATION ── */
html,body{background:var(--c-bg)!important;font-family:var(--font)!important;color:var(--c-text)!important;-webkit-font-smoothing:antialiased!important;background-image:none!important;}
[data-theme="dark"] body{background:var(--c-bg)!important;background-image:none!important;}
.material-symbols-rounded{font-family:'Material Symbols Rounded'!important;font-weight:400!important;font-style:normal!important;line-height:1!important;direction:ltr!important;display:inline-block!important;-webkit-font-smoothing:antialiased!important;}

/* ── 3. TYPOGRAPHY ── */
.page-title{font-family:var(--font)!important;font-size:1.75rem!important;font-weight:800!important;letter-spacing:-0.025em!important;line-height:1.15!important;color:var(--c-text)!important;margin-bottom:4px!important;}
.page-sub{font-size:0.875rem!important;color:var(--c-text-2)!important;font-weight:500!important;letter-spacing:-0.005em!important;}
.page-header{padding:var(--s-5) 0 var(--s-4)!important;}
.section-title-sm{font-size:0.8125rem!important;font-weight:700!important;color:var(--c-text)!important;letter-spacing:-0.01em!important;}
.section-title{font-size:0.7rem!important;font-weight:700!important;letter-spacing:0.07em!important;text-transform:uppercase!important;color:var(--c-text-3)!important;}
.section-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:var(--s-4)!important;}

/* ── 4. MOBILE HEADER ── */
.mobile-header{background:rgba(245,246,250,0.92)!important;backdrop-filter:saturate(180%) blur(20px)!important;-webkit-backdrop-filter:saturate(180%) blur(20px)!important;border-bottom:1px solid var(--c-border)!important;padding:max(env(safe-area-inset-top,0px),10px) var(--s-4) var(--s-3)!important;}
[data-theme="dark"] .mobile-header{background:rgba(12,12,15,0.92)!important;border-bottom-color:var(--c-border)!important;box-shadow:none!important;}
.mobile-logo{font-family:var(--font)!important;font-size:1.125rem!important;font-weight:800!important;letter-spacing:-0.025em!important;background:linear-gradient(135deg,var(--c-brand),var(--c-brand-dk))!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;}
.hamburger-btn span{background:var(--c-text)!important;height:1.5px!important;border-radius:2px!important;}
.mobile-settings-btn{color:var(--c-text-2)!important;}

/* ── 5. BOTTOM NAV (Things 3) ── */
.bottom-nav{background:rgba(255,255,255,0.94)!important;backdrop-filter:saturate(200%) blur(28px)!important;-webkit-backdrop-filter:saturate(200%) blur(28px)!important;border-top:1px solid var(--c-border)!important;padding:8px var(--s-2) calc(env(safe-area-inset-bottom,0px) + 8px)!important;box-shadow:none!important;border-radius:0!important;}
[data-theme="dark"] .bottom-nav{background:rgba(12,12,15,0.94)!important;border-top-color:var(--c-border)!important;box-shadow:none!important;}
.bottom-nav-item{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;padding:8px 4px!important;border-radius:12px!important;min-height:52px!important;min-width:44px!important;color:var(--c-text-3)!important;font-weight:600!important;font-size:0.62rem!important;letter-spacing:0.02em!important;transition:all var(--t-fast)!important;background:transparent!important;border:none!important;cursor:pointer!important;flex:1!important;}
.bottom-nav-item svg,.bottom-nav-item .material-symbols-rounded{width:22px!important;height:22px!important;font-size:22px!important;transition:transform var(--t-fast)!important;}
.bottom-nav-item.active{color:var(--c-brand)!important;}
.bottom-nav-item.active svg,.bottom-nav-item.active .material-symbols-rounded{transform:scale(1.12)!important;}
.bottom-nav-item:active{transform:scale(0.9)!important;}

/* ── 6. GREETING ── */
#today-greeting{font-size:2rem!important;font-weight:800!important;letter-spacing:-0.03em!important;line-height:1.1!important;color:var(--c-text)!important;}
#today-sub{font-size:0.875rem!important;color:var(--c-text-2)!important;font-weight:500!important;margin-top:3px!important;}

/* ── 7. STREAK BADGE (Duolingo 3D) ── */
.streak-badge-top{background:linear-gradient(135deg,#FFF7ED,#FFEDD5)!important;border:1.5px solid #FED7AA!important;border-radius:16px!important;padding:10px 14px!important;display:flex!important;align-items:center!important;gap:8px!important;box-shadow:0 2px 8px rgba(249,115,22,0.15),0 4px 0 #FDBA74!important;transition:box-shadow var(--t-fast),transform var(--t-fast)!important;}
.streak-badge-top:active{box-shadow:0 1px 4px rgba(249,115,22,0.1),0 0px 0 #FDBA74!important;transform:translateY(4px)!important;}
[data-theme="dark"] .streak-badge-top{background:linear-gradient(135deg,rgba(249,115,22,0.15),rgba(251,146,60,0.08))!important;border-color:rgba(249,115,22,0.3)!important;box-shadow:0 2px 8px rgba(249,115,22,0.2),0 4px 0 rgba(249,115,22,0.4)!important;}
.streak-icon{font-size:1.5rem!important;filter:drop-shadow(0 0 6px rgba(249,115,22,0.5));}
.streak-num{font-size:1.5rem!important;font-weight:900!important;color:#C2410C!important;line-height:1!important;letter-spacing:-0.03em!important;font-family:var(--font)!important;}
[data-theme="dark"] .streak-num{color:#FDBA74!important;}
.streak-lbl{font-size:0.6rem!important;color:#9A3412!important;font-weight:700!important;letter-spacing:0.06em!important;text-transform:uppercase!important;}
[data-theme="dark"] .streak-lbl{color:#FB923C!important;}

/* ── 8. STAT CARDS (Duolingo pastel) ── */
.cards-grid{gap:var(--s-3)!important;margin-bottom:var(--s-4)!important;}
.stat-card{border-radius:18px!important;padding:var(--s-4)!important;border:1.5px solid transparent!important;box-shadow:var(--shadow-sm)!important;transition:all var(--t-base)!important;position:relative!important;overflow:hidden!important;min-height:84px!important;}
.stat-card::before{display:none!important;}
.stat-card:active{transform:scale(0.97)!important;}
.stat-card .stat-num{font-size:2.25rem!important;font-weight:900!important;line-height:1!important;letter-spacing:-0.04em!important;margin-bottom:4px!important;display:block!important;font-family:var(--font)!important;}
.stat-card .stat-label{font-size:0.68rem!important;font-weight:700!important;letter-spacing:0.03em!important;text-transform:uppercase!important;opacity:0.75!important;}
.stat-card.blue{background:linear-gradient(140deg,#EFF6FF,#DBEAFE)!important;border-color:#BFDBFE!important;}
.stat-card.blue .stat-num{color:#1D4ED8!important;}
.stat-card.blue .stat-label{color:#1D4ED8!important;}
.stat-card.green{background:linear-gradient(140deg,#ECFDF5,#D1FAE5)!important;border-color:#A7F3D0!important;}
.stat-card.green .stat-num{color:#047857!important;}
.stat-card.green .stat-label{color:#047857!important;}
.stat-card.red{background:linear-gradient(140deg,#FEF2F2,#FEE2E2)!important;border-color:#FECACA!important;}
.stat-card.red .stat-num{color:#B91C1C!important;}
.stat-card.red .stat-label{color:#B91C1C!important;}
.stat-card.yellow{background:linear-gradient(140deg,#FFFBEB,#FEF3C7)!important;border-color:#FDE68A!important;}
.stat-card.yellow .stat-num{color:#B45309!important;}
.stat-card.yellow .stat-label{color:#B45309!important;}
[data-theme="dark"] .stat-card.blue{background:linear-gradient(140deg,rgba(59,130,246,0.15),rgba(59,130,246,0.05))!important;border-color:rgba(59,130,246,0.3)!important;}
[data-theme="dark"] .stat-card.blue .stat-num,[data-theme="dark"] .stat-card.blue .stat-label{color:#93C5FD!important;}
[data-theme="dark"] .stat-card.green{background:linear-gradient(140deg,rgba(16,185,129,0.15),rgba(16,185,129,0.05))!important;border-color:rgba(16,185,129,0.3)!important;}
[data-theme="dark"] .stat-card.green .stat-num,[data-theme="dark"] .stat-card.green .stat-label{color:#6EE7B7!important;}
[data-theme="dark"] .stat-card.red{background:linear-gradient(140deg,rgba(239,68,68,0.15),rgba(239,68,68,0.05))!important;border-color:rgba(239,68,68,0.3)!important;}
[data-theme="dark"] .stat-card.red .stat-num,[data-theme="dark"] .stat-card.red .stat-label{color:#FCA5A5!important;}
[data-theme="dark"] .stat-card.yellow{background:linear-gradient(140deg,rgba(245,158,11,0.15),rgba(245,158,11,0.05))!important;border-color:rgba(245,158,11,0.3)!important;}
[data-theme="dark"] .stat-card.yellow .stat-num,[data-theme="dark"] .stat-card.yellow .stat-label{color:#FCD34D!important;}

/* ── 9. SECTION BOXES (Things 3) ── */
.section-box,.glass-box,.focus-entry-card{background:var(--c-surface)!important;border:1px solid var(--c-border)!important;border-radius:18px!important;padding:var(--s-5)!important;box-shadow:var(--shadow-sm)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;margin-bottom:var(--s-4)!important;}
[data-theme="dark"] .section-box,[data-theme="dark"] .glass-box,[data-theme="dark"] .focus-entry-card{background:var(--c-surface)!important;border-color:var(--c-border)!important;box-shadow:none!important;}

/* ── 10. FOCUS CARD ── */
.focus-entry-header{display:flex!important;align-items:flex-start!important;gap:var(--s-3)!important;margin-bottom:var(--s-4)!important;}
.focus-entry-icon{background:var(--c-brand-soft)!important;color:var(--c-brand)!important;border-radius:12px!important;width:42px!important;height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;}
.focus-entry-title{font-size:1rem!important;font-weight:700!important;letter-spacing:-0.015em!important;color:var(--c-text)!important;}
.focus-entry-sub{font-size:0.8125rem!important;color:var(--c-text-2)!important;font-weight:500!important;margin-top:2px!important;}
.pomo-duration-row{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important;margin:var(--s-3) 0!important;}
.pomo-dur-btn{background:var(--c-surface-2)!important;border:1.5px solid var(--c-border)!important;border-radius:12px!important;padding:12px 6px!important;font-family:var(--font)!important;font-size:0.9375rem!important;font-weight:800!important;color:var(--c-text-2)!important;cursor:pointer!important;transition:all var(--t-fast)!important;letter-spacing:-0.02em!important;min-height:48px!important;}
.pomo-dur-btn:hover{color:var(--c-text)!important;border-color:var(--c-border-strong)!important;}
.pomo-dur-btn.active{background:var(--c-brand)!important;color:#fff!important;border-color:var(--c-brand)!important;box-shadow:0 4px 0 var(--c-brand-dk),0 2px 8px rgba(94,106,210,0.3)!important;transform:translateY(-2px)!important;}
.pomo-dur-btn.active:active{box-shadow:0 1px 0 var(--c-brand-dk)!important;transform:translateY(2px)!important;}
[data-theme="dark"] .pomo-dur-btn{background:var(--c-surface-2)!important;border-color:var(--c-border)!important;}
.pomo-cs-trigger{background:var(--c-surface-2)!important;border:1.5px solid var(--c-border)!important;border-radius:12px!important;padding:13px 14px!important;font-size:0.875rem!important;color:var(--c-text-2)!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;cursor:pointer!important;transition:all var(--t-fast)!important;font-weight:500!important;}
.pomo-cs-trigger:hover{border-color:var(--c-brand)!important;color:var(--c-text)!important;}

/* ── 11. DUOLINGO 3D CTA BUTTON ── */
.btn-focus-start,button.btn-focus-start{display:block!important;width:100%!important;background:var(--c-brand)!important;color:#fff!important;border:none!important;border-radius:14px!important;padding:16px 20px!important;font-family:var(--font)!important;font-size:1.0625rem!important;font-weight:800!important;letter-spacing:-0.015em!important;cursor:pointer!important;box-shadow:0 6px 0 var(--c-brand-dk),inset 0 1px 0 rgba(255,255,255,0.2)!important;transform:translateY(-3px)!important;transition:box-shadow 0.1s ease,transform 0.1s ease,background 0.1s ease!important;margin-top:var(--s-3)!important;text-align:center!important;-webkit-tap-highlight-color:transparent!important;}
.btn-focus-start:hover{background:#6875D8!important;}
.btn-focus-start:active{box-shadow:0 1px 0 var(--c-brand-dk)!important;transform:translateY(3px)!important;}
[data-theme="dark"] .btn-focus-start{box-shadow:0 6px 0 #1E1B4B,inset 0 1px 0 rgba(255,255,255,0.12)!important;}
[data-theme="dark"] .btn-focus-start:active{box-shadow:0 1px 0 #1E1B4B!important;}

/* ── 12. INPUTS (Linear) ── */
input[type="text"],input[type="email"],input[type="number"],input[type="date"],input[type="time"],input[type="password"],textarea,select{background:var(--c-surface)!important;border:1.5px solid var(--c-border)!important;border-radius:12px!important;padding:12px 14px!important;font-family:var(--font)!important;font-size:0.9375rem!important;color:var(--c-text)!important;transition:all var(--t-fast)!important;min-height:46px!important;}
input:focus,textarea:focus,select:focus{border-color:var(--c-brand)!important;box-shadow:0 0 0 3px var(--c-brand-soft)!important;outline:none!important;}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:var(--c-surface-2)!important;border-color:var(--c-border)!important;color:var(--c-text)!important;}
.field-label,.inline-form-label{font-size:0.7rem!important;color:var(--c-text-2)!important;font-weight:700!important;letter-spacing:0.05em!important;text-transform:uppercase!important;margin-bottom:6px!important;display:block!important;}

/* ── 13. SCHEDULE DATE STRIP (Cron) ── */
.horizontal-date-slider,.week-strip{padding:var(--s-2) 0!important;}
.hor-date-cell,.week-day-cell,.sched-day-cell{border-radius:12px!important;transition:all var(--t-fast)!important;min-width:44px!important;min-height:58px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;cursor:pointer!important;font-weight:600!important;position:relative!important;color:var(--c-text-2)!important;}
.hor-date-cell:hover{background:var(--c-surface-2)!important;}
.hor-date-cell.active,.week-day-cell.active,.sched-day-cell.active{background:var(--c-brand)!important;color:#fff!important;box-shadow:0 4px 12px rgba(94,106,210,0.35)!important;}

/* ── 14. TIMELINE EVENTS (Cron Calendar) ── */
.tl-ev{background:var(--c-surface)!important;border:1px solid var(--c-border)!important;border-radius:12px!important;box-shadow:var(--shadow-xs)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:hidden!important;transition:all var(--t-fast)!important;display:flex!important;align-items:stretch!important;padding:0!important;margin-bottom:6px!important;}
.tl-ev:hover{transform:translateY(-1px)!important;box-shadow:var(--shadow-md)!important;border-color:var(--c-border-strong)!important;}
.tl-ev:active{transform:scale(0.98)!important;}
[data-theme="dark"] .tl-ev{background:var(--c-surface)!important;border-color:var(--c-border)!important;box-shadow:none!important;}
.tl-ev-bar{width:4px!important;flex-shrink:0!important;border-radius:0!important;align-self:stretch!important;}
.tl-ev-content,.tl-ev-inner{padding:10px 12px!important;flex:1!important;}
.tl-ev-name{font-size:0.8125rem!important;font-weight:700!important;color:var(--c-text)!important;letter-spacing:-0.008em!important;line-height:1.3!important;display:block!important;margin-bottom:2px!important;}
.tl-ev-time{font-size:0.6875rem!important;color:var(--c-text-3)!important;font-weight:500!important;letter-spacing:0.01em!important;display:block!important;}
.tl-ev.done{opacity:0.5!important;}
.tl-ev.done .tl-ev-name{text-decoration:line-through!important;}
.tl-time-label{font-size:0.6875rem!important;color:var(--c-text-3)!important;font-weight:600!important;font-family:var(--mono)!important;letter-spacing:0.02em!important;}

/* ── 15. SCHEDULE BUTTONS ── */
.sch-act-btn{border-radius:var(--r-full)!important;font-family:var(--font)!important;font-weight:700!important;font-size:0.8125rem!important;letter-spacing:-0.005em!important;padding:8px 16px!important;transition:all var(--t-fast)!important;border:1.5px solid transparent!important;display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:36px!important;cursor:pointer!important;}
.sch-act-green{color:#047857!important;border-color:#A7F3D0!important;background:linear-gradient(135deg,#ECFDF5,#D1FAE5)!important;}
.sch-act-purple{color:var(--c-brand)!important;border-color:#C7D2FE!important;background:var(--c-brand-soft)!important;}
.sch-act-blue{color:#1D4ED8!important;border-color:#BFDBFE!important;background:linear-gradient(135deg,#EFF6FF,#DBEAFE)!important;}
.sch-act-btn:active{transform:scale(0.95)!important;}
[data-theme="dark"] .sch-act-green{background:rgba(16,185,129,0.12)!important;border-color:rgba(16,185,129,0.25)!important;color:#6EE7B7!important;}
[data-theme="dark"] .sch-act-purple{background:var(--c-brand-soft)!important;border-color:rgba(94,106,210,0.3)!important;}
[data-theme="dark"] .sch-act-blue{background:rgba(59,130,246,0.12)!important;border-color:rgba(59,130,246,0.25)!important;color:#93C5FD!important;}
.sch-page-hdr{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:var(--s-3) 0!important;margin-bottom:var(--s-3)!important;}
.sch-week-label{font-family:var(--font)!important;font-size:0.9rem!important;font-weight:700!important;letter-spacing:-0.01em!important;color:var(--c-text)!important;cursor:pointer!important;padding:8px 16px!important;border-radius:var(--r-full)!important;border:1.5px solid var(--c-border)!important;background:var(--c-surface)!important;transition:all var(--t-fast)!important;}
.sch-week-label:hover{border-color:var(--c-brand)!important;color:var(--c-brand)!important;}
.sch-nav-btn{background:var(--c-surface)!important;border:1.5px solid var(--c-border)!important;border-radius:10px!important;width:36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--c-text-2)!important;transition:all var(--t-fast)!important;cursor:pointer!important;}
.sch-nav-btn:hover{border-color:var(--c-brand)!important;color:var(--c-brand)!important;}

/* ── 16. STUDYQUEST HERO (Duolingo) ── */
.sq-hero-card{background:linear-gradient(150deg,#4338CA,#5E6AD2 50%,#7C3AED)!important;border-radius:22px!important;padding:var(--s-5)!important;border:none!important;box-shadow:0 8px 0 #312E81,0 12px 32px rgba(67,56,202,0.3)!important;margin-bottom:var(--s-4)!important;color:#fff!important;display:flex!important;gap:var(--s-4)!important;align-items:center!important;}
[data-theme="dark"] .sq-hero-card{box-shadow:0 8px 0 #1E1B4B,0 12px 32px rgba(67,56,202,0.5)!important;}
.sq-ring-svg{width:120px!important;height:120px!important;}
.sq-xp-num{font-size:1.75rem!important;font-weight:900!important;line-height:1!important;letter-spacing:-0.04em!important;color:#fff!important;font-family:var(--font)!important;}
.sq-xp-lbl{font-size:0.62rem!important;font-weight:800!important;letter-spacing:0.08em!important;text-transform:uppercase!important;color:rgba(255,255,255,0.6)!important;}
.sq-level-emoji{font-size:1.5rem!important;margin-bottom:2px!important;}
.sq-hero-info{flex:1!important;min-width:0!important;}
.sq-hero-level-name{font-size:1.05rem!important;font-weight:800!important;letter-spacing:-0.02em!important;color:#fff!important;margin-bottom:var(--s-2)!important;}
.sq-xp-bar-wrap{background:rgba(255,255,255,0.2)!important;border-radius:var(--r-full)!important;height:14px!important;overflow:hidden!important;margin:var(--s-2) 0!important;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)!important;}
.sq-xp-bar{height:100%!important;background:linear-gradient(90deg,#FACC15,#FB923C)!important;border-radius:var(--r-full)!important;box-shadow:0 0 12px rgba(250,204,21,0.6),inset 0 1px 0 rgba(255,255,255,0.4)!important;transition:width 1.2s cubic-bezier(0.34,1.56,0.64,1)!important;}
.sq-xp-caption{font-size:0.7rem!important;color:rgba(255,255,255,0.65)!important;font-weight:600!important;}
.sq-streak-chip{display:inline-flex!important;align-items:center!important;gap:6px!important;background:rgba(255,255,255,0.15)!important;border-radius:var(--r-full)!important;padding:6px 12px!important;margin-top:var(--s-3)!important;}
.sq-fire{font-size:1rem!important;}
.sq-streak-num{font-size:1rem!important;font-weight:900!important;color:#fff!important;letter-spacing:-0.02em!important;font-family:var(--font)!important;}
.sq-streak-lbl{font-size:0.62rem!important;color:rgba(255,255,255,0.7)!important;font-weight:700!important;letter-spacing:0.03em!important;}

/* ── 17. STAT PILLS ── */
.sq-stats-row{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:var(--s-3)!important;margin-bottom:var(--s-4)!important;}
.sq-stat-pill{background:var(--c-surface)!important;border:1.5px solid var(--c-border)!important;border-radius:16px!important;padding:14px 8px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;box-shadow:var(--shadow-xs)!important;transition:all var(--t-fast)!important;}
.sq-stat-pill:active{transform:scale(0.95)!important;}
.sq-stat-n{font-size:1.375rem!important;font-weight:900!important;letter-spacing:-0.03em!important;color:var(--c-text)!important;line-height:1!important;font-family:var(--font)!important;}
.sq-stat-l{font-size:0.58rem!important;font-weight:700!important;letter-spacing:0.05em!important;text-transform:uppercase!important;color:var(--c-text-3)!important;}
.sq-stat-gold{background:linear-gradient(140deg,#FFFBEB,#FEF3C7)!important;border-color:#FDE68A!important;}
.sq-stat-gold .sq-stat-n{color:#B45309!important;}
[data-theme="dark"] .sq-stat-pill{background:var(--c-surface)!important;border-color:var(--c-border)!important;box-shadow:none!important;}
[data-theme="dark"] .sq-stat-gold{background:rgba(245,158,11,0.12)!important;border-color:rgba(245,158,11,0.3)!important;}
[data-theme="dark"] .sq-stat-gold .sq-stat-n{color:#FCD34D!important;}

/* ── 18. ACHIEVEMENT BADGES (Duolingo) ── */
.sq-badges-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important;}
.sq-badge{display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;padding:14px 4px!important;border-radius:14px!important;border:1.5px solid var(--c-border)!important;background:var(--c-surface-2)!important;transition:all var(--t-base)!important;opacity:0.45!important;}
.sq-badge.earned{background:linear-gradient(140deg,#FFFBEB,#FEF3C7)!important;border-color:#FDE68A!important;opacity:1!important;box-shadow:0 4px 0 #FDE68A,0 4px 12px rgba(245,158,11,0.2)!important;}
.sq-badge.earned:active{transform:scale(0.95)!important;}
[data-theme="dark"] .sq-badge{background:var(--c-surface-2)!important;border-color:var(--c-border)!important;}
[data-theme="dark"] .sq-badge.earned{background:rgba(245,158,11,0.15)!important;border-color:rgba(245,158,11,0.35)!important;box-shadow:0 4px 0 rgba(245,158,11,0.4),0 4px 12px rgba(245,158,11,0.15)!important;}
.sq-badge-emoji{font-size:1.75rem!important;line-height:1!important;}
.sq-badge-name{font-size:0.57rem!important;font-weight:700!important;letter-spacing:0.02em!important;text-align:center!important;color:var(--c-text-3)!important;text-transform:uppercase!important;line-height:1.3!important;}
.sq-badge.earned .sq-badge-name{color:#92400E!important;}
[data-theme="dark"] .sq-badge.earned .sq-badge-name{color:#FCD34D!important;}

/* ── 19. MODALS (Notion) ── */
.modal-overlay{background:rgba(15,23,42,0.55)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,0.75)!important;}
.modal-box{background:var(--c-surface)!important;border:1px solid var(--c-border)!important;border-radius:24px!important;box-shadow:0 24px 64px rgba(0,0,0,0.15)!important;padding:var(--s-6)!important;}
[data-theme="dark"] .modal-box{background:var(--c-surface)!important;box-shadow:0 24px 64px rgba(0,0,0,0.6)!important;}

/* ── 20. SIDEBAR (Linear) ── */
.sidebar{background:var(--c-surface)!important;border-left:1px solid var(--c-border)!important;}
[data-theme="dark"] .sidebar{background:var(--c-surface)!important;border-color:var(--c-border)!important;}
.nav-item{border-radius:10px!important;transition:all var(--t-fast)!important;font-weight:600!important;padding:11px 14px!important;color:var(--c-text-2)!important;min-height:44px!important;display:flex!important;align-items:center!important;}
.nav-item:hover{background:var(--c-surface-2)!important;color:var(--c-text)!important;}
.nav-item.active{background:var(--c-brand-soft)!important;color:var(--c-brand)!important;font-weight:700!important;}

/* ── 21. ONBOARDING (Apple × Duolingo) ── */
#setup-screen{background:var(--c-bg)!important;}
.setup-card,.ob2-card{background:var(--c-surface)!important;border:1px solid var(--c-border)!important;border-radius:24px!important;box-shadow:0 20px 60px rgba(0,0,0,0.1)!important;padding:var(--s-8) var(--s-6)!important;}
[data-theme="dark"] .setup-card,[data-theme="dark"] .ob2-card{background:var(--c-surface)!important;border-color:var(--c-border)!important;}
.setup-logo{font-size:2.25rem!important;font-weight:900!important;letter-spacing:-0.04em!important;background:linear-gradient(135deg,var(--c-brand),var(--c-brand-dk))!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;}
.ob2-title,.ob-q{font-size:1.5rem!important;font-weight:800!important;letter-spacing:-0.025em!important;line-height:1.2!important;color:var(--c-text)!important;}
.ob2-subtitle,.ob-sub{font-size:0.9375rem!important;color:var(--c-text-2)!important;font-weight:500!important;}
.ob2-choice,.ob-opt{background:var(--c-surface)!important;border:1.5px solid var(--c-border)!important;border-radius:12px!important;padding:14px 16px!important;font-weight:600!important;color:var(--c-text)!important;transition:all var(--t-fast)!important;min-height:52px!important;}
.ob2-choice:hover,.ob-opt:hover{border-color:var(--c-brand)!important;background:var(--c-brand-soft)!important;}
.ob2-choice.ob2-sel,.ob-opt.sel{border-color:var(--c-brand)!important;background:var(--c-brand-soft)!important;color:var(--c-brand)!important;box-shadow:0 0 0 3px var(--c-brand-soft)!important;}
.ob2-prog-track,.ob-progress .ob-dot{background:var(--c-border)!important;}
.ob2-prog-fill{background:linear-gradient(90deg,var(--c-brand),var(--c-brand-dk))!important;}
.ob-dot.done{background:var(--c-brand)!important;}
.ob2-next-btn,.ob-next-btn{background:var(--c-brand)!important;box-shadow:0 5px 0 var(--c-brand-dk),0 4px 14px rgba(94,106,210,0.3)!important;border-radius:14px!important;font-weight:800!important;letter-spacing:-0.01em!important;border:none!important;color:#fff!important;transform:translateY(-2px)!important;transition:box-shadow 0.1s ease,transform 0.1s ease!important;}
.ob2-next-btn:active,.ob-next-btn:active{box-shadow:0 1px 0 var(--c-brand-dk)!important;transform:translateY(3px)!important;}
.ob2-counter{color:var(--c-text-3)!important;font-weight:600!important;font-size:0.75rem!important;}

/* ── 22. MISC BUTTONS ── */
.btn-primary,.btn-sm{border-radius:10px!important;font-family:var(--font)!important;font-weight:700!important;font-size:0.8125rem!important;letter-spacing:-0.005em!important;padding:9px 14px!important;transition:all var(--t-fast)!important;border:1.5px solid var(--c-border)!important;background:var(--c-surface)!important;color:var(--c-text-2)!important;box-shadow:var(--shadow-xs)!important;min-height:38px!important;cursor:pointer!important;}
.btn-sm:hover,.btn-primary:hover{border-color:var(--c-border-strong)!important;color:var(--c-text)!important;}
.btn-sm:active,.btn-primary:active{transform:scale(0.95)!important;}
.btn-sm.red{color:var(--c-red)!important;border-color:#FECACA!important;background:#FEF2F2!important;}
[data-theme="dark"] .btn-sm,[data-theme="dark"] .btn-primary{background:var(--c-surface-2)!important;border-color:var(--c-border)!important;color:var(--c-text-2)!important;}

/* ── 23. BANNERS ── */
.wr-banner{background:linear-gradient(135deg,var(--c-brand-soft),#EEF2FF)!important;border:1.5px solid #C7D2FE!important;border-radius:16px!important;padding:var(--s-4)!important;margin-bottom:var(--s-4)!important;transition:all var(--t-fast)!important;}
.wr-banner:hover{border-color:var(--c-brand)!important;transform:translateY(-1px)!important;}
.wr-banner-title{font-weight:700!important;font-size:0.9rem!important;color:var(--c-brand)!important;letter-spacing:-0.01em!important;}
.wr-banner-sub{font-size:0.78rem!important;color:var(--c-text-2)!important;margin-top:2px!important;font-weight:500!important;}
[data-theme="dark"] .wr-banner{background:rgba(94,106,210,0.1)!important;border-color:rgba(94,106,210,0.25)!important;}
.exam-urgency-banner{background:linear-gradient(135deg,#FEF2F2,#FEE2E2)!important;border:1.5px solid #FECACA!important;border-radius:16px!important;padding:var(--s-4)!important;margin-bottom:var(--s-4)!important;}
[data-theme="dark"] .exam-urgency-banner{background:rgba(239,68,68,0.1)!important;border-color:rgba(239,68,68,0.25)!important;}

/* ── 24. TOAST ── */
#toast{background:var(--c-text)!important;color:var(--c-surface)!important;border-radius:14px!important;padding:12px 18px!important;font-weight:700!important;letter-spacing:-0.01em!important;box-shadow:0 8px 24px rgba(0,0,0,0.2)!important;}
[data-theme="dark"] #toast{background:var(--c-surface-2)!important;color:var(--c-text)!important;border:1px solid var(--c-border)!important;}

/* ── 25. MISC ── */
.inline-form-grid{gap:var(--s-3)!important;}
.inline-form-input{background:var(--c-surface-2)!important;border:1.5px solid var(--c-border)!important;border-radius:12px!important;}
.empty-state{text-align:center!important;padding:var(--s-10) var(--s-4)!important;color:var(--c-text-3)!important;font-size:0.875rem!important;font-weight:600!important;letter-spacing:-0.005em!important;}
::selection{background:var(--c-brand-soft);color:var(--c-brand);}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--c-border-strong);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--c-text-3);}

/* ═══════════════════════════════════════════════════════════
   SCHEDULE & WIDGET REFINEMENTS v2.1
   ═══════════════════════════════════════════════════════════ */

/* ── Schedule Action Bar: compact pills, not full-width ── */
.sch-action-bar {
  display: flex !important;
  gap: 8px !important;
  margin-top: var(--s-3) !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
.sch-act-btn {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 16px !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all var(--t-fast) !important;
  white-space: nowrap !important;
  min-height: 36px !important;
  justify-content: center !important;
  border: 1.5px solid transparent !important;
}
.sch-act-btn:active { transform: scale(0.95) !important; }

/* ── Next-Task Widget: glass card like reference image ── */
.next-task-widget {
  display: flex !important;
  align-items: stretch !important;
  background: linear-gradient(135deg, var(--c-brand-soft), var(--c-brand-light)) !important;
  border: 1.5px solid rgba(94,106,210,0.2) !important;
  border-radius: 18px !important;
  margin-bottom: var(--s-4) !important;
  box-shadow: 0 4px 16px rgba(94,106,210,0.12) !important;
  overflow: hidden !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all var(--t-base) !important;
}
.next-task-widget:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(94,106,210,0.18) !important;
}
[data-theme="dark"] .next-task-widget {
  background: linear-gradient(135deg, rgba(94,106,210,0.15), rgba(94,106,210,0.05)) !important;
  border-color: rgba(94,106,210,0.25) !important;
  box-shadow: 0 4px 16px rgba(94,106,210,0.15) !important;
}
.ntw-accent-bar {
  width: 5px !important;
  background: var(--c-brand) !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
}
.ntw-accent-bar.urgent { background: var(--c-red) !important; }
.ntw-body {
  flex: 1 !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.ntw-info { flex: 1 !important; min-width: 0 !important; }
.ntw-label {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: var(--c-brand) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin-bottom: 3px !important;
  opacity: 0.8 !important;
}
.ntw-task-name {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}
.ntw-course {
  font-size: 0.75rem !important;
  color: var(--c-text-2) !important;
  margin-top: 3px !important;
  font-weight: 500 !important;
}
/* Timer section — large countdown like reference image */
.ntw-timer {
  text-align: center !important;
  flex-shrink: 0 !important;
  padding-right: 4px !important;
  padding-left: 14px !important;
  border-right: 1.5px solid rgba(94,106,210,0.15) !important;
  border-left: none !important;
}
.ntw-digits {
  font-family: var(--font) !important;
  font-size: 1.625rem !important;
  font-weight: 900 !important;
  color: var(--c-brand) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  transition: color var(--t-base) !important;
}
.ntw-digits.urgent { color: var(--c-red) !important; }
[data-theme="dark"] .ntw-digits { color: var(--c-brand) !important; }
.ntw-timer-label {
  font-size: 0.58rem !important;
  color: var(--c-text-3) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-top: 3px !important;
  white-space: nowrap !important;
}

/* ── Timeline grid lines (Cron/Notion Calendar style) ── */
.timeline-hour-row {
  position: relative !important;
}
.timeline-hour-row::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 1px !important;
  background: var(--c-border) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}
.tl-time-label {
  font-size: 0.6875rem !important;
  color: var(--c-text-3) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  min-width: 36px !important;
  flex-shrink: 0 !important;
}

/* Day header in timeline */
.sch-day-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  padding: var(--s-4) 0 var(--s-2) !important;
  gap: var(--s-3) !important;
}
.sch-day-name {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--c-brand) !important;
}
.sch-day-sub {
  font-size: 0.8125rem !important;
  color: var(--c-text-3) !important;
  font-weight: 500 !important;
}
.sch-tasks-count {
  background: var(--c-brand-soft) !important;
  color: var(--c-brand) !important;
  border-radius: var(--r-full) !important;
  padding: 3px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

/* ── Progress page: mission rows ── */
.sq-mission-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  margin-bottom: 8px !important;
  transition: all var(--t-fast) !important;
  box-shadow: var(--shadow-xs) !important;
}
.sq-mission-row.completed {
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5) !important;
  border-color: #A7F3D0 !important;
}
[data-theme="dark"] .sq-mission-row { background: var(--c-surface) !important; border-color: var(--c-border) !important; box-shadow: none !important; }
[data-theme="dark"] .sq-mission-row.completed { background: rgba(16,185,129,0.1) !important; border-color: rgba(16,185,129,0.25) !important; }

/* ── Course progress bars ── */
.course-prog-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--c-border) !important;
}
.course-prog-row:last-child { border-bottom: none !important; margin-bottom: 0 !important; }
.course-prog-bar-track {
  flex: 1 !important;
  height: 6px !important;
  background: var(--c-surface-2) !important;
  border-radius: var(--r-full) !important;
  overflow: hidden !important;
}
.course-prog-bar-fill {
  height: 100% !important;
  border-radius: var(--r-full) !important;
  background: linear-gradient(90deg, var(--c-brand), #7C3AED) !important;
  transition: width 1s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ── Monthly calendar view ── */
.month-cal-controls {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 14px !important;
  padding: var(--s-3) var(--s-4) !important;
  box-shadow: var(--shadow-xs) !important;
}
#cal-month-label {
  font-family: var(--font) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--c-text) !important;
}

/* ── Heatmap ── */
.heatmap-cell {
  border-radius: 3px !important;
  transition: transform var(--t-fast) !important;
}
.heatmap-cell:hover { transform: scale(1.4) !important; }

/* ── Empty state ── */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: var(--s-10) var(--s-4) !important;
  color: var(--c-text-3) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════
   STUDYFLOW REDESIGN v2.2
   True Blue #4B7BF5 · Duolingo Physics · Cron Timeline
   ═══════════════════════════════════════════════════════════ */

/* ── v2.2.1: TRUE BLUE BRAND ── */
:root {
  --c-brand:#4B7BF5!important;
  --c-brand-dk:#3A64D4!important;
  --c-brand-soft:rgba(75,123,245,0.09)!important;
  --c-brand-light:#EBF2FF!important;
}
[data-theme="dark"] {
  --c-brand:#6B93F8!important;
  --c-brand-dk:#4B7BF5!important;
  --c-brand-soft:rgba(107,147,248,0.1)!important;
  --c-brand-light:#1B2B5E!important;
}

/* ── v2.2.2: DUOLINGO 3D BUTTON — real border-bottom physics ── */
.btn-focus-start,button.btn-focus-start {
  border-bottom: 4px solid var(--c-brand-dk) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-bottom 0.08s ease, transform 0.08s ease, background 0.1s ease !important;
}
.btn-focus-start:hover,button.btn-focus-start:hover {
  background: #5f88f6 !important;
}
.btn-focus-start:active,button.btn-focus-start:active {
  border-bottom: 0px solid var(--c-brand-dk) !important;
  transform: translateY(4px) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .btn-focus-start,[data-theme="dark"] button.btn-focus-start {
  border-bottom-color: #2450b0 !important;
  box-shadow: none !important;
}

/* ── v2.2.3: TIMELINE EVENTS — solid colored blocks (Cron / Google Calendar) ── */
/* Remove white-card override; make the color bar fill the full card */
.tl-ev {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 2px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}
.tl-ev:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
/* Bar becomes the full-coverage background */
.tl-ev-bar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: unset !important;
  border-radius: 8px !important;
  align-self: unset !important;
  opacity: 0.82 !important;
}
/* Body text sits above the color bar */
.tl-ev-body {
  position: relative !important;
  z-index: 1 !important;
  padding: 5px 9px !important;
  flex: unset !important;
}
.tl-ev-content,.tl-ev-inner {
  position: relative !important;
  z-index: 1 !important;
  padding: 5px 9px !important;
  flex: unset !important;
}
.tl-ev-name {
  color: #fff !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  margin-bottom: 1px !important;
}
.tl-ev-time {
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}
.tl-ev.done {
  opacity: 0.42 !important;
}
.tl-ev.done .tl-ev-name {
  text-decoration: line-through !important;
  color: rgba(255,255,255,0.7) !important;
}
[data-theme="dark"] .tl-ev-bar { opacity: 0.7 !important; }

/* ── v2.2.4: DUOLINGO ANIMATIONS ── */
@keyframes streakWiggle {
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(-10deg)}
  40%{transform:rotate(10deg)}
  60%{transform:rotate(-6deg)}
  80%{transform:rotate(6deg)}
}
@keyframes badgePop {
  0%{transform:scale(0.55);opacity:0}
  55%{transform:scale(1.22)}
  75%{transform:scale(0.93)}
  90%{transform:scale(1.05)}
  100%{transform:scale(1);opacity:1}
}
@keyframes xpGlow {
  0%,100%{box-shadow:0 0 10px rgba(250,204,21,0.5),inset 0 1px 0 rgba(255,255,255,0.35)}
  50%{box-shadow:0 0 22px rgba(250,204,21,0.85),0 0 40px rgba(251,146,60,0.35),inset 0 1px 0 rgba(255,255,255,0.5)}
}
@keyframes btnPress {
  0%{transform:translateY(0)}
  50%{transform:translateY(2px)}
  100%{transform:translateY(0)}
}
.streak-icon { animation: streakWiggle 2.8s ease-in-out infinite !important; display:inline-block!important; }
.sq-xp-bar { animation: xpGlow 2.2s ease-in-out infinite !important; }
.sq-badge.earned { animation: badgePop 0.55s cubic-bezier(0.34,1.56,0.64,1) both !important; }
.pomo-dur-btn.active:active { animation: btnPress 0.12s ease !important; }

/* ── v2.2.5: FIX NEXT-TASK WIDGET SHADOW TO NEW BRAND ── */
.next-task-widget {
  border-color: rgba(75,123,245,0.2) !important;
  box-shadow: 0 4px 16px rgba(75,123,245,0.12) !important;
}
.next-task-widget:hover {
  box-shadow: 0 8px 24px rgba(75,123,245,0.2) !important;
}
[data-theme="dark"] .next-task-widget {
  background: linear-gradient(135deg, rgba(75,123,245,0.15), rgba(75,123,245,0.05)) !important;
  border-color: rgba(75,123,245,0.25) !important;
}

/* ── v2.2.6: DATE STRIP ACTIVE — new brand blue shadow ── */
.hor-date-cell.active,.week-day-cell.active,.sched-day-cell.active {
  box-shadow: 0 4px 12px rgba(75,123,245,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════
   STUDYFLOW v2.4 — 3 Critical Bug Fixes
   ═══════════════════════════════════════════════════════════ */

/* ── FIX 1: TIMELINE EVENTS — position:absolute overrides JS inline position:relative ── */
/* Root cause: JS injects position:relative on task events, causing cascading offset
   accumulation. position:absolute !important forces correct absolute-positioned layout
   inside .timeline-events-area (which already has position:relative). */
.tl-ev {
  position: absolute !important;
}
/* Clear margins — no effect on absolute elements anyway, but make intent explicit */
.tl-ev { margin-bottom: 0 !important; }

/* ── FIX 2: ACTION SHEET — prevent background scroll when sheet is open ── */
/* :has() supported in all modern browsers (2023+) */
html:has(.action-sheet-backdrop.open),
body:has(.action-sheet-backdrop.open) {
  overflow: hidden !important;
  touch-action: none !important;
}
/* Ensure backdrop captures all touch events */
.action-sheet-backdrop.open {
  touch-action: none !important;
  overscroll-behavior: contain !important;
}

/* ── FIX 3: PROGRESS HERO CARD — light design, remove plant emoji ── */
/* Old: dark purple gradient (#4338CA → #5E6AD2 → #7C3AED) */
/* New: clean white card with brand accent, Things 3 / Linear style */
.sq-hero-card {
  background: linear-gradient(150deg, #EBF2FF 0%, #F5F7FF 55%, #FAFBFF 100%) !important;
  border: 1.5px solid rgba(75,123,245,0.15) !important;
  box-shadow: 0 4px 20px rgba(75,123,245,0.10), 0 1px 4px rgba(0,0,0,0.05) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .sq-hero-card {
  background: linear-gradient(150deg, rgba(75,123,245,0.12) 0%, rgba(75,123,245,0.04) 100%) !important;
  border-color: rgba(75,123,245,0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
/* Hide plant / level emoji inside the ring */
#xp-level-emoji { display: none !important; }
/* XP number — brand blue instead of white */
.sq-xp-num { color: var(--c-brand) !important; }
.sq-xp-lbl { color: var(--c-text-2) !important; opacity: 1 !important; }
/* Level name and caption — dark text */
.sq-hero-level-name { color: var(--c-text) !important; }
.sq-xp-caption { color: var(--c-text-2) !important; }
/* XP bar track — lighter on light bg */
.sq-xp-bar-wrap {
  background: rgba(75,123,245,0.1) !important;
  box-shadow: none !important;
}
/* Streak chip — orange tint, not white ghost */
.sq-streak-chip {
  background: rgba(249,115,22,0.08) !important;
  border: 1px solid rgba(249,115,22,0.15) !important;
}
.sq-streak-num { color: #C2410C !important; }
.sq-streak-lbl { color: var(--c-text-2) !important; opacity: 1 !important; }
/* Ring SVG track circle — visible on light bg */
[data-theme="dark"] .sq-xp-num { color: var(--c-brand) !important; }
[data-theme="dark"] .sq-streak-chip {
  background: rgba(249,115,22,0.12) !important;
  border-color: rgba(249,115,22,0.2) !important;
}
[data-theme="dark"] .sq-streak-num { color: #FDBA74 !important; }
[data-theme="dark"] .sq-streak-lbl { color: rgba(255,255,255,0.55) !important; }

/* ═══════════════════════════════════════════════════════════
   STUDYFLOW v2.3 — Research-Accurate Implementation
   Cron timeline · Duolingo physics fix · Linear typography
   ═══════════════════════════════════════════════════════════ */

/* ── v2.3.1: CRON-ACCURATE TIMELINE EVENTS ── */
/* Research: left accent stripe + surface bg + dark text, border-radius 4-6px */
.tl-ev {
  background: var(--c-surface) !important;  /* white card bg */
  display: flex !important;                  /* restore flex for bar+body layout */
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important;
  padding: 0 !important;
  margin-bottom: 3px !important;
  overflow: hidden !important;
}
.tl-ev:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
[data-theme="dark"] .tl-ev {
  background: var(--c-surface-2) !important;
  box-shadow: none !important;
}

/* Bar: narrow left stripe at full opacity (Cron accent strip pattern) */
.tl-ev-bar {
  position: relative !important;
  inset: unset !important;
  width: 4px !important;
  min-width: 4px !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  z-index: auto !important;
}
[data-theme="dark"] .tl-ev-bar { opacity: 0.85 !important; }

/* Body: normal flex flow, reset z-index */
.tl-ev-body, .tl-ev-content, .tl-ev-inner {
  position: relative !important;
  z-index: auto !important;
  flex: 1 !important;
  padding: 5px 8px !important;
}

/* Dark text on white/light background (Cron: rgba(0,0,0,0.9)) */
.tl-ev-name {
  color: rgba(0,0,0,0.87) !important;
  text-shadow: none !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin-bottom: 1px !important;
}
.tl-ev-time {
  color: rgba(0,0,0,0.52) !important;
  text-shadow: none !important;
  font-size: 0.615rem !important;
  font-weight: 500 !important;
}
.tl-ev.done {
  opacity: 0.45 !important;
}
.tl-ev.done .tl-ev-name {
  text-decoration: line-through !important;
  color: rgba(0,0,0,0.52) !important;
}
[data-theme="dark"] .tl-ev-name { color: rgba(255,255,255,0.88) !important; }
[data-theme="dark"] .tl-ev-time { color: rgba(255,255,255,0.52) !important; }
[data-theme="dark"] .tl-ev.done .tl-ev-name { color: rgba(255,255,255,0.4) !important; }

/* ── v2.3.2: DUOLINGO BUTTON — research-accurate (translateY 2px, not 4px) ── */
/* border-bottom:4px removal accounts for 2px, translateY provides the other 2px */
.btn-focus-start:active, button.btn-focus-start:active {
  border-bottom: 0px solid var(--c-brand-dk) !important;
  transform: translateY(2px) !important;
  box-shadow: none !important;
}

/* ── v2.3.3: GRID LINES — Cron exact rgba(0,0,0,0.09) ── */
.timeline-hour-row::before {
  background: rgba(0,0,0,0.09) !important;
  opacity: 1 !important;
  height: 1px !important;
}
[data-theme="dark"] .timeline-hour-row::before {
  background: rgba(255,255,255,0.08) !important;
  opacity: 1 !important;
}

/* ── v2.3.4: LINEAR TYPOGRAPHY — 14px body, tight -0.013em letter-spacing ── */
.tl-ev-name, .sq-mission-row, .nav-item, .bottom-nav-item {
  letter-spacing: -0.013em !important;
}
.tl-time-label {
  font-size: 0.6875rem !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(0,0,0,0.35) !important;
}
[data-theme="dark"] .tl-time-label { color: rgba(255,255,255,0.3) !important; }

/* ── v2.3.5: LINEAR INPUTS — square 6px radius (precision tool feel) ── */
input[type="text"],input[type="email"],input[type="number"],input[type="date"],
input[type="time"],input[type="password"],textarea,select {
  border-radius: 6px !important;
}
input:focus,textarea:focus,select:focus {
  box-shadow: 0 0 0 2px var(--c-brand-soft) !important;
}

/* ── v2.3.6: THINGS 3 — stat cards flatter, less shadow ── */
.stat-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.stat-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.09) !important;
  transform: translateY(-1px) !important;
}

/* ── v2.3.7: DUOLINGO BUTTON — richer green gradient gradient (not just flat blue) ── */
/* Keep our blue but add a subtle gradient for depth like Duolingo's green */
.btn-focus-start, button.btn-focus-start {
  background: linear-gradient(to bottom, #5f88f7 0%, #4B7BF5 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   STUDYFLOW v2.5 — Full Redesign Pass
   Hero Card · Bottom Nav Squares · Solid Calendar Blocks
   ═══════════════════════════════════════════════════════════ */

/* ── v2.5.1: PROGRESS HERO CARD — Duolingo-style, no emoji ── */
/* Vibrant brand gradient, white text, hides the emoji-containing level name */
.sq-hero-card {
  background: linear-gradient(150deg, #4B7BF5 0%, #6366F1 55%, #7C3AED 100%) !important;
  border: none !important;
  box-shadow: 0 6px 0 rgba(58,100,212,0.55), 0 12px 32px rgba(75,123,245,0.28) !important;
  color: #fff !important;
  flex-direction: column !important;
  align-items: flex-end !important;  /* RTL: content starts on right */
  gap: var(--s-3) !important;
  padding: var(--s-5) var(--s-5) var(--s-4) !important;
}
[data-theme="dark"] .sq-hero-card {
  background: linear-gradient(150deg, #3A64D4 0%, #4B46E8 55%, #6D3FBA 100%) !important;
  box-shadow: 0 6px 0 rgba(20,18,55,0.7), 0 12px 32px rgba(0,0,0,0.45) !important;
}
/* Ring: keep for XP visualization, hide plant emoji inside */
.sq-ring-wrap { flex-shrink: 0 !important; }
#xp-level-emoji { display: none !important; }
/* XP number in ring: white */
.sq-xp-num { color: #fff !important; font-size: 1.85rem !important; }
.sq-xp-lbl { color: rgba(255,255,255,0.65) !important; opacity: 1 !important; }
/* Hero info: full width */
.sq-hero-info { flex: 1 !important; width: 100% !important; }
/* Level name: HIDE — contains emoji from JS, cannot remove in CSS alone */
.sq-hero-level-name { display: none !important; }
/* XP bar */
.sq-xp-bar-wrap {
  background: rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
  height: 12px !important;
  border-radius: var(--r-full) !important;
  margin: var(--s-2) 0 var(--s-1) !important;
}
.sq-xp-bar {
  background: linear-gradient(90deg, #FACC15, #FB923C) !important;
  box-shadow: 0 0 10px rgba(250,204,21,0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  animation: xpGlow 2.2s ease-in-out infinite !important;
}
.sq-xp-caption { color: rgba(255,255,255,0.6) !important; font-size: 0.72rem !important; }
/* Streak chip */
.sq-streak-chip {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: var(--r-full) !important;
  margin-top: var(--s-2) !important;
  display: inline-flex !important;
  padding: 6px 12px !important;
}
.sq-streak-num { color: #fff !important; font-weight: 900 !important; }
.sq-streak-lbl { color: rgba(255,255,255,0.65) !important; opacity: 1 !important; }
.sq-fire { animation: streakWiggle 2.8s ease-in-out infinite !important; }

/* ── v2.5.2: BOTTOM NAV — ריבועים (square tiles) + theme-aware colors ── */
.bottom-nav {
  background: var(--c-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid var(--c-border) !important;
  box-shadow: none !important;
  padding: 10px 10px calc(env(safe-area-inset-bottom,0px) + 8px) !important;
  display: none !important;
  gap: 8px !important;
}
@media (max-width: 768px) {
  .bottom-nav { display: flex; }
}
/* Each item: square/rounded-square tile */
.bottom-nav-item {
  background: var(--c-surface) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  color: var(--c-text-2) !important;
  flex: 1 !important;
  min-height: 54px !important;
  min-width: unset !important;
  gap: 3px !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  padding: 6px 4px !important;
}
.bottom-nav-item.active {
  background: var(--c-brand-soft) !important;
  border-color: rgba(75,123,245,0.3) !important;
  color: var(--c-brand) !important;
  box-shadow: none !important;
}
.bottom-nav-item:active { transform: scale(0.93) !important; }
/* Dark mode: lighter inactive items so they're visible on dark bg */
[data-theme="dark"] .bottom-nav { background: var(--c-bg) !important; }
[data-theme="dark"] .bottom-nav-item {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: rgba(255,255,255,0.4) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .bottom-nav-item.active {
  background: rgba(107,147,248,0.15) !important;
  border-color: rgba(107,147,248,0.25) !important;
  color: var(--c-brand) !important;
}

/* ── v2.5.3: TIMELINE EVENTS — solid colored blocks (Fantastical/Google Calendar) ── */
/* The JS inline background:${color}15 is overridden to transparent.
   The tl-ev-bar fills the card with the event color from its own inline background. */
.tl-ev {
  background: transparent !important;  /* bar handles the background */
  display: block !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  position: absolute !important;  /* always absolute (from v2.4 fix) */
}
.tl-ev:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  transform: none !important;
  border-color: transparent !important;
}
/* Bar: fills entire card area at high opacity = solid color block */
.tl-ev-bar {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-width: unset !important;
  border-radius: 6px !important;
  align-self: unset !important;
  opacity: 0.85 !important;
  z-index: 0 !important;
  flex-shrink: 0 !important;
}
[data-theme="dark"] .tl-ev-bar { opacity: 0.65 !important; }
/* Text above the color fill */
.tl-ev-body {
  position: relative !important;
  z-index: 1 !important;
  flex: unset !important;
  padding: 4px 7px !important;
  display: block !important;
}
.tl-ev-content, .tl-ev-inner {
  position: relative !important;
  z-index: 1 !important;
  flex: unset !important;
  padding: 4px 7px !important;
}
/* White text on colored blocks */
.tl-ev-name {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.22) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  margin-bottom: 1px !important;
}
.tl-ev-time, .tl-ev-sub {
  color: rgba(255,255,255,0.78) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
}
.tl-ev.ev-done, .tl-ev.done {
  opacity: 0.42 !important;
}
.tl-ev.done .tl-ev-name, .tl-ev.ev-done .tl-ev-name {
  text-decoration: line-through !important;
}
/* Anchor events: use event color for text (already has colored text inline) */
.tl-ev.anchor-ev .tl-ev-name { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; }

/* ── v2.5.4: BOTTOM NAV FIX — correct selectors (.bn-item not .bottom-nav-item) ── */
/* Container */
.bn-items {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
  align-items: stretch !important;
}
/* Each nav button: full square tile */
.bn-item {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
/* Icon wrapper becomes the square tile */
.bn-icon {
  background: var(--c-surface) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 14px !important;
  width: 100% !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c-text-2) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.bn-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--c-text-2) !important;
}
/* Label below tile */
.bn-label {
  color: var(--c-text-2) !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
/* Active state */
.bn-item.active .bn-icon {
  background: var(--c-brand-soft) !important;
  border-color: rgba(75,123,245,0.3) !important;
  color: var(--c-brand) !important;
  box-shadow: none !important;
}
.bn-item.active .bn-icon svg { stroke: var(--c-brand) !important; }
.bn-item.active .bn-label { color: var(--c-brand) !important; }
/* Press feedback */
.bn-item:active .bn-icon { transform: scale(0.93) !important; }

/* Dark mode overrides */
[data-theme="dark"] .bn-icon {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: rgba(255,255,255,0.45) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .bn-icon svg { stroke: rgba(255,255,255,0.45) !important; }
[data-theme="dark"] .bn-label { color: rgba(255,255,255,0.4) !important; }
[data-theme="dark"] .bn-item.active .bn-icon {
  background: rgba(107,147,248,0.15) !important;
  border-color: rgba(107,147,248,0.25) !important;
  color: var(--c-brand) !important;
}
[data-theme="dark"] .bn-item.active .bn-icon svg { stroke: var(--c-brand) !important; }
[data-theme="dark"] .bn-item.active .bn-label { color: var(--c-brand) !important; }

/* ═══════════════════════════════════════════════════════════════════
   STUDYFLOW v3 — PREMIUM REDESIGN
   Fantastical · Things 3 · Linear · Duolingo design language
   ═══════════════════════════════════════════════════════════════════ */

/* 1 ── CLEAN BODY: remove gradient noise, solid background */
body {
  background: #F5F6FA !important;
  background-image: none !important;
}
[data-theme="dark"] body {
  background: #111827 !important;
  background-image: none !important;
}

/* 2 ── PAGE HEADERS: Large, bold, premium — biggest visual change */
.page-header {
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
  border-bottom: 1.5px solid #EAECF0 !important;
}
[data-theme="dark"] .page-header { border-bottom-color: #1F2937 !important; }
.page-title {
  font-size: 2.1rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.6px !important;
  color: #111827 !important;
  line-height: 1.1 !important;
}
[data-theme="dark"] .page-title { color: #F9FAFB !important; }
.page-sub {
  font-size: 0.83rem !important;
  color: #6B7280 !important;
  margin-top: 5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* 3 ── STAT CARDS: Color-tinted, clean — Duolingo/Things 3 style */
.stat-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 18px !important;
  padding: 18px 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
}
.stat-card::before { display: none !important; }
.stat-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.09) !important; }
.stat-card.blue  { background: #EFF6FF !important; border-color: #BFDBFE !important; }
.stat-card.green { background: #F0FDF4 !important; border-color: #BBF7D0 !important; }
.stat-card.red   { background: #FFF1F2 !important; border-color: #FECDD3 !important; }
.stat-card.yellow{ background: #FFFBEB !important; border-color: #FDE68A !important; }
.stat-num {
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -1.5px !important;
  margin-bottom: 6px !important;
}
.stat-label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #6B7280 !important;
  letter-spacing: 0.2px !important;
}
.stat-card.blue  .stat-num { color: #2563EB !important; }
.stat-card.green .stat-num { color: #059669 !important; }
.stat-card.red   .stat-num { color: #E11D48 !important; }
.stat-card.yellow .stat-num { color: #D97706 !important; }
[data-theme="dark"] .stat-card { background: #1F2937 !important; border-color: #374151 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
[data-theme="dark"] .stat-card.blue  { background: rgba(37,99,235,0.12)  !important; border-color: rgba(37,99,235,0.3) !important; }
[data-theme="dark"] .stat-card.green { background: rgba(5,150,105,0.12)  !important; border-color: rgba(5,150,105,0.3) !important; }
[data-theme="dark"] .stat-card.red   { background: rgba(225,29,72,0.12)  !important; border-color: rgba(225,29,72,0.3) !important; }
[data-theme="dark"] .stat-card.yellow{ background: rgba(217,119,6,0.12)  !important; border-color: rgba(217,119,6,0.3) !important; }

/* 4 ── SECTION BOXES: Clean white cards */
.section-box {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
  margin-bottom: 14px !important;
}
[data-theme="dark"] .section-box { background: #1F2937 !important; border-color: #374151 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
.section-title-sm {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #9CA3AF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.9px !important;
}
[data-theme="dark"] .section-title-sm { color: #6B7280 !important; }

/* Focus entry card & glass box — same clean card style */
.glass-box, .focus-entry-card {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
}
[data-theme="dark"] .glass-box,
[data-theme="dark"] .focus-entry-card {
  background: #1F2937 !important;
  border-color: #374151 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
.focus-entry-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -0.2px !important;
}
.focus-entry-sub { font-size: 0.78rem !important; color: #6B7280 !important; }
[data-theme="dark"] .focus-entry-title { color: #F9FAFB !important; }

/* 5 ── BUTTONS */
.btn-sm {
  background: #EEF2FF !important;
  color: #4B7BF5 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  transition: background 0.14s, color 0.14s !important;
}
.btn-sm:hover { background: #4B7BF5 !important; color: #fff !important; }
[data-theme="dark"] .btn-sm { background: rgba(75,123,245,0.14) !important; color: #6B8BFF !important; }
[data-theme="dark"] .btn-sm:hover { background: #4B7BF5 !important; color: #fff !important; }

/* Pomodoro duration pills */
.pomo-dur-btn {
  flex: 1 !important;
  background: #F3F4F6 !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 12px !important;
  color: #6B7280 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  padding: 10px 4px !important;
  cursor: pointer !important;
  font-family: var(--sans) !important;
  transition: all 0.12s !important;
  letter-spacing: -0.02em !important;
}
.pomo-dur-btn.active, .pomo-dur-btn:hover {
  background: #EEF2FF !important;
  border-color: rgba(75,123,245,0.5) !important;
  color: #4B7BF5 !important;
}
[data-theme="dark"] .pomo-dur-btn { background: #374151 !important; border-color: #4B5563 !important; color: #9CA3AF !important; }
[data-theme="dark"] .pomo-dur-btn.active, [data-theme="dark"] .pomo-dur-btn:hover { background: rgba(75,123,245,0.15) !important; border-color: rgba(75,123,245,0.4) !important; color: #6B8BFF !important; }

/* Focus start CTA — Duolingo raised button */
.btn-focus-start {
  background: #4B7BF5 !important;
  border: none !important;
  border-bottom: 4px solid #2C5CE0 !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px !important;
  width: 100% !important;
  padding: 15px !important;
  cursor: pointer !important;
  font-family: var(--sans) !important;
  transition: transform 0.1s, border-bottom-width 0.1s !important;
  box-shadow: none !important;
}
.btn-focus-start:hover { background: #3A64D4 !important; }
.btn-focus-start:active { transform: translateY(2px) !important; border-bottom-width: 2px !important; }

/* 6 ── BOTTOM NAV (explicit pixel values, no CSS vars that might not resolve) */
.bottom-nav {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1.5px solid #E5E7EB !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08) !important;
  padding: 10px 12px !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  display: none !important;
}
@media (max-width: 768px) { .bottom-nav { display: flex; } }
[data-theme="dark"] .bottom-nav {
  background: rgba(17,24,39,0.97) !important;
  border-top-color: #374151 !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.5) !important;
}
.bn-items { display: flex !important; gap: 8px !important; width: 100% !important; align-items: stretch !important; }
.bn-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  min-width: 0 !important;
}
.bn-icon {
  width: 100% !important;
  height: 42px !important;
  background: #F3F4F6 !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6B7280 !important;
  transition: background 0.14s, border-color 0.14s, color 0.14s !important;
  flex-shrink: 0 !important;
}
.bn-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #6B7280 !important;
  fill: none !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
}
.bn-label {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: #9CA3AF !important;
  font-family: 'Heebo', 'Inter', sans-serif !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.bn-item.active .bn-icon { background: #EEF2FF !important; border-color: rgba(75,123,245,0.4) !important; }
.bn-item.active .bn-icon svg { stroke: #4B7BF5 !important; }
.bn-item.active .bn-label { color: #4B7BF5 !important; }
.bn-item:active .bn-icon { transform: scale(0.9) !important; transition: transform 0.08s !important; }
[data-theme="dark"] .bn-icon { background: #1F2937 !important; border-color: #374151 !important; }
[data-theme="dark"] .bn-icon svg { stroke: #6B7280 !important; }
[data-theme="dark"] .bn-label { color: #6B7280 !important; }
[data-theme="dark"] .bn-item.active .bn-icon { background: rgba(75,123,245,0.18) !important; border-color: rgba(107,139,255,0.4) !important; }
[data-theme="dark"] .bn-item.active .bn-icon svg { stroke: #6B8BFF !important; }
[data-theme="dark"] .bn-item.active .bn-label { color: #6B8BFF !important; }

/* 7 ── SCHEDULE: Day strip calendar */
.day-strip {
  background: transparent !important;
  border-bottom: 1.5px solid #EAECF0 !important;
  margin: -1.25rem -1.25rem 16px !important;
  padding: 8px 12px 10px !important;
}
[data-theme="dark"] .day-strip { border-bottom-color: #374151 !important; }
.day-chip { border-radius: 12px !important; padding: 6px 3px !important; gap: 4px !important; }
.day-chip-name { font-size: 0.57rem !important; font-weight: 800 !important; color: #9CA3AF !important; letter-spacing: 0.4px !important; }
.day-chip-num {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  color: #374151 !important;
}
[data-theme="dark"] .day-chip-num { color: #9CA3AF !important; }
.day-chip.is-today .day-chip-num {
  background: #4B7BF5 !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(75,123,245,0.45) !important;
}
.day-chip.selected:not(.is-today) .day-chip-num {
  background: #EEF2FF !important;
  color: #4B7BF5 !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
}

/* 8 ── TIMELINE CONTAINER */
.timeline-outer { border: 1.5px solid #E5E7EB !important; border-radius: 16px !important; overflow: hidden !important; }
[data-theme="dark"] .timeline-outer { border-color: #374151 !important; }
.timeline-labels { background: #FAFAFA !important; border-left: 1.5px solid #F3F4F6 !important; }
[data-theme="dark"] .timeline-labels { background: #111827 !important; border-left-color: #1F2937 !important; }
.tl-hour-label { font-size: 0.52rem !important; font-weight: 700 !important; color: #9CA3AF !important; }
.timeline-events-area { background: #FFFFFF !important; }
[data-theme="dark"] .timeline-events-area { background: #1F2937 !important; }
.tl-grid-line { background: #F3F4F6 !important; }
[data-theme="dark"] .tl-grid-line { background: rgba(255,255,255,0.05) !important; }
.tl-day-header { border-bottom-color: #EAECF0 !important; }
[data-theme="dark"] .tl-day-header { border-bottom-color: #374151 !important; }
.tl-day-title { font-size: 1.1rem !important; font-weight: 900 !important; letter-spacing: -0.2px !important; }

/* 9 ── GRID + MAIN CONTENT SPACING */
.cards-grid { gap: 10px !important; margin-bottom: 14px !important; }
@media (max-width: 768px) {
  .page-title { font-size: 2rem !important; }
  .main-content { padding: 20px 16px !important; overflow-x: hidden !important; }
  .main-content { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* 10 ── STREAK BADGE in header */
.streak-badge-top {
  background: #FFF7ED !important;
  border: 1.5px solid #FED7AA !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
}
.streak-num { color: #EA580C !important; font-size: 1.3rem !important; font-weight: 900 !important; line-height: 1 !important; }
.streak-lbl { color: #9CA3AF !important; font-size: 0.6rem !important; font-weight: 700 !important; }
[data-theme="dark"] .streak-badge-top { background: rgba(234,88,12,0.12) !important; border-color: rgba(234,88,12,0.3) !important; }

/* 11 ── SECTION HEADS in schedule/planner */
.tl-day-count-badge {
  background: #EEF2FF !important;
  color: #4B7BF5 !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
  padding: 3px 10px !important;
}
.tl-day-exam-badge {
  background: #F5F0FF !important;
  color: #7C3AED !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
  padding: 3px 10px !important;
}

/* 12 ── SECTION ACTION BAR (schedule) */
.schedule-action-bar {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  align-items: center !important;
}
.schedule-action-bar .btn-sm {
  padding: 8px 16px !important;
  font-size: 0.82rem !important;
  border-radius: 12px !important;
}

/* 13 ── MODAL CARDS */
.anc-card, .cam-card, .rem-card, .settings-panel {
  border-radius: 20px !important;
  border: 1.5px solid #E5E7EB !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.14) !important;
}
[data-theme="dark"] .anc-card, [data-theme="dark"] .cam-card,
[data-theme="dark"] .rem-card, [data-theme="dark"] .settings-panel {
  background: #1F2937 !important;
  border-color: #374151 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
}

/* 14 ── INPUTS — cleaner style */
input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select {
  border-radius: 12px !important;
  border: 1.5px solid #E5E7EB !important;
  background: #F9FAFB !important;
  color: #111827 !important;
  font-size: 0.92rem !important;
  padding: 10px 14px !important;
}
input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus, select:focus {
  border-color: #4B7BF5 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(75,123,245,0.1) !important;
}
[data-theme="dark"] input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] textarea, [data-theme="dark"] select {
  background: #111827 !important;
  border-color: #374151 !important;
  color: #F9FAFB !important;
}
[data-theme="dark"] input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
[data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus {
  border-color: #4B7BF5 !important;
  background: #1F2937 !important;
  box-shadow: 0 0 0 3px rgba(75,123,245,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   v3.1 — PROGRESS PAGE: DUOLINGO STYLE HERO CARD
   ═══════════════════════════════════════════════════════════════ */

/* Hero card: white card, no gradient */
.sq-hero-card {
  background: #FFFFFF !important;
  border: 2px solid #E5E7EB !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
  color: #111827 !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 18px !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
[data-theme="dark"] .sq-hero-card {
  background: #1F2937 !important;
  border-color: #374151 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* Ring: sits on left side */
.sq-ring-wrap {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}
.sq-ring-svg { width: 110px !important; height: 110px !important; }

/* XP number inside ring — Duolingo green */
.sq-xp-num {
  color: #58CC02 !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
}
.sq-xp-lbl {
  color: #6B7280 !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.sq-level-emoji, #xp-level-emoji { display: none !important; }

/* Info section: fills remaining space */
.sq-hero-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

/* Level name: show it, normal dark text */
.sq-hero-level-name {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #111827 !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 2px !important;
}
[data-theme="dark"] .sq-hero-level-name { color: #F9FAFB !important; }

/* Progress bar — Duolingo signature green */
.sq-xp-bar-wrap {
  background: #E5E7EB !important;
  border-radius: 99px !important;
  height: 12px !important;
  overflow: hidden !important;
  width: 100% !important;
}
.sq-xp-bar {
  background: linear-gradient(90deg, #58CC02, #90E026) !important;
  border-radius: 99px !important;
  height: 100% !important;
  min-width: 4px !important;
  box-shadow: none !important;
}
[data-theme="dark"] .sq-xp-bar-wrap { background: #374151 !important; }

.sq-xp-caption {
  color: #9CA3AF !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Streak chip — Duolingo orange */
.sq-streak-chip {
  background: #FFF7ED !important;
  border: 2px solid #FED7AA !important;
  border-radius: 12px !important;
  padding: 7px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  align-self: flex-start !important;
}
.sq-streak-num {
  color: #EA580C !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}
.sq-streak-lbl {
  color: #EA580C !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.sq-fire { font-size: 1rem !important; }
[data-theme="dark"] .sq-streak-chip {
  background: rgba(234,88,12,0.12) !important;
  border-color: rgba(234,88,12,0.3) !important;
}

/* Stats row: 2×2 grid of clean cards */
.sq-stats-row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.sq-stat-pill {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 18px !important;
  padding: 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
  backdrop-filter: none !important;
}
.sq-stat-pill.sq-stat-gold {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
}
.sq-stat-n {
  font-size: 1.9rem !important;
  font-weight: 900 !important;
  color: #111827 !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
}
.sq-stat-gold .sq-stat-n { color: #D97706 !important; }
.sq-stat-l {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #6B7280 !important;
  text-align: center !important;
}
[data-theme="dark"] .sq-stat-pill { background: #1F2937 !important; border-color: #374151 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
[data-theme="dark"] .sq-stat-n { color: #F9FAFB !important; }
[data-theme="dark"] .sq-stat-gold { background: rgba(217,119,6,0.12) !important; border-color: rgba(217,119,6,0.3) !important; }

/* ═══════════════════════════════════════════════════════════════
   v3.2 — TIMELINE EVENTS: Duolingo 3D depth + bolder text
   ═══════════════════════════════════════════════════════════════ */

/* Give events Duolingo raised/3D feel */
.tl-ev {
  border-bottom: 3px solid rgba(0,0,0,0.18) !important;
  border-radius: 10px !important;
  min-height: 36px !important;
}
.tl-ev:active { transform: translateY(1px) !important; border-bottom-width: 1px !important; }

/* Text: bigger + stronger inside solid block */
.tl-ev-name {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.1px !important;
}
.tl-ev-time, .tl-ev-sub {
  font-size: 0.63rem !important;
  font-weight: 600 !important;
}

/* For very short events (< 30px tall), hide time label */
.tl-ev[style*="height: 1"] .tl-ev-time,
.tl-ev[style*="height: 2"] .tl-ev-time { display: none !important; }

/* Now-line: Duolingo red accent */
.tl-now-line { background: #FF4B4B !important; height: 2px !important; }
.tl-now-dot { background: #FF4B4B !important; box-shadow: 0 0 0 3px rgba(255,75,75,0.22) !important; }

/* ═══════════════════════════════════════════════════════════════
   v3.3 — TODAY PAGE: Duolingo-style task list items
   ═══════════════════════════════════════════════════════════════ */

/* Task rows in today-tasks-wrap */
.today-task-row, .tl-slot {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 14px !important;
  margin-bottom: 8px !important;
  padding: 10px 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
[data-theme="dark"] .today-task-row, [data-theme="dark"] .tl-slot {
  background: #1F2937 !important;
  border-color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════
   v3.4 — SCHEDULE PAGE: Fantastical/image2 exact style
   Targeting REAL classes: .date-slide-item, .sch-container, etc.
   ═══════════════════════════════════════════════════════════════ */

/* --- Schedule container: open/flat, no heavy card --- */
.sch-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
[data-theme="dark"] .sch-container { background: transparent !important; border: none !important; }

/* --- Schedule header --- */
.sch-page-hdr {
  margin-bottom: 10px !important;
  padding-bottom: 14px !important;
  border-bottom: 1.5px solid #EAECF0 !important;
}
[data-theme="dark"] .sch-page-hdr { border-bottom-color: #374151 !important; }
.sch-week-nav {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .sch-week-nav { background: #1F2937 !important; border-color: #374151 !important; }
.sch-week-label { font-size: 0.85rem !important; font-weight: 800 !important; color: #111827 !important; }
[data-theme="dark"] .sch-week-label { color: #F9FAFB !important; }
.sch-nav-btn { color: #6B7280 !important; }
.sch-nav-btn:hover { background: #EEF2FF !important; color: #4B7BF5 !important; }

/* --- Date slider: Fantastical style --- */
.horizontal-date-slider {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
  padding: 10px 0 12px !important;
  border-bottom: 1.5px solid #EAECF0 !important;
  margin-bottom: 12px !important;
  background: transparent !important;
  overflow: visible !important;
}
[data-theme="dark"] .horizontal-date-slider { border-bottom-color: #374151 !important; }

.date-slide-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 2px !important;
  border-radius: 12px !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background 0.12s !important;
}
.date-slide-item:hover { transform: none !important; background: #F3F4F6 !important; }
.date-slide-item.active { transform: none !important; box-shadow: none !important; background: transparent !important; }
[data-theme="dark"] .date-slide-item:hover { background: #1F2937 !important; }

.date-slide-day {
  font-size: 0.57rem !important;
  font-weight: 800 !important;
  color: #9CA3AF !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.date-slide-item.active .date-slide-day { color: #4B7BF5 !important; }

.date-slide-date {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #374151 !important;
  background: transparent !important;
  transition: background 0.15s, color 0.15s !important;
}
[data-theme="dark"] .date-slide-date { color: #9CA3AF !important; }

/* Today: filled blue circle */
.date-slide-item.is-today .date-slide-date {
  background: #4B7BF5 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(75,123,245,0.45) !important;
  border-radius: 10px !important;
}
.date-slide-item.is-today .date-slide-day { color: #4B7BF5 !important; }

/* Selected (non-today): lighter tint */
.date-slide-item.active:not(.is-today) .date-slide-date {
  background: #EEF2FF !important;
  color: #4B7BF5 !important;
  box-shadow: none !important;
}
.date-slide-item.is-today.active .date-slide-date {
  background: #4B7BF5 !important;
  color: #FFFFFF !important;
}
[data-theme="dark"] .date-slide-item.active:not(.is-today) .date-slide-date {
  background: rgba(75,123,245,0.18) !important;
  color: #6B8BFF !important;
}

/* Event dots below dates */
.day-chip-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #4B7BF5 !important;
  margin-top: 0 !important;
}
.day-chip-dot.empty { opacity: 0 !important; }
.day-chip-dot.exam { background: #8B5CF6 !important; }
.date-slide-item.active .day-chip-dot { background: #4B7BF5 !important; opacity: 1 !important; }

/* --- Action buttons: Duolingo raised pills --- */
.sch-act-btn {
  border-radius: 12px !important;
  border: 1.5px solid transparent !important;
  border-bottom-width: 3px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 8px 12px !important;
  gap: 5px !important;
  transition: transform 0.1s, border-bottom-width 0.1s !important;
  flex: 1 !important;
  justify-content: center !important;
}
.sch-act-btn:hover { transform: none !important; filter: none !important; background: inherit !important; }
.sch-act-btn:active { transform: translateY(1px) !important; border-bottom-width: 1px !important; }
.sch-act-green {
  background: #F0FDF4 !important;
  color: #059669 !important;
  border-color: #BBF7D0 !important;
  border-bottom-color: #6EE7B7 !important;
}
.sch-act-purple {
  background: #F5F0FF !important;
  color: #7C3AED !important;
  border-color: #DDD6FE !important;
  border-bottom-color: #C4B5FD !important;
}
.sch-act-blue {
  background: #EEF2FF !important;
  color: #4B7BF5 !important;
  border-color: #C7D2FE !important;
  border-bottom-color: #A5B4FC !important;
}
[data-theme="dark"] .sch-act-green { background: rgba(5,150,105,0.12) !important; color: #34D399 !important; border-color: rgba(5,150,105,0.3) !important; border-bottom-color: rgba(5,150,105,0.2) !important; }
[data-theme="dark"] .sch-act-purple { background: rgba(124,58,237,0.12) !important; color: #A78BFA !important; border-color: rgba(124,58,237,0.3) !important; border-bottom-color: rgba(124,58,237,0.2) !important; }
[data-theme="dark"] .sch-act-blue { background: rgba(75,123,245,0.12) !important; color: #6B8BFF !important; border-color: rgba(75,123,245,0.3) !important; border-bottom-color: rgba(75,123,245,0.2) !important; }

/* --- Day header in timeline view --- */
.tl-day-header {
  padding: 14px 16px 12px !important;
  border-bottom: 1.5px solid #F3F4F6 !important;
  margin-bottom: 0 !important;
}
[data-theme="dark"] .tl-day-header { border-bottom-color: #374151 !important; }
.tl-day-title {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #111827 !important;
  letter-spacing: -0.3px !important;
}
[data-theme="dark"] .tl-day-title { color: #F9FAFB !important; }
.tl-day-meta { font-size: 0.75rem !important; color: #9CA3AF !important; font-weight: 600 !important; margin-top: 2px !important; }

/* Timeline outer: clean card */
.timeline-outer {
  border: 1.5px solid #EAECF0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}
[data-theme="dark"] .timeline-outer { border-color: #374151 !important; }
.timeline-labels { background: #FAFAFA !important; border-left: 1.5px solid #F0F0F0 !important; }
[data-theme="dark"] .timeline-labels { background: #111827 !important; border-left-color: #1F2937 !important; }
.tl-hour-label { font-size: 0.52rem !important; font-weight: 700 !important; color: #9CA3AF !important; }
.timeline-events-area { background: #FFFFFF !important; }
[data-theme="dark"] .timeline-events-area { background: #1F2937 !important; }
.tl-grid-line { background: #F3F4F6 !important; opacity: 1 !important; }
[data-theme="dark"] .tl-grid-line { background: rgba(255,255,255,0.05) !important; }

/* ═══════════════════════════════════════════════════════════════
   v3.5 — PROGRESS HERO: Better Duolingo layout (stacked, not row)
   ═══════════════════════════════════════════════════════════════ */

/* Stacked layout for narrow mobile */
.sq-hero-card {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 24px 20px 20px !important;
  gap: 12px !important;
}
.sq-ring-wrap { align-items: center !important; }
.sq-ring-svg { width: 120px !important; height: 120px !important; }
.sq-hero-info {
  width: 100% !important;
  align-items: center !important;
  text-align: center !important;
}
.sq-streak-chip { align-self: center !important; }

/* XP number: bigger, Duolingo green */
.sq-xp-num { font-size: 2rem !important; font-weight: 900 !important; color: #58CC02 !important; }
.sq-xp-lbl { font-size: 0.7rem !important; letter-spacing: 2px !important; }

/* Level name below ring */
.sq-hero-level-name {
  display: block !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: #111827 !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}
[data-theme="dark"] .sq-hero-level-name { color: #F9FAFB !important; }

/* Progress bar */
.sq-xp-bar-wrap { width: 100% !important; height: 14px !important; border-radius: 99px !important; background: #E5E7EB !important; }
.sq-xp-bar { background: linear-gradient(90deg, #58CC02, #90E026) !important; border-radius: 99px !important; height: 100% !important; box-shadow: 0 2px 8px rgba(88,204,2,0.3) !important; }
[data-theme="dark"] .sq-xp-bar-wrap { background: #374151 !important; }

/* Stats: keep 2×2 grid */
.sq-stats-row {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 400px) {
  .sq-stats-row { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v4.0 — WORLD-CLASS TASK CARDS (Structured / Things 3 pattern)
   ═══════════════════════════════════════════════════════════════ */

.today-timeline {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 2px !important;
}

/* Base card */
.tl-slot {
  display: flex !important;
  align-items: stretch !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  min-height: 64px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.15s, transform 0.1s !important;
  cursor: pointer !important;
  animation: slideInCard 0.35s cubic-bezier(0.16,1,0.3,1) both !important;
  position: static !important;
}
.tl-slot:active { transform: scale(0.985) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; }

/* State variants */
.tl-slot.done  { opacity: 0.55 !important; background: #F9FAFB !important; }
.tl-slot.missed { opacity: 0.45 !important; background: #FFF8F8 !important; }

/* Stagger animations */
.tl-slot:nth-child(1) { animation-delay: 0.02s !important; }
.tl-slot:nth-child(2) { animation-delay: 0.05s !important; }
.tl-slot:nth-child(3) { animation-delay: 0.08s !important; }
.tl-slot:nth-child(4) { animation-delay: 0.11s !important; }
.tl-slot:nth-child(5) { animation-delay: 0.14s !important; }
.tl-slot:nth-child(6) { animation-delay: 0.17s !important; }
.tl-slot:nth-child(7) { animation-delay: 0.20s !important; }
.tl-slot:nth-child(8) { animation-delay: 0.23s !important; }

/* Color bar accent (left edge in RTL = right side visually) */
.tl-bar {
  width: 5px !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
}

/* Time column */
.tl-time {
  width: 44px !important;
  padding: 12px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
}
.tl-time-h {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.3px !important;
}
.tl-time-m {
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  color: #9CA3AF !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Task body */
.tl-body {
  flex: 1 !important;
  padding: 11px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  cursor: pointer !important;
}
.tl-title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.tl-slot.done .tl-title { text-decoration: line-through !important; color: #9CA3AF !important; }

/* Meta row (tags, duration, status) */
.tl-meta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.tl-course-tag {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  background: #EEF2FF !important;
  color: #4B7BF5 !important;
  white-space: nowrap !important;
  max-width: 90px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.2px !important;
}
.tl-dur {
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  color: #9CA3AF !important;
  white-space: nowrap !important;
}
.tl-pri {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.tl-status { font-size: 0.75rem !important; white-space: nowrap !important; }
.tl-notes {
  font-size: 0.7rem !important;
  color: #9CA3AF !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

/* Action buttons column */
.tl-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 8px 9px !important;
  flex-shrink: 0 !important;
}
.tl-btn {
  border: none !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

/* Done button — Duolingo green circle */
.tl-btn-done {
  width: 38px !important;
  height: 38px !important;
  background: #F0FDF4 !important;
  color: #059669 !important;
  border-radius: 50% !important;
  font-size: 1rem !important;
  border: 2px solid #BBF7D0 !important;
  box-shadow: 0 3px 0 #A7F3D0 !important;
}
.tl-btn-done:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 #A7F3D0 !important; }
.tl-slot.done .tl-btn-done {
  background: #059669 !important;
  color: #fff !important;
  border-color: #047857 !important;
  box-shadow: 0 3px 0 #065F46 !important;
}
.tl-slot.done .tl-btn-done:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 #065F46 !important; }

/* Menu button — subtle pill */
.tl-btn-menu {
  height: 22px !important;
  padding: 0 8px !important;
  width: auto !important;
  background: #F3F4F6 !important;
  color: #6B7280 !important;
  border-radius: 8px !important;
  font-size: 0.58rem !important;
  border: 1px solid #E5E7EB !important;
}

/* Empty state */
.anchor-slot {
  background: #FAFAFA !important;
  border: 1.5px dashed #E5E7EB !important;
  border-radius: 16px !important;
  padding: 24px !important;
  text-align: center !important;
  color: #9CA3AF !important;
  font-size: 0.875rem !important;
  box-shadow: none !important;
}

/* Dark mode — task cards */
[data-theme="dark"] .tl-slot { background: #1F2937 !important; border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] .tl-slot.done  { background: #111827 !important; }
[data-theme="dark"] .tl-slot.missed { background: #1A1010 !important; }
[data-theme="dark"] .tl-title { color: #F9FAFB !important; }
[data-theme="dark"] .tl-slot.done .tl-title { color: #6B7280 !important; }
[data-theme="dark"] .tl-time-h { color: #D1D5DB !important; }
[data-theme="dark"] .tl-course-tag { background: #1E1B4B !important; color: #818CF8 !important; }
[data-theme="dark"] .tl-btn-done { background: #064E3B !important; border-color: #065F46 !important; box-shadow: 0 3px 0 #022C22 !important; }
[data-theme="dark"] .tl-slot.done .tl-btn-done { background: #059669 !important; }
[data-theme="dark"] .tl-btn-menu { background: #374151 !important; color: #9CA3AF !important; border-color: #4B5563 !important; }
[data-theme="dark"] .anchor-slot { background: #111827 !important; border-color: #374151 !important; }

/* ═══════════════════════════════════════════════════════════════
   v4.0 — BADGE GRID: Duolingo achievement trophies
   ═══════════════════════════════════════════════════════════════ */

.sq-badges-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  padding: 4px !important;
}
.sq-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
}
.sq-badge-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.65rem !important;
  background: #F3F4F6 !important;
  border: 2px solid #E5E7EB !important;
  box-shadow: 0 4px 0 #D1D5DB !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
}
.sq-badge.earned .sq-badge-icon {
  background: linear-gradient(135deg, #FFFDE7 0%, #FFE082 100%) !important;
  border-color: #FFC107 !important;
  box-shadow: 0 4px 0 #FF8F00, 0 6px 16px rgba(255,193,7,0.25) !important;
}
.sq-badge.earned .sq-badge-icon:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 0 #FF8F00, 0 8px 20px rgba(255,193,7,0.3) !important; }
.sq-badge-name {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: #9CA3AF !important;
  text-align: center !important;
  line-height: 1.2 !important;
  max-width: 64px !important;
}
.sq-badge.earned .sq-badge-name { color: #92400E !important; }

[data-theme="dark"] .sq-badge-icon { background: #1F2937 !important; border-color: #374151 !important; box-shadow: 0 4px 0 #111827 !important; }
[data-theme="dark"] .sq-badge.earned .sq-badge-icon { background: linear-gradient(135deg, #78350F, #92400E) !important; border-color: #D97706 !important; box-shadow: 0 4px 0 #451A03 !important; }
[data-theme="dark"] .sq-badge-name { color: #6B7280 !important; }
[data-theme="dark"] .sq-badge.earned .sq-badge-name { color: #FCD34D !important; }

/* ═══════════════════════════════════════════════════════════════
   v4.0 — STAT CARDS: 3D Duolingo press effect
   ═══════════════════════════════════════════════════════════════ */

.stat-card {
  border-bottom: 3px solid rgba(0,0,0,0.10) !important;
  transition: transform 0.1s, border-bottom-width 0.1s !important;
}
.stat-card:active { transform: translateY(2px) !important; border-bottom-width: 1px !important; }

/* ═══════════════════════════════════════════════════════════════
   v4.0 — ENTRY ANIMATION KEYFRAME
   ═══════════════════════════════════════════════════════════════ */

@keyframes slideInCard {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ── FINAL OVERRIDES (highest priority — always last in file) ── */

/* Plant emoji: hide level name since JS bakes emoji into same text node */
.sq-hero-level-name,
#tree-next,
#xp-level-emoji,
.sq-level-emoji { display: none !important; }

/* Remove body gradient noise — clean solid background */
body { background-image: none !important; }
[data-theme="dark"] body { background-image: none !important; }

/* Ensure page title always shows large on mobile */
@media (max-width: 768px) {
  .page-title { font-size: 2rem !important; font-weight: 900 !important; }
}