/* Shared look for the explorer pages, matching the Illuminate AI Agent Factory app.
   Loaded after each page's own styles, so these base rules win and the page rules use these colours. */
:root {
  --black: #0b0e13; --surface: #0f1318; --raised: #141922; --grid-line: #1a2233;
  --lime: #b2ef69; --cyan: #00e5ff; --sky: #49c8ef; --coral: #ef6969; --orange: #efa549;
  --white: #f5f5f5; --grey: #d3d3d3; --dk: #878787;
  /* Names the page styles use. */
  --bg: var(--black); --panel: var(--surface); --text: var(--white); --muted: var(--dk);
  --border: rgba(0, 229, 255, .12); --accent: var(--cyan); --ok: var(--lime); --bad: var(--coral);
  --warn: var(--orange); --code: var(--raised);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--black); }
body { margin: 0; background: var(--black); color: var(--white); font: 14px/1.5 Rubik, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent 40px),
                    repeating-linear-gradient(0deg, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent 40px); }
main, .ppx-header { position: relative; z-index: 1; }
main { padding-top: 28px; }
h1 { font-size: 22px; font-weight: 700; color: var(--white); }
h2 { font-size: 15px; font-weight: 600; color: var(--white); }
p.sub { color: var(--dk); font-size: 13px; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
label { color: var(--dk); font-size: 12px; }
input, select, textarea, .form select { background: var(--black); color: var(--grey); border: 1px solid rgba(0, 229, 255, .1);
  border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 13px; outline: none; transition: border-color .2s; }
input:focus, select:focus, textarea:focus { border-color: rgba(0, 229, 255, .5); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--lime); }
textarea, pre, code, #log, .callres { font-family: Consolas, Monaco, monospace; }

/* Buttons: lime for the main action, cyan outline for the rest. */
button { background: var(--lime); color: var(--black); border: 1px solid var(--lime); border-radius: 20px; padding: 9px 22px;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: all .2s; }
button:hover:not(:disabled) { filter: brightness(1.08); }
button.secondary { background: transparent; color: var(--cyan); border-color: rgba(0, 229, 255, .3); }
button.secondary:hover:not(:disabled) { background: rgba(0, 229, 255, .08); }
button.danger { background: transparent; color: var(--coral); border-color: rgba(239, 105, 105, .3); }
button:disabled { opacity: .5; cursor: default; }
.tabs button.active { background: rgba(0, 229, 255, .14); color: var(--cyan); border-color: rgba(0, 229, 255, .5); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

pre { background: var(--black); border: 1px solid var(--border); border-radius: 10px; color: var(--grey); }
#log, .callres { background: var(--black); border: 1px solid var(--border); border-radius: 10px; color: var(--grey); }
th { background: var(--raised); color: var(--grey); }
th, td { border-color: var(--border); }
tbody tr:hover { background: rgba(0, 229, 255, .05); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.tile .v { color: var(--white); }
dialog { background: var(--surface); color: var(--white); border: 1px solid rgba(0, 229, 255, .25); border-radius: 14px; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.note { color: var(--dk); }
::selection { background: rgba(0, 229, 255, .3); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--raised); border-radius: 5px; border: 2px solid var(--black); }

/* Header added to every page by auth.js. */
.ppx-header { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 10px 24px; min-height: 56px;
  background: rgba(11, 14, 19, .92); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(6px); }
.ppx-header .brand { display: flex; align-items: center; gap: 12px; color: var(--white); font-weight: 600; font-size: 14px; }
.ppx-header .brand:hover { text-decoration: none; }
.ppx-header .brand img { height: 22px; opacity: .9; }
.ppx-header .brand span { padding-left: 12px; border-left: 1px solid var(--border); }
.ppx-header nav { display: flex; gap: 4px; flex: 1 1 auto; flex-wrap: wrap; }
.ppx-header nav a { color: var(--dk); font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 16px; }
.ppx-header nav a:hover { color: var(--white); text-decoration: none; }
.ppx-header nav a[aria-current="page"] { color: var(--cyan); background: rgba(0, 229, 255, .1); }
.ppx-header .who { font-size: 12px; color: var(--grey); }
.ppx-header .who small { color: var(--dk); }
.ppx-header .link-btn { background: none; border: none; color: var(--dk); padding: 4px 6px; font-size: 11px; letter-spacing: .04em; }
.ppx-header .link-btn:hover { color: var(--cyan); filter: none; }
.ppx-renew { flex-basis: 100%; font-size: 13px; color: var(--orange); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ppx-renew button { padding: 5px 14px; }
[hidden] { display: none !important; }
/* The bar above a results table. Items with class "end", such as Refresh, sit at the right. */
.tablebar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tablebar > .end { margin-left: auto; }
/* Details and edit windows (environments and development pages). */
dialog { padding: 0; width: min(720px, calc(100vw - 32px)); }
.dlg-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 16px 16px 8px; }
.dlg-head h2 { margin: 0; font-size: 17px; }
.dlg-body { padding: 0 16px 8px; max-height: 70vh; overflow: auto; }
.dlg-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.dlg-body h3 { font-size: 12px; margin: 14px 0 4px; color: var(--dk); text-transform: uppercase; letter-spacing: .04em; }
dl.kv { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px 12px; margin: 8px 0 12px; }
dl.kv dt { color: var(--dk); font-size: 12px; padding-top: 2px; } dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.form { display: grid; gap: 14px; margin: 8px 0; }
.form select { width: 100%; }
.changes { margin: 8px 0; padding-left: 18px; } .changes li { margin: 4px 0; }
.callres { font-family: Consolas, monospace; font-size: 12px; background: var(--black); border-radius: 6px; padding: 8px; white-space: pre-wrap; }
.warnbox { border: 1px solid var(--orange); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin: 8px 0; }
@media (max-width: 560px) { dl.kv { grid-template-columns: 1fr; } }
/* Loading screen (loading.js), from Agent Factory's LoadingOrb and the petal chase in illuminate.css. */
.ilm-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px; text-align: center; }
.ilm-title { font-size: 14px; font-weight: 600; color: var(--dk); text-transform: uppercase; letter-spacing: .08em; }
.ilm-mark { display: block; overflow: visible; }
.ilm-mark .ilm-petal { animation: ilm-chase 1.5s ease-in-out infinite; will-change: opacity; }
.ilm-mark .ilm-petal:nth-of-type(1) { animation-delay: 0s; }
.ilm-mark .ilm-petal:nth-of-type(2) { animation-delay: .19s; }
.ilm-mark .ilm-petal:nth-of-type(3) { animation-delay: .38s; }
.ilm-mark .ilm-petal:nth-of-type(4) { animation-delay: .57s; }
@keyframes ilm-chase { 0%, 100% { opacity: .3; } 28% { opacity: 1; } }
.ilm-word-box { position: relative; display: flex; align-items: center; justify-content: center; }
.ilm-word { position: absolute; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: linear-gradient(90deg, var(--cyan), var(--lime)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; transition: opacity .25s, transform .25s; }
.ilm-word.out { opacity: 0; transform: translateY(-6px); }
.ilm-subtitle { color: var(--dk); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .ilm-mark .ilm-petal { animation: none; opacity: 1; }
  .ilm-word { transition: none; }
}
@media (max-width: 640px) {
  .ppx-header { padding: 10px 16px; gap: 10px; }
  .ppx-header .brand span { display: none; }
}