@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:Space Grotesk,system-ui,sans-serif;line-height:1.5;font-weight:400;color:#14110f;background-color:#f4efe6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}img{max-width:100%}button{font-family:inherit}.app{min-height:100vh;display:flex;flex-direction:column;color:#12110f;background:radial-gradient(circle at top left,#f7f5f2,#f2f0ed 40%,#ece8e2);padding:0 clamp(2.5rem,4vw,5rem) 4rem;font-family:Space Grotesk,system-ui,sans-serif}.hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.5rem;margin-bottom:2.5rem;padding:.7rem clamp(2.5rem,4vw,5rem);border-radius:0;background:#1f1e1b;position:relative;overflow:hidden;box-shadow:0 18px 36px #00000038,0 4px 10px #00000029;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.hero:after{content:"";position:absolute;height:2px;width:60%;right:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}.hero:after{bottom:16px}h1{font-size:clamp(2.5rem,4vw,4rem);margin:.4rem 0}.hero-signature-image{display:block;height:clamp(48px,8.8vw,96px);width:auto;object-fit:contain;object-position:left center}.hero-brand{display:flex;align-items:center;gap:0}.shutter-icon{width:48px;height:48px;flex-shrink:0;color:#000}.hero-signature-image{filter:brightness(0) invert(1)}.status{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:#ffffff24;color:#f7f5f2;border-radius:999px;box-shadow:0 10px 30px #14110f14;font-size:.9rem;z-index:1}.status .dot{width:.6rem;height:.6rem;border-radius:50%;background:#8de2b4;box-shadow:0 0 0 4px #2e8b5733}.status.offline .dot{background:#b3261e;box-shadow:0 0 0 4px #b3261e2e}.root-warning{display:flex;align-items:center;gap:.75rem;background:#fff;color:#7a1a14;border:1px solid #f0cbc7;border-radius:1rem;padding:.8rem 1rem;margin:-1.25rem 0 1.5rem;box-shadow:0 10px 24px #7a1a1414}.root-warning strong,.root-warning span{font-size:.92rem}.client-page{min-height:100vh;background:radial-gradient(circle at top left,#f7f5f2,#f2f0ed 40%,#ece8e2);color:#12110f;font-family:Space Grotesk,system-ui,sans-serif}.client-hero{background:#1f1e1b;padding:.7rem clamp(2.5rem,4vw,5rem);box-shadow:0 18px 36px #00000038,0 4px 10px #00000029}.client-brand{display:flex;align-items:center;justify-content:center}.client-signature{height:clamp(48px,8.8vw,96px);filter:brightness(0) invert(1)}.client-main{padding:2.5rem clamp(2.5rem,4vw,5rem) 4rem}.client-status{background:#fffffff2;border-radius:1.25rem;padding:1.25rem 1.5rem;box-shadow:0 20px 40px #12110f14;color:#6a6763;font-weight:600}.client-album{background:#fffffff2;border-radius:2rem;padding:2rem;box-shadow:0 30px 60px #14110f1a}.client-album-header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.client-album-header h1{margin:0;font-size:clamp(1.8rem,3vw,2.6rem)}.client-album-header p{margin:.4rem 0 0;color:#6a6763;font-weight:600}.client-breadcrumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}.client-breadcrumbs button{border:none;background:#efebe5;color:#1f1e1b;padding:.35rem .9rem;border-radius:999px;font-weight:600;cursor:pointer}.client-breadcrumbs button:hover{background:#1f1e1b;color:#f7f5f2}.client-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.client-actions button{border:none;background:#1f1e1b;color:#f7f5f2;padding:.65rem 1.5rem;border-radius:999px;font-weight:600;cursor:pointer}.client-actions button:disabled{opacity:.6;cursor:not-allowed}.client-actions span{color:#6a6763;font-weight:600}.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}.client-tile{border:none;padding:0;cursor:pointer;background:#f2f0ed;border-radius:1rem;overflow:hidden;box-shadow:0 12px 20px #3a2f281f;transition:transform .2s ease,box-shadow .2s ease}.client-tile:hover{transform:translateY(-2px);box-shadow:0 18px 30px #3a2f282e}.client-tile img{width:100%;height:100%;object-fit:cover;display:block}.client-folder{background:#f2f0ed;color:#1f1e1b;display:grid;align-content:start;gap:.85rem;padding:1rem;min-height:220px}.client-folder .album-preview{aspect-ratio:1 / 1;border-radius:1rem}.client-folder-name{font-weight:600;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem}.mode-toggle{display:flex;flex-wrap:wrap;gap:.75rem}.mode-toggle button{border:none;background:#efebe5;color:#1f1e1b;padding:.6rem 1.4rem;border-radius:999px;font-weight:600;cursor:pointer;transition:all .2s ease}.mode-toggle button.active{background:#1f1e1b;color:#f7f5f2;box-shadow:0 10px 24px #3a2f2833}.summary{font-weight:600;color:#6a6763}.filters-card{background:#fffffff2;border-radius:1.5rem;padding:1.25rem 1.5rem;box-shadow:0 20px 40px #12110f14;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:1rem}.layout{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:2rem}.sidebar{background:#fffffff2;border-radius:1.5rem;padding:1.5rem;box-shadow:0 20px 40px #14110f14}.sidebar h2{margin-top:0;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:#6a6763}.sidebar ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.35rem}.sidebar button{width:100%;text-align:left;background:transparent;border:none;padding:.5rem .75rem;border-radius:.75rem;color:#1f1e1b;font-weight:500;cursor:pointer}.sidebar button.selected{background:#1f1e1b;color:#f7f5f2}.gallery{background:#fffffff2;border-radius:2rem;padding:2rem;box-shadow:0 30px 60px #14110f1a;min-height:60vh}.gallery-header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.gallery-header h2{margin:0;font-size:1.6rem}.breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.header-stats{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;color:#6a6763;font-weight:600}.folder-dates{display:flex;flex-wrap:wrap;gap:.75rem;color:#6a6763;font-size:.85rem;font-weight:500}.breadcrumb button{border:none;background:#efebe5;color:#1f1e1b;padding:.3rem .75rem;border-radius:999px;cursor:pointer;font-weight:600;font-size:.8rem}.breadcrumb button.selected{background:#1f1e1b;color:#f7f5f2}.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.folder-card{border:none;text-align:left;padding:1.5rem;border-radius:1.25rem;background:#f2f0ed;color:#1f1e1b;font-weight:600;display:grid;gap:.5rem;box-shadow:0 12px 20px #3a2f281f;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;position:relative}.album-preview{width:100%;aspect-ratio:1 / 1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0;border-radius:.9rem;overflow:hidden;background:#e6e1db}.album-preview{position:relative}.album-preview[data-count="4"] .album-tile{padding:0 2px}.album-preview[data-count="4"] .album-tile:nth-child(odd){padding-left:0}.album-preview[data-count="4"] .album-tile:nth-child(2n){padding-right:0}.album-preview[data-count="4"] .album-tile{padding-top:3px}.album-preview[data-count="4"] .album-tile:nth-child(-n+2){padding-top:0}.album-tile{width:100%;height:100%;display:grid;place-items:center;background:#e6e1db}.album-tile img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}.album-preview[data-count="1"]{grid-template-columns:1fr;grid-template-rows:1fr}.album-preview[data-count="1"] .album-tile{aspect-ratio:1 / 1}.folder-card:hover{transform:translateY(-2px);box-shadow:0 18px 30px #3a2f282e}.folder-main{border:none;background:transparent;padding:0;margin:0;text-align:left;cursor:pointer;color:inherit;display:grid;gap:.5rem}.folder-card .menu-button{opacity:0;transform:translateY(-4px)}.folder-card:hover .menu-button,.folder-card.menu-open .menu-button{opacity:1;transform:translateY(0)}.folder-meta{font-size:.85rem;color:#6a6763;font-weight:500}.section-title{margin:1.5rem 0 1rem;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:#6a6763}.sort-row{display:grid;grid-template-columns:var(--filter-label-width, 90px) 1fr;align-items:center;gap:.75rem;color:#6a6763;font-weight:600}.sort-row select{border:none;background:#efebe5;color:#1f1e1b;padding:.35rem 1.6rem .35rem .9rem;border-radius:999px;font-weight:600;cursor:pointer;min-width:130px;max-width:180px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#1f1e1b 50%),linear-gradient(135deg,#1f1e1b 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}.filter-row{display:grid;grid-template-columns:var(--filter-label-width, 90px) 1fr;align-items:start;gap:.75rem}.filter-row>span{color:#6a6763;font-weight:600}.filter-controls{display:flex;flex-wrap:wrap;gap:.75rem}.filter-controls.inline-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.2rem}.filter-controls input,.filter-controls select{border:none;background:#efebe5;color:#1f1e1b;padding:.45rem 1.6rem .45rem .9rem;border-radius:999px;font-weight:600;font-size:.85rem}.reset-button{border:none;background:#efebe5;color:#1f1e1b;padding:.45rem .9rem;border-radius:999px;font-weight:600;font-size:.85rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.filter-controls select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#1f1e1b 50%),linear-gradient(135deg,#1f1e1b 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2rem}.filter-controls input{min-width:220px}.filter-controls .compact-filter-input{min-width:120px;width:120px;padding-right:.65rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem}figure{margin:0;background:#f2f0ed;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column;min-height:220px;box-shadow:0 12px 20px #3a2f281f;transition:transform .2s ease,box-shadow .2s ease;position:relative}figure:hover{transform:translateY(-2px);box-shadow:0 18px 30px #3a2f282e}.thumb{border:none;padding:0;margin:0;background:transparent;cursor:pointer;display:block;width:100%;position:relative;z-index:1}.menu-button{position:absolute;top:12px;right:12px;border:none;background:#f8f3eae6;color:#1f1e1b;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease;box-shadow:0 6px 16px #3a2f2833;z-index:2;pointer-events:auto}figure:hover .menu-button,figure.menu-open .menu-button{opacity:1;transform:translateY(0)}.menu-button:focus-visible{outline:2px solid #1f1e1b;outline-offset:2px}.icon-button{border:none;background:#efebe5;color:#1f1e1b;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.icon-button.danger{background:#fee2e2;color:#b91c1c}.icon-button:disabled{opacity:.6;cursor:not-allowed}.context-menu{position:fixed;z-index:60;background:#fff;border-radius:.75rem;box-shadow:0 16px 32px #14110f33;padding:.35rem}.context-item{border:none;background:transparent;color:#1f1e1b;padding:.5rem .75rem;border-radius:.5rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:600;min-width:140px}.context-item:hover{background:#ede9e2}.context-item.danger{color:#b91c1c}.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:80}.modal-backdrop{position:absolute;inset:0;background:#120f0c99}.modal-content{position:relative;z-index:1;background:#f7f5f2;border-radius:1.5rem;padding:1.5rem;width:min(420px,92vw);box-shadow:0 30px 60px #0003;display:grid;gap:.75rem}.modal-content h3{margin:0}.modal-content p{margin:0;color:#6a6763}.modal-content input{border:none;background:#fff;padding:.6rem .9rem;border-radius:.75rem;font-size:.95rem}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem}.modal-actions button{border:none;background:#efebe5;color:#1f1e1b;padding:.5rem 1rem;border-radius:999px;font-weight:600;cursor:pointer}.modal-actions button.danger{background:#1f1e1b;color:#f7f5f2}.modal-error{color:#b91c1c;font-weight:600;font-size:.85rem}.footer{margin-top:auto;padding:1.5rem 0 .5rem;position:relative}.footer-line{height:2px;width:100%;background:linear-gradient(90deg,transparent,rgba(31,30,27,.2),transparent);margin-bottom:1.5rem}.footer-content{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;color:#1f1e1b}.footer-brand{display:flex;align-items:center;gap:.75rem;font-weight:700}.footer-brand .shutter-icon{width:36px;height:36px}.thumb img{width:100%;height:160px;object-fit:cover;display:block}figcaption{padding:.75rem 1rem 1rem;display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:#6a6763;position:relative}.favorite-button{position:absolute;top:10px;right:12px;border:none;background:#efebe5;color:#1f1e1b;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;cursor:pointer}.favorite-button.active{background:#ffe28a;color:#1f1e1b}.icon-button.favorite{background:#efebe5;color:#1f1e1b}.icon-button.favorite.active{background:#ffe28a;color:#1f1e1b}.empty{text-align:center;padding:3rem 1rem;color:#6a6763}.lightbox{position:fixed;inset:0;display:grid;place-items:center;z-index:50}.lightbox-backdrop{position:absolute;inset:0;background:#120f0cb3}.lightbox-content{position:relative;z-index:2;width:min(1440px,96vw);background:#f7f5f2;border-radius:2rem;padding:1.75rem 2.5rem 2rem;box-shadow:0 40px 80px #00000059;display:grid;gap:1rem}.lightbox.fullscreen .lightbox-content{width:100vw;height:100vh;border-radius:0;padding:0;background:#12110f;color:#f7f5f2}.lightbox.fullscreen .lightbox-content header p,.lightbox.fullscreen .lightbox-content header h3{color:#f7f5f2}.lightbox-content header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.lightbox.fullscreen .lightbox-content header{position:absolute;top:18px;left:18px;right:18px;z-index:3}.lightbox-actions{display:flex;align-items:center;gap:.75rem}.lightbox-actions button{border:none;background:#1f1e1b;color:#f7f5f2;padding:.5rem 1rem;border-radius:999px;cursor:pointer;font-weight:600}.lightbox-actions .icon-button{background:#efebe5;color:#1f1e1b;width:36px;height:36px;padding:0}.lightbox-actions .icon-button.danger{background:#fee2e2;color:#b91c1c}.lightbox-content header h3{margin:0}.lightbox-content header p{margin:.25rem 0 0;font-size:.85rem;color:#6a6763}.lightbox-content header button{border:none;background:#1f1e1b;color:#f7f5f2;padding:.5rem 1rem;border-radius:999px;cursor:pointer;font-weight:600}.lightbox-stage{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}.image-frame{background:#e6e1db;border-radius:1.5rem;padding:1rem;display:grid;place-items:center;min-height:60vh;min-width:min(60vw,880px);overflow:hidden;cursor:zoom-in}.lightbox.fullscreen .image-frame{background:transparent;min-height:100vh;min-width:100vw;padding:0;justify-items:center}.lightbox.fullscreen .image-frame img{max-height:100vh;max-width:100vw}.image-frame img{max-width:100%;max-height:75vh;transition:transform .25s ease}.nav{border:none;background:#1f1e1b;color:#f7f5f2;font-size:2rem;width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;line-height:1;transition:transform .2s ease,box-shadow .2s ease}.nav:hover{transform:translateY(-2px);box-shadow:0 10px 20px #14110f33}.nav:active{transform:translateY(0)}.nav svg{display:block}.lightbox-content footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.lightbox.fullscreen .lightbox-content footer,.lightbox.fullscreen .nav,.lightbox.fullscreen .lightbox-actions .icon-button{display:none}.lightbox.fullscreen .lightbox-actions button{background:transparent;border:1px solid rgba(249,244,236,.3);color:#f7f5f2}.zoom{display:flex;align-items:center;gap:.75rem;font-weight:600}.zoom button{border:none;background:#efebe5;color:#1f1e1b;padding:.4rem .8rem;border-radius:999px;cursor:pointer;font-weight:600}.hint{color:#6a6763;font-size:.85rem}.exif{display:flex;flex-wrap:wrap;gap:.5rem 1rem;color:#6a6763;font-size:.85rem;font-weight:500}@media(max-width:900px){.app{padding:0 1rem 3rem}.hero,.client-hero{padding:.6rem 1rem}.client-main{padding:2rem 1rem 3rem}.client-album{padding:1.5rem}.layout{grid-template-columns:1fr}.sidebar{order:2}.gallery{order:1}}
