/* ============================================================
   CANDIDIA — Design System
   Liquid Glass · Apple-inspired · Mobile-first
   ============================================================ */

/* === DESIGN TOKENS ========================================= */
:root {
  /* Background */
  --bg-base:        #05050A;
  --bg-mesh-1:      rgba(88,  86, 214, 0.14);
  --bg-mesh-2:      rgba(0,  122, 255, 0.10);
  --bg-mesh-3:      rgba(120,  40, 200, 0.08);

  /* Glass surfaces */
  --glass-bg:       rgba(255, 255, 255, 0.055);
  --glass-bg-md:    rgba(255, 255, 255, 0.09);
  --glass-bg-high:  rgba(255, 255, 255, 0.13);
  --glass-border:   rgba(255, 255, 255, 0.10);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-blur:     blur(28px) saturate(180%);
  --glass-blur-sm:  blur(16px) saturate(160%);

  /* Brand */
  --blue:     #007AFF;
  --blue-dim: rgba(0, 122, 255, 0.18);
  --green:    #30D158;
  --green-dim:rgba(48, 209, 88, 0.16);
  --orange:   #FF9F0A;
  --orange-dim:rgba(255,159,10, 0.16);
  --red:      #FF453A;
  --red-dim:  rgba(255, 69, 58, 0.16);
  --purple:   #BF5AF2;
  --purple-dim:rgba(191, 90, 242, 0.16);
  --teal:     #5AC8FA;

  /* Text */
  --text-1: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.62);
  --text-3: rgba(255, 255, 255, 0.35);
  --text-4: rgba(255, 255, 255, 0.20);

  /* Typography */
  --font: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;

  /* Spacing (8px grid) */
  --s1: 4px;   --s2: 8px;   --s3: 12px;
  --s4: 16px;  --s5: 20px;  --s6: 24px;
  --s8: 32px;  --s10: 40px; --s12: 48px;

  /* Radii */
  --r-sm: 10px;  --r-md: 14px;  --r-lg: 18px;
  --r-xl: 22px;  --r-2xl: 28px; --r-full: 9999px;

  /* Tab bar */
  --tab-h: 56px;
  --tab-safe: env(safe-area-inset-bottom, 16px);
  --tab-total: calc(var(--tab-h) + var(--tab-safe));

  /* Safe areas */
  --sat: env(safe-area-inset-top, 0px);

  /* Transitions */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  150ms;
  --t-base:  280ms;
  --t-slow:  420ms;

  /* Shadows */
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* === RESET & BASE ========================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-1);
  background-color: var(--bg-base);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Animated background mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%,  var(--bg-mesh-1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 85% 85%,  var(--bg-mesh-2) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%,  var(--bg-mesh-3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: meshShift 20s ease-in-out infinite alternate;
}

@keyframes meshShift {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(1.05); }
}

/* === APP SHELL ============================================= */
#app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  z-index: 1;
}

/* === VIEWS ================================================= */
.view {
  position: absolute;
  inset: 0;
  bottom: var(--tab-total);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(var(--sat) + var(--s4)) var(--s4) var(--s6);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
  will-change: transform, opacity;
}

.view.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Scrollbar styling */
.view::-webkit-scrollbar { display: none; }

/* === VIEW HEADER =========================================== */
.view-header {
  padding-top: var(--s2);
  margin-bottom: var(--s5);
}

.view-header h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-1);
}

.view-header p {
  font-size: 0.88rem;
  color: var(--text-2);
  margin-top: var(--s1);
}

/* === GLASS CARD ============================================ */
.card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s3);
}

/* Specular highlight on glass */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.00) 45%
  );
  pointer-events: none;
  z-index: 1;
}

.card-inner {
  padding: var(--s4) var(--s5);
  position: relative;
  z-index: 2;
}

.card-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: var(--s3);
}

/* === SECTION TITLE ========================================= */
.section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: var(--s5) 0 var(--s2) var(--s1);
}

/* === SEGMENTED CONTROL ===================================== */
.segmented {
  display: flex;
  background: rgba(255,255,255,0.07);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
}

.seg-btn {
  flex: 1;
  padding: var(--s2) var(--s3);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: calc(var(--r-md) - 2px);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  text-align: center;
}

.seg-btn.active {
  background: var(--glass-bg-high);
  color: var(--text-1);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* === INPUTS ================================================ */
.input-field {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 0.95rem;
  padding: var(--s3) var(--s4);
  outline: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.input-field::placeholder { color: var(--text-3); }

.input-field:focus {
  border-color: var(--blue);
  background: rgba(0,122,255,0.06);
}

textarea.input-field {
  resize: none;
  min-height: 110px;
  line-height: 1.6;
}

/* === BUTTONS =============================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s3) var(--s5);
  border: none;
  border-radius: var(--r-lg);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-spring);
  min-height: 50px;
  position: relative;
  overflow: hidden;
}

.btn:active { transform: scale(0.96); }

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,122,255,0.35);
}

.btn-primary:hover { background: #0066DB; }

.btn-primary:disabled {
  background: rgba(255,255,255,0.10);
  color: var(--text-3);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-primary:disabled:active { transform: none; }

.btn-ghost {
  background: var(--glass-bg-md);
  color: var(--text-1);
  border: 1px solid var(--glass-border);
}

.btn-ghost:hover { background: var(--glass-bg-high); }

/* === PLACEHOLDER STATE ===================================== */
.placeholder-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s8) var(--s4);
  text-align: center;
}

.placeholder-icon {
  font-size: 2.2rem;
  filter: grayscale(30%);
  opacity: 0.5;
  margin-bottom: var(--s1);
}

.placeholder-zone h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-2);
}

.placeholder-zone p {
  font-size: 0.82rem;
  color: var(--text-3);
  max-width: 220px;
  line-height: 1.5;
}

/* === CHECKLIST ============================================= */
.checklist { display: flex; flex-direction: column; gap: var(--s1); }

.check-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  min-height: 44px;
}

.check-item:hover { background: rgba(255,255,255,0.04); }
.check-item:active { background: rgba(255,255,255,0.08); }

.check-box {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  border: 2px solid var(--glass-border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast) var(--ease-spring);
  background: transparent;
}

.check-item.checked .check-box {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(48,209,88,0.4);
}

.check-mark {
  opacity: 0;
  transform: scale(0);
  transition: all var(--t-fast) var(--ease-spring);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.check-item.checked .check-mark {
  opacity: 1;
  transform: scale(1);
}

.check-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-1);
  transition: color var(--t-fast) var(--ease);
}

.check-item.checked .check-label { color: var(--text-2); }

.check-optional {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-3);
  font-weight: 400;
}

/* Progress bar */
.progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-full);
  overflow: hidden;
  margin: var(--s2) 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: var(--r-full);
  transition: width var(--t-slow) var(--ease);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-3);
  margin-bottom: var(--s1);
}

/* === HISTORY CARDS ========================================= */
.filter-row {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s4);
  overflow-x: auto;
  padding-bottom: var(--s1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }

.filter-chip {
  flex-shrink: 0;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-full);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}

.filter-chip.active {
  background: var(--blue-dim);
  border-color: rgba(0,122,255,0.4);
  color: var(--blue);
}

.app-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s4);
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  margin-bottom: var(--s2);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}

.app-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 50%);
  pointer-events: none;
}

.app-card:active { transform: scale(0.98); background: var(--glass-bg-md); }

.company-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.app-info { flex: 1; min-width: 0; }

.app-company {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-role {
  font-size: 0.82rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.app-meta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: var(--s1);
  flex-shrink: 0;
}

.app-date {
  font-size: 0.75rem;
  color: var(--text-3);
}

/* === STATUS BADGES ========================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.badge-sent     { background: var(--blue-dim);   color: var(--blue);   }
.badge-sent::before    { background: var(--blue); }
.badge-interview{ background: var(--orange-dim); color: var(--orange); }
.badge-interview::before { background: var(--orange); }
.badge-rejected { background: var(--red-dim);    color: var(--red);    }
.badge-rejected::before  { background: var(--red); }
.badge-accepted { background: var(--green-dim);  color: var(--green);  }
.badge-accepted::before  { background: var(--green); }

/* === STATS ROW ============================================= */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.stat-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--s3) var(--s3);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 0.68rem;
  color: var(--text-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* === TIMELINE ============================================== */
.timeline { position: relative; padding-left: var(--s6); }

.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: var(--s2);
  bottom: var(--s2);
  width: 2px;
  background: linear-gradient(180deg,
    var(--blue) 0%,
    rgba(255,255,255,0.1) 100%
  );
  border-radius: var(--r-full);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--s4);
}

.timeline-dot {
  position: absolute;
  left: calc(-1 * var(--s6) + 3px);
  top: var(--s3);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
}

.timeline-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--s3) var(--s4);
  position: relative;
  overflow: hidden;
}

.timeline-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 50%);
  pointer-events: none;
}

.timeline-date {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s1);
}

.timeline-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-1);
}

.timeline-sub {
  font-size: 0.82rem;
  color: var(--text-2);
  margin-top: 2px;
}

/* === SEARCH ================================================ */
.search-wrap {
  position: relative;
  margin-bottom: var(--s3);
}

.search-icon {
  position: absolute;
  left: var(--s3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 0.9rem;
  pointer-events: none;
}

.search-input {
  width: 100%;
  background: var(--glass-bg-md);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 0.95rem;
  padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + var(--s6));
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast) var(--ease);
}

.search-input::placeholder { color: var(--text-3); }
.search-input:focus { border-color: rgba(0,122,255,0.5); }

/* === EMPTY STATE =========================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s12) var(--s6);
  text-align: center;
  opacity: 0.7;
}

.empty-state .big-icon { font-size: 3rem; margin-bottom: var(--s3); }
.empty-state h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-2); }
.empty-state p { font-size: 0.85rem; color: var(--text-3); margin-top: var(--s1); max-width: 220px; }

/* === REMINDER CARD ========================================= */
.reminder-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--purple-dim);
  border: 1px solid rgba(191,90,242,0.2);
  border-radius: var(--r-lg);
  margin-bottom: var(--s2);
}

.reminder-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.reminder-text h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-1);
}

.reminder-text p {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-top: 1px;
}

.reminder-time {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--purple);
  font-weight: 600;
  flex-shrink: 0;
}

/* === BOTTOM TAB BAR ======================================== */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--tab-total);
  background: rgba(12, 12, 18, 0.75);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: flex-start;
  padding-bottom: var(--tab-safe);
}

.tab-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none;
}

.tab-list {
  display: flex;
  width: 100%;
  height: var(--tab-h);
  align-items: center;
  padding: 0 var(--s2);
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--tab-h);
  border: none;
  background: transparent;
  color: var(--text-3);
  font-family: var(--font);
  font-size: 0.62rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
  padding: var(--s2) var(--s1);
  border-radius: var(--r-md);
  letter-spacing: 0.01em;
  position: relative;
}

.tab-btn:active { background: rgba(255,255,255,0.05); }

.tab-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--t-fast) var(--ease-spring);
}

.tab-icon svg {
  width: 24px;
  height: 24px;
  transition: all var(--t-fast) var(--ease);
}

.tab-btn.active { color: var(--blue); }

.tab-btn.active .tab-icon {
  transform: translateY(-1px);
}

/* Active indicator dot */
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue);
  animation: dotPop var(--t-fast) var(--ease-spring);
}

@keyframes dotPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* === INPUT SECTION SPACING ================================= */
.form-group { margin-bottom: var(--s3); }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: var(--s2);
}

/* === TOGGLE INPUT TAB ====================================== */
.input-toggle-panel { display: none; }
.input-toggle-panel.active { display: block; }

/* === DIVIDER =============================================== */
.divider {
  height: 1px;
  background: var(--glass-border);
  margin: var(--s3) 0;
}

/* === FLOATING ACTION FEEL ================================== */
.fab-hint {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--blue-dim);
  border: 1px solid rgba(0,122,255,0.25);
  border-radius: var(--r-full);
  font-size: 0.78rem;
  color: var(--blue);
  font-weight: 500;
  margin-bottom: var(--s3);
}

/* === RESPONSIVE: TABLET+ ================================== */
@media (min-width: 640px) {
  .view { padding: calc(var(--sat) + var(--s6)) var(--s6) var(--s8); }

  .view-header h1 { font-size: 2.4rem; }

  .tab-bar { max-width: 640px; left: 50%; transform: translateX(-50%); border-radius: var(--r-xl) var(--r-xl) 0 0; }

  #app { max-width: 640px; margin: 0 auto; }
}

/* === RESPONSIVE: DESKTOP ================================== */
@media (min-width: 1024px) {
  body { background: linear-gradient(135deg, #05050A 0%, #0A0A18 100%); }

  #app {
    max-width: 420px;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border);
  }
}

/* === ANIMATIONS =========================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-in {
  animation: fadeUp var(--t-base) var(--ease) both;
}

.anim-in:nth-child(1) { animation-delay: 0ms; }
.anim-in:nth-child(2) { animation-delay: 40ms; }
.anim-in:nth-child(3) { animation-delay: 80ms; }
.anim-in:nth-child(4) { animation-delay: 120ms; }
.anim-in:nth-child(5) { animation-delay: 160ms; }
.anim-in:nth-child(6) { animation-delay: 200ms; }
.anim-in:nth-child(7) { animation-delay: 240ms; }