/* === Reset & base === */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0e0f12;color:#e6e7eb;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

/* === Login === */
.login-body{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(80% 60% at 50% 0%,rgba(80,120,255,.18),transparent 70%),#0e0f12}
.login-card{width:100%;max-width:380px;padding:32px 24px 28px;background:#16181d;border:1px solid #23262d;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.login-logo{font-size:48px;text-align:center;margin-bottom:6px}
.login-title{margin:0 0 4px;font-size:22px;font-weight:600;text-align:center}
.login-sub{margin:0 0 22px;color:#8a8e99;font-size:14px;text-align:center}
.login-input{width:100%;height:48px;padding:0 16px;background:#0e0f12;border:1px solid #2a2d36;border-radius:12px;color:#e6e7eb;font-size:16px;outline:none;transition:border-color .15s}
.login-input:focus{border-color:#5078ff}
.login-remember{display:flex;align-items:center;gap:8px;margin:14px 4px;font-size:14px;color:#a4a8b3;user-select:none}
.login-remember input{accent-color:#5078ff;width:16px;height:16px}
.login-btn{display:block;width:100%;height:48px;margin-top:12px;background:linear-gradient(135deg,#5078ff,#7a5cff);color:#fff;border-radius:12px;font-size:16px;font-weight:600;letter-spacing:.5px;transition:transform .1s,filter .15s}
.login-btn:active{transform:scale(.98)}
.login-btn:hover{filter:brightness(1.08)}
.login-err{margin-top:14px;padding:10px 12px;background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.25);border-radius:10px;color:#ff8888;font-size:13px;text-align:center}

/* === Top bar === */
.topbar{position:sticky;top:0;z-index:50;background:rgba(14,15,18,.85);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid #1d1f25}
.topbar-inner{display:flex;align-items:center;gap:12px;padding:10px 14px;max-width:1600px;margin:0 auto}
.brand{font-size:16px;font-weight:600;letter-spacing:.5px;color:#e6e7eb;flex-shrink:0}
.tabs{display:flex;gap:6px;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{padding:7px 14px;border-radius:999px;font-size:14px;color:#a4a8b3;background:#1a1c22;border:1px solid transparent;white-space:nowrap;transition:all .15s}
.tab.active{color:#fff;background:linear-gradient(135deg,#5078ff,#7a5cff);border-color:transparent}
.topbar-actions{display:flex;gap:6px;flex-shrink:0}
.icon-btn{width:36px;height:36px;border-radius:10px;background:#1a1c22;color:#c8ccd6;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.icon-btn:active{background:#23262d}

/* === Grid === */
.content{max-width:1600px;margin:0 auto;padding:14px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,1fr);gap:10px}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr);gap:12px}}
@media (min-width:1280px){.grid{grid-template-columns:repeat(5,1fr)}}
@media (min-width:1600px){.grid{grid-template-columns:repeat(6,1fr)}}

/* Month group header — spans the full grid row */
.month-header{
    grid-column:1 / -1;
    margin:14px 2px 2px;
    padding:8px 4px 6px;
    font-size:14px;
    font-weight:600;
    color:#c8ccd6;
    letter-spacing:.5px;
    border-bottom:1px solid #23262d;
    display:flex;align-items:baseline;gap:8px;
}
.month-header:first-child{margin-top:0}
.month-header::before{
    content:"";
    display:inline-block;
    width:3px;height:14px;border-radius:2px;
    background:linear-gradient(180deg,#5078ff,#7a5cff);
    transform:translateY(2px);
}

.cell{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#16181d;cursor:pointer;transition:transform .12s}.cell:active{transform:scale(.98)}
.cell img{width:100%;height:100%;object-fit:cover;background:#0a0b0e;transition:opacity .25s}
.cell img[data-loaded="0"]{opacity:0}
.cell .badge{position:absolute;left:8px;top:8px;padding:3px 8px;font-size:11px;font-weight:600;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;letter-spacing:.5px}
.cell .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cell .play::before{content:"";width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");background-size:24px;background-position:center;background-repeat:no-repeat;backdrop-filter:blur(2px)}
.cell .meta{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:11px;color:#dcdde2;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);display:flex;justify-content:space-between;gap:8px}
.cell .meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Broken / unreadable media — show a placeholder icon */
.cell.broken img{opacity:0;visibility:hidden}
.cell.broken{cursor:default}
.cell.broken::before{
    content:"";
    position:absolute;left:50%;top:50%;
    width:42%;height:42%;
    transform:translate(-50%,calc(-50% - 6px));
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23555a66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='10' width='52' height='44' rx='4'/><path d='M6 44l14-14 12 12 8-8 18 18'/><circle cx='22' cy='22' r='4' fill='%23555a66' stroke='none'/><line x1='6' y1='10' x2='58' y2='54' stroke='%23ff5a5a' stroke-width='3'/></svg>") center/contain no-repeat;
    opacity:.85;
}
.cell.broken::after{
    content:"无法预览";
    position:absolute;left:0;right:0;bottom:18px;
    text-align:center;font-size:11px;color:#7c8090;letter-spacing:.5px;
}

.loading,.empty{padding:40px 20px;text-align:center;color:#8a8e99}

/* === Video modal === */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.92)}
.modal-inner{position:relative;width:100%;max-width:1280px;padding:0 8px}
.modal-close{position:absolute;top:-44px;right:8px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2}
@media (max-width:640px){
    .modal-inner{padding:0}
    .modal-close{top:8px;right:8px}
}
#player{width:100%;max-height:90vh;background:#000;border-radius:8px}
.plyr{--plyr-color-main:#5078ff;border-radius:8px}

/* === PhotoSwipe overrides for dark theme === */
.pswp{--pswp-bg:#000}

/* === Cell delete button === */
.cell-del{
    position:absolute;top:6px;right:6px;
    width:28px;height:28px;border-radius:50%;
    background:rgba(0,0,0,.55);color:#fff;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:scale(.85);
    transition:opacity .15s,transform .15s,background .15s;
    z-index:3;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border:0;cursor:pointer;
}
.cell:hover .cell-del,
.cell:active .cell-del{opacity:1;transform:scale(1)}
@media (hover:none){
    .cell-del{opacity:1;transform:scale(1)}
}
.cell-del:hover{background:#e54545}
.cell-del:active{background:#c43030}
.cell.deleting{opacity:.5;pointer-events:none;transition:opacity .2s}

/* === Top bar primary button (upload) === */
.icon-btn--primary{
    background:linear-gradient(135deg,#5078ff,#7a5cff);
    color:#fff;
}
.icon-btn--primary:active{filter:brightness(.95)}

/* === Upload progress panel === */
.upload-panel{
    position:fixed;
    right:14px;bottom:14px;
    width:min(380px,calc(100vw - 28px));
    max-height:50vh;
    background:#16181d;border:1px solid #23262d;border-radius:14px;
    box-shadow:0 14px 40px rgba(0,0,0,.5);
    display:flex;flex-direction:column;
    z-index:200;overflow:hidden;
}
.upload-panel.hidden{display:none}
.upload-panel-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 12px;
    background:#1a1c22;
    border-bottom:1px solid #23262d;
    font-size:13px;font-weight:600;color:#c8ccd6;
}
.upload-panel-head .icon-btn{width:30px;height:30px}
.upload-list{
    list-style:none;margin:0;padding:8px 12px;
    overflow-y:auto;flex:1;
}
.upload-item{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto;
    grid-template-areas:
        "name meta"
        "bar bar"
        "status status";
    gap:4px 8px;
    padding:10px 0;
    border-bottom:1px solid #23262d;
}
.upload-item:last-child{border-bottom:0}
.upload-name{grid-area:name;font-size:13px;color:#dcdde2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-meta{grid-area:meta;font-size:11px;color:#8a8e99}
.upload-bar{grid-area:bar;height:4px;background:#2a2d36;border-radius:2px;overflow:hidden}
.upload-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#5078ff,#7a5cff);transition:width .15s ease}
.upload-status{grid-area:status;font-size:11px;color:#8a8e99}
.upload-item.ok .upload-status{color:#4ade80}
.upload-item.err .upload-status{color:#ff6b6b}
.upload-item.ok .upload-bar-fill{background:#4ade80}
.upload-item.err .upload-bar-fill{background:#ff6b6b}

/* === Toast === */
.toast{
    position:fixed;left:50%;top:14px;transform:translateX(-50%);
    z-index:300;
    padding:10px 16px;border-radius:10px;
    background:rgba(28,30,36,.95);color:#e6e7eb;
    font-size:13px;font-weight:500;
    box-shadow:0 8px 24px rgba(0,0,0,.45);
    border:1px solid #2a2d36;
    transition:opacity .2s,transform .2s;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.toast.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-10px)}
.toast.ok{border-color:rgba(74,222,128,.4);color:#a7f3d0}
.toast.err{border-color:rgba(255,107,107,.5);color:#fecaca}

/* preserve image aspect ratio inside PhotoSwipe (no stretching) */
.pswp__img{
    object-fit:contain;
    /* `rotate` is a separate CSS property from `transform`,
       so it composes with PhotoSwipe's pan/zoom transform */
    rotate:var(--rotate,0deg);
    transition:rotate .25s ease;
}

/* custom rotate button */
.pswp__button--rotate{
    display:flex !important;
    align-items:center;
    justify-content:center;
}
.pswp__button--rotate .pswp__icn{
    color:#fff;
    transition:transform .15s ease;
}
.pswp__button--rotate:hover .pswp__icn{transform:rotate(-15deg)}
.pswp__button--rotate:active .pswp__icn{transform:rotate(-30deg)}