/* ==========================================================================
   Neon Pulse Calculator - Responsive Styles (v3.0)
   ========================================================================== */

/* Base Mobile */
.container { width: 100%; padding: var(--space-sm); }
.card { padding: var(--space-md); border-radius: var(--radius-xl); }
.nav-tabs { gap: var(--space-2xs); }
.nav-tab { padding: var(--space-xs) var(--space-sm); }
.nav-tab-icon { font-size: var(--font-size-xl); }
.nav-tab-label { font-size: 0.65rem; }
.nav-tab-sublabel { display: none; }
.calc-display { font-size: var(--font-size-2xl); padding: var(--space-sm) var(--space-md); min-height: 55px; }
.calc-btn { padding: var(--space-xs); font-size: var(--font-size-lg); }
.calculator-grid { gap: var(--space-2xs); }
.btn { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-xs); }
.form-row { flex-direction: column; }
.result-value { font-size: var(--font-size-xl); }

/* 480px+ */
@media (min-width: 480px) {
  .container { padding: var(--space-md); }
  .card { padding: var(--space-lg); }
  .nav-tab { padding: var(--space-sm) var(--space-md); }
  .nav-tab-sublabel { display: block; }
  .calc-display { font-size: var(--font-size-3xl); padding: var(--space-md) var(--space-lg); min-height: 65px; }
  .calc-btn { padding: var(--space-sm); font-size: var(--font-size-xl); }
  .calculator-grid { gap: var(--space-xs); }
  .btn { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); }
  .form-row { flex-direction: row; }
  .result-value { font-size: var(--font-size-2xl); }
}

/* 768px+ */
@media (min-width: 768px) {
  .app { padding: var(--space-xl); }
  .container { max-width: 520px; }
  .card { padding: var(--space-xl); border-radius: var(--radius-2xl); }
  .nav-tab-icon { font-size: var(--font-size-2xl); }
  .nav-tab-label { font-size: var(--font-size-xs); }
  .calc-display { min-height: 75px; }
}

/* 1024px+ */
@media (min-width: 1024px) {
  .container { max-width: 560px; }
  .card { padding: var(--space-xl) var(--space-2xl); }
  @media (hover: hover) {
    .nav-tab:hover { transform: translateY(-1px); }
    .calc-btn:hover { transform: translateY(-2px) scale(1.01); }
  }
}

/* 1440px+ */
@media (min-width: 1440px) {
  .container { max-width: 580px; }
  .calc-display { min-height: 80px; }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .app { padding: var(--space-xs); justify-content: flex-start; }
  .card { padding: var(--space-sm); }
  .section-header { margin-bottom: var(--space-sm); }
  .section-title { font-size: var(--font-size-base); }
  .nav-tabs { margin-bottom: var(--space-sm); }
  .calculator-grid { gap: 2px; }
  .calc-btn { padding: 2px; font-size: var(--font-size-sm); }
  .calc-display { min-height: 40px; font-size: var(--font-size-lg); padding: var(--space-xs) var(--space-sm); }
  .history-panel { max-height: 80px; }
}

/* Touch Devices */
@media (pointer: coarse) {
  .calc-btn { min-height: 44px; }
  .btn { min-height: 40px; }
  .nav-tab { min-height: 52px; }
  .calc-btn:hover { transform: none; }
  .btn:hover { transform: none; }
}

/* High Contrast */
@media (prefers-contrast: high) {
  :root {
    --color-glass-border: rgba(255, 255, 255, 0.25);
    --color-text-secondary: rgba(255, 255, 255, 0.85);
  }
  .card { border-width: 2px; }
  .calc-btn { border-width: 2px; }
  .input, .select { border-width: 2px; }
}

/* Print */
@media print {
  .app { background: white; min-height: auto; }
  .card { background: white; box-shadow: none; border: 1px solid #ccc; }
  .nav-tabs, .btn-primary, .pc-mode-toggle { display: none; }
  .result-value { color: #333; text-shadow: none; }
}