*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#071007;color:#fff}a{color:#39ff14;text-decoration:none}
.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#071008,#0f2612)}
.card{background:#111;padding:25px;border-radius:18px;width:390px;box-shadow:0 0 25px rgba(57,255,20,.22)}
input,select,textarea,button{font-family:inherit}.card input,.card button,.card select,textarea{width:100%;margin:8px 0;padding:13px;border-radius:10px;border:0}
input,select,textarea{background:#222;color:#fff}button{background:#39ff14;color:#000;font-weight:bold;cursor:pointer;border:0;border-radius:10px;padding:10px}.danger{background:#ff4d4d!important;color:#fff!important}
.error{color:#ff7777}.app{display:flex;min-height:100vh}.sidebar{width:340px;background:#101810;border-right:1px solid #203020;padding:15px;overflow:auto}
.me{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:15px}.nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.nav a{background:#162016;padding:8px 10px;border-radius:10px}
.add{display:flex;gap:8px;margin-bottom:15px}.add input{flex:1;padding:10px;border-radius:10px;border:0;background:#222;color:#fff}
.contact,.item{display:block;padding:14px;border-radius:14px;background:#162016;margin-bottom:10px;color:#fff}.contact small,.item small{display:block;color:#aaa;margin-top:5px}
.main,.welcome{flex:1;padding:20px}.welcome{display:flex;align-items:center;justify-content:center;flex-direction:column}
.chat-page{height:100vh;display:flex;flex-direction:column}.chat-header{min-height:65px;background:#111b11;display:flex;align-items:center;gap:15px;padding:10px 15px;border-bottom:1px solid #203020}.chat-header small{display:block;color:#aaa}
.messages{flex:1;overflow:auto;padding:15px;background:#071007}.msg{max-width:75%;padding:10px 13px;margin:8px 0;border-radius:14px}.mine{margin-left:auto;background:#39ff14;color:#000}.theirs{background:#1d271d;color:#fff}.msg p{margin:0 0 6px 0}.meta{font-size:11px;opacity:.7;margin-top:5px}.actions{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}.actions button{font-size:11px;padding:4px 7px;background:rgba(255,255,255,.2);color:inherit}
.chat-form{display:flex;gap:8px;padding:10px;background:#111b11;align-items:center;flex-wrap:wrap}.chat-form input[type=text]{flex:1;min-width:220px;padding:12px;border-radius:20px;border:0;background:#222;color:#fff}.chat-form select{background:#222;color:#fff;border:0;border-radius:8px;padding:8px}.chat-img{max-width:240px;border-radius:12px;display:block;margin-top:5px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.panel{background:#111b11;border:1px solid #203020;border-radius:16px;padding:15px}.badge{background:#39ff14;color:#000;padding:3px 8px;border-radius:12px;font-size:12px}
table{width:100%;border-collapse:collapse;background:#111b11;border-radius:12px;overflow:hidden}td,th{padding:10px;border-bottom:1px solid #203020;text-align:left}
@media(max-width:760px){.app{display:block}.sidebar{width:100%;height:auto}.welcome{display:none}.msg{max-width:92%}.chat-form input[type=text]{width:100%;flex:auto}}
/* Jner Avatar UI Update */
.me-profile{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}
.avatar,
.contact-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    background:#223322;
    border:2px solid #39ff14;
    flex-shrink:0;
}
.avatar-lg{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #39ff14;
    background:#223322;
    display:block;
    margin-bottom:12px;
}
.contact{
    display:flex!important;
    align-items:center;
    gap:10px;
}
.contact-info{
    min-width:0;
}
.contact-info strong,
.contact-info small{
    display:block;
}
.profile-mini-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
}
.profile-mini-actions a{
    background:#162016;
    padding:7px 10px;
    border-radius:10px;
}