:root {
--text-primary: #1a1a1a;
--text-secondary: #555;
--text-muted: #888;
--text-faint: #aaa;
--bg-card: #ffffff;
--bg-surface: #f9f9f7;
--bg-subtle: #f0f0ee;
--border: #e5e5e5;
--border-light: #f0f0ee;
}
body.dark-mode {
--text-primary: #e8f1ec;
--text-secondary: #b7c6bf;
--text-muted: #8fa89f;
--text-faint: #6b8a7a;
--bg-card: #151d19;
--bg-surface: #1a2b23;
--bg-subtle: #111815;
--border: #2b3832;
--border-light: #1e2e27;
}
/* =========================================================
[Your Brand] Clinical System
Stylesheet: light/dark design system, layout and components
========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f0;color:#1a1a1a;min-height:100vh;margin:0;background-attachment:fixed}
input,select,textarea,button{font-family:inherit}
.shell{max-width:1040px;margin:0 auto;padding:28px 24px}
.screen{display:none;opacity:0}.screen.active{display:block;animation:screen-in 0.18s ease forwards}
@keyframes screen-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
#screen-b2c-landing.active,#screen-b2c-signup.active,#screen-b2c-verify.active,
#screen-b2c-sales.active,#screen-b2c-select-plan.active,#screen-b2c-welcome.active,
#screen-b2c-payment.active,#screen-b2c-complete.active,#screen-b2c-unlocked.active{
position:fixed;top:0;left:0;width:100%;height:100%;overflow-y:auto;
background:#f5f5f0;z-index:100;
}
/* LOADING */
.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(245,245,240,0.94);display:none;align-items:center;justify-content:center;z-index:9999}
.spinner{width:30px;height:30px;border:3px solid #e0e0e0;border-top-color:#1D9E75;border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:14px;color:#888;text-align:center}
/* NAV */
.top-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;padding-bottom:16px;border-bottom:0.5px solid #ddd;flex-wrap:wrap;gap:10px}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo-mark{width:34px;height:34px;border-radius:8px;background:#1D9E75;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:18px;height:18px}
.logo-text{font-size:16px;font-weight:600}
.logo-sub{font-size:11px;color:#999;margin-top:1px}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.role-badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px}
.badge-ops{background:#EEEDFE;color:#534AB7}
.badge-nurse{background:#E1F5EE;color:#0F6E56}
.badge-client{background:#E6F1FB;color:#185FA5}
.badge-admin{background:#FAEEDA;color:#854F0B}
.badge-clinician{background:#FAECE7;color:#993C1D}
.badge-doctor{background:#FCEBEB;color:#A32D2D}
.nav-user{font-size:13px;color:#555;font-weight:500}
.btn-logout{background:#fff;border:0.5px solid #ccc;border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer;color:#888}
.btn-logout:hover{color:#A32D2D}
.conn-dot{width:8px;height:8px;border-radius:50%;background:#ccc;display:inline-block;transition:background 0.3s}
.conn-dot.live{background:#1D9E75}
.conn-label{font-size:11px;color:#aaa}
.msg-badge{background:#A32D2D;color:#fff;border-radius:20px;font-size:11px;font-weight:700;padding:2px 7px;display:none}
.role-switch-row{display:flex;gap:6px;flex-wrap:wrap}
.role-switch-btn{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;border:0.5px solid #ccc;background:#fff;cursor:pointer;transition:all 0.15s}
.role-switch-btn:hover{border-color:#1D9E75;color:#1D9E75}
.role-switch-btn.active-role{background:#1D9E75;color:#fff;border-color:#1D9E75}
/* SHARED */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:12px;font-weight:500;color:#666}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:0.5px solid #ccc;border-radius:8px;font-size:14px;background:#fff;color:#1a1a1a;transition:border-color 0.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#1D9E75;box-shadow:0 0 0 3px rgba(29,158,117,0.1)}
.field textarea{resize:vertical;min-height:80px}
.btn-primary{background:#1D9E75;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.15s}
.btn-primary:hover{background:#0F6E56}
.btn-sm{background:#fff;border:0.5px solid #ccc;border-radius:8px;padding:6px 14px;font-size:13px;cursor:pointer;color:#555}
.btn-sm:hover{background:#f5f5f0}
.btn-danger{background:#FCEBEB;color:#A32D2D;border:0.5px solid #F09595;border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer}
.btn-add{background:#E1F5EE;color:#0F6E56;border:0.5px solid #9FE1CB;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.login-error{background:#FCEBEB;border:0.5px solid #F09595;border-radius:8px;padding:10px 14px;font-size:13px;color:#A32D2D;margin-bottom:14px;display:none}
.page-title{font-size:20px;font-weight:600;margin-bottom:4px}
.page-sub{font-size:13px;color:#777;margin-bottom:22px}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:14px;border-bottom:0.5px solid #e5e5e5}
.breadcrumb{font-size:13px;color:#999}
.breadcrumb span{color:#1a1a1a;font-weight:500}
.tab-row{display:flex;gap:4px;margin-bottom:24px;background:#f1efe8;padding:4px;border-radius:10px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tab{padding:7px 15px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;color:#888;border:none;background:transparent;transition:all 0.15s;flex-shrink:0;white-space:nowrap}
.tab.active{background:#fff;color:#1a1a1a;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.stat{background:#fff;border:0.5px solid #e0e0e0;border-radius:10px;padding:14px 16px}
.stat-label{font-size:12px;color:#888;margin-bottom:5px}
.stat-value{font-size:22px;font-weight:600}
.saved-banner{background:#EAF3DE;border:0.5px solid #97C459;border-radius:8px;padding:12px 16px;font-size:13px;color:#3B6D11;margin-bottom:16px;display:none}
/* BIZ CARDS */
.biz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.biz-card{background:#fff;border:0.5px solid #e0e0e0;border-radius:12px;padding:18px;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s}
.biz-card:hover{border-color:#aaa;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.biz-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:3px}
.biz-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.biz-meta{font-size:12px;color:#999;margin-bottom:12px}
.day-badge{margin-left:auto;font-size:11px;background:#f1efe8;color:#5f5e5a;padding:3px 8px;border-radius:6px;font-weight:500}
.biz-stats{display:flex;gap:16px;margin-bottom:12px}
.biz-stat{font-size:12px;color:#888}
.biz-stat strong{display:block;font-size:17px;font-weight:600;color:#1a1a1a}
.status-pill{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;display:inline-block}
.pill-green{background:#EAF3DE;color:#3B6D11}
.pill-amber{background:#FAEEDA;color:#854F0B}
.pill-red{background:#FCEBEB;color:#A32D2D}
.pill-blue{background:#E6F1FB;color:#185FA5}
.pill-purple{background:#EEEDFE;color:#534AB7}
.unread-count-badge{background:#A32D2D;color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 6px;margin-left:6px}
/* TABLES */
.pt{width:100%;border-collapse:collapse;background:#fff;border:0.5px solid #e0e0e0;border-radius:12px;overflow:hidden;font-size:14px}
.pt thead{background:#fafaf8}
.pt th{font-size:12px;font-weight:500;color:#888;text-align:left;padding:10px 14px;border-bottom:0.5px solid #e5e5e5}
.pt td{padding:11px 14px;border-bottom:0.5px solid #f0f0ee;vertical-align:middle}
.pt tbody tr:last-child td{border-bottom:none}
.pt tbody tr:hover td{background:#fafaf8;cursor:pointer}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.av-purple{background:#EEEDFE;color:#534AB7}.av-teal{background:#E1F5EE;color:#0F6E56}
.av-blue{background:#E6F1FB;color:#185FA5}.av-coral{background:#FAECE7;color:#993C1D}
.av-amber{background:#FAEEDA;color:#854F0B}.av-red{background:#FCEBEB;color:#A32D2D}
.name-cell{display:flex;align-items:center;gap:10px}
.risk-pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
/* PROFILE */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.profile-card{background:#fff;border:0.5px solid #e0e0e0;border-radius:12px;padding:18px}
.card-title{font-size:11px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:14px}
.vitals-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vital{background:#f9f9f7;border-radius:8px;padding:12px}
.vital-label{font-size:11px;color:#999;margin-bottom:2px}
.vital-value{font-size:16px;font-weight:600}
.vital-delta{font-size:11px;margin-top:3px}
.delta-up{color:#A32D2D}.delta-down{color:#3B6D11}.delta-flat{color:#999}
.proj-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.proj-label{font-size:12px;color:#888;width:46px;flex-shrink:0}
.proj-track{flex:1;height:8px;background:#f0f0ee;border-radius:4px;overflow:hidden}
.proj-fill{height:100%;border-radius:4px}
.proj-val{font-size:12px;font-weight:600;width:36px;text-align:right}
.tl-item{display:flex;gap:12px;margin-bottom:12px}
.tl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.tl-text{font-size:13px;color:#1a1a1a;margin-bottom:2px}
.tl-date{font-size:11px;color:#aaa}
.detail-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:0.5px solid #f0f0ee;font-size:13px}
.detail-row:last-child{border-bottom:none}
.detail-key{color:#999}.detail-val{font-weight:500}
.alert-banner{background:#FAEEDA;border:0.5px solid #EF9F27;border-radius:8px;padding:12px 16px;font-size:13px;color:#633806;margin-bottom:18px;display:flex;gap:10px;align-items:flex-start}
.wearable-card{background:#f0f7ff;border:0.5px solid #b5d4f4;border-radius:8px;padding:12px 14px;margin-top:12px}
.wearable-title{font-size:12px;font-weight:600;color:#185FA5;margin-bottom:8px}
.wearable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.w-stat{background:#fff;border-radius:6px;padding:8px 10px;border:0.5px solid #dce9f5}
.w-label{font-size:10px;color:#888;margin-bottom:2px}
.w-val{font-size:14px;font-weight:600;color:#185FA5}
/* CLIENT HERO */
.client-hero{background:#fff;border:0.5px solid #e0e0e0;border-radius:14px;padding:24px;margin-bottom:16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.client-avatar{width:56px;height:56px;border-radius:50%;font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.client-name{font-size:20px;font-weight:600;margin-bottom:3px}
.client-role-text{font-size:13px;color:#888}
.next-assessment{margin-left:auto;text-align:right}
.next-label{font-size:11px;color:#aaa;margin-bottom:3px}
.next-date{font-size:15px;font-weight:600;color:#1D9E75}
/* FORMS */
.form-section{background:#fff;border:0.5px solid #e0e0e0;border-radius:12px;padding:22px;margin-bottom:16px}
.form-section h3{font-size:14px;font-weight:600;margin-bottom:16px;padding-bottom:10px;border-bottom:0.5px solid #f0f0ee}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.bmi-display{background:#f0faf6;border:0.5px solid #9FE1CB;border-radius:8px;padding:10px 12px;font-size:14px;font-weight:600;color:#0F6E56}
.bp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.bp-sep{font-size:18px;font-weight:300;color:#ccc;text-align:center;padding-top:20px}
.submit-row{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}
.risk-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.risk-opt{padding:8px;border:0.5px solid #ddd;border-radius:8px;text-align:center;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.15s}
.risk-opt.sel-low{background:#EAF3DE;border-color:#97C459;color:#3B6D11}
.risk-opt.sel-moderate{background:#FAEEDA;border-color:#EF9F27;color:#854F0B}
.risk-opt.sel-high{background:#FCEBEB;border-color:#F09595;color:#A32D2D}
.wearable-import{border:1.5px dashed #b5d4f4;border-radius:10px;padding:20px;text-align:center;background:#f8fbff;cursor:pointer}
.wearable-import:hover{background:#eef5ff}
.wearable-preview{background:#f0f7ff;border:0.5px solid #b5d4f4;border-radius:8px;padding:14px;margin-top:12px;display:none}
.w-import-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.w-import-item{background:#fff;border-radius:6px;padding:8px 10px;border:0.5px solid #dce9f5}
.w-import-label{font-size:10px;color:#888;margin-bottom:3px}
.w-import-val{font-size:14px;font-weight:600}
.select-step{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.step-card{background:#fff;border:0.5px solid #e0e0e0;border-radius:10px;padding:16px;cursor:pointer;transition:border-color 0.15s}
.step-card:hover{border-color:#1D9E75}
.step-card h4{font-size:14px;font-weight:600;margin-bottom:3px}
.step-card p{font-size:12px;color:#999}
/* PATHWAY CARDS */
.pathway-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.pathway-card{border-radius:8px;padding:12px;border:0.5px solid}
.pw-immediate{background:#FCEBEB;border-color:#F09595}
.pw-urgent{background:#FAEEDA;border-color:#EF9F27}
.pw-preventative{background:#EAF3DE;border-color:#97C459}
.pw-specialist{background:#E6F1FB;border-color:#b5d4f4}
.pw-bloods{background:#FAECE7;border-color:#F4A07A}
.pw-review{background:#EEEDFE;border-color:#AFA9EC}
.pw-label{font-size:11px;font-weight:600;margin-bottom:5px}
.pw-text{font-size:12px;color:#1a1a1a;line-height:1.5}
/* CHAT */
.chat-wrap{background:#fff;border:0.5px solid #e0e0e0;border-radius:12px;overflow:hidden;margin-bottom:20px}
.chat-header{padding:14px 18px;border-bottom:0.5px solid #f0f0ee;display:flex;align-items:center;gap:12px}
.chat-header-av{width:36px;height:36px;border-radius:50%;background:#E1F5EE;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;font-weight:600;color:#0F6E56}
.chat-header-name{font-size:14px;font-weight:600}
.chat-header-status{font-size:12px;color:#1D9E75;display:flex;align-items:center;gap:5px;margin-top:2px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#1D9E75}
.live-badge{font-size:10px;background:#EAF3DE;color:#3B6D11;padding:2px 7px;border-radius:10px;font-weight:600}
.chat-disclaimer{font-size:11px;background:#FAEEDA;color:#854F0B;padding:8px 16px;border-bottom:0.5px solid #f5e0c0;line-height:1.5}
.chat-messages{height:320px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#fafaf8}
.chat-empty{text-align:center;margin:auto;color:#bbb;font-size:13px}
.msg-group{display:flex;flex-direction:column;gap:3px}
.msg-group.from-me{align-items:flex-end}
.msg-group.from-them{align-items:flex-start}
.msg-sender{font-size:11px;font-weight:500;color:#aaa;padding:0 4px;margin-bottom:2px}
.msg-bubble{max-width:72%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.55;word-break:break-word}
.from-me .msg-bubble{background:#1D9E75;color:#fff;border-radius:14px 14px 4px 14px}
.from-them .msg-bubble{background:#fff;color:#1a1a1a;border:0.5px solid #e5e5e5;border-radius:14px 14px 14px 4px}
.msg-time{font-size:10px;color:#bbb;padding:0 4px;margin-top:2px}
.chat-input-area{display:flex;gap:8px;padding:12px 14px;border-top:0.5px solid #e5e5e5;background:#fff;align-items:flex-end}
.chat-input{flex:1;padding:10px 13px;border:0.5px solid #ccc;border-radius:20px;font-size:13px;background:#f9f9f7;color:#1a1a1a;resize:none;min-height:40px;max-height:80px;line-height:1.4}
.chat-input:focus{outline:none;border-color:#1D9E75;background:#fff}
.chat-send{background:#1D9E75;color:#fff;border:none;border-radius:50%;width:38px;height:38px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-send:hover{background:#0F6E56}
.chat-send svg{width:16px;height:16px}
/* USER MANAGEMENT */
.user-table{width:100%;border-collapse:collapse;background:#fff;border:0.5px solid #e0e0e0;border-radius:12px;overflow:hidden;font-size:13px}
.user-table thead{background:#fafaf8}
.user-table th{font-size:11px;font-weight:500;color:#888;text-align:left;padding:10px 14px;border-bottom:0.5px solid #e5e5e5}
.user-table td{padding:10px 14px;border-bottom:0.5px solid #f0f0ee;vertical-align:middle}
.user-table tbody tr:last-child td{border-bottom:none}
.add-user-form{background:#fff;border:0.5px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:16px}
.add-user-form h3{font-size:14px;font-weight:600;margin-bottom:16px}
.perm-select{padding:5px 8px;border:0.5px solid #ccc;border-radius:6px;font-size:12px;background:#fff}
.checkbox-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.checkbox-item{display:flex;align-items:center;gap:5px;font-size:12px;background:#f9f9f7;padding:4px 10px;border-radius:6px;border:0.5px solid #e0e0e0;cursor:pointer}
.checkbox-item input{cursor:pointer}
.assign-panel{background:#f9f9f7;border:0.5px solid #e0e0e0;border-radius:10px;padding:16px;margin-top:10px}
.assign-panel h4{font-size:13px;font-weight:600;margin-bottom:12px}
/* PRF STYLES */
.prf-wrap{font-size:13px}
.prf-section{background:#fff;border:0.5px solid #e0e0e0;border-radius:10px;padding:18px;margin-bottom:12px}
.prf-section-title{font-size:12px;font-weight:700;color:#534AB7;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;padding-bottom:8px;border-bottom:0.5px solid #EEEDFE;display:flex;align-items:center;gap:8px}
.prf-section-title span{background:#EEEDFE;color:#534AB7;border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.prf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prf-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.prf-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
.prf-field{display:flex;flex-direction:column;gap:4px}
.prf-field label{font-size:11px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:0.03em}
.prf-field input,.prf-field select,.prf-field textarea{width:100%;padding:8px 10px;border:0.5px solid #ccc;border-radius:6px;font-size:13px;background:#fff;color:#1a1a1a}
.prf-field input:focus,.prf-field select:focus,.prf-field textarea:focus{outline:none;border-color:#534AB7;box-shadow:0 0 0 2px rgba(83,74,183,0.1)}
.prf-field textarea{resize:vertical;min-height:70px}
.prf-checkbox-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.prf-check{display:flex;align-items:center;gap:5px;font-size:12px;background:#f9f9f7;padding:5px 10px;border-radius:6px;border:0.5px solid #e0e0e0;cursor:pointer;user-select:none}
.prf-check input{cursor:pointer;accent-color:#534AB7}
.prf-check.checked{background:#EEEDFE;border-color:#AFA9EC}
.prf-vitals-table{width:100%;border-collapse:collapse;font-size:12px}
.prf-vitals-table th{background:#f9f9f7;padding:7px 10px;text-align:center;font-weight:600;color:#666;border:0.5px solid #e0e0e0;font-size:11px}
.prf-vitals-table td{padding:6px 8px;border:0.5px solid #e0e0e0;text-align:center}
.prf-vitals-table td input{width:100%;border:none;background:transparent;text-align:center;font-size:12px;padding:2px}
.prf-vitals-table td input:focus{outline:none;background:#EEEDFE;border-radius:3px}
.prf-add-row{background:none;border:0.5px dashed #ccc;border-radius:6px;padding:6px 14px;font-size:12px;color:#888;cursor:pointer;margin-top:8px;width:100%}
.prf-add-row:hover{border-color:#534AB7;color:#534AB7}
.acvpu-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.acvpu-btn{padding:8px;border:0.5px solid #ddd;border-radius:8px;text-align:center;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.15s;background:#fff}
.acvpu-btn.sel-A{background:#EAF3DE;border-color:#97C459;color:#3B6D11}
.acvpu-btn.sel-C{background:#FAEEDA;border-color:#EF9F27;color:#854F0B}
.acvpu-btn.sel-V{background:#FAEEDA;border-color:#EF9F27;color:#854F0B}
.acvpu-btn.sel-P{background:#FCEBEB;border-color:#F09595;color:#A32D2D}
.acvpu-btn.sel-U{background:#FCEBEB;border-color:#F09595;color:#A32D2D}
.pgd-card{background:#f9f9f7;border:0.5px solid #e0e0e0;border-radius:8px;padding:14px;margin-bottom:10px}
.pgd-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pgd-drug-name{font-size:14px;font-weight:600;color:#1a1a1a}
.pgd-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase}
.pgd-standard{background:#EAF3DE;color:#3B6D11}
.pgd-advanced{background:#E6F1FB;color:#185FA5}
.pgd-critical{background:#FCEBEB;color:#A32D2D}
.prf-signature-box{border:0.5px solid #ccc;border-radius:8px;height:80px;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:12px;background:#fafaf8;cursor:pointer}
.prf-export-btn{background:#534AB7;color:#fff;border:none;border-radius:8px;padding:12px 28px;font-size:14px;font-weight:600;cursor:pointer;width:100%;margin-top:4px}
.prf-export-btn:hover{background:#3C3489}
.calgary-subsection{background:#f9f9f7;border-left:3px solid #534AB7;border-radius:0 8px 8px 0;padding:12px 14px;margin-bottom:10px}
.calgary-subsection-title{font-size:12px;font-weight:700;color:#534AB7;margin-bottom:10px}
.ice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role-restricted{background:#FAEEDA;border:0.5px solid #EF9F27;border-radius:8px;padding:10px 14px;font-size:12px;color:#633806;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.nmp-badge{background:#534AB7;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:8px}
/* DARK MODE */
.dark-toggle{background:#fff;border:0.5px solid #ccc;border-radius:999px;padding:5px 10px;font-size:12px;cursor:pointer;color:#555;display:inline-flex;align-items:center;gap:7px;min-width:104px;justify-content:center;transition:all 0.15s}
.global-dark-toggle{position:fixed;top:18px;right:18px;z-index:10000;box-shadow:0 2px 10px rgba(0,0,0,0.08)}
.dark-toggle:hover{border-color:#1D9E75;color:#1D9E75}
.theme-icon{width:16px;height:16px;display:inline-block;flex-shrink:0}
.theme-icon svg{width:16px;height:16px;display:block}
body.dark-mode{
background:
radial-gradient(circle at 20% 15%, rgba(29,158,117,0.18), transparent 34%),
radial-gradient(circle at 78% 20%, rgba(83,74,183,0.13), transparent 36%),
radial-gradient(circle at 50% 78%, rgba(239,159,39,0.07), transparent 42%),
linear-gradient(135deg,#07110e 0%,#0b1713 45%,#050908 100%);
background-attachment:fixed;
color:#eef3ef;
}
body.dark-mode .top-nav{border-bottom-color:#26332e}
body.dark-mode .logo-text,body.dark-mode .page-title,body.dark-mode .client-name,body.dark-mode .tl-text,body.dark-mode .detail-val,body.dark-mode .vital-value,body.dark-mode .stat-value,body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4,body.dark-mode strong{color:#f4faf6}
body.dark-mode .logo-sub,body.dark-mode .page-sub,body.dark-mode .breadcrumb,body.dark-mode .nav-user,body.dark-mode .conn-label,body.dark-mode .field label,body.dark-mode .card-title,body.dark-mode .detail-key,body.dark-mode .vital-label,body.dark-mode .tl-date,body.dark-mode .biz-meta,body.dark-mode .biz-stat,body.dark-mode .client-role-text,body.dark-mode .next-label,body.dark-mode .proj-label,body.dark-mode .msg-time,body.dark-mode .msg-sender{color:#b7c6bf}
body.dark-mode .profile-card,body.dark-mode .form-section,body.dark-mode .biz-card,body.dark-mode .stat,body.dark-mode .chat-wrap,body.dark-mode .add-user-form,body.dark-mode .step-card,body.dark-mode .prf-section,body.dark-mode .client-hero,body.dark-mode .pt,body.dark-mode .user-table,body.dark-mode .pgd-card{background:#151d19;border-color:#2b3832;color:#e8f1ec}
body.dark-mode .tab-row,body.dark-mode .wearable-card,body.dark-mode .vital,body.dark-mode .assign-panel,body.dark-mode .calgary-subsection,body.dark-mode .checkbox-item,body.dark-mode .prf-check,body.dark-mode .w-import-item,body.dark-mode .wearable-preview,body.dark-mode .bmi-display{background:#111815;border-color:#2b3832;color:#e8f1ec}
body.dark-mode .tab.active,body.dark-mode .btn-sm,body.dark-mode .btn-logout,body.dark-mode .dark-toggle,body.dark-mode input,body.dark-mode select,body.dark-mode textarea,body.dark-mode .chat-input,body.dark-mode .msg-bubble,body.dark-mode .w-stat,body.dark-mode .perm-select,body.dark-mode .prf-field input,body.dark-mode .prf-field select,body.dark-mode .prf-field textarea{background:#1b2520;color:#f4faf6;border-color:#34443d}
body.dark-mode input::placeholder,body.dark-mode textarea::placeholder,body.dark-mode .chat-input::placeholder{color:#91a29a}
body.dark-mode .tab{color:#b7c6bf}
body.dark-mode .tab.active{color:#f4faf6}
body.dark-mode .pt thead,body.dark-mode .user-table thead,body.dark-mode .chat-input-area,body.dark-mode .chat-header{background:#151d19;border-color:#2b3832}
body.dark-mode .pt th,body.dark-mode .pt td,body.dark-mode .user-table th,body.dark-mode .user-table td{border-color:#26332e;color:#e8f1ec}
body.dark-mode .pt th,body.dark-mode .user-table th{color:#b7c6bf}
body.dark-mode .pt tbody tr:hover td{background:#1b2520}
body.dark-mode .chat-messages{background:#101713}
body.dark-mode .from-them .msg-bubble{background:#1b2520;color:#f4faf6;border-color:#34443d}
body.dark-mode .from-me .msg-bubble{background:#1D9E75;color:#fff}
body.dark-mode .loading-overlay{background:rgba(15,20,18,0.94)}
body.dark-mode .saved-banner{background:#183322;border-color:#3f7f54;color:#d9f4df}
body.dark-mode .alert-banner,body.dark-mode .chat-disclaimer{background:#352815;border-color:#9b6b25;color:#ffe5b5}
body.dark-mode .login-error{background:#3b1719;border-color:#a9444a;color:#ffd6d9}
body.dark-mode .role-restricted{background:#352815;border-color:#9b6b25;color:#ffe5b5}
body.dark-mode .day-badge{background:#22302a;color:#d8e5df}
body.dark-mode .proj-track{background:#25332d}
body.dark-mode .w-label,body.dark-mode .w-import-label,body.dark-mode .prf-field label{color:#b7c6bf}
body.dark-mode .w-val,body.dark-mode .w-import-val{color:#dceeff}
body.dark-mode .wearable-import{background:#101820;border-color:#3d5770;color:#dceeff}
body.dark-mode .wearable-import:hover{background:#142235}
/* LOGIN CARD THEME */
#screen-login > div{min-height:80vh}
.login-card{
background:#ffffff;
border:0.5px solid #e0e0e0;
border-radius:16px;
padding:36px 32px;
width:100%;
max-width:420px;
box-shadow:0 10px 30px rgba(0,0,0,0.04);
transition:background 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease,color 0.25s ease;
}
body.dark-mode #screen-login{background:transparent}
body.dark-mode #screen-login > div{
background:transparent !important;
}
body.dark-mode #screen-login .login-card{
background:#151d19 !important;
border-color:#2b3832 !important;
color:#f4faf6 !important;
box-shadow:0 20px 60px rgba(0,0,0,0.55);
}
body.dark-mode #screen-login .login-title,
body.dark-mode #screen-login .login-card .logo-text{color:#f4faf6 !important}
body.dark-mode #screen-login .login-subtitle,
body.dark-mode #screen-login .login-card .logo-sub,
body.dark-mode #screen-login .login-card .field label{color:#b7c6bf !important}
body.dark-mode #screen-login .login-card input{
background:#1b2520 !important;
color:#f4faf6 !important;
border-color:#34443d !important;
}
body.dark-mode #screen-login .login-card input::placeholder{color:#91a29a !important}
body.dark-mode #screen-login .login-card div[style*="background:#f9f9f7"]{
background:#101713 !important;
border-color:#26332e !important;
color:#dce6e1 !important;
}
body.dark-mode #screen-login .login-card div[style*="color:#aaa"]{color:#b7c6bf !important}
body.dark-mode #screen-login .login-card div[style*="color:#888"]{color:#c7d4ce !important}
body.dark-mode #screen-login .login-card div[style*="color:#534AB7"],
body.dark-mode #screen-login .login-card div[style*="color:#0F6E56"],
body.dark-mode #screen-login .login-card div[style*="color:#993C1D"],
body.dark-mode #screen-login .login-card div[style*="color:#A32D2D"],
body.dark-mode #screen-login .login-card div[style*="color:#185FA5"],
body.dark-mode #screen-login .login-card div[style*="color:#854F0B"]{color:#d7efe6 !important}
@media(max-width:640px){
.global-dark-toggle{top:12px;right:12px;min-width:44px;padding:7px 9px;font-size:0}
.global-dark-toggle .theme-icon{margin:0}
.stat-grid{grid-template-columns:repeat(2,1fr)}
.profile-grid,.form-grid,.form-grid-3,.pathway-grid{grid-template-columns:1fr}
.shell{padding:20px 16px}
.msg-bubble{max-width:88%}
}
/* Ensure login screen uses the full viewport so the dark gradient never appears boxed */
#screen-login > div{
min-height:calc(100vh - 56px) !important;
}
body.dark-mode #screen-login,
body.dark-mode .shell{
background:transparent !important;
}
/* =========================================================
BRAND LOGO SYSTEM
Uses assets/logo.svg for both the subtle page
watermark and the small brand marks beside [Your Brand] text.
========================================================= */
body{
position:relative;
overflow-x:hidden;
}
body::before{
content:"";
position:fixed;
inset:0;
background-image:url('./logo.svg');
background-repeat:no-repeat;
background-position:center center;
background-size:min(72vw, 820px);
opacity:0.035;
pointer-events:none;
z-index:0;
}
body.dark-mode::before{
opacity:0.055;
filter:brightness(1.18) saturate(0.95);
}
.shell{
position:relative;
z-index:1;
}
.loading-overlay,
.global-dark-toggle{
z-index:10000;
}
.logo-mark{
position:relative;
background:transparent !important;
border:none;
box-shadow:none;
overflow:hidden;
}
.logo-mark svg{
display:none !important;
}
.logo-mark::before{
content:"";
width:78%;
height:78%;
background-image:url('./logo.svg');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
display:block;
}
body.dark-mode .logo-mark{
background:transparent !important;
border-color:transparent;
box-shadow:none;
}
.login-card{
position:relative;
overflow:hidden;
}
.login-card::before{
content:"";
position:absolute;
right:-80px;
bottom:-95px;
width:260px;
height:260px;
background-image:url('./logo.svg');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:0.035;
pointer-events:none;
}
body.dark-mode .login-card::before{
opacity:0.055;
}
.login-card > *{
position:relative;
z-index:1;
}
@media(max-width:640px){
body::before{background-size:92vw;opacity:0.025}
body.dark-mode::before{opacity:0.04}
}
/* ===== PATIENT OVERVIEW SUMMARY ===== */
.patient-summary-panel{display:flex;flex-direction:column;gap:14px}
.summary-hero,.summary-card{background:rgba(255,255,255,0.94);border:0.5px solid #e0e0e0;border-radius:14px;padding:18px}
.summary-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.summary-hero h3{font-size:20px;margin:4px 0 6px;font-weight:700;color:#1a1a1a}
.summary-hero p,.summary-card p{font-size:13px;line-height:1.55;color:#666}
.summary-risk{min-width:130px;text-align:center;border:1px solid;border-radius:12px;padding:12px;background:#fff}
.summary-risk span{display:block;font-size:14px;font-weight:800;letter-spacing:.04em}.summary-risk small{display:block;font-size:11px;color:#777;margin-top:4px}
.summary-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.summary-card-wide{min-height:120px}
.summary-action{margin-top:12px;padding:10px 12px;border-radius:10px;background:#f0faf6;border:0.5px solid #9FE1CB;font-size:13px;color:#0F6E56;line-height:1.5}
.summary-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:0.5px solid #eee;font-size:13px}.summary-kv:last-child{border-bottom:none}.summary-kv span{color:#888}.summary-kv strong{font-weight:700;text-align:right;color:#1a1a1a}
.summary-metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.summary-metric{background:rgba(255,255,255,0.94);border:0.5px solid #e0e0e0;border-radius:12px;padding:14px}.summary-metric-label{font-size:11px;color:#888;margin-bottom:5px}.summary-metric-value{font-size:19px;font-weight:700;color:#1a1a1a}.summary-metric-value span{font-size:12px;color:#888}.summary-metric-trend{font-size:11px;margin-top:5px;font-weight:700;text-transform:capitalize}
.summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:0.5px solid #eee;font-size:13px}.summary-row:last-child{border-bottom:none}.summary-row strong{display:block;color:#1a1a1a}.summary-row span{display:block;color:#777;font-size:12px;margin-top:2px}.summary-row em{font-style:normal;font-weight:700;text-transform:capitalize;white-space:nowrap}
.summary-note{font-size:12px!important;color:#888!important;margin-top:10px}.summary-notes{list-style:none;display:flex;flex-direction:column;gap:10px}.summary-notes li{display:flex;gap:10px;font-size:13px;line-height:1.45}.summary-notes li span{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}.summary-notes small{display:block;color:#999;margin-top:2px}
body.dark .summary-hero,body.dark .summary-card,body.dark .summary-metric{background:rgba(18,31,25,0.92);border-color:rgba(255,255,255,0.14)}body.dark .summary-risk{background:rgba(5,15,12,0.7);border-color:currentColor}body.dark .summary-hero h3,body.dark .summary-kv strong,body.dark .summary-metric-value,body.dark .summary-row strong{color:#f4fff9}body.dark .summary-hero p,body.dark .summary-card p,body.dark .summary-kv span,body.dark .summary-row span,body.dark .summary-risk small,body.dark .summary-note{color:#b9c7c0!important}body.dark .summary-kv,body.dark .summary-row{border-bottom-color:rgba(255,255,255,0.16)}body.dark .summary-action{background:rgba(29,158,117,0.12);border-color:rgba(29,158,117,0.35);color:#bfffe9}
@media(max-width:760px){.summary-grid,.summary-metrics-grid{grid-template-columns:1fr}.summary-hero{flex-direction:column}.summary-risk{width:100%}}
/* ===== PROTOTYPE USER VIEW SWITCHER ===== */
.demo-user-switch{display:flex;align-items:center;gap:6px;font-size:11px;color:#777;background:#fff;border:0.5px solid #d7d7d7;border-radius:999px;padding:4px 8px}
.demo-user-switch span{white-space:nowrap;font-weight:600;color:#777}
.demo-user-switch select{border:none;background:transparent;font-size:12px;font-weight:600;color:#1a1a1a;outline:none;max-width:220px;cursor:pointer}
body.dark-mode .demo-user-switch{background:#1b2520;border-color:#34443d;color:#b7c6bf}
body.dark-mode .demo-user-switch span{color:#b7c6bf}
body.dark-mode .demo-user-switch select{color:#f4faf6;background:#1b2520}
@media(max-width:760px){.demo-user-switch{order:8;width:100%;justify-content:space-between}.demo-user-switch select{max-width:70%}}
/* ===== Developer panel ===== */
.dev-panel-tab{position:fixed;right:18px;bottom:18px;z-index:900;background:#111b17;color:#fff;border:none;border-radius:999px;padding:10px 14px;font-size:12px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.22);cursor:pointer}
.dev-panel{position:fixed;right:18px;bottom:68px;width:min(390px,calc(100vw - 36px));max-height:78vh;overflow:auto;z-index:901;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border:1px solid rgba(20,30,25,.12);border-radius:20px;box-shadow:0 22px 70px rgba(0,0,0,.22);padding:16px;color:#1a1a1a}
.dev-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.dev-panel-kicker{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#1D9E75;font-weight:800;margin-bottom:2px}.dev-panel-title{font-size:18px;font-weight:800;letter-spacing:-.02em}.dev-panel-close{width:28px;height:28px;border:none;border-radius:999px;background:#f2f4f1;color:#536159;font-size:20px;line-height:1;cursor:pointer}
.dev-panel-current{border:1px solid #e7ece8;background:#f8faf8;border-radius:14px;padding:10px 12px;font-size:12px;color:#647067;margin-bottom:14px}.dev-panel-current strong{display:block;color:#111b17;font-size:14px;margin-bottom:2px}.dev-panel-section{margin-top:14px}.dev-panel-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#8a968f;margin-bottom:8px}.dev-panel-user-grid{display:grid;grid-template-columns:1fr;gap:8px}
.dev-user-card{border:1px solid #e3e9e5;background:#fff;border-radius:14px;padding:10px 12px;cursor:pointer;text-align:left;transition:all .15s ease}.dev-user-card:hover{border-color:#1D9E75;transform:translateY(-1px);box-shadow:0 8px 18px rgba(29,158,117,.12)}.dev-user-card.active{border-color:#1D9E75;background:#eefaf5;box-shadow:inset 0 0 0 1px #1D9E75}.dev-user-name{font-size:13px;font-weight:800;color:#18201c;margin-bottom:3px}.dev-user-meta{font-size:11px;color:#77847d;display:flex;gap:5px;flex-wrap:wrap}
.dev-role-pill{display:inline-flex;align-items:center;border:1px solid #dfe6e1;background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;margin:0 6px 6px 0;color:#26332d}.dev-role-pill.active{background:#1D9E75;color:#fff;border-color:#1D9E75}.dev-panel-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.dev-panel-action{border:1px solid #dfe6e1;background:#fff;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:700;color:#27342e;cursor:pointer}.dev-panel-action:hover{border-color:#1D9E75;color:#1D9E75}.dev-panel-note{font-size:11px;line-height:1.4;color:#8a968f;margin-top:12px;border-top:1px solid #edf1ee;padding-top:10px}
body.dark-mode .dev-panel{background:rgba(20,28,24,.96);border-color:#324139;color:#f4faf6;box-shadow:0 22px 70px rgba(0,0,0,.45)}body.dark-mode .dev-panel-tab{background:#1D9E75;color:#06100b}body.dark-mode .dev-panel-close,body.dark-mode .dev-panel-action,body.dark-mode .dev-role-pill,body.dark-mode .dev-user-card{background:#17231d;border-color:#33443b;color:#f4faf6}body.dark-mode .dev-panel-current{background:#121c17;border-color:#33443b;color:#b7c6bf}body.dark-mode .dev-panel-current strong,body.dark-mode .dev-user-name{color:#f4faf6}body.dark-mode .dev-user-meta,body.dark-mode .dev-panel-note,body.dark-mode .dev-panel-label{color:#a6b6ae}body.dark-mode .dev-user-card.active{background:#11291f;border-color:#1D9E75}body.dark-mode .dev-role-pill.active{background:#1D9E75;color:#06100b;border-color:#1D9E75}@media(max-width:760px){.dev-panel{right:12px;left:12px;bottom:62px;width:auto}.dev-panel-tab{right:12px;bottom:12px}}
/* PATCHED EXTENSIONS */
.doctor-overview-intro{font-size:12px;color:#888;margin-bottom:14px;line-height:1.6}
.bloods-template-row{display:flex;gap:8px;flex-wrap:wrap}
.bloods-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.overview-block{background:#f8faf8;border:0.5px solid #dfe8e2;border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.7;color:#1b2820}
.overview-mini-block{background:#fbfcfb;border:0.5px solid #ebf0ec;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.65;color:#2c3f35}
.summary-label{font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px}
.ceo-hero-card{margin-bottom:18px;background:linear-gradient(135deg,#0d2d24,#153f33);color:#fff;border:none}
.ceo-kicker{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;opacity:.75;margin-bottom:8px}
.ceo-title{font-size:28px;font-weight:700;line-height:1.15;margin-bottom:8px}
.ceo-copy{font-size:14px;line-height:1.6;opacity:.92}
.ceo-mini-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.72}
.ceo-savings-value{font-size:32px;font-weight:700;margin-top:6px}
.ceo-savings-note{font-size:12px;opacity:.82;margin-top:6px}
.ceo-footnote{font-size:12px;color:#888;margin-top:10px;line-height:1.6}
.ceo-pill-row{display:flex;gap:10px;flex-wrap:wrap}
body.dark-mode .overview-block{background:#13201a;border-color:#2b3832;color:#eaf4ee}
body.dark-mode .overview-mini-block{background:#101713;border-color:#2b3832;color:#dbe8e2}
body.dark-mode .doctor-overview-intro, body.dark-mode .summary-label, body.dark-mode .ceo-footnote{color:#b7c6bf}
body.dark-mode .logo-mark{background:transparent !important;border-color:transparent;box-shadow:none}
@media(max-width:640px){.bloods-check-grid{grid-template-columns:1fr}.ceo-title{font-size:24px}}
/* ===== v2 additions: toast + modal + small UI tweaks ===== */
#toast-host {
position: fixed; top: 20px; right: 20px; z-index: 10000;
display: flex; flex-direction: column; gap: 8px; pointer-events: none;
max-width: calc(100vw - 40px);
}
.toast {
background: #1a1a1a; color: #fff; padding: 12px 18px; border-radius: 8px;
font-size: 13px; line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
pointer-events: auto; animation: toast-in 0.2s ease;
max-width: 380px; word-wrap: break-word;
}
.toast-success { background: #0F6E56; }
.toast-error { background: #A32D2D; }
.toast-info { background: #185FA5; }
.toast-out { opacity: 0; transform: translateX(20px); transition: all 0.25s ease; }
@keyframes toast-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
display: flex; align-items: center; justify-content: center;
z-index: 10001; animation: toast-in 0.15s ease;
}
.modal-card {
background: #fff; border-radius: 12px; padding: 24px;
max-width: 440px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-height: 85vh; overflow-y: auto;
}
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1a1a1a; }
.modal-body { font-size: 14px; color: #555; margin-bottom: 20px; line-height: 1.5; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-danger-solid { background: #A32D2D !important; color: #fff !important; }
/* role tag in user table */
.role-tag {
display: inline-block; font-size: 11px; padding: 2px 8px;
background: #EEEDFE; color: #534AB7; border-radius: 10px;
margin-right: 4px; margin-bottom: 2px;
}
/* dark-mode adjustments */
body.dark-mode .modal-card { background: #151d19; color: #e8f1ec; }
body.dark-mode .modal-body { color: #b7c6bf; }
body.dark-mode .modal-title { color: #e8f1ec; }
body.dark-mode .role-tag { background: rgba(83, 74, 183, 0.25); color: #c5bfff; }
/* failed message styling */
.msg-bubble.failed { opacity: 0.7; border: 1px dashed #A32D2D; }
/* ===== v3: B2C Pricing, Onboarding, Questionnaire ===== */
/* Pricing page */
.pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px) { .pkg-grid { grid-template-columns:1fr; } }
.pkg-card { background:#fff; border:2px solid #e5e5e5; border-radius:16px; padding:28px; position:relative; transition:box-shadow 0.2s; }
.pkg-card:hover { box-shadow:0 8px 32px rgba(0,0,0,0.1); }
.pkg-popular { box-shadow:0 4px 24px rgba(83,74,183,0.15); }
.pkg-popular-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; color:#fff; padding:4px 16px; border-radius:20px; white-space:nowrap; text-transform:uppercase; letter-spacing:0.05em; }
.pkg-header { margin-bottom:20px; }
.pkg-name { font-size:22px; font-weight:700; margin-bottom:4px; }
.pkg-tagline { font-size:13px; color:#888; line-height:1.4; }
.pkg-price { margin:16px 0 4px; }
.pkg-price-amount { font-size:36px; font-weight:700; }
.pkg-price-period { font-size:14px; color:#888; }
.pkg-saving { font-size:12px; color:#0F6E56; margin-bottom:20px; font-weight:500; }
.pkg-features { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:8px; }
.pkg-features li { font-size:13px; color:#444; display:flex; align-items:flex-start; gap:8px; }
.pkg-check { flex-shrink:0; font-weight:700; }
.pkg-cta { width:100%; padding:12px; font-size:14px; }
.billing-toggle { display:inline-flex; background:#f0f0ee; border-radius:8px; padding:3px; }
.billing-toggle-btn { border:none; background:none; padding:8px 16px; border-radius:6px; font-size:13px; cursor:pointer; color:#666; transition:all 0.15s; }
.billing-toggle-btn.active { background:#fff; color:#1a1a1a; font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,0.1); }
.save-badge { background:#EAF3DE; color:#3B6D11; font-size:10px; padding:2px 6px; border-radius:4px; margin-left:6px; font-weight:600; }
.currency-select { border:1px solid #e0e0e0; border-radius:8px; padding:8px 12px; font-size:13px; background:#fff; cursor:pointer; }
.btn-link-sm { background:none; border:none; cursor:pointer; font-size:13px; padding:0; text-decoration:underline; }
/* Package selected banner */
.pkg-selected-banner { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:10px; }
/* Onboarding pipeline */
.onboard-checklist-mini span { font-size:11px; }
/* Pre-assessment */
.legal-modal { max-width:700px !important; }
.legal-content h2 { font-size:20px; font-weight:700; color:#1a1a1a; margin-bottom:4px; }
.legal-content h3 { font-size:14px; font-weight:700; color:#1a1a1a; margin:16px 0 6px; }
.legal-content p { font-size:13px; color:#444; line-height:1.7; margin-bottom:10px; }
.legal-content .legal-meta { font-size:11px; color:#aaa; margin-bottom:20px; }
.legal-content strong { color:#1a1a1a; }
/* Stripe card element */
#card-element { padding:12px; border:1px solid #e0e0e0; border-radius:8px; min-height:42px; }
.demo-payment-notice { text-align:center; padding:20px; font-size:13px; color:#888; }
/* Bulk upload */
.bulk-col-badge { display:inline-block; padding:3px 8px; border-radius:4px; font-size:11px; font-weight:600; }
/* Dark mode adjustments */
body.dark-mode .pkg-card { background:#151d19; border-color:#2a3e35; }
body.dark-mode .pkg-card:hover { box-shadow:0 8px 32px rgba(0,0,0,0.3); }
body.dark-mode .billing-toggle { background:#1a2b23; }
body.dark-mode .billing-toggle-btn.active { background:#243b30; color:#e8f1ec; }
body.dark-mode .currency-select { background:#151d19; color:#e8f1ec; border-color:#2a3e35; }
body.dark-mode .legal-content h2, body.dark-mode .legal-content h3, body.dark-mode .legal-content strong { color:#e8f1ec; }
body.dark-mode .legal-content p { color:#b7c6bf; }
body.dark-mode #card-element { background:#151d19; border-color:#2a3e35; }
/* ===== Demo account switcher ===== */
.dev-account-btn {
display: block; width: 100%; text-align: left;
padding: 8px 10px 8px 12px; margin-bottom: 6px;
background: #f9f9f7; border: 1px solid #e5e5e5; border-radius: 6px;
cursor: pointer; transition: background 0.15s;
}
.dev-account-btn:hover { background: #f0f0ee; }
.dev-account-active { background: #EEEDFE !important; border-color: #534AB7 !important; }
.dev-account-label { font-size: 12px; font-weight: 600; color: #1a1a1a; }
.dev-account-sub { font-size: 11px; color: #888; margin-top: 1px; }
.dev-current-tag {
display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
background: #534AB7; color: #fff; padding: 1px 5px; border-radius: 4px;
vertical-align: middle; margin-left: 4px; letter-spacing: 0.04em;
}
body.dark-mode .dev-account-btn { background: #1a2b23; border-color: #2a3e35; }
body.dark-mode .dev-account-btn:hover { background: #243b30; }
body.dark-mode .dev-account-active { background: rgba(83,74,183,0.2) !important; }
body.dark-mode .dev-account-label { color: #e8f1ec; }
/* ===== User Management Screen ===== */
.user-mgmt-grid {
display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start;
min-height: 500px;
}
@media(max-width: 800px) { .user-mgmt-grid { grid-template-columns: 1fr; } }
.user-list-panel {
background: #f9f9f7; border-radius: 10px; overflow: hidden;
border: 1px solid #e5e5e5; max-height: 75vh; overflow-y: auto;
}
.user-group-label {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: #888; padding: 10px 14px 6px; background: #f0f0ee;
display: flex; align-items: center; justify-content: space-between;
}
.user-group-label span {
background: #e0e0e0; color: #666; font-size: 10px; font-weight: 700;
padding: 1px 6px; border-radius: 8px;
}
.user-list-item {
display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
cursor: pointer; transition: background 0.12s; border-bottom: 1px solid #eee;
}
.user-list-item:hover { background: #f0f0ee; }
.user-list-item.selected { background: #EEEDFE; }
.user-list-avatar {
width: 32px; height: 32px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 13px;
font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-list-info { flex: 1; min-width: 0; }
.user-list-name { font-size: 13px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-list-sub { font-size: 11px; color: #888; margin-top: 1px; }
.user-list-roles { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.role-chip { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; }
.user-list-meta { font-size: 11px; color: #aaa; flex-shrink: 0; }
.user-edit-panel {
background: #fff; border-radius: 10px; border: 1px solid #e5e5e5;
max-height: 75vh; overflow-y: auto;
}
.user-edit-header {
display: flex; align-items: center; gap: 14px; padding: 20px 20px 16px;
border-bottom: 1px solid #f0f0ee;
}
.user-edit-avatar {
width: 44px; height: 44px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 18px;
font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-edit-name { font-size: 17px; font-weight: 700; color: #1a1a1a; }
.user-edit-username { font-size: 12px; color: #aaa; margin-top: 2px; }
.user-edit-section { padding: 16px 20px; border-bottom: 1px solid #f0f0ee; }
.user-edit-section:last-child { border-bottom: none; }
.user-edit-section-title {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: #888; margin-bottom: 10px;
}
.role-group-label {
font-size: 11px; font-weight: 600; color: #aaa; text-transform: uppercase;
letter-spacing: 0.04em; margin: 10px 0 6px;
}
.role-toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 4px; }
.role-toggle-card {
border: 1.5px solid #e5e5e5; border-radius: 8px; padding: 10px;
cursor: pointer; transition: all 0.15s;
}
.role-toggle-card:hover { border-color: #ccc; background: #f9f9f7; }
.role-toggle-card.active { }
.role-toggle-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.role-toggle-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.role-toggle-name { font-size: 12px; font-weight: 700; flex: 1; }
.role-toggle-state { font-size: 10px; font-weight: 700; color: #aaa; }
.role-toggle-card.active .role-toggle-state { color: inherit; }
.role-toggle-desc { font-size: 11px; color: #888; line-height: 1.4; }
.assign-toggle-list { display: flex; flex-direction: column; gap: 6px; }
.assign-toggle-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; background: #f9f9f7; border-radius: 8px;
border: 1px solid #e5e5e5; transition: all 0.15s;
}
.assign-toggle-row.assigned { background: #EAF3DE; border-color: #97C459; }
.assign-toggle-btn {
font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 6px;
background: #f0f0ee; color: #666; cursor: pointer; border: none;
white-space: nowrap; flex-shrink: 0;
}
.assign-toggle-btn.assigned { background: #A32D2D20; color: #A32D2D; }
/* Dark mode */
body.dark-mode .user-list-panel { background: #111815; border-color: #2b3832; }
body.dark-mode .user-group-label { background: #1a2b23; color: #6b8a7a; }
body.dark-mode .user-list-item { border-color: #1a2b23; }
body.dark-mode .user-list-item:hover { background: #1a2b23; }
body.dark-mode .user-list-item.selected { background: rgba(83,74,183,0.2); }
body.dark-mode .user-list-name { color: #e8f1ec; }
body.dark-mode .user-edit-panel { background: #151d19; border-color: #2b3832; }
body.dark-mode .user-edit-header,.user-edit-section { border-color: #2b3832; }
body.dark-mode .user-edit-name { color: #e8f1ec; }
body.dark-mode .role-toggle-card { border-color: #2b3832; }
body.dark-mode .role-toggle-card:hover { background: #1a2b23; }
body.dark-mode .assign-toggle-row { background: #1a2b23; border-color: #2b3832; }
body.dark-mode .assign-toggle-row.assigned { background: rgba(151,196,89,0.1); border-color: rgba(151,196,89,0.3); }
body.dark-mode .assign-toggle-btn { background: #243b30; color: #b7c6bf; }
/* ===== Email Verification OTP ===== */
.otp-row {
display: flex; gap: 8px; justify-content: center; margin: 0 auto; flex-wrap: nowrap;
}
.otp-input {
width: 42px; height: 56px; border: 2px solid #e0e0e0; border-radius: 10px;
text-align: center; font-size: 24px; font-weight: 700; color: #1a1a1a;
outline: none; transition: border-color 0.15s; background: #fff;
-moz-appearance: textfield;
}
.otp-input:focus { border-color: #534AB7; box-shadow: 0 0 0 3px rgba(83,74,183,0.1); }
.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* ===== Welcome / Teaser ===== */
.welcome-hero {
background: linear-gradient(135deg, #f9f9f7 0%, #EEEDFE 100%);
border-radius: 16px; padding: 36px; margin-bottom: 20px;
border: 1px solid #e5e5e5;
}
.welcome-stat {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 500; color: #444;
background: #fff; padding: 6px 12px; border-radius: 20px;
border: 1px solid #e0e0e0;
}
.welcome-stat span { color: #0F6E56; font-weight: 700; }
.teaser-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media(max-width: 700px) { .teaser-grid { grid-template-columns: 1fr; } }
.teaser-card {
position: relative; border-radius: 12px; border: 1px solid #e5e5e5;
overflow: hidden; background: #fff;
}
.teaser-inner {
padding: 18px; filter: blur(4px); user-select: none; pointer-events: none;
opacity: 0.6;
}
.teaser-lock {
position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; font-size: 13px; font-weight: 600;
color: #534AB7; background: rgba(255,255,255,0.7); z-index: 2;
backdrop-filter: blur(2px);
}
.teaser-label { font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: #888; margin-bottom: 10px; }
.teaser-vitals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.teaser-vital { background: #f9f9f7; border-radius: 8px; padding: 10px; }
.teaser-vital-label { font-size: 11px; color: #aaa; margin-bottom: 3px; }
.teaser-vital-value { font-size: 20px; font-weight: 700; color: #1a1a1a; }
.teaser-proj-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: #888;
}
.teaser-proj-bar { height: 8px; border-radius: 4px; flex-shrink: 0; }
.teaser-chat { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.teaser-msg { max-width: 85%; }
.teaser-msg.from-them { align-self: flex-start; }
.teaser-msg.from-me { align-self: flex-end; }
.teaser-msg-name { font-size: 10px; color: #aaa; margin-bottom: 3px; }
.teaser-msg-bubble {
font-size: 12px; padding: 8px 12px; border-radius: 12px; line-height: 1.4;
background: #f0f0ee; color: #444;
}
.teaser-msg.from-me .teaser-msg-bubble { background: #EEEDFE; color: #534AB7; }
.teaser-plan-row {
display: flex; align-items: center; gap: 8px; font-size: 13px;
color: #444; margin-bottom: 8px;
}
.teaser-plan-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Welcome package grid */
.welcome-pkg-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media(max-width: 800px) { .welcome-pkg-grid { grid-template-columns: 1fr; } }
.welcome-pkg-card {
background: #fff; border: 2px solid #e5e5e5; border-radius: 14px;
padding: 24px; position: relative; transition: box-shadow 0.2s;
}
.welcome-pkg-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.welcome-pkg-card.popular { border-width: 2px; }
.welcome-pkg-badge {
position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
font-size: 10px; font-weight: 700; color: #fff; padding: 3px 14px;
border-radius: 20px; white-space: nowrap; text-transform: uppercase;
letter-spacing: 0.05em;
}
.welcome-pkg-name { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.welcome-pkg-price { margin-bottom: 2px; }
.welcome-pkg-amount { font-size: 28px; font-weight: 700; }
.welcome-pkg-period { font-size: 13px; color: #888; }
.welcome-pkg-monthly { font-size: 12px; color: #aaa; margin-bottom: 14px; }
.welcome-pkg-features {
list-style: none; padding: 0; margin: 0 0 4px;
display: flex; flex-direction: column; gap: 6px;
}
.welcome-pkg-features li { font-size: 13px; color: #555; }
/* Dark mode adjustments */
body.dark-mode .otp-input { background: #151d19; border-color: #2a3e35; color: #e8f1ec; }
body.dark-mode .welcome-hero { background: linear-gradient(135deg, #151d19 0%, #1c1a3a 100%); border-color: #2a3e35; }
body.dark-mode .welcome-stat { background: #1a2b23; border-color: #2a3e35; color: #b7c6bf; }
body.dark-mode .teaser-card { background: #151d19; border-color: #2a3e35; }
body.dark-mode .teaser-lock { background: rgba(21,29,25,0.75); }
body.dark-mode .teaser-vital { background: #1a2b23; }
body.dark-mode .teaser-vital-value { color: #e8f1ec; }
body.dark-mode .teaser-msg-bubble { background: #1a2b23; color: #b7c6bf; }
body.dark-mode .teaser-msg.from-me .teaser-msg-bubble { background: rgba(83,74,183,0.2); color: #c5bfff; }
body.dark-mode .welcome-pkg-card { background: #151d19; border-color: #2a3e35; }
body.dark-mode .welcome-pkg-features li { color: #b7c6bf; }
/* ===== Sales Page ===== */
.sales-hero {
background: linear-gradient(135deg, #050f0c 0%, #0d1f3c 100%);
border-radius: 20px; padding: 48px; margin-bottom: 48px; color: #fff;
}
.sales-hero-kicker {
font-size: 13px; font-weight: 600; color: #97C459; text-transform: uppercase;
letter-spacing: 0.08em; margin-bottom: 16px;
}
.sales-hero-headline {
font-size: 36px; font-weight: 800; line-height: 1.2; margin-bottom: 20px;
color: #fff;
}
@media(max-width:700px) { .sales-hero-headline { font-size: 26px; } }
.sales-hero-sub {
font-size: 15px; line-height: 1.7; color: #b0c4c0; margin-bottom: 36px; max-width: 620px;
}
.sales-stat-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media(max-width:800px) { .sales-stat-row { grid-template-columns: repeat(2, 1fr); } }
.sales-stat { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 16px; }
.sales-stat-num { font-size: 28px; font-weight: 800; color: #97C459; margin-bottom: 4px; }
.sales-stat-label { font-size: 12px; color: #8a9fa0; line-height: 1.4; }
.sales-section { margin-bottom: 56px; }
.sales-section-kicker {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
color: #534AB7; margin-bottom: 8px;
}
.sales-section-title {
font-size: 26px; font-weight: 700; color: #1a1a1a; margin-bottom: 32px; line-height: 1.3; max-width: 680px;
}
.sales-features-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media(max-width:900px) { .sales-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:600px) { .sales-features-grid { grid-template-columns: 1fr; } }
.sales-feature-card {
background: #fff; border: 1px solid #e5e5e5; border-radius: 12px;
padding: 20px; transition: box-shadow 0.2s;
}
.sales-feature-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
.sales-feature-icon {
width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center;
justify-content: center; font-size: 20px; margin-bottom: 12px;
}
.sales-feature-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; line-height: 1.3; }
.sales-feature-body { font-size: 13px; color: #555; line-height: 1.6; }
.sales-why-section {
background: #f9f9f7; border-radius: 16px; padding: 40px; margin-bottom: 48px;
border: 1px solid #e5e5e5;
}
.sales-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media(max-width:700px) { .sales-why-grid { grid-template-columns: 1fr; } }
.sales-why-item {
display: flex; gap: 12px; font-size: 14px; color: #444; line-height: 1.5;
}
.sales-why-icon {
width: 24px; height: 24px; background: #EAF3DE; border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 12px; color: #0F6E56;
font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.sales-cta-section {
text-align: center; padding: 48px; background: linear-gradient(135deg, #EEEDFE 0%, #EAF3DE 100%);
border-radius: 16px; border: 1px solid #e0e0e0;
}
/* ===== Plan Selection ===== */
.plan-select-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media(max-width:1000px) { .plan-select-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:700px) { .plan-select-grid { grid-template-columns: 1fr; } }
.plan-select-card {
border: 2px solid #e5e5e5; border-radius: 12px; padding: 16px;
cursor: pointer; transition: all 0.15s; position: relative;
background: #fff;
}
.plan-select-card:hover { border-color: #ccc; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.plan-select-card.popular { border-color: #534AB7; }
.plan-select-card.selected { }
.plan-badge {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
font-size: 9px; font-weight: 700; color: #fff; padding: 2px 10px;
border-radius: 10px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em;
}
.plan-icon {
width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center;
justify-content: center; font-size: 16px; flex-shrink: 0;
}
.plan-name { font-size: 14px; font-weight: 700; }
.plan-tagline { font-size: 11px; color: #888; margin-top: 2px; line-height: 1.3; }
.plan-select-check {
width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
justify-content: center; font-size: 11px; color: #fff; font-weight: 700; flex-shrink: 0;
transition: all 0.15s;
}
.plan-price-row { margin: 10px 0 3px; }
.plan-price-value { font-size: 20px; font-weight: 800; }
.plan-price-label { font-size: 11px; color: #888; }
.plan-total-note { font-size: 11px; color: #888; margin-bottom: 8px; }
.plan-feature-list {
list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px;
}
.plan-feature-list li { font-size: 11px; color: #555; display: flex; gap: 5px; line-height: 1.3; }
/* ===== Unlock / Welcome Screen ===== */
.unlock-burst { font-size: 56px; margin-bottom: 16px; animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop-in { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.unlock-sub-card {
background: linear-gradient(135deg, #050f0c 0%, #0d1f3c 100%);
border-radius: 14px; padding: 24px; color: #fff; margin-bottom: 8px;
}
.unlock-sub-card .unlock-plan-detail { color: #fff; }
.unlock-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.unlock-feature { display: flex; gap: 10px; font-size: 14px; color: #333; line-height: 1.5; }
.unlock-tick { font-size: 16px; font-weight: 700; flex-shrink: 0; }
.next-step-card {
display: flex; gap: 14px; padding: 14px 16px; background: #f9f9f7;
border-radius: 10px; margin-bottom: 10px; border: 1px solid #e5e5e5;
}
.next-step-icon { font-size: 24px; flex-shrink: 0; }
.next-step-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; }
.next-step-desc { font-size: 13px; color: #666; line-height: 1.5; }
/* Dark mode */
body.dark-mode .sales-hero { background: linear-gradient(135deg, #030a07 0%, #080e1f 100%); }
body.dark-mode .sales-why-section { background: #111815; border-color: #2b3832; }
body.dark-mode .sales-feature-card { background: #151d19; border-color: #2b3832; }
body.dark-mode .sales-feature-title { color: #e8f1ec; }
body.dark-mode .sales-feature-body { color: #8fa89f; }
body.dark-mode .sales-why-item { color: #b7c6bf; }
body.dark-mode .sales-section-title { color: #e8f1ec; }
body.dark-mode .sales-cta-section { background: linear-gradient(135deg, #1c1a3a 0%, #0d1f0d 100%); border-color: #2b3832; }
body.dark-mode .plan-select-card { background: #151d19; border-color: #2b3832; }
body.dark-mode .plan-select-card:hover { border-color: #3a4e45; }
body.dark-mode .plan-name { color: #e8f1ec; }
body.dark-mode .plan-feature-list li { color: #8fa89f; }
body.dark-mode .next-step-card { background: #151d19; border-color: #2b3832; }
body.dark-mode .next-step-title { color: #e8f1ec; }
body.dark-mode .next-step-desc { color: #8fa89f; }
body.dark-mode .unlock-feature { color: #b7c6bf; }
/* ===== Complimentary Access Grant ===== */
.grant-active-banner {
background: linear-gradient(135deg, #EAF3DE, #f0faea);
border: 1.5px solid #97C459; border-radius: 10px; padding: 14px 16px;
}
.grant-active-label {
font-size: 13px; font-weight: 700; color: #3B6D11; margin-bottom: 3px;
}
.grant-active-plan { font-size: 12px; color: #555; }
.grant-active-note { font-size: 12px; color: #777; margin-top: 4px; font-style: italic; }
.grant-revoke-btn {
background: #fff !important; color: #A32D2D !important;
border: 1px solid #A32D2D !important; white-space: nowrap;
}
body.dark-mode .grant-active-banner {
background: rgba(151,196,89,0.1); border-color: rgba(151,196,89,0.4);
}
body.dark-mode .grant-active-label { color: #97C459; }
body.dark-mode .grant-active-plan, body.dark-mode .grant-active-note { color: #8fa89f; }
/* ===== Empty states ===== */
.empty-state {
text-align: center; padding: 32px 20px; color: #aaa;
}
.empty-icon { font-size: 28px; margin-bottom: 8px; }
.empty-title { font-size: 14px; font-weight: 600; color: #888; margin-bottom: 4px; }
.empty-body { font-size: 12px; color: #bbb; line-height: 1.5; }
/* ===== Pre-assessment summary ===== */
.pa-summary-card {
background: #f9f9f7; border-radius: 12px; border: 1px solid #e5e5e5; overflow: hidden;
}
.pa-summary-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid #eee; background: #fff;
}
.pa-summary-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
}
.pa-block {
padding: 12px 16px; border-bottom: 1px solid #eee; border-right: 1px solid #eee;
}
.pa-block:nth-child(even) { border-right: none; }
.pa-block-label {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: #aaa; margin-bottom: 3px;
}
.pa-block-value { font-size: 13px; color: #333; line-height: 1.4; }
.pa-concerns-block {
padding: 12px 16px; border-top: 1px solid #eee; background: #EEEDFE;
}
.pa-self-vitals {
padding: 12px 16px; border-top: 1px solid #eee; background: #EAF3DE;
}
body.dark-mode .pa-summary-card { background: #111815; border-color: #2b3832; }
body.dark-mode .pa-summary-header { background: #151d19; border-color: #2b3832; }
body.dark-mode .pa-summary-header div:first-child { color: #e8f1ec; }
body.dark-mode .pa-block { border-color: #2b3832; }
body.dark-mode .pa-block-value { color: #b7c6bf; }
body.dark-mode .pa-concerns-block { background: rgba(83,74,183,0.15); border-color: #2b3832; }
body.dark-mode .pa-self-vitals { background: rgba(151,196,89,0.1); border-color: #2b3832; }
/* ===== Clinician Summary ===== */
.clinsum-wrap { display: flex; flex-direction: column; gap: 16px; }
.clinsum-card { border-radius: 12px; }
.clinsum-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.clinsum-title { font-size: 14px; font-weight: 700; }
.clinsum-badge-edit { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: #EAF3DE; color: #3B6D11; padding: 3px 8px; border-radius: 8px; }
.clinsum-badge-view { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: #f0f0ee; color: #aaa; padding: 3px 8px; border-radius: 8px; }
.clinsum-textarea { width: 100%; min-height: 120px; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 13px; line-height: 1.6; resize: vertical; }
.clinsum-readonly { font-size: 13px; color: #444; line-height: 1.7; padding: 10px 12px; background: #f9f9f7; border-radius: 8px; min-height: 60px; }
/* ===== CPD Portfolio ===== */
.cpd-summary-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
@media(max-width:700px) { .cpd-summary-bar { grid-template-columns: repeat(2,1fr); } }
.cpd-stat { text-align: center; padding: 16px 12px; background: #fff; border-radius: 10px; border: 1px solid #e5e5e5; }
.cpd-stat-num { font-size: 32px; font-weight: 800; color: #0F6E56; }
.cpd-stat-label { font-size: 11px; color: #888; margin-top: 3px; line-height: 1.3; }
.cpd-activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 10px; margin-bottom: 20px; }
.cpd-activity-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; padding: 14px 12px; text-align: center; transition: box-shadow 0.15s; }
.cpd-activity-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.cpd-activity-card.cpd-zero { opacity: 0.45; }
.cpd-activity-icon { font-size: 24px; margin-bottom: 6px; }
.cpd-activity-count { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.cpd-activity-label { font-size: 11px; color: #666; line-height: 1.3; }
/* ===== Dark mode comprehensive fixes ===== */
body.dark-mode { color: #e8f1ec; }
body.dark-mode .page-title,
body.dark-mode .card-title,
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4,
body.dark-mode .biz-name,
body.dark-mode .user-edit-name,
body.dark-mode strong { color: #e8f1ec; }
body.dark-mode .page-sub,
body.dark-mode .biz-meta,
body.dark-mode .biz-stat,
body.dark-mode label,
body.dark-mode p,
body.dark-mode .vital-label,
body.dark-mode .detail-key,
body.dark-mode .tl-date,
body.dark-mode .tl-text,
body.dark-mode .proj-label,
body.dark-mode .summary-label { color: #8fa89f; }
body.dark-mode .vital-value,
body.dark-mode .detail-val,
body.dark-mode .proj-val { color: #e8f1ec; }
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
background: #1a2b23; color: #e8f1ec; border-color: #2a3e35;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #4a6a5a; }
body.dark-mode .profile-card { background: #151d19; border-color: #2b3832; }
body.dark-mode .stat { background: #151d19; border-color: #2b3832; }
body.dark-mode .stat-value { color: #e8f1ec; }
body.dark-mode .stat-label { color: #8fa89f; }
body.dark-mode .biz-card { background: #151d19; border-color: #2b3832; }
body.dark-mode .step-card { background: #151d19; border-color: #2b3832; }
body.dark-mode .step-card h4 { color: #e8f1ec; }
body.dark-mode .step-card p { color: #8fa89f; }
body.dark-mode .tab-row { background: #1a2b23; }
body.dark-mode .tab { color: #8fa89f; }
body.dark-mode .tab.active { background: #243b30; color: #e8f1ec; }
body.dark-mode .msg-bubble { background: #1a2b23; color: #b7c6bf; }
body.dark-mode .msg-sender { color: #8fa89f; }
body.dark-mode .msg-time { color: #4a6a5a; }
body.dark-mode .clinsum-textarea { background: #1a2b23; color: #e8f1ec; border-color: #2a3e35; }
body.dark-mode .clinsum-readonly { background: #1a2b23; color: #b7c6bf; }
body.dark-mode .clinsum-title { color: inherit; }
body.dark-mode .cpd-stat { background: #151d19; border-color: #2b3832; }
body.dark-mode .cpd-stat-num { color: #97C459; }
body.dark-mode .cpd-stat-label { color: #8fa89f; }
body.dark-mode .cpd-activity-card { background: #151d19; border-color: #2b3832; }
body.dark-mode .cpd-activity-label { color: #8fa89f; }
body.dark-mode .prf-section { background: #151d19; border-color: #2b3832; }
body.dark-mode .prf-section-title { color: #7b8ce0; }
body.dark-mode .prf-vitals-table th { background: #1a2b23; color: #8fa89f; }
body.dark-mode .prf-vitals-table td { border-color: #2b3832; color: #e8f1ec; }
body.dark-mode .form-section { background: #151d19; border-color: #2b3832; }
body.dark-mode .form-section h3 { color: #e8f1ec; }
body.dark-mode .alert-banner { background: #3a1a1a; border-color: #A32D2D; color: #f5a0a0; }
body.dark-mode .risk-pill.pill-green { background: rgba(15,110,86,0.25); color: #97C459; }
body.dark-mode .risk-pill.pill-amber { background: rgba(133,79,11,0.25); color: #EF9F27; }
body.dark-mode .risk-pill.pill-red { background: rgba(163,45,45,0.25); color: #f08080; }
body.dark-mode .pa-summary-card { background: #151d19; }
body.dark-mode .pa-summary-header { background: #1a2b23; border-color: #2b3832; }
body.dark-mode .pa-block { border-color: #2b3832; }
body.dark-mode .pa-block-value { color: #b7c6bf; }
body.dark-mode .empty-state .empty-title { color: #6b8a7a; }
body.dark-mode .empty-state .empty-body { color: #4a6a5a; }
body.dark-mode .login-card { background: #151d19; border-color: #2b3832; }
body.dark-mode .login-title { color: #e8f1ec; }
body.dark-mode .login-subtitle { color: #8fa89f; }
body.dark-mode .wearable-card { background: #1a2b23; border-color: #2b3832; }
body.dark-mode .wearable-title { color: #8fa89f; }
body.dark-mode .w-stat .w-label { color: #8fa89f; }
body.dark-mode .w-stat .w-val { color: #e8f1ec; }
body.dark-mode .prf-field label { color: #8fa89f; }
body.dark-mode .acvpu-btn { background: #1a2b23; border-color: #2a3e35; color: #e8f1ec; }
body.dark-mode .user-edit-section { border-color: #2b3832; }
body.dark-mode .user-edit-section-title { color: #6b8a7a; }
body.dark-mode .sales-feature-card { background: #151d19; }
body.dark-mode .sales-feature-title { color: #e8f1ec; }
body.dark-mode .sales-feature-body { color: #8fa89f; }
body.dark-mode .otp-input { background: #1a2b23; border-color: #2a3e35; color: #e8f1ec; }
body.dark-mode .plan-select-card { background: #151d19; }
body.dark-mode .plan-name { color: #e8f1ec; }
body.dark-mode .unlock-feature { color: #b7c6bf; }
body.dark-mode .next-step-card { background: #151d19; }
body.dark-mode .next-step-title { color: #e8f1ec; }
body.dark-mode .next-step-desc { color: #8fa89f; }
body.dark-mode .breadcrumb { color: #6b8a7a; }
body.dark-mode .topbar { border-color: #2b3832; }
/* ===== Auto-generated summary banner ===== */
.clinsum-autogen-banner {
font-size: 11px; font-weight: 600; color: #854F0B;
background: #FEF3CD; border: 1px solid #EF9F27;
padding: 6px 12px; border-radius: 6px; margin-bottom: 8px;
}
body.dark-mode .clinsum-autogen-banner {
background: rgba(133,79,11,0.2); border-color: rgba(239,159,39,0.4); color: #EF9F27;
}
/* ===== CEO Board enhancements ===== */
.ceo-highlight-card {
background: linear-gradient(135deg, #f0fdf4, #EAF3DE);
border-left: 4px solid #0F6E56;
}
body.dark-mode .ceo-highlight-card {
background: linear-gradient(135deg, #0a1f10, #111f15);
border-left-color: #97C459;
}
body.dark-mode .ceo-highlight-card * { color: #b7c6bf; }
/* ===== Wearable import fix ===== */
.wearable-import {
border: 2px dashed #185FA5;
border-radius: 12px;
padding: 28px 20px;
text-align: center;
background: #f4f8ff;
cursor: pointer;
display: block;
transition: all 0.15s;
}
.wearable-import:hover {
background: #e8f0ff;
border-color: #0F4A8A;
}
body.dark-mode .wearable-import {
background: #0d1820;
border-color: #3d5770;
}
body.dark-mode .wearable-import:hover {
background: #142235;
}
/* ===== Structured consultant summary sections ===== */
.clinsum-section { margin-bottom: 12px; }
.clinsum-section-heading {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: #534AB7; margin-bottom: 4px;
}
.clinsum-section-body { font-size: 13px; color: #333; line-height: 1.6; }
body.dark-mode .clinsum-section-heading { color: #c5bfff; }
body.dark-mode .clinsum-section-body { color: #b7c6bf; }
/* ===== Patient Dashboard ===== */
.pulse-score-widget {
text-align:center;padding:12px 16px;border:2px solid #0F6E56;border-radius:12px;min-width:80px;
}
.pulse-score-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#888;margin-bottom:2px; }
.pulse-score-num { font-size:32px;font-weight:800;line-height:1; }
.pulse-score-trend { font-size:11px;margin-top:2px; }
.progress-metric-row { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f0f0ee; }
.progress-metric-row:last-child { border-bottom:none; }
.progress-metric-label { font-size:12px;color:#888;flex:1; }
.progress-metric-val { font-size:14px;font-weight:700;color:#1a1a1a; }
.progress-metric-delta { font-size:12px;font-weight:600; }
.healthspan-viz { padding:4px 0; }
.healthspan-scenario { margin-bottom:8px; }
.healthspan-label { font-size:11px;font-weight:600;margin-bottom:6px; }
.healthspan-bar-wrap { display:flex;height:28px;border-radius:6px;overflow:hidden;gap:2px; }
.healthspan-bar-seg { display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;padding:0 8px;min-width:0;overflow:hidden;white-space:nowrap; }
.healthspan-healthy { background:#0F6E56; }
.healthspan-decline { background:#A32D2D; }
.healthspan-decline-reduced { background:#EF9F27; }
.healthspan-cv-note { font-size:11px;color:#888;margin-top:4px; }
.healthspan-gain-banner {
margin-top:14px;padding:12px 16px;background:linear-gradient(135deg,#EAF3DE,#f0fdf4);
border-radius:8px;border-left:3px solid #0F6E56;display:flex;align-items:center;
}
.target-row { margin-bottom:14px; }
.target-row:last-child { margin-bottom:0; }
.target-info { display:flex;align-items:center;gap:10px;margin-bottom:6px; }
.target-label { font-size:13px;font-weight:600;flex:1; }
.target-vals { display:flex;align-items:center;gap:6px;font-size:12px; }
.target-current { font-weight:700;color:#1a1a1a; }
.target-sep { color:#aaa; }
.target-goal { color:#534AB7;font-weight:600; }
.target-bar-wrap { height:8px;background:#f0f0ee;border-radius:4px;overflow:hidden;margin-bottom:4px; }
.target-bar { height:100%;border-radius:4px;transition:width 0.4s ease; }
.target-note { font-size:11px;color:#888; }
.edu-card {
background:#f9f9f7;border:1px solid #e5e5e5;border-radius:10px;padding:14px;
transition:box-shadow 0.15s;
}
.edu-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.edu-card-icon { font-size:22px;margin-bottom:8px; }
.edu-card-title { font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:6px; }
.edu-card-body { font-size:12px;color:#555;line-height:1.6; }
/* ===== Dark mode — comprehensive pass on ALL remaining issues ===== */
/* Plan selection cards */
body.dark-mode .plan-select-card { background:#151d19;border-color:#2b3832;color:#e8f1ec; }
body.dark-mode .plan-tagline { color:#8fa89f; }
body.dark-mode .plan-price-label { color:#8fa89f; }
body.dark-mode .plan-total-note { color:#8fa89f; }
body.dark-mode .plan-feature-list li { color:#8fa89f; }
body.dark-mode .plan-feature-list li span { color:#97C459; }
/* Sales page dark */
body.dark-mode .sales-hero-headline { color:#e8f1ec; }
body.dark-mode .sales-hero-sub { color:#8fa89f; }
body.dark-mode .sales-section-title { color:#e8f1ec; }
body.dark-mode .sales-feature-card { background:#151d19;border-color:#2b3832; }
body.dark-mode .sales-feature-title { color:#e8f1ec; }
body.dark-mode .sales-feature-body { color:#8fa89f; }
body.dark-mode .sales-why-section { background:#111815;border-color:#2b3832; }
body.dark-mode .sales-why-item { color:#b7c6bf; }
body.dark-mode .sales-stat-label { color:#8fa89f; }
body.dark-mode .sales-cta-section { background:linear-gradient(135deg,#1c1a3a 0%,#0d1f0d 100%);border-color:#2b3832; }
body.dark-mode .sales-cta-section h2 { color:#e8f1ec; }
body.dark-mode .sales-cta-section p { color:#8fa89f; }
/* B2C signup dark */
body.dark-mode #screen-b2c-signup h2 { color:#e8f1ec; }
body.dark-mode #screen-b2c-signup p { color:#8fa89f; }
body.dark-mode #screen-b2c-signup label { color:#8fa89f; }
body.dark-mode .logo-text { color:#e8f1ec; }
/* Unlock screen dark */
body.dark-mode .unlock-sub-card { background:linear-gradient(135deg,#030a07,#080e1f); }
body.dark-mode #unlock-plan-detail { color:#e8f1ec; }
/* Welcome package cards dark */
body.dark-mode .welcome-pkg-card { background:#151d19;border-color:#2b3832; }
body.dark-mode .welcome-pkg-name { color:#e8f1ec; }
body.dark-mode .welcome-pkg-features li { color:#8fa89f; }
body.dark-mode .welcome-pkg-monthly { color:#8fa89f; }
/* Patient dashboard dark */
body.dark-mode .pulse-score-widget { border-color:#2b3832; }
body.dark-mode .pulse-score-label { color:#6b8a7a; }
body.dark-mode .progress-metric-label { color:#8fa89f; }
body.dark-mode .progress-metric-val { color:#e8f1ec; }
body.dark-mode .progress-metric-row { border-color:#1a2b23; }
body.dark-mode .healthspan-gain-banner { background:linear-gradient(135deg,rgba(151,196,89,0.1),rgba(15,110,86,0.1));border-color:#97C459; }
body.dark-mode .healthspan-gain-banner span:last-child { color:#b7c6bf; }
body.dark-mode .healthspan-cv-note { color:#6b8a7a; }
body.dark-mode .target-label { color:#e8f1ec; }
body.dark-mode .target-current { color:#e8f1ec; }
body.dark-mode .target-bar-wrap { background:#1a2b23; }
body.dark-mode .target-note { color:#6b8a7a; }
body.dark-mode .edu-card { background:#151d19;border-color:#2b3832; }
body.dark-mode .edu-card-title { color:#e8f1ec; }
body.dark-mode .edu-card-body { color:#8fa89f; }
/* CEO board dark */
body.dark-mode .ceo-hero-card { background:linear-gradient(135deg,#030a07,#080e1f); }
body.dark-mode .ceo-kicker { color:#97C459; }
body.dark-mode .ceo-title { color:#e8f1ec; }
body.dark-mode .ceo-copy { color:#8fa89f; }
body.dark-mode .ceo-savings-value { color:#97C459; }
body.dark-mode .ceo-savings-note { color:#8fa89f; }
body.dark-mode .ceo-mini-label { color:rgba(255,255,255,0.5); }
body.dark-mode .ceo-stat-grid .stat { background:#151d19;border-color:#2b3832; }
body.dark-mode .ceo-footnote { color:#6b8a7a; }
body.dark-mode #ceo-roi-value { color:#97C459; }
body.dark-mode #ceo-highlight-narrative { color:#b7c6bf; }
/* Overview blocks dark */
body.dark-mode .overview-block { background:#1a2b23;border-color:#2b3832;color:#b7c6bf; }
body.dark-mode .overview-mini-block { background:#1a2b23;border-color:#2b3832;color:#b7c6bf; }
body.dark-mode .doctor-overview-intro { color:#8fa89f; }
body.dark-mode .client-hero { border-color:#2b3832; }
body.dark-mode .client-name { color:#e8f1ec; }
body.dark-mode .client-role-text { color:#8fa89f; }
body.dark-mode .next-assessment { border-color:#2b3832; }
body.dark-mode .next-label { color:#8fa89f; }
body.dark-mode .next-date { color:#97C459; }
/* Modal dark */
body.dark-mode .modal-card { background:#151d19;border:1px solid #2b3832; }
body.dark-mode .modal-title { color:#e8f1ec;border-color:#2b3832; }
body.dark-mode .modal-body { color:#b7c6bf; }
body.dark-mode .modal-actions { border-color:#2b3832; }
body.dark-mode .checkin-num-btn { background:#1a2b23;border-color:#2b3832;color:#e8f1ec; }
/* General text fixes */
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3 { color:#e8f1ec; }
body.dark-mode p { color:#b7c6bf; }
body.dark-mode label { color:#8fa89f; }
body.dark-mode .field label { color:#8fa89f; }
body.dark-mode .summary-label { color:#6b8a7a; }
body.dark-mode .summary-kv span { color:#8fa89f; }
body.dark-mode .breadcrumb { color:#6b8a7a; }
body.dark-mode .form-section { background:#151d19;border-color:#2b3832; }
body.dark-mode .form-section h3 { color:#e8f1ec; }
body.dark-mode .form-section p { color:#8fa89f; }
/* ===== Clinical messaging ===== */
.clmsg-bubble-wrap { display:flex;flex-direction:column;max-width:75%; }
.clmsg-bubble-wrap.me { align-self:flex-end;align-items:flex-end; }
.clmsg-bubble-wrap.them { align-self:flex-start;align-items:flex-start; }
.clmsg-sender { font-size:10px;color:#aaa;margin-bottom:2px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em; }
.clmsg-bubble {
padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.5;
background:#f0f0ee;color:#1a1a1a;white-space:pre-wrap;word-break:break-word;
}
.clmsg-bubble-wrap.me .clmsg-bubble { background:#EEEDFE;color:#534AB7; }
.clmsg-bubble.escalation { background:#FCEBEB;color:#A32D2D;border-left:3px solid #A32D2D;font-weight:600; }
.clmsg-escalation-badge {
font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;
background:#A32D2D;color:#fff;padding:2px 8px;border-radius:8px;
margin-bottom:4px;align-self:flex-start;
}
.clmsg-patient-tag { font-size:10px;color:#534AB7;font-weight:600;margin-top:2px; }
.clmsg-time { font-size:10px;color:#ccc;margin-top:2px; }
body.dark-mode .clmsg-bubble { background:#1a2b23;color:#e8f1ec; }
body.dark-mode .clmsg-bubble-wrap.me .clmsg-bubble { background:rgba(83,74,183,0.2);color:#c5bfff; }
body.dark-mode .clmsg-bubble.escalation { background:rgba(163,45,45,0.2);color:#f08080; }
/* ===== Immediate escalation panel ===== */
#pathway-immediate-detail { animation: screen-in 0.15s ease; }
.escalation-vital-check:hover { border-color: #A32D2D !important; }
.escalation-vital-check input[type="checkbox"] { accent-color: #A32D2D; }
body.dark-mode #pathway-immediate-detail {
background: rgba(163,45,45,0.1);
border-color: rgba(163,45,45,0.3);
}
body.dark-mode #pathway-immediate-detail label { color: #e8f1ec; }
body.dark-mode #pathway-immediate-detail input,
body.dark-mode #pathway-immediate-detail select,
body.dark-mode #pathway-immediate-detail textarea {
background: #1a2b23; color: #e8f1ec; border-color: rgba(163,45,45,0.4);
}
/* ===== PRF pre-fill ===== */
.prf-prefill-notice {
background: #EAF3DE; border: 1px solid #97C459;
border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
font-size: 12px; color: #3B6D11; line-height: 1.5;
}
.prf-prefilled-row td { background: #f0fdf4; }
.prf-prefilled-row input { background: #f0fdf4 !important; font-weight: 600; }
body.dark-mode .prf-prefill-notice { background: rgba(151,196,89,0.1); border-color: rgba(151,196,89,0.3); color: #97C459; }
body.dark-mode .prf-prefilled-row td { background: rgba(15,110,86,0.1); }
/* ===== Dark mode — plan selection cards FULL FIX ===== */
body.dark-mode .plan-select-card {
background: #151d19 !important;
border-color: #2b3832 !important;
}
body.dark-mode .plan-name { color: #e8f1ec !important; }
body.dark-mode .plan-tagline { color: #8fa89f !important; }
body.dark-mode .plan-price-value { color: inherit !important; }
body.dark-mode .plan-price-label { color: #8fa89f !important; }
body.dark-mode .plan-total-note { color: #8fa89f !important; }
body.dark-mode .plan-feature-list li { color: #b7c6bf !important; }
body.dark-mode .plan-feature-list .check { color: #97C459 !important; }
body.dark-mode .plan-more-link { color: #97C459 !important; }
body.dark-mode .plan-select-check { background: #1a2b23 !important; }
body.dark-mode .plan-badge { color: #fff !important; }
/* Plan page header and subtext */
body.dark-mode #screen-b2c-select-plan h1,
body.dark-mode #screen-b2c-select-plan h2 { color: #e8f1ec !important; }
body.dark-mode #screen-b2c-select-plan p,
body.dark-mode #screen-b2c-select-plan .page-sub { color: #8fa89f !important; }
body.dark-mode #screen-b2c-select-plan select {
background: #1a2b23; color: #e8f1ec; border-color: #2b3832;
}
body.dark-mode .plan-guarantee { color: #8fa89f !important; }
body.dark-mode .continue-btn-wrap { background: transparent !important; }
/* ===== Plan selection dark mode — comprehensive fix ===== */
body.dark-mode .plan-select-card { background:#151d19 !important; border-color:#2b3832 !important; }
body.dark-mode .plan-name,
body.dark-mode .plan-tagline,
body.dark-mode .plan-price,
body.dark-mode .plan-price-label,
body.dark-mode .plan-total-note,
body.dark-mode .plan-per-label { color:#e8f1ec !important; }
body.dark-mode .plan-price-main { color:#97C459 !important; }
body.dark-mode .plan-feature-list { color:#8fa89f !important; }
body.dark-mode .plan-feature-list li { color:#8fa89f !important; }
body.dark-mode .plan-feature-list .check { color:#97C459 !important; }
body.dark-mode .plan-more-link { color:#8fa89f !important; }
body.dark-mode .plan-badge { color:#fff !important; }
body.dark-mode .plan-select-check { border-color:#2b3832 !important; }
/* Target any inline styles on plan card text in dark mode */
body.dark-mode #screen-b2c-select-plan p,
body.dark-mode #screen-b2c-select-plan span,
body.dark-mode #screen-b2c-select-plan div,
body.dark-mode #screen-b2c-select-plan li { color:#e8f1ec; }
body.dark-mode #screen-b2c-select-plan .plan-select-card { background:#151d19; }
/* Currency selector in plan page */
body.dark-mode #screen-b2c-select-plan select {
background:#1a2b23; color:#e8f1ec; border-color:#2b3832;
}
/* Footer guarantee strip */
body.dark-mode #screen-b2c-select-plan > div:last-child { color:#8fa89f; }
/* Escalation vitals grid in dark mode */
body.dark-mode #escalation-vitals-grid label {
background:#1a2b23 !important; border-color:#2b3832 !important;
}
body.dark-mode #escalation-vitals-grid label div { color:#e8f1ec !important; }
/* ===== Dark mode currency selector on plan page ===== */
body.dark-mode #screen-b2c-select-plan select,
body.dark-mode .currency-select-wrap select {
background: #1a2b23 !important;
color: #e8f1ec !important;
border: 1px solid #4a6a5a !important;
padding: 6px 10px;
}
/* The GB GBP pill */
body.dark-mode #screen-b2c-select-plan .plan-currency-wrap {
background: #1a2b23 !important;
border-color: #4a6a5a !important;
color: #e8f1ec !important;
}
/* CPD self-submit details expand arrow */
details summary::-webkit-details-marker { display:none; }
details[open] summary .cpd-arrow { transform: rotate(180deg); }
/* ===== Dev panel always visible (outside shell) ===== */
/* The dev panel is positioned fixed so it works anywhere on the page */
.dev-panel { position:fixed !important; }
.dev-panel-tab { position:fixed !important; bottom:20px; right:20px; z-index:9998; }
/* ===== Dark mode: ops portfolio biz cards ===== */
body.dark-mode .biz-card .biz-name { color:#e8f1ec !important; }
body.dark-mode .biz-card .biz-meta { color:#8fa89f !important; }
body.dark-mode .biz-card .biz-stat { color:#8fa89f !important; }
body.dark-mode .biz-card { background:#151d19 !important; border-color:#2b3832 !important; }
body.dark-mode .biz-card:hover { background:#1a2b23 !important; }
/* Business list items in ops home */
body.dark-mode .biz-row { background:#151d19; border-color:#2b3832; }
body.dark-mode .biz-row .biz-name { color:#e8f1ec; }
body.dark-mode .biz-row .biz-sub { color:#8fa89f; }
/* Patient table in ops biz screen */
body.dark-mode .pt tr td { color:#e8f1ec; }
body.dark-mode .pt tr:hover { background:#1a2b23; }
body.dark-mode .pt thead th { background:#1a2b23; color:#8fa89f; border-color:#2b3832; }
body.dark-mode .pt tr { border-color:#2b3832; }
/* ===== Demo mode banner ===== */
#demo-mode-banner { pointer-events:none; }
/* ================================================================
COMPREHENSIVE DARK MODE — catches all remaining elements
including those with inline styles set by JS
================================================================ */
/* Universal text colour inheritance for dark mode */
body.dark-mode { color: var(--text-primary); }
/* All tags inside cards/panels get light text */
body.dark-mode .profile-card p,
body.dark-mode .profile-card div,
body.dark-mode .modal-card p,
body.dark-mode .modal-card div,
body.dark-mode .modal-card label,
body.dark-mode .modal-card span { color: var(--text-secondary); }
/* Headings always bright */
body.dark-mode .profile-card h1,
body.dark-mode .profile-card h2,
body.dark-mode .profile-card h3,
body.dark-mode .profile-card h4,
body.dark-mode .profile-card .card-title,
body.dark-mode .profile-card .page-title { color: var(--text-primary); }
/* Consultant summary panels */
body.dark-mode .overview-mini-block p,
body.dark-mode .overview-block p,
body.dark-mode #cli-prevention-focus p,
body.dark-mode #cli-lifestyle-plan p,
body.dark-mode #cli-followup-plan p,
body.dark-mode #cli-prevention-focus,
body.dark-mode #cli-lifestyle-plan,
body.dark-mode #cli-followup-plan { color: var(--text-secondary) !important; }
/* clinsum section body paragraphs */
body.dark-mode .clinsum-section-body,
body.dark-mode .clinsum-section-body p { color: var(--text-secondary) !important; }
/* All inline
tags rendered by JS renderStructured */
body.dark-mode .overview-mini-block p[style],
body.dark-mode .overview-block p[style] { color: var(--text-secondary) !important; }
/* Pathway cards */
body.dark-mode .pathway-card { background: var(--bg-surface); border-color: var(--border); }
body.dark-mode .pw-text { color: var(--text-muted) !important; }
body.dark-mode .pw-label { color: inherit !important; }
/* PGD drug names */
body.dark-mode .pgd-drug-name { color: var(--text-primary) !important; }
body.dark-mode .pgd-drug-info { color: var(--text-muted) !important; }
/* Summary risk and metrics */
body.dark-mode .summary-risk small { color: var(--text-muted) !important; }
body.dark-mode .summary-metric-value { color: var(--text-primary) !important; }
/* Teaser plan rows */
body.dark-mode .teaser-plan-row { color: var(--text-secondary) !important; }
/* Billing toggle */
body.dark-mode .billing-toggle-btn.active { color: #fff !important; }
/* All stat/vital labels and values */
body.dark-mode .vital-label,
body.dark-mode .vital-value,
body.dark-mode .stat-label,
body.dark-mode .stat-value { color: var(--text-secondary) !important; }
body.dark-mode .vital-value,
body.dark-mode .stat-value { color: var(--text-primary) !important; }
/* Table cells */
body.dark-mode td,
body.dark-mode th { color: var(--text-primary) !important; }
/* All form labels */
body.dark-mode label { color: var(--text-muted) !important; }
body.dark-mode .field label { color: var(--text-muted) !important; }
/* Select options */
body.dark-mode select option { background: #1a2b23; color: var(--text-primary); }
/* PRF sections */
body.dark-mode .prf-section,
body.dark-mode .prf-section h3,
body.dark-mode .prf-section label { color: var(--text-secondary) !important; }
body.dark-mode .prf-section-title { color: #7b8ce0 !important; }
body.dark-mode .prf-vitals-table td,
body.dark-mode .prf-vitals-table th { color: var(--text-primary) !important; border-color: var(--border) !important; }
/* CEO board */
body.dark-mode .ceo-hero-card p,
body.dark-mode .ceo-hero-card div { color: rgba(255,255,255,0.75) !important; }
body.dark-mode .ceo-hero-card h1,
body.dark-mode .ceo-hero-card h2 { color: #fff !important; }
body.dark-mode #ceo-highlight-narrative { color: var(--text-secondary) !important; }
/* Education cards */
body.dark-mode .edu-card p,
body.dark-mode .edu-card div { color: var(--text-secondary) !important; }
body.dark-mode .edu-card-title { color: var(--text-primary) !important; }
/* Progress metrics */
body.dark-mode .progress-metric-label { color: var(--text-muted) !important; }
body.dark-mode .progress-metric-val { color: var(--text-primary) !important; }
body.dark-mode .progress-metric-delta { color: inherit !important; }
/* Healthspan */
body.dark-mode .healthspan-cv-note { color: var(--text-muted) !important; }
/* Target rows */
body.dark-mode .target-label { color: var(--text-primary) !important; }
body.dark-mode .target-current { color: var(--text-primary) !important; }
body.dark-mode .target-note { color: var(--text-muted) !important; }
/* CPD */
body.dark-mode .cpd-activity-label { color: var(--text-muted) !important; }
body.dark-mode #cpd-content div,
body.dark-mode #cpd-content p,
body.dark-mode #cpd-content span { color: var(--text-secondary); }
body.dark-mode #cpd-content strong { color: var(--text-primary) !important; }
/* Clinical messages */
body.dark-mode .clmsg-bubble { color: var(--text-primary) !important; }
body.dark-mode .clmsg-sender { color: var(--text-muted) !important; }
/* Onboarding wizard */
body.dark-mode .form-section,
body.dark-mode .form-section h2,
body.dark-mode .form-section h3,
body.dark-mode .form-section p { color: var(--text-secondary); }
body.dark-mode .form-section label { color: var(--text-muted) !important; }
/* Wearable */
body.dark-mode .wearable-card,
body.dark-mode .wearable-card div { color: var(--text-secondary) !important; }
body.dark-mode .wearable-title { color: var(--text-muted) !important; }
body.dark-mode .w-val { color: var(--text-primary) !important; }
/* Fix for JS-rendered inline style paragraphs - catch-all */
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#444"],
body.dark-mode [style*="color: #444"],
body.dark-mode [style*="color:#555"],
body.dark-mode [style*="color: #555"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#1a1a1a"],
body.dark-mode [style*="color: #1a1a1a"] {
color: var(--text-secondary) !important;
}
/* Status pills — explicit dark mode colors so inherit doesn't pick up wrong parent */
body.dark-mode .pill-green { background: rgba(15,110,86,0.2) !important; color: #97C459 !important; }
body.dark-mode .pill-amber { background: rgba(133,79,11,0.2) !important; color: #EF9F27 !important; }
body.dark-mode .pill-red { background: rgba(163,45,45,0.2) !important; color: #f08080 !important; }
body.dark-mode .status-pill { color: inherit; }
body.dark-mode .role-badge { color: #fff !important; }
body.dark-mode .badge-ops { background: rgba(83,74,183,0.35) !important; color: #c5bfff !important; }
body.dark-mode .badge-nurse { background: rgba(15,110,86,0.35) !important; color: #97C459 !important; }
body.dark-mode .badge-client { background: rgba(24,95,165,0.35) !important; color: #90c4f0 !important; }
body.dark-mode .badge-admin { background: rgba(133,79,11,0.35) !important; color: #EF9F27 !important; }
body.dark-mode .badge-clinician{ background: rgba(153,60,29,0.35) !important; color: #f0a080 !important; }
body.dark-mode .badge-doctor { background: rgba(163,45,45,0.35) !important; color: #f08080 !important; }
body.dark-mode .unread-count-badge { color: #fff !important; background: #A32D2D !important; }
body.dark-mode .day-badge { background: rgba(255,255,255,0.1) !important; color: #e8f1ec !important; }