:root {
  --matrix-green: #00ff41;
  --taxi-amber: #ffc82a;
  --taxi-ink: #03140a;
  --uber-green: #2eb861;
  --street-blue: #3894ff;
  --tms-purple: #9e5cf2;
  --tips-pink: #eb619e;
  --cash-orange: #ff8c2e;
  --airport-cyan: #33d1e0;
  --eon-red: #e30613;
  --circlek-orange: #f15a22;
  --q8-yellow: #ffcc00;
  --cigarette-orange: #e85c21;
  --coffee-brown: #a0522e;
  --soda-teal: #2ec4b6;
  --src-dantaxi: var(--taxi-amber);
  --src-uber: var(--uber-green);
  --src-street: var(--street-blue);
  --src-cash: var(--cash-orange);
  --src-tips: var(--tips-pink);
  --src-tms: var(--tms-purple);
  --src-futile: var(--cash-orange);
  --fb-blue: #00ff41;
  --fb-blue-dark: #69f0ae;
  --feed-bg: #030805;
  --card-bg: #0a140e;
  --secondary-text: #73b885;
  --divider: rgba(0, 255, 65, 0.22);
  --messenger-blue: #69f0ae;
  --soft-gray: #102418;
  --charge-bg: #07110b;
  --charge-chip: #102418;
  --busy-red: #ff453a;
  --cockpit-green: #00ff41;
  --cockpit-red: #ff453a;
  --deck-bg: #17191f;
  --text: #f4f6fa;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tab-h: 64px;
  --phone-max: 430px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  background: #060708;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

#app {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.app-shell {
  width: min(100%, var(--phone-max));
  height: min(920px, 100dvh - 32px);
  background: var(--feed-bg);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--text);
}

@media (max-width: 480px) {
  #app {
    padding: 0;
  }

  .app-shell {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* iPad: fyld skærmen som iOS-appen (ikke 430 px telefon-ramme) */
@media (min-width: 700px) {
  #app {
    padding: 0;
    place-items: stretch;
  }

  .app-shell {
    width: 100%;
    max-width: none;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--feed-bg);
}

.screen-scroll {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.feed-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 16px;
}

.local-banner {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--secondary-text);
  background: transparent;
  border-bottom: 1px solid var(--divider);
  padding: 5px 12px;
  text-align: center;
}

.demo-mode-banner {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 8px 12px;
  background: linear-gradient(90deg, #f5b301, #ffcc33);
  color: #1a1406;
}