/* ── MathBridge style.css ─────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}

/* ── CSS Variables: Forest (default) ──────────────────────────────────────── */
:root{
  --bg1:#f6f9fc; --bg2:#eef2f7; --card:#fff; --sidebar:#f8fafd;
  --border:#dce5ec; --border2:#e2e8f0;
  --primary:#2c7a4d; --primary-dark:#1f5e3a; --primary-light:#e6f3ec;
  --primary-glow:rgba(44,122,77,.2);
  --accent:#cbdde9; --accent2:#1f3b4c;
  --text:#1a2c3e; --text2:#2c5a6e; --text3:#3e6a47;
  --heading-grad:linear-gradient(135deg,#1f5e3a,#2b8c5e);
  --pulse-bg:#eef3fa; --rec-bg:#e1f0e8;
  --hint-bg:#fff6e5; --hint-color:#aa6f2c;
  --success-bg:#dff0e4; --success-color:#155f2c;
  --error-bg:#ffe9e9; --error-border:#c7362b;
  --q-shadow:0 8px 20px rgba(0,0,0,.05);
  --input-border:#cbdbe0;
  --btn-sec:#e9edf2; --btn-sec-text:#1e4663; --btn-sec-hover:#dce3ec;
  --btn-warn:#fff1e0; --btn-warn-text:#b45f2b; --btn-warn-hover:#ffe2c4;
}

/* ── Ocean theme ───────────────────────────────────────────────────────────── */
body.ocean{
  --bg1:#f0f6ff; --bg2:#e6f0fb; --sidebar:#f0f7ff;
  --border:#c8d8ee; --border2:#d0e2f5;
  --primary:#1a6fa8; --primary-dark:#114e7a; --primary-light:#ddeeff;
  --primary-glow:rgba(26,111,168,.2);
  --accent:#b8d4ee; --accent2:#0f2d48;
  --text:#0e2236; --text2:#1a4870; --text3:#1a5580;
  --heading-grad:linear-gradient(135deg,#114e7a,#1e8fc0);
  --pulse-bg:#e8f2fc; --rec-bg:#d6ecfa;
  --hint-bg:#fff8e8; --hint-color:#a07020;
  --success-bg:#d8f0e0; --success-color:#0d5228;
  --error-bg:#ffe8e8; --error-border:#c02828;
  --q-shadow:0 8px 20px rgba(26,111,168,.08);
  --input-border:#a8c8e8;
  --btn-sec:#ddeeff; --btn-sec-text:#0e3a6e; --btn-sec-hover:#c8dff8;
  --btn-warn:#fff1e0; --btn-warn-text:#a05020; --btn-warn-hover:#ffe0c0;
}

body{
  background:linear-gradient(145deg,var(--bg1),var(--bg2));
  font-family:'Segoe UI','Roboto',system-ui,sans-serif;
  padding:1.5rem; color:var(--text); transition:background .3s;
  min-height:100vh;
}

/* ── Auth screen ───────────────────────────────────────────────────────────── */
.auth-screen{
  display:flex; align-items:center; justify-content:center; min-height:90vh;
}
.auth-card{
  background:#fff; border-radius:1.8rem; padding:2.2rem 2.4rem;
  max-width:420px; width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.10); text-align:center;
}
.auth-card h1{
  font-size:2rem; background:var(--heading-grad);
  background-clip:text; -webkit-background-clip:text; color:transparent;
  margin-bottom:.3rem;
}
.auth-sub{ color:var(--text2); font-size:.9rem; margin-bottom:1.4rem; }
.auth-tabs{ display:flex; gap:.5rem; margin-bottom:1.2rem; }
.auth-tab{
  flex:1; padding:.55rem; border-radius:1.5rem; border:2px solid var(--border2);
  background:#fff; color:var(--text2); font-weight:700; font-size:.9rem; cursor:pointer;
  transition:all .2s;
}
.auth-tab.active{
  background:var(--primary); color:#fff;
  border-color:var(--primary); box-shadow:0 4px 10px var(--primary-glow);
}
.auth-form{ display:flex; flex-direction:column; gap:.7rem; }
.auth-form input{
  padding:.75rem 1.1rem; font-size:.95rem;
  border:1.5px solid var(--input-border); border-radius:1.8rem;
  outline:none; font-family:inherit; transition:border .2s;
}
.auth-form input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.full-btn{ width:100%; padding:.7rem; font-size:1rem; margin-top:.3rem; border-radius:1.8rem; }
.auth-error{
  margin-top:.8rem; padding:.6rem 1rem; background:var(--error-bg);
  color:#c02020; border-radius:.8rem; font-size:.88rem; text-align:left;
}
.auth-loader{ margin-top:.7rem; color:var(--text2); font-size:.9rem; }

/* ── Common buttons ─────────────────────────────────────────────────────────── */
button{
  background:var(--card); border:none; padding:.45rem 1rem; border-radius:2rem;
  font-weight:600; font-size:.82rem; cursor:pointer;
  transition:all .2s; box-shadow:0 1px 2px rgba(0,0,0,.05);
  font-family:inherit; color:var(--text);
}
button.primary{ background:var(--primary); color:#fff; box-shadow:0 4px 8px var(--primary-glow); }
button.primary:hover{ background:var(--primary-dark); transform:translateY(-1px); }
button.secondary{ background:var(--btn-sec); color:var(--btn-sec-text); }
button.secondary:hover{ background:var(--btn-sec-hover); }
button.warning{ background:var(--btn-warn); color:var(--btn-warn-text); }
button.warning:hover{ background:var(--btn-warn-hover); }
button.ai-btn{ background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; }
button.ai-btn:hover{ background:linear-gradient(135deg,#6d28d9,#9333ea); }
button:active{ transform:scale(.97); }
button:disabled{ opacity:.6; pointer-events:none; }

/* ── App container ──────────────────────────────────────────────────────────── */
.app-container{
  max-width:1400px; margin:0 auto;
  background:rgba(255,255,255,.78); backdrop-filter:blur(2px);
  border-radius:2rem; box-shadow:0 20px 40px rgba(0,0,0,.08);
  overflow:hidden; border:1px solid rgba(255,255,255,.5);
}
.header{
  background:#ffffffcc; backdrop-filter:blur(8px);
  padding:1rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:.7rem;
}
h1{
  font-size:1.7rem; background:var(--heading-grad);
  background-clip:text; -webkit-background-clip:text; color:transparent;
}
.sub{ color:var(--text2); font-weight:500; font-size:.85rem; }
.header-buttons{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.welcome-user{
  font-size:.82rem; font-weight:700; color:var(--primary-dark);
  background:var(--primary-light); padding:.35rem .8rem; border-radius:2rem;
}

/* ── Dashboard grid ─────────────────────────────────────────────────────────── */
.dashboard{ display:grid; grid-template-columns:290px 1fr; min-height:70vh; }

/* Sidebar */
.topics-sidebar{
  background:var(--sidebar); border-right:1px solid var(--border2);
  padding:1.2rem .8rem 1.2rem 1rem; overflow-y:auto; max-height:78vh;
}
.topics-sidebar h3{ font-size:1rem; margin-bottom:.8rem; color:var(--text2); }
.topic-list{ display:flex; flex-direction:column; gap:.5rem; }
.topic-item{
  background:var(--card); border-radius:1rem; padding:.6rem .9rem;
  cursor:pointer; transition:all .15s; border:1px solid var(--border2);
}
.topic-item:hover{ box-shadow:0 3px 8px rgba(0,0,0,.07); transform:translateX(2px); }
.topic-item.active{
  background:var(--primary-light); border-left:4px solid var(--primary);
  border-color:var(--primary);
}
.topic-name{
  font-weight:700; font-size:.88rem; display:flex;
  justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px;
}
.topic-class{
  font-size:.65rem; background:var(--accent); padding:.15rem .5rem;
  border-radius:20px; color:var(--accent2);
}
.mastery-bar-container{
  margin-top:.4rem; height:5px; background:var(--border); border-radius:10px; overflow:hidden;
}
.mastery-fill{
  height:100%; width:0%; background:var(--primary);
  border-radius:10px; transition:width .4s ease;
}
.mastery-text{ font-size:.65rem; margin-top:.2rem; color:var(--text2); text-align:right; }
.pulse-summary{
  background:var(--pulse-bg); border-radius:1rem; padding:.7rem 1rem;
  display:flex; justify-content:space-between; align-items:center;
  margin-top:.8rem; font-size:.85rem;
}
.recommendation{
  background:var(--rec-bg); border-radius:.8rem; padding:.5rem .8rem;
  font-weight:500; margin-top:.6rem; font-size:.8rem; color:var(--text3);
}

/* Practice zone */
.practice-zone{
  background:#ffffffdd; padding:1.6rem 1.8rem;
  display:flex; flex-direction:column; gap:1.2rem;
}
.topic-header{ border-bottom:2px dashed var(--accent); padding-bottom:.5rem; }
.topic-header h2{ font-size:1.5rem; color:var(--primary-dark); }
.description{ color:var(--text3); margin-top:.3rem; font-size:.9rem; }

.question-card{
  background:var(--card); border-radius:1.5rem; padding:1.4rem;
  box-shadow:var(--q-shadow); border:1px solid var(--border2);
}
.question-text{ font-size:1.2rem; font-weight:500; margin-bottom:1rem; line-height:1.5; }
.input-area{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin:.8rem 0;
}
input[type=text]{
  flex:2; min-width:160px; padding:.7rem 1rem; font-size:1rem;
  border:1.5px solid var(--input-border); border-radius:2rem;
  font-family:monospace; font-weight:500; outline:none;
  background:var(--card); color:var(--text); transition:border .2s;
}
input[type=text]:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow);
}
.feedback{
  background:var(--pulse-bg); padding:.7rem 1.1rem; border-radius:1rem;
  font-size:.92rem; border-left:4px solid var(--primary);
}
.feedback.success{ background:var(--success-bg); color:var(--success-color); }
.feedback.error-feedback{ background:var(--error-bg); border-left-color:var(--error-border); }
.action-buttons{ display:flex; gap:10px; margin-top:.8rem; flex-wrap:wrap; }
.hint{
  background:var(--hint-bg); padding:.6rem .9rem; border-radius:.8rem;
  margin-top:.8rem; font-size:.88rem; color:var(--hint-color);
}
.settings-panel{
  background:var(--card); border-radius:1.2rem; padding:1rem 1.4rem;
  border:1px solid var(--border2); font-size:.88rem;
}
.settings-panel h4{ margin-bottom:.5rem; color:var(--text2); }
.settings-note{ color:var(--text2); font-size:.82rem; margin-bottom:.7rem; }
.settings-row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
input[type=password]{
  flex:2; min-width:180px; padding:.5rem .8rem; font-size:.88rem;
  border:1.5px solid var(--input-border); border-radius:1.5rem;
  outline:none; font-family:monospace; background:var(--card); color:var(--text);
}
input[type=password]:focus{ border-color:var(--primary); }
.api-status{ font-size:.78rem; margin-top:.4rem; color:var(--text2); }
.api-status.ok{ color:var(--success-color); }
.progress-note{ font-size:.78rem; text-align:right; color:var(--text2); }

/* ── Pulse modal ────────────────────────────────────────────────────────────── */
.modal-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:999;
  align-items:center; justify-content:center;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--card); border-radius:1.5rem; padding:1.8rem;
  max-width:620px; width:95%; max-height:85vh; overflow-y:auto;
  box-shadow:0 30px 60px rgba(0,0,0,.2); position:relative;
}
.modal h3{ font-size:1.3rem; margin-bottom:.6rem; color:var(--primary-dark); }
.modal-sub{ font-size:.85rem; color:var(--text2); margin-bottom:1rem; }
.modal-close-btn{
  position:absolute; top:1rem; right:1.2rem; font-size:1.1rem;
  cursor:pointer; background:none; border:none; color:var(--text2); font-weight:700;
}
.pulse-question{
  background:var(--sidebar); border-radius:1rem; padding:1rem; margin-bottom:.8rem;
}
.pulse-question p{ font-size:1rem; font-weight:500; margin-bottom:.6rem; }
.pulse-input-row{ display:flex; gap:.6rem; align-items:center; }
.pulse-input-row input[type=text]{
  flex:1; padding:.55rem .9rem;
  border:1.5px solid var(--input-border); border-radius:1.5rem; font-size:.92rem;
}
.pulse-result{
  font-size:.85rem; margin-top:.4rem; padding:.35rem .7rem;
  border-radius:.6rem; display:none;
}
.pulse-result.ok{ background:var(--success-bg); color:var(--success-color); }
.pulse-result.bad{ background:var(--error-bg); color:#c02020; }
.modal-footer{ display:flex; justify-content:flex-end; margin-top:1rem; gap:.6rem; }

footer{ text-align:center; font-size:.72rem; padding:.8rem; color:#6b8da8; }

@media(max-width:780px){
  .dashboard{ grid-template-columns:1fr; }
  .topics-sidebar{
    max-height:38vh; border-right:none; border-bottom:1px solid var(--border2);
  }
  body{ padding:.6rem; }
  .header{ padding:.8rem 1rem; }
}