:root{
  --blue:#0e7dbc;
  --blue-dark:#0876b4;
  --red:#ef1b26;
  --red-soft:#f55d70;
  --green:#36b86b;
  --text:#2c2d39;
  --muted:#777984;
  --line:#d7d7dc;
  --panel:#f7f9fd;
  --shadow:0 14px 30px rgba(17,27,44,.14);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:#f7f8fb;
  color:var(--text);
}

a{color:inherit}

.phone{
  width:100%;
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  background:#fff;
  overflow:hidden;
  position:relative;
}

.hero{
  min-height:310px;
  background:linear-gradient(160deg,#0f86c8 0%,#0876b4 72%);
  color:#fff;
  padding:18px 24px 132px;
  position:relative;
}

.statusbar{
  height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
  opacity:.94;
  margin-bottom:22px;
}

.status-icons{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.top-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.menu-button{
  width:78px;
  height:78px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.hamburger{width:32px;display:grid;gap:6px}
.hamburger span{height:3px;border-radius:20px;background:#343845;display:block}

.profile{text-align:right;padding-top:8px}
.greeting{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:18px;font-weight:500;margin-bottom:12px}
.greeting-icon{font-size:24px;filter:drop-shadow(0 2px 6px rgba(255,255,255,.25))}
.name{font-size:28px;line-height:1.05;font-weight:850;letter-spacing:.2px;margin-bottom:18px;text-transform:lowercase}
.division{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:20px;font-weight:700;letter-spacing:.4px}
.briefcase{width:34px;height:30px;border-radius:8px;background:#fff;position:relative;display:inline-block}
.briefcase:before{content:"";position:absolute;width:16px;height:8px;left:9px;top:-7px;border:4px solid #fff;border-bottom:0;border-radius:8px 8px 0 0}
.briefcase:after{content:"";position:absolute;width:100%;height:4px;left:0;top:12px;background:#0e7dbc;opacity:.7}

.attendance-card{
  width:calc(100% - 46px);
  margin:-118px auto 0;
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow);
  position:relative;
  z-index:2;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.04);
}

.company-strip{
  min-height:78px;
  background:linear-gradient(135deg,#f55d70,#f26373);
  padding:20px 20px 36px;
  color:#fff;
  font-size:22px;
  font-weight:850;
  letter-spacing:.8px;
}

.card-body{
  background:#fff;
  margin-top:-20px;
  border-radius:18px 18px 20px 20px;
  padding:24px 20px 22px;
}

.date-area{text-align:right;margin-bottom:26px}
.day-date{font-size:22px;font-weight:850;color:#2f303b;margin-bottom:8px}
.live-clock{font-size:17px;font-weight:650;color:#747782;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.clock-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.clock-box{border:1.7px solid #cfd0d5;border-radius:18px;padding:16px 14px;min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff}
.clock-label{font-size:15px;color:#555862;margin-bottom:20px;font-weight:500}
.clock-time{font-size:22px;font-weight:850;letter-spacing:1px;color:#3b3d47;font-variant-numeric:tabular-nums}
.round-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.round-icon.green{background:#e8faed;color:#35b765}
.round-icon.red{background:#ffe8ec;color:#f05a66}
.icon-svg{width:31px;height:31px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

.absen-btn,
.primary-btn,
.secondary-btn{
  width:100%;
  min-height:58px;
  border:none;
  border-radius:18px;
  font-size:18px;
  font-weight:850;
  text-decoration:none;
  display:grid;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}

.absen-btn{
  background:linear-gradient(135deg,#f41422,#ef1b26);
  color:#fff;
  grid-template-columns:64px 1fr 64px;
  box-shadow:0 8px 15px rgba(239,27,38,.28);
}

.absen-btn:active,.primary-btn:active,.secondary-btn:active{transform:scale(.985)}
.absen-btn.is-disabled{pointer-events:none;opacity:.55}

.primary-btn{
  background:linear-gradient(135deg,#f41422,#ef1b26);
  color:#fff;
  box-shadow:0 10px 20px rgba(239,27,38,.22);
}

.primary-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

.secondary-btn{
  background:#eef5ff;
  color:#14599a;
  border:1px solid #cfe0f6;
}

.secondary-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.danger-btn{
  background:linear-gradient(135deg,#4b5563,#111827);
}

.scan-icon{width:29px;height:29px;margin:auto;position:relative}
.scan-icon:before,.scan-icon:after{content:"";position:absolute;inset:0;border:3px solid #fff;border-radius:8px;clip-path:polygon(0 0,35% 0,35% 16%,16% 16%,16% 35%,0 35%,0 0,65% 0,100% 0,100% 35%,84% 35%,84% 16%,65% 16%)}
.scan-icon:after{transform:rotate(180deg)}

.content{
  padding:6px 18px 92px;
  background:#fff;
}

.page-content{padding-top:16px}
.section-title{margin:0 0 18px;font-size:25px;line-height:1.1;font-weight:900;letter-spacing:-.6px;color:#343541}
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 8px}
.action{text-align:center;text-decoration:none;color:#373844;font-weight:750;font-size:16px}
.action-icon{width:64px;height:64px;border-radius:15px;margin:0 auto 12px;display:grid;place-items:center;box-shadow:0 11px 22px rgba(35,59,120,.18);color:#fff}
.action:nth-child(1) .action-icon{background:linear-gradient(135deg,#3d74e7,#5d83df)}
.action:nth-child(2) .action-icon{background:linear-gradient(135deg,#5676df,#eb3b4a)}
.action:nth-child(3) .action-icon{background:linear-gradient(135deg,#f04b55,#d72f3b)}
.action-icon svg{width:34px;height:34px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

.today-summary,
.info-card,
.form-card,
.list-card,
.notice-card{
  margin:18px 0 0;
  background:#f7f9fd;
  border:1px solid #edf0f6;
  border-radius:22px;
  padding:16px;
}

.today-summary h3,
.list-card h3,
.form-card h3{
  margin:0 0 12px;
  font-size:16px;
}

.summary-row,
.info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:10px 0;
  border-bottom:1px dashed #dfe4ee;
  font-size:14px;
  color:#60636f;
}

.summary-row:last-child,
.info-row:last-child{border-bottom:0}
.summary-row b,.info-row b{color:#30323d;text-align:right}

.notice-card{font-size:14px;line-height:1.55}
.notice-card.success{background:#edf9f1;border-color:#d2efd9}
.notice-card.warning{background:#fff7e8;border-color:#f8e2b1}
.notice-card.danger{background:#fff0f2;border-color:#f7c8cf}

.form-card{
  display:grid;
  gap:14px;
}

.form-grid{
  display:grid;
  gap:14px;
}

.field{
  display:grid;
  gap:8px;
}

.field span{
  font-size:13px;
  font-weight:700;
  color:#50535e;
}

.field input,
.field textarea{
  width:100%;
  border:1.6px solid #d6dce8;
  border-radius:16px;
  background:#fff;
  padding:14px 16px;
  font:inherit;
  color:var(--text);
  resize:vertical;
}

.field input[readonly],
.field textarea[readonly]{
  background:#f2f5fa;
}

.camera-picker{
  display:grid;
  gap:10px;
}

.camera-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.camera-picker-button{
  min-height:56px;
  border-radius:16px;
  background:#eef5ff;
  border:1px solid #cfe0f6;
  color:#14599a;
  font-weight:800;
  display:grid;
  place-items:center;
  text-align:center;
  padding:14px 16px;
  cursor:pointer;
}

.camera-picker-hint{
  font-size:12px;
  color:#6b7280;
}

.field-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr 1fr;
}

.photo-preview{
  min-height:120px;
  border:1px dashed #d0d7e7;
  border-radius:18px;
  background:#fff;
  display:grid;
  place-items:center;
  color:#7b8192;
  text-align:center;
  padding:14px;
  overflow:hidden;
}

.photo-preview img{
  width:100%;
  max-height:260px;
  object-fit:cover;
  border-radius:14px;
}

.location-status{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:#6b7280;
}

.list-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-bottom:1px dashed #dfe4ee;
}

.list-item:last-child{border-bottom:0}
.list-item > div{display:grid;gap:4px}
.list-item strong{font-size:14px}
.list-item span{font-size:13px;color:#6b7280;line-height:1.45}
.list-item b{font-size:12px;color:#0f172a}
.list-item.stacked{display:grid}
.list-head{display:flex;justify-content:space-between;gap:12px}

.empty-state{
  margin:0;
  color:#6b7280;
  font-size:14px;
}

.bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  height:70px;
  background:#fff;
  border-top:1px solid #edf0f6;
  box-shadow:0 -10px 25px rgba(17,27,44,.08);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  z-index:10;
}

.nav-item{
  display:grid;
  place-items:center;
  color:#9296a3;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  padding-top:7px;
}

.nav-item svg{
  width:24px;
  height:24px;
  stroke:currentColor;
  stroke-width:2.2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:2px;
}

.nav-item.active{color:var(--red)}

.drawer{position:fixed;inset:0;z-index:50;pointer-events:none}
.drawer-backdrop{position:absolute;inset:0;background:rgba(9,22,38,.38);opacity:0;transition:.25s}
.drawer-panel{width:300px;max-width:82%;min-height:100%;background:#fff;border-radius:0 28px 28px 0;transform:translateX(-102%);transition:.25s;padding:24px 18px;box-shadow:16px 0 50px rgba(7,25,42,.2)}
.drawer.open{pointer-events:auto}
.drawer.open .drawer-backdrop{opacity:1}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding:4px}
.drawer-logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#0e7dbc,#ef1b26);color:#fff;display:grid;place-items:center;font-weight:900}
.drawer-brand b{display:block;font-size:18px}
.drawer-brand span{color:#7a7f8e;font-size:12px}
.drawer-menu{display:grid;gap:8px}
.drawer-menu a{padding:14px;border-radius:14px;color:#353743;text-decoration:none;display:flex;align-items:center;gap:12px;font-weight:700;background:#f8f9fc}

.toast{
  position:fixed;
  left:50%;
  bottom:86px;
  transform:translateX(-50%) translateY(20px);
  width:calc(100% - 36px);
  max-width:390px;
  background:#172033;
  color:#fff;
  padding:14px 16px;
  border-radius:16px;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:80;
  box-shadow:0 16px 30px rgba(0,0,0,.22);
}

.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:#166534}
.toast.error{background:#991b1b}

.login-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:linear-gradient(180deg,#fff7fa 0%,#ffeef4 100%);
}

.login-shell{
  width:100%;
  max-width:430px;
  position:relative;
}

.login-card{
  background:linear-gradient(180deg,#fff5f8 0%,#ffe8f0 100%);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:24px;
  border:1px solid #f4cfdc;
}

.login-brand{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:14px;
  margin-bottom:26px;
}

.brand-badge{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#0e7dbc,#ef1b26);
  flex:0 0 auto;
}

.login-logo{
  width:180px;
  max-width:100%;
  height:auto;
  display:block;
}

.login-brand h1{
  margin:0;
  font-size:24px;
  line-height:1.1;
  color:#b1144f;
}

.login-brand p,
.login-note{
  margin:0;
  color:#6b7280;
  font-size:14px;
  line-height:1.55;
}

.login-note{
  text-align:center;
}

.login-card .field input,
.login-card .field textarea{
  background:#fffdfd;
  border-color:#efc7d6;
}

.login-card .field input:focus,
.login-card .field textarea:focus{
  outline:none;
  border-color:#dc7ea2;
  box-shadow:0 0 0 4px rgba(220,126,162,.14);
}

@media(max-width:360px){
  .hero{padding-left:18px;padding-right:18px}
  .menu-button{width:70px;height:70px}
  .name{font-size:25px}
  .greeting{font-size:16px}
  .attendance-card{width:calc(100% - 30px)}
  .clock-grid{gap:10px}
  .clock-box{padding:14px 11px}
  .round-icon{width:48px;height:48px}
  .quick-actions{gap:12px}
  .field-grid{grid-template-columns:1fr}
}