*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a0f;--bg-soft:#12121a;--glass:rgba(255,255,255,0.035);--glass-hover:rgba(255,255,255,0.07);--glass-edge:rgba(255,255,255,0.07);--glass-edge-hover:rgba(255,255,255,0.13);--glass-shine:rgba(255,255,255,0.03);--text:#fff;--text-dim:rgba(255,255,255,0.52);--text-muted:rgba(255,255,255,0.3);--accent:#64d2ff;--accent-soft:rgba(100,210,255,0.12);--glow:rgba(100,210,255,0.4);--card-shadow:rgba(0,0,0,0.5);--scrollbar:rgba(255,255,255,0.06);--modal-bg:rgba(18,18,26,0.92);--radius-sm:14px;--radius-md:22px;--radius-lg:32px;--font:-apple-system,"SF Pro Display","Helvetica Neue",sans-serif}
[data-theme="light"]{--bg:#f5f5f7;--bg-soft:#ffffff;--glass:rgba(255,255,255,0.55);--glass-hover:rgba(255,255,255,0.8);--glass-edge:rgba(0,0,0,0.06);--glass-edge-hover:rgba(0,0,0,0.12);--glass-shine:rgba(255,255,255,0.7);--text:#1d1d1f;--text-dim:rgba(0,0,0,0.45);--text-muted:rgba(0,0,0,0.25);--accent:#0071e3;--accent-soft:rgba(0,113,227,0.08);--glow:rgba(0,113,227,0.25);--card-shadow:rgba(0,0,0,0.1);--scrollbar:rgba(0,0,0,0.08);--modal-bg:rgba(245,245,247,0.95)}
html{font-family:var(--font);-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text);transition:background .5s,color .5s}
body{min-height:100vh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:1;transition:opacity .8s}
[data-theme="dark"] body::before{background:radial-gradient(ellipse 70% 50% at 15% 25%,rgba(100,210,255,0.07)0%,transparent 60%),radial-gradient(ellipse 60% 40% at 85% 15%,rgba(180,130,255,0.06)0%,transparent 55%),radial-gradient(ellipse 65% 45% at 50% 95%,rgba(255,180,80,0.04)0%,transparent 55%)}
[data-theme="light"] body::before{background:radial-gradient(ellipse 70% 50% at 15% 25%,rgba(0,113,227,0.04)0%,transparent 60%),radial-gradient(ellipse 60% 40% at 85% 15%,rgba(0,113,227,0.03)0%,transparent 55%)}
.glass-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;transition:opacity .8s}
[data-theme="dark"] .orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(100,210,255,0.06)0%,transparent 65%);top:-250px;right:-150px}
[data-theme="dark"] .orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(180,130,255,0.05)0%,transparent 65%);bottom:-200px;left:-120px}
[data-theme="dark"] .orb-3{width:350px;height:350px;background:radial-gradient(circle,rgba(255,180,80,0.04)0%,transparent 60%);top:30%;left:55%}
[data-theme="light"] .orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,113,227,0.04)0%,transparent 65%);top:-250px;right:-150px}
[data-theme="light"] .orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(0,113,227,0.03)0%,transparent 65%);bottom:-200px;left:-120px}
[data-theme="light"] .orb-3{opacity:0}
.nav{position:sticky;top:0;z-index:100;padding:0 40px;height:60px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(50px)saturate(1.3);-webkit-backdrop-filter:blur(50px)saturate(1.3);border-bottom:1px solid var(--glass-edge);transition:background .5s,border-color .5s}
[data-theme="dark"] .nav{background:rgba(10,10,15,0.5)}
[data-theme="light"] .nav{background:rgba(255,255,255,0.6)}
.nav-inner{width:100%;max-width:1400px;display:flex;justify-content:space-between;align-items:center}
.nav-brand{font-size:15px;font-weight:600;letter-spacing:-.1px;background:linear-gradient(135deg,var(--text) 50%,var(--text-dim));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--glass-edge);border-radius:50%;background:var(--glass);color:var(--text-dim);cursor:pointer;transition:all .25s;position:relative}
.theme-toggle:hover{background:var(--glass-hover);color:var(--text);border-color:var(--glass-edge-hover)}
.theme-toggle svg{width:16px;height:16px;position:absolute;transition:opacity .3s,transform .3s}
[data-theme="dark"] .sun-icon{opacity:1;transform:rotate(0)}
[data-theme="dark"] .moon-icon{opacity:0;transform:rotate(90deg)}
[data-theme="light"] .sun-icon{opacity:0;transform:rotate(-90deg)}
[data-theme="light"] .moon-icon{opacity:1;transform:rotate(0)}
.upload-btn{display:flex;align-items:center;gap:6px;padding:7px 14px 7px 12px;border:1px solid var(--glass-edge);border-radius:100px;background:var(--glass);color:var(--text-dim);font-size:12px;font-weight:500;cursor:pointer;transition:all .25s;font-family:var(--font)}
.upload-btn:hover{background:var(--glass-hover);color:var(--text);border-color:var(--glass-edge-hover)}
.upload-btn svg{width:16px;height:16px}
.hero{text-align:center;padding:110px 24px 0;position:relative;z-index:1}
.hero-title{font-size:clamp(44px,7vw,80px);font-weight:700;letter-spacing:-2.5px;line-height:1.02;background:linear-gradient(135deg,var(--text) 0%,var(--text-dim) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:14px}
.hero-subtitle{font-size:clamp(15px,1.8vw,20px);color:var(--text-dim);max-width:460px;margin:0 auto 36px;line-height:1.5;font-weight:400}
.hero-search{position:relative;max-width:400px;margin:0 auto 64px}
.search-input{width:100%;padding:15px 20px 15px 48px;border:1px solid var(--glass-edge);border-radius:100px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--text);font-size:14px;outline:none;font-family:var(--font);transition:all .25s}
.search-input::placeholder{color:var(--text-muted)}
.search-input:focus{border-color:var(--accent);background:var(--glass-hover);box-shadow:0 0 0 4px var(--accent-soft)}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;width:16px;height:16px}
.categories{max-width:1400px;margin:0 auto;padding:0 40px 100px;position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);perspective:1200px}
@media(max-width:1100px){.categories{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.categories{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.categories{grid-template-columns:1fr}}
.category-card{position:relative;aspect-ratio:1/0.85;margin:6px;border-radius:var(--radius-md);background:var(--glass);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--glass-edge);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 22px 22px;transition:all .3s ease;transform-style:preserve-3d;will-change:transform;opacity:0;animation:cardIn .6s cubic-bezier(.34,1.56,.64,1) forwards;box-shadow:0 2px 24px rgba(0,0,0,0.06),inset 0 1px 0 var(--glass-shine)}
.category-card:hover{transform:translateY(-3px) !important;z-index:5;border-color:var(--glass-edge-hover);box-shadow:0 16px 40px var(--card-shadow),0 0 0 1px rgba(255,255,255,0.03) inset;background:var(--glass-hover)}
.category-card .card-icon{font-size:26px;margin-bottom:12px;display:block;opacity:.5;transition:transform .4s}
.category-card:hover .card-icon{transform:scale(1.12)}
.category-card .card-title{font-size:17px;font-weight:600;letter-spacing:-.12px;margin-bottom:4px}
.category-card .card-desc{font-size:11.5px;color:var(--text-muted);line-height:1.35;max-width:90%}
.category-card .card-count{position:absolute;top:20px;right:20px;font-size:10.5px;color:var(--text-muted);background:var(--glass);padding:3px 10px;border-radius:100px;border:1px solid var(--glass-edge);backdrop-filter:blur(10px)}
.category-header{max-width:1400px;margin:0 auto;padding:64px 40px 36px;position:relative;z-index:1}
.category-back{display:inline-flex;align-items:center;gap:6px;color:var(--text-dim);font-size:13.5px;margin-bottom:20px;cursor:pointer;background:none;border:none;font-family:var(--font);transition:color .2s;padding:6px 0}
.category-back:hover{color:var(--accent)}
.category-back:hover svg{transform:translateX(-3px)}
.category-back svg{transition:transform .2s}
.category-header h1{font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-1.3px;margin-bottom:6px;background:linear-gradient(135deg,var(--text) 0%,var(--text-dim) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.category-header p{color:var(--text-dim);font-size:14.5px;max-width:500px}
.masonry{max-width:1400px;margin:0 auto;padding:0 40px 100px;position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;perspective:1200px}
.masonry-item{width:calc(33.333% - 10px);border-radius:var(--radius-sm);overflow:hidden;background:var(--glass);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--glass-edge);transition:all .3s ease;will-change:transform;cursor:pointer;transform-style:preserve-3d;box-shadow:0 2px 16px rgba(0,0,0,0.04),inset 0 1px 0 var(--glass-shine)}
@media(max-width:900px){.masonry-item{width:calc(50% - 8px)}}
@media(max-width:550px){.masonry-item{width:100%}}
.masonry-item:hover{transform:translateY(-3px) !important;z-index:5;border-color:var(--glass-edge-hover);box-shadow:0 12px 32px var(--card-shadow);background:var(--glass-hover)}
.masonry-item img{width:100%;display:block;transition:transform .5s}
.masonry-item:hover img{transform:scale(1.06)}
.masonry-empty{width:100%;padding:100px 20px;text-align:center;color:var(--text-muted);font-size:14px}
.masonry-empty svg{margin-bottom:16px;opacity:.2}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(35px);-webkit-backdrop-filter:blur(35px);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.modal-overlay.active{display:flex}
.modal{background:var(--modal-bg);border:1px solid var(--glass-edge);border-radius:var(--radius-md);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 48px 96px var(--card-shadow),0 0 0 1px rgba(255,255,255,.02)inset;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:28px 28px 0}
.modal-header h2{font-size:19px;font-weight:600;letter-spacing:-.15px}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:26px;cursor:pointer;padding:0 4px;line-height:1;transition:color .2s}
.modal-close:hover{color:var(--text)}
.modal-body{padding:24px 28px}
.modal-footer{padding:0 28px 24px}
.drop-zone{border:1.5px dashed var(--glass-edge);border-radius:var(--radius-sm);padding:36px 20px;text-align:center;cursor:pointer;transition:all .25s;margin-bottom:20px;color:var(--text-muted);font-size:13px}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:var(--accent-soft);color:var(--text-dim)}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:500;color:var(--text-dim);margin-bottom:5px}
.form-select,.form-input{width:100%;padding:11px 16px;border:1px solid var(--glass-edge);border-radius:var(--radius-sm);background:var(--glass);color:var(--text);font-size:13px;outline:none;font-family:var(--font);transition:border-color .2s}
.form-select:focus,.form-input:focus{border-color:var(--accent)}
.form-select option{background:var(--bg-soft);color:var(--text)}
.upload-status{font-size:13px;padding:8px 0;color:var(--text-dim)}
.upload-status.success{color:#34c759}
.upload-status.error{color:#ff3b30}
.btn{padding:12px 24px;border:none;border-radius:100px;font-size:13px;font-weight:500;cursor:pointer;transition:all .25s;width:100%;font-family:var(--font)}
.btn-primary{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent)}
.btn-primary:hover{background:var(--accent);color:#fff;box-shadow:0 0 24px var(--glow)}
.viewer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);z-index:300;display:none;align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
.viewer-overlay.active{display:flex}
.viewer-overlay img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:var(--radius-sm);box-shadow:0 48px 120px rgba(0,0,0,.4)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}
@keyframes cardIn{0%{opacity:0;transform:translateY(30px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}