/* Styled after Ozone AdManager (antd theme: Montserrat, navy header, teal primary). */
:root {
  --oz-primary: #168c94;
  --oz-primary-hover: #31b3bc;
  --oz-primary-1: #e6f4f4;
  --oz-navy: #001529;
  --oz-bg: #f0f2f5;
  --oz-card: #ffffff;
  --oz-heading: rgba(0, 0, 0, 0.85);
  --oz-text: rgba(0, 0, 0, 0.65);
  --oz-muted: rgba(0, 0, 0, 0.45);
  --oz-border: #d9d9d9;
  --oz-split: #f0f0f0;
  --oz-fill: #fafafa;
  --oz-success: #40ca80;
  --oz-warning: #fec045;
  --oz-info: #2d90eb;
  --oz-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  background: var(--oz-bg);
  color: var(--oz-text);
  line-height: 1.5715;
}
a { color: var(--oz-primary); }
a:hover { color: var(--oz-primary-hover); }

/* ---------- Top bar (navy, like AdManager BaseHeader) ---------- */
header.oz-header {
  background: var(--oz-navy);
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.oz-brand { display: flex; align-items: center; }
.oz-brand img { height: 32px; width: auto; display: block; }
header.oz-header nav { display: flex; height: 100%; gap: 4px; overflow-x: auto; }
header.oz-header nav a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
header.oz-header nav a:hover { color: #fff; }
header.oz-header nav a.active { color: #fff; border-bottom-color: var(--oz-primary); }

/* ---------- Page header (white, like AdManager LayoutHeader) ---------- */
.oz-pagehead {
  background: var(--oz-card);
  border-bottom: 1px solid var(--oz-split);
  padding: 16px 24px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.oz-pagehead h1 { margin: 0; font-size: 20px; line-height: 32px; font-weight: 500; color: var(--oz-heading); }
.oz-pagehead span { color: var(--oz-muted); font-size: 14px; }

main { max-width: 1040px; margin: 0 auto; padding: 24px; }
.oz-lead { color: var(--oz-text); font-size: 14px; margin: 0 0 16px; }

/* ---------- Ad slot ---------- */
.oz-slot {
  background: var(--oz-card);
  border: 1px dashed var(--oz-border);
  border-radius: 8px;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
  padding: 12px;
  overflow: hidden;
}

/* ---------- Cards (antd Card) ---------- */
.oz-panel {
  background: var(--oz-card);
  border: 1px solid var(--oz-split);
  border-radius: 8px;
  box-shadow: var(--oz-shadow);
  margin: 16px 0;
  padding: 0 24px 16px;
}
.oz-panel h2 {
  margin: 0 -24px 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--oz-split);
  font-size: 16px;
  font-weight: 500;
  color: var(--oz-heading);
}
.oz-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--oz-split);
}
.oz-kv:last-child { border-bottom: 0; }
.oz-kv span { color: var(--oz-muted); }
code {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--oz-heading);
  background: rgba(150, 150, 150, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ---------- Status (antd Alert) ---------- */
.oz-status { padding: 9px 16px; border-radius: 8px; margin: 0 0 12px; border: 1px solid; font-weight: 500; color: var(--oz-heading); }
.oz-pending { background: #e6f4ff; border-color: #91caff; }
.oz-ok { background: #f6ffed; border-color: #b7eb8f; }
.oz-warn { background: #fffbe6; border-color: #ffe58f; }

/* ---------- Table (antd Table) ---------- */
.oz-table { width: 100%; border-collapse: collapse; }
.oz-table th, .oz-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--oz-split); }
.oz-table th { background: var(--oz-fill); color: var(--oz-heading); font-weight: 500; }
.oz-win td { background: var(--oz-primary-1); }
#oz-bids { overflow-x: auto; }
.oz-muted { color: var(--oz-muted); }
.oz-raw {
  background: var(--oz-fill);
  border: 1px solid var(--oz-split);
  padding: 12px;
  border-radius: 8px;
  overflow: auto;
  max-height: 320px;
  font-size: 12px;
}

/* ---------- Buttons (antd Button) ---------- */
.oz-btn-sm, button.oz-btn {
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: color .2s, border-color .2s, background .2s;
}
.oz-btn-sm {
  margin-top: 8px;
  background: #fff;
  color: var(--oz-text);
  border: 1px solid var(--oz-border);
  padding: 4px 15px;
  font-size: 13px;
  line-height: 22px;
}
.oz-btn-sm:hover { color: var(--oz-primary); border-color: var(--oz-primary); }
button.oz-btn {
  background: var(--oz-primary);
  color: #fff;
  border: 1px solid var(--oz-primary);
  padding: 6px 15px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 0 rgba(22, 140, 148, 0.1);
}
button.oz-btn:hover { background: var(--oz-primary-hover); border-color: var(--oz-primary-hover); }

/* ---------- Form (antd Form, vertical) ---------- */
form.oz-form { display: grid; gap: 16px; max-width: 520px; }
form.oz-form label { display: block; font-size: 13px; color: var(--oz-heading); margin-bottom: 6px; }
form.oz-form input, form.oz-form select {
  width: 100%;
  padding: 4px 11px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--oz-border);
  background: #fff;
  color: var(--oz-heading);
  font: inherit;
}
form.oz-form input:hover, form.oz-form select:hover { border-color: var(--oz-primary-hover); }
form.oz-form input:focus, form.oz-form select:focus {
  outline: 0;
  border-color: var(--oz-primary);
  box-shadow: 0 0 0 2px rgba(22, 140, 148, 0.1);
}
form.oz-form .oz-row { display: flex; gap: 14px; align-items: center; }
form.oz-form .oz-check { display: flex; align-items: center; gap: 8px; }
form.oz-form .oz-check input { width: 16px; height: 16px; accent-color: var(--oz-primary); }
.oz-share { color: var(--oz-muted); word-break: break-all; margin: 0; }
.oz-share code { display: block; margin-top: 6px; padding: 8px; }

@media (max-width: 600px) {
  header.oz-header { padding: 0 16px; gap: 16px; }
  header.oz-header nav a { padding: 0 8px; font-size: 13px; }
  header.oz-header nav a:first-child { display: none; } /* logo links home */
  .oz-brand img { height: 26px; }
  .oz-pagehead { padding: 12px 16px; }
  main { padding: 16px; }
  .oz-panel { padding: 0 16px 12px; }
  .oz-panel h2 { margin: 0 -16px 12px; padding: 12px 16px; }
}

/* ---------- Display page: publisher-style mock site ---------- */
.oz-site {
  background: var(--oz-card);
  border: 1px solid var(--oz-split);
  border-radius: 8px;
  box-shadow: var(--oz-shadow);
  margin: 16px 0;
  padding: 16px 24px 24px;
}
.oz-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--oz-fill);
  border: 1px dashed var(--oz-border);
  border-radius: 4px;
  overflow: hidden;
}
.oz-ad.oz-filled { background: transparent; border-style: solid; border-color: var(--oz-split); }
.oz-ad-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--oz-muted);
  padding: 2px 0 4px;
}
.oz-ad-lb { min-height: 120px; margin: 0 auto 24px; max-width: 970px; }
.oz-ad-mpu { width: 302px; min-height: 280px; } /* 300 + 1px borders */
.oz-ad iframe { display: block; }
.oz-site-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 302px;
  gap: 32px;
  align-items: start;
}
.oz-sidebar { display: flex; flex-direction: column; gap: 24px; }
.oz-article { font-size: 15px; line-height: 1.7; color: var(--oz-heading); }
.oz-article h2 { font-size: 26px; line-height: 1.25; margin: 4px 0 8px; font-weight: 600; }
.oz-article p { margin: 0 0 14px; }
.oz-kicker { color: var(--oz-primary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.oz-article .oz-kicker { margin: 0; }
.oz-article .oz-byline { color: var(--oz-muted); font-size: 13px; margin-bottom: 20px; }

@media (max-width: 767px) {
  .oz-site { padding: 12px 16px 16px; }
  .oz-ad-lb { min-height: 74px; }
  .oz-site-body { grid-template-columns: minmax(0, 1fr); }
  .oz-sidebar { align-items: center; }
  .oz-article h2 { font-size: 22px; }
}