/* ── iOS 26 Liquid Glass (Web approximation) ── */

:root {
  --glass-blur-chrome: 56px;
  --glass-blur-panel: 40px;
  --glass-blur-thin: 28px;
  --glass-saturate: 200%;
  --glass-bg-chrome: rgba(255, 255, 255, 0.28);
  --glass-bg-panel: rgba(255, 255, 255, 0.42);
  --glass-bg-track: rgba(118, 118, 128, 0.08);
  --glass-bg-pill: rgba(255, 255, 255, 0.68);
  --glass-border-bright: rgba(255, 255, 255, 0.72);
  --glass-border-soft: rgba(255, 255, 255, 0.32);
  --glass-shadow-outer: 0 10px 40px rgba(15, 23, 42, 0.08);
  --glass-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  --glass-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 100%);
  --page-gradient: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #FFFFFF 3%,
    #FFF8F8 10%,
    #FFEBEE 20%,
    #E8F5E9 46%,
    #FFF8E7 72%,
    #FFFCF5 84%,
    #FFFEF8 93%,
    #FFFFFF 97%,
    #FFFFFF 100%
  );
}

html {
  color-scheme: light;
  min-height: 100%;
  min-height: var(--app-height, 100dvh);
  min-height: -webkit-fill-available;
  background-color: #FFFFFF;
  background-image: var(--page-gradient);
  background-repeat: no-repeat;
  background-size: 100% var(--app-height, 100dvh);
}

body {
  background: transparent;
}

body > * {
  position: relative;
  z-index: 1;
}

/* Mesh backdrop */
.app-shell {
  background: transparent;
}

.login-page {
  background: transparent;
  position: relative;
}

/* Shared glass surface */
.glass-surface,
.clip-bar,
.period-nav,
.clip-tabs,
.clip-panel,
.card,
.menu-list,
.mini-card-board,
.day-detail-panel,
.calendar-board,
.login-form {
  position: relative;
  -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturate));
}

.glass-surface::after,
.clip-bar::after,
.period-nav::after,
.clip-panel::after,
.card::after,
.menu-list::after,
.mini-card-board::after,
.day-detail-panel::after,
.calendar-board::after,
.login-form::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-specular);
  pointer-events: none;
  z-index: 0;
}

.glass-surface > *,
.clip-bar > *,
.period-nav > *,
.clip-panel > *,
.card > *,
.menu-list > *,
.mini-card-board > *,
.day-detail-panel > *,
.calendar-board > *,
.login-form > * {
  position: relative;
  z-index: 1;
}

/* Chrome tier — nav, date bar, tab track */
.clip-bar,
.period-nav {
  background: var(--glass-bg-chrome);
  border: 1px solid var(--glass-border-bright);
  box-shadow: var(--glass-shadow-outer), var(--glass-shadow-inset);
  -webkit-backdrop-filter: blur(var(--glass-blur-chrome)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-chrome)) saturate(var(--glass-saturate));
}

.clip-tabs,
.stats-tabs {
  background: var(--glass-bg-track);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow-inset), 0 4px 20px rgba(15, 23, 42, 0.06);
  -webkit-backdrop-filter: blur(var(--glass-blur-thin)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-thin)) saturate(var(--glass-saturate));
}

.clip-tab.active,
.stats-tab.active {
  background: var(--glass-bg-pill);
  -webkit-backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 4px 16px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  color: var(--primary);
}

/* Panel tier */
.clip-panel,
.card,
.menu-list,
.mini-card-board,
.day-detail-panel {
  background: var(--glass-bg-panel);
  border: 1px solid var(--glass-border-bright);
  box-shadow: var(--glass-shadow-outer), var(--glass-shadow-inset);
}

.day-summary-v2 {
  background: var(--glass-bg-panel) !important;
  border: 1px solid var(--glass-border-bright) !important;
  box-shadow: var(--glass-shadow-outer), var(--glass-shadow-inset) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturate));
}

.day-summary-v2::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 68%);
  opacity: 0.9;
}

.day-summary-v2.day-summary-clip .summary-head {
  border-bottom-color: rgba(255, 255, 255, 0.45);
}

.day-summary-v2 .breakdown-cell.a-stock {
  background: rgba(254, 226, 226, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.day-summary-v2 .breakdown-cell.us-stock {
  background: rgba(220, 252, 231, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.day-summary-v2 .breakdown-cell.wealth {
  background: rgba(254, 249, 195, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Record rows */
.record-card::before {
  z-index: 2;
}

.page-home .record-row.clip-panel {
  background: var(--glass-bg-panel);
  border: 1px solid var(--glass-border-bright);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.07), var(--glass-shadow-inset);
}

.page-home .record-row .type-icon {
  background: rgba(255, 255, 255, 0.32) !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Date nav glass buttons */
.date-nav button {
  background: rgba(255, 255, 255, 0.32) !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  box-shadow:
    0 2px 10px rgba(229, 57, 53, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}

/* Bottom nav — strongest glass */
.clip-nav-wrap .bottom-nav.clip-nav {
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(64px) saturate(210%);
  backdrop-filter: blur(64px) saturate(210%);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
}

.clip-nav-wrap .bottom-nav.clip-nav a.active {
  text-shadow: 0 0 20px rgba(229, 57, 53, 0.15);
}

.btn-logout,
.page-home .btn-save-clip {
  background: var(--glass-bg-panel) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-thin)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-thin)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-bright) !important;
  box-shadow: var(--glass-shadow-inset), 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  color: var(--primary);
  font-weight: 600;
}

.page-home .btn-save-clip:active {
  transform: scale(0.98);
}

.page-home .btn-save-clip:disabled {
  opacity: 0.55;
  transform: none;
}

.page-home .btn-save-clip i {
  font-size: 17px;
}
.login-form .btn-primary {
  position: relative;
  overflow: hidden;
  border-radius: var(--clip-pill) !important;
  background: rgba(229, 57, 53, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  box-shadow:
    0 10px 32px rgba(229, 57, 53, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.login-form .btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, transparent 48%);
  pointer-events: none;
}

/* Calendar — flat selection */
.calendar-day.selected {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px;
}

.calendar-day.today:not(.selected) {
  background: var(--primary-soft) !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--primary);
  font-weight: 700;
}
.profile-header {
  background: linear-gradient(145deg, rgba(229, 57, 53, 0.82) 0%, rgba(183, 28, 28, 0.88) 100%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 12px 40px rgba(229, 57, 53, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06) !important;
}

.profile-avatar {
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Stats mini cards */
.mini-card-board-summary {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.mini-card {
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.mini-card.positive {
  background: rgba(255, 235, 238, 0.42);
}

.mini-card.negative {
  background: rgba(232, 245, 233, 0.42);
}

.mini-card.zero {
  background: rgba(243, 244, 246, 0.38);
}

.mini-card.selected {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

.mini-card.selected .mini-label,
.mini-card.selected .mini-value {
  color: #fff !important;
}

/* Login */
.login-logo {
  box-shadow:
    0 12px 36px rgba(229, 57, 53, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.login-form {
  background: var(--glass-bg-panel);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--clip-radius);
  padding: 24px 20px;
  box-shadow: var(--glass-shadow-outer), var(--glass-shadow-inset);
}

.form-input {
  background: rgba(255, 255, 255, 0.32) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Toast glass */
.toast {
  background: rgba(26, 26, 46, 0.72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.calendar-header button {
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.menu-item:active {
  background: rgba(255, 255, 255, 0.35);
}

/* Accessibility — solid fallback */
@media (prefers-reduced-transparency: reduce) {
  html {
    background-color: var(--bg);
    background-image: none;
  }

  .clip-bar,
  .clip-panel,
  .clip-tabs,
  .card,
  .menu-list,
  .mini-card-board,
  .day-detail-panel,
  .login-form,
  .clip-nav-wrap .bottom-nav.clip-nav,
  .day-summary-v2,
  .page-home .record-row.clip-panel,
  .mini-card,
  .form-input,
  .btn-logout,
  .page-home .btn-save-clip {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--card) !important;
  }

  .page-home .btn-save-clip {
    color: var(--primary);
  }

  .profile-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  }
}