/* SMC Pro Trading Monitor — Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-primary: #0a0e17;
  --bg-secondary: #0f1520;
  --bg-tertiary: #151c2c;
  --bg-card: rgba(15, 21, 32, 0.85);
  --bg-card-hover: rgba(21, 28, 44, 0.95);
  --bg-glass: rgba(15, 21, 32, 0.6);
  --bull: #26a69a; --bull-light: #4dd0c8; --bull-bg: rgba(38,166,154,0.12); --bull-bg-strong: rgba(38,166,154,0.25);
  --bear: #ef5350; --bear-light: #ff7b79; --bear-bg: rgba(239,83,80,0.12); --bear-bg-strong: rgba(239,83,80,0.25);
  --accent-blue: #4fc3f7; --accent-purple: #ba68c8; --accent-orange: #ffb74d; --accent-yellow: #ffd54f;
  --text-primary: #e8eaed; --text-secondary: #9aa0a6; --text-muted: #5f6368;
  --border-primary: rgba(255,255,255,0.08); --border-secondary: rgba(255,255,255,0.04); --border-accent: rgba(79,195,247,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow-bull: 0 0 20px rgba(38,166,154,0.15); --shadow-glow-bear: 0 0 20px rgba(239,83,80,0.15);
  --font-primary: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1); --transition-normal: 250ms cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;overflow-x:hidden;min-height:100vh}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(38,166,154,0.04) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(79,195,247,0.03) 0%,transparent 60%);pointer-events:none;z-index:0}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}

#app{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}

.header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--bg-glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-primary);position:sticky;top:0;z-index:100}
.header__brand{display:flex;align-items:center;gap:12px}
.header__logo{width:36px;height:36px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--bull),#00e5ff);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;box-shadow:0 0 12px rgba(38,166,154,0.3)}
.header__title{font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--text-primary),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header__subtitle{font-size:.7rem;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:500}

.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.control-group{display:flex;align-items:center;gap:4px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:4px}
.control-group__label{font-size:.7rem;color:var(--text-muted);padding:0 8px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.select-styled{appearance:none;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-primary);font-size:.85rem;font-weight:500;padding:6px 28px 6px 10px;cursor:pointer;transition:all var(--transition-fast);background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239aa0a6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.select-styled:hover{border-color:var(--accent-blue)}
.select-styled:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 2px rgba(79,195,247,0.15)}

.tf-btn{background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;font-weight:500;padding:5px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}
.tf-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.tf-btn.active{background:var(--accent-blue);color:#000;font-weight:600;box-shadow:0 0 8px rgba(79,195,247,0.3)}

.status-bar{display:flex;align-items:center;gap:16px;margin-left:auto}
.status-item{display:flex;align-items:center;gap:4px;font-size:.75rem}
.status-dot{width:6px;height:6px;border-radius:50%;animation:pulse-dot 2s ease-in-out infinite}
.status-dot--live{background:var(--bull);box-shadow:0 0 6px var(--bull)}
.status-dot--offline{background:var(--bear);box-shadow:0 0 6px var(--bear);animation:none}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

.main-content{display:grid;grid-template-columns:1fr 320px;grid-template-rows:1fr auto;gap:12px;padding:12px;flex:1;min-height:0}

.chart-panel{grid-row:1;grid-column:1;background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;min-height:500px}
.chart-panel__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-secondary)}
.chart-panel__symbol{display:flex;align-items:center;gap:12px}
.chart-panel__symbol-name{font-size:1.1rem;font-weight:700}
.chart-panel__price{font-family:var(--font-mono);font-size:1.3rem;font-weight:700}
.chart-panel__price.bull{color:var(--bull)} .chart-panel__price.bear{color:var(--bear)}
.chart-panel__change{font-family:var(--font-mono);font-size:.8rem;padding:2px 8px;border-radius:var(--radius-sm);font-weight:600}
.chart-panel__change.bull{background:var(--bull-bg);color:var(--bull-light)}
.chart-panel__change.bear{background:var(--bear-bg);color:var(--bear-light)}
.chart-container{flex:1;position:relative;min-height:0}

.dashboard-panel{grid-row:1;grid-column:2;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.dash-card{background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-normal)}
.dash-card:hover{border-color:var(--border-accent);box-shadow:var(--shadow-md)}
.dash-card__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,0.02);border-bottom:1px solid var(--border-secondary)}
.dash-card__title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}
.dash-card__badge{font-family:var(--font-mono);font-size:.65rem;padding:2px 8px;border-radius:20px;font-weight:600}
.dash-card__body{padding:12px 16px}
.dash-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-secondary)}
.dash-row:last-child{border-bottom:none}
.dash-row__label{font-size:.8rem;color:var(--text-secondary)}
.dash-row__value{font-family:var(--font-mono);font-size:.8rem;font-weight:600}

.text-bull{color:var(--bull-light)} .text-bear{color:var(--bear-light)} .text-neutral{color:var(--text-muted)} .text-accent{color:var(--accent-blue)} .text-warning{color:var(--accent-orange)} .text-purple{color:var(--accent-purple)}
.bg-bull{background:var(--bull-bg);color:var(--bull-light)} .bg-bear{background:var(--bear-bg);color:var(--bear-light)} .bg-neutral{background:rgba(120,144,156,0.15);color:var(--text-secondary)}

.signal-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-family:var(--font-mono);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.signal-badge--buy{background:var(--bull-bg-strong);color:var(--bull-light);box-shadow:var(--shadow-glow-bull);animation:signal-pulse-bull 2s ease-in-out infinite}
.signal-badge--sell{background:var(--bear-bg-strong);color:var(--bear-light);box-shadow:var(--shadow-glow-bear);animation:signal-pulse-bear 2s ease-in-out infinite}
.signal-badge--none{background:rgba(120,144,156,0.1);color:var(--text-muted)}
@keyframes signal-pulse-bull{0%,100%{box-shadow:0 0 8px rgba(38,166,154,0.15)}50%{box-shadow:0 0 20px rgba(38,166,154,0.3)}}
@keyframes signal-pulse-bear{0%,100%{box-shadow:0 0 8px rgba(239,83,80,0.15)}50%{box-shadow:0 0 20px rgba(239,83,80,0.3)}}

.scanner-panel{grid-row:2;grid-column:1/-1;background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden}
.scanner-panel__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,0.02);border-bottom:1px solid var(--border-secondary)}
.scanner-panel__title{font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:8px}
.scanner-table{width:100%;border-collapse:collapse}
.scanner-table th{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:8px 16px;text-align:left;border-bottom:1px solid var(--border-secondary);background:var(--bg-tertiary);cursor:pointer;user-select:none}
.scanner-table td{font-size:.8rem;padding:8px 16px;border-bottom:1px solid var(--border-secondary);transition:background var(--transition-fast)}
.scanner-table tr:hover td{background:rgba(255,255,255,0.02)}
.scanner-table tr{cursor:pointer}
.scanner-table tr.active td{background:rgba(79,195,247,0.05)}
.scanner-table__signal{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-family:var(--font-mono);font-size:.7rem;font-weight:700}
.scanner-table__mini-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.65rem;font-weight:600;font-family:var(--font-mono)}
.scanner-body{max-height:280px;overflow-y:auto}

.loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg-card);z-index:10}
.loading-spinner{width:40px;height:40px;border:3px solid var(--border-primary);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:.8rem;color:var(--text-secondary)}

.toast-container{position:fixed;top:70px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:1000;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:.8rem;animation:toast-in 300ms ease-out;pointer-events:all;max-width:360px}
.toast--buy{border-left:3px solid var(--bull)} .toast--sell{border-left:3px solid var(--bear)} .toast--info{border-left:3px solid var(--accent-blue)}
@keyframes toast-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.toast-exit{animation:toast-out 200ms ease-in forwards}
@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)}}

@media(max-width:1024px){
  .main-content{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .dashboard-panel{grid-row:2;grid-column:1;flex-direction:row;flex-wrap:wrap;overflow-y:visible}
  .dash-card{flex:1;min-width:280px}
  .scanner-panel{grid-row:3;grid-column:1}
}
@media(max-width:640px){
  .header{flex-direction:column;gap:12px}
  .controls{width:100%;justify-content:center}
  .chart-panel{min-height:350px}
  .dashboard-panel{flex-direction:column}
  .dash-card{min-width:auto}
}
.mono{font-family:var(--font-mono)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chart-panel__timer {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-yellow);
  border: 1px solid rgba(255, 255, 255, 0.03);
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- Searchable Dropdown Styles --- */
.search-dropdown-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.search-dropdown-list::-webkit-scrollbar {
  width: 6px;
}
.search-dropdown-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.search-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #d0dce8;
  transition: all 0.15s ease;
}
.search-dropdown-item:hover {
  background: rgba(124, 77, 255, 0.12);
  color: #fff;
}
.search-dropdown-item.active {
  background: rgba(124, 77, 255, 0.25);
  color: #E040FB;
  font-weight: 600;
}
.search-dropdown-header {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  color: #8a9fb4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 4px;
}