:root{--accent:#0a84ff;--ease:cubic-bezier(.32,.72,0,1);--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[data-theme=dark]{--app-bg:#000;--app-text:#fff;--muted:rgba(235,235,245,.6);--glass:rgba(44,44,48,.5);--glass-strong:rgba(30,30,34,.82);--glass-border:rgba(255,255,255,.13);--fill:rgba(120,120,128,.28);--sep:rgba(255,255,255,.1);--page:#050506;--scrim:rgba(0,0,0,.22)}
[data-theme=light]{--app-bg:#f2f2f7;--app-text:#000;--muted:rgba(60,60,67,.6);--glass:rgba(255,255,255,.55);--glass-strong:rgba(250,250,253,.86);--glass-border:rgba(255,255,255,.7);--fill:rgba(120,120,128,.18);--sep:rgba(60,60,67,.14);--page:#d4d6dc;--scrim:rgba(255,255,255,.04)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--page);color:var(--app-text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;outline:none}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{display:block;-webkit-user-drag:none}
.hidden{display:none!important}
body{display:flex;align-items:center;justify-content:center}
#device{position:relative;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));overflow:hidden;background:#000;isolation:isolate;font-size:16px}
body.fullscreen-mode #device{width:100vw;height:100vh}
#wallpaper{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transition:transform .7s var(--ease)}
#device.app-open #wallpaper{transform:scale(1.05)}
#scrim{position:absolute;inset:0;z-index:0;background:var(--scrim);pointer-events:none}
#home{position:absolute;inset:0;z-index:1;transition:transform .6s var(--ease),opacity .5s var(--ease)}
#device.app-open #home{transform:scale(.95);opacity:0}
#home-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:3.2em 0 9em;scrollbar-width:none}
#home-scroll::-webkit-scrollbar{display:none}
#statusbar{position:absolute;top:0;left:0;right:0;height:2.5em;display:flex;align-items:center;justify-content:space-between;padding:.3em 1.8em 0;z-index:7;color:#fff;font-size:.85em;font-weight:600;letter-spacing:.01em;text-shadow:0 1px 4px rgba(0,0,0,.25);pointer-events:none}
#statusbar>*{pointer-events:auto}
#device.app-open #statusbar{color:var(--app-text);text-shadow:none}
#sb-left,#sb-center{flex:1;display:flex;align-items:center}
#sb-center{justify-content:center}
#sb-right{display:flex;align-items:center;gap:.5em;padding:.3em .6em;border-radius:1em;transition:background .2s}
#sb-right:hover{background:rgba(255,255,255,.14)}
.pill{background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;font-weight:600;font-size:.95em;padding:.25em 1em;border-radius:2em}
.link-btn{color:var(--accent);font-weight:500;font-size:.95em;padding:.3em .6em}
#widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;max-width:60em;margin:0 auto;padding:0 2em}
body.no-widgets #widgets{display:none}
.widget{position:relative;min-height:10.5em;border-radius:1.7em;padding:1.1em 1.25em;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);box-shadow:0 .7em 2.2em rgba(0,0,0,.18);color:var(--app-text);overflow:hidden;animation:rise .7s var(--ease) both}
#w-bank{animation-delay:.06s}
#w-notifs{animation-delay:.12s}
.w-head{display:flex;align-items:center;gap:.5em;font-size:.72em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.w-head i{width:.7em;height:.7em;border-radius:50%;background:var(--c,var(--accent))}
#w-time{--c:#ff453a}
#w-bank{--c:#30d158}
#w-notifs{--c:#ff9f0a}
#w-time .w-head span{color:#ff453a}
.w-main{margin-top:auto}
#w-day-num{font-size:3.4em;font-weight:300;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#w-month{font-size:.95em;font-weight:500;color:var(--muted);margin-top:.2em;text-transform:capitalize}
#w-time-text{font-size:.9em;font-weight:600;margin-top:.7em;font-variant-numeric:tabular-nums}
#w-money{font-size:2.1em;font-weight:600;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.w-sub{font-size:.8em;font-weight:500;color:var(--muted);margin-top:.2em}
.w-status{display:flex;align-items:center;gap:.5em;font-size:.75em;font-weight:600;color:#ffb340;margin-top:.8em}
.w-status .dot{width:.6em;height:.6em;border-radius:50%;background:currentColor}
.w-status.on{color:#30d158}
#notifs-list{display:flex;flex-direction:column;margin-top:.7em;gap:.1em}
.w-notif{padding:.55em 0;border-bottom:1px solid var(--sep)}
.w-notif:last-child{border-bottom:0}
.w-notif .nt{font-size:.88em;font-weight:600}
.w-notif .ns{font-size:.76em;color:var(--muted);margin-top:.1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-empty{font-size:.85em;color:var(--muted);margin-top:.8em}
#grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2.1em .6em;max-width:60em;margin:2.6em auto 0;padding:0 2em}
body.no-widgets #grid{margin-top:1em}
.icon{display:flex;flex-direction:column;align-items:center;gap:.6em;color:#fff;position:relative;transition:transform .25s var(--ease),opacity .2s}
.icon.enter{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.icon.dragging{opacity:.35}
.ico{width:4.7em;height:4.7em;border-radius:22.5%;overflow:hidden;display:grid;place-items:center;box-shadow:0 .4em 1.1em rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .25s var(--ease),filter .2s}
.icon:active .ico{transform:scale(.9);filter:brightness(.85)}
.ico img{width:100%;height:100%;object-fit:cover}
.ico b{font-size:1.9em;font-weight:600;color:#fff}
.icon span.lbl{font-size:.78em;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.5);max-width:7.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.delete-btn{position:absolute;top:-.5em;left:calc(50% - 3.1em);width:1.6em;height:1.6em;border-radius:50%;background:rgba(60,60,64,.92);color:#fff;display:none;place-items:center;font-size:.95em;font-weight:700;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:pointer;z-index:2}
#grid.editing .delete-btn{display:grid}
#grid.editing .icon{animation:jiggle .28s ease-in-out infinite alternate}
#grid.editing .icon:nth-child(even){animation-delay:-.14s;animation-direction:alternate-reverse}
.grid-empty{grid-column:1/-1;text-align:center;color:#fff;font-size:.95em;opacity:.8;padding:2em 0;text-shadow:0 1px 4px rgba(0,0,0,.4)}
@keyframes rise{from{opacity:0;transform:translateY(.8em) scale(.96)}to{opacity:1;transform:none}}
@keyframes jiggle{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
#dock{position:absolute;left:50%;bottom:1.7em;transform:translateX(-50%);display:flex;gap:1em;padding:.75em;border-radius:2.1em;background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);box-shadow:0 1em 2.6em rgba(0,0,0,.28);z-index:3;transition:transform .55s var(--ease),opacity .4s}
#device.app-open #dock{transform:translate(-50%,9em);opacity:0}
.dock-item{width:4.3em;height:4.3em;border-radius:22.5%;overflow:hidden;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .25s var(--ease)}
.dock-item:active{transform:scale(.9)}
.dock-item svg{display:block}
#app-window{position:absolute;inset:0;z-index:5;background:var(--app-bg);overflow:hidden;padding:2.5em 0 1.2em;transform-origin:50% 50%;will-change:transform,opacity;transition:transform .5s var(--ease),border-radius .5s var(--ease),opacity .3s ease}
#app-window iframe{border:0;width:100%;height:100%;display:block;background:var(--app-bg)}
#home-bar{position:absolute;left:50%;bottom:.45em;transform:translateX(-50%);width:9em;height:.34em;border-radius:1em;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 1px 4px rgba(0,0,0,.35);z-index:20;cursor:pointer;transition:background .3s}
#home-bar::before{content:"";position:absolute;inset:-1em -2em}
#device.app-open #home-bar{background:var(--app-text);opacity:.85}
#backdrop{position:absolute;inset:0;z-index:9;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
#backdrop.open{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
#control-center{position:absolute;top:.9em;right:.9em;bottom:.9em;width:21em;z-index:10;border-radius:2.1em;padding:1.3em;display:flex;flex-direction:column;gap:1.1em;background:var(--glass-strong);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(50px) saturate(180%);backdrop-filter:blur(50px) saturate(180%);box-shadow:0 1.4em 3.5em rgba(0,0,0,.4);color:var(--app-text);transform:translateX(115%);visibility:hidden;overflow-y:auto;scrollbar-width:none;transition:transform .55s var(--ease),visibility 0s .55s}
#control-center::-webkit-scrollbar{display:none}
#control-center.open{transform:none;visibility:visible;transition:transform .55s var(--ease),visibility 0s}
.cc-profile{display:flex;align-items:center;gap:.9em;padding:.8em;border-radius:1.4em;background:var(--fill)}
.cc-profile img{width:2.8em;height:2.8em;border-radius:50%;object-fit:cover;flex:none}
.cc-info{min-width:0}
#cc-name{font-weight:600;font-size:.95em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cc-status{font-size:.78em;color:var(--muted);margin-top:.15em}
.cc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.cc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55em;aspect-ratio:1;border-radius:1.4em;background:var(--fill);transition:background .25s,transform .2s,color .25s}
.cc-tile:active{transform:scale(.94)}
.cc-tile.active{background:var(--accent);color:#fff}
.cc-ico{width:1.7em;height:1.7em;display:block}
.cc-ico svg{width:100%;height:100%;display:block}
.cc-lbl{font-size:.7em;font-weight:600;text-align:center;line-height:1.2;padding:0 .3em}
.cc-slider{display:flex;align-items:center;gap:.8em;padding:1em 1.1em;border-radius:1.4em;background:var(--fill);color:var(--muted)}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:.4em;border-radius:1em;background:rgba(128,128,134,.4);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.5em;height:1.5em;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:pointer}
#search-sheet{position:absolute;left:50%;top:5em;width:38em;max-width:92%;max-height:70%;z-index:10;display:flex;flex-direction:column;border-radius:1.9em;padding:1em;background:var(--glass-strong);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(50px) saturate(180%);backdrop-filter:blur(50px) saturate(180%);box-shadow:0 1.4em 3.5em rgba(0,0,0,.4);color:var(--app-text);transform:translate(-50%,-1.5em) scale(.96);opacity:0;visibility:hidden;transition:transform .45s var(--ease),opacity .3s ease,visibility 0s .45s}
#search-sheet.open{transform:translate(-50%,0) scale(1);opacity:1;visibility:visible;transition:transform .45s var(--ease),opacity .3s ease,visibility 0s}
.search-field{display:flex;align-items:center;gap:.7em;padding:.35em .5em .35em .9em;border-radius:1em;background:var(--fill);color:var(--muted)}
.search-field input{flex:1;background:none;border:0;outline:none;color:var(--app-text);font:inherit;font-size:1.05em;padding:.5em 0;-webkit-user-select:text;user-select:text}
.search-field input::placeholder{color:var(--muted)}
#search-results{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3em .5em;overflow-y:auto;padding:1.3em .3em .5em;scrollbar-width:none}
#search-results::-webkit-scrollbar{display:none}
#search-results .icon{color:var(--app-text)}
#search-results .icon span.lbl{text-shadow:none}
.res-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.9em;padding:1em 0}
#lock-screen{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.16);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);text-shadow:0 1px 6px rgba(0,0,0,.2);transition:transform .6s var(--ease),opacity .5s ease;touch-action:none}
#lock-screen:not(.active){transform:translateY(-100%);opacity:0;pointer-events:none}
#lock-hero{display:flex;flex-direction:column;align-items:center;transition:transform .5s var(--ease)}
#lock-glyph{opacity:.85;margin-bottom:.6em}
#lock-date{font-size:1.45em;font-weight:500;opacity:.88}
#lock-time{font-size:8em;font-weight:600;line-height:1.02;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:font-size .5s var(--ease)}
#lock-screen.pad-open #lock-time{font-size:4.6em}
#lock-screen.pad-open #lock-date{font-size:1.1em}
#lock-screen.pad-open #lock-glyph{display:none}
#lock-hint{position:absolute;bottom:2.4em;font-size:.95em;font-weight:500;opacity:.7;animation:pulse 2.6s ease-in-out infinite;text-align:center;padding:0 2em}
#lock-screen.pad-open #lock-hint{display:none}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.85}}
#lock-pad{display:none;flex-direction:column;align-items:center;margin-top:1.1em}
#lock-screen.pad-open #lock-pad{display:flex}
#lock-msg{font-size:1em;font-weight:500;margin-bottom:1em;min-height:1.3em}
#lock-dots{display:flex;gap:1.1em;margin-bottom:1.5em}
#lock-dots span{width:.9em;height:.9em;border-radius:50%;border:1.5px solid #fff;transition:background .15s,transform .15s}
#lock-dots span.on{background:#fff;transform:scale(1.1)}
#lock-dots.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-.9em)}40%{transform:translateX(.9em)}60%{transform:translateX(-.6em)}80%{transform:translateX(.6em)}}
#lock-keys{display:grid;grid-template-columns:repeat(3,3.9em);gap:.8em 1.2em}
.key{width:3.9em;height:3.9em;border-radius:50%;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-size:1.5em;font-weight:300;display:grid;place-items:center;transition:background .15s,transform .15s;color:#fff}
.key:active{background:rgba(255,255,255,.4);transform:scale(.94)}
.key.blank{visibility:hidden}
.key.del{background:none;font-size:1.05em;font-weight:500}
#lock-cancel{color:#fff;margin-top:1.2em;opacity:.85}
#lock-bar{position:absolute;bottom:.45em;left:50%;transform:translateX(-50%);width:9em;height:.34em;border-radius:1em;background:#fff;cursor:pointer}
#lock-bar::before{content:"";position:absolute;inset:-1em -2em}
#lock-screen.pad-open #lock-bar{display:none}
#dim{position:absolute;inset:0;z-index:100;background:#000;opacity:0;pointer-events:none;transition:opacity .2s}
body.reduce-anim *{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
