:root {
    --red: #9f1721;
    --red-dark: #701018;
    --red-soft: #f7e9ea;
    --gold: #b99045;
    --ink: #20242a;
    --muted: #6d747d;
    --bg: #ece9e5;
    --bg-soft: #f7f5f2;
    --panel: #ffffff;
    --panel-alt: #f7f6f4;
    --line: #d8d4cf;
    --header: #17191d;
    --header-text: #f5f5f5;
    --shadow: 0 12px 30px rgba(34, 27, 24, .10);
    --success: #287d4f;
    --warning: #a46b12;
    --danger: #a32735;
    --radius: 8px;
}

html[data-theme="dark"] {
    --ink: #edf0f3;
    --muted: #a6aeb8;
    --bg: #101318;
    --bg-soft: #15191f;
    --panel: #1b2027;
    --panel-alt: #222831;
    --line: #363d47;
    --header: #090b0f;
    --header-text: #f4f4f4;
    --red-soft: #321a1e;
    --shadow: 0 14px 36px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--bg);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
img { max-width: 100%; display: block; }
.wrap { width: min(1180px, calc(100% - 34px)); margin: 0 auto; }

.top-strip {
    background: var(--header);
    color: #d8d8d8;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
}
.top-strip-inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.top-strip-actions { display: flex; align-items: center; gap: 14px; }
.top-strip a { color: #f0f0f0; }
.theme-toggle {
    border: 1px solid rgba(255,255,255,.24);
    background: transparent;
    color: #fff;
    border-radius: 3px;
    padding: 4px 9px;
    cursor: pointer;
    font-size: 12px;
}

.main-header {
    background: var(--panel);
    border-bottom: 4px solid var(--red);
    box-shadow: 0 3px 12px rgba(0,0,0,.10);
    position: sticky;
    top: 0;
    z-index: 40;
}
.main-header-inner {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.brand img { width: 360px; max-height: 78px; object-fit: contain; object-position: left center; }
.main-nav { display: flex; align-items: stretch; flex-wrap: wrap; justify-content: flex-end; }
.main-nav a {
    display: flex;
    align-items: center;
    min-height: 92px;
    padding: 0 13px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 4px solid transparent;
    margin-bottom: -4px;
}
.main-nav a:hover, .main-nav a.active {
    color: var(--red);
    background: var(--red-soft);
    border-bottom-color: var(--red);
}

.site-main { padding: 30px 0 44px; }
.site-footer {
    background: #181a1e;
    color: #bfc3c8;
    border-top: 5px solid var(--red);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 38px;
    padding: 38px 0;
}
.footer-grid img { width: 310px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.footer-grid p { max-width: 520px; }
.footer-grid strong { display: block; color: #fff; margin-bottom: 12px; text-transform: uppercase; }
.footer-grid a { display: block; color: #d1d4d8; margin: 7px 0; }
.footer-bottom { text-align: center; padding: 14px; border-top: 1px solid #2b2e33; font-size: 13px; }

/* Public UCP */
.home-hero {
    min-height: 500px;
    position: relative;
    overflow: hidden;
    background: url('images/slides/slide2.jpg') center/cover;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18,17,17,.88) 0%, rgba(18,17,17,.64) 52%, rgba(18,17,17,.18) 100%);
}
.home-hero-content {
    position: relative;
    z-index: 2;
    max-width: 660px;
    padding: 72px 58px;
    color: #fff;
}
.home-hero-logo { width: 480px; margin-bottom: 25px; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--red);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .16em;
}
.home-hero .eyebrow { color: #f3c7c9; }
.home-hero h1 { font-family: Georgia, serif; font-size: clamp(40px, 5vw, 64px); line-height: 1.03; margin: 10px 0 18px; }
.home-hero p { font-size: 18px; max-width: 620px; color: #e5e5e5; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.button, button.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 0;
    border-radius: 4px;
    padding: 10px 18px;
    background: linear-gradient(#b5212d, #8f131d);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.15);
}
.button:hover, button.primary:hover { color: #fff; filter: brightness(1.06); }
.button.secondary, .button.ghost {
    background: var(--panel);
    color: var(--red);
    border: 1px solid var(--red);
    box-shadow: none;
}
.home-hero .button.secondary { background: rgba(255,255,255,.94); }
.button.small { min-height: 34px; padding: 7px 12px; font-size: 13px; }
.button.danger { background: linear-gradient(#bd3442, #8c1d28); }
button:disabled { opacity: .55; cursor: not-allowed; }

.status-ribbon {
    margin-top: 20px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 5px solid var(--red);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
}
.status-ribbon strong { display: block; font-family: Georgia, serif; font-size: 21px; }
.status-dot { display: inline-block; width: 9px; height: 9px; background: #28a160; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 4px rgba(40,161,96,.14); }

.feature-grid, .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 22px;
}
.feature-card, .news-card {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.feature-card { padding: 24px; border-top: 4px solid var(--red); }
.feature-card span { color: var(--red); font: 700 30px Georgia, serif; }
.feature-card h3 { margin: 8px 0; font-family: Georgia, serif; }
.feature-card p { color: var(--muted); margin-bottom: 0; }
.news-card { min-height: 260px; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.news-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,15,15,.86), rgba(15,15,15,.05)); }
.news-card > div { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; color: #fff; }
.news-card h3 { margin: 6px 0 0; font-family: Georgia, serif; font-size: 24px; }

/* Account banner */
.account-banner {
    min-height: 220px;
    position: relative;
    background: url('images/slides/slide3.jpg') center 40%/cover;
    overflow: hidden;
    border-bottom: 1px solid #b9b4ae;
}
.account-banner-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,20,19,.86), rgba(24,20,19,.42)); }
.account-banner-content {
    position: relative;
    z-index: 2;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.account-banner h1 { font-family: Georgia, serif; font-size: 44px; margin: 8px 0; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
.account-banner .eyebrow { color: #f4c3c6; }
.account-banner-content > img { width: 170px; max-height: 170px; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(0,0,0,.42)); }

/* Panels and shared */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
}
.panel + .panel { margin-top: 18px; }
.panel-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 13px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.panel-title h1, .panel-title h2, .panel-title h3 { font-family: Georgia, serif; margin: 0; }
.panel-title p { color: var(--muted); margin: 5px 0 0; }
.section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 24px 0 15px; }
.section-title h1, .section-title h2 { margin: 0; font-family: Georgia, serif; }
.muted, small { color: var(--muted); }
.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--panel-alt);
    border: 1px solid var(--line);
}
.badge.success { color: var(--success); }
.badge.warning { color: var(--warning); }
.badge.danger { color: var(--danger); }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9f60; display: inline-block; margin-right: 6px; }

.alert { padding: 13px 15px; border-radius: 4px; margin-bottom: 16px; border: 1px solid var(--line); background: var(--panel); }
.alert.error, .alert.danger { border-left: 5px solid var(--danger); color: var(--danger); }
.alert.success { border-left: 5px solid var(--success); color: var(--success); }
.alert.warning { border-left: 5px solid var(--warning); color: var(--warning); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 18px 0;
}
.stat-card {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 18px;
    border-top: 3px solid var(--red);
}
.stat-card small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.stat-card strong { display: block; font: 700 28px Georgia, serif; margin: 7px 0 3px; }

.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; }
.character-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.character-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.character-image {
    min-height: 235px;
    background: radial-gradient(circle at 50% 38%, #f7f4ef 0%, #ded9d3 72%);
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .character-image { background: radial-gradient(circle at 50% 38%, #414750 0%, #20252c 72%); }
.character-image img { height: 240px; align-self: flex-end; }
.character-card-body { padding: 18px; }
.character-card h3 { font-family: Georgia, serif; font-size: 23px; margin: 0 0 5px; }
.character-meta { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.mini-grid > div { background: var(--panel-alt); border: 1px solid var(--line); padding: 9px; }
.mini-grid small { display: block; font-size: 10px; text-transform: uppercase; }
.mini-grid strong { display: block; margin-top: 3px; }
.empty-card { min-height: 390px; display: grid; place-items: center; text-align: center; padding: 28px; }
.empty-card .plus { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; border: 2px dashed var(--red); color: var(--red); font-size: 38px; margin: 0 auto 14px; }

.data-list { display: grid; grid-template-columns: 170px 1fr; gap: 11px 18px; margin: 0; }
.data-list dt { color: var(--muted); font-weight: 600; }
.data-list dd { margin: 0; font-weight: 600; }
.quick-links { display: grid; gap: 10px; }
.quick-links a { background: var(--panel-alt); border: 1px solid var(--line); padding: 12px 14px; color: var(--ink); font-weight: 700; }
.quick-links a:hover { border-color: var(--red); color: var(--red); }

/* Forms */
.auth-layout { display: grid; grid-template-columns: 1.05fr .95fr; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--panel); overflow: hidden; }
.auth-photo { min-height: 620px; background: linear-gradient(0deg, rgba(22,18,17,.80), rgba(22,18,17,.10)), url('images/slides/slide4.jpg') center/cover; display: flex; align-items: end; padding: 38px; color: #fff; }
.auth-photo h2 { font: 700 40px Georgia, serif; margin: 6px 0; }
.auth-form { padding: 44px; }
.auth-form h1 { font: 700 36px Georgia, serif; margin: 8px 0 24px; }
label { display: block; font-weight: 700; margin: 13px 0 6px; }
input, select, textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--panel-alt);
    color: var(--ink);
    outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(159,23,33,.10); }
textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid .full { grid-column: 1 / -1; }
.registration-layout { display: grid; grid-template-columns: 290px 1fr; gap: 20px; align-items: start; }
.registration-side { position: sticky; top: 122px; }
.registration-side h1 { font: 700 38px Georgia, serif; }
.registration-steps { display: grid; gap: 0; margin-top: 24px; }
.registration-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; min-height: 60px; }
.registration-step span { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-weight: 800; }
.registration-step:not(:last-child) span::after { content: ""; width: 2px; height: 29px; background: var(--line); display: block; position: absolute; transform: translateY(30px); }
.quiz-question { border: 1px solid var(--line); background: var(--panel-alt); padding: 16px; margin: 12px 0; }
.quiz-question legend { font-weight: 800; padding: 0 8px; }
.quiz-answer { display: flex; align-items: flex-start; gap: 9px; padding: 9px; margin: 5px 0; background: var(--panel); border: 1px solid transparent; font-weight: 500; }
.quiz-answer:hover { border-color: var(--red); }
.quiz-answer input { width: auto; margin-top: 4px; }
.character-form { display: grid; gap: 18px; }
.skin-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; max-height: 530px; overflow: auto; }
.skin-picker label { margin: 0; }
.skin-picker input { display: none; }
.skin-picker span { display: block; text-align: center; border: 1px solid var(--line); background: var(--panel-alt); cursor: pointer; }
.skin-picker img { width: 100%; height: 118px; object-fit: contain; }
.skin-picker b { display: block; padding: 5px; font-size: 12px; }
.skin-picker input:checked + span { border: 2px solid var(--red); box-shadow: 0 0 0 3px rgba(159,23,33,.12); }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--panel-alt); color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: 11px; }
tr:hover td { background: var(--red-soft); }
.table-actions { display: flex; gap: 8px; }

/* Character profile */
.profile-hero { display: grid; grid-template-columns: 210px 1fr; gap: 24px; }
.profile-skin { background: var(--panel-alt); border: 1px solid var(--line); min-height: 340px; display: grid; place-items: center; padding: 12px; }
.profile-skin img { max-height: 300px; }
.profile-name { font: 700 38px Georgia, serif; margin: 0 0 5px; }
.profile-subtitle { color: var(--muted); margin-bottom: 18px; }
.progress-row { display: grid; grid-template-columns: 80px 1fr 55px; gap: 10px; align-items: center; margin: 10px 0; }
.progress { height: 10px; background: var(--panel-alt); border: 1px solid var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, #a41823, #db4852); }
.progress.armour span { background: linear-gradient(90deg, #465b87, #7792c1); }
.profile-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.info-box { background: var(--panel-alt); border: 1px solid var(--line); padding: 15px; }
.info-box h3 { font-family: Georgia, serif; margin: 0 0 12px; color: var(--red); }
.pair-list { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; }
.pair-list span:nth-child(odd) { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.pair-list span:nth-child(even) { text-align: right; font-weight: 600; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.three-column { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.item-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.item { background: var(--panel-alt); border: 1px solid var(--line); padding: 10px; }
.item strong { display: block; }

/* Faction */
.faction-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.faction-tabs a { padding: 9px 13px; background: var(--panel-alt); border: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.faction-tabs a.active, .faction-tabs a:hover { background: var(--red); color: #fff; border-color: var(--red); }
.faction-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faction-identity { display: flex; align-items: center; gap: 14px; }
.faction-seal { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font: 700 18px Georgia, serif; }
.management-note { padding: 12px; border-left: 4px solid var(--warning); background: var(--panel-alt); color: var(--muted); }
.inline-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.inline-form label { margin: 0; min-width: 120px; }
.inline-form input, .inline-form select { min-width: 110px; }

/* MDC */
.mdc-shell {
    --mdc-bg: #07111d;
    --mdc-panel: #0d1826;
    --mdc-panel-2: #111f2f;
    --mdc-line: #263a4f;
    --mdc-muted: #8ea3b9;
    --mdc-blue: #4e9cf6;
    --mdc-green: #35d07f;
    --mdc-amber: #f0ad3d;
    --mdc-red: #e66068;
    background: var(--mdc-bg);
    color: #e8f0f8;
    border: 1px solid #26384e;
    box-shadow: 0 24px 55px rgba(0,0,0,.34);
    overflow: hidden;
}
.mdc-shell *, .mdc-shell *::before, .mdc-shell *::after { box-sizing: border-box; }
.mdc-topbar {
    min-height: 74px;
    background: linear-gradient(180deg, #142438 0%, #0d1827 100%);
    border-bottom: 1px solid var(--mdc-line);
    padding: 13px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.mdc-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mdc-brand > div:last-child { display: grid; gap: 2px; }
.mdc-brand strong { font-size: 15px; letter-spacing: .04em; }
.mdc-brand small, .mdc-topbar small { color: var(--mdc-muted); letter-spacing: .08em; font-size: 10px; }
.mdc-brand-mark {
    width: 45px;
    height: 45px;
    border: 1px solid #6a829d;
    background: radial-gradient(circle at 50% 42%, #1d4d79 0 35%, #0a1420 36% 100%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 4px #0a1420, 0 0 18px rgba(78,156,246,.18);
}
.mdc-brand-mark span { color: #d9eaff; font: 700 8px/1 Arial, sans-serif; letter-spacing: .09em; }
.mdc-session { text-align: right; }
.mdc-session small { display: block; margin-top: 5px; }
.mdc-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mdc-green);
    box-shadow: 0 0 0 4px rgba(53,208,127,.12);
    margin-right: 4px;
    animation: mdc-pulse 2s infinite;
}
.mdc-offline .mdc-live-dot { background: var(--mdc-red); box-shadow: 0 0 0 4px rgba(230,96,104,.12); animation: none; }
@keyframes mdc-pulse { 50% { box-shadow: 0 0 0 8px rgba(53,208,127,0); } }

.mdc-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 720px; }
.mdc-nav {
    background: #091321;
    border-right: 1px solid var(--mdc-line);
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mdc-nav-label { color: #61778e; font-size: 9px; letter-spacing: .18em; padding: 2px 10px 7px; }
.mdc-nav a {
    color: #b7c5d4;
    border: 1px solid transparent;
    padding: 11px 10px;
    border-radius: 3px;
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
    font-size: 13px;
}
.mdc-nav a > span { color: #60758c; font: 700 10px/1 monospace; }
.mdc-nav a > b {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 9px;
    background: #172b40;
    color: #a9bed4;
    text-align: center;
    font-size: 10px;
}
.mdc-nav a.active, .mdc-nav a:hover {
    background: linear-gradient(90deg, #174677, #173353);
    border-color: #2d608e;
    color: #fff;
}
.mdc-nav a.active > span, .mdc-nav a:hover > span { color: #8ac2ff; }
.mdc-nav .back { margin-top: auto; display: block; background: #121f2e; color: #9fb1c4; }

.mdc-content { padding: 24px; min-width: 0; background: radial-gradient(circle at 78% 0%, rgba(36,82,123,.13), transparent 34%); }
.mdc-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.mdc-heading-row h1 { font: 700 30px/1.15 Georgia, serif; margin: 3px 0 6px; color: #f2f7fc; }
.mdc-heading-row p { color: var(--mdc-muted); margin: 0; }
.mdc-kicker, .mdc-panel-head span { color: #6f8daa; font-size: 9px; letter-spacing: .17em; font-weight: 700; }
.mdc-clock {
    min-width: 126px;
    border: 1px solid var(--mdc-line);
    background: #0b1724;
    padding: 11px 13px;
    color: #dceafa;
    text-align: right;
    font: 700 19px/1.05 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.mdc-clock small { display: block; color: var(--mdc-muted); font: 500 9px/1.2 Arial, sans-serif; letter-spacing: .1em; margin-top: 5px; text-transform: uppercase; }

.mdc-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; margin: 17px 0; }
.mdc-stat {
    background: linear-gradient(145deg, #101e2d, #0c1723);
    border: 1px solid var(--mdc-line);
    border-top: 3px solid var(--mdc-blue);
    padding: 18px 19px;
    text-align: left;
    min-height: 118px;
}
.mdc-stat.green { border-top-color: var(--mdc-green); }
.mdc-stat.orange { border-top-color: var(--mdc-amber); }
.mdc-stat > span { color: var(--mdc-muted); letter-spacing: .12em; font-size: 9px; font-weight: 700; }
.mdc-stat strong { font: 700 38px/1 Georgia, serif; display: block; margin: 9px 0 7px; }
.mdc-stat small { color: #71869b; font-size: 10px; }

.mdc-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 15px; align-items: stretch; }
.mdc-panel { background: rgba(13,24,38,.95); border: 1px solid var(--mdc-line); padding: 17px; margin-top: 15px; min-width: 0; }
.mdc-dashboard-grid > .mdc-panel { margin-top: 0; }
.mdc-panel h2 { margin: 2px 0 0; color: #edf5fc; font: 700 19px/1.2 Georgia, serif; }
.mdc-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.mdc-panel-head > div { min-width: 0; }
.mdc-panel-head > small, .mdc-panel-head > strong, .mdc-panel-head > a { color: var(--mdc-muted); font-size: 10px; }
.mdc-panel-head > a { color: #83bfff; }

.unit-grid-map {
    position: relative;
    min-height: 430px;
    background-color: #071421;
    background-image:
        linear-gradient(rgba(75,110,143,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,110,143,.12) 1px, transparent 1px);
    background-size: 32px 32px, 32px 32px;
    background-position: center;
    border: 1px solid #2a4057;
    overflow: hidden;
}
.mdc-map-panel-large .unit-grid-map { min-height: 610px; }

.mdc-map-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
    user-select: none;
    pointer-events: none;
}
.unit-grid-map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(rgba(75,110,143,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,110,143,.08) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.unit-grid-map::after {
    content: "LIVE POSITION GRID — SAN ANDREAS COORDINATE PLANE";
    position: absolute;
    left: 12px;
    bottom: 9px;
    color: #6f8499;
    font-size: 9px;
    letter-spacing: .12em;
    pointer-events: none;
    z-index: 2;
}
.unit-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mdc-green);
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 5px rgba(53,208,127,.16);
    padding: 0;
    z-index: 3;
    cursor: pointer;
}
.unit-marker.enroute { background: var(--mdc-blue); box-shadow: 0 0 0 5px rgba(78,156,246,.18); }
.unit-marker.onscene { background: var(--mdc-amber); box-shadow: 0 0 0 5px rgba(240,173,61,.18); }
.unit-marker.busy { background: var(--mdc-red); box-shadow: 0 0 0 5px rgba(230,96,104,.18); }
.unit-marker.unknown { background: #8b9aaa; }
.unit-marker span {
    position: absolute;
    top: 17px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #eaf3fb;
    font-size: 9px;
    background: rgba(4,10,17,.9);
    border: 1px solid #263b50;
    padding: 3px 5px;
    pointer-events: none;
}
.unit-marker:hover { z-index: 10; }
.unit-marker:hover span { color: #fff; border-color: #5e89b3; }
.mdc-empty-map { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; color: #758ba0; font-size: 12px; }
.mdc-map-legend { display: flex; flex-wrap: wrap; gap: 13px; padding-top: 10px; color: var(--mdc-muted); font-size: 10px; }
.mdc-map-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: #8b9aaa; }
.mdc-map-legend .available::before { background: var(--mdc-green); }
.mdc-map-legend .enroute::before { background: var(--mdc-blue); }
.mdc-map-legend .onscene::before { background: var(--mdc-amber); }
.mdc-map-legend .busy::before { background: var(--mdc-red); }

.mdc-call-feed { display: grid; gap: 8px; }
.mdc-call {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 11px;
    align-items: start;
    border: 1px solid #23374b;
    border-left: 3px solid var(--mdc-blue);
    background: #0a1521;
    padding: 11px 12px;
}
.mdc-call-number { color: #7da9d3; font: 700 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.mdc-call h3 { margin: 0 0 5px; font-size: 13px; color: #e7f1fa; }
.mdc-call p { margin: 4px 0 7px; color: #cbd8e4; font-size: 12px; line-height: 1.45; }
.mdc-call small { color: #788da2; display: block; font-size: 9px; margin-top: 3px; }
.mdc-status {
    align-self: start;
    border: 1px solid #41678d;
    background: #15385b;
    color: #a9d2ff;
    padding: 3px 6px;
    font-size: 8px;
    letter-spacing: .1em;
    font-weight: 700;
}
.mdc-status.assigned { border-color: #8b6b2b; background: #493718; color: #ffd588; }
.mdc-status.closed { border-color: #2f6a4b; background: #173d2b; color: #91efbb; }
.mdc-call-feed-full { gap: 10px; }
.mdc-call-detailed { grid-template-columns: 48px minmax(0,1fr) auto; padding: 14px; }
.mdc-call-title { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mdc-call-action { align-self: center; }
.mdc-empty { border: 1px dashed #30465d; color: #7f94a9; padding: 24px; text-align: center; background: #09141f; }

.mdc-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.mdc-table th { background: #142337; color: #8fa5ba; border: 1px solid #2a3e53; padding: 9px 10px; text-align: left; text-transform: uppercase; letter-spacing: .08em; font-size: 8px; }
.mdc-table td { border: 1px solid #25384b; color: #dce7f1; padding: 9px 10px; vertical-align: middle; }
.mdc-table tr:hover td { background: #101f2e; }
.unit-status { display: inline-block; border: 1px solid #526679; color: #b8c5d1; padding: 3px 7px; font-size: 9px; white-space: nowrap; }
.unit-status.available { color: #84eeb0; border-color: #347f59; background: rgba(53,208,127,.08); }
.unit-status.enroute { color: #9ccaff; border-color: #3f70a4; background: rgba(78,156,246,.08); }
.unit-status.onscene { color: #ffd48a; border-color: #8c6828; background: rgba(240,173,61,.08); }
.unit-status.busy { color: #ffafb4; border-color: #91434a; background: rgba(230,96,104,.08); }
.unit-status.unknown { color: #aeb9c5; }

.mdc-records-grid { display: grid; grid-template-columns: minmax(280px,.55fr) minmax(0,1.45fr); gap: 15px; }
.mdc-records-grid > .mdc-panel { margin-top: 0; }
.mdc-form { display: grid; gap: 13px; }
.mdc-form label { display: grid; gap: 6px; color: #91a6bb; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.mdc-shell input, .mdc-shell select, .mdc-shell textarea {
    background: #07121e;
    color: #edf5fc;
    border: 1px solid #30465d;
    border-radius: 2px;
}
.mdc-shell input:focus, .mdc-shell select:focus, .mdc-shell textarea:focus { border-color: #4f8fc9; outline: 1px solid rgba(79,143,201,.35); }
.mdc-shell .primary { background: #235e96; border-color: #377eb9; color: #fff; }
.mdc-shell .primary:hover { background: #2e72ad; }

@media (max-width: 1120px) {
    .mdc-dashboard-grid, .mdc-records-grid { grid-template-columns: 1fr; }
    .mdc-map-panel-large .unit-grid-map { min-height: 500px; }
}

.searchbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.searchbar input { flex: 1 1 220px; }
.acp-list { display: grid; gap: 12px; }
.acp-row { display: grid; grid-template-columns: minmax(220px,2fr) repeat(4,minmax(105px,1fr)) auto; gap: 12px; align-items: end; }
.acp-row label { margin: 0; }

@media (max-width: 1050px) {
    .main-header-inner { flex-direction: column; padding-top: 12px; }
    .main-nav { justify-content: center; }
    .main-nav a { min-height: 45px; }
    .dashboard-grid, .auth-layout, .registration-layout { grid-template-columns: 1fr; }
    .registration-side { position: static; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .character-grid { grid-template-columns: repeat(2, 1fr); }
    .profile-info-grid, .three-column { grid-template-columns: 1fr 1fr; }
    .skin-picker { grid-template-columns: repeat(5, 1fr); }
    .acp-row { grid-template-columns: 1fr 1fr; }
    .acp-row > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .wrap { width: min(100% - 20px, 1180px); }
    .top-strip-inner, .main-header-inner, .account-banner-content, .status-ribbon, .panel-title, .faction-head { flex-direction: column; align-items: flex-start; }
    .top-strip-inner { padding: 7px 0; }
    .main-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
    .main-nav a { white-space: nowrap; padding: 0 10px; }
    .brand img { width: 280px; }
    .home-hero-content { padding: 50px 24px; }
    .home-hero-logo { width: 330px; }
    .feature-grid, .news-grid, .stats-grid, .character-grid, .profile-info-grid, .two-column, .three-column, .form-grid, .mdc-stats { grid-template-columns: 1fr; }
    .profile-hero { grid-template-columns: 1fr; }
    .profile-skin { min-height: 260px; }
    .auth-photo { display: none; }
    .auth-form { padding: 26px 20px; }
    .skin-picker { grid-template-columns: repeat(3, 1fr); }
    .mdc-layout { grid-template-columns: 1fr; }
    .mdc-nav { border-right: 0; border-bottom: 1px solid #26384e; flex-direction: row; overflow-x: auto; }
    .mdc-nav .back { margin-top: 0; margin-left: auto; }
    .footer-grid { grid-template-columns: 1fr; }
    .account-banner-content > img { display: none; }
    .data-list { grid-template-columns: 1fr; }
    .acp-row { grid-template-columns: 1fr; }
}

/* MDC emergency map markers */
.call-marker {
    position: absolute;
    width: 17px;
    height: 17px;
    border: 2px solid #fff;
    background: #e66068;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 0 6px rgba(230,96,104,.18);
    padding: 0;
    z-index: 4;
    cursor: pointer;
    animation: mdc-call-pulse 1.4s infinite;
}
.call-marker span {
    position: absolute;
    left: 50%;
    top: 22px;
    transform: translateX(-50%) rotate(-45deg);
    background: rgba(4,10,17,.92);
    border: 1px solid #7e3b42;
    color: #ffc2c6;
    padding: 3px 5px;
    white-space: nowrap;
    font: 700 9px/1 Arial, sans-serif;
}
.mdc-map-legend .emergency::before { background: #e66068; border-radius: 1px; transform: rotate(45deg); }
@keyframes mdc-call-pulse { 50% { box-shadow: 0 0 0 11px rgba(230,96,104,0); } }

/* Preserve the TXD radar map's square geometry so coordinate markers align. */
.unit-grid-map,
.mdc-map-panel-large .unit-grid-map {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

/* MDC interactive live map controls and viewport. */
.unit-grid-map[data-mdc-map] {
    cursor: grab;
    touch-action: none;
    outline: none;
    isolation: isolate;
}
.unit-grid-map[data-mdc-map]:focus-visible {
    border-color: #71b7f5;
    box-shadow: 0 0 0 3px rgba(78,156,246,.2);
}
.unit-grid-map[data-mdc-map].mdc-map-is-dragging { cursor: grabbing; }
.mdc-map-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform-origin: 0 0;
    will-change: transform;
}
.mdc-map-stage .mdc-map-image {
    width: 100%;
    height: 100%;
}
.mdc-map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid #47627c;
    border-radius: 4px;
    background: rgba(5,15,25,.94);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    backdrop-filter: blur(5px);
}
.mdc-map-control-button {
    min-width: 34px;
    height: 34px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid #36516c;
    border-radius: 3px;
    background: #10263a;
    color: #f1f7fd;
    font: 700 20px/1 Arial, sans-serif;
    cursor: pointer;
}
.mdc-map-control-button:hover,
.mdc-map-control-button:focus-visible {
    background: #1b4f7c;
    border-color: #70b8f5;
    outline: none;
}
.mdc-map-reset-button {
    width: auto;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mdc-map-zoom-level {
    min-width: 52px;
    color: #a9bdd0;
    font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    text-align: center;
}
.mdc-map-hint {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 22;
    max-width: calc(100% - 24px);
    padding: 5px 8px;
    border: 1px solid rgba(69,94,118,.8);
    border-radius: 3px;
    background: rgba(5,15,25,.88);
    color: #9eb2c5;
    font-size: 9px;
    letter-spacing: .03em;
    pointer-events: none;
}
.mdc-map-popup {
    position: absolute;
    left: 12px;
    bottom: 38px;
    z-index: 35;
    width: min(340px, calc(100% - 24px));
    max-height: calc(100% - 100px);
    overflow: auto;
    padding: 12px;
    border: 1px solid #55728d;
    border-left: 4px solid #4e9cf6;
    border-radius: 4px;
    background: rgba(5,15,25,.97);
    color: #dce9f4;
    box-shadow: 0 12px 35px rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
}
.mdc-map-popup[hidden] { display: none; }
.mdc-map-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #294156;
}
.mdc-map-popup-header strong {
    color: #f2f7fc;
    font: 700 15px/1.25 Georgia, serif;
}
.mdc-map-popup-close {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    margin: 0;
    padding: 0;
    border: 1px solid #3a5269;
    border-radius: 3px;
    background: #0d2133;
    color: #cddbe7;
    font: 700 20px/1 Arial, sans-serif;
    cursor: pointer;
}
.mdc-map-popup-list {
    display: grid;
    gap: 7px;
    margin: 10px 0;
}
.mdc-map-popup-list > div {
    display: grid;
    grid-template-columns: 94px minmax(0,1fr);
    gap: 8px;
}
.mdc-map-popup-list dt {
    color: #7f98ae;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mdc-map-popup-list dd {
    margin: 0;
    color: #e0eaf3;
    font-size: 10px;
    overflow-wrap: anywhere;
}
.mdc-map-popup-focus {
    width: 100%;
    margin: 0;
    border: 1px solid #3f78a8;
    border-radius: 3px;
    background: #174a73;
    color: #fff;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.mdc-map-popup-focus:hover { background: #22618f; }

/* Keep live markers readable while the road map zooms underneath them. */
.mdc-map-stage .unit-marker {
    transform: translate(-50%, -50%) scale(var(--mdc-marker-scale, 1));
    transform-origin: center;
}
.mdc-map-stage .call-marker {
    transform: translate(-50%, -50%) rotate(45deg) scale(var(--mdc-marker-scale, 1));
    transform-origin: center;
}
.unit-marker.mdc-map-marker-selected,
.call-marker.mdc-map-marker-selected {
    z-index: 20;
    outline: 3px solid rgba(255,255,255,.85);
    outline-offset: 4px;
}

@media (max-width: 760px) {
    .mdc-map-controls { top: 7px; right: 7px; }
    .mdc-map-control-button { min-width: 31px; height: 31px; }
    .mdc-map-zoom-level { min-width: 45px; }
    .mdc-map-hint { display: none; }
    .mdc-map-popup { left: 7px; bottom: 7px; width: calc(100% - 14px); }
}

/* Build 1 synchronized call-unit controls */
.mdc-call-units{display:grid;gap:4px;margin-top:10px;padding:9px 10px;border:1px solid #25384b;background:#0d1824}.mdc-call-units strong{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#91a6bb}.mdc-call-units small{display:block}.mdc-call-actions{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}.mdc-call-actions .mdc-call-action{margin:0}.mdc-call-actions button{white-space:nowrap}

/* Dedicated Fire/EMS CAD ---------------------------------------------------- */
.fire-cad-shell {
    --mdc-blue: #d94a1e;
    --mdc-green: #55b978;
    --mdc-amber: #f2aa3c;
    --mdc-red: #e35b4f;
    --mdc-line: #4a2b22;
    --mdc-muted: #bfa397;
    background: #130b08;
    border-color: #5c3328;
    box-shadow: 0 24px 70px rgba(48, 15, 5, .32);
}
.fire-cad-shell .mdc-topbar { background: linear-gradient(90deg, #24110b, #3c190e 58%, #1a0e0a); border-bottom-color: #6d3524; }
.fire-cad-shell .mdc-nav { background: #160d0a; border-right-color: #4a2a20; }
.fire-cad-shell .mdc-nav a.active,
.fire-cad-shell .mdc-nav a:hover { background: linear-gradient(90deg, rgba(217,74,30,.28), rgba(217,74,30,.06)); border-color: #d94a1e; color: #fff4ee; }
.fire-cad-shell .mdc-nav a.active > span,
.fire-cad-shell .mdc-nav a:hover > span,
.fire-cad-shell .mdc-panel-head > a { color: #ff9b72; }
.fire-cad-shell .mdc-content { background: radial-gradient(circle at 78% 0%, rgba(217,74,30,.11), transparent 34%); }
.fire-cad-shell .mdc-panel { background: rgba(29,15,11,.96); border-color: #4a2b22; }
.fire-cad-shell .mdc-table th { background: #351a12; border-color: #5b3328; color: #d8b7a8; }
.fire-cad-shell .mdc-table td { border-color: #47291f; }
.fire-cad-shell .mdc-table tr:hover td { background: #2a160f; }
.fire-cad-shell .mdc-empty { background: #1c0f0b; border-color: #60372a; color: #b99b8e; }
.fire-cad-mark { background: linear-gradient(145deg, #d94a1e, #7f2313); border-color: #f17c52; }
.fire-cad-mark span { color: #fff4ec; }
.fire-stat { border-top-color: #d94a1e !important; }
.fire-cad-shell .mdc-status.working { border-color: #9e442d; background: #572115; color: #ffb091; }
.fire-cad-shell .mdc-status.controlled { border-color: #447653; background: #1c4228; color: #a6efba; }
.fire-cad-shell .mdc-status.open { border-color: #93462f; background: #4b2117; color: #ffad91; }
.fire-incident-card { border-left: 3px solid #d94a1e; }
.fire-incident-card .mdc-status { text-decoration: none; white-space: nowrap; }
.fire-detail-grid { display: grid; grid-template-columns: minmax(320px,.9fr) minmax(0,1.1fr); gap: 18px; }
.fire-incident-notes { border: 1px solid #4d2c22; background: #1b0e0a; padding: 16px; }
.fire-incident-notes strong { color: #ff9b72; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.fire-incident-notes p { color: #f0ddd4; line-height: 1.6; }
.fire-incident-notes small { color: #a8897c; }
.fire-action-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 14px; border: 1px solid #5a3225; background: #21110c; }
.fire-action-bar form { margin: 0; }
.fire-detail-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.75fr); gap: 16px; margin-top: 18px; }
.fire-detail-columns h3 { color: #f4e4dc; margin: 0 0 10px; }
.fire-log-list, .fire-command-list { display: grid; gap: 8px; }
.fire-log-list > div, .fire-command-row { border: 1px solid #48291f; background: #1c0f0b; padding: 11px 12px; }
.fire-log-list strong, .fire-command-row strong { color: #f4dfd5; text-transform: capitalize; }
.fire-log-list p { color: #cbb1a5; margin: 5px 0; font-size: 11px; }
.fire-log-list small, .fire-command-row small { color: #92766a; display: block; margin-top: 5px; }
.fire-command-row { position: relative; padding-right: 105px; }
.fire-command-status { position: absolute; right: 10px; top: 10px; font-size: 8px; letter-spacing: .1em; border: 1px solid #6a4234; padding: 4px 6px; }
.fire-command-status.processed { border-color: #3f7651; color: #a6efba; }
.fire-command-status.rejected { border-color: #984838; color: #ff9c8b; }
.fire-command-status.pending { border-color: #8d6a2d; color: #ffd583; }
.fire-cad-has-update .mdc-live-dot { background: #f2aa3c; box-shadow: 0 0 0 4px rgba(242,170,60,.14); }
@media (max-width: 920px) {
    .fire-detail-grid, .fire-detail-columns { grid-template-columns: 1fr; }
}