/* Life Science Hub — same house style as its sibling app (design tokens,
   .panel/.tabbar component pattern, table conventions), given its own
   accent so the two products stay visually distinguishable side by side. */

:root {
  --accent: #1f6f5c;
  --accent-soft: #e3f1ec;
  --accent-line: #bfe0d3;

  --bg: #f6f8f7;
  --surface: #ffffff;
  --surface-2: #f0f3f2;
  --line: #dde3e0;
  --line-strong: #c2cbc7;

  --ink: #14201c;
  --ink-2: #48534e;
  --ink-3: #76827d;

  --green: #1d7a4c;
  --green-bg: #e2f3e9;
  --amber: #a8620a;
  --amber-bg: #fbeedb;
  --red: #b5372c;
  --red-bg: #fbe6e3;
  --grey: #6b6b7a;
  --grey-bg: #eaeaef;

  --up: #1d7a4c;
  --down: #b5372c;

  --radius: 8px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
[data-theme="dark"] {
  --accent: #6fcab0;
  --accent-soft: #16332b;
  --accent-line: #2c5347;

  --bg: #0e1412;
  --surface: #161d1a;
  --surface-2: #1c2521;
  --line: #2a332f;
  --line-strong: #3a4642;

  --ink: #eef3f1;
  --ink-2: #b6c1bc;
  --ink-3: #83918b;

  --green-bg: #123625;
  --amber-bg: #3a2a11;
  --red-bg: #3a1a17;
  --grey-bg: #24302b;

  --up: #6fcab0;
  --down: #e0857a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.small { font-size: 12.5px; }
.muted { color: var(--ink-2); }
.grow { flex: 1 1 auto; }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; }
.eyebrow.sect { margin: 18px 16px 6px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* --------------------------------------------------------------- shell */

#root { min-height: 100vh; }
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.mobile-nav-toggle, .mobile-nav-close { display: none; }

.sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 0 18px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 16px 16px; }
.mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.brand span { font-weight: 800; letter-spacing: -0.01em; font-size: 15px; }
.loginform-mobilebrand span { font-weight: 800; letter-spacing: -0.01em; font-size: 16px; color: var(--ink); }

.navitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 16px; border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: 13.5px; text-align: left; border-left: 3px solid transparent; }
.navitem:hover { background: var(--surface-2); color: var(--ink); }
.navitem[aria-current="true"] { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.navitem .ic { width: 18px; text-align: center; flex-shrink: 0; }
.navbadge { margin-left: auto; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.topbar h1 { font-size: 17px; }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Sidebar becomes a full-screen dropdown on mobile instead of a fixed
   column — hidden by default, shown as an overlay via .open (toggled
   from the topbar's hamburger button; see shell() in app.js). Reuses the
   exact same nav markup as desktop, so the Administration section is
   absent here for the same reason it's absent on desktop: it's only
   ever added to the DOM when S.me.role === 'admin' (server-verified),
   never hidden by CSS alone. Placed after the base .sidebar/.topbar
   rules above (same specificity — cascade order decides, so this must
   come later to actually win at matching widths) rather than relying on
   `!important` or extra specificity. */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .sidebar.open {
    display: flex; position: fixed; inset: 0; z-index: 45;
    overflow-y: auto; padding-bottom: 24px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  }
  .mobile-nav-toggle {
    display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
    border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 16px; cursor: pointer;
  }
  .mobile-nav-close {
    display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
    border: 0; border-radius: 7px; background: var(--surface-2); color: var(--ink-2); font-size: 14px; cursor: pointer;
  }
}

.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 11.5px; flex-shrink: 0; }
.content { padding: 20px; max-width: 1180px; margin: 0 auto; flex: 1; }

.appfooter { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.appfooter .badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); border: 1px solid #e2e8f0; border-radius: 999px; padding: 4px 10px 4px 12px; }
.appfooter .badge span { font-size: 11.5px; color: var(--ink-2); font-weight: 560; }
.appfooter .badge img { height: 18px; width: auto; display: block; }
.appfooter > span { font-size: 11.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- panel */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.phead { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.phead h2 { font-size: 14.5px; }
.pbody { padding: 16px; }
.pbody.flush { padding: 0; }

.reliability { margin-top: 12px; border-style: dashed; }
.reliability summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.reliability summary::-webkit-details-marker { display: none; }
.reliability[open] summary { border-bottom: 1px solid var(--line); }
.relrow { display: grid; grid-template-columns: 220px 140px 1fr; gap: 12px; padding: 7px 0; align-items: baseline; }
.relrow:not(:last-child) { border-bottom: 1px solid var(--line); }
.rellabel { font-size: 12.5px; color: var(--ink-2); }
.relvalue { font-weight: 700; font-size: 13px; }
@media (max-width: 700px) { .relrow { grid-template-columns: 1fr; gap: 2px; } }
.empty { padding: 30px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* A <details>/<summary> panel — collapsible reference content styled like
   an ordinary .panel, using the browser's own native disclosure state
   instead of hand-rolled toggle JS. */
.factors-panel > summary { list-style: none; }
.factors-panel > summary::-webkit-details-marker { display: none; }
.factors-panel > summary::before { content: '▸ '; color: var(--ink-3); }
.factors-panel[open] > summary::before { content: '▾ '; }
.factors-panel > .pbody :is(p, table) { max-width: 82ch; }
.factors-panel > .pbody table { max-width: none; }

/* --------------------------------------------------------------- chips */

.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--grey-bg); color: var(--grey); white-space: nowrap; }
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.chip.green { background: var(--green-bg); color: var(--green); }
.chip.amber { background: var(--amber-bg); color: var(--amber); }
.chip.red { background: var(--red-bg); color: var(--red); }

/* -------------------------------------------------------------- notice */

.notice { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; border: 1px solid transparent; margin-bottom: 12px; }
.notice.info { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.notice.warn { background: var(--amber-bg); color: var(--amber); }
.notice.error { background: var(--red-bg); color: var(--red); }

/* -------------------------------------------------------------- buttons */

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--red); border-color: var(--red-bg); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* --------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea, select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); width: 100%;
}
textarea { min-height: 90px; resize: vertical; font-family: var(--sans); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
label.checkline { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }

/* ----------------------------------------------------------------- tabs */

.tabbar { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 8px; background: var(--surface-2); }
.tabbtn { padding: 10px 13px; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabbtn:hover { color: var(--ink); }
.tabbtn.active { color: var(--accent); border-bottom-color: var(--accent); }

.tiergroup-label { flex-basis: 100%; padding: 10px 4px 2px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.tiergroup-label:first-child { padding-top: 6px; }

/* ------------------------------------------------------------- gridcards */

.gridcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; }
.card:hover { border-color: var(--accent-line); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); }

/* -------------------------------------------------------- pharma directory */
/* The category dropdown + filterable company grid on Pharma news — replaces
   a flat tab bar that stopped being workable once the directory grew past a
   couple of dozen companies. */

.tierbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tierbar select { max-width: 360px; width: auto; flex: 1 1 260px; }
.tierbar input[type="search"] { max-width: 240px; width: auto; flex: 1 1 200px; }
.pharmagrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 4px; }
.orgcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; font: inherit; }
.orgcard:hover { border-color: var(--accent-line); }
.orgcard.active { border-color: var(--accent); background: var(--accent-soft); }
.orgcard .oname { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.orgcard .ometa { display: flex; align-items: center; }

/* -------------------------------------------------------- profile sub-tabs */

.profiletabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.profiletab-btn { padding: 9px 14px; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.profiletab-btn:hover { color: var(--ink); }
.profiletab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.summarygrid { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; font-size: 13px; }
.summarygrid .k { color: var(--ink-3); font-weight: 700; }
.summarygrid .v { color: var(--ink); }

/* ---------------------------------------------------------- company profile */

.orgheader { display: flex; align-items: flex-start; gap: 14px; padding: 16px; }
.orglogo { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.orgheader h2 { font-size: 18px; }
.pricehead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 16px 0; }
.pricehead .price { font-size: 24px; font-weight: 800; font-family: var(--mono); }
.pricehead .change { font-size: 13px; font-weight: 700; font-family: var(--mono); }
.change.up { color: var(--up); }
.change.down { color: var(--down); }

.chartwrap { padding: 4px 16px 4px; }
.chartwrap svg { display: block; width: 100%; height: 190px; touch-action: none; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 1.75; }
.chart-fill { fill: var(--accent); opacity: 0.08; }
.chart-dot { fill: var(--accent); }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-tick { font-size: 9px; fill: var(--ink-3); font-family: var(--mono); }
.chart-selectbox { fill: var(--accent); opacity: 0.15; pointer-events: none; }
.chart-capture { cursor: crosshair; }
.chartcontrols { display: flex; align-items: center; gap: 4px; padding: 0 16px 10px; flex-wrap: wrap; }
.chartrange { padding: 0 16px 12px; }

/* Straight-line markers for real dated events (medicine approvals, trial
   starts, patent expiries, news spikes) plotted on the price chart — see
   eventsForOrg()/newsWeeksForOrg() in server.js. Each line carries a
   numbered badge instead of a plain dot, so it reads at a glance without
   needing to hover; the same number labels the row in .chart-legend-list
   below the chart. */
.chart-event { stroke-width: 1.25; stroke-dasharray: 3 2; opacity: 0.75; }
.chart-event-approval { stroke: var(--amber); }
.chart-event-trial { stroke: var(--grey); }
.chart-event-patent { stroke: var(--red); }
.chart-event-news { stroke: var(--green); }
.chart-event-badge { stroke: var(--surface); stroke-width: 1.5; }
.chart-event-badge-approval { fill: var(--amber); }
.chart-event-badge-trial { fill: var(--grey); }
.chart-event-badge-patent { fill: var(--red); }
.chart-event-badge-news { fill: var(--green); }
.chart-event-num { font-size: 9px; font-weight: 700; fill: #fff; font-family: var(--mono); pointer-events: none; }
.chart-event-group:hover .chart-event { opacity: 1; stroke-width: 1.75; }
.chart-event-group { cursor: default; }

/* The per-event-kind checkboxes + "min. sources/week" control, between the
   chart and its written legend. */
.eventtypes { padding: 2px 16px 12px; }
.eventtypes input[type="number"] { border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 6px; font: inherit; color: inherit; background: var(--surface); }

.chartlegend { padding: 0 16px 14px; }
.chart-legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chart-legend-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.chart-legend-row .grow { color: var(--ink-2); }
.chart-legend-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; font-family: var(--mono); }
.chart-legend-num-approval { background: var(--amber); }
.chart-legend-num-trial { background: var(--grey); }
.chart-legend-num-patent { background: var(--red); }
.chart-legend-num-news { background: var(--green); }

.pipeline-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pipeline-row:last-child { border-bottom: 0; }
.pipeline-row .grow div:first-child { font-size: 13px; font-weight: 600; }
.pipeline-row .grow div.small { margin-top: 2px; }

.bnfgroup { margin-bottom: 14px; }
.bnfgroup:last-child { margin-bottom: 0; }
.bnfgroup-title { font-size: 12.5px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.productline { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 13px; flex-wrap: wrap; }
.productline .pname { font-weight: 700; }
.productline .pgeneric { color: var(--ink-3); font-size: 12px; }
.productline .pind { color: var(--ink-2); font-size: 12.5px; }
.productline .pmaker { margin-left: auto; }
.safety-badge { cursor: help; flex-shrink: 0; }

.newsitem { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.newsitem:last-child { border-bottom: 0; }
.newsitem .src { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; }
.newsitem h3 { font-size: 13.5px; margin-top: 3px; }
.newsitem .sum { margin-top: 4px; color: var(--ink-2); font-size: 12.5px; }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding: 0 16px 16px; }
.stat { background: var(--surface-2); border-radius: 7px; padding: 10px 12px; }
.stat .v { font-size: 18px; font-weight: 800; font-family: var(--mono); }
.stat .l { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }

/* ------------------------------------------------------------ sparkline */

.mini-spark { width: 70px; height: 24px; display: block; }
.mini-spark polyline { fill: none; stroke-width: 1.5; }

/* --------------------------------------------------------------- modal */

.overlay { position: fixed; inset: 0; background: rgba(10, 15, 13, 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 50; overflow-y: auto; }
.modal { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.modal.wide { max-width: 640px; }
.modal .mhead { padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 15px; }
.modal .mbody { padding: 18px; }
.modal .mbody.scroll { max-height: 56vh; overflow-y: auto; }
.modal .mfoot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.terms h3 { font-size: 13.5px; margin: 16px 0 6px; }
.terms h3:first-child { margin-top: 0; }
.terms p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 8px; }

/* --------------------------------------------------------------- prose */

.prose { max-width: 72ch; }
.prose p { margin: 0 0 11px; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose h4 { font-size: 13px; margin: 14px 0 6px; color: var(--ink); }
.prose h4:first-child { margin-top: 0; }
.prose ul { margin: 0 0 11px; padding-left: 20px; color: var(--ink-2); }
.prose li { margin-bottom: 4px; }
.prose a { color: var(--accent); }

/* ---------------------------------------------------------------- login */
/* Split-screen: a branded hero panel (hidden below 980px, where a small
   inline brand mark stands in for it instead) beside a centred sign-in
   card — same composition as the sibling app's own login page, right down
   to the "Powered by Apotek Analytics" footer (identical copy, same
   company, same standing footer on both products). Green instead of that
   app's purple is the one deliberate difference, kept because it's this
   product's own accent. */

.login { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 980px) { .login { grid-template-columns: 1fr 1fr; } }

.loginhero {
  display: none; position: relative; flex-direction: column; justify-content: space-between;
  overflow: hidden; padding: 48px; color: #fff;
  background: linear-gradient(135deg, #2f9678 0%, var(--accent) 55%, #0d2e26 100%);
}
@media (min-width: 980px) { .loginhero { display: flex; } }
.loginhero-blob { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.12); filter: blur(50px); pointer-events: none; }
.loginhero-blob.a { width: 340px; height: 340px; top: -110px; right: -110px; }
.loginhero-blob.b { width: 380px; height: 380px; bottom: -140px; left: -70px; }
.loginhero-top, .loginhero-mid, .loginhero-bottom { position: relative; }
.loginhero-brand { display: inline-flex; align-items: center; gap: 10px; }
.loginhero-brand .mark { background: rgba(255, 255, 255, 0.16); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.loginhero-brand span { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.loginhero-mid { max-width: 400px; }
.loginhero-mid .eyebrow { color: rgba(255, 255, 255, 0.7); }
.loginhero-mid h1 { margin: 12px 0 0; font-size: 30px; line-height: 1.22; font-weight: 800; letter-spacing: -0.01em; }
.loginhero-mid p { margin: 12px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 14px; line-height: 1.5; }
.loginhero-features { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.loginhero-features li { display: flex; align-items: flex-start; gap: 12px; }
.loginhero-features .ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, 0.15); display: grid; place-items: center; font-size: 15px; }
.loginhero-features .txt { padding-top: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.92); line-height: 1.4; }
.loginhero-stat { font-size: 12px; color: rgba(255, 255, 255, 0.62); }

.loginhero-poweredby { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.loginhero-poweredby .badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); border: 1px solid #e2e8f0; border-radius: 999px; padding: 6px 10px 6px 12px; margin-bottom: 8px; }
.loginhero-poweredby .badge span { font-size: 12px; color: var(--ink-2); font-weight: 560; }
.loginhero-poweredby .badge img { height: 22px; width: auto; display: block; }
.loginhero-poweredby p { margin: 8px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.6); font-weight: 500; line-height: 1.5; }
.loginhero-poweredby p:first-of-type { margin-top: 0; }
.loginhero-poweredby a { color: #fff; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

.loginform { display: flex; flex-direction: column; min-height: 100vh; overflow-y: auto; padding: 40px 24px; background: var(--bg); }
.loginform-mobilebrand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
@media (min-width: 980px) { .loginform-mobilebrand { display: none; } }
.loginform-inner { margin: auto; width: 100%; max-width: 400px; }
.loginform-inner .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.loginform-inner h1 { font-size: 21px; }
.loginform-lead { color: var(--ink-2); font-size: 13px; margin: 6px 0 20px; }

.loginform-condensed { margin-top: 26px; text-align: center; font-size: 11.5px; color: var(--ink-3); }
@media (min-width: 980px) { .loginform-condensed { display: none; } }
.loginform-condensed .badge { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px 6px 12px; margin-bottom: 8px; }
.loginform-condensed .badge img { height: 20px; display: block; }

.account { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; margin-bottom: 8px; }
.account:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.account .name { font-weight: 700; font-size: 13px; }
.account .role { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.authdivider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.authdivider::before, .authdivider::after { content: ""; height: 1px; background: var(--line); flex: 1; }