:root {
  --navy: #0d2638;
  --navy-2: #12364b;
  --gold: #c7a35a;
  --gold-soft: #f4ead4;
  --ink: #17212b;
  --muted: #687581;
  --line: #dce2e7;
  --surface: #ffffff;
  --background: #f4f6f8;
  --green: #167a56;
  --red: #b73b3b;
  --amber: #a66a12;
  --radius: 16px;
  --shadow: 0 12px 35px rgba(13, 38, 56, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--background); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
.topbar { height: 76px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 max(28px, calc((100vw - 1240px) / 2)); border-bottom: 1px solid rgba(255,255,255,.1); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-family: Georgia, serif; font-weight: 700; letter-spacing: -1px; border-radius: 50%; }
.brand strong { display: block; font-size: 15px; letter-spacing: .3px; }
.brand small { display: block; font-size: 10px; opacity: .66; margin-top: 3px; text-transform: uppercase; letter-spacing: .7px; }
.topnav { display: flex; align-items: center; gap: 24px; font-size: 13px; }
.topnav a, .link-button { opacity: .78; text-decoration: none; transition: .2s; }
.topnav a:hover, .link-button:hover { opacity: 1; color: var(--gold); }
.topnav form { margin: 0; }
.link-button { background: none; color: #fff; border: 0; cursor: pointer; padding: 0; }
.page-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 80px; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 38px; }
.hero-row h1, .result-header h1 { font-family: Georgia, serif; font-weight: 500; color: var(--navy); font-size: clamp(38px, 5vw, 62px); line-height: 1.04; margin: 8px 0 14px; letter-spacing: -1.5px; }
.hero-row p { max-width: 690px; color: var(--muted); line-height: 1.7; margin: 0; }
.eyebrow { color: #9a7939; font-size: 10px; letter-spacing: 2.1px; font-weight: 800; }
.integration-strip { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; }
.platform-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.platform-dot.wp { background: #21759b; }.platform-dot.fb { background: #1877f2; font-size: 21px; }.platform-dot.ig { background: linear-gradient(140deg,#f9ce34,#ee2a7b,#6228d7); font-size: 21px; }.platform-dot.li { background: #0a66c2; }.platform-dot.mail { background: var(--navy); }
.platform-line { width: 28px; height: 1px; background: var(--line); }
.setup-panel { background: #fff8e9; border: 1px solid #e9d8ad; border-radius: var(--radius); padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.setup-panel h2 { font-size: 18px; margin: 5px 0 0; }
.readiness-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.readiness-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.72); max-width: 260px; }
.readiness-item strong, .readiness-item small { display: block; font-size: 11px; }.readiness-item small { color: var(--muted); margin-top: 2px; line-height: 1.35; }
.status-light { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; background: var(--red); flex: 0 0 auto; }.readiness-item.ready .status-light { background: var(--green); }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; margin-bottom: 22px; }
.section-heading { display: flex; gap: 16px; align-items: center; padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.section-number { width: 44px; height: 44px; border: 1px solid #d8c397; background: var(--gold-soft); color: #8d6b2f; border-radius: 50%; display: grid; place-items: center; font-family: Georgia, serif; }
.section-heading h2, .history-heading h2 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 26px; color: var(--navy); font-weight: 500; }
.form-grid { display: grid; gap: 22px; }.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }.full-span { grid-column: 1 / -1; }.compact-grid { gap: 16px; }
.field > span, .field-group legend { display: block; font-size: 12px; font-weight: 700; color: #3e4a55; margin-bottom: 8px; letter-spacing: .2px; }.field b { color: var(--gold); }
.field input[type="text"], .field input[type="password"], .field textarea, .field select, .login-form input { width: 100%; border: 1px solid #cfd7dd; background: #fbfcfd; border-radius: 9px; padding: 13px 14px; outline: none; transition: .18s; color: var(--ink); }
.field textarea { resize: vertical; line-height: 1.55; }.field select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,#6b7780 50%),linear-gradient(135deg,#6b7780 50%,transparent 50%); background-position: calc(100% - 18px) 19px,calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus, .login-form input:focus { border-color: #9b7d42; box-shadow: 0 0 0 3px rgba(199,163,90,.16); background: #fff; }
.field-group { border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin: 0; }.field-group legend { padding: 0 8px; color: var(--navy); }
.upload-box { min-height: 164px; border: 1.5px dashed #bdc8cf; border-radius: 11px; background: #f8fafb; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 20px; position: relative; cursor: pointer; transition: .2s; }.upload-box:hover { border-color: var(--gold); background: #fdfaf4; }.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.upload-icon { color: #8b6d34; font-size: 23px; margin-bottom: 8px; }.upload-box strong { font-size: 13px; }.upload-box small { color: var(--muted); margin: 5px 0 10px; }.file-name { font-style: normal; font-size: 11px; color: #8b6d34; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.large-upload { min-height: 246px; }
.counter { float: right; color: var(--muted); margin-top: 5px; font-size: 10px; }.field-error { display: block; color: var(--red); margin-top: 7px; }.social-caption { min-height: 246px; }
.publish-bar { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow); }.publish-bar strong, .publish-bar span { display: block; }.publish-bar > div > span { font-size: 12px; opacity: .65; margin-top: 5px; }
.primary-button, .secondary-button { border: 0; border-radius: 9px; font-weight: 750; cursor: pointer; transition: .2s; }.primary-button { background: var(--gold); color: var(--navy); padding: 14px 22px; }.primary-button:hover { transform: translateY(-1px); background: #d4b46f; }.primary-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }.publish-button { display: flex; align-items: center; gap: 20px; min-width: 210px; justify-content: space-between; }.secondary-button { background: #fff; color: var(--navy); border: 1px solid #cfd7dd; padding: 12px 18px; }.full-width { width: 100%; }
.history-section { margin-top: 58px; scroll-margin-top: 100px; }.history-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }.history-heading > span { font-size: 11px; color: var(--muted); }.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }table { width: 100%; border-collapse: collapse; font-size: 12px; }th { background: #f5f7f8; color: #61707b; text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }th, td { padding: 14px 13px; border-bottom: 1px solid #e8ecef; vertical-align: middle; }tbody tr:last-child td { border-bottom: 0; }.title-cell { min-width: 220px; font-weight: 650; color: var(--navy); }.nowrap { white-space: nowrap; color: var(--muted); }.table-link, .details-link { color: #806226; font-weight: 700; text-decoration: none; white-space: nowrap; }.details-link { color: var(--navy); }.muted { color: #97a0a8; font-size: 10px; text-transform: capitalize; }.empty-state { text-align: center; padding: 46px; color: var(--muted); }
.status-badge { display: inline-flex; align-items: center; border-radius: 20px; padding: 5px 9px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }.status-success { background: #e5f5ee; color: var(--green); }.status-partial { background: #fff0d8; color: var(--amber); }.status-failed { background: #fde9e9; color: var(--red); }.status-processing, .status-queued { background: #e7eff8; color: #315f8d; }
.alert { border-radius: 10px; padding: 13px 16px; margin-bottom: 20px; font-size: 13px; }.alert-error { background: #fdecec; border: 1px solid #f2c5c5; color: #8f2828; }.alert-success { background: #e8f6ef; border: 1px solid #bce1ce; color: #146545; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 30px 0; }.login-card { width: min(820px, 100%); min-height: 460px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 80px rgba(13,38,56,.16); display: grid; grid-template-columns: 1.05fr 1fr; }.login-brand { background: var(--navy); color: #fff; padding: 60px 46px; display: flex; flex-direction: column; justify-content: center; }.brand-mark-large { width: 58px; height: 58px; font-size: 22px; margin-bottom: 44px; }.login-brand p { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; margin: 0; }.login-brand h1 { font-family: Georgia, serif; font-weight: 500; font-size: 38px; margin: 8px 0 18px; }.login-brand > span:last-child { opacity: .58; font-size: 12px; }.login-form { padding: 58px 44px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }.login-form label span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.result-header { margin-bottom: 30px; }.result-header h1 { font-size: clamp(34px, 5vw, 54px); max-width: 900px; }.back-link { display: inline-block; color: var(--muted); font-size: 12px; text-decoration: none; margin-bottom: 36px; }.result-meta { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; }.result-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }.result-card { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 18px; min-height: 190px; }.result-icon { width: 38px; height: 38px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 24px; }.result-icon.wordpress { background:#21759b }.result-icon.facebook { background:#1877f2;font-size:21px }.result-icon.instagram { background:linear-gradient(140deg,#f9ce34,#ee2a7b,#6228d7);font-size:21px }.result-icon.linkedin { background:#0a66c2 }.result-icon.email { background:var(--navy) }.result-body > span, .result-body > strong { display:block }.result-body > span { color:var(--muted);font-size:11px }.result-status { text-transform:capitalize;margin:4px 0 14px }.result-status-success { color:var(--green) }.result-status-failed { color:var(--red) }.result-status-publishing,.result-status-sending,.result-status-pending { color:#315f8d }.result-body a { font-size:11px;color:#806226;font-weight:700;text-decoration:none }.result-error { color:var(--red);font-size:10px;line-height:1.45;overflow-wrap:anywhere }.processing-note,.retry-panel { margin-top:18px;border-radius:12px;padding:18px 20px;display:flex;align-items:center;gap:14px }.processing-note { background:#eaf2fa;border:1px solid #cbdcec }.processing-note strong,.processing-note p,.retry-panel strong,.retry-panel span { display:block }.processing-note p { margin:4px 0 0;color:var(--muted);font-size:12px }.spinner { width:22px;height:22px;border:3px solid #b9cee1;border-top-color:#315f8d;border-radius:50%;animation:spin 1s linear infinite }.retry-panel { justify-content:space-between;background:#fff8e9;border:1px solid #e9d8ad }.retry-panel span { color:var(--muted);font-size:11px;margin-top:4px }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .two-columns { grid-template-columns: 1fr; }.full-span { grid-column: auto; }.hero-row { align-items: flex-start; flex-direction: column; }.integration-strip { align-self: flex-start; }.setup-panel { align-items:flex-start;flex-direction:column }.readiness-grid { justify-content:flex-start }.result-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.topnav a { display:none; } }
@media (max-width: 620px) { .page-shell { width:min(100% - 24px,1240px);padding-top:30px }.topbar { padding:0 14px }.brand small { display:none }.topnav { gap:12px }.form-card { padding:20px 16px }.compact-grid { grid-template-columns:1fr }.publish-bar,.retry-panel { align-items:stretch;flex-direction:column }.publish-button { width:100% }.integration-strip { flex-wrap:wrap }.platform-line { display:none }.login-card { grid-template-columns:1fr }.login-brand { padding:34px 28px }.brand-mark-large { margin-bottom:26px }.login-form { padding:34px 28px }.result-grid { grid-template-columns:1fr }.history-heading { align-items:flex-start;flex-direction:column;gap:8px } }