:root{--case:#242126;--key:#4a4850;--edge:#302e34;--pink:#a82870;--screen:#e9efec;--ink:#161918;--green:#287a75}
*{box-sizing:border-box}[hidden]{display:none!important}html{color-scheme:light}body{margin:0;min-height:100svh;font-family:Arial,Helvetica,sans-serif;color:#fff;background:radial-gradient(circle at 50% 35%,#fff 0,#eee 62%,#ddd 100%)}button,input{font:inherit}.page-shell{min-height:100svh;display:grid;place-items:center;padding:24px 12px}.calculator{width:min(430px,calc(100vw - 24px));padding:20px 16px 24px;border-radius:24px;background:linear-gradient(155deg,#37333a 0,var(--case) 68%,#1b191e 100%);box-shadow:0 22px 48px #0004,inset 0 1px 0 #ffffff2b}
.pwa-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;margin:-7px 0 10px;padding:7px 9px;border:1px solid #ffffff24;border-radius:10px;color:#f7f4f6;background:#17151ac7;font:700 12px/1.3 Arial,sans-serif}.pwa-toolbar[data-kind="offline"]{color:#ffe1a1}.pwa-toolbar[data-kind="update"]{color:#dff9f0}.pwa-toolbar button{flex:0 0 auto;min-height:30px;padding:5px 11px;border:0;border-radius:999px;color:#fff;background:#8b2863;font-weight:800;cursor:pointer}.pwa-toolbar button:focus-visible{outline:3px solid #f6ca64;outline-offset:2px}@media(display-mode:standalone){.page-shell{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}}
.payment-face{height:180px;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;border:2px solid #17151a;border-radius:12px;color:#111;background:#edf1ef;font:700 14px/1.3 Arial,sans-serif;overflow:hidden}.qr-code{flex:0 0 auto;width:152px;height:152px;padding:3px;background:#fff}.qr-code img,.qr-code canvas{display:block;width:100%!important;height:100%!important}.qr-details{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px}.qr-details strong{font-size:clamp(21px,7vw,30px);overflow-wrap:anywhere}.qr-details>span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4d5652;font-size:12px}.share-qr{display:grid;place-items:center;width:44px;height:44px;margin-top:3px;padding:0;border:1px solid #99a49e;border-radius:50%;color:#111;background:#fff;box-shadow:0 2px 5px #0002;cursor:pointer}.share-qr:active{transform:scale(.96)}.share-qr:focus-visible{outline:3px solid #8b2863;outline-offset:2px}.share-qr:disabled{opacity:.55;cursor:wait}.share-qr svg{width:25px;height:25px;overflow:visible}.share-qr circle{fill:currentColor}.share-qr path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}.share-status{max-width:130px;color:#4d5652;font:600 10px/1.25 Arial,sans-serif}
.display{height:76px;margin:12px 0 16px;padding:8px 12px;border:2px solid #17151a;border-radius:10px;color:var(--ink);background:linear-gradient(165deg,#f4faf7,var(--screen));box-shadow:inset 0 2px 6px #0003;overflow:hidden}.display small{display:block;height:14px;text-align:right;font:11px/14px monospace;overflow:hidden;white-space:nowrap}.display output{display:block;width:100%;text-align:right;white-space:nowrap;font:500 clamp(25px,8vw,35px)/1.25 "Courier New",monospace;letter-spacing:-.04em}
.keypad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:44px repeat(5,56px);gap:8px}.keypad button{min-width:0;min-height:0;padding:4px;border:1px solid #ffffff20;border-radius:10px;color:#fff;background:linear-gradient(155deg,#636068,var(--key) 55%,#3c3a41);box-shadow:0 2px 0 var(--edge),0 3px 5px #0003,inset 0 1px 0 #ffffff2b;text-shadow:0 1px 1px #111;font-size:24px;font-weight:700;cursor:pointer;touch-action:manipulation}.keypad button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}.keypad button:focus-visible{outline:3px solid #f6ca64;outline-offset:2px}.keypad .utility{font-size:14px;background:linear-gradient(155deg,#68656d,#4e4b53)}.keypad .menu-key{background:linear-gradient(155deg,#9a3474,#761e55)}.keypad .operator{color:#f5d8e9;background:linear-gradient(155deg,#4d4e59,#373842)}.keypad .danger{background:linear-gradient(155deg,#c13d8b,var(--pink) 58%,#7d2059)}.keypad .plus{grid-column:4;grid-row:5/span 2;font-size:32px}.keypad .equals{grid-column:1/span 3;grid-row:6;background:linear-gradient(155deg,#398a87,var(--green));font-size:30px}.keypad .minus{grid-column:5;grid-row:6}
dialog{width:min(94vw,440px);max-height:90vh;padding:0;border:6px solid var(--case);border-radius:16px;color:#171417;background:#e3e9e5;box-shadow:0 28px 80px #0009}dialog::backdrop{background:#06070ac0;backdrop-filter:blur(4px)}.dialog-card{padding:18px}.dialog-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:20px}.dialog-head h2{margin:4px 0 0;font-size:30px}.dialog-head small{color:#7c1f59;font-weight:900;letter-spacing:.12em}.dialog-head>button{width:42px;height:42px;border:0;border-radius:50%;color:#171417;background:#cdd7d2;font-size:26px;cursor:pointer}.dialog-card label{display:grid;gap:7px;margin:15px 0;font:700 13px/1.2 monospace;text-transform:uppercase}.dialog-card input:not([type]),.dialog-card input[type="text"]{width:100%;height:50px;padding:0 13px;border:2px solid #8d9892;border-radius:8px;color:#171417;background:#fff}.switch-row{grid-template-columns:1fr auto!important;align-items:center;padding:12px 0}.switch-row input{width:22px;height:22px}.save,.reset{width:100%;min-height:50px;margin-top:9px;border:0;border-radius:8px;font-weight:900;cursor:pointer}.save{color:#fff;background:#2d625a}.reset{color:#8c174c;background:#f1d8e4}.home-link{display:block;margin-top:18px;text-align:center;color:#6f1d50;font-weight:800}.privacy{color:#65716b;font-size:12px;line-height:1.5}.filters{display:flex;gap:7px;margin-bottom:14px}.filters button{flex:1;padding:9px 5px;border:1px solid #9da9a3;border-radius:999px;color:#29342f;background:#fff;cursor:pointer}.filters button.active{color:#fff;background:#2d625a}.history-list{max-height:55vh;overflow:auto}.empty{text-align:center;color:#66736d;padding:35px 10px}.history-row{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:14px 2px;border-bottom:1px dashed #929e98;font-family:monospace}.history-row small{grid-column:1/-1;color:#67736d}.history-row strong{text-align:right}@media(max-width:480px){.page-shell{padding:10px 7px}.calculator{width:min(430px,calc(100vw - 14px));padding:14px 10px 18px;border-radius:21px}.payment-face{height:clamp(145px,39vw,180px)}.display{margin:10px 0 12px}.keypad{grid-template-rows:42px repeat(5,minmax(51px,1fr));gap:7px}.keypad button{font-size:21px}.keypad .utility{font-size:clamp(10px,3vw,13px)}}@media(max-height:690px) and (min-width:360px){.page-shell{padding:5px}.calculator{padding-top:11px;padding-bottom:14px}.payment-face{height:135px}.display{height:66px;margin:8px 0}.keypad{grid-template-rows:38px repeat(5,48px);gap:6px}}