/* จดสวน Glass UI — visual layer over the existing accessible form components. */
@media(min-width:800px){body .nav{top:18px;bottom:auto;width:390px;padding:5px;border-radius:23px;background:#ffffffa6}body .nav button{min-height:46px;padding:10px;border-radius:17px}}
:root{color:#18221b;background:#e2e3e2;--green:#244e3d;--lime:#d2ff00;--ink:#18221b;--muted:#525d55;--line:#ffffffaa;--orange:#98451d;--cream:#e2e3e2;--shadow:0 6px 30px #30433608}
body{min-width:320px}
/* A real fixed layer keeps the garden above the root canvas on mobile Safari. */
.app-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#e2e3e2}
.app-backdrop::before{content:"";position:absolute;inset:34% -28px -28px;background:url('./assets/gardens-v02.png') 38% 72%/cover no-repeat;filter:blur(18px) saturate(1.2);opacity:.96}
.app-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#e2e3e2 30%,#e2e3e2 39%,#e2e3e2d9 51%,#e2e3e270 65%,#e2e3e210 83%,#2436101a 100%)}
#app{position:relative;z-index:1}
h1{font-weight:550;font-size:clamp(28px,4vw,39px);letter-spacing:-1px;line-height:1.4}h2{font-size:22px;font-weight:550}h3{font-weight:600}strong{font-weight:650}svg{stroke-width:1.6}.centered{text-align:center}.shell{max-width:1110px;padding:0 32px 125px}.subpage{padding-bottom:40px}.topbar{padding:25px 0 28px;border:0;margin-bottom:0}.brand{color:var(--green);gap:11px}.brand-mark{width:37px;height:43px;stroke:none}.brand strong{font-size:29px;font-weight:800;letter-spacing:-.7px}.top-settings{display:grid;place-items:center;width:49px;height:49px;border-radius:50%;background:#ffffff5c;border:1px solid #ffffffb0;padding:0}.top-actions{gap:16px}.status{font-size:12px;color:#4a5b45}.dot{background:#65a940;flex-shrink:0}.title-row{align-items:center;margin-bottom:22px}.subtitle{font-size:14px;line-height:1.9}.eyebrow{letter-spacing:0;font-weight:500;color:var(--muted)}.month-control{position:relative;border-radius:40px;background:#ffffff50;border:1px solid #ffffffa3;padding:13px 18px;min-height:49px;white-space:nowrap;font-size:14px;cursor:pointer}.month-control input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.month-control input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}.month-control:focus-within{outline:2px solid #4e7133}.month-control svg{width:19px;height:19px}
.demo-banner{padding:3px 15px;background:#ffffff50;border:1px solid #ffffffaa;border-radius:16px;margin-bottom:23px;color:#525d55;font-size:12px}.demo-banner .text-button{font-size:12px;min-height:35px}.demo-banner .dot{display:inline-block;margin-right:5px}.chips{gap:9px;margin-bottom:20px}.chip{justify-content:center;min-height:48px;padding:11px 23px;border-radius:40px;border:1px solid #ffffffa6;background:#ffffff4d;font-size:16px;gap:9px}.chip.active{background:var(--lime);border-color:var(--lime);color:#18221b}.chip svg{width:23px;height:23px}
.orb{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:50%;color:white;background:radial-gradient(ellipse at 50% 110%,#757b78 0,transparent 75%),#ffffff35;border:1px solid #ffffff32;flex-shrink:0}.orb.green{background:radial-gradient(ellipse at 50% 110%,#69c745 0,transparent 77%),#e6ede55c}.orb.orange{background:radial-gradient(ellipse at 50% 110%,#ff934f 0,transparent 77%),#ffefe166}.orb.pink{background:radial-gradient(ellipse at 50% 110%,#be225f 0,transparent 77%),#f1e2e855}.orb svg{width:27px;height:27px;stroke-width:1.7}
.hero{border-radius:28px;background:linear-gradient(135deg,#aeb2b183,#bfc3c083);color:#18221b;padding:26px 29px;border:1px solid #ffffff30;margin-bottom:17px}.hero:after{display:none}.hero-top{gap:12px}.hero-label{font-size:18px;color:#353e37}.hero-total{font-size:clamp(37px,5.5vw,62px);font-weight:650;line-height:1.55;letter-spacing:-1.8px;overflow-wrap:anywhere}.hero-total>span{font-size:20px;letter-spacing:0;margin-left:9px;font-weight:550}.hero-leaf{width:89px;height:89px;transform:none}.hero-leaf svg{width:45px;height:45px;transform:none}.hero-stats{border-color:#ffffffa6;margin-top:18px;padding-top:18px;gap:15px}.hero-stats>div{gap:10px;min-width:0}.hero-stats>div+div{border-left:1px solid #ffffffa6;padding-left:15px}.hero-stats small{color:#49544b;font-size:13px}.hero-stats strong{font-size:23px;white-space:nowrap;font-weight:600}.hero-stats strong small{font-size:12px}.hero-stats .round{width:43px;height:43px;background:radial-gradient(ellipse at 50% 110%,#69c745,transparent 77%),#e6ede55c}.hero-stats .round.orange{background:radial-gradient(ellipse at 50% 110%,#ff934f,transparent 77%),#ffefe166}.hero-stats .round svg{width:23px;height:23px}
.quick-actions{gap:12px;margin-bottom:0}.quick{justify-content:center;gap:10px;padding:15px 12px;border-radius:22px;background:var(--lime);border:1px solid #e6ff80;min-height:71px;box-shadow:none}.quick strong{font-size:21px;font-weight:600}.quick .action-icon{width:32px;height:32px;background:transparent;color:#18221b}.quick.out{background:#ffffff56;border-color:#ffffffb3}.quick.out .action-icon{width:38px;height:38px;border-radius:50%;color:white;background:radial-gradient(ellipse at 50% 110%,#ff934f,transparent 77%),#ffefe166}.quick:hover{transform:none;filter:brightness(.97);box-shadow:none}.section-title{margin:24px 0 14px}.section-title button{font-size:14px;min-height:44px;color:#34462e}.tag{border-radius:20px;padding:5px 11px;font-size:12px;background:#ffffff65;color:#4b5b4d}.tag.orange{background:#ffdfb5;color:#783818}
.home-layout{display:grid;grid-template-columns:1.16fr 1fr;gap:0 25px}.home-gardens .section-title{margin-top:0}.home-gardens .section-title h2{font-size:19px}.home-latest{grid-column:1/-1}.garden-grid{gap:13px}.garden-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid #fff9;background:#ffffff46;border-radius:25px;padding:0;min-width:0}.garden-photo{position:absolute;z-index:-1;inset:0;background-image:linear-gradient(#e5e9e585,#e1e6e1e8 85%),url('./assets/gardens-v02.png');background-size:auto,230% 100%;background-position:0 0,left center}.garden-palm .garden-photo{background-position:0 0,right center}.garden-content{padding:22px 20px}.garden-head{gap:10px;margin-bottom:20px}.garden-head h3{overflow-wrap:anywhere;flex:1}.garden-symbol{width:41px;height:41px;border-radius:50%;color:white}.garden-symbol svg{width:24px;height:24px}.garden-card small{color:#38483b;font-size:12px}.garden-balance{font-size:25px;display:block;margin:2px 0 15px;overflow-wrap:anywhere}.garden-balance small{font-size:12px;font-weight:400}.garden-numbers{border-top:1px solid #ffffffa0;padding-top:11px;font-size:12px;display:flex;flex-direction:column;gap:6px}.garden-numbers>div{display:flex;justify-content:space-between;gap:5px}.garden-numbers strong{font-size:14px;font-weight:500}
.panel,.form-section,.settings-card,.detail-hero,.history-card,.restore-file-card{background:#ffffff4f;border:1px solid #ffffffb3;border-radius:24px;box-shadow:var(--shadow)}.transaction{gap:14px;padding:18px 23px;border-bottom:1px solid #fff9;background:transparent}.transaction:hover{background:#ffffff47}.transaction .txn-icon{width:46px;height:46px;color:white;border-radius:50%;background:radial-gradient(ellipse at 50% 110%,#69c745,transparent 80%),#dceadb}.transaction.out .txn-icon{background:radial-gradient(ellipse at 50% 110%,#ff934f,transparent 80%),#f6e8dc;color:white}.txn-body strong{font-size:16px;font-weight:550}.txn-value strong{font-size:19px;font-weight:600}.income{color:#244e3d}.expense{color:#9b4219}.notice{background:#eaf0e3a3;border:1px solid #fff9;border-radius:19px;padding:17px 20px;color:#3d5139}.notice.warn{background:#ffebd79e;color:#7d411a;border-color:#fff9}.notice.welcome{background:#ffffff40}.welcome .btn{margin-top:13px}.btn{padding:15px 23px;min-height:54px;background:var(--lime);border:1px solid transparent;border-radius:22px;color:#18200e;font-size:17px;font-weight:600}.btn.secondary{background:#ffffff4f;border-color:#ffffffb3;color:#243d30}.btn.light{background:#d2ff0075;border-color:#e8ffa5}.btn.danger{background:#a33222;color:white}.btn.full+.btn.full{margin-top:12px}.btn svg{width:23px;height:23px}.back{margin-bottom:17px;color:#465448}.back svg{width:35px;height:35px;background:#ffffff65;border:1px solid #fff9;border-radius:50%;padding:7px}
.nav{bottom:max(17px,env(safe-area-inset-bottom));gap:7px;width:430px;max-width:calc(100% - 32px);padding:7px;border:1px solid #ffffffa6;border-radius:27px;box-shadow:0 8px 30px #16241714;background:#d6ddd1b3;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.nav button{gap:9px;min-height:56px;font-size:15px;border-radius:21px;color:#31412f}.nav button.active{background:var(--lime);color:#141b07}.nav svg{width:24px;height:24px}.privacy-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:#465644;margin-top:30px}.privacy-note svg{width:14px;height:14px}.subpage .topbar{padding-bottom:12px}
.form-wrap{max-width:590px}.form-intro{display:flex;gap:15px;align-items:center;margin-bottom:23px}.form-intro .orb{width:56px;height:56px}.form-intro h1{font-size:30px}.form-section{padding:23px}.form-heading{font-size:18px;font-weight:550}.field label{font-weight:550}input,select,textarea{border:1px solid #ffffffa8;background:#ffffff80;color:var(--ink);border-radius:16px;padding:14px;min-height:51px}input.big-amount{font-size:36px;font-weight:600;padding:16px;color:#202d22;letter-spacing:-1px}.amount-box input{padding-right:65px}.form-gardens{margin-bottom:20px;flex-wrap:nowrap}.form-gardens label{min-width:0}.form-gardens span{border:1px solid #ffffffb3;background:#ffffff30;border-radius:28px;padding:13px 8px;min-height:51px;overflow-wrap:anywhere;font-weight:500}.form-gardens input:checked+span{background:var(--lime);border-color:var(--lime);color:#18221b}.category-picker{border:0;margin:0;padding:0;min-width:0}.category-picker legend{font-size:14px;font-weight:550;margin-bottom:10px}.category-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.category-options label{position:relative;cursor:pointer}.category-options input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}.category-options span{display:flex;flex-direction:column;gap:7px;justify-content:center;align-items:center;min-height:80px;border:1px solid #ffffffa6;border-radius:19px;font-size:13px;background:#ffffff40}.category-options input:checked+span{background:#ffd8bb96;border-color:#b57237;color:#71380d}.category-options input:focus-visible+span{outline:3px solid #4e7133;outline-offset:2px}.calc-box{background:#ccd9c345;border:1px solid #ffffff80;border-radius:18px;padding:17px;margin-top:17px}.calc-line.total{border-color:#fff9;align-items:center}.calc-line.total strong{font-size:26px;font-weight:650}.upload{border:1px dashed #889980;border-radius:18px;padding:17px;min-height:90px;background:#ffffff2e}.upload strong{font-weight:550}.upload small{font-size:11px}.receipt-preview img{width:75px;height:85px;border-radius:12px}.error{background:#ffe6dda8;border:1px solid #be6d4c;border-radius:16px;color:#83290e}
.content-page{max-width:760px}.detail-hero{background:linear-gradient(135deg,#b9bdbb60,#d4d9d366)}.detail-hero h1{font-size:28px}.detail-hero .amount{font-size:44px;font-weight:650}.detail-list{margin:0;padding:5px 22px}.detail-line{border-color:#fff9}.receipt-full{background:#ffffff60;border:1px solid #fff9;border-radius:20px}.history-grid>div{background:#ffe4cc70;border:1px solid #fff9;padding:15px;border-radius:15px}.history-grid>div:last-child{background:#d8ebd066}.history-grid p{font-size:13px}
.local-badge{display:inline-flex;gap:8px;align-items:center;border:1px solid #fff9;background:#ddedda7a;border-radius:25px;padding:8px 15px;margin:0 0 20px;font-size:14px;color:#3c583e}.settings-card h2{font-size:21px}.settings-card p{font-size:13px;margin:10px 0 16px}.settings-card .field-help{font-size:12px}.backup-heading{display:flex;align-items:center;gap:14px}.backup-heading .orb{width:62px;height:62px}.backup-heading p{margin:4px 0}.restore-link{width:100%;display:flex;align-items:center;gap:12px;background:#ffffff40;border:1px solid #fff9;min-height:65px;padding:17px;border-radius:20px;margin:15px 0;cursor:pointer;font-size:15px;text-align:left;font-weight:500}.restore-link svg:last-of-type{margin-left:auto;width:19px}.garden-setting{display:flex;gap:12px;align-items:center;margin-top:17px}.garden-setting .field{flex:1;margin-top:0}.garden-setting .orb{width:40px;height:40px}.garden-setting+button{margin-top:19px!important}details summary{cursor:pointer;font-size:17px;line-height:1.8}details summary span{display:block;font-size:11px;color:var(--muted);margin-top:6px}.settings-card .help-list{list-style:decimal;padding-left:20px}.settings-card .help-list li{display:list-item}.version{font-size:11px}
.category-row{display:flex;align-items:center;gap:14px;border-color:#fff9;padding:17px 20px}.category-data{flex:1;min-width:0}.category-row .orb{width:43px;height:43px}.category-row .orb svg{width:24px;height:24px}.category-top{margin-bottom:10px}.bar{height:9px;background:#c5cac55e}.bar i{background:#ff934f}.bar i.pink{background:#d9628e}.summary-note{display:flex;justify-content:center;gap:7px;align-items:center;font-size:12px;color:#4d5b48;line-height:1.8;margin:22px 0 12px}.summary-note svg{width:18px;height:18px}.content-page>.field-help{margin-top:13px}.report-scope{display:flex;gap:10px;margin-bottom:20px}.report-scope>span{display:flex;gap:8px;align-items:center;justify-content:center;flex:1;min-height:50px;background:#ffffff50;border:1px solid #fff9;border-radius:28px;font-size:14px}.report-scope svg{width:20px;height:20px}.pdf-preview{background:#abb2ab55;border:1px solid #fff9;border-radius:23px;padding:15px}.pdf-preview img{width:100%;display:block;border-radius:10px;box-shadow:0 2px 14px #00000012}.pdf-page>.field-help{margin:12px 0 18px}.restore-file-card{padding:22px;display:flex;align-items:center;gap:17px;margin-bottom:18px}.restore-file-card h2{font-size:18px;overflow-wrap:anywhere}.restore-file-card>div{min-width:0}.restore-file-card p{font-size:14px;margin-top:8px}.restore-file-card .field-help{font-size:12px}.restore-warning{margin-bottom:18px}.restore-warning h2{font-size:22px;margin-bottom:7px}.restore-warning p{margin-top:8px;font-size:13px}
dialog{background:#e4e7e1ee;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border:1px solid #ffffffc7;padding:28px;border-radius:28px;box-shadow:0 30px 80px #172c2533;max-height:88dvh}dialog::backdrop{background:#24342c60;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}dialog h2{font-size:26px}.review-line{padding:13px 0;border-color:#fff9}.review-line.total{font-size:18px}#toast{background:#244334;border:1px solid #fff3;border-radius:20px;bottom:115px}
@media(min-width:800px){.home-gardens .garden-content{padding:20px 17px}.home-gardens .garden-grid{min-height:246px}.home-gardens .garden-head{flex-direction:column;align-items:flex-start;gap:8px}.home-latest .panel{display:grid;grid-template-columns:1fr 1fr}.home-latest .transaction:nth-child(odd){border-right:1px solid #fff9}.home-latest .transaction:nth-last-child(2){border-bottom:0}.home-latest .empty{grid-column:1/-1}.home-latest .notice{max-width:650px;margin-left:auto;margin-right:auto}}
@media(max-width:799px){.home-layout{display:block}.home-gardens .section-title{margin-top:22px}.settings-grid{grid-template-columns:1fr}.content-page{max-width:610px}}
@media(max-width:600px){.shell{padding:0 19px calc(118px + env(safe-area-inset-bottom));max-width:520px}.shell.subpage{padding-bottom:35px}.topbar{padding:19px 0 25px;margin:0}.brand-mark{width:32px;height:37px}.brand strong{font-size:25px}.top-actions{gap:8px}.top-settings{width:43px;height:43px;padding:0}.top-settings svg{width:21px;height:21px}.top-actions .status{display:flex;font-size:10px;gap:4px;max-width:75px;line-height:1.5}.dot{width:6px;height:6px}.title-row{gap:12px;margin-bottom:18px;align-items:center;flex-wrap:wrap}.title-row h1,h1{font-size:29px}.month-control{padding:10px 13px;min-height:43px;font-size:12px;gap:7px}.month-control svg{width:17px;height:17px}.month-control input{width:100%;height:100%}.chips{gap:7px;margin-bottom:16px}.chip{flex:1;min-width:0;padding:10px 8px;font-size:14px;gap:6px;min-height:45px}.chip svg{width:21px;height:21px}.hero{padding:21px 20px;border-radius:25px;margin-bottom:14px}.hero-label{font-size:16px}.hero-total{font-size:43px;line-height:1.6;letter-spacing:-1.7px}.hero-total>span{font-size:17px;margin-left:7px}.hero-leaf{width:63px;height:63px;border-radius:50%}.hero-leaf svg{width:34px;height:34px}.hero-stats{gap:12px;padding-top:15px;margin-top:11px}.hero-stats>div{gap:8px}.hero-stats>div+div{padding-left:12px}.hero-stats .round{width:34px;height:34px}.hero-stats .round svg{width:20px;height:20px}.hero-stats strong{font-size:20px;letter-spacing:-.4px}.hero-stats strong small{display:none}.hero-stats small{font-size:12px}.quick-actions{gap:10px;margin-bottom:0}.quick{flex-wrap:nowrap;gap:7px;min-height:63px;padding:12px 8px;border-radius:20px}.quick strong{font-size:18px}.quick .action-icon,.quick.out .action-icon{width:30px;height:30px;flex-shrink:0}.quick .action-icon svg{width:22px;height:22px}.section-title{margin:22px 0 10px}.section-title h2,.home-gardens .section-title h2{font-size:21px}.section-title button{font-size:12px}.garden-grid{gap:10px}.garden-card{padding:0}.garden-content{padding:17px 15px}.garden-head{gap:7px;margin-bottom:13px}.garden-head h3{font-size:15px}.garden-symbol{width:34px;height:34px;border-radius:50%}.garden-symbol svg{width:22px;height:22px}.garden-balance{font-size:23px;margin-bottom:12px;letter-spacing:-.5px}.garden-balance small{font-size:10px}.garden-numbers{font-size:12px;gap:6px}.garden-numbers strong{font-size:13px}.transaction{padding:16px 14px;gap:11px}.transaction .txn-icon{width:38px;height:38px;border-radius:50%;flex-shrink:0}.txn-icon svg{width:22px;height:22px}.txn-body strong{font-size:15px}.txn-body small{font-size:11px}.txn-value strong{font-size:17px}.nav{padding:6px;gap:5px;bottom:max(12px,env(safe-area-inset-bottom));width:390px;border-radius:26px}.nav button{flex-direction:column;gap:3px;font-size:12px;min-height:59px;border-radius:20px}.nav svg{width:24px;height:24px}.demo-banner{padding:0 12px;margin-bottom:18px}.notice{padding:15px;font-size:12px}.form-section{padding:18px;border-radius:22px}.form-intro{gap:11px}.form-intro h1{font-size:28px}.form-intro .orb{width:48px;height:48px}.form-heading{font-size:17px}.fields{gap:12px}.field label{font-size:13px}.fields input{padding:13px 11px}.form-gardens span{font-size:15px}.calc-line.total strong{font-size:24px}.upload{padding:14px 10px;gap:10px}.upload small{font-size:10px}.upload strong{font-size:14px}.btn{font-size:16px;border-radius:20px;min-height:54px;padding:14px 18px}.save-row .btn{padding:14px}.detail-hero .amount{font-size:40px}.detail-list{padding:4px 18px}.detail-line{font-size:13px;gap:12px}.detail-line dt{flex-basis:96px}.history-card{padding:18px}.history-grid{gap:9px}.history-grid>div{padding:12px}.history-grid p{font-size:12px}.settings-card{padding:20px}.settings-card h2{font-size:20px}.category-row{padding:16px;gap:11px}.category-top{font-size:13px}.category-row .orb{width:38px;height:38px}.category-row .orb svg{width:22px;height:22px}.report-scope{gap:8px}.report-scope>span{font-size:13px}.pdf-preview{padding:10px}.restore-file-card{padding:18px;gap:12px}.restore-file-card h2{font-size:16px}.restore-warning h2{font-size:20px}dialog{padding:23px}dialog h2{font-size:24px}.review-line{font-size:13px}.review-line.total{font-size:17px}}
@media(max-width:365px){.shell{padding-left:14px;padding-right:14px}.hero{padding:18px 15px}.hero-total{font-size:37px}.hero-leaf{width:54px;height:54px}.hero-stats strong{font-size:17px}.hero-stats .round{width:28px;height:28px}.garden-content{padding:15px 12px}.garden-head{flex-direction:column;align-items:flex-start;gap:6px}.quick strong{font-size:16px}.top-actions .status{display:none}}

/* 2.1: garden glass dock. The whole column stays tappable around each small pill. */
.nav-pill{display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.panel,.form-section,.settings-card,.detail-hero,.history-card,.restore-file-card{background-color:#edf0e8c4;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.notice.welcome{background:#eff2e8c7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.privacy-note{width:fit-content;max-width:100%;margin:30px auto 0;padding:8px 12px;border-radius:18px;background:#f0f3e8b8;color:#34442f;text-align:center}
@media(max-width:799px){
  .nav{width:430px;max-width:calc(100% - 24px);bottom:max(10px,env(safe-area-inset-bottom));padding:7px 12px;gap:6px;border-radius:24px;border:1px solid #ffffff4d;background:linear-gradient(145deg,#f4f7e83d,#e1eac92b);box-shadow:0 8px 26px #1b2a1a1a,inset 0 1px 0 #ffffff38;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
  .nav button{display:grid;place-items:center;min-width:0;min-height:54px;padding:0;gap:0;border-radius:17px;font-size:11px;font-weight:500;line-height:1.35;color:#fff;text-shadow:0 1px 5px #16280ad9;background:transparent}
  .nav button.active{background:transparent;color:#192400;text-shadow:none}
  .nav-pill{width:76px;max-width:100%;min-height:54px;flex-direction:column;gap:4px;padding:6px 5px;border-radius:17px}
  .nav button.active .nav-pill{background:var(--lime);box-shadow:0 2px 7px #75990014}
  .nav svg{width:22px;height:22px;stroke-width:1.65}
  .nav button:focus-visible{outline-color:#fff;outline-offset:2px}
  .shell{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}
@media(min-width:800px){.app-backdrop::before{opacity:.5}}