html { overflow-x: hidden; scrollbar-gutter: stable; }
body { overflow-x: hidden; }
:root {
--bg: #1A1B23;
--bg-card: #22232D;
--bg-card-hover: #2A2B37;
--border: rgba(255,255,255,0.06);
--border-hover: rgba(255,255,255,0.12);
--text: #E4E4E7;
--text-dim: #A1A1AA;
--text-muted: #52525B;
--white: #F9FAFB;
--accent: #F472B6;
--accent-soft: #EC4899;
--accent-glow: rgba(244,114,182,0.08);
--accent-glow-strong: rgba(244,114,182,0.15);
--neon: 0 0 20px rgba(244,114,182,0.06), 0 0 40px rgba(244,114,182,0.03);
--neon-strong: 0 0 20px rgba(244,114,182,0.1), 0 0 60px rgba(244,114,182,0.05);
--red: #EF4444;
--green: #34D399;
--amber: #FBBF24;
--blue: #60A5FA;
--purple: #F472B6;
--cyan: #22D3EE;
--bg-sidebar: #16171F;
--bg-card-solid: #1E1F28;
--bg-input: rgba(255,255,255,0.05);
--bg-input-hover: rgba(255,255,255,0.08);
--border-subtle: rgba(255,255,255,0.05);
--card-shadow: none;
--grid-line: rgba(255,255,255,0.03);
--chart-grid: rgba(255,255,255,0.07);
--chart-border: #1A1B23;
--scrollbar-bg: rgba(255,255,255,0.08);
--scrollbar-hover: rgba(255,255,255,0.14);
--red-dim: rgba(239,68,68,0.08);
--green-dim: rgba(52,211,153,0.08);
--accent-dim: rgba(244,114,182,0.08);
--accent-bg: rgba(244,114,182,0.12);
--overlay-bg: rgba(0,0,0,0.6);
--modal-bg: #22232D;
--blue-dim: rgba(96,165,250,0.08);
--cyan-dim: rgba(34,211,238,0.08);
--amber-dim: rgba(251,191,36,0.08);
--text-dim-bg: rgba(161,161,170,0.08);
--accent-faint: rgba(244,114,182,0.04);
--accent-border: rgba(244,114,182,0.25);
--accent-border-hover: rgba(244,114,182,0.4);
--accent-focus: rgba(244,114,182,0.3);
--accent-border-soft: rgba(244,114,182,0.2);
--accent-mid: rgba(244,114,182,0.18);
}
body.light-mode, html.light-mode body {
--bg: #F5F0EB;
--bg-card: rgba(255,255,255,0.7);
--bg-card-hover: rgba(255,255,255,0.9);
--border: rgba(0,0,0,0.08);
--border-hover: rgba(0,0,0,0.15);
--text: #1C1917;
--text-dim: #78716C;
--text-muted: #A8A29E;
--white: #1C1917;
--accent: #7F1D1D;
--accent-soft: #991B1B;
--accent-glow: rgba(127,29,29,0.06);
--accent-glow-strong: rgba(127,29,29,0.12);
--neon: 0 2px 8px rgba(0,0,0,0.04);
--neon-strong: 0 2px 12px rgba(0,0,0,0.08);
--red: #DC2626;
--green: #059669;
--amber: #D97706;
--blue: #2563EB;
--purple: #7F1D1D;
--cyan: #0891B2;
--bg-sidebar: #EDE8E3;
--bg-card-solid: #FFFFFF;
--bg-input: rgba(0,0,0,0.04);
--bg-input-hover: rgba(0,0,0,0.07);
--border-subtle: rgba(0,0,0,0.06);
--card-shadow: 0 1px 3px rgba(0,0,0,0.06);
--grid-line: rgba(0,0,0,0.04);
--chart-grid: rgba(0,0,0,0.08);
--chart-border: #FFFFFF;
--scrollbar-bg: rgba(0,0,0,0.08);
--scrollbar-hover: rgba(0,0,0,0.15);
--red-dim: rgba(220,38,38,0.06);
--green-dim: rgba(5,150,105,0.06);
--accent-dim: rgba(127,29,29,0.06);
--accent-bg: rgba(127,29,29,0.1);
--overlay-bg: rgba(0,0,0,0.3);
--modal-bg: #FFFFFF;
--blue-dim: rgba(37,99,235,0.06);
--cyan-dim: rgba(8,145,178,0.06);
--amber-dim: rgba(217,119,6,0.06);
--text-dim-bg: rgba(120,113,108,0.06);
--accent-faint: rgba(127,29,29,0.03);
--accent-border: rgba(127,29,29,0.25);
--accent-border-hover: rgba(127,29,29,0.4);
--accent-focus: rgba(127,29,29,0.3);
--accent-border-soft: rgba(127,29,29,0.2);
--accent-mid: rgba(127,29,29,0.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
/* ═══ Global button press animation ═══ */
.btn-primary:active, .btn-secondary:active, .btn-danger:active,
.hero-cta-btn:active, .hero-login-btn:active,
.hero-nav-cta:active, .pricing-plan-btn:active,
.pricing-toggle-btn:active, .nav-item:active,
.sfx-mute-btn:active, .logout-link:active,
.todo-add-btn:active, .show-more-btn:active,
.btn-sync-products:active, .compare-toggle:active,
.tab-btn:active {
transform: scale(0.95); transition: transform 0.1s ease;
}
/* ═══ SVG Icons ═══ */
.icon {
width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8;
fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }
.icon-2xl { width: 32px; height: 32px; }
/* ═══ Layout ═══ */
.layout { display: flex; min-height: 100vh; overflow-x: hidden; }
/* ═══ Sidebar ═══ */
.sidebar {
width: 250px; background: var(--bg-sidebar);
border-right: 1px solid var(--border-subtle);
padding: 24px 16px; position: fixed; height: 100vh;
overflow-y: auto; display: flex; flex-direction: column;
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.sidebar-brand {
display: flex; align-items: center; gap: 10px;
font-size: 1rem; font-weight: 700; color: var(--white);
padding: 0 8px; margin-bottom: 20px;
}
.sidebar-brand .icon { opacity: 0.8; color: var(--accent); }
.sidebar-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 12px 0; }
.sidebar-label {
font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 1.8px; color: var(--text-muted); margin: 12px 8px 8px;
}
.sidebar-store {
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 12px; margin: 0 4px 6px;
display: flex; align-items: center; gap: 8px;
}
.sidebar-store-name { color: var(--white); font-weight: 500; font-size: 0.85rem; }
/* Store selector in sidebar — uses custom-select system */
.sidebar-store-wrap { margin: 0 4px 6px; }
.sidebar-store-wrap .custom-select-wrap { display: block; width: 100%; }
.sidebar-store-wrap .custom-select-btn {
background: var(--bg-input); border-color: var(--border);
padding: 8px 10px; font-size: 0.82rem; min-width: 0; width: 100%;
}
.sidebar-store-wrap .custom-select-btn:hover { border-color: var(--accent-glow-strong); background: var(--accent-glow); }
.sidebar-store-wrap .custom-select-btn .cs-label { font-weight: 500; }
.sidebar-meta { color: var(--text-muted); font-size: 0.72rem; padding: 0 12px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.sidebar-meta .icon { width: 12px; height: 12px; }
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: 10px;
color: var(--text-dim); font-weight: 500; font-size: 0.85rem;
cursor: pointer; transition: all 0.2s; margin: 1px 4px;
}
.nav-item:hover { background: var(--accent-dim); color: var(--text); }
.nav-item.active { background: var(--accent-bg); color: var(--white); border: 1px solid var(--accent-bg); }
.sidebar-bottom { margin-top: auto; padding: 0 8px; }
.sfx-mute-btn {
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 8px; padding: 6px 10px; color: var(--text-dim);
cursor: pointer; display: flex; align-items: center; gap: 6px;
font-size: 0.72rem; width: 100%; margin-bottom: 8px;
transition: all 0.2s;
}
.sfx-mute-btn:hover { background: var(--bg-input-hover); color: var(--text); }
.sfx-mute-btn.muted { color: var(--text-muted); }
.sfx-mute-btn .icon { width: 14px; height: 14px; }
.logout-link {
display: flex; align-items: center; gap: 6px;
color: var(--red); font-size: 0.78rem; font-weight: 500;
cursor: pointer; padding: 6px 10px; border-radius: 8px;
transition: all 0.2s; margin-top: 4px;
}
.logout-link:hover { color: var(--red); background: rgba(239,68,68,0.06); }
.logout-link .icon { width: 14px; height: 14px; }
.sidebar-version { color: var(--text-muted); font-size: 0.7rem; }
/* ═══ Main ═══ */
.main { margin-left: 250px; flex: 1; padding: 28px 40px 100px; max-width: 1440px; position: relative; z-index: 1; min-height: 100vh; }
/* ═══ Full-width grid background ═══ */
.main-bg {
position: fixed; top: 0; left: 250px; right: 0; bottom: 0;
pointer-events: none; z-index: 0;
background-color: var(--bg);
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 64px 64px;
}
/* ═══ Section Labels ═══ */
.section-label {
font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 2px; color: var(--accent); margin-bottom: 14px;
}
.page-title {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: 2.15rem; font-weight: 400; color: var(--white);
letter-spacing: -0.3px; margin-bottom: 24px;
}
.section-label + .page-title { margin-top: -6px; }
/* ═══ Divider ═══ */
.divider { border: none; border-top: 1px solid var(--border-subtle); margin: 28px 0; }
/* ═══ Section Title (inside cards) ═══ */
.section-title { font-size: 1.05rem; font-weight: 700; color: var(--white); }
/* ═══ Form Labels ═══ */
.form-label {
display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-dim);
margin-bottom: 8px; letter-spacing: 0.3px;
}
/* ═══ KPI Cards ═══ */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; position: relative; z-index: 1; }
.kpi-card {
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 16px; padding: 20px 20px;
box-shadow: 0 4px 24px rgba(0,0,0,0.2);
transition: all 0.25s; position: relative;
overflow: hidden;
}
.kpi-card::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.6) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.kpi-card::after {
content: ''; position: absolute;
inset: 1.5px; border-radius: 15px;
background: var(--bg-card-solid);
z-index: 0;
}
.kpi-card > * { position: relative; z-index: 1; }
.kpi-card:hover::before { opacity: 1; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
@keyframes card-border-spin { to { transform: rotate(360deg); } }
.kpi-icon-wrap {
width: 34px; height: 34px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: var(--kpi-glow, var(--accent-glow));
border: 1px solid var(--kpi-glow-border, var(--accent-glow-strong));
}
.kpi-icon-wrap .icon { width: 15px; height: 15px; color: var(--kpi-color, var(--accent)); }
/* Tooltip */
.kpi-help {
position: absolute; top: 12px; right: 14px;
width: 18px; height: 18px; border-radius: 50%;
border: 1px solid var(--scrollbar-bg);
background: var(--bg-input);
display: flex; align-items: center; justify-content: center;
font-size: 0.65rem; font-weight: 700; color: var(--text-muted);
cursor: help; transition: all 0.2s; z-index: 2;
}
.kpi-help:hover { background: var(--chart-grid); color: var(--text-dim); border-color: rgba(255,255,255,0.12); }
.kpi-tooltip {
position: absolute; top: 36px; right: -10px;
background: var(--modal-bg); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 14px;
min-width: 260px; max-width: 320px;
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: all 0.2s; z-index: 999; pointer-events: none;
}
.kpi-help-wrap { position: absolute; top: 0; right: 0; z-index: 10; }
.kpi-help-wrap:hover .kpi-help { background: var(--chart-grid); color: var(--text-dim); border-color: rgba(255,255,255,0.12); }
.kpi-help-wrap:hover .kpi-tooltip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.tt-title { font-size: 0.72rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.tt-desc { font-size: 0.72rem; color: var(--text-dim); line-height: 1.45; margin-bottom: 6px; }
.tt-calc { font-size: 0.7rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; background: var(--bg-input); border-radius: 6px; padding: 6px 8px; }
/* TVA card muted tint */
.kpi-card.vat-card {
background: var(--bg-input);
border-color: rgba(82,82,91,0.1);
}
.kpi-card.vat-card:hover { border-color: rgba(82,82,91,0.2); }
.kpi-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kpi-header .icon { color: var(--text-dim); }
.kpi-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.kpi-value { font-size: 1.65rem; font-weight: 800; color: var(--white); line-height: 1; }
.kpi-sub { font-size: 0.8rem; margin-top: 6px; font-weight: 500; color: var(--text-dim); }
/* ═══ Metric Cards ═══ */
.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
.metric-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 14px; padding: 16px 18px;
transition: all 0.2s; position: relative; overflow: hidden;
}
.metric-card::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.metric-card::after {
content: ''; position: absolute; inset: 1.5px; border-radius: 13px; background: var(--bg-card-solid); z-index: 0;
}
.metric-card > * { position: relative; z-index: 1; }
.metric-card:hover::before { opacity: 1; }
.metric-card:hover { transform: translateY(-1px); }
.metric-label { font-size: 0.68rem; font-weight: 500; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.metric-value { font-size: 1.2rem; font-weight: 700; color: var(--text); }
/* ═══ P&L ═══ */
.pnl-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 20px;
box-shadow: 0 4px 24px rgba(0,0,0,0.2);
position: relative; overflow: hidden;
}
.pnl-card::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.pnl-card::after {
content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0;
}
.pnl-card > * { position: relative; z-index: 1; }
.pnl-card:hover::before { opacity: 1; }
.pnl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .pnl-grid { grid-template-columns: 1fr; } }
.market-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; margin:2px 0; }
.market-row:nth-child(odd) { background:var(--bg-input); }
.market-flag { font-size:1.2rem; width:24px; text-align:center; }
.market-name { font-size:0.85rem; color:var(--text); min-width:36px; }
.market-bar-wrap { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.market-bar { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent-soft)); transition:width .5s ease; }
.market-value { font-family:'JetBrains Mono',monospace; font-size:0.82rem; font-weight:600; color:var(--text); min-width:80px; text-align:right; }
.market-pct { font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--text-muted); min-width:44px; text-align:right; }
.pnl-row {
display: flex; justify-content: space-between; align-items: center;
padding: 9px 14px; border-radius: 8px; margin: 1px 0;
}
.pnl-row:nth-child(odd) { background: var(--bg-input); }
.pnl-total {
background: var(--accent-glow) !important;
border: 1px solid var(--accent-bg);
border-radius: 10px !important; margin-top: 4px;
}
.pnl-label { color: var(--text); font-size: 0.85rem; }
.pnl-right { display: flex; align-items: center; gap: 12px; }
.pnl-value { font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.pnl-pct { color: var(--text-muted); font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; min-width: 50px; text-align: right; }
/* ═══ Charts ═══ */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 22px;
box-shadow: 0 4px 24px rgba(0,0,0,0.2);
position: relative; overflow: hidden;
}
.chart-card::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.chart-card::after {
content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0;
}
.chart-card > * { position: relative; z-index: 1; }
.chart-card:hover::before { opacity: 1; }
.chart-title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.chart-title .icon { color: var(--text-dim); }
.chart-container { position: relative; height: 270px; }
/* ═══ Tabs ═══ */
.tabs-bar {
display: flex; gap: 2px; background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 12px; padding: 3px; margin-bottom: 16px; width: fit-content;
}
.tab-btn {
border: none; background: transparent;
border-radius: 10px; padding: 7px 18px;
font-family: 'DM Sans', sans-serif; font-weight: 500;
font-size: 0.82rem; color: var(--text-dim);
cursor: pointer; transition: all 0.2s;
display: flex; align-items: center; gap: 6px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { background: var(--accent-bg); color: var(--white); border: 1px solid var(--accent-bg); }
.tab-btn .icon { width: 14px; height: 14px; }
/* ═══ Evo ═══ */
.evo-card {
background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 16px; padding: 22px;
position: relative; overflow: hidden;
}
.evo-card::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.evo-card::after {
content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0;
}
.evo-card > * { position: relative; z-index: 1; }
.evo-card:hover::before { opacity: 1; }
.evo-chart { position: relative; height: 300px; }
/* ═══ Table ═══ */
.table-wrap {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; overflow: hidden;
position: relative;
}
.table-wrap::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.table-wrap::after {
content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0;
}
.table-wrap > * { position: relative; z-index: 1; }
.table-wrap:hover::before { opacity: 1; }
table { width: 100%; border-collapse: collapse; }
th {
text-align: left; padding: 13px 16px;
font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.8px; color: var(--text-muted);
background: var(--bg-input);
border-bottom: 1px solid var(--border-subtle);
}
td {
padding: 12px 16px; font-size: 0.85rem; color: var(--text);
border-bottom: 1px solid var(--border-subtle);
}
tr:hover td { background: rgba(255,255,255,0.015); }
.mono { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; }
.green { color: var(--green); }
.red { color: var(--red); }
.amber { color: var(--amber); }
/* ═══ To-Do ═══ */
.todo-layout { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.todo-add-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 24px; position: relative; overflow: hidden;
}
.todo-add-card::before {
content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite; opacity: 0; transition: opacity 0.3s;
}
.todo-add-card::after { content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0; }
.todo-add-card > * { position: relative; z-index: 1; }
.todo-add-card:hover::before { opacity: 1; }
.todo-input-wrap { display: flex; gap: 10px; margin-top: 14px; }
.todo-input {
flex: 1; padding: 12px 18px;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 50px; color: var(--white);
font-family: 'DM Sans', sans-serif; font-size: 0.88rem;
outline: none; transition: all 0.3s;
}
.todo-input:focus {
border-color: var(--accent-focus);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.todo-input::placeholder { color: var(--text-muted); }
.todo-add-btn {
width: 44px; height: 44px; border-radius: 50%;
background: var(--accent-dim);
border: 1px solid var(--accent-border);
color: var(--accent); cursor: pointer; transition: all 0.3s;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.todo-add-btn:hover {
border-color: var(--accent-border-hover); color: var(--accent-soft);
background: var(--accent-glow-strong);
}
.todo-add-btn .icon { width: 18px; height: 18px; }
.todo-priority { display: flex; gap: 6px; margin-top: 12px; }
.todo-prio-btn {
padding: 5px 14px; border-radius: 50px; font-size: 0.72rem; font-weight: 600;
border: 1px solid var(--border); background: transparent;
color: var(--text-muted); cursor: pointer; transition: all 0.2s;
font-family: 'DM Sans', sans-serif;
}
.todo-prio-btn.selected, .todo-prio-btn:hover { border-color: var(--prio-color); color: var(--prio-color); background: var(--prio-bg); }
.todo-list-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 24px; position: relative; overflow: hidden;
}
.todo-list-card::before {
content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite; opacity: 0; transition: opacity 0.3s;
}
.todo-list-card::after { content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0; }
.todo-list-card > * { position: relative; z-index: 1; }
.todo-list-card:hover::before { opacity: 1; }
.todo-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.todo-tab {
padding: 6px 16px; border-radius: 50px; font-size: 0.78rem; font-weight: 600;
border: 1px solid var(--border); background: transparent;
color: var(--text-muted); cursor: pointer; transition: all 0.2s;
font-family: 'DM Sans', sans-serif; display: flex; align-items: center; gap: 6px;
}
.todo-tab.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-bg); }
.todo-count {
background: var(--accent-glow-strong); color: var(--accent); font-size: 0.65rem;
padding: 1px 7px; border-radius: 50px; font-weight: 700;
}
.todo-item {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px; border-radius: 12px; margin: 4px 0;
border: 1px solid var(--border-subtle);
transition: all 0.3s; cursor: default;
}
.todo-item:hover { background: var(--bg-input); }
.todo-check {
width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
border: 2px solid var(--border-hover); background: transparent;
cursor: pointer; transition: all 0.3s; position: relative;
display: flex; align-items: center; justify-content: center;
}
.todo-check:hover { border-color: var(--accent); }
.todo-check .icon { width: 12px; height: 12px; opacity: 0; transition: all 0.3s; color: #FFFFFF; }
.todo-item.completing .todo-check {
background: linear-gradient(135deg, var(--accent), var(--accent-soft));
border-color: var(--accent);
animation: check-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.todo-item.completing .todo-check .icon { opacity: 1; }
.todo-item.completing .todo-text { text-decoration: line-through; color: var(--text-muted); }
.todo-item.completing { opacity: 0.5; transform: translateX(8px); }
@keyframes check-pop {
0% { transform: scale(1); }
40% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes todo-fadeout {
0% { opacity: 1; max-height: 80px; margin: 4px 0; padding: 14px 16px; }
100% { opacity: 0; max-height: 0; margin: 0; padding: 0 16px; overflow: hidden; }
}
.todo-text { flex: 1; color: var(--text); font-size: 0.9rem; font-weight: 500; }
.todo-prio-tag {
padding: 2px 10px; border-radius: 50px; font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
}
.todo-time { color: var(--text-muted); font-size: 0.72rem; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.todo-done-item {
display: flex; align-items: center; gap: 14px;
padding: 10px 16px; border-radius: 10px; margin: 2px 0;
}
.todo-done-check {
width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
background: var(--green-dim); border: none;
display: flex; align-items: center; justify-content: center;
}
.todo-done-check .icon { width: 11px; height: 11px; color: var(--green); }
.todo-done-text { flex: 1; color: var(--text-muted); font-size: 0.85rem; text-decoration: line-through; }
.todo-done-time { color: var(--text-muted); font-size: 0.7rem; font-family: 'JetBrains Mono', monospace; }
.todo-empty {
text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 0.85rem;
}
.todo-empty-icon { font-size: 2rem; margin-bottom: 10px; opacity: 0.4; }
/* ═══ Todo Gamification ═══ */
.todo-assign-btn {
padding: 5px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 600;
border: 1px solid var(--accent-glow-strong); background: transparent;
color: var(--text-dim); cursor: pointer; transition: all 0.2s;
font-family: 'DM Sans', sans-serif;
}
.todo-assign-btn.selected { border-color: var(--accent-focus); color: var(--accent); background: var(--accent-glow); }
.todo-assign-tag {
padding: 2px 8px; border-radius: 6px; font-size: 0.68rem; font-weight: 600;
background: var(--accent-glow); color: var(--accent); white-space: nowrap;
}
.todo-filter-user { display: flex; gap: 4px; }
.todo-filter-btn {
padding: 4px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
border: 1px solid var(--border); background: transparent;
color: var(--text-muted); cursor: pointer; transition: all 0.2s;
font-family: 'DM Sans', sans-serif;
}
.todo-filter-btn.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-glow-strong); }
.todo-timer {
font-size: 0.7rem; font-family: 'JetBrains Mono', monospace;
color: var(--text-dim); white-space: nowrap;
padding: 2px 8px; border-radius: 6px;
background: var(--bg-input);
}
.todo-timer.late {
color: var(--red); font-weight: 700;
background: rgba(239,68,68,0.08);
}
.todo-item.todo-late { border-color: rgba(239,68,68,0.15) !important; background: rgba(239,68,68,0.03); }
/* XP Profiles */
.xp-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.xp-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 20px 22px;
position: relative; overflow: hidden;
}
.xp-card::before {
content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.4) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite; opacity: 0; transition: opacity 0.3s;
}
.xp-card::after { content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0; }
.xp-card > * { position: relative; z-index: 1; }
.xp-card:hover::before { opacity: 1; }
.xp-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.xp-name { font-weight: 800; font-size: 1.1rem; color: var(--white); }
.rank-badge {
padding: 3px 10px; border-radius: 8px; font-size: 0.72rem; font-weight: 700;
border: 1px solid; letter-spacing: 0.5px; text-transform: uppercase;
}
.xp-level-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.xp-level { font-size: 0.85rem; font-weight: 700; color: var(--white); }
.xp-total { font-size: 0.78rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.xp-bar-wrap {
width: 100%; height: 8px; background: var(--bg-input);
border-radius: 4px; overflow: hidden;
}
.xp-bar {
height: 100%; border-radius: 4px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 12px currentColor;
}
.xp-bar-label { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; text-align: right; font-family: 'JetBrains Mono', monospace; }
/* Todo Stats */
.todo-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.todo-stat-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 18px 20px;
}
.stat-sub { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }
/* Time Tracker */
.time-stat-mini {
display: flex; flex-direction: column; gap: 2px;
background: var(--accent-glow); border: 1px solid var(--accent-bg);
border-radius: 12px; padding: 10px 18px;
}
.time-stat-val { font-size: 1.1rem; font-weight: 800; color: var(--white); font-family: 'JetBrains Mono', monospace; }
.time-stat-label { font-size: 0.68rem; color: var(--text-muted); }
.time-tracker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.time-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 22px; text-align: center;
position: relative; overflow: hidden;
}
.time-card::before {
content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.4) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite; opacity: 0; transition: opacity 0.3s;
}
.time-card::after { content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0; }
.time-card > * { position: relative; z-index: 1; }
.time-card:hover::before { opacity: 1; }
.time-display {
font-size: 1.6rem; font-weight: 800; color: var(--white);
font-family: 'JetBrains Mono', monospace; margin-bottom: 4px;
}
.time-chrono {
font-size: 2rem; font-weight: 800; color: var(--green);
font-family: 'JetBrains Mono', monospace; margin-bottom: 14px;
animation: chronoPulse 1.5s ease-in-out infinite;
}
@keyframes chronoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
.btn-time {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 24px; border-radius: 12px;
font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 700;
cursor: pointer; transition: all 0.2s; border: 1px solid;
}
.btn-time.start { background: rgba(52,211,153,0.08); color: var(--green); border-color: rgba(52,211,153,0.2); }
.btn-time.start:hover { background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.3); }
.btn-time.stop { background: rgba(239,68,68,0.08); color: var(--red); border-color: rgba(239,68,68,0.2); }
.btn-time.stop:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); }
/* ═══ Alert System ═══ */
.alert-bell {
position: relative; cursor: pointer; padding: 8px;
border-radius: 10px; transition: all 0.2s;
display: flex; align-items: center; gap: 8px;
color: var(--text-dim); font-size: 0.78rem; font-weight: 600;
}
.alert-bell:hover { background: var(--accent-dim); color: var(--accent); }
.alert-bell .icon { width: 18px; height: 18px; }
.alert-badge {
position: absolute; top: 4px; right: -2px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--red); color: white; font-size: 0.55rem;
font-weight: 800; display: flex; align-items: center;
justify-content: center; animation: badge-pulse 2s infinite;
}
@keyframes badge-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.alert-panel {
display: none; position: fixed; top: 0; right: 0;
width: 380px; height: 100vh; z-index: 1000;
background: var(--bg-card-solid); border-left: 1px solid var(--border);
box-shadow: -8px 0 32px rgba(0,0,0,0.4);
transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
overflow-y: auto;
}
.alert-panel.open { display: block; transform: translateX(0); }
.alert-panel-header {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 24px; border-bottom: 1px solid var(--border-subtle);
position: sticky; top: 0; background: var(--bg-card-solid); z-index: 1;
}
.alert-panel-title { font-size: 0.95rem; font-weight: 700; color: var(--white); display: flex; align-items: center; gap: 8px; }
.alert-close {
width: 32px; height: 32px; border-radius: 8px; border: none;
background: var(--bg-input); color: var(--text-dim);
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
}
.alert-close:hover { background: rgba(239,68,68,0.1); color: var(--red); }
.alert-list { padding: 12px; }
.alert-item {
display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px;
border: 1px solid var(--border-subtle); margin-bottom: 8px;
transition: all 0.2s;
}
.alert-item:hover { background: var(--bg-input); }
.alert-item-icon {
width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.alert-item-icon .icon { width: 16px; height: 16px; }
.alert-item-body { flex: 1; }
.alert-item-title { font-size: 0.82rem; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.alert-item-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.alert-item-time { font-size: 0.65rem; color: var(--text-muted); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.alert-item.critical { border-color: rgba(239,68,68,0.1); }
.alert-item.warning { border-color: rgba(251,191,36,0.08); }
.alert-item.info { border-color: rgba(96,165,250,0.08); }
.alert-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.alert-dismiss {
width: 28px; height: 28px; min-width: 28px; border-radius: 8px;
border: 1px solid var(--border); background: transparent;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.2s; align-self: center;
}
.alert-dismiss .icon { width: 14px; height: 14px; color: var(--text-muted); transition: color 0.2s; }
.alert-dismiss:hover { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.2); }
.alert-dismiss:hover .icon { color: var(--green); }
@keyframes alertFadeOut {
from { opacity: 1; transform: translateX(0); max-height: 120px; margin-bottom: 8px; padding: 14px 16px; }
to { opacity: 0; transform: translateX(30px); max-height: 0; margin-bottom: 0; padding: 0 16px; }
}
.alert-item.dismissing { animation: alertFadeOut 0.35s ease forwards; pointer-events: none; }
/* ═══ Compare Period ═══ */
.compare-wrap {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.compare-toggle {
display: flex; align-items: center; gap: 8px; cursor: pointer;
padding: 8px 16px; border-radius: 50px;
background: transparent; border: 1px solid var(--border);
color: var(--text-muted); font-size: 0.78rem; font-weight: 600;
font-family: 'DM Sans', sans-serif; transition: all 0.2s;
}
.compare-toggle:hover { border-color: var(--accent-glow-strong); color: var(--text-dim); }
.compare-toggle.active { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); }
.refresh-btn { background: var(--accent-bg) !important; border-color: var(--accent-border) !important; color: var(--accent) !important; }
.refresh-btn:hover { background: var(--accent-mid) !important; border-color: var(--accent-border-hover) !important; color: var(--accent-soft) !important; }
.compare-toggle .icon { width: 14px; height: 14px; }
/* ═══ Currency Toggle ═══ */
.currency-toggle { display:inline-flex; border:1px solid var(--border); border-radius:50px; overflow:hidden; }
.cur-btn { padding:6px 14px; font-size:0.82rem; font-weight:700; font-family:'JetBrains Mono',monospace; border:none; background:transparent; color:var(--text-muted); cursor:pointer; transition:all .2s; line-height:1; }
.cur-btn:hover { color:var(--text-dim); }
.cur-btn.active { background:var(--accent-glow-strong); color:var(--accent); }
.compare-select {
display: none; padding: 8px 16px; border-radius: 50px;
background: var(--bg-input); border: 1px solid var(--border);
color: var(--white); font-size: 0.82rem; font-family: 'DM Sans', sans-serif;
outline: none; transition: all 0.2s; cursor: pointer;
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 4 6 8 10 4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
padding-right: 36px;
}
.compare-select.visible { display: block; }
.compare-select:focus { border-color: var(--accent-focus); }
.kpi-compare {
display: none; font-size: 0.72rem; color: var(--text-muted);
margin-top: 6px; padding-top: 6px;
border-top: 1px dashed var(--border-subtle);
}
.kpi-compare.visible { display: block; }
.kpi-compare-val { color: var(--text-dim); font-weight: 600; }
.kpi-compare-delta { font-weight: 700; margin-left: 6px; }
/* ═══ Product Filter ═══ */
.table-filter {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px;
}
.table-filter-input {
flex: 1; padding: 10px 18px 10px 40px;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 50px; color: var(--white);
font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
outline: none; transition: all 0.2s;
}
.table-filter-input:focus { border-color: var(--accent-focus); box-shadow: 0 0 0 3px var(--accent-dim); }
.table-filter-input::placeholder { color: var(--text-muted); }
.table-filter-wrap {
position: relative; flex: 1;
}
.table-filter-wrap .icon {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.table-filter-count {
font-size: 0.72rem; color: var(--text-muted); font-weight: 600;
white-space: nowrap;
}
/* ═══ Skeleton Loader ═══ */
.skeleton {
position: relative; overflow: hidden;
background: var(--bg-input); border-radius: 8px;
}
.skeleton::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, var(--bg-input), transparent);
animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.skeleton-line { height: 14px; margin-bottom: 10px; border-radius: 6px; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.h28 { height: 28px; }
.skeleton-kpi { height: 110px; border-radius: 16px; }
.skeleton-chart { height: 200px; border-radius: 16px; }
.skeleton-row { display: flex; gap: 14px; margin-bottom: 14px; }
.skeleton-overlay {
position: absolute; inset: 0; z-index: 10;
background: var(--bg); display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 16px;
transition: opacity 0.5s;
}
.skeleton-overlay.fade-out { opacity: 0; pointer-events: none; }
.skeleton-spinner {
width: 36px; height: 36px; border-radius: 50%;
border: 3px solid var(--accent-bg);
border-top-color: var(--accent);
animation: skeleton-spin 0.8s linear infinite;
}
@keyframes skeleton-spin { to { transform: rotate(360deg); } }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
.refresh-spinning { animation: refresh-spin 0.8s linear infinite; }
.skeleton-text { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
/* ═══ Hero Login ═══ */
.login-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: var(--bg); z-index: 1000;
overflow-y: auto; overflow-x: hidden;
}
/* ── Noise texture overlay ── */
.noise-overlay {
position: fixed; inset: 0; z-index: 9998; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.03;
}
/* ── Grid with traveling wave on lines ── */
.hero-bg-grid {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 72px 72px;
}
/* Horizontal wave — brightens H lines as it passes */
.hero-grid-wave-h {
position: absolute; z-index: 0; pointer-events: none;
left: 0; width: 100%; height: 4px;
background: linear-gradient(90deg,
transparent 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.12) 70%, transparent 100%);
filter: blur(1px);
animation: wave-h 10s ease-in-out infinite;
}
@keyframes wave-h {
0% { top: -4px; opacity: 0; }
5% { opacity: 1; }
80% { opacity: 1; }
92% { opacity: 0; }
100% { top: calc(100% - 8px); opacity: 0; }
}
/* Vertical wave — brightens V lines as it passes */
.hero-grid-wave-v {
position: absolute; z-index: 0; pointer-events: none;
top: 0; height: 100%; width: 4px;
background: linear-gradient(180deg,
transparent 0%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.1) 70%, transparent 100%);
filter: blur(1px);
animation: wave-v 14s ease-in-out infinite 3s;
}
@keyframes wave-v {
0% { left: -4px; opacity: 0; }
5% { opacity: 1; }
80% { opacity: 1; }
92% { opacity: 0; }
100% { left: calc(100% - 8px); opacity: 0; }
}
.hero-bg-fade {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(ellipse 90% 80% at 50% 40%, transparent 40%, var(--bg) 80%);
}
/* ── Nav ── */
.hero-nav {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
padding: 20px 48px; max-width: 1200px; margin: 0 auto;
transition: all 0.4s ease;
}
.hero-nav:has(.hero-nav-center) {
display: grid; grid-template-columns: 1fr auto 1fr;
}
/* Nav scrolled glass effect */
.nav-scrolled {
position: sticky; top: 0;
background: var(--bg);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-subtle);
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.hero-nav-brand {
display: flex; align-items: center; gap: 10px;
font-weight: 700; font-size: 1.1rem; color: var(--white);
}
.hero-nav-brand .icon-box {
width: 32px; height: 32px; border-radius: 8px;
background: var(--accent-glow); border: 1px solid var(--accent-glow-strong);
display: flex; align-items: center; justify-content: center;
}
.hero-nav-brand .icon-box .icon { width: 16px; height: 16px; color: var(--accent); }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 16px; border-radius: 50px;
background: var(--accent-dim); border: 1px solid var(--accent-bg);
font-size: 0.75rem; font-weight: 600; color: var(--accent);
}
.hero-badge-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
/* ── Shimmer text effect ── */
.shimmer-text {
background-size: 200% 100%;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ── Float animation for dashboard preview ── */
.hero-float {
animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ── Scroll reveal ── */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
/* ── 3D tilt card styling ── */
.tilt-card {
transform-style: preserve-3d;
transition: transform 0.2s ease;
position: relative;
overflow: hidden;
}
.tilt-glare {
position: absolute; inset: 0; z-index: 1;
pointer-events: none; border-radius: inherit;
opacity: 0; transition: opacity 0.3s;
}
/* ── Content ── */
.hero-content {
position: relative; z-index: 1;
max-width: 1200px; margin: 0 auto;
padding: 50px 48px 0; text-align: center;
}
.hero-title-main {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: clamp(3.8rem, 8vw, 6rem);
font-weight: 400; color: var(--white);
line-height: 1.08; letter-spacing: -1.5px;
margin: 28px 0 0;
}
.hero-title-accent {
font-family: 'Instrument Serif', 'Georgia', serif;
font-style: italic;
background: linear-gradient(135deg, var(--accent-soft), var(--accent), var(--accent-soft));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
position: relative;
}
.hero-title-accent::after {
content: ''; position: absolute; bottom: 4px; left: 10%; right: 10%;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
border-radius: 2px; opacity: 0.5;
}
.hero-cta-btn {
display: inline-block; width: auto; padding: 14px 44px; border-radius: 50px;
background: var(--accent-dim);
color: var(--text); font-family: 'DM Sans', sans-serif;
font-weight: 600; font-size: 0.95rem; text-decoration: none;
text-align: center; transition: all 0.3s; cursor: pointer;
border: 1px solid var(--accent-border);
box-shadow: 0 0 20px var(--accent-dim);
}
.hero-cta-btn:hover {
background: var(--accent-glow-strong);
border-color: var(--accent-border-hover);
color: var(--white);
box-shadow: 0 0 30px var(--accent-glow-strong);
transform: translateY(-1px);
}
.hero-cta-btn:active {
transform: scale(0.95); transition: transform 0.1s ease;
}
/* ── Hero buttons row ── */
.hero-btns {
display: flex; align-items: center; justify-content: center; gap: 16px;
margin: 36px auto 0;
}
.hero-cta-secondary {
display: inline-block; padding: 14px 36px; border-radius: 50px;
background: transparent; border: 1px solid var(--border-hover);
color: var(--text-dim); font-family: 'DM Sans', sans-serif;
font-weight: 600; font-size: 0.95rem; text-decoration: none;
transition: all 0.3s; cursor: pointer;
}
.hero-cta-secondary:hover {
border-color: var(--accent-border-soft);
color: var(--text); background: var(--accent-faint);
}
.hero-trial-text {
text-align: center; margin-top: 20px;
font-size: 0.78rem; color: var(--text-muted);
}
.hero-sub {
color: var(--text-muted); font-size: 14px; line-height: 1.6;
max-width: 440px; margin: 30px auto 32px;
font-family: 'DM Sans', sans-serif;
letter-spacing: 0.3px;
}
/* ── Login — Glass ── */
.hero-login-row {
display: flex; align-items: center; justify-content: center;
gap: 12px; margin: 44px auto 0; max-width: 440px;
}
.hero-login-input {
flex: 1; padding: 14px 22px;
background: var(--bg-input);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border);
border-radius: 50px; color: var(--white);
font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
outline: none; transition: all 0.4s;
}
.hero-login-input:focus {
border-color: var(--accent-glow-strong);
box-shadow: 0 0 0 3px var(--accent-dim), 0 0 20px var(--accent-dim);
background: var(--border);
}
.hero-login-input::placeholder { color: var(--text-muted); }
.hero-login-btn-wrap {
border-radius: 50px;
}
.hero-login-btn {
position: relative; z-index: 1;
display: block; padding: 13px 35px; border-radius: 50px;
background: var(--accent-dim);
border: 1px solid var(--accent-border);
color: var(--text);
font-family: 'DM Sans', sans-serif;
font-weight: 600; font-size: 0.9rem; cursor: pointer;
transition: all 0.3s; white-space: nowrap;
box-shadow: 0 0 20px var(--accent-dim);
}
.hero-login-btn:hover {
color: var(--white);
background: var(--accent-glow-strong);
border-color: var(--accent-border-hover);
box-shadow: 0 0 30px var(--accent-glow-strong);
}
/* ── Stats ── */
.hero-stats {
display: flex; justify-content: center; gap: 48px;
margin: 56px auto 0; padding: 0 48px;
}
.hero-stat { text-align: center; }
.hero-stat-value {
font-size: 1.5rem; font-weight: 800; color: var(--text);
font-family: 'JetBrains Mono', monospace; letter-spacing: -0.5px;
}
.hero-stat-label {
font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase;
letter-spacing: 1.5px; font-weight: 600; margin-top: 4px;
}
.hero-stat-divider {
width: 1px; background: var(--bg-input); align-self: stretch;
}
/* ── Dashboard Preview ── */
.hero-preview {
max-width: 880px; margin: 56px auto 0;
background: var(--bg-input);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: 20px; overflow: hidden;
box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.1);
}
.preview-topbar {
display: flex; align-items: center; gap: 8px;
padding: 14px 18px; border-bottom: 1px solid var(--border-subtle);
}
.preview-dot { width: 10px; height: 10px; border-radius: 50%; }
.preview-dot.r { background: var(--red); } .preview-dot.y { background: var(--amber); } .preview-dot.g { background: var(--green); }
.preview-url {
flex: 1; text-align: center; color: var(--text-muted); font-size: 0.72rem;
font-family: 'JetBrains Mono', monospace;
}
.preview-body { padding: 24px; }
.preview-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.preview-kpi {
background: var(--bg-input); border: 1px solid var(--border-subtle);
border-radius: 12px; padding: 16px 14px; text-align: center;
}
.preview-kpi-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; }
.preview-kpi-value { font-size: 1.15rem; font-weight: 800; color: var(--white); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.preview-kpi-delta { font-size: 0.7rem; font-weight: 600; margin-top: 2px; transition: opacity 0.4s; }
.preview-chart {
background: var(--bg-input); border: 1px solid var(--border-subtle);
border-radius: 12px; padding: 16px; height: 120px; position: relative; overflow: hidden;
}
.preview-chart-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; }
.preview-chart-area { position: relative; height: 80px; margin-top: 10px; }
.preview-bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; position: relative; z-index: 1; }
.preview-bar {
flex: 1; border-radius: 4px 4px 0 0;
background: linear-gradient(to top, var(--accent-border-soft), var(--accent-border-hover));
height: 0%; transition: none;
}
.preview-curve {
position: absolute; inset: 0; z-index: 2;
width: 100%; height: 100%; pointer-events: none;
}
.hero-footer {
text-align: center; padding: 48px 48px 32px; color: var(--text-muted); font-size: 0.75rem;
}
/* ── Homepage Nav Links ── */
.hero-nav-links {
display: flex; align-items: center; gap: 12px;
justify-self: end;
}
.hero-nav-center {
display: flex; align-items: center; gap: 4px;
}
.hero-nav-mid-link {
color: var(--text-dim); font-size: 0.82rem; font-weight: 500;
text-decoration: none; padding: 8px 16px; border-radius: 50px;
transition: all 0.3s;
}
.hero-nav-mid-link:hover { color: var(--text); }
.hero-nav-link {
color: var(--text-dim); font-size: 0.85rem; font-weight: 500;
text-decoration: none; padding: 8px 18px; border-radius: 50px;
transition: all 0.3s;
}
.hero-nav-link:hover { color: var(--text); }
.hero-nav-cta {
color: var(--accent); font-size: 0.85rem; font-weight: 600;
text-decoration: none; padding: 8px 22px; border-radius: 50px;
border: 1px solid var(--accent-border);
background: var(--accent-dim);
transition: all 0.3s;
}
.hero-nav-cta:hover {
background: var(--accent-glow-strong);
border-color: var(--accent-border-hover);
color: var(--accent-soft);
}
/* ── Section label (shared) ── */
.section-label {
font-size: 0.65rem; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--accent); margin-bottom: 28px;
}
/* ── Playfair titles ── */
.section-title-serif {
font-family: 'Playfair Display', 'Instrument Serif', 'Georgia', serif;
font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500;
color: var(--white); text-align: center; margin-bottom: 12px;
}
/* ── Stats Section ── */
.stats-section {
margin: 80px auto 0; max-width: 880px; padding: 0 24px;
}
.stats-grid {
display: flex; align-items: center; justify-content: center;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 18px; padding: 36px 32px;
}
.stat-item { flex: 1; text-align: center; padding: 0 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.counter-value {
font-family: 'DM Sans', sans-serif;
font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800;
color: var(--white); line-height: 1; display: block;
letter-spacing: -0.5px;
}
.stats-trust-label {
font-size: 0.65rem; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: var(--accent); text-align: center;
margin-bottom: 20px;
}
.stat-label {
font-size: 0.78rem; color: var(--text-muted); font-weight: 500; display: block;
}
.stat-divider {
width: 1px; height: 48px; background: var(--chart-grid); flex-shrink: 0;
}
/* Legacy social-proof aliases */
.social-proof-section {
margin: 80px auto 0; max-width: 880px; padding: 0 24px;
}
.social-proof-grid {
display: flex; align-items: center; justify-content: center; gap: 0;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 18px; padding: 36px 32px;
}
.proof-stat {
flex: 1; text-align: center; padding: 0 20px;
}
.proof-stat-value {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400;
color: var(--white); line-height: 1; margin-bottom: 6px;
}
.proof-stat-label {
font-size: 0.78rem; color: var(--text-muted); font-weight: 500;
}
.proof-stat-divider {
width: 1px; height: 48px; background: var(--chart-grid); flex-shrink: 0;
}
/* ── Bento Grid Section ── */
.bento-section {
margin: 100px auto 0; max-width: 960px; padding: 0 24px;
}
.section-sub {
color: var(--text-muted); font-size: 0.9rem; text-align: center;
max-width: 520px; margin: 0 auto 48px;
}
.bento-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
grid-template-rows: auto auto;
gap: 18px;
}
.bento-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 18px; padding: 28px 26px;
transition: all 0.3s;
position: relative; overflow: hidden;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.bento-card:hover {
border-color: var(--accent-glow-strong);
background: var(--accent-faint);
}
.bento-large {
grid-row: 1 / 3;
justify-content: center;
}
.bento-icon {
width: 44px; height: 44px; min-width: 44px;
border: 1px solid var(--accent-glow-strong); border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-dim); margin-bottom: 16px;
}
.bento-icon .icon { color: var(--accent); width: 20px; height: 20px; }
.bento-card h3 {
font-size: 1rem; font-weight: 700; color: var(--white); margin: 0 0 10px; text-align: center;
}
.bento-card p {
font-size: 0.84rem; color: var(--text-dim); line-height: 1.6; margin: 0; text-align: center;
}
/* Formula badges */
.formula-visual {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 20px;
}
.formula-badge {
padding: 6px 14px; border-radius: 50px;
font-size: 0.72rem; font-weight: 600;
background: var(--bg-card); border: 1px solid var(--border);
color: var(--text-dim);
}
.formula-op {
font-size: 0.85rem; font-weight: 700; color: var(--text-muted);
}
.formula-badge.formula-result {
background: var(--accent-dim); border-color: var(--accent-border-soft);
color: var(--accent);
}
/* Legacy capabilities aliases */
.capabilities-section {
margin: 100px auto 0; max-width: 880px; padding: 0 24px;
}
.capabilities-title {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400;
color: var(--white); text-align: center; margin-bottom: 12px;
}
.capabilities-sub {
color: var(--text-muted); font-size: 0.9rem; text-align: center;
max-width: 500px; margin: 0 auto 48px;
}
.capabilities-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.capability-block {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 18px; padding: 28px 26px;
transition: all 0.3s;
}
.capability-block:hover {
border-color: var(--accent-glow-strong);
background: var(--grid-line);
}
.capability-header {
display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.capability-icon {
width: 40px; height: 40px; min-width: 40px;
border: 1px solid var(--accent-glow-strong); border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-dim);
}
.capability-icon .icon { color: var(--accent); width: 18px; height: 18px; }
.capability-header h3 {
font-size: 0.95rem; font-weight: 700; color: var(--white); margin: 0;
}
.capability-list {
list-style: none; padding: 0; margin: 0;
}
.capability-list li {
display: flex; align-items: center; gap: 10px;
color: var(--text-dim); font-size: 0.82rem; padding: 5px 0;
}
.capability-list .icon { width: 13px; height: 13px; color: var(--green); flex-shrink: 0; }
/* ── Comparison Section ── */
.compare-section {
margin: 100px auto 0; max-width: 880px; padding: 0 24px;
}
.compare-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.compare-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 18px; padding: 28px 26px;
position: relative; overflow: hidden;
}
.compare-amana {
border-color: var(--accent-border-soft);
background: var(--accent-faint);
}
.compare-card h3 {
font-size: 0.7rem; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; margin: 0 0 24px;
}
.compare-others h3 { color: var(--text-muted); }
.compare-amana h3 { color: var(--accent); }
.compare-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 10px 0; font-size: 0.84rem; color: var(--text-dim); line-height: 1.5;
}
.compare-item .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.compare-others .compare-item .icon { color: var(--red); }
.compare-amana .compare-item .icon { color: var(--green); }
/* ── Comparison Table ── */
.compare-table-wrap {
max-width: 780px; margin: 0 auto;
}
.compare-table {
width: 100%; border-collapse: separate; border-spacing: 0;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 20px; overflow: hidden;
}
.compare-table thead tr {
background: transparent;
}
.compare-th-feature {
padding: 22px 28px; text-align: left;
font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 1.5px;
border-bottom: 1px solid var(--border);
}
.compare-th-amana {
padding: 22px 28px; text-align: center;
font-size: 0.78rem; font-weight: 700; color: var(--accent);
text-transform: uppercase; letter-spacing: 2px;
border-bottom: 2px solid var(--accent-border);
background: var(--accent-dim);
min-width: 150px;
}
.compare-th-others {
padding: 22px 28px; text-align: center;
font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 1.5px;
border-bottom: 1px solid var(--border);
min-width: 150px;
}
.compare-table tbody tr {
transition: background 0.2s;
}
.compare-table tbody tr:hover {
background: var(--accent-faint);
}
.compare-td-feature {
padding: 20px 28px;
font-size: 0.85rem; font-weight: 500; color: var(--text);
border-bottom: 1px solid var(--border-subtle);
text-align: left;
}
.compare-td-amana {
padding: 20px 28px; text-align: center;
font-size: 0.82rem; font-weight: 600; color: var(--accent);
border-bottom: 1px solid var(--border-subtle);
background: var(--accent-faint);
}
.compare-td-amana .icon { width: 18px; height: 18px; }
.compare-td-others {
padding: 20px 28px; text-align: center;
font-size: 0.82rem; font-weight: 500; color: var(--text-muted);
border-bottom: 1px solid var(--border-subtle);
}
.compare-td-others .icon { width: 16px; height: 16px; }
.compare-table tbody tr:last-child td {
border-bottom: none;
}
/* ── Testimonials Section ── */
.testimonials-section {
margin: 100px auto 0; max-width: 960px; padding: 0 24px;
}
.testimonials-title {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400;
color: var(--white); text-align: center; margin-bottom: 48px;
}
.testimonials-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.testimonial-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 18px; padding: 28px 24px;
transition: all 0.3s; display: flex; flex-direction: column;
}
.testimonial-card:hover {
border-color: var(--accent-glow-strong);
background: var(--bg-input);
transform: translateY(-2px);
}
.testimonial-stars {
font-size: 0.9rem; color: var(--amber); letter-spacing: 2px; margin-bottom: 16px;
}
.testimonial-text {
font-size: 0.85rem; color: var(--text-dim); line-height: 1.65;
margin: 0 0 20px; flex: 1;
font-style: italic;
}
.testimonial-author {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding-top: 16px; border-top: 1px solid var(--border-subtle);
text-align: center;
}
.testimonial-avatar {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.72rem; font-weight: 700; flex-shrink: 0;
}
.testimonial-name {
font-size: 0.82rem; font-weight: 600; color: var(--text);
}
.testimonial-role {
font-size: 0.72rem; color: var(--text-muted); margin-top: 2px;
}
/* ── FAQ Accordion Section ── */
.faq-section {
margin: 100px auto 0; max-width: 720px; padding: 0 24px;
}
.faq-title {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400;
color: var(--white); text-align: center; margin-bottom: 48px;
}
.faq-list {
display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.faq-item {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
cursor: pointer; transition: all 0.3s;
}
.faq-item:hover {
border-color: var(--scrollbar-bg);
}
.faq-item.open {
border-color: var(--accent-glow-strong);
background: var(--accent-faint);
}
.faq-question {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px; gap: 16px;
}
.faq-question span {
font-size: 0.88rem; font-weight: 600; color: var(--text); text-align: left;
}
.faq-chevron {
width: 16px; height: 16px; color: var(--text-muted);
transition: transform 0.3s, color 0.3s; flex-shrink: 0;
}
.faq-item.open .faq-chevron {
transform: rotate(45deg); color: var(--accent);
}
.faq-answer {
max-height: 0; overflow: hidden;
transition: max-height 0.35s ease, padding 0.35s ease;
padding: 0 22px;
}
.faq-item.open .faq-answer {
max-height: 200px; padding: 0 22px 20px;
}
.faq-answer p {
font-size: 0.82rem; color: var(--text-dim); line-height: 1.7; margin: 0; text-align: left;
}
/* ── Pricing Section (3 cards) ── */
.pricing-section-full {
margin: 100px auto 0; max-width: 960px; padding: 0 24px;
}
.pricing-title {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400;
color: var(--white); text-align: center; margin-bottom: 10px;
}
.pricing-sub {
color: var(--text-muted); font-size: 0.88rem; text-align: center; margin-bottom: 48px;
}
/* ── Pricing Toggle ── */
.pricing-toggle-wrap {
display: flex; align-items: center; justify-content: center;
gap: 4px; margin-bottom: 44px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 50px; padding: 4px; width: fit-content; margin-left: auto; margin-right: auto;
}
.pricing-toggle-btn {
padding: 9px 24px; border-radius: 50px; border: none;
background: transparent; color: var(--text-dim);
font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600;
cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;
}
.pricing-toggle-btn.active {
background: var(--accent-glow-strong);
color: var(--accent-soft); border: 1px solid var(--accent-border-soft);
}
.pricing-toggle-btn:not(.active):hover {
color: var(--text-dim);
}
.pricing-toggle-badge {
font-size: 0.65rem; font-weight: 700; color: var(--green);
background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.2);
padding: 2px 8px; border-radius: 50px; white-space: nowrap;
}
.pricing-plan-saving {
font-size: 0.78rem; margin: -14px 0 20px;
text-align: center; font-weight: 600;
justify-content: center; align-items: center; gap: 8px;
}
.saving-price { color: var(--green); }
.saving-old {
color: var(--text-muted); text-decoration: line-through; font-weight: 400; font-size: 0.72rem;
}
.pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
align-items: start;
}
.pricing-plan-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 20px; padding: 36px 28px; text-align: center;
position: relative; transition: all 0.3s;
}
.pricing-plan-card:hover {
border-color: rgba(255,255,255,0.1);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.pricing-plan-featured {
border-color: var(--accent-focus) !important;
background: var(--accent-glow);
transform: scale(1.04);
box-shadow: 0 0 40px var(--accent-glow);
}
.pricing-plan-featured:hover {
transform: scale(1.04) translateY(-3px);
border-color: var(--accent-border-hover) !important;
box-shadow: 0 8px 40px var(--accent-glow-strong);
}
.pricing-plan-badge {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, var(--accent), var(--accent-soft));
color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px;
padding: 4px 16px; border-radius: 50px;
text-transform: uppercase;
}
.pricing-plan-name {
font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px;
}
.pricing-plan-price {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: 3rem; color: var(--white); font-weight: 400; line-height: 1;
margin-bottom: 24px;
}
.pricing-plan-currency {
font-family: 'DM Sans', sans-serif; font-size: 1.2rem; font-weight: 600;
vertical-align: super; margin-left: 2px;
}
.pricing-plan-period {
font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 500;
color: var(--text-muted);
}
.pricing-plan-features {
list-style: none; padding: 0; margin: 0 0 28px; text-align: left;
}
.pricing-plan-features li {
display: flex; align-items: center; gap: 10px;
color: var(--text-dim); font-size: 0.82rem; padding: 6px 0;
border-bottom: 1px solid var(--border-subtle);
}
.pricing-plan-features li:last-child { border-bottom: none; }
.pricing-plan-features .icon { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }
.pricing-plan-btn {
display: block; width: 100%; padding: 12px 24px; border-radius: 50px;
background: var(--bg-input); border: 1px solid var(--scrollbar-bg);
color: var(--text-dim); font-family: 'DM Sans', sans-serif;
font-weight: 600; font-size: 0.85rem; text-decoration: none;
text-align: center; transition: all 0.3s; cursor: pointer;
}
.pricing-plan-btn:hover {
background: var(--scrollbar-bg); color: var(--text);
border-color: rgba(255,255,255,0.15);
}
.pricing-plan-btn-featured {
background: linear-gradient(180deg, var(--accent-glow-strong), var(--accent-glow));
border-color: var(--accent-focus); color: var(--accent-soft);
}
.pricing-plan-btn-featured:hover {
background: linear-gradient(180deg, var(--accent-border), var(--accent-glow-strong));
border-color: var(--accent-border-hover); color: var(--text);
}
/* ── CTA Final Section ── */
.cta-section {
margin: 100px auto 0; max-width: 720px; padding: 0 24px;
}
.cta-final-card {
background: var(--bg-input);
border: 1px solid var(--accent-border-soft);
border-radius: 24px; padding: 56px 40px;
text-align: center;
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.cta-final-card h2 {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 400;
color: var(--white); margin: 0 0 12px;
}
.cta-final-card p {
color: var(--text-muted); font-size: 0.88rem; margin: 0 0 32px;
max-width: 400px; margin-left: auto; margin-right: auto;
}
/* ── Landing Footer ── */
.landing-footer {
margin-top: 80px; padding: 0 24px 32px;
border-top: 1px solid var(--border-subtle);
}
.landing-footer-inner {
max-width: 880px; margin: 0 auto;
padding-top: 32px;
display: flex; align-items: center; justify-content: space-between;
}
.landing-footer-brand {
display: flex; align-items: center; gap: 8px;
font-weight: 700; font-size: 0.95rem; color: var(--text-dim);
}
.landing-footer-brand .icon-box {
background: var(--accent-dim); border: 1px solid var(--accent-glow-strong);
}
.landing-footer-links {
display: flex; gap: 24px;
}
.landing-footer-links a {
color: var(--text-muted); font-size: 0.8rem; text-decoration: none;
transition: color 0.2s;
}
.landing-footer-links a:hover { color: var(--text-dim); }
.landing-footer-copy {
color: var(--text-muted); font-size: 0.75rem;
}
/* ── HTML/CSS class alignment ── */
.features-section { margin: 100px auto 0; max-width: 960px; padding: 0 24px; }
.difference-section { margin: 100px auto 0; max-width: 880px; padding: 0 24px; }
.cta-final-section { margin: 100px auto 0; max-width: 720px; padding: 0 24px; }
.section-title {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400;
color: var(--white); margin-bottom: 12px;
}
.section-sub {
color: var(--text-muted); font-size: 0.9rem;
max-width: 520px; margin: 0 auto 48px;
}
.stats-bar {
display: flex; align-items: center; justify-content: center;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 18px; padding: 36px 32px;
}
.bento-card-icon {
width: 44px; height: 44px; min-width: 44px;
border: 1px solid var(--accent-glow-strong); border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-dim); margin-bottom: 16px;
}
.bento-card-icon .icon { color: var(--accent); width: 20px; height: 20px; }
.bento-card-title { font-size: 1rem; font-weight: 700; color: var(--white); margin: 0 0 10px; }
.bento-card-desc { font-size: 0.84rem; color: var(--text-dim); line-height: 1.6; margin: 0; }
.bento-formula {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 6px 8px; margin-top: 20px; line-height: 1;
}
.bento-formula-tag {
padding: 7px 14px; border-radius: 50px;
font-size: 0.72rem; font-weight: 600;
background: var(--bg-card); border: 1px solid var(--border);
color: var(--text-dim); white-space: nowrap;
display: inline-flex; align-items: center; height: 30px;
}
.bento-formula-op {
font-size: 0.82rem; font-weight: 700; color: var(--text-muted);
display: inline-flex; align-items: center; height: 30px;
min-width: 12px; justify-content: center;
}
.bento-formula-result {
background: var(--accent-dim) !important; border-color: var(--accent-border-soft) !important;
color: var(--accent) !important;
}
.bento-checklist {
list-style: none; margin: 24px 0 0; padding: 0; width: 100%;
display: flex; flex-direction: column; gap: 10px;
text-align: left;
}
.bento-checklist li {
display: flex; align-items: center; gap: 10px;
font-size: 0.82rem; color: var(--text-dim); line-height: 1.4;
}
.bento-checklist li .icon {
width: 14px; height: 14px; color: var(--accent); flex-shrink: 0;
}
.hero-cta-btn-secondary {
background: transparent !important; border: 1px solid var(--border-hover) !important;
color: var(--text-dim) !important; box-shadow: none !important;
}
.hero-cta-btn-secondary:hover {
border-color: var(--accent-border-soft) !important;
color: var(--text) !important; background: var(--accent-faint) !important;
}
.compare-card-title {
font-size: 0.7rem; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; margin: 0 0 24px;
}
.compare-others .compare-card-title { color: var(--text-muted); }
.compare-amana .compare-card-title { color: var(--accent); }
.compare-list {
list-style: none; padding: 0; margin: 0;
}
.compare-list li {
display: flex; align-items: flex-start; gap: 12px;
padding: 10px 0; font-size: 0.84rem; color: var(--text-dim); line-height: 1.5;
}
.compare-list li .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.cta-final-title {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 400;
color: var(--white); margin: 0 0 12px;
}
.cta-final-sub {
color: var(--text-muted); font-size: 0.88rem; margin: 0 0 32px;
max-width: 400px; margin-left: auto; margin-right: auto;
}
/* ── Responsive: Landing page ── */
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
.bento-large { grid-row: auto; }
.compare-grid { grid-template-columns: 1fr; }
.capabilities-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
.pricing-plan-featured { transform: scale(1); }
.pricing-plan-featured:hover { transform: translateY(-3px); }
.hero-nav-center { display: none; }
.hero-nav-links { gap: 6px; }
.hero-nav-link { padding: 6px 12px; font-size: 0.8rem; }
.hero-nav-cta { padding: 6px 16px; font-size: 0.8rem; }
.compare-table { font-size: 0.8rem; }
.compare-th-feature, .compare-th-amana, .compare-th-others { padding: 14px 14px; }
.compare-td-feature, .compare-td-amana, .compare-td-others { padding: 14px; }
.compare-th-amana, .compare-th-others { min-width: 90px; }
.compare-td-feature { font-size: 0.78rem; }
.compare-td-amana, .compare-td-others { font-size: 0.75rem; }
.stats-grid, .stats-bar { flex-wrap: wrap; gap: 24px; padding: 28px 20px; }
.stat-divider { display: none; }
.stat-item { flex: 0 0 calc(50% - 12px); }
.hero-cta-btn-secondary { width: 100% !important; max-width: 300px; text-align: center; }
.social-proof-grid {
flex-wrap: wrap; gap: 24px; padding: 28px 20px;
}
.proof-stat-divider { display: none; }
.proof-stat { flex: 0 0 calc(50% - 12px); }
.testimonials-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
.landing-footer-inner { flex-direction: column; gap: 16px; text-align: center; }
.hero-btns { flex-direction: column; gap: 12px; }
.hero-cta-btn, .hero-cta-secondary { width: 100%; max-width: 300px; text-align: center; }
}
@media (max-width: 480px) {
.hero-nav-links { gap: 4px; }
.stat-item { flex: 0 0 100%; }
.proof-stat { flex: 0 0 100%; }
}
.btn-primary {
width: 100%; padding: 11px 24px;
background: var(--accent-dim);
color: var(--text); border: 1px solid var(--accent-border);
border-radius: 50px;
font-family: 'DM Sans', sans-serif;
font-weight: 600; font-size: 0.9rem;
cursor: pointer; transition: all 0.3s;
box-shadow: 0 0 16px var(--accent-dim);
}
.btn-primary:hover {
color: var(--white); background: var(--accent-glow-strong);
border-color: var(--accent-border-hover);
box-shadow: 0 0 24px var(--accent-glow-strong);
}
.btn-primary .icon { vertical-align: middle; margin-right: 6px; }
/* ── Outline button variant ── */
.btn-outline {
padding: 8px 18px;
background: transparent;
color: var(--text);
border: 1px solid var(--border);
border-radius: 50px;
font-family: 'DM Sans', sans-serif;
font-weight: 600; font-size: 0.85rem;
cursor: pointer; transition: all 0.3s;
}
.btn-outline:hover { border-color: var(--accent-border); color: var(--accent); }
/* ── Danger button variant ── */
.btn-danger {
display: inline-flex; align-items: center; gap: 6px;
width: auto; padding: 8px 18px;
background: rgba(239,68,68,0.06);
color: var(--red); border: 1px solid rgba(239,68,68,0.2);
border-radius: 50px;
font-family: 'DM Sans', sans-serif;
font-weight: 600; font-size: 0.85rem;
cursor: pointer; transition: all 0.3s;
}
.btn-danger:hover {
background: rgba(239,68,68,0.12);
border-color: rgba(239,68,68,0.4);
color: var(--red);
}
.btn-edit-token {
padding:3px 10px; font-size:0.72rem; font-weight:600;
font-family:'DM Sans',sans-serif; border-radius:50px;
background:var(--accent-glow); color:var(--accent);
border:1px solid var(--accent-mid); cursor:pointer;
transition:all .2s; line-height:1.4;
}
.btn-edit-token:hover { background:var(--accent-glow-strong); border-color:var(--accent-focus); }
/* ═══ Fee Indicator (real vs estimated) — hidden, reveal on hover ═══ */
.metric-grid { align-items:start; }
.fee-indicator {
font-size:0.68rem; color:var(--green); font-weight:600;
font-family:'JetBrains Mono',monospace;
max-height:0; opacity:0; overflow:hidden; margin-top:0;
transition:max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.metric-card:hover .fee-indicator { max-height:24px; opacity:1; margin-top:4px; }
.fee-indicator.fee-estimated { color:var(--text-dim); }
/* ═══ Dropdown / Select — Glass ═══ */
.period-select, select {
background: var(--bg-input) !important;
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border) !important;
border-radius: 50px !important; color: var(--white) !important;
padding: 9px 36px 9px 16px !important;
font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
cursor: pointer; outline: none; transition: all 0.3s;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
box-shadow: inset 0 1px 0 var(--border-subtle);
}
.period-select:focus, select:focus {
border-color: var(--accent-focus) !important;
box-shadow: 0 0 0 3px var(--accent-dim), 0 0 16px var(--accent-glow);
}
.period-select option, select option {
background: var(--modal-bg) !important;
color: var(--text) !important;
padding: 10px 16px !important;
border: none !important;
}
.period-select option:checked, select option:checked {
background: var(--accent-glow-strong) !important;
color: var(--accent) !important;
}
/* ═══ Home ═══ */
.hero-title {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: 2.8rem; font-weight: 400; color: var(--white);
letter-spacing: -0.5px; line-height: 1.1;
text-shadow: 0 0 60px var(--accent-bg);
}
.home-sub { color: var(--text-muted); font-size: 1rem; margin-top: 6px; margin-bottom: 20px; }
/* Welcome section */
.home-welcome {
text-align: center; padding: 36px 0 10px; margin-bottom: 28px;
}
.home-welcome .hero-title { margin-bottom: 10px; }
.home-welcome-sub {
color: var(--text-dim); font-size: 1.05rem; line-height: 1.5;
max-width: 480px; margin: 0 auto;
}
/* Feature blocks */
.home-features {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
margin-bottom: 32px;
}
.feature-block {
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 16px; padding: 24px 22px;
display: flex; gap: 16px; align-items: flex-start;
transition: all 0.3s; position: relative; overflow: hidden;
}
.feature-block::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.4) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.feature-block::after {
content: ''; position: absolute; inset: 1.5px; border-radius: 15px;
background: var(--bg-card-solid); z-index: 0;
}
.feature-block > * { position: relative; z-index: 1; }
.feature-block:hover::before { opacity: 1; }
.feature-block:hover { transform: translateY(-2px); box-shadow: 0 8px 32px var(--accent-glow); }
.feature-block-icon {
width: 40px; height: 40px; min-width: 40px;
border: 1px solid var(--accent-glow-strong); border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-dim);
}
.feature-block-icon .icon { color: var(--accent); width: 18px; height: 18px; }
.feature-block-title { font-family: 'Instrument Serif', 'Georgia', serif; font-weight: 400; color: var(--white); font-size: 1.35rem; margin-bottom: 5px; }
.feature-block-desc { color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; }
.home-nav-label {
color: var(--text-muted); font-size: 0.75rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 1.5px;
margin-bottom: 12px; padding-left: 2px;
}
/* ═══ Home — Résumé du jour ═══ */
.home-resume { margin-bottom: 32px; }
.home-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.home-kpi-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 18px 18px;
position: relative; overflow: hidden; transition: all 0.25s;
}
.home-kpi-card::before {
content: ''; position: absolute;
top: 50%; left: 50%; width: 200%; aspect-ratio: 1;
translate: -50% -50%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.6) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.home-kpi-card::after {
content: ''; position: absolute;
inset: 1.5px; border-radius: 15px;
background: var(--bg-card-solid); z-index: 0;
}
.home-kpi-card > * { position: relative; z-index: 1; }
.home-kpi-card:hover::before { opacity: 1; }
.home-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.home-kpi-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.home-kpi-icon {
width: 32px; height: 32px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: var(--kpi-glow, var(--accent-dim));
}
.home-kpi-icon .icon { width: 15px; height: 15px; color: var(--kpi-color, var(--accent)); }
.home-kpi-label {
font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 1px; color: var(--text-dim);
}
.home-kpi-value { font-size: 1.45rem; font-weight: 800; color: var(--white); line-height: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.home-kpi-delta { font-size: 0.72rem; font-weight: 600; }
.home-kpi-sub { font-size: 0.78rem; margin-top: 5px; font-weight: 500; color: var(--text-dim); }
/* Home section labels */
.home-section-label {
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 1.5px; margin-bottom: 12px; padding-left: 2px;
}
/* Home Alerts */
.home-alerts-wrap { margin-bottom: 24px; }
.home-alerts-title {
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 1.5px; color: var(--accent); margin-bottom: 12px;
display: flex; align-items: center; gap: 8px; padding-left: 2px;
}
.home-alerts-title .alert-count-badge {
background: var(--red-dim); color: var(--red);
font-size: 0.62rem; font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
.home-alert-item {
display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
border: 1px solid var(--border-subtle); margin-bottom: 6px; transition: all 0.3s;
}
.home-alert-item:hover { background: var(--bg-input); }
.home-alert-item.critical { border-left: 3px solid var(--red); }
.home-alert-item.warning { border-left: 3px solid var(--amber); }
.home-alert-item.info { border-left: 3px solid var(--blue); }
.home-alert-item-icon {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.home-alert-item-icon .icon { width: 14px; height: 14px; }
.home-alert-item-body { flex: 1; min-width: 0; }
.home-alert-item-title { font-size: 0.78rem; font-weight: 600; color: var(--white); }
.home-alert-item-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.home-alert-dismiss {
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 8px; padding: 6px; color: var(--text-muted);
cursor: pointer; transition: all 0.2s; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.home-alert-dismiss:hover { background: var(--green-dim); color: var(--green); border-color: var(--green); }
.home-alert-dismiss .icon { width: 13px; height: 13px; }
.home-alert-item.dismissing {
animation: alertSlideOut 0.3s ease forwards;
}
@keyframes alertSlideOut {
to { opacity: 0; transform: translateX(30px); height: 0; padding: 0; margin: 0; overflow: hidden; }
}
.home-alerts-empty {
color: var(--green); font-size: 0.82rem; font-weight: 500;
padding: 12px 0 4px; display: flex; align-items: center; gap: 6px;
}
/* Home Weekly — Temps travaillé */
.home-weekly-wrap { margin-bottom: 32px; }
.home-weekly-title {
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 1.5px; color: var(--accent); margin-bottom: 12px; padding-left: 2px;
}
.home-weekly-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.home-weekly-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 20px 20px;
position: relative; overflow: hidden; transition: all 0.25s;
}
.home-weekly-card::before {
content: ''; position: absolute;
top: 50%; left: 50%; width: 200%; aspect-ratio: 1;
translate: -50% -50%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.6) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.home-weekly-card::after {
content: ''; position: absolute;
inset: 1.5px; border-radius: 15px;
background: var(--bg-card-solid); z-index: 0;
}
.home-weekly-card > * { position: relative; z-index: 1; }
.home-weekly-card:hover::before { opacity: 1; }
.home-weekly-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.home-weekly-name {
font-family: 'Instrument Serif', 'Georgia', serif;
font-size: 1.6rem; font-weight: 400; color: var(--white); margin-bottom: 14px;
}
.home-weekly-stat {
display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.home-weekly-stat-icon {
width: 32px; height: 32px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.home-weekly-stat-icon .icon { width: 15px; height: 15px; }
.home-weekly-stat-info { flex: 1; }
.home-weekly-stat-label {
font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.8px; color: var(--text-muted);
}
.home-weekly-stat-value {
font-size: 1.1rem; font-weight: 700; color: var(--white);
font-family: 'JetBrains Mono', monospace;
}
.home-weekly-tasks-inline { color: inherit; }
.home-weekly-tasks-count {
color: var(--accent); font-style: italic; text-decoration: underline;
text-underline-offset: 3px;
}
.home-weekly-motivation {
font-size: 0.82rem; color: var(--accent); margin-top: 10px;
padding-top: 10px; border-top: 1px solid var(--border-subtle);
font-weight: 500;
}
/* Home comparison card */
.home-compare-wrap { margin-bottom: 24px; }
.home-compare-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 22px 24px;
position: relative; overflow: hidden; transition: all 0.25s;
}
.home-compare-card::before {
content: ''; position: absolute;
top: 50%; left: 50%; width: 200%; aspect-ratio: 1;
translate: -50% -50%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.6) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.home-compare-card::after {
content: ''; position: absolute;
inset: 1.5px; border-radius: 15px;
background: var(--bg-card-solid); z-index: 0;
}
.home-compare-card > * { position: relative; z-index: 1; }
.home-compare-card:hover::before { opacity: 1; }
.home-compare-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.home-compare-text {
font-size: 0.92rem; line-height: 1.75; color: var(--text-secondary);
}
.home-compare-text strong {
color: var(--white); font-family: 'JetBrains Mono', monospace; font-weight: 700;
}
/* Home top variants */
.home-top-wrap { margin-bottom: 24px; }
.home-top-grid { display: flex; flex-direction: column; gap: 10px; }
.home-top-card {
display: flex; align-items: center; gap: 14px;
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px; transition: all 0.25s;
}
.home-top-card:hover { background: var(--bg-input); }
.home-top-gold { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-dim); }
.home-top-rank {
width: 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 0.85rem; flex-shrink: 0;
}
.home-top-info { flex: 1; min-width: 0; }
.home-top-name {
font-size: 0.85rem; font-weight: 600; color: var(--white);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-top-stats {
font-size: 0.75rem; color: var(--text-dim); margin-top: 3px;
font-family: 'JetBrains Mono', monospace;
}
.home-top-empty { color: var(--text-muted); font-size: 0.85rem; padding: 16px 0; }
/* Home error / empty states */
.home-resume-error, .home-resume-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 40px 20px; text-align: center;
color: var(--text-muted); font-size: 0.88rem;
}
/* Home skeleton */
.home-resume-skeleton .skeleton-kpi { height: 100px; border-radius: 16px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.quick-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 28px 22px; text-align: center;
transition: all 0.3s; cursor: default;
position: relative; overflow: hidden;
}
.quick-card::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.quick-card::after {
content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0;
}
.quick-card > * { position: relative; z-index: 1; }
.quick-card:hover::before { opacity: 1; }
.quick-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px var(--accent-dim); }
.quick-icon-wrap {
width: 44px; height: 44px; margin: 0 auto 14px;
border: 1px solid var(--accent-glow-strong); border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-dim);
}
.quick-icon-wrap .icon { color: var(--accent); }
.quick-title { font-weight: 700; color: var(--white); font-size: 0.95rem; margin-bottom: 6px; }
.quick-desc { color: var(--text-muted); font-size: 0.82rem; line-height: 1.4; }
/* ═══ Config store card ═══ */
.store-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 24px; margin-top: 8px;
position: relative; overflow: hidden;
}
.store-card::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.store-card::after {
content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0;
}
.store-card > * { position: relative; z-index: 1; }
.store-card:hover::before { opacity: 1; }
/* ═══ Glass Card ═══ */
.glass-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 22px; position: relative; overflow: hidden;
}
.glass-card::before {
content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite; opacity: 0; transition: opacity 0.3s;
}
.glass-card::after { content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0; }
.glass-card > * { position: relative; z-index: 1; }
.glass-card:hover::before { opacity: 1; }
.store-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.store-name { font-weight: 700; color: var(--white); font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.store-badge {
background: var(--accent-bg); color: var(--accent); padding: 3px 10px;
border-radius: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px;
border: 1px solid var(--accent-glow-strong);
}
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-box {
background: var(--bg-input); border: 1px solid var(--border-subtle);
border-radius: 12px; padding: 16px 18px;
}
/* ═══ Totals bar ═══ */
.total-bar {
background: var(--accent-glow); border: 1px solid var(--accent-glow-strong);
border-radius: 12px; padding: 14px 20px; display: flex;
justify-content: space-between; align-items: center; margin-top: 12px;
}
.total-label { color: var(--text-dim); font-weight: 500; font-size: 0.9rem; }
.total-value { color: var(--white); font-size: 1.2rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
/* ═══ Form inputs (expenses page) ═══ */
.form-card {
background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 16px; padding: 24px;
position: relative; overflow: hidden;
}
.form-card::before {
content: ''; position: absolute;
top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.5) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite;
opacity: 0; transition: opacity 0.3s;
}
.form-card::after {
content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: var(--bg-card-solid); z-index: 0;
}
.form-card > * { position: relative; z-index: 1; }
.form-card:hover::before { opacity: 1; }
.form-grid { display: grid; gap: 12px; }
.input-group .metric-label { margin-bottom: 6px; }
.form-input {
width: 100%; padding: 10px 18px;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 50px; color: var(--white);
font-family: 'DM Sans', sans-serif; font-size: 0.88rem;
outline: none; transition: all 0.2s;
}
.form-input:focus { border-color: var(--accent-focus); box-shadow: 0 0 0 3px var(--accent-dim); }
/* ═══ Simulator bundle mode ═══ */
.sim-mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 50px; overflow: hidden; }
.sim-mode-btn {
padding: 6px 14px; font-size: 0.82rem; font-weight: 700;
font-family: 'DM Sans', sans-serif; border: none; background: transparent;
color: var(--text-muted); cursor: pointer; transition: all 0.2s; line-height: 1;
}
.sim-mode-btn:hover { color: var(--text-dim); }
.sim-mode-btn.active { background: var(--accent-glow-strong); color: var(--accent); }
.sim-bundle-dropdown {
position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
max-height: 200px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.sim-bundle-dropdown-item {
padding: 8px 14px; cursor: pointer; font-size: 0.82rem; color: var(--text-secondary);
display: flex; justify-content: space-between; align-items: center;
transition: background 0.15s;
}
.sim-bundle-dropdown-item:hover { background: rgba(255,255,255,0.04); }
.sim-bundle-dropdown-item .sbd-cost { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-dim); }
.sim-bundle-selected { display: flex; flex-direction: column; gap: 6px; }
.sim-bundle-chip {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 6px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);
border-radius: 8px; font-size: 0.8rem; color: var(--text-secondary);
}
.sim-bundle-chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-bundle-chip-cost { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-dim); }
.sim-bundle-chip-qty { width: 48px; padding: 3px 6px; text-align: center; }
.sim-bundle-chip-rm { cursor: pointer; color: var(--red); opacity: 0.5; font-size: 0.75rem; transition: opacity 0.15s; }
.sim-bundle-chip-rm:hover { opacity: 1; }
/* ═══ Editable COGS table ═══ */
.cell-input {
width: 90px; padding: 5px 8px;
background: transparent; border: 1px solid transparent;
border-radius: 8px; color: var(--white);
font-family: 'JetBrains Mono', monospace; font-size: 0.82rem;
outline: none; transition: all 0.2s; text-align: right;
-moz-appearance: textfield;
}
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell-input:hover { border-color: var(--scrollbar-bg); }
.cell-input:focus { border-color: var(--accent-focus); background: var(--accent-glow); box-shadow: 0 0 0 2px var(--accent-glow); }
tr.pc-incomplete { background: rgba(251,191,36,0.04) !important; }
tr.pc-incomplete td:first-child { border-left: 3px solid rgba(251,191,36,0.4); }
tr.pc-dirty { background: var(--accent-glow) !important; }
tr.pc-inactive-row { opacity: 0.45; }
.badge-no-sales { display:inline-block; font-size:0.65rem; padding:2px 7px; border-radius:6px; background:rgba(82,82,91,0.25); color:var(--text-dim); margin-left:6px; vertical-align:middle; font-weight:500; }
.badge-inactive { display:inline-block; font-size:0.65rem; padding:2px 7px; border-radius:6px; background:rgba(239,68,68,0.12); color:var(--red); margin-left:4px; vertical-align:middle; font-weight:500; }
/* Toggle switch (checkbox replacement) */
.toggle-switch { position:relative; display:inline-block; width:36px; height:20px; cursor:pointer; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:rgba(82,82,91,0.4); border-radius:20px; transition:background .2s; }
.toggle-slider::before { content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; }
.toggle-switch input:checked + .toggle-slider { background:var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(16px); }
/* Play/Stop icon buttons for COGS active toggle */
.btn-pc-toggle { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:all .15s; background:transparent; padding:0; }
.btn-pc-toggle .icon { width:14px; height:14px; fill:currentColor; stroke:none; }
.btn-pc-toggle.active { color:var(--green); border-color:rgba(52,211,153,0.2); background:rgba(52,211,153,0.08); }
.btn-pc-toggle.active:hover { background:rgba(52,211,153,0.15); border-color:rgba(52,211,153,0.35); }
.btn-pc-toggle.inactive { color:var(--amber); border-color:rgba(251,191,36,0.2); background:rgba(251,191,36,0.08); }
.btn-pc-toggle.inactive:hover { background:rgba(251,191,36,0.15); border-color:rgba(251,191,36,0.35); }
.btn-pc-toggle.btn-pc-del .icon { fill:none; stroke:currentColor; stroke-width:2.5; }
.btn-pc-toggle.btn-pc-del:hover { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.35); }
.btn-sync-products {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: 10px; border: 1px solid var(--accent-glow-strong);
background: var(--accent-dim); color: var(--accent);
font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600;
cursor: pointer; transition: all 0.2s;
}
.btn-sync-products:hover { background: var(--accent-glow-strong); border-color: var(--accent-border); }
.btn-sync-products:disabled { opacity: 0.5; cursor: default; }
.btn-sync-products .icon { color: var(--accent); }
/* ═══ Page Switcher ═══ */
.page-switch {
position: fixed; bottom: 16px; right: 16px;
display: flex; gap: 6px; z-index: 999;
background: rgba(26,27,35,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-subtle);
border-radius: 14px; padding: 6px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
body.light-mode .page-switch {
background: rgba(255,255,255,0.92);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
border-color: var(--border);
}
.page-switch button {
background: transparent; border: 1px solid transparent;
border-radius: 10px; padding: 8px 14px;
color: var(--text-muted); font-family: 'DM Sans', sans-serif;
font-size: 0.78rem; font-weight: 600; cursor: pointer;
transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.page-switch button:hover { color: var(--text); background: var(--accent-dim); }
.page-switch button.active-page { background: var(--accent-bg); color: var(--white); border-color: var(--accent-bg); }
.page-switch button .icon { width: 14px; height: 14px; }
/* ═══ Animations ═══ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.animate { animation: fadeUp 0.35s ease forwards; opacity: 0; }
.tab-fade-in { animation: tabFadeIn 0.3s ease forwards; }
.d1 { animation-delay: 0.04s; } .d2 { animation-delay: 0.08s; } .d3 { animation-delay: 0.12s; }
.d4 { animation-delay: 0.16s; } .d5 { animation-delay: 0.2s; } .d6 { animation-delay: 0.24s; }
.d7 { animation-delay: 0.28s; } .d8 { animation-delay: 0.32s; } .d9 { animation-delay: 0.36s; }
.hidden { display: none; }
/* ═══ Custom Select & Date Picker ═══ */
.custom-select-wrap { position: relative; display: inline-block; }
.custom-select-btn {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 10px; cursor: pointer;
background: var(--bg-card-solid); border: 1px solid var(--border);
color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
transition: all 0.25s; min-width: 120px; user-select: none;
}
.custom-select-btn:hover { border-color: var(--accent-border); background: var(--accent-glow); }
.custom-select-btn.open { border-color: var(--accent-focus); box-shadow: 0 0 0 3px var(--accent-dim); }
.custom-select-btn .cs-arrow { margin-left: auto; width: 14px; height: 14px; transition: transform 0.2s; color: var(--text-muted); }
.custom-select-btn.open .cs-arrow { transform: rotate(180deg); }
.custom-select-btn .cs-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-select-dropdown {
position: fixed; z-index: 9000;
background: var(--bg-card-solid); border: 1px solid var(--accent-glow-strong);
border-radius: 12px; padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: all 0.2s;
}
.custom-select-dropdown.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-opt {
padding: 8px 14px; border-radius: 8px; cursor: pointer;
color: var(--text-dim); font-size: 0.85rem; transition: all 0.15s;
white-space: nowrap;
}
.custom-select-opt:hover { background: var(--accent-glow); color: var(--white); }
.custom-select-opt.selected { background: var(--accent-glow-strong); color: var(--white); font-weight: 600; }
/* Flatpickr dark overrides */
.flatpickr-calendar {
background: var(--bg-card-solid) !important; border: 1px solid var(--accent-glow-strong) !important;
border-radius: 12px !important; box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
font-family: 'DM Sans', sans-serif !important;
}
.flatpickr-months, .flatpickr-month { background: var(--bg-card-solid) !important; border-radius: 12px 12px 0 0 !important; }
.flatpickr-months .flatpickr-month { color: var(--white) !important; fill: var(--white) !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--bg-card-solid) !important; color: var(--white) !important; }
.flatpickr-current-month input.cur-year { color: var(--white) !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--text-dim) !important; fill: var(--text-dim) !important; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: var(--accent) !important; fill: var(--accent) !important; }
.flatpickr-weekdays { background: var(--bg-card-solid) !important; }
span.flatpickr-weekday { color: var(--text-muted) !important; font-weight: 600 !important; }
.flatpickr-day {
color: var(--text-dim) !important; border-radius: 8px !important;
}
.flatpickr-day:hover { background: var(--accent-bg) !important; border-color: transparent !important; color: var(--white) !important; }
.flatpickr-day.today { border-color: var(--accent-focus) !important; }
.flatpickr-day.selected { background: var(--accent) !important; border-color: var(--accent) !important; color: #09090B !important; font-weight: 700 !important; }
.flatpickr-day.flatpickr-disabled { color: var(--text-muted) !important; }
.flatpickr-innerContainer { background: var(--bg-card-solid) !important; border-bottom: 1px solid var(--border-subtle) !important; }
.flatpickr-rContainer { background: var(--bg-card-solid) !important; }
.numInputWrapper:hover { background: var(--accent-dim) !important; }
.flatpickr-monthDropdown-months option { background: var(--bg-card-solid) !important; }
/* ═══ Toast Notifications ═══ */
.toast-container {
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
display: flex; flex-direction: column-reverse; gap: 10px;
pointer-events: none; overflow: hidden;
padding-right: 8px; /* space for toast shadow */
}
.toast {
pointer-events: auto;
display: flex; align-items: center; gap: 10px;
padding: 12px 18px; border-radius: 12px;
background: var(--modal-bg); border: 1px solid var(--border);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
font-size: 0.85rem; font-weight: 500; color: var(--text);
min-width: 260px; max-width: 400px;
transform: translateX(120%); opacity: 0;
animation: toastIn 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
}
.toast.toast-out {
animation: toastOut 0.3s ease forwards;
}
.toast-icon {
width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.toast-icon .icon { width: 14px; height: 14px; }
.toast.toast-success .toast-icon { background: rgba(52,211,153,0.12); color: var(--green); }
.toast.toast-success { border-color: rgba(52,211,153,0.15); }
.toast.toast-error .toast-icon { background: rgba(239,68,68,0.12); color: var(--red); }
.toast.toast-error { border-color: rgba(239,68,68,0.15); }
.toast.toast-info .toast-icon { background: rgba(96,165,250,0.12); color: var(--blue); }
.toast.toast-info { border-color: rgba(96,165,250,0.15); }
@keyframes toastIn {
from { transform: translateX(120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(120%); opacity: 0; }
}
/* ═══ Dropdown / Datepicker z-index fix ═══ */
.custom-select-dropdown {
z-index: 9000 !important;
}
.flatpickr-calendar {
z-index: 9000 !important;
}
@media (max-width: 1200px) { .kpi-grid, .metric-grid { grid-template-columns: repeat(3, 1fr); } .charts-grid { grid-template-columns: 1fr; } .home-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .sidebar { display: none; } .main { margin-left: 0; padding: 20px 20px 100px; } .kpi-grid, .metric-grid { grid-template-columns: repeat(2, 1fr); } .quick-grid { grid-template-columns: repeat(2, 1fr); } .home-features { grid-template-columns: 1fr; } .home-kpi-grid { grid-template-columns: repeat(2, 1fr); } .home-weekly-grid { grid-template-columns: 1fr; } .xp-profiles, .todo-stats-grid, .time-tracker-grid { grid-template-columns: 1fr; } .todo-layout { grid-template-columns: 1fr; } }
/* ═══ Show More Button ═══ */
.show-more-btn {
display: block;
background: var(--accent-dim); color: var(--accent);
border: 1px solid var(--accent-border-soft); border-radius: 50px;
padding: 10px 24px; font-size: 0.82rem; font-weight: 600;
font-family: 'DM Sans', sans-serif;
cursor: pointer; transition: all 0.3s;
margin: 16px auto 16px; text-align: center;
width: fit-content;
}
.show-more-btn:hover {
background: var(--accent-glow-strong); border-color: var(--accent-border-hover); color: var(--accent-soft);
}
/* ═══ Flatpickr Fixes ═══ */
.flatpickr-calendar { overflow: visible !important; }
.flatpickr-current-month { overflow: visible !important; }
/* Show month name only, hide year */
.flatpickr-monthDropdown-months {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
pointer-events: none !important;
background: transparent !important;
border: none !important;
font-weight: 600 !important;
color: var(--white) !important;
font-size: 1rem !important;
}
.flatpickr-current-month .numInputWrapper { display: none !important; }
/* ═══ Auto Sync Indicator ═══ */
@keyframes autoSyncPulse { 0%,100%{opacity:0.3;} 50%{opacity:1;} }
/* ═══ Custom Date Range ═══ */
.date-range-wrap {
display: none; align-items: center; gap: 8px; margin-left: 10px;
}
.date-range-wrap.visible { display: inline-flex; }
.date-range-wrap input {
background: var(--border); border: 1px solid var(--scrollbar-bg);
border-radius: 8px; color: var(--white); padding: 6px 10px; font-size: 0.82rem;
width: 130px; font-family: 'JetBrains Mono', monospace;
}
/* ═══ Objective Achievement Colors ═══ */
.obj-achieved { color: var(--green) !important; }
.obj-almost { color: var(--amber) !important; }
.obj-missed { color: var(--red) !important; }
/* ═══ STOCKS PAGE ═══ */
.stock-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 18px; margin-top: 10px;
}
.stock-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 18px; padding: 24px; position: relative; overflow: hidden;
}
.stock-card::before {
content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(244,114,182,0.4) 20deg, transparent 40deg, transparent 360deg);
animation: card-border-spin 3s linear infinite; opacity: 0; transition: opacity 0.3s;
}
.stock-card::after { content: ''; position: absolute; inset: 1.5px; border-radius: 17px; background: var(--bg-card-solid); z-index: 0; }
.stock-card > * { position: relative; z-index: 1; }
.stock-card:hover::before { opacity: 1; }
.stock-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stock-card-name { font-weight: 800; font-size: 1.05rem; color: var(--white); }
.stock-alert-badge {
padding: 3px 10px; border-radius: 8px; font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
}
.stock-alert-badge.critical { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.stock-alert-badge.warning { background: rgba(251,191,36,0.12); color: var(--amber); border: 1px solid rgba(251,191,36,0.25); }
.stock-main-value {
font-size: 2.2rem; font-weight: 900; color: var(--white);
font-family: 'JetBrains Mono', monospace; line-height: 1.1;
}
.stock-main-label { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 14px; }
.stock-bar-wrap {
width: 100%; height: 6px; background: var(--bg-input);
border-radius: 3px; overflow: hidden; margin-bottom: 16px;
}
.stock-bar {
height: 100%; border-radius: 3px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 10px currentColor;
}
.stock-info-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.stock-info { display: flex; flex-direction: column; gap: 2px; }
.stock-info-val { font-size: 1rem; font-weight: 800; color: var(--white); font-family: 'JetBrains Mono', monospace; }
.stock-info-label { font-size: 0.65rem; color: var(--text-muted); }
/* Projections */
.stock-projection-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 16px; padding: 22px; margin-bottom: 14px;
}
.stock-proj-name { font-weight: 800; color: var(--white); font-size: 0.95rem; margin-bottom: 14px; }
.stock-proj-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.stock-proj-col {
background: var(--bg-input); border: 1px solid var(--border-subtle);
border-radius: 12px; padding: 14px; text-align: center;
}
.stock-proj-col-title { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.stock-proj-date { font-size: 1.1rem; font-weight: 800; color: var(--white); font-family: 'JetBrains Mono', monospace; }
.stock-proj-days { font-size: 0.75rem; color: var(--accent); margin-top: 4px; }
.stock-reco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stock-reco {
display: flex; flex-direction: column; gap: 2px;
background: var(--accent-glow); border: 1px solid var(--accent-bg);
border-radius: 10px; padding: 10px 12px; text-align: center;
}
.stock-reco-val { font-size: 1.1rem; font-weight: 800; color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.stock-reco-label { font-size: 0.62rem; color: var(--text-muted); }
/* Stock History Table */
.stock-history-table {
width: 100%; border-collapse: collapse;
font-size: 0.82rem; color: var(--white);
}
.stock-history-table th {
text-align: left; padding: 10px 12px; font-size: 0.7rem;
color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
border-bottom: 1px solid var(--border);
}
.stock-history-table td {
padding: 10px 12px; border-bottom: 1px solid var(--border-subtle);
font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
}
.stock-history-table tr:hover td { background: var(--accent-faint); }
/* Stock Update Modal */
.stock-modal-overlay {
position: fixed; inset: 0; z-index: 9999;
background: var(--overlay-bg); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
animation: fadeIn 0.15s ease;
}
.stock-modal {
background: var(--modal-bg); border: 1px solid var(--border);
border-radius: 20px; padding: 28px 32px; width: 420px; max-width: 92vw;
box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.stock-modal-header {
display: flex; align-items: center; justify-content: space-between;
font-weight: 800; font-size: 1.05rem; color: var(--white); margin-bottom: 16px;
}
.stock-modal-close {
background: none; border: none; color: var(--text-muted); font-size: 1.4rem;
cursor: pointer; transition: color 0.2s; line-height: 1; padding: 0 4px;
}
.stock-modal-close:hover { color: var(--red); }
.stock-modal-current {
font-size: 0.85rem; color: var(--text-dim); margin-bottom: 20px;
padding: 10px 14px; background: var(--bg-input);
border-radius: 10px; border: 1px solid var(--border-subtle);
}
.stock-modal-current strong { color: var(--white); font-weight: 700; }
.stock-modal-field { margin-bottom: 18px; }
.stock-modal-label {
display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.stock-modal-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.stock-reason-opt {
padding: 6px 14px; border-radius: 10px; font-size: 0.78rem;
background: var(--bg-input); border: 1px solid var(--border);
color: var(--text-dim); cursor: pointer; transition: all 0.2s;
}
.stock-reason-opt input { display: none; }
.stock-reason-opt.selected { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border-soft); }
.stock-reason-opt:hover { border-color: rgba(255,255,255,0.1); }
.stock-modal-actions {
display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px;
padding-top: 18px; border-top: 1px solid var(--border-subtle);
}
.btn-secondary {
padding: 9px 22px;
background: var(--bg-input);
color: var(--text-dim); border: 1px solid var(--scrollbar-bg);
border-radius: 50px;
font-family: 'DM Sans', sans-serif;
font-weight: 600; font-size: 0.82rem;
cursor: pointer; transition: all 0.3s;
}
.btn-secondary:hover {
background: rgba(255,255,255,0.07); color: var(--text);
border-color: rgba(255,255,255,0.15);
}
.stock-modal-actions .btn-primary {
width: auto; padding: 9px 22px; font-size: 0.82rem;
border-radius: 50px;
}
/* ═══ Skeleton loading for tables / comments ═══ */
.skeleton-table-wrap { padding: 16px 0; }
.skeleton-row {
display: flex; gap: 14px; align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
}
.skeleton-row:last-child { border-bottom: none; }
.skeleton-thumb {
width: 36px; height: 36px;
border-radius: 8px; flex-shrink: 0;
}
.skeleton-comments-wrap { padding: 16px 0; }
.skeleton-comment {
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 18px;
margin-bottom: 10px;
}
/* ═══ Phase 2 — Top Ads / Landing Pages / Audiences / Comments ═══ */
/* Ad thumbnails */
.ads-thumb {
width: 36px; height: 36px;
border-radius: 8px;
object-fit: cover;
display: block;
}
.ads-thumb-placeholder {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--scrollbar-bg);
display: flex; align-items: center; justify-content: center;
}
/* Comment cards */
.ads-comment-card {
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 18px;
margin-bottom: 10px;
transition: border-color 0.2s;
}
.ads-comment-card:hover {
border-color: var(--accent-border);
}
.ads-comment-header {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
}
.ads-comment-author {
font-weight: 600; font-size: 0.88rem;
color: var(--text);
}
.ads-comment-date {
margin-left: auto;
font-size: 0.78rem;
color: var(--text-muted);
font-family: 'JetBrains Mono', monospace;
}
.ads-comment-body {
font-size: 0.88rem;
color: var(--text-dim);
line-height: 1.5;
margin-bottom: 6px;
word-break: break-word;
}
.ads-comment-meta {
display: flex; gap: 16px; align-items: center;
}
.ads-comment-badge-hidden {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--red);
background: rgba(239,68,68,0.12);
padding: 2px 8px;
border-radius: 4px;
}
/* ═══ Creatives Grid ═══ */
.creatives-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 8px 0;
}
@media (max-width: 1024px) {
.creatives-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.creatives-grid { grid-template-columns: 1fr; }
}
.creative-card-link {
text-decoration: none; color: inherit; display: block;
}
.creative-card {
border-radius: 14px;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
cursor: pointer;
display: flex; flex-direction: column;
}
.creative-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
border-color: var(--accent-border);
}
.creative-card-media {
width: 100%; height: 200px;
overflow: hidden; position: relative;
background: var(--bg-card-solid);
}
.creative-card-img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.creative-card-img-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 2rem; font-weight: 700;
}
.creative-card-content {
padding: 14px 16px;
flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.creative-card-title {
font-weight: 700; font-size: 0.9rem;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.creative-card-subtitle {
font-size: 0.82rem; color: var(--accent);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.creative-card-body {
font-size: 0.78rem; color: var(--text-dim);
line-height: 1.4;
max-height: 3.6em; overflow: hidden;
margin: 2px 0;
}
.creative-card-campaign {
font-size: 0.72rem; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: auto; padding-top: 4px;
}
.creative-card-metrics {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 6px 12px; margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-subtle);
}
.creative-metric-label {
display: block; font-size: 0.68rem; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
.creative-metric-value {
display: block; font-size: 0.82rem; font-weight: 600;
color: var(--text);
font-family: 'JetBrains Mono', monospace;
}
/* ═══ Ads Alerts ═══ */
.ads-alerts-wrap {
margin-bottom: 20px;
}
.ads-alert-item {
padding: 12px 16px;
border-radius: 10px;
margin-bottom: 8px;
transition: all 0.2s;
}
.ads-alert-badge {
display: inline-block;
font-size: 0.62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 7px;
border-radius: 4px;
line-height: 1.4;
}
/* Responsive: tables scroll on mobile */
@media (max-width: 768px) {
#ads-sub-tab-0 .table-wrap,
#ads-sub-tab-1 .table-wrap,
#ads-sub-tab-2 .table-wrap,
#ads-sub-tab-3 .table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#ads-sub-tab-0 .table-wrap table,
#ads-sub-tab-1 .table-wrap table,
#ads-sub-tab-2 .table-wrap table {
min-width: 700px;
}
}
/* ═══ Light Mode Overrides ═══ */
body.light-mode .main-bg,
html.light-mode body .main-bg {
background-color: var(--bg);
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
body.light-mode .kpi-card,
body.light-mode .metric-card,
body.light-mode .pnl-card,
body.light-mode .chart-card,
body.light-mode .evo-card,
body.light-mode .table-wrap,
body.light-mode .todo-add-card,
body.light-mode .todo-list-card,
body.light-mode .tabs-bar,
body.light-mode .xp-card,
body.light-mode .time-card,
body.light-mode .feature-block,
body.light-mode .quick-card,
body.light-mode .store-card,
body.light-mode .glass-card,
body.light-mode .form-card,
body.light-mode .stock-card,
body.light-mode .home-kpi-card,
body.light-mode .home-weekly-card,
body.light-mode .home-compare-card,
body.light-mode .creative-card {
box-shadow: var(--card-shadow);
background: var(--bg-card-solid);
}
body.light-mode .kpi-card::before,
body.light-mode .metric-card::before,
body.light-mode .pnl-card::before,
body.light-mode .chart-card::before,
body.light-mode .evo-card::before,
body.light-mode .table-wrap::before,
body.light-mode .todo-add-card::before,
body.light-mode .todo-list-card::before,
body.light-mode .xp-card::before,
body.light-mode .time-card::before,
body.light-mode .feature-block::before,
body.light-mode .quick-card::before,
body.light-mode .store-card::before,
body.light-mode .glass-card::before,
body.light-mode .form-card::before,
body.light-mode .stock-card::before,
body.light-mode .home-kpi-card::before,
body.light-mode .home-weekly-card::before,
body.light-mode .home-compare-card::before {
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg, rgba(127,29,29,0.6) 20deg, transparent 40deg, transparent 360deg);
}
body.light-mode .kpi-card::after,
body.light-mode .metric-card::after,
body.light-mode .pnl-card::after,
body.light-mode .chart-card::after,
body.light-mode .evo-card::after,
body.light-mode .table-wrap::after,
body.light-mode .todo-add-card::after,
body.light-mode .todo-list-card::after,
body.light-mode .xp-card::after,
body.light-mode .time-card::after,
body.light-mode .feature-block::after,
body.light-mode .quick-card::after,
body.light-mode .store-card::after,
body.light-mode .glass-card::after,
body.light-mode .form-card::after,
body.light-mode .stock-card::after,
body.light-mode .home-kpi-card::after,
body.light-mode .home-weekly-card::after,
body.light-mode .home-compare-card::after {
background: var(--bg-card-solid);
}
body.light-mode .kpi-card > *,
body.light-mode .metric-card > *,
body.light-mode .pnl-card > *,
body.light-mode .chart-card > *,
body.light-mode .evo-card > *,
body.light-mode .table-wrap > *,
body.light-mode .todo-add-card > *,
body.light-mode .todo-list-card > *,
body.light-mode .xp-card > *,
body.light-mode .time-card > *,
body.light-mode .feature-block > *,
body.light-mode .quick-card > *,
body.light-mode .store-card > *,
body.light-mode .glass-card > *,
body.light-mode .form-card > *,
body.light-mode .stock-card > *,
body.light-mode .home-kpi-card > *,
body.light-mode .home-weekly-card > *,
body.light-mode .home-compare-card > * {
position: relative; z-index: 1;
}
body.light-mode .home-compare-text strong { color: var(--text-primary); }
body.light-mode .home-top-name { color: var(--text-primary); }
body.light-mode .sim-bundle-dropdown { background: var(--bg-card-solid); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
body.light-mode .sim-bundle-dropdown-item:hover { background: rgba(0,0,0,0.04); }
body.light-mode .sim-bundle-chip { background: rgba(0,0,0,0.03); border-color: var(--border); }
body.light-mode .sidebar {
backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* ═══ Light Mode — Hero / Login Page ═══ */
body.light-mode .hero-bg-grid {
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
body.light-mode .hero-login-input:focus {
border-color: rgba(127,29,29,0.3);
box-shadow: 0 0 0 3px rgba(127,29,29,0.06), 0 0 20px rgba(127,29,29,0.05);
}
body.light-mode .hero-login-btn-wrap {
background: rgba(127,29,29,0.15);
}
body.light-mode .hero-login-btn-wrap::before {
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg,
rgba(127,29,29,0.8) 20deg,
transparent 40deg,
transparent 360deg);
}
body.light-mode .hero-login-btn {
background: var(--bg-card-solid);
border: 1px solid var(--accent-border);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
color: var(--accent);
}
body.light-mode .hero-login-btn:hover {
background: var(--bg-card-hover);
border-color: var(--accent-border-hover);
color: var(--accent-soft);
box-shadow: 0 0 20px var(--accent-dim);
}
/* ═══ Light Mode — Landing Page ═══ */
body.light-mode .hero-grid-wave-h {
background: linear-gradient(90deg,
transparent 0%, rgba(0,0,0,0.06) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 70%, transparent 100%);
}
body.light-mode .hero-grid-wave-v {
background: linear-gradient(180deg,
transparent 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.05) 70%, transparent 100%);
}
body.light-mode .hero-preview {
box-shadow: 0 40px 100px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.1);
}
body.light-mode .nav-scrolled {
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
body.light-mode .pricing-plan-card:hover {
border-color: rgba(0,0,0,0.1);
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
body.light-mode .pricing-plan-btn:hover {
background: var(--scrollbar-bg); color: var(--text);
border-color: rgba(0,0,0,0.15);
}
body.light-mode .pricing-toggle-badge {
background: rgba(5,150,105,0.1); border-color: rgba(5,150,105,0.2);
color: var(--green);
}
/* ═══ Light Mode — Flatpickr ═══ */
body.light-mode .flatpickr-day.selected {
color: #FFFFFF !important;
}
body.light-mode .flatpickr-calendar {
background: var(--bg-card-solid) !important;
border-color: var(--border) !important;
box-shadow: var(--card-shadow) !important;
}
body.light-mode .flatpickr-day {
color: var(--text) !important;
}
body.light-mode .flatpickr-day:hover {
background: var(--bg-input) !important;
border-color: var(--border) !important;
}
body.light-mode .flatpickr-months .flatpickr-month,
body.light-mode .flatpickr-weekdays,
body.light-mode span.flatpickr-weekday {
background: var(--bg-card-solid) !important;
color: var(--text-dim) !important;
}
body.light-mode .flatpickr-current-month input.cur-year,
body.light-mode .flatpickr-current-month .flatpickr-monthDropdown-months {
color: var(--text) !important;
}
/* Theme switch (pill toggle) */
.sidebar-bottom-row { display: flex; gap: 8px; margin-bottom: 8px; }
.theme-switch-row {
display: flex; align-items: center; gap: 8px;
cursor: pointer; padding: 6px 0; margin-bottom: 8px;
user-select: none; -webkit-user-select: none;
}
.theme-switch-icon {
width: 14px; height: 14px; color: var(--text-muted);
stroke: currentColor; stroke-width: 1.8; fill: none;
stroke-linecap: round; stroke-linejoin: round;
transition: color 0.3s;
}
.theme-switch-track {
position: relative; width: 40px; height: 22px;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 22px; transition: all 0.3s ease; flex-shrink: 0;
}
.theme-switch-thumb {
position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--text-dim);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
body.light-mode .theme-switch-thumb { left: 20px; background: var(--accent); }
body.light-mode .theme-switch-track { background: var(--accent-dim); border-color: var(--accent-border); }
body.light-mode .theme-switch-icon:last-of-type { color: var(--accent); }
.theme-switch-row:hover .theme-switch-track { border-color: var(--accent-border); }
.theme-switch-row:hover .theme-switch-thumb { background: var(--accent); }
/* Inline variant for landing page header */
.theme-switch-inline { margin-bottom: 0; padding: 0; margin-left: 8px; }
.theme-switch-inline .theme-switch-icon { width: 13px; height: 13px; }
.theme-switch-inline .theme-switch-track { width: 36px; height: 20px; }
.theme-switch-inline .theme-switch-thumb { width: 14px; height: 14px; }
body.light-mode .theme-switch-inline .theme-switch-thumb { left: 18px; }
/* Floating variant for login/signup */
.theme-toggle-float {
position: fixed; top: 16px; right: 16px; z-index: 999;
display: flex; align-items: center; gap: 6px;
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 22px; padding: 5px 10px;
cursor: pointer; transition: all 0.25s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
user-select: none; -webkit-user-select: none;
}
.theme-toggle-float .theme-switch-icon { width: 13px; height: 13px; }
.theme-toggle-float .theme-switch-track { width: 36px; height: 20px; }
.theme-toggle-float .theme-switch-thumb { width: 14px; height: 14px; }
body.light-mode .theme-toggle-float .theme-switch-thumb { left: 18px; }
.theme-toggle-float:hover { border-color: var(--accent-border); }