:root{--bg: #0b0d10;--surface: #14181d;--surface-2: #1b2027;--border: #262d36;--text: #e8ecf1;--muted: #8b97a6;--accent: #4c9aff;--danger: #ff6b6b;--ok: #3ddc97;--warn: #ffb454;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;color:var(--muted)}.muted{color:var(--muted)}.error{color:var(--danger);margin:8px 0 0}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.grow{flex:1 1 200px;min-width:0}.page{max-width:1100px;margin:0 auto;padding:32px 20px 64px}.page--centered{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.page__header{margin-bottom:28px}.page__header--row{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}h1{font-size:24px;margin:0;letter-spacing:-.01em}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid transparent;background:var(--accent);color:#05121f;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}button:disabled{opacity:.45;cursor:not-allowed}.button--ghost,button.button--ghost{background:transparent;border-color:var(--border);color:var(--text);font-weight:500}.button--danger,button.button--danger{background:transparent;border-color:var(--border);color:var(--danger);font-weight:500}input[type=text],input[type=password],input:not([type]){padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit}input:focus-visible,button:focus-visible,.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.token-form{display:flex;gap:8px}.switch{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .15s ease,border-color .15s ease}.card:hover{transform:translateY(-2px);border-color:var(--accent)}.card__thumb{display:block;width:100%;aspect-ratio:2 / 1;object-fit:cover;background:var(--surface-2)}.card__body{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px}.card__title{font-weight:600}.card__meta{color:var(--muted);font-size:13px}.upload{display:flex;flex-direction:column;gap:12px;padding:16px;margin-bottom:28px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.upload__drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:120px;padding:20px;border:1.5px dashed var(--border);border-radius:10px;text-align:center;cursor:pointer}.upload__drop--active{border-color:var(--accent);background:#4c9aff14}.progress{height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}.progress__bar{height:100%;background:var(--accent);transition:width .15s linear}.photo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.photo{display:flex;gap:16px;align-items:flex-start;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.photo--busy{opacity:.55;pointer-events:none}.photo__thumb{flex:0 0 128px}.photo__thumb img,.photo__placeholder{display:block;width:128px;aspect-ratio:2 / 1;object-fit:cover;border-radius:8px;background:var(--surface-2)}.photo__main{flex:1 1 220px;min-width:0}.photo__title{display:block;font-weight:600;font-size:16px}.photo__meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px;color:var(--muted);font-size:13px}.photo__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.badge{padding:1px 8px;border-radius:99px;border:1px solid var(--border);font-size:12px;text-transform:lowercase}.badge--ready{color:var(--ok);border-color:#3ddc9759}.badge--processing,.badge--pending{color:var(--warn);border-color:#ffb45459}.badge--error{color:var(--danger);border-color:#ff6b6b59}.pano{position:relative;width:100%;height:100dvh;background:#000;overflow:hidden}.pano__canvas{position:absolute;top:0;right:0;bottom:0;left:0}.pano__canvas canvas{cursor:grab}.pano__canvas canvas:active{cursor:grabbing}.pano__overlay{position:absolute;top:0;left:0;right:0;display:flex;gap:12px;align-items:center;padding:16px 20px;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}.pano__overlay>*{pointer-events:auto}.pano__back{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:#0006;border:1px solid rgba(255,255,255,.15);font-size:18px}.pano__title{font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.8)}.pano__controls{position:absolute;right:16px;bottom:16px;display:flex;gap:10px;align-items:center}.pano__bar{display:flex;align-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#00000073;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden}.pano__bar button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;font-size:16px;font-weight:500;background:transparent;border:0;border-radius:0;color:var(--text)}.pano__bar button+button{border-left:1px solid rgba(255,255,255,.14)}.pano__bar button:hover{background:#ffffff1f}.pano__bar button.is-active{background:var(--accent);color:#05121f}.pano__bar button svg{display:block;width:18px;height:18px}.pano__bar button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.pano__status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;background:#0009;color:var(--muted)}.pano__status--error{color:var(--danger);max-width:80vw;text-align:center}.pano__busy{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.2s ease-in-out infinite}.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.25}50%{opacity:1}}@media (prefers-reduced-motion: reduce){.spinner,.pano__busy{animation:none}}@media (max-width: 640px){.page{padding:20px 14px 48px}.photo{flex-direction:column}.photo__actions{justify-content:flex-start}}.card__media{position:relative;display:block}.media-badge{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#00000080;border:1px solid rgba(255,255,255,.2);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.media-badge svg{display:block;width:17px;height:17px}.media-badge__tip{position:absolute;bottom:calc(100% + 6px);right:0;padding:4px 8px;border-radius:6px;background:#000000d9;border:1px solid rgba(255,255,255,.18);color:var(--text);font-size:12px;line-height:1.35;font-weight:500;white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease;pointer-events:none}.media-badge:hover .media-badge__tip,.card:focus-visible .media-badge__tip{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion: reduce){.media-badge__tip{transition:none}}.breadcrumb{display:inline-block;margin-bottom:10px;color:var(--muted);font-size:14px}.breadcrumb:hover{color:var(--text)}.card__thumb--empty{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 10px,var(--surface) 10px,var(--surface) 20px)}.pano__album{display:block;font-size:12px;font-weight:400;color:#ffffffbf}.section-heading{margin:28px 0 12px;font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}.album-create{margin-bottom:12px}select{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;max-width:180px}.menu{position:relative;display:inline-flex}.menu__trigger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;background:transparent;border:1px solid var(--border);color:var(--text)}.menu__trigger:hover{background:var(--surface-2)}.menu__trigger svg{width:18px;height:18px}.menu__list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:170px;margin:0;padding:4px;list-style:none;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 34px #00000080}.menu__item{display:block;width:100%;padding:8px 10px;background:transparent;border:0;border-radius:6px;color:var(--text);font:inherit;font-weight:500;text-align:left;white-space:nowrap}.menu__item:hover:not(:disabled){background:#ffffff14}.menu__item--danger{color:var(--danger)}.dialog{width:min(420px,calc(100vw - 32px));padding:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:0 24px 60px #0000008c}.dialog::backdrop{background:#0009}.dialog__body{display:flex;flex-direction:column;gap:12px;padding:20px;margin:0}.dialog h2{margin:0;font-size:17px}.dialog p{margin:0}.dialog__label{font-size:13px;color:var(--muted)}.dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.button--danger-solid,button.button--danger-solid{background:var(--danger);border-color:var(--danger);color:#2a0707;font-weight:600}
