/* Layout + components for the mock interviewer.
   Brand tokens/fonts/buttons live in brand.css (loaded first). */
* { box-sizing: border-box; }
body { margin:0; background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased; }

header { background:var(--green-cta); padding:12px 22px; }
.brandbar { max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.brandmark { width:42px; height:42px; flex:0 0 auto; }
.brandcol { display:inline-block; }                 /* shrinks to the wordmark width */
.brandcol .logo { display:block; font-family:var(--display); font-weight:800; font-size:26px;
  color:#fff; line-height:.95; letter-spacing:-.5px; }
.brandcol .logo .va { color:var(--gold); }   /* gold "vā" accent in the wordmark */
.brandtag { display:block; font-family:var(--display); font-weight:700; font-size:9.5px;
  color:rgba(255,255,255,.92); text-align:justify; text-align-last:justify; line-height:1; margin-top:2px; }
.subtitle { font-family:var(--display); font-weight:700; font-size:19px; color:var(--ink);
  max-width:880px; margin:16px auto 0; padding:0 28px; }

.card { max-width:880px; margin:24px auto; background:#fff; border:1px solid var(--line);
        border-radius:16px; padding:32px; }
/* Data-heavy screens (admin, dashboards, configs, emails) get more room to breathe. */
.card.wide { max-width:1120px; }
.hidden { display:none !important; }   /* utility class must win over component display rules (e.g. .modal display:flex) */
h2 { font-family:var(--display); font-weight:800; font-size:26px; margin:0 0 16px; }

label { display:block; margin:12px 0; font-size:15px; color:var(--body); }
input[type=text], input[type=email], input[type=tel], input[type=password], textarea {
  width:100%; padding:11px; border:1px solid var(--line); border-radius:12px;
  margin-top:4px; font-size:15px; font-family:var(--sans); background:var(--surf); }
input:focus, textarea:focus { outline:none; border-color:var(--green); }
textarea { min-height:90px; resize:vertical; }
a.link { color:var(--green-ink); font-weight:600; text-decoration:none; font-size:14px; }
a.link:hover { text-decoration:underline; }

/* Buttons inherit the green pill from brand.css. Local sizing only: */
/* Centered, content-width CTAs (no longer edge-to-edge). */
.modeBtn { display:block; width:fit-content; min-width:min(320px,100%); max-width:100%;
  margin:12px auto; text-align:center; }
/* Back link shown at the top of a sub-section. */
.backbtn { background:none; border:0; color:var(--green-ink); font-family:var(--sans);
  font-weight:700; font-size:14px; padding:4px 2px; margin:0 0 6px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; }
.backbtn:hover { background:none; text-decoration:underline; }
/* Brand lockup acts as a Home link. */
.brandcol { cursor:pointer; }
/* Primary single-action submits: centered + content-width, not stretched. */
#gStart, #tStart, #setpwBtn, #loginBtn, #forgotBtn, #startBtn {
  display:block; width:fit-content; min-width:200px; margin:18px auto 0; }
#endBtn, .btnlink, #pdfLink { font-size:14px; padding:11px 22px; }
/* Secondary (outline) button variant */
#endBtn { background:#fff; color:var(--green-ink); border:1.5px solid var(--green); }
#endBtn:hover { background:var(--mint-s); }

.consents { margin:16px 0; }
.consents .req em, .consents .req span span { color:var(--mut); font-size:12px; }
.consents label { background:var(--surf); border:1px solid var(--line); padding:12px; border-radius:12px; }
.marketing { border:1px solid var(--line); border-radius:12px; margin-top:10px; padding:6px 12px; }
.marketing legend { font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink); }
.marketing label { background:none; border:none; padding:5px 0; }
.msg { color:#B00020; font-size:13px; min-height:18px; }

/* interview */
.rec { color:#B00020; font-weight:700; font-size:13px; font-family:var(--sans); }
/* position:static + float:none keep the dot in normal flow even if a stray
   global `.dot` rule (some browser extensions inject one) tries to
   absolutely-position it on top of the "Recording" text. */
.rec .dot { position:static; float:none; inset:auto; display:inline-block; vertical-align:middle;
  width:9px; height:9px; margin:0 8px 0 0; background:#B00020; border-radius:50%; animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:.3; } }

/* status pill: Listening… / Thinking… */
.status { font-family:var(--sans); font-weight:700; font-size:13px; margin-left:8px; }
.status.listening { color:var(--deep); }
.status.thinking { color:var(--mut); }
.dots { display:inline-flex; gap:3px; margin-left:4px; }
.dots i { width:5px; height:5px; border-radius:50%; background:var(--mut); display:inline-block; animation:bounce 1s infinite; }
.dots i:nth-child(2){ animation-delay:.15s; } .dots i:nth-child(3){ animation-delay:.3s; }
@keyframes bounce { 0%,100%{ transform:translateY(0); opacity:.4; } 50%{ transform:translateY(-3px); opacity:1; } }

/* video + Start overlay */
.camWrap { position:relative; margin:10px 0; }
#cam { width:100%; max-height:300px; background:#000; border-radius:14px; display:block; }
.startOverlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,78,58,.45); border-radius:14px; }
.startOverlay.hidden { display:none; }
#startBtn { font-size:18px; padding:15px 36px; }
.aiBox { background:var(--mint-s); border-radius:14px; padding:14px 16px; }
.aiBox strong { color:var(--deep); font-family:var(--sans); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.06em; }
.aiBox p { margin:8px 0 0; font-size:17px; color:var(--ink); }
.controls { margin:14px 0; display:flex; gap:10px; }
.live { color:var(--mut); font-style:italic; min-height:20px; margin:8px 0; }

/* mic button + status */
.micZone { text-align:center; margin:16px 0; }
.micBtn { position:relative; width:124px; height:124px; border-radius:50%; border:0; padding:0;
  overflow:hidden; cursor:pointer; transition:box-shadow .25s; background:#fff; }
.micBtn .waves { position:absolute; inset:0; width:100%; height:100%; }
/* gold ring (brand --gold) at opacity, not a neutral box */
.micBtn.connected { box-shadow:0 0 0 7px rgba(201,162,39,.22); }
.micBtn.listening { box-shadow:0 0 0 13px rgba(201,162,39,.32); animation:pulse 1.3s infinite; }
.micBtn.disconnected { background:#fff; cursor:not-allowed; box-shadow:0 0 0 7px rgba(201,162,39,.12); }
@keyframes pulse { 50% { box-shadow:0 0 0 20px rgba(201,162,39,.12); } }
.micStatus { font-family:var(--sans); font-size:13px; margin-top:10px; font-weight:700; }
.micStatus.on { color:var(--deep); }
.micStatus.off { color:var(--mut); }
.micHelp { display:none; text-align:left; background:var(--gold-s); border:1px solid #ecdca0;
  border-radius:12px; padding:12px 16px; margin:12px auto 0; max-width:430px; font-size:13px; color:#6e561a; }
.micHelp ol { margin:6px 0 0; padding-left:18px; }
.micHelp li { margin:3px 0; }

/* results */
.overall { font-family:var(--display); font-size:30px; font-weight:800; color:var(--green-ink); margin-bottom:14px; }
.gauges { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; }
.gauge { width:120px; text-align:center; }
.glabel { font-size:12px; margin-top:4px; color:var(--mut); }
.gscore { font-family:var(--display); font-weight:700; }
.meters { display:flex; gap:18px; width:100%; margin-top:12px; font-size:14px; color:var(--mut); }
/* results: verdict + action plan */
.rh { font-family:var(--display); font-weight:700; font-size:18px; color:var(--deep); margin:20px 0 6px; }
.verdict { background:var(--mint-s); border-radius:12px; padding:14px 16px; color:var(--ink); font-size:15px; }
.plan { margin:6px 0 18px; padding-left:20px; }
.plan li { margin:6px 0; color:var(--body); }
/* Brand "signature wave" loader — a gold dot draws a green trail along the rhemava wave.
   Replaces the old circular spinner everywhere it was used. */
.waveload { display:block; width:116px; height:40px; margin:6px auto 16px; overflow:visible; }
.wl-faint { fill:none; stroke:var(--mint); opacity:.55; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.wl-line  { fill:none; stroke:var(--green); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.wl-dot   { fill:var(--gold); }

/* "Setting up your interview room…" rotating status line — pulses in on each change */
#absorbNote { min-height:22px; }
.loadpulse.pulse { animation: loadpulse 1s ease; }
@keyframes loadpulse {
  0%   { opacity:0; transform:scale(.96); }
  25%  { opacity:1; transform:scale(1.03); }
  60%  { opacity:1; transform:scale(1); }
  100% { opacity:.72; transform:scale(1); }
}
input[type=file] { font-family:var(--sans); font-size:14px; padding:8px 0; }

/* Resume attach: drop / paste / browse zone */
.dropzone { display:block; border:1.5px dashed var(--line); border-radius:12px;
  padding:12px 14px; background:var(--surf); transition:border-color .15s, background .15s; }
.dropzone.drag { border-color:var(--green); background:var(--mint-s); }
.dropzone input[type=file] { display:block; }
.dzhint { display:block; margin-top:6px; font-size:12.5px; color:var(--mut); }
.filename { display:block; margin:6px 0 0; font-size:13px; color:var(--green-ink); font-weight:600; }

/* ============ Access control v1 UI ============ */

/* Tier pill (top-left, beside the wordmark) + admin-console rows.
   Fills agreed with the user: Test grey, Trial amber, Lite green, Premium gold, Admin deep green. */
.tierpill { font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.02em;
  padding:5px 12px; border-radius:999px; white-space:nowrap; line-height:1;
  border:1px solid transparent; }
.tier-test    { background:#F1EFE8; color:#5b574c; border-color:#dcd8cb; }
.tier-trial   { background:#FAEEDA; color:#8a5a12; border-color:#f0d9ad; }
.tier-lite    { background:#E9FBE3; color:#1f7a3d; border-color:#bfeec3; }
.tier-premium { background:#C9A227; color:#3a2e07; border-color:#a9871c; }
.tier-admin   { background:#006B4F; color:#eafff6; border-color:#005840; }

/* Profile menu (top-right) */
.profilemenu { margin-left:auto; position:relative; flex:0 0 auto; }
.profilebtn { display:flex; align-items:center; gap:5px; background:transparent; border:0; padding:0; cursor:pointer; }
/* Caret next to the avatar so the menu is discoverable: chevron when closed, ✕ when open. */
.pmcaret { display:inline-flex; align-items:center; justify-content:center; color:#fff; opacity:.92; transition:opacity .15s; }
.profilebtn:hover .pmcaret { opacity:1; }
.pmcaret .ic-shut { display:none; }
#profileMenu:has(.profiledrop:not(.hidden)) .pmcaret .ic-open { display:none; }
#profileMenu:has(.profiledrop:not(.hidden)) .pmcaret .ic-shut { display:inline; }
.avatar { display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background:var(--mint); color:var(--deep); font-family:var(--display);
  font-weight:800; font-size:16px; overflow:hidden; border:2px solid rgba(255,255,255,.7);
  background-size:cover; background-position:center; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.profiledrop { position:absolute; right:0; top:46px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:6px; min-width:188px; z-index:40; }
.profiledrop button { display:block; width:100%; text-align:left; background:none; border:0;
  border-radius:8px; padding:10px 12px; font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--ink); cursor:pointer; }
.profiledrop button:hover { background:var(--surf); }

/* Admin console */
.adminadd { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.adminadd input, .adminadd select { width:auto; flex:1 1 150px; margin-top:0; }
.adminadd button { flex:0 0 auto; }
.usmall { font-size:12px; font-weight:700; padding:7px 12px; border-radius:999px; }
.usmall.danger { background:#fff; color:#B00020; border:1.5px solid #B00020; }
.usmall.ok { background:#fff; color:var(--green-ink); border:1.5px solid var(--green); }
.ubadge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.ubadge.dis { background:#fdecec; color:#B00020; }

/* Change-password modal */
.modal { position:fixed; inset:0; background:rgba(20,30,25,.45); display:flex;
  align-items:center; justify-content:center; z-index:60; padding:20px; }
.modalcard { background:#fff; border-radius:16px; padding:24px; width:100%; max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); position:relative; }
/* Corner close button injected into every popup */
.modalx { position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0; min-width:0;
  background:transparent; color:var(--mut); border:0; box-shadow:none; cursor:pointer; animation:none; }
.modalx:hover { background:var(--surf); color:var(--ink); }
.modalx:active { transform:scale(.92); }

/* Powered-by footer */
.poweredfoot { text-align:center; font-family:var(--sans); font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mut); padding:24px 0 36px; }

/* Secondary button variant used by Back / Cancel */
.sec { background:#fff; color:var(--green-ink); border:1.5px solid var(--green); }
.sec:hover { background:var(--mint-s); }

/* ---- login show-password toggle ---- */
.pwfield { position:relative; display:block; margin-top:4px; }
.pwfield input { margin-top:0; padding-right:62px; }
.pweye { position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--green-ink); font-family:var(--sans);
  font-weight:700; font-size:12px; cursor:pointer; padding:6px 8px; }
.pweye:hover { text-decoration:underline; }

/* ---- admin: search + bulk toolbar ---- */
.admintools { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:16px 0 10px; }
#userSearch { flex:1 1 240px; margin-top:0; }
.bulkbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background:var(--mint-s); border:1px solid var(--line); border-radius:12px; padding:8px 12px; }
.bulkcount { font-weight:700; font-size:13px; color:var(--deep); margin-right:4px; }
.bulkbar select { margin-top:0; width:auto; font-size:13px; padding:7px 9px; }

/* ---- admin: users table ---- */
.utablewrap { overflow-x:auto; }
.utable { width:100%; border-collapse:collapse; font-size:14px; }
.utable th { text-align:left; font-family:var(--sans); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--mut);
  padding:8px 10px; border-bottom:1.5px solid var(--line); white-space:nowrap; }
.utable td { padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.utable tbody tr:hover { background:var(--surf); }
.utable .uemail { color:var(--mut); }
.utable .utype { width:auto; margin:0; font-size:13px; padding:6px 8px; }
.utable .selcol { width:36px; text-align:center; }
.ubadge.ok { background:#E9FBE3; color:#1f7a3d; }
.youtag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--deep); background:var(--mint); padding:2px 6px; border-radius:999px; margin-left:6px; }

/* ---- recordings: results-screen player + modal ---- */
.recbox { margin:18px 0; }
.recvideo { width:100%; max-height:340px; background:#000; border-radius:14px; display:block; }
.rectext { font-size:12px; color:var(--mut); margin:8px 0 0; }
#sessionRows .uemail { font-size:12px; }

/* ============ Mentee dashboard ============ */
.dashhead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.dashsub { font-size:13px; color:var(--mut); margin:2px 0 0; }
.dashready { text-align:right; flex:0 0 auto; }
.dashready span { display:block; font-size:11px; color:var(--mut); }
.dashready b { font-size:20px; color:var(--green-ink); }
.dashstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:6px 0 4px; }
.statcard { background:var(--surf); border-radius:10px; padding:12px 14px; }
.statcard .sl { font-size:12px; color:var(--mut); }
.statcard .sv { font-size:22px; font-weight:800; font-family:var(--display); color:var(--ink); margin-top:3px; }
.statcard .su { font-size:12px; color:var(--mut); font-weight:600; }
.coachcard { background:var(--mint-s); border-radius:12px; padding:14px 16px; display:flex; gap:12px; margin:14px 0; }
.coachcard > i { font-size:22px; color:var(--deep); flex:0 0 auto; }
.coachlabel { font-size:13px; font-weight:700; color:var(--deep); margin-bottom:3px; }
.coachnarr { font-size:13px; color:var(--ink); line-height:1.55; margin:0; }
.coachpat { margin:8px 0 0; padding-left:18px; }
.coachpat li { font-size:12px; color:var(--body); margin:2px 0; }
.chartwrap { position:relative; width:100%; height:200px; }
.dashcols { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.dashcols .chartwrap { height:215px; }
.chartlegend { display:flex; gap:14px; font-size:11px; color:var(--mut); margin-bottom:2px; }
.chartlegend i.lg { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; }
.lg-grey { background:#B4B2A9; } .lg-green { background:#008f50; }
.dashfollow, .dashrecs { display:flex; flex-direction:column; gap:8px; }
.followrow, .dashrec { display:flex; align-items:center; gap:10px; border:0.5px solid var(--line); border-radius:10px; padding:10px 12px; }
.followrow > i, .dashrec > i { font-size:18px; flex:0 0 auto; }
.followinfo, .recinfo { flex:1; min-width:0; display:flex; flex-direction:column; }
.followinfo b, .recinfo b { font-size:13px; color:var(--ink); }
.followinfo span, .recinfo span { font-size:12px; color:var(--mut); }
.followchip, .recchip { font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; flex:0 0 auto; }
.recchip.ok { color:var(--green-ink); background:var(--mint-s); }
.recchip.mid { color:#8a5a12; background:#FAEEDA; }
.dashrec[data-play] { cursor:pointer; }
.dashrec[data-play]:hover { background:var(--surf); }

/* single recording: inline video card (click opens the popup player) */
.dashrec-solo { cursor:pointer; border:0.5px solid var(--line); border-radius:12px; padding:10px;
  display:flex; flex-direction:column; gap:8px; }
.dashrec-solo:hover { background:var(--surf); }
.dashrec-solo .dsv-wrap { position:relative; border-radius:10px; overflow:hidden; background:#000; }
.dashrec-solo .dsv { width:100%; max-height:240px; display:block; object-fit:cover; }
.dashrec-solo .dsv-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.dashrec-solo .dsv-play i { font-size:28px; color:#fff; background:rgba(4,85,63,.55); border-radius:50%;
  width:58px; height:58px; display:flex; align-items:center; justify-content:center; }

/* multiple recordings: collapsible header + chevron (override brand button pill) */
.dashrec-toggle { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--surf); color:var(--ink); border:0.5px solid var(--line); border-radius:10px;
  padding:10px 12px; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:14px; animation:none; }
.dashrec-toggle:hover { background:var(--mint-s); }
.dashrec-toggle:active { transform:none; }
.dashrec-toggle .dashrec-chev { margin-left:auto; color:var(--mut); transition:transform .18s; }
.dashrec-toggle.open .dashrec-chev { transform:rotate(180deg); }
.dashrec-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.dashstar { display:flex; flex-direction:column; gap:7px; }
.starrow { display:flex; justify-content:space-between; font-size:12px; color:var(--body); }
.bar { height:7px; background:#F1EFE8; border-radius:4px; }
.barfill { height:7px; border-radius:4px; }
.bignum { font-size:30px; font-weight:800; font-family:var(--display); color:var(--green-ink); }
.dashcomp { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compcard { background:var(--surf); border-radius:10px; padding:12px 14px; }
.compcard.warn { background:#FCEBEB; }
.compcard .ttl { font-size:12px; color:var(--mut); }
.compcard.warn .ttl { color:#A32D2D; }
.compcard .val { font-size:15px; font-weight:700; color:var(--ink); margin-top:4px; }

/* ============ Admin program dashboard ============ */
.daterange { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 14px; }
.rangebtn { font-size:12px; padding:6px 14px; border-radius:999px; border:0.5px solid var(--line);
  background:#fff; color:var(--body); font-weight:600; animation:none !important; }
.rangebtn.active { background:var(--green-cta); color:#fff; border-color:var(--green-cta); }
.rangecustom { display:inline-flex; align-items:center; gap:6px; }
.rangecustom input[type=date] { width:auto; margin:0; padding:6px 8px; font-size:12px; }
.admintiers { margin-top:10px; display:flex; flex-wrap:wrap; gap:10px 16px; font-size:13px; color:var(--body); }
.tierline { display:inline-flex; align-items:center; gap:6px; }
.tierdot { width:10px; height:10px; border-radius:3px; display:inline-block; }
.nearlimit { flex-basis:100%; background:#FAEEDA; color:#8a5a12; font-size:12px; padding:7px 10px; border-radius:8px; display:flex; gap:6px; align-items:center; }
.gapcard { background:#FCEBEB; color:#A32D2D; font-size:12px; padding:9px 11px; border-radius:8px; line-height:1.45; margin-bottom:10px; }
.moverlbl { font-size:12px; color:var(--mut); margin:6px 0 4px; }
.moverrow { display:flex; justify-content:space-between; font-size:13px; color:var(--body); padding:1px 0; }
.mentava { width:30px; height:30px; border-radius:50%; background:var(--mint-s); color:var(--deep);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:0 0 auto; }
.viewbtn { font-size:12px; font-weight:700; color:var(--green-ink); border:0.5px solid var(--green); padding:3px 10px; border-radius:999px; flex:0 0 auto; }

/* ---- admin configs ---- */
.cfggrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:4px 16px; }
.cfggrid label { margin:8px 0; }
#cfgTiers .cfg-limit { text-align:center; }
#cfgSave { margin-top:10px; }

/* ---- configs: email templates ---- */
.emailtpls { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin:6px 0 4px; }
.emailtpl { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--surf); }
.emailtpl .emailh { margin:0 0 6px; font-family:var(--display); font-weight:700; font-size:15px; color:var(--deep); }
.emailtpl label { margin:8px 0; font-size:13px; color:var(--body); }
.emailtpl textarea { min-height:84px; }
.emailacts { display:flex; gap:12px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.emailacts a, .emailacts button { font-family:var(--sans); font-weight:700; font-size:13px; color:var(--green-ink);
  background:#fff; border:1.5px solid var(--green); border-radius:999px; padding:7px 16px; cursor:pointer;
  text-decoration:none; width:auto; min-width:0; display:inline-block; margin:0; }
.emailacts a:hover, .emailacts button:hover { background:var(--mint-s); }

/* ---- Emails admin: table + toggle switch + modal ---- */
.emailtable tbody tr { cursor:pointer; }
.emailtable tbody tr:hover { background:var(--mint-s); }
.emailtable .trigcell { font-size:13px; color:var(--mut); }
.emailtable .statecell { text-align:center; white-space:nowrap; }
.switch { position:relative; display:inline-block; width:40px; height:22px; vertical-align:middle; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track { position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .18s; pointer-events:none; }
.switch .track::before { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .18s; }
.switch input:checked + .track { background:var(--green-cta); }
.switch input:checked + .track::before { transform:translateX(18px); }
.emtoggle { display:flex; align-items:center; gap:10px; background:var(--surf); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:14px; }
.emtoggle input { width:18px; height:18px; }
#emailModal .modalcard label code, .emtpl code { font-size:12px; }

/* ---- site footer (copyright) ---- */
.sitefoot { text-align:center; color:var(--mut); font-size:12px; line-height:1.5;
  padding:20px 16px 34px; max-width:680px; margin:0 auto; }

/* ---- Beta: banner, floating feedback button, popup, toast ---- */
.betabanner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  background:var(--gold-s); border-bottom:1px solid #ecdca0; padding:8px 16px; }
.betapill { background:var(--gold); color:#3a2e07; font-family:var(--sans); font-weight:700;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.betatext { font-size:13px; color:#6e561a; }
.betalink { background:none; border:0; padding:0; color:var(--green-ink); font-family:var(--sans);
  font-weight:700; font-size:13px; cursor:pointer; text-decoration:underline; animation:none; min-width:0; }
.betalink:hover { background:none; }
.fab { position:fixed; right:20px; bottom:20px; z-index:55; width:54px; height:54px; border-radius:50%;
  background:var(--green-cta); color:#fff; display:flex; align-items:center; justify-content:center;
  padding:0; min-width:0; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.fab:hover { background:var(--green-d); }
#fbModal textarea { min-height:120px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:70;
  background:var(--deep); color:#eafff6; font-family:var(--sans); font-size:14px; font-weight:600;
  padding:11px 18px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.22); }
@media (max-width:600px){ .fab { right:14px; bottom:14px; } }

/* ---- Admin Inbox ---- */
.inboxtabs { display:flex; gap:6px; margin:6px 0 12px; }
.inboxtab { background:#fff; color:var(--body); border:0.5px solid var(--line); border-radius:999px;
  padding:7px 16px; font-family:var(--sans); font-weight:600; font-size:13px; cursor:pointer; animation:none; min-width:0; }
.inboxtab:hover { background:var(--surf); }
.inboxtab.active { background:var(--green-cta); color:#fff; border-color:var(--green-cta); }
.ibcount { font-weight:700; opacity:.85; }
.inboxtable .ibmsg { color:var(--body); max-width:340px; }
.inboxtable tbody tr { cursor:pointer; }
.inboxtable tbody tr:hover { background:var(--surf); }
.inboxtable tr.ibdone { opacity:.55; }
.inboxtable tr.ibnew .ibmsg { font-weight:700; color:var(--ink); }
.ibstatus { font-size:12px; padding:5px 8px; }
.typebadge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.typebadge.t-bug { background:#FCEBEB; color:#A32D2D; }
.typebadge.t-feedback { background:var(--mint-s); color:#1f7a3d; }
.typebadge.t-ux { background:#E6F1FB; color:#185FA5; }
.typebadge.t-request { background:var(--gold-s); color:#8a5a12; }
.typebadge.t-question { background:#F1EFE8; color:#5b574c; }
.ibmrow { display:flex; gap:10px; padding:5px 0; border-bottom:0.5px solid var(--line); font-size:13px; }
.ibmk { color:var(--mut); min-width:70px; flex:0 0 auto; }
.ibmv { color:var(--ink); word-break:break-word; }
.ibmblock { margin:12px 0 0; }
.ibmblock b { font-size:13px; color:var(--deep); }
.ibmblock pre { white-space:pre-wrap; word-break:break-word; background:var(--surf); border:0.5px solid var(--line);
  border-radius:8px; padding:10px 12px; font-size:12px; margin:5px 0 0; max-height:200px; overflow:auto; font-family:ui-monospace,monospace; }

/* ---- Notification bell + two-way messaging ---- */
.headright { margin-left:auto; display:flex; align-items:center; gap:12px; }
.headright .profilemenu { margin-left:0; }
.notifbell { position:relative; width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; padding:0; min-width:0; background:transparent; color:#fff; border:0; box-shadow:none; animation:none; cursor:pointer; }
.notifbell:hover { background:rgba(255,255,255,.14); }
.notifcount { position:absolute; top:1px; right:1px; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--gold); color:#3a2e07; font-family:var(--sans); font-weight:700; font-size:10px; line-height:16px; text-align:center; }
.msgcompose { display:flex; flex-direction:column; gap:8px; margin:6px 0 10px; }
.msgcompose textarea { min-height:80px; }
.msgcompose select { max-width:200px; }
.msglist { display:flex; flex-direction:column; gap:8px; }
.msgrow { display:flex; align-items:center; gap:10px; border:0.5px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; }
.msgrow:hover { background:var(--surf); }
.msgrow.unread { background:var(--mint-s); border-color:#bfeec3; }
.msgprev { font-size:14px; color:var(--body); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.newdot { width:8px; height:8px; border-radius:50%; background:var(--green); flex:0 0 auto; }
.msgthread { display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow:auto; margin:6px 0 12px; padding:2px; }
.msgbubble { max-width:80%; padding:8px 12px; border-radius:12px; }
.msgbubble.theirs { align-self:flex-start; background:var(--surf); border:0.5px solid var(--line); }
.msgbubble.mine { align-self:flex-end; background:var(--mint-s); border:0.5px solid #bfeec3; }
.msgmeta { font-size:11px; color:var(--mut); margin-bottom:2px; }
.msgtext { font-size:14px; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.msgreply { display:flex; gap:8px; align-items:flex-end; }
.msgreply textarea { min-height:46px; flex:1; }
.msgreply button { flex:0 0 auto; }
.typebadge.t-announcement { background:var(--mint); color:#1f7a3d; }
.msgtext a { color:var(--green-ink); }
.msgtext ul, .msgtext ol { margin:6px 0; padding-left:20px; }
.msgtext h2, .msgtext h3 { font-family:var(--display); margin:8px 0 4px; }
/* Announce composer (Quill) */
.annquill { background:#fff; margin-top:4px; }
.annquill .ql-container { min-height:170px; font-family:var(--sans); font-size:15px; border-color:var(--line); border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
.annquill .ql-toolbar { border-color:var(--line); border-top-left-radius:10px; border-top-right-radius:10px; }
.annquill .ql-editor { min-height:170px; }

/* ---- wide-table scroll + small-screen reflow ---- */
.utablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.utable { min-width:600px; }
@media (max-width:600px) {
  header { padding:10px 14px; }
  .subtitle { font-size:17px; padding:0 16px; margin-top:12px; }
  .card { margin:16px 12px; padding:20px; border-radius:14px; }
  h2 { font-size:22px; }
}

/* ---- cookie notice (essential-cookies only) ---- */
.cookiebar { position:fixed; left:16px; right:16px; bottom:16px; z-index:60; margin:0 auto;
  max-width:680px; display:flex; align-items:center; gap:14px; background:#fff;
  border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.14); padding:14px 18px; }
.cookietext { margin:0; font-size:13px; color:var(--body); line-height:1.5; flex:1; }
.cookietext strong { color:var(--ink); }
.cookiebtn { flex:0 0 auto; width:auto; min-width:0; margin:0; padding:10px 22px; font-size:14px; }
@media (max-width:520px) {
  .cookiebar { flex-direction:column; align-items:stretch; text-align:center; }
  .cookiebtn { width:100%; }
}

/* ---- mobile: interview screen + touch sizing ---- */
@media (max-width:600px) {
  #cam { max-height:210px; }
  .micBtn { width:112px; height:112px; }
  .micHelp { max-width:100%; }
  .aiBox p { font-size:16px; }
  .controls { flex-direction:column; }
  .controls > button { width:100%; }
  #startBtn { font-size:16px; padding:14px 28px; }
  /* comfortable tap targets for the menu + back links */
  .profiledrop button { padding:13px 14px; }
  .backbtn { padding:8px 2px; }
}

.usesaved{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 10px;font-size:.92rem;color:var(--ink)}
.usesaved input:disabled{opacity:.5}
.usesaved input:disabled ~ *{opacity:.6}
.savedhint{color:var(--mut);font-size:.85rem}

.pulsewarn{margin:18px 2px 2px;text-align:center;font-size:.92rem;font-weight:500;color:var(--gold);animation:pulsewarn 1.7s ease-in-out infinite}
@keyframes pulsewarn{0%,100%{opacity:.5}50%{opacity:1}}

/* Reviews: end-of-session rating overlay + admin table */
.rvoverlay{position:fixed;inset:0;background:rgba(20,30,25,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.stars{display:flex;gap:4px;margin:8px 0 12px}
.stars .star{font-size:30px;line-height:1;background:none;border:none;padding:2px 4px;cursor:pointer;color:var(--line);transition:transform .08s ease,color .12s ease}
.stars .star:hover{transform:scale(1.12)}
.stars .star.on{color:var(--gold)}
#rvComment{width:100%;min-height:82px;margin-top:2px}
.cbrow{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;margin:8px 0;color:var(--ink)}
.reviewstable td{vertical-align:top}
.reviewstable .rvcomment{max-width:340px;white-space:normal;color:var(--ink)}

/* Collapsible "Admin tools" group in the profile dropdown */
.profiledrop button.admtoggle{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:500}
.admtoggle .admchev{flex:0 0 auto;color:var(--mut);transition:transform .15s ease}
.admtoggle.open .admchev{transform:rotate(180deg)}
.profiledrop .admgroup button{padding-left:28px}