@softtechai/quickmcp 1.0.14 → 1.1.0

package/src/web/public/shared-styles.css

@@ -1,2091 +0,0 @@
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-
-    body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-        background: #f8fafc;
-        min-height: 100vh;
-        color: #1a202c;
-        margin: 0;
-        overflow-x: hidden;
-    }
-
-    /* Sidebar Styles */
-    .sidebar {
-        position: fixed;
-        left: 0;
-        top: 0;
-        width: 280px;
-        height: 100vh;
-        background: #1a202c;
-        transform: translateX(-100%);
-        transition: transform 0.3s ease;
-        z-index: 1000;
-        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
-    }
-
-    .sidebar.open {
-        transform: translateX(0);
-    }
-
-    .sidebar-header {
-        padding: 24px;
-        border-bottom: 1px solid #2d3748;
-        display: flex;
-        align-items: center;
-        gap: 12px;
-    }
-
-    .sidebar-logo {
-        width: 40px;
-        height: 40px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-weight: bold;
-        font-size: 18px;
-    }
-
-    .sidebar-title {
-        color: white;
-        font-size: 20px;
-        font-weight: 600;
-    }
-
-    .sidebar-nav {
-        padding: 16px 0;
-    }
-
-    .sidebar-nav-item {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 12px 24px;
-        color: #a0aec0;
-        text-decoration: none;
-        transition: all 0.2s;
-        cursor: pointer;
-        border: none;
-        background: none;
-        width: 100%;
-        text-align: left;
-    }
-
-    .sidebar-nav-item:hover {
-        background: #2d3748;
-        color: white;
-    }
-
-    .sidebar-nav-item.active {
-        background: #667eea;
-        color: white;
-    }
-
-    .sidebar-nav-item .icon {
-        width: 20px;
-        height: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    /* Main Content Styles */
-    .main-layout {
-        display: flex;
-        min-height: 100vh;
-    }
-
-    .main-content {
-        flex: 1;
-        transition: margin-left 0.3s ease;
-        min-height: 100vh;
-    }
-
-    .topbar {
-        background: white;
-        padding: 16px 24px;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        position: sticky;
-        top: 0;
-        z-index: 100;
-    }
-
-    .hamburger {
-        display: flex;
-        flex-direction: column;
-        gap: 3px;
-        padding: 8px;
-        cursor: pointer;
-        border: none;
-        background: none;
-        border-radius: 4px;
-        transition: background 0.2s;
-    }
-
-    .hamburger:hover {
-        background: #f7fafc;
-    }
-
-    .hamburger span {
-        width: 20px;
-        height: 2px;
-        background: #4a5568;
-        transition: all 0.2s;
-    }
-
-    .hamburger.active span:nth-child(1) {
-        transform: rotate(45deg) translate(5px, 5px);
-    }
-
-    .hamburger.active span:nth-child(2) {
-        opacity: 0;
-    }
-
-    .hamburger.active span:nth-child(3) {
-        transform: rotate(-45deg) translate(7px, -6px);
-    }
-
-    .topbar-title {
-        font-size: 24px;
-        font-weight: 600;
-        color: #1a202c;
-    }
-
-    .topbar-subtitle {
-        color: #718096;
-        margin-left: 8px;
-    }
-
-    .container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 24px;
-    }
-
-    .sidebar-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 999;
-        opacity: 0;
-        visibility: hidden;
-        transition: all 0.3s ease;
-    }
-
-    .sidebar-overlay.show {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    .card {
-        background: white;
-        border-radius: 16px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-        border: 1px solid #e2e8f0;
-        overflow: hidden;
-    }
-
-    .card-header {
-        padding: 32px 32px 0 32px;
-    }
-
-    .card-content {
-        padding: 32px;
-    }
-
-    .section-title {
-        font-size: 28px;
-        font-weight: 700;
-        color: #1a202c;
-        margin-bottom: 8px;
-    }
-
-    .section-subtitle {
-        color: #718096;
-        font-size: 16px;
-        margin-bottom: 32px;
-    }
-
-    .tabs {
-        display: flex;
-        background: #f5f5f5;
-        border-radius: 8px;
-        padding: 4px;
-        margin-bottom: 20px;
-    }
-
-    .tab {
-        flex: 1;
-        padding: 12px 20px;
-        text-align: center;
-        border-radius: 6px;
-        cursor: pointer;
-        transition: all 0.2s;
-        font-weight: 500;
-    }
-
-    .tab.active {
-        background: white;
-        color: #667eea;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .tab-content {
-        display: none;
-    }
-
-    .tab-content.active {
-        display: block;
-    }
-
-    .form-group {
-        margin-bottom: 20px;
-    }
-
-    .form-group label {
-        display: block;
-        font-weight: 500;
-        margin-bottom: 8px;
-        color: #555;
-    }
-
-    .form-group input,
-    .form-group select,
-    .form-group textarea {
-        width: 100%;
-        padding: 12px;
-        border: 2px solid #e1e1e1;
-        border-radius: 6px;
-        font-size: 14px;
-        transition: border-color 0.2s;
-    }
-
-    .form-group input:focus,
-    .form-group select:focus,
-    .form-group textarea:focus {
-        outline: none;
-        border-color: #667eea;
-    }
-
-    .btn {
-        padding: 12px 24px;
-        border: none;
-        border-radius: 6px;
-        cursor: pointer;
-        font-weight: 500;
-        transition: all 0.2s;
-        text-decoration: none;
-        display: inline-block;
-        text-align: center;
-    }
-
-    .btn-primary {
-        background: #667eea;
-        color: white;
-    }
-
-    .btn-primary:hover {
-        background: #5a67d8;
-        transform: translateY(-1px);
-    }
-
-    .btn-secondary {
-        background: #e2e8f0;
-        color: #4a5568;
-    }
-
-    .btn-secondary:hover {
-        background: #cbd5e0;
-    }
-
-    .btn-danger {
-        background: #e53e3e;
-        color: white;
-    }
-
-    .btn-danger:hover {
-        background: #c53030;
-    }
-
-    .btn-compact {
-        padding: 8px 16px;
-        font-size: 14px;
-        border-radius: 8px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        border: none;
-        cursor: pointer;
-        font-weight: 600;
-        transition: all 0.3s ease;
-        text-decoration: none;
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
-    }
-
-    .btn-compact:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
-    }
-
-    .btn-compact span {
-        font-size: 16px;
-    }
-
-    /* Modern Responsive Improvements */
-
-    /* Enhanced Container System */
-    .container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 20px;
-    }
-
-    /* Improved Grid System */
-    .grid {
-        display: grid;
-        gap: 24px;
-    }
-
-    .grid-2 {
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    }
-
-    .grid-3 {
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    }
-
-    .grid-4 {
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    }
-
-    /* Modern Card Enhancements */
-    .card {
-        background: #ffffff;
-        border-radius: 16px;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        transition: transform 0.2s ease, box-shadow 0.2s ease;
-        border: 1px solid rgba(226, 232, 240, 0.8);
-        overflow: hidden;
-    }
-
-    .card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    /* Enhanced Server Cards */
-    .server-card {
-        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-        border: 1px solid #e2e8f0;
-        border-radius: 12px;
-        padding: 24px;
-        transition: all 0.3s ease;
-        position: relative;
-        overflow: hidden;
-    }
-
-    .server-card::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-        transform: scaleX(0);
-        transition: transform 0.3s ease;
-    }
-
-    .server-card:hover::before {
-        transform: scaleX(1);
-    }
-
-    .server-card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-        border-color: #cbd5e0;
-    }
-
-    /* Server Stats Enhancement */
-    .server-stats {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        margin: 16px 0;
-    }
-
-    .server-stats span {
-        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
-        color: #4a5568;
-        padding: 6px 12px;
-        border-radius: 20px;
-        font-size: 12px;
-        font-weight: 600;
-        border: 1px solid #e2e8f0;
-        transition: all 0.2s ease;
-    }
-
-    .server-stats span:hover {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        transform: scale(1.05);
-    }
-
-    /* Enhanced Form Elements */
-    .form-group {
-        margin-bottom: 24px;
-    }
-
-    .form-label {
-        display: block;
-        margin-bottom: 8px;
-        font-weight: 600;
-        color: #374151;
-        font-size: 14px;
-    }
-
-    .form-input, .form-select, .form-textarea {
-        width: 100%;
-        padding: 12px 16px;
-        border: 2px solid #e5e7eb;
-        border-radius: 8px;
-        font-size: 14px;
-        transition: all 0.2s ease;
-        background: #ffffff;
-    }
-
-    .form-input:focus, .form-select:focus, .form-textarea:focus {
-        outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-        transform: translateY(-1px);
-    }
-
-    /* Modern Tab System */
-    .tab-nav {
-        display: flex;
-        background: #f8fafc;
-        border-radius: 12px;
-        padding: 4px;
-        margin-bottom: 24px;
-        overflow-x: auto;
-    }
-
-    .tab-button {
-        flex: 1;
-        min-width: max-content;
-        padding: 12px 24px;
-        border: none;
-        background: transparent;
-        color: #6b7280;
-        font-weight: 500;
-        border-radius: 8px;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        white-space: nowrap;
-    }
-
-    .tab-button.active {
-        background: #ffffff;
-        color: #1f2937;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        font-weight: 600;
-    }
-
-    .tab-button:hover:not(.active) {
-        background: rgba(255, 255, 255, 0.6);
-        color: #374151;
-    }
-
-    /* Enhanced Loading States */
-    .loading-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 48px;
-        flex-direction: column;
-        gap: 16px;
-    }
-
-    .loading-spinner {
-        width: 40px;
-        height: 40px;
-        border: 3px solid #e5e7eb;
-        border-top: 3px solid #667eea;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-
-    /* Status Indicators */
-    .status-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 4px 12px;
-        border-radius: 20px;
-        font-size: 12px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .status-badge.success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
-    }
-
-    .status-badge.error {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fca5a5;
-    }
-
-    .status-badge.warning {
-        background: #fef3c7;
-        color: #92400e;
-        border: 1px solid #fcd34d;
-    }
-
-    .status-badge.info {
-        background: #dbeafe;
-        color: #1e40af;
-        border: 1px solid #93c5fd;
-    }
-
-    .file-upload {
-        border: 2px dashed #e1e1e1;
-        border-radius: 6px;
-        padding: 40px 20px;
-        text-align: center;
-        cursor: pointer;
-        transition: all 0.2s;
-    }
-
-    .file-upload:hover {
-        border-color: #667eea;
-        background: #f7fafc;
-    }
-
-    .file-upload.dragover {
-        border-color: #667eea;
-        background: #ebf4ff;
-    }
-
-    .data-preview {
-        background: #f7fafc;
-        border-radius: 6px;
-        padding: 15px;
-        margin: 15px 0;
-        max-height: 300px;
-        overflow: auto;
-    }
-
-    .data-preview table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-
-    .data-preview th,
-    .data-preview td {
-        padding: 8px;
-        border: 1px solid #e1e1e1;
-        text-align: left;
-    }
-
-    .data-preview th {
-        background: #e2e8f0;
-        font-weight: 500;
-    }
-
-    .server-list {
-        display: block;
-        gap: 20px;
-    }
-
-    .server-list.has-servers {
-        display: grid;
-    }
-
-    .server-card {
-        background: #f7fafc;
-        border-radius: 8px;
-        padding: 20px;
-        border: 1px solid #e1e1e1;
-    }
-
-    .server-card h3 {
-        margin-bottom: 10px;
-        color: #2d3748;
-    }
-
-    .server-stats {
-        display: flex;
-        gap: 20px;
-        margin: 10px 0;
-        font-size: 14px;
-        color: #718096;
-    }
-
-    .server-actions {
-        display: flex;
-        gap: 10px;
-        margin-top: 15px;
-    }
-
-    .test-results {
-        background: #f7fafc;
-        border-radius: 6px;
-        padding: 15px;
-        margin: 15px 0;
-        max-height: 400px;
-        overflow: auto;
-        font-family: 'Monaco', 'Consolas', monospace;
-        font-size: 12px;
-        white-space: pre-wrap;
-    }
-
-    .loading {
-        display: none;
-        text-align: center;
-        padding: 20px;
-    }
-
-    .loading.show {
-        display: block;
-    }
-
-    .error {
-        background: #fed7d7;
-        color: #c53030;
-        padding: 12px;
-        border-radius: 6px;
-        margin: 10px 0;
-        display: none;
-    }
-
-    .error.show {
-        display: block;
-    }
-
-    .success {
-        background: #c6f6d5;
-        color: #2f855a;
-        padding: 12px;
-        border-radius: 6px;
-        margin: 10px 0;
-        display: none;
-    }
-
-    .success.show {
-        display: block;
-    }
-
-    .hidden {
-        display: none !important;
-    }
-
-    /* Modal Styles */
-    .modal {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 2000;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 20px;
-        box-sizing: border-box;
-    }
-
-    .modal-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 2001;
-    }
-
-    .modal-content {
-        background: white;
-        border-radius: 12px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-        z-index: 2002;
-        position: relative;
-        max-width: 90vw;
-        max-height: 90vh;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        min-width: 600px;
-        margin: auto;
-        width: fit-content;
-    }
-
-    .modal-header {
-        padding: 20px 24px;
-        border-bottom: 1px solid #e2e8f0;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        background: #f8fafc;
-    }
-
-    .modal-header h2 {
-        margin: 0;
-        font-size: 20px;
-        font-weight: 600;
-        color: #1a202c;
-    }
-
-    .modal-close {
-        background: none;
-        border: none;
-        font-size: 24px;
-        cursor: pointer;
-        color: #718096;
-        padding: 0;
-        width: 32px;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 4px;
-        transition: all 0.2s;
-    }
-
-    .modal-close:hover {
-        background: #e2e8f0;
-        color: #4a5568;
-    }
-
-    .modal-body {
-        padding: 24px;
-        overflow-y: auto;
-        flex: 1;
-    }
-
-    .server-info .info-section {
-        margin-bottom: 32px;
-    }
-
-    .server-info .info-section h3 {
-        font-size: 18px;
-        font-weight: 600;
-        color: #1a202c;
-        margin-bottom: 16px;
-        padding-bottom: 8px;
-        border-bottom: 2px solid #667eea;
-    }
-
-    .server-info .info-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 12px;
-        margin-bottom: 16px;
-    }
-
-    .server-info .info-grid > div {
-        padding: 12px;
-        background: #f7fafc;
-        border-radius: 6px;
-        border-left: 4px solid #667eea;
-    }
-
-    .data-table {
-        margin-bottom: 24px;
-    }
-
-    .data-table h4 {
-        font-size: 16px;
-        font-weight: 600;
-        color: #2d3748;
-        margin-bottom: 12px;
-    }
-
-    .how-to-use .section {
-        margin-bottom: 32px;
-    }
-
-    .how-to-use .section h3 {
-        font-size: 18px;
-        font-weight: 600;
-        color: #1a202c;
-        margin-bottom: 16px;
-    }
-
-    .code-block {
-        background: #2d3748;
-        border-radius: 8px;
-        overflow: hidden;
-        margin: 16px 0;
-    }
-
-    .code-block pre {
-        margin: 0;
-        padding: 16px;
-        color: #e2e8f0;
-        font-family: 'Monaco', 'Consolas', 'Liberation Mono', monospace;
-        font-size: 14px;
-        line-height: 1.5;
-        overflow-x: auto;
-    }
-
-    .how-to-use ul {
-        margin: 16px 0;
-        padding-left: 20px;
-    }
-
-    .how-to-use li {
-        margin-bottom: 8px;
-    }
-
-    /* Capabilities Styles */
-    .capabilities-list {
-        margin-top: 16px;
-    }
-
-    .capability-item {
-        background: #f8fafc;
-        border: 1px solid #e2e8f0;
-        border-radius: 8px;
-        padding: 16px;
-        margin-bottom: 16px;
-    }
-
-    .capability-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 8px;
-    }
-
-    .capability-type {
-        background: #667eea;
-        color: white;
-        padding: 2px 8px;
-        border-radius: 12px;
-        font-size: 12px;
-        font-weight: 500;
-    }
-
-    .capability-description {
-        color: #4a5568;
-        margin-bottom: 12px;
-        line-height: 1.5;
-    }
-
-    .capability-details {
-        background: white;
-        border-radius: 4px;
-        padding: 12px;
-        border-left: 3px solid #667eea;
-    }
-
-    .json-schema, .prompt-template {
-        background: #2d3748;
-        color: #e2e8f0;
-        padding: 12px;
-        border-radius: 4px;
-        font-size: 12px;
-        line-height: 1.4;
-        overflow-x: auto;
-        margin: 8px 0 0 0;
-    }
-
-    .arguments-list {
-        margin: 8px 0 0 0;
-        padding-left: 20px;
-    }
-
-    .arguments-list li {
-        margin-bottom: 4px;
-    }
-
-    /* Collapsible Panels */
-    .collapsible-panel {
-        border: 1px solid #e2e8f0;
-        border-radius: 8px;
-        margin-bottom: 12px;
-        overflow: hidden;
-    }
-
-    .collapsible-header {
-        background: #f8fafc;
-        padding: 12px 16px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        transition: background-color 0.2s;
-        user-select: none;
-    }
-
-    .collapsible-header:hover {
-        background: #edf2f7;
-    }
-
-    .collapsible-header.active {
-        background: #e6fffa;
-        border-bottom: 1px solid #e2e8f0;
-    }
-
-    .collapsible-title {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .table-info {
-        font-size: 12px;
-        color: #718096;
-        font-weight: normal;
-    }
-
-    .collapsible-toggle {
-        font-size: 14px;
-        color: #4a5568;
-        transition: transform 0.2s;
-    }
-
-    .collapsible-header.active .collapsible-toggle {
-        transform: rotate(180deg);
-    }
-
-    .collapsible-content {
-        display: none;
-        padding: 16px;
-        background: white;
-    }
-
-    .column-type {
-        font-size: 11px;
-        color: #718096;
-        font-weight: normal;
-    }
-
-    .more-rows {
-        background: #f7fafc;
-        font-style: italic;
-        color: #718096;
-    }
-
-    .more-rows td {
-        text-align: center;
-        padding: 12px;
-    }
-
-    /* Delete Modal Styles */
-    .delete-modal {
-        max-width: 500px;
-        width: 500px;
-    }
-
-    .delete-warning {
-        display: flex;
-        gap: 16px;
-        padding: 20px;
-        background: #fef2f2;
-        border-radius: 8px;
-        border: 1px solid #fecaca;
-        margin-bottom: 24px;
-    }
-
-    .warning-icon {
-        font-size: 24px;
-        flex-shrink: 0;
-    }
-
-    .warning-content h3 {
-        margin: 0 0 8px 0;
-        color: #dc2626;
-        font-size: 18px;
-        font-weight: 600;
-    }
-
-    .server-name-to-delete {
-        font-weight: 600;
-        color: #1f2937;
-        background: #f3f4f6;
-        padding: 4px 8px;
-        border-radius: 4px;
-        margin: 8px 0;
-        font-family: 'Monaco', 'Consolas', monospace;
-    }
-
-    .warning-text {
-        color: #6b7280;
-        margin: 0;
-        font-size: 14px;
-        line-height: 1.5;
-    }
-
-    .delete-actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 12px;
-    }
-
-    .delete-actions .btn {
-        min-width: 120px;
-    }
-
-    .btn:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-    }
-
-    .btn-loading {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .btn-loading:before {
-        content: '';
-        width: 16px;
-        height: 16px;
-        border: 2px solid transparent;
-        border-top: 2px solid currentColor;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-        to { transform: rotate(360deg); }
-    }
-
-    /* Success Modal Styles */
-    .success-modal {
-        max-width: 400px;
-        width: 400px;
-    }
-
-    .success-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        padding: 20px;
-    }
-
-    .success-icon {
-        font-size: 48px;
-        margin-bottom: 16px;
-    }
-
-    .success-message {
-        margin-bottom: 24px;
-    }
-
-    .success-message p {
-        margin: 0;
-        color: #374151;
-        font-size: 16px;
-        line-height: 1.5;
-    }
-
-    .success-actions {
-        display: flex;
-        justify-content: center;
-    }
-
-    .success-actions .btn {
-        min-width: 100px;
-    }
-
-    /* Error Modal Styles (reuses success modal structure) */
-    .error-modal .modal-header {
-        background: #fef2f2;
-        border-bottom: 1px solid #fecaca;
-    }
-
-    .error-modal .modal-header h2 {
-        color: #dc2626;
-    }
-
-    .error-modal .success-message p {
-        color: #dc2626;
-    }
-
-    /* Server Details Modal Styles */
-    .server-details {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-    }
-
-    .detail-section {
-        background: #f8fafc;
-        border-radius: 8px;
-        padding: 20px;
-        border: 1px solid #e2e8f0;
-    }
-
-    .detail-section h3 {
-        margin: 0 0 16px 0;
-        font-size: 18px;
-        font-weight: 600;
-        color: #1a202c;
-        border-bottom: 2px solid #667eea;
-        padding-bottom: 8px;
-    }
-
-    .detail-item {
-        background: white;
-        border-radius: 6px;
-        padding: 16px;
-        margin-bottom: 12px;
-        border: 1px solid #e2e8f0;
-    }
-
-    .detail-item strong {
-        display: block;
-        font-size: 16px;
-        font-weight: 600;
-        color: #2d3748;
-        margin-bottom: 8px;
-    }
-
-    .detail-item p {
-        margin: 0 0 8px 0;
-        color: #4a5568;
-        line-height: 1.5;
-    }
-
-    .detail-item small {
-        color: #718096;
-        font-size: 12px;
-        font-family: 'Monaco', 'Consolas', monospace;
-        background: #edf2f7;
-        padding: 2px 6px;
-        border-radius: 4px;
-    }
-
-    .data-preview-table {
-        width: 100%;
-        border-collapse: collapse;
-        margin-top: 12px;
-        font-size: 14px;
-    }
-
-    .data-preview-table th {
-        background: #667eea;
-        color: white;
-        padding: 12px 8px;
-        text-align: left;
-        font-weight: 500;
-    }
-
-    .data-preview-table td {
-        padding: 8px;
-        border-bottom: 1px solid #e2e8f0;
-    }
-
-    .data-preview-table tr:nth-child(even) {
-        background: #f7fafc;
-    }
-
-    .table-container {
-        overflow-x: auto;
-        margin-top: 12px;
-        border: 1px solid #e2e8f0;
-        border-radius: 6px;
-    }
-
-    .data-table h4 {
-        margin: 0 0 8px 0;
-        font-size: 16px;
-        font-weight: 600;
-        color: #2d3748;
-    }
-
-    .data-table p {
-        margin: 0 0 12px 0;
-        color: #718096;
-        font-size: 14px;
-    }
-
-    /* How to Use Page Styles */
-    .method-selector {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 20px;
-        margin: 20px 0;
-    }
-
-    .method-btn {
-        background: #f8fafc;
-        border: 2px solid #e2e8f0;
-        border-radius: 12px;
-        padding: 24px;
-        cursor: pointer;
-        transition: all 0.3s;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        text-align: left;
-    }
-
-    .method-btn:hover {
-        border-color: #667eea;
-        background: #f7fafc;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
-    }
-
-    .method-btn.active {
-        border-color: #667eea;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        transform: translateY(-2px);
-        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
-    }
-
-    .method-icon {
-        font-size: 32px;
-        flex-shrink: 0;
-    }
-
-    .method-info h3 {
-        margin: 0 0 8px 0;
-        font-size: 18px;
-        font-weight: 600;
-    }
-
-    .method-info p {
-        margin: 0;
-        opacity: 0.8;
-        font-size: 14px;
-    }
-
-    .method-content {
-        animation: fadeIn 0.3s ease;
-    }
-
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(10px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-
-    .how-to-section {
-        margin: 32px 0;
-    }
-
-    .how-to-section h3 {
-        margin: 0 0 16px 0;
-        font-size: 20px;
-        font-weight: 600;
-        color: #1a202c;
-    }
-
-    .advantage-list {
-        list-style: none;
-        padding: 0;
-        margin: 16px 0;
-    }
-
-    .advantage-list li {
-        background: #f0fff4;
-        border-left: 4px solid #10b981;
-        padding: 12px 16px;
-        margin-bottom: 8px;
-        border-radius: 0 6px 6px 0;
-    }
-
-    .advantage-list li:before {
-        content: '✅ ';
-        margin-right: 8px;
-    }
-
-    .setup-steps {
-        margin: 24px 0;
-    }
-
-    .step {
-        display: flex;
-        gap: 20px;
-        margin-bottom: 32px;
-        align-items: flex-start;
-    }
-
-    .step-number {
-        width: 40px;
-        height: 40px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 600;
-        font-size: 18px;
-        flex-shrink: 0;
-    }
-
-    .step-content {
-        flex: 1;
-    }
-
-    .step-content h4 {
-        margin: 0 0 12px 0;
-        font-size: 18px;
-        font-weight: 600;
-        color: #1a202c;
-    }
-
-    .step-content p {
-        margin: 0 0 16px 0;
-        color: #4a5568;
-        line-height: 1.6;
-    }
-
-    .status-indicator {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin: 12px 0;
-        padding: 12px;
-        background: #f8fafc;
-        border-radius: 6px;
-        border: 1px solid #e2e8f0;
-    }
-
-    .status-dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        background: #94a3b8;
-    }
-
-    .status-dot.online {
-        background: #10b981;
-        box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
-    }
-
-    .status-dot.offline {
-        background: #ef4444;
-        box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
-    }
-
-    .config-block {
-        position: relative;
-        background: #1a202c;
-        border-radius: 8px;
-        overflow: hidden;
-        margin: 16px 0;
-    }
-
-    .config-block pre {
-        margin: 0;
-        padding: 20px;
-        color: #e2e8f0;
-        font-family: 'Monaco', 'Consolas', 'Liberation Mono', monospace;
-        font-size: 14px;
-        line-height: 1.5;
-        overflow-x: auto;
-    }
-
-    .copy-btn {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-        background: #4a5568;
-        color: white;
-        border: none;
-        padding: 8px 12px;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 12px;
-        transition: background 0.2s;
-    }
-
-    .copy-btn:hover {
-        background: #2d3748;
-    }
-
-    .tool-naming {
-        background: #f8fafc;
-        border-radius: 8px;
-        padding: 20px;
-        border: 1px solid #e2e8f0;
-        margin: 16px 0;
-    }
-
-    .naming-example {
-        background: #1a202c;
-        color: #e2e8f0;
-        padding: 16px;
-        border-radius: 6px;
-        font-family: 'Monaco', 'Consolas', monospace;
-        font-size: 16px;
-        font-weight: 600;
-        text-align: center;
-        margin-bottom: 12px;
-    }
-
-    .naming-description {
-        color: #4a5568;
-        font-size: 14px;
-        line-height: 1.6;
-        margin: 0;
-    }
-
-    .troubleshooting-item {
-        background: #fffbf0;
-        border-left: 4px solid #f59e0b;
-        padding: 20px;
-        margin-bottom: 20px;
-        border-radius: 0 8px 8px 0;
-    }
-
-    .troubleshooting-item h4 {
-        margin: 0 0 12px 0;
-        color: #92400e;
-        font-size: 16px;
-        font-weight: 600;
-    }
-
-    .troubleshooting-item ul {
-        margin: 0;
-        padding-left: 20px;
-        color: #78350f;
-    }
-
-    .troubleshooting-item li {
-        margin-bottom: 8px;
-        line-height: 1.5;
-    }
-
-    /* Platform Tabs Styles */
-    .platform-tabs {
-        display: flex;
-        gap: 8px;
-        margin: 20px 0;
-        border-bottom: 2px solid #e2e8f0;
-        padding-bottom: 4px;
-    }
-
-    .platform-tab {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 12px 20px;
-        border: none;
-        background: transparent;
-        cursor: pointer;
-        border-radius: 8px 8px 0 0;
-        transition: all 0.2s;
-        color: #718096;
-        font-size: 14px;
-        font-weight: 500;
-        position: relative;
-    }
-
-    .platform-tab img {
-        width: 20px;
-        height: 20px;
-        opacity: 0.6;
-        transition: opacity 0.2s;
-    }
-
-    .platform-tab:hover {
-        background: #f7fafc;
-        color: #4a5568;
-    }
-
-    .platform-tab:hover img {
-        opacity: 0.8;
-    }
-
-    .platform-tab.active {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        transform: translateY(-2px);
-    }
-
-    .platform-tab.active img {
-        opacity: 1;
-        filter: brightness(0) invert(1);
-    }
-
-    .platform-tab.active::after {
-        content: '';
-        position: absolute;
-        bottom: -6px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 60%;
-        height: 4px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 2px;
-    }
-
-    .platform-content {
-        animation: fadeIn 0.3s ease;
-    }
-
-    /* Config Location Styles */
-    .config-location {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
-        border-radius: 8px;
-        padding: 16px;
-        margin: 16px 0;
-        border-left: 4px solid #0ea5e9;
-    }
-
-    .config-location h5 {
-        margin: 0 0 12px 0;
-        font-size: 14px;
-        font-weight: 600;
-        color: #0369a1;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .location-list {
-        margin: 0;
-        padding-left: 0;
-        list-style: none;
-    }
-
-    .location-list li {
-        margin-bottom: 8px;
-        padding: 8px 12px;
-        background: white;
-        border-radius: 6px;
-        border: 1px solid #e0f2fe;
-        font-size: 14px;
-        line-height: 1.4;
-    }
-
-    .location-list li strong {
-        color: #0369a1;
-        margin-right: 8px;
-    }
-
-    .location-list li code {
-        background: #f1f5f9;
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-family: 'Monaco', 'Consolas', monospace;
-        font-size: 12px;
-        color: #1e293b;
-        word-break: break-all;
-    }
-
-    /* Responsive Design */
-    @media (max-width: 768px) {
-        .container {
-            padding: 16px;
-        }
-
-        .method-selector {
-            grid-template-columns: 1fr;
-            gap: 16px;
-        }
-
-        .method-btn {
-            padding: 20px;
-        }
-
-        .step {
-            gap: 16px;
-        }
-
-        .step-number {
-            width: 32px;
-            height: 32px;
-            font-size: 16px;
-        }
-
-        .config-block pre {
-            font-size: 12px;
-            padding: 16px;
-        }
-
-        .copy-btn {
-            position: static;
-            margin: 8px 0 0 0;
-            width: 100%;
-        }
-
-        .platform-tabs {
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .platform-tab {
-            padding: 12px 16px;
-            border-radius: 6px;
-        }
-
-        .platform-tab.active::after {
-            display: none;
-        }
-
-        .location-list li code {
-            font-size: 11px;
-            word-break: break-all;
-            display: block;
-            margin-top: 4px;
-        }
-
-        .config-location {
-            padding: 12px;
-        }
-    }
-
-        .card-header {
-            padding: 24px 24px 0 24px;
-        }
-
-        .card-content {
-            padding: 24px;
-        }
-
-        .section-title {
-            font-size: 24px;
-        }
-
-        .topbar-subtitle {
-            display: none;
-        }
-
-        .form-group {
-            margin-bottom: 16px;
-        }
-
-        .modal-content {
-            min-width: 90vw;
-            max-width: 95vw;
-        }
-
-        .modal-body {
-            padding: 16px;
-        }
-
-        .server-info .info-grid {
-            grid-template-columns: 1fr;
-        }
-
-        .delete-modal, .success-modal {
-            max-width: 95vw;
-            width: 95vw;
-        }
-
-        .modal-content {
-            min-width: 90vw;
-        }
-
-        .delete-warning {
-            flex-direction: column;
-            text-align: center;
-        }
-
-        .delete-actions {
-            flex-direction: column-reverse;
-            gap: 8px;
-        }
-
-        .delete-actions .btn {
-            width: 100%;
-        }
-    }
-
-    @media (max-width: 480px) {
-        .sidebar {
-            width: 100%;
-        }
-
-        .topbar-title {
-            font-size: 20px;
-        }
-
-        .section-title {
-            font-size: 20px;
-        }
-
-        .card-header {
-            padding: 20px 20px 0 20px;
-        }
-
-        .card-content {
-            padding: 20px;
-        }
-    }
-
-    /* Advanced Responsive Design */
-
-    /* Large Desktop - 1440px+ */
-    @media (min-width: 1440px) {
-        .container {
-            max-width: 1400px;
-            padding: 0 40px;
-        }
-
-        .grid {
-            gap: 32px;
-        }
-
-        .grid-2 {
-            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-        }
-
-        .grid-3 {
-            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-        }
-
-        .grid-4 {
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        }
-    }
-
-    /* Desktop - 1024px to 1439px */
-    @media (min-width: 1024px) and (max-width: 1439px) {
-        .container {
-            max-width: 1200px;
-            padding: 0 32px;
-        }
-
-        .grid-2 {
-            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-        }
-
-        .grid-3 {
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        }
-
-        .grid-4 {
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-        }
-    }
-
-    /* Tablet Landscape - 768px to 1023px */
-    @media (min-width: 768px) and (max-width: 1023px) {
-        .container {
-            padding: 0 24px;
-        }
-
-        .grid {
-            gap: 20px;
-        }
-
-        .grid-2 {
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        }
-
-        .grid-3 {
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-        }
-
-        .grid-4 {
-            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-        }
-
-        .card-header {
-            padding: 20px 24px 16px 24px;
-        }
-
-        .card-content {
-            padding: 0 24px 24px 24px;
-        }
-
-        .server-card {
-            padding: 20px;
-        }
-
-        .btn-compact {
-            padding: 6px 14px;
-            font-size: 13px;
-        }
-    }
-
-    /* Tablet Portrait & Large Mobile - 600px to 767px */
-    @media (min-width: 600px) and (max-width: 767px) {
-        .container {
-            padding: 0 20px;
-        }
-
-        .grid {
-            gap: 16px;
-        }
-
-        .grid-2, .grid-3, .grid-4 {
-            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-        }
-
-        .card {
-            border-radius: 12px;
-        }
-
-        .card-header {
-            padding: 16px 20px 12px 20px;
-        }
-
-        .card-content {
-            padding: 0 20px 20px 20px;
-        }
-
-        .server-card {
-            padding: 16px;
-        }
-
-        .server-stats {
-            gap: 8px;
-        }
-
-        .server-stats span {
-            padding: 4px 8px;
-            font-size: 11px;
-        }
-
-        .tab-nav {
-            padding: 3px;
-            margin-bottom: 16px;
-        }
-
-        .tab-button {
-            padding: 10px 16px;
-            font-size: 13px;
-        }
-
-        .btn-compact {
-            padding: 8px 12px;
-            font-size: 12px;
-        }
-
-        .btn-compact span {
-            font-size: 14px;
-        }
-    }
-
-    /* Mobile Landscape - 480px to 599px */
-    @media (min-width: 480px) and (max-width: 599px) {
-        .container {
-            padding: 0 16px;
-        }
-
-        .grid {
-            gap: 12px;
-        }
-
-        .grid-2, .grid-3, .grid-4 {
-            grid-template-columns: 1fr;
-        }
-
-        .card {
-            border-radius: 10px;
-        }
-
-        .card-header {
-            padding: 12px 16px 8px 16px;
-        }
-
-        .card-content {
-            padding: 0 16px 16px 16px;
-        }
-
-        .server-card {
-            padding: 12px;
-        }
-
-        .server-stats {
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .server-stats span {
-            text-align: center;
-            padding: 6px 12px;
-        }
-
-        .section-title {
-            font-size: 18px;
-        }
-
-        .tab-nav {
-            flex-direction: column;
-            gap: 2px;
-        }
-
-        .tab-button {
-            padding: 12px;
-            text-align: center;
-        }
-
-        .btn-compact {
-            width: 100%;
-            justify-content: center;
-            padding: 10px 16px;
-        }
-
-        .form-input, .form-select, .form-textarea {
-            padding: 10px 12px;
-        }
-    }
-
-    /* Mobile Portrait - up to 479px */
-    @media (max-width: 479px) {
-        .container {
-            padding: 0 12px;
-        }
-
-        .grid {
-            gap: 8px;
-        }
-
-        .card {
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .card-header {
-            padding: 8px 12px 4px 12px;
-        }
-
-        .card-content {
-            padding: 0 12px 12px 12px;
-        }
-
-        .server-card {
-            padding: 8px;
-        }
-
-        .server-stats span {
-            font-size: 10px;
-            padding: 3px 6px;
-        }
-
-        .section-title {
-            font-size: 16px;
-        }
-
-        .btn-compact {
-            padding: 8px 12px;
-            font-size: 11px;
-        }
-
-        .btn-compact span {
-            font-size: 12px;
-        }
-
-        .form-input, .form-select, .form-textarea {
-            padding: 8px 10px;
-            font-size: 13px;
-        }
-
-        .loading-container {
-            padding: 24px;
-        }
-
-        .loading-spinner {
-            width: 30px;
-            height: 30px;
-        }
-    }
-
-    /* Dark Mode Support */
-    @media (prefers-color-scheme: dark) {
-        body {
-            background: #0f172a;
-            color: #f1f5f9;
-        }
-
-        .card {
-            background: #1e293b;
-            border-color: #334155;
-        }
-
-        .server-card {
-            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
-            border-color: #334155;
-        }
-
-        .server-stats span {
-            background: linear-gradient(135deg, #334155 0%, #475569 100%);
-            color: #cbd5e1;
-            border-color: #475569;
-        }
-
-        .form-input, .form-select, .form-textarea {
-            background: #1e293b;
-            border-color: #334155;
-            color: #f1f5f9;
-        }
-
-        .tab-nav {
-            background: #1e293b;
-        }
-
-        .tab-button {
-            color: #94a3b8;
-        }
-
-        .tab-button.active {
-            background: #334155;
-            color: #f1f5f9;
-        }
-    }
-
-    /* High Contrast Mode */
-    @media (prefers-contrast: high) {
-        .card {
-            border: 2px solid #000;
-        }
-
-        .btn-compact {
-            border: 2px solid #000;
-        }
-
-        .form-input, .form-select, .form-textarea {
-            border: 2px solid #000;
-        }
-    }
-
-    /* Reduced Motion */
-    @media (prefers-reduced-motion: reduce) {
-        * {
-            animation-duration: 0.01ms !important;
-            animation-iteration-count: 1 !important;
-            transition-duration: 0.01ms !important;
-        }
-
-        .loading-spinner {
-            animation: none;
-        }
-
-        .card:hover,
-        .server-card:hover,
-        .btn-compact:hover {
-            transform: none;
-        }
-    }
-</style>
-</head>