.office-hostname-settings { margin:14px 0; padding:14px; border:1px solid #64748b55; border-radius:10px; background:rgba(100,116,139,.05); }
.office-hostname-settings h4 { margin:0 0 12px; }
.office-hostname-fields { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px; }
.office-hostname-fields label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; }
.office-hostname-fields input,.office-hostname-fields select { min-width:0; width:100%; box-sizing:border-box; border:1px solid #64748b88; border-radius:7px; padding:9px 10px; background:var(--surface,#fff); color:inherit; font-size:13px; }
.office-hostname-fields input:focus,.office-hostname-fields select:focus { outline:2px solid #0e7490; outline-offset:1px; }
.office-hostname-dns { display:flex; gap:8px; align-items:center; margin-top:12px; font-size:12px; }
.office-hostname-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
.office-hostname-actions span { font-size:12px; opacity:.85; }
.office-hostname-preview { display:grid; gap:7px; margin-top:12px; padding:12px; border-radius:7px; background:rgba(14,116,144,.08); }
.office-hostname-preview strong { font-size:12px; }
.office-hostname-preview code { overflow-wrap:anywhere; line-height:1.5; }
.dark .office-hostname-fields input,.dark .office-hostname-fields select { background:#0f172a; color:#e5e7eb; }
@media(max-width:600px) { .office-hostname-fields { grid-template-columns:minmax(0,1fr); } }