/* Layout: one phone-width app shell, centred on larger screens */
:root{
  --bg:#E8EBF3; --surface:#FFFFFF; --surface-2:#F3F5FA; --ink:#141829; --muted:#596079; --line:#D8DCE8;
  --accent:#2F4BFF; --accent-ink:#FFFFFF; --sun:#FFB81F;
  --st-todo:#E35A12; --st-progress:#7C3AED; --st-checked:#1E9653; --st-grey:#6B7080;
  --urgent:#D92D3A;
  --f-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B0E19; --surface:#151A2B; --surface-2:#1C2135; --ink:#ECEEF7; --muted:#9AA1BC; --line:#293050;
  --accent:#7186FF; --accent-ink:#0B0E19; --sun:#FFCB52;
  --st-todo:#FF8A4C; --st-progress:#A98BFA; --st-checked:#4ADE80; --st-grey:#8C91A5;
  --urgent:#FF5C69; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0B0E19; --surface:#151A2B; --surface-2:#1C2135; --ink:#ECEEF7; --muted:#9AA1BC; --line:#293050;
  --accent:#7186FF; --accent-ink:#0B0E19; --sun:#FFCB52;
  --st-todo:#FF8A4C; --st-progress:#A98BFA; --st-checked:#4ADE80; --st-grey:#8C91A5;
  --urgent:#FF5C69; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.4;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 40px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.1}
p{margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.ic{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.28em}

.page{max-width:1000px;margin:0 auto;display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}

/* Shell */
.shell{background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:clip;display:flex;flex-direction:column;
  min-height:760px;width:100%;max-width:440px;margin:0 auto;box-shadow:0 24px 60px -30px rgba(20,24,41,.45)}
.top{position:sticky;top:0;z-index:5;background:var(--surface);padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.logo{font:800 20px var(--f-display);letter-spacing:-.01em}
.logo em{font-style:normal;font-size:10.5px;font-family:var(--f-mono);font-weight:700;background:var(--sun);color:#141829;border-radius:5px;padding:2px 5px;vertical-align:middle;margin-left:5px}
.top-r{display:flex;gap:8px;align-items:center}
.who-btn,.lang-btn{border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:7px 12px;font-weight:700;font-size:14px;display:flex;gap:8px;align-items:center}
.who-btn small{font-weight:500;color:var(--muted);font-size:12px}
.lang-btn{padding:7px 9px;font:700 12px var(--f-mono)}
.urgent-bar{background:var(--urgent);color:#fff;padding:10px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px;font-weight:600;border:0;width:100%;text-align:left}
.urgent-bar b{display:block;font-size:11px;letter-spacing:.1em}
.urgent-bar span.tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.urgent-bar .go{background:#fff;color:#141829;border-radius:9px;padding:6px 10px;font-weight:700;font-size:13px}
.view{flex:1;padding:16px;display:flex;flex-direction:column;gap:16px}
.sec{display:grid;gap:10px}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sec-head h2{font-size:20px;font-weight:800}
.count{font:700 13px var(--f-mono);color:var(--muted)}

/* Nav */
.nav{position:sticky;bottom:0;z-index:5;display:flex;gap:2px;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
.nav button{flex:1;min-width:0;border:0;background:none;border-radius:12px;padding:7px 2px 6px;font-size:11.5px;font-weight:600;color:var(--muted);position:relative;display:grid;justify-items:center;gap:2px}
.nav button .ic{width:22px;height:22px}
.nav button[aria-current="page"]{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.nav .report{background:var(--accent);color:var(--accent-ink);flex:0 0 58px}
.badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--urgent);color:#fff;font:700 11px/18px var(--f-mono)}

/* Buttons, chips, pills */
.btn{font-weight:700;font-size:15px;border-radius:12px;padding:11px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);white-space:nowrap;display:inline-flex;gap:8px;align-items:center;justify-content:center}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.ok{background:var(--st-checked);color:#fff;border-color:transparent}
.btn.primary:hover,.btn.ok:hover{filter:brightness(1.08)}
.btn.danger{color:var(--urgent);border-color:color-mix(in srgb,var(--urgent) 45%,transparent)}
.btn.block{width:100%}
.btn.sm{padding:8px 12px;font-size:13.5px;border-radius:10px}
.btn.big{padding:16px;font-size:17px;justify-content:flex-start;gap:14px}
.btn.big .ic{width:26px;height:26px}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chip.sm{padding:2px 9px;font-size:12px;cursor:default}
.tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.linkish{background:none;border:0;padding:0;color:var(--accent);font-weight:700;font-size:13.5px}
.iconbtn{border:0;background:var(--surface);color:var(--muted);width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:20px}
.iconbtn:hover{color:var(--ink)}

.s-todo{--c:var(--st-todo)} .s-progress{--c:var(--st-progress)} .s-checked{--c:var(--st-checked)}
.s-occupied,.s-leaving,.s-blocked{--c:var(--st-grey)} .s-control{--c:var(--sun)}
.i-open{--c:var(--st-todo)} .i-progress{--c:var(--st-progress)} .i-resolved{--c:var(--st-checked)}
.a-expected{--c:var(--accent)} .a-late{--c:var(--urgent)} .a-arrived{--c:var(--st-checked)} .a-noshow{--c:var(--st-grey)}
.c-urgent{--c:var(--urgent)} .c-ok{--c:var(--st-checked)} .c-grey{--c:var(--st-grey)} .c-sun{--c:var(--sun)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:color-mix(in srgb,var(--c) 75%,var(--ink))}
.pill .ic{width:14px;height:14px;stroke-width:2.4}
.pill.s-occupied{background:var(--st-grey);color:var(--surface)}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--st-checked);border-radius:99px;transition:width .3s}

/* Greeting + progress */
.hello{display:grid;gap:8px}
.hello-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hello h2{font-size:24px;font-weight:800}
.hello .n{font:700 15px var(--f-mono);color:var(--muted)}

/* Cards */
.card{background:var(--surface-2);border-radius:var(--r);padding:14px;display:grid;gap:10px}
.note-card{border-radius:var(--r);padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14.5px;
  background:color-mix(in srgb,var(--c) 12%,var(--surface));border:1.5px solid color-mix(in srgb,var(--c) 45%,transparent)}
.note-card .ic{color:color-mix(in srgb,var(--c) 80%,var(--ink));width:24px;height:24px}
.note-card small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.empty{text-align:center;color:var(--muted);font-size:15px;padding:26px 10px;border:1.5px dashed var(--line);border-radius:var(--r)}

/* Rows: one line = one thing to do */
.rows{display:grid;gap:8px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface-2);border-radius:var(--r);padding:12px}
.row .num{font:700 22px var(--f-mono);min-width:3.1ch;background:none;border:0;padding:0;text-align:left}
.row .t{font:700 14px var(--f-mono);color:var(--muted);min-width:5ch;line-height:1.3}
.row .t s{opacity:.55}
.row .info{min-width:0;display:grid;gap:4px;font-size:13.5px;justify-items:start}
.row .info b{font-size:15.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .act{display:grid;gap:6px;justify-items:stretch}
.row.flag{box-shadow:inset 4px 0 0 var(--sun)}
.row.late{box-shadow:inset 4px 0 0 var(--urgent)}
.row.quiet{opacity:.78}
.star{color:color-mix(in srgb,var(--sun) 70%,var(--ink));font-weight:800}
details.fold{background:var(--surface-2);border-radius:var(--r);padding:12px 14px}
details.fold>summary{cursor:pointer;font-weight:700;font-size:14.5px}
details.fold[open]>summary{margin-bottom:10px}
details.fold .row{background:var(--surface)}
details.fold .rows,details.fold .log{margin-top:4px}

/* Floor plan */
.plan{display:grid;gap:6px}
.plan-end{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fx{border:1.5px dashed var(--line);border-radius:10px;padding:7px 6px;text-align:center;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.fx.here{border-style:solid;border-color:var(--accent);color:var(--accent)}
.wing-head{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:6px}
.plan-body{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);row-gap:4px;position:relative}
.corridor{grid-column:2;background:var(--surface-2);border-inline:2px solid var(--ink);display:grid;place-items:center}
.corridor span{writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.28em;color:var(--muted);font-weight:700}
.room{position:relative;border:1.5px solid color-mix(in srgb,var(--c) 55%,var(--line));background:color-mix(in srgb,var(--c) 15%,var(--surface));
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 14px;color:var(--ink);min-width:0}
.room.side-G{border-radius:10px 2px 2px 10px;border-right:0}
.room.side-D{border-radius:2px 10px 10px 2px;border-left:0;flex-direction:row-reverse}
.room .rn{font:700 18px var(--f-mono)}
.room .ic{width:22px;height:22px;color:color-mix(in srgb,var(--c) 80%,var(--ink));stroke-width:2.2}
.room .ar{font:600 11px var(--f-mono);color:var(--muted)}
.room .prio{position:absolute;top:4px;width:10px;height:10px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 2px var(--surface)}
.room.side-G .prio{left:4px} .room.side-D .prio{right:4px}
.room.dim{opacity:.3}
.room.here{outline:2.5px solid var(--accent);outline-offset:1px;z-index:1}
.room.sel{outline:3px solid var(--sun);outline-offset:1px;z-index:1}
.room.s-occupied{background:var(--st-grey);border-color:var(--ink);border-width:2px;color:var(--surface)}
.room.s-occupied .ic{color:var(--surface)}
.room.s-leaving{border-style:dashed}
.room.s-blocked{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,var(--surface)) 0 5px,var(--surface) 5px 10px)}
.room:hover{filter:brightness(.97)}
.slot{border:1.5px dashed var(--line);background:none;border-radius:8px;color:var(--muted);font-weight:700;font-size:16px}
.slot:hover{border-color:var(--accent);color:var(--accent)}
.you{grid-column:2;align-self:center;justify-self:center;z-index:2;background:var(--accent);color:var(--accent-ink);font:700 10px var(--f-body);border-radius:99px;padding:3px 6px;pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .ic{color:color-mix(in srgb,var(--c) 80%,var(--ink))}

/* Incidents, memos, lost items */
.inc{background:var(--surface-2);border-radius:var(--r);padding:13px 14px;display:grid;gap:8px;border:0;border-left:4px solid var(--c);text-align:left;width:100%}
.p-urgent{--c:var(--urgent)} .p-normal{--c:var(--accent)}
.inc.is-resolved{opacity:.6}
.inc-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inc-head .where{font:700 14px var(--f-mono)}
.inc-head .pill{margin-left:auto}
.inc .tx{font-size:15px}
.inc .meta{font-size:12.5px;color:var(--muted)}
.photo{border-radius:10px;max-height:200px;object-fit:cover;width:100%;max-width:100%}
.urg{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--urgent)}
.comments{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.comment{font-size:14px}
.comment .mono{color:var(--muted);font-size:12px;margin-right:4px}
.reply{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}

/* Forms */
.field{display:grid;gap:6px}
.field>span,.fs legend{font-size:13.5px;font-weight:700}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
input[type=file]{font-size:13px;max-width:100%}
textarea{min-height:84px;resize:vertical}
.fs{border:0;padding:0;margin:0;display:grid;gap:8px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:14px;font-weight:600;background:var(--surface)}
.opt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.opt input{accent-color:var(--accent);margin:0}
.opt.pick input{position:absolute;opacity:0;pointer-events:none}
.opt.urgent:has(input:checked){border-color:var(--urgent);background:color-mix(in srgb,var(--urgent) 14%,var(--surface));color:var(--urgent)}
.hint{font-size:12.5px;color:var(--muted)}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.formgrid .full{grid-column:1 / -1}
.code{background:var(--surface-2);border-radius:10px;padding:10px 12px;font:500 12.5px/1.5 var(--f-mono);overflow-x:auto;margin:0}

/* Tasks */
.group{display:grid;gap:6px}
.group-head{display:flex;gap:10px;align-items:baseline}
.group-head .mono{font-size:13px;font-weight:700;color:var(--accent)}
.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 12px;border-radius:12px;background:var(--surface-2);cursor:pointer}
.task input{width:24px;height:24px;accent-color:var(--st-checked);margin:0}
.task.done .lbl{color:var(--muted);text-decoration:line-through}
.task .when{font:500 12px var(--f-mono);color:var(--st-checked)}
.log{display:grid}
.entry{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.entry .mono{font-size:13px;font-weight:700;color:var(--muted)}
.entry p{font-size:14.5px}
.entry .tag{display:block;margin-bottom:2px}

/* Direction */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:var(--surface-2);border-radius:var(--r);padding:12px;display:grid;gap:2px}
.stat b{font:800 28px/1 var(--f-display);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted);font-weight:600}
.stat.warn b{color:var(--urgent)}
.dbar{display:grid;grid-template-columns:100px minmax(0,1fr) 24px;gap:10px;align-items:center;font-size:14px}
.dbar .track{height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.dbar .track i{display:block;height:100%;background:var(--st-todo);border-radius:99px}
.dbar .mono{text-align:right;font-weight:700}
.emp{background:var(--surface-2);border-radius:var(--r);padding:14px;display:grid;gap:10px}
.emp-head{display:flex;gap:12px;align-items:center}
.emp-head b{font-size:16px;display:block}
.emp-head small{color:var(--muted);font-size:12.5px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi{background:var(--surface);border-radius:10px;padding:9px 10px;display:grid;gap:1px}
.kpi b{font:700 17px var(--f-mono)}
.kpi span{font-size:11.5px;color:var(--muted);font-weight:600}
.adm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.adm-row:last-child{border-bottom:0;padding-bottom:0}
.adm-row:first-child{padding-top:0}
.adm-main{display:grid;gap:2px;min-width:0;font-size:12.5px}
.adm-main b{font-size:14.5px}
.ini{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font:800 18px var(--f-display);flex:none}
.ini.sm{width:32px;height:32px;font-size:15px;border-radius:9px}
.r-menage{background:var(--ink);color:var(--surface)}
.r-veilleur{background:var(--accent);color:var(--accent-ink)}
.r-reception{background:var(--sun);color:#141829}
.r-maintenance{background:var(--st-todo);color:#fff}
.r-direction{background:var(--st-checked);color:#fff}

/* Picker + panel */
.picker{gap:20px;padding-block:22px}
.pick-title{font-size:30px;font-weight:800;letter-spacing:-.01em}
.pick-group{display:grid;gap:8px}
.pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;width:100%;border:1.5px solid var(--line);background:var(--surface-2);border-radius:16px;padding:12px 14px}
.pick:hover{border-color:var(--accent)}
.pick b{font:800 17px var(--f-display)}
.pick-badge{background:var(--urgent);color:#fff;font:700 11px var(--f-mono);border-radius:8px;padding:4px 7px;white-space:nowrap}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px;display:grid;gap:12px;width:100%;max-width:440px;margin:0 auto}
.panel h2{font-size:18px;font-weight:800}
.plist{display:grid;gap:6px}
.pbtn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--surface-2);border-radius:12px;padding:8px 10px;font-weight:700;font-size:14.5px}
.pbtn:hover{border-color:var(--muted)}
.pbtn[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.panel-foot{border-top:1px solid var(--line);padding-top:12px;font-size:12.5px;color:var(--muted)}

/* Sheet + toast */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(10,12,22,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:460px;border-radius:22px 22px 0 0;max-height:90%;overflow:auto;padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));display:grid;gap:14px;animation:up .2s ease-out}
.grip{width:40px;height:4px;border-radius:2px;background:var(--line);justify-self:center}
.sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:start}
.sheet-head h2{font-size:24px;font-weight:800}
.x{border:0;background:var(--surface-2);border-radius:50%;width:36px;height:36px;font-size:18px;line-height:1;color:var(--muted);flex:none}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:14.5px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--surface);padding:11px 16px;border-radius:12px;font-size:14.5px;font-weight:600;max-width:calc(100% - 32px);text-align:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:380px){.nav button{font-size:10.5px}.room{padding-inline:8px}.row{gap:8px}}
.row .act.h{display:flex;align-items:center;gap:6px}
.row>.ic{width:24px;height:24px;color:var(--muted)}
.adm-row>.ic{color:var(--muted)}
.chip .pick-badge{padding:1px 6px}

/* Code screen */
.pinview{align-items:center;justify-content:center;gap:18px;text-align:center}
.dots{display:flex;gap:14px}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink)}
.dots i.on{background:var(--ink)}
.pin-err{min-height:1.4em;color:var(--urgent);font-weight:700}
.keys{display:grid;grid-template-columns:repeat(3,76px);gap:12px}
.keys button{height:76px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface-2);font:700 26px var(--f-mono)}
.keys button:hover{border-color:var(--accent)}
.keys button:active{background:var(--accent);color:var(--accent-ink)}
.pbtn small{font-weight:500}
@media (max-width:480px){body{padding:0}.shell{border-radius:0;border:0;min-height:100dvh;max-width:none;box-shadow:none}
  .top{padding-top:calc(12px + env(safe-area-inset-top,0px))}}