/* AffiliateFlow — frontend (ปรับสีหลักได้ด้วย --taf-accent) */
.taf-wrap{--taf-accent:#4f46e5;--taf-accent-2:#6366f1;--taf-ink:#111827;--taf-muted:#6b7280;--taf-line:#e5e7eb;--taf-soft:#f6f7fb;--taf-card:#fff;--taf-radius:14px;--taf-green:#059669;--taf-red:#dc2626;--taf-amber:#d97706;color:var(--taf-ink);font-size:15px;line-height:1.6;max-width:1100px;margin:0 auto 32px;box-sizing:border-box}
.taf-wrap *,.taf-wrap *::before,.taf-wrap *::after{box-sizing:border-box}
.taf-wrap h2{font-size:24px;margin:0;line-height:1.3}
.taf-wrap h3{font-size:18px;margin:0 0 12px}
.taf-wrap h4{font-size:15px;margin:18px 0 8px;color:var(--taf-ink)}
.taf-muted{color:var(--taf-muted)}
.taf-small{font-size:13px}
.taf-center{text-align:center}
.taf-hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
[hidden]{display:none!important}

.taf-card{background:var(--taf-card);border:1px solid var(--taf-line);border-radius:var(--taf-radius);padding:20px;margin:0 0 16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.taf-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.taf-card-head a{font-size:14px;text-decoration:none;color:var(--taf-accent)}
.taf-auth,.taf-register{max-width:640px;margin-left:auto;margin-right:auto}
.taf-auth{max-width:420px}
.taf-status-icon{font-size:44px;line-height:1;margin:6px 0}

.taf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--taf-accent);color:#fff!important;border:1px solid var(--taf-accent);border-radius:10px;padding:10px 18px;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none!important;transition:.15s;font-family:inherit}
.taf-btn:hover{background:var(--taf-accent-2);border-color:var(--taf-accent-2)}
.taf-btn:disabled{opacity:.6;cursor:wait}
.taf-btn-sm{padding:7px 12px;font-size:13.5px;border-radius:8px}
.taf-btn-lg{padding:13px 24px;font-size:16px;width:100%;margin-top:8px}
.taf-btn-ghost{background:#fff;color:var(--taf-accent)!important;border-color:#c7d2fe}
.taf-btn-ghost:hover{background:#eef2ff;border-color:var(--taf-accent)}
.taf-btn.is-done{background:var(--taf-green);border-color:var(--taf-green);color:#fff!important}
.taf-link-btn{background:none;border:0;padding:0;color:var(--taf-red);cursor:pointer;font-size:13.5px;text-decoration:underline;font-family:inherit}
.taf-inline-form{display:inline}

.taf-notice{padding:12px 16px;border-radius:10px;margin:0 0 16px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}
.taf-notice.taf-success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.taf-notice.taf-error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.taf-err{display:block;color:var(--taf-red);font-size:13px;margin-top:4px}

/* form */
.taf-form h3{margin-bottom:6px}
.taf-field{display:block;margin:0 0 12px}
.taf-field>span{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.taf-field>span em{color:var(--taf-red);font-style:normal}
.taf-wrap input[type=text],.taf-wrap input[type=email],.taf-wrap input[type=tel],.taf-wrap input[type=url],.taf-wrap input[type=password],.taf-wrap input[type=number],.taf-wrap input[type=search],.taf-wrap input[type=date],.taf-wrap select,.taf-wrap textarea{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:10px 12px;font-size:15px;background:#fff;color:var(--taf-ink);font-family:inherit;line-height:1.4;min-height:42px;box-shadow:none;margin:0}
.taf-wrap input:focus,.taf-wrap select:focus,.taf-wrap textarea:focus{outline:none;border-color:var(--taf-accent);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.taf-field.has-err input,.taf-field.has-err textarea{border-color:var(--taf-red)}
.taf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.taf-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.taf-check{display:flex;gap:8px;align-items:flex-start;margin:10px 0;font-size:14px;cursor:pointer}
.taf-check input{margin-top:4px;width:17px;height:17px;accent-color:var(--taf-accent)}
.taf-check.has-err{color:var(--taf-red)}
.taf-radios{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.taf-radio{display:flex;align-items:center;gap:8px;border:1px solid var(--taf-line);border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:500}
.taf-radio:has(input:checked){border-color:var(--taf-accent);background:#eef2ff}
.taf-radio input{accent-color:var(--taf-accent)}
.taf-pay-box{background:var(--taf-soft);border-radius:10px;padding:14px 14px 2px;margin-bottom:12px}
.taf-auth form p{margin:0 0 12px}
.taf-auth label{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.taf-auth .login-remember label{font-weight:400}
.taf-auth .button-primary{background:var(--taf-accent);color:#fff;border:0;border-radius:10px;padding:11px 20px;font-weight:600;width:100%;cursor:pointer;font-size:15px}

/* dashboard */
.taf-dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.taf-dash-head p{margin:4px 0 0}
.taf-tabs{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px 0 var(--taf-line);margin-bottom:18px;scrollbar-width:thin}
.taf-tabs a{display:flex;align-items:center;gap:6px;padding:10px 14px;white-space:nowrap;text-decoration:none;color:var(--taf-muted);font-weight:600;font-size:14.5px;border-bottom:2px solid transparent}
.taf-tabs a:hover{color:var(--taf-ink)}
.taf-tabs a.is-active{color:var(--taf-accent);border-bottom-color:var(--taf-accent)}
.taf-i{font-style:normal;font-size:15px}
.taf-i-chart::before{content:"📊"}.taf-i-link::before{content:"🔗"}.taf-i-bag::before{content:"🛍️"}.taf-i-flag::before{content:"🚩"}.taf-i-coins::before{content:"💰"}.taf-i-wallet::before{content:"🏦"}.taf-i-image::before{content:"🖼️"}.taf-i-ticket::before{content:"🎟️"}.taf-i-user::before{content:"👤"}

.taf-range,.taf-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.taf-filter input[type=search]{max-width:260px}
.taf-filter select{max-width:220px}
.taf-seg{display:inline-flex;background:var(--taf-soft);border:1px solid var(--taf-line);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.taf-seg label{padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--taf-muted);margin:0}
.taf-seg label.is-active{background:#fff;color:var(--taf-accent);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.taf-seg input{display:none}
.taf-custom input{width:auto;min-height:36px;padding:6px 10px}
.taf-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.taf-inline input[type=text]{flex:1;min-width:180px}
.taf-camp-inline select{width:auto;min-width:160px}

.taf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.taf-stat{background:#fff;border:1px solid var(--taf-line);border-radius:var(--taf-radius);padding:16px;position:relative;overflow:hidden}
.taf-stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c)}
.taf-stat span{display:block;color:var(--taf-muted);font-size:13.5px;font-weight:600}
.taf-stat b{display:block;font-size:24px;line-height:1.3;margin-top:4px;letter-spacing:-.01em}
.taf-stat small{color:var(--taf-muted);font-size:12.5px}
.taf-c-blue{--c:#3b82f6}.taf-c-violet{--c:#8b5cf6}.taf-c-teal{--c:#14b8a6}.taf-c-amber{--c:#f59e0b}

.taf-balance{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.taf-bal{background:var(--taf-soft);border-radius:12px;padding:14px 16px}
.taf-bal span{display:block;font-size:13px;color:var(--taf-muted);font-weight:600}
.taf-bal b{display:block;font-size:20px;margin-top:2px}
.taf-bal small{font-size:12px;color:var(--taf-muted)}
.taf-bal.is-hl{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.taf-bal.is-hl span,.taf-bal.is-hl small{color:rgba(255,255,255,.85)}

.taf-chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.taf-chart{min-height:220px}
.taf-chart svg{display:block}
.taf-grid-line{stroke:#eef0f4;stroke-width:1}
.taf-axis{fill:#9ca3af;font-size:11px;font-family:inherit}
.taf-line{fill:none;stroke:var(--taf-accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.taf-area{fill:rgba(79,70,229,.1)}
.taf-dot{fill:#fff;stroke:var(--taf-accent);stroke-width:2}

.taf-copy{display:flex;gap:6px;margin:8px 0}
.taf-copy input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px!important;background:var(--taf-soft)!important}
.taf-copy-sm{margin:6px 0 0}
.taf-copy-sm input{min-height:34px!important;padding:6px 10px!important}

/* tables */
.taf-table-wrap{overflow-x:auto}
.taf-table{width:100%;border-collapse:collapse;font-size:14px}
.taf-table th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--taf-muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--taf-line);white-space:nowrap}
.taf-table td{padding:10px;border-bottom:1px solid #f1f2f5;vertical-align:top}
.taf-table .num{text-align:right;white-space:nowrap}
.taf-table tr.is-neg b{color:var(--taf-red)}
.taf-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#f3f4f6;color:#374151;white-space:nowrap}
.taf-commission-pending,.taf-payout-requested,.taf-affiliate-pending{background:#fef3c7;color:#92400e}
.taf-commission-approved,.taf-payout-processing,.taf-affiliate-approved{background:#dbeafe;color:#1e40af}
.taf-commission-paid,.taf-payout-paid{background:#d1fae5;color:#065f46}
.taf-commission-rejected,.taf-commission-cancelled,.taf-payout-rejected,.taf-payout-cancelled,.taf-affiliate-rejected,.taf-affiliate-banned{background:#fee2e2;color:#991b1b}
.taf-commission-refunded,.taf-commission-reversed,.taf-affiliate-suspended{background:#ede9fe;color:#5b21b6}
.taf-tag{display:inline-block;background:#f3f4f6;border-radius:6px;padding:0 6px;font-size:11.5px;color:#4b5563;margin-left:4px}
.taf-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.taf-pills a{padding:5px 12px;border-radius:999px;background:var(--taf-soft);color:var(--taf-muted);text-decoration:none;font-size:13.5px;font-weight:600;border:1px solid var(--taf-line)}
.taf-pills a.is-active{background:var(--taf-accent);color:#fff;border-color:var(--taf-accent)}
.taf-pager{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.taf-pager a,.taf-pager span{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--taf-line);text-decoration:none;color:var(--taf-ink);font-size:14px}
.taf-pager a.is-active{background:var(--taf-accent);color:#fff;border-color:var(--taf-accent)}

/* generator */
.taf-gen-mode{margin-bottom:14px}
.taf-search{position:relative}
.taf-search-results{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--taf-line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.12);z-index:50;max-height:340px;overflow:auto}
.taf-sr{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 10px;background:none;border:0;border-bottom:1px solid #f3f4f6;cursor:pointer;font-family:inherit;color:inherit}
.taf-sr:hover{background:var(--taf-soft)}
.taf-sr img{width:42px;height:42px;object-fit:cover;border-radius:6px;flex:none}
.taf-sr small,.taf-picked small{display:block;color:var(--taf-muted);font-size:12.5px}
.taf-sr-empty{padding:12px;color:var(--taf-muted)}
.taf-picked{display:flex;gap:12px;align-items:center;background:var(--taf-soft);border-radius:10px;padding:10px;margin-bottom:12px}
.taf-picked img{width:54px;height:54px;object-fit:cover;border-radius:8px}
.taf-picked div{flex:1}
.taf-unpick{color:var(--taf-muted)!important;font-size:22px!important;text-decoration:none!important}
.taf-gen-out{margin-top:16px;border-top:1px dashed var(--taf-line);padding-top:14px}
.taf-out-row>span{font-size:13px;font-weight:700;color:var(--taf-muted)}
.taf-out-qr{display:flex;align-items:center;gap:14px;margin-top:8px}
.taf-out-qr img{border:1px solid var(--taf-line);border-radius:10px;padding:6px;background:#fff}

/* products */
.taf-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.taf-product{background:#fff;border:1px solid var(--taf-line);border-radius:var(--taf-radius);overflow:hidden;display:flex;flex-direction:column}
.taf-product-img img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;margin:0}
.taf-product-body{padding:12px;display:flex;flex-direction:column;gap:4px;flex:1}
.taf-product-body b{font-size:14.5px;line-height:1.4}
.taf-price{font-size:14px;color:var(--taf-muted)}
.taf-rate{font-size:13px;color:var(--taf-green)}
.taf-product-acts{display:flex;gap:6px;margin-top:auto;padding-top:8px}
.taf-product-acts .taf-copy-product{flex:1}

/* payouts */
.taf-avail{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:0}
.taf-avail span{opacity:.85;font-weight:600}
.taf-avail b{display:block;font-size:32px;line-height:1.2;margin:6px 0}
.taf-avail small{display:block;opacity:.85}
.taf-withdraw .taf-field{max-width:260px}

/* creatives / coupons */
.taf-creatives{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.taf-creative-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}
.taf-creative-img{background:var(--taf-soft);border-radius:10px;padding:8px;text-align:center;margin-bottom:10px}
.taf-creative-img img{max-width:100%;max-height:220px;height:auto}
.taf-creative-acts{display:flex;gap:6px;flex-wrap:wrap}
.taf-creative-text{background:var(--taf-soft);border-radius:10px;padding:12px;font-size:14px;margin-bottom:10px}
.taf-coupons{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:10px}
.taf-coupon{display:flex;border:2px dashed #c7d2fe;border-radius:14px;overflow:hidden;background:#fff}
.taf-coupon-code{background:#eef2ff;color:var(--taf-accent);font-weight:800;font-size:20px;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;padding:14px;min-width:120px;writing-mode:horizontal-tb}
.taf-coupon-body{padding:12px 14px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}

/* modal */
.taf-modal{position:fixed;inset:0;background:rgba(17,24,39,.55);z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}
.taf-modal-box{background:#fff;border-radius:16px;padding:22px;text-align:center;max-width:340px;width:100%;position:relative}
.taf-modal-box img{width:260px;height:260px;max-width:100%;image-rendering:pixelated}
.taf-modal-box p{word-break:break-all;margin:8px 0 12px}
.taf-modal-x{position:absolute;right:10px;top:6px;border:0;background:none;font-size:26px;cursor:pointer;color:#6b7280}

@media (max-width:820px){
	.taf-stats,.taf-balance{grid-template-columns:1fr 1fr}
	.taf-grid3{grid-template-columns:1fr}
}
@media (max-width:560px){
	.taf-grid2{grid-template-columns:1fr}
	.taf-card{padding:16px}
	.taf-stat b{font-size:20px}
	.taf-dash-head h2{font-size:20px}
	.taf-coupon{flex-direction:column}
}
.taf-switch{text-align:center;max-width:560px;margin-left:auto;margin-right:auto}.taf-switch h3{margin:0 0 8px}.taf-switch .taf-btn{display:inline-block}