* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #fff;
  --bg2: #f5f5f5;
  --text: #000;
  --text2: #666;
  --border: #ddd;
  --topbar: #fff;
  --blue: #1f9ef8;
  --orange: #f7931a;
  --green: #34a853;
  --red: #d33b27;
}

body.dark {
  --bg: #0f1419;
  --bg2: #151d2a;
  --text: #fff;
  --text2: #9aa0a6;
  --border: #3c4450;
  --topbar: #1a2332;
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); transition: 0.3s; }

/* LOGIN */
.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, var(--bg), var(--bg2)); }
.login-card { width: 100%; max-width: 400px; padding: 40px; background: var(--bg2); border-radius: 12px; border: 1px solid var(--border); }
.login-card h1 { font-size: 32px; font-weight: 700; color: var(--orange); text-align: center; margin-bottom: 8px; }
.login-card p { text-align: center; color: var(--text2); margin-bottom: 30px; font-size: 14px; }
.error { display: none; padding: 12px; background: rgba(211, 59, 39, 0.1); border: 1px solid var(--red); border-radius: 8px; color: var(--red); margin-bottom: 20px; }
.error.show { display: block; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card input { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 14px; }
.login-card input:focus { outline: none; border-color: var(--orange); }
.login-card label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.login-card label input { width: auto; }
.login-card button { padding: 12px; background: var(--orange); color: #000; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.login-card button:hover { background: #ffb84d; }
.login-card p { text-align: center; font-size: 13px; margin-top: 20px; }
.login-card a { color: var(--orange); cursor: pointer; text-decoration: none; }

/* DASHBOARD */
#login { display: flex; }
#dashboard { display: none; }
#login.hidden { display: none; }
#dashboard.show { display: flex; }

.app { display: flex; flex-direction: column; width: 100%; height: 100vh; }

/* TOPBAR */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--topbar); border-bottom: 1px solid var(--border); gap: 20px; }
.user-info { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.avatar { width: 40px; height: 40px; background: linear-gradient(135deg, var(--orange), #ffb84d); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #000; }
#email-display { font-size: 14px; font-weight: 500; }

.menu { display: flex; gap: 8px; flex: 1; overflow-x: auto; }
.menu-btn { padding: 8px 16px; background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-size: 14px; color: var(--text2); transition: 0.2s; white-space: nowrap; }
.menu-btn:hover { color: var(--text); }
.menu-btn.active { color: var(--blue); border-bottom-color: var(--blue); }

.topbar-right { display: flex; gap: 8px; flex-shrink: 0; }
.topbar-right button { padding: 8px 12px; background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 14px; transition: 0.2s; }
.topbar-right button:hover { border-color: var(--orange); color: var(--orange); }

/* MAIN CONTENT */
.main { flex: 1; overflow-y: auto; padding: 30px 40px; background: var(--bg); }
.page { display: none; }
.page.active { display: block; }
.page h2 { font-size: 28px; font-weight: 700; margin-bottom: 30px; color: var(--text); }

/* TOOLBAR */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.toolbar > div { display: flex; gap: 8px; }
.ex-btn { padding: 8px 16px; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; font-size: 13px; transition: 0.2s; }
.ex-btn:hover { border-color: var(--orange); color: var(--text); }
.ex-btn.active { background: var(--orange); color: #000; border-color: var(--orange); }
.btn-live { padding: 8px 16px; background: var(--blue); color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-live:hover { background: #1a8ad9; }

/* SEARCH */
.search-box { display: flex; gap: 12px; margin-bottom: 16px; }
#search { flex: 1; padding: 10px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); color: var(--text); font-size: 14px; }
#search:focus { outline: none; border-color: var(--orange); }
.btn-add { padding: 10px 20px; background: var(--blue); color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-add:hover { background: #1a8ad9; }

/* QUICK COINS */
.quick-coins { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.quick-coins button { padding: 6px 12px; border: 1px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; font-size: 12px; transition: 0.2s; }
.quick-coins button:hover { border-color: var(--orange); color: var(--orange); background: rgba(247, 147, 26, 0.1); }

/* COINS GRID */
.coins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.coin-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 16px; min-height: 320px; transition: 0.3s; cursor: pointer; }
.coin-card:hover { border-color: var(--orange); box-shadow: 0 4px 12px rgba(247, 147, 26, 0.15); transform: translateY(-4px); }

.coin-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.coin-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--orange), #ffb84d); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.coin-header h3 { font-size: 16px; font-weight: 600; margin: 0; }
.coin-header p { font-size: 12px; color: var(--text2); margin: 4px 0 0 0; }

.coin-price { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.coin-change { font-size: 14px; margin-bottom: 12px; }
.coin-change.up { color: var(--green); }
.coin-change.down { color: var(--red); }

.coin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; background: var(--bg); border-radius: 6px; margin-bottom: 12px; text-align: center; font-size: 12px; }
.stat-label { color: var(--text2); font-size: 11px; text-transform: uppercase; margin-bottom: 4px; }
.stat-value { font-weight: 600; }

.coin-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.coin-buttons button { padding: 8px; border: 1px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; font-size: 12px; transition: 0.2s; }
.coin-buttons button:hover { background: var(--bg); border-color: var(--orange); color: var(--orange); }

.empty { text-align: center; padding: 60px 20px; color: var(--text2); grid-column: 1 / -1; }


@media (max-width: 768px) {
  .topbar { flex-wrap: wrap; }
  .menu { min-width: 100%; }
  .coins-grid { grid-template-columns: 1fr; }
  .main { padding: 20px; }
}
/* ========== PAGE DISPLAY CONTROL ========== */

.page {
  display: none;
}

.page.active {
  display: block;
}

/* ========== V10 FIX: LOGIN / DASHBOARD VISIBILITY ========== */
/* Në HTML id-të janë login-page dhe dashboard-page, jo login/dashboard.
   Kjo zgjidh ekranin bosh pas login-it dhe hap direkt Sinjalet. */

html, body {
  min-height: 100%;
}

#login-page {
  display: flex;
}

/* v18.19.47: prevent login-page flash while Firebase restores existing session */
html.auth-loading #login-page {
  display: none !important;
}
html.auth-loading #dashboard-page {
  display: none !important;
}


#login-page.hidden {
  display: none !important;
}

#dashboard-page {
  display: none !important;
}

#dashboard-page.show {
  display: flex !important;
}

.app {
  min-height: 100vh;
  height: auto;
}

.main {
  flex: 1;
  min-height: calc(100vh - 73px);
  overflow-y: auto;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

/* =========================================================
   GLOBAL 3D BUTTON CLICK EFFECTS - V12 UI POLISH
   Applies to Bot, Signals, History, Stats and topbar buttons.
   ========================================================= */
button,
.btn-live,
.btn-add,
.ex-btn,
.menu-btn,
.coin-buttons button,
.quick-coins button,
.login-card button,
.topbar-right button,
.btn-analyze-now,
.btn-start-bot,
.btn-stop-bot,
.btn-save-config,
.btn-test-connection,
.btn-refresh-wallet,
.bot-env-btn,
.bot-exec-btn,
button[class*="btn"],
button[onclick] {
  position: relative;
  isolation: isolate;
  transform: translateY(0) scale(1);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease !important;
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.10) !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button:hover,
.btn-live:hover,
.btn-add:hover,
.ex-btn:hover,
.menu-btn:hover,
.coin-buttons button:hover,
.quick-coins button:hover,
.login-card button:hover,
.topbar-right button:hover,
.btn-analyze-now:hover,
.btn-start-bot:hover,
.btn-stop-bot:hover,
.btn-save-config:hover,
.btn-test-connection:hover,
.btn-refresh-wallet:hover,
.bot-env-btn:hover,
.bot-exec-btn:hover,
button[class*="btn"]:hover,
button[onclick]:hover {
  transform: translateY(-2px) scale(1.015) !important;
  filter: brightness(1.08) saturate(1.06) !important;
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.20),
    0 13px 24px rgba(0, 0, 0, 0.16) !important;
}

button:active,
.btn-live:active,
.btn-add:active,
.ex-btn:active,
.menu-btn:active,
.coin-buttons button:active,
.quick-coins button:active,
.login-card button:active,
.topbar-right button:active,
.btn-analyze-now:active,
.btn-start-bot:active,
.btn-stop-bot:active,
.btn-save-config:active,
.btn-test-connection:active,
.btn-refresh-wallet:active,
.bot-env-btn:active,
.bot-exec-btn:active,
button[class*="btn"]:active,
button[onclick]:active {
  transform: translateY(4px) scale(0.985) !important;
  filter: brightness(0.88) saturate(1.15) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.26),
    0 3px 8px rgba(0, 0, 0, 0.18) inset !important;
}

button:focus-visible,
.btn-live:focus-visible,
.btn-add:focus-visible,
.ex-btn:focus-visible,
.menu-btn:focus-visible,
.coin-buttons button:focus-visible,
.quick-coins button:focus-visible,
.login-card button:focus-visible,
.topbar-right button:focus-visible,
.btn-analyze-now:focus-visible,
.btn-start-bot:focus-visible,
.btn-stop-bot:focus-visible,
.btn-save-config:focus-visible,
.btn-test-connection:focus-visible,
.btn-refresh-wallet:focus-visible,
.bot-env-btn:focus-visible,
.bot-exec-btn:focus-visible,
button[class*="btn"]:focus-visible,
button[onclick]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(31, 158, 248, 0.28),
    0 5px 0 rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.10) !important;
}

button:disabled,
button[disabled] {
  opacity: 0.58 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(0.35) !important;
  box-shadow: none !important;
}

/* Active selection buttons: Paper/Main, Manual/Auto, menu, filters */
.bot-env-btn[style*="rgb(31, 158, 248)"],
.bot-exec-btn[style*="rgb(31, 158, 248)"],
.bot-env-btn[style*="#1f9ef8"],
.bot-exec-btn[style*="#1f9ef8"],
.menu-btn.active,
.ex-btn.active,
.filter-btn.active,
.quick-filter.active {
  box-shadow:
    0 4px 0 rgba(0, 89, 145, 0.42),
    0 10px 20px rgba(31, 158, 248, 0.22) !important;
}

/* Small red/green/blue action buttons look more tactile */
.btn-start-bot,
.btn-test-connection,
button[style*="#34a853"] {
  box-shadow:
    0 5px 0 rgba(20, 105, 51, 0.42),
    0 10px 20px rgba(52, 168, 83, 0.18) !important;
}

.btn-stop-bot,
button[style*="#d33b27"] {
  box-shadow:
    0 5px 0 rgba(126, 28, 20, 0.42),
    0 10px 20px rgba(211, 59, 39, 0.18) !important;
}

.btn-analyze-now,
.btn-save-config,
.btn-refresh-wallet,
.btn-live,
.btn-add,
button[style*="#1f9ef8"] {
  box-shadow:
    0 5px 0 rgba(0, 89, 145, 0.42),
    0 10px 20px rgba(31, 158, 248, 0.18) !important;
}

/* Dark mode: softer 3D shadow */
body.dark button,
body.dark .btn-live,
body.dark .btn-add,
body.dark .ex-btn,
body.dark .menu-btn,
body.dark .coin-buttons button,
body.dark .quick-coins button,
body.dark .login-card button,
body.dark .topbar-right button,
body.dark button[class*="btn"],
body.dark button[onclick] {
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.42),
    0 10px 20px rgba(0, 0, 0, 0.26) !important;
}

/* Bot button busy feedback */
.bot-btn-loading {
  filter: brightness(0.96) saturate(0.95) !important;
}