/* ============================================================
   Trendify — Premium Dark Theme (ระบบดีไซน์กลาง)
   override สไตล์เดิมทุกหน้าให้เป็นพรีเมียมโทนมืด (glassmorphism + emerald glow)
   โหลดไฟล์นี้ "หลัง" สไตล์เดิมของแต่ละหน้า เพื่อให้ทับได้
   ============================================================ */
:root{
  --tf-g:#22c55e; --tf-g2:#10b981; --tf-gd:#059669;
  --tf-bg:#06090f; --tf-ink:#eef3fa; --tf-ink2:#aab6c6; --tf-muted:#6b7689;
  --tf-glass:rgba(255,255,255,.045); --tf-glass2:rgba(255,255,255,.07);
  --tf-line:rgba(255,255,255,.09); --tf-line2:rgba(255,255,255,.14);
}
html,body{background:var(--tf-bg)!important;color:var(--tf-ink2)!important;font-family:'Kanit',sans-serif!important;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(620px 440px at 12% -8%, rgba(34,197,94,.20), transparent 70%),
   radial-gradient(560px 440px at 94% 6%, rgba(16,185,129,.13), transparent 70%),
   radial-gradient(720px 540px at 80% 112%, rgba(34,197,94,.10), transparent 70%);}
body>*{position:relative;z-index:1}
a{text-decoration:none}
::selection{background:rgba(34,197,94,.3)}
/* ---- scrollbar ---- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- SIDEBAR ---------- */
.sidebar{background:rgba(255,255,255,.025)!important;backdrop-filter:blur(18px);border-right:1px solid var(--tf-line)!important;border-radius:0!important}
.sidebar a{color:var(--tf-ink2)!important;border-radius:14px!important;margin:3px 10px!important;padding:13px 16px!important;border:1px solid transparent!important;font-weight:400!important;transition:.2s!important}
.sidebar a:hover{background:var(--tf-glass)!important;border-color:var(--tf-line)!important;color:#fff!important}
.sidebar a.active{background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(16,185,129,.10))!important;border-color:rgba(34,197,94,.4)!important;color:#fff!important;box-shadow:0 0 24px rgba(34,197,94,.18)!important}
.sidebar a.active i,.sidebar a:hover i{color:var(--tf-g)!important}
/* logo */
.tf-logo{display:block;width:160px;max-width:84%;margin:4px auto 18px;border-radius:20px}

/* ---------- TOPBAR ---------- */
.topbar{background:rgba(6,9,15,.55)!important;backdrop-filter:blur(18px);border:none!important;border-bottom:1px solid var(--tf-line)!important;border-radius:0!important;box-shadow:none!important}
.text-dark-dynamic,.topbar h5{color:#fff!important}

/* ---------- CARDS ---------- */
.glass-card,.info-box-dynamic,.card,.profile-section,.announcement-box{
  background:var(--tf-glass)!important;border:1px solid var(--tf-line)!important;
  backdrop-filter:blur(16px);border-radius:20px!important;box-shadow:none!important;color:var(--tf-ink2)!important}
.section-header{border-color:var(--tf-line)!important;color:#fff!important}
.header-icon{background:rgba(34,197,94,.14)!important;color:var(--tf-g)!important}
.announcement-box{border-left:3px solid var(--tf-g)!important}
h1,h2,h3,h4,h5,h6,.fw-bold,b,strong{color:#fff}
.text-muted,small{color:var(--tf-muted)!important}
.text-primary{color:var(--tf-g)!important}
.text-success,.text-success.fw-bold{color:var(--tf-g)!important}

/* ---------- FORM ---------- */
.form-control,.form-select{background:rgba(255,255,255,.03)!important;border:1px solid var(--tf-line)!important;color:#fff!important;border-radius:13px!important;padding:13px 16px!important}
.form-control::placeholder{color:var(--tf-muted)!important}
.form-control:focus,.form-select:focus{border-color:var(--tf-g)!important;box-shadow:0 0 0 4px rgba(34,197,94,.16)!important;background:rgba(34,197,94,.04)!important}
.form-select option,.form-control option{background:#0d1320;color:#fff}
.input-group-text{background:rgba(255,255,255,.03)!important;border:1px solid var(--tf-line)!important;color:var(--tf-muted)!important;border-radius:13px 0 0 13px!important}
label.form-label{color:#fff!important}
input[type=file]{color:var(--tf-ink2)!important}
input[type=file]::file-selector-button{background:rgba(34,197,94,.15)!important;color:var(--tf-g)!important;border:1px solid rgba(34,197,94,.3)!important;border-radius:9px!important}

/* ---------- BUTTONS ---------- */
.btn-primary,.btn-success{background:linear-gradient(135deg,var(--tf-g),var(--tf-gd))!important;border:none!important;color:#04140c!important;font-weight:600!important;border-radius:13px!important;box-shadow:0 0 28px rgba(34,197,94,.4)!important;transition:.2s!important}
.btn-primary:hover,.btn-success:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(34,197,94,.55)!important;color:#04140c!important}
.btn-outline-success{border:1px solid rgba(34,197,94,.45)!important;color:var(--tf-g)!important;border-radius:11px!important}
.btn-outline-success:hover{background:var(--tf-g)!important;color:#04140c!important}
.btn-outline-danger{border-color:rgba(251,113,133,.5)!important;color:#fb7185!important}
.btn-danger{background:linear-gradient(135deg,#f43f5e,#be123c)!important;border:none!important;color:#fff!important;border-radius:11px!important}
.theme-btn{background:var(--tf-glass)!important;border:1px solid var(--tf-line)!important;color:var(--tf-ink2)!important}
.theme-btn:hover{color:var(--tf-g)!important;border-color:var(--tf-line2)!important}

/* ---------- BADGES / PILLS ---------- */
.badge.bg-warning{background:linear-gradient(135deg,var(--tf-g),var(--tf-gd))!important;color:#04140c!important;box-shadow:0 0 22px rgba(34,197,94,.35)}
.badge.bg-success{background:rgba(34,197,94,.16)!important;color:var(--tf-g)!important;border:1px solid rgba(34,197,94,.3)}
.badge.bg-danger{background:rgba(251,113,133,.16)!important;color:#fb7185!important}
.badge.bg-secondary{background:rgba(255,255,255,.08)!important;color:var(--tf-ink2)!important}

/* ---------- PLATFORM TILES (index) ---------- */
.cat-btn{background:var(--tf-glass)!important;border:1px solid var(--tf-line)!important;border-radius:16px!important;color:var(--tf-ink2)!important;transition:.2s!important;padding:16px 8px!important}
.cat-btn:hover{border-color:var(--tf-line2)!important;transform:translateY(-4px);background:var(--tf-glass2)!important}
.cat-btn.active{background:linear-gradient(135deg,rgba(34,197,94,.28),rgba(16,185,129,.12))!important;border-color:rgba(34,197,94,.55)!important;color:#fff!important;box-shadow:0 0 30px rgba(34,197,94,.25)!important}
.cat-btn.active i{color:var(--tf-g)!important}
.sub-filter-container{background:var(--tf-glass)!important;border:1px solid var(--tf-line)!important;border-radius:16px!important}
.sub-filter-btn{background:transparent!important;border:1px solid var(--tf-line)!important;color:var(--tf-ink2)!important;border-radius:30px!important}
.sub-filter-btn.active{background:linear-gradient(135deg,var(--tf-g),var(--tf-gd))!important;border-color:transparent!important;color:#04140c!important}

/* ---------- SEARCH ---------- */
.search-results-box{background:#0d1320!important;border:1px solid var(--tf-line2)!important;border-radius:14px!important}
.search-item{border-bottom:1px solid var(--tf-line)!important;color:var(--tf-ink)!important}
.search-item:hover{background:rgba(34,197,94,.08)!important}
.search-item-text,.search-item-id{color:var(--tf-ink)!important}
.search-item-id{color:var(--tf-g)!important}

/* charge / price display */
#charge-display{background:linear-gradient(135deg,#34d399,#10b981);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800!important}

/* ---------- TABLES (history / admin) ---------- */
.table{color:var(--tf-ink2)!important}
.table th{background:rgba(255,255,255,.03)!important;color:#fff!important;border-color:var(--tf-line)!important}
.table td{border-color:var(--tf-line)!important;color:var(--tf-ink2)!important}
.table-hover tbody tr:hover td{background:rgba(34,197,94,.05)!important}
.table-light,thead.table-light th{background:rgba(255,255,255,.04)!important;color:#fff!important}

/* ---------- ALERTS ---------- */
.alert{border-radius:14px!important;border:1px solid var(--tf-line)!important;backdrop-filter:blur(10px)}
.alert-success{background:rgba(34,197,94,.12)!important;color:#86efac!important;border-color:rgba(34,197,94,.3)!important}
.alert-danger{background:rgba(251,113,133,.12)!important;color:#fda4af!important;border-color:rgba(251,113,133,.3)!important}
.alert-warning{background:rgba(245,158,11,.12)!important;color:#fcd34d!important;border-color:rgba(245,158,11,.3)!important}
.alert-secondary{background:rgba(255,255,255,.05)!important;color:var(--tf-ink2)!important}

/* ---------- BOTTOM NAV (mobile) ---------- */
.bottom-nav{background:rgba(6,9,15,.7)!important;backdrop-filter:blur(20px);border-top:1px solid var(--tf-line)!important}
.bottom-nav-item{color:var(--tf-muted)!important}
.bottom-nav-item.active{color:var(--tf-g)!important}

/* ---------- SELECT2 (index) ---------- */
.select2-container--default .select2-selection--single{background:rgba(255,255,255,.03)!important;border:1px solid var(--tf-line)!important;border-radius:13px!important;height:54px!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:#fff!important;line-height:54px!important}
.select2-dropdown{background:#0d1320!important;border:1px solid var(--tf-line2)!important;border-radius:13px!important}
.select2-container--default .select2-results__option{color:var(--tf-ink)!important;border-bottom:1px solid var(--tf-line)!important}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:rgba(34,197,94,.14)!important;color:var(--tf-g)!important}
.select2-search--dropdown .select2-search__field{background:rgba(255,255,255,.04)!important;border:1px solid var(--tf-line)!important;color:#fff!important;border-radius:9px!important}

/* ---------- QR / images ---------- */
.qr-image{border:3px solid var(--tf-line2)!important;border-radius:14px!important}
hr{border-color:var(--tf-line)!important}

/* ---------- AUTH PAGES (login/register/forgot) ---------- */
.login-box{background:var(--tf-glass)!important;border:1px solid var(--tf-line)!important;backdrop-filter:blur(22px);color:var(--tf-ink2)!important;box-shadow:0 24px 70px rgba(0,0,0,.55)!important;border-radius:22px!important}
.login-box h3,.login-box h4,.login-box .text-dark{color:#fff!important}
.tf-auth-logo{display:block;width:150px;max-width:70%;margin:0 auto 14px;border-radius:18px}
.google-btn{background:rgba(255,255,255,.06)!important;border:1px solid var(--tf-line)!important;color:#fff!important}
.google-btn:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
.google-btn-container{background:rgba(34,197,94,.06)!important;border:1px solid rgba(34,197,94,.25)!important}
.divider-text{color:var(--tf-muted)!important}
.divider-text::before,.divider-text::after{border-color:var(--tf-line)!important}
.step-box,.feature-box,.feature-item{background:var(--tf-glass)!important;border:1px solid var(--tf-line)!important;backdrop-filter:blur(14px)}
.feature-item:hover{background:var(--tf-glass2)!important}
.back-home-btn,.lang-switch{background:var(--tf-glass)!important;border:1px solid var(--tf-line)!important;color:var(--tf-ink2)!important;backdrop-filter:blur(12px)}
.input-group-text{color:var(--tf-muted)!important}
.toggle-password{cursor:pointer}