*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#f8f8f6;--bg2:#fff;--border:#e5e5e5;--text:#1a1a1a;--text2:#888;--text3:#bbb;--accent:#1a1a1a;--accent2:#f0f0f0}
body.dark{--bg:#111;--bg2:#1c1c1c;--border:#2a2a2a;--text:#f0f0f0;--text2:#888;--text3:#555;--accent:#fff;--accent2:#2a2a2a}
body{font-family:'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .2s,color .2s;font-size:13px}

/* Nav */
.nav{background:var(--bg2);border-bottom:0.5px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:52px;position:sticky;top:0;z-index:200}
.nav-logo{font-size:15px;font-weight:700;letter-spacing:-0.5px}
.nav-logo span{color:var(--text2);font-weight:400}
.nav-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:32px;height:32px;border-radius:8px;border:0.5px solid var(--border);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text);transition:.15s}
.icon-btn:hover{background:var(--accent2)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;text-decoration:none}
.btn-logout{display:flex;align-items:center;gap:6px;padding:0 12px;height:32px;border-radius:8px;border:0.5px solid #dc2626;background:transparent;color:#dc2626;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s;white-space:nowrap}
.btn-logout:hover{background:#dc2626;color:#fff}
.btn-logout svg{flex-shrink:0}
.btn-logout{display:flex;align-items:center;gap:6px;padding:0 12px;height:32px;border-radius:8px;border:0.5px solid #dc2626;background:transparent;color:#dc2626;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s;white-space:nowrap}
.btn-logout:hover{background:#dc2626;color:#fff}
.btn-logout svg{flex-shrink:0}

/* Sidebar */
.sidebar{width:200px;min-height:calc(100vh - 52px);background:var(--bg2);border-right:0.5px solid var(--border);padding:1rem 0;position:fixed;top:52px;left:0;transition:.2s;overflow-y:auto}
.sidebar.closed{left:-200px}
.sitem{display:flex;align-items:center;gap:10px;padding:8px 1.2rem;cursor:pointer;color:var(--text2);border-radius:0;transition:.1s;font-size:13px;border-left:2px solid transparent;text-decoration:none}
.sitem:hover{background:var(--accent2);color:var(--text)}
.sitem.active{color:var(--text);border-left-color:var(--accent);background:var(--accent2);font-weight:500}
.sitem svg{width:14px;height:14px;stroke:currentColor;fill:none;flex-shrink:0}
.sbadge{margin-left:auto;background:var(--accent2);border-radius:20px;padding:1px 7px;font-size:10px;color:var(--text2)}
.sidebar-section{padding:4px 1.2rem 2px;font-size:10px;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;margin-top:8px}

/* Main */
.main{margin-left:200px;width:calc(100% - 200px);padding:1.5rem;transition:.2s;min-height:calc(100vh - 52px)}
.main.full{margin-left:0;width:100%}

/* Topbar */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:1.2rem;flex-wrap:wrap}
.search-wrap{position:relative;flex:1;min-width:160px}
.search-wrap input{width:100%;height:34px;border:0.5px solid var(--border);border-radius:8px;padding:0 10px 0 32px;font-size:13px;background:var(--bg2);color:var(--text);outline:none}
.search-wrap input:focus{border-color:#999}
.si{position:absolute;left:9px;top:50%;transform:translateY(-50%);stroke:var(--text3);fill:none;width:13px;height:13px}

/* Buttons */
.btn{height:34px;border-radius:8px;border:0.5px solid var(--border);background:var(--bg2);color:var(--text);padding:0 14px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--accent2)}
.btn.primary{background:var(--accent);color:var(--bg2);border-color:var(--accent)}
.btn.primary:hover{opacity:.85}
.btn.danger{border-color:#fca5a5;color:#dc2626}

/* Stats */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:1.2rem}
.stat-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;padding:10px 14px}
.stat-card .label{font-size:11px;color:var(--text2);margin-bottom:3px}
.stat-card .val{font-size:20px;font-weight:600;letter-spacing:-0.5px}
.stat-card .sub{font-size:10px;color:var(--text3);margin-top:1px}

/* Controls & Filters */
.controls{display:flex;align-items:center;gap:8px;margin-bottom:1.2rem;flex-wrap:wrap}
.filters{display:flex;gap:4px;flex-wrap:wrap}
.fb{padding:5px 12px;border-radius:20px;border:0.5px solid var(--border);background:var(--bg2);font-size:12px;cursor:pointer;color:var(--text2);transition:.15s}
.fb.active{background:var(--accent);color:var(--bg2);border-color:var(--accent)}
.sort-select{height:32px;border:0.5px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text);padding:0 8px;font-size:12px;outline:none;cursor:pointer}
.view-btns{display:flex;gap:3px;margin-left:auto}
.vb{width:30px;height:30px;border-radius:6px;border:0.5px solid var(--border);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:.15s}
.vb.active{background:var(--accent);color:var(--bg2);border-color:var(--accent)}

/* Drop zone */
.drop-zone{border:1.5px dashed var(--border);border-radius:12px;padding:1.5rem;text-align:center;margin-bottom:1.2rem;background:var(--bg2);transition:.2s;cursor:pointer;display:none}
.drop-zone.open{display:block}
.drop-zone.over{border-color:var(--accent);background:var(--accent2)}
.drop-zone p{color:var(--text2);margin-top:4px;font-size:12px}

/* Progress */
.progress-wrap{margin-bottom:1rem;display:none}
.progress-item{background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.progress-bar{flex:1;height:4px;background:var(--accent2);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
.progress-name{font-size:12px;color:var(--text);width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-pct{font-size:11px;color:var(--text2);min-width:32px;text-align:right}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.grid.list-view{grid-template-columns:1fr}

/* Cards */
.card{background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:.15s;position:relative}
.card:hover{border-color:#aaa;transform:translateY(-1px)}
.card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.card-check{position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:4px;border:1.5px solid rgba(255,255,255,.8);background:rgba(0,0,0,.3);display:none;align-items:center;justify-content:center;z-index:2;color:#fff;font-size:11px}
.card.selected .card-check,.card:hover .card-check{display:flex}
.card-check.checked{background:var(--accent);border-color:var(--accent)}
.card-thumb{width:100%;aspect-ratio:1;object-fit:cover;background:var(--accent2)}
.card-vid{width:100%;aspect-ratio:1;background:linear-gradient(145deg,#1f1f1f,#0f0f0f);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.card-vid .video-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
.card-vid.has-thumb .video-thumb{opacity:1}
/* Label nombre visible cuando no hay miniatura */
.card-vid-label{position:absolute;bottom:0;left:0;right:0;padding:5px 8px;font-size:10px;color:rgba(255,255,255,.75);background:linear-gradient(transparent,rgba(0,0,0,.7));pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}
.card-vid.has-thumb .card-vid-label{display:none}
.play-btn{width:40px;height:40px;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:.2s}
.card:hover .play-btn{background:rgba(255,255,255,.25)}
.play-btn:active{transform:scale(0.9);background:rgba(255,255,255,.35);transition:transform .08s,background .08s}
.tri{width:0;height:0;border:8px solid transparent;border-left:14px solid #fff;margin-left:3px}
.card-badges{position:absolute;top:7px;right:7px;display:flex;flex-direction:column;gap:3px}
.badge{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600;letter-spacing:.04em}
.badge.vid{background:rgba(0,0,0,.6);color:#fff}
.badge.fav{background:rgba(255,200,0,.9);color:#7a5200}
.badge.priv{background:rgba(220,38,38,.8);color:#fff}
.card-info{padding:8px 10px;border-top:0.5px solid var(--border);-webkit-user-select:none;user-select:none}
.card-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.card-meta{display:flex;justify-content:space-between;align-items:center}
.card-size{font-size:10px;color:var(--text3)}
.card-views{font-size:10px;color:var(--text3);display:flex;align-items:center;gap:2px}
.card-actions{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.ca{width:22px;height:22px;border-radius:5px;border:0.5px solid var(--border);background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:.1s;font-size:11px}
.ca:hover{background:var(--accent2);color:var(--text)}
.ca svg{width:11px;height:11px;stroke:currentColor;fill:none}
.card-img-wrap{width:100%;aspect-ratio:1;overflow:hidden;background:var(--accent2);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.card-img-wrap:hover img{filter:brightness(1.06);}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:filter .2s,transform .2s;}

/* List view */
.list-view .card{display:flex;align-items:center;gap:12px;border-radius:8px;padding:8px 12px;overflow:visible}
.list-view .card-vid,.list-view .card-img-wrap{width:48px;height:48px;flex-shrink:0;border-radius:6px;overflow:hidden;aspect-ratio:1}
.list-view .card-vid{background:#111}
.list-view .card-info{border:none;padding:0;flex:1}
.list-view .card-actions{margin-top:0;margin-left:auto;flex-wrap:nowrap}
.list-view .card-badges{position:static;flex-direction:row}
.list-view .card-check{position:static;flex-shrink:0}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:1.5rem}
.pag-btn{width:32px;height:32px;border-radius:7px;border:0.5px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:.15s}
.pag-btn:hover{background:var(--accent2)}
.pag-btn.active{background:var(--accent);color:var(--bg2);border-color:var(--accent)}

/* Bulk bar */
.bulk-bar{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--bg2);padding:10px 20px;border-radius:40px;display:none;align-items:center;gap:12px;font-size:13px;z-index:300;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.bulk-bar.show{display:flex}
.bulk-btn{background:rgba(255,255,255,.15);border:none;color:inherit;padding:5px 12px;border-radius:20px;cursor:pointer;font-size:12px;transition:.15s}
.bulk-btn:hover{background:rgba(255,255,255,.25)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:500;display:none;align-items:center;justify-content:center;flex-direction:column}
.lightbox.show{display:flex}
.lb-img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:8px}
.lb-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:.15s}
.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-info{color:rgba(255,255,255,.6);font-size:12px;margin-top:12px;text-align:center}
.slideshow-bar{background:rgba(0,0,0,.8);padding:8px 16px;border-radius:30px;display:flex;align-items:center;gap:12px;position:absolute;bottom:20px}
.slideshow-btn{background:rgba(255,255,255,.1);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.slideshow-btn:hover{background:rgba(255,255,255,.2)}
.ss-counter{color:rgba(255,255,255,.6);font-size:12px;min-width:60px;text-align:center}

/* Modales */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:none;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-box{background:var(--bg2);border-radius:14px;padding:1.5rem;width:360px;border:0.5px solid var(--border)}
.modal-title{font-size:15px;font-weight:600;margin-bottom:1rem}
.modal-input{width:100%;height:36px;border:0.5px solid var(--border);border-radius:8px;padding:0 12px;font-size:13px;background:var(--bg);color:var(--text);outline:none;margin-bottom:1rem}
.modal-input:focus{border-color:#999}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}

/* Misc */
.trash-zone{padding:1rem;text-align:center;color:var(--text2)}
.date-group{margin-bottom:1.5rem}
.date-label{font-size:11px;font-weight:600;color:var(--text2);margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase}
.size-filter{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;font-size:12px;color:var(--text2)}
.size-filter input{width:80px}
.toast{position:fixed;top:70px;right:16px;background:var(--accent);color:var(--bg2);padding:10px 16px;border-radius:8px;font-size:13px;z-index:600;transform:translateX(120%);transition:.3s}
.toast.show{transform:translateX(0)}
.tag{display:inline-block;background:var(--accent2);color:var(--text2);padding:1px 6px;border-radius:4px;font-size:9px;margin-right:2px}

/* Login */
.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-box{background:var(--bg2);border:0.5px solid var(--border);border-radius:14px;padding:2rem;width:340px}
.login-box h1{font-size:18px;font-weight:700;margin-bottom:1.5rem;letter-spacing:-0.3px}
.login-box input{width:100%;height:38px;border:0.5px solid var(--border);border-radius:8px;padding:0 12px;font-size:13px;background:var(--bg);color:var(--text);outline:none;margin-bottom:10px;display:block}
.login-box input:focus{border-color:#999}
.login-box button{width:100%;height:38px;border-radius:8px;border:none;background:var(--accent);color:var(--bg2);font-size:13px;font-weight:600;cursor:pointer;margin-top:4px}
.login-box button:hover{opacity:.85}
.login-box .error{color:#dc2626;font-size:12px;margin-bottom:10px}
.login-box .logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;margin-bottom:1.5rem}
.login-box .logo span{color:var(--text2);font-weight:400}
.card-views{font-size:10px;color:var(--text3);display:flex;align-items:center;gap:2px}
.card-actions{display:flex;gap:4px;margin-top:5px}
.ca{width:22px;height:22px;border-radius:5px;border:0.5px solid var(--border);background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:.1s}
.ca:hover{background:var(--accent2);color:var(--text)}
.ca svg{width:11px;height:11px;stroke:currentColor;fill:none}

/* List view */
.list-view .card{display:flex;align-items:center;gap:12px;border-radius:8px;padding:8px 12px}
.list-view .card-vid,.list-view .card-thumb-wrap{width:48px;height:48px;flex-shrink:0;border-radius:6px;overflow:hidden}
.list-view .card-vid{background:#111}
.list-view .card-info{border:none;padding:0;flex:1}
.list-view .card-actions{margin-top:0;margin-left:auto}
.list-view .card-badges{position:static;flex-direction:row}

/* Card image wrapper */
.card-img-wrap{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-img-wrap img{width:100%;height:100%;object-fit:cover}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:1.5rem;padding:10px 4px;border-top:0.5px solid var(--border)}
.pag-btn{width:32px;height:32px;border-radius:7px;border:0.5px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:.15s}
.pag-btn:hover{background:var(--accent2)}
.pag-btn.active{background:var(--accent);color:var(--bg2);border-color:var(--accent)}

/* Bulk bar */
.bulk-bar{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--bg2);padding:10px 20px;border-radius:40px;display:none;align-items:center;gap:12px;font-size:13px;z-index:300;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.bulk-bar.show{display:flex}
.bulk-btn{background:rgba(255,255,255,.15);border:none;color:inherit;padding:5px 12px;border-radius:20px;cursor:pointer;font-size:12px;transition:.15s}
.bulk-btn:hover{background:rgba(255,255,255,.25)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:500;display:none;align-items:center;justify-content:center;flex-direction:column}
.lightbox.show{display:flex}
.lb-img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:8px}
.lb-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:.15s}
.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-info{color:rgba(255,255,255,.6);font-size:12px;margin-top:12px;text-align:center}

/* Slideshow */
.slideshow-bar{background:rgba(0,0,0,.8);padding:8px 16px;border-radius:30px;display:flex;align-items:center;gap:12px;position:absolute;bottom:20px}
.slideshow-btn{background:rgba(255,255,255,.1);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.slideshow-btn:hover{background:rgba(255,255,255,.2)}
.ss-counter{color:rgba(255,255,255,.6);font-size:12px;min-width:60px;text-align:center}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:none;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-box{background:var(--bg2);border-radius:14px;padding:1.5rem;width:360px;border:0.5px solid var(--border)}
.modal-title{font-size:15px;font-weight:600;margin-bottom:1rem}
.modal-input{width:100%;height:36px;border:0.5px solid var(--border);border-radius:8px;padding:0 12px;font-size:13px;background:var(--bg);color:var(--text);outline:none;margin-bottom:1rem}
.modal-input:focus{border-color:#999}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}

/* Tags */
.tag{display:inline-block;background:var(--accent2);color:var(--text2);padding:1px 6px;border-radius:4px;font-size:9px;margin-right:2px}

/* Toast */
.toast{position:fixed;top:70px;right:16px;background:var(--accent);color:var(--bg2);padding:10px 16px;border-radius:8px;font-size:13px;z-index:600;transform:translateX(120%);transition:.3s}
.toast.show{transform:translateX(0)}

/* Date groups */
.date-group{margin-bottom:1.5rem}
.date-label{font-size:11px;font-weight:600;color:var(--text2);margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase}

/* Size filter */
.size-filter{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;font-size:12px;color:var(--text2)}
.size-filter input[type="range"]{width:80px}

/* Login v2 */
.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--bg);padding:20px}
.login-box{background:var(--bg2);padding:40px;border-radius:14px;border:0.5px solid var(--border);width:100%;max-width:360px}
.login-box h1{margin-bottom:24px;text-align:center;font-size:18px;font-weight:600;letter-spacing:-0.5px}
.login-box input{width:100%;height:38px;border:0.5px solid var(--border);border-radius:8px;padding:0 12px;font-size:13px;background:var(--bg);color:var(--text);outline:none;margin-bottom:12px}
.login-box input:focus{border-color:#999}
.login-box button{width:100%;height:38px;background:var(--accent);color:var(--bg2);border:none;border-radius:8px;font-size:13px;cursor:pointer;font-weight:500;transition:.15s}
.login-box button:hover{opacity:.85}
.login-logo{text-align:center;margin-bottom:24px;font-size:18px;font-weight:700;letter-spacing:-0.5px}
.login-logo span{color:var(--text2);font-weight:400}

/* Messages */
.error{background:#fef2f2;color:#dc2626;padding:8px 12px;border-radius:8px;margin-bottom:12px;text-align:center;font-size:12px;border:0.5px solid #fca5a5}
.success{background:#f0fdf4;color:#16a34a;padding:8px 12px;border-radius:8px;margin-bottom:12px;text-align:center;font-size:12px;border:0.5px solid #86efac}

/* Responsive */
@media (max-width:768px){
    .sidebar{left:-200px}
    .main{margin-left:0;width:100%}
    .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
    .stats-row{grid-template-columns:repeat(2,1fr)}
    .topbar{flex-direction:column;align-items:stretch}
    .size-filter{display:none}
}
@media (max-width:480px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .nav{padding:0 1rem}
}

/* ── Mobile / Touch Optimization ── */

/* Eliminate 300ms tap delay on all interactive elements */
.card,.ca,.btn,.icon-btn,.sitem,.fb,.vb,.lb-nav,.lb-close,
.slideshow-btn,.bulk-btn,.pag-btn,.avatar,.drop-zone,.modal-btns .btn{
    touch-action:manipulation;
}

/* Prevent long-press "Save Image" / "Copy Image" context menu on cards */
.card{
    -webkit-touch-callout:none;
}
.card-img-wrap img,.card-thumb,.card-vid video{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    pointer-events:none;
}

/* Prevent text selection on buttons and interactive chrome */
.ca,.btn,.icon-btn,.lb-nav,.lb-close,.slideshow-btn,.bulk-btn,
.sitem,.fb,.vb,.pag-btn{
    -webkit-user-select:none;
    user-select:none;
}

/* Lightbox: image/video must not intercept touches meant for nav buttons */
/* Imagen: sin menú contextual de "guardar imagen" */
#lbImg{
    pointer-events:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}
/* Video: necesita pointer-events para que funcionen los controles nativos */
#lbVideo{
    -webkit-user-select:none;
    user-select:none;
    position:relative;
    z-index:2;
}

/* Ensure lightbox controls sit above media content */
.lb-nav,.lb-close{z-index:10;}
.slideshow-bar{z-index:10;}

/* Touch-only: larger tap targets and instant visual feedback */
@media (hover:none){
    /* Increase .ca hit area from 22px to 38px */
    .ca{
        width:38px;
        height:38px;
        min-width:38px;
        min-height:38px;
        border-radius:8px;
    }
    .ca svg{width:14px;height:14px;}

    /* Bigger lightbox controls */
    .lb-nav,.lb-close{width:52px;height:52px;font-size:22px;}

    /* Active-state scale feedback (feels native) */
    .ca:active,.btn:active,.icon-btn:active,.vb:active,.fb:active,.pag-btn:active{
        transform:scale(0.93);
        opacity:0.75;
        transition:transform .08s,opacity .08s;
    }
    .lb-nav:active,.slideshow-btn:active{
        background:rgba(255,255,255,.35);
        opacity:0.8;
        transition:background .08s,opacity .08s;
    }
    .lb-close:active{
        background:rgba(255,255,255,.35);
        transform:scale(0.88);
        transition:background .08s,transform .08s;
    }
    .sitem:active{
        background:var(--accent2);
        opacity:0.75;
    }
    .card:active{
        transform:scale(0.98);
        transition:transform .08s;
    }
}