body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}
h1 { text-align: center; margin-bottom: 10px; }
#top-bar {
    text-align: center;
    margin-bottom: 20px;
}
#help-btn {
    margin-left: 15px;
    padding: 6px 12px;
    font-size: 16px;
    cursor: pointer;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}
#help-panel {
    display: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 16px;
    margin: 20px auto;
    max-width: 800px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
#site-map-container {
    position: relative;
    text-align: center;
    margin: 0 auto;
    max-width: 1200px;
    border: 2px solid #333;
    background: white;
    padding: 10px;
}
#site-svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.clickable circle {
    fill: rgba(144, 238, 144, 0.4);
    stroke: #4CAF50;
    stroke-width: 1.5;
}
.clickable:hover circle {
    fill: rgba(144, 238, 144, 0.6);
}
.house-label {
    font-size: 32px !important;
    font-weight: bold;
    fill: #000000;
    paint-order: stroke fill;
    stroke: #ffffff;
    stroke-width: 2.5px;
    stroke-linejoin: round;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}
#page-timestamp {
    position: absolute;
    bottom: 8px;
    left: 12px;
    font-size: 11px;
    color: #666;
    font-style: italic;
    pointer-events: none;
}

.modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: none; align-items: center; justify-content: center; z-index: 1000;
}
.modal-content-wrapper {
    background: white; border-radius: 8px; width: 420px; max-width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden;
}
.modal-header {
    background: #f0f0f0; padding: 10px 16px; font-weight: bold;
    text-align: center; position: relative; border-bottom: 1px solid #ccc;
    display: flex; justify-content: space-between; align-items: center;
}
.modal-header-title { flex: 1; }
.font-controls {
    display: flex; gap: 6px; margin-right: 10px;
}
.font-btn {
    background: #ddd; border: none; border-radius: 4px;
    width: 36px; height: 28px; font-size: 18px; line-height: 1;
    cursor: pointer;
}
.font-btn:hover { background: #ccc; }
.modal-close {
    font-size: 28px; cursor: pointer; color: #555;
}
.modal-close:hover { color: #000; }
.modal-body { padding: 16px; }
.modal-row {
    display: flex; margin-bottom: 10px; align-items: baseline;
    font-size: calc(var(--modal-font-scale, 1) * 13px);
}
.modal-row label {
    font-weight: bold; width: 90px; flex-shrink: 0;
}
.modal-row span { flex: 1; white-space: pre-wrap; }
.empty { font-style: italic; color: #888; }

#directory-modal .modal-content-wrapper {
    width: 90%; max-width: 1100px; max-height: 85vh; overflow-y: auto;
}
#directory-modal table {
    width: 100%; border-collapse: collapse; font-size: calc(var(--modal-font-scale, 1) * 13px);
}
#directory-modal th, #directory-modal td {
    padding: 8px; border: 1px solid #ddd; text-align: left;
}
#directory-modal thead th {
    background: #f0f0f0; position: sticky; top: 0; z-index: 1;
}

.copy-btn {
    padding: 7px 14px; border: none; border-radius: 4px; cursor: pointer; color: white;
    font-size: calc(var(--modal-font-scale, 1) * 13px); min-width: 120px;
}
#copy-csv-btn     { background: #4CAF50; }
#copy-resident-btn { background: #2196F3; }
.copy-success     { background: #8BC34A !important; }

#update-info {
    margin-top: 20px; text-align: center; font-style: italic; color: #555;
}