/* ===== RESET ===== */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:#f6f7fb;
color:#1e293b;
}

/* ===== WRAPPER ===== */

.wrap{
max-width:900px;
margin:auto;
padding:30px 20px;
}

/* ===== CARD ===== */

.card{
background:#fff;
border-radius:12px;
padding:22px;
box-shadow:0 2px 10px rgba(0,0,0,.05);
margin-bottom:20px;
}

.brand{
font-size:22px;
font-weight:700;
margin-bottom:8px;
}

.sub{
color:#64748b;
font-size:14px;
margin-bottom:18px;
}

/* ===== FORM ===== */

.stack{
display:flex;
flex-direction:column;
gap:14px;
}

label{
font-size:14px;
font-weight:600;
}

.input{
width:100%;
padding:10px 12px;
border-radius:8px;
border:1px solid #d1d5db;
font-size:14px;
}

textarea{
width:100%;
padding:10px 12px;
border-radius:8px;
border:1px solid #d1d5db;
font-size:14px;
resize:vertical;
}

/* ===== BUTTONS ===== */

.btn{
display:inline-block;
padding:10px 16px;
border-radius:8px;
border:none;
font-weight:600;
cursor:pointer;
font-size:14px;
}

.btn.primary{
background:#2563eb;
color:#fff;
}

.btn.primary:hover{
background:#1d4ed8;
}

.btn.warn{
background:#f59e0b;
color:#fff;
}

.btn.danger{
background:#ef4444;
color:#fff;
}

/* ===== ALERTS ===== */

.alert{
padding:12px;
border-radius:8px;
font-size:14px;
margin-bottom:15px;
}

.alert.ok{
background:#e8f7ee;
color:#0f5132;
}

.alert.err{
background:#fdecea;
color:#842029;
}

/* ===== MOBILE ===== */

@media (max-width:700px){

.wrap{
padding:20px 14px;
}

.card{
padding:18px;
}

.brand{
font-size:20px;
}

}




*{box-sizing:border-box}
body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:#f6f7fb;
color:#1e293b;
}
.wrap{
max-width:960px;
margin:auto;
padding:30px 20px;
}
.card{
background:#fff;
border-radius:14px;
padding:22px;
box-shadow:0 2px 10px rgba(0,0,0,.05);
margin-bottom:20px;
}
.brand{
font-size:22px;
font-weight:700;
margin-bottom:8px;
}
.sub,.small{
color:#64748b;
font-size:14px;
margin-bottom:14px;
}
.stack{
display:flex;
flex-direction:column;
gap:14px;
}
label{
font-size:14px;
font-weight:600;
}
.input,select,textarea{
width:100%;
padding:10px 12px;
border-radius:8px;
border:1px solid #d1d5db;
font-size:14px;
background:#fff;
}
textarea{resize:vertical}
.btn{
display:inline-block;
padding:10px 16px;
border-radius:8px;
border:none;
font-weight:600;
cursor:pointer;
font-size:14px;
text-decoration:none;
}
.btn.primary{background:#2563eb;color:#fff}
.btn.primary:hover{background:#1d4ed8}
.btn.warn{background:#f59e0b;color:#fff}
.btn.danger{background:#ef4444;color:#fff}
.btn.soft{background:#e5e7eb;color:#111827}
.alert{
padding:12px;
border-radius:8px;
font-size:14px;
margin-bottom:15px;
}
.alert.ok{background:#e8f7ee;color:#0f5132}
.alert.err{background:#fdecea;color:#842029}
.alert.warn{background:#fff7ed;color:#9a3412;border:1px solid #fdba74}
.meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:12px;
}
.ticket-box{
border:1px solid #e5e7eb;
border-radius:12px;
padding:14px;
margin-top:12px;
background:#fafafa;
}
.reply{
border-top:1px solid #e5e7eb;
padding-top:12px;
margin-top:12px;
}
.reply:first-child{
border-top:none;
padding-top:0;
margin-top:0;
}
.kv{
margin:6px 0;
}
@media (max-width:700px){
.wrap{padding:20px 14px}
.card{padding:18px}
.brand{font-size:20px}
.meta{grid-template-columns:1fr}
}