body { font-family: system-ui, sans-serif; margin: 0; color: #222; background: #fafafa; }
header { padding: 1rem; background: #e7edf7; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
main { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
input, textarea, select, button { font: inherit; padding: .4rem; max-width: 100%; box-sizing: border-box; }
textarea { width: 100%; font-family: monospace; }
label { display: block; margin: .5rem 0; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { border-bottom: 1px solid #ccc; padding: .6rem; text-align: left; overflow-wrap: anywhere; }
form { margin: .5rem 0; }
header form { margin: 0; }
button { cursor: pointer; }
.validation-summary-errors, .text-danger { color: #a00; }
code, pre { overflow-wrap: anywhere; white-space: pre-wrap; }

.sync-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.sync-card { min-width: 0; padding: 1rem; background: #fff; border: 1px solid #d7dfe9; border-radius: .6rem; box-shadow: 0 2px 5px #00000006; }
.sync-card-wide { grid-column: 1 / -1; }
.sync-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; }
.sync-card h3 { font-size: 1rem; margin: 0; }
.sync-permission { margin: 0; font-size: .9rem; white-space: nowrap; }
.sync-value { font-size: 1.2rem; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.sync-value-on { color: #146337; }
.sync-count { display: inline-block; margin: .75rem 0; padding: .2rem .6rem; border-radius: 1rem; background: #edf2fa; color: #254168; font-size: .9rem; }
.sync-empty, .sync-note { color: #555; }
.sync-note { font-size: .9rem; line-height: 1.6; }
.sync-table-scroll { max-height: 28rem; overflow: auto; border: 1px solid #d7dfe9; border-radius: .3rem; }
.sync-table { margin: 0; table-layout: fixed; }
.sync-table caption { text-align: left; padding: .6rem; font-weight: 600; background: #f4f7fb; }
.sync-table thead th { position: sticky; top: 0; background: #e7edf7; z-index: 1; }
.sync-table tbody tr:nth-child(even) { background: #f7f9fc; }
.sync-table th, .sync-table td { vertical-align: top; line-height: 1.5; }
.sync-table .sync-row-number { width: 3rem; }
.sync-table a { color: #174e9c; text-underline-offset: .15em; }
.sync-url-toggle { margin-left: 1rem; vertical-align: middle; }
.sync-url-label { display: inline; font-size: .9rem; cursor: pointer; }
.sync-link-list .sync-url-column { display: none; }
.sync-url-toggle:checked ~ .sync-table-scroll .sync-url-column { display: table-cell; }
.sync-link-list .sync-table th, .sync-link-list .sync-table td { padding: .3rem .55rem; line-height: 1.35; }
.sync-link-title, .sync-url-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-link-list .sync-table { min-width: 0; }
.sync-profile { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .7rem 1.5rem; }
.sync-profile dt { font-weight: 600; }
.sync-profile dd { margin: 0; overflow-wrap: anywhere; }
.sync-editor { margin-top: 1rem; border-top: 1px solid #e1e6ee; padding-top: .65rem; }
.sync-editor summary { cursor: pointer; color: #34527a; font-size: .9rem; }
.sync-editor textarea { min-height: 4rem; resize: vertical; }
.sync-table-scroll:focus-visible, .sync-editor summary:focus-visible { outline: 3px solid #3468ae; outline-offset: 2px; }
@media (max-width: 650px) {
    .sync-grid { grid-template-columns: minmax(0, 1fr); }
    .sync-card { padding: .75rem; }
    .sync-table { min-width: 460px; }
    .sync-profile { grid-template-columns: 1fr; gap: .3rem; }
    .sync-profile dd { margin-bottom: .65rem; }
}