:root { --bg: #f4f4f2; --fg: #111; --muted: #777; --line: #e2e2df; --accent: #111; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.4 system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
.btn { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.small { padding: 4px 10px; font-size: 13px; }

/* shell */
#app { height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.topbar .brand { font-weight: 800; letter-spacing: -0.02em; }
.topbar .day { color: var(--muted); font-size: 13px; }
.topbar .spacer { flex: 1; }
.topbar img { width: 28px; height: 28px; border-radius: 50%; }
.frame { flex: 1; min-height: 0; display: flex; justify-content: center; }
.frame iframe { width: 100%; max-width: 480px; height: 100%; border: 0; background: #fff; }
.frame .msg { align-self: center; color: var(--muted); text-align: center; padding: 20px; }

/* login */
.login { max-width: 360px; margin: 80px auto; padding: 24px; background: #fff; border-radius: 16px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.login h1 { margin: 0 0 6px; font-size: 22px; }
.login input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.login .hint { color: var(--muted); font-size: 13px; }

/* sheet (profile / people) */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; max-height: 80vh; overflow: auto; background: #fff; border-radius: 18px 18px 0 0; padding: 18px; }
.sheet h2 { margin: 0 0 12px; font-size: 18px; }
.person { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.person img { width: 40px; height: 40px; border-radius: 50%; background: #eee; }
.person .name { font-weight: 600; }
.person .bio { color: var(--muted); font-size: 13px; }
.person .grow { flex: 1; }

/* admin */
body.admin #app { display: grid; grid-template-columns: 320px 1fr; height: 100%; }
.admin .side { border-right: 1px solid var(--line); background: #fff; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.admin .main { display: flex; flex-direction: column; min-width: 0; }
.admin .site-row { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.admin .site-row.active { background: var(--bg); }
.admin .site-row .st { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #eee; }
.admin .site-row .st.generating { background: #ffe9a8; }
.admin .site-row .st.error { background: #ffc8c8; }
.admin .site-row .st.ready { background: #cdf5d4; }
.admin .toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.admin .editor { display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0; }
.admin .files { border-right: 1px solid var(--line); background: #fff; overflow: auto; }
.admin .files div { padding: 6px 12px; cursor: pointer; font-family: ui-monospace, monospace; font-size: 13px; }
.admin .files div.active { background: var(--bg); }
.admin textarea.code { width: 100%; height: 100%; border: 0; padding: 12px; font: 13px/1.4 ui-monospace, monospace; resize: none; }
.admin .preview { flex: 1; display: flex; }
.admin .preview iframe { flex: 1; border: 0; background: #fff; }
.admin .log { font: 12px/1.4 ui-monospace, monospace; background: #fff; border-top: 1px solid var(--line); max-height: 160px; overflow: auto; padding: 8px 12px; white-space: pre-wrap; }
.admin .errors { color: #b00020; padding: 6px 14px; background: #fff3f3; font-size: 13px; }
.admin textarea.prompt { width: 100%; height: 70px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }