body {
margin: 0;
min-height: 100vh;
background: var(--bg-primary);
color: var(--text-primary);
font-family: 'Poppins', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* CSS Variables for theming */
:root {
/* Light theme (default) */
--bg-primary: linear-gradient(135deg, #E2EBFF 0%, #F8FAFF 100%);
--bg-secondary: #FFFFFF;
--bg-tertiary: #F8FAFF;
--bg-card: #FFFFFF;
--bg-sidebar: #FFFFFF;
--bg-input: #FFFFFF;
--bg-button: #FFFFFF;
--bg-button-hover: #F5F5F5;
--bg-button-primary: linear-gradient(135deg, #2042be, #002DCB);
--bg-button-primary-hover: linear-gradient(135deg, #1a3aa8, #0025a8);
--bg-button-secondary: #F8FAFF;
--bg-button-secondary-hover: #E2EBFF;
--bg-button-tertiary: transparent;
--bg-button-tertiary-hover: rgba(0, 45, 203, 0.05);
--text-primary: #040F34;
--text-secondary: #6B7280;
--text-tertiary: #9CA3AF;
--text-inverse: #FFFFFF;
--text-link: #002DCB;
--text-link-hover: #1a3aa8;
--border-primary: #E5E7EB;
--border-secondary: #D1D5DB;
--border-focus: #002DCB;
--border-input: #D1D5DB;
--border-input-focus: #002DCB;
--shadow-primary: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-secondary: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-button: 0 2px 8px rgba(0, 45, 203, 0.10);
--shadow-button-hover: 0 4px 16px rgba(0, 45, 203, 0.15);
--accent-primary: #002DCB;
--accent-secondary: #2042be;
--accent-success: #10B981;
--accent-warning: #F59E0B;
--accent-error: #EF4444;
--accent-info: #3B82F6;
--overlay: rgba(0, 0, 0, 0.5);
--backdrop: rgba(255, 255, 255, 0.9);
}
/* Dark theme */
[data-theme="dark"] {
--bg-primary: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
--bg-secondary: #1E293B;
--bg-tertiary: #334155;
--bg-card: #334155;
--bg-sidebar: #1E293B;
--bg-input: #475569;
--bg-button: #475569;
--bg-button-hover: #64748B;
--bg-button-primary: linear-gradient(135deg, #3B82F6, #1D4ED8);
--bg-button-primary-hover: linear-gradient(135deg, #2563EB, #1E40AF);
--bg-button-secondary: #475569;
--bg-button-secondary-hover: #64748B;
--bg-button-tertiary: transparent;
--bg-button-tertiary-hover: rgba(59, 130, 246, 0.1);
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-tertiary: #94A3B8;
--text-inverse: #0F172A;
--text-link: #60A5FA;
--text-link-hover: #93C5FD;
--border-primary: #475569;
--border-secondary: #64748B;
--border-focus: #3B82F6;
--border-input: #64748B;
--border-input-focus: #3B82F6;
--shadow-primary: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-secondary: 0 4px 6px rgba(0, 0, 0, 0.2);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-button: 0 2px 8px rgba(59, 130, 246, 0.2);
--shadow-button-hover: 0 4px 16px rgba(59, 130, 246, 0.3);
--accent-primary: #3B82F6;
--accent-secondary: #60A5FA;
--accent-success: #10B981;
--accent-warning: #F59E0B;
--accent-error: #EF4444;
--accent-info: #3B82F6;
--overlay: rgba(0, 0, 0, 0.7);
--backdrop: rgba(30, 41, 59, 0.9);
}
/* Theme toggle button styles */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-card);
}
.theme-toggle:hover {
transform: scale(1.1);
box-shadow: var(--shadow-secondary);
}
.theme-toggle .material-icons {
font-size: 24px;
color: var(--text-primary);
transition: all 0.3s ease;
}
.theme-toggle:hover .material-icons {
color: var(--accent-primary);
}
/* Apply theme variables to existing elements */
body {
background: var(--bg-primary);
color: var(--text-primary);
}
.login-background {
background: var(--bg-primary);
}
.login-container {
background: var(--bg-card);
box-shadow: var(--shadow-card);
}
.login-box {
background: var(--bg-card);
box-shadow: var(--shadow-card);
}
.form-control {
background: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
.form-control:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.form-control::placeholder {
color: var(--text-tertiary);
}
.container {
background: var(--bg-secondary);
}
.section {
background: var(--bg-card);
box-shadow: var(--shadow-card);
}
.section-title {
color: var(--text-primary);
}
.sidebar {
background: var(--bg-sidebar);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
.sidebar-nav {
flex: 1;
}
.sidebar-footer {
padding: 1.5rem 1rem 1.75rem;
border-top: 1px solid var(--border-primary);
margin-top: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.theme-toggle-sidebar {
width: 100%;
justify-content: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 8px;
transition: all 0.2s ease;
}
.theme-toggle-sidebar:hover {
background: var(--bg-button-tertiary-hover);
transform: translateX(2px);
}
.sidebar-button {
color: var(--text-secondary);
background: var(--bg-button-tertiary);
}
.sidebar-button:hover,
.sidebar-button.selected {
background: var(--bg-button-tertiary-hover);
color: var(--text-primary);
}
.button {
background: var(--bg-button);
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
.button.primary {
background: var(--bg-button-primary);
color: var(--text-inverse);
--btn-base-padding-y: 1em;
--btn-base-padding-x: 1.5em;
--btn-radius: 1em;
--btn-base-bg: var(--primary);
--btn-base-bg-hover: var(--secondary);
--btn-base-color: var(--white);
--btn-base-border-width: 1px;
transition: opacity .3s, transform .1s, background-color .3s;
font-weight: 500;
display: inline-flex;
align-items: center;
text-align: center;
padding: var(--btn-padding-y, var(--btn-base-padding-y)) var(--btn-padding-x, var(--btn-base-padding-x));
background-color: var(--btn-bg, var(--btn-base-bg));
letter-spacing: -.02em;
border-radius: var(--btn-radius, 1em);
color: var(--btn-color, rgb(242,246,254));
white-space: nowrap;
line-height: 1.1;
gap: .65em;
border: var(--btn-border-width, var(--btn-base-border-width)) solid transparent;
justify-content: center;
position: relative;
}
.button.secondary {
background: var(--bg-button-secondary);
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
.button.tertiary {
background: var(--bg-button-tertiary);
color: var(--text-secondary);
border: none;
}
.button:hover {
box-shadow: var(--shadow-button-hover);
}
.status-badge {
background: var(--bg-button);
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
.status-badge.active {
background: var(--accent-success);
color: var(--text-inverse);
}
.status-badge.inactive {
background: var(--accent-error);
color: var(--text-inverse);
}
.logs-container {
background: var(--bg-input);
border: 1px solid var(--border-primary);
}
.logs-container pre {
color: var(--text-primary);
}
.modal {
background: var(--overlay);
}
.modal-content {
background: var(--bg-card);
box-shadow: var(--shadow-card);
}
.modal-header h3 {
color: var(--text-primary);
}
.notification {
background: var(--bg-card);
border: 1px solid var(--border-primary);
box-shadow: var(--shadow-card);
}
.notification-title {
color: var(--text-primary);
}
.notification-message {
color: var(--text-secondary);
}
/* Additional dark theme styles */
[data-theme="dark"] .shape {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
}
[data-theme="dark"] .logo-container img {
filter: brightness(0) invert(1);
}
[data-theme="dark"] .sidebar-logo img {
filter: brightness(0) invert(1);
}
[data-theme="dark"] .sidebar-logo-mobile img {
filter: brightness(0) invert(1);
}
[data-theme="dark"] .genesis-category {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .genesis-category:hover:not(.disabled) {
background: var(--bg-button-hover);
border-color: var(--accent-primary);
}
[data-theme="dark"] .genesis-category.selected {
background: var(--accent-primary);
border-color: var(--accent-primary);
}
[data-theme="dark"] .genesis-category.disabled {
background: var(--bg-tertiary);
border-color: var(--border-secondary);
opacity: 0.6;
pointer-events: none;
}
[data-theme="dark"] .setup-progress .step-card {
background: rgba(30, 41, 59, 0.92);
border: 1px solid rgba(148, 163, 184, 0.28);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.55);
}
[data-theme="dark"] .setup-progress .step-item.is-active .step-card {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(30, 64, 175, 0.25));
border-color: rgba(96, 165, 250, 0.55);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.6);
}
[data-theme="dark"] .setup-progress .step-item.is-completed .step-card {
background: rgba(30, 41, 59, 0.82);
border-color: rgba(96, 165, 250, 0.4);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.5);
}
[data-theme="dark"] .setup-progress .step-dot {
background: rgba(96, 165, 250, 0.22);
color: var(--text-primary);
}
[data-theme="dark"] .setup-progress .step-dot.active {
background: linear-gradient(135deg, rgba(147, 197, 253, 0.95), rgba(59, 130, 246, 0.8));
color: var(--text-inverse);
box-shadow: 0 14px 26px rgba(15, 23, 42, 0.45);
}
[data-theme="dark"] .setup-progress .step-dot.completed {
background: rgba(96, 165, 250, 0.55);
color: var(--text-inverse);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.4);
}
[data-theme="dark"] .setup-progress .step-label {
color: var(--text-secondary);
}
[data-theme="dark"] .setup-progress .step-description {
color: rgba(148, 163, 184, 0.65);
}
[data-theme="dark"] .peer-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .peer-card:hover {
background: var(--bg-button-hover);
border-color: var(--accent-primary);
}
[data-theme="dark"] .peer-card.my-node {
background: var(--accent-primary);
border-color: var(--accent-primary);
}
[data-theme="dark"] .validator-card,
[data-theme="dark"] .wallet-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .backups-table th {
background: var(--bg-tertiary);
color: var(--text-primary);
}
[data-theme="dark"] .backups-table td {
border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .backups-table tr:hover {
background: var(--bg-button-hover);
}
[data-theme="dark"] .assets-table th,
[data-theme="dark"] .delegations-table th {
background: var(--bg-tertiary);
color: var(--text-primary);
}
[data-theme="dark"] .assets-table td,
[data-theme="dark"] .delegations-table td {
border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .assets-table tr:hover,
[data-theme="dark"] .delegations-table tr:hover {
background: var(--bg-button-hover);
}
[data-theme="dark"] .address-container {
background: var(--bg-input);
border: 1px solid var(--border-primary);
color: var(--text-primary);
}
[data-theme="dark"] .setting-input {
background: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .setting-input:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
[data-theme="dark"] .setting-input::placeholder {
color: var(--text-tertiary);
}
[data-theme="dark"] .setting-select {
background: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .setting-select:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
[data-theme="dark"] .setting-select option {
background: var(--bg-input);
color: var(--text-primary);
}
[data-theme="dark"] .mode-option {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .mode-option:hover {
background: var(--bg-button-hover);
border-color: var(--accent-primary);
}
[data-theme="dark"] .mode-option input[type="radio"]:checked + .mode-content {
background: var(--accent-primary);
border-color: var(--accent-primary);
}
/* Scrollbar styles for dark theme */
[data-theme="dark"] *::-webkit-scrollbar-track {
background: var(--bg-tertiary);
}
[data-theme="dark"] *::-webkit-scrollbar-thumb {
background: var(--border-secondary);
}
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
background: var(--border-primary);
}
/* Focus styles for accessibility */
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] .button:focus-visible {
outline: 2px solid var(--accent-primary) !important;
outline-offset: 2px !important;
}
/* Additional dark theme improvements */
[data-theme="dark"] .setup-box {
background: rgba(15, 23, 42, 0.92);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 32px 64px rgba(15, 23, 42, 0.55);
}
[data-theme="dark"] .setup-sidebar {
background: linear-gradient(150deg, rgba(37, 99, 235, 0.95), rgba(30, 64, 175, 0.82));
}
[data-theme="dark"] .setup-sidebar-checklist {
background: rgba(15, 23, 42, 0.3);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.55);
}
[data-theme="dark"] .setup-sidebar-tips {
background: rgba(15, 23, 42, 0.35);
border-color: rgba(148, 163, 184, 0.25);
color: var(--text-secondary);
}
[data-theme="dark"] .tips-label {
color: rgba(148, 163, 184, 0.7);
}
[data-theme="dark"] .setup-card {
background: rgba(30, 41, 59, 0.9);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.5);
}
[data-theme="dark"] .setup-card-header h2 {
color: var(--text-primary);
}
[data-theme="dark"] .setup-card-header p,
[data-theme="dark"] .setup-subtitle,
[data-theme="dark"] .info-text {
color: var(--text-secondary);
}
[data-theme="dark"] .section-divider::before {
background: rgba(148, 163, 184, 0.3);
}
[data-theme="dark"] .section-divider span {
background: rgba(30, 41, 59, 0.9);
color: var(--text-secondary);
}
[data-theme="dark"] .genesis-category {
background: rgba(30, 41, 59, 0.9);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.45);
}
[data-theme="dark"] .genesis-category:hover {
border-color: rgba(96, 165, 250, 0.5);
box-shadow: 0 26px 48px rgba(15, 23, 42, 0.6);
}
[data-theme="dark"] .genesis-category.selected {
border-color: rgba(96, 165, 250, 0.6);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.16));
}
[data-theme="dark"] .genesis-category-title {
color: var(--text-primary);
}
[data-theme="dark"] .genesis-category-description {
color: var(--text-secondary);
}
[data-theme="dark"] .action-button,
[data-theme="dark"] .primary-button {
box-shadow: 0 18px 36px rgba(59, 130, 246, 0.35);
}
[data-theme="dark"] .secondary-button {
background: rgba(59, 130, 246, 0.18);
color: var(--text-primary);
}
[data-theme="dark"] .secondary-button:hover {
background: rgba(59, 130, 246, 0.25);
}
[data-theme="dark"] .setup-title {
color: var(--accent-primary);
}
[data-theme="dark"] .section-divider.solid {
background: var(--border-primary);
}
[data-theme="dark"] .section-divider:not(.solid)::before {
background: var(--border-primary);
}
[data-theme="dark"] .genesis-category-icon {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .genesis-category-icon .material-icons {
color: var(--text-secondary);
}
[data-theme="dark"] .genesis-category-badge {
background: rgba(59, 130, 246, 0.1);
color: var(--accent-primary);
}
[data-theme="dark"] .genesis-category.selected .genesis-category-badge {
background: var(--accent-primary);
color: var(--text-inverse);
}
[data-theme="dark"] .logs-container pre .log-info {
color: var(--accent-primary);
}
[data-theme="dark"] .logs-container pre .log-success {
color: var(--accent-success);
}
[data-theme="dark"] .logs-container pre .log-warning {
color: var(--accent-warning);
}
[data-theme="dark"] .logs-container pre .log-error {
color: var(--accent-error);
}
[data-theme="dark"] .logs-container pre .log-timestamp {
color: var(--text-tertiary);
}
[data-theme="dark"] .logs-container pre .log-address {
color: var(--text-tertiary);
}
[data-theme="dark"] .logs-container pre .log-hash {
color: var(--text-tertiary);
}
[data-theme="dark"] .peer-section-title {
color: var(--text-primary);
}
[data-theme="dark"] .peer-id {
color: var(--text-primary);
}
[data-theme="dark"] .peer-address {
color: var(--text-secondary);
}
[data-theme="dark"] .peer-type {
color: var(--text-tertiary);
}
[data-theme="dark"] .no-peers {
color: var(--text-secondary);
}
[data-theme="dark"] .no-peers .material-icons {
color: var(--text-tertiary);
}
[data-theme="dark"] .no-peers p {
color: var(--text-secondary);
}
[data-theme="dark"] .mode-title {
color: var(--text-primary);
}
[data-theme="dark"] .mode-description {
color: var(--text-secondary);
}
[data-theme="dark"] .mode-description code {
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .warning-message {
background: var(--bg-tertiary);
border: 1px solid var(--accent-warning);
color: var(--text-primary);
}
[data-theme="dark"] .info-message {
background: var(--bg-tertiary);
border: 1px solid var(--accent-info);
color: var(--text-primary);
}
[data-theme="dark"] .snapshot-info {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .snapshot-info h4 {
color: var(--text-primary);
}
[data-theme="dark"] .snapshot-info p {
color: var(--text-secondary);
}
[data-theme="dark"] .snapshot-info strong {
color: var(--text-primary);
}
[data-theme="dark"] .backup-preview {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .backup-preview h4 {
color: var(--text-primary);
}
[data-theme="dark"] .preview-item strong {
color: var(--text-primary);
}
[data-theme="dark"] .error-message {
background: var(--bg-tertiary);
border: 1px solid var(--accent-error);
}
[data-theme="dark"] .error-message h4 {
color: var(--text-primary);
}
[data-theme="dark"] .error-message p {
color: var(--text-secondary);
}
[data-theme="dark"] .upload-success-info {
background: var(--bg-tertiary);
border: 1px solid var(--accent-success);
}
[data-theme="dark"] .upload-success-info h4 {
color: var(--text-primary);
}
[data-theme="dark"] .upload-success-info p {
color: var(--text-secondary);
}
[data-theme="dark"] .upload-success-info strong {
color: var(--text-primary);
}
[data-theme="dark"] .b2-links-section h4 {
color: var(--text-primary);
}
[data-theme="dark"] .b2-link-item label {
color: var(--text-primary);
}
[data-theme="dark"] .upload-stats h4 {
color: var(--text-primary);
}
[data-theme="dark"] .stats-grid .stat-label {
color: var(--text-secondary);
}
[data-theme="dark"] .stats-grid .stat-value {
color: var(--text-primary);
}
[data-theme="dark"] .backup-info {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .backup-info h4 {
color: var(--text-primary);
}
[data-theme="dark"] .backup-info p {
color: var(--text-secondary);
}
[data-theme="dark"] .backup-info strong {
color: var(--text-primary);
}
[data-theme="dark"] .backup-info span {
color: var(--text-tertiary);
}
/* Dark theme styles for form controls */
[data-theme="dark"] .form-control {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .form-control:focus {
background-color: var(--bg-input);
border-color: var(--border-input-focus);
box-shadow: 0 0 0 2px rgba(0, 45, 203, 0.1);
}
[data-theme="dark"] .form-control::placeholder {
color: var(--text-tertiary);
}
[data-theme="dark"] .form-control.is-valid {
background-color: var(--bg-input);
border-color: var(--accent-success);
}
[data-theme="dark"] .form-control.is-invalid {
background-color: var(--bg-input);
border-color: var(--accent-error);
}
[data-theme="dark"] .setting-input {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .setting-input:focus {
background-color: var(--bg-input);
border-color: var(--border-input-focus);
}
[data-theme="dark"] .setting-input::placeholder {
color: var(--text-tertiary);
}
[data-theme="dark"] .setting-select {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .setting-select:focus {
background-color: var(--bg-input);
border-color: var(--border-input-focus);
}
[data-theme="dark"] .setting-select option {
background-color: var(--bg-input);
color: var(--text-primary);
}
[data-theme="dark"] .input-group input {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .input-group input:focus {
background-color: var(--bg-input);
border-color: var(--border-input-focus);
}
[data-theme="dark"] .input-group input::placeholder {
color: var(--text-tertiary);
}
[data-theme="dark"] .form-group input {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .form-group input:focus {
background-color: var(--bg-input);
border-color: var(--border-input-focus);
}
[data-theme="dark"] .form-group input::placeholder {
color: var(--text-tertiary);
}
[data-theme="dark"] .modal-body .form-control {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .modal-body .form-control:focus {
background-color: var(--bg-input);
border-color: var(--border-input-focus);
}
[data-theme="dark"] .modal-body .form-control::placeholder {
color: var(--text-tertiary);
}
[data-theme="dark"] .link-container .form-control {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .link-container .form-control:focus {
background-color: var(--bg-input);
border-color: var(--border-input-focus);
}
[data-theme="dark"] .button.secondary:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .button.tertiary:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .button:hover i {
color: var(--text-inverse);
}
[data-theme="dark"] .button.secondary i {
color: var(--text-inverse);
}
[data-theme="dark"] .button.tertiary i {
color: var(--text-inverse);
}
[data-theme="dark"] .action-button {
color: var(--text-inverse);
}
[data-theme="dark"] .action-button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .primary-button {
color: var(--text-inverse);
}
[data-theme="dark"] .primary-button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .secondary-button {
color: var(--text-inverse);
}
[data-theme="dark"] .secondary-button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .send-button {
color: var(--text-inverse);
}
[data-theme="dark"] .send-button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .copy-button {
color: var(--text-inverse);
}
[data-theme="dark"] .copy-button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .unjail-button {
color: var(--text-inverse);
}
[data-theme="dark"] .unjail-button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .form-submit {
color: var(--text-inverse);
}
[data-theme="dark"] .form-submit:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .b2-config-button {
color: var(--text-inverse);
}
[data-theme="dark"] .b2-config-button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .modal-footer .button {
color: var(--text-inverse);
}
[data-theme="dark"] .modal-footer .button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .modal-footer .button.primary {
color: var(--text-inverse);
}
[data-theme="dark"] .modal-footer .button.primary:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .modal-footer .button.secondary {
color: var(--text-inverse);
}
[data-theme="dark"] .modal-footer .button.secondary:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .link-container .button {
color: var(--text-inverse);
}
[data-theme="dark"] .link-container .button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .delegations-table .actions-cell .button {
color: var(--text-inverse);
}
[data-theme="dark"] .delegations-table .actions-cell .button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .button.small {
color: var(--text-inverse);
}
[data-theme="dark"] .button.small:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .button.small:hover .material-icons {
color: var(--text-inverse);
}
[data-theme="dark"] .header-actions .button {
color: var(--text-inverse);
}
[data-theme="dark"] .header-actions .button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .control-logs .button {
color: var(--text-inverse);
}
[data-theme="dark"] .control-logs .button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .peer-actions .button {
color: var(--text-inverse);
}
[data-theme="dark"] .peer-actions .button:hover {
color: var(--text-inverse);
}
[data-theme="dark"] .peer-actions .button .material-icons {
color: var(--text-inverse);
}
[data-theme="dark"] .peer-actions .button:hover .material-icons {
color: var(--text-inverse);
}
[data-theme="dark"] button.btn {
color: var(--text-inverse);
}
[data-theme="dark"] button.btn:hover {
color: var(--text-inverse);
}
[data-theme="dark"] button.btn .material-icons {
color: var(--text-inverse);
}
[data-theme="dark"] button.btn:hover .material-icons {
color: var(--text-inverse);
}
/* Additional dark theme fixes */
[data-theme="dark"] .shape {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
}
[data-theme="dark"] .status-badge {
background: var(--bg-button-secondary);
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .status-badge.active {
background: var(--accent-success);
color: var(--text-inverse);
border: 1px solid var(--accent-success);
}
[data-theme="dark"] .status-badge.inactive {
background: var(--accent-error);
color: var(--text-inverse);
border: 1px solid var(--accent-error);
}
[data-theme="dark"] .status-overview-card::after {
background: radial-gradient(140% 120% at 100% 0%, rgba(96, 165, 250, 0.14) 0%, rgba(30, 64, 175, 0.18) 40%, rgba(15, 23, 42, 0) 75%);
}
[data-theme="dark"] .status-hero-block {
background: var(--bg-tertiary);
border-color: var(--border-primary);
}
[data-theme="dark"] .node-address-chip {
background: var(--bg-card);
border-color: var(--border-primary);
color: var(--text-primary);
}
[data-theme="dark"] .icon-button {
background: var(--bg-button-tertiary);
border-color: var(--border-primary);
color: var(--text-secondary);
}
[data-theme="dark"] .icon-button:hover {
background: var(--bg-button-tertiary-hover);
color: var(--accent-primary);
}
[data-theme="dark"] .status-card {
background: var(--bg-card);
border-color: var(--border-primary);
}
[data-theme="dark"] .node-overview {
background: var(--bg-tertiary);
border-color: var(--border-primary);
}
[data-theme="dark"] .summary-item {
background: var(--bg-tertiary);
border-color: var(--border-primary);
}
[data-theme="dark"] .node-controls {
background: var(--bg-tertiary);
border-color: var(--border-primary);
}
[data-theme="dark"] .controls-header .material-icons {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(96, 165, 250, 0.28);
color: var(--accent-primary);
}
[data-theme="dark"] .status-pill {
background: rgba(51, 65, 85, 0.65);
border-color: rgba(99, 102, 241, 0.25);
color: var(--text-primary);
}
[data-theme="dark"] .hint {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(96, 165, 250, 0.25);
color: var(--text-secondary);
}
[data-theme="dark"] .genesis-category-icon {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .genesis-category-icon .material-icons {
color: var(--text-secondary);
}
[data-theme="dark"] .genesis-category.selected .genesis-category-icon {
background: var(--accent-primary);
border: 1px solid var(--accent-primary);
}
[data-theme="dark"] .genesis-category.selected .genesis-category-icon .material-icons {
color: var(--text-inverse);
}
[data-theme="dark"] .genesis-category-badge {
background: rgba(59, 130, 246, 0.1);
color: var(--accent-primary);
}
[data-theme="dark"] .genesis-category.selected .genesis-category-badge {
background: var(--accent-primary);
color: var(--text-inverse);
}
[data-theme="dark"] .setup-progress .step-card {
background: rgba(30, 41, 59, 0.92);
border: 1px solid rgba(148, 163, 184, 0.28);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.55);
}
[data-theme="dark"] .setup-progress .step-item.is-active .step-card {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(30, 64, 175, 0.25));
border-color: rgba(96, 165, 250, 0.55);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.6);
}
[data-theme="dark"] .setup-progress .step-item.is-completed .step-card {
background: rgba(30, 41, 59, 0.82);
border-color: rgba(96, 165, 250, 0.4);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.5);
}
[data-theme="dark"] .setup-progress .step-dot {
background: rgba(96, 165, 250, 0.22);
color: var(--text-primary);
}
[data-theme="dark"] .setup-progress .step-dot.active {
background: linear-gradient(135deg, rgba(147, 197, 253, 0.95), rgba(59, 130, 246, 0.8));
color: var(--text-inverse);
box-shadow: 0 14px 26px rgba(15, 23, 42, 0.45);
}
[data-theme="dark"] .setup-progress .step-dot.completed {
background: rgba(96, 165, 250, 0.55);
color: var(--text-inverse);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.4);
}
[data-theme="dark"] .setup-progress .step-label {
color: var(--text-secondary);
}
[data-theme="dark"] .setup-progress .step-description {
color: rgba(148, 163, 184, 0.65);
}
[data-theme="dark"] .peer-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .peer-card:hover {
background: var(--bg-button-secondary);
border-color: var(--accent-primary);
}
[data-theme="dark"] .peer-card.my-node {
background: var(--bg-button-secondary);
border-color: var(--accent-primary);
}
[data-theme="dark"] .validator-card,
[data-theme="dark"] .wallet-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .backups-table th {
background: var(--bg-tertiary);
color: var(--text-primary);
border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .backups-table td {
background: var(--bg-card);
color: var(--text-primary);
border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .backups-table tr:hover {
background: var(--bg-button-secondary);
}
[data-theme="dark"] .assets-table th,
[data-theme="dark"] .delegations-table th {
background: var(--bg-tertiary);
color: var(--text-primary);
border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .assets-table td,
[data-theme="dark"] .delegations-table td {
background: var(--bg-card);
color: var(--text-primary);
border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .assets-table tr:hover,
[data-theme="dark"] .delegations-table tr:hover {
background: var(--bg-button-secondary);
}
[data-theme="dark"] .address-container {
background: var(--bg-card);
border: 1px solid var(--border-primary);
color: var(--text-primary);
}
[data-theme="dark"] .setting-input {
background: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .setting-input:focus {
background: var(--bg-input);
border-color: var(--border-input-focus);
}
[data-theme="dark"] .setting-input::placeholder {
color: var(--text-tertiary);
}
[data-theme="dark"] .setting-select {
background: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .setting-select:focus {
background: var(--bg-input);
border-color: var(--border-input-focus);
}
[data-theme="dark"] .setting-select option {
background: var(--bg-input);
color: var(--text-primary);
}
[data-theme="dark"] .mode-option {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .mode-option:hover {
background: var(--bg-button-secondary);
border-color: var(--accent-primary);
}
[data-theme="dark"] .mode-option input[type="radio"]:checked + .mode-content {
background: var(--bg-button-secondary);
border-color: var(--accent-primary);
}
/* Dark theme styles for login page */
[data-theme="dark"] .login-container {
background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
border: 1px solid rgba(148, 163, 184, 0.18);
box-shadow:
0 24px 48px rgba(15, 23, 42, 0.65),
inset 0 1px 0 rgba(148, 163, 184, 0.08);
}
[data-theme="dark"] .login-container:hover {
box-shadow:
0 28px 60px rgba(15, 23, 42, 0.72),
inset 0 1px 0 rgba(148, 163, 184, 0.12);
}
[data-theme="dark"] .login-showcase {
background: linear-gradient(155deg, rgba(37, 99, 235, 0.95), rgba(30, 64, 175, 0.82));
}
[data-theme="dark"] .login-showcase::after {
background: linear-gradient(0deg, rgba(15, 23, 42, 0.4), transparent 50%);
}
[data-theme="dark"] .login-highlights li {
background: rgba(255, 255, 255, 0.16);
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.5);
}
[data-theme="dark"] .brand-name,
[data-theme="dark"] .brand-tagline,
[data-theme="dark"] .showcase-text {
color: #ffffff;
opacity: 0.9;
}
[data-theme="dark"] .login-panel {
background: rgba(15, 23, 42, 0.88);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .login-title {
background: var(--accent-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="dark"] .login-subtitle {
color: var(--text-secondary);
}
[data-theme="dark"] .login-panel .btn {
box-shadow: 0 2px 12px rgba(59, 130, 246, 0.32);
}
[data-theme="dark"] .login-panel .btn:hover {
box-shadow: 0 4px 18px rgba(59, 130, 246, 0.45);
}
[data-theme="dark"] .form-label {
color: var(--text-primary);
}
[data-theme="dark"] .form-label .material-icons {
color: var(--accent-primary);
}
/* Dark theme styles for sidebar */
[data-theme="dark"] .sidebar {
background: var(--bg-sidebar);
border-right: 1px solid var(--border-primary);
}
[data-theme="dark"] .sidebar-logo {
background: var(--bg-sidebar);
border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .sidebar-nav {
background: var(--bg-sidebar);
}
[data-theme="dark"] .sidebar-footer {
background: var(--bg-sidebar);
border-top: 1px solid var(--border-primary);
}
[data-theme="dark"] .sidebar-button {
background: transparent;
color: var(--text-secondary);
border: none;
transition: all 0.3s ease;
}
[data-theme="dark"] .sidebar-button:hover {
background: var(--bg-button-secondary-hover);
color: var(--text-primary);
}
[data-theme="dark"] .sidebar-logo-title {
color: var(--text-primary);
}
[data-theme="dark"] .sidebar-logo-subtitle {
color: var(--text-secondary);
}
[data-theme="dark"] .sidebar-group-label {
color: var(--text-tertiary);
}
[data-theme="dark"] .sidebar-link-badge {
background: rgba(96, 165, 250, 0.18);
border-color: rgba(96, 165, 250, 0.35);
color: var(--accent-primary);
}
[data-theme="dark"] .sidebar-footer-meta {
background: var(--bg-tertiary);
border-color: var(--border-primary);
color: var(--text-secondary);
}
[data-theme="dark"] .sidebar-button.selected {
background: var(--bg-button-primary);
color: var(--text-inverse);
}
[data-theme="dark"] .sidebar-button.selected:hover {
background: var(--bg-button-primary-hover);
color: var(--text-inverse);
}
[data-theme="dark"] .sidebar-button i {
color: inherit;
}
[data-theme="dark"] .sidebar-button:hover i {
color: inherit;
}
[data-theme="dark"] .sidebar-button span {
color: inherit;
}
[data-theme="dark"] .sidebar-button.selected span {
color: inherit;
}
[data-theme="dark"] .sidebar-logo-mobile {
background: var(--bg-sidebar);
border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-track {
background: var(--bg-tertiary);
}
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
background: var(--border-primary);
}
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
/* Suppression des contours noirs sur tous les boutons */
button,
button:focus,
button:active,
.btn,
.btn:focus,
.btn:active,
.button,
.button:focus,
.button:active {
outline: none !important;
border: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
box-shadow: none !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
button:focus-visible,
.btn:focus-visible,
.button:focus-visible {
outline: 2px solid #002DCB !important;
outline-offset: 2px !important;
}
.login-background {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: var(--bg-primary);
overflow: hidden;
}
.floating-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 45, 203, 0.05), rgba(0, 45, 203, 0.02));
animation: float 6s ease-in-out infinite;
}
.shape-1 {
width: 80px;
height: 80px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.shape-2 {
width: 120px;
height: 120px;
top: 20%;
right: 15%;
animation-delay: 2s;
}
.shape-3 {
width: 60px;
height: 60px;
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
.shape-4 {
width: 100px;
height: 100px;
bottom: 10%;
right: 10%;
animation-delay: 1s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.7;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 1;
}
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: var(--bg-button-secondary);
}
*::-webkit-scrollbar-thumb {
background: var(--bg-button-secondary);
border-radius: 4px;
transition: background 0.3s ease;
}
*::-webkit-scrollbar-thumb:hover {
background: var(--accent-primary);
}
/* Additional rules to prevent a white corner */
*::-webkit-scrollbar-corner {
background: transparent;
}
/* LOGIN */
.login-container {
width: 100%;
margin: 0 auto;
max-width: 1040px;
padding: 0;
border-radius: 28px;
overflow: hidden;
backdrop-filter: blur(24px);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(226, 235, 255, 0.92));
box-shadow:
0 24px 48px rgba(0, 45, 203, 0.12),
0 12px 24px rgba(0, 45, 203, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
z-index: 2;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-container:hover {
transform: translateY(-3px);
box-shadow:
0 28px 60px rgba(0, 45, 203, 0.14),
0 18px 36px rgba(0, 45, 203, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.login-layout {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
grid-template-areas: "showcase panel";
min-height: 100%;
}
.login-layout > * {
box-sizing: border-box;
}
.login-showcase {
grid-area: showcase;
position: relative;
overflow: hidden;
background: linear-gradient(155deg, rgba(0, 45, 203, 0.92), rgba(32, 66, 190, 0.78));
color: #ffffff;
padding: 3.25rem 3rem;
display: flex;
align-items: flex-end;
}
.login-showcase::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.28), transparent 60%);
opacity: 0.85;
z-index: 1;
}
.login-showcase::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), transparent 45%);
opacity: 0.55;
z-index: 1;
}
.login-showcase-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 2.25rem;
}
.login-showcase .logo-container {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin: 0;
}
.login-showcase .logo-wrapper {
position: relative;
display: inline-flex;
padding: 0.9rem;
border-radius: 20px;
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
overflow: visible;
}
.login-showcase .logo-container img {
height: 64px;
width: auto;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
position: relative;
z-index: 2;
}
.logo-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 110px;
height: 110px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 72%);
border-radius: 50%;
z-index: 1;
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.85;
}
}
.brand-copy {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.brand-name {
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.brand-tagline {
font-size: 0.95rem;
font-weight: 400;
opacity: 0.85;
}
.showcase-title {
font-size: 2.15rem;
font-weight: 600;
line-height: 1.25;
margin: 0;
}
.showcase-text {
font-size: 1rem;
line-height: 1.75;
opacity: 0.9;
margin: 0;
max-width: 420px;
}
.login-highlights {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.85rem;
}
.login-highlights li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
line-height: 1.5;
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
padding: 0.75rem 1rem;
border-radius: 14px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(16px);
}
.login-highlights .material-icons {
font-size: 1.2rem;
opacity: 0.95;
}
.login-box {
background: none;
padding: 0;
border-radius: 0;
position: relative;
text-align: left;
display: flex;
}
.login-panel {
grid-area: panel;
background: var(--bg-card);
padding: 3.25rem 3rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2rem;
width: 100%;
}
.login-header {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.login-title {
color: var(--accent-primary);
font-size: 2.1rem;
font-weight: 700;
margin: 0;
text-align: left;
letter-spacing: -0.5px;
line-height: 1.2;
background: var(--bg-button-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 4px rgba(0, 45, 203, 0.1);
}
.login-subtitle {
color: var(--text-secondary);
font-size: 1rem;
margin: 0;
text-align: left;
font-weight: 400;
letter-spacing: 0.2px;
line-height: 1.6;
max-width: 360px;
opacity: 0.9;
}
.login-panel form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.login-panel .form-group {
margin: 0;
}
.login-panel .input-container {
margin-bottom: 0;
}
.login-panel .invalid-feedback {
margin-top: 0.35rem;
}
.login-panel .btn {
margin-top: 0.5rem;
height: 56px;
font-size: 1rem;
border-radius: 14px;
box-shadow: var(--shadow-button);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.login-panel .btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-button-hover);
}
.login-panel .btn .material-icons {
font-size: 1.3rem;
}
.form-group {
margin-bottom: 2rem;
text-align: left;
}
.input-wrapper {
position: relative;
}
.form-label {
color: var(--text-secondary);
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
letter-spacing: 0.3px;
}
.form-label .material-icons {
font-size: 1.1rem;
color: var(--accent-primary);
opacity: 0.8;
}
.input-container {
position: relative;
margin-bottom: 1rem;
display: block;
}
.form-control {
background-color: var(--bg-input);
border: 2px solid var(--border-input);
color: var(--text-primary) !important;
padding: 1rem 1.25rem;
border-radius: 12px;
font-size: 0.95rem;
width: 100%;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-text-fill-color: var(--text-primary);
letter-spacing: 0.3px;
font-weight: 500;
backdrop-filter: blur(10px);
box-sizing: border-box;
}
.input-border {
display: none;
}
.input-focus-border {
display: none;
}
.form-control::placeholder {
color: var(--text-secondary);
font-weight: 300;
letter-spacing: 0.2px;
opacity: 0.8;
}
.form-control:focus {
outline: none;
border: 2px solid var(--border-input-focus);
box-shadow: 0 0 0 0 rgba(0, 45, 203, 0.10);
background-color: var(--bg-input);
}
.form-control.is-valid {
border-color: var(--accent-primary);
background-color: var(--bg-input);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23002DCB' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
transition: none;
}
.form-control.is-invalid {
border-color: var(--text-secondary);
background-color: var(--bg-input);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23828DB3'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23828DB3' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
transition: none;
}
button.btn {
position: relative;
overflow: hidden;
background: var(--bg-button-primary);
border: none;
color: var(--text-inverse) !important;
padding: 1rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: 10px;
width: 100%;
height: 48px;
cursor: pointer;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 45, 203, 0.10);
text-transform: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
z-index: 2;
}
.btn-content {
display: flex;
align-items: center;
gap: 0.5rem;
z-index: 2;
}
.btn .material-icons {
font-size: 1.2rem;
opacity: 0.85;
}
.btn-ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
background: rgba(0, 45, 203, 0.15);
pointer-events: none;
z-index: 1;
opacity: 0.7;
transition: transform 0.5s, opacity 0.5s;
}
.ripple-active {
transform: scale(2.5);
opacity: 0;
transition: transform 0.5s, opacity 0.5s;
}
button:hover {
background: var(--bg-button-primary);
color: var(--text-inverse);
box-shadow: 0 4px 16px rgba(0, 45, 203, 0.15);
outline: none;
border: none;
}
button:active {
opacity: 1;
outline: none;
border: none;
}
button:disabled {
background: var(--bg-button-secondary);
color: var(--text-secondary) !important;
opacity: 0.7;
cursor: not-allowed;
box-shadow: none;
outline: none;
border: none;
}
.invalid-feedback {
color: var(--text-secondary);
font-size: 0.8125rem;
margin-top: 0.5rem;
text-align: left;
letter-spacing: 0.2px;
line-height: 1.5;
}
.spinner-border {
border-width: 0.15em;
animation: spinner-border 0.75s linear infinite;
}
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
/* Responsive Design for Login */
@media (max-width: 1200px) {
.login-container {
max-width: 92%;
}
}
@media (max-width: 1024px) {
.login-container {
max-width: 720px;
}
.login-layout {
grid-template-columns: 1fr;
grid-template-areas:
"panel"
"showcase";
}
.login-showcase {
padding: 2.75rem 2.5rem;
align-items: flex-start;
}
.login-panel {
padding: 2.75rem 2.5rem;
}
}
@media (max-width: 768px) {
.login-container {
max-width: 94%;
border-radius: 22px;
}
.login-showcase {
padding: 2.25rem 2rem;
}
.login-panel {
padding: 2.25rem 2rem;
gap: 1.75rem;
}
.login-title {
font-size: 1.85rem;
}
.showcase-title {
font-size: 1.9rem;
}
.login-highlights {
gap: 0.75rem;
}
.login-highlights li {
font-size: 0.9rem;
padding: 0.65rem 0.9rem;
}
}
@media (max-width: 480px) {
.login-container {
margin: 1.25rem;
border-radius: 20px;
}
.login-showcase {
padding: 2rem 1.75rem;
}
.login-panel {
padding: 2rem 1.75rem;
}
.login-title {
font-size: 1.7rem;
}
.showcase-title {
font-size: 1.65rem;
}
.showcase-text {
font-size: 0.95rem;
}
.login-panel .btn {
height: 52px;
font-size: 0.95rem;
}
}
@media (max-width: 360px) {
.login-container {
margin: 1rem;
border-radius: 18px;
}
.login-showcase {
padding: 1.75rem 1.5rem;
}
.login-panel {
padding: 1.75rem 1.5rem;
gap: 1.5rem;
}
.login-title {
font-size: 1.5rem;
}
.showcase-title {
font-size: 1.5rem;
}
}
/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
.login-container {
margin: 1rem auto;
}
.login-showcase,
.login-panel {
padding: 2rem 1.5rem;
}
}
.container {
margin: 2rem auto;
padding: 0 2rem;
}
.header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
padding: 1rem 0;
}
.logo {
text-align: center;
}
.logo img {
height: 70px;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
transition: transform 0.3s ease;
}
.logo img:hover {
transform: translateY(-2px);
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
gap: 2rem;
}
.grid-container-one {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: auto auto;
gap: 2rem;
}
/* SETUP */
.setup-background {
position: relative;
min-height: 100vh;
padding: clamp(1.5rem, 3vw, 2.5rem);
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-primary);
overflow: visible;
box-sizing: border-box;
}
.setup-floating-shapes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.setup-shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 45, 203, 0.08), rgba(0, 45, 203, 0.02));
animation: float 8s ease-in-out infinite;
}
.setup-shape-1 {
width: 160px;
height: 160px;
top: 12%;
left: 8%;
}
.setup-shape-2 {
width: 220px;
height: 220px;
bottom: 15%;
right: 12%;
animation-delay: 2s;
}
.setup-shape-3 {
width: 120px;
height: 120px;
top: 55%;
left: 65%;
animation-delay: 4s;
}
.setup-container {
width: 100%;
max-width: 1160px;
height: 100%;
margin: 0 auto;
position: relative;
z-index: 2;
display: flex;
}
.setup-box {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(24px);
border-radius: 32px;
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow: 0 32px 64px rgba(0, 45, 203, 0.12);
overflow: visible;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
width: 100%;
height: auto;
min-height: 100%;
}
.setup-box:hover {
transform: translateY(-4px);
box-shadow: 0 36px 70px rgba(0, 45, 203, 0.15);
}
.setup-layout {
display: grid;
grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
height: auto;
min-height: 100%;
width: 100%;
}
.setup-sidebar {
background: linear-gradient(160deg, rgba(0, 45, 203, 0.94), rgba(32, 66, 190, 0.78));
color: #ffffff;
padding: clamp(1.75rem, 2.5vw, 2.4rem);
display: flex;
border-top-left-radius: 32px;
border-bottom-left-radius: 32px;
flex-direction: column;
box-sizing: border-box;
min-width: 0;
}
.setup-sidebar-inner {
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 2.5vw, 2rem);
width: 100%;
height: 100%;
}
.setup-sidebar-top {
display: flex;
flex-direction: column;
gap: 1.35rem;
}
.setup-sidebar .logo-container {
margin: 0;
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
.setup-sidebar .logo-container img {
height: 46px;
filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.25));
}
.setup-sidebar-title {
font-size: clamp(1.45rem, 2.1vw, 1.8rem);
font-weight: 600;
letter-spacing: -0.35px;
margin: 0;
}
.setup-sidebar-subtitle {
margin: 0;
color: rgba(255, 255, 255, 0.82);
font-size: 0.9rem;
line-height: 1.65;
max-width: 320px;
}
.setup-sidebar-checklist {
background: rgba(255, 255, 255, 0.1);
border-radius: 18px;
padding: 1.25rem 1.5rem;
backdrop-filter: blur(8px);
box-shadow: 0 18px 28px rgba(0, 0, 0, 0.18);
}
.sidebar-checklist-title {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 1rem;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
}
.sidebar-checklist-title .material-icons {
font-size: 1.15rem;
}
.sidebar-checklist-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.6rem;
}
.sidebar-checklist-list li {
position: relative;
padding-left: 1.25rem;
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.55;
}
.sidebar-checklist-list li::before {
content: '';
position: absolute;
top: 0.5rem;
left: 0.35rem;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
}
.setup-sidebar-tips {
display: grid;
gap: 0.4rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 1.1rem 1.35rem;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
line-height: 1.55;
}
.tips-label {
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.setup-progress {
display: flex;
justify-content: center;
padding: 0.35rem 0 1.25rem;
}
.setup-progress .step-indicator {
position: relative;
display: flex;
align-items: stretch;
justify-content: space-between;
gap: clamp(1.5rem, 4vw, 4rem);
width: 100%;
max-width: 680px;
}
.setup-progress .step-item {
position: relative;
z-index: 1;
flex: 1;
display: flex;
justify-content: center;
align-items: stretch;
min-width: 0;
}
.setup-progress .step-card {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 320px;
padding: 1rem 1.4rem;
border-radius: 18px;
background: var(--bg-card);
border: 1px solid rgba(0, 45, 203, 0.08);
box-shadow: 0 14px 32px rgba(0, 45, 203, 0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.setup-progress .step-item.is-active .step-card {
background: linear-gradient(135deg, rgba(0, 45, 203, 0.12), rgba(0, 45, 203, 0.02));
border-color: rgba(0, 45, 203, 0.35);
box-shadow: 0 22px 44px rgba(0, 45, 203, 0.16);
transform: translateY(-3px);
}
.setup-progress .step-item.is-completed .step-card {
background: rgba(0, 45, 203, 0.06);
border-color: rgba(0, 45, 203, 0.25);
box-shadow: 0 18px 36px rgba(0, 45, 203, 0.12);
}
.setup-progress .step-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 52px rgba(0, 45, 203, 0.16);
}
.setup-progress .step-item.is-active .step-card:hover {
transform: translateY(-4px);
}
.setup-progress .step-badge {
flex: 0 0 auto;
display: flex;
}
.setup-progress .step-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
min-width: 0;
}
.setup-progress .step-dot {
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(0, 45, 203, 0.14);
color: var(--accent-primary);
font-weight: 600;
font-size: 1.05rem;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.03em;
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.setup-progress .step-dot.active {
background: linear-gradient(135deg, #2042be, #002DCB);
color: var(--text-inverse);
box-shadow: 0 12px 26px rgba(0, 45, 203, 0.3);
}
.setup-progress .step-dot.completed {
background: rgba(0, 45, 203, 0.22);
color: var(--text-inverse);
box-shadow: 0 8px 18px rgba(0, 45, 203, 0.2);
}
.setup-progress .step-label {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: -0.2px;
transition: color 0.3s ease;
}
.setup-progress .step-description {
font-size: 0.8rem;
color: var(--text-tertiary);
letter-spacing: 0.04em;
text-transform: uppercase;
transition: color 0.3s ease, opacity 0.3s ease;
}
.setup-progress .step-item.is-active .step-label,
.setup-progress .step-label.active {
color: var(--accent-primary);
}
.setup-progress .step-item.is-completed .step-label,
.setup-progress .step-label.completed {
color: rgba(23, 74, 253, 0.8);
}
.setup-progress .step-item.is-active .step-description {
color: var(--text-secondary);
opacity: 0.95;
}
.setup-progress .step-item.is-completed .step-description {
color: rgba(64, 106, 255, 0.7);
}
.setup-panel {
padding: clamp(2rem, 3.2vw, 2.6rem);
display: flex;
flex-direction: column;
gap: clamp(1.4rem, 2.2vw, 1.9rem);
height: auto;
flex: 1;
min-height: 0;
min-width: 0;
box-sizing: border-box;
overflow: visible;
}
.step-header {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.step-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
letter-spacing: 0.18em;
font-weight: 600;
text-transform: uppercase;
color: var(--accent-primary);
background: rgba(0, 45, 203, 0.08);
padding: 0.35rem 0.75rem;
border-radius: 999px;
width: fit-content;
}
.setup-title {
color: var(--accent-primary);
font-size: clamp(1.85rem, 3vw, 2.25rem);
font-weight: 700;
margin: 0;
letter-spacing: -0.6px;
}
.setup-subtitle {
margin: 0;
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.7;
max-width: 540px;
}
.setup-cards {
display: grid;
gap: 1.5rem;
}
.setup-cards.setup-wallet {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
align-items: stretch;
grid-auto-rows: 1fr;
}
.setup-cards.setup-stage {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: stretch;
grid-auto-rows: 1fr;
}
.setup-card {
background: var(--bg-tertiary);
border: 1px solid rgba(0, 45, 203, 0.08);
border-radius: 20px;
padding: clamp(1.4rem, 2.4vw, 1.85rem);
box-shadow: 0 18px 36px rgba(0, 45, 203, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
gap: 1.2rem;
height: 100%;
min-height: 0;
}
.setup-card:hover {
transform: translateY(-3px);
box-shadow: 0 24px 48px rgba(0, 45, 203, 0.12);
}
.setup-card-header {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.setup-card-header h2 {
margin: 0;
font-size: 1.3rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.setup-card-header p {
margin: 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
.input-group-container {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.input-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.section-divider {
position: relative;
text-align: center;
margin: 0.75rem 0 1.25rem;
}
.section-divider span {
background: var(--bg-tertiary);
color: var(--text-secondary);
font-size: 0.85rem;
padding: 0 0.75rem;
position: relative;
z-index: 1;
}
.section-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: rgba(0, 45, 203, 0.08);
transform: translateY(-50%);
}
.info-text {
color: var(--text-secondary);
font-size: 0.88rem;
margin: 0.5rem 0 0;
line-height: 1.6;
}
.setup-form-grid {
display: grid;
gap: 1.25rem;
}
.form-section {
display: grid;
gap: 1rem;
}
.form-row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-row label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.2px;
}
.form-row.triple {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.form-row.inline {
max-width: 320px;
}
.advanced-options {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(0, 45, 203, 0.08);
display: grid;
gap: 0.75rem;
}
.option-toggle {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
color: var(--text-primary);
}
.option-description {
margin: 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
.snapshot-options {
display: grid;
gap: 0.85rem;
margin-top: 1rem;
}
.snapshot-options label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
}
.setup-step {
display: none;
height: 100%;
overflow: visible;
position: relative;
padding-bottom: 0;
}
.setup-step.active {
display: flex;
flex-direction: column;
gap: clamp(1.2rem, 2vw, 1.8rem);
height: auto;
flex: 1;
min-height: 0;
animation: fadeIn 0.3s ease-in-out;
overflow: visible;
}
.steps-container {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: clamp(1.4rem, 2vw, 1.8rem);
overflow: visible;
}
.step-content {
flex: 1;
min-height: 0;
overflow-y: visible;
padding-right: 0.35rem;
padding-bottom: 2rem;
box-sizing: border-box;
overscroll-behavior: contain;
}
/* Wallet Setup Container */
.wallet-setup-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.wallet-options {
margin-bottom: 1rem;
}
.option-tabs {
display: flex;
background: var(--bg-tertiary);
border-radius: 12px;
padding: 4px;
gap: 4px;
}
.option-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border: none;
background: transparent;
border-radius: 8px;
color: var(--text-secondary);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.option-tab:hover {
background: var(--bg-button-hover);
color: var(--text-primary);
}
.option-tab.active {
background: var(--bg-card);
color: var(--accent-primary);
box-shadow: var(--shadow-primary);
}
.option-tab .material-icons {
font-size: 20px;
}
.wallet-section {
display: none;
animation: fadeIn 0.3s ease;
}
.wallet-section.active {
display: block;
}
.section-header {
margin-bottom: 1.5rem;
}
.section-header h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 0.5rem 0;
}
.section-header p {
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-weight: 500;
color: var(--text-primary);
font-size: 0.9rem;
}
.form-hint {
color: var(--text-tertiary);
font-size: 0.8rem;
margin: 0;
}
.action-group {
display: flex;
justify-content: flex-start;
gap: 1rem;
}
.info-box {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
background: var(--bg-tertiary);
border-radius: 8px;
border-left: 3px solid var(--accent-info);
margin-top: 1rem;
}
.info-box .material-icons {
color: var(--accent-info);
font-size: 20px;
margin-top: 0.1rem;
}
.info-box div {
flex: 1;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.4;
}
/* Genesis Setup Container */
.genesis-setup-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.network-type-selector h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 0.5rem 0;
}
.network-type-selector p {
color: var(--text-secondary);
margin: 0 0 1.5rem 0;
line-height: 1.5;
}
.network-options {
margin-top: 1rem;
}
.network-options .option-tabs {
display: flex;
background: var(--bg-tertiary);
border-radius: 12px;
padding: 4px;
gap: 4px;
flex-wrap: wrap;
}
.network-options .option-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border: none;
background: transparent;
border-radius: 8px;
color: var(--text-secondary);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
min-width: 0;
}
.network-options .option-tab:hover {
background: var(--bg-button-hover);
color: var(--text-primary);
}
.network-options .option-tab.active {
background: var(--bg-card);
color: var(--accent-primary);
box-shadow: var(--shadow-primary);
}
.network-options .option-tab .material-icons {
font-size: 20px;
}
.network-options .option-badge {
position: absolute;
top: -8px;
right: -8px;
padding: 0.2rem 0.5rem;
background: var(--accent-success);
color: var(--text-inverse);
border-radius: 12px;
font-size: 0.7rem;
font-weight: 500;
line-height: 1;
}
.configuration-forms {
margin-top: 1rem;
}
.config-section {
display: none;
animation: fadeIn 0.3s ease;
}
.config-section.active {
display: block;
}
.ports-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
.advanced-section {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border-primary);
}
.advanced-options {
display: flex;
flex-direction: column;
gap: 1rem;
}
.option-item {
padding: 1rem;
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 8px;
}
.option-control {
display: flex;
align-items: center;
gap: 1rem;
}
.option-info h4 {
font-size: 1rem;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 0.25rem 0;
}
.option-info p {
color: var(--text-secondary);
margin: 0;
font-size: 0.9rem;
line-height: 1.4;
}
/* Switch Toggle */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--border-secondary);
transition: 0.3s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--accent-primary);
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (min-width: 768px) {
.form-grid {
grid-template-columns: repeat(2, 1fr);
}
.ports-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.network-options .option-tabs {
flex-direction: column;
gap: 8px;
}
.network-options .option-tab {
flex: none;
justify-content: flex-start;
text-align: left;
}
}
.sticky-actions {
position: sticky;
bottom: 0;
z-index: 3;
}
.panel-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 0;
}
.panel-action {
display: none;
width: 100%;
align-items: center;
gap: 1rem;
}
.panel-action.active {
display: flex;
}
.panel-action.single {
justify-content: flex-end;
}
.panel-action.dual {
justify-content: space-between;
}
.setup-panel .primary-button {
background: var(--bg-button-primary);
color: var(--text-inverse);
border: none;
border-radius: 14px;
padding: 0.95rem 2.4rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.25px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
box-shadow: 0 18px 32px rgba(0, 45, 203, 0.18);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.setup-panel .primary-button:hover {
transform: translateY(-2px);
box-shadow: 0 24px 40px rgba(0, 45, 203, 0.24);
}
.setup-panel .primary-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.setup-panel .secondary-button {
background: rgba(0, 45, 203, 0.08);
color: var(--accent-primary);
border: none;
border-radius: 14px;
padding: 0.9rem 1.8rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.setup-panel .secondary-button:hover {
background: rgba(0, 45, 203, 0.12);
transform: translateY(-1px);
}
.setup-panel .secondary-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.setup-panel .action-button {
align-self: flex-start;
background: var(--bg-button-primary);
color: var(--text-inverse);
border: none;
border-radius: 14px;
padding: 0.85rem 1.75rem;
font-weight: 600;
letter-spacing: 0.2px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
box-shadow: 0 12px 24px rgba(0, 45, 203, 0.18);
}
.setup-panel .action-button:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(0, 45, 203, 0.22);
}
.setup-panel .action-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.genesis-categories {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.genesis-category {
border: 1px solid rgba(0, 45, 203, 0.12);
border-radius: 18px;
padding: 1.5rem 1.35rem;
background: var(--bg-card);
box-shadow: 0 16px 32px rgba(0, 45, 203, 0.08);
transition: all 0.3s ease;
position: relative;
cursor: pointer;
}
.genesis-category:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px rgba(0, 45, 203, 0.12);
border-color: rgba(0, 45, 203, 0.28);
}
.genesis-category.selected {
border-color: rgba(0, 45, 203, 0.4);
box-shadow: 0 28px 52px rgba(0, 45, 203, 0.16);
background: linear-gradient(135deg, rgba(0, 45, 203, 0.03), rgba(0, 45, 203, 0.08));
}
.genesis-category-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: rgba(0, 45, 203, 0.08);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: all 0.3s ease;
}
.genesis-category-icon .material-icons {
font-size: 1.8rem;
color: var(--accent-primary);
}
.genesis-category.selected .genesis-category-icon {
background: var(--accent-primary);
}
.genesis-category.selected .genesis-category-icon .material-icons {
color: var(--text-inverse);
}
.genesis-category-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
text-align: center;
margin-bottom: 0.75rem;
}
.genesis-category-description {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.55;
text-align: center;
margin: 0;
}
.genesis-category.disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.genesis-category.disabled:hover {
transform: none;
box-shadow: 0 16px 32px rgba(0, 45, 203, 0.08);
}
.action-button {
align-self: flex-start;
background: var(--bg-button-primary);
color: var(--text-inverse);
border: none;
border-radius: 14px;
padding: 0.85rem 1.75rem;
font-weight: 600;
letter-spacing: 0.2px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
box-shadow: 0 12px 24px rgba(0, 45, 203, 0.18);
}
.action-button:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(0, 45, 203, 0.22);
}
.action-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.primary-button {
background: var(--bg-button-primary);
color: var(--text-inverse);
border: none;
border-radius: 16px;
padding: 0.95rem 2.5rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
box-shadow: 0 18px 32px rgba(0, 45, 203, 0.18);
}
.primary-button:hover {
transform: translateY(-2px);
box-shadow: 0 24px 40px rgba(0, 45, 203, 0.24);
}
.primary-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.secondary-button {
background: rgba(0, 45, 203, 0.08);
color: var(--accent-primary);
border: none;
border-radius: 16px;
padding: 0.95rem 2rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.secondary-button:hover {
background: rgba(0, 45, 203, 0.12);
transform: translateY(-1px);
}
.secondary-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
@media (max-width: 1200px) {
.setup-layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.setup-cards.setup-stage {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
}
@media (max-height: 820px) {
.setup-background {
padding: clamp(1rem, 2.5vw, 2rem);
}
.setup-sidebar {
padding: 1.5rem 1.6rem;
}
.setup-panel {
padding: 1.75rem 1.6rem;
gap: 1.3rem;
}
.setup-step.active {
gap: 1rem;
}
.setup-cards {
gap: 1.25rem;
}
.setup-card {
padding: 1.25rem 1.4rem;
}
.setup-progress .step-card {
max-width: 280px;
padding: 0.85rem 1.2rem;
}
.setup-progress .step-dot {
width: 40px;
height: 40px;
font-size: 0.95rem;
}
}
@media (max-width: 1024px) {
.setup-background {
padding: 2.5rem 1.75rem;
}
.setup-layout {
grid-template-columns: 1fr;
}
.setup-sidebar {
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
border-right: none;
}
.setup-panel {
padding: 2.5rem 2rem 2.75rem;
}
.setup-cards.setup-stage {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.setup-cards.setup-wallet {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.navigation-buttons {
justify-content: flex-end;
}
}
@media (max-width: 768px) {
.setup-background {
padding: 2rem 1.25rem;
}
.setup-box {
border-radius: 26px;
}
.setup-sidebar {
padding: 2rem 1.75rem;
}
.setup-panel {
padding: 2rem 1.75rem;
}
.setup-cards {
gap: 1.5rem;
}
.setup-cards.setup-stage {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.setup-cards.setup-wallet {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.setup-progress .step-card {
max-width: 100%;
}
.setup-progress {
justify-content: flex-start;
padding-bottom: 1.25rem;
}
.setup-progress .step-indicator {
max-width: 100%;
gap: 1.75rem;
padding: 0.75rem 1.5rem;
}
.setup-progress .step-item {
min-width: auto;
}
.genesis-categories {
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.form-row.triple {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.input-row {
grid-template-columns: 1fr;
}
.genesis-categories {
grid-template-columns: 1fr;
}
.setup-cards.setup-stage,
.setup-cards.setup-wallet {
grid-template-columns: 1fr;
}
.setup-progress .step-card {
max-width: 100%;
padding: 0.85rem 1.1rem;
}
.setup-progress .step-dot {
width: 40px;
height: 40px;
font-size: 0.95rem;
}
.setup-progress {
padding-bottom: 1rem;
}
.setup-progress .step-indicator {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: 0.75rem 0;
}
.setup-progress .step-item {
align-items: flex-start;
}
.panel-action {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0.75rem;
}
.panel-action.single {
align-items: stretch;
}
.secondary-button,
.primary-button {
width: 100%;
}
.form-row.triple {
grid-template-columns: 1fr;
}
.form-row.inline {
max-width: none;
}
}
.action-button:hover {
opacity: 0.95;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 45, 203, 0.15);
}
.action-button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.primary-button {
height: 48px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
letter-spacing: 0.5px;
box-shadow: var(--shadow-button);
text-transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
outline: none;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: var(--bg-button-primary);
color: var(--text-inverse);
padding: 0 1.5rem;
text-align: center;
min-width: 120px;
}
.primary-button:hover {
opacity: 0.95;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 45, 203, 0.15);
}
.primary-button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.form-control.textarea {
min-height: 120px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.85rem;
line-height: 1.5;
white-space: pre;
resize: vertical;
tab-size: 2;
padding: 1rem;
background-color: var(--bg-input);
}
/* Snapshot configuration styles */
.input-with-button {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
}
.input-with-button .form-control {
flex: 1;
padding-right: 3rem;
}
.snapshot-refresh-button {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
background: var(--bg-card);
border: 1px solid var(--border-primary);
color: var(--text-secondary);
border-radius: 8px;
padding: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
z-index: 2;
}
.snapshot-refresh-button:hover {
background: var(--accent-primary);
color: var(--text-inverse);
border-color: var(--accent-primary);
transform: translateY(-50%) scale(1.05);
}
.snapshot-refresh-button:active {
transform: translateY(-50%) scale(0.95);
}
.snapshot-refresh-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: translateY(-50%);
}
.snapshot-refresh-button:disabled:hover {
background: var(--bg-card);
color: var(--text-secondary);
border-color: var(--border-primary);
transform: translateY(-50%);
}
.snapshot-refresh-button .material-icons {
font-size: 1.1rem;
}
.snapshot-refresh-button:disabled .material-icons {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.snapshot-info-container {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 12px;
padding: 1.25rem;
margin-top: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.snapshot-info-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-primary);
}
.snapshot-info-header .material-icons {
color: var(--accent-primary);
font-size: 1.25rem;
}
.snapshot-info-header h4 {
margin: 0;
color: var(--text-primary);
font-size: 1rem;
font-weight: 600;
}
.snapshot-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.snapshot-info-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.snapshot-info-label {
font-size: 0.8rem;
color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.snapshot-info-value {
font-size: 0.95rem;
color: var(--text-primary);
font-weight: 500;
}
.snapshot-info-value.large {
font-size: 1.1rem;
font-weight: 600;
color: var(--accent-primary);
}
/* Dark theme adjustments */
[data-theme="dark"] .snapshot-refresh-button {
background: rgba(30, 41, 59, 0.8);
border-color: rgba(96, 165, 250, 0.3);
color: var(--text-secondary);
}
[data-theme="dark"] .snapshot-refresh-button:hover {
background: var(--accent-primary);
color: var(--text-inverse);
border-color: var(--accent-primary);
}
[data-theme="dark"] .snapshot-info-container {
background: rgba(30, 41, 59, 0.6);
border-color: rgba(96, 165, 250, 0.2);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.3);
}
[data-theme="dark"] .snapshot-info-header {
border-bottom-color: rgba(96, 165, 250, 0.2);
}
/* Scrollbar styling */
.setup-step {
display: none;
}
.setup-step.active {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-control.error {
border-color: var(--text-secondary);
animation: shake 0.5s;
}
.error-message {
color: var(--text-secondary);
font-size: 0.8rem;
margin-top: -0.5rem;
margin-bottom: 1rem;
display: none;
}
.error-message.visible {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
/* STATUS */
.section {
background: var(--bg-card);
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow-card);
border: 1px solid var(--border-primary);
margin-bottom: 0;
display: flex;
flex-direction: column;
max-width: 100%;
overflow: scroll;
}
.section-content {
flex: 1;
display: flex;
flex-direction: column;
}
.section.full-width {
grid-column: 1 / -1;
}
.logs-section {
grid-column: 1 / -1;
grid-row: 2;
margin-top: 0;
position: relative;
z-index: 1;
}
.control-logs {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.control-logs .button {
align-self: flex-start;
width: auto;
min-width: 120px;
}
.logs-container {
background: var(--bg-input);
border: 1px solid var(--border-primary);
color: var(--text-secondary);
box-shadow: var(--shadow-card);
border-radius: 12px;
padding: 1.5rem;
margin-top: 0;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
box-sizing: border-box;
width: 100%;
}
.logs-container pre {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-secondary);
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
box-sizing: border-box;
}
/* Scrollbar styling */
/* Styles for individual log lines */
.logs-container pre .log-info {
color: var(--accent-primary);
}
.logs-container pre .log-success {
color: var(--accent-primary);
}
.logs-container pre .log-warning {
color: var(--text-secondary);
}
.logs-container pre .log-error {
color: var(--text-secondary);
}
.logs-container pre .log-timestamp {
color: var(--text-secondary);
margin-right: 8px;
}
.logs-container pre .log-address {
color: var(--accent-primary);
}
.logs-container pre .log-hash {
color: var(--accent-primary);
}
/* Effet de terminal */
.logs-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
rgba(0, 45, 203, 0) 0%,
rgba(0, 45, 203, 0.1) 50%,
rgba(0, 45, 203, 0) 100%);
}
.section:not(.logs-section) {
position: relative;
z-index: 2;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.section-title {
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-title i {
color: var(--accent-primary);
font-size: 1.5rem;
}
.form-control {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary) !important;
padding: 0.8rem 1rem;
border-radius: 8px;
font-size: 0.95rem;
width: 100%;
transition: all 0.3s ease;
-webkit-text-fill-color: var(--text-primary);
letter-spacing: 0.3px;
font-weight: 400;
margin-bottom: 1rem;
}
.form-control:focus {
outline: none;
border: 2px solid var(--border-input-focus);
box-shadow: 0 0 0 0 rgba(0, 45, 203, 0.10);
background-color: var(--bg-input);
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.3px;
background: var(--bg-button-secondary);
color: var(--accent-primary);
border: 1px solid var(--border-primary);
box-shadow: 0 1px 4px rgba(0, 45, 203, 0.05);
max-width: 100%;
overflow: hidden;
}
@media (max-width: 768px) {
.status-badge {
padding: 0.45rem 0.75rem;
font-size: 0.75rem;
gap: 0.35rem;
letter-spacing: 0.2px;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
word-break: break-all;
}
}
@media (max-width: 480px) {
.status-badge {
padding: 0.4rem 0.65rem;
font-size: 0.7rem;
gap: 0.3rem;
border-radius: 16px;
}
}
.status-badge i {
font-size: 0.75rem;
}
.status-badge.active {
background: var(--bg-button-secondary);
color: var(--accent-primary);
border: 1px solid var(--border-primary);
}
.status-badge.inactive {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
}
/* Status dashboard layout */
.status-page {
display: flex;
flex-direction: column;
gap: 2.5rem;
padding: clamp(2rem, 3vw + 1rem, 3.5rem);
padding-bottom: 4rem;
max-width: 1280px;
margin: 0 auto;
box-sizing: border-box;
}
@media (max-width: 768px) {
.status-page {
gap: 1.75rem;
padding: 1.5rem 1rem 2.5rem;
}
}
@media (max-width: 480px) {
.status-page {
gap: 1.25rem;
padding: 1rem 0.75rem 2rem;
}
}
.status-overview-card {
position: relative;
overflow: hidden;
gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (max-width: 768px) {
.status-overview-card {
gap: 1.25rem;
}
}
@media (max-width: 480px) {
.status-overview-card {
gap: 1rem;
}
}
.status-overview-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(140% 120% at 100% 0%, rgba(0, 45, 203, 0.12) 0%, rgba(32, 66, 190, 0.08) 44%, rgba(0, 0, 0, 0) 80%);
pointer-events: none;
border-radius: inherit;
}
.status-overview-card > * {
position: relative;
z-index: 1;
}
.overview-header {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: flex-start;
}
@media (max-width: 768px) {
.overview-header {
flex-direction: column;
gap: 1rem;
}
}
@media (max-width: 480px) {
.overview-header {
gap: 0.85rem;
}
}
.overview-summary {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
min-width: 260px;
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.overview-summary {
min-width: 100%;
max-width: 100%;
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
@media (max-width: 480px) {
.overview-summary {
gap: 0.6rem;
}
}
.summary-item {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 16px;
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
box-shadow: var(--shadow-card);
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 768px) {
.summary-item {
padding: 0.85rem 1rem;
gap: 0.6rem;
border-radius: 12px;
}
}
@media (max-width: 480px) {
.summary-item {
padding: 0.75rem 0.85rem;
gap: 0.5rem;
border-radius: 10px;
}
}
.summary-label {
font-size: 0.75rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-tertiary);
font-weight: 600;
}
.status-hero-text {
flex: 1 1 420px;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.status-hero-text {
flex: 1 1 100%;
gap: 0.75rem;
}
}
@media (max-width: 480px) {
.status-hero-text {
gap: 0.6rem;
}
}
.status-hero-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--text-secondary);
font-weight: 600;
}
@media (max-width: 480px) {
.status-hero-eyebrow {
font-size: 0.7rem;
letter-spacing: 0.3em;
}
}
.status-hero-text h1 {
margin: 0;
font-size: clamp(1.75rem, 5vw, 2.9rem);
color: var(--text-primary);
line-height: 1.2;
}
.status-hero-text p {
margin: 0;
max-width: 520px;
color: var(--text-secondary);
line-height: 1.6;
font-size: clamp(0.9rem, 2vw, 1rem);
}
.status-hero-meta {
flex: 1 1 280px;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
position: relative;
z-index: 1;
}
.status-hero-block {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 18px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
box-shadow: var(--shadow-card);
}
.status-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--text-secondary);
font-weight: 600;
}
.node-address-chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1.25rem;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 14px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text-primary);
transition: all 0.2s ease;
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.node-address-chip {
padding: 0.65rem 0.85rem;
gap: 0.5rem;
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.node-address-chip {
padding: 0.6rem 0.75rem;
gap: 0.4rem;
font-size: 0.7rem;
letter-spacing: 0;
}
}
.node-address-chip span {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 100%;
word-break: break-all;
}
@media (max-width: 768px) {
.node-address-chip span {
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.node-address-chip span {
font-size: 0.65rem;
}
}
.icon-button {
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
border-radius: 12px;
border: 1px solid var(--border-primary);
background: var(--bg-button-tertiary);
color: var(--accent-primary);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: none;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
.icon-button {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
}
}
@media (max-width: 480px) {
.icon-button {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
}
}
.icon-button .material-icons {
font-size: 1.2rem;
}
@media (max-width: 768px) {
.icon-button .material-icons {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.icon-button .material-icons {
font-size: 0.95rem;
}
}
.icon-button:hover {
background: var(--bg-button-tertiary-hover);
color: var(--accent-primary);
transform: translateY(-1px);
box-shadow: var(--shadow-button);
}
.status-panels {
display: flex;
flex-direction: column;
gap: clamp(1.75rem, 3vw, 2.75rem);
}
@media (max-width: 768px) {
.status-panels {
gap: 1.5rem;
}
}
@media (max-width: 480px) {
.status-panels {
gap: 1.25rem;
}
}
.status-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 24px;
box-shadow: var(--shadow-card);
padding: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
display: flex;
flex-direction: column;
gap: 1.75rem;
position: relative;
}
@media (max-width: 768px) {
.status-card {
border-radius: 18px;
padding: 1.25rem;
gap: 1.25rem;
}
}
@media (max-width: 480px) {
.status-card {
border-radius: 14px;
padding: 1rem;
gap: 1rem;
}
}
.status-card .card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.status-card .card-header {
gap: 0.85rem;
}
}
@media (max-width: 480px) {
.status-card .card-header {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
}
.status-card .card-title {
display: flex;
align-items: flex-start;
gap: 1rem;
color: var(--text-primary);
flex: 1;
min-width: 0;
}
@media (max-width: 480px) {
.status-card .card-title {
gap: 0.75rem;
}
}
.status-card .card-title .material-icons {
font-size: 1.5rem;
padding: 0.6rem;
border-radius: 12px;
background: var(--bg-button-secondary);
border: 1px solid rgba(0, 45, 203, 0.08);
color: var(--accent-primary);
box-shadow: 0 10px 20px rgba(0, 45, 203, 0.08);
}
.status-card .card-title h2 {
margin: 0;
font-size: clamp(1.2rem, 3vw, 1.4rem);
font-weight: 600;
line-height: 1.3;
}
.status-card .card-title p {
margin: 0.35rem 0 0;
color: var(--text-secondary);
font-size: clamp(0.85rem, 2vw, 0.95rem);
line-height: 1.5;
max-width: 420px;
}
@media (max-width: 768px) {
.status-card .card-title p {
margin: 0.25rem 0 0;
line-height: 1.4;
}
}
@media (max-width: 480px) {
.status-card .card-title p {
max-width: 100%;
margin: 0.2rem 0 0;
line-height: 1.35;
}
}
.overview-body {
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 2vw, 2.25rem);
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 768px) {
.overview-body {
gap: 1rem;
}
}
@media (max-width: 480px) {
.overview-body {
gap: 0.85rem;
}
}
.node-actions {
display: flex;
flex-direction: column;
gap: 1.75rem;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 768px) {
.node-actions {
gap: 1rem;
}
}
@media (max-width: 480px) {
.node-actions {
gap: 0.85rem;
}
}
.node-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 16px;
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow-card);
flex: 2 1 360px;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 768px) {
.node-overview {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
padding: 0.85rem 1rem;
gap: 0.85rem;
}
}
@media (max-width: 480px) {
.node-overview {
grid-template-columns: 1fr;
gap: 0.65rem;
padding: 0.75rem 0.85rem;
}
}
.node-controls {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
flex: 1 1 280px;
padding: 1.25rem 1.5rem;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 16px;
box-shadow: var(--shadow-card);
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 768px) {
.node-controls {
padding: 0.85rem 1rem;
gap: 1rem;
}
}
@media (max-width: 480px) {
.node-controls {
padding: 0.75rem 0.85rem;
gap: 0.85rem;
}
}
.controls-header {
display: flex;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
}
@media (max-width: 480px) {
.controls-header {
flex-direction: column;
gap: 0.75rem;
}
}
.controls-header .material-icons {
font-size: 1.3rem;
padding: 0.65rem;
border-radius: 12px;
background: var(--bg-button-secondary);
border: 1px solid rgba(0, 45, 203, 0.08);
color: var(--accent-primary);
box-shadow: 0 8px 18px rgba(0, 45, 203, 0.08);
}
@media (max-width: 480px) {
.controls-header .material-icons {
font-size: 1.2rem;
padding: 0.5rem;
}
}
.controls-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
@media (max-width: 480px) {
.controls-header h3 {
font-size: 1rem;
}
}
.controls-header p {
margin: 0.35rem 0 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.45;
}
@media (max-width: 768px) {
.controls-header p {
margin: 0.25rem 0 0;
line-height: 1.4;
}
}
@media (max-width: 480px) {
.controls-header p {
font-size: 0.85rem;
margin: 0.2rem 0 0;
line-height: 1.35;
}
}
.node-detail {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
@media (max-width: 768px) {
.node-detail {
gap: 0.25rem;
}
}
@media (max-width: 480px) {
.node-detail {
gap: 0.2rem;
}
}
.detail-label {
font-size: 0.75rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-tertiary);
font-weight: 600;
}
@media (max-width: 480px) {
.detail-label {
font-size: 0.7rem;
letter-spacing: 0.2em;
}
}
.detail-value {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.detail-value {
font-size: 1.05rem;
}
}
@media (max-width: 480px) {
.detail-value {
font-size: 0.95rem;
}
}
.status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.35rem 0.9rem;
border-radius: 999px;
border: 1px solid var(--border-primary);
background: var(--bg-button-secondary);
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
transition: all 0.2s ease;
}
.status-pill.is-warning {
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.32);
color: var(--accent-warning);
}
.status-pill.is-success {
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.32);
color: var(--accent-success);
}
.node-action-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: flex-start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.node-action-buttons {
gap: 0.6rem;
}
}
@media (max-width: 480px) {
.node-action-buttons {
gap: 0.5rem;
}
}
.node-action-buttons .button {
flex: 1 1 160px;
min-width: 140px;
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.node-action-buttons .button {
flex: 1 1 calc(50% - 0.3rem);
min-width: 0;
max-width: calc(50% - 0.3rem);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 480px) {
.node-action-buttons {
flex-direction: column;
}
.node-action-buttons .button {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
min-width: 0;
}
}
.node-hints {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.hint {
display: flex;
align-items: flex-start;
gap: 0.75rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 14px;
padding: 0.85rem 1rem;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
.hint .material-icons {
font-size: 1.1rem;
color: var(--accent-primary);
margin-top: 0.15rem;
}
.logs-card .logs-container {
margin-top: 0;
height: 340px;
}
@media (max-width: 768px) {
.logs-card .logs-container {
height: 280px;
}
}
@media (max-width: 480px) {
.logs-card .logs-container {
height: 240px;
font-size: 0.8rem;
}
}
@media (max-width: 768px) {
.logs-card .logs-container {
height: 280px;
}
}
@media (max-width: 480px) {
.logs-card .logs-container {
height: 240px;
font-size: 0.8rem;
}
}
.logs-card .status-badge {
margin-left: auto;
}
.peers-card .status-badge {
margin-left: auto;
}
.peer-actions-footer {
margin-top: 2rem;
display: flex;
justify-content: flex-end;
}
@media (max-width: 1180px) {
.status-hero-meta {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
}
@media (max-width: 960px) {
.status-page {
padding: 2rem 1.75rem 3rem;
}
.overview-header {
flex-direction: column;
}
}
@media (max-width: 720px) {
.status-page {
padding: 1.5rem 1rem 2.5rem;
gap: 1.5rem;
}
.status-panels {
gap: 1.25rem;
}
.status-card {
padding: 1.5rem;
border-radius: 18px;
gap: 1.5rem;
}
.status-overview-card {
gap: 1.5rem;
}
.overview-body {
gap: 1.25rem;
}
.node-controls {
padding: 1rem 1.25rem;
}
.summary-item {
padding: 1rem 1.25rem;
}
.icon-button {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
}
.icon-button .material-icons {
font-size: 1.1rem;
}
.peer-actions-footer {
justify-content: stretch;
}
.peer-actions-footer .button {
width: 100%;
}
}
@media (min-width: 1024px) {
.overview-body {
flex-direction: row;
align-items: stretch;
}
.node-overview {
flex: 2 1 380px;
}
.node-controls {
flex: 1 1 300px;
}
}
.button-group {
/* margin-top: auto; */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
padding-top: 1rem;
}
.button {
height: 48px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 45, 203, 0.10);
text-transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
outline: none;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: center;
min-width: 120px;
}
.button i {
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.button.secondary {
background: var(--bg-button-secondary);
color: var(--text-secondary) !important;
border: 1px solid var(--border-primary);
box-shadow: 0 1px 4px rgba(0, 45, 203, 0.05);
}
.button.tertiary {
background: transparent;
color: var(--text-secondary) !important;
border: none;
box-shadow: none;
}
.button.tertiary:hover {
background: var(--bg-button-secondary);
color: var(--accent-primary) !important;
}
.button.danger {
background: var(--accent-error);
}
.button:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.button:disabled:hover {
opacity: 0.7;
cursor: not-allowed;
}
.button.primary:hover:not(:disabled) {
opacity: 0.95;
transform: translateY(-1px);
}
.button.secondary:hover:not(:disabled) {
background: var(--bg-button-secondary-hover);
color: var(--accent-primary) !important;
border: 1px solid var(--accent-primary);
}
@media (max-width: 1024px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
}
.grid-container-one {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.logs-section {
grid-row: 3;
}
.section {
margin-bottom: 1.5rem;
}
.button-group.grp4 {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.button-group.grp4 .address-container {
grid-column: 1 / -1;
}
.button-group.grp4 button {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.peer-section {
margin-bottom: 1.5rem;
}
.peers-grid {
grid-template-columns: 1fr;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.status-badge {
align-self: flex-start;
}
}
/* Tablets and small screens */
@media (max-width: 1100px) and (min-width: 901px) {
.sidebar {
width: 200px;
}
.main-content {
margin-left: 200px;
width: calc(100% - 200px);
}
.logs-container {
width: calc(90vw - 200px);
}
.button-group.grp4 {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.button-group.grp4 button {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
}
.status-section {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
padding: 1rem;
background: var(--bg-tertiary);
border-radius: 12px;
border: 1px solid rgba(0, 45, 203, 0.1);
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.3px;
background: var(--bg-button-secondary);
color: var(--accent-primary);
border: 1px solid var(--border-primary);
box-shadow: 0 1px 4px rgba(0, 45, 203, 0.05);
}
.status-badge i {
font-size: 1rem;
}
.status-badge.active {
background: var(--bg-button-secondary);
color: var(--accent-primary);
border: 1px solid var(--border-primary);
}
.status-badge.inactive {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
}
.form-group {
margin-bottom: 0.75rem;
}
.form-group:last-of-type {
margin-bottom: 0;
}
.form-group label {
display: block;
margin-bottom: 0.25rem;
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 500;
}
.form-control {
background: var(--bg-input);
border: 1px solid var(--border-input);
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
width: 100%;
border-radius: 8px;
color: var(--text-primary);
transition: all 0.3s ease;
}
.form-control:focus {
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px rgba(0, 45, 203, 0.10);
outline: none;
}
.form-control:disabled {
filter: contrast(0.5);
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 280px;
background: var(--bg-sidebar);
border-right: 1px solid var(--border-primary);
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
z-index: 100;
box-shadow: var(--shadow-card);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-sizing: border-box;
overflow: hidden;
transform: translateX(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-logo {
width: 100%;
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
background: var(--bg-sidebar);
border-bottom: 1px solid var(--border-primary);
box-sizing: border-box;
}
.sidebar-logo img {
height: 48px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-logo-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
margin-top: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.32em;
}
.sidebar-logo-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.sidebar-logo-subtitle {
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 500;
}
.sidebar-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.5rem 1rem 1.5rem;
}
.sidebar-group-label {
margin: 0.5rem 1rem 0.75rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.32em;
color: var(--text-tertiary);
text-transform: uppercase;
}
.sidebar-link-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
flex: 1 1 auto;
}
.sidebar-link-label {
font-size: 0.95rem;
font-weight: 500;
color: inherit;
}
.sidebar-link-badge {
font-size: 0.65rem;
letter-spacing: 0.28em;
text-transform: uppercase;
background: rgba(0, 45, 203, 0.1);
color: var(--accent-primary);
padding: 0.15rem 0.55rem;
border-radius: 999px;
border: 1px solid rgba(0, 45, 203, 0.18);
}
.sidebar-button.comming-soon {
opacity: 0.55;
}
.sidebar-button.comming-soon:hover {
background: transparent;
transform: none;
box-shadow: none;
}
.sidebar-footer-meta {
display: flex;
align-items: center;
gap: 0.75rem;
background: var(--bg-button-secondary);
border: 1px solid var(--border-primary);
border-radius: 12px;
padding: 0.9rem 1rem;
color: var(--text-secondary);
box-shadow: var(--shadow-card);
}
.sidebar-footer-meta .material-icons {
font-size: 1.25rem;
color: var(--accent-primary);
}
.sidebar-footer-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.sidebar-footer-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
}
.sidebar-footer-caption {
font-size: 0.8rem;
color: var(--text-secondary);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sidebar-button {
width: calc(100% - 2rem);
min-height: 52px;
height: auto;
border-radius: 12px;
background: transparent;
border: none;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 16px;
padding: 0.85rem 1.5rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
font-weight: 500;
position: relative;
margin: 0.25rem 1rem;
font-size: 0.95rem;
letter-spacing: 0.2px;
box-sizing: border-box;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.sidebar-button:hover, .sidebar-button.selected {
background: transparent;
color: var(--accent-primary);
transform: none;
box-shadow: none;
border: none;
}
.sidebar-button.selected {
color: var(--accent-primary);
font-weight: 600;
background: var(--bg-button-secondary-hover);
border-left: 4px solid var(--accent-primary);
box-shadow: var(--shadow-button);
}
.sidebar-button:hover {
color: var(--accent-primary);
background: var(--bg-button-secondary-hover);
transform: translateX(4px);
}
.sidebar-button i {
font-size: 1.4rem;
color: inherit;
opacity: 0.7;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 24px;
text-align: center;
}
.sidebar-button:hover i,
.sidebar-button.selected i {
opacity: 1;
transform: scale(1.1);
}
.sidebar-button span {
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.3px;
color: inherit;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.sidebar-button.selected span {
font-weight: 600;
color: var(--accent-primary);
}
.main-content {
margin-left: 280px;
width: calc(100% - 280px);
min-height: 100vh;
}
@media (max-width: 1200px) {
.sidebar {
width: 240px;
}
.main-content {
margin-left: 240px;
width: calc(100% - 240px);
}
}
@media (max-width: 900px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
height: 100dvh;
z-index: 1100;
width: min(280px, 85vw);
transform: translateX(-100%);
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.sidebar.is-open {
transform: translateX(0);
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.25);
}
.sidebar-logo {
display: none;
}
.sidebar-logo-mobile {
display: flex !important;
align-items: center;
justify-content: center;
padding: 1rem;
border-bottom: 1px solid var(--border-primary);
}
.sidebar-logo-mobile img {
height: 40px;
width: auto;
}
.main-content {
margin-left: 0;
width: 100%;
padding-top: 4.5rem;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
.sidebar-mobile-toggle {
display: inline-flex;
}
.status-page {
padding: 1.75rem 1.5rem 3rem;
}
.overview-summary {
width: 100%;
}
body.sidebar-open {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
}
@media (max-width: 600px) {
.status-page {
padding: 1.25rem 0.75rem 2rem;
}
.overview-summary {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.node-overview {
grid-template-columns: 1fr;
gap: 0.75rem;
padding: 1rem;
}
.logs-card .logs-container {
height: 220px;
}
.controls-header {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.controls-header .material-icons {
padding: 0.5rem;
font-size: 1.2rem;
}
.controls-header h3 {
font-size: 1rem;
}
.controls-header p {
font-size: 0.85rem;
}
.status-card {
padding: 1.25rem;
border-radius: 16px;
}
.status-card .card-title .material-icons {
font-size: 1.3rem;
padding: 0.5rem;
}
.detail-value {
font-size: 1.1rem;
}
.detail-label {
font-size: 0.7rem;
}
}
@media (min-width: 901px) {
.sidebar-mobile-toggle {
display: none !important;
}
}
.sidebar-mobile-toggle {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
border: 1px solid var(--border-primary);
background: var(--bg-card);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.sidebar-mobile-toggle .material-icons {
font-size: 1.5rem;
color: var(--text-primary);
transition: transform 0.2s ease;
}
.sidebar-mobile-toggle:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
.sidebar-mobile-toggle:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sidebar-mobile-toggle:active {
transform: scale(0.95);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1050;
}
body.sidebar-open .sidebar-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.sidebar-open .sidebar-mobile-toggle {
background: var(--bg-button-primary);
border-color: transparent;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
body.sidebar-open .sidebar-mobile-toggle .material-icons {
color: var(--text-inverse);
transform: rotate(0deg);
}
.sidebar-logo-mobile {
display: none;
box-sizing: border-box;
}
.sidebar-nav {
flex: 1;
display: flex;
flex-direction: column;
padding: 1rem 0;
overflow-y: auto;
width: 100%;
box-sizing: border-box;
}
.sidebar-nav::-webkit-scrollbar {
width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
background: var(--border-primary);
border-radius: 2px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
.mt-1 {
margin-top: 1rem;
}
/* ===============================================
Progress Overlay / Downloading Snapshot Modal
=============================================== */
.progress-overlay {
position: fixed;
inset: 0;
background: var(--overlay);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-overlay.show {
opacity: 1;
}
.progress-overlay.hide {
opacity: 0;
}
.progress-card {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-primary);
box-shadow:
0 32px 64px rgba(0, 0, 0, 0.12),
0 16px 32px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
width: min(640px, 92vw);
max-width: 640px;
animation: cardSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cardSlideUp {
0% {
transform: translateY(30px) scale(0.96);
opacity: 0;
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.progress-header {
display: flex;
gap: 1.25rem;
align-items: center;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--border-primary);
margin-bottom: 1.5rem;
}
.progress-texts {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.progress-title {
font-weight: 700;
font-size: 1.35rem;
letter-spacing: -0.3px;
color: var(--text-primary);
line-height: 1.3;
}
.progress-details {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
}
.progress-meta {
margin-top: 1.25rem;
padding: 1rem 1.25rem;
font-size: 0.9rem;
color: var(--text-secondary);
background: var(--bg-tertiary);
border-radius: 12px;
border: 1px solid var(--border-primary);
line-height: 1.6;
}
.progress-kv {
margin-top: 0.375rem;
display: flex;
gap: 0.5rem;
}
.progress-kv strong {
color: var(--text-primary);
min-width: 100px;
}
.progress-spinner {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid var(--bg-button-secondary);
border-top-color: var(--accent-primary);
border-right-color: var(--accent-primary);
animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
flex-shrink: 0;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Progress Stepper */
.progress-stepper {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin: 1.5rem 0;
padding: 0;
}
.progress-stepper::before {
content: '';
position: absolute;
top: 18px;
left: 10%;
right: 10%;
height: 3px;
background: var(--border-primary);
z-index: 0;
border-radius: 999px;
}
.stepper-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
position: relative;
z-index: 1;
text-align: center;
transition: all 0.3s ease;
}
.stepper-marker {
width: 36px;
height: 36px;
border-radius: 50%;
border: 3px solid var(--border-primary);
background: var(--bg-card);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
font-size: 14px;
font-weight: 700;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.stepper-marker::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.stepper-item.active .stepper-marker {
border-color: var(--accent-primary);
background: var(--bg-card);
color: var(--accent-primary);
box-shadow: 0 0 0 6px rgba(0, 45, 203, 0.15);
transform: scale(1.1);
}
.stepper-item.active .stepper-marker::after {
border-color: var(--accent-primary);
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
.stepper-item.completed .stepper-marker {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: var(--text-inverse);
box-shadow: 0 4px 12px rgba(0, 45, 203, 0.3);
}
.stepper-item.completed .stepper-marker .check-icon {
display: inline-block;
animation: checkPop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes checkPop {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.stepper-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: center;
}
.stepper-title {
font-weight: 600;
font-size: 0.95rem;
color: var(--text-primary);
transition: color 0.3s ease;
}
.stepper-item.active .stepper-title {
color: var(--accent-primary);
font-weight: 700;
}
.stepper-sub {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.4;
}
/* Progress Bar */
.progress-bar-container {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.progress-bar {
position: relative;
height: 24px;
border-radius: 12px;
background: var(--bg-button-secondary);
overflow: visible;
border: 2px solid var(--border-primary);
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
width: 100%;
}
.progress-bar-inner {
position: absolute;
left: -45%;
top: 0;
bottom: 0;
width: 45%;
background: linear-gradient(
90deg,
transparent 0%,
var(--accent-primary) 50%,
transparent 100%
);
border-radius: 10px;
animation: indeterminate 1.5s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
z-index: 1;
}
.progress-bar-determinate {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
background: linear-gradient(
90deg,
var(--accent-primary) 0%,
var(--accent-secondary) 100%
);
border-radius: 10px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
display: none;
overflow: hidden;
}
.progress-bar-determinate::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%
);
animation: shimmer 2s infinite;
}
.progress-bar-determinate::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px;
background: linear-gradient(
to right,
transparent,
rgba(255, 255, 255, 0.5)
);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
border-radius: 0 10px 10px 0;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
.progress-bar.has-progress .progress-bar-inner {
display: none;
}
.progress-bar.has-progress .progress-bar-determinate {
display: block;
}
.progress-percentage {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-size: 2rem;
font-weight: 800;
color: var(--accent-primary);
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
text-shadow: 0 2px 8px rgba(0, 45, 203, 0.2);
padding: 0.5rem;
}
.progress-percentage::before {
content: '';
display: inline-block;
width: 32px;
height: 32px;
background: url('data:image/svg+xml,');
background-size: contain;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
.progress-download-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: var(--bg-tertiary);
border-radius: 8px;
border: 1px solid var(--border-primary);
margin-top: 0.5rem;
}
.progress-stats {
display: flex;
gap: 1rem;
align-items: center;
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
}
.progress-stats .separator {
color: var(--text-tertiary);
font-weight: 400;
}
.progress-stats span {
white-space: nowrap;
}
.progress-download-stats {
display: flex;
gap: 2rem;
font-size: 0.9rem;
}
.progress-download-stats .stat {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.progress-download-stats .stat-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
font-weight: 600;
}
.progress-download-stats .stat-value {
font-weight: 700;
color: var(--text-primary);
font-size: 1rem;
}
.progress-speed {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 600;
}
.progress-speed .material-icons {
font-size: 1.2rem;
color: var(--accent-primary);
}
@keyframes indeterminate {
0% {
left: -45%;
}
100% {
left: 100%;
}
}
/* Dark Theme Support */
[data-theme="dark"] .progress-card {
box-shadow:
0 32px 64px rgba(0, 0, 0, 0.4),
0 16px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .progress-spinner {
border-color: var(--bg-button-secondary);
border-top-color: var(--accent-primary);
border-right-color: var(--accent-primary);
}
[data-theme="dark"] .progress-stepper::before {
background: var(--border-primary);
}
[data-theme="dark"] .stepper-marker {
background: var(--bg-card);
border-color: var(--border-primary);
}
[data-theme="dark"] .stepper-item.active .stepper-marker {
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
}
[data-theme="dark"] .stepper-item.completed .stepper-marker {
background: var(--accent-primary);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
[data-theme="dark"] .progress-meta {
background: var(--bg-tertiary);
border-color: var(--border-primary);
}
[data-theme="dark"] .progress-bar {
background: var(--bg-button-secondary);
border-color: var(--border-primary);
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .progress-bar-determinate {
background: linear-gradient(
90deg,
var(--accent-primary) 0%,
var(--accent-secondary) 100%
);
}
[data-theme="dark"] .progress-percentage::before {
background: url('data:image/svg+xml,');
}
[data-theme="dark"] .progress-download-info {
background: var(--bg-tertiary);
border-color: var(--border-primary);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.progress-card {
padding: 1.5rem;
border-radius: 16px;
}
.progress-header {
gap: 1rem;
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
}
.progress-spinner {
width: 40px;
height: 40px;
border-width: 3px;
}
.progress-title {
font-size: 1.15rem;
}
.progress-details {
font-size: 0.9rem;
}
.progress-stepper {
gap: 0.75rem;
margin: 1.25rem 0;
}
.stepper-marker {
width: 32px;
height: 32px;
border-width: 2px;
}
.stepper-title {
font-size: 0.9rem;
}
.stepper-sub {
font-size: 0.8rem;
}
.progress-meta {
padding: 0.875rem 1rem;
font-size: 0.85rem;
}
}
@media (max-width: 600px) {
.progress-card {
padding: 1.25rem;
width: 95vw;
}
.progress-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.progress-spinner {
width: 36px;
height: 36px;
}
.progress-title {
font-size: 1.1rem;
}
.progress-stepper {
flex-direction: column;
gap: 1rem;
margin: 1rem 0;
}
.progress-stepper::before {
display: none;
}
.stepper-item {
flex-direction: row;
width: 100%;
text-align: left;
gap: 1rem;
}
.stepper-content {
align-items: flex-start;
}
.stepper-marker {
flex-shrink: 0;
}
.progress-bar-container {
margin-top: 1rem;
}
.progress-bar {
height: 20px;
}
.progress-percentage {
font-size: 1.75rem;
gap: 0.5rem;
}
.progress-percentage::before {
width: 28px;
height: 28px;
}
.progress-download-info {
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
.progress-download-stats {
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.progress-download-stats .stat {
flex-direction: row;
justify-content: space-between;
width: 100%;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-primary);
}
.progress-download-stats .stat:last-child {
border-bottom: none;
padding-bottom: 0;
}
}
/* Tablettes et mobiles */
@media (max-width: 600px) {
.step-indicator {
padding: 0 1rem;
}
.step-label {
font-size: 0.8rem;
}
.navigation-buttons {
grid-template-columns: 1fr;
}
/* Status page responsive */
.grid-container-one {
gap: 1rem;
padding: 1rem;
}
.section {
margin-bottom: 1rem;
padding: 1rem;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.section-title {
font-size: 1.1rem;
}
.section-title i {
font-size: 1.2rem;
}
.button-group.grp4 {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.button-group.grp4 button {
padding: 0.75rem;
font-size: 0.85rem;
height: 44px;
}
.button-group.grp4 .address-container {
grid-column: 1;
padding: 0.75rem;
font-size: 0.85rem;
}
.peer-section {
margin-bottom: 1rem;
}
.peer-section-title {
font-size: 1rem;
margin-bottom: 0.75rem;
}
.peer-card {
padding: 0.75rem;
margin-bottom: 0.5rem;
}
.peer-info {
flex: 1;
min-width: 0;
}
.peer-address {
font-size: 0.8rem;
word-break: break-all;
}
.peer-actions {
gap: 0.25rem;
}
.peer-actions .button {
padding: 0.5rem;
min-width: 36px;
height: 36px;
}
.peer-actions .button .material-icons {
font-size: 1rem;
}
.logs-container {
max-height: 300px;
font-size: 0.8rem;
}
.logs-container pre {
padding: 0.75rem;
line-height: 1.4;
}
.control-logs .button {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.no-peers {
padding: 1rem;
}
.no-peers .material-icons {
font-size: 2rem;
}
.no-peers p {
font-size: 0.9rem;
}
}
/* Extra small mobile */
@media (max-width: 480px) {
.logs-container {
width: calc(90vw - 70px);
}
.sidebar-button {
width: calc(100% - 0.5rem);
margin: 0.125rem 0.25rem;
height: 44px;
}
.sidebar-logo {
padding: 0.75rem 0.25rem;
}
.sidebar-logo-mobile img {
width: 32px;
height: 32px;
}
/* Status page responsive */
.grid-container-one {
gap: 0.75rem;
padding: 0.75rem;
}
.section {
margin-bottom: 0.75rem;
padding: 0.75rem;
}
.section-header {
gap: 0.25rem;
}
.section-title {
font-size: 1rem;
}
.section-title i {
font-size: 1.1rem;
}
.button-group.grp4 {
gap: 0.25rem;
}
.button-group.grp4 button {
padding: 0.5rem;
font-size: 0.8rem;
height: 40px;
}
.button-group.grp4 .address-container {
padding: 0.5rem;
font-size: 0.8rem;
height: 40px;
}
.peer-section {
margin-bottom: 0.75rem;
}
.peer-section-title {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.peer-card {
padding: 0.5rem;
margin-bottom: 0.25rem;
}
.peer-address {
font-size: 0.75rem;
}
.peer-actions .button {
padding: 0.25rem;
min-width: 32px;
height: 32px;
}
.peer-actions .button .material-icons {
font-size: 0.9rem;
}
.logs-container {
max-height: 250px;
font-size: 0.75rem;
}
.logs-container pre {
padding: 0.5rem;
line-height: 1.3;
}
.control-logs .button {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
.no-peers {
padding: 0.75rem;
}
.no-peers .material-icons {
font-size: 1.5rem;
}
.no-peers p {
font-size: 0.8rem;
}
.status-badge {
font-size: 0.8rem;
padding: 0.25rem 0.75rem;
}
}
/* Password Prompt Modal */
.pw_prompt {
position: fixed;
inset: 0;
z-index: 10000;
background: var(--overlay);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.pw_prompt > div {
background: var(--bg-card);
border-radius: 16px;
padding: 2rem;
width: 100%;
max-width: 420px;
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.15),
0 12px 24px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-primary);
animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.pw_prompt label {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
color: var(--text-primary);
font-weight: 600;
font-size: 1.1rem;
}
.pw_prompt label::before {
content: 'lock';
font-family: 'Material Icons';
font-size: 1.5rem;
color: var(--accent-primary);
}
.pw_prompt input {
width: 100%;
padding: 0.875rem 1.125rem;
margin-bottom: 1.5rem;
border: 1px solid var(--border-input);
border-radius: 10px;
background: var(--bg-input);
color: var(--text-primary);
font-size: 1rem;
transition: all 0.3s ease;
box-sizing: border-box;
}
.pw_prompt input:focus {
outline: none;
border-color: var(--border-input-focus);
box-shadow: 0 0 0 3px rgba(0, 45, 203, 0.1);
background: var(--bg-card);
}
.pw_prompt input::placeholder {
color: var(--text-tertiary);
}
.pw_prompt button {
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--bg-button-primary);
color: var(--text-inverse);
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-button);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.pw_prompt button:hover {
background: var(--bg-button-primary-hover);
box-shadow: var(--shadow-button-hover);
transform: translateY(-1px);
}
.pw_prompt button:active {
transform: translateY(0);
}
.pw_prompt button::after {
content: 'arrow_forward';
font-family: 'Material Icons';
font-size: 1.2rem;
}
/* Button Prompt Modal */
.btn_prompt {
position: fixed;
inset: 0;
z-index: 10000;
background: var(--overlay);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: fadeIn 0.2s ease-out;
}
.btn_prompt > div {
background: var(--bg-card);
border-radius: 16px;
padding: 2rem;
width: 100%;
max-width: 380px;
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.15),
0 12px 24px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-primary);
animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn_prompt button {
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--bg-button-primary);
color: var(--text-inverse);
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-button);
}
.btn_prompt button:hover {
background: var(--bg-button-primary-hover);
box-shadow: var(--shadow-button-hover);
transform: translateY(-1px);
}
.btn_prompt button:active {
transform: translateY(0);
}
/* Dark Theme Support for Prompts */
[data-theme="dark"] .pw_prompt > div,
[data-theme="dark"] .btn_prompt > div {
background: var(--bg-card);
border: 1px solid var(--border-primary);
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.4),
0 12px 24px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .pw_prompt input {
background: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .pw_prompt input:focus {
border-color: var(--border-input-focus);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
background: var(--bg-card);
}
/* Responsive Adjustments for Prompts */
@media (max-width: 600px) {
.pw_prompt > div,
.btn_prompt > div {
padding: 1.5rem;
max-width: 90vw;
}
.pw_prompt label {
font-size: 1rem;
}
.pw_prompt label::before {
font-size: 1.3rem;
}
.pw_prompt input,
.pw_prompt button,
.btn_prompt button {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
}
.address-container {
height: 48px;
}
/* Settings styles */
.setting-item {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--bg-tertiary);
border-radius: 8px;
border: 1px solid rgba(0, 45, 203, 0.1);
}
.setting-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
margin-bottom: 0.5rem;
}
.setting-checkbox {
width: 18px;
height: 18px;
accent-color: var(--accent-primary);
cursor: pointer;
}
.setting-text {
font-weight: 500;
color: var(--text-primary);
font-size: 0.95rem;
}
.setting-description {
color: var(--text-secondary);
font-size: 0.85rem;
margin: 0;
margin-left: 2.25rem;
line-height: 1.4;
}
#save-settings {
margin-top: 1rem;
width: auto;
padding: 0.75rem 1.5rem;
}
.notification-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
max-width: 400px;
}
.notification {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-input);
box-shadow: 0 8px 32px rgba(0, 45, 203, 0.15);
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 12px;
backdrop-filter: blur(10px);
transform: translateX(100%);
opacity: 0;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
display: flex;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
}
.notification.show {
transform: translateX(0);
opacity: 1;
}
.notification.hide {
transform: translateX(100%);
opacity: 0;
}
.notification::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--bg-button-primary);
}
.notification.success::before {
background: var(--bg-button-primary);
}
.notification.error::before {
background: var(--accent-error);
}
.notification.warning::before {
background: var(--accent-error);
}
.notification.info::before {
background: var(--bg-button-primary);
}
.notification-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.notification.success .notification-icon {
background: rgba(0, 45, 203, 0.2);
color: var(--accent-primary);
}
.notification.error .notification-icon {
background: rgba(130, 141, 179, 0.2);
color: var(--text-secondary);
}
.notification.warning .notification-icon {
background: rgba(92, 101, 132, 0.2);
color: var(--text-secondary);
}
.notification.info .notification-icon {
background: rgba(0, 45, 203, 0.2);
color: var(--accent-primary);
}
.notification-content {
flex: 1;
min-width: 0;
}
.notification-title {
font-weight: 600;
font-size: 0.95rem;
color: var(--text-primary);
margin-bottom: 2px;
line-height: 1.3;
}
.notification-message {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.4;
margin: 0;
}
.notification-close {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: all 0.2s ease;
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.notification-close:hover {
background: rgba(0, 45, 203, 0.1);
color: var(--accent-primary);
}
.notification-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: var(--bg-button-primary);
transition: width linear;
}
.notification.success .notification-progress {
background: var(--bg-button-primary);
}
.notification.error .notification-progress {
background: var(--accent-error);
}
.notification.warning .notification-progress {
background: var(--accent-error);
}
.notification.info .notification-progress {
background: var(--bg-button-primary);
}
@media (max-width: 600px) {
.notification-container {
top: 10px;
right: 10px;
left: 10px;
max-width: none;
}
.notification {
margin-bottom: 8px;
padding: 14px 16px;
}
}
/* Firefox scrollbar styles */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 45, 203, 0.2) rgba(0, 45, 203, 0.1);
}
/* VALIDATOR PAGE STYLES */
.validator-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.validator-card {
background: var(--bg-card);
border: 1px solid var(--border-input);
box-shadow: 0 8px 32px rgba(0, 45, 203, 0.08);
color: var(--text-primary);
border-radius: 12px;
padding: 1.5rem;
}
.validator-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-item {
background: rgba(255, 255, 255, 0.03);
padding: 1rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.stat-label {
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-value {
color: var(--accent-primary);
font-size: 1.125rem;
font-weight: 700;
margin: 0;
}
.stat-value.highlight {
color: var(--accent-primary);
}
.stat-value.warning {
color: var(--text-secondary);
}
.stat-value.danger {
color: var(--text-secondary);
}
.commission-section {
background: var(--bg-tertiary);
padding: 1.5rem;
border-radius: 8px;
margin-top: 1rem;
border: 1px solid rgba(0, 45, 203, 0.1);
}
.commission-title {
color: var(--accent-primary);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.commission-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}
.action-buttons {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.unjail-button {
background: var(--bg-button-secondary) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-primary) !important;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 45, 203, 0.10);
text-transform: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.unjail-button:hover {
background: var(--bg-button-secondary-hover) !important;
border-color: var(--accent-primary) !important;
color: var(--text-inverse) !important;
}
.rewards-section {
background: var(--bg-tertiary);
border: 1px solid rgba(0, 45, 203, 0.1);
padding: 1.5rem;
border-radius: 8px;
margin-top: 1rem;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 768px) {
.rewards-section {
padding: 1.25rem;
}
}
@media (max-width: 480px) {
.rewards-section {
padding: 1rem;
}
}
.rewards-title {
color: var(--accent-primary);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
word-break: break-all;
overflow-wrap: break-word;
max-width: 100%;
}
@media (max-width: 768px) {
.rewards-title {
font-size: 0.95rem;
gap: 0.4rem;
}
}
@media (max-width: 480px) {
.rewards-title {
font-size: 0.85rem;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
}
.rewards-amount {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
word-break: break-all;
overflow-wrap: break-word;
max-width: 100%;
}
@media (max-width: 768px) {
.rewards-amount {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.rewards-amount {
font-size: 1rem;
}
}
.delegation-list {
list-style: none;
padding: 0;
margin: 1rem 0 0 0;
}
.delegation-item {
background: var(--bg-tertiary);
padding: 1rem;
border-radius: 6px;
margin-bottom: 0.5rem;
border: 1px solid rgba(0, 45, 203, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.delegation-amount {
font-weight: 600;
color: var(--text-primary);
}
.delegation-denom {
color: var(--text-secondary);
font-size: 0.875rem;
}
.commission-amount {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.form-section {
background: var(--bg-card);
border-radius: 16px;
padding: 2rem;
border: 1px solid rgba(0, 45, 203, 0.10);
box-shadow: 0 8px 32px rgba(0, 45, 203, 0.10);
margin-bottom: 2rem;
}
.form-section h3 {
color: var(--accent-primary);
margin-bottom: 1.5rem;
font-size: 1.25rem;
font-weight: 700;
border-bottom: 1px solid rgba(0, 45, 203, 0.10);
padding-bottom: 0.75rem;
}
.input-group {
margin-bottom: 1.5rem;
}
.input-group label {
display: block;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.95rem;
margin-bottom: 0.5rem;
letter-spacing: 0.3px;
}
.input-group input {
width: 100%;
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary) !important;
padding: 0.8rem 1rem;
border-radius: 8px;
font-size: 0.95rem;
width: 100%;
transition: all 0.3s ease;
-webkit-text-fill-color: var(--text-primary);
letter-spacing: 0.3px;
font-weight: 400;
margin-bottom: 1rem;
}
.input-group input:focus {
background-color: var(--bg-card);
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(0, 45, 203, 0.10);
outline: none;
}
.input-group small {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0.25rem;
display: block;
}
.form-submit {
background: var(--bg-button-primary);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 45, 203, 0.10);
text-transform: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
}
.form-submit:hover {
background: var(--bg-button-primary);
transform: translateY(-1px);
}
.wallet-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.wallet-card {
background: var(--bg-card);
border: 1px solid var(--border-input);
box-shadow: 0 8px 32px rgba(0, 45, 203, 0.08);
color: var(--text-primary);
border-radius: 12px;
padding: 1.5rem;
}
.wallet-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-item {
background: rgba(255, 255, 255, 0.03);
padding: 1rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.stat-label {
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-value {
color: var(--accent-primary);
font-size: 1.125rem;
font-weight: 700;
margin: 0;
}
.stat-value.highlight {
color: var(--accent-primary);
}
.balance-section {
background: var(--bg-tertiary);
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1.5rem;
border: 1px solid rgba(0, 45, 203, 0.1);
}
.balance-title {
color: var(--accent-primary);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.balance-amount {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.address-section {
background: var(--bg-tertiary);
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1.5rem;
border: 1px solid rgba(0, 45, 203, 0.1);
}
.address-title {
color: var(--text-secondary);
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.address-display {
background: var(--bg-card);
padding: 1rem;
border-radius: 8px;
border: 1px solid rgba(0, 45, 203, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.address-text {
color: var(--text-primary);
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.875rem;
/* word-break: break-all; This property is removed to allow text-overflow: ellipsis to work */
margin-right: 1rem;
flex: 1;
white-space: nowrap; /* Prevents text from wrapping to a new line */
overflow: hidden; /* Hides content that overflows the element's box */
text-overflow: ellipsis; /* Displays an ellipsis to indicate clipped text */
}
.copy-button {
background: var(--bg-tertiary);
border: 1px solid var(--border-input);
color: var(--text-secondary);
padding: 0.5rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
}
.copy-button:hover {
background: var(--bg-button-secondary);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.transfer-section {
background: var(--bg-tertiary);
padding: 1.5rem;
border-radius: 8px;
border: 1px solid rgba(0, 45, 203, 0.1);
}
.transfer-title {
color: var(--text-secondary);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.95rem;
margin-bottom: 0.5rem;
letter-spacing: 0.3px;
}
.form-group input {
width: 100%;
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary) !important;
padding: 0.8rem 1rem;
border-radius: 8px;
font-size: 0.95rem;
width: 100%;
transition: all 0.3s ease;
-webkit-text-fill-color: var(--text-primary);
letter-spacing: 0.3px;
font-weight: 400;
margin-bottom: 1rem;
}
.form-group input:focus {
background-color: var(--bg-card);
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(0, 45, 203, 0.10);
outline: none;
}
.form-group input::placeholder {
color: var(--text-secondary);
opacity: 0.8;
}
.action-buttons {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.send-button {
background: var(--bg-button-primary);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 45, 203, 0.10);
text-transform: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
margin: 0 auto;
width: fit-content;
}
.send-button:hover {
background: var(--bg-button-primary);
transform: translateY(-1px);
}
.message-container {
margin-bottom: 1.5rem;
padding: 1rem;
border-radius: 8px;
font-weight: 500;
display: none;
border: 1px solid;
}
.message-container.success {
background: rgba(0, 45, 203, 0.1);
color: var(--accent-primary);
border-color: rgba(0, 45, 203, 0.2);
}
.message-container.error {
background: rgba(130, 141, 179, 0.1);
color: var(--text-secondary);
border-color: rgba(130, 141, 179, 0.2);
}
@media (max-width: 600px) {
.wallet-stats {
grid-template-columns: 1fr;
}
.action-buttons {
flex-direction: column;
}
.address-display {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.copy-button {
align-self: flex-end;
}
}
/* Backup Settings Styles */
.setting-group {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--bg-tertiary);
border-radius: 8px;
border: 1px solid rgba(0, 45, 203, 0.1);
}
.setting-group:last-child {
margin-bottom: 0;
}
.setting-group .setting-label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.3px;
}
.setting-input {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary) !important;
padding: 0.8rem 1rem;
border-radius: 8px;
font-size: 0.95rem;
width: 100%;
transition: all 0.3s ease;
-webkit-text-fill-color: var(--text-primary);
letter-spacing: 0.3px;
font-weight: 400;
margin-bottom: 0.5rem;
}
.setting-input::placeholder {
color: var(--text-secondary);
font-weight: 300;
letter-spacing: 0.2px;
opacity: 0.8;
}
.setting-input:focus {
background-color: var(--bg-card);
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(0, 45, 203, 0.10);
outline: none;
}
.setting-input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
}
.setting-input[type="number"]::-webkit-outer-spin-button,
.setting-input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.setting-select {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary) !important;
padding: 0.8rem 1rem;
border-radius: 8px;
font-size: 0.95rem;
width: 100%;
transition: all 0.3s ease;
-webkit-text-fill-color: var(--text-primary);
letter-spacing: 0.3px;
font-weight: 400;
margin-bottom: 0.5rem;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1em;
padding-right: 2.5rem;
}
.setting-select:focus {
background-color: var(--bg-card);
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(0, 45, 203, 0.10);
outline: none;
}
.setting-select option {
background-color: var(--bg-input);
color: var(--text-primary);
padding: 0.5rem;
}
/* Backups Table Styles */
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
}
.backups-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-card);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 45, 203, 0.05);
border: 1px solid var(--border-primary);
color: var(--text-secondary);
min-width: 700px;
}
.backups-table th {
background: var(--bg-button-secondary);
color: var(--accent-primary);
font-weight: 700;
font-size: 0.875rem;
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(0, 45, 203, 0.10);
letter-spacing: 0.3px;
}
.backups-table td {
padding: 1rem;
border-bottom: 1px solid rgba(0, 45, 203, 0.1);
color: var(--text-secondary);
font-size: 0.9rem;
}
.backups-table tr:last-child td {
border-bottom: none;
}
.backups-table tr:hover {
background: rgba(0, 45, 203, 0.05);
}
.backups-table .block-id {
font-weight: 600;
color: var(--accent-primary);
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
.backups-table .date-time {
color: var(--text-secondary);
font-size: 0.85rem;
}
.backups-table .filename {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.8rem;
color: var(--text-secondary);
word-break: break-all;
}
.backups-table .file-size {
color: var(--text-secondary);
font-size: 0.85rem;
text-align: right;
}
.backups-table .actions {
text-align: center;
min-width: 180px;
display: flex;
gap: 0.25rem;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
color: var(--text-secondary);
}
.loading-container .spinner-border {
margin-bottom: 1rem;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
text-align: center;
color: var(--text-secondary);
}
.empty-state .material-icons {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.empty-state h3 {
color: var(--text-secondary);
margin-bottom: 0.5rem;
font-weight: 500;
}
.empty-state p {
font-size: 0.9rem;
line-height: 1.5;
max-width: 400px;
}
.button.small {
padding: 0.5rem;
font-size: 0.8rem;
height: 36px;
/* width: 36px; */
min-width: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.button.small .material-icons {
font-size: 1rem;
}
@media (max-width: 768px) {
.button.small {
padding: 0.4rem;
height: 32px;
min-width: 32px;
font-size: 0.75rem;
}
.button.small .material-icons {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.button.small {
padding: 0.35rem;
height: 30px;
min-width: 30px;
font-size: 0.7rem;
}
.button.small .material-icons {
font-size: 0.85rem;
}
}
@media (max-width: 768px) {
.table-responsive {
border-radius: 8px;
border: 1px solid var(--border-primary);
}
.backups-table {
font-size: 0.85rem;
min-width: 650px;
}
.backups-table th,
.backups-table td {
padding: 0.85rem 0.75rem;
}
}
@media (max-width: 600px) {
.backups-table {
font-size: 0.8rem;
min-width: 600px;
}
.backups-table th,
.backups-table td {
padding: 0.75rem 0.5rem;
}
.backups-table .filename {
max-width: 150px;
}
.backups-table .actions {
min-width: 160px;
}
}
/* Modal Styles */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(4px);
}
.modal-content {
background: var(--bg-card);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 45, 203, 0.10);
border: 1px solid rgba(0, 45, 203, 0.10);
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.modal.modal-wide .modal-content {
max-width: 960px;
width: min(960px, 95vw);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
border-bottom: 1px solid rgba(0, 45, 203, 0.10);
}
.modal-header h3 {
margin: 0;
color: var(--accent-primary);
font-size: 1.2rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.modal-header .material-icons {
color: var(--text-secondary);
}
.modal-close {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0.25rem;
border-radius: 50%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
max-width: 32px;
max-height: 32px;
margin-left: auto;
margin-right: 0;
}
.modal-close .material-icons {
font-size: 22px;
line-height: 1;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--accent-primary);
}
.modal-body {
padding: 1.5rem;
}
.markdown-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
color: var(--text-primary);
line-height: 1.6;
}
.markdown-section {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.markdown-content h4 {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: var(--accent-primary);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.markdown-content .emoji {
font-size: 1.1rem;
}
.markdown-lead {
margin: 0;
font-size: 0.95rem;
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.markdown-content p {
margin: 0;
font-size: 0.95rem;
color: var(--text-secondary);
}
.markdown-content ol,
.markdown-content ul {
margin: 0;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
color: var(--text-primary);
font-size: 0.95rem;
}
.markdown-content li {
padding-left: 0.25rem;
}
.markdown-content a {
color: var(--accent-primary);
font-weight: 600;
text-decoration: none;
}
.markdown-content a:hover {
text-decoration: underline;
}
.markdown-content code {
font-family: "Fira Code", "Source Code Pro", monospace;
background: rgba(0, 45, 203, 0.08);
color: var(--accent-primary);
padding: 0.1rem 0.4rem;
border-radius: 6px;
font-size: 0.9rem;
}
.markdown-content .code-block {
background: rgba(0, 45, 203, 0.08);
border: 1px solid rgba(0, 45, 203, 0.15);
border-radius: 10px;
padding: 1rem;
margin: 0;
overflow-x: auto;
}
.markdown-content pre {
margin: 0;
font-family: "Fira Code", "Source Code Pro", monospace;
font-size: 0.9rem;
color: var(--text-primary);
}
.markdown-content pre code {
background: transparent;
padding: 0;
border-radius: 0;
color: var(--text-primary);
}
.modal-footer {
display: flex;
gap: 1rem;
justify-content: flex-end;
padding: 1.5rem;
border-top: 1px solid rgba(0, 45, 203, 0.10);
}
.warning-message {
background: rgba(130, 141, 179, 0.1);
border: 1px solid rgba(130, 141, 179, 0.2);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.warning-message p {
margin: 0 0 0.5rem 0;
color: var(--text-primary);
font-size: 0.9rem;
}
.warning-message ul {
margin: 0.5rem 0 0 0;
padding-left: 1.5rem;
color: var(--text-secondary);
font-size: 0.85rem;
}
.warning-message li {
margin-bottom: 0.25rem;
}
.snapshot-info {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.snapshot-info h4 {
margin: 0 0 0.75rem 0;
color: var(--text-secondary);
font-size: 1rem;
font-weight: 600;
}
.snapshot-info p {
margin: 0 0 0.5rem 0;
color: var(--text-secondary);
font-size: 0.9rem;
}
.snapshot-info p:last-child {
margin-bottom: 0;
}
.snapshot-info strong {
color: var(--text-primary);
}
.backup-option {
margin-bottom: 1rem;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
color: var(--text-primary);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.checkbox-label input[type="checkbox"] {
margin: 0;
width: 18px;
height: 18px;
accent-color: var(--accent-primary);
}
.option-description {
margin: 0 0 0 2.25rem;
color: var(--text-secondary);
font-size: 0.8rem;
line-height: 1.4;
}
@media (max-width: 600px) {
.modal-content {
width: 95%;
margin: 1rem;
}
.modal-header,
.modal-body,
.modal-footer {
padding: 1rem;
}
.modal-footer {
flex-direction: column;
}
.modal-footer .button {
width: 100%;
}
}
/* Header Actions */
.header-actions {
display: flex;
gap: 0.75rem;
align-items: center;
}
@media (max-width: 600px) {
.header-actions {
flex-direction: column;
gap: 0.5rem;
}
.header-actions .button {
width: 100%;
}
}
/* Backup Preview Styles */
.info-message {
background: rgba(1, 45, 203, 0.1);
border: 1px solid rgba(1, 45, 203, 0.2);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.info-message p {
margin: 0 0 0.5rem 0;
color: var(--text-primary);
font-size: 0.9rem;
}
.info-message ul {
margin: 0.5rem 0 0 0;
padding-left: 1.5rem;
color: var(--text-secondary);
font-size: 0.85rem;
}
.info-message li {
margin-bottom: 0.25rem;
}
.backup-preview {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
}
.backup-preview h4 {
margin: 0 0 0.75rem 0;
color: var(--text-secondary);
font-size: 1rem;
font-weight: 600;
}
.preview-item {
margin-bottom: 0.75rem;
color: var(--text-secondary);
font-size: 0.9rem;
}
.preview-item:last-child {
margin-bottom: 0;
}
.preview-item strong {
color: var(--text-primary);
}
.loading-spinner {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.9rem;
}
.error-message {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem;
color: var(--text-secondary);
}
.error-message .material-icons {
font-size: 3rem;
color: var(--text-secondary);
margin-bottom: 1rem;
opacity: 0.7;
}
.error-message h4 {
color: var(--text-secondary);
margin: 0 0 0.5rem 0;
font-weight: 600;
}
.error-message p {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
max-width: 400px;
}
/* Peers Section Styles */
.peer-section {
margin-bottom: 2rem;
}
.peer-section:last-child {
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.peer-section {
margin-bottom: 1.25rem;
}
.peer-section:last-child {
margin-bottom: 0.5rem;
}
}
@media (max-width: 480px) {
.peer-section {
margin-bottom: 1rem;
}
.peer-section:last-child {
margin-bottom: 0.35rem;
}
}
.peer-section-title {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 1rem;
font-weight: 600;
margin: 0 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
.peer-section-title {
margin: 0 0 0.75rem 0;
padding-bottom: 0.4rem;
}
}
@media (max-width: 480px) {
.peer-section-title {
font-size: 0.9rem;
gap: 0.4rem;
margin: 0 0 0.6rem 0;
padding-bottom: 0.35rem;
}
}
.peer-section-title .material-icons {
font-size: 1.2rem;
color: var(--accent-primary);
}
.peer-count {
color: var(--text-secondary);
font-weight: 400;
font-size: 0.9rem;
}
.peer-card {
background: var(--bg-card);
border: 1px solid var(--border-input);
box-shadow: 0 8px 32px rgba(0, 45, 203, 0.08);
color: var(--text-primary);
border-radius: 8px;
padding: 1rem;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.peer-card {
padding: 0.75rem 0.85rem;
margin-bottom: 0.6rem;
}
}
@media (max-width: 480px) {
.peer-card {
padding: 0.65rem 0.75rem;
margin-bottom: 0.5rem;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
}
}
.peer-card:hover {
background: var(--bg-button-secondary);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.peer-card.my-node {
background: var(--bg-button-secondary);
border: 2px solid var(--accent-primary);
}
.peer-card.my-node:hover {
background: var(--bg-button-secondary-hover);
}
.peer-info {
flex: 1;
min-width: 0;
}
.peer-id {
color: var(--text-primary);
font-weight: 600;
font-size: 0.9rem;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
margin-bottom: 0.25rem;
word-break: break-all;
}
@media (max-width: 480px) {
.peer-id {
font-size: 0.8rem;
}
}
.peer-address {
color: var(--text-secondary);
font-size: 0.8rem;
font-family: 'Monaco', 'Ubuntu Mono', monospace;
word-break: break-all;
}
@media (max-width: 480px) {
.peer-address {
font-size: 0.75rem;
}
}
.peer-type {
display: inline-block;
background: rgba(0, 45, 203, 0.1);
color: var(--accent-primary);
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
text-transform: uppercase;
font-weight: 500;
}
.peer-copy {
display: flex;
gap: 0.25rem;
margin-right: 1rem;
flex-shrink: 0;
}
.peer-actions {
display: flex;
gap: 0.25rem;
margin-left: 1rem;
flex-shrink: 0;
}
.peers-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.no-peers {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
color: var(--text-secondary);
text-align: center;
background: var(--bg-tertiary);
border: 1px solid rgba(0, 45, 203, 0.1);
border-radius: 8px;
}
.no-peers .material-icons {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.no-peers p {
margin: 0;
font-size: 0.9rem;
}
@media (max-width: 600px) {
.peer-card {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.peer-actions {
margin-left: 0;
align-self: flex-end;
width: 100%;
justify-content: flex-end;
}
.peer-copy {
margin-right: 0;
}
}
/* Node Mode Styles */
.mode-options {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.mode-option {
display: block;
cursor: pointer;
border: 2px solid rgba(0, 45, 203, 0.1);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
background: var(--bg-tertiary);
position: relative;
}
.mode-option:hover {
border-color: rgba(0, 45, 203, 0.2);
background: var(--bg-button-secondary);
transform: translateY(-2px);
}
.mode-radio {
position: absolute;
opacity: 0;
cursor: pointer;
}
.mode-option input[type="radio"]:checked + .mode-content {
border-color: var(--accent-primary);
background: rgba(1, 45, 203, 0.1);
}
.mode-option input[type="radio"]:checked ~ .mode-content {
border-color: var(--accent-primary);
background: rgba(1, 45, 203, 0.1);
}
.mode-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mode-header {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mode-header .material-icons {
font-size: 1.5rem;
color: var(--accent-primary);
}
.mode-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
.mode-description {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
.mode-description code {
background: rgba(255, 255, 255, 0.1);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
color: var(--accent-primary);
}
/* Selected state styling */
.mode-option input[type="radio"]:checked + .mode-content .mode-header .material-icons {
color: var(--accent-primary);
}
.mode-option input[type="radio"]:checked + .mode-content .mode-title {
color: var(--accent-primary);
}
@media (max-width: 600px) {
.mode-option {
padding: 1rem;
}
.mode-header {
gap: 0.5rem;
}
.mode-title {
font-size: 1rem;
}
.mode-description {
font-size: 0.85rem;
}
}
/* Backup Warning Styles */
.backup-warning {
margin-top: 1rem;
}
.backup-warning .warning-message {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background: rgba(92, 101, 132, 0.1);
border: 1px solid rgba(92, 101, 132, 0.3);
border-radius: 8px;
color: var(--text-secondary);
font-size: 0.9rem;
}
.backup-warning .warning-message .material-icons {
font-size: 1.2rem;
color: var(--text-secondary);
}
.backup-warning .warning-message span {
flex: 1;
line-height: 1.4;
}
/* Disabled state for backup settings */
.setting-checkbox:disabled + .setting-text {
opacity: 0.5;
cursor: not-allowed;
}
.setting-checkbox:disabled {
cursor: not-allowed;
}
/* Key Backup Styles */
.key-backup-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.key-backup-actions .button {
flex: 1;
min-width: 150px;
justify-content: center;
}
@media (max-width: 600px) {
.key-backup-actions {
flex-direction: column;
}
.key-backup-actions .button {
min-width: auto;
}
}
/* Assets Table Styles */
.assets-table-container {
margin-top: 1rem;
overflow-x: auto;
border-radius: 8px;
border: 1px solid var(--border-input);
}
.assets-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-card);
font-size: 0.9rem;
}
.assets-table th {
background: var(--bg-button-secondary);
color: var(--accent-primary);
font-weight: 700;
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(0, 45, 203, 0.10);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.assets-table td {
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
vertical-align: middle;
}
.assets-table tr:last-child td {
border-bottom: none;
}
.assets-table tr:hover {
background: rgba(255, 255, 255, 0.05);
}
.assets-table .amount-cell {
font-weight: 600;
color: var(--text-primary);
font-family: 'Courier New', monospace;
}
.assets-table .symbol-cell {
font-weight: 500;
color: var(--text-primary);
}
.assets-table .contract-cell {
font-family: 'Courier New', monospace;
font-size: 0.8rem;
word-break: break-all;
max-width: 200px;
}
.assets-table .origin-cell {
font-size: 0.85rem;
color: var(--text-secondary);
}
@media (max-width: 600px) {
.assets-table {
font-size: 0.8rem;
}
.assets-table th,
.assets-table td {
padding: 0.75rem 0.5rem;
}
.assets-table .contract-cell {
max-width: 120px;
font-size: 0.75rem;
}
}
/* Delegations Table Styles */
.delegations-table-container {
margin-top: 1rem;
overflow-x: auto;
border-radius: 8px;
border: 1px solid var(--border-input);
}
.delegations-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-card);
font-size: 0.9rem;
}
.delegations-table th {
background: var(--bg-button-secondary);
color: var(--accent-primary);
font-weight: 700;
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(0, 45, 203, 0.10);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.delegations-table td {
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
vertical-align: middle;
}
.delegations-table tr:last-child td {
border-bottom: none;
}
.delegations-table tr:hover {
background: rgba(255, 255, 255, 0.05);
}
.delegations-table .amount-cell {
font-weight: 600;
color: var(--text-primary);
font-family: 'Courier New', monospace;
word-break: break-all;
max-width: 150px;
overflow-wrap: break-word;
}
@media (max-width: 768px) {
.delegations-table .amount-cell {
max-width: 120px;
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.delegations-table .amount-cell {
max-width: 100px;
font-size: 0.8rem;
}
}
.delegations-table .symbol-cell {
font-weight: 500;
color: var(--text-primary);
}
.delegations-table .contract-cell {
font-family: 'Courier New', monospace;
font-size: 0.8rem;
word-break: break-all;
max-width: 200px;
overflow-wrap: break-word;
}
@media (max-width: 768px) {
.delegations-table .contract-cell {
max-width: 150px;
font-size: 0.75rem;
}
}
.delegations-table .origin-cell {
font-size: 0.85rem;
color: var(--text-secondary);
}
.delegations-table .actions-cell {
text-align: center;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
gap: 0.25rem;
}
.delegations-table .actions-cell .button {
margin: 0;
padding: 0.5rem;
min-width: auto;
height: auto;
flex-shrink: 0;
}
.delegations-table .actions-cell .button .material-icons {
font-size: 1rem;
}
@media (max-width: 768px) {
.delegations-table {
font-size: 0.85rem;
}
.delegations-table th,
.delegations-table td {
padding: 0.85rem 0.65rem;
}
}
@media (max-width: 600px) {
.delegations-table {
font-size: 0.8rem;
}
.delegations-table th,
.delegations-table td {
padding: 0.75rem 0.5rem;
}
.delegations-table .contract-cell {
max-width: 100px;
font-size: 0.7rem;
}
.delegations-table .amount-cell {
max-width: 90px;
}
.delegations-table .actions-cell .button {
margin: 0;
padding: 0.4rem;
}
.delegations-table .actions-cell .button .material-icons {
font-size: 0.9rem;
}
}
/* B2 Configuration Styles */
.b2-config-section {
background: var(--bg-tertiary);
border: 1px solid rgba(0, 45, 203, 0.1);
border-radius: 12px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.b2-config-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--accent-primary);
margin-bottom: 0.75rem;
}
.b2-config-title .material-icons {
color: var(--accent-primary);
font-size: 1.25rem;
}
.b2-config-description {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.25rem;
}
.b2-config-button {
background: var(--bg-button-primary);
border: none;
color: var(--text-inverse);
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.b2-config-button:hover {
background: var(--bg-button-primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 45, 203, 0.3);
}
.b2-config-button .material-icons {
font-size: 1.1rem;
}
/* Enhanced Modal Styles */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
backdrop-filter: blur(4px);
animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
from {
opacity: 0;
backdrop-filter: blur(0px);
}
to {
opacity: 1;
backdrop-filter: blur(4px);
}
}
.modal-content {
background: var(--bg-card);
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 45, 203, 0.10);
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid rgba(0, 45, 203, 0.10);
}
.modal-header h3 {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0;
color: var(--accent-primary);
font-size: 1.25rem;
font-weight: 700;
}
.modal-header h3 .material-icons {
color: var(--accent-primary);
font-size: 1.4rem;
}
.modal-close {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--accent-primary);
}
.modal-body {
padding: 1.5rem;
}
.modal-body .form-group {
margin-bottom: 1.5rem;
}
.modal-body .form-group:last-child {
margin-bottom: 0;
}
.modal-body .form-group label {
display: block;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 0.5rem;
letter-spacing: 0.3px;
}
.modal-body .form-control {
background-color: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-inverse);
padding: 0.8rem 1rem;
border-radius: 8px;
font-size: 0.95rem;
width: 100%;
transition: all 0.3s ease;
letter-spacing: 0.3px;
font-weight: 400;
box-sizing: border-box;
}
.modal-body .form-control:focus {
background-color: var(--bg-tertiary);
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(0, 45, 203, 0.10);
outline: none;
}
.modal-body .form-control::placeholder {
color: var(--text-secondary);
font-weight: 300;
letter-spacing: 0.2px;
opacity: 0.8;
}
.modal-body .form-text {
display: block;
color: var(--text-tertiary);
font-size: 0.8rem;
margin-top: 0.5rem;
line-height: 1.4;
}
.modal-footer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
padding: 1.5rem;
border-top: 1px solid rgba(0, 45, 203, 0.10);
background: rgba(255, 255, 255, 0.02);
border-radius: 0 0 16px 16px;
flex-wrap: nowrap;
overflow: hidden;
}
.modal-footer .button {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
border: none;
min-width: 120px;
justify-content: center;
}
.modal-footer .button.primary {
background: var(--bg-button-primary);
color: var(--text-inverse);
border: 1px solid var(--bg-button-primary);
}
.modal-footer .button.primary:hover {
background: var(--bg-button-primary);
color: var(--text-inverse);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 45, 203, 0.3);
}
/* Duplicate styles removed - see earlier in the file */
/* Responsive Modal */
@media (max-width: 600px) {
.modal-content {
width: 95%;
max-width: none;
margin: 1rem;
max-height: 95vh;
}
.modal-header,
.modal-body,
.modal-footer {
padding: 1rem;
}
.modal-footer {
flex-direction: row;
gap: 0.5rem;
flex-wrap: nowrap;
overflow: hidden;
padding: 1rem;
}
.modal-footer .button {
flex: 1;
min-width: auto;
white-space: nowrap;
min-height: 44px;
max-width: 120px;
padding: 0.75rem 0.5rem;
font-size: 0.8rem;
text-overflow: ellipsis;
overflow: hidden;
}
.modal-footer .button .material-icons {
font-size: 0.8rem;
margin-right: 0.2rem;
}
.b2-config-section {
padding: 1rem;
}
.b2-config-title {
font-size: 1rem;
}
.b2-config-description {
font-size: 0.85rem;
}
/* Ensure footer stays visible on mobile */
#b2-config-modal .modal-footer,
#b2-upload-success-modal .modal-footer,
#b2-test-success-modal .modal-footer,
#b2-upload-progress-modal .modal-footer {
position: sticky;
bottom: 0;
background: var(--bg-card);
border-top: 1px solid rgba(0, 45, 203, 0.10);
z-index: 10;
padding: 1rem;
flex-direction: row;
flex-wrap: nowrap;
overflow: hidden;
}
/* Mobile styles for upload progress */
.upload-progress-container {
margin-bottom: 1rem;
}
.progress-bar-container {
flex-direction: column;
gap: 0.5rem;
}
.progress-percentage {
text-align: center;
min-width: auto;
}
.upload-progress-info {
padding: 0.75rem;
}
.upload-progress-info h4 {
font-size: 1rem;
}
.upload-progress-info p {
font-size: 0.85rem;
}
}
/* B2 Configuration Styles for Backups Page */
.b2-config-description {
color: var(--text-tertiary);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.25rem;
}
/* B2 Upload Progress Styles */
.upload-progress-info {
background: rgba(52, 152, 219, 0.1);
border: 1px solid rgba(52, 152, 219, 0.2);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.upload-progress-info h4 {
color: #3498db;
margin: 0 0 0.75rem 0;
font-size: 1.1rem;
font-weight: 600;
}
.upload-progress-info p {
margin: 0.5rem 0;
color: var(--text-primary);
font-size: 0.9rem;
}
.upload-progress-container {
margin-bottom: 1.5rem;
}
.progress-status {
color: var(--text-primary);
font-weight: 500;
margin-bottom: 0.75rem;
font-size: 0.95rem;
}
.progress-bar-container {
display: flex;
align-items: center;
gap: 1rem;
}
.progress-bar {
flex: 1;
height: 12px;
background: rgba(52, 152, 219, 0.1);
border-radius: 6px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #3498db, #2980b9);
border-radius: 6px;
transition: width 0.3s ease;
width: 0%;
}
.progress-percentage {
color: var(--text-primary);
font-weight: 600;
font-size: 0.9rem;
min-width: 40px;
text-align: right;
}
.upload-info {
background: rgba(52, 152, 219, 0.05);
border-radius: 6px;
padding: 0.75rem;
border-left: 3px solid #3498db;
}
.upload-info p {
margin: 0;
color: var(--text-secondary);
font-size: 0.85rem;
}
/* Error state for progress */
.progress-fill.error {
background: linear-gradient(90deg, #e74c3c, #c0392b);
}
.progress-status.error {
color: #e74c3c;
}
/* Enhanced Modal Styles for B2 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
backdrop-filter: blur(4px);
animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
from {
opacity: 0;
backdrop-filter: blur(0px);
}
to {
opacity: 1;
backdrop-filter: blur(4px);
}
}
.modal-content {
background: var(--bg-card);
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 45, 203, 0.10);
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid rgba(0, 45, 203, 0.10);
}
.modal-header h3 {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0;
color: var(--accent-primary);
font-size: 1.25rem;
font-weight: 700;
}
.modal-header h3 .material-icons {
color: var(--accent-primary);
font-size: 1.4rem;
}
.modal-close {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--accent-primary);
}
.modal-body {
padding: 1.5rem;
}
.modal-body .form-group {
margin-bottom: 1.5rem;
}
.modal-body .form-group:last-child {
margin-bottom: 0;
}
.modal-body .form-group label {
display: block;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 0.5rem;
letter-spacing: 0.3px;
}
.modal-body .form-control {
background-color: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-inverse);
padding: 0.8rem 1rem;
border-radius: 8px;
font-size: 0.95rem;
width: 100%;
transition: all 0.3s ease;
letter-spacing: 0.3px;
font-weight: 400;
box-sizing: border-box;
}
.modal-body .form-control:focus {
background-color: var(--bg-tertiary);
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(0, 45, 203, 0.10);
outline: none;
}
.modal-body .form-control::placeholder {
color: var(--text-secondary);
font-weight: 300;
letter-spacing: 0.2px;
opacity: 0.8;
}
.modal-body .form-text {
display: block;
color: var(--text-tertiary);
font-size: 0.8rem;
margin-top: 0.5rem;
line-height: 1.4;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 1rem;
padding: 1.5rem;
border-top: 1px solid rgba(0, 45, 203, 0.10);
background: rgba(255, 255, 255, 0.02);
border-radius: 0 0 16px 16px;
}
.modal-footer .button {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
border: none;
min-width: 120px;
justify-content: center;
}
/* Duplicate styles removed - see earlier in the file */
/* Responsive Modal */
@media (max-width: 600px) {
.modal-content {
width: 95%;
max-width: none;
margin: 1rem;
}
.modal-header,
.modal-body,
.modal-footer {
padding: 1rem;
}
.modal-footer {
flex-direction: column;
}
.modal-footer .button {
width: 100%;
justify-content: center;
}
}
/* B2 Modal Layout - Fixed Footer */
#b2-config-modal .modal-content,
#b2-upload-success-modal .modal-content,
#b2-test-success-modal .modal-content {
display: flex;
flex-direction: column;
max-height: 90vh;
}
#b2-config-modal .modal-body,
#b2-upload-success-modal .modal-body,
#b2-test-success-modal .modal-body {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: 1.5rem;
}
#b2-config-modal .modal-footer,
#b2-upload-success-modal .modal-footer,
#b2-test-success-modal .modal-footer {
flex-shrink: 0;
position: sticky;
bottom: 0;
background: var(--bg-card);
border-top: 1px solid rgba(0, 45, 203, 0.10);
z-index: 10;
}
/* B2 Modal Button Styles - Fixed */
.modal-footer .button {
position: relative;
overflow: hidden;
font-weight: 500;
letter-spacing: 0.3px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0.75rem 0.75rem;
min-width: auto;
white-space: nowrap;
flex: 1;
max-width: 150px;
font-size: 0.85rem;
text-overflow: ellipsis;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.modal-footer .button.primary {
background: var(--bg-button-primary);
color: var(--text-inverse);
border: 1px solid var(--bg-button-primary);
box-shadow: 0 2px 4px rgba(0, 45, 203, 0.1);
}
.modal-footer .button.primary:hover {
background: var(--bg-button-primary);
color: var(--text-inverse);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 45, 203, 0.25);
}
.modal-footer .button.secondary {
background: var(--bg-button-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.modal-footer .button.secondary:hover {
background: var(--bg-button-secondary-hover);
color: var(--accent-primary);
border: 1px solid var(--accent-primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 45, 203, 0.15);
}
.modal-footer .button:active {
transform: translateY(0);
transition: transform 0.1s ease;
}
.modal-footer .button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.modal-footer .button .material-icons {
font-size: 0.9rem;
transition: transform 0.3s ease;
flex-shrink: 0;
margin-right: 0.25rem;
}
.modal-footer .button:hover .material-icons {
transform: scale(1.1);
}
/* B2 Upload Success Modal Styles */
.upload-success-info {
background: rgba(0, 45, 203, 0.1);
border: 1px solid rgba(0, 45, 203, 0.2);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.upload-success-info h4 {
color: var(--accent-primary);
margin: 0 0 0.75rem 0;
font-size: 1.1rem;
font-weight: 600;
}
.upload-success-info p {
margin: 0.5rem 0;
color: var(--text-primary);
font-size: 0.9rem;
}
.upload-success-info strong {
color: var(--accent-primary);
}
.b2-links-section {
margin-bottom: 1.5rem;
}
.b2-links-section h4 {
color: var(--text-primary);
margin: 0 0 1rem 0;
font-size: 1rem;
font-weight: 600;
}
.b2-link-item {
margin-bottom: 1rem;
}
.b2-link-item:last-child {
margin-bottom: 0;
}
.b2-link-item label {
display: block;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.85rem;
margin-bottom: 0.5rem;
letter-spacing: 0.3px;
}
.link-container {
display: flex;
gap: 0.5rem;
align-items: center;
}
.link-container .form-control {
flex: 1;
background-color: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
padding: 0.6rem 0.8rem;
border-radius: 6px;
font-size: 0.8rem;
font-family: 'Courier New', monospace;
cursor: text;
}
.link-container .form-control:focus {
background-color: var(--bg-card);
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px rgba(1, 45, 203, 0.15);
outline: none;
}
.link-container .button {
padding: 0.6rem;
min-width: auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.link-container .button .material-icons {
font-size: 16px;
}
.upload-stats {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 1rem;
}
.upload-stats h4 {
color: var(--text-primary);
margin: 0 0 1rem 0;
font-size: 1rem;
font-weight: 600;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.stats-grid .stat-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.stats-grid .stat-label {
color: var(--text-tertiary);
font-size: 0.8rem;
font-weight: 500;
}
.stats-grid .stat-value {
color: var(--text-primary);
font-size: 0.9rem;
font-weight: 600;
font-family: 'Courier New', monospace;
}
/* Responsive adjustments for B2 success modal */
@media (max-width: 600px) {
.stats-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.link-container {
flex-direction: column;
align-items: stretch;
}
.link-container .button {
width: 100%;
height: 40px;
}
.upload-success-info,
.upload-stats {
padding: 0.75rem;
}
}
/* B2 File Exists Modal Styles */
.backup-info {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
.backup-info h4 {
color: var(--text-primary);
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.backup-info p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.backup-info p:last-child {
margin-bottom: 0;
}
.backup-info strong {
color: var(--text-primary);
font-weight: 500;
}
.backup-info span {
color: var(--text-tertiary);
font-weight: 400;
}
@media (max-width: 600px) {
.backup-info {
padding: 1rem;
}
.backup-info p {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
}
.form-control.is-valid {
box-shadow: 0 0 0 2px rgba(0, 45, 203, 0.10);
}
.form-control.is-invalid {
box-shadow: 0 0 0 2px rgba(130, 141, 179, 0.15);
}
button.btn {
position: relative;
overflow: hidden;
background: var(--bg-button-primary);
border: none;
color: var(--text-inverse) !important;
padding: 1rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: 10px;
width: 100%;
height: 48px;
cursor: pointer;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 45, 203, 0.10);
text-transform: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
z-index: 2;
}
.btn-content {
display: flex;
align-items: center;
gap: 0.5rem;
z-index: 2;
}
.btn .material-icons {
font-size: 1.2rem;
opacity: 0.85;
}
.btn-ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
background: rgba(0, 45, 203, 0.15);
pointer-events: none;
z-index: 1;
opacity: 0.7;
transition: transform 0.5s, opacity 0.5s;
}
.ripple-active {
transform: scale(2.5);
opacity: 0;
transition: transform 0.5s, opacity 0.5s;
}
/* Backup Info Grid for B2 Link Modal */
.backup-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1rem;
}
.backup-info-grid .info-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.backup-info-grid .info-label {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
.backup-info-grid .info-value {
font-size: 0.9rem;
color: var(--text-primary);
font-weight: 600;
word-break: break-word;
}
@media (max-width: 600px) {
.backup-info-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
.comming-soon {
cursor: not-allowed;
pointer-events: none;
}
.comming-soon-banner {
color: orange !important;
}
/* Fullscreen Modal Styles */
.fullscreen-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 9999 !important;
background-color: rgba(0, 0, 0, 0.8) !important;
}
.fullscreen-content {
width: 95vw !important;
height: 95vh !important;
max-width: 1400px !important;
max-height: 900px !important;
background: var(--bg-card, #ffffff) !important;
border-radius: 12px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
.fullscreen-content .modal-header {
padding: 20px 24px !important;
border-bottom: 1px solid var(--border-primary, #e0e0e0) !important;
background: var(--bg-card, #ffffff) !important;
border-radius: 12px 12px 0 0 !important;
}
.fullscreen-content .modal-body {
flex: 1 !important;
padding: 24px !important;
overflow-y: auto !important;
background: var(--bg-card, #ffffff) !important;
}
.fullscreen-content .modal-footer {
padding: 20px 24px !important;
border-top: 1px solid var(--border-primary, #e0e0e0) !important;
background: var(--bg-card, #ffffff) !important;
border-radius: 0 0 12px 12px !important;
}
/* Responsive adjustments for fullscreen modal */
@media (max-width: 768px) {
.fullscreen-content {
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
border-radius: 0 !important;
}
.fullscreen-content .modal-header,
.fullscreen-content .modal-body,
.fullscreen-content .modal-footer {
border-radius: 0 !important;
}
.fullscreen-content .modal-header {
padding: 1rem 1.25rem !important;
}
.fullscreen-content .modal-body {
padding: 1.25rem !important;
}
.fullscreen-content .modal-footer {
padding: 1rem 1.25rem !important;
}
}
@media (max-width: 480px) {
.fullscreen-content {
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
border-radius: 0 !important;
}
.fullscreen-content .modal-header,
.fullscreen-content .modal-body,
.fullscreen-content .modal-footer {
border-radius: 0 !important;
}
.fullscreen-content .modal-header {
padding: 0.875rem 1rem !important;
}
.fullscreen-content .modal-body {
padding: 1rem !important;
}
.fullscreen-content .modal-footer {
padding: 0.875rem 1rem !important;
}
.fullscreen-content .modal-header h3 {
font-size: 1.1rem !important;
}
}
/* RPC Configuration Page Styles */
.config-display {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.config-item {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 8px;
padding: 1rem;
}
.config-label {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
margin-bottom: 0.5rem;
}
.config-value {
font-size: 1.1rem;
color: var(--text-primary);
font-weight: 600;
}
.config-note {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.config-note p {
margin: 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
.config-preview {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
}
.config-preview pre {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 4px;
padding: 1rem;
margin: 0;
font-size: 0.85rem;
color: var(--text-primary);
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
/* Dark theme adjustments for RPC config page */
[data-theme="dark"] .config-item {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .config-note {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .config-preview {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .config-preview pre {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
/* RPC Metrics Styles */
.metrics-loading {
display: flex;
align-items: center;
gap: 1rem;
padding: 2rem;
justify-content: center;
color: var(--text-secondary);
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--border-primary);
border-top: 2px solid var(--accent-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.metrics-error {
display: flex;
align-items: center;
gap: 1rem;
padding: 2rem;
justify-content: center;
color: var(--accent-error);
background: rgba(220, 53, 69, 0.1);
border: 1px solid rgba(220, 53, 69, 0.2);
border-radius: 8px;
margin: 1rem 0;
}
.metrics-section {
margin-bottom: 2rem;
}
.metrics-section:last-child {
margin-bottom: 0;
}
.metrics-section-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--accent-primary);
margin-bottom: 1rem;
}
.metrics-section-title .material-icons {
color: var(--accent-primary);
font-size: 1.25rem;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.metric-item {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 8px;
padding: 1rem;
}
.metric-label {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
margin-bottom: 0.5rem;
}
.metric-value {
font-size: 1.1rem;
color: var(--text-primary);
font-weight: 600;
font-family: 'Courier New', monospace;
}
.metrics-table-container {
overflow-x: auto;
border-radius: 8px;
border: 1px solid var(--border-primary);
margin-bottom: 1rem;
}
.metrics-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-card);
font-size: 0.9rem;
}
.metrics-table th {
background: var(--bg-button-secondary);
color: var(--accent-primary);
font-weight: 700;
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(0, 45, 203, 0.10);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.metrics-table td {
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
vertical-align: middle;
}
.metrics-table tr:last-child td {
border-bottom: none;
}
.metrics-table tr:hover {
background: rgba(255, 255, 255, 0.05);
}
.method-name {
font-weight: 600;
color: var(--text-primary);
font-family: 'Courier New', monospace;
}
.method-count {
font-weight: 600;
color: var(--text-primary);
text-align: center;
}
.method-avg-time,
.method-min-time,
.method-max-time {
font-weight: 500;
color: var(--text-primary);
text-align: center;
font-family: 'Courier New', monospace;
}
.method-error-count {
font-weight: 600;
color: var(--accent-error);
text-align: center;
}
.method-last-call {
font-size: 0.85rem;
color: var(--text-secondary);
white-space: nowrap;
}
.metrics-timestamp {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.9rem;
padding: 1rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 8px;
}
.metrics-timestamp .material-icons {
font-size: 1rem;
color: var(--text-secondary);
}
/* Dark theme adjustments for metrics */
[data-theme="dark"] .metric-item {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .metrics-table {
background: var(--bg-card);
}
[data-theme="dark"] .metrics-table th {
background: var(--bg-button-secondary);
border-bottom: 1px solid rgba(0, 45, 203, 0.10);
}
[data-theme="dark"] .metrics-table td {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .metrics-timestamp {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
/* Responsive adjustments for metrics */
@media (max-width: 768px) {
.metrics-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.metrics-table-container {
font-size: 0.8rem;
}
.metrics-table th,
.metrics-table td {
padding: 0.75rem 0.5rem;
}
.method-last-call {
font-size: 0.75rem;
}
}
/* Method Rate Limits Styles */
.method-rate-limits-container {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
}
.method-rate-limits-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1rem;
padding: 0.75rem;
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 6px;
margin-bottom: 1rem;
font-weight: 600;
color: var(--text-primary);
font-size: 0.9rem;
}
.method-rate-limit-item {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1rem;
padding: 0.75rem;
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 6px;
margin-bottom: 0.5rem;
align-items: center;
}
.method-rate-limit-item:last-child {
margin-bottom: 0;
}
.method-rate-limit-item input {
background: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
padding: 0.5rem;
border-radius: 4px;
font-size: 0.9rem;
width: 100%;
}
.method-rate-limit-item input:focus {
border-color: var(--accent-primary);
outline: none;
}
.method-rate-limit-item .method-name {
font-weight: 500;
color: var(--text-primary);
font-family: 'Courier New', monospace;
}
.method-rate-limit-item .rate-limit-value {
font-weight: 500;
color: var(--text-primary);
}
.method-rate-limit-item .actions {
display: flex;
gap: 0.5rem;
}
.method-rate-limit-item .button {
padding: 0.4rem 0.6rem;
min-width: auto;
height: auto;
font-size: 0.8rem;
}
.method-rate-limit-item .button .material-icons {
font-size: 0.9rem;
}
.add-method-rate-limit {
display: grid;
grid-template-columns: 2fr 1fr auto;
gap: 1rem;
align-items: end;
padding-top: 1rem;
border-top: 1px solid var(--border-primary);
}
.add-method-rate-limit input {
background: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
padding: 0.5rem;
border-radius: 4px;
font-size: 0.9rem;
}
.add-method-rate-limit input:focus {
border-color: var(--accent-primary);
outline: none;
}
.add-method-rate-limit .button {
padding: 0.5rem 0.75rem;
min-width: auto;
height: auto;
font-size: 0.8rem;
}
.add-method-rate-limit .button .material-icons {
font-size: 0.9rem;
}
/* Dark theme adjustments for method rate limits */
[data-theme="dark"] .method-rate-limits-container {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .method-rate-limits-header,
[data-theme="dark"] .method-rate-limit-item {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
/* Responsive adjustments for method rate limits */
@media (max-width: 768px) {
.method-rate-limits-header,
.method-rate-limit-item,
.add-method-rate-limit {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.method-rate-limits-header span {
text-align: center;
font-size: 0.8rem;
}
.method-rate-limit-item .actions {
justify-content: center;
}
.add-method-rate-limit .button {
width: 100%;
justify-content: center;
}
}
/* RPC HTTP/WS Configuration Styles */
.rpc-http-config,
.rpc-ws-config {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
}
.rpc-option {
margin-bottom: 1rem;
}
.rpc-option:last-child {
margin-bottom: 0;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
user-select: none;
}
.setting-checkbox {
width: 18px;
height: 18px;
accent-color: var(--accent-primary);
cursor: pointer;
}
.checkbox-text {
font-weight: 500;
color: var(--text-primary);
font-size: 0.95rem;
}
.rpc-port-config {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.rpc-port-config .setting-label {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
margin-bottom: 0;
}
.rpc-port-config .setting-input {
max-width: 150px;
}
.rpc-port-config .setting-description {
font-size: 0.85rem;
color: var(--text-tertiary);
margin: 0;
}
/* Dark theme adjustments for RPC config */
[data-theme="dark"] .rpc-http-config,
[data-theme="dark"] .rpc-ws-config {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
/* Responsive adjustments for RPC config */
@media (max-width: 768px) {
.rpc-port-config .setting-input {
max-width: 100%;
}
}
/* Settings Page Styles */
.settings-body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.settings-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.input-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.input-label-row label {
margin-bottom: 0;
}
.settings-group label {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.checkbox-label input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--accent-primary);
}
.checkbox-label span {
user-select: none;
}
.form-input {
padding: 0.75rem 1rem;
border: 1px solid var(--border-primary);
border-radius: 12px;
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 0.95rem;
font-family: 'Poppins', sans-serif;
transition: all 0.2s ease;
}
.form-input:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
.help-text {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.mode-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.mode-option {
position: relative;
cursor: pointer;
display: flex;
}
.mode-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mode-content {
padding: 1.25rem 1.5rem;
border: 2px solid var(--border-primary);
border-radius: 16px;
background: var(--bg-secondary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
position: relative;
overflow: hidden;
}
.mode-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-primary), #64b5f6);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mode-content::after {
content: '';
position: absolute;
top: 1rem;
right: 1rem;
width: 24px;
height: 24px;
border: 2px solid var(--border-primary);
border-radius: 50%;
background: var(--bg-secondary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mode-option input[type="radio"]:checked + .mode-content {
border-color: var(--accent-primary);
background: linear-gradient(135deg, var(--bg-button-secondary) 0%, var(--bg-secondary) 100%);
box-shadow: 0 8px 24px rgba(33, 150, 243, 0.15), 0 0 0 1px rgba(33, 150, 243, 0.1);
transform: translateY(-2px);
}
.mode-option input[type="radio"]:checked + .mode-content::before {
transform: scaleX(1);
}
.mode-option input[type="radio"]:checked + .mode-content::after {
background: var(--accent-primary);
border-color: var(--accent-primary);
box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.2), inset 0 0 0 4px var(--bg-secondary);
}
.mode-option:hover .mode-content {
border-color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.mode-option:active .mode-content {
transform: translateY(0);
}
.mode-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding-right: 2rem;
}
.mode-header .material-icons {
font-size: 1.8rem;
color: var(--accent-primary);
padding: 0.5rem;
background: rgba(33, 150, 243, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
}
.mode-option input[type="radio"]:checked + .mode-content .mode-header .material-icons {
background: rgba(33, 150, 243, 0.2);
transform: scale(1.05);
}
.mode-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
.mode-description {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.mode-description code {
padding: 0.2rem 0.5rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 6px;
font-size: 0.8rem;
color: var(--accent-primary);
font-family: 'Monaco', 'Courier New', monospace;
}
.button-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.key-backup-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.warning-box {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: rgba(244, 67, 54, 0.1);
border: 1px solid rgba(244, 67, 54, 0.3);
border-radius: 12px;
margin-bottom: 1rem;
}
.warning-box .material-icons {
font-size: 1.5rem;
color: #f44336;
}
.warning-box p {
margin: 0;
color: var(--text-primary);
font-weight: 500;
}
.backup-warning {
padding: 1rem 1.25rem;
background: rgba(255, 152, 0, 0.1);
border: 1px solid rgba(255, 152, 0, 0.3);
border-radius: 12px;
margin-top: 0.75rem;
}
.warning-message {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-primary);
}
.warning-message .material-icons {
font-size: 1.3rem;
color: #ff9800;
}
.warning-message span {
flex: 1;
font-size: 0.9rem;
line-height: 1.5;
}
/* Dark theme adjustments for settings */
[data-theme="dark"] .form-input {
background: var(--bg-tertiary);
}
[data-theme="dark"] .mode-content {
background: var(--bg-tertiary);
}
[data-theme="dark"] .mode-content::after {
background: var(--bg-tertiary);
border-color: var(--border-primary);
}
[data-theme="dark"] .mode-option input[type="radio"]:checked + .mode-content {
background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, var(--bg-tertiary) 100%);
}
[data-theme="dark"] .mode-option input[type="radio"]:checked + .mode-content::after {
background: var(--accent-primary);
box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.3), inset 0 0 0 4px var(--bg-tertiary);
}
[data-theme="dark"] .mode-header .material-icons {
background: rgba(33, 150, 243, 0.15);
}
[data-theme="dark"] .mode-option input[type="radio"]:checked + .mode-content .mode-header .material-icons {
background: rgba(33, 150, 243, 0.25);
}
/* Wallet Page Styles */
.wallet-address-body {
display: flex;
flex-direction: column;
gap: 1rem;
}
.balance-display {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0.02em;
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, var(--accent-primary), #64b5f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media (max-width: 768px) {
.balance-display {
font-size: 1.5rem;
}
}
/* ===============================================
Node Commands Modal Styles
=============================================== */
/* Custom Tabs */
.custom-tabs {
display: flex;
gap: 0.5rem;
border-bottom: 2px solid var(--border-primary);
margin-bottom: 2rem;
padding: 0 0.5rem;
}
.custom-tab-button {
background: transparent;
border: none;
padding: 1rem 1.5rem;
cursor: pointer;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 0.65rem;
border-radius: 8px 8px 0 0;
position: relative;
user-select: none;
}
.custom-tab-button::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--accent-primary);
transform: scaleX(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-tab-button:hover {
color: var(--text-primary);
background: var(--bg-button-secondary-hover);
}
.custom-tab-button.active {
color: var(--accent-primary);
background: var(--bg-button-secondary-hover);
font-weight: 600;
}
.custom-tab-button.active::after {
transform: scaleX(1);
}
.custom-tab-button .material-icons {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.custom-tab-button.active .material-icons {
transform: scale(1.1);
}
/* Tab Content */
.custom-tab-content {
position: relative;
}
.custom-tab-pane {
display: none;
animation: fadeSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-tab-pane.active {
display: block;
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Commands Section */
.commands-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.commands-section h4 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 1rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-primary);
}
/* Command Item */
.command-item {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-card);
}
.command-item:hover {
box-shadow: var(--shadow-secondary);
border-color: var(--border-secondary);
}
/* Command Header */
.command-header {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.command-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.command-description {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
}
/* Command Input Group */
.command-input-group {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1rem;
}
.command-input-group label {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.command-input-group input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--border-input);
border-radius: 8px;
background: var(--bg-input);
color: var(--text-primary);
font-size: 0.95rem;
transition: all 0.3s ease;
}
.command-input-group input:focus {
outline: none;
border-color: var(--border-input-focus);
box-shadow: 0 0 0 3px rgba(0, 45, 203, 0.1);
}
.command-input-group .button {
margin-top: 0.5rem;
align-self: flex-start;
}
/* Command Logs */
.command-logs {
margin-top: 1.25rem;
border-radius: 8px;
overflow: hidden;
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
margin-top: 0;
}
to {
opacity: 1;
max-height: 500px;
margin-top: 1.25rem;
}
}
.logs-header {
padding: 0.875rem 1.25rem;
background: var(--bg-button-secondary);
border-bottom: 1px solid var(--border-primary);
display: flex;
align-items: center;
justify-content: space-between;
}
.logs-header span {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
}
.logs-header .button {
padding: 0.5rem 0.875rem;
font-size: 0.85rem;
}
.logs-content {
padding: 1rem;
max-height: 350px;
overflow-y: auto;
background: var(--bg-input);
}
.logs-content pre {
margin: 0;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-primary);
white-space: pre-wrap;
word-break: break-word;
}
/* Fullscreen Modal Enhancements */
.fullscreen-modal .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem !important;
border-bottom: 1px solid var(--border-primary) !important;
background: var(--bg-card) !important;
}
.fullscreen-modal .modal-header h3 {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
}
.fullscreen-modal .modal-header h3 .material-icons {
font-size: 1.75rem;
color: var(--accent-primary);
}
.fullscreen-modal .modal-close {
background: transparent;
border: none;
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: var(--text-secondary);
}
.fullscreen-modal .modal-close:hover {
background: var(--bg-button-secondary-hover);
color: var(--text-primary);
}
.fullscreen-modal .modal-close .material-icons {
font-size: 1.5rem;
}
.fullscreen-modal .modal-body {
padding: 2rem !important;
overflow-y: auto !important;
background: var(--bg-secondary) !important;
}
.fullscreen-modal .modal-footer {
padding: 1.25rem 2rem !important;
border-top: 1px solid var(--border-primary) !important;
background: var(--bg-card) !important;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
}
/* Dark Theme Support for Commands Modal */
[data-theme="dark"] .custom-tab-button {
color: var(--text-secondary);
}
[data-theme="dark"] .custom-tab-button:hover {
color: var(--text-primary);
background: var(--bg-button-secondary-hover);
}
[data-theme="dark"] .custom-tab-button.active {
color: var(--accent-primary);
background: var(--bg-button-secondary-hover);
}
[data-theme="dark"] .command-item {
background: var(--bg-card);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .command-item:hover {
border-color: var(--border-secondary);
}
[data-theme="dark"] .command-input-group input {
background: var(--bg-input);
border: 1px solid var(--border-input);
color: var(--text-primary);
}
[data-theme="dark"] .command-input-group input:focus {
border-color: var(--border-input-focus);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
[data-theme="dark"] .command-logs {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
}
[data-theme="dark"] .logs-header {
background: var(--bg-button-secondary);
border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .logs-content {
background: var(--bg-input);
}
[data-theme="dark"] .logs-content pre {
color: var(--text-primary);
}
/* Responsive Adjustments for Commands Modal */
@media (max-width: 900px) {
.custom-tabs {
flex-direction: column;
gap: 0.25rem;
padding: 0;
border-bottom: none;
}
.custom-tab-button {
border-radius: 8px;
padding: 0.875rem 1.25rem;
width: 100%;
justify-content: flex-start;
}
.custom-tab-button::after {
display: none;
}
.custom-tab-button.active {
background: var(--bg-button-primary);
color: var(--text-inverse);
}
.custom-tab-button.active .material-icons {
color: var(--text-inverse);
}
.command-item {
padding: 1.25rem;
}
.commands-section h4 {
font-size: 1.1rem;
}
.fullscreen-modal .modal-header {
padding: 1.25rem 1.5rem !important;
}
.fullscreen-modal .modal-header h3 {
font-size: 1.25rem;
}
.fullscreen-modal .modal-body {
padding: 1.5rem !important;
}
.fullscreen-modal .modal-footer {
padding: 1rem 1.5rem !important;
}
}
@media (max-width: 600px) {
.custom-tab-button {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.command-item {
padding: 1rem;
}
.command-title {
font-size: 1rem;
}
.command-description {
font-size: 0.85rem;
}
.commands-section h4 {
font-size: 1rem;
}
.logs-content {
max-height: 250px;
}
}