/* Cove - Application stylesheet */
:root {
  --blue:#1a9ed4;--blue-dark:#0e7ab0;--blue-light:#4db8e8;--blue-bg:#e8f4fb;
  --navy:#1a2540;--bg-app:#f0f5f9;--bg-surface:#ffffff;--border:#dde3ec;
  --border-light:#eaeef4;--text-primary:#1a2540;--text-secondary:#6b7a99;
  --text-muted:#9aa3b8;--sidebar-width:220px;--sidebar-collapsed-width:56px;
  --topbar-height:56px;--danger:#d94f4f;--success:#1a9e74;
  --amber:#b5821a;--amber-bg:#fdf6e8;--amber-border:#f0d9a8;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:'DM Sans',sans-serif;font-size:16px;color:var(--text-primary);background:var(--bg-app);-webkit-font-smoothing:antialiased;}
.app-shell{display:flex;height:100vh;overflow:hidden;}
.app-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.app-content{flex:1;padding:24px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
@media(max-width:767px){.app-content{padding:16px;}}
@supports(padding-bottom:env(safe-area-inset-bottom)){.app-content{padding-bottom:calc(24px + env(safe-area-inset-bottom));}}
.app-sidebar{width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width 0.22s ease;overflow:hidden;z-index:100;}
.app-sidebar.collapsed{width:var(--sidebar-collapsed-width);}
.sb-logo{height:var(--topbar-height);display:flex;align-items:center;padding:0 12px 0 14px;border-bottom:1px solid var(--border-light);gap:8px;flex-shrink:0;}
.sb-logo-link{display:flex;align-items:center;gap:8px;text-decoration:none;overflow:hidden;flex:1;}
.sb-logo-img{height:36px;width:auto;flex-shrink:0;}
.sb-logo-text{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;color:var(--navy);white-space:nowrap;transition:opacity 0.18s ease;}
.app-sidebar.collapsed .sb-logo-text{opacity:0;width:0;overflow:hidden;}
.sb-toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;flex-shrink:0;transition:color 0.15s ease,background 0.15s ease;padding:0;}
.sb-toggle:hover{color:var(--blue);background:var(--blue-bg);}
.sb-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;}
.sb-section-label{font-size:0.65rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:10px 10px 4px;white-space:nowrap;transition:opacity 0.18s ease;display:block;}
.app-sidebar.collapsed .sb-section-label{opacity:0;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;text-decoration:none;color:var(--text-secondary);white-space:nowrap;transition:background 0.15s ease,color 0.15s ease;}
.nav-item:hover{background:var(--bg-app);color:var(--navy);}
.nav-item.active{background:var(--blue-bg);color:var(--blue);}
.nav-item svg{flex-shrink:0;}
.nav-label{font-size:0.825rem;font-weight:500;white-space:nowrap;transition:opacity 0.18s ease;}
.app-sidebar.collapsed .nav-label{opacity:0;width:0;overflow:hidden;}
.nav-badge{margin-left:auto;background:var(--blue);color:#fff;font-size:0.65rem;font-weight:600;padding:1px 6px;border-radius:10px;transition:opacity 0.18s ease;}
.app-sidebar.collapsed .nav-badge{opacity:0;}
.sb-footer{padding:10px 8px;border-top:1px solid var(--border-light);flex-shrink:0;}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;cursor:pointer;overflow:hidden;text-decoration:none;}
.sb-user:hover{background:var(--bg-app);}
.sb-avatar{width:30px;height:30px;border-radius:50%;background:var(--blue-bg);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:600;color:var(--blue);flex-shrink:0;}
.sb-user-info{overflow:hidden;transition:opacity 0.18s ease;}
.app-sidebar.collapsed .sb-user-info{opacity:0;width:0;}
.sb-user-name{font-size:0.775rem;font-weight:500;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user-role{font-size:0.675rem;color:var(--text-muted);}
.sign-out-link{display:block;margin-top:6px;padding:8px 10px;border-radius:7px;font-size:0.775rem;font-weight:500;color:var(--text-secondary);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sign-out-link:hover{background:var(--bg-app);color:var(--navy);}
@media(max-width:767px){
  .app-sidebar{position:fixed;top:0;left:0;height:100%;width:var(--sidebar-width);transform:translateX(-100%);transition:transform 0.25s ease;box-shadow:4px 0 24px rgba(0,0,0,0.1);}
  .app-sidebar.drawer-open{transform:translateX(0);}
  .sb-toggle{display:none;}
  .app-sidebar .sb-logo-text,.app-sidebar .sb-section-label,.app-sidebar .nav-label,.app-sidebar .nav-badge,.app-sidebar .sb-user-info{opacity:1!important;width:auto!important;overflow:visible!important;}
  .topbar-hamburger{display:flex;}
  .btn-block-mobile{width:100%;justify-content:center;}
}
.sidebar-overlay{position:fixed;inset:0;background:rgba(26,37,64,0.35);z-index:99;opacity:0;transition:opacity 0.25s ease;backdrop-filter:blur(2px);}
.sidebar-overlay.visible{opacity:1;}
.app-topbar{height:var(--topbar-height);background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;}
.topbar-hamburger{display:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;padding:0;flex-shrink:0;}
.topbar-hamburger:hover{background:var(--bg-app);color:var(--navy);}
.topbar-title{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;color:var(--navy);margin:0;}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px;}
.flash{border-radius:8px;padding:0.7rem 1rem;font-size:0.825rem;margin-bottom:1.25rem;}
.flash-notice{background:rgba(26,158,212,0.08);border:1px solid rgba(26,158,212,0.25);color:var(--blue-dark);}
.flash-alert{background:rgba(217,79,79,0.08);border:1px solid rgba(217,79,79,0.25);color:#b83c3c;}
.trial-banner{display:flex;align-items:center;gap:12px;background:var(--amber-bg);border:1px solid var(--amber-border);color:var(--amber);border-radius:8px;padding:0.7rem 1rem;font-size:0.825rem;margin-bottom:1.25rem;}
.trial-banner__text{flex:1;}
.trial-banner__link{color:var(--amber);font-weight:600;text-decoration:underline;}
.trial-banner__link:hover{color:var(--navy);}
.trial-banner__dismiss{background:none;border:none;color:var(--amber);font-size:1.1rem;line-height:1;padding:0 4px;cursor:pointer;}
.trial-banner__dismiss:hover{color:var(--navy);}
.btn{display:inline-flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;font-size:0.825rem;font-weight:600;border-radius:7px;padding:0.5rem 0.9rem;border:none;cursor:pointer;text-decoration:none;transition:background 0.15s ease,transform 0.1s ease,box-shadow 0.15s ease;white-space:nowrap;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);box-shadow:0 4px 16px rgba(26,158,212,0.3);transform:translateY(-1px);}
.btn-secondary{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--bg-app);color:var(--navy);}
.btn-danger{background:var(--bg-surface);color:var(--danger);border:1px solid rgba(217,79,79,0.3);}
.btn-danger:hover{background:rgba(217,79,79,0.05);}
.btn-link{background:none;border:none;padding:0;color:var(--blue);font-size:0.775rem;font-weight:500;cursor:pointer;text-decoration:none;}
.btn-link:hover{color:var(--blue-dark);}
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-light);}
.card-title{font-family:'Outfit',sans-serif;font-size:0.875rem;font-weight:600;color:var(--navy);margin:0;}
.card-body{padding:18px;}
.card-footer{padding:12px 18px;border-top:1px solid var(--border-light);}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px;}
.stat-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px;}
.stat-label{font-size:0.65rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.stat-value{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:600;color:var(--navy);line-height:1;}
.stat-meta{font-size:0.7rem;color:var(--text-muted);margin-top:4px;}
.stat-up{color:var(--blue);}
.stat-down{color:var(--danger);}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:0.825rem;}
thead th{font-size:0.65rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-muted);padding:10px 16px;text-align:left;background:#fafbfc;border-bottom:1px solid var(--border-light);white-space:nowrap;}
tbody td{padding:12px 16px;border-bottom:1px solid var(--border-light);color:var(--text-primary);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:#fafcff;}
tbody tr.clickable{cursor:pointer;}
.pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:10px;font-size:0.7rem;font-weight:500;}
.pill-new{background:#f0f5f9;color:#5a7090;}
.pill-qualified{background:#e6f9f2;color:#0a7a52;}
.pill-proposal{background:#fef3e2;color:#9a6a00;}
.pill-negotiation{background:#f0eeff;color:#5242b0;}
.pill-won{background:#e6f9f2;color:#0a7a52;}
.pill-lost{background:#fdf0f0;color:#9a3c3c;}
.form-group{margin-bottom:1.1rem;}
.form-label{display:block;font-size:0.775rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:0.45rem;}
.form-control{width:100%;background:var(--bg-app);border:1px solid var(--border);border-radius:7px;color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:0.9rem;padding:0.6rem 0.875rem;outline:none;transition:border-color 0.18s ease,box-shadow 0.18s ease;-webkit-appearance:none;}
.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,158,212,0.15);background:#fff;}
.form-control::placeholder{color:var(--text-muted);}
.field_with_errors .form-control{border-color:rgba(217,79,79,0.5);}
.form-error{font-size:0.75rem;color:var(--danger);margin-top:0.3rem;}
.form-section-title{font-family:'Outfit',sans-serif;font-size:0.825rem;font-weight:600;color:var(--navy);margin:0 0 4px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid-full{grid-column:1/-1;}
.form-divider{grid-column:1/-1;border-top:1px solid var(--border-light);padding-top:20px;margin-top:4px;}
.form-actions{display:flex;align-items:center;gap:12px;margin-top:8px;padding-top:20px;border-top:1px solid var(--border-light);}
@media(max-width:767px){.form-control{font-size:1rem;}.form-grid{grid-template-columns:1fr;}}
.stage-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}
.stage-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:7px;font-size:0.8rem;font-weight:500;color:var(--text-secondary);text-decoration:none;border:1px solid transparent;transition:all 0.15s ease;}
.stage-tab:hover{background:var(--bg-surface);color:var(--navy);border-color:var(--border);}
.stage-tab.active{background:var(--blue-bg);color:var(--blue);border-color:rgba(26,158,212,0.2);}
.stage-tab-count{background:var(--bg-app);color:var(--text-muted);font-size:0.65rem;font-weight:600;padding:1px 5px;border-radius:8px;}
.stage-tab.active .stage-tab-count{background:rgba(26,158,212,0.15);color:var(--blue);}
.search-wrap{position:relative;max-width:320px;margin-bottom:16px;}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.search-input{width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:7px;padding:0.5rem 0.75rem 0.5rem 2rem;font-size:0.825rem;color:var(--text-primary);outline:none;font-family:'DM Sans',sans-serif;}
.search-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,158,212,0.12);}
.lead-company{font-weight:500;}
.lead-meta{font-size:0.7rem;color:var(--text-muted);margin-top:2px;}
.lead-source{color:var(--text-secondary);font-size:0.8rem;}
.lead-date{font-size:0.775rem;color:var(--text-muted);}
.lead-value{font-weight:500;}
.lead-empty{padding:48px 24px;text-align:center;}
.lead-empty-icon{margin:0 auto 12px;color:var(--text-muted);display:block;}
.lead-empty-title{font-family:'Outfit',sans-serif;font-size:0.925rem;font-weight:600;color:var(--navy);margin:0 0 6px;}
.lead-empty-desc{font-size:0.8rem;color:var(--text-muted);margin:0 0 16px;}
.contact-type-badge{font-size:0.65rem;background:var(--bg-app);color:var(--text-muted);padding:1px 6px;border-radius:4px;display:inline-block;margin-top:2px;}
.contact-type-pill{font-size:0.75rem;background:var(--blue-bg);color:var(--blue);padding:2px 8px;border-radius:10px;font-weight:500;}
.show-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;max-width:960px;}
.show-main{display:flex;flex-direction:column;gap:16px;}
.show-sidebar{display:flex;flex-direction:column;gap:16px;}
.detail-label{font-size:0.7rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.detail-value{font-size:0.875rem;color:var(--text-primary);}
.detail-value-lg{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:600;color:var(--navy);}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.detail-notes{font-size:0.875rem;color:var(--text-secondary);line-height:1.7;margin:0;white-space:pre-wrap;}
.detail-link{color:var(--blue);text-decoration:none;}
.detail-link:hover{color:var(--blue-dark);}
.owner-row{display:flex;align-items:center;gap:8px;}
.avatar-sm{width:24px;height:24px;border-radius:50%;background:var(--blue-bg);display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:600;color:var(--blue);flex-shrink:0;}
.stage-buttons{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.stage-btn{border:1px solid var(--border);background:transparent;color:var(--text-secondary);border-radius:6px;padding:3px 10px;font-size:0.75rem;font-weight:400;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s ease;}
.stage-btn:hover{border-color:var(--blue);color:var(--blue);}
.stage-btn.active{border-color:var(--blue);background:var(--blue-bg);color:var(--blue);font-weight:600;}
@media(max-width:900px){.show-layout{grid-template-columns:1fr;}}
.pipeline-board{display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px;}
.pipeline-column{min-width:0;}
.pipeline-col-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px;}
.pipeline-col-count{font-size:0.7rem;color:var(--text-muted);font-weight:500;}
.pipeline-col-value{font-size:0.7rem;color:var(--text-muted);margin-bottom:10px;padding:0 2px;}
.pipeline-cards{display:flex;flex-direction:column;gap:8px;}
.pipeline-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:12px;text-decoration:none;display:block;transition:box-shadow 0.15s ease,transform 0.15s ease;}
.pipeline-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);transform:translateY(-1px);}
.pipeline-card-company{font-size:0.825rem;font-weight:600;color:var(--navy);margin-bottom:4px;}
.pipeline-card-contact{font-size:0.75rem;color:var(--text-secondary);margin-bottom:8px;}
.pipeline-card-value{font-size:0.75rem;font-weight:600;color:var(--blue);}
.pipeline-card-date{font-size:0.7rem;color:var(--text-muted);margin-top:4px;}
.pipeline-empty{border:1px dashed var(--border);border-radius:8px;padding:16px;text-align:center;}
.pipeline-empty-text{font-size:0.75rem;color:var(--text-muted);}
.page-welcome{margin-bottom:28px;}
.page-welcome-title{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:600;color:var(--navy);margin:0 0 6px;}
.page-welcome-sub{font-size:0.875rem;color:var(--text-secondary);margin:0;}
.section-heading{font-family:'Outfit',sans-serif;font-size:0.875rem;font-weight:600;color:var(--text-secondary);letter-spacing:0.06em;text-transform:uppercase;margin:0 0 14px;}
.quick-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:28px;}
.quick-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:16px;transition:box-shadow 0.15s ease,transform 0.15s ease;text-decoration:none;display:block;}
.quick-card:hover{box-shadow:0 4px 16px rgba(26,158,212,0.1);transform:translateY(-1px);}
.quick-card-accent{border-color:rgba(26,158,212,0.3);background:linear-gradient(135deg,#f0f8fd 0%,#fff 100%);}
.quick-card-icon{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.quick-card-icon-blue{background:var(--blue-bg);}
.quick-card-icon-solid{background:var(--blue);}
.quick-card-title{font-family:'Outfit',sans-serif;font-size:0.875rem;font-weight:600;color:var(--navy);margin-bottom:4px;}
.quick-card-desc{font-size:0.775rem;color:var(--text-secondary);line-height:1.5;}
.getting-started-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:28px;}
.gs-card{padding:18px;}
.gs-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.gs-step-number{width:28px;height:28px;border-radius:50%;background:var(--blue-bg);display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:600;color:var(--blue);flex-shrink:0;}
.gs-card-title{font-family:'Outfit',sans-serif;font-size:0.875rem;font-weight:600;color:var(--navy);}
.gs-card-desc{font-size:0.8rem;color:var(--text-secondary);margin:0 0 12px;line-height:1.6;}
.gs-card-link{font-size:0.8rem;color:var(--blue);text-decoration:none;font-weight:500;}
.gs-card-link:hover{color:var(--blue-dark);}
.gs-card-soon{font-size:0.8rem;color:var(--text-muted);font-weight:500;}
.prefs-backdrop{display:none;position:fixed;inset:0;z-index:200;background:rgba(26,37,64,0.4);}
.prefs-panel{position:absolute;right:0;top:0;height:100%;width:360px;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,0.1);display:flex;flex-direction:column;}
.prefs-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);}
.prefs-title{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;color:var(--navy);margin:0;}
.prefs-close{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;}
.prefs-body{flex:1;overflow-y:auto;padding:20px;}
.prefs-section-label{font-size:0.7rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 12px;}
.prefs-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:7px;cursor:pointer;margin-bottom:4px;}
.prefs-option-active{background:var(--blue-bg);}
.prefs-option-inactive{background:var(--bg-app);}
.prefs-option-checkbox{accent-color:var(--blue);width:15px;height:15px;}
.prefs-option-label{font-size:0.825rem;font-weight:500;color:var(--text-primary);}
.prefs-footer{padding:16px 20px;border-top:1px solid var(--border);}
.prefs-submit{width:100%;justify-content:center;}
.dashboard-widgets{display:grid;gap:16px;align-items:start;}
.dashboard-widgets-1{grid-template-columns:1fr;}
.dashboard-widgets-2{grid-template-columns:300px 1fr;}
.pipeline-summary{padding:8px 0;}
.pipeline-summary-row{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;}
.pipeline-summary-left{display:flex;align-items:center;gap:10px;}
.pipeline-summary-count{font-size:0.75rem;color:var(--text-muted);}
.pipeline-summary-value{font-size:0.8rem;font-weight:500;color:var(--text-primary);}
.auth-wrapper{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem;}
.logo-wrap{margin-bottom:2rem;display:flex;align-items:center;justify-content:center;}
.logo-wrap img{height:72px;width:auto;}
.auth-card{width:100%;max-width:420px;background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.9);border-radius:14px;overflow:hidden;box-shadow:0 8px 32px rgba(14,122,176,0.12),0 2px 8px rgba(0,0,0,0.06);}
.auth-card::before{content:'';display:block;height:3px;background:linear-gradient(90deg,transparent,var(--blue),transparent);}
.auth-card-body{padding:2.25rem 2rem;}
.auth-heading{font-family:'Outfit',sans-serif;font-size:1.35rem;font-weight:600;color:var(--text-primary);margin:0 0 0.4rem;letter-spacing:-0.01em;}
.auth-subheading{font-size:0.825rem;color:var(--text-secondary);margin:0 0 1.75rem;}
.auth-divider{border:none;border-top:1px solid var(--border);margin:1.5rem 0;}
.auth-footer{text-align:center;font-size:0.8rem;color:var(--text-muted);}
.auth-footer a{color:var(--blue);text-decoration:none;font-weight:500;}
.auth-footer a:hover{color:var(--blue-dark);}
.auth-name-row { display: flex; gap: 0.75rem; }
.auth-name-row .field { flex: 1; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 0.75rem 0; }
.link-subtle{font-size:0.775rem;color:var(--text-muted);text-decoration:none;transition:color 0.15s ease;float:right;margin-top:-0.25rem;}
.link-subtle:hover{color:var(--blue);}
label{display:block;font-size:0.775rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:0.45rem;}
input[type="email"],input[type="password"],input[type="text"]{width:100%;background:#f0f5f9;border:1px solid var(--border);border-radius:7px;color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:0.9rem;padding:0.65rem 0.875rem;outline:none;transition:border-color 0.18s ease,box-shadow 0.18s ease;-webkit-appearance:none;}
input[type="email"]:focus,input[type="password"]:focus,input[type="text"]:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,158,212,0.15);background:#fff;}
input::placeholder{color:var(--text-muted);}
.field{margin-bottom:1.1rem;}
.checkbox-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.1rem;}
.checkbox-row input[type="checkbox"]{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;}
.checkbox-row label{margin:0;text-transform:none;letter-spacing:0;font-size:0.825rem;color:var(--text-secondary);cursor:pointer;}
#error_explanation{background:rgba(217,79,79,0.06);border:1px solid rgba(217,79,79,0.2);border-radius:7px;padding:0.75rem 1rem;margin-bottom:1.25rem;}
#error_explanation h2{font-size:0.8rem;font-weight:600;color:#b83c3c;margin:0 0 0.4rem;}
#error_explanation ul{margin:0;padding-left:1.25rem;}
#error_explanation li{font-size:0.8rem;color:#b83c3c;margin-bottom:0.2rem;}
.field_with_errors input{border-color:rgba(217,79,79,0.5);}

/* ─────────────────────────────────────────
   DISCOVERY PREP
───────────────────────────────────────── */

.dp-layout      { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.dp-sidebar     { display: flex; flex-direction: column; gap: 16px; }
.dp-content     { display: flex; flex-direction: column; gap: 16px; }

.dp-section     { display: none; }
.dp-section.active { display: block; }

.dp-tab-nav     { overflow: hidden; }
.dp-tab-list    { display: flex; flex-direction: column; }
.dp-tab-btn     { display: flex; align-items: center; padding: 10px 18px; font-size: 0.825rem; font-weight: 500; color: var(--text-secondary); background: transparent; border: none; border-left: 2px solid transparent; cursor: pointer; text-align: left; transition: all 0.15s ease; font-family: 'DM Sans', sans-serif; }
.dp-tab-btn:hover  { background: var(--bg-app); color: var(--navy); }
.dp-tab-btn.active { color: var(--blue); border-left-color: var(--blue); background: var(--blue-bg); font-weight: 600; }

.dp-section-body { font-size: 0.875rem; line-height: 1.7; color: var(--text-primary); }
.dp-section-body h1,.dp-section-body h2,.dp-section-body h3 { font-family: 'Outfit',sans-serif; color: var(--navy); margin: 1rem 0 0.5rem; }
.dp-section-body h2 { font-size: 1rem; }
.dp-section-body h3 { font-size: 0.875rem; }
.dp-section-body ul,.dp-section-body ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.dp-section-body li { margin-bottom: 0.35rem; }
.dp-section-body strong { font-weight: 600; color: var(--navy); }
.dp-section-body p { margin: 0 0 0.75rem; }

.dp-generating      { display: flex; align-items: center; gap: 20px; background: var(--bg-surface); border: none; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.dp-generating-icon { flex-shrink: 0; }
.dp-spinner         { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin      { to { transform: rotate(360deg); } }
.dp-generating-title { font-family: 'Outfit',sans-serif; font-size: 0.925rem; font-weight: 600; color: var(--navy); margin: 0 0 4px; }
.dp-generating-sub   { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

/* Loading button busy state for slow AI actions. Reuses the existing spin keyframe defined above. */
.btn.is-busy { opacity: 0.7; cursor: progress; }

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

/* Static spacing helpers, replacing pre-existing inline styles in views touched here. */
.comms-generator-note { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; }
.dp-spaced-label { margin-top: 14px; }
.cn-notes-group { margin-top: 16px; }
.btn-full { width: 100%; justify-content: center; }

.prep-status         { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 10px; font-size: 0.7rem; font-weight: 500; }
.prep-status-pending     { background: #f0f5f9; color: #5a7090; }
.prep-status-researching { background: #fef3e2; color: #9a6a00; }
.prep-status-generating  { background: #e8f4fb; color: var(--blue-dark); }
.prep-status-complete    { background: #e6f9f2; color: #0a7a52; }
.prep-status-failed      { background: #fdf0f0; color: #9a3c3c; }

.dp-tag-list  { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-tag       { font-size: 0.7rem; background: var(--blue-bg); color: var(--blue-dark); padding: 3px 8px; border-radius: 5px; font-weight: 500; }
.dp-config-note { margin-top: 12px; font-size: 0.775rem; color: var(--text-muted); }

@media (max-width: 900px) { .dp-layout { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────
   SETTINGS
───────────────────────────────────────── */

.settings-layout              { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.settings-checkbox-grid       { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
.settings-checkbox-item       { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; background: var(--bg-app); }
.settings-checkbox-item:hover { background: var(--blue-bg); }
.settings-checkbox-label      { font-size: 0.825rem; color: var(--text-primary); font-weight: 500; }

/* ─────────────────────────────────────────
   MARKETPLACE
───────────────────────────────────────── */

.marketplace-grid           { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 28px; }
.marketplace-card           { background: var(--bg-surface); border: none; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.15s ease; }
.marketplace-card:hover     { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.marketplace-card-connected { border-color: rgba(26,158,212,0.3); background: linear-gradient(135deg, #f0f8fd 0%, #ffffff 100%); }
.marketplace-card-header    { display: flex; align-items: center; gap: 12px; }
.marketplace-logo-wrap      { width: 40px; height: 40px; border-radius: 8px; background: var(--blue-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.marketplace-logo-wrap img  { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.marketplace-logo-text      { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; color: var(--blue); }
.marketplace-card-name      { font-family: 'Outfit', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.marketplace-card-desc      { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 0; flex: 1; }
.marketplace-card-actions   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.marketplace-requested      { font-size: 0.775rem; color: var(--success); font-weight: 500; }

/* ─── Settings panel ────────────────────────────────────────────────────────── */


/* ─── Integration settings panel ────────────────────────────────────────────── */
.prefs-backdrop { height: 100vh; }

/* ─── Integration settings panel ────────────────────────────────────────────── */
.prefs-panel--wide { width: 520px; max-width: 95vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.prefs-panel--wide .prefs-header { flex-shrink: 0; }
.prefs-panel--wide turbo-frame { display: contents; }
.prefs-panel--wide form.prefs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
.settings-panel__integration-name { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem; }
.settings-saved-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: #e6f7f1; color: var(--success); font-size: 0.8125rem; font-weight: 500; border-bottom: 1px solid var(--border); }
.settings-section { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.settings-section__title { font-size: 0.875rem; font-weight: 600; color: var(--navy); margin-bottom: 0.25rem; }
.settings-section__description { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 0.875rem; }
.sync-direction-options { display: flex; flex-direction: column; gap: 0.5rem; }
.sync-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: 0; cursor: pointer; transition: border-color 150ms, background 150ms; background: var(--bg-app); }
.sync-option:hover { border-color: var(--blue); background: var(--blue-bg); }
.sync-option--selected { border-color: var(--blue); background: var(--blue-bg); }
.sync-option__input { display: none; }
.sync-option__content { flex: 1; }
.sync-option__label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--navy); }
.sync-option__description { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.125rem; }
.sync-option__check { color: var(--blue); opacity: 0; transition: opacity 150ms; }
.sync-option--selected .sync-option__check { opacity: 1; }
.stage-checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stage-checkbox { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border: 2px solid var(--border); border-radius: 2rem; cursor: pointer; transition: border-color 150ms, background 150ms; user-select: none; }
.stage-checkbox:has(.stage-checkbox__input:checked) { border-color: var(--blue); background: var(--blue-bg); }
.stage-checkbox__input { display: none; }
.stage-checkbox__label { font-size: 0.8125rem; font-weight: 500; color: var(--navy); }
.field-mapping-table { border: none; border-radius: 0; overflow: hidden; }
.field-mapping-table__header { display: grid; grid-template-columns: 1fr 1fr; padding: 0.5rem 0.75rem; background: var(--bg-app); font-size: 0.7rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.field-mapping-table__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); gap: 0.75rem; }
.field-mapping-table__cove-field { font-size: 0.8125rem; color: var(--text-primary); }
.field-mapping-table__input { font-size: 0.8125rem; padding: 0.35rem 0.625rem; border: none; border-radius: 6px; background: white; color: var(--text-primary); width: 100%; transition: border-color 150ms; }
.field-mapping-table__input:focus { outline: none; border-color: var(--blue); }
.field-mapping-table__input::placeholder { color: var(--text-muted); }
.settings-form__footer { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1.25rem 1.5rem; border-top: 1px solid var(--border); margin-top: auto; }
.settings-field { margin-bottom: 1.25rem; }
.settings-field:last-child { margin-bottom: 0; }
.settings-field__label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.settings-field__badge { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.5rem; background: #fff4e5; color: #b45309; border: 1px solid #fcd34d; border-radius: 2rem; }
.settings-field__input { width: 100%; font-size: 0.8125rem; padding: 0.45rem 0.75rem; border: none; border-radius: 6px; background: white; color: var(--text-primary); transition: border-color 150ms; }
.settings-field__input:focus { outline: none; border-color: var(--blue); }
.settings-field__input::placeholder { color: var(--text-muted); }
.settings-field__hint { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.375rem; }

/* ── Prospect Finder Drawer ─────────────────────────────────────── */

#prospects-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#prospects-overlay.open { opacity: 1; pointer-events: all; }

#prospects-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 560px;
  max-width: 100vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(26,37,64,0.08);
  z-index: 300;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#prospects-drawer.open { transform: translateX(0); }

.pd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-surface);
}
.pd-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pd-via {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
}
.pd-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.pd-close:hover { background: var(--bg-app); color: var(--navy); }

.pd-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-app);
}

.pd-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  background: var(--bg-surface);
  border: none;
  border-radius: 10px;
  padding: 16px;
}
.pd-row { display: flex; gap: 12px; }
.pd-row .pd-field { flex: 1; }
.pd-field { display: flex; flex-direction: column; gap: 5px; }
.pd-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.pd-input {
  width: 100%;
  background: var(--bg-app);
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.85rem;
  color: var(--text-primary);
  font-family: "DM Sans", sans-serif;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.pd-input::placeholder { color: var(--text-muted); opacity: 0.6; }
.pd-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,37,64,0.07); }

.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: none;
  border-radius: 5px;
  background: var(--bg-app);
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}
.pd-chip:has(.pd-chip-cb:checked) {
  border-color: var(--navy);
  background: rgba(26,37,64,0.06);
  color: var(--navy);
  font-weight: 500;
}
.pd-chip-cb { display: none; }
.pd-chips--size .pd-chip { font-size: 0.75rem; padding: 3px 8px; }

.pd-submit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.pd-credit-note { font-size: 0.73rem; color: var(--text-muted); }

.pd-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-surface);
  border: none;
  border-radius: 10px;
}
.pd-idle p { font-size: 0.85rem; margin: 0; }
.pd-idle .btn { margin-top: 4px; }

.pd-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: rgba(217,79,79,0.06);
  border: 1px solid rgba(217,79,79,0.2);
  border-radius: 7px;
  font-size: 0.85rem;
  color: var(--danger);
}

/* Results */
.pd-results-section {
  background: var(--bg-surface);
  border: none;
  border-radius: 10px;
  overflow: hidden;
}
.pd-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.pd-select-all {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.pd-results-count { font-size: 0.8rem; color: var(--text-muted); }
.pd-import-btn { font-size: 0.8rem; padding: 5px 14px; }

.pd-table-wrap { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pd-table th {
  padding: 7px 12px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-app);
  white-space: nowrap;
}
.pd-table td {
  padding: 9px 12px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light, #f0f4f9);
  vertical-align: middle;
}
.pd-table tbody tr:last-child td { border-bottom: none; }
.pd-table tbody tr:hover td { background: #fafcff; }
.pd-td-cb   { width: 32px; }
.pd-td-name { font-weight: 500; white-space: nowrap; }
.pd-td-company { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.pd-td-title   { color: var(--text-muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-td-loc  { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.pd-td-data { white-space: nowrap; }

.pd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  margin-right: 2px;
}
.pd-badge--e { background: rgba(59,130,246,0.1); color: #2563eb; }
.pd-badge--p { background: rgba(16,185,129,0.1); color: #059669; }

/* ── Prospect finder additions ──────────────────────────────────── */
.pd-per-page {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pd-select {
  background: var(--bg-app);
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.82rem;
  color: var(--text-primary);
  font-family: "DM Sans", sans-serif;
  outline: none;
  cursor: pointer;
}
.pd-credit-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(201,168,76,0.07);
  border-bottom: 1px solid rgba(201,168,76,0.18);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.pd-results-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pd-selected-count {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--navy);
}
.pd-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 0;
  font-size: 0.84rem;
}
.pd-error--general {
  background: rgba(217,79,79,0.06);
  border: 1px solid rgba(217,79,79,0.2);
  color: var(--danger);
}
.pd-error--credits {
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.25);
  color: #92722a;
}
.pd-error__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pd-error__body strong { font-weight: 600; }
.pd-error__link {
  font-size: 0.78rem;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  margin-top: 2px;
}

.pd-row--in-cove td { opacity: 0.45; }
.pd-row--in-cove td.pd-td-name { opacity: 1; }
.pd-in-cove-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(26,37,64,0.07);
  border: none;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.pd-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}
.pd-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  background: var(--bg-surface);
  font-size: 0.8rem;
  font-family: "DM Sans", sans-serif;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pd-page-btn:hover { background: var(--bg-app); color: var(--navy); }
.pd-page-info { font-size: 0.78rem; color: var(--text-muted); }

/* ─────────────────────────────────────────
   PREP FOR CALL CARD
───────────────────────────────────────── */

.prep-cta-card {
   background: var(--navy);
   border: 1px solid rgba(255,255,255,0.08);
   border-radius: 12px;
   padding: 18px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .prep-cta-icon {
   width: 36px;
   height: 36px;
   background: rgba(255,255,255,0.08);
   border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #c9a96e;
   flex-shrink: 0;
 }
 
 .prep-cta-title {
   font-family: 'Outfit', sans-serif;
   font-size: 0.9rem;
   font-weight: 600;
   color: #fff;
 }
 
 .prep-cta-sub {
   font-size: 0.75rem;
   color: rgba(255,255,255,0.5);
   margin-top: 2px;
 }
 
 .prep-cta-actions {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
 }
 
 .prep-cta-actions .btn-link-sm {
   color: rgba(255,255,255,0.5);
 }
 
 .prep-cta-actions .btn-link-sm:hover {
   color: rgba(255,255,255,0.8);
 }
 
 .prep-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   width: 100%;
   justify-content: center;
 }
 
 /* ─────────────────────────────────────────
    INLINE EDIT
 ───────────────────────────────────────── */
 
 .btn-link-sm {
   background: none;
   border: none;
   color: var(--blue);
   font-size: 0.75rem;
   font-weight: 500;
   cursor: pointer;
   padding: 0;
   text-decoration: none;
   font-family: 'DM Sans', sans-serif;
 }
 
 .btn-link-sm:hover { text-decoration: underline; }
 
 .card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 .inline-edit-form { display: flex; flex-direction: column; gap: 12px; }
 
 .inline-edit-actions {
   display: flex;
   align-items: center;
   gap: 8px;
   padding-top: 4px;
 }
 
 /* ─────────────────────────────────────────
    ACTIVITY FEED
 ───────────────────────────────────────── */
 
 .activity-log-trigger {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--blue-bg);
   color: var(--blue);
   border: 1px dashed var(--blue);
   border-radius: 6px;
   padding: 6px 14px;
   font-size: 0.8rem;
   font-weight: 500;
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   transition: all 0.15s;
   margin-bottom: 16px;
 }
 
 .activity-log-trigger:hover { background: var(--blue); color: #fff; }
 
  .activity-form-inner {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
   margin-bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .activity-kind-selector {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
 }
 
 .activity-kind-btn {
   display: flex;
   align-items: center;
   gap: 4px;
   border: none;
   border-radius: 5px;
   padding: 4px 10px;
   font-size: 0.75rem;
   font-weight: 500;
   cursor: pointer;
   color: var(--text-secondary);
   transition: all 0.15s;
 }
 
 .activity-kind-btn input[type="radio"] { display: none; }
 .activity-kind-btn:has(input:checked) {
   border-color: var(--blue);
   background: var(--blue-bg);
   color: var(--blue);
 }
 
 .activity-body { resize: vertical; min-height: 64px; }
 
 .activity-form-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
 }
 
 .activity-date { font-size: 0.8rem; flex: 1; min-width: 180px; }
 
 .activity-form-actions { display: flex; gap: 8px; }
 
 .activity-timeline {
   display: flex;
   flex-direction: column;
   gap: 0;
 }
 
 .activity-item {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 10px 0;
   border-bottom: 1px solid var(--border);
   position: relative;
 }
 
 .activity-item:last-child { border-bottom: none; }
 
 .activity-item--system .activity-item-icon { background: transparent; }
 .activity-item--system .activity-item-kind { color: var(--text-muted); }
 
 .activity-item-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--blue-bg);
   color: var(--blue);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 1px;
 }
 
 .activity-item-content { flex: 1; min-width: 0; }
 
 .activity-item-header {
   display: flex;
   align-items: baseline;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 2px;
 }
 
 .activity-item-kind {
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--text-primary);
 }
 
 .activity-item-meta {
   font-size: 0.72rem;
   color: var(--text-muted);
 }
 
 .activity-item-body {
   font-size: 0.82rem;
   color: var(--text-secondary);
   margin: 0;
   line-height: 1.5;
   white-space: pre-wrap;
 }
 
 .activity-item-delete { flex-shrink: 0; }
 
 .activity-delete-btn {
   background: none;
   border: none;
   color: var(--text-muted);
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   opacity: 0;
   transition: opacity 0.15s;
 }
 
 .activity-item:hover .activity-delete-btn { opacity: 1; }
 .activity-delete-btn:hover { color: var(--red, #e05c5c); background: rgba(224,92,92,0.08); }
 
 .activity-empty {
   font-size: 0.8rem;
   color: var(--text-muted);
   font-style: italic;
   margin: 8px 0 4px;
 }
 
 .btn-sm { padding: 5px 12px; font-size: 0.78rem; }


/* ─────────────────────────────────────────
   STAT CARD ACCENTS
───────────────────────────────────────── */
.stat-card { border-top: 3px solid var(--border); }
.stat-card--blue  { border-top-color: #1a9ed4; }
.stat-card--green { border-top-color: #22c087; }
.stat-card--amber { border-top-color: #f59e0b; }
.stat-card--navy  { border-top-color: var(--navy); }

/* ─────────────────────────────────────────
   CALL NOTES
───────────────────────────────────────── */

.call-notes-list { display: flex; flex-direction: column; }

.call-note-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  transition: background 0.15s;
}

.call-note-row:last-child { border-bottom: none; }
.call-note-row:hover { background: var(--bg-app); }

.call-note-row-date   { font-size: 0.825rem; color: var(--text-secondary); }
.call-note-row-duration { font-size: 0.825rem; color: var(--text-muted); }

.call-note-row-likelihood {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  margin-left: auto;
}

.call-note-row-ratio {
  font-size: 0.775rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
}

.call-note-row-ratio.healthy { background: #e6f9f2; color: #15803d; }
.call-note-row-ratio.warn    { background: #fff7ed; color: #c2410c; }

.pill-call-type {
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Talk ratio */
.talk-ratio-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--border);
}

.talk-ratio-rep      { background: #1a9ed4; }
.talk-ratio-prospect { background: #22c087; }

.talk-ratio-legend { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.talk-ratio-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.talk-ratio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.talk-ratio-dot--rep      { background: #1a9ed4; }
.talk-ratio-dot--prospect { background: #22c087; }

.talk-ratio-status {
  font-size: 0.775rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 4px;
}

.talk-ratio-status--good { background: #e6f9f2; color: #15803d; }
.talk-ratio-status--warn { background: #fff7ed; color: #c2410c; }

/* Closing likelihood */
.closing-likelihood-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.closing-likelihood-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.closing-likelihood-bar {
  height: 100%;
  background: linear-gradient(90deg, #1a9ed4, #22c087);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.closing-likelihood-pct {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--navy);
  flex-shrink: 0;
}

.closing-likelihood-badge {
  display: inline-flex;
  align-items: center;
  background: var(--blue-bg);
  color: var(--blue);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 3px 10px;
  border-radius: 10px;
}

/* Rich text content */
.call-note-body {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.call-note-body ul, .call-note-body ol {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}

.call-note-body li { margin-bottom: 0.25rem; }
.call-note-body strong { color: var(--text-primary); }
.call-note-body p { margin: 0 0 0.75rem; }
.call-note-body p:last-child { margin-bottom: 0; }

/* Rich text editor */
.call-note-rich-text trix-editor {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 0 0 7px 7px;
  padding: 0.6rem 0.875rem;
  min-height: 100px;
  background: var(--bg-app);
}

.call-note-rich-text trix-toolbar {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  background: var(--bg-surface);
  padding: 4px 8px;
}

.panel-form { max-width: 800px; }

/* ─────────────────────────────────────────
   TRANSCRIPT
───────────────────────────────────────── */

.transcript-processing {
   display: flex;
   align-items: center;
   gap: 16px;
   background: var(--blue-bg);
   border: 1px solid var(--blue);
   border-radius: 10px;
   padding: 16px 20px;
   margin-bottom: 20px;
 }
 
 .transcript-processing-spinner {
   width: 24px;
   height: 24px;
   border: 2.5px solid var(--blue);
   border-top-color: transparent;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   flex-shrink: 0;
 }
 
 @keyframes spin { to { transform: rotate(360deg); } }
 
 .transcript-processing-title {
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--navy);
   margin: 0 0 2px;
 }
 
 .transcript-processing-sub {
   font-size: 0.775rem;
   color: var(--text-muted);
   margin: 0;
 }
 
 .transcript-tab-btns {
   display: flex;
   gap: 0;
   margin-bottom: 12px;
   border: 1px solid var(--border);
   border-radius: 7px;
   overflow: hidden;
   width: fit-content;
 }
 
 .transcript-tab-btn {
   background: transparent;
   border: none;
   padding: 6px 16px;
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--text-muted);
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   transition: all 0.15s;
 }
 
 .transcript-tab-btn.active {
   background: var(--navy);
   color: #fff;
 }
 
 .transcript-textarea { min-height: 220px; resize: vertical; }
 
 .transcript-file-drop {
   border: 2px dashed var(--border);
   border-radius: 8px;
   padding: 32px;
   text-align: center;
   position: relative;
   cursor: pointer;
   transition: border-color 0.15s;
 }
 
 .transcript-file-drop:hover { border-color: var(--blue); }
 
 .transcript-file-input {
   position: absolute;
   inset: 0;
   opacity: 0;
   cursor: pointer;
   width: 100%;
   height: 100%;
 }
 
 .transcript-file-label {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: var(--text-muted);
   font-size: 0.875rem;
   pointer-events: none;
 }
 
 .transcript-file-hint { font-size: 0.75rem; color: var(--text-muted); }
 
 .transcript-form-footer { margin-top: 16px; }
 
 .transcript-badge {
   font-size: 0.725rem;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 10px;
 }
 
 .transcript-badge--done { background: #e6f9f2; color: #15803d; }
 
 .ai-suggestion {
   font-size: 0.75rem;
   color: var(--text-muted);
   margin-top: 4px;
   font-style: italic;
 }

 /* ─────────────────────────────────────────
   CALL NOTE FORM TABS
───────────────────────────────────────── */

.cn-notes-sub {
   font-size: 0.8rem;
   color: var(--text-muted);
   margin: 0 0 12px;
 }
 
 .cn-tabs { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
 
 .cn-tab-btns {
   display: flex;
   border-bottom: 1px solid var(--border);
   background: var(--bg-surface);
 }
 
 .cn-tab-btn {
   flex: 1;
   background: none;
   border: none;
   border-right: 1px solid var(--border);
   padding: 10px 16px;
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--text-muted);
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   transition: all 0.15s;
 }
 
 .cn-tab-btn:last-child { border-right: none; }
 .cn-tab-btn.active { background: #fff; color: var(--navy); font-weight: 600; }
 .cn-tab-btn:hover:not(.active) { background: var(--bg-app); color: var(--text-primary); }
 
 .cn-tab-panel { padding: 16px; }
 
 .cn-notes-textarea { min-height: 200px; resize: vertical; }
 
 .cn-file-drop {
   border: 2px dashed var(--border);
   border-radius: 8px;
   padding: 40px 24px;
   text-align: center;
   position: relative;
   cursor: pointer;
   transition: border-color 0.15s, background 0.15s;
 }
 
 .cn-file-drop:hover { border-color: var(--blue); background: var(--blue-bg); }
 
 .cn-file-input {
   position: absolute;
   inset: 0;
   opacity: 0;
   cursor: pointer;
   width: 100%;
   height: 100%;
 }
 
 .cn-file-label {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: var(--text-muted);
   pointer-events: none;
 }
 
 .cn-file-label-text { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
 .cn-file-hint       { font-size: 0.75rem; color: var(--text-muted); }
 .cn-file-note       { font-size: 0.775rem; color: var(--text-muted); margin: 10px 0 0; }
 
 .cn-integrations-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin-bottom: 12px;
 }
 
 .cn-integration-card {
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 14px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
 .cn-integration-icon { flex-shrink: 0; }
 .cn-integration-name { font-size: 0.825rem; font-weight: 600; color: var(--navy); }
 .cn-integration-status { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
 .cn-integration-coming { opacity: 0.7; }
 
 /* Card title badge */
 .card-title-badge {
   font-size: 0.65rem;
   font-weight: 600;
   padding: 2px 7px;
   border-radius: 10px;
 }
 
 .card-title-badge--amber { background: #fff7ed; color: #c2410c; }
 
 /* Lead score on sidebar */
 .lead-score-display {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 4px;
 }
 
 .lead-score-bar-wrap {
   flex: 1;
   height: 6px;
   background: var(--border);
   border-radius: 3px;
   overflow: hidden;
 }
 
 .lead-score-bar {
   height: 100%;
   border-radius: 3px;
   transition: width 0.3s ease;
 }
 
 .lead-score-bar--high   { background: #22c087; }
 .lead-score-bar--medium { background: #f59e0b; }
 .lead-score-bar--low    { background: #e05c5c; }
 
 .lead-score-pct {
   font-size: 0.825rem;
   font-weight: 600;
   color: var(--navy);
   flex-shrink: 0;
 }

 /* ─────────────────────────────────────────
   LIKELIHOOD INLINE EDIT
───────────────────────────────────────── */

.likelihood-form { margin-top: 8px; }

.likelihood-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.likelihood-input {
  width: 70px;
  text-align: center;
}

.likelihood-pct-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.pipeline-card-score {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-top: 6px;
 }
 
 .pipeline-card-score-num {
   font-size: 0.7rem;
   font-weight: 600;
   color: var(--text-muted);
   flex-shrink: 0;
 }

 .pipeline-summary-values {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 1px;
 }
 
 .pipeline-summary-weighted {
   font-size: 0.7rem;
   color: var(--text-muted);
 }

 /* ─────────────────────────────────────────
   SCORING CRITERIA
───────────────────────────────────────── */

.scoring-criteria-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 16px;
 }
 
 .scoring-criterion-row {
   background: var(--bg-app);
   border: 1px solid var(--border);
   border-radius: 7px;
   padding: 10px 12px;
 }
 
 .scoring-criterion-fields {
   display: grid;
   grid-template-columns: 1fr 70px 2fr 28px;
   gap: 8px;
   align-items: center;
 }
 
 .sc-points { text-align: center; }
 
 .sc-remove-btn {
   background: none;
   border: none;
   color: var(--text-muted);
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.15s;
 }
 
 .sc-remove-btn:hover { color: var(--danger, #e05c5c); background: rgba(224,92,92,0.08); }
 
 .sc-actions {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
 .sc-reset-link {
   margin-top: 8px;
   font-size: 0.775rem;
 }
 
 @media (max-width: 767px) {
   .scoring-criterion-fields {
     grid-template-columns: 1fr 60px 28px;
   }
   .sc-description { display: none; }
 }

 /* ─────────────────────────────────────────
   CALL ANALYTICS
───────────────────────────────────────── */

.trend-chart {
   display: flex;
   align-items: flex-end;
   gap: 16px;
   height: 160px;
   padding-bottom: 8px;
 }
 
 .trend-col {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1;
   height: 100%;
 }
 
 .trend-bar-wrap {
   flex: 1;
   width: 100%;
   display: flex;
   align-items: flex-end;
   justify-content: center;
 }
 
 .trend-bar {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   border-radius: 4px 4px 0 0;
   overflow: hidden;
   min-height: 20px;
 }
 
 .trend-bar-rep {
   background: #1a9ed4;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: height 0.3s ease;
 }
 
 .trend-bar-prospect {
   background: #22c087;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: height 0.3s ease;
 }
 
 .trend-bar-label {
   font-size: 0.6rem;
   color: #fff;
   font-weight: 600;
 }
 
 .trend-bar-empty {
   font-size: 0.7rem;
   color: var(--text-muted);
 }
 
 .trend-month {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--text-secondary);
   margin-top: 6px;
 }
 
 .trend-count {
   font-size: 0.65rem;
   color: var(--text-muted);
 }
 
 .trend-legend {
   display: flex;
   gap: 16px;
   margin-top: 12px;
 }
 
 .trend-legend-item {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 0.775rem;
   color: var(--text-secondary);
 }
 
 .trend-dot {
   width: 10px;
   height: 10px;
   border-radius: 2px;
   flex-shrink: 0;
 }
 
 .trend-dot--rep      { background: #1a9ed4; }
 .trend-dot--prospect { background: #22c087; }

 /* ─────────────────────────────────────────
   INTEGRATION CONNECT STEPS
───────────────────────────────────────── */

.connect-instructions { margin-bottom: 20px; }

.connect-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.connect-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.connect-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─────────────────────────────────────────
   WEBHOOK URL BOX
───────────────────────────────────────── */

.webhook-url-box {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--bg-app);
   border: 1px solid var(--border);
   border-radius: 7px;
   padding: 10px 14px;
   margin-top: 8px;
 }
 
 .webhook-url-code {
   flex: 1;
   font-family: ui-monospace, monospace;
   font-size: 0.75rem;
   color: var(--text-secondary);
   word-break: break-all;
 }

 /* ─────────────────────────────────────────
   BRANDING SETTINGS
───────────────────────────────────────── */

.brand-logo-preview {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 10px;
   padding: 10px 14px;
   background: var(--bg-app);
   border: 1px solid var(--border);
   border-radius: 7px;
 }
 
 .brand-logo-img {
   height: 40px;
   width: auto;
   max-width: 160px;
   object-fit: contain;
 }
 
 .brand-logo-filename {
   font-size: 0.8rem;
   color: var(--text-muted);
 }
 
 .colour-picker-row {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 .colour-picker-input {
   width: 44px;
   height: 38px;
   border: 1px solid var(--border);
   border-radius: 7px;
   padding: 2px;
   cursor: pointer;
   background: none;
   flex-shrink: 0;
 }
 
 .colour-picker-hex {
   flex: 1;
   font-family: ui-monospace, monospace;
   font-size: 0.875rem;
 }
 
 .form-hint {
   font-size: 0.75rem;
   color: var(--text-muted);
   margin-top: 4px;
   margin-bottom: 0;
 }

 /* ─────────────────────────────────────────
   COMMUNICATIONS
───────────────────────────────────────── */

.comms-generator { display: flex; flex-direction: column; gap: 8px; }

.comms-generator-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.comms-select { flex: 1; min-width: 140px; }

.comms-prompt { font-size: 0.825rem; resize: vertical; }

.comm-content {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.comm-content p { margin: 0 0 1em; }
.comm-content p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────
   BUSINESS CASES
───────────────────────────────────────── */

.bc-layout {
   display: grid;
   grid-template-columns: 1fr 300px;
   gap: 16px;
   align-items: start;
 }
 
 .bc-main { display: flex; flex-direction: column; gap: 16px; }
 .bc-sidebar { display: flex; flex-direction: column; gap: 16px; }
 
 .bc-title-banner {
   background: var(--navy);
   border-radius: 12px;
   padding: 28px 32px;
   color: #fff;
 }
 
 .bc-title-label {
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: rgba(255,255,255,0.5);
   margin-bottom: 8px;
 }
 
 .bc-title {
   font-family: 'Outfit', sans-serif;
   font-size: 1.4rem;
   font-weight: 700;
   color: #fff;
   margin: 0 0 10px;
   line-height: 1.3;
 }
 
 .bc-meta {
   font-size: 0.8rem;
   color: rgba(255,255,255,0.5);
 }
 
 .bc-section .card-header {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 .bc-section-icon {
   width: 28px;
   height: 28px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
 .bc-section-icon--problem  { background: #fff0f0; color: #e05c5c; }
 .bc-section-icon--situation { background: var(--blue-bg); color: var(--blue); }
 .bc-section-icon--warning  { background: #fff7ed; color: #c2410c; }
 .bc-section-icon--solution { background: #e6f9f2; color: #15803d; }
 .bc-section-icon--outcomes { background: #e6f9f2; color: #15803d; }
 .bc-section-icon--roi      { background: var(--blue-bg); color: var(--blue); }
 .bc-section-icon--risks    { background: #fff7ed; color: #c2410c; }
 .bc-section-icon--steps    { background: var(--navy); color: #fff; }
 
 .bc-section--warning { border-left: 3px solid #f59e0b; }
 .bc-section--steps   { border-left: 3px solid var(--navy); }
 
 .bc-content {
   font-size: 0.875rem;
   line-height: 1.75;
   color: var(--text-secondary);
 }
 
 .bc-content p  { margin: 0 0 0.875rem; }
 .bc-content p:last-child { margin-bottom: 0; }
 .bc-content ul, .bc-content ol { padding-left: 1.25rem; margin: 0.5rem 0; }
 .bc-content li { margin-bottom: 0.375rem; }
 .bc-content strong { color: var(--text-primary); }
 
 @media (max-width: 900px) {
   .bc-layout { grid-template-columns: 1fr; }
 }

 .export-dropdown .popup-menu {
   min-width: 200px;
 }

 .topbar-actions .export-dropdown {
   position: relative;
   display: inline-block;
 }
 
 .topbar-actions .popup-menu {
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0,0,0,0.12);
   min-width: 200px;
   z-index: 200;
   padding: 4px;
 }
 
 .topbar-actions .popup-item {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
   padding: 9px 14px;
   font-size: 0.825rem;
   color: var(--text-primary);
   text-decoration: none;
   border-radius: 5px;
   border: none;
   background: none;
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   text-align: left;
   white-space: nowrap;
   transition: background 0.15s;
 }
 
 .topbar-actions .popup-item:hover {
   background: var(--bg-app);
 }

 .marketplace-logo-img {
   width: 32px;
   height: 32px;
   object-fit: contain;
   border-radius: 6px;
 }

/* ---------------------------------------------------------------- */
/* Billing page                                                     */
/* ---------------------------------------------------------------- */
.billing-status{margin-bottom:24px;}
.billing-status-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;}
.billing-plan-name{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:600;color:var(--navy);margin:4px 0 0;}
.billing-status-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-bottom:18px;}
.billing-meta-value{font-size:0.875rem;font-weight:600;color:var(--navy);margin:4px 0 0;}
.billing-status-actions{display:flex;flex-wrap:wrap;gap:10px;}
.billing-status-actions form{margin:0;}
.billing-badge{display:inline-flex;align-items:center;padding:4px 11px;border-radius:10px;font-size:0.72rem;font-weight:600;white-space:nowrap;}
.billing-badge--active{background:#e6f9f2;color:#0a7a52;}
.billing-badge--warning{background:#fef3e2;color:#9a6a00;}
.billing-badge--danger{background:#fdf0f0;color:#9a3c3c;}
.billing-badge--muted{background:#f0f5f9;color:#5a7090;}

.billing-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 20px;}
.billing-segmented{display:inline-flex;background:var(--bg-app);border:1px solid var(--border);border-radius:8px;padding:3px;gap:2px;}
.billing-segmented a{padding:6px 14px;border-radius:6px;font-size:0.8rem;font-weight:600;color:var(--text-secondary);text-decoration:none;}
.billing-segmented a:hover{color:var(--navy);}
.billing-segmented a.is-active{background:var(--bg-surface);color:var(--blue);box-shadow:0 1px 2px rgba(26,37,64,0.08);}

.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px;}
.plan-card{position:relative;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:20px;}
.plan-card.is-popular{border-color:var(--blue);box-shadow:0 6px 24px rgba(26,158,212,0.12);}
.plan-card.is-current{border-color:var(--navy);}
.plan-popular-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:0.65rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:3px 10px;border-radius:10px;white-space:nowrap;}
.plan-name{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;color:var(--navy);margin:0 0 8px;}
.plan-price{font-family:'Outfit',sans-serif;font-size:1.75rem;font-weight:700;color:var(--navy);line-height:1;}
.plan-price-period{font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:500;color:var(--text-muted);}
.plan-saving{font-size:0.75rem;color:var(--success);font-weight:600;margin:6px 0 0;}
.plan-seats{font-size:0.8rem;color:var(--text-secondary);margin:10px 0 0;}
.plan-features{list-style:none;margin:14px 0 0;padding:0;flex:1;}
.plan-features li{position:relative;padding:4px 0 4px 20px;font-size:0.8rem;color:var(--text-secondary);}
.plan-features li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--blue-bg);border:2px solid var(--blue);}
.bacs-note{font-size:0.72rem;color:var(--text-muted);margin:12px 0 0;}
.plan-cta{margin-top:16px;}
.plan-cta form{margin:0;}
.plan-cta .btn{width:100%;justify-content:center;}
.plan-cta button[disabled]{opacity:0.6;cursor:default;}
.plan-blocked{font-size:0.72rem;color:var(--danger);margin:8px 0 0;}

.billing-cancel{margin-top:8px;}
.billing-cancel-note{font-size:0.8rem;color:var(--text-secondary);margin:0 0 14px;}

/* Failed payment warning banner (persistent, app-wide) */
.payment-warning-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:rgba(217,79,79,0.08);border:1px solid rgba(217,79,79,0.3);color:#b83c3c;border-radius:8px;padding:0.7rem 1rem;font-size:0.825rem;margin-bottom:1.25rem;}
.payment-warning-banner span{flex:1;min-width:200px;}
.payment-warning-banner__link{color:#b83c3c;font-weight:600;text-decoration:underline;white-space:nowrap;}
.payment-warning-banner__link:hover{color:var(--navy);}

/* Post-checkout success panel */
.checkout-success{display:flex;gap:14px;align-items:flex-start;background:#e6f9f2;border:1px solid rgba(26,158,116,0.3);border-radius:10px;padding:18px 20px;margin-bottom:24px;}
.checkout-success-tick{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--success);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.9rem;font-weight:700;}
.checkout-success-body{flex:1;}
.checkout-success-title{font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:600;color:var(--navy);margin:0 0 6px;}
.checkout-success-text{font-size:0.85rem;color:var(--text-secondary);margin:0 0 6px;}
.checkout-success-body .btn{margin-top:8px;}
.checkout-success-body form{margin:0;}

/* Cancellation exit survey and hardship offer */
.cancel-card{max-width:560px;margin-top:8px;}
.cancel-reasons{border:0;margin:0 0 18px;padding:0;}
.cancel-reason{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;font-size:0.875rem;color:var(--text-primary);cursor:pointer;}
.cancel-reason:hover{background:var(--bg-app);}
.cancel-lead{font-size:0.95rem;line-height:1.55;color:var(--text-primary);margin:0 0 18px;}
.cancel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;}
.cancel-actions form{margin:0;}

/* Super admin panel */
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{font-size:0.65rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-muted);padding:10px 16px;text-align:left;background:#fafbfc;border-bottom:1px solid var(--border-light);}
.admin-table td{padding:11px 16px;font-size:0.85rem;color:var(--text-primary);border-bottom:1px solid var(--border-light);vertical-align:middle;}
.admin-table tbody tr:last-child td{border-bottom:none;}
.admin-card{margin-bottom:18px;}
.admin-kv{border-collapse:collapse;}
.admin-kv td{padding:6px 0;font-size:0.85rem;color:var(--text-primary);}
.admin-kv__label{color:var(--text-secondary);padding-right:24px;white-space:nowrap;}
.admin-inline-form .field{margin-bottom:12px;max-width:360px;}
.admin-role-form{display:flex;gap:8px;align-items:center;}
.admin-role-form .form-control{width:auto;}

/* ----------------------------------------------------------------
   Mobile bottom tab bar navigation
   Shown below the tablet breakpoint (max-width 767px, that is below
   Tailwind's md), hidden from md up where the sidebar takes over.
   Mirrors the sidebar's named CSS variables. No inline styles.
   ---------------------------------------------------------------- */

/* Hidden by default (tablet and desktop keep the sidebar). */
.bottom-nav{display:none;}

/* Structural styles. Inert on desktop because the parent stays display none. */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--bg-surface);
  border-top:1px solid var(--border);
  box-shadow:0 -2px 8px var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;
  padding:8px 4px;
  background:transparent;border:none;cursor:pointer;
  text-decoration:none;
  color:var(--text-muted);
  font-family:'DM Sans',sans-serif;
}
.bottom-nav-item.active{color:var(--blue);}
.bottom-nav-icon{display:flex;align-items:center;justify-content:center;}
.bottom-nav-icon svg{width:22px;height:22px;}
.bottom-nav-label{font-size:0.65rem;font-weight:500;line-height:1;letter-spacing:0.01em;}

/* Overlay "More" menu. Visibility is driven by the hidden attribute, so these
   rules must not set the display property on the sheet or backdrop. */
/* Backdrop and sheet stop at the top of the bar (56px plus the safe area inset)
   so the bar itself stays visible, undimmed and tappable while the sheet is open. */
.more-sheet-backdrop{
  position:fixed;top:0;left:0;right:0;
  bottom:calc(56px + env(safe-area-inset-bottom));
  z-index:250;
  background:var(--navy);opacity:0.45;
}
.more-sheet{
  position:fixed;left:0;right:0;
  bottom:calc(56px + env(safe-area-inset-bottom));
  z-index:260;
  max-height:75vh;overflow-y:auto;
  background:var(--bg-surface);
  border-top:1px solid var(--border);
  border-top-left-radius:16px;border-top-right-radius:16px;
  box-shadow:0 -6px 24px var(--border);
  padding:8px 10px 14px;
}
.more-sheet-grip{
  width:38px;height:4px;border-radius:2px;
  background:var(--border);
  margin:4px auto 12px;
}
.more-sheet-user{display:flex;align-items:center;gap:10px;padding:6px 8px 12px;border-bottom:1px solid var(--border-light);margin-bottom:8px;}
.more-sheet-avatar{width:36px;height:36px;border-radius:50%;background:var(--blue-bg);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:600;color:var(--blue);flex-shrink:0;}
.more-sheet-user-name{font-size:0.875rem;font-weight:600;color:var(--navy);}
.more-sheet-user-role{font-size:0.7rem;color:var(--text-muted);}
.more-sheet-links{display:flex;flex-direction:column;gap:2px;}
.more-sheet-link{
  display:flex;align-items:center;gap:12px;
  min-height:44px;padding:10px 8px;border-radius:8px;
  text-decoration:none;color:var(--text-primary);
  font-size:0.9rem;font-weight:500;
}
.more-sheet-link:hover{background:var(--bg-app);}
.more-sheet-link svg{width:18px;height:18px;flex-shrink:0;color:var(--text-muted);}
.more-sheet-signout{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;margin-top:8px;padding:10px;
  border-top:1px solid var(--border-light);
  text-decoration:none;color:var(--danger);
  font-size:0.875rem;font-weight:600;
}

/* Long page titles must truncate rather than wrap or push the actions off
   screen. min-width 0 lets the flex item shrink below its content width. */
.topbar-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Below the tablet breakpoint, swap the sidebar for the bottom tab bar. */
@media(max-width:767px){
  .bottom-nav{display:flex;}
  .app-sidebar{display:none;}
  .topbar-hamburger{display:none;}
  /* Clear the fixed bar (56px plus the safe area inset) so nothing hides behind it. */
  .app-content{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
}

/* ─────────────────────────────────────────
   MOBILE FOUNDATIONS  (max-width 767px only; desktop is untouched)

   A global sizing pass so the app reads as built for a phone rather
   than a shrunk desktop: 16px form fields (so iOS Safari never
   auto-zooms on focus), a comfortable type scale, more breathing
   room, 44px touch targets and full-width primary actions. Per
   screen reworks (wide tables, dashboard, lead detail) are a
   separate brief and are deliberately left alone here.
───────────────────────────────────────── */
@media (max-width: 767px) {

  /* 1. Inputs at least 16px, highest priority. Below 16px iOS Safari
     zooms the page on focus, the classic bad desktop port tell. The
     generic and class selectors below cover date pickers, selects,
     textareas, .form-control and the search box. */
  input, select, textarea,
  .form-control,
  .search-input {
    font-size: 16px;
  }
  /* The desktop type scoped input rules (input[type="email"] and the
     like, plus marketing's .field input) sit at the same specificity
     as a bare type selector, and load order across the app, marketing
     and tailwind sheets is not guaranteed. A body prefix lifts these
     above that 0,1,1 tie so the 16px floor always wins on a phone,
     without reaching for !important. */
  body input[type="text"],
  body input[type="email"],
  body input[type="tel"],
  body input[type="number"],
  body input[type="search"],
  body input[type="url"],
  body input[type="password"],
  body input[type="date"] {
    font-size: 16px;
  }

  /* 2. Readability. Body is already 16px; lift labels, captions and
     headings to a simple mobile scale and floor the smallest meta
     text at 13px. Tab bar labels and in table text are left as is
     (the latter belongs to the tables brief). */
  body { line-height: 1.55; }
  .card-title,
  .form-section-title { font-size: 1rem; }
  .form-label { font-size: 0.8125rem; }
  .form-error,
  .stat-label,
  .stat-meta,
  .cn-notes-sub,
  .cn-file-hint,
  .cn-file-note { font-size: 0.8125rem; }

  /* 3. Breathing room. More padding inside cards and panels, taller
     form rows and wider gaps so content is not crammed edge to edge. */
  .card-body { padding: 20px; }
  .card-header,
  .card-footer { padding: 16px 20px; }
  .form-group { margin-bottom: 1.35rem; }
  .form-grid { gap: 18px; }
  .form-divider { padding-top: 24px; }
  .form-actions { margin-top: 12px; padding-top: 24px; }

  /* 4. Touch targets at least 44px tall for anything tappable. The
     nav and More menu already meet this; here we cover buttons, form
     controls and the call note tabs app wide. */
  .btn,
  .form-control,
  select.form-control,
  .search-input,
  .cn-tab-btn {
    min-height: 44px;
  }
  .form-control,
  textarea.form-control { padding: 0.7rem 0.875rem; }
  textarea.form-control { min-height: 88px; }
  .btn { padding: 0.7rem 1.1rem; }

  /* 5. Full-width actions. Stack the buttons in a form's action row
     and let each fill the width so they are easy to hit with a thumb.
     The primary submit sits on top, secondary actions below. */
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* 6. Single column, full width. The 16px side gutter already lives
     on .app-content. Stop the inline search box from being pinned to
     a narrow strip so it spans the full width like other fields.
     (The auto-fit card grids already reflow to one or two columns on
     a phone, so they are left to adapt.) */
  .search-wrap { max-width: none; }
}

/* ─────────────────────────────────────────
   MOBILE LAYOUT FIXES (round 2)  (max-width 767px only; desktop untouched)

   From on-device PWA screenshots: the header colliding with the status
   bar, a crowded topbar, a clipped dashboard card row, the search icon
   overlapping its placeholder, and a cramped side-scrolling pipeline
   board.
───────────────────────────────────────── */
@media (max-width: 767px) {

  /* 1. Top safe area. With viewport-fit=cover the header extends under
     the status bar, but only the bottom inset was padded (on
     .app-content above). Pad the header content below the top inset and
     grow the header height to match, so its surface fills the inset
     region and reads as an intentional header rather than showing the
     page behind the clock. */
  .app-topbar {
    height: calc(var(--topbar-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  /* 2. Slim topbar. Keep the primary action (Add lead) as a labelled
     button and collapse the secondary controls (view toggle, Customise,
     Find prospects) to icon-only squares so the row never wraps or
     overlaps. The label stays in the DOM inside .btn-label, hidden
     visually; each condensed control carries its own aria-label. */
  .topbar-actions { gap: 8px; }
  .btn-icon-mobile {
    width: 44px;
    min-width: 44px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }
  .btn-icon-mobile .btn-label { display: none; }

  /* 3. Stack dashboard widget cards. The two-widget layout is a fixed
     300px + 1fr grid on desktop, which clips the second card at the
     screen edge on a phone. Collapse it to one full-width column so the
     cards stack vertically, one beneath the other. */
  .dashboard-widgets-2 { grid-template-columns: 1fr; }

  /* 4. Search field. The magnifier sits at 10px and is about 14px wide,
     so lift the left padding to start the placeholder and text clear
     of it. */
  .search-input { padding-left: 2.5rem; }

  /* 5. Pipeline board. The six-column side-scrolling board is cramped on
     a phone, so stack the stages into a single full-width column, one
     beneath the other. The column board stays for tablet and desktop. */
  .pipeline-board {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
}

/* ─────────────────────────────────────────
   LOOK AND FEEL REFRESH  (stage 1: type and colour)
   All changes live here so the rest of the file is untouched.
   To revert this stage, delete this whole block.
───────────────────────────────────────── */

/* 1. Lift the two muted greys so labels and meta read with more
   presence everywhere they are used across the app. */
:root{
  --text-secondary:#525e7d;
  --text-muted:#79839b;
}

/* 2. Sidebar wordmark a little larger and bolder. */
.sb-logo-text{font-size:1.125rem;font-weight:700;}

/* 3. Navigation: bigger labels and a confident solid blue active
   state in place of the old pale tint. */
.nav-label{font-size:0.9rem;}
.nav-item.active{background:var(--blue);color:#fff;}
.nav-item.active .nav-label{font-weight:600;}
.nav-item.active .nav-badge{background:#fff;color:var(--blue);}

/* 4. Topbar page title larger. */
.topbar-title{font-size:1.125rem;}

/* 5. Buttons a touch larger. */
.btn{font-size:0.9rem;}

/* 6. Card titles larger. */
.card-title{font-size:1rem;}

/* 7. Stat cards: the metric number becomes the hero, the label
   reads clearly in the stronger secondary colour. */
.stat-label{font-size:0.8125rem;color:var(--text-secondary);}
.stat-value{font-size:1.875rem;font-weight:700;}
.stat-meta{font-size:0.8125rem;color:var(--text-secondary);}

/* 8. Tables: larger body text and clearer column headings. */
table{font-size:0.9rem;}
thead th{font-size:0.75rem;color:var(--text-secondary);}

/* 9. Status pills: larger, bolder, properly coloured so each stage
   reads at a glance (the old "new" pill was grey on grey). */
.pill{font-size:0.75rem;font-weight:600;padding:4px 10px;}
.pill-new{background:#e6edf7;color:#3a4f78;}
.pill-won{background:#d7f5e8;color:#067a4e;}

/* 10. Page headings: bigger, tighter welcome title and a more
    readable subtitle. */
.page-welcome-title{font-size:1.875rem;font-weight:700;letter-spacing:-0.01em;}
.page-welcome-sub{font-size:0.95rem;}

/* 11. Dashboard quick cards to match the new scale. */
.quick-card-title{font-size:1rem;}
.quick-card-desc{font-size:0.85rem;}

/* ─────────────────────────────────────────
   LOOK AND FEEL REFRESH  (stage 2: navy sidebar)
   Restyles the sidebar for a dark background. All changes are here.
   To revert this stage, delete this whole block.
───────────────────────────────────────── */

/* Dark shell. The navy sits against the light content area, so it
   needs no hard right border, just a faint edge. */
.app-sidebar{background:var(--navy);border-right:1px solid rgba(255,255,255,0.07);}

/* Dividers below the logo and above the footer, on dark. */
.sb-logo{border-bottom:1px solid rgba(255,255,255,0.07);}
.sb-footer{border-top:1px solid rgba(255,255,255,0.07);}

/* Wordmark and user name in white. */
.sb-logo-text{color:#fff;}
.sb-user-name{color:#fff;}

/* Section eyebrows and the user role in a readable light muted. */
.sb-section-label{color:#8893aa;}
.sb-user-role{color:#8893aa;}

/* Collapse toggle: light, with a soft white hover rather than the
   old pale blue rectangle. */
.sb-toggle{color:#8893aa;}
.sb-toggle:hover{color:#fff;background:rgba(255,255,255,0.08);}

/* Inactive nav items: light slate text lifting to white on a soft
   translucent hover. The active item keeps its solid blue pill from
   stage 1, which now reads strongly against the navy (the second
   rule keeps it blue even while hovered). */
.nav-item{color:#a7b2c6;}
.nav-item:hover{background:rgba(255,255,255,0.08);color:#fff;}
.nav-item.active:hover{background:var(--blue);color:#fff;}

/* User chip hover and the sign-out link, on dark. */
.sb-user:hover{background:rgba(255,255,255,0.08);}
.sign-out-link{color:#a7b2c6;}
.sign-out-link:hover{background:rgba(255,255,255,0.08);color:#fff;}

/* Super-admin "newer Opus model available" notice banner. Rendered by
   app/views/admin/shared/_opus_update_banner.html.erb on the super-admin
   landing page. Lives here because the cms layout always loads application.css
   and the named variables used below are defined in this file. */
.opus-update-banner { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: var(--blue-bg); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 8px; }
.opus-update-banner__icon { color: var(--blue); flex-shrink: 0; margin-top: 0.1rem; }
.opus-update-banner__title { margin: 0 0 0.25rem; font-weight: 600; color: var(--navy); }
.opus-update-banner__text { margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; }

/* ─────────────────────────────────────────
   PASSKEY NUDGE  (dashboard prompt to set up faster sign-in)
   Shown only to users with no passkey yet; dismissed via cookie.
───────────────────────────────────────── */
.passkey-nudge{
  display:flex;
  align-items:center;
  gap:16px;
  background:linear-gradient(135deg,var(--blue-bg),var(--bg-surface));
  border:1px solid rgba(26,158,212,0.25);
  border-radius:12px;
  padding:16px 20px;
  margin-bottom:20px;
  box-shadow:0 2px 12px rgba(26,158,212,0.08);
}
.passkey-nudge__icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(26,158,212,0.35);
}
.passkey-nudge__text{flex:1;min-width:0;}
.passkey-nudge__title{
  font-family:'Outfit',sans-serif;
  font-size:0.975rem;
  font-weight:600;
  color:var(--navy);
  margin:0 0 2px;
}
.passkey-nudge__sub{
  font-size:0.825rem;
  color:var(--text-secondary);
  margin:0;
  line-height:1.5;
}
.passkey-nudge__actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.passkey-nudge__dismiss{
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:0.825rem;
  font-weight:500;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  padding:4px;
}
.passkey-nudge__dismiss:hover{color:var(--navy);}

@media(max-width:767px){
  .passkey-nudge{flex-wrap:wrap;gap:12px;}
  .passkey-nudge__text{flex:1 1 auto;min-width:140px;}
  .passkey-nudge__actions{flex:1 1 100%;justify-content:flex-start;}
  .passkey-nudge__actions .btn{flex:1;justify-content:center;}
}

/* ─────────────────────────────────────────
   SETTINGS PAGE LAYOUT  (two-column shell with sticky category menu)
   Used by app/views/accounts/edit.html.erb. Deliberately does NOT reuse
   the existing .settings-section / .settings-layout names defined above.
───────────────────────────────────────── */

.settings-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1000px;
}

.settings-nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.settings-nav-link {
  display: block;
  padding: 8px 12px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.settings-nav-link:hover {
  background: var(--bg-surface);
  color: var(--navy);
}
.settings-nav-link.is-active {
  background: var(--blue-bg);
  color: var(--blue);
  border-left-color: var(--blue);
  font-weight: 600;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.settings-cat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: calc(var(--topbar-height) + 1rem);
}

/* The Account and Discovery Prep sections both live inside the one shared
   account form, which is a plain block element. The parent flex gap cannot
   reach between them, so this scoped rule provides the spacing instead. It
   only ever matches those two in-form sections. */
form .settings-cat + .settings-cat {
  margin-top: 24px;
}

.settings-cat-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

/* Deep-link target for the dashboard passkey nudge. Lands on the card with
   the Add a passkey button, clear of the fixed topbar. */
#passkey-card {
  scroll-margin-top: calc(var(--topbar-height) + 1rem);
}

@media (max-width: 900px) {
  /* Single column. The category menu becomes a horizontal, scrollable row
     pinned to the top so quick navigation still works on smaller screens. */
  .settings-shell {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .settings-nav {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 0;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
    z-index: 5;
  }
  .settings-nav-link {
    flex: 0 0 auto;
    border-left: none;
    border: 1px solid var(--border);
    border-radius: 2rem;
    background: var(--bg-surface);
  }
  .settings-nav-link.is-active {
    border-color: var(--blue);
    background: var(--blue-bg);
  }
}

/* ─────────────────────────────────────────
   TRIAL BANNER  (friendlier day-aware countdown). Supersedes the earlier
   .trial-banner rules above via source order. Mirrors the passkey nudge layout
   in the amber palette so it reads as a warm heads-up, not a default flash.
───────────────────────────────────────── */
.trial-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--amber-bg), var(--bg-surface));
  border: 1px solid var(--amber-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 12px rgba(181, 130, 26, 0.08);
}
.trial-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(181, 130, 26, 0.3);
}
.trial-banner__text {
  flex: 1;
  min-width: 0;
}
.trial-banner__title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 2px;
}
.trial-banner__sub {
  font-size: 0.825rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.trial-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.trial-banner__dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.trial-banner__dismiss:hover { color: var(--navy); }

@media (max-width: 767px) {
  .trial-banner { flex-wrap: wrap; gap: 12px; }
  .trial-banner__text { flex: 1 1 auto; min-width: 140px; }
  .trial-banner__actions { flex: 1 1 100%; justify-content: flex-start; }
  .trial-banner__actions .btn { flex: 1; justify-content: center; }
}

/* ─────────────────────────────────────────
   SUBJECT TOGGLE  (Company / Individual switch on the new discovery prep form,
   shown when the account selling mode is Both). Mirrors the billing-segmented
   control in the same palette.
───────────────────────────────────────── */
.subject-toggle {
  display: inline-flex;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.subject-toggle__option {
  margin: 0;
}
.subject-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.subject-toggle__pill {
  display: block;
  padding: 6px 18px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.subject-toggle__pill:hover {
  color: var(--navy);
}
.subject-toggle__input:checked + .subject-toggle__pill {
  background: var(--bg-surface);
  color: var(--blue);
  box-shadow: 0 1px 2px rgba(26, 37, 64, 0.08);
}
.subject-toggle__input:focus-visible + .subject-toggle__pill {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* ============================================================
   OUTCOME REASON CARD (Phase 1: capture why a deal closed)
   Isolated appended block. Reuses the existing card and button
   classes, and references only colour tokens already defined in
   this stylesheet (the blue and navy palette). No new tokens and
   no literal hex.
   ============================================================ */
.outcome-card {
  margin-bottom: 16px;
}

/* Awaiting a reason: a gentle, optional prompt. Soft blue-tinted card with a
   slightly stronger blue left border. Reads as "do this when ready", not an
   error or a warning. */
.outcome-card--prompt {
  background: var(--blue-bg);
  border-color: var(--blue-light);
  border-left: 3px solid var(--blue);
}

/* Recorded: a quiet, settled card matching the other lead cards. */
.outcome-card--settled {
  background: var(--bg-surface);
  border-color: var(--border);
}

.outcome-card__title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
}

.outcome-card--settled .outcome-card__title {
  margin-bottom: 6px;
}

.outcome-card__form .form-group {
  margin-bottom: 12px;
}

.outcome-card__actions {
  margin-top: 4px;
}

.outcome-card__hint {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.outcome-card__notes {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.outcome-card__edit {
  margin-top: 12px;
}

.outcome-card__edit summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--blue);
}

.outcome-card__edit summary:hover {
  color: var(--blue-dark);
}

.outcome-card__edit .outcome-card__form {
  margin-top: 12px;
}

/* ============================================================
   INSIGHTS PAGE (Phase 2: manager-facing diagnostic, no AI)
   Isolated appended block. Reuses the existing card and button
   classes and references only colour tokens already defined in
   this stylesheet (blue, navy, border, text, success, danger).
   No new tokens and no literal hex.
   ============================================================ */
.insights-intro {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 70ch;
}

/* Controls: a simple inline-wrapping GET form. */
.insights-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 20px;
}
.insights-controls__field {
  display: flex;
  flex-direction: column;
}
.insights-controls__field .form-control {
  width: auto;
  min-width: 160px;
}
.insights-controls__actions {
  display: flex;
  align-items: flex-end;
}

/* Four panels in a responsive grid, stacking to one column when narrow. */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.insights-panel__title {
  font-size: 0.95rem;
}

/* Quiet, settled empty state. */
.insights-empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Neutral note line above tables and lists. */
.insights-note {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Calm, neutral caution (not an alarming red). Uses the blue prompt tokens. */
.insights-warn {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--blue-bg);
  border: 1px solid var(--blue-light);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  color: var(--navy);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Won/lost reason lists. */
.insights-reasons {
  display: grid;
  gap: 16px;
}
.insights-reasons__heading {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--text-secondary);
}
.insights-reasons__heading--won {
  color: var(--success);
}
.insights-reasons__heading--lost {
  color: var(--danger);
}
.insights-reasons__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.insights-reasons__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.875rem;
}
.insights-reasons__list li:last-child {
  border-bottom: none;
}
.insights-reasons__label {
  color: var(--text-primary);
}
.insights-reasons__count {
  color: var(--navy);
  font-weight: 600;
}

/* Plain, readable tables. */
.insights-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.insights-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.insights-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}
.insights-table tr:last-child td {
  border-bottom: none;
}

/* Simple list (closed without a reason). */
.insights-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.insights-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.875rem;
}
.insights-list li:last-child {
  border-bottom: none;
}
.insights-list__meta {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* ============================================================
   INSIGHTS POLISH (Phase 2.1: controls bar + headline numbers)
   Fresh appended block, sits below the INSIGHTS PAGE block above
   without editing it. Reuses existing colour tokens only
   (bg-surface, border, border-light, navy, text-secondary,
   success, danger). No new tokens, no literal hex.
   ============================================================ */

/* Group the controls into one deliberate, lightly framed bar. */
.insights-controls {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.insights-controls__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

/* Headline figures: the confident anchor at the top of a panel. */
.insights-headline-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}
.insights-headline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}
/* Inside the pair the figures share one divider, so drop the per-figure one. */
.insights-headline-pair .insights-headline {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.insights-headline__value {
  font-family: 'Outfit', sans-serif;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}
.insights-headline__value--won {
  color: var(--success);
}
.insights-headline__value--lost {
  color: var(--danger);
}
.insights-headline__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ============================================================
   INSIGHTS PLAYBOOK (Phase 3: the seller learning loop)
   Fresh appended block, below the earlier INSIGHTS blocks without
   editing them. The playbook is the calm, settled headline of the
   page. Reuses existing tokens only (text-primary, text-secondary).
   No new tokens, no literal hex.
   ============================================================ */
.insights-playbook {
  margin-bottom: 20px;
}

/* Comfortable reading width for the generated prose. */
.insights-playbook__body {
  max-width: 70ch;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* simple_format wraps each section in a <p>. The first line of each section is
   its heading; give the paragraphs clear separation so the sections read apart. */
.insights-playbook__body p {
  margin: 0 0 14px;
}
.insights-playbook__body p:last-child {
  margin-bottom: 0;
}

/* Quiet caption under the body. */
.insights-playbook__meta {
  margin: 14px 0 16px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* Settled empty and placeholder states. */
.insights-playbook__empty {
  margin: 0 0 16px;
  max-width: 70ch;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ============================================================
   INSIGHTS POLISH 2 (panel padding + generating spinner)
   Fresh appended block. Reuses existing tokens only (border, blue).
   No new tokens, no literal hex.
   ============================================================ */

/* Consistent, comfortable body padding so headline numbers, notes and tables in
   all four panels (and the playbook card) never sit tight against the card edge.
   Scoped to insights so card-body elsewhere in the app is untouched. */
.insights-panel > .card-body,
.insights-playbook > .card-body {
  padding: 18px 20px;
}

/* Generating state: a small spinner sitting beside the reassuring copy. */
.insights-playbook__generating {
  display: flex;
  align-items: center;
  gap: 10px;
}
.insights-playbook__generating .insights-playbook__empty {
  margin: 0;
}

/* Pure CSS spinner: a faint ring with a single blue active segment. No image,
   no library. */
.insights-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: insights-spin 0.7s linear infinite;
}
@keyframes insights-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   INSIGHTS STALLED LIST (compact stacked list, not a wide table)
   Fresh appended block. Fits the narrow insights grid column and
   leads with the days-quiet figure. Reuses existing tokens only
   (navy, text-secondary, border-light, blue). No new tokens, no
   literal hex, no fixed widths that could re-introduce overflow.
   ============================================================ */
.insights-stalled {
  list-style: none;
  margin: 0;
  padding: 0;
}
.insights-stalled__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.insights-stalled__item:last-child {
  border-bottom: none;
}
/* min-width: 0 lets a long company name wrap or truncate inside the card
   instead of forcing the column wider. */
.insights-stalled__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.insights-stalled__company {
  font-weight: 600;
  color: var(--navy);
}
.insights-stalled__sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.insights-stalled__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.insights-stalled__days {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--blue);
}
.insights-stalled__dayslabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* ===================================================================
   Getting started checklist (dashboard onboarding)
   Uses only confirmed theme variables.
   =================================================================== */
.onboarding-card {
  margin-bottom: 1.5rem;
}

.onboarding-head {
  margin-bottom: 1.1rem;
}

.onboarding-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.onboarding-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

.onboarding-progress-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.onboarding-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.2rem 0 0.85rem;
}

.onboarding-progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border-light);
  overflow: hidden;
}

.onboarding-progress-fill {
  height: 100%;
  width: var(--onboarding-progress, 0%);
  border-radius: 3px;
  background: var(--blue);
  transition: width 0.4s ease-out;
}

.onboarding-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  border-left: 3px solid transparent;
}

.onboarding-step.is-active {
  background: var(--blue-bg);
  border-left-color: var(--blue);
}

.onboarding-tick {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.onboarding-step.is-active .onboarding-tick {
  border: 1.5px solid var(--blue);
  color: var(--blue-dark);
}

.onboarding-step.is-done .onboarding-tick {
  background: var(--success);
  color: var(--bg-surface);
}

.onboarding-tick svg {
  display: block;
}

.onboarding-num {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.onboarding-step-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.onboarding-step-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
}

.onboarding-step.is-done .onboarding-step-label {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: line-through;
}

.onboarding-step-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.onboarding-step-btn {
  flex: 0 0 auto;
}

.onboarding-done-tag {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   CONNECT TO AI PAGE (in-app guide for connecting an assistant)
   Fresh appended block. Reuses existing tokens and the .card and
   .btn classes. No new tokens, no literal hex, no !important.
   ============================================================ */
.connect-page {
  max-width: 760px;
}

.connect-intro {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 14px;
}

/* The server address: the one detail a user copies during setup. */
.connect-address-card {
  margin: 6px 0 22px;
  border-color: var(--blue-light);
  background: var(--blue-bg);
}
.connect-address-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.connect-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.connect-address__url {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  word-break: break-all;
}
.connect-address__copy {
  flex: 0 0 auto;
}
.connect-address-note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Content cards down the page. */
.connect-card {
  margin-bottom: 18px;
}
.connect-card .card-body > p {
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 12px;
}
.connect-card .card-body > p:last-child {
  margin-bottom: 0;
}

.connect-list {
  margin: 0 0 12px;
  padding-left: 20px;
}
.connect-list li {
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 6px;
}
.connect-list--spaced li {
  margin-bottom: 12px;
}

.connect-steps {
  margin: 0 0 12px;
  padding-left: 20px;
}
.connect-steps li {
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 10px;
  padding-left: 4px;
}

.connect-note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 12px 0 0;
}

.connect-inline-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  color: var(--navy);
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 1px 6px;
  word-break: break-all;
}

.connect-link {
  color: var(--blue);
  font-weight: 500;
}
.connect-link:hover {
  color: var(--blue-dark);
}

/* ============================================================
   CONNECT POLISH (AI assistants marketplace card + consent screen)
   Fresh appended block. Reuses existing tokens only. No new tokens,
   no literal hex, no !important.
   ============================================================ */

/* The connect icon sitting in a marketplace logo wrap, matching the blue
   treatment of the lettered fallback logos. */
.marketplace-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.marketplace-logo-icon svg {
  width: 20px;
  height: 20px;
}

/* OAuth consent screen: stack the Allow and Cancel buttons, full width, so they
   read clearly inside the auth card. The card, heading and buttons themselves
   are styled by the shared auth layout and existing .btn classes. */
.consent-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.consent-actions__btn {
  width: 100%;
}

/* ============================================================
   APP NUDGE (neutral, reusable inline pointer card)
   Generalised from the passkey-nudge styling so other nudges
   (for example the AI assistants connect nudge) can reuse it.
   Tokens only, no literal hex, no !important. The passkey nudge
   keeps its own classes.
   ============================================================ */
.app-nudge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--blue-bg), var(--bg-surface));
  border: 1px solid var(--blue-light);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px var(--border-light);
}
.app-nudge__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--blue-light);
}
.app-nudge__icon svg {
  width: 22px;
  height: 22px;
}
.app-nudge__text {
  flex: 1;
  min-width: 0;
}
.app-nudge__title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 2px;
}
.app-nudge__sub {
  font-size: 0.825rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.app-nudge__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.app-nudge__dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.825rem;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  padding: 4px;
}
.app-nudge__dismiss:hover {
  color: var(--navy);
}

@media (max-width: 767px) {
  .app-nudge {
    flex-wrap: wrap;
    gap: 12px;
  }
  .app-nudge__text {
    flex: 1 1 auto;
    min-width: 140px;
  }
  .app-nudge__actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .app-nudge__actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   COMPANIES HOUSE LOOKUP (read-only research aid)
   Shown on the lead Companies House card and inline on the
   Marketplace Companies House card. Reuses existing tokens only.
   No new tokens, no literal hex, no !important.
   ============================================================ */
.ch-lookup { display: flex; flex-direction: column; gap: 12px; }
.ch-lookup__search { display: flex; gap: 8px; align-items: center; }
.ch-lookup__search .form-control { flex: 1; }
.ch-lookup__results { display: flex; flex-direction: column; gap: 10px; }

.ch-lookup__status { display: flex; align-items: center; gap: 8px; font-size: 0.825rem; color: var(--text-secondary); }
.ch-lookup__empty,
.ch-lookup__error { font-size: 0.85rem; color: var(--text-secondary); padding: 10px 12px; border-radius: 8px; background: var(--bg-app); }
.ch-lookup__error { color: var(--danger); }

.ch-results { display: flex; flex-direction: column; gap: 8px; }
.ch-result { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg-surface); }
.ch-result--link { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ch-result--link:hover { border-color: var(--blue); box-shadow: 0 2px 8px var(--border-light); }
.ch-result__view { color: var(--blue); font-weight: 600; }
.ch-result__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ch-result__name { font-weight: 600; color: var(--navy); font-size: 0.875rem; }
.ch-result__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ch-result__metaitem { font-size: 0.78rem; color: var(--text-secondary); }
.ch-result__address { margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); }
.ch-results__count { margin: 4px 0 0; font-size: 0.75rem; color: var(--text-muted); }

.ch-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.ch-pill--active { background: var(--blue-bg); color: var(--blue-dark); }
.ch-pill--inactive { background: var(--bg-app); color: var(--text-secondary); }

.ch-marketplace-lookup { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ch-card-note { margin: 4px 0 0; font-size: 0.75rem; color: var(--text-muted); }

/* ============================================================
   COMPANIES HOUSE PROFILE (in-app company detail view)
   Reuses existing tokens only. No new tokens, no literal hex,
   no !important.
   ============================================================ */
.ch-profile { display: flex; flex-direction: column; gap: 12px; }
.ch-profile__back { align-self: flex-start; }
.ch-profile__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-profile__name { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 600; color: var(--navy); margin: 0; }
.ch-profile__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch-profile__section { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.ch-profile__flags { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-flag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; background: var(--amber-bg); color: var(--amber); }
.ch-flag--warn { background: var(--amber-bg); color: var(--amber); }
.ch-officers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-officer { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ch-officer__name { font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.ch-officer__meta { font-size: 0.75rem; color: var(--text-muted); }
.ch-profile__external { align-self: flex-start; margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.ch-profile__external:hover { color: var(--blue-dark); }
@media (max-width: 767px) { .ch-profile__grid { grid-template-columns: 1fr; } }