@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap";*{box-sizing:border-box}body{color:#f4f5f7;background:#090b10;margin:0;font-family:DM Sans,system-ui,sans-serif}button,input{font:inherit}.app{background:radial-gradient(circle at 50% -10%,#1c2433 0,#090b10 35%);min-height:100vh}header{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:4;background:#090b10dd;border-bottom:1px solid #20242d;justify-content:space-between;align-items:center;height:68px;padding:0 18px;display:flex;position:sticky;top:0}.brand{letter-spacing:.13em;align-items:center;gap:9px;font-size:13px;font-weight:700;display:flex}.brandmark{color:#0a0d12;background:linear-gradient(145deg,#e9eef7,#707b91);border-radius:10px;place-items:center;width:32px;height:32px;display:grid}.upload{color:#0b0d12;cursor:pointer;background:#eef1f6;border-radius:12px;align-items:center;gap:7px;padding:9px 13px;font-size:13px;font-weight:700;display:flex}.upload input,.circleUpload input{display:none}.progress{z-index:10;background:#161a22;height:3px;position:fixed;top:68px;left:0;right:0}.progress i{background:#dce5f7;height:100%;transition:width .2s;display:block}main{max-width:1100px;margin:auto;padding:28px 16px 100px}.hero{justify-content:space-between;align-items:end;margin:10px 0 20px;display:flex}.eyebrow{letter-spacing:.16em;color:#8892a4;font-size:10px;font-weight:700}.hero h2{margin:8px 0;font-size:30px;line-height:1}.hero p{color:#818b9c;margin:0;font-size:13px}.circleUpload{color:#090b10;cursor:pointer;background:#edf0f5;border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.storage{background:#10141b;border:1px solid #202631;border-radius:14px;align-items:center;gap:12px;height:50px;margin-bottom:14px;padding:0 15px;font-size:13px;display:flex}.storage div{color:#9aa3b3;align-items:center;gap:8px;display:flex}.storage strong{font-size:12px}.zoomCtl{background:#171b24;border-radius:10px;gap:2px;margin-left:auto;padding:3px;display:flex}.zoomCtl button{color:#c3c9d4;cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;width:30px;height:30px;display:grid}.zoomCtl button:disabled{opacity:.3;cursor:default}.grid{grid-template-columns:repeat(var(--gridcols,3),1fr);gap:3px;display:grid}.tile{aspect-ratio:1;cursor:pointer;background:#11151d;border:0;padding:0;position:relative;overflow:hidden}.tile img{object-fit:cover;width:100%;height:100%;transition:transform .35s;display:block}.tile:hover img{transform:scale(1.04)}.heart{filter:drop-shadow(0 1px 4px #000);color:#fff;position:absolute;top:9px;right:9px}.empty{color:#7e8898;text-align:center;align-content:center;place-items:center;height:330px;display:grid}.empty h3{color:#dfe3ea;margin:12px 0 4px}.empty p{margin:0;font-size:13px}nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:5;background:#0b0e14ed;border-top:1px solid #20242d;justify-content:center;gap:30px;height:72px;display:flex;position:fixed;bottom:0;left:0;right:0}nav button{color:#727c8d;cursor:pointer;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:5px;font-size:10px;display:flex}nav svg{width:20px}nav .active{color:#f4f5f7}.viewer{z-index:20;background:#020304f5;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.viewer>img,.viewer>video{object-fit:contain;max-width:100%;max-height:calc(100% - 110px)}.playBadge{color:#fff;background:linear-gradient(#0000 60%,#0006);place-items:center;display:grid;position:absolute;inset:0}.playBadge svg{filter:drop-shadow(0 1px 5px #000)}.vclose{color:#fff;z-index:2;background:#20242dcc;border:0;border-radius:50%;place-items:center;width:42px;height:42px;display:grid;position:absolute;top:20px;right:18px}.vbar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#080a0ddd;justify-content:space-between;align-items:center;min-height:88px;padding:15px 18px;display:flex;position:absolute;bottom:0;left:0;right:0}.vbar strong{text-overflow:ellipsis;white-space:nowrap;max-width:52vw;font-size:13px;display:block;overflow:hidden}.vbar small{color:#8993a3;font-size:11px}.actions{gap:8px;display:flex}.actions button,.actions a{color:#e9edf4;background:#1a1f28;border:0;border-radius:12px;place-items:center;width:42px;height:42px;text-decoration:none;display:grid}.auth{background:radial-gradient(circle at 50% 20%,#202a3d,#090b10 48%);place-items:center;min-height:100vh;padding:24px;display:grid;position:relative;overflow:hidden}.orb{filter:blur(70px);background:#66789718;border-radius:50%;width:400px;height:400px;position:absolute;top:-160px}.auth .brand{position:absolute;top:30px;left:24px}.authcard{width:min(410px,100%);padding:32px 0}.authcard h1{letter-spacing:-.04em;margin:10px 0;font-size:38px}.authcard p{color:#858f9f;margin:0 0 26px}.authcard input{color:#fff;background:#11151c;border:1px solid #272d38;border-radius:13px;outline:none;width:100%;height:52px;margin-bottom:10px;padding:0 15px}.authcard input:focus{border-color:#66748c}.primary{color:#080a0e;cursor:pointer;background:#eef1f6;border:0;border-radius:13px;width:100%;height:52px;margin-top:7px;font-weight:700}.switch{color:#929bab;cursor:pointer;background:0 0;border:0;width:100%;padding:18px;font-size:12px}.error{color:#ffb5bb;background:#321a1d;border-radius:10px;margin:4px 0;padding:10px;font-size:12px}.pwfield{position:relative}.pwfield input{padding-right:44px!important}.pwtoggle{color:#8892a4;cursor:pointer;background:0 0;border:0;place-items:center;width:40px;height:40px;display:grid;position:absolute;top:6px;right:6px}.settings{align-items:center}.settingsCard{background:#11151c;border:1px solid #232935;border-radius:18px;width:min(380px,88vw);padding:24px}.settingsCard h2{margin:8px 0 18px;font-size:24px}.settingsRow{color:#9aa3b3;border-bottom:1px solid #1c212b;justify-content:space-between;align-items:center;padding:12px 0;font-size:13px;display:flex}.settingsRow strong{color:#f4f5f7;text-overflow:ellipsis;white-space:nowrap;max-width:60%;font-weight:600;overflow:hidden}.logoutBtn{color:#ffb5bb;cursor:pointer;background:#321a1d;border:0;border-radius:13px;justify-content:center;align-items:center;gap:8px;width:100%;height:50px;margin-top:20px;font-weight:700;display:flex}.authcard form{margin-top:20px}.albumGrid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.albumCard{text-align:left;cursor:pointer;color:inherit;background:#11151d;border:1px solid #1c212b;border-radius:16px;padding:12px}.albumCover{aspect-ratio:1;color:#5c6577;background:#1a1f28;border-radius:11px;place-items:center;margin-bottom:10px;display:grid;overflow:hidden}.albumCover img{object-fit:cover;width:100%;height:100%;display:block}.albumCard strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;display:block;overflow:hidden}.albumCard span{color:#818b9c;font-size:12px}.albumHeader{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:2;background:#080a0ddd;justify-content:space-between;align-items:center;height:68px;padding:0 10px;display:flex;position:absolute;top:0;left:0;right:0}.headBtn{color:#fff;background:#20242dcc;border:0;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;display:grid}.albumHeader strong{text-overflow:ellipsis;white-space:nowrap;max-width:60%;font-size:14px;overflow:hidden}.albumDetail,.picker{flex-direction:column;align-items:stretch;overflow-y:auto}.albumBody{width:100%;max-width:1100px;margin:0 auto;padding:84px 16px 30px}.addToAlbum{color:#e9edf4;cursor:pointer;background:#1a1f28;border:1px solid #262c38;border-radius:12px;align-items:center;gap:7px;margin-bottom:14px;padding:10px 14px;font-size:13px;font-weight:600;display:flex}.pickConfirm{color:#080a0e;background:#eef1f6;border:0;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700}.pickConfirm:disabled{opacity:.4}.pickTile.already{opacity:.35;cursor:default}.pickMark{color:#fff;filter:drop-shadow(0 1px 4px #000);position:absolute;top:8px;right:8px}.pickMark.already{color:#8892a4}.vnav{color:#fff;z-index:2;background:#20242dcc;border:0;border-radius:50%;place-items:center;width:42px;height:42px;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.vprev{left:14px}.vnext{right:14px}@media (width>=700px){.grid{gap:5px}.albumGrid{grid-template-columns:repeat(4,1fr)}.hero h2{font-size:40px}nav{display:none}main{padding-bottom:40px}}
