:root {
  --ink: #14352f;
  --muted: #5c716d;
  --green: #08735d;
  --green-dark: #00614f;
  --mint: #eaf6f1;
  --mint-strong: #caeade;
  --surface: #ffffff;
  --soft: #f8faf9;
  --line: #e0e8e5;
  /* The one red: only for real errors (and the irreversible Stop research confirmation). */
  --error: #913c2b;
  --error-soft: #fff1eb;
  --shadow: 0 8px 28px rgba(20,53,47,.08);
  --space-text: 8px;
  --space-related: 12px;
  --space-control: 16px;
  --space-section: 20px;
  --space-card: 22px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: white;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); line-height: 1.48; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(36,104,166,.25); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 278px minmax(0,1fr); grid-template-rows: 76px 1fr; max-width: 1920px; margin: 0 auto; border-inline: 1px solid var(--line); }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 30px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 19px; }
/* Display the supplied PS symbol through a viewport, preserving the original artwork. */
.brand-mark { position: relative; display: block; flex: 0 0 44px; width: 44px; height: 40px; overflow: hidden; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); font-weight: 700; }
.avatar { width: 40px; height: 40px; padding:0; border:0; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--green-dark); font-weight: 800; }
.avatar:hover { background:var(--mint-strong); }
.account-menu-wrap { position:relative; }
.account-popover { position:absolute; z-index:12; top:calc(100% + 12px); right:0; width:min(360px,calc(100vw - 24px)); overflow:hidden; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:var(--shadow); }
.account-popover-header { display:flex; align-items:center; gap:12px; padding:18px; border-bottom:1px solid var(--line); }
.account-popover-avatar { flex:0 0 42px; width:42px; height:42px; }
.account-popover-header div { display:grid; min-width:0; }
.account-popover-header strong,.account-popover-header span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-popover-header span { color:var(--muted); font-size:13px; }
.account-balance-summary { display:grid; gap:5px; margin:14px; padding:16px; border-radius:12px; background:var(--mint); }
.account-balance-summary > span { color:var(--muted); font-size:12px; }
.account-balance-summary > span:first-child { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--ink); font-weight:750; }
.account-balance-summary strong { font-size:20px; }
.account-menu-actions { display:grid; padding:0 8px 8px; }
.account-menu-actions button { min-height:42px; padding:9px 10px; border:0; border-radius:9px; background:white; color:var(--ink); text-align:left; font-weight:700; }
.account-menu-actions button:hover { background:var(--soft); }
.account-menu-actions button:last-child { margin-top:4px; border-top:1px solid var(--line); border-radius:0 0 9px 9px; }
.sidebar { grid-row: 2; background: var(--surface); border-right: 1px solid var(--line); }
.sidebar nav { display: grid; gap: 4px; margin-bottom: 24px; }
.nav-item { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; border: 1px solid transparent; background: transparent; color: var(--muted); text-align: left; }
.nav-item span { width: 18px; color: #5f7b73; text-align: center; }
.nav-item:hover { background: var(--soft); color: var(--ink); }
.nav-item.active { background: var(--mint); color: var(--green-dark); }
.sidebar-note { display: grid; gap: 4px; margin: 32px 6px 0; }
.sidebar-note strong { font-size: 14px; }
.sidebar-note span { color: var(--muted); font-size: 13px; }
main { min-width: 0; padding: 36px 32px 72px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-section); margin: 0; }
.page-heading > div:first-child { display:grid; gap:var(--space-text); min-width:0; }
.page-heading h1 { margin: 0; line-height: 1.13; }
.page-heading p:not(.eyebrow) { max-width: 880px; margin: 0; color: var(--muted); }
.eyebrow { margin: 0; color: var(--green); text-transform: uppercase; letter-spacing: .11em; font-weight: 800; }
.journey { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.journey span { min-height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--muted); font-size: 14px; font-weight: 750; text-align: center; padding: 8px; }
.journey .current { background: var(--mint); border-color: #8ecdb7; color: var(--green-dark); }
.workspace-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap: 20px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--space-card); box-shadow: 0 2px 8px rgba(20,55,47,.025); }
.panel-heading { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 20px; }
.panel-heading h2 { margin: 0 0 3px; font-size: 21px; letter-spacing: -.02em; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.step-number { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); color: var(--green-dark); font-weight: 800; }
.research-form { display: grid; gap: 16px; }
.research-form .panel-heading { margin-bottom: 0; }
label { display: grid; gap: 7px; font-weight: 750; color: #4f6962; font-size: 14px; }
.optional { color: var(--muted); font-weight: 500; }
input, select, textarea { width: 100%; border: 1px solid var(--line); color: var(--ink); padding: 11px 13px; }
textarea { resize: vertical; min-height: 110px; }
input:hover, select:hover, textarea:hover { border-color: #aebfba; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two-columns > * { min-width: 0; }
.field-hint { margin: -6px 0 0; color: var(--muted); font-size: 13px; }
.connection-error { padding: 14px; border-radius: 10px; background: var(--error-soft); color: var(--error); font-size: 14px; overflow-wrap: anywhere; }
.connection-error p { margin: 0 0 10px; }
/* Why a new search can't start (no searches left, research paused), before the brief. */
.account-start-notice { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.account-start-notice p { margin: 0 0 10px; }
.allowance-row { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 13px; }
.primary-button, .secondary-button { padding: 10px 17px; border: 1px solid transparent; }
.primary-button { color: white; }
.primary-button:disabled { cursor: wait; opacity: .62; }
.secondary-button { border-color: var(--line); color: var(--ink); }
.secondary-button:hover { background: var(--soft); }
.form-note { margin: -4px 0 0; color: var(--muted); font-size: 12px; }
.status-panel { position: sticky; top: 96px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; border-radius: 999px; background: var(--mint); color: var(--green-dark); font-size: 12px; font-weight: 800; }
.tag.confidence { background: var(--soft); color: var(--muted); }
.empty-results { border: 1px dashed var(--line); border-radius: 14px; background: white; color: var(--muted); padding: 34px; text-align: center; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(15,36,30,.52); backdrop-filter: blur(3px); }
.modal { position: relative; width: min(700px,100%); max-height: min(760px,90vh); overflow: auto; background: white; border-radius: 18px; padding: 26px; box-shadow: var(--shadow); }
.modal h2 { margin: 0; font-size: 25px; }
.modal-intro { color: var(--muted); margin: 4px 0 18px; }
.modal-close { position: absolute; right: 18px; top: 15px; width: 42px; height: 42px; border: 0; background: transparent; color: var(--muted); font-size: 28px; }
.history-list { display: grid; gap: 9px; }
.history-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); padding: 13px; text-align: left; }
.history-item strong { display: block; color: var(--ink); }
.history-item span { color: var(--muted); font-size: 13px; }
.history-item button { min-height: 40px; border: 1px solid var(--line); border-radius: 9px; background: white; padding: 8px 14px; color: var(--ink); font-weight: 800; }
.history-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.history-item .history-delete { color: var(--error); font-weight: 700; }
.history-item .history-delete:hover { border-color: var(--error); }
@media (max-width: 600px) { .history-item { grid-template-columns: 1fr; gap: 10px; } .history-actions { justify-content: flex-start; } }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; max-width: 420px; border-radius: 11px; background: #173b32; color: white; padding: 13px 16px; box-shadow: var(--shadow); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 230px minmax(0,1fr); }
  main { padding: 30px 24px 60px; }
  .workspace-grid { grid-template-columns: 1fr; }
  .status-panel { position: static; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .topbar { min-height: 70px; padding: 0 16px; }
  .live-badge { display: none; }
  .sidebar { display: none; }
  main { padding: 24px 16px 50px; }
  .page-heading { display: grid; }
  .page-heading .secondary-button { width: 100%; }
  .journey { display: flex; overflow: auto; }
  .journey span { flex: 0 0 155px; }
  .two-columns { grid-template-columns: 1fr; }
  .allowance-row { display: grid; }
}
/* Pending or partly complete research: the same neutral note as "Still to confirm". */
.quality-review { margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink); overflow-wrap: anywhere; }
.quality-review p { margin: 8px 0 0; }

/* Published company details: each fact with its quote and source. */
.company-profile-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .45fr); gap: 16px 32px; border-top: 1px solid var(--line); padding: 20px 0; overflow-wrap: anywhere; }
.profile-item-content { min-width: 0; }
.profile-item-kind { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.profile-catalogue-link { display: block; margin-top: 10px; color: var(--green-dark); font-size: 14px; }
.company-profile-item p { margin: 8px 0; line-height: 1.6; }
.company-profile-item dl { margin: 10px 0; }
.company-profile-item dl > div { display: grid; grid-template-columns: minmax(95px, 1fr) minmax(0, 2fr); gap: 12px; padding: 4px 0; font-size: 14px; }
.company-profile-item dt { text-transform: capitalize; color: var(--muted); }
.company-profile-item dd { margin: 0; }
.profile-relevance { color: var(--muted); font-size: 12px; }
.profile-source { margin-top: 12px; }
@media (max-width: 1100px) {
  .company-profile-item { grid-template-columns: 1fr; gap: 4px; }
}

/* Optional research additions keep long evidence out of the initial page. */
.research-changes { margin-block: 20px; min-width: 0; }
.observation-item { padding-block: 18px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.observation-item .action-row { flex-wrap: wrap; }

/* Tender notices keep the existing research layout, with compact closed groups. */
.tender-card { margin-bottom: 14px; overflow-wrap: anywhere; }
.tender-card:last-child { margin-bottom: 0; }

/* Separate a market fact’s source links from its expandable evidence. */
.market-fact > .methodology { margin-top: 16px; }

/* Sign in (sign-in.html, link phase 5): one calm panel in the app's own colours. */
.sign-in-page { min-height: 100vh; background: var(--soft); }
.sign-in-panel { width: 100%; }
.sign-in-panel h1 { margin: 0 0 6px; font-size: 24px; }
.sign-in-message { margin: 0; color: var(--ink); font-size: 14px; }
.sign-in-message.problem { color: var(--error); }
.sign-in-links { display: grid; gap: 8px; justify-items: start; margin-top: 16px; }
.sign-in-panel form { display: grid; gap: 16px; margin-top: 20px; }
.sign-in-panel .primary-button { width: 100%; justify-content: center; margin-top: 4px; }
/* Password box with its Show/Hide button inside (shared markup with Staff control's sign-in). */
.password-wrap { position: relative; display: block; }
.password-wrap input { width: 100%; padding-right: 68px; }
.password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 6px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--green-dark); font: inherit; font-size: 13px;
  font-weight: 700; letter-spacing: normal; text-transform: none; cursor: pointer; }
.password-toggle:hover { background: var(--soft); }
.sign-in-hint { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }
/* minimal.css (on every page that loads this file) sets the rest of .link-button. */
.link-button { text-decoration: underline; }
/* The sign-in page loads only this file and minimal.css: hidden always hides (labels are grids). */
.sign-in-page [hidden] { display: none !important; }
.sign-in-page .muted { color: var(--muted); }
.sign-in-signed { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.sign-in-terms { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; line-height: 1.5; }
.sign-in-terms input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--green-dark); }
.sign-in-terms a { color: var(--green-dark); }
/* Signing in keeps Create account's password-hint line, unseen, so both tabs are one size (sign-in.js). */
.sign-in-hint.is-spacer { visibility: hidden; }
/* Customer sign-in and sign-up (sign-in.html): what PartnrHunt does on the app's deep green, beside
   the white form; on a phone, just the form. */
.auth-page { display: grid; place-items: center; box-sizing: border-box; padding: 32px 16px; isolation: isolate;
  background: #ecf4f0; }
/* The coming-soon poster's faint dotted world map and partner routes (brand/coming-soon/make-map.py),
   its clear middle behind the card; a tall cut on portrait screens. On its own layer, drawn once:
   typing in the form never makes the browser draw the map again (it took ~50 ms at Retina size). */
.auth-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0);
  background: url("/assets/world-map-wide.svg") center / cover no-repeat,
              radial-gradient(60% 80% at 50% 46%, #f7fbf9 0%, #ecf4f0 50%, #dde9e3 100%); }
@media (max-aspect-ratio: 3/4) {
  .auth-page::before { background: url("/assets/world-map-tall.svg") center / cover no-repeat,
                                   radial-gradient(70% 60% at 50% 46%, #f7fbf9 0%, #ecf4f0 50%, #dde9e3 100%); }
}
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); width: min(100%, 1000px); min-height: 600px; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
/* The e-name card's front: the app's deep green, lit from the top left; the logo on it is all white. */
.auth-story { display: flex; flex-direction: column; gap: 32px; padding: 40px 44px; color: #fff;
  background: radial-gradient(120% 80% at 20% 8%, #0a7a63 0%, var(--green-dark) 48%, #0f4a3e 100%); }
/* A taller card (Create account) spreads the four points down the panel instead of leaving empty green. */
.auth-pitch { display: flex; flex: 1; flex-direction: column; }
.auth-brand { display: inline-block; align-self: flex-start; line-height: 0; }
.auth-brand img { display: block; width: auto; height: 40px; }
.auth-eyebrow { margin: 0 0 12px; color: var(--mint-strong); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-pitch h2 { max-width: 440px; margin: 0 0 28px; color: #fff; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; }
.auth-points { display: grid; flex: 1; grid-auto-rows: 1fr; max-width: 460px; margin: 0; padding: 0; list-style: none; }
.auth-points li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-content: center; align-items: start; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); }
.auth-points li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.auth-points svg { box-sizing: border-box; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.1); color: var(--mint-strong); }
.auth-points strong { display: block; font-size: 15px; }
.auth-points span { display: block; margin-top: 2px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.5; }
.auth-note { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; }
.auth-card { display: flex; flex-direction: column; justify-content: center; padding: 40px; border: 0; border-radius: 0; box-shadow: none; }
.auth-card h1 { font-size: 26px; }
/* Keep Google's own white button and G untouched; fit it to the email form. */
.auth-google { display: grid; gap: 20px; min-width: 0; }
/* The Google button sits closer to the intro than the email form does. */
.sign-in-panel form:has(> .auth-google:not([hidden])) { margin-top: 4px; }
.auth-google-button { width: 100%; max-width: 400px; min-height: 40px; margin-inline: auto; border-radius: 4px; }
.auth-google-button:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.auth-divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 24px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.auth-tabs button { min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.auth-tabs button[aria-selected="true"] { background: var(--surface); color: var(--green-dark); box-shadow: 0 1px 3px rgba(20,53,47,.12); }
.auth-tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.auth-mobile-brand { display: none; }
.auth-legal { margin: 24px 0 0; color: var(--muted); font-size: 13px; }
.auth-legal a { color: var(--muted); }
@media (max-width: 860px) {
  .auth-page { place-items: start center; }
  .auth-shell { grid-template-columns: 1fr; width: min(100%, 460px); min-height: 0; }
  .auth-story { display: none; }
  .auth-mobile-brand { display: flex; margin-bottom: 24px; }
  .auth-card { padding: 28px 22px; }
}
/* The Terms of Service and Privacy Policy (app/legal/), linked from sign-up: the sign-in page's look, wider. */
.legal-shell { display: grid; gap: 24px; max-width: 760px; margin: 0 auto; padding: 48px 16px; }
.legal-panel { min-width: 0; padding: 28px; }  /* min-width: a wide table scrolls inside it, never the page. */
.legal-panel h1 { margin: 0 0 6px; font-size: 26px; }
.legal-panel h2 { margin: 28px 0 8px; font-size: 18px; }
.legal-panel p, .legal-panel li { font-size: 15px; line-height: 1.6; }
.legal-panel p { margin: 0 0 10px; }
.legal-panel ul { display: grid; gap: 6px; margin: 0 0 10px; padding-left: 20px; }
.legal-panel a { color: var(--green-dark); }
.legal-table { overflow-x: auto; margin: 4px 0 12px; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { color: var(--muted); font-weight: 700; }
@media (max-width: 520px) { .legal-panel { padding: 20px 16px; } .legal-table table { min-width: 520px; } }

/* Buy searches (billing.js): the top bar's balance, the packs dialog, the offer above the brief and purchases. */
.balance-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); font-size: 14px; font-weight: 650; white-space: nowrap; }
.balance-chip[hidden] { display: none; }
.balance-chip .primary-button { min-height: 32px; padding: 4px 14px; border-radius: 999px; font-size: 13px; }
#buy-dialog { width: min(860px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100dvh - 40px); padding: 28px 28px 22px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: white; box-shadow: 0 24px 60px rgba(20,53,47,.18); overflow: auto; }
#buy-dialog::backdrop { background: rgba(15,36,30,.52); backdrop-filter: blur(3px); }
#buy-dialog .dialog-heading { margin-bottom: 6px; }
#buy-dialog .dialog-heading .eyebrow { margin: 0 0 4px; }
.buy-lede { margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.buy-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.buy-pack { position: relative; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: white; cursor: pointer; color: var(--ink); font-weight: 400; }
.buy-pack.is-chosen { border: 2px solid var(--green); padding: 17px; }
/* Keyboard focus rings the whole card, never a square around the dot. */
.buy-pack input:focus-visible { outline: none; }
.buy-pack:has(input:focus-visible) { outline: 3px solid rgba(36,104,166,.25); outline-offset: 2px; }
#buy-dialog-title:focus { outline: none; }
.buy-pack input { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--green); }
.buy-pack-tag { align-self: flex-start; margin: 0 0 10px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--green-dark); font-size: 12px; font-weight: 700; }
.buy-pack-tag[data-empty] { visibility: hidden; }
.buy-pack-name { margin: 0 0 6px; padding-right: 26px; font-size: 16px; font-weight: 750; }
.buy-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.buy-price b { color: var(--ink); font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.buy-price span, .buy-was, .buy-was s { color: var(--muted); font-size: 13px; }
.buy-price span { font-size: 14px; }
.buy-was { min-height: 1.5em; margin: 0 0 12px; }
.buy-pack ul { display: grid; gap: 6px; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 14px; }
.buy-pack li::before { content: '✓'; margin-right: 8px; color: var(--green); font-weight: 700; }
.buy-includes { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--soft); color: var(--muted); font-size: 14px; line-height: 1.55; }
.buy-includes strong { color: var(--ink); }
.buy-problem { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: 14px; }
.buy-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.buy-foot .action-row { display: flex; gap: 10px; margin: 0; }
.buy-total { color: var(--muted); font-size: 15px; }
.buy-total strong { margin-left: 6px; color: var(--ink); font-size: 20px; }
.buy-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.buy-note span { display: block; margin-top: 2px; }
.account-start-notice > div:first-child p { margin: 0 0 10px; }
.account-start-notice strong { display: block; margin-bottom: 4px; font-size: 16px; }
.account-start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.account-start-notice.is-offer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-radius: 14px; background: white; }
.account-start-notice.is-offer > div:first-child p { margin: 0; color: var(--muted); line-height: 1.5; }
.account-start-notice.is-offer .account-start-actions { flex: 0 0 auto; }
.account-start-notice[hidden] { display: none; }
.account-setting-row > .purchase-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
#account-dialog .purchase-actions .secondary-button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 36px; padding: 6px 14px; background: white; text-decoration: none; }
.purchase-status { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.purchase-status.paid { border-color: #bfe3d4; background: var(--mint); color: var(--green-dark); }
.purchase-status.waiting { border-color: #ecd9a8; background: #fff8e6; color: #8a5a00; }
@media (max-width: 760px) {
  .balance-chip { gap: 6px; padding-left: 10px; font-size: 13px; }
  .account-start-notice.is-offer { align-items: stretch; flex-direction: column; }
  .buy-foot { align-items: stretch; flex-direction: column; }
  .buy-foot .action-row > * { flex: 1 1 0; }
}
@media (max-width: 620px) {
  .balance-chip-long { display: none; }
  .topbar-actions:has(.balance-chip:not([hidden])) { gap: 10px; }
  #buy-dialog { padding: 20px; }
  #account-dialog .purchase-actions { justify-content: space-between; }
}