.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;max-width:1200px;flex:1;width:100%}.layout-controls{display:flex;gap:5px;align-items:center}.layout-btn{background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;font-size:16px;width:36px;height:36px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.layout-btn:hover{background:#ffffff4d;transform:scale(1.05)}.layout-btn.active{background:#fff6;border-color:#fff9}.main-content{display:flex;flex-direction:row;height:calc(100vh - 100px);margin:0;overflow:hidden}.map-section{display:flex;flex-direction:column;min-width:200px;min-height:200px;position:relative;flex:1;max-width:calc(100% - 400px)}.map-section.hidden{display:none}.grid-section{display:flex;flex-direction:column;min-width:300px;min-height:200px;background:#fff;flex:0 0 400px;width:400px}.grid-section.hidden{display:none}.splitter{background:#e0e0e0;cursor:col-resize;position:relative;flex-shrink:0;transition:background-color .3s ease;width:6px}.splitter:hover{background:#667eea}.splitter.hidden{display:none}.splitter-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#999;border-radius:3px;transition:background-color .3s ease;width:3px;height:40px}.splitter:hover .splitter-handle{background:#fff}.main-content.map-only .map-section{flex:1;max-width:none}.main-content.grid-only .grid-section{flex:1;width:auto;max-width:none}.map{flex:1;min-height:300px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #0000001a;margin:20px}.grid-section .data-grid-controls{margin:10px 20px 0;padding:15px;border-radius:8px 8px 0 0}.grid-section .data-grid-container{flex:1;margin:0 20px;border-radius:0;overflow:hidden}.grid-section .pagination-container{margin:0 20px 10px;padding:10px 15px;border-radius:0 0 8px 8px}.legend{background:#fff;border-radius:8px;padding:16px;margin:20px;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;flex-wrap:wrap;gap:20px}.legend h3{margin:0 10px 0 0;font-size:16px;font-weight:600;color:#333}.legend-item{display:flex;align-items:center}.legend-color{width:18px;height:18px;border:1px solid #ddd;margin-right:8px;border-radius:3px}.legend-item span{font-size:13px;color:#555}.precinct-panel{display:flex;flex-direction:column;background:#fff;border-right:1px solid #eee;flex:0 0 400px;width:400px;min-width:300px;max-width:500px;overflow:hidden}.precinct-panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#f8f9fa;border-bottom:1px solid #eee}.precinct-panel-title-section{display:flex;align-items:center;gap:12px}.precinct-panel-header h3{margin:0;font-size:18px;color:#333;min-width:120px;text-align:center}.precinct-nav-btn{background:#667eea;color:#fff;border:none;width:32px;height:32px;border-radius:6px;font-size:16px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-weight:700}.precinct-nav-btn:hover{background:#5a67d8;transform:scale(1.05)}.precinct-nav-btn:active{transform:scale(.95)}.precinct-panel-close{background:none;border:none;font-size:24px;cursor:pointer;color:#666;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.precinct-panel-close:hover{background:#e9ecef}.precinct-detail-button{background:#667eea;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:background .3s ease}.precinct-detail-button:hover{background:#5a67d8}.precinct-panel-content{padding:20px;flex:1;overflow-y:auto}.left-splitter{order:2}.dark-mode .legend{background:#2d3748;color:#e0e0e0}.dark-mode .legend h3{color:#e0e0e0}.dark-mode .legend-item span{color:#b0b0b0}.dark-mode .grid-section{background:#2d3748}.dark-mode .splitter{background:#4a5568}.dark-mode .splitter:hover{background:#667eea}.dark-mode .splitter-handle{background:#718096}.dark-mode .layout-btn{background:#0000004d;border-color:#fff3}.dark-mode .layout-btn:hover{background:#0006;border-color:#ffffff4d}.dark-mode .layout-btn.active{background:#667eea4d;border-color:#667eea80}.dark-mode .precinct-panel{background:#2d3748;color:#e0e0e0;border-right:1px solid #4a5568}.dark-mode .precinct-panel-header{background:#1a202c;border-bottom:1px solid #4a5568}.dark-mode .precinct-panel-header h3{color:#e0e0e0}.dark-mode .precinct-panel-close{color:#b0b0b0}.dark-mode .precinct-panel-close:hover{background:#4a5568}.dark-mode .precinct-detail-button{background:#4c51bf}.dark-mode .precinct-detail-button:hover{background:#553c9a}.dark-mode .precinct-nav-btn{background:#4c51bf}.dark-mode .precinct-nav-btn:hover{background:#553c9a}@media (max-width: 768px){.controls{grid-template-columns:1fr;gap:10px}.map{height:50vh;min-height:300px;margin:10px;width:calc(100% - 20px)}.legend{margin:10px;flex-direction:column;align-items:flex-start;gap:10px}.legend h3{margin-bottom:10px}.data-table-section{margin:10px;overflow-x:auto}.precinct-panel{flex:0 0 300px;width:300px;min-width:250px}.precinct-panel-title-section{gap:8px}.precinct-nav-btn{width:28px;height:28px;font-size:14px}.precinct-panel-header h3{font-size:16px;min-width:100px}}@media (max-width: 480px){.legend{gap:8px}.legend-item{margin-bottom:4px}}