@kody/doomPublic

/** KODOOM app stylesheet. */
export const appCss = '\n:root {\n  --bg: #070405;\n  --panel: #140a0c;\n  --amber: #ffb020;\n  --amber-hot: #ff8c00;\n  --ember: #ff5014;\n  --text: #ffe6b8;\n  --muted: #b8956a;\n  --line: #3a2210;\n  --ok: #6dff9a;\n  --warn: #ffcc66;\n  --bad: #ff6b6b;\n  --font: "Segoe UI", system-ui, sans-serif;\n  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n}\n* { box-sizing: border-box; }\nhtml, body {\n  margin: 0; min-height: 100%;\n  background: radial-gradient(ellipse at 50% 0%, #2a1008 0%, var(--bg) 55%);\n  color: var(--text); font-family: var(--font);\n}\nbody { display: flex; flex-direction: column; min-height: 100vh; }\na { color: var(--amber); }\n.top {\n  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;\n  justify-content: space-between; padding: 0.85rem 1.1rem;\n  border-bottom: 1px solid var(--line); background: rgba(8,3,4,0.85);\n  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5;\n}\n.brand { display: flex; align-items: center; gap: 0.7rem; }\n.brand svg { width: 40px; height: 40px; }\n.wordmark {\n  font-weight: 900; letter-spacing: 0.08em; font-size: 1.35rem;\n  color: var(--amber); text-shadow: 0 0 18px rgba(255,176,32,0.45);\n}\n.tag { color: var(--muted); font-size: 0.85rem; }\n.badge {\n  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;\n  padding: 0.35rem 0.65rem; border-radius: 999px; border: 1px solid var(--line);\n}\n.badge.ready { color: var(--ok); border-color: #1f5a35; background: #0c2416; }\n.badge.missing { color: var(--warn); border-color: #5a4410; background: #241a08; }\n.layout {\n  display: grid; grid-template-columns: minmax(0, 1fr) 320px;\n  gap: 1rem; padding: 1rem; flex: 1;\n}\n@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } }\n.stage {\n  background: #000; border: 1px solid var(--line); border-radius: 14px;\n  overflow: hidden; min-height: 360px; display: grid; place-items: center;\n  box-shadow: 0 0 40px rgba(255,80,20,0.12);\n  position: relative;\n}\n#canvas {\n  width: 100%; max-width: 960px; height: auto; aspect-ratio: 4/3;\n  background: #000; display: block; outline: none;\n}\n.overlay {\n  position: absolute; inset: 0; display: grid; place-items: center;\n  padding: 1.25rem; text-align: center; background: rgba(0,0,0,0.72);\n}\n.overlay.hidden { display: none; }\n.panel {\n  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;\n  padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem;\n}\n.panel h2 { margin: 0; font-size: 0.95rem; color: var(--amber); letter-spacing: 0.06em; text-transform: uppercase; }\n.row { display: flex; flex-wrap: wrap; gap: 0.5rem; }\nbutton, .btn {\n  appearance: none; border: 1px solid var(--amber-hot); background: linear-gradient(180deg, #3a1a08, #1a0a06);\n  color: var(--text); font-weight: 700; padding: 0.55rem 0.8rem; border-radius: 10px; cursor: pointer;\n}\nbutton:hover, .btn:hover { border-color: var(--amber); box-shadow: 0 0 12px rgba(255,176,32,0.25); }\nbutton:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }\nselect, input[type="number"] {\n  background: #0c0606; color: var(--text); border: 1px solid var(--line);\n  border-radius: 8px; padding: 0.45rem 0.55rem;\n}\n.status { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); white-space: pre-wrap; }\n.help, .legal { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }\n.help kbd {\n  font-family: var(--mono); border: 1px solid var(--line); border-radius: 4px;\n  padding: 0.05rem 0.3rem; background: #0c0606; color: var(--amber);\n}\n.mcp-forms { display: grid; gap: 0.65rem; }\n.mcp-forms form {\n  display: grid; gap: 0.35rem; padding: 0.55rem; border: 1px dashed var(--line); border-radius: 10px;\n}\n.offline-note {\n  display: none; margin: 0 1rem 1rem; padding: 0.85rem 1rem; border-radius: 12px;\n  border: 1px solid #5a4410; background: #241a08; color: var(--warn);\n}\n.offline-note.show { display: block; }\nfooter {\n  padding: 0.85rem 1.1rem 1.25rem; color: var(--muted); font-size: 0.78rem;\n  border-top: 1px solid var(--line);\n}\n'