:root {
  --bg: #081018;
  --panel: #0d1823;
  --panel-2: #112230;
  --text: #eef6fb;
  --muted: #9eb2c1;
  --line: rgba(255,255,255,.10);
  --accent: #79e0d1;
  --accent-2: #9feee3;
  --warning: #ffd166;
  --danger: #ff8f8f;
  --ok: #8ee7b2;
  --max: 1160px;
  --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 10% -10%, rgba(121,224,209,.13), transparent 34rem),
    radial-gradient(circle at 100% 15%, rgba(91,149,255,.09), transparent 32rem),
    var(--bg);
  font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--accent-2); }
a:hover { color: #fff; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px);
  background: rgba(8,16,24,.80);
  border-bottom: 1px solid var(--line);
}
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand {
  display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none;
  font-weight:800; letter-spacing:-.02em; font-size:1.25rem;
}
.brand-mark {
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--accent);
  display:grid; place-items:center; position:relative;
  box-shadow: 0 0 28px rgba(121,224,209,.18);
}
.brand-mark:before,.brand-mark:after {
  content:""; position:absolute; background:var(--accent); opacity:.8;
}
.brand-mark:before { width:16px; height:2px; transform:rotate(35deg); }
.brand-mark:after { width:2px; height:16px; transform:rotate(35deg); }
.brand-mark span { width:7px; height:7px; border-radius:50%; background:#fff; }
.nav-links { display:flex; gap:22px; align-items:center; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:.95rem; }
.nav-links a:hover { color:#fff; }
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 18px; border-radius:999px;
  text-decoration:none; font-weight:750; border:1px solid transparent;
  cursor:pointer; font:inherit;
}
.button.primary { background:var(--accent); color:#05211d; }
.button.primary:hover { background:#a3f2e7; color:#05211d; }
.button.secondary { border-color:var(--line); color:#fff; background:rgba(255,255,255,.03); }
.button.secondary:hover { background:rgba(255,255,255,.08); }
.hero { padding: 92px 0 76px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border-radius:999px;
  border:1px solid rgba(121,224,209,.28); background:rgba(121,224,209,.08);
  color:var(--accent-2); font-weight:750; font-size:.84rem; letter-spacing:.02em;
}
h1,h2,h3 { line-height:1.08; letter-spacing:-.035em; margin-top:0; }
h1 { font-size:clamp(3rem,7vw,6.2rem); max-width:950px; margin:24px 0 24px; }
h2 { font-size:clamp(2rem,4vw,3.45rem); }
h3 { font-size:1.35rem; }
.lead { font-size:clamp(1.1rem,2vw,1.32rem); max-width:760px; color:var(--muted); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:22px; margin-top:34px; color:var(--muted); font-size:.94rem; }
.hero-meta strong { color:#fff; }
.grid { display:grid; gap:18px; }
.grid.three { grid-template-columns:repeat(3,1fr); }
.grid.two { grid-template-columns:repeat(2,1fr); }
section { padding:76px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:30px; }
.section-head p { max-width:620px; color:var(--muted); margin:0; }
.card {
  background:linear-gradient(180deg, rgba(17,34,48,.88), rgba(13,24,35,.86));
  border:1px solid var(--line); border-radius:var(--radius); padding:26px;
}
.card p { color:var(--muted); }
.card .kicker { color:var(--accent-2); text-transform:uppercase; letter-spacing:.09em; font-size:.75rem; font-weight:800; }
.icon {
  width:44px; height:44px; border:1px solid rgba(121,224,209,.28); background:rgba(121,224,209,.08);
  display:grid; place-items:center; border-radius:14px; margin-bottom:22px; color:var(--accent);
  font-weight:900;
}
.band {
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.018);
}
.steps { counter-reset:step; }
.step { position:relative; padding-left:62px; }
.step:before {
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:#06211d; font-weight:900;
}
.pill-list { display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none; }
.pill-list li { padding:8px 12px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.callout {
  border-left:3px solid var(--accent);
  background:rgba(121,224,209,.06);
  padding:18px 20px; border-radius:0 14px 14px 0; color:#c9dfeb;
}
.warning { border-left-color:var(--warning); background:rgba(255,209,102,.06); }
.source-list { display:grid; gap:12px; margin-top:24px; }
.source {
  display:flex; justify-content:space-between; gap:24px; align-items:flex-start;
  padding:18px 0; border-top:1px solid var(--line);
}
.source small { color:var(--muted); display:block; }
.tag {
  display:inline-flex; align-items:center; min-height:28px; padding:0 9px; border-radius:999px;
  font-size:.75rem; font-weight:800; white-space:nowrap;
  color:#06211d; background:var(--ok);
}
.tag.qual { background:var(--warning); }
.check-layout { display:grid; grid-template-columns: 1.05fr .95fr; gap:22px; align-items:start; }
.question { padding:20px 0; border-top:1px solid var(--line); }
.question:first-child { border-top:0; padding-top:0; }
.question legend { font-weight:750; margin-bottom:10px; }
.choices { display:flex; gap:9px; flex-wrap:wrap; }
.choice { position:relative; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice label {
  display:inline-flex; min-height:40px; align-items:center; padding:0 14px; border-radius:10px;
  border:1px solid var(--line); cursor:pointer; color:var(--muted);
}
.choice input:checked + label { border-color:var(--accent); background:rgba(121,224,209,.10); color:#fff; }
.results { position:sticky; top:94px; }
.result-item { border-top:1px solid var(--line); padding:14px 0; }
.result-item:first-child { border-top:0; }
.status { font-weight:850; }
.status.good { color:var(--ok); }
.status.warn { color:var(--warning); }
.status.bad { color:var(--danger); }
footer { border-top:1px solid var(--line); padding:38px 0 50px; color:var(--muted); font-size:.9rem; }
.footer-row { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.muted { color:var(--muted); }
.small { font-size:.88rem; }
.page-hero { padding:64px 0 44px; }
.page-hero h1 { font-size:clamp(2.7rem,6vw,5rem); }
.breadcrumb { color:var(--muted); font-size:.9rem; margin-bottom:20px; }
.notice {
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:14px; padding:15px 17px; color:var(--muted); font-size:.9rem;
}
@media (max-width: 860px) {
  .grid.three,.grid.two,.check-layout { grid-template-columns:1fr; }
  .nav-links a:not(.button) { display:none; }
  .results { position:static; }
  .hero { padding-top:68px; }
  .section-head { display:block; }
}
@media (max-width: 520px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  h1 { font-size:2.75rem; }
  section { padding:58px 0; }
  .card { padding:21px; }
}


/* v0.2 resource library */
.resource-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.resource-card { display:block; text-decoration:none; color:var(--text); transition:transform .15s ease, border-color .15s ease, background .15s ease; }
.resource-card:hover { transform:translateY(-2px); border-color:rgba(121,224,209,.35); background:linear-gradient(180deg, rgba(20,42,57,.95), rgba(13,24,35,.92)); color:var(--text); }
.resource-card h3 { margin:18px 0 10px; }
.resource-card p { margin-bottom:20px; }
.resource-read { color:var(--accent-2); font-weight:800; font-size:.92rem; }
.article-container { max-width:900px; }
.article-hero h1 { max-width:900px; font-size:clamp(2.6rem,5.8vw,5.1rem); }
.article-meta { display:flex; flex-wrap:wrap; gap:10px 18px; color:var(--muted); font-size:.88rem; margin-top:24px; }
.article-meta span { padding-right:18px; border-right:1px solid var(--line); }
.article-meta span:last-child { border-right:0; }
.article-band { padding-top:56px; }
.article-layout { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:34px; align-items:start; }
.article-body { max-width:760px; }
.article-section { padding:0 0 34px; }
.article-section + .article-section { padding-top:34px; border-top:1px solid var(--line); }
.article-section h2 { font-size:clamp(1.65rem,3vw,2.2rem); margin-bottom:16px; }
.article-section p, .article-section li { color:#c6d6e0; }
.article-list { padding-left:1.2rem; margin:16px 0; }
.article-list li { margin:8px 0; padding-left:.2rem; }
.article-list.numbered { padding-left:1.4rem; }
.article-side { position:sticky; top:94px; }
.resource-links { display:grid; margin-top:14px; }
.resource-link { display:block; padding:16px 0; border-top:1px solid var(--line); text-decoration:none; }
.resource-link strong { display:block; color:#fff; margin-bottom:5px; }
.resource-link span { color:var(--muted); font-size:.88rem; }
.resource-link:hover strong { color:var(--accent-2); }
.article-notice { margin-top:10px; }
@media (max-width: 860px) {
  .resource-grid, .article-layout { grid-template-columns:1fr; }
  .article-side { position:static; }
}


/* v0.3 lead capture */
.summary-capture {
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.summary-capture h3 { margin:10px 0 8px; }
.capture-form { display:grid; gap:15px; margin-top:18px; }
.field { display:grid; gap:7px; }
.field > span { font-size:.88rem; font-weight:750; color:#d9e7ef; }
.field em { font-style:normal; color:var(--muted); font-weight:500; }
.field input {
  width:100%;
  min-height:46px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#08131c;
  color:var(--text);
  padding:10px 12px;
  font:inherit;
  outline:none;
}
.field input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(121,224,209,.08);
}
.consent-row {
  display:grid;
  grid-template-columns:18px 1fr;
  gap:10px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
  align-items:start;
}
.consent-row input { margin-top:3px; accent-color:var(--accent); }
.honeypot {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(1px,1px,1px,1px) !important;
  white-space:nowrap !important;
}
.form-message { min-height:24px; font-size:.9rem; }
.form-message.success { color:var(--ok); }
.form-message.error { color:var(--danger); }
.button:disabled { opacity:.58; cursor:not-allowed; }
.policy-page { max-width:860px; }
.policy-page h2 { font-size:1.65rem; margin-top:36px; }
.policy-page p, .policy-page li { color:#c6d6e0; }
.policy-page li { margin:7px 0; }


.preview-banner{
  position:sticky;
  top:0;
  z-index:100;
  padding:10px 18px;
  text-align:center;
  background:#ffd166;
  color:#191300;
  font-weight:900;
  letter-spacing:.06em;
  font-size:.78rem;
}
.dynamic-article-body>h2{
  font-size:clamp(1.65rem,3vw,2.2rem);
  margin:0 0 16px;
  padding-top:34px;
  border-top:1px solid var(--line);
}
.dynamic-article-body>h2:first-child{
  padding-top:0;
  border-top:0;
}
.dynamic-article-body>h3{
  margin-top:26px;
}
.dynamic-article-body>p,
.dynamic-article-body>li{
  color:#c6d6e0;
}
.dynamic-resource-card .tag{
  background:rgba(121,224,209,.12);
}

/* v0.8 NF-004A customer portal demo */
.customer-demo-page { min-height:100vh; }
.portal-hero { padding:72px 0 46px; }
.demo-banner {
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 12px; margin-bottom:22px; border-radius:999px;
  border:1px solid rgba(255,209,102,.35); background:rgba(255,209,102,.08);
  color:#ffe6a7; font-size:.82rem; font-weight:800;
}
.demo-dot { width:8px; height:8px; border-radius:50%; background:var(--warning); box-shadow:0 0 18px rgba(255,209,102,.5); }
.portal-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:34px; align-items:end; }
.portal-hero h1 { font-size:clamp(2.8rem,6vw,5.3rem); margin-bottom:18px; }
.portal-status-card {
  background:linear-gradient(180deg, rgba(20,43,57,.94), rgba(13,24,35,.94));
  border:1px solid rgba(121,224,209,.24); border-radius:22px; padding:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.20);
}
.portal-status-card strong { display:block; font-size:1.8rem; line-height:1.12; margin:10px 0; }
.portal-status-card p { color:var(--muted); margin:0; }
.portal-status-label,.portal-label { color:var(--accent-2); text-transform:uppercase; letter-spacing:.08em; font-size:.73rem; font-weight:900; }
.portal-section { padding:58px 0; }
.portal-overview { padding:34px 0; }
.portal-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.portal-metric {
  min-height:118px; display:flex; flex-direction:column; justify-content:space-between;
  background:rgba(13,24,35,.88); border:1px solid var(--line); border-radius:18px; padding:18px;
}
.portal-metric span { color:var(--muted); font-size:.84rem; font-weight:700; }
.portal-metric strong { font-size:1.75rem; line-height:1.1; }
.portal-metric.critical { border-color:rgba(255,143,143,.35); background:rgba(255,143,143,.05); }
.portal-metric.attention { border-color:rgba(255,209,102,.32); background:rgba(255,209,102,.05); }
.portal-metric.good { border-color:rgba(142,231,178,.26); }
.equipment-strip {
  margin-top:18px; display:flex; justify-content:space-between; gap:20px; align-items:center;
  border:1px solid var(--line); border-radius:18px; padding:18px 20px; background:rgba(255,255,255,.018);
}
.equipment-summary strong { display:block; margin-top:4px; }
.equipment-list { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.equipment-chip { border:1px solid var(--line); border-radius:12px; padding:9px 12px; background:#0a151f; min-width:210px; }
.equipment-chip strong,.equipment-chip small { display:block; }
.equipment-chip small { color:var(--muted); margin-top:2px; }
.portal-heading { align-items:start; }
.portal-heading h2 { margin:18px 0 0; }
.portal-stack { display:grid; gap:14px; }
.portal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.portal-action,.portal-mini-card {
  border:1px solid var(--line); border-radius:20px; padding:24px;
  background:linear-gradient(180deg, rgba(17,34,48,.92), rgba(13,24,35,.88));
}
.portal-action.critical { border-color:rgba(255,143,143,.32); box-shadow:inset 3px 0 0 rgba(255,143,143,.9); }
.portal-action.important { border-color:rgba(255,209,102,.28); box-shadow:inset 3px 0 0 rgba(255,209,102,.8); }
.portal-action.interpretation { border-color:rgba(255,209,102,.30); background:linear-gradient(180deg, rgba(43,36,22,.44), rgba(13,24,35,.9)); }
.portal-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.portal-card-labels { display:flex; flex-wrap:wrap; gap:8px; }
.portal-badge {
  display:inline-flex; align-items:center; min-height:27px; padding:0 9px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:#dbe9f1; font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.04em;
}
.portal-badge.danger { background:rgba(255,143,143,.10); border-color:rgba(255,143,143,.25); color:#ffb3b3; }
.portal-badge.warning { background:rgba(255,209,102,.09); border-color:rgba(255,209,102,.24); color:#ffe09a; }
.portal-badge.ok { background:rgba(142,231,178,.09); border-color:rgba(142,231,178,.22); color:#aef1c7; }
.portal-badge.neutral { color:#bcd0dc; }
.portal-due { color:#fff; font-weight:800; font-size:.88rem; }
.portal-action h3,.portal-mini-card h3 { margin:0 0 10px; }
.portal-action > p,.portal-mini-card > p { color:var(--muted); }
.portal-card-note { color:#d5e3eb !important; }
.portal-action-box {
  margin-top:17px; padding:15px 16px; border-radius:14px;
  border:1px solid rgba(121,224,209,.16); background:rgba(121,224,209,.045);
}
.portal-action-box p { margin:5px 0 0; color:#d6e7ee; }
.portal-action-box.review-box { border-color:rgba(255,209,102,.22); background:rgba(255,209,102,.045); }
.portal-evidence { font-size:.9rem; color:var(--muted) !important; margin:15px 0 0; }
.portal-sources { margin-top:17px; border-top:1px solid var(--line); padding-top:13px; }
.portal-sources summary { cursor:pointer; color:var(--accent-2); font-weight:800; font-size:.88rem; }
.portal-source-list { display:grid; gap:9px; margin-top:11px; }
.portal-source-row { display:flex; justify-content:space-between; gap:15px; align-items:start; }
.portal-source-row a { font-weight:750; text-decoration:none; }
.portal-source-row small { color:var(--muted); text-align:right; max-width:58%; }
.reference-card { background:rgba(13,24,35,.72); }
.portal-empty { padding:20px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); }
.skeleton { animation:portal-pulse 1.7s ease-in-out infinite; }
@keyframes portal-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }
.portal-method { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.75fr); gap:34px; align-items:center; }
.portal-method h2 { margin:18px 0 12px; }
.portal-method-steps { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; }
.portal-method-steps span { padding:9px 11px; border:1px solid var(--line); border-radius:999px; color:#d6e7ee; font-size:.82rem; }
.portal-method-steps i { color:var(--accent); font-style:normal; }
@media (max-width: 900px) {
  .portal-hero-grid,.portal-method { grid-template-columns:1fr; }
  .portal-metrics { grid-template-columns:repeat(2,1fr); }
  .portal-method-steps { justify-content:flex-start; }
  .equipment-strip { align-items:flex-start; flex-direction:column; }
  .equipment-list { justify-content:flex-start; width:100%; }
}
@media (max-width: 700px) {
  .portal-grid { grid-template-columns:1fr; }
  .portal-card-top { align-items:flex-start; flex-direction:column; }
  .portal-source-row { display:block; }
  .portal-source-row small { display:block; max-width:none; text-align:left; margin-top:3px; }
  .equipment-chip { width:100%; }
}
@media (max-width: 480px) {
  .portal-metrics { grid-template-columns:1fr 1fr; }
  .portal-metric { min-height:100px; }
  .portal-action,.portal-mini-card { padding:20px; }
}

/* v0.9 NF-004B equipment detail + source feedback */
.equipment-chip {
  color:inherit; text-decoration:none; transition:border-color .16s ease, transform .16s ease, background .16s ease;
}
.equipment-chip:hover { border-color:rgba(121,224,209,.45); background:#0d1b27; transform:translateY(-1px); }
.equipment-chip-link { display:block; margin-top:8px; color:var(--accent-2); font-size:.76rem; font-weight:800; }
.portal-source-info { min-width:0; flex:1; }
.portal-source-info small { display:block; margin-top:3px; }
.source-health-note { display:block; margin-top:5px; color:#ffe09a; font-size:.74rem; font-weight:750; }
.source-report-button {
  flex:0 0 auto; padding:7px 9px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.035); color:#9eb2c1; font:inherit; font-size:.72rem;
  cursor:pointer;
}
.source-report-button:hover:not(:disabled) { border-color:rgba(121,224,209,.35); color:#d8f9f4; }
.source-report-button:disabled { cursor:default; opacity:.75; }
.source-report-button.reported { color:#ffe09a; border-color:rgba(255,209,102,.25); background:rgba(255,209,102,.06); }

.equipment-hero { padding-bottom:38px; }
.equipment-breadcrumb { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.82rem; margin-bottom:20px; }
.equipment-breadcrumb a { color:var(--accent-2); text-decoration:none; }
.equipment-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.equipment-detail-card {
  border:1px solid var(--line); border-radius:20px; padding:22px;
  background:linear-gradient(180deg,rgba(17,34,48,.90),rgba(13,24,35,.84));
}
.detail-list { margin:18px 0 0; display:grid; gap:0; }
.detail-list>div { display:grid; grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr); gap:14px; padding:11px 0; border-top:1px solid var(--line); }
.detail-list>div:first-child { border-top:0; padding-top:0; }
.detail-list dt { color:var(--muted); font-size:.82rem; }
.detail-list dd { margin:0; color:#f1f7fb; font-weight:750; overflow-wrap:anywhere; }
.status-danger { color:#ffb3b3; }
.status-good { color:#aef1c7; }

.equipment-timeline { display:grid; gap:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:rgba(13,24,35,.72); }
.timeline-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:22px; padding:20px 22px; border-top:1px solid var(--line); }
.timeline-row:first-child { border-top:0; }
.timeline-date { color:var(--muted); font-weight:750; }
.timeline-top { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.timeline-top strong { text-transform:capitalize; }
.timeline-body p { margin:7px 0; color:#cbdce6; }
.timeline-body small { color:var(--muted); }
.equipment-requirement-card { min-width:0; }

@media (max-width: 980px) {
  .equipment-detail-grid { grid-template-columns:1fr 1fr; }
  .equipment-detail-card:last-child { grid-column:1 / -1; }
}
@media (max-width: 700px) {
  .equipment-detail-grid { grid-template-columns:1fr; }
  .equipment-detail-card:last-child { grid-column:auto; }
  .timeline-row { grid-template-columns:1fr; gap:8px; }
  .portal-source-row { display:grid; grid-template-columns:1fr; }
  .source-report-button { justify-self:start; }
}


/* =========================================================
   NF-004C.1 customer portal UX
   ========================================================= */

.account-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(75, 191, 180, .055), transparent 34rem),
    var(--bg);
}

.account-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
  background: rgba(6, 16, 24, .88);
}

.account-shell { padding: 46px 0 88px; }

.account-session-loader {
  min-height: 52vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #d8e6ee;
}

.account-session-loader > div {
  display: grid;
  gap: 2px;
}

.account-session-loader strong { font-size: 16px; }

.account-session-loader span:not(.account-spinner) {
  color: #78909f;
  font-size: 13px;
}

.account-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid #28404f;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: account-spin .8s linear infinite;
}

@keyframes account-spin { to { transform: rotate(360deg); } }

.account-login-simple {
  max-width: 980px;
  min-height: 64vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
  gap: 64px;
  align-items: center;
}

.account-login-intro h1 {
  margin: 12px 0 14px;
  font-size: clamp(2.2rem, 5vw, 4.3rem);
  line-height: .98;
  letter-spacing: -.04em;
}

.account-login-intro .lead {
  max-width: 610px;
  margin-bottom: 22px;
}

.account-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-trust-row span {
  padding: 7px 10px;
  border: 1px solid #243844;
  border-radius: 999px;
  background: rgba(13, 24, 35, .62);
  color: #9db2c0;
  font-size: 12px;
  font-weight: 700;
}

.account-login-card {
  padding: 28px;
  border: 1px solid #2a3f4c;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(16, 31, 43, .96), rgba(10, 21, 30, .98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

.account-login-card h2 {
  margin: 0 0 22px;
  font-size: 23px;
}

.account-login-card label {
  display: grid;
  gap: 8px;
  margin: 0 0 17px;
  color: #c9d8e2;
  font-weight: 700;
  font-size: 14px;
}

.account-login-card input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid #344a59;
  border-radius: 11px;
  background: #09131c;
  color: #eef6fb;
  font: inherit;
  outline: none;
}

.account-login-card input:focus {
  border-color: #79e0d1;
  box-shadow: 0 0 0 3px rgba(121, 224, 209, .09);
}

.account-submit {
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}

.account-error {
  margin: 14px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 143, 143, .35);
  border-radius: 10px;
  background: rgba(255, 100, 100, .08);
  color: #ffb0b0;
  font-size: 13px;
  line-height: 1.45;
}

.account-help {
  margin: 16px 0 0;
  color: #78909f;
  line-height: 1.5;
}

.workspace-topbar {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
  padding: 8px 0 28px;
}

.workspace-kicker {
  display: block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.workspace-org h1 {
  margin: 7px 0 7px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.workspace-org p {
  margin: 0;
  color: #91a7b5;
  font-size: 16px;
}

.workspace-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.workspace-user-copy {
  display: grid;
  gap: 2px;
  text-align: right;
}

.workspace-user-copy strong {
  color: #eaf3f8;
  font-size: 13px;
}

.workspace-user-copy span {
  color: #7e96a5;
  font-size: 11px;
  font-weight: 750;
  text-transform: capitalize;
}

.workspace-signout { min-width: 88px; }

.organization-switcher {
  width: min(440px, 100%);
  margin: 0 0 18px;
}

.organization-switcher label {
  display: block;
  margin-bottom: 6px;
  color: #7e96a5;
  font-size: 12px;
  font-weight: 750;
}

.organization-switcher select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #2d4350;
  border-radius: 11px;
  background: #0b1721;
  color: #edf6fa;
  font: inherit;
}

.workspace-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  padding: 6px;
  margin-bottom: 30px;
  border: 1px solid #203440;
  border-radius: 13px;
  background: rgba(9, 20, 29, .76);
}

.workspace-tab {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8fa6b4;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.workspace-tab:hover,
.workspace-tab.active {
  background: #112532;
  color: #eef8fb;
}

.workspace-tab.disabled {
  cursor: default;
  opacity: .56;
}

.workspace-tab small {
  margin-left: 5px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.workspace-section {
  scroll-margin-top: 112px;
  padding: 22px 0 48px;
}

.workspace-section-divided {
  border-top: 1px solid #1d303b;
  padding-top: 42px;
}

.workspace-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 20px;
}

.workspace-section-heading.compact { margin-top: 36px; }

.workspace-section-heading h2 {
  margin: 6px 0 0;
  font-size: clamp(1.55rem, 2.7vw, 2.2rem);
  letter-spacing: -.025em;
}

.workspace-section-heading > p {
  max-width: 480px;
  margin: 0;
  color: #8fa6b4;
  text-align: right;
}

.workspace-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.workspace-metric {
  min-height: 128px;
  padding: 20px;
  border: 1px solid #253946;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(15, 30, 41, .88), rgba(10, 22, 31, .9));
}

.workspace-metric > span {
  display: block;
  color: #8399a7;
  font-size: 12px;
  font-weight: 750;
}

.workspace-metric > strong {
  display: block;
  margin: 13px 0 5px;
  color: #f3f8fb;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1;
  text-transform: capitalize;
}

.workspace-metric > small {
  color: #718a99;
  font-size: 11px;
}

.workspace-onboarding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: 34px;
  margin-top: 20px;
  padding: 30px;
  border: 1px solid rgba(121, 224, 209, .22);
  border-radius: 19px;
  background:
    linear-gradient(135deg, rgba(121, 224, 209, .07), transparent 62%),
    #0c1822;
}

.onboarding-copy h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.7rem, 3.2vw, 2.45rem);
}

.onboarding-copy p {
  max-width: 670px;
  margin: 0 0 20px;
  color: #9db2c0;
  line-height: 1.65;
}

.onboarding-steps {
  display: grid;
  gap: 10px;
}

.onboarding-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px;
  border: 1px solid #233642;
  border-radius: 12px;
  background: rgba(7, 17, 25, .58);
}

.onboarding-step > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #132a37;
  color: #86a0ae;
  font-size: 12px;
  font-weight: 850;
}

.onboarding-step.current { border-color: rgba(121, 224, 209, .34); }

.onboarding-step.current > span {
  background: var(--accent);
  color: #05221f;
}

.onboarding-step div {
  display: grid;
  gap: 3px;
}

.onboarding-step strong {
  color: #edf6fa;
  font-size: 14px;
}

.onboarding-step small {
  color: #78909f;
  line-height: 1.45;
}

.onboarding-next-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #21343f;
  color: #758d9b;
  font-size: 12px;
}

.workspace-attention { margin-top: 8px; }

.workspace-list {
  display: grid;
  gap: 9px;
}

.workspace-attention-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid #2d3d48;
  border-radius: 13px;
  background: #0d1823;
}

.workspace-attention-row > div {
  display: grid;
  gap: 3px;
}

.workspace-attention-row strong { color: #edf6fa; }

.workspace-attention-row div > span {
  color: #8198a6;
  font-size: 12px;
}

.workspace-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.workspace-card {
  padding: 20px;
  border: 1px solid #263946;
  border-radius: 15px;
  background: #0d1823;
}

.workspace-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.workspace-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid #365160;
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: #cce0e9;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.workspace-pill.ok {
  border-color: rgba(88, 203, 139, .26);
  background: rgba(88, 203, 139, .08);
  color: #aef1c7;
}

.workspace-pill.warning {
  border-color: rgba(255, 209, 102, .26);
  background: rgba(255, 209, 102, .07);
  color: #ffe09a;
}

.workspace-pill.danger {
  border-color: rgba(255, 128, 128, .28);
  background: rgba(255, 128, 128, .08);
  color: #ffb3b3;
}

.workspace-pill.neutral,
.workspace-pill.subtle { color: #9cb1be; }

.workspace-card h3 {
  margin: 0 0 7px;
  font-size: 18px;
}

.workspace-card-subtitle {
  min-height: 22px;
  margin: 0 0 16px;
  color: #91a7b5;
  font-size: 13px;
}

.workspace-card-details {
  display: grid;
  gap: 0;
}

.workspace-card-details > div {
  display: grid;
  grid-template-columns: minmax(92px, .75fr) minmax(0, 1.25fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #1f303a;
}

.workspace-card-details span {
  color: #708896;
  font-size: 11px;
}

.workspace-card-details strong {
  min-width: 0;
  color: #d9e7ee;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.workspace-empty-card {
  grid-column: 1 / -1;
  padding: 18px 20px;
  border: 1px dashed #2a3c47;
  border-radius: 13px;
  background: rgba(10, 21, 30, .54);
  color: #8198a6;
  font-size: 13px;
}

.workspace-account-strip {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-top: 10px;
  padding: 20px 0 0;
  border-top: 1px solid #1d303b;
}

.workspace-account-strip > div {
  display: grid;
  gap: 4px;
}

.workspace-account-strip strong {
  color: #dfeaf0;
  font-size: 13px;
}

.workspace-account-strip span:not(.workspace-kicker) {
  color: #708896;
  font-size: 11px;
}

.workspace-account-detail { text-align: right; }

.account-error-panel {
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
}

.account-error-panel h1 { margin: 12px 0 14px; }

@media (max-width: 980px) {
  .workspace-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-onboarding { grid-template-columns: 1fr; }
  .workspace-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .account-shell { padding-top: 30px; }

  .account-login-simple {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .workspace-topbar,
  .workspace-section-heading,
  .workspace-account-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .workspace-user {
    width: 100%;
    justify-content: space-between;
  }

  .workspace-user-copy,
  .workspace-account-detail,
  .workspace-section-heading > p {
    text-align: left;
  }

  .workspace-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .workspace-metrics { grid-template-columns: 1fr 1fr; }

  .workspace-metric {
    min-height: 108px;
    padding: 16px;
  }

  .workspace-onboarding { padding: 21px; }

  .workspace-attention-row {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* =========================================================
   NF-004C.2 visibility hotfix
   The HTML hidden attribute must win over component display rules.
   ========================================================= */

.account-page [hidden] {
  display: none !important;
}