:root{--ink:#17211b;--green:#123d2c;--green2:#236247;--cream:#f5f2e9;--line:#dce2dd;--white:#fff}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:14px/1.5 Arial,sans-serif}a{color:var(--green2);text-decoration:none}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;background:var(--green);color:#fff;padding:11px 16px;font-weight:700;cursor:pointer}.button.secondary,button.secondary{background:#fff;color:#33473b;border:1px solid #d5ddd7}.danger{background:#9b302b}.topbar{height:78px;padding:0 max(24px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e4e8e4}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:700}.brand>b{width:42px;height:42px;display:grid;place-items:center;background:var(--green);color:#fff;border-radius:11px;font:700 23px Georgia}.brand span{display:grid}.brand small{font-weight:400;color:#68736c}.topbar nav{display:flex;align-items:center;gap:18px}.role{padding:6px 10px;border-radius:999px;background:#eaf2ed;color:var(--green2);font-size:11px;font-weight:800;text-transform:uppercase}.eyebrow{margin:0;color:var(--green2);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.auth-shell{min-height:calc(100vh - 130px);display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center;width:min(980px,calc(100% - 32px));margin:auto}.auth-copy h1,.page-head h1{font:700 clamp(34px,6vw,62px)/1 Georgia,serif;letter-spacing:-.03em;color:#173a29;margin:12px 0}.auth-copy>p:last-of-type{color:#647168;font-size:16px;max-width:550px}.role-list{display:flex;gap:10px;margin-top:35px}.role-list span{padding:10px 12px;border:1px solid #d5ddd7;border-radius:8px;background:#fff;font-size:12px;font-weight:700}.auth-card,.panel{background:#fff;border:1px solid #e0e4df;border-radius:18px;box-shadow:0 12px 40px rgba(20,55,35,.06)}.auth-card{padding:34px;display:grid;gap:18px}.auth-card h2,.panel h2{font:700 24px Georgia,serif;margin:0}.auth-card small{text-align:center;color:#6b756f}.container{width:min(1120px,calc(100% - 32px));margin:44px auto 80px}.narrow{width:min(520px,calc(100% - 32px));margin:70px auto}.narrow .panel{padding:30px}.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}.page-head h1{font-size:42px}.page-head p:last-child{color:#6c756f}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px}.stats article{background:#173d2c;color:#fff;border-radius:14px;padding:20px;display:flex;justify-content:space-between;align-items:center}.stats b{font:700 34px Georgia}.panel{padding:24px;margin-bottom:20px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-head span{color:#758078}.table-wrap{overflow:auto}.data{width:100%;border-collapse:collapse}.data th,.data td{padding:13px 10px;border-bottom:1px solid #e8ebe8;text-align:left}.data th{font-size:11px;text-transform:uppercase;color:#718078}.empty{text-align:center!important;color:#849088;padding:30px!important}.status{display:inline-block;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}.status.submitted{background:#fff0c9;color:#7d5700}.status.approved{background:#dbf1e3;color:#19653b}.status.rejected{background:#f6dcda;color:#8b302c}.flash,.error{width:min(1120px,calc(100% - 32px));margin:16px auto;padding:12px 15px;border-radius:9px}.flash.success{background:#dff1e5;color:#205c39}.flash.error,.error{background:#f8dfdd;color:#8b302c}.stack{display:grid;gap:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}label{display:grid;gap:7px;font-size:12px;font-weight:700}input,textarea,select{width:100%;border:1px solid #d6ddd8;border-radius:9px;background:#fbfcfb;padding:11px 12px;font:inherit;outline:none}input:focus,textarea:focus,select:focus{border-color:#2b7050;box-shadow:0 0 0 3px #dcebe2}.wide{grid-column:1/-1}.actions{display:flex;justify-content:flex-end;gap:10px}.book-input{border:1px solid #dfe4e0;border-radius:10px;overflow:auto;margin-top:18px}.book-input-head,.book-input-row{min-width:680px;display:grid;grid-template-columns:52px 1fr 180px 100px;align-items:center}.book-input-head{height:42px;background:#edf3ef;font-size:11px;text-transform:uppercase}.book-input-head>*{padding:0 10px}.book-input-row{border-top:1px solid #e5e9e6}.book-input-row span{text-align:center;color:#6c786f}.book-input-row input{border:0;border-left:1px solid #e5e9e6;border-radius:0;background:#fff}.document-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:15px;padding:12px;background:#172b21;color:#fff}.document-toolbar>div,.document-toolbar>form{display:flex;align-items:center;gap:8px}.document{width:210mm;margin:24px auto}.paper{width:210mm;min-height:297mm;padding:16mm 18mm 14mm;background:#fff;color:#000;font:12pt/1.32 Arial,sans-serif;box-shadow:0 8px 30px #c8c8c2;margin-bottom:24px}.doc-title{text-align:center;font-size:14pt;line-height:1.2}.doc-rule{border-top:1px solid #000;margin:3px 0 18px}.identity{margin:10px 0 35px}.identity p{display:grid;grid-template-columns:46mm 5mm 1fr;margin:7px 0}.identity b{font-weight:400;border-bottom:1px dotted #000}.identity i{font-style:normal}.statement{text-align:justify;margin-bottom:14px}.statement u{display:inline-block;min-width:20mm;text-align:center;text-decoration-style:dotted}.doc-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11pt}.doc-table th,.doc-table td{border:1px solid #000;padding:4px 7px;height:8mm;font-weight:400}.doc-table th:first-child,.doc-table td:first-child{width:18mm;text-align:center}.doc-table th:nth-child(3),.doc-table td:nth-child(3){width:35mm;text-align:center}.doc-table th:last-child,.doc-table td:last-child{width:30mm;text-align:center}.rules{margin-top:11px}.rules p{margin:0}.paper ol{margin:3px 0 0;padding-left:9mm}.paper li{padding-left:2mm;text-align:justify}.page-two{padding-top:14mm}.closing{margin-top:20px}.signatures{display:grid;grid-template-columns:1fr 1fr;gap:40px;text-align:center;margin-top:55px}.signatures strong{display:block;margin-top:31mm;font-weight:400}.signatures small{display:block;text-align:left;margin-left:19mm;font-size:11pt}.principal{margin-top:30mm;display:flex;align-items:center;flex-direction:column}.principal strong{margin-top:30mm;font-weight:400;text-decoration:underline}footer{text-align:center;padding:22px;color:#748078;font-size:12px}
@media(max-width:760px){.topbar{padding:0 16px}.brand small,.topbar nav>a:not(:last-child),.role{display:none}.auth-shell{grid-template-columns:1fr;gap:25px;padding:35px 0}.auth-copy h1{font-size:42px}.role-list{flex-wrap:wrap}.form-grid,.stats{grid-template-columns:1fr}.wide{grid-column:auto}.page-head{align-items:flex-start;gap:20px}.page-head h1{font-size:34px}.document{transform:scale(.47);transform-origin:top left;margin-left:0;margin-bottom:-310mm}.document-toolbar{flex-wrap:wrap}}
@media print{@page{size:A4;margin:0}.no-print,footer{display:none!important}body{background:#fff}.document{margin:0;width:210mm}.paper{box-shadow:none;margin:0;page-break-after:always}.paper:last-child{page-break-after:auto}}
.upload-panel{width:min(900px,calc(100% - 32px));margin:24px auto;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#fff;border:1px solid #dce2dd;border-radius:15px}.upload-panel h2{margin:4px 0;font:700 23px Georgia}.upload-panel p{color:#6a756e}.upload-panel form{display:flex;align-items:end;gap:10px}.upload-panel form label{flex:1}.file-list{grid-column:1/-1;display:grid;gap:8px}.file-list>a,.file-list>span{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border-radius:9px;background:#eef3ef}.file-list small{color:#6d7971}@media(max-width:760px){.upload-panel{grid-template-columns:1fr}.upload-panel form{align-items:stretch;flex-direction:column}.file-list{grid-column:auto}.file-list>a{align-items:flex-start;flex-direction:column}}@media print{.upload-panel{display:none!important}}

/* Formulir siswa */
.container>.stack{width:min(980px,100%);margin-inline:auto}.container>.stack>.panel{padding:30px;border-top:4px solid var(--green2)}.container>.stack>.panel>h2{display:flex;align-items:center;gap:10px;margin-bottom:6px}.container>.stack>.panel>p{margin:6px 0 18px;color:#68736c}.container>.stack input,.container>.stack textarea,.container>.stack select{min-height:46px;background:#fff}.container>.stack textarea{resize:vertical}.container>.stack .book-input{box-shadow:inset 0 0 0 1px #f1f4f2}.container>.stack .book-input-row:nth-child(even) input,.container>.stack .book-input-row:nth-child(even) span{background:#fafcfb}.container>.stack>.actions{position:sticky;bottom:0;z-index:3;padding:14px 0;background:linear-gradient(transparent,var(--cream) 28%)}

/* Dokumen di layar */
.document{font-variant-numeric:tabular-nums}.doc-title{font-weight:600;letter-spacing:0}.identity b{padding-left:2mm}.doc-table tbody tr{height:8mm}.page-two{break-before:page;page-break-before:always}

/* Cetak A4: aturan eksplisit ini juga membatalkan scale tampilan ponsel. */
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{width:210mm!important;min-width:210mm!important;margin:0!important;padding:0!important;background:#fff!important}
  body{font-size:12pt!important}
  .document{display:block!important;width:210mm!important;margin:0!important;padding:0!important;transform:none!important;transform-origin:initial!important}
  .paper{display:block!important;box-sizing:border-box!important;width:210mm!important;height:297mm!important;min-height:297mm!important;margin:0!important;padding:16mm 18mm 14mm!important;overflow:hidden!important;box-shadow:none!important;transform:none!important;break-after:page;page-break-after:always}
  .paper:last-child{break-after:auto;page-break-after:auto}
  .doc-title{font-size:13pt!important;line-height:1.2!important}
  .doc-rule{margin:3px 0 7mm!important}
  .identity{margin:3mm 0 10mm!important}
  .identity p{margin:1.8mm 0!important;grid-template-columns:46mm 5mm 1fr!important}
  .statement{margin:0 0 4mm!important;line-height:1.32!important}
  .doc-table{font-size:11pt!important;width:100%!important}
  .doc-table th,.doc-table td{height:8mm!important;padding:1mm 2mm!important}
  .rules{margin-top:4mm!important}
  .page-two{padding-top:16mm!important;break-before:page;page-break-before:always}
  .signatures{margin-top:14mm!important}
  .signatures strong{margin-top:31mm!important}
  .principal{margin-top:30mm!important}
  .principal strong{margin-top:30mm!important}
}

@media(max-width:760px){.container>.stack>.panel{padding:20px}.container>.stack>.actions{flex-direction:column-reverse}.container>.stack>.actions .button,.container>.stack>.actions button{width:100%}.book-input-head,.book-input-row{min-width:620px;grid-template-columns:45px 1fr 150px 85px}}

/* Panduan alur */
.flow-card{display:grid;grid-template-columns:240px 1fr;gap:26px;padding:24px;margin-bottom:20px;border:1px solid #d8e3dc;border-radius:18px;background:linear-gradient(135deg,#fff,#eef5f0);box-shadow:0 10px 32px rgba(20,55,35,.05)}.flow-title h2{margin:5px 0;font:700 25px Georgia,serif}.flow-title>p:last-child{color:#66726a}.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;list-style:none;margin:0;padding:0}.flow-steps li{display:flex;gap:9px;align-items:flex-start;padding:12px;background:#fff;border:1px solid #e0e7e2;border-radius:12px}.flow-steps li>b{flex:0 0 25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:12px}.flow-steps span{display:grid;gap:3px}.flow-steps strong{font-size:12px}.flow-steps small{color:#6b756f;line-height:1.35}.staff-flow .flow-steps{grid-template-columns:repeat(3,1fr)}
.form-guide{width:min(1120px,calc(100% - 32px));margin:28px auto -18px;padding:22px 24px;border-radius:18px;background:#173d2c;color:#fff;box-shadow:0 12px 35px rgba(18,61,44,.15)}.form-guide>.eyebrow,.form-guide .eyebrow{color:#a9d5bd}.form-guide h2{margin:5px 0 16px;font:700 25px Georgia,serif}.book-help{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:10px}.book-help span{display:grid;gap:3px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.1)}.book-help small{color:#d3e3da}.guide-note{margin:13px 0 0;color:#e1ebe5}
@media(max-width:900px){.flow-card{grid-template-columns:1fr}.flow-steps{grid-template-columns:1fr 1fr}.staff-flow .flow-steps{grid-template-columns:1fr 1fr}.book-help{grid-template-columns:1fr}}
@media(max-width:560px){.flow-steps,.staff-flow .flow-steps{grid-template-columns:1fr}.form-guide{margin-top:18px}.form-guide h2{font-size:21px}}
@media print{.flow-card,.form-guide{display:none!important}}

/* Pengembalian buku */
.return-stats{grid-template-columns:repeat(5,1fr)}.return-stats article{min-width:0;gap:10px}.return-stats article span{font-size:12px}.status.return_requested{background:#ffe7bd;color:#7b4d00}.status.returned{background:#d7eee2;color:#145a35}.return-panel{width:min(900px,calc(100% - 32px));margin:24px auto;padding:24px;background:#fff;border:1px solid #dce2dd;border-radius:15px;box-shadow:0 10px 34px rgba(20,55,35,.06)}.return-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.return-head h2{margin:4px 0;font:700 25px Georgia,serif}.return-head p:last-child{margin-bottom:0;color:#68736c}.return-books{display:grid;gap:8px;margin:20px 0}.return-books>div{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e1e7e3;border-radius:10px;background:#fafcfb}.return-books>div>b{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#e4eee8;color:var(--green)}.return-books span{display:grid}.return-books small{color:#6c776f}.return-books label{display:flex;align-items:center;gap:7px}.return-books input[type=checkbox]{width:18px!important;height:18px!important;min-height:0!important;accent-color:var(--green)}.return-form{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px;padding-top:18px;border-top:1px solid #e1e7e3}.return-form textarea{min-height:70px}.return-message{padding:14px 16px;border-radius:10px;background:#e8f3ec;color:#245b3d}
@media(max-width:900px){.return-stats{grid-template-columns:1fr 1fr}.return-panel{padding:18px}.return-books>div{grid-template-columns:32px 1fr}.return-books label{grid-column:2}.return-form{grid-template-columns:1fr}.return-form button{width:100%}}
@media(max-width:560px){.return-stats{grid-template-columns:1fr}.return-head{flex-direction:column}.return-books>div{grid-template-columns:1fr}.return-books>div>b{display:none}.return-books label{grid-column:auto}}
@media print{.return-panel{display:none!important}}

/* HP dan tablet */
.document-viewport{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}.document-viewport:before{display:none}
@media(max-width:1024px){.page-head{flex-wrap:wrap}.document-viewport{padding:0 12px}.document-viewport:before{content:'Geser ke samping untuk melihat seluruh surat. Saat dicetak ukuran tetap A4.';display:block;position:sticky;left:12px;width:max-content;max-width:calc(100vw - 40px);margin:12px 0;padding:9px 12px;border-radius:8px;background:#e7f1eb;color:#245b3d;font-size:12px}.document{margin-top:12px}.document-toolbar{position:relative;justify-content:flex-start;overflow-x:auto}.document-toolbar>*{flex:0 0 auto}.upload-panel,.return-panel{width:calc(100% - 24px)}}
@media(max-width:760px){
  body{font-size:14px}.container{width:calc(100% - 24px);margin-top:26px}.topbar{height:66px}.brand>b{width:38px;height:38px}.topbar nav{gap:10px}.topbar nav>a{font-size:12px}.page-head{margin-bottom:20px}.page-head h1{font-size:31px}.page-head .button{width:100%}
  .container>.stack .book-input{overflow:visible;border:0;box-shadow:none}.book-input-head{display:none}.book-input-row{min-width:0!important;display:grid;grid-template-columns:36px 1fr;gap:8px;margin-bottom:12px;padding:12px;border:1px solid #dfe5e1;border-radius:12px;background:#fff}.book-input-row span{grid-row:1/4;display:grid;place-items:start center;padding-top:13px;font-weight:800;color:var(--green)}.book-input-row input{grid-column:2;border:1px solid #d6ddd8!important;border-radius:8px!important;background:#fff!important}.book-input-row input:nth-of-type(1)::placeholder{color:#718078}.book-input-row input:nth-of-type(2)::placeholder{color:#718078}
  .flow-card{padding:18px}.flow-steps li{padding:11px}.form-guide{width:calc(100% - 24px);padding:18px}.book-help span{padding:10px 12px}.return-panel,.upload-panel{width:calc(100% - 24px);margin:16px auto}.upload-panel{padding:18px}.document{transform:none!important;margin:12px 0 24px!important}.paper{margin-bottom:16px}.document-viewport{padding-bottom:8px}
}
@media(max-width:420px){.topbar nav a:first-child{display:none}.topbar nav{gap:8px}.brand span{font-size:12px}.auth-card{padding:24px}.auth-copy h1{font-size:36px}.role-list{margin-top:22px}.return-books>div{padding:11px}.document-toolbar{padding:10px}.document-toolbar .button,.document-toolbar button{padding:9px 11px;font-size:12px}}
@media print{.document-viewport{display:block!important;width:210mm!important;overflow:visible!important;padding:0!important}.document-viewport:before{display:none!important}}

/* QR akses formulir siswa */
.student-start{gap:14px}.qr-entry{display:flex;align-items:center;justify-content:center;gap:18px;padding:13px;border:1px solid #dce4df;border-radius:14px;background:#f8faf8}.qr-entry>a{flex:0 0 126px;width:126px;height:126px;padding:8px;border:1px solid #dce2dd;border-radius:10px;background:#fff}.qr-entry img{display:block;width:100%;height:100%}.qr-entry>div{display:grid;gap:7px}.qr-entry b{font-size:14px;color:var(--green)}.qr-entry small{text-align:left;line-height:1.45}.qr-entry strong{overflow-wrap:anywhere}.or-divider{display:flex;align-items:center;gap:10px;color:#7b857f;font-size:11px;text-transform:uppercase}.or-divider:before,.or-divider:after{content:'';height:1px;flex:1;background:#e0e5e1}
@media(max-width:420px){.qr-entry{gap:12px}.qr-entry>a{flex-basis:108px;width:108px;height:108px}.qr-entry b{font-size:12px}.qr-entry small{font-size:10px}}

/* Kontak WhatsApp */
.contact-strip{width:min(900px,calc(100% - 32px));margin:18px auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #cfe1d6;border-radius:14px;background:#edf7f0}.contact-strip>div{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 14px}.contact-strip .eyebrow{grid-column:1/-1}.contact-strip b{color:#174c31}.contact-strip span{color:#52675a}.wa-button{background:#1f8f4d}@media(max-width:600px){.contact-strip{width:calc(100% - 24px);align-items:stretch;flex-direction:column}.contact-strip>div{grid-template-columns:1fr}.contact-strip .eyebrow{grid-column:auto}.wa-button{width:100%}}
@media print{.contact-strip{display:none!important}}