/* Accounts: a readable digital ledger, scoped to this screen only. */
@media screen {
  #khata .kh-head { margin-bottom: 1.1rem; }
  #khata .kh-eyebrow { color: var(--txt2); font-size: .8rem; font-weight: 700; }
  #khata h1 { margin-top: .25rem; font-size: 1.6rem; line-height: 1.4; color: var(--p); }
  #khata .kh-intro { margin-top: .4rem; color: var(--txt2); font-size: .9rem; }
  #khata .kh-summary {
    background: #12233F; color: #fff; border-radius: 1.2rem;
    padding: 1.35rem; border-top: .25rem solid #FFA83D;
    box-shadow: 0 .4rem 1rem rgba(18,35,63,.1);
  }
  #khata .kh-summary-label { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
  #khata #kh-lena {
    display: block; margin-block: .65rem; font-size: 2.15rem;
    font-weight: 800; line-height: 1.35; letter-spacing: -.025em;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  #khata .kh-summary-foot {
    display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
    padding-top: .8rem; border-top: 1px solid #41516A;
    color: #DFE8F5; font-size: .85rem;
  }
  #khata .kh-status { display: inline-flex; align-items: center; gap: .4rem; }
  #khata .kh-status::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: #FFA83D; flex: none; }
  #khata .kh-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: 1rem; }
  #khata .kh-actions .btn { flex: 1 1 9rem; min-width: 0; }
  #khata .kh-scope {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .9rem 1rem; border: 1px solid var(--border); border-radius: .8rem;
    color: var(--txt2); font-size: .85rem; line-height: 1.65; background: #fff;
  }
  #khata .kh-scope .ci { margin-top: .15rem; }
  #khata .kh-section-title { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: baseline; margin: 1.6rem 0 .8rem; }
  #khata .kh-section-title h2 { font-size: 1.05rem; color: var(--p); }
  #khata .kh-order { font-size: .8rem; color: var(--txt2); }
  #khata .kh-entry {
    display: grid; grid-template-columns: 2.75rem minmax(0,1fr) auto;
    align-items: center; gap: .85rem; padding: 1rem;
    border: 1px solid var(--border); border-radius: .9rem;
    background: #fff; margin-bottom: .65rem;
  }
  #khata .kh-avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; color: #1B54B0; background: #EAF0FB; font-weight: 800; }
  #khata .kh-person, #khata .kh-balance { min-width: 0; overflow-wrap: anywhere; }
  #khata .kh-person b { display: block; color: var(--p); font-size: 1rem; line-height: 1.5; }
  #khata .kh-person small { display: block; color: var(--txt2); font-size: .8rem; margin-top: .25rem; }
  #khata .kh-balance { text-align: end; font-variant-numeric: tabular-nums; }
  #khata .kh-balance strong { display: block; font-size: 1.15rem; color: #933D0A; }
  #khata .kh-balance span { display: block; font-size: .75rem; color: var(--txt2); }
  #khata .kh-empty { padding: 2rem 1rem; text-align: center; background: #fff; border: 1px dashed #BDCADC; border-radius: 1rem; }
  #khata .kh-empty > .ci { width: 2rem; height: 2rem; color: #52617A; }
  #khata .kh-empty h3 { margin-top: .75rem; font-size: 1.1rem; color: var(--p); }
  #khata .kh-empty p { margin: .5rem auto 0; max-width: 30rem; font-size: .9rem; line-height: 1.7; color: var(--txt2); }
  #khata .kh-warning { margin-bottom: .8rem; }
  #khata .kh-breakdown { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--border); padding-top: .65rem; }
  #khata .kh-breakdown summary { cursor: pointer; padding-block: .5rem; color: var(--p2); font-weight: 700; overflow-wrap: anywhere; }
  #khata .kh-breakdown ul { list-style: none; padding: 0; margin: 0; }
  #khata .kh-breakdown li { display: grid; gap: .3rem; padding-block: .75rem; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
  #khata .kh-breakdown li span { font-size: .85rem; color: var(--txt2); }
  #khata .kh-loading { padding: 1.5rem; color: var(--txt2); text-align: center; }
  #khata .kh-loading .ci { margin-inline-end: .5rem; vertical-align: middle; }
  #khata .kh-intro, #khata .kh-scope, #khata .kh-summary-foot { overflow-wrap: anywhere; }
}
@media screen and (max-width: 30rem) {
  #khata .kh-entry { grid-template-columns: 2.75rem minmax(0,1fr); }
  #khata .kh-balance { grid-column: 2; text-align: start; }
  #khata .kh-summary { padding: 1.1rem; }
  #khata #kh-lena { font-size: 1.85rem; }
}