.layout-tu-monitor{max-width:1240px;margin-inline:auto}.tu-intro{padding:25px!important;background:linear-gradient(135deg,var(--surface),var(--surface));border-top:3px solid #b99451!important}.tu-intro h2{font-size:clamp(21px,3vw,30px);margin:8px 0 12px}.tu-intro p{max-width:760px}.tu-eyebrow{font-size:10px;letter-spacing:.16em;color:var(--muted);font-weight:700}.tu-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.tu-tabs button{font:inherit;border:1px solid var(--line);border-radius:12px;padding:12px 17px;background:var(--surface);color:var(--ink);cursor:pointer}.tu-tabs button.active{background:#087f62;color:white;border-color:#087f62;box-shadow:0 4px 20px #087f6222}.tu-filters{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-bottom:12px}.tu-filters label{display:grid;gap:7px;min-width:150px;flex:1;color:var(--muted);font-size:12px}.tu-filters .btn{flex:none;min-height:42px}.tu-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tu-metric{min-width:0}.tu-metric span,.tu-metric small{display:block;color:var(--muted);font-size:12px;line-height:1.7}.tu-metric strong{display:block;overflow-wrap:anywhere;font-size:clamp(19px,2.2vw,27px);margin:12px 0;color:var(--ink)}.tu-note p{font-size:12px;line-height:1.8;color:var(--muted)}.tu-table{width:100%;overflow-x:auto;border-radius:12px;overscroll-behavior-inline:contain}.tu-table table{border-collapse:collapse;width:100%;min-width:640px;font-size:12px}.tu-table th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:14px 12px;border-bottom:1px solid var(--line)}.tu-table td{padding:14px 12px;vertical-align:top;border-bottom:1px solid var(--line);max-width:280px;overflow-wrap:anywhere}.tu-table td small{display:block;color:var(--muted);margin-top:5px;line-height:1.6}.tu-table tr:last-child td{border-bottom:0}.tu-link{color:var(--emerald);font:inherit;font-weight:600;text-align:left;background:none;border:none;padding:0;cursor:pointer;overflow-wrap:anywhere}.tu-badge{display:inline-block;border-radius:7px;padding:4px 7px;background:#087f6216;color:#087f62;font-size:10px;line-height:1.6;font-weight:700}.tu-badge.warn{background:#b9945120;color:#8e651b}.dark .tu-badge{color:#65d8b1}.dark .tu-badge.warn{color:#e0bc6c}.tu-detail{margin-top:24px;scroll-margin-top:90px}.tu-detail-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}.tu-detail-bar h3,.tu-detail-bar strong{flex:1;margin:0;min-width:130px}.tu-error p{line-height:1.8}.tu-detail .receipt-box{margin:0 auto}.tu-tabs button,.tu-link,.tu-filters .btn{transition:background .2s,box-shadow .2s}.tu-tabs button:hover,.tu-filters .btn:hover{box-shadow:0 4px 18px #087f6222}#tuContent .card{animation:tu-appear .25s ease-out}@keyframes tu-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(max-width:900px){.tu-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:460px){.tu-intro{padding:18px!important}.tu-tabs button{flex:1 1 42%;padding:11px 8px;font-size:11px}.tu-filters label{min-width:0;flex-basis:100%}.tu-filters .btn{flex:1}.tu-metric{padding:14px!important}.tu-metric strong{font-size:18px}.tu-metric span,.tu-metric small{font-size:10px}.tu-detail-bar .btn{flex:1}.tu-table{box-shadow:inset -5px 0 10px #00000005}}@media(prefers-reduced-motion:reduce){#tuContent .card{animation:none}.tu-tabs button,.tu-link,.tu-filters .btn{transition:none}}
@media print{body.tu-print-receipt{background:white!important;color:#183b2d!important}body.tu-print-receipt #network-banner,body.tu-print-receipt #toast-root,body.tu-print-receipt .topbar,body.tu-print-receipt .tu-intro,body.tu-print-receipt .tu-tabs,body.tu-print-receipt #tuContent,body.tu-print-receipt .tu-detail-bar{display:none!important}body.tu-print-receipt .app-shell,body.tu-print-receipt .page,body.tu-print-receipt #tuDetail{display:block!important;margin:0!important;padding:0!important;max-width:none!important;width:100%!important;min-height:0!important;box-shadow:none!important;background:white!important}body.tu-print-receipt #kuitansiContent{display:block!important}body.tu-print-receipt #kuitansiContent .receipt-box{margin:0!important}@page{size:A4;margin:15mm}}

@media(max-width:600px){.tu-table{overflow:visible;box-shadow:none}.tu-table table{min-width:0;display:block}.tu-table thead{display:none}.tu-table tbody{display:grid;gap:12px}.tu-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;padding:10px;gap:2px}.tu-table td{border:0;max-width:none;padding:7px;display:block}.tu-table td:first-child{grid-column:1/-1}.tu-table td::before{content:attr(data-label);display:block;color:var(--muted);font-size:9px;font-weight:600;line-height:1.7;margin-bottom:4px}.tu-table td[colspan]{grid-column:1/-1}.tu-table td[colspan]::before{display:none}}

/* UI X: consistent rhythm across monitor views and equal-size peer cards. */
.layout-tu-monitor{display:block}
#tuContent,#tuReceiptData,#tuDuesData{display:grid;gap:16px;min-width:0}
#tuContent>.card,#tuReceiptData>.card,#tuDuesData>.card{margin:0}
.tu-metrics{grid-auto-rows:1fr}
.tu-metrics>.tu-metric{margin:0;display:grid;grid-template-rows:minmax(3.4em,auto) auto 1fr;align-content:start;gap:12px}
.tu-metric>strong{margin:0;font-variant-numeric:tabular-nums;line-height:1.4}
.tu-metric>small{margin:0;align-self:start}
.tu-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tu-tabs:has(>button:only-child){grid-template-columns:1fr}
.tu-tabs>button{min-height:48px;padding:12px;line-height:1.4}
.tu-filters{margin:0 0 16px;gap:12px}
form.tu-filters{margin:0}
.tu-filters :is(input.input,select.input,.btn){height:48px;min-height:48px;margin:0}
.tu-filters .btn{min-width:132px}
.tu-note p:first-child{margin-top:0}.tu-note p:last-child{margin-bottom:0}
.tu-intro p{margin-bottom:16px}.tu-intro #tuUpdated{display:block;line-height:1.7;color:var(--muted)}
.tu-detail-bar .btn{min-height:48px}
@media(max-width:700px){.tu-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.tu-filters label{flex-basis:calc(50% - 12px);min-width:0}.tu-filters>.btn{flex:1 1 132px}.tu-metric>strong{font-size:clamp(17px,3vw,23px)}}
@media(max-width:460px){.tu-filters label{flex-basis:100%}.tu-metrics>.tu-metric{gap:9px;grid-template-rows:minmax(5.1em,auto) auto 1fr}.tu-tabs>button{font-size:11px}.tu-metric>strong{font-size:clamp(15px,4.5vw,18px)}}