/* =======================================================
   Bitcoin Time Wallet — AI Design Theme  (style_ai.css)
   Dark / Glass-morphism override on top of style.css
   ======================================================= */

/* ── Design tokens ── */
:root {
  --ai-bg0:       #070c1a;
  --ai-bg1:       #0c1529;
  --ai-bg2:       #111e3a;
  --ai-glass:     rgba(10, 18, 46, 0.82);
  --ai-glass2:    rgba(14, 24, 58, 0.90);
  --ai-border:    rgba(56, 115, 255, 0.22);
  --ai-border2:   rgba(56, 115, 255, 0.12);
  --ai-blue:      #3b82f6;
  --ai-cyan:      #06b6d4;
  --ai-purple:    #8b5cf6;
  --ai-amber:     #f59e0b;
  --ai-green:     #10b981;
  --ai-text:      #dde8ff;
  --ai-muted:     #64748b;
  --ai-sub:       #94a3b8;
  --ai-glow:      rgba(59, 130, 246, 0.30);
}

/* ── Base ── */
html {
  background:
    radial-gradient(ellipse 900px 500px at 5% 0%,   rgba(50,  90, 240, 0.13), transparent),
    radial-gradient(ellipse 700px 400px at 92% 8%,  rgba(110, 50, 220, 0.11), transparent),
    radial-gradient(ellipse 800px 600px at 50% 100%,rgba(6,   70, 180, 0.09), transparent),
    linear-gradient(175deg, #070c1a 0%, #0a1224 60%, #080e1e 100%) !important;
}

body {
  color: var(--ai-text);
  background: transparent !important;
}

/* ── Loading Spinner ── */
.loading-spinner {
  background: rgba(7, 12, 30, 0.90) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid var(--ai-border) !important;
  box-shadow: 0 8px 48px rgba(59,130,246,0.20), inset 0 0 0 1px rgba(59,130,246,0.10) !important;
}
.bar {
  background: linear-gradient(180deg, #06b6d4, #3b82f6) !important;
  box-shadow: 0 0 12px rgba(59,130,246,0.55) !important;
}
.loading-text {
  color: #93c5fd !important;
  text-shadow: 0 2px 12px rgba(59,130,246,0.30) !important;
}

/* ── Header ── */
header {
  color: #dde8ff;
}
header .icon-krypton::before {
  filter: drop-shadow(0 0 14px rgba(59,130,246,0.45)) brightness(1.1);
}
header .name {
  font-size: 62px;
  background: linear-gradient(130deg, #93c5fd 0%, #60a5fa 40%, #a78bfa 70%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(59,130,246,0.35));
}
@media (max-width: 768px) { header .name { font-size: 44px; } }
header .tagline {
  color: rgba(147, 197, 253, 0.92) !important;
  text-shadow: 0 0 18px rgba(59,130,246,0.38) !important;
  animation: ai-pulse 2.8s ease-in-out infinite !important;
}
@keyframes ai-pulse { 0%,100%{opacity:1} 50%{opacity:0.62} }

/* ── Live Ticker ── */
#live-ticker {
  background: linear-gradient(90deg, rgba(10,18,48,0.90), rgba(12,22,55,0.85)) !important;
  border-color: var(--ai-border) !important;
  box-shadow: 0 4px 16px rgba(7,12,40,0.50) !important;
}
#live-ticker .ticker-track {
  color: #93c5fd !important;
  text-shadow: 0 0 8px rgba(59,130,246,0.25) !important;
}

/* ── Stats Bar ── */
#stats-bar {
  background: var(--ai-glass) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--ai-border) !important;
  box-shadow: 0 4px 24px rgba(5,12,40,0.45) !important;
}
.stat-item { border-right-color: var(--ai-border2) !important; }
.stat-label { color: var(--ai-muted) !important; opacity: 1 !important; }
.stat-value { color: #93c5fd !important; font-weight: 700 !important; }
#stat-peers-item { background: rgba(30,55,130,0.28) !important; border: 1px solid var(--ai-border2) !important; }
#stat-connection-quality-item { background: rgba(20,40,100,0.25) !important; }
#stat-connection-quality.good  { color: #6ee7b7 !important; }
#stat-connection-quality.fair  { color: #fcd34d !important; }
#stat-connection-quality.poor  { color: #fca5a5 !important; }
#stat-height.consensus-established { color: #6ee7b7 !important; }
#stat-height.consensus-syncing     { color: #fcd34d !important; }
#stat-height.consensus-connecting  { color: #fca5a5 !important; }
.explorer-link {
  background: rgba(37,99,235,0.20) !important;
  border: 1px solid rgba(59,130,246,0.32) !important;
  color: #93c5fd !important;
  border-radius: 8px !important;
}
.explorer-link:hover {
  background: rgba(37,99,235,0.35) !important;
  color: #bfdbfe !important;
}
.dex-link {
  background: rgba(109,50,200,0.22) !important;
  border-color: rgba(139,92,246,0.35) !important;
  color: #c4b5fd !important;
}

/* ── Quick Links ── */
#quick-links-panel {
  gap: 5px !important;
  margin-bottom: 6px !important;
}
.quick-link-card {
  background: linear-gradient(135deg, rgba(20,40,100,0.52), rgba(10,22,65,0.45)) !important;
  border-color: var(--ai-border) !important;
  color: #bfdbfe !important;
  min-height: 42px !important;
  min-width: 130px !important;
  flex: 1 0 130px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(5,12,42,0.35) !important;
}
.quick-link-card:hover {
  background: linear-gradient(135deg, rgba(30,60,140,0.65), rgba(20,45,110,0.58)) !important;
  border-color: rgba(96,165,250,0.55) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(59,130,246,0.22) !important;
}
.quick-link-title {
  color: #bfdbfe !important;
  font-size: 0.92em !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

/* ── Engagement Panel ── */
.engagement-card {
  background: linear-gradient(140deg, rgba(12,22,60,0.82), rgba(8,16,48,0.80)) !important;
  border-color: var(--ai-border) !important;
  color: var(--ai-sub) !important;
}
.engagement-title { color: #93c5fd !important; }
.engagement-row span { color: var(--ai-sub) !important; }
.engagement-row strong { color: #bfdbfe !important; }
.engagement-note { color: var(--ai-muted) !important; }
#share-snapshot-btn {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6) !important;
  color: white !important;
  border: none !important;
}

/* ── Info Panels (cards) ── */
.info { border-radius: 12px !important; overflow: hidden !important; }
.info-title {
  background: rgba(10, 20, 58, 0.94) !important;
  color: #93c5fd !important;
  border-bottom: 1px solid var(--ai-border2) !important;
}
.info-title::before,
.info-title::after { background: var(--ai-blue) !important; }
.info-block {
  background: rgba(9, 16, 46, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--ai-sub) !important;
  border-bottom: 1px solid var(--ai-border2) !important;
}
.info-block strong { color: #93c5fd !important; }
.info hr { border-color: var(--ai-border) !important; }
.input-group {
  background: rgba(9, 16, 46, 0.78) !important;
  color: var(--ai-text) !important;
  border-bottom: 1px solid var(--ai-border2) !important;
}
label strong { color: #93c5fd !important; }

/* Blockchain status colours */
[blockchain-ui] .not-connected      { background: rgba(185, 28, 28, 0.60) !important; }
[blockchain-ui] .initializing       { background: rgba(161, 86, 0,  0.68) !important; }
[blockchain-ui] .syncing            { background: rgba(120, 60, 0,  0.68) !important; }
[blockchain-ui] .consensus-established { background: rgba(4, 120, 87, 0.70) !important; }

/* ── Inputs & Select ── */
input, select {
  background: rgba(8, 14, 42, 0.92) !important;
  border: 1px solid var(--ai-border) !important;
  color: var(--ai-text) !important;
  border-radius: 8px !important;
}
input:focus, select:focus {
  outline: none !important;
  border-color: var(--ai-blue) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.20) !important;
}

/* ── Buttons ── */
button {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6) !important;
  color: #fff !important;
  border-radius: 8px !important;
  border: none !important;
}
button:hover {
  background: linear-gradient(135deg, #1e40af, #2563eb) !important;
}
button:disabled { opacity: 0.38 !important; }
button.greenbutton {
  background: linear-gradient(135deg, #065f46, #10b981) !important;
}
button.greenbutton:hover {
  background: linear-gradient(135deg, #047857, #059669) !important;
}
[miner-ui] .started {
  background: linear-gradient(135deg, #991b1b, #dc2626) !important;
}
@keyframes start-button-ignite {
  0%   { box-shadow: 0 0 0 rgba(59,130,246,0);   background: linear-gradient(135deg,#1d4ed8,#3b82f6); }
  35%  { box-shadow: 0 0 28px rgba(59,130,246,0.7); background: linear-gradient(135deg,#2563eb,#60a5fa); }
  100% { box-shadow: 0 0 0 rgba(59,130,246,0);   background: linear-gradient(135deg,#1d4ed8,#3b82f6); }
}

/* ── List entries ── */
.list-entry button {
  background: rgba(29,78,216,0.45) !important;
  color: #93c5fd !important;
  border: 1px solid var(--ai-border) !important;
}
.list-entry button:hover {
  background: rgba(37,99,235,0.65) !important;
}
.list-entry-export  { background: rgba(4,120,87,0.30)  !important; border-color: rgba(16,185,129,0.45)!important; color:#6ee7b7!important; }
.list-entry-delete  { background: rgba(153,27,27,0.30) !important; border-color: rgba(239,68,68,0.45)!important; color:#fca5a5!important; }
.wallet-entry-container {
  background: rgba(9,16,48,0.72) !important;
  border-color: var(--ai-border) !important;
}
.wallet-entry-container:hover { border-color: rgba(96,165,250,0.5) !important; }
.wallet-name { color: #bfdbfe !important; }
.wallet-balance, #wallets-total-balance { color: var(--ai-cyan) !important; }
.wallet-address-row .address, .wallet-address-short { color: var(--ai-sub) !important; }
.wallet-action-row button, .wallet-icon-btn {
  background: rgba(25,50,110,0.55) !important;
  border-color: var(--ai-border) !important;
  color: #93c5fd !important;
}
.wallet-sort-select {
  background: rgba(15,28,68,0.80) !important;
  border-color: var(--ai-border) !important;
  color: var(--ai-text) !important;
}
.copy-btn {
  background: rgba(6,60,120,0.40) !important;
  border-color: rgba(59,130,246,0.45) !important;
  color: #93c5fd !important;
}
.entry-privateKey {
  background: rgba(5,12,38,0.88) !important;
  border-top-color: var(--ai-border2) !important;
}

/* ── Thread Slider ── */
.thread-slider-track { background: rgba(20,45,110,0.45) !important; }
.thread-slider-fill  { background: linear-gradient(90deg, #1d4ed8, #3b82f6) !important; }
.thread-display-label, #thread-display {
  color: #93c5fd !important;
}
#thread-slider::-webkit-slider-thumb { background: var(--ai-blue) !important; }
#thread-slider::-moz-range-thumb     { background: var(--ai-blue) !important; }

/* ── Recent Activity ── */
#ra-tab-bar, #ra-filter-bar { background: transparent !important; }
.ra-tab {
  background: rgba(10,18,46,0.55) !important;
  color: var(--ai-muted) !important;
  border-color: var(--ai-border) !important;
}
.ra-tab.ra-tab-active {
  background: rgba(37,99,235,0.35) !important;
  color: #93c5fd !important;
  border-color: var(--ai-blue) !important;
}
.ra-filter {
  background: rgba(10,18,46,0.55) !important;
  color: var(--ai-muted) !important;
  border-color: var(--ai-border) !important;
}
.ra-filter.ra-filter-active {
  background: rgba(37,99,235,0.35) !important;
  color: #93c5fd !important;
  border-color: var(--ai-blue) !important;
}
#ra-empty-msg, #ra-list { color: var(--ai-sub) !important; }

/* ── Modals ── */
.modal { background-color: rgba(0,0,0,0.70) !important; }
.modal-content {
  background: rgba(8, 14, 36, 0.97) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid var(--ai-border) !important;
  color: var(--ai-text) !important;
  border-radius: 16px !important;
}
.modal-close { color: var(--ai-muted) !important; }
.modal-close:hover { color: #f0f6ff !important; }
#modal-body h2 { color: #93c5fd !important; }
#modal-body .info-block {
  background: rgba(12,22,56,0.75) !important;
  color: var(--ai-sub) !important;
}
#modal-body strong { color: #93c5fd !important; }

/* Guide Modal */
.guide-modal { background: rgba(4,8,28,0.70) !important; }
.guide-modal-content {
  background: linear-gradient(145deg, rgba(8,16,50,0.97), rgba(12,24,60,0.95)) !important;
  border: 1px solid var(--ai-border) !important;
  color: var(--ai-text) !important;
}
.guide-title { color: #93c5fd !important; }
.guide-step { color: var(--ai-sub) !important; }
.guide-step strong { color: #93c5fd !important; }
.guide-checkbox-row { color: var(--ai-sub) !important; }
#guide-close-btn {
  background: linear-gradient(120deg, #1d4ed8, #3b82f6) !important;
  color: #fff !important;
  border: none !important;
}

/* ── Toast ── */
.toast-item {
  background: linear-gradient(120deg, rgba(16,28,76,0.95), rgba(22,42,100,0.95)) !important;
  border-color: var(--ai-border) !important;
  color: var(--ai-text) !important;
}
.toast-item.success { background: linear-gradient(120deg, rgba(4,80,60,0.93), rgba(6,110,80,0.93)) !important; }
.toast-item.warn    { background: linear-gradient(120deg, rgba(100,60,4,0.93), rgba(150,90,6,0.93)) !important; }

/* ── Mining Promo Banner ── */
.mining-promo-banner {
  background: linear-gradient(120deg, rgba(59,130,246,0.16), rgba(139,92,246,0.12)) !important;
  border-color: rgba(59,130,246,0.32) !important;
}
.mining-promo-copy { color: var(--ai-sub) !important; }
.mining-promo-copy strong { color: #93c5fd !important; }
.mining-promo-btn {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6) !important;
  color: #fff !important;
  border: none !important;
}

/* ── Notice Banner ── */
.notice-banner {
  background: rgba(15,30,80,0.65) !important;
  border-color: var(--ai-border) !important;
  color: var(--ai-sub) !important;
}

/* ── Community Section ── */
#community-section .info-block a {
  background: rgba(10,20,55,0.78) !important;
  border: 2px solid var(--ai-border2) !important;
  color: var(--ai-text) !important;
}
#community-section .info-block a:hover {
  background: rgba(20,40,100,0.75) !important;
  border-color: rgba(96,165,250,0.50) !important;
}
#community-section .info-block span { color: #93c5fd !important; }

/* ── Stat items special glow when active ── */
.stat-item.clickable:hover {
  background: rgba(30,60,140,0.22) !important;
  border-radius: 8px !important;
}

/* ── Mempool ── */
[mempool-ui] [transactions] { color: var(--ai-sub) !important; }

/* ── Design Switch Button (AI → Classic) — hidden ── */
.design-switch-btn {
  display: none !important;
}

/* ── Quick Links: 2×2 grid on mobile so all 4 cards are visible at once ── */
@media (max-width: 768px) {
  #quick-links-panel {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 5px !important;
    margin-bottom: 6px !important;
  }
  .quick-link-card {
    min-width: calc(50% - 5px) !important;
    flex: 1 0 calc(50% - 5px) !important;
    min-height: 36px !important;
    padding: 4px 5px !important;
  }
  .quick-link-title {
    font-size: 0.80em !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 480px) {
  .quick-link-card {
    min-width: calc(50% - 4px) !important;
    flex: 1 0 calc(50% - 4px) !important;
    min-height: 32px !important;
    padding: 4px 4px !important;
  }
  .quick-link-title {
    font-size: 0.76em !important;
  }
}

/* ── Subtle ambient glow around engagement panel ── */
#engagement-panel {
  position: relative;
}
#engagement-panel::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.07), transparent 75%);
  pointer-events: none;
  z-index: -1;
}

/* ── Aurora shimmer on stats bar ── */
#stats-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.06), transparent);
  animation: ai-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
#stats-bar { position: relative; overflow: hidden; }
@keyframes ai-shimmer {
  0%   { left: -60%; }
  100% { left: 140%; }
}