:root {
  --navy-900:#06152B;--navy-800:#0B1F3A;--navy-700:#0F2844;
  --navy-600:#13304F;--navy-500:#1A3A5C;
  --teal-700:#009E92;--teal-500:#00B4A6;--teal-300:#00D4C4;
  --teal-100:rgba(0,180,166,0.12);
  --gold-500:#F0B429;--gold-300:#FFD166;
  --gold-100:rgba(240,180,41,0.12);
  --white:#F0F6FF;--muted:#7A98B8;
  --border:rgba(0,180,166,0.18);
  --success:#22C55E;--danger:#EF4444;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Sarabun',sans-serif;background:var(--navy-800);color:var(--white);min-height:100vh;overflow-x:hidden;}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:var(--navy-900);}::-webkit-scrollbar-thumb{background:var(--teal-700);border-radius:3px;}
.bg-fixed{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 80% -10%,rgba(0,180,166,.14) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at -10% 80%,rgba(240,180,41,.08) 0%,transparent 60%),linear-gradient(180deg,var(--navy-900) 0%,var(--navy-800) 100%);}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(0,180,166,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,166,.035) 1px,transparent 1px);background-size:48px 48px;}
.page{display:none;position:relative;z-index:1;min-height:100vh;padding-top:68px;}
.page.active{display:block;}

/* ══════════════════════════════════════
   LIFF LOADING SCREEN
══════════════════════════════════════ */
#liff-loading{position:fixed;inset:0;z-index:9999;background:var(--navy-900);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
.liff-logo{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,var(--teal-500),var(--gold-500));display:flex;align-items:center;justify-content:center;font-size:36px;animation:pulse 1.5s ease infinite;}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,180,166,.4)}50%{transform:scale(1.06);box-shadow:0 0 0 12px rgba(0,180,166,0)}}
.liff-loading-text{font-family:'Kanit',sans-serif;font-size:16px;color:var(--muted);}
.liff-dots{display:flex;gap:6px;}
.liff-dots span{width:8px;height:8px;border-radius:50%;background:var(--teal-500);animation:dot 1.2s infinite;}
.liff-dots span:nth-child(2){animation-delay:.2s;}
.liff-dots span:nth-child(3){animation-delay:.4s;}
@keyframes dot{0%,80%,100%{transform:scale(0.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ══════════════════════════════════════
   LINE PROFILE BAR
══════════════════════════════════════ */
#line-profile-bar{display:none;background:rgba(0,180,166,.08);border-bottom:1px solid rgba(0,180,166,.15);padding:8px 40px;position:fixed;top:68px;width:100%;z-index:150;align-items:center;gap:12px;}
#line-profile-bar.show{display:flex;}
.lpb-avatar{width:32px;height:32px;border-radius:50%;border:2px solid var(--teal-500);object-fit:cover;}
.lpb-name{font-family:'Kanit',sans-serif;font-size:13px;font-weight:600;color:var(--teal-300);}
.lpb-badge{font-size:11px;background:rgba(0,180,166,.15);border:1px solid rgba(0,180,166,.25);border-radius:999px;padding:2px 10px;color:var(--teal-300);margin-left:4px;}
.lpb-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.lpb-logout{font-size:12px;color:var(--muted);cursor:pointer;border:none;background:transparent;font-family:'Sarabun',sans-serif;}
.lpb-logout:hover{color:var(--white);}
body.has-profile .page{padding-top:116px;}

/* NAV */
nav{position:fixed;top:0;width:100%;z-index:200;height:68px;background:rgba(6,21,43,.9);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Kanit',sans-serif;font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;color:var(--white);}
.logo-box{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--teal-500),var(--gold-500));display:flex;align-items:center;justify-content:center;font-size:17px;}
.logo em{color:var(--teal-300);font-style:normal;}
.nav-right{display:flex;align-items:center;gap:8px;}
.nav-btn{padding:7px 18px;border-radius:8px;border:none;cursor:pointer;font-family:'Kanit',sans-serif;font-size:13px;font-weight:500;transition:all .2s;}
.nav-ghost{background:transparent;color:var(--muted);border:1px solid transparent;}
.nav-ghost:hover{color:var(--white);border-color:var(--border);}
.nav-teal{background:var(--teal-500);color:var(--navy-900);font-weight:700;}
.nav-teal:hover{background:var(--teal-300);}
.nav-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--teal-700),var(--navy-500));display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;border:2px solid var(--teal-500);overflow:hidden;}
.nav-avatar img{width:100%;height:100%;object-fit:cover;}
.nav-logo-img{height:34px;width:auto;display:block;}
.nav-wordmark-img{height:24px;width:auto;display:block;}
.nav-avatar-wrap{position:relative;display:inline-flex;}
.nav-deal-badge{position:absolute;top:-5px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#F97316;color:#fff;font-family:'Kanit',sans-serif;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--navy-900);pointer-events:none;}
body.nav-light .nav-deal-badge{border-color:#F4F8FE;}

/* navbar สว่างเฉพาะหน้า home (design v2) — toggled ด้วย body.nav-light จาก go() ใน app.js */
body.nav-light nav{background:rgba(244,248,254,.92);border-bottom:1px solid rgba(30,60,110,.14);}
body.nav-light .nav-wordmark-img{filter:brightness(.28) drop-shadow(0 1px 1px rgba(140,165,205,.35));}
body.nav-light .nav-ghost{color:#31465F;}
body.nav-light .nav-ghost:hover{color:#0B1B33;border-color:rgba(30,60,110,.22);}
body.nav-light #line-profile-bar{background:rgba(0,180,166,.10);border-bottom:1px solid rgba(0,180,166,.22);}
body.nav-light .lpb-name{color:#067a6f;}
body.nav-light .lpb-badge{color:#067a6f;background:rgba(0,180,166,.14);border-color:rgba(0,180,166,.3);}
body.nav-light .lpb-logout{color:#31465F;}
body.nav-light .lpb-logout:hover{color:#0B1B33;}

/* HOME */
.hero{padding:80px 40px 60px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;min-height:calc(100vh - 68px);}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--teal-100);border:1px solid rgba(0,180,166,.3);border-radius:999px;padding:5px 14px;margin-bottom:24px;font-size:12px;color:var(--teal-300);}
.bdot{width:6px;height:6px;background:var(--teal-500);border-radius:50%;animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-family:'Kanit',sans-serif;font-size:clamp(32px,4.5vw,58px);font-weight:800;line-height:1.15;margin-bottom:18px;}
.c-teal{color:var(--teal-300);}.c-gold{color:var(--gold-500);}
.hero-desc{font-size:17px;color:var(--muted);line-height:1.75;margin-bottom:36px;max-width:460px;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.btn{padding:13px 28px;border-radius:10px;border:none;cursor:pointer;font-family:'Kanit',sans-serif;font-size:15px;font-weight:600;transition:all .2s;display:inline-flex;align-items:center;gap:8px;}
.btn-p{background:linear-gradient(135deg,var(--teal-500),var(--teal-700));color:var(--navy-900);box-shadow:0 6px 28px rgba(0,180,166,.3);}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(0,180,166,.42);}
.btn-o{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.2);}
.btn-o:hover{border-color:var(--teal-500);background:var(--teal-100);}
.btn-line{background:#06C755;color:#fff;font-size:15px;}
.btn-line:hover{background:#05a847;transform:translateY(-2px);}
.stat-cards{display:flex;flex-direction:column;gap:14px;}
.sc{background:rgba(11,31,58,.7);border:1px solid var(--border);border-radius:16px;padding:18px 22px;display:flex;align-items:center;gap:18px;transition:transform .2s,border-color .2s;}
.sc:hover{transform:translateX(6px);border-color:rgba(0,180,166,.35);}
.sc-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.si-t{background:var(--teal-100);border:1px solid rgba(0,180,166,.2);}
.si-g{background:var(--gold-100);border:1px solid rgba(240,180,41,.2);}
.si-s{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);}
.sc-num{font-family:'Kanit',sans-serif;font-size:24px;font-weight:700;color:var(--teal-300);line-height:1;}
.sc-label{font-size:13px;color:var(--muted);margin-top:3px;}
.features{background:rgba(6,21,43,.5);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:56px 40px;}
.fi{max-width:1100px;margin:0 auto;}
.sec-tag{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal-500);margin-bottom:10px;}
.sec-title{font-family:'Kanit',sans-serif;font-size:clamp(24px,3vw,38px);font-weight:700;margin-bottom:40px;}
.fg3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fc-card{background:var(--navy-700);border:1px solid var(--border);border-radius:16px;padding:28px 24px;transition:all .25s;cursor:pointer;}
.fc-card:hover{transform:translateY(-4px);border-color:rgba(0,180,166,.4);box-shadow:0 16px 48px rgba(0,0,0,.35);}
.fc-icon{font-size:32px;margin-bottom:16px;}
.fc-card h3{font-family:'Kanit',sans-serif;font-size:17px;font-weight:600;margin-bottom:8px;}
.fc-card p{font-size:14px;color:var(--muted);line-height:1.65;}
.fc-tag{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;font-size:11px;background:var(--teal-100);color:var(--teal-300);border:1px solid rgba(0,180,166,.2);}
.hiw{padding:72px 40px;max-width:1100px;margin:0 auto;}
.flow{display:flex;gap:0;margin-top:48px;}
.fs{flex:1;text-align:center;position:relative;}
.fs:not(:last-child)::after{content:'';position:absolute;top:33px;left:55%;width:90%;height:2px;background:linear-gradient(90deg,var(--teal-700),transparent);}
.fs-circle{width:68px;height:68px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:26px;position:relative;z-index:1;}
.fsc-t{background:rgba(0,180,166,.15);border:2px solid var(--teal-500);}
.fsc-g{background:rgba(240,180,41,.15);border:2px solid var(--gold-500);}
.fsc-s{background:rgba(34,197,94,.15);border:2px solid var(--success);}
.fs-role{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--teal-300);margin-bottom:6px;text-transform:uppercase;}
.fs h4{font-family:'Kanit',sans-serif;font-size:15px;font-weight:600;margin-bottom:6px;}
.fs p{font-size:13px;color:var(--muted);padding:0 12px;line-height:1.5;}

/* CREATE */
.wrap{max-width:780px;margin:0 auto;padding:48px 40px;}
.ph{margin-bottom:36px;}
.ph h2{font-family:'Kanit',sans-serif;font-size:30px;font-weight:700;margin-bottom:6px;}
.ph p{color:var(--muted);font-size:15px;}
.fcard{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:36px;margin-bottom:24px;}
.fcard-title{font-family:'Kanit',sans-serif;font-size:18px;font-weight:600;margin-bottom:24px;display:flex;align-items:center;gap:10px;}
.fcard-title span{font-size:12px;background:var(--teal-100);color:var(--teal-300);border-radius:999px;padding:3px 12px;font-weight:400;border:1px solid rgba(0,180,166,.2);}
.fg{margin-bottom:20px;}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px;font-weight:500;}
.inp{width:100%;background:var(--navy-600);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 16px;color:var(--white);font-family:'Sarabun',sans-serif;font-size:15px;transition:border-color .2s;outline:none;resize:vertical;}
.inp:focus{border-color:var(--teal-500);}
.inp::placeholder{color:rgba(255,255,255,.2);}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.topt{border:1px solid var(--border);border-radius:12px;padding:16px 10px;text-align:center;cursor:pointer;transition:all .2s;background:var(--navy-600);}
.topt:hover{border-color:var(--teal-500);}
.topt.sel{border-color:var(--teal-500);background:var(--teal-100);}
.te{font-size:26px;margin-bottom:8px;}
.tl-opt{font-size:12px;color:var(--muted);font-weight:500;}
.topt.sel .tl-opt{color:var(--teal-300);}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.chip{padding:7px 16px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:13px;cursor:pointer;transition:all .2s;font-family:'Sarabun',sans-serif;}
.chip:hover{border-color:var(--teal-500);color:var(--white);}
.chip.on{background:var(--teal-500);color:var(--navy-900);border-color:var(--teal-500);font-weight:600;}
.fee-box{background:var(--gold-100);border:1px dashed rgba(240,180,41,.35);border-radius:12px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.fee-lbl{font-size:13px;color:var(--muted);}
.fee-sub{font-size:12px;color:var(--gold-500);margin-top:3px;}
.fee-amt{font-family:'Kanit',sans-serif;font-size:22px;color:var(--gold-300);font-weight:700;}

/* LINE Profile card in form */
.line-profile-card{background:rgba(6,199,85,.07);border:1px solid rgba(6,199,85,.2);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.lpc-avatar{width:48px;height:48px;border-radius:50%;border:2px solid #06C755;object-fit:cover;flex-shrink:0;}
.lpc-avatar-placeholder{width:48px;height:48px;border-radius:50%;background:rgba(6,199,85,.15);border:2px solid rgba(6,199,85,.3);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.lpc-info{flex:1;}
.lpc-name{font-family:'Kanit',sans-serif;font-size:16px;font-weight:600;}
.lpc-uid{font-size:12px;color:var(--muted);margin-top:2px;font-family:monospace;}
.lpc-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(6,199,85,.1);color:#06C755;border:1px solid rgba(6,199,85,.2);border-radius:999px;padding:3px 10px;font-size:11px;margin-top:6px;}

/* Sig */
.sig-wrap{border:2px dashed rgba(255,255,255,.15);border-radius:14px;position:relative;cursor:crosshair;background:rgba(6,21,43,.6);width:100%;display:block;user-select:none;-webkit-user-select:none;}
.sig-wrap canvas{display:block;width:100%;height:220px;touch-action:none;cursor:crosshair;}
.sig-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;color:rgba(255,255,255,.18);pointer-events:none;text-align:center;line-height:1.6;white-space:nowrap;}
.sig-acts{display:flex;gap:10px;margin-top:12px;}
.bsm{padding:8px 18px;border-radius:8px;border:none;cursor:pointer;font-family:'Kanit',sans-serif;font-size:13px;font-weight:600;transition:all .2s;}
.bsm-ghost{background:transparent;border:1px solid var(--border);color:var(--muted);}
.bsm-ghost:hover{border-color:var(--teal-500);color:var(--white);}
.bsm-teal{background:var(--teal-500);color:var(--navy-900);}
.bsm-teal:hover{background:var(--teal-300);}
.bsm-red{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#FCA5A5;}
.bsm-red:hover{background:rgba(239,68,68,.25);}

/* VIDEO */
.vtab-row{display:flex;gap:0;background:var(--navy-600);border-radius:10px;padding:4px;margin-bottom:16px;border:1px solid rgba(255,255,255,.06);}
.vtab{flex:1;padding:8px;text-align:center;border-radius:7px;cursor:pointer;font-family:'Kanit',sans-serif;font-size:13px;font-weight:500;color:var(--muted);transition:all .2s;border:none;background:transparent;}
.vtab.active{background:var(--teal-500);color:var(--navy-900);font-weight:700;}
.vdrop{border:2px dashed rgba(0,180,166,.3);border-radius:14px;padding:36px 24px;text-align:center;cursor:pointer;transition:all .25s;background:rgba(0,180,166,.03);position:relative;}
.vdrop:hover,.vdrop.drag{border-color:var(--teal-500);background:var(--teal-100);}
.vdrop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.vdrop-icon{font-size:40px;margin-bottom:12px;display:block;}
.vdrop h4{font-family:'Kanit',sans-serif;font-size:15px;font-weight:600;margin-bottom:6px;}
.vdrop p{font-size:13px;color:var(--muted);}
.vd-hint{margin-top:10px;font-size:11px;color:rgba(255,255,255,.2);}
.vrec{border:2px solid rgba(240,180,41,.2);border-radius:14px;overflow:hidden;background:var(--navy-900);position:relative;}
.vrec-feed{width:100%;display:block;max-height:260px;object-fit:cover;background:#000;}
.vrec-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,21,43,.8);flex-direction:column;gap:12px;}
.vrec-overlay.hidden{display:none;}
.vrec-controls{display:flex;gap:10px;padding:14px 16px;background:var(--navy-900);align-items:center;flex-wrap:wrap;}
.rec-dot{width:10px;height:10px;background:var(--danger);border-radius:50%;animation:blink 1s infinite;display:none;}
.rec-dot.show{display:block;}
.rec-timer{font-family:'Kanit',sans-serif;font-size:14px;color:var(--gold-300);min-width:48px;}
.vpreview{background:var(--navy-600);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:14px;margin-top:12px;animation:fadeUp .3s ease both;}
.vpreview-thumb{width:64px;height:48px;border-radius:8px;object-fit:cover;background:var(--navy-900);border:1px solid var(--border);flex-shrink:0;}
.vpreview-info{flex:1;min-width:0;}
.vpreview-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vpreview-meta{font-size:12px;color:var(--muted);margin-top:3px;}
.vpreview-status{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--success);}
.vpreview-remove{background:transparent;border:1px solid rgba(239,68,68,.3);color:#FCA5A5;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:12px;font-family:'Kanit',sans-serif;transition:all .2s;white-space:nowrap;}
.vpreview-remove:hover{background:rgba(239,68,68,.15);}
.vprogress{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-top:8px;}
.vprogress-bar{height:100%;background:linear-gradient(90deg,var(--teal-500),var(--teal-300));border-radius:2px;width:0%;transition:width .3s ease;}
.vinfo-note{display:flex;align-items:flex-start;gap:10px;background:rgba(240,180,41,.07);border:1px solid rgba(240,180,41,.15);border-radius:10px;padding:12px 14px;margin-top:14px;font-size:13px;color:var(--gold-300);line-height:1.55;}
.vi-icon{font-size:16px;flex-shrink:0;margin-top:1px;}
.party-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.party-video-card{background:var(--navy-700);border:1px solid var(--border);border-radius:16px;padding:20px;}
.party-video-card h5{font-family:'Kanit',sans-serif;font-size:14px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.pv-role-buyer{color:var(--teal-300);}
.pv-role-seller{color:var(--gold-300);}
.pv-status-badge{font-size:11px;padding:2px 8px;border-radius:999px;margin-left:auto;}
.pvs-done{background:rgba(34,197,94,.15);color:var(--success);}
.pvs-wait{background:rgba(255,255,255,.06);color:var(--muted);}

/* CAMERA MODAL */
.cam-modal{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);align-items:center;justify-content:center;}
.cam-modal.open{display:flex;}
.cam-box{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:32px;max-width:520px;width:90%;text-align:center;}
.cam-box h3{font-family:'Kanit',sans-serif;font-size:20px;margin-bottom:8px;}
.cam-box p{font-size:14px;color:var(--muted);margin-bottom:20px;}
#vFeed{width:100%;border-radius:12px;background:#000;border:2px solid var(--teal-500);margin-bottom:16px;max-height:280px;object-fit:cover;}
.cam-btns{display:flex;gap:12px;justify-content:center;}

/* SUCCESS */
.suc-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 68px);padding:40px;}
.suc-box{background:var(--navy-700);border:1px solid rgba(34,197,94,.3);border-radius:24px;padding:56px 48px;max-width:520px;width:100%;text-align:center;}
.suc-icon{font-size:72px;margin-bottom:24px;display:block;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes pop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.suc-box h2{font-family:'Kanit',sans-serif;font-size:28px;font-weight:700;margin-bottom:12px;}
.suc-box p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:32px;}
.link-box{background:var(--navy-600);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px;}
.link-text{flex:1;font-size:13px;color:var(--teal-300);font-family:monospace;word-break:break-all;text-align:left;}
.copy-btn{padding:8px 16px;background:var(--teal-500);color:var(--navy-900);border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:'Kanit',sans-serif;}
.copy-btn:hover{background:var(--teal-300);}

/* LINE SHARE BUTTON */
.btn-line-share{width:100%;padding:14px;border-radius:12px;border:none;cursor:pointer;font-family:'Kanit',sans-serif;font-size:16px;font-weight:700;background:#06C755;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;transition:all .2s;}
.btn-line-share:hover{background:#05a847;transform:translateY(-2px);}
.btn-line-share svg{width:22px;height:22px;fill:currentColor;}

/* DEAL ROOM */
.dr{max-width:920px;margin:0 auto;padding:48px 40px;}
.deal-hd{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:32px;margin-bottom:24px;}
.deal-id-label{font-size:12px;color:var(--muted);letter-spacing:1px;margin-bottom:12px;}
.deal-tr{display:flex;justify-content:space-between;align-items:flex-start;}
.deal-hd h2{font-family:'Kanit',sans-serif;font-size:26px;font-weight:700;margin-bottom:8px;}
.da{font-family:'Kanit',sans-serif;font-size:32px;font-weight:800;color:var(--gold-300);text-align:right;}
.da small{display:block;font-size:13px;color:var(--muted);font-weight:400;}
.sbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:16px;}
.sb-a{background:rgba(0,180,166,.15);color:var(--teal-300);border:1px solid rgba(0,180,166,.3);}
.sb-d{background:rgba(34,197,94,.15);color:var(--success);border:1px solid rgba(34,197,94,.3);}
.sb-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.5s infinite;}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.icard{background:var(--navy-700);border:1px solid var(--border);border-radius:16px;padding:24px;}
.icard h4{font-family:'Kanit',sans-serif;font-size:15px;margin-bottom:16px;color:var(--muted);}
.party-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.party-row:last-child{border-bottom:none;padding-bottom:0;}
.pav{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden;}
.pav img{width:100%;height:100%;object-fit:cover;}
.pav-b{background:var(--teal-100);border:2px solid var(--teal-500);}
.pav-s{background:var(--gold-100);border:2px solid var(--gold-500);}
.pname{font-weight:600;font-size:15px;}
.prole{font-size:12px;color:var(--muted);margin-top:2px;}
.pst{margin-left:auto;font-size:12px;}
.ps-ok{color:var(--success);}.ps-w{color:var(--gold-500);}
.track-card{background:var(--navy-700);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:20px;}
.track-card h4{font-family:'Kanit',sans-serif;font-size:15px;margin-bottom:16px;color:var(--muted);}
.tp{display:flex;align-items:center;margin-bottom:16px;}
.tpstep{flex:1;text-align:center;position:relative;}
.tpstep:not(:last-child)::after{content:'';position:absolute;top:14px;left:60%;width:80%;height:2px;background:var(--teal-500);}
.tpstep:nth-child(3)::after,.tpstep:nth-child(4)::after{background:rgba(255,255,255,.1);}
.tpdot{width:28px;height:28px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:12px;}
.tp-done2{background:var(--teal-500);}
.tp-now2{background:var(--gold-500);}
.tp-wait2{background:var(--navy-500);border:1px solid var(--border);}
.tplabel{font-size:11px;color:var(--muted);}
.tl-wrap{background:var(--navy-700);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:20px;}
.tl-wrap h4{font-family:'Kanit',sans-serif;font-size:15px;margin-bottom:20px;color:var(--muted);}
.tl{display:flex;flex-direction:column;}
.tli{display:flex;gap:18px;position:relative;}
.tli:not(:last-child)::before{content:'';position:absolute;left:19px;top:44px;width:2px;height:calc(100% - 4px);background:linear-gradient(180deg,var(--teal-700),rgba(0,180,166,.1));}
.tldot{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;z-index:1;}
.tl-ok{background:rgba(0,180,166,.2);border:2px solid var(--teal-500);}
.tl-now{background:rgba(240,180,41,.2);border:2px solid var(--gold-500);animation:glow 2s infinite;}
.tl-pend{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.1);}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(240,180,41,.3)}50%{box-shadow:0 0 0 8px rgba(240,180,41,0)}}
.tlc{padding-bottom:24px;}
.tlc h5{font-family:'Kanit',sans-serif;font-size:14px;font-weight:600;margin-bottom:3px;}
.tlc p{font-size:12px;color:var(--muted);}
.tltime{font-size:11px;color:var(--teal-500);margin-top:3px;}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.btn-lg{flex:1;padding:16px;border-radius:12px;border:none;cursor:pointer;font-family:'Kanit',sans-serif;font-size:16px;font-weight:700;transition:all .2s;min-width:160px;}
.btn-ok{background:linear-gradient(135deg,var(--success),#16A34A);color:#fff;box-shadow:0 6px 24px rgba(34,197,94,.25);}
.btn-ok:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(34,197,94,.35);}
.btn-dis{background:transparent;color:#FCA5A5;border:1px solid rgba(239,68,68,.3);}
.btn-dis:hover{background:rgba(239,68,68,.1);}

/* HISTORY */
.hw{max-width:900px;margin:0 auto;padding:48px 40px;}
.frow{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap;}
.fbtn{padding:8px 18px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:14px;cursor:pointer;transition:all .2s;font-family:'Sarabun',sans-serif;}
.fbtn.on{background:var(--teal-500);color:var(--navy-900);border-color:var(--teal-500);font-weight:600;}
.fbtn:hover:not(.on){border-color:var(--teal-500);color:var(--white);}
.dl{display:flex;flex-direction:column;gap:14px;}
.di{background:var(--navy-700);border:1px solid var(--border);border-radius:16px;padding:20px 24px;display:flex;align-items:center;gap:20px;cursor:pointer;transition:all .2s;}
.di:hover{border-color:rgba(0,180,166,.35);transform:translateX(4px);}
.di-ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.di-info{flex:1;}
.di-t{font-family:'Kanit',sans-serif;font-size:16px;font-weight:600;margin-bottom:4px;}
.di-m{font-size:13px;color:var(--muted);}
.di-r{text-align:right;}
.di-a{font-family:'Kanit',sans-serif;font-size:18px;font-weight:700;color:var(--gold-300);}
.di-d{font-size:12px;color:var(--muted);margin-top:4px;}
.dib{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;margin-top:6px;}
.dib-done{background:rgba(34,197,94,.15);color:var(--success);}
.dib-act{background:rgba(0,180,166,.15);color:var(--teal-300);}
.dib-pend{background:rgba(240,180,41,.15);color:var(--gold-500);}

/* ══════════════════════════════════════
   SELLER VIEW
══════════════════════════════════════ */
.sv{max-width:860px;margin:0 auto;padding:48px 40px;}
.sv-deal-card{background:linear-gradient(135deg,rgba(0,180,166,.08),rgba(240,180,41,.05));border:1px solid rgba(0,180,166,.25);border-radius:24px;padding:36px;margin-bottom:28px;position:relative;overflow:hidden;}
.sv-deal-card::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(0,180,166,.12),transparent 70%);pointer-events:none;}
.sv-role-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(240,180,41,.12);border:1px solid rgba(240,180,41,.25);border-radius:999px;padding:5px 14px;font-size:12px;color:var(--gold-300);font-weight:600;margin-bottom:18px;}
.sv-deal-title{font-family:'Kanit',sans-serif;font-size:26px;font-weight:700;margin-bottom:10px;line-height:1.3;}
.sv-deal-meta{font-size:14px;color:var(--muted);margin-bottom:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.sv-meta-dot{width:4px;height:4px;border-radius:50%;background:var(--muted);}
.sv-amount-row{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.sv-amount-box{background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.2);border-radius:14px;padding:16px 24px;}
.sv-amount-label{font-size:12px;color:var(--muted);margin-bottom:4px;}
.sv-amount-value{font-family:'Kanit',sans-serif;font-size:32px;font-weight:800;color:var(--gold-300);}
.sv-earn-box{background:rgba(0,180,166,.08);border:1px solid rgba(0,180,166,.2);border-radius:14px;padding:16px 24px;}
.sv-earn-label{font-size:12px;color:var(--muted);margin-bottom:4px;}
.sv-earn-value{font-family:'Kanit',sans-serif;font-size:24px;font-weight:700;color:var(--teal-300);}
.sv-buyer-card{background:var(--navy-700);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:24px;display:flex;align-items:center;gap:18px;}
.sv-buyer-av{width:56px;height:56px;border-radius:50%;background:var(--teal-100);border:2px solid var(--teal-500);display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden;flex-shrink:0;}
.sv-buyer-av img{width:100%;height:100%;object-fit:cover;}
.sv-buyer-name{font-family:'Kanit',sans-serif;font-size:18px;font-weight:600;}
.sv-buyer-role{font-size:13px;color:var(--muted);margin-top:3px;}
.sv-buyer-verified{display:inline-flex;align-items:center;gap:5px;background:rgba(34,197,94,.1);color:var(--success);border:1px solid rgba(34,197,94,.2);border-radius:999px;padding:3px 10px;font-size:11px;margin-top:6px;}
.sv-steps{display:flex;gap:0;margin-bottom:32px;}
.sv-step{flex:1;text-align:center;position:relative;}
.sv-step:not(:last-child)::after{content:'';position:absolute;top:20px;left:55%;width:90%;height:2px;}
.sv-step.done::after{background:var(--teal-500);}
.sv-step.curr::after,.sv-step.pend::after{background:rgba(255,255,255,.1);}
.sv-step-dot{width:40px;height:40px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;z-index:1;transition:all .3s;}
.sv-step.done .sv-step-dot{background:rgba(0,180,166,.2);border:2px solid var(--teal-500);}
.sv-step.curr .sv-step-dot{background:rgba(240,180,41,.2);border:2px solid var(--gold-500);animation:glow 2s infinite;}
.sv-step.pend .sv-step-dot{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.1);}
.sv-step-label{font-size:11px;color:var(--muted);line-height:1.4;padding:0 4px;}
.sv-step.curr .sv-step-label{color:var(--gold-300);font-weight:600;}
.sv-panel{display:none;animation:fadeUp .4s ease both;}
.sv-panel.active{display:block;}
.sv-confirm-card{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:32px;margin-bottom:24px;}
.sv-terms-box{background:rgba(6,21,43,.6);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:20px;margin-bottom:24px;max-height:200px;overflow-y:auto;font-size:13px;color:var(--muted);line-height:1.9;}
.sv-terms-box h5{font-family:'Kanit',sans-serif;font-size:14px;color:var(--white);margin-bottom:12px;}
.sv-terms-item{display:flex;gap:10px;margin-bottom:8px;}
.sv-terms-item::before{content:'•';color:var(--teal-500);flex-shrink:0;}
.sv-agree-row{display:flex;align-items:center;gap:12px;cursor:pointer;margin-bottom:24px;padding:14px 16px;border-radius:10px;border:1px solid var(--border);transition:border-color .2s;}
.sv-agree-row:hover{border-color:var(--teal-500);}
.sv-checkbox{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:13px;}
.sv-checkbox.checked{background:var(--teal-500);border-color:var(--teal-500);}
.sv-agree-text{font-size:14px;line-height:1.5;}
.sv-sign-area{margin-bottom:24px;}
.sv-sign-label{font-size:13px;color:var(--muted);margin-bottom:10px;}
.sv-upload-card{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:32px;margin-bottom:24px;}
.sv-tracking-row{display:flex;gap:12px;margin-bottom:24px;}
.sv-tracking-inp{flex:1;}
.sv-info-box{background:rgba(240,180,41,.07);border:1px solid rgba(240,180,41,.15);border-radius:12px;padding:14px 16px;font-size:13px;color:var(--gold-300);line-height:1.6;display:flex;gap:10px;align-items:flex-start;margin-bottom:20px;}
.sv-done-box{background:var(--navy-700);border:1px solid rgba(34,197,94,.3);border-radius:24px;padding:56px;text-align:center;max-width:520px;margin:0 auto;}
.sv-done-icon{font-size:72px;display:block;margin-bottom:24px;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;}
.sv-done-title{font-family:'Kanit',sans-serif;font-size:28px;font-weight:700;margin-bottom:12px;}
.sv-done-desc{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:32px;}
.sv-earn-highlight{background:linear-gradient(135deg,rgba(0,180,166,.12),rgba(240,180,41,.08));border:1px solid rgba(0,180,166,.2);border-radius:16px;padding:24px;margin-bottom:28px;}
.sv-earn-hl-label{font-size:13px;color:var(--muted);margin-bottom:6px;}
.sv-earn-hl-val{font-family:'Kanit',sans-serif;font-size:36px;font-weight:800;color:var(--teal-300);}
.sv-earn-hl-sub{font-size:12px;color:var(--muted);margin-top:4px;}
.sv-reject-reasons{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.sv-reason-opt{padding:12px 16px;border-radius:10px;border:1px solid var(--border);cursor:pointer;font-size:14px;transition:all .2s;}
.sv-reason-opt:hover,.sv-reason-opt.sel{border-color:var(--danger);background:rgba(239,68,68,.08);color:#FCA5A5;}

/* PAYMENT SYSTEM */
.pay-wrap{max-width:600px;margin:0 auto;padding:48px 40px;}
.pay-hero{text-align:center;margin-bottom:36px;}
.pay-lock-icon{font-size:56px;display:block;margin-bottom:16px;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;}
.pay-title{font-family:'Kanit',sans-serif;font-size:26px;font-weight:800;margin-bottom:8px;}
.pay-subtitle{font-size:14px;color:var(--muted);line-height:1.6;}
.pay-amount-card{background:linear-gradient(135deg,rgba(240,180,41,.1),rgba(0,180,166,.06));border:1px solid rgba(240,180,41,.25);border-radius:20px;padding:28px;margin-bottom:24px;position:relative;overflow:hidden;}
.pay-amount-card::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(240,180,41,.15),transparent 70%);pointer-events:none;}
.pay-deal-name{font-size:13px;color:var(--muted);margin-bottom:6px;}
.pay-deal-title{font-family:'Kanit',sans-serif;font-size:18px;font-weight:700;margin-bottom:20px;color:var(--white);}
.pay-breakdown{display:flex;flex-direction:column;gap:10px;}
.pay-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;}
.pay-row-label{color:var(--muted);}
.pay-row-val{font-family:'Kanit',sans-serif;font-weight:600;}
.pay-divider{height:1px;background:rgba(255,255,255,.08);margin:4px 0;}
.pay-total-row{display:flex;justify-content:space-between;align-items:center;background:rgba(240,180,41,.08);border-radius:10px;padding:14px 16px;margin-top:4px;}
.pay-total-label{font-size:14px;font-weight:600;color:var(--white);}
.pay-total-val{font-family:'Kanit',sans-serif;font-size:24px;font-weight:800;color:var(--gold-300);}
.pay-qr-card{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:28px;margin-bottom:20px;text-align:center;}
.pay-qr-tabs{display:flex;gap:0;background:var(--navy-800);border-radius:10px;padding:4px;margin-bottom:24px;}
.pay-qr-tab{flex:1;padding:9px;border-radius:7px;border:none;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;transition:all .2s;font-family:'Sarabun',sans-serif;}
.pay-qr-tab.active{background:var(--teal-500);color:var(--white);font-weight:600;}
.qr-container{position:relative;display:inline-block;margin-bottom:20px;}
.qr-canvas-wrap{background:white;border-radius:16px;padding:16px;display:inline-block;box-shadow:0 0 0 4px rgba(0,180,166,.3),0 16px 48px rgba(0,0,0,.4);}
.qr-logo-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:white;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.qr-amount-badge{background:var(--gold-300);color:var(--navy-900);font-family:'Kanit',sans-serif;font-size:15px;font-weight:800;padding:6px 20px;border-radius:999px;display:inline-block;margin-bottom:16px;}
.qr-bank-info{background:var(--navy-800);border-radius:12px;padding:16px;text-align:left;margin-bottom:16px;}
.qr-bank-row{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;}
.qr-bank-key{color:var(--muted);}
.qr-bank-val{font-weight:600;color:var(--white);}
.pay-timer{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:16px;}
.pay-timer-circle{width:48px;height:48px;position:relative;}
.pay-timer-circle svg{transform:rotate(-90deg);}
.pay-timer-circle .track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:4;}
.pay-timer-circle .prog{fill:none;stroke:var(--teal-500);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .9s linear;}
.pay-timer-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Kanit',sans-serif;font-size:13px;font-weight:700;}
.pay-timer-text{font-size:13px;color:var(--muted);}
.slip-zone{border:2px dashed rgba(0,180,166,.3);border-radius:14px;padding:32px 20px;text-align:center;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;}
.slip-zone:hover,.slip-zone.drag{border-color:var(--teal-500);background:rgba(0,180,166,.05);}
.slip-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.slip-preview{display:none;position:relative;}
.slip-preview img{width:100%;max-height:280px;object-fit:contain;border-radius:12px;border:2px solid var(--teal-500);}
.slip-ok-badge{position:absolute;top:10px;right:10px;background:var(--success);color:white;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;}
.pay-status-steps{display:flex;flex-direction:column;gap:0;margin-bottom:24px;}
.pss-item{display:flex;gap:14px;position:relative;padding-bottom:20px;}
.pss-item:last-child{padding-bottom:0;}
.pss-item:not(:last-child)::before{content:'';position:absolute;left:17px;top:34px;bottom:0;width:2px;background:rgba(255,255,255,.08);}
.pss-item.done::before{background:var(--teal-500);}
.pss-dot{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:1;}
.pss-item.done .pss-dot{background:rgba(0,180,166,.2);border:2px solid var(--teal-500);}
.pss-item.curr .pss-dot{background:rgba(240,180,41,.2);border:2px solid var(--gold-500);animation:glow 2s infinite;}
.pss-item.pend .pss-dot{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.12);}
.pss-content{padding-top:6px;}
.pss-title{font-size:14px;font-weight:600;margin-bottom:3px;}
.pss-item.curr .pss-title{color:var(--gold-300);}
.pss-item.pend .pss-title{color:var(--muted);}
.pss-sub{font-size:12px;color:var(--muted);}
.pay-success{text-align:center;padding:40px 20px;}
.pay-success-icon{font-size:80px;display:block;margin-bottom:20px;animation:pop .6s cubic-bezier(.34,1.56,.64,1) both;}
.pay-success-title{font-family:'Kanit',sans-serif;font-size:28px;font-weight:800;margin-bottom:10px;}
.pay-success-sub{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:32px;}
.pay-ref-box{background:var(--navy-800);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;}
.pay-ref-label{font-size:12px;color:var(--muted);}
.pay-ref-val{font-family:'Kanit',sans-serif;font-size:15px;font-weight:700;color:var(--teal-300);}
.escrow-lock-visual{background:linear-gradient(135deg,rgba(0,180,166,.08),rgba(240,180,41,.05));border:1px solid rgba(0,180,166,.2);border-radius:16px;padding:24px;margin-bottom:20px;display:flex;align-items:center;gap:16px;}
.escrow-lock-icon{font-size:40px;flex-shrink:0;}
.escrow-lock-text h4{font-family:'Kanit',sans-serif;font-size:16px;margin-bottom:4px;}
.escrow-lock-text p{font-size:13px;color:var(--muted);line-height:1.5;}

/* MODAL */
.modal{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);align-items:center;justify-content:center;}
.modal.open{display:flex;}
.mbox{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:36px;max-width:480px;width:90%;}
.mbox h3{font-family:'Kanit',sans-serif;font-size:22px;margin-bottom:8px;}
.mbox p{color:var(--muted);font-size:14px;margin-bottom:24px;}
.mfoot{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;}

/* TOAST */
.toast{position:fixed;bottom:28px;right:28px;z-index:999;background:var(--navy-600);border:1px solid var(--border);border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:12px;transform:translateY(80px);opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);max-width:320px;box-shadow:0 16px 48px rgba(0,0,0,.4);}
.toast.show{transform:translateY(0);opacity:1;}
.t-icon{font-size:22px;}
.t-msg{font-size:14px;line-height:1.5;}
.t-msg strong{display:block;font-family:'Kanit',sans-serif;font-size:15px;}
.fade-in{animation:fadeUp .5s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:768px){
nav{padding:0 16px;}
#line-profile-bar{padding:8px 16px;}
.hero{grid-template-columns:1fr;padding:40px 20px;gap:40px;}
.stat-cards{display:none;}
.fg3{grid-template-columns:1fr;}
.flow{flex-direction:column;gap:24px;}
.fs:not(:last-child)::after{display:none;}
.type-grid{grid-template-columns:repeat(2,1fr);}
.fr2{grid-template-columns:1fr;}
.dgrid{grid-template-columns:1fr;}
.party-video-grid{grid-template-columns:1fr;}
.deal-tr{flex-direction:column;gap:12px;}
.wrap,.dr,.hw,.sv{padding:32px 20px;}
.features{padding:40px 20px;}
.suc-box{padding:36px 24px;}
.sv-amount-row{flex-direction:column;gap:12px;}
.sv-amount-box,.sv-earn-box{width:100%;}
.sv-steps{gap:4px;}
.sv-step-label{font-size:10px;}
.sv-buyer-card{flex-wrap:wrap;}
.sv-done-box{padding:36px 24px;}
.sv-tracking-row{flex-direction:column;}
.prof-grid{grid-template-columns:1fr!important;}
.kyc-grid{grid-template-columns:1fr!important;}
.adm-layout{grid-template-columns:1fr!important;}
.adm-sidebar{display:none;}
}

/* ══════════════════════════════════════
   PROFILE PAGE
══════════════════════════════════════ */
.prof-wrap{max-width:860px;margin:0 auto;padding:48px 40px;}
.prof-header{background:linear-gradient(135deg,var(--navy-700),var(--navy-600));border:1px solid var(--border);border-radius:24px;padding:32px;margin-bottom:24px;display:flex;align-items:center;gap:24px;position:relative;overflow:hidden;}
.prof-header::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,180,166,.12),transparent 70%);}
.prof-av-wrap{position:relative;flex-shrink:0;}
.prof-av{width:88px;height:88px;border-radius:50%;background:var(--teal-100);border:3px solid var(--teal-500);display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden;}
.prof-av img{width:100%;height:100%;object-fit:cover;}
.prof-av-edit{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:var(--teal-500);border:2px solid var(--navy-800);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;}
.prof-info{flex:1;}
.prof-name{font-family:'Kanit',sans-serif;font-size:24px;font-weight:700;margin-bottom:4px;}
.prof-uid{font-size:13px;color:var(--muted);font-family:monospace;margin-bottom:10px;}
.prof-badges{display:flex;gap:8px;flex-wrap:wrap;}
.prof-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid;}
.pb-line{background:rgba(6,199,85,.1);color:#06C755;border-color:rgba(6,199,85,.25);}
.pb-kyc-none{background:rgba(239,68,68,.1);color:#FCA5A5;border-color:rgba(239,68,68,.25);}
.pb-kyc-pending{background:rgba(240,180,41,.1);color:var(--gold-300);border-color:rgba(240,180,41,.25);}
.pb-kyc-ok{background:rgba(34,197,94,.1);color:var(--success);border-color:rgba(34,197,94,.25);}
.prof-kyc-cta{margin-left:auto;text-align:center;flex-shrink:0;}
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}
.prof-section{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:28px;}
.prof-sec-title{font-family:'Kanit',sans-serif;font-size:17px;font-weight:600;margin-bottom:22px;display:flex;align-items:center;gap:10px;}
.prof-sec-title .sec-icon{width:34px;height:34px;border-radius:10px;background:var(--teal-100);border:1px solid rgba(0,180,166,.2);display:flex;align-items:center;justify-content:center;font-size:16px;}
.prof-field{margin-bottom:18px;}
.prof-field:last-child{margin-bottom:0;}
.prof-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.prof-row{display:flex;align-items:center;gap:10px;}
.prof-connected{display:flex;align-items:center;gap:12px;background:rgba(6,199,85,.07);border:1px solid rgba(6,199,85,.2);border-radius:12px;padding:12px 16px;}
.prof-connected-av{width:40px;height:40px;border-radius:50%;border:2px solid #06C755;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;}
.prof-connected-av img{width:100%;height:100%;object-fit:cover;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.toggle-row:last-child{border-bottom:none;}
.toggle-lbl{font-size:14px;}
.toggle-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.sw{position:relative;width:44px;height:24px;flex-shrink:0;}
.sw input{opacity:0;width:0;height:0;position:absolute;}
.sw-track{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:.3s;}
.sw-track::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;}
.sw input:checked + .sw-track{background:var(--teal-500);}
.sw input:checked + .sw-track::before{transform:translateX(20px);}

/* KYC Section */
.kyc-section{background:var(--navy-700);border:1px solid rgba(240,180,41,.25);border-radius:20px;padding:28px;margin-bottom:24px;}
.kyc-banner{background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.2);border-radius:12px;padding:14px 18px;margin-bottom:24px;display:flex;align-items:flex-start;gap:12px;}
.kyc-banner-icon{font-size:22px;flex-shrink:0;margin-top:1px;}
.kyc-banner-text{font-size:14px;line-height:1.65;}
.kyc-banner-text strong{display:block;font-family:'Kanit',sans-serif;font-size:15px;color:var(--gold-300);margin-bottom:3px;}
.kyc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.kyc-card{background:var(--navy-600);border:1px solid var(--border);border-radius:16px;padding:22px;}
.kyc-card-title{font-family:'Kanit',sans-serif;font-size:15px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.kyc-card-sub{font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.5;}
.kyc-upload-zone{border:2px dashed rgba(0,180,166,.25);border-radius:12px;padding:28px 16px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(0,180,166,.02);position:relative;}
.kyc-upload-zone:hover,.kyc-upload-zone.drag{border-color:var(--teal-500);background:var(--teal-100);}
.kyc-upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.kyc-upload-icon{font-size:36px;margin-bottom:10px;display:block;}
.kyc-upload-label{font-size:14px;font-weight:600;margin-bottom:4px;}
.kyc-upload-hint{font-size:12px;color:var(--muted);}
.kyc-uploaded{display:none;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:10px;padding:12px 14px;align-items:center;gap:12px;}
.kyc-uploaded.show{display:flex;}
.kyc-status-row{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--navy-600);border:1px solid var(--border);border-radius:12px;margin-bottom:20px;}
.kyc-status-badge{padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;}
.ksb-none{background:rgba(239,68,68,.12);color:#FCA5A5;}
.ksb-pending{background:rgba(240,180,41,.12);color:var(--gold-300);}
.ksb-ok{background:rgba(34,197,94,.12);color:var(--success);}

/* ══════════════════════════════════════
   ADMIN DASHBOARD
══════════════════════════════════════ */
.adm-wrap{max-width:1200px;margin:0 auto;padding:48px 40px;}
.adm-layout{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;}
.adm-sidebar{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:20px;position:sticky;top:88px;}
.adm-sidebar-title{font-family:'Kanit',sans-serif;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;padding:0 8px;margin-bottom:12px;}
.adm-menu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .2s;font-size:14px;color:var(--muted);border:none;background:transparent;width:100%;text-align:left;font-family:'Sarabun',sans-serif;}
.adm-menu-item:hover{background:rgba(255,255,255,.05);color:var(--white);}
.adm-menu-item.active{background:var(--teal-100);color:var(--teal-300);font-weight:600;}
.adm-menu-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:rgba(255,255,255,.05);}
.adm-menu-item.active .adm-menu-icon{background:rgba(0,180,166,.2);}
.adm-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;}
.adm-main{}
.adm-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.adm-stat{background:var(--navy-700);border:1px solid var(--border);border-radius:16px;padding:20px;}
.adm-stat-num{font-family:'Kanit',sans-serif;font-size:28px;font-weight:800;margin-bottom:4px;}
.adm-stat-lbl{font-size:12px;color:var(--muted);}
.adm-panel{background:var(--navy-700);border:1px solid var(--border);border-radius:20px;padding:24px;margin-bottom:20px;display:none;}
.adm-panel.active{display:block;}
.adm-panel-title{font-family:'Kanit',sans-serif;font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.adm-table{width:100%;border-collapse:collapse;}
.adm-table th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:0 12px 12px;border-bottom:1px solid rgba(255,255,255,.06);}
.adm-table td{padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.04);font-size:14px;vertical-align:middle;}
.adm-table tr:last-child td{border-bottom:none;}
.adm-table tr:hover td{background:rgba(255,255,255,.02);}
.adm-action-row{display:flex;gap:8px;}
.adm-btn-ok{padding:6px 14px;border-radius:7px;border:none;cursor:pointer;font-size:12px;font-weight:600;background:rgba(34,197,94,.15);color:var(--success);border:1px solid rgba(34,197,94,.3);transition:all .2s;font-family:'Kanit',sans-serif;}
.adm-btn-ok:hover{background:rgba(34,197,94,.25);}
.adm-btn-rej{padding:6px 14px;border-radius:7px;border:none;cursor:pointer;font-size:12px;font-weight:600;background:rgba(239,68,68,.1);color:#FCA5A5;border:1px solid rgba(239,68,68,.25);transition:all .2s;font-family:'Kanit',sans-serif;}
.adm-btn-rej:hover{background:rgba(239,68,68,.2);}
.adm-btn-view{padding:6px 14px;border-radius:7px;border:1px solid var(--border);cursor:pointer;font-size:12px;color:var(--muted);background:transparent;transition:all .2s;font-family:'Kanit',sans-serif;}
.adm-btn-view:hover{border-color:var(--teal-500);color:var(--teal-300);}
.adm-kyc-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--navy-500);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;}
.adm-avatar{width:36px;height:36px;border-radius:50%;background:var(--teal-100);border:1px solid rgba(0,180,166,.2);display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;flex-shrink:0;}
.adm-avatar img{width:100%;height:100%;object-fit:cover;}
.adm-search{width:100%;background:var(--navy-600);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 16px;color:var(--white);font-family:'Sarabun',sans-serif;font-size:14px;outline:none;margin-bottom:16px;}
.adm-search:focus{border-color:var(--teal-500);}
.adm-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.adm-ftag{padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:12px;cursor:pointer;transition:all .2s;font-family:'Sarabun',sans-serif;}
.adm-ftag.on{background:var(--teal-500);color:var(--navy-900);border-color:var(--teal-500);font-weight:600;}
.kyc-modal{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);align-items:center;justify-content:center;}
.kyc-modal.open{display:flex;}
.kyc-modal-box{background:var(--navy-700);border:1px solid var(--border);border-radius:24px;padding:36px;max-width:640px;width:90%;max-height:90vh;overflow-y:auto;}
.kyc-modal-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;}
.kyc-modal-img-card{background:var(--navy-600);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center;}
.kyc-modal-img-card img{width:100%;border-radius:8px;margin-bottom:8px;}
.kyc-modal-img-card span{font-size:12px;color:var(--muted);}
.adm-setting-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.adm-setting-row:last-child{border-bottom:none;}
.adm-setting-lbl{font-size:15px;font-weight:500;}
.adm-setting-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.adm-inp{background:var(--navy-600);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 12px;color:var(--white);font-family:'Sarabun',sans-serif;font-size:14px;outline:none;width:180px;}
.adm-inp:focus{border-color:var(--teal-500);}

/* ══════════════════════════════════════════════════════
   LANDING PAGE V2 — หน้า home ใหม่ (design v2)
   ══════════════════════════════════════════════════════ */
@keyframes lp2BgDrift{0%{transform:translate(-6%,-4%) scale(1);}50%{transform:translate(6%,5%) scale(1.15);}100%{transform:translate(-6%,-4%) scale(1);}}
@keyframes lp2BgDrift2{0%{transform:translate(5%,6%) scale(1.1);}50%{transform:translate(-7%,-5%) scale(1);}100%{transform:translate(5%,6%) scale(1.1);}}
@keyframes lp2FloatMascot{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-22px) rotate(1deg);}}
@keyframes lp2MascotGlow{0%,100%{opacity:.45;transform:scale(1);}50%{opacity:.75;transform:scale(1.08);}}
@keyframes lp2DashMove{to{stroke-dashoffset:-22;}}
@keyframes lp2VaultPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,180,166,.35);}50%{box-shadow:0 0 0 14px rgba(0,180,166,0);}}
@keyframes lp2CoinFlow{
  0%{left:8%;opacity:0;transform:translate(-50%,-50%) scale(.7);}
  8%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  38%{left:50%;opacity:1;}
  55%{left:50%;opacity:1;transform:translate(-50%,-50%) scale(1);}
  92%{left:92%;opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{left:92%;opacity:0;transform:translate(-50%,-50%) scale(.7);}
}

.lp2-hero{position:relative;overflow:hidden;background:linear-gradient(165deg,#F4F8FE 0%,#E9EFF8 45%,#DDE7F5 100%);padding:56px 26px 30px;}
.lp2-blob{position:absolute;border-radius:50%;filter:blur(24px);pointer-events:none;z-index:0;}
.lp2-blob1{top:-12%;left:-8%;width:60%;height:60vh;background:radial-gradient(circle,rgba(120,170,255,.28),transparent 62%);animation:lp2BgDrift 24s ease-in-out infinite;}
.lp2-blob2{top:8%;right:-14%;width:58%;height:58vh;background:radial-gradient(circle,rgba(0,180,166,.16),transparent 62%);animation:lp2BgDrift2 28s ease-in-out infinite;}
.lp2-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(90,130,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(90,130,200,.08) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 95% 70% at 50% 20%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 95% 70% at 50% 20%,#000 35%,transparent 80%);pointer-events:none;z-index:0;}

.lp2-hero-grid{position:relative;z-index:2;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;}
.lp2-hero-text{text-align:left;}
.lp2-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:rgba(0,180,166,.10);border:1px solid rgba(0,180,166,.35);font-size:12.5px;color:#067a6f;font-family:'Kanit',sans-serif;font-weight:500;margin-bottom:22px;}
.lp2-bdot{width:6px;height:6px;border-radius:50%;background:var(--teal-500);box-shadow:0 0 10px var(--teal-500);display:inline-block;}
.lp2-h1{font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(32px,6.2vw,60px);line-height:1.1;margin:0;letter-spacing:-.5px;color:#132441;}
.lp2-orange{color:#F97316;}
.lp2-desc{font-family:'Kanit',sans-serif;font-weight:500;font-size:clamp(15px,2.2vw,19px);line-height:1.6;color:#132441;margin:18px 0 0;max-width:540px;}
.lp2-hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}

.lp2-mascot-wrap{position:relative;height:320px;display:flex;align-items:center;justify-content:center;}
.lp2-bubble{position:absolute;top:-14px;left:-14%;z-index:2;width:min(230px,55%);}
.lp2-bubble-box{background:#FDFEFF;border:1.5px solid rgba(0,180,166,.35);border-radius:50%;padding:26px 22px;text-align:center;box-shadow:12px 14px 34px rgba(140,165,205,.4),-8px -8px 20px rgba(255,255,255,.9);font-size:13px;line-height:1.6;color:#31465F;}
.lp2-bubble-tail1{position:absolute;right:8%;bottom:-14px;width:16px;height:16px;border-radius:50%;background:#FDFEFF;border:1.5px solid rgba(0,180,166,.35);box-shadow:6px 8px 16px rgba(140,165,205,.35);}
.lp2-bubble-tail2{position:absolute;right:2%;bottom:-32px;width:9px;height:9px;border-radius:50%;background:#FDFEFF;border:1.5px solid rgba(0,180,166,.35);box-shadow:4px 6px 12px rgba(140,165,205,.35);}
.lp2-mascot-glow{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:62%;height:26px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,180,166,.5),transparent 70%);filter:blur(10px);animation:lp2MascotGlow 5s ease-in-out infinite;}
.lp2-mascot-img{position:relative;z-index:1;max-height:100%;max-width:100%;width:auto;filter:drop-shadow(0 24px 40px rgba(60,90,150,.35));animation:lp2FloatMascot 5s ease-in-out infinite;}

.lp2-carousel-sec{position:relative;background:linear-gradient(180deg,#DDE7F5 0%,#E9EFF8 100%);padding:30px 0 60px;}
.lp2-stage{position:relative;height:560px;perspective:1500px;overflow:hidden;max-width:1240px;margin:0 auto;}

.lp2-card{background:linear-gradient(160deg,#FDFEFF,#EFF4FC);border-radius:24px;padding:14px 14px 22px;}
.lp2-card-art{position:relative;height:250px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:20px;}
.lp2-soon-tag{position:absolute;top:14px;right:14px;font-family:'Kanit',sans-serif;font-size:11px;font-weight:600;letter-spacing:.5px;color:#EAF1F8;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);padding:4px 10px;border-radius:999px;}
.lp2-card-body{padding:20px 8px 0;}
.lp2-card-body h3{font-family:'Kanit',sans-serif;font-weight:600;font-size:20px;margin:0;color:#132441;}
.lp2-card-body p{font-size:14px;line-height:1.6;color:#5A6C87;margin:10px 0 0;min-height:44px;}
.lp2-card-cta{margin-top:18px;}

.lp2-primary-btn,.lp2-line-btn,.lp2-ghost-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;font-family:'Kanit',sans-serif;font-weight:600;font-size:15px;cursor:pointer;padding:13px 18px;border-radius:12px;border:none;}
.lp2-primary-btn{color:#06352f;background:linear-gradient(135deg,#00c9ba,#00B4A6);box-shadow:0 12px 30px -12px rgba(0,180,166,.8);}
.lp2-line-btn{color:#0b6b30;background:rgba(6,199,85,.14);border:1px solid rgba(6,199,85,.55);}
.lp2-line-badge{width:20px;height:20px;border-radius:6px;background:#06C755;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;}
.lp2-ghost-btn{font-weight:500;font-size:14px;cursor:not-allowed;color:#8A9BB3;background:rgba(30,60,110,.04);border:1px solid rgba(30,60,110,.10);}

.lp2-flow{position:relative;max-width:760px;margin:10px auto 0;height:150px;padding:0 26px;}
.lp2-flow-lines{position:absolute;inset:0;width:100%;height:100%;}
.lp2-dash{stroke:rgba(0,180,166,.5);stroke-width:2;stroke-dasharray:6 6;animation:lp2DashMove 1.2s linear infinite;}
.lp2-flow-node{position:absolute;top:66px;transform:translate(-50%,-50%);text-align:center;}
.lp2-flow-buyer{left:8%;}
.lp2-flow-vault{left:50%;}
.lp2-flow-seller{left:92%;}
.lp2-flow-av{width:56px;height:56px;margin:0 auto;border-radius:50%;background:#F4F8FE;border:1px solid rgba(30,60,110,.14);display:flex;align-items:center;justify-content:center;box-shadow:6px 6px 14px rgba(140,165,205,.35),-5px -5px 12px rgba(255,255,255,.9);}
.lp2-flow-vault-box{width:66px;height:66px;margin:0 auto;border-radius:18px;background:linear-gradient(150deg,#0e4f49,#0a2a30);border:1px solid rgba(0,180,166,.5);display:flex;align-items:center;justify-content:center;animation:lp2VaultPulse 3s ease-in-out infinite;}
.lp2-flow-lbl{margin-top:8px;font-size:13px;color:#31465F;font-family:'Kanit',sans-serif;white-space:nowrap;}
.lp2-flow-lbl-accent{color:#067a6f;font-weight:500;}
.lp2-flow-coin{position:absolute;top:66px;left:8%;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd873,#F0B429);display:flex;align-items:center;justify-content:center;font-family:'Kanit',sans-serif;font-weight:700;color:#5a3d00;box-shadow:0 6px 16px -4px rgba(240,180,41,.8);animation:lp2CoinFlow 5s ease-in-out infinite;z-index:3;}

.lp2-arrows{display:flex;justify-content:center;gap:14px;margin-top:14px;}
.lp2-arrow-btn{width:52px;height:52px;border-radius:50%;background:#F4F8FE;border:1px solid rgba(30,60,110,.14);color:#132441;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:6px 6px 14px rgba(140,165,205,.35),-5px -5px 12px rgba(255,255,255,.9);transition:background .2s,border-color .2s;}
.lp2-arrow-btn:hover{background:rgba(0,180,166,.12);border-color:rgba(0,180,166,.5);}

@media (max-width:820px){
  .lp2-hero-grid{grid-template-columns:1fr;text-align:center;}
  .lp2-hero-text{text-align:center;margin:0 auto;}
  .lp2-mascot-wrap{order:-1;height:240px;}
  .lp2-hero-btns{justify-content:center;}
}
@media (max-width:600px){
  .lp2-flow{display:none;}
}

/* ══════════════════════════════════════════════════════
   CREATE PAGE V2 — wizard 4 ขั้นตอน (design "Escrow deal")
   ══════════════════════════════════════════════════════ */
#page-create{background:linear-gradient(165deg,#F4F8FE 0%,#E9EFF8 45%,#DDE7F5 100%);}
.cr2{position:relative;max-width:760px;margin:0 auto;padding:18px 22px 90px;color:#132441;}
.cr2-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.cr2-backhome{font-family:'Kanit',sans-serif;font-size:13px;font-weight:500;color:#31465F;background:#F4F8FE;border:1px solid rgba(30,60,110,.16);border-radius:10px;padding:8px 14px;cursor:pointer;box-shadow:5px 5px 12px rgba(140,165,205,.3),-4px -4px 10px rgba(255,255,255,.9);}
.cr2-badge{display:inline-flex;align-items:center;gap:8px;font-family:'Kanit',sans-serif;font-size:12.5px;font-weight:500;color:#067a6f;background:rgba(0,180,166,.10);border:1px solid rgba(0,180,166,.35);border-radius:999px;padding:7px 14px;}
.cr2-bdot{width:7px;height:7px;border-radius:50%;background:var(--teal-500);animation:cr2PulseDot 1.8s ease-out infinite;}
@keyframes cr2PulseDot{0%,100%{box-shadow:0 0 0 0 rgba(0,180,166,.45);}60%{box-shadow:0 0 0 9px rgba(0,180,166,0);}}
@keyframes cr2FadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.cr2-progress{display:flex;align-items:flex-start;margin:14px 0 30px;}
.cr2-pstep{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;}
.cr2-pbar{position:absolute;top:17px;right:50%;width:100%;height:2px;background:rgba(30,60,110,.15);}
.cr2-pbar.done{background:var(--teal-500);}
.cr2-pcircle{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Kanit',sans-serif;font-weight:600;font-size:14px;background:#E2EAF6;color:#8896AC;border:2px solid transparent;transition:all .3s;}
.cr2-pcircle.curr{background:#fff;color:#067a6f;border-color:var(--teal-500);box-shadow:0 8px 20px -6px rgba(0,180,166,.6);}
.cr2-pcircle.done{background:var(--teal-500);color:#fff;}
.cr2-plabel{margin-top:8px;font-family:'Kanit',sans-serif;font-size:11.5px;font-weight:500;color:#8896AC;text-align:center;line-height:1.3;}
.cr2-plabel.on{color:#132441;}

.cr2-step{animation:cr2FadeUp .35s ease both;}
.cr2-h1{font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(24px,4vw,32px);margin:0;letter-spacing:-.3px;color:#132441;}
.cr2-sub{font-size:15px;color:#5A6C87;margin:8px 0 22px;line-height:1.6;}
.cr2-center{text-align:center;}

.cr2-type-stage{position:relative;height:420px;perspective:1400px;overflow:hidden;}
.cr2 .topt{background:linear-gradient(160deg,#FDFEFF,#EFF4FC);border-radius:22px;padding:12px 12px 20px;}
.cr2-tart{position:relative;height:190px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18px;}
.cr2-tbody{padding:18px 8px 0;text-align:left;}
.cr2-tbody h3{font-family:'Kanit',sans-serif;font-weight:600;font-size:19px;margin:0;color:#132441;}
.cr2-tbody p{font-size:13.5px;line-height:1.6;color:#5A6C87;margin:8px 0 0;min-height:42px;}
.cr2-tpicked{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-family:'Kanit',sans-serif;font-size:13px;font-weight:600;color:#067a6f;background:rgba(0,180,166,.12);border:1px solid rgba(0,180,166,.5);border-radius:999px;padding:7px 14px;}
.cr2-tpicked .cr2-tcheck{width:16px;height:16px;border-radius:50%;background:var(--teal-500);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;}
.cr2-arrows{display:flex;justify-content:center;gap:14px;margin-top:6px;}
.cr2-arrow-btn{width:48px;height:48px;border-radius:50%;background:#F4F8FE;border:1px solid rgba(30,60,110,.14);color:#132441;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:6px 6px 14px rgba(140,165,205,.35),-5px -5px 12px rgba(255,255,255,.9);transition:background .2s,border-color .2s;}
.cr2-arrow-btn:hover{background:rgba(0,180,166,.12);border-color:rgba(0,180,166,.5);}

.cr2-card{background:linear-gradient(150deg,#FBFDFF,#EFF4FC);border:1px solid rgba(30,60,110,.12);border-radius:22px;padding:26px 24px;box-shadow:12px 14px 34px rgba(140,165,205,.35),-8px -8px 20px #ffffff;display:flex;flex-direction:column;gap:18px;}
.cr2-field{display:flex;flex-direction:column;gap:7px;}
.cr2-field>span{font-family:'Kanit',sans-serif;font-weight:500;font-size:14px;color:#132441;}
.cr2-lbl{font-family:'Kanit',sans-serif;font-weight:500;font-size:14px;color:#132441;display:block;margin-bottom:8px;}
.cr2-inp{border:1.5px solid rgba(30,60,110,.16);border-radius:12px;padding:12px 14px;font-size:15px;background:#fff;color:#132441;font-family:'Sarabun',sans-serif;resize:vertical;}
.cr2-inp:focus{outline:none;border-color:rgba(0,180,166,.7);box-shadow:0 0 0 3px rgba(0,180,166,.15);}
.cr2-inp-amt{font-size:16px;font-weight:600;}
.cr2-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.cr2-creator{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(0,180,166,.35);border-radius:14px;padding:12px 16px;}
.cr2-creator-av{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--teal-500);}
.cr2-creator-info{flex:1;min-width:0;}
.cr2-creator-name{font-family:'Kanit',sans-serif;font-weight:600;font-size:15px;color:#132441;}
.cr2-creator-uid{font-size:11.5px;color:#8896AC;font-family:monospace;}
.cr2-creator-badge{font-family:'Kanit',sans-serif;font-size:12px;font-weight:500;color:#067a6f;background:rgba(0,180,166,.10);border:1px solid rgba(0,180,166,.35);border-radius:999px;padding:5px 11px;white-space:nowrap;}

.cr2-drop{display:block;border:1.5px dashed rgba(0,180,166,.55);border-radius:14px;padding:20px;text-align:center;cursor:pointer;background:rgba(0,180,166,.05);color:#067a6f;font-family:'Kanit',sans-serif;font-size:14px;}
.cr2-drop:hover{background:rgba(0,180,166,.1);}
.cr2-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.cr2-thumb{position:relative;}
.cr2-thumb img{width:82px;height:82px;object-fit:cover;border-radius:12px;border:1px solid rgba(30,60,110,.14);box-shadow:0 6px 16px rgba(140,165,205,.35);display:block;}
.cr2-thumb button{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:none;background:#132441;color:#fff;font-size:12px;cursor:pointer;line-height:1;}

.cr2 .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:0;}
.cr2 .chip{display:inline-flex;align-items:center;gap:9px;font-family:'Kanit',sans-serif;font-size:13.5px;font-weight:500;padding:10px 15px;border-radius:999px;cursor:pointer;transition:all .2s;color:#5A6C87;background:#fff;border:1.5px solid rgba(30,60,110,.16);}
.cr2 .chip:hover{transform:translateY(-2px);}
.cr2 .chip.on{color:#06352f;background:rgba(0,180,166,.14);border:1.5px solid rgba(0,180,166,.65);box-shadow:0 6px 16px -6px rgba(0,180,166,.5);}

.cr2-feecard{margin-top:18px;background:linear-gradient(150deg,#0e4f49,#0a2a30);border:1px solid rgba(0,180,166,.45);border-radius:22px;padding:22px 24px;color:#EAF6F4;box-shadow:0 18px 40px -18px rgba(10,42,48,.7);}
.cr2-feerow{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;padding:6px 0;}
.cr2-feerow>span:first-child{color:#9fc9c3;}
.cr2-feerow>span:last-child{font-weight:600;}
.cr2-feerow-mid{border-bottom:1px dashed rgba(0,180,166,.35);}
.cr2-fee-gold{color:#ffd873;}
.cr2-feenet{padding-top:12px;}
.cr2-feenet>span:first-child{font-family:'Kanit',sans-serif;font-weight:500;color:#EAF6F4;}
.cr2-feenet>span:last-child{font-family:'Kanit',sans-serif;font-weight:700;font-size:24px;color:#00d0c0;}

.cr2-sig-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.cr2-sig-head>span{font-family:'Kanit',sans-serif;font-weight:600;font-size:15px;color:#132441;}
.cr2-sig-btns{display:flex;gap:8px;}
.cr2-btn-clear{font-family:'Kanit',sans-serif;font-size:13px;font-weight:500;color:#8a2b1d;background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.4);border-radius:10px;padding:8px 14px;cursor:pointer;}
.cr2-btn-cam{font-family:'Kanit',sans-serif;font-size:13px;font-weight:500;color:#0b3a6b;background:rgba(60,130,246,.10);border:1px solid rgba(60,130,246,.4);border-radius:10px;padding:8px 14px;cursor:pointer;}
.cr2 .sig-wrap{background:#fff;border:1.5px dashed rgba(30,60,110,.28);border-radius:14px;height:190px;position:relative;overflow:hidden;}
.cr2 .sig-wrap canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;}
.cr2 .sig-hint{position:absolute;inset:0;transform:none;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#B9C4D6;font-size:14px;text-align:center;pointer-events:none;}
.cr2-sig-note{font-size:12.5px;color:#8896AC;}
.cr2-verified{display:inline-flex;align-items:center;gap:10px;background:rgba(0,180,166,.10);border:1px solid rgba(0,180,166,.4);border-radius:12px;padding:9px 14px;}
.cr2-verified img{width:36px;height:36px;object-fit:cover;border-radius:50%;border:2px solid var(--teal-500);background:#fff;}
.cr2-verified span{font-family:'Kanit',sans-serif;font-size:13.5px;font-weight:500;color:#067a6f;}

.cr2-contract-cap{display:flex;align-items:center;gap:10px;margin:24px 0 12px;}
.cr2-contract-cap span{height:1px;flex:1;background:rgba(30,60,110,.18);}
.cr2-contract-cap b{font-family:'Kanit',sans-serif;font-size:13px;font-weight:500;color:#5A6C87;letter-spacing:1px;}
.cr2-contract{position:relative;background:#fff;border:1px solid rgba(30,60,110,.14);border-radius:6px;box-shadow:0 24px 60px -24px rgba(19,36,65,.4),0 2px 0 #fff inset;padding:36px 34px;overflow:hidden;}
.cr2-ct-wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.cr2-ct-wm span{font-family:'Kanit',sans-serif;font-weight:700;font-size:110px;color:rgba(19,36,65,.03);transform:rotate(-24deg);letter-spacing:6px;white-space:nowrap;}
.cr2-ct-head{position:relative;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2.5px solid #132441;padding-bottom:18px;}
.cr2-ct-title{font-family:'Kanit',sans-serif;font-weight:700;font-size:18px;line-height:1.2;color:#132441;}
.cr2-ct-subtitle{font-size:11.5px;color:#5A6C87;letter-spacing:1.5px;}
.cr2-ct-meta{text-align:right;font-size:12.5px;color:#5A6C87;line-height:1.7;}
.cr2-ct-status{display:inline-block;font-family:'Kanit',sans-serif;font-size:11px;font-weight:600;color:#b06e00;background:rgba(224,154,16,.14);border-radius:999px;padding:3px 11px;}
.cr2-ct-parties{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
.cr2-ct-party{border:1px solid rgba(30,60,110,.14);border-radius:10px;padding:14px 16px;}
.cr2-ct-party-role{font-size:11px;letter-spacing:1.5px;color:#8896AC;font-weight:600;}
.cr2-ct-party-name{font-family:'Kanit',sans-serif;font-weight:600;font-size:15px;margin-top:5px;color:#132441;}
.cr2-ct-party-sub{font-size:12.5px;color:#5A6C87;margin-top:2px;}
.cr2-ct-sec{position:relative;margin-top:20px;}
.cr2-ct-sec-title{font-family:'Kanit',sans-serif;font-weight:600;font-size:14px;border-left:3px solid var(--teal-500);padding-left:10px;color:#132441;}
.cr2-ct-detail{font-size:13.5px;line-height:1.8;margin-top:8px;color:#31465F;}
.cr2-ct-detail .k{color:#8896AC;}
.cr2-ct-conds{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.cr2-ct-cond{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#31465F;}
.cr2-ct-cond span{width:17px;height:17px;border-radius:5px;background:rgba(0,180,166,.12);border:1.5px solid rgba(0,180,166,.6);color:#067a6f;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
.cr2-ct-imgs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.cr2-ct-imgs img{width:88px;height:88px;object-fit:cover;border-radius:8px;border:1px solid rgba(30,60,110,.16);}
.cr2-ct-feetable{margin-top:10px;border:1px solid rgba(30,60,110,.14);border-radius:10px;overflow:hidden;font-size:13.5px;}
.cr2-ct-feerow{display:flex;justify-content:space-between;padding:10px 16px;color:#132441;}
.cr2-ct-feerow .k{color:#5A6C87;}
.cr2-ct-feerow:first-child{background:#F7FAFF;}
.cr2-ct-feerow+.cr2-ct-feerow{border-top:1px solid rgba(30,60,110,.1);}
.cr2-ct-feerow.net{border-top:1.5px solid #132441;background:rgba(0,180,166,.06);}
.cr2-ct-feerow.net b{font-family:'Kanit',sans-serif;font-size:16px;color:#067a6f;}
.cr2-ct-sigs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;}
.cr2-ct-sigbox{text-align:center;}
.cr2-ct-sigarea{height:74px;display:flex;align-items:flex-end;justify-content:center;color:#B9C4D6;font-size:13px;font-style:italic;}
.cr2-ct-sigarea img{max-height:70px;max-width:100%;}
.cr2-ct-sigline{border-top:1.5px dotted #31465F;margin-top:4px;padding-top:7px;font-size:12.5px;color:#5A6C87;}
.cr2-ct-terms{position:relative;margin-top:22px;border-top:1px solid rgba(30,60,110,.12);padding-top:14px;font-size:11.5px;line-height:1.8;color:#8896AC;}

.cr2-auth-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:26px;}
.cr2-auth-lock{font-family:'Kanit',sans-serif;font-size:13px;font-weight:500;color:#8a2b1d;display:inline-flex;align-items:center;gap:6px;}
.cr2-auth-line-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Kanit',sans-serif;font-size:13px;font-weight:600;color:#fff;background:#06C755;border:none;border-radius:999px;padding:8px 16px;cursor:pointer;box-shadow:0 8px 18px -8px rgba(6,199,85,.8);}
.cr2-auth-line-btn:hover{transform:translateY(-1px);}
.cr2-auth-line-btn .lbadge{width:17px;height:17px;border-radius:5px;background:#fff;color:#06C755;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
.cr2-auth-ok{display:inline-flex;align-items:center;gap:8px;font-family:'Kanit',sans-serif;font-size:13px;font-weight:500;color:#067a6f;background:rgba(0,180,166,.10);border:1px solid rgba(0,180,166,.4);border-radius:999px;padding:7px 15px;}
.cr2-auth-ok .check{width:16px;height:16px;border-radius:50%;background:var(--teal-500);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;}

.cr2-nav{display:flex;gap:12px;margin-top:14px;}
.cr2-back{font-family:'Kanit',sans-serif;font-weight:500;font-size:15px;color:#31465F;background:#F4F8FE;border:1px solid rgba(30,60,110,.16);border-radius:14px;padding:15px 24px;cursor:pointer;box-shadow:6px 6px 16px rgba(140,165,205,.35),-5px -5px 12px #ffffff;}
.cr2-track{flex:1;position:relative;height:58px;border-radius:999px;overflow:hidden;user-select:none;background:linear-gradient(150deg,#E4EBF7,#D5DFF0);box-shadow:inset 4px 4px 10px rgba(140,165,205,.5),inset -4px -4px 10px #ffffff;}
.cr2-track.disabled{background:#DCE4F0;opacity:.7;}
.cr2-track-fill{position:absolute;inset:0;border-radius:999px;background:linear-gradient(135deg,#00c9ba,var(--teal-500));transform:translateX(-100%);transition:transform .3s ease;}
.cr2-track.dragging .cr2-track-fill{transition:none;}
.cr2-track-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Kanit',sans-serif;font-weight:600;font-size:15px;pointer-events:none;padding-left:34px;color:#31465F;}
.cr2-track.disabled .cr2-track-label{color:#8896AC;}
.cr2-handle{position:absolute;top:5px;left:5px;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;touch-action:none;background:linear-gradient(135deg,#00c9ba,var(--teal-500));color:#fff;cursor:grab;box-shadow:0 10px 24px -8px rgba(0,180,166,.85);transition:left .3s ease;}
.cr2-track.dragging .cr2-handle{transition:none;}
.cr2-track.disabled .cr2-handle{background:#c6d2e4;color:#8896AC;cursor:not-allowed;}
.cr2-submit-btn{width:100%;justify-content:center;margin-top:14px;font-size:16px;padding:15px;}

@media (max-width:600px){
  .cr2-grid2{grid-template-columns:1fr;}
  .cr2-ct-parties,.cr2-ct-sigs{grid-template-columns:1fr;}
  .cr2-contract{padding:24px 18px;}
}

/* ══════════════════════════════════════════════════════
   PROFILE PAGE — ธีมสว่างตาม mockup "Escrow profiles"
   scope ทั้งหมดใต้ .profile-wrap / .profile- prefix
   ══════════════════════════════════════════════════════ */
#page-profile{background:linear-gradient(165deg,#F4F8FE 0%,#E9EFF8 45%,#DDE7F5 100%);}
.profile-wrap{position:relative;max-width:1080px;margin:0 auto;padding:18px 24px 90px;color:#132441;display:flex;flex-direction:column;gap:20px;}
.profile-head{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.profile-backhome{font-family:'Kanit',sans-serif;font-size:13px;font-weight:500;color:#31465F;background:#F4F8FE;border:1px solid rgba(30,60,110,.16);border-radius:10px;padding:8px 14px;cursor:pointer;box-shadow:5px 5px 12px rgba(140,165,205,.3),-4px -4px 10px rgba(255,255,255,.9);}
.profile-h1{font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,30px);margin:0;letter-spacing:-.3px;color:#132441;}
.profile-sub{font-size:15px;color:#5A6C87;margin:6px 0 0;}

.profile-idcard{background:linear-gradient(150deg,#FBFDFF,#EFF4FC);border:1px solid rgba(30,60,110,.12);border-radius:22px;padding:24px 26px;box-shadow:12px 14px 34px rgba(140,165,205,.35),-8px -8px 20px #ffffff;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.profile-av{width:84px;height:84px;border-radius:50%;background:#fff;border:3px solid var(--teal-500);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -12px rgba(0,180,166,.7);flex-shrink:0;overflow:hidden;font-size:40px;}
.profile-av img{width:64px;height:64px;object-fit:contain;border-radius:50%;}
.profile-idinfo{flex:1;min-width:220px;}
.profile-name{font-family:'Kanit',sans-serif;font-weight:600;font-size:22px;color:#132441;}
.profile-uid{font-size:12.5px;color:#8896AC;font-family:monospace;margin-top:3px;word-break:break-all;}
.profile-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;}
.profile-badge{display:inline-flex;align-items:center;gap:7px;font-family:'Kanit',sans-serif;font-size:12.5px;font-weight:500;border-radius:999px;padding:6px 13px;}
.profile-badge-line{color:#0b6b30;background:rgba(6,199,85,.12);border:1px solid rgba(6,199,85,.5);}
.profile-bdot{width:7px;height:7px;border-radius:50%;background:#06C755;animation:cr2PulseDot 1.8s ease-out infinite;}
/* badge KYC — class ถูกเขียนทับโดย updateKycBadge() ใน app.js จึง restyle ของเดิมแบบ scoped */
.profile-wrap .prof-badge{display:inline-flex;align-items:center;gap:5px;font-family:'Kanit',sans-serif;font-size:12.5px;font-weight:500;border-radius:999px;padding:6px 13px;border:1px solid;}
.profile-wrap .pb-kyc-none{color:#b06e00;background:rgba(224,154,16,.14);border-color:rgba(224,154,16,.5);}
.profile-wrap .pb-kyc-pending{color:#0b3a6b;background:rgba(60,130,246,.12);border-color:rgba(60,130,246,.5);}
.profile-wrap .pb-kyc-ok{color:#067a6f;background:rgba(0,180,166,.12);border-color:rgba(0,180,166,.5);}
.profile-kyc-cta{text-align:center;}
.profile-cta-sub{font-size:11.5px;color:#8896AC;margin-top:6px;}

.profile-btn-teal{font-family:'Kanit',sans-serif;font-weight:600;font-size:14.5px;color:#06352f;background:linear-gradient(135deg,#00c9ba,var(--teal-500));border:none;border-radius:14px;padding:13px 22px;cursor:pointer;box-shadow:0 12px 28px -12px rgba(0,180,166,.8);transition:transform .2s;white-space:nowrap;}
.profile-btn-teal:hover{transform:translateY(-2px);}
.profile-btn-save{align-self:flex-start;border-radius:12px;padding:12px 22px;}
.profile-btn-ghost{font-family:'Kanit',sans-serif;font-size:12px;font-weight:500;color:#31465F;background:#F4F8FE;border:1px solid rgba(30,60,110,.16);border-radius:9px;padding:6px 13px;cursor:pointer;}
.profile-btn-line{display:inline-flex;align-items:center;gap:7px;font-family:'Kanit',sans-serif;font-size:13px;font-weight:600;color:#fff;background:#06C755;border:none;border-radius:999px;padding:9px 17px;cursor:pointer;box-shadow:0 8px 18px -8px rgba(6,199,85,.8);transition:transform .2s;}
.profile-btn-line:hover{transform:translateY(-1px);}
.profile-lbadge{width:17px;height:17px;border-radius:5px;background:#fff;color:#06C755;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.profile-line-ok .profile-lbadge{background:#06C755;color:#fff;width:16px;height:16px;font-size:9px;border-radius:5px;}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;}
.profile-card{background:linear-gradient(150deg,#FBFDFF,#EFF4FC);border:1px solid rgba(30,60,110,.12);border-radius:22px;padding:24px;box-shadow:12px 14px 34px rgba(140,165,205,.35),-8px -8px 20px #ffffff;display:flex;flex-direction:column;gap:16px;}
.profile-sec-h{font-family:'Kanit',sans-serif;font-weight:600;font-size:17px;margin:0;border-left:3px solid var(--teal-500);padding-left:10px;color:#132441;}
.profile-field{display:flex;flex-direction:column;gap:6px;}
.profile-field>span{font-family:'Kanit',sans-serif;font-weight:500;font-size:13.5px;color:#132441;}
.profile-dim{color:#8896AC;font-weight:400;font-style:normal;}
.profile-inp{border:1.5px solid rgba(30,60,110,.16);border-radius:12px;padding:11px 14px;font-size:14.5px;background:#fff;color:#132441;font-family:'Sarabun',sans-serif;}
.profile-inp:focus{outline:none;border-color:rgba(0,180,166,.7);box-shadow:0 0 0 3px rgba(0,180,166,.15);}
.profile-uid-box{border:1.5px dashed rgba(30,60,110,.2);border-radius:12px;padding:11px 14px;font-size:13px;background:#F2F6FC;color:#8896AC;font-family:monospace;word-break:break-all;}
.profile-secrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.profile-field-lbl{font-family:'Kanit',sans-serif;font-weight:500;font-size:13.5px;color:#132441;}
.profile-line-ok{display:flex;align-items:center;gap:10px;background:rgba(6,199,85,.08);border:1px solid rgba(6,199,85,.4);border-radius:999px;padding:7px 16px 7px 10px;}
.profile-line-av{width:30px;height:30px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#06C755;flex-shrink:0;}
.profile-line-cname{font-family:'Kanit',sans-serif;font-size:13px;font-weight:600;color:#0b6b30;}
.profile-line-csub{font-size:11.5px;color:#0b6b30;opacity:.8;}
.profile-divider{height:1px;background:rgba(30,60,110,.1);}
.profile-pinrow{display:flex;gap:10px;}
.profile-pin-inp{flex:1;min-width:0;font-size:18px;letter-spacing:8px;text-align:center;}
.profile-hint{font-size:12px;color:#8896AC;font-family:'Sarabun',sans-serif;font-weight:400;}
.profile-toggles{display:flex;flex-direction:column;gap:12px;}
.profile-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.profile-toggle-row>span{font-size:14px;color:#31465F;}
/* toggle เดิม (.sw) restyle เป็นโทนสว่าง */
.profile-wrap .sw{width:46px;height:26px;}
.profile-wrap .sw-track{background:#C9D4E6;border-radius:999px;}
.profile-wrap .sw-track::before{width:20px;height:20px;box-shadow:0 2px 6px rgba(19,36,65,.3);}
.profile-wrap .sw input:checked + .sw-track{background:linear-gradient(135deg,#00c9ba,var(--teal-500));}

.profile-stats{background:linear-gradient(150deg,#0e4f49,#0a2a30);border:1px solid rgba(0,180,166,.45);border-radius:22px;padding:24px 26px;color:#EAF6F4;box-shadow:0 18px 40px -18px rgba(10,42,48,.7);}
.profile-stats h2{font-family:'Kanit',sans-serif;font-weight:600;font-size:16px;margin:0 0 16px;color:#9fc9c3;}
.profile-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.profile-stat{border-left:2px solid rgba(0,180,166,.5);padding-left:14px;}
.profile-stat-num{font-family:'Kanit',sans-serif;font-weight:700;font-size:28px;color:#EAF6F4;}
.profile-stat-teal{color:#00d0c0;}
.profile-stat-gold{color:#ffd873;}
.profile-stat-lbl{font-size:13px;color:#9fc9c3;margin-top:2px;}

.profile-kyc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
/* badge สถานะ KYC — class ถูกสลับโดย updateKycBadge() จึง restyle scoped */
.profile-wrap .kyc-status-badge{display:inline-flex;align-items:center;font-family:'Kanit',sans-serif;font-size:12.5px;font-weight:500;border-radius:999px;padding:6px 13px;border:1px solid;}
.profile-wrap .ksb-none{color:#b06e00;background:rgba(224,154,16,.14);border-color:rgba(224,154,16,.5);}
.profile-wrap .ksb-pending{color:#0b3a6b;background:rgba(60,130,246,.12);border-color:rgba(60,130,246,.5);}
.profile-wrap .ksb-ok{color:#067a6f;background:rgba(0,180,166,.12);border-color:rgba(0,180,166,.5);}
.profile-kyc-banner{display:flex;gap:12px;align-items:flex-start;background:rgba(0,180,166,.07);border:1px solid rgba(0,180,166,.3);border-radius:14px;padding:14px 16px;}
.profile-kyc-banner svg{flex-shrink:0;margin-top:1px;}
.profile-kyc-banner p{margin:0;font-size:13.5px;line-height:1.7;color:#31465F;}
.profile-kyc-statusrow{display:flex;align-items:center;gap:12px;}
.profile-kyc-st{font-family:'Kanit',sans-serif;font-size:14px;font-weight:600;color:#132441;}
.profile-kyc-ssub{font-size:12px;color:#8896AC;}
.profile-kyc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:16px;}
.profile-kyc-drop{position:relative;border:1.5px dashed rgba(0,180,166,.55);border-radius:16px;padding:18px;text-align:center;cursor:pointer;background:rgba(0,180,166,.04);min-height:150px;}
.profile-kyc-drop:hover{background:rgba(0,180,166,.09);}
.profile-kyc-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.profile-kyc-drop svg{display:block;margin:14px auto 8px;}
.profile-kyc-drop-lbl{display:block;font-family:'Kanit',sans-serif;font-weight:600;font-size:14.5px;color:#132441;}
.profile-kyc-drop-hint{display:block;font-size:12px;color:#8896AC;margin-top:6px;}
.profile-kyc-uploaded{display:none;align-items:center;gap:12px;border:1.5px solid rgba(0,180,166,.5);border-radius:16px;padding:12px 14px;background:rgba(0,180,166,.06);}
.profile-kyc-uploaded.show{display:flex;}
.profile-kyc-thumb{width:64px;height:48px;border-radius:8px;background:#E2EAF6;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;}
.profile-kyc-thumb img{width:100%;height:100%;object-fit:cover;}
.profile-kyc-upinfo{flex:1;min-width:0;}
.profile-kyc-upinfo>div:first-child{font-family:'Kanit',sans-serif;font-size:13px;font-weight:600;color:#067a6f;}
.profile-kyc-fname{font-size:11.5px;color:#8896AC;word-break:break-all;}
.profile-kyc-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8896AC;margin-bottom:16px;}
.profile-kyc-note svg{flex-shrink:0;}
.profile-kyc-submit{align-self:flex-start;width:auto;font-size:15px;padding:14px 26px;border-radius:13px;}
.profile-kyc-submit:disabled{background:#DCE4F0;color:#8896AC;cursor:not-allowed;box-shadow:none;transform:none;}

.profile-mydeals{display:flex;align-items:center;gap:16px;background:linear-gradient(150deg,#FBFDFF,#EFF4FC);border:1px solid rgba(0,180,166,.35);border-radius:22px;padding:18px 22px;box-shadow:12px 14px 34px rgba(140,165,205,.35),-8px -8px 20px #ffffff;cursor:pointer;transition:transform .2s,border-color .2s;}
.profile-mydeals:hover{transform:translateY(-2px);border-color:rgba(0,180,166,.6);}
.profile-mydeals-ico{width:48px;height:48px;border-radius:14px;background:rgba(0,180,166,.10);border:1px solid rgba(0,180,166,.35);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.profile-mydeals-info{flex:1;min-width:0;}
.profile-mydeals-title{font-family:'Kanit',sans-serif;font-weight:600;font-size:16px;color:#132441;}
.profile-mydeals-sub{font-size:13px;color:#5A6C87;margin-top:2px;}

.profile-danger{background:rgba(229,72,77,.04);border:1.5px solid rgba(229,72,77,.35);border-radius:22px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.profile-danger h2{font-family:'Kanit',sans-serif;font-weight:600;font-size:16px;margin:0;color:#c22a30;}
.profile-danger p{margin:5px 0 0;font-size:13.5px;color:#8a5a5c;}
.profile-btn-danger{font-family:'Kanit',sans-serif;font-weight:600;font-size:14px;color:#c22a30;background:transparent;border:1.5px solid rgba(229,72,77,.6);border-radius:12px;padding:11px 22px;cursor:pointer;transition:all .2s;}
.profile-btn-danger:hover{background:#c22a30;color:#fff;}

@media (max-width:600px){
  .profile-idcard{flex-direction:column;text-align:center;}
  .profile-idinfo{min-width:0;}
  .profile-badges{justify-content:center;}
}

/* ══════════════════════════════════════════════════════
   CONTRACT PAGE — หน้าสัญญา A4 สำหรับคู่สัญญาเปิดลิงก์ดีล
   ══════════════════════════════════════════════════════ */
#page-contract{background:linear-gradient(165deg,#F4F8FE 0%,#E9EFF8 45%,#DDE7F5 100%);}
.ct-note{margin-bottom:16px;padding:14px 18px;border-radius:14px;font-family:'Kanit',sans-serif;font-size:14px;font-weight:500;line-height:1.6;text-align:center;}
.ct-note.ct-note-info{background:rgba(60,130,246,.10);border:1px solid rgba(60,130,246,.4);color:#0b3a6b;}
.ct-note.ct-note-warn{background:rgba(224,154,16,.12);border:1px solid rgba(224,154,16,.5);color:#b06e00;}
.ct-note.ct-note-danger{background:rgba(229,72,77,.08);border:1px solid rgba(229,72,77,.4);color:#c22a30;}
.ct-note.ct-note-ok{background:rgba(0,180,166,.10);border:1px solid rgba(0,180,166,.4);color:#067a6f;}
.ct-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.ct-btn-accept{font-family:'Kanit',sans-serif;font-weight:600;font-size:16px;color:#06352f;background:linear-gradient(135deg,#00c9ba,var(--teal-500));border:none;border-radius:14px;padding:16px 24px;cursor:pointer;box-shadow:0 12px 28px -12px rgba(0,180,166,.8);transition:transform .2s;}
.ct-btn-accept:hover{transform:translateY(-2px);}
.ct-btn-amend{font-family:'Kanit',sans-serif;font-weight:500;font-size:14.5px;color:#0b3a6b;background:rgba(60,130,246,.10);border:1px solid rgba(60,130,246,.45);border-radius:14px;padding:13px 24px;cursor:pointer;transition:transform .2s;}
.ct-btn-amend:hover{transform:translateY(-1px);}
.ct-btn-reject{font-family:'Kanit',sans-serif;font-weight:500;font-size:14px;color:#c22a30;background:transparent;border:1.5px solid rgba(229,72,77,.5);border-radius:14px;padding:12px 24px;cursor:pointer;transition:all .2s;}
.ct-btn-reject:hover{background:rgba(229,72,77,.08);}
/* diff แสดงค่าเดิมขีดฆ่า + ค่าใหม่เน้น (ใช้ตอนมีตัวแก้สัญญา) */
.ct-old{text-decoration:line-through;color:#B9C4D6;margin-right:8px;}
.ct-new{font-weight:700;color:#b05c00;background:rgba(249,115,22,.12);border-radius:5px;padding:1px 6px;}