:root{--teal:#20d7c7;--pink:#ec36b5;--text:#eef7ff;--muted:#9bb1c5}*{box-sizing:border-box}body{margin:0;color:var(--text);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 12% 18%,#0c3150,transparent 36%),radial-gradient(ellipse at 92% 42%,#35103c,transparent 32%),linear-gradient(135deg,#050b16,#081629 55%,#050a14);min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:14px clamp(14px,4vw,50px);border-bottom:1px solid #173247;background:#050d19dd;gap:12px}.brand{display:flex;align-items:center;gap:12px}.brand img{width:62px;height:62px;object-fit:contain;background:white;border-radius:10px}.brand b{display:block;letter-spacing:.04em}.brand small{display:block;color:var(--teal);font-size:10px;letter-spacing:.12em;margin-top:5px}button{cursor:pointer;font-weight:bold}.outline{border:1px solid var(--teal);color:var(--text);background:#0a2334;border-radius:10px;padding:11px 13px;white-space:nowrap}main{max-width:1000px;margin:auto;padding:28px 16px}.hero{text-align:center;padding:6px 0 24px}.eyebrow{color:var(--teal);font-size:11px;letter-spacing:.18em;font-weight:bold}h1{font-size:clamp(27px,5vw,44px);margin:13px 0 8px}h1 span{color:var(--teal)}.hero p,.muted{color:var(--muted);font-size:13px}.location{display:inline-block;border:1px solid #275167;background:#092031;padding:9px 14px;border-radius:24px;color:var(--teal);font-size:12px}.card{background:linear-gradient(145deg,#0b1b2def,#071423f2);border:1px solid #25475e;border-radius:18px;padding:clamp(18px,4vw,28px);max-width:720px;margin:0 auto;box-shadow:0 20px 55px #0005}h2{font-size:20px;margin:0 0 6px}.muted{margin:0 0 18px}label{display:block;font-size:12px;font-weight:bold;color:#c4d5e5;margin:14px 0 7px}input{width:100%;border:1px solid #31516a;background:#091626;color:white;padding:14px;border-radius:10px;font-size:15px}input:focus{outline:1px solid var(--teal)}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:22px}.actions button{min-height:105px;border:1px solid transparent;border-radius:13px;color:white;font-size:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.actions b{font-size:12px}.masuk{background:linear-gradient(145deg,#05c99b,#008d78);border-color:#12e0b1!important}.pulang{background:linear-gradient(145deg,#168cfb,#0753c8);border-color:#249bff!important}.lembur{background:linear-gradient(145deg,#e52cb4,#a80089);border-color:#ff4cc9!important}.status{margin-top:15px;padding:12px 14px;border:1px solid #285067;border-radius:10px;background:#10283a;color:#c5d9e8;font-size:13px}.status.success{color:#8ef4d8;border-color:#138a71}.status.error{color:#ffb9d9;border-color:#a63a6c}.note{display:block;color:#7892a8;font-size:11px;text-align:center;margin-top:13px}.logs{margin-top:24px;padding:22px}.loghead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}.scroll{overflow:auto}table{border-collapse:collapse;width:100%;min-width:450px;text-align:left;font-size:13px}th,td{padding:12px;border-bottom:1px solid #1b354b}th{color:#8faec4;background:#10263a}td{color:#dce9f4}footer{text-align:center;color:#627d93;font-size:11px;padding:24px 0}.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;padding:15px;z-index:4}.hidden{display:none!important}.modalcard{position:relative;width:min(100%,700px);max-height:90vh;overflow:auto}.close{position:absolute;right:12px;top:8px;background:none;border:0;color:white;font-size:28px}.submit{margin-top:15px;width:100%;padding:13px;border:0;border-radius:10px;background:var(--teal);color:#04141e}.tag{border-radius:18px;padding:4px 8px;font-size:11px}.tag-MASUK{background:#075a4b;color:#7af2d1}.tag-PULANG{background:#123f78;color:#9ccfff}.tag-LEMBUR{background:#6d155b;color:#ffc0eb}@media(max-width:560px){header{padding:10px}.brand{gap:7px}.brand img{width:46px;height:46px}.brand b{font-size:12px}.brand small{font-size:8px}.outline{font-size:11px;padding:9px}.actions{gap:6px}.actions button{min-height:95px;font-size:23px}.actions b{font-size:10px}.card{padding:17px 13px}.logs{padding:15px 10px}.loghead h2{font-size:16px}}