.sync-mount { margin: 0 0 24px; }
.sync-panel { padding: 24px; background: linear-gradient(135deg,#fff8f6,#fffaf3 65%,#f5f7ed); border: 1px solid #efd9da; border-radius: 22px; box-shadow: 0 8px 20px #b7878317; display: grid; gap: 14px; color: #623f46; }
.sync-header { display: flex; align-items: center; gap: 12px; }
.sync-header h2 { font: 700 clamp(20px,2.5vw,26px)/1.2 Georgia,serif; margin: 0; color: #683a48; }
.sync-header p { color: #74646a; margin: 6px 0 0; font-size: 13px; }
.sync-emblem { height: 44px; width: 44px; border-radius: 13px; background: #fce3e8; display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; }
.sync-panel > p { margin: 0; line-height: 1.6; font-size: 13px; }
.sync-panel .sync-hint { color: #76666c; font-size: 12px; }
.sync-controls { display: flex; flex-wrap: wrap; gap: 9px; }
.sync-controls .btn { flex: 0 1 auto; }
.sync-room { border: 1px solid #eccbd1; background: #fff; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.sync-room > div { min-width: 0; }
.sync-room small { display: block; color: #89676e; font-size: 11px; margin-bottom: 6px; }
.sync-room code { font-size: 13px; font-family: ui-monospace,monospace; overflow-wrap:anywhere; user-select:all; letter-spacing: .02em; }
.sync-dot { display: inline-block; height: 8px; width: 8px; border-radius: 50%; background: #70977f; margin-right: 5px; }
.sync-dot[data-state="pending"] { background: #d19b4c; }
.sync-dot[data-state="error"],.sync-dot[data-state="conflict"] { background: #ca5a65; }
.sync-dot[data-state="off"] { background: #a9a9a9; }
.sync-conflict { background: #fff1df; border: 1px solid #e8cfac; border-radius: 12px; padding: 14px; }
.sync-conflict p { margin: 9px 0 12px; font-size: 13px; }
#syncDialog .dialog-body { max-width: 510px; }
#syncDialog [hidden] { display: none !important; }
#syncDialog .field-label { display: block; margin-top: 10px; }
#syncDialog .field-input { width: 100%; }
@media(max-width:700px) { .sync-panel { padding: 17px; } .sync-room { flex-direction:column; align-items:flex-start; } .sync-controls .btn { width:100%; flex:auto; } }