*{box-sizing:border-box}

:root{
--bg:#050b18;
--bg2:#081225;
--panel:rgba(12,25,48,.82);
--panel2:rgba(16,34,64,.92);
--border:rgba(116,160,220,.16);
--border2:rgba(116,160,220,.28);
--text:#eef5ff;
--muted:#8295b3;
--blue:#328cff;
--danger:#ff536b;
--shadow:0 22px 70px rgba(0,0,0,.45)
}

html,body{
margin:0;
min-height:100%;
background:
radial-gradient(circle at 20% 0%,rgba(25,88,180,.18),transparent 34%),
radial-gradient(circle at 90% 10%,rgba(38,120,255,.1),transparent 30%),
var(--bg);
color:var(--text);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

body{overflow-x:hidden}

button,input,textarea{font:inherit}

button{cursor:pointer}

.hidden{display:none!important}

.app{min-height:100vh}

.topbar{
position:sticky;
top:0;
z-index:20;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:17px 30px;
background:rgba(4,11,25,.78);
backdrop-filter:blur(22px);
border-bottom:1px solid var(--border);
box-shadow:0 10px 35px rgba(0,0,0,.2)
}

.brand{
display:flex;
align-items:center;
gap:13px;
flex-shrink:0
}

.brand-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:13px;
color:white;
font-size:22px;
background:linear-gradient(145deg,#267cf0,#174da4);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.25),
0 8px 28px rgba(24,111,255,.28)
}

.brand-name{
font-size:17px;
font-weight:750
}

.version{
margin-top:2px;
font-size:11px;
color:#637996;
letter-spacing:.5px
}

.actions{
display:flex;
align-items:center;
gap:10px;
min-width:0
}

.search-wrap{
width:270px;
position:relative
}

.search-icon{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
color:#7187a6;
font-size:20px;
pointer-events:none
}

.search-wrap input{
width:100%;
height:42px;
padding:0 15px 0 39px;
border:1px solid var(--border);
outline:0;
border-radius:13px;
color:var(--text);
background:rgba(13,29,54,.78)
}

.search-wrap input::placeholder{
color:#627895
}

.search-wrap input:focus{
border-color:rgba(64,145,255,.55);
box-shadow:0 0 0 4px rgba(50,140,255,.08)
}

.btn{
height:42px;
padding:0 17px;
border-radius:12px;
border:1px solid var(--border2);
color:#edf5ff;
font-weight:750;
font-size:12px;
letter-spacing:.4px;
transition:.2s
}

.btn:hover{
transform:translateY(-1px);
filter:brightness(1.12)
}

.btn-upload{
background:linear-gradient(145deg,#167cff,#1255bb);
box-shadow:0 8px 25px rgba(20,105,240,.22)
}

.btn-download-all{
background:rgba(21,39,69,.9)
}

.content{
width:min(1500px,calc(100% - 50px));
margin:auto;
padding:42px 0 80px
}

.section{
margin-bottom:55px
}

.section-heading{
margin-bottom:19px
}

.section-heading h2{
margin:0;
font-size:24px;
letter-spacing:-.6px
}

.section-heading p{
margin:5px 0 0;
color:var(--muted);
font-size:13px
}

.wallpaper-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
gap:18px
}

.wallpaper-card{
overflow:hidden;
border:1px solid var(--border);
border-radius:18px;
background:linear-gradient(145deg,rgba(15,31,57,.94),rgba(8,19,37,.94));
box-shadow:0 13px 35px rgba(0,0,0,.23);
transition:.25s;
animation:cardIn .35s ease both
}

.wallpaper-card:hover{
transform:translateY(-5px);
border-color:var(--border2);
box-shadow:0 22px 45px rgba(0,0,0,.38)
}

.wallpaper-image-wrap{
position:relative;
height:160px;
overflow:hidden;
background:#081225;
display:flex;
align-items:center;
justify-content:center
}

.wallpaper-image{
width:100%;
height:100%;
display:block;
object-fit:contain;
transition:.45s
}

.wallpaper-card:hover .wallpaper-image{
transform:scale(1.035)
}

.image-shine{
position:absolute;
inset:0;
background:linear-gradient(
115deg,
transparent 15%,
rgba(255,255,255,.08) 48%,
transparent 68%
);
transform:translateX(-100%);
transition:.65s;
pointer-events:none
}

.wallpaper-card:hover .image-shine{
transform:translateX(100%)
}

.card-body{
padding:15px
}

.card-title{
font-weight:750;
font-size:15px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.card-meta{
display:flex;
justify-content:space-between;
gap:10px;
margin-top:8px;
color:#9aacc6;
font-size:11px
}

.card-date{
margin-top:6px;
color:#5f7493;
font-size:10px
}

.card-actions{
display:flex;
gap:8px;
margin-top:13px
}

.card-download{
flex:1;
height:34px;
border:1px solid rgba(63,143,255,.28);
border-radius:9px;
background:rgba(30,91,170,.17);
color:#82bfff;
font-size:10px;
font-weight:800
}

.delete-card-btn{
width:34px;
height:34px;
border:1px solid rgba(255,83,107,.2);
border-radius:9px;
background:rgba(255,60,84,.06);
color:#ff7284;
font-size:18px
}

.empty-state{
padding:70px 20px;
text-align:center;
border:1px dashed var(--border2);
border-radius:20px;
background:rgba(10,22,42,.55)
}

.empty-icon{
font-size:38px;
color:#4c678b
}

.empty-state h3{
margin:13px 0 4px
}

.empty-state p{
margin:0;
color:var(--muted)
}

.modal-overlay{
position:fixed;
inset:0;
z-index:100;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(1,5,13,.74);
backdrop-filter:blur(12px);
opacity:0;
pointer-events:none;
transition:.22s
}

.modal-overlay.active{
opacity:1;
pointer-events:auto
}

.modal{
position:relative;
width:min(500px,100%);
max-height:90vh;
overflow:auto;
padding:28px;
border:1px solid var(--border2);
border-radius:23px;
background:linear-gradient(
145deg,
rgba(16,35,67,.98),
rgba(7,18,36,.98)
);
box-shadow:var(--shadow);
transform:translateY(14px) scale(.97);
transition:.25s
}

.modal-overlay.active .modal{
transform:none
}

.modal-close{
position:absolute;
top:14px;
right:14px;
width:33px;
height:33px;
border:0;
border-radius:10px;
color:#7890af;
background:rgba(255,255,255,.05);
font-size:22px
}

.modal-icon{
width:45px;
height:45px;
display:grid;
place-items:center;
border-radius:14px;
background:rgba(45,132,255,.13);
color:#64adff;
font-size:23px;
margin-bottom:15px
}

.modal h2{
margin:0;
font-size:22px
}

.modal-subtitle{
color:#8297b5;
font-size:13px;
line-height:1.55
}

.google-btn{
width:100%;
height:48px;
margin-top:18px;
border:1px solid rgba(255,255,255,.15);
border-radius:12px;
color:#f4f7fc;
background:#101d31;
font-weight:700
}

.google-btn:hover{
background:#172941
}

.google-logo{
display:inline-grid;
place-items:center;
margin-right:8px;
font-size:18px;
font-weight:800
}

.auth-status{
min-height:22px;
margin-top:12px;
text-align:center;
color:#7fa8d8;
font-size:12px
}

.text-btn{
width:100%;
border:0;
background:none;
color:#7187a5;
padding:10px
}

.modal-header{
display:flex;
gap:14px;
align-items:center;
margin-bottom:20px
}

.modal-header .modal-icon{
flex-shrink:0;
margin:0
}

.modal-header h2{
font-size:19px
}

.modal-header p{
margin:3px 0 0;
color:var(--muted);
font-size:12px
}

.drop-zone{
padding:32px 20px;
text-align:center;
border:1px dashed #385579;
border-radius:18px;
background:rgba(4,14,29,.5)
}

.drop-zone.dragover{
border-color:#3e9aff;
background:rgba(30,112,220,.1)
}

.drop-icon{
width:50px;
height:50px;
display:grid;
place-items:center;
margin:auto;
border-radius:15px;
background:rgba(43,132,255,.12);
color:#5aa8ff;
font-size:28px
}

.drop-zone h3{
margin:13px 0 5px;
font-size:15px
}

.drop-zone p{
margin:0 0 8px;
color:#6d829f;
font-size:12px
}

.select-btn{
border:1px solid rgba(65,145,255,.32);
border-radius:10px;
padding:10px 16px;
color:#8fc5ff;
background:rgba(35,107,202,.14);
font-size:12px;
font-weight:750
}

.drop-zone small{
display:block;
margin-top:10px;
color:#5c718e;
font-size:10px
}

.selected-file{
display:flex;
align-items:center;
gap:12px;
margin-top:15px;
padding:11px;
border:1px solid var(--border);
border-radius:13px;
background:rgba(7,18,35,.7)
}

.file-preview{
width:60px;
height:44px;
flex-shrink:0;
border-radius:8px;
background-position:center;
background-size:cover
}

.file-info{
min-width:0;
flex:1
}

.file-info strong{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px
}

.file-info span{
display:block;
margin-top:3px;
color:#7187a4;
font-size:10px
}

.remove-file{
width:29px;
height:29px;
border:0;
border-radius:8px;
color:#ff7789;
background:rgba(255,70,90,.08)
}

.upload-fields{
margin-top:17px
}

.upload-fields label{
display:block;
margin-bottom:13px;
color:#91a5c1;
font-size:11px;
font-weight:650
}

.upload-fields input,
.upload-fields textarea{
width:100%;
margin-top:6px;
border:1px solid var(--border);
outline:0;
border-radius:11px;
padding:11px 12px;
color:white;
background:rgba(4,14,28,.72)
}

.upload-fields textarea{
min-height:80px;
resize:vertical
}

.upload-meta{
margin:5px 0 14px;
color:#7188a7;
font-size:11px
}

.primary-btn{
width:100%;
height:45px;
border:0;
border-radius:11px;
color:white;
background:linear-gradient(145deg,#238aff,#1555bb);
box-shadow:0 8px 25px rgba(28,116,240,.2);
font-weight:800
}

.primary-btn:disabled{
cursor:not-allowed;
opacity:.55
}

.progress-wrap{
margin-top:14px
}

.progress-info{
display:flex;
justify-content:space-between;
color:#7890ae;
font-size:10px;
margin-bottom:6px
}

.progress-bar{
height:6px;
overflow:hidden;
border-radius:99px;
background:#12233d
}

.progress-fill{
width:0;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,#1d72ed,#69b7ff);
transition:.15s
}

.download-preview,
.delete-preview{
width:100%;
background-position:center;
background-size:contain;
background-repeat:no-repeat;
background-color:#081225;
border-radius:15px
}

.download-preview{
height:210px;
margin:18px 0
}

.download-title{
font-size:18px;
font-weight:800
}

.details-list{
margin:15px 0;
border:1px solid var(--border);
border-radius:13px;
overflow:hidden
}

.details-list>div{
display:flex;
justify-content:space-between;
gap:20px;
padding:10px 12px;
border-bottom:1px solid var(--border);
font-size:11px
}

.details-list>div:last-child{
border:0
}

.details-list span{
color:#7086a3
}

.details-list strong{
max-width:65%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#dbe7f7
}

.download-description{
color:#8296b2;
font-size:12px;
line-height:1.5
}

.download-summary{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:17px 0
}

.download-summary>div{
padding:13px;
border:1px solid var(--border);
border-radius:12px;
background:rgba(6,17,33,.65)
}

.download-summary span{
display:block;
color:#7186a3;
font-size:10px
}

.download-summary strong{
display:block;
margin-top:4px;
font-size:16px
}

.zip-files{
max-height:180px;
overflow:auto;
border:1px solid var(--border);
border-radius:12px
}

.zip-file{
padding:8px 11px;
border-bottom:1px solid var(--border);
color:#93a7c2;
font-size:10px
}

.zip-file:last-child{
border:0
}

.warning-box{
display:flex;
gap:10px;
margin:15px 0;
padding:12px;
border:1px solid rgba(255,190,72,.17);
border-radius:12px;
background:rgba(255,181,50,.055)
}

.warning-box>span{
width:22px;
height:22px;
flex-shrink:0;
display:grid;
place-items:center;
border-radius:7px;
color:#ffd071;
background:rgba(255,185,60,.1);
font-weight:800
}

.warning-box p{
margin:2px 0;
color:#9a9a8e;
font-size:10px;
line-height:1.5
}

.danger-icon{
width:46px;
height:46px;
display:grid;
place-items:center;
margin-bottom:14px;
border-radius:14px;
color:#ff7184;
background:rgba(255,66,90,.1);
font-size:22px
}

.delete-preview{
height:145px;
margin:15px 0 11px
}

.delete-confirmation{
margin-top:13px;
padding:10px;
border-radius:10px;
color:#ff9baa;
background:rgba(255,68,91,.07);
font-size:11px
}

.modal-actions{
display:flex;
gap:9px;
margin-top:15px
}

.modal-actions button{
flex:1;
height:42px;
border-radius:10px;
font-weight:750
}

.secondary-btn{
border:1px solid var(--border);
color:#8ea2bd;
background:rgba(255,255,255,.04)
}

.danger-btn{
border:0;
color:white;
background:#bd334c
}

.toast{
position:fixed;
right:20px;
bottom:20px;
z-index:500;
max-width:340px;
padding:13px 16px;
border:1px solid var(--border2);
border-radius:12px;
background:#0c1d37;
color:#dceaff;
box-shadow:var(--shadow);
font-size:12px;
transform:translateY(20px);
opacity:0;
pointer-events:none;
transition:.25s
}

.toast.show{
transform:none;
opacity:1
}

.toast.error{
border-color:rgba(255,75,98,.35)
}

@keyframes cardIn{
from{
opacity:0;
transform:translateY(10px)
}
to{
opacity:1;
transform:none
}
}

@media(max-width:900px){

.topbar{
align-items:flex-start;
flex-direction:column
}

.actions{
width:100%;
flex-wrap:wrap
}

.search-wrap{
flex:1;
min-width:180px
}

}

@media(max-width:600px){

.content{
width:calc(100% - 24px);
padding-top:25px
}

.topbar{
padding:14px 13px
}

.actions{
gap:7px
}

.btn{
flex:1;
padding:0 9px;
font-size:10px
}

.wallpaper-grid{
grid-template-columns:1fr
}

.modal{
padding:22px
}

}