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

body{

font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
sans-serif;

background:

linear-gradient(
180deg,
#d7dde8,
#bfc8d8
);

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:30px;

}

.desktop{

width:100%;
max-width:900px;

}

.window{

background:

rgba(
255,
255,
255,
0.72
);

backdrop-filter:blur(20px);

border-radius:22px;

overflow:hidden;

box-shadow:

0 20px 50px rgba(0,0,0,.15);

border:

1px solid rgba(
255,
255,
255,
0.5
);

}

.titlebar{

padding:16px;

background:

linear-gradient(
180deg,
#ececec,
#d7d7d7
);

border-bottom:

1px solid #bfbfbf;

font-weight:700;

text-align:center;

}

.content{

padding:40px;

text-align:center;

}

h1{

font-size:36px;

margin-bottom:15px;

}

p{

margin-bottom:30px;

opacity:.7;

}

.button-grid{

display:grid;

grid-template-columns:

repeat(
3,
1fr
);

gap:20px;

}

.card{

display:flex;

justify-content:center;

align-items:center;

height:140px;

text-decoration:none;

color:black;

font-size:22px;

font-weight:600;

background:

rgba(
255,
255,
255,
0.5
);

border-radius:18px;

box-shadow:

inset 0 1px 0 rgba(
255,
255,
255,
0.8
),

0 10px 25px rgba(
0,
0,
0,
0.08
);

transition:.2s;

}

.card:hover{

transform:

translateY(-4px);

}
@media (max-width: 700px) {

    body {
        padding: 16px;
        align-items: flex-start;
    }

    .window {
        border-radius: 18px;
    }

    .content {
        padding: 28px 20px;
    }

    h1 {
        font-size: 30px;
    }

    .button-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .card {
        height: 90px;
        font-size: 20px;
    }

}
select{

width:100%;

padding:14px;

border-radius:14px;

border:none;

font-size:16px;

margin-top:20px;

margin-bottom:30px;

background:

rgba(
255,
255,
255,
0.8
);

}

#galleryGrid{

display:grid;

grid-template-columns:

repeat(
auto-fill,
minmax(
180px,
1fr
)
);

gap:16px;

}
.thumb-card{

background:

rgba(
255,
255,
255,
0.5
);

border-radius:18px;

overflow:hidden;

aspect-ratio:1;

box-shadow:

0 5px 18px rgba(
0,
0,
0,
0.08
);

}

.thumb{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.video-thumb{

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

}
.thumb-card {
    position: relative;
}

.thumb {
    cursor: pointer;
}

.download-link {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    color: black;
    font-weight: 700;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(10px);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.82);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.lightbox img {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 18px;
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
}
.drop-zone {
    margin-top: 20px;
    padding: 40px 20px;
    border: 2px dashed rgba(0,0,0,0.25);
    border-radius: 18px;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drop-zone span {
    opacity: .65;
}

.drop-zone.dragover {
    background: rgba(255,255,255,0.8);
    transform: scale(1.01);
}

#uploadList {
    margin-top: 24px;
    display: grid;
    gap: 12px;
}

.upload-row {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.55);
    text-align: left;
}

.upload-name {
    font-weight: 700;
    margin-bottom: 8px;
    word-break: break-word;
}

.progress {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,0.12);
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: rgba(0,0,0,0.55);
    transition: width .2s;
}

.upload-status {
    margin-top: 6px;
    font-size: 14px;
    opacity: .7;
}

.upload-row.done .upload-status {
    font-weight: 700;
}

.upload-row.error {
    background: rgba(255,180,180,0.55);
}
.hidden{
display:none !important;
}
.titlebar {
    position: relative;
    min-height: 52px;
    padding: 0 58px 0 16px;
    background: linear-gradient(180deg, #ececec, #d7d7d7);
    border-bottom: 1px solid #bfbfbf;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-wrap {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.menu-button {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,0.55);
    font-size: 24px;
    padding: 0;
    margin: 0;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor: pointer;
}

.menu-button:hover {
    background: rgba(255,255,255,0.9);
}

.menu-panel {
    position: absolute;
    right: 0;
    top: 36px;
    min-width: 160px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    z-index: 50;
}

.menu-panel a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: black;
    text-decoration: none;
    font-weight: 600;
    text-align: left;
}

.menu-panel a:hover {
    background: rgba(0,0,0,0.08);
}
.content input,
.content button{

width:100%;

padding:14px;

border:none;

border-radius:14px;

margin-bottom:15px;

}

.content button{

cursor:pointer;

}

.admin-card{

background:

rgba(
255,
255,
255,
0.5
);

padding:20px;

border-radius:18px;

margin-top:15px;

text-align:left;

}
.danger {
    background: rgba(255,120,120,0.75);
}

.danger:hover {
    background: rgba(255,90,90,0.9);
}
.event-stats {
    margin: 8px 0 14px 0;
    opacity: .7;
    font-weight: 600;
}
.zip-button{

display:block;

margin-bottom:25px;

padding:14px;

border-radius:16px;

text-decoration:none;

color:black;

font-weight:700;

background:

rgba(
255,
255,
255,
0.6
);

box-shadow:

0 8px 18px rgba(
0,
0,
0,
0.08
);

}
.scan-result {
    margin-top: 12px;
    font-size: 14px;
    opacity: .85;
}

.duplicate-group {
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.55);
}

.duplicate-group ul {
    margin-top: 6px;
    padding-left: 20px;
}