/* BidX Playground — self-contained styles (no CDNs, system fonts). */
* { box-sizing: border-box; margin: 0; }
body { font-family: georgia, "times new roman", serif; color: #1c1917; background: #fbfaf8; }

/* ---- Layout ---- */
.layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

/* ---- Sidebar ---- */
.sidebar { background: #fff; border-right: 1px solid #e7e5e4;
           padding: 24px 0; position: sticky; top: 0; align-self: start;
           height: 100vh; overflow: auto; }
@media (max-width: 900px) { .sidebar { position: static; height: auto;
                                       border-right: 0; border-bottom: 1px solid #e7e5e4; } }
.brand { font: 700 22px/1 system-ui, sans-serif; padding: 0 20px 18px;
         border-bottom: 1px solid #e7e5e4; color: #4338ca; letter-spacing: -.3px; }
.sidenav { display: flex; flex-direction: column; padding: 12px 0; }
.nav-item { display: block; padding: 10px 20px; font: 600 14px/1.4 system-ui, sans-serif;
            color: #44403c; text-decoration: none; border-left: 3px solid transparent; }
.nav-item:hover { background: #fafaf9; color: #1c1917; }
.nav-item.active { color: #4338ca; border-left-color: #4338ca;
                   background: #eef2ff; font-weight: 700; }
.nav-item.soon { color: #a8a29e; cursor: not-allowed; pointer-events: none; }
@media (max-width: 900px) { .sidenav { flex-direction: row; flex-wrap: wrap; padding: 8px; }
                            .nav-item { padding: 6px 12px; border-left: 0;
                                        border-bottom: 3px solid transparent; }
                            .nav-item.active { border-bottom-color: #4338ca; } }

/* ---- Playground ---- */
.playground { padding: 28px 32px 60px; max-width: 1100px; }
@media (max-width: 900px) { .playground { padding: 20px 16px 40px; } }
.pg-head h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.5px; }
.pg-head p { margin-top: 6px; font: 14px system-ui, sans-serif; color: #78716c; }

/* ---- Controls strip ---- */
.controls { margin-top: 20px; padding: 8px 20px; display: flex;
            flex-wrap: wrap; align-items: center; gap: 14px;
            font: 13px system-ui, sans-serif; background: #eef2ff;
            border: 1px solid #c7d2fe; border-radius: 10px; }
.demo-tag { font-weight: 700; color: #4338ca; text-transform: uppercase;
            letter-spacing: .05em; font-size: 11px; }
.controls label { display: inline-flex; align-items: center; gap: 6px; color: #3730a3; }
.controls select { font: inherit; padding: 3px 6px; border: 1px solid #a5b4fc;
                   border-radius: 6px; background: #fff; }
.controls button { font: 600 13px system-ui, sans-serif; padding: 4px 12px;
                   border: 1px solid #4338ca; border-radius: 6px;
                   background: #4338ca; color: #fff; cursor: pointer; }
.controls button:hover { background: #3730a3; }
.controls .chk { gap: 4px; }

/* ---- Ad slot ---- */
.ad-slot { position: relative; background: #fff; margin-top: 24px; }
.ad-slot.rect { width: 320px; height: 480px; }
.ad-slot.empty { border: 2px dashed #d6d3d1; display: flex; align-items: center;
                 justify-content: center; }
.ad-slot .ph { text-align: center; font: 12px system-ui, sans-serif; color: #a8a29e; }
.ad-slot .ph span { font-size: 11px; }
.ad-frame { line-height: 0; }
.ad-frame img, .ad-frame video, .ad-frame iframe { max-width: 100%; }
.ad-caption { position: absolute; left: 0; bottom: -18px; font: 10px system-ui, sans-serif;
              color: #a8a29e; }

/* ---- Inline bid JSON ---- */
.bid-json { margin-top: 50px; }
.bid-title { font: 700 12px system-ui, sans-serif; text-transform: uppercase;
             letter-spacing: .06em; color: #57534e; margin-bottom: 6px; }
.bid-json h5 { font: 600 10px system-ui, sans-serif; text-transform: uppercase;
               color: #64748b; margin: 10px 0 4px; }
.bid-pre { font: 11px ui-monospace, Menlo, monospace; background: #0f172a;
           color: #cbd5e1; border-radius: 8px; padding: 12px;
           max-height: 240px; overflow: auto;
           white-space: pre-wrap; word-break: break-word; }

/* ---- Console ---- */
.console { margin-top: 20px; padding: 14px 18px 16px; background: #fff;
           border: 1px solid #e7e5e4; border-radius: 10px; }
.console-buttons { display: flex; gap: 10px; margin-bottom: 10px; }
.console-buttons button { font: 600 13px system-ui, sans-serif; padding: 5px 14px;
                          border: 1px solid #4338ca; border-radius: 6px;
                          background: #4338ca; color: #fff; cursor: pointer; }
.console-buttons button:hover { background: #3730a3; }
.console-buttons button:disabled { background: #a5b4fc; border-color: #a5b4fc;
                                    cursor: not-allowed; }
.con-request { width: 100%; height: 200px; font: 11px ui-monospace, Menlo, monospace;
               background: #fafaf9; border: 1px solid #e7e5e4; border-radius: 6px;
               padding: 10px; resize: vertical; color: #1c1917; }
.con-error { font: 12px system-ui, sans-serif; color: #b91c1c; min-height: 16px;
             margin-top: 4px; }
.con-log-title { font: 600 10px system-ui, sans-serif; text-transform: uppercase;
                 color: #64748b; margin: 14px 0 4px; }
.con-log { list-style: none; padding: 0; font: 11px ui-monospace, Menlo, monospace;
           color: #475569; max-height: 140px; overflow: auto; }
.con-log li { padding: 2px 0; }
.con-log li.err { color: #b91c1c; }

/* ---- MMP simulator (AppsFlyer install postback) ---- */
.mmp-sim { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e7e5e4; }
.mmp-sim-url { margin-top: 6px; }
.mmp-sim-note { font: 11px system-ui, sans-serif; color: #a8a29e; margin: 6px 0 10px; }
.mmp-sim-result { font: 12px system-ui, sans-serif; color: #475569; min-height: 16px; }
.mmp-sim-result.err { color: #b91c1c; }

/* ---- Publisher Store modal ---- */
.store-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
                 display: flex; align-items: center; justify-content: center;
                 z-index: 100; }
.store-overlay[hidden] { display: none; }
.store-modal { background: #fbfaf8; border-radius: 12px; padding: 28px 32px 24px;
               max-width: 480px; width: calc(100% - 40px); position: relative;
               box-shadow: 0 20px 60px rgba(15, 23, 42, .35); }
.store-close { position: absolute; top: 10px; right: 14px; background: none;
               border: 0; font-size: 22px; color: #57534e; cursor: pointer; }
.store-modal h2 { font: 700 22px/1.1 system-ui, sans-serif; color: #4338ca;
                  letter-spacing: -.3px; }
.store-body img { display: block; width: 200px; height: 300px; object-fit: cover;
                  margin: 14px auto; border-radius: 6px; }
.store-body p { font: 14px/1.5 system-ui, sans-serif; color: #1c1917; margin-top: 8px; }
.store-body code { background: #eef2ff; padding: 1px 6px; border-radius: 4px;
                   font: 12px ui-monospace, Menlo, monospace; color: #3730a3; }
.store-actions { margin-top: 16px; display: flex; justify-content: flex-end; }
.store-buy { font: 700 14px system-ui, sans-serif; padding: 8px 22px;
             border: 0; border-radius: 8px; background: #4338ca; color: #fff;
             cursor: pointer; }
.store-buy:hover { background: #3730a3; }
.store-buy:disabled { background: #a5b4fc; cursor: not-allowed; }
.store-landing { color: #78716c; font-size: 12px; word-break: break-all; }

/* ---- Traffic Lab ---- */
.tl-ifa { width: 290px; font: 11px ui-monospace, Menlo, monospace;
          padding: 3px 6px; border: 1px solid #a5b4fc; border-radius: 6px;
          background: #fff; color: #1c1917; }
.tl-table-wrap { margin-top: 20px; overflow-x: auto; background: #fff;
                 border: 1px solid #e7e5e4; border-radius: 10px; }
.tl-table { width: 100%; border-collapse: collapse;
            font: 12px system-ui, sans-serif; }
.tl-table th, .tl-table td { text-align: left; padding: 7px 10px;
                             border-bottom: 1px solid #f5f5f4;
                             white-space: nowrap; }
.tl-table tr:last-child td { border-bottom: 0; }
.tl-table th { font-size: 10px; text-transform: uppercase;
               letter-spacing: .05em; color: #64748b; }
.tl-table .mono { font: 11px ui-monospace, Menlo, monospace; color: #3730a3; }
.tl-optout { font: 11px system-ui, sans-serif; color: #b45309; }
.tl-rm { background: none; border: 0; color: #b91c1c; cursor: pointer;
         font-size: 13px; padding: 0 4px; }
.tl-agg { margin-top: 8px; font: 12px system-ui, sans-serif; color: #57534e; }
.tl-status { font: 600 12px system-ui, sans-serif; color: #57534e; }
.tl-status.running { color: #1a7f37; }
#view-traffic .controls { margin-top: 16px; }
#view-traffic input[type="number"] { font: inherit; width: 70px; padding: 3px 6px;
                                     border: 1px solid #a5b4fc; border-radius: 6px;
                                     background: #fff; }

/* ---- Debug panel ---- */
.debug-panel { margin-top: 1rem; }
.debug-summary, .debug-checks { list-style: none; margin: 0 0 .75rem; padding: 0; }
.debug-summary li, .debug-checks li {
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .15rem 0;
}
.debug-summary b { display: inline-block; min-width: 12rem; font-weight: 600; }
.debug-checks .ok::before  { content: "\2713 "; color: #1a7f37; }
.debug-checks .bad::before { content: "\2717 "; color: #b42318; }
.debug-checks .bad { color: #b42318; }