/* ---------- Doji Doggo brand system ---------- */
:root {
  --brand-primary: #D88324;
  --brand-primary-dark: #A95E12;
  --brand-accent: #F2A93B;
  --brand-ink: #101827;
  --brand-gray: #667085;
  --brand-line: #E5E1D8;
  --brand-bg: #F6F3EC;
  --brand-surface: #FFFEFA;
  --brand-success: #16866A;
  --brand-danger: #C34D45;

  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", var(--font-body);
  --radius: 16px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--brand-bg);
  color: var(--brand-ink);
}
h1, h2 { margin: 0 0 0.5em; font-family: var(--font-display); letter-spacing: -0.035em; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }

/* ---------- Brand mark (placeholder) ---------- */
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.brand-mark { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg,var(--brand-accent),var(--brand-primary-dark)); display: inline-block; box-shadow: 0 5px 16px #d8832440; }
.brand-name { font-size: 1.05rem; }
.brand-logo { border-radius: 10px; display: block; }

/* ---------- Auth page ---------- */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.auth-card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  padding: 2.5rem;
  width: 100%; max-width: 360px;
  text-align: center;
}
.auth-card .brand { justify-content: center; margin-bottom: 0.5rem; }
.auth-sub { color: var(--brand-gray); margin-bottom: 1.5rem; }
.auth-error { color: var(--brand-danger); margin-top: 1rem; font-size: 0.9rem; }

/* ---------- App shell ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.5rem;
  background: var(--brand-surface);
  border-bottom: 1px solid var(--brand-line);
  position: sticky; top: 0; z-index: 10; box-shadow: 0 8px 30px rgb(16 24 39 / 5%);
  flex-wrap: wrap; gap: 1rem;
}
.tabs { display: flex; gap: 0.4rem; }
.tab {
  border: none; background: transparent; color: var(--brand-gray);
  padding: 0.5em 1em; border-radius: 999px; font-weight: 600; cursor: pointer;
}
.tab.is-active { background: var(--brand-primary); color: #fff; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.plan-badge { padding: .38rem .7rem; border: 1px solid rgb(242 169 59 / 35%); border-radius: 999px; color: #F6BE68; background: rgb(216 131 36 / 10%); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.app-main { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.view-header { margin-bottom: 1.5rem; }
.privacy-note {
  color: var(--brand-accent); font-size: 0.9rem; font-weight: 600;
  margin-top: 0.3rem;
}

/* ---------- Cards / forms ---------- */
.card {
  background: var(--brand-surface); border: 1px solid var(--brand-line);
  border-radius: var(--radius); padding: 1.6rem; margin-bottom: 1.25rem;
  box-shadow: 0 10px 34px rgb(16 24 39 / 5%);
}
.form label {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.85rem; font-weight: 600; color: var(--brand-gray);
  margin-bottom: 1rem;
}
.form-row { display: flex; gap: 1rem; }
.form-row label { flex: 1; }
input, select, textarea {
  padding: 0.6em 0.75em; border: 1px solid var(--brand-line);
  border-radius: 8px; color: var(--brand-ink); background: var(--brand-bg);
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgb(242 169 59 / 18%); border-color: var(--brand-primary); }
.form-hint { font-size: 0.82rem; color: var(--brand-gray); margin: -0.5rem 0 1rem; }
.ai-disclaimer {
  margin: 0 0 1.25rem; padding: 0.75rem 0.9rem;
  border: 1px solid #F0D08A; border-left: 4px solid var(--brand-accent);
  border-radius: 8px; background: #FFF8E8; color: #71541B;
  font-size: 0.84rem; line-height: 1.45;
}
.form-actions + .ai-disclaimer { margin-top: 1rem; margin-bottom: 0; }
.form-actions { display: flex; gap: 0.75rem; }
.grade-result {
  margin-top: 1rem; padding: 0.8rem 1rem; background: var(--brand-bg);
  border-radius: 8px; font-size: 0.9rem;
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary, .btn-text {
  border: none; border-radius: 999px; padding: 0.65em 1.4em;
  font-weight: 600; cursor: pointer;
}
.btn-primary { background: linear-gradient(135deg,var(--brand-accent),var(--brand-primary)); color: #201508; box-shadow: 0 8px 18px rgb(216 131 36 / 20%); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--brand-bg); border: 1px solid var(--brand-line); color: var(--brand-ink); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-text { background: transparent; color: var(--brand-gray); padding: 0.4em 0.6em; }

/* ---------- Journal / strategy cards ---------- */
.empty-state { color: var(--brand-gray); font-style: italic; }
.trade-card-header, .strategy-card-header {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem;
}
.trade-card-body { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--brand-gray); }
.trade-thumb { max-width: 100%; border-radius: 8px; margin-top: 0.75rem; display: block; }

.status-pill, .direction-pill {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  padding: 0.2em 0.6em; border-radius: 999px; letter-spacing: 0.03em;
}
.status-planned { background: #EEF0FF; color: var(--brand-primary); }
.status-executed { background: #FFF3DE; color: #B4790C; }
.status-closed, .status-accepted { background: #E4F6ED; color: var(--brand-success); }
.status-draft, .status-rejected { background: #F1F2F5; color: var(--brand-gray); }
.direction-long { background: #E4F6ED; color: var(--brand-success); }
.direction-short { background: #FDEBEA; color: var(--brand-danger); }
.outcome-win { color: var(--brand-success); font-weight: 700; }
.outcome-loss { color: var(--brand-danger); font-weight: 700; }

/* ---------- Strategy signals + image uploader ---------- */
.signal-list { margin-bottom: 0.5rem; }
.signal-row { margin-bottom: 0.5rem; }
.signal-row input { width: 100%; }
.add-signal-btn { display: block; margin: -0.3rem 0 1.2rem; }
.signals-block { margin: 0.75rem 0; }
.signals-block h3 { font-size: 0.85rem; color: var(--brand-gray); margin-bottom: 0.4rem; }
.signal-weight-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.35rem 0; font-size: 0.88rem; border-bottom: 1px solid var(--brand-line);
}
.weight-input { width: 60px; padding: 0.3em 0.4em; }
.image-uploader { margin: 0.75rem 0; }
.image-uploader h3 { font-size: 0.85rem; color: var(--brand-gray); margin-bottom: 0.4rem; }
.image-slot-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--brand-line); }
.image-slot-label { flex: 0 0 130px; font-size: 0.8rem; font-weight: 600; }
.image-slot-input {
  flex: 1; font-size: 0.8rem; color: var(--brand-gray); font-weight: 500;
  padding: 0.3rem 0.5rem; border: 1px dashed var(--brand-line); border-radius: 6px; text-align: center; cursor: pointer;
}
.image-slot-input.is-filled { color: var(--brand-success); border-color: var(--brand-success); border-style: solid; }
.image-slot-input input { display: none; }

/* ---------- Close-trade inline form ---------- */
.close-trade-form { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--brand-line); }
.close-trade-form .form-row { align-items: center; gap: 0.5rem; }
.close-trade-form select, .close-trade-form input { padding: 0.4em 0.5em; }

/* ---------- Strategy interview panel ---------- */
.interview-panel {
  background: var(--brand-bg); border-radius: 8px; padding: 0.9rem;
  margin: 0.75rem 0; max-height: 220px; overflow-y: auto;
}
.interview-msg { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.45; }
.interview-msg-user { color: var(--brand-ink); font-weight: 600; }
.interview-msg-doggo { color: var(--brand-gray); }
.interview-input-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.interview-input-row input { flex: 1; }

/* ---------- Authenticated app: dark workspace ---------- */
.app-page {
  --brand-ink: #F3F6FA; --brand-gray: #96A1B2; --brand-line: #283241;
  --brand-bg: #090D14; --brand-surface: #111822; --brand-success: #5DD6AF; --brand-danger: #FF7E76;
  min-height: 100vh; background:
    radial-gradient(circle at 80% -10%, rgb(216 131 36 / 12%), transparent 35%),
    linear-gradient(180deg, #090D14, #0C1119); color: var(--brand-ink);
}
.app-page .topbar { background: rgb(13 19 28 / 88%); border-color: #202936; box-shadow: 0 12px 40px rgb(0 0 0 / 24%); backdrop-filter: blur(18px); }
.app-page .card { background: linear-gradient(145deg, #141C27, #101721); box-shadow: 0 18px 50px rgb(0 0 0 / 18%); }
.app-page input,.app-page select,.app-page textarea { background: #0A1018; border-color: #2A3545; color: #F3F6FA; }
.app-page input::placeholder,.app-page textarea::placeholder { color: #5F6B7D; }
.app-page .ai-disclaimer { background: rgb(216 131 36 / 8%); border-color: rgb(242 169 59 / 28%); color: #D8B77E; }
.app-page .btn-primary { color: #171006; }
.app-page .btn-secondary { background: #182230; border-color: #344154; color: #E8EDF5; }
.app-page .status-draft,.app-page .status-rejected { background: #222C39; }
.app-page .status-planned { background: #252B4A; color: #BFC4FF; }
.app-page .status-executed { background: #382B18; color: #F4C471; }
.app-page .status-closed,.app-page .status-accepted,.app-page .direction-long { background: #15352D; }
.app-page .direction-short { background: #3A2224; }

/* ---------- Pricing ---------- */
.pricing-hero { max-width: 680px; text-align: center; margin: 1rem auto 2.25rem; }
.pricing-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; margin: .3em 0; }
.pricing-hero p { color: var(--brand-gray); font-size: 1.05rem; line-height: 1.65; }
.pricing-kicker,.plan-name { color: #F2A93B; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.pricing-card { position: relative; display: flex; flex-direction: column; padding: 1.6rem; border: 1px solid #283241; border-radius: 20px; background: linear-gradient(155deg,#151E2A,#0F151E); }
.pricing-card-featured { border-color: #C77A25; box-shadow: 0 22px 65px rgb(216 131 36 / 15%); transform: translateY(-8px); }
.pricing-card.is-current { outline: 2px solid #5DD6AF; outline-offset: 3px; }
.pricing-card h2 { margin: .45rem 0 .2rem; font-size: 2rem; }.pricing-card h2 small { color: var(--brand-gray); font-size: .85rem; }
.pricing-card p { color: var(--brand-gray); min-height: 3.2em; line-height: 1.5; }
.pricing-card ul { list-style: none; padding: 1rem 0; margin: 0 0 auto; border-top: 1px solid #25303F; }
.pricing-card li { position: relative; padding: .44rem 0 .44rem 1.35rem; color: #C5CEDA; font-size: .88rem; line-height: 1.4; }
.pricing-card li::before { content: "✓"; position: absolute; left: 0; color: #5DD6AF; font-weight: 800; }
.pricing-action { display: block; text-decoration: none; text-align: center; margin-top: 1rem; }
.popular-pill { position: absolute; top: -12px; right: 18px; padding: .32rem .7rem; border-radius: 999px; background: #F2A93B; color: #171006; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.trial-note { text-align: center; color: var(--brand-gray); margin: 1.5rem 0; }.account-plan { font-size: 1.2rem; font-weight: 700; }
#manage-billing-btn { margin-left: .65rem; }
.review-grid { display: grid; gap: 1rem; }.review-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }.review-heading strong { font-size: 1.7rem; color: #5DD6AF; white-space: nowrap; }.review-heading small { display: block; color: var(--brand-gray); font-size: .65rem; font-weight: 600; text-align: right; }.review-stats { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.2rem 0; }.review-stats span { padding: .55rem .75rem; background: #0B1119; border: 1px solid #263140; border-radius: 10px; color: var(--brand-gray); font-size: .8rem; }.review-stats b { color: #F3F6FA; }.review-card h3 { font-size: .85rem; color: #F2A93B; text-transform: uppercase; letter-spacing: .08em; }.review-card ol { padding-left: 1.2rem; color: #C5CEDA; }.review-card li { padding: .35rem 0; line-height: 1.5; }
.review-analytics { margin-top: 1.25rem; border-top: 1px solid #283241; padding-top: .4rem; }.review-metric-section { border-bottom: 1px solid #263140; }.review-metric-section > summary { padding: .9rem .2rem; color: #F2A93B; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; }.review-metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; padding: 0 0 1rem; }.review-metric-grid > div { min-width: 0; padding: .7rem; border: 1px solid #263140; border-radius: 10px; background: #0B1119; }.review-metric-grid span,.review-metric-grid strong { display: block; }.review-metric-grid span { min-height: 2.2em; color: var(--brand-gray); font-size: .7rem; line-height: 1.35; }.review-metric-grid strong { margin-top: .3rem; color: #F3F6FA; font-size: .95rem; overflow-wrap: anywhere; }.review-breakdown-table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; font-size: .75rem; }.review-breakdown-table th,.review-breakdown-table td { padding: .55rem; text-align: left; border-bottom: 1px solid #263140; white-space: nowrap; }.review-breakdown-table th { color: #657185; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }.review-breakdown-table td { color: #C5CEDA; }.review-limitations { margin: 0; padding: 0 0 1rem 1.2rem; color: var(--brand-gray); font-size: .78rem; }

/* ---------- Admin analytics ---------- */
.admin-hero { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }.admin-hero h1 { font-size: clamp(2.2rem,5vw,3.6rem); margin: .15em 0; }.admin-hero p { margin: 0; color: var(--brand-gray); }.admin-live { color: #5DD6AF; border: 1px solid rgb(93 214 175 / 30%); background: rgb(93 214 175 / 8%); border-radius: 999px; padding: .45rem .75rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }.metric-card { padding: 1.1rem; border: 1px solid #283241; border-radius: 16px; background: linear-gradient(145deg,#151E2A,#0E151E); }.metric-card span,.metric-card small { display: block; color: var(--brand-gray); font-size: .72rem; }.metric-card strong { display: block; margin: .35rem 0; font-family: var(--font-display); font-size: 2rem; letter-spacing: -.05em; }
.admin-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; }.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }.panel-heading h2 { margin: .2rem 0 0; }.panel-heading > span { color: var(--brand-gray); font-size: .72rem; }
.plan-bars { display: grid; gap: .75rem; }.plan-bars span { display: flex; justify-content: space-between; color: #C5CEDA; font-size: .8rem; }.plan-bars i { position: relative; display: block; height: 7px; margin-top: .35rem; border-radius: 999px; background: #263140; overflow: hidden; }.plan-bars i::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--bar); border-radius:inherit; background:linear-gradient(90deg,#D88324,#F2A93B); }.trial-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:1.1rem; }.trial-grid span { padding:.65rem; background:#0B1119; border-radius:10px; color:var(--brand-gray); font-size:.72rem; }.trial-grid b { color:#F3F6FA; font-size:1rem; }
.usage-split { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }.usage-split > div { padding:1rem; background:#0B1119; border:1px solid #263140; border-radius:12px; }.usage-split span,.usage-split small { display:block; color:var(--brand-gray); font-size:.72rem; }.usage-split strong { display:block; margin:.3rem 0; font-size:2rem; }
.activity-chart { height:190px; display:flex; align-items:stretch; gap:.45rem; padding-top:1rem; border-bottom:1px solid #2A3545; }.activity-day { flex:1; min-width:0; display:flex; flex-direction:column; }.activity-day > div { height:155px; display:flex; align-items:end; justify-content:center; gap:2px; }.activity-day i { width:22%; min-height:3px; border-radius:3px 3px 0 0; }.activity-day span { text-align:center; color:#657185; font-size:.62rem; margin-top:.35rem; }.bar-signups { background:#5DD6AF; }.bar-trades { background:#F2A93B; }.bar-ai { background:#8B91FF; }.chart-legend { display:flex; gap:1rem; justify-content:flex-end; margin-top:.7rem; color:var(--brand-gray); font-size:.68rem; }.chart-legend span::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:.35rem; }.legend-signups::before { background:#5DD6AF; }.legend-trades::before { background:#F2A93B; }.legend-ai::before { background:#8B91FF; }
.table-wrap { overflow-x:auto; }.admin-table { width:100%; border-collapse:collapse; font-size:.8rem; }.admin-table th { color:#657185; text-align:left; text-transform:uppercase; letter-spacing:.08em; font-size:.62rem; padding:.7rem; border-bottom:1px solid #2A3545; }.admin-table td { padding:.8rem .7rem; color:#C5CEDA; border-bottom:1px solid #202A37; }.admin-table td:first-child strong,.admin-table td:first-child small { display:block; }.admin-table td:first-child small { color:#657185; margin-top:.2rem; }.admin-plan-free { background:#263140; color:#B7C0CD; }.admin-plan-basic { background:#263056; color:#C5C9FF; }.admin-plan-pro { background:#3A2C17; color:#F2BD66; }
.admin-telegram-metrics { margin: 0 0 1rem; }.telegram-event-grid { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }.telegram-event-grid span { padding:.5rem .7rem; border:1px solid #263140; border-radius:999px; color:var(--brand-gray); font-size:.72rem; }.telegram-event-grid b { color:#F3F6FA; margin-left:.3rem; }.admin-panel > h3 { margin:1.3rem 0 .55rem; color:#C5CEDA; font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; }

/* ---------- Strategy conversation ---------- */
.interview-panel { max-height: 430px; padding: 1rem; background: #0B1119; border: 1px solid #263140; border-radius: 14px; }
.interview-log { display: flex; flex-direction: column; gap: .8rem; }
.interview-msg { position: relative; max-width: 84%; padding: .75rem .9rem; margin: 0; border-radius: 14px; font-weight: 500; }
.interview-msg-user { align-self: flex-end; background: #D88324; color: #171006; border-bottom-right-radius: 4px; }
.interview-msg-doggo { align-self: flex-start; background: #192331; color: #DCE3EC; border-bottom-left-radius: 4px; }
.interview-input-row { position: sticky; bottom: -1rem; margin: 1rem -1rem -1rem; padding: .85rem; background: rgb(11 17 25 / 96%); border-top: 1px solid #263140; }
.interview-input-row input { min-height: 44px; }
.chat-label { display: block; margin-bottom: .35rem; color: #7E8A9B; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 640px) {
  body { -webkit-text-size-adjust: 100%; }
  .topbar {
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .65rem;
    padding: .65rem .85rem .5rem; align-items: center;
  }
  .topbar .brand { min-width: 0; }
  .topbar .brand-name { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { grid-column: 2; grid-row: 1; gap: .35rem; }
  .topbar-right .btn-text { font-size: .78rem; padding: .5rem; }
  .plan-badge { max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabs {
    grid-column: 1 / -1; grid-row: 2; width: calc(100% + 1.7rem);
    margin: 0 -.85rem; padding: .15rem .85rem .35rem;
    overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;
    scroll-snap-type: inline proximity;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; min-height: 42px; padding: .55rem .9rem; scroll-snap-align: start; }
  .app-main { width: 100%; padding: 1.35rem .8rem 3rem; }
  .view-header { margin-bottom: 1rem; }
  .view-header h1 { font-size: 1.8rem; }
  .card { padding: 1rem; border-radius: 13px; margin-bottom: .85rem; }
  .form-row, .form-actions, .close-trade-form .form-row { flex-direction: column; align-items: stretch; }
  .form-actions > button, .close-trade-form button { width: 100%; min-height: 46px; }
  input, select, textarea { width: 100%; min-height: 44px; }
  .trade-card-header, .strategy-card-header { align-items: flex-start; flex-wrap: wrap; }
  .trade-card-body { gap: .55rem 1rem; }
  .trade-thumb { width: 100%; }
  .image-slot-row { align-items: stretch; flex-direction: column; gap: .45rem; padding: .7rem 0; }
  .image-slot-label { flex-basis: auto; }
  .image-slot-input { min-height: 44px; display: grid; place-items: center; }
  .signal-weight-row { align-items: flex-start; }
  .interview-msg { max-width: 94%; }
  .interview-input-row { flex-direction: column; }
  .review-heading { flex-direction: column; }
  .review-heading small { text-align: left; }
  .review-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pricing-card { padding: 1.2rem; }
  #manage-billing-btn { display: block; margin: .65rem 0 0; }
}
@media (max-width: 820px) { .pricing-grid { grid-template-columns: 1fr; }.pricing-card-featured { transform: none; } }
@media (max-width: 820px) { .metric-grid { grid-template-columns:1fr 1fr; }.admin-grid { grid-template-columns:1fr; } }
@media (max-width: 520px) { .metric-grid { grid-template-columns:1fr; }.admin-hero { align-items:flex-start; flex-direction:column; }.activity-chart { gap:.2rem; } }

/* ---------- Public landing page ---------- */
html { scroll-behavior: smooth; }
.landing-body { background: #0B1220; overflow-x: hidden; }
.landing-body svg { width: 1.05em; height: 1.05em; stroke-width: 1.8; }
.landing-nav { height: 76px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; position: absolute; inset: 0 0 auto; z-index: 5; color: #fff; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.brand { text-decoration: none; }.brand-light { color: #fff; }.brand-light .brand-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }
.landing-links { display: flex; align-items: center; gap: 2rem; }.landing-links a { color: #D6DCE7; text-decoration: none; font-size: .9rem; font-weight: 600; }.landing-links a:hover { color: #fff; }
.landing-links .nav-cta { background: rgb(255 255 255 / 10%); color: #fff; border: 1px solid rgb(255 255 255 / 18%); padding: .65rem 1rem; border-radius: 999px; backdrop-filter: blur(10px); }
.landing-links { display:flex; align-items:center; gap:1.1rem; }.nav-extension { display:inline-flex; align-items:center; gap:.4rem; padding:.58rem .8rem; border:1px solid rgb(255 255 255 / 18%); border-radius:999px; background:rgb(255 255 255 / 8%); }.nav-extension svg { width:16px; height:16px; }.google-button-top { min-width:116px; min-height:32px; display:flex; align-items:center; }
.hero-section { min-height: 760px; height: 92vh; max-height: 940px; position: relative; display: grid; align-items: center; overflow: hidden; color: #fff; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: hero-drift 18s ease-in-out infinite alternate; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(6,13,24,.99) 0%,rgba(6,13,24,.92) 32%,rgba(6,13,24,.35) 66%,rgba(6,13,24,.12)),linear-gradient(0deg,rgba(6,13,24,.82),transparent 40%); }
.hero-content { position: relative; z-index: 2; width: min(1180px,90vw); margin: 60px auto 0; }.hero-content > * { opacity: 0; }
.eyebrow { color: #F3B95E; font-weight: 700; font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; display: flex; align-items: center; gap: .65rem; }.eyebrow span { display: inline-block; width: 34px; height: 1px; background: currentColor; }.eyebrow.dark { color: var(--brand-primary-dark); }
.hero-content h1 { font-size: clamp(3.3rem,7vw,6.8rem); line-height: .95; max-width: 820px; margin: .3em 0 .28em; letter-spacing: -.065em; }.hero-copy { max-width: 610px; font-size: clamp(1rem,1.5vw,1.2rem); color: #C7CFDC; line-height: 1.65; }
.hero-actions { display: flex; gap: .8rem; margin-top: 2rem; flex-wrap: wrap; }.button { min-height: 50px; padding: 0 1.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; text-decoration: none; font-weight: 700; font-size: .92rem; transition: transform .2s,background .2s; }.button:hover { transform: translateY(-2px); }.button-primary { color: #181005; background: #F2A93B; box-shadow: 0 12px 30px rgb(242 169 59 / 25%); }.button-ghost { color: #fff; border: 1px solid rgb(255 255 255 / 18%); background: rgb(255 255 255 / 6%); backdrop-filter: blur(12px); }
.trust-row { margin-top: 2.3rem; padding-top: 1.2rem; border-top: 1px solid rgb(255 255 255 / 10%); display: flex; gap: 1.6rem; color: #A8B2C1; font-size: .78rem; }.trust-row span { display: flex; align-items: center; gap: .45rem; }.trust-row svg { color: #66D9B5; }
.story-section { padding: 110px max(5vw,24px); background: #F6F3EC; }.section-heading { max-width: 720px; margin: 0 auto 56px; text-align: center; }.section-heading .eyebrow { justify-content: center; }.section-heading h2,.workflow-copy h2,.signin-copy h2 { font-size: clamp(2.2rem,4vw,4rem); line-height: 1.08; margin: .45em 0 .3em; }.section-heading > p:last-child,.workflow-copy > p,.signin-copy > p { color: var(--brand-gray); font-size: 1.04rem; line-height: 1.65; }
.feature-grid { width: min(1180px,100%); margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.feature-card { position: relative; background: #FFFEFA; border: 1px solid #E3DED3; padding: 32px; min-height: 320px; border-radius: 20px; box-shadow: 0 18px 50px rgb(16 24 39 / 5%); transition: transform .25s,border-color .25s; }.feature-card:hover { transform: translateY(-5px); border-color: #E0B56C; }.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #FFF0D5; color: #A95E12; }.feature-icon svg { width: 23px; height: 23px; }.feature-number { position: absolute; top: 28px; right: 30px; color: #C9C1B4; font-family: var(--font-display); font-weight: 800; }.feature-card h3 { font-family: var(--font-display); font-size: 1.28rem; margin: 2.2rem 0 .7rem; }.feature-card > p:last-child { color: var(--brand-gray); line-height: 1.65; font-size: .93rem; }
.workflow-section { padding: 110px max(5vw,24px); color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px,8vw,120px); align-items: center; background: radial-gradient(circle at 80% 20%,#183047 0,transparent 36%),#0B1220; }.workflow-copy { max-width: 570px; justify-self: end; }.workflow-copy > p { color: #A9B5C5; }.workflow-list { list-style: none; padding: 0; margin: 2rem 0 0; }.workflow-list li { display: flex; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgb(255 255 255 / 10%); }.workflow-list li > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #F2A93B; color: #F2A93B; border-radius: 50%; font-size: .8rem; font-weight: 800; }.workflow-list strong,.workflow-list small { display: block; }.workflow-list small { color: #8390A2; margin-top: .18rem; }
.product-preview { width: min(480px,100%); background: #121D2C; border: 1px solid #26364A; border-radius: 22px; padding: 18px; box-shadow: 0 32px 80px rgb(0 0 0 / 30%); transform: rotate(1deg); }.preview-top { display: flex; justify-content: space-between; align-items: center; color: #AAB4C2; font-size: .78rem; padding: 0 0 14px; }.preview-dots { color: #516277; letter-spacing: .15rem; }.preview-chart { height: 210px; border-radius: 13px; position: relative; overflow: hidden; background: repeating-linear-gradient(0deg,transparent 0 39px,#253246 40px),repeating-linear-gradient(90deg,transparent 0 64px,#253246 65px),linear-gradient(135deg,#101A29,#18283A); }.chart-line { position: absolute; inset: 18% 8%; clip-path: polygon(0 75%,10% 64%,20% 70%,29% 45%,39% 55%,49% 25%,57% 35%,66% 16%,76% 28%,87% 8%,100% 16%,100% 22%,87% 14%,76% 34%,66% 23%,57% 41%,49% 31%,39% 62%,29% 52%,20% 77%,10% 70%,0 82%); background: linear-gradient(90deg,#66D9B5,#F2A93B); }.chart-badge { position: absolute; top: 12px; left: 12px; background: rgb(5 12 21 / 76%); padding: .35rem .5rem; border-radius: 6px; font-size: .7rem; color: #D4DCE7; }.score-row { display: flex; justify-content: space-between; align-items: center; padding: 22px 8px 12px; }.score-row small { display: block; color: #7F8DA0; font-size: .65rem; letter-spacing: .13em; }.score-row strong { font-size: 2.8rem; font-family: var(--font-display); }.score-row strong span { font-size: 1rem; color: #66D9B5; }.score-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#66D9B5 84%,#29384B 0); position: relative; }.score-ring:after { content:""; position:absolute; inset:6px; border-radius:50%; background:#121D2C; }.score-ring span { z-index: 1; font-weight: 800; font-size: .8rem; }.rule-bars { display: grid; gap: 12px; padding: 8px; }.rule-bars span { font-size: .72rem; color: #AAB5C4; position: relative; padding-bottom: 8px; }.rule-bars span:before,.rule-bars span:after { content:""; position:absolute; left:0; bottom:0; height:3px; border-radius:3px; }.rule-bars span:before { width:100%; background:#2A3748; }.rule-bars span:after { width:var(--fill); background:linear-gradient(90deg,#66D9B5,#F2A93B); }.preview-note { display: flex; gap: .5rem; color: #7F8DA0; font-size: .68rem; line-height: 1.45; padding: 12px 8px 2px; }
.signin-section { padding: 110px max(5vw,24px); background: #EEE9DF; display: grid; grid-template-columns: minmax(0,620px) minmax(340px,450px); justify-content: center; gap: clamp(50px,9vw,130px); align-items: center; }.signin-copy .legal-note { font-size: .78rem; padding: .9rem 1rem; border-left: 3px solid #D88324; background: rgb(255 255 255 / 55%); display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.5rem; }.signin-card { text-align: center; background: #FFFEFA; padding: 42px; border-radius: 24px; border: 1px solid #DED7CA; box-shadow: 0 28px 70px rgb(16 24 39 / 10%); }.signin-mark img { border-radius: 16px; box-shadow: 0 10px 30px rgb(216 131 36 / 18%); }.signin-kicker { color: #A95E12; letter-spacing: .12em; font-size: .67rem; font-weight: 800; margin-top: 1.3rem; }.signin-card h2 { font-size: 1.8rem; margin: .3rem 0; }.signin-card > p:not(.signin-kicker,.signin-fineprint,.signin-legal,.auth-error) { color: var(--brand-gray); }.google-button { display: flex; justify-content: center; min-height: 44px; margin: 1.7rem 0 1.2rem; }.signin-fineprint { color: #8B918F; font-size: .7rem; display: flex; justify-content: center; gap: .4rem; align-items: center; }.signin-legal { margin:.6rem 0 0; color:#8B918F; font-size:.68rem; line-height:1.5; }.signin-legal a { color:#8C5518; font-weight:700; }
.landing-footer { color: #8F9BAD; background: #080E18; min-height: 120px; padding: 30px 5vw; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; font-size: .75rem; border-top: 1px solid #182231; }.landing-footer p:last-child { text-align:right; }.footer-legal { display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; }.footer-legal a { color:#B5BECC; text-decoration:none; }.footer-legal a:hover { color:#F2A93B; }

/* ---------- Public legal pages ---------- */
.legal-body { min-height:100vh; background:#0B1220; color:#D9E0EA; }.legal-nav { min-height:72px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #202B3A; background:rgb(8 14 24 / 92%); }.legal-nav-links { display:flex; gap:1.1rem; }.legal-nav-links a { color:#9CA8B8; text-decoration:none; font-size:.78rem; font-weight:700; }.legal-nav-links a[aria-current="page"],.legal-nav-links a:hover { color:#F2A93B; }.legal-main { width:min(780px,calc(100% - 40px)); margin:0 auto; padding:72px 0 90px; }.legal-eyebrow { color:#F2A93B; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:800; }.legal-main h1 { margin:.25em 0 .2em; color:#FFF; font-size:clamp(2.5rem,7vw,4.5rem); line-height:1; }.legal-updated { color:#768397; font-size:.8rem; margin-bottom:2.5rem; }.legal-summary { margin-bottom:2.5rem; padding:1.1rem 1.2rem; color:#C7D0DD; border:1px solid #293547; border-left:4px solid #D88324; border-radius:12px; background:#111A27; line-height:1.65; }.legal-section { padding:1.5rem 0; border-top:1px solid #202B3A; }.legal-section h2 { color:#F4F7FB; font-size:1.25rem; letter-spacing:-.02em; }.legal-section h3 { color:#E8EDF4; font-size:1rem; margin-top:1.4rem; }.legal-section p,.legal-section li { color:#AEB9C8; line-height:1.75; font-size:.92rem; }.legal-section ul { padding-left:1.2rem; }.legal-section a { color:#F2B554; }.legal-callout { padding:1rem; background:rgb(93 214 175 / 7%); border:1px solid rgb(93 214 175 / 22%); border-radius:10px; }.legal-footer { padding:28px 5vw; border-top:1px solid #202B3A; display:flex; justify-content:space-between; gap:1rem; color:#768397; font-size:.72rem; }.legal-footer nav { display:flex; gap:1rem; }.legal-footer a { color:#AEB9C8; text-decoration:none; }
.public-pricing-main { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:72px 0 90px; }
.public-pricing-hero { max-width:760px; margin:0 auto 54px; text-align:center; }
.public-pricing-hero h1 { margin:.25em 0 .2em; color:#FFF; font-size:clamp(2.7rem,7vw,5rem); line-height:1; }
.public-pricing-hero p { color:#AEB9C8; line-height:1.7; }
.public-pricing-hero .legal-eyebrow { display:block; }
.public-pricing-main .pricing-card h2 { color:#FFF; }
.public-pricing-main .pricing-card p { min-height:0; }
.pricing-disclosure { max-width:820px; margin:38px auto 0; padding:1.2rem 1.35rem; border:1px solid #293547; border-radius:14px; background:#111A27; color:#AEB9C8; font-size:.86rem; line-height:1.7; }
.pricing-disclosure strong { color:#F4F7FB; }
.pricing-disclosure a { color:#F2B554; }
@keyframes hero-drift { to { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hero-art { animation: none; }.hero-content > * { opacity:1; } }
@media (max-width: 820px) { .landing-links > a:not(.nav-extension) { display:none; }.nav-extension span { display:none; }.hero-section { min-height: 740px; }.hero-art { object-position: 63% center; }.hero-scrim { background: linear-gradient(90deg,rgba(6,13,24,.97),rgba(6,13,24,.55)),linear-gradient(0deg,rgba(6,13,24,.9),transparent); }.hero-content h1 { font-size: clamp(3.1rem,15vw,5rem); }.trust-row { flex-wrap:wrap; gap: .8rem 1.2rem; }.feature-grid,.workflow-section,.signin-section { grid-template-columns:1fr; }.workflow-copy { justify-self:start; }.product-preview { margin:auto; }.landing-footer { grid-template-columns:1fr; text-align:center; gap:.8rem; }.landing-footer .brand { justify-content:center; }.landing-footer p:last-child { text-align:center; }.legal-nav { padding:14px 20px; align-items:flex-start; gap:1rem; flex-direction:column; }.legal-nav-links { width:100%; overflow-x:auto; padding-bottom:3px; }.legal-footer { flex-direction:column; } }
@media (max-width: 520px) { .landing-nav { padding:0 14px; }.brand-name { display:none; }.landing-links { gap:.45rem; }.nav-extension { padding:.48rem; }.hero-content { width:calc(100% - 40px); }.hero-copy { font-size:.96rem; }.hero-actions .button { width:100%; }.trust-row span { width:100%; }.story-section,.workflow-section,.signin-section { padding-top:78px; padding-bottom:78px; }.feature-card { min-height:auto; }.signin-card { padding:32px 20px; }.product-preview { padding:12px; }.preview-chart { height:175px; } }

/* ---------- Public content, blog and free tools ---------- */
.content-body { margin:0; min-height:100vh; background:#F6F3EC; color:#192231; font-family:var(--font-body); }
.content-nav { min-height:72px; padding:0 max(5vw,20px); display:flex; align-items:center; justify-content:space-between; gap:24px; background:#0B1220; border-bottom:1px solid #202B3A; }
.content-nav nav { display:flex; align-items:center; gap:1.2rem; }.content-nav nav a { color:#B8C2D0; text-decoration:none; font-size:.85rem; font-weight:700; }.content-nav nav a:hover,.content-nav nav a[aria-current="page"] { color:#F2B554; }
.content-main,.tool-main,.article-main { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:72px 0 96px; }
.content-hero { max-width:790px; margin-bottom:46px; }.content-hero h1,.article-header h1 { margin:.2em 0; font-family:var(--font-display); font-size:clamp(2.5rem,7vw,4.8rem); line-height:1.02; letter-spacing:-.05em; }.content-hero>p:last-child,.article-deck { color:#596474; font-size:1.08rem; line-height:1.7; }
.content-kicker { color:#A95E12; font-weight:800; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; }.content-meta { color:#788291; font-size:.8rem; }
.content-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.content-card { padding:30px; background:#FFFEFA; border:1px solid #E2DDD2; border-radius:18px; box-shadow:0 16px 42px rgb(15 23 42 / 5%); }.content-card h2 { margin:.3em 0; font-family:var(--font-display); font-size:1.45rem; }.content-card h2 a { color:#192231; text-decoration:none; }.content-card>p:not(.content-kicker,.content-meta) { color:#606A78; line-height:1.65; }.text-link,.article-content a { color:#955510; font-weight:700; }
.content-footer { padding:34px max(5vw,20px); display:flex; justify-content:space-between; gap:30px; color:#98A4B5; background:#080E18; font-size:.78rem; line-height:1.6; }.content-footer p { max-width:760px; }.content-footer nav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }.content-footer a { color:#C4CBD5; text-decoration:none; }
.breadcrumbs { display:flex; gap:.5rem; align-items:center; overflow:hidden; color:#788291; font-size:.78rem; margin-bottom:42px; }.breadcrumbs a { color:#955510; }.breadcrumbs span:last-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.article-main { width:min(840px,calc(100% - 40px)); }.article-header { padding-bottom:34px; border-bottom:1px solid #DCD6CA; }.article-content { max-width:720px; margin:42px auto 0; font-size:1rem; line-height:1.8; }.article-content h2 { margin:2.2em 0 .45em; font-family:var(--font-display); font-size:1.75rem; line-height:1.2; }.article-content h3 { margin:1.7em 0 .35em; font-size:1.15rem; }.article-content p,.article-content li { color:#465160; }.article-content blockquote,.article-callout,.quick-answer { margin:1.5rem 0; padding:1rem 1.2rem; border-left:4px solid #D88324; background:#FFFEFA; border-radius:10px; }.quick-answer h2 { margin-top:0; }.article-content pre { overflow:auto; padding:1rem; color:#E4E9F0; background:#111A27; border-radius:10px; }.article-content img { display:block; max-width:100%; height:auto; border-radius:12px; }.article-content figcaption { color:#788291; font-size:.75rem; }.article-content hr { margin:2.5rem 0; border:0; border-top:1px solid #DCD6CA; }
.article-cta { margin:3rem 0 1.5rem; padding:28px; color:#F4F7FB; background:#111A27; border-radius:18px; }.article-cta h2 { margin-top:0; }.article-cta p { color:#BAC3CF; }.article-disclaimer { font-size:.78rem; }.not-found { min-height:50vh; display:grid; place-content:center; justify-items:start; }
.tool-main { width:min(960px,calc(100% - 40px)); }.tool-panel { padding:clamp(20px,4vw,42px); background:#FFFEFA; border:1px solid #DED8CD; border-radius:20px; box-shadow:0 22px 56px rgb(15 23 42 / 7%); }.tool-panel-head,.tool-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }.tool-panel-head h2 { margin:0; }.tool-panel-head p { color:#788291; }.button-secondary { border:1px solid #CFC8BA; color:#334052; background:#FFF; cursor:pointer; }
.check-group { margin:26px 0 0; padding:0; border:0; }.check-group legend { margin-bottom:10px; color:#A95E12; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.check-item { display:flex; align-items:flex-start; gap:12px; padding:12px 4px; border-bottom:1px solid #ECE8E0; cursor:pointer; }.check-item input { flex:0 0 auto; width:22px; height:22px; margin:0; accent-color:#C9751A; }.score-panel { margin-top:30px; padding:24px; text-align:center; color:#DDE4EC; background:#111A27; border-radius:16px; }.score-panel p { margin:.25rem; }.score-number { color:#F2B554; font-family:var(--font-display); font-size:3rem; font-weight:800; }
.tool-copy { margin-top:64px; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.form-field { display:grid; gap:7px; }.form-field-wide { grid-column:1/-1; }.form-field label { font-weight:700; font-size:.84rem; }.form-field input,.form-field select,.form-field textarea { width:100%; box-sizing:border-box; padding:.8rem; color:#192231; background:#FFF; border:1px solid #CFC8BA; border-radius:9px; font:inherit; }.form-field textarea { resize:vertical; }.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.button:focus-visible { outline:3px solid rgb(216 131 36 / 35%); outline-offset:2px; border-color:#C9751A; }.tool-actions { justify-content:flex-start; margin-top:26px; }.rulebook { padding:4px; }.rulebook h2 { font-size:2rem; }.rulebook section { padding:12px 0; border-top:1px solid #E5E0D7; }.rulebook section h3 { color:#A95E12; font-size:.78rem; letter-spacing:.08em; }
@media (max-width:760px) { .content-nav { padding:14px 20px; align-items:flex-start; flex-direction:column; }.content-nav nav { width:100%; overflow-x:auto; padding-bottom:4px; }.content-nav .nav-extension { display:none; }.content-grid,.form-grid { grid-template-columns:1fr; }.form-field-wide { grid-column:auto; }.content-footer { flex-direction:column; }.content-main,.tool-main,.article-main { padding-top:48px; }.tool-panel { border-radius:14px; }.tool-panel-head { align-items:flex-start; flex-direction:column; } }
@media print { .content-nav,.content-footer,.content-hero,.tool-copy,#rules-form,.rulebook .tool-actions { display:none!important; }.content-body,.tool-panel { background:#FFF; box-shadow:none; border:0; }.tool-main { width:100%; padding:0; }.rulebook { display:block!important; } }