*{box-sizing:border-box;font-family:'Segoe UI',Roboto,Arial,sans-serif}
body{margin:0;background:radial-gradient(circle at top,#1c2230,#0b0e14);color:#eaeaea}

/* HEADER */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;background:rgba(22,26,34,.9)}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-img{height:40px;filter:drop-shadow(0 0 6px rgba(220,220,220,.5))}
.logo-text{font-size:22px;font-weight:800;letter-spacing:3px}
.logout{color:#ff6b6b;text-decoration:none;font-weight:bold}

/* TABS */
.tabs{display:flex;gap:12px;padding:14px 28px;border-bottom:1px solid rgba(255,255,255,.08)}
.tabs a{padding:10px 18px;border-radius:12px;text-decoration:none;color:#bbb;background:rgba(255,255,255,.04)}
.tabs a.active{background:linear-gradient(135deg,#5a7cff,#7c5cff);color:#fff}
.badge{margin-left:6px;background:#111827;padding:2px 8px;border-radius:10px;font-size:12px}

/* LAYOUT */
.container{padding:40px}

/* DROPZONE */
.dropzone{
    border:2px dashed rgba(255,255,255,.2);
    border-radius:16px;
    padding:25px;
    text-align:center;
    margin-bottom:40px;
    cursor:pointer;
}
.dropzone.hover{background:rgba(90,124,255,.15)}
.dropzone p{margin:0 0 15px;color:#bbb}
.dropzone select,.dropzone button{
    background:#0f1320;color:#ccc;
    border:none;border-radius:8px;padding:10px;margin:0 5px
}

/* UPLOAD STATUS */
.upload-status{
    margin-top:12px;
    font-weight:bold;
}
.upload-status.success{color:#4ade80}
.upload-status.error{color:#f87171}
.upload-status.info{color:#93c5fd}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:30px}
.card{background:rgba(255,255,255,.04);border-radius:18px;padding:15px;display:flex;flex-direction:column}
.card img{height:140px;object-fit:contain;background:#0b0e14;border-radius:12px;padding:12px;margin-bottom:12px}
.card input{background:#0f1320;color:#ccc;border:none;border-radius:6px;padding:6px}
.copy{background:#5a7cff;border:none;border-radius:6px;color:#fff;margin-top:6px}
.del{background:#ff4d4d;border:none;border-radius:6px;color:#fff;margin-top:6px}

/* EMOJI MODE */
.emoji-mode .grid{grid-template-columns:repeat(auto-fill,70px);gap:18px}
.emoji-mode .card{align-items:center}
.emoji-mode .card img{height:48px;width:48px;padding:0;background:none}
.emoji-mode .name,.emoji-mode .rename,.emoji-mode .move-box,.emoji-mode .del{display:none}