@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#142638;background:#f0f5fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;align-items:center;justify-content:center;gap:9vw}button,input{font:inherit}button{cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #71a9ff;outline-offset:3px}button:disabled{opacity:.35;cursor:default}.brand{font-size:35px;font-weight:700;letter-spacing:-2px;color:#173c66;text-decoration:none}.brand span{color:#2478ef}.brand i{font-size:12px;vertical-align:top;letter-spacing:0}aside{width:340px;height:720px;display:flex;flex-direction:column;justify-content:space-between}small,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#7a91a7}h1{font-size:54px;letter-spacing:-2.5px;line-height:1.08;margin:24px 0}h1 em{font-style:normal;color:#2478ef}p{color:#748697;line-height:1.6;font-size:14px}footer{font-size:12px;line-height:2;color:#4b657e}footer span{color:#92a2b1}main{width:390px;height:780px;background:white;border-radius:38px;box-shadow:0 25px 80px #173d6618;border:7px solid #fff;overflow:hidden;position:relative}.desktop-note{position:absolute;bottom:18px;font-size:11px;color:#7b8d9f;text-align:center}header{display:flex;justify-content:space-between;align-items:center;padding:22px 24px 12px}header .brand{font-size:26px}.icon{width:38px;height:38px;background:#f3f7fb;color:#4f6b86;border-radius:50%;font-size:20px}.screen{height:100%;display:flex;flex-direction:column}.pill{font-size:10px;font-weight:700;letter-spacing:1px;border-radius:20px;background:#edf4ff;color:#2878e6;padding:7px 10px;display:inline-block}.mode{display:flex;margin:18px 24px;background:#f3f6fa;border-radius:12px;padding:4px}.mode button{flex:1;padding:10px 0;border-radius:9px;background:transparent;color:#7b8d9f;font-size:12px}.mode .selected{background:white;color:#246fe0;box-shadow:0 2px 8px #163e6610}.amount-panel{text-align:center;padding:18px 12px 24px}.amount{font-size:58px;font-weight:500;letter-spacing:-3px;margin:15px 0 6px}.amount span{font-size:23px;letter-spacing:-1px;color:#9baaba}.hint{font-size:11px;color:#8d9ba9;margin:8px 0}.keypad{display:grid;grid-template-columns:repeat(3,1fr);padding:0 22px;gap:7px;margin-top:auto}.keypad button{height:62px;background:#f7f9fc;border-radius:12px;font-size:26px;color:#19344f}.keypad button:active{background:#e0edff}.primary{display:block;background:#2479ee;color:white;border-radius:14px;padding:18px;font-weight:600;width:100%;font-size:14px}.actions{padding:20px 24px 12px}.bottom{display:flex;justify-content:space-between;padding:12px 24px 20px;align-items:center}.text-btn{background:transparent;color:#698198;font-size:12px;padding:10px}.error{color:#bd4949;font-size:12px;text-align:center;margin:0 24px}.customer{transform:rotate(180deg);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding:24px;text-align:center}.customer h2{font-size:20px;margin:10px 0}.customer .amount{font-size:40px;margin:6px}.qr{width:min(100%,260px);aspect-ratio:1;background:white;border:1px solid #e0e9f2;padding:12px;border-radius:15px}.qr svg{width:100%;height:100%;display:block}.demo-placeholder{display:grid;place-items:center;height:100%;border:2px dashed #c6d9ee;border-radius:10px;color:#7192b5;font-size:30px;font-weight:700;letter-spacing:4px}.wait{font-size:12px;color:#5d7f9f;background:#f1f6fc;border-radius:20px;padding:10px 16px}.wait:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#3785ec;margin-right:8px;animation:pulse 1.5s infinite}.customer .controls{width:100%}.transaction{font-size:10px;color:#8496a6;overflow-wrap:anywhere}.account{font-size:11px;color:#6c8195}.split{height:100%;display:grid;grid-template-rows:1fr 1fr}.half{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;gap:9px}.half:first-child{transform:rotate(180deg);background:#f1f7ff;border-top:1px dashed #c5d9ef}.check{border-radius:50%;width:52px;height:52px;background:#2479ee;color:white;font-size:30px;display:grid;place-items:center}.half h2{margin:0;font-size:21px}.half .amount{font-size:36px;margin:0}.half p{margin:0;font-size:11px}.half .primary{margin-top:12px}.subscreen{padding:22px;overflow:auto;height:100%}.subscreen h2{font-size:26px;letter-spacing:-1px}.record{padding:17px 0;border-bottom:1px solid #edf1f5;display:flex;justify-content:space-between;gap:12px}.record strong{font-size:17px}.record small{display:block;letter-spacing:0;font-weight:400;line-height:1.8;overflow-wrap:anywhere}.record .pill{font-size:9px;letter-spacing:0}dialog{border:0;border-radius:24px;padding:28px;width:min(90vw,390px);color:#142638;box-shadow:0 30px 100px #163c6633}dialog::backdrop{background:#102d4a66}dialog h2{font-size:28px;margin:15px 0}label{display:block;font-size:12px;margin:20px 0;color:#637b92}input{display:block;width:100%;margin-top:8px;border:1px solid #d4e0ec;border-radius:10px;padding:14px;color:#18334f}#settings-error{color:#ba4444}details{font-size:10px;color:#73889d;max-width:100%;overflow-wrap:anywhere}summary{cursor:pointer}@keyframes pulse{50%{opacity:.25}}@media(max-width:760px){body{background:white;display:block}aside,.desktop-note{display:none}main{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.keypad button{height:clamp(44px,8dvh,72px)}.amount-panel{padding:10px 12px 16px}.customer{padding:18px 26px}.qr{width:min(63vw,30dvh,270px)}}@media(max-height:650px){.amount-panel{padding:2px}.amount{font-size:42px;margin:8px}.mode{margin:6px 24px}.keypad button{height:43px}.actions{padding-top:10px}.customer{gap:4px;padding:12px}.customer h2{margin:0}.customer .amount{font-size:30px}.primary{padding:13px}.bottom{padding:6px 24px}.half{gap:4px}.check{height:36px;width:36px;font-size:22px}}

/* Seller controls remain at the physical bottom, outside the rotated content. */
.waiting-screen{height:100%;display:flex;flex-direction:column}.waiting-screen .customer{flex:1;min-height:0;height:auto;padding:16px 24px;gap:6px}.waiting-screen .controls{flex:none;padding:12px 24px 16px;border-top:1px solid #e6eef7;background:#fff;text-align:center}.waiting-screen .qr{width:min(100%,250px,28dvh)}.waiting-screen .customer h2{margin:4px 0}.waiting-screen .customer .hint{margin:4px 0}.waiting-screen .controls .text-btn{padding:10px 4px}

.nav{display:flex;border-top:1px solid #e4edf6;background:white;flex:none;padding:10px 4px;gap:2px}.nav button{flex:1;padding:9px 2px;font-size:10px;background:transparent;color:#8193a5;border-radius:9px}.nav .active{color:#2479ee;background:#edf4ff}.page-shell{height:100%;display:flex;flex-direction:column}.page-shell .subscreen{flex:1;height:auto;min-height:0}.plan-link{font-size:10px;background:transparent;color:#2479ee;padding:4px}.tip-label{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0;font-size:10px}.tip-label input{display:inline-block;width:95px;padding:6px;margin:0;font-size:12px}.tariff{padding:20px;border:1px solid #dce6f1;border-radius:18px;margin:20px 0}.tariff h2{margin:14px 0}.tariff h2 small{letter-spacing:0;font-size:11px}.blue{background:#f0f6ff;border-color:#cddfff}.service-box{background:#f5f8fc;border-radius:13px;padding:16px;margin:18px 0;font-size:12px}.service-box p{font-size:11px;margin-bottom:0}.stat-total{font-size:38px;letter-spacing:-1.5px;color:#2479ee;margin:25px 0}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stat-grid div{background:#f3f7fc;padding:18px;border-radius:12px}.stat-grid b{display:block;font-size:24px}.stat-grid small{letter-spacing:0;display:block;margin-top:9px}.button-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.filters{display:flex;gap:7px;flex-wrap:wrap}.filters input,.filters select{width:100%;padding:10px;margin:0;border:1px solid #d4e0ec;border-radius:8px;background:white;color:#17334c;font-size:12px}.report-text{white-space:pre-wrap;font:13px/1.8 Arial;color:#4e6b86}.receipt-qr{width:220px;max-width:100%;margin:auto}.receipt-qr svg{display:block;width:100%;height:auto}textarea{width:100%;height:85px;font:11px Arial;margin:12px 0}.half:last-child:has(#receipt){gap:4px;padding:12px}.half #receipt{padding:4px}.half:has(#receipt) .primary{margin-top:3px}.screen:has(#tip) .amount-panel{padding-top:0;padding-bottom:6px}.screen:has(#tip) .amount{margin:6px 0}.screen:has(#tip) .keypad button{height:clamp(36px,6.8dvh,57px)}#settings{max-height:90dvh;overflow:auto}


/* App-only shell: fills the phone viewport; no presentation website or mock phone. */
html{height:100%;overscroll-behavior:none}body{height:100%;min-height:100%;display:block;background:#eaf0f7;overscroll-behavior:none;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}main{display:block;width:100%;max-width:480px;height:100dvh;margin:0 auto;background:#fff;border:0;border-radius:0;box-shadow:none;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.screen,.page-shell,.waiting-screen,.split{height:100%;min-height:0}.nav{padding-bottom:10px}.primary,.keypad button,.nav button{touch-action:manipulation;user-select:none}.subscreen{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}input,select,textarea{font-size:16px}header{flex:none}.keypad{flex-shrink:1;min-height:0}.keypad button{height:clamp(40px,7.5dvh,68px)}.amount-panel{padding:12px 12px 14px}.amount{margin:10px 0 6px}.bottom{padding-bottom:10px}.actions{padding-top:14px}.half{min-height:0}body:has(dialog[open]){overflow:hidden}