/* ============================================================================
   WorkerHub — Design Tokens & Base Styles
   Shared between Worker Panel and Admin Panel.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ---- Worker Panel theme (light, premium & vivid) ---- */
  --w-bg: #F7F7FB;
  --w-surface: #FFFFFF;
  --w-surface-raised: #FFFFFF;
  --w-border: #EAE8F3;
  --w-border-strong: #D9D6E9;
  --w-ink: #181A2A;
  --w-ink-soft: #5B5C74;
  --w-ink-faint: #9998AE;
  --w-accent: #5B4FE8;
  --w-accent-ink: #FFFFFF;
  --w-accent-soft: #EEECFD;
  --w-accent-2: #0FB6A6;
  --w-accent-2-soft: #E1F7F3;
  --w-accent-3: #E8598A;
  --w-accent-3-soft: #FCE9F0;
  --w-gold: #C4890E;
  --w-gold-soft: #FBF0D8;
  --w-danger: #E23F5F;
  --w-danger-soft: #FDEAEE;
  --w-warn: #D98A17;
  --w-warn-soft: #FBF0DA;
  --w-success: #159A66;
  --w-success-soft: #E1F6EB;
  --w-gradient-primary: linear-gradient(135deg, #6D5AF0 0%, #5B4FE8 48%, #3E86FA 100%);
  --w-gradient-gold: linear-gradient(135deg, #F0C465 0%, #C4890E 100%);
  --w-glow-accent: 0 10px 26px -6px rgba(91,79,232,0.45);
  --w-glow-gold: 0 10px 22px -6px rgba(196,137,14,0.4);

  /* ---- Admin Panel theme (dark, premium & vivid) ---- */
  --a-bg: #0A0B12;
  --a-surface: #13141F;
  --a-surface-raised: #1B1C2C;
  --a-border: #262837;
  --a-border-strong: #363851;
  --a-ink: #F1F1F8;
  --a-ink-soft: #A3A4C1;
  --a-ink-faint: #6C6D8C;
  --a-accent: #8172F8;
  --a-accent-ink: #0A0B12;
  --a-accent-soft: #241F42;
  --a-accent-2: #22D3C5;
  --a-accent-2-soft: #10302E;
  --a-accent-3: #F0699B;
  --a-accent-3-soft: #341C2C;
  --a-gold: #EABA55;
  --a-gold-soft: #2E2512;
  --a-danger: #F2567B;
  --a-danger-soft: #341826;
  --a-warn: #EABA55;
  --a-warn-soft: #2E2512;
  --a-success: #34DB94;
  --a-success-soft: #0F3225;
  --a-gradient-primary: linear-gradient(135deg, #8172F8 0%, #5B4FE8 50%, #2AA8F6 100%);
  --a-gradient-gold: linear-gradient(135deg, #F5D083 0%, #EABA55 100%);
  --a-glow-accent: 0 12px 30px -8px rgba(129,114,248,0.5);
  --a-glow-gold: 0 12px 26px -8px rgba(234,186,85,0.35);

  /* ---- Shared ---- */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-1: 0 1px 2px rgba(24,17,64,0.05), 0 1px 1px rgba(24,17,64,0.04);
  --shadow-2: 0 6px 20px rgba(24,17,64,0.10), 0 2px 6px rgba(24,17,64,0.06);
  --shadow-dark-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-dark-2: 0 10px 30px rgba(0,0,0,0.45);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; overflow-x: hidden; width: 100%; }
body{ margin:0; font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; width: 100%; min-height: 100vh; position: relative; }
img,svg{ display:block; max-width:100%; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

/* Cegah auto-zoom Safari/Chrome mobile saat form di-tap (butuh font-size >=16px) */
@media (max-width: 900px){
  input, select, textarea{ font-size: 16px !important; }
}

.icon{ flex-shrink:0; }

::selection{ background: rgba(91,79,232,0.22); }

/* ---------- Premium shared utilities ---------- */
.text-gradient{
  background: var(--w-gradient-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chip-indigo{ background: var(--w-accent-soft); color: var(--w-accent); }
.chip-teal{ background: var(--w-accent-2-soft); color: var(--w-accent-2); }
.chip-pink{ background: var(--w-accent-3-soft); color: var(--w-accent-3); }
.chip-gold{ background: var(--w-gold-soft); color: var(--w-gold); }
.chip-success{ background: var(--w-success-soft); color: var(--w-success); }
.chip-danger{ background: var(--w-danger-soft); color: var(--w-danger); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Focus visibility */
:focus-visible{
  outline: 2px solid var(--w-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: rgba(128,128,128,0.35); border-radius: 8px; }

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

.skeleton{
  background: linear-gradient(100deg, rgba(128,128,128,0.08) 30%, rgba(128,128,128,0.16) 50%, rgba(128,128,128,0.08) 70%);
  background-size: 200% 100%;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-sweep{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

.spin{ animation: spin 0.9s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.toast-stack{
  position: fixed; z-index: 900; left: 50%; bottom: 24px; transform: translateX(-50%);
  display:flex; flex-direction:column; gap:8px; width: min(92vw, 380px);
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  padding: 12px 14px; border-radius: var(--radius-md);
  font-size: 13.5px; line-height:1.4; font-weight:500;
  box-shadow: var(--shadow-2);
  animation: toast-in 0.22s ease-out;
}
@keyframes toast-in{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }