*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";color:#3a2e26;background:#f7f5f3}
#app{max-width:980px;margin:0 auto;padding:24px}
header{margin-bottom:16px}
h1{margin:0;font-size:28px;color:#5a4639}
.subtitle{margin:4px 0 0;color:#7b6d62}
.card{background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 8px 30px rgba(112,89,69,.15), inset 0 0 1px rgba(0,0,0,.06);margin:14px 0;border:1px solid rgba(93,77,65,.08)}
#summary .card{display:flex;gap:24px;justify-content:space-between}
.label{font-size:12px;color:#8d7f73;text-transform:uppercase;letter-spacing:.06em}
.value{font-size:22px;color:#3a2e26;font-weight:700}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.right{justify-content:flex-end}
input,select,button{font-size:16px;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fbfaf9}
button{cursor:pointer;background:#6b4e3e;color:#fff;border:none;box-shadow:0 6px 18px rgba(107,78,62,.25);transition:transform .04s ease, box-shadow .2s ease}
button:hover{box-shadow:0 8px 24px rgba(107,78,62,.33)}
button:active{transform:translateY(1px)}
.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;background:#fbfaf9;border:1px solid rgba(0,0,0,.06);box-shadow:inset 0 0 1px rgba(0,0,0,.04)}
.item .id{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;color:#6b4e3e}
.muted{color:#8d7f73;margin-top:10px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#3a2e26;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;font-size:14px}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}