:root {
            --macos-bg: #1c1c1e;
            --macos-surface: #2c2c2e;
            --macos-surface-secondary: #3a3a3c;
            --macos-surface-tertiary: #48484a;
            --macos-text-primary: #ffffff;
            --macos-text-secondary: #ebebf5;
            --macos-text-tertiary: #ebebf599;
            --macos-blue: #0a84ff;
            --macos-blue-hover: #409cff;
            --macos-green: #30d158;
            --macos-green-hover: #63e884;
            --macos-red: #ff453a;
            --macos-red-hover: #ff6961;
            --macos-orange: #ff9f0a;
            --macos-border: #38383a;
            --macos-shadow: rgba(0, 0, 0, 0.3);
            --macos-glow: rgba(255, 255, 255, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
            background: var(--macos-bg);
            color: var(--macos-text-primary);
            height: 100vh;
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .macos-app {
            display: grid;
            grid-template-rows: auto 1fr;
            height: 100vh;
        }

        /* Header */
        .macos-header {
            background: var(--macos-surface);
            border-bottom: 1px solid var(--macos-border);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .traffic-lights {
            display: flex;
            gap: 8px;
        }

        .traffic-light {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 0.5px solid rgba(255, 255, 255, 0.1);
        }

        .traffic-light.red { background: #ff5f57; }
        .traffic-light.yellow { background: #ffbd2e; }
        .traffic-light.green { background: #28ca42; }

        .app-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--macos-text-primary);
        }

        .connection-status {
            padding: 0.5rem 1rem;
            border-radius: 16px;
            font-weight: 500;
            font-size: 0.75rem;
            background: var(--macos-surface-secondary);
            border: 1px solid var(--macos-border);
            transition: all 0.2s ease;
        }

        .connection-status.connected {
            background: rgba(48, 209, 88, 0.2);
            color: var(--macos-green);
            border-color: var(--macos-green);
        }

        .connection-status.disconnected {
            background: rgba(255, 69, 58, 0.2);
            color: var(--macos-red);
            border-color: var(--macos-red);
        }

        /* Main Layout */
        .macos-main {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 1fr;
            gap: 1px;
            height: 100%;
            background: var(--macos-border);
        }

        .panel {
            background: var(--macos-surface);
            padding: 1.5rem;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .panel-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--macos-text-primary);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--macos-border);
        }

        /* Target Player Panel */
        .target-panel {
            grid-column: 1 / -1;
        }

        .target-content {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }

        .input-group {
            flex: 1;
            display: flex;
            gap: 0.75rem;
        }

        .macos-input {
            flex: 1;
            padding: 0.75rem 1rem;
            background: var(--macos-surface-secondary);
            border: 1px solid var(--macos-border);
            border-radius: 8px;
            color: var(--macos-text-primary);
            font-size: 0.875rem;
            font-family: inherit;
            transition: all 0.2s ease;
        }

        .macos-input:focus {
            outline: none;
            border-color: var(--macos-blue);
            box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
        }

        .macos-input::placeholder {
            color: var(--macos-text-tertiary);
        }

        .macos-btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            font-size: 0.875rem;
            font-family: inherit;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .macos-btn:active {
            transform: scale(0.98);
        }

        .btn-primary {
            background: var(--macos-blue);
            color: white;
        }

        .btn-primary:hover {
            background: var(--macos-blue-hover);
        }

        .btn-success {
            background: var(--macos-green);
            color: white;
        }

        .btn-success:hover {
            background: var(--macos-green-hover);
        }

        .btn-danger {
            background: var(--macos-red);
            color: white;
        }

        .btn-danger:hover {
            background: var(--macos-red-hover);
        }

        .status-display {
            min-width: 200px;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-weight: 500;
            text-align: center;
            font-size: 0.875rem;
            background: var(--macos-surface-secondary);
            border: 1px solid var(--macos-border);
            color: var(--macos-text-tertiary);
        }

        .status-display.whitelisted {
            background: rgba(48, 209, 88, 0.2);
            color: var(--macos-green);
            border-color: var(--macos-green);
        }

        .status-display.not-whitelisted {
            background: rgba(255, 69, 58, 0.2);
            color: var(--macos-red);
            border-color: var(--macos-red);
        }

        .warning-banner {
            background: rgba(255, 159, 10, 0.2);
            color: var(--macos-orange);
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            border: 1px solid var(--macos-orange);
            margin-top: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease;
        }

        .warning-banner.hidden {
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
            margin-top: 0;
            padding: 0;
            height: 0;
            overflow: hidden;
            border: none;
        }

        .warning-text {
            flex: 1;
        }

        .close-btn {
            background: none;
            border: none;
            color: var(--macos-orange);
            cursor: pointer;
            padding: 0.25rem;
            border-radius: 4px;
            font-size: 1rem;
            line-height: 1;
            transition: all 0.2s ease;
            margin-left: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
        }

        .close-btn:hover {
            background: rgba(255, 159, 10, 0.3);
        }

        .close-btn:active {
            transform: scale(0.95);
        }

        /* Code Editor Panel */
        .editor-panel {
            display: flex;
            flex-direction: column;
        }

        .editor-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .macos-textarea {
            flex: 1;
            background: var(--macos-bg);
            color: var(--macos-text-primary);
            border: 1px solid var(--macos-border);
            border-radius: 8px;
            padding: 1rem;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
            font-size: 0.875rem;
            line-height: 1.5;
            resize: none;
            min-height: 200px;
        }

        .macos-textarea:focus {
            outline: none;
            border-color: var(--macos-blue);
            box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
        }

        .editor-controls {
            display: flex;
            gap: 0.75rem;
        }

        .editor-controls .macos-btn {
            flex: 1;
        }

        /* Log Panel */
        .log-panel {
            display: flex;
            flex-direction: column;
        }

        .log-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .log-output {
            flex: 1;
            background: var(--macos-bg);
            border: 1px solid var(--macos-border);
            border-radius: 8px;
            padding: 1rem;
            overflow-y: auto;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
            font-size: 0.8rem;
            line-height: 1.4;
            min-height: 200px;
        }

        .log-output:empty::before {
            content: 'No logs yet...';
            color: var(--macos-text-tertiary);
            font-style: italic;
        }

        .log-entry {
            margin-bottom: 0.5rem;
            padding: 0.25rem 0;
            color: var(--macos-text-secondary);
        }

        .log-entry.error {
            color: var(--macos-red);
        }

        .log-controls {
            margin-top: 1rem;
            display: flex;
            gap: 0.75rem;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--macos-surface-tertiary);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--macos-border);
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .macos-main {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto 1fr;
            }
            
            .target-content {
                flex-direction: column;
            }
            
            .input-group {
                flex-direction: column;
            }
            
            .status-display {
                min-width: auto;
            }
        }

        @media (max-width: 768px) {
            .macos-header {
                padding: 1rem;
            }
            
            .panel {
                padding: 1rem;
            }
            
            .editor-controls {
                flex-direction: column;
            }
            
            .log-controls {
                flex-direction: column;
            }
        }