:root {
  /* Official Media Expert brand palette (Brandfetch) */
  --me-yellow: #fff001;       /* "Turbo" — primary brand color */
  --me-yellow-dark: #e6d800;  /* hover/active for yellow surfaces */
  --me-black: #000000;        /* brand black — header, text on yellow */
  --me-blue: #78aae7;         /* "Portage" — secondary accent */
  --me-blue-dark: #2f6fc0;    /* legible variant of Portage for link text */
  /* Neutrals + semantic error color (error red is not a brand color; it is
     functional, used only to flag critical errors). */
  --me-bg: #f4f5f7;
  --me-card: #ffffff;
  --me-text: #16181d;
  --me-muted: #6b7280;
  --me-critical: #d8232a;
  --me-critical-bg: #fdecec;
  --me-normal-bg: #eef4fc;
  --me-border: #e5e7eb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--me-bg);
  color: var(--me-text);
}

.me-header {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--me-black);
  color: #fff;
  padding: 14px 28px;
  border-bottom: 4px solid var(--me-yellow);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.me-logo { height: 28px; width: auto; display: block; }
.me-subtitle { font-size: 14px; opacity: 0.85; }
.me-logout { margin-left: auto; }
.me-logout button {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
}
.me-logout button:hover { background: var(--me-yellow); color: var(--me-black); border-color: var(--me-yellow); }

.me-main { max-width: 960px; margin: 28px auto; padding: 0 20px; }

.me-card {
  background: var(--me-card);
  border: 1px solid var(--me-border);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

h1 { margin-top: 0; color: var(--me-black); }
h2 { color: var(--me-black); }

.me-login { max-width: 360px; margin: 60px auto; }
.me-login form { display: flex; flex-direction: column; gap: 14px; }
.me-login label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--me-muted); }
.me-login input {
  padding: 10px 12px;
  border: 1px solid var(--me-border);
  border-radius: 8px;
  font-size: 15px;
}
.me-login input:focus { outline: 2px solid var(--me-yellow-dark); border-color: var(--me-yellow-dark); }

.me-btn {
  background: var(--me-yellow);
  color: var(--me-black);
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.me-btn:hover { background: var(--me-yellow-dark); }

.me-error { color: var(--me-critical); background: var(--me-critical-bg); padding: 10px 12px; border-radius: 8px; }

.me-table { width: 100%; border-collapse: collapse; }
.me-table th, .me-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--me-border); }
.me-table th { color: var(--me-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }
.me-table tbody tr:hover { background: var(--me-normal-bg); }
.me-critical-cell { color: var(--me-critical); font-weight: 700; }

.me-link { color: var(--me-blue-dark); text-decoration: none; font-weight: 600; }
.me-link:hover { text-decoration: underline; }
.me-empty { color: var(--me-muted); }

.me-stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.me-stats li {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--me-normal-bg); border-radius: 10px; padding: 14px 16px;
}
.me-stats span { color: var(--me-muted); font-size: 13px; }
.me-stats strong { font-size: 20px; color: var(--me-black); }

.me-errors { list-style: none; padding: 0; }
.me-error-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 8px; margin-bottom: 8px;
}
.me-error-item.me-normal { background: var(--me-normal-bg); }
.me-error-item.me-critical { background: var(--me-critical-bg); }
.me-badge {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  color: var(--me-black); background: var(--me-blue); white-space: nowrap;
}
.me-critical .me-badge { background: var(--me-critical); color: #fff; }