/* Login and account share a readable, self-contained workspace foundation. */
.auth-page, .account-page { --text:#172f36; --muted:#52676d; --border:#dce6e3; --accent:#176f65; --accent-2:#125c55; color:var(--text); font-size:16px; line-height:1.6; }
body:has(.auth-page), body:has(.account-page) { background:#f3f6f5; }
.workspace-eyebrow { color:#176f65; font-size:14px; font-weight:700; letter-spacing:.09em; margin:0 0 12px; }
.auth-page .btn, .account-page .btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:12px 20px; font-size:16px; line-height:1.5; text-decoration:none; border-radius:10px; }
.auth-page .btn--primary, .account-page .btn--primary { background:#176f65; color:#fff; width:auto; }
.auth-page .btn--primary:hover:not(:disabled), .account-page .btn--primary:hover { background:#125b53; }
.auth-page .btn--secondary, .account-page .btn--secondary { background:#fff; color:#172f36; border:1px solid #acbfb6; }
.auth-page .btn--secondary:hover, .account-page .btn--secondary:hover { background:#edf5f1; }
.auth-page :is(a,button,input):focus-visible, .account-page :is(a,button,[tabindex]):focus-visible { outline:3px solid #176f65; outline-offset:4px; }
.auth-page { max-width:1100px; margin:44px auto 64px; padding:0 24px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:0; }
.auth-story { border-radius:24px 0 0 24px; background:#173e40; color:#fff; padding:44px 40px; position:relative; overflow:hidden; }
.auth-story .workspace-eyebrow { color:#b3dbcd; }
.auth-story h2 { font-size:clamp(32px,3.4vw,44px); font-weight:600; line-height:1.16; letter-spacing:-.045em; margin:20px 0; }
.auth-story > p:not(.workspace-eyebrow) { color:#d1e3dd; max-width:360px; }
.auth-art { margin:32px 0; padding:22px 24px; border:1px solid #ffffff26; border-radius:16px; background:#ffffff06; }
.auth-art__bars { height:76px; display:flex; gap:8px; align-items:center; justify-content:center; }
.auth-art__bars i { width:8px; height:var(--bar-height); min-height:8px; background:#9bcebb; border-radius:6px; }
.auth-art > span { display:block; text-align:center; font-size:14px; letter-spacing:.08em; color:#c0ded2; margin-top:18px; }
.auth-benefits { display:grid; gap:20px; list-style:none; margin:0; padding:0; }
.auth-benefits li { display:flex; gap:14px; align-items:flex-start; }
.auth-benefits li > span { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border:1px solid #ffffff30; border-radius:9px; color:#c0ded2; font-size:14px; }
.auth-benefits strong { font-size:16px; font-weight:500; }
.auth-benefits p { font-size:14px; color:#c5dbd3; margin-top:3px; }
.auth-card { background:#fff; border:1px solid #dce6e3; border-left:0; border-radius:0 24px 24px 0; padding:44px 40px; display:flex; flex-direction:column; justify-content:center; box-shadow:0 8px 40px #173e4006; }
.auth-card__icon { width:48px; height:48px; border:1px solid #dce8e1; border-radius:14px; background:#edf5f0; color:#176f65; display:grid; place-items:center; margin-bottom:26px; }
.auth-card__icon svg { width:26px; height:26px; }
.auth-card h1 { font-size:32px; line-height:1.18; font-weight:600; letter-spacing:-.045em; margin:0 0 14px; }
.auth-card__intro { color:var(--muted); font-size:16px; }
.login-form { display:grid; gap:10px; margin-top:28px; }
.login-form label { font-weight:600; font-size:15px; }
.login-form input { width:100%; min-height:52px; border:1px solid #a9bfb4; border-radius:10px; padding:12px 14px; font:inherit; background:#fff; color:#172f36; }
.login-form input::placeholder { color:#667b72; opacity:1; }
.login-form__hint { color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 10px; }
.login-form .btn { width:100%; margin-top:4px; justify-content:space-between; white-space:nowrap; gap:8px; }
.auth-card__security { color:var(--muted); font-size:14px; text-align:center; margin-top:14px; }
.auth-card__footer { border-top:1px solid var(--border); margin-top:28px; padding-top:22px; font-size:14px; }
.auth-card__footer strong { font-size:15px; }
.auth-card__footer p { color:var(--muted); margin-top:4px; }
.checkout-price { margin:22px 0 0; font-size:32px; font-weight:600; letter-spacing:-.04em; }
.checkout-price span { display:block; font-size:15px; font-weight:500; color:var(--muted); margin-top:4px; }
.checkout-status--error { color:#843a18; }
.auth-back { display:inline-flex; align-items:center; gap:10px; color:#176f65; text-decoration:none; font-size:15px; font-weight:600; margin-top:20px; align-self:flex-start; }
.auth-back:hover { text-decoration:underline; }
.auth-notice { padding:14px 16px; background:#fff4ed; color:#843a18; border:1px solid #e8c9b7; border-radius:10px; font-size:15px; margin-top:22px; overflow-wrap:anywhere; }
.auth-notice--success { background:#edf6f0; color:#205c43; border-color:#bcd9c8; }
.auth-dev-link { margin-top:14px; color:#176f65; font-weight:600; font-size:15px; }
.account-page { padding-top:32px; gap:32px; }
.account-plan__cancel { display:inline-flex; align-items:center; margin-top:4px; padding:0; border:0; background:none; color:#7a6558; font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; width:auto; }
.account-plan__cancel:hover { color:#9a4d1b; }
.activity-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.activity-filter { min-height:40px; padding:8px 14px; border:1px solid #d5e2dc; background:#fff; color:#466457; border-radius:999px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.activity-filter:hover { background:#edf5f1; }
.activity-filter[aria-pressed="true"] { background:#173e40; border-color:#173e40; color:#fff; }
.activity-list { list-style:none; margin:0; padding:0; border:1px solid #e0e8e4; border-radius:12px; overflow:hidden; }
.activity-item { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 18px; border-bottom:1px solid #e6ede8; background:#fff; }
.activity-item:last-child { border-bottom:0; }
.activity-item[hidden] { display:none; }
.activity-item__main { min-width:0; }
.activity-item__main strong { display:block; font-size:16px; font-weight:600; }
.activity-item__meta { display:block; color:var(--muted); font-size:13px; margin-top:4px; overflow-wrap:anywhere; }
.activity-item__meta abbr { text-decoration:none; font-variant:none; }
.activity-item__aside { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.activity-money { font-weight:600; font-variant-numeric:tabular-nums; color:#172f36; }
.activity-item__aside a { color:#176f65; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid #c9dbd0; border-radius:8px; white-space:nowrap; }
.activity-item__aside a:hover { background:#edf5f0; }
.account-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.account-heading h1 { font-size:clamp(30px,3.6vw,40px); line-height:1.2; letter-spacing:-.045em; font-weight:600; }
.account-heading h1 > span { color:#288e7b; }
.account-heading__intro { color:var(--muted); margin-top:12px; }
.account-identity { color:var(--muted); margin-top:8px; font-size:14px; overflow-wrap:anywhere; }
.account-identity strong { font-weight:500; color:#334e53; }
.account-heading > .btn { flex-shrink:0; }
.account-overview { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:22px; }
.credits-panel { background:#173e40; color:#fff; border:1px solid #173e40; border-radius:18px; padding:28px 30px; }
.credits-panel .workspace-eyebrow { color:#c0ded2; margin:0; }
.credits-panel__top { display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap; }
.plan-status { padding:4px 10px; border-radius:999px; border:1px solid #94c2af60; background:#ffffff08; color:#d4ebdf; font-size:14px; }
.credits-panel__count { display:flex; align-items:center; gap:18px; margin:24px 0; }
.credits-panel__count > strong { font-size:64px; font-weight:600; line-height:1; letter-spacing:-.05em; }
.credits-panel__count > span { font-size:18px; line-height:1.5; }
.credits-panel__count small { display:block; color:#c5dbd3; font-size:14px; margin-top:2px; }
.credits-bar { height:8px; background:#ffffff26; border-radius:999px; overflow:hidden; }
.credits-bar > span { display:block; height:100%; background:#a2d6bd; border-radius:999px; }
.credits-panel__meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:#d1e3dd; margin-top:16px; font-size:14px; }
.account-plan { background:#fff; border:1px solid var(--border); padding:28px 30px; border-radius:18px; }
.account-plan h2 { font-size:28px; letter-spacing:-.035em; font-weight:600; }
.account-plan > p:not(.workspace-eyebrow) { color:var(--muted); font-size:15px; margin:10px 0 22px; }
.account-plan .btn { font-size:15px; width:100%; }
.account-page .btn--danger { background:#fff; color:#9a4d1b; border:1px solid #e0c4b0; }
.account-page .btn--danger:hover { background:#fff4ed; }
.confirm-dialog { position:fixed; inset:0; margin:auto; height:fit-content; width:min(440px, calc(100vw - 32px)); max-height:calc(100vh - 32px); border:1px solid #dce6e3; border-radius:18px; padding:28px 26px; background:#fff; color:#172f36; box-shadow:0 24px 60px #173e4030; }
.confirm-dialog::backdrop { background:#173e4070; }
.confirm-dialog .workspace-eyebrow { margin-bottom:10px; }
.confirm-dialog h3 { font-size:26px; font-weight:600; letter-spacing:-.035em; line-height:1.2; margin:0 0 12px; }
.confirm-dialog p { color:var(--muted); font-size:16px; line-height:1.6; margin:0; }
.confirm-dialog__actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.confirm-dialog .btn { width:auto; }
.account-page .auth-notice { margin:0; }
.account-section-heading { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:14px; }
.account-section-heading .workspace-eyebrow { margin-bottom:6px; }
.account-section-heading h2 { font-size:26px; font-weight:600; letter-spacing:-.035em; }
.account-section-heading p:not(.workspace-eyebrow) { color:var(--muted); font-size:15px; margin-top:8px; }
.account-tag { border:1px solid #d5e2dc; background:#edf3ef; border-radius:8px; padding:6px 10px; color:#466457; font-size:14px; white-space:nowrap; }
.trend-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.trend-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px 20px; min-width:0; }
.trend-card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.trend-card h3 { font-size:18px; font-weight:600; }
.trend-card__direction { font-size:14px; color:var(--muted); }
.trend-card__summary { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:8px 0 10px; }
.trend-card__summary > strong { font-size:36px; line-height:1.2; font-weight:600; letter-spacing:-.045em; }
.trend-card__summary > span { color:var(--muted); font-size:14px; }
.trend-change { width:100%; font-size:14px; color:#52676d; }
.trend-change--positive { color:#176746; }
.trend-change--negative { color:#9a4d1b; }
.trend-chart { display:flex; gap:6px; height:88px; align-items:stretch; }
.trend-axis { display:flex; flex-direction:column; justify-content:space-between; width:30px; flex-shrink:0; padding:4px 0; font-size:14px; color:#60736a; }
.trend-svg { display:block; width:100%; min-width:0; height:88px; overflow:visible; }
.trend-gridlines { stroke:#e3ebe6; stroke-width:1; fill:none; vector-effect:non-scaling-stroke; }
.trend-dates { display:flex; justify-content:space-between; gap:12px; margin:12px 0 0 36px; color:var(--muted); font-size:14px; }
.trend-no-data { padding:20px 0; color:var(--muted); font-size:15px; }
.history-metric-hint { display:block; font-size:12px; font-weight:500; color:#60736a; }
.history-panel { background:#fff; border:1px solid var(--border); border-radius:18px; padding:28px; min-width:0; }
.history-table-wrap { overflow-x:auto; border:1px solid #e0e8e4; border-radius:12px; }
.history-table { width:100%; min-width:760px; border-collapse:collapse; font-size:15px; text-align:left; }
.history-table th, .history-table td { padding:16px; border-bottom:1px solid #e6ede8; vertical-align:middle; }
.history-table thead th { background:#f2f7f4; color:#466157; font-size:14px; font-weight:500; white-space:nowrap; }
.history-table tbody th { font-weight:500; font-size:14px; }
.history-table tbody tr:last-child > * { border-bottom:0; }
.history-table tbody tr:hover { background:#f7faf8; }
.history-table a { color:#176f65; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #c9dbd0; border-radius:8px; white-space:nowrap; }
.history-table a:hover { background:#edf5f0; }
.history-report-status { display:block; font-size:14px; color:#60736a; margin-top:4px; }
.history-report-status--processing,
.history-report-status--enriching { color:#a86b16; }
.history-spinner { display:inline-block; width:12px; height:12px; margin-right:6px; border:2px solid #ead7b4; border-top-color:#a86b16; border-radius:50%; vertical-align:-1px; animation:history-spin .8s linear infinite; }
@keyframes history-spin { to { transform:rotate(360deg); } }
.history-report-status--failed { color:#9a4d1b; }
.history-report-error { display:block; color:#9a4d1b; font-size:13px; font-weight:400; margin-top:4px; max-width:28rem; }
.history-table tbody tr[data-report-status="processing"],
.history-table tbody tr[data-report-status="enriching"] { background:#fffaf1; }
.history-table tbody tr[data-report-status="failed"] { background:#fdf6f2; }
.history-risk { color:#3f585f; }
.history-table--compact { min-width:640px; }
.history-table--compact th, .history-table--compact td { padding:14px 16px; }
.history-ref { font-size:13px; color:#52676d; overflow-wrap:anywhere; max-width:220px; }
.history-status { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:13px; border:1px solid #d5e2dc; background:#edf3ef; color:#466457; }
.history-status--paid, .history-status--active { background:#e7f4ec; color:#176746; border-color:#c3ddcc; }
.history-credits { font-weight:600; font-variant-numeric:tabular-nums; }
.history-credits--in { color:#176746; }
.history-credits--out { color:#9a4d1b; }
.history-scroll-hint { display:none; }
.account-empty { border:1px dashed #b9cec0; border-radius:16px; background:#f9fbfa; padding:36px 24px; text-align:center; }
.account-empty__icon { display:grid; place-items:center; width:48px; height:48px; background:#e8f2ec; color:#176f65; border-radius:14px; margin:0 auto 16px; font-size:24px; }
.account-empty h3 { font-size:21px; font-weight:600; margin-bottom:10px; }
.account-empty p { color:var(--muted); max-width:450px; margin:0 auto 20px; }
.account-empty--compact { border:0; padding:20px; }
@media (max-width:1000px) {
  .auth-page { margin:28px auto 48px; }
  .auth-story, .auth-card { padding:32px 28px; }
  .account-heading { align-items:flex-start; flex-direction:column; }
}
@media (max-width:360px) {
  .login-form .btn { font-size:15px; padding:12px 14px; }
}
@media (max-width:760px) {
  .auth-page { grid-template-columns:1fr; max-width:580px; padding:0 16px; margin:24px auto 40px; }
  .auth-story { border-radius:18px 18px 0 0; padding:28px; }
  .auth-story h2 { font-size:32px; margin:12px 0; }
  .auth-story h2 br { display:none; }
  .auth-art, .auth-benefits { display:none; }
  .auth-card { border-left:1px solid #dce6e3; border-top:0; border-radius:0 0 18px 18px; padding:28px; }
  .auth-card h1 { font-size:28px; }
  .auth-card__icon { margin-bottom:20px; }
  .account-page { padding-top:20px; gap:28px; }
  .account-overview, .trend-grid { grid-template-columns:1fr; }
  .credits-panel, .account-plan, .history-panel { padding:22px; }
  .account-section-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .trend-card { padding:20px; }
  .trend-card__head { align-items:flex-start; flex-direction:column; gap:4px; }
  .history-scroll-hint { display:block; color:var(--muted); font-size:14px; margin-bottom:12px; }
  .history-panel { padding:22px 16px; }
  .account-heading > .btn { width:100%; }
  .activity-item { align-items:flex-start; flex-direction:column; gap:10px; }
  .activity-item__aside { width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .confirm-dialog__actions { flex-direction:column-reverse; }
  .confirm-dialog .btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) { .auth-page *, .account-page * { animation:none !important; transition:none !important; } }
/* Keep the table's accessible labels inside its horizontal scroll region. */
.history-table-wrap { position:relative; }

/* On phones the sign-in form comes first, so people can get straight to it. */
@media (max-width:760px) {
  .auth-card { order:0; border:1px solid #dce6e3; border-bottom:0; border-radius:18px 18px 0 0; }
  .auth-story { order:1; border-radius:0 0 18px 18px; }
}

/* The selected plan and a single payment action stay together on every screen. */
.checkout-plans { border:0; padding:0; margin:0; display:grid; gap:10px; min-width:0; }
.checkout-plans legend { font-weight:600; margin-bottom:10px; font-size:15px; }
.checkout-plans .checkout-plan { display:flex; align-items:center; gap:12px; padding:14px; margin:0; border:1px solid #cadbd3; border-radius:10px; cursor:pointer; }
.checkout-plan:has(input:checked) { background:#edf6f1; border-color:#176f65; box-shadow:inset 0 0 0 1px #176f65; }
.checkout-plans .checkout-plan input { width:18px; height:18px; padding:0; margin:0; flex:0 0 18px; accent-color:#176f65; }
.checkout-plan > span { flex:1; min-width:0; }
.checkout-plan strong { display:flex; justify-content:space-between; flex-wrap:wrap; column-gap:12px; font-size:15px; color:#183d3e; }
.checkout-plan small { display:block; font-size:13px; color:#52676d; margin-top:3px; line-height:1.5; }
.checkout-plan--disabled { opacity:.65; cursor:default; }
.checkout-page #checkout-plan-terms { margin-top:0; }
.checkout-page #checkout-btn { white-space:normal; }