.mayer-portal {
  --mayer-portal-bg: linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%);
  --mayer-portal-surface: #ffffff;
  --mayer-portal-text: #17212b;
  --mayer-portal-muted: #5f6b76;
  --mayer-portal-border: #dbe3ec;
  --mayer-portal-shadow: 0 8px 26px rgba(16, 33, 54, 0.08);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px;
  background: var(--mayer-portal-bg);
  overflow-x: clip;
}

.mayer-portal * {
  box-sizing: border-box;
}

.mayer-portal .mayer-portal-app {
  width: min(100%, 720px);
  margin: 0 auto;
}

.mayer-portal .mayer-portal-shell {
  padding: 18px 14px;
  border-radius: 24px;
  background: var(--mayer-portal-surface);
  border: 1px solid var(--mayer-portal-border);
  box-shadow: var(--mayer-portal-shadow);
}

.mayer-portal .mayer-portal-header { display: grid; gap: 8px; margin-bottom: 16px; }
.mayer-portal .mayer-portal-brand-logo { max-width: 200px; height: auto; display: block; }
.mayer-portal .mayer-portal-title { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.6vw, 1.9rem); line-height: 1.22; color: var(--mayer-portal-text); }
.mayer-portal .mayer-portal-subtitle { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--mayer-portal-muted); }

.mayer-portal .mayer-portal-sections { display: grid; gap: 18px; }
.mayer-portal .mayer-portal-section { display: grid; gap: 10px; }
.mayer-portal .mayer-portal-section-title { margin: 0; font-size: .94rem; line-height: 1.4; color: #3b4a58; letter-spacing: .01em; }
.mayer-portal .mayer-portal-empty { margin: 0; padding: 16px; border-radius: 14px; border: 1px solid var(--mayer-portal-border); background: #f7f9fb; color: var(--mayer-portal-muted); }

.mayer-portal .mayer-portal-card-list { display: grid; grid-template-columns: 1fr; gap: 12px; min-width: 0; }

.mayer-portal .mayer-portal-card,
.mayer-portal .mayer-portal-card:link,
.mayer-portal .mayer-portal-card:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(16, 30, 46, 0.14);
  background: var(--btn);
  color: var(--txt) !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(16, 30, 46, 0.08);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.mayer-portal .mayer-portal-card:hover,
.mayer-portal .mayer-portal-card:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 7px 16px rgba(16, 30, 46, 0.16);
}

.mayer-portal .mayer-portal-card:active {
  transform: translateY(0);
  filter: brightness(.98);
}

.mayer-portal .mayer-portal-card:focus-visible {
  outline: 3px solid #0a58ca;
  outline-offset: 2px;
}

.mayer-portal .mayer-portal-card-media { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; }
.mayer-portal .mayer-portal-thumb-image { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; display: block; }
.mayer-portal .mayer-portal-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.22); font-size: 1.15rem; line-height: 1; }
.mayer-portal .mayer-portal-card-content { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.mayer-portal .mayer-portal-card-title { font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; }
.mayer-portal .mayer-portal-card-description { font-size: .87rem; line-height: 1.35; opacity: .9; overflow-wrap: anywhere; word-break: break-word; }
.mayer-portal .mayer-portal-card-chevron { flex: 0 0 auto; font-size: 1.3rem; line-height: 1; opacity: .85; }

@media (min-width: 760px) {
  .mayer-portal { padding: 28px 16px; }
  .mayer-portal .mayer-portal-shell { padding: 22px 18px; }
  .mayer-portal .mayer-portal-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mayer-portal .mayer-portal-card { transition: none; }
}

.mayer-portal-admin form{display:grid;gap:10px;max-width:680px;margin-bottom:14px}
.mayer-portal-admin label{display:grid;gap:4px}
.mayer-portal-admin .mayer-msg{padding:8px 10px;border-radius:6px}
.mayer-portal-admin .mayer-msg-success{background:#e8f6ea}
.mayer-portal-admin .mayer-msg-error{background:#fce8e8}
.mayer-portal-admin .mayer-admin-deeplink-help code{word-break:break-all}
.mayer-portal-admin .mayer-admin-color-preview{display:inline-flex;align-items:center;padding:8px 12px;border-radius:10px;background:var(--btn);color:var(--txt);font-weight:600}
.mayer-portal-admin .mayer-admin-link-card{border:1px solid #d9dfe6;border-radius:10px;padding:10px}
.mayer-portal-admin .mayer-admin-link-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mayer-portal-admin .mayer-admin-badge{display:inline-flex;border-radius:999px;background:#eef2f6;padding:2px 8px;font-size:.78rem}
.mayer-portal-admin .mayer-admin-link-meta{margin:6px 0;font-size:.9rem;overflow-wrap:anywhere}
.mayer-portal-admin input:focus-visible,.mayer-portal-admin select:focus-visible,.mayer-portal-admin button:focus-visible{outline:2px solid #0a58ca;outline-offset:2px}

.mayer-portal-preloader-overlay{position:fixed;inset:0;z-index:99999;background:var(--mayer-preloader-bg,#00a57a);display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;pointer-events:auto;transition:opacity 350ms ease,visibility 350ms ease;animation:mayer-portal-preloader-failsafe 1.2s steps(1,end) forwards}
.mayer-portal-preloader-overlay.is-hiding{opacity:0;visibility:hidden;pointer-events:none;animation:none}
.mayer-portal-preloader-overlay.is-hidden{display:none !important;opacity:0;visibility:hidden;pointer-events:none;animation:none}
.mayer-portal-preloader-content{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.mayer-portal-preloader-image{display:block;max-width:160px;width:100%;height:auto;object-fit:contain;object-position:center center}
.mayer-portal-preloader-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:999px;animation:mayer-portal-spin .9s linear infinite}
@keyframes mayer-portal-spin{to{transform:rotate(360deg)}}
@keyframes mayer-portal-preloader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion: reduce){.mayer-portal-preloader-overlay{transition:none}.mayer-portal-preloader-spinner{animation:none}}