:root{
  --ink:#0d1b2a; --sea:#1b4965; --foam:#cae9ff; --sun:#ffb703; --paper:#fdfcf8;
  --sat:max(env(safe-area-inset-top,0px),44px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.32,.72,0,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#050a10;
  position:fixed;inset:0;width:100%;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.phone{position:absolute;inset:0;overflow:hidden;background:var(--ink);color:#fff}
/* Large screens get a device frame; phones fill the whole screen. */
@media (min-width:600px) and (min-height:760px){
  .phone{inset:auto;left:50%;top:50%;width:390px;height:844px;transform:translate(-50%,-50%);
    border-radius:56px;box-shadow:0 0 0 12px #1a1a1d,0 0 0 14px #3a3a40,0 40px 90px #000a;
    --sat:50px;--sab:20px}
}
.screens,.screen{position:absolute;inset:0}
.screen{overflow:hidden;transition:transform .5s var(--ease),opacity .4s var(--ease),filter .4s}
.wallpaper{background:radial-gradient(120% 70% at 20% 0%,#2f7da6 0%,transparent 60%),
  radial-gradient(90% 60% at 90% 100%,#ffb70355 0%,transparent 65%),linear-gradient(170deg,#1b4965,#0d1b2a)}

.statusbar{position:absolute;top:0;left:0;right:0;height:var(--sat);padding:0 calc(var(--sar) + 28px) calc(var(--sat)*.12) calc(var(--sal) + 32px);
  display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:15px;z-index:50;pointer-events:none;transition:color .3s}
.statusbar.dark{color:#111}
.statusbar .right{display:flex;gap:6px;align-items:center;font-size:13px}
.battery{width:24px;height:12px;border:1.5px solid currentColor;border-radius:4px;position:relative;opacity:.9}
.battery::after{content:"";position:absolute;inset:1.5px;width:70%;background:currentColor;border-radius:1.5px}

.lock{z-index:30;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--sat) + 36px)}
.lock .date{font-size:20px;font-weight:600;opacity:.85}
.lock .time{font-size:92px;font-weight:700;letter-spacing:-3px;line-height:1.05;font-variant-numeric:tabular-nums}
.lock .hint{position:absolute;bottom:calc(var(--sab) + 34px);font-size:14px;opacity:.7;animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.lock.unlocked{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.lock .hint{animation:none}.screen{transition-duration:.01s}}

.home{z-index:10;padding:calc(var(--sat) + 22px) calc(var(--sar) + 20px) 0 calc(var(--sal) + 20px)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 10px;justify-items:center}
.icon{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:#fff;font:inherit;font-size:11.5px;padding:0;transition:transform .15s}
.icon:active{transform:scale(.9)}
.icon .tile{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;font-size:30px;box-shadow:inset 0 0 0 .5px #fff3,0 4px 10px #0004}
.dock{position:absolute;left:calc(var(--sal) + 12px);right:calc(var(--sar) + 12px);bottom:calc(var(--sab) + 22px);padding:14px;border-radius:30px;
  background:#ffffff26;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:grid;grid-template-columns:repeat(4,1fr);justify-items:center}
.dock .icon>span{display:none}
.home.behind{transform:scale(.92);filter:blur(6px);opacity:.7}

.app{z-index:20;background:var(--paper);color:#111;display:flex;flex-direction:column;
  transform:scale(.12);opacity:0;padding-top:calc(var(--sat) + 4px)}
.app.open{transform:none;opacity:1}
.app.closing{transform:scale(.12);opacity:0;border-radius:40px}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:6px calc(var(--sar) + 16px) 8px calc(var(--sal) + 16px);min-height:44px}
.navbar h1{font-size:30px;margin:0;letter-spacing:-.5px}
.navbar button{background:none;border:0;color:#c77d00;font:inherit;font-size:17px;padding:8px 4px}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 calc(var(--sar) + 16px) calc(var(--sab) + 40px) calc(var(--sal) + 16px)}
.row{width:100%;text-align:left;background:#fff;border:0;border-bottom:.5px solid #0002;padding:12px 14px;font:inherit;color:inherit;display:block}
.row:first-child{border-radius:12px 12px 0 0}.row:last-child{border-radius:0 0 12px 12px;border-bottom:0}.row:only-child{border-radius:12px}
.row b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row small{color:#777;font-size:13px}
.empty{text-align:center;color:#777;margin-top:30vh;line-height:1.5}
.editor{flex:1;width:100%;height:100%;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:17px;line-height:1.45;padding:8px calc(var(--sar) + 16px) calc(var(--sab) + 40px) calc(var(--sal) + 16px);user-select:text;-webkit-user-select:text}

.home-indicator{position:absolute;bottom:0;left:0;right:0;height:calc(var(--sab) + 18px);display:flex;justify-content:center;align-items:flex-end;padding-bottom:calc(var(--sab)*.4 + 6px);z-index:60;touch-action:none}
.home-indicator span{width:134px;height:5px;border-radius:3px;background:#fff;opacity:.85;transition:background .3s}
.home-indicator.dark span{background:#111}
.toast{position:absolute;left:50%;top:calc(var(--sat) + 14px);transform:translate(-50%,-140%);background:#000c;color:#fff;padding:10px 16px;border-radius:20px;font-size:14px;z-index:70;transition:transform .4s var(--ease);white-space:nowrap}
.toast.show{transform:translate(-50%,0)}

/* Passcode */
.passcode{z-index:35;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--sat) + 8dvh);
  background:#0a1420aa;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);opacity:0;transform:translateY(6%)}
.passcode.show{opacity:1;transform:none}
.passcode.out{opacity:1;transform:translateY(-100%)}
.pc-title{font-size:20px;font-weight:600;text-align:center;white-space:pre-line;min-height:52px;line-height:1.3}
.pc-dots{display:flex;gap:18px;margin:22px 0 5dvh}
.pc-dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid #fff;transition:background .12s}
.pc-dots i.on{background:#fff}
.pc-dots.shake{animation:shake .5s}
@keyframes shake{10%,90%{transform:translateX(-4px)}20%,80%{transform:translateX(8px)}30%,50%,70%{transform:translateX(-14px)}40%,60%{transform:translateX(14px)}}
.pc-pad{--k:clamp(62px,9.5dvh,78px);display:grid;grid-template-columns:repeat(3,var(--k));gap:clamp(10px,1.8dvh,16px) 22px}
.pc-key{width:var(--k);height:var(--k);border-radius:50%;border:0;background:#ffffff2b;color:#fff;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .35s}
.pc-key:active{background:#ffffff80;transition:none}
.pc-key b{font-size:32px;font-weight:400;line-height:1}
.pc-key small{font-size:10px;letter-spacing:2px;line-height:1;margin-top:2px;font-weight:600}
.pc-foot{align-self:flex-end;margin:16px calc(var(--sar) + 46px) 0 0;background:none;border:0;color:#fff;font:inherit;font-size:17px;padding:10px}
@media (prefers-reduced-motion:reduce){.pc-dots.shake{animation:none}}

/* ---- iOS-style home layout (sizes in cqw = % of phone width) ---- */
.phone{container-type:size;--u:min(1cqw,.4621cqh);--ic:calc(18.1*var(--u))}
.home{padding:calc(var(--sat) + calc(2*var(--u))) calc(2.2*var(--u)) 0}
.grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:calc(23.9*var(--u));gap:0;align-items:start}
.icon{gap:calc(1.4*var(--u));font-size:calc(3.1*var(--u));white-space:nowrap}
.tw{position:relative}
.icon .tile{width:var(--ic);height:var(--ic);border-radius:calc(4.1*var(--u));font-size:calc(9.5*var(--u));overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover}
.tile.folder{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:calc(.8*var(--u));padding:calc(1.7*var(--u));font-size:0;background:rgba(40,30,35,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mini{border-radius:calc(1.3*var(--u));display:grid;place-items:center;font-size:calc(2.6*var(--u));font-weight:700;color:#fff;overflow:hidden;line-height:1}
.badge{position:absolute;top:calc(-2*var(--u));right:calc(-2*var(--u));min-width:calc(6.4*var(--u));height:calc(6.4*var(--u));padding:0 calc(1.8*var(--u));border-radius:calc(3.2*var(--u));background:#ff3b30;color:#fff;font-size:calc(3.9*var(--u));font-weight:500;display:grid;place-items:center;z-index:2}
.cal{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#111}
.cal small{color:#ff3b30;font-size:calc(3.2*var(--u));font-weight:600;line-height:1}.cal b{font-size:calc(11*var(--u));font-weight:300;line-height:1}
.widget{grid-column:span 2;grid-row:span 2;justify-self:center;width:calc(100% - calc(5.8*var(--u)));aspect-ratio:1;border-radius:calc(7*var(--u));
  background:var(--img) center/cover,linear-gradient(145deg,#7f86c9,#d3a6c8)}
.dock{height:calc(25*var(--u));left:calc(2.6*var(--u));right:calc(2.6*var(--u));bottom:calc(var(--sab)*.2 + calc(2.6*var(--u)));padding:0;border-radius:calc(9*var(--u));align-items:center}
.search{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--sab)*.2 + calc(30*var(--u)));padding:calc(2*var(--u)) calc(7*var(--u));border-radius:calc(6*var(--u));background:#ffffff33;font-size:calc(3.6*var(--u));z-index:11;pointer-events:none}
.folder-ov{position:absolute;inset:0;z-index:15;display:grid;place-items:center;background:#0005;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transition:opacity .3s}
.folder-ov.show{opacity:1}
.folder-sheet{width:calc(86*var(--u));padding:calc(5*var(--u)) calc(2*var(--u));border-radius:calc(9*var(--u));background:#ffffff38;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(5*var(--u)) 0;justify-items:center;transform:scale(.5);transition:transform .45s var(--ease)}
.show .folder-sheet{transform:none}

/* ---- fixes: scale to height too, no labels (like the real home screen), iOS folder sheet ---- */
.home{padding-inline:0}
.grid{width:calc(95.6*var(--u));margin:0 auto}
.dock{left:50%;right:auto;width:calc(94.8*var(--u));margin-left:calc(-47.4*var(--u));grid-template-columns:repeat(4,1fr)}
.icon>span{display:none}
.tile.folder{place-items:stretch}
.mini{font-size:calc(1.9*var(--u))}
.folder-ov{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0006}
.folder-title{color:#fff;font-size:calc(7*var(--u));margin-bottom:calc(3*var(--u));opacity:0;transition:opacity .3s}
.show .folder-title{opacity:1}
.folder-sheet{width:calc(77*var(--u));height:calc(86*var(--u));padding:calc(5.6*var(--u)) 0 0 calc(2.6*var(--u));border-radius:calc(8.5*var(--u));
  background:rgba(45,45,50,.5);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  display:grid;grid-template-columns:repeat(3,calc(23.9*var(--u)));grid-auto-rows:calc(23.9*var(--u));justify-content:start;align-content:start;justify-items:center;gap:0;
  transform:none;transition:transform .45s var(--ease)}
.show .folder-sheet{transform:none}

/* ---- Home Screen (standalone) mode ---- */
.standalone .statusbar{display:none}
.standalone .app::before{content:"";position:absolute;top:0;left:0;right:0;height:calc(var(--sat) + 6px);z-index:5;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0))}

/* ---- full-screen fix: use the real screen height; keep only iOS's own bars ---- */
.standalone .home-indicator span{display:none}
.standalone .home-indicator{height:28px;bottom:calc(var(--sab) + 2px);padding:0}
.standalone .home-indicator:not(.in-app){pointer-events:none}

/* ---- fixes: empty toast was visible as a black pill; flat frosted folders and dock like iOS ---- */
.toast{opacity:0;pointer-events:none;transition:transform .4s var(--ease),opacity .25s}
.toast.show{opacity:1}
.icon .tile{box-shadow:none}
.tile.folder{background:rgba(20,30,45,.42);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
.dock{background:rgba(120,128,140,.38);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);box-shadow:none}

.home-indicator{pointer-events:none!important}