/* ig_label public UI — mobile-first, Thai. External stylesheet only (CSP). */

:root {
  /* Color tokens — unified with the ig_manager dark dashboard theme. The
     light/dark auto-switch is intentionally collapsed to one dark theme so the
     public site and the back office share a single look. */
  --bg: #0e1116;
  --surface: #161b22;
  --panel-2: #1c2230;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --primary: #4f8cff;
  --primary-hover: #6ea0ff;
  --primary-contrast: #ffffff;
  --border: #2a3140;
  --error-bg: #3a1d1b;
  --error-border: #5c2b27;
  --error-text: #f6a8a3;
  --notice-bg: #1e2b45;
  --notice-text: #9db8ef;

  /* Spacing + sizing tokens */
  --radius: 12px;
  --gap: 16px;
  --control-height: 52px; /* large touch targets (>=48px) */
  --container-max: 480px;

  /* Typography — Thai-friendly stack with system fallbacks */
  --font-stack: "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Tahoma",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-stack);
  font-size: 17px;
  line-height: 1.5;
}

/* Centered, phone-width column with safe-area padding. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: calc(var(--gap) + env(safe-area-inset-top, 0px)) var(--gap)
    calc(var(--gap) + env(safe-area-inset-bottom, 0px));
}

h1 {
  font-size: 1.6rem;
  margin: 0.4em 0 0.6em;
}

a {
  color: var(--primary);
}

/* --- Forms --------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap);
}

/* A secondary form (e.g. resend) sits flush under the primary one. */
.form-secondary {
  margin-top: var(--gap);
  background: transparent;
  border: none;
  padding: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}

input[type="tel"],
input[type="text"],
input[type="password"] {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 14px;
  font-size: 1.1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* Big, centered, spaced OTP entry. */
.otp-input {
  text-align: center;
  font-size: 1.7rem;
  letter-spacing: 0.4em;
  padding-left: 0.4em; /* offset letter-spacing so glyphs stay centered */
}

/* Checkbox + label row for consent. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.98rem;
  line-height: 1.4;
}

.consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  flex: 0 0 auto;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 18px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-contrast);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--border);
}

/* --- Messaging boxes ----------------------------------------------------- */
.error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: var(--gap);
  font-size: 0.98rem;
}

.notice {
  background: var(--notice-bg);
  color: var(--notice-text);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: var(--gap);
  font-size: 0.98rem;
}

.helper {
  color: var(--text-muted);
  margin: 0 0 var(--gap);
}

/* --- Misc ---------------------------------------------------------------- */
.alt-link {
  text-align: center;
  margin-top: var(--gap);
  color: var(--text-muted);
}

.role {
  color: var(--text-muted);
  margin-bottom: var(--gap);
}

/* ===== Public landing page (promo) — added 2026-06-14 ===== */
.lp-hero{text-align:center;padding:38px 22px 30px;border-radius:20px;color:#fff;margin:0 0 18px;
  background:linear-gradient(160deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%);}
.lp-eyebrow{display:inline-block;font-size:.76rem;letter-spacing:.02em;background:rgba(255,255,255,.18);
  padding:6px 12px;border-radius:999px;margin-bottom:14px;}
.lp-title{font-size:1.85rem;line-height:1.22;margin:0 0 12px;font-weight:800;}
.lp-sub{font-size:1.02rem;line-height:1.5;max-width:32rem;margin:0 auto 22px;color:rgba(255,255,255,.92);}
.lp-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.lp-fineprint{margin:14px 0 0;font-size:.82rem;color:rgba(255,255,255,.82);}
.btn-lg{padding:14px 22px;font-size:1.05rem;border-radius:14px;}
.lp-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6);background:transparent;}
.lp-hero .btn-ghost:hover{background:rgba(255,255,255,.14);}
.lp-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 8px;}
.lp-perk{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 12px;text-align:center;}
.lp-ico{font-size:1.8rem;display:block;margin-bottom:6px;}
.lp-perk h3{margin:0 0 4px;font-size:1rem;}
.lp-perk p{margin:0;font-size:.84rem;color:var(--text-muted);}
.lp-h2{text-align:center;font-size:1.3rem;margin:28px 0 16px;}
.step-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.step-list li{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.step-n{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--primary);
  color:var(--primary-contrast);display:grid;place-items:center;font-weight:800;}
.step-list strong{display:block;}
.step-list p{margin:4px 0 0;color:var(--text-muted);font-size:.9rem;}
.lp-final{text-align:center;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:28px 20px;margin:28px 0 8px;}
.lp-trust{margin:16px auto 0;max-width:30rem;font-size:.84rem;color:var(--text-muted);}
@media (max-width:380px){.lp-perks{grid-template-columns:1fr;}.lp-title{font-size:1.55rem;}}

/* ===== Landing: desktop layout + illustration (v3, 2026-06-14) ===== */
body:has(.lp-hero) .container{max-width:1080px;}
.lp-hero{position:relative;overflow:hidden;}
.lp-hero-text{position:relative;z-index:1;}
.lp-illus{margin:18px auto 0;max-width:280px;}
.lp-illus svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 30px rgba(0,0,0,.20));}
@media (min-width:860px){
  body:has(.lp-hero) .container{padding-top:28px;padding-bottom:28px;}
  .lp-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;text-align:left;gap:40px;padding:60px 56px;border-radius:28px;}
  .lp-eyebrow{margin-bottom:18px;}
  .lp-title{font-size:2.7rem;}
  .lp-sub{margin:0 0 24px;font-size:1.12rem;max-width:34rem;}
  .lp-cta{justify-content:flex-start;}
  .lp-fineprint{text-align:left;}
  .lp-illus{margin:0;max-width:380px;justify-self:center;}
  .lp-perks{grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0 10px;}
  .lp-perk{padding:28px 20px;}
  .lp-ico{font-size:2.1rem;}
  .lp-perk h3{font-size:1.12rem;}
  .lp-perk p{font-size:.92rem;}
  .lp-h2{font-size:1.7rem;margin:46px 0 24px;}
  .step-list{grid-template-columns:repeat(3,1fr);gap:18px;}
  .step-list li{flex-direction:column;text-align:center;align-items:center;padding:26px 22px;gap:12px;}
  .lp-final{padding:44px 40px;border-radius:24px;}
}
@media (min-width:1024px){ .lp-title{font-size:3rem;} }

/* ===== Unified slim top bar (public + payout pages) — merged app ===== */
.pub-topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;}
.pub-brand{font-weight:800;font-size:1.05rem;color:var(--text);text-decoration:none;letter-spacing:.01em;}
.pub-nav{margin-left:auto;display:flex;align-items:center;gap:14px;}
.pub-nav a{color:var(--text);font-weight:600;font-size:.95rem;text-decoration:none;}
.pub-nav a:hover{color:var(--primary);}
.pub-cta{background:var(--primary);color:var(--primary-contrast)!important;padding:8px 14px;border-radius:10px;}
.pub-cta:hover{background:var(--primary-hover);}
.pub-logout{margin:0;}
.pub-logout button{background:transparent;border:1px solid var(--border);color:var(--text-muted);
  padding:7px 12px;border-radius:10px;font:inherit;font-size:.9rem;cursor:pointer;}
.pub-logout button:hover{border-color:var(--primary);color:var(--text);}
/* On the landing page the hero stretches wide; keep the bar full-width + compact. */
body:has(.lp-hero) .pub-topbar{max-width:none;}

/* ===== Labeling workspace (the "/" home for logged-in users) ===== */
.work{max-width:560px;margin:0 auto;}
.work-earn{display:flex;align-items:center;justify-content:center;gap:18px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;margin-bottom:16px;}
.we-item{display:flex;flex-direction:column;align-items:center;line-height:1.2;}
.we-label{font-size:.78rem;color:var(--text-muted);}
.we-value{font-size:1.4rem;font-weight:800;color:var(--primary);}
.we-unit{font-size:.72rem;color:var(--text-muted);}
.we-sep{width:1px;height:34px;background:var(--border);}
.work-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 18px 22px;}
.work-q{text-align:center;font-size:1.15rem;margin:0 0 16px;line-height:1.4;}
.work-q b{color:var(--primary);}
.ref-cap{font-size:.8rem;color:var(--text-muted);font-weight:600;margin:0 0 8px;}
.ref-block{margin-bottom:16px;}
.ref-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.ref-row .ref{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:var(--bg);}
.cand-block{margin-bottom:14px;}
.cand-wrap{display:flex;justify-content:center;}
.cand-img{width:100%;max-width:300px;aspect-ratio:1;object-fit:cover;border-radius:16px;
  border:2px solid var(--primary);background:var(--bg);}
.work-msg{min-height:1.4em;text-align:center;color:var(--text-muted);font-size:.9rem;margin:10px 0;}
.ans-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ans{min-height:62px;border:0;border-radius:14px;font:inherit;font-size:1.1rem;font-weight:700;cursor:pointer;
  color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;transition:filter .12s,opacity .12s;}
.ans:hover{filter:brightness(1.08);}
.ans:active{filter:brightness(.94);}
.ans:disabled{opacity:.45;cursor:default;}
.ans-ico{font-size:1.2rem;}
.ans-yes{background:#22c55e;}
.ans-no{background:#ef4444;}
.ans-unsure{grid-column:1 / -1;background:var(--panel-2);color:var(--text);border:1px solid var(--border);}
.ans kbd{font-size:.72rem;background:rgba(255,255,255,.22);border-radius:5px;padding:1px 6px;
  font-family:ui-monospace,Menlo,monospace;}
.ans-unsure kbd{background:var(--bg);}
.work-hint{text-align:center;color:var(--text-muted);font-size:.8rem;margin:16px 0 0;line-height:1.5;}
@media (max-width:380px){.ref-row .ref{width:72px;height:72px;}.work-q{font-size:1.05rem;}}
/* candidate image: hidden until loaded (no broken-icon), shimmer while loading */
.cand-img{opacity:0;transition:opacity .2s;}
.cand-img.ready{opacity:1;}
.cand-img.loading{opacity:1;background:linear-gradient(90deg,var(--surface),var(--panel-2),var(--surface));
  background-size:200% 100%;animation:cand-shimmer 1.1s linear infinite;}
@keyframes cand-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
/* empty state (no tasks left) */
.work-empty{text-align:center;padding:34px 16px;}
.we-emoji{font-size:2.6rem;margin-bottom:8px;}
.we-title{font-size:1.2rem;font-weight:800;margin:0 0 6px;}
.we-sub{color:var(--text-muted);margin:0;font-size:.92rem;line-height:1.5;}
/* answer confirmation pulse */
.work-card{transition:box-shadow .15s;}
.flash-yes .work-card{box-shadow:0 0 0 2px #22c55e;}
.flash-no .work-card{box-shadow:0 0 0 2px #ef4444;}
.flash-unsure .work-card{box-shadow:0 0 0 2px var(--text-muted);}