*,*::before,*::after{box-sizing:border-box}
.wem-portal{max-width:480px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1f2937;background:#f3f4f6;min-height:100vh;padding-bottom:32px}
.wem-portal-header{background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%);padding:20px 20px 28px;color:#fff}
.wem-portal-greeting{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.wem-portal-avatar{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;border:2px solid rgba(255,255,255,.5)}
.wem-portal-name{font-size:18px;font-weight:600;margin-bottom:2px}
.wem-portal-role{font-size:13px;opacity:.85}
.wem-portal-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;opacity:.8}
.wem-portal-code{background:rgba(255,255,255,.2);padding:2px 10px;border-radius:99px;font-weight:600}
.wem-portal-body{padding:0 16px;margin-top:-12px}

/* ── Clock Card ── */
.wem-clock-card{background:#fff;border-radius:16px;padding:24px 20px 16px;box-shadow:0 4px 20px rgba(0,0,0,.08);margin-bottom:16px;text-align:center;transition:opacity .2s}
.wem-clock-time{font-size:44px;font-weight:700;color:#111827;letter-spacing:2px;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:10px}
.wem-clock-status{font-size:13px;color:#6b7280;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:6px;min-height:20px;transition:all .3s ease}
.wem-status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.wem-dot-gray{background:#d1d5db}
.wem-dot-green{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2);animation:pulse-g 2s infinite}
.wem-dot-blue{background:#3b82f6}
@keyframes pulse-g{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.2)}50%{box-shadow:0 0 0 6px rgba(34,197,94,.1)}}
.wem-clock-actions{margin-bottom:12px;min-height:50px;transition:all .3s ease}

/* Skeleton loading */
.wem-skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.wem-skeleton-lg{height:48px;margin:0 auto 10px;width:160px;border-radius:6px}
.wem-skeleton-sm{height:16px;border-radius:6px}
.wem-skeleton-btn{height:50px;border-radius:10px;margin:0 auto;width:100%}
.wem-skeleton-row{height:52px;border-radius:8px;margin-bottom:8px}
.wem-history-skeleton{padding:4px}
.wem-fading{opacity:.4;pointer-events:none}

/* Countdown pulang */
.wem-countdown-wrap{margin-top:12px;padding:10px 16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;text-align:center}
.wem-countdown-label{font-size:12px;color:#4b5563;margin-bottom:4px}
.wem-countdown-time{font-size:28px;font-weight:700;color:#166534;letter-spacing:2px;font-variant-numeric:tabular-nums}

.wem-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:10px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none}
.wem-btn-clock{width:100%;font-size:16px;padding:14px;transition:background .2s,transform .1s}
.wem-btn-clock:active{transform:scale(.97)}
.wem-btn-sm{padding:8px 18px;font-size:13px}
.wem-btn-primary{background:#7c3aed;color:#fff}
.wem-btn-primary:hover{background:#6d28d9;color:#fff}
.wem-btn-danger{background:#e11d48;color:#fff}
.wem-btn-danger:hover{background:#be123c;color:#fff}
.wem-btn-outline{background:transparent;color:#6b7280;border:1px solid #d1d5db}
.wem-btn-outline:hover{background:#f9fafb;color:#374151}
.wem-done-state{display:flex;align-items:center;gap:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px 16px;text-align:left;font-size:13px;animation:fadeIn .4s ease}
.wem-done-state span:first-child{font-size:24px;flex-shrink:0}
.wem-done-state strong{display:block;color:#166534;font-size:14px}
.wem-done-state small{color:#4b5563}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Toast */
.wem-toast{margin-top:12px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;animation:slideUp .2s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.wem-toast-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.wem-toast-error{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}
.wem-worktime-info{font-size:12px;color:#9ca3af;margin-top:4px}

/* Section */
.wem-section{margin-bottom:16px}
.wem-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin-bottom:10px;padding:0 4px}
.wem-history-list{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.wem-history-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f3f4f6;gap:10px;animation:fadeIn .25s ease}
.wem-history-item:last-child{border-bottom:none}
.wem-history-date{min-width:70px}
.wem-history-date strong{display:block;font-size:13px;color:#111827}
.wem-history-date small{font-size:11px;color:#9ca3af}
.wem-history-times{font-size:13px;color:#4b5563;display:flex;align-items:center;gap:6px;flex:1}
.wem-time-in{color:#16a34a;font-weight:500}
.wem-time-out{color:#dc2626;font-weight:500}
.wem-time-sep{color:#d1d5db}
.wem-history-badge{flex-shrink:0}
.wem-badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600}
.wem-badge-green{background:#dcfce7;color:#166534}
.wem-badge-blue{background:#dbeafe;color:#1d4ed8}
.wem-badge-amber{background:#fef9c3;color:#854d0e}
.wem-badge-red{background:#fee2e2;color:#991b1b}
.wem-badge-gray{background:#f3f4f6;color:#6b7280}
.wem-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.wem-summary-card{background:#fff;border-radius:12px;padding:14px 10px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.wem-summary-value{font-size:24px;font-weight:700;color:#7c3aed;line-height:1}
.wem-summary-label{font-size:11px;color:#9ca3af;margin-top:4px}
.wem-profile-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.wem-profile-row{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-bottom:1px solid #f3f4f6;font-size:13px}
.wem-profile-row:last-child{border-bottom:none}
.wem-profile-label{color:#6b7280;font-weight:500}
.wem-empty-state{background:#fff;border-radius:12px;padding:20px;text-align:center;color:#9ca3af;font-size:13px}

/* ── Cuti & Izin ── */
.wem-leave-balances{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;padding:10px 12px;background:#f5f3ff;border-radius:10px;border:1px solid #ede9fe}
.wem-balance-item{display:flex;align-items:center;gap:5px;font-size:12px;color:#374151;background:#fff;padding:4px 10px;border-radius:99px;border:1px solid #ede9fe}
.wem-balance-name{font-weight:500}
.wem-balance-val{color:#7c3aed;font-weight:700;margin-left:3px}
.wem-leave-type-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;vertical-align:middle}
.wem-leave-form-wrap{background:#f9fafb;border-radius:12px;padding:14px;margin-bottom:12px;border:1px solid #e5e7eb}
.wem-form-group{margin-bottom:10px}
.wem-form-group label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}
.wem-form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wem-input{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;background:#fff;color:#111827;box-sizing:border-box;-webkit-appearance:none}
.wem-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 2px rgba(124,58,237,.12)}
.wem-textarea{resize:vertical;min-height:56px;line-height:1.5}
select.wem-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.wem-leave-list{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.wem-leave-item{padding:12px 16px;border-bottom:1px solid #f3f4f6;animation:fadeIn .25s ease}
.wem-leave-item:last-child{border-bottom:none}
.wem-leave-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.wem-leave-item-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6b7280;margin-top:3px}
.wem-leave-reason{font-size:12px;color:#6b7280;margin-top:5px;font-style:italic;line-height:1.4}
.wem-leave-rejection{font-size:12px;color:#dc2626;margin-top:5px;background:#fff1f2;padding:5px 9px;border-radius:7px;border:1px solid #fecdd3}
.wem-leave-review-actions{display:flex;gap:6px;margin-top:9px}
.wem-reject-form{margin-top:8px;background:#fff1f2;border-radius:9px;padding:10px;border:1px solid #fecdd3}
.wem-btn-xs{padding:3px 10px;font-size:11px}

/* Mobile responsive */
@media (max-width: 360px) {
    .wem-clock-time{font-size:36px}
    .wem-summary-value{font-size:20px}
    .wem-countdown-time{font-size:24px}
}