/* ═══════════════════════════════════════════════════
   CryptoPredict Pro — Global Styles v3.0
   ═══════════════════════════════════════════════════ */

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

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  background: #060e1c;
  color: #e8eaf6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* 스크롤바 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a1628; }
::-webkit-scrollbar-thumb { background: #1e2d4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a3d5a; }

/* 입력 */
input, select, textarea {
  outline: none;
  transition: border-color .2s;
}
input:focus, select:focus {
  border-color: #00d68f !important;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* 버튼 */
button { font-family: inherit; }
button:disabled { opacity: 0.5; cursor: not-allowed !important; }

/* 애니메이션 */
@keyframes slideIn    { from{opacity:0;transform:translateX(30px)}   to{opacity:1;transform:translateX(0)} }
@keyframes slideInUp  { from{opacity:0;transform:translateY(20px)}   to{opacity:1;transform:translateY(0)} }
@keyframes fadeOut    { from{opacity:1}                               to{opacity:0} }
@keyframes pulse      { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes spin       { to{transform:rotate(360deg)} }

/* 로딩 스피너 */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid #1e2d4a;
  border-top-color: #00d68f;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display: inline-block;
}

/* 배지 깜박임 */
.pulsing { animation: pulse 2s infinite; }

/* 모달 오버레이 */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}

/* 글래스모피즘 카드 */
.glass-card {
  background: rgba(13,21,38,.9);
  border: 1px solid rgba(30,45,74,.8);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

/* 그라디언트 텍스트 */
.gradient-text {
  background: linear-gradient(135deg, #00d68f, #0099cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 실시간 가격 점멸 */
.price-up   { color: #00d68f !important; animation: priceFlash .3s ease; }
.price-down { color: #ff4d6d !important; animation: priceFlash .3s ease; }
@keyframes priceFlash { 0%,100%{opacity:1} 50%{opacity:.6} }

/* 베팅 결과 카드 */
.bet-win  { border-left: 3px solid #00d68f !important; }
.bet-lose { border-left: 3px solid #ff4d6d !important; }
.bet-pending { border-left: 3px solid #f59e0b !important; }

/* 리스트 hover */
.list-row:hover { background: rgba(26,40,64,.5) !important; }

/* 트랜지션 */
.transition { transition: all .2s ease; }
.transition:hover { opacity: .85; }

/* 모바일 최적화 */
@media (max-width: 768px) {
  .main-grid { grid-template-columns: 1fr !important; }
  /* 모바일: PC헤더 숨기고 모바일헤더 표시 */
  .header-row-pc     { display: none !important; }
  .header-row-mobile { display: block !important; }
  #priceTicker::-webkit-scrollbar        { display: none; }
  #priceTickerMobile::-webkit-scrollbar  { display: none; }
  #floatBtns { display: flex !important; }
}
@media (min-width: 769px) {
  /* PC: PC헤더만 표시 */
  .header-row-pc     { display: flex !important; }
  .header-row-mobile { display: none !important; }
  #floatBtns { display: none !important; }
}

/* 탭 컨텐츠 전환 애니메이션 */
[id$="Panel"] { animation: slideInUp .25s ease; }

/* 채팅 말풍선 */
.chat-msg {
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(26,40,64,.5);
  margin-bottom: 6px;
  max-width: 90%;
  word-break: break-word;
}

/* 지갑 연결 버튼 특수 효과 */
.wallet-connect-btn {
  position: relative;
  overflow: hidden;
}
.wallet-connect-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,214,143,.1), rgba(0,153,204,.1));
  opacity: 0;
  transition: opacity .2s;
}
.wallet-connect-btn:hover::before { opacity: 1; }

/* 수익 그래프 트렌드 라인 */
.trend-up   { background: linear-gradient(135deg, #00d68f20, transparent); }
.trend-down { background: linear-gradient(135deg, #ff4d6d20, transparent); }

/* 라이브 배지 */
.live-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,77,109,.15);
  border: 1px solid rgba(255,77,109,.3);
  color: #ff4d6d;
  font-size: 10px; font-weight: 700;
}
.live-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff4d6d;
  animation: pulse 1.5s infinite;
}

/* 숫자 카운터 */
.counter { font-variant-numeric: tabular-nums; }

/* 알림 토스트 */
.toast-container {
  position: fixed; top: 70px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9999; pointer-events: none;
}

/* 포커스 링 */
button:focus-visible, input:focus-visible {
  outline: 2px solid #00d68f;
  outline-offset: 2px;
}

/* 비활성 상태 */
.disabled { opacity: .4; pointer-events: none; }

/* 섹션 구분선 */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #1e2d4a, transparent);
  margin: 12px 0;
}

/* 아이콘 버튼 */
.icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #1a2840;
  border: 1px solid #1e2d4a;
  border-radius: 8px;
  cursor: pointer;
  transition: .2s;
  color: #8fa3c4;
  font-size: 14px;
}
.icon-btn:hover { background: #253a5c; color: #e8eaf6; }

/* 숫자 하이라이트 */
.highlight-green { color: #00d68f; font-weight: 700; }
.highlight-red   { color: #ff4d6d; font-weight: 700; }
.highlight-gold  { color: #f59e0b; font-weight: 700; }
.highlight-blue  { color: #3b82f6; font-weight: 700; }