:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#172b4d;background:#f4f7fc;--body:#f4f7fc;--surface:#fff;--surface2:#f7f9fe;--ink:#172b4d;--muted:#73839d;--line:#e4ebf5;--blue:#1e55a4;--navy:#102c59;--gold:#f4aa1c;--success:#168260;--danger:#d44755;--shadow:0 12px 40px rgba(26,56,97,.055)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;}body{background:var(--body);color:var(--ink)}body.dark{--body:#0c1627;--surface:#17263b;--surface2:#1e3047;--ink:#e5effc;--muted:#a0b2c9;--line:#2c3e56;--blue:#79aaf1;--navy:#09182e;--shadow:0 15px 50px #050e2044}body.dark .brand-logo,body.dark .auth-logo{background:#fff}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:var(--blue)}h1,h2,h3,p{margin-top:0}h1{font-size:28px;letter-spacing:-.7px}h2{font-size:20px}small{font-size:12px}svg{vertical-align:middle}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #99bded;outline-offset:2px}
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#53749f}.boot img{width:120px;height:120px;object-fit:contain}.spinner{height:24px;width:24px;border:3px solid #bcd4f3;border-top-color:#2158a8;border-radius:100%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.auth-screen{min-height:100vh;display:grid;grid-template-columns:minmax(280px,48%) minmax(420px,52%);background:var(--surface)}.auth-art{position:relative;overflow:hidden;background:radial-gradient(circle at 22% 12%,#3876c5 0,transparent 40%),linear-gradient(130deg,#0e2f65,#184b93 62%,#0e2c54);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:9vw 7vw}.auth-art:after{content:"";position:absolute;width:430px;height:430px;border:1px solid #ffffff40;border-radius:50%;top:-180px;right:-200px;box-shadow:0 0 0 80px #ffffff08,0 0 0 160px #ffffff08}.auth-art .light-mark{font-size:12px;letter-spacing:3px;font-weight:800;color:#d1e7ff;margin-bottom:25px}.auth-art h1{font-size:clamp(32px,4vw,59px);line-height:1.12;max-width:550px;color:#fff}.auth-art p{max-width:455px;color:#daeaff;line-height:1.75;font-size:16px}.auth-art .auth-chip{border:1px solid #ffffff66;border-radius:999px;color:white;padding:11px 15px;font-size:12px;margin-top:32px;background:#ffffff15}.auth-form-area{display:flex;align-items:center;justify-content:center;padding:42px 24px;position:relative}.auth-form-box{width:100%;max-width:435px}.auth-logo{height:96px;width:96px;object-fit:contain;border-radius:50%;margin-bottom:10px}.auth-form-box h2{font-size:30px;letter-spacing:-.8px;margin:10px 0}.muted{color:var(--muted)}.subtitle{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:28px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field label{font-size:12px;font-weight:750;color:var(--ink)}.field input,.field select,.field textarea,.search-input{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:11px 12px;color:var(--ink);width:100%;outline:0;min-height:44px}.field textarea{min-height:92px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.search-input:focus{border-color:#4284d2;box-shadow:0 0 0 3px #4775ba17}.field small{color:var(--muted);line-height:1.4}.field input[type=file]{padding:8px}.field.checkbox{flex-direction:row;align-items:center;gap:9px}.field.checkbox input{width:18px;min-height:18px;height:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-grid .wide{grid-column:1/-1}.auth-form-box .field{margin-top:15px}.auth-actions{display:grid;gap:12px;margin-top:23px}.btn{border:1px solid var(--line);border-radius:10px;padding:10px 15px;min-height:40px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:.15s}.btn:hover{transform:translateY(-1px);border-color:#9ebce5}.btn.primary{background:#1e56a5;border-color:#1e56a5;color:white}.btn.primary:hover{background:#163f7f}.btn.danger{color:#c83342;border-color:#f0d2d6}.btn.soft{background:#eaf2ff;color:#1d57a2;border:0}.btn.tiny{font-size:11px;min-height:28px;padding:5px 9px;border-radius:7px}.btn.ghost{border:0;background:transparent;color:var(--muted)}.btn.icon-only{min-width:40px;padding:8px}.btn.full{width:100%}.secret-note{font-size:12px;color:var(--muted);line-height:1.5}.auth-footer{text-align:center;margin-top:28px;font-size:12px;color:var(--muted)}.error-inline{color:#ce4353;font-size:13px;line-height:1.5;margin-top:10px}
.layout{display:flex;min-height:100vh}.sidebar{width:264px;flex:0 0 264px;background:#112c59;color:#c3d4ee;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:20;box-shadow:5px 0 30px #0b224014}.sidebar-head{display:flex;align-items:center;gap:12px;padding:25px 19px 18px;border-bottom:1px solid #ffffff1a}.brand-logo{width:55px;height:55px;object-fit:contain;border-radius:50%;background:white}.sidebar-head strong{font-size:16px;letter-spacing:.4px;color:white;display:block}.sidebar-head small{font-size:11px;color:#b7cae5}.sidebar-menu{padding:16px 12px;overflow:auto;flex:1;scrollbar-width:thin}.nav-caption{font-size:10px;font-weight:800;letter-spacing:2px;color:#8cacd5;padding:14px 13px 9px}.nav-btn{background:transparent;color:#c6d5ea;border:0;border-radius:10px;width:100%;display:flex;align-items:center;gap:12px;text-align:left;font-size:12px;font-weight:650;padding:12px 12px;margin:3px 0;transition:.18s}.nav-btn svg{width:17px;height:17px;flex:none}.nav-btn:hover{background:#ffffff16;color:white}.nav-btn.active{background:#2b5da1;color:white;box-shadow:inset 3px 0 #ffbd3b}.sidebar-bottom{padding:16px;border-top:1px solid #ffffff18}.account-panel{display:flex;gap:10px;align-items:center;padding-bottom:12px}.avatar{height:38px;width:38px;border-radius:12px;background:#e8f0ff;color:#1e54a0;display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:none}.account-panel strong{font-size:12px;color:#fff;display:block}.account-panel small{font-size:10px;color:#b7c8df;display:block}.sidebar-logout{width:100%;border:1px solid #ffffff3d;background:#ffffff0a;color:#e8f1ff}
.main-shell{flex:1;min-width:0}.topbar{height:77px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 29px;position:sticky;top:0;z-index:10}.topbar-title{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.9px}.topbar-actions{display:flex;align-items:center;gap:11px}.topbar-date{font-size:12px;color:var(--muted)}.status-live{display:inline-flex;align-items:center;gap:7px;color:var(--success);font-size:12px;font-weight:750;background:#ddf7ed;padding:8px 11px;border-radius:99px}.status-live:before{content:"";width:7px;height:7px;background:#20ae80;border-radius:50%;box-shadow:0 0 0 3px #2bc68a20}.status-live.offline{color:#b65d34;background:#fff1de}.status-live.offline:before{background:#d78343}.content{padding:30px;max-width:1540px;margin:0 auto}.page-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:23px}.page-heading .eyebrow{font-size:10px;letter-spacing:2px;font-weight:900;text-transform:uppercase;color:var(--blue);margin-bottom:7px}.page-heading h1{margin-bottom:7px}.page-heading p{color:var(--muted);font-size:13px;line-height:1.5;margin:0}.page-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;border-radius:15px;border:1px solid var(--line);background:var(--surface);padding:15px;margin-bottom:20px;box-shadow:var(--shadow)}.filters .field{min-width:140px;flex:0 1 160px}.filters .field label{font-size:11px}.filters .field input,.filters .field select{min-height:37px;padding:7px 9px;font-size:12px}.filters .filter-label{min-width:100px;font-size:11px;font-weight:800;letter-spacing:1px;color:var(--muted);padding-bottom:12px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat{background:var(--surface);border:1px solid var(--line);padding:20px;border-radius:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}.stat .num{font-weight:850;font-size:27px;letter-spacing:-.8px;margin:15px 0 4px}.stat .lbl{font-size:12px;color:var(--muted);font-weight:600}.stat .stat-icon{height:40px;width:40px;border-radius:12px;color:#2361b4;background:#e8f1ff;display:flex;align-items:center;justify-content:center}.stat .stat-icon svg{width:21px}.stat.gold .stat-icon{color:#ac770b;background:#fff2cd}.stat.green .stat-icon{color:#168a62;background:#e1f7eb}.stat.red .stat-icon{color:#cd5360;background:#fdebed}.dashboard-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:18px}.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:19px 21px;border-bottom:1px solid var(--line)}.card-head h2{font-size:15px;margin:0}.card-body{padding:21px}.table-scroll{width:100%;overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:12px;line-height:1.45}.data-table th{text-align:left;padding:13px 15px;font-size:10px;text-transform:uppercase;letter-spacing:.8px;background:var(--surface2);color:var(--muted);font-weight:850;white-space:nowrap;border-bottom:1px solid var(--line)}.data-table td{padding:14px 15px;vertical-align:middle;border-bottom:1px solid var(--line)}.data-table tr:last-child td{border-bottom:0}.data-table tr:hover td{background:var(--surface2)}.table-actions{display:flex;align-items:center;gap:6px}.table-toolbar{padding:14px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}.table-toolbar .search-input{max-width:290px;font-size:12px;min-height:38px}.badge{font-size:11px;font-weight:800;padding:6px 9px;border-radius:7px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;background:#e8f0ff;color:#2863ac}.badge.green{background:#e4f7ed;color:#15865c}.badge.red{background:#fde9ec;color:#c13e51}.badge.gold{background:#fff4d9;color:#a07112}.badge.gray{background:#ecf0f6;color:#63748f}.profile-cell{display:flex;align-items:center;gap:10px;min-width:155px}.profile-cell img{width:35px;height:35px;border-radius:10px;object-fit:cover;background:#eef1f5}.profile-cell strong{font-size:12px;display:block}.profile-cell small{display:block;color:var(--muted);margin-top:3px}.empty{padding:52px 20px;text-align:center;color:var(--muted)}.empty .empty-symbol{font-size:35px;margin-bottom:13px}.empty h3{font-size:15px;color:var(--ink);margin-bottom:8px}.empty p{font-size:12px;max-width:400px;margin:0 auto;line-height:1.6}.info-strip{padding:13px 17px;border-radius:11px;border:1px solid #cde1fa;background:#eaf4ff;color:#305889;font-size:12px;line-height:1.5;margin-bottom:18px}.dash-welcome{border-radius:18px;background:linear-gradient(110deg,#153c7d,#2872c3);padding:28px;color:#fff;position:relative;overflow:hidden;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:18px}.dash-welcome:after{content:"✦";font-size:150px;color:#ffffff16;position:absolute;right:60px;top:-30px}.dash-welcome h1{color:#fff;margin:0 0 8px;font-size:26px}.dash-welcome p{color:#d8e9ff;margin:0;font-size:13px;max-width:560px;line-height:1.6}.dash-welcome .welcome-label{font-size:11px;letter-spacing:2px;color:#c2defc;font-weight:750;margin-bottom:10px}.dash-welcome .welcome-logo{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:50%;z-index:1;flex:none}.timeline{display:grid;gap:10px}.timeline-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:11px;background:var(--surface2);border:1px solid var(--line)}.time-square{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;min-height:54px;border-radius:9px;background:#e6f0ff;color:#245c9d;font-weight:850;font-size:14px}.time-square small{font-size:9px}.timeline-item strong{display:block;font-size:12px;margin-bottom:5px}.timeline-item p{font-size:11px;color:var(--muted);margin:0}.split-view{display:grid;grid-template-columns:1fr 1fr;gap:20px}.setting-section{margin-bottom:22px}.setting-section h3{font-size:15px;margin:0 0 15px}.setting-note{font-size:12px;color:var(--muted);line-height:1.6}.mode-choices{display:flex;gap:9px;flex-wrap:wrap}.quick-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:12px 0;font-size:12px}.quick-row:last-child{border-bottom:0}.link-muted{color:var(--blue);font-size:12px;font-weight:750;text-decoration:none}
.modal{width:min(670px,calc(100vw - 28px));max-height:90vh;padding:0;border:0;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 25px 90px #0b19365c;overflow:auto}.modal::backdrop{background:#10244299;backdrop-filter:blur(3px)}.modal-head{padding:22px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}.modal-head h2{font-size:20px;margin:0 0 4px}.modal-head p{font-size:12px;color:var(--muted);margin:0}.modal-body{padding:24px}.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:17px 24px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface);z-index:1}.divider{border:0;border-top:1px solid var(--line);margin:24px 0}.small-filter{max-width:175px;min-width:135px}.pill-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.toast-stack{position:fixed;right:20px;bottom:20px;z-index:99;display:grid;gap:8px;max-width:min(92vw,410px)}.toast{background:#132f57;color:white;padding:13px 16px;border-radius:11px;box-shadow:0 12px 35px #14274640;font-size:12px;line-height:1.5;animation:pop .2s ease;display:flex;align-items:flex-start;gap:8px}.toast.ok{border-left:4px solid #4cdea8}.toast.err{border-left:4px solid #ff6b7d}@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.loading-screen{min-height:250px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:13px}.mobile-overlay{display:none}.hamburger{display:none}.day-tabs{display:flex;gap:6px;overflow:auto;padding:0 0 13px}.day-tabs .btn{min-width:100px}.day-tabs .btn.selected{background:#1e56a5;color:white;border-color:#1e56a5}.salary-amount{font-size:32px;font-weight:900;color:var(--blue);margin:10px 0}.payroll-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center;padding:24px}.accent-number{color:#23a474}.hidden{display:none!important}#pdfScratch{position:fixed;left:-20000px;top:0;width:810px;pointer-events:none;background:white;z-index:-1}.pdf-sheet{background:#fff;color:#1a2a42;width:794px;height:1123px;padding:49px 52px;overflow:hidden;font-family:Arial,sans-serif}.pdf-letterhead{display:flex;gap:16px;align-items:center;padding:0 0 13px;border-bottom:3px double #123c78}.pdf-letterhead img{width:84px;height:84px;object-fit:contain}.pdf-letterhead h2{font-size:21px;letter-spacing:.8px;margin:0;color:#113569}.pdf-letterhead p{font-size:10px;line-height:1.45;margin:5px 0 0}.pdf-page-title{text-align:center;margin:26px 0 16px}.pdf-page-title h3{font-size:14px;margin:0 0 7px;text-transform:uppercase}.pdf-page-title p{font-size:10px;color:#677}.pdf-table{font-size:9px;border-collapse:collapse;width:100%;table-layout:fixed}.pdf-table th,.pdf-table td{border:1px solid #8d9aae;padding:7px 6px;word-wrap:break-word;vertical-align:top}.pdf-table th{background:#eaf0f8;color:#143c77}.pdf-end{margin-top:22px;font-size:9px;color:#455a72}.pdf-page-number{position:absolute;bottom:36px;right:55px;font-size:10px;color:#6c7e99}
body.mobile-preview .layout{max-width:450px;margin:0 auto;box-shadow:0 0 0 200vmax #17243a10}body.mobile-preview .sidebar{position:fixed;transform:translateX(-100%)}body.mobile-preview .sidebar.open{transform:translateX(0)}body.mobile-preview .hamburger{display:inline-flex}body.mobile-preview .content{padding:15px}body.mobile-preview .topbar{padding:0 14px}body.mobile-preview .stats{grid-template-columns:repeat(2,minmax(0,1fr))}body.mobile-preview .dashboard-grid,body.mobile-preview .split-view{grid-template-columns:1fr}body.mobile-preview .page-top{flex-direction:column}body.mobile-preview .form-grid{grid-template-columns:1fr}body.mobile-preview .form-grid .wide{grid-column:auto}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{width:233px;flex-basis:233px}.content{padding:23px}.dashboard-grid{grid-template-columns:1fr}.auth-art{padding:60px 55px}}
@media(max-width:790px){.sidebar{position:fixed;transform:translateX(-100%);transition:transform .2s;width:264px;flex-basis:264px}.sidebar.open{transform:translateX(0)}.mobile-overlay.active{display:block;position:fixed;inset:0;background:#05152f91;z-index:19}.hamburger{display:inline-flex}.topbar{height:66px;padding:0 15px}.content{padding:18px}.auth-screen{grid-template-columns:1fr}.auth-art{display:none}.topbar-date{display:none}.page-top{flex-direction:column;align-items:stretch}.page-actions{width:100%}.page-actions .btn{flex:1}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.split-view{grid-template-columns:1fr}.dash-welcome .welcome-logo{width:68px;height:68px}.dash-welcome h1{font-size:21px}.stats{gap:10px}.stat{padding:15px}.stat .num{font-size:22px}.filters .filter-label{display:none}.filters .field{flex:1 1 130px}.card-head{padding:15px}.nav-btn{padding:11px 12px}}
@media(max-width:420px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar-title{display:none}.dash-welcome .welcome-logo{display:none}.modal-body{padding:16px}.modal-head,.modal-foot{padding:17px}.table-toolbar{align-items:stretch}.table-toolbar .search-input{max-width:100%}}
/* Tutorial berbeda menurut peran, responsif dan mudah dipindai. */
.tutorial-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 30px;margin:12px 0 22px;border-radius:20px;background:linear-gradient(125deg,#12396d,#275a9b);color:#fff;box-shadow:0 12px 28px #12396d18}
.tutorial-hero h2{font-size:25px;letter-spacing:-.5px;margin:7px 0 9px;color:#fff}
.tutorial-hero p{font-size:13px;max-width:660px;opacity:.92;line-height:1.7;margin:0 0 12px}
.tutorial-hero .eyebrow{color:#c8dfff;font-weight:850}
.tutorial-count{display:inline-block;background:#ffffff18;color:#fff;border-radius:99px;padding:7px 12px;font-size:11px;font-weight:750}
.tutorial-hero img{width:116px;height:116px;object-fit:contain;flex-shrink:0;border-radius:100%;background:#fff;padding:7px}
.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:13px;margin-bottom:26px}
.tutorial-step{display:flex;gap:16px;background:var(--card,white);border:1px solid var(--line,#e4eaf4);border-radius:16px;padding:20px;min-width:0}
.tutorial-step-number{background:#e7f0ff;color:#234f8f;border-radius:13px;width:36px;height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;font-weight:850;font-size:15px}
.tutorial-step-content{min-width:0}.tutorial-step h3{font-size:14px;margin:0 0 8px}.tutorial-step p{margin:0 0 14px;color:var(--muted,#65758e);font-size:12px;line-height:1.75}
.tutorial-table{margin-bottom:22px}.tutorial-table .data-table td:last-child{min-width:400px;white-space:normal;line-height:1.5}.tutorial-table .data-table td:nth-child(2){font-weight:720;min-width:160px}
body.dark .tutorial-step{background:#1a2840;border-color:#35445e}body.dark .tutorial-step h3{color:#edf4ff}body.dark .tutorial-step-number{background:#284976;color:#d7e8ff}
@media(max-width:600px){.tutorial-hero{padding:20px;gap:10px}.tutorial-hero h2{font-size:20px}.tutorial-hero img{width:70px;height:70px}.tutorial-grid{grid-template-columns:1fr}.tutorial-step{padding:16px}}

/* AJ PRIVAT v1.3 — navigasi dashboard, tarif khusus dan instalasi PWA */
[hidden]{display:none!important}
.stat-link{font:inherit;text-align:left;width:100%;cursor:pointer;color:inherit;position:relative;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.stat-link:hover,.quick-link-row:hover{transform:translateY(-2px);box-shadow:0 10px 22px #174d8c18;border-color:#93b6ea}
.stat-link:focus-visible,.quick-link-row:focus-visible{outline:3px solid #3b82f6;outline-offset:3px}
.stat-open{display:block;font-size:10px;font-weight:700;color:var(--blue);margin-top:10px}
.quick-link-row{width:100%;border:1px solid transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
button.quick-row{background:none;border:0;border-bottom:1px solid var(--line);padding:12px 0;border-radius:0}
button.quick-row:last-child{border-bottom:0}
.special-select-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:6px 0}
.special-select-item{border:1px solid var(--line);background:var(--surface2);padding:10px;border-radius:10px;display:flex;align-items:center;gap:9px;font-size:12px;cursor:pointer}
.special-select-item input{width:16px;height:16px;flex:none;accent-color:#1f59a4}
.special-existing{padding:12px;border:1px dashed var(--line);border-radius:12px}
.install-login{margin:16px auto 0;max-width:300px;display:flex;justify-content:center}
.owner-stats{margin-bottom:18px}
@media(max-width:550px){.owner-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-link{padding:14px 11px}.stat-link .num{font-size:20px}.stat-link .lbl{font-size:11px}}
/* Pada HP, judul resmi pada halaman login tetap terlihat. */
@media(max-width:790px){
  .auth-screen{display:grid;grid-template-columns:1fr;align-content:start}
  .auth-art{display:flex;min-height:auto;padding:25px 24px 19px;justify-content:flex-start}
  .auth-art h1{font-size:clamp(22px,5.7vw,28px);max-width:none;margin:0 0 12px;line-height:1.16}
  .auth-art p{font-size:12px;line-height:1.55;margin:0;max-width:none}
  .auth-art .light-mark,.auth-art .auth-chip{display:none}
  .auth-form-area{padding:22px 22px 36px;min-height:auto}
}

/* AJ PRIVAT v1.4 — rincian gaji per periode dan PDF per tentor. */
.salary-breakdown{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.salary-breakdown strong{color:var(--ink)}
.payroll-preview-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.payroll-preview-totals{margin-top:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13px}
.payroll-preview-totals>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line)}
.payroll-preview-totals>div:last-child{border-bottom:0}
.payroll-preview-totals .grand{background:var(--surface2);font-weight:800;font-size:15px;color:var(--blue)}
.pdf-salary-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;font:11px/1.45 Arial,sans-serif;margin:12px 0 19px;padding:12px 14px;background:#eff4fc;border:1px solid #cddbea;border-radius:7px}
.pdf-salary-total{font:12px/1.5 Arial,sans-serif;margin:18px 0 0 34%;border:1px solid #a0b1c8}
.pdf-salary-total>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 10px;border-bottom:1px solid #cdd9e7}
.pdf-salary-total>div:last-child{border-bottom:0}
.pdf-salary-total .strong{background:#e8f0fb;color:#113569;font-size:14px}
.pdf-salary-note{font:11px/1.4 Arial,sans-serif;white-space:pre-wrap;margin-top:14px}
@media(max-width:650px){.payroll-preview-meta{grid-template-columns:1fr}}