:root{--red:#e30613;--red-dark:#b9000b;--black:#080d13;--ink:#15171b;--muted:#69727f;--line:#e9edf2;--bg:#f5f6f8;--card:#fff;--soft-red:#fff0f1}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#fff,#f3f4f6 280px,#f5f6f8);color:var(--ink)}.topbar{position:sticky;top:0;z-index:10;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:10px 22px;box-shadow:0 10px 30px rgba(0,0,0,.08);border-bottom:4px solid var(--red)}.brand{color:var(--ink);text-decoration:none;font-weight:900;display:flex;align-items:center;gap:12px;font-size:18px}.brand-logo{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.16))}.login-logo-img{display:block;max-width:210px;width:70%;height:auto;margin:0 auto 16px}.nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.nav a{color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:999px;font-weight:750}.nav a:hover{background:var(--soft-red);color:var(--red-dark)}.menu-toggle{display:none}.container{max-width:1260px;margin:0 auto;padding:30px 18px 66px}.hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;padding:24px;border-radius:28px;background:linear-gradient(135deg,#0a0f16,#171d26 62%,#2a0609);color:#fff;box-shadow:0 18px 44px rgba(0,0,0,.16);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-80px;top:-120px;width:270px;height:270px;border-radius:50%;background:rgba(227,6,19,.36)}.hero>*{position:relative;z-index:1}.hero h1{font-size:clamp(28px,4vw,44px);margin:0}.hero p{margin:8px 0 0;color:#f0dadd}.actions{display:flex;gap:10px;flex-wrap:wrap}.card{background:var(--card);border-radius:24px;padding:22px;box-shadow:0 12px 34px rgba(18,24,36,.08);border:1px solid rgba(8,13,19,.08);border-top:4px solid #fff}.card:hover{border-top-color:rgba(227,6,19,.5)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.stats{margin-bottom:22px}.stats.five{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.stats .card strong{display:block;font-size:40px;color:var(--red)}.stats .card span{color:var(--muted)}.warning{border-color:#ffd4d7}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.section-head h2,.card h2{margin:0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:11px 17px;background:#f0f1f3;color:var(--ink);text-decoration:none;font-weight:850;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}.btn.primary{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff}.btn.full{width:100%}.btn:hover{filter:brightness(.97);transform:translateY(-1px)}label{display:block;font-weight:800;margin:12px 0 6px}input,select,textarea{width:100%;border:1px solid #d9dde4;border-radius:14px;padding:12px 13px;font:inherit;background:#fff}input:focus,select:focus,textarea:focus{outline:3px solid rgba(227,6,19,.16);border-color:var(--red)}textarea{resize:vertical}.stack{display:block}.stack.compact label{margin-top:8px}.check{display:flex;align-items:center;gap:9px}.check input{width:auto}.form-row{display:grid;grid-template-columns:1fr 2fr;gap:12px}.badge{display:inline-block;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900}.badge.success,.success-card{background:#eaf8ef;color:#136c35}.badge.warning{background:#fff3d8;color:#875400}.badge.danger{background:#ffe8e8;color:#9b1c1c}.badge.info{background:#eef1f5;color:#111827}.badge.muted{background:#edf1f5;color:var(--muted)}.muted{color:var(--muted)}.small{font-size:13px}.alert{padding:14px 16px;border-radius:16px;margin:0 0 16px}.alert-success{background:#eaf8ef;color:#136c35}.alert-danger{background:#ffe8e8;color:#9b1c1c}.auth-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,rgba(227,6,19,.32),transparent 36%),linear-gradient(135deg,#05070a,#141922 58%,#310408);padding:20px}.auth-card{width:min(440px,100%);background:#fff;border-radius:30px;padding:34px;box-shadow:0 28px 85px rgba(0,0,0,.38);text-align:left;border-top:7px solid var(--red)}.auth-card h1{text-align:center;margin:0 0 6px}.auth-card .muted{text-align:center}.auth-card.wide{width:min(700px,100%)}.copyright{font-size:13px;color:var(--muted);text-align:center;margin:18px 0 0}.footer{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center;color:#77808d;padding:24px}.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}.cards-list{align-items:start}.task p{min-height:48px}.narrow,.narrow-card{max-width:760px}.auth-card code,.card code{background:#edf1f5;padding:2px 5px;border-radius:6px}@media(max-width:880px){.two-col{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.menu-toggle{display:inline-flex;background:#111820;color:#fff;border:0;border-radius:999px;padding:9px 14px}.nav{display:none;position:absolute;left:12px;right:12px;top:78px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.14);border-radius:20px;padding:10px;flex-direction:column;align-items:stretch}.nav.open{display:flex}.topbar{padding:10px 12px}.container{padding:18px 12px 50px}th,td{padding:10px 8px}.card{padding:18px}.brand-logo{width:52px;height:52px}.form-row{grid-template-columns:1fr}}@media(max-width:520px){.auth-card{padding:25px}.login-logo-img{width:82%}.hero{padding:20px}.btn,button.btn{width:100%}.actions{width:100%}}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:8px}.photo-list{display:flex;gap:8px;flex-wrap:wrap}.photo-list a{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eef1f5;text-decoration:none;color:var(--ink);font-weight:800}.hint-box{padding:12px 14px;background:#fff6f6;border:1px solid #ffd9dc;border-radius:16px;color:#7a1218}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.inline-filter{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.inline-filter select{min-width:180px}.password-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.password-card code.password-value{display:inline-block;font-size:15px;word-break:break-all;background:#111820;color:#fff;padding:7px 10px;border-radius:10px}.app-mode .container{padding-bottom:90px}.app-mode .nav a[href$="admin/dashboard.php"],.app-mode .nav a[href$="employee/history.php"]{display:none}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}.detail-grid p{background:#f6f7f9;border:1px solid var(--line);border-radius:16px;padding:12px;margin:0}.photo-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:12px}.photo-gallery figure{margin:0;background:#f6f7f9;border:1px solid var(--line);border-radius:18px;overflow:hidden}.photo-gallery img{width:100%;height:170px;object-fit:cover;display:block}.photo-gallery figcaption{padding:9px 10px;font-size:13px;color:var(--muted);word-break:break-word}.timeline{display:grid;gap:10px}.timeline article{border-left:4px solid var(--red);background:#f6f7f9;border-radius:14px;padding:12px 14px}.table-wrap a,.card h2 a{color:var(--red-dark);text-decoration:none;font-weight:900}.table-wrap a:hover,.card h2 a:hover{text-decoration:underline}

/* v1.3.2 layout refinements */
.narrow-page,.detail-page{max-width:860px;margin-left:auto;margin-right:auto;width:100%}
.detail-page .photo-gallery{grid-template-columns:1fr}
.detail-page .photo-gallery figure{max-width:100%}
.detail-page .photo-gallery img{width:100%;max-width:100%;height:auto;max-height:none;object-fit:contain;background:#f6f7f9}
.inline-filter.compact-filter{display:grid;grid-template-columns:minmax(150px,210px) minmax(150px,210px) auto;gap:8px;align-items:end;justify-content:end}
.inline-filter.compact-filter select{min-width:0;width:100%}
.inline-filter.compact-filter .btn{white-space:nowrap}
@media(max-width:680px){.inline-filter.compact-filter{grid-template-columns:1fr 1fr;justify-content:stretch}.inline-filter.compact-filter .btn{grid-column:1/-1;width:100%}}

/* v1.3.3 consistent page widths */
.narrow,.narrow-card{max-width:760px;margin-left:auto;margin-right:auto;width:100%}
.detail-page{max-width:900px;margin-left:auto;margin-right:auto;width:100%}
.narrow-page{max-width:860px;margin-left:auto;margin-right:auto;width:100%}
.photo-gallery img,.card img{max-width:100%}
.hero.detail-page,.hero.narrow-page{width:100%}