/* GPLUG Aura — shared visual language for the existing Leptos console.
   The application owns its DOM, navigation, state, watermark and protection.
   Only the enhancement hooks and existing presentational classes are styled. */

@font-face {
  font-family: "Manrope";
  src: url("/aura-Manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --aura-surface: 246 247 241;
  --aura-raised: 255 255 255;
  --aura-overlay: 233 239 229;
  --aura-border: 169 189 177;
  --aura-strong: 16 46 43;
  --aura-muted: 80 104 96;
  --aura-faint: 94 116 108;
  --aura-brand: 7 95 85;
  --aura-brand-hover: 5 74 65;
  --aura-on-brand: 255 255 255;
  --aura-success: 34 98 61;
  --aura-warning: 120 83 12;
  --aura-danger: 170 48 65;
  --aura-info: 49 91 168;
  --aura-chart-grid: #dce5dc;
  --aura-chart-text: #526a60;
  --aura-chart-tip: #fff;
  --aura-sidebar: #082d2c;
  --aura-mint: #b0f6d1;
  --aura-radius: 18px;
  --aura-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --aura-heading-font: "Manrope", var(--aura-font);
  --aura-shadow: 0 2px 3px #082d2c03;
}

html[data-appearance="dark"] {
  color-scheme: dark;
  --aura-surface: 11 23 23;
  --aura-raised: 19 39 38;
  --aura-overlay: 32 55 50;
  --aura-border: 80 108 97;
  --aura-strong: 240 247 239;
  --aura-muted: 189 203 192;
  --aura-faint: 165 184 172;
  --aura-brand: 176 246 209;
  --aura-brand-hover: 205 255 226;
  --aura-on-brand: 8 45 44;
  --aura-success: 176 233 197;
  --aura-warning: 241 199 123;
  --aura-danger: 255 180 184;
  --aura-info: 186 207 255;
  --aura-chart-grid: #304b42;
  --aura-chart-text: #bdcbc0;
  --aura-chart-tip: #132726;
  --aura-shadow: 0 2px 3px #0000000a;
}

body[data-ui="aura"] {
  margin: 0;
  background: rgb(var(--aura-surface));
  color: rgb(var(--aura-strong));
  font-family: var(--aura-font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body[data-ui="aura"] *,
body[data-ui="aura"] *::before,
body[data-ui="aura"] *::after { box-sizing: border-box; }

body[data-ui="aura"] :is(h1, h2, h3, h4) {
  font-family: var(--aura-heading-font);
  color: rgb(var(--aura-strong));
}

body[data-ui="aura"] :is(button, input, select, textarea) { font-family: inherit; }
body[data-ui="aura"] :is(button, select, input, textarea) { min-width: 0; }
body[data-ui="aura"] button { min-height: 44px; touch-action: manipulation; }
body[data-ui="aura"] button:not(:disabled) { cursor: pointer; }
body[data-ui="aura"] button:disabled { cursor: not-allowed; }
body[data-ui="aura"] :is(button, input, select, textarea, a):focus-visible {
  outline: 3px solid rgb(var(--aura-brand));
  outline-offset: 3px;
}
body[data-ui="aura"] ::selection { background: var(--aura-mint); color: #082d2c; }
body[data-ui="aura"] * { scrollbar-width: thin; scrollbar-color: rgb(var(--aura-border) / .65) transparent; }
body[data-ui="aura"] ::-webkit-scrollbar { width: 7px; height: 7px; }
body[data-ui="aura"] ::-webkit-scrollbar-track { background: transparent; }
body[data-ui="aura"] ::-webkit-scrollbar-thumb { background: rgb(var(--aura-border) / .65); border-radius: 12px; }
body[data-ui="aura"] ::-webkit-scrollbar-thumb:hover { background: rgb(var(--aura-brand) / .6); }

/* Layout retains the application's separate page and table scroll regions. */
body[data-ui="aura"] .aura-shell {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  background: rgb(var(--aura-surface));
}
body[data-ui="aura"] .aura-shell > .flex-1 { min-height: 0; }
body[data-ui="aura"] .aura-shell main { min-width: 0; overflow: hidden; }
body[data-ui="aura"] .aura-shell main > .view-enter {
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding: 28px clamp(20px, 3vw, 48px) 36px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
body[data-ui="aura"] .view-enter > :first-child:is(.mb-5, .mb-6) {
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 28px;
}
body[data-ui="aura"] .view-enter h1 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.045em;
}
body[data-ui="aura"] .view-enter h1 + p { margin-top: 8px; line-height: 1.65; }
body[data-ui="aura"] .view-enter h3 { font-size: 15px; font-weight: 700; letter-spacing: -.025em; }
body[data-ui="aura"] .view-enter > :first-child > .flex { flex-wrap: wrap; }
body[data-ui="aura"] .view-enter .grid > * { min-width: 0; }

/* The persistent petrol sidebar matches Admin and Restaurant in both themes. */
body[data-ui="aura"] .aura-shell > aside {
  width: 256px;
  height: 100%;
  position: relative;
  z-index: 40;
  background: var(--aura-sidebar);
  color: #d1e3d8;
  border-color: #234541;
  transition: width .18s ease;
}
body[data-ui="aura"] .aura-shell > aside[class~="w-[60px]"] { width: 80px; }
body[data-ui="aura"] .aura-shell > aside > :first-child {
  min-height: 90px;
  padding: 20px 24px;
  gap: 12px;
  border-color: #38574f;
}
body[data-ui="aura"] .aura-shell > aside[class~="w-[60px]"] > :first-child { padding-inline: 20px; }
body[data-ui="aura"] .aura-brand-mark {
  width: 40px;
  height: 40px;
  min-width: 40px;
  font-size: 0;
  line-height: 0;
  border-radius: 10px;
  background: #082d2c url("/aura-brand.svg") center / 90% no-repeat;
  box-shadow: none;
}
body[data-ui="aura"] .aura-shell > aside > :first-child .text-gplug-text {
  color: #f0f7ef;
  font-family: var(--aura-heading-font);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -1.1px;
}
body[data-ui="aura"] .aura-shell > aside > :first-child .text-gplug-dim {
  color: #a6c4b5;
  font-size: 9px;
  letter-spacing: .11em;
  margin-top: 4px;
}
body[data-ui="aura"] .aura-shell > aside nav {
  min-height: 80px;
  padding: 12px 12px 20px;
  overscroll-behavior: contain;
}
body[data-ui="aura"] .aura-shell > aside nav > div {
  padding: 22px 12px 10px;
  color: #a6c4b5;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
}
body[data-ui="aura"] .aura-shell > aside nav > div:first-child { padding-top: 8px; }
body[data-ui="aura"] .aura-shell > aside nav > button {
  min-height: 44px;
  padding: 11px 12px;
  margin: 3px 0;
  border-radius: 10px;
  color: #bed3c6;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: none;
  gap: 12px;
  transition: background-color .15s ease, color .15s ease;
}
body[data-ui="aura"] .aura-shell > aside nav > button:hover { background: #1b443d; color: #fff; }
body[data-ui="aura"] .aura-shell > aside nav > button[class~="bg-gplug-gold/15"] {
  background: var(--aura-mint);
  color: #082d2c;
  font-weight: 700;
}
body[data-ui="aura"] .aura-shell > aside[class~="w-[60px]"] nav > button { justify-content: center; padding-inline: 8px; }
body[data-ui="aura"] .aura-shell > aside :focus-visible { outline-color: var(--aura-mint); outline-offset: 2px; }
body[data-ui="aura"] .aura-shell > aside > .border-t {
  padding: 18px 24px;
  color: #a6c4b5;
  border-color: #38574f;
}
body[data-ui="aura"] .aura-shell > aside .text-gplug-mint { color: var(--aura-mint); }
body[data-ui="aura"] .aura-nav-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
body[data-ui="aura"] .aura-nav-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--aura-icon) center / contain no-repeat;
  mask: var(--aura-icon) center / contain no-repeat;
}
body[data-ui="aura"] .aura-nav-icon svg { width: 20px; height: 20px; }
body[data-ui="aura"] .aura-nav-icon:has(svg)::before { content: none; }

/* Header utilities always remain reachable, including the original logout. */
body[data-ui="aura"] .aura-shell header {
  background: rgb(var(--aura-raised));
  border-color: rgb(var(--aura-border) / .4);
}
body[data-ui="aura"] .aura-shell header > .flex {
  min-height: 82px;
  padding: 16px clamp(20px, 3vw, 48px);
  gap: 16px;
}
body[data-ui="aura"] .aura-shell header > .flex > .flex { min-width: 0; }
body[data-ui="aura"] .aura-shell header button { border-radius: 10px; padding: 10px 12px; }
body[data-ui="aura"] .aura-shell header button:hover { background: rgb(var(--aura-overlay)); color: rgb(var(--aura-brand)); }
body[data-ui="aura"] .aura-shell header button[title="Toggle sidebar"] {
  min-width: 44px;
  font-size: 20px;
  padding: 8px;
  color: rgb(var(--aura-muted));
  border: 1px solid rgb(var(--aura-border) / .4);
}
body[data-ui="aura"] .aura-shell header .rounded-full.ring-1 {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  box-shadow: none;
  background: rgb(var(--aura-overlay));
  color: rgb(var(--aura-brand));
}
body[data-ui="aura"] .aura-shell header .border-l { border-color: rgb(var(--aura-border) / .4); }
body[data-ui="aura"] .aura-shell header .border-l > span {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui="aura"] .aura-shell header .bg-gplug-mint { box-shadow: none; animation: none; }
body[data-ui="aura"] .aura-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 10px;
  flex-shrink: 0;
  color: rgb(var(--aura-muted));
  background: rgb(var(--aura-raised));
  border: 1px solid rgb(var(--aura-border) / .55);
  border-radius: 10px;
  transition: background-color .15s ease, color .15s ease;
}
body[data-ui="aura"] .aura-theme-toggle:hover { color: rgb(var(--aura-brand)); background: rgb(var(--aura-overlay)); }
body[data-ui="aura"] .aura-theme-toggle svg { width: 18px; height: 18px; }

/* Cards, filters, inputs and action hierarchy. */
body[data-ui="aura"] .view-enter .bg-gplug-ink.border.rounded-xl {
  border-color: rgb(var(--aura-border) / .4);
  border-radius: var(--aura-radius);
  box-shadow: var(--aura-shadow);
}
body[data-ui="aura"] .view-enter .bg-gplug-ink.border:is(.p-5, .p-6) { padding: 22px; }
body[data-ui="aura"] .view-enter > .bg-gplug-ink.p-4 { padding: 20px; }
body[data-ui="aura"] .view-enter > .bg-gplug-ink.p-4 > .grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 16px;
}
body[data-ui="aura"] .view-enter > .bg-gplug-ink.p-4 > .border-t {
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  margin-top: 16px;
  border-color: rgb(var(--aura-border) / .4);
}
body[data-ui="aura"] :is(.view-enter, .aura-login) label {
  color: rgb(var(--aura-muted));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .025em;
}
body[data-ui="aura"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-height: 44px;
  padding: 10px 12px;
  color: rgb(var(--aura-strong));
  background: rgb(var(--aura-raised));
  border: 1px solid rgb(var(--aura-border) / .65);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body[data-ui="aura"] select { padding-right: 26px; }
body[data-ui="aura"] textarea { resize: vertical; }
body[data-ui="aura"] input::placeholder,
body[data-ui="aura"] textarea::placeholder { color: rgb(var(--aura-faint)); opacity: 1; }
body[data-ui="aura"] :is(input, select, textarea):hover { border-color: rgb(var(--aura-border)); }
body[data-ui="aura"] :is(input, select, textarea):focus { border-color: rgb(var(--aura-brand)); }
body[data-ui="aura"] input:is([type="checkbox"], [type="radio"]) {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: rgb(var(--aura-brand));
}
body[data-ui="aura"] label:has(input:is([type="checkbox"], [type="radio"])) { min-height: 44px; }
body[data-ui="aura"] .view-enter button { border-radius: 10px; padding: 10px 14px; font-size: 12px; font-weight: 600; }
body[data-ui="aura"] button:is(.bg-gplug-gold, .bg-gradient-to-r) {
  color: rgb(var(--aura-on-brand));
  background: rgb(var(--aura-brand));
  border-color: transparent;
  background-image: none;
  box-shadow: none;
  font-weight: 650;
}
body[data-ui="aura"] button:is(.bg-gplug-gold, .bg-gradient-to-r):hover:not(:disabled) {
  color: rgb(var(--aura-on-brand));
  background: rgb(var(--aura-brand-hover));
  box-shadow: none;
}
body[data-ui="aura"] .view-enter button.bg-gplug-slate {
  color: rgb(var(--aura-muted));
  background: rgb(var(--aura-overlay) / .55);
  border: 1px solid rgb(var(--aura-border) / .45);
}
body[data-ui="aura"] .view-enter button.bg-gplug-slate:hover:not(:disabled) { background: rgb(var(--aura-overlay)); color: rgb(var(--aura-strong)); }
body[data-ui="aura"] .view-enter [class~="bg-gplug-rose/10"] { border-radius: 12px; line-height: 1.6; }
body[data-ui="aura"] .view-enter > [class~="from-gplug-gold/10"] {
  padding: 24px;
  border-radius: 18px;
  background: rgb(var(--aura-overlay));
  border-color: rgb(var(--aura-border) / .55);
}

/* Numeric summaries use the same type scale and quiet borders as Aura cards. */
body[data-ui="aura"] .view-enter > .grid[class~="xl:grid-cols-6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 1600px) {
  body[data-ui="aura"] .view-enter > .grid[class~="xl:grid-cols-6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  body[data-ui="aura"] .view-enter > .grid[class~="xl:grid-cols-6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  body[data-ui="aura"] .view-enter > .grid[class~="xl:grid-cols-6"] { grid-template-columns: minmax(0, 1fr); }
}
body[data-ui="aura"] .view-enter .group.shadow-panel { min-height: 142px; padding: 22px; }
body[data-ui="aura"] .view-enter .group.shadow-panel:hover { border-color: rgb(var(--aura-brand) / .4); }
body[data-ui="aura"] .view-enter .group.shadow-panel > .absolute {
  top: 22px;
  bottom: auto;
  left: auto;
  right: 20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
body[data-ui="aura"] .view-enter .group.shadow-panel > .uppercase {
  padding-right: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
body[data-ui="aura"] .view-enter .group.shadow-panel > .tabular-nums {
  font-family: var(--aura-heading-font);
  font-size: clamp(25px, 2.25vw, 36px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.04em;
  margin-top: 14px;
  overflow-wrap: anywhere;
  color: rgb(var(--aura-strong));
}
body[data-ui="aura"] .view-enter .group.shadow-panel > .mt-1 { font-size: 11px; margin-top: 8px; }
body[data-ui="aura"] .view-enter .tabular-nums { font-variant-numeric: tabular-nums; }

/* Wide datasets scroll inside their frame; filters and pagination can wrap. */
body[data-ui="aura"] .view-enter > .flex-1.bg-gplug-ink { min-height: 320px; }
body[data-ui="aura"] .view-enter .overflow-y-auto:has(> table) { overflow: auto; overscroll-behavior: contain; }
body[data-ui="aura"] .view-enter table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
body[data-ui="aura"] .view-enter thead {
  background: rgb(var(--aura-overlay));
  color: rgb(var(--aura-muted));
}
body[data-ui="aura"] .view-enter th {
  padding: 15px 18px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
}
body[data-ui="aura"] .view-enter td { padding: 16px 18px; vertical-align: middle; }
body[data-ui="aura"] .view-enter tbody tr { border-color: rgb(var(--aura-border) / .3); transition: background-color .15s ease; }
body[data-ui="aura"] .view-enter tbody tr:hover { background: rgb(var(--aura-overlay) / .5); }
body[data-ui="aura"] .view-enter td:first-child { min-width: 220px; max-width: 380px; overflow-wrap: anywhere; }
body[data-ui="aura"] .view-enter td a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(var(--aura-border));
  overflow-wrap: anywhere;
}
body[data-ui="aura"] .view-enter td .rounded[class*="bg-gplug-"] { border-radius: 999px; padding: 5px 10px; }
body[data-ui="aura"] .view-enter .bg-gplug-ink > .border-t.flex {
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-color: rgb(var(--aura-border) / .4);
  background: rgb(var(--aura-raised));
}
body[data-ui="aura"] .view-enter .bg-gplug-ink > .border-t.flex > .flex { flex-wrap: wrap; }
body[data-ui="aura"] .view-enter .fixed.shadow-2xl {
  max-width: calc(100vw - 24px);
  padding: 18px;
  border-radius: 16px;
  border-color: rgb(var(--aura-border) / .55);
  box-shadow: 0 16px 48px #082d2c26;
}
body[data-ui="aura"] .view-enter .fixed.shadow-2xl pre { overflow-wrap: anywhere; font-size: 12px; line-height: 1.7; }
body[data-ui="aura"] .view-enter .fixed.shadow-lg { max-width: calc(100vw - 32px); border-radius: 12px; }

/* Split sign-in: the form stays the original app-owned form. */
body[data-ui="aura"] .aura-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: auto;
  background: rgb(var(--aura-surface));
  background-image: none;
}
body[data-ui="aura"] .aura-login > .max-w-sm {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: calc(100% - 80px);
  max-width: 400px;
  margin: 64px auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
body[data-ui="aura"] .aura-login > .aura-theme-toggle { position: absolute; top: 28px; right: 32px; z-index: 3; }
body[data-ui="aura"] .aura-login > .max-w-sm > .flex-col { align-items: flex-start; margin-bottom: 30px; }
body[data-ui="aura"] .aura-login .aura-brand-mark { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; }
body[data-ui="aura"] .aura-login > .max-w-sm .text-xl {
  font-family: var(--aura-heading-font);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.06em;
  margin-top: 16px;
}
body[data-ui="aura"] .aura-login h2 {
  margin-bottom: 30px;
  text-align: left;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.04em;
  color: rgb(var(--aura-strong));
}
body[data-ui="aura"] .aura-login form > * + * { margin-top: 20px; }
body[data-ui="aura"] .aura-login label { display: block; margin-bottom: 8px; font-size: 12px; text-transform: none; letter-spacing: 0; }
body[data-ui="aura"] .aura-login input { min-height: 52px; padding: 14px 16px; border-radius: 12px; font-size: 14px; }
body[data-ui="aura"] .aura-login button[type="submit"] { min-height: 52px; padding: 14px 20px; border-radius: 12px; font-size: 14px; }
body[data-ui="aura"] .aura-login form > [class~="bg-gplug-rose/10"] { padding: 12px 14px; border-radius: 10px; line-height: 1.65; }
body[data-ui="aura"] .aura-login > .max-w-sm > .border-t {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 20px;
  border-color: rgb(var(--aura-border) / .4);
  font-size: 11px;
}
body[data-ui="aura"] .aura-login-story {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  position: relative;
  isolation: isolate;
  min-height: 680px;
  padding: 150px clamp(36px, 5vw, 88px);
  overflow: hidden;
  background: #082d2c;
  color: #f0f7ef;
}
body[data-ui="aura"] .aura-login-story::before,
body[data-ui="aura"] .aura-login-story::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(68vw, 820px);
  aspect-ratio: 1;
  right: -50%;
  top: 45%;
  border: 1px solid #b0f6d117;
  border-radius: 50%;
  pointer-events: none;
}
body[data-ui="aura"] .aura-login-story::after { width: min(52vw, 620px); right: -34%; top: 56%; }
body[data-ui="aura"] .aura-story-brand {
  position: absolute;
  top: 48px;
  left: clamp(36px, 5vw, 88px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f0f7ef;
  font-family: var(--aura-heading-font);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.055em;
}
body[data-ui="aura"] .aura-story-brand :is(img, svg) { width: 44px; height: 44px; object-fit: contain; }
body[data-ui="aura"] .aura-story-brand small {
  padding: 5px 7px;
  border-radius: 6px;
  background: #b0f6d119;
  color: #b0f6d1;
  font-family: var(--aura-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .035em;
}
body[data-ui="aura"] .aura-story-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  margin-bottom: 28px;
  border: 1px solid #b0f6d14d;
  border-radius: 30px;
  background: #b0f6d112;
}
body[data-ui="aura"] .aura-story-emblem img { width: 80px; height: 80px; }
body[data-ui="aura"] .aura-login-story .aura-story-heading {
  max-width: 510px;
  margin: 0;
  color: #f0f7ef;
  font-family: var(--aura-heading-font);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.05em;
}
body[data-ui="aura"] .aura-story-copy { max-width: 350px; margin: 24px 0 0; color: #bdcebf; font-size: 15px; line-height: 1.8; }
body[data-ui="aura"] .aura-story-caption {
  position: absolute;
  left: clamp(36px, 5vw, 88px);
  bottom: 48px;
  color: #a6c4b5;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Bootstrap loader has inline styles: only these presentation overrides need !important. */
body[data-ui="aura"] #loader { min-height: 100dvh; background: rgb(var(--aura-surface)) !important; }
body[data-ui="aura"] #loader > div { width: 360px !important; max-width: calc(100vw - 48px) !important; }
body[data-ui="aura"] #loader > div > div:first-child {
  color: rgb(var(--aura-strong)) !important;
  font-family: var(--aura-heading-font);
  font-size: 36px !important;
  letter-spacing: -.06em !important;
}
body[data-ui="aura"] #loader > div > div:first-child > span:first-child { color: rgb(var(--aura-brand)) !important; }
body[data-ui="aura"] #loader > div > div:nth-child(2),
body[data-ui="aura"] #loader-msg { color: rgb(var(--aura-muted)) !important; }
body[data-ui="aura"] #loader > div > div:last-child > div:first-child { background: rgb(var(--aura-overlay)) !important; }
body[data-ui="aura"] #loader-bar { background: rgb(var(--aura-brand)) !important; }
body[data-ui="aura"] #loader-pct { color: rgb(var(--aura-brand)) !important; }
body[data-ui="aura"] .loader-dot { background: rgb(var(--aura-brand)) !important; }

/* The map remains full-color; tiles, markers, attribution and controls are intact. */
body[data-ui="aura"] #gplug-map { min-height: 340px; border-color: rgb(var(--aura-border) / .55); border-radius: 18px; isolation: isolate; }
body[data-ui="aura"] .leaflet-container { font-family: var(--aura-font); background: rgb(var(--aura-overlay)); }
body[data-ui="aura"] .leaflet-bar { border: 1px solid rgb(var(--aura-border) / .6); border-radius: 10px; box-shadow: 0 3px 12px #082d2c1a; }
body[data-ui="aura"] .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; background: rgb(var(--aura-raised)); color: rgb(var(--aura-strong)); border-color: rgb(var(--aura-border) / .4); }
body[data-ui="aura"] .leaflet-bar a:first-child { border-radius: 9px 9px 0 0; }
body[data-ui="aura"] .leaflet-bar a:last-child { border-radius: 0 0 9px 9px; }
body[data-ui="aura"] .leaflet-bar a:hover { background: rgb(var(--aura-overlay)); }
body[data-ui="aura"] .leaflet-popup-content-wrapper,
body[data-ui="aura"] .leaflet-popup-tip { background: rgb(var(--aura-raised)); color: rgb(var(--aura-strong)); }
body[data-ui="aura"] .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 8px 28px #082d2c26; }
body[data-ui="aura"] .leaflet-popup-content { margin: 18px 24px 18px 18px; line-height: 1.6; }
body[data-ui="aura"] .leaflet-container a.leaflet-popup-close-button { width: 44px; height: 44px; line-height: 40px; color: rgb(var(--aura-muted)); }
body[data-ui="aura"] .leaflet-control-attribution { background: rgb(var(--aura-raised) / .95); color: rgb(var(--aura-muted)); padding: 3px 7px; }
body[data-ui="aura"] .leaflet-control-attribution a { color: rgb(var(--aura-brand)); }

@media (max-width: 1100px) {
  body[data-ui="aura"] .aura-shell header > .flex { padding-inline: 20px; }
  body[data-ui="aura"] .aura-shell header > .flex > .flex:last-of-type { gap: 8px; }
  body[data-ui="aura"] .aura-shell header .border-l { gap: 6px; padding-left: 8px; }
  body[data-ui="aura"] .aura-shell header .border-l > span { max-width: 110px; }
}

@media (max-width: 899px) {
  body[data-ui="aura"] .aura-login { grid-template-columns: 1fr; }
  body[data-ui="aura"] .aura-login-story { display: none; }
  body[data-ui="aura"] .aura-login > .max-w-sm { grid-column: 1; width: calc(100% - 48px); margin: 88px auto 40px; }
  body[data-ui="aura"] .aura-login > .aura-theme-toggle { top: 24px; right: 24px; }
}

@media (max-width: 767px) {
  body[data-ui="aura"] .aura-shell > aside[class~="w-[230px]"] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(256px, calc(100vw - 64px));
    z-index: 50;
    box-shadow: 12px 0 40px #03191638;
  }
  /* Expanded drawer leaves a 64px strip with the existing close toggle visible. */
  body[data-ui="aura"] .aura-shell:has(> aside[class~="w-[230px]"]) header { position: static; z-index: auto; }
  body[data-ui="aura"] .aura-shell:has(> aside[class~="w-[230px]"]) header button[title="Toggle sidebar"] {
    position: fixed;
    top: 18px;
    left: min(266px, calc(100vw - 54px));
    background: rgb(var(--aura-raised));
    box-shadow: 0 2px 12px #082d2c1a;
    z-index: 61;
  }
  body[data-ui="aura"] .aura-shell header > .flex { padding: 14px 16px; gap: 8px; flex-wrap: wrap; }
  body[data-ui="aura"] .aura-shell header > .flex > .flex { flex-wrap: wrap; gap: 8px; }
  body[data-ui="aura"] .aura-shell header > .flex > .flex:last-of-type { margin-left: auto; }
  body[data-ui="aura"] .aura-shell header select { max-width: 132px; }
  body[data-ui="aura"] .aura-shell main > .view-enter { padding: 24px 16px 32px; }
  body[data-ui="aura"] .view-enter > :first-child:is(.mb-5, .mb-6) { margin-bottom: 22px; gap: 14px; }
  body[data-ui="aura"] .view-enter > :first-child > .flex { width: 100%; }
  body[data-ui="aura"] .view-enter > .bg-gplug-ink.p-4 { padding: 16px; }
  body[data-ui="aura"] .view-enter .bg-gplug-ink.border:is(.p-5, .p-6) { padding: 18px; }
  body[data-ui="aura"] .view-enter .fixed.shadow-2xl {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: 16px;
    width: auto;
    max-height: min(60dvh, 520px);
  }
  body[data-ui="aura"] .view-enter .fixed.shadow-lg { right: 16px; bottom: 16px; }
  body[data-ui="aura"] #gplug-map { min-height: max(340px, 55dvh); }
}

@media (max-width: 479px) {
  body[data-ui="aura"] .aura-shell > aside[class~="w-[60px]"] { width: 64px; }
  body[data-ui="aura"] .aura-shell > aside[class~="w-[60px]"] > :first-child { padding-inline: 12px; }
  body[data-ui="aura"] .aura-shell > aside[class~="w-[60px]"] nav { padding-inline: 10px; }
  body[data-ui="aura"] .aura-shell > aside[class~="w-[60px]"] nav > button { padding-inline: 6px; }
  body[data-ui="aura"] .aura-shell header > .flex { padding-inline: 12px; }
  body[data-ui="aura"] .aura-shell header > .flex > .flex:last-of-type { justify-content: flex-end; }
  body[data-ui="aura"] .aura-shell header .border-l { padding-left: 0; border-left: 0; }
  body[data-ui="aura"] .aura-shell header select { max-width: 120px; font-size: 12px; }
  body[data-ui="aura"] .aura-shell main > .view-enter { padding: 20px 12px 28px; }
  body[data-ui="aura"] .view-enter form .grid-cols-2 { grid-template-columns: 1fr; }
  body[data-ui="aura"] .view-enter .bg-gplug-ink > .border-t.flex { padding-inline: 12px; }
  body[data-ui="aura"] .view-enter .bg-gplug-ink > .border-t.flex > .flex { gap: 6px; }
  body[data-ui="aura"] .view-enter .bg-gplug-ink > .border-t.flex button { padding-inline: 10px; }
  body[data-ui="aura"] .view-enter .flex > .w-32 { width: 80px; }
  body[data-ui="aura"] .view-enter .flex > .w-16.text-right { width: 44px; }
  body[data-ui="aura"] .aura-login h2 { font-size: 27px; }
  body[data-ui="aura"] .aura-login input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui="aura"] *,
  body[data-ui="aura"] *::before,
  body[data-ui="aura"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  body[data-ui="aura"] .view-enter .bg-gplug-ink.border,
  body[data-ui="aura"] .aura-theme-toggle,
  body[data-ui="aura"] input:not([type="checkbox"]):not([type="radio"]),
  body[data-ui="aura"] select { border-width: 2px; border-color: rgb(var(--aura-muted)); }
  body[data-ui="aura"] .aura-shell > aside { border-right: 2px solid #a6c4b5; }
  body[data-ui="aura"] .aura-shell > aside nav > button { font-weight: 650; }
}