/* Generated by scripts/build_css_bundle.py. Do not edit by hand. */
.navbar {
background-color: var(--header-bg);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
padding: 0.75rem 1rem;
height: 70px;
width: 100%;
font-size: 1.05rem;
position: relative;
z-index: 1000;
}
.app-navbar.navbar {
background-color: var(--header-bg) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
padding: 0.75rem 1rem !important;
height: 70px !important;
width: 100% !important;
font-size: 1.05rem !important;
z-index: 1002;
position: relative;
}
.app-navbar .navbar-brand {
color: white !important;
font-weight: 600;
letter-spacing: -0.02em;
display: flex;
align-items: center;
}
.app-navbar .navbar-brand img {
max-height: 36px;
filter: brightness(1.2);
}
.app-navbar .navbar-brand span {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.95);
}
.app-navbar .nav-link {
color: var(--nav-link-color) !important;
transition: var(--transition);
padding: 0.5rem 1rem !important;
margin: 0 0.25rem;
position: relative;
font-weight: 500;
border-radius: 4px;
font-size: 1.05rem;
outline: none;
}
.nav-link:focus {
outline: var(--focus-outline);
outline-offset: 2px;
}
.nav-link:hover,
.nav-link:focus {
color: white !important;
background-color: rgba(255, 255, 255, 0.1);
}
.nav-item.active .nav-link,
.nav-item .nav-link.active {
color: white !important;
font-weight: 600;
background-color: rgba(255, 255, 255, 0.15);
}
.navbar-toggler {
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0.4rem 0.6rem;
margin-right: 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
background-color: rgba(255, 255, 255, 0.1);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.nav-item .nav-link.has-indicator::after {
content: '';
position: absolute;
top: 10px;
right: 5px;
width: 8px;
height: 8px;
background-color: var(--danger-color);
border-radius: 50%;
}
.dropdown-menu {
background-color: var(--dropdown-bg);
border: 1px solid var(--dropdown-border);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
padding: 0.6rem 0;
margin: 0.125rem 0 0;
font-size: var(--font-size-base);
border-radius: 8px;
animation: dropdown-fade 0.2s ease-out;
}
.dropdown-item {
color: var(--dropdown-text);
padding: 0.5rem 1.5rem;
font-weight: normal;
border-left: 3px solid transparent;
transition: var(--transition);
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--dropdown-hover-bg);
color: var(--primary-color);
border-left: 3px solid var(--primary-color);
}
.dropdown-divider {
border-top: 1px solid var(--dropdown-border);
margin: 0.5rem 0;
}
.dropdown-toggle::after {
vertical-align: middle;
margin-left: 0.255em;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
display: block;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--btn-text);
border-radius: 6px;
padding: 0.6rem 1.5rem;
font-weight: var(--font-weight-medium);
transition: all 0.25s ease;
letter-spacing: 0.01em;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
font-size: var(--font-size-base);
line-height: 1.5;
}
.btn-primary:hover {
background-color: var(--primary-color);
filter: brightness(110%);
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(var(--primary-color-rgb), 0.25);
}
.btn-secondary {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
color: var(--btn-text);
border-radius: 6px;
padding: 0.6rem 1.5rem;
font-weight: var(--font-weight-medium);
transition: all 0.25s ease;
letter-spacing: 0.01em;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
font-size: var(--font-size-base);
line-height: 1.5;
}
.btn-secondary:hover {
background-color: var(--secondary-color);
filter: brightness(90%);
border-color: var(--secondary-color);
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(var(--secondary-color-rgb), 0.3);
}
.btn-success {
background-color: var(--success-color);
border-color: var(--success-color);
color: var(--btn-text);
border-radius: 4px;
padding: 0.5rem 1.25rem;
font-weight: 500;
transition: var(--transition);
}
.btn-success:hover {
background-color: var(--success-color);
filter: brightness(90%);
border-color: var(--success-color);
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(var(--success-color-rgb), 0.3);
}
.btn-accent {
background-color: var(--accent-1);
border-color: var(--accent-1);
color: var(--btn-text);
border-radius: 4px;
padding: 0.5rem 1.25rem;
font-weight: 500;
transition: var(--transition);
}
.btn-accent:hover {
filter: brightness(90%);
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(101, 84, 192, 0.3);
}
.btn-outline-primary {
color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-outline-primary:hover {
background-color: var(--primary-color);
color: var(--btn-text);
}
.card {
background-color: var(--card-bg);
border: none;
border-radius: 8px;
box-shadow: var(--card-shadow);
transition: var(--transition);
overflow: hidden;
}
.card:hover {
box-shadow: var(--card-shadow-hover);
}
.section-divider {
height: 4px;
width: 60px;
background: var(--section-divider-color);
margin: 1.5rem 0 2.5rem;
border-radius: 2px;
}
.trust-badge {
display: inline-block;
background: var(--badge-bg);
color: var(--badge-color);
border-radius: 16px;
padding: 0.25em 1em;
font-size: 1rem;
font-weight: 600;
margin: 0 0.5em;
box-shadow: 0 1px 4px rgba(78,159,106,0.09);
}
.card-header {
background-color: transparent;
border-bottom: 1px solid var(--border-color);
padding: 1rem 1.25rem;
font-weight: 600;
color: var(--text-color);
}
.card-footer {
background-color: transparent;
border-top: 1px solid var(--border-color);
padding: 1rem 1.25rem;
}
.card-gradient {
background: var(--gradient-primary);
color: white;
}
.card-gradient .card-title,
.card-gradient .card-text {
color: white;
}
.card-gradient-secondary {
background: var(--gradient-secondary);
color: white;
}
.card-gradient-success {
background: var(--gradient-success);
color: white;
}
.card-gradient-warning {
background: var(--gradient-warning);
color: white;
}
.card-gradient-danger {
background: var(--gradient-danger);
color: white;
}
.card-accent {
border-left: 4px solid var(--accent-1);
}
.card-accent-secondary {
border-left: 4px solid var(--accent-2);
}
.card-accent-tertiary {
border-left: 4px solid var(--accent-3);
}
.card-accent-quaternary {
border-left: 4px solid var(--accent-4);
}
.card-accent-quinary {
border-left: 4px solid var(--accent-5);
}
.card-top-accent {
border-top: 3px solid var(--primary-color);
border-radius: 0 0 8px 8px;
}
.card-top-accent-1 {
border-top: 3px solid var(--accent-1);
border-radius: 0 0 8px 8px;
}
.card-top-accent-2 {
border-top: 3px solid var(--accent-2);
border-radius: 0 0 8px 8px;
}
.card-top-accent-3 {
border-top: 3px solid var(--accent-3);
border-radius: 0 0 8px 8px;
}
.card-top-accent-4 {
border-top: 3px solid var(--accent-4);
border-radius: 0 0 8px 8px;
}
.card-top-accent-5 {
border-top: 3px solid var(--accent-5);
border-radius: 0 0 8px 8px;
}
.table {
color: var(--text-color);
}
.table-striped tbody {
font-size: 17px;
font-family: 'Segoe UI', Arial, sans-serif;
background: var(--body-bg);
color: var(--text-color);
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.02);
}
.table thead th {
border-bottom: 2px solid var(--border-color);
color: var(--text-color);
}
.table td, .table th {
border-top: 1px solid var(--border-color);
}
#notifBell {
color: var(--text-color);
}
#notifBell:hover {
color: var(--primary-color);
}
.dark-mode .text-muted {
color: var(--text-muted) !important;
}
.dark-mode .bg-light {
background-color: var(--dropdown-hover-bg) !important;
}
.navbar-toggler {
border-color: var(--border-color);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
body.dark-mode .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.shepherd-theme-custom {
max-width: 400px;
border-radius: 8px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}
.shepherd-theme-custom .shepherd-content {
border-radius: 8px;
}
.shepherd-theme-custom .shepherd-header {
background: var(--primary-color);
padding: 15px 20px;
border-radius: 8px 8px 0 0;
}
.shepherd-theme-custom .shepherd-title {
color: white;
font-size: 1.1rem;
font-weight: 600;
}
.shepherd-theme-custom .shepherd-text {
padding: 20px;
line-height: 1.5;
color: var(--text-color);
}
.shepherd-theme-custom .shepherd-footer {
padding: 10px 20px 15px;
display: flex;
justify-content: flex-end;
}
.shepherd-theme-custom .shepherd-button {
margin-left: 8px;
padding: 8px 15px;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.shepherd-theme-custom .shepherd-button-primary {
background: var(--primary-color);
color: white;
border: none;
}
.shepherd-theme-custom .shepherd-button-primary:hover {
background: var(--secondary-color);
}
.shepherd-theme-custom .shepherd-button-secondary {
background: transparent;
color: var(--text-color);
border: 1px solid #ddd;
}
.shepherd-theme-custom .shepherd-button-secondary:hover {
background: #f8f9fa;
}
.shepherd-theme-custom .shepherd-arrow::before {
background: var(--primary-color);
}
body.dark-mode .shepherd-theme-custom {
background-color: var(--card-bg);
}
body.dark-mode .shepherd-theme-custom .shepherd-text {
color: var(--text-color);
}
body.dark-mode .shepherd-theme-custom .shepherd-button-secondary {
color: var(--text-color);
border-color: var(--border-color);
}
body.dark-mode .shepherd-theme-custom .shepherd-button-secondary:hover {
background: var(--input-bg);
}
html { scroll-behavior: smooth; }
body {
font-size: 17px;
font-family: 'Segoe UI', Arial, sans-serif;
background: var(--body-bg);
color: var(--text-color);
line-height: 1.7;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
color: var(--text-color);
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
h1 {
font-size: 2.25rem;
letter-spacing: -0.025em;
}
h2 {
font-size: 1.8rem;
letter-spacing: -0.0125em;
}
h3 {
font-size: 1.5rem;
letter-spacing: -0.0125em;
}
.section-divider {
height: 4px;
width: 80px;
background: var(--section-divider);
margin: 2rem 0 3rem;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.section-divider::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
100% { left: 100%; }
}
.section-divider.centered {
margin-left: auto;
margin-right: auto;
}
.testimonial {
background: var(--badge-bg);
color: var(--text-color);
border-radius: 14px;
padding: 1.3em 1.2em;
margin: 1em 0;
box-shadow: 0 2px 8px rgba(93,108,192,0.07);
}
.trust-badge {
display: inline-block;
background: var(--badge-bg);
color: var(--trust-green);
border-radius: 30px;
padding: 0.5em 1.2em;
font-size: 0.9rem;
font-weight: 600;
margin: 0.5em 0.5em 1.5em 0.5em;
box-shadow: 0 3px 10px rgba(58, 140, 86, 0.15);
letter-spacing: 0.02em;
text-align: center;
}
.widget-card {
position: relative;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
background: var(--card-bg);
margin-bottom: 2rem;
padding: 1.5rem;
transition: all 0.3s ease;
font-size: 1.05rem;
overflow: hidden;
border: 1px solid rgba(208, 216, 230, 0.1);
}
.widget-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-2px);
}
.widget-card .widget-header {
padding: 1.25rem;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.widget-card .widget-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: 0.5rem;
}
.widget-card .widget-content {
padding: 1.25rem 0;
font-size: 1.05rem;
}
.widget-card .widget-footer {
padding: 0.75rem 1.25rem;
background-color: rgba(var(--primary-color-rgb), 0.03);
border-top: 1px solid var(--border-color);
font-size: 0.9rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
padding: 1.25rem;
border-radius: 10px;
box-shadow: var(--card-shadow);
display: flex;
flex-direction: column;
transition: var(--transition);
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--card-shadow-hover);
}
.stat-card .stat-title {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.stat-card .stat-value {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.75rem;
line-height: 1;
}
.stat-card .stat-change {
font-size: 0.85rem;
display: flex;
align-items: center;
}
.stat-card .stat-change.positive {
color: var(--success-color);
}
.stat-card .stat-change.negative {
color: var(--danger-color);
}
.stat-card .stat-icon {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
opacity: 0.15;
}
.stat-primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
}
.stat-primary .stat-title,
.stat-primary .stat-value,
.stat-primary .stat-change {
color: white;
}
.stat-accent-1 {
background: linear-gradient(135deg, var(--accent-1), rgba(var(--accent-1-rgb), 0.7));
color: white;
}
.stat-accent-1 .stat-title,
.stat-accent-1 .stat-value,
.stat-accent-1 .stat-change {
color: white;
}
.stat-accent-2 {
background: linear-gradient(135deg, var(--accent-2), rgba(var(--accent-2-rgb), 0.8));
color: var(--text-color);
}
.stat-accent-3 {
background: linear-gradient(135deg, var(--accent-3), rgba(var(--accent-3-rgb), 0.8));
color: white;
}
.stat-accent-3 .stat-title,
.stat-accent-3 .stat-value,
.stat-accent-3 .stat-change {
color: white;
}
.stat-accent-4 {
background: linear-gradient(135deg, var(--accent-4), rgba(var(--accent-4-rgb), 0.8));
color: var(--text-color);
}
.stat-accent-5 {
background: linear-gradient(135deg, var(--accent-5), rgba(var(--accent-5-rgb), 0.8));
color: white;
}
.stat-accent-5 .stat-title,
.stat-accent-5 .stat-value,
.stat-accent-5 .stat-change {
color: white;
}
.table-professional {
width: 100%;
margin-bottom: 1rem;
color: var(--text-color);
border-collapse: separate;
border-spacing: 0;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--card-shadow);
}
.table-professional thead th {
background-color: rgba(var(--primary-color-rgb), 0.05);
color: var(--text-color);
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.03em;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--border-color);
}
.table-professional tbody tr {
transition: var(--transition);
}
.table-professional tbody tr:hover {
background-color: rgba(var(--primary-color-rgb), 0.02);
}
.table-professional tbody td {
padding: 0.75rem 1.25rem;
vertical-align: middle;
border-bottom: 1px solid var(--border-color);
}
.table-professional tbody tr:last-child td {
border-bottom: none;
}
.progress-container {
margin-bottom: 1.5rem;
}
.progress-label {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: var(--text-muted);
}
.progress {
height: 8px;
background-color: rgba(var(--primary-color-rgb), 0.1);
border-radius: 4px;
overflow: hidden;
}
.progress-bar {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
}
.progress-primary {
background-color: var(--primary-color);
}
.progress-success {
background-color: var(--success-color);
}
.progress-accent-1 {
background-color: var(--accent-1);
}
.progress-accent-2 {
background-color: var(--accent-2);
}
.progress-accent-3 {
background-color: var(--accent-3);
}
.progress-accent-4 {
background-color: var(--accent-4);
}
.progress-accent-5 {
background-color: var(--accent-5);
}
.badge-professional {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 600;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 50rem;
transition: var(--transition);
}
.badge-subtle-primary {
background-color: rgba(var(--primary-color-rgb), 0.1);
color: var(--primary-color);
}
.badge-subtle-success {
background-color: rgba(var(--success-color-rgb), 0.1);
color: var(--success-color);
}
.badge-subtle-danger {
background-color: rgba(var(--danger-color-rgb), 0.1);
color: var(--danger-color);
}
.badge-subtle-warning {
background-color: rgba(var(--warning-color-rgb), 0.1);
color: var(--warning-color);
}
.badge-subtle-info {
background-color: rgba(var(--accent-1-rgb), 0.1);
color: var(--accent-1);
}
.info-box {
position: relative;
padding: 1.25rem 1.25rem 1.25rem 3.5rem;
border-radius: 8px;
margin-bottom: 1.5rem;
box-shadow: var(--card-shadow);
}
.info-box-icon {
position: absolute;
left: 1.25rem;
top: 1.25rem;
font-size: 1.5rem;
opacity: 0.8;
}
.info-box-title {
font-weight: 600;
margin-bottom: 0.5rem;
}
.info-box-success {
background-color: rgba(var(--success-color-rgb), 0.05);
border-left: 4px solid var(--success-color);
}
.info-box-success .info-box-icon,
.info-box-success .info-box-title {
color: var(--success-color);
}
.info-box-warning {
background-color: rgba(var(--warning-color-rgb), 0.05);
border-left: 4px solid var(--warning-color);
}
.info-box-warning .info-box-icon,
.info-box-warning .info-box-title {
color: var(--warning-color);
}
.info-box-danger {
background-color: rgba(var(--danger-color-rgb), 0.05);
border-left: 4px solid var(--danger-color);
}
.info-box-danger .info-box-icon,
.info-box-danger .info-box-title {
color: var(--danger-color);
}
.info-box-info {
background-color: rgba(var(--accent-1-rgb), 0.05);
border-left: 4px solid var(--accent-1);
}
.info-box-info .info-box-icon,
.info-box-info .info-box-title {
color: var(--accent-1);
}
.home-hero {
position: relative;
text-align: center;
padding: 80px 20px 40px;
color: #fff;
background: linear-gradient(135deg, var(--primary-color), var(--accent-3));
overflow: hidden;
}
.home-hero::before, .home-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.35; }
.home-hero::before { width: 300px; height: 300px; left: -80px; top: -60px; background: radial-gradient(closest-side, rgba(var(--secondary-color-rgb), 0.8), transparent); }
.home-hero::after { width: 260px; height: 260px; right: -60px; bottom: -40px; background: radial-gradient(closest-side, rgba(var(--accent-1-rgb), 0.6), transparent); }
.home-hero h1 {
color: #fff;
font-size: 2.4rem;
}
.home-hero p {
color: rgba(255,255,255,0.95);
max-width: 760px;
margin: 0 auto;
}
.home-cta-btn { display: inline-block; padding: 12px 18px; border-radius: 12px; background: var(--gradient-secondary); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px rgba(0,0,0,0.12); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; border: none; }
.home-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,0.18); }
.features-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.feature-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 18px;
box-shadow: var(--card-shadow);
transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--card-shadow-hover);
}
.feature-card .icon {
font-size: 1.6rem;
margin-bottom: .5rem;
}
.features-section, .how-section { padding: 80px 0; }
.section-alt { background: #ffffff; }
#pricing { scroll-margin-top: 90px; }
.leaderboard-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.leaderboard-filters { display: flex; gap: 8px; }
.filter-btn {
border: 1px solid var(--border-color);
background: var(--card-bg);
color: var(--text-color);
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
}
.filter-btn.active { background: var(--primary-color); color: #fff; }
.leaderboard-list { display: grid; gap: 10px; }
.leaderboard-entry {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 12px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 12px;
}
.leaderboard-entry.top-three { border-color: rgba(var(--primary-color-rgb), 0.35); }
.leaderboard-entry .rank { font-weight: 800; text-align: center; font-size: 1.1rem; }
.leaderboard-entry .trader-info .trader-name { font-weight: 700; }
.leaderboard-entry .trader-info .ea-name { color: var(--text-muted); font-size: .9rem; }
.leaderboard-entry .performance-stats { display: flex; gap: 18px; font-weight: 600; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.testimonial-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 16px;
box-shadow: var(--card-shadow);
}
.testimonial-card .testimonial-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.testimonial-card .user-name { font-weight: 700; }
.testimonial-card .ea-name { color: var(--text-muted); font-size: .9rem; }
.testimonial-card .rating { color: #ffac33; font-size: 1rem; }
.testimonial-card .verified-badge { margin-top: 8px; color: var(--success-color); font-weight: 700; font-size: .9rem; }
.testimonial-card .profit-badge { display: inline-block; background: rgba(255, 215, 0, .15); color: #b8860b; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: .85rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pricing-card { position: relative; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px; box-shadow: var(--card-shadow); text-align: center; }
.pricing-card.featured { border-color: rgba(var(--primary-color-rgb), 0.45); box-shadow: 0 14px 28px rgba(0,0,0,0.12); transform: translateY(-2px); }
.pricing-card .featured-badge { position: absolute; top: 12px; right: 12px; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border: 1px solid var(--primary-color); padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: .8rem; }
.pricing-name { font-weight: 800; font-size: 1.1rem; margin-bottom: 6px; }
.pricing-price { font-size: 2rem; font-weight: 800; margin: 6px 0 10px; }
.pricing-price .per { font-size: .9rem; color: var(--text-muted); margin-left: 4px; font-weight: 600; }
.pricing-desc { color: var(--text-muted); min-height: 40px; }
.pricing-features { list-style: none; padding: 0; margin: 12px 0 16px; text-align: left; }
.pricing-features li { margin: 6px 0; position: relative; padding-left: 18px; }
.pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--success-color); }
.trust-strip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 16px;
align-items: center;
justify-content: center;
padding: 12px 16px;
background: rgba(255,255,255,0.7);
backdrop-filter: blur(6px);
border-top: 1px solid rgba(0,0,0,0.05);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.trust-strip .trust-item {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: var(--badge-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
font-weight: 600;
font-size: 0.95rem;
}
@media (max-width: 768px) {
.trust-strip {
overflow-x: auto;
justify-content: flex-start;
}
}
.feature-card {
background-color: var(--card-bg);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 1.8rem;
transition: all 0.3s ease;
border: 1px solid rgba(208, 216, 230, 0.1);
height: 100%;
display: flex;
flex-direction: column;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.feature-card .icon {
font-size: 2.5rem;
margin-bottom: 1.2rem;
color: var(--primary-color);
}
.feature-card h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-color);
}
.feature-card p {
color: var(--text-muted);
margin-bottom: 1.5rem;
flex-grow: 1;
}
.dashboard-btn {
display: inline-block;
padding: 0.7rem 1.8rem;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
transition: all 0.25s ease;
text-align: center;
letter-spacing: 0.01em;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: none;
cursor: pointer;
margin: 0.5rem 0.25rem;
}
.dashboard-btn.primary {
background-color: var(--primary-color);
color: white;
}
.dashboard-btn.success {
background-color: var(--success-color);
color: white;
}
.dashboard-btn.warning {
background-color: var(--warning-color);
color: #212529;
}
.dashboard-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
filter: brightness(105%);
}
.dashboard-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 2rem;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.dashboard-table th {
background-color: var(--header-bg);
color: white;
font-weight: 600;
padding: 1rem;
text-align: left;
}
.dashboard-table td {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
color: var(--text-color);
background-color: var(--card-bg);
}
.dashboard-table tr:last-child td {
border-bottom: none;
}
.dashboard-table tr:hover td {
background-color: rgba(44, 65, 89, 0.03);
}
.status-badge {
display: inline-block;
padding: 0.35rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
text-align: center;
min-width: 80px;
}
.status-badge.active {
background-color: var(--success-color);
color: white;
}
.status-badge.inactive {
background-color: var(--danger-color);
color: white;
}
.status-badge.pending {
background-color: var(--warning-color);
color: #212529;
}
.status-success-bg {
background-color: rgba(var(--success-color-rgb), 0.1);
}
.status-danger-bg {
background-color: rgba(var(--danger-color-rgb), 0.1);
}
.status-pending-bg {
background-color: rgba(var(--warning-color-rgb), 0.1);
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.form-control {
border-radius: 8px;
padding: 0.75rem 1rem;
border: 1px solid var(--input-border);
background-color: var(--input-bg);
color: var(--text-color);
transition: all 0.2s ease;
box-shadow: var(--input-shadow);
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(44, 65, 89, 0.15);
outline: none;
}
.form-label {
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--text-color);
}
.section-divider {
height: 3px;
background: var(--section-divider);
border-radius: 3px;
margin: 2.5rem auto;
width: 80%;
max-width: 150px;
opacity: 0.8;
position: relative;
overflow: hidden;
}
.section-divider::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
100% { left: 100%; }
}
.section-divider.centered {
margin-left: auto;
margin-right: auto;
}
.trust-badge {
display: inline-block;
background-color: var(--primary-color);
color: white;
padding: 0.5rem 1.2rem;
border-radius: 30px;
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 1.5rem;
box-shadow: 0 3px 10px rgba(44, 65, 89, 0.2);
letter-spacing: 0.02em;
}
.home-hero {
background: linear-gradient(120deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: #fff;
padding: 60px 0 40px 0;
text-align: center;
border-radius: 0 0 40px 40px;
box-shadow: 0 8px 32px rgba(44, 65, 89, 0.15);
position: relative;
overflow: hidden;
}
.home-hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 80%);
animation: rotate 30s linear infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
.home-hero h1 {
font-size: 2.8em;
font-weight: 700;
margin-bottom: 0.4em;
letter-spacing: -1px;
position: relative;
z-index: 1;
}
.home-hero p {
font-size: 1.25em;
opacity: 0.93;
margin-bottom: 1.7em;
position: relative;
z-index: 1;
}
.home-cta-btn {
background: #fff;
color: var(--primary-color);
font-weight: 600;
border-radius: 30px;
padding: 0.8em 2.2em;
font-size: 1.15em;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
border: none;
transition: all 0.3s ease;
position: relative;
z-index: 1;
display: inline-block;
margin-top: 1em;
}
.home-cta-btn:hover {
background: var(--secondary-color);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.features-section {
padding: 60px 0;
background-color: var(--body-bg);
}
.features-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
margin: 40px 0;
}
.testimonials-list {
display: flex;
flex-wrap: wrap;
gap: 32px;
justify-content: center;
margin: 40px 0;
}
.testimonial {
background-color: var(--card-bg);
border-radius: 16px;
padding: 24px;
flex: 1 1 250px;
max-width: 320px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
border: 1px solid rgba(208, 216, 230, 0.1);
transition: all 0.3s ease;
}
.testimonial:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.testimonial .icon {
font-size: 1.5em;
color: var(--primary-color);
margin-bottom: 0.8em;
}
.testimonial .text {
font-size: 1.08em;
margin-bottom: 1.2em;
color: var(--text-color);
flex-grow: 1;
}
.testimonial .author {
font-weight: 600;
color: var(--primary-color);
align-self: flex-end;
}
.how-section {
background-color: var(--card-bg);
padding: 60px 0;
text-align: center;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
}
.how-steps {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin: 40px 0;
}
.how-step {
background-color: var(--body-bg);
border-radius: 16px;
padding: 24px;
min-width: 180px;
max-width: 220px;
flex: 1 1 180px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid rgba(208, 216, 230, 0.1);
}
.how-step:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.how-step .icon {
font-size: 2em;
color: var(--primary-color);
margin-bottom: 0.8em;
}
.section-heading {
font-size: 2rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.75rem;
text-align: center;
}
.section-heading:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--primary-color);
border-radius: 3px;
}
@media (max-width: 900px) {
.features-list,
.how-steps,
.testimonials-list {
flex-direction: column;
align-items: center;
}
.home-hero h1 {
font-size: 2.2em;
}
.home-hero p {
font-size: 1.1em;
}
}
body {
background: #050505 !important;
}
.ss-section {
background: transparent !important;
}
:root {
--bg: #0b0d14;
--surface: #111827;
--surface-contrast: #161e2f;
--surface2: #0f172a;
--border: rgba(255,255,255,.08);
--border-subtle: rgba(255,255,255,.06);
--text: #f1f5f9;
--text-primary: #f1f5f9;
--text-secondary: #9ca3b5;
--muted: #8c95a9;
--accent: #f0b90b;
--accent-2: #f6c94c;
--primary: var(--accent);
--primary2: #f59e0b;
--blue: #38bdf8;
--success: #22c55e;
--warning: #f59e0b;
--shadow: 0 22px 70px rgba(0,0,0,.42);
--shadow-soft: 0 20px 50px rgba(0,0,0,.22);
--easing-standard: cubic-bezier(0.4, 0.1, 0.2, 1);
--transition-fast: 140ms var(--easing-standard);
--transition-med: 220ms var(--easing-standard);
--radius-card: 14px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-section-desktop: 88px;
--space-section-mobile: 44px;
}
body.dark-mode {
--bg: #05060b;
--surface: #0c111b;
--surface-contrast: #121a2a;
--border: rgba(255,255,255,.12);
--border-subtle: rgba(255,255,255,.08);
--text: #f5f7fb;
--text-primary: #f5f7fb;
--text-secondary: #a7b0c2;
--shadow-soft: 0 24px 70px rgba(0,0,0,.40);
}
html, body {
background: var(--bg);
color: var(--text);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
.chips-2026 {
max-width: 1180px;
margin: 14px auto 0 auto;
padding: 0 18px;
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.chip-2026 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 18px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.10);
background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
color: rgba(229,231,235,.82);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter: blur(10px);
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
font-size: 12px;
transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.chip-2026::before {
content:"";
position:absolute;
inset:-10px;
border-radius: 16px;
background: radial-gradient(60% 60% at 50% 50%, rgba(240,185,11,.14), rgba(240,185,11,0) 70%);
opacity: 0;
filter: blur(10px);
transition: opacity .18s ease;
z-index: -1;
}
.chip-2026:hover {
transform: translateY(-2px);
color: rgba(229,231,235,.95);
border-color: rgba(240,185,11,.55);
background: linear-gradient(145deg, rgba(240,185,11,.10), rgba(255,255,255,.02));
box-shadow: 0 10px 30px rgba(0,0,0,.30);
}
.chip-2026:hover::before {
opacity: 1;
}
.chip-2026.active {
color: rgba(229,231,235,.98);
border-color: rgba(240,185,11,.85);
background: linear-gradient(145deg, rgba(240,185,11,.16), rgba(255,255,255,.03));
box-shadow: 0 0 22px rgba(240,185,11,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.chip-2026.active::before {
opacity: 1;
}
.navbar-2026 {
position: sticky !important;
top: 0;
z-index: 3000 !important;
width: 100%;
padding-top: 0.45rem;
padding-bottom: 0.45rem;
min-height: 56px;
background: rgba(11, 15, 26, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
}
#userMenu.btn-2026 {
padding: 10px 12px;
border-radius: 12px;
font-weight: 700;
font-size: 12px;
}
.btn-2026 {
display:inline-flex;
align-items:center;
justify-content:center;
gap: 10px;
padding: 12px 16px;
border-radius: 14px;
font-weight: 750;
border: 1px solid var(--border);
transition: transform .08s ease, background .15s ease;
}
.btn-2026:active { transform: translateY(1px); }
.btn-primary-2026 {
background: linear-gradient(135deg, var(--primary), var(--primary2));
color: #0B0F1A;
border: 0;
box-shadow: var(--shadow);
}
.btn-ghost-2026 {
background: rgba(255,255,255,.06);
color: var(--text);
}
.btn-ghost-2026:hover {
background: rgba(255,255,255,.10);
}
.btn-glow-2026 {
position: relative;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: rgba(229,231,235,.88);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.btn-glow-2026::before {
content:"";
position:absolute;
inset:-10px;
border-radius: 16px;
background: radial-gradient(60% 60% at 50% 50%,
rgba(240,185,11,.18),
rgba(240,185,11,0) 70%);
opacity: 0;
filter: blur(12px);
transition: opacity .18s ease;
z-index: -1;
}
.btn-glow-2026:hover {
background: rgba(240,185,11,.06);
border-color: rgba(240,185,11,.35);
color: rgba(229,231,235,.98);
}
.btn-glow-2026:hover::before {
opacity: 1;
}
.badge-2026 {
display:inline-flex;
align-items:center;
gap:10px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,.05);
font-weight: 650;
color: var(--text);
}
@keyframes signalPulse{
0%   { transform: scale(0.85); opacity: .55; box-shadow: 0 0 0 0 rgba(240,185,11,.0); }
35%  { transform: scale(1.25); opacity: 1;   box-shadow: 0 0 0 8px rgba(240,185,11,.14); }
60%  { transform: scale(0.95); opacity: .85; box-shadow: 0 0 0 14px rgba(240,185,11,.05); }
100% { transform: scale(0.85); opacity: .55; box-shadow: 0 0 0 0 rgba(240,185,11,.0); }
}
.kpi-grid-2026 {
max-width: 1180px;
margin: 22px auto 0 auto;
padding: 0 18px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 1100px){
.kpi-grid-2026 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
.kpi-grid-2026 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kpi-top-2026 {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
color: rgba(229,231,235,.85);
font-weight: 700;
font-size: 13px;
}
.kpi-value-2026 {
position: relative;
z-index: 1;
margin-top: 10px;
font-size: 30px;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--text);
}
.kpi-sub-2026 {
position: relative;
z-index: 1;
margin-top: 6px;
color: rgba(148,163,184,.95);
font-size: 12px;
}
.navbar-2026 { z-index: 3000; }
.navbar-2026 .dropdown-menu {
z-index: 3010 !important;
}
:root {
--glass-bg: rgba(12, 21, 44, 0.82);
--glass-border: rgba(255,255,255,.08);
--glass-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.navbar-2026 .dropdown-menu {
background: var(--glass-bg) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid var(--glass-border) !important;
box-shadow: var(--glass-shadow) !important;
border-radius: 16px !important;
overflow: hidden !important;
min-width: 240px !important;
padding: 10px !important;
}
.navbar-2026 .dropdown-menu .dropdown-item {
color: rgba(229,231,235,.90) !important;
border-radius: 12px !important;
padding: 10px 12px !important;
font-size: 14px !important;
}
.navbar-2026 .dropdown-menu .dropdown-item:hover {
background: rgba(255,255,255,.06) !important;
}
.navbar-2026 .dropdown-menu {
z-index: 1500 !important;
}
.features-section.section-alt .accordion-item {
background: rgba(15,23,42,.55) !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
margin-bottom: 12px;
}
.features-section.section-alt .accordion-button {
background: rgba(15,23,42,.40) !important;
color: rgba(229,231,235,.92) !important;
font-weight: 800 !important;
letter-spacing: -0.01em;
border: 0 !important;
box-shadow: none !important;
padding: 16px 18px !important;
}
.features-section.section-alt .accordion-button:hover {
background: rgba(240,185,11,.06) !important;
color: rgba(229,231,235,.98) !important;
}
.features-section.section-alt .accordion-button:focus {
box-shadow: 0 0 0 3px rgba(240,185,11,.18) !important;
outline: none !important;
}
.features-section.section-alt .accordion-button:not(.collapsed) {
background: rgba(15,23,42,.55) !important;
color: rgba(229,231,235,.98) !important;
}
.features-section.section-alt .accordion-body {
background: rgba(15,23,42,.35) !important;
color: rgba(148,163,184,.95) !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
padding: 14px 18px 18px !important;
}
.features-section.section-alt .accordion-button::after {
filter: invert(1) opacity(.85);
}
.how-section {
background: transparent;
}
.how-section .home-cta-btn {
display: inline-flex !important;
align-items: center;
gap: 10px;
border-radius: 14px !important;
padding: 12px 18px !important;
font-weight: 850 !important;
background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
color: #0B0F1A !important;
border: 0 !important;
box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
transition: transform .12s ease, box-shadow .15s ease, filter .15s ease !important;
}
.how-section .home-cta-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 18px 44px rgba(0,0,0,.45) !important;
}
.how-section .home-cta-btn.secondary {
background: rgba(15,23,42,.55) !important;
color: rgba(229,231,235,.92) !important;
border: 1px solid rgba(255,255,255,.10) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.how-section .home-cta-btn.secondary:hover {
border-color: rgba(240,185,11,.35) !important;
background: rgba(240,185,11,.06) !important;
color: rgba(229,231,235,.98) !important;
}
.glass-card-2026 {
position: relative;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(15,23,42,.55);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
overflow: hidden;
}
.glass-card-2026::before {
content:"";
position:absolute;
inset:-50px;
background:
radial-gradient(40% 40% at 20% 20%, rgba(59,130,246,.18), transparent 60%),
radial-gradient(40% 40% at 70% 30%, rgba(240,185,11,.14), transparent 60%);
opacity: .95;
filter: blur(18px);
z-index: 0;
}
.glass-card-2026 > * {
position: relative;
z-index: 1;
}
.glass-card-2026 {
transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.glass-card-2026:hover {
transform: translateY(-3px);
border-color: rgba(240,185,11,.25);
background: rgba(15,23,42,.62);
box-shadow:
0 18px 45px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-card-2026 p {
color: rgba(148,163,184,.95);
}
.how-step.glass-card-2026 {
padding: 18px 18px;
text-align: center;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.how-step.glass-card-2026 img {
width: 34px;
height: 34px;
margin: 0 auto;
opacity: .95;
}
.how-step.glass-card-2026 h4 {
margin: 0;
font-weight: 600;
}
.premium-badge-bots {
display:inline-block;
padding:8px 18px;
border-radius:999px;
font-size:13px;
letter-spacing:.3px;
border:1px solid rgba(240,185,11,.35);
background:linear-gradient(135deg, rgba(240,185,11,.15), rgba(59,130,246,.12));
box-shadow:0 0 18px rgba(240,185,11,.18);
}
.bots-empty-state {
max-width:650px;
margin:2.5em auto;
padding:35px 28px;
text-align:center;
}
.bots-empty-state .empty-icon {
font-size:40px;
margin-bottom:10px;
opacity:.85;
}
.bots-empty-state h4 {
margin-bottom:6px;
}
.bot-plan {
opacity:.95;
}
.ea-plan-pill {
border:1px solid rgba(255,255,255,.14);
background: rgba(15,23,42,.35);
padding: 7px 12px;
border-radius: 999px;
font-size: .85em;
opacity: .95;
}
@media (max-width: 576px){
.ss-auth .display-5 {
font-size: 2rem;
}
.ss-auth .ss-panel__head {
padding: 14px 14px;
}
.ss-auth .ss-panel__body {
padding: 16px;
}
}
.faq-glass .accordion-button {
background: transparent !important;
color: rgba(226,232,240,.95) !important;
border: none;
box-shadow: none !important;
}
.faq-glass .accordion-button.collapsed {
color: rgba(226,232,240,.92) !important;
}
.faq-glass .accordion-body {
color: rgba(148,163,184,.95);
}
.faq-glass .accordion-collapse {
border-top: 1px solid rgba(255,255,255,.08);
}
.faq-glass .list-group-item {
background: transparent !important;
color: rgba(226,232,240,.92);
}
@keyframes pulse{
0% { box-shadow: 0 0 0 0 rgba(240,185,11, 0.22); }
70% { box-shadow: 0 0 0 10px rgba(240,185,11, 0); }
100% { box-shadow: 0 0 0 0 rgba(240,185,11, 0); }
}
.home-faq .accordion-item.glass-card-2026 {
padding: 0;
overflow: hidden;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(15,23,42,.55);
}
.home-faq .accordion-button {
background: transparent !important;
color: rgba(226,232,240,.95) !important;
border: none !important;
box-shadow: none !important;
padding: 18px 18px;
font-weight: 600;
}
.home-faq .accordion-button.collapsed {
color: rgba(226,232,240,.92) !important;
}
.home-faq .accordion-body {
color: rgba(148,163,184,.95);
padding: 16px 18px 18px 18px;
}
.home-faq .accordion-collapse {
border-top: 1px solid rgba(255,255,255,.08);
}
.home-faq .accordion-item + .accordion-item {
margin-top: 14px;
}
.home-faq .accordion-button::after {
opacity: .9;
filter: brightness(1.6);
}
@keyframes heroPulse{
0% { box-shadow: 0 0 0 0 rgba(240,185,11,.45); }
70% { box-shadow: 0 0 0 25px rgba(240,185,11,0); }
100% { box-shadow: 0 0 0 0 rgba(240,185,11,0); }
}
@keyframes heroPulse{
0% { box-shadow: 0 0 0 0 rgba(240,185,11,.45); }
70% { box-shadow: 0 0 0 25px rgba(240,185,11,0); }
100% { box-shadow: 0 0 0 0 rgba(240,185,11,0); }
}
@keyframes botWiggle{
0%   { transform: rotate(0deg); }
20%  { transform: rotate(-10deg); }
40%  { transform: rotate(8deg); }
60%  { transform: rotate(-6deg); }
80%  { transform: rotate(4deg); }
100% { transform: rotate(0deg); }
}
.plan-note {
display:flex;
gap:10px;
align-items:flex-start;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.18);
color: rgba(255,255,255,.82);
}
.plan-note i { margin-top: 2px; opacity: .95; }
.note-success { border-color: rgba(0,255,180,.18); }
.note-info {    border-color: rgba(120,160,255,.18); }
.chip {
display:inline-flex;
align-items:center;
gap:8px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.85);
}
.support-2026 .premium-card {
border-radius: 18px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(10, 16, 28, .72);
backdrop-filter: blur(14px);
}
.support-2026 .premium-card-header {
border-bottom: 1px solid rgba(255,255,255,.08);
background: linear-gradient(135deg, rgba(12, 22, 45, .9), rgba(12, 18, 30, .5));
padding: 16px 18px;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.support-2026 .badge {
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(8px);
}
.support-2026 .premium-chip {
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.support-2026 .premium-chip:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0,0,0,.25);
border-color: rgba(255,215,90,.22);
}
.support-2026 .category-card.border-primary {
border-color: rgba(255,215,90,.55) !important;
box-shadow: 0 0 0 3px rgba(255,215,90,.10);
}
.support-2026 .form-control,
.support-2026 .form-select {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.92);
border-radius: 14px;
}
.support-2026 .form-control:focus,
.support-2026 .form-select:focus {
box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
border-color: rgba(255, 200, 0, 0.35);
}
.support-2026 .input-group-text {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.85);
border-radius: 14px;
}
.support-2026 .alert {
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.03) !important;
color: rgba(255,255,255,.90) !important;
}
.support-2026 .accordion-item {
background: transparent;
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px;
overflow: hidden;
margin-bottom: 12px;
}
.support-2026 .accordion-button {
background: rgba(255,255,255,.03);
color: rgba(255,255,255,.92);
border: none;
}
.support-2026 .accordion-button:not(.collapsed) {
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.95);
box-shadow: none;
}
.support-2026 .accordion-body {
background: rgba(255,255,255,.02);
color: rgba(255,255,255,.86);
}
.support-2026 .modal-content {
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(10, 16, 28, .92);
backdrop-filter: blur(14px);
color: rgba(255,255,255,.92);
}
.support-2026 .modal-header {
border-bottom: 1px solid rgba(255,255,255,.10);
}
.support-2026 .modal-footer {
border-top: 1px solid rgba(255,255,255,.10);
}
.support-2026 .btn {
border-radius: 14px;
padding: .65rem 1.15rem;
font-weight: 600;
}
.support-2026 .btn-primary {
background: linear-gradient(135deg, rgba(255,215,90,.95), rgba(255,185,60,.92));
border: 1px solid rgba(255,215,90,.45);
color: #0b1220;
box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.support-2026 .btn-primary:hover {
transform: translateY(-1px);
}
.support-2026 .btn-outline-secondary,
.support-2026 .btn-outline-danger,
.support-2026 .btn-outline-primary {
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.92);
}
.ss-upload { width: 100%; }
.ss-upload__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ss-upload__label {
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 14px;
border-radius:16px;
background: rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.10);
box-shadow: 0 12px 35px rgba(0,0,0,0.25);
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ss-upload__label:hover {
transform: translateY(-1px);
border-color: rgba(255,200,60,0.35);
background: rgba(255,255,255,0.055);
}
.ss-upload__icon {
width:40px;
height:40px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(255,200,60,0.10);
border:1px solid rgba(255,200,60,0.25);
color:#ffd27a;
flex: 0 0 auto;
}
.ss-upload__text {
color: rgba(255,255,255,0.92);
line-height: 1.2;
flex: 1 1 auto;
}
.ss-upload__text small {
color: rgba(255,255,255,0.55);
margin-top:4px;
}
.ss-upload__cta {
padding:10px 14px;
border-radius:14px;
font-weight:600;
background: rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.9);
flex: 0 0 auto;
}
.ss-upload__list {
margin-top:10px;
color: rgba(255,255,255,0.70);
font-size: 0.92rem;
}
.ss-upload__chip {
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:999px;
margin:6px 8px 0 0;
background: rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.10);
}
.ss-upload__chip i {
color: rgba(255,200,60,0.85);
}
.ss-btn-premium {
border-radius: 16px !important;
padding: 14px 18px !important;
box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}
.ss-btn-premium__icon {
display:inline-flex;
align-items:center;
justify-content:center;
width: 34px;
height: 34px;
border-radius: 12px;
margin-right: 10px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.14);
}
.ss-btn-premium__text {
font-weight: 700;
letter-spacing: .2px;
}
.ss-panel {
border-radius: 22px;
overflow: hidden;
}
.ss-panel__head {
padding: 18px 22px;
border-bottom: 1px solid rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.ss-panel__body {
padding: 22px;
}
.ss-glass-callout {
border-radius: 18px;
padding: 18px 20px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(10, 18, 35, .55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.ss-glass-callout--success {
border-color: rgba(0, 255, 170, .18);
box-shadow: 0 18px 55px rgba(0, 255, 170, .08), 0 14px 40px rgba(0,0,0,.28);
}
.ss-glass-callout .badge {
border: 1px solid rgba(255,255,255,.14);
background: rgba(0, 255, 170, .12) !important;
color: rgba(230,255,248,.95);
}
.ss-glass-callout a {
text-decoration: none;
}
.ss-share {
display: flex;
flex-direction: column;
gap: 12px;
}
.ss-muted {
color: rgba(255,255,255,.72) !important;
}
.ss-share__ok {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(34,197,94,.12);
border: 1px solid rgba(34,197,94,.25);
color: rgba(255,255,255,.92);
width: fit-content;
}
.ss-mini-card {
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.10);
border-radius: 18px;
box-shadow: 0 18px 45px rgba(0,0,0,.25);
}
.ss-mini-card__body {
padding: 16px;
color: rgba(255,255,255,.85);
}
.ss-mini-card .text-muted {
color: rgba(255,255,255,.65) !important;
}
.ss-action-card {
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ss-action-card__title {
margin: 6px 0 0;
font-size: 1.1rem;
font-weight: 700;
color: rgba(255,255,255,.95);
}
.ss-action-card__desc {
margin: 0;
color: rgba(148,163,184,.92);
line-height: 1.45;
}
.ss-action-card__btn {
margin-top: auto;
width: 100%;
justify-content: center;
}
.ss-onboard {
border-radius: 22px;
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 26px 80px rgba(0,0,0,.55);
}
.ss-onboard__head {
background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(240,185,11,.12));
border-bottom: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.95);
}
#onboarding-modal .list-group-item {
background: transparent !important;
color: rgba(255,255,255,.88);
}
#onboarding-modal .text-muted {
color: rgba(148,163,184,.85) !important;
}
.ss-panel .ss-panel__body {
padding: 18px 18px 16px;
}
.ss-panel .ss-panel__head {
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.02);
}
.ss-kpi {
padding: 14px 14px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
text-align: left;
}
.ss-kpi__label {
font-size: .85rem;
color: rgba(148,163,184,.92);
margin-bottom: 6px;
}
.ss-kpi__value {
font-size: 1.55rem;
font-weight: 850;
line-height: 1.1;
color: rgba(255,255,255,.95);
}
.ss-chart {
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.18);
padding: 14px;
height: 320px;
}
.ss-chart canvas {
width: 100% !important;
height: 100% !important;
}
.ss-dd__menu {
background: rgba(15,23,42,.92) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
border-radius: 14px !important;
padding: 8px !important;
}
.ss-dd__item {
border-radius: 10px !important;
color: rgba(226,232,240,.92) !important;
}
.ss-dd__item:hover {
background: rgba(255,255,255,.06) !important;
}
.ss-dd__item.active {
background: rgba(59,130,246,.18) !important;
color: rgba(255,255,255,.95) !important;
}
.ss-input-group {
display: flex;
gap: 10px;
align-items: stretch;
}
.ss-input {
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(0,0,0,.20) !important;
color: rgba(255,255,255,.92) !important;
}
.ss-input:focus {
box-shadow: 0 0 0 4px rgba(59,130,246,.18) !important;
border-color: rgba(59,130,246,.35) !important;
}
.ss-input__btn {
border-radius: 14px !important;
white-space: nowrap;
}
.ss-share-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
@media (min-width: 992px){
.ss-share-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.ss-share {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 12px;
border-radius: 14px;
}
.ss-stat {
display: flex;
gap: 14px;
align-items: center;
padding: 14px 14px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ss-stat__icon {
width: 48px;
height: 48px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(59,130,246,.18);
border: 1px solid rgba(59,130,246,.22);
color: rgba(255,255,255,.92);
}
.ss-stat__label {
font-size: .85rem;
color: rgba(148,163,184,.92);
}
.ss-stat__value {
font-size: 1.6rem;
font-weight: 850;
line-height: 1.1;
color: rgba(255,255,255,.95);
}
.ss-table {
border-collapse: separate;
border-spacing: 0 10px;
margin: 0;
}
.ss-table thead th {
color: rgba(148,163,184,.92);
font-weight: 700;
border: none !important;
}
.ss-table tbody tr {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.10);
}
.ss-table tbody td {
border: none !important;
padding: 12px 14px;
color: rgba(226,232,240,.92);
}
.ss-table tbody tr td:first-child {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
}
.ss-table tbody tr td:last-child {
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
}
.ss-badge {
border: 1px solid rgba(255,255,255,.12);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ss-xp {
display: flex;
flex-direction: column;
gap: 18px;
}
.ss-xp__top {
display: flex;
gap: 16px;
align-items: stretch;
}
.ss-xp__level {
min-width: 120px;
padding: 14px 14px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
text-align: center;
}
.ss-xp__label {
font-size: .8rem;
color: rgba(148,163,184,.9);
}
.ss-xp__value {
font-size: 2rem;
font-weight: 900;
color: rgba(255,255,255,.95);
line-height: 1.0;
margin-top: 6px;
}
.ss-xp__meta {
flex: 1;
padding: 14px 14px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.18);
}
.ss-xp__line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: rgba(226,232,240,.92);
font-size: .95rem;
margin-bottom: 10px;
}
.ss-xp__streak {
color: rgba(251,191,36,.95);
font-weight: 700;
white-space: nowrap;
}
.ss-xp__bar {
height: 12px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ss-xp__barFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(251,191,36,.95));
box-shadow: 0 10px 30px rgba(59,130,246,.18);
}
.ss-xp__badges {
padding-top: 4px;
}
.ss-xp__title {
font-size: 1.05rem;
font-weight: 800;
margin: 0 0 10px 0;
color: rgba(255,255,255,.92);
}
.ss-badgeGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
}
@media (min-width: 992px){
.ss-badgeGrid {
grid-template-columns: repeat(3, minmax(0,1fr));
}
}
.ss-badge {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 12px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ss-badge__icon {
width: 42px;
height: 42px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(59,130,246,.16);
border: 1px solid rgba(59,130,246,.22);
color: rgba(255,255,255,.92);
flex-shrink: 0;
}
.ss-badge__name {
font-weight: 850;
color: rgba(255,255,255,.92);
line-height: 1.1;
}
.ss-badge__desc {
margin-top: 4px;
font-size: .85rem;
color: rgba(148,163,184,.92);
}
.ss-muted {
color: rgba(148,163,184,.92);
}
.ss-share {
display: flex;
flex-direction: column;
gap: 12px;
}
.ss-share .ss-btn-premium {
width: fit-content;
margin-top: 6px;
}
.ss-share__ok {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(34,197,94,.25);
background: rgba(34,197,94,.12);
color: rgba(226,232,240,.95);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ss-xp__barFill {
width: var(--xp, 0%);
transition: width .6s ease;
}
.persona-toggle {
display:inline-flex;
gap:10px;
padding:6px;
border-radius:999px;
background:rgba(255,255,255,0.04);
backdrop-filter: blur(10px);
border:1px solid rgba(255,255,255,0.06);
box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.persona-toggle button {
border:none;
border-radius:999px;
padding:8px 18px;
font-weight:600;
font-size:0.95rem;
color:rgba(255,255,255,0.75);
background:transparent;
transition:all .25s ease;
position:relative;
}
.persona-toggle button:hover {
color:white;
background:rgba(245,158,11,0.08);
}
.persona-toggle button.active {
color:#fff;
background:linear-gradient(
135deg,
rgba(245,158,11,0.55),
rgba(234,88,12,0.55)
);
box-shadow:
0 4px 14px rgba(245,158,11,0.35),
inset 0 0 0 1px rgba(255,255,255,0.25);
}
.persona-toggle button.active::after {
content:"";
position:absolute;
inset:0;
border-radius:999px;
background:linear-gradient(
120deg,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
mix-blend-mode:overlay;
pointer-events:none;
}
.input-group-text {
background: rgba(30,41,59,.65) !important;
border: 1px solid rgba(71,85,105,.45) !important;
color: rgba(229,231,235,.88) !important;
}
.ss-toast-stack {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1400;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.ss-toast {
pointer-events: auto;
width: min(300px, calc(100vw - 36px));
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(99,102,241,.28);
background: linear-gradient(180deg, rgba(11,18,34,.98), rgba(8,12,24,.98));
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 14px 34px rgba(2,6,23,.55);
color: rgba(255,255,255,.92);
}
.ss-toast__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.ss-toast__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: .85rem;
margin: 0;
}
.ss-toast__close {
background: transparent;
border: 0;
color: rgba(255,255,255,.75);
width: 28px;
height: 28px;
border-radius: 8px;
}
.ss-toast__close:hover {
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.95);
}
.ss-toast__body {
padding: 8px 10px 10px;
color: rgba(229,231,235,.88);
font-size: .85rem;
}
.ss-toast--success { border-color: rgba(34,197,94,.35); }
.ss-toast--success .ss-toast__title i { color: rgb(34,197,94); }
.ss-toast--danger { border-color: rgba(239,68,68,.35); }
.ss-toast--danger .ss-toast__title i { color: rgb(239,68,68); }
.ss-toast--info { border-color: rgba(59,130,246,.35); }
.ss-toast--info .ss-toast__title i { color: rgb(96,165,250); }
.ss-action__btn {
opacity: 1 !important;
filter: none !important;
color: #0b0f17 !important;
font-weight: 800;
letter-spacing: .2px;
}
.ss-action__btn:hover,
.ss-action__btn:focus {
opacity: 1 !important;
color: #0b0f17 !important;
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.ss-action__btn i {
opacity: 1 !important;
}
.ss-analytics .ss-title {
font-weight: 900;
letter-spacing: .2px;
color: rgba(255,255,255,.92);
}
.ss-analytics .ss-subtitle {
color: rgba(255,255,255,.65);
font-size: .95rem;
}
.ss-panel {
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(15,23,42,.62);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 18px 45px rgba(0,0,0,.35);
overflow: hidden;
}
.ss-panel__head {
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.ss-panel__title {
font-weight: 800;
color: rgba(255,255,255,.92);
}
.ss-panel__body {
padding: 14px 16px 16px;
}
.ss-stat-card {
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(15,23,42,.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 14px 38px rgba(0,0,0,.28);
padding: 16px;
height: 100%;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ss-stat-card:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,.18);
box-shadow: 0 18px 55px rgba(0,0,0,.38);
}
.ss-stat-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.ss-stat-card__label {
color: rgba(255,255,255,.65);
font-weight: 700;
font-size: .9rem;
}
.ss-stat-card__value {
font-size: 30px;
font-weight: 900;
letter-spacing: .2px;
color: rgba(255,255,255,.92);
}
.ss-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.78);
background: rgba(255,255,255,.06);
font-size: .82rem;
font-weight: 800;
white-space: nowrap;
}
.ss-pill--success { border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.10); }
.ss-pill--info { border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.10); }
.ss-pill--neutral { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.profit-positive { color: rgb(34,197,94) !important; }
.profit-negative { color: rgb(239,68,68) !important; }
.ss-table {
color: rgba(255,255,255,.86);
}
.ss-table thead th {
color: rgba(255,255,255,.70);
font-weight: 800;
border-bottom: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.04) !important;
}
.ss-table tbody td {
border-top: 1px solid rgba(255,255,255,.08) !important;
}
.ss-table tbody tr:hover {
background: rgba(255,255,255,.04);
}
.table-striped > tbody > tr:nth-of-type(odd) {
--bs-table-accent-bg: rgba(255,255,255,.03);
}
.ss-panel canvas {
border-radius: 14px;
background: rgba(0,0,0,.10);
border: 1px solid rgba(255,255,255,.08);
}
.ss-chart-wrap {
position: relative;
height: 260px;
}
.ss-chart-wrap canvas {
width: 100% !important;
height: 100% !important;
}
.ss-chart-wrap canvas {
opacity: 0;
transform: translateY(6px);
transition: opacity .35s ease, transform .35s ease;
}
.ss-chart-wrap canvas.ss-chart--ready {
opacity: 1;
transform: translateY(0);
}
.ss-panel__head--kpi {
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
}
.ss-kpis {
display:flex;
align-items:center;
gap: 8px;
flex-wrap: wrap;
justify-content:flex-end;
}
.ss-kpi {
display:inline-flex;
align-items:center;
gap: 8px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.80);
font-size: .82rem;
font-weight: 800;
white-space: nowrap;
}
.ss-kpi__label {
color: rgba(255,255,255,.62);
font-weight: 800;
}
.ss-kpi--good { border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.10); }
.ss-kpi--bad { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.10); }
.ss-kpi--info { border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.10); }
.ss-kpi--neutral { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.ss-kpi--gold { border-color: rgba(234,179,8,.25); background: rgba(234,179,8,.10); }
.ss-range {
display: inline-flex;
padding: 4px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ss-range__btn {
border: 0;
background: transparent;
color: rgba(255,255,255,.72);
font-weight: 900;
font-size: .85rem;
padding: 8px 12px;
border-radius: 999px;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.ss-range__btn:hover {
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.90);
transform: translateY(-1px);
}
.ss-range__btn.is-active {
background: rgba(96,165,250,.18);
border: 1px solid rgba(96,165,250,.25);
color: rgba(255,255,255,.92);
}
.ss-empty-state {
display:flex;
justify-content:center;
align-items:center;
padding: 60px 20px;
}
.ss-empty-state__card {
max-width: 520px;
text-align:center;
border-radius: 22px;
padding: 32px 28px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(15,23,42,.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 25px 70px rgba(0,0,0,.45);
}
.ss-empty-state__icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
border-radius: 50%;
display:flex;
align-items:center;
justify-content:center;
font-size: 28px;
color: rgba(255,255,255,.85);
background: radial-gradient(
circle at 30% 30%,
rgba(96,165,250,.35),
rgba(96,165,250,.08) 60%
);
border: 1px solid rgba(96,165,250,.35);
}
.ss-empty-state__title {
font-weight: 900;
color: rgba(255,255,255,.92);
margin-bottom: 8px;
}
.ss-empty-state__text {
color: rgba(255,255,255,.68);
font-size: .95rem;
margin-bottom: 22px;
}
.ss-empty-state__actions {
display:flex;
justify-content:center;
gap: 12px;
flex-wrap: wrap;
}
.ss-trades .ss-label {
color: rgba(255,255,255,.65);
font-weight: 800;
font-size: .85rem;
margin-bottom: 6px;
}
.ss-select {
border-radius: 14px;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.88) !important;
box-shadow: none !important;
padding: 10px 12px;
}
.ss-select:focus {
outline: none !important;
border-color: rgba(96,165,250,.35) !important;
box-shadow: 0 0 0 .2rem rgba(96,165,250,.12) !important;
}
.ss-select option {
color: #0b0f17;
}
.ss-filter-btn {
border-radius: 14px;
font-weight: 900;
}
.ss-tag {
display: inline-flex;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.80);
font-size: .82rem;
font-weight: 800;
}
.ss-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: .92rem;
}
.ss-empty-inline {
padding: 42px 18px;
text-align: center;
border-radius: 18px;
border: 1px dashed rgba(255,255,255,.18);
background: rgba(255,255,255,.04);
}
.ss-empty-inline__icon {
width: 64px;
height: 64px;
margin: 0 auto 12px;
border-radius: 50%;
display:flex;
align-items:center;
justify-content:center;
background: rgba(96,165,250,.12);
border: 1px solid rgba(96,165,250,.22);
color: rgba(255,255,255,.88);
font-size: 22px;
}
.ss-empty-inline__title {
font-weight: 900;
color: rgba(255,255,255,.92);
margin-bottom: 6px;
}
.ss-empty-inline__text {
color: rgba(255,255,255,.65);
font-size: .95rem;
}
.profit-positive { color: rgb(34,197,94) !important; }
.profit-negative { color: rgb(239,68,68) !important; }
.ss-hero {
padding: 64px 0 26px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
}
.ss-hero--learning {
background:
radial-gradient(900px 520px at 20% 30%, rgba(96,165,250,.35), transparent 60%),
radial-gradient(700px 420px at 85% 30%, rgba(34,197,94,.18), transparent 60%),
linear-gradient(180deg, rgba(2,6,23,.90), rgba(2,6,23,.75));
border-bottom: 1px solid rgba(255,255,255,.08);
}
.ss-hero__kicker {
display:flex;
align-items:center;
gap: 10px;
margin-bottom: 12px;
}
.ss-hero__kicker-text {
color: rgba(255,255,255,.65);
font-weight: 800;
}
.ss-hero__title {
font-size: clamp(2.2rem, 4vw, 3.4rem);
font-weight: 950;
color: rgba(255,255,255,.95);
letter-spacing: .2px;
margin-bottom: 10px;
}
.ss-hero__lead {
color: rgba(255,255,255,.74);
font-size: 1.05rem;
max-width: 54ch;
margin-bottom: 18px;
}
.ss-hero__art {
border-radius: 22px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 18px;
box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.ss-resource-card {
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(15,23,42,.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 14px 38px rgba(0,0,0,.28);
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ss-resource-card:hover {
transform: translateY(-3px);
border-color: rgba(255,255,255,.18);
box-shadow: 0 22px 62px rgba(0,0,0,.40);
}
.ss-resource-card__body { padding: 16px; }
.ss-resource-card__title {
color: rgba(255,255,255,.92);
font-weight: 900;
margin: 6px 0 8px;
}
.ss-resource-card__text {
color: rgba(255,255,255,.65);
margin: 0;
}
.ss-corner-badge {
position:absolute;
top: 12px;
right: 12px;
padding: 6px 10px;
border-radius: 999px;
font-size: .78rem;
font-weight: 900;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.88);
}
.ss-corner-badge--premium {
border-color: rgba(234,179,8,.28);
background: rgba(234,179,8,.12);
}
.ss-resource-icon {
width: 54px;
height: 54px;
border-radius: 50%;
display:flex;
align-items:center;
justify-content:center;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.9);
flex: 0 0 auto;
}
.ss-resource-icon i { font-size: 18px; }
.ss-resource-icon--primary { border-color: rgba(96,165,250,.25); background: rgba(96,165,250,.12); }
.ss-resource-icon--success { border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.12); }
.ss-resource-icon--gold { border-color: rgba(234,179,8,.25); background: rgba(234,179,8,.12); }
.ss-resource-icon--danger { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.12); }
.ss-resource-icon--info { border-color: rgba(56,189,248,.25); background: rgba(56,189,248,.12); }
.ss-progress-mini {
min-width: 84px;
text-align: right;
}
.ss-progress-mini__bar {
height: 8px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.18);
overflow: hidden;
}
.ss-progress-mini__fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: rgba(34,197,94,.75);
transition: width .6s ease;
}
.ss-progress-mini__text {
margin-top: 6px;
color: rgba(255,255,255,.68);
font-size: .78rem;
font-weight: 900;
}
.ss-category-card {
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(15,23,42,.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 14px 38px rgba(0,0,0,.28);
padding: 18px;
text-align:center;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ss-category-card:hover {
transform: translateY(-3px);
border-color: rgba(255,255,255,.18);
box-shadow: 0 22px 62px rgba(0,0,0,.40);
}
.ss-category-card__icon {
width: 74px;
height: 74px;
margin: 0 auto 12px;
border-radius: 50%;
display:flex;
align-items:center;
justify-content:center;
border: 1px solid rgba(96,165,250,.25);
background: rgba(96,165,250,.12);
color: rgba(255,255,255,.92);
font-size: 26px;
}
.ss-category-card__title {
color: rgba(255,255,255,.92);
font-weight: 950;
margin-bottom: 8px;
}
.ss-category-card__text {
color: rgba(255,255,255,.65);
margin-bottom: 14px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgba(2,6,23,.85);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(96,165,250,.35), rgba(168,85,247,.25));
border: 1px solid rgba(255,255,255,.10);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(96,165,250,.50), rgba(168,85,247,.34));
}
* {
scrollbar-color: rgba(96,165,250,.40) rgba(2,6,23,.85);
scrollbar-width: thin;
}
.ss-filter-tabs {
display: inline-flex;
gap: 8px;
padding: 6px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.ss-filter-tab {
appearance: none;
border: 0;
cursor: pointer;
padding: 10px 14px;
border-radius: 999px;
background: transparent;
color: rgba(255,255,255,.78);
font-weight: 600;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.ss-filter-tab:hover {
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.92);
}
.ss-filter-tab.active {
background: rgba(96,165,250,.18);
border: 1px solid rgba(96,165,250,.22);
color: rgba(255,255,255,.95);
box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.ss-notes {
display: grid;
gap: 12px;
}
.ss-note {
display: grid;
grid-template-columns: 54px 1fr;
gap: 14px;
padding: 14px;
border-radius: 18px;
background: rgba(15,23,42,.48);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 16px 44px rgba(0,0,0,.34);
}
.ss-note.is-unread {
border-color: rgba(96,165,250,.28);
box-shadow: 0 18px 52px rgba(0,0,0,.42);
}
.ss-note.is-read {
opacity: .88;
}
.ss-note__icon {
width: 54px;
height: 54px;
border-radius: 16px;
display: grid;
place-items: center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.88);
}
.ss-note.is-unread .ss-note__icon {
background: rgba(96,165,250,.16);
border-color: rgba(96,165,250,.22);
}
.ss-note__title {
font-weight: 800;
color: rgba(255,255,255,.94);
margin-bottom: 2px;
}
.ss-note.is-read .ss-note__title {
font-weight: 700;
color: rgba(255,255,255,.86);
}
.ss-note__meta {
font-size: .85rem;
color: rgba(255,255,255,.58);
margin-bottom: 10px;
}
.ss-note__msg {
color: rgba(255,255,255,.76);
line-height: 1.55;
}
.ss-empty {
padding: 36px 18px;
border-radius: 22px;
background: rgba(15,23,42,.40);
border: 1px dashed rgba(255,255,255,.18);
text-align: center;
}
.ss-empty__icon {
width: 72px;
height: 72px;
border-radius: 22px;
margin: 0 auto 12px;
display: grid;
place-items: center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.80);
font-size: 28px;
}
.ss-empty__title {
font-weight: 900;
color: rgba(255,255,255,.92);
font-size: 1.2rem;
}
.ss-hr {
border-color: rgba(255,255,255,.12) !important;
opacity: 1 !important;
}
.ss-modal-glass .form-check-label {
color: rgba(255,255,255,.80);
}
.ss-modal-glass .form-check-input {
background-color: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.18);
}
.ss-modal-glass .form-check-input:checked {
background-color: rgba(96,165,250,.55);
border-color: rgba(96,165,250,.55);
}
.ss-inputgroup .input-group-text {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.75);
}
.ss-inputgroup .form-control,
.ss-inputgroup .form-select {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.92);
}
.ss-inputgroup .form-control::placeholder {
color: rgba(255,255,255,0.45);
}
.ss-inputgroup .form-control:focus,
.ss-inputgroup .form-select:focus {
box-shadow: 0 0 0 .25rem rgba(255, 200, 0, 0.12);
border-color: rgba(255, 200, 0, 0.35);
}
.ss-inputgroup .input-group-text {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.85);
}
.ss-panel {
position: relative;
border-radius: 22px;
overflow: hidden;
background: rgba(14, 20, 36, 0.55);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
0 18px 60px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.08);
}
.ss-panel::before {
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
radial-gradient(900px 260px at 18% 20%, rgba(59,130,246,0.16), transparent 60%),
radial-gradient(900px 260px at 80% 30%, rgba(245,158,11,0.12), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
opacity: 1;
}
.ss-panel__head {
position: relative;
padding: 18px 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
}
.ss-panel__body {
position: relative;
padding: 20px;
}
.ss-panel__title {
font-weight: 800;
letter-spacing: .2px;
}
.ss-inputgroup .input-group-text {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.85);
}
.ss-panel .form-control,
.ss-panel .form-select,
.ss-panel textarea {
background: rgba(8, 12, 22, 0.45);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.92);
}
.ss-panel .form-control::placeholder,
.ss-panel textarea::placeholder {
color: rgba(255,255,255,0.45);
}
.ss-panel .form-control:focus,
.ss-panel .form-select:focus,
.ss-panel textarea:focus {
outline: none;
border-color: rgba(245,158,11,0.55);
box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
}
.ss-icon-chip {
width: 46px;
height: 46px;
border-radius: 14px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.92);
box-shadow:
0 10px 30px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.08);
}
html, body {
scrollbar-color: rgba(255,255,255,0.20) rgba(255,255,255,0.06);
scrollbar-width: thin;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background: rgba(255,255,255,0.06);
}
body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(245,158,11,0.55), rgba(59,130,246,0.55));
border-radius: 12px;
border: 2px solid rgba(0,0,0,0.25);
}
body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(245,158,11,0.75), rgba(59,130,246,0.75));
}
.ss-analytics .ss-panel {
background: rgba(14, 20, 36, 0.55) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
box-shadow:
0 18px 60px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.ss-analytics .ss-panel::before { content:"" !important; }
.ss-analytics .ss-panel__head {
background: rgba(255,255,255,0.03) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.ss-stat-card {
border-radius: 22px;
background: rgba(14, 20, 36, 0.55);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 18px 60px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.08);
padding: 18px 20px;
}
.ss-analytics .ss-stat-card,
.ss-analytics .ss-empty-state__card {
position: relative;
border-radius: 22px;
overflow: hidden;
background: rgba(14, 20, 36, 0.55) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
0 18px 60px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.08);
}
.ss-analytics .ss-stat-card::before,
.ss-analytics .ss-empty-state__card::before {
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
radial-gradient(900px 260px at 18% 20%, rgba(59,130,246,0.16), transparent 60%),
radial-gradient(900px 260px at 80% 30%, rgba(245,158,11,0.12), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
}
.ss-analytics .ss-stat-card > *,
.ss-analytics .ss-empty-state__card > * {
position: relative;
z-index: 1;
}
.ss-analytics .ss-stat-card { padding: 18px 18px; }
.ss-analytics .ss-empty-state__card { padding: 28px 22px; }
.ss-hero-icon {
width: 140px;
height: 140px;
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(14,20,36,.55);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 18px 60px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.08);
color: rgba(255,255,255,.92);
font-size: 42px;
}
@media (max-width: 768px) {
body {
font-size: 15px;
line-height: 1.55;
}
.navbar {
height: 56px;
padding: 0 12px;
}
.navbar .btn,
.navbar button {
padding: 8px 12px;
font-size: 14px;
}
h1 {
font-size: clamp(22px, 6vw, 30px);
line-height: 1.2;
}
.hero p {
font-size: 15px;
line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
overflow: hidden;
}
.card,
.pricing-card {
padding: 16px;
margin-bottom: 16px;
}
.card p {
font-size: 14px;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
overflow: hidden;
}
h2 {
font-size: clamp(18px, 5vw, 24px);
}
h3 {
font-size: 17px;
}
footer {
padding: 20px 16px;
}
}
@media (max-width: 420px) {
body {
font-size: 14.5px;
}
section {
padding: 28px 12px;
}
h1 {
font-size: clamp(20px, 6.2vw, 28px);
}
h2 {
font-size: clamp(17px, 5.4vw, 22px);
}
.card,
.pricing-card {
padding: 14px;
margin-bottom: 12px;
}
}
@media (max-width: 768px) {
.card-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.card-text.is-expanded {
-webkit-line-clamp: unset;
line-clamp: unset;
max-height: none;
}
}
.featured-ea-card {
padding: 1.75rem 2rem;
}
.featured-ea-title {
font-weight: 800;
letter-spacing: -0.3px;
}
.featured-ea-desc {
color: var(--text-muted-2026);
max-width: 560px;
}
.featured-ea-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 0.85rem;
color: #9aa3b2;
margin-top: 0.25rem;
}
.featured-ea-plans {
margin-top: 0.6rem;
font-size: 0.8rem;
color: #8f98a7;
}
.plan-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
margin-left: 6px;
background: rgba(255, 215, 120, 0.12);
border: 1px solid rgba(255, 215, 120, 0.35);
color: #ffd978;
font-weight: 600;
}
.featured-ea-actions {
white-space: nowrap;
}
.navbar {
padding-top: .45rem !important;
padding-bottom: .45rem !important;
min-height: unset;
}
.navbar .nav-link {
padding-top: .45rem !important;
padding-bottom: .45rem !important;
line-height: 1.2;
}
.navbar .btn,
.navbar .ss-pill {
padding-top: .35rem;
padding-bottom: .35rem;
}
.navbar .dropdown-menu {
margin-top: .4rem;
}
.navbar-2026 {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 3000 !important;
width: 100%;
padding-top: 0.45rem;
padding-bottom: 0.45rem;
min-height: 72px;
background: rgba(11, 15, 26, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.navbar-2026 .dropdown-menu {
margin-top: 0.45rem;
}
@media (min-width: 992px) {
.navbar-2026 {
position: fixed !important;
top: 0;
left: 0;
right: 0;
padding-top: 0.45rem;
padding-bottom: 0.45rem;
min-height: 72px;
}
}
.glass-dropdown {
max-height: 420px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
html,
body {
background-color: #050505 !important;
background-image: none !important;
}
:root {
--bs-body-bg: #050505 !important;
}
body.dark-mode {
background-color: #050505 !important;
background-image: none !important;
}
h1 {font-size:32px; line-height:1.25; font-weight:800; letter-spacing:-0.01em;}
h2 {font-size:24px; line-height:1.3; font-weight:700;}
h3 {font-size:20px; line-height:1.35; font-weight:700;}
body {font-size:16px; line-height:1.6; color:var(--text-primary);}
.text-muted {font-size:14px; color:var(--text-secondary);}
.section-alt {padding: var(--space-section-desktop) 0;}
@media (max-width: 768px){
.section-alt {padding: var(--space-section-mobile) 0;}
}
.navbar-2026 {height:64px; padding:0 var(--space-5); background:var(--surface); border-bottom:1px solid var(--border-subtle); box-shadow:0 14px 40px rgba(0,0,0,.28);}
.ss-panel-neo,
.ss-action-card,
.glass-card-2026 {
border-radius: var(--radius-card);
border: 1px solid var(--border-subtle);
background: var(--surface);
box-shadow: var(--shadow-soft);
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.ss-panel-neo.featured {
box-shadow: 0 24px 70px rgba(0,0,0,.35);
position: relative;
}
.ss-panel-neo.featured::before {
content:"";
position:absolute;
inset:0;
top:-1px;
height:5px;
border-radius: var(--radius-card) var(--radius-card) 0 0;
background: linear-gradient(90deg, rgba(240,185,11,.9), rgba(59,130,246,.65));
}
.ss-panel-neo:hover,
.ss-action-card:hover,
.glass-card-2026:hover {transform: translateY(-3px); box-shadow: 0 24px 60px rgba(0,0,0,.32); border-color: rgba(255,255,255,.10);}
.kpi-grid-2026 {display:grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0,1fr));}
@media (max-width: 1100px){
.kpi-grid-2026 {grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 720px){
.kpi-grid-2026 {grid-template-columns: repeat(1, minmax(0,1fr));}
}
.table, table {border-collapse: collapse; width:100%; color:var(--text-primary);}
.table th, .table td, table th, table td {padding:14px 16px; border-bottom:1px solid var(--border-subtle);}
.table thead th, table thead th {position: sticky; top:0; background: var(--surface-contrast); z-index:2;}
.table tbody tr:nth-child(odd), table tbody tr:nth-child(odd) {background: rgba(255,255,255,.02);}
.table tbody tr:hover, table tbody tr:hover {background: rgba(255,255,255,.04);}
.ss-panel-neo, .ss-action-card {transition: transform var(--transition-fast), box-shadow var(--transition-fast);}
.ss-dashboard .row {row-gap: var(--space-4);}
.table-responsive {overflow-x:auto;}
@keyframes shine {100% {transform: translateX(100%);}}
html, body {background: radial-gradient(circle at 20% 20%, rgba(124,58,237,.12), transparent 32%), radial-gradient(circle at 80% 0%, rgba(56,189,248,.14), transparent 38%), #0b0d14; color: var(--text-primary);}
.section-alt {background: transparent; padding: var(--space-section-desktop) 0;}
@media (max-width:768px){
.section-alt {padding: var(--space-section-mobile) 0;}
}
body {font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:16px; line-height:1.6; color:var(--text-primary);}
h1 {font-size:32px; line-height:1.25; font-weight:800; letter-spacing:-0.01em;}
h2 {font-size:24px; line-height:1.3; font-weight:700;}
h3 {font-size:20px; line-height:1.35; font-weight:700;}
.text-muted {font-size:14px; color:var(--text-secondary);}
.navbar-2026 {height:64px; padding:0 var(--space-5); background: rgba(15,19,32,.9); border-bottom:1px solid var(--border-subtle); backdrop-filter: blur(18px); box-shadow:0 14px 40px rgba(0,0,0,.28); z-index:1202;}
.ss-panel-neo,.ss-action-card,.glass-card-2026 {border-radius: var(--radius-card); border:1px solid var(--border-subtle); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), rgba(15,19,32,.82); box-shadow: var(--shadow-soft); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);}
.ss-panel-neo:hover,.ss-action-card:hover,.glass-card-2026:hover {transform: translateY(-3px); box-shadow: 0 24px 60px rgba(0,0,0,.32); border-color: rgba(255,255,255,.10);}
.ss-panel-neo.featured {box-shadow: 0 26px 72px rgba(0,0,0,.38); position:relative;}
.ss-panel-neo.featured::before {content:""; position:absolute; inset:0; height:5px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: var(--radius-card) var(--radius-card) 0 0;}
@media (max-width:720px){
.ss-action-card {background: transparent; border:1px solid rgba(255,255,255,.06); box-shadow:none;}
.ss-action-card::before {display:none;}
}
.kpi-grid-2026 {display:grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0,1fr));}
@media (max-width: 1100px){
.kpi-grid-2026 {grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 720px){
.kpi-grid-2026 {grid-template-columns: repeat(1, minmax(0,1fr));}
}
.table, table {border-collapse: collapse; width:100%; color:var(--text-primary); font-size:14px;}
.table th, .table td, table th, table td {padding:14px 16px; border-bottom:1px solid var(--border-subtle);}
.table thead th, table thead th {position: sticky; top:0; background: var(--surface-contrast); z-index:2; text-transform: none; letter-spacing:0;}
.table tbody tr:nth-child(odd), table tbody tr:nth-child(odd) {background: rgba(255,255,255,.02);}
.table tbody tr:hover, table tbody tr:hover {background: rgba(255,255,255,.04);}
.ss-panel-neo, .ss-action-card {transition: transform var(--transition-fast), box-shadow var(--transition-fast);}
@keyframes shine {100% {transform: translateX(100%);}}
.ss-action-card {
position: relative;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(15,23,42,.55);
padding: 20px;
box-shadow: 0 16px 40px rgba(0,0,0,.35);
overflow: hidden;
transition: all .3s ease;
display: flex;
flex-direction: column;
gap: 12px;
}
.ss-action-card::before {
content: "";
position: absolute;
inset: -40px;
background: radial-gradient(45% 45% at 20% 20%, rgba(46,97,197,.18), transparent 62%);
filter: blur(18px);
opacity: .8;
z-index: 0;
}
.ss-action-card > * {
position: relative;
z-index: 1;
}
.ss-action-card:hover {
transform: translateY(-4px);
border-color: rgba(46,97,197,.30);
box-shadow: 0 20px 50px rgba(46,97,197,.15), 0 16px 40px rgba(0,0,0,.45);
}
.ss-action-card-icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(46,97,197,.20);
border: 1px solid rgba(46,97,197,.30);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.95);
font-size: 1.4rem;
margin-bottom: 8px;
}
.ss-action-card-title {
font-weight: 800;
font-size: 1.15rem;
color: rgba(255,255,255,.95);
margin: 0 0 6px 0;
letter-spacing: -.01em;
}
.ss-action-card-desc {
color: rgba(148,163,184,.90);
font-size: .95rem;
line-height: 1.5;
margin: 0 0 12px 0;
}
.ss-action-card-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
font-weight: 700;
font-size: .95rem;
text-decoration: none;
background: linear-gradient(135deg, #2e61c5, #1e4a99);
color: #fff;
border: none;
transition: all .2s ease;
margin-top: auto;
width: fit-content;
}
.ss-action-card-cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(46,97,197,.30);
color: #fff;
}
.ss-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: .85rem;
font-weight: 700;
letter-spacing: .01em;
}
.ss-status-badge.pending {
background: rgba(234,179,8,.15);
border: 1px solid rgba(234,179,8,.30);
color: rgba(250,204,21,.95);
}
.ss-status-badge.approved {
background: rgba(34,197,94,.15);
border: 1px solid rgba(34,197,94,.30);
color: rgba(74,222,128,.95);
}
.ss-status-badge.active {
background: rgba(59,130,246,.15);
border: 1px solid rgba(59,130,246,.30);
color: rgba(96,165,250,.95);
}
.ss-status-badge.rejected {
background: rgba(239,68,68,.15);
border: 1px solid rgba(239,68,68,.30);
color: rgba(248,113,113,.95);
}
.ss-status-badge.expired {
background: rgba(107,114,128,.15);
border: 1px solid rgba(107,114,128,.30);
color: rgba(156,163,175,.95);
}
.table-enhanced {
color: rgba(229,231,235,.90);
border-collapse: separate;
border-spacing: 0;
}
.table-enhanced thead {
background: rgba(30,41,59,.65);
border-bottom: 2px solid rgba(46,97,197,.25);
}
.table-enhanced thead th {
color: rgba(148,163,184,.95);
font-weight: 800;
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .05em;
padding: 14px 16px;
border: none;
}
.table-enhanced tbody tr {
border-bottom: 1px solid rgba(255,255,255,.06);
transition: background-color .2s ease;
}
.table-enhanced tbody tr:hover {
background: rgba(46,97,197,.08);
}
.table-enhanced tbody td {
padding: 12px 16px;
border: none;
vertical-align: middle;
}
.ss-empty-state {
text-align: center;
padding: 60px 20px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(15,23,42,.45);
margin: 40px 0;
}
.ss-empty-state-icon {
font-size: 3.5rem;
color: rgba(148,163,184,.45);
margin-bottom: 20px;
}
.ss-empty-state-title {
font-weight: 800;
font-size: 1.4rem;
color: rgba(255,255,255,.90);
margin-bottom: 10px;
}
.ss-empty-state-desc {
color: rgba(148,163,184,.85);
font-size: 1rem;
margin-bottom: 24px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.ss-empty-state-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 12px;
font-weight: 700;
background: linear-gradient(135deg, #2e61c5, #1e4a99);
color: #fff;
text-decoration: none;
transition: all .2s ease;
}
.ss-empty-state-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(46,97,197,.30);
color: #fff;
}
.ss-callout {
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
padding: 16px 20px;
margin: 20px 0;
display: flex;
align-items: flex-start;
gap: 14px;
backdrop-filter: blur(10px);
}
.ss-callout-icon {
flex-shrink: 0;
font-size: 1.4rem;
margin-top: 2px;
}
.ss-callout-content {
flex-grow: 1;
}
.ss-callout-title {
font-weight: 800;
font-size: 1.05rem;
margin: 0 0 6px 0;
letter-spacing: -.01em;
}
.ss-callout-desc {
font-size: .95rem;
margin: 0;
opacity: .90;
}
.ss-callout.info {
background: rgba(59,130,246,.12);
border-color: rgba(59,130,246,.30);
color: rgba(191,219,254,.95);
}
.ss-callout.info .ss-callout-icon {
color: rgba(96,165,250,1);
}
.ss-callout.success {
background: rgba(34,197,94,.12);
border-color: rgba(34,197,94,.30);
color: rgba(187,247,208,.95);
}
.ss-callout.success .ss-callout-icon {
color: rgba(74,222,128,1);
}
.ss-callout.warning {
background: rgba(234,179,8,.12);
border-color: rgba(234,179,8,.30);
color: rgba(254,240,138,.95);
}
.ss-callout.warning .ss-callout-icon {
color: rgba(250,204,21,1);
}
.ss-callout.danger {
background: rgba(239,68,68,.12);
border-color: rgba(239,68,68,.30);
color: rgba(254,202,202,.95);
}
.ss-callout.danger .ss-callout-icon {
color: rgba(248,113,113,1);
}
.ss-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin: 24px 0;
}
.ss-stat-card-enhanced {
position: relative;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(15,23,42,.55);
padding: 20px;
box-shadow: 0 16px 40px rgba(0,0,0,.35);
overflow: hidden;
transition: all .3s ease;
}
.ss-stat-card-enhanced::before {
content: "";
position: absolute;
inset: -40px;
background: radial-gradient(45% 45% at 20% 20%, rgba(46,97,197,.18), transparent 62%);
filter: blur(18px);
opacity: .8;
z-index: 0;
}
.ss-stat-card-enhanced > * {
position: relative;
z-index: 1;
}
.ss-stat-card-enhanced:hover {
transform: translateY(-4px);
border-color: rgba(46,97,197,.30);
box-shadow: 0 20px 50px rgba(46,97,197,.15), 0 16px 40px rgba(0,0,0,.45);
}
.ss-stat-label {
color: rgba(148,163,184,.90);
font-weight: 700;
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 8px;
}
.ss-stat-value {
font-size: 2.2rem;
font-weight: 900;
color: rgba(255,255,255,.95);
letter-spacing: -.02em;
line-height: 1;
margin-bottom: 8px;
}
.ss-stat-change {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .85rem;
font-weight: 700;
}
.ss-stat-change.positive {
color: rgba(74,222,128,1);
}
.ss-stat-change.negative {
color: rgba(248,113,113,1);
}
.ss-progress {
height: 8px;
border-radius: 999px;
background: rgba(30,41,59,.75);
overflow: hidden;
position: relative;
}
.ss-progress-bar {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #2e61c5, #60a5fa);
transition: width .6s ease;
position: relative;
overflow: hidden;
}
.ss-progress-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.pagination {
gap: 8px;
}
.page-link {
background: rgba(30,41,59,.65) !important;
border: 1px solid rgba(71,85,105,.45) !important;
color: rgba(229,231,235,.90) !important;
border-radius: 10px !important;
padding: 8px 14px !important;
font-weight: 700;
transition: all .2s ease !important;
}
.page-link:hover {
background: rgba(46,97,197,.20) !important;
border-color: rgba(46,97,197,.45) !important;
color: rgba(255,255,255,.95) !important;
transform: translateY(-1px);
}
.page-item.active .page-link {
background: linear-gradient(135deg, #2e61c5, #1e4a99) !important;
border-color: rgba(46,97,197,.60) !important;
color: #fff !important;
}
.page-item.disabled .page-link {
opacity: .4;
cursor: not-allowed;
}
@media (max-width: 768px) {
.ss-stats-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.ss-stat-value {
font-size: 1.8rem;
}
.ss-action-card {
padding: 16px;
}
.ss-callout {
padding: 14px 16px;
}
}
.ss-panel-neo {
background: #161a1e;
border: 1px solid #232a32;
border-radius: 14px;
padding: 1.8rem;
box-shadow: 0 8px 28px rgba(0,0,0,0.6);
transition: all 0.25s ease;
}
.ss-trade-surface {
background: #12161c;
border: 1px solid #1f252c;
border-radius: 12px;
padding: 1.2rem;
}
.ss-trade-surface table {
color: #e6edf3;
}
.ss-trade-surface thead {
background: #1e2329;
}
.ss-trade-surface tbody tr {
border-top: 1px solid #232a32;
}
.ss-trade-surface tbody tr:hover {
background: #1a1f26;
}
.ss-form-block {
background: #15181d;
border: 1px solid #232a32;
border-radius: 16px;
padding: 2rem;
}
.ss-form-block .form-control {
background: #0f1318;
border: 1px solid #232a32;
color: #e6edf3;
}
.ss-form-block .form-control:focus {
border-color: #7c3aed;
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}
.ss-selected {
border: 1px solid #7c3aed !important;
box-shadow:
0 0 0 1px rgba(124, 58, 237, 0.6),
0 0 12px rgba(124, 58, 237, 0.4);
}
.ss-panel-neo:hover,
.ss-trade-surface:hover,
.ss-form-block:hover {
border-color: #7c3aed;
box-shadow:
0 0 0 1px rgba(124, 58, 237, 0.5),
0 0 16px rgba(124, 58, 237, 0.35);
}
body::before,
body::after {
display: none !important;
}
[class*="glow"],
[class*="gradient-bg"],
[class*="radial"] {
background: none !important;
}
#onboarding-modal .modal-content {
background-color: var(--card-bg);
color: var(--text-color);
box-shadow: 0 4px 24px var(--shadow-color);
}
.dashboard-btn {
padding: 0.7em 2em;
border-radius: 6px;
text-decoration: none;
display: inline-block;
transition: all 0.2s ease;
color: var(--btn-text);
}
.dashboard-btn.primary {
background-color: var(--primary-color);
}
.dashboard-btn.success {
background-color: var(--success-color);
}
.dashboard-btn.warning {
background-color: var(--warning-color);
color: #212529;
}
.dashboard-btn:hover {
filter: brightness(90%);
}
.ss-dashboard .status-badge,
.dashboard-legacy .status-badge {
padding: 0.3em 1em;
border-radius: 20px;
display: inline-block;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ss-dashboard .status-badge.active,
.dashboard-legacy .status-badge.active {
background-color: var(--success-color);
color: var(--btn-text);
}
.ss-dashboard .status-badge.inactive,
.dashboard-legacy .status-badge.inactive {
background-color: var(--danger-color);
color: var(--btn-text);
}
.ss-dashboard .status-badge.expiring,
.dashboard-legacy .status-badge.expiring {
background-color: var(--warning-color);
color: #212529;
}
.dashboard-table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1.5em;
}
.dashboard-table th,
.dashboard-table td {
padding: 8px 12px;
border: 1px solid var(--border-color);
}
.dashboard-table th {
background-color: var(--input-bg);
color: var(--text-color);
font-weight: 600;
}
.dashboard-table tr:nth-child(even) {
background-color: var(--card-bg);
}
.dashboard-table tr:nth-child(odd) {
background-color: var(--body-bg);
}
.dashboard-alert {
padding: 1.2em;
border-radius: 7px;
margin: 1.5em 0;
}
.dashboard-alert.warning {
background-color: var(--warning-color);
color: #212529;
border: 1px solid rgba(0,0,0,0.1);
}
.dashboard-alert.danger {
background-color: var(--danger-color);
color: var(--btn-text);
border: 1px solid rgba(0,0,0,0.1);
}
.dashboard-alert.info {
background-color: var(--info-color);
color: var(--btn-text);
border: 1px solid rgba(0,0,0,0.1);
}
.chart-container {
background-color: var(--card-bg);
border-radius: 8px;
padding: 15px;
margin: 1em 0;
border: 1px solid var(--border-color);
}
.dashboard-select,
.dashboard-input {
background-color: var(--input-bg);
color: var(--text-color);
border: 1px solid var(--input-border);
padding: 0.4em 0.8em;
border-radius: 4px;
}
.dashboard-select option {
background-color: var(--dropdown-bg);
color: var(--dropdown-text);
}
.request-btn,
.revoke-btn {
border: none;
padding: 0.4em 1em;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.request-btn {
background-color: var(--primary-color);
color: var(--btn-text);
}
.revoke-btn {
background-color: var(--danger-color);
color: var(--btn-text);
}
.request-btn:hover,
.revoke-btn:hover {
filter: brightness(90%);
}
.referral-input {
width: 90%;
font-size: 1em;
padding: 0.5em;
background-color: var(--input-bg);
color: var(--text-color);
border: 1px solid var(--input-border);
border-radius: 4px;
}
.reward-history table {
margin: 0 auto;
min-width: 320px;
border-collapse: collapse;
}
.reward-history th,
.reward-history td {
padding: 8px 12px;
border: 1px solid var(--border-color);
}
.reward-history th {
background-color: var(--input-bg);
}
.chart-container {
background: linear-gradient(135deg, rgba(var(--accent-2-rgb), 0.1), rgba(var(--accent-1-rgb), 0.05));
padding: 20px;
border-radius: 10px;
box-shadow: var(--card-shadow);
margin-bottom: 2rem;
border: 1px solid var(--border-color);
}
.chart-title {
color: var(--text-color);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;
}
.chart-legend {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 1rem;
}
.legend-item {
display: flex;
align-items: center;
font-size: 0.9rem;
color: var(--text-muted);
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 5px;
}
.line-chart-container {
background: linear-gradient(135deg, rgba(var(--accent-2-rgb), 0.1), rgba(var(--accent-1-rgb), 0.05));
}
.bar-chart-container {
background: linear-gradient(135deg, rgba(var(--accent-3-rgb), 0.08), rgba(var(--accent-1-rgb), 0.03));
}
.pie-chart-container {
background: linear-gradient(135deg, rgba(var(--accent-4-rgb), 0.08), rgba(var(--accent-5-rgb), 0.03));
}
.dashboard-section {
margin: 2em 0 2em 0;
}
.ss-dashboard form,
.dashboard-legacy form {
margin-bottom: 1.5em;
}
.ss-dashboard form button,
.dashboard-legacy form button {
margin-left: 1em;
}
.ss-dashboard form.inline,
.dashboard-legacy form.inline {
display: inline;
}
span[id^="lic-"] {
font-family: monospace;
background-color: var(--input-bg);
padding: 0.2em 0.5em;
border-radius: 3px;
border: 1px solid var(--border-color);
}
.ss-dashboard .badge,
.dashboard-legacy .badge {
display: inline-block;
margin-left: 0.5em;
padding: 0.2em 0.6em;
border-radius: 3px;
font-size: 0.95em;
}
.badge-active {
background-color: var(--success-color);
color: var(--btn-text);
}
.badge-inactive, .badge-revoked {
background-color: var(--danger-color);
color: var(--btn-text);
}
.badge-expired {
background-color: var(--warning-color);
color: #212529;
}
.ss-dashboard .paid-status,
.dashboard-legacy .paid-status {
background-color: var(--success-color);
color: var(--btn-text);
padding: 0.2em 0.8em;
border-radius: 3px;
}
.ss-dashboard .unpaid-status,
.dashboard-legacy .unpaid-status {
background-color: var(--danger-color);
color: var(--btn-text);
padding: 0.2em 0.8em;
border-radius: 3px;
}
.no-license, .no-end, .expired {
color: var(--text-muted);
}
.expired {
color: var(--warning-color);
font-weight: bold;
}
.no-payment-history, .no-eas {
background-color: var(--danger-color);
color: var(--btn-text);
padding: 1.2em;
border-radius: 7px;
margin: 1.5em 0;
border: 1px solid rgba(0,0,0,0.1);
}
.download-all-eas {
margin: 1.5em 0 0.5em 0;
}
.download-all-eas .dashboard-input {
margin-left: 1em;
}
.section-title {
color: var(--primary-color);
}
.copy-btn {
background: none;
border: 1px solid var(--primary-color);
color: var(--primary-color);
padding: 0.4em 0.8em;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: all 0.2s ease;
}
.copy-btn:hover {
background-color: var(--primary-color);
color: var(--btn-text);
}
.social-btn {
padding: 0.4em 0.8em;
border-radius: 4px;
text-decoration: none;
display: inline-block;
font-size: 1em;
color: white;
transition: all 0.2s ease;
}
.social-btn:hover {
filter: brightness(90%);
color: white;
text-decoration: none;
}
.social-btn.twitter {
background: #1DA1F2;
}
.social-btn.facebook {
background: #4267B2;
}
.social-btn.linkedin {
background: #0e76a8;
}
.custom-message {
width: 100%;
padding: 0.4em;
display: none;
margin-top: 0.5em;
}
.dashboard-legacy table{
border-collapse: collapse;
width: 100%;
margin-bottom: 1.5em;
border: 1px solid var(--border-color);
}
.dashboard-legacy th,
.dashboard-legacy td{
padding: 8px 12px;
border: 1px solid var(--border-color);
}
.dashboard-legacy th{
background-color: var(--input-bg);
color: var(--text-color);
font-weight: 600;
}
.dashboard-legacy tr:nth-child(even){ background-color: var(--card-bg); }
.dashboard-legacy tr:nth-child(odd){  background-color: var(--body-bg); }
.ss-dashboard ul,
.dashboard-legacy ul {
margin: 0;
padding-left: 1em;
max-height: 120px;
overflow: auto;
}
.ss-dashboard li,
.dashboard-legacy li {
margin-bottom: 0.3em;
}
.ss-dashboard li a,
.dashboard-legacy li a {
color: var(--primary-color);
font-weight: bold;
text-decoration: none;
}
.ss-dashboard li span,
.dashboard-legacy li span {
background: rgba(var(--primary-color-rgb), 0.1);
color: var(--primary-color);
border-radius: 3px;
padding: 0 0.3em;
margin-left: 0.3em;
font-size: 0.95em;
}
.ss-dashboard li span[title],
.dashboard-legacy li span[title] {
font-size: 0.92em;
color: var(--text-muted);
}
.ticket-list {
list-style: none;
padding: 0;
}
.ticket-item {
border-bottom: 1px solid var(--border-color);
padding: 10px 0;
}
.ticket-subject {
font-weight: bold;
color: var(--text-color);
}
.ticket-status {
display: inline-block;
margin-left: 8px;
}
.ticket-date {
color: var(--text-muted);
font-size: 0.9em;
}
.ticket-message {
margin-top: 5px;
}
.ticket-response {
margin-top: 5px;
font-style: italic;
color: var(--text-muted);
}
#onboarding-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
#onboarding-modal > div {
background: var(--card-bg);
padding: 2em 2em 1em 2em;
border-radius: 10px;
max-width: 400px;
text-align: center;
box-shadow: 0 4px 24px var(--shadow-color);
color: var(--text-color);
}
#onboarding-steps {
text-align: left;
margin: 1em 0 1em 1em;
padding: 0 0 0 1em;
color: var(--text-color);
}
#onboarding-next {
background: var(--primary-color);
color: var(--btn-text);
padding: 0.7em 2em;
border: none;
border-radius: 6px;
cursor: pointer;
}
#onboarding-next:hover {
filter: brightness(90%);
}
.ss-toast-stack{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1400;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.ss-toast{
pointer-events: auto;
width: min(300px, calc(100vw - 36px));
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(99,102,241,.28);
background: linear-gradient(180deg, rgba(11,18,34,.98), rgba(8,12,24,.98));
box-shadow: 0 14px 34px rgba(2,6,23,.55);
color: rgba(255,255,255,.92);
}
.ss-toast__head{
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.ss-toast__title{
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: .85rem;
margin: 0;
}
.ss-toast__close{
background: transparent;
border: 0;
color: rgba(255,255,255,.75);
width: 28px;
height: 28px;
border-radius: 8px;
}
.ss-toast__close:hover{
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.95);
}
.ss-toast__body{
padding: 8px 10px 10px;
color: rgba(229,231,235,.88);
font-size: .85rem;
}
.ss-toast--success{ border-color: rgba(34,197,94,.35); }
.ss-toast--success .ss-toast__title i{ color: rgb(34,197,94); }
.ss-toast--danger{ border-color: rgba(239,68,68,.35); }
.ss-toast--danger .ss-toast__title i{ color: rgb(239,68,68); }
.ss-toast--info{ border-color: rgba(59,130,246,.35); }
.ss-toast--info .ss-toast__title i{ color: rgb(96,165,250); }
.ss-panel{
position: relative;
border-radius: 22px;
overflow: hidden;
background: rgba(14, 20, 36, 0.55);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
0 18px 60px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.08);
}
.ss-panel::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
radial-gradient(900px 260px at 18% 20%, rgba(59,130,246,0.16), transparent 60%),
radial-gradient(900px 260px at 80% 30%, rgba(245,158,11,0.12), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
opacity: 1;
}
.ss-panel__head{
position: relative;
padding: 18px 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
}
.ss-panel__body{
position: relative;
padding: 20px;
}
.ss-panel__title{
font-weight: 800;
letter-spacing: .2px;
}
.ss-inputgroup .input-group-text{
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.85);
}
.ss-panel .form-control,
.ss-panel .form-select,
.ss-panel textarea{
background: rgba(8, 12, 22, 0.45);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.92);
}
.ss-panel .form-control::placeholder,
.ss-panel textarea::placeholder{
color: rgba(255,255,255,0.45);
}
.ss-panel .form-control:focus,
.ss-panel .form-select:focus,
.ss-panel textarea:focus{
outline: none;
border-color: rgba(245,158,11,0.55);
box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
}
.ss-icon-chip{
width: 46px;
height: 46px;
border-radius: 14px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.92);
box-shadow:
0 10px 30px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.08);
}
html, body{
scrollbar-color: rgba(255,255,255,0.20) rgba(255,255,255,0.06);
scrollbar-width: thin;
}
body::-webkit-scrollbar{
width: 10px;
}
body::-webkit-scrollbar-track{
background: rgba(255,255,255,0.06);
}
body::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, rgba(245,158,11,0.55), rgba(59,130,246,0.55));
border-radius: 12px;
border: 2px solid rgba(0,0,0,0.25);
}
body::-webkit-scrollbar-thumb:hover{
background: linear-gradient(180deg, rgba(245,158,11,0.75), rgba(59,130,246,0.75));
}
.ss-panel-neo {
background: #161a1e;
border: 1px solid #232a32;
border-radius: 14px;
padding: 1.8rem;
box-shadow: 0 8px 28px rgba(0,0,0,0.6);
transition: all 0.25s ease;
}
.ss-trade-surface {
background: #12161c;
border: 1px solid #1f252c;
border-radius: 12px;
padding: 1.2rem;
}
.ss-trade-surface table {
color: #e6edf3;
}
.ss-trade-surface thead {
background: #1e2329;
}
.ss-trade-surface tbody tr {
border-top: 1px solid #232a32;
}
.ss-trade-surface tbody tr:hover {
background: #1a1f26;
}
.ss-form-block {
background: #15181d;
border: 1px solid #232a32;
border-radius: 16px;
padding: 2rem;
}
.ss-form-block .form-control {
background: #0f1318;
border: 1px solid #232a32;
color: #e6edf3;
}
.ss-form-block .form-control:focus {
border-color: #7c3aed;
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}
.ss-selected {
border: 1px solid #7c3aed !important;
box-shadow:
0 0 0 1px rgba(124, 58, 237, 0.6),
0 0 12px rgba(124, 58, 237, 0.4);
}
.ss-panel-neo:hover,
.ss-trade-surface:hover,
.ss-form-block:hover {
border-color: #7c3aed;
box-shadow:
0 0 0 1px rgba(124, 58, 237, 0.5),
0 0 16px rgba(124, 58, 237, 0.35);
}
body::before,
body::after {
display: none !important;
}
[class*="glow"],
[class*="gradient-bg"],
[class*="radial"] {
background: none !important;
}
.ss-action-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.2rem;
}
.ss-action-grid > [class^="col-"] {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}
.ss-action-card {
padding: 1.15rem 1.15rem 1.05rem;
min-height: 220px;
display: flex;
flex-direction: column;
}
.ss-action-card__icon {
width: 56px;
height: 56px;
border-radius: 16px;
display: grid;
place-items: center;
margin-bottom: .85rem;
font-size: 1.25rem;
}
.ss-action-card__title {
margin-bottom: .45rem;
letter-spacing: -0.01em;
}
.ss-action-card__desc {
line-height: 1.45;
opacity: .92;
margin-bottom: .9rem;
}
.ss-action-card__btn {
margin-top: auto;
}
@media (max-width: 1200px) {
.ss-action-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.ss-action-grid {
grid-template-columns: 1fr;
}
}
.glass-card-2026 {
background: rgba(14, 20, 36, 0.55);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 18px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
border-radius: 18px;
}
.card {
background: rgba(14, 20, 36, 0.55);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 18px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
border-radius: 18px;
}
.ss-table {
--ss-table-border: rgba(255,255,255,.08);
--ss-table-border-2: rgba(255,255,255,.06);
--ss-table-head: rgba(255,255,255,.06);
--ss-table-row-hover: rgba(255,255,255,.04);
--ss-table-text: rgba(255,255,255,.88);
--ss-table-muted: rgba(255,255,255,.68);
color: var(--ss-table-text);
margin: 0;
border-collapse: separate;
border-spacing: 0;
background: rgba(10,14,28,.22);
border: 1px solid var(--ss-table-border);
border-radius: 16px;
overflow: hidden;
}
.ss-table > :not(caption) > * > * {
border-color: var(--ss-table-border-2) !important;
}
.ss-table thead th {
background: var(--ss-table-head) !important;
color: rgba(255,255,255,.85) !important;
font-weight: 700;
letter-spacing: .01em;
text-transform: none;
padding: .85rem 1rem;
border-bottom: 1px solid var(--ss-table-border) !important;
}
.ss-table tbody td {
padding: .85rem 1rem;
color: var(--ss-table-muted);
vertical-align: middle;
}
.ss-table tbody tr {
transition: background .18s ease, transform .18s ease;
}
.ss-table tbody tr:hover {
background: var(--ss-table-row-hover);
}
.ss-table tbody td:first-child {
color: rgba(255,255,255,.82);
}
.table-responsive {
background: transparent !important;
border-radius: 16px;
}
.table-responsive::-webkit-scrollbar {
height: 10px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.12);
border-radius: 999px;
}
.ss-table .ss-badge.badge {
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
padding: .35rem .6rem;
font-weight: 700;
}
.ss-table .text-muted,
.ss-table .muted {
color: rgba(255,255,255,.62) !important;
}
.ss-table {
background: rgba(6, 10, 22, .32) !important;
border: 1px solid rgba(255,255,255,.07) !important;
box-shadow: 0 18px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.ss-table thead th {
background: rgba(255,255,255,.045) !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.ss-table > :not(caption) > * > * {
border-color: rgba(255,255,255,.045) !important;
}
.ss-table tbody td {
color: rgba(255,255,255,.64) !important;
}
.ss-table tbody td:first-child {
color: rgba(255,255,255,.80) !important;
}
.ss-table tbody tr:hover {
background: rgba(255,255,255,.028) !important;
}
.ss-panel.premium-card{
border: 1px solid rgba(255,255,255,.08);
background: rgba(10, 16, 28, .72);
box-shadow: 0 18px 45px rgba(0,0,0,.35);
backdrop-filter: blur(14px);
border-radius: 18px;
}
.ss-panel .ss-panel__head{
border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
padding: 16px 18px;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.ss-panel .ss-panel__body,
.ss-panel .card-body{
background: transparent;
padding: 16px 18px;
}
.ss-table.table{
--bs-table-bg: transparent !important;
--bs-table-accent-bg: transparent !important;
--bs-table-striped-bg: rgba(255,255,255,.02) !important;
--bs-table-hover-bg: rgba(255,255,255,.035) !important;
--bs-table-border-color: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.86);
}
.ss-table thead th{
background: rgba(255,255,255,.03);
color: rgba(255,255,255,.88);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.ss-table tbody td{
border-top: 1px solid rgba(255,255,255,.06);
}
.ss-panel{
position: relative !important;
border-radius: 20px !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(10, 16, 28, .72) !important;
box-shadow: 0 18px 52px rgba(0,0,0,.40) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
.ss-panel__head{
position: relative !important;
padding: 16px 18px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.03) !important;
}
.ss-panel__body,
.ss-panel .card-body{
position: relative !important;
padding: 18px !important;
background: transparent !important;
}
.ss-panel::before{
content:"" !important;
position:absolute !important;
inset:-2px !important;
pointer-events:none !important;
background:
radial-gradient(900px 260px at 18% 20%, rgba(59,130,246,0.12), transparent 60%),
radial-gradient(900px 260px at 80% 30%, rgba(245,158,11,0.10), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)) !important;
opacity: 1 !important;
}
.table-responsive{
background: transparent !important;
}
.ss-table.table{
--bs-table-bg: transparent !important;
--bs-table-accent-bg: transparent !important;
--bs-table-striped-bg: rgba(255,255,255,.02) !important;
--bs-table-hover-bg: rgba(255,255,255,.035) !important;
--bs-table-border-color: rgba(255,255,255,.06) !important;
background: transparent !important;
}
.ss-table tbody tr{
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.10) !important;
}
.ss-table thead th{
background: rgba(255,255,255,.03) !important;
color: rgba(255,255,255,.70) !important;
}
.ss-analytics .ss-panel{
background: rgba(10, 16, 28, .72) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.ss-analytics .ss-panel__head{
background: rgba(255,255,255,.03) !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.ss-analytics .ss-empty-state__card{
border-radius: 18px !important;
background: rgba(10, 16, 28, .72) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
}
.ss-analytics .ss-empty-state__icon{
width: 68px;
height: 68px;
border-radius: 20px;
display:flex;
align-items:center;
justify-content:center;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.88);
}
#dashboard-page .table,
#dashboard-page .ss-table{
--bs-table-bg: transparent;
--bs-table-striped-bg: rgba(255,255,255,.02);
--bs-table-hover-bg: rgba(255,255,255,.03);
border-color: rgba(255,255,255,.08);
}
#dashboard-page .ss-table tbody tr{
background: rgba(0,0,0,.16) !important;
border: 1px solid rgba(255,255,255,.10) !important;
}
#dashboard-page .ss-table thead th{
background: rgba(0,0,0,.18) !important;
border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.ss-panel table,
.ss-panel th,
.ss-panel td{
border: none !important;
background: transparent !important;
}
.ss-panel .ss-table{
border-collapse: separate !important;
border-spacing: 0 10px !important;
width: 100%;
margin: 0 !important;
background: transparent !important;
}
.ss-panel .ss-table thead th{
background: rgba(255,255,255,.04) !important;
border: none !important;
border-bottom: 1px solid rgba(255,255,255,.12) !important;
color: rgba(255,255,255,.70) !important;
font-weight: 800 !important;
padding: 10px 14px !important;
}
.ss-panel .ss-table tbody tr{
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.10) !important;
}
.ss-panel .ss-table tbody td{
border: none !important;
padding: 12px 14px !important;
color: rgba(226,232,240,.92) !important;
}
.ss-panel .ss-table tbody tr:hover{
background: rgba(255,255,255,.04) !important;
}
.ss-panel .ss-table tbody tr td:first-child{
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
}
.ss-panel .ss-table tbody tr td:last-child{
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
}
.ss-panel{
background: rgba(10, 16, 28, .72) !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 22px !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.ss-panel{
background: rgba(10, 16, 28, .72) !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 22px !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
box-shadow:
0 18px 60px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.premium-card-header{
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
}
.premium-card-body{
padding: 18px;
}
body {
background: #0b0e11 !important;
color: #e6edf3;
}
.section-alt {
background: #0f1318 !important;
}
.glass-card-2026,
.ss-livefeed-card,
.kpi-card-2026,
.contact-card {
background: #161a1e !important;
backdrop-filter: none !important;
border: 1px solid #232a32 !important;
box-shadow: 0 0 0 1px rgba(255,255,255,0.02),
0 8px 24px rgba(0,0,0,0.6);
border-radius: 14px;
}
.ss-livefeed-table thead {
background: #1e2329 !important;
color: #b7bdc6;
}
.ss-livefeed-table tbody tr {
background: #161a1e;
border-top: 1px solid #232a32;
}
.ss-livefeed-table tbody tr:hover {
background: #1e2329;
}
.form-control,
.ss-inputgroup .input-group-text {
background: #0f1318 !important;
border: 1px solid #232a32 !important;
color: #e6edf3 !important;
}
.form-control:focus {
border-color: #7c3aed !important;
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}
.btn-primary-2026 {
background: #7c3aed !important;
border: none !important;
color: #fff !important;
font-weight: 600;
box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
transition: all 0.25s ease;
}
.btn-primary-2026:hover {
background: #6d28d9 !important;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(124, 58, 237, 0.6);
}
.ss-panel-neo {
background: #161a1e;
border: 1px solid #232a32;
border-radius: 14px;
padding: 1.8rem;
box-shadow: 0 8px 28px rgba(0,0,0,0.6);
transition: all 0.25s ease;
}
.ss-trade-surface {
background: #12161c;
border: 1px solid #1f252c;
border-radius: 12px;
padding: 1.2rem;
}
.ss-trade-surface table {
color: #e6edf3;
}
.ss-trade-surface thead {
background: #1e2329;
}
.ss-trade-surface tbody tr {
border-top: 1px solid #232a32;
}
.ss-trade-surface tbody tr:hover {
background: #1a1f26;
}
.ss-form-block {
background: #15181d;
border: 1px solid #232a32;
border-radius: 16px;
padding: 2rem;
}
.ss-form-block .form-control {
background: #0f1318;
border: 1px solid #232a32;
color: #e6edf3;
}
.ss-form-block .form-control:focus {
border-color: #7c3aed;
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}
.ss-selected {
border: 1px solid #7c3aed !important;
box-shadow:
0 0 0 1px rgba(124, 58, 237, 0.6),
0 0 12px rgba(124, 58, 237, 0.4);
}
.ss-panel-neo:hover,
.ss-trade-surface:hover,
.ss-form-block:hover {
border-color: #7c3aed;
box-shadow:
0 0 0 1px rgba(124, 58, 237, 0.5),
0 0 16px rgba(124, 58, 237, 0.35);
}
body::before,
body::after {
display: none !important;
}
[class*="glow"],
[class*="gradient-bg"],
[class*="radial"] {
background: none !important;
}
.ss-hero-violet {
background:
radial-gradient(
circle at top right,
rgba(124, 58, 237, 0.25),
transparent 45%
),
linear-gradient(
180deg,
#1a1333 0%,
#120c24 45%,
#0b0e11 100%
);
border-bottom: 1px solid rgba(124, 58, 237, 0.25);
}
.ss-hero-violet .kpi-value-2026 {
color: #c4b5fd;
text-shadow: 0 0 10px rgba(124, 58, 237, 0.4);
}
.ss-hero-violet .kpi-top-2026 {
color: #e9d5ff;
}
.ss-hero-violet-dark {
background:
linear-gradient(
180deg,
#0f0b1a 0%,
#0b0e11 60%
);
position: relative;
border-bottom: 1px solid rgba(124, 58, 237, 0.18);
}
.section-alt {
background-color: #0c0f13 !important;
background-image: none !important;
}
.section-alt {
background-color: #0a0d10 !important;
}
.navbar-2026 {
background: rgba(11, 14, 17, 0.75) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.navbar-2026::before,
.navbar-2026::after {
display: none !important;
background: none !important;
}
.ss-footer {
background: #0b0e11 !important;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding: 1.5rem 0;
}
.ss-footer__copy {
color: #8b949e;
font-size: 0.9rem;
}
.ss-footer__brand {
color: #e6edf3;
font-weight: 600;
}
.ss-footer__link {
color: #9aa4af;
text-decoration: none;
transition: color 0.2s ease;
}
.ss-footer__link:hover {
color: #7c3aed;
}
.ss-footer__sep {
color: #3a4048;
margin: 0 0.5rem;
}
.ss-footer {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.ss-panel-neo,
.feature-card,
.ss-action-card,
.ss-form-block {
background: rgba(12, 15, 19, 0.97) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 14px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
transition: all 0.25s ease;
}
.ss-panel-neo::before,
.feature-card::before,
.ss-action-card::before,
.ss-form-block::before {
content: "";
position: absolute;
inset: 0;
border-radius: 14px;
pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.ss-panel-neo:hover,
.feature-card:hover,
.ss-action-card:hover,
.ss-form-block:hover {
background: rgba(16, 20, 24, 1) !important;
border-color: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}
.ss-panel-neo table {
background: rgba(8, 10, 13, 0.95);
}
.ss-panel-neo thead {
background: rgba(255, 255, 255, 0.02);
}
.ss-panel-neo tbody tr:hover {
background: rgba(255, 255, 255, 0.035);
}
html,
body {
background-color: #050505 !important;
background-image: none !important;
}
:root {
--bs-body-bg: #050505 !important;
}
body.dark-mode {
background-color: #050505 !important;
background-image: none !important;
}
section,
.ss-section,
main {
background-color: #050505 !important;
background-image: none !important;
}
body {
background-color: #050505 !important;
}
.ss-section {
background: transparent !important;
}
:root {
--ss-base-bg: #050505;
}
body {
background: var(--ss-base-bg) !important;
}
.ss-section {
background: transparent !important;
}
:root {
--ss-section-alt-bg: #0a0d10;
}
section,
.ss-section {
background: transparent !important;
}
main {
background: transparent !important;
}
.dashboard-btn,
.dashboard-btn.primary {
background: rgba(12, 15, 19, 0.97) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
box-shadow: none !important;
color: #e8e8e8 !important;
}
.dashboard-btn,
.dashboard-btn.primary {
position: relative;
border-radius: 12px;
transition: all 0.25s ease;
}
.dashboard-btn.primary {
background: linear-gradient(
145deg,
rgba(120, 90, 255, 0.15),
rgba(90, 60, 200, 0.15)
) !important;
border: 1px solid rgba(140, 110, 255, 0.35) !important;
}
.dashboard-btn:hover,
.dashboard-btn.primary:hover {
border-color: rgba(160, 130, 255, 0.75) !important;
box-shadow:
0 0 0 1px rgba(160, 130, 255, 0.6),
0 0 18px rgba(140, 100, 255, 0.55),
0 0 35px rgba(120, 80, 255, 0.35);
transform: translateY(-2px);
}
.dashboard-btn::after,
.dashboard-btn.primary::after,
.btn-2026::after {
content: "›";
font-size: 1rem;
margin-left: 8px;
opacity: 0.75;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.dashboard-btn:hover::after,
.dashboard-btn.primary:hover::after,
.btn-2026:hover::after {
transform: translateX(4px);
opacity: 1;
}
.hero-title-2026 {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 2rem;
}
.main-title {
font-size: 4.5rem;
font-weight: 850;
line-height: 1.05;
letter-spacing: -3px;
color: #ffffff;
text-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.accent-text {
background: linear-gradient(90deg, #7000ff, #00c6ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 4s infinite linear;
display: inline-block;
}
.cinematic-separator {
height: 1px;
width: 100%;
max-width: 500px;
background: linear-gradient(90deg, #7000ff, rgba(112,0,255,0));
margin: 25px 0 15px 0;
position: relative;
overflow: hidden;
}
.cinematic-separator::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, #00c6ff, transparent);
animation: line-glow 3s infinite;
}
.hero-highlight {
font-size: 1.8rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 0;
}
@keyframes shine {
0% { filter: hue-rotate(0deg) brightness(1); }
50% { filter: hue-rotate(15deg) brightness(1.2); }
100% { filter: hue-rotate(0deg) brightness(1); }
}
@keyframes line-glow {
0% { left: -100%; }
100% { left: 100%; }
}
@media (max-width: 992px) {
.main-title { font-size: 3.5rem; letter-spacing: -1px; }
.hero-highlight { font-size: 1.4rem; }
}
.faq-glass .accordion-button:not(.collapsed) {
background: rgba(22, 22, 30, 0.85) !important;
box-shadow: none !important;
color: #ffffff !important;
}
.faq-glass .accordion-button:focus {
box-shadow: none !important;
}
.faq-glass::before,
.faq-glass .accordion-button::after {
box-shadow: none !important;
}
.faq-glass .accordion-body {
background: rgba(18, 18, 24, 0.85) !important;
color: rgba(255,255,255,0.85) !important;
}
.faq-glass {
background: rgba(18, 18, 24, 0.92) !important;
background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}
.faq-glass::before {
display: none !important;
}
.faq-glass .accordion-collapse {
background: transparent !important;
}
.faq-glass.btn-primary-2026,
.faq-glass.active,
.faq-glass.btn-primary-2026.active {
background: rgba(15, 15, 20, 0.95) !important;
background-image: none !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65) !important;
border-color: rgba(255, 255, 255, 0.06) !important;
}
#notificationSettingsModal .modal-dialog {
max-width: 520px;
width: 92%;
margin: 1.5rem auto;
}
#notificationSettingsModal .modal-content {
max-height: 85vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
#notificationSettingsModal .modal-body {
overflow-y: auto;
max-height: calc(85vh - 140px);
}
#notificationSettingsModal {
z-index: 2000;
}
#notificationSettingsModal .modal-backdrop {
z-index: 1990;
}
@media (min-width: 992px) {
#notificationSettingsModal .modal-dialog {
max-width: 460px;
}
}
.glass-dropdown.dropdown-menu {
background: rgba(6, 6, 8, 0.92) !important;
background-image: none !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 14px !important;
box-shadow: 0 18px 40px rgba(0,0,0,0.7) !important;
}
.glass-dropdown .dropdown-item {
color: rgba(255,255,255,0.85) !important;
}
.glass-dropdown .dropdown-item:hover {
background: rgba(255,255,255,0.06) !important;
color: #ffffff !important;
}
.glass-dropdown .dropdown-divider {
border-color: rgba(255,255,255,0.08) !important;
}
.notif-menu-2026.dropdown-menu {
background: rgba(6, 6, 8, 0.94) !important;
background-image: none !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 14px !important;
box-shadow: 0 18px 45px rgba(0,0,0,0.75) !important;
}
.notif-menu-2026 {
--bs-dropdown-bg: rgba(6,6,8,0.94) !important;
}
.notif-menu-2026 .dropdown-item {
background: transparent !important;
color: rgba(255,255,255,0.85) !important;
}
.notif-menu-2026 .dropdown-item:hover {
background: rgba(255,255,255,0.06) !important;
color: #fff !important;
}
.notif-menu-2026 .dropdown-divider {
border-color: rgba(255,255,255,0.08) !important;
}
:root {
--ss-bg-main: #0B0F1A;
--ss-bg-elevated: #121826;
--ss-surface-glass: rgba(18, 24, 38, 0.78);
--ss-accent-primary: #7C5CFF;
--ss-accent-secondary: #00C2FF;
--ss-accent-glow: rgba(124, 92, 255, 0.35);
--ss-text-primary: #EAF0FF;
--ss-text-muted: #9CA8C6;
--ss-border-soft: rgba(124, 92, 255, 0.18);
}
body {
background: var(--ss-bg-main) !important;
color: var(--ss-text-primary);
}
body,
.section-alt,
.features-section {
background-image: none !important;
}
.glass-card-2026,
.ss-panel {
position: relative;
background: var(--ss-surface-glass) !important;
border: 1px solid var(--ss-border-soft) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-radius: 22px !important;
transition: all .3s ease;
}
.glass-card-2026::before,
.ss-panel::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 22px;
pointer-events: none;
background:
radial-gradient(800px 300px at 15% 15%, rgba(124,92,255,.18), transparent 60%),
radial-gradient(800px 300px at 85% 20%, rgba(0,194,255,.12), transparent 60%);
z-index: 0;
}
.glass-card-2026:hover,
.ss-panel:hover {
transform: translateY(-4px);
box-shadow: 0 25px 70px var(--ss-accent-glow);
}
.btn-primary-2026 {
background: var(--ss-accent-primary) !important;
border: none !important;
color: #fff !important;
font-weight: 600;
letter-spacing: .4px;
border-radius: 14px;
padding: .7rem 1.2rem;
transition: all .25s ease;
box-shadow: 0 10px 30px rgba(124,92,255,.35);
}
.btn-primary-2026:hover {
background: #6846f0 !important;
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(124,92,255,.55);
}
.btn-2026:not(.btn-primary-2026) {
border: 1px solid rgba(124,92,255,.4);
color: var(--ss-text-primary);
background: transparent;
}
.ss-table,
.ss-livefeed-table {
background: transparent !important;
border-color: rgba(255,255,255,.05) !important;
}
.ss-livefeed-table thead th {
color: var(--ss-text-muted) !important;
text-transform: uppercase;
font-size: .75rem;
letter-spacing: 1px;
}
.ss-livefeed-table tbody tr:hover {
background: rgba(124,92,255,.08) !important;
box-shadow: inset 0 0 0 1px rgba(124,92,255,.25);
}
.kpi-card-2026 .kpi-top-2026 i {
color: var(--ss-accent-primary);
background: rgba(124,92,255,.18);
padding: 10px;
border-radius: 12px;
}
.kpi-value-2026 {
font-weight: 700;
font-size: 1.8rem;
color: var(--ss-text-primary);
}
.form-control,
.input-group-text {
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.08) !important;
color: var(--ss-text-primary) !important;
}
.form-control:focus {
border-color: var(--ss-accent-primary) !important;
box-shadow: 0 0 0 3px rgba(124,92,255,.25) !important;
}
.section-heading,
.contact-card__title {
color: #FFFFFF;
font-weight: 700;
letter-spacing: -.5px;
}
.text-muted {
color: var(--ss-text-muted) !important;
}
.ss-panel-neo {
background: #161a1e;
border: 1px solid #232a32;
border-radius: 14px;
padding: 1.8rem;
box-shadow: 0 8px 28px rgba(0,0,0,0.6);
transition: all 0.25s ease;
}
.ss-trade-surface {
background: #12161c;
border: 1px solid #1f252c;
border-radius: 12px;
padding: 1.2rem;
}
.ss-trade-surface table {
color: #e6edf3;
}
.ss-trade-surface thead {
background: #1e2329;
}
.ss-trade-surface tbody tr {
border-top: 1px solid #232a32;
}
.ss-trade-surface tbody tr:hover {
background: #1a1f26;
}
.ss-form-block {
background: #15181d;
border: 1px solid #232a32;
border-radius: 16px;
padding: 2rem;
}
.ss-form-block .form-control {
background: #0f1318;
border: 1px solid #232a32;
color: #e6edf3;
}
.ss-form-block .form-control:focus {
border-color: #7c3aed;
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}
.ss-selected {
border: 1px solid #7c3aed !important;
box-shadow:
0 0 0 1px rgba(124, 58, 237, 0.6),
0 0 12px rgba(124, 58, 237, 0.4);
}
.ss-panel-neo:hover,
.ss-trade-surface:hover,
.ss-form-block:hover {
border-color: #7c3aed;
box-shadow:
0 0 0 1px rgba(124, 58, 237, 0.5),
0 0 16px rgba(124, 58, 237, 0.35);
}
body::before,
body::after {
display: none !important;
}
[class*="glow"],
[class*="gradient-bg"],
[class*="radial"] {
background: none !important;
}
:root {
--pro-bg: #080b12;
--pro-surface: #111722;
--pro-surface-2: #171e2b;
--pro-border: #273044;
--pro-text: #f5f7fb;
--pro-muted: #9ca7ba;
--pro-accent: #f0b90b;
--pro-accent-strong: #ffd84d;
--pro-success: #35c47c;
--pro-warning: #f6ad3c;
--pro-danger: #ef6671;
--pro-radius: 14px;
--pro-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
html, body { background: var(--pro-bg) !important; color: var(--pro-text) !important; }
body { min-height: 100vh; }
body:not(.authenticated-user) .ss-side-nav { display: none !important; }
body:not(.authenticated-user) .ss-main { margin-left: 0 !important; width: 100% !important; }
@media (min-width: 992px) {
body.authenticated-user .navbar-2026 { display: none !important; }
body.authenticated-user .ss-side-nav {
display: flex !important; width: 248px !important; padding: 18px 14px !important;
background: #0d111a !important; border-right: 1px solid var(--pro-border) !important;
box-shadow: none !important; backdrop-filter: none !important;
}
body.authenticated-user .ss-main { margin-left: 248px !important; width: calc(100% - 248px) !important; min-height: 100vh; }
body.authenticated-user .ss-footer { margin-left: 248px !important; }
}
.ss-side-nav__inner { width: 100%; gap: 5px !important; }
.ss-side-brand { margin: 4px 8px 22px !important; }
.ss-side-nav__label { color: #667085 !important; font-size: 12px !important; letter-spacing: .12em !important; margin: 18px 10px 8px !important; }
.ss-side-link {
border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important;
color: #aab4c5 !important; padding: 11px 12px !important; font-weight: 600 !important; box-shadow: none !important;
}
.ss-side-link:hover { background: #171e2b !important; color: #fff !important; border-color: #252f43 !important; transform: none !important; }
.ss-side-link.active { background: rgba(240,185,11,.11) !important; color: #ffe27a !important; border-color: rgba(240,185,11,.28) !important; }
.pro-page { width: 100%; color: var(--pro-text); }
.pro-container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.pro-public-page { padding-bottom: 40px; }
.pro-hero { padding: 96px 0 74px; border-bottom: 1px solid var(--pro-border); background: radial-gradient(circle at 75% 10%, rgba(240,185,11,.10), transparent 34%), var(--pro-bg); }
.pro-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 64px; align-items: center; }
.pro-hero h1, .pro-workspace h1, .pro-confirm-card h1 { font-size: clamp(2.25rem, 5vw, 4.4rem); line-height: 1.03; letter-spacing: -.03em; margin: 16px 0 20px; font-weight: 800; }
.pro-lead { color: var(--pro-muted); font-size: 1.12rem; line-height: 1.75; max-width: 680px; }
.pro-eyebrow { display: inline-flex; gap: 8px; align-items: center; color: var(--pro-accent-strong); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pro-btn { min-height: 44px; padding: 11px 17px; border-radius: 10px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750; text-decoration: none; transition: .16s ease; cursor: pointer; }
.pro-btn:hover { transform: translateY(-1px); color: inherit; }
.pro-btn--primary { color: #161100 !important; background: var(--pro-accent); border-color: var(--pro-accent); }
.pro-btn--primary:hover { background: var(--pro-accent-strong); }
.pro-btn--secondary { color: var(--pro-text) !important; background: var(--pro-surface); border-color: var(--pro-border); }
.pro-btn--danger { color: white !important; background: #be3342; border-color: #d84755; }
.pro-btn--block { width: 100%; }
.pro-trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; color: var(--pro-muted); font-size: .88rem; }
.pro-trust-row i { color: var(--pro-success); margin-right: 6px; }
.pro-product-preview, .pro-card, .pro-kpi { background: var(--pro-surface) !important; border: 1px solid var(--pro-border) !important; box-shadow: none !important; backdrop-filter: none !important; }
.pro-product-preview { border-radius: 18px; padding: 22px; box-shadow: var(--pro-shadow) !important; }
.pro-preview-head, .pro-card-top, .pro-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pro-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pro-success); margin-right: 8px; box-shadow: 0 0 0 4px rgba(53,196,124,.12); }
.pro-chip { display: inline-flex; width: fit-content; border: 1px solid #303b51; background: #171e2b; color: #b8c3d5; border-radius: 999px; padding: 5px 9px; font-size: .75rem; font-weight: 700; }
.pro-preview-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.pro-preview-kpis article { background: #0c111a; border: 1px solid #222b3d; border-radius: 12px; padding: 14px; }
.pro-preview-kpis small, .pro-preview-kpis span { display: block; color: var(--pro-muted); font-size: .75rem; }
.pro-preview-kpis strong { display: block; font-size: 1.05rem; margin: 5px 0; }
.pro-preview-list { border-top: 1px solid var(--pro-border); padding-top: 16px; display: grid; gap: 12px; color: #c8d0dd; font-size: .86rem; }
.pro-preview-list i { color: var(--pro-success); margin-right: 8px; }
.pro-section { padding: 80px 0; }
.pro-section--muted { background: #0b0f17; border-block: 1px solid var(--pro-border); }
.pro-section-head { max-width: 720px; margin-bottom: 30px; }
.pro-section-head--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.pro-section h2, .pro-panel h2 { margin: 10px 0 8px; font-weight: 780; letter-spacing: -.025em; }
.pro-section-head p, .pro-card p, .pro-workspace-head p { color: var(--pro-muted); line-height: 1.65; }
.pro-step-grid, .pro-ea-grid, .pro-plan-grid { display: grid; gap: 18px; }
.pro-step-grid { grid-template-columns: repeat(3, 1fr); }
.pro-ea-grid { grid-template-columns: repeat(3, 1fr); }
.pro-plan-grid { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }
.pro-card { border-radius: var(--pro-radius) !important; padding: 24px; position: relative; }
.pro-step { color: var(--pro-accent); font-weight: 800; font-size: .77rem; }
.pro-card h3 { margin: 12px 0 8px; font-size: 1.1rem; }
.pro-link { color: #f3cb48 !important; font-weight: 700; text-decoration: none; }
.pro-link:hover { color: #ffe486 !important; }
.pro-risk { color: var(--pro-muted); font-size: .76rem; }
.pro-price { display: flex; align-items: baseline; gap: 7px; margin: 18px 0; }
.pro-price strong { font-size: 2rem; letter-spacing: -.03em; }
.pro-price span { color: var(--pro-muted); }
.pro-plan-card ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; color: #cbd4e2; font-size: .88rem; }
.pro-plan-card li i { color: var(--pro-success); margin-right: 8px; }
.pro-plan-card.is-featured { border-color: rgba(240,185,11,.55) !important; }
.pro-featured-label { position: absolute; top: -11px; right: 16px; background: var(--pro-accent); color: #171100; padding: 5px 9px; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.pro-risk-disclosure { padding-top: 20px; }
.pro-risk-disclosure .pro-card { border-color: rgba(246,173,60,.28) !important; }
.pro-risk-disclosure h2 { font-size: 1.1rem; }
.pro-risk-disclosure h2 i { color: var(--pro-warning); margin-right: 8px; }
.pro-workspace { padding: 36px clamp(18px, 4vw, 54px) 70px; max-width: 1500px; margin: 0 auto; }
.pro-workspace-head { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; margin-bottom: 28px; }
.pro-workspace h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 10px; }
.pro-workspace-head .pro-actions { margin-top: 0; }
.pro-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.pro-kpi { border-radius: 12px; padding: 19px; }
.pro-kpi span, .pro-kpi small { display: block; color: var(--pro-muted); font-size: .78rem; }
.pro-kpi strong { display: block; font-size: 2rem; margin: 7px 0; }
.pro-workspace-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr); gap: 18px; align-items: start; }
.pro-panel { padding: 0; overflow: hidden; }
.pro-panel--wide { min-width: 0; }
.pro-panel-head { padding: 20px 22px; border-bottom: 1px solid var(--pro-border); }
.pro-panel-head h2 { font-size: 1.05rem; margin-bottom: 0; }
.pro-table-wrap { overflow-x: auto; }
.pro-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.pro-table th { color: #778399; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 750; padding: 13px 16px; border-bottom: 1px solid var(--pro-border); text-align: left; }
.pro-table td { padding: 15px 16px; border-bottom: 1px solid #20283a; color: #d6dce6; font-size: .84rem; }
.pro-table tbody tr:last-child td { border-bottom: 0; }
.pro-table td strong, .pro-table td small { display: block; }
.pro-table td small { color: var(--pro-muted); margin-top: 3px; }
.pro-table code { color: #cdd6e5; background: #0a0e15; border: 1px solid #222b3d; border-radius: 6px; padding: 5px 7px; }
.pro-table-action { text-align: right; }
.pro-table-action a { color: #f3cb48; font-weight: 700; }
.pro-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: .75rem; font-weight: 750; border: 1px solid #354058; color: #c9d2e1; background: #1a2230; }
.pro-status--active { color: #79e3aa; border-color: rgba(53,196,124,.3); background: rgba(53,196,124,.08); }
.pro-status--revoked, .pro-status--inactive { color: #ff9ba4; border-color: rgba(239,102,113,.3); background: rgba(239,102,113,.08); }
.pro-status--pending { color: #ffd27b; border-color: rgba(246,173,60,.3); background: rgba(246,173,60,.08); }
.pro-stack { display: grid; }
.pro-list-item { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 17px 20px; border-bottom: 1px solid #20283a; }
.pro-list-item:last-child { border-bottom: 0; }
.pro-list-item strong, .pro-list-item span { display: block; }
.pro-list-item span { color: var(--pro-muted); font-size: .77rem; margin-top: 3px; }
.pro-empty { padding: 44px 24px; text-align: center; color: var(--pro-muted); }
.pro-empty i { font-size: 1.6rem; color: #647087; }
.pro-empty h3 { color: var(--pro-text); }
.pro-empty--compact { padding: 24px; }
.pro-quick-links { display: grid; }
.pro-quick-links a { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 16px 20px; border-bottom: 1px solid #20283a; color: #dce2eb !important; }
.pro-quick-links a:last-child { border-bottom: 0; }
.pro-quick-links a:hover { background: #171e2b; }
.pro-quick-links small { display: block; color: var(--pro-muted); margin-top: 2px; }
.pro-narrow { width: min(700px, calc(100% - 32px)); margin: 0 auto; padding: 70px 0; }
.pro-confirm-card { padding: 34px; }
.pro-confirm-card h1 { font-size: clamp(2rem, 5vw, 3rem); }
.pro-alert { border-radius: 10px; padding: 14px 16px; margin: 20px 0; }
.pro-alert--danger { background: rgba(239,102,113,.09); border: 1px solid rgba(239,102,113,.3); color: #ffb1b8; }
.pro-alert--warning { background: rgba(246,173,60,.09); border: 1px solid rgba(246,173,60,.3); color: #ffda96; }
.ss-card, .ss-action-card, .glass-card-2026, .premium-card, .ss-panel-neo, .ss-glass-callout {
background: var(--pro-surface) !important; border: 1px solid var(--pro-border) !important;
box-shadow: none !important; backdrop-filter: none !important; border-radius: var(--pro-radius) !important;
}
#license-management[hidden] { display: flex !important; }
@media (max-width: 1100px) {
.pro-hero__grid { grid-template-columns: 1fr; }
.pro-product-preview { max-width: 720px; }
.pro-ea-grid { grid-template-columns: repeat(2, 1fr); }
.pro-kpi-grid { grid-template-columns: repeat(2, 1fr); }
.pro-workspace-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
.pro-container { width: min(100% - 28px, 1160px); }
.pro-hero { padding: 62px 0 50px; }
.pro-hero__grid { gap: 34px; }
.pro-preview-kpis, .pro-step-grid, .pro-ea-grid { grid-template-columns: 1fr; }
.pro-section { padding: 56px 0; }
.pro-section-head--row, .pro-workspace-head { display: block; }
.pro-workspace { padding: 25px 14px 80px; }
.pro-kpi-grid { grid-template-columns: 1fr 1fr; }
.pro-workspace-head .pro-actions { margin-top: 18px; }
}
@media (max-width: 480px) {
.pro-kpi-grid { grid-template-columns: 1fr; }
.pro-actions .pro-btn { width: 100%; }
}
:root {
--ss-bg: #080b12;
--ss-bg-soft: #0b1019;
--ss-surface: #111722;
--ss-surface-2: #171e2b;
--ss-surface-3: #1d2635;
--ss-border: #283247;
--ss-border-soft: #1d2635;
--ss-text: #f5f7fb;
--ss-text-soft: #c7cfdd;
--ss-muted: #929db0;
--ss-muted-2: #69758a;
--ss-accent: #f0b90b;
--ss-accent-bright: #ffd84d;
--ss-accent-soft: rgba(240, 185, 11, .12);
--ss-blue: #5b8cff;
--ss-green: #38c987;
--ss-amber: #f6ad3c;
--ss-red: #ef6671;
--ss-radius-sm: 10px;
--ss-radius: 14px;
--ss-radius-lg: 20px;
--ss-shadow-sm: 0 10px 28px rgba(0, 0, 0, .16);
--ss-shadow: 0 24px 70px rgba(0, 0, 0, .28);
--ss-sidebar: 272px;
--ss-topbar: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100vh;
background: var(--ss-bg);
color: var(--ss-text);
font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(240,185,11,.45); outline-offset: 3px; }
.ss-skip-link {
position: fixed;
z-index: 10000;
top: -80px;
left: 18px;
padding: 11px 15px;
border-radius: var(--ss-radius-sm);
background: #fff;
color: #10141d;
font-weight: 800;
text-decoration: none;
transition: top .18s ease;
}
.ss-skip-link:focus { top: 16px; }
.ss-public-body {
background:
radial-gradient(circle at 74% -15%, rgba(91,140,255,.13), transparent 31rem),
radial-gradient(circle at 10% 20%, rgba(240,185,11,.07), transparent 28rem),
var(--ss-bg);
}
.ss-public-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.ss-public-header {
position: sticky;
top: 0;
z-index: 900;
border-bottom: 1px solid rgba(255,255,255,.07);
background: rgba(8,11,18,.86);
backdrop-filter: blur(18px);
}
.ss-public-nav { min-height: 74px; display: flex; align-items: center; gap: 28px; }
.ss-public-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ss-text); text-decoration: none; font-size: 1.02rem; font-weight: 800; letter-spacing: -.025em; }
.ss-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ss-border); border-radius: 12px; background: var(--ss-surface-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.ss-brand-mark img { width: 25px; height: 25px; }
.ss-public-links { display: flex; align-items: center; gap: 26px; margin: 0 auto; }
.ss-public-links a, .ss-text-button { color: var(--ss-muted); text-decoration: none; font-size: .88rem; font-weight: 650; transition: color .16s ease; }
.ss-public-links a:hover, .ss-text-button:hover { color: var(--ss-text); }
.ss-public-actions { display: flex; align-items: center; gap: 16px; }
.ss-public-menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--ss-border); border-radius: 11px; background: var(--ss-surface); color: var(--ss-text); }
.ss-public-mobile-menu { border-top: 1px solid var(--ss-border-soft); padding: 10px 20px 20px; background: var(--ss-bg-soft); }
.ss-public-mobile-menu[hidden] { display: none !important; }
.ss-public-mobile-menu nav { width: min(1180px, 100%); margin: 0 auto; display: grid; }
.ss-public-mobile-menu a { padding: 13px 4px; border-bottom: 1px solid var(--ss-border-soft); color: var(--ss-text-soft); text-decoration: none; font-weight: 650; }
.ss-public-mobile-menu a.is-primary { color: var(--ss-accent-bright); }
.ss-button {
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 11px 18px;
border: 1px solid transparent;
border-radius: 11px;
text-decoration: none;
font-size: .9rem;
font-weight: 800;
cursor: pointer;
transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.ss-button:hover { transform: translateY(-1px); }
.ss-button--small { min-height: 40px; padding: 9px 15px; font-size: .82rem; }
.ss-button--primary { background: var(--ss-accent); color: #191300; border-color: var(--ss-accent); box-shadow: 0 9px 24px rgba(240,185,11,.14); }
.ss-button--primary:hover { background: var(--ss-accent-bright); color: #191300; }
.ss-button--secondary { background: var(--ss-surface); color: var(--ss-text); border-color: var(--ss-border); }
.ss-button--secondary:hover { background: var(--ss-surface-2); color: var(--ss-text); border-color: #3a4660; }
.ss-button--ghost { background: transparent; color: var(--ss-text-soft); border-color: transparent; }
.ss-button--danger { background: rgba(239,102,113,.12); color: #ffabb2; border-color: rgba(239,102,113,.32); }
.ss-button--block { width: 100%; }
.ss-message-stack { position: relative; z-index: 10; padding-top: 18px; }
.ss-message { padding: 13px 16px; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); background: var(--ss-surface); color: var(--ss-text-soft); font-size: .88rem; }
.ss-message--success { border-color: rgba(56,201,135,.32); background: rgba(56,201,135,.08); color: #9beac2; }
.ss-message--error, .ss-message--danger { border-color: rgba(239,102,113,.32); background: rgba(239,102,113,.08); color: #ffb2b8; }
.ss-message--warning { border-color: rgba(246,173,60,.32); background: rgba(246,173,60,.08); color: #ffd58e; }
.ss-hero { position: relative; overflow: hidden; padding: 88px 0 70px; }
.ss-hero::after { content: ""; position: absolute; width: 600px; height: 600px; right: -250px; top: -250px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255,255,255,.015), 0 0 0 180px rgba(255,255,255,.012); pointer-events: none; }
.ss-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); gap: 68px; align-items: center; }
.ss-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--ss-accent-bright); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.ss-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ss-accent); box-shadow: 0 0 0 5px rgba(240,185,11,.1); }
.ss-hero h1 { max-width: 760px; margin: 17px 0 22px; color: var(--ss-text); font-size: clamp(2.65rem, 5.2vw, 4.9rem); line-height: .99; letter-spacing: -.03em; font-weight: 800; }
.ss-hero h1 em { color: var(--ss-accent-bright); font-style: normal; }
.ss-hero-copy { max-width: 680px; margin: 0; color: var(--ss-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.75; }
.ss-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ss-hero-proof { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; color: var(--ss-muted); font-size: .8rem; }
.ss-hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.ss-hero-proof i { color: var(--ss-green); }
.ss-platform-preview { position: relative; border: 1px solid #313c54; border-radius: 22px; background: linear-gradient(160deg, rgba(25,33,48,.97), rgba(13,18,27,.98)); box-shadow: var(--ss-shadow); overflow: hidden; }
.ss-platform-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.045), transparent 28%); pointer-events: none; }
.ss-preview-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px; border-bottom: 1px solid var(--ss-border); }
.ss-preview-title { display: flex; align-items: center; gap: 9px; font-size: .83rem; font-weight: 750; }
.ss-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-green); box-shadow: 0 0 0 5px rgba(56,201,135,.1); }
.ss-secure-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--ss-border); border-radius: 999px; color: var(--ss-muted); font-size: .75rem; font-weight: 750; }
.ss-preview-body { padding: 18px; }
.ss-preview-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ss-preview-stat { min-width: 0; padding: 14px; border: 1px solid var(--ss-border-soft); border-radius: 12px; background: rgba(8,12,19,.62); }
.ss-preview-stat span { display: block; color: var(--ss-muted); font-size: .75rem; }
.ss-preview-stat strong { display: block; margin-top: 7px; font-size: 1.08rem; letter-spacing: -.02em; }
.ss-preview-license { margin-top: 14px; border: 1px solid var(--ss-border-soft); border-radius: 14px; background: rgba(8,12,19,.62); overflow: hidden; }
.ss-preview-license-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--ss-border-soft); color: var(--ss-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.ss-preview-row { display: grid; grid-template-columns: 1.35fr .85fr .7fr; gap: 12px; align-items: center; padding: 14px 15px; border-bottom: 1px solid var(--ss-border-soft); }
.ss-preview-row:last-child { border-bottom: 0; }
.ss-preview-row strong, .ss-preview-row small { display: block; }
.ss-preview-row strong { font-size: .82rem; }
.ss-preview-row small { margin-top: 3px; color: var(--ss-muted); font-size: .75rem; }
.ss-status-pill { width: fit-content; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(56,201,135,.28); background: rgba(56,201,135,.08); color: #86e6b6; font-size: .75rem; font-weight: 800; }
.ss-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-green); }
.ss-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 13px 15px; border: 1px solid rgba(91,140,255,.2); border-radius: 12px; background: rgba(91,140,255,.07); color: var(--ss-text-soft); font-size: .75rem; }
.ss-preview-footer i { color: #8fb0ff; }
.ss-capability-strip { border-block: 1px solid var(--ss-border-soft); background: rgba(11,16,25,.7); }
.ss-capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ss-capability { min-height: 104px; display: flex; align-items: center; gap: 13px; padding: 22px; border-right: 1px solid var(--ss-border-soft); }
.ss-capability:last-child { border-right: 0; }
.ss-capability-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--ss-border); border-radius: 11px; background: var(--ss-surface); color: var(--ss-accent-bright); }
.ss-capability strong, .ss-capability span { display: block; }
.ss-capability strong { font-size: .83rem; }
.ss-capability span { margin-top: 4px; color: var(--ss-muted); font-size: .75rem; line-height: 1.5; }
.ss-section { padding: 88px 0; }
.ss-section--soft { border-block: 1px solid var(--ss-border-soft); background: var(--ss-bg-soft); }
.ss-section-heading { max-width: 720px; margin-bottom: 34px; }
.ss-section-heading--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.ss-section-heading h2 { margin: 11px 0 9px; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.12; letter-spacing: -.03em; }
.ss-section-heading p { margin: 0; color: var(--ss-muted); line-height: 1.7; }
.ss-section-link { color: var(--ss-accent-bright); text-decoration: none; font-size: .85rem; font-weight: 800; white-space: nowrap; }
.ss-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ss-feature-card { min-height: 238px; position: relative; padding: 24px; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); background: var(--ss-surface); overflow: hidden; }
.ss-feature-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -55px; bottom: -55px; border-radius: 50%; background: rgba(240,185,11,.04); }
.ss-feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ss-border); border-radius: 12px; background: var(--ss-surface-2); color: var(--ss-accent-bright); }
.ss-feature-card h3 { margin: 21px 0 9px; font-size: 1.02rem; letter-spacing: -.02em; }
.ss-feature-card p { margin: 0; color: var(--ss-muted); font-size: .84rem; line-height: 1.68; }
.ss-feature-tag { display: inline-flex; margin-top: 18px; color: var(--ss-text-soft); font-size: .75rem; font-weight: 750; }
.ss-workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: workflow; }
.ss-workflow-card { padding: 25px; border-top: 2px solid var(--ss-border); background: linear-gradient(180deg, rgba(17,23,34,.7), rgba(17,23,34,.15)); }
.ss-workflow-card span { color: var(--ss-accent); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.ss-workflow-card h3 { margin: 22px 0 9px; font-size: 1.08rem; }
.ss-workflow-card p { margin: 0; color: var(--ss-muted); font-size: .84rem; line-height: 1.68; }
.ss-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ss-product-card, .ss-plan-card { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); background: var(--ss-surface); }
.ss-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ss-chip { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border: 1px solid var(--ss-border); border-radius: 999px; background: var(--ss-surface-2); color: var(--ss-text-soft); font-size: .75rem; font-weight: 800; }
.ss-product-card h3, .ss-plan-card h3 { margin: 19px 0 9px; font-size: 1.08rem; }
.ss-product-card p { flex: 1; margin: 0 0 20px; color: var(--ss-muted); font-size: .83rem; line-height: 1.68; }
.ss-risk-label { color: var(--ss-muted); font-size: .7rem; }
.ss-price { display: flex; align-items: baseline; gap: 7px; margin: 17px 0; }
.ss-price strong { font-size: 2.1rem; letter-spacing: -.03em; }
.ss-price span { color: var(--ss-muted); font-size: .78rem; }
.ss-plan-card ul { flex: 1; display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; color: var(--ss-text-soft); font-size: .8rem; }
.ss-plan-card li { display: flex; align-items: flex-start; gap: 8px; }
.ss-plan-card li i { margin-top: 3px; color: var(--ss-green); }
.ss-plan-card.is-featured { border-color: rgba(240,185,11,.58); box-shadow: 0 0 0 1px rgba(240,185,11,.12); }
.ss-plan-badge { position: absolute; top: -12px; right: 18px; padding: 6px 10px; border-radius: 999px; background: var(--ss-accent); color: #1b1500; font-size: .75rem; font-weight: 850; }
.ss-cta { padding: 24px 0 88px; }
.ss-cta-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center; padding: 38px; border: 1px solid rgba(240,185,11,.28); border-radius: var(--ss-radius-lg); background: linear-gradient(125deg, rgba(240,185,11,.09), rgba(17,23,34,.92) 48%, rgba(91,140,255,.07)); }
.ss-cta-panel h2 { margin: 0 0 9px; font-size: clamp(1.65rem, 3vw, 2.5rem); letter-spacing: -.03em; }
.ss-cta-panel p { max-width: 680px; margin: 0; color: var(--ss-muted); line-height: 1.7; }
.ss-risk-panel { display: flex; align-items: flex-start; gap: 13px; margin-top: 18px; padding: 17px 19px; border: 1px solid rgba(246,173,60,.22); border-radius: 12px; background: rgba(246,173,60,.06); color: var(--ss-muted); font-size: .76rem; line-height: 1.65; }
.ss-risk-panel i { margin-top: 3px; color: var(--ss-amber); }
.ss-public-footer { border-top: 1px solid var(--ss-border-soft); background: #070a10; }
.ss-footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 44px; padding-top: 54px; padding-bottom: 42px; }
.ss-footer-brand-block p { max-width: 390px; margin: 17px 0 0; color: var(--ss-muted); font-size: .78rem; line-height: 1.68; }
.ss-footer-grid h2 { margin: 4px 0 15px; color: var(--ss-text-soft); font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; }
.ss-footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: 10px; }
.ss-footer-grid > div:not(:first-child) a { color: var(--ss-muted); text-decoration: none; font-size: .76rem; }
.ss-footer-grid > div:not(:first-child) a:hover { color: var(--ss-text); }
.ss-footer-bottom { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--ss-border-soft); color: var(--ss-muted-2); font-size: .75rem; }
body.ss-app-body, body.authenticated-user { background: var(--ss-bg) !important; color: var(--ss-text) !important; }
.ss-app-shell { min-height: 100vh; }
.ss-app-sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 1000;
width: var(--ss-sidebar);
display: flex;
flex-direction: column;
padding: 18px 14px;
border-right: 1px solid var(--ss-border-soft);
background: #0b0f17;
}
.ss-app-sidebar__brand { min-height: 54px; display: flex; align-items: center; gap: 11px; padding: 0 10px 13px; border-bottom: 1px solid var(--ss-border-soft); color: var(--ss-text); text-decoration: none; font-size: .98rem; font-weight: 800; }
.ss-app-sidebar__brand img { width: 30px; height: 30px; }
.ss-app-nav { flex: 1; overflow-y: auto; padding: 15px 0; scrollbar-width: thin; }
.ss-app-nav__label { margin: 18px 11px 7px; color: var(--ss-muted-2); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.ss-app-nav__link { min-height: 43px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 9px; margin: 3px 0; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; color: #aeb8c9; text-decoration: none; font-size: .81rem; font-weight: 650; transition: .15s ease; }
.ss-app-nav__link i:first-child { color: #77849a; font-size: .9rem; text-align: center; }
.ss-app-nav__link:hover { border-color: var(--ss-border-soft); background: var(--ss-surface); color: var(--ss-text); }
.ss-app-nav__link:hover i:first-child { color: var(--ss-text-soft); }
.ss-app-nav__link.is-active { border-color: rgba(240,185,11,.25); background: var(--ss-accent-soft); color: var(--ss-accent-bright); }
.ss-app-nav__link.is-active i:first-child { color: var(--ss-accent); }
.ss-app-nav__badge { padding: 3px 6px; border-radius: 999px; background: var(--ss-surface-2); color: var(--ss-muted); font-size: .75rem; font-weight: 800; }
.ss-app-profile { padding: 12px 8px 3px; border-top: 1px solid var(--ss-border-soft); }
.ss-app-profile__row { display: grid; grid-template-columns: 36px 1fr auto; gap: 9px; align-items: center; }
.ss-app-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #3a465f; border-radius: 11px; background: var(--ss-surface-2); color: var(--ss-accent-bright); font-size: .8rem; font-weight: 850; text-transform: uppercase; }
.ss-app-profile strong, .ss-app-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-app-profile strong { font-size: .76rem; }
.ss-app-profile small { margin-top: 2px; color: var(--ss-muted); font-size: .75rem; }
.ss-app-profile a, .ss-app-profile button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ss-muted); text-decoration: none; cursor: pointer; }
.ss-app-profile a:hover, .ss-app-profile button:hover { background: var(--ss-surface-2); color: var(--ss-text); }
.ss-app-frame { min-height: 100vh; margin-left: var(--ss-sidebar); }
.ss-app-topbar { position: sticky; top: 0; z-index: 850; min-height: var(--ss-topbar); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--ss-border-soft); background: rgba(8,11,18,.88); backdrop-filter: blur(16px); }
.ss-app-topbar__left { min-width: 0; display: flex; align-items: center; gap: 12px; }
.ss-app-mobile-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--ss-border); border-radius: 10px; background: var(--ss-surface); color: var(--ss-text); }
.ss-app-topbar__title strong, .ss-app-topbar__title span { display: block; }
.ss-app-topbar__title strong { font-size: .87rem; }
.ss-app-topbar__title span { margin-top: 2px; color: var(--ss-muted); font-size: .75rem; }
.ss-app-topbar__actions { display: flex; align-items: center; gap: 8px; }
.ss-icon-button { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ss-border); border-radius: 10px; background: var(--ss-surface); color: var(--ss-muted); cursor: pointer; text-decoration: none; }
.ss-icon-button:hover { background: var(--ss-surface-2); color: var(--ss-text); }
.ss-notification-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--ss-bg); border-radius: 999px; background: var(--ss-red); color: #fff; font-size: .75rem; font-weight: 850; }
.ss-app-content { min-height: calc(100vh - var(--ss-topbar)); }
.ss-app-content > .alert { margin: 16px 28px 0; border-radius: 10px; }
.ss-app-footer { margin-left: var(--ss-sidebar); padding: 24px 28px; border-top: 1px solid var(--ss-border-soft); color: var(--ss-muted-2); font-size: .75rem; }
.ss-app-overlay { display: none; }
.pro-page { width: 100% !important; color: var(--ss-text) !important; }
.pro-workspace { max-width: 1480px !important; margin: 0 auto !important; padding: 34px clamp(20px, 3vw, 42px) 70px !important; }
.pro-workspace-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 30px !important; margin-bottom: 25px !important; }
.pro-workspace h1 { max-width: 850px; margin: 10px 0 8px !important; font-size: clamp(1.9rem, 3.2vw, 3rem) !important; line-height: 1.08 !important; letter-spacing: -.03em !important; }
.pro-workspace-head p { margin: 0; color: var(--ss-muted) !important; font-size: .88rem; line-height: 1.65; }
.pro-eyebrow { color: var(--ss-accent-bright) !important; font-size: .75rem !important; font-weight: 850 !important; letter-spacing: .12em !important; }
.pro-actions { display: flex; flex-wrap: wrap; gap: 10px !important; }
.pro-btn { min-height: 42px !important; padding: 10px 15px !important; border-radius: 10px !important; font-size: .78rem !important; font-weight: 800 !important; box-shadow: none !important; }
.pro-btn--primary { background: var(--ss-accent) !important; border-color: var(--ss-accent) !important; color: #191300 !important; }
.pro-btn--secondary { background: var(--ss-surface) !important; border-color: var(--ss-border) !important; color: var(--ss-text) !important; }
.pro-kpi-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 14px !important; margin-bottom: 16px !important; }
.pro-kpi, .pro-card, .pro-panel { border: 1px solid var(--ss-border) !important; border-radius: var(--ss-radius) !important; background: var(--ss-surface) !important; box-shadow: none !important; backdrop-filter: none !important; }
.pro-kpi { position: relative; min-height: 132px; padding: 19px !important; overflow: hidden; }
.pro-kpi::after { content: ""; position: absolute; width: 74px; height: 74px; right: -31px; bottom: -31px; border-radius: 50%; background: rgba(240,185,11,.045); }
.pro-kpi span, .pro-kpi small { color: var(--ss-muted) !important; font-size: .75rem !important; }
.pro-kpi strong { margin: 10px 0 7px !important; font-size: 1.75rem !important; letter-spacing: -.03em; }
.pro-workspace-grid { display: grid !important; grid-template-columns: minmax(0, 1.8fr) minmax(280px, .8fr) !important; gap: 16px !important; align-items: start !important; }
.pro-panel { padding: 0 !important; overflow: hidden; }
.pro-panel-head { min-height: 74px; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding: 17px 19px !important; border-bottom: 1px solid var(--ss-border-soft) !important; }
.pro-panel-head h2 { margin: 6px 0 0 !important; font-size: .92rem !important; letter-spacing: -.02em; }
.pro-link { color: var(--ss-accent-bright) !important; font-size: .75rem !important; font-weight: 800 !important; text-decoration: none !important; }
.pro-table-wrap { overflow-x: auto !important; }
.pro-table { width: 100% !important; min-width: 760px !important; border-collapse: collapse !important; }
.pro-table th { padding: 11px 14px !important; border-bottom: 1px solid var(--ss-border-soft) !important; background: rgba(8,11,18,.32); color: var(--ss-muted-2) !important; font-size: .75rem !important; letter-spacing: .08em !important; }
.pro-table td { padding: 14px !important; border-bottom: 1px solid var(--ss-border-soft) !important; color: var(--ss-text-soft) !important; font-size: .75rem !important; vertical-align: middle; }
.pro-table td strong { color: var(--ss-text); font-size: .76rem; }
.pro-table td small { color: var(--ss-muted) !important; font-size: .75rem; }
.pro-table code { padding: 5px 7px !important; border: 1px solid var(--ss-border-soft) !important; border-radius: 7px !important; background: var(--ss-bg) !important; color: var(--ss-text-soft) !important; font-size: .75rem; }
.pro-status { padding: 5px 8px !important; border-radius: 999px !important; font-size: .75rem !important; font-weight: 800 !important; }
.pro-list-item { min-height: 67px; padding: 14px 18px !important; border-bottom: 1px solid var(--ss-border-soft) !important; }
.pro-list-item strong { color: var(--ss-text); font-size: .77rem; }
.pro-list-item span { color: var(--ss-muted) !important; font-size: .75rem !important; }
.pro-empty { padding: 38px 22px !important; color: var(--ss-muted) !important; }
.pro-empty h3 { margin: 12px 0 7px; color: var(--ss-text) !important; font-size: .95rem; }
.pro-empty p { max-width: 520px; margin: 0 auto 17px; font-size: .76rem; line-height: 1.6; }
.pro-quick-links a { min-height: 70px; display: grid !important; grid-template-columns: 34px 1fr 14px !important; gap: 10px !important; align-items: center !important; padding: 13px 17px !important; border-bottom: 1px solid var(--ss-border-soft) !important; color: var(--ss-text-soft) !important; text-decoration: none !important; }
.pro-quick-links a:hover { background: var(--ss-surface-2); }
.pro-quick-links a > i:first-child { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ss-border); border-radius: 9px; color: var(--ss-accent-bright); }
.pro-quick-links strong { font-size: .76rem; }
.pro-quick-links small { color: var(--ss-muted) !important; font-size: .75rem; }
.ss-app-content .container, .ss-app-content .container-fluid { max-width: 1480px; }
.ss-app-content .card, .ss-app-content .ss-card, .ss-app-content .premium-card, .ss-app-content .glass-card-2026, .ss-app-content .ss-panel-neo, .ss-app-content .ss-action-card {
border: 1px solid var(--ss-border) !important;
border-radius: var(--ss-radius) !important;
background: var(--ss-surface) !important;
box-shadow: none !important;
color: var(--ss-text) !important;
backdrop-filter: none !important;
}
.ss-app-content .card-header, .ss-app-content .card-footer { border-color: var(--ss-border-soft) !important; background: rgba(8,11,18,.28) !important; }
.ss-app-content .text-muted { color: var(--ss-muted) !important; }
.ss-app-content .table { color: var(--ss-text-soft) !important; }
.ss-app-content .table > :not(caption) > * > * { border-color: var(--ss-border-soft) !important; }
.ss-app-content .table thead th { color: var(--ss-muted-2) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.ss-app-content .form-control, .ss-app-content .form-select, .ss-app-content textarea {
min-height: 44px;
border: 1px solid var(--ss-border) !important;
border-radius: 10px !important;
background: #0c111a !important;
color: var(--ss-text) !important;
box-shadow: none !important;
}
.ss-app-content .form-control::placeholder, .ss-app-content textarea::placeholder { color: var(--ss-muted-2); }
.ss-app-content .form-control:focus, .ss-app-content .form-select:focus, .ss-app-content textarea:focus { border-color: rgba(240,185,11,.58) !important; box-shadow: 0 0 0 3px rgba(240,185,11,.09) !important; }
.ss-app-content .btn-primary { border-color: var(--ss-accent) !important; background: var(--ss-accent) !important; color: #191300 !important; font-weight: 800; }
.ss-app-content .btn-outline-primary { border-color: rgba(240,185,11,.42) !important; color: var(--ss-accent-bright) !important; }
.ss-app-content .dropdown-menu { border: 1px solid var(--ss-border) !important; border-radius: 12px !important; background: var(--ss-surface) !important; color: var(--ss-text) !important; box-shadow: var(--ss-shadow-sm) !important; }
.ss-app-content .dropdown-item { color: var(--ss-text-soft) !important; }
.ss-app-content .dropdown-item:hover { background: var(--ss-surface-2) !important; color: var(--ss-text) !important; }
@media (max-width: 1180px) {
.ss-hero-grid { grid-template-columns: 1fr; gap: 46px; }
.ss-platform-preview { max-width: 780px; }
.ss-capability-grid { grid-template-columns: repeat(2, 1fr); }
.ss-capability:nth-child(2) { border-right: 0; }
.ss-capability:nth-child(-n+2) { border-bottom: 1px solid var(--ss-border-soft); }
.ss-feature-grid, .ss-card-grid { grid-template-columns: repeat(2, 1fr); }
.pro-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.pro-workspace-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
.ss-public-links, .ss-public-actions { display: none; }
.ss-public-menu-button { display: grid; place-items: center; margin-left: auto; }
.ss-hero { padding: 66px 0 56px; }
.ss-hero h1 { font-size: clamp(2.45rem, 10vw, 4.25rem); }
.ss-feature-grid, .ss-workflow-grid, .ss-card-grid { grid-template-columns: 1fr 1fr; }
.ss-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
.ss-footer-grid > div:last-child { grid-column: 2 / 4; }
.ss-app-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--ss-shadow); }
body.ss-nav-open .ss-app-sidebar { transform: translateX(0); }
.ss-app-frame, .ss-app-footer { margin-left: 0 !important; }
.ss-app-mobile-toggle { display: grid; place-items: center; }
.ss-app-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.55); }
body.ss-nav-open .ss-app-overlay { display: block; }
body.ss-nav-open { overflow: hidden; }
.ss-app-topbar { padding: 0 18px; }
}
@media (max-width: 680px) {
.ss-public-container { width: min(100% - 28px, 1180px); }
.ss-public-nav { min-height: 66px; }
.ss-public-brand { font-size: .94rem; }
.ss-brand-mark { width: 35px; height: 35px; }
.ss-hero { padding-top: 52px; }
.ss-hero h1 { margin-top: 14px; font-size: clamp(2.25rem, 12vw, 3.35rem); line-height: 1.02; }
.ss-hero-copy { font-size: .94rem; }
.ss-hero-actions .ss-button { width: 100%; }
.ss-hero-proof { display: grid; gap: 11px; }
.ss-preview-summary { grid-template-columns: 1fr; }
.ss-preview-row { grid-template-columns: 1fr auto; }
.ss-preview-row > div:nth-child(2) { display: none; }
.ss-capability-grid, .ss-feature-grid, .ss-workflow-grid, .ss-card-grid { grid-template-columns: 1fr; }
.ss-capability { border-right: 0; border-bottom: 1px solid var(--ss-border-soft); }
.ss-capability:last-child { border-bottom: 0; }
.ss-section { padding: 64px 0; }
.ss-section-heading--row { display: block; }
.ss-section-link { display: inline-flex; margin-top: 15px; }
.ss-cta { padding-bottom: 64px; }
.ss-cta-panel { grid-template-columns: 1fr; padding: 26px; }
.ss-cta-panel .ss-button { width: 100%; }
.ss-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
.ss-footer-brand-block { grid-column: 1 / -1; }
.ss-footer-grid > div:last-child { grid-column: auto; }
.ss-footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding: 20px 0; }
.ss-app-topbar__title span { display: none; }
.ss-app-topbar__actions .ss-button { display: none; }
.ss-app-content > .alert { margin-inline: 14px; }
.pro-workspace { padding: 24px 14px 76px !important; }
.pro-workspace-head { display: block !important; }
.pro-workspace-head .pro-actions { margin-top: 18px; }
.pro-workspace-head .pro-actions .pro-btn { flex: 1; }
.pro-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.pro-kpi { min-height: 116px; padding: 15px !important; }
.pro-kpi strong { font-size: 1.5rem !important; }
.pro-panel-head { min-height: 66px; padding: 14px 15px !important; }
.ss-app-footer { padding: 20px 16px; }
}
@media (max-width: 430px) {
.pro-kpi-grid { grid-template-columns: 1fr !important; }
.ss-app-topbar { padding-inline: 12px; }
.ss-app-sidebar { width: min(86vw, 292px); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.ss-app-user-button {
min-height: 42px;
display: grid;
grid-template-columns: 32px minmax(0, 1fr) 12px;
align-items: center;
gap: 9px;
padding: 4px 10px 4px 5px;
border: 1px solid var(--ss-border);
border-radius: 11px;
background: var(--ss-surface);
color: var(--ss-text);
cursor: pointer;
}
.ss-app-user-button:hover { background: var(--ss-surface-2); }
.ss-app-user-button .ss-app-avatar { width: 32px; height: 32px; border-radius: 9px; }
.ss-app-user-button__text { min-width: 0; text-align: left; }
.ss-app-user-button__text strong,
.ss-app-user-button__text small { display: block; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-app-user-button__text strong { font-size: .7rem; }
.ss-app-user-button__text small { margin-top: 1px; color: var(--ss-muted); font-size: .75rem; }
.ss-app-user-button > i { color: var(--ss-muted-2); font-size: .75rem; }
.ss-notification-menu,
.ss-user-menu {
margin-top: 9px !important;
border: 1px solid var(--ss-border) !important;
border-radius: 13px !important;
background: var(--ss-surface) !important;
color: var(--ss-text) !important;
box-shadow: var(--ss-shadow-sm) !important;
overflow: hidden;
}
.ss-notification-menu { width: min(360px, calc(100vw - 24px)); padding: 0 !important; }
.ss-user-menu { min-width: 220px; padding: 7px !important; }
.ss-dropdown-heading { padding: 14px 16px; border-bottom: 1px solid var(--ss-border-soft); color: var(--ss-text); font-size: .76rem; font-weight: 800; }
.ss-dropdown-empty { padding: 26px 16px; color: var(--ss-muted); font-size: .75rem; text-align: center; }
.ss-dropdown-footer { display: block; padding: 12px 16px; border-top: 1px solid var(--ss-border-soft); color: var(--ss-accent-bright); text-decoration: none; font-size: .75rem; font-weight: 800; text-align: center; }
.ss-notification-item { display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--ss-border-soft); color: var(--ss-text-soft); text-decoration: none; }
.ss-notification-item:hover { background: var(--ss-surface-2); color: var(--ss-text); }
.ss-notification-item__dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--ss-accent); }
.ss-notification-item__dot.is-read { background: var(--ss-muted-2); }
.ss-notification-item strong,
.ss-notification-item small,
.ss-notification-item time { display: block; }
.ss-notification-item strong { font-size: .75rem; }
.ss-notification-item small { margin-top: 3px; color: var(--ss-muted); font-size: .75rem; line-height: 1.45; }
.ss-notification-item time { margin-top: 4px; color: var(--ss-muted-2); font-size: .75rem; }
.ss-user-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 8px; color: var(--ss-text-soft) !important; font-size: .75rem; font-weight: 650; }
.ss-user-menu .dropdown-item i { width: 17px; color: var(--ss-muted); text-align: center; }
.ss-user-menu .dropdown-item:hover { background: var(--ss-surface-2) !important; color: var(--ss-text) !important; }
.ss-user-menu .dropdown-divider { border-color: var(--ss-border-soft); }
.ss-user-menu .ss-logout-item { width: 100%; color: #ff9fa8 !important; }
.pro-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pro-kpi-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(240,185,11,.26); border-radius: 10px; background: rgba(240,185,11,.08); color: var(--ss-accent-bright); font-size: .78rem; }
.pro-kpi-icon--success { border-color: rgba(56,201,135,.26); background: rgba(56,201,135,.08); color: #82e2b3; }
.pro-kpi-icon--warning { border-color: rgba(246,173,60,.26); background: rgba(246,173,60,.08); color: #ffd17d; }
.pro-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto; border: 1px solid var(--ss-border); border-radius: 12px; background: var(--ss-surface-2); color: var(--ss-accent-bright); }
.pro-empty-check { display: block; margin-bottom: 8px; color: var(--ss-green); font-size: 1.1rem; }
body:not(.authenticated-user) main { min-height: calc(100vh - 142px); }
body:not(.authenticated-user) main > .container,
body:not(.authenticated-user) main > .container-fluid {
padding-top: 42px;
padding-bottom: 64px;
}
body:not(.authenticated-user) .card {
border: 1px solid var(--ss-border) !important;
border-radius: var(--ss-radius) !important;
background: var(--ss-surface) !important;
color: var(--ss-text) !important;
box-shadow: var(--ss-shadow-sm) !important;
}
body:not(.authenticated-user) .form-control,
body:not(.authenticated-user) .form-select,
body:not(.authenticated-user) textarea {
min-height: 46px;
border: 1px solid var(--ss-border) !important;
border-radius: 10px !important;
background: #0c111a !important;
color: var(--ss-text) !important;
}
body:not(.authenticated-user) .form-control:focus,
body:not(.authenticated-user) .form-select:focus,
body:not(.authenticated-user) textarea:focus {
border-color: rgba(240,185,11,.58) !important;
box-shadow: 0 0 0 3px rgba(240,185,11,.09) !important;
}
body:not(:has(.ss3-workspace)):not(:has(.ss3-auth-page)):not(:has(.ss3-action-page)):not(:has(.ss3-public-hero)) {
background: var(--ss-bg) !important;
color: var(--ss-text) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .container,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .container-fluid {
max-width: 1480px !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .card,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .ss-card,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .premium-card,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .glass-card-2026,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .ss-panel-neo,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .ss-action-card {
border: 1px solid var(--ss-border) !important;
border-radius: var(--ss-radius) !important;
background: var(--ss-surface) !important;
color: var(--ss-text) !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .card-header,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .card-footer,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .ss-panel__head {
border-color: var(--ss-border-soft) !important;
background: rgba(8, 11, 18, .28) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .text-muted,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .ss-muted,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .form-text {
color: var(--ss-muted) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .form-label {
color: var(--ss-text-soft) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .form-control,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .form-select,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content textarea,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .input-group-text {
min-height: 44px !important;
border: 1px solid var(--ss-border) !important;
border-radius: 10px !important;
background: #0c111a !important;
color: var(--ss-text) !important;
box-shadow: none !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .form-control::placeholder,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content textarea::placeholder {
color: var(--ss-muted-2) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .form-control:focus,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .form-select:focus,
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content textarea:focus {
border-color: rgba(240, 185, 11, .58) !important;
box-shadow: 0 0 0 3px rgba(240, 185, 11, .09) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .table {
color: var(--ss-text-soft) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .table > :not(caption) > * > * {
border-color: var(--ss-border-soft) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .table thead th {
color: var(--ss-muted-2) !important;
font-size: .75rem !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .dropdown-menu {
border: 1px solid var(--ss-border) !important;
border-radius: 12px !important;
background: var(--ss-surface) !important;
color: var(--ss-text) !important;
box-shadow: var(--ss-shadow-sm) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .dropdown-item {
color: var(--ss-text-soft) !important;
}
body.authenticated-user:not(:has(.ss3-workspace)):not(:has(.ss3-action-page)) .ss-app-content .dropdown-item:hover {
background: var(--ss-surface-2) !important;
color: var(--ss-text) !important;
}
body:not(.authenticated-user):not(:has(.ss3-auth-page)):not(:has(.ss3-action-page)):not(:has(.ss3-public-hero)) .card {
border: 1px solid var(--ss-border) !important;
border-radius: var(--ss-radius) !important;
background: var(--ss-surface) !important;
color: var(--ss-text) !important;
box-shadow: var(--ss-shadow-sm) !important;
}
body:not(.authenticated-user):not(:has(.ss3-auth-page)):not(:has(.ss3-action-page)):not(:has(.ss3-public-hero)) .form-control,
body:not(.authenticated-user):not(:has(.ss3-auth-page)):not(:has(.ss3-action-page)):not(:has(.ss3-public-hero)) .form-select,
body:not(.authenticated-user):not(:has(.ss3-auth-page)):not(:has(.ss3-action-page)):not(:has(.ss3-public-hero)) textarea {
min-height: 46px !important;
border: 1px solid var(--ss-border) !important;
border-radius: 10px !important;
background: #0c111a !important;
color: var(--ss-text) !important;
box-shadow: none !important;
}
@media (max-width: 680px) {
.ss-app-user-button__text,
.ss-app-user-button > i { display: none; }
.ss-app-user-button { width: 42px; display: grid; grid-template-columns: 1fr; padding: 4px; }
}