:root{
    --navy:#1F2A44;
    --navy-light:#3C4B6E;
    --gold:#C9A227;
    --hot:#E06666;
    --warm:#F6B26B;
    --cold:#9FC5E8;
    --bg:#F5F6FA;
    --card:#FFFFFF;
    --border:#E2E5EC;
    --text:#26304A;
    --muted:#6B7284;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--text);
  }
  .app{
    max-width:1180px;
    margin:0 auto;
    padding:24px 20px 60px;
  }
  header.top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    flex-wrap:wrap;
    gap:10px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand .logo{
    width:44px;height:44px;border-radius:12px;
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    display:flex;align-items:center;justify-content:center;
    color:var(--gold);font-size:22px;font-weight:bold;
  }
  .brand h1{
    font-size:20px;margin:0;color:var(--navy);
  }
  .brand p{
    margin:0;font-size:12px;color:var(--muted);
  }
  .badge{
    background:var(--navy);
    color:#fff;
    font-size:11px;
    font-weight:bold;
    padding:5px 12px;
    border-radius:999px;
    letter-spacing:.03em;
  }
  .layout{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:20px;
  }
  @media (max-width:880px){
    .layout{grid-template-columns:1fr;}
  }
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 1px 3px rgba(20,25,45,0.06);
  }
  .chat-card{
    display:flex;
    flex-direction:column;
    height:640px;
  }
  .chat-header{
    padding:16px 18px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .chat-header h2{
    font-size:15px;margin:0;color:var(--navy);
  }
  .status-dot{
    width:8px;height:8px;border-radius:50%;background:#4CAF50;
    display:inline-block;margin-right:6px;
  }
  .chat-header .sub{font-size:12px;color:var(--muted);}
  .quickstart{
    padding:10px 18px;
    border-bottom:1px solid var(--border);
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    background:#FAFBFD;
  }
  .qs-btn{
    font-size:11.5px;
    background:#fff;
    border:1px solid var(--border);
    color:var(--navy-light);
    padding:6px 10px;
    border-radius:999px;
    cursor:pointer;
    transition:all .15s;
  }
  .qs-btn:hover{
    background:var(--navy);
    color:#fff;
    border-color:var(--navy);
  }
  .messages{
    flex:1;
    overflow-y:auto;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .msg{
    max-width:78%;
    padding:10px 14px;
    border-radius:14px;
    font-size:13.5px;
    line-height:1.45;
    white-space:pre-wrap;
  }
  .msg.bot{
    align-self:flex-start;
    background:#EEF1F8;
    color:var(--text);
    border-bottom-left-radius:4px;
  }
  .msg.user{
    align-self:flex-end;
    background:var(--navy);
    color:#fff;
    border-bottom-right-radius:4px;
  }
  .msg.system{
    align-self:center;
    background:transparent;
    color:var(--muted);
    font-size:11.5px;
    font-style:italic;
  }
  .lead-card{
    align-self:flex-start;
    max-width:92%;
    background:#FFF7DB;
    border:1px solid #EBD98A;
    border-radius:12px;
    padding:14px;
    font-size:12.5px;
  }
  .lead-card h4{
    margin:0 0 8px;
    color:var(--navy);
    font-size:13px;
  }
  .lead-card table{border-collapse:collapse;width:100%;}
  .lead-card td{padding:2px 4px;vertical-align:top;}
  .lead-card td.k{color:var(--muted);white-space:nowrap;padding-right:8px;}
  .consent-card{
    align-self:flex-start;
    max-width:92%;
    background:#F4F6FB;
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
    font-size:12.5px;
  }
  .consent-card .consent-question{
    font-size:13.5px;
    color:var(--text);
    margin:0 0 10px;
    font-weight:600;
  }
  .consent-card .consent-disclosure{
    color:var(--muted);
    font-size:11px;
    line-height:1.5;
    margin:0 0 12px;
  }
  .consent-card .consent-actions{
    display:flex;
    gap:8px;
  }
  .consent-btn{
    font-size:12.5px;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    border:1px solid var(--border);
    transition:all .15s;
  }
  .consent-btn.yes{
    background:var(--navy);
    color:#fff;
    border-color:var(--navy);
  }
  .consent-btn.yes:hover{opacity:.9;}
  .consent-btn.no{
    background:#fff;
    color:var(--navy-light);
  }
  .consent-btn.no:hover{
    background:#EEF1F8;
  }
  .consent-btn:disabled{
    opacity:.5;
    cursor:default;
  }
  .composer{
    border-top:1px solid var(--border);
    padding:12px 14px;
    display:flex;
    gap:8px;
  }
  .composer input{
    flex:1;
    border:1px solid var(--border);
    border-radius:10px;
    padding:11px 14px;
    font-size:13.5px;
    font-family:inherit;
  }
  .composer input:focus{outline:2px solid var(--navy-light);}
  .composer button{
    background:var(--navy);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:0 20px;
    font-size:13.5px;
    font-weight:bold;
    cursor:pointer;
  }
  .composer button:hover{background:var(--navy-light);}
  .composer .reset{
    background:#fff;
    color:var(--navy);
    border:1px solid var(--border);
  }
  .composer .reset:hover{background:#F0F1F5;}

  .side{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .side .card{padding:16px 18px;}
  .side h3{
    font-size:14px;margin:0 0 6px;color:var(--navy);
    display:flex;align-items:center;justify-content:space-between;
  }
  .side p.hint{font-size:11.5px;color:var(--muted);margin:0 0 12px;}
  .count-pill{
    background:var(--gold);color:#fff;font-size:11px;font-weight:bold;
    padding:2px 9px;border-radius:999px;
  }
  .lead-list{
    display:flex;flex-direction:column;gap:10px;
    max-height:330px;overflow-y:auto;
  }
  .lead-row{
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    font-size:12px;
  }
  .lead-row .name{font-weight:bold;color:var(--navy);font-size:13px;}
  .lead-row .tag{
    display:inline-block;font-size:10px;font-weight:bold;color:#fff;
    padding:2px 8px;border-radius:999px;margin-left:6px;
  }
  .lead-row .meta{color:var(--muted);margin-top:3px;}
  .lead-row .actions{margin-top:8px;display:flex;gap:6px;}
  .lead-row button{
    font-size:10.5px;padding:5px 9px;border-radius:7px;border:1px solid var(--border);
    background:#fff;cursor:pointer;color:var(--navy-light);
  }
  .lead-row button:hover{background:var(--navy);color:#fff;}
  .empty{
    font-size:12px;color:var(--muted);text-align:center;padding:20px 6px;
  }
  .export-all{
    width:100%;
    margin-top:12px;
    background:var(--navy);
    color:#fff;
    border:none;
    padding:10px;
    border-radius:9px;
    font-size:12.5px;
    font-weight:bold;
    cursor:pointer;
  }
  .export-all:hover{background:var(--navy-light);}
  .how-it-works li{margin-bottom:6px;font-size:12px;color:var(--text);}
  .toast{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;
    font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .25s;
    box-shadow:0 4px 14px rgba(0,0,0,.2);
  }
  .toast.show{opacity:1;}

  /* ---- Tabs ---- */
  .tabs{
    display:flex;
    gap:8px;
    margin-bottom:18px;
    border-bottom:1px solid var(--border);
  }
  .tab-btn{
    background:none;
    border:none;
    padding:10px 16px;
    font-size:13.5px;
    font-weight:bold;
    color:var(--muted);
    cursor:pointer;
    border-bottom:3px solid transparent;
    margin-bottom:-1px;
  }
  .tab-btn.active{
    color:var(--navy);
    border-bottom-color:var(--gold);
  }
  .view-hidden{display:none;}

  /* ---- Follow-Up Center ---- */
  .fu-layout{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:20px;
  }
  @media (max-width:880px){
    .fu-layout{grid-template-columns:1fr;}
  }
  .fu-layout .card{padding:16px 18px;}
  .fu-layout h3{font-size:14px;margin:0 0 8px;color:var(--navy);}
  .fu-layout p.hint{font-size:11.5px;color:var(--muted);margin:0 0 12px;}

  .seq-lib-item{
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:8px;
    font-size:12px;
  }
  .seq-lib-item .name{font-weight:bold;color:var(--navy);font-size:12.5px;}
  .seq-lib-item .steps{color:var(--muted);margin-top:3px;}

  .sim-form{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
  .sim-form select, .sim-form input{
    border:1px solid var(--border);
    border-radius:8px;
    padding:9px 10px;
    font-size:12.5px;
    font-family:inherit;
  }
  .sim-form button{
    background:var(--navy);
    color:#fff;
    border:none;
    padding:9px;
    border-radius:8px;
    font-size:12.5px;
    font-weight:bold;
    cursor:pointer;
  }
  .sim-form button:hover{background:var(--navy-light);}

  .lead-timeline-card{
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:14px;
  }
  .lead-timeline-card .lt-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
  }
  .lead-timeline-card .lt-head .name{font-weight:bold;color:var(--navy);font-size:13.5px;}
  .lead-timeline-card .lt-head .trigger{font-size:11px;color:var(--muted);}
  .timeline{
    border-left:2px solid var(--border);
    margin-left:6px;
    padding-left:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .timeline-item{position:relative;font-size:12px;}
  .timeline-item::before{
    content:"";
    position:absolute;
    left:-21px;
    top:3px;
    width:9px;height:9px;
    border-radius:50%;
    background:var(--border);
    border:2px solid #fff;
  }
  .timeline-item.sent::before{background:var(--gold);}
  .timeline-item.scheduled::before{background:var(--cold);}
  .ti-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .ti-date{font-weight:bold;color:var(--navy);}
  .channel-badge{
    font-size:10px;font-weight:bold;padding:2px 8px;border-radius:999px;
    background:var(--navy-light);color:#fff;
  }
  .channel-badge.email{background:#5B7FBA;}
  .channel-badge.text{background:#6AA84F;}
  .status-pill{
    font-size:10px;font-weight:bold;padding:2px 8px;border-radius:999px;
  }
  .status-pill.sent{background:var(--gold);color:#fff;}
  .status-pill.scheduled{background:#EEF1F8;color:var(--navy-light);}
  .ti-msg{
    margin-top:4px;
    color:var(--text);
    background:#FAFBFD;
    border:1px solid var(--border);
    border-radius:8px;
    padding:7px 10px;
    white-space:pre-wrap;
  }
  .fu-table-wrap{max-height:420px;overflow:auto;border:1px solid var(--border);border-radius:10px;}
  table.fu-table{width:100%;border-collapse:collapse;font-size:11.5px;}
  table.fu-table th{
    position:sticky;top:0;
    background:var(--navy);color:#fff;
    padding:8px 8px;text-align:left;font-size:10.5px;
  }
  table.fu-table td{
    padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top;
  }
  table.fu-table tr:last-child td{border-bottom:none;}

  /* ---- Studio Team ---- */
  .team-layout{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:20px;
  }
  @media (max-width:880px){
    .team-layout{grid-template-columns:1fr;}
  }
  .team-layout .card{padding:16px 18px;}
  .team-layout h3{font-size:14px;margin:0 0 8px;color:var(--navy);}
  .team-layout p.hint{font-size:11.5px;color:var(--muted);margin:0 0 12px;}

  .add-instructor-form{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
  .add-instructor-form input[type=text]{
    border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-size:12.5px;font-family:inherit;
  }
  .specialty-checks{
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .specialty-checks label{
    font-size:11px;
    border:1px solid var(--border);
    border-radius:999px;
    padding:4px 10px;
    cursor:pointer;
    color:var(--navy-light);
    user-select:none;
  }
  .specialty-checks input{margin-right:4px;}
  .add-instructor-form button{
    background:var(--navy);color:#fff;border:none;padding:9px;border-radius:8px;
    font-size:12.5px;font-weight:bold;cursor:pointer;
  }
  .add-instructor-form button:hover{background:var(--navy-light);}

  .instructor-card{
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:12px;
  }
  .instructor-card.inactive{opacity:.55;}
  .instructor-card .ic-head{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;
  }
  .instructor-card .ic-name{font-weight:bold;color:var(--navy);font-size:14px;}
  .instructor-card .ic-specialty{font-size:11px;color:var(--muted);margin-bottom:8px;}
  .instructor-card .ic-stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px;
  }
  .instructor-card .stat{
    background:#FAFBFD;border:1px solid var(--border);border-radius:8px;
    text-align:center;padding:8px 4px;
  }
  .instructor-card .stat .num{font-size:16px;font-weight:bold;color:var(--navy);}
  .instructor-card .stat .lbl{font-size:9.5px;color:var(--muted);text-transform:uppercase;}
  .instructor-card .ic-actions{display:flex;gap:6px;}
  .instructor-card .ic-actions button{
    font-size:10.5px;padding:5px 10px;border-radius:7px;border:1px solid var(--border);
    background:#fff;cursor:pointer;color:var(--navy-light);
  }
  .instructor-card .ic-actions button:hover{background:var(--navy);color:#fff;}
  .instructor-card .ic-actions button.danger:hover{background:var(--hot);color:#fff;border-color:var(--hot);}
    .unassigned-note{
    font-size:11.5px;color:var(--muted);text-align:center;padding:10px;
    border:1px dashed var(--border);border-radius:8px;
  }

  /* ---- Billing tab ---- */
  .billing-status{font-size:13px;color:var(--text);}
  .status-pill{
    display:inline-block;font-size:11px;font-weight:bold;padding:4px 12px;
    border-radius:999px;margin-bottom:10px;color:#fff;background:var(--muted);
  }
  .status-pill.status-trialing{background:var(--cold);color:var(--navy);}
  .status-pill.status-active{background:#4CAF50;}
  .status-pill.status-pastdue{background:var(--warm);color:var(--navy);}
  .status-pill.status-canceled{background:var(--muted);}
  .status-pill.status-canceling{background:var(--warm);color:var(--navy);}
  .billing-detail{font-size:12.5px;color:var(--muted);margin:0;}
  .danger-btn{
    background:#fff;color:var(--hot);border:1px solid var(--hot);
    padding:10px 16px;border-radius:9px;font-size:12.5px;font-weight:bold;
    cursor:pointer;
  }
  .danger-btn:hover{background:var(--hot);color:#fff;}
  .danger-btn:disabled{
    opacity:.55;cursor:not-allowed;background:#fff;color:var(--muted);border-color:var(--border);
  }
  .ghost-btn{
    background:#fff;color:var(--navy-light);border:1px solid var(--border);
    padding:10px 16px;border-radius:9px;font-size:12.5px;font-weight:bold;
    cursor:pointer;margin-left:8px;
  }
  .ghost-btn:hover{background:var(--bg);}
  .confirm-text{font-size:12.5px;color:var(--text);margin:0 0 12px;}
  .confirm-text.confirm-success{color:#2E7D32;font-weight:bold;}
  .confirm-text.confirm-error{color:var(--hot);font-weight:bold;}
  .confirm-actions{display:flex;}

  /* ---- Phone screens ---- */
  /* Let grid columns shrink to the screen instead of their content. */
  .layout > *, .fu-layout > *, .team-layout > * { min-width: 0; }
  @media (max-width: 600px) {
    .app { padding: 16px 12px 40px; }
    .tabs { flex-wrap: wrap; gap: 2px; }
    .tab-btn { padding: 8px 10px; font-size: 12.5px; }
    .composer { flex-wrap: wrap; }
    .composer input { flex: 1 1 100%; min-width: 0; font-size: 16px; } /* 16px stops iPhone zooming in */
    .composer button { flex: 1 1 auto; padding: 11px 16px; }
    .chat-card { height: 70vh; min-height: 460px; }
  }

  /* ---- Text / Call / Email buttons on lead cards ---- */
  .contact-actions{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;}
  .contact-btn{
    font-size:12px;font-weight:bold;padding:7px 12px;border-radius:8px;
    border:1px solid var(--border);background:#fff;color:var(--navy);text-decoration:none;
  }
  .contact-btn:hover{background:var(--navy);color:#fff;}