/* Mundus Novus app chrome: what every app shares on top of tokens.css. The frosted bar, sheets, dialogs and
   controls; each app keeps its own layout. */
.cs, .cs * { box-sizing: border-box; }
.cs {
  --mn-fill: color-mix(in srgb, var(--mn-fg) 8%, transparent);
  --mn-fill-2: color-mix(in srgb, var(--mn-fg) 14%, transparent);
  --mn-glass-edge: color-mix(in srgb, var(--mn-fg) 10%, transparent);
  --mn-shadow-2: 0 18px 48px rgb(0 0 0 / .28);
  --mn-wallpaper: radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--mn-sea) 16%, transparent), transparent 60%);
  font-family: var(--mn-text); color: var(--mn-fg); background: var(--mn-bg);
}
.cs :focus-visible { outline: 3px solid var(--mn-focus); outline-offset: 2px; border-radius: var(--mn-radius-s); }
.cs ::selection { background: color-mix(in srgb, var(--mn-gold) 40%, transparent); }
.mn-display { font-family: var(--mn-display); text-transform: uppercase; letter-spacing: .02em; -webkit-font-smoothing: none; }

/* the key dialog the host shows */
dialog.mn-keys { border: 1px solid var(--mn-line); border-radius: var(--mn-radius-l); padding: 0; width: min(440px, 92vw); color: var(--mn-fg); background: var(--mn-surface); box-shadow: var(--mn-shadow-2, 0 18px 48px rgb(0 0 0 / .3)); }
dialog.mn-keys::backdrop { background: rgb(10 3 4 / .45); backdrop-filter: blur(6px); }
dialog.mn-keys[open] { animation: mn-sheet var(--mn-med) var(--mn-ease-out); }
dialog.mn-keys form { padding: 22px; display: grid; gap: 12px; }
dialog.mn-keys h2 { margin: 0; font: 400 20px var(--mn-display); text-transform: uppercase; -webkit-font-smoothing: none; }
dialog.mn-keys p { margin: 0; color: var(--mn-fg-2); font-size: 14px; line-height: 1.5; }
dialog.mn-keys label { display: grid; gap: 6px; font-size: 13px; color: var(--mn-fg-2); }
dialog.mn-keys input, dialog.mn-keys select { font: 14px var(--mn-mono); padding: 10px 12px; border-radius: var(--mn-radius-s); border: 1px solid var(--mn-line); background: var(--mn-bg); color: var(--mn-fg); }
dialog.mn-keys menu { display: flex; gap: 8px; margin: 6px 0 0; padding: 0; }
dialog.mn-keys menu span { flex: 1; }
dialog.mn-keys button { font: 600 14px var(--mn-text); padding: 9px 14px; border-radius: var(--mn-radius-s); border: 1px solid var(--mn-line); background: var(--mn-surface-2); color: var(--mn-fg); cursor: pointer; }
dialog.mn-keys button.primary { background: var(--mn-accent); border-color: transparent; color: #fff; }
@keyframes mn-sheet { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* the MNCloud panel (mn-cloud-ui.js) */
dialog.mn-cloud { width: min(520px, 94vw); }
.mn-cloud-list { display: grid; gap: 6px; max-height: 44vh; overflow: auto; }
.mn-cloud-file { display: grid; text-align: left; gap: 2px; width: 100%; padding: 10px 12px !important; }
.mn-cloud-file small, .mn-cloud-empty, .mn-cloud-msg { color: var(--mn-fg-2); font-size: 13px; }
.mn-cloud-auto { display: flex !important; flex-direction: row; gap: 8px; align-items: center; color: var(--mn-fg) !important; }