/* =========================================================
   Gilded Night — UI redesign layer (presentation only)
   โหลดต่อจาก style.css / gold.css  ไม่แตะ id / logic ใดๆ
   ========================================================= */
@property --sp{syntax:'<number>';inherits:false;initial-value:0}

:root{
  --bg:#06070a;
  --gold:#e8be46;
  --gold-light:#ffe08a;
  --gold-deep:#b8862a;
  --text:#f5f2ea;
  --muted:#a6a296;
  --green:#3ddc97;
  --red:#ff6b7a;
  --stroke:rgba(255,255,255,.08);
  --stroke-gold:rgba(232,190,70,.38);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font:"Prompt","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --fill:linear-gradient(155deg,rgba(30,32,42,.78),rgba(13,14,20,.82));
  --edge:linear-gradient(140deg,rgba(255,224,138,.55),rgba(255,255,255,.07) 38%,rgba(232,190,70,.22) 100%);
}

html{scroll-padding-top:16px}
body{
  background:var(--bg) !important;
  color:var(--text);
  font-family:var(--font) !important;
  position:relative;
  min-height:100vh;
}
button,input,select{font-family:var(--font) !important}

/* ---------- Aurora background ---------- */
.fx-aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(1200px 600px at 50% -10%,rgba(232,190,70,.10),transparent 60%),var(--bg)}
.fx-aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.fx-aurora i:nth-child(1){width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;
  background:radial-gradient(circle,rgba(232,190,70,.55),transparent 65%);animation:fx-drift-a 26s ease-in-out infinite alternate}
.fx-aurora i:nth-child(2){width:40vmax;height:40vmax;right:-14vmax;top:22vh;
  background:radial-gradient(circle,rgba(61,220,151,.28),transparent 65%);animation:fx-drift-b 32s ease-in-out infinite alternate}
.fx-aurora i:nth-child(3){width:38vmax;height:38vmax;left:10vw;bottom:-16vmax;
  background:radial-gradient(circle,rgba(124,92,255,.26),transparent 65%);animation:fx-drift-c 29s ease-in-out infinite alternate}
.fx-aurora::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%)}
@keyframes fx-drift-a{to{transform:translate3d(14vw,10vh,0) scale(1.15)}}
@keyframes fx-drift-b{to{transform:translate3d(-12vw,-8vh,0) scale(1.1)}}
@keyframes fx-drift-c{to{transform:translate3d(10vw,-12vh,0) scale(1.2)}}


/* ---------- Typography ---------- */
.gold-hero h1{color:var(--gold-light) !important;text-shadow:0 0 28px rgba(232,190,70,.35)}
.container>h1{
  background:linear-gradient(100deg,#fff2b8 0%,#e8be46 35%,#fff2b8 55%,#c9962b 100%) !important;
  background-size:220% 100% !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  letter-spacing:.2px;animation:fx-shine 7s linear infinite;
}
@keyframes fx-shine{to{background-position:-220% 0}}
.subtitle{color:var(--muted)}
.subtitle::after{width:80px;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:fx-breathe 3.2s ease-in-out infinite}
@keyframes fx-breathe{50%{width:140px;opacity:.7}}

/* ---------- Glass surfaces (gradient border + pointer spotlight) ---------- */
.card,.gold-card,.result-card,.stat-box,.gold-stat,.market-box,.lot-item,.news-item,.salary-item,.prediction-card,.quick-card{
  border:1px solid transparent !important;
  background:
    radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,214,120,calc(var(--sp) * .13)),transparent 46%) padding-box,
    var(--fill) padding-box,
    var(--edge) border-box !important;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.015),inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition:--sp .45s ease,transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card:hover,.gold-card:hover,.result-card:hover,.stat-box:hover,.gold-stat:hover,.market-box:hover,.lot-item:hover,.news-item:hover{--sp:1}
.card,.gold-card{border-radius:26px !important}
.card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media(hover:hover){
  .result-card:hover,.stat-box:hover,.gold-stat:hover,.market-box:hover,.lot-item:hover,.news-item:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 56px -22px rgba(0,0,0,.9),0 0 36px -8px rgba(232,190,70,.28),inset 0 1px 0 rgba(255,255,255,.09) !important}
}
.card h2,.section-head h2{
  color:var(--gold-light) !important;letter-spacing:.2px;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}
.section-head h2{border-bottom:0 !important}

/* ---------- Result cards (hero + 2x2, เรียงเท่ากันทุกจอ) ---------- */
.results{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important;align-items:stretch}
.result-card{padding:20px 18px !important;border-radius:22px !important;--ac:232,190,70;display:flex;flex-direction:column;justify-content:center;min-width:0}
/* จำนวนการ์ดเป็นเลขคี่: ใบแรกเต็มแถว ที่เหลือเรียง 2 ช่อง · เลขคู่: 2 ช่องทั้งหมด */
.results.odd .result-card:first-child{grid-column:1/-1;padding:24px 22px !important}
.result-card::before{left:18px !important;right:auto !important;top:0 !important;width:38px;height:3px !important;border-radius:0 0 4px 4px;
  background:rgb(var(--ac)) !important;box-shadow:0 0 12px rgb(var(--ac));opacity:1 !important;animation:fx-neon 3s ease-in-out infinite}
.result-card::after{content:"";position:absolute;right:-34px;top:-34px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--ac),.26),transparent 70%);pointer-events:none;animation:fx-orb 6s ease-in-out infinite alternate}
.result-card h3{color:rgb(var(--ac)) !important;font-size:15px !important;letter-spacing:.2px;margin-bottom:8px !important;overflow-wrap:anywhere}
.result-card p{font-size:17px !important;font-weight:600;color:#fff !important;font-variant-numeric:tabular-nums;line-height:1.6 !important}
.results.odd .result-card:first-child p{font-size:22px !important}
@media(max-width:700px){
  .result-card{padding:17px 14px !important}
  .result-card p{font-size:15px !important}
  .results.odd .result-card:first-child p{font-size:20px !important}
}

/* นีออนมุมซ้ายบนของการ์ด: หายใจ + เรืองแสงเบาๆ */
@keyframes fx-neon{
  0%,100%{width:30px;opacity:.75;box-shadow:0 0 6px rgb(var(--ac)),0 0 0 rgba(var(--ac),0)}
  50%{width:56px;opacity:1;box-shadow:0 0 14px rgb(var(--ac)),0 0 26px rgba(var(--ac),.55)}
}
@keyframes fx-orb{to{transform:translate(-10px,12px) scale(1.25);opacity:.7}}

/* ---------- Stats ---------- */
.stat-box{border-radius:22px !important;min-height:132px;--ac:232,190,70;min-width:0}
.stat-box.wide{grid-column:1/-1}
.stat-box:first-child{min-height:110px}
.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;align-items:stretch}
.stat-box::before{content:"";position:absolute;left:18px;top:0;width:34px;height:3px;border-radius:0 0 4px 4px;background:rgb(var(--ac));
  box-shadow:0 0 12px rgb(var(--ac));animation:fx-neon 3s ease-in-out infinite}
.stat-box:nth-child(2n)::before{animation-delay:-.7s}.stat-box:nth-child(3n)::before{animation-delay:-1.4s}.stat-box:nth-child(5n)::before{animation-delay:-2.1s}
.stat-box::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--ac),.2),transparent 70%);animation:fx-orb 7s ease-in-out infinite alternate}
.stat-box .stat-portfolio{display:grid;grid-template-columns:1fr;max-width:360px;margin-left:auto;margin-right:auto;width:100%}
.stat-box p[hidden]{display:none}
.stat-box span{color:#cfcabb !important}
.stat-box h3{color:#fff !important;font-variant-numeric:tabular-nums}
.stat-box p{color:rgb(var(--ac)) !important}
.gold-portfolio-card{background:radial-gradient(circle at 100% 0%,rgba(232,190,70,.22),transparent 55%) padding-box,var(--fill) padding-box,var(--edge) border-box !important}

/* ---------- Forms ---------- */
label{color:#e9cd7a !important;font-weight:500;letter-spacing:.2px}
input,select{
  background-color:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:14px !important;color:#fff !important;min-height:48px;
  transition:border-color .25s ease,box-shadow .3s ease,background-color .25s ease,transform .25s var(--ease) !important;
}
input:hover,select:hover{border-color:rgba(232,190,70,.4) !important}
input:focus,select:focus{
  border-color:var(--gold) !important;background-color:rgba(232,190,70,.06) !important;
  box-shadow:0 0 0 4px rgba(232,190,70,.16),0 8px 24px -10px rgba(232,190,70,.5) !important;
}
input[readonly]{opacity:.8;border-style:dashed !important}
.year-filter,.lot-navigator select{border-color:rgba(232,190,70,.5) !important}
.salary-preview{transition:color .3s ease}

/* ---------- Buttons ---------- */
button{
  position:relative;
  background:linear-gradient(110deg,#ffe08a 0%,#e8be46 40%,#c9962b 70%,#ffe08a 100%);
  background-size:220% 100%;background-position:0 0;
  color:#1a1300;border-radius:14px;min-height:46px;font-weight:600;
  box-shadow:0 10px 24px -10px rgba(232,190,70,.65),inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-position .6s var(--ease),filter .25s ease,box-shadow .3s ease;
}
button:hover{background-position:100% 0;filter:none}
.card button:hover,.gold-card button:hover{box-shadow:0 14px 30px -10px rgba(232,190,70,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.card button:active,.gold-card button:active{transform:scale(.97)}
.btn-secondary,.btn-save-month,.chart-tab,.chart-action-btn,.chart-tool-btn,.news-tab,.contract-opt:not(.active){
  background:rgba(255,255,255,.04) !important;color:var(--gold-light) !important;
  border:1px solid rgba(232,190,70,.4) !important;box-shadow:none !important;
}
.btn-secondary:hover,.btn-save-month:hover,.chart-tab:hover,.chart-action-btn:hover,.chart-tool-btn:hover,.news-tab:hover,.contract-opt:hover{
  background:rgba(232,190,70,.12) !important;border-color:var(--gold) !important}
.chart-tab.active,.chart-tool-btn.active,.news-tab.active,.contract-opt.active{
  background:linear-gradient(110deg,#ffe08a,#e8be46 60%,#c9962b) !important;color:#1a1300 !important;
  border-color:transparent !important;box-shadow:0 8px 20px -8px rgba(232,190,70,.8) !important}
.btn-danger,.small-danger-btn,.delete-lot{
  background:rgba(255,107,122,.08) !important;color:#ff9aa5 !important;
  border:1px solid rgba(255,107,122,.45) !important;box-shadow:none !important}
.btn-danger:hover,.small-danger-btn:hover,.delete-lot:hover{background:rgba(255,107,122,.18) !important}
.contract-opt{transition:background .3s ease,transform .35s var(--spring),box-shadow .3s ease !important}
.contract-opt.active{transform:translateY(-2px)}
.simulate-btn{border-radius:14px !important}
@media(hover:hover){.simulate-btn:hover{transform:translateY(-2px)}}

/* ripple (JS adds .fx-ripple-host + span) */
.fx-ripple-host{overflow:hidden}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);
  animation:fx-ripple .65s ease-out forwards}
.btn-secondary .fx-ripple,.btn-save-month .fx-ripple,.chart-tab .fx-ripple{background:rgba(232,190,70,.4)}
@keyframes fx-ripple{to{transform:scale(1);opacity:0}}

/* ---------- Progress ---------- */
.progress-container{height:16px !important;background:rgba(255,255,255,.07) !important;box-shadow:inset 0 2px 6px rgba(0,0,0,.6) !important}
.progress-bar{
  position:relative;overflow:hidden;transition:width 1.1s var(--ease) !important;
  background:linear-gradient(90deg,#b8862a,#e8be46,#ffe08a) !important;
  box-shadow:0 0 18px rgba(232,190,70,.7) !important;
}
.progress-bar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-100%);animation:fx-sweep 2.4s ease-in-out infinite}
@keyframes fx-sweep{to{transform:translateX(100%)}}
#progressText{background:linear-gradient(100deg,#fff2b8,#e8be46);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Results of tools ---------- */
#convertResult,#remitResult,.simulate-result,.lot-preview,.buy-calc-result{
  background:rgba(232,190,70,.07) !important;border:1px dashed rgba(232,190,70,.45) !important;border-radius:16px !important}
.chart-box,.chart-panel,.chart-wrap{border-radius:18px !important;border-color:rgba(255,255,255,.08) !important}
.history-item{background:var(--fill) !important;border:1px solid rgba(255,255,255,.08) !important;border-left:3px solid var(--gold) !important;border-radius:16px !important}
.history-item button{background:rgba(255,107,122,.1) !important;color:#ff9aa5 !important;border:1px solid rgba(255,107,122,.45) !important;min-height:36px}
#contractResult>div{background:rgba(232,190,70,.06) !important;border:1px solid rgba(232,190,70,.4) !important;border-radius:16px !important}

/* ---------- Gold page ---------- */
.gold-container{max-width:1080px}
.gold-hero{background:
  radial-gradient(560px circle at 100% 0%,rgba(232,190,70,.22),transparent 60%) padding-box,
  var(--fill) padding-box,var(--edge) border-box !important}
.eyebrow{color:var(--gold) !important;font-weight:600}
.market-status{background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.07)}
.status-dot.online{animation:fx-pulse 1.8s ease-out infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.7)}100%{box-shadow:0 0 0 12px rgba(61,220,151,0)}}
.gold-stat strong,.market-box strong{font-variant-numeric:tabular-nums}
#netPLCard.positive strong,.positive-text{color:var(--green) !important}
#netPLCard.negative strong,.negative-text{color:var(--red) !important}
.lot-item{border-radius:18px !important}
.lot-item.positive{border-left:3px solid var(--green) !important}
.lot-item.negative{border-left:3px solid var(--red) !important}
.chart-tabs{gap:6px}
.chart-tab,.chart-action-btn,.chart-tool-btn{border-radius:999px !important;min-height:38px}
.refresh-notice.ok{color:var(--green)}.refresh-notice.fail{color:var(--red)}

/* ---------- Motion: reveal / value flash / list pop ---------- */
.fx-on .fx-reveal:not(.in){opacity:0;transform:translateY(28px) scale(.98)}
.fx-on .fx-reveal.in{animation:fx-rise .85s var(--ease) backwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes fx-rise{from{opacity:0;transform:translateY(28px) scale(.98)}}

.fx-flash{animation:fx-flash .9s var(--ease)}
@keyframes fx-flash{0%{opacity:.2;transform:translateY(8px);filter:blur(3px);text-shadow:0 0 18px rgba(255,224,138,.9)}
  60%{text-shadow:0 0 14px rgba(255,224,138,.6)}100%{opacity:1;transform:none;filter:none}}

.news-list>.news-item,#salaryHistory>.history-item{animation:fx-pop .6s var(--ease) backwards}
.news-list>:nth-child(2),#salaryHistory>:nth-child(2){animation-delay:.06s}
.news-list>:nth-child(3),#salaryHistory>:nth-child(3){animation-delay:.12s}
.news-list>:nth-child(n+4){animation-delay:.18s}
@keyframes fx-pop{from{opacity:0;transform:translateY(16px) scale(.96)}}

@media(prefers-reduced-motion:reduce){
  .fx-aurora i,h1,.subtitle::after,.progress-bar::after,.status-dot.online,.fx-flash,.fx-ripple{animation:none !important}
  .fx-on .fx-reveal:not(.in){opacity:1;transform:none}
  .fx-on .fx-reveal.in{animation:none}
}


/* =========================================================
   v2 — กราฟใหม่ · การ์ดราคาทอง · หน้า Login
   ========================================================= */

/* ---------- Charts ---------- */
.chart-title{display:flex;align-items:center;gap:8px;margin:32px 0 12px !important;font-size:16px !important;color:#fff !important}
.chart-title small{color:var(--muted) !important}
.chart-box{height:270px !important;padding:14px 10px 8px !important;border-radius:22px !important;
  background:radial-gradient(120% 90% at 50% 0%,rgba(232,190,70,.10),transparent 60%),rgba(255,255,255,.025) !important;
  border:1px solid rgba(255,255,255,.07) !important}
.chart-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}
.chip{position:relative;padding:12px 8px 11px;border-radius:16px;text-align:center;min-width:0;
  background:linear-gradient(160deg,rgba(var(--c),.14),rgba(var(--c),.03));border:1px solid rgba(var(--c),.32);
  animation:fx-pop .6s var(--ease) backwards;animation-delay:var(--d,0ms)}
.chip span{display:block;font-size:11.5px;color:var(--muted);line-height:1.3}
.chip b{display:block;margin-top:3px;font-size:16px;font-weight:700;color:rgb(var(--c));font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px rgba(var(--c),.45);overflow-wrap:anywhere}
.chip small{display:block;margin-top:1px;font-size:11px;color:#8d897e}
@media(max-width:420px){.chip b{font-size:14px}.chip{padding:10px 6px}}

/* ---------- Donut ---------- */
.pie-chart-container{max-width:310px !important;height:310px !important;margin:6px auto 0 !important}
.pie-chart-container::before{content:"";position:absolute;inset:16%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,190,70,.14),transparent 70%);animation:fx-breathe2 4.5s ease-in-out infinite}
.pie-chart-container::after{content:"";position:absolute;inset:4%;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(255,255,255,.09);animation:fx-spin 48s linear infinite}
.pie-chart-container canvas{position:relative;z-index:1}
@keyframes fx-breathe2{50%{transform:scale(1.12);opacity:.6}}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.pie-center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:0 24%;text-align:center;pointer-events:none;--c:232,190,70}
.pie-center[hidden]{display:none}
.pc-label{font-size:12.5px;color:var(--muted);letter-spacing:.2px;max-width:100%}
.pc-value{font-size:30px;font-weight:700;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(var(--c),.6);transition:text-shadow .4s}
.pc-value i{font-style:normal;font-size:.55em;margin-right:3px;color:rgb(var(--c));vertical-align:.35em}
.pc-sub{font-size:12px;color:#8d897e}
.pie-center.swap .pc-label,.pie-center.swap .pc-sub{animation:fx-swap .45s var(--ease)}
@keyframes fx-swap{from{opacity:0;transform:translateY(6px)}}
@media(max-width:380px){.pc-value{font-size:25px}}

.pie-legend{display:grid;gap:9px;margin-top:16px}
.pie-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot name val" "bar bar bar";
  align-items:center;column-gap:11px;row-gap:9px;padding:13px 15px;border-radius:18px;cursor:pointer;outline:none;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  transition:background .3s ease,border-color .3s ease,box-shadow .35s ease,opacity .3s ease,transform .35s var(--spring);
  animation:fx-pop .6s var(--ease) backwards;animation-delay:var(--d,0ms);-webkit-tap-highlight-color:transparent}
.pie-row:focus-visible{box-shadow:0 0 0 3px rgba(232,190,70,.45)}
.pie-row.on{background:linear-gradient(160deg,rgba(var(--c),.17),rgba(var(--c),.04));border-color:rgba(var(--c),.6);
  box-shadow:0 0 26px -8px rgba(var(--c),.75);transform:scale(1.015)}
.pie-row.dim{opacity:.45}
.pr-dot{grid-area:dot;width:12px;height:12px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 12px rgba(var(--c),.9)}
.pr-name{grid-area:name;font-size:15px;font-weight:500;color:#f5f2ea;min-width:0}
.pr-name em{font-style:normal;margin-left:8px;font-size:13px;font-weight:700;color:rgb(var(--c))}
.pr-val{grid-area:val;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.pr-bar{grid-area:bar;height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.pr-bar b{display:block;height:100%;width:var(--w);border-radius:inherit;transform-origin:left;
  background:linear-gradient(90deg,rgba(var(--c),.5),rgb(var(--c)));box-shadow:0 0 10px rgba(var(--c),.7);
  animation:fx-grow 1.1s var(--ease) backwards;animation-delay:calc(var(--d,0ms) + 300ms)}
@keyframes fx-grow{from{transform:scaleX(0)}}

/* ---------- Gold: price cards (สไตล์เดียวกับ "สถิติการเงิน") ---------- */
.market-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important}
@media(min-width:900px){
  .market-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .market-grid>.market-box:nth-child(n+5){grid-column:span 2}
}
@media(max-width:899px){.market-grid>.trade-split-box{grid-column:1/-1 !important}}
.market-grid .market-box{position:relative;--ac:232,190,70;text-align:center;border-radius:22px !important;
  padding:22px 14px 16px !important;min-height:128px}
.market-grid .market-box::before{content:"";position:absolute;left:18px;top:0;width:34px;height:3px;border-radius:0 0 4px 4px;
  background:rgb(var(--ac));box-shadow:0 0 12px rgb(var(--ac));animation:fx-neon 3s ease-in-out infinite}
.market-grid .market-box::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--ac),.2),transparent 70%);animation:fx-orb 7s ease-in-out infinite alternate}
.market-grid .market-box:nth-child(1){--ac:140,160,255}
.market-grid .market-box:nth-child(2){--ac:45,212,191}
.market-grid .market-box:nth-child(3){--ac:232,190,70}
.market-grid .market-box:nth-child(4){--ac:255,160,64}
.market-grid .market-box:nth-child(7){--ac:74,222,128}
.market-grid .market-box:nth-child(8){--ac:255,110,122}
.market-grid .market-box:nth-child(n) span{color:rgb(var(--ac)) !important;font-weight:600}
.market-grid .market-box:nth-child(n) strong{color:#fff;font-variant-numeric:tabular-nums;font-size:clamp(18px,5.4vw,24px) !important;margin-top:8px}
.market-grid .market-box:nth-child(7) strong{color:#8ef0b0}
.market-grid .market-box:nth-child(8) strong{color:#ff9aa5}
.market-grid .market-box:nth-child(n) small{color:#8d897e}
.market-grid .market-box .trade-label{display:inline-block !important;margin-left:2px;padding:1px 9px;border-radius:99px;
  background:rgba(var(--ac),.16);color:rgb(var(--ac)) !important;font-size:12px}

/* การ์ดรับซื้อ / ขายออก: 1 การ์ด 2 ช่อง คนละสีตามแหล่งราคา
   รับซื้อ = โทนเขียว (สมาคม = เขียวมรกต · GOLD2go = เขียวมะนาว)
   ขายออก = โทนแดง  (สมาคม = ชมพูแดง   · GOLD2go = ส้ม)        */
.market-grid .market-box.trade-split-box{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:10px !important;padding:14px 10px 10px !important;min-height:0}
.market-grid .market-box.trade-split-box::after{display:none}
.market-grid .market-box:nth-child(5){--a1:52,211,153;--a2:190,242,100}
.market-grid .market-box:nth-child(6){--a1:251,113,133;--a2:251,146,60}
.market-grid .trade-split-box::before{background:rgb(var(--a1));box-shadow:0 0 12px rgb(var(--a1));--ac:var(--a1)}
.market-grid .trade-split-box .trade-divider{display:none !important}
.market-grid .trade-split-box .trade-half{position:relative;min-width:0;margin:0;padding:18px 8px 14px !important;border-radius:18px;
  background:linear-gradient(160deg,rgba(var(--ac),.17),rgba(var(--ac),.04)) !important;border:1px solid rgba(var(--ac),.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.market-grid .trade-split-box .trade-half::before{content:"";position:absolute;left:50%;top:0;width:30px;height:3px;transform:translateX(-50%);
  border-radius:0 0 4px 4px;background:rgb(var(--ac));box-shadow:0 0 12px rgb(var(--ac));animation:fx-neon-c 3s ease-in-out infinite}
.market-grid .trade-split-box .gold2go-half::before{animation-delay:-1.5s}
@keyframes fx-neon-c{0%,100%{width:24px;opacity:.75}50%{width:46px;opacity:1;box-shadow:0 0 16px rgb(var(--ac)),0 0 28px rgba(var(--ac),.5)}}
.market-grid .market-box:nth-child(5) .association-half{--ac:var(--a1)}
.market-grid .market-box:nth-child(5) .gold2go-half{--ac:var(--a2)}
.market-grid .market-box:nth-child(6) .association-half{--ac:var(--a1)}
.market-grid .market-box:nth-child(6) .gold2go-half{--ac:var(--a2)}
.market-grid .market-box:nth-child(n) .trade-half span{font-size:12.5px !important;min-height:34px;line-height:1.3;color:#f5f2ea !important;font-weight:500}
.market-grid .market-box:nth-child(n) .trade-half .trade-label{display:inline-block !important;margin:6px 0 0;padding:2px 12px;border-radius:99px;
  background:rgba(var(--ac),.2);color:rgb(var(--ac)) !important;font-size:12.5px;font-weight:700;letter-spacing:.3px}
.market-grid .market-box:nth-child(n) .trade-half strong{color:rgb(var(--ac)) !important;text-shadow:0 0 20px rgba(var(--ac),.45);
  font-size:clamp(17px,5.2vw,23px) !important;margin-top:9px}
.market-grid .market-box:nth-child(n) .trade-half small{color:#a6a296;font-size:11px !important}

/* ---------- Gold: stats ---------- */
.gold-stats-grid{gap:14px !important}
.gold-stat{--ac:232,190,70;position:relative;text-align:center;border-radius:22px !important;min-height:122px;
  display:flex;flex-direction:column;justify-content:center}
.gold-stats-grid:not(.compact) .gold-stat:nth-child(2){--ac:80,176,255}
.gold-stats-grid:not(.compact) .gold-stat:nth-child(3){--ac:61,220,151}
.gold-stats-grid:not(.compact) .gold-stat:nth-child(4){--ac:170,120,255}
.gold-stats-grid.compact .gold-stat:nth-child(1){--ac:61,220,151}
.gold-stats-grid.compact .gold-stat:nth-child(2){--ac:255,110,122}
.gold-stats-grid.compact .gold-stat:nth-child(3){--ac:170,120,255}
.gold-stats-grid.compact .gold-stat:nth-child(4){--ac:255,196,64}
#netPLCard.positive{--ac:61,220,151}
#netPLCard.negative{--ac:255,110,122}
.gold-stat::before,#netPLCard.positive::before,#netPLCard.negative::before{
  content:"" !important;position:absolute;left:18px !important;right:auto !important;top:0;width:34px;height:3px !important;
  border-radius:0 0 4px 4px;background:rgb(var(--ac)) !important;box-shadow:0 0 12px rgb(var(--ac));animation:fx-neon 3s ease-in-out infinite}
.gold-stats-grid .gold-stat:nth-child(2)::before{animation-delay:-.7s}
.gold-stats-grid .gold-stat:nth-child(3)::before{animation-delay:-1.4s}
.gold-stats-grid .gold-stat:nth-child(4)::before{animation-delay:-2.1s}
.gold-stat::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--ac),.2),transparent 70%);animation:fx-orb 7s ease-in-out infinite alternate}
.gold-stat span{color:#cfcabb !important}
.gold-stat strong{color:#fff !important;font-variant-numeric:tabular-nums}
#netPLCard.positive strong{color:#5ff0a6 !important}
#netPLCard.negative strong{color:#ff8593 !important}
.gold-stat small{color:#8d897e !important}

/* ---------- Login / Account modal ---------- */
#kfpAuthPanel{background:radial-gradient(700px 460px at 50% 18%,rgba(232,190,70,.14),transparent 60%),rgba(4,5,8,.8) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%) !important;backdrop-filter:blur(16px) saturate(140%) !important}
#kfpAuthPanel.open{animation:fx-fade .35s ease both}
@keyframes fx-fade{from{opacity:0}}
@keyframes fx-modal{from{opacity:0;transform:translateY(30px) scale(.94)}}
#kfpAuthPanel .kfp-auth-modal{position:relative;width:min(440px,100%);padding:32px 24px 24px;border-radius:32px;overflow:auto;
  border:1px solid transparent;
  background:linear-gradient(160deg,rgba(32,34,46,.94),rgba(11,12,17,.97)) padding-box,var(--edge) border-box;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.9),0 0 70px -10px rgba(232,190,70,.28),inset 0 1px 0 rgba(255,255,255,.07);
  animation:fx-modal .65s var(--spring) both}
#kfpAuthPanel .kfp-auth-modal::before{content:"";position:absolute;left:50%;top:-90px;width:300px;height:190px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(232,190,70,.42),transparent 70%);filter:blur(14px);pointer-events:none;
  animation:fx-breathe2 5s ease-in-out infinite}
#kfpAuthPanel .kfp-auth-modal>*{position:relative}
#kfpAuthPanel.open .kfp-auth-modal>*{animation:fx-pop .6s var(--ease) backwards}
#kfpAuthPanel.open .kfp-auth-modal>*:nth-child(2){animation-delay:.07s}
#kfpAuthPanel.open .kfp-auth-modal>*:nth-child(3){animation-delay:.14s}
#kfpAuthPanel.open .kfp-auth-modal>*:nth-child(4){animation-delay:.2s}
#kfpAuthPanel.open .kfp-auth-modal>*:nth-child(5){animation-delay:.26s}
#kfpAuthPanel .kfp-auth-modal h2{margin:0 0 6px;text-align:center;font-size:25px;font-weight:700;color:var(--gold-light);
  text-shadow:0 0 30px rgba(232,190,70,.5);border:0}
#kfpAuthPanel .kfp-auth-modal p{margin:0 0 20px;text-align:center;color:var(--muted);font-size:14px}
#kfpAuthPanel .kfp-auth-modal label{margin:14px 0 8px;color:#e9cd7a;font-size:13.5px;font-weight:500;letter-spacing:.2px}
#kfpAuthPanel .kfp-auth-modal input{min-height:54px;padding:13px 16px;border-radius:18px;margin:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:16px}
#kfpAuthPanel .kfp-auth-modal input::placeholder{color:#6f6c63}
#kfpAuthPanel .kfp-auth-modal input:focus{border-color:var(--gold);background:rgba(232,190,70,.07);
  box-shadow:0 0 0 4px rgba(232,190,70,.16),0 10px 28px -12px rgba(232,190,70,.6)}
#kfpAuthPanel .kfp-auth-modal button{min-height:52px;border-radius:18px;font-size:15px;font-weight:600;color:#1a1300;
  background:linear-gradient(110deg,#ffe08a 0%,#e8be46 45%,#c9962b 75%,#ffe08a 100%);background-size:220% 100%;
  box-shadow:0 12px 26px -10px rgba(232,190,70,.7),inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-position .6s var(--ease),transform .3s var(--spring),box-shadow .3s ease}
#kfpAuthPanel .kfp-auth-modal button:hover{background-position:100% 0}
#kfpAuthPanel .kfp-auth-modal button:active{transform:scale(.96)}
#kfpAuthPanel .kfp-auth-row{gap:12px;margin-top:20px}
#kfpAuthPanel .kfp-auth-row button{padding:12px 8px}
#kfpAuthPanel .kfp-auth-modal .kfp-auth-secondary{background:rgba(255,255,255,.05) !important;color:#f5f2ea !important;
  border:1px solid rgba(255,255,255,.14) !important;box-shadow:none !important}
#kfpAuthPanel .kfp-auth-modal .kfp-auth-secondary:hover{background:rgba(255,255,255,.1) !important}
#kfpAuthPanel .kfp-auth-modal .kfp-auth-danger{background:rgba(255,107,122,.1) !important;color:#ff9aa5 !important;
  border:1px solid rgba(255,107,122,.5) !important;box-shadow:none !important}
#kfpAuthPanel .kfp-auth-account{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 6px;padding:16px;border-radius:22px;
  font-size:16px;background:linear-gradient(135deg,rgba(232,190,70,.16),rgba(255,255,255,.03));border:1px solid rgba(232,190,70,.4);
  box-shadow:0 0 30px -10px rgba(232,190,70,.5)}
#kfpAuthPanel .kfp-auth-account b{color:#fff;font-size:18px}
#kfpAuthPanel .kfp-cloud-upload{margin-top:20px;padding:16px;border-radius:22px;border:1px dashed rgba(232,190,70,.45);background:rgba(232,190,70,.06)}
#kfpAuthPanel .kfp-small{text-align:left;font-size:12px;color:#8d897e !important;margin:12px 0 0 !important}
#kfpAuthPanel .kfp-auth-status:not(:empty){margin-top:16px;padding:11px 14px;border-radius:14px;font-size:13.5px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
#kfpAuthPanel .kfp-auth-status.ok{background:rgba(61,220,151,.1);border-color:rgba(61,220,151,.35);color:var(--green)}
#kfpAuthPanel .kfp-auth-status.error{background:rgba(255,107,122,.1);border-color:rgba(255,107,122,.4);color:var(--red)}

/* ---------- Extra polish ---------- */
.btn-row button:first-child{animation:fx-cta 3.2s ease-in-out infinite}
@keyframes fx-cta{50%{box-shadow:0 12px 34px -6px rgba(232,190,70,.95),inset 0 1px 0 rgba(255,255,255,.5)}}
.card h2{display:flex;align-items:center;gap:8px}

@media(prefers-reduced-motion:reduce){
  .stat-box::before,.result-card::before,.result-card::after,.stat-box::after,.gold-stat::before,.gold-stat::after,
  .market-grid .market-box::before,.market-grid .market-box::after,.trade-half::before,.pie-chart-container::before,
  .pie-chart-container::after,.pr-bar b,.chip,.pie-row,.btn-row button:first-child,.kfp-auth-modal,.kfp-auth-modal::before,#kfpAuthPanel.open{animation:none !important}
}

/* จอแคบ (<=390px): การ์ดสถิติทองยังคง 2 คอลัมน์ */
.gold-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media(min-width:801px){.gold-stats-grid:not(.compact){grid-template-columns:repeat(4,minmax(0,1fr)) !important}.gold-stats-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr)) !important}}
.stat-box h3{font-size:clamp(14px,4.3vw,19px) !important;white-space:nowrap}
.stat-box:first-child h3{font-size:clamp(17px,5vw,22px) !important}


/* =========================================================
   v3 — กันหน้าเลื่อนซ้าย-ขวา · อนิเมชันตัวเลขขึ้น/ลง
   ========================================================= */
html,body{max-width:100%;overscroll-behavior-x:none}
body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
/* แสงวงกลมมุมการ์ดเคลื่อนไหวและยื่นออกนอกการ์ด -> ตัดที่ขอบการ์ด ไม่ให้ดันความกว้างหน้า */
.result-card,.stat-box,.market-grid .market-box,.gold-stat,.chip,.pie-row{overflow:hidden}
.stat-box h3{white-space:normal !important;overflow-wrap:anywhere}

/* ตัวเลขเปลี่ยนค่า: เขียว+▲ เมื่อเพิ่ม · แดง+▼ เมื่อลด */
.nf-host{transition:color .9s ease,text-shadow .9s ease}
.nf-up{--nf:61,220,151}
.nf-down{--nf:255,107,122}
.nf-lit{color:rgb(var(--nf)) !important;text-shadow:0 0 10px rgba(var(--nf),.95),0 0 26px rgba(var(--nf),.5)}
.nf-up::after,.nf-down::after{
  position:absolute;display:inline-block;margin-left:.3em;font-size:.48em;line-height:1;vertical-align:.5em;font-weight:700;letter-spacing:0;
  color:rgb(var(--nf));text-shadow:0 0 8px rgba(var(--nf),.9);opacity:1;transition:opacity .9s ease;
  animation:nf-bob 1.3s ease-in-out infinite}
.nf-up::after{content:"▲"}
.nf-down::after{content:"▼";animation-name:nf-bob-down}
.nf-up:not(.nf-lit)::after,.nf-down:not(.nf-lit)::after{opacity:0}
@keyframes nf-bob{50%{transform:translateY(-2px)}}
@keyframes nf-bob-down{50%{transform:translateY(2px)}}
.lot-pl .nf-val{display:inline-block}
@media(prefers-reduced-motion:reduce){.nf-up::after,.nf-down::after{animation:none}}

/* ลูกศรเป็น absolute จึงไม่ดันความกว้างตัวเลข · ไม่ให้ตัวเลขราคาถูกตัดเป็น … */
.market-grid .market-box .trade-half strong,.market-grid .market-box strong,.gold-stat strong{text-overflow:clip !important;overflow:visible !important;white-space:nowrap}
.market-grid .market-box:nth-child(n) .trade-half strong{font-size:clamp(15px,4.6vw,22px) !important}

/* จุดคุ้มทุน: บรรทัด "spot ต้องขึ้นอีก / สูงกว่าแล้ว" */
.lot-entry-oz small.lot-entry-oz-gap{display:block;margin-top:3px;font-size:11.5px;font-weight:600}
.lot-entry-oz small.lot-entry-oz-gap.down{color:#ff8593}
.lot-entry-oz small.lot-entry-oz-gap.up{color:#5ff0a6}


/* =========================================================
   v5 — สวิตช์ KRW/THB · ปุ่มจัดการ · หน้าจัดการการ์ด
   ========================================================= */
html[data-mode="THB"] .only-krw{display:none !important}
html[data-mode="KRW"] .only-thb{display:none !important}
html[data-mode="THB"] [data-krw-only]{display:none !important}

/* สวิตช์สกุลเงิน (แคปซูล + แถบเลื่อน) */
.mode-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:5px;margin:0 0 22px;border-radius:18px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.card .mode-switch button{position:relative;z-index:1;min-height:46px;padding:8px 10px;border-radius:14px;font-size:15px;font-weight:600;
  background:transparent;color:var(--muted);border:0;box-shadow:none;transition:color .35s ease}
.card .mode-switch button:hover{background:transparent;filter:none;box-shadow:none}
.card .mode-switch button b{font-size:18px;margin-right:4px}
.card .mode-switch button small{opacity:.65;margin-left:4px;font-weight:500;font-size:11.5px}
.card .mode-switch button.on{color:#1a1300}
.mode-pill{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:14px;
  background:linear-gradient(110deg,#ffe08a,#e8be46 60%,#c9962b);box-shadow:0 8px 22px -8px rgba(232,190,70,.85),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .5s var(--spring)}
.mode-switch[data-on="THB"] .mode-pill{transform:translateX(100%)}

/* หัวข้อ + ปุ่มจัดการเหนือการ์ดผลคำนวณ */
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 2px 12px}
.results-title{margin:0;font-size:17px;color:var(--gold-light)}
.btn-manage{width:auto !important;min-height:40px;padding:8px 16px;border-radius:999px;font-size:14px;
  background:rgba(255,255,255,.05) !important;color:var(--gold-light) !important;border:1px solid rgba(232,190,70,.45) !important;box-shadow:none !important}
.btn-manage:hover{background:rgba(232,190,70,.14) !important;border-color:var(--gold) !important}

/* การ์ดที่สร้างใหม่หลังแก้ไข: เด้งเข้า */
.kfp-new{animation:fx-pop .55s var(--ease) backwards;animation-delay:calc(var(--n,0) * 55ms)}

/* ---------- หน้าจัดการการ์ด (modal) ---------- */
html.kfp-lock,html.kfp-lock body{overflow:hidden}
.kfp-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(700px 460px at 50% 18%,rgba(232,190,70,.14),transparent 60%),rgba(4,5,8,.82);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);opacity:0;transition:opacity .25s ease}
.kfp-modal[hidden]{display:none}
.kfp-modal.open{opacity:1}
.kfp-modal-card{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  padding:28px 20px 22px;border-radius:30px;border:1px solid transparent;
  background:linear-gradient(160deg,rgba(32,34,46,.95),rgba(11,12,17,.98)) padding-box,var(--edge) border-box;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.9),0 0 70px -10px rgba(232,190,70,.28),inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateY(24px) scale(.96);transition:transform .5s var(--spring);overscroll-behavior:contain}
.kfp-modal.open .kfp-modal-card{transform:none}
.kfp-modal-card h2{margin:0 0 6px;text-align:center;font-size:23px;color:var(--gold-light);text-shadow:0 0 30px rgba(232,190,70,.5);border:0}
.kfp-modal-sub{margin:0 0 18px;text-align:center;color:var(--muted);font-size:13.5px}
.kfp-modal-card button{min-height:48px}

.alloc-rows{display:grid;gap:10px}
.alloc-row{display:grid;grid-template-columns:auto 52px minmax(0,1fr) 44px;grid-template-areas:"dot emo name del" "pct pct role role";
  align-items:center;gap:8px 8px;padding:12px;border-radius:18px;background:linear-gradient(160deg,rgba(var(--ac),.10),rgba(255,255,255,.025));
  border:1px solid rgba(var(--ac),.30);animation:fx-pop .45s var(--ease) backwards}
.al-dot{grid-area:dot;width:12px;height:12px;border-radius:50%;background:rgb(var(--ac));box-shadow:0 0 12px rgba(var(--ac),.9)}
.alloc-row input,.alloc-row select{min-height:46px !important;padding:8px 12px !important;font-size:16px !important;margin:0 !important;border-radius:14px !important}
.al-emoji{grid-area:emo;text-align:center;padding:8px 4px !important}
.al-name{grid-area:name}
.alloc-row .al-del{grid-area:del;width:44px;min-height:44px;padding:0;border-radius:14px;font-size:15px;
  background:rgba(255,107,122,.10) !important;color:#ff9aa5 !important;border:1px solid rgba(255,107,122,.45) !important;box-shadow:none !important}
.al-pct{grid-area:pct;display:flex;align-items:center;gap:6px;margin:0 !important;color:var(--muted) !important}
.al-pct input{width:100% !important;text-align:right}
.al-pct span{font-weight:700;color:rgb(var(--ac))}
.al-role{grid-area:role;min-width:0;font-size:14px !important}

.alloc-add{margin-top:12px;width:100%;background:rgba(255,255,255,.05) !important;color:var(--gold-light) !important;
  border:1px dashed rgba(232,190,70,.55) !important;box-shadow:none !important}
.alloc-add:disabled{opacity:.4}
.alloc-total{margin-top:16px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.at-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.at-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#ff6b7a,#ffc440);transition:width .45s var(--ease),background .3s ease}
.at-text{margin-top:8px;text-align:center;font-weight:700;font-size:15px;color:#ff9aa5}
.alloc-total.ok{border-color:rgba(61,220,151,.45);background:rgba(61,220,151,.07)}
.alloc-total.ok .at-bar i{background:linear-gradient(90deg,#1fb97a,#3ddc97)}
.alloc-total.ok .at-text{color:var(--green)}
.alloc-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.alloc-ghost{background:rgba(255,255,255,.05) !important;color:#f5f2ea !important;border:1px solid rgba(255,255,255,.14) !important;box-shadow:none !important;font-size:14px}
.alloc-msg{min-height:20px;margin:10px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.alloc-msg.warn{color:#ffb4bd}.alloc-msg.ok{color:var(--green)}
.alloc-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:8px}
.alloc-actions button:disabled{opacity:.4;filter:grayscale(.5);box-shadow:none}
.kfp-modal-card .alloc-close{background:rgba(255,255,255,.05) !important;color:#f5f2ea !important;border:1px solid rgba(255,255,255,.14) !important;box-shadow:none !important}
.alloc-note{margin:14px 4px 0;font-size:12px;line-height:1.55;color:#8d897e;text-align:center}
@media(max-width:380px){.alloc-tools,.alloc-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.kfp-modal,.kfp-modal-card,.mode-pill,.alloc-row,.kfp-new{transition:none !important;animation:none !important}}

/* ตอนเปิดหน้าต่างจัดการการ์ด: ซ่อนปุ่ม Login/ปุ่มลอย ไม่ให้ทับ */
html.kfp-lock #kfpAuthButton,html.kfp-lock .kfp-fab{opacity:0 !important;pointer-events:none !important}

/* หน้าแรก: กรอบเนื้อหากว้างเท่าหน้าพอร์ตทอง (การ์ดทุกใบกว้างเท่ากัน ทั้งจอคอมและแท็บเล็ต) */
.container{max-width:1080px}
@media(min-width:601px) and (max-width:700px){.container{padding-left:10px;padding-right:10px}}

/* modal จัดการการ์ด: เลื่อนได้เฉพาะแนวตั้ง ห้ามเลื่อนซ้าย-ขวา */
.kfp-modal,.kfp-modal-card{overflow-x:hidden !important;overscroll-behavior-x:none;touch-action:pan-y}
.kfp-modal-card{max-width:100%;box-sizing:border-box}
.kfp-modal-card *{min-width:0;max-width:100%;box-sizing:border-box}
.kfp-modal-card input,.kfp-modal-card select{max-width:100%}
.alloc-row{width:100%}
.al-role{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.kfp-modal-card h2,.kfp-modal-sub,.alloc-note{overflow-wrap:anywhere}