/* Shared UI finish. Generated banner canvases retain their own visual styles. */
:root {
    --primary-color: #245b50;
    --primary-hover: #19463d;
    --secondary-color: #64716e;
    --dark-color: #202d29;
    --border-color: #e1e8e5;
    --border-color-strong: #cbd5d0;
    --light-color: #f5f8f6;
    --border-radius: 16px;
}
body { background: #f5f7f6; color: #26342f; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #81b9aa; outline-offset: 3px;
}
.btn { min-height: 42px; padding: 10px 18px; line-height: 1.5; border-radius: 9px; font-weight: 600; gap: 2px; }
.btn-primary { box-shadow: 0 2px 3px #163c3210; }
.btn-secondary, .btn-action { background: #fff; border-color: #d8e1dd; color: #40564d; }
.btn-secondary:hover, .btn-action:hover { background: #f0f5f2; border-color: #b4c9bf; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-sm { min-height: 36px; padding: 7px 12px; }
.card { border-color: #e1e8e5; box-shadow: 0 3px 14px #243b2f04; margin-bottom: 24px; }
.card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 26px 16px; border-bottom: 1px solid #edf1ee; }
.card-header h3 { font-size: 15px; line-height: 1.7; letter-spacing: .01em; }
.card-header h3 > i { color: #537a69; margin-right: 7px; }
.card-body { padding: 24px 26px 26px; }
.api-description, .loading-placeholder { line-height: 1.85; color: #65736b; font-size: 13px; }
.loading-placeholder { padding: 10px 0; }
.topbar { background: #ffffff; border-color: #e1e8e5; }
.topbar-row { padding-top: 22px; padding-bottom: 20px; gap: 20px; }
.topbar-icon { border-radius: 13px; width: 44px; height: 44px; background: #245b50; }
.topbar-name { letter-spacing: .025em; }
.topbar-tagline { margin-top: 3px; font-size: 11px; letter-spacing: .04em; }
.header-actions { gap: 8px; flex-wrap: wrap; }
.last-updated { font-size: 11px; color: #75817b; margin-left: 8px; }
.nav-links { gap: 8px; }
.nav-links li a { padding: 13px 18px; font-size: 13px; border-radius: 8px 8px 0 0; }
.nav-links li.active a { background: #f0f6f2; color: #245b50; border-bottom-color: #245b50; font-weight: 700; }
.nav-links li a:hover { background: #f6f9f7; }
.main-content { padding-top: 34px; padding-bottom: 64px; }
.header-title { margin-bottom: 25px; }
.header-title h2 { font-size: 23px; letter-spacing: .02em; line-height: 1.5; }
.api-badge { font-size: 11px; padding: 5px 11px; letter-spacing: .02em; }
.badge-ok { background: #e8f4ed; color: #2d6749; }
.option-group { margin-bottom: 22px; }
.option-group label { display: block; margin-bottom: 8px; font-size: 13px; color: #43564c; font-weight: 600; }
.option-group input:not([type=radio]):not([type=checkbox]), .option-group select, .option-group textarea,
.clinic-input, .api-key-input input, #campaign-name, #campaign-text-preview, #reel-script-preview {
    width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid #d5dfd9; border-radius: 9px;
    background: #fff; color: #26342f; font-size: 14px; line-height: 1.6; transition: border-color .15s, box-shadow .15s;
}
.option-group input:hover, .option-group select:hover, .clinic-input:hover { border-color: #aebfb5; }
input::placeholder, textarea::placeholder { color: #7e8983; }
input[readonly] { background: #f4f7f5; color: #63716a; }
#campaign-text-preview, #reel-script-preview { line-height: 1.9; resize: vertical; padding: 18px; }
.cp-section { gap: 24px; }
.cp-section > *, .clinic-info-row, .option-group { min-width: 0; }
.campaign-actions, .clinic-info-actions, .api-actions { gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.campaign-list-row { padding: 22px 0; }
.campaign-list-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.campaign-list-row p { line-height: 1.9; }
.campaign-list-heading .api-description { margin-top: 6px; margin-bottom: 0; }
#campaign-save-status { font-size: 12px; }
.settings-section { margin-bottom: 28px; }
.clinic-info-row { gap: 18px; }
.extract-status { line-height: 1.75; border-radius: 9px; font-size: 13px; }
.rank-item { padding: 12px 8px; margin-bottom: 2px; border-bottom: 1px solid #f0f3f1; }
.rank-item:last-child { border-bottom: 0; }
.rank-item-clickable:hover { background: #f4f8f5; }
.rank-name { color: #35483d; }
.rank-badge { border-radius: 9px; }
.rank-bar { background: #709a81; }
.rank-posts-btn { border-radius: 7px; }
.guide-modal { border-radius: 18px; box-shadow: 0 20px 80px #18382b26; }
.reel-result { border-color: #dce5df; border-radius: 12px; }
/* Authentication: same fields and flow, with a clearer visual hierarchy. */
.auth-page { min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, #e8f0eb 0%, #f5f7f6 65%); }
.auth-page .auth-wrap { width: 100%; max-width: 480px; margin: 0 auto; padding: 64px 24px 48px; }
.auth-page.signup-page .auth-wrap { max-width: 540px; padding-top: 40px; }
.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: #245b50; color: white; border-radius: 14px; margin-bottom: 10px; }
.auth-brand-name { font-size: 12px; color: #4f675c; font-weight: 600; letter-spacing: .08em; }
.auth-heading { text-align: center; margin-bottom: 25px; }
.auth-heading h1 { font-size: 24px; color: #243b2e; letter-spacing: .015em; margin-bottom: 8px; }
.auth-heading p { font-size: 13px; color: #6b786f; line-height: 1.8; }
.auth-page .card { box-shadow: 0 8px 36px #243b2f06; }
.auth-page .card-body { display: flex; flex-direction: column; gap: 24px; padding: 30px; }
.auth-page form { display: flex; flex-direction: column; gap: 22px; }
.auth-page label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 13px; }
.auth-page input { min-height: 46px; }
.auth-page form > .btn { width: 100%; min-height: 46px; margin-top: 2px; }
.auth-help { margin-top: 8px; font-size: 11px; color: #6a7870; line-height: 1.8; }
.auth-switch { border-top: 1px solid #e8ede9; padding-top: 22px; text-align: center; font-size: 12px; line-height: 1.9; }
.auth-switch a { color: #245b50; font-weight: 600; text-underline-offset: 4px; }
.auth-plan-box { background: #f2f7f3; border: 1px solid #dce8df; border-radius: 10px; padding: 18px; font-size: 13px; line-height: 1.9; }
.auth-plan-box strong { color: #365840; }
.auth-plan-box ul { padding-left: 18px; margin-top: 7px; }
#signup-unavailable-banner { display: none; background: #fff7e7; border: 1px solid #efdcac; color: #825f21; border-radius: 10px; padding: 15px 18px; margin-bottom: 20px; font-size: 13px; line-height: 1.8; }
.admin-page .card-header { border-color: #edf1ee; }
.admin-page input, .admin-page select { border-color: #d5dfd9; border-radius: 9px; }
.admin-page .admin-heading h1 { font-size: 25px; color: #263b2e; }
#ai-status { background: #f1f6f2; color: #52685a; }
@media (max-width: 768px) {
    .topbar-row { padding: 18px 18px 14px; }
    .topnav { padding: 0 12px; }
    .nav-links { gap: 2px; }
    .nav-links li a { padding: 12px; font-size: 12px; }
    .main-content { padding: 24px 16px 40px; }
    .card-header, .card-body { padding: 18px; }
    .card-header { padding-bottom: 14px; }
    .header-title h2 { font-size: 21px; }
    .clinic-info-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .clinic-info-row label { width: auto; }
    .cp-section { gap: 16px; }
    .date-range-picker { flex-wrap: wrap; }
    .date-range-picker input[type=date] { flex: 1 1 130px; min-width: 0; }
    .keyword-categories { grid-template-columns: minmax(0,1fr); }
    .auth-page .auth-wrap { padding: 36px 20px; }
    .auth-page.signup-page .auth-wrap { padding-top: 28px; }
    .auth-page .card-body { padding: 24px; }
    .auth-heading h1 { font-size: 22px; }
    .auth-page input, .option-group input, .option-group select, .option-group textarea, .clinic-input { font-size: 16px; }
    .campaign-list-row { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 600px) {
    .nav-links { width: 100%; gap: 0; }
    .nav-links li { flex: 1; }
    .nav-links li a { justify-content: center; padding: 12px 6px; white-space: nowrap; font-size: 11px; }
    .nav-links li a i { margin-right: 5px; }
    .campaign-name-label { min-width: 0; flex-basis: 100%; }
}
.billing-consent { display:flex; gap:10px; align-items:flex-start; line-height:1.8; font-size:13px; }
.auth-page .billing-consent input, .billing-consent input { width:18px; min-height:18px; flex:none; margin-top:4px; }
.billing-actions { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; }
.billing-plan { padding:16px; margin:16px 0; background:#f3f7f4; border:1px solid #dde7e0; border-radius:10px; }

#billing-controls > .btn { margin-top:16px; }
#update-card-section { margin:16px 0; }

/* Research sources */
.source-link-row { margin-top: 12px; }
.research-source-link { color: #246b59; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.research-source-link:focus-visible { outline: 2px solid #246b59; outline-offset: 4px; }
.source-unavailable { color: #7b8581; font-size: .85rem; white-space: nowrap; }
.price-table-group { overflow-x: auto; }

/* Campaign workspace uses the existing application controls and surfaces. */
.campaign-common > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.campaign-common > summary::after { content: '＋'; }
.campaign-common[open] > summary::after { content: '−'; }
.campaign-common > .card-body { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 24px; }
.campaign-common .option-group { margin: 0; min-width: 0; }
.campaign-common .date-range-picker { flex-wrap: wrap; }
.campaign-material-tabs { display: flex; gap: 12px; margin: 24px 0; flex-wrap: wrap; }
.campaign-material-tabs .ui-button { display: flex; align-items: center; gap: 16px; min-width: 140px; justify-content: space-between; }
.campaign-material-tabs small { font-size: 12px; font-weight: 400; }
.campaign-workspace .cp-section { grid-template-columns: minmax(260px,0.8fr) minmax(0,1.4fr); align-items: start; }
.campaign-workspace .card { min-width: 0; }
.campaign-workspace .cp-section .card { margin-bottom: 0; }
.campaign-workspace #campaign-text-preview { min-height: 320px; }
.campaign-reel-link { margin-top: 20px; }
.campaign-next-step { margin-top: 20px; }
.campaign-next-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.campaign-next-actions .campaign-next-step { margin-top: 20px; }
.post-material-preview { margin-top: 10px; }
.post-material-preview img, .post-material-preview video { display: block; max-width: 100%; max-height: 280px; border-radius: 10px; border: 1px solid var(--border-color); background: #000; }
.post-material-preview img { background: transparent; }
.post-destinations { border: 0; padding: 0; min-width: 0; }
.post-destinations legend, .post-step-label { display: block; font-weight: 600; margin-bottom: 8px; }
.post-destinations .post-destination { display: flex; align-items: center; gap: 8px; padding: 6px 0; margin: 0; cursor: pointer; font-weight: 500; }
.post-destinations .post-destination input[type=checkbox] { width: 18px; height: 18px; flex: none; margin: 0; }
.post-destination small { color: var(--text-secondary, #6b7280); }
.post-destination:has(input:disabled) { opacity: .6; cursor: not-allowed; }
#post-section #generate-post-texts { display: block; }
#post-section #publish-posts { margin-top: 8px; width: 100%; justify-content: center; }
#publish-status { margin-top: 8px; }
.post-counter { font-weight: 400; margin-left: 6px; color: var(--text-secondary, #6b7280); }
.post-counter.is-over { color: #b23b35; font-weight: 600; }
.post-history-heading { margin: 20px 0 8px; font-size: 14px; }
.post-history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; }
.post-history-list .is-error { color: #b23b35; }
#reel-banner-required-notice .btn { display: block; margin-top: 12px; }
.campaign-workspace #reel-controls { margin-top: 20px; }
@media(max-width:900px) { .campaign-common > .card-body { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .campaign-workspace .cp-section, .campaign-common > .card-body { grid-template-columns: minmax(0,1fr); } .campaign-material-tabs { gap: 8px; } .campaign-material-tabs .ui-button { min-width: 0; flex: 1; flex-direction: column; gap: 2px; padding: 10px; } }
.campaign-image-details { margin: 16px 0; }
.campaign-image-details > summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 8px 0; }
.campaign-image-details[open] > summary { margin-bottom: 12px; }
#banner-planning-controls { margin: 20px 0; }
#banner-ideas-status, #banner-idea-description { margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#banner-last-prompt, #banner-custom-concept { width: 100%; box-sizing: border-box; }

/* Brand header band and signal accent.
   Green stays the base; coral marks rising signals and the one action that turns them into a campaign. */
.topbar { background: var(--ds-brand, #245b50); border-bottom: 0; color: #fff; }
.topbar-row { padding-top: 18px; padding-bottom: 14px; }
.topbar-icon { background: #fff; color: #245b50; }
.topbar-name { color: #fff; }
.topbar-tagline, .topbar .last-updated { color: #cfe0d8; }
.topbar .btn-primary { background: #fff; border-color: #fff; color: #245b50; box-shadow: none; }
.topbar .btn-primary:hover { background: #edf4ef; border-color: #edf4ef; color: #19463d; }
.topbar .btn-secondary { background: transparent; border-color: #ffffff59; color: #fff; }
.topbar .btn-secondary:hover { background: #ffffff1f; border-color: #ffffff8c; color: #fff; }
.topbar .api-badge.badge-unset { background: #ffffff24; color: #e3eee9; }
.topbar :is(a, button):focus-visible { outline-color: #fff; }
.nav-links li a { color: #cfe0d8; border-bottom: 0; border-radius: 10px 10px 0 0; }
.nav-links li a:hover { background: #ffffff14; color: #fff; }
.nav-links li.active a { background: var(--ds-canvas, #f5f7f6); color: #245b50; }
.header-title h2 { font-size: 26px; font-weight: 700; }
.card { border-radius: 18px; box-shadow: 0 4px 20px #163c320d; }

/* Campaign-making actions: at most one is visible per screen. */
#new-campaign, #generate-campaign, #generate-banner, #generate-reel-video, .quick-actions .btn-action {
    background: var(--ds-accent, #c4502d); border-color: var(--ds-accent, #c4502d); color: #fff; box-shadow: 0 4px 14px var(--ds-accent-shadow, #c4502d40);
}
#new-campaign:hover, #generate-campaign:hover, #generate-banner:hover, #generate-reel-video:hover, .quick-actions .btn-action:hover {
    background: var(--ds-accent-hover, #a8431f); border-color: var(--ds-accent-hover, #a8431f); color: #fff;
}
:is(#new-campaign, #generate-campaign, #generate-banner, #generate-reel-video):disabled { box-shadow: none; }

/* Trend rankings: rank 1 is the strongest signal; ranks 4+ recede. */
.rank-bar-wrap { background: #edf1ee; height: 8px; }
.rank-item:nth-child(n+4) .rank-badge { color: #43564c; }
.rank-item:first-child .rank-name { font-weight: 700; color: #26342f; }
.rank-item:first-child .rank-value { color: var(--ds-accent-ink, #a13f1f); }
.rank-value { color: #43564c; font-variant-numeric: tabular-nums; }
.rank-posts-btn { color: #245b50; border-color: #c9d8d0; }
.rank-posts-btn:hover { background: #245b50; border-color: #245b50; color: #fff; }
.grok-post-card { background: #fff; border-color: #e1e8e5; border-radius: 12px; padding: 14px 16px; }
.grok-post-author { color: #26342f; }
.grok-post-text { color: #3b4b44; }
.grok-post-engagement { color: var(--ds-accent-ink, #a13f1f); font-weight: 600; }
@media (max-width: 768px) {
    .topbar-row { padding: 16px 18px 12px; }
}