/* Visual theme. Screen-only treatment keeps the existing print layout intact. */
@media screen {
  :root {
    --paper: #f5f2eb;
    --ink: #213b35;
    --muted: #66746b;
    --line: #e1e5db;
    --teal: #174e40;
    --white: #fffefa;
    --soft: #edf2e9;
    --gold: #a67834;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  html[lang="kn"] { font-family: "Noto Sans Kannada", "Nirmala UI", Tunga, system-ui, sans-serif; }
  body {
    background-color: var(--paper);
    background-image: radial-gradient(ellipse at 10% 0%, #e7ebde 0, transparent 46%);
  }
  .page-shell { max-width: 1100px; padding: 0 38px; }
  .site-header { padding: 26px 0 23px; border-bottom-color: #dce1d5; }
  .brand { gap: 14px; max-width: 770px; }
  .brand-mark {
    width: 49px; height: 52px; border-radius: 16px 16px 16px 4px;
    background: #174638; color: #efd6a3; border: 1px solid #cbb583;
    box-shadow: 0 4px 0 #e0d5bb; font-size: 32px;
  }
  .brand-title { font-size: 14px; font-weight: 650; color: #253f35; }
  .brand-subtitle { color: #78826f; font-size: 11px; letter-spacing: .3px; }
  #language-select {
    border-radius: 100px; border-color: #cbd4c3; background: #ffffffa6;
    padding: 10px 15px; font-size: 13px;
  }
  main { max-width: 930px; }
  .intro {
    position: relative; isolation: isolate; overflow: hidden; margin-top: 28px;
    padding: 29px 190px 42px 32px; background: #164d3f; border: 1px solid #205848;
    border-radius: 23px; color: #fdfbf1;
    box-shadow: 0 10px 28px #204e3810;
  }
  .intro::after {
    content: ""; position: absolute; z-index: -1; top: -150px; right: -100px;
    width: 420px; height: 420px; border: 1px solid #d9c38a22; border-radius: 50%;
    box-shadow: 0 0 0 38px #d9c38a09, 0 0 0 82px #d9c38a06;
  }
  .eyebrow { color: #e4cc95; letter-spacing: 2.1px; font-size: 10px; margin-bottom: 12px; }
  h1 {
    font-family: Georgia, "Times New Roman", serif; font-size: 40px; font-weight: 400;
    line-height: 1.15; color: #fffdf4; letter-spacing: -1px; text-wrap: balance;
  }
  html[lang="kn"] h1 { font-family: inherit; font-size: 30px; font-weight: 550; line-height: 1.65; }
  .intro-copy, html[lang="kn"] .intro-copy { color: #d5e2d3; font-size: 13px; line-height: 1.85; margin-top: 13px; }
  .hero-art { position: absolute; right: 34px; top: 34px; width: 116px; height: 130px; color: #ead6a5; opacity: .8; transform: rotate(7deg); }
  .lookup-panel {
    margin: -19px 20px 0; padding: 24px; border: 1px solid #e0e4d8; border-radius: 18px;
    background: #fffefa; box-shadow: 0 12px 32px #254c3710, 0 2px 5px #254c3704;
  }
  .search-label-row { margin-bottom: 13px; }
  .search-label-row label { font-size: 13px; font-weight: 650; }
  .record-count {
    padding: 4px 10px; border: 1px solid #e5e8dc; border-radius: 100px;
    background: #f5f6ee; font-size: 11px; color: #67735d; line-height: 1.6;
  }
  .search-input-shell { min-height: 60px; border: 1px solid #bacbb7; background: #f7f9f1; border-radius: 11px; }
  .search-input-shell:focus-within { background: white; border-color: #397a5d; box-shadow: 0 0 0 4px #4f8d6412; }
  #name-search { font-size: 16px; padding-block: 15px; }
  .search-icon { color: #688666; }
  .clear-button { border-radius: 8px; background: #e9efdf; color: #4d6e42; }
  .search-hint { color: #737e6d; font-size: 12px; }
  .search-tools { padding-top: 14px; margin-top: 17px; gap: 12px; border-top-color: #edf0e4; }
  .search-tools .text-button { padding: 9px 13px; border: 1px solid #dce4d4; border-radius: 8px; font-size: 12px; }
  .download-link { padding: 10px 15px; border-radius: 8px; background: #174e40; color: #fffdf0; font-size: 12px; box-shadow: 0 3px 8px #174e4010; }
  .download-link:hover { background: #103f32; text-decoration: none; }
  .download-link svg { width: 17px; height: 17px; }
  .suggestions-panel { border-color: #c4d4bd; border-radius: 12px; box-shadow: 0 18px 42px #173d3326; }
  .suggestion { border-radius: 8px; }
  .suggestion:hover, .suggestion[aria-selected="true"] { background: #eef4e5; }
  .suggestion-name { color: #254831; }
  .suggestion-status { font-size: 11px; color: #725c31; background: #f8f1df; border-radius: 5px; padding: 3px 7px; line-height: 1.7; }
  .suggestion-footer { background: #f5f6ed; border-color: #e3e9d9; }
  .welcome-card {
    padding: 18px 20px; margin: 22px 20px 0; border: 1px solid #e4e5d5;
    border-radius: 12px; background: #f9f7ee; gap: 13px;
  }
  .welcome-icon { width: 37px; height: 39px; border-radius: 10px; background: #eee7d4; color: #9b7a3e; }
  .welcome-card h2 { font-size: 14px; color: #4f6047; }
  .welcome-card p { font-size: 12px; line-height: 1.85; }
  .has-record .intro { padding: 18px 26px 35px; margin-top: 24px; border-radius: 18px; }
  .has-record .intro h1, html[lang="kn"] .has-record .intro h1 { font-size: 24px; font-weight: 450; line-height: 1.5; }
  .has-record .hero-art { display: none; }
  .has-record .lookup-panel { padding: 19px 22px; }
  .person-card {
    margin: 26px 20px 0; border: 1px solid #dce2d3; border-radius: 20px; background: #fffefa;
    box-shadow: 0 15px 45px #23482e10, 0 3px 7px #23482e04;
  }
  .person-header {
    position: relative; isolation: isolate; overflow: hidden; padding: 25px 27px; background: #183f34;
    border-bottom: 3px solid #ccb47e; color: #fffdf3;
  }
  .person-header::after {
    content: ""; position: absolute; z-index: -1; border: 1px solid #d9c38a20;
    width: 220px; height: 220px; border-radius: 50%; right: -50px; top: -145px;
    box-shadow: 0 0 0 35px #d9c38a08;
  }
  .person-title-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
  .person-avatar {
    display: grid; place-items: center; width: 58px; height: 64px; flex-shrink: 0; border: 1px solid #cdb47a70;
    border-radius: 15px 15px 15px 4px; background: #345447; color: #ead6a0;
    font: 500 23px/1 system-ui, sans-serif; letter-spacing: -1px;
  }
  .person-meta { color: #cedbc9; font-size: 11px; gap: 9px; }
  .status-label { padding: 3px 8px; background: #f2e5bd; color: #6c531d; font-size: 10px; border: 1px solid transparent; border-radius: 5px; }
  .status-label.unpaid { background: #ffffff13; border-color: #c2d0ba4d; color: #e4e9dc; }
  .status-label.settled { background: #cde1bb; color: #24472c; }
  .status-label.overpaid { background: #ead5a0; color: #5d4517; }
  .person-heading h2 { color: #fffdf4; font-family: inherit; font-size: 31px; line-height: 1.35; font-weight: 600; margin-top: 9px; letter-spacing: -.6px; }
  .record-actions { gap: 8px; }
  .record-actions .button { color: #f4f3df; border-color: #a4b99c66; background: #ffffff08; padding: 9px 11px; font-size: 11px; gap: 7px; }
  .record-actions .button:hover { background: #ffffff16; }
  .record-actions svg { width: 16px; height: 16px; }
  .amount-grid { background: transparent; border: 0; padding: 24px 25px 0; gap: 11px; grid-template-columns: 1fr 1fr 1.12fr; }
  .amount-block, .amount-block + .amount-block {
    padding: 20px 18px; border: 1px solid #e3e7da; border-radius: 12px; background: #f7f8f0; min-width: 0;
  }
  .amount-block p { font-size: 12px; line-height: 1.75; color: #66765e; }
  .amount-block strong { font-family: system-ui, sans-serif; font-size: 31px; color: #284934; margin-top: 13px; line-height: 1.25; letter-spacing: -1px; font-weight: 550; }
  .amount-block > span { font-size: 11px; color: #75806b; }
  .amount-block:nth-child(2) { background: #f0f5e8; border-color: #dce7cf; }
  .balance-block, .amount-grid .balance-block { background: #204f3d; border-color: #204f3d; }
  .balance-block p, .balance-block strong { color: #f5efd8; }
  .balance-block > span { color: #d5dfc6; }
  .balance-block.credit, .amount-grid .balance-block.credit { background: #f4e4bf; border-color: #e6d19c; }
  .balance-block.credit p, .balance-block.credit strong { color: #6b4a1d; }
  .balance-block.credit > span { color: #846b3a; }
  .progress-section { padding: 21px 27px 0; }
  .progress-label { font-size: 11px; color: #6f7b65; margin-bottom: 9px; }
  #progress-percent { color: #477143; font: 600 11px/1.5 system-ui, sans-serif; background: #edf2e5; padding: 3px 7px; border-radius: 5px; }
  .progress-track { height: 7px; background: #e9eddf; }
  .progress-track > span { background: linear-gradient(90deg, #718f59, #315d3e); }
  .history-section { padding: 27px 27px 15px; }
  .history-heading { margin-bottom: 19px; }
  .history-heading h3 { font-size: 16px; font-weight: 600; color: #324a36; }
  .history-heading > span { color: #768269; font-size: 11px; }
  .payment-table th { background: #f3f5ec; padding: 11px 10px; border-bottom: 1px solid #e0e6d6; font-size: 11px; color: #66725a; }
  .payment-table th:first-child { width: 40%; border-radius: 7px 0 0 7px; }
  .payment-table th:nth-child(2) { width: 34%; text-align: right; }
  .payment-table th:last-child { width: 26%; border-radius: 0 7px 7px 0; }
  .payment-table td { padding: 18px 10px; border-color: #e9eddc; font-size: 13px; }
  .payment-table td:nth-child(2) { text-align: right; font-family: system-ui, sans-serif; font-size: 15px; font-weight: 550; color: #2b4b30; }
  .payment-number { width: 26px; height: 26px; border-radius: 50%; background: #e7efda; color: #547b39; font-size: 11px; }
  .payment-empty .payment-number { background: #f0f1e6; color: #8a927b; }
  .payment-empty .payment-label { color: #849076; }
  .payment-table .empty-payment { font-family: inherit; font-size: 11px; font-weight: 400; color: #89917e; line-height: 1.8; }
  .receipt-pill { border: 1px dashed #c2cfb4; border-radius: 5px; padding: 4px 9px; color: #577742; background: #f5f8ed; font-size: 12px; }
  .record-bottom { background: #f4f6ec; border-color: #e1e8d5; padding: 11px 27px; color: #7e886e; font-size: 10px; }
  .record-bottom .text-button { font-size: 12px; color: #426b36; }
  .directory { margin: 27px 20px 0; border: 1px solid #dde3d3; border-radius: 15px; background: #fffefa; box-shadow: 0 5px 20px #23482e05; }
  .directory > summary { padding: 20px 23px; font-size: 14px; gap: 14px; color: #3e593b; }
  .directory-count { background: #f3f5e9; color: #6e805e; padding: 3px 9px; border-radius: 20px; font-size: 11px; }
  .chevron { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #d9e2cf; border-radius: 50%; font-size: 18px; color: #73905b; flex-shrink: 0; }
  .directory-body { padding: 0 23px 23px; }
  .overview { padding: 20px 0; gap: 10px; border-color: #e3e9d8; }
  .overview > div { border: 1px solid #e5e9dc; padding: 13px; border-radius: 9px; background: #f6f8ef; }
  .overview p { font-size: 11px; color: #768568; }
  .overview strong { font-size: 23px; font-weight: 550; color: #365a38; }
  .directory-search { background: #fbfcf7; border-color: #c4d3ba; border-radius: 9px; font-size: 15px; }
  .directory-search-label { font-size: 12px; color: #5c7152; }
  .status-filters { margin-top: 16px; }
  .status-filters button { border-color: #dce4d1; border-radius: 20px; font-size: 11px; padding: 8px 12px; }
  .status-filters button[aria-pressed="true"] { background: #345c3b; border-color: #345c3b; }
  .filter-count { font-size: 10px; border-radius: 10px; background: #edf2e4; color: #657e53; }
  .status-filters button[aria-pressed="true"] .filter-count { background: #ffffff20; color: white; }
  .directory-result-count { font-size: 11px; color: #7c876f; }
  .directory-grid { gap: 10px; }
  .directory-record { border-color: #e3e8da; border-radius: 11px; padding: 14px; gap: 11px; background: #fffffc; min-height: 91px; }
  .directory-record:hover { background: #f0f5e7; border-color: #b5c8a4; box-shadow: 0 4px 10px #27442a08; }
  .directory-avatar { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 39px; border-radius: 9px 9px 9px 3px; font: 500 12px/1 system-ui, sans-serif; color: #687e50; background: #eef2e3; border: 1px solid #e1e6d3; }
  .directory-record[data-status="settled"] .directory-avatar { background: #e3efd9; color: #4b7533; }
  .directory-record[data-status="overpaid"] .directory-avatar { background: #f3e7c8; color: #8e6d2f; }
  .directory-record > .directory-avatar + span { flex: 1; }
  .directory-name { color: #3c5635; font-size: 13px; font-weight: 600; }
  .directory-meta { font-size: 10px; color: #839075; }
  .directory-balance { font: 550 14px/1.7 system-ui, sans-serif; color: #456239; }
  .directory-balance small { color: #879477; font-family: inherit; font-size: 10px; font-weight: 400; }
  .pagination .button { border-radius: 8px; background: #fafcf5; border-color: #d8e1cb; font-size: 12px; color: #54723f; }
  .site-footer { max-width: 890px; padding: 0 10px; color: #8a927d; font-size: 11px; line-height: 1.8; margin-top: 26px; }
  .status-dot { background: #8c9d6e; }
  .toast { background: #224e38; color: #faf6e9; border: 1px solid #899c6b; }
}
@media screen and (max-width: 700px) {
  .page-shell { padding: 0 15px; }
  .site-header { padding: 19px 0; gap: 13px; }
  .brand { gap: 10px; }
  .brand-mark { width: 35px; height: 41px; border-radius: 11px 11px 11px 3px; font-size: 27px; box-shadow: 0 3px 0 #e0d5bb; }
  .brand-title { font-size: 12px; line-height: 1.85; }
  .brand-subtitle { font-size: 10px; }
  #language-select { font-size: 11px; max-width: 94px; padding: 9px 10px; }
  .intro { margin-top: 20px; padding: 24px 23px 36px; border-radius: 18px; }
  .intro h1 { max-width: 400px; font-size: 32px; line-height: 1.2; }
  html[lang="kn"] .intro h1 { font-size: 24px; line-height: 1.65; }
  .intro-copy, html[lang="kn"] .intro-copy { font-size: 12px; line-height: 1.9; margin-top: 11px; max-width: 450px; }
  .hero-art { display: none; }
  .eyebrow { font-size: 9px; margin-bottom: 10px; }
  html[lang="kn"] .eyebrow { font-size: 11px; }
  .lookup-panel { padding: 19px 17px; margin: -17px 9px 0; border-radius: 13px; }
  .search-label-row { margin-bottom: 11px; gap: 8px; }
  .search-label-row label { font-size: 13px; }
  .record-count { padding: 3px 7px; font-size: 10px; }
  .search-tools { gap: 8px; padding-top: 12px; margin-top: 15px; align-items: stretch; }
  .search-tools .text-button { font-size: 11px; padding: 8px 10px; flex: 1; }
  .download-link { font-size: 11px; padding: 9px 11px; flex: 1; }
  .search-hint { font-size: 11px; }
  .welcome-card { margin: 17px 9px 0; padding: 16px 13px; gap: 10px; }
  .welcome-icon { width: 31px; height: 34px; }
  .welcome-icon svg { width: 17px; height: 17px; }
  .welcome-card h2 { font-size: 12px; line-height: 1.9; }
  .welcome-card p { font-size: 11px; line-height: 1.9; }
  .has-record .intro { margin-top: 18px; padding: 16px 22px 32px; }
  .has-record .intro h1, html[lang="kn"] .has-record .intro h1 { font-size: 22px; line-height: 1.6; }
  .has-record .lookup-panel { padding: 16px; }
  .person-card { margin: 23px 9px 0; border-radius: 15px; }
  .person-header { padding: 21px 19px 17px; gap: 19px; }
  .person-title-row { gap: 12px; align-items: center; width: 100%; }
  .person-avatar { width: 47px; height: 54px; font-size: 19px; border-radius: 12px 12px 12px 3px; }
  .person-heading h2 { font-size: 27px; margin-top: 9px; }
  .person-meta { gap: 7px; font-size: 10px; }
  .status-label { font-size: 9px; padding: 2px 6px; }
  .record-actions { gap: 8px; }
  .record-actions .button { font-size: 11px; padding: 9px; }
  .amount-grid { padding: 17px 15px 0; gap: 9px; grid-template-columns: 1fr 1fr; }
  .amount-block, .amount-block + .amount-block { padding: 17px 13px; border-radius: 9px; }
  .amount-block p { font-size: 11px; }
  .amount-block strong { font-size: 27px; margin-top: 10px; }
  .amount-block > span { font-size: 10px; }
  .amount-grid .balance-block { border: 1px solid #204f3d; padding: 17px 15px; gap: 4px 9px; }
  .balance-block strong { font-size: 30px; margin: 0; }
  .progress-section { padding: 18px 19px 0; }
  .progress-label { font-size: 10px; }
  .history-section { padding: 22px 15px 9px; }
  .history-heading { gap: 8px; padding-inline: 4px; }
  .history-heading h3 { font-size: 14px; }
  .history-heading > span { font-size: 10px; }
  .payment-table th { padding: 10px 6px; font-size: 10px; line-height: 1.8; }
  .payment-table th:first-child { width: 37%; }
  .payment-table th:nth-child(2) { width: 34%; }
  .payment-table th:last-child { width: 29%; }
  .payment-table td { padding: 16px 6px; font-size: 12px; }
  .payment-table td:nth-child(2) { font-size: 14px; }
  .payment-table .empty-payment { font-size: 10px; }
  .payment-label { gap: 6px; }
  .payment-number { width: 22px; height: 22px; font-size: 10px; }
  .receipt-pill { padding: 4px 7px; font-size: 12px; }
  .record-bottom { padding: 11px 19px; font-size: 10px; }
  .record-bottom .text-button { font-size: 11px; }
  .directory { margin: 22px 9px 0; border-radius: 12px; }
  .directory > summary { padding: 16px; gap: 8px; font-size: 13px; }
  .directory-count { padding: 3px 7px; font-size: 10px; }
  .directory-body { padding: 0 14px 17px; }
  .overview { gap: 8px; }
  .overview > div { padding: 10px; }
  .overview strong { font-size: 18px; }
  .overview p { font-size: 10px; }
  .directory-record { padding: 13px 11px; gap: 10px; min-height: 84px; }
  .directory-avatar { width: 30px; height: 35px; font-size: 11px; }
  .directory-name { font-size: 14px; }
  .directory-balance { font-size: 14px; }
  .directory-meta, .directory-balance small { font-size: 10px; }
  .status-filters button { font-size: 10px; padding: 8px 11px; }
  .site-footer { padding: 0 10px; font-size: 10px; margin-bottom: 25px; }
}
@media screen and (max-width: 370px) {
  .page-shell { padding: 0 10px; }
  .brand-mark { display: none; }
  .brand-title { font-size: 11px; }
  .intro { padding: 22px 20px 34px; }
  .intro h1 { font-size: 28px; }
  html[lang="kn"] .intro h1 { font-size: 23px; }
  .lookup-panel { margin-inline: 7px; padding: 16px 13px; }
  .search-tools { flex-direction: column; }
  .search-tools .text-button, .download-link { width: 100%; }
  .person-card, .directory { margin-inline: 7px; }
  .person-header { padding: 19px 14px 16px; }
  .person-avatar { width: 38px; height: 47px; font-size: 16px; }
  .person-title-row { gap: 9px; }
  .person-heading h2 { font-size: 24px; }
  .person-meta { font-size: 9px; }
  .amount-grid { padding: 13px 11px 0; gap: 8px; }
  .amount-block, .amount-block + .amount-block { padding: 15px 10px; }
  .amount-block strong { font-size: 24px; }
  .amount-block p { font-size: 10px; }
  .amount-block > span { font-size: 9px; }
  .balance-block strong { font-size: 27px; }
  .progress-section { padding-inline: 15px; }
  .history-section { padding-inline: 11px; }
  .payment-label { gap: 4px; }
  .payment-number { width: 20px; height: 20px; }
  .payment-table td, .payment-table .empty-payment { font-size: 10px; }
  .payment-table td:nth-child(2) { font-size: 13px; }
  .overview { grid-template-columns: 1fr 1fr; }
  .overview > div:last-child { grid-column: 1 / -1; }
  .directory-avatar { width: 26px; height: 31px; font-size: 10px; }
  .directory-name { font-size: 13px; }
  .directory-balance { font-size: 13px; }
}

@media print { .person-avatar { display: none; } }

@media screen {
  .brand-subtitle { color: #647157; }
  .search-hint { color: #647157; }
  #name-search::placeholder { color: #627157; }
  .amount-block p { color: #5c6f50; }
  .amount-block > span { color: #637251; }
  .balance-block p, .balance-block strong { color: #f5efd8; }
  .balance-block > span { color: #d5dfc6; }
  .balance-block.credit p, .balance-block.credit strong { color: #6b4a1d; }
  .balance-block.credit > span { color: #79612d; }
  .progress-label, .history-heading > span { color: #627151; }
  .payment-number { color: #49672f; }
  .payment-empty .payment-number, .payment-empty .payment-label { color: #626e51; }
  .payment-table td.empty-payment:nth-child(2) { color: #667153; font-family: inherit; font-size: 11px; font-weight: 400; line-height: 1.8; }
  .payment-empty td:nth-child(2) { color: #667153; font-weight: 400; }
  .record-bottom { color: #647157; }
  .directory-count { color: #5f704a; }
  .overview p { color: #607250; }
  .filter-count { color: #526b3e; }
  .status-filters button[aria-pressed="true"] .filter-count { color: white; }
  .directory-result-count, .directory-meta, .directory-balance small { color: #647155; }
  .site-footer { color: #657153; }
}
@media screen and (max-width: 700px) {
  .payment-table td.empty-payment:nth-child(2) { font-size: 10px; }
}

@media screen and (max-width: 700px) { .directory-search { font-size: 16px; } #language-select { font-size: 13px; } }

@media screen and (max-width: 700px) { .overview { grid-template-columns: repeat(2, minmax(0,1fr)); } .overview > div:last-child { grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; } .overview > div:last-child strong { margin-top:0; } .directory-count { white-space:nowrap; flex-shrink:0; } }

@media screen { .person-gender { display:inline-flex; align-items:center; padding:2px 7px; border:1px solid #c2d0ba66; border-radius:5px; color:#e4e9dc; font-size:11px; line-height:1.8; } }