/* Imagn design system — tokens and components lifted directly from the handoff mockups. */
:root{
  --green:#87C133; --green-dark:#74a82b; --taupe:#685F5D;
  --ink:#1c1c1c; --muted:#a3a3a3; --bg:#f5f5f4; --card:#ffffff; --line:#ececea;
  --field:#fafaf9; --hover:#f5f5f4; --row-hover:#fafaf9; --bar-track:#efeeec;
  --pill-gray-bg:#f0efee; --amber-bg:#fef3c7; --amber-fg:#92400e;
  --red-bg:#fef2f2; --red-fg:#b91c1c; --disabled:#d9d7d4;
  --nav-glass:rgba(255,255,255,.85); --overlay:rgba(28,28,28,.35);
  --radius:16px; --shadow:0 4px 24px rgba(0,0,0,.06);
  --shadow-lift:0 8px 32px rgba(0,0,0,.09); --shadow-modal:0 20px 60px rgba(0,0,0,.2);
  --green-tint:rgba(135,193,51,.12); --green-tint-strong:rgba(135,193,51,.15);
  --green-glow:rgba(135,193,51,.15); --green-wash:rgba(135,193,51,.05);
  --logo-filter:none;
}
/* Dark palette — shared by explicit dark mode and system-dark. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --green:#8fca3d; --green-dark:#a4d95a; --taupe:#b3aaa7;
    --ink:#f2f1ef; --muted:#8b8785; --bg:#141413; --card:#1f1e1d; --line:#2e2d2b;
    --field:#262523; --hover:#2a2927; --row-hover:#262523; --bar-track:#33322f;
    --pill-gray-bg:#2e2d2b; --amber-bg:#3a2f10; --amber-fg:#f3c969;
    --red-bg:#3a1717; --red-fg:#f0a1a1; --disabled:#454340;
    --nav-glass:rgba(31,30,29,.85); --overlay:rgba(0,0,0,.55);
    --shadow:0 4px 24px rgba(0,0,0,.35); --shadow-lift:0 8px 32px rgba(0,0,0,.45);
    --shadow-modal:0 20px 60px rgba(0,0,0,.6);
    --green-tint:rgba(143,202,61,.16); --green-tint-strong:rgba(143,202,61,.2);
    --green-glow:rgba(143,202,61,.22); --green-wash:rgba(143,202,61,.08);
    --logo-filter:invert(1) hue-rotate(180deg) saturate(0.85);
  }
}
/* Explicit dark mode (manual toggle), regardless of OS setting. */
:root[data-theme="dark"]{
  --green:#8fca3d; --green-dark:#a4d95a; --taupe:#b3aaa7;
  --ink:#f2f1ef; --muted:#8b8785; --bg:#141413; --card:#1f1e1d; --line:#2e2d2b;
  --field:#262523; --hover:#2a2927; --row-hover:#262523; --bar-track:#33322f;
  --pill-gray-bg:#2e2d2b; --amber-bg:#3a2f10; --amber-fg:#f3c969;
  --red-bg:#3a1717; --red-fg:#f0a1a1; --disabled:#454340;
  --nav-glass:rgba(31,30,29,.85); --overlay:rgba(0,0,0,.55);
  --shadow:0 4px 24px rgba(0,0,0,.35); --shadow-lift:0 8px 32px rgba(0,0,0,.45);
  --shadow-modal:0 20px 60px rgba(0,0,0,.6);
  --green-tint:rgba(143,202,61,.16); --green-tint-strong:rgba(143,202,61,.2);
  --green-glow:rgba(143,202,61,.22); --green-wash:rgba(143,202,61,.08);
  --logo-filter:invert(1) hue-rotate(180deg) saturate(0.85);
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh;
}
a{text-decoration:none;color:inherit}
img.logo-img{filter:var(--logo-filter)}

/* ---------- Auth card ---------- */
.auth-body{display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh}
.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  width:100%;max-width:420px;padding:48px 40px;animation:rise .4s ease both;
}
.card.wide{max-width:460px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}*{transition:none !important}}
.accent{height:4px;width:48px;background:var(--green);border-radius:2px;margin:16px auto 32px}
.card h1{font-size:20px;font-weight:600;text-align:center;margin-bottom:8px}
.sub{font-size:14px;color:var(--taupe);text-align:center;margin-bottom:32px;line-height:1.5}
.practice-chip{
  display:inline-block;background:var(--green-tint);color:var(--green-dark);
  font-size:13px;font-weight:600;padding:6px 14px;border-radius:99px;
}
label{display:block;font-size:13px;font-weight:600;color:var(--taupe);margin-bottom:6px}
input,select,textarea{
  width:100%;padding:13px 16px;font-size:15px;border:1px solid var(--line);
  border-radius:12px;background:var(--field);margin-bottom:18px;color:var(--ink);
  transition:border-color .2s, box-shadow .2s;font-family:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow);background:var(--card);
}
input:disabled{color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hint{font-size:12px;color:var(--muted);margin:-12px 0 18px}
.row{display:flex;justify-content:space-between;align-items:center;margin:-6px 0 24px}
.forgot{font-size:13px;color:var(--green);text-decoration:none;font-weight:600}
.forgot:hover{color:var(--green-dark)}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--taupe)}
.remember input{width:auto;margin:0;accent-color:var(--green)}
.btn-full{
  width:100%;padding:14px;font-size:15px;font-weight:600;color:#fff;
  background:var(--green);border:none;border-radius:12px;cursor:pointer;
  transition:background .2s, transform .1s;
}
.btn-full:hover{background:var(--green-dark)}
.btn-full:active{transform:scale(.99)}
.btn-full:disabled{background:var(--disabled);cursor:not-allowed}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-full,:root:not([data-theme="light"]) .btn:not(.secondary),:root:not([data-theme="light"]) .go{color:#10200a}}
:root[data-theme="dark"] .btn-full,:root[data-theme="dark"] .btn:not(.secondary),:root[data-theme="dark"] .go{color:#10200a}
.foot{margin-top:28px;font-size:13px;color:var(--muted);text-align:center}
.foot a,.back-link{color:var(--green);font-weight:600;text-decoration:none}
.back-link{display:block;margin-top:24px;font-size:13px;text-align:center}
.error{display:none;background:var(--red-bg);color:var(--red-fg);font-size:13px;padding:12px 16px;border-radius:10px;margin-bottom:20px}
.error.show{display:block}
.success-panel{display:none;text-align:center}
.success-panel.show{display:block}
.form-panel.hide{display:none}
.check{
  width:56px;height:56px;border-radius:50%;background:var(--green-tint);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.check svg{width:28px;height:28px;stroke:var(--green);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.success-panel p{font-size:14px;color:var(--taupe);line-height:1.6}

/* ---------- Focus visibility everywhere ---------- */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--green-glow);outline-offset:2px;
}

/* ---------- Top nav (frosted) ---------- */
.topnav{
  background:var(--nav-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:0 32px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:sticky;top:0;z-index:10;
}
.nav-links{display:flex;gap:8px}
.nav-links a{font-size:14px;font-weight:500;color:var(--taupe);padding:8px 16px;border-radius:10px;transition:background .15s}
.nav-links a:hover{background:var(--hover)}
.nav-links a.active{background:var(--green-tint);color:var(--green-dark);font-weight:600}
.avatar{
  width:36px;height:36px;border-radius:50%;background:var(--green-tint-strong);
  color:var(--green-dark);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex-shrink:0;
}
.nav-user{display:flex;align-items:center;gap:12px;position:relative}
.user-menu{
  display:none;position:absolute;right:0;top:46px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lift);min-width:200px;padding:8px;z-index:30;
}
.user-menu.show{display:block}
.user-menu .who{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.user-menu .who b{display:block;font-size:14px}
.user-menu .who span{font-size:12px;color:var(--muted)}
.user-menu button, .user-menu a[role="menuitem"]{
  display:block;width:100%;text-align:left;padding:10px 12px;font-size:14px;background:none;border:none;
  border-radius:8px;cursor:pointer;color:var(--ink);font-family:inherit;text-decoration:none;
}
.user-menu button:hover, .user-menu a[role="menuitem"]:hover{background:var(--hover)}

/* ---------- Page shell ---------- */
.main{max-width:1000px;margin:0 auto;padding:36px 24px}
.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;flex-wrap:wrap;gap:16px}
h1.page{font-size:26px;font-weight:700;letter-spacing:-.5px}
.subtitle{font-size:14px;color:var(--taupe);margin-top:4px}
.btn{
  padding:11px 20px;font-size:14px;font-weight:600;color:#fff;background:var(--green);
  border:none;border-radius:12px;cursor:pointer;transition:background .2s;font-family:inherit;
}
.btn:hover{background:var(--green-dark)}
.btn:disabled{background:var(--disabled);cursor:not-allowed}
.btn.secondary{background:var(--card);color:var(--taupe);border:1px solid var(--line)}
.btn.secondary:hover{background:var(--hover)}
.btn.danger{background:var(--red-bg);color:var(--red-fg);border:1px solid var(--line)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px}
.stat{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.stat .label{font-size:13px;color:var(--taupe);font-weight:500;margin-bottom:6px}
.stat .value{font-size:28px;font-weight:700;letter-spacing:-1px}
.stat .delta{font-size:12px;color:var(--green-dark);font-weight:600;margin-top:6px}

/* ---------- Sections & tables ---------- */
.section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-bottom:24px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap}
h2.sec{font-size:17px;font-weight:600}
.link{font-size:13px;font-weight:600;color:var(--green);background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:0 12px 12px;white-space:nowrap}
td{padding:14px 12px;border-top:1px solid var(--line)}
tr:hover td{background:var(--row-hover)}
tr.clickable{cursor:pointer}
td .avatar{width:32px;height:32px;font-size:12px;display:inline-flex;margin-right:10px;vertical-align:middle}
.member{display:flex;align-items:center;gap:10px}
.role-sub{font-size:12px;color:var(--muted)}
.pill{font-size:12px;font-weight:600;padding:4px 12px;border-radius:99px;display:inline-block;white-space:nowrap}
.pill.green{background:var(--green-tint);color:var(--green-dark)}
.pill.gray{background:var(--pill-gray-bg);color:var(--taupe)}
.pill.amber{background:var(--amber-bg);color:var(--amber-fg)}
.pill.red{background:var(--red-bg);color:var(--red-fg)}
.bar{height:6px;background:var(--bar-track);border-radius:3px;overflow:hidden;width:110px;display:inline-block;vertical-align:middle;margin-right:8px}
.bar i{display:block;height:100%;background:var(--green);border-radius:3px}
.pct{font-size:13px;color:var(--taupe);font-weight:600}
.empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:14px}

/* ---------- Modal ---------- */
.overlay{
  display:none;position:fixed;inset:0;background:var(--overlay);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  align-items:center;justify-content:center;z-index:50;padding:24px;
}
.overlay.show{display:flex}
.modal{
  background:var(--card);border-radius:20px;box-shadow:var(--shadow-modal);
  width:100%;max-width:420px;padding:36px;max-height:90vh;overflow-y:auto;
}
.modal.wide{max-width:640px}
.modal h3{font-size:19px;font-weight:600;margin-bottom:8px}
.modal>p{font-size:14px;color:var(--taupe);margin-bottom:24px;line-height:1.5}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:6px}

/* ---------- Scheduling chips ---------- */
.sched{display:flex;gap:12px;flex-wrap:wrap}
.sched .chip{
  display:flex;align-items:center;gap:10px;padding:14px 18px;border:1px solid var(--line);
  border-radius:12px;font-size:14px;font-weight:500;color:var(--ink);transition:border-color .2s, background .2s;
}
.sched .chip:hover{border-color:var(--green);background:var(--green-wash)}
.sched svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0 0 0 4px;line-height:1}
.chip-x:hover{color:var(--red-fg)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--bg);font-size:14px;font-weight:500;
  padding:12px 22px;border-radius:12px;box-shadow:var(--shadow-lift);
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:100;max-width:90vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Utility ---------- */
.muted{color:var(--muted)}
.spin{
  width:22px;height:22px;border:3px solid var(--bar-track);border-top-color:var(--green);
  border-radius:50%;animation:spin .8s linear infinite;margin:32px auto;
}
@keyframes spin{to{transform:rotate(360deg)}}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--card);padding:10px 16px;border-radius:0 0 12px 0;z-index:200;
}
.skip:focus{left:0}

@media (max-width:700px){
  .nav-links{display:none}
  .topnav{padding:0 20px}
  .main{padding:24px 16px}
  .grid2{grid-template-columns:1fr}
}