@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg:#F5F7F6; --surface:#FFFFFF; --surface-2:#EBF1EE; --border:#D8E2DE;
  --text:#17231F; --text-muted:#57685F; --primary:#28594E; --primary-ink:#FFFFFF;
  --accent:#E29A3B; --accent-ink:#241705;
  --danger:#B23A3A; --danger-soft:#F7E4E1; --success:#2F7D4F; --success-soft:#E4F1E7;
  --held:#8A6D1B; --held-soft:#F6ECD3;
  --radius:12px; --shadow:0 1px 2px rgba(20,30,26,.06), 0 8px 24px -12px rgba(20,30,26,.18);
}
:root[data-theme="dark"]{
  --bg:#101614; --surface:#182220; --surface-2:#1F2B28; --border:#2A3835;
  --text:#E7EFEC; --text-muted:#9AACA5; --primary:#63A895; --primary-ink:#0B1512;
  --accent:#E8A33D; --accent-ink:#241705;
  --danger:#E38B84; --danger-soft:#3A2321; --success:#7FC79A; --success-soft:#1E2E23;
  --held:#E3C067; --held-soft:#332A14;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5;
}
h1,h2,h3,.disp{font-family:"Sora",system-ui,sans-serif;}
a{color:var(--primary);}
button{font-family:inherit;}
img{max-width:100%;}
[hidden]{display:none!important;}

.wrap{max-width:920px; margin:0 auto; padding:0 20px 64px;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand .mark{
  width:34px; height:34px; border-radius:9px; background:var(--primary); color:var(--primary-ink);
  display:flex; align-items:center; justify-content:center; font-family:"Sora"; font-weight:700; font-size:15px; flex:none;
}
.brand .name{font-family:"Sora"; font-weight:700; font-size:16px;}
.brand .sub{font-size:12px; color:var(--text-muted);}
.topbar-actions{display:flex; align-items:center; gap:8px;}
.icon-btn{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px;
}
.icon-btn:hover{background:var(--surface-2);}

.gate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;}
.gate-card{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); padding:32px 28px;
}
.gate-mark{
  width:48px; height:48px; border-radius:13px; background:var(--primary); color:var(--primary-ink);
  display:flex; align-items:center; justify-content:center; font-family:"Sora"; font-weight:700; font-size:19px;
  margin:0 auto 16px;
}
.gate-card h1{font-size:21px; margin:0 0 4px; text-align:center;}
.gate-card p{color:var(--text-muted); margin:0 0 22px; font-size:13.5px; text-align:center;}
.gate-error{font-size:13px; color:var(--danger); margin:-6px 0 14px;}

.pw-wrap{position:relative;}
.pw-wrap input{padding-right:64px;}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:none; background:none; color:var(--primary); font-weight:600; font-size:12.5px;
  cursor:pointer; padding:6px 8px;
}
.pw-toggle:hover{text-decoration:underline;}

input,select,textarea{
  width:100%; font-family:inherit; font-size:14.5px; padding:10px 12px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary); outline-offset:1px;}
label{display:block; font-size:12.5px; font-weight:600; color:var(--text-muted); margin-bottom:5px; letter-spacing:.02em;}
.field{margin-bottom:14px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){.row2{grid-template-columns:1fr;}}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); font-weight:600; font-size:14px; cursor:pointer;
}
.btn:hover{background:var(--surface-2);}
.btn.primary{background:var(--primary); color:var(--primary-ink); border-color:var(--primary); width:100%;}
.btn.primary:hover{filter:brightness(1.06);}
.btn.danger{background:transparent; color:var(--danger); border-color:var(--danger-soft);}
.btn.danger:hover{background:var(--danger-soft);}
.btn.sm{padding:6px 11px; font-size:12.5px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin:22px 0 20px; overflow-x:auto;}
.tab{
  padding:10px 4px; margin-right:18px; font-size:13.5px; font-weight:600; color:var(--text-muted);
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;
}
.tab.on{color:var(--primary); border-bottom-color:var(--primary);}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px;}
.card + .card{margin-top:14px;}
.card h3{font-size:15px; margin:0 0 4px;}
.muted{color:var(--text-muted);}
.small{font-size:12.5px;}

.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.section-head h2{font-size:18px; margin:0;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:22px;}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px;}
.stat b{display:block; font-family:"Sora"; font-size:22px;}
.stat span{font-size:12px; color:var(--text-muted);}

.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:600;}
.pill.open{background:var(--success-soft); color:var(--success);}
.pill.closed{background:var(--surface-2); color:var(--text-muted);}
.pill.answered{background:var(--success-soft); color:var(--success);}
.pill.pending{background:var(--held-soft); color:var(--held);}
.pill.disabled{background:var(--danger-soft); color:var(--danger);}

.staff-card{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.staff-avatar{
  width:38px; height:38px; border-radius:99px; background:var(--surface-2); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-family:"Sora"; font-weight:700; font-size:14px; flex:none;
}
.staff-main{display:flex; gap:12px; min-width:0;}
.staff-info b{display:block; font-size:14.5px;}
.staff-info .role{font-size:12.5px; color:var(--primary); font-weight:600;}
.staff-info .contact{font-size:12.5px; color:var(--text-muted); margin-top:3px;}
.invite-actions{display:flex; gap:8px; margin-top:8px;}
.fix-email-row{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.fix-email-row input{max-width:260px; padding:7px 10px; font-size:13px;}

.q-item{padding:16px 0; border-bottom:1px solid var(--border);}
.q-item:last-child{border-bottom:none;}
.q-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.q-text{font-size:14.5px; font-weight:600; margin:0 0 3px;}
.q-meta{font-size:12px; color:var(--text-muted);}
.answer-box{margin-top:10px;}
.answer-box textarea{min-height:70px; resize:vertical;}
.saved-note{font-size:12px; color:var(--success); margin-top:6px; display:none;}

.resp-item{padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
.resp-item:last-child{border-bottom:none;}
.resp-item .who{font-weight:600; font-size:13px;}
.resp-item .when{color:var(--text-muted); font-size:11.5px; margin-left:6px;}
.resp-item p{margin:4px 0 0;}

.empty{color:var(--text-muted); font-size:13.5px; padding:18px 0; text-align:center;}
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:10px 18px; border-radius:99px; font-size:13px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px);}
.banner{
  display:flex; gap:10px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px; font-size:13px; color:var(--text-muted); margin-bottom:18px;
}
.switch-link{background:none; border:none; color:var(--primary); font-weight:600; font-size:13px; cursor:pointer; padding:0;}
.boot{min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:14px;}

.choice-list{display:flex; flex-direction:column; gap:2px;}
.choice-row{display:flex; align-items:center; gap:9px; font-weight:400; font-size:14px; padding:6px 2px; cursor:pointer;}
.choice-row input{width:auto; flex:none;}

.tally{display:flex; flex-direction:column; gap:9px;}
.tally-row{display:grid; grid-template-columns:minmax(120px,220px) 1fr auto; align-items:center; gap:10px; font-size:13px;}
.tally-label{color:var(--text);}
.tally-bar-track{background:var(--surface-2); border-radius:6px; height:10px; overflow:hidden;}
.tally-bar{background:var(--primary); height:100%; border-radius:6px;}
.tally-count{text-align:right; color:var(--text-muted); font-weight:600; white-space:nowrap;}
@media (max-width:560px){.tally-row{grid-template-columns:1fr; gap:3px;} .tally-count{text-align:left;}}

/* Multi-select "which survey groups" picker: a checkbox list plus a live
   status panel on the side confirming exactly what's currently picked. */
.role-picker{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start;}
.role-picker-list{flex:1 1 220px; min-width:200px;}
.role-picker-status{
  flex:1 1 160px; min-width:150px; max-width:260px;
  border-left:1px solid var(--border); padding-left:14px;
}
.role-status-title{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:8px;}
.role-status-chips{display:flex; flex-wrap:wrap; gap:5px;}
.role-chip{
  display:inline-block; background:var(--surface-2); color:var(--primary);
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:99px;
}
.role-status-saved{margin-top:10px; font-size:12.5px; font-weight:600; color:var(--success);}
@media (max-width:560px){
  .role-picker{flex-direction:column;}
  .role-picker-status{
    border-left:none; border-top:1px solid var(--border);
    padding-left:0; padding-top:10px; max-width:none; width:100%;
  }
}

/* ---------- compact phone layout ---------- */
@media (max-width:480px){
  body{font-size:14px;}
  .wrap{padding:0 14px 40px;}
  .topbar{padding:11px 14px;}
  .brand .mark{width:29px; height:29px; font-size:13px; border-radius:8px;}
  .brand .name{font-size:14.5px;}
  .brand .sub{font-size:11px;}
  .icon-btn{width:30px; height:30px; font-size:13px;}
  .btn{padding:9px 13px; font-size:13.5px;}
  .btn.sm{padding:6px 10px; font-size:12px;}

  .gate{padding:20px 14px;}
  .gate-card{padding:22px 18px; border-radius:14px;}
  .gate-mark{width:40px; height:40px; font-size:16px; margin-bottom:12px;}
  .gate-card h1{font-size:18px;}
  .gate-card p{font-size:12.5px; margin-bottom:16px;}

  h2{font-size:17px;}
  .section-head{margin-bottom:8px;}
  .section-head h2{font-size:16px;}
  .tabs{margin:14px 0 14px; gap:0;}
  .tab{padding:8px 3px; margin-right:14px; font-size:12.5px;}

  .card{padding:13px;}
  .card + .card{margin-top:10px;}
  .card h3{font-size:13.5px;}
  input,select,textarea{padding:8px 10px; font-size:14px;}
  label{font-size:11.5px; margin-bottom:4px;}
  .field{margin-bottom:10px;}
  .row2{gap:8px;}

  .stat-grid{grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px;}
  .stat{padding:11px 12px;}
  .stat b{font-size:19px;}
  .stat span{font-size:11px;}

  .staff-card{gap:8px;}
  .staff-avatar{width:32px; height:32px; font-size:12px;}
  .staff-main{gap:9px;}
  .staff-info b{font-size:13.5px;}

  .q-item{padding:12px 0;}
  .q-text{font-size:13.5px;}
  .q-meta{font-size:11px;}
  .answer-box{margin-top:7px;}

  .choice-row{font-size:13px; padding:5px 2px;}
  .role-picker-list{flex-basis:auto;}
}