* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #cesiumContainer { width: 100%; height: 100%; overflow: hidden; }

#searchPanel {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
    background: rgba(30, 30, 40, 0.92);
    color: #e0e0e0;
    padding: 16px;
    border-radius: 8px;
    width: 320px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    backdrop-filter: blur(8px);
    max-height: calc(100vh - 20px);
    overflow-y: auto;
}

#searchPanel h2 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #fff;
}

.search-box {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.search-box input {
    flex: 1;
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a35;
    color: #fff;
    font-size: 13px;
}

.search-box button {
    padding: 8px 14px;
    border: none;
    border-radius: 4px;
    background: #4a90d9;
    color: white;
    cursor: pointer;
    font-weight: 600;
}
.search-box button:hover { background: #5aa0e9; }

#searchStatus {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 10px;
    min-height: 16px;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

.controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.controls input[type="range"] {
    flex: 1;
    max-width: 120px;
}

.upload-section {
    margin-top: 12px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

.upload-section h3 {
    font-size: 13px;
    margin-bottom: 6px;
}

.hint {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}

.model-selector {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.model-selector select {
    flex: 1;
    padding: 6px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a35;
    color: #fff;
    font-size: 12px;
}
.model-selector select:disabled { opacity: 0.5; }

.model-selector button {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    background: #4a90d9;
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.model-selector button:hover { background: #5aa0e9; }
.model-selector button:disabled { background: #444; cursor: default; }
#rotateModelBtn { background: #5a6a7a; padding: 6px 8px; font-size: 12px; }
#rotateModelBtn:hover:not(:disabled) { background: #6a7a8a; }

.upload-divider {
    text-align: center;
    font-size: 11px;
    color: #666;
    margin: 8px 0;
    position: relative;
}
.upload-divider::before,
.upload-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: #444;
}
.upload-divider::before { left: 0; }
.upload-divider::after { right: 0; }

#modelUpload {
    width: 100%;
    margin-bottom: 6px;
}

.drop-zone {
    border: 2px dashed #555;
    border-radius: 4px;
    padding: 12px;
    text-align: center;
    color: #888;
    font-size: 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.drop-zone:hover { border-color: #4a90d9; color: #aaa; }
.drop-zone.drag-over { background: rgba(74, 144, 217, 0.15); border-color: #4a90d9; color: #fff; }

#selectedBuilding {
    font-size: 11px;
    color: #aaa;
    padding: 4px;
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

.stats {
    margin-top: 10px;
    font-size: 11px;
    color: #888;
}

#infoBox {
    position: absolute;
    bottom: 40px;
    right: 10px;
    z-index: 100;
    background: rgba(30, 30, 40, 0.92);
    color: #e0e0e0;
    padding: 14px;
    border-radius: 8px;
    width: 260px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    backdrop-filter: blur(8px);
}

.hidden { display: none !important; }

.parcel-info { width: 100%; border-collapse: collapse; margin-top: 6px; }
.parcel-info td { padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.parcel-info td:first-child { color: #999; white-space: nowrap; padding-right: 10px; }

#closeInfo {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
}

#infoContent table {
    width: 100%;
    border-collapse: collapse;
}

#infoContent td {
    padding: 3px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#infoContent td:first-child {
    color: #888;
    width: 80px;
}

/* Custom Building Tool */
.building-tool-section {
    margin-top: 12px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}
.building-tool-section h3 {
    font-size: 13px;
    margin-bottom: 8px;
}

.dimension-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    justify-content: center;
}
.dim-input-box {
    display: flex;
    align-items: center;
    gap: 3px;
}
.dim-input-box label {
    font-size: 11px;
    color: #888;
    font-weight: 600;
}
.dim-input-box input {
    width: 56px;
    padding: 5px 4px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a35;
    color: #fff;
    font-size: 13px;
    text-align: center;
}
.dim-input-box span {
    font-size: 11px;
    color: #888;
}
.dim-x {
    color: #666;
    font-size: 14px;
}
.idle-buttons {
    display: flex;
    gap: 6px;
}
.btn-draw {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: #2a9d8f;
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
.btn-draw:hover { background: #3ab8a8; }
.btn-draw-alt {
    background: #4a6a7a;
    font-size: 12px;
}
.btn-draw-alt:hover { background: #5a7a8a; }

.lot-controls {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lot-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #8cc;
    cursor: pointer;
}
.lot-toggle input[type="checkbox"] {
    accent-color: #2a9d8f;
}
.lot-status {
    font-size: 10px;
    color: #6aa;
}
.lot-hint {
    font-size: 11px;
    color: #6ec6b8;
    margin-top: 4px;
    padding: 4px 6px;
    background: rgba(42, 157, 143, 0.15);
    border-radius: 3px;
    border-left: 2px solid #2a9d8f;
}
.selected-building-bar {
    padding: 6px 8px;
    margin-bottom: 6px;
    background: rgba(52, 152, 219, 0.2);
    border-left: 3px solid #3498db;
    border-radius: 3px;
    font-size: 11px;
    color: #8cc;
}
.selected-building-bar .demolish-link {
    color: #e74c3c;
    cursor: pointer;
    margin-left: 6px;
    text-decoration: underline;
    font-size: 10px;
}
.model-upload-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.model-upload-section .config-group-title {
    margin-bottom: 6px;
}
.model-upload-section .model-selector {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}
.model-upload-section select {
    flex: 1;
    padding: 4px;
    border-radius: 3px;
    border: 1px solid #555;
    background: #2a3a4a;
    color: #ccc;
    font-size: 11px;
}
.model-upload-section .upload-divider {
    text-align: center;
    font-size: 10px;
    color: #667;
    margin: 4px 0;
}
.model-upload-section input[type="file"] {
    width: 100%;
    font-size: 11px;
    margin-bottom: 4px;
}
.model-upload-section .drop-zone {
    border: 1px dashed #555;
    border-radius: 4px;
    padding: 8px;
    text-align: center;
    font-size: 10px;
    color: #667;
}

.drawing-hint {
    font-size: 11px;
    color: #6ec6b8;
    margin-bottom: 8px;
    line-height: 1.5;
    animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.draw-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}
.draw-controls span {
    flex: 1;
    font-size: 12px;
    color: #aaa;
}
.draw-controls button {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background: #4a90d9;
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.draw-controls button:hover:not(:disabled) { background: #5aa0e9; }
.draw-controls button:disabled { background: #444; cursor: default; }
.btn-cancel {
    background: #666 !important;
}
.btn-cancel:hover { background: #777 !important; }

.dimension-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.dimension-box {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    padding: 6px;
    text-align: center;
}
.dimension-box label {
    display: block;
    font-size: 10px;
    color: #888;
    margin-bottom: 2px;
}
.dimension-box span {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
}

.config-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #ccc;
    margin-bottom: 8px;
}
.config-label input[type="range"] {
    flex: 1;
    max-width: 140px;
}
.config-label input[type="color"] {
    width: 32px;
    height: 24px;
    border: 1px solid #555;
    border-radius: 3px;
    background: none;
    cursor: pointer;
    padding: 0;
}

.storey-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #ccc;
}
.storey-btns {
    display: flex;
    gap: 3px;
}
.storey-btn {
    padding: 4px 8px;
    border: 1px solid #555;
    border-radius: 3px;
    background: #2a2a35;
    color: #ccc;
    cursor: pointer;
    font-size: 11px;
    min-width: 28px;
}
.storey-btn:hover { background: #3a3a45; border-color: #777; }
.storey-btn.active {
    background: #2a9d8f;
    border-color: #2a9d8f;
    color: white;
    font-weight: 600;
}

.config-actions {
    display: flex;
    gap: 6px;
}
.btn-create {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: #2a9d8f;
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
.btn-create:hover { background: #3ab8a8; }

#customBuildingList {
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 6px;
}
.custom-building-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.custom-building-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 3px;
    font-size: 11px;
    color: #ccc;
    cursor: pointer;
}
.custom-building-item:hover { background: rgba(255,255,255,0.05); }
.custom-building-item .color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.2);
}
.custom-building-item .item-info { flex: 1; }
.custom-building-item .delete-btn {
    background: rgba(231,76,60,0.15);
    border: 1px solid rgba(231,76,60,0.3);
    border-radius: 3px;
    color: #e74c3c;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 6px;
    font-weight: 600;
}
.custom-building-item .delete-btn:hover { background: rgba(231,76,60,0.3); color: #fff; }

/* Advanced Config Toggle */
.advanced-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    margin: 8px 0;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #bbb;
    user-select: none;
}
.advanced-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.advanced-toggle .toggle-arrow { font-size: 10px; transition: transform 0.2s; }
.advanced-toggle.open .toggle-arrow { transform: rotate(90deg); }

/* Floor & Wall Tabs */
.floor-selector, .wall-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.floor-label, .wall-label {
    font-size: 11px;
    color: #888;
    min-width: 32px;
}
.floor-tabs, .wall-tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.floor-tab, .wall-tab {
    padding: 3px 7px;
    border: 1px solid #555;
    border-radius: 3px;
    background: #2a2a35;
    color: #aaa;
    cursor: pointer;
    font-size: 10px;
    min-width: 24px;
    text-align: center;
}
.floor-tab:hover, .wall-tab:hover { background: #3a3a45; border-color: #777; }
.floor-tab.active, .wall-tab.active {
    background: #4a90d9;
    border-color: #4a90d9;
    color: white;
    font-weight: 600;
}

/* Config Groups */
.config-group {
    margin-bottom: 8px;
    padding: 6px;
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}
.config-group-title {
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.config-group-title label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #999;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.config-group .config-label {
    margin-bottom: 4px;
}

/* Generate button */
.btn-generate {
    flex: 2;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: #e76f51;
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
/* Roof type buttons */
.roof-type-row {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}
.roof-btn {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid #555;
    border-radius: 3px;
    background: #2a2a35;
    color: #ccc;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
}
.roof-btn:hover { background: #3a3a45; border-color: #777; }
.roof-btn.active {
    background: #8B6914;
    border-color: #8B6914;
    color: white;
    font-weight: 600;
}

/* Demolished buildings list */
.demolished-section {
    margin-top: 12px;
    padding: 10px;
    background: rgba(192, 57, 43, 0.15);
    border: 1px solid rgba(192, 57, 43, 0.3);
    border-radius: 4px;
}
.demolished-section h3 {
    font-size: 12px;
    color: #e74c3c;
    margin-bottom: 6px;
}
.demolished-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    font-size: 11px;
    color: #ccc;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.demolished-item .item-info {
    flex: 1;
    text-decoration: line-through;
    opacity: 0.7;
}
.restore-btn {
    background: none;
    border: 1px solid #666;
    border-radius: 3px;
    color: #aaa;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
}
.restore-btn:hover { color: #2ecc71; border-color: #2ecc71; }
.restore-all-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px;
    border: 1px solid #666;
    border-radius: 3px;
    background: none;
    color: #aaa;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
}
.restore-all-btn:hover { color: #2ecc71; border-color: #2ecc71; }

/* Rectangle draw button */
.btn-rect {
    background: #5a6abf;
    font-size: 12px;
}
.btn-rect:hover { background: #6a7acf; }

/* Footprint editing tools (Square, Edit Vertices) */
.footprint-tools {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.btn-tool {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a35;
    color: #ccc;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}
.btn-tool:hover { background: #3a3a45; border-color: #777; color: #fff; }
.btn-tool.active {
    background: #4a90d9;
    border-color: #4a90d9;
    color: white;
}

.btn-generate:hover:not(:disabled) { background: #f4845f; }
.btn-generate:disabled { background: #555; cursor: default; color: #999; }
.btn-create {
    font-size: 11px;
    padding: 8px 6px;
}

/* Template section */
.template-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.template-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-paste {
    padding: 3px 8px;
    border: 1px solid #5a6abf;
    border-radius: 3px;
    background: transparent;
    color: #7a8adf;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
}
.btn-paste:hover:not(:disabled) { background: rgba(90, 106, 191, 0.2); color: #9aa0ef; }
.btn-paste:disabled { border-color: #444; color: #555; cursor: default; }

.template-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.template-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #555;
    border-radius: 12px;
    background: #2a2a35;
    color: #ccc;
    cursor: pointer;
    font-size: 10px;
    transition: background 0.15s, border-color 0.15s;
    max-width: 100%;
}
.template-chip:hover { background: #3a3a45; border-color: #777; color: #fff; }
.template-chip .chip-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.template-chip .chip-delete {
    color: #888;
    font-size: 12px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}
.template-chip .chip-delete:hover { color: #e55; }
.template-chip.builtin { border-style: dashed; }
.template-chip.chip-oversize {
    opacity: 0.55;
    border-color: #664;
    border-style: dotted;
}
.template-chip.chip-oversize:hover {
    opacity: 0.85;
    border-color: #aa8;
}

.manual-fallback-toggle {
    font-size: 10px;
    color: #666;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    margin-top: 4px;
}
.manual-fallback-toggle:hover {
    color: #999;
    text-decoration: underline;
}

/* Paste placement mode */
.paste-placement-hint {
    font-size: 11px;
    color: #9aa0ef;
    margin-top: 6px;
    padding: 4px 6px;
    background: rgba(90, 106, 191, 0.15);
    border-radius: 3px;
    border-left: 2px solid #5a6abf;
}

/* Copy button in info box */
.btn-copy-building {
    padding: 5px 12px;
    border: none;
    border-radius: 4px;
    background: #5a6abf;
    color: white;
    cursor: pointer;
    font-size: 12px;
}
.btn-copy-building:hover { background: #6a7acf; }