/* ============================================================================
   ai-sim operator console — mobile-first dark console theme.
   No build step, no external assets. All values are plain CSS custom props.
   ========================================================================= */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* surfaces */
  --bg:            #0a0d12;
  --bg-elev:       #10141b;
  --bg-card:       #141a22;
  --bg-inset:      #0c1016;
  --bg-hover:      #1b222c;
  --bg-active:     #232c38;

  /* lines */
  --line:          #232c38;
  --line-strong:   #33404f;
  --line-focus:    #5b8cff;

  /* text */
  --fg:            #e6edf5;
  --fg-muted:      #9aa8ba;
  --fg-dim:        #6b7889;

  /* accents */
  --accent:        #5b8cff;
  --accent-strong: #3f6fe0;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(91, 140, 255, 0.14);

  --ok:            #3ecf8e;
  --ok-soft:       rgba(62, 207, 142, 0.14);
  --warn:          #f0b44c;
  --warn-soft:     rgba(240, 180, 76, 0.14);
  --danger:        #ef6a6a;
  --danger-soft:   rgba(239, 106, 106, 0.14);
  --info:          #6cc4f0;
  --info-soft:     rgba(108, 196, 240, 0.14);

  /* shape + rhythm */
  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     18px;
  --radius-pill:   999px;

  --space-1:       4px;
  --space-2:       8px;
  --space-3:       12px;
  --space-4:       16px;
  --space-5:       22px;
  --space-6:       30px;

  --tap:           44px;          /* minimum touch target */
  --tap-lg:        52px;

  --tabbar-h:      62px;
  --safe-b:        env(safe-area-inset-bottom, 0px);
  --safe-t:        env(safe-area-inset-top, 0px);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --shadow:        0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 10px 30px rgba(0, 0, 0, 0.55);

  --dur:           140ms;
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:          #eef1f5;
    --bg-elev:     #ffffff;
    --bg-card:     #ffffff;
    --bg-inset:    #f4f6f9;
    --bg-hover:    #eef1f5;
    --bg-active:   #e2e7ee;

    --line:        #dbe1e9;
    --line-strong: #c3ccd8;
    --line-focus:  #3f6fe0;

    --fg:          #161c24;
    --fg-muted:    #5b6779;
    --fg-dim:      #7d8898;

    --accent:      #3f6fe0;
    --accent-soft: rgba(63, 111, 224, 0.12);

    --ok:          #1f9d63;
    --ok-soft:     rgba(31, 157, 99, 0.12);
    --warn:        #a9761b;
    --warn-soft:   rgba(169, 118, 27, 0.14);
    --danger:      #c63a3a;
    --danger-soft: rgba(198, 58, 58, 0.12);
    --info:        #1f7fae;
    --info-soft:   rgba(31, 127, 174, 0.12);

    --shadow:      0 1px 3px rgba(20, 30, 50, 0.1);
    --shadow-lg:   0 8px 24px rgba(20, 30, 50, 0.16);
  }
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--line-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------- helpers --- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-3); top: -60px; z-index: 60;
  background: var(--accent); color: var(--accent-fg);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  text-decoration: none; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-3); }

.code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  overflow-x: auto;
  word-break: break-all;
}
.code--block {
  display: block; width: 100%; white-space: pre-wrap; margin-top: var(--space-2);
}

.hint {
  color: var(--fg-dim); font-size: 0.82rem; line-height: 1.45;
}
.empty { color: var(--fg-dim); font-size: 0.86rem; padding: var(--space-4) 0; }

/* -------------------------------------------------------------- topbar --- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: calc(var(--space-2) + var(--safe-t)) var(--space-4) var(--space-2);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__id { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.topbar__logo {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
}
.topbar__name { font-weight: 650; letter-spacing: 0.01em; }
.topbar__run {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__status { display: flex; align-items: center; gap: var(--space-2); }
.topbar__who { display: flex; align-items: center; gap: var(--space-2); }
.topbar__who #topbar-user {
  font-size: 0.8rem; color: var(--fg-muted); max-width: 9ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* connection pill */
.conn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--fg-muted);
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--bg-inset); border: 1px solid var(--line);
}
.conn__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-dim); }
.conn[data-state="online"]  { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.conn[data-state="online"] .conn__dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.conn[data-state="offline"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.conn[data-state="offline"] .conn__dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.conn[data-state="degraded"] { color: var(--warn); }
.conn[data-state="degraded"] .conn__dot { background: var(--warn); }

/* ---------------------------------------------------------- panel region - */
.panel-region {
  padding: var(--space-4) var(--space-4) calc(var(--tabbar-h) + var(--safe-b) + var(--space-6));
  max-width: 1100px; margin: 0 auto;
}
.view { display: none; animation: fade-in var(--dur) var(--ease); }
.view.is-active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.view__head { margin-bottom: var(--space-5); }
.view__title {
  font-size: clamp(1.45rem, 5vw, 1.9rem);
  font-weight: 680; letter-spacing: -0.02em; line-height: 1.2;
}
.view__lede { color: var(--fg-muted); font-size: 0.9rem; margin-top: var(--space-1); }

.view__foot {
  display: flex; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-6); padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 0.74rem; color: var(--fg-dim); font-family: var(--font-mono);
}

/* ---------------------------------------------------------------- cards -- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow);
}
.card__head {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3); flex-wrap: wrap;
}
.card__title { font-size: 1rem; font-weight: 640; letter-spacing: -0.01em; }
.subhead {
  font-size: 0.76rem; font-weight: 680; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--fg-muted);
  margin: var(--space-4) 0 var(--space-2);
}
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack--tight { gap: var(--space-2); margin-top: var(--space-3); }

/* --------------------------------------------------------------- pills --- */
.pill {
  font-size: 0.7rem; font-weight: 620; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--bg-inset); border: 1px solid var(--line); color: var(--fg-muted);
  text-transform: uppercase;
}
.pill--ok   { color: var(--ok);     background: var(--ok-soft);     border-color: transparent; }
.pill--warn { color: var(--warn);    background: var(--warn-soft);    border-color: transparent; }
.pill--err  { color: var(--danger);  background: var(--danger-soft); border-color: transparent; }
.pill--info { color: var(--info);    background: var(--info-soft);   border-color: transparent; }

.count {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg-inset); border: 1px solid var(--line); color: var(--fg-muted);
}
.count--warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }

/* -------------------------------------------------------------- fields --- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label {
  font-size: 0.78rem; font-weight: 600; color: var(--fg-muted);
  letter-spacing: 0.01em;
}
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; }

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px var(--space-3);
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 16px;              /* prevents iOS zoom-on-focus */
  line-height: 1.4;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.input:hover:not(:disabled) { border-color: var(--line-focus); }
.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder { color: var(--fg-dim); }
.input:disabled, .input[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed;
}
.input--area { resize: vertical; min-height: 96px; font-family: var(--font-mono); font-size: 0.86rem; }
.input--inline { width: auto; min-width: 78px; flex: none; }

select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239aa8ba' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}
@media (prefers-color-scheme: light) {
  select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6779' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  }
}
select.input:invalid { color: var(--fg-dim); }

.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* -------------------------------------------------------------- buttons -- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.actions--end { justify-content: flex-end; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  padding: 10px var(--space-4);
  background: var(--bg-hover);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform 80ms var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--bg-active); border-color: var(--line-focus); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled {
  opacity: 0.45; cursor: not-allowed;
  background: var(--bg-inset);
}
.btn--primary {
  background: var(--accent); border-color: transparent; color: var(--accent-fg);
}
.btn--primary:hover:not(:disabled) { background: var(--accent-strong); border-color: transparent; }
.btn--danger {
  background: var(--danger); border-color: transparent; color: #fff;
}
.btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, #000); }
.btn--ghost {
  background: transparent; border-color: var(--line);
}
.btn--ghost:hover:not(:disabled) { background: var(--bg-hover); }
.btn--sm { min-height: var(--tap); padding: 6px var(--space-3); font-size: 0.82rem; }
.btn--icon { min-width: var(--tap); padding: 0; flex: none; }
.btn--block { width: 100%; }

/* in-flight affordance */
.btn[aria-busy="true"] { position: relative; pointer-events: none; opacity: 0.75; }
.btn[aria-busy="true"] .btn__label {
  padding-left: 20px; position: relative;
}
.btn[aria-busy="true"] .btn__label::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.linklike {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 6px 0;
  color: var(--accent); font-size: 0.88rem; font-weight: 600;
  cursor: pointer; background: none; border: 0; width: 100%; text-align: left;
}

/* ---------------------------------------------------------- permission --- */
.is-locked { opacity: 0.5; }
.is-locked::after {
  content: "locked"; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--warn); margin-left: auto; padding-left: var(--space-2);
}
.btn[data-perm][data-denied="true"] {
  border-color: var(--danger); color: var(--danger); background: var(--danger-soft);
  cursor: not-allowed;
}
.btn[data-perm][data-denied="true"]:hover { background: var(--danger-soft); }

/* ------------------------------------------------------------ banners ---- */
.banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: var(--space-4);
  background: var(--bg-card);
}
.banner__text { display: flex; align-items: baseline; gap: 6px; font-size: 0.9rem; }
.banner--warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.banner--err  { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.banner--ok   { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.banner--info { background: var(--info-soft); border-color: transparent; color: var(--info); }

.callout {
  padding: var(--space-3); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-inset);
  font-size: 0.86rem;
}
.callout__title { font-weight: 650; margin-bottom: var(--space-1); }
.callout--secret { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); }

/* --------------------------------------------------------------- rows ---- */
.rows { display: flex; flex-direction: column; }
.rows > li {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.rows > li:first-child { border-top: 0; }
.row__top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.row__title {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
  color: var(--fg); overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.row__meta { font-size: 0.76rem; color: var(--fg-dim); line-height: 1.5; }
.row__sub  { font-size: 0.78rem; color: var(--fg-muted); }
.row__badge {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--bg-inset); border: 1px solid var(--line); color: var(--fg-muted);
}
.row__badge[data-tone="ok"]     { color: var(--ok);     background: var(--ok-soft);     border-color: transparent; }
.row__badge[data-tone="warn"]   { color: var(--warn);    background: var(--warn-soft);    border-color: transparent; }
.row__badge[data-tone="err"]    { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.row__badge[data-tone="info"]   { color: var(--info);   background: var(--info-soft);   border-color: transparent; }
.row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.76rem; font-family: var(--font-mono);
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--bg-inset); border: 1px solid var(--line); color: var(--fg-muted);
}
.chip:has(input:checked) {
  background: var(--accent-soft); border-color: transparent; color: var(--accent);
  font-weight: 600;
}
.chip input { margin: 0; accent-color: var(--accent); }

/* ------------------------------------------------------------ key/value -- */
.kv { display: flex; flex-direction: column; gap: 1px; border-radius: var(--radius); overflow: hidden; }
.kv > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); padding: 7px 0; border-top: 1px solid var(--line);
}
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--fg-dim); font-size: 0.78rem; flex: none; }
.kv dd {
  color: var(--fg); font-size: 0.86rem; font-family: var(--font-mono);
  text-align: right; word-break: break-word; min-width: 0;
}
.kv--grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3); background: var(--bg-inset);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3);
}
.kv--grid > div { flex-direction: column; align-items: flex-start; gap: 2px; border: 0; padding: 0; }
.kv--grid dd { text-align: left; }

/* ------------------------------------------------------------ controls --- */
.ctl-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ctl-row--tools { gap: var(--space-1); }
.ctl-row--tools .btn--icon { min-width: 40px; }
.ctl-row--tools .hint { margin-left: auto; }

/* -------------------------------------------------------------- canvas --- */
.canvas-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-inset);
  overflow: hidden;
}
#world-canvas { width: 100%; height: 260px; display: block; }
.canvas-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--fg-dim); font-size: 0.84rem; text-align: center;
  padding: var(--space-4); background: var(--bg-inset);
}
.canvas-controls { margin-top: var(--space-2); }

/* ---------------------------------------------------------- tab bar ------ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--line);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px var(--space-1);
  background: none; border: 0; cursor: pointer;
  color: var(--fg-dim);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.02em;
  transition: color var(--dur) var(--ease);
  min-height: var(--tap);
}
.tab svg { width: 22px; height: 22px; flex: none; }
.tab:hover { color: var(--fg-muted); }
.tab[aria-selected="true"] { color: var(--accent); }
.tab__badge {
  position: absolute; top: 6px; margin-left: 18px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--danger); color: #fff;
  font-size: 0.58rem; font-weight: 700; line-height: 15px; text-align: center;
}
.tab { position: relative; }

/* ------------------------------------------------------------- toasts ---- */
.toast-stack {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--space-3));
  z-index: 50; display: flex; flex-direction: column; gap: var(--space-2);
  padding: 0 var(--space-4); pointer-events: none;
  max-width: 560px; margin: 0 auto;
}
.toast {
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  box-shadow: var(--shadow-lg);
  animation: toast-in 200ms var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast.is-leaving { animation: toast-out 180ms var(--ease) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
.toast__title { font-weight: 650; font-size: 0.88rem; }
.toast__code  { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-dim); }
.toast__msg   { font-size: 0.84rem; color: var(--fg-muted); line-height: 1.45; }
.toast--ok    { border-left-color: var(--ok); }
.toast--warn  { border-left-color: var(--warn); }
.toast--err   { border-left-color: var(--danger); }
.toast--info  { border-left-color: var(--info); }

/* ------------------------------------------------------------ sheet ------ */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  animation: fade-in 140ms var(--ease);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-height: 88dvh; overflow-y: auto;
  background: var(--bg-elev);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4) calc(var(--safe-b) + var(--space-5));
  animation: sheet-up 220ms var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sheet__bar {
  width: 38px; height: 4px; border-radius: var(--radius-pill);
  background: var(--line-strong); margin: 0 auto var(--space-3);
}
.sheet__title { font-size: 1.05rem; font-weight: 660; margin-bottom: var(--space-1); }
.sheet__text  { color: var(--fg-muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: var(--space-3); }
.sheet__detail { margin-bottom: var(--space-3); }

/* ------------------------------------------------------- event log ------- */
#event-log { max-height: 260px; overflow-y: auto; }
#event-log > li { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-dim); }
#event-log .ev__t { color: var(--fg-dim); }
#event-log .ev--err { color: var(--danger); }
#event-log .ev--warn { color: var(--warn); }
#event-log .ev--ok { color: var(--ok); }

/* --------------------------------------------------- loading skeleton ---- */
.is-loading { position: relative; color: transparent !important; }
.is-loading::after {
  content: ""; position: absolute; inset: 8px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-inset), var(--bg-hover), var(--bg-inset));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ------------------------------------------------------ larger screens --- */
@media (min-width: 640px) {
  .panel-region { padding: var(--space-5) var(--space-5) calc(var(--tabbar-h) + var(--safe-b) + var(--space-6)); }
  #world-canvas { height: 360px; }
  .card { padding: var(--space-5); }
  .ctl-row--tools { gap: var(--space-2); }
}

@media (min-width: 900px) {
  .panel-region {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }
  .view__head { grid-column: 1 / -1; }
  .card { margin-bottom: 0; }
  .view__foot { grid-column: 1 / -1; }
  #world-canvas { height: 440px; }
  .tab { font-size: 0.72rem; }
}

/* ------------------------------------------------------------- motion ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}