:root {
  --bg: #0c0b09;
  --bg-deep: #070706;
  --surface: rgba(24, 22, 19, .78);
  --surface-solid: #171512;
  --surface-2: rgba(38, 34, 28, .72);
  --text: #f3efe7;
  --muted: #a9a196;
  --line: rgba(232, 190, 93, .18);
  --shadow: rgba(0, 0, 0, .55);
  --gold-1: #fff1a8;
  --gold-2: #e9b844;
  --gold-3: #8a5b13;
  --silver-1: #f4f3ef;
  --silver-2: #8d8a83;
  --bronze-1: #e8b780;
  --bronze-2: #7a4526;
  --radius: 24px;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  --bg: #e9e4dc;
  --bg-deep: #d7d0c5;
  --surface: rgba(250, 248, 244, .75);
  --surface-solid: #f6f2eb;
  --surface-2: rgba(225, 218, 207, .68);
  --text: #17130e;
  --muted: #6f685f;
  --line: rgba(117, 75, 13, .18);
  --shadow: rgba(74, 54, 31, .22);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 80% -10%, rgba(225, 170, 52, .16), transparent 34rem),
    radial-gradient(circle at -10% 60%, rgba(141, 94, 34, .12), transparent 36rem),
    linear-gradient(145deg, var(--bg-deep), var(--bg));
  color: var(--text);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.ambient {
  position: fixed; inset: auto; z-index: -1; pointer-events: none;
  filter: blur(70px); opacity: .35; border-radius: 50%;
}
.ambient-one { width: 22rem; height: 22rem; right: -8rem; top: 12rem; background: #b77713; }
.ambient-two { width: 18rem; height: 18rem; left: -7rem; bottom: 3rem; background: #614428; }

#app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}

.topbar {
  min-height: 88px; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px; position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(20px);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.brand { display: inline-flex; align-items: center; gap: 13px; color: var(--text); text-decoration: none; }
.brand-mark {
  width: 50px; height: 50px; border-radius: 15px; box-shadow: 0 9px 28px var(--shadow), 0 0 24px rgba(232,184,68,.18);
}
.brand-copy { display: grid; line-height: 1; gap: 7px; }
.brand-copy strong {
  font-size: 1.12rem; letter-spacing: .34em; padding-left: .34em;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3));
  color: transparent; background-clip: text; -webkit-background-clip: text;
}
.brand-copy small { font-size: .56rem; letter-spacing: .26em; color: var(--muted); }

.top-actions { display: flex; align-items: center; gap: 9px; }
.control, .avatar {
  border: 1px solid var(--line); color: var(--text); background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 24px var(--shadow);
  cursor: pointer;
}
.control { min-height: 42px; border-radius: 14px; padding: 0 14px; }
.icon-control { width: 42px; padding: 0; font-size: 1.08rem; }
.control-install { color: #171009; background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, #af741a); font-weight: 750; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #38322b, #171411); color: #f6d77b; font-weight: 750;
}

.panel {
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 40%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 80px var(--shadow);
  backdrop-filter: blur(24px);
}

.hero {
  min-height: 470px; border-radius: calc(var(--radius) + 8px); padding: clamp(28px, 5vw, 62px);
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; overflow: hidden; position: relative;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 64%, rgba(227,174,55,.08)),
    repeating-linear-gradient(120deg, transparent 0 45px, rgba(255,255,255,.012) 46px);
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .18em; color: var(--gold-2); }
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px;
  background: #61c98b; box-shadow: 0 0 12px rgba(97,201,139,.8);
}
h1 { margin: 17px 0 20px; font-size: clamp(2.5rem, 7vw, 5rem); line-height: .94; letter-spacing: -.055em; }
h1 span {
  background: linear-gradient(120deg, var(--gold-1), var(--gold-2) 43%, #7c4b0b 72%, var(--gold-1));
  background-size: 220% auto; color: transparent; background-clip: text; -webkit-background-clip: text;
  animation: sheen 7s linear infinite;
}
@keyframes sheen { to { background-position: 220% center; } }
.hero p { max-width: 600px; color: var(--muted); font-size: 1.04rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.primary-button, .secondary-button {
  min-height: 50px; padding: 0 22px; border-radius: 16px; cursor: pointer; font-weight: 800;
  border: 1px solid transparent; box-shadow: 0 12px 32px var(--shadow);
}
.primary-button { color: #1d1306; background: linear-gradient(180deg, #fff0a2, #e8b337 58%, #a56810); }
.secondary-button { color: var(--text); border-color: var(--line); background: var(--surface-2); }

.hero-visual { position: relative; min-height: 340px; display: grid; place-items: center; }
.logo-core {
  width: min(220px, 52vw); aspect-ratio: 1; border-radius: 31%;
  z-index: 3; box-shadow: 0 32px 80px rgba(0,0,0,.48), 0 0 55px rgba(237,183,56,.18);
  animation: hover 5s ease-in-out infinite;
}
.logo-core img { width: 100%; height: 100%; display: block; }
@keyframes hover { 50% { transform: translateY(-8px); } }
.orbital {
  position: absolute; width: 310px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(226,173,52,.22); transform: rotate(22deg);
}
.orbital::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; top: 17px; left: 78px; background: #efbd45; box-shadow: 0 0 18px #efbd45; }
.orbital-b { width: 390px; border-color: rgba(159,139,105,.13); transform: rotate(-16deg); }
.orbital-b::after { top: auto; bottom: 45px; left: auto; right: 34px; background: #afa79b; box-shadow: 0 0 18px #afa79b; }
.data-chip {
  position: absolute; z-index: 4; min-width: 78px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); box-shadow: 0 13px 35px var(--shadow); backdrop-filter: blur(12px);
}
.data-chip b { display: block; color: var(--gold-2); font-size: .92rem; }
.data-chip small { display: block; color: var(--muted); font-size: .52rem; letter-spacing: .12em; margin-top: 3px; }
.chip-a { top: 48px; right: 16px; }
.chip-b { bottom: 47px; right: 5px; }
.chip-c { left: 4px; bottom: 78px; }

.dashboard-section { padding: 70px 0 20px; scroll-margin-top: 80px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-heading h2 { margin: 7px 0 0; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.live-time { text-align: right; }
.live-time span { font-size: 1.65rem; font-weight: 750; letter-spacing: -.05em; }
.live-time small { display: block; margin-top: 3px; color: var(--muted); text-transform: capitalize; }

.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.module-card {
  --tone-a: #efc34f; --tone-b: #7b4c0e;
  position: relative; overflow: hidden; min-height: 136px; padding: 19px; display: grid;
  grid-template-columns: 58px 1fr 24px; gap: 15px; align-items: center; text-align: left;
  border: 1px solid color-mix(in srgb, var(--tone-a) 28%, transparent);
  border-radius: 22px; color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--tone-a) 12%, transparent), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.01)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 38px var(--shadow);
  cursor: pointer; transform: translateY(0); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  animation: card-in .55s both; animation-delay: var(--delay);
}
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
.module-card:hover, .module-card:focus-visible {
  transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone-a) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 23px 50px var(--shadow), 0 0 35px color-mix(in srgb, var(--tone-a) 10%, transparent);
  outline: none;
}
.module-glow { position: absolute; inset: auto -38px -56px auto; width: 120px; height: 120px; border-radius: 50%; background: var(--tone-a); filter: blur(60px); opacity: .11; }
.module-icon {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; font-size: 1.65rem;
  color: var(--tone-a); border: 1px solid color-mix(in srgb, var(--tone-a) 45%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone-a) 18%, transparent), rgba(0,0,0,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 25px rgba(0,0,0,.18);
}
.module-copy { min-width: 0; }
.module-copy strong { display: block; font-size: 1.04rem; }
.module-copy small { display: block; margin-top: 7px; color: var(--muted); line-height: 1.35; }
.module-arrow { color: var(--tone-a); font-size: 2rem; font-weight: 200; }
.tone-emerald { --tone-a: #64d69a; --tone-b: #1c6c47; }
.tone-blue { --tone-a: #75b7ff; --tone-b: #2f5e94; }
.tone-copper { --tone-a: #eea15c; --tone-b: #8a4720; }
.tone-violet { --tone-a: #aa91f4; --tone-b: #5c438c; }
.tone-red { --tone-a: #ef7773; --tone-b: #8d3535; }
.tone-silver { --tone-a: #d4d0c8; --tone-b: #716d67; }

.status-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 28px 0 42px; }
.status-card { min-height: 85px; padding: 15px; border-radius: 19px; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; }
.status-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: var(--gold-2); background: rgba(234,184,68,.08); border: 1px solid var(--line); }
.status-card small { color: var(--muted); font-size: .58rem; letter-spacing: .12em; }
.status-card strong { display: block; margin-top: 4px; font-size: .88rem; }
.metal-tag { border-radius: 999px; padding: 7px 9px; font-size: .56rem; font-weight: 850; letter-spacing: .1em; color: #17110a; }
.metal-tag.gold { background: linear-gradient(180deg, #fff1ad, #dca32a); }
.metal-tag.silver { background: linear-gradient(180deg, #f4f2ed, #99948c); }
.metal-tag.bronze { background: linear-gradient(180deg, #efc09b, #9a5c31); }

footer {
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px;
  padding: 22px 2px 10px; color: var(--muted); font-size: .76rem;
}
.footer-brand b { letter-spacing: .14em; color: var(--gold-2); }

dialog {
  width: min(510px, calc(100% - 28px)); border: 1px solid var(--line); border-radius: 26px; padding: 34px;
  color: var(--text); background: var(--surface-solid); box-shadow: 0 40px 120px rgba(0,0,0,.68);
}
dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.dialog-close { position: absolute; right: 17px; top: 15px; border: 0; background: transparent; color: var(--muted); font-size: 1.7rem; cursor: pointer; }
.dialog-logo img { width: 74px; border-radius: 22px; margin-bottom: 22px; }
dialog h2 { font-size: 2rem; margin: 8px 0 14px; }
dialog p { color: var(--muted); line-height: 1.6; }
dialog dl { margin: 25px 0 0; }
dialog dl div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--line); }
dialog dt { color: var(--muted); }
dialog dd { margin: 0; text-align: right; }

.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 100;
  max-width: min(520px, calc(100% - 30px)); transform: translate(-50%, 25px); opacity: 0; pointer-events: none;
  border: 1px solid var(--line); border-radius: 16px; padding: 13px 17px; color: var(--text);
  background: var(--surface-solid); box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transition: .22s ease;
}
.toast.visible { transform: translate(-50%,0); opacity: 1; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { min-height: 330px; }
  .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .status-grid { grid-template-columns: 1fr; }
}
@media (max-width: 590px) {
  #app-shell { width: min(100% - 20px, 1180px); }
  .topbar { min-height: 72px; }
  .brand-mark { width: 43px; height: 43px; border-radius: 13px; }
  .brand-copy small { display: none; }
  .brand-copy strong { font-size: .92rem; }
  .control-install { width: 42px; padding: 0; font-size: 0; }
  .control-install span { font-size: 1.25rem; }
  .avatar { display: none; }
  .hero { padding: 28px 20px 24px; border-radius: 25px; }
  .hero p { font-size: .93rem; }
  .hero-visual { min-height: 280px; }
  .orbital { width: 245px; }
  .orbital-b { width: 300px; }
  .data-chip { min-width: 65px; }
  .module-grid { grid-template-columns: 1fr; gap: 12px; }
  .module-card { min-height: 112px; grid-template-columns: 52px 1fr 18px; padding: 15px; border-radius: 19px; }
  .module-icon { width: 52px; height: 52px; border-radius: 16px; }
  .section-heading { align-items: start; }
  .live-time span { font-size: 1.25rem; }
  .live-time small { max-width: 120px; }
  footer { flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}


/* ===== Modion Core 0.3.0: Authentication ===== */
[hidden] { display: none !important; }

.auth-screen {
  min-height: 100vh;
  width: min(100% - 24px, 1180px);
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
}

.auth-panel {
  width: min(520px, 100%);
  min-height: 620px;
  border-radius: 34px;
  padding: clamp(24px, 5vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.auth-panel::before {
  content: "";
  position: absolute;
  inset: -20% -35% auto auto;
  width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234,184,68,.22), transparent 68%);
  pointer-events: none;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.auth-logo {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  box-shadow: 0 18px 55px var(--shadow), 0 0 30px rgba(232,184,68,.16);
}

.auth-brand div { display: grid; gap: 7px; }
.auth-brand strong {
  letter-spacing: .28em;
  padding-left: .28em;
  font-size: 1.08rem;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 50%, var(--gold-3));
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.auth-brand small {
  color: var(--muted);
  font-size: .57rem;
  letter-spacing: .18em;
}

.auth-state,
.login-form {
  position: relative;
  z-index: 1;
  margin: 54px 0;
}

.auth-state { text-align: center; }
.auth-state h1,
.login-form h1 {
  margin: 13px 0 10px;
  font-size: clamp(2rem, 7vw, 3.2rem);
  letter-spacing: -.05em;
}
.auth-state p,
.login-form > p {
  color: var(--muted);
  line-height: 1.6;
}

.spinner {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  display: block;
  border: 3px solid rgba(234,184,68,.16);
  border-top-color: var(--gold-2);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.login-form { display: grid; gap: 17px; }
.login-form label { display: grid; gap: 8px; }
.login-form label > span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 0 16px;
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  outline: none;
  font: inherit;
}
.login-form input:focus {
  border-color: rgba(232,184,68,.62);
  box-shadow: 0 0 0 4px rgba(232,184,68,.10);
}
.login-form input::placeholder { color: color-mix(in srgb, var(--muted) 65%, transparent); }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 54px; }
.password-toggle {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  color: var(--gold-2);
  background: transparent;
  cursor: pointer;
}

.auth-submit { width: 100%; margin-top: 4px; }
.auth-submit:disabled { opacity: .65; cursor: wait; }

.text-button {
  border: 0;
  color: var(--gold-2);
  background: transparent;
  cursor: pointer;
  padding: 8px;
  font-weight: 700;
}

.form-error {
  border: 1px solid rgba(236,111,103,.35);
  border-radius: 14px;
  padding: 12px 14px;
  color: #ffd7d3;
  background: rgba(146,45,40,.22);
  line-height: 1.45;
  font-size: .88rem;
}
:root[data-theme="light"] .form-error {
  color: #7b1f1a;
  background: rgba(216,86,75,.12);
}

.auth-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: var(--muted);
  font-size: .67rem;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.profile-menu {
  position: absolute;
  right: 2px;
  top: 72px;
  width: min(300px, calc(100vw - 28px));
  z-index: 40;
  border-radius: 20px;
  padding: 18px;
  display: grid;
  gap: 9px;
}
.profile-menu strong { font-size: 1rem; }
.profile-menu > span:not(.metal-tag) { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.profile-menu .metal-tag { justify-self: start; margin: 4px 0 8px; }
.profile-menu .secondary-button { width: 100%; min-height: 43px; }

.empty-state {
  border-radius: 22px;
  padding: 28px;
  text-align: center;
}
.empty-state p { color: var(--muted); margin-bottom: 0; }

@media (max-width: 590px) {
  .auth-panel { min-height: calc(100vh - 24px); border-radius: 28px; padding: 26px 20px; }
  .auth-logo { width: 58px; height: 58px; border-radius: 18px; }
  .auth-state, .login-form { margin: 38px 0; }
  .auth-footer { flex-direction: column; gap: 6px; }
  .profile-menu { top: 64px; }
}


/* ===== Modion Core 0.4.0 – users, permissions, invitations ===== */
.auth-secondary {
  width: 100%;
  min-height: 50px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.admin-dialog,
.editor-dialog {
  width: min(1180px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 30px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 36px 100px rgba(0,0,0,.42);
}
.editor-dialog { width: min(780px, calc(100vw - 24px)); }
.small-editor { width: min(610px, calc(100vw - 24px)); }

.admin-dialog::backdrop,
.editor-dialog::backdrop {
  background: rgba(8,7,6,.72);
  backdrop-filter: blur(12px);
}

.admin-shell {
  padding: clamp(22px, 4vw, 38px);
}

.admin-header,
.editor-form > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.admin-header h2,
.editor-form h2 {
  margin: 7px 0 7px;
  font-size: clamp(1.7rem, 4vw, 2.65rem);
  letter-spacing: -.045em;
}
.admin-header p,
.editor-form > p {
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

.static-close {
  position: static;
  flex: 0 0 auto;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0;
}
.admin-stats article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  display: grid;
  gap: 5px;
}
.admin-stats small {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .12em;
}
.admin-stats strong {
  font-size: 1.7rem;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}
.admin-tab {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.admin-tab.active {
  color: #18130a;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 58%, var(--gold-3));
  box-shadow: 0 10px 30px rgba(191,129,16,.22);
}

.admin-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}
.admin-toolbar h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}
.admin-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
}
.compact-button {
  min-height: 44px;
  padding: 0 18px;
  white-space: nowrap;
}

.admin-list {
  display: grid;
  gap: 10px;
}
.admin-row {
  display: grid;
  grid-template-columns: 48px minmax(160px, 1fr) minmax(170px, auto) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}
.admin-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #171109;
  font-weight: 900;
  background: linear-gradient(145deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 9px 25px rgba(187,129,25,.2);
}
.invite-avatar { font-size: 1.25rem; }

.admin-primary {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.admin-primary strong,
.admin-primary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-primary span {
  color: var(--muted);
  font-size: .82rem;
}

.admin-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}
.admin-meta small { color: var(--muted); }
.row-actions { display: flex; gap: 8px; }
.row-action {
  min-height: 40px;
  padding: 0 14px;
}
.danger-action { color: #d76f65; }

.admin-empty {
  padding: 34px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 18px;
}

.editor-form {
  padding: clamp(22px, 4vw, 34px);
  display: grid;
  gap: 24px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.form-grid label,
.editor-form > label {
  display: grid;
  gap: 8px;
}
.form-grid label > span,
.editor-form > label > span,
.field-caption {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.span-2 { grid-column: 1 / -1; }

.editor-form input,
.editor-form select,
.editor-form textarea {
  width: 100%;
  min-height: 49px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  color: var(--text);
  background: var(--surface-2);
  outline: none;
  font: inherit;
}
.editor-form textarea {
  padding: 13px 14px;
  resize: vertical;
  line-height: 1.5;
}
.editor-form input:focus,
.editor-form select:focus,
.editor-form textarea:focus {
  border-color: rgba(232,184,68,.65);
  box-shadow: 0 0 0 4px rgba(232,184,68,.09);
}
.editor-form input[readonly] {
  opacity: .72;
  cursor: not-allowed;
}

.permission-grid {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.permission-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 180px;
  align-items: center;
  gap: 15px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.permission-row > span {
  display: grid;
  gap: 3px;
}
.permission-row small {
  color: var(--muted);
  font-size: .73rem;
}
.permission-row select {
  min-height: 40px;
}

.toggle-label {
  align-content: end;
  position: relative;
  grid-template-columns: 1fr auto !important;
  align-items: center;
  min-height: 49px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.toggle-label > span { color: var(--text) !important; }
.toggle-label input {
  width: 46px;
  height: 25px;
  min-height: 0;
  accent-color: var(--gold-2);
}
.toggle-label i { display: none; }

.editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.editor-actions button { min-height: 46px; }
.split-actions .action-spacer { flex: 1; }

@media (max-width: 760px) {
  .admin-dialog,
  .editor-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .admin-stats { grid-template-columns: 1fr 1fr 1fr; }
  .admin-toolbar { align-items: flex-start; flex-direction: column; }
  .compact-button { width: 100%; }
  .admin-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }
  .admin-meta {
    grid-column: 2 / -1;
    justify-items: start;
    text-align: left;
  }
  .admin-row > .row-action,
  .admin-row > .row-actions {
    grid-column: 1 / -1;
    width: 100%;
  }
  .row-actions .row-action { flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .permission-row { grid-template-columns: 1fr; }
  .editor-actions { flex-wrap: wrap; }
  .split-actions .action-spacer { display: none; }
  .editor-actions button { flex: 1 1 140px; }
}


/* ===== Modion Core 0.6.0 – evidence osob ===== */
.tone-teal .module-icon { color: #4ea99e; border-color: rgba(78,169,158,.35); }
.tone-teal .module-glow { background: radial-gradient(circle, rgba(78,169,158,.18), transparent 68%); }

.module-dialog { width: min(1240px, calc(100vw - 24px)); }
.registry-toolbar { align-items: end; }
.registry-search {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 220px;
  gap: 12px;
}
.registry-search label { display: grid; gap: 7px; }
.registry-search label > span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.registry-search input,
.registry-search select {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  color: var(--text);
  background: var(--surface-2);
  font: inherit;
  outline: none;
}
.registry-list { display: grid; gap: 11px; }
.registry-card {
  display: grid;
  grid-template-columns: 56px minmax(200px, 1.2fr) minmax(180px, .9fr) minmax(160px, .8fr) auto;
  gap: 15px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
}
.registry-card .admin-avatar { width: 56px; height: 56px; border-radius: 18px; }
.registry-main { min-width: 0; display: grid; gap: 4px; }
.registry-main strong { font-size: 1rem; }
.registry-main span,
.registry-column span { color: var(--muted); font-size: .8rem; }
.registry-main strong,
.registry-main span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.registry-column { display: grid; gap: 4px; min-width: 0; }
.registry-column b { font-size: .8rem; }
.registry-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.registry-actions { display: flex; gap: 8px; }
.registry-editor { width: min(900px, calc(100vw - 24px)); }
.editor-section { display: grid; gap: 14px; }
.editor-section h3 {
  margin: 0;
  font-size: .96rem;
  letter-spacing: -.01em;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
}
.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  font-size: .82rem;
  font-weight: 700;
}
.checkbox-grid input { width: 17px; height: 17px; min-height: 0; accent-color: var(--gold-2); }

@media (max-width: 850px) {
  .registry-search { grid-template-columns: 1fr; width: 100%; }
  .registry-card { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .registry-column { grid-column: 2 / -1; }
  .registry-actions { grid-column: 1 / -1; }
  .registry-actions button { flex: 1; }
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
}


/* ===== Modion Core 0.6.0 – evidence vozidel ===== */
.four-stats { grid-template-columns: repeat(4, 1fr); }
.vehicle-photo {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface);
}
.vehicle-photo-placeholder {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: #171109;
  background: linear-gradient(145deg, #ffd585, #c9782d);
}
.odometer { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .four-stats { grid-template-columns: 1fr 1fr; }
}


/* ===== Modion Core 0.7.0 – přesměrování firemní linky ===== */
.tone-magenta .module-icon { color: #b1487c; border-color: rgba(177,72,124,.34); }
.tone-magenta .module-glow { background: radial-gradient(circle, rgba(177,72,124,.18), transparent 68%); }
.forwarding-dialog { width: min(1180px, calc(100vw - 24px)); }
.forwarding-stats article strong { font-size: clamp(1rem, 2.3vw, 1.55rem); }
.forwarding-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(227,164,37,.45);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,219,132,.18), rgba(255,255,255,.03));
}
.forwarding-warning[hidden] { display: none; }
.forwarding-warning div { display: grid; gap: 4px; }
.forwarding-warning span { color: var(--muted); font-size: .82rem; }
.forwarding-control-card,
.forwarding-history-section {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
}
.forwarding-card-head,
.section-row,
.forwarding-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.forwarding-card-head h3,
.forwarding-history-section h3 { margin: 4px 0 0; font-size: 1.25rem; }
.forwarding-form { display: grid; gap: 18px; }
.forwarding-code-preview {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 78px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}
.forwarding-code-preview span,
.forwarding-line-meta span,
.forwarding-command-status span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.forwarding-code-preview code {
  font: 800 .98rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--gold-2);
}
.forwarding-line-meta { display: grid; gap: 4px; }
.forwarding-history-card {
  grid-template-columns: 48px minmax(190px, 1fr) minmax(150px, .8fr) minmax(130px, .7fr);
}
.forwarding-history-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ffdc88, #a96808);
  color: #1c1306;
  font-size: 1.2rem;
  font-weight: 900;
}
.forwarding-command-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.relay-result {
  padding: 13px 14px;
  border-radius: 13px;
  background: rgba(81,174,116,.12);
  color: var(--text);
  font-size: .84rem;
}
.section-help { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
@media (max-width: 760px) {
  .forwarding-card-head,
  .forwarding-submit-row,
  .forwarding-warning { align-items: stretch; flex-direction: column; }
  .forwarding-submit-row button,
  .forwarding-warning button { width: 100%; }
  .forwarding-history-card { grid-template-columns: 48px minmax(0, 1fr); }
  .forwarding-history-card .registry-column { grid-column: 2; }
}


/* MODION LeoTaxi Core 0.8.0 */
.auth-screen{
  position:relative;isolation:isolate;
}
.auth-screen::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 68% 20%,rgba(239,188,67,.16),transparent 27rem),
    radial-gradient(circle at 20% 82%,rgba(122,72,24,.12),transparent 31rem),
    linear-gradient(145deg,#070706,#100e0b 55%,#070706)
}
.auth-screen::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.12;
  background-image:linear-gradient(rgba(232,190,93,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(232,190,93,.045) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 50% 50%,black,transparent 78%)
}
.auth-panel{
  position:relative;overflow:hidden;
  background:
    linear-gradient(125deg,rgba(255,255,255,.055),transparent 24% 78%,rgba(232,184,68,.025)),
    rgba(22,20,17,.92);
  border-color:rgba(237,190,80,.25);
}
.auth-panel::before{
  content:"";position:absolute;left:-25%;right:-25%;top:-110px;height:170px;
  background:linear-gradient(90deg,transparent,rgba(255,224,133,.09),transparent);transform:rotate(-7deg);pointer-events:none
}
.auth-wordmark{filter:drop-shadow(0 0 20px rgba(229,178,58,.15))}
.boot-state{padding:8px 0 2px}
.boot-progress{height:5px;border-radius:10px}
.boot-progress i{box-shadow:0 0 14px rgba(233,184,68,.45)}
.boot-checks span{transition:.3s ease}
.boot-checks span.done{border-color:rgba(100,214,154,.23)}
.boot-error{padding:20px 0}
.login-form{animation:authFormIn .38s ease both}
@keyframes authFormIn{from{opacity:0;transform:translateY(8px)}}
.login-form input{
  background:linear-gradient(145deg,rgba(5,5,4,.75),rgba(31,27,22,.72));
  border:1px solid rgba(232,190,93,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}
.login-form input:focus{border-color:rgba(240,194,74,.65);box-shadow:0 0 0 3px rgba(232,184,68,.10),inset 0 1px 0 rgba(255,255,255,.04)}
.primary-button{background:linear-gradient(180deg,#fff2ad 0,#e6b33c 56%,#9b6212 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 14px 36px rgba(0,0,0,.36)}
.secondary-button,.control,.avatar{background:linear-gradient(145deg,rgba(54,47,38,.82),rgba(18,16,13,.9))}
.panel{
  border-color:rgba(232,190,93,.20);
  background:
    linear-gradient(145deg,rgba(255,255,255,.052),transparent 42%),
    linear-gradient(160deg,rgba(31,27,22,.84),rgba(17,15,12,.80));
}
.logo-core{overflow:hidden;border:1px solid rgba(245,204,92,.25)}
.logo-core::after{
  content:"";position:absolute;inset:-30% auto -30% -45%;width:26%;transform:skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(255,245,205,.30),transparent);animation:coreSheen 6.5s ease-in-out infinite
}
@keyframes coreSheen{0%,70%{left:-45%;opacity:0}80%{opacity:.8}94%{left:125%;opacity:0}100%{left:125%;opacity:0}}
.module-card{backdrop-filter:blur(14px)}
.module-card::after{
  content:"";position:absolute;left:-30%;right:-30%;top:-60px;height:80px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,240,185,.10),transparent);transform:rotate(-8deg);transition:.4s
}
.module-card:hover::after{top:145px;opacity:1}
.topbar{background:linear-gradient(180deg,rgba(12,11,9,.87),rgba(12,11,9,.52))}
.profile-menu{border-color:rgba(234,188,75,.24)}
@media(max-width:590px){
  .auth-brand{align-items:flex-start}
  .auth-brand>div{max-width:130px}
  .auth-wordmark{width:180px}
  .panel,.topbar{backdrop-filter:none}
  .ambient{filter:blur(45px);opacity:.22}
  .hero-visual{min-height:285px}
  .orbital-b{display:none}
  .module-card{backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}


/* Modion 0.8.1 – stav propojení osoby a účtu */
.registry-account-state { display: grid; gap: 5px; margin-top: 5px; justify-items: start; }
.registry-account-state small { color: var(--muted); font-size: .7rem; line-height: 1.3; }
.metal-tag.teal { color: #9fe8df; border-color: rgba(78,169,158,.45); background: rgba(78,169,158,.12); }
.metal-tag.danger { color: #ffb7b7; border-color: rgba(220,80,80,.45); background: rgba(220,80,80,.12); }


/* Pohyb řidičů 0.8.2 */
.tracking-dialog { width: min(1380px, calc(100vw - 20px)); }
.tracking-stats strong { font-size: clamp(1.4rem, 3vw, 2.25rem); }
.tracking-own-card { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:18px 0; padding:20px; border-radius:20px; border:1px solid rgba(117,183,255,.24); background:linear-gradient(145deg,rgba(42,64,89,.45),rgba(19,22,27,.72)); }
.tracking-own-card h3 { margin:5px 0 6px; font-size:1.25rem; }
.tracking-own-card p { margin:0; color:var(--muted); }
.tracking-own-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; }
.tracking-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,.85fr); gap:18px; align-items:stretch; }
.tracking-map-card,.tracking-list-card { position:relative; min-height:530px; border:1px solid rgba(117,183,255,.18); border-radius:22px; overflow:hidden; background:rgba(12,14,18,.72); }
.tracking-map { height:530px; width:100%; background:#111820; }
.tracking-map-placeholder { position:absolute; inset:0; z-index:500; display:grid; place-items:center; padding:30px; text-align:center; color:var(--muted); background:linear-gradient(145deg,#151a21,#0d1015); }
.tracking-map-placeholder[hidden] { display:none; }
.tracking-list-card { padding:18px; overflow:auto; }
.tracking-list { display:grid; gap:11px; margin-top:14px; }
.tracking-driver { padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.035); }
.tracking-driver-head { display:grid; grid-template-columns:13px 1fr auto; gap:11px; align-items:center; }
.tracking-driver-head div { display:grid; gap:3px; }
.tracking-driver-head small { color:var(--muted); }
.tracking-driver-head em { font-style:normal; font-size:.68rem; font-weight:900; letter-spacing:.08em; padding:6px 8px; border-radius:999px; color:#111; background:#8b8b8b; }
.tracking-driver-dot { width:11px; height:11px; border-radius:50%; background:#8b8b8b; box-shadow:0 0 16px currentColor; }
.tracking-driver.state-online .tracking-driver-dot,.tracking-driver.state-online .tracking-driver-head em { background:#54d69a; }
.tracking-driver.state-stale .tracking-driver-dot,.tracking-driver.state-stale .tracking-driver-head em { background:#efb84f; }
.tracking-driver-meta { display:flex; flex-wrap:wrap; gap:8px 13px; margin-top:11px; padding-left:24px; color:var(--muted); font-size:.78rem; }
.tracking-driver-meta a { color:#75b7ff; font-weight:800; text-decoration:none; }
.tracking-note { margin:16px 0 0; color:var(--muted); font-size:.82rem; line-height:1.55; }
.tracking-dialog .leaflet-container { font-family:inherit; }
.tracking-dialog .leaflet-popup-content-wrapper,.tracking-dialog .leaflet-popup-tip { background:#1b1e24; color:#f4efe5; }
@media(max-width:900px){.tracking-layout{grid-template-columns:1fr}.tracking-list-card{min-height:auto;max-height:430px}.tracking-own-card{align-items:flex-start;flex-direction:column}.tracking-own-actions{justify-content:flex-start}.tracking-map,.tracking-map-card{height:430px;min-height:430px}}
@media(max-width:560px){.tracking-map,.tracking-map-card{height:360px;min-height:360px}.tracking-list-card{padding:13px}.tracking-own-actions{display:grid;width:100%}.tracking-own-actions button{width:100%;margin:4px 0}}


/* MODION 0.8.9 – stabilní jednoduchá mapa Pohybu řidičů */
.tracking-map-card {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 430px;
  min-height: 320px;
  overflow: hidden;
  border-radius: 20px;
  background: #11130f;
}

.tracking-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 320px;
  z-index: 1;
}

.tracking-map-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: #11130f;
}

.tracking-map-placeholder[hidden] {
  display: none !important;
}

/* Globální pravidla obrázků nesmí deformovat dlaždice Leafletu. */
.leaflet-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px;
  font-family: inherit;
  background: #d9e2d3;
  overflow: hidden;
}

.leaflet-container img,
.leaflet-container .leaflet-tile,
.leaflet-container .leaflet-marker-icon,
.leaflet-container .leaflet-marker-shadow {
  max-width: none !important;
  max-height: none !important;
  width: auto;
  height: auto;
}

.leaflet-tile {
  visibility: inherit !important;
  opacity: 1;
}

.leaflet-pane,
.leaflet-map-pane,
.leaflet-tile-pane {
  transform-origin: 0 0;
}

.leaflet-control-attribution {
  font-size: 10px;
}

@media (max-width: 800px) {
  .tracking-map-card {
    height: 360px;
    min-height: 300px;
  }

  .tracking-map,
  .leaflet-container {
    min-height: 300px;
  }
}


/* MODION 0.9.0 – jednoduchá orientační mapa bez Leafletu */
.tracking-map-card {
  position: relative;
  width: 100%;
  height: 430px;
  min-height: 320px;
  overflow: hidden;
  border-radius: 20px;
  background: #dce5d7;
}

.tracking-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.simple-driver-map-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #dce5d7;
  pointer-events: none;
}

.simple-driver-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: #54d69a;
  color: #07140e;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.36);
}

.simple-driver-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 16px;
  height: 16px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.simple-driver-marker.state-stale {
  background: #efb84f;
}

.simple-driver-marker.state-inactive {
  background: #8b8b8b;
  color: #fff;
}

.simple-driver-map-label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 5;
  display: grid;
  gap: 3px;
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px;
  background: rgba(16,18,15,.88);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.simple-driver-map-label span {
  color: #c9c4b8;
  font-size: 12px;
}

.tracking-driver {
  cursor: pointer;
}

.tracking-driver.is-selected {
  border-color: rgba(238,190,67,.75);
  box-shadow: 0 0 0 2px rgba(238,190,67,.18);
}

.tracking-show-map {
  padding: 0;
  border: 0;
  background: transparent;
  color: #73adff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 800px) {
  .tracking-map-card {
    height: 350px;
    min-height: 290px;
  }

  .simple-driver-marker {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }
}


/* MODION 0.9.2 – profil a odhlášení na mobilu */
@media (max-width: 590px) {
  .top-actions {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Původní verze avatar na mobilu schovávala. */
  .avatar {
    display: grid !important;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    position: relative;
    z-index: 1002;
    touch-action: manipulation;
  }

  .profile-menu {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    z-index: 1001 !important;
    padding: 18px;
    border-radius: 20px;
  }

  .profile-menu .secondary-button {
    min-height: 48px;
    font-size: 1rem;
    touch-action: manipulation;
  }

  #logout-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ===== MODION 0.9.8 HOTFIX – čitelná aktivace pozvánky / přihlášení =====
   Autentizační obrazovka je záměrně světlá na Androidu i iOS bez ohledu
   na tmavý vzhled samotné aplikace. Oprava přepisuje starý blok Core 0.8.0,
   který natvrdo vracel auth panel a vstupy do tmavého režimu. ===== */

#auth-screen::before {
  background:
    radial-gradient(circle at 72% 18%, rgba(219, 168, 47, .16), transparent 28rem),
    radial-gradient(circle at 18% 82%, rgba(161, 111, 43, .10), transparent 30rem),
    linear-gradient(145deg, #f8f4ec, #eee7dc 55%, #e7dfd2) !important;
}

#auth-screen::after {
  opacity: .09 !important;
  background-image:
    linear-gradient(rgba(126, 89, 30, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 89, 30, .08) 1px, transparent 1px) !important;
}

#auth-screen .auth-panel {
  color: #17130e !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(248,244,236,.94)),
    #f7f2e9 !important;
  border-color: rgba(151, 104, 26, .28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 28px 75px rgba(73, 52, 24, .20) !important;
}

#auth-screen .auth-panel::before {
  background:
    linear-gradient(90deg, transparent, rgba(194, 139, 31, .10), transparent) !important;
}

#auth-screen .auth-state h1,
#auth-screen .login-form h1 {
  color: #17130e !important;
}

#auth-screen .auth-state p,
#auth-screen .login-form > p,
#auth-screen .login-form label > span,
#auth-screen .auth-footer,
#auth-screen .auth-divider {
  color: #625b52 !important;
}

#auth-screen .login-form input {
  color: #17130e !important;
  -webkit-text-fill-color: #17130e !important;
  caret-color: #17130e !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(144, 99, 28, .28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 15px rgba(76, 54, 23, .05) !important;
  color-scheme: light !important;
  opacity: 1 !important;
}

#auth-screen .login-form input:focus {
  color: #17130e !important;
  -webkit-text-fill-color: #17130e !important;
  background: #ffffff !important;
  border-color: rgba(194, 139, 31, .78) !important;
  box-shadow: 0 0 0 4px rgba(216, 161, 44, .16) !important;
}

#auth-screen .login-form input::placeholder {
  color: #8b8378 !important;
  -webkit-text-fill-color: #8b8378 !important;
  opacity: 1 !important;
}

/* iPhone/Safari autofill a one-time-code nesmí přepsat text na nečitelnou barvu. */
#auth-screen input:-webkit-autofill,
#auth-screen input:-webkit-autofill:hover,
#auth-screen input:-webkit-autofill:focus,
#auth-screen input:-webkit-autofill:active {
  -webkit-text-fill-color: #17130e !important;
  caret-color: #17130e !important;
  -webkit-box-shadow: 0 0 0 1000px #fffdf8 inset !important;
  box-shadow: 0 0 0 1000px #fffdf8 inset !important;
  transition: background-color 9999s ease-out 0s;
}

#auth-screen .secondary-button {
  color: #2d251b !important;
  background: linear-gradient(145deg, #f8f2e8, #e8dfd1) !important;
  border-color: rgba(144, 99, 28, .22) !important;
}

#auth-screen .text-button {
  color: #95620f !important;
}

#auth-screen .form-error {
  color: #7b1f1a !important;
  background: rgba(216,86,75,.10) !important;
  border-color: rgba(184, 54, 44, .28) !important;
}

#auth-screen .auth-footer {
  border-top-color: rgba(117, 75, 13, .16) !important;
}

#auth-screen .password-toggle {
  color: #8e5d0c !important;
}