/* ============================================================================
   LowlayZ  ·  DESIGN SYSTEM  "HYDRO BLUE"  v2
   UI/UX by xHost Studio
   ----------------------------------------------------------------------------
   หลักการ
   1. สีฟ้าล้วน — ไม่มีม่วง/ชมพู   (ทอง=ค่าเงิน · เขียว=สำเร็จ · แดง=อันตราย)
   2. Type Scale 9 ระดับ · Icon Scale 6 ระดับ · Spacing Scale 7 ระดับ
   3. รูปทุกใบถูกคุมกรอบ ไม่ล้น ไม่เบี้ยว
   4. พื้นหลังมีแสงวิ่งตามเมาส์ (interactive aurora)
   ============================================================================ */

/* ══════════════ 1. TOKENS ══════════════ */
:root {
    /* ---- น้ำเงินเข้ม (พื้นหลัง 6 ระดับ) ---- */
    --n0: #050505;
    --n1: #0a0a0a;
    --n2: #0f0f10;
    --n3: #141415;
    --n4: #1b1b1d;
    --n5: #232326;

    /* ---- ฟ้า (แกนหลัก) ---- */
    --b100: #fee2e2;
    --b200: #fca5a5;
    --b300: #f43f4a;
    --b400: #e11d2a;
    --b500: #c81e27;
    --b600: #b3141d;
    --b700: #8a0f16;
    --b800: #5c0a0f;

    --accent:        var(--b400);
    --accent-bright: var(--b300);
    --accent-light:  var(--b200);
    --accent-deep:   var(--b600);
    --accent-dark:   var(--b700);

    /* ---- ฟ้ารอง ---- */
    --cyan: #22d3ee;
    --teal: #2dd4bf;
    --ice:  #a5f3fc;

    /* ---- ฟังก์ชัน (ใช้ตามความหมายเท่านั้น) ---- */
    --gold:  #f5b83d;
    --green: #22c55e;
    --red:   #f43f5e;

    /* ---- ตัวอักษร ---- */
    --tx1: #f4f4f5;
    --tx2: #c9c9cd;
    --tx3: #9a9aa1;
    --tx4: #6c6c73;

    /* ---- เส้น / พื้นผิว ---- */
    --line:      rgba(225,29,42, .16);
    --line-soft: rgba(225,29,42, .08);
    --line-hard: rgba(225,29,42, .38);
    --fill:      rgba(225,29,42, .07);
    --fill-2:    rgba(225,29,42, .14);

    /* ---- เงา ---- */
    --sh-1: 0 2px 10px rgba(0,0,0, .40);
    --sh-2: 0 8px 26px rgba(0,0,0, .50);
    --sh-3: 0 18px 48px rgba(0,0,0, .60);
    --glow-1: 0 0 12px rgba(225,29,42, .30);
    --glow-2: 0 0 26px rgba(225,29,42, .30);
    --glow-3: 0 0 52px rgba(225,29,42, .26);

    /* ---- TYPE SCALE ---- */
    --fs-2xs: 0.6875rem;
    --fs-xs:  0.75rem;
    --fs-sm:  0.8125rem;
    --fs-md:  0.875rem;
    --fs-lg:  1rem;
    --fs-xl:  1.125rem;
    --fs-2xl: 1.375rem;
    --fs-3xl: 1.75rem;
    --fs-4xl: 2.375rem;

    --lh-tight: 1.3;
    --lh-base:  1.65;
    --lh-loose: 1.85;

    /* ---- ICON SCALE ---- */
    --ic-xs:  0.75rem;
    --ic-sm:  0.875rem;
    --ic-md:  1rem;
    --ic-lg:  1.375rem;
    --ic-xl:  2rem;
    --ic-2xl: 2.75rem;

    /* ---- SPACING ---- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

    /* ---- RADIUS ---- */
    --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

    /* ---- ตำแหน่งเมาส์ (JS อัปเดต) ---- */
    --mx: 50%;  --my: 30%;

    /* bootstrap override */
    --bs-body-bg: var(--n2);
    --bs-body-color: var(--tx1);
    --bs-border-color: var(--line);
    --bs-link-color: var(--accent);

    /* ---- alias เก่า (กันไฟล์เดิมพัง / ม่วง -> ฟ้าน้ำทะเล) ---- */
    --violet: var(--teal);
    --accent-soft:    var(--fill);
    --accent-soft-2:  var(--fill-2);
    --accent-line:    var(--line-hard);
    --accent-glow:    var(--b200);
    --text-primary:   var(--tx1);
    --text-secondary: var(--tx2);
    --text-muted:     var(--tx3);
    --text-dim:       var(--tx4);
    --border-color:   var(--line);
    --border-soft:    var(--line-soft);
    --border-strong:  var(--line-hard);
    --rose:   var(--red);
    --orange: #f59e5b;
    --bg-panel: var(--n3);
    --radius:    var(--r-md);
    --radius-sm: var(--r-sm);
    --radius-lg: var(--r-lg);
    --shadow-card: var(--sh-2);
    --glow-sm: var(--glow-1);
    --glow-md: var(--glow-2);
    --glow-lg: var(--glow-3);
}

/* ══════════════ 2. RESET & BASE ══════════════ */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    margin: 0;
    background: var(--n2);
    color: var(--tx1);
    font-family: 'Kanit', 'Noto Sans Thai', -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--fs-md);
    font-weight: 300;
    line-height: var(--lh-base);
    letter-spacing: .1px;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

h1,.h1{font-size:var(--fs-4xl)} h2,.h2{font-size:var(--fs-3xl)}
h3,.h3{font-size:var(--fs-2xl)} h4,.h4{font-size:var(--fs-xl)}
h5,.h5{font-size:var(--fs-lg)}  h6,.h6{font-size:var(--fs-md)}
h1,h2,h3,h4,h5,h6 {
    font-weight: 400; line-height: var(--lh-tight);
    color: var(--tx1); margin: 0 0 var(--sp-2); letter-spacing: -.1px;
}
p { margin: 0 0 var(--sp-3); line-height: var(--lh-base); }
small, .small { font-size: var(--fs-xs); }
b, strong { font-weight: 500; }

a { color: var(--accent); text-decoration: none; transition: color .18s; }
a:hover { color: var(--accent-bright); }

.ft     { font-family: 'Kanit', 'Noto Sans Thai', sans-serif; font-weight: 300; }
.ft-num { font-family: 'Chakra Petch', 'Kanit', monospace; font-weight: 600;
          letter-spacing: .3px; font-variant-numeric: tabular-nums; }

img { max-width: 100%; height: auto; display: block; }
.img-fluid { max-width: 100%; height: auto; }

i[class*="fa-"] { font-size: var(--ic-sm); line-height: 1; vertical-align: -1px; }
.btn i, .nav-link i, .dropdown-item i, .form-label i { font-size: var(--ic-sm); }
.ico-lg{font-size:var(--ic-lg)!important} .ico-xl{font-size:var(--ic-xl)!important} .ico-2xl{font-size:var(--ic-2xl)!important}

::selection { background: rgba(225,29,42,.30); color:#fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--n1); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent-deep), var(--accent)); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-bright); }

/* ══════════════ 3. พื้นหลัง INTERACTIVE ══════════════ */
#lzFx { position: fixed; inset: 0; z-index: -5; pointer-events: none; overflow: hidden; }

.lz-fx-base {
    position: absolute; inset: 0;
    background:
        radial-gradient(1200px 700px at 15% -10%, rgba(179,20,29,.20), transparent 62%),
        radial-gradient(1000px 620px at 88% 6%,  rgba(18,163,232,.16), transparent 60%),
        radial-gradient(1100px 760px at 50% 112%, rgba(34,211,238,.10), transparent 66%),
        linear-gradient(180deg, var(--n1) 0%, var(--n2) 42%, var(--n0) 100%);
}

.lz-fx-grid {
    position: absolute; inset: -60px;
    background-image:
        linear-gradient(rgba(225,29,42,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(225,29,42,.055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 95% 75% at 50% 0%, #000 18%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 0%, #000 18%, transparent 80%);
    transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
    transition: transform .6s cubic-bezier(.2,.8,.3,1);
}

.lz-fx-spot {
    position: absolute; inset: 0;
    background: radial-gradient(430px 430px at var(--mx) var(--my),
        rgba(225,29,42,.18) 0%, rgba(34,211,238,.09) 32%, transparent 68%);
}

.lz-fx-ring {
    position: absolute; width: 280px; height: 280px;
    left: var(--mx); top: var(--my);
    transform: translate(-50%,-50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(244,63,74,.10) 0%, transparent 62%);
    border: 1px solid rgba(225,29,42,.10);
    transition: left .3s cubic-bezier(.2,.8,.3,1), top .3s cubic-bezier(.2,.8,.3,1);
}

.lz-fx-dust { position: absolute; inset: 0; }
.lz-dust { position: absolute; border-radius: 50%; background: var(--b300); animation: lzFloat linear infinite; }
@keyframes lzFloat {
    0%   { transform: translate3d(0,0,0); opacity: 0; }
    10%  { opacity: .5; }
    90%  { opacity: .3; }
    100% { transform: translate3d(var(--dx), -112vh, 0); opacity: 0; }
}

.lz-fx-scan {
    position: absolute; left: 0; right: 0; height: 180px;
    background: linear-gradient(180deg, transparent, rgba(225,29,42,.035), transparent);
    animation: lzScan 9s linear infinite;
}
@keyframes lzScan { 0%{top:-20%} 100%{top:110%} }

@media (max-width: 991.98px) {
    .lz-fx-ring, .lz-fx-scan { display: none; }
    .lz-fx-spot { background: radial-gradient(600px 600px at 50% 12%, rgba(225,29,42,.13), transparent 66%); }
}

/* ══════════════ 4. NAVBAR ══════════════ */
.topbar {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(8,8,9,.70);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--line-soft);
    transition: background .3s, box-shadow .3s, border-color .3s;
}
.topbar::after {
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background: linear-gradient(90deg, transparent, var(--line-hard) 22%, var(--accent) 50%, var(--line-hard) 78%, transparent);
    opacity:.5;
}
.topbar.scrolled { background: rgba(6,6,7,.94); border-bottom-color: var(--line); box-shadow: 0 10px 34px rgba(0,0,0,.5); }
.topbar .navbar { padding: .5rem 0; }

.navbar-brand { display:flex; align-items:center; gap:var(--sp-2); padding:0; margin:0; }
.logo-img {
    height: 40px; width: auto; max-width: 190px; object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(225,29,42,.5));
    transition: transform .25s, filter .25s;
}
.navbar-brand:hover .logo-img { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(244,63,74,.85)); }

.navbar-nav { gap: 2px; }
.navbar-nav .nav-link {
    color: var(--tx2) !important; font-size: var(--fs-md); font-weight: 400;
    padding: .48rem .8rem !important; border-radius: var(--r-sm);
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
    transition: color .18s, background .18s;
}
.navbar-nav .nav-link i { color: var(--accent); transition: transform .18s; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--tx1) !important; background: var(--fill); }
.navbar-nav .nav-link.active { box-shadow: inset 0 -2px 0 var(--accent); }
.navbar-nav .nav-link:hover i { transform: translateY(-1px); }
.navbar-nav .dropdown-toggle::after { border-top-color: var(--tx3); margin-left: 4px; }

.navbar-toggler {
    border: 1px solid var(--line); background: var(--fill); color: var(--accent);
    padding: .36rem .6rem; border-radius: var(--r-sm); box-shadow: none !important; font-size: var(--fs-lg);
}

.dropdown-menu {
    background: rgba(20,20,21,.97) !important; backdrop-filter: blur(18px);
    border: 1px solid var(--line) !important; border-radius: var(--r-md) !important;
    box-shadow: var(--sh-3), var(--glow-1);
    padding: 6px !important; margin-top: 8px !important; min-width: 240px;
}
.dropdown-item {
    color: var(--tx2) !important; font-family:'Kanit',sans-serif; font-weight:300; font-size: var(--fs-sm);
    border-radius: var(--r-sm) !important; padding: .48rem .7rem !important;
    display:flex; align-items:center; gap:10px;
    transition: background .16s, color .16s, transform .16s;
}
.dropdown-item i { width:16px; text-align:center; font-size: var(--ic-sm); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--fill-2) !important; color: var(--tx1) !important; transform: translateX(3px); }
.dropdown-divider { border-color: var(--line-soft) !important; margin: 4px 2px !important; }
.lz-dd-head {
    font-size: var(--fs-2xs); letter-spacing:1.4px; text-transform:uppercase;
    color: var(--tx4); padding:.4rem .7rem .26rem; font-family:'Chakra Petch',monospace;
}

.online-badge {
    display:inline-flex; align-items:center; gap:6px;
    background: rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.28); color: var(--green);
    font-family:'Chakra Petch',monospace; font-weight:600;
    font-size: var(--fs-2xs); letter-spacing:.6px;
    padding:.3rem .66rem; border-radius: var(--r-pill); white-space:nowrap;
}
.pulse-dot { width:6px; height:6px; border-radius:50%; background: var(--green);
    box-shadow: 0 0 8px var(--green); animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.7)} }

.user-chip {
    display:flex; align-items:center; gap:8px;
    background: var(--fill); border:1px solid var(--line); border-radius: var(--r-pill);
    padding:.26rem .78rem .26rem .3rem; color: var(--tx1) !important; font-size: var(--fs-sm);
    max-width: 260px; transition: border-color .2s, background .2s;
}
.user-chip > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip:hover { border-color: var(--line-hard); background: var(--fill-2); }
.user-avatar {
    width:26px; height:26px; flex-shrink:0; border-radius:50%;
    display:grid; place-items:center;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
    color:#fff; font-size: var(--ic-xs); box-shadow: var(--glow-1);
}

/* ══════════════ 5. CARD ══════════════ */
.card, .box-bg {
    position: relative; overflow: hidden;
    background: linear-gradient(168deg, rgba(27,27,29,.88), rgba(20,20,21,.92));
    border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--sh-2); color: var(--tx1);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--line-hard), transparent);
}
.card::after {
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
    background: radial-gradient(320px circle at var(--cx,50%) var(--cy,50%), rgba(225,29,42,.10), transparent 62%);
    transition: opacity .3s;
}
.card:hover::after { opacity: 1; }
.card:hover { border-color: var(--line-hard); box-shadow: var(--sh-2), var(--glow-2); }

.card-body { padding: var(--sp-4); position: relative; z-index: 1; }
.card-header {
    position: relative; z-index: 1;
    background: linear-gradient(180deg, rgba(225,29,42,.11), rgba(225,29,42,.02));
    border-bottom: 1px solid var(--line); color: var(--tx1);
    font-family:'Kanit',sans-serif; font-weight:400; font-size: var(--fs-md);
    padding: .72rem var(--sp-4); display:flex; align-items:center; gap:8px;
}
.card-header i { color: var(--accent); font-size: var(--ic-sm); }
.card-head-bg { background: linear-gradient(180deg, rgba(225,29,42,.14), rgba(225,29,42,.02)) !important;
    border-bottom: 1px solid var(--line) !important; }

.hud::after {
    content:''; position:absolute; inset:6px; pointer-events:none; opacity:.4;
    background:
      linear-gradient(var(--accent),var(--accent)) left top / 13px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) left top / 1px 13px no-repeat,
      linear-gradient(var(--accent),var(--accent)) right top / 13px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) right top / 1px 13px no-repeat,
      linear-gradient(var(--accent),var(--accent)) left bottom / 13px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) left bottom / 1px 13px no-repeat,
      linear-gradient(var(--accent),var(--accent)) right bottom / 13px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) right bottom / 1px 13px no-repeat;
}

/* ══════════════ 6. PAGE HEAD ══════════════ */
.page-head {
    display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-3);
    padding: var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--r-md);
    background: linear-gradient(115deg, rgba(225,29,42,.12), rgba(179,20,29,.04) 55%, transparent);
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    position: relative; overflow: hidden;
}
.page-head::after {
    content:''; position:absolute; right:-40px; top:-70px; width:200px; height:200px; border-radius:50%;
    background: radial-gradient(circle, rgba(225,29,42,.18), transparent 68%);
}
.page-head-icon {
    width:46px; height:46px; flex-shrink:0; display:grid; place-items:center; border-radius: var(--r-md);
    background: linear-gradient(140deg, var(--accent-deep), var(--accent));
    color:#fff; box-shadow: var(--glow-2);
}
.page-head-icon i { font-size: var(--ic-md) !important; }
.page-head-txt { min-width: 0; }
.page-head-txt h5 { margin:0; font-size: var(--fs-xl); font-weight:400; }
.page-head-txt p  { margin:2px 0 0; font-size: var(--fs-xs); color: var(--tx3); }

.section-title {
    display:flex; align-items:center; gap: var(--sp-2);
    font-size: var(--fs-lg); font-weight:400; color: var(--tx1);
    margin: 0 0 var(--sp-3); padding-bottom:.6rem; position:relative;
}
.section-title::after {
    content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 12%, transparent 44%);
    border-radius:2px;
}
.section-title i { color: var(--accent); font-size: var(--ic-md); filter: drop-shadow(0 0 7px rgba(225,29,42,.5)); }

/* ══════════════ 7. BUTTON ══════════════ */
.btn {
    font-family:'Kanit',sans-serif; font-weight:400; font-size: var(--fs-md);
    border-radius: var(--r-sm); padding:.5rem 1.05rem;
    display:inline-flex; align-items:center; justify-content:center; gap:7px; line-height:1.5;
    transition: transform .2s cubic-bezier(.34,1.2,.64,1), box-shadow .2s, background .2s, border-color .2s;
}
.btn:focus, .btn:active { box-shadow:none !important; }
.btn-sm { padding:.36rem .78rem; font-size: var(--fs-sm); }
.btn-lg { padding:.66rem 1.5rem; font-size: var(--fs-lg); border-radius: var(--r-md); }

.btn-accent {
    position:relative; overflow:hidden;
    background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 58%, var(--accent-bright) 125%);
    border:1px solid rgba(252,165,165,.45); color:#ffffff; font-weight:500;
    box-shadow: 0 4px 16px rgba(179,20,29,.35);
}
.btn-accent::after {
    content:''; position:absolute; top:0; left:-120%; width:55%; height:100%; transform:skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition:left .55s;
}
.btn-accent:hover { color:#ffffff; transform:translateY(-2px); box-shadow:0 8px 26px rgba(225,29,42,.48), var(--glow-1); }
.btn-accent:hover::after { left:130%; }
.btn-accent:disabled, .btn-accent.disabled {
    background: rgba(50,50,54,.55); border-color: rgba(90,90,96,.25);
    color: var(--tx4); box-shadow:none; transform:none; opacity:1;
}

.btn-outline-accent { background:transparent; border:1px solid var(--line-hard); color: var(--accent-bright); }
.btn-outline-accent:hover { background: var(--fill-2); border-color: var(--accent); color:#fff; transform:translateY(-2px); }
.btn-outline-accent:disabled { opacity:.4; transform:none; }

.btn-ghost { background: rgba(255,255,255,.03); border:1px solid var(--line); color: var(--tx2); }
.btn-ghost:hover { background: var(--fill); color: var(--tx1); border-color: var(--line-hard); }

.btn-primary { background: linear-gradient(135deg,var(--accent-deep),var(--accent)); border-color:transparent; color:#ffffff; }
.btn-success { background: linear-gradient(135deg,#157f46,var(--green)); border-color:transparent; color:#fff; }
.btn-secondary, .btn-outline-secondary { background: rgba(255,255,255,.03); border:1px solid var(--line); color: var(--tx2); }
.btn-outline-secondary:hover { background: var(--fill); color: var(--tx1); border-color: var(--line-hard); }

/* ══════════════ 8. FORM ══════════════ */
.form-label { color: var(--tx2); font-size: var(--fs-sm); font-weight:400;
    margin-bottom:.4rem; display:flex; align-items:center; gap:6px; }
.form-label i { color: var(--accent); }
.form-control, .form-select {
    background: rgba(13,13,14,.78) !important; border:1px solid var(--line) !important;
    color: var(--tx1) !important; border-radius: var(--r-sm) !important;
    padding:.58rem .8rem; font-family:'Kanit',sans-serif; font-weight:300;
    font-size: var(--fs-md); line-height:1.5;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-control::placeholder { color: var(--tx4); }
.form-control:focus, .form-select:focus {
    background: rgba(19,19,20,.95) !important; border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(225,29,42,.15) !important; color:#fff !important;
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2338bdf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat:no-repeat; background-position:right .75rem center; background-size:15px 12px;
}
.form-select option { background:#141415; color: var(--tx1); }

.input-group-text {
    background: var(--fill-2) !important; border:1px solid var(--line) !important;
    color: var(--accent) !important; border-radius: var(--r-sm) 0 0 var(--r-sm) !important; padding:0 .8rem;
}
.input-group > .form-control { border-left:none !important; border-radius:0 var(--r-sm) var(--r-sm) 0 !important; }
.input-group:focus-within .input-group-text { border-color: var(--accent) !important; }

/* ══════════════ 9. TABLE ══════════════ */
.table { color: var(--tx2); font-size: var(--fs-sm); --bs-table-bg: transparent; margin-bottom:0; }
.table > thead > tr > th {
    background: rgba(225,29,42,.06); color: var(--accent-bright);
    font-weight:500; font-size: var(--fs-2xs); letter-spacing:.7px; text-transform:uppercase;
    border-bottom:1px solid var(--line); padding:.62rem .72rem; white-space:nowrap;
}
.table > tbody > tr > td { border-bottom:1px solid var(--line-soft); padding:.58rem .72rem;
    vertical-align:middle; color: var(--tx2); }
.table > tbody > tr { transition: background .16s; }
.table > tbody > tr:hover > td { background: rgba(225,29,42,.05); color: var(--tx1); }
.table > tbody > tr:last-child > td { border-bottom:none; }
.table code { background: var(--fill-2); color: var(--accent-bright); padding:2px 6px; border-radius:5px; font-size: var(--fs-xs); }

/* ══════════════ 10. BADGE / ALERT / MISC ══════════════ */
.badge { font-family:'Chakra Petch',monospace; font-weight:600; letter-spacing:.4px;
    padding:.36em .62em; border-radius:6px; font-size: var(--fs-2xs); }
.bg-warning { background: linear-gradient(135deg,#c9901f,var(--gold)) !important; color:#1b1200 !important; }
.bg-success { background: linear-gradient(135deg,#157f46,var(--green)) !important; color:#fff !important; }
.bg-danger  { background: linear-gradient(135deg,#c02642,var(--red))  !important; color:#fff !important; }
.bg-info    { background: linear-gradient(135deg,#0d7f94,var(--cyan)) !important; color:#0f0f10 !important; }
.bg-primary { background: linear-gradient(135deg,var(--accent-deep),var(--accent)) !important; color:#ffffff !important; }

.text-warning{color:var(--gold)!important} .text-success{color:var(--green)!important}
.text-danger{color:var(--red)!important}   .text-info{color:var(--cyan)!important}
.text-primary{color:var(--accent)!important} .text-secondary{color:var(--tx3)!important}
.text-yellow{color:var(--gold)!important}  .white-txt{color:var(--tx1)!important}
.black-txt{color:#ffffff!important;font-weight:600}
.glow-txt{text-shadow:0 0 10px rgba(225,29,42,.7)}

.alert { border-radius: var(--r-md); border:1px solid var(--line); background: var(--fill);
    color: var(--tx2); font-size: var(--fs-sm); padding:.78rem 1rem;
    border-left:3px solid var(--accent); margin-bottom: var(--sp-3); }
.alert i { color: var(--accent); }
.alert-info{background:rgba(34,211,238,.07);border-left-color:var(--cyan)}
.alert-info i{color:var(--cyan)}
.alert-warning{background:rgba(245,184,61,.08);border-left-color:var(--gold);color:#ffe2ae}
.alert-warning i{color:var(--gold)}
.alert-danger{background:rgba(244,63,94,.08);border-left-color:var(--red);color:#ffc4cf}
.alert-danger i{color:var(--red)}
.alert-success{background:rgba(34,197,94,.08);border-left-color:var(--green);color:#b9f2ce}
.alert-success i{color:var(--green)}

code { color: var(--accent-bright); font-size:.92em; }
hr, .border-light { border-color: var(--line) !important; opacity:1; }

.progress { background: rgba(9,9,10,.85) !important; border:1px solid var(--line-soft);
    border-radius: var(--r-pill); height:8px; overflow:hidden; }
.progress-bar { border-radius: var(--r-pill); transition: width .7s cubic-bezier(.3,1,.4,1);
    background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
.progress-bar.bg-danger { background: linear-gradient(90deg,#a51e37,var(--red)) !important; }
.progress-bar.bg-success{ background: linear-gradient(90deg,#157f46,var(--green)) !important; }
.progress-bar.bg-warning{ background: linear-gradient(90deg,#c9901f,var(--gold)) !important; }

.accordion-item { background: rgba(22,22,23,.8); border:1px solid var(--line);
    border-radius: var(--r-sm) !important; margin-bottom:7px; overflow:hidden; }
.accordion-button { background:transparent !important; color: var(--tx1) !important;
    font-family:'Kanit',sans-serif; font-weight:300; font-size: var(--fs-md);
    box-shadow:none !important; padding:.8rem 1rem; }
.accordion-button:not(.collapsed) { background: var(--fill) !important; color: var(--accent-bright) !important; }
.accordion-button::after { filter: invert(66%) sepia(60%) saturate(2400%) hue-rotate(175deg); }
.accordion-body { color: var(--tx2); font-size: var(--fs-sm); background: rgba(9,9,10,.4); }

.divider-line { height:1px; margin: var(--sp-4) 0;
    background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); }

.notice-strip { display:flex; align-items:flex-start; gap:9px; padding:.6rem .9rem;
    border-radius: var(--r-sm); background: rgba(245,184,61,.07);
    border:1px solid rgba(245,184,61,.2); color:#ffdfa6; font-size: var(--fs-sm); line-height:1.6; }
.notice-strip i { color: var(--gold); margin-top:3px; flex-shrink:0; }

/* ══════════════ 11. STAT TILE ══════════════ */
.stat-grid { display:grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(158px,1fr)); }
.stat-tile {
    position:relative; overflow:hidden;
    background: linear-gradient(160deg, rgba(27,27,29,.86), rgba(20,20,21,.9));
    border:1px solid var(--line); border-radius: var(--r-md); padding:.85rem 1rem;
    transition: transform .22s, border-color .22s, box-shadow .22s;
}
.stat-tile:hover { transform: translateY(-3px); border-color: var(--line-hard); box-shadow: var(--glow-2); }
.stat-tile::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background: linear-gradient(180deg, var(--accent), transparent); }
.stat-tile-label { display:flex; align-items:center; gap:6px; font-size: var(--fs-2xs);
    color: var(--tx3); text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-tile-label i { font-size: var(--ic-xs); }
.stat-tile-value { font-family:'Chakra Petch',monospace; font-weight:700;
    font-size: var(--fs-2xl); line-height:1.15; color: var(--tx1); }
.stat-tile.is-gold::before { background: linear-gradient(180deg,var(--gold),transparent); }
.stat-tile.is-cyan::before { background: linear-gradient(180deg,var(--cyan),transparent); }
.stat-tile.is-teal::before, .stat-tile.is-violet::before { background: linear-gradient(180deg,var(--teal),transparent); }
.stat-tile.is-green::before{ background: linear-gradient(180deg,var(--green),transparent); }

/* ══════════════ 12. PROFILE SIDEBAR ══════════════ */
@media (min-width: 992px) { .profile-sticky { position: sticky; top: 82px; } }

.profile-card { background: linear-gradient(172deg, rgba(39,39,40,.92), rgba(19,19,20,.95));
    border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-2); }
.profile-banner { height:72px; position:relative; overflow:hidden;
    background: radial-gradient(circle at 28% 125%, rgba(225,29,42,.55), transparent 62%),
                linear-gradient(115deg, var(--accent-deep), #084b7d 58%, #1f1f20); }
.profile-banner::after { content:''; position:absolute; inset:0;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size:18px 18px; }
.profile-avatar { width:64px; height:64px; border-radius: var(--r-lg); margin:-34px auto 0;
    position:relative; z-index:2; display:grid; place-items:center;
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    border:3px solid #0f0f10; color:#fff; box-shadow: var(--glow-2); }
.profile-avatar i { font-size: var(--ic-lg) !important; }
.profile-email { text-align:center; font-size: var(--fs-sm); color: var(--accent-bright);
    margin:.5rem .7rem .1rem; word-break:break-all; line-height:1.45; }
.profile-id { text-align:center; font-family:'Chakra Petch',monospace;
    font-size: var(--fs-2xs); color: var(--tx4); letter-spacing:.9px; }

.wallet-list { list-style:none; padding:.5rem .7rem .7rem; margin:0; }
.wallet-row { display:flex; align-items:center; gap:9px; padding:.5rem .6rem;
    border-radius: var(--r-sm); margin-bottom:4px; background: rgba(255,255,255,.02);
    border:1px solid transparent; transition: background .18s, border-color .18s; }
.wallet-row:hover { background: var(--fill); border-color: var(--line-soft); }
.wallet-ico { width:28px; height:28px; flex-shrink:0; border-radius: var(--r-sm);
    display:grid; place-items:center; font-size: var(--ic-xs); background: var(--fill-2); color: var(--accent); }
.wallet-name { font-size: var(--fs-sm); color: var(--tx2); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wallet-val { font-family:'Chakra Petch',monospace; font-weight:700; font-size: var(--fs-md); color: var(--tx1); }
.wallet-row.is-gold .wallet-ico{background:rgba(245,184,61,.13);color:var(--gold)}
.wallet-row.is-gold .wallet-val{color:var(--gold)}
.wallet-row.is-cyan .wallet-ico{background:rgba(34,211,238,.13);color:var(--cyan)}
.wallet-row.is-cyan .wallet-val{color:var(--cyan)}
.wallet-row.is-teal .wallet-ico, .wallet-row.is-violet .wallet-ico{background:rgba(45,212,191,.13);color:var(--teal)}
.wallet-row.is-teal .wallet-val, .wallet-row.is-violet .wallet-val{color:var(--teal)}
.wallet-row.is-green .wallet-ico{background:rgba(34,197,94,.13);color:var(--green)}
.wallet-row.is-green .wallet-val{color:var(--green)}

.status-pill { display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-2xs);
    padding:.22rem .58rem; border-radius: var(--r-pill);
    font-family:'Chakra Petch',monospace; letter-spacing:.5px; white-space:nowrap; }
.status-pill i { font-size: var(--ic-xs); }
.status-pill.on { background: rgba(34,197,94,.12); color: var(--green); border:1px solid rgba(34,197,94,.3); }
.status-pill.off{ background: rgba(225,29,42,.14); color: var(--tx3); border:1px solid var(--line); }

.quick-links { display:grid; grid-template-columns: repeat(3,1fr); gap:6px; padding:0 .7rem .8rem; }
.quick-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:.62rem .2rem; border-radius: var(--r-sm);
    background: rgba(255,255,255,.025); border:1px solid var(--line-soft);
    color: var(--tx2); font-size: var(--fs-2xs); text-align:center; line-height:1.25; transition:all .18s; }
.quick-link i { font-size: var(--ic-md); color: var(--accent); }
.quick-link:hover { background: var(--fill-2); border-color: var(--line-hard); color: var(--tx1); transform: translateY(-2px); }

/* ══════════════ 13. CHARACTER CARD ══════════════ */
.char-card { background: linear-gradient(172deg, rgba(37,37,38,.9), rgba(19,19,20,.94));
    border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; height:100%;
    transition: transform .25s, border-color .25s, box-shadow .25s; }
.char-card:hover { transform:translateY(-5px); border-color: var(--line-hard); box-shadow: var(--sh-3), var(--glow-2); }
.char-hero { position:relative; height:150px; display:grid; place-items:center; padding:1rem;
    background: radial-gradient(ellipse at 50% 10%, rgba(225,29,42,.18), transparent 68%); }
.char-hero img { max-height:116px; width:auto; image-rendering:pixelated; filter: drop-shadow(0 6px 16px rgba(0,0,0,.65)); }
.char-slot { position:absolute; top:10px; left:12px; font-family:'Chakra Petch',monospace;
    font-size: var(--fs-2xs); letter-spacing:1.2px; color: var(--accent);
    background: var(--fill); border:1px solid var(--line-hard); border-radius:5px; padding:1px 7px; }
.char-name { text-align:center; font-size: var(--fs-md); color: var(--tx1); margin:0 .6rem .1rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.char-exp { text-align:center; font-size: var(--fs-2xs); font-family:'Chakra Petch',monospace;
    color: var(--accent-bright); min-height:16px; }
.char-stats { list-style:none; padding:.35rem .95rem .9rem; margin:0; }
.char-stats li { display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size: var(--fs-sm); padding:.3rem 0; border-bottom:1px dashed var(--line-soft); }
.char-stats li:last-child { border-bottom:none; }
.char-stats .lbl { color: var(--tx3); display:flex; align-items:center; gap:6px; white-space:nowrap; }

/* ══════════════ 14. ITEM CARD ══════════════ */
.item-card { display:flex; flex-direction:column; height:100%;
    background: linear-gradient(172deg, rgba(27,27,29,.88), rgba(19,19,20,.92));
    border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden;
    transition: transform .22s, border-color .22s, box-shadow .22s; }
.item-card:hover { transform:translateY(-4px); border-color: var(--line-hard); box-shadow: var(--sh-2), var(--glow-2); }
.item-thumb { position:relative; height:150px; display:grid; place-items:center; padding:1rem;
    background: radial-gradient(ellipse at 50% 18%, rgba(225,29,42,.12), transparent 70%);
    border-bottom:1px solid var(--line-soft); }
.item-thumb img { max-height:118px; max-width:100%; width:auto; object-fit:contain; image-rendering:pixelated; }
.item-thumb > i { font-size: var(--ic-2xl) !important; color: var(--tx4); }
.item-flag { position:absolute; top:9px; right:9px; font-family:'Chakra Petch',monospace;
    font-size: var(--fs-2xs); letter-spacing:.7px; padding:2px 8px; border-radius:5px;
    background: var(--fill-2); color: var(--accent-bright); border:1px solid var(--line-hard); }
.item-flag.ok { background: rgba(34,197,94,.13); color: var(--green); border-color: rgba(34,197,94,.3); }
.item-flag.no { background: rgba(244,63,94,.13); color: var(--red); border-color: rgba(244,63,94,.3); }
.item-body { padding:.85rem 1rem 1rem; display:flex; flex-direction:column; flex:1; }
.item-title { font-size: var(--fs-md); color: var(--tx1); margin:0 0 .25rem; text-align:center;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.item-desc { font-size: var(--fs-xs); color: var(--tx3); text-align:center; margin:0 0 .65rem;
    line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.item-price-row { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-bottom:.65rem; }
.item-foot { margin-top:auto; }

.price-chip { display:inline-flex; align-items:center; gap:5px; font-family:'Chakra Petch',monospace;
    font-weight:600; font-size: var(--fs-xs); padding:.24rem .6rem; border-radius:7px;
    background: var(--fill-2); color: var(--accent-bright); border:1px solid var(--line-hard); white-space:nowrap; }
.price-chip i { font-size: var(--ic-xs); }
.price-chip.gold { background: rgba(245,184,61,.12); color: var(--gold); border-color: rgba(245,184,61,.3); }
.price-chip.cyan { background: rgba(34,211,238,.12); color: var(--cyan); border-color: rgba(34,211,238,.3); }
.price-chip.teal, .price-chip.violet { background: rgba(45,212,191,.12); color: var(--teal); border-color: rgba(45,212,191,.3); }

.meta-box { background: var(--fill); border:1px solid var(--line-soft); border-radius: var(--r-sm);
    padding:.55rem .7rem; margin:.55rem 0; font-size: var(--fs-sm); color: var(--tx2); }
.meta-box b { font-family:'Chakra Petch',monospace; }

/* ══════════════ 15. RANK ══════════════ */
.rank-row { display:flex; align-items:center; gap:10px; padding:.55rem .85rem;
    border-bottom:1px solid var(--line-soft); transition: background .16s; }
.rank-row:last-child { border-bottom:none; }
.rank-row:hover { background: rgba(225,29,42,.05); }
.rank-no { width:26px; height:26px; flex-shrink:0; border-radius:7px; display:grid; place-items:center;
    font-family:'Chakra Petch',monospace; font-weight:700; font-size: var(--fs-xs);
    background: rgba(255,255,255,.04); color: var(--tx3); }
.rank-no i { font-size: var(--ic-xs); }
.rank-row.top1 .rank-no { background: linear-gradient(135deg,#c9901f,var(--gold)); color:#291b00; box-shadow:0 0 13px rgba(245,184,61,.45); }
.rank-row.top2 .rank-no { background: linear-gradient(135deg,#7d93ab,#d3e5f5); color:#1c1c1d; }
.rank-row.top3 .rank-no { background: linear-gradient(135deg,#9a5f2c,#cf8d52); color:#2a1300; }
.rank-name { flex:1; font-size: var(--fs-sm); color: var(--tx1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-val { font-family:'Chakra Petch',monospace; font-weight:700; font-size: var(--fs-sm); white-space:nowrap; }
.rank-card .card-body { max-height:420px; overflow-y:auto; padding:0; }

/* ══════════════ 16. LANDING ══════════════ */
.landing-hero { position:relative; min-height:calc(100vh - 72px);
    display:flex; align-items:center; justify-content:center; overflow:hidden; }
.landing-bg { position:absolute; inset:0; background:url('../../images/bg/hero.jpg') center/cover no-repeat;
    opacity:.26; filter:saturate(.55) hue-rotate(178deg) brightness(.65); }
.landing-overlay { position:absolute; inset:0;
    background: radial-gradient(circle at 50% 42%, rgba(225,29,42,.16), transparent 58%),
                linear-gradient(180deg, rgba(9,9,10,.5) 0%, rgba(9,9,10,.8) 62%, var(--n0) 100%); }
.landing-vignette { position:absolute; inset:0;
    background: radial-gradient(ellipse at center, transparent 32%, rgba(2,6,13,.93) 100%); }
.landing-bottom-glow { position:absolute; left:0; right:0; bottom:0; height:220px;
    background: linear-gradient(0deg, rgba(225,29,42,.18), transparent); filter:blur(36px); }
.landing-center { position:relative; z-index:3; text-align:center; padding:2rem 1rem; width:100%; }
.landing-logo-wrap { display:inline-block; }
.landing-logo { max-width:min(400px,74vw); height:auto; margin:0 auto;
    filter: drop-shadow(0 0 34px rgba(225,29,42,.65)); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.landing-tagline { margin-top:1rem; font-size: clamp(var(--fs-sm), 2.2vw, var(--fs-lg));
    color: var(--tx2); letter-spacing:4px; text-transform:uppercase; }
.landing-actions { margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.landing-stats { margin:2.2rem auto 0; display:grid; gap:10px;
    grid-template-columns: repeat(auto-fit, minmax(132px,1fr)); max-width:700px; }
.landing-stat { background: rgba(22,22,23,.55); backdrop-filter: blur(10px);
    border:1px solid var(--line); border-radius: var(--r-md); padding:.8rem .5rem; }
.landing-stat .n { font-family:'Chakra Petch',monospace; font-weight:700; font-size: var(--fs-2xl);
    color: var(--accent-bright); text-shadow:0 0 14px rgba(225,29,42,.5); }
.landing-stat .l { font-size: var(--fs-2xs); color: var(--tx3); letter-spacing:.9px; text-transform:uppercase; }
.landing-scroll { margin-top:2rem; color: var(--tx4); font-size: var(--fs-lg);
    animation: lzBounce 2s ease-in-out infinite; }
@keyframes lzBounce { 0%,100%{transform:translateY(0);opacity:.45} 50%{transform:translateY(8px);opacity:1} }

.particles-container { position:absolute; inset:0; overflow:hidden; z-index:2; pointer-events:none; }
.fire-particle { position:absolute; bottom:-12px; border-radius:50%;
    animation-name: riseUp; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes riseUp { 0%{transform:translate(0,0) scale(1);opacity:0} 12%{opacity:1}
    100%{transform:translate(var(--drift,0),-104vh) scale(.28);opacity:0} }

.feat-card { height:100%; text-align:center; padding:1.3rem .85rem;
    background: linear-gradient(172deg, rgba(27,27,29,.86), rgba(19,19,20,.9));
    border:1px solid var(--line); border-radius: var(--r-md);
    transition: transform .24s, border-color .24s, box-shadow .24s; }
.feat-card:hover { transform:translateY(-5px); border-color: var(--line-hard); box-shadow: var(--glow-2); }
.feat-ico { width:48px; height:48px; margin:0 auto .7rem; border-radius: var(--r-md);
    display:grid; place-items:center; color: var(--c, var(--accent));
    background: rgba(225,29,42,.10); border:1px solid rgba(225,29,42,.26); }
.feat-ico i { font-size: var(--ic-md) !important; }
.feat-card h6 { font-size: var(--fs-md); color: var(--tx1); margin:0 0 .25rem; font-weight:400; }
.feat-card p { font-size: var(--fs-xs); color: var(--tx3); margin:0; line-height:1.6; }

/* ══════════════ 17. AUTH ══════════════ */
.login-page-wrap { min-height:calc(100vh - 72px); display:flex; align-items:center; padding:2rem 0; }
.login-card { position:relative; overflow:hidden;
    background: linear-gradient(168deg, rgba(38,38,39,.93), rgba(16,16,17,.96));
    border:1px solid var(--line); border-radius: var(--r-xl); padding:2rem 1.8rem;
    box-shadow: var(--sh-3), 0 0 44px rgba(225,29,42,.09); }
.login-card::before { content:''; position:absolute; top:0; left:14%; right:14%; height:2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow:0 0 16px var(--accent); }
.login-card::after { content:''; position:absolute; width:250px; height:250px; right:-105px; top:-105px;
    border-radius:50%; background: radial-gradient(circle, rgba(225,29,42,.15), transparent 66%); pointer-events:none; }
.login-logo-img { max-height:68px; width:auto; margin:0 auto; filter: drop-shadow(0 0 20px rgba(225,29,42,.6)); }
.lz-kicker { display:inline-block; font-family:'Chakra Petch',monospace; font-size: var(--fs-2xs);
    letter-spacing:2.4px; color: var(--accent); padding:.26rem .7rem;
    border:1px solid var(--line-hard); border-radius: var(--r-pill); background: var(--fill); }
.lz-grad { background: linear-gradient(100deg, var(--accent), var(--b200) 52%, var(--cyan));
    -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:500; }
.lz-auth-side { padding-right:1.5rem; }
.lz-auth-side h2 { margin:1rem 0 .7rem; font-size: var(--fs-4xl); font-weight:300; line-height:1.3; }
.lz-auth-side p { color: var(--tx3); font-size: var(--fs-md); line-height: var(--lh-loose); max-width:420px; }
.lz-auth-stats { display:flex; gap:12px; margin-top:1.5rem; flex-wrap:wrap; }
.lz-auth-stats > div { flex:1; min-width:105px; padding:.75rem .9rem; border-radius: var(--r-md);
    background: rgba(24,24,25,.55); border:1px solid var(--line); }
.lz-auth-stats b { display:block; font-family:'Chakra Petch',monospace; font-size: var(--fs-xl); color: var(--accent-bright); }
.lz-auth-stats span { font-size: var(--fs-2xs); color: var(--tx3); letter-spacing:1px; text-transform:uppercase; }
.lz-auth-link { font-size: var(--fs-sm); color: var(--tx3); display:inline-flex; align-items:center; gap:6px; }
.lz-auth-link:hover { color: var(--accent-bright); }

/* ══════════════ 18. FOOTER ══════════════ */
.footer { margin-top: var(--sp-7); background: linear-gradient(180deg, transparent, rgba(9,9,10,.85));
    border-top:1px solid var(--line-soft); padding:1.4rem 0 1.2rem; position:relative; }
.footer::before { content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--line-hard), transparent); }
.footer, .footer span { color: var(--tx3); font-size: var(--fs-sm); }
.footer a { color: var(--accent); }
.footer a:hover { color: var(--accent-bright); text-shadow:0 0 9px rgba(225,29,42,.55); }
.footer-brand { font-family:'Chakra Petch',monospace; font-weight:700; font-size: var(--fs-lg);
    letter-spacing:2.4px; color: var(--accent-bright); text-shadow:0 0 14px rgba(225,29,42,.4); }

/* ══════════════ 19. MOBILE DOCK ══════════════ */
.mdock { display:none; position:fixed; left:10px; right:10px; bottom:10px; z-index:1035;
    background: rgba(19,19,20,.94); backdrop-filter: blur(18px);
    border:1px solid var(--line); border-radius:18px;
    box-shadow:0 -6px 26px rgba(0,4,12,.6), var(--glow-1); padding:6px 4px; }
.mdock-inner { display:flex; justify-content:space-around; align-items:center; }
.mdock a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    color: var(--tx3); font-size: var(--fs-2xs); padding:4px 2px; border-radius:12px;
    transition: color .18s, background .18s; line-height:1.2; }
.mdock a i { font-size: var(--ic-md); }
.mdock a:hover, .mdock a.active { color: var(--accent-bright); background: var(--fill); }
@media (max-width: 991.98px) { .mdock { display:block; } body { padding-bottom:74px; } }

/* ══════════════ 20. EMPTY / UTIL ══════════════ */
.empty-state { text-align:center; padding:2.6rem 1rem; }
.empty-state i { font-size: var(--ic-2xl) !important; color: var(--tx4); margin-bottom:.8rem;
    display:block; filter: drop-shadow(0 0 16px rgba(225,29,42,.2)); }
.empty-state p { color: var(--tx3); font-size: var(--fs-md); margin:0; }
.empty-state h4, .empty-state h5 { color: var(--tx1); }

.glass { background: rgba(24,24,25,.55); backdrop-filter: blur(12px);
    border:1px solid var(--line); border-radius: var(--r-md); }

.fade-up { animation: fadeUp .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.d-1{animation-delay:.05s} .d-2{animation-delay:.10s} .d-3{animation-delay:.15s} .d-4{animation-delay:.20s}

.scanline { position:relative; overflow:hidden; }
.scanline::before { content:''; position:absolute; left:0; right:0; height:40%; z-index:0;
    background: linear-gradient(180deg, transparent, rgba(225,29,42,.06), transparent);
    animation: scan 5s linear infinite; pointer-events:none; }
@keyframes scan { 0%{top:-42%} 100%{top:104%} }

.lz-tips { list-style:none; padding:0; margin:0; }
.lz-tips li { display:flex; align-items:flex-start; gap:9px; font-size: var(--fs-sm);
    color: var(--tx2); padding:.42rem 0; border-bottom:1px dashed var(--line-soft); line-height:1.6; }
.lz-tips li:last-child { border-bottom:none; }
.lz-tips li i { margin-top:4px; font-size: var(--ic-xs); flex-shrink:0; }
.lz-tips li .fa-check { color: var(--green); }
.lz-tips li .fa-xmark { color: var(--red); }

.lz-steps { list-style:none; padding:0; margin:0; }
.lz-steps li { display:flex; align-items:flex-start; gap:10px; font-size: var(--fs-sm);
    color: var(--tx2); padding:.48rem 0; border-bottom:1px dashed var(--line-soft); line-height:1.6; }
.lz-steps li:last-child { border-bottom:none; }
.lz-steps li span { flex-shrink:0; width:21px; height:21px; border-radius:6px;
    display:grid; place-items:center; font-family:'Chakra Petch',monospace;
    font-size: var(--fs-2xs); font-weight:700; background: var(--fill-2); color: var(--accent); }

.lz-preview { display:flex; align-items:center; gap:10px; padding:.68rem .9rem;
    border-radius: var(--r-sm); background: var(--fill); border:1px dashed var(--line-hard); }
.lz-preview-lbl { font-size: var(--fs-2xs); letter-spacing:1.2px; color: var(--tx4); font-family:'Chakra Petch',monospace; }
.lz-preview-val { font-size: var(--fs-lg); color: var(--accent-bright); text-shadow:0 0 12px rgba(225,29,42,.45); }

/* ══════════════ 21. SWEETALERT2 ══════════════ */
.swal2-popup { background: linear-gradient(168deg, #161618, #121213) !important;
    border:1px solid var(--line-hard) !important; border-radius: var(--r-xl) !important;
    color: var(--tx1) !important; box-shadow: var(--sh-3), 0 0 40px rgba(225,29,42,.15) !important;
    font-family:'Kanit',sans-serif !important; }
.swal2-title { color: var(--tx1) !important; font-weight:400 !important; font-size: var(--fs-xl) !important; }
.swal2-html-container, .swal2-content { color: var(--tx2) !important; font-size: var(--fs-md) !important; }
.swal2-styled.swal2-confirm { background: linear-gradient(135deg, var(--accent-deep), var(--accent)) !important;
    border:1px solid rgba(252,165,165,.4) !important; border-radius: var(--r-sm) !important;
    color:#ffffff !important; font-weight:500 !important; box-shadow:0 4px 18px rgba(179,20,29,.4) !important; }
.swal2-styled.swal2-cancel { background: rgba(255,255,255,.06) !important;
    border:1px solid var(--line) !important; color: var(--tx2) !important; border-radius: var(--r-sm) !important; }
.swal2-icon.swal2-question, .swal2-icon.swal2-info { border-color: var(--accent) !important; color: var(--accent) !important; }
.swal2-icon.swal2-warning { border-color: var(--gold) !important; color: var(--gold) !important; }
.swal2-icon.swal2-error { border-color: var(--red) !important; color: var(--red) !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--red) !important; }
.swal2-icon.swal2-success { border-color: var(--green) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--green) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34,197,94,.3) !important; }
.swal2-loader { border-color: var(--accent) transparent var(--accent) transparent !important; }
.swal2-input, .swal2-textarea { background: rgba(13,13,14,.85) !important;
    border:1px solid var(--line) !important; color: var(--tx1) !important; }
.swal2-timer-progress-bar { background: var(--accent) !important; }

/* ══════════════ 22. RESPONSIVE ══════════════ */
@media (max-width: 1199.98px) {
    .navbar-nav .nav-link { padding:.45rem .62rem !important; font-size: var(--fs-sm); }
}
@media (max-width: 991.98px) {
    :root { --fs-4xl: 2rem; --fs-3xl: 1.55rem; --fs-2xl: 1.28rem; }
    .navbar-collapse { background: rgba(19,19,20,.98); backdrop-filter: blur(18px);
        border:1px solid var(--line); border-radius: var(--r-md); padding:.8rem;
        margin-top:.65rem; box-shadow: var(--sh-2); max-height:72vh; overflow-y:auto; }
    .navbar-nav .nav-link { padding:.58rem .75rem !important; font-size: var(--fs-md); }
    .dropdown-menu { background: rgba(9,9,10,.55) !important; border:1px solid var(--line-soft) !important; margin-top:4px !important; }
    .user-chip { max-width:100%; }
    .landing-hero { min-height:70vh; }
    .lz-auth-side { padding-right:0; }
    .page-head .ms-auto { margin-left:0 !important; width:100%; }
    .page-head .stat-tile { min-width:0 !important; width:100%; }
}
@media (max-width: 767.98px) {
    :root { --fs-4xl:1.75rem; --fs-3xl:1.4rem; --fs-2xl:1.2rem; --fs-xl:1.05rem; }
    .card-body { padding: var(--sp-3); }
    .page-head { padding:.8rem .9rem; gap:10px; }
    .page-head-icon { width:40px; height:40px; }
    .char-hero, .item-thumb { height:130px; }
    .char-hero img { max-height:98px; }
    .item-thumb img { max-height:100px; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(132px,1fr)); gap:8px; }
    .stat-tile { padding:.7rem .8rem; }
    .table { font-size: var(--fs-xs); }
    .btn-lg { padding:.58rem 1.15rem; font-size: var(--fs-md); }
}
@media (max-width: 575.98px) {
    .landing-logo { max-width:72vw; }
    .landing-actions .btn { width:100%; }
    .rank-card .card-body { max-height:340px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    .lz-fx-spot, .lz-fx-ring, .lz-fx-grid { transition:none !important; }
}

/* ══════════════ 23. IMAGE NORMALIZER (กันรูปล้น / เบี้ยว) ══════════════ */
.card-body img,
.card img.img-fluid {
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    border-radius: var(--r-sm);
}
/* รูปในกรอบสินค้า/ตัวละคร ให้ระบบคุมเอง (ยกเลิก radius) */
.item-thumb img, .char-hero img, .logo-img, .landing-logo, .login-logo-img { border-radius: 0; }

/* รูปแบนเนอร์/โปรโมชั่นในการ์ด */
.card-body > img.img-fluid,
.card-body .text-center > img.img-fluid {
    max-height: 320px;
    border: 1px solid var(--line-soft);
}

/* ไอคอนใหญ่ที่ยังหลุด scale ให้ลดลงมาให้พอดี */
[style*="font-size:3.5rem"], [style*="font-size: 3.5rem"],
[style*="font-size:4.5rem"], [style*="font-size:5rem"] {
    font-size: var(--ic-2xl) !important;
}

/* ══════════════ 24. LAYOUT GUARD ══════════════ */
/* กันคอลัมน์ล้นบนจอกลาง */
.row > [class*="col-"] { min-width: 0; }
/* ระยะห่างมาตรฐานของ section */
section#main { padding-bottom: var(--sp-5); }
/* หัวข้อในการ์ดไม่ให้ตัวหนังสือชนขอบ */
.card > .card-body > .row:last-child { margin-bottom: 0; }