body{margin:0;font-family:Arial,'Noto Sans Tamil',sans-serif;background:#f6f3ee;color:#211}
header{background:#7a0019;color:white;padding:20px;text-align:center}
main{max-width:950px;margin:auto;padding:16px}
.card{background:white;border-radius:20px;padding:18px;box-shadow:0 3px 12px #0002;margin-bottom:16px}
h2{font-size:30px;margin:0 0 15px}
label{display:block;font-weight:bold;font-size:18px;margin-top:8px}
input,select,textarea{width:100%;min-height:54px;font-size:20px;margin:8px 0;padding:10px;border:2px solid #ddd;border-radius:14px;box-sizing:border-box}
textarea{min-height:95px}
button{width:100%;min-height:58px;border:0;border-radius:14px;background:#7a0019;color:white;font-size:20px;font-weight:bold;margin:8px 0}
.secondary{background:#3c3c3c}
.menu{display:grid;gap:8px;margin-bottom:16px}
.hidden{display:none}
.page{display:none}.page.active{display:block}
pre{background:#111;color:#0f0;padding:12px;border-radius:12px;overflow:auto}
.dash{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tile{border-radius:18px;padding:16px;font-size:18px}.tile strong{display:block;font-size:28px;margin-top:10px}
.green{background:#e7f8e9;color:#0b7d25}.blue{background:#e7f0ff;color:#164e8f}.gold{background:#fff3d1;color:#7a5200}.red{background:#ffe5e7;color:#b00020}
.row{background:#fafafa;border-radius:14px;padding:12px;margin:8px 0;border:1px solid #ddd}
.badge{display:inline-block;padding:5px 8px;border-radius:999px;background:#fff3d1;margin-top:5px}
@media(max-width:650px){.dash{grid-template-columns:1fr}}

.backup-warning{
  background:#fff3d1;
  border:2px solid #d8a521;
  border-radius:14px;
  padding:12px;
  margin:10px 0;
}

.counterRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#fafafa;border-radius:14px;padding:12px;margin:8px 0;border:1px solid #ddd}
.counterControls{display:flex;align-items:center;gap:8px}.counterControls button{width:58px;height:58px;min-height:58px;font-size:30px;margin:0}.counterControls span{min-width:45px;text-align:center;font-size:28px;font-weight:bold}
.sum{background:#fff8df;border:2px solid #f0d071;border-radius:16px;padding:16px;margin-top:12px;font-size:22px;display:flex;justify-content:space-between}
.finalBox div{display:flex;justify-content:space-between;background:#f2f2f2;border-radius:14px;padding:14px;margin:8px 0;font-size:20px}
.diff{margin-top:12px;padding:18px;text-align:center;border-radius:16px;font-size:24px;font-weight:bold}.diff.neutral{background:#eee;color:#555}.diff.ok{background:#dff7df;color:#0b7d25}.diff.bad{background:#ffe0e4;color:#b00020;border:3px solid #b00020}
.check{display:flex;gap:10px;align-items:center;font-size:18px;font-weight:bold}.check input{width:28px;min-height:28px}.smallText{font-size:15px;color:#666}.smallBtn{width:auto;min-height:36px;font-size:14px;padding:6px 10px;background:#777}
@media(max-width:650px){.counterRow{grid-template-columns:1fr}.counterControls{justify-content:space-between}}

.langBtn{
  background:#7a0019;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:bold;
  cursor:pointer;
}

html[lang="ta"] body{
  font-size:18px;
}
html[lang="ta"] button{
  font-size:18px;
}
html[lang="ta"] h2{
  font-size:28px;
}


#quickSearchInput{
  border:3px solid #d8a521;
  background:#fffdf6;
  font-size:24px;
  min-height:64px;
}
.searchHint{
  background:#fff3d1;
  border:2px solid #d8a521;
  padding:12px;
  border-radius:14px;
  margin-top:10px;
  font-weight:bold;
}
.searchResult{
  border-radius:14px;
  padding:12px;
  margin:8px 0;
  border:2px solid #ddd;
  background:#fafafa;
}
.searchType{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:#7a0019;
  color:white;
  font-size:13px;
  font-weight:bold;
  margin-bottom:6px;
}
.search-bank{border-color:#164e8f}
.search-closing{border-color:#0b7d25}
.search-fund{border-color:#d8a521}
.search-sponsor{border-color:#5b2b82}
.search-receipt{border-color:#7a0019}
.search-audit{border-color:#555}
.search-member{border-color:#0b7d25}


.forecastGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}
.forecastBox{
  border-radius:16px;
  padding:16px;
  background:#fafafa;
  border:2px solid #ddd;
}
.forecastBox b{
  display:block;
  font-size:17px;
}
.forecastBox strong{
  display:block;
  margin-top:8px;
  font-size:28px;
}
.forecastBox.green{background:#e7f8e9;color:#0b7d25;border-color:#0b7d25}
.forecastBox.red{background:#ffe5e7;color:#b00020;border-color:#b00020}
.forecastBox.blue{background:#e7f0ff;color:#164e8f;border-color:#164e8f}
.forecastBox.gold{background:#fff3d1;color:#7a5200;border-color:#d8a521}
.forecastBox.warn{background:#fff3d1;color:#7a5200;border-color:#d8a521}
.forecastBox.danger{background:#ffe0e4;color:#b00020;border-color:#b00020}
.forecastWarning{
  background:#fff3d1;
  border:2px solid #d8a521;
  border-radius:14px;
  padding:12px;
  margin:8px 0;
  font-weight:bold;
}
.forecastOk{
  background:#e7f8e9;
  border:2px solid #0b7d25;
  border-radius:14px;
  padding:12px;
  margin:8px 0;
  font-weight:bold;
}
@media(max-width:650px){
  .forecastGrid{grid-template-columns:1fr}
}


.riskLevel{
  padding:18px;
  border-radius:18px;
  font-size:28px;
  font-weight:bold;
  text-align:center;
  margin:14px 0;
}
.riskLevel.green{background:#e7f8e9;color:#0b7d25;border:3px solid #0b7d25}
.riskLevel.yellow{background:#fff3d1;color:#7a5200;border:3px solid #d8a521}
.riskLevel.red{background:#ffe0e4;color:#b00020;border:3px solid #b00020}
.riskLevel span{font-size:18px}
.riskGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}
.riskCard{
  padding:16px;
  border-radius:16px;
  border:2px solid #ddd;
  background:#fafafa;
}
.riskCard b{display:block;font-size:17px}
.riskCard strong{display:block;margin-top:8px;font-size:28px}
.riskCard.green{background:#e7f8e9;color:#0b7d25;border-color:#0b7d25}
.riskCard.yellow{background:#fff3d1;color:#7a5200;border-color:#d8a521}
.riskCard.blue{background:#e7f0ff;color:#164e8f;border-color:#164e8f}
.riskCard.red{background:#ffe0e4;color:#b00020;border-color:#b00020}
.riskWarning{
  background:#fff3d1;
  border:2px solid #d8a521;
  border-radius:14px;
  padding:12px;
  margin:8px 0;
  font-weight:bold;
}
.riskOk{
  background:#e7f8e9;
  border:2px solid #0b7d25;
  border-radius:14px;
  padding:12px;
  margin:8px 0;
  font-weight:bold;
}
.riskRow{
  background:#fafafa;
  border:2px solid #ddd;
  border-radius:14px;
  padding:12px;
  margin:8px 0;
}
.riskRow.danger{border-color:#b00020;background:#ffe0e4}
@media(max-width:650px){
  .riskGrid{grid-template-columns:1fr}
}


.analyticsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}
.analyticsCard{
  border-radius:16px;
  padding:16px;
  border:2px solid #ddd;
  background:#fafafa;
}
.analyticsCard b{display:block;font-size:17px}
.analyticsCard strong{display:block;font-size:28px;margin-top:8px}
.analyticsCard.green{background:#e7f8e9;border-color:#0b7d25;color:#0b7d25}
.analyticsCard.red{background:#ffe0e4;border-color:#b00020;color:#b00020}
.analyticsCard.blue{background:#e7f0ff;border-color:#164e8f;color:#164e8f}
.analyticsCard.gold{background:#fff3d1;border-color:#d8a521;color:#7a5200}
.analyticsCard.purple{background:#efe4ff;border-color:#5b2b82;color:#5b2b82}

.analyticsMonths{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.analyticsMonth{
  border:2px solid #ddd;
  border-radius:14px;
  padding:12px;
  background:#fafafa;
}
.analyticsTable{
  margin:12px 0;
}
.analyticsRow{
  display:flex;
  justify-content:space-between;
  border:2px solid #ddd;
  border-radius:12px;
  padding:10px;
  margin:6px 0;
  background:#fafafa;
}
@media(max-width:650px){
  .analyticsGrid,.analyticsMonths{grid-template-columns:1fr}
}


/* ===== V19 Black Gold Premium Theme ===== */

:root{
  --bg-main:#0b0b0d;
  --bg-card:#151518;
  --gold:#d4af37;
  --gold-soft:#f0d67a;
  --text:#f4f1e8;
  --muted:#b9b1a1;
  --danger:#ff5c73;
  --success:#5ee28b;
  --blue:#7db7ff;
}

html,body{
  background:linear-gradient(180deg,#050505,#111);
  color:var(--text);
  font-family:Arial,'Noto Sans Tamil',sans-serif;
}

header,nav,.topbar{
  background:#111 !important;
  border-bottom:2px solid var(--gold);
  box-shadow:0 0 20px rgba(212,175,55,0.2);
}

.card,
.page,
section{
  background:linear-gradient(180deg,#17171a,#101012) !important;
  border:2px solid rgba(212,175,55,0.25);
  border-radius:22px !important;
  box-shadow:0 6px 30px rgba(0,0,0,0.45);
  color:var(--text);
}

h1,h2,h3{
  color:var(--gold-soft) !important;
  letter-spacing:0.5px;
}

p,label,.hint,.muted{
  color:var(--muted) !important;
}

button{
  background:linear-gradient(180deg,#d4af37,#8b6a14) !important;
  color:#111 !important;
  border:none !important;
  border-radius:18px !important;
  font-weight:bold !important;
  min-height:58px;
  box-shadow:0 4px 14px rgba(212,175,55,0.35);
  transition:0.2s ease;
}

button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(212,175,55,0.45);
}

button.secondary{
  background:linear-gradient(180deg,#2d2d31,#17171a) !important;
  color:var(--gold-soft) !important;
  border:2px solid rgba(212,175,55,0.4) !important;
}

input,select,textarea{
  background:#0f1012 !important;
  color:var(--text) !important;
  border:2px solid rgba(212,175,55,0.3) !important;
  border-radius:16px !important;
  min-height:56px;
  font-size:18px;
}

input::placeholder,
textarea::placeholder{
  color:#9e947d;
}

table{
  background:#111;
  color:var(--text);
}

th{
  background:#1e1a10 !important;
  color:var(--gold-soft) !important;
}

td{
  border-color:#2a2417 !important;
}

.analyticsCard,
.riskCard,
.forecastBox,
.searchResult{
  background:linear-gradient(180deg,#181818,#101010) !important;
  border:2px solid rgba(212,175,55,0.28) !important;
  color:var(--text) !important;
}

.analyticsCard strong,
.riskCard strong,
.forecastBox strong{
  color:var(--gold-soft);
}

.riskLevel.green,
.forecastOk{
  background:#102417 !important;
  color:var(--success) !important;
  border-color:var(--success) !important;
}

.riskLevel.red,
.forecastWarning,
.riskRow.danger{
  background:#2a1115 !important;
  color:#ff9aaa !important;
  border-color:#ff5c73 !important;
}

.langBtn{
  background:linear-gradient(180deg,#d4af37,#8b6a14) !important;
  color:#111 !important;
  border:none !important;
}

.menu button{
  font-size:18px;
}

.logo-glow{
  text-shadow:0 0 12px rgba(212,175,55,0.6);
}

.gold-line{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:14px 0;
}

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-thumb{
  background:#5b4a1b;
  border-radius:999px;
}


/* ===== V20 Finance Only Premium Polish ===== */
.finance-only-note{
  text-align:center;
  border:2px solid rgba(212,175,55,0.45) !important;
  background:linear-gradient(135deg,#111,#1b1608) !important;
  color:#f0d67a !important;
  font-size:18px;
}
.badge, .searchType{
  background:#d4af37 !important;
  color:#111 !important;
}
header p::after{
  content:" · Finance Only";
  color:#d4af37;
}


/* ===== V21 PWA Install Branding ===== */
.install-logo-box{
  display:flex;
  gap:16px;
  align-items:center;
  background:linear-gradient(135deg,#111,#1b1608);
  border:2px solid rgba(212,175,55,0.45);
  border-radius:18px;
  padding:16px;
  margin:14px 0;
}
.install-logo-box img{
  width:82px;
  height:82px;
  border-radius:22px;
  border:2px solid #d4af37;
  background:#050505;
}
.install-steps{
  background:#101012;
  border:2px solid rgba(212,175,55,0.25);
  border-radius:18px;
  padding:16px;
  margin-top:16px;
}
.install-steps li{
  margin:8px 0;
}
.install-status{
  margin-top:14px;
  background:#fff3d1;
  color:#111;
  border-radius:14px;
  padding:14px;
  font-weight:bold;
}
.logo-slot{
  text-align:center;
  border:2px dashed rgba(212,175,55,0.55) !important;
  color:#f0d67a !important;
}
.logo-slot code{
  color:#fff;
}

/* ===== V22 Logo Ready Branding ===== */
.branding-logo-main{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#070707,#1d1708)!important;border:2px solid rgba(212,175,55,0.55)!important}
.branding-logo-main img{width:140px;max-width:30%;border-radius:22px;border:2px solid #d4af37;background:#050505}
.branding-logo-main h1{margin:0;font-size:30px}.branding-logo-main h2{margin:6px 0}.branding-logo-main p{margin:0;color:#f0d67a!important}
@media(max-width:650px){.branding-logo-main{display:block;text-align:center}.branding-logo-main img{max-width:170px;width:70%;margin-bottom:12px}}


/* ===== V23 Release Check ===== */
.releaseHeader{
  background:linear-gradient(135deg,#111,#1b1608);
  border:2px solid rgba(212,175,55,0.45);
  border-radius:18px;
  padding:16px;
  margin:14px 0;
  text-align:center;
}
.releaseRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#101012;
  border:2px solid rgba(212,175,55,0.25);
  border-radius:14px;
  padding:12px;
  margin:8px 0;
}
.releaseOk{
  background:#12351d;
  color:#5ee28b;
  border:1px solid #5ee28b;
  border-radius:999px;
  padding:6px 10px;
  font-weight:bold;
}
.releaseBad{
  background:#3b1218;
  color:#ff9aaa;
  border:1px solid #ff5c73;
  border-radius:999px;
  padding:6px 10px;
  font-weight:bold;
}
.releaseBadBox{
  background:#3b1218;
  color:#ff9aaa;
  border:2px solid #ff5c73;
  border-radius:14px;
  padding:14px;
  margin:10px 0;
}
.releaseNote{
  margin-top:14px;
  background:#fff3d1;
  color:#111;
  border-radius:14px;
  padding:14px;
  font-weight:bold;
  text-align:center;
}


/* ===== V30 Top Page UX Fix ===== */
.active-page-mount{
  max-width:1100px;
  margin:18px auto;
  padding:0 10px;
  scroll-margin-top:20px;
}
.active-page-mount.has-active-page{
  animation:v30OpenPage .18s ease-out;
}
.active-page-mount .page{
  margin-top:0 !important;
  width:100%;
}
@keyframes v30OpenPage{
  from{opacity:.6; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}
nav.menu button,
.menu button{
  position:relative;
}
nav.menu button:focus,
.menu button:focus{
  outline:3px solid #f0d67a;
  outline-offset:3px;
}