/* WordPress admin look, so the Apex team sees the plugin where it will live. */
* { box-sizing: border-box; }
body { margin: 0; background: #f0f0f1; color: #1d2327; font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: #2271b1; }
code { background: #f0f0f1; padding: 1px 5px; font-size: 12px; }
#adminbar { height: 32px; background: #1d2327; color: #f0f0f1; display: flex; align-items: center; gap: 16px; padding: 0 10px; position: sticky; top: 0; z-index: 9; }
#adminbar a { color: #f0f0f1; text-decoration: none; }
#adminbar .wpl { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c3c4c7; display: grid; place-items: center; font: 700 11px Georgia, serif; }
#adminbar .demo { color: #72aee6; font-size: 12px; }
#adminbar .howdy { margin-left: auto; }
#wrap { display: flex; min-height: calc(100vh - 32px); }
#menu { width: 160px; background: #1d2327; flex-shrink: 0; }
#menu ul { list-style: none; margin: 0; padding: 8px 0; position: sticky; top: 32px; }
#menu li a { display: flex; align-items: center; gap: 8px; color: #f0f0f1; text-decoration: none; padding: 8px 10px; font-size: 13.5px; }
#menu li a:hover { background: #2c3338; color: #72aee6; }
#menu li.cur a { background: #2271b1; color: #fff; }
#menu .dash { width: 20px; text-align: center; opacity: .7; }
#menu .sep { height: 1px; background: #3c434a; margin: 8px 0; }
.bubble { background: #d63638; color: #fff; border-radius: 9px; font-size: 10px; padding: 0 6px; margin-left: auto; }
#content { flex: 1; padding: 10px 24px 60px; min-width: 0; }
.wp-heading { font-size: 23px; font-weight: 400; margin: 14px 0 12px; }
.notice { background: #fff; border-left: 4px solid #72aee6; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); margin: 6px 0 14px; padding: 2px 12px; }
.notice-success { border-left-color: #00a32a; } .notice-error { border-left-color: #d63638; } .notice-warning { border-left-color: #dba617; }
.nav-tab-wrapper { border-bottom: 1px solid #c3c4c7; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 4px; }
.nav-tab { padding: 6px 12px; border: 1px solid #c3c4c7; border-bottom: 0; background: #dcdcde; color: #50575e; text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: -1px; }
.nav-tab-active { background: #f0f0f1; color: #000; border-bottom: 1px solid #f0f0f1; }
.box { background: #fff; border: 1px solid #c3c4c7; padding: 14px 18px; margin-bottom: 16px; }
.box h2 { font-size: 14px; margin: 0 0 8px; }
.box h3 { font-size: 13px; margin: 16px 0 6px; }
.box.empty { text-align: center; padding: 30px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.big { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.good { color: #00a32a; } .bad { color: #d63638; } .warn { color: #996800; }
.muted { color: #646970; font-size: 12px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.row p { margin: 0; max-width: 640px; }
.button { display: inline-block; border: 1px solid #2271b1; color: #2271b1; background: #f6f7f7; border-radius: 3px; padding: 0 10px; min-height: 30px; line-height: 28px; font-size: 13px; cursor: pointer; text-decoration: none; }
.button:hover { background: #f0f0f1; color: #135e96; }
.button-primary { background: #2271b1; color: #fff; }
.button-primary:hover { background: #135e96; color: #fff; }
.button-hero { font-size: 14px; min-height: 46px; line-height: 44px; padding: 0 22px; white-space: nowrap; }
.button-small { min-height: 26px; line-height: 24px; font-size: 12px; }
.linkbtn { background: none; border: 0; color: #2271b1; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
form.inline { display: inline; }
.toggle { display: inline-flex; gap: 6px; margin-top: 10px; color: #646970; }
.toggle .linkbtn { text-decoration: none; font-size: 15px; }
.summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.summary .s { background: #f6f7f7; border: 1px solid #dcdcde; padding: 6px 12px; }
.summary .s b { font-size: 16px; margin-right: 3px; }
.summary .add { border-color: #00a32a; background: #edfaef; } .summary .upd { border-color: #72aee6; background: #f0f6fc; } .summary .ho { border-color: #dba617; background: #fcf9e8; }
.changes { margin: 0; padding-left: 18px; }
.changes li { margin: 3px 0; }
.widefat { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #c3c4c7; margin-bottom: 16px; }
.widefat th { text-align: left; font-weight: 400; padding: 8px 10px; border-bottom: 1px solid #c3c4c7; }
.widefat td { padding: 8px 10px; vertical-align: top; border-top: 1px solid #f0f0f1; }
.widefat tr:nth-child(odd) td { background: #f6f7f7; }
.widefat pre { white-space: pre-wrap; font-size: 11px; max-width: 520px; }
.widefat tr.done td { opacity: .6; }
.pill { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #f0f0f1; white-space: nowrap; }
.pill.feed { background: #edfaef; color: #00701e; } .pill.lock { background: #f0f6fc; color: #135e96; } .pill.ready { background: #fcf9e8; color: #996800; } .pill.warn { background: #fcf0f1; color: #b32d2e; }
.desc { color: #50575e; font-size: 13.5px; }
.form-table { border-collapse: collapse; width: 100%; }
.form-table th { text-align: left; width: 200px; padding: 16px 10px 16px 0; vertical-align: top; font-weight: 600; }
.form-table td { padding: 12px 10px; }
.description { color: #646970; font-style: italic; margin: 6px 0 0; }
.chk { display: inline-flex; gap: 4px; margin: 0 14px 6px 0; }
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.regular-text { width: 25em; max-width: 100%; padding: 4px 8px; }
.small-text { width: 9em; padding: 4px 8px; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; margin-top: 12px; max-height: 560px; overflow: auto; }
.pick-row { display: flex; gap: 10px; align-items: center; border: 1px solid #dcdcde; padding: 6px; cursor: pointer; }
.pick-row:has(input:checked) { border-color: #2271b1; background: #f0f6fc; }
.pick-row img { width: 72px; height: 54px; object-fit: cover; }
.pick-row span { display: grid; }
.pick-row small { color: #646970; }
.mails { display: grid; gap: 10px; }
.mail { background: #fff; border: 1px solid #c3c4c7; }
.mail-h { padding: 8px 12px; border-bottom: 1px solid #f0f0f1; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mail-h span { color: #646970; font-size: 12px; }
.mail pre { margin: 0; padding: 10px 12px; white-space: pre-wrap; font: 12px/1.5 ui-monospace, Menlo, monospace; }
.reset { margin-top: 30px; color: #646970; }
.fixes td:first-child { width: 150px; }
@media (max-width: 900px) { #menu { display: none; } .cards { grid-template-columns: 1fr; } .row { flex-direction: column; align-items: flex-start; } }