@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root {
  /* Common Design Tokens */
  --bg-main: #0e101b; /* 明るさを上げた深みのあるネイビー */
  --bg-card: rgba(28, 32, 56, 0.75); /* 不透明度と明るさをアップ */
  --bg-card-hover: rgba(38, 43, 76, 0.85);
  --border-light: rgba(255, 255, 255, 0.16); /* 境界線を2倍くっきり化（視認性向上） */
  --border-focus: rgba(255, 255, 255, 0.35); /* フォーカス時もより明瞭に */
  --text-main: #f9fafb; /* より明るい白へ */
  --text-muted: #cbd5e1; /* ミュート文字も明るくして可読性アップ */
  --text-dark: #0f172a;
  
  --font-family: 'Outfit', 'Inter', 'Noto Sans JP', sans-serif;
  --glass-blur: blur(16px);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --transition-speed: 0.3s;

  /* Theme Context Colors */
  --color-business: #10b981; /* Green */
  --color-business-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --color-business-glow: rgba(16, 185, 129, 0.25);

  --color-personal: #3b82f6; /* Blue */
  --color-personal-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --color-personal-glow: rgba(59, 130, 246, 0.25);

  --color-cash: #e11d48; /* Muted Red */
  --color-cash-gradient: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  --color-cash-glow: rgba(225, 29, 72, 0.25);
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(225, 29, 72, 0.06) 0%, transparent 55%);
  background-attachment: fixed;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Glassmorphism Styles */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-light);
  box-shadow: var(--glass-shadow);
}

.glass-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: var(--border-focus);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}

/* Input Fields Glass styling */
.glass-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  border-radius: 12px;
  padding: 10px 16px;
  outline: none;
  font-family: var(--font-family);
  transition: all var(--transition-speed);
}

.glass-input:focus {
  border-color: var(--border-focus);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.glass-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Theme Glow & Colors classes */
.glow-business {
  box-shadow: 0 0 20px var(--color-business-glow);
}
.glow-personal {
  box-shadow: 0 0 20px var(--color-personal-glow);
}
.glow-cash {
  box-shadow: 0 0 20px var(--color-cash-glow);
}

.bg-business-gradient {
  background: var(--color-business-gradient);
}
.bg-personal-gradient {
  background: var(--color-personal-gradient);
}
.bg-cash-gradient {
  background: var(--color-cash-gradient);
}

/* Custom Utilities */
.btn-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  font-weight: 500;
  transition: all var(--transition-speed);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-focus);
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

.animate-pulse-slow {
  animation: pulse-slow 3s infinite;
}

/* Chrome, Safari, Edge, Opera - Hide Spin Buttons/Arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox - Hide Spin Buttons/Arrows */
input[type=number] {
  -moz-appearance: textfield;
}

/* Date Picker Indicators visibility adjustment for dark theme */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Landscape Mobile Font Size adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  html {
    font-size: 13px !important;
  }
  body {
    font-size: 0.8rem !important;
  }
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 0.95rem !important; }
  .text-xs { font-size: 10px !important; }
  .text-sm { font-size: 11px !important; }
  .text-base { font-size: 13px !important; }
}