:root{--bg:#fffaf3;--fg:#2b2320;--muted:#7a6c64;--card:#fff;--line:#eadfd2;--accent:#f08a24;--accent-d:#c96d10;--ok:#2e9e5b}
@media (prefers-color-scheme:dark){:root{--bg:#1b1613;--fg:#f4ece4;--muted:#a89a90;--card:#251e1a;--line:#3a2f28}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
.hero{padding:32px 0 8px;text-align:center}
.mascot{font-size:64px;line-height:1}
h1{margin:.2em 0 .1em;font-size:2rem}
h2{margin:0 0 .5em;font-size:1.3rem}
.tag{color:var(--muted);max-width:560px;margin:0 auto 1rem}
.meter{max-width:520px;margin:0 auto}
.bar{height:14px;background:var(--line);border-radius:99px;overflow:hidden}
#barFill{height:100%;width:0;background:var(--accent);transition:width .6s}
.meter-text{margin-top:.4rem;font-size:.95rem}
.mood{color:var(--muted);font-size:.9rem}
.note{color:var(--muted);font-size:.85rem}
section{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:16px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.svc{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.svc b{font-size:1rem}.price{color:var(--accent-d);font-weight:700}
.btn{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--accent-d)}.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.form{display:grid;gap:8px;margin:10px 0}.form.inline{grid-template-columns:1fr auto}
input,textarea{font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);width:100%}
ol.plain{padding-left:1.2em;margin:.5em 0}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}.r{text-align:right}
.in{color:var(--ok)}.out{color:#d44}
.entry{border-left:3px solid var(--accent);padding:2px 10px;margin:8px 0}.entry small{color:var(--muted)}
.card-out{margin-top:10px;padding:12px;border:1px dashed var(--accent);border-radius:10px}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--fg);max-width:440px;width:92%}
dialog::backdrop{background:#0008}
dialog img{max-width:100%;display:block;margin:8px auto}
.code{font:700 1.2rem/1.2 ui-monospace,Menlo,monospace;background:var(--bg);padding:6px 10px;border-radius:6px;display:inline-block;user-select:all}
pre.res{white-space:pre-wrap;background:var(--bg);padding:10px;border-radius:8px}
.small{font-size:.8rem;color:var(--muted);padding-bottom:32px}