:host {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #ccc;
    background: #1e1e1e;
}

.panel-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    overflow-y: auto;
    box-sizing: border-box;
}

.section {
    margin-bottom: 16px;
    background: #2a2a2a;
    border-radius: 6px;
    padding: 14px;
    border: 1px solid #3a3a3a;
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.on  { background: #4caf50; box-shadow: 0 0 6px #4caf5088; }
.status-dot.off { background: #666; }

.status-text {
    font-size: 12px;
    color: #aaa;
}

.status-text strong {
    color: #ddd;
}

.btn-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn {
    padding: 6px 16px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #333;
    color: #ddd;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn:hover {
    background: #444;
}

.btn.primary {
    background: #0e639c;
    border-color: #1177bb;
    color: #fff;
}

.btn.primary:hover {
    background: #1177bb;
}

.btn.danger {
    background: #8b2020;
    border-color: #a33;
    color: #fff;
}

.btn.danger:hover {
    background: #a33;
}

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

.input-row label {
    font-size: 12px;
    color: #aaa;
    min-width: 50px;
}

.input-row input {
    flex: 1;
    padding: 4px 8px;
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 3px;
    color: #ddd;
    font-size: 12px;
}

.handler-list {
    max-height: 300px;
    overflow-y: auto;
}

.handler-group {
    margin-bottom: 10px;
}

.handler-group-title {
    font-size: 12px;
    font-weight: 600;
    color: #90caf9;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid #333;
}

.handler-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 11px;
}

.handler-item input[type="checkbox"] {
    accent-color: #0e639c;
}

.handler-name {
    color: #ddd;
    font-family: monospace;
}

.handler-summary {
    color: #888;
    font-size: 10px;
    margin-left: auto;
}

.mcp-config {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px;
    font-family: monospace;
    font-size: 11px;
    color: #ce9178;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 120px;
    overflow-y: auto;
}

.copy-hint {
    font-size: 10px;
    color: #666;
    margin-top: 4px;
}

.port-hint {
    font-size: 10px;
    min-height: 14px;
    padding: 2px 0;
}

.port-hint.ok {
    color: #4caf50;
}

.port-hint.error {
    color: #f44336;
}

.config-status {
    font-size: 11px;
    padding: 4px 0;
    min-height: 18px;
}

.config-status.ok {
    color: #4caf50;
}

.config-status.missing {
    color: #999;
}

.config-status.error {
    color: #f44336;
}

.license-status-bar { font-size:13px; padding:8px 12px; border-radius:4px; margin-bottom:8px; }
.license-status-bar.trial { background:#1a3a2e; color:#81c784; border:1px solid #2e7d32; }
.license-status-bar.active { background:#1a2e3a; color:#64b5f6; border:1px solid #1565c0; }
.license-status-bar.expired { background:#3a1a1a; color:#e57373; border:1px solid #c62828; }
.license-status-bar.error { background:#3a2e1a; color:#ffb74d; border:1px solid #e65100; }
.license-hint { font-size:11px; min-height:14px; padding:2px 0; color:#888; }
.license-hint.ok { color:#4caf50; }
.license-hint.error { color:#f44336; }

.footer { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 14px; font-size:11px; color:#999; border-top:1px solid #444; margin-top:12px; background:#252525; border-radius:0 0 6px 6px; }
.footer-warning { color:#e57373; font-weight:600; font-size:11px; }

.gate-overlay { display:flex; align-items:center; justify-content:center; position:absolute; inset:0; background:#1a1a1a; z-index:100; }
.gate-content { display:flex; flex-direction:column; align-items:center; max-width:420px; width:90%; padding:40px 32px; }
.gate-logo { font-size:28px; font-weight:700; color:#e0e0e0; letter-spacing:1px; margin-bottom:6px; }
.gate-subtitle { font-size:12px; color:#888; margin-bottom:24px; }
.gate-divider { width:60px; height:2px; background:#0e639c; border-radius:1px; margin-bottom:28px; }
.gate-input-group { display:flex; width:100%; gap:8px; margin-bottom:8px; }
.gate-input-group input { flex:1; padding:10px 14px; background:#2a2a2a; border:1px solid #444; border-radius:4px; color:#ddd; font-size:14px; font-family:monospace; outline:none; }
.gate-input-group input:focus { border-color:#0e639c; }
.gate-btn { padding:10px 24px !important; font-size:14px !important; }
.gate-msg { width:100%; min-height:20px; font-size:12px; color:#888; text-align:center; margin-bottom:16px; }
.gate-msg.ok { color:#4caf50; }
.gate-msg.error { color:#f44336; }
.gate-or { font-size:12px; color:#555; margin-bottom:16px; }
.gate-trial-btn { padding:10px 40px !important; font-size:14px !important; background:#2e7d32 !important; border-color:#388e3c !important; color:#fff !important; border-radius:6px !important; }
.gate-trial-btn:hover { background:#388e3c !important; }
.gate-trial-btn:disabled { background:#555 !important; border-color:#666 !important; cursor:not-allowed; }
.gate-trial-note { font-size:11px; color:#666; margin-top:8px; margin-bottom:32px; }
.gate-footer { font-size:10px; color:#555; }
