:root{--color-bg:#f5f5f5;--color-bg-dark:#1a1a2e;--color-surface:#fff;--color-surface-dark:#16213e;--color-primary:#667eea;--color-primary-hover:#5a6fd6;--color-danger:#e53e3e;--color-text:#2d3748;--color-text-muted:#718096;--color-text-dark:#e2e8f0;--color-border:#e2e8f0;--color-border-dark:#2d3748;--radius:8px;--radius-lg:12px;--shadow:0 2px 8px #00000014;--shadow-lg:0 8px 32px #00000029;--transition:.2s ease;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1.5}body.dark{background:var(--color-bg-dark);color:var(--color-text-dark)}img{max-width:100%;display:block}button{cursor:pointer;font-family:inherit;font-size:inherit;background:0 0;border:none}a{color:inherit;text-decoration:none}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.photo-grid{flex-direction:column;gap:4px;width:100%;display:flex}.photo-grid__row{gap:4px;display:flex}.photo-grid__row--partial{justify-content:flex-start}.photo-grid__item{border-radius:var(--radius);min-width:0;transition:transform var(--transition),box-shadow var(--transition);flex:1;padding:0;position:relative;overflow:hidden}.photo-grid__item:hover{box-shadow:var(--shadow);transform:scale(1.01)}.photo-grid__item img{object-fit:cover;width:100%;height:220px;transition:opacity var(--transition);display:block}.photo-grid__item--selected img{opacity:.75}.photo-grid__item--selected{box-shadow:0 0 0 3px var(--color-primary,#6366f1)}.photo-grid__check{pointer-events:none;background:#00000040;border:2.5px solid #ffffffd9;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;transition:background .15s,border-color .15s;display:flex;position:absolute;top:8px;right:8px}.photo-grid__item:hover .photo-grid__check{background:#0006;border-color:#fff}.photo-grid__check--on{background:var(--color-primary,#6366f1)!important;border-color:var(--color-primary,#6366f1)!important}.photo-grid__hover-overlay{opacity:0;pointer-events:none;background:linear-gradient(#0000 0%,#0000009e 100%);justify-content:space-between;align-items:center;gap:6px;padding:6px 8px;transition:opacity .18s;display:flex;position:absolute;bottom:0;left:0;right:0}.photo-grid__item:hover .photo-grid__hover-overlay{opacity:1;pointer-events:auto}.photo-grid__hover-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 3px #00000080;text-align:left;flex:1;font-size:.72rem;font-weight:500;overflow:hidden}.photo-grid__hover-delete{color:#ef4444;cursor:pointer;background:0 0;border:1.5px solid #ef4444;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:4px 5px;transition:background .15s,color .15s;display:flex}.photo-grid__hover-delete:hover{background:#ef444426}.photo-grid__skeleton{border-radius:var(--radius);background:linear-gradient(90deg,#e2e8f0 25%,#edf2f7 50%,#e2e8f0 75%) 0 0/200% 100%;flex:1;height:220px;animation:1.4s infinite shimmer}.photo-grid--loading{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.photo-grid__empty{text-align:center;color:var(--color-text-muted);padding:48px 16px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.pp-overlay{z-index:1000;background:#000000eb;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.pp-container{flex-direction:column;width:100%;max-width:1200px;height:100%;margin:0 auto;display:flex;position:relative}.pp-container--zoomed{max-width:none;margin:0}.pp-container--zoomed .pp-body{flex:none;position:absolute;inset:0}.pp-container--zoomed .pp-header{z-index:20;background:linear-gradient(#000000bf 0%,#0000 100%);padding-bottom:24px;position:absolute;top:0;left:0;right:0}.pp-container--zoomed .pp-footer{z-index:20;background:linear-gradient(#0000 0%,#000000bf 100%);padding-top:24px;position:absolute;bottom:0;left:0;right:0}.pp-header{color:#fff;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.pp-filename{opacity:.8;white-space:nowrap;text-overflow:ellipsis;max-width:60%;font-size:.9rem;overflow:hidden}.pp-header-actions{gap:8px;display:flex}.pp-btn{border-radius:var(--radius);cursor:pointer;color:#fff;transition:background var(--transition);background:#ffffff1a;border:1px solid #ffffff4d;padding:6px 14px;font-size:.85rem}.pp-btn:hover{background:#fff3}.pp-btn-delete{border-color:var(--color-danger);color:#fc8181}.pp-btn-delete:hover{background:#e53e3e33}.pp-body{touch-action:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.pp-img{object-fit:contain;width:100%;height:100%;transition:opacity var(--transition);pointer-events:none;z-index:3;position:absolute;inset:0}.pp-img--thumb{object-fit:contain;filter:blur(12px);pointer-events:none;z-index:1;width:100%;height:100%;transition:opacity .3s;position:absolute;inset:0;transform:scale(1.08)}.pp-img--small{object-fit:contain;pointer-events:none;z-index:2;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0}.pp-img--fullres{object-fit:contain;pointer-events:none;z-index:4;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0}.pp-spinner{border:3px solid #fff3;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin;position:absolute}@keyframes spin{to{transform:rotate(360deg)}}.pp-nav{color:#fff;cursor:pointer;z-index:10;width:44px;height:44px;transition:background var(--transition);background:#00000080;border:none;border-radius:50%;font-size:1.2rem;position:absolute;top:50%;transform:translateY(-50%)}.pp-nav:hover{background:#fff3}.pp-nav-prev{left:16px}.pp-nav-next{right:16px}.pp-footer{color:#fff9;justify-content:center;align-items:center;gap:16px;padding:10px 16px;font-size:.85rem;display:flex}.pp-counter{opacity:.6}.pp-zoom-controls{background:#0000008c;border:1px solid #fff3;border-radius:20px;align-items:center;display:flex;overflow:hidden}.pp-zoom-btn{color:#fff;cursor:pointer;width:36px;height:32px;transition:background var(--transition);background:0 0;border:none;justify-content:center;align-items:center;font-size:1.1rem;line-height:1;display:flex}.pp-zoom-btn:hover:not(:disabled){background:#ffffff26}.pp-zoom-btn:disabled{opacity:.35;cursor:default}.pp-zoom-level{cursor:pointer;border-left:1px solid #ffffff26;border-right:1px solid #ffffff26;width:36px;height:32px;padding:0}.upload-toast{background:var(--color-surface);border-radius:var(--radius-lg);width:320px;box-shadow:var(--shadow-lg);z-index:900;border:1px solid var(--color-border);padding:16px;position:fixed;bottom:24px;right:24px}.upload-toast__header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.upload-toast__title{font-size:.9rem;font-weight:600}.upload-toast__cancel{color:var(--color-text-muted);transition:color var(--transition);border-radius:4px;padding:2px 6px;font-size:1rem;line-height:1}.upload-toast__cancel:hover{color:var(--color-danger)}.upload-toast__filename{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;margin-bottom:10px;font-size:.8rem;overflow:hidden}.upload-toast__bar-track{background:var(--color-border);border-radius:9999px;height:6px;margin-bottom:6px;overflow:hidden}.upload-toast__bar-fill{background:var(--color-primary);border-radius:9999px;height:100%;transition:width .3s}.upload-toast__meta{color:var(--color-text-muted);gap:12px;margin-bottom:10px;font-size:.78rem;display:flex}.upload-toast__actions{gap:8px;display:flex}.upload-toast__btn{border-radius:var(--radius);border:1px solid var(--color-border);transition:background var(--transition);flex:1;padding:6px;font-size:.82rem}.upload-toast__btn--pause{color:var(--color-text)}.upload-toast__btn--resume{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.upload-toast__btn:hover{opacity:.85}.folder-sidebar{background:var(--color-surface);border-right:1px solid var(--color-border);flex-direction:column;gap:4px;width:240px;min-width:240px;height:100%;padding:16px 0;display:flex;overflow-y:auto}.folder-sidebar__header{justify-content:space-between;align-items:center;padding:0 16px 12px;display:flex}.folder-sidebar__title{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);font-size:.85rem;font-weight:700}.folder-sidebar__new-btn{color:var(--color-primary);border-radius:var(--radius);border:1px solid var(--color-primary);transition:background var(--transition);padding:4px 8px;font-size:.8rem}.folder-sidebar__new-btn:hover{background:var(--color-primary);color:#fff}.folder-sidebar__item{border-radius:0;align-items:center;display:flex;position:relative}.folder-sidebar__item-btn,.folder-sidebar__item--root{text-align:left;width:100%;color:var(--color-text);transition:background var(--transition);border-radius:0;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;display:flex}.folder-sidebar__item-btn:hover,.folder-sidebar__item--root:hover{background:#667eea14}.folder-sidebar__item--active .folder-sidebar__item-btn,.folder-sidebar__item--root.folder-sidebar__item--active{color:var(--color-primary);background:#667eea1f;font-weight:600}.folder-sidebar__cover{object-fit:cover;border-radius:4px;flex-shrink:0;width:24px;height:24px}.folder-sidebar__icon{flex-shrink:0;font-size:1rem}.folder-sidebar__name{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.folder-sidebar__star{color:gold;font-size:.85rem}.folder-sidebar__owner{color:var(--color-text-muted);font-size:.75rem}.folder-sidebar__count{color:var(--color-text-muted);background:var(--color-border);border-radius:9999px;margin-left:auto;padding:1px 7px;font-size:.75rem}.folder-sidebar__section-header{width:100%;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;transition:background var(--transition);align-items:center;gap:6px;padding:8px 16px;font-size:.8rem;font-weight:600;display:flex}.folder-sidebar__section-header:hover{background:#0000000a}.folder-sidebar__list{list-style:none}.folder-sidebar__empty{color:var(--color-text-muted);padding:8px 24px;font-size:.82rem;font-style:italic}.folder-sidebar__skeleton{border-radius:var(--radius);background:linear-gradient(90deg,#e2e8f0 25%,#edf2f7 50%,#e2e8f0 75%) 0 0/200% 100%;height:36px;margin:4px 16px;animation:1.4s infinite shimmer}.folder-sidebar__actions{gap:4px;display:flex;position:absolute;right:8px}.folder-sidebar__action-btn{transition:background var(--transition);border-radius:4px;padding:2px 6px;font-size:.85rem}.folder-sidebar__action-btn:hover{background:#00000014}.folder-sidebar__action-btn--danger:hover{background:#e53e3e1a}.auth-page{background:var(--color-bg);justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.auth-card{background:var(--color-surface);border-radius:var(--radius-lg);width:100%;max-width:420px;box-shadow:var(--shadow-lg);padding:40px 36px}.auth-card__header{text-align:center;margin-bottom:28px}.auth-card__title{color:var(--color-text);margin-bottom:6px;font-size:1.6rem;font-weight:700}.auth-card__subtitle{color:var(--color-text-muted);font-size:.9rem}.auth-form{flex-direction:column;gap:16px;display:flex}.auth-form__error{color:var(--color-danger);border-radius:var(--radius);background:#fff5f5;border:1px solid #feb2b2;margin-bottom:4px;padding:10px 14px;font-size:.875rem}.auth-form__success{color:#276749;border-radius:var(--radius);background:#f0fff4;border:1px solid #9ae6b4;margin-bottom:4px;padding:10px 14px;font-size:.875rem}.auth-form__field{flex-direction:column;gap:6px;display:flex}.auth-form__label{color:var(--color-text);font-size:.875rem;font-weight:600}.auth-form__input{border:1px solid var(--color-border);border-radius:var(--radius);width:100%;color:var(--color-text);background:var(--color-surface);transition:border-color var(--transition),box-shadow var(--transition);outline:none;padding:10px 14px;font-family:inherit;font-size:.95rem}.auth-form__input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #667eea26}.auth-form__input[readonly]{background:var(--color-bg);color:var(--color-text-muted);cursor:default}.auth-form__submit{background:var(--color-primary);color:#fff;border-radius:var(--radius);cursor:pointer;width:100%;transition:background var(--transition),opacity var(--transition);border:none;margin-top:4px;padding:12px;font-size:.95rem;font-weight:600}.auth-form__submit:hover:not(:disabled){background:var(--color-primary-hover)}.auth-form__submit:disabled{opacity:.6;cursor:not-allowed}.auth-card__footer{text-align:center;color:var(--color-text-muted);margin-top:20px;font-size:.875rem}.auth-card__link{color:var(--color-primary);cursor:pointer;font-family:inherit;font-weight:600;font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.auth-card__link--disabled{opacity:.45;cursor:not-allowed;text-decoration:none}.otp-group{justify-content:center;gap:10px;margin:24px 0;display:flex}.otp-input{text-align:center;border:2px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);width:48px;height:56px;color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition);outline:none;font-family:Courier New,monospace;font-size:1.4rem;font-weight:700}.otp-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #667eea26}.btn{border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:background var(--transition),border-color var(--transition);justify-content:center;align-items:center;padding:9px 18px;font-family:inherit;font-size:.9rem;font-weight:600;display:inline-flex}.btn:hover{background:var(--color-bg)}.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn:disabled{opacity:.55;cursor:not-allowed}.setup-page{background:var(--color-bg);justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.setup-card{background:var(--color-surface);border-radius:var(--radius-lg);width:100%;max-width:460px;box-shadow:var(--shadow-lg);padding:40px 36px}.setup-card__header{text-align:center;margin-bottom:24px}.setup-card__icon{margin-bottom:10px;font-size:2.4rem}.setup-card__title{color:var(--color-text);margin-bottom:8px;font-size:1.5rem;font-weight:700}.setup-card__subtitle{color:var(--color-text-muted);font-size:.9rem;line-height:1.5}.setup-avatar{flex-direction:column;align-items:center;gap:8px;margin-bottom:24px;display:flex}.setup-avatar__btn{background:var(--color-primary);cursor:pointer;border:none;border-radius:50%;width:80px;height:80px;position:relative;overflow:hidden}.setup-avatar__btn img{object-fit:cover;width:100%;height:100%}.setup-avatar__initials{color:#fff;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.6rem;font-weight:700;display:flex}.setup-avatar__overlay{color:#fff;opacity:0;transition:opacity var(--transition);background:#00000073;justify-content:center;align-items:center;font-size:.78rem;font-weight:600;display:flex;position:absolute;inset:0}.setup-avatar__btn:hover .setup-avatar__overlay{opacity:1}.setup-avatar__hint{color:var(--color-text-muted);font-size:.8rem}.setup-form{flex-direction:column;gap:16px;margin-bottom:24px;display:flex}.setup-form__required{color:var(--color-danger)}.setup-form__optional{color:var(--color-text-muted);font-size:.8em;font-weight:400}.setup-card__actions{flex-direction:column;align-items:center;gap:12px;display:flex}.setup-card__skip{color:var(--color-text-muted);cursor:pointer;transition:color var(--transition);background:0 0;border:none;padding:4px;font-family:inherit;font-size:.875rem;text-decoration:underline}.setup-card__skip:hover{color:var(--color-text)}.account-page{background:var(--color-bg);min-height:100vh}.page-loading{justify-content:center;align-items:center;min-height:100vh;display:flex}.account-topbar{background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:100;justify-content:space-between;align-items:center;padding:14px 24px;display:flex;position:sticky;top:0}.account-topbar__back{color:var(--color-primary);font-size:.9rem;font-weight:600}.account-topbar__title{font-size:1rem;font-weight:700}.account-topbar__logout{color:var(--color-danger);font-size:.875rem;font-weight:600}.account-notice{justify-content:space-between;align-items:center;padding:12px 24px;font-size:.875rem;font-weight:500;display:flex}.account-notice--success{color:#276749;background:#f0fff4}.account-notice--error{color:var(--color-danger);background:#fff5f5}.account-body{flex-direction:column;gap:24px;max-width:680px;margin:0 auto;padding:32px 24px;display:flex}.account-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:28px}.account-card__title{color:var(--color-text);margin-bottom:20px;font-size:1.1rem;font-weight:700}.account-avatar{align-items:center;gap:16px;margin-bottom:24px;display:flex}.account-avatar__btn{background:var(--color-primary);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;width:72px;height:72px;position:relative;overflow:hidden}.account-avatar__btn img{object-fit:cover;width:100%;height:100%}.account-avatar__initials{color:#fff;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.4rem;font-weight:700;display:flex}.account-avatar__overlay{color:#fff;opacity:0;transition:opacity var(--transition);background:#00000073;justify-content:center;align-items:center;font-size:.78rem;font-weight:600;display:flex;position:absolute;inset:0}.account-avatar__btn:hover .account-avatar__overlay{opacity:1}.account-avatar__name{color:var(--color-text);font-size:1rem;font-weight:700}.account-avatar__email{color:var(--color-text-muted);font-size:.85rem}.account-form{flex-direction:column;gap:14px;margin-bottom:20px;display:flex}.account-form__field{flex-direction:column;gap:5px;display:flex}.account-form__label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:600}.account-form__input{border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);background:var(--color-surface);transition:border-color var(--transition);outline:none;padding:9px 12px;font-family:inherit;font-size:.9rem}.account-form__input:focus{border-color:var(--color-primary)}.account-form__input[readonly]{background:var(--color-bg);color:var(--color-text-muted)}.account-form__actions{gap:10px;display:flex}.storage-summary__bar-track{background:var(--color-border);border-radius:9999px;height:8px;margin-bottom:8px;overflow:hidden}.storage-summary__bar-fill{background:var(--color-primary);border-radius:9999px;height:100%;transition:width .4s}.storage-summary__bar-fill.warning{background:#ed8936}.storage-summary__bar-fill.danger{background:var(--color-danger)}.storage-summary__text{color:var(--color-text-muted);margin-bottom:8px;font-size:.88rem}.storage-summary__meta{color:var(--color-text-muted);flex-wrap:wrap;gap:12px;font-size:.82rem;display:flex}@media (max-width:768px){.photo-grid__item img,.photo-grid__skeleton{height:150px}.photo-grid--loading{grid-template-columns:repeat(2,1fr)}.pp-btn{padding:5px 10px;font-size:.78rem}.pp-nav{width:36px;height:36px;font-size:1rem}.pp-nav-prev{left:6px}.pp-nav-next{right:6px}.upload-toast{width:auto;bottom:12px;left:12px;right:12px}.auth-card{padding:28px 20px}.auth-page{padding:16px}.setup-card{padding:28px 20px}.setup-page{padding:16px}.account-topbar{padding:12px 16px}.account-body{margin:16px auto;padding:16px}.account-card{padding:20px 16px}.account-form__actions{flex-wrap:wrap}}@media (max-width:480px){.otp-input{width:38px;height:46px;font-size:1.2rem}.otp-group{gap:6px}.photo-grid__item img,.photo-grid__skeleton{height:130px}}