body { 
            font-family: sans-serif; 
            background: #121212; 
            color: white;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #00ff00;
            margin-bottom: 20px;
        }
        h2 {
            color: #00ff00;
        }
        .main-area {
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .site-container {
            background: #1a1a1a;
            border: 3px solid #444;
            border-radius: 20px;
            padding: 25px;
            margin: 25px 0;
            position: relative;
            width: auto;
            min-width: 400px;
            max-width: 100%;
            cursor: move;
        }
        .site-container:hover {
            border-color: #00ff00;
        }
        .site-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #555;
        }
        .site-controls {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 8px;
        }
        .site-title {
            color: #00ff00;
            font-size: 24px;
            font-weight: bold;
        }
        .site-location {
            color: #888;
            font-size: 14px;
            margin-top: 5px;
        }
        .groups-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }
        .group-container {
            background: #2a2a2a;
            border: 3px solid #555;
            border-radius: 15px;
            padding: 20px;
            margin: 0;
            min-height: 200px;
            display: inline-block;
            width: auto;
            min-width: 300px;
            max-width: 600px;
            cursor: move;
            position: relative;
        }
        .group-container.dragging {
            opacity: 0.5;
            border-color: #00ff00;
        }
        .group-container:hover {
            border-color: #00ff00;
        }
        .group-container.drag-over {
            border-color: #00ff00;
            background: #3a3a3a;
        }
        .generators-grid.drag-over {
            background: #3a3a3a;
            border: 2px dashed #00ff00;
            border-radius: 5px;
        }
        .gen.drag-over {
            background: #444;
            border-color: #00ff00;
        }
        .group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #444;
        }
        .group-title {
            color: #00ff00;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
        }
        .group-title:hover {
            color: #33ff33;
        }
        .group-controls {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 10px;
        }
        .generators-section {
            margin-bottom: 15px;
            padding: 10px;
            background: #1a1a1a;
            border-radius: 8px;
            border: 1px solid #444;
        }
        .generators-title {
            color: #ffaa00;
            font-weight: bold;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .generators-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            min-height: 40px;
            padding: 5px;
        }
        .gen {
            padding: 4px 8px;
            background: #333;
            cursor: grab;
            border-radius: 4px;
            font-size: 11px;
            border: 1px solid #555;
            color: #fff;
        }
        .gen:hover {
            background: #444;
            border-color: #ffaa00;
        }
        .gen-id {
            font-weight: bold;
        }
        .gen-note {
            font-size: 9px;
            color: #ffaa00;
            margin-top: 2px;
            font-style: italic;
            word-break: break-word;
        }
        .pods-section {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .pod {
            padding: 12px;
            border: 2px solid #888;
            width: 200px;
            min-height: 100px;
            background: #1e1e1e;
            border-radius: 10px;
            cursor: move;
        }
        .pod:hover {
            border-color: #00ff00;
        }
        .pod h4 {
            margin: 0 0 8px 0;
            color: #00ff00;
            font-size: 14px;
        }
        .pod-info {
            font-size: 11px;
            color: #aaa;
            margin: 3px 0;
        }
        .toggle-group {
            margin-top: 8px;
            border-top: 1px solid #444;
            padding-top: 6px;
        }
        .toggle {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 9px;
            margin: 2px 0;
        }
        .toggle input[type="checkbox"] {
            width: 25px;
            height: 12px;
            -webkit-appearance: none;
            appearance: none;
            background-color: #555;
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            outline: none;
        }
        .toggle input[type="checkbox"]:checked {
            background-color: #00ff00;
        }
        .toggle input[type="checkbox"]:before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            background-color: white;
            transition: transform 0.2s;
        }
        .toggle input[type="checkbox"]:checked:before {
            transform: translateX(13px);
        }
        .btn {
            padding: 8px 15px;
            background: #22c55e;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: black;
            font-weight: bold;
            font-size: 12px;
        }
        .btn:hover {
            background: #16a34a;
        }
        .btn-danger {
            background: #dc2626;
            color: white;
        }
        .btn-danger:hover {
            background: #b91c1c;
        }
        .btn-small {
            padding: 4px 8px;
            font-size: 10px;
        }
        .save-btn {
            background: #22c55e;
            color: black;
            font-size: 16px;
            padding: 15px 30px;
            margin: 20px 0;
        }
        .forms-container {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
            margin-top: 30px;
        }
        .form-section {
            flex: 1;
            min-width: 250px;
            background: #1e1e1e;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #444;
        }
        .form-section h3 {
            margin-top: 0;
            color: #00ff00;
        }
        .form-section input, .form-section select {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            background: #333;
            border: 1px solid #555;
            color: white;
            border-radius: 5px;
            font-size: 14px;
        }
        .clearfix {
            clear: both;
        }
        hr {
            border: none;
            border-top: 1px solid #444;
            margin: 30px 0;
        }
        .unassigned-pods {
            background: #1a1a2e;
            border: 2px dashed #666;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            min-height: 100px;
        }
        .unassigned-title {
            color: #ff6b6b;
            font-weight: bold;
            margin-bottom: 15px;
        }
        /* Modal styles now in ngon-modals.css */