:root {
    --background:#ffffff;
    --sidebar:#fafafa;
    --border:#e5e5e5;
    --text:#222;
    --text-secondary:#777;
    --text-muted:#aaa;
    --accent:#000;
    --sidebar-width:260px;
}

* {margin:0; padding:0; box-sizing:border-box;}

html, body {width:100%; height:100%;}

body {
    background:var(--background);
    color:var(--text);
    font-family: 
        Courier new,
        sans-serif;
    font-size:13px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.back-arrow a{
  color: var(--accent-color);
  position: absolute;
  top: 10px;    
  left: 40px;   
  z-index: 100; 
  cursor: pointer;
  border-radius: 3px;
  padding: 10px;
  background-color: var(--sidebar-color);
  margin-bottom: 150px;

}

.back-arrow a:hover{ 
  color: var(--bg-color);
  background-color: var(--sidebar-color);
  border-radius: 3px;
  padding: 10px;
  transition: transform 0.3s ease, background-color .4s ease;
}

#app {
    width:100%;
    height:100%;
    display:flex;
    overflow:hidden;
}

#sidebar {
    width:var(--sidebar-width);
    border-top: 200px;
    min-width:200px;
    height:100%;
    background:var(--sidebar);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
}

#activeFilters {padding:16px;}

#sidebarContent {
    flex:1;
    overflow:auto;
    padding:20px 16px;
}

.sidebar-section {margin-bottom:24px;}

.section-header {
    width:100%;
    background:none;
    border:none;
    text-align:left;
    color:var(--text);
    font-size:12px;
    font-weight:800;
    font-family: 
        Courier new,
        sans-serif;
    cursor:pointer;
    padding:6px 0;
}

.section-header:hover {color:var(--text-secondary);}
.section-body {padding-top:6px;}

.tree-row {
    height:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    color:var(--text-secondary);
}

.tree-row:hover {color:var(--text);}
.tree-label {white-space:nowrap;}
.tree-count {color:var(--text-muted);font-size:11px;}

#resizeHandle {
    width:8px;
    height:100%;
    cursor:col-resize;
}

#resizeHandle:hover {background:#ddd;}

#content {
    flex:1;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
}

#toolbar {
    height:45px;
    flex-shrink:0;
    background:var(--background);
}

#gallery {
    flex:1;
    min-height:0;
    overflow:auto;
    padding:20px;
}

#masonryGallery {
    width:100%;
    column-count:5;
    column-gap:12px;
}

.photo-card {
    break-inside:avoid;
    margin-bottom:12px;
}

.photo-card img {
    width:100%;
    height:auto;
    display:block;
    cursor:pointer;
}

.photo-card:hover img {opacity:.9;}

#viewer {
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.96);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
}


#viewer img {max-width:90vw; max-height:90vh;}

.viewer-info {
    position:absolute;
    bottom:20px;
    font-size:12px;
    color:var(--text-secondary);
}
.hidden {display:none!important;}

@media(max-width:1400px) {#masonryGallery {column-count:4;}}
@media(max-width:1000px) {#masonryGallery {column-count:3;}}
@media(max-width:700px) {#sidebar {width:200px;}#masonryGallery {column-count:2;}}
@media(max-width:450px) {#masonryGallery {column-count:1;}}

.tree-row.selected{text-decoration:underline;}

#viewerInfo{
    position:absolute;
    right:24px;
    bottom:20px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    font-size:11px;
    line-height:1.3;
    color:#999;
    text-align:right;
    pointer-events:none;
    user-select:none;
}

#viewerInfo div:first-child{
    color:#444;
}

#viewer {
    position: fixed;
    inset: 0;
}

#viewerImages {
    position: absolute;
    inset: 0;
}

#viewerImages img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: opacity 0.35s ease;
}


#viewerImageOld {
    opacity: 1;
}

#viewerImageNew {
    opacity: 0;
}


#viewerImageNew.show {
    opacity: 1;
}