/* Colours, fonts, page and window frame. */
:root {
  --face: #c0c0c0; --hi: #ffffff; --lt: #dfdfdf; --sh: #808080; --dk: #0a0a0a; --navy: #000080;
  --good: #008000; --bad: #800000;
  --raised: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--sh), inset 2px 2px var(--lt);
  --sunken: inset -1px -1px var(--hi), inset 1px 1px var(--sh), inset -2px -2px var(--lt), inset 2px 2px var(--dk);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
}
* { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: #008080; color: #000; font: 13px/1.35 var(--sans); padding: 6px; }

/* window frame */
#win { display: flex; flex-direction: column; height: calc(100vh - 12px); min-height: 520px; background: var(--face); box-shadow: var(--raised); padding: 3px; }
.title-bar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold; padding: 3px 3px 3px 5px; display: flex; align-items: center; gap: 6px; flex: none; }
.title-bar h1 { font-size: 13px; margin: 0; cursor: pointer; }
.chip { font-weight: normal; }
#app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 4px; padding-top: 3px; }
#panel { overflow-y: auto; padding: 4px 10px 10px; }