*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;background:#f7f3ee;color:#374151}
a{color:#7a3d1a;text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:820px;margin:0 auto;padding:16px}
.header{text-align:center}
.nav{display:flex;gap:12px;justify-content:center;margin:10px 0 0}
.header h1{margin:0;font-size:28px;color:#7a3d1a;font-weight:900}
.sub{margin:6px 0 0;color:#6b7280;font-size:13px}
.card{background:#fff;border-radius:16px;padding:14px;margin:10px 0;box-shadow:0 10px 20px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.04)}
.label{display:block;font-weight:800;color:#4b5563;margin-bottom:8px}
.row{display:flex;gap:10px}
.space{align-items:center;justify-content:space-between}
input[type=number],input[type=text],input:not([type]),textarea{flex:1;padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa;font-size:16px}
.btn{padding:12px 14px;border:none;border-radius:12px;font-weight:800;cursor:pointer}
.btn.primary{background:#7a3d1a;color:#fff}
.btn.ghost{margin-top:8px;background:transparent;border:1px solid #e5e7eb;color:#7a3d1a}
.btn.tiny{padding:8px 10px;font-size:12px;background:#fff3e7;color:#7a3d1a}
.hidden{display:none}
.currentHead{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:6px}
.num{font-weight:900;color:#7a3d1a}
.msg{margin:6px 0 0;line-height:1.5}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:8px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-weight:800;color:#374151;cursor:pointer}
.pill.active{background:#7a3d1a;color:#fff;border-color:#7a3d1a}
.list{list-style:none;margin:0;padding:0}
.list li{padding:8px 0;border-bottom:1px dashed #f0eee9;display:flex;gap:10px}
.list li:last-child{border-bottom:none}
.list .id{min-width:3.2rem;font-weight:900;color:#7a3d1a}
.muted{color:#9ca3af}
.footer{padding:20px 8px;text-align:center;color:#9ca3af}
@media (hover:hover){.btn:hover{opacity:.95}.pill:hover{opacity:.95}}
.ex-item{padding:14px;border:1px dashed #eee;border-radius:12px;margin:10px 0;background:#fff}
.ex-item h3{margin:0 0 4px 0;color:#7a3d1a}
.ex-meta{color:#9ca3af;font-size:12px;margin-bottom:6px}