:root {
  --bg:#f6f5f2; --card:#fff; --ink:#1f2330; --muted:#6b7080; --line:#e6e3dc;
  --red:#d64545; --red-bg:#fdecec; --yel:#c98a00; --yel-bg:#fff6dc;
  --ok:#2f8f5b; --ok-bg:#e7f5ec; --acc:#4b3fb8; --acc-bg:#eeecfb;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:15px/1.45 -apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); }
h1,h2,h3,.t,.logo { hyphens:none; overflow-wrap:normal; word-break:normal; }
h1 { font-size:19px; margin:0 0 4px; }
h2 { font-size:17px; margin:0 0 6px; }
h3 { font-size:15px; margin:12px 0 6px; }
p { margin:6px 0 12px; }
a { color:var(--acc); }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.65; }
:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
.demo { background:var(--ink); color:#fff; font-size:12px; text-align:center; padding:6px 10px; }
.stale { background:var(--yel-bg); color:#775200; padding:9px 14px; font-size:13px; }
.app { display:flex; flex-direction:column; min-height:calc(100vh - 28px); }
nav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line); padding:4px 4px max(4px,env(safe-area-inset-bottom)); z-index:5; }
nav .logo { display:none; }
#navigation { display:flex; overflow-x:auto; }
nav button { display:flex; flex-direction:column; justify-content:center; align-items:center; flex:1 0 70px; min-width:70px; border:0; background:none; text-align:center; padding:7px 4px; border-radius:8px; font-size:11px; color:var(--ink); gap:3px; }
nav button.on { background:var(--acc-bg); color:var(--acc); font-weight:600; }
.nav-icon { font-size:17px; }
.badge { background:var(--red); color:#fff; border-radius:10px; font-size:10px; padding:0 5px; margin-left:4px; }
main { flex:1; min-width:0; padding:16px 14px 94px; width:100%; }
.logo { font-weight:700; padding:0 0 14px; }
.topbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 12px; margin-bottom:18px; }
.topbar .btn { padding:6px 10px; margin:0 0 0 8px; }
.sub { color:var(--muted); margin:0 0 18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px; min-width:0; }
.card.click { cursor:pointer; }
.card h2 { font-size:15px; }
summary { cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
details[open] summary { padding-bottom:12px; border-bottom:1px solid var(--line); }
.card.click:hover { border-color:#c9c4b8; }
.row { display:flex; gap:12px; align-items:flex-start; }
.row > div { min-width:0; }
.dot { width:10px; height:10px; border-radius:50%; margin-top:7px; flex-shrink:0; }
.red { background:var(--red); } .yel { background:var(--yel); } .okc { background:var(--ok); }
.t { font-weight:600; }
.m { color:var(--muted); font-size:13px; }
.tag { display:inline-block; font-size:12px; padding:2px 8px; border-radius:10px; margin-right:4px; }
.tag.red { background:var(--red-bg); color:var(--red); } .tag.yel { background:var(--yel-bg); color:#886000; }
.tag.ok { background:var(--ok-bg); color:var(--ok); } .tag.ch { background:#f0efe9; color:var(--ink); }
.okline { color:var(--ok); font-weight:600; padding:8px 2px; }
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.steps li:last-child { border:0; }
.ic { width:22px; text-align:center; font-weight:700; flex-shrink:0; }
.steps .name { flex:1; min-width:0; }
.steps a { font-size:13px; text-decoration:none; }
.s-ok .ic { color:var(--ok); } .s-err { background:var(--red-bg); margin:0 -16px; padding:9px 16px !important; }
.s-err .ic { color:var(--red); } .s-wait .ic { color:var(--muted); } .s-run .ic { color:var(--yel); }
.alert { border-left:4px solid var(--red); background:var(--red-bg); border-radius:8px; padding:12px 14px; margin:12px 0; }
.btn { border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 14px; cursor:pointer; margin:6px 6px 0 0; max-width:100%; }
.btn.p { background:var(--acc); border-color:var(--acc); color:#fff; }
.btn.d { background:var(--red); border-color:var(--red); color:#fff; }
.action { display:inline-flex; vertical-align:top; flex-direction:column; align-items:flex-start; max-width:100%; }
.feedback { margin:5px 6px 8px 0; max-width:320px; }
.day { font-weight:700; margin:16px 0 6px; }
.post { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.post .time { font-weight:600; }
.post .body { flex:1; min-width:160px; }
label { display:block; font-size:13px; color:var(--muted); margin:12px 0; }
input,textarea,select { display:block; width:100%; min-width:0; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:10px; margin-top:4px; }
textarea { min-height:110px; resize:vertical; }
.links { font-size:13px; margin-top:10px; }
.links div { padding:6px 0; border-top:1px dashed var(--line); }
.chat { display:flex; flex-direction:column; gap:8px; max-height:420px; overflow:auto; margin-bottom:10px; }
.msg { padding:9px 12px; border-radius:12px; max-width:90%; white-space:pre-wrap; overflow-wrap:break-word; }
.msg.me { align-self:flex-end; background:var(--acc-bg); }
.msg.bot { align-self:flex-start; background:#f0efe9; }
.ver { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
.back { color:var(--acc); background:none; border:0; padding:0; font-size:14px; margin-bottom:10px; }
.copy { white-space:pre-wrap; overflow-wrap:break-word; }
.login-page { display:grid; place-items:center; min-height:100vh; padding:20px 14px; }
.login-card { max-width:400px; padding:24px; flex:none; }
.empty { color:var(--muted); padding:18px 0; }
@media (min-width:721px) {
  .app { flex-direction:row; }
  nav { position:static; width:220px; border-top:0; border-right:1px solid var(--line); padding:18px 10px; flex-shrink:0; }
  nav .logo { display:block; padding:0 10px 14px; }
  #navigation { display:block; overflow:visible; }
  nav button { flex-direction:row; justify-content:flex-start; width:100%; font-size:15px; padding:10px; gap:8px; text-align:left; }
  main { padding:24px; max-width:860px; }
  h1 { font-size:22px; }
}