krsyer-server-monitor-pro 1.0.28 → 1.0.29

package/lib/public/style.css

@@ -1,1045 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
-
-:root {
-    /* Color Palette - Premium SaaS */
-    --primary: #4f46e5;
-    --primary-light: #818cf8;
-    --secondary: #7c3aed;
-    --accent: #0ea5e9;
-
-    --bg-main: #f8fafc;
-    --bg-sidebar: #ffffff;
-    --card-bg: rgba(255, 255, 255, 0.85);
-    --card-border: rgba(226, 232, 240, 0.6);
-
-    --text-primary: #0f172a;
-    --text-secondary: #64748b;
-    --text-muted: #94a3b8;
-
-    --success: #10b981;
-    --warning: #f59e0b;
-    --danger: #ef4444;
-
-    /* Shadows - Deep & Soft */
-    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
-    --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
-    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
-
-    --radius-lg: 1.25rem;
-    --radius-md: 0.75rem;
-
-    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
-    background-color: var(--bg-main);
-    color: var(--text-primary);
-    min-height: 100vh;
-    overflow-x: hidden;
-    line-height: 1.6;
-}
-
-/* Premium Mesh Background */
-body::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    background:
-        radial-gradient(at 0% 0%, rgba(79, 70, 229, 0.1) 0px, transparent 50%),
-        radial-gradient(at 100% 0%, rgba(124, 58, 237, 0.1) 0px, transparent 50%),
-        radial-gradient(at 100% 100%, rgba(14, 165, 233, 0.1) 0px, transparent 50%),
-        radial-gradient(at 0% 100%, rgba(236, 72, 153, 0.1) 0px, transparent 50%);
-}
-
-/* Animations */
-@keyframes slideUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-/* Layout Hierarchy */
-.app-layout {
-    display: flex;
-    min-height: 100vh;
-}
-
-/* Sidebar - Modern & Clean */
-.sidebar {
-    width: 280px;
-    background: var(--bg-sidebar);
-    border-right: 1px solid var(--card-border);
-    padding: 2.5rem 1.5rem;
-    position: sticky;
-    top: 0;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    z-index: 1000;
-    overflow: hidden;
-    /* Ensure scrolling happens inside list */
-}
-
-.sidebar-header {
-    margin-bottom: 2rem;
-    padding-left: 0.5rem;
-}
-
-.sidebar-header h2 {
-    font-size: 1.5rem;
-    font-weight: 800;
-    letter-spacing: -0.025em;
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.nav-links {
-    list-style: none;
-    flex: 1;
-    overflow-y: auto;
-    min-height: 0;
-    /* Important for flex scrolling */
-    padding-right: 5px;
-    /* Space for scrollbar */
-}
-
-.nav-links li {
-    margin-bottom: 0.625rem;
-}
-
-.nav-link {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 0.875rem 1.25rem;
-    color: var(--text-secondary);
-    text-decoration: none;
-    border-radius: var(--radius-md);
-    font-weight: 600;
-    font-size: 0.95rem;
-    transition: var(--transition);
-}
-
-.nav-link ion-icon {
-    font-size: 1.25rem;
-    transition: var(--transition);
-}
-
-.nav-link:hover {
-    background: rgba(79, 70, 229, 0.05);
-    color: var(--primary);
-}
-
-.nav-link.active {
-    background: var(--primary);
-    color: #ffffff;
-    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.25);
-}
-
-.nav-link.active ion-icon {
-    color: #ffffff;
-}
-
-.sidebar-footer {
-    padding-top: 1.5rem;
-    border-top: 1px solid var(--card-border);
-    margin-top: auto;
-    /* Push to bottom if space permits */
-}
-
-/* Stylish License Footer */
-.sidebar-footer>div {
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    margin-top: 1rem !important;
-    flex-wrap: wrap;
-}
-
-.sidebar-footer br {
-    display: none;
-}
-
-#license-plan,
-#license-expiry {
-    color: #0f172a;
-    /* Black/Dark */
-    font-weight: 700;
-    font-size: 0.7rem;
-    background: #f1f5f9;
-    padding: 0.25rem 0.75rem;
-    border-radius: 1rem;
-    border: 1px solid #e2e8f0;
-    white-space: nowrap;
-}
-
-#license-plan {
-    color: var(--primary);
-    background: rgba(79, 70, 229, 0.1);
-    border-color: rgba(79, 70, 229, 0.2);
-}
-
-.logout-btn-sidebar {
-    width: 100%;
-    background: #fff1f2;
-    color: #e11d48;
-    border: 1px solid #fecdd3;
-    padding: 0.875rem;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.625rem;
-    font-weight: 700;
-    font-size: 0.9rem;
-    transition: var(--transition);
-}
-
-.logout-btn-sidebar:hover {
-    background: #ffe4e6;
-    transform: translateY(-2px);
-}
-
-/* Main Content Area */
-.main-content {
-    flex: 1;
-    padding: 3rem 4rem;
-    max-width: 1600px;
-    margin: 0 auto;
-    animation: fadeIn 0.8s ease-out;
-}
-
-header {
-    margin-bottom: 3.5rem;
-}
-
-header h1 {
-    font-size: 2.75rem;
-    font-weight: 900;
-    letter-spacing: -0.05em;
-    color: var(--text-primary);
-    margin-bottom: 0.75rem;
-}
-
-header p {
-    color: var(--text-secondary);
-    font-size: 1.1rem;
-    font-weight: 500;
-}
-
-/* Cards & Grid */
-.dashboard-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
-    gap: 2rem;
-    margin-bottom: 3rem;
-}
-
-.card {
-    background: var(--card-bg);
-    border: 1px solid var(--card-border);
-    backdrop-filter: blur(20px);
-    border-radius: var(--radius-lg);
-    padding: 2rem;
-    box-shadow: var(--shadow-card);
-    transition: var(--transition);
-    position: relative;
-    overflow: hidden;
-}
-
-.card:hover {
-    transform: translateY(-8px);
-    box-shadow: var(--shadow-hover);
-    border-color: var(--primary-light);
-}
-
-.card::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 4px;
-    height: 0;
-    background: linear-gradient(to bottom, var(--primary), var(--secondary));
-    transition: var(--transition);
-}
-
-.card:hover::after {
-    height: 100%;
-}
-
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.75rem;
-    border-bottom: 1px solid var(--card-border);
-    padding-bottom: 1rem;
-}
-
-.card-title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: var(--text-primary);
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.card-icon {
-    font-size: 1.5rem;
-    color: var(--primary);
-    padding: 0.5rem;
-    background: rgba(79, 70, 229, 0.1);
-    border-radius: 0.75rem;
-}
-
-/* Info Rows & Stats */
-.card-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-}
-
-.info-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.info-label {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    font-weight: 600;
-}
-
-.info-value {
-    font-weight: 700;
-    font-size: 1rem;
-    color: var(--text-primary);
-}
-
-/* Status Badges */
-.status-badge {
-    padding: 0.375rem 1rem;
-    border-radius: 2rem;
-    font-size: 0.75rem;
-    font-weight: 800;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-}
-
-.status-online {
-    background: #d1fae5;
-    color: #065f46;
-}
-
-.status-offline {
-    background: #fee2e2;
-    color: #991b1b;
-}
-
-/* Progress Bars - Thick & Glossy */
-.progress-container {
-    width: 100%;
-    margin-top: 0.5rem;
-}
-
-.progress-label {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 700;
-    color: var(--text-secondary);
-}
-
-.progress-bar-bg {
-    width: 100%;
-    height: 12px;
-    background: #e2e8f0;
-    border-radius: 1rem;
-    overflow: hidden;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.progress-bar-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
-    background-size: 200% 100%;
-    border-radius: 1rem;
-    width: 0%;
-    transition: width 1.5s cubic-bezier(0.65, 0, 0.35, 1);
-    position: relative;
-    animation: shimmer 3s infinite linear;
-}
-
-@keyframes shimmer {
-    0% {
-        background-position: 100% 0;
-    }
-
-    100% {
-        background-position: -100% 0;
-    }
-}
-
-.progress-bar-fill::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
-}
-
-/* Tables Section */
-.view-section {
-    display: none;
-    animation: slideUp 0.6s ease-out;
-}
-
-.view-section.active {
-    display: block;
-}
-
-.apps-table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    margin-top: 1rem;
-}
-
-.apps-table th {
-    text-align: left;
-    padding: 1.25rem 1rem;
-    font-size: 0.85rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-muted);
-    border-bottom: 2px solid var(--card-border);
-}
-
-.apps-table td {
-    padding: 1.5rem 1rem;
-    border-bottom: 1px solid var(--card-border);
-    vertical-align: middle;
-}
-
-.apps-table tr:last-child td {
-    border-bottom: none;
-}
-
-.apps-table tr:hover td {
-    background: rgba(79, 70, 229, 0.02);
-}
-
-/* Action Buttons */
-.action-btn {
-    width: 38px;
-    height: 38px;
-    background: #ffffff;
-    border: 1px solid var(--card-border);
-    color: var(--text-secondary);
-    border-radius: 0.75rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: var(--transition);
-    font-size: 1.25rem;
-    box-shadow: var(--shadow-soft);
-}
-
-.action-btn:hover {
-    background: var(--primary);
-    color: #ffffff;
-    border-color: var(--primary);
-    transform: scale(1.1);
-    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
-}
-
-.action-btn.restart-btn {
-    background: var(--primary);
-    color: #ffffff;
-    border: none;
-    padding: 0 1.25rem;
-    width: auto;
-    font-size: 0.9rem;
-    font-weight: 700;
-    gap: 0.5rem;
-}
-
-/* Console & Logs */
-.console-logs {
-    margin-top: 1.5rem;
-    background: #0f172a;
-    color: #38bdf8;
-    font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;
-    font-size: 0.85rem;
-    padding: 1.25rem;
-    border-radius: var(--radius-md);
-    max-height: 250px;
-    overflow-y: auto;
-    border: 1px solid #1e293b;
-    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.2);
-    line-height: 1.5;
-}
-
-/* Cloudflare Section Layout */
-.cloudflare-layout {
-    display: grid;
-    grid-template-columns: 400px 1fr;
-    gap: 2rem;
-    align-items: start;
-}
-
-@media (max-width: 1200px) {
-    .cloudflare-layout {
-        grid-template-columns: 1fr;
-    }
-}
-
-.network-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-right: 0.75rem;
-    height: 600px;
-    /* Fixed height for scrollable area */
-    scroll-behavior: smooth;
-}
-
-.network-item {
-    background: #ffffff;
-    border: 1px solid var(--card-border);
-    padding: 1.25rem 1.5rem;
-    border-radius: var(--radius-md);
-    transition: var(--transition);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: var(--shadow-soft);
-}
-
-.network-item .network-info {
-    display: flex;
-    align-items: center;
-    gap: 1.25rem;
-}
-
-.network-item .host-text {
-    font-weight: 700;
-    font-size: 1rem;
-    color: var(--text-primary);
-}
-
-.network-item .service-text {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    font-family: 'Fira Code', monospace;
-}
-
-.network-item:hover {
-    border-color: var(--primary-light);
-    transform: translateX(6px);
-    box-shadow: var(--shadow-card);
-}
-
-.connect-btn {
-    background: linear-gradient(135deg, #059669, #10b981);
-    color: #ffffff;
-    padding: 0.625rem 1.25rem;
-    border-radius: 0.625rem;
-    text-decoration: none;
-    font-weight: 700;
-    font-size: 0.85rem;
-    transition: var(--transition);
-}
-
-.connect-btn:hover {
-    box-shadow: 0 8px 15px -3px rgba(16, 185, 129, 0.3);
-    transform: translateY(-2px);
-}
-
-/* Scrollbar Style */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #94a3b8;
-}
-
-/* Login & Forms - Premium Look */
-.login-container {
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1.5rem;
-}
-
-.login-card {
-    max-width: 450px;
-    width: 100%;
-    animation: slideUp 0.8s ease-out;
-}
-
-.login-header {
-    text-align: center;
-    justify-content: center;
-    border: none;
-    margin-bottom: 2rem;
-}
-
-.form-group {
-    margin-bottom: 1.75rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.625rem;
-    font-weight: 700;
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-}
-
-.input-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-.input-wrapper ion-icon {
-    position: absolute;
-    left: 1.125rem;
-    font-size: 1.25rem;
-    color: var(--text-muted);
-    pointer-events: none;
-}
-
-.input-wrapper input {
-    width: 100%;
-    padding: 0.875rem 1rem 0.875rem 3rem;
-    background: #ffffff;
-    border: 1px solid var(--card-border);
-    border-radius: var(--radius-md);
-    font-family: inherit;
-    font-size: 1rem;
-    color: var(--text-primary);
-    transition: var(--transition);
-    box-shadow: var(--shadow-soft);
-}
-
-.input-wrapper input:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
-}
-
-.login-btn,
-.action-btn.connect-btn {
-    width: 100%;
-    padding: 0.875rem;
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
-    color: #ffffff;
-    border: none;
-    border-radius: var(--radius-md);
-    font-size: 1rem;
-    font-weight: 800;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.75rem;
-    transition: var(--transition);
-    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.25);
-}
-
-.login-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.3);
-    filter: brightness(1.1);
-}
-
-.error-message {
-    background: #fee2e2;
-    color: #991b1b;
-    padding: 0.75rem 1rem;
-    border-radius: var(--radius-md);
-    font-size: 0.875rem;
-    font-weight: 600;
-    margin-bottom: 1.5rem;
-    display: none;
-    animation: fadeIn 0.3s ease;
-}
-
-.error-message:not(:empty) {
-    display: block;
-}
-
-.dark-input {
-    background: #ffffff;
-    border: 1px solid var(--card-border);
-    border-radius: var(--radius-md);
-    padding: 0.75rem 1rem;
-    color: var(--text-primary);
-    font-family: inherit;
-    font-size: 0.95rem;
-    transition: var(--transition);
-}
-
-.dark-input:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
-}
-
-/* Responsive Overrides */
-@media (max-width: 1024px) {
-    .sidebar {
-        width: 80px;
-        padding: 2rem 1rem;
-    }
-
-    .sidebar h2 span,
-    .nav-link span {
-        display: none;
-    }
-
-    .main-content {
-        padding: 2rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .app-layout {
-        flex-direction: column;
-        overflow-x: hidden;
-    }
-
-    .sidebar {
-        width: 100%;
-        height: auto;
-        position: sticky;
-        top: 0;
-        z-index: 1000;
-        padding: 1rem 1.5rem;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    }
-
-    .nav-links {
-        display: flex;
-        gap: 0.5rem;
-        overflow-x: auto;
-        padding-bottom: 0.5rem;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .nav-link {
-        white-space: nowrap;
-        padding: 0.625rem 1rem;
-    }
-
-    .main-content {
-        padding: 1.5rem;
-        width: 100%;
-        overflow: visible;
-    }
-
-    .views-container {
-        overflow: visible;
-        height: auto;
-    }
-
-    header {
-        margin-bottom: 2rem;
-    }
-
-    header div {
-        flex-direction: column;
-        align-items: flex-start !important;
-        gap: 1rem;
-    }
-
-    header h1 {
-        font-size: 1.75rem;
-    }
-
-    /* Mobile Card Transformation for Tables */
-    .apps-table,
-    .apps-table thead,
-    .apps-table tbody,
-    .apps-table th,
-    .apps-table td,
-    .apps-table tr {
-        display: block;
-    }
-
-    .apps-table thead tr {
-        position: absolute;
-        top: -9999px;
-        left: -9999px;
-    }
-
-    .apps-table tr {
-        border: 1px solid var(--card-border);
-        border-radius: var(--radius-md);
-        margin-bottom: 1.5rem;
-        background: #ffffff;
-        box-shadow: var(--shadow-soft);
-        padding: 0.5rem;
-    }
-
-    .apps-table td {
-        border: none;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
-        position: relative;
-        padding-left: 50% !important;
-        text-align: right;
-        min-height: 3rem;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-    }
-
-    .apps-table td:last-child {
-        border-bottom: none;
-    }
-
-    .apps-table td::before {
-        content: attr(data-label);
-        position: absolute;
-        left: 1rem;
-        width: 45%;
-        padding-right: 10px;
-        white-space: nowrap;
-        text-align: left;
-        font-weight: 800;
-        color: var(--text-muted);
-        text-transform: uppercase;
-        font-size: 0.7rem;
-    }
-
-    .apps-table td[data-label="Actions"] {
-        justify-content: center;
-        padding-left: 1rem !important;
-        background: rgba(79, 70, 229, 0.03);
-        border-radius: 0 0 var(--radius-md) var(--radius-md);
-    }
-
-    .apps-table td[data-label="Actions"]::before {
-        display: none;
-    }
-
-    /* Mobile Card Transformation for Network/Cloudflare Items */
-    .network-list {
-        height: auto;
-        max-height: none;
-        /* Allow natural expansion on mobile */
-        overflow-y: visible;
-        /* Use main page scroll for better mobile UX */
-        padding-right: 0;
-    }
-
-    .card {
-        padding: 1.25rem;
-        overflow: visible;
-        /* Prevent clipping of card shadows or dropdowns */
-    }
-
-    .card-content {
-        overflow: visible;
-    }
-
-    .dashboard-grid {
-        grid-template-columns: 1fr;
-        /* Force full width on mobile */
-    }
-
-    .network-item {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 1.25rem;
-        padding: 1.5rem;
-        background: #ffffff;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-        border: 1px solid var(--card-border);
-        border-left: 4px solid var(--primary);
-        position: relative;
-        overflow: hidden;
-    }
-
-    .network-info {
-        gap: 1rem;
-        align-items: flex-start;
-    }
-
-    .network-info ion-icon {
-        font-size: 1.8rem !important;
-        background: rgba(79, 70, 229, 0.1);
-        padding: 0.5rem;
-        border-radius: var(--radius-sm);
-    }
-
-    .host-text,
-    .server-ip {
-        font-size: 1.15rem;
-        font-weight: 800;
-        color: var(--text-main);
-        word-break: break-all;
-        margin-bottom: 0.25rem;
-    }
-
-    .service-text,
-    .server-status {
-        font-size: 0.9rem;
-        color: var(--text-secondary);
-        font-family: 'Fira Code', monospace;
-        letter-spacing: -0.5px;
-    }
-
-    .network-item .action-btn:active {
-        transform: scale(0.95);
-        background: rgba(79, 70, 229, 0.05);
-    }
-
-    /* Target both Cloudflare and Network Scan containers explicitly */
-    .network-item>.mobile-actions,
-    .network-item>.connect-btn {
-        margin-top: 1.25rem;
-        padding-top: 1.25rem;
-        border-top: 1px dashed rgba(0, 0, 0, 0.1);
-        display: grid !important;
-        grid-template-columns: repeat(3, 1fr) !important;
-        width: calc(100% + 3rem);
-        /* Expand to full width of padded card */
-        gap: 0.75rem;
-        background: rgba(0, 0, 0, 0.02);
-        margin: 1.25rem -1.5rem -1.5rem -1.5rem;
-        padding: 1.25rem 1.5rem;
-    }
-
-    /* Single button (Network Scan) style upgrade */
-    .network-item>.connect-btn {
-        grid-template-columns: 1fr !important;
-        text-decoration: none;
-        background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
-        box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
-        border: none;
-        height: 58px;
-        display: flex;
-        font-weight: 800;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        font-size: 0.95rem;
-        justify-content: center;
-        align-items: center;
-        color: #ffffff !important;
-        border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
-        gap: 0.75rem;
-        transition: all 0.3s ease;
-    }
-
-    .network-item .action-btn {
-        font-size: 1.5rem;
-        height: 54px;
-        background: #ffffff;
-        border: 1px solid var(--card-border);
-        border-radius: var(--radius-md);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
-    }
-
-    .network-item .connect-btn ion-icon {
-        font-size: 1.4rem;
-        transition: transform 0.3s ease;
-    }
-
-    .network-item .connect-btn:active {
-        transform: scale(0.98);
-        filter: brightness(1.1);
-        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
-    }
-
-    .network-item .connect-btn:active ion-icon {
-        transform: translateX(8px);
-    }
-
-    /* Form Grid Fix for Mobile */
-    .config-form div[style*="display: grid"] {
-        grid-template-columns: 1fr !important;
-        gap: 1rem !important;
-    }
-}
-
-/* Spin Animation */
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.spin {
-    animation: spin 1s linear infinite;
-    display: inline-block;
-}