@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
    --ink: #15243a;
    --muted: #6f7f94;
    --line: #dce5ee;
    --canvas: #f3f6f9;
    --surface: #ffffff;
    --soft: #f7f9fc;
    --navy: #14243a;
    --blue: #1667d9;
    --blue-deep: #0756bd;
    --teal: #0e9b84;
    --orange: #e77a32;
    --red: #d74f5b;
    --violet: #7357d6;
    --shadow: 0 12px 30px rgba(25, 46, 71, .08);
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--canvas);
    color: var(--ink);
    font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

.shell { width: min(1480px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 56px; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    margin-bottom: 20px;
    background: var(--navy);
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 18px 36px rgba(20, 36, 58, .18);
}

.brand-block { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #eaf3ff;
    color: var(--blue-deep);
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
}
.eyebrow { margin: 0 0 3px; color: #a9c9ef; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, "DM Sans", sans-serif; }
h1 { margin-bottom: 2px; font-size: 23px; line-height: 1.18; letter-spacing: 0; }
.subtitle { margin: 0; color: #bbcadc; font-size: 13px; line-height: 1.4; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a {
    padding: 9px 12px;
    border: 1px solid rgba(211, 228, 247, .24);
    border-radius: 6px;
    color: #dbe8f7;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.tabs a:hover { border-color: #a9c9ef; background: rgba(255,255,255,.1); }
.tabs a.active { border-color: #fff; background: #fff; color: var(--navy); }

.stats-grid, .grid-2, .workbench { display: grid; gap: 16px; }
.stats-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
.workbench { grid-template-columns: minmax(310px, .7fr) minmax(0, 1.3fr); margin-bottom: 16px; }
.grid-2 { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); margin-bottom: 16px; }
.grid-2:last-of-type { grid-template-columns: 1fr 1fr; }

.stat-card, .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
}
.stat-card { min-width: 0; padding: 16px 17px; border-top: 3px solid #d6e4f4; }
.stat-card:nth-child(2) { border-top-color: var(--blue); }
.stat-card:nth-child(3) { border-top-color: var(--teal); }
.stat-card:nth-child(4) { border-top-color: var(--orange); }
.stat-card:nth-child(5) { border-top-color: var(--violet); }
.stat-card span, .stat-card small, .panel-title span, label, .muted, .state-list span, .candidate-card p, .prediction-box small, .meta-grid span, .blank-state span, .bar-row span { color: var(--muted); }
.stat-card span, .panel-title span, .meta-grid span, .prediction-box span { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.stat-card strong { display: block; margin: 8px 0 3px; font-family: Manrope, sans-serif; font-size: 29px; line-height: 1; }
.stat-card small { font-size: 12px; }

.panel { min-width: 0; padding: 18px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-title h2 { margin: 0; font-size: 16px; letter-spacing: 0; }
.panel-title span { padding: 5px 8px; background: #edf4fb; border-radius: 4px; color: #4d6680; }
.lookup-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
label { display: grid; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
input {
    width: 100%;
    height: 42px;
    border: 1px solid #cdd9e6;
    border-radius: 6px;
    padding: 10px 11px;
    outline: none;
    background: #fff;
    color: var(--ink);
    font: inherit;
    transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22, 103, 217, .13); }
button {
    min-height: 42px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    padding: 9px 13px;
    background: var(--blue);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}
button:hover:not(:disabled) { background: var(--blue-deep); transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .65; }

.candidate-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 15px 16px; border: 1px solid #dce8f4; border-radius: 7px; background: #f7fbff; }
.roll { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.candidate-card h3 { margin: 4px 0; font-size: 17px; line-height: 1.25; }
.candidate-card p { margin-bottom: 0; font-size: 13px; }
.rank-box { min-width: 100px; padding: 9px 11px; border-left: 1px solid #d8e4f0; text-align: right; }
.rank-box span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rank-box strong { font-family: Manrope, sans-serif; font-size: 23px; }

.preference-card { display: grid; gap: 12px; margin-bottom: 12px; padding: 15px; border: 1px solid #cfdfee; border-radius: 7px; background: var(--soft); }
.save-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.save-head div { display: grid; gap: 3px; }
.save-head strong { font-size: 14px; }
.save-head span { color: var(--muted); font-size: 12px; }
.save-head button { min-height: 34px; font-size: 12px; }
.preference-help { margin: -2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.preference-list { display: grid; gap: 6px; max-height: 315px; overflow: auto; padding-right: 4px; }
.preference-item { display: grid; grid-template-columns: 26px 26px 28px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 42px; padding: 6px; border: 1px solid #d9e3ed; border-radius: 6px; background: #fff; cursor: grab; transition: border-color .16s ease, box-shadow .16s ease; }
.preference-item:hover { border-color: #a9c7e7; box-shadow: 0 3px 10px rgba(36, 81, 128, .08); }
.preference-item.dragging { opacity: .4; }
.preference-item span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: #eaf3ff; color: var(--blue-deep); font-size: 11px; font-weight: 800; }
.preference-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.move-btn { width: 26px; min-height: 26px; padding: 0; border: 1px solid #dbe5ef; border-radius: 4px; background: #fff; color: #526983; font-size: 14px; }
.move-btn:hover:not(:disabled) { background: #edf5ff; color: var(--blue-deep); transform: none; }
.save-status { min-height: 18px; margin: 0; font-size: 12px; font-weight: 700; }
.save-status.ok { color: var(--teal); }.save-status.error { color: var(--red); }

.prediction-box { position: relative; overflow: hidden; margin-bottom: 12px; padding: 14px 16px; border: 1px solid #afd2ff; border-radius: 7px; background: #edf6ff; }
.prediction-box::after { position: absolute; top: 0; right: 0; width: 5px; height: 100%; background: var(--blue); content: ""; }
.prediction-box strong { display: block; margin: 5px 0 2px; color: var(--blue-deep); font-family: Manrope, sans-serif; font-size: 25px; }
.meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.meta-grid div { min-width: 0; padding: 10px; border: 1px solid #e0e8f0; border-radius: 5px; background: #fff; }
.meta-grid strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.blank-state { display: grid; place-items: center; gap: 8px; min-height: 285px; border: 1px dashed #b8cadb; border-radius: 7px; background: var(--soft); text-align: center; }
.blank-state strong { font-family: Manrope, sans-serif; font-size: 25px; }.blank-state span { font-size: 13px; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 6px; }.table-wrap.compact { max-height: 520px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; } th, td { padding: 10px 11px; border-bottom: 1px solid #e5ebf1; text-align: left; vertical-align: middle; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 1; background: #f0f5fa; color: #4b627c; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #f7fbff; }
.zone-bars { display: grid; gap: 12px; max-height: 520px; overflow: auto; padding-right: 5px; }.bar-row { display: grid; gap: 6px; }.bar-row div:first-child { display: flex; justify-content: space-between; gap: 12px; }.bar-row strong { font-size: 13px; }.bar-row span { font-size: 12px; }.bar { height: 7px; overflow: hidden; border-radius: 8px; background: #e5edf5; }.bar i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.pill-grid { display: flex; flex-wrap: wrap; gap: 8px; }.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 5px; background: #edf3f9; color: #405a76; font-size: 12px; font-weight: 700; }.pill b { color: var(--ink); }.cat-ur { border-left: 3px solid var(--blue); }.cat-obc { border-left: 3px solid var(--orange); }.cat-sc { border-left: 3px solid var(--teal); }.cat-st { border-left: 3px solid var(--red); }.cat-ews { border-left: 3px solid var(--violet); }
.state-list, .match-list { display: grid; gap: 7px; }.state-list div, .match-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 11px; border: 1px solid #e0e8f0; border-radius: 5px; background: var(--soft); }.state-list div { font-size: 13px; }.match-list { margin-top: 14px; }.match-list a { color: var(--ink); text-decoration: none; transition: border-color .16s ease, background .16s ease; }.match-list a:hover { border-color: #b8d2ed; background: #f6fbff; }.match-list span { flex: 1; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }.match-list em { color: var(--blue); font-size: 12px; font-style: normal; font-weight: 700; }.empty { margin: 14px 0 0; padding: 12px; border-radius: 5px; background: #fff4eb; color: #a24d14; font-size: 13px; font-weight: 700; }

@media (max-width: 1120px) { .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .workbench, .grid-2, .grid-2:last-of-type { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .shell { width: min(100% - 24px, 1480px); padding-top: 12px; } .topbar { align-items: flex-start; flex-direction: column; padding: 16px; } .tabs { width: 100%; } .tabs a { flex: 1; text-align: center; } .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stat-card:last-child { grid-column: span 2; } .panel { padding: 14px; } .lookup-form { grid-template-columns: 1fr; }.lookup-form button { width: 100%; }.candidate-card { align-items: stretch; flex-direction: column; }.rank-box { border-top: 1px solid #d8e4f0; border-left: 0; text-align: left; }.meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.save-head { align-items: flex-start; flex-direction: column; }.save-head button { width: 100%; }.preference-item { grid-template-columns: 24px 24px 27px minmax(0, 1fr); gap: 6px; } }