/* ============================================================================
   Worker Panel — Styles
   ============================================================================ */

body.worker{
  background: var(--w-bg);
  color: var(--w-ink);
  min-height: 100vh;
  padding-bottom: 84px;
}

/* ---------- App shell ---------- */
.w-topbar{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px;
  background: rgba(247,247,251,0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--w-border);
}
.w-topbar__brand{ display:flex; align-items:center; gap:10px; }
.w-topbar__mark{
  width:32px; height:32px; border-radius:9px;
  background: var(--w-gradient-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:600; font-size:15px;
  box-shadow: var(--w-glow-accent);
}
.w-topbar__name{ font-weight:700; font-size:15px; letter-spacing:-0.01em; }
.w-topbar__actions{ display:flex; align-items:center; gap:4px; }
.w-iconbtn{
  position:relative;
  width:36px; height:36px; border-radius: 10px; border:1px solid transparent;
  background:transparent; color: var(--w-ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition: background 0.15s, color 0.15s;
}
.w-iconbtn:hover{ background: var(--w-surface); color: var(--w-accent); border-color: var(--w-border); box-shadow: var(--shadow-1); }
.w-iconbtn.has-dot::after{
  content:''; position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%;
  background: var(--w-accent-3); box-shadow: 0 0 0 2px var(--w-bg);
  animation: dot-pulse 1.8s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 0 2px var(--w-bg), 0 0 0 0 rgba(232,89,138,0.5); }
  50%{ transform: scale(1.08); box-shadow: 0 0 0 2px var(--w-bg), 0 0 0 4px rgba(232,89,138,0); }
}

.w-main{ max-width: 560px; margin: 0 auto; padding: 20px; }

/* ---------- Bottom nav ---------- */
.w-nav{
  position: fixed; left:0; right:0; bottom:0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--w-border);
  padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
}
.w-nav__inner{
  max-width: 560px; margin:0 auto;
  display:grid; grid-template-columns: repeat(5, 1fr);
}
.w-nav__item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding: 6px 2px; border-radius: 12px;
  color: var(--w-ink-faint); background:transparent; border:none;
  font-size: 10.5px; font-weight:600; letter-spacing:0.01em;
  transition: color 0.15s, transform 0.12s;
}
.w-nav__item.active{ color: var(--w-accent); }
.w-nav__item.active svg{ filter: drop-shadow(0 2px 6px rgba(91,79,232,0.35)); }
.w-nav__item:active{ transform: scale(0.96); }

/* ---------- Cards ---------- */
.w-card{
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.w-card + .w-card{ margin-top: 12px; }
.w-section-title{
  font-size: 13px; font-weight:600; color: var(--w-ink-soft);
  margin: 24px 0 10px; letter-spacing: -0.005em;
}
.w-section-title:first-child{ margin-top:0; }

/* ---------- Stat tiles ---------- */
.w-stats{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.w-stat{
  background: var(--w-surface); border:1px solid var(--w-border); border-radius: var(--radius-lg);
  padding: 16px; position:relative; overflow:hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.w-stat::before{
  content:''; position:absolute; left:0; top:0; right:0; height:3px;
  background: var(--w-border-strong);
}
.w-stat__label{ font-size:12px; color: var(--w-ink-soft); font-weight:500; }
.w-stat__value{
  font-family: var(--font-display); font-size: 26px; font-weight:600;
  margin-top:6px; letter-spacing:-0.01em; color: var(--w-ink);
}
.w-stat--accent::before{ background: var(--w-gradient-primary); }
.w-stat--accent .w-stat__value{ color: var(--w-accent); }
.w-stat--gold::before{ background: var(--w-gradient-gold); }
.w-stat--gold .w-stat__value{ color: var(--w-gold); }
.w-stat--teal::before{ background: var(--w-accent-2); }
.w-stat--teal .w-stat__value{ color: var(--w-accent-2); }
.w-stat--pink::before{ background: var(--w-accent-3); }
.w-stat--pink .w-stat__value{ color: var(--w-accent-3); }
.w-stat--wide{ grid-column: 1 / -1; }

.w-hero-earn{
  background: var(--w-gradient-primary);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  color: #fff;
  position:relative;
  overflow:hidden;
  box-shadow: var(--w-glow-accent);
}
.w-hero-earn::after{
  content:''; position:absolute; right:-50px; top:-60px; width:200px; height:200px;
  border-radius:50%; background: radial-gradient(circle, rgba(255,214,120,0.45), transparent 70%);
}
.w-hero-earn::before{
  content:''; position:absolute; left:-30px; bottom:-50px; width:150px; height:150px;
  border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.w-hero-earn__label{ font-size:12.5px; color: rgba(255,255,255,0.78); font-weight:600; position:relative; }
.w-hero-earn__value{
  font-family: var(--font-display); font-size: 36px; font-weight:600;
  margin-top:6px; letter-spacing:-0.01em; position:relative;
}
.w-hero-earn__meta{ display:flex; gap:16px; margin-top:16px; position:relative; }
.w-hero-earn__meta-item{ font-size:12px; color: rgba(255,255,255,0.72); }
.w-hero-earn__meta-item b{ color:#fff; font-weight:700; display:block; font-size:14px; margin-top:2px; }

/* ---------- Buttons ---------- */
.w-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: 46px; padding: 0 20px; border-radius: var(--radius-md);
  font-size: 14.5px; font-weight:600; border:1px solid transparent;
  transition: transform 0.1s, opacity 0.15s, background 0.15s;
  width:100%;
}
.w-btn:active{ transform: scale(0.985); }
.w-btn--primary{ background: var(--w-gradient-primary); color:#fff; box-shadow: var(--w-glow-accent); }
.w-btn--primary:hover{ filter: brightness(1.06); }
.w-btn--accent{ background: var(--w-accent); color:#fff; }
.w-btn--gold{ background: var(--w-gradient-gold); color:#3A2A06; box-shadow: var(--w-glow-gold); }
.w-btn--ghost{ background: var(--w-surface); color: var(--w-ink); border-color: var(--w-border-strong); }
.w-btn--ghost:hover{ background: #F1F0FA; border-color: var(--w-accent); color: var(--w-accent); }
.w-btn[disabled]{ opacity:0.45; pointer-events:none; }
.w-btn--sm{ height:38px; font-size:13.5px; padding:0 14px; }
.w-btn--auto{ width:auto; }

/* ---------- Forms ---------- */
.w-field{ margin-bottom:16px; }
.w-label{ display:block; font-size:13px; font-weight:600; color: var(--w-ink); margin-bottom:7px; }
.w-hint{ font-size:12px; color: var(--w-ink-faint); margin-top:6px; }
.w-input, .w-select, .w-textarea{
  width:100%; height:46px; padding: 0 14px; border-radius: var(--radius-md);
  border: 1px solid var(--w-border-strong); background: var(--w-surface);
  font-size: 14.5px; color: var(--w-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.w-textarea{ height:auto; padding:12px 14px; min-height:120px; resize:vertical; line-height:1.55; font-family: var(--font-mono); font-size:13.5px; }
.w-input:focus, .w-select:focus, .w-textarea:focus{
  outline:none; border-color: var(--w-accent); box-shadow: 0 0 0 3px var(--w-accent-soft);
}
.w-input.error, .w-textarea.error{ border-color: var(--w-danger); }
.w-error-text{ font-size:12px; color: var(--w-danger); margin-top:6px; font-weight:500; }
.w-select{ appearance:none; background-image: none; }

/* ---------- Status pills ---------- */
.w-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 12px; font-weight:600;
}
.w-pill .icon{ width:13px; height:13px; }
.w-pill--success{ background: var(--w-gold-soft); color: var(--w-gold); }
.w-pill--pending{ background: var(--w-accent-soft); color: var(--w-accent); }
.w-pill--error{ background: var(--w-danger-soft); color: var(--w-danger); }
.w-pill--verification{ background: var(--w-warn-soft); color: var(--w-warn); }
.w-pill--duplicate{ background:#EFEEF7; color: var(--w-ink-soft); }
.w-pill--rejected{ background: var(--w-danger-soft); color: var(--w-danger); }
.w-pill--neutral{ background:#EFEEF7; color: var(--w-ink-soft); }

/* ---------- Job list ---------- */
.w-job{
  display:flex; align-items:center; gap:14px;
  padding: 16px; border-radius: var(--radius-lg);
  background: var(--w-surface); border:1px solid var(--w-border);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.w-job:hover{ border-color: var(--w-border-strong); box-shadow: var(--shadow-1); }
.w-job + .w-job{ margin-top:10px; }
.w-job__icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background: var(--w-accent-soft); color: var(--w-accent);
  display:flex; align-items:center; justify-content:center;
}
.w-job:nth-of-type(3n+2) .w-job__icon{ background: var(--w-accent-2-soft); color: var(--w-accent-2); }
.w-job:nth-of-type(3n+3) .w-job__icon{ background: var(--w-accent-3-soft); color: var(--w-accent-3); }
.w-job__body{ flex:1; min-width:0; }
.w-job__name{ font-weight:600; font-size:14.5px; }
.w-job__meta{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.w-job__price{ font-size:13px; color: var(--w-ink-soft); font-weight:500; }
.w-job__dot{ width:3px; height:3px; border-radius:50%; background: var(--w-ink-faint); }
.w-job__deadline{ font-size:12.5px; color: var(--w-ink-faint); }
.w-job--paused{ opacity:0.55; }

/* ---------- Submission list rows ---------- */
.w-row{
  display:flex; align-items:center; gap:12px;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--w-surface); border:1px solid var(--w-border);
}
.w-row + .w-row{ margin-top:8px; }
.w-row__id{ font-family: var(--font-mono); font-size: 12px; color: var(--w-ink-faint); }
.w-row__body{ flex:1; min-width:0; }
.w-row__title{ font-size:14px; font-weight:600; margin-top:2px; }
.w-row__meta{ font-size:12px; color: var(--w-ink-faint); margin-top:2px; }

/* ---------- Empty state ---------- */
.w-empty{
  text-align:center; padding: 48px 20px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.w-empty__icon{
  width:56px; height:56px; border-radius:16px;
  background: var(--w-surface); border:1px solid var(--w-border);
  display:flex; align-items:center; justify-content:center; color: var(--w-ink-faint);
}
.w-empty__title{ font-weight:600; font-size:15px; }
.w-empty__body{ font-size:13.5px; color: var(--w-ink-soft); max-width:280px; line-height:1.5; }

/* ---------- Rules list ---------- */
.w-rules{ display:flex; flex-direction:column; gap:2px; }
.w-rule{ display:flex; gap:12px; padding: 13px 0; border-bottom:1px solid var(--w-border); }
.w-rule:last-child{ border-bottom:none; }
.w-rule__num{
  width:22px; height:22px; border-radius:7px; flex-shrink:0;
  background: var(--w-accent-soft); color: var(--w-accent);
  font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
}
.w-rule__text{ font-size:13.5px; line-height:1.55; color: var(--w-ink); padding-top:2px; }

/* ---------- Detail rows (key/value) ---------- */
.w-kv{ display:flex; justify-content:space-between; align-items:center; padding: 11px 0; border-bottom:1px solid var(--w-border); gap:12px; }
.w-kv:last-child{ border-bottom:none; }
.w-kv__label{ font-size:13px; color: var(--w-ink-soft); }
.w-kv__value{ font-size:13.5px; font-weight:600; text-align:right; }
.w-kv__value.mono{ font-family: var(--font-mono); font-weight:500; font-size:13px; }

/* ---------- Login / auth screen ---------- */
.w-auth{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding: 32px 24px; max-width:420px; margin:0 auto; }
.w-auth__mark{
  width:52px; height:52px; border-radius:14px; background: var(--w-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display);
  font-weight:600; font-size:24px; margin-bottom:28px;
}
.w-auth__title{ font-family: var(--font-display); font-size:26px; font-weight:600; letter-spacing:-0.01em; }
.w-auth__sub{ font-size:14px; color: var(--w-ink-soft); margin-top:8px; line-height:1.5; }
.w-auth__form{ margin-top:32px; }
.w-auth__switch{ text-align:center; margin-top:20px; font-size:13.5px; color: var(--w-ink-soft); }
.w-auth__switch button{ background:none; border:none; color: var(--w-accent); font-weight:600; padding:0; font-size:13.5px; }

/* ---------- Progress steps (profile setup) ---------- */
.w-steps{ display:flex; gap:6px; margin-bottom:24px; }
.w-steps__seg{ flex:1; height:4px; border-radius:2px; background: var(--w-border-strong); }
.w-steps__seg.done{ background: var(--w-accent); }

/* ---------- Bulk submission textarea counter ---------- */
.w-taFoot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.w-taFoot__count{ font-size:12px; color: var(--w-ink-faint); font-family: var(--font-mono); }

/* ---------- Preview table for bulk submit ---------- */
.w-preview{ border:1px solid var(--w-border); border-radius: var(--radius-md); overflow:hidden; margin-top:14px; }
.w-preview__row{ display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13px; border-bottom:1px solid var(--w-border); }
.w-preview__row:last-child{ border-bottom:none; }
.w-preview__row.dup{ background: #F4F3FC; }
.w-preview__idx{ font-family: var(--font-mono); color: var(--w-ink-faint); font-size:11.5px; width:22px; }
.w-preview__text{ flex:1; font-family: var(--font-mono); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Toast (worker theme) ---------- */
.worker .toast{ background: var(--w-ink); color:#fff; }
.worker .toast.err{ background: var(--w-danger); }
.worker .toast.ok{ background: #1F3D2B; }

/* ---------- Loading screen ---------- */
.w-loading-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; }

/* ---------- Sheet / modal ---------- */
.w-sheet-backdrop{ position:fixed; inset:0; background: rgba(20,20,18,0.45); z-index: 200; opacity:0; transition: opacity 0.2s; }
.w-sheet-backdrop.show{ opacity:1; }
.w-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:201;
  background: var(--w-surface); border-radius: 20px 20px 0 0;
  padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
  max-width:560px; margin:0 auto;
  transform: translateY(100%); transition: transform 0.25s cubic-bezier(.32,.72,0,1);
  max-height: 82vh; overflow-y:auto;
}
.w-sheet.show{ transform: translateY(0); }
.w-sheet__handle{ width:36px; height:4px; border-radius:2px; background: var(--w-border-strong); margin: 10px auto 16px; }
.w-sheet__title{ font-family: var(--font-display); font-size:19px; font-weight:600; margin-bottom:4px; }

/* ---------- Announcement popup (pengumuman wajib dibaca) ---------- */
.w-announce-backdrop{
  position:fixed; inset:0; z-index: 500;
  background: rgba(12,10,30,0.55);
  backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition: opacity 0.22s;
}
.w-announce-backdrop.show{ opacity:1; }
.w-announce{
  width:min(420px, 100%); background: var(--w-surface); border-radius: 22px;
  overflow:hidden; box-shadow: var(--shadow-2);
  transform: translateY(14px) scale(0.97); opacity:0;
  transition: transform 0.25s cubic-bezier(.32,.72,0,1), opacity 0.25s;
}
.w-announce-backdrop.show .w-announce{ transform: translateY(0) scale(1); opacity:1; }
.w-announce__head{
  background: var(--w-gradient-primary); color:#fff; padding: 26px 22px 22px;
  position:relative; overflow:hidden;
}
.w-announce__head::after{
  content:''; position:absolute; right:-30px; top:-40px; width:150px; height:150px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,214,120,0.4), transparent 70%);
}
.w-announce__badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  background: rgba(255,255,255,0.18); padding:5px 10px 5px 8px; border-radius:999px;
  position:relative; letter-spacing:0.01em;
}
.w-announce__icon{
  width:46px; height:46px; border-radius:14px; background: rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; margin-top:14px; position:relative;
}
.w-announce__title{ font-family: var(--font-display); font-size:20px; font-weight:600; margin-top:12px; position:relative; line-height:1.3; }
.w-announce__body{ padding: 20px 22px 22px; }
.w-announce__msg{ font-size:13.5px; line-height:1.65; color: var(--w-ink-soft); white-space:pre-wrap; max-height:38vh; overflow-y:auto; }
.w-announce__foot{ padding: 0 22px 22px; }
.w-announce__btn{
  width:100%; height:48px; border-radius: var(--radius-md); border:none;
  background: var(--w-ink); color:#fff; font-size:14.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: background 0.15s, opacity 0.15s;
}
.w-announce__btn[disabled]{ background: var(--w-border-strong); color: var(--w-ink-faint); pointer-events:none; }
.w-announce__btn:not([disabled]){ background: var(--w-gradient-primary); box-shadow: var(--w-glow-accent); }

/* ---------- Notification center (bell sheet) ---------- */
.w-notif-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--w-border); }
.w-notif-item:last-child{ border-bottom:none; }
.w-notif-item__icon{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background: var(--w-accent-soft); color: var(--w-accent);
  display:flex; align-items:center; justify-content:center;
}
.w-notif-item.unread .w-notif-item__icon{ background: var(--w-accent-3-soft); color: var(--w-accent-3); }
.w-notif-item__body{ flex:1; min-width:0; }
.w-notif-item__title{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.w-notif-item__dot{ width:6px; height:6px; border-radius:50%; background: var(--w-accent-3); flex-shrink:0; }
.w-notif-item__msg{ font-size:12.5px; color: var(--w-ink-soft); margin-top:3px; line-height:1.5; white-space:pre-wrap; }
.w-notif-item__time{ font-size:11px; color: var(--w-ink-faint); margin-top:5px; }

/* ---------- Responsive ---------- */
@media (min-width: 640px){
  .w-main{ padding: 28px 24px; }
}