/* METROPARK «Signature» for Core — the management.metropark.az identity
   (cobalt emblem blue, red/blue/green emblem, cellular facade, magenta-violet
   night light) adapted to the Core cabinet. Loaded after every other layer;
   remove the <link> in base.html to roll back. Markup, URLs and JS hooks are
   unchanged — this file only restyles existing classes. */

:root {
  --mp-blue: #02599b;
  --mp-blue-bright: #2a86d6;
  --mp-red: #e31412;
  --mp-coral: #ec5870;
  --mp-green: #028c38;
  --mp-green-bright: #16b356;
  --mp-magenta: #c2187a;
  --mp-violet: #6a2bd9;
  --night-950: #040a16;
  --night-900: #07122a;
  --night-800: #0b1d3d;
  --serif: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Libre Bodoni", Georgia, "Times New Roman", "DejaVu Serif", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tricolour: linear-gradient(90deg, var(--mp-blue-bright) 0 33.3%, var(--mp-red) 33.3% 66.6%, var(--mp-green-bright) 66.6%);
  --hairline: linear-gradient(90deg, transparent, var(--mp-blue-bright) 18%, var(--mp-coral) 50%, var(--mp-green-bright) 82%, transparent);
  --night-glass: linear-gradient(180deg, #08142cf2, #050c1cf2);
  --facade: url("/static/core/facade.svg");

  --core-bg: #f4f6fa;
  --core-surface: #ffffff;
  --core-surface-raised: #ffffff;
  --core-surface-muted: #f8fafd;
  --core-surface-hover: #f0f4fa;
  --core-text: #0a1630;
  --core-text-muted: #74809a;
  --core-text-secondary: #3f4c66;
  --core-border: #e3e8f1;
  --core-border-strong: #cfd8e6;
  --core-blue: var(--mp-blue);
  --core-blue-hover: #01477c;
  --core-blue-soft: #eaf2fa;
  --core-green: #20826a;
  --core-green-soft: #edf9f4;
  --core-amber: #a67020;
  --core-amber-soft: #fff7e7;
  --core-red: #c43b4b;
  --core-red-soft: #fff0f2;
  --core-radius-xs: 9px;
  --core-radius-sm: 11px;
  --core-radius: 22px;
  --core-radius-lg: 26px;
  --core-shadow: 0 1px 2px #0a16300a, 0 10px 30px #0a163009;
  --core-shadow-lift: 0 2px 6px #0a16300f, 0 24px 50px -10px #0a163026;
  --core-focus: 0 0 0 4px #2a86d621;
  --core-topbar: 74px;
  --accent: var(--mp-coral);
  --accent-soft: #fdeef1;
  --accent-gradient: linear-gradient(160deg, #0a6bb8, var(--mp-blue) 55%, #01447a);
  --nav-bg: #07122a;
  --nav-bg-2: #050b18;
  --nav-text: #9fb0cb;
  --nav-text-strong: #ffffff;
  --nav-active: #ffffff12;
  --nav-line: #ffffff17;

  --bg: var(--core-bg); --surface: var(--core-surface); --surface-2: var(--core-surface-muted);
  --text: var(--core-text); --muted: var(--core-text-muted); --line: var(--core-border); --line-strong: var(--core-border-strong);
  --brand: var(--core-blue); --brand-2: var(--core-blue-hover); --brand-soft: var(--core-blue-soft);
  --success: var(--core-green); --success-soft: var(--core-green-soft); --warning: var(--core-amber); --warning-soft: var(--core-amber-soft);
  --danger: var(--core-red); --danger-soft: var(--core-red-soft);
  --radius: var(--core-radius); --radius-sm: var(--core-radius-sm); --shadow: var(--core-shadow); --shadow-sm: var(--core-shadow); --focus: var(--core-focus);
}
html[data-theme="dark"] {
  --core-bg: #050b18;
  --core-surface: #0c1729;
  --core-surface-raised: #0f1c31;
  --core-surface-muted: #0a1424;
  --core-surface-hover: #12203a;
  --core-text: #eef2f9;
  --core-text-muted: #8592ab;
  --core-text-secondary: #b9c3d6;
  --core-border: #1a2945;
  --core-border-strong: #263a5d;
  --core-blue: #7fb6ec;
  --core-blue-hover: #a6ccf3;
  --core-blue-soft: #10233f;
  --core-green: #77ccb1;
  --core-green-soft: #173b33;
  --core-amber: #e4b96f;
  --core-amber-soft: #3b3223;
  --core-red: #ff95a0;
  --core-red-soft: #3c2430;
  --core-shadow: 0 1px 2px #0000003a, 0 12px 32px #00000033;
  --core-shadow-lift: 0 2px 6px #00000040, 0 26px 54px -8px #00000066;
  --accent: #ff7d92;
  --accent-soft: #2b1422;
  --accent-gradient: linear-gradient(160deg, #3a95e2, #1c6fb8);
  --nav-bg: #040a16;
  --nav-bg-2: #030812;
  --bg: var(--core-bg); --surface: var(--core-surface); --surface-2: var(--core-surface-muted);
  --text: var(--core-text); --muted: var(--core-text-muted); --line: var(--core-border); --line-strong: var(--core-border-strong);
  --brand: var(--core-blue); --brand-2: var(--core-blue-hover); --brand-soft: var(--core-blue-soft);
  --success: var(--core-green); --success-soft: var(--core-green-soft); --warning: var(--core-amber); --warning-soft: var(--core-amber-soft);
  --danger: var(--core-red); --danger-soft: var(--core-red-soft); --shadow: var(--core-shadow); --shadow-sm: var(--core-shadow);
}

body { background: var(--bg); color: var(--text); font-family: var(--sans); letter-spacing: -.004em; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--mp-blue-bright); outline-offset: 3px; }
::selection { background: #2a86d633; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--mp-blue); width: 18px; height: 18px; padding: 0; margin: 0 6px 0 0; vertical-align: -3px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]), textarea, select { border-radius: 11px; border-color: var(--line-strong); transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus, select:focus { border-color: var(--mp-blue-bright) !important; box-shadow: var(--core-focus); outline: none; }
a { color: var(--brand); }
.text-link { color: var(--brand); font-weight: 600; }

/* ——— Emblem (shared with management.metropark.az) ——— */
.mp-emblem { width: 100%; height: 100%; display: block; }
.mp-emblem .emblem-ring { stroke: var(--mp-blue); }
.mp-emblem .emblem-blue { stroke: var(--mp-blue); fill: var(--mp-blue); }
.mp-emblem .emblem-red { stroke: var(--mp-red); fill: var(--mp-red); }
.mp-emblem .emblem-green { stroke: var(--mp-green); fill: var(--mp-green); }
.mp-emblem circle[stroke="none"] { stroke: none; }
.mp-emblem g g { transform-box: fill-box; transform-origin: 50% 100%; }
a:hover .mp-emblem .emblem-red { animation: mp-cheer .7s var(--ease); }
a:hover .mp-emblem .emblem-blue { animation: mp-cheer .7s var(--ease) .08s; }
a:hover .mp-emblem .emblem-green { animation: mp-cheer .7s var(--ease) .16s; }

.brand-mark { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: inherit; padding: 3px; box-shadow: 0 0 0 1px #ffffff26, 0 6px 18px #02599b40; flex: 0 0 auto; display: inline-grid; place-items: center; }
.brand-mark svg { width: 36px; height: 36px; }
.app-brand, .public-brand, .topbar .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.app-brand strong, .public-brand strong, .topbar .brand h2 { font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1; color: #fff; margin: 0; }
.app-brand small, .public-brand small { display: block; font-family: var(--sans); font-size: 8.5px; font-weight: 700; letter-spacing: 4.6px; text-transform: uppercase; color: #ff8fa1; margin: 6px 0 0 1px; }
.app-brand > span:last-child, .public-brand > span:last-child { display: flex; flex-direction: column; }

/* ——— Cabinet header: night glass with the tricolour hairline ——— */
.app-header { position: sticky; top: 0; z-index: 40; height: var(--core-topbar); background: var(--night-glass); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 0; box-shadow: 0 10px 30px #040a1638; color: #fff; }
.app-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hairline); opacity: .75; pointer-events: none; }
.app-header .icon-button { color: #9fb0cb; background: transparent; border-color: #ffffff1f; }
.app-header .icon-button:hover { color: #fff; background: #ffffff14; }
.org-switcher { border-left: 1px solid #ffffff1f; color: #fff; }
.org-switcher strong { color: #fff; font-weight: 650; }
.app-header .context-control, .app-header .preference-form select {
  background-color: #ffffff10; color: #e6ecf6; border: 1px solid #ffffff22; border-radius: 999px; height: 34px; padding: 0 30px 0 14px; font-size: 12px; font-weight: 650;
}
.app-header .context-control option, .app-header .preference-form select option { color: #0a1630; background: #fff; }
.app-header .context-control:hover, .app-header .preference-form select:hover { border-color: #ffffff44; }
.app-header .badge { background: #ffffff14; color: #fff; border: 1px solid #ffffff26; }
.shell-system-state { background: #ffffff0d; border: 1px solid #ffffff22; color: #e6ecf6; border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 650; }
.app-header .user-menu { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; padding: 4px 8px 4px 4px; border-radius: 999px; transition: background .2s; }
.app-header .user-menu:hover { background: #ffffff10; }
.app-header .user-copy strong { color: #fff; font-weight: 650; }
.app-header .user-copy small { color: #ff9fb0; }
.avatar { border-radius: 13px; background: linear-gradient(145deg, #eaf2fa, #dbe8f6); color: var(--mp-blue); border: 1px solid #02599b1f; font-weight: 700; }
.app-header .avatar { background: linear-gradient(145deg, #0d3b6e, #082447); color: #fff; border: 1px solid #ffffff2b; }
.app-header .header-updates { color: #9fb0cb; border-radius: 11px; }
.app-header .header-updates:hover { color: #fff; background: #ffffff14; }

/* ——— Sidebar: night facade with a coral pointer (Core's own mark) ——— */
.app-sidebar {
  background: linear-gradient(180deg, #07122ab8, #050b18c7), var(--facade) 0 0 / 480px 480px repeat, radial-gradient(90% 40% at 0% 100%, #6a2bd938 0%, transparent 70%), linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%);
  border-right: 1px solid #ffffff0d; color: var(--nav-text);
}
.nav-link { position: relative; color: var(--nav-text); border-radius: 11px; font-weight: 600; font-size: 13px; transition: color .2s, background .25s; }
.nav-link:hover { color: #fff; background: #ffffff0f; }
.nav-link.active { color: #fff; background: linear-gradient(90deg, #ec587026, #ffffff08 70%); box-shadow: none; }
.nav-link.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--mp-coral), #ff9a7a); }
.nav-link.active .nav-icon { color: #ff9fb0; }
.nav-link-admin { border-top-color: var(--nav-line); }
.sidebar-status { border-top-color: var(--nav-line); }
.sidebar-status .eyebrow, .sidebar-context label { color: #ff9fb0; letter-spacing: 2.4px; font-size: 9.5px; }
.logout-button { border-color: var(--nav-line); color: var(--nav-text); border-radius: 11px; }
.sidebar-context select { background-color: #ffffff10; color: #e6ecf6; border-color: #ffffff22; }

/* ——— Page hero: night facade, aurora, turning emblem ring ——— */
.page-heading, .topbar ~ .layout > .hero, .updates-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 34px 38px 40px; border-radius: 26px; margin-bottom: 26px; color: #fff;
  background:
    var(--facade) 0 0 / 360px 360px repeat,
    radial-gradient(60% 120% at 88% 10%, #c2187a59 0%, transparent 60%),
    radial-gradient(55% 110% at 70% 110%, #6a2bd94d 0%, transparent 62%),
    radial-gradient(70% 140% at 0% 0%, #02599b80 0%, transparent 60%),
    linear-gradient(120deg, #061530 0%, #0a2048 45%, #120f3d 100%);
  background-size: 360px 360px, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  box-shadow: 0 24px 60px -18px #061530a6, inset 0 1px 0 #ffffff14;
  animation: mp-aurora 18s ease-in-out infinite alternate, mp-rise .7s var(--ease) both;
  align-items: flex-end;
}
.page-heading::before, .topbar ~ .layout > .hero::before, .updates-hero::before {
  content: ""; position: absolute; z-index: -1; right: 44px; top: 50%; width: 280px; height: 280px; margin-top: -140px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 14%, #ec5870cc 22%, transparent 32% 46%, #8b5cf6b3 56%, transparent 66% 78%, #3b9cf0cc 88%, transparent);
  -webkit-mask: radial-gradient(circle closest-side, transparent 80%, #000 81%, #000 92%, transparent 93%);
  mask: radial-gradient(circle closest-side, transparent 80%, #000 81%, #000 92%, transparent 93%);
  animation: mp-spin 26s linear infinite; pointer-events: none;
}
.page-heading::after, .topbar ~ .layout > .hero::after, .updates-hero::after { content: ""; position: absolute; z-index: -1; left: 38px; bottom: 20px; width: 96px; height: 3px; border-radius: 3px; background: var(--tricolour); transform-origin: left; animation: mp-draw 1.1s var(--ease) .35s both; pointer-events: none; }
.page-heading > *, .topbar ~ .layout > .hero > *, .updates-hero > * { position: relative; }
.page-heading .eyebrow, .updates-hero .eyebrow { color: #ff9fb0; letter-spacing: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.page-heading h1, .topbar ~ .layout > .hero h1, .updates-hero h1 { color: #fff; font-family: var(--serif); font-size: 38px; font-weight: 700; letter-spacing: -.4px; line-height: 1.12; margin: 6px 0 8px; }
.page-heading .page-subtitle, .page-heading p:not(.eyebrow), .topbar ~ .layout > .hero p, .updates-hero p:not(.eyebrow) { color: #c3cde0; max-width: 680px; font-size: 14px; }
.page-heading a:not(.btn) { color: #ffd2da; }
.page-heading .btn-primary { background: linear-gradient(135deg, #ff7a8c 0%, var(--mp-red) 55%, var(--mp-magenta) 100%); border: 0; color: #fff; border-radius: 999px; padding: 11px 20px; box-shadow: 0 10px 28px -6px #e3141299; }
.page-heading .btn-primary:hover { box-shadow: 0 16px 36px -8px #e31412b3; }
.page-heading .btn:not(.btn-primary), .page-heading .badge, .page-heading .heading-status { background: #ffffff14; color: #fff; border: 1px solid #ffffff30; backdrop-filter: blur(6px); }
.page-heading select, .page-heading input:not([type="hidden"]) { background-color: #ffffff12; color: #fff; border-color: #ffffff30; }
.page-heading select option { color: #0a1630; }

/* ——— Cards, KPIs, panels ——— */
.surface-card, .kpi-card, .panel, .metric, .ops-panel, .ops-kpi, .home-kpi, .update-card, .uc-card {
  border-radius: 22px; border-color: var(--line); box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
/* Highlighted KPI: a small night card in the hero's light. */
.home-kpi-accent {
  background: var(--facade) 0 0 / 360px 360px repeat, radial-gradient(90% 120% at 100% 0%, #c2187a52 0%, transparent 60%), linear-gradient(135deg, #061530 0%, #0a2048 55%, #120f3d 100%);
  border-color: transparent; color: #fff; box-shadow: 0 18px 40px -18px #061530b3; position: relative; overflow: hidden;
}
.home-kpi-accent::after { content: ""; position: absolute; left: 22px; bottom: 14px; width: 56px; height: 3px; border-radius: 3px; background: var(--tricolour); }
.home-kpi-accent .home-kpi-icon { background: #ffffff1c; color: #ff9fb0; }
.home-kpi-accent .home-kpi-label, .home-kpi-accent .home-kpi-foot, .home-kpi-accent strong small { color: #c3cde0; }
.home-meter span, .home-bar-track span { background: linear-gradient(180deg, var(--mp-blue-bright), var(--mp-blue)); }
.home-kpi:hover, .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--core-shadow-lift); border-color: color-mix(in srgb, var(--mp-blue-bright) 30%, var(--line)); }
.card-heading h2, .surface-card h2 { font-weight: 700; letter-spacing: -.2px; }
.app-main > .layout > :not(.page-heading) { animation: mp-fade .6s var(--ease) .15s both; }
.empty-state { border: 1px dashed var(--line-strong); border-radius: 16px; background: var(--surface-2); }

/* ——— Buttons ——— */
.btn { border-radius: 11px; font-weight: 600; transition: background .2s, box-shadow .25s, transform .25s var(--ease), border-color .2s, color .2s; }
.btn-primary { background: var(--accent-gradient); color: #fff; border: 0; box-shadow: 0 6px 16px -6px #02599b8c; }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px -8px #02599bb3; color: #fff; }
.btn-primary:active:not(:disabled) { transform: none; }
.btn-quiet, .btn-secondary, .btn.secondary { background: var(--surface); color: var(--core-text-secondary); border: 1px solid var(--line-strong); }
.btn-quiet:hover, .btn-secondary:hover, .btn.secondary:hover { border-color: var(--mp-blue-bright); color: var(--text); }
.btn-danger { background: #c73c4b; color: #fff; border: 0; }
.btn-danger:hover { background: #af2f3e; }
.btn-sso { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; border-radius: 12px; background: linear-gradient(120deg, #061530, #0a2048 55%, #120f3d); color: #fff; border: 1px solid #ffffff1a; font-weight: 650; text-decoration: none; box-shadow: 0 10px 24px -10px #061530b3; position: relative; overflow: hidden; }
.btn-sso:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 32px -12px #061530cc; }
.btn-sso::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tricolour); }
.sso-emblem { width: 28px; height: 28px; border-radius: 50%; background: #fff; padding: 2px; display: inline-grid; place-items: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; margin: 18px 0 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ——— Badges ——— */
.badge { border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 650; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-neutral { background: var(--surface-2); color: var(--core-text-secondary); border: 1px solid var(--line); }

/* ——— Tables ——— */
.table-card, .table-wrap { border-radius: 20px; overflow: hidden; }
th { background: var(--surface-2); color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; font-size: 10px; font-weight: 700; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: var(--core-surface-hover); }

/* ——— Alerts ——— */
.alert { border-radius: 12px; }

/* ——— Public / sign-in pages ——— */
.public-story {
  background:
    var(--facade) 0 0 / 360px 360px repeat,
    radial-gradient(60% 50% at 90% 15%, #c2187a66 0%, transparent 65%),
    radial-gradient(60% 60% at 10% 100%, #6a2bd955 0%, transparent 65%),
    linear-gradient(160deg, #061530 0%, #0a2048 50%, #120f3d 100%) !important;
  background-size: 360px 360px, 200% 200%, 200% 200%, 100% 100% !important;
  animation: mp-aurora 20s ease-in-out infinite alternate; color: #fff; position: relative;
}
.public-story::after { content: ""; position: absolute; top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 3px; border: 0; border-radius: 0; background: var(--tricolour); }
.public-story h1 { font-family: var(--serif); font-weight: 700; letter-spacing: -.3px; color: #fff; animation: mp-fade .8s var(--ease) .1s both; }
.public-story p, .public-points li { color: #c3cde0; }
.public-points li::marker { color: var(--mp-coral); }
.public-trust { color: #ff9fb0; letter-spacing: 3px; font-size: 10px; font-weight: 700; }
.auth-panel { animation: mp-rise .8s var(--ease) .15s both; border-radius: 24px; }
.auth-heading h1 { font-family: var(--serif); font-weight: 700; letter-spacing: -.2px; }

/* ——— Platform administration: management-style night top bar ——— */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--night-glass); backdrop-filter: saturate(1.4) blur(14px); color: #fff; box-shadow: 0 10px 30px #040a1638; border-bottom: 0; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hairline); opacity: .75; }
.topbar .brand span:not(.brand-mark) { color: #ff9fb0; font-size: 11px; }
.topbar .nav a { position: relative; color: #9fb0cb; font-weight: 600; text-decoration: none; }
.topbar .nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--mp-coral), #ff9a7a); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.topbar .nav a:hover { color: #fff; }
.topbar .nav a:hover::after { transform: scaleX(1); }
.topbar .nav a.btn { background: #ffffff10; color: #fff; border: 1px solid #ffffff26; border-radius: 999px; }

/* ——— Footer mark ——— */
.mp-footer { margin: 40px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.mp-footer strong { font-family: var(--serif); color: var(--mp-blue); letter-spacing: 2.4px; text-transform: uppercase; font-size: 13px; }
html[data-theme="dark"] .mp-footer strong { color: #9cc7f0; }

/* ——— Account page ——— */
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.account-grid form { margin-top: 12px; }

/* ——— Motion ——— */
@keyframes mp-aurora { 0% { background-position: 0 0, 0% 0%, 100% 100%, 0% 50%, 0 0; } 100% { background-position: 360px 120px, 100% 60%, 0% 20%, 100% 0%, 0 0; } }
@keyframes mp-spin { to { transform: rotate(360deg); } }
@keyframes mp-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mp-cheer { 0%, 100% { transform: none; } 40% { transform: translateY(-2.5px) scaleY(1.06); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (max-width: 900px) {
  .cards, .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .info-grid, .grid { grid-template-columns: minmax(0, 1fr); }
}
/* Grid children may shrink below their content width (long tables, charts). */
.cards > *, .metrics > *, .split > *, .info-grid > *, [class^="mpa-"], [class*=" mpa-"] { min-width: 0; }
@media (max-width: 760px) {
  .mpa-filters > div { min-width: 0; overflow-x: auto; }
  .layout table:not(.no-scroll) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topbar { flex-wrap: wrap; padding: 10px 14px; }
  .topbar .nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .topbar .nav a { white-space: nowrap; }
  .app-header { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .app-brand small, .shell-system-state > span:last-child, .app-header .user-copy { display: none; }
  .shell-system-state { padding: 9px; }
  .app-header .header-actions { gap: 6px; min-width: 0; }
  .page-heading { padding: 26px 20px 34px; border-radius: 20px; }
  .page-heading h1 { font-size: 28px; }
  .page-heading::before { width: 200px; height: 200px; margin-top: -100px; right: -70px; opacity: .55; }
  .page-heading::after { left: 20px; bottom: 16px; }
  .app-brand strong { font-size: 18px; letter-spacing: 1.2px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-mark svg { width: 30px; height: 30px; }
}

/* Updates page hero: the badge and the APK menu sit on the night banner. */
.updates-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.updates-hero .update-foundation-badge { background: #ffffff14; color: #fff; border: 1px solid #ffffff30; border-radius: 999px; backdrop-filter: blur(6px); }
.updates-hero .apk-menu > summary { background: linear-gradient(135deg, #ff7a8c 0%, var(--mp-red) 55%, var(--mp-magenta) 100%); color: #fff; border: 0; border-radius: 999px; padding: 9px 16px; box-shadow: 0 10px 28px -6px #e3141299; }
.updates-hero .apk-menu-panel { color: var(--text); }
/* The APK dropdown must escape the banner, so this hero does not clip; the
   turning ring (which needs clipping) is left out here. */
.updates-hero { overflow: visible; z-index: 5; }
.updates-hero::before { display: none; }