/* ============================================================================ public\css\theme.css Dark (default) + Light "Porcelain" theme Apply to or ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap'); /* ============================================================================ DARK THEME (default — unchanged glamour) ============================================================================ */ [data-theme="dark"], :root { /* Backgrounds */ --bg-root: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); --bg-nav: rgba(15, 23, 42, 0.85); --bg-card: rgba(255, 255, 255, 0.05); --bg-card-hover: rgba(255, 255, 255, 0.08); --bg-input: rgba(255, 255, 255, 0.06); --bg-input-focus:rgba(255, 255, 255, 0.10); --bg-modal: #1e293b; --bg-code: rgba(0, 0, 0, 0.4); --bg-badge: rgba(255, 255, 255, 0.06); --bg-tab-active: linear-gradient(135deg, #3b82f6, #8b5cf6); --bg-empty: rgba(255, 255, 255, 0.03); /* Borders */ --border: rgba(255, 255, 255, 0.10); --border-hover: rgba(59, 130, 246, 0.50); --border-focus: #3b82f6; --border-modal: rgba(255, 255, 255, 0.10); /* Text */ --text-primary: #f1f5f9; --text-secondary: rgba(255, 255, 255, 0.60); --text-muted: rgba(255, 255, 255, 0.35); --text-heading: #ffffff; --text-label: rgba(255, 255, 255, 0.90); --text-code: #e5e7eb; --text-placeholder: rgba(255, 255, 255, 0.30); /* Accent */ --accent: #3b82f6; --accent-2: #8b5cf6; --accent-grad: linear-gradient(135deg, #3b82f6, #8b5cf6); --accent-glow: rgba(59, 130, 246, 0.30); --accent-subtle: rgba(59, 130, 246, 0.12); /* Status */ --status-online: #10b981; --status-offline: #ef4444; --color-success: #22c55e; --color-danger: #ef4444; --color-warning: #eab308; /* Shadows */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25); --shadow-hover: 0 10px 40px rgba(59, 130, 246, 0.20); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.55); --shadow-nav: 0 2px 20px rgba(0, 0, 0, 0.30); --shadow-btn: 0 4px 15px rgba(59, 130, 246, 0.30); /* Components */ --radius-card: 16px; --radius-btn: 10px; --radius-input: 10px; --radius-badge: 20px; /* Scrollbar */ --scrollbar-track: rgba(255, 255, 255, 0.04); --scrollbar-thumb: rgba(59, 130, 246, 0.50); /* Nav backdrop */ --nav-blur: blur(12px); /* Select arrow */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); } /* ============================================================================ LIGHT THEME — "Porcelain" Warm off-white, deep slate ink, sharp indigo accents ============================================================================ */ [data-theme="light"] { /* Backgrounds */ --bg-root: linear-gradient(145deg, #f0f4ff 0%, #fafbff 40%, #f5f0ff 100%); --bg-nav: rgba(255, 255, 255, 0.88); --bg-card: rgba(255, 255, 255, 0.85); --bg-card-hover: rgba(255, 255, 255, 1.00); --bg-input: rgba(241, 245, 255, 0.80); --bg-input-focus: rgba(238, 242, 255, 1.00); --bg-modal: #ffffff; --bg-code: #f1f5f9; --bg-badge: rgba(99, 102, 241, 0.07); --bg-tab-active: linear-gradient(135deg, #4f46e5, #7c3aed); --bg-empty: rgba(99, 102, 241, 0.03); /* Borders */ --border: rgba(99, 102, 241, 0.13); --border-hover: rgba(79, 70, 229, 0.40); --border-focus: #4f46e5; --border-modal: rgba(99, 102, 241, 0.12); /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-heading: #0f172a; --text-label: #1e293b; --text-code: #1e293b; --text-placeholder: #94a3b8; /* Accent */ --accent: #4f46e5; --accent-2: #7c3aed; --accent-grad: linear-gradient(135deg, #4f46e5, #7c3aed); --accent-glow: rgba(79, 70, 229, 0.18); --accent-subtle: rgba(79, 70, 229, 0.08); /* Status */ --status-online: #059669; --status-offline: #dc2626; --color-success: #16a34a; --color-danger: #dc2626; --color-warning: #d97706; /* Shadows — soft, layered, warm */ --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(99, 102, 241, 0.08); --shadow-hover: 0 4px 24px rgba(79, 70, 229, 0.16), 0 1px 4px rgba(15,23,42,0.08); --shadow-modal: 0 8px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15,23,42,0.08); --shadow-nav: 0 1px 0 rgba(99, 102, 241, 0.10), 0 2px 16px rgba(15,23,42,0.07); --shadow-btn: 0 4px 12px rgba(79, 70, 229, 0.28); /* Scrollbar */ --scrollbar-track: rgba(99, 102, 241, 0.06); --scrollbar-thumb: rgba(79, 70, 229, 0.35); /* Select arrow */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(79,70,229,0.6)' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); } /* ============================================================================ GLOBAL BASE — uses CSS variables for both themes ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; } body { background: var(--bg-root); min-height: 100vh; color: var(--text-primary); transition: background 0.35s ease, color 0.25s ease; } /* Typography */ h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-family: 'DM Sans', sans-serif; font-weight: 700; } code, pre, .font-mono { font-family: 'DM Mono', 'Courier New', monospace; } /* ============================================================================ NAVIGATION ============================================================================ */ .topnav { background: var(--bg-nav); backdrop-filter: var(--nav-blur); -webkit-backdrop-filter: var(--nav-blur); box-shadow: var(--shadow-nav); border-bottom: 1px solid var(--border); padding: 16px 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; transition: background 0.35s ease, box-shadow 0.35s ease; } .logo { font-size: 1.45em; font-weight: 800; background: var(--accent-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; cursor: pointer; display: flex; align-items: center; gap: 10px; letter-spacing: -0.3px; } .user-menu { display: flex; align-items: center; gap: 16px; } .user-info { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); padding: 7px 14px; border-radius: 12px; color: var(--text-primary); font-weight: 600; font-size: 0.9em; transition: background 0.25s; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85em; color: white; flex-shrink: 0; } .nav-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ============================================================================ BUTTONS ============================================================================ */ .btn { padding: 10px 22px; border-radius: var(--radius-btn); border: none; cursor: pointer; font-weight: 700; font-size: 0.9em; font-family: 'DM Sans', sans-serif; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0.1px; } .btn-primary { background: var(--accent-grad); color: white; box-shadow: var(--shadow-btn); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--accent-glow); filter: brightness(1.08); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-1px); } /* ============================================================================ CONTAINER ============================================================================ */ .container { max-width: 1400px; margin: 28px auto; padding: 0 5%; } /* ============================================================================ STAT CARDS ============================================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 36px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px; display: flex; align-items: center; gap: 18px; box-shadow: var(--shadow-card); transition: all 0.25s ease; backdrop-filter: blur(8px); } .stat-card:hover { transform: translateY(-4px); background: var(--bg-card-hover); border-color: var(--border-hover); box-shadow: var(--shadow-hover); } .stat-icon { font-size: 2.2em; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--accent-grad); border-radius: 14px; flex-shrink: 0; box-shadow: 0 4px 12px var(--accent-glow); } .stat-info h3 { font-size: 2em; font-weight: 800; background: var(--accent-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; line-height: 1; } .stat-info p { color: var(--text-secondary); font-size: 0.9em; font-weight: 500; } /* ============================================================================ SECTION HEADERS ============================================================================ */ .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .section-header h2 { font-size: 1.6em; color: var(--text-heading); font-weight: 700; } /* ============================================================================ PROJECT CARDS ============================================================================ */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; margin-bottom: 28px; } .project-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-card); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; backdrop-filter: blur(8px); animation: slideUp 0.4s ease-out both; } .project-card:hover { transform: translateY(-6px); background: var(--bg-card-hover); border-color: var(--border-hover); box-shadow: var(--shadow-hover); } .project-name { font-size: 1.3em; font-weight: 700; margin: 10px 0 6px; color: var(--text-heading); } .project-id { color: var(--text-muted); font-size: 0.82em; margin-bottom: 14px; font-family: 'DM Mono', monospace; } .project-stats { display: flex; gap: 14px; margin: 16px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .project-stat { flex: 1; text-align: center; } .project-stat-value { font-size: 1.7em; font-weight: 800; background: var(--accent-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 3px; } .project-stat-label { font-size: 0.68em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; } .project-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; } .project-btn { padding: 11px; border-radius: 9px; border: none; font-weight: 700; font-size: 0.85em; cursor: pointer; transition: all 0.22s ease; display: flex; align-items: center; justify-content: center; gap: 5px; font-family: 'DM Sans', sans-serif; } .project-btn-control { background: var(--accent-grad); color: white; box-shadow: var(--shadow-btn); } .project-btn-control:hover { transform: translateY(-2px); filter: brightness(1.1); } .project-btn-monitor { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); } .project-btn-monitor:hover { background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-2px); } .project-menu-btn { background: var(--bg-badge); color: var(--text-secondary); border: 1px solid var(--border); grid-column: 1 / -1; } .project-menu-btn:hover { background: var(--accent-subtle); border-color: var(--border-hover); color: var(--accent); transform: translateY(-1px); } /* Status badges */ .project-status, .status-online, .status-offline { padding: 5px 12px; border-radius: var(--radius-badge); font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .status-online { background: rgba(16, 185, 129, 0.12); color: var(--status-online); border: 1px solid rgba(16, 185, 129, 0.25); } .status-offline { background: rgba(239, 68, 68, 0.10); color: var(--status-offline); border: 1px solid rgba(239, 68, 68, 0.20); } /* ============================================================================ FORMS & INPUTS ============================================================================ */ .form-group { margin-bottom: 18px; } .form-group label { display: block; margin-bottom: 7px; font-weight: 700; color: var(--text-label); font-size: 0.88em; letter-spacing: 0.1px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 11px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-input); color: var(--text-primary); font-size: 0.95em; font-family: 'DM Sans', sans-serif; transition: all 0.2s ease; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-placeholder); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--border-focus); background: var(--bg-input-focus); box-shadow: 0 0 0 3px var(--accent-subtle); } .form-group textarea { resize: vertical; min-height: 90px; } .form-group select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .form-group select option { background: var(--bg-modal); color: var(--text-primary); } /* ============================================================================ MODALS ============================================================================ */ .modal { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.60); backdrop-filter: blur(6px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; } [data-theme="light"] .modal { background: rgba(15, 23, 42, 0.40); } .modal.show, .modal.active { display: flex; } .modal-content { background: var(--bg-modal); border-radius: 20px; padding: 30px; max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border-modal); box-shadow: var(--shadow-modal); transition: background 0.3s ease; animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes modalIn { from { opacity: 0; transform: translateY(-20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .modal-header h3 { font-size: 1.35em; color: var(--text-heading); font-weight: 700; } .close-btn { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); font-size: 1.3em; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; line-height: 1; } .close-btn:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); color: var(--color-danger); transform: rotate(90deg); } /* ============================================================================ TABS ============================================================================ */ .tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 0; } .tab { flex: 1; padding: 16px; text-align: center; cursor: pointer; background: transparent; border: none; font-size: 1em; font-weight: 700; color: var(--text-muted); transition: all 0.2s ease; font-family: 'DM Sans', sans-serif; } .tab:hover { color: var(--text-secondary); } .tab.active { color: var(--accent); border-bottom: 3px solid var(--accent); margin-bottom: -2px; } /* ============================================================================ MESSAGES ============================================================================ */ .message, .error-message, .success-message { padding: 13px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 0.9em; font-weight: 500; display: none; animation: slideDown 0.3s ease; } .message.show, .error-message.show, .success-message.show { display: block; } .message.error, .error-message { background: rgba(239, 68, 68, 0.10); color: var(--color-danger); border: 1px solid rgba(239, 68, 68, 0.25); } .message.success, .success-message { background: rgba(34, 197, 94, 0.10); color: var(--color-success); border: 1px solid rgba(34, 197, 94, 0.25); } /* ============================================================================ CODE BLOCKS ============================================================================ */ .code-block { position: relative; background: var(--bg-code); border: 1px solid var(--border); border-radius: 10px; padding: 14px; padding-top: 46px; margin: 10px 0; } .code-block pre { margin: 0; color: var(--text-code); font-family: 'DM Mono', 'Courier New', monospace; font-size: 0.88em; line-height: 1.65; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; } .copy-btn { position: absolute; top: 10px; right: 10px; background: var(--accent-grad); color: white; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 0.8em; font-weight: 700; transition: all 0.2s ease; } .copy-btn:hover { filter: brightness(1.1); transform: scale(1.04); } .copy-btn.copied { background: linear-gradient(135deg, #22c55e, #16a34a); } /* ============================================================================ TABLES ============================================================================ */ .data-table { width: 100%; border-collapse: collapse; } .data-table th { background: var(--bg-badge); padding: 12px 14px; text-align: left; font-weight: 700; color: var(--text-secondary); font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 2px solid var(--border); } .data-table td { padding: 12px 14px; color: var(--text-primary); border-bottom: 1px solid var(--border); font-size: 0.9em; } .data-table tr:hover td { background: var(--accent-subtle); } /* ============================================================================ DATA/CHART CARDS ============================================================================ */ .data-card, .chart-section, .ml-section, .export-section, .header-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px; margin-bottom: 22px; box-shadow: var(--shadow-card); backdrop-filter: blur(8px); transition: background 0.3s ease, border-color 0.3s ease; } .chart-header, .ml-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 14px; } .chart-header h3, .ml-header h3, .data-card h3, .export-section h3 { font-size: 1.3em; color: var(--text-heading); font-weight: 700; } /* ============================================================================ CHART CONTROLS ============================================================================ */ .chart-controls { display: flex; gap: 10px; flex-wrap: wrap; } .chart-controls select, .chart-controls button { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-weight: 600; font-size: 0.88em; cursor: pointer; transition: all 0.2s ease; font-family: 'DM Sans', sans-serif; appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; } .chart-controls select:focus, .chart-controls button:focus { outline: none; border-color: var(--border-focus); } .chart-controls select option { background: var(--bg-modal); color: var(--text-primary); } /* ============================================================================ EMPTY STATE ============================================================================ */ .empty-state { text-align: center; padding: 56px 20px; color: var(--text-muted); font-size: 1em; background: var(--bg-empty); border-radius: var(--radius-card); border: 2px dashed var(--border); } /* ============================================================================ LOADING / SPINNER ============================================================================ */ .loading { text-align: center; padding: 48px; color: var(--text-muted); } .spinner { border: 3px solid var(--border); border-top: 3px solid var(--accent); border-radius: 50%; width: 42px; height: 42px; animation: spin 0.8s linear infinite; margin: 0 auto 16px; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================================ TOAST ============================================================================ */ .toast { position: fixed; bottom: 22px; right: 22px; padding: 12px 20px; border-radius: 10px; font-weight: 700; font-size: 0.9em; color: white; z-index: 9999; animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .toast.success { background: linear-gradient(135deg, #22c55e, #16a34a); } .toast.error { background: linear-gradient(135deg, #ef4444, #dc2626); } @keyframes toastIn { from { opacity: 0; transform: translateX(50px) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } } /* ============================================================================ THEME TOGGLE BUTTON ============================================================================ */ .theme-toggle-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; } .theme-toggle-btn:hover { background: var(--accent-subtle); border-color: var(--border-hover); color: var(--accent); transform: rotate(20deg) scale(1.1); } /* ============================================================================ LIGHT THEME SPECIFIC OVERRIDES ============================================================================ */ /* Light theme adds a subtle mesh background */ [data-theme="light"] body { background-attachment: fixed; } [data-theme="light"] body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 15% 50%, rgba(79, 70, 229, 0.07) 0%, transparent 55%), radial-gradient(ellipse at 85% 20%, rgba(124, 58, 237, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(99, 102, 241, 0.05) 0%, transparent 55%); pointer-events: none; z-index: -1; } /* Stronger card borders in light */ [data-theme="light"] .project-card, [data-theme="light"] .stat-card, [data-theme="light"] .data-card, [data-theme="light"] .chart-section, [data-theme="light"] .header-section { border-color: rgba(99, 102, 241, 0.14); } /* Darker text on project cards */ [data-theme="light"] .project-id { color: #64748b; } /* Nav bottom border more visible in light */ [data-theme="light"] .topnav { border-bottom-color: rgba(99, 102, 241, 0.14); } /* Latest data pre in light */ [data-theme="light"] .latest-data { background: #f8fafc; border-color: rgba(99, 102, 241, 0.12); color: #1e293b; } /* Input shadows in light */ [data-theme="light"] .form-group input:focus, [data-theme="light"] .form-group select:focus, [data-theme="light"] .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10); } /* ============================================================================ SCROLLBARS ============================================================================ */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); } /* ============================================================================ ANIMATIONS ============================================================================ */ @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .projects-grid { grid-template-columns: 1fr; } .section-header, .chart-header, .ml-header { flex-direction: column; align-items: flex-start; gap: 12px; } .user-info span { display: none; } .modal-content { padding: 22px; } .project-actions { grid-template-columns: 1fr; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .container { padding: 0 4%; margin: 16px auto; } }