*{box-sizing:border-box}body{font-family:Arial,sans-serif;background:#f4f6f8;margin:0;padding:8px}h2{text-align:center;margin:6px 0 10px;font-size:18px}.draft-title{display:block;width:100%;text-align:center;font-size:18px;font-weight:700;margin:6px 0 10px;border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:2px 4px;transition:border-color .15s}.draft-title:focus{outline:none;border-bottom-color:#007bff}.draft-title::placeholder{color:#aaa;font-weight:400}.draft-header{display:flex;align-items:center;margin:6px 0 10px}.draft-header .draft-title{margin:0;flex:1}.new-draft-btn{flex-shrink:0;background:#fff3cd;border:1px solid #ffc107;border-radius:999px;font-size:13px;font-weight:600;color:#856404;padding:3px 10px;cursor:pointer;transition:background .15s,box-shadow .15s;white-space:nowrap}.new-draft-btn:hover{background:#ffe69c;box-shadow:0 1px 4px #0000001f}.container{max-width:480px;margin:auto}.row{background:#fff;border-radius:10px;margin-bottom:6px;box-shadow:0 1px 2px #00000014;overflow:hidden;touch-action:pan-y;transition:transform .2s ease}.view{padding:10px;display:flex;justify-content:space-between;align-items:center;font-size:15px;cursor:pointer}.summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qty{color:#0d6efd;font-weight:600}.rate{color:#198754;font-weight:600}.view .amount{font-weight:700;margin-left:8px;white-space:nowrap}.edit{padding:8px}.top{display:grid;grid-template-columns:1fr 34px;gap:6px;margin-bottom:6px}.bottom{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:center}input,select{padding:8px;font-size:14px;border:1px solid #ccc;border-radius:6px;width:100%;background:#fff}.mini{display:flex;gap:4px}.mini select{width:64px;font-size:13px}.total{font-weight:700;text-align:right;min-width:70px}.remove{background:#fdd;border:none;border-radius:6px;font-weight:700;width:34px;height:34px;cursor:pointer;padding:0}.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.actions>*{flex:1 1 calc(33% - 6px);min-width:0}button{padding:10px;font-size:15px;border:none;border-radius:8px;background:#007bff;color:#fff;cursor:pointer}.grand-total{font-size:18px;font-weight:700;text-align:right;margin-top:10px;padding:10px;background:#d4edda;border-radius:8px}.done-btn{display:block;width:100%;margin-top:6px;padding:7px;font-size:14px;background:#198754;color:#fff;border:none;border-radius:6px;cursor:pointer}.share-btn{background:#4f46e5}.share-btn:hover{background:#4338ca}.charge-btn{background:#0891b2}.charge-btn:hover{background:#0e7490}.share-img-btn{background:#7c3aed}.share-img-btn:hover{background:#6d28d9}.charge-section{margin-top:8px}.charge-section-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:4px;padding:0 2px}.charge-row{border-left:3px solid #0891b2}.charge-name{color:#0e7490}.charge-amount-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.charge-amount-label{font-size:13px;color:#64748b;white-space:nowrap}.charge-amount-row input{flex:1}.subtotal-bar{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#475569;background:#e2e8f0;border-radius:6px;padding:6px 10px;margin-top:6px}.subtotal-bar span:last-child{font-weight:600}.capture-mode .no-capture{display:none!important}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#1e293b;color:#fff;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:500;box-shadow:0 4px 14px #00000040;animation:fadein .2s ease;pointer-events:none;z-index:999}@keyframes fadein{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.item-enter{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden}.item-enter-active{opacity:1;transform:translateY(0);max-height:300px;transition:opacity .25s ease,transform .25s ease,max-height .25s ease}.item-exit{opacity:1;transform:translate(0);max-height:300px;overflow:hidden}.item-exit-active{opacity:0;transform:translate(48px);max-height:0;transition:opacity .2s ease,transform .2s ease,max-height .2s ease}.panel-in{animation:panelIn .18s ease}@keyframes panelIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
