:root{--dark:#151b22;--dark2:#222b34;--line:#d8dde3;--text:#151515;--muted:#6b7280;--bg:#f4f5f6;--ok:#0a8f43;--err:#9b1c1c}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(120deg,#f6f6f6,#eceff2);color:var(--text)}
.top{height:64px;background:linear-gradient(90deg,var(--dark),var(--dark2));color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #000}
.brand{font-size:23px;letter-spacing:2px;font-weight:400}.top nav{display:flex;gap:20px;align-items:center}.top a,.top span{color:#fff;text-decoration:none;font-size:13px;text-transform:uppercase}
.wrap{max-width:1180px;margin:36px auto;padding:0 18px}.card{background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.05);padding:30px}.narrow{max-width:460px;margin:0 auto}.wide{max-width:1000px;margin:0 auto}
h1{margin:0 0 10px;font-size:22px;font-weight:500;letter-spacing:.4px}p{color:var(--muted);font-size:14px}.hint{font-size:13px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;margin:16px 0 6px;font-size:12px;font-weight:700}input,textarea{width:100%;border:1px solid #cfd5dc;background:#fff;padding:12px;font-size:14px;border-radius:0}textarea{resize:vertical}
button,.btn{display:inline-block;background:var(--dark);color:#fff;border:1px solid var(--dark);padding:12px 22px;margin-top:18px;text-decoration:none;font-size:12px;text-transform:uppercase;cursor:pointer;border-radius:0}
.secondary{background:#fff;color:var(--dark)}.small{padding:8px 12px;margin:0;font-size:11px}.inline{display:inline}.hp{position:absolute;left:-9999px;opacity:0}
.msg,.err{border:1px solid var(--line);padding:12px 14px;margin:0 auto 18px;max-width:1000px;background:#fff}.err{border-color:#e3b4b4;color:var(--err)}
table{width:100%;border-collapse:collapse;margin-top:20px;background:#fff}th,td{border:1px solid var(--line);padding:12px;text-align:left;font-size:13px}th{background:#f8f9fa;text-transform:uppercase;font-size:11px}
.headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
footer{text-align:center;color:#68707a;font-size:11px;padding:22px;border-top:1px solid var(--line);background:#f8f9fa;margin-top:40px}
@media(max-width:760px){.top{height:auto;display:block;padding:18px}.top nav{margin-top:14px;flex-wrap:wrap}.grid2{grid-template-columns:1fr}.headrow{display:block}table,thead,tbody,tr,td,th{display:block}thead{display:none}td{border-top:0}}

.form-actions{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:18px;
}
.form-actions button,
.form-actions .btn{
    margin-top:0;
}
.login-register-hint{
    margin-top:14px;
}

.phone-input-wrap{
    display:flex;
    align-items:stretch;
    width:100%;
}
.phone-prefix{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:72px;
    padding:12px 14px;
    border:1px solid #cfd5dc;
    border-right:0;
    background:#f3f4f6;
    font-size:14px;
    color:#111827;
    user-select:none;
}
.phone-input-wrap input{
    flex:1;
}


.phone-prefix{
    display:none !important;
}

.disabled-btn{
    opacity:.55;
    cursor:not-allowed;
    pointer-events:none;
}

.preview-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 18px;
    margin:18px 0 22px;
    padding:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.035);
}

.reply-preview{
    white-space:pre-wrap;
    word-break:break-word;
    min-height:180px;
    padding:18px;
    margin:8px 0 18px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.20);
    font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.actions-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}