:root {
  --ink: #17201d;
  --ink-soft: #36433e;
  --muted: #6f7b76;
  --paper: #f4f2ec;
  --paper-deep: #ebe7dd;
  --card: #fffefb;
  --line: rgba(23, 32, 29, .11);
  --accent: #176b5b;
  --accent-dark: #0f4e43;
  --accent-pale: #e5f0ec;
  --sand: #d6c5a7;
  --danger: #a43d37;
  --shadow-sm: 0 10px 30px rgba(20, 33, 29, .07);
  --shadow: 0 24px 70px rgba(20, 33, 29, .12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 4%, rgba(23,107,91,.08), transparent 25rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
h1, h2, h3 {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: .2em 0;
}
.container { width: min(1120px, calc(100% - 36px)); margin: auto; }

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(22px, calc((100vw - 1120px) / 2));
  position: sticky;
  top: 0;
  z-index: 30;
  color: var(--ink);
  background: rgba(244,242,236,.86);
  border-bottom: 1px solid rgba(23,32,29,.08);
  backdrop-filter: blur(18px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.01em; }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 12px; background: var(--accent); color: white;
  box-shadow: 0 8px 20px rgba(23,107,91,.22);
}
.topbar nav { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 650; }
.topbar nav a { padding: 9px 12px; border-radius: 10px; }
.topbar nav a:hover { background: rgba(23,107,91,.08); color: var(--accent-dark); }

.hero {
  min-height: min(680px, calc(100vh - 72px));
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.35), transparent 22%),
    linear-gradient(135deg, #264f4b 0%, #6f9890 43%, #aeb5a3 64%, #d2c3a5 100%);
}
.hero.has-image { background-size: cover; background-position: center; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,24,20,.7) 0%, rgba(8,24,20,.22) 60%, rgba(8,24,20,.04) 100%),
    linear-gradient(to top, rgba(8,24,20,.72), transparent 68%);
}
.hero::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 140px; z-index: -1;
  background: linear-gradient(to bottom, transparent, rgba(8,24,20,.18));
}
.hero-content { color: white; width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 112px 0 74px; }
.hero-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.hero-kicker::before { content: ""; width: 42px; height: 1px; background: rgba(255,255,255,.62); }
.hero h1 { font-size: clamp(4rem, 10vw, 8.3rem); margin: 0; max-width: 900px; }
.hero-subtitle { font-size: clamp(1rem, 2vw, 1.25rem); max-width: 570px; margin: 18px 0 0; color: rgba(255,255,255,.86); }
.eyebrow { text-transform: uppercase; letter-spacing: .19em; font-size: .72rem; font-weight: 800; color: var(--accent); margin: 0; }
.eyebrow.light { color: rgba(255,255,255,.76); }
.stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 38px; }
.stats span { min-width: 100px; border-left: 1px solid rgba(255,255,255,.45); padding-left: 14px; color: rgba(255,255,255,.78); font-size: .82rem; }
.stats strong { display: block; color: #fff; font-size: 1.65rem; line-height: 1.1; font-weight: 750; }
.scroll-hint { display: inline-flex; align-items: center; gap: 9px; margin-top: 34px; color: rgba(255,255,255,.72); font-size: .83rem; }
.scroll-hint span { width: 25px; height: 36px; border: 1px solid rgba(255,255,255,.48); border-radius: 99px; position: relative; }
.scroll-hint span::after { content: ""; width: 3px; height: 7px; border-radius: 3px; background: white; position: absolute; left: 10px; top: 7px; animation: scrollDot 1.8s infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }

.journey-intro { padding: 78px 0 0; display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: start; }
.journey-intro h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.journey-intro p { color: var(--ink-soft); font-size: 1.05rem; margin: 8px 0 0; }

.timeline { padding: 58px 0 100px; display: grid; gap: 44px; }
.timeline-card {
  position: relative;
  min-height: 400px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: minmax(320px, 48%) 1fr;
  transition: transform .25s ease, box-shadow .25s ease;
}
.timeline-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.timeline-card:nth-child(even) .cover { order: 2; }
.cover { min-height: 400px; position: relative; overflow: hidden; background: linear-gradient(145deg, #dbe6e1, #c9bda7); }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.timeline-card:hover .cover img { transform: scale(1.025); }
.cover-placeholder { height: 100%; min-height: 400px; display: grid; place-items: center; font-size: 5rem; opacity: .72; }
.day-badge { position: absolute; top: 20px; left: 20px; z-index: 3; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 8px 13px; font-weight: 800; font-size: .78rem; box-shadow: 0 10px 30px rgba(0,0,0,.13); backdrop-filter: blur(10px); }
.card-body { padding: 46px; display: flex; flex-direction: column; justify-content: center; }
.card-body h2 { font-size: clamp(2rem, 3.5vw, 3.15rem); margin: 11px 0 15px; }
.card-body h2 a:hover { color: var(--accent); }
.meta { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 750; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 17px; }
.chips span { background: var(--accent-pale); border: 1px solid rgba(23,107,91,.1); border-radius: 999px; padding: 6px 10px; font-size: .8rem; color: var(--accent-dark); }
.chips.large span { padding: 8px 13px; font-size: .86rem; }
.excerpt { white-space: pre-line; color: var(--ink-soft); margin: 0 0 23px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--accent); width: fit-content; }
.text-link::after { content: "→"; transition: transform .2s ease; }
.text-link:hover::after { transform: translateX(4px); }
.empty { text-align: center; padding: 100px 24px; background: rgba(255,255,255,.6); border-radius: 28px; border: 1px dashed rgba(23,107,91,.25); }
.empty-icon { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: var(--accent-pale); font-size: 2rem; }

.footer { text-align: center; padding: 34px 20px 46px; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); }
.footer strong { color: var(--ink-soft); }

/* Besucher-Anmeldeseite */
.login-page {
  --login-cover: none;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 64px 24px 88px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 76% 18%, rgba(232,241,235,.22), transparent 24%),
    linear-gradient(145deg, #143d35 0%, #376c62 44%, #8d9f91 72%, #c4b69d 100%);
}
.login-page.has-login-cover {
  background-image: var(--login-cover);
  background-size: cover;
  background-position: center;
}
.login-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,18,15,.32), rgba(5,18,15,.66)),
    radial-gradient(circle at 50% 38%, transparent 0, rgba(4,15,12,.16) 56%, rgba(4,15,12,.42) 100%);
  backdrop-filter: saturate(108%);
}
.login-content {
  width: min(760px, 100%);
  text-align: center;
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 30px;
  background: rgba(9,28,23,.34);
  box-shadow: 0 30px 90px rgba(0,0,0,.27);
  backdrop-filter: blur(20px) saturate(125%);
}
.login-brand-mark {
  width: 66px;
  height: 66px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: rgba(255,255,255,.11);
}
.login-brand-mark svg { width: 40px; height: 40px; }
.login-kicker {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .7rem;
  font-weight: 800;
  color: rgba(255,255,255,.72);
}
.login-content h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(3.7rem, 11vw, 7.4rem);
  line-height: .95;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.login-subtitle {
  margin: 20px auto 0;
  max-width: 560px;
  font-size: clamp(1rem, 2vw, 1.22rem);
  color: rgba(255,255,255,.82);
}
.login-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px 26px;
  margin: 32px auto 0;
  color: rgba(255,255,255,.7);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.login-stats span { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.28); }
.login-stats span:first-child { padding-left: 0; border-left: 0; }
.login-stats strong { display: block; color: #fff; font-size: 1.32rem; line-height: 1.15; letter-spacing: 0; }
.login-form { margin: 38px auto 0; max-width: 580px; text-align: left; }
.login-form label { color: rgba(255,255,255,.78); margin: 0 0 9px; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }
.login-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 42px rgba(0,0,0,.2);
}
.login-input-row input {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 12px 13px;
}
.login-input-row input:focus { box-shadow: none; }
.login-input-row button {
  white-space: nowrap;
  border-radius: 12px;
  padding: 12px 19px;
  background: #176b5b;
  color: #fff;
}
.login-input-row button:hover { background: #0f5448; }
.login-input-row button span { margin-left: 7px; }
.login-alert {
  margin-top: 13px;
  padding: 11px 14px;
  border: 1px solid rgba(255,208,203,.42);
  border-radius: 12px;
  background: rgba(103,25,20,.68);
  color: #fff;
  text-align: center;
  font-size: .9rem;
}
.login-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  text-align: center;
  color: rgba(255,255,255,.58);
  font-size: .78rem;
  letter-spacing: .08em;
}

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); background: #143d35; }
.auth-visual { position: relative; overflow: hidden; background: linear-gradient(145deg, #2d6b60, #8aa299 58%, #d5c5a6); }
.auth-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 18%, rgba(255,255,255,.34), transparent 25%), linear-gradient(to top, rgba(9,35,29,.65), transparent 60%); }
.auth-visual-content { position: absolute; inset: auto 8% 8%; color: white; z-index: 1; max-width: 620px; }
.auth-visual-content h2 { font-size: clamp(3.2rem, 7vw, 6.4rem); margin: 6px 0; }
.auth-panel { background: var(--paper); display: grid; place-items: center; padding: 40px; }
.auth-card { width: min(430px, 100%); }
.auth-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: var(--accent); color: white; font-size: 1.65rem; box-shadow: 0 12px 30px rgba(23,107,91,.22); margin-bottom: 26px; }
.auth-card h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); margin: 9px 0 13px; }
.muted { color: var(--muted); }
.stack { display: grid; gap: 18px; margin-top: 29px; text-align: left; }
label { font-weight: 700; font-size: .86rem; display: grid; gap: 8px; color: var(--ink-soft); }
input, textarea { width: 100%; border: 1px solid rgba(23,32,29,.16); background: rgba(255,255,255,.88); border-radius: 13px; padding: 13px 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; min-height: 150px; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(23,107,91,.11); }
button, .button-link { border: 0; border-radius: 13px; padding: 13px 18px; background: var(--accent); color: white; font: inherit; font-weight: 800; cursor: pointer; text-align: center; transition: background .2s, transform .2s; }
button:hover, .button-link:hover { background: var(--accent-dark); transform: translateY(-1px); }
.alert { background: #fff0ef; color: #8b2c26; border: 1px solid #f0cbc7; border-radius: 13px; padding: 12px 14px; margin: 18px 0; text-align: left; }

.entry-hero { min-height: 520px; position: relative; display: flex; align-items: flex-end; background: linear-gradient(145deg, #2f6b61, #c9baa0); background-size: cover; background-position: center; isolation: isolate; }
.entry-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,24,20,.82), rgba(8,24,20,.08) 75%); }
.entry-hero-inner { color: white; width: min(940px, calc(100% - 36px)); margin: 0 auto; padding: 84px 0 56px; }
.entry-hero .back { color: rgba(255,255,255,.76); }
.entry-hero h1 { font-size: clamp(3rem, 8vw, 6rem); margin: 22px 0 18px; max-width: 900px; }
.entry-hero .eyebrow { color: rgba(255,255,255,.74); margin-top: 30px; }
.entry-hero .chips span { color: white; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.entry-page { padding: 58px 0 100px; max-width: 940px; }
.back { display: inline-flex; gap: 8px; color: var(--muted); font-weight: 750; }
.story { white-space: pre-line; font-family: ui-serif, Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.36rem); line-height: 1.9; margin: 0 auto 42px; max-width: 760px; color: #293630; }
.map-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--accent-pale); border: 1px solid rgba(23,107,91,.13); border-radius: 18px; padding: 19px 21px; margin: 34px auto 50px; max-width: 760px; transition: transform .2s, background .2s; }
.map-card:hover { transform: translateY(-2px); background: #dcebe6; }
.map-card span { color: var(--muted); font-size: .86rem; }
.gallery { columns: 2; column-gap: 16px; margin-top: 44px; }
.gallery a, .gallery video { break-inside: avoid; display: block; margin-bottom: 16px; border-radius: 18px; overflow: hidden; background: #ddd; box-shadow: var(--shadow-sm); }
.gallery a { cursor: zoom-in; }
.gallery img { width: 100%; border-radius: 18px; transition: transform .4s ease; }
.gallery a:hover img { transform: scale(1.018); }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; padding: 0; background: rgba(7,15,12,.94); }
.lightbox::backdrop { background: rgba(7,15,12,.94); }
.lightbox img { width: 100%; height: 100%; object-fit: contain; padding: 38px; }
.lightbox button { position: fixed; right: 20px; top: 20px; z-index: 2; border-radius: 99px; width: 46px; height: 46px; padding: 0; background: rgba(255,255,255,.15); font-size: 1.45rem; }

.admin-page { padding: 54px 0 100px; }
.admin-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.admin-header h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  color: var(--ink);
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 800;
}
.secondary-button:hover {
  background: white;
  color: var(--accent-dark);
}
button.secondary-button {
  color: var(--ink);
}
button.secondary-button:hover {
  color: var(--accent-dark);
}
.editor { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 32px; box-shadow: var(--shadow-sm); margin: 34px 0 58px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 19px; }
.wide { grid-column: 1 / -1; }
.upload-box { background: #f2f7f5; border: 1px dashed rgba(23,107,91,.35); border-radius: 16px; padding: 20px; }
.upload-box small { color: var(--muted); font-weight: 450; }
.editor > button { margin-top: 24px; min-width: 220px; }
.entries-list h2 { font-size: 2.3rem; }
.admin-entry { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 16px; padding: 17px 19px; margin: 11px 0; }
.admin-entry span { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }
.admin-actions { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: .88rem; }
.admin-actions form { margin: 0; }
.danger { background: transparent; color: var(--danger); padding: 7px 9px; }
.danger:hover { background: #fff0ef; color: var(--danger); transform: none; }
.button-link { display: inline-block; margin-top: 20px; }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { min-height: 100vh; padding: 28px; }
  .journey-intro { grid-template-columns: 1fr; gap: 12px; padding-top: 56px; }
  .timeline-card { grid-template-columns: 1fr; }
  .timeline-card:nth-child(even) .cover { order: initial; }
  .cover, .cover-placeholder { min-height: 310px; }
  .hero { min-height: 560px; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 24px, 1120px); }
  .topbar { height: 64px; padding: 0 14px; }
  .brand span { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .topbar nav a { padding: 8px 9px; }
  .hero { min-height: calc(100vh - 64px); }
  .hero-content { width: calc(100% - 28px); padding-bottom: 46px; }
  .hero h1 { font-size: clamp(3.7rem, 20vw, 5.4rem); }
  .stats { gap: 20px; }
  .scroll-hint { display: none; }
  .timeline { padding-top: 38px; gap: 25px; }
  .timeline-card { border-radius: 22px; min-height: 0; }
  .cover, .cover-placeholder { min-height: 255px; }
  .card-body { padding: 27px 23px 30px; }
  .card-body h2 { font-size: 2.15rem; }
  .day-badge { top: 14px; left: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .editor { padding: 21px 17px; border-radius: 20px; }
  .admin-header, .admin-entry, .map-card { align-items: flex-start; flex-direction: column; }
  .admin-entry { gap: 13px; }
  .gallery { columns: 1; }
  .entry-hero { min-height: 470px; }
  .entry-hero-inner { width: calc(100% - 28px); padding-bottom: 38px; }
  .entry-page { padding-top: 40px; }
  .lightbox img { padding: 15px; }
}

/* Interactive maps */
.travel-map {
  width: 100%;
  background: #dfe9e5;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  z-index: 0;
}
.route-section { padding: 10px 0 42px; }
.route-heading { display: grid; grid-template-columns: 1fr minmax(260px, .72fr); align-items: end; gap: 42px; margin-bottom: 24px; }
.route-heading h2, .entry-map-heading h2 { margin: 5px 0 0; font-size: clamp(2rem, 4vw, 3.4rem); }
.route-heading > p { color: var(--muted); margin: 0; }
.route-map { height: min(62vh, 590px); min-height: 390px; }
.entry-map-section { margin: 42px auto 58px; max-width: 860px; }
.entry-map-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.entry-map-heading a { color: var(--accent); font-weight: 800; white-space: nowrap; }
.entry-map { height: 430px; }
.location-picker-wrap { display: grid; gap: 13px; }
.picker-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.picker-heading span { color: var(--muted); font-size: .84rem; font-weight: 450; }
.location-picker { height: 390px; }
.leaflet-container { font-family: inherit; color: var(--ink); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--paper); }
.leaflet-popup-content { line-height: 1.55; }
.leaflet-popup-content a { color: var(--accent); font-weight: 800; }
.leaflet-control-attribution { font-size: 10px; }

@media (max-width: 860px) {
  .route-heading { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 620px) {
  .route-section { padding-top: 0; }
  .route-map { height: 390px; min-height: 0; border-radius: 18px; }
  .entry-map { height: 340px; border-radius: 18px; }
  .entry-map-heading, .picker-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .location-picker { height: 330px; border-radius: 16px; }
}

/* Synology media picker and route details */
.media-selector { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: #f7faf8; }
.media-selector-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.media-selector-head span { display:block; color:var(--muted); font-size:.84rem; font-weight:450; margin-top:3px; }
.selected-media { display:grid; gap:10px; margin-top:16px; }
.selected-item { display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center; background:white; border:1px solid var(--line); border-radius:14px; padding:8px; }
.selected-thumb { width:58px; height:48px; border-radius:10px; overflow:hidden; background:var(--accent-pale); display:grid; place-items:center; }
.selected-thumb img { width:100%; height:100%; object-fit:cover; }
.selected-item small { display:block; color:var(--muted); }
.selected-actions { display:flex; gap:5px; }
.selected-actions button { width:34px; height:34px; padding:0; border-radius:9px; background:var(--paper-deep); color:var(--ink); }
.selected-actions button:hover { background:var(--accent-pale); transform:none; }
.selected-actions button:disabled { opacity:.35; cursor:default; }
.media-picker-dialog { width:min(1180px,96vw); height:min(850px,94vh); padding:0; border:0; border-radius:24px; background:var(--paper); color:var(--ink); }
.media-picker-dialog::backdrop { background:rgba(7,18,15,.72); backdrop-filter:blur(4px); }
.media-picker-shell { height:100%; display:grid; grid-template-rows:auto auto auto 1fr auto; overflow:hidden; }
.media-picker-shell header, .media-picker-shell footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border-bottom:1px solid var(--line); }
.media-picker-shell footer { border-top:1px solid var(--line); border-bottom:0; }
.media-picker-shell h2 { margin:0; font-size:2.1rem; }
.close-dialog { width:42px; height:42px; border-radius:50%; padding:0; font-size:1.4rem; }
.media-toolbar { display:grid; grid-template-columns:1fr auto; gap:12px; padding:16px 24px 0; }
#media-status { padding:0 24px; margin:10px 0; }
.media-grid { overflow:auto; padding:8px 24px 24px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; align-content:start; }
.media-choice { position:relative; padding:0; overflow:hidden; border:3px solid transparent; border-radius:14px; background:#dfe8e4; aspect-ratio:1; color:white; }
.media-choice:hover { transform:none; }
.media-choice.selected { border-color:var(--accent); }
.media-choice img, .media-choice video { width:100%; height:100%; object-fit:cover; }
.media-choice small { position:absolute; inset:auto 0 0; padding:22px 8px 7px; background:linear-gradient(transparent,rgba(0,0,0,.72)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.choice-check { position:absolute; right:8px; top:8px; width:27px; height:27px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.48); }
.media-choice.selected .choice-check { background:var(--accent); }
.play-badge { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.55); }
.route-strip { display:grid; gap:0; margin:24px 0 0; }
.route-stop { display:grid; grid-template-columns:24px 1fr; gap:12px; min-height:58px; position:relative; }
.route-stop:not(:last-child)::before { content:""; position:absolute; left:7px; top:16px; bottom:-4px; width:2px; background:var(--accent-pale); }
.route-dot { width:16px; height:16px; border:4px solid var(--accent-pale); background:var(--accent); border-radius:50%; z-index:1; }
.route-stop small { display:block; color:var(--muted); }
.day-route { margin-top:16px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.day-route > * { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; }
.day-route > :last-child { text-align:right; }
.day-route span { color:var(--muted); font-size:.78rem; }
.current-stop { background:var(--accent-pale)!important; text-align:center; }
.video-tile { position:relative; break-inside:avoid; margin-bottom:16px; border-radius:18px; overflow:hidden; background:#111; box-shadow:var(--shadow-sm); }
.video-label { position:absolute; left:10px; top:10px; background:rgba(0,0,0,.58); color:white; border-radius:99px; padding:4px 9px; font-size:.75rem; }
.footer { text-align:center; padding:34px 20px; border-top:1px solid var(--line); color:var(--muted); font-weight:700; }
@media(max-width:620px){.media-selector-head,.media-toolbar{grid-template-columns:1fr;display:grid}.media-grid{grid-template-columns:repeat(2,1fr);padding-left:12px;padding-right:12px}.media-picker-shell header,.media-picker-shell footer{padding:14px}.day-route{grid-template-columns:1fr}.selected-item{grid-template-columns:48px 1fr}.selected-actions{grid-column:1/-1;justify-content:flex-end}}

@media (max-width: 680px) {
  .login-page { padding: 32px 15px 78px; align-items: center; }
  .login-content { padding: 30px 20px; border-radius: 24px; }
  .login-brand-mark { width: 58px; height: 58px; margin-bottom: 20px; }
  .login-stats { gap: 14px 18px; }
  .login-stats span { padding-left: 0; border-left: 0; min-width: 72px; }
  .login-input-row { grid-template-columns: 1fr; background: transparent; border: 0; padding: 0; box-shadow: none; }
  .login-input-row input { background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.32); padding: 15px; }
  .login-input-row button { min-height: 50px; }
}