:root { color-scheme: light; --ink:#17212b; --muted:#62707f; --line:#d8e0e8; --blue:#0b5cab; --bg:#eef3f7; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; }
.topbar { display:flex; justify-content:space-between; gap:24px; padding:30px max(24px,calc((100vw - 1200px)/2)); color:white; background:linear-gradient(120deg,#0c2941,#0b5cab); }
.topbar h1 { margin:4px 0 8px; font-size:30px; }
.topbar p { margin:0; color:#dceaf7; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; }
.status { align-self:flex-start; padding:8px 12px; border:1px solid #ffffff55; border-radius:999px; font-size:13px; }
.sync-panel { display:grid; justify-items:end; align-content:start; gap:9px; }
.email-settings { display:grid; gap:12px; padding:12px 0; }
.email-settings label { gap:6px; }
.email-settings .checkbox { margin-top:0; }
.email-actions { display:flex; gap:10px; flex-wrap:wrap; }
.email-actions .button { min-height:34px; padding:6px 12px; font-size:12px; }
main { width:min(1200px,calc(100% - 32px)); margin:24px auto 60px; display:grid; gap:18px; }
.card { padding:24px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:0 4px 18px #18354f12; }
.section-title,.section-title>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.section-title h2 { margin:0; font-size:20px; }
.step { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:white; background:var(--blue); font-weight:700; }
.hint { color:var(--muted); font-size:14px; }
.grid { display:grid; gap:16px; }
.text-grid,.download-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.tracking-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-bottom:14px; }
label { display:grid; gap:7px; font-size:13px; font-weight:650; }
input,select { width:100%; min-height:42px; padding:9px 11px; border:1px solid #b9c5d0; border-radius:7px; background:white; color:var(--ink); }
select[multiple] { min-height:145px; }
.checkbox { display:flex; align-items:center; margin-top:18px; font-weight:500; }
.checkbox input { width:auto; min-height:auto; }
.tabs { display:flex; gap:8px; margin:24px 0 14px; border-bottom:1px solid var(--line); }
.tabs button { padding:10px 14px; border:0; border-bottom:3px solid transparent; background:none; cursor:pointer; }
.tabs button.active { color:var(--blue); border-color:var(--blue); font-weight:700; }
.dynamic-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.field-help { color:var(--muted); font-size:12px; font-weight:400; }
.filter-field { display:grid; align-content:start; gap:8px; min-width:0; }
.filter-title { font-size:13px; font-weight:700; }
.option-search { min-height:36px; font-size:13px; }
.option-list { display:grid; gap:5px; max-height:230px; padding:9px; overflow:auto; border:1px solid var(--line); border-radius:7px; background:#f8fafc; }
.option-item { display:flex; align-items:center; gap:8px; min-height:28px; font-weight:500; cursor:pointer; }
.option-item input { width:auto; min-height:auto; flex:0 0 auto; }
.option-item span { overflow-wrap:anywhere; }
.option-empty { color:var(--muted); font-size:12px; }
.range-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:40px; padding:9px 16px; border:0; border-radius:7px; color:white; text-decoration:none; cursor:pointer; font-weight:700; }
.button:disabled { opacity:.45; cursor:not-allowed; }
.button.sync-button { border:1px solid #fff; color:#0b3558; background:#fff; box-shadow:0 2px 8px #061d3033; }
.button.sync-button:hover { background:#eaf4ff; }
.button.sync-button:focus-visible { outline:3px solid #8ec9ff; outline-offset:2px; }
.primary { background:var(--blue); }
.secondary { background:#526575; }
.danger { background:var(--danger); }
.message { margin-top:16px; padding:12px; border-radius:7px; background:#fff4e5; color:#7a4300; white-space:pre-wrap; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.metrics div { padding:16px; border-radius:9px; background:#f2f6fa; }
.metrics span,.metrics strong { display:block; }
.metrics span { color:var(--muted); font-size:13px; }
.metrics strong { margin-top:6px; font-size:24px; }
details { margin:12px 0; }
pre { padding:12px; overflow:auto; border-radius:7px; background:#13212d; color:#e7f2fb; }
.table-wrap { overflow:auto; max-height:460px; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; font-size:12px; }
th,td { padding:8px; border:1px solid var(--line); white-space:nowrap; text-align:left; }
th { position:sticky; top:0; background:#edf3f8; }
.disabled-card { opacity:.65; }
.progress { margin-top:18px; }
.progress>div { display:flex; justify-content:space-between; }
.profiles-list { display:grid; gap:10px; margin-top:12px; }
.profiles-toolbar { display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.profiles-toolbar input[type="search"] { flex:0 1 260px; min-height:34px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; font-size:13px; }
.profiles-toolbar .checkbox { margin-top:0; font-weight:400; font-size:13px; }
.profiles-toolbar .hint { font-size:12px; }
.profile-card { display:grid; grid-template-columns:1fr auto; gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.profile-card h3 { margin:0 0 5px; font-size:15px; }
.profile-meta { color:var(--muted); font-size:12px; }
.profile-meta.last-run { margin-top:3px; }
.profile-meta .change-hot { color:#b45309; font-weight:600; }
.profile-meta .run-failed { color:var(--danger); font-weight:600; }
.enabled-badge { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; vertical-align:middle; }
.enabled-badge.on { background:#e3f2e7; color:#176b37; }
.enabled-badge.off { background:#eceff2; color:#62707f; }
.profile-card-disabled { opacity:.62; background:#f1f3f5; }
.profile-card-disabled h3 { color:#62707f; }
.profile-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.profile-actions .button { min-height:34px; padding:6px 10px; font-size:12px; }
.profile-detail { margin-top:22px; padding-top:20px; border-top:2px solid var(--line); }
.detail-metrics { grid-template-columns:repeat(3,1fr); }
.detail-tabs { margin-top:18px; }
.detail-section { min-width:0; }
.pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:12px; }
.pagination .button { min-height:34px; padding:6px 12px; }
.change-json { max-width:520px; white-space:pre-wrap; overflow-wrap:anywhere; }
progress { width:100%; height:18px; margin:8px 0 12px; }
.hidden { display:none !important; }
label textarea { width:100%; min-height:120px; padding:9px 11px; border:1px solid #b9c5d0; border-radius:7px; background:white; color:var(--ink); font-family:monospace; font-size:13px; resize:vertical; }
label input[type="text"] { font-family:monospace; }

.help-button { display:inline-flex; justify-content:center; align-items:center; width:22px; height:22px; margin-left:6px; border:1px solid var(--line); border-radius:50%; background:#f2f6fa; color:var(--blue); font-size:13px; font-weight:700; cursor:pointer; vertical-align:middle; }
.help-button:hover { background:#e6f0fa; }
.template-example { margin:14px 0; padding:14px; border:1px dashed var(--line); border-radius:8px; background:#f8fafc; }
.template-example label { margin-top:10px; }
.template-example input[readonly],.template-example textarea[readonly] { background:#f1f3f5; color:#3d4d5d; cursor:text; }
.admin-only { display:none !important; }
details summary h2 { display:inline; font-size:inherit; font-weight:inherit; }
.subscriber-form { display:flex; gap:10px; align-items:flex-end; margin:14px 0; }
.subscriber-form label { flex:1; margin:0; }
.subscriber-form .button { min-height:42px; }
.subscribers-list { list-style:none; padding:0; margin:10px 0 0; }
.subscribers-list li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#f8fafc; margin-bottom:6px; }
.subscribers-list .button { min-height:28px; padding:4px 10px; font-size:12px; }

@media (max-width:650px) { .topbar { flex-direction:column; } .sync-panel { justify-items:start; } .metrics { grid-template-columns:1fr; } .card { padding:18px; } }