:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eef2ff;
  background: #0a0c12;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 15% 0%, #1b2440 0, #0a0c12 34rem); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }

.shell { width: min(1440px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 48px; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.brand-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 58px); letter-spacing: -0.055em; line-height: 1; }
h2 { margin: 0; font-size: 16px; }
.hero p { color: #a9b1c7; margin: 10px 0 0; }
.badge, .status { border: 1px solid #30394f; border-radius: 999px; padding: 5px 9px; font-size: 12px; color: #bcc6dd; background: #121722; }
.environment { max-width: 520px; color: #818ba3; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.55; text-align: right; }

.workspace { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr); gap: 16px; }
.diagnostics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.card { border: 1px solid #222a39; border-radius: 16px; background: rgba(15, 18, 27, .94); box-shadow: 0 20px 60px rgba(0,0,0,.18); overflow: hidden; }
.card-head { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #222a39; }
.input-card { padding-bottom: 12px; }
textarea, .url-input { width: calc(100% - 28px); margin: 14px; border: 1px solid #2a3448; border-radius: 10px; background: #090c12; color: #e8ecf7; outline: none; }
textarea { height: 340px; resize: vertical; padding: 13px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.5; }
.url-input { padding: 12px; }
textarea:focus, .url-input:focus { border-color: #6573ff; box-shadow: 0 0 0 3px rgba(101,115,255,.13); }
.hidden { display: none; }

.segmented { display: flex; background: #090c12; border: 1px solid #293144; border-radius: 10px; padding: 3px; }
.segment { border: 0; background: transparent; color: #8993aa; padding: 7px 10px; border-radius: 7px; }
.segment.active { background: #232b3d; color: #fff; }
button { border: 1px solid #30394f; border-radius: 9px; background: #191f2c; color: #dde4f5; padding: 9px 13px; }
button:hover:not(:disabled) { border-color: #505d78; background: #20283a; }
button.primary { border-color: #7b86ff; background: #6672f4; color: white; font-weight: 700; }
button.ghost { background: transparent; }
button.small { padding: 6px 9px; font-size: 12px; }
.options, .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 14px; }
.options { color: #9ea8bd; margin-bottom: 12px; font-size: 13px; }
.options label { display: inline-flex; align-items: center; gap: 6px; }
.hint { color: #737f98; font-size: 11px; line-height: 1.5; margin: 12px 14px 0; }

.player-card { min-height: 500px; }
.stage-wrap { padding: 14px; }
.rmp-container { width: 100%; aspect-ratio: 16 / 9; height: auto !important; max-height: 540px; background: #000; position: relative; overflow: hidden; border-radius: 10px; }
.rmp-content, .rmp-video { width: 100%; height: 100%; }
.rmp-video { object-fit: contain; background: #000; }
.rmp-ad-vast-video-player { z-index: 1; }
/* Keep the runtime skip UI above video and away from native controls on hover. */
#vast-player .rmp-ad-container-skip { top: 12px; right: 12px; bottom: auto; z-index: 30; }
#vast-player .rmp-ad-container-skip:focus-visible { outline: 2px solid #c9c8ff; outline-offset: 2px; }
.rmp-vpaid-container { z-index: 20 !important; pointer-events: auto !important; }
.vasty-vpaid-active .rmp-ad-vast-video-player::-webkit-media-controls { display: none !important; }
.status.idle { color: #9aa4bb; }
.status.ok { color: #83efad; border-color: #26533b; background: #0e271b; }
.status.warn { color: #ffd584; border-color: #624e24; background: #2c220d; }
.status.error { color: #ff9696; border-color: #653232; background: #2b1212; }
.status.live { color: #c9c8ff; border-color: #494788; background: #1c1b42; }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; padding: 0 14px 14px; margin: 0; font-size: 12px; }
.facts dt { color: #77839c; }
.facts dd { margin: 0; color: #d6deef; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.analysis { padding: 14px; max-height: 500px; overflow: auto; }
.analysis.empty, .event-log .empty { color: #6f7a92; font-size: 13px; }
.summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pill { padding: 5px 8px; border-radius: 7px; background: #161c28; border: 1px solid #293246; color: #b9c4da; font-size: 11px; }
.issue { padding: 10px 11px; border-radius: 9px; margin: 8px 0; font-size: 12px; line-height: 1.45; border: 1px solid #3a4150; background: #151923; }
.issue.warn { border-color: #5f4b24; background: #251e10; }
.issue.error { border-color: #613131; background: #291414; }
.issue.ok { border-color: #29533a; background: #10251a; }
.issue code { color: #eef1ff; }
.media-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 11px; }
.media-table th, .media-table td { border-bottom: 1px solid #252c3b; padding: 8px 6px; text-align: left; vertical-align: top; }
.media-table th { color: #77839c; font-weight: 600; }
.media-table td { overflow-wrap: anywhere; }

.event-log { min-height: 280px; max-height: 500px; overflow: auto; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.log-row { display: grid; grid-template-columns: 72px minmax(115px, max-content) minmax(0, 1fr); gap: 8px; padding: 6px 3px; border-bottom: 1px solid #1d2330; }
.log-time { color: #616d85; }
.log-event { color: #c5cee0; }
.log-detail { color: #8c98b0; overflow-wrap: anywhere; }
.log-row.error .log-event, .log-row.error .log-detail { color: #ff9696; }
.log-row.success .log-event { color: #83efad; }
.log-row.warn .log-event { color: #ffd584; }

@media (max-width: 980px) {
  .workspace, .diagnostics-grid { grid-template-columns: 1fr; }
  .hero { flex-direction: column; }
  .environment { text-align: left; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 18px, 1440px); padding-top: 20px; }
  textarea { height: 280px; }
  .card-head { align-items: flex-start; }
  .log-row { grid-template-columns: 62px 1fr; }
  .log-detail { grid-column: 2; }
}