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

* { box-sizing: border-box; }

:root {
    --ink: #192740;
    --muted: #7a879b;
    --line: #e6eaf0;
    --blue: #5268e8;
    --navy: #101b31;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: #f3f5f9;
    color: var(--ink);
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    overflow-x: hidden;
}

button, input, select { font: inherit; }

.site-nav {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 5vw, 76px);
    background: var(--navy);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-decoration: none;
}

.brand strong { font-weight: 800; }
.brand-name { font-family: 'Manrope', 'Segoe UI', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.04em; }

.brand-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #8ea0ba77;
    border-radius: 9px;
    color: #c9f2dc;
    font-size: 18px;
    font-weight: 800;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid #ffffff2c;
    border-radius: 8px;
    color: #d9e1ee;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.back-btn:hover { border-color: #ffffff66; background: #ffffff12; }
.back-btn span { font-size: 16px; }

.app-shell {
    width: min(1480px, 100%);
    margin: 0 auto;
    padding: 30px clamp(18px, 4vw, 58px) 0;
}

.page-intro { margin-bottom: 22px; }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    color: #9aa4b4;
    font-size: 11px;
}

.breadcrumb a { color: #758198; text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); }

.intro-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #77839a;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .12em;
}

.eyebrow span { width: 17px; height: 2px; background: var(--blue); }

#pageTitle {
    margin: 0;
    color: #17243c;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.2;
}

.intro-description { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

.data-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid #dcefe3;
    border-radius: 999px;
    background: #f5fbf7;
    color: #4b8661;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.data-badge-dot, .footnote-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #57b57b;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 21px;
}

.summary-card {
    display: flex;
    min-height: 82px;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid #e9edf3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px #1e293b05;
}

.summary-icon {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    background: #eff2ff;
    color: #5368dc;
    font-size: 20px;
}

.mint-icon { background: #edf9f1; color: #4a9e67; }
.violet-icon { background: #f4f0ff; color: #8261cf; }
.summary-card p { margin: 0 0 4px; color: #7a879b; font-size: 11px; }
.summary-card strong { color: #24324a; font-size: 19px; font-weight: 750; letter-spacing: -.03em; }

.results-panel {
    overflow: hidden;
    border: 1px solid #e5eaf1;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 20px #1c2b4408;
}

.results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 21px 16px;
}

.results-heading h2 { margin: 0; color: #20304a; font-size: 16px; font-weight: 750; }
.results-heading p { margin: 5px 0 0; color: #8792a4; font-size: 11px; }

.results-tag {
    padding: 6px 8px;
    border-radius: 5px;
    background: #f1f3ff;
    color: #586bdd;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
    white-space: nowrap;
}

.table-tools {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 21px 15px;
}

.search-field {
    display: flex;
    min-width: 180px;
    height: 39px;
    flex: 1;
    align-items: center;
    gap: 9px;
    padding: 0 10px 0 12px;
    border: 1px solid #e2e7ef;
    border-radius: 8px;
    background: #fff;
    color: #8a96a8;
}

.search-field:focus-within { border-color: #9caaf2; box-shadow: 0 0 0 3px #5268e812; }
.search-field > span { font-size: 22px; line-height: 1; transform: rotate(-20deg); }

.search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #293750;
    font-size: 12px;
}

.search-field input::placeholder { color: #a0a9b8; }
.search-field kbd { color: #a2abba; font-family: inherit; font-size: 9px; white-space: nowrap; }

.assignment-filter {
    display: flex;
    height: 39px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid #e2e7ef;
    border-radius: 8px;
    color: #8792a4;
    font-size: 11px;
    white-space: nowrap;
}

.assignment-filter select { border: 0; outline: 0; background: transparent; color: #35435b; font-size: 11px; cursor: pointer; }
#resultCount { color: #758198; font-size: 11px; white-space: nowrap; }

.period-groups { display: grid; gap: 13px; }
.period-group { overflow: hidden; border: 1px solid #e5e4df; border-radius: 7px; background: #fcfbf9; }
.period-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; border-bottom: 1px solid #526878; background: var(--navy); }
.period-group-heading h3 { margin: 0; color: var(--paper); font-size: 22px; font-weight: 500; letter-spacing: -.025em; }
.period-group-heading p { margin: 0; color: #d5dfe4; font-size: 11px; white-space: nowrap; }
.period-table-wrap { width: 100%; overflow-x: auto; }
.period-table-wrap.is-scrollable { position: relative; overflow: auto; }
.period-table-wrap.is-scrollable:not(.is-scrolled)::after { position: sticky; z-index: 3; bottom: 0; display: block; height: 26px; margin-top: -26px; background: linear-gradient(to bottom, rgba(252,251,249,0), rgba(252,251,249,.96)); content: ""; pointer-events: none; }

.table-container {
    width: 100%;
    max-height: calc(100vh - 390px);
    min-height: 240px;
    overflow: auto;
    border-top: 1px solid #e9edf3;
}

.preference-table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    color: #35435b;
    font-size: 10px;
    text-align: left;
    white-space: normal;
}

.preference-table:not(.has-suitability) th:nth-child(1) { width: 4%; }
.preference-table:not(.has-suitability) th:nth-child(2) { width: 19%; }
.preference-table:not(.has-suitability) th:nth-child(3) { width: 11%; }
.preference-table:not(.has-suitability) th:nth-child(4) { width: 11%; }
.preference-table:not(.has-suitability) th:nth-child(5),
.preference-table:not(.has-suitability) th:nth-child(6) { width: 6%; }
.preference-table:not(.has-suitability) th:nth-child(7) { width: 7%; }
.preference-table:not(.has-suitability) th:nth-child(8) { width: 4%; }
.preference-table:not(.has-suitability) th:nth-child(9),
.preference-table:not(.has-suitability) th:nth-child(10) { width: 7%; }
.preference-table:not(.has-suitability) th:nth-child(11) { width: 8%; }
.preference-table:not(.has-suitability) th:nth-child(12) { width: 10%; }
.preference-table.has-suitability th:nth-child(1) { width: 4%; }
.preference-table.has-suitability th:nth-child(2) { width: 17%; }
.preference-table.has-suitability th:nth-child(3),
.preference-table.has-suitability th:nth-child(4) { width: 10%; }
.preference-table.has-suitability th:nth-child(5),
.preference-table.has-suitability th:nth-child(6) { width: 6%; }
.preference-table.has-suitability th:nth-child(7) { width: 6%; }
.preference-table.has-suitability th:nth-child(8) { width: 4%; }
.preference-table.has-suitability th:nth-child(9),
.preference-table.has-suitability th:nth-child(10) { width: 7%; }
.preference-table.has-suitability th:nth-child(11) { width: 7%; }
.preference-table.has-suitability th:nth-child(12) { width: 9%; }
.preference-table.has-suitability th:nth-child(13) { width: 7%; }

.preference-table thead th {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 8px 6px;
    background: #f6f5f1;
    color: #72776e;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
    line-height: 1.25;
    overflow-wrap: anywhere;
    border-bottom: 1px solid #e5e4df;
}

.preference-table tbody td {
    padding: 8px 6px;
    border-bottom: 1px solid #eeede8;
    color: #4a4d48;
    vertical-align: middle;
}

.preference-table tbody tr:nth-child(odd) { background: #fff; }
.preference-table tbody tr:nth-child(even) { background: #f5f6f2; }
.preference-table tbody tr:hover { background: #edf1eb; }
.preference-table tbody td:first-child { max-width: 300px; overflow: hidden; color: #69766f; font-weight: 600; text-overflow: ellipsis; }
.preference-table tbody td:nth-child(4) { color: #4a4d48; font-weight: 650; }
.preference-table th, .preference-table td { text-align: left; }
.preference-table tbody td { overflow-wrap: anywhere; }
.preference-table td:nth-child(1), .preference-table td:nth-child(8),
.preference-table td:nth-child(9), .preference-table td:nth-child(10) { white-space: nowrap; }

.code-list { min-width: 0; max-width: none; white-space: normal !important; }

.code-chip {
    margin: 1px 2px 1px 0;
    padding: 3px 4px;
    border: 1px solid #dce3ff;
    border-radius: 6px;
    background: #f3f5ff;
    color: #5267d8;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}

.code-chip:hover, .code-chip:focus-visible { border-color: #5268e8; background: #5268e8; color: white; }

.row-detail-button {
    width: 100%;
    max-width: 100%;
    padding: 5px 4px;
    border: 1px solid #dce3ff;
    border-radius: 7px;
    background: #f3f5ff;
    color: #5267d8;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
    white-space: normal;
    line-height: 1.25;
}

.row-detail-button:hover, .row-detail-button:focus-visible { border-color: #5268e8; background: #5268e8; color: #fff; }

.table-container::-webkit-scrollbar { width: 9px; height: 9px; }
.table-container::-webkit-scrollbar-track { background: #f5f6f9; }
.table-container::-webkit-scrollbar-thumb { border: 2px solid #f5f6f9; border-radius: 8px; background: #cbd2df; }
.table-container::-webkit-scrollbar-thumb:hover { background: #aab4c5; }

.table-footnote { display: flex; align-items: center; gap: 7px; padding: 11px 20px; color: #8893a5; font-size: 10px; }
.table-footnote .footnote-dot { width: 6px; height: 6px; background: #7588eb; }

#loading { display: flex; min-height: 130px; align-items: center; justify-content: center; gap: 10px; color: #7c899d; font-size: 13px; }
.loading-spinner { width: 17px; height: 17px; border: 2px solid #e0e5f1; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#error { margin: 0 21px 15px; padding: 12px 14px; border: 1px solid #f3c9c9; border-radius: 8px; background: #fff6f6; color: #ad3434; font-size: 12px; }

.app-footer { display: flex; justify-content: space-between; padding: 18px 2px 24px; color: #929daf; font-size: 10px; }
.app-footer span:first-child { color: #68758a; font-weight: 650; }

/* Detail dialogs */
.code-dialog { position: fixed; width: min(520px, calc(100vw - 32px)); max-height: 85vh; overflow: auto; margin: auto; padding: 28px; border: 1px solid #e7ebf2; border-radius: 15px; color: #1e293b; box-shadow: 0 24px 80px #0f172a44; }
.code-dialog::backdrop { background: #101b3188; backdrop-filter: blur(3px); }
.code-dialog form { position: absolute; top: 8px; right: 10px; }
.dialog-close { border: 0; background: transparent; color: #64748b; font-size: 1.8rem; cursor: pointer; }
.dialog-type { margin-bottom: 7px; color: #5268e8; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.code-dialog h2 { margin: 0 26px 12px 0; font-size: 20px; }
.code-dialog #dialogDescription { color: #58657a; font-size: 13px; line-height: 1.65; }
.code-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.code-navigation button { padding: 9px 13px; border: 1px solid #dce2ec; border-radius: 8px; background: #f8fafc; color: #263650; font-weight: 600; cursor: pointer; }
.code-navigation button:hover:not(:disabled) { border-color: var(--blue); background: #f2f4ff; color: #4358d5; }
.code-navigation button:disabled { opacity: .4; cursor: default; }
#codePosition { color: #758198; font-size: 11px; }
.related-codes-section { margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--line); }
.related-codes-section h3 { margin: 0 0 8px; font-size: 12px; }
.related-codes-section ul { display: grid; gap: 6px; padding-left: 18px; color: #58657a; font-size: 12px; line-height: 1.5; }
.row-detail-dialog { width: min(900px, calc(100vw - 32px)); }
.row-detail-table-wrap { overflow-x: auto; }
.row-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.row-detail-table th, .row-detail-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: normal; line-height: 1.5; }
.row-detail-table th { width: 190px; color: #334155; }
.row-detail-table td { color: #58657a; overflow-wrap: anywhere; }
.detail-code-list { display: grid; gap: 8px; padding-left: 18px; }

@media (max-width: 900px) {
    .app-shell { padding-right: 20px; padding-left: 20px; }
    .table-container { max-height: calc(100vh - 350px); }
    .preference-table { width: max-content; min-width: 1120px; table-layout: auto; }
}

@media (max-width: 620px) {
    .period-group-heading { align-items: flex-start; flex-direction: column; gap: 4px; padding: 14px; }
    .period-group-heading h3 { font-size: 21px; }
    .period-group-heading p { white-space: normal; }
    .site-nav { min-height: 62px; padding: 0 15px; }
    .site-nav-actions { gap: 6px; }
    .site-nav-actions .account-entry { min-height: 36px; gap: 5px; padding: 0 8px; font-size: 11px; }
    .brand { gap: 8px; font-size: 9px; letter-spacing: .09em; }
    .brand-mark { width: 29px; height: 29px; font-size: 16px; }
    .back-btn { padding: 8px 9px; font-size: 10px; }
    .app-shell { padding: 23px 12px 0; }
    .breadcrumb { margin-bottom: 18px; }
    .intro-row { align-items: flex-start; }
    .intro-description { max-width: 340px; font-size: 11px; line-height: 1.5; }
    .data-badge { padding: 7px 8px; font-size: 9px; }
    .summary-grid { gap: 8px; margin-bottom: 14px; }
    .summary-card { min-height: 72px; gap: 8px; padding: 10px 9px; }
    .summary-icon { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
    .summary-card p { min-height: 24px; font-size: 9px; line-height: 1.25; }
    .summary-card strong { font-size: 15px; }
    .results-heading { padding: 15px 13px 13px; }
    .results-heading h2 { font-size: 14px; }
    .results-heading p { max-width: 240px; font-size: 10px; line-height: 1.4; }
    .results-tag { font-size: 8px; }
    .table-tools { flex-wrap: wrap; gap: 8px; padding: 0 13px 12px; }
    .search-field { flex-basis: 100%; }
    .assignment-filter { flex: 1; }
    #resultCount { margin-left: auto; }
    .table-container { max-height: calc(100vh - 380px); min-height: 210px; }
    .table-footnote { padding: 10px 13px; font-size: 9px; }
    .app-footer { gap: 10px; font-size: 9px; }
    .app-footer span:last-child { text-align: right; }
}

@media (max-width: 380px) {
    .data-badge { display: none; }
    .summary-card { align-items: flex-start; flex-direction: column; }
    .summary-card p { min-height: 0; }
}

/* Shared light editorial style used by the İlan Haritası homepage. */
:root { --ink: #292b28; --muted: #777a78; --line: #e5e4df; --blue: #667f6b; --navy: #faf9f6; }
body { background: #faf9f6; color: var(--ink); }
.site-nav { width: calc(min(1480px,100%) - clamp(18px,4vw,58px) - clamp(18px,4vw,58px)); margin: 0 auto; padding-right: clamp(12px,1.2vw,18px); padding-left: clamp(12px,1.2vw,18px); border-bottom: 1px solid var(--line); background: #faf9f6; }
.site-nav-actions { display: flex; align-items: center; gap: 10px; }
.site-nav-actions .account-entry { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid #d5dfd2; border-radius: 6px; background: #f1f5ef; color: #4d6b50; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-nav-actions .account-entry svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-nav-actions .account-entry:hover { border-color: #b9cbb7; background: #e8efe5; }
.site-nav-actions .back-btn { white-space: nowrap; }

@media (max-width: 900px) {
    .site-nav { width: calc(100% - 40px); }
}

@media (max-width: 620px) {
    .site-nav { width: calc(100% - 24px); }
}
.brand { align-items: baseline; gap: 0; color: var(--ink); font-family: 'Manrope','Segoe UI',sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -.04em; }
.brand-name { font-family: 'Manrope','Segoe UI',sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -.04em; }
.brand-mark { width: auto; height: auto; border: 0; border-radius: 0; color: #667f6b; font-family: 'Playfair Display', Georgia, serif; font-size: 36px; font-weight: 500; line-height: 1; }
.back-btn { border-color: #deded8; border-radius: 5px; color: #626661; }
.back-btn:hover { border-color: #aab6a9; background: #fff; }
.app-shell { padding-top: 30px; }
.breadcrumb a, .breadcrumb { color: #858983; }
.breadcrumb a:hover { color: var(--blue); }
.eyebrow { color: #667f6b; }
.eyebrow span { height: 1px; }
#pageTitle { color: #292b28; font-family: 'Manrope','Segoe UI',sans-serif; font-size: clamp(28px,3vw,38px); font-weight: 500; letter-spacing: -.035em; }
.intro-description { color: #777a78; font-size: 14px; }
.data-badge { border-color: #dce5dc; background: #f4f7f3; color: #5c765f; }
.data-badge-dot, .footnote-dot { background: #667f6b; }
.summary-card { border-color: #e5e4df; border-radius: 7px; background: #fcfbf9; box-shadow: none; }
.summary-icon, .mint-icon, .violet-icon { border-radius: 6px; background: #f0f3ee; color: #667f6b; }
.summary-card strong { color: #292b28; }
.results-panel { border-color: #e5e4df; border-radius: 7px; background: #fcfbf9; box-shadow: none; }
.results-heading h2 { color: #292b28; font-family: 'Manrope','Segoe UI',sans-serif; font-size: 20px; font-weight: 600; }
.results-tag { border-radius: 4px; background: #f0f3ee; color: #667f6b; }
.search-field, .assignment-filter { border-color: #deded8; border-radius: 5px; }
.search-field:focus-within { border-color: #91a092; box-shadow: 0 0 0 3px #667f6b18; }
.search-field input { background: transparent; }
.table-container { border-top-color: #e5e4df; }
.preference-table thead th { background: #f6f5f1; color: #72776e; border-bottom-color: #e5e4df; }
.preference-table tbody td { border-bottom-color: #eeede8; color: #4a4d48; }
.preference-table tbody tr:nth-child(odd) { background: #fff; }
.preference-table tbody tr:nth-child(even) { background: #f5f6f2; }
.preference-table tbody tr:hover { background: #edf1eb; }
.preference-table tbody td:first-child { color: #69766f; }
.code-chip, .row-detail-button { border-color: #dce5dc; border-radius: 5px; background: #f2f5f0; color: #5c765f; }
.code-chip:hover, .code-chip:focus-visible, .row-detail-button:hover, .row-detail-button:focus-visible { border-color: #667f6b; background: #667f6b; color: #fff; }
.table-container::-webkit-scrollbar-track { background: #f3f3ef; }
.table-container::-webkit-scrollbar-thumb { border-color: #f3f3ef; background: #c9cec6; }
.table-footnote { color: #858983; }
.loading-spinner { border-color: #e5e4df; border-top-color: #667f6b; }
.app-footer { border-top: 1px solid var(--line); color: #858983; }
.app-footer span:first-child { color: #292b28; font-family: 'Manrope','Segoe UI',sans-serif; }
.code-dialog { border-color: #e5e4df; border-radius: 8px; background: #fcfbf9; }
.code-dialog::backdrop { background: #292b2866; backdrop-filter: blur(2px); }
.dialog-type { color: #667f6b; }
.code-navigation button { border-color: #deded8; border-radius: 5px; background: #f7f6f2; }
.code-navigation button:hover:not(:disabled) { border-color: #667f6b; background: #f0f3ee; color: #536b58; }
.row-detail-table th, .row-detail-table td { border-bottom-color: #e5e4df; }
.row-detail-table th { color: #464a45; }

.table-tools { flex-wrap: wrap; }
.advanced-filter-toggle {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #dce5dc;
    border-radius: 5px;
    background: #f2f5f0;
    color: #5c765f;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}
.advanced-filter-toggle:hover { border-color: #9eae9f; background: #edf2eb; }
.advanced-filter-toggle span { font-size: 15px; }
#resultCount { margin-left: auto; }
.candidate-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 20px 13px; padding: 10px 12px; border: 1px solid #e2e8df; border-radius: 5px; background: #f5f7f3; color: #626a60; font-size: 11px; line-height: 1.5; }
.candidate-prompt a { color: #56735b; font-weight: 700; text-decoration: none; }
.candidate-prompt a:hover { text-decoration: underline; }
.suitability-cell { min-width: 175px; }
.fit-badge { display: inline-block; max-width: 190px; padding: 6px 8px; border: 1px solid #dce5dc; border-radius: 5px; font-size: 10px; line-height: 1.35; white-space: normal; }
.fit-positive { border-color: #d5dfd2; background: #f0f5ee; color: #506d53; }
.fit-warning { border-color: #e8dfc7; background: #f8f5eb; color: #79683c; }
.fit-negative { border-color: #ebd9d3; background: #f8efec; color: #875446; }
.fit-neutral { border-color: #e5e4df; background: #f5f4f1; color: #777a74; }
@media (max-width: 620px) {
    .sort-filter { flex: 1 1 100%; }
    .sort-filter select { max-width: 100%; }
}

.advanced-filter-dialog { display: flex; width: min(680px,calc(100vw - 28px)); height: min(570px,86vh); max-width: none; max-height: none; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid #e5e4df; border-radius: 10px; background: #fcfbf9; color: #292b28; box-shadow: 0 22px 70px #292b2826; }
.advanced-filter-dialog:not([open]) { display: none; }
.advanced-filter-dialog::backdrop { background: #292b2866; backdrop-filter: blur(2px); }
.advanced-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid #e5e4df; }
.advanced-dialog-header p { margin: 0 0 3px; color: #667f6b; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.advanced-dialog-header h2 { margin: 0; font-family: 'Manrope','Segoe UI',sans-serif; font-size: 21px; font-weight: 600; }
.advanced-dialog-header form, .advanced-dialog-footer form { position: static; }
.advanced-dialog-header .dialog-close { width: 32px; height: 32px; border: 1px solid #e5e4df; border-radius: 50%; background: #fff; color: #626661; font-size: 22px; line-height: 1; }
.advanced-dialog-layout { display: grid; min-height: 0; max-height: none; flex: 1; grid-template-columns: 175px minmax(0,1fr); }
.filter-category-list { overflow-y: auto; padding: 12px; border-right: 1px solid #e5e4df; background: #f6f5f1; }
.filter-category-button { display: flex; width: 100%; min-height: 34px; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 3px; padding: 7px 9px; border: 0; border-radius: 4px; background: transparent; color: #555951; font-size: 11px; text-align: left; cursor: pointer; }
.filter-category-button:hover { background: #eeefe9; }
.filter-category-button.is-active { background: #e8eee6; color: #4e6952; font-weight: 650; }
.filter-category-button small { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 9px; background: #fff; color: #667f6b; font-size: 9px; }
.filter-category-button small[hidden] { display: none; }
.filter-choice-panel { min-width: 0; overflow: hidden; padding: 18px 20px; }
.filter-choice-empty { display: grid; min-height: 280px; place-items: center; color: #858983; font-size: 12px; text-align: center; }
.filter-choice-panel [hidden] { display: none; }
.filter-choice-panel > #filterChoiceContent { display: flex; height: 100%; flex-direction: column; min-height: 0; }
.filter-choice-panel > #filterChoiceContent[hidden] { display: none; }
.filter-choice-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.filter-choice-heading h3 { margin: 0; font-family: 'Manrope','Segoe UI',sans-serif; font-size: 18px; }
.filter-choice-heading span { color: #667f6b; font-size: 10px; }
.filter-choice-help { margin: 0 0 10px; color: #777a78; font-size: 10px; line-height: 1.45; }
.filter-choice-search { width: 100%; height: 36px; margin-bottom: 9px; padding: 0 10px; border: 1px solid #deded8; border-radius: 5px; outline: 0; background: #fff; font: inherit; font-size: 11px; }
.filter-choice-search:focus { border-color: #91a092; box-shadow: 0 0 0 3px #667f6b18; }
.filter-choice-search[hidden] { display: none; }
.filter-choice-options { display: grid; min-height: 0; max-height: none; flex: 1; overflow: auto; align-content: start; gap: 2px; padding: 4px; border: 1px solid #e5e4df; border-radius: 5px; background: #fff; }
.filter-choice-no-options { margin: 8px; color: #858983; font-size: 11px; }
.filter-choice-option { display: flex; min-height: 30px; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 3px; color: #4b4e49; font-size: 11px; line-height: 1.4; cursor: pointer; }
.filter-choice-option:hover { background: #f5f7f3; }
.filter-choice-option[hidden] { display: none; }
.filter-choice-option input { flex: 0 0 auto; accent-color: #667f6b; }
.filter-choice-option span { overflow-wrap: anywhere; }
.advanced-dialog-footer { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 9px 20px; border-top: 1px solid #e5e4df; }
.advanced-dialog-footer button { min-height: 34px; padding: 0 12px; border: 1px solid #deded8; border-radius: 5px; background: transparent; color: #667f6b; font-size: 11px; cursor: pointer; }
.advanced-dialog-footer .advanced-dialog-done { border-color: #667f6b; background: #667f6b; color: #fff; font-weight: 650; }
.advanced-dialog-footer .advanced-dialog-done:hover { background: #536b58; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 21px 13px; }
.active-filters[hidden] { display: none; }
.active-filter-chip { display: inline-flex; max-width: 100%; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #dce5dc; border-radius: 4px; background: #f2f5f0; color: #536b58; font-size: 10px; line-height: 1.35; cursor: pointer; }
.active-filter-chip:hover { border-color: #91a092; background: #eaf0e8; }
.active-filter-chip > span:first-child { overflow-wrap: anywhere; }
.active-filter-remove { flex: 0 0 auto; color: #738574; font-size: 14px; line-height: 1; }

/* Preference results page aligned with the refreshed KPSS calculator design. */
body {
    background: #f7f9f7;
    color: #173847;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.site-nav {
    position: relative;
    width: 100vw;
    min-height: 83px;
    margin-left: calc(50% - 50vw);
    padding: 0 max(calc((100vw - 1200px) / 2), 20px);
    border-bottom: 1px solid #dfe7e4;
    border-radius: 0;
    background: #fff;
}
.brand { color: #173847; font-family: 'Manrope', 'Segoe UI', sans-serif; font-weight: 600; }
.brand-mark { color: #f3b63f; }
.brand-name { color: #173847; font-family: 'Manrope', 'Segoe UI', sans-serif; font-weight: 600; }
.site-nav .site-nav-actions .back-btn { min-height: 44px; padding: 0 15px; border-color: #dfe7e4; border-radius: 10px; color: #173847; }
.back-btn:hover { border-color: #9eb6ba; background: #f4f8f7; color: #19647a; }
.site-nav .account-entry {
    min-height: 44px;
    padding: 0 16px;
    border-color: #dfe7e4;
    border-radius: 10px;
    background: #fff;
    color: #173847;
}
.site-nav .account-entry:hover { border-color: #9eb6ba; background: #f4f8f7; color: #19647a; }
.app-shell { width: min(1200px, calc(100% - 40px)); padding: 30px 0 0; }
.page-intro { margin-bottom: 26px; }
.breadcrumb { margin-bottom: 20px; color: #83939a; }
.breadcrumb a { color: #5d7480; }
.breadcrumb a:hover { color: #19647a; }
.intro-row { align-items: center; }
.eyebrow { gap: 11px; margin-bottom: 13px; color: #19647a; font-size: 11px; letter-spacing: .14em; }
.eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: #f3b63f; }
#pageTitle { color: #173847; font-size: clamp(35px, 4vw, 51px); font-weight: 750; letter-spacing: -.045em; line-height: 1.12; }
.intro-description { margin-top: 12px; color: #5d7480; font-size: 15px; line-height: 1.6; }
.data-badge { padding: 9px 13px; border-color: #dfe7e4; background: #f4f8f7; color: #19647a; font-size: 12px; }
.data-badge-dot { background: #19647a; }
.summary-grid { gap: 14px; margin-bottom: 22px; }
.summary-card { min-height: 96px; gap: 14px; padding: 17px 18px; border-color: #dfe7e4; border-radius: 14px; background: #fff; box-shadow: 0 14px 42px #193d4509; }
.summary-icon, .mint-icon, .violet-icon { width: 44px; height: 44px; border-radius: 11px; background: #eaf2f4; color: #19647a; font-size: 21px; }
.mint-icon { background: #e7f4ef; color: #287658; }
.violet-icon { background: #fdf3d8; color: #9b6b10; }
.summary-card p { color: #5d7480; font-size: 12px; }
.summary-card strong { color: #173847; font-size: 23px; }
.results-panel { overflow: hidden; border: 1px solid #dfe7e4; border-radius: 18px; background: #fff; box-shadow: 0 14px 42px #193d4509; }
.results-heading { padding: 23px 24px 17px; }
.results-heading h2 { color: #173847; font-size: 25px; font-weight: 750; letter-spacing: -.035em; }
.results-heading p { color: #5d7480; font-size: 12px; }
.results-tag { padding: 8px 10px; border: 1px solid #dfe7e4; border-radius: 8px; background: #f4f8f7; color: #19647a; font-size: 10px; }
.table-tools { gap: 10px; padding: 0 24px 17px; }
.search-field, .assignment-filter {
    min-height: 44px;
    border-color: #dfe7e4;
    border-radius: 9px;
    background: #fff;
    color: #5d7480;
}
.search-field:focus-within { border-color: #19647a; box-shadow: 0 0 0 3px #19647a1b; }
.search-field input { color: #173847; font-family: inherit; font-size: 12px; }
.search-field input::placeholder { color: #83939a; }
.search-field kbd { color: #83939a; }
.assignment-filter { padding: 0 11px; font-size: 11px; }
.assignment-filter select { color: #173847; font-family: inherit; }
#resultCount { color: #5d7480; font-size: 11px; }
.advanced-filter-toggle { min-height: 44px; padding: 0 13px; border-color: #dfe7e4; border-radius: 9px; background: #f4f8f7; color: #173847; font-family: inherit; font-size: 11px; }
.advanced-filter-toggle:hover { border-color: #9eb6ba; background: #eaf2f4; }
.active-filters { gap: 7px; padding: 0 24px 14px; }
.active-filter-chip { padding: 6px 9px; border-color: #dfe7e4; border-radius: 8px; background: #f4f8f7; color: #19647a; font-size: 10px; }
.active-filter-chip:hover { border-color: #9eb6ba; background: #eaf2f4; }
.candidate-prompt { margin: 0 24px 15px; padding: 12px 14px; border-color: #dfe7e4; border-radius: 9px; background: #f4f8f7; color: #5d7480; font-size: 11px; }
.candidate-prompt a { color: #19647a; }
.period-groups { gap: 15px; padding: 0 14px; }
.period-group { border: 1px solid #dfe7e4; border-radius: 14px; background: #fff; }
.period-group-heading { min-height: 70px; padding: 14px 17px; border: 0; border-top: 4px solid #f3b63f; border-bottom: 1px solid #dfe7e4; background: #f4f8f7; }
.period-group-heading h3 { color: #173847; font-size: 20px; font-weight: 750; letter-spacing: -.035em; }
.period-group-heading p { color: #5d7480; font-size: 11px; }
.period-table-wrap.is-scrollable:not(.is-scrolled)::after { background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96)); }
.preference-table { color: #435d69; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 10px; }
.preference-table thead th { padding: 10px 6px; border-bottom-color: #dfe7e4; background: #eaf2f4; color: #19647a; font-size: 9px; letter-spacing: .06em; }
.preference-table tbody td { padding: 10px 6px; border-bottom-color: #dfe7e4; color: #435d69; }
.preference-table tbody tr:nth-child(odd) { background: #fff; }
.preference-table tbody tr:nth-child(even) { background: #f4f8f7; }
.preference-table tbody tr:hover { background: #eaf2f4; }
.preference-table tbody td:first-child, .preference-table tbody td:nth-child(4) { color: #173847; }
.code-chip { padding: 4px 5px; border-color: #dfe7e4; border-radius: 5px; background: #eaf2f4; color: #19647a; font-family: inherit; font-size: 9px; }
.code-chip:hover, .code-chip:focus-visible { border-color: #19647a; background: #19647a; color: #fff; }
.row-detail-button { min-height: 30px; padding: 4px 5px; border-color: #dfe7e4; border-radius: 7px; background: #f4f8f7; color: #19647a; font-family: inherit; font-size: 9px; }
.row-detail-button:hover, .row-detail-button:focus-visible { border-color: #19647a; background: #eaf2f4; color: #173847; }
.fit-positive { border-color: #c9ded7; background: #e7f4ef; color: #287658; }
.fit-warning { border-color: #ebd8a9; background: #fdf3d8; color: #8a6419; }
.fit-negative { border-color: #e7cdc5; background: #f8efec; color: #875446; }
.fit-neutral { border-color: #dfe7e4; background: #f4f8f7; color: #5d7480; }
.table-container::-webkit-scrollbar-track { background: #f4f8f7; }
.table-container::-webkit-scrollbar-thumb { border-color: #f4f8f7; background: #a8bcbd; }
.table-footnote { padding: 13px 24px; color: #5d7480; }
.table-footnote .footnote-dot { background: #19647a; }
#loading { color: #5d7480; }
.loading-spinner { border-color: #dfe7e4; border-top-color: #19647a; }
#error { border-color: #ebd8d2; border-radius: 9px; background: #f8efec; color: #875446; }
.app-footer { margin-top: 25px; padding: 22px 0 26px; border-top: 1px solid #dfe7e4; color: #5d7480; }
.app-footer span:first-child { color: #173847; }
.code-dialog, .advanced-filter-dialog { border-color: #dfe7e4; border-radius: 16px; background: #fff; color: #173847; box-shadow: 0 24px 80px #193d4530; }
.code-dialog::backdrop, .advanced-filter-dialog::backdrop { background: #17384777; backdrop-filter: blur(3px); }
.dialog-close { color: #173847; }
.dialog-type, .advanced-dialog-header p { color: #19647a; }
.code-navigation button, .advanced-dialog-footer button { border-color: #dfe7e4; border-radius: 8px; background: #f4f8f7; color: #173847; }
.code-navigation button:hover:not(:disabled), .advanced-dialog-footer button:hover { border-color: #9eb6ba; background: #eaf2f4; color: #19647a; }
.advanced-dialog-header, .advanced-dialog-footer { border-color: #dfe7e4; }
.advanced-dialog-header h2, .filter-choice-heading h3 { color: #173847; }
.advanced-dialog-header .dialog-close { border-color: #dfe7e4; border-radius: 10px; color: #173847; }
.filter-category-list { border-color: #dfe7e4; background: #f4f8f7; }
.filter-category-button { border-radius: 7px; color: #435d69; }
.filter-category-button:hover { background: #eaf2f4; color: #173847; }
.filter-category-button.is-active { background: #eaf2f4; color: #173847; box-shadow: inset 3px 0 #f3b63f; }
.filter-category-button small { background: #fff; color: #19647a; }
.filter-choice-panel { color: #173847; }
.filter-choice-empty, .filter-choice-help { color: #5d7480; }
.filter-choice-search, .filter-choice-options { border-color: #dfe7e4; border-radius: 8px; }
.filter-choice-search:focus { border-color: #19647a; box-shadow: 0 0 0 3px #19647a1b; }
.filter-choice-option { border-radius: 6px; color: #435d69; }
.filter-choice-option:hover { background: #f4f8f7; }
.filter-choice-option input { accent-color: #19647a; }
.advanced-dialog-footer .advanced-dialog-done { border-color: #173847; border-radius: 8px; background: #173847; color: #fff; }
.advanced-dialog-footer .advanced-dialog-done:hover { background: #255363; }
.filter-choice-heading span { color: #19647a; }
.filter-choice-no-options { color: #5d7480; }
.site-nav :focus-visible, .app-shell :focus-visible { outline-color: #19647a; }

@media (max-width: 900px) {
    .app-shell { width: calc(100% - 40px); padding-top: 25px; }
    .site-nav { padding-right: 20px; padding-left: 20px; }
}
@media (max-width: 620px) {
    .site-nav { min-height: 72px; padding-right: 12px; padding-left: 12px; }
    .app-shell { width: calc(100% - 24px); padding-top: 22px; }
    .intro-row { gap: 10px; }
    #pageTitle { font-size: 36px; letter-spacing: -1.3px; }
    .intro-description { max-width: 360px; font-size: 13px; }
    .summary-grid { gap: 8px; }
    .summary-card { min-height: 82px; align-items: flex-start; flex-direction: column; gap: 6px; padding: 10px; border-radius: 11px; }
    .summary-icon, .mint-icon, .violet-icon { width: 31px; height: 31px; border-radius: 8px; font-size: 17px; }
    .summary-card p { min-height: 24px; margin-bottom: 2px; font-size: 9px; }
    .summary-card strong { font-size: 16px; }
    .results-panel { border-radius: 14px; }
    .results-heading { padding: 16px 14px 13px; }
    .table-tools { padding-right: 14px; padding-left: 14px; }
    .active-filters { padding-right: 14px; padding-left: 14px; }
    .period-groups { padding: 0 8px; }
    .period-group-heading { padding: 13px 12px; }
    .period-group-heading h3 { font-size: 18px; }
    .period-table-wrap { overflow-x: auto; }
    .preference-table { min-width: 1120px; table-layout: auto; }
    .table-footnote { padding: 11px 14px; }
    .app-footer { gap: 10px; }
}
@media (max-width: 620px) {
    .advanced-filter-dialog { height: 86vh; max-height: 86vh; }
    .advanced-dialog-header { padding: 15px 16px 12px; }
    .advanced-dialog-layout { min-height: 0; max-height: none; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
    .filter-category-list { display: grid; max-height: 142px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 5px; padding: 8px; border-right: 0; border-bottom: 1px solid #e5e4df; }
    .filter-category-button { min-height: 30px; margin: 0; padding: 5px 7px; font-size: 10px; }
    .filter-choice-panel { padding: 13px 14px; }
    .filter-choice-empty { min-height: 180px; }
    .advanced-dialog-footer { padding: 8px 14px; }
    .active-filters { gap: 5px; padding: 0 13px 11px; }
    .active-filter-chip { font-size: 9px; }
    .candidate-prompt { margin: 0 13px 11px; }
}