/* Mobile-first. Breakpoints: 720px (tablet: top tabs, tables) and 1024px (desktop). */
:root {
  --brand:#7a1f1f; --brand2:#a8432a; --bg:#f7f2ea; --card:#fff; --ink:#2a211c; --muted:#6f625a; --line:#eadfd2;
  --soft:#fbf5ec; --ok:#1d7a45; --warn:#9a6300; --bad:#b3261e;
  --nav-h:62px; --safe-b:env(safe-area-inset-bottom, 0px); --radius:14px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, "Noto Sans Telugu", "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
h1,h2,h3 { margin:0; color:var(--brand); line-height:1.25; } h1{font-size:1.35rem; margin-bottom:.8rem} h2{font-size:1.15rem} h3{font-size:1rem; margin:1.1rem 0 .5rem}
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- header ---------- */
.env-banner { background:#ffe14d; color:#3a2d00; font-weight:700; font-size:.72rem; padding:3px 12px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; padding:8px 14px; background:var(--brand); color:#fff; box-shadow:0 1px 6px #0002; }
.brand { display:flex; gap:9px; align-items:center; flex:1; min-width:0; }
.brand img { width:34px; height:34px; border-radius:9px; }
.brand strong { display:block; font-size:1rem; line-height:1.1; } .brand small { display:block; font-size:.72rem; opacity:.8; }
.net { font-size:0; display:flex; align-items:center; }
.net::before { content:""; width:10px; height:10px; border-radius:50%; background:#6fdc8c; box-shadow:0 0 0 3px #ffffff25; }
.net.off::before { background:#ff8a80; }
.net.off { font-size:.75rem; gap:6px; }
.user-menu { position:relative; }
.user-menu summary { list-style:none; cursor:pointer; } .user-menu summary::-webkit-details-marker{display:none}
.avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#ffffff26; color:#fff; font-weight:700; border:1px solid #ffffff55; }
.menu-pop { position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:#fff; color:var(--ink); border-radius:12px; padding:12px; box-shadow:0 8px 28px #0003; display:grid; gap:8px; z-index:30; }
.menu-pop strong { font-size:.95rem; }

/* ---------- layout ---------- */
main { max-width:1120px; margin:0 auto; padding:12px 12px calc(var(--nav-h) + var(--safe-b) + 16px); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:14px; }
.narrow { max-width:460px; margin-left:auto; margin-right:auto; }
#bootView, #loginView, #passwordView, #bootstrapView { margin-top:8vh; }
.head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.head-acts { display:flex; gap:6px; }
.box { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:10px 0; background:var(--soft); }
.box > summary { cursor:pointer; font-weight:700; color:var(--brand); padding:4px 0; }
.box[open] > summary { margin-bottom:8px; }

/* ---------- forms ---------- */
label { display:block; font-weight:600; font-size:.85rem; color:#4b3f38; margin-bottom:10px; }
input, select { display:block; width:100%; margin-top:4px; min-height:46px; padding:10px 12px; font:inherit; font-size:16px; color:var(--ink);
  border:1px solid #d6c8b8; border-radius:10px; background:#fff; appearance:none; }
select { background-image:linear-gradient(45deg,transparent 50%,#7a6a60 50%),linear-gradient(135deg,#7a6a60 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%; background-size:6px 6px; background-repeat:no-repeat; padding-right:32px; }
input:focus, select:focus { outline:2px solid var(--brand2); outline-offset:0; border-color:transparent; }
input[readonly] { background:var(--soft); font-family:ui-monospace, monospace; letter-spacing:.05em; }
button, a.button { font:inherit; font-weight:600; min-height:44px; padding:10px 16px; border-radius:10px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
button:disabled { opacity:.55; cursor:wait; }
button.ghost { background:#fff; color:var(--brand); } button.danger { background:#fff; color:var(--bad); border-color:#e3b2ad; }
button.small { min-height:36px; padding:6px 12px; font-size:.85rem; }
button.wa, a.button.wa { background:#1f9d55; border-color:#1f9d55; color:#fff; }
.block { width:100%; }
.row { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .row > .block { flex:1 1 100%; }
.row.tight { flex-wrap:nowrap; margin-top:4px; } .row.tight input { margin:0; } .row.tight .contact-btn { margin:0; } .row.tight button { flex:none; }
.grid { display:grid; grid-template-columns:1fr; gap:0 12px; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .pair label { margin:0; font-size:.78rem; }
.seg { border:0; padding:0; margin:0 0 12px; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#efe5d8; border-radius:12px; padding:4px; }
.seg legend { font-weight:600; font-size:.85rem; color:#4b3f38; margin-bottom:6px; padding:0; }
.seg label { margin:0; position:relative; }
.seg input { position:absolute; opacity:0; inset:0; margin:0; min-height:0; }
.seg span { display:flex; align-items:center; justify-content:center; min-height:40px; border-radius:9px; font-weight:700; color:var(--muted); }
.seg input:checked + span { background:#fff; color:var(--brand); box-shadow:0 1px 4px #0002; }
.seg input:focus-visible + span { outline:2px solid var(--brand2); }
.form-actions { display:grid; grid-template-columns:1fr auto; gap:8px; position:sticky; bottom:calc(var(--nav-h) + var(--safe-b) + 8px);
  background:linear-gradient(#fff0, #fff 30%); padding-top:10px; margin-top:4px; }
.msg { min-height:1.2em; margin:.5rem 0 0; font-size:.9rem; } .msg:empty { min-height:0; margin:0; }
.msg.error{color:var(--bad)} .msg.ok{color:var(--ok); background:#e9f6ee; padding:10px 12px; border-radius:10px; overflow-wrap:anywhere}
.note { color:var(--muted); font-size:.85rem; margin:.2rem 0 .8rem; } .note.warn{color:var(--warn); font-weight:600; background:#fff6dc; padding:8px 10px; border-radius:10px}

/* ---------- navigation: bottom bar on phones ---------- */
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:25; display:flex; background:#fff; border-top:1px solid var(--line);
  padding:4px 4px calc(4px + var(--safe-b)); box-shadow:0 -2px 12px #0000000f; }
.tabs button { flex:1 1 0; min-width:0; min-height:var(--nav-h); flex-direction:column; gap:2px; padding:4px 2px; border:0; border-radius:10px;
  background:transparent; color:var(--muted); font-size:.68rem; font-weight:600; }
.tabs button .full { display:none; }
.tabs button.active { color:var(--brand); background:#f6ece2; }
body.is-master .tabs button[data-more] { display:none; }
.more-btn { display:none !important; } body.is-master .tabs .more-btn:not([hidden]) { display:flex !important; }
.sheet { width:100%; max-width:100%; margin:auto 0 0; border:0; border-radius:18px 18px 0 0; padding:16px 16px calc(16px + var(--safe-b)); }
.sheet::backdrop { background:#0006; }
.sheet-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.sheet-grid button { flex-direction:column; min-height:78px; background:var(--soft); color:var(--brand); border-color:var(--line); }
.sheet-grid button.active { background:var(--brand); color:#fff; }

/* ---------- lists ---------- */
.filters { display:grid; gap:8px; margin-bottom:10px; } .filters input, .filters select { margin:0; }
.date-filter > summary { cursor:pointer; color:var(--brand); font-weight:600; font-size:.85rem; padding:4px 0; }
.date-filter[open] > summary { margin-bottom:6px; }
.kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:8px 0 12px; }
.kpi { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:7px 8px; min-width:0; }
.kpi span { display:block; font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi strong { display:block; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list .item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.list .item:last-child { border-bottom:0; }
.item > div:first-child { min-width:0; } .item strong { display:block; }
.item small, td small { display:block; color:var(--muted); font-size:.8rem; overflow-wrap:anywhere; }
.acts { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .acts button { min-height:36px; padding:6px 10px; font-size:.82rem; }
.badge { display:inline-block; font-size:.7rem; font-weight:600; padding:2px 8px; border-radius:99px; background:#f1e4d3; color:var(--brand); margin:3px 4px 0 0; vertical-align:middle; }
.badge.warn { background:#fff0c2; color:var(--warn); } .badge.ok{background:#e3f4ea; color:var(--ok)} .badge.bad{background:#fde2df; color:var(--bad)} .badge:empty{display:none}
.empty { color:var(--muted); font-style:italic; padding:8px 0; }
.menu { position:relative; } .menu > summary { list-style:none; } .menu > summary::-webkit-details-marker{display:none}
.menu > summary { display:grid; place-items:center; width:40px; height:36px; border:1px solid var(--line); border-radius:10px; cursor:pointer; color:var(--brand); font-weight:900; letter-spacing:1px; }
.menu .menu-pop { min-width:210px; } .menu .menu-pop button { width:100%; justify-content:flex-start; }
.member { flex-wrap:wrap; } .member > div:first-child { flex:1 1 220px; }
.member .acts { flex-wrap:nowrap; margin-left:auto; } .member .acts > button { white-space:nowrap; }
.member small { overflow-wrap:normal; word-break:break-word; }

/* name typeahead */
.suggest-wrap { position:relative; }
.suggest-list { position:absolute; left:0; right:0; top:calc(100% - 6px); z-index:12; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 26px #0002; overflow:hidden; max-height:320px; overflow-y:auto; }
.suggest-list button { display:block; width:100%; text-align:left; min-height:52px; padding:8px 12px; border:0; border-bottom:1px solid var(--line);
  border-radius:0; background:#fff; color:var(--ink); font-weight:400; }
.suggest-list button:last-child { border-bottom:0; } .suggest-list button:active, .suggest-list button:hover { background:var(--soft); }
.suggest-list small { display:block; color:var(--muted); font-size:.8rem; }

/* donation cards (phone) */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#f7eee2; font-size:.78rem; color:#5a4a40; }
@media (max-width:719.98px) {
  table, tbody, tr, td { display:block; } thead { display:none; }
  tr { border:1px solid var(--line); border-radius:12px; margin-bottom:8px; padding:10px 12px; background:#fff; }
  td { border:0; padding:0; }
  .dtable tr { display:grid; grid-template-columns:1fr auto; column-gap:10px; row-gap:3px;
    grid-template-areas:"donor gift" "phone date" "receipt member" "acts acts"; }
  .dtable .c-donor { grid-area:donor; min-width:0; } .dtable .c-donor strong { font-size:.98rem; }
  .dtable .c-gift { grid-area:gift; text-align:right; font-size:1rem; max-width:45vw; overflow-wrap:anywhere; }
  .dtable .c-phone, .dtable .c-date, .dtable .c-receipt, .dtable .c-member { font-size:.78rem; color:var(--muted); }
  .dtable .c-phone { grid-area:phone; } .dtable .c-date { grid-area:date; text-align:right; }
  .dtable .c-receipt { grid-area:receipt; font-family:ui-monospace, monospace; } .dtable .c-member { grid-area:member; text-align:right; }
  .dtable .c-acts { grid-area:acts; display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:8px; }
  .dtable .c-acts button { min-height:38px; padding:4px; font-size:.82rem; }
  .ktable tr { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
  .ktable td:first-child { grid-column:1 / -1; font-weight:700; color:var(--ink); }
  .ktable td:not(:first-child)::before { content:attr(data-label); display:block; font-size:.68rem; color:var(--muted); text-transform:uppercase; }
}

/* audit cards */
.audit-item { border-bottom:1px solid var(--line); padding:9px 0; }
.audit-item .when { font-size:.75rem; color:var(--muted); }
.audit-item .what { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:2px 0; }
.audit-item .who { font-size:.85rem; font-weight:600; overflow-wrap:anywhere; }
.audit-item details summary { cursor:pointer; font-size:.78rem; color:var(--brand); }
.audit-item details p { margin:4px 0 0; font-size:.78rem; color:var(--muted); overflow-wrap:anywhere; }
.show-more { margin-top:10px; }

/* analytics */
.cols { display:grid; grid-template-columns:1fr; gap:0 12px; }
.bars { display:grid; gap:8px; }
.bar { display:grid; grid-template-columns:1fr auto; grid-template-areas:"label value" "track track"; gap:3px 8px; font-size:.82rem; }
.bar span { grid-area:label; color:#4b3f38; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bar b { grid-area:value; font-size:.82rem; }
.bar div { grid-area:track; background:#f1e4d3; border-radius:4px; height:8px; } .bar i { display:block; height:8px; border-radius:4px; background:var(--brand2); }

/* ---------- toast & dialogs ---------- */
.toast { position:fixed; left:50%; bottom:calc(var(--nav-h) + var(--safe-b) + 16px); transform:translate(-50%, 20px); background:#2a211c; color:#fff;
  padding:10px 16px; border-radius:12px; width:max-content; max-width:92vw; transition:transform .2s, opacity .2s; z-index:40; opacity:0; pointer-events:none; font-size:.9rem; }
.toast.show { transform:translate(-50%, 0); opacity:1; } .toast.error{background:var(--bad)} .toast.warn{background:var(--warn)}
#receiptDialog { border:0; padding:0; width:100%; max-width:100%; height:100%; max-height:100%; margin:0; background:#fff; }
#receiptDialog::backdrop { background:#0008; }
#receiptDialog .receipt { margin:12px; }
.receipt-acts { position:sticky; bottom:0; display:grid; grid-template-columns:1fr 1fr auto; gap:8px; padding:10px 12px calc(10px + var(--safe-b)); background:#fff; border-top:1px solid var(--line); }
.receipt { border:2px solid var(--brand); border-radius:12px; padding:14px; }
.receipt header { text-align:center; display:grid; gap:4px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.receipt header em { font-style:normal; font-weight:700; color:var(--brand); }
.receipt .meta { display:grid; gap:2px; margin:10px 0; font-size:.88rem; }
.receipt .line { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:.92rem; }
.receipt .line b { text-align:right; overflow-wrap:anywhere; }
.receipt footer { text-align:center; margin-top:12px; }

/* ---------- tablet & desktop ---------- */
@media (min-width:720px) {
  main { padding:16px 20px 32px; }
  .card { padding:18px; }
  .grid { grid-template-columns:1fr 1fr; }
  .filters { grid-template-columns:2fr 2fr; align-items:start; }
  .filters .date-filter { grid-column:1 / -1; }
  .kpis { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
  .kpi { padding:10px 12px; } .kpi strong { font-size:1.15rem; }
  .tabs { position:sticky; top:52px; bottom:auto; z-index:15; margin:0 -20px 14px; padding:6px 20px; border-top:0; border-bottom:1px solid var(--line);
    box-shadow:none; overflow-x:auto; scrollbar-width:none; gap:4px; }
  .tabs button { flex:none; flex-direction:row; min-height:40px; padding:6px 12px; font-size:.86rem; gap:6px; }
  .tabs button svg { width:18px; height:18px; }
  .tabs button .short { display:none; } .tabs button .full { display:inline; }
  body.is-master .tabs button[data-more] { display:flex; }
  body.is-master .tabs .more-btn:not([hidden]) { display:none !important; }
  .form-actions { position:static; background:none; grid-template-columns:auto auto; justify-content:start; }
  .cols { grid-template-columns:1fr 1fr; }
  .dtable td.c-acts { white-space:nowrap; } .dtable .c-acts button { min-height:34px; padding:4px 10px; font-size:.8rem; margin:0 2px 2px 0; }
  .receipt .meta { display:flex; justify-content:space-between; flex-wrap:wrap; }
  #receiptDialog { width:min(560px, 94vw); height:auto; max-height:92vh; margin:auto; border-radius:16px; }
  .toast { bottom:24px; }
}
@media (min-width:1024px) {
  .filters { grid-template-columns:2fr 2fr 1.6fr; } .filters .date-filter { grid-column:auto; }
  .grid { grid-template-columns:repeat(4, 1fr); }
  #memberForm .grid { grid-template-columns:repeat(3, 1fr); }
  .tabs { overflow:visible; flex-wrap:wrap; }
}

@media print {
  body > *:not(#receiptDialog), .no-print { display:none !important; }
  #receiptDialog { position:static; display:block; width:100%; height:auto; max-height:none; border:0; box-shadow:none; padding:0; margin:0; }
  #receiptDialog::backdrop { display:none; } #receiptDialog .receipt { margin:0; }
}

/* ---------- splash ---------- */
.splash { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:radial-gradient(circle at 50% 40%, #9a2a22, #5a1515); color:#fff; padding:24px; text-align:center;
  transition:opacity .45s ease; animation:splash-fallback .5s ease 8s forwards; }
.splash img { width:min(62vw, 300px); max-height:62vh; object-fit:cover; border-radius:18px; border:3px solid #e8c36a; box-shadow:0 12px 40px #0006; }
.splash-text strong { display:block; font-size:1.05rem; line-height:1.4; max-width:320px; }
.splash-text span { display:block; margin-top:4px; font-size:.85rem; opacity:.85; letter-spacing:.04em; }
.splash.gone { opacity:0; pointer-events:none; }
@keyframes splash-fallback { to { opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion: reduce) { .splash { transition:none; } }

/* contact picker button */
.contact-btn { flex:none; min-height:46px; margin-top:4px; padding:6px 10px; }
.contact-btn span { font-size:.8rem; }
@media (max-width:380px) { .contact-btn span { display:none; } }

/* expenses */
.expense { align-items:flex-start; }
.exp-side { display:grid; justify-items:end; gap:6px; margin-left:auto; } .exp-side b { font-size:1rem; white-space:nowrap; }
.expense .acts { justify-content:flex-end; }
.year-select { width:auto; min-height:36px; padding:4px 30px 4px 10px; margin:0; font-size:.9rem; }

/* language switch */
.lang-switch { display:inline-flex; border:1px solid var(--line); border-radius:99px; overflow:hidden; margin-bottom:12px; }
.lang-switch button { min-height:34px; padding:4px 14px; border:0; border-radius:0; background:#fff; color:var(--muted); font-size:.85rem; }
.lang-switch button.active { background:var(--brand); color:#fff; }
.menu-pop .lang-switch { margin:4px 0 0; } .menu-pop .lang-switch button { width:auto; }
#loginView .lang-switch { float:right; margin:0 0 8px 8px; }

/* data quality */
.dq-chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.dq-chip { min-height:34px; padding:4px 10px; font-size:.8rem; font-weight:600; border-radius:99px; background:#f1e4d3; color:var(--brand); border:0; }
.dq-chip.bad { background:#fde2df; color:var(--bad); } .dq-chip.warn { background:#fff0c2; color:var(--warn); }
.dq > summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.dq > summary .badge { margin:0; }
.dq-clear { color:var(--ok); }

/* excel import */
#importBox input[type=file] { padding:8px; }
.import-table td, .import-table th { font-size:.8rem; white-space:nowrap; } .import-table td:last-child { white-space:normal; min-width:160px; }
@media (max-width:719.98px) { .import-table td { white-space:normal; } }
input[type=checkbox] { appearance:auto; -webkit-appearance:checkbox; display:inline-block; width:22px; height:22px; min-height:0; padding:0; margin:0; accent-color:var(--brand); vertical-align:middle; }
#importBtn { position:sticky; bottom:calc(var(--nav-h) + var(--safe-b) + 8px); margin-top:8px; box-shadow:0 4px 14px #0002; }
@media (min-width:720px) { #importBtn { bottom:12px; } }

/* Excel files store + viewer */
label.check { display:flex; align-items:center; gap:8px; font-weight:500; margin:8px 0; }
.sheet-viewer { width:100%; max-width:100%; height:100%; max-height:100%; margin:0; padding:0; border:0; background:#fff; }
.sheet-viewer[open] { display:flex; flex-direction:column; }
.sheet-viewer::backdrop { background:#0008; }
.sheet-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px calc(10px); border-bottom:1px solid var(--line); background:var(--soft); }
.sheet-title { min-width:0; } .sheet-title strong { display:block; overflow-wrap:anywhere; } .sheet-title small { color:var(--muted); }
.sheet-note { margin:6px 12px; }
.xl-grid { flex:1; overflow:auto; margin:0 12px 12px; border:1px solid #cfd6de; -webkit-overflow-scrolling:touch; }
.xl-grid table { border-collapse:collapse; width:max-content; min-width:100%; font-size:.85rem; }
.xl-grid th, .xl-grid td { border:1px solid #dfe3e8; padding:4px 8px; min-width:90px; max-width:320px; white-space:pre-wrap; vertical-align:top; background:#fff; }
.xl-grid thead th { position:sticky; top:0; z-index:2; background:#eef1f4; color:#555; font-weight:600; text-align:center; min-width:60px; }
.xl-grid tbody th { position:sticky; left:0; z-index:1; background:#eef1f4; color:#555; font-weight:600; min-width:44px; text-align:right; white-space:nowrap; }
.xl-grid thead th.corner { left:0; z-index:3; }
.xl-grid td[contenteditable]:focus { outline:2px solid var(--brand2); outline-offset:-2px; background:#fffdf5; }
.xl-grid .row-del { min-height:0; padding:0 4px; margin-left:4px; border:0; background:none; color:var(--bad); font-size:1rem; line-height:1; }
label.upload { position:relative; display:block; margin:6px 0 4px; }
label.upload input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
label.upload .btn { font-weight:600; min-height:44px; padding:10px 16px; border-radius:10px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; }
label.upload input:focus-visible + .btn { outline:3px solid var(--brand2); outline-offset:2px; }
.xl-tabs { display:flex; gap:4px; overflow-x:auto; margin:0 12px; padding-top:6px; }
.xl-tabs button { flex:none; min-height:34px; padding:4px 12px; font-size:.85rem; border-radius:8px 8px 0 0; background:#eef1f4; color:#444; border-color:#cfd6de; border-bottom:0; }
.xl-tabs button.active { background:#fff; color:var(--brand); box-shadow:inset 0 3px 0 var(--brand); }
.xl-more { margin:0 12px 12px; align-self:flex-start; }
.file-meta { display:block; }
@media (max-width:719.98px) { .xl-grid table, .xl-grid tbody, .xl-grid tr { display:revert; } .xl-grid th, .xl-grid td { display:table-cell; } .xl-grid thead { display:table-header-group; } }

textarea { display:block; width:100%; margin-top:4px; padding:10px 12px; font:inherit; font-size:16px; color:var(--ink); border:1px solid #d6c8b8; border-radius:10px; resize:vertical; }
.directory-dialog { width:min(520px, 94vw); max-height:90vh; overflow:auto; border:0; border-radius:14px; padding:20px; }
.directory-dialog::backdrop { background:#0006; }
#directoryList .item { flex-wrap:wrap; }
.postal-address { white-space:pre-line; }