:root {
  color-scheme:dark;
  /* palette */
  --bg:#050a0f; --surface:rgba(16,23,38,.72); --surface-2:rgba(12,20,32,.85); --line:rgba(30,144,255,.14);
  --text:#eef3fb; --muted:#93a2bd; --teal:#1E90FF; --accent:#1E90FF; --accent-2:#4FB3FF;
  --amber:#ffbd59; --red:#ff6b6b;
  /* aliases some older rules reference */
  --radius:12px; --t-base:1rem;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* type */
  --t-xs:.75rem; --t-sm:.875rem; --t-md:1rem; --t-lg:1.25rem; --t-xl:1.75rem; --t-2xl:2.5rem;

  /* weight */
  --w-normal:400; --w-medium:500; --w-semi:600; --w-bold:700;

  /* shadow */
  --shadow-sm:0 1px 2px rgba(0,0,0,.24);
  --shadow-md:0 8px 24px rgba(0,0,0,.18);
  --shadow-lg:0 20px 60px rgba(0,0,0,.28);

  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
.portal-footer { display:flex; gap:16px; flex-wrap:wrap; padding:16px 24px; border-top:1px solid var(--line); font-size:.8rem; }
.portal-footer a { color:var(--muted); text-decoration:none; }
.portal-footer a:hover { color:var(--teal); }
html,body { min-height:100%; background:var(--bg); overflow-x:clip; }
body {
  margin:0;
  color:var(--text);
  /* brand ground: mesh glows + faint grid underlay (calmer than the owner deck) */
  background:
    radial-gradient(600px 300px at 8% -10%,rgba(30,144,255,.10),transparent 60%),
    radial-gradient(700px 400px at 100% 0%,rgba(139,92,246,.07),transparent 55%),
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0 / 40px 40px,
    var(--bg);
}
img,svg,video { max-width:100%; }
button,input,textarea { font:inherit; }
button { color:inherit; }

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2000;
  padding: var(--s3) var(--s4);
  border-radius:var(--r-md);
  background: var(--surface-2);
  color: var(--accent-2);
  border: 1px solid var(--line);
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

.eyebrow { color:var(--teal); font-size:var(--t-xs); font-weight:var(--w-bold); letter-spacing:.16em; }

/* Login Shell */
.login-shell {
  display:grid;
  min-height:100vh;
  place-items:center;
  padding:var(--s5);
}

.login-card {
  width:min(420px,100%);
  padding:var(--s7);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:rgba(16,23,38,.95);
  box-shadow:var(--shadow-lg);
}

.login-logo {
  width:64px;
  height:64px;
  object-fit:cover;
  margin-bottom:var(--s5);
  border-radius:14px;
  background:#fff;
  padding:6px;
  box-sizing:border-box;
}

.login-card h1 {
  margin:var(--s2) 0;
  font-size:var(--t-xl);
}

.login-card p {
  margin:0 0 var(--s5);
  color:var(--muted);
}

.login-card label {
  display:block;
  margin-bottom:var(--s2);
  color:var(--muted);
  font-size:var(--t-sm);
  margin-top:var(--s4);
}

input,textarea {
  width:100%;
  color:var(--text);
  background:rgba(8,16,26,.72);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  outline:none;
}

input:focus,textarea:focus {
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(30,144,255,.12);
}

button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible {
  outline:2px solid var(--accent-2);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(30,144,255,.14);
}

.login-card .button {
  width:100%;
  margin-top:var(--s4);
}

.form-status {
  min-height:1.25rem;
  margin-top:var(--s3);
  font-size:var(--t-sm);
}

.form-status.error { color:var(--red); }
.form-status.success { color:var(--teal); }
.form-status.loading { color:var(--muted); }

.disclosure-shell {
  width:min(860px,100%);
  margin:0 auto;
  padding:clamp(32px,8vw,88px) var(--s5);
}

.back-link {
  display:inline-flex;
  margin-bottom:var(--s7);
  color:var(--teal);
  font-size:var(--t-sm);
  font-weight:var(--w-semi);
  text-decoration:none;
}

.back-link:hover { text-decoration:underline; }

.disclosure-shell h1 {
  max-width:680px;
  margin:var(--s3) 0 var(--s3);
  font-size:clamp(2rem,5vw,3.5rem);
  letter-spacing:-.03em;
}

.disclosure-lead {
  max-width:650px;
  margin:0 0 var(--s7);
  color:var(--muted);
  font-size:var(--t-lg);
  line-height:1.6;
}

.disclosure-card {
  margin-top:var(--s4);
  padding:var(--s5) var(--s6);
  border:1px solid var(--line);
  border-left:3px solid var(--teal);
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(16,23,38,.94),rgba(16,23,38,.88));
  box-shadow:var(--shadow-md);
}

.disclosure-card h2 { margin:0 0 var(--s2); font-size:var(--t-lg); }
.disclosure-card p { margin:0; color:var(--muted); line-height:1.65; }
.disclosure-footer { margin:var(--s7) 0 0; color:var(--muted); font-size:var(--t-sm); line-height:1.6; }

/* Portal Shell */
.portal-shell {
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:100vh;
}

.portal-header {
  border-bottom:1px solid var(--line);
  background:rgba(5,10,15,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.header-content {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1400px;
  margin:0 auto;
  padding:var(--s5) var(--s6);
  gap:var(--s4);
}

.brand {
  display:flex;
  align-items:center;
  gap:var(--s3);
  color:var(--text);
  text-decoration:none;
}

.brand-logo {
  width:40px;
  height:40px;
  object-fit:contain;
}

.brand span {
  display:grid;
  gap:var(--s1);
}

.brand strong {
  font-size:var(--t-sm);
  letter-spacing:.08em;
}

.brand small {
  color:var(--muted);
  font-size:var(--t-xs);
  letter-spacing:.12em;
}

.logout-button {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:var(--t-sm);
  cursor:pointer;
  padding:var(--s3) var(--s4);
  border-radius:var(--r-md);
}

.logout-button:hover {
  color:var(--text);
  background:var(--surface-2);
}

/* Portal Main Content */
.portal-main {
  overflow-y:auto;
  max-width:1400px;
  margin:0 auto;
  width:100%;
  padding:var(--s6);
}

.dashboard {
  display:grid;
  gap:var(--s6);
}

.dashboard-header h1 {
  margin:0 0 var(--s2);
  font-size:clamp(1.5rem,3vw,2.2rem);
}

.dashboard-header p {
  margin:0;
  color:var(--muted);
}

.dashboard-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s5);
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
}

.dashboard-header-note {
  max-width:300px;
  color:var(--muted);
  font-size:var(--t-xs);
  line-height:1.55;
  text-align:right;
}

/* Stats Grid */
.dashboard-stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s4);
}

.stat-card {
  padding:var(--s5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:rgba(16,23,38,.88);
  box-shadow:var(--shadow-md);
}

.stat-label {
  color:var(--muted);
  font-size:var(--t-xs);
  font-weight:var(--w-bold);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:var(--s2);
}

.stat-value {
  font-size:clamp(1.5rem,4vw,2.2rem);
  font-weight:var(--w-bold);
  color:var(--teal);
}

/* Dashboard Sections */
.dashboard-section {
  display:grid;
  gap:var(--s4);
}

.dashboard-section h2 {
  margin:var(--s2) 0 0;
  font-size:var(--t-lg);
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s4);
}

.section-hint {
  margin:var(--s1) 0 0;
  color:var(--muted);
  font-size:var(--t-sm);
}

/* Projects List */
.projects-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--s4);
}

.project-card {
  padding:var(--s5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-md);
}

.project-card h3 {
  margin:0 0 var(--s3);
  font-size:var(--t-md);
}

.project-status,
.project-scope {
  margin:var(--s2) 0;
  color:var(--muted);
  font-size:var(--t-sm);
}

.project-date {
  display:block;
  margin-top:var(--s3);
  color:var(--muted);
  font-size:var(--t-xs);
}

.project-scope {
  line-height:1.5;
}

.project-timeline {
  margin-top: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.project-timeline h4 {
  margin: 0 0 var(--s2);
  font-size: var(--t-sm);
  color: var(--text);
}

.timeline-total {
  margin: 0 0 var(--s2);
  font-size: var(--t-sm);
  color: var(--text);
}

.timeline-services {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline-service {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}

.timeline-service:last-child {
  border-bottom: none;
}

.timeline-range {
  color: var(--muted);
  font-size: var(--t-xs);
}

.timeline-price {
  margin-left: auto;
  font-weight: 600;
  font-size: var(--t-xs);
}

.timeline-note {
  margin: var(--s2) 0 0;
  font-size: var(--t-xs);
  color: var(--muted);
  font-style: italic;
}

/* Payment redirect banner */
.payment-banner {
  padding: var(--s3) var(--s4);
  text-align: center;
  font-weight: 600;
  font-size: var(--t-sm);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  animation: slideDown 0.3s ease-out;
}

.payment-success {
  background: #d4edda;
  color: #155724;
  border-bottom: 2px solid #155724;
}

.payment-cancelled {
  background: #f8d7da;
  color: #721c24;
  border-bottom: 2px solid #721c24;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Upgrade / Payment panel */
.upgrade-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
}

.upgrade-card h3 {
  margin: 0 0 var(--s2);
  font-size: var(--t-lg);
}

.upgrade-desc {
  color: var(--muted);
  font-size: var(--t-sm);
  margin: 0 0 var(--s4);
}

.upgrade-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
}

.upgrade-option {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.upgrade-option strong {
  font-size: var(--t-base);
}

.upgrade-price {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--accent);
}

.upgrade-detail {
  font-size: var(--t-xs);
  color: var(--muted);
  flex-grow: 1;
}

.upgrade-btn {
  margin-top: var(--s2);
  width: 100%;
}

.upgrade-note {
  margin: var(--s4) 0 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

.upgrade-note a {
  color: var(--accent);
  font-weight: 600;
}

/* Work Tabs */
.work-tabs {
  display:flex;
  gap:var(--s2);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s4);
}

.tab-button {
  background:transparent;
  border:0;
  padding:var(--s3) var(--s4);
  color:var(--muted);
  font-size:var(--t-sm);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}

.tab-button:hover {
  color:var(--text);
}

.tab-button.active {
  color:var(--teal);
  border-bottom-color:var(--teal);
}

/* Tasks List */
.tasks-list {
  display:grid;
  gap:var(--s3);
}

.task-section h4 {
  margin:var(--s4) 0 var(--s2);
  color:var(--muted);
  font-size:var(--t-sm);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.task-item {
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(16,23,38,.88);
}

.task-item[data-status="completed"] {
  border-color:rgba(30,144,255,.24);
  background:rgba(30,144,255,.08);
}

.task-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-bottom:var(--s2);
}

.task-header strong {
  font-size:var(--t-md);
}

.task-status {
  font-size:var(--t-xs);
  font-weight:var(--w-bold);
  text-transform:uppercase;
  padding:var(--s1) var(--s2);
  border-radius:var(--r-sm);
  background:rgba(255,189,89,.14);
  color:var(--amber);
}

.task-item[data-status="completed"] .task-status {
  background:rgba(30,144,255,.14);
  color:var(--teal);
}

.task-type,
.task-date {
  margin:var(--s2) 0 0;
  color:var(--muted);
  font-size:var(--t-sm);
}

/* Missions List */
.missions-list {
  display:grid;
  gap:var(--s3);
}

.mission-card {
  padding:var(--s5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}

.mission-card.status-completed {
  border-color:rgba(30,144,255,.24);
  background:rgba(30,144,255,.08);
}

.mission-card h4 {
  margin:0 0 var(--s2);
  font-size:var(--t-md);
}

.mission-status,
.mission-date {
  margin:var(--s2) 0;
  color:var(--muted);
  font-size:var(--t-sm);
}

/* Assets List */
.assets-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--s4);
}

.asset-card {
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-md);
}

.asset-card[data-status="stored_encrypted"] {
  border-color:rgba(30,144,255,.24);
}

.asset-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s2);
  margin-bottom:var(--s3);
}

.asset-header strong {
  font-size:var(--t-sm);
  word-break:break-word;
}

.asset-status {
  font-size:var(--t-xs);
  font-weight:var(--w-bold);
  text-transform:uppercase;
  padding:var(--s1) var(--s2);
  border-radius:var(--r-sm);
  background:rgba(255,189,89,.14);
  color:var(--amber);
  white-space:nowrap;
}

.asset-card[data-status="stored_encrypted"] .asset-status {
  background:rgba(30,144,255,.14);
  color:var(--teal);
}

.asset-type,
.asset-size,
.asset-date {
  margin:var(--s2) 0;
  color:var(--muted);
  font-size:var(--t-sm);
}

/* Empty State */
.empty-state {
  padding:var(--s7);
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  color:var(--muted);
  text-align:center;
}

.loading {
  color:var(--muted);
  text-align:center;
  padding:var(--s5);
}

/* Button Styles */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 var(--s4);
  border:1px solid transparent;
  border-radius:var(--r-md);
  font-weight:var(--w-bold);
  cursor:pointer;
}

.button-primary {
  background:var(--teal);
  color:#04101f;
}

.button-primary:hover:not(:disabled) {
  opacity:0.88;
}

.button:disabled {
  opacity:.55;
  cursor:wait;
}

/* Error Message */
.error-message {
  margin:var(--s4) 0;
  padding:var(--s4);
  border:1px solid rgba(255,107,107,.3);
  border-radius:var(--r-md);
  background:rgba(255,107,107,.12);
  color:#ff9696;
}

/* Tab Content */
.tab-content {
  display:none;
}

.tab-content.active {
  display:block;
}

/* Asset Upload & Download */
.assets-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--s4);
  margin-bottom:var(--s4);
}

.assets-header h2 {
  margin:0;
  flex:1;
}

.upload-progress {
  margin-bottom:var(--s4);
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(30,144,255,.06);
}

.progress-bar {
  height:8px;
  background:rgba(30,144,255,.2);
  border-radius:var(--r-pill);
  overflow:hidden;
  margin-bottom:var(--s2);
}

.progress-fill {
  height:100%;
  background:var(--teal);
  transition:width 200ms ease;
}

.progress-text {
  margin:0;
  font-size:var(--t-sm);
  color:var(--teal);
}

.asset-actions {
  display:flex;
  gap:var(--s2);
  margin-top:var(--s3);
}

.button-small {
  display:inline-block;
  padding:var(--s2) var(--s3);
  font-size:var(--t-sm);
  border:1px solid var(--teal);
  border-radius:var(--r-md);
  background:transparent;
  color:var(--teal);
  cursor:pointer;
  transition:all 160ms ease;
  text-decoration:none;
}

.button-small:hover {
  background:rgba(30,144,255,.12);
}

.button-small:active {
  background:rgba(30,144,255,.2);
}

.button-secondary {
  padding:var(--s2) var(--s4);
  border:1px solid var(--muted);
  border-radius:var(--r-md);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:all 160ms ease;
  white-space:nowrap;
}

.button-secondary:hover {
  border-color:var(--teal);
  color:var(--teal);
  background:rgba(30,144,255,.08);
}

.error-message.success {
  background:rgba(30,144,255,.12);
  color:var(--teal);
  border:1px solid var(--teal);
}

.error-message.error {
  background:rgba(255,107,107,.12);
  color:#ff9696;
  border:1px solid rgba(255,107,107,.3);
}

/* Responsive */
@media (max-width:980px) {
  .dashboard-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .projects-list {
    grid-template-columns:1fr;
  }
  .assets-list {
    grid-template-columns:1fr;
  }
  .header-content {
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:620px) {
  .dashboard-header { align-items:flex-start; flex-direction:column; }
  .dashboard-header-note { max-width:none; text-align:left; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .portal-main {
    padding:var(--s4);
  }
  .dashboard-stats {
    grid-template-columns:1fr;
  }
  .stat-card {
    padding:var(--s4);
  }
  .stat-value {
    font-size:var(--t-xl);
  }
  .dashboard-section h2 {
    font-size:var(--t-md);
  }
  .header-content {
    padding:var(--s4) var(--s5);
  }
}

/* Owner preview banner */
.preview-banner {
  padding:var(--s3) var(--s5);
  background:var(--amber);
  color:#2a1c00;
  font-size:var(--t-sm);
  font-weight:600;
  text-align:center;
}

/* AI Assistant */
.section-hint {
  margin:0;
  color:var(--muted);
  font-size:var(--t-sm);
}

.assistant-log {
  display:grid;
  gap:var(--s3);
  max-height:360px;
  overflow-y:auto;
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}

.assistant-log:empty::before {
  content:'Ask a question about your project below.';
  color:var(--muted);
  font-size:var(--t-sm);
}

.assistant-message {
  padding:var(--s3) var(--s4);
  border-radius:var(--r-md);
  font-size:var(--t-sm);
  line-height:1.5;
  white-space:pre-wrap;
  max-width:80%;
}

.assistant-message-user {
  justify-self:end;
  background:var(--teal);
  color:#03211a;
}

.assistant-message-assistant {
  justify-self:start;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
}

.assistant-thinking {
  color:var(--muted);
  font-style:italic;
}

.assistant-form {
  display:flex;
  gap:var(--s3);
}

.assistant-form input {
  flex:1;
  padding:var(--s3) var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text);
  font-size:var(--t-sm);
}

/* File upload */
.assets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
}
.assets-header h2 {
  margin: 0;
}

.upload-progress-wrap {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--s4);
}

.upload-progress {
  flex: 1;
  height: 8px;
  border: none;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}

.upload-progress::-webkit-progress-bar {
  background: var(--surface-2);
}

.upload-progress::-webkit-progress-value {
  background: var(--teal);
  border-radius: 99px;
}

.upload-progress::-moz-progress-bar {
  background: var(--teal);
  border-radius: 99px;
}

.progress-text {
  font-size: var(--t-sm);
  color: var(--muted);
}

.toast {
  position: fixed;
  bottom: var(--s5);
  right: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-width: 400px;
  word-wrap: break-word;
}

.toast.success {
  border-color: var(--teal);
  color: var(--teal);
}

.toast.error {
  border-color: var(--red);
  color: var(--red);
}

/* Secure messages thread (client <-> consultant) */
.messages-thread {
  display:grid;
  gap:var(--s3);
  max-height:420px;
  overflow-y:auto;
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}

.message-row {
  display:grid;
}

.message-row-owner { justify-items:start; }
.message-row-client { justify-items:end; }

.message-bubble {
  max-width:80%;
  padding:var(--s3) var(--s4);
  border-radius:var(--r-md);
  font-size:var(--t-sm);
  line-height:1.5;
}

/* Consultant (owner) messages: left, teal-accented. */
.message-row-owner .message-bubble {
  background:rgba(30,144,255,.08);
  border:1px solid rgba(30,144,255,.24);
  border-left:3px solid var(--teal);
}

/* The client's own messages: right, calm neutral. */
.message-row-client .message-bubble {
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
}

.message-body {
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}

.message-time {
  display:block;
  margin-top:var(--s2);
  color:var(--muted);
  font-size:var(--t-xs);
}

.message-form {
  display:grid;
  gap:var(--s3);
}

.message-form textarea {
  resize:vertical;
  min-height:72px;
  background:var(--surface);
  font-size:var(--t-sm);
}

.message-form-footer {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--s4);
}

.message-chars {
  color:var(--muted);
  font-size:var(--t-xs);
}

.message-chars.warn {
  color:var(--amber);
}

/* Two-factor authentication (OmniRoute T10) */
.mfa-actions {
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
}

.mfa-panel {
  display:grid;
  gap:var(--s3);
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}

/* Heading inside a .mfa-panel (the password-change card reuses that panel shell). Sized between
   the section h2 and body text so the card reads as part of Security, not a competing section. */
.panel-subhead {
  margin:0;
  font-size:var(--t-md);
  font-weight:600;
  color:var(--text);
}

/* "No account yet?" under the sign-in button. Muted so it never competes with the primary
   action, but reachable — it is the only route from a login page to requesting access. */
.login-alt {
  margin:0;
  text-align:center;
  font-size:var(--t-sm);
  color:var(--muted);
}
.login-alt a { color:var(--accent-2); }

.mfa-secret {
  display:block;
  padding:var(--s3);
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-sm);
  letter-spacing:0.08em;
  word-break:break-all;
  user-select:all;
}

.mfa-recovery-codes {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:var(--s2);
  padding:0;
  margin:0;
  list-style:none;
}

.mfa-recovery-codes code {
  display:block;
  padding:var(--s3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--bg);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-sm);
  letter-spacing:0.08em;
  text-align:center;
  user-select:all;
}

/* Live Mission Control + Activity feed */
.mission-control { margin-bottom:var(--s5); }
.mission-control-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:var(--s4);
}
@media (max-width:720px) {
  .mission-control-grid { grid-template-columns:1fr; }
}

.now-card {
  display:grid;
  gap:var(--s3);
  padding:var(--s5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(16,23,38,.9),rgba(8,16,26,.75));
  backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(30,144,255,.06),var(--shadow-md);
  position:relative;
  overflow:hidden;
}
.now-card::before {
  content:'';
  position:absolute;
  inset:-40% -40% auto auto;
  width:12rem;
  height:12rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(30,144,255,.12),transparent 70%);
  pointer-events:none;
}

.now-eyebrow {
  color:var(--teal);
  font-size:var(--t-xs);
  font-weight:var(--w-bold);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.now-value {
  font-size:var(--t-xl);
  font-weight:var(--w-bold);
  line-height:1.25;
}

.now-label {
  color:var(--muted);
  font-size:var(--t-sm);
  line-height:1.5;
}

.now-health {
  display:flex;
  align-items:center;
  gap:var(--s2);
  font-size:var(--t-sm);
  font-weight:var(--w-medium);
}
.health-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 12px var(--teal);
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.6; transform:scale(1.15); }
}

.health-active .health-dot { background:var(--teal); box-shadow:0 0 12px var(--teal); }
.health-busy .health-dot { background:var(--amber); box-shadow:0 0 12px var(--amber); }
.health-wrapping .health-dot { background:#89c2ff; box-shadow:0 0 12px #89c2ff; }
.health-blocked .health-dot { background:var(--red); box-shadow:0 0 12px var(--red); }
.health-healthy .health-dot { background:var(--teal); box-shadow:0 0 12px var(--teal); }

.now-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s3);
}
.now-metric {
  text-align:center;
}
.now-metric-value {
  display:block;
  font-size:var(--t-xl);
  font-weight:var(--w-bold);
}
.now-metric-label {
  color:var(--muted);
  font-size:var(--t-xs);
}

.now-updated {
  color:var(--muted);
  font-size:var(--t-xs);
  text-align:right;
}

.activity-feed {
  max-height:24rem;
  overflow-y:auto;
  padding:var(--s3);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}

.activity-list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:var(--s3);
}

.activity-item {
  padding:var(--s3) var(--s4);
  border-radius:var(--r-md);
  background:rgba(16,23,38,.6);
  border-left:3px solid var(--teal);
  position:relative;
}
.activity-item.activity-task { border-left-color:var(--teal); }
.activity-item.activity-asset { border-left-color:var(--amber); }
.activity-item.activity-message { border-left-color:#89c2ff; }
.activity-item.activity-project { border-left-color:#c4a1ff; }

.activity-title {
  font-weight:var(--w-semi);
  font-size:var(--t-sm);
}
.activity-meta {
  color:var(--muted);
  font-size:var(--t-xs);
  margin-top:var(--s1);
}
.activity-body {
  color:var(--muted);
  font-size:var(--t-sm);
  margin-bottom:var(--s2);
  font-style:italic;
}

/* Feedback form */
.feedback-form {
  display:grid;
  gap:var(--s4);
}
.feedback-label {
  display:block;
  color:var(--muted);
  font-size:var(--t-sm);
  margin-bottom:var(--s2);
}
.nps-slider-row {
  display:flex;
  align-items:center;
  gap:var(--s3);
}
.nps-label {
  color:var(--muted);
  font-size:var(--t-sm);
  font-weight:var(--w-bold);
  min-width:1.5em;
  text-align:center;
}
.nps-slider {
  flex:1;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
}
.nps-slider::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--teal);
  cursor:pointer;
  border:2px solid var(--bg);
}
.nps-slider::-moz-range-thumb {
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--teal);
  cursor:pointer;
  border:2px solid var(--bg);
}
.nps-display {
  text-align:center;
  font-size:var(--t-2xl);
  font-weight:var(--w-bold);
  color:var(--teal);
  margin:var(--s2) 0;
}
.feedback-consent {
  display:flex;
  align-items:flex-start;
  gap:var(--s2);
  font-size:var(--t-sm);
  color:var(--muted);
}
.feedback-consent input {
  width:auto;
  margin-top:var(--s1);
}

/* ===================== CLIENT DECK THEME (2026-08-31) =====================
   Frozen brand language, mirrored from public/control-center.html
   (glass cards, dodger-blue accent, mesh + grid ground, eyebrow headers with a
   glowing 4px tick, mono tabular numerals) — deliberately calmer for clients.
   Last in the stylesheet on purpose: wins the cascade over the legacy rules
   above. Classes only — the portal CSP allows external CSS, keep it that way. */

/* Glass everywhere it matters, hover glow only on browsable tiles (never the login card). */
.login-card, .disclosure-card, .stat-card, .project-card, .upgrade-card, .mission-card,
.asset-card, .now-card, .task-item, .mfa-panel, .service-card {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.stat-card:hover, .project-card:hover, .asset-card:hover, .service-card:hover, .upgrade-option:hover {
  border-color: rgba(30,144,255,.35);
  box-shadow: 0 0 0 1px rgba(30,144,255,.18), 0 0 24px rgba(30,144,255,.12), 0 10px 30px rgba(0,0,0,.4);
}

/* Sections are glass panels on the mesh ground. */
.dashboard-section {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(10,18,26,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.dashboard, .dashboard > *, .mission-control-grid > *, .section-heading > * { min-width: 0; }

/* Eyebrow section headers: small caps + glowing 4px accent tick. */
.dashboard-section h2, .assets-header h2, .section-heading h2 {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0;
  font-size: .78rem; font-weight: var(--w-bold);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.dashboard-section h2::before, .assets-header h2::before, .section-heading h2::before {
  content: ''; width: 4px; height: 14px; border-radius: 2px; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(30,144,255,.6);
}
.task-section h4 {
  display: flex; align-items: center; gap: var(--s2);
}
.task-section h4::before {
  content: ''; width: 3px; height: 11px; border-radius: 2px; flex-shrink: 0;
  background: rgba(30,144,255,.55);
}
.eyebrow::before, .now-eyebrow::before {
  content: ''; display: inline-block; width: 4px; height: 12px; border-radius: 2px;
  margin-right: var(--s2); vertical-align: -2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(30,144,255,.6);
}

/* Numbers read as instrumentation: mono + tabular. */
.stat-value, .now-metric-value, .nps-display, .message-chars,
.upgrade-price, .timeline-price, .referral-code-text {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.referral-code-text { font-size:1.15rem; font-weight:var(--w-bold); color:var(--accent-2); letter-spacing:.06em; }

/* KPI tiles: accent hairline on top, like the deck. */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 65%);
  opacity: .75;
}
.stat-value { color: var(--accent-2); }

/* Buttons: glass, accent-tinted primary, glow on hover. */
.button {
  background: rgba(16,23,38,.8);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.button:hover:not(:disabled) {
  border-color: rgba(30,144,255,.55);
  box-shadow: 0 0 14px rgba(30,144,255,.22);
}
.button-primary {
  background: rgba(30,144,255,.18);
  border-color: rgba(30,144,255,.55);
  color: var(--accent-2);
}
.button-primary:hover:not(:disabled) { opacity: 1; background: rgba(30,144,255,.28); }
.button-small { background: transparent; }
.logout-button { border: 1px solid transparent; }
.logout-button:hover { border-color: var(--line); }

/* Status chips are pills. */
.task-status, .asset-status {
  border-radius: var(--r-pill);
  letter-spacing: .06em;
  padding: var(--s1) var(--s3);
}

/* Login card: centered glass, controlled logo, no stray link styling. */
.login-card {
  background: rgba(10,18,26,.78);
  border-color: rgba(30,144,255,.2);
  box-shadow: 0 0 0 1px rgba(30,144,255,.08), var(--shadow-lg);
}
.login-logo { width: 56px; height: 56px; border-radius:12px; background:#fff; padding:5px; box-sizing:border-box; object-fit:cover; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Services: compact expandable cards — title + tier pill, details on demand. */
#services-container {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s3);
}
.service-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.service-card summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4);
  cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: var(--w-semi);
}
.service-card summary::-webkit-details-marker { display: none; }
.service-card[open] { border-color: rgba(30,144,255,.35); }
.tier-pill {
  flex-shrink: 0;
  padding: var(--s1) var(--s3);
  border: 1px solid rgba(30,144,255,.35);
  border-radius: var(--r-pill);
  background: rgba(30,144,255,.12);
  color: var(--accent-2);
  font-size: var(--t-xs); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.service-automation {
  margin: 0; padding: 0 var(--s4) var(--s3) var(--s5);
  color: var(--muted); font-size: var(--t-sm); line-height: 1.55;
}
.service-automation li { margin-top: var(--s1); }

/* Single-tab tab bar is noise. */
.work-tabs { display: none; }

/* The upgrade panel is one card, not a grid item — let it span the section. */
#upgrade-container { display: block; }
.upgrade-option { background: rgba(8,16,26,.6); border-radius: var(--r-md); }

/* Referral code row inside checkout: one aligned input row. */
.referral-input-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.referral-input-row label { flex-basis: 100%; color: var(--muted); font-size: var(--t-sm); }
.referral-input-row input { flex: 1 1 200px; width: auto; }
.referral-status { font-size: var(--t-xs); }
.referral-status.success { color: var(--accent-2); }
.referral-status.error { color: var(--red); }

.project-card.accent-border { border-color: rgba(30,144,255,.45); }

/* Was a style="" attribute on the verify-discount mailto link -- the only inline style anywhere
   in portal-edge's served files, and the reason its CSP still needs style-src 'unsafe-inline'. */
.verify-link { color: var(--teal); font-weight: 800; }

/* Discounts render as quiet availability cards, not fake percentages. */
.discount-pill {
  display: inline-block;
  padding: var(--s1) var(--s3);
  border: 1px solid rgba(30,144,255,.35);
  border-radius: var(--r-pill);
  background: rgba(30,144,255,.12);
  color: var(--accent-2);
  font-size: var(--t-xs); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: .06em;
}

/* Footer: quiet, consistent. */
.portal-footer {
  justify-content: center;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.portal-footer a:hover { color: var(--accent-2); text-decoration: none; }

@media (max-width:620px) {
  .dashboard-section { padding: var(--s4); }
}

/* ===================== 2026-08-31 client-flow fixes =====================
   Appended at the END of the stylesheet on purpose. A rule once landed INSIDE
   the :root{} token block above, closing it early and killing the whole design
   system — never add anything between lines 1 and 29. */

/* `.sr-only` was used in client-portal.html but never defined, so "Your message"
   and "Your question" rendered as stray visible labels next to their inputs. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mobile (375px): the tier pill is nowrap inside an overflow:hidden card, so a long
   service name ("Regulated / Government Implementation") pushed the pill past the
   card edge and it was clipped. Let the summary wrap instead. */
.service-card summary { flex-wrap: wrap; }

/* Long project names and filenames must break rather than widen their card. */
.now-value, .activity-title, .asset-header strong, .task-header strong,
.project-card h3, .message-body { overflow-wrap: anywhere; }

/* The "Upload a file" button drops below the heading instead of squeezing it. */
.assets-header { flex-wrap: wrap; }

/* Price cards with no checkout available: the price still reads, no dead button. */
.upgrade-option.upgrade-option-quiet { opacity: .92; }

/* Services split: Your services vs Available services */
.services-section-heading {
  margin: var(--s5) 0 var(--s3);
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s2);
}
.services-section-heading:first-child { margin-top: 0; }
.service-progress {
  flex-shrink: 0;
  font-size: var(--t-xs);
  color: var(--text-2);
  font-weight: var(--w-medium);
}