/* MeasureME / photo journal — warm editorial frames with purposeful motion */
[hidden] { display: none !important; }
.photo-current-password { width: 100%; height: 48px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: 14px 'DM Sans',sans-serif; background: #f8fafc; }
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { flex: 1 0 auto; }
.save-banner { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; gap: 11px; padding: 10px max(16px, calc((100vw - 820px)/2)); background: #221f1b; color: white; box-shadow: 0 4px 14px #14120f22; }
.save-banner[data-state="syncing"] { background: #3b332d; }
.save-banner[data-state="error"] { background: #87311f; }
.save-pulse { width: 8px; height: 8px; border-radius: 50%; background: #f5ae79; flex: 0 0 auto; box-shadow: 0 0 0 4px #f5ae7926; }
.save-banner[data-state="syncing"] .save-pulse { animation: save-pulse 1.3s ease-in-out infinite; }
.save-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.save-copy strong { font-size: 12px; }
.save-copy span { font-size: 11px; opacity: .82; line-height: 1.35; }
.save-banner button { border: 1px solid #ffffff66; border-radius: 100px; background: transparent; color: #fff; padding: 7px 10px; font: 600 11px 'DM Sans', sans-serif; white-space: nowrap; cursor: pointer; }
.sync-dot.pending { background: #e6a24d; }
.sync-dot.error { background: #f25a3d; }
@keyframes save-pulse { 50% { opacity: .35; transform: scale(.8); } }
.photo-panel { --photo-ink: #1f201a; --photo-muted: #68665d; --photo-accent: #dd553a; --photo-paper: #f6f3ed; color: var(--photo-ink); }
.photo-hero { min-height: 308px; display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; border-radius: 23px; background: #e8e3d8; position: relative; isolation: isolate; padding: 34px 38px; margin: 4px 0 18px; }
.photo-hero::after { content: ''; position: absolute; inset: auto -10% -65% 35%; height: 280px; border-radius: 50%; background: #dfccaeaa; filter: blur(54px); z-index: -1; }
.photo-eyebrow { display: inline-flex; align-items: center; gap: 7px; font: 700 10px/1.3 'DM Sans',sans-serif; letter-spacing: .14em; color: #726a60; text-transform: uppercase; }
.photo-eyebrow-mark { width: 7px; height: 7px; background: var(--photo-accent); transform: rotate(45deg); }
.photo-hero h1 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(53px, 8vw, 84px); line-height: .86; letter-spacing: .005em; margin: 25px 0 20px; text-transform: uppercase; font-weight: 400; }
.photo-hero h1 em { color: var(--photo-accent); font-style: normal; }
.photo-hero p { max-width: 260px; color: #615d54; font-size: 13px; line-height: 1.6; }
.photo-hero-actions { margin-top: 23px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.photo-hero-actions button, .photo-empty button, .photo-primary { border: 0; border-radius: 10px; background: var(--photo-ink); color: #fff; padding: 13px 16px; font: 700 13px 'DM Sans',sans-serif; cursor: pointer; transition: transform .2s cubic-bezier(.18,.78,.3,1.2),background .2s; }
.photo-hero-actions button:hover, .photo-empty button:hover, .photo-primary:hover { background: var(--photo-accent); transform: translateY(-2px); }
.photo-hero-actions button span, .photo-empty button span, .photo-primary span { padding-left: 13px; font-size: 17px; font-weight: 400; }
.photo-hero-actions button:disabled { opacity: .55; cursor: not-allowed; }
.photo-hero-actions > span { font-size: 11px; color: #675f54; }
.photo-hero-art { position: relative; min-height: 235px; perspective: 900px; }
.photo-art-frame { position: absolute; width: 48%; height: 78%; border: 8px solid #f9f7f1; border-bottom-width: 39px; border-radius: 3px; box-shadow: 0 15px 28px #433c3525; background: linear-gradient(150deg,#b6b8a7 5%,#d6d2c2 48%,#918d80 100%); }
.photo-art-frame span { position: absolute; bottom: -30px; left: 4px; font-size: 9px; color: #48443d; letter-spacing: .15em; font-weight: 700; }
.photo-art-frame-back { left: 7%; top: 17%; transform: rotate(-13deg) translateZ(-35px); animation: frame-arrive-back .8s .12s both cubic-bezier(.2,.7,.1,1); }
.photo-art-frame-front { right: 8%; top: 7%; transform: rotate(9deg); background: linear-gradient(145deg,#e0a884,#aa8069 50%,#584b44); animation: frame-arrive-front .8s .25s both cubic-bezier(.2,.7,.1,1); }
.photo-art-frame-front b { position: absolute; top: 37%; left: 35%; font: 300 55px 'DM Sans',sans-serif; color: #f7f0e9a6; }
.photo-art-orbit { position: absolute; right: 3%; top: 1%; border: 1px solid #aaa69a77; width: 185px; height: 185px; border-radius: 50%; z-index: -1; }
@keyframes frame-arrive-back { from { opacity: 0; transform: translate(-35px,35px) rotate(-23deg); } to { opacity: 1; transform: rotate(-13deg); } }
@keyframes frame-arrive-front { from { opacity: 0; transform: translate(42px,-30px) rotate(24deg); } to { opacity: 1; transform: rotate(9deg); } }
.photo-privacy { padding: 11px 14px; border: 1px solid #dcd5c9; background: #faf8f3; border-radius: 11px; color: #5b6351; font-size: 12px; line-height: 1.4; }
.photo-privacy-row { display: flex; gap: 8px; align-items: stretch; }
.photo-privacy-row .photo-privacy { flex: 1; }
.photo-privacy-row > button { border: 1px solid #dcd5c9; border-radius: 11px; padding: 0 13px; background: #faf8f3; color: #4c4b44; font: 700 11px 'DM Sans',sans-serif; white-space: nowrap; cursor: pointer; }
.photo-privacy::before { content: '✦'; color: var(--photo-accent); margin-right: 9px; }
.photo-privacy[data-kind="pending"] { background: #fff7e9; color: #72572d; }
.photo-privacy[data-kind="error"] { background: #fff1eb; color: #ac3924; }
.photo-toolbar { margin-top: 29px; display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.photo-toolbar h2 { margin-top: 7px; font: 400 34px/1 'Bebas Neue',Impact,sans-serif; letter-spacing: .02em; }
.photo-selection-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: end; }
.photo-selection-actions span { color: #847d71; font-size: 11px; }
.photo-selection-actions button, .photo-filters button, .photo-layout { border-radius: 100px; border: 1px solid #d9d3c9; background: #fff; padding: 9px 13px; color: #3d3a34; font: 700 11px 'DM Sans',sans-serif; cursor: pointer; transition: background .18s,color .18s,transform .18s; }
.photo-selection-actions button:hover, .photo-filters button:hover, .photo-layout:hover { transform: translateY(-2px); }
.photo-selection-actions #photo-compare { background: var(--photo-ink); color: #fff; border-color: var(--photo-ink); }
.photo-selection-actions #photo-compare:disabled { background: #ebe8e3; color: #9a938c; border-color: #ebe8e3; cursor: not-allowed; transform: none; }
.photo-guide { font-size: 12px; color: #8c867b; margin-top: 8px; }
.photo-filters { display: flex; gap: 8px; overflow-x: auto; padding: 23px 0 18px; scrollbar-width: none; }
.photo-filters button { flex: 0 0 auto; }
.photo-filters button[aria-pressed="true"] { background: var(--photo-accent); color: #fff; border-color: var(--photo-accent); }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
.photo-card { background: #fff; border: 1px solid #e4ded3; border-radius: 14px; padding: 6px; overflow: hidden; box-shadow: 0 4px 13px #2b20100b; animation: photo-rise .45s both; animation-delay: calc(var(--card-order) * 55ms); }
@keyframes photo-rise { from { opacity: 0; transform: translateY(13px) scale(.98); } to { opacity: 1; transform: none; } }
.photo-card.is-selected { border-color: var(--photo-accent); box-shadow: 0 0 0 2px #dd553a30; }
.photo-card-image { position: relative; width: 100%; aspect-ratio: 3 / 4; background: #e6e0d5; border: none; border-radius: 10px; overflow: hidden; display: block; cursor: pointer; padding: 0; }
.photo-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.1,1); }
.photo-card-image:hover img { transform: scale(1.07); }
.photo-unavailable { display: grid; place-items: center; height: 100%; font-size: 12px; color: #716c64; text-align: center; }
.photo-select-mark { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; border-radius: 50%; background: #f9f7f4e9; color: #3d3831; display: grid; place-items: center; font: 600 18px 'DM Sans'; }
.photo-card.is-selected .photo-select-mark { background: var(--photo-accent); color: #fff; font-size: 13px; }
.photo-angle-badge { position: absolute; bottom: 9px; left: 9px; color: #25221d; background: #f8f6eeeb; padding: 6px 9px; border-radius: 100px; text-transform: uppercase; letter-spacing: .09em; font-size: 9px; font-weight: 800; }
.photo-card-info { display: flex; justify-content: space-between; gap: 5px; padding: 10px 5px 4px; align-items: center; }
.photo-card-info time { font-weight: 700; font-size: 12px; }
.photo-card-state { font-size: 10px; color: #60816b; white-space: nowrap; }
.photo-card-state.pending { color: #a96b2d; }
.photo-card-note { padding: 0 5px; font-size: 11px; color: #80776d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-card-actions { display: flex; justify-content: space-between; padding: 8px 4px 5px; }
.photo-card-actions button { border: 0; background: none; color: #5f5c55; font: 600 11px 'DM Sans'; cursor: pointer; }
.photo-card-actions button:last-child { color: #b55242; }
.photo-empty { margin-top: 9px; border: 1px dashed #d8cfc2; border-radius: 20px; padding: 40px 20px; text-align: center; background: #f8f5ef; }
.photo-empty-frames { width: 145px; height: 115px; position: relative; margin: 0 auto 25px; }
.photo-empty-frames span { display: grid; place-items: center; position: absolute; width: 84px; height: 98px; background: #eee9e0; border: 6px solid #fff; border-bottom-width: 22px; box-shadow: 0 8px 20px #20170b16; border-radius: 3px; }
.photo-empty-frames span:first-child { transform: rotate(-15deg); left: 10px; top: 3px; }
.photo-empty-frames span:nth-child(2) { transform: rotate(12deg); right: 8px; top: 2px; }
.photo-empty-frames span:last-child { left: 36px; top: 10px; background: #d7d0c3; color: #fff; font-size: 32px; }
.photo-empty h3 { font: 400 30px 'Bebas Neue',Impact,sans-serif; }
.photo-empty p { color: #81786e; font-size: 12px; margin: 7px 0 19px; }
.photo-no-match { padding: 45px 10px; text-align: center; color: #81786e; font-size: 13px; }
.photo-locked { max-width: 420px; margin: 28px auto 35px; background: #fff; border: 1px solid #ebe3da; border-radius: 20px; padding: 34px; box-shadow: 0 15px 40px #2420110c; }
.photo-lock-symbol { width: 42px; height: 42px; background: #f7e9df; color: var(--photo-accent); border-radius: 12px; display: grid; place-items: center; font-size: 24px; margin-bottom: 20px; }
.photo-locked h2 { margin: 8px 0; font: 400 36px 'Bebas Neue',Impact,sans-serif; }
.photo-locked p { color: #726d64; font-size: 13px; line-height: 1.55; }
.photo-locked label { display: block; margin: 20px 0 7px; font-size: 11px; font-weight: 700; }
.photo-locked input { width: 100%; padding: 13px; border: 1px solid #dcd5c9; border-radius: 9px; background: #faf9f7; font-size: 15px; }
.photo-locked button { width: 100%; background: var(--photo-ink); color: #fff; border: 0; border-radius: 9px; margin-top: 14px; padding: 13px; font: 700 13px 'DM Sans'; cursor: pointer; }
#photo-unlock-error { display: block; margin-top: 10px; color: #b93c24; font-size: 12px; }
.photo-dialog { margin: auto; width: min(490px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; border: 1px solid #e7dfd3; border-radius: 20px; background: #f8f6f1; color: var(--photo-ink); box-shadow: 0 25px 80px #1b140845; padding: 24px; }
.photo-dialog::backdrop { background: #171916ba; backdrop-filter: blur(8px); }
.photo-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.photo-dialog-top button { width: 31px; height: 31px; border: 1px solid #ddd5ca; border-radius: 100%; background: #fff; font-size: 22px; cursor: pointer; }
.photo-dialog h2 { font: 400 38px/1 'Bebas Neue',Impact,sans-serif; margin: 12px 0 7px; }
.photo-dialog > p, .photo-dialog form > p:not(.photo-form-status) { font-size: 13px; line-height: 1.5; color: #777066; margin-bottom: 18px; }
.photo-drop { min-height: 115px; border: 1px dashed #aea497; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 3px; background: #fdfbf7; text-align: center; padding: 17px; transition: border-color .2s, background .2s; }
.photo-drop:hover { border-color: var(--photo-accent); background: #fff8f1; }
.photo-drop-plus { width: 31px; height: 31px; background: #e9dfd2; border-radius: 50%; display: grid; place-items: center; font-size: 21px; margin-bottom: 5px; }
.photo-drop b { font-size: 13px; }.photo-drop small { font-size: 10px; color: #77736e; }
.photo-preview-wrap { margin-top: 12px; background: #e3dbcf; border-radius: 12px; max-height: 210px; overflow: hidden; }
.photo-preview-wrap img { display: block; max-height: 210px; width: 100%; object-fit: contain; }
.photo-form-row { display: flex; gap: 10px; margin-top: 16px; }.photo-form-row label { flex: 1; min-width: 0; }
.photo-form-row label, .photo-note-label { font-size: 11px; font-weight: 700; color: #38342e; }
.photo-form-row input, .photo-form-row select, .photo-note-label textarea { width: 100%; margin-top: 7px; padding: 10px; border: 1px solid #ded7cc; border-radius: 9px; background: #fff; color: #26211e; font: 13px 'DM Sans',sans-serif; }
.photo-note-label { display: block; margin-top: 15px; }.photo-note-label span { color: #948e85; font-weight: 400; }.photo-note-label textarea { resize: vertical; }
.photo-form-status { min-height: 20px; font-size: 11px; color: #9e603d; margin: 8px 0; }.photo-primary { width: 100%; }.photo-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.photo-form-footer { display: block; text-align: center; margin-top: 12px; color: #897f74; font-size: 10px; }
.photo-view-dialog { width: min(680px, calc(100vw - 24px)); }.photo-view-dialog img { width: 100%; max-height: 67dvh; display: block; object-fit: contain; background: #e5dfd6; border-radius: 10px; margin-top: 15px; }.photo-view-dialog > p { margin: 12px 0 0; }
.photo-compare-dialog { width: min(750px, calc(100vw - 24px)); }.photo-compare-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 63dvh; overflow: hidden; border-radius: 12px; background: #aca398; isolation: isolate; margin-top: 18px; touch-action: pan-y; }
.photo-compare-before, .photo-compare-after { position: absolute; inset: 0; overflow: hidden; }.photo-compare-before img, .photo-compare-after img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-compare-after { clip-path: inset(0 0 0 var(--split)); }.photo-compare-line { position: absolute; left: var(--split); top: 0; bottom: 0; border-left: 2px solid #fff; transform: translateX(-1px); pointer-events: none; filter: drop-shadow(0 1px 3px #0005); }
.photo-compare-line b { position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); width: 36px; height: 36px; border: 2px solid #fff; background: #ffffffd9; color: #36332f; border-radius: 50%; display: grid; place-items: center; white-space: nowrap; font: 700 12px 'DM Sans'; }
.photo-compare-date { position: absolute; bottom: 14px; background: #1a1818ae; color: white; padding: 7px 9px; border-radius: 5px; font: 700 10px 'DM Sans'; }.photo-compare-date.before { left: 11px; }.photo-compare-date.after { right: 11px; }
.photo-compare-stage.side-by-side { display: flex; }.photo-compare-stage.side-by-side > div { position: relative; width: 50%; height: 100%; }.photo-compare-stage.side-by-side .photo-compare-after { clip-path: none; }.photo-compare-stage.side-by-side .photo-compare-line { display: none; }
.photo-slider-label { display: block; font-size: 11px; margin: 14px 0 2px; color: #635f57; }.photo-compare-dialog input[type=range] { width: 100%; accent-color: var(--photo-accent); cursor: ew-resize; }.photo-layout { margin-top: 12px; }
.photo-dialog-actions { display: flex; justify-content: end; gap: 10px; margin-top: 19px; }.photo-dialog-actions button { border: 1px solid #d6cfc2; background: #fff; border-radius: 9px; padding: 10px 13px; font-weight: 700; cursor: pointer; }.photo-dialog-actions button:last-child { background: #b74934; color: #fff; border-color: #b74934; }
.photo-panel button:focus-visible, .photo-dialog button:focus-visible, .photo-dialog input:focus-visible, .photo-dialog select:focus-visible, .photo-dialog textarea:focus-visible { outline: 3px solid #dd553a; outline-offset: 2px; }
@media (max-width: 600px) { .photo-hero { grid-template-columns: 1fr; padding: 26px 25px 20px; min-height: 0; } .photo-hero h1 { font-size: 66px; margin: 19px 0 15px; }.photo-hero-art { height: 152px; min-height: 152px; width: 200px; position: absolute; right: -8px; bottom: -23px; opacity: .42; z-index: -1; }.photo-hero p { max-width: 230px; }.photo-hero-actions > span { max-width: 110px; }.photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.photo-toolbar { align-items: start; flex-direction: column; }.photo-selection-actions { width: 100%; justify-content: start; }.photo-dialog { padding: 20px; }.photo-card-info time { font-size: 11px; }.photo-card-info { flex-wrap: wrap; } }
@media (max-width: 360px) { .photo-grid { grid-template-columns: 1fr 1fr; gap: 7px; }.photo-card-actions { flex-wrap: wrap; gap: 5px; }.save-banner { flex-wrap: wrap; }.photo-hero h1 { font-size: 56px; } }
@media (prefers-reduced-motion: reduce) { .photo-panel *, .photo-dialog *, .save-banner * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }