.app{padding:110px clamp(18px,4vw,56px) 48px;max-width:1280px;margin:0 auto}
.app h1{font-size:var(--headline-size);margin:0 0 4px}.sub{color:var(--muted);margin:0 0 22px;font-size:.92rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px}
.kpi span{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kpi strong{display:block;font-size:1.8rem;color:var(--green-dark);margin-top:6px}.kpi small{color:var(--muted)}
.kpi{border-top:3px solid var(--blue-strong)}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:20px}
h2{font-size:1rem;margin:0 0 12px;color:var(--green-dark)}
table{width:100%;border-collapse:collapse;font-size:.84rem}th,td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}th{color:var(--muted);font-weight:600;background:var(--panel-strong)}
.tag{display:inline-block;font-size:.7rem;padding:1px 7px;border-radius:99px;font-weight:700;margin-left:4px}
.u4k{background:#fff4e5;color:var(--gold)}.prog{background:var(--blue-soft);color:var(--blue-strong)}
.bar{display:flex;height:10px;border-radius:5px;overflow:hidden;min-width:120px;background:var(--panel-strong)}
.bar i{display:block}.jm{background:#1265d8}.vm{background:#0ea5e9}.cr{background:#d7a642}
.legend{font-size:.78rem;color:var(--muted)}.legend b{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 10px;vertical-align:middle}
.draft{background:#fff4e5;color:var(--gold);border:1px solid #f3d9a8;border-radius:10px;padding:8px 12px;font-size:.82rem;margin-bottom:16px}
@media(max-width:900px){.kpis{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}}
.signin-wrap{min-height:100vh;display:grid;place-items:center;padding:110px 18px 40px;background:radial-gradient(circle at 20% 10%,#e8f4fc,transparent 50%),var(--paper)}
.signin{max-width:400px;width:100%;text-align:center}.signin img{width:72px;background:var(--green-dark);border-radius:16px;padding:8px}
.signin button{width:100%;padding:12px;border:0;border-radius:10px;background:var(--blue-strong);color:#fff;font-weight:700;font-size:1rem;cursor:pointer;margin-top:14px}
.signin p{color:var(--muted);font-size:.9rem}
.ps-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:16px}
.ps-controls label{font-size:.78rem;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:4px}
.ps-controls select{font:inherit;font-size:.9rem;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:200px}
.ps-btn{display:inline-flex;gap:6px;align-items:center;font:inherit;font-weight:700;font-size:.88rem;padding:9px 14px;border-radius:8px;border:0;background:var(--blue-strong);color:#fff;cursor:pointer}
.ps-btn.alt{background:#fff;color:var(--blue-strong);border:1px solid var(--blue-strong)}
.stub{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff;max-width:760px;color:#0b1220}
.stub-hd{display:flex;justify-content:space-between;border-bottom:2px solid var(--green-dark);padding-bottom:10px;margin-bottom:14px}
.stub-hd h3{margin:0;font-size:1.15rem}.stub-hd small{color:var(--muted)}
.stub-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;font-size:.86rem;margin-bottom:14px}
.stub-meta b{color:var(--muted);font-weight:600;margin-right:6px}
.stub h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--green-dark);margin:14px 0 6px}
.stub-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stub-pay div{background:var(--panel-strong);border-radius:8px;padding:10px}.stub-pay span{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase}
.stub-pay strong{font-size:1.25rem}.stub-pay .big{background:var(--green-dark);color:#fff}.stub-pay .big span{color:#cfe0f5}
.stub .neg{color:#b42318}.stub-foot{font-size:.72rem;color:var(--muted);margin-top:14px}
@media print{
 @page{size:letter;margin:0.5in}
 body{background:#fff!important}
 .site-header,.ps-controls,.app>*:not(#paystubs),#paystubs>h2{display:none!important}
 .app{padding:0!important;max-width:none}
 #paystubs{border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
 .stub{border:0;max-width:none;padding:0;color:#000}
 .stub *{color:#000!important;background:#fff!important}
 .stub-pay div{border:1px solid #000}
 .stub th,.stub td{border-bottom:1px solid #000}
 .stub{page-break-inside:avoid}
}
.pdf-mode .stub *{color:#000!important}.pdf-mode .stub-pay div{background:#fff!important;border:1px solid #000}
/* ---- Mobile / PWA ---- */
.site-header{padding-top:max(14px,env(safe-area-inset-top));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:600px){
 .app{padding:calc(84px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
 .site-header{grid-template-columns:1fr auto;gap:8px}.site-header>span{display:none}
 .site-header .brand-logo{height:40px;width:40px}.site-header .brand-name{font-size:.92rem}
 .site-header .nav{display:flex;gap:4px}.site-header .nav a{padding:10px 8px;font-size:.85rem;min-height:44px;display:flex;align-items:center}
 .kpis{grid-template-columns:1fr;gap:10px}.kpi strong{font-size:1.6rem}
 .card{padding:14px;border-radius:12px}
 table{font-size:.8rem;white-space:nowrap}
 .ps-controls{flex-direction:column;align-items:stretch}.ps-controls select{min-width:0;width:100%;min-height:46px;font-size:16px}
 .ps-btn{justify-content:center;min-height:48px;font-size:1rem;width:100%}
 .stub{padding:14px}.stub-meta{grid-template-columns:1fr}.stub-hd h3{font-size:1rem}
 .stub-pay{grid-template-columns:1fr 1fr}.stub-pay .big{grid-column:1/-1;order:-1}
 .signin button{min-height:50px}
}