/* ═══════════════════════════════════════
   DESIGN REFINEMENTS
   ═══════════════════════════════════════ */

/* Consistent cubic-bezier across interactive elements */
.nav-item,.nav-group-header,.nav-sub-item,.nav-sub-sub-item,
.btn-primary,.card,.metric,.trip-item,.badge,.theme-btn,
.flight-status-btn,.lock-btn,.dest-dropdown-item,
input,select,.stodo-add-btn,.rech-add-btn{
  transition-timing-function:cubic-bezier(0.4,0,0.2,1);
}

/* Body: hauchzartes Glow-Overlay oben (Dark) */
body:not(.light):not(.vacation){
  background:
    radial-gradient(ellipse 140% 45% at 50% -5%,rgba(242,155,69,.10) 0%,transparent 65%),
    var(--bg);
}
/* Light mode: kühler Porcelain-Schimmer */
body.light{
  background:
    radial-gradient(ellipse 140% 45% at 50% -5%,rgba(35,105,216,.07) 0%,transparent 60%),
    var(--bg);
}
body.vacation{
  background:
    radial-gradient(ellipse 140% 45% at 50% -5%,rgba(215,101,61,.09) 0%,transparent 62%),
    var(--bg);
}

/* Cards: Tiefe durch Schichten */
.card{
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.10);
  transition:box-shadow .2s cubic-bezier(0.4,0,0.2,1),border-color .2s;
}
body.light .card{
  box-shadow:0 1px 3px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.05);
}

/* Input focus: Glow-Ring */
input:focus,select:focus{
  box-shadow:0 0 0 3px var(--teal-bg);
  border-color:var(--teal-text);
}
body.light input:focus,body.light select:focus{
  box-shadow:0 0 0 3px rgba(234,193,65,.18);
}

/* Buttons: Lift + Shadow */
.btn-primary{
  box-shadow:0 1px 4px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.12);
  transition:opacity .15s,transform .12s cubic-bezier(0.4,0,0.2,1),box-shadow .15s;
}
.btn-primary:hover:not(:disabled){
  opacity:.92;
  transform:translateY(-1px);
  box-shadow:0 3px 12px rgba(0,0,0,.28),0 1px 4px rgba(0,0,0,.18);
}
.btn-primary:active:not(:disabled){
  transform:translateY(0);
  box-shadow:0 1px 4px rgba(0,0,0,.22);
}

/* Metrics: numerics ausrichten */
.metric-value,.cd-num,.rate-val,.conv-result,.f-time,.f-iata{
  font-variant-numeric:tabular-nums;
}
/* Metrics: leichter Tiefenschatten */
.metric{
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
body.light .metric{
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}

/* Countdown accent: subtile Glut */
.cd-tile.accent{
  box-shadow:0 0 24px var(--teal-bg),0 1px 3px rgba(0,0,0,.15);
}

/* Sidebar-Header: dezenter Trennschatten */
.sb-header{
  box-shadow:0 1px 0 var(--border);
}
/* Logo-Icon: Glow */
.sb-icon{
  box-shadow:0 0 18px var(--teal-bg);
}

/* Dest-Hero: innen heller Rand + Tiefe */
.dest-hero{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.12);
}
body.light .dest-hero{
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* Modal: mehrschichtiger Schatten */
.user-modal{
  box-shadow:
    0 32px 80px rgba(0,0,0,.55),
    0 8px 24px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.04);
}
body.light .user-modal{
  box-shadow:
    0 32px 80px rgba(0,0,0,.15),
    0 8px 24px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,0,0,.06);
}

/* Progress-Bar: Gradient statt Flat */
.stodo-progress-bar{
  background:linear-gradient(90deg,var(--teal) 0%,var(--sun) 100%);
}
.bc-fill{
  background:linear-gradient(90deg,var(--teal) 0%,var(--coral) 100%);
}

/* Flight visual: Schatten */
.flight-visual{
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}

/* Rate-Box */
.rate-box{
  box-shadow:0 1px 3px rgba(0,0,0,.10);
}

/* Dropdown: schärferer Schatten */
.dest-dropdown{
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.2);
}
body.light .dest-dropdown{
  box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.07);
}

/* Nav-Item: links-Border animiert */
.nav-item,.nav-group-header{
  transition:
    color .18s cubic-bezier(0.4,0,0.2,1),
    background .18s cubic-bezier(0.4,0,0.2,1),
    border-color .18s cubic-bezier(0.4,0,0.2,1);
}

/* Reopen-Tab: Schatten */
.stodo-reopen-tab{
  box-shadow:-3px 0 14px rgba(0,0,0,.25);
}

/* Thin custom scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}