*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:#0a0a0a;color:#c0c0c0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;min-height:100vh;background:radial-gradient(ellipse at center,#0f0f0f,#0a0a0a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{max-width:1200px;margin:0 auto;padding:40px 20px;text-align:center}
h1{color:#fff;font-size:clamp(42px,8vw,72px);font-weight:200;letter-spacing:4px;margin-bottom:10px;background:linear-gradient(135deg,#ffffff,#888888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}
.subtitle{color:#666;font-size:clamp(16px,2vw,20px);font-weight:300;margin-bottom:40px;text-align:center;letter-spacing:1px}
.upload-form{background:linear-gradient(145deg,#111,#0d0d0d);padding:clamp(20px,3vw,35px);border-radius:16px;border:1px solid #1a1a1a;margin-bottom:40px;transition:all .4s;box-shadow:0 4px 30px rgba(0,0,0,.3);text-align:left}
.upload-form:hover{border-color:#2a2a2a;box-shadow:0 8px 40px rgba(0,0,0,.5);transform:translateY(-2px)}
.upload-form input[type=text]{background:#0a0a0a;border:1px solid #1a1a1a;color:#c0c0c0;padding:14px 18px;width:100%;border-radius:10px;margin-bottom:20px;font-size:14px;transition:all .3s;-webkit-appearance:none}
.upload-form input[type=text]:focus{outline:none;border-color:#3a3a3a;box-shadow:0 0 20px rgba(255,255,255,.03)}
.upload-form .file-upload-wrapper{position:relative;margin-bottom:20px}
.upload-form .file-upload-wrapper input[type=file]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2}
.upload-form .file-upload-label{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#0a0a0a,#080808);border:2px dashed #1a1a1a;color:#666;padding:clamp(25px,4vw,35px);border-radius:10px;cursor:pointer;transition:all .4s;font-size:14px;min-height:clamp(100px,15vw,120px);flex-direction:column;gap:12px;text-align:center}
.upload-form .file-upload-label:hover{border-color:#2a2a2a;background:#0d0d0d;transform:scale(1.005)}
.upload-form .file-upload-label.dragover{border-color:#4a4a4a;background:#111;transform:scale(1.01);box-shadow:0 0 40px rgba(255,255,255,.03)}
.upload-form .file-upload-label .files-list{font-size:12px;color:#888;max-width:100%;word-break:break-all;text-align:center}
.upload-form button{background:linear-gradient(90deg,#1a1a1a,#222);color:#fff;border:1px solid #2a2a2a;padding:16px;border-radius:10px;cursor:pointer;font-size:16px;width:100%;transition:all .3s;font-weight:400;letter-spacing:.5px;-webkit-tap-highlight-color:transparent}
.upload-form button:hover{background:linear-gradient(90deg,#222,#2a2a2a);border-color:#3a3a3a;transform:translateY(-2px);box-shadow:0 6px 25px rgba(255,255,255,.05)}
.upload-form button:active{transform:translateY(0)}
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1000;justify-content:center;align-items:center;padding:20px}
.modal-overlay.active{display:flex}
.modal{background:linear-gradient(145deg,#111,#0d0d0d);border:1px solid #1a1a1a;border-radius:20px;padding:clamp(25px,4vw,40px);max-width:500px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.modal .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #1a1a1a}
.modal .modal-header h2{color:#fff;font-size:clamp(18px,2.5vw,22px);font-weight:300;background:linear-gradient(90deg,#fff,#888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.modal .modal-close{background:0 0;border:none;color:#666;font-size:28px;cursor:pointer;transition:all .3s;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.modal .modal-close:hover{color:#fff;background:#1a1a1a}
.modal .modal-body{margin-bottom:20px}
.modal .modal-body .album-name{color:#fff;font-size:16px;margin-bottom:15px;font-weight:300}
.modal .modal-body .file-list{background:#0a0a0a;border-radius:10px;padding:15px;max-height:200px;overflow-y:auto;margin-bottom:12px;border:1px solid #1a1a1a;-webkit-overflow-scrolling:touch}
.modal .modal-body .modal-file-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid #1a1a1a;color:#c0c0c0;font-size:13px}
.modal .modal-body .modal-file-item:last-child{border-bottom:none}
.modal .modal-body .modal-file-name{flex:1;word-break:break-all}
.modal .modal-body .modal-view-btn{background:#1a1a1a;border:1px solid #2a2a2a;color:#c0c0c0;padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12px;transition:all .3s;margin-left:8px;white-space:nowrap}
.modal .modal-body .modal-view-btn:hover{background:#2a2a2a;border-color:#3a3a3a}
.modal .modal-body .modal-upload-area{background:#0a0a0a;border:2px dashed #1a1a1a;border-radius:10px;padding:16px;text-align:center;transition:all .3s;cursor:pointer}
.modal .modal-body .modal-upload-area:hover{border-color:#2a2a2a;background:#0d0d0d}
.modal .modal-body .modal-upload-area.dragover{border-color:#3a3a3a;background:#111}
.modal .modal-body .modal-upload-label{color:#666;font-size:12px}
.modal .modal-footer{display:flex;gap:12px;flex-wrap:wrap}
.modal .modal-footer button{flex:1;min-width:80px;padding:12px;border-radius:10px;cursor:pointer;font-size:14px;transition:all .3s;border:1px solid #2a2a2a;font-weight:400;-webkit-tap-highlight-color:transparent}
.modal .modal-footer .btn-secondary{background:#0a0a0a;color:#888}
.modal .modal-footer .btn-secondary:hover{background:#1a1a1a;color:#c0c0c0;border-color:#3a3a3a}
.modal .modal-footer .btn-primary{background:linear-gradient(90deg,#1a1a1a,#222);color:#fff}
.modal .modal-footer .btn-primary:hover{background:linear-gradient(90deg,#222,#2a2a2a);border-color:#3a3a3a;transform:translateY(-1px)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(160px,20vw,220px),1fr));gap:clamp(15px,2vw,25px);margin-top:10px;text-align:left}
.gallery-item{background:linear-gradient(145deg,#111,#0d0d0d);border:1px solid #1a1a1a;border-radius:16px;overflow:hidden;transition:all .4s;cursor:pointer;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.gallery-item:hover{border-color:#2a2a2a;transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,.6)}
.gallery-item img{width:100%;height:clamp(160px,25vw,220px);object-fit:cover;display:block;background:#0a0a0a;transition:transform .4s;touch-action:manipulation}
.gallery-item:hover img{transform:scale(1.02)}
.gallery-item .name{padding:clamp(10px,1.5vw,14px);font-size:clamp(11px,1.2vw,12px);color:#666;word-break:break-all;text-align:center;border-top:1px solid #1a1a1a;background:#0d0d0d;font-family:monospace}
.gallery-item .menu-btn{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.75);border:1px solid #2a2a2a;color:#c0c0c0;width:clamp(30px,4vw,32px);height:clamp(30px,4vw,32px);border-radius:8px;cursor:pointer;font-size:clamp(16px,2vw,18px);display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:10;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);-webkit-tap-highlight-color:transparent}
.gallery-item .menu-btn:hover{background:#2a2a2a;border-color:#3a3a3a;transform:scale(1.05)}
.gallery-item .menu-dropdown{display:none;position:absolute;top:48px;right:10px;background:linear-gradient(145deg,#1a1a1a,#111);border:1px solid #2a2a2a;border-radius:12px;padding:6px 0;min-width:150px;z-index:20;box-shadow:0 12px 40px rgba(0,0,0,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gallery-item .menu-dropdown.active{display:block;animation:fadeIn .2s ease}
.gallery-item .menu-dropdown button{background:0 0;border:none;color:#c0c0c0;padding:10px 20px;width:100%;text-align:left;font-size:13px;cursor:pointer;transition:all .2s;border-radius:6px;-webkit-tap-highlight-color:transparent}
.gallery-item .menu-dropdown button:hover{background:#2a2a2a;color:#fff}
.pagination{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:30px;padding:15px 0}
.page-btn{background:#1a1a1a;border:1px solid #2a2a2a;color:#c0c0c0;padding:8px 16px;border-radius:8px;text-decoration:none;transition:all .3s;font-size:14px}
.page-btn:hover{background:#2a2a2a;border-color:#3a3a3a;color:#fff}
.page-info{color:#666;font-size:14px}
.back-link{display:inline-block;color:#666;text-decoration:none;margin-bottom:20px;font-size:14px;transition:all .3s;padding:8px 16px;border-radius:8px;border:1px solid transparent;-webkit-tap-highlight-color:transparent}
.back-link:hover{color:#c0c0c0;border-color:#1a1a1a;background:#111;text-align:left}
.empty-message{text-align:center;padding:clamp(40px,8vw,80px)20px;color:#333;font-size:clamp(16px,2vw,18px);border:2px dashed #1a1a1a;border-radius:16px;background:#0d0d0d}
.album-info{background:linear-gradient(145deg,#111,#0d0d0d);padding:clamp(16px,2vw,24px);border-radius:16px;border:1px solid #1a1a1a;margin-bottom:30px;text-align:left}
.album-id{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.album-id span{color:#888;font-size:14px;font-weight:300}
.album-id input{flex:1;min-width:200px;background:#0a0a0a;border:1px solid #1a1a1a;color:#c0c0c0;padding:10px 14px;border-radius:8px;font-size:13px;font-family:monospace;transition:all .3s;-webkit-appearance:none}
.album-id input:focus{outline:none;border-color:#2a2a2a;box-shadow:0 0 20px rgba(255,255,255,.03)}
.copy-btn{background:linear-gradient(90deg,#1a1a1a,#222);color:#fff;border:1px solid #2a2a2a;padding:10px 24px;border-radius:8px;cursor:pointer;font-size:13px;transition:all .3s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.copy-btn:hover{background:linear-gradient(90deg,#222,#2a2a2a);border-color:#3a3a3a;transform:translateY(-1px)}
.album-stats{color:#666;font-size:14px;font-weight:300}
.image-viewer{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.97);z-index:2000;justify-content:center;align-items:center;cursor:pointer;padding:20px}
.image-viewer.active{display:flex;animation:fadeIn .3s ease}
.image-viewer img{max-width:95%;max-height:95%;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.8);border-radius:4px;touch-action:manipulation}
.image-viewer-close{position:fixed;top:clamp(16px,3vw,24px);right:clamp(16px,3vw,36px);color:#fff;font-size:clamp(32px,5vw,44px);cursor:pointer;z-index:2001;transition:all .3s;background:rgba(0,0,0,.5);width:clamp(44px,6vw,56px);height:clamp(44px,6vw,56px);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid #2a2a2a;-webkit-tap-highlight-color:transparent;line-height:1}
.image-viewer-close:hover{color:#888;transform:rotate(90deg);background:rgba(0,0,0,.8)}
.status{padding:16px;background:#111;border:1px solid #1a1a1a;border-radius:10px;margin-top:20px;display:none;text-align:center;font-size:14px}
.status.success{border-color:#1a3a1a;color:#8f8;display:block;background:#0a1a0a}
.status.error{border-color:#3a1a1a;color:#f88;display:block;background:#1a0a0a}
@keyframes fadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@media(max-width:768px){.container{padding:20px 15px}h1{font-size:36px}.upload-form{padding:20px;border-radius:12px}.upload-form .file-upload-label{padding:20px;min-height:80px;font-size:13px}.upload-form input[type=text]{padding:12px 14px;font-size:13px}.upload-form button{padding:14px;font-size:15px}.gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px;text-align:left}.gallery-item img{height:150px}.modal{padding:20px;max-height:90vh;border-radius:16px}.modal .modal-header h2{font-size:18px}.album-id{flex-direction:column;align-items:stretch;gap:8px}.album-id input{min-width:auto;font-size:12px;padding:8px 12px}.copy-btn{padding:8px 16px;font-size:12px;width:100%}.album-info{padding:16px}.album-stats{font-size:12px}.image-viewer-close{top:12px;right:12px;width:40px;height:40px;font-size:28px}.pagination{gap:10px}.page-btn{padding:6px 12px;font-size:12px}}
@media(max-width:480px){.container{padding:15px 12px}.gallery{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;text-align:left}.gallery-item img{height:130px}.gallery-item .name{font-size:10px;padding:8px}.upload-form{padding:16px}.upload-form .file-upload-label{padding:16px;min-height:60px;font-size:12px}.upload-form .file-upload-label .files-list{font-size:10px}.modal{padding:16px}.modal .modal-body .file-item{font-size:12px;padding:6px 10px}.modal .modal-footer button{font-size:12px;padding:10px}}
.image-viewer-close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #2a2a2a;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all .3s;
    z-index: 2001;
}
.image-viewer-close:hover {
    color: #888;
    transform: rotate(90deg);
    background: rgba(255,255,255,0.1);
}
.image-viewer-close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 9999;
    transition: background 0.3s;
}
.image-viewer-close:hover {
    background: #444;
    color: #fff;
}

.image-viewer {
    z-index: 99999 !important;
}
.image-viewer-close {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    background: #222 !important;
    border: 1px solid #555 !important;
    color: #fff !important;
    font-size: 24px !important;
    cursor: pointer !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    z-index: 100000 !important;
    transition: none !important;
    transform: none !important;
    box-sizing: border-box !important;
}
.image-viewer-close:hover {
    background: #444 !important;
    color: #fff !important;
    transform: none !important;
}

.image-viewer-close {
    font-size: 22px !important;
    text-indent: 1px !important;
    padding-bottom: 2px !important;
}
.image-viewer {
    will-change: opacity;
    transition: opacity 0.15s ease-in-out !important;
}