:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#253044;background:#e8f3fc}*{box-sizing:border-box}body{margin:0}.app{height:100dvh;max-width:520px;margin:auto;display:flex;flex-direction:column;background:#f9fbff;box-shadow:0 0 35px #6a91bb22}header{background:linear-gradient(130deg,#bfe9ff,#f6d5f0);padding:16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px}.brand img{width:52px;height:52px;border-radius:14px}h1{font-size:21px;margin:0}h1 span{color:#139e7b}small{font-size:11px;color:#5d6b7b}button,input,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:10px;padding:10px;background:#dfeafb;color:#273951;font-weight:700}button:disabled{opacity:.4}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px 8px;flex-shrink:0;background:#f9fbff}.stat{padding:12px;border-radius:15px}.orange{background:#ffe8c9}.green{background:#d8f7e8}.stat small{display:block}.stat strong{font-size:28px}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 14px 12px;flex-shrink:0}.tabs button.active{background:#a3e4d0;color:#07583f}.scroll{flex:1;min-height:0;overflow-y:auto;padding:10px 14px 22px}.bill{border:1px solid #dce6f3;border-radius:14px;background:white;margin-bottom:9px;overflow:hidden}.bill.paid{background:#f0fff7}.billtop{display:flex;align-items:center;gap:10px;padding:13px}.billtop input{width:22px;height:22px;accent-color:#1bb67c;flex-shrink:0}.billhead{flex:1;min-width:0;cursor:pointer}.billhead b{display:block;font-size:15px}.money{font-weight:750;font-size:18px;margin-top:3px}.money.confirmed{color:#139c67}.money.carry{filter:blur(3.4px);color:#202020;user-select:none}.hint{font-size:11px;color:#728091}.details{padding:12px;border-top:1px solid #e1e9f3;display:grid;gap:9px}.details label{font-size:12px;color:#536175;font-weight:650}.details input,.details textarea,.settings input{width:100%;border:1px solid #cbd9eb;background:#fff;border-radius:9px;padding:11px;color:#273951}.details textarea{resize:vertical;min-height:65px}.info{white-space:pre-wrap;font-size:12px;line-height:1.6;background:#f3f6fb;padding:10px;border-radius:9px}.actions{display:flex;gap:8px;flex-wrap:wrap}.primary{background:#25b988;color:white}.danger{background:#ffe1e3;color:#a31e37}.settings section{border:1px solid #dce6f3;border-radius:14px;background:white;padding:13px;margin-bottom:10px}.settings h3{font-size:15px;margin:0 0 10px}.settings p{font-size:12px;color:#657186}.settings .row{display:flex;align-items:center;gap:8px;margin:7px 0}.settings .row input{flex:1;min-width:0}.settings .row button{flex-shrink:0}.settings .billmanage{border-top:1px solid #e7ecf3;padding:9px 0}.settings .billmanage span{flex:1;overflow-wrap:anywhere}.message{font-size:12px;color:#087e5b;margin:9px 0}.empty{text-align:center;color:#8590a0;padding:35px 5px}footer{background:#e8dff9;border-top:1px solid #d4c7f1;padding:12px 18px calc(13px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;flex-shrink:0}footer strong{font-size:21px;color:#128f66}#gear{font-size:24px;background:#ffffffa8}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #5b95db;outline-offset:2px}

/* DEMO 10: Theme selection. Light theme is unchanged. */
.theme-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.theme-choices button{padding:15px 8px;border:2px solid transparent}.theme-choices button.selected{border-color:#16b18a;box-shadow:0 0 0 2px #16b18a25}
:root[data-theme="dark"]{color-scheme:dark;color:#edf3ff;background:#0b1020}
[data-theme="dark"] .app{background:#11192a;box-shadow:0 0 35px #0006}
[data-theme="dark"] header{background:linear-gradient(125deg,#16364b,#2c254d 65%,#452741)}
[data-theme="dark"] h1 span{color:#62e0b4}
[data-theme="dark"] small{color:#b3c2d4}
[data-theme="dark"] #gear{background:#313a55;color:#f5f6ff}
[data-theme="dark"] .stats{background:#11192a}
[data-theme="dark"] .orange{background:#483527;color:#ffe4ba}
[data-theme="dark"] .green{background:#183e38;color:#c0ffe3}
[data-theme="dark"] .tabs button{background:#273752;color:#d6e6fc}
[data-theme="dark"] .tabs button.active{background:#155e58;color:#b5ffea}
[data-theme="dark"] button{background:#2a3a56;color:#e5f1ff}
[data-theme="dark"] .primary{background:#148b74;color:white}
[data-theme="dark"] .danger{background:#582b3a;color:#ffced6}
[data-theme="dark"] .bill{background:#1b263a;border-color:#35445e}
[data-theme="dark"] .bill.paid{background:#16372f;border-color:#2d6a55}
[data-theme="dark"] .billhead b{color:#f0f5ff}
[data-theme="dark"] .money.confirmed{color:#72e5b5}
[data-theme="dark"] .money.carry{color:#c4d1e1;filter:blur(3.4px)}
[data-theme="dark"] .hint{color:#a9b8cc}
[data-theme="dark"] .details{border-color:#35445e}
[data-theme="dark"] .details label{color:#c5d4e7}
[data-theme="dark"] .details input,[data-theme="dark"] .details textarea,[data-theme="dark"] .settings input,[data-theme="dark"] .settings textarea{background:#121b2d;border-color:#41536e;color:#f0f5ff}
[data-theme="dark"] .info{background:#26334a;color:#dbe7f8}
[data-theme="dark"] .settings section{background:#1b263a;border-color:#35445e}
[data-theme="dark"] .settings p{color:#b4c3d5}
[data-theme="dark"] .settings .billmanage{border-color:#34435a}
[data-theme="dark"] .empty{color:#a9b8cc}
[data-theme="dark"] footer{background:#292342;border-color:#483b65}
[data-theme="dark"] footer strong{color:#70e6b3}
[data-theme="dark"] .message{color:#76e7bc}
[data-theme="dark"] .theme-choices button.selected{border-color:#6fe8b8;box-shadow:0 0 0 2px #6fe8b830}

/* DEMO 11: reserve space for the Netlify floating badge; footer remains fixed in flex layout above it. */
.netlify-clearance{height:84px;flex:0 0 84px;background:#f9fbff;pointer-events:none}
[data-theme="dark"] .netlify-clearance{background:#11192a}
@media(max-height:620px){.netlify-clearance{height:70px;flex-basis:70px}}

/* DEMO 12: Android-friendly editable amount and native date picker */
.details input[data-amount]{touch-action:manipulation;user-select:text;-webkit-user-select:text;min-height:46px}
.details .date-row{display:flex;align-items:stretch;gap:8px;margin-top:4px}
.details .date-row input{min-width:0;flex:1;min-height:46px;color-scheme:light}
.details .date-picker-button{flex:0 0 52px;font-size:21px;border:1px solid #cbd9eb;touch-action:manipulation}
[data-theme="dark"] .details .date-row input{color-scheme:dark}

.details .save-fields{background:#1aab83;color:#fff;padding:12px;font-size:14px;min-height:46px}
.details input[data-amount]{-webkit-user-select:text;user-select:text;touch-action:auto}

/* Full emulator release: touch sorting and receipt attachments */
.bill:not(.paid){background:#fff8ec;border-color:#e6bb73}
.bill.paid{border-color:#65bd91;background:#e7faee}
[data-theme="dark"] .bill:not(.paid){background:#342c25;border-color:#846b42}
.drag-handle{flex:0 0 36px!important;text-align:center;touch-action:none;user-select:none;cursor:grab;font-size:27px;color:#6c7d94;line-height:1.3}
.billmanage.dragging{background:#cfeaf8;outline:2px solid #4d94d2;border-radius:9px}
[data-theme="dark"] .billmanage.dragging{background:#29455e}
.receipts{border:1px solid #d4dfeb;border-radius:10px;padding:10px;display:grid;gap:8px;font-size:13px}
.receipts input[type=file]{font-size:12px}
.receipt-list{display:flex;flex-wrap:wrap;gap:8px}.receipt-item{width:90px;display:grid;gap:3px}.receipt-item img{width:90px;height:90px;object-fit:cover;border-radius:8px;cursor:pointer}.receipt-item button{font-size:11px;padding:5px}
.receipt-modal{position:fixed;inset:0;z-index:999;background:#111e;display:flex;flex-direction:column;align-items:center;gap:15px;padding:20px;overflow:auto}.receipt-modal img{max-width:100%;height:auto}.receipt-modal button{align-self:flex-end}