/* EducaLab: clear working surfaces with a deep-blue / teal identity. */
:root {
  --ink:#162e49; --muted:#52667e; --line:#dce6ef; --line-strong:#b7c9db;
  --blue:#175bc4; --blue-dark:#114698; --pale:#edf4fc; --canvas:#f2f6fb;
  --shadow-sm:0 3px 12px #193c6410; --shadow-md:0 12px 36px #173e6414;
}
body { background:linear-gradient(135deg,#edf4fc,#f6f9fc 55%,#ecf8f6); font-size:16px; }
.shell { max-width:1500px; padding:24px 32px 48px; }
.topbar { padding:24px 26px 0; margin-bottom:28px; border:1px solid #d6e4f1; border-radius:20px; background:#fff; box-shadow:var(--shadow-md); }
.brand { max-width:580px; gap:14px; }
.brand h1 { font-size:clamp(20px,2vw,28px); line-height:1.2; letter-spacing:-.04em; color:#163960; }
.brand-mark { background:linear-gradient(145deg,#165dc6,#087e89); width:48px; height:48px; border-radius:15px; flex-shrink:0; }
.brand .eyebrow { color:#087b7a; font-size:12px; letter-spacing:.12em; margin-bottom:5px; }
.brand-credit { display:block; margin-top:6px; font-size:13px; color:#52708d; font-weight:600; }
.eyebrow { color:#486582; font-size:12px; }
.account-box { right:26px; top:24px; border-color:#e0eaf3; background:#f6f9fd; border-radius:12px; }
.nav { gap:6px; padding:16px 0 12px; flex-wrap:wrap; overflow:visible; }
.nav button { border:0; border-radius:10px; padding:11px 15px; font-size:14px; color:#52667e; }
.nav button:hover { color:#154f9f; background:#edf4fc; }
.nav button.active { background:#175bc4; color:#fff; border:0; box-shadow:0 4px 10px #175bc426; }
.nav button.referral-alert { color:#a51e2f; background:#fff0f1; }
.panel,.panel-lite,.side,.chat,.channel-card,.qr-panel,.calendar-stat,.referral-card { border-radius:16px; border-color:var(--line); box-shadow:var(--shadow-sm); }
.primary,.send,.review-referral,#agenda-feature-toggle { background:#175bc4; color:#fff; border:1px solid #175bc4; border-radius:10px; font-weight:600; }
.primary:hover,.send:hover,.review-referral:hover,#agenda-feature-toggle:hover { background:#114698; border-color:#114698; }
button { transition:background-color .15s ease,border-color .15s ease; }
button:disabled { opacity:.55; cursor:wait; }
input:not([type=checkbox]):not([type=radio]),select,textarea { border-radius:10px; color:var(--ink); padding:12px 14px; font-size:15px; }
input:focus,select:focus,textarea:focus { border-color:#2674d7; box-shadow:0 0 0 3px #2674d71c; }
input[type=checkbox],input[type=radio] { accent-color:#175bc4; }
.admin-head h2,.calendar-page-head h2,.referrals-head h2 { color:#173c64; font-size:28px; letter-spacing:-.035em; }
.side { background:linear-gradient(155deg,#15375f,#145a77); color:#fff; border:0; }
.side h2,.side .eyebrow { color:#fff; }
.side-copy,.side .status { color:#dceaf5; line-height:1.7; }
.side .quick .chip { background:#ffffff12; border:1px solid #ffffff35; color:#fff; border-radius:10px; text-align:left; padding:14px; }
.side .quick .chip:hover { background:#ffffff23; }
.chat-head { background:#f7fafd; border-bottom:1px solid var(--line); padding:22px; }
.avatar { background:#e0f3f0; color:#087d78; border-radius:14px; }
.message.agent { background:#edf4fc; color:#183653; border-radius:4px 18px 18px; border:1px solid #dce8f5; }
.message.user { background:#175bc4; color:#fff; border-radius:18px 4px 18px 18px; }
.composer { background:#fff; border-top:1px solid var(--line); }
.badge,.demo { background:#e5f5f1; color:#096c61; border:1px solid #c3e8df; border-radius:20px; }
.calendar-stat { border-top:3px solid #68a9d5; }
#view-calendar { --calendar-blue:#175bc4; --calendar-ink:#162e49; --calendar-muted:#52667e; --calendar-line:#dce6ef; }
.calendar-toolbar,.calendar-board,.calendar-upcoming-panel,.management-card { border-radius:16px; }
.knowledge-section { border:1px solid #d7e5f1; border-radius:14px; overflow:hidden; background:#fff; }
.knowledge-section > summary { padding:20px; background:#f7fafd; }
.knowledge-section[open] > summary { background:#eaf3fd; border-bottom:1px solid #d7e5f1; }
.category-entry,.account-edit-form { background:#f6f9fd; border-radius:12px; }
.category-secondary,.user-edit,.category-rename { color:#175aa6; border-color:#c4d8eb; border-radius:8px; }
.identity-panel { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr); gap:32px; margin:0 0 24px; padding:28px; background:linear-gradient(120deg,#edf8f7,#f0f6ff); border:1px solid #cce5e4; border-radius:16px; }
.identity-panel h3 { margin:8px 0; color:#163c5f; font-size:23px; }
.identity-panel p { color:#4a657b; line-height:1.6; margin:8px 0; }
.identity-panel label { display:block; margin-bottom:8px; }
.identity-controls { display:flex; gap:10px; }
.identity-controls input { min-width:0; flex:1; background:#fff; }
.identity-controls button { flex-shrink:0; padding:12px 18px; }
.identity-preview { font-size:14px; }
#identity-status { font-size:14px; color:#135c67; }
.auth-card { border-radius:22px; border:1px solid #d3e3f1; box-shadow:0 24px 70px #17375c20; }
.auth-card .brand-mark { background:linear-gradient(135deg,#175bc4,#087e89); }
@media(max-width:1000px) {
 .topbar { display:flex; flex-direction:column; align-items:stretch; }
 .topbar-actions { width:100%; }
 .account-box { position:static; width:fit-content; margin:10px 0 16px; }
 .identity-panel { grid-template-columns:1fr; gap:16px; }
}
@media(max-width:600px) {
 .shell { padding:12px 12px 30px; } .topbar { padding:18px 16px 0; border-radius:16px; }
 .nav button { flex:1 1 auto; padding:10px; font-size:14px; }
 .brand h1 { font-size:22px; } .brand-mark { width:40px; height:40px; }
 .identity-panel { padding:20px; } .identity-controls { flex-direction:column; }
 .identity-controls button { width:100%; } .admin-head h2 { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { button { transition:none; } }