:root { color-scheme: light; font: 15px/1.5 Arial, sans-serif; color: #202925; background: #f5f7f5; }
* { box-sizing: border-box; letter-spacing: 0; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid #1d779f; outline-offset: 3px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 36px; background: #111a15; color: #f4faf4; border-bottom: 3px solid #c0f54f; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 16px; font-weight: 800; }
.brand > svg { width: 28px; height: 28px; color: #c0f54f; }
.brand small { color: #aeb9b1; margin-left: 14px; font-size: 10px; font-weight: 500; }
.site-link { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 13px; }
main { min-height: calc(100dvh - 155px); }
.page-status { max-width: 1100px; margin: 20px auto; padding: 0 24px; }
.login { max-width: 432px; padding: 52px 24px 80px; margin: 0 auto; }
.lock { display: grid; place-items: center; background: #e3eedb; color: #335a24; width: 48px; height: 48px; border-radius: 8px; margin-bottom: 28px; }
.lock svg { width: 24px; height: 24px; }
.eyebrow { color: #637068; font-size: 11px; font-weight: 700; margin: 0 0 9px; }
h1 { font-size: 30px; line-height: 1.2; font-weight: 700; margin: 0 0 28px; }
h2 { font-size: 17px; line-height: 1.3; margin: 0 0 8px; }
form label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600; }
input:not([type=radio]) { width: 100%; height: 46px; background: #fff; border: 1px solid #9ca8a0; border-radius: 5px; padding: 10px 12px; color: #17241b; }
.primary { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; padding: 11px 18px; border: 1px solid #163c25; border-radius: 5px; background: #173d29; color: #fff; font-weight: 700; font-size: 14px; }
.primary:hover:not(:disabled) { background: #245839; }
.login .primary { width: 100%; margin-top: 24px; }
.quiet { color: #677269; font-size: 13px; line-height: 1.6; }
.form-status { margin: 12px 0 0; font-size: 13px; color: #395b44; min-height: 20px; }
.form-status.error, .page-status.error { color: #9b2533; }
.text-button { background: none; border: 0; padding: 8px 0; text-decoration: underline; color: #75432b; }
.admin-layout { display: grid; grid-template-columns: 225px minmax(0,1fr); max-width: 1320px; margin: auto; }
.sidebar { padding: 36px 22px 28px; border-right: 1px solid #dde3de; display: flex; flex-direction: column; gap: 18px; }
.sidebar nav { display: grid; gap: 6px; }
.sidebar nav button { display: flex; align-items: center; gap: 12px; background: none; border: 0; border-radius: 5px; color: #536157; padding: 12px; text-align: left; font-size: 14px; }
.sidebar nav button[aria-current=page] { background: #e3eddd; color: #1e4d2c; font-weight: 700; }
.account { margin-top: auto; padding-top: 60px; font-size: 12px; color: #677269; overflow-wrap: anywhere; }
.account button { display: block; margin-top: 12px; background: none; border: 0; padding: 0; color: #273c30; text-decoration: underline; }
.workspace { padding: 40px 48px 60px; max-width: 1000px; width: 100%; }
.section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.status-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #bed5c4; background: #edf6ee; border-radius: 4px; color: #285a38; font-size: 12px; white-space: nowrap; }
.status-tag > span { width: 6px; height: 6px; border-radius: 50%; background: #388b4b; }
.mode-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; padding: 18px 0; border-top: 1px solid #d7dfd8; border-bottom: 1px solid #d7dfd8; font-size: 13px; color: #667269; }
.mode-summary strong { color: #163b24; font-size: 18px; }
.mode-summary[data-mode=sandbox] strong { color: #795416; }
#mode-account { margin-left: auto; }
.settings-section { margin-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #dce2dc; }
.section-label { margin-bottom: 18px; }
.section-label p { margin: 0; color: #667269; font-size: 13px; line-height: 1.6; }
.mode-control { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; padding: 0; margin: 0; }
.mode-control label { display: flex; align-items: center; gap: 12px; border: 1px solid #aab7ae; border-radius: 6px; margin: 0; padding: 16px; background: #fff; cursor: pointer; }
.mode-control label:has(input:checked) { border: 2px solid #356a42; padding: 15px; background: #edf5e9; }
.mode-control label:has([value=sandbox]:checked) { border-color: #b38c28; background: #fff9df; }
.mode-control input { width: 17px; height: 17px; margin: 0; accent-color: #356a42; }
.mode-control strong, .mode-control small { display: block; }
.mode-control strong { font-size: 15px; }
.mode-control small { color: #637068; font-size: 12px; font-weight: 400; margin-top: 3px; }
.mode-control svg { margin-left: auto; color: #56715c; }
.notice { font-size: 13px; line-height: 1.6; color: #735326; background: #fff8e3; border-left: 3px solid #c8a14c; padding: 12px 16px; margin: 18px 0; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-actions .form-status { margin: 0; }
.page-list > * { display: grid; grid-template-columns: minmax(0,1fr) auto 130px; align-items: center; gap: 16px; border-top: 1px solid #e1e5e1; padding: 16px 0; text-decoration: none; font-size: 13px; }
.page-list a:hover strong { text-decoration: underline; }
.page-list strong, .page-list small { display: block; }
.page-list small { font-size: 12px; color: #6b766d; margin-top: 4px; }
.page-list svg { justify-self: end; }
.page-list b { font-size: 14px; white-space: nowrap; }
.route { font-size: 11px; color: #738077; text-align: right; }
.test-details { display: flex; flex-wrap: wrap; gap: 20px 40px; }
.test-details dt { color: #6a746d; font-size: 12px; }
.test-details dd { margin: 6px 0 0; font-size: 15px; font-weight: 700; }
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid #e4e7e4; font-size: 12px; }
.activity-list time { color: #6c776f; white-space: nowrap; }
.password-form { max-width: 460px; }
.password-form .primary { margin-top: 24px; }
.admin-footer { display: flex; justify-content: space-between; gap: 16px; padding: 22px 36px; border-top: 1px solid #dce3dd; color: #778279; font-size: 11px; }
.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:800px) { .workspace { padding: 30px 24px 50px; } .admin-layout { grid-template-columns: 180px minmax(0,1fr); } .sidebar { padding: 30px 14px; } .section-heading { flex-wrap: wrap; margin-bottom: 20px; } .section-heading h1 { margin-bottom: 0; } .page-list > * { grid-template-columns: minmax(0,1fr) auto 22px; } .route { display: none; } .page-list > div { grid-template-columns: minmax(0,1fr) auto; } }
@media(max-width:600px) { .topbar { padding: 18px 20px; } .brand small { display: none; } .brand { font-size: 14px; } .site-link { font-size: 12px; } .admin-layout { display: block; } .sidebar { border-right: 0; border-bottom: 1px solid #dce3dd; padding: 12px 20px; flex-direction: row; gap: 12px; align-items: center; } .sidebar>.eyebrow { display: none; } .sidebar nav { display: flex; gap: 4px; } .sidebar nav button { gap: 7px; padding: 10px; font-size: 12px; } .sidebar nav svg { width: 16px; height: 16px; } .account { margin: 0 0 0 auto; padding: 0; text-align: right; } .account > span { display: none; } .account button { margin: 0; font-size: 12px; } .workspace { padding: 28px 20px 40px; } h1 { font-size: 27px; } .mode-control { grid-template-columns: 1fr; gap: 10px; } .mode-control label { padding: 14px; } .mode-control label:has(input:checked) { padding: 13px; } .mode-summary { gap: 6px 12px; } .mode-summary>span:first-child { width: 100%; } .mode-summary strong { font-size: 17px; } .activity-list li { display: block; } .activity-list time { display: block; margin-top: 4px; } .admin-footer { padding: 20px; } .page-list > * { gap: 12px; } }
.lead-filters { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
.lead-filters select { max-width: 100%; padding: 10px; border: 1px solid #cbd4cd; border-radius: 4px; background: #fff; color: #263b2c; }
.lead-row { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr); gap: 20px; padding: 20px 0; border-top: 1px solid #dce3dd; font-size: 13px; }
.lead-row strong, .lead-row span, .lead-row time { display: block; overflow-wrap: anywhere; }
.lead-row span, .lead-row time { color: #5c6b61; margin-top: 5px; font-size: 12px; }
.lead-state { color: #865900; }
.lead-state[data-state=paid] { color: #197546; }
#refresh-leads { min-width: 80px; height: 40px; display: grid; place-items: center; border: 1px solid #cbd4cd; border-radius: 4px; background: white; }
@media(max-width:600px) { .lead-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; } .lead-row > :last-child { grid-column: 1/-1; } .sidebar { flex-wrap: wrap; } .sidebar nav { flex-wrap: wrap; } }