/* Tube Code - Custom Styles & Glassmorphism Aesthetics (Enhanced Bright & Luminous Edition) */
:root {
  --bg-dark: #101626;
  --panel-bg: rgba(28, 38, 64, 0.82);
  --panel-border: rgba(255, 255, 255, 0.16);
  --accent-red: #f43f5e;
  --accent-cyan: #06b6d4;
  --accent-gold: #f59e0b;
}

body {
  background: 
    radial-gradient(circle at 18% 12%, rgba(99, 102, 241, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 82% 16%, rgba(244, 63, 94, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, #1c243c 0%, #151c30 35%, #101626 70%, #0d1220 100%);
  color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* すりガラス風パネル (Glassmorphism - 明るくクリアな質感) */
.glass-panel {
  background: rgba(27, 38, 63, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* BAR CODE 特別ゴールドパネル (ラグジュアリー＆アテンション強調) */
.glass-panel-gold {
  background: linear-gradient(135deg, rgba(46, 32, 20, 0.95) 0%, rgba(28, 34, 58, 0.96) 100%);
  border: 2px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 16px 40px -6px rgba(245, 158, 11, 0.25), 0 0 25px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(251, 191, 36, 0.3);
}

/* APIキー設定パネル (ウォームアンバー) */
.glass-panel-yellow {
  background: linear-gradient(135deg, rgba(46, 36, 12, 0.85) 0%, rgba(26, 33, 50, 0.85) 100%);
  border: 1.5px solid rgba(234, 179, 8, 0.45);
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.35);
}

/* スクロールバー装飾 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(20, 28, 48, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(129, 140, 248, 0.4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(129, 140, 248, 0.8);
}

/* ボタンのアニメーション */
.btn-press:active {
  transform: scale(0.97);
}

/* ピルボタンのアクティブ状態 */
.tier-pill.active,
.freq-pill.active,
.time-pill.active {
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
  color: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.5);
  font-weight: 800;
}

/* トースト通知 */
#toast {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 🔑 未設定APIキーカードの目立つ発光アテンション */
@keyframes goldPulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.35), inset 0 0 10px rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.6);
  }
  50% {
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.9), inset 0 0 20px rgba(245, 158, 11, 0.45);
    border-color: rgba(251, 191, 36, 1);
  }
}

.glow-unconfigured {
  animation: goldPulseGlow 2.2s infinite ease-in-out;
}