@softtechai/quickmcp 1.0.8

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

@@ -0,0 +1,2091 @@
+    * {
+        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>