/* ============================================================
   Pukdee Affiliate / KOL — Shared UI tokens
   ใช้ร่วมกับ /assets/css/tailwind.min.css (โหลด tailwind ก่อน แล้วทับด้วยไฟล์นี้)
   ครอบคลุม: auth pages (login/register/forgot/reset) + reuse ได้ในเฟสถัดไป
   ธีม: Light soft-grid + emerald primary (สอดคล้องทั้งระบบ Pukdee)
   ============================================================ */

:root {
    --aff-bg: #f6f8fb;
    --aff-ink: #0f172a;
    --aff-sub: #64748b;
    --aff-line: #e2e8f0;
    --aff-field-line: #cbd5e1;
    --aff-field-bg: #f8fafc;
    --aff-primary: #10b981;
    --aff-primary-dark: #059669;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", sans-serif;
    background: var(--aff-bg);
    color: var(--aff-ink);
}

/* พื้นหลังตารางนุ่ม (hero / auth shell) */
.soft-grid {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(16, 185, 129, .14), transparent 28%),
        radial-gradient(circle at 88% 5%, rgba(59, 130, 246, .12), transparent 26%),
        linear-gradient(180deg, #f8fafc, #eef2f7);
}

/* การ์ดหลัก */
.card {
    background: #fff;
    border: 1px solid var(--aff-line);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

/* ช่องกรอกข้อมูล */
.field {
    border: 1px solid var(--aff-field-line);
    border-radius: 18px;
    padding: 14px 16px;
    width: 100%;
    outline: none;
    background: var(--aff-field-bg);
    color: var(--aff-ink);
}
.field::placeholder { color: #94a3b8; }
.field.password-field { padding-right: 52px; }
.field:focus {
    border-color: var(--aff-primary);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
    background: #fff;
}
textarea.field { min-height: 96px; resize: vertical; }

/* ปุ่มลูกตา ดู/ซ่อนรหัสผ่าน */
.eye-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--aff-sub);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.eye-btn:hover { background: #e2e8f0; color: var(--aff-ink); }

/* badge สถานะ (pill) */
.pill { border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; display: inline-block; }

/* ปุ่มคัดลอก */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    border: 1px solid var(--aff-field-line);
    background: #fff;
    color: var(--aff-ink);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .12s;
}
.copy-btn:hover { background: var(--aff-field-bg); border-color: var(--aff-primary); }
.copy-btn.copied { background: #ecfdf5; border-color: var(--aff-primary); color: var(--aff-primary-dark); }