body{
background:#0f172a;
font-family:Inter,Arial,sans-serif;
}

.qd-mobile-app{
max-width:900px;
margin:auto;
padding:90px 14px 40px;
}

.qd-header{
position:fixed;
top:0;
left:0;
right:0;
height:72px;
background:rgba(15,23,42,.96);
backdrop-filter:blur(12px);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
z-index:999;
border-bottom:1px solid rgba(255,255,255,.06);
}

.qd-logo{
font-size:32px;
font-weight:800;
color:#ff9f6e;
}

.qd-dark-btn{
width:46px;
height:46px;
border-radius:50%;
background:#1e293b;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:20px;
color:#fff;
}

.qd-card{
background:#f8fafc;
border-radius:34px;
padding:20px;
margin-bottom:22px;
box-shadow:0 12px 35px rgba(0,0,0,.18);
animation:fadeIn .35s ease;
}

.qd-card-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
}

.qd-title{
font-size:32px;
font-weight:800;
color:#334155;
}

.qd-date{
margin-top:8px;
color:#64748b;
font-size:14px;
}

.qd-badge{
background:#22c55e;
color:#fff;
padding:8px 14px;
border-radius:100px;
font-size:12px;
font-weight:700;
}

.qd-desc{
margin-top:16px;
line-height:1.6;
color:#475569;
}

.qd-location{
margin-top:16px;
font-weight:700;
color:#2563eb;
}

.qd-map{
width:100%;
height:180px;
border:none;
border-radius:24px;
margin-top:14px;
}

.qd-bottom-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:16px;
gap:10px;
}

.qd-online{
background:#e2e8f0;
padding:10px 14px;
border-radius:16px;
font-weight:700;
color:#334155;
}

.qd-share{
background:#22c55e;
color:#fff!important;
padding:12px 18px;
border-radius:18px;
text-decoration:none;
font-weight:700;
}

.qd-join-form,
.qd-chat-form{
display:flex;
gap:10px;
margin-top:16px;
}

.qd-join-form input,
.qd-chat-form input,
.qd-admin-form input,
.qd-admin-form textarea{
flex:1;
border:none;
background:#e2e8f0;
padding:16px;
border-radius:18px;
font-size:16px;
}

.qd-join-form button,
.qd-chat-form button,
.qd-create-btn,
.qd-float-admin{
border:none;
background:#111827;
color:#fff;
padding:16px 22px;
border-radius:18px;
font-weight:700;
cursor:pointer;
}

.qd-chat-box{
margin-top:20px;
background:#dbeafe;
border-radius:28px;
padding:16px;
}

.qd-chat-head{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
margin-bottom:14px;
color:#1e293b;
}

.qd-chat-online{
width:12px;
height:12px;
background:#22c55e;
border-radius:50%;
box-shadow:0 0 12px #22c55e;
}

.qd-chat-messages{
max-height:320px;
overflow:auto;
padding-right:6px;
scroll-behavior:smooth;
}

.qd-msg-row{
display:flex;
gap:10px;
margin-bottom:14px;
align-items:flex-start;
}

.qd-msg-avatar{
width:42px;
height:42px;
border-radius:50%;
background:#2563eb;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
flex-shrink:0;
}

.qd-msg-bubble{
background:#fff;
padding:14px;
border-radius:18px;
box-shadow:0 4px 10px rgba(0,0,0,.05);
max-width:80%;
}

.qd-msg-name{
font-weight:800;
margin-bottom:6px;
color:#2563eb;
}

.qd-lock{
margin-top:20px;
padding:18px;
border-radius:20px;
background:#e2e8f0;
text-align:center;
font-weight:700;
}

.qd-loader{
width:34px;
height:34px;
border:4px solid #cbd5e1;
border-top:4px solid #2563eb;
border-radius:50%;
animation:spin 1s linear infinite;
margin:auto;
}

.qd-admin-app{
padding:20px;
}

.qd-admin-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.qd-popup{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
z-index:9999;
align-items:center;
justify-content:center;
padding:20px;
}

.qd-popup-content{
background:#fff;
width:100%;
max-width:540px;
padding:24px;
border-radius:30px;
}

.qd-popup-title{
font-size:28px;
font-weight:800;
margin-bottom:18px;
}

.qd-admin-form{
display:flex;
flex-direction:column;
gap:14px;
}

@keyframes spin{
100%{transform:rotate(360deg)}
}

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

@media(max-width:768px){

.qd-title{
font-size:26px;
}

.qd-bottom-row,
.qd-join-form,
.qd-chat-form{
flex-direction:column;
}

.qd-share,
.qd-join-form button,
.qd-chat-form button{
width:100%;
text-align:center;
}

.qd-popup-content{
padding:18px;
border-radius:24px;
}

}