/* UUON engine kit: the uuon.world homepage design, shared by every /apps engine.
   Load this stylesheet LAST in <head> so it overrides an engine's own styles.
   Tokens and components mirror /styles.css on the homepage. */
@import url('/fonts/fonts.css');

:root {
  --void: #000;
  --panel: #0a0a0a;
  --white: #fff;
  --dim: rgba(255, 255, 255, 0.72);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.28);
  --accent: #b4ffc8;
  --accent-dim: rgba(180, 255, 200, 0.14);
  --glow: 0 0 14px rgba(180, 255, 200, 0.55), 0 0 28px rgba(150, 255, 215, 0.25);
  --warn: #ffd27a;
  --down: #ff8a8a;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 14px;

  /* Standard control sizes: every engine's controls use these */
  --ctl-text: 15px;     /* labels, values, buttons, inputs */
  --ctl-head: 13px;     /* section headings */
  --ctl-target: 44px;   /* minimum touch/click height for buttons and inputs */
  --ctl-gap: 12px;      /* space between controls */
}

html, body { background: var(--void) !important; color: var(--white) !important; }
body {
  margin: 0;
  font: 400 16px/1.55 var(--sans) !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }

/* Top bar (same as the homepage header) */
.top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.top-in { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; padding: 0 clamp(14px, 3vw, 28px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1rem var(--mono); letter-spacing: 0.12em; color: var(--white); }
.brand .mark { width: auto; height: 26px; display: block; filter: drop-shadow(0 0 6px rgba(150, 255, 215, 0.55)); }
.brand .dot { color: var(--accent); text-shadow: var(--glow); }
.top nav { display: flex; gap: 6px; }
.top nav a { font: 400 0.9rem var(--mono); letter-spacing: 0.06em; color: var(--dim); padding: 10px 14px; border-radius: 8px; white-space: nowrap; }
.top nav a:hover { color: var(--accent); background: rgba(180, 255, 200, 0.08); text-shadow: 0 0 10px rgba(180, 255, 200, 0.6); }

/* Headings and section labels */
h1, h2, h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 10px; }
h4, .label, .eyebrow {
  font: 700 var(--ctl-head) var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(180, 255, 200, 0.22);
  text-shadow: 0 0 10px rgba(180, 255, 200, 0.35);
}
p { color: var(--dim); }

/* Buttons: pill outlines at the standard size; mint with glow when active */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ctl-target);
  font: 700 var(--ctl-text) var(--mono); letter-spacing: 0.04em;
  color: var(--white); background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(180, 255, 200, 0.45); border-radius: 999px;
  padding: 10px 18px; cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
button.on, button[aria-pressed="true"], button.primary, .btn.primary {
  background: var(--accent); color: #000; border-color: var(--accent); box-shadow: var(--glow);
}
button.on:hover, button.primary:hover, .btn.primary:hover { background: var(--white); border-color: var(--white); color: #000; }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Sliders: thick track, glowing mint thumb, 44px row */
input[type="range"] {
  width: 100%; height: 28px; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; accent-color: var(--accent); cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(180, 255, 200, 0.55), rgba(255, 255, 255, 0.14)); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: var(--accent); border: 2px solid #000; box-shadow: var(--glow);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(180, 255, 200, 0.55), rgba(255, 255, 255, 0.14)); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid #000; box-shadow: var(--glow); }
input[type="range"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
select, input[type="text"], input[type="number"], textarea {
  min-height: var(--ctl-target);
  font: 400 var(--ctl-text) var(--mono); color: var(--white);
  background: #000; border: 1px solid rgba(180, 255, 200, 0.35); border-radius: 10px; padding: 8px 12px;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }

/* Labels and readouts: never smaller than the standard text size */
label, output, .value, .row > span, .row > label {
  font-size: var(--ctl-text) !important; color: var(--dim);
}
output, .value { font-family: var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(180, 255, 200, 0.4); }

/* Panels: the homepage card (panel background, 1px border, 14px radius, mint edge glow) */
aside, .panel, .side {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: inset -1px 0 0 rgba(180, 255, 200, 0.12);
}
aside { border-radius: 0; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover { border-color: rgba(180, 255, 200, 0.5); box-shadow: 0 0 18px rgba(180, 255, 200, 0.14); }

aside span, .side span, .panel span {
  font-size: var(--ctl-text) !important; color: var(--dim) !important;
}
aside .card span, .side .card span, .panel .card span { font-size: 12px !important; letter-spacing: 0.12em; color: var(--accent) !important; }

canvas { display: block; }
pre, code { font-family: var(--mono); }
pre { background: #000; border: 1px solid var(--border); border-radius: 10px; color: var(--dim); font-size: 14px; }

@media (max-width: 760px) {
  .top-in { height: 54px; }
  .top nav a { padding: 8px 10px; }
}

/* ---- control polish (Fibonacci Squares v6 look): clean-cut edges, glow on the live state ---- */
button, .btn {
  min-height: 44px; padding: 10px 16px; border-radius: 10px;
  border: 1px solid rgba(180, 255, 200, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 rgba(180, 255, 200, 0);
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
button:hover, .btn:hover {
  border-color: var(--accent); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 16px rgba(180, 255, 200, 0.32);
}
button:active, .btn:active { transform: translateY(1px); }
button.on, button[aria-pressed="true"], button.primary, .btn.primary {
  background: linear-gradient(180deg, #d4ffe0, var(--accent));
  color: #000; border-color: #d4ffe0;
  box-shadow: 0 0 18px rgba(180, 255, 200, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
button.on:hover, button[aria-pressed="true"]:hover { color: #000; background: var(--white); border-color: var(--white); }
button:focus-visible, .btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* sliders: clean square-cut thumb with a glowing mint core */
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), rgba(180, 255, 200, 0.12)); box-shadow: 0 0 10px rgba(180, 255, 200, 0.25); }
input[type="range"]::-webkit-slider-thumb {
  width: 18px; height: 18px; margin-top: -7px; border-radius: 3px;
  background: var(--white); border: 0; box-shadow: 0 0 0 2px #000, 0 0 14px rgba(180, 255, 200, 0.7);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), rgba(180, 255, 200, 0.12)); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 3px; background: var(--white); border: 0; box-shadow: 0 0 14px rgba(180, 255, 200, 0.7); }
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 2px #000, 0 0 22px rgba(180, 255, 200, 0.95); }

/* checkboxes and switches: square cut, glow when on */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(180, 255, 200, 0.5); background: #000; display: inline-grid; place-content: center; }
input[type="checkbox"]::before { content: ""; width: 9px; height: 9px; border-radius: 1px; background: var(--accent); transform: scale(0); transition: transform 0.12s; }
input[type="checkbox"]:checked { box-shadow: 0 0 12px rgba(180, 255, 200, 0.5); }
input[type="checkbox"]:checked::before { transform: scale(1); }

/* fields: sharp 8px corners, glow on focus */
select, input[type="text"], input[type="number"], textarea {
  border-radius: 8px; background: #050807; border: 1px solid rgba(180, 255, 200, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
select:focus, input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(180, 255, 200, 0.35); }

/* headings and readouts: a thin glowing rule */
h4, .label, .eyebrow { border-bottom: 1px solid rgba(180, 255, 200, 0.35); text-shadow: 0 0 12px rgba(180, 255, 200, 0.5); }
output, .value { text-shadow: 0 0 10px rgba(180, 255, 200, 0.55); }

/* panels and cards: clean edge, faint mint line on top */
.card, aside, .panel, .side {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 60%), var(--panel);
  box-shadow: inset 0 1px 0 rgba(180, 255, 200, 0.18), inset -1px 0 0 rgba(180, 255, 200, 0.1);
}
aside { border-radius: 0; }