/* ============== Clauss Trade — Gradient Panel Theme ============== */
:root {
--bg: #050d09;
--bg-2: #081311;
--bg-3: #0d1a16;
--card: #0d1a14;
--card-hi: #11241d;
--neon: #00ffa3;
--neon-2: #00d98a;
--neon-3: #34dcb1;
--neon-soft: rgba(0,255,163,0.18);
--neon-glow: rgba(0,255,163,0.38);
--text: #d6e6dc;
--text-2: #9ab5a6;
--muted: #5b7468;
--border: rgba(0,255,163,0.16);
--danger: #ff5e6c;
--warn: #ffc83d;
--blue: #4f8cff;
/* Gradient palette */
--grad-bg: radial-gradient(120% 80% at 50% -20%, rgba(0,255,163,0.10), transparent 50%),
radial-gradient(80% 60% at 100% 100%, rgba(0,217,138,0.06), transparent 50%),
#050d09;
--grad-card: linear-gradient(140deg, rgba(0,255,163,0.05) 0%, rgba(0,217,138,0.015) 60%, rgba(0,0,0,0) 100%);
--grad-card-hi: linear-gradient(140deg, rgba(0,255,163,0.13) 0%, rgba(0,217,138,0.05) 60%, rgba(0,0,0,0) 100%);
--grad-neon: linear-gradient(135deg, #00ffa3 0%, #00d98a 50%, #00b377 100%);
--grad-neon-soft: linear-gradient(135deg, rgba(0,255,163,0.22), rgba(0,217,138,0.12));
--grad-topbar: linear-gradient(180deg, rgba(0,255,163,0.06) 0%, transparent 100%);
--grad-bottombar: linear-gradient(0deg, rgba(0,255,163,0.04) 0%, transparent 100%);
--grad-divider: linear-gradient(90deg, transparent, var(--neon), transparent);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
font-family: 'Space Mono','Inter',-apple-system,'Segoe UI',sans-serif;
background: #050d09;
color: var(--text);
-webkit-font-smoothing: antialiased;
overflow: hidden;
position: relative;
}
body::before {
/* slowly drifting neon glow blobs behind everything */
content: '';
position: fixed; inset: -10%;
background:
radial-gradient(35% 35% at 25% 18%, rgba(0,255,163,0.10), transparent 70%),
radial-gradient(38% 38% at 78% 80%, rgba(0,217,138,0.07), transparent 70%),
radial-gradient(30% 30% at 50% 50%, rgba(52,220,177,0.05), transparent 70%);
animation: bg-drift 18s ease-in-out infinite alternate;
z-index: -1;
pointer-events: none;
}
@keyframes bg-drift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-3%, 4%) scale(1.05); }
100% { transform: translate(4%, -2%) scale(1.02); }
}
button { font: inherit; }
input, select, button { font-family: inherit; }
input:focus, select:focus, button:focus { outline: none; }
.app {
max-width: 480px;
margin: 0 auto;
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
position: relative;
background: transparent;
overflow: hidden;
}
@media (min-width: 600px) {
.app { max-width: 480px; box-shadow: 0 0 60px rgba(0,255,163,0.12); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}
/* ============== Top Bar ============== */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px;
background: var(--grad-topbar);
flex-shrink: 0;
position: relative;
}
.topbar::after {
content: '';
position: absolute; bottom: 0; left: 8px; right: 8px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--neon), transparent);
background-size: 200% 100%;
background-position: -100% 0;
opacity: 0.6;
animation: shimmer-line 5s linear infinite;
}
@keyframes shimmer-line {
0% { background-position: -100% 0; }
100% { background-position: 200% 0; }
}
.logo-wrap { display: flex; align-items: center; gap: 10px; }
.logo-icon {
width: 46px; height: 46px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
position: relative;
background:
linear-gradient(135deg, #00ffa3 0%, #00d98a 35%, #00b377 65%, #00ffa3 100%);
background-size: 220% 220%;
animation: logo-shift 5.2s ease-in-out infinite;
box-shadow: 0 0 22px var(--neon-glow), inset 0 1px 0 rgba(255,255,255,0.35);
overflow: hidden;
}
.logo-icon::before {
/* slow rotating conic sheen */
content: ''; position: absolute; inset: -25%;
background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.35) 12%, transparent 30%);
animation: logo-spin 6s linear infinite;
pointer-events: none;
}
.logo-icon::after {
content: ''; position: absolute; inset: -4px;
border-radius: 14px;
background: radial-gradient(circle, var(--neon-soft), transparent 70%);
z-index: -1;
filter: blur(8px);
animation: logo-pulse 3.5s ease-in-out infinite;
}
.logo-icon svg { position: relative; z-index: 1; }
@keyframes logo-shift {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
}
@keyframes logo-spin { to { transform: rotate(360deg); } }
@keyframes logo-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
/* shine handled in main rule */
.logo-text { line-height: 1; }
.logo-name {
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 22px;
color: var(--neon);
letter-spacing: 0.5px;
text-shadow: 0 0 12px var(--neon-glow);
}
.logo-sub {
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 4px;
color: var(--text-2);
margin-top: 3px;
}
.top-actions { display: flex; gap: 8px; }
/* ============== Market mode menu (kebab) ============== */
.market-menu-wrap { position: relative; }
.mm-trigger svg { width: 18px; height: 18px; }
.market-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 70;
min-width: 280px;
background: linear-gradient(180deg, rgba(8,22,16,0.97), rgba(4,12,9,0.97));
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,163,0.12);
backdrop-filter: blur(8px);
animation: mm-pop 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mm-pop {
from { opacity: 0; transform: translateY(-6px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.market-menu-head {
font-family: 'Space Mono', monospace;
font-size: 10.5px;
color: var(--muted);
letter-spacing: 2.5px;
text-transform: uppercase;
padding: 6px 10px 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 6px;
}
.market-menu-item {
display: flex; align-items: center; gap: 12px;
width: 100%;
padding: 10px 10px;
background: transparent;
border: 1px solid transparent;
border-radius: 9px;
color: var(--text);
cursor: pointer;
text-align: left;
transition: background 0.12s, border-color 0.12s;
}
.market-menu-item:hover:not(.disabled) {
background: rgba(0,255,163,0.06);
border-color: rgba(0,255,163,0.18);
}
.market-menu-item.active {
background: rgba(0,255,163,0.08);
border-color: rgba(0,255,163,0.28);
}
.market-menu-item.disabled {
opacity: 0.55;
cursor: not-allowed;
}
.mm-icon {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,255,163,0.10);
border-radius: 8px;
color: var(--neon);
flex-shrink: 0;
}
.market-menu-item.disabled .mm-icon {
background: rgba(155,181,166,0.10);
color: var(--muted);
}
.mm-info { flex: 1; min-width: 0; }
.mm-title {
font-family: 'Space Mono', monospace;
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.2px;
}
.mm-desc {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
letter-spacing: 0.3px;
}
.mm-tag {
font-family: 'Space Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
padding: 3px 7px;
border-radius: 5px;
flex-shrink: 0;
}
.mm-tag.active-tag {
background: rgba(0,255,163,0.18);
color: var(--neon);
}
.mm-tag.soon-tag {
background: rgba(255,180,40,0.18);
color: #ffb428;
border: 1px solid rgba(255,180,40,0.30);
animation: soon-pulse 2s ease-in-out infinite;
}
@keyframes soon-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,180,40,0); }
50% { box-shadow: 0 0 0 4px rgba(255,180,40,0.15); }
}
.round-ghost {
position: relative;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.08);
background:
radial-gradient(circle at 30% 25%, rgba(0,255,163,0.10), rgba(0,255,163,0.02) 60%),
rgba(255,255,255,0.02);
color: var(--text);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
-webkit-tap-highlight-color: transparent;
}
.round-ghost::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.round-ghost:hover {
background:
radial-gradient(circle at 30% 25%, rgba(0,255,163,0.22), rgba(0,255,163,0.04) 70%),
rgba(0,255,163,0.04);
border-color: rgba(0,255,163,0.55);
color: var(--neon);
box-shadow: 0 0 0 1px rgba(0,255,163,0.18), 0 0 18px var(--neon-glow);
}
.round-ghost:active {
transform: scale(0.95);
box-shadow: 0 0 0 1px rgba(0,255,163,0.22), 0 0 8px var(--neon-glow);
}
/* ============== Filter row (Log Signal only) ============== */
.filter-row {
display: flex; gap: 10px;
padding: 10px 16px 12px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
/* Hide it on Kelola & Konfig tabs — those rows belong to Log Signal only */
.app[data-tab="manage"] .filter-row,
.app[data-tab="config"] .filter-row,
.app[data-tab="positions"] .filter-row { display: none; }
.filter-row .custom-select { flex: 1; }
/* Hapus Log button — match cs-trigger size supaya filter-row balanced */
.filter-row .ghost-btn {
padding: 8px 12px;
font-size: 12.5px;
font-weight: 600;
}
/* ============== Custom select (theme-matched dropdown) ============== */
.custom-select { position: relative; font-family: 'Space Mono', monospace; }
.cs-trigger {
width: 100%;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px 8px 12px;
color: var(--text);
font-size: 12.5px;
font-family: 'Space Mono', monospace;
cursor: pointer;
display: flex; align-items: center; gap: 8px;
text-align: left;
}
.cs-trigger:hover, .custom-select.open .cs-trigger {
border-color: var(--neon);
box-shadow: 0 0 10px var(--neon-soft);
}
.cs-label {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-chevron {
width: 18px; height: 18px;
color: var(--text-2);
flex-shrink: 0;
transition: transform 0.2s;
}
.custom-select.open .cs-chevron { transform: rotate(180deg); color: var(--neon); }
.cs-menu {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
background: var(--card);
border: 1px solid var(--neon);
border-radius: 10px;
padding: 4px;
z-index: 200;
box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 14px var(--neon-soft);
animation: drop 0.14s;
max-height: 320px;
overflow-y: auto;
pointer-events: auto;
}
.custom-select.open { z-index: 199; }
.cs-trigger { pointer-events: auto; }
.cs-option { pointer-events: auto; min-height: 36px; }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cs-option {
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
color: var(--text);
font-size: 13.5px;
display: flex; justify-content: space-between; align-items: center;
gap: 8px;
font-family: 'Space Mono', monospace;
}
.cs-option:hover { background: var(--neon-soft); }
.cs-option.selected { color: var(--neon); }
.cs-option.selected::after {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--neon);
box-shadow: 0 0 6px var(--neon-glow);
}
.set-row .custom-select { width: 56%; }
.ghost-btn {
background: var(--card);
color: var(--text-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 11px 14px;
font-family: 'Space Mono', monospace;
font-size: 13px;
cursor: pointer;
transition: all 0.18s;
}
.ghost-btn:hover, .ghost-btn:active {
color: var(--neon);
border-color: var(--neon);
box-shadow: 0 0 12px var(--neon-glow);
}
/* ============== Tabs / content ============== */
.content {
flex: 1;
overflow-y: auto;
padding: 12px 16px 24px;
scrollbar-width: thin;
scrollbar-color: var(--neon-soft) transparent;
}
/* ============== Scanner header (in Log Signal tab) ============== */
.scanner-header {
background: linear-gradient(135deg, rgba(34,197,94,0.06), rgba(34,197,94,0.02));
border: 1px solid rgba(34,197,94,0.18);
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 12px;
}
.scanner-header .sh-row {
display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.scanner-header .sh-badge {
background: var(--neon-soft); color: var(--neon);
padding: 3px 10px; border-radius: 12px;
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
}
.scanner-header .sh-badge.idle {
background: rgba(245,158,11,0.12); color: #f59e0b;
}
.scanner-header .sh-status {
color: var(--text); font-size: 13px; font-weight: 600;
}
.scanner-header .sh-meta {
color: var(--muted); font-size: 11px;
font-family: 'Space Mono', monospace;
}
.scanner-header .scanner-chip {
display: inline-flex; align-items: center;
background: rgba(34,197,94,0.10); color: var(--neon);
padding: 2px 8px; border-radius: 12px;
font-size: 11px; font-weight: 600;
margin-right: 4px; margin-bottom: 2px;
}
.signal-card .scanner-tag {
display: inline-block;
background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
color: var(--neon); border: 1px solid rgba(34,197,94,0.30);
padding: 3px 10px; border-radius: 10px;
font-size: 11px; font-weight: 700;
margin-bottom: 8px;
letter-spacing: 0.3px;
}
/* Per-scanner list di tab Konfig — tiap preset ada tombol Scan/STOP */
.scanner-list {
display: flex; flex-direction: column; gap: 6px;
margin-top: 10px;
}
.sc-empty { color: var(--muted); font-size: 12px; padding: 8px 0; }
.sc-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.15s ease;
}
.sc-row.active {
border-color: var(--neon);
background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.02));
}
.sc-info { flex: 1; min-width: 0; }
.sc-name {
font-size: 13px; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-detail {
color: var(--neon); font-size: 10.5px;
font-family: 'Space Mono', monospace; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-btn {
flex-shrink: 0; min-width: 64px;
padding: 7px 14px; border-radius: 8px;
border: none; cursor: pointer;
font-family: inherit; font-size: 11px; font-weight: 700;
letter-spacing: 0.5px; text-transform: uppercase;
transition: filter 0.15s ease, transform 0.1s ease;
}
.sc-btn.start {
background: linear-gradient(135deg, var(--neon), var(--neon-2));
color: #0a1410;
}
.sc-btn.stop {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
}
.sc-btn:hover { filter: brightness(1.08); }
.sc-btn:active { transform: scale(0.95); }
/* Read-only status pill (replace tombol toggle di main app) */
.sc-status-pill {
flex-shrink: 0;
padding: 5px 10px; border-radius: 12px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.4px;
}
.sc-status-pill.on {
background: rgba(34,197,94,0.15);
color: var(--neon);
border: 1px solid rgba(34,197,94,0.30);
}
.sc-status-pill.off {
background: rgba(255,255,255,0.04);
color: var(--muted);
border: 1px solid var(--border);
}
.scanner-readonly-hint {
margin-top: 10px; padding: 8px 12px;
background: rgba(34,197,94,0.04);
border: 1px dashed rgba(34,197,94,0.20);
border-radius: 8px;
color: var(--muted); font-size: 11px;
text-align: center;
}
/* Bulk action buttons */
.scanner-bulk {
display: flex; gap: 8px; margin-top: 10px;
}
.scan-bulk-btn {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 14px; border-radius: 10px; border: none;
font-family: inherit; font-size: 12px; font-weight: 700;
letter-spacing: 0.5px; text-transform: uppercase;
cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease;
}
.scan-bulk-btn.primary {
background: linear-gradient(135deg, var(--neon), var(--neon-2));
color: #0a1410;
}
.scan-bulk-btn.danger {
background: rgba(239,68,68,0.12); color: #ef4444;
border: 1px solid rgba(239,68,68,0.25);
}
.scan-bulk-btn:hover { filter: brightness(1.08); }
.scan-bulk-btn:active { transform: scale(0.97); }
.scan-bulk-btn.primary svg { stroke: #0a1410; }
/* Tombol delete preset di row */
.sc-row .sc-del {
flex-shrink: 0;
width: 28px; height: 28px; padding: 0;
background: transparent; color: var(--muted);
border: 1px solid var(--border); border-radius: 6px;
font-size: 16px; line-height: 1; cursor: pointer;
transition: all 0.15s ease;
}
.sc-row .sc-del:hover {
color: #ef4444; border-color: #ef4444;
background: rgba(239,68,68,0.08);
}
/* Tombol Tambah Scanner */
.scan-add-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; margin-top: 8px;
padding: 10px 14px; border-radius: 10px;
background: transparent; color: var(--neon);
border: 1px dashed var(--neon-soft);
font-family: inherit; font-size: 12px; font-weight: 600;
letter-spacing: 0.5px; text-transform: uppercase;
cursor: pointer; transition: all 0.15s ease;
}
.scan-add-btn:hover {
background: rgba(34,197,94,0.06);
border-color: var(--neon);
}
/* Modal Tambah Scanner */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
z-index: 100; padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
background: var(--panel); border: 1px solid var(--border);
border-radius: 14px; padding: 20px;
width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
}
.modal-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.modal-head h3 { margin: 0; font-size: 16px; color: var(--text); }
.modal-close {
background: transparent; border: none; color: var(--muted);
font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 10px;
border-radius: 6px;
}
.modal-close:hover { background: var(--panel-2); color: var(--text); }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.form-row {
display: flex; flex-direction: column; gap: 5px;
}
.form-row span {
font-size: 11px; color: var(--muted);
font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
}
.form-row input,
.form-row select,
.form-row textarea {
background: var(--panel-2); border: 1px solid var(--border);
color: var(--text); border-radius: 8px;
padding: 9px 12px; font-family: inherit; font-size: 13px;
outline: none; transition: border-color 0.15s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
border-color: var(--neon);
}
.form-row textarea { resize: vertical; min-height: 50px; }
.modal-actions {
display: flex; gap: 8px; margin-top: 6px;
}
.btn-cancel, .btn-save {
flex: 1; padding: 11px 16px; border-radius: 10px;
font-family: inherit; font-size: 13px; font-weight: 700;
letter-spacing: 0.5px; text-transform: uppercase;
cursor: pointer; border: none;
transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-cancel {
background: var(--panel-2); color: var(--muted);
border: 1px solid var(--border);
}
.btn-cancel:hover { color: var(--text); }
.btn-save {
background: linear-gradient(135deg, var(--neon), var(--neon-2));
color: #0a1410;
}
.btn-save:hover { filter: brightness(1.05); }
.btn-save:active { transform: scale(0.98); }
.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-thumb { background: var(--neon-soft); border-radius: 2px; }
.tab { animation: tab-in 0.42s cubic-bezier(0.2, 0.85, 0.25, 1); }
@keyframes tab-in {
from { opacity: 0; transform: translateY(12px) scale(0.985); filter: blur(6px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Stagger cards inside Log Signal & Kelola lists */
.pair-card, .manage-item {
animation: card-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
.pair-list .pair-card:nth-child(1),
.manage-list .manage-item:nth-child(1) { animation-delay: 0.02s; }
.pair-list .pair-card:nth-child(2),
.manage-list .manage-item:nth-child(2) { animation-delay: 0.06s; }
.pair-list .pair-card:nth-child(3),
.manage-list .manage-item:nth-child(3) { animation-delay: 0.10s; }
.pair-list .pair-card:nth-child(4),
.manage-list .manage-item:nth-child(4) { animation-delay: 0.14s; }
.pair-list .pair-card:nth-child(5),
.manage-list .manage-item:nth-child(5) { animation-delay: 0.18s; }
.pair-list .pair-card:nth-child(6),
.manage-list .manage-item:nth-child(6) { animation-delay: 0.22s; }
.pair-list .pair-card:nth-child(n+7),
.manage-list .manage-item:nth-child(n+7) { animation-delay: 0.26s; }
@keyframes card-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============== Screening (primary) button ============== */
/* ===== Cari Signal — premium minimalist CTA ===== */
.screen-btn {
position: relative;
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 13px 16px 13px 13px;
margin-bottom: 12px;
background:
linear-gradient(135deg, rgba(0,255,163,0.18), rgba(0,212,255,0.10) 60%, rgba(0,255,163,0.18)),
rgba(0,0,0,0.40);
color: var(--neon);
border: 1px solid rgba(0,255,163,0.32);
border-radius: 14px;
font-family: 'Space Mono', monospace;
font-weight: 700;
letter-spacing: 0.4px;
cursor: pointer;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
inset 0 0 22px rgba(0,255,163,0.10),
0 8px 24px rgba(0,255,163,0.18);
transition: transform 0.12s ease, box-shadow 0.22s ease, border-color 0.22s ease;
-webkit-tap-highlight-color: transparent;
}
/* Sweeping shimmer — halus, idle dan tetap hidup tanpa berisik */
.screen-btn::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(0,255,163,0.18) 50%, transparent 70%);
transform: translateX(-100%);
animation: sb-shimmer 4.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes sb-shimmer {
0% { transform: translateX(-100%); }
60% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
.screen-btn:hover {
transform: translateY(-1px);
border-color: rgba(0,255,163,0.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 0 28px rgba(0,255,163,0.16),
0 10px 30px rgba(0,255,163,0.28);
}
.screen-btn:active { transform: scale(0.985); }
.screen-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Icon dalam slot lingkaran kecil */
.screen-btn .sb-icon {
width: 32px; height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center; justify-content: center;
background: rgba(0,255,163,0.16);
border: 1px solid rgba(0,255,163,0.32);
color: var(--neon);
flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(0,255,163,0.3);
transition: box-shadow 0.6s ease, transform 0.22s ease;
}
.screen-btn:hover .sb-icon {
transform: rotate(-6deg);
box-shadow: 0 0 0 4px rgba(0,255,163,0.10), 0 0 14px rgba(0,255,163,0.35);
}
.screen-btn .sb-label {
text-align: left;
font-size: 14px;
letter-spacing: 0.6px;
text-shadow: 0 0 10px rgba(0,255,163,0.30);
}
.screen-btn .sb-sub {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 4px 8px;
border-radius: 6px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(0,255,163,0.20);
color: var(--neon);
opacity: 0.85;
}
/* Loading state — icon spinning + sub badge animasi pulse */
.screen-btn.loading { cursor: progress; }
.screen-btn.loading .sb-icon svg { animation: spin 1.05s linear infinite; }
.screen-btn.loading::before { animation-duration: 1.4s; }
.screen-btn.loading .sb-sub { animation: sb-pulse 1.1s ease-in-out infinite; }
@keyframes sb-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
/* ============== Pair card (Log Signal) ============== */
.pair-card {
background: var(--grad-card), var(--card);
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 10px;
cursor: pointer;
transition: border-color 0.2s ease;
position: relative;
overflow: hidden;
/* Padding di-pindah ke .pair-card-inner supaya swipe transform bersih */
}
/* Inner: konten card (icon + info + unread). Bisa translateX saat swipe. */
.pair-card .pair-card-inner {
background: inherit;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 2;
transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
border-radius: inherit;
touch-action: pan-y;
}
.pair-card.swiped-right .pair-card-inner {
transform: translateX(90px);
}
/* Action area di kiri (revealed saat swipe right) */
.pair-card .pair-card-actions {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 90px;
display: flex;
align-items: stretch;
z-index: 1;
background: linear-gradient(135deg, var(--neon), var(--neon-2));
border-radius: inherit;
}
.pair-card .pair-exec-btn {
flex: 1;
background: transparent;
border: none;
color: #0a1410;
font-family: inherit;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.4px;
text-transform: uppercase;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 6px;
transition: filter 0.18s ease, transform 0.12s ease;
}
.pair-card .pair-exec-btn:hover { filter: brightness(1.05); }
.pair-card .pair-exec-btn:active { transform: scale(0.94); }
.pair-card .pair-exec-btn svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.pair-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, transparent 60%, rgba(0,255,163,0.06));
pointer-events: none;
opacity: 0;
transition: opacity 0.25s;
}
.pair-card:hover, .pair-card:active {
border-color: var(--neon);
box-shadow: 0 0 22px var(--neon-glow), 0 0 1px var(--neon) inset;
background: var(--grad-card-hi), var(--card-hi);
}
.pair-card:hover::before { opacity: 1; }
.coin-icon {
border-radius: 50%;
background: var(--card);
border: 1px solid var(--border);
overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-family: 'Space Mono', monospace;
font-weight: 700;
color: var(--neon);
position: relative;
}
.coin-icon img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.coin-letter {
width: 100%; height: 100%;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--neon), var(--neon-2));
color: #0a1410;
font-family: 'Space Mono', monospace;
font-weight: 700;
}
.pair-info { flex: 1; min-width: 0; }
.pair-row1 {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.pair-name {
font-weight: 700; font-size: 14.5px;
color: var(--text);
display: inline-flex; align-items: center; gap: 6px;
}
.pair-name .arrow { color: var(--neon); font-size: 11px; }
.pair-time { font-size: 11px; color: var(--text-2); flex-shrink: 0; font-family: 'Space Mono', monospace; }
.pair-preview {
font-size: 12.5px;
color: var(--text-2);
margin-top: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
display: flex; align-items: center; gap: 6px;
}
.pair-tag {
display: inline-block;
font-size: 10px; font-weight: 700;
padding: 1.5px 7px; border-radius: 8px;
background: var(--neon); color: #0a1410;
letter-spacing: 0.4px;
}
.pair-tag.SELL { background: var(--danger); color: #fff; }
.pair-tag.WAIT { background: var(--warn); color: #0a1410; }
.unread-pill {
background: var(--neon);
color: #0a1410;
font-size: 11px; font-weight: 700;
border-radius: 10px;
min-width: 22px; height: 22px;
padding: 0 7px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 8px var(--neon-glow);
}
/* ============== Live price strip inside signal card ============== */
.sig-live {
display: flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, rgba(0,255,163,0.10), rgba(0,217,138,0.02));
border: 1px solid rgba(0,255,163,0.28);
border-radius: 8px;
padding: 7px 11px;
margin: 8px 0 6px;
font-family: 'Space Mono', monospace;
}
.sig-live .live-dot {
width: 7px; height: 7px;
background: var(--neon);
border-radius: 50%;
box-shadow: 0 0 8px var(--neon-glow);
animation: pulse-dot 1.4s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
.sig-live .live-label {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.2px;
color: var(--neon);
text-shadow: 0 0 6px var(--neon-glow);
}
.sig-live .live-price {
flex: 1;
font-size: 16px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.3px;
transition: color 0.15s;
}
.sig-live .live-price.flash-up {
animation: flash-up 0.55s ease-out;
}
.sig-live .live-price.flash-down {
animation: flash-down 0.55s ease-out;
}
@keyframes flash-up {
0% { color: var(--neon); text-shadow: 0 0 8px var(--neon-glow); }
100% { color: var(--text); text-shadow: none; }
}
@keyframes flash-down {
0% { color: var(--danger); text-shadow: 0 0 8px rgba(255,94,108,0.5); }
100% { color: var(--text); text-shadow: none; }
}
.sig-live .live-change {
font-size: 12px;
font-weight: 700;
color: var(--text-2);
letter-spacing: 0.3px;
}
.sig-live .live-change.up { color: var(--neon); }
.sig-live .live-change.down { color: var(--danger); }
/* Drift indicator: jarak harga live dari signal entry */
.sig-live .live-drift {
font-size: 10px; padding: 2px 7px; border-radius: 8px;
margin-left: 6px; font-weight: 700; letter-spacing: 0.3px;
}
.sig-live .live-drift.drift-ok {
background: rgba(34,197,94,0.12); color: var(--neon);
}
.sig-live .live-drift.drift-warn {
background: rgba(245,158,11,0.12); color: #f59e0b;
}
.sig-live .live-drift.drift-danger {
background: rgba(239,68,68,0.15); color: #ef4444;
animation: pulse-danger 1.5s infinite;
}
@keyframes pulse-danger {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Signal age indicator */
.signal-age {
font-size: 11px; color: var(--muted);
font-family: 'Space Mono', monospace;
margin: 4px 0 6px;
padding: 3px 8px;
border-radius: 6px;
display: inline-block;
}
.signal-age.age-fresh { color: var(--neon); background: rgba(34,197,94,0.08); }
.signal-age.age-warn { color: #f59e0b; background: rgba(245,158,11,0.08); }
.signal-age.age-stale {
color: #ef4444;
background: rgba(239,68,68,0.10);
font-weight: 700;
}
.empty-state {
text-align: center; padding: 40px 20px; color: var(--muted);
}
.empty-state svg { opacity: 0.4; margin-bottom: 12px; }
.empty-state h3 { color: var(--text-2); font-weight: 600; margin: 8px 0; }
/* ============== Hero empty (Log Signal) ============== */
.hero-empty {
text-align: center;
padding: 26px 16px 22px;
margin-bottom: 12px;
background: var(--grad-card), var(--card);
border: 1px solid var(--border);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.hero-empty::before {
content: '';
position: absolute; inset: -40% -10% auto -10%;
height: 80%;
background: radial-gradient(50% 60% at 50% 0%, rgba(0,255,163,0.10), transparent 70%);
pointer-events: none;
}
.hero-pulse {
width: 140px; height: 64px;
margin: 6px auto 16px;
position: relative;
display: flex; align-items: flex-end; justify-content: center;
}
.hero-pulse .hp-glow {
position: absolute; left: 50%; top: 50%;
width: 130px; height: 130px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(0,255,163,0.22), transparent 60%);
filter: blur(6px);
pointer-events: none;
animation: hp-glow-pulse 3.2s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes hp-glow-pulse {
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.88); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
.hero-pulse .hp-bars {
position: relative;
display: flex; align-items: flex-end; gap: 5px;
height: 100%;
}
/* Bar di-scaleY-kan dari bawah → GPU accelerated, tidak trigger layout
reflow tiap frame seperti animasi `height`. Hasilnya gerakan smooth di
mobile maupun desktop. */
.hero-pulse .hp-bars span {
display: block;
width: 5px;
height: 100%;
background: linear-gradient(180deg, var(--neon), var(--neon-3));
border-radius: 3px;
box-shadow: 0 0 6px rgba(0,255,163,0.45);
transform: scaleY(0.22);
transform-origin: bottom;
animation-name: hp-bar;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
will-change: transform, opacity;
}
@keyframes hp-bar {
0%, 100% { transform: scaleY(0.22); opacity: 0.55; }
50% { transform: scaleY(1.00); opacity: 1; }
}
/* Durasi & delay bervariasi supaya pola wave tidak terlihat seperti fan
simetris yang kaku. Negatif delay = bar mulai di tengah cycle, jadi tidak
ada bar yang baru "naik" di awal load. */
.hero-pulse .hp-bars span:nth-child(1) { animation-duration: 1.50s; animation-delay: -0.10s; }
.hero-pulse .hp-bars span:nth-child(2) { animation-duration: 1.70s; animation-delay: -0.42s; }
.hero-pulse .hp-bars span:nth-child(3) { animation-duration: 1.40s; animation-delay: -0.85s; }
.hero-pulse .hp-bars span:nth-child(4) { animation-duration: 1.60s; animation-delay: -0.20s; }
.hero-pulse .hp-bars span:nth-child(5) { animation-duration: 1.50s; animation-delay: -0.65s; }
.hero-pulse .hp-bars span:nth-child(6) { animation-duration: 1.70s; animation-delay: -0.30s; }
.hero-pulse .hp-bars span:nth-child(7) { animation-duration: 1.45s; animation-delay: -0.95s; }
.hero-pulse .hp-bars span:nth-child(8) { animation-duration: 1.65s; animation-delay: -0.50s; }
.hero-pulse .hp-bars span:nth-child(9) { animation-duration: 1.55s; animation-delay: -0.15s; }
@media (prefers-reduced-motion: reduce) {
.hero-pulse .hp-bars span,
.hero-pulse .hp-glow { animation: none; }
.hero-pulse .hp-bars span { transform: scaleY(0.6); opacity: 0.7; }
}
.hero-title {
font-family: 'Space Mono', monospace;
font-size: 16px;
font-weight: 700;
letter-spacing: 3px;
background: linear-gradient(135deg, var(--neon), var(--neon-3));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 6px;
}
.hero-meta {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.4px;
margin-bottom: 16px;
}
.hero-cta {
background: var(--grad-neon);
color: #0a1410;
border: 0;
border-radius: 10px;
padding: 10px 18px;
font-family: 'Space Mono', monospace;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.8px;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 0 20px var(--neon-glow), inset 0 1px 0 rgba(255,255,255,0.3);
transition: transform 0.1s;
position: relative; overflow: hidden;
}
.hero-cta::before {
content: '';
position: absolute; top: 0; bottom: 0; left: -50%;
width: 40%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
transform: skewX(-20deg);
animation: hero-shine 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes hero-shine {
0%, 60% { left: -50%; }
100% { left: 150%; }
}
.hero-cta:active { transform: scale(0.97); }
/* ============== Overview cards (Top Gainers / Losers / Pulse) ============== */
.overview-card {
background: var(--grad-card), var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 10px;
}
.overview-head {
display: flex; justify-content: space-between; align-items: center;
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
color: var(--text-2);
margin-bottom: 8px;
}
.overview-head .ov-arrow { color: var(--neon); font-size: 10px; }
.overview-head .ov-arrow.down { color: var(--danger); }
.overview-list { display: flex; flex-direction: column; gap: 2px; }
.ov-empty {
text-align: center; color: var(--muted); font-size: 11px;
padding: 10px 0;
font-family: 'Space Mono', monospace;
}
.ov-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 6px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
}
.ov-row:hover { background: rgba(255,255,255,0.03); }
.ov-row .coin-icon { width: 24px !important; height: 24px !important; flex-shrink: 0; }
.ov-pair {
flex: 1; min-width: 0;
display: flex; align-items: baseline;
overflow: hidden; white-space: nowrap;
}
.ov-pair-base {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.2px;
}
.ov-pair-quote {
font-size: 10.5px;
font-weight: 400;
color: var(--muted);
margin-left: 1px;
}
.ov-price {
font-family: 'Space Mono', monospace;
font-size: 12px;
color: var(--text);
letter-spacing: 0.2px;
font-weight: 500;
text-align: right;
min-width: 78px;
}
.ov-pill {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
padding: 4px 8px;
border-radius: 4px;
min-width: 64px;
text-align: center;
color: #fff;
}
.ov-pill.up { background: #03a66d; }
.ov-pill.down { background: #cf304a; }
/* ============== Market Pulse card ============== */
.pulse-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--neon);
box-shadow: 0 0 8px var(--neon-glow);
animation: pulse-blink 1.6s ease-in-out infinite;
}
@keyframes pulse-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
.pulse-grid { display: flex; flex-direction: column; }
.pulse-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 2px;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pulse-row:last-child { border-bottom: 0; }
.pulse-label {
font-family: 'Space Mono', monospace;
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.pulse-val {
font-family: 'Space Mono', monospace;
font-size: 12.5px;
font-weight: 600;
color: var(--text);
display: flex; align-items: center; gap: 6px;
}
.pulse-val.up { color: #03a66d; }
.pulse-val.down { color: #cf304a; }
.pulse-val.muted { color: var(--muted); }
.pulse-val .up { color: #03a66d; }
.pulse-val .down { color: #cf304a; }
.pulse-val .muted { color: var(--muted); font-weight: 400; }
.pulse-sub {
font-size: 10px;
font-weight: 400;
color: var(--muted);
letter-spacing: 0.2px;
}
.vol-pill {
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 3px;
letter-spacing: 0.4px;
}
.vol-pill.vol-low { background: rgba(3,166,109,0.18); color: #6ee7a7; }
.vol-pill.vol-mid { background: rgba(244,184,96,0.18); color: #f4b860; }
.vol-pill.vol-high { background: rgba(207,48,74,0.18); color: #ff8aa0; }
.dom-pill {
font-size: 10.5px;
font-weight: 700;
padding: 3px 9px;
border-radius: 3px;
letter-spacing: 0.6px;
color: #fff;
}
.dom-pill.dom-up { background: #03a66d; }
.dom-pill.dom-down { background: #cf304a; }
.dom-pill.dom-neutral { background: #5a6271; }
/* ============== Konfig settings ============== */
.settings-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 10px;
}
.set-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.set-row:last-of-type { border-bottom: none; }
/* Di dalam .cfg-group, garis pemisah per-row dihapus karena group sudah
memberi konteks visual sendiri (border-top di group berikutnya). */
.cfg-group .set-row { border-bottom: 0; }
.set-label {
font-size: 12px; color: var(--text-2);
font-family: 'Space Mono', monospace;
letter-spacing: 0.2px;
}
.set-row select { width: 56%; }
/* ===== Konfig: section grouping (Strategi / Koneksi / Tentang) ===== */
.cfg-group {
display: flex;
flex-direction: column;
}
.cfg-group + .cfg-group {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.cfg-group-title {
font-family: 'Space Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--muted);
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 8px;
}
.cfg-group-title::before {
content: "";
width: 2px;
height: 10px;
border-radius: 1px;
background: var(--neon);
}
.cfg-group .set-row { padding: 6px 0; }
.cfg-group .set-row:first-of-type { padding-top: 0; }
.cfg-group .set-row:last-of-type { padding-bottom: 0; }
/* ===== Status badge inside cfg-card-btn ===== */
.cfg-btn-status {
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.4px;
padding: 2px 7px;
border-radius: 3px;
background: rgba(255,255,255,0.05);
color: var(--muted);
white-space: nowrap;
transition: background 0.2s, color 0.2s;
width: fit-content;
}
.cfg-btn-status.on { background: rgba(3,166,109,0.18); color: #6ee7a7; }
.cfg-btn-status.off { background: rgba(255,255,255,0.04); color: var(--muted); }
/* ===== Card-style buttons untuk Konfig Exchange + Telegram Setting ===== */
.cfg-card-btn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
margin-bottom: 6px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
text-align: left;
font-family: inherit;
color: var(--text);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.cfg-card-btn:hover {
background: rgba(0,255,163,0.04);
border-color: rgba(0,255,163,0.20);
}
.cfg-card-btn:active { transform: scale(0.99); }
.cfg-card-btn:last-child { margin-bottom: 0; }
.ccb-icon {
flex-shrink: 0;
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,255,163,0.08);
border: 1px solid rgba(0,255,163,0.16);
border-radius: 7px;
color: var(--neon);
}
.ccb-icon svg { width: 15px; height: 15px; }
.ccb-icon.tg {
background: rgba(34,158,217,0.08);
border-color: rgba(34,158,217,0.20);
color: #4dabe0;
}
.ccb-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.ccb-title {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.2px;
color: var(--text);
}
.ccb-status {
font-size: 9.5px;
padding: 1px 6px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-self: flex-start;
}
.ccb-chevron {
flex-shrink: 0;
color: var(--muted);
transition: transform 0.2s, color 0.2s;
}
.cfg-card-btn:hover .ccb-chevron {
color: var(--neon);
transform: translateX(2px);
}
/* ===== Mode Scan hint description (info box dengan accent border) ===== */
.mode-hint {
font-family: 'Space Mono', monospace;
font-size: 10.5px;
color: var(--text-2);
letter-spacing: 0.2px;
padding: 8px 11px;
margin-top: 10px;
background: rgba(0,255,163,0.04);
border-left: 2px solid var(--neon);
border-radius: 0 6px 6px 0;
line-height: 1.55;
transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.mode-hint[data-mode="scalping"] {
border-left-color: #f4b860;
background: rgba(244,184,96,0.05);
}
.mode-hint[data-mode="superscalping"] {
border-left-color: #ff8aa0;
background: rgba(255,138,160,0.05);
}
/* ===== Advanced disclosure (Hyperliquid setup, dikoleksi) ===== */
.advanced-disclosure {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 10px;
overflow: hidden;
}
.advanced-disclosure[open] { background: var(--grad-card), var(--card); }
.adv-summary {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
cursor: pointer;
list-style: none;
user-select: none;
font-family: 'Space Mono', monospace;
}
.adv-summary::-webkit-details-marker { display: none; }
.adv-icon {
font-size: 14px;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.04);
border-radius: 6px;
color: var(--neon-3);
}
.adv-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.6px;
color: var(--text);
}
.adv-sub {
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.2px;
}
.adv-chevron {
margin-left: auto;
color: var(--muted);
transition: transform 0.25s ease;
}
.advanced-disclosure[open] .adv-chevron { transform: rotate(180deg); }
.advanced-disclosure[open] .adv-summary {
border-bottom: 1px solid var(--border);
}
.advanced-disclosure .wallet-card { margin: 12px; margin-bottom: 12px; }
.about { padding: 16px 14px; }
.about-title { font-size: 11px; color: var(--text-2); letter-spacing: 1px; font-family: 'Space Mono', monospace; }
.about-pill {
display: inline-block;
margin: 8px 0;
padding: 4px 12px;
background: var(--neon-soft);
color: var(--neon);
border-radius: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
font-family: 'Space Mono', monospace;
}
.about-desc { color: var(--text-2); font-size: 12.5px; line-height: 1.6; margin: 4px 0 0; }
/* Strategy info — embedded di "Tentang" group */
.strategy-info {
display: flex; flex-direction: column; gap: 6px;
}
.strategy-info .about-pill {
margin: 0;
align-self: flex-start;
font-size: 9.5px;
padding: 2px 9px;
background: rgba(0,255,163,0.08);
border: 1px solid rgba(0,255,163,0.18);
letter-spacing: 0.6px;
}
.strategy-info .about-desc {
margin: 0;
font-size: 10.5px;
color: var(--muted);
line-height: 1.5;
font-family: 'Space Mono', monospace;
letter-spacing: 0.1px;
}
.strategy-info .about-desc { font-size: 11.5px; margin: 0; line-height: 1.5; }
/* Venue selector inline — kompak di dalam settings card */
.venue-tabs.inline { padding: 0; background: transparent; border: 0; flex: 1; }
.venue-tabs.inline .venue-row { gap: 6px; }
.venue-tabs.inline .venue-tab {
padding: 8px 12px;
font-size: 12px;
gap: 6px;
}
.venue-tabs.inline .vt-name { font-size: 12px; }
/* ============== Kelola list ============== */
.manage-search {
display: flex; align-items: center; gap: 10px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0 12px;
height: 38px;
margin-bottom: 10px;
color: var(--muted);
}
.manage-search input {
flex: 1; min-width: 0;
background: transparent; border: none; outline: none;
color: var(--text);
font-family: 'Space Mono', monospace;
font-size: 13.5px;
}
.manage-search input::placeholder { color: var(--muted); }
.manage-list { display: flex; flex-direction: column; gap: 8px; }
.manage-item {
background: var(--grad-card), var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 12px 14px;
display: flex; align-items: center; gap: 14px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s;
}
.manage-item::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, transparent 60%, rgba(0,255,163,0.08));
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.manage-item::after {
content: ''; position: absolute; left: 14px; right: 14px; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,255,163,0.18), transparent);
opacity: 0;
transition: opacity 0.25s ease;
}
.manage-item:hover {
border-color: var(--neon);
box-shadow: 0 0 22px var(--neon-soft), 0 0 1px var(--neon) inset;
}
.manage-item:hover::before,
.manage-item:hover::after { opacity: 1; }
.manage-item:active { transform: scale(0.995); }
.kelola-info { flex: 1; min-width: 0; }
.kelola-name {
font-family: 'Space Mono', monospace;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--neon);
text-shadow: 0 0 10px var(--neon-glow);
background: linear-gradient(135deg, var(--neon), var(--neon-3));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kelola-sub {
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.5px;
margin-top: 2px;
font-family: 'Space Mono', monospace;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kelola-price {
text-align: right;
font-family: 'Space Mono', monospace;
flex-shrink: 0;
min-width: 78px;
}
.kelola-price .price {
font-size: 14px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.3px;
transition: color 0.15s;
}
.kelola-price .price.flash-up {
animation: flash-up 0.55s ease-out;
}
.kelola-price .price.flash-down {
animation: flash-down 0.55s ease-out;
}
.kelola-price .change {
font-size: 10.5px;
color: var(--muted);
margin-top: 3px;
letter-spacing: 0.3px;
}
.kelola-price .change.up { color: var(--neon); }
.kelola-price .change.down { color: var(--danger); }
/* ============== Floating action button ============== */
.fab {
position: absolute;
right: 16px;
bottom: 86px;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--neon);
color: #0a1410;
border: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 18px var(--neon-glow), 0 4px 12px rgba(0,0,0,0.5);
z-index: 30;
transition: transform 0.15s;
}
.fab:active { transform: scale(0.92); }
/* Only show FAB di tab log signal */
.app[data-tab="config"] .fab,
.app[data-tab="manage"] .fab,
.app[data-tab="positions"] .fab { display: none; }
/* ============== Bottom navigation ============== */
.bottom-nav {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--grad-bottombar);
padding: 6px 0 4px;
flex-shrink: 0;
}
.bottom-nav::before {
content: '';
position: absolute; top: 0; left: 8px; right: 8px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--neon), transparent);
background-size: 200% 100%;
background-position: 100% 0;
opacity: 0.5;
animation: shimmer-line-rev 5s linear infinite;
}
@keyframes shimmer-line-rev {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
.nav-item {
background: transparent; border: none;
color: var(--text-2);
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 7px 2px;
font-size: 10.5px;
cursor: pointer;
position: relative;
transition: color 0.15s;
min-width: 0;
}
.nav-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.nav-item svg {
width: 20px; height: 20px;
}
.nav-item.active {
color: var(--neon);
text-shadow: 0 0 8px var(--neon-glow);
}
.nav-item.active::before {
content: '';
position: absolute;
top: -1px;
left: 30%; right: 30%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--neon), transparent);
border-radius: 2px;
animation: nav-glow 2.2s ease-in-out infinite;
}
@keyframes nav-glow {
0%, 100% { box-shadow: 0 0 6px var(--neon-soft); filter: brightness(1); }
50% { box-shadow: 0 0 14px var(--neon-glow); filter: brightness(1.25); }
}
.nav-item svg { transition: transform 0.2s ease; }
.nav-item:active svg { transform: scale(0.9); }
.nav-item.active svg { transform: scale(1.05); }
.nav-item span { font-family: 'Space Mono', monospace; font-weight: 700; }
/* ============== Brand footer ============== */
.brand {
text-align: center;
font-size: 10px;
color: var(--text-2);
font-family: 'Space Mono', monospace;
letter-spacing: 0.4px;
padding: 7px 0 9px;
background: linear-gradient(180deg, transparent, rgba(0,255,163,0.04));
flex-shrink: 0;
}
.brand .heart {
color: #ff4763;
text-shadow: 0 0 8px rgba(255,71,99,0.6), 0 0 16px rgba(255,71,99,0.35);
display: inline-block;
margin: 0 3px;
animation: brand-heart-beat 1.2s ease-in-out infinite;
transform-origin: center;
}
@keyframes brand-heart-beat {
0%, 100% { transform: scale(1); text-shadow: 0 0 8px rgba(255,71,99,0.6), 0 0 16px rgba(255,71,99,0.35); }
15%, 35% { transform: scale(1.28); text-shadow: 0 0 14px rgba(255,71,99,0.95), 0 0 28px rgba(255,71,99,0.55); }
25% { transform: scale(1.12); }
60% { transform: scale(1); }
}
/* ============== Chat overlay ============== */
.chat-overlay {
position: absolute;
inset: 0;
background: var(--bg);
display: flex; flex-direction: column;
z-index: 50;
animation: slidein 0.2s;
}
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-head {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--bg-2);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.chat-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--neon), var(--neon-2));
color: #0a1410;
display: flex; align-items: center; justify-content: center;
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 11px;
}
.chat-meta { flex: 1; min-width: 0; }
.chat-title { font-weight: 700; font-size: 15px; color: var(--neon); text-shadow: 0 0 8px var(--neon-glow); }
.chat-sub { font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.chat-body {
flex: 1;
overflow-y: auto;
padding: 12px 14px 14px;
background:
radial-gradient(circle at 30% 20%, rgba(0,255,163,0.04), transparent 40%),
radial-gradient(circle at 70% 80%, rgba(0,255,163,0.04), transparent 40%),
var(--bg);
}
.chat-body::-webkit-scrollbar { width: 4px; }
.chat-body::-webkit-scrollbar-thumb { background: var(--neon-soft); border-radius: 2px; }
.msgs { display: flex; flex-direction: column; gap: 6px; }
.day-divider {
align-self: center;
background: var(--card);
border: 1px solid var(--border);
color: var(--text-2);
font-size: 11px;
padding: 4px 12px;
border-radius: 12px;
margin: 6px 0;
font-family: 'Space Mono', monospace;
}
.system-note {
align-self: center;
background: rgba(0,255,163,0.06);
border: 1px dashed var(--border);
color: var(--text-2);
font-size: 11.5px;
padding: 6px 12px;
border-radius: 8px;
text-align: center;
margin: 4px 0;
max-width: 90%;
}
.bubble {
max-width: 78%;
padding: 8px 11px 8px 12px;
border-radius: 12px;
font-size: 13.5px;
line-height: 1.45;
word-wrap: break-word;
}
.bubble.in {
background: var(--card);
border: 1px solid var(--border);
align-self: flex-start;
border-top-left-radius: 4px;
color: var(--text);
}
.bubble.out {
background: var(--neon);
color: #0a1410;
align-self: flex-end;
border-top-right-radius: 4px;
font-weight: 600;
box-shadow: 0 0 12px var(--neon-glow);
}
.bubble .meta {
display: block;
font-size: 10px;
margin-top: 4px;
text-align: right;
font-family: 'Space Mono', monospace;
opacity: 0.7;
}
.signal-card {
align-self: stretch;
background: var(--card);
border: 1px solid var(--neon);
border-radius: 12px;
padding: 12px 14px;
margin: 6px 0 4px;
box-shadow: 0 0 14px var(--neon-glow);
}
.signal-card.SELL { border-color: var(--danger); box-shadow: 0 0 14px rgba(255,94,108,0.35); }
.signal-card.WAIT { border-color: var(--warn); box-shadow: 0 0 14px rgba(255,200,61,0.32); }
.sig-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
}
.sig-pill {
font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: 12px;
background: var(--neon); color: #0a1410;
letter-spacing: 0.4px;
box-shadow: 0 0 10px var(--neon-glow);
}
.signal-card.SELL .sig-pill { background: var(--danger); color: #fff; box-shadow: 0 0 10px rgba(255,94,108,0.5); }
.signal-card.WAIT .sig-pill { background: var(--warn); color: #0a1410; box-shadow: 0 0 10px rgba(255,200,61,0.45); }
.sig-title { font-weight: 700; font-size: 13.5px; color: var(--text); }
.sig-sub { color: var(--text-2); font-size: 11.5px; margin-top: 2px; }
.confidence-bar {
height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden;
margin: 8px 0;
}
.confidence-bar > div { height: 100%; background: var(--neon); transition: width .4s; box-shadow: 0 0 6px var(--neon-glow); }
.signal-card.SELL .confidence-bar > div { background: var(--danger); }
.signal-card.WAIT .confidence-bar > div { background: var(--warn); }
.sig-table { width: 100%; border-collapse: collapse; margin: 4px 0; font-size: 12.5px; font-family: 'Space Mono', monospace; }
.sig-table td { padding: 3px 0; color: var(--text-2); }
.sig-table td:last-child { text-align: right; color: var(--text); font-weight: 700; }
.sig-reasons { margin: 6px 0 0 16px; padding: 0; font-size: 12px; color: var(--text-2); }
.sig-reasons li { margin: 2px 0; }
.sig-time {
display: block; text-align: right; margin-top: 6px;
font-size: 10.5px; color: var(--muted);
font-family: 'Space Mono', monospace;
}
.typing {
align-self: flex-start;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
border-top-left-radius: 4px;
padding: 10px 14px;
display: flex; gap: 4px;
margin: 4px 0;
}
.typing span {
width: 6px; height: 6px; border-radius: 50%;
background: var(--neon);
animation: bounce 1.2s infinite;
box-shadow: 0 0 6px var(--neon-glow);
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-5px); opacity: 1; }
}
.chat-foot {
display: flex; flex-direction: column; gap: 8px;
padding: 8px 12px 10px;
background: var(--grad-bottombar);
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.quick-chips {
display: flex; gap: 6px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 1px;
}
.quick-chips::-webkit-scrollbar { display: none; }
.qchip {
flex-shrink: 0;
background: rgba(0,255,163,0.06);
border: 1px solid var(--border);
color: var(--text-2);
border-radius: 14px;
padding: 5px 11px;
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
cursor: pointer;
transition: all 0.15s;
}
.qchip:hover, .qchip:active {
color: var(--neon);
border-color: var(--neon);
background: rgba(0,255,163,0.14);
box-shadow: 0 0 8px var(--neon-soft);
}
.composer-row { display: flex; align-items: center; gap: 8px; }
.chat-foot input {
flex: 1; min-width: 0;
background: var(--card);
border: 1px solid var(--border);
border-radius: 22px;
padding: 11px 16px;
color: var(--text);
font-size: 13.5px;
font-family: 'Space Mono', monospace;
}
.chat-foot input:focus { border-color: var(--neon); box-shadow: 0 0 10px var(--neon-glow); }
.send-btn {
background: var(--neon);
width: 44px; height: 44px;
border-radius: 50%;
border: none;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 14px var(--neon-glow);
transition: transform 0.1s;
}
.send-btn:active { transform: scale(0.92); }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Hide brand under chat overlay */
.app:has(#chatOverlay:not([hidden])) .brand,
.app:has(#chatOverlay:not([hidden])) .fab { display: none; }
/* ============== Inline scan panel (Konfig tab) ============== */
.scan-panel {
margin-top: 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
font-family: 'Space Mono', monospace;
}
.scan-bar {
width: 100%;
height: 4px;
background: rgba(0,255,163,0.1);
border-radius: 2px;
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
.scan-bar-fill {
height: 100%;
width: 0%;
background: var(--neon);
box-shadow: 0 0 8px var(--neon-glow);
/* 1.05s = sedikit > polling 1s, jadi progress meluncur smooth ke titik
berikutnya tanpa berhenti antar poll. */
transition: width 1.05s linear;
}
.scan-bar-fill::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 24px; height: 100%;
background: linear-gradient(90deg, transparent, var(--neon), transparent);
opacity: 0.6;
filter: blur(2px);
animation: scan-glide 1s linear infinite;
}
@keyframes scan-glide {
from { transform: translateX(-30px); }
to { transform: translateX(0); }
}
.scan-panel.done .scan-bar-fill::after { animation: none; opacity: 0; }
.scan-head {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px;
color: var(--text-2);
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.scan-found { color: var(--neon); font-weight: 700; text-shadow: 0 0 6px var(--neon-glow); }
.scan-hint { font-size: 10.5px; color: var(--muted); letter-spacing: 0.4px; margin-top: 4px; }
/* Spinner inside the screening button while scanning */
.screen-btn.loading svg { animation: spin 1s linear infinite; }
.screen-btn.loading { opacity: 0.92; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ============== Alert banner (SL / TP hit) ============== */
.alert-banner {
position: fixed;
top: 12px; left: 12px; right: 12px;
max-width: 460px;
margin: 0 auto;
background: linear-gradient(135deg, rgba(0,255,163,0.18), rgba(0,217,138,0.05) 60%), var(--card);
border: 1px solid var(--neon);
border-radius: 14px;
padding: 12px 14px 12px 14px;
z-index: 500;
display: flex; align-items: center; gap: 12px;
font-family: 'Space Mono', monospace;
box-shadow: 0 0 36px var(--neon-glow), 0 12px 40px rgba(0,0,0,0.65);
animation: alert-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}
.alert-banner::after {
/* light sweep across banner */
content: ''; position: absolute; top: 0; bottom: 0; left: -60%;
width: 50%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transform: skewX(-20deg);
animation: alert-sweep 1.4s 0.35s ease-out;
pointer-events: none;
}
.alert-banner.SL {
background: linear-gradient(135deg, rgba(255,94,108,0.18), rgba(194,52,47,0.04) 60%), var(--card);
border-color: var(--danger);
box-shadow: 0 0 36px rgba(255,94,108,0.45), 0 12px 40px rgba(0,0,0,0.65);
}
.alert-banner.hide { animation: alert-out 0.35s forwards; }
.alert-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--grad-neon);
color: #0a1410;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
position: relative;
box-shadow: 0 0 14px var(--neon-glow);
}
.alert-banner.SL .alert-icon {
background: linear-gradient(135deg, var(--danger), #c2342f);
color: #fff;
box-shadow: 0 0 14px rgba(255,94,108,0.55);
}
.alert-icon::before, .alert-icon::after {
content: ''; position: absolute; inset: 0;
border-radius: 50%;
border: 2px solid var(--neon);
opacity: 0;
animation: alert-ring 1.6s ease-out infinite;
}
.alert-icon::after { animation-delay: 0.6s; }
.alert-banner.SL .alert-icon::before,
.alert-banner.SL .alert-icon::after { border-color: var(--danger); }
.alert-text { flex: 1; min-width: 0; }
.alert-title {
font-size: 13.5px; font-weight: 700;
color: var(--text);
letter-spacing: 0.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alert-banner.SL .alert-title { color: #ffd5d8; }
.alert-banner:not(.SL) .alert-title { text-shadow: 0 0 10px var(--neon-glow); }
.alert-sub {
font-size: 11px; color: var(--text-2);
margin-top: 3px;
letter-spacing: 0.3px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alert-close {
background: transparent; border: 1px solid var(--border);
width: 26px; height: 26px; border-radius: 50%;
color: var(--text-2);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all 0.15s;
}
.alert-close:hover { color: var(--text); border-color: var(--text-2); }
@keyframes alert-in {
0% { transform: translateY(-120%) scale(0.92); opacity: 0; }
60% { transform: translateY(8px) scale(1.03); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes alert-out {
to { transform: translateY(-120%); opacity: 0; }
}
@keyframes alert-ring {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.7); opacity: 0; }
}
@keyframes alert-sweep {
to { left: 200%; }
}
/* ============== Toast ============== */
.toast {
position: fixed;
bottom: 100px;
left: 16px; right: 16px;
max-width: 448px;
margin: 0 auto;
background: var(--card);
border: 1px solid var(--neon);
border-left-width: 4px;
border-radius: 10px;
padding: 12px 14px;
font-size: 13px;
font-family: 'Space Mono', monospace;
color: var(--text);
z-index: 200;
animation: slideup 0.22s;
pointer-events: none;
}
.toast.error { border-color: var(--danger); }
.toast.warn { border-color: var(--warn); }
@keyframes slideup { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
/* ============== Modal ============== */
.modal {
position: fixed; inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
z-index: 300;
padding: 20px;
animation: fadein 0.18s;
}
.modal-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 22px;
max-width: 320px;
width: 100%;
font-family: 'Space Mono', monospace;
}
.modal-msg {
color: var(--text);
font-size: 13px;
line-height: 1.55;
margin-bottom: 18px;
white-space: pre-line;
font-family: 'Space Mono', monospace;
}
.modal-msg b { color: var(--neon); font-weight: 700; }
.modal-actions { display: flex; gap: 10px; }
.modal-btn {
flex: 1;
padding: 10px 12px;
font-family: 'Space Mono', monospace;
font-weight: 700;
border-radius: 8px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-2);
cursor: pointer;
font-size: 13px;
transition: all 0.15s;
}
.modal-btn.cancel:hover { border-color: var(--text-2); color: var(--text); }
.modal-btn.ok {
background: var(--neon);
color: #0a1410;
border-color: var(--neon);
}
.modal-btn.ok:hover { background: #00ffb3; }
.modal-btn.ok.danger {
background: var(--danger);
border-color: var(--danger);
color: #fff;
}
.modal-btn.ok.danger:hover { background: #ff4757; }
/* ============== Favorite toggle (clean circle pill) ============== */
.toggle-fav {
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(0,255,163,0.05);
border: 1.5px solid var(--border);
color: var(--muted);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all 0.18s ease;
}
.toggle-fav:hover {
color: var(--neon);
border-color: var(--neon);
background: rgba(0,255,163,0.10);
}
.toggle-fav.active {
background: var(--grad-neon);
border-color: transparent;
color: #0a1410;
box-shadow: 0 0 14px var(--neon-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}
.toggle-fav.active:hover { background: var(--grad-neon); }
.toggle-fav svg { transition: transform 0.18s; }
.toggle-fav.active svg { transform: scale(1.12); }
/* ============== Login Screen ============== */
.login-screen {
position: fixed; inset: 0;
display: flex;
flex-direction: column;
/* Pakai auto-margin di .login-card buat centering — `align-items: center`
bikin top konten ke-clip kalau konten lebih panjang dari viewport
(pane Daftar dengan method-section bisa lebih tinggi dari layar mobile). */
padding: 20px;
background:
radial-gradient(60% 50% at 50% 50%, rgba(0,255,163,0.08), transparent 70%),
radial-gradient(40% 35% at 18% 22%, rgba(0,255,163,0.06), transparent 70%),
radial-gradient(45% 40% at 82% 78%, rgba(0,217,138,0.05), transparent 70%),
var(--bg);
z-index: 9999;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
animation: login-fade 0.5s ease;
}
@keyframes login-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.login-screen.hide {
animation: login-out 0.45s ease forwards;
}
@keyframes login-out {
to { opacity: 0; transform: scale(0.97); }
}
.login-card {
width: 100%;
max-width: 420px;
/* margin: auto -- centering safe: collapse ke 0 kalau konten overflow,
supaya user bisa scroll ke atas tanpa ke-clip. */
margin: auto;
background:
linear-gradient(140deg, rgba(0,255,163,0.06) 0%, rgba(0,217,138,0.02) 60%, rgba(0,0,0,0) 100%),
rgba(13,26,20,0.85);
border: 1px solid var(--border);
border-radius: 22px;
padding: 26px 22px 20px;
box-shadow:
0 24px 60px rgba(0,0,0,0.55),
0 0 50px rgba(0,255,163,0.08),
inset 0 1px 0 rgba(255,255,255,0.04);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
position: relative;
animation: login-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes login-pop {
from { opacity: 0; transform: translateY(18px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-head {
display: flex; align-items: center; gap: 14px;
padding-bottom: 22px;
border-bottom: 1px dashed var(--border);
margin-bottom: 20px;
}
.login-logo {
width: 78px; height: 78px;
border-radius: 20px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #00ffa3 0%, #00d98a 35%, #00b377 65%, #00ffa3 100%);
background-size: 220% 220%;
animation: logo-shift 5.2s ease-in-out infinite;
box-shadow:
0 0 36px var(--neon-glow),
0 0 70px rgba(0,255,163,0.20),
inset 0 1px 0 rgba(255,255,255,0.4);
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.login-logo::before {
content: ''; position: absolute; inset: -25%;
background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.35) 12%, transparent 30%);
animation: logo-spin 6s linear infinite;
pointer-events: none;
}
.login-title { display: flex; flex-direction: column; line-height: 1; }
.login-name {
font-family: 'Space Mono', monospace;
font-size: 32px; font-weight: 700;
color: var(--neon);
letter-spacing: -0.5px;
text-shadow: 0 0 18px rgba(0,255,163,0.45);
}
.login-sub {
font-family: 'Space Mono', monospace;
font-size: 13px; font-weight: 700;
color: var(--text-2);
letter-spacing: 4px;
margin-top: 4px;
}
.login-tag {
margin-top: 8px;
font-family: 'Space Mono', monospace;
font-size: 11.5px;
color: var(--muted);
letter-spacing: 0.4px;
}
/* Admin badge */
.login-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: rgba(0,255,163,0.08);
border: 1px solid var(--neon-soft);
border-radius: 999px;
color: var(--neon);
font-family: 'Space Mono', monospace;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.8px;
margin-bottom: 18px;
box-shadow: 0 0 20px rgba(0,255,163,0.10);
}
.login-badge svg { color: var(--neon); }
/* Auth tabs (Masuk / Daftar) — sliding pill */
.auth-tabs {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 4px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 11px;
margin-bottom: 18px;
isolation: isolate;
}
.auth-tabs::before {
content: "";
position: absolute;
top: 4px; bottom: 4px;
left: 4px;
width: calc(50% - 4px);
border-radius: 8px;
background: rgba(0,255,163,0.15);
box-shadow: 0 0 12px rgba(0,255,163,0.20), inset 0 1px 0 rgba(255,255,255,0.06);
transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1);
z-index: 0;
}
.auth-tabs:has(.auth-tab.active[data-tab="register"])::before {
transform: translateX(100%);
}
.auth-tab {
position: relative;
z-index: 1;
padding: 9px 6px;
background: transparent;
border: none;
color: var(--muted);
font-family: 'Space Mono', monospace;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
cursor: pointer;
border-radius: 8px;
transition: color 0.22s ease;
-webkit-tap-highlight-color: transparent;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active { color: var(--neon); text-shadow: 0 0 8px rgba(0,255,163,0.45); }
/* Redeem pane */
.redeem-banner {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(0,255,163,0.10), rgba(0,212,212,0.04));
border: 1px solid rgba(0,255,163,0.20);
border-radius: 11px;
margin-bottom: 14px;
color: var(--neon);
}
.redeem-title {
font-family: 'Space Mono', monospace;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.6px;
}
.redeem-sub {
font-size: 10.5px;
color: var(--muted);
margin-top: 2px;
}
.redeem-logout {
margin-top: 12px;
width: 100%;
padding: 9px;
background: rgba(255,94,108,0.08);
border: 1px solid rgba(255,94,108,0.30);
color: #ff8a93;
border-radius: 9px;
font-family: inherit;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.4px;
cursor: pointer;
transition: all 0.18s ease;
}
.redeem-logout:hover {
background: rgba(255,94,108,0.18);
border-color: rgba(255,94,108,0.55);
}
/* ============== Redeem Modal (popup minimalist) ============== */
.redeem-modal {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(5, 13, 9, 0.40);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
animation: rdm-fade 0.22s ease;
}
@keyframes rdm-fade { from { opacity: 0; } to { opacity: 1; } }
.redeem-modal-card {
width: 100%;
max-width: 280px;
padding: 16px 16px 12px;
background: linear-gradient(180deg, #0f1916 0%, #0a1410 100%);
border: 1px solid rgba(0,255,163,0.22);
border-radius: 13px;
box-shadow:
0 12px 36px rgba(0,0,0,0.60),
0 0 24px rgba(0,255,163,0.08);
text-align: center;
animation: rdm-slide 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rdm-slide {
from { opacity: 0; transform: translateY(16px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.redeem-modal-sub {
font-size: 11px;
color: var(--text-2, #94a39d);
letter-spacing: 0.2px;
line-height: 1.45;
margin: 0 0 12px;
}
.redeem-modal-error {
margin-top: 10px;
padding: 8px 10px;
background: rgba(255,94,108,0.10);
border: 1px solid rgba(255,94,108,0.30);
border-radius: 8px;
color: #ff8a93;
font-size: 11px;
text-align: center;
animation: rdm-shake 0.35s ease;
}
@keyframes rdm-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
/* Logout sebagai text-link kecil di bawah */
.redeem-logout-link {
margin-top: 10px;
background: transparent;
border: none;
color: var(--muted, #5b6963);
font-family: 'Space Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.4px;
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(255,255,255,0.12);
text-underline-offset: 3px;
transition: color 0.18s ease;
padding: 4px 8px;
}
.redeem-logout-link:hover { color: var(--danger, #ff5e6c); text-decoration-color: rgba(255,94,108,0.4); }
/* Success state setelah redeem */
.redeem-success {
text-align: center;
padding: 8px 0;
animation: rdm-success-in 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rdm-success-in {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
.redeem-success-icon {
width: 56px; height: 56px;
border-radius: 50%;
margin: 0 auto 12px;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle, rgba(0,255,163,0.20), rgba(0,255,163,0.04));
border: 1.5px solid rgba(0,255,163,0.55);
color: var(--neon, #00ffa3);
box-shadow: 0 0 24px rgba(0,255,163,0.30);
animation: rdm-success-pop 0.4s cubic-bezier(0.22, 1.4, 0.36, 1);
}
@keyframes rdm-success-pop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.18); opacity: 1; }
100% { transform: scale(1); }
}
.redeem-success-title {
font-family: 'Space Mono', monospace;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--neon, #00ffa3);
text-shadow: 0 0 12px rgba(0,255,163,0.55);
margin-bottom: 6px;
}
.redeem-success-sub {
font-size: 12px;
color: var(--text, #d6e6df);
letter-spacing: 0.3px;
line-height: 1.5;
margin-bottom: 8px;
}
.redeem-success-sub b {
color: var(--neon, #00ffa3);
font-weight: 700;
}
.redeem-success-foot {
font-size: 10px;
color: var(--muted, #5b6963);
letter-spacing: 0.3px;
margin-top: 4px;
}
/* Status pill (AKUN BELUM AKTIF) */
.redeem-status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
background: rgba(255, 200, 61, 0.10);
border: 1px solid rgba(255, 200, 61, 0.32);
color: var(--warn, #ffc83d);
border-radius: 999px;
font-family: 'Space Mono', monospace;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 8px;
}
.redeem-status-pill .rdm-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
animation: rdm-blink 1.4s ease-in-out infinite;
}
@keyframes rdm-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.7); }
}
/* Hubungi Admin button (outline WhatsApp green — minimalist) */
.redeem-contact {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 10px;
background: rgba(37, 211, 102, 0.08);
color: #25D366;
border: 1px solid rgba(37, 211, 102, 0.32);
border-radius: 9px;
text-decoration: none;
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
transition: all 0.18s ease;
}
.redeem-contact:hover {
background: rgba(37, 211, 102, 0.18);
border-color: rgba(37, 211, 102, 0.55);
transform: translateY(-1px);
}
.redeem-contact:active { transform: scale(0.985); }
.redeem-contact svg { width: 14px; height: 14px; }
.redeem-contact:hover {
transform: translateY(-1px);
filter: brightness(1.06);
box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
}
.redeem-contact:active { transform: scale(0.985); }
/* Divider "punya kode?" */
.redeem-divider {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0 8px;
color: var(--muted, #5b6963);
font-size: 9px;
letter-spacing: 0.6px;
text-transform: uppercase;
opacity: 0.7;
}
.redeem-divider::before,
.redeem-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border, rgba(255,255,255,0.08)), transparent);
}
.redeem-divider span { white-space: nowrap; }
/* Shrink shared elements inside redeem modal */
.redeem-modal .login-input {
padding: 9px 11px;
font-size: 11.5px;
letter-spacing: 0.5px;
text-align: center;
}
.redeem-modal .login-input::placeholder { letter-spacing: 0.8px; font-size: 10.5px; opacity: 0.5; }
.redeem-modal .login-submit {
margin-top: 8px;
padding: 9px 14px;
font-size: 11.5px;
letter-spacing: 0.4px;
border-radius: 9px;
}
.redeem-modal .login-submit svg { display: none; }
/* Input with icon + eye toggle */
.input-wrap { position: relative; }
.input-ico {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
}
.login-input.has-ico { padding-left: 38px; }
.login-input.has-ico + .input-eye,
.input-wrap .input-eye {
position: absolute;
right: 6px; top: 50%;
transform: translateY(-50%);
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: none;
color: var(--muted);
cursor: pointer;
border-radius: 8px;
transition: color 0.18s ease, background 0.18s ease;
}
.input-eye:hover { color: var(--neon); background: rgba(0,255,163,0.06); }
.input-eye.active { color: var(--neon); }
/* Form */
.login-pane { display: flex; flex-direction: column; }
.login-label {
font-family: 'Space Mono', monospace;
font-size: 12px;
color: var(--text-2);
margin-bottom: 8px;
letter-spacing: 0.3px;
}
.login-input {
width: 100%;
background: rgba(0,0,0,0.35);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
color: var(--text);
font-family: 'Space Mono', monospace;
font-size: 15px;
letter-spacing: 1px;
transition: all 0.18s ease;
}
.login-input::placeholder { color: var(--muted); letter-spacing: 1.5px; }
.login-input:focus {
border-color: var(--neon);
background: rgba(0,255,163,0.04);
box-shadow: 0 0 0 3px rgba(0,255,163,0.10), 0 0 16px rgba(0,255,163,0.12);
}
.login-hint {
display: flex; align-items: center; gap: 7px;
margin-top: 10px;
font-family: 'Space Mono', monospace;
font-size: 11.5px;
color: var(--muted);
}
.login-hint svg { flex-shrink: 0; color: var(--neon-3); opacity: 0.8; }
.login-hint a { color: var(--neon); text-decoration: none; }
.login-hint a:hover { text-decoration: underline; }
/* Method picker (Daftar pane — pilih metode aktivasi) */
.method-section {
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed var(--border);
}
.method-section-h {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--text-2);
letter-spacing: 2px;
margin-bottom: 10px;
text-align: center;
}
.method-tabs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
background: rgba(0,0,0,0.4);
padding: 4px;
border-radius: 11px;
margin-bottom: 12px;
border: 1px solid rgba(255,255,255,0.06);
}
.method-tab {
background: transparent;
border: none;
padding: 9px 4px;
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
border-radius: 8px;
color: var(--muted);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-transform: uppercase;
position: relative;
cursor: pointer;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.method-tab svg { width: 16px; height: 16px; }
.method-tab.active {
background: rgba(0,255,163,0.15);
color: var(--neon);
text-shadow: 0 0 8px rgba(0,255,163,0.45);
box-shadow: 0 0 12px rgba(0,255,163,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.method-tab.locked {
cursor: not-allowed;
pointer-events: none;
opacity: 0.55;
}
.method-tab.locked svg { opacity: 0.5; }
.method-soon {
position: absolute;
top: -4px; right: -3px;
font-family: 'Space Mono', monospace;
font-size: 8px;
background: var(--warn, #ffc83d);
color: #1a1a1a;
padding: 1px 4px;
border-radius: 3px;
letter-spacing: 1px;
font-weight: 700;
}
/* Submit button */
.login-submit {
margin-top: 20px;
width: 100%;
display: flex; align-items: center; justify-content: center;
gap: 10px;
padding: 16px;
border: none;
border-radius: 14px;
background: var(--grad-neon);
background-size: 200% 100%;
color: #0a1410;
font-family: 'Space Mono', monospace;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.6px;
cursor: pointer;
box-shadow:
0 8px 24px rgba(0,255,163,0.28),
0 0 30px rgba(0,255,163,0.18),
inset 0 1px 0 rgba(255,255,255,0.35);
transition: all 0.2s ease;
animation: btn-shift 4s linear infinite;
}
@keyframes btn-shift {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.login-submit:hover { transform: translateY(-1px); filter: brightness(1.05); }
.login-submit:active { transform: translateY(0); }
.login-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; filter: none; }
.login-submit.loading { pointer-events: none; }
.login-submit.loading span::after {
content: '...';
display: inline-block;
animation: dots 1s steps(4, end) infinite;
}
@keyframes dots {
0%,20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%,100% { content: '...'; }
}
/* Error */
.login-error {
margin-top: 14px;
padding: 10px 12px;
background: rgba(255,94,108,0.10);
border: 1px solid rgba(255,94,108,0.30);
border-radius: 10px;
color: var(--danger);
font-family: 'Space Mono', monospace;
font-size: 12px;
text-align: center;
animation: shake 0.32s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
/* Footer */
.login-foot {
margin-top: 20px;
text-align: center;
font-family: 'Space Mono', monospace;
font-size: 11.5px;
color: var(--muted);
letter-spacing: 0.4px;
}
.login-foot .heart {
color: var(--danger);
margin: 0 3px;
display: inline-block;
animation: heart-pulse 1.4s ease-in-out infinite;
}
@keyframes heart-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* WhatsApp FAB */
.login-wa {
position: fixed;
right: 22px; bottom: 22px;
width: 54px; height: 54px;
border-radius: 50%;
background: var(--grad-neon);
display: flex; align-items: center; justify-content: center;
box-shadow:
0 10px 24px rgba(0,255,163,0.32),
0 0 30px rgba(0,255,163,0.22),
inset 0 1px 0 rgba(255,255,255,0.35);
text-decoration: none;
transition: transform 0.18s ease;
z-index: 10000;
}
.login-wa:hover { transform: scale(1.08); }
.login-wa::after {
/* soft outer ring pulse */
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
border: 1.5px solid rgba(0,255,163,0.45);
animation: wa-pulse 2s ease-out infinite;
pointer-events: none;
}
@keyframes wa-pulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.4); opacity: 0; }
}
/* Responsive tweaks */
@media (max-width: 380px) {
.login-card { padding: 22px 16px 18px; }
.login-name { font-size: 28px; }
.login-logo { width: 68px; height: 68px; }
}
/* ============== Account settings card (in Konfig tab) ============== */
.settings-card.account {
display: flex; flex-direction: column; gap: 8px;
padding: 16px;
background: var(--grad-card);
border: 1px solid var(--border);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.settings-card.account::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(120% 60% at 0% 0%, rgba(0,255,163,0.05), transparent 60%);
pointer-events: none;
}
.account-head {
display: flex; align-items: center; gap: 8px;
font-family: 'Space Mono', monospace;
font-size: 12px;
font-weight: 700;
color: var(--neon);
letter-spacing: 1px;
text-transform: uppercase;
}
.account-head svg { color: var(--neon); }
.account-current {
font-family: 'Space Mono', monospace;
font-size: 11.5px;
color: var(--muted);
padding: 8px 10px;
background: rgba(0,0,0,0.30);
border: 1px dashed var(--border);
border-radius: 8px;
margin-bottom: 4px;
}
.account-current b { color: var(--neon-3); font-weight: 700; }
.acc-label {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--text-2);
letter-spacing: 0.4px;
margin-top: 6px;
}
.acc-input-wrap { position: relative; }
.acc-input {
width: 100%;
background: rgba(0,0,0,0.30);
border: 1px solid var(--border);
border-radius: 10px;
padding: 11px 14px;
color: var(--text);
font-family: 'Space Mono', monospace;
font-size: 13.5px;
letter-spacing: 0.5px;
transition: all 0.18s ease;
}
.acc-input::placeholder { color: var(--muted); }
.acc-input:focus {
border-color: var(--neon);
background: rgba(0,255,163,0.04);
box-shadow: 0 0 0 2px rgba(0,255,163,0.10);
}
.acc-input-wrap .acc-input { padding-right: 38px; }
.acc-eye {
position: absolute;
right: 6px; top: 50%;
transform: translateY(-50%);
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: none;
color: var(--muted);
cursor: pointer;
border-radius: 7px;
transition: color 0.18s ease, background 0.18s ease;
}
.acc-eye:hover { color: var(--neon); background: rgba(0,255,163,0.06); }
.acc-eye.active { color: var(--neon); }
.acc-actions {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 8px;
margin-top: 10px;
}
.acc-btn {
padding: 12px 10px;
border: none;
border-radius: 10px;
font-family: 'Space Mono', monospace;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.4px;
cursor: pointer;
transition: all 0.18s ease;
}
.acc-btn.save {
background: var(--grad-neon);
color: #0a1410;
box-shadow: 0 4px 14px rgba(0,255,163,0.20), inset 0 1px 0 rgba(255,255,255,0.3);
}
.acc-btn.save:hover { transform: translateY(-1px); filter: brightness(1.06); }
.acc-btn.reset {
background: transparent;
color: var(--text-2);
border: 1px solid var(--border);
}
.acc-btn.reset:hover { color: var(--danger); border-color: rgba(255,94,108,0.40); background: rgba(255,94,108,0.06); }
.acc-msg {
margin-top: 8px;
padding: 8px 10px;
border-radius: 8px;
font-family: 'Space Mono', monospace;
font-size: 11.5px;
text-align: center;
}
.acc-msg.ok {
background: rgba(0,255,163,0.10);
border: 1px solid var(--neon-soft);
color: var(--neon);
}
.acc-msg.err {
background: rgba(255,94,108,0.10);
border: 1px solid rgba(255,94,108,0.30);
color: var(--danger);
}
/* ============== Wallet pill in topbar ============== */
.wallet-pill {
width: auto !important;
padding: 0 10px 0 8px;
display: flex; align-items: center; gap: 6px;
height: 38px;
}
.wallet-pill-tag {
font-family: 'Space Mono', monospace;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.6px;
padding: 2px 6px;
border-radius: 6px;
background: rgba(155, 165, 175, 0.18);
color: var(--text-2);
}
.wallet-pill.connected .wallet-pill-tag {
background: rgba(0,255,163,0.18);
color: var(--neon);
}
.wallet-pill.mainnet .wallet-pill-tag {
background: rgba(255,94,108,0.18);
color: var(--danger);
}
/* ============== Wallet card (Konfig tab) ============== */
.settings-card.wallet-card {
display: flex; flex-direction: column; gap: 12px;
padding: 16px;
background:
linear-gradient(140deg, rgba(0,255,163,0.06) 0%, rgba(0,217,138,0.02) 60%, rgba(0,0,0,0) 100%),
rgba(13,26,20,0.5);
border: 1px solid var(--border);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.wallet-head {
display: flex; align-items: center; gap: 8px;
font-family: 'Space Mono', monospace;
font-size: 12px; font-weight: 700;
color: var(--neon);
letter-spacing: 1px;
text-transform: uppercase;
}
.wallet-net-badge {
margin-left: auto;
padding: 3px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
border-radius: 6px;
background: rgba(0,255,163,0.10);
color: var(--neon-3);
}
.wallet-net-badge.mainnet {
background: rgba(255,94,108,0.18);
color: var(--danger);
}
.wallet-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 12px;
background: rgba(0,0,0,0.30);
border: 1px dashed var(--border);
border-radius: 10px;
}
.wstat { display: flex; flex-direction: column; gap: 3px; }
.wstat-label {
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--muted);
letter-spacing: 0.4px;
text-transform: uppercase;
}
.wstat-val {
font-family: 'Space Mono', monospace;
font-size: 13px;
color: var(--text);
word-break: break-all;
}
.wstat-val.accent { color: var(--neon); font-weight: 700; }
.wstat-sub {
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--muted);
letter-spacing: 0.3px;
margin-top: 2px;
line-height: 1.35;
}
.wstat-sub .free { color: #6ee7a7; }
.wstat-sub .used { color: #f4b860; }
.wallet-actions {
display: flex; gap: 8px;
flex-wrap: wrap;
}
.wallet-actions .acc-btn { flex: 1 1 auto; }
.wallet-config {
display: flex; flex-direction: column; gap: 8px;
padding: 12px;
background: rgba(0,0,0,0.20);
border: 1px solid var(--border);
border-radius: 10px;
}
.wcfg-row {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
}
.wcfg-row label {
font-family: 'Space Mono', monospace;
font-size: 11.5px;
color: var(--text-2);
}
.acc-input.small {
width: 90px;
padding: 8px 10px;
font-size: 13px;
text-align: right;
}
.net-toggle {
display: flex;
background: rgba(0,0,0,0.40);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.net-opt {
padding: 7px 12px;
background: transparent;
border: none;
color: var(--muted);
font-family: 'Space Mono', monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.18s ease;
}
.net-opt:hover { color: var(--text); }
.net-opt.active {
background: rgba(0,255,163,0.18);
color: var(--neon);
}
.net-opt.mainnet.active {
background: rgba(255,94,108,0.20);
color: var(--danger);
}
.wallet-warn {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--warn);
padding: 8px 10px;
background: rgba(255,200,61,0.08);
border: 1px solid rgba(255,200,61,0.20);
border-radius: 8px;
line-height: 1.45;
}
.wallet-warn.danger {
color: var(--danger);
background: rgba(255,94,108,0.10);
border-color: rgba(255,94,108,0.30);
}
/* ============== Open Trade button on signal cards ============== */
.sig-trade-btn {
margin-top: 10px;
width: 100%;
display: flex; align-items: center; justify-content: center;
gap: 8px;
padding: 12px;
border: none;
border-radius: 10px;
background: var(--grad-neon);
color: #0a1410;
font-family: 'Space Mono', monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,255,163,0.20), inset 0 1px 0 rgba(255,255,255,0.30);
transition: all 0.18s ease;
}
.sig-trade-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sig-trade-btn:disabled {
background: rgba(155,181,166,0.18);
color: var(--muted);
cursor: not-allowed;
box-shadow: none;
transform: none;
filter: none;
}
.sig-trade-btn .net-tag {
padding: 1px 6px;
font-size: 10px;
background: rgba(0,0,0,0.35);
color: rgba(255,255,255,0.85);
border-radius: 4px;
font-weight: 700;
}
/* ============== Trade preview modal ============== */
.modal-card.trade-modal {
max-width: 380px;
padding: 20px;
}
.trade-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px;
}
.trade-pill {
padding: 4px 10px;
border-radius: 8px;
font-family: 'Space Mono', monospace;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.6px;
}
.trade-pill.BUY {
background: rgba(0,255,163,0.18);
color: var(--neon);
}
.trade-pill.SELL {
background: rgba(255,94,108,0.18);
color: var(--danger);
}
.trade-title {
font-family: 'Space Mono', monospace;
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.trade-sub {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.trade-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 10px;
padding: 12px;
background: rgba(0,0,0,0.30);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 10px;
}
.trade-grid > div {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 0;
}
.trade-grid span {
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.trade-grid b {
font-family: 'Space Mono', monospace;
font-size: 12.5px;
color: var(--text);
font-weight: 700;
}
.trade-grid b.up { color: var(--neon); }
.trade-grid b.dn { color: var(--danger); }
.trade-warn {
margin-bottom: 12px;
padding: 8px 10px;
background: rgba(255,200,61,0.08);
border: 1px solid rgba(255,200,61,0.25);
border-radius: 8px;
color: var(--warn);
font-family: 'Space Mono', monospace;
font-size: 11px;
text-align: center;
}
.trade-warn.danger {
color: var(--danger);
background: rgba(255,94,108,0.10);
border-color: rgba(255,94,108,0.30);
}
/* ============== Wallet picker modal ============== */
.modal-card.wallet-picker {
max-width: 380px;
padding: 22px 18px 16px;
display: flex; flex-direction: column; gap: 10px;
}
.wp-head {
display: flex; flex-direction: column; gap: 4px;
margin-bottom: 6px;
text-align: center;
}
.wp-title {
font-family: 'Space Mono', monospace;
font-size: 16px; font-weight: 700;
color: var(--text);
letter-spacing: 0.4px;
}
.wp-sub {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--muted);
}
.wp-option {
display: flex; align-items: center; gap: 12px;
padding: 14px;
background: rgba(0,0,0,0.30);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
cursor: pointer;
transition: all 0.18s ease;
text-align: left;
}
.wp-option:hover {
background: rgba(0,255,163,0.06);
border-color: var(--neon-soft);
transform: translateX(2px);
}
.wp-option:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
.wp-icon {
width: 42px; height: 42px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.20);
}
.wp-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wp-name {
font-family: 'Space Mono', monospace;
font-size: 13.5px;
font-weight: 700;
color: var(--text);
}
.wp-desc {
font-family: 'Space Mono', monospace;
font-size: 10.5px;
color: var(--muted);
}
.wp-arrow { color: var(--muted); }
.wp-foot {
display: flex; justify-content: center;
margin-top: 4px;
}
.wp-foot .modal-btn { width: 100%; }
.wp-retry {
display: flex; align-items: center; justify-content: center;
gap: 6px;
padding: 10px;
background: rgba(0,255,163,0.08);
border: 1px dashed var(--neon-soft);
border-radius: 10px;
color: var(--neon);
font-family: 'Space Mono', monospace;
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
transition: background 0.18s ease;
}
.wp-retry:hover { background: rgba(0,255,163,0.15); }
.wp-loader {
display: inline-block;
width: 11px; height: 11px;
border: 1.5px solid var(--neon-soft);
border-top-color: var(--neon);
border-radius: 50%;
animation: wp-spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 4px;
}
@keyframes wp-spin { to { transform: rotate(360deg); } }
.wallet-pill.reconnecting .wallet-pill-tag {
background: rgba(255,200,61,0.18);
color: var(--warn);
animation: pill-pulse 1.2s ease-in-out infinite;
}
@keyframes pill-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ============== Wallet error panel (persistent, actionable) ============== */
.wallet-error {
background: rgba(255,94,108,0.10);
border: 1px solid rgba(255,94,108,0.30);
border-radius: 10px;
padding: 10px 12px;
display: flex; flex-direction: column; gap: 8px;
}
.we-row {
display: flex; align-items: flex-start; gap: 10px;
}
.we-icon {
flex-shrink: 0;
font-size: 16px;
line-height: 1.2;
}
.we-msg {
flex: 1;
font-family: 'Space Mono', monospace;
font-size: 11.5px;
color: var(--danger);
word-break: break-word;
line-height: 1.4;
}
.we-close {
flex-shrink: 0;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid rgba(255,94,108,0.30);
border-radius: 5px;
color: var(--danger);
font-size: 16px;
line-height: 1;
cursor: pointer;
font-weight: 700;
}
.we-close:hover { background: rgba(255,94,108,0.18); }
.we-hint {
padding: 8px 10px;
background: rgba(255,200,61,0.10);
border: 1px solid rgba(255,200,61,0.25);
border-radius: 8px;
color: var(--warn);
font-family: 'Space Mono', monospace;
font-size: 11px;
line-height: 1.55;
}
.we-hint a {
color: var(--neon);
text-decoration: underline;
}
.we-hint a:hover { color: var(--neon-3); }
.we-hint b { color: var(--neon-3); font-weight: 700; }
/* ============== Signing overlay (full-screen, very visible) ============== */
.signing-overlay {
position: fixed;
inset: 0;
background: rgba(5, 13, 9, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9998;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.so-card {
max-width: 360px;
width: 100%;
background: linear-gradient(140deg, rgba(0,255,163,0.08) 0%, rgba(0,217,138,0.02) 60%, rgba(0,0,0,0) 100%), rgba(13,26,20,0.95);
border: 1px solid var(--neon-soft);
border-radius: 18px;
padding: 28px 22px 20px;
text-align: center;
box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 50px rgba(0,255,163,0.10);
}
.so-spinner {
width: 44px; height: 44px;
margin: 0 auto 18px;
border: 3px solid rgba(0,255,163,0.18);
border-top-color: var(--neon);
border-radius: 50%;
animation: so-spin 0.8s linear infinite;
}
@keyframes so-spin { to { transform: rotate(360deg); } }
.so-title {
font-family: 'Space Mono', monospace;
font-size: 16px;
font-weight: 700;
color: var(--neon);
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.so-msg {
font-family: 'Space Mono', monospace;
font-size: 13px;
color: var(--text);
line-height: 1.55;
margin-bottom: 12px;
}
.so-msg b { color: var(--neon-3); }
.so-hint {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--warn);
background: rgba(255,200,61,0.10);
border: 1px solid rgba(255,200,61,0.25);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 14px;
line-height: 1.45;
}
.so-cancel {
background: transparent;
border: 1px solid var(--border);
color: var(--text-2);
font-family: 'Space Mono', monospace;
font-size: 12px;
padding: 8px 18px;
border-radius: 8px;
cursor: pointer;
transition: all 0.18s ease;
}
.so-cancel:hover { color: var(--danger); border-color: rgba(255,94,108,0.40); }
.so-timer {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--muted);
margin-bottom: 14px;
letter-spacing: 0.4px;
}
.so-timer b { color: var(--neon-3); font-weight: 700; }
.so-actions {
display: flex; flex-direction: column;
gap: 8px;
}
.so-reset {
background: rgba(255,94,108,0.15);
border: 1px solid rgba(255,94,108,0.40);
color: var(--danger);
font-family: 'Space Mono', monospace;
font-size: 11.5px;
font-weight: 700;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
transition: background 0.18s ease;
}
.so-reset:hover { background: rgba(255,94,108,0.25); }
.ws-refresh {
background: rgba(0,255,163,0.12);
border: 1px solid var(--neon-soft);
color: var(--neon);
width: 18px; height: 18px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
margin-left: 4px;
padding: 0;
line-height: 1;
transition: background 0.15s ease;
}
.ws-refresh:hover { background: rgba(0,255,163,0.22); }
.ws-refresh.spinning { animation: ws-rot 0.8s linear infinite; }
@keyframes ws-rot { to { transform: rotate(360deg); } }
.wallet-reset-total {
width: 100%;
font-size: 11px !important;
padding: 10px !important;
margin-top: 6px;
opacity: 0.75;
}
.wallet-reset-total:hover { opacity: 1; }
.wallet-reliability-warn {
margin-top: 10px;
padding: 12px;
background: rgba(255,200,61,0.10);
border: 1px solid rgba(255,200,61,0.35);
border-radius: 10px;
font-family: 'Space Mono', monospace;
font-size: 11.5px;
color: var(--warn);
line-height: 1.55;
}
.wallet-reliability-warn b { color: var(--neon-3); }
.wallet-reliability-warn code {
display: inline-block;
padding: 2px 6px;
background: rgba(0,0,0,0.4);
border-radius: 4px;
color: var(--neon);
font-size: 10.5px;
}
/* Bybit-flavored Open Trade button (orange tint) */
.sig-trade-btn.bybit {
background: linear-gradient(135deg, #f7a600 0%, #ff8800 50%, #ffb84d 100%);
margin-bottom: 8px;
}
.sig-trade-btn.bybit:hover { filter: brightness(1.06); }
#bybitCard .wallet-head svg { color: #f7a600; }
#bybitCard .wallet-net-badge {
background: rgba(247, 166, 0, 0.15);
color: #f7a600;
}
#bybitCard .wallet-net-badge.mainnet {
background: rgba(255, 94, 108, 0.18);
color: var(--danger);
}
/* ============== Venue selector tabs ============== */
.venue-tabs {
display: flex; flex-direction: column; gap: 8px;
padding: 14px;
background: var(--grad-card);
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 4px;
}
.venue-label {
font-family: 'Space Mono', monospace;
font-size: 10.5px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.venue-row { display: flex; gap: 8px; }
.venue-tab {
flex: 1;
display: flex; align-items: center; gap: 10px;
padding: 12px;
background: rgba(0,0,0,0.30);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: all 0.18s ease;
color: var(--text-2);
}
.venue-tab:hover {
border-color: var(--neon-soft);
color: var(--text);
}
.venue-tab.active {
background: rgba(0,255,163,0.08);
border-color: var(--neon);
box-shadow: 0 0 12px rgba(0,255,163,0.12);
color: var(--text);
}
.vt-dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 8px currentColor;
}
.vt-dot.bybit { background: #f7a600; color: #f7a600; }
.vt-dot.hl { background: var(--neon); color: var(--neon); }
.vt-name {
font-family: 'Space Mono', monospace;
font-size: 13px;
font-weight: 700;
}
.vt-desc {
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--muted);
margin-top: 2px;
line-height: 1.3;
}
/* Venue card hide rules consolidated below (after MEXC theme block) */
/* Mode toggle (normal vs scalping) — same look as net-toggle */
.mode-row {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
}
.net-opt.scalping.active {
background: rgba(247, 166, 0, 0.20);
color: #f7a600;
}
/* ============== Input suffix indicators (% / $ / x) ============== */
.acc-input.small {
position: relative;
}
.wcfg-row { position: relative; }
.acc-input.small.suffix-pct,
.acc-input.small.suffix-usd,
.acc-input.small.suffix-x {
padding-right: 26px;
}
.wcfg-row:has(.suffix-pct)::after,
.wcfg-row:has(.suffix-usd)::after,
.wcfg-row:has(.suffix-x)::after {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--muted);
}
.wcfg-row:has(.suffix-pct)::after { content: '%'; }
.wcfg-row:has(.suffix-usd)::after { content: '$'; }
.wcfg-row:has(.suffix-x)::after { content: 'x'; }
/* Cleaner card spacing — less crowded */
.settings-card { gap: 10px; }
.wallet-card { gap: 10px !important; }
.wcfg-row { padding: 2px 0; }
/* Lighter dividers */
.wallet-stats { padding: 10px 12px; }
.wstat-label { font-size: 9.5px; }
.wstat-val { font-size: 12.5px; }
/* ============== Mode toggle (3 buttons: Normal/Scalping/Super) ============== */
/* iOS-style sliding pill — single indicator slides between options.
Color & glow morph sesuai mode aktif. */
.mode-row {
flex-direction: column;
align-items: stretch !important;
gap: 6px;
}
.mode-toggle {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 9px;
padding: 3px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 0 18px rgba(0,0,0,0.25);
isolation: isolate;
}
/* Sliding pill indicator — meluncur ke kolom mode aktif */
.mode-toggle::before {
content: "";
position: absolute;
top: 3px; bottom: 3px;
left: 3px;
width: calc((100% - 6px) / 3);
border-radius: 7px;
background: rgba(0,255,163,0.18);
box-shadow: 0 0 14px rgba(0,255,163,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
transition:
transform 0.36s cubic-bezier(0.65, 0, 0.35, 1),
background 0.28s ease,
box-shadow 0.28s ease;
z-index: 0;
}
.mode-toggle:has(.mode-opt.active[data-mode="scalping"])::before {
transform: translateX(100%);
background: linear-gradient(135deg, rgba(247,166,0,0.28), rgba(247,166,0,0.16));
box-shadow: 0 0 16px rgba(247,166,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mode-toggle:has(.mode-opt.active[data-mode="superscalping"])::before {
transform: translateX(200%);
background: linear-gradient(135deg, rgba(255,94,108,0.30), rgba(255,94,108,0.18));
box-shadow: 0 0 18px rgba(255,94,108,0.38), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mode-opt {
position: relative;
z-index: 1;
padding: 7px 4px;
background: transparent !important;
border: none;
color: var(--muted);
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
border-radius: 7px;
transition: color 0.22s ease, transform 0.18s ease;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.mode-opt svg {
width: 11px; height: 11px;
opacity: 0.55;
transition: opacity 0.22s, transform 0.22s;
}
.mode-opt.active svg { opacity: 1; }
.mode-opt:hover { color: var(--text); }
.mode-opt:hover svg { opacity: 0.85; }
.mode-opt:active { transform: scale(0.96); }
.mode-opt.active[data-mode="normal"] { color: var(--neon); text-shadow: 0 0 8px rgba(0,255,163,0.45); }
.mode-opt.active[data-mode="scalping"] { color: #ffb84d; text-shadow: 0 0 8px rgba(247,166,0,0.55); }
.mode-opt.active[data-mode="superscalping"] { color: #ff7a85; text-shadow: 0 0 8px rgba(255,94,108,0.55); }
/* ============== Bell badge ============== */
#bellBtn { position: relative; }
.bell-badge {
position: absolute;
top: 4px; right: 4px;
min-width: 16px; height: 16px;
padding: 0 4px;
background: var(--danger);
color: #fff;
border-radius: 8px;
font-family: 'Space Mono', monospace;
font-size: 9px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 8px rgba(255,94,108,0.6);
animation: badge-pop 0.3s ease;
}
@keyframes badge-pop {
0% { transform: scale(0); }
60% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* ============== Notification panel — minimalist premium ============== */
.notif-panel {
position: fixed;
inset: 0;
background: rgba(5, 13, 9, 0.55);
z-index: 9000;
display: flex; align-items: flex-start; justify-content: center;
padding: 56px 14px 16px;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
.notif-card {
width: 100%; max-width: 420px;
background:
radial-gradient(120% 80% at 0% 0%, rgba(0,255,163,0.08), transparent 55%),
linear-gradient(180deg, #0e1814 0%, #0a1410 100%);
border: 1px solid rgba(0, 255, 163, 0.18);
border-radius: 16px;
box-shadow:
0 20px 60px rgba(0,0,0,0.55),
0 0 0 1px rgba(0,255,163,0.04),
inset 0 1px 0 rgba(255,255,255,0.04);
overflow: hidden;
display: flex; flex-direction: column;
max-height: calc(100dvh - 72px);
}
/* Header */
.notif-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: linear-gradient(180deg, rgba(0,255,163,0.05), transparent);
}
.notif-head > span {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Space Mono', monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text);
}
.notif-head > span::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--neon);
box-shadow: 0 0 8px var(--neon);
animation: notif-head-blink 2s ease-in-out infinite;
}
@keyframes notif-head-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.notif-head-actions { display: flex; gap: 6px; align-items: center; }
.notif-clear {
background: rgba(255,94,108,0.08);
border: 1px solid rgba(255,94,108,0.25);
color: #ff8a93;
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
padding: 6px 11px;
border-radius: 8px;
cursor: pointer;
transition: all 0.18s ease;
}
.notif-clear:hover {
background: rgba(255,94,108,0.18);
border-color: rgba(255,94,108,0.55);
transform: translateY(-1px);
}
.notif-close {
width: 28px; height: 28px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-2);
border-radius: 8px;
cursor: pointer;
font-size: 16px; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: all 0.18s ease;
}
.notif-close:hover {
background: rgba(255,94,108,0.15);
color: var(--danger);
border-color: rgba(255,94,108,0.4);
}
/* List */
.notif-list {
overflow-y: auto;
max-height: calc(100dvh - 200px);
padding: 10px 10px 14px;
scrollbar-width: thin;
scrollbar-color: rgba(0,255,163,0.25) transparent;
}
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(0,255,163,0.25); border-radius: 3px; }
.notif-item {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 11px;
margin-bottom: 6px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
}
.notif-item.unread {
background:
linear-gradient(110deg, rgba(0,255,163,0.10), rgba(0,255,163,0.02) 60%);
border-color: rgba(0,255,163,0.20);
}
.notif-item.warn { border-color: rgba(255,200,61,0.18); background: rgba(255,200,61,0.04); }
.notif-item.error { border-color: rgba(255,94,108,0.18); background: rgba(255,94,108,0.04); }
/* Icon container — squircle, color-coded */
.notif-icon {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,255,163,0.10);
color: var(--neon);
border: 1px solid rgba(0,255,163,0.20);
border-radius: 9px;
flex-shrink: 0;
font-size: 13px;
font-weight: 700;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.notif-item.warn .notif-icon { background: rgba(255,200,61,0.12); color: var(--warn); border-color: rgba(255,200,61,0.30); }
.notif-item.error .notif-icon { background: rgba(255,94,108,0.12); color: var(--danger); border-color: rgba(255,94,108,0.30); }
.notif-body { flex: 1; min-width: 0; }
.notif-msg {
font-family: 'Space Mono', monospace;
font-size: 12.5px;
color: var(--text);
line-height: 1.45;
word-break: break-word;
}
.notif-time {
font-family: 'Space Mono', monospace;
font-size: 9.5px;
color: var(--muted);
margin-top: 5px;
letter-spacing: 0.4px;
text-transform: uppercase;
}
/* Counter badge di header */
.notif-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 7px;
margin-left: 4px;
background: var(--neon);
color: #0a1410;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.3px;
box-shadow: 0 0 10px rgba(0,255,163,0.45);
}
/* Empty state */
.notif-empty {
text-align: center;
padding: 50px 20px 60px;
font-family: 'Space Mono', monospace;
font-size: 12px;
color: var(--muted);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.notif-empty-icon {
width: 72px; height: 72px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 25%, rgba(0,255,163,0.12), rgba(0,255,163,0.02) 70%),
rgba(255,255,255,0.02);
border: 1px solid rgba(0,255,163,0.18);
display: flex; align-items: center; justify-content: center;
color: var(--neon-2, #00e68a);
animation: notif-empty-breathe 3.2s ease-in-out infinite;
}
@keyframes notif-empty-breathe {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,163,0.0); transform: scale(1); }
50% { box-shadow: 0 0 0 6px rgba(0,255,163,0.06); transform: scale(1.04); }
}
.notif-empty-title {
font-size: 13px;
color: var(--text-2);
letter-spacing: 0.6px;
}
.notif-empty-sub {
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.3px;
line-height: 1.5;
}
/* ============== MEXC venue + card theme (cyan) ============== */
.venue-row.venue-row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.venue-tab {
flex: unset;
padding: 10px 8px;
}
.venue-tab .vt-name { font-size: 12.5px; }
.venue-tab .vt-desc { font-size: 9px; }
.vt-dot.mexc { background: #00d4d4; color: #00d4d4; }
/* Hyperliquid disabled for now — always hide HL card */
#walletCard { display: none !important; }
/* Venue cards sekarang DI DALAM modal — buka via tab click */
.venue-modal {
/* base .modal sudah handle backdrop + center */
padding: 16px;
align-items: flex-start;
}
.venue-modal .venue-modal-card {
margin: 30px 0 0;
max-width: 520px;
width: 100%;
max-height: calc(100vh - 60px);
overflow-y: auto;
animation: vm-slide-up 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes vm-slide-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.venue-modal-close {
margin-left: auto;
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
color: var(--text-2);
width: 30px; height: 30px;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.venue-modal-close:hover {
background: rgba(255,94,108,0.15);
border-color: rgba(255,94,108,0.4);
color: var(--danger);
}
/* ===== Tombol "Konfigurasi Exchange" di Konfig ===== */
.ex-config-btn {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 16px;
background:
linear-gradient(110deg, rgba(0,230,138,0.12), rgba(0,212,255,0.06) 50%, rgba(0,230,138,0.12)),
rgba(0, 0, 0, 0.30);
border: 1px solid rgba(0, 230, 138, 0.35);
border-radius: 12px;
color: var(--neon-2, #00e68a);
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
transition: transform 0.14s ease, box-shadow 0.28s ease, border-color 0.28s ease;
/* Breathing border-glow loop — selalu hidup, halus */
animation: ex-cfg-breath 3.6s ease-in-out infinite;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 14px rgba(0,230,138,0.10);
}
@keyframes ex-cfg-breath {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 0 rgba(0,230,138,0.0), 0 4px 14px rgba(0,230,138,0.10); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(0,230,138,0.20), 0 6px 22px rgba(0,230,138,0.28); }
}
/* Shimmer sweep — diagonal cahaya melintas pelan */
.ex-config-btn::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(0,255,163,0.22) 50%, transparent 65%);
transform: translateX(-100%);
animation: ex-cfg-shimmer 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes ex-cfg-shimmer {
0% { transform: translateX(-100%); }
55% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
/* Hover: lift + ring kuat */
.ex-config-btn:hover {
transform: translateY(-1px);
border-color: rgba(0, 230, 138, 0.65);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(0,230,138,0.30), 0 10px 28px rgba(0,230,138,0.35);
animation-play-state: paused;
}
.ex-config-btn:hover::before { animation-duration: 1.8s; }
.ex-config-btn:active { transform: scale(0.985); }
/* Icon dalam slot squircle — gear spin pelan terus, makin cepat saat hover */
.ex-config-btn svg {
flex: 0 0 auto;
width: 18px; height: 18px;
padding: 0;
}
.ex-config-btn .ic-spin-hover {
animation: ex-gear-idle 9s linear infinite;
filter: drop-shadow(0 0 4px rgba(0,230,138,0.5));
transition: filter 0.22s ease;
}
@keyframes ex-gear-idle { to { transform: rotate(360deg); } }
@keyframes ex-gear-fast { to { transform: rotate(360deg); } }
.ex-config-btn:hover .ic-spin-hover {
animation: ex-gear-fast 1.4s linear infinite;
filter: drop-shadow(0 0 8px rgba(0,230,138,0.85));
}
.ex-config-btn span { position: relative; z-index: 1; text-shadow: 0 0 10px rgba(0,230,138,0.30); }
/* ===== Modal Konfigurasi Exchange (terpadu) ===== */
.exchange-config-modal {
align-items: flex-start;
padding: 16px 12px;
/* dvh = dynamic viewport, agar tidak mentok di bawah toolbar mobile */
min-height: 100dvh;
}
.exchange-config-modal .ec-modal-card {
margin: 12px auto 0;
max-width: 520px;
width: 100%;
/* Header sticky tetap kelihatan, body scroll. Gunakan dvh untuk mobile. */
max-height: calc(100dvh - 24px);
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #0f1916 0%, #0a1410 100%);
border: 1px solid var(--border);
border-radius: 16px;
padding: 0;
overflow: hidden; /* shell tidak scroll, body yg scroll */
box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,255,163,0.04);
animation: vm-slide-up 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.ec-modal-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(0,255,163,0.04), transparent);
color: var(--text);
flex-shrink: 0;
}
.ec-modal-head svg { color: var(--neon-2, #00e68a); flex: 0 0 auto; }
.ec-modal-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.ec-tab-switch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 4px;
background: rgba(0,0,0,0.30);
border: 1px solid var(--border);
border-radius: 10px;
margin: 12px 14px 0;
flex-shrink: 0;
}
.ec-panels {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 14px 24px;
scrollbar-width: thin;
scrollbar-color: rgba(0,255,163,0.25) transparent;
}
.ec-panels::-webkit-scrollbar { width: 6px; }
.ec-panels::-webkit-scrollbar-thumb { background: rgba(0,255,163,0.25); border-radius: 3px; }
.ec-tab {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 10px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--text-2);
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.18s ease;
}
.ec-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.ec-tab.active {
background: rgba(0, 230, 138, 0.10);
border-color: rgba(0, 230, 138, 0.4);
color: var(--neon-2, #00e68a);
}
.ec-tab[data-ec-tab="mexc"].active {
background: rgba(0, 212, 212, 0.12);
border-color: rgba(0, 212, 212, 0.45);
color: #00d4d4;
}
.ec-tab .vt-dot { width: 8px; height: 8px; border-radius: 50%; }
.ec-tab .vt-dot.bybit { background: #f7a600; }
.ec-tab .vt-dot.mexc { background: #00d4d4; }
.ec-panel { display: block; }
.ec-panel[hidden] { display: none; }
.ec-card {
margin: 0 !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 14px;
}
/* ===== Header card venue (Bybit/MEXC) — chunky brand strip ===== */
.ec-card .wallet-head {
padding: 12px 14px;
background: linear-gradient(135deg, rgba(247,166,0,0.08), rgba(247,166,0,0.02));
border: 1px solid rgba(247,166,0,0.20);
border-radius: 12px;
margin: 0;
}
#mexcCard.ec-card .wallet-head {
background: linear-gradient(135deg, rgba(0,212,212,0.08), rgba(0,212,212,0.02));
border-color: rgba(0,212,212,0.20);
}
/* ===== Stats grid — modern card 2x2 ===== */
.ec-panel .wallet-stats {
border: 1px solid var(--border);
border-style: solid;
background: rgba(0,0,0,0.30);
padding: 14px 12px;
border-radius: 12px;
gap: 10px;
}
.ec-panel .wstat {
padding: 10px 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 9px;
gap: 4px;
min-height: 56px;
}
.ec-panel .wstat-label {
font-size: 9.5px;
letter-spacing: 0.6px;
display: flex;
align-items: center;
gap: 6px;
}
.ec-panel .wstat-val { font-size: 13.5px; font-weight: 600; }
/* ===== Form sections ===== */
.ec-panel .wallet-config {
background: transparent;
border: none;
padding: 0;
gap: 0;
}
.cfg-section {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
background: rgba(0,0,0,0.30);
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 10px;
}
.cfg-section-title {
font-family: 'Space Mono', monospace;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 2px;
}
.cfg-section-title::before {
content: "";
width: 4px; height: 4px;
border-radius: 50%;
background: var(--neon-2, #00e68a);
box-shadow: 0 0 6px var(--neon-2, #00e68a);
}
#mexcCard .cfg-section-title::before {
background: #00d4d4;
box-shadow: 0 0 6px #00d4d4;
}
.ec-panel .wcfg-row {
padding: 0;
}
.ec-panel .wcfg-row label {
font-size: 12px;
color: var(--text-2);
letter-spacing: 0.2px;
}
/* ===== Inputs lebih bersih ===== */
.ec-panel .acc-input {
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.08);
}
.ec-panel .acc-input:focus {
border-color: rgba(0,255,163,0.55);
box-shadow: 0 0 0 3px rgba(0,255,163,0.10);
}
/* ===== Modern toggle pill ===== */
.ec-panel .net-toggle {
background: rgba(0,0,0,0.50);
border: 1px solid rgba(255,255,255,0.06);
padding: 3px;
border-radius: 9px;
gap: 2px;
}
.ec-panel .net-opt {
padding: 7px 14px;
border-radius: 6px;
font-size: 10.5px;
}
.ec-panel .net-opt.active {
background: rgba(0,255,163,0.18);
box-shadow: 0 0 0 1px rgba(0,255,163,0.30);
}
.ec-panel .net-opt.mainnet.active {
background: rgba(255,94,108,0.20);
box-shadow: 0 0 0 1px rgba(255,94,108,0.35);
}
/* ===== Action buttons — sticky bottom feel ===== */
.ec-panel .wallet-actions {
margin-top: 6px;
padding: 12px;
background: rgba(0,0,0,0.30);
border: 1px solid var(--border);
border-radius: 12px;
}
.ec-panel .acc-btn {
padding: 12px 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.4px;
border-radius: 10px;
}
/* ===== Footer warn slim ===== */
.ec-panel .wallet-warn {
font-size: 10.5px;
text-align: center;
background: rgba(255,200,61,0.06);
border-style: dashed;
padding: 8px 10px;
}
/* ============== Telegram Notif card — branded biru ============== */
:root { --tg-blue: #229ED9; --tg-blue-2: #38BDF8; }
.tg-card {
background:
linear-gradient(180deg, rgba(34,158,217,0.06), transparent 70%),
var(--card);
border: 1px solid rgba(34,158,217,0.18) !important;
}
.tg-card .wallet-head.tg-head {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(34,158,217,0.10), rgba(56,189,248,0.04));
border: 1px solid rgba(34,158,217,0.18);
border-radius: 12px;
}
.tg-icon {
width: 34px; height: 34px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--tg-blue), var(--tg-blue-2));
color: #fff;
box-shadow: 0 6px 18px rgba(34,158,217,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
}
.tg-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tg-title {
font-family: 'Space Mono', monospace;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text);
}
.tg-sub {
font-size: 10px;
color: var(--muted);
letter-spacing: 0.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Status pill — animated dot saat ON */
.tg-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border-radius: 999px;
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
}
.tg-status::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
}
.tg-status.off {
color: var(--muted);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.tg-status.on {
color: var(--neon);
background: rgba(0,255,163,0.10);
border: 1px solid rgba(0,255,163,0.32);
}
.tg-status.on::before { animation: tg-blink 1.4s ease-in-out infinite; box-shadow: 0 0 8px var(--neon); }
@keyframes tg-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
/* Section title varian biru telegram */
.cfg-section-title.tg::before {
background: var(--tg-blue-2);
box-shadow: 0 0 6px var(--tg-blue-2);
}
.tg-card .cfg-section {
border-color: rgba(34,158,217,0.14);
}
.tg-card .acc-input:focus {
border-color: rgba(56,189,248,0.55);
box-shadow: 0 0 0 3px rgba(34,158,217,0.14);
}
/* Hint singkat di section Trade dari Telegram */
.tg-trade-hint {
margin: -2px 0 10px;
font-size: 10.5px;
color: var(--muted);
line-height: 1.5;
letter-spacing: 0.2px;
}
/* Flatten dinding tengah di modal Telegram Setting.
Modal sudah punya border luar; section internal sudah punya border masing-
masing — jangan tambah lagi border ke .tg-card yg duduk di tengahnya. */
.tg-modal-body .tg-card {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.tg-modal-body .wallet-config {
background: transparent;
border: none;
padding: 0;
gap: 0;
}
.tg-modal-body .cfg-section { margin-bottom: 10px; }
.tg-modal-body .cfg-section:last-of-type { margin-bottom: 0; }
/* Action buttons — primary save (biru) + secondary test (outline) */
.tg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tg-actions .acc-btn {
padding: 11px 14px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.4px;
border-radius: 10px;
flex: unset;
}
.acc-btn.tg-save {
background: linear-gradient(135deg, var(--tg-blue), var(--tg-blue-2));
color: #fff;
border: none;
box-shadow: 0 6px 18px rgba(34,158,217,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
transition: transform 0.12s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.acc-btn.tg-save:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 26px rgba(34,158,217,0.45); }
.acc-btn.tg-save:active { transform: scale(0.985); }
.acc-btn.tg-test {
background: rgba(34,158,217,0.06);
color: var(--tg-blue-2);
border: 1px solid rgba(34,158,217,0.30);
transition: background 0.22s ease, border-color 0.22s ease, transform 0.12s ease;
}
.acc-btn.tg-test:hover { background: rgba(34,158,217,0.14); border-color: rgba(56,189,248,0.55); }
.acc-btn.tg-test:active { transform: scale(0.985); }
/* Card di dalam modal popup (exchange / telegram setting) tidak boleh ikut
sistem collapse */
.ec-panel .wallet-card.collapsed .wallet-config,
.ec-panel .wallet-card.collapsed .wallet-error,
.ec-panel .wallet-card.collapsed .wallet-warn,
.ec-panel .wallet-card.collapsed .wallet-stats,
.tg-modal-body .wallet-card.collapsed .wallet-config,
.tg-modal-body .wallet-card.collapsed .wallet-error,
.tg-modal-body .wallet-card.collapsed .wallet-actions,
.exchange-config-modal .wallet-card.collapsed .wallet-config,
.exchange-config-modal .wallet-card.collapsed .wallet-actions {
display: revert !important;
}
.ec-panel .wallet-card.collapsed .wstat:nth-child(n+3) { display: revert !important; }
/* ============== Icon polish — smooth transitions + hover glow ============== */
.round-ghost svg,
.nav-item svg,
.send-btn svg,
.fab svg,
.ex-config-btn svg,
.alert-close svg,
.wallet-head svg,
.ec-modal-head svg,
.input-ico {
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.22s ease,
opacity 0.18s ease;
vector-effect: non-scaling-stroke;
}
/* Top-bar / chat-head ghost buttons — soft neon glow on hover */
.round-ghost.ic-glow:hover svg {
transform: translateY(-1px) scale(1.06);
filter: drop-shadow(0 0 6px rgba(0, 230, 138, 0.55));
}
.round-ghost.ic-glow:active svg { transform: scale(0.96); }
/* Bottom nav — active item gets a steady glow, inactive gets hover lift */
.nav-item svg {
filter: drop-shadow(0 0 0 transparent);
}
.nav-item:hover svg {
transform: translateY(-2px);
filter: drop-shadow(0 0 5px rgba(0, 230, 138, 0.45));
}
.nav-item.active svg {
filter: drop-shadow(0 0 7px rgba(0, 230, 138, 0.65));
animation: ic-pulse 2.4s ease-in-out infinite;
}
@keyframes ic-pulse {
0%, 100% { filter: drop-shadow(0 0 6px rgba(0, 230, 138, 0.45)); }
50% { filter: drop-shadow(0 0 10px rgba(0, 230, 138, 0.85)); }
}
/* FAB & send — punchy hover */
.send-btn:hover svg,
.fab:hover svg {
transform: scale(1.08) rotate(-6deg);
}
.send-btn:active svg,
.fab:active svg { transform: scale(0.94); }
/* Alert close — rotate on hover */
.alert-close:hover svg { transform: rotate(90deg); filter: drop-shadow(0 0 4px rgba(255,94,108,0.6)); }
/* Login input icons — soft fade on focus */
.acc-field:focus-within .input-ico { color: var(--neon-2, #00e68a); filter: drop-shadow(0 0 4px rgba(0,230,138,0.55)); }
/* Modal head ikon — subtle accent glow */
.ec-modal-head svg,
.wallet-head svg {
filter: drop-shadow(0 0 4px rgba(0, 230, 138, 0.25));
}
#bybitCard .wallet-head svg { filter: drop-shadow(0 0 5px rgba(247, 166, 0, 0.45)); }
#mexcCard .wallet-head svg { filter: drop-shadow(0 0 5px rgba(0, 212, 212, 0.45)); }
#mexcCard .wallet-head svg { color: #00d4d4; }
#mexcCard .wallet-net-badge {
background: rgba(0, 212, 212, 0.15);
color: #00d4d4;
}
.mexc-badge { background: rgba(0,212,212,0.15) !important; color: #00d4d4 !important; }
/* MEXC-flavored Open Trade button (cyan) */
.sig-trade-btn.mexc {
background: linear-gradient(135deg, #00d4d4 0%, #00a8a8 50%, #4ddede 100%);
margin-bottom: 8px;
color: #002;
}
.sig-trade-btn.mexc:hover { filter: brightness(1.06); }
/* ============== Card collapse (minimize) ============== */
.card-collapse {
margin-left: auto;
width: 26px; height: 26px;
background: rgba(0,0,0,0.30);
border: 1px solid var(--border);
color: var(--text-2);
border-radius: 6px;
cursor: pointer;
font-size: 12px;
line-height: 1;
transition: all 0.18s ease;
display: flex; align-items: center; justify-content: center;
}
.card-collapse:hover {
color: var(--neon);
border-color: var(--neon-soft);
background: rgba(0,255,163,0.06);
}
.wallet-card.collapsed .card-collapse {
transform: rotate(-90deg);
color: var(--muted);
}
/* When collapsed, hide stats/config/error/warn — keep header + status row + connect/disconnect button */
.wallet-card.collapsed .wallet-config,
.wallet-card.collapsed .wallet-error,
.wallet-card.collapsed .wallet-warn,
.wallet-card.collapsed .wallet-reliability-warn,
.wallet-card.collapsed .wallet-reset-total {
display: none !important;
}
/* Compact stats when collapsed: only show balance + status inline */
.wallet-card.collapsed .wallet-stats {
grid-template-columns: 1fr 1fr;
padding: 8px 10px;
gap: 4px;
}
.wallet-card.collapsed .wstat:nth-child(n+3) { display: none; }
.wallet-card.collapsed .wstat-label { font-size: 9px; }
.wallet-card.collapsed .wstat-val { font-size: 12px; }
.wallet-card.collapsed .wallet-actions { gap: 6px; }
.wallet-card.collapsed .wallet-actions .acc-btn { padding: 8px; font-size: 12px; }
/* When collapsed AND not connected, hide stats too — just show header + Connect */
.wallet-card.collapsed .wallet-stats[hidden] { display: none !important; }
/* ============== Positions tab ============== */
/* ============== Posisi Aktif tab ============== */
.positions-head {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 16px 16px 10px;
gap: 12px;
}
.positions-head-meta { min-width: 0; flex: 1; }
.positions-title {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.4px;
color: #fff;
margin: 0;
}
.positions-sub {
font-family: -apple-system, sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.45);
margin-top: 4px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Pill venue badge — kecil, di sub */
.psub-venue {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.3px;
background: rgba(0,255,163,0.10);
border: 1px solid rgba(0,255,163,0.25);
border-radius: 999px;
color: var(--neon);
text-transform: uppercase;
}
.psub-venue.demo { background: rgba(56,189,248,0.10); border-color: rgba(56,189,248,0.30); color: #38bdf8; }
.psub-venue.empty { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.45); }
/* Refresh button — icon only circle */
.positions-refresh {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.65);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.18s ease;
}
.positions-refresh:hover {
background: rgba(0,255,163,0.10);
border-color: rgba(0,255,163,0.30);
color: var(--neon);
transform: rotate(45deg);
}
.positions-refresh:active { transform: rotate(180deg) scale(0.92); }
.positions-refresh.spinning svg {
animation: pos-spin 0.8s linear;
}
@keyframes pos-spin { to { transform: rotate(360deg); } }
/* Summary card — minimalist, no border, subtle bg */
.positions-summary {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
margin: 0 14px 14px;
padding: 18px 16px;
background:
linear-gradient(180deg, rgba(0,255,163,0.04), rgba(0,255,163,0.01)),
rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
position: relative;
overflow: hidden;
}
/* Subtle accent line di top */
.positions-summary::before {
content: '';
position: absolute;
top: 0; left: 16%; right: 16%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--neon-soft), transparent);
}
.psum-cell {
display: flex;
flex-direction: column;
gap: 5px;
align-items: flex-start;
min-width: 0;
}
.psum-label {
font-family: -apple-system, sans-serif;
font-size: 10px;
color: rgba(255,255,255,0.42);
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 600;
}
.psum-val {
font-family: 'SF Mono', 'Space Mono', ui-monospace, monospace;
font-size: 17px;
font-weight: 600;
color: #fff;
font-feature-settings: 'tnum';
letter-spacing: -0.3px;
white-space: nowrap;
}
.psum-val.up { color: var(--neon); text-shadow: 0 0 12px rgba(0,255,163,0.3); }
.psum-val.down { color: var(--danger); text-shadow: 0 0 12px rgba(255,94,108,0.3); }
.psum-val-multi {
font-size: 12px;
font-weight: 600;
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.35;
}
.psum-line {
font-family: 'SF Mono', 'Space Mono', ui-monospace, monospace;
white-space: nowrap;
}
/* Mobile: smaller font, tighter spacing */
@media (max-width: 480px) {
.positions-head { padding: 14px 12px 8px; }
.positions-title { font-size: 16px; }
.positions-summary { padding: 14px 12px; gap: 10px; margin: 0 10px 12px; }
.psum-val { font-size: 15px; }
.psum-label { font-size: 9.5px; letter-spacing: 1px; }
}
.positions-list {
display: flex; flex-direction: column;
gap: 8px;
padding: 0 12px 80px;
}
.pos-item {
display: flex; flex-direction: column;
gap: 8px;
padding: 12px;
background: var(--grad-card);
border: 1px solid var(--border);
border-radius: 12px;
}
.pos-row1 {
display: flex; align-items: center; gap: 8px;
}
.pos-side {
padding: 3px 8px;
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
border-radius: 6px;
}
.pos-side.BUY { background: rgba(0,255,163,0.18); color: var(--neon); }
.pos-side.SELL { background: rgba(255,94,108,0.18); color: var(--danger); }
.pos-side.LONG { background: rgba(0,255,163,0.18); color: var(--neon); }
.pos-side.SHORT { background: rgba(255,94,108,0.18); color: var(--danger); }
.pos-symbol {
font-family: 'Space Mono', monospace;
font-size: 13.5px;
font-weight: 700;
color: var(--text);
}
.pos-source {
margin-left: auto;
font-family: 'Space Mono', monospace;
font-size: 9.5px;
color: var(--muted);
padding: 2px 6px;
background: rgba(0,0,0,0.30);
border-radius: 5px;
}
.pos-scanner {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
margin-bottom: 8px;
background: rgba(0,255,163,0.06);
border: 1px solid var(--neon-soft);
border-radius: 999px;
font-family: 'Space Mono', monospace;
font-size: 10.5px;
color: var(--neon);
letter-spacing: 0.4px;
width: fit-content;
}
.pos-scanner-ico { font-size: 12px; line-height: 1; }
.pos-scanner-name { font-weight: 700; }
.pos-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 6px 10px;
}
.pos-cell {
display: flex; flex-direction: column; gap: 2px;
}
.pos-cell-label {
font-family: 'Space Mono', monospace;
font-size: 9.5px;
color: var(--muted);
text-transform: uppercase;
}
.pos-cell-val {
font-family: 'Space Mono', monospace;
font-size: 11.5px;
color: var(--text);
}
.pos-cell-val.up { color: var(--neon); }
.pos-cell-val.down { color: var(--danger); }
.pos-pnl {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 10px;
border-radius: 8px;
background: rgba(0,0,0,0.30);
border: 1px solid var(--border);
}
.pos-pnl.up { background: rgba(0,255,163,0.06); border-color: var(--neon-soft); }
.pos-pnl.down { background: rgba(255,94,108,0.06); border-color: rgba(255,94,108,0.30); }
.pos-pnl-label {
font-family: 'Space Mono', monospace;
font-size: 10.5px;
color: var(--muted);
}
.pos-pnl-val {
font-family: 'Space Mono', monospace;
font-size: 13px;
font-weight: 700;
}
.pos-pnl.up .pos-pnl-val { color: var(--neon); }
.pos-pnl.down .pos-pnl-val { color: var(--danger); }
.pos-empty {
padding: 60px 20px;
text-align: center;
font-family: 'Space Mono', monospace;
font-size: 12px;
color: var(--muted);
}
/* Bottom-nav badge */
.nav-badge {
display: inline-block;
margin-left: 3px;
padding: 0 4px;
font-size: 8.5px;
font-weight: 700;
background: var(--neon);
color: #0a1410;
border-radius: 6px;
vertical-align: middle;
line-height: 1.4;
}
/* Close position button */
.pos-close-btn {
width: 100%;
margin-top: 4px;
padding: 9px 12px;
background: rgba(255,94,108,0.10);
border: 1px solid rgba(255,94,108,0.30);
border-radius: 8px;
color: var(--danger);
font-family: 'Space Mono', monospace;
font-size: 12px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.4px;
transition: all 0.15s ease;
}
.pos-close-btn:hover {
background: rgba(255,94,108,0.20);
border-color: rgba(255,94,108,0.50);
}
.pos-close-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============== Bell ring animation on click ============== */
#bellBtn { transition: transform 0.12s ease; }
#bellBtn:active { transform: scale(0.88); }
#bellBtn.bell-ringing svg { animation: bell-ring 0.6s ease; transform-origin: top center; }
@keyframes bell-ring {
0% { transform: rotate(0deg) scale(1); }
15% { transform: rotate(-22deg) scale(1.1); }
30% { transform: rotate(18deg) scale(1.1); }
45% { transform: rotate(-14deg) scale(1.05); }
60% { transform: rotate(10deg) scale(1.05); }
75% { transform: rotate(-6deg) scale(1.02); }
90% { transform: rotate(3deg) scale(1.01); }
100% { transform: rotate(0deg) scale(1); }
}
/* ============== Notification panel — animations ============== */
.notif-panel { animation: notif-fade-in 0.20s ease; }
@keyframes notif-fade-in { from { opacity: 0; } to { opacity: 1; } }
.notif-card { animation: notif-slide-down 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes notif-slide-down {
from { opacity: 0; transform: translateY(-14px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-item {
cursor: pointer;
position: relative;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
animation: notif-item-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.notif-list .notif-item:nth-child(1) { animation-delay: 0.02s; }
.notif-list .notif-item:nth-child(2) { animation-delay: 0.06s; }
.notif-list .notif-item:nth-child(3) { animation-delay: 0.10s; }
.notif-list .notif-item:nth-child(4) { animation-delay: 0.14s; }
.notif-list .notif-item:nth-child(5) { animation-delay: 0.18s; }
.notif-list .notif-item:nth-child(n+6) { animation-delay: 0.22s; }
@keyframes notif-item-in {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
.notif-item:hover {
background: rgba(0,255,163,0.08);
border-color: rgba(0,255,163,0.30);
transform: translateX(2px);
}
.notif-item:active { transform: scale(0.985); }
.notif-item.removing {
opacity: 0;
transform: translateX(28px);
pointer-events: none;
}
.notif-item.unread::after {
content: '';
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
border-radius: 3px;
background: var(--neon);
box-shadow: 0 0 8px var(--neon);
animation: notif-unread-pulse 1.8s ease-in-out infinite;
}
@keyframes notif-unread-pulse {
0%, 100% { opacity: 0.65; }
50% { opacity: 1; }
}
/* Per-item delete button */
.notif-del {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 26px; height: 26px;
border: none;
background: transparent;
color: var(--muted);
border-radius: 7px;
cursor: pointer;
font-size: 17px;
line-height: 1;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.18s ease, background 0.15s, color 0.15s, transform 0.15s;
}
.notif-item .notif-del { opacity: 0.4; }
.notif-item:hover .notif-del { opacity: 1; }
.notif-del:hover {
background: rgba(255,94,108,0.15);
color: var(--danger);
transform: translateY(-50%) scale(1.1);
}
.notif-item .notif-body { padding-right: 32px; }
/* ============== Maintenance banner — Glass Floating Card ============== */
.maintenance-banner {
--mb-accent: #ffaa28; /* default warning */
position: fixed;
top: 16px;
left: 50%;
z-index: 50;
width: calc(100% - 32px);
max-width: 480px;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: rgba(20, 26, 32, 0.65);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
box-shadow:
0 12px 30px rgba(0,0,0,0.45),
0 0 0 1px color-mix(in srgb, var(--mb-accent) 22%, transparent),
inset 0 1px 0 rgba(255,255,255,0.06);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.1px;
color: #fff;
transform: translateX(-50%);
animation: mb-slide 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mb-slide {
from { transform: translateX(-50%) translateY(-130%); opacity: 0; }
to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
/* Severity = swap CSS var. Color affect: icon-box bg, title color, glow. */
.maintenance-banner.info { --mb-accent: #38bdf8; }
.maintenance-banner.warning { --mb-accent: #ffaa28; }
.maintenance-banner.critical { --mb-accent: #ff5050; }
/* Icon box — square gradient with bell + badge dot inside */
.maintenance-banner .mb-icon-box {
width: 36px;
height: 36px;
flex-shrink: 0;
position: relative;
border-radius: 10px;
background: linear-gradient(135deg,
var(--mb-accent),
color-mix(in srgb, var(--mb-accent) 60%, #000));
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 4px 14px color-mix(in srgb, var(--mb-accent) 35%, transparent),
inset 0 1px 0 rgba(255,255,255,0.22);
}
/* Bell icon — swing 'ringing' animation 2 kali kemudian rest */
.maintenance-banner .mb-bell {
width: 20px;
height: 20px;
color: #0a1014;
transform-origin: 50% 12%; /* pivot di top tengah bell */
animation: mb-bell-ring 2.6s ease-in-out infinite;
}
@keyframes mb-bell-ring {
0%, 50%, 100% { transform: rotate(0); }
6%, 26% { transform: rotate(-14deg); }
16%, 36% { transform: rotate(14deg); }
46% { transform: rotate(0); }
}
/* Notification badge dot — pulsing red dot di pojok kanan-atas */
.maintenance-banner .mb-badge {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff4458;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--mb-accent) 70%, #000),
0 0 8px rgba(255, 68, 88, 0.7);
animation: mb-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes mb-badge-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.25); opacity: 0.85; }
}
.maintenance-banner .mb-body {
flex: 1;
min-width: 0;
}
.maintenance-banner .mb-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--mb-accent);
margin-bottom: 3px;
}
.maintenance-banner .mb-text {
color: rgba(255,255,255,0.88);
line-height: 1.5;
font-size: 13px;
font-weight: 400;
letter-spacing: -0.05px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.maintenance-banner .mb-time {
font-size: 11px;
color: rgba(255,255,255,0.55);
margin-top: 5px;
font-feature-settings: 'tnum';
letter-spacing: 0;
white-space: nowrap;
}
.maintenance-banner .mb-time:empty { display: none; }
/* Mobile */
@media (max-width: 480px) {
.maintenance-banner {
top: 12px;
width: calc(100% - 20px);
padding: 11px 12px;
gap: 10px;
}
.maintenance-banner .mb-icon-box { width: 32px; height: 32px; border-radius: 9px; }
.maintenance-banner .mb-bell { width: 18px; height: 18px; }
.maintenance-banner .mb-badge { top: 4px; right: 4px; width: 7px; height: 7px; }
.maintenance-banner .mb-text { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.maintenance-banner .mb-bell,
.maintenance-banner .mb-badge { animation: none !important; }
}
/* Severity variants */
.maintenance-banner.info {
background: linear-gradient(180deg, rgba(56,189,248,0.18), rgba(56,189,248,0.08));
border-bottom-color: rgba(56,189,248,0.32);
color: #38bdf8;
}
.maintenance-banner.warning {
background: linear-gradient(180deg, rgba(255,170,40,0.18), rgba(255,170,40,0.08));
border-bottom-color: rgba(255,170,40,0.35);
color: #ffaa28;
}
.maintenance-banner.critical {
background: linear-gradient(180deg, rgba(255,80,80,0.20), rgba(255,80,80,0.10));
border-bottom-color: rgba(255,80,80,0.40);
color: #ff7575;
}
/* Pulse animation saat transition (off→on) — glow ring expand di luar card */
.maintenance-banner.mb-pulse {
animation: mb-slide 0.5s cubic-bezier(0.16, 1, 0.3, 1), mb-pulse-flash 1.6s ease-out;
}
@keyframes mb-pulse-flash {
0%, 100% {
box-shadow:
0 12px 30px rgba(0,0,0,0.45),
0 0 0 1px color-mix(in srgb, var(--mb-accent) 22%, transparent),
inset 0 1px 0 rgba(255,255,255,0.06);
}
25% {
box-shadow:
0 12px 30px rgba(0,0,0,0.45),
0 0 0 0 var(--mb-accent),
0 0 32px color-mix(in srgb, var(--mb-accent) 50%, transparent),
inset 0 1px 0 rgba(255,255,255,0.10);
}
70% {
box-shadow:
0 12px 30px rgba(0,0,0,0.45),
0 0 0 18px transparent,
0 0 0 color-mix(in srgb, var(--mb-accent) 0%, transparent),
inset 0 1px 0 rgba(255,255,255,0.06);
}
}
/* ============== Maintenance LOCK overlay — Opsi 1 minimalist ============== */
.maintenance-lock {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px;
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
background: rgba(8, 12, 16, 0.92);
animation: ml-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
--ml-accent: #ffaa28;
}
@keyframes ml-fade-in { from { opacity: 0; } to { opacity: 1; } }
body.maintenance-locked { overflow: hidden !important; pointer-events: none; }
body.maintenance-locked .maintenance-lock { pointer-events: auto; }
.ml-content {
max-width: 460px;
width: 100%;
display: flex;
flex-direction: column;
gap: 22px;
animation: ml-slide-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards;
}
@keyframes ml-slide-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.ml-header-cluster {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-bottom: -2px;
}
.ml-icon-wrap {
width: 38px;
height: 38px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: ml-icon-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}
@keyframes ml-icon-enter {
from { opacity: 0; transform: scale(0.6); }
to { opacity: 1; transform: scale(1); }
}
.ml-icon-wrap::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
background: radial-gradient(circle, var(--ml-accent), transparent 65%);
opacity: 0.18;
filter: blur(10px);
animation: ml-icon-glow 3s ease-in-out infinite;
z-index: -1;
}
@keyframes ml-icon-glow {
0%, 100% { opacity: 0.12; transform: scale(0.85); }
50% { opacity: 0.30; transform: scale(1.10); }
}
.ml-gear {
width: 100%;
height: 100%;
color: var(--ml-accent);
filter: drop-shadow(0 0 8px var(--ml-accent));
animation: ml-gear-spin 8s linear infinite;
vector-effect: non-scaling-stroke;
}
@keyframes ml-gear-spin { to { transform: rotate(360deg); } }
.ml-pulse-line {
width: 28px;
height: 1.5px;
background: var(--ml-accent);
border-radius: 1px;
position: relative;
animation: ml-line-fade 0.8s ease-out 0.25s backwards;
}
@keyframes ml-line-fade {
from { width: 0; opacity: 0; }
to { width: 28px; opacity: 1; }
}
.ml-pulse-line::before {
content: '';
position: absolute;
inset: 0;
background: inherit;
border-radius: inherit;
filter: blur(6px);
opacity: 0.7;
animation: ml-line-pulse 2.4s ease-in-out infinite;
}
@keyframes ml-line-pulse {
0%, 100% { opacity: 0.5; transform: scaleX(1); }
50% { opacity: 1; transform: scaleX(2.5); }
}
.ml-title {
font-size: 28px;
font-weight: 600;
letter-spacing: -0.6px;
line-height: 1.2;
color: #fff;
margin: 0;
}
.ml-msg {
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.62);
margin: 0;
max-width: 380px;
white-space: pre-wrap;
letter-spacing: -0.1px;
}
.ml-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04) 60%, transparent);
margin: 2px 0 0;
}
.ml-meta-grid {
display: grid;
grid-template-columns: 80px 1fr;
gap: 14px 24px;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
font-feature-settings: 'tnum';
align-items: center;
}
.ml-meta-label {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.36);
}
.ml-meta-val {
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 9px;
}
.ml-status-dot {
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ml-accent);
flex-shrink: 0;
}
.ml-status-dot::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: var(--ml-accent);
opacity: 0.4;
animation: ml-dot-ring 1.6s ease-out infinite;
}
@keyframes ml-dot-ring {
0% { opacity: 0.5; transform: scale(0.8); }
100% { opacity: 0; transform: scale(2.4); }
}
/* Severity = swap CSS var */
.maintenance-lock.info { --ml-accent: #38bdf8; }
.maintenance-lock.warning { --ml-accent: #ffaa28; }
.maintenance-lock.critical { --ml-accent: #ff5050; }
@media (max-width: 480px) {
.maintenance-lock { padding: 24px 20px; }
.ml-content { gap: 18px; }
.ml-title { font-size: 24px; }
.ml-msg { font-size: 14px; }
.ml-meta-grid { grid-template-columns: 72px 1fr; gap: 12px 18px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.ml-pulse-line::before, .ml-status-dot::after,
.ml-gear, .ml-icon-wrap::before { animation: none !important; }
}
/* ============== Header v2 — hamburger left + center logo + actions right ============== */
/* User minta: logo "Clauss Dex" di tengah, hamburger 3-line di kiri yang
buka drawer akun, bell + pill mode trading di kanan. */
.topbar.topbar-v2 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
position: relative;
min-height: 56px;
}
.topbar-v2 .top-actions-left,
.topbar-v2 .top-actions {
display: flex;
gap: 8px;
position: relative;
z-index: 2;
}
/* Logo absolute centered di viewport — guaranteed center */
.topbar-v2 .logo-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
z-index: 1;
}
.topbar-v2 .logo-wrap > * { pointer-events: auto; }
/* Logo icon — 36×36 match round-ghost button size */
.topbar-v2 .logo-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, #00ffa3 0%, #00d98a 50%, #00b377 100%);
box-shadow:
0 4px 14px rgba(0,255,163,0.22),
inset 0 1px 0 rgba(255,255,255,0.25);
animation: none;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.topbar-v2 .logo-icon::before,
.topbar-v2 .logo-icon::after { display: none; }
.topbar-v2 .logo-icon svg { width: 19px; height: 19px; }
/* Brand text — stacked vertical: "Clauss" atas, "DEX" bawah */
.topbar-v2 .logo-text {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
line-height: 1;
overflow: hidden;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.topbar-v2 .logo-name {
font-size: 17px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.3px;
text-shadow: none;
text-transform: none;
margin: 0;
line-height: 1;
}
.topbar-v2 .logo-sub {
font-size: 10.5px;
font-weight: 600;
color: var(--neon);
letter-spacing: 1.4px;
text-transform: uppercase;
margin: 0;
line-height: 1;
}
/* Round-ghost di header sama 36×36 */
.topbar-v2 #bellBtn { flex-shrink: 0; }
.topbar-v2 .round-ghost { width: 36px; height: 36px; border-radius: 50%; }
.topbar-v2 .round-ghost svg { width: 18px; height: 18px; }
/* Hide existing kebab Mode Trading dan logout (sekarang di drawer) */
.topbar-v2 .market-menu-wrap { display: none; }
.topbar-v2 #logoutBtn[hidden],
.topbar-v2 #logoutBtn { display: none; }
/* ============== NAV DRAWER (slide-in dari kiri) ============== */
.nav-drawer-backdrop {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 9000;
animation: nd-fade-in 0.22s ease;
}
@keyframes nd-fade-in { from { opacity: 0; } to { opacity: 1; } }
.nav-drawer {
position: fixed;
top: 0;
left: 0; bottom: 0;
width: min(82vw, 300px);
background:
radial-gradient(circle at 50% 0%, rgba(0,255,163,0.04), transparent 60%),
#050d09;
border-right: 1px solid rgba(0,255,163,0.08);
box-shadow: 8px 0 32px rgba(0,0,0,0.7);
z-index: 9001;
display: flex;
flex-direction: column;
padding: 0;
animation: nd-slide-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
}
@keyframes nd-slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* Drawer header — close X kanan-atas */
.nd-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 14px 4px;
flex-shrink: 0;
}
.nd-head-title {
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
}
.nd-close {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.04);
border: 0;
border-radius: 50%;
color: var(--muted);
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.nd-close:hover {
background: rgba(255,255,255,0.08);
color: var(--text);
transform: rotate(90deg);
}
/* Hero section — avatar + username + plan, lebih breathing */
.nd-user-section {
padding: 8px 16px 22px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
gap: 12px !important;
flex-direction: column;
display: flex;
position: relative;
}
.nd-user-section::after {
content: '';
position: absolute;
left: 16px; right: 16px; bottom: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(0,255,163,0.18) 30%,
rgba(0,255,163,0.18) 70%,
transparent);
}
.nd-user-section .cfg-section-title { display: none; }
.nd-user-top {
display: flex; align-items: center; gap: 14px;
}
.nd-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background:
radial-gradient(circle at 32% 28%, rgba(255,255,255,0.22), transparent 55%),
linear-gradient(135deg, #00ffa3 0%, #00b377 100%);
box-shadow:
0 3px 10px rgba(0,255,163,0.18),
inset 0 0 0 1px rgba(255,255,255,0.10);
display: flex; align-items: center; justify-content: center;
color: #0a1410;
flex-shrink: 0;
}
.nd-avatar svg { width: 18px; height: 18px; }
.nd-user-id {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 6px;
}
.nd-username {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.3px;
line-height: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nd-plan {
display: inline-flex;
align-items: center;
align-self: flex-start;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.05);
color: var(--muted);
line-height: 1.4;
}
.nd-plan.premium { background: rgba(244,184,96,0.16); color: #f4b860; }
.nd-plan.trial { background: rgba(0,255,163,0.14); color: #6ee7a7; }
.nd-plan.expired { background: rgba(255,138,160,0.16); color: #ff8aa0; }
/* User meta — settings-list flat */
.nd-user-meta {
display: flex; flex-direction: column;
gap: 0;
padding: 12px 14px;
background: rgba(255,255,255,0.025);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.04);
}
.nd-meta-row {
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.nd-meta-row:last-child { border-bottom: 0; }
.nd-meta-row:first-child { padding-top: 0; }
.nd-meta-row:last-child { padding-bottom: 0; }
.nd-meta-label {
font-size: 12px;
color: var(--muted);
flex-shrink: 0;
}
.nd-meta-val {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
text-align: right;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
.nd-meta-val.exp-warn { color: #f4b860; }
.nd-meta-val.exp-bad { color: #ff8aa0; }
.nd-meta-key {
font-family: 'Space Mono', monospace;
font-size: 11.5px;
letter-spacing: 0.4px;
color: var(--text-2);
}
/* Section divider tidak dipakai lagi */
.nd-divider-section { display: none; }
/* Menu items — kompak: padding 8 11, icon-box 28 */
.nav-drawer .cfg-card-btn {
width: auto !important;
margin: 0 16px 5px !important;
padding: 8px 11px !important;
gap: 10px !important;
box-sizing: border-box !important;
border-radius: 10px !important;
}
.nav-drawer .cfg-card-btn .ccb-icon {
width: 28px !important; height: 28px !important;
border-radius: 7px !important;
}
.nav-drawer .cfg-card-btn .ccb-icon svg {
width: 14px !important; height: 14px !important;
}
.nav-drawer .cfg-card-btn .ccb-title {
font-family: 'Space Mono', monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Mode Trading items */
.nav-drawer .nd-mode-item .ccb-text { gap: 2px !important; }
.nav-drawer .nd-mode-item .nd-mode-desc {
font-family: 'Space Mono', monospace;
font-size: 9.5px;
font-weight: 400;
color: var(--muted);
letter-spacing: 0.2px;
line-height: 1.2;
}
.nav-drawer .nd-mode-item.active {
background: rgba(0,255,163,0.06) !important;
border-color: rgba(0,255,163,0.22) !important;
}
.nav-drawer .nd-mode-item.disabled {
opacity: 0.55;
cursor: not-allowed;
}
.nav-drawer .nd-mode-item.disabled:hover {
background: rgba(255,255,255,0.025) !important;
border-color: var(--border) !important;
}
.nd-mode-tag {
flex-shrink: 0;
font-family: 'Space Mono', monospace;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.6px;
padding: 2px 6px;
border-radius: 3px;
text-transform: uppercase;
}
.nd-mode-tag.tag-active { background: rgba(0,255,163,0.16); color: var(--neon); }
.nd-mode-tag.tag-soon { background: rgba(244,184,96,0.14); color: #f4b860; }
/* Section label — Akun / Bantuan / Mode Trading */
.nd-section-label {
padding: 16px 16px 6px;
font-family: 'Space Mono', monospace;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
}
.nd-section-label:first-of-type { padding-top: 18px; }
/* Spacer to push social + logout to bottom */
.nd-spacer { flex: 1 1 auto; min-height: 16px; }
/* Social media row */
.nd-social {
display: flex;
gap: 10px;
padding: 14px 16px 12px;
justify-content: center;
}
.nd-social-btn {
width: 36px; height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
color: var(--muted);
text-decoration: none;
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.18s;
}
.nd-social-btn:hover {
background: rgba(0,255,163,0.08);
border-color: rgba(0,255,163,0.22);
color: var(--neon);
transform: translateY(-1px);
}
.nd-social-btn:active { transform: translateY(0); }
/* Brand colors per platform — icon selalu colored, hover backdrop sesuai */
.nd-social-btn.nd-x { color: #e7e9ea; background: rgba(231,233,234,0.08); border-color: rgba(231,233,234,0.18); }
.nd-social-btn.nd-x:hover { background: rgba(231,233,234,0.18); border-color: rgba(231,233,234,0.45); color: #ffffff; }
.nd-social-btn.nd-tg { color: #29b6f6; background: rgba(41,182,246,0.10); border-color: rgba(41,182,246,0.25); }
.nd-social-btn.nd-tg:hover { background: rgba(41,182,246,0.22); border-color: rgba(41,182,246,0.55); color: #4fc3f7; }
.nd-social-btn.nd-dc { color: #5865f2; background: rgba(88,101,242,0.10); border-color: rgba(88,101,242,0.28); }
.nd-social-btn.nd-dc:hover { background: rgba(88,101,242,0.22); border-color: rgba(88,101,242,0.55); color: #7983f5; }
/* Gradient divider di atas logout */
.nd-logout-divider {
height: 1px;
margin: 0 16px;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.08) 30%,
rgba(255,255,255,0.08) 70%,
transparent);
}
/* Logout — danger action (style berbeda dari menu items) */
.nd-logout-action {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: auto;
margin: 14px 16px 16px;
padding: 11px 16px;
background: transparent;
border: 1px solid rgba(255,138,160,0.30);
border-radius: 10px;
color: #ff8aa0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1px;
cursor: pointer;
box-sizing: border-box;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.nd-logout-action:hover {
background: rgba(255,138,160,0.08);
border-color: rgba(255,138,160,0.50);
color: #ffa3b5;
}
.nd-logout-action:active { transform: scale(0.99); }
.nd-logout-action .nd-logout-ico { flex-shrink: 0; color: currentColor; }
.nd-logout-action .nd-logout-label { line-height: 1; }
/* Override: logout button di dalam user-section (top, bukan footer) */
.nd-user-section .nd-logout-action {
margin: 12px 0 0 !important;
width: 100%;
padding: 10px 14px;
font-size: 12.5px;
font-weight: 600;
}
/* Social row di footer drawer — separator border-top supaya jelas */
.nav-drawer > .nd-social {
padding: 12px 16px 16px;
border-top: 1px solid rgba(255,255,255,0.05);
margin-top: 4px;
}
/* ============================================================
REDEEM MODAL · DESIGN #8 TOP BAR
Applied per user pilihan #8 dari /redeem-list-preview.html
============================================================ */
.redeem-modal-card {
padding: 0 !important;
overflow: hidden !important;
border-radius: 10px !important;
position: relative;
}
.redeem-modal-card::before {
content: "\25CF AKTIVASI DIPERLUKAN";
display: block;
background: var(--neon, #00ffa3);
color: #001a10;
padding: 7px 12px;
font-family: "Space Mono", monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
width: 100%;
}
.redeem-default,
.redeem-success {
padding: 14px !important;
}
.redeem-status-pill {
display: none !important;
}
.redeem-divider {
margin: 12px 0 8px !important;
}
.redeem-modal-sub {
margin-bottom: 12px !important;
}
.redeem-contact {
margin-bottom: 0 !important;
}
.redeem-modal .login-input {
margin-top: 0 !important;
}
.redeem-modal .login-submit {
margin-top: 8px !important;
}
.redeem-logout-link {
margin-top: 10px !important;
}
/* === DESIGN #8 polish — match preview lebih tepat === */
.redeem-divider { display: none !important; }
.redeem-modal-sub { margin-bottom: 10px !important; font-size: 11.5px !important; }
.redeem-contact { margin-bottom: 8px !important; }
.redeem-modal .login-input { margin-top: 0 !important; margin-bottom: 8px !important; }
.redeem-modal .login-submit { margin-top: 0 !important; }
.redeem-default {
display: flex !important;
flex-direction: column !important;
}
.redeem-default .redeem-modal-sub { order: 1; }
.redeem-default .redeem-contact { order: 2; }
.redeem-default .input-wrap { order: 3; }
.redeem-default .redeem-modal-error { order: 4; }
.redeem-default .login-submit { order: 5; }
.redeem-default .redeem-logout-link { order: 6; }
/* === DESIGN #8 — redeem-row flex container untuk WA + Aktifkan side-by-side === */
.redeem-row {
display: flex !important;
gap: 6px !important;
margin-top: 8px !important;
}
.redeem-row .redeem-contact {
flex: 1 !important;
margin: 0 !important;
}
.redeem-row .login-submit {
flex: 1 !important;
margin: 0 !important;
}
/* Reset order tweak — sekarang HTML order sudah benar */
.redeem-default {
display: block !important;
}
/* ============================================================
Home / Settings tab — Compact hero (Connect → Scan → Trade)
============================================================ */
.home-hero {
margin: 10px 12px 18px;
padding: 16px 4px 4px;
background: transparent;
border: none;
border-radius: 0;
position: relative;
}
.home-hero-tag {
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.8px;
color: #00ffa3;
margin-bottom: 8px;
text-transform: uppercase;
}
.home-hero-title {
font-family: 'Space Mono', monospace;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.3px;
color: #ffffff;
margin: 0 0 8px;
line-height: 1.2;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.home-hero-title .hero-arrow {
color: rgba(0,255,163,0.55);
font-weight: 400;
font-size: 18px;
margin: 0 -2px;
}
.home-hero-sub {
font-family: 'Space Mono', monospace;
font-size: 12px;
line-height: 1.55;
color: rgba(255,255,255,0.50);
margin: 0;
max-width: 560px;
}
/* Group head — title + description */
.cfg-group-head {
margin-bottom: 10px;
}
.cfg-group-head .cfg-group-title {
margin-bottom: 4px !important;
}
.cfg-group-desc {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: rgba(255,255,255,0.50);
line-height: 1.5;
letter-spacing: 0.1px;
padding: 0 4px;
}
/* Description line in cfg-card-btn (between title and status) */
.cfg-card-btn .ccb-desc {
display: block;
font-family: 'Space Mono', monospace;
font-size: 11px;
color: rgba(255,255,255,0.50);
line-height: 1.4;
margin-top: 2px;
margin-bottom: 4px;
letter-spacing: 0.1px;
}
/* =============================================================
FOREX TRADER — additions (modal, filter bar, preset pair grid)
============================================================= */
/* Scanner status pill di topbar kanan */
.scanner-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
font-family: 'Space Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-2);
}
.scanner-pill.is-active {
background: rgba(0,255,163,0.12);
border-color: rgba(0,255,163,0.4);
color: var(--neon);
}
.scanner-pill .sp-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.3);
}
.scanner-pill.is-active .sp-dot {
background: var(--neon);
box-shadow: 0 0 8px var(--neon);
animation: sp-blink 1.6s infinite;
}
@keyframes sp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* Filter bar di Signal Log tab — mirror crypto filter row */
.log-filterbar {
display: flex;
gap: 8px;
padding: 10px 12px;
background: transparent;
border-bottom: none;
}
.lf-select-wrap {
flex: 1; position: relative;
}
.lf-select {
width: 100%;
appearance: none;
-webkit-appearance: none;
padding: 10px 32px 10px 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
font-family: 'Space Mono', monospace;
font-size: 13px;
cursor: pointer;
}
.lf-chevron {
position: absolute;
right: 12px; top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--neon);
}
.lf-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--card);
border: 1px solid var(--border);
color: var(--text);
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lf-btn:hover { background: var(--card-hi); border-color: var(--danger); color: var(--danger); }
/* Forex signal card (pair-card variant) */
.pair-card.forex-sig { padding: 12px; }
.pair-card.forex-sig .fs-head {
display: flex; align-items: flex-start; gap: 10px;
margin-bottom: 8px;
}
.pair-card.forex-sig .fs-ico {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--card-hi);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
border: 1px solid var(--border);
}
.pair-card.forex-sig .fs-ico.BUY { color: var(--neon); }
.pair-card.forex-sig .fs-ico.SELL { color: var(--danger); }
.pair-card.forex-sig .fs-main { flex: 1; min-width: 0; }
.pair-card.forex-sig .fs-sym {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--text);
}
.pair-card.forex-sig .fs-side-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
margin-left: 6px;
}
.pair-card.forex-sig .fs-side-pill.BUY { background: rgba(0,255,163,0.15); color: var(--neon); }
.pair-card.forex-sig .fs-side-pill.SELL { background: rgba(255,94,108,0.15); color: var(--danger); }
.pair-card.forex-sig .fs-strat {
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--text-2);
margin-top: 2px;
}
.pair-card.forex-sig .fs-meta {
text-align: right;
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--text-2);
line-height: 1.4;
}
.pair-card.forex-sig .fs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin: 8px 0;
}
.pair-card.forex-sig .fs-cell {
background: rgba(0,0,0,0.25);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 8px;
}
.pair-card.forex-sig .fs-cell .lbl {
display: block;
font-family: 'Space Mono', monospace;
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pair-card.forex-sig .fs-cell .val {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.pair-card.forex-sig .fs-cell.sl .val { color: var(--danger); }
.pair-card.forex-sig .fs-cell.tp .val { color: var(--neon); }
.pair-card.forex-sig .fs-foot {
display: flex; justify-content: space-between; align-items: center;
gap: 8px;
}
.pair-card.forex-sig .fs-score {
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--text-2);
}
.pair-card.forex-sig .fs-actions { display: flex; gap: 6px; }
/* Small action buttons in cards */
.fa-btn {
padding: 5px 12px;
border-radius: 6px;
font-family: 'Space Grotesk', sans-serif;
font-size: 10px;
font-weight: 700;
cursor: pointer;
border: none;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: filter .15s ease;
}
.fa-btn.exec {
background: linear-gradient(135deg, var(--neon) 0%, var(--neon-2) 100%);
color: #0a1410;
}
.fa-btn.copy {
background: var(--card-hi);
color: var(--text);
border: 1px solid var(--border);
}
.fa-btn:hover { filter: brightness(1.08); }
.fa-btn:active { transform: scale(0.95); }
/* Pairs list grid */
.pairs-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px 12px;
}
.pair-row {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
display: flex; justify-content: space-between; align-items: center;
}
.pair-row .pname {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
color: var(--text);
font-size: 13px;
}
.pair-row .ptier {
font-family: 'Space Mono', monospace;
font-size: 9px;
color: var(--text-2);
margin-top: 2px;
text-transform: uppercase;
}
.pair-row .pprice {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 600;
color: var(--text);
text-align: right;
}
.pair-row .pchg {
font-family: 'Space Mono', monospace;
font-size: 10px;
margin-top: 2px;
text-align: right;
}
.pair-row .pchg.up { color: var(--neon); }
.pair-row .pchg.dn { color: var(--danger); }
/* Empty state */
.empty-state {
padding: 40px 18px;
text-align: center;
}
.empty-state .empty-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
color: var(--text);
margin-bottom: 6px;
}
.empty-state .empty-desc {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--text-2);
line-height: 1.5;
}
/* Howto list */
.howto-list {
padding-left: 18px;
margin: 0;
font-family: 'Space Mono', monospace;
font-size: 11px;
line-height: 1.7;
color: var(--text-2);
}
.howto-list li { margin-bottom: 5px; }
.howto-list b { color: var(--neon); }
/* Modal (forex trader own modal — beda dari main app modal) */
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.modal[hidden] { display: none !important; }
.modal-card {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 14px;
max-width: 460px;
width: 100%;
max-height: 85vh;
display: flex; flex-direction: column;
box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 60px rgba(0,255,163,0.06);
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.modal-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--text);
}
.modal-close {
background: transparent;
border: none;
color: var(--text-2);
font-size: 24px;
cursor: pointer;
width: 30px; height: 30px;
border-radius: 50%;
}
.modal-close:hover { background: var(--card-hi); color: var(--text); }
.modal-body { padding: 14px 16px; overflow-y: auto; }
.modal-actions { display: flex; gap: 8px; margin-top: 12px; }
.setup-note {
background: rgba(0,255,163,0.04);
border: 1px solid var(--border);
border-radius: 8px;
padding: 11px 13px;
margin-bottom: 12px;
font-family: 'Space Mono', monospace;
font-size: 11px;
line-height: 1.65;
color: var(--text-2);
}
.setup-note b { color: var(--neon); }
.setup-note a { color: var(--neon); text-decoration: none; }
.setup-note a:hover { text-decoration: underline; }
.setup-note ol { padding-left: 18px; margin: 6px 0 0; }
.setup-note code {
background: rgba(0,255,163,0.08);
padding: 1px 5px;
border-radius: 3px;
font-size: 10px;
color: var(--neon);
}
.field { display: block; margin-bottom: 10px; }
.field .lbl {
display: block;
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--text-2);
margin-bottom: 4px;
letter-spacing: 0.2px;
}
.field .input {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
background: var(--card);
border: 1px solid var(--border);
color: var(--text);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
}
.field .input:focus {
outline: none;
border-color: var(--neon);
background: rgba(0,255,163,0.03);
}
.field-checkbox {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--text-2);
margin: 12px 0;
cursor: pointer;
}
.field-checkbox input { width: 16px; height: 16px; accent-color: var(--neon); }
.btn {
flex: 1;
padding: 10px 14px;
border-radius: 8px;
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
letter-spacing: 0.3px;
transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.15); }
.btn.primary {
background: var(--grad-neon);
color: #0a1410;
border-color: transparent;
font-weight: 700;
}
.btn.danger {
background: rgba(255,94,108,0.1);
border-color: rgba(255,94,108,0.3);
color: var(--danger);
}
.btn.ghost { background: transparent; }
.result-box {
padding: 10px 12px;
background: rgba(255,200,61,0.05);
border: 1px solid rgba(255,200,61,0.2);
border-radius: 8px;
font-family: 'Space Mono', monospace;
font-size: 11px;
line-height: 1.55;
color: var(--text);
margin-top: 10px;
}
.result-box.ok {
background: rgba(0,255,163,0.05);
border-color: var(--border);
}
.result-box.err {
background: rgba(255,94,108,0.05);
border-color: rgba(255,94,108,0.3);
}
/* Preset modal pair grid */
.pair-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 6px;
}
.pair-chip {
padding: 7px 6px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--card);
color: var(--text-2);
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 600;
cursor: pointer;
text-align: center;
user-select: none;
transition: all .15s ease;
}
.pair-chip.active {
background: rgba(0,255,163,0.12);
border-color: var(--neon);
color: var(--neon);
}
/* Toast */
.toast {
position: fixed;
bottom: 110px;
left: 50%;
transform: translateX(-50%);
padding: 10px 18px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 8px;
font-family: 'Space Mono', monospace;
font-size: 12px;
color: var(--text);
z-index: 2000;
max-width: 90vw;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.toast.success { border-color: var(--neon); color: var(--neon); }
.toast.error { border-color: var(--danger); color: var(--danger); }
/* App container — MIRROR crypto main app exactly:
height 100dvh + overflow hidden so bottom-nav + brand footer sit at
viewport bottom, content scrolls inside .content section. */
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { overflow: hidden; }
.app {
max-width: 480px !important;
margin: 0 auto !important;
height: 100vh !important;
height: 100dvh !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
overflow: hidden !important;
background: var(--grad-bg, var(--bg));
}
@media (min-width: 600px) {
.app {
box-shadow: 0 0 60px rgba(0,255,163,0.12);
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
}
}
.content {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 0 !important;
}
/* Bottom-nav + brand footer stay at the bottom (flex-shrink: 0) */
.bottom-nav, .brand { flex-shrink: 0 !important; }
.preset-source-note {
margin-top: 10px;
padding: 10px 12px;
background: rgba(0,255,163,0.03);
border: 1px dashed var(--border);
border-radius: 8px;
font-family: 'Space Mono', monospace;
font-size: 10.5px;
line-height: 1.55;
color: var(--text-2);
text-align: center;
}
.preset-source-note b { color: var(--neon); }
.mt-section-title {
margin: 16px 0 8px;
padding-top: 12px;
border-top: 1px dashed var(--border);
font-family: 'Space Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--neon);
}
.advanced-section {
margin-top: 14px;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
.advanced-section summary {
cursor: pointer;
padding: 6px 0;
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--text-2);
outline: none;
list-style: none;
}
.advanced-section summary::-webkit-details-marker { display: none; }
.advanced-section summary::before {
content: '▶';
display: inline-block;
margin-right: 6px;
font-size: 9px;
color: var(--neon);
transition: transform 0.15s ease;
}
.advanced-section[open] summary::before { transform: rotate(90deg); }
.advanced-section summary:hover { color: var(--text); }
.hint-text {
display: block;
margin-top: 4px;
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--muted);
line-height: 1.4;
}
datalist {
background: var(--card);
}
/* Override: ensure nav-item labels are ALWAYS visible — main app CSS has
multiple .nav-item svg rules that can conflict. Set at end for priority. */
.bottom-nav {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
padding: 8px 0 10px !important;
background: var(--grad-bottombar) !important;
}
.bottom-nav .nav-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 4px 2px !important;
background: transparent !important;
border: none !important;
color: var(--text-2);
font-family: 'Space Mono', monospace !important;
font-size: 10px !important;
font-weight: 700 !important;
cursor: pointer;
position: relative;
}
.bottom-nav .nav-item svg {
width: 22px !important;
height: 22px !important;
}
.bottom-nav .nav-item span {
display: block !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
font-family: 'Space Mono', monospace !important;
font-size: 10px !important;
line-height: 1.1 !important;
letter-spacing: 0.2px;
}
.bottom-nav .nav-item.active {
color: var(--neon) !important;
text-shadow: 0 0 6px var(--neon-glow);
}
.bottom-nav .nav-item.active span { color: var(--neon) !important; }
.brand {
text-align: center;
font-size: 10px;
color: var(--text-2);
font-family: 'Space Mono', monospace;
letter-spacing: 0.4px;
padding: 8px 0 10px;
background: linear-gradient(180deg, transparent, rgba(0,255,163,0.04));
}
/* Pip metric row in signal card */
.pair-card.forex-sig .fs-pip-row {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 6px 8px;
margin-bottom: 8px;
background: rgba(0,255,163,0.04);
border: 1px solid var(--border);
border-radius: 6px;
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--text-2);
}
.pair-card.forex-sig .fs-pip-row b {
color: var(--text);
font-weight: 700;
}
.pair-card.forex-sig .fs-pip-row .up { color: var(--neon); }
/* ============================================================
BUTTON POLISH — global animations & hover effects
Affects all buttons across forex-trader app:
.btn (primary/ghost/danger), .cfg-card-btn, .lf-btn, .modal-close,
.fa-btn, .wiz-opt, .tg-bot-btn, .nav-item
============================================================ */
/* ===== Base .btn — lift + glow on hover, scale on click ===== */
.btn {
position: relative;
overflow: hidden;
transition: transform 0.15s, box-shadow 0.2s, background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover:not(:disabled) {
transform: translateY(-1px);
}
.btn:active:not(:disabled) {
transform: translateY(0) scale(0.97);
transition-duration: 0.08s;
}
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn.primary:hover:not(:disabled) {
box-shadow: 0 4px 16px rgba(0,255,163,0.25), 0 0 0 1px rgba(0,255,163,0.35);
}
.btn.ghost:hover:not(:disabled) {
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.btn.danger:hover:not(:disabled) {
box-shadow: 0 4px 14px rgba(239,68,68,0.3), 0 0 0 1px rgba(239,68,68,0.4);
}
/* ===== Primary button — shimmer sweep on hover ===== */
@keyframes btn-shimmer {
0% { transform: translateX(-120%) skewX(-15deg); opacity: 0; }
30% { opacity: 1; }
100% { transform: translateX(220%) skewX(-15deg); opacity: 0; }
}
.btn.primary::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
transform: translateX(-120%) skewX(-15deg);
pointer-events: none;
}
.btn.primary:hover::before {
animation: btn-shimmer 0.8s ease-out;
}
/* ===== Settings card buttons — chevron slide on hover ===== */
.cfg-card-btn {
transition: transform 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.2s !important;
}
.cfg-card-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,255,163,0.18);
}
.cfg-card-btn:active { transform: translateY(0) scale(0.99); }
.cfg-card-btn .ccb-chevron {
transition: transform 0.2s, color 0.15s;
}
.cfg-card-btn:hover .ccb-chevron {
transform: translateX(4px);
color: var(--neon);
}
.cfg-card-btn .ccb-icon {
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cfg-card-btn:hover .ccb-icon {
transform: scale(1.08) rotate(-2deg);
}
/* ===== Filter button (icon-only) — wobble icon on hover ===== */
@keyframes btn-wobble {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-12deg); }
60% { transform: rotate(8deg); }
80% { transform: rotate(-4deg); }
}
.lf-btn svg { transition: transform 0.15s; }
.lf-btn:hover svg { animation: btn-wobble 0.5s ease-in-out; }
/* ===== Modal close X — rotate + color shift ===== */
.modal-close {
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s, background 0.15s;
}
.modal-close:hover {
transform: rotate(90deg);
color: var(--danger, #ef4444);
}
/* ===== Wizard option cards — pulse glow on selected ===== */
@keyframes wiz-opt-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(0,255,163,0.40), 0 0 0 0 rgba(0,255,163,0); }
50% { box-shadow: 0 0 0 1px rgba(0,255,163,0.40), 0 0 18px rgba(0,255,163,0.22); }
}
.exchange-config-modal .wiz-opt {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s, box-shadow 0.2s, background 0.15s !important;
}
.exchange-config-modal .wiz-opt:hover:not(.on) {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(0,0,0,0.4), 0 0 14px rgba(0,255,163,0.10);
}
.exchange-config-modal .wiz-opt.on {
animation: wiz-opt-pulse 2.4s ease-in-out infinite;
}
/* ===== Telegram bot card — slide right on hover ===== */
#metaApiModal .tg-bot-btn {
transition: border-color 0.15s, background 0.15s, transform 0.18s, box-shadow 0.2s;
}
#metaApiModal .tg-bot-btn:hover {
transform: translateX(3px);
box-shadow: 0 4px 12px rgba(59,130,246,0.12);
}
#metaApiModal .tg-bot-btn:hover .tg-bot-arrow {
color: #3b82f6;
transform: translateX(4px);
transition: transform 0.2s, color 0.15s;
}
#metaApiModal .tg-bot-arrow { transition: transform 0.2s, color 0.15s; }
#metaApiModal .tg-bot-icon {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#metaApiModal .tg-bot-btn:hover .tg-bot-icon {
transform: scale(1.08) rotate(-4deg);
}
/* ===== Signal card action buttons (Execute/Copy) ===== */
.fa-btn {
position: relative;
overflow: hidden;
transition: transform 0.12s, box-shadow 0.18s, background 0.15s !important;
}
.fa-btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.fa-btn:active { transform: scale(0.95); }
.fa-btn.exec:hover {
box-shadow: 0 3px 12px rgba(0,255,163,0.25);
}
/* ===== Bottom nav items — bounce on click ===== */
.nav-item {
transition: transform 0.12s, color 0.15s;
}
.nav-item:active { transform: scale(0.92); }
.nav-item:hover { color: var(--neon); }
/* ===== Round ghost button (hamburger, etc) ===== */
.round-ghost {
transition: transform 0.18s, background 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.round-ghost:hover {
transform: scale(1.06);
box-shadow: 0 0 12px rgba(0,255,163,0.18);
}
.round-ghost:active { transform: scale(0.94); }
/* ===== AI Auto-Trade range slider polish ===== */
#aiAutoTradeModal input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 4px;
background: #1a2530;
border-radius: 4px;
outline: none;
cursor: pointer;
}
#aiAutoTradeModal input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px;
background: #00ffa3;
border: 2px solid #0a1410;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 8px rgba(0,255,163,0.5);
transition: transform 0.15s, box-shadow 0.18s;
}
#aiAutoTradeModal input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 14px rgba(0,255,163,0.7);
}
#aiAutoTradeModal input[type="range"]::-webkit-slider-thumb:active {
transform: scale(1.1);
}
/* ===== MAX EXEC button — extra special glow ===== */
@keyframes max-exec-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
50% { box-shadow: 0 0 14px 2px rgba(245,158,11,0.5); }
}
#claudeMaxExecBtn {
animation: max-exec-pulse 2.5s ease-in-out infinite;
position: relative;
overflow: hidden;
}
#claudeMaxExecBtn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 18px rgba(239,68,68,0.4);
}
#claudeMaxExecBtn::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
pointer-events: none;
}
#claudeMaxExecBtn:hover::after {
animation: btn-shimmer 0.7s ease-out;
}
/* ===== Details summary (Advanced/Risk/Briefing) chevron ===== */
#aiAutoTradeModal details.ai-advanced summary {
transition: color 0.15s;
position: relative;
}
#aiAutoTradeModal details.ai-advanced summary::marker {
color: #00ffa3;
}
#aiAutoTradeModal details.ai-advanced summary:hover {
color: #00ffa3;
}
#aiAutoTradeModal details.ai-advanced[open] > *:not(summary) {
animation: details-slide 0.25s ease-out;
}
@keyframes details-slide {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
FINAL POLISH — global consistency, smooth transitions, premium feel
============================================================ */
/* ===== Smooth scrolling everywhere ===== */
html {
scroll-behavior: smooth;
}
.modal-body, .ai-feed-events {
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: rgba(0,255,163,0.25) transparent;
}
.modal-body::-webkit-scrollbar,
.ai-feed-events::-webkit-scrollbar {
width: 6px;
}
.modal-body::-webkit-scrollbar-thumb,
.ai-feed-events::-webkit-scrollbar-thumb {
background: rgba(0,255,163,0.25);
border-radius: 3px;
}
.modal-body::-webkit-scrollbar-thumb:hover,
.ai-feed-events::-webkit-scrollbar-thumb:hover {
background: rgba(0,255,163,0.5);
}
/* ===== Modal entrance — slide up + fade ===== */
@keyframes modal-in {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modal-backdrop-fade {
from { opacity: 0; backdrop-filter: blur(0); }
to { opacity: 1; backdrop-filter: blur(4px); }
}
.modal:not([hidden]) {
animation: modal-backdrop-fade 0.25s ease-out;
}
.modal:not([hidden]) .modal-card {
animation: modal-in 0.32s cubic-bezier(0.2, 0.85, 0.25, 1);
}
/* Backdrop with subtle blur */
.modal:not([hidden]) {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* ===== Settings cards — subtle gradient + premium hover ===== */
.settings-card {
position: relative;
transition: transform 0.2s, box-shadow 0.25s;
}
.settings-card:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,255,163,0.08);
}
.settings-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,255,163,0.4), transparent);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.settings-card:hover::before {
opacity: 1;
}
/* ===== Section title — uniform typography ===== */
.cfg-group-title {
font-family: 'Space Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
font-weight: 700 !important;
color: #8a9aa3 !important;
position: relative;
padding-left: 12px !important;
}
.cfg-group-title::before {
content: '';
position: absolute;
left: 0; top: 50%;
width: 3px;
height: 12px;
background: var(--neon);
border-radius: 2px;
transform: translateY(-50%);
box-shadow: 0 0 6px var(--neon-glow);
}
/* ===== Hero — premium feel ===== */
.home-hero-tag {
font-family: 'Space Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 2.5px !important;
color: var(--neon) !important;
text-transform: uppercase !important;
opacity: 0.85;
animation: tag-fade 0.6s ease-out;
}
.home-hero-title {
animation: hero-fade 0.5s ease-out 0.1s both;
}
.home-hero-sub {
animation: hero-fade 0.5s ease-out 0.2s both;
}
@keyframes tag-fade {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 0.85; transform: translateY(0); }
}
@keyframes hero-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-arrow {
display: inline-block;
color: var(--neon);
animation: arrow-slide 2s ease-in-out infinite;
}
@keyframes arrow-slide {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
/* ===== Inputs — focused glow ===== */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus {
box-shadow: 0 0 0 2px rgba(0,255,163,0.25), 0 0 12px rgba(0,255,163,0.15) !important;
outline: none !important;
}
.input, input[type="text"], input[type="number"], input[type="password"], select {
transition: border-color 0.15s, box-shadow 0.2s !important;
}
/* ===== Checkbox — neon polish ===== */
input[type="checkbox"] {
accent-color: var(--neon) !important;
width: 16px; height: 16px;
cursor: pointer;
transition: transform 0.1s;
}
input[type="checkbox"]:active { transform: scale(0.85); }
/* ===== Status badge animation ===== */
.sh-badge, .ccb-status, .cfg-btn-status {
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.sh-badge.ok, .ccb-status.ok, .cfg-btn-status.ok {
box-shadow: 0 0 8px rgba(0,255,163,0.2);
}
/* ===== Toast — premium slide-in ===== */
.toast {
animation: toast-slide 0.35s cubic-bezier(0.2, 0.85, 0.25, 1);
}
@keyframes toast-slide {
from { opacity: 0; transform: translate(-50%, 20px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ===== Logo polish ===== */
.logo-icon {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo-icon:hover {
transform: scale(1.06) rotate(-3deg);
}
/* ===== AI activity feed — polish ===== */
.ai-feed-event {
transition: background 0.15s;
}
.ai-feed-event:hover {
background: rgba(0,255,163,0.04);
}
/* ===== Disabled state consistent across all interactives ===== */
button:disabled, .btn:disabled, .cfg-card-btn:disabled,
input:disabled, select:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ===== Focus visible (accessibility) ===== */
:focus-visible {
outline: 2px solid rgba(0,255,163,0.5);
outline-offset: 2px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* ===== Smooth tab transitions ===== */
.tab[hidden] { display: none; }
.tab:not([hidden]) {
animation: tab-in 0.42s cubic-bezier(0.2, 0.85, 0.25, 1);
}
/* ===== Card-button icon background uniform ===== */
.ccb-icon {
background: rgba(0,255,163,0.08) !important;
border: 1px solid rgba(0,255,163,0.18) !important;
border-radius: 10px !important;
width: 40px !important;
height: 40px !important;
color: var(--neon) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cfg-card-btn:hover .ccb-icon {
background: rgba(0,255,163,0.15) !important;
border-color: rgba(0,255,163,0.4) !important;
box-shadow: 0 0 12px rgba(0,255,163,0.2);
}
/* ===== Better section gaps — vertical rhythm ===== */
.settings-card {
margin-bottom: 12px;
}
.settings-card:last-child {
margin-bottom: 0;
}
/* ===== Body background subtle grid ===== */
body {
background-image:
radial-gradient(circle at 20% 0%, rgba(0,255,163,0.04) 0%, transparent 50%),
radial-gradient(circle at 80% 100%, rgba(0,212,255,0.03) 0%, transparent 50%);
background-attachment: fixed;
}
/* ============================================================
MODERN BUTTON SYSTEM — fintech-style (Bybit/Coinbase polish)
Multi-layer depth shadows + inner highlight + subtle gradients
============================================================ */
.btn-modern {
--btn-bg-1: #1a2530;
--btn-bg-2: #0d1420;
--btn-text: #e8f5ee;
--btn-border: rgba(255,255,255,0.08);
--btn-highlight: rgba(255,255,255,0.06);
--btn-shadow-color: rgba(0,0,0,0.4);
--btn-glow: transparent;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 20px;
border: 1px solid var(--btn-border);
border-radius: 12px;
background: linear-gradient(180deg, var(--btn-bg-1), var(--btn-bg-2));
color: var(--btn-text);
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2px;
cursor: pointer;
user-select: none;
white-space: nowrap;
overflow: hidden;
transition:
transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.25s,
background 0.2s,
border-color 0.2s,
color 0.15s;
box-shadow:
inset 0 1px 0 var(--btn-highlight),
0 1px 0 rgba(0,0,0,0.2),
0 4px 12px var(--btn-shadow-color);
}
/* Top inner highlight (light from above) */
.btn-modern::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
pointer-events: none;
border-radius: 12px 12px 0 0;
opacity: 0.8;
}
/* Hover: lift + brighten + ambient glow */
.btn-modern:hover:not(:disabled) {
transform: translateY(-2px);
border-color: var(--btn-border-hover, rgba(255,255,255,0.18));
box-shadow:
inset 0 1px 0 var(--btn-highlight),
0 1px 0 rgba(0,0,0,0.2),
0 8px 24px var(--btn-shadow-color),
0 0 0 1px var(--btn-glow),
0 0 24px var(--btn-glow);
}
.btn-modern:active:not(:disabled) {
transform: translateY(0) scale(0.97);
transition-duration: 0.08s;
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.3),
0 1px 2px rgba(0,0,0,0.2);
}
.btn-modern:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.btn-modern .btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-modern:hover .btn-icon {
transform: scale(1.1) rotate(-4deg);
}
/* ===== PRIMARY (subtle green tinted — minimal modern) ===== */
.btn-modern-primary {
--btn-bg-1: rgba(0,255,163,0.12);
--btn-bg-2: rgba(0,255,163,0.06);
--btn-text: #00ffa3;
--btn-border: rgba(0,255,163,0.35);
--btn-border-hover: rgba(0,255,163,0.6);
--btn-highlight: rgba(0,255,163,0.05);
--btn-shadow-color: rgba(0,0,0,0.2);
--btn-glow: rgba(0,255,163,0.18);
font-weight: 600;
}
/* ===== WARNING (subtle amber tinted) ===== */
.btn-modern-warn {
--btn-bg-1: rgba(245,158,11,0.12);
--btn-bg-2: rgba(245,158,11,0.06);
--btn-text: #f59e0b;
--btn-border: rgba(245,158,11,0.35);
--btn-border-hover: rgba(245,158,11,0.6);
--btn-highlight: rgba(255,255,255,0.03);
--btn-shadow-color: rgba(0,0,0,0.2);
--btn-glow: rgba(245,158,11,0.18);
font-weight: 600;
}
/* ===== GHOST (default neutral) ===== */
.btn-modern-ghost {
--btn-bg-1: rgba(255,255,255,0.03);
--btn-bg-2: rgba(255,255,255,0.01);
--btn-text: #c5d4dc;
--btn-border: rgba(255,255,255,0.08);
--btn-border-hover: rgba(255,255,255,0.18);
--btn-highlight: rgba(255,255,255,0.03);
--btn-shadow-color: rgba(0,0,0,0.15);
--btn-glow: rgba(255,255,255,0.05);
}
.btn-modern-ghost:hover:not(:disabled) {
color: #fff;
}
/* ===== DANGER (subtle red) ===== */
.btn-modern-danger {
--btn-bg-1: rgba(239,68,68,0.08);
--btn-bg-2: rgba(239,68,68,0.04);
--btn-text: #ef4444;
--btn-border: rgba(239,68,68,0.3);
--btn-border-hover: rgba(239,68,68,0.55);
--btn-highlight: rgba(255,255,255,0.02);
--btn-shadow-color: rgba(0,0,0,0.2);
--btn-glow: rgba(239,68,68,0.2);
}
/* ============================================================
BUTTON RESET v3 — iOS / Stripe / Cash App aesthetic
Solid colors, no borders, modern pill rounding
============================================================ */
.btn-modern {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 22px;
border: none !important;
border-radius: 14px !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition:
transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
background-color 0.18s,
box-shadow 0.2s,
color 0.15s;
box-shadow: none;
background: transparent;
color: inherit;
}
.btn-modern::before,
.btn-modern::after { display: none !important; }
.btn-modern:hover:not(:disabled) {
transform: translateY(-1px);
}
.btn-modern:active:not(:disabled) {
transform: scale(0.96);
transition-duration: 0.08s;
}
.btn-modern:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ===== PRIMARY (solid neon green, dark text — like Cash App "Send") ===== */
.btn-modern-primary {
background: #00ffa3 !important;
color: #00261a !important;
}
.btn-modern-primary:hover:not(:disabled) {
background: #5dffbf !important;
box-shadow: 0 6px 20px rgba(0,255,163,0.3) !important;
}
/* ===== WARNING (solid amber, dark text) ===== */
.btn-modern-warn {
background: #fbbf24 !important;
color: #2a1f00 !important;
}
.btn-modern-warn:hover:not(:disabled) {
background: #fcd34d !important;
box-shadow: 0 6px 20px rgba(251,191,36,0.3) !important;
}
/* ===== GHOST (dark solid bg, light text — like Apple secondary) ===== */
.btn-modern-ghost {
background: rgba(255,255,255,0.06) !important;
color: #d8e0e6 !important;
}
.btn-modern-ghost:hover:not(:disabled) {
background: rgba(255,255,255,0.1) !important;
color: #fff !important;
}
/* ===== DANGER (red solid, white text) ===== */
.btn-modern-danger {
background: #ef4444 !important;
color: #fff !important;
}
.btn-modern-danger:hover:not(:disabled) {
background: #f87171 !important;
box-shadow: 0 6px 20px rgba(239,68,68,0.3) !important;
}
/* Active state — toggle Enable ↔ Disable */
.btn-modern-primary[data-state="active"] {
background: #ef4444 !important;
color: #fff !important;
}
.btn-modern-primary[data-state="active"]:hover {
background: #f87171 !important;
box-shadow: 0 6px 20px rgba(239,68,68,0.3) !important;
}
/* Hide span.btn-icon if leftover anywhere */
.btn-modern .btn-icon { display: none !important; }
/* ============================================================
BUTTON ANIMATIONS — modern, subtle, premium feel
============================================================ */
/* Shimmer sweep — used on hover for solid-color buttons */
@keyframes btn-shimmer-sweep {
0% { left: -60%; opacity: 0; }
30% { opacity: 1; }
100% { left: 130%; opacity: 0; }
}
/* Soft breathing glow for primary CTA — draws attention without spam */
@keyframes btn-breath {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,163,0.0); }
50% { box-shadow: 0 0 0 4px rgba(0,255,163,0.18); }
}
/* Ripple expansion on click — uses ::after pseudo */
@keyframes btn-ripple {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
/* Enable container for shimmer + ripple pseudo */
.btn-modern {
position: relative !important;
overflow: hidden !important;
}
/* Shimmer pseudo (re-enable specifically for hover) */
.btn-modern::before {
content: '' !important;
display: block !important;
position: absolute;
top: 0;
left: -60%;
width: 60%;
height: 100%;
background: linear-gradient(
105deg,
transparent 25%,
rgba(255,255,255,0.18) 50%,
transparent 75%
);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
.btn-modern:hover:not(:disabled)::before {
animation: btn-shimmer-sweep 0.8s ease-out;
}
/* Ripple pseudo — triggered via JS by adding .is-rippling class */
.btn-modern::after {
content: '' !important;
display: block !important;
position: absolute;
top: 50%;
left: 50%;
width: 200%;
padding-bottom: 200%;
border-radius: 50%;
background: rgba(255,255,255,0.25);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
}
.btn-modern.is-rippling::after {
animation: btn-ripple 0.6s ease-out;
}
/* Primary breathing glow — gentle attention pull */
.btn-modern-primary:not([data-state="active"]) {
animation: btn-breath 3s ease-in-out infinite;
}
/* Lift hover effect stronger for solid color buttons */
.btn-modern-primary:hover:not(:disabled),
.btn-modern-warn:hover:not(:disabled),
.btn-modern-danger:hover:not(:disabled) {
transform: translateY(-2px) scale(1.02);
}
/* Press feel — soft inner shadow on click */
.btn-modern:active:not(:disabled) {
transform: scale(0.95) translateY(0);
filter: brightness(0.92);
}
/* ===== Layout: vertical breathing rhythm ===== */
.ai-quick-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin-top: 14px !important;
}
.ai-quick-row[style*="1fr 1fr 1fr"] {
grid-template-columns: 1fr 1fr 1fr !important;
}
/* ============================================================
HERO BUTTON (Enable Auto-Trade) — premium animated CTA
============================================================ */
.btn-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 56px;
margin-top: 14px;
padding: 0 24px;
border: none;
border-radius: 16px;
background: #0a1410;
color: #002418;
cursor: pointer;
overflow: hidden;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
isolation: isolate;
transition:
transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.25s;
box-shadow:
0 8px 24px rgba(0,255,163,0.25),
0 2px 6px rgba(0,255,163,0.18),
inset 0 1px 0 rgba(255,255,255,0.2);
}
/* Animated flowing gradient background */
.btn-hero-bg {
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(
110deg,
#00ffa3 0%,
#00d4a8 25%,
#00ffd5 50%,
#00d4a8 75%,
#00ffa3 100%
);
background-size: 200% 100%;
animation: hero-flow 3.5s linear infinite;
}
@keyframes hero-flow {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* Pulse glow ring */
.btn-hero-glow {
position: absolute;
inset: 0;
z-index: -1;
border-radius: 16px;
box-shadow: 0 0 0 0 rgba(0,255,163,0.6);
animation: hero-pulse 2.2s ease-out infinite;
pointer-events: none;
}
@keyframes hero-pulse {
0% { box-shadow: 0 0 0 0 rgba(0,255,163,0.5); }
70% { box-shadow: 0 0 0 16px rgba(0,255,163,0); }
100% { box-shadow: 0 0 0 0 rgba(0,255,163,0); }
}
/* Label */
.btn-hero-label {
position: relative;
font-size: 15.5px;
font-weight: 700;
letter-spacing: -0.01em;
color: #002418;
z-index: 1;
}
/* Hover — lift + brighter glow */
.btn-hero:hover:not(:disabled) {
transform: translateY(-2px) scale(1.01);
box-shadow:
0 12px 36px rgba(0,255,163,0.4),
0 4px 10px rgba(0,255,163,0.25),
inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-hero:hover .btn-hero-bg {
animation-duration: 1.8s;
}
/* Active state press */
.btn-hero:active:not(:disabled) {
transform: scale(0.97);
transition-duration: 0.08s;
}
/* DISABLED-STATE (active toggle = red destroy) */
.btn-hero[data-state="active"] {
background: #1a0a0a;
box-shadow:
0 8px 24px rgba(239,68,68,0.25),
0 2px 6px rgba(239,68,68,0.18),
inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-hero[data-state="active"] .btn-hero-bg {
background: linear-gradient(110deg, #ef4444, #dc2626, #ef4444, #dc2626, #ef4444);
background-size: 200% 100%;
}
.btn-hero[data-state="active"] .btn-hero-glow {
animation: hero-pulse-red 2.2s ease-out infinite;
}
@keyframes hero-pulse-red {
0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
70% { box-shadow: 0 0 0 16px rgba(239,68,68,0); }
100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.btn-hero[data-state="active"] .btn-hero-label {
color: #fff;
}
/* ============================================================
CLEAN SECONDARY BUTTONS — minimal, just text on subtle bg
============================================================ */
.btn-clean {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 42px;
padding: 0 16px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
background: rgba(255,255,255,0.02);
color: #c5d4dc;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
user-select: none;
white-space: nowrap;
overflow: hidden;
transition:
background 0.18s,
border-color 0.18s,
color 0.15s,
transform 0.15s;
}
.btn-clean:hover:not(:disabled) {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.16);
color: #fff;
}
.btn-clean:active:not(:disabled) {
transform: scale(0.96);
transition-duration: 0.08s;
}
.btn-clean:disabled { opacity: 0.4; cursor: not-allowed; }
/* Subtle ripple on click */
.btn-clean::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 200%; padding-bottom: 200%;
border-radius: 50%;
background: rgba(255,255,255,0.08);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
}
.btn-clean.is-rippling::after {
animation: btn-ripple 0.5s ease-out;
}
/* Danger variant — red text + red border on hover */
.btn-clean-danger {
color: #f87171;
border-color: rgba(239,68,68,0.2);
background: rgba(239,68,68,0.04);
}
.btn-clean-danger:hover:not(:disabled) {
background: rgba(239,68,68,0.1);
border-color: rgba(239,68,68,0.5);
color: #fff;
}
/* ============================================================
WIZARD NAV — primary action top, secondary actions row below
============================================================ */
#metaApiModal .wiz-nav-primary {
display: flex;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
#metaApiModal .wiz-nav-primary .btn-modern {
width: 100%;
height: 48px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
}
#metaApiModal .wiz-nav-secondary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
#metaApiModal .wiz-nav-secondary .btn-clean {
height: 40px;
font-size: 13px;
padding: 0 12px;
}
/* When Disconnect is hidden, Test spans the full row */
#metaApiModal .wiz-nav-secondary:has(#mtDisconnectBtn[hidden]) {
grid-template-columns: 1fr;
}
/* ===== Wizard back-icon — small chip top-left of each pane ===== */
#metaApiModal .wiz-back-icon {
width: 28px; height: 28px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
color: rgba(255,255,255,0.55);
display: inline-grid;
place-items: center;
cursor: pointer;
margin: 0 0 12px 0;
padding: 0;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
#metaApiModal .wiz-back-icon:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.18);
color: #ffffff;
}
#metaApiModal .wiz-back-icon:active {
transform: scale(0.92);
}
#metaApiModal .wiz-back-icon svg {
width: 12px; height: 12px;
}
#metaApiModal .wiz-back-icon[hidden] { display: none; }
/* ============================================================
MINIMALIST OVERHAUL — Linear/Vercel/Notion aesthetic
Strip decoration. Sans-serif. Subtle borders. Lots of space.
============================================================ */
/* ===== Force sans-serif everywhere (no more Space Mono terminal feel) ===== */
body, button, input, select, textarea, .input,
.cfg-group-title, .home-hero-tag, .home-hero-title, .home-hero-sub,
.sh-badge, .ccb-title, .ccb-desc, .ccb-status, .cfg-btn-status,
.modal-title, .ai-section-title, .ai-feed-head, .ai-feed-stat .lbl,
.ai-feed-stat .val, .ai-feed-event .t, .ai-feed-event .msg,
.tg-bot-title, .tg-bot-sub, .wiz-h, .wiz-lead, .wiz-label,
.wiz-opt .nm, .wiz-opt .ds, .wiz-summary-row,
.fs-cell .lbl, .fs-cell .val, .fs-pip-row, .fs-score, .fs-strat, .fs-sym,
.lbl, .hint-text, .lf-select {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}
/* ===== Strip decorations from section titles ===== */
.cfg-group-title {
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: #d8e0e6 !important;
padding-left: 0 !important;
}
.cfg-group-title::before {
display: none !important;
}
/* ===== Cards — clean, minimal ===== */
.settings-card {
background: rgba(255,255,255,0.015) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 12px !important;
padding: 14px !important;
box-shadow: none !important;
transition: border-color 0.18s, background 0.18s !important;
}
.settings-card:hover {
transform: none !important;
border-color: rgba(255,255,255,0.1) !important;
background: rgba(255,255,255,0.025) !important;
box-shadow: none !important;
}
.settings-card::before {
display: none !important;
}
/* ===== Card-button — cleaner layout ===== */
.cfg-card-btn {
background: transparent !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 10px !important;
padding: 11px 13px !important;
margin-bottom: 8px !important;
box-shadow: none !important;
gap: 11px !important;
transition: border-color 0.15s, background 0.15s !important;
}
.cfg-card-btn:hover {
background: rgba(255,255,255,0.02) !important;
border-color: rgba(255,255,255,0.12) !important;
transform: none !important;
box-shadow: none !important;
}
.cfg-card-btn:hover .ccb-icon {
transform: none !important;
box-shadow: none !important;
}
/* ===== Icon container — compact, flat, subtle ===== */
.ccb-icon {
background: rgba(0,255,163,0.05) !important;
border: 1px solid rgba(0,255,163,0.10) !important;
border-radius: 7px !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
box-shadow: none !important;
display: inline-grid !important;
place-items: center !important;
}
.ccb-icon svg {
width: 13px !important;
height: 13px !important;
}
/* ===== Title + desc inside card-button ===== */
.ccb-title {
font-size: 13.5px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
color: #e8eef2 !important;
}
.ccb-desc {
font-size: 11.5px !important;
color: #6b7a85 !important;
font-weight: 400 !important;
}
.ccb-status, .cfg-btn-status {
font-size: 10.5px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
padding: 2px 7px !important;
border-radius: 4px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: #8a9aa3 !important;
text-transform: none !important;
}
.ccb-status.ok, .cfg-btn-status.ok {
background: rgba(0,255,163,0.08) !important;
border-color: rgba(0,255,163,0.25) !important;
color: #00ffa3 !important;
box-shadow: none !important;
}
.ccb-status.err, .cfg-btn-status.err {
background: rgba(239,68,68,0.08) !important;
border-color: rgba(239,68,68,0.25) !important;
color: #ef4444 !important;
}
/* ===== Hero — quiet, premium ===== */
.home-hero {
padding: 16px 0 8px !important;
}
.home-hero-tag {
font-size: 11px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: #6b7a85 !important;
font-weight: 500 !important;
opacity: 0.7 !important;
}
.home-hero-title {
font-size: 22px !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
color: #f0f5f8 !important;
margin: 8px 0 6px !important;
}
.home-hero-sub {
font-size: 12.5px !important;
color: #8a9aa3 !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
.hero-arrow {
color: #6b7a85 !important;
margin: 0 4px !important;
font-weight: 300 !important;
}
/* ===== Modal — cleaner ===== */
.modal-card {
background: #0e1419 !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 14px !important;
box-shadow: 0 24px 48px rgba(0,0,0,0.4) !important;
}
.modal-head {
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
padding: 14px 18px !important;
}
.modal-title {
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
color: #e8eef2 !important;
text-transform: none !important;
}
.modal-body {
padding: 16px 18px !important;
}
/* ===== Inputs — clean ===== */
.input, input[type="text"], input[type="number"], input[type="password"], select {
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 8px !important;
padding: 10px 12px !important;
font-size: 13.5px !important;
color: #e8eef2 !important;
transition: border-color 0.15s, background 0.15s !important;
}
.input:focus, input[type="text"]:focus, input[type="number"]:focus,
input[type="password"]:focus, select:focus {
border-color: rgba(0,255,163,0.4) !important;
background: rgba(255,255,255,0.04) !important;
box-shadow: 0 0 0 3px rgba(0,255,163,0.08) !important;
}
/* Labels */
.lbl, label .lbl {
font-size: 11.5px !important;
color: #8a9aa3 !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
margin-bottom: 6px !important;
text-transform: none !important;
}
.hint-text {
font-size: 11px !important;
color: #6b7a85 !important;
margin-top: 4px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
/* ===== Bottom nav — minimal ===== */
.bottom-nav {
background: rgba(14,20,25,0.85) !important;
backdrop-filter: blur(20px) !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.nav-item {
color: #6b7a85 !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.nav-item.active {
color: #00ffa3 !important;
}
/* ===== AI feed — cleaner ===== */
.ai-feed {
background: transparent !important;
border: 1px solid rgba(255,255,255,0.06) !important;
}
.ai-feed-head {
background: transparent !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
color: #8a9aa3 !important;
}
.ai-feed-stats {
background: transparent !important;
gap: 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.ai-feed-stat {
background: transparent !important;
border-right: 1px solid rgba(255,255,255,0.04) !important;
}
.ai-feed-stat:last-child { border-right: none !important; }
.ai-feed-stat .lbl {
font-size: 9.5px !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
color: #6b7a85 !important;
}
.ai-feed-stat .val {
font-size: 15px !important;
font-weight: 600 !important;
}
.ai-feed-event {
font-size: 11.5px !important;
border-bottom: 1px solid rgba(255,255,255,0.03) !important;
padding: 8px 14px !important;
}
/* ===== AI quick row gap ===== */
.ai-quick-row {
margin-top: 10px !important;
gap: 6px !important;
}
/* ===== Hide section name AI · BETA inline tag ===== */
.cfg-group-title span[style] {
font-size: 10px !important;
font-weight: 500 !important;
color: #6b7a85 !important;
letter-spacing: 0 !important;
margin-left: 6px !important;
padding: 1px 5px !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 3px !important;
}
/* ===== Body — minimal bg ===== */
body {
background-image: none !important;
background: #0a0f14 !important;
}
/* ===== Topbar — flatter ===== */
.topbar-v2 {
background: rgba(10,15,20,0.85) !important;
backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
/* Adjust quick row gap to be slightly more breathable */
.ai-quick-row {
gap: 8px !important;
margin-top: 12px !important;
}
/* ===== Activity feed pills (replace large emojis) ===== */
.afe-pill {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
font-family: 'Inter', sans-serif;
text-transform: uppercase;
border: 1px solid;
min-width: 42px;
text-align: center;
}
.afe-exec {
background: rgba(0,255,163,0.10);
border-color: rgba(0,255,163,0.30);
color: #00ffa3;
}
.afe-blocked {
background: rgba(239,68,68,0.10);
border-color: rgba(239,68,68,0.30);
color: #f87171;
}
.afe-skip {
background: rgba(140,150,160,0.08);
border-color: rgba(140,150,160,0.20);
color: #9aa5ae;
}
/* Tighter row padding + smaller text */
.ai-feed-event .ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.ai-feed-event .msg {
color: #c5d4dc !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
}
.ai-feed-event.exec .msg { color: #d4e8de !important; }
.ai-feed-event.blocked .msg { color: #d8b4b4 !important; }
.ai-feed-event.skip .msg { color: #9aa5ae !important; }
.ai-feed-event .t {
color: #6b7a85 !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 10.5px !important;
font-weight: 500 !important;
}
/* ===== Activity feed row layout — fix pill/text overlap ===== */
.ai-feed-event {
display: grid !important;
grid-template-columns: 60px 56px 1fr !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 14px !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.ai-feed-event .t {
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
font-weight: 500 !important;
color: #6b7a85 !important;
text-align: left !important;
}
.ai-feed-event .ic {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
}
.ai-feed-event .msg {
font-family: 'Inter', sans-serif !important;
font-size: 11.5px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
word-break: break-word !important;
}
.afe-pill {
display: inline-block !important;
padding: 3px 8px !important;
border-radius: 4px !important;
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
font-family: 'Inter', sans-serif !important;
text-transform: uppercase !important;
border: 1px solid !important;
width: 48px !important;
text-align: center !important;
line-height: 1.3 !important;
box-sizing: border-box !important;
}
/* =============================================================
FOREX UI MODERNIZATION — minimalist, less rigid, no heavy borders
============================================================= */
/* Content area: ensure scrollable on mobile */
.content {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 100px !important; /* extra space above bottom nav */
}
/* Settings cards — soft surface, no hard border */
.settings-card {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 4px 0 !important;
margin: 0 0 14px !important;
}
.settings-card:hover {
background: transparent !important;
border: none !important;
box-shadow: none !important;
transform: none !important;
}
/* Activity feed container — no outer box, no border */
.ai-feed-container, .ai-feed,
.scanner-card, .scanner-card-body {
background: transparent !important;
border: 1px solid rgba(255,255,255,0.04) !important;
border-radius: 14px !important;
box-shadow: none !important;
padding: 14px !important;
}
/* Feed header — softer pill style */
.ai-feed-header, .scanner-header, .live-activity-header {
border-bottom: none !important;
padding-bottom: 8px !important;
margin-bottom: 8px !important;
}
/* Feed rows — no border lines, subtle spacing instead */
.ai-feed-events {
border: none !important;
background: transparent !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.ai-feed-event {
border: none !important;
border-bottom: none !important;
background: rgba(255,255,255,0.015) !important;
border-radius: 10px !important;
padding: 10px 14px !important;
transition: background 0.15s !important;
}
.ai-feed-event:hover {
background: rgba(255,255,255,0.04) !important;
}
.ai-feed-event.exec {
background: rgba(0,255,163,0.04) !important;
}
.ai-feed-event.blocked {
background: rgba(239,68,68,0.04) !important;
}
.ai-feed-event.skip {
background: rgba(255,255,255,0.02) !important;
}
/* Stats row — no border below */
.ai-feed-stats, .scanner-stats {
border-bottom: none !important;
padding-bottom: 12px !important;
margin-bottom: 12px !important;
}
.ai-feed-stat, .scanner-stat {
background: transparent !important;
border: none !important;
padding: 4px 0 !important;
}
/* Config group titles — lighter */
.cfg-group-title {
font-family: 'Inter', sans-serif !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #8a9aa3 !important;
padding: 16px 0 8px !important;
border: none !important;
}
/* Hero section — flatter */
.home-hero {
border: none !important;
background: transparent !important;
padding: 16px 0 8px !important;
}
.home-hero-tag {
font-size: 10px !important;
letter-spacing: 0.08em !important;
color: #6b7a85 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.home-hero-title {
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
margin: 6px 0 8px !important;
}
.home-hero-sub {
font-size: 13px !important;
color: #8a9aa3 !important;
line-height: 1.5 !important;
}
/* All cfg-card-btn (Broker Setting, AI Settings) — clean card style */
.cfg-card-btn:not(.nd-mode-item):not(.fx-drawer-item) {
background: rgba(255,255,255,0.025) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 12px !important;
padding: 14px !important;
box-shadow: none !important;
margin-bottom: 10px !important;
}
.cfg-card-btn:not(.nd-mode-item):not(.fx-drawer-item):hover {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.10) !important;
}
/* Big primary button (Enable/Disable Auto-Trade) — refined */
.btn-hero {
border-radius: 14px !important;
font-size: 15px !important;
font-weight: 600 !important;
padding: 16px !important;
letter-spacing: -0.005em !important;
box-shadow: 0 6px 16px rgba(0,255,163,0.12) !important;
border: none !important;
}
/* Scan / Test buttons under hero */
.ai-quick-row .btn-clean {
background: rgba(255,255,255,0.025) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 10px !important;
padding: 12px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #c5d4dc !important;
box-shadow: none !important;
}
.ai-quick-row .btn-clean:hover {
background: rgba(255,255,255,0.05) !important;
border-color: rgba(255,255,255,0.12) !important;
}
/* Bottom nav — no top divider line */
.bottom-nav, .bottom-tabs {
border-top: 1px solid rgba(255,255,255,0.04) !important;
}
/* Filter bar (Signal Log) — remove heavy borders */
.log-filterbar {
border: none !important;
background: transparent !important;
padding: 10px 14px !important;
margin-bottom: 8px !important;
}
.lf-select-wrap, .lf-select {
border-radius: 10px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
background: rgba(255,255,255,0.025) !important;
color: #c5d4dc !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
}
/* Pair-list rows (Signal Log) — same card style as feed events */
.pair-list .signal-card, .pair-list > div {
border: 1px solid rgba(255,255,255,0.05) !important;
border-radius: 12px !important;
margin-bottom: 8px !important;
background: rgba(255,255,255,0.015) !important;
}
/* Empty state */
.empty-state {
padding: 40px 20px !important;
text-align: center !important;
}
.empty-title {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #8a9aa3 !important;
}
.empty-desc {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: #6b7a85 !important;
line-height: 1.5 !important;
margin-top: 6px !important;
}
/* =============================================================
COMPACT MODERN BUTTONS — Auto-Trade toggle + Scan/Test
============================================================= */
/* Auto-Trade hero button — chip-style with subtle pulse */
.btn-hero, #claudeToggleOuter {
width: auto !important;
max-width: 240px !important;
margin: 18px auto 0 !important;
padding: 12px 24px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
border-radius: 999px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border: 1px solid !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.25s ease,
background 0.2s ease !important;
}
/* Enabled (Disable Auto-Trade) — red minimal */
.btn-hero.is-on, #claudeToggleOuter.is-on,
.btn-hero[data-state="on"] {
background: rgba(239,68,68,0.06) !important;
border-color: rgba(239,68,68,0.28) !important;
color: #f87171 !important;
box-shadow:
0 0 0 1px rgba(239,68,68,0.04),
0 4px 14px rgba(239,68,68,0.10) !important;
animation: pulse-on 2.8s ease-in-out infinite !important;
}
/* Disabled (Enable Auto-Trade) — green minimal */
.btn-hero.is-off, #claudeToggleOuter.is-off,
.btn-hero:not(.is-on):not([data-state="on"]) {
background: linear-gradient(135deg, #00ffa3 0%, #00d488 100%) !important;
border-color: rgba(0,255,163,0.50) !important;
color: #0a1410 !important;
box-shadow:
0 0 0 1px rgba(0,255,163,0.10),
0 6px 18px rgba(0,255,163,0.20) !important;
}
.btn-hero:hover, #claudeToggleOuter:hover {
transform: translateY(-1px) !important;
filter: brightness(1.05) !important;
}
.btn-hero:active, #claudeToggleOuter:active {
transform: translateY(0) scale(0.98) !important;
filter: brightness(0.95) !important;
}
/* Click ripple on hero btn */
.btn-hero::after, #claudeToggleOuter::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255,255,255,0.18) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.btn-hero:active::after, #claudeToggleOuter:active::after {
opacity: 1;
transition: opacity 0s;
}
/* Subtle pulse on enabled red state */
@keyframes pulse-on {
0%, 100% {
box-shadow:
0 0 0 1px rgba(239,68,68,0.04),
0 4px 14px rgba(239,68,68,0.10);
}
50% {
box-shadow:
0 0 0 1px rgba(239,68,68,0.10),
0 6px 22px rgba(239,68,68,0.18);
}
}
/* Scan / Test buttons — compact chip pair */
.ai-quick-row {
display: flex !important;
gap: 8px !important;
margin: 14px auto 0 !important;
max-width: 280px !important;
justify-content: center !important;
}
.ai-quick-row .btn-clean,
#claudeForceScanOuter, #claudeTestOuter {
flex: 1 !important;
background: rgba(255,255,255,0.025) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 999px !important;
padding: 8px 14px !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
color: #c5d4dc !important;
cursor: pointer !important;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, color 0.15s !important;
position: relative !important;
overflow: hidden !important;
}
.ai-quick-row .btn-clean:hover,
#claudeForceScanOuter:hover, #claudeTestOuter:hover {
background: rgba(0,255,163,0.05) !important;
border-color: rgba(0,255,163,0.18) !important;
color: #00ffa3 !important;
}
.ai-quick-row .btn-clean:active,
#claudeForceScanOuter:active, #claudeTestOuter:active {
transform: scale(0.97) !important;
}
/* Generic clean-button ripple on tap (works for any .btn-clean / .btn-modern) */
.btn-clean.is-rippling::before, .btn-modern.is-rippling::before {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 0; height: 0;
background: rgba(0,255,163,0.30);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: ripple 0.55s ease-out;
pointer-events: none;
}
@keyframes ripple {
0% { width: 0; height: 0; opacity: 0.6; }
100% { width: 220%; height: 220%; opacity: 0; }
}
/* Smooth tab/section enter */
.tab[hidden] { display: none !important; }
.tab:not([hidden]) {
animation: fade-in-up 0.32s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Live activity dot — softer breathing */
.ai-feed-header .dot, .live-activity-header .dot,
[class*="ai-feed"] [class*="dot"] {
animation: breathe 2.4s ease-in-out infinite !important;
}
@keyframes breathe {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.18); }
}
/* =============================================================
v2: REFINED AUTO-TRADE TOGGLE — slimmer, monochrome, premium feel
============================================================= */
/* Hero toggle — small, refined, icon+label */
.btn-hero, #claudeToggleOuter {
width: auto !important;
max-width: none !important;
min-width: 168px !important;
margin: 22px auto 0 !important;
padding: 10px 18px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border-radius: 999px !important;
border: 1px solid transparent !important;
font-family: 'Inter', sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
cursor: pointer !important;
position: relative !important;
isolation: isolate !important;
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
background 0.22s ease,
border-color 0.22s ease,
box-shadow 0.25s ease,
color 0.18s ease !important;
}
.btn-hero .btn-hero-icon, #claudeToggleOuter .btn-hero-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
.btn-hero .btn-hero-label, #claudeToggleOuter .btn-hero-label {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
letter-spacing: inherit !important;
line-height: 1 !important;
}
/* Hide legacy bg/glow spans — replaced by clean state classes */
.btn-hero .btn-hero-bg, .btn-hero .btn-hero-glow,
#claudeToggleOuter .btn-hero-bg, #claudeToggleOuter .btn-hero-glow {
display: none !important;
}
/* Off state (Enable button): refined dark with green accent */
.btn-hero.is-off, #claudeToggleOuter.is-off {
background: rgba(0,255,163,0.08) !important;
border-color: rgba(0,255,163,0.25) !important;
color: #00ffa3 !important;
box-shadow: 0 1px 0 rgba(0,255,163,0.10) inset, 0 4px 12px rgba(0,255,163,0.08) !important;
}
.btn-hero.is-off:hover, #claudeToggleOuter.is-off:hover {
background: rgba(0,255,163,0.14) !important;
border-color: rgba(0,255,163,0.40) !important;
color: #00ffa3 !important;
}
/* On state (Disable button): muted red */
.btn-hero.is-on, #claudeToggleOuter.is-on {
background: rgba(239,68,68,0.06) !important;
border-color: rgba(239,68,68,0.22) !important;
color: #f87171 !important;
box-shadow: 0 1px 0 rgba(239,68,68,0.08) inset, 0 4px 12px rgba(239,68,68,0.06) !important;
}
.btn-hero.is-on:hover, #claudeToggleOuter.is-on:hover {
background: rgba(239,68,68,0.10) !important;
border-color: rgba(239,68,68,0.32) !important;
color: #fca5a5 !important;
}
/* Removed earlier pulse-on animation — replaced by static glow with
subtle inner pulse via .btn-hero-pulse halo (only on is-on) */
.btn-hero, #claudeToggleOuter { animation: none !important; }
.btn-hero-pulse {
position: absolute !important;
inset: -2px !important;
border-radius: inherit !important;
pointer-events: none !important;
opacity: 0 !important;
z-index: -1 !important;
}
.btn-hero.is-on .btn-hero-pulse,
#claudeToggleOuter.is-on .btn-hero-pulse {
background: radial-gradient(circle at center, rgba(239,68,68,0.22) 0%, transparent 70%) !important;
opacity: 1 !important;
animation: halo-pulse 2.6s ease-in-out infinite !important;
}
@keyframes halo-pulse {
0%, 100% { transform: scale(0.92); opacity: 0.5; }
50% { transform: scale(1.08); opacity: 1; }
}
/* Press feedback */
.btn-hero:active, #claudeToggleOuter:active {
transform: scale(0.96) !important;
transition-duration: 0.08s !important;
}
/* Scan / Test chips — icon + text, ultra compact */
.ai-quick-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin: 12px auto 0 !important;
max-width: 280px !important;
}
.ai-quick-row .btn-clean,
#claudeForceScanOuter, #claudeTestOuter {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
height: 32px !important;
padding: 0 14px !important;
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 999px !important;
font-family: 'Inter', sans-serif !important;
font-size: 11.5px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
color: #c5d4dc !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.18s ease !important;
}
.ai-quick-row .btn-clean svg,
#claudeForceScanOuter svg, #claudeTestOuter svg {
opacity: 0.7 !important;
transition: opacity 0.18s ease, transform 0.18s ease !important;
}
.ai-quick-row .btn-clean:hover,
#claudeForceScanOuter:hover, #claudeTestOuter:hover {
background: rgba(0,255,163,0.05) !important;
border-color: rgba(0,255,163,0.20) !important;
color: #00ffa3 !important;
}
.ai-quick-row .btn-clean:hover svg,
#claudeForceScanOuter:hover svg, #claudeTestOuter:hover svg {
opacity: 1 !important;
transform: scale(1.05) !important;
}
.ai-quick-row .btn-clean:active,
#claudeForceScanOuter:active, #claudeTestOuter:active {
transform: scale(0.96) !important;
transition-duration: 0.08s !important;
}
/* =============================================================
AI Config modal: sticky Save bar at bottom (always visible)
============================================================= */
#aiAutoTradeModal .modal-card {
display: flex !important;
flex-direction: column !important;
max-height: 90vh !important;
}
#aiAutoTradeModal .modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
padding-bottom: 80px !important; /* room for sticky footer */
-webkit-overflow-scrolling: touch !important;
}
/* Float #claudeSaveBtn to bottom as sticky footer */
#aiAutoTradeModal #claudeSaveBtn {
position: sticky !important;
bottom: 0 !important;
left: 0; right: 0;
margin: 18px -18px -18px !important;
width: calc(100% + 36px) !important;
height: 44px !important;
padding: 0 18px !important;
border-radius: 0 0 16px 16px !important;
background: linear-gradient(135deg, #00ffa3 0%, #00d488 100%) !important;
color: #0a1410 !important;
font-family: 'Inter', sans-serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
letter-spacing: 0.005em !important;
border: none !important;
cursor: pointer !important;
box-shadow: 0 -6px 18px rgba(10,15,20,0.7),
0 -1px 0 rgba(0,255,163,0.20) inset !important;
z-index: 10 !important;
transition: background 0.18s ease, transform 0.12s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
#aiAutoTradeModal #claudeSaveBtn::before {
content: '';
width: 14px; height: 14px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
#aiAutoTradeModal #claudeSaveBtn:hover {
filter: brightness(1.06) !important;
}
#aiAutoTradeModal #claudeSaveBtn:active {
transform: translateY(1px) scale(0.99) !important;
}
#aiAutoTradeModal #claudeSaveBtn:disabled {
background: rgba(255,255,255,0.06) !important;
color: #6b7a85 !important;
cursor: not-allowed !important;
}
/* On smaller modals (no margins to break) */
@media (max-width: 600px) {
#aiAutoTradeModal #claudeSaveBtn {
border-radius: 0 0 14px 14px !important;
}
}
/* =============================================================
AI Config modal: prominent inline Save button (mid-modal, not at bottom)
============================================================= */
#aiAutoTradeModal .ai-save-row {
margin-top: 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 14px;
background: rgba(0,255,163,0.04);
border: 1px solid rgba(0,255,163,0.15);
border-radius: 14px;
}
#aiAutoTradeModal .btn-ai-save {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 44px;
padding: 0 22px;
background: linear-gradient(135deg, #00ffa3 0%, #00d488 100%);
color: #0a1410;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.005em;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,255,163,0.20),
0 1px 0 rgba(255,255,255,0.10) inset;
transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
#aiAutoTradeModal .btn-ai-save:hover {
filter: brightness(1.06);
box-shadow: 0 6px 18px rgba(0,255,163,0.28),
0 1px 0 rgba(255,255,255,0.14) inset;
}
#aiAutoTradeModal .btn-ai-save:active {
transform: scale(0.97);
}
#aiAutoTradeModal .btn-ai-save:disabled {
background: rgba(255,255,255,0.06);
color: #6b7a85;
cursor: not-allowed;
box-shadow: none;
filter: none;
}
#aiAutoTradeModal .btn-ai-save.is-saved {
background: rgba(0,255,163,0.12);
color: #00ffa3;
border: 1px solid rgba(0,255,163,0.30);
}
#aiAutoTradeModal .ai-save-hint {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: #8a9aa3;
letter-spacing: 0.01em;
text-align: center;
}
#aiAutoTradeModal .ai-save-hint.saving { color: #f59e0b; }
#aiAutoTradeModal .ai-save-hint.saved { color: #00ffa3; }
#aiAutoTradeModal .ai-save-hint.error { color: #ef4444; }
/* Hide the old bottom save button (we have a prominent one mid-modal now) */
#aiAutoTradeModal #claudeSaveBtn { display: none !important; }
/* =============================================================
Save button — dirty-state indicator (when there are unsaved changes)
============================================================= */
#aiAutoTradeModal .btn-ai-save.is-dirty {
animation: dirty-pulse 1.8s ease-in-out infinite;
}
@keyframes dirty-pulse {
0%, 100% {
box-shadow: 0 4px 14px rgba(0,255,163,0.20),
0 1px 0 rgba(255,255,255,0.10) inset;
}
50% {
box-shadow: 0 6px 22px rgba(0,255,163,0.45),
0 1px 0 rgba(255,255,255,0.18) inset,
0 0 0 2px rgba(0,255,163,0.20);
}
}
#aiAutoTradeModal .ai-save-hint.dirty {
color: #f59e0b !important;
font-weight: 600 !important;
}
/* Also pulse the container border on dirty state */
#aiAutoTradeModal .ai-save-row:has(.btn-ai-save.is-dirty) {
border-color: rgba(0,255,163,0.30);
background: rgba(0,255,163,0.06);
}
/* =============================================================
Custom dropdown (replaces native