/* ══ base.css block ══ */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#eef1f5;--white:#fff;--surface:#f5f7fa;
  --border:#e4e8ef;--border2:#d0d6e0;
  --text:#1e2330;--text2:#5a6072;--text3:#9aa0b0;
  --red:#e02020;--red-bg:#fef2f2;--red-soft:rgba(224,32,32,.08);
  --green:#16a34a;--green-bg:#f0fdf4;
  --amber:#d97706;--amber-bg:#fffbeb;
  --gray:#6b7280;--gray-bg:#f3f4f6;
  --blue:#2563eb;--blue-bg:#eff6ff;
  --purple:#7c3aed;--purple-bg:#f5f3ff;
  --sh:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 8px 24px rgba(0,0,0,.1);
}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans Thai',sans-serif;font-size:14px;line-height:1.5;min-height:100vh;scrollbar-width:thin;scrollbar-color:#e02020 transparent;}


.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;}

/* ── TOP NAV ── */
.topnav{
  flex-shrink:0;height:64px;background:#fff;border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;gap:0;z-index:200;
  position:sticky;top:0;
}
.topnav-center{
  flex:1;display:flex;align-items:center;justify-content:center;gap:2px;
}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;transition:opacity .12s;text-decoration:none;justify-self:start;}
.brand:hover{opacity:.8;}
.brand-icon{width:32px;height:32px;border-radius:8px;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;box-shadow:0 2px 6px rgba(224,32,32,.3);}
.brand-text{font-weight:900;font-size:1.15rem;color:var(--red);line-height:1;}


/* ── TOOLS DROPDOWN NAV ── */
.nav-tools-wrap{position:relative;}
.nav-tools-menu{
  position:fixed;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.15);min-width:160px;
  padding:6px;z-index:99999;
  display:none;flex-direction:column;gap:2px;
  animation:mp .18s cubic-bezier(.34,1.5,.64,1);
}
.nav-tools-menu.open{display:flex;}
.nav-tools-btn{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:9px;border:none;background:none;
  cursor:pointer;font-family:'Noto Sans Thai',sans-serif;
  font-size:.78rem;color:var(--text);width:100%;text-align:left;
  transition:background .12s;font-weight:500;
}
.nav-tools-btn:hover{background:var(--surface);}
.nav-tools-btn svg{flex-shrink:0;color:var(--text2);}

/* nav menu items */
.nav-items{display:flex;align-items:center;gap:4px;justify-content:center;}
.nav-item{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 16px;border-radius:10px;border:none;background:none;cursor:pointer;color:var(--text2);font-family:'Noto Sans Thai',sans-serif;font-size:.72rem;font-weight:500;transition:all .12s;white-space:nowrap;min-width:64px;}
.nav-item:hover{background:var(--surface);color:var(--text);}
.nav-item.active{background:var(--red-soft);color:var(--red);font-weight:700;}
.nav-item .ico{font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center;margin-bottom:1px;}
.nav-item .badge{font-size:.6rem;font-weight:600;background:var(--border);color:var(--text2);padding:1px 5px;border-radius:8px;}
.nav-item.active .badge{background:rgba(224,32,32,.12);color:var(--red);}

/* stock sub-tree dropdown */
.nav-dropdown{position:relative;}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 6px);left:0;
  background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);min-width:180px;
  padding:6px;z-index:999;
  display:none;flex-direction:column;gap:2px;
}
.nav-dropdown-menu.open{display:flex;}
.nav-div{height:1px;background:var(--border);margin:3px 0;}
.plat-row{width:100%;display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:7px;border:none;background:none;cursor:pointer;color:var(--text2);font-family:'Noto Sans Thai',sans-serif;font-size:.76rem;text-align:left;transition:all .12s;font-weight:500;}
.plat-row:hover{background:var(--surface);}
.plat-row.open{color:var(--text);}
.pdot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.parrow{margin-left:auto;font-size:.6rem;color:var(--text3);transition:transform .2s;}
.plat-row.open .parrow{transform:rotate(90deg);}
.ptotal{font-size:.62rem;color:var(--text3);margin-right:2px;}
.sub-tree{padding-left:10px;max-height:0;overflow:hidden;transition:max-height .25s ease;}
.sub-tree.open{max-height:500px;}
.pkg-tree{padding-left:10px;max-height:0;overflow:hidden;transition:max-height .2s ease;}
.pkg-tree.open{max-height:300px;}
.pkg-nav-btn{width:100%;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;border:none;background:none;cursor:pointer;color:var(--text3);font-family:'Noto Sans Thai',sans-serif;font-size:.72rem;text-align:left;transition:all .12s;}
.pkg-nav-btn:hover{background:var(--surface);color:var(--text2);}
.pkg-nav-btn.active{background:var(--red-soft);color:var(--red);font-weight:600;}
.pkg-nav-btn .pnb{margin-left:auto;font-size:.58rem;font-weight:600;background:var(--border);color:var(--text2);padding:1px 5px;border-radius:6px;}
.pkg-nav-btn.active .pnb{background:rgba(224,32,32,.12);color:var(--red);}

/* stock action bar */
.nav-foot{display:none;align-items:center;gap:6px;margin-left:8px;}
.nav-foot.show{display:flex;}
.nf-btn{padding:5px 11px;border-radius:7px;border:1.5px solid var(--border2);background:none;color:var(--text2);font-family:'Noto Sans Thai',sans-serif;font-size:.72rem;cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.nf-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-soft);}
.nf-btn.primary{background:var(--red);color:white;border-color:var(--red);}
.nf-btn.primary:hover{background:#c51c1c;}

/* user area right */
.nav-user{display:flex;align-items:center;margin-left:0;position:relative;justify-content:flex-end;justify-self:end;}
.nav-user-btn{display:flex;align-items:center;gap:0;background:none;border:none;cursor:pointer;padding:0;}
.nav-user-av{
  width:36px;height:36px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;flex-shrink:0;
  box-shadow:0 2px 8px rgba(224,32,32,.35);
  transition:opacity .12s;
}
.nav-user-btn:hover .nav-user-av{opacity:.85;}

/* dropdown panel */
.user-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.13);
  width:240px;z-index:9000;
  display:none;flex-direction:column;
  animation:mp .18s cubic-bezier(.34,1.5,.64,1);
}
.user-dropdown.open{display:flex;}
.udrop-head{padding:16px 18px 12px;border-bottom:1px solid var(--border);overflow:hidden;}
.udrop-name{font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.udrop-sub{font-size:.72rem;color:var(--text3);}
.udrop-apikey{margin:12px 18px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 12px;}
.udrop-apikey-lbl{font-size:.58rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);font-weight:600;display:flex;align-items:center;gap:5px;margin-bottom:5px;}
.udrop-apikey-val{font-family:monospace;font-size:.72rem;color:var(--text2);word-break:break-all;line-height:1.5;}
.udrop-menu{padding:6px;display:flex;flex-direction:column;gap:1px;}
.udrop-btn{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border:none;background:none;cursor:pointer;font-family:'Noto Sans Thai',sans-serif;font-size:.8rem;color:var(--text);width:100%;text-align:left;transition:background .12s;}
.udrop-btn:hover{background:var(--surface);}
.udrop-btn.danger{color:var(--red);}
.udrop-btn.danger:hover{background:var(--red-bg);}
.udrop-btn-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;}

/* ── PAGE AREA ── */
.pages{flex:1;overflow:hidden;display:flex;flex-direction:column;}
.page{display:none;flex:1;flex-direction:column;overflow-x:hidden;}
.page.active{display:flex;}


.home-scroll{flex:1;overflow-y:auto;padding:0;}
.home-topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 28px;height:52px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.home-title{font-size:.88rem;font-weight:700;}
.home-sub{font-size:.72rem;color:var(--text3);margin-top:1px;}
.greeting{margin-bottom:20px;}
.greeting h1{font-size:1.2rem;font-weight:700;}
.greeting p{font-size:.8rem;color:var(--text2);margin-top:3px;}

.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:24px;}
.sys-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px;cursor:pointer;transition:all .18s;box-shadow:var(--sh);position:relative;overflow:hidden;}
.sys-card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--border2);}
.sys-card.coming{opacity:.55;cursor:default;}
.sys-card.coming:hover{transform:none;box-shadow:var(--sh);}
.sys-card-glow{position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;opacity:.08;}
.sys-card-icon{font-size:1.6rem;margin-bottom:10px;}
.sys-card-name{font-size:.88rem;font-weight:700;margin-bottom:3px;}
.sys-card-desc{font-size:.72rem;color:var(--text2);line-height:1.4;}
.sys-card-foot{display:flex;align-items:center;gap:6px;margin-top:12px;}
.sys-badge{font-size:.62rem;padding:2px 8px;border-radius:10px;font-weight:600;}
.sys-card-arrow{margin-left:auto;font-size:.8rem;color:var(--text3);}
.coming-tag{font-size:.6rem;padding:2px 7px;border-radius:8px;background:var(--gray-bg);color:var(--gray);font-weight:600;}

.quick-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:24px;}
.qs-card{background:var(--white);border:1px solid var(--border);border-radius:11px;padding:14px 16px;box-shadow:var(--sh);}
.qs-icon{font-size:1.1rem;margin-bottom:6px;}
.qs-num{font-size:1.4rem;font-weight:700;line-height:1;}
.qs-lbl{font-size:.65rem;color:var(--text3);margin-top:2px;}


.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 20px;height:52px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.bc{display:flex;align-items:center;gap:5px;font-size:.8rem;}
.bc-item{color:var(--text2);cursor:pointer;padding:2px 4px;border-radius:4px;transition:all .12s;}
.bc-item:hover{color:var(--red);}
.bc-item.cur{color:var(--text);font-weight:600;cursor:default;}
.bc-sep{color:var(--border2);}
.search-box{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:5px 11px;flex:1;max-width:240px;transition:all .15s;}
.search-box:focus-within{border-color:var(--border2);background:var(--white);}
.search-box input{border:none;background:none;outline:none;flex:1;font-family:'Noto Sans Thai',sans-serif;font-size:.78rem;color:var(--text);}
.search-box input::placeholder{color:var(--text3);}
.topbar-r{margin-left:auto;display:flex;gap:6px;}
.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 13px;border-radius:7px;border:none;font-family:'Noto Sans Thai',sans-serif;font-size:.76rem;font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap;}
.btn-red{background:var(--red);color:white;}
.btn-red:hover{background:#c51c1c;box-shadow:0 2px 8px rgba(224,32,32,.25);}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--text2);}
.btn-ghost:hover{border-color:var(--border2);color:var(--text);background:var(--surface);}

.stat-strip{display:flex;background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0;}
.stat-cell{flex:1;padding:10px 14px;border-right:1px solid var(--border);display:flex;align-items:center;gap:9px;}
.stat-cell:last-child{border-right:none;}
.st-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;}
.si-a{background:var(--surface);}
.si-u{background:var(--green-bg);}
.si-d{background:var(--red-bg);}
.si-w{background:var(--amber-bg);}
.si-e{background:var(--gray-bg);}
.sn{font-size:1.15rem;font-weight:700;line-height:1;}
.sl{font-size:.63rem;color:var(--text3);margin-top:1px;}
.c-a{color:var(--text);}
.c-u{color:var(--green);}
.c-d{color:var(--red);}
.c-w{color:var(--amber);}
.c-e{color:var(--gray);}

.content{flex:1;overflow:hidden;display:flex;flex-direction:column;}
.page-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.page-head-title{font-size:1rem;font-weight:700;}
.page-head-sub{font-size:.72rem;color:var(--text3);margin-top:1px;}
.page-head-r{margin-left:auto;display:flex;gap:6px;align-items:center;}

.filter-row{display:flex;align-items:center;gap:5px;margin-bottom:12px;flex-wrap:wrap;}
.ftab{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--white);color:var(--text2);font-family:'Noto Sans Thai',sans-serif;font-size:.78rem;cursor:pointer;transition:all .15s;font-weight:500;}
.ftab:hover{border-color:var(--border2);color:var(--text);background:var(--surface);}
.ftab.active{border-color:var(--red);color:var(--red);background:var(--red-bg);font-weight:600;}
.sort-sel{background:var(--white);border:1px solid var(--border);color:var(--text2);padding:6px 10px;border-radius:8px;font-family:'Noto Sans Thai',sans-serif;font-size:.78rem;cursor:pointer;}

/* stabs — pill tabs */
.stabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.stab{padding:6px 16px;border-radius:20px;border:1px solid var(--border);background:#fff;color:var(--text2);font-family:'Noto Sans Thai',sans-serif;font-size:.78rem;cursor:pointer;transition:all .15s;font-weight:500;}
.stab:hover{border-color:var(--border2);color:var(--text);}
.stab.active{background:var(--red);color:#fff;border-color:var(--red);font-weight:600;box-shadow:0 2px 8px rgba(224,32,32,.25);}

/* table (legacy, keep for order page) */
.table-wrap{background:var(--white);border:1px solid var(--border);border-radius:11px;overflow:hidden;box-shadow:var(--sh);}
.thr{display:grid;grid-template-columns:32px 1fr 1fr 100px 100px 1fr 88px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 12px;}
.th{padding:8px 7px;font-size:.62rem;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);font-weight:600;white-space:nowrap;}
.row{display:grid;grid-template-columns:32px 1fr 1fr 100px 100px 1fr 88px;padding:0 12px;border-bottom:1px solid var(--border);align-items:center;transition:background .1s;animation:ri .18s ease both;}
@keyframes ri{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.row:last-child{border-bottom:none;}
.row:hover{background:var(--surface);}
.row.expired{opacity:.45;}
.td{padding:10px 7px;font-size:.78rem;color:var(--text);overflow:hidden;}
.email-v{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;}
.pass-wrap{display:flex;align-items:center;gap:3px;}
.pass-t{font-family:monospace;font-size:.76rem;color:var(--text2);filter:blur(4px);transition:filter .15s;cursor:pointer;user-select:none;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pass-t.show{filter:none;}
.ib{width:22px;height:22px;border-radius:5px;border:1px solid var(--border);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.65rem;color:var(--text3);transition:all .12s;flex-shrink:0;}
.ib:hover{border-color:var(--border2);color:var(--text);background:var(--surface);}
.exp-v{font-size:.76rem;font-weight:500;}
.chip{display:inline-block;padding:2px 6px;border-radius:4px;font-size:.62rem;font-weight:600;margin-top:2px;white-space:nowrap;}
.ck{background:var(--green-bg);color:var(--green);}
.cw{background:var(--amber-bg);color:var(--amber);}
.ce{background:var(--gray-bg);color:var(--gray);}
.cn{background:var(--red-bg);color:var(--red);}

/* status pills */
.pu{background:var(--green-bg);color:var(--green);}
.pd{background:var(--red-bg);color:var(--red);}
.pe{background:var(--gray-bg);color:var(--gray);}
.pw{background:var(--amber-bg);color:var(--amber);}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block;}
.acts{display:flex;gap:3px;justify-content:flex-end;}
.note-v{color:var(--text3);font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.empty{text-align:center;padding:56px 20px;display:none;}
.empty.show{display:block;}
.empty-ico{font-size:1.8rem;margin-bottom:8px;opacity:.2;}
.empty-t{font-size:.82rem;color:var(--text2);font-weight:500;}
.empty-s{font-size:.72rem;color:var(--text3);margin-top:3px;}


/* Outer scroll wrapper */
#pgS-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: #eef1f5;
  padding: 28px 24px 96px;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
  min-height: 0;
}

/* ── WHITE CARD (outer) ── */
.pgS-white-card {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
}

/* ── HERO ── */


#pgS-hero {
  background: var(--text);
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
#pgS-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 85% -10%, rgba(224,32,32,.25) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 110%, rgba(224,32,32,.12) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
#pgS-hero::after { display: none; }

#pgS-toprow {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 20px 16px;
  flex-wrap: wrap; position: relative; z-index: 2;
}
#pgS-bc { flex: 1; font-size: .78rem; color: rgba(255,255,255,.35); min-width: 40px; }
#pgS-bc .bc-item { color: rgba(255,255,255,.4); cursor: pointer; transition: color .15s; }
#pgS-bc .bc-item:hover { color: rgba(255,255,255,.8); }
#pgS-bc .bc-item.cur { color: rgba(255,255,255,.8); font-weight: 600; }
#pgS-bc .bc-sep { color: rgba(255,255,255,.18); margin: 0 3px; }

.pgS-search {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.09); border: 1.5px solid rgba(255,255,255,.13);
  border-radius: 22px; padding: 7px 14px; width: 200px; transition: all .2s;
}
.pgS-search:focus-within {
  border-color: var(--red); background: rgba(255,255,255,.13);
  box-shadow: 0 0 0 3px rgba(224,32,32,.18);
}
.pgS-search input {
  border: none; background: none; outline: none; flex: 1;
  font-family: 'Noto Sans Thai', sans-serif; font-size: .78rem; color: rgba(255,255,255,.88);
}
.pgS-search input::placeholder { color: rgba(255,255,255,.3); }

.pgS-tbtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 22px;
  border: 1.5px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  font-family: 'Noto Sans Thai', sans-serif; font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.pgS-tbtn:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.14); color: #fff; }
.pgS-tbtn.add { background: var(--red); border-color: transparent; color: #fff; box-shadow: 0 3px 14px rgba(224,32,32,.4); }
.pgS-tbtn.add:hover { background: #cc1a1a; }

/* ── STAT STRIP ── */
#pgS-stats {
  display: grid; grid-template-columns: repeat(5,1fr);
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative; z-index: 2;
  width: 100%;
}
.pgS-stat {
  padding: 14px 16px 18px; cursor: pointer; transition: background .18s;
  border-right: 1px solid rgba(255,255,255,.07);
  position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pgS-stat:last-child { border-right: none; }
.pgS-stat::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 3px; background: transparent; transition: background .25s;
}
.pgS-stat:hover  { background: rgba(255,255,255,.04); }
.pgS-stat.active { background: rgba(255,255,255,.06); }
.pgS-stat.active::after { background: var(--st-color,var(--red)); box-shadow: 0 0 10px var(--st-color,var(--red)); }
.pgS-stat-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.pgS-stat-num { font-size: 1.8rem; font-weight: 900; line-height: 1; letter-spacing: -1.5px; color: #fff; display: block; }
.pgS-stat-lbl { font-size: .58rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: rgba(255,255,255,.28); margin-top: 4px; }
.pgS-stat.s-total   { --st-color: rgba(255,255,255,.45); }
.pgS-stat.s-unused  { --st-color: var(--green); }
.pgS-stat.s-used    { --st-color: var(--red); }
.pgS-stat.s-expiring{ --st-color: var(--amber); }
.pgS-stat.s-expired { --st-color: var(--gray); }

/* ── INNER CARD (filter + content) ── */
#pgS-card {
  background: var(--white); border-radius: 0;
  box-shadow: none; flex: 1; min-height: 300px;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ── FILTER BAR (desktop) ── */
#pgS-filterbar {
  display: flex; align-items: center; gap: 6px;
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.pgS-chip {
  padding: 5px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--text3); font-family: 'Noto Sans Thai',sans-serif;
  font-size: .75rem; font-weight: 600; cursor: pointer; transition: all .14s;
}
.pgS-chip:hover { border-color: var(--border2); color: var(--text); }
.pgS-chip.on   { background: var(--red);   border-color: var(--red);   color: #fff; box-shadow: 0 2px 10px rgba(224,32,32,.3); }
.pgS-chip.on-g { background: var(--green); border-color: var(--green); color: #fff; }
.pgS-chip.on-a { background: var(--amber); border-color: var(--amber); color: #fff; }
.pgS-chip.on-s { background: var(--gray);  border-color: var(--gray);  color: #fff; }
.pgS-sort {
  margin-left: auto; padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--text2); font-family: 'Noto Sans Thai',sans-serif;
  font-size: .73rem; font-weight: 600; cursor: pointer;
}

/* ── SECTION HEADER ── */
.pgS-sec-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px;
}
.pgS-sec-title { font-size: .95rem; font-weight: 800; color: var(--text); }
.pgS-sec-sub   { font-size: .7rem; color: var(--text3); margin-top: 2px; }
#pgS-inner { flex: 1; overflow: auto; }

/* ── OVERVIEW GRID ── */
.pgS-ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 14px;
  padding: 0 18px 24px;
}
.pgS-ov-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s;
  box-shadow: var(--sh);
  overflow: hidden;
}
.pgS-ov-card:hover {
  border-color: var(--red);
  box-shadow: 0 4px 20px rgba(224,32,32,.12);
  transform: translateY(-2px);
}
.pgS-ov-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px;
}
.pgS-ov-ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.pgS-ov-name { font-weight: 800; font-size: .9rem; color: var(--text); }
.pgS-ov-sub  { font-size: .65rem; color: var(--text3); margin-top: 1px; }
.pgS-ov-count     { font-size: 1.8rem; font-weight: 900; color: var(--red); letter-spacing: -1.5px; line-height: 1; text-align: right; }
.pgS-ov-count-lbl { font-size: .6rem; color: var(--text3); text-align: right; font-weight: 600; }
.pgS-ov-chips {
  padding: 0 14px 10px; display: flex; gap: 5px; flex-wrap: wrap;
}
.pgS-ov-bar-wrap  { margin: 0 14px 10px; }
.pgS-ov-bar-track { height: 4px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.pgS-ov-bar-fill  { height: 100%; background: linear-gradient(90deg,var(--red),#f87171); border-radius: 4px; transition: width .5s; }
.pgS-ov-pkgs      { padding: 0 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.pgS-ov-pkg-row {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  transition: all .15s; cursor: pointer;
}
.pgS-ov-pkg-row:hover { border-color: var(--red); background: var(--red-bg); transform: translateX(3px); }
.pgS-ov-pkg-name { font-size: .78rem; font-weight: 600; flex: 1; color: var(--text); }
.pgS-ov-pkg-cnt  {
  font-size: .63rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: var(--green-bg); color: var(--green); border: 1px solid #bbf7d0;
}

/* ── TABLE ── */
.pgS-tbl-wrap { overflow: auto; padding-bottom: 24px; }
.acc-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.acc-table thead tr { background: var(--surface); position: sticky; top: 0; z-index: 5; }
.acc-table th {
  padding: 10px 14px; font-size: .6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text3); text-align: left; white-space: nowrap;
  border-bottom: 1.5px solid var(--border);
}
.acc-table tbody tr { transition: background .1s; }
.acc-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.acc-table tbody tr:hover { background: #fafbfd; }
.acc-table tbody tr.acc-expired { opacity: .4; }
.acc-table td { padding: 10px 14px; font-size: .8rem; color: var(--text); vertical-align: middle; }
/* Desktop: hide mobile dates td, show desktop tds */
.acc-mb-dates { display: none; }
.acc-td-mobile-dates { display: none; }
.acc-mb-lbl { display: none; }
.acc-mobile-header { display: none; }
.acc-mb-header { display: none; }
.acc-mb-email { display: none; }
.acc-mb-lockicon { display: none; }
.acc-mb-passlbl { display: none; }
.acc-plat-badge { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.acc-email { font-weight: 700; color: var(--text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.acc-pass-wrap { display: flex; align-items: center; gap: 4px; }
.acc-pass-val { font-family: 'Courier New',monospace; font-size: .75rem; color: var(--text2); filter: blur(4px); transition: filter .18s; cursor: pointer; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-pass-val.show { filter: none; }
.acc-btn {
  width: 26px; height: 26px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .13s; flex-shrink: 0;
}
.acc-btn:hover { border-color: var(--red); background: var(--red-bg); }
.acc-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: .67rem; font-weight: 700; white-space: nowrap; }
.acc-mob-status { display: none; }
.acc-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* ── EMPTY STATE ── */
.pgS-empty { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pgS-empty-ico   { font-size: 3rem; opacity: .1; }
.pgS-empty-title { font-size: .95rem; font-weight: 800; color: var(--text2); }
.pgS-empty-sub   { font-size: .78rem; color: var(--text3); }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .pages { overflow: hidden !important; }
  #pageStock { overflow: hidden !important; }
  #pgS-wrap { padding: 0; gap: 0; background: #eef1f5; overflow-y: auto !important; overflow-x: hidden; height: 100% !important; flex: 1; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }
  .pgS-white-card { border-radius: 0; min-height: unset; box-shadow: none; max-width: 100%; overflow: visible; flex: 1; display: flex; flex-direction: column; background: transparent; }
  #pgS-hero { border-radius: 16px; margin: 10px 14px 0; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
  #pgS-card { overflow: visible; flex: 1; display: flex; flex-direction: column; margin: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #pgS-inner { overflow: visible; flex: 1; padding: 8px 0 120px; }
  #pgS-toprow { padding: 12px 14px 10px; gap: 6px; }
  #pgS-bc { display: none; }
  /* Hide Export and หมวดหมู่ on mobile to prevent overflow */
  .pgS-tbtn:not(.add) { display: none; }
  .pgS-search { order: 10; flex: 1 1 100%; width: 100% !important; box-sizing: border-box; }
  .pgS-tbtn { padding: 6px 10px; font-size: .71rem; }
  .pgS-tbtn.add { padding: 6px 12px; }
  #pgS-stats {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%;
  }
  #pgS-stats::-webkit-scrollbar { display: none; }
  .pgS-stat { flex: 1 0 auto; min-width: 66px; padding: 10px 10px 14px; box-sizing: border-box; }
  .pgS-stat-ico { width: 26px; height: 26px; margin-bottom: 5px; }
  .pgS-stat-num { font-size: 1.25rem; letter-spacing: -1px; }
  .pgS-stat-lbl { font-size: .49rem; }
  #pgS-filterbar { padding: 8px 14px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 5px; background: #eef1f5; }
  #pgS-filterbar::-webkit-scrollbar { display: none; }
  .pgS-chip { white-space: nowrap; flex-shrink: 0; padding: 5px 10px; font-size: .70rem; }
  .pgS-sort { display: none; }
  .pgS-mb-back { display: flex !important; }
  .pgS-sec-hd { padding: 14px 14px 10px; flex-direction: column; align-items: flex-start; }
  .pgS-ov-grid { grid-template-columns: 1fr; padding: 0 12px 90px; gap: 12px; }

  /* Translate page mobile */
  #tGrid { grid-template-columns: 1fr !important; }
  #pgT-wrap { padding: 16px 12px 96px !important; }

  .pgS-ov-card { touch-action: manipulation; -webkit-tap-highlight-color: rgba(224,32,32,.1); }
  .pgS-tbl-wrap { overflow-x: visible; padding-top: 6px; }

  /* === MOBILE CARD LAYOUT === */
  .acc-table { min-width: 0; width: 100%; box-sizing: border-box; }
  .acc-table thead { display: none; }
  .acc-table, .acc-table tbody { display: block; width: 100%; }

  .acc-table tbody tr {
    display: block;
    margin: 0 12px 10px;
    width: calc(100% - 24px);
    box-sizing: border-box;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.04);
    border: 1px solid #eef0f5;
    background: #fff;
    animation: ri .18s ease both;
  }  .acc-table tbody tr.acc-expired { opacity: .5; }
  .acc-table td { display: none; padding: 0; }
  .acc-table td:nth-child(1) { display: none !important; }

  /* ── HEADER (สีเข้ม) ── */
  .acc-td-plat {
    display: block !important;
    background: linear-gradient(135deg, #181c28 0%, #251830 100%);
    padding: 10px 16px;
    position: relative;
    overflow: hidden;
  }
  .acc-td-plat::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 90% 0%, rgba(224,32,32,.2) 0%, transparent 55%);
    pointer-events: none;
  }
  .acc-td-plat .acc-dt-badge { display: none; }
  .acc-td-plat .acc-mb-header { display: flex !important; align-items: center; gap: 8px; }

  /* ── BODY ── */
  .acc-td-cred {
    display: block !important;
    background: #fff;
    padding: 12px 16px 10px;
  }
  .acc-td-cred::before { display: none; }
  .acc-td-desktop { display: none !important; }

  /* ── DATES ROW ── */
  .acc-td-mobile-dates { display: block !important; padding: 0 !important; }
  .acc-mb-dates {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    background: #f8f9fc;
    border-top: 1px solid #eef0f5;
    border-bottom: 1px solid #eef0f5;
  }
  .acc-mb-dates-start, .acc-mb-dates-exp { padding: 8px 16px; }
  .acc-mb-dates-start { border-right: 1px solid #eef0f5; }

  /* ── STATUS + ACTIONS ROW ── */
  .acc-td-status { display: none !important; }
  .acc-td-actions { display: block !important; padding: 0; }
  .acc-td-actions .acc-actions {
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
  }
  .acc-btn {
    width: 36px; height: 36px; border-radius: 9px;
  }

  /* Show mobile-only elements */
  .acc-mb-email { display: flex !important; align-items: center; gap: 7px; margin-bottom: 6px; }
  .acc-mb-lockicon { display: flex !important; }
  .acc-mb-passlbl { display: block !important; }
  .acc-mb-lbl { display: block !important; font-size: .52rem; font-weight: 700; color: #b0b8c8; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 1px; }

  .acc-email { max-width: none; font-size: .78rem; }
  .acc-pass-val { max-width: none; font-size: .78rem; }
}
@media (max-width: 390px) {
  .pgS-stat { min-width: 58px; padding: 8px 8px 12px; }
  .pgS-stat-num { font-size: 1.05rem; }
  #pgS-toprow { padding: 10px 12px 8px; }
}

/* MODAL */
.mask{position:fixed;inset:0;z-index:999;background:rgba(15,20,30,.35);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px;}
.mask.open{display:flex;}
.mbox{background:var(--white);border-radius:13px;width:440px;max-width:100%;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-shadow:0 8px 32px rgba(0,0,0,.14);animation:mp .2s cubic-bezier(.34,1.5,.64,1);}
@keyframes mp{from{opacity:0;transform:scale(.95) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0;}
.mtitle{font-size:.88rem;font-weight:700;}
.mx{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.8rem;transition:all .12s;}
.mx:hover{background:var(--surface);color:var(--text);}
.mbody{padding:14px 18px 18px;display:flex;flex-direction:column;gap:11px;}
.pp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.pp{padding:10px 6px;border-radius:10px;border:2px solid var(--border);background:var(--surface);cursor:pointer;text-align:center;transition:all .15s;position:relative;opacity:.55;}
.pp:hover{border-color:var(--border2);background:var(--white);opacity:.8;transform:translateY(-1px);}
.pp.sel{background:var(--white);border-color:var(--red);border-width:2.5px;opacity:1;box-shadow:0 4px 14px rgba(224,32,32,.18);transform:translateY(-2px);}
.pp.sel::after{content:'✓';position:absolute;top:-8px;right:-8px;width:18px;height:18px;background:var(--red);color:#fff;border-radius:50%;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:18px;}
.pp-e{font-size:1.3rem;}
.pp-n{font-size:.62rem;color:var(--text2);font-weight:600;margin-top:3px;}
.pp.sel .pp-n{color:var(--red);}
.fg{display:flex;flex-direction:column;gap:3px;}
.fl{font-size:.62rem;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);font-weight:600;}
.fi{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:7px 10px;color:var(--text);font-family:'Noto Sans Thai',sans-serif;font-size:.78rem;outline:none;transition:all .15s;width:100%;}
.fi:focus{border-color:var(--red);background:var(--white);box-shadow:0 0 0 3px rgba(224,32,32,.06);}
.fi::placeholder{color:var(--text3);}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
@media(max-width:600px){.fr2{grid-template-columns:1fr !important;}}
.fta{resize:vertical;min-height:52px;}
.mfoot{display:flex;gap:6px;justify-content:flex-end;padding:0 18px 18px;}
.pkg-chip-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
.pkg-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;background:var(--surface);border:1px solid var(--border);font-size:.72rem;color:var(--text2);}
.pkg-chip-del{background:none;border:none;cursor:pointer;color:var(--text3);font-size:.75rem;padding:0;line-height:1;transition:color .12s;}
.pkg-chip-del:hover{color:var(--red);}

/* TOAST */
.toast-wrap{position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:5px;pointer-events:none;}
.toast{background:var(--white);border:1px solid var(--border);border-radius:9px;padding:9px 13px;display:flex;align-items:center;gap:8px;box-shadow:var(--sh2);font-size:.76rem;color:var(--text);transform:translateX(120%);opacity:0;transition:all .26s cubic-bezier(.34,1.5,.64,1);pointer-events:auto;min-width:200px;}
.toast.show{transform:translateX(0);opacity:1;}
.tl{width:3px;height:22px;border-radius:2px;flex-shrink:0;}


.ord-topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 20px;height:52px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.ord-content{flex:1;overflow-y:auto;padding:16px 20px;}

/* order stat strip */
.ord-stat-strip{display:flex;background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0;}

/* order table */
.ord-thr{display:grid;grid-template-columns:40px 1fr 1fr 110px 110px 100px 90px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 12px;}
.ord-row{display:grid;grid-template-columns:40px 1fr 1fr 110px 110px 100px 90px;padding:0 12px;border-bottom:1px solid var(--border);align-items:center;transition:background .1s;animation:ri .18s ease both;}
.ord-row:last-child{border-bottom:none;}
.ord-row:hover{background:var(--surface);}

/* order form modal */
.ord-plat-sel{display:flex;flex-wrap:wrap;gap:6px;}
.ord-plat-btn{padding:6px 11px;border-radius:7px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-family:'Noto Sans Thai',sans-serif;font-size:.74rem;transition:all .12s;display:flex;align-items:center;gap:4px;}
.ord-plat-btn:hover{border-color:var(--border2);background:var(--white);}
.ord-plat-btn.sel{border-width:2px;background:var(--white);font-weight:600;}

/* order status pills */
.os-pending{background:var(--red-soft);color:#c2410c;}
.os-paid{background:var(--blue-bg);color:var(--blue);}
.os-sent{background:var(--green-bg);color:var(--green);}
.os-cancel{background:var(--gray-bg);color:var(--gray);}


.cust-content{flex:1;overflow-y:auto;padding:16px 20px;}
.cust-thr{display:grid;grid-template-columns:40px 1fr 1fr 100px 100px 100px 80px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 12px;}
.cust-row{display:grid;grid-template-columns:40px 1fr 1fr 100px 100px 100px 80px;padding:0 12px;border-bottom:1px solid var(--border);align-items:center;transition:background .1s;animation:ri .18s ease both;}
.cust-row:last-child{border-bottom:none;}
.cust-row:hover{background:var(--surface);}
.avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:white;flex-shrink:0;}

/* customer detail modal */
.cust-hist-item{padding:8px 10px;background:var(--surface);border-radius:8px;border:1px solid var(--border);margin-bottom:5px;}
.cust-hist-row{display:flex;align-items:center;gap:8px;}
.cust-hist-date{font-size:.68rem;color:var(--text3);min-width:70px;}
.cust-hist-plat{font-size:.75rem;font-weight:500;}
.cust-hist-pkg{font-size:.7rem;color:var(--text2);}
.cust-hist-price{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--blue);}


#loginScreen{
  position:fixed;inset:0;z-index:10000;
  background:#eef1f5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow-y:auto;
  padding:84px 16px 80px;
  animation:fadeIn .3s ease;
}
#loginScreen.hide{animation:fadeOut .25s ease forwards;pointer-events:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

.login-card{
  background:#fff;
  border:none;
  border-radius:18px;
  padding:44px 48px 40px;
  width:420px;
  max-width:100%;
  box-shadow:0 8px 40px rgba(0,0,0,.08);
  animation:slideUp .35s cubic-bezier(.34,1.5,.64,1);
  text-align:center;
}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* icon circle */
.login-icon-wrap{
  width:64px;height:64px;border-radius:50%;
  background:var(--red-soft);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}
.login-icon-svg{width:32px;height:32px;}

.login-title{font-size:1.45rem;font-weight:700;color:var(--text);margin-bottom:6px;}
.login-sub{font-size:.82rem;color:var(--text3);margin-bottom:30px;}

/* fields */
.login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;text-align:left;}
.login-field-label{font-size:.86rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;}
.login-field-icon{font-size:.88rem;}
.login-field-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 16px;transition:all .15s;}
.login-field-row:focus-within{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(224,32,32,.06);}
.login-input{
  flex:1;border:none;background:none;outline:none;
  font-family:'Noto Sans Thai',sans-serif;font-size:.88rem;color:var(--text);
}
.login-input::placeholder{color:var(--text3);}
.login-eye{background:none;border:none;cursor:pointer;color:var(--text3);font-size:.82rem;transition:color .12s;padding:0;line-height:1;}
.login-eye:hover{color:var(--text);}

.login-btn{
  width:100%;padding:13px;border-radius:10px;border:none;
  background:var(--red);color:white;
  font-family:'Noto Sans Thai',sans-serif;font-size:.92rem;font-weight:600;
  cursor:pointer;transition:all .15s;
  margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.login-btn:hover{background:#c51c1c;box-shadow:0 4px 16px rgba(224,32,32,.3);}
.login-btn:disabled{opacity:.6;cursor:not-allowed;}
.login-btn svg{width:17px;height:17px;}

.login-err{
  background:var(--red-bg);border:1px solid rgba(224,32,32,.2);border-radius:8px;
  padding:9px 13px;font-size:.76rem;color:var(--red);margin-top:10px;display:none;text-align:left;
}
.login-err.show{display:block;}
/* ── Inbox Mobile Tabs ── */
.ib-mobile-tabs {
  display: none;
  background: #fff;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ib-tab-btn {
  flex: 1; padding: 8px; border: none; background: none;
  border-radius: 8px; font-family: 'Noto Sans Thai', sans-serif;
  font-size: .78rem; font-weight: 600; color: #9aa0b0;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ib-tab-btn.active { background: var(--red); color: #fff; }

/* ── Social Login Buttons ── */
.social-divider{
  display:flex;align-items:center;gap:12px;margin:20px 0 16px;
}
.social-divider::before,.social-divider::after{
  content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#dde1e9,transparent);
}
.social-divider span{
  font-size:.7rem;color:#c0c8d8;white-space:nowrap;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}
.social-btns{display:flex;flex-direction:column;gap:10px;}
.social-btn{
  width:100%;padding:0 20px;height:48px;border-radius:14px;
  border:none;
  font-family:'Noto Sans Thai',sans-serif;font-size:.88rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all .22s cubic-bezier(.34,1.4,.64,1);
  position:relative;overflow:hidden;
  letter-spacing:.01em;
}
/* shine sweep */
.social-btn::before{
  content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-20deg);transition:left .5s ease;pointer-events:none;
}
.social-btn:hover::before{left:130%;}
.social-btn:active{transform:scale(.97);}
.social-btn .btn-icon{
  width:22px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s cubic-bezier(.34,1.5,.64,1);
}
.social-btn:hover .btn-icon{transform:scale(1.12) rotate(-4deg);}

/* Google — subtle dark card */
.social-btn.google-btn{
  background:#1e2330;
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.social-btn.google-btn:hover{
  background:#252b3b;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transform:translateY(-2px);
}

/* LINE — brand green gradient */
.social-btn.line-btn{
  background:#1e2330;
  color:#fff;
  border:none;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.social-btn.line-btn:hover{
  background:#252b3b;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transform:translateY(-2px);
}
.social-btn.line-btn:active{
  transform:translateY(0) scale(.97);
}

/* ripple */
.social-btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.25);
  transform:scale(0);animation:rippleAnim .55s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0;}}
@media(max-width:430px){
  .social-btn{height:46px;font-size:.84rem;}
}


/* ── OTP input boxes ── */
.otp-box{
  width:44px;height:54px;
  border:2px solid #e4e8ef;border-radius:12px;
  text-align:center;font-size:1.4rem;font-weight:800;
  color:#1e2330;background:#fff;outline:none;
  font-family:'Noto Sans Thai',sans-serif;
  transition:border-color .15s,box-shadow .15s;
  caret-color:transparent;
}
.otp-box:focus{border-color:#e02020;box-shadow:0 0 0 3px rgba(224,32,32,.12);}
.otp-box.filled{border-color:#e02020;background:#fef2f2;}
.otp-box.error{border-color:#e02020;background:#fef2f2;}
@keyframes otpShake{
  10%,90%{transform:translateX(-3px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-5px)}
  40%,60%{transform:translateX(5px)}
}
.otp-shake{animation:otpShake .4s cubic-bezier(.36,.07,.19,.97) both;}

/* footer */
.login-footer,.app-footer{
  position: static;
  padding:16px 28px;
  text-align:center;
  font-size:.88rem;color:var(--text3);
  border-top:1px solid var(--border);
  background:var(--bg);
}
.login-footer strong,.app-footer strong{color:var(--red);font-weight:700;font-size:.9rem;}
/* inline footer inside scroll wraps */
.page-footer-bar{
  text-align:center;font-size:.82rem;color:var(--text3);
  padding:20px 16px 12px;margin-top:auto;flex-shrink:0;
  border-top:1px solid var(--border);
}
.page-footer-bar strong{color:var(--red);font-weight:700;}
@media(max-width:900px){.page-footer-bar{padding-bottom:80px;}}
/* Backend tabs */
.be-tab {
  padding: 8px 16px; border: none; background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); border-radius: 10px 10px 0 0;
  font-family: 'Noto Sans Thai', sans-serif; font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.be-tab.active { background: #fff; color: var(--text); }
.be-tab:hover:not(.active) { background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }
/* no sidebar, full width */
.app{}
.pages{width:100%;}

/* ซ่อน footer — แสดงเฉพาะหน้า home */
@media (max-width: 900px) {
  #mobileBottomNav { z-index: 500; }
}

/* ── LOADING ── */
#loadingOverlay{position:fixed;inset:0;z-index:9999;background:rgba(238,241,245,.75);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;}
#loadingOverlay.show{display:flex;}
.loader-box{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:20px 28px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh2);}
.spinner{width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-txt{font-size:.8rem;color:var(--text2);font-weight:500;}

/* ── NAV USER ── */
.nav-user{padding:0;border-bottom:none;display:flex;align-items:center;gap:8px;position:relative;}
.nav-user-av{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;flex-shrink:0;box-shadow:0 2px 6px rgba(224,32,32,.35);}
.nav-user-info{flex:1;overflow:hidden;}
.nav-user-name{font-size:.76rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-user-role{font-size:.58rem;color:var(--text3);}
.nav-logout{background:none;border:none;cursor:pointer;color:var(--text3);font-size:.82rem;transition:color .12s;padding:2px;flex-shrink:0;}
.nav-logout:hover{color:var(--red);}

/* ── Settings ── */
.settings-section-title{font-size:.63rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);font-weight:600;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border);}
.user-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface);border-radius:8px;border:1px solid var(--border);margin-bottom:5px;}
.user-row-name{font-size:.78rem;font-weight:500;flex:1;}
.user-role-badge{font-size:.6rem;padding:1px 7px;border-radius:10px;background:var(--red-soft);color:var(--red);font-weight:600;}
.user-role-badge.staff{background:var(--blue-bg);color:var(--blue);}
.acc-pass-val{font-family:monospace;font-size:.76rem;color:var(--text2);filter:blur(4px);transition:filter .15s;cursor:pointer;user-select:none;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;}
.acc-pass-val.show{filter:none;}


/* ── Mobile bottom nav ── */
#mobileBottomNav {
  display: flex;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: min(400px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: 64px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
  z-index: 500;
  align-items: center;
  justify-content: space-around;
  padding: 4px 8px;
  gap: 0;
}

/* Bottom nav แสดงทุก screen size */
.mbn-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px 4px;
  min-width: 0;
  border-radius: 999px;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  color: #9aa0b0;
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .1px;
}
.mbn-btn:hover { color: var(--text); transform: translateY(-1px); }
.mbn-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #e02020 0%, #b91c1c 100%);
  box-shadow: 0 4px 16px rgba(224,32,32,.4);
  transform: translateY(-2px);
}
.mbn-btn svg { transition: all .2s; }
.mbn-btn.active svg { stroke: #fff; }


.ib-wrap { flex:1; overflow-y:auto; background:#eef1f5; padding:28px 24px; scrollbar-width:none; }
.ib-wrap::-webkit-scrollbar{display:none;}
.ib-inner { max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }

/* Account card */
.ib-acct-card { background:#fff; border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.07); padding:20px 24px; }
.ib-acct-title { display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:.88rem; font-weight:700; color:#1e2330; }
.ib-search-bar { display:flex; align-items:center; gap:8px; background:#f5f7fa; border:1px solid #e4e8ef; border-radius:10px; padding:8px 14px; margin-bottom:10px; }
.ib-search-bar input { border:none; background:none; font-size:.82rem; color:#1e2330; width:100%; outline:none; font-family:inherit; }
.ib-acct-trigger { display:flex; align-items:center; justify-content:space-between; border:1px solid #e4e8ef; border-radius:10px; padding:9px 14px; cursor:pointer; background:#fff; transition:all .12s; }
.ib-acct-trigger:hover { border-color:#c0c5d0; background:#fafbfc; }
.ib-dot { width:7px; height:7px; border-radius:50%; background:#e4e8ef; flex-shrink:0; }
.ib-acct-label { font-size:.82rem; color:#9aa0b0; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Dropdown modal */
.ib-modal-bg { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.3); }
.ib-drop-panel { position:absolute; background:#fff; border:1.5px solid #e02020; border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.15); width:480px; max-width:92vw; overflow:hidden; animation:mp .15s cubic-bezier(.34,1.4,.64,1); }
.ib-drop-search { padding:12px 14px; border-bottom:1px solid #f0f2f5; }
.ib-drop-search .ib-search-bar { margin-bottom:0; border:1.5px solid #e4e8ef; border-radius:9px; }
.ib-drop-list { max-height:320px; overflow-y:auto; padding:6px; }

/* Inbox + Detail row */
.ib-row { display:flex; gap:16px; align-items:stretch; }

/* List card */
.ib-list-card { width:360px; flex-shrink:0; background:#fff; border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.07); overflow:hidden; display:flex; flex-direction:column; }
.ib-list-header { padding:12px 14px; border-bottom:1px solid #f0f2f5; flex-shrink:0; display:flex; align-items:center; gap:8px; }
.ib-list-title { font-size:.82rem; font-weight:700; color:#1e2330; white-space:nowrap; }
.ib-count { font-size:.62rem; color:#9aa0b0; background:#f0f2f5; padding:1px 7px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.ib-filter-bar { flex:1; display:flex; align-items:center; gap:5px; background:#f5f7fa; border:1px solid #e4e8ef; border-radius:8px; padding:5px 9px; min-width:0; }
.ib-filter-bar input { border:none; background:none; font-size:.73rem; color:#1e2330; width:100%; outline:none; font-family:inherit; min-width:0; }
.ib-refresh-btn { width:28px; height:28px; border-radius:7px; border:1.5px solid #e4e8ef; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#9aa0b0; flex-shrink:0; transition:all .12s; }
.ib-refresh-btn:hover { border-color:#e02020; color:#e02020; }
.ib-list-body { overflow-y:auto; height:460px; display:flex; flex-direction:column; scrollbar-width:none; }
.ib-list-body::-webkit-scrollbar{display:none;}

/* Detail card */
.ib-detail-card { flex:1; background:#fff; border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.07); overflow-y:auto; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; scrollbar-width:none; }
.ib-detail-card::-webkit-scrollbar{display:none;}

/* Empty state */
.ib-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; padding:24px; text-align:center; }
.ib-empty-icon { width:56px; height:56px; border-radius:50%; background:#f0f2f5; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.ib-empty-text { font-size:.78rem; color:#b0b8c8; line-height:1.6; }

/* Inline account selector */
.ib-sel-wrap { position:relative; }
.ib-sel-trigger { display:flex; align-items:center; gap:8px; border:1px solid #e4e8ef; border-radius:10px; padding:10px 14px; cursor:pointer; background:#fff; transition:border-color .12s; }
.ib-sel-trigger:hover { border-color:#c0c5d0; }
.ib-sel-wrap.open .ib-sel-trigger { border-color:#e02020; border-radius:10px 10px 0 0; }
.ib-sel-drop { display:none; border:1px solid #e02020; border-top:none; border-radius:0 0 12px 12px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.1); overflow:hidden; }
.ib-sel-wrap.open .ib-sel-drop { display:block; }
.ib-sel-wrap.open #ibSelArrow { transform:rotate(180deg); }
.ib-sel-search { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #f0f2f5; background:#f9fafb; }
.ib-sel-search input { border:none; background:none; font-size:.82rem; color:#1e2330; width:100%; outline:none; font-family:inherit; }
.ib-sel-list { max-height:240px; overflow-y:auto; padding:6px; }
.adrop-item { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:8px; cursor:pointer; color:#1e2330; font-size:.82rem; background:#fff; }
.adrop-item:hover, .adrop-item:hover * { background:#2563eb !important; color:#fff !important; }
.adrop-sel, .adrop-sel * { background:#2563eb !important; color:#fff !important; font-weight:600; }


@media (max-width: 1280px) {
  .topnav { padding: 0 18px; }
  .nav-item { padding: 7px 11px; font-size: .85rem; }
  .home-scroll > div { padding-left: 28px !important; padding-right: 28px !important; }
}


@media (max-width: 1024px) {
  .topnav { padding: 0 14px; }
  .brand { margin-right: 12px; }
  .brand-text { font-size: .95rem; }
  .nav-item { padding: 7px 9px; font-size: .8rem; gap: 5px; }
  .nav-item .ico { font-size: .9rem; }
  .nav-foot { gap: 4px; }
  .nf-btn { padding: 5px 9px; font-size: .7rem; }

  /* Home */
  .home-scroll > div:first-child { padding: 24px 24px 20px !important; }
  .sys-grid { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); }
  #alertList > div { padding: 12px 14px !important; }

  /* Stock tablet handled by pgS-wrap CSS */
}


@media (max-width: 900px) {

  /* ── Nav ── */
  .nav-items { display: none !important; }
  .nav-foot  { display: none !important; }
  .nav-items.force-show { display: flex !important; }
  .nav-foot.force-show  { display: flex !important; }
  .pages { padding-bottom: 96px; }
  .topnav { padding: 0 14px; height: 54px; grid-template-columns: auto 1fr auto; }
  #navUser { justify-self: end; margin-left: auto; }
  .brand-text { font-size: .9rem; }
  .brand { margin-right: 0; }
  .nav-user-av { width: 32px; height: 32px; font-size: .78rem; }

  /* ── Login ── */
  #loginScreen {
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 100px 16px 40px;
  }
  #loginScreen > div:last-child { display: none !important; }
  .login-card {
    padding: 32px 22px 28px !important;
    border-radius: 20px !important;
    margin: 0;
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.10) !important;
  }
  .login-icon-wrap { width: 52px !important; height: 52px !important; margin-bottom: 14px !important; }
  .login-title { font-size: 1.2rem !important; }
  .login-sub { font-size: .78rem !important; margin-bottom: 20px !important; }
  .login-field { margin-bottom: 12px !important; }
  .login-field-row { padding: 9px 14px !important; }
  .login-btn { padding: 11px !important; margin-top: 4px !important; }

  /* ── HOME ── */
  .home-topbar { padding: 0 16px; height: 46px; }
  .home-topbar .home-title { font-size: .82rem; }
  .home-scroll > div:first-child { padding: 18px 16px 14px !important; }
  .home-scroll > div:first-child h1 { font-size: 1.1rem !important; }
  .sys-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sys-card { padding: 14px 12px; }
  .sys-card-icon { font-size: 1.3rem; margin-bottom: 7px; }
  .sys-card-name { font-size: .8rem; }
  .sys-card-desc { font-size: .68rem; }
  /* alert section */
  .home-scroll > div:nth-child(2) { padding: 0 16px 80px !important; }
  #alertList > div { padding: 12px 14px !important; border-radius: 12px !important; gap: 10px !important; }
  #alertList > div > div:first-child { width: 36px !important; height: 36px !important; font-size: 1.1rem !important; }

  /* ── HOME PAGE MOBILE ── */
  #pgH-wrap { padding: 28px 24px 96px !important; }
  .hn-white-card { border-radius: 16px; min-height: unset; }
  .hn-elist-wrap { margin:0 16px 16px; }
  .hn-elist-scroll { max-height:240px; padding:8px; }
  .hn-elist-fade { height:30px; }
  .hn-plat-scroll { padding: 0 12px 8px !important; }
  .hn-bento { padding: 0 12px 12px !important; grid-template-columns: 1fr 1fr !important; }
  .hn-sec { padding: 14px 12px 8px !important; }

  /* ── STOCK (v3 responsive in CSS) ── */

  /* ── INBOX MOBILE ── */
  .ib-wrap { padding: 8px 8px 80px !important; }
  .ib-inner { gap: 8px !important; }
  .ib-acct-card { padding: 10px 12px !important; border-radius: 12px !important; }
  .ib-acct-title { font-size: .78rem !important; margin-bottom: 8px !important; }
  .ib-acct-trigger { padding: 7px 10px !important; }
  .ib-acct-label { font-size: .76rem !important; }
  /* tab bar สลับ list/detail */
  .ib-mobile-tabs { display: flex !important; }
  .ib-row { flex-direction: column !important; gap: 0 !important; }
  .ib-list-card {
    width: 100% !important; flex: none !important;
    border-radius: 12px !important;
    display: none !important;
  }
  .ib-list-card.mob-active { display: flex !important; }
  .ib-list-header { padding: 8px 10px !important; }
  .ib-list-title { font-size: .76rem !important; }
  .ib-list-body {
    height: calc(100vh - 340px) !important;
    max-height: calc(100vh - 340px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  .ib-detail-card {
    width: 100% !important; flex: none !important;
    border-radius: 12px !important;
    min-height: calc(100vh - 340px) !important;
    display: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  .ib-detail-card.mob-active { display: flex !important; }
  .ib-filter-bar { padding: 3px 7px !important; }
  .ib-filter-bar input { font-size: .7rem !important; }
  /* dropdown bottom sheet — only affects layout when JS sets display:flex */
  #accountModal.open { align-items: flex-end; }
  #accountModal.open .ib-drop-panel {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    top: unset !important; left: unset !important;
  }

  /* ── MODALS ── */
  .mbox {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 92dvh !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
  }
  .mask { align-items: flex-end !important; padding: 0 !important; }

  /* ── ORDERS / CUSTOMERS ── */
  .ord-grid { grid-template-columns: 1fr !important; }
  .cust-grid { grid-template-columns: 1fr !important; }

  /* user dropdown */
  .user-dropdown { right: 0; width: 220px; }
}

/* ── iPhone safe area (notch / home bar) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #mobileBottomNav {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  @media (max-width: 900px) {
    .pages { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    #inboxDetail { bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
    .mbox { bottom: 0 !important; }
  }
}

  /* ── HOME DASHBOARD REDESIGN ── */
  .hd-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .hd-stat-card { border-radius:16px; padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; transition:transform .15s,box-shadow .15s; border:1.5px solid #ffd6dc; }
  .hd-stat-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(224,32,32,.12); }
  .hd-stat-today,.hd-stat-overdue,.hd-stat-soon { background:#fff0f2; }
  .hd-stat-icon { font-size:1.6rem; }
  .hd-stat-num  { font-size:1.8rem; font-weight:900; color:var(--red); line-height:1; }
  .hd-stat-lbl  { font-size:.72rem; font-weight:600; color:#e02020; text-align:center; }
  .hd-list-section { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); border:1px solid var(--border); }
  .hd-list-head { display:flex; align-items:center; gap:8px; padding:14px 16px 12px; border-bottom:1px solid #f5f5f5; }
  .hd-list-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .hd-list-title { font-size:.88rem; font-weight:700; color:var(--text); flex:1; }
  .hd-list-count { background:var(--red); color:#fff; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:99px; }
  .hd-row { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid #f9f9f9; cursor:pointer; transition:background .1s; }
  .hd-row:last-child { border-bottom:none; }
  .hd-row:hover { background:#fafafa; }
  .hd-row-ico { width:38px; height:38px; border-radius:10px; background:#fff0f2; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
  .hd-row-info { flex:1; min-width:0; }
  .hd-row-name { font-size:.88rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hd-row-sub  { font-size:.75rem; color:var(--text3); margin-top:2px; }
  .hd-row-right { text-align:right; flex-shrink:0; }
  .hd-row-tag  { font-size:.72rem; font-weight:700; color:var(--red); background:#fff0f2; padding:3px 8px; border-radius:99px; }
  .hd-row-days { font-size:.7rem; color:var(--text3); margin-top:3px; }


/* ══ drawer.css block ══ */

.drawer-item{width:100%;display:flex;align-items:center;gap:12px;padding:13px 20px;border:none;background:none;cursor:pointer;font-family:'Noto Sans Thai',sans-serif;font-size:.9rem;font-weight:500;color:#374151;text-align:left;transition:background .12s;}
.drawer-item:hover{background:#f9fafb;}
.drawer-item.active{background:#fff0f0;color:var(--red);font-weight:700;}
.drawer-item.active svg{stroke:var(--red);}


/* ══ home.css block ══ */

  #pageHome{background:#eef1f5;}
  #pgH-wrap{flex:1;overflow-y:auto;overflow-x:hidden;background:#eef1f5;padding:28px 24px 100px;scrollbar-width:none;}
  #pgH-wrap::-webkit-scrollbar{display:none;}
  .hn-white-card{max-width:1100px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.07);overflow:hidden;min-height:calc(100vh - 200px);}

  @keyframes hnFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  @keyframes hnShimmer{0%{left:-100%}100%{left:200%}}
  @keyframes hnBarIn{from{width:0}to{width:var(--w,50%)}}
  @keyframes hnPing{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(2);opacity:0}}
  @keyframes hnGlow{0%,100%{box-shadow:0 0 0 0 rgba(224,32,32,.3)}50%{box-shadow:0 0 16px 4px rgba(224,32,32,.12)}}
  @keyframes hnBlink{0%,100%{opacity:1}50%{opacity:.3}}
  @keyframes hnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

  /* HERO */
  .hn-hero{background:#fff;position:relative;overflow:hidden;}
  .hn-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#fff 0%,#fff5f5 40%,#fff 100%);}
  .hn-hero-deco{position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(224,32,32,.08),transparent 70%);}
  .hn-hero-deco2{position:absolute;bottom:-40px;left:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(224,32,32,.05),transparent 70%);}
  .hn-hero-inner{position:relative;z-index:1;padding:18px 16px 16px;}
  .hn-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  .hn-hero-brand{display:flex;align-items:center;gap:9px;}
  .hn-hero-logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#e02020,#c51c1c);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(224,32,32,.35);}
  .hn-hero-logo svg{animation:hnFloat 3s ease-in-out infinite;}
  .hn-hero-bname{font-size:.82rem;font-weight:900;color:#1e2330;}
  .hn-hero-bsub{font-size:.58rem;color:#a0a8b8;margin-top:1px;}
  .hn-hero-notif{width:34px;height:34px;border-radius:10px;background:#f5f5f8;border:1.5px solid #eee;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:relative;}
  .hn-hero-notif:hover{background:#fef2f2;border-color:#fecaca;}
  .hn-notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#e02020;border:1.5px solid #fff;animation:hnGlow 2s ease-in-out infinite;}

  /* DARK BANNER */
  .hn-banner{background:linear-gradient(135deg,#1e2330,#2d3444);border-radius:20px;padding:18px;position:relative;overflow:hidden;cursor:pointer;transition:transform .2s;}
  .hn-banner:hover{transform:scale(1.01);}
  .hn-banner-glow{position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(224,32,32,.25),transparent 70%);}
  .hn-banner-glow2{position:absolute;bottom:-30px;left:30px;width:100px;height:100px;background:radial-gradient(circle,rgba(224,32,32,.1),transparent 70%);}
  .hn-banner-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.04) 50%,transparent 60%);animation:hnShimmer 3s ease-in-out infinite;}
  .hn-banner-top{display:flex;align-items:flex-start;justify-content:space-between;z-index:1;position:relative;margin-bottom:14px;}
  .hn-banner-label{background:rgba(224,32,32,.2);border:1px solid rgba(224,32,32,.35);border-radius:20px;padding:4px 10px;font-size:.6rem;font-weight:700;color:#fca5a5;display:flex;align-items:center;gap:5px;}
  .hn-banner-ldot{width:5px;height:5px;border-radius:50%;background:#f87171;animation:hnBlink 1.4s ease-in-out infinite;}
  .hn-banner-date{font-size:.62rem;color:rgba(255,255,255,.35);}
  .hn-banner-nums{display:flex;gap:6px;z-index:1;position:relative;}
  .hn-bnum{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:12px 8px;text-align:center;transition:all .2s;cursor:pointer;}
  .hn-bnum:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}
  .hn-bnum-n{font-size:1.6rem;font-weight:900;line-height:1;color:#f87171;}
  .hn-bnum-n.red{color:#f87171;}
  .hn-bnum-n.amber{color:#f87171;}
  .hn-bnum-n.gray{color:#f87171;}
  .hn-bnum-l{font-size:.57rem;color:rgba(255,255,255,.35);margin-top:4px;font-weight:600;}


  .hnr-orders-box{
    margin:0 16px 8px;background:#fff;
    border:1.5px solid #f0f2f6;border-radius:22px;overflow:hidden;
    box-shadow:0 4px 24px rgba(0,0,0,.08);position:relative;
  }
  .hnr-orders-box::after{
    content:'';position:absolute;top:-50px;right:-30px;width:150px;height:150px;
    border-radius:50%;background:radial-gradient(circle,rgba(224,32,32,.07),transparent 65%);
    pointer-events:none;animation:hnOrdGlow 5s ease-in-out infinite;
  }
  @keyframes hnOrdGlow{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.3);opacity:1}}
  .hnr-orders-hd{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px 12px;border-bottom:1px solid #f4f5f8;position:relative;z-index:1;
  }
  .hnr-orders-hd-left{display:flex;align-items:center;gap:10px;}
  .hnr-orders-hd-ico{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#fff5f5,#fecaca);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .hnr-orders-hd-title{font-size:.82rem;font-weight:800;color:var(--text);}
  .hnr-orders-hd-sub{font-size:.6rem;color:var(--text3);margin-top:1px;}
  .hnr-orders-hd-count{text-align:right;}
  .hnr-orders-hd-num{font-size:1.4rem;font-weight:900;color:var(--red);line-height:1;letter-spacing:-1px;}
  .hnr-orders-hd-lbl{font-size:.52rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.8px;}
  .hnr-orders-list{max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;z-index:1;}
  .hnr-orders-list::-webkit-scrollbar{display:none;}
  .hnr-orders-list-fade{position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(to top,#fff 30%,transparent);pointer-events:none;z-index:2;border-radius:0 0 22px 22px;}

  /* ── ROW ── */
  .hnr-ord-row{
    display:flex;align-items:center;gap:12px;padding:10px 14px;
    border-bottom:1px solid #f7f8fa;cursor:pointer;position:relative;overflow:hidden;
    transition:all .2s;
    animation:hnOrdIn .4s cubic-bezier(.34,1.3,.64,1) both;
  }
  @keyframes hnOrdIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  .hnr-ord-row:nth-child(1){animation-delay:.04s}.hnr-ord-row:nth-child(2){animation-delay:.08s}
  .hnr-ord-row:nth-child(3){animation-delay:.12s}.hnr-ord-row:nth-child(4){animation-delay:.16s}
  .hnr-ord-row:nth-child(5){animation-delay:.20s}.hnr-ord-row:nth-child(6){animation-delay:.24s}
  .hnr-ord-row:last-child{border-bottom:none;}
  .hnr-ord-row:hover{background:linear-gradient(90deg,#fff5f5,#fff);transform:translateX(4px);}
  /* left accent bar */
  .hnr-ord-row::before{
    content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;
    background:linear-gradient(180deg,#fca5a5,#e02020,#fca5a5);
    border-radius:0 3px 3px 0;opacity:0;
    transform:scaleY(.3);transition:all .2s;
  }
  .hnr-ord-row:hover::before{opacity:1;transform:scaleY(1);}
  /* shimmer sweep */
  .hnr-ord-row::after{
    content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(224,32,32,.04),transparent);
    transform:skewX(-15deg);transition:left .5s ease;pointer-events:none;
  }
  .hnr-ord-row:hover::after{left:130%;}

  /* ── ICO ── */
  .hnr-ord-row-ico{
    width:46px;height:46px;border-radius:14px;overflow:hidden;
    background:var(--surface);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border:1.5px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,.08),0 0 0 0 rgba(224,32,32,0);
    transition:all .25s cubic-bezier(.34,1.56,.64,1);
  }
  .hnr-ord-row:hover .hnr-ord-row-ico{
    transform:scale(1.12) rotate(-4deg);
    box-shadow:0 6px 16px rgba(224,32,32,.2),0 0 0 4px rgba(224,32,32,.08);
    border-color:rgba(224,32,32,.3);
  }
  .hnr-ord-row-ico img{width:100%;height:100%;object-fit:cover;}

  /* ── BODY ── */
  .hnr-ord-row-body{flex:1;min-width:0;}
  .hnr-ord-row-name{font-size:.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;transition:color .2s;}
  .hnr-ord-row:hover .hnr-ord-row-name{color:var(--red);}
  .hnr-ord-row-meta{display:flex;align-items:center;gap:6px;}
  .hnr-ord-row-cust{font-size:.6rem;color:var(--text3);display:flex;align-items:center;gap:3px;}
  .hnr-ord-row-date{font-size:.58rem;color:var(--text3);}

  /* ── RIGHT ── */
  .hnr-ord-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
  .hnr-ord-row-badge{
    font-size:.56rem;font-weight:800;padding:4px 10px;border-radius:20px;
    white-space:nowrap;display:flex;align-items:center;gap:3px;
    transition:all .2s;position:relative;overflow:hidden;
  }
  .hnr-ord-row-badge::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    transform:translateX(-100%);animation:badgeShine 2.5s ease-in-out infinite;
  }
  @keyframes badgeShine{0%,70%,100%{transform:translateX(-100%)}40%{transform:translateX(100%)}}
  .hnr-ord-row-badge.ok{
    background:linear-gradient(135deg,#e02020,#c01010);color:#fff;
    box-shadow:0 3px 10px rgba(224,32,32,.35);
  }
  .hnr-ord-row:hover .hnr-ord-row-badge.ok{box-shadow:0 4px 14px rgba(224,32,32,.5);transform:scale(1.05);}
  .hnr-ord-row-badge.pend{background:#fef3c7;color:#d97706;border:1px solid #fde68a;}
  .hnr-ord-row-cnt{font-size:.56rem;color:var(--text3);font-weight:600;}
  .hnr-ord-empty{text-align:center;padding:28px 16px;color:var(--text3);font-size:.76rem;position:relative;z-index:1;}
  .hnr-orders-scroll{display:none;}

  /* QUICK STATS */
  .hn-qs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#e8e8ec;margin-bottom:2px;}
  .hn-qs-item{background:#fff;padding:13px 6px;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
  .hn-qs-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:0;background:var(--c);transition:height .2s;opacity:.07;}
  .hn-qs-item:hover::after{height:100%;}
  .hn-qs-n{font-size:1.2rem;font-weight:900;color:var(--c,#1e2330);line-height:1;transition:transform .2s;}
  .hn-qs-item:hover .hn-qs-n{transform:scale(1.1);}
  .hn-qs-l{font-size:.55rem;color:#a0a8b8;margin-top:4px;font-weight:600;}

  /* SECTION HEAD */
  .hn-sec{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;}
  .hn-sec-left{display:flex;align-items:center;gap:8px;}
  .hn-sec-bar{width:4px;height:18px;border-radius:4px;background:linear-gradient(180deg,#e02020,#ff6b6b);box-shadow:0 2px 8px rgba(224,32,32,.3);}
  .hn-sec-bar.dark{background:linear-gradient(180deg,#1e2330,#374151);box-shadow:none;}
  .hn-sec-title{font-size:.86rem;font-weight:900;color:#1e2330;}
  .hn-sec-badge{background:linear-gradient(135deg,#e02020,#c51c1c);color:#fff;font-size:.58rem;font-weight:900;padding:3px 9px;border-radius:20px;box-shadow:0 3px 8px rgba(224,32,32,.3);animation:hnGlow 2s ease-in-out infinite;}
  .hn-sec-more{font-size:.64rem;color:#c0c8d8;cursor:pointer;font-weight:700;display:flex;align-items:center;gap:3px;transition:color .15s;}
  .hn-sec-more:hover{color:#e02020;}

  /* EXPIRY LIST */
  .hn-elist{padding:0 16px;display:flex;flex-direction:column;gap:8px;margin-bottom:4px;}
  .hn-ecard{background:#fff;border-radius:18px;padding:13px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .22s cubic-bezier(.34,1.3,.64,1);position:relative;overflow:hidden;animation:hnFadeUp .4s both;box-shadow:0 2px 10px rgba(0,0,0,.05);}
  .hn-ecard:nth-child(2){animation-delay:.06s}.hn-ecard:nth-child(3){animation-delay:.12s}
  .hn-ecard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac,#e02020);border-radius:18px 0 0 18px;}
  .hn-ecard:hover{transform:translateX(5px) scale(1.01);box-shadow:0 8px 24px rgba(0,0,0,.1);}
  .hn-ec-shine{position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .4s;}
  .hn-ecard:hover .hn-ec-shine{left:200%;}
  .hn-ec-ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:transform .2s;}
  .hn-ecard:hover .hn-ec-ico{transform:scale(1.1) rotate(-6deg);}
  .hn-ec-name{font-size:.82rem;font-weight:800;color:#1e2330;}
  .hn-ec-sub{font-size:.61rem;color:#b0b8c8;margin-top:2px;}
  .hn-ec-tag{display:inline-block;padding:5px 11px;border-radius:20px;font-size:.61rem;font-weight:900;margin-left:auto;flex-shrink:0;}
  .hn-ec-ping{position:relative;display:inline-block;width:8px;height:8px;margin-left:8px;flex-shrink:0;}
  .hn-ec-ping::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--pc,#e02020);animation:hnPing 1.5s ease-out infinite;}
  .hn-ec-ping::after{content:'';position:absolute;inset:1px;border-radius:50%;background:var(--pc,#e02020);}

  /* PLATFORM */
  .hn-plat-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:0 16px 8px;margin-bottom:4px;}
  .hn-plat-scroll::-webkit-scrollbar{display:none;}
  .hn-pcard{flex-shrink:0;width:105px;background:#fff;border-radius:20px;padding:15px 11px 13px;text-align:center;cursor:pointer;transition:all .25s cubic-bezier(.34,1.4,.64,1);box-shadow:0 3px 12px rgba(0,0,0,.06);position:relative;overflow:hidden;animation:hnFadeUp .4s .15s both;border:1.5px solid transparent;}
  .hn-pcard:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 18px 36px rgba(0,0,0,.13);border-color:rgba(224,32,32,.12);}
  .hn-pcard-bg{position:absolute;bottom:-20px;right:-20px;width:70px;height:70px;border-radius:50%;background:var(--pc,#e02020);opacity:.05;transition:all .25s;}
  .hn-pcard:hover .hn-pcard-bg{transform:scale(2.2);opacity:.08;}
  .hn-pcard-ico{font-size:26px;display:block;margin-bottom:8px;transition:transform .25s;}
  .hn-pcard:hover .hn-pcard-ico{transform:scale(1.22) rotate(-8deg);}
  .hn-pcard-name{font-size:.72rem;font-weight:900;color:#1e2330;}
  .hn-pcard-count{font-size:.58rem;color:#b0b8c8;margin-top:3px;font-weight:600;}
  .hn-pcard-bar{height:4px;background:#f0f0f5;border-radius:4px;margin-top:10px;overflow:hidden;}
  .hn-pcard-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--pc,#e02020),var(--pc2,#ff6b6b));animation:hnBarIn .9s .5s cubic-bezier(.34,1.3,.64,1) both;}

  /* BENTO */
  .hn-bento{padding:0 16px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px;}
  .hn-bento-wide{grid-column:1/-1;}
  .hn-bcard{background:#fff;border-radius:20px;padding:16px;cursor:pointer;transition:all .22s cubic-bezier(.34,1.3,.64,1);position:relative;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05);animation:hnFadeUp .4s .2s both;}
  .hn-bcard:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.1);}
  .hn-bcard-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ba),var(--ba2,var(--ba)));border-radius:20px 20px 0 0;}
  .hn-bc-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:10px;}
  .hn-bc-num{font-size:1.8rem;font-weight:900;color:var(--bn,#1e2330);line-height:1;}
  .hn-bc-lbl{font-size:.62rem;color:#a0a8b8;margin-top:5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
  .hn-bc-sub{font-size:.59rem;color:#c8cdd8;margin-top:2px;}
  .hn-bwide-inner{display:flex;align-items:center;justify-content:space-around;}
  .hn-bw-item{text-align:center;}
  .hn-bw-n{font-size:1.35rem;font-weight:900;line-height:1;}
  .hn-bw-l{font-size:.57rem;color:#a0a8b8;margin-top:4px;font-weight:600;}
  .hn-bw-div{width:1px;height:30px;background:#f0f0f5;}


  @keyframes hPulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(224,32,32,.6)} 70%{box-shadow:0 0 0 8px rgba(224,32,32,0)} }
  @keyframes hShimBar { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
  @keyframes hBarRun { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }
  @keyframes hCardIn { from{opacity:0;transform:translateY(28px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
  @keyframes hIconPulse { 0%{transform:scale(.8);opacity:.8} 100%{transform:scale(1.8);opacity:0} }
  @keyframes hSlideIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

  /* ── Section header ── */
  .hnr-sec-head { display:flex; align-items:center; justify-content:space-between; padding:28px 28px 16px; }
  .hnr-sec-left { display:flex; align-items:center; gap:14px; }
  .hnr-hot-badge { display:inline-flex; align-items:center; gap:7px; background:linear-gradient(135deg,rgba(224,32,32,.13),rgba(180,20,20,.08)); border:1.5px solid rgba(224,32,32,.28); border-radius:20px; padding:6px 16px; font-size:11px; color:#e02020; font-weight:800; letter-spacing:1.5px; flex-shrink:0; }
  .hnr-hot-dot { width:7px; height:7px; background:#e02020; border-radius:50%; box-shadow:0 0 8px #e02020; animation:hPulseDot 1.5s infinite; display:inline-block; }
  .hnr-sec-title { font-size:1.1rem; font-weight:900; color:#1C1C1E; letter-spacing:-.3px; line-height:1; }
  .hnr-sec-sub { font-size:11px; color:#8E8E93; margin-top:4px; font-weight:500; }
  .hnr-sec-cnt { display:inline-flex; align-items:center; justify-content:center; background:#e02020; color:#fff; font-size:.6rem; font-weight:800; padding:2px 9px; border-radius:20px; margin-left:6px; vertical-align:middle; }
  .hnr-see-btn { display:flex; align-items:center; gap:7px; background:linear-gradient(135deg,#e02020,#b91c1c); border:none; border-radius:40px; padding:11px 22px; font-family:'Noto Sans Thai',sans-serif; font-size:13px; font-weight:700; color:white; cursor:pointer; transition:all .3s cubic-bezier(.34,1.56,.64,1); box-shadow:0 4px 20px rgba(224,32,32,.38); white-space:nowrap; flex-shrink:0; }
  .hnr-see-btn:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 10px 30px rgba(224,32,32,.5); }

  /* ── Expiry list ── */
  .hn-elist-wrap { margin:0 28px 16px; border:1.5px solid #e8eaed; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); position:relative; background:#fff; }
  .hn-elist-scroll { max-height:272px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#e4e8ef transparent; padding:8px; display:flex; flex-direction:column; gap:6px; }
  .hn-elist-scroll::-webkit-scrollbar { width:4px; }
  .hn-elist-scroll::-webkit-scrollbar-thumb { background:#e4e8ef; border-radius:4px; }
  .hn-elist-fade { position:absolute; bottom:0; left:0; right:0; height:36px; background:linear-gradient(to top,rgba(255,255,255,.98),transparent); pointer-events:none; border-radius:0 0 14px 14px; }
  .hn-card { background:#fff; border-radius:16px; padding:15px 18px; cursor:pointer; border:1.5px solid #e8eaed; transition:all .22s cubic-bezier(.34,1.3,.64,1); position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; box-shadow:0 2px 12px rgba(0,0,0,.08); }
  .hn-card:hover { border-color:#fca5a5; box-shadow:0 8px 24px rgba(224,32,32,.1); transform:translateX(5px); }
  .hn-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--card-accent,#e02020); border-radius:16px 0 0 16px; }

  /* ── Platform cards — pcard style ── */
  .hnr-plat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; padding:0 28px 8px; }
  .hnr-plat-card { position:relative; background:#fff; border-radius:22px; border:1.5px solid #e8eaed; box-shadow:0 2px 12px rgba(0,0,0,.08),0 4px 24px rgba(0,0,0,.06); overflow:hidden; cursor:pointer; transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .38s ease,border-color .3s; animation:hCardIn .5s ease forwards; opacity:0; }
  .hnr-plat-card:nth-child(1){animation-delay:.05s}.hnr-plat-card:nth-child(2){animation-delay:.13s}.hnr-plat-card:nth-child(3){animation-delay:.21s}
  .hnr-plat-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 48px rgba(224,32,32,.18),0 0 0 2px #e02020; border-color:#e02020; }
  /* glow blob แดงซ้ายล่าง — ตลอดเวลา */
  .hnr-plat-glow { position:absolute; right:-20px; top:-20px; width:100px; height:100px; background:radial-gradient(circle,rgba(224,32,32,.07),transparent 70%); border-radius:50%; pointer-events:none; transition:transform .4s; }
  .hnr-plat-card:hover .hnr-plat-glow { transform:scale(1.5); }
  /* shimmer bar ด้านบน */
  .hnr-plat-bar { height:3px; background:#fecaca; position:relative; overflow:hidden; transition:height .3s; }
  .hnr-plat-bar::after { content:''; position:absolute; top:0; left:0; width:40%; height:100%; background:linear-gradient(90deg,transparent,#e02020,#f87171,#e02020,transparent); animation:hBarRun 2.5s linear infinite; }
  .hnr-plat-card:hover .hnr-plat-bar { height:4px; }
  .hnr-plat-card:hover .hnr-plat-bar::after { animation-duration:1s; }
  /* pulse ring รอบ icon */
  /* ico — ไม่มี overflow:hidden เพื่อให้ pulse ring ออกมาได้ */
  .hnr-plat-ico { width:50px; height:50px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; transition:transform .38s cubic-bezier(.34,1.56,.64,1); position:relative; box-shadow:0 0 0 5px rgba(224,32,32,.07), 0 0 0 11px rgba(224,32,32,.03); }
  /* pulse ring ออกนอก ico ได้ */
  .hnr-plat-ico::after { content:''; position:absolute; inset:-6px; border-radius:21px; border:2px solid rgba(224,32,32,.3); animation:scPulseRing 2.2s ease-out infinite; pointer-events:none; }
  /* shimmer clip ด้วย img wrapper */
  .hnr-plat-ico-img { width:100%; height:100%; border-radius:12px; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; }
  .hnr-plat-ico-img::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:scIcoShimmer 2.5s ease-in-out infinite; pointer-events:none; z-index:2; }
  .hnr-plat-inner { padding:18px 18px 16px; display:flex; align-items:center; gap:14px; }
  .hnr-plat-ico img { width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; position:relative; z-index:1; }
  .hnr-plat-card:hover .hnr-plat-ico { transform:scale(1.18) rotate(-7deg); }
  .hnr-plat-info { flex:1; min-width:0; }
  .hnr-plat-name { font-weight:700; font-size:13px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hnr-plat-total { font-size:1.7rem; font-weight:900; color:#1C1C1E; line-height:1; letter-spacing:-1.5px; }
  .hnr-plat-free { font-size:11px; font-weight:700; color:#e02020; margin-top:3px; }

  /* ── Stat cards — hstat style ── */
  .hnr-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 28px 16px; }
  /* red glow ด้านหลัง icon ส่องออกมาตลอด */
  .hnr-stat-card { background:white; border-radius:16px; border:1.5px solid #f0f2f6; padding:18px 18px; display:flex; align-items:center; gap:14px; box-shadow:0 2px 12px rgba(0,0,0,.06); cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease; position:relative; overflow:hidden; }
  /* top bar fire div */
  .hnr-sc-fire { position:absolute; top:0; left:0; right:0; height:3px; border-radius:16px 16px 0 0; background:#fecaca; overflow:hidden; z-index:2; }
  .hnr-sc-fire::after { content:''; position:absolute; top:0; left:0; width:40%; height:100%; background:linear-gradient(90deg,transparent,#e02020,#f87171,#e02020,transparent); animation:hBarRun 2s linear infinite; }
  .hnr-stat-card::before { content:none; }
  /* ambient red glow blob ซ้ายล่าง */
  .hnr-stat-card .hnr-sc-glow-blob { position:absolute; right:-20px; top:-20px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle,rgba(224,32,32,.08),transparent 70%); pointer-events:none; }
  .hnr-stat-card::after { content:''; position:absolute; top:-50%; left:-75%; width:50%; height:200%; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:skewX(-20deg); transition:left .5s ease; pointer-events:none; }
  .hnr-stat-card:hover::after { left:130%; }
  .hnr-stat-card:hover { transform:translateY(-5px) scale(1.02); }
  .hnr-sc-green:hover, .hnr-sc-red:hover, .hnr-sc-amber:hover, .hnr-sc-gray:hover { box-shadow:0 12px 28px rgba(224,32,32,.22); }
  /* animation delays */
  .hnr-stat-grid .hnr-stat-card:nth-child(1){animation:hSlideIn .4s ease both .05s}
  .hnr-stat-grid .hnr-stat-card:nth-child(2){animation:hSlideIn .4s ease both .12s}
  .hnr-stat-grid .hnr-stat-card:nth-child(3){animation:hSlideIn .4s ease both .19s}
  .hnr-stat-grid .hnr-stat-card:nth-child(4){animation:hSlideIn .4s ease both .26s}
  /* icon — red halo glow ส่องออกมาจากด้านหลัง */
  .hnr-sc-ico { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; background:linear-gradient(135deg,#e02020,#c01010); box-shadow:0 4px 14px rgba(224,32,32,.3), 0 0 0 6px rgba(224,32,32,.07), 0 0 0 12px rgba(224,32,32,.03); }
  /* pulse ring กระจายออก */
  .hnr-sc-ico::after { content:''; position:absolute; inset:-6px; border-radius:20px; border:2px solid rgba(224,32,32,.35); animation:scPulseRing 2s ease-out infinite; pointer-events:none; }
  @keyframes scPulseRing { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.4);opacity:0} }
  /* shimmer วิ่งบน icon */
  .hnr-sc-ico::before { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); animation:scIcoShimmer 2.5s ease-in-out infinite; border-radius:14px; pointer-events:none; }
  @keyframes scIcoShimmer { 0%{left:-100%} 50%,100%{left:130%} }
  /* layout: icon ซ้าย body ขวา */
  .hnr-sc-body { flex:1; min-width:0; display:flex; flex-direction:column; }
  .hnr-sc-num { font-size:1.9rem; font-weight:900; color:#1C1917; line-height:1; letter-spacing:-1.5px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
  .hnr-stat-card:hover .hnr-sc-num { transform:scale(1.08); }
  .hnr-sc-lbl { font-size:.72rem; color:#9aa0b0; font-weight:600; margin-top:4px; }
  .hnr-sc-progress { height:4px; background:#f3f4f6; border-radius:4px; margin-top:10px; overflow:hidden; }
  .hnr-sc-progress-fill { height:100%; background:linear-gradient(90deg,#e02020,#f87171,#e02020); background-size:200%; animation:hShimBar 2s linear infinite; border-radius:4px; transition:width 1.2s cubic-bezier(.34,1.2,.64,1); width:0%; }

  /* ── Total banner ── */
  .hnr-total-wrap { padding:0 28px 28px; }
  .hnr-total-banner { background:linear-gradient(135deg,#1e2330,#2d3444); border-radius:20px; padding:22px 28px; border:1.5px solid rgba(255,255,255,.06); display:flex; align-items:center; cursor:pointer; position:relative; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.2); transition:transform .25s ease,box-shadow .25s ease; }
  .hnr-total-banner:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.28); }
  .hnr-total-banner::after { content:''; position:absolute; top:-50%; left:-75%; width:50%; height:200%; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%); transform:skewX(-20deg); transition:left .6s ease; pointer-events:none; }
  .hnr-total-banner:hover::after { left:130%; }
  .hnr-tb-glow { position:absolute; top:-40px; right:80px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(224,32,32,.22),transparent 70%); pointer-events:none; }
  .hnr-tb-glow2 { position:absolute; bottom:-50px; left:40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle,rgba(224,32,32,.1),transparent 70%); pointer-events:none; }
  .hnr-tb-item { flex:1; text-align:center; position:relative; z-index:1; }
  .hnr-tb-num { font-size:1.8rem; font-weight:900; color:#fff; line-height:1; letter-spacing:-1.5px; }
  .hnr-tb-lbl { font-size:.58rem; color:rgba(255,255,255,.38); margin-top:5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; }
  .hnr-tb-div { width:1px; height:44px; background:rgba(255,255,255,.08); flex-shrink:0; position:relative; z-index:1; }

  @media(max-width:768px) {
    .hnr-sec-head { padding:20px 16px 12px; }
    .hn-elist { padding:0 16px 8px; }
    .hnr-plat-grid { grid-template-columns:repeat(2,1fr); padding:0 16px 8px; gap:10px; }
    .hnr-stat-grid { grid-template-columns:repeat(2,1fr); padding:0 16px 12px; gap:10px; }
    .hnr-total-wrap { padding:0 16px 20px; }
    .hnr-sc-num { font-size:1.3rem; }
    .hnr-plat-total { font-size:1.4rem; }
    .hnr-see-btn { padding:9px 14px; font-size:12px; border-radius:30px; }
  }

  /* EXPIRY CARDS */
  .hn-card{background:#fafafa;border-radius:10px;padding:10px 14px;cursor:pointer;border-left:3px solid #e02020 !important;border:1.5px solid #f0f2f6;animation:hnFadeUp .35s both;transition:all .15s;display:flex;align-items:center;gap:10px;min-height:62px;}
  .hn-card:hover{background:#fff8f8;border-color:#fca5a5 !important;box-shadow:0 2px 10px rgba(224,32,32,.08);}
  .hn-card::before{background:#e02020 !important;}
  .hn-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.1);}
  .hn-card{background:#fafafa;border-radius:10px;padding:10px 12px;cursor:pointer;border-left:3px solid #e02020 !important;border:1.5px solid #f0f2f6;animation:hnFadeUp .35s both;transition:all .15s;}
  .hn-card:hover{background:#fff8f8;border-color:#fca5a5 !important;}
  .hn-card::before{background:#e02020 !important;}
  .hn-card-top{display:flex;align-items:center;gap:10px;width:100%;}
  .hn-card-ico{width:34px;height:34px;border-radius:9px;background:#f4f5f8;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .hn-card-info{flex:1;min-width:0;}
  .hn-card-name{font-size:.8rem;font-weight:700;color:#1e2330;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hn-card-sub{font-size:.65rem;color:#9aa0b0;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hn-card-sub-dot{width:3px;height:3px;border-radius:50%;background:#c8cdd8;display:inline-block;margin:0 2px;}
  .hn-card-tag{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:20px;flex-shrink:0;white-space:nowrap;}
  .hn-card-tag.t-today{background:#fef2f2;color:#e02020;}
  .hn-card-tag.t-overdue{background:#f3f4f6;color:#6b7280;}
  .hn-card-tag.t-soon{background:#fef2f2;color:#e02020;}

  /* EMPTY STATE */
  .hn-empty{padding:24px 14px;text-align:center;color:#b0b8c8;font-size:.78rem;display:flex;flex-direction:column;align-items:center;gap:8px;}
  .hn-empty-ico{width:44px;height:44px;border-radius:50%;background:#f4f5f8;display:flex;align-items:center;justify-content:center;}

  /* PLATFORM CARDS */
  .hn-plat-card{flex-shrink:0;background:#fff;border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .18s,box-shadow .18s;animation:hnFadeUp .35s both;min-width:130px;}
  .hn-plat-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.1);}
  .hn-plat-ico{font-size:22px;width:38px;height:38px;border-radius:10px;background:#f4f5f8;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .hn-plat-info{flex:1;min-width:0;}
  .hn-plat-name{font-size:.75rem;font-weight:700;color:#1e2330;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hn-plat-cnt{font-size:1.1rem;font-weight:900;color:#1e2330;line-height:1.2;}
  .hn-plat-lbl{font-size:.6rem;color:#16a34a;font-weight:600;}
  

/* ══ home_balance.css block ══ */

        .hd-bal-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
        .hd-bal-card{
          background:#fff;
          border:1.5px solid #f0f2f6;
          border-radius:20px;padding:16px;
          position:relative;overflow:hidden;cursor:default;
          box-shadow:0 2px 16px rgba(0,0,0,.06);
          transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
        }
        .hd-bal-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(224,32,32,.12),0 0 0 1px rgba(224,32,32,.1);}
        /* animated corner glow */
        .hd-bal-corner{position:absolute;top:-30px;right:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(224,32,32,.12) 0%,transparent 70%);animation:hd-corner-pulse 3s ease-in-out infinite;pointer-events:none;}
        .hd-bal-corner2{position:absolute;bottom:-20px;left:-20px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(224,32,32,.07) 0%,transparent 70%);animation:hd-corner-pulse 3s ease-in-out infinite 1.5s;pointer-events:none;}
        @keyframes hd-corner-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}
        /* shine sweep */
        .hd-bal-shine{position:absolute;top:-50%;left:-75%;width:45%;height:200%;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;}
        .hd-bal-card:hover .hd-bal-shine{left:130%;}
        /* grid lines */
        .hd-bal-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(224,32,32,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(224,32,32,.04) 1px,transparent 1px);background-size:18px 18px;mask-image:radial-gradient(ellipse 100% 100% at 100% 0%,black 20%,transparent 80%);pointer-events:none;}
        /* top row */
        .hd-bal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;position:relative;z-index:1;}
        .hd-bal-icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#e02020,#c01010);border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-shadow:0 4px 14px rgba(224,32,32,.45),0 0 0 6px rgba(224,32,32,.1),0 0 0 12px rgba(224,32,32,.05);}
        .hd-bal-icon::after{content:'';position:absolute;inset:-6px;border-radius:20px;border:2px solid rgba(224,32,32,.4);animation:scPulseRing 2s ease-out infinite;pointer-events:none;}
        .hd-bal-icon::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:scIcoShimmer 2.5s ease-in-out infinite;border-radius:14px;pointer-events:none;}
        .hd-bal-badge{display:flex;align-items:center;gap:3px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:20px;padding:2px 7px;}
        .hd-bal-dot{width:4px;height:4px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80;animation:hd-pulse 2s ease-in-out infinite;flex-shrink:0;}
        .hd-bal-live{font-size:.5rem;font-weight:800;color:#4ade80;letter-spacing:.3px;text-transform:uppercase;}
        @keyframes hd-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
        /* content */
        .hd-bal-lbl{font-size:.55rem;font-weight:700;color:#b0b8c8;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;position:relative;z-index:1;}
        .hd-bal-amt{font-size:1.7rem;font-weight:900;color:#1e2330;line-height:1;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;position:relative;z-index:1;text-shadow:none;}
        /* bottom */
        .hd-bal-foot{display:flex;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid #f0f2f6;position:relative;z-index:1;}
        .hd-bal-sub{font-size:.55rem;color:#b0b8c8;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
        .hd-bal-wave{margin-left:auto;display:flex;align-items:flex-end;gap:2px;height:14px;}
        .hd-bal-wave span{width:3px;border-radius:3px;background:rgba(224,32,32,.5);animation:hd-wave 1.2s ease-in-out infinite;}
        .hd-bal-wave span:nth-child(1){height:5px;animation-delay:0s;}
        .hd-bal-wave span:nth-child(2){height:10px;animation-delay:.15s;}
        .hd-bal-wave span:nth-child(3){height:7px;animation-delay:.3s;}
        .hd-bal-wave span:nth-child(4){height:12px;animation-delay:.45s;}
        .hd-bal-wave span:nth-child(5){height:6px;animation-delay:.6s;}
        @keyframes hd-wave{0%,100%{transform:scaleY(1);opacity:.5}50%{transform:scaleY(1.6);opacity:1}}
        

/* ══ topup.css block ══ */

  #pgT-wrap{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);padding:20px 16px 20px;}
  .t-inner{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
  /* hero */
  .t-hero{background:var(--text);border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;}
  .t-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 85% -10%,rgba(224,32,32,.3),transparent 55%),radial-gradient(ellipse at 10% 110%,rgba(224,32,32,.15),transparent 50%);pointer-events:none;}
  .t-hero-ico{width:44px;height:44px;border-radius:13px;background:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(224,32,32,.4);z-index:1;}
  .t-hero-title{font-size:1rem;font-weight:900;color:#fff;z-index:1;}
  .t-hero-sub{font-size:.72rem;color:rgba(255,255,255,.45);margin-top:3px;z-index:1;}
  .t-hero-badge{margin-left:auto;background:rgba(224,32,32,.2);color:#ff9999;font-size:.62rem;font-weight:700;padding:3px 10px;border-radius:20px;z-index:1;border:1px solid rgba(224,32,32,.3);}
  /* lang bar */
  .t-lang-bar{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid var(--border);display:flex;align-items:flex-end;gap:10px;}
  .t-lang-group{flex:1;display:flex;flex-direction:column;gap:5px;}
  .t-lang-label{font-size:.68rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;}
  .t-lang-select{width:100%;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:.84rem;font-family:'Noto Sans Thai',sans-serif;color:var(--text);background:#fff;outline:none;cursor:pointer;transition:border-color .15s;}
  .t-lang-select:focus{border-color:var(--red);}
  .t-swap-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all .15s;flex-shrink:0;margin-bottom:1px;}
  .t-swap-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-soft);transform:rotate(180deg);}
  /* text areas */
  .t-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:600px){.t-grid{grid-template-columns:1fr;}}
  .t-box{background:#fff;border-radius:14px;border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.05);display:flex;flex-direction:column;overflow:hidden;}
  .t-box-head{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fafbfc;}
  .t-box-label{font-size:.74rem;font-weight:700;color:var(--text2);display:flex;align-items:center;gap:5px;}
  .t-box-action{border:none;background:none;cursor:pointer;font-size:.72rem;color:var(--text3);font-family:'Noto Sans Thai',sans-serif;display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;transition:all .12s;}
  .t-box-action:hover{background:var(--red-soft);color:var(--red);}
  .t-textarea{flex:1;min-height:180px;border:none;padding:14px;font-size:.88rem;font-family:'Noto Sans Thai',sans-serif;resize:none;outline:none;color:var(--text);line-height:1.7;background:transparent;}
  .t-textarea.out{background:#fafbfc;color:var(--text);}
  .t-box-foot{padding:8px 14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fafbfc;}
  .t-translate-btn{background:var(--red);color:#fff;border:none;border-radius:9px;padding:8px 22px;font-size:.84rem;font-weight:700;font-family:'Noto Sans Thai',sans-serif;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;box-shadow:0 3px 10px rgba(224,32,32,.25);}
  .t-translate-btn:hover{background:#c51c1c;box-shadow:0 5px 16px rgba(224,32,32,.35);transform:translateY(-1px);}
  .t-translate-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(224,32,32,.2);}
  .t-status{font-size:.72rem;color:var(--text3);min-height:16px;}
  .t-char{font-size:.7rem;color:var(--text3);}
  /* history */
  .t-history-card{background:#fff;border-radius:14px;border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.05);overflow:hidden;}
  .t-history-head{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fafbfc;}
  .t-history-title{font-size:.82rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;}
  .t-history-clear{border:none;background:none;cursor:pointer;font-size:.72rem;color:var(--text3);font-family:'Noto Sans Thai',sans-serif;padding:3px 8px;border-radius:6px;transition:all .12s;}
  .t-history-clear:hover{background:var(--red-soft);color:var(--red);}
  #tHistory{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;padding:10px;}
  .t-hist-item{padding:9px 12px;border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:all .12s;}
  .t-hist-item:hover{border-color:var(--red);background:var(--red-soft);}
  

/* ══ sms.css block ══ */


  #pgSms-wrap{flex:1;overflow-y:auto;background:var(--bg);padding:24px 20px 96px;display:flex;flex-direction:column;align-items:center;scrollbar-width:none;}
  #pgSms-wrap::-webkit-scrollbar{display:none;}
  .sms-inner{width:100%;max-width:860px;display:flex;flex-direction:column;gap:16px;}

  /* HERO */
  .sms-hero{background:var(--text);border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;flex-shrink:0;}
  .sms-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 85% -10%,rgba(224,32,32,.25),transparent 55%),radial-gradient(ellipse at 15% 110%,rgba(224,32,32,.12),transparent 50%);pointer-events:none;}
  .sms-hero-icon{width:44px;height:44px;border-radius:13px;background:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(224,32,32,.4);z-index:1;}
  .sms-hero-title{font-size:1rem;font-weight:900;color:#fff;z-index:1;display:flex;align-items:center;gap:8px;}
  .sms-hero-online{font-size:.62rem;background:rgba(74,222,128,.15);color:#4ade80;padding:2px 8px;border-radius:20px;font-weight:700;display:inline-flex;align-items:center;gap:4px;}
  .sms-online-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:smsPulse 2s infinite;}
  @keyframes smsPulse{0%,100%{opacity:1}50%{opacity:.3}}
  .sms-hero-sub{font-size:.72rem;color:rgba(255,255,255,.45);margin-top:3px;z-index:1;}
  .sms-balance{margin-left:auto;text-align:right;z-index:1;}
  .sms-balance-num{font-size:1.35rem;font-weight:900;color:#fff;line-height:1;font-family:monospace;}
  .sms-balance-lbl{font-size:.62rem;color:rgba(255,255,255,.4);margin-top:2px;}

  /* SHARED CARD */
  .sms-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);}
  .sms-card-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
  .sms-card-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;}
  .sms-card-title{font-size:.86rem;font-weight:800;color:var(--text);}
  .sms-card-sub{font-size:.66rem;color:var(--text3);margin-top:1px;}
  .sms-ghost-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:5px 11px;font-family:'Noto Sans Thai',sans-serif;font-size:.72rem;color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .13s;}
  .sms-ghost-btn:hover{border-color:var(--red);color:var(--red);}

  /* SERVICE GRID */
  .sms-svc-search{position:relative;padding:10px 14px;border-bottom:1px solid var(--border);}
  .sms-svc-search input{width:100%;border:1px solid var(--border);border-radius:10px;padding:8px 12px 8px 32px;font-family:'Noto Sans Thai',sans-serif;font-size:.82rem;color:var(--text);background:#fff;outline:none;transition:border-color .15s;}
  .sms-svc-search input:focus{border-color:var(--red);}
  .sms-svc-search-ico{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;}
  .sms-svc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:14px 16px;max-height:520px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;}
  .sms-svc-grid::-webkit-scrollbar{display:none;}

  .sms-svc-card{
    background:#fff;border:1px solid var(--border);border-radius:18px;
    padding:14px 8px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:8px;cursor:pointer;text-align:center;
    min-width:0;position:relative;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    transition:border-color .18s,box-shadow .18s,transform .18s;
  }
  .sms-svc-card:hover{
    border-color:rgba(224,32,32,.35);
    box-shadow:0 6px 20px rgba(0,0,0,.1);
    transform:translateY(-2px);
  }
  @keyframes smsPulseGlow{
    0%,100%{box-shadow:0 0 0 4px rgba(224,32,32,.18),0 6px 20px rgba(224,32,32,.15);}
    50%{box-shadow:0 0 0 8px rgba(224,32,32,.06),0 6px 20px rgba(224,32,32,.15);}
  }
  .sms-svc-card.active{
    border:2.5px solid var(--red);
    animation:smsPulseGlow 2s ease-in-out infinite;
    transform:translateY(-2px);
  }
  .sms-svc-check{
    display:none;position:absolute;top:7px;right:7px;
    width:20px;height:20px;border-radius:50%;
    background:var(--red);align-items:center;justify-content:center;
    box-shadow:0 2px 6px rgba(224,32,32,.45);z-index:3;
  }
  @keyframes smsCheckPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
  .sms-svc-card.active .sms-svc-check{display:flex;animation:smsCheckPop .2s cubic-bezier(.34,1.6,.64,1);}
  .sms-svc-icon{width:56px;height:56px;border-radius:14px;background:#f8f9fb;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.07);flex-shrink:0;}
  .sms-svc-icon img{width:100%;height:100%;object-fit:contain;border-radius:10px;}
  .sms-svc-name{font-size:.75rem;font-weight:700;color:#1e2330;line-height:1.3;word-break:break-word;}
  .sms-svc-card.active .sms-svc-name{color:var(--red);}
  .sms-svc-price{font-size:.63rem;background:linear-gradient(135deg,#ff5252,#e02020);color:#fff;padding:3px 10px;border-radius:20px;font-weight:800;box-shadow:0 2px 8px rgba(224,32,32,.3);white-space:nowrap;flex-shrink:0;position:relative;overflow:hidden;}
  .sms-svc-price::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:btnShimmer 2.2s ease-in-out infinite;pointer-events:none;}
  @keyframes btnShimmer{0%{left:-100%}40%,100%{left:160%}}
  .sms-svc-card.active .sms-svc-price{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 2px 8px rgba(22,163,74,.3);}
  @keyframes smsBadgePop{from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}


  /* COUNTRY CARD REVEAL */
  #smsCtryCard{display:none;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.3,.64,1);}
  #smsCtryCard.revealed{display:block;opacity:1;transform:translateY(0) scale(1);}

  /* COUNTRY LIST */


  .sms-ctry-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;position:relative;}
  .sms-ctry-row:last-child{border-bottom:none;}
  .sms-ctry-row:hover{background:var(--surface);}
  .sms-ctry-row.active{background:var(--red-soft);}
  .sms-ctry-row.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);border-radius:0 2px 2px 0;}
  .sms-ctry-row.disabled{opacity:.45;cursor:not-allowed;}
  .sms-ctry-row.disabled:hover{background:none;}
  .sms-flag{font-size:1.25rem;width:26px;text-align:center;flex-shrink:0;}
  .sms-ctry-name{font-size:.83rem;font-weight:700;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sms-ctry-price{font-size:.7rem;color:var(--text3);white-space:nowrap;margin-right:2px;}
  .sms-avail-pill{display:inline-flex;align-items:center;gap:3px;font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0;min-width:72px;justify-content:center;}
  .sms-avail-ok{background:var(--green-bg);color:var(--green);}
  .sms-avail-low{background:var(--amber-bg);color:var(--amber);}
  .sms-avail-empty{background:var(--gray-bg);color:var(--gray);}
  .sms-ctry-sort{appearance:none;background:#fff;border:1px solid var(--border);border-radius:9px;padding:5px 24px 5px 10px;font-family:'Noto Sans Thai',sans-serif;font-size:.72rem;color:var(--text2);cursor:pointer;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239aa0b0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;transition:border-color .13s;margin-left:auto;}
  .sms-ctry-sort:focus{border-color:var(--red);}

  /* PRICE + BUY */
  .sms-price-box{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface);border-radius:10px;border:1px solid var(--border);margin:12px 14px 0;}
  .sms-buy-btn{width:calc(100% - 28px);margin:10px 14px 14px;background:var(--red);color:#fff;border:none;border-radius:11px;padding:12px;font-family:'Noto Sans Thai',sans-serif;font-size:.88rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;box-shadow:0 4px 12px rgba(224,32,32,.22);}
  .sms-buy-btn:hover{background:#c51c1c;box-shadow:0 6px 18px rgba(224,32,32,.32);}
  .sms-buy-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}

  /* ACTIVE NUMBER CARD */
  #smsActiveCard{border:none!important;background:transparent!important;box-shadow:none!important;overflow:hidden;}
  .sms-active-wrap{border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(224,32,32,.18);}
  .sms-active-head{background:linear-gradient(135deg,#1e0505,#2a0a0a,#1a0808);padding:16px 20px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;}
  .sms-active-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 85% -10%,rgba(224,32,32,.5),transparent 55%),radial-gradient(ellipse at -5% 110%,rgba(180,20,20,.2),transparent 50%);pointer-events:none;}
  .sms-active-head-ico{width:38px;height:38px;border-radius:11px;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;animation:checkPop .5s cubic-bezier(.34,1.6,.64,1) both;}
  @keyframes checkPop{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
  .sms-active-title{font-size:.9rem;font-weight:800;color:#fff;z-index:1;}
  .sms-active-sub{font-size:.66rem;color:rgba(255,255,255,.4);margin-top:2px;z-index:1;display:flex;align-items:center;gap:5px;}
  .sms-live-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:livePing 1.5s ease-in-out infinite;}
  @keyframes livePing{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
  .sms-countdown{margin-left:auto;z-index:1;text-align:right;}
  .sms-countdown-num{font-family:monospace;font-size:1.5rem;font-weight:900;color:#fbbf24;line-height:1;}
  .sms-countdown-lbl{font-size:.58rem;color:rgba(255,255,255,.3);margin-top:2px;letter-spacing:.5px;}
  .sms-countdown-num.urgent{color:#f87171;animation:urgentPulse .9s ease-in-out infinite;}
  @keyframes urgentPulse{0%,100%{opacity:1}50%{opacity:.5}}
  .sms-num-box{background:linear-gradient(180deg,#1e0505,#2d0808);padding:22px 20px 18px;text-align:center;cursor:pointer;position:relative;overflow:hidden;border-top:1px solid rgba(224,32,32,.15);}
  .sms-num-box::after{content:'';position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,rgba(224,32,32,.5),transparent);}
  .sms-num-box:hover .sms-num{transform:scale(1.04);}
  .sms-num-ctry{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;}
  .sms-num-ctry-badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:3px 10px;font-size:.68rem;color:rgba(255,255,255,.55);}
  .sms-num-ctry-badge.svc{background:rgba(224,32,32,.18);border-color:rgba(224,32,32,.3);color:#fca5a5;}
  .sms-num{font-size:2rem;font-weight:900;color:#fff;letter-spacing:3px;font-family:monospace;transition:transform .2s cubic-bezier(.34,1.4,.64,1);display:block;}
  .sms-copy-hint{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:5px 14px;font-size:.65rem;color:rgba(255,255,255,.4);transition:all .2s;cursor:pointer;}
  .sms-num-box:hover .sms-copy-hint{background:rgba(224,32,32,.2);border-color:rgba(224,32,32,.4);color:#fca5a5;}
  .sms-result-area{background:#fff;padding:20px 16px;}
  .sms-waiting{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px;color:var(--text3);font-size:.82rem;text-align:center;}
  .sms-waiting-ring{width:52px;height:52px;}
  .sms-waiting-ring-bg{stroke:#fee2e2;fill:none;stroke-width:4;}
  .sms-waiting-ring-arc{stroke:#e02020;fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:60 100;transform-origin:26px 26px;animation:ringRot 1.2s linear infinite;}
  @keyframes ringRot{to{transform:rotate(360deg)}}
  .sms-waiting-spin{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite;}
  .sms-waiting-dots{display:flex;gap:6px;margin-top:2px;}
  .sms-waiting-dot{width:8px;height:8px;border-radius:50%;background:#fecaca;animation:dotB 1.4s ease-in-out infinite;}
  .sms-waiting-dot:nth-child(2){animation-delay:.18s;}
  .sms-waiting-dot:nth-child(3){animation-delay:.36s;}
  @keyframes dotB{0%,80%,100%{transform:scale(.7);background:#fecaca}40%{transform:scale(1.1);background:#e02020}}
  @keyframes smsCodeIn{from{transform:scale(.85) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
  .sms-code-box{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid #86efac;border-radius:16px;padding:20px;text-align:center;animation:smsCodeIn .4s cubic-bezier(.34,1.4,.64,1);}
  .sms-code-lbl{font-size:.72rem;color:#15803d;font-weight:700;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:6px;}
  .sms-code{font-size:2.6rem;font-weight:900;color:#15803d;letter-spacing:8px;font-family:monospace;cursor:pointer;transition:all .15s;display:block;margin-bottom:6px;}
  .sms-code:hover{transform:scale(1.05);color:#166534;}
  .sms-code-sub{font-size:.68rem;color:#16a34a;opacity:.7;}
  .sms-act-btns{display:flex;gap:8px;padding:12px 16px;background:#fff;border-top:1px solid #f1f5f9;}
  .sms-act-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 6px;border-radius:12px;font-family:'Noto Sans Thai',sans-serif;font-size:.76rem;font-weight:700;cursor:pointer;transition:all .18s cubic-bezier(.34,1.3,.64,1);white-space:nowrap;border:none;}
  .sms-act-btn:active{transform:scale(.95);}
  .sms-act-btn.red{background:#fef2f2;color:#e02020;border:1.5px solid #fecaca;}
  .sms-act-btn.red:hover{background:#e02020;color:#fff;box-shadow:0 4px 16px rgba(224,32,32,.35);}
  .sms-act-btn.ghost{background:#fafafa;color:#5a6072;border:1.5px solid #e4e8ef;}
  .sms-act-btn.ghost:hover{background:#f3f4f6;color:#1e2330;}
  .sms-act-btn.green{background:#16a34a;color:#fff;box-shadow:0 4px 14px rgba(22,163,74,.25);}
  .sms-act-btn.green:hover{background:#15803d;box-shadow:0 6px 20px rgba(22,163,74,.4);transform:translateY(-1px);}

  /* ACTIVATIONS LIST */
  .sms-act-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);transition:background .1s;}
  .sms-act-row:last-child{border-bottom:none;}
  .sms-act-row:hover{background:var(--surface);}
  .sms-act-phone{font-size:.82rem;font-weight:700;font-family:monospace;color:var(--text);flex:1;}
  .sms-act-svc{font-size:.65rem;background:var(--blue-bg);color:var(--blue);padding:2px 7px;border-radius:6px;font-weight:700;}
  .sms-act-status{font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:6px;}
  .sms-status-wait{background:var(--amber-bg);color:var(--amber);}
  .sms-status-ok{background:var(--green-bg);color:var(--green);}
  .sms-status-cancel{background:var(--gray-bg);color:var(--gray);}
  .sms-act-time{font-size:.63rem;color:var(--text3);font-family:monospace;}
  .sms-empty{text-align:center;padding:28px 16px;color:var(--text3);font-size:.82rem;}
  .sms-empty-ico{font-size:1.8rem;margin-bottom:8px;opacity:.25;}

  /* MOBILE */
  @media(max-width:480px){
    .sms-svc-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;}
    .sms-act-btns{flex-wrap:wrap;}
    .sms-act-btn{min-width:calc(50% - 4px);}
    .sms-balance-num{font-size:1.1rem;}
    .sms-num{font-size:1.3rem;}
    .sms-ctry-price{display:none;}
  }

  /* SHARED BTN */
  .sms-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:10px;border:none;font-family:'Noto Sans Thai',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;}
  .sms-btn-red{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(224,32,32,.25);}
  .sms-btn-red:hover{background:#c51c1c;}
  .sms-btn-red:disabled{opacity:.5;cursor:not-allowed;}
  .sms-btn-ghost{background:none;border:1px solid var(--border);color:var(--text2);}
  .sms-btn-ghost:hover{border-color:var(--border2);color:var(--text);}
  .sms-btn-green{background:#16a34a;color:#fff;}
  .sms-btn-green:hover{background:#15803d;}
  .sms-code-box-old{background:var(--green-bg);border:2px solid var(--green);border-radius:13px;padding:16px 20px;text-align:center;animation:smsCodeIn .3s cubic-bezier(.34,1.5,.64,1);}
  .sms-code-old{font-size:2rem;font-weight:900;color:var(--green);letter-spacing:4px;font-family:monospace;}
  .sms-code-sub-old{font-size:.72rem;color:var(--green);margin-top:4px;opacity:.7;}
  .sms-timer{font-size:.68rem;color:var(--text3);font-family:monospace;}
  

/* ══ admin.css block ══ */


    #pageAdmin { background: #eef1f5; }

    /* scrollable body */
    #beBody {
      flex: 1; overflow-y: auto; overflow-x: hidden;
      padding: 20px 20px 20px; display: flex; flex-direction: column; gap: 16px;
      scrollbar-width: thin; scrollbar-color: #d0d6e0 transparent;
    }

    /* ── Hero header (full-width dark, matches stock page style) ── */
    #beHero {
      background: linear-gradient(135deg, #18202f 0%, #1e0a0a 50%, #2a0f0f 100%);
      padding: 0; position: relative; overflow: hidden; flex-shrink: 0;
    }
    #beHero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse at 80% 20%, rgba(224,32,32,.22) 0%, transparent 55%),
                  radial-gradient(ellipse at 10% 90%, rgba(224,32,32,.1) 0%, transparent 45%);
    }
    .be-hero-top {
      position: relative; z-index: 1;
      display: flex; align-items: center; gap: 14px;
      padding: 16px 20px 15px;
    }
    .be-hero-icon {
      width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
      background: rgba(224,32,32,.22); border: 1px solid rgba(224,32,32,.28);
      display: flex; align-items: center; justify-content: center;
    }
    .be-hero-title { font-size: 1.05rem; font-weight: 900; color: #fff; line-height: 1; }
    .be-hero-sub   { font-size: .63rem; color: rgba(255,255,255,.38); margin-top: 3px; }
    .be-hero-badge {
      margin-left: auto; display: flex; align-items: center; gap: 5px;
      background: rgba(224,32,32,.18); border: 1px solid rgba(224,32,32,.3);
      border-radius: 20px; padding: 4px 10px;
      font-size: .65rem; font-weight: 700; color: #ff8080;
    }
    .be-hero-dot { width: 6px; height: 6px; border-radius: 50%; background: #e02020; animation: bePulse 1.5s ease-in-out infinite; flex-shrink: 0; }
    @keyframes bePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

    /* mini stats — flush bottom, full-width like pgS-stats */
    .be-mini-stats {
      position: relative; z-index: 1; display: flex;
      border-top: 1px solid rgba(255,255,255,.07);
    }
    .be-mini-stat {
      flex: 1; padding: 13px 10px; border-right: 1px solid rgba(255,255,255,.07);
      text-align: center; transition: background .15s; cursor: default;
    }
    .be-mini-stat:last-child { border-right: none; }
    .be-mini-stat:hover { background: rgba(255,255,255,.04); }
    .be-mini-num { font-size: 1.5rem; font-weight: 900; line-height: 1; color: #fff; letter-spacing: -1px; }
    .be-mini-lbl { font-size: .56rem; color: rgba(255,255,255,.32); margin-top: 4px; text-transform: uppercase; letter-spacing: .7px; }
    .be-mini-num.red   { color: #ff6b6b; }
    .be-mini-num.green { color: #4ade80; }
    .be-mini-num.amber { color: #fbbf24; }

    /* ── Tab pills ── */
    #beTabs {
      display: flex; gap: 6px; flex-shrink: 0;
      overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    }
    #beTabs::-webkit-scrollbar { display: none; }
    .be-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px; border-radius: 20px;
      border: 1.5px solid #e4e8ef; background: #fff;
      color: #5a6072; font-family: 'Noto Sans Thai', sans-serif;
      font-size: .78rem; font-weight: 600; cursor: pointer;
      transition: all .18s; white-space: nowrap; flex-shrink: 0;
    }
    .be-pill:hover { border-color: #d0d6e0; color: #1e2330; background: #f5f7fa; }
    .be-pill.active {
      background: #e02020; color: #fff; border-color: #e02020;
      box-shadow: 0 4px 14px rgba(224,32,32,.28);
    }
    .be-pill-ico { font-size: .85rem; }
    .be-pill-cnt {
      font-size: .62rem; font-weight: 700;
      background: rgba(255,255,255,.25); border-radius: 10px;
      padding: 1px 6px; min-width: 18px; text-align: center;
    }
    .be-pill:not(.active) .be-pill-cnt { background: #eef1f5; color: #9aa0b0; }

    /* ── Big white card ── */
    .be-card {
      background: #fff; border-radius: 20px;
      border: 1px solid #e4e8ef;
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
      overflow: hidden; animation: beCardIn .22s ease both;
    }
    @keyframes beCardIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
    .be-card-head {
      display: flex; align-items: center; gap: 12px;
      padding: 18px 20px; border-bottom: 1px solid #f0f2f5;
    }
    .be-card-icon {
      width: 38px; height: 38px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; flex-shrink: 0;
    }
    .be-card-title { font-size: .92rem; font-weight: 800; color: #1e2330; }
    .be-card-sub { font-size: .68rem; color: #9aa0b0; margin-top: 2px; }
    .be-card-action { margin-left: auto; }
    .be-card-body { padding: 18px 20px; }

    /* ── add-email input ── */
    .be-input-row {
      display: flex; gap: 8px; margin-bottom: 16px;
    }
    .be-input {
      flex: 1; border: 1.5px solid #e4e8ef; border-radius: 11px;
      padding: 10px 14px; font-size: .83rem;
      font-family: 'Noto Sans Thai', sans-serif; outline: none;
      background: #f9fafb; color: #1e2330; transition: all .15s;
    }
    .new-setting-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }
    #confirmWrap.open { display: flex !important; }
    .email-tag {
      display: inline-flex; align-items: center; gap: 5px;
      background: #fef2f2; border: 1px solid #fecaca; color: #e02020;
      border-radius: 8px; padding: 3px 8px 3px 10px;
      font-size: .75rem; font-weight: 600; white-space: nowrap;
      animation: beRowIn .15s ease both;
    }
    .email-tag-del {
      width: 16px; height: 16px; border-radius: 50%; border: none;
      background: rgba(224,32,32,.12); color: #e02020; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: .65rem; line-height: 1; padding: 0; transition: all .12s;
    }
    .email-tag-del:hover { background: #e02020; color: #fff; }
    .be-add-btn {
      background: #e02020; color: #fff; border: none; border-radius: 11px;
      padding: 10px 18px; font-weight: 700; cursor: pointer;
      font-family: 'Noto Sans Thai', sans-serif; font-size: .83rem;
      display: flex; align-items: center; gap: 5px; white-space: nowrap;
      transition: all .15s; box-shadow: 0 4px 12px rgba(224,32,32,.25);
    }
    .be-add-btn:hover { background: #c51c1c; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(224,32,32,.3); }
    .be-add-btn:active { transform: translateY(0); }

    /* ── email / user / plat rows ── */
    .be-row {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 14px; border-radius: 12px; border: 1.5px solid #f0f2f5;
      background: #fafbfd; margin-bottom: 7px; transition: all .15s;
      animation: beRowIn .18s ease both;
    }
    @keyframes beRowIn { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:translateX(0)} }
    .be-row:hover { border-color: #e4e8ef; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
    .be-row:last-child { margin-bottom: 0; }
    .be-row-av {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 800;
    }
    .be-row-icon {
      width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    }
    .be-row-main { flex: 1; min-width: 0; }
    .be-row-name { font-weight: 700; font-size: .83rem; color: #1e2330; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .be-row-sub { font-size: .67rem; color: #9aa0b0; margin-top: 2px; }
    .be-row-tag {
      font-size: .6rem; font-weight: 700; padding: 2px 8px; border-radius: 8px;
      white-space: nowrap; flex-shrink: 0;
    }
    .be-del-btn {
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      border: 1.5px solid #fecaca; background: #fef2f2; color: #e02020;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all .13s;
    }
    .be-del-btn:hover { background: #e02020; border-color: #e02020; color: #fff; transform: scale(1.05); }

    /* ── stats grid ── */
    .be-stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
    .be-stat-card {
      border-radius: 14px; padding: 16px; text-align: center;
      transition: transform .15s, box-shadow .15s;
      cursor: default;
    }
    .be-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
    .be-stat-ico { font-size: 1.6rem; margin-bottom: 6px; }
    .be-stat-num { font-size: 2rem; font-weight: 900; line-height: 1; }
    .be-stat-lbl { font-size: .63rem; color: #9aa0b0; margin-top: 5px; text-transform: uppercase; letter-spacing: .5px; }

    /* ── log row ── */
    .be-log-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; border-radius: 11px;
      border: 1px solid #f0f2f5; background: #fafbfd;
      margin-bottom: 6px; transition: background .12s;
    }
    .be-log-row:hover { background: #fff; }
    .be-log-plat { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
    .be-log-main { flex: 1; min-width: 0; }
    .be-log-email { font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e2330; }
    .be-log-meta { font-size: .63rem; color: #9aa0b0; margin-top: 1px; }
    .be-log-date { font-size: .63rem; color: #b0b8c8; white-space: nowrap; flex-shrink: 0; }

    /* ── action button (card header) ── */
    .be-action-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 7px 14px; border-radius: 10px;
      background: #e02020; color: #fff; border: none;
      font-family: 'Noto Sans Thai', sans-serif; font-size: .76rem; font-weight: 700;
      cursor: pointer; transition: all .15s; white-space: nowrap;
      box-shadow: 0 2px 8px rgba(224,32,32,.2);
    }
    .be-action-btn:hover { background: #c51c1c; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(224,32,32,.3); }

    /* ── empty state ── */
    .be-empty { text-align: center; padding: 40px 20px; display: none; }
    .be-empty.show { display: block; }
    .be-empty-ico { font-size: 2.5rem; margin-bottom: 10px; opacity: .2; }
    .be-empty-t { font-size: .8rem; color: #9aa0b0; font-weight: 600; }

    /* ── modal redesign ── */
    .be-modal-wrap {
      display: none; position: fixed; inset: 0;
      background: rgba(15,20,30,.45); backdrop-filter: blur(4px);
      z-index: 9999; align-items: center; justify-content: center; padding: 20px;
    }
    .be-modal-wrap.open { display: flex; }
    .be-modal {
      background: #fff; border-radius: 20px; padding: 0;
      width: 100%; max-width: 420px;
      box-shadow: 0 24px 60px rgba(0,0,0,.2);
      animation: beModalIn .22s cubic-bezier(.34,1.4,.64,1);
      overflow: hidden;
    }
    @keyframes beModalIn { from{opacity:0;transform:scale(.94) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
    .be-modal-head {
      background: linear-gradient(135deg, #18202f, #2a0f0f);
      padding: 20px 22px; display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden;
    }
    .be-modal-head::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at 80% 50%, rgba(224,32,32,.2), transparent 60%);
    }
    .be-modal-head-icon {
      width: 40px; height: 40px; border-radius: 12px;
      background: rgba(224,32,32,.2); border: 1px solid rgba(224,32,32,.3);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; position: relative; z-index: 1; flex-shrink: 0;
    }
    .be-modal-head-title { font-size: .95rem; font-weight: 800; color: #fff; position: relative; z-index: 1; }
    .be-modal-head-sub { font-size: .68rem; color: rgba(255,255,255,.4); margin-top: 3px; position: relative; z-index: 1; }
    .be-modal-close {
      margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
      background: rgba(255,255,255,.1); border: none; color: rgba(255,255,255,.6);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: .85rem; transition: all .13s; position: relative; z-index: 1; flex-shrink: 0;
    }
    .be-modal-close:hover { background: rgba(255,255,255,.2); color: #fff; }
    .be-modal-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
    .be-modal-label { font-size: .72rem; font-weight: 700; color: #5a6072; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
    .be-modal-field { display: flex; flex-direction: column; gap: 4px; }
    .be-modal-select {
      border: 1.5px solid #e4e8ef; border-radius: 11px;
      padding: 10px 14px; font-size: .83rem;
      font-family: 'Noto Sans Thai', sans-serif; outline: none;
      background: #f9fafb; color: #1e2330; transition: all .15s; cursor: pointer;
    }
    .be-modal-select:focus { border-color: #e02020; background: #fff; }
    .be-modal-foot { padding: 0 22px 22px; display: flex; gap: 8px; }
    .be-modal-cancel {
      flex: 1; border: 1.5px solid #e4e8ef; background: #fff; border-radius: 11px;
      padding: 11px; font-family: 'Noto Sans Thai', sans-serif; font-size: .83rem;
      cursor: pointer; color: #5a6072; transition: all .13s; font-weight: 600;
    }
    .be-modal-cancel:hover { background: #f5f7fa; border-color: #d0d6e0; }
    .be-modal-save {
      flex: 1; background: #e02020; color: #fff; border: none; border-radius: 11px;
      padding: 11px; font-weight: 800; font-family: 'Noto Sans Thai', sans-serif;
      font-size: .83rem; cursor: pointer; transition: all .15s;
      box-shadow: 0 4px 14px rgba(224,32,32,.25);
    }
    .be-modal-save:hover { background: #c51c1c; transform: translateY(-1px); }

    /* ── responsive ── */
    @media (max-width: 600px) {
      #beBody { padding: 12px; gap: 12px; }
      .be-hero-badge { display: none; }
      .be-stats-grid { grid-template-columns: repeat(2,1fr); }
      .be-card-head { padding: 14px 16px; }
      .be-card-body { padding: 14px 16px; }
      .be-mini-stat { padding: 12px 10px; }
      .be-mini-num { font-size: 1.2rem; }
      .new-setting-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 400px) {
      .be-stats-grid { grid-template-columns: 1fr 1fr; }
      .be-pill { padding: 7px 12px; font-size: .72rem; }
    }


  .be-sms-toggle{position:relative;flex-shrink:0;}
  .be-sms-toggle input{opacity:0;width:0;height:0;position:absolute;}
  .be-sms-toggle-track{display:block;width:36px;height:20px;border-radius:20px;background:var(--border2);cursor:pointer;transition:background .2s;position:relative;}
  .be-sms-toggle-track::after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
  .be-sms-toggle input:checked + .be-sms-toggle-track{background:var(--green);}
  .be-sms-toggle input:checked + .be-sms-toggle-track::after{transform:translateX(16px);}


  .sms-cfg-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
  @media(max-width:1100px){.sms-cfg-grid{grid-template-columns:repeat(5,1fr);}}
  @media(max-width:700px){.sms-cfg-grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:480px){.sms-cfg-grid{grid-template-columns:repeat(2,1fr);}}

  .sms-cfg-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:0;transition:box-shadow .2s,border-color .2s,transform .2s,opacity .2s;position:relative;user-select:none;}
  .sms-cfg-card:hover{border-color:var(--border2);box-shadow:0 4px 16px rgba(0,0,0,.09);}
  .sms-cfg-card.sms-drag-over{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,32,32,.18);transform:scale(1.03);background:#fffafa;}
  .sms-cfg-card.sms-dragging{opacity:.25;border-style:dashed;transform:scale(.97);box-shadow:0 8px 24px rgba(0,0,0,.12);}
  .sms-cfg-card.sms-disabled{opacity:.4;}

  .sms-cfg-topbar{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .sms-cfg-num{font-size:.62rem;font-weight:700;color:var(--text3);background:var(--surface);padding:2px 7px;border-radius:20px;}
  .sms-cfg-actions{display:flex;align-items:center;gap:5px;}

  .sms-cfg-icon-wrap{position:relative;margin-bottom:10px;cursor:pointer;}
  .sms-cfg-icon{width:56px;height:56px;border-radius:14px;object-fit:contain;background:#f3f4f6;box-shadow:0 2px 8px rgba(0,0,0,.08);display:block;}
  .sms-cfg-icon-overlay{position:absolute;inset:0;border-radius:14px;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;color:#fff;font-size:.6rem;flex-direction:column;gap:3px;}
  .sms-cfg-icon-wrap:hover .sms-cfg-icon-overlay{display:flex;}

  .sms-cfg-name{width:100%;border:1px solid var(--border);border-radius:8px;padding:5px 8px;font-family:'Noto Sans Thai',sans-serif;font-size:.76rem;font-weight:700;color:var(--text);text-align:center;outline:none;transition:border-color .15s;margin-bottom:5px;background:#fff;}
  .sms-cfg-name:focus{border-color:var(--red);}
  .sms-cfg-code{width:100%;border:1px solid var(--border);border-radius:8px;padding:4px 8px;font-family:monospace;font-size:.72rem;color:var(--text3);text-align:center;outline:none;transition:border-color .15s;background:#fff;}
  .sms-cfg-code:focus{border-color:var(--red);}

  .sms-cfg-drag{text-align:center;margin-top:8px;color:var(--border2);cursor:grab;line-height:1;padding:4px 0;transition:color .15s;}
  .sms-cfg-drag:hover{color:var(--text3);}
  .sms-cfg-drag:active{cursor:grabbing;}

  /* toggle */
  .sms-tog{position:relative;width:32px;height:18px;flex-shrink:0;}
  .sms-tog input{opacity:0;width:0;height:0;position:absolute;}
  .sms-tog-t{display:block;width:32px;height:18px;border-radius:18px;background:var(--border2);cursor:pointer;transition:background .2s;position:relative;}
  .sms-tog-t::after{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
  .sms-tog input:checked+.sms-tog-t{background:var(--green);}
  .sms-tog input:checked+.sms-tog-t::after{transform:translateX(14px);}

  /* del btn */
  .sms-del-btn{width:22px;height:22px;border-radius:6px;border:1.5px solid #fecaca;background:#fef2f2;color:#e02020;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .13s;padding:0;}
  .sms-del-btn:hover{background:#e02020;color:#fff;border-color:#e02020;}

  /* SMS CARD COMPACT */
  .sms-cfg-card{background:#fff;border:1.5px solid #f0f2f6;border-radius:16px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .2s cubic-bezier(.34,1.3,.64,1);position:relative;user-select:none;}
  .sms-cfg-card:hover{border-color:#fca5a5;box-shadow:0 6px 20px rgba(224,32,32,.1);transform:translateY(-3px);}
  .sms-cfg-card.sms-drag-over{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,32,32,.15);transform:scale(1.03);}
  .sms-cfg-card.sms-dragging{opacity:.25;border-style:dashed;transform:scale(.97);}
  .sms-cfg-card.sms-disabled{opacity:.35;}
  .sms-cfg-icon{width:44px;height:44px;border-radius:12px;object-fit:contain;background:#f3f4f6;}
  .sms-cfg-name-lbl{font-size:.72rem;font-weight:700;color:#1e2330;text-align:center;line-height:1.3;word-break:break-word;width:100%;}
  .sms-cfg-code-lbl{font-size:.6rem;color:#9aa0b0;font-family:monospace;}
  .sms-cfg-drag{color:#d0d6e0;cursor:grab;transition:color .15s;margin-top:2px;}
  .sms-cfg-drag:hover{color:#9aa0b0;}
  .sms-cfg-edit-btn{flex:1;padding:5px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--text2);font-size:.65rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;transition:all .15s;font-family:'Noto Sans Thai',sans-serif;font-weight:600;}
  .sms-cfg-edit-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
  .sms-cfg-del-btn{width:28px;height:28px;border-radius:8px;border:1.5px solid #fecaca;background:#fef2f2;color:#e02020;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .13s;padding:0;}
  .sms-cfg-del-btn:hover{background:#e02020;color:#fff;border-color:#e02020;}

  /* SMS EDIT MODAL */
  .sms-edit-modal-wrap{display:none;position:fixed;inset:0;background:rgba(15,20,30,.5);z-index:99999;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);}
  .sms-edit-modal-wrap.open{display:flex;}
  .sms-edit-modal{background:#fff;border-radius:20px;width:100%;max-width:400px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.2);animation:beModalIn .2s cubic-bezier(.34,1.4,.64,1);}
  .sms-edit-modal-head{background:linear-gradient(135deg,#1e0505,#2a0a0a);padding:18px 20px;display:flex;align-items:center;gap:12px;}
  .sms-edit-modal-title{font-size:.92rem;font-weight:800;color:#fff;}
  .sms-edit-modal-close{margin-left:auto;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .15s;}
  .sms-edit-modal-close:hover{background:rgba(255,255,255,.2);}
  .sms-edit-modal-body{padding:20px;}
  .sms-edit-field{margin-bottom:14px;}
  .sms-edit-label{font-size:.72rem;font-weight:700;color:var(--text3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
  .sms-edit-modal-foot{display:flex;gap:8px;padding:0 20px 20px;}

  /* SMS select mode */
  .sms-cfg-card.selectable{cursor:pointer;}
  .sms-cfg-card.selectable:hover{border-color:rgba(37,99,235,.4);background:#f0f7ff;}
  .sms-cfg-card.sel-active{border-color:#2563eb!important;background:#eff6ff!important;box-shadow:0 0 0 2px rgba(37,99,235,.2)!important;}
  .sms-sel-cb{position:absolute;top:8px;left:8px;width:18px;height:18px;border-radius:5px;border:2px solid var(--border);background:#fff;display:none;align-items:center;justify-content:center;transition:all .15s;pointer-events:none;}
  .sms-cfg-card.selectable .sms-sel-cb{display:flex;}
  .sms-cfg-card.sel-active .sms-sel-cb{background:#2563eb;border-color:#2563eb;}
  .sms-sel-cb svg{display:none;}
  .sms-cfg-card.sel-active .sms-sel-cb svg{display:block;}

  /* SMS pagination */
  .sms-pag{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;flex-wrap:wrap;}
  .sms-pag-btn{min-width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:#fff;color:var(--text2);font-family:'Noto Sans Thai',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0 8px;}
  .sms-pag-btn:hover{border-color:var(--red);color:var(--red);}
  .sms-pag-btn.active{background:var(--red);color:#fff;border-color:var(--red);}
  .sms-pag-btn:disabled{opacity:.35;cursor:not-allowed;}
  .sms-pag-info{font-size:.72rem;color:var(--text3);padding:0 4px;}


/* ══ sms_admin.css block ══ */

          /* ── SMS ADMIN REDESIGN ── */
          .sms-admin-wrap{display:flex;flex-direction:column;gap:14px;}

          /* stat bar */
          .sms-stat-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
          .sms-stat-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:clamp(10px,2vw,16px) clamp(10px,2vw,20px);display:flex;align-items:center;gap:clamp(8px,1.5vw,14px);transition:all .2s;position:relative;overflow:hidden;min-width:0;}
          .sms-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0;}
          .sms-stat-card.red::before{background:linear-gradient(90deg,#e02020,#f87171);}
          .sms-stat-card.green::before{background:linear-gradient(90deg,#16a34a,#4ade80);}
          .sms-stat-card.gray::before{background:linear-gradient(90deg,#6b7280,#9ca3af);}
          .sms-stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08);}
          .sms-stat-ico{width:clamp(28px,5vw,42px);height:clamp(28px,5vw,42px);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:clamp(14px,3vw,20px);}
          .sms-stat-num{font-size:clamp(.9rem,3.5vw,1.6rem);font-weight:900;line-height:1;color:#1e2330;white-space:nowrap;}
          .sms-stat-lbl{font-size:clamp(.55rem,1.5vw,.72rem);color:#9aa0b0;margin-top:3px;font-weight:600;}

          /* toolbar */
          .sms-toolbar{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
          @media(max-width:420px){.sms-search-box{flex:1 1 100%;order:-1;}.sms-tbtn{font-size:.7rem;padding:8px 10px;}}
          .sms-search-box{position:relative;flex:1;min-width:200px;}
          .sms-search-box svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:#c0c8d8;}
          .sms-search-box input{width:100%;border:1px solid var(--border);border-radius:10px;padding:9px 12px 9px 34px;font-family:'Noto Sans Thai',sans-serif;font-size:.82rem;background:#f8fafc;outline:none;transition:all .2s;color:var(--text);}
          .sms-search-box input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(224,32,32,.08);}
          .sms-tbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;font-family:'Noto Sans Thai',sans-serif;font-size:.76rem;font-weight:700;cursor:pointer;transition:all .18s cubic-bezier(.34,1.3,.64,1);border:none;white-space:nowrap;}
          .sms-tbtn:active{transform:scale(.96);}
          .sms-tbtn-red{background:#e02020;color:#fff;box-shadow:0 3px 10px rgba(224,32,32,.25);}
          .sms-tbtn-red:hover{background:#c51c1c;box-shadow:0 5px 16px rgba(224,32,32,.35);transform:translateY(-1px);}
          .sms-tbtn-dark{background:#1e2330;color:#fff;}
          .sms-tbtn-dark:hover{background:#374151;transform:translateY(-1px);}
          .sms-tbtn-blue{background:#eff6ff;color:#2563eb;border:1.5px solid #bfdbfe;}
          .sms-tbtn-blue:hover{background:#dbeafe;}
          .sms-tbtn-ghost{background:#f8fafc;color:var(--text2);border:1px solid var(--border);}
          .sms-tbtn-ghost:hover{background:#f1f5f9;color:var(--text);}

          /* add panel */
          .sms-add-panel{background:#fff;border:1.5px solid #fecaca;border-radius:14px;overflow:hidden;max-height:0;opacity:0;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s,padding .3s;}
          .sms-add-panel.open{max-height:200px;opacity:1;}
          .sms-add-panel-inner{padding:16px 18px;}
          .sms-add-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
          .sms-add-pulse{width:8px;height:8px;border-radius:50%;background:#e02020;animation:smsPulse 1.5s ease-in-out infinite;}
          @keyframes smsPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.5}}

          /* grid cards */
          .sms-cfg-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
          @media(max-width:1100px){.sms-cfg-grid{grid-template-columns:repeat(5,1fr);}}
          @media(max-width:700px){.sms-cfg-grid{grid-template-columns:repeat(3,1fr);}}
          @media(max-width:480px){.sms-cfg-grid{grid-template-columns:repeat(2,1fr);}}

          .sms-cfg-card{background:#fff;border:1.5px solid #f0f2f6;border-radius:16px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .22s cubic-bezier(.34,1.3,.64,1);position:relative;user-select:none;cursor:default;}
          .sms-cfg-card:hover{border-color:#fca5a5;box-shadow:0 8px 24px rgba(224,32,32,.1);transform:translateY(-4px);}
          .sms-cfg-card.sms-disabled{opacity:.35;}
          .sms-cfg-card.sms-dragging{opacity:.2;border-style:dashed;transform:scale(.96);}
          .sms-cfg-card.sms-drag-over{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,32,32,.18);transform:scale(1.04);}

          /* card entrance animation */
          .sms-cfg-card{animation:cardIn .3s cubic-bezier(.34,1.4,.64,1) both;}
          .sms-cfg-card:nth-child(1){animation-delay:.02s}
          .sms-cfg-card:nth-child(2){animation-delay:.04s}
          .sms-cfg-card:nth-child(3){animation-delay:.06s}
          .sms-cfg-card:nth-child(4){animation-delay:.08s}
          .sms-cfg-card:nth-child(5){animation-delay:.1s}
          .sms-cfg-card:nth-child(6){animation-delay:.12s}
          .sms-cfg-card:nth-child(7){animation-delay:.14s}
          @keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

          .sms-cfg-num{font-size:.6rem;font-weight:700;color:#d0d6e0;}
          .sms-cfg-icon{width:44px;height:44px;border-radius:12px;object-fit:contain;background:#f3f4f6;transition:transform .2s;}
          .sms-cfg-card:hover .sms-cfg-icon{transform:scale(1.08);}
          .sms-cfg-name-lbl{font-size:.72rem;font-weight:700;color:#1e2330;text-align:center;line-height:1.3;word-break:break-word;width:100%;}
          .sms-cfg-code-lbl{font-size:.6rem;color:#c0c8d8;font-family:monospace;}
          .sms-cfg-drag{color:#e4e8ef;cursor:grab;transition:color .15s;margin-top:2px;}
          .sms-cfg-drag:hover{color:#9aa0b0;}

          /* select mode */
          .sms-cfg-card.selectable{cursor:pointer;}
          .sms-cfg-card.sel-active{border-color:#2563eb!important;background:#eff6ff!important;box-shadow:0 0 0 2px rgba(37,99,235,.2)!important;}
          .sms-sel-cb{position:absolute;top:8px;left:8px;width:18px;height:18px;border-radius:5px;border:2px solid var(--border);background:#fff;display:none;align-items:center;justify-content:center;transition:all .15s;pointer-events:none;}
          .sms-cfg-card.selectable .sms-sel-cb{display:flex;}
          .sms-cfg-card.sel-active .sms-sel-cb{background:#2563eb;border-color:#2563eb;}
          .sms-sel-cb svg{display:none;}
          .sms-cfg-card.sel-active .sms-sel-cb svg{display:block;}

          /* pagination */
          .sms-pag{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:4px;flex-wrap:wrap;}
          .sms-pag-btn{min-width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:#fff;color:var(--text2);font-family:'Noto Sans Thai',sans-serif;font-size:.76rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0 8px;}
          .sms-pag-btn:hover{border-color:var(--red);color:var(--red);}
          .sms-pag-btn.active{background:var(--red);color:#fff;border-color:var(--red);}
          .sms-pag-btn:disabled{opacity:.35;cursor:not-allowed;}
          .sms-pag-info{font-size:.72rem;color:var(--text3);padding:0 4px;}

          /* select mode */
          .sms-sel-bar-wrap{display:none;align-items:center;gap:8px;}
        

/* ══ premium.css block ══ */


        .prem-stat-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
        .prem-stat-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:clamp(10px,2vw,16px);display:flex;align-items:center;gap:12px;transition:all .2s;position:relative;overflow:hidden;}
        .prem-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0;}
        .prem-stat-card.red::before{background:linear-gradient(90deg,#e02020,#f87171);}
        .prem-stat-card.green::before{background:linear-gradient(90deg,#16a34a,#4ade80);}
        .prem-stat-card.blue::before{background:linear-gradient(90deg,#2563eb,#60a5fa);}
        .prem-stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08);}
        .prem-stat-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
        .prem-stat-num{font-size:1.5rem;font-weight:900;line-height:1;color:#1e2330;}
        .prem-stat-lbl{font-size:.62rem;color:#9aa0b0;margin-top:3px;font-weight:600;}
        @media(max-width:600px){.prem-stat-bar{grid-template-columns:repeat(3,1fr);gap:6px;}.prem-stat-num{font-size:1.1rem;}.prem-stat-ico{width:32px;height:32px;font-size:.9rem;}}

        /* toolbar */
        .prem-toolbar{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
        .prem-search-box{position:relative;flex:1;min-width:160px;}
        .prem-search-box svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:#c0c8d8;}
        .prem-search-box input{width:100%;border:1px solid var(--border);border-radius:10px;padding:9px 12px 9px 34px;font-family:'Noto Sans Thai',sans-serif;font-size:.82rem;background:#f8fafc;outline:none;transition:all .2s;color:var(--text);box-sizing:border-box;}
        .prem-search-box input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(224,32,32,.08);}
        .prem-tbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;font-family:'Noto Sans Thai',sans-serif;font-size:.76rem;font-weight:700;cursor:pointer;transition:all .18s;border:none;white-space:nowrap;}
        .prem-tbtn-red{background:#e02020;color:#fff;box-shadow:0 3px 10px rgba(224,32,32,.25);}
        .prem-tbtn-red:hover{background:#c51c1c;transform:translateY(-1px);}
        .prem-tbtn-dark{background:#1e2330;color:#fff;}
        .prem-tbtn-dark:hover{background:#374151;transform:translateY(-1px);}
        .prem-tbtn-ghost{background:#f8fafc;color:var(--text2);border:1px solid var(--border);}
        .prem-tbtn-ghost:hover{background:#f1f5f9;color:var(--text);}
        @media(max-width:480px){.prem-tbtn{padding:8px 10px;font-size:.72rem;}.prem-search-box{flex:1 1 100%;order:-1;}}

        /* grid */
        .prem-cfg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
        @media(max-width:1100px){.prem-cfg-grid{grid-template-columns:repeat(4,1fr);}}
        @media(max-width:768px){.prem-cfg-grid{grid-template-columns:repeat(3,1fr);gap:10px;}}
        @media(max-width:480px){.prem-cfg-grid{grid-template-columns:repeat(2,1fr);gap:8px;}}

        /* card */
        .prem-cfg-card{background:#fff;border:1.5px solid #f0f2f6;border-radius:18px;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:all .22s cubic-bezier(.34,1.3,.64,1);position:relative;cursor:default;}
        .prem-cfg-card:hover{border-color:#fca5a5;box-shadow:0 8px 24px rgba(224,32,32,.1);transform:translateY(-4px);}
        .prem-cfg-num{font-size:.6rem;font-weight:700;color:#d0d6e0;align-self:flex-start;}
        .prem-cfg-icon-wrap{position:relative;width:56px;height:56px;cursor:pointer;}
        .prem-cfg-icon{width:56px;height:56px;border-radius:14px;object-fit:contain;background:#f3f4f6;display:block;transition:transform .2s;}
        .prem-cfg-icon-placeholder{width:56px;height:56px;border-radius:14px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:1.6rem;border:2px dashed #e4e8ef;transition:all .2s;cursor:pointer;}
        .prem-cfg-icon-overlay{position:absolute;inset:0;border-radius:14px;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;flex-direction:column;gap:2px;color:#fff;font-size:.55rem;font-weight:700;}
        .prem-cfg-icon-wrap:hover .prem-cfg-icon-overlay{display:flex;}
        .prem-cfg-name{width:100%;font-size:.75rem;font-weight:700;color:#1e2330;text-align:center;line-height:1.3;word-break:break-word;}
        .prem-cfg-price{font-size:.68rem;color:var(--red);font-weight:700;background:var(--red-soft);padding:2px 9px;border-radius:20px;border:1px solid rgba(224,32,32,.15);}
        .prem-cfg-drag{color:#e4e8ef;cursor:grab;transition:color .15s;margin-top:2px;}
        .prem-cfg-drag:hover{color:#9aa0b0;}
        .prem-cfg-actions{display:flex;gap:5px;width:100%;}
        .prem-cfg-edit-btn{flex:1;padding:5px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--text2);font-size:.65rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;transition:all .15s;font-family:'Noto Sans Thai',sans-serif;font-weight:600;}
        .prem-cfg-edit-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
        .prem-cfg-del-btn{width:28px;height:28px;border-radius:8px;border:1.5px solid #fecaca;background:#fef2f2;color:#e02020;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .13s;padding:0;}
        .prem-cfg-del-btn:hover{background:#e02020;color:#fff;border-color:#e02020;}
        .prem-cfg-disabled{opacity:.35;}

        /* pagination */
        .prem-pag{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:4px;flex-wrap:wrap;}
        .prem-pag-btn{min-width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:#fff;color:var(--text2);font-family:'Noto Sans Thai',sans-serif;font-size:.76rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0 8px;}
        .prem-pag-btn:hover{border-color:var(--red);color:var(--red);}
        .prem-pag-btn.active{background:var(--red);color:#fff;border-color:var(--red);}
        .prem-pag-btn:disabled{opacity:.35;cursor:not-allowed;}
        .prem-pag-info{font-size:.72rem;color:var(--text3);padding:0 4px;}

        /* edit modal */
        .prem-edit-modal-wrap{display:none;position:fixed;inset:0;background:rgba(15,20,30,.5);z-index:99999;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);}
        .prem-edit-modal-wrap.open{display:flex;}
        .prem-edit-modal{background:#fff;border-radius:22px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.2);animation:beModalIn .2s cubic-bezier(.34,1.4,.64,1);}
        .prem-edit-modal-head{background:linear-gradient(135deg,#1e0505,#2a0a0a);padding:18px 20px;display:flex;align-items:center;gap:12px;border-radius:22px 22px 0 0;}
        .prem-edit-modal-title{font-size:.95rem;font-weight:800;color:#fff;}
        .prem-edit-modal-close{margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:all .15s;}
        .prem-edit-modal-close:hover{background:rgba(255,255,255,.2);}
        .prem-edit-modal-body{padding:20px;}
        .prem-edit-field{margin-bottom:14px;}
        .prem-edit-label{font-size:.72rem;font-weight:700;color:var(--text3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;display:block;}
        .prem-edit-input{width:100%;border:1.5px solid var(--border);border-radius:11px;padding:10px 14px;font-size:.84rem;font-family:'Noto Sans Thai',sans-serif;outline:none;background:#f9fafb;color:var(--text);transition:all .15s;box-sizing:border-box;}
        .prem-edit-input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(224,32,32,.07);}
        .prem-edit-textarea{min-height:100px;resize:vertical;line-height:1.6;}
        .prem-edit-modal-foot{display:flex;gap:8px;padding:0 20px 20px;}
        /* icon upload area */
        .prem-icon-upload{border:2px dashed var(--border);border-radius:14px;padding:16px;text-align:center;cursor:pointer;transition:all .2s;position:relative;}
        .prem-icon-upload:hover{border-color:var(--red);background:var(--red-soft);}
        .prem-icon-preview{width:64px;height:64px;border-radius:14px;object-fit:cover;margin:0 auto 8px;display:block;border:2px solid var(--border);}

        /* pkg override list inside card edit */
        .prem-pkg-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;padding-right:2px;}
        .prem-pkg-list::-webkit-scrollbar{width:3px;}
        .prem-pkg-list::-webkit-scrollbar-thumb{background:rgba(224,32,32,.3);border-radius:3px;}
        .prem-pkg-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#f9fafb;}
        .prem-pkg-row:hover{border-color:rgba(224,32,32,.2);background:#fff;}
        .prem-pkg-name{flex:1;font-size:.78rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .prem-pkg-price-input{width:80px;border:1px solid var(--border);border-radius:7px;padding:4px 8px;font-size:.76rem;font-family:'Noto Sans Thai',sans-serif;outline:none;text-align:right;color:var(--red);font-weight:700;background:#fff;transition:border-color .15s;}
        .prem-pkg-price-input:focus{border-color:var(--red);}
        @media(max-width:600px){
          .prem-edit-modal{max-width:100%;margin:0;border-radius:20px 20px 0 0;max-height:92vh;}
          .prem-edit-modal-wrap{align-items:flex-end;padding:0;}
        }
        

/* ══ platform.css block ══ */

              #bePlatRequireUsername{display:none;}
              #bePlatRequireUsername + label{display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:10px 14px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;width:100%;transition:border-color .15s;user-select:none;}
              #bePlatRequireUsername:checked + label{border-color:var(--red);}
              .plat-toggle-track{position:relative;width:40px;height:22px;flex-shrink:0;border-radius:11px;background:#ddd;transition:background .2s;}
              #bePlatRequireUsername:checked + label .plat-toggle-track{background:var(--red);}
              .plat-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
              #bePlatRequireUsername:checked + label .plat-toggle-thumb{transform:translateX(18px);}
            

/* ══ shop.css block ══ */



  @keyframes sh-fadeUp  { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
  @keyframes sh-slideL  { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
  @keyframes sh-slideR  { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
  @keyframes sh-scaleIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
  @keyframes sh-spin    { to{transform:rotate(360deg)} }
  @keyframes sh-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  @keyframes sh-pulse   { 0%,100%{box-shadow:0 0 0 0 rgba(224,32,32,.45)} 70%{box-shadow:0 0 0 10px rgba(224,32,32,0)} }
  @keyframes sh-shimmer { 0%{left:-100%} 100%{left:200%} }
  @keyframes sh-pkgIn   { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
  @keyframes sh-badgeIn { from{transform:scale(0) rotate(-15deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
  @keyframes sh-scanline { 0%{top:-80px} 100%{top:110%} }
  @keyframes sh-priceGlow { 0%,100%{box-shadow:0 4px 14px rgba(224,32,32,.25)} 50%{box-shadow:0 4px 22px rgba(224,32,32,.5)} }

  #pageProduct { flex-direction:column; overflow:hidden; background:var(--bg); }
  #pageProduct.active { display:flex; }

  /* ── BODY ── */
  .sh-body {
    flex: 1; overflow-y: auto;
    background: var(--bg);
    display: flex; flex-direction: column; align-items: center;
    padding: 0 0 120px;
    scrollbar-width: thin; scrollbar-color: var(--red) transparent;
    position: relative;
  }
  @media(max-width:768px){ .sh-body{ padding:0 0 100px; } }

  /* ── HERO BANNER ── */
  .sh-hero {
    width: 100%; margin-bottom: 32px;
    position: relative; z-index: 1;
    animation: sh-fadeUp .55s ease both;
  }
  .sh-hero-inner {
    background: linear-gradient(135deg, #1a0608 0%, #2a0d0d 40%, #1a1025 100%);
    padding: 48px 40px 44px;
    text-align: center;
    position: relative; overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
  }
  /* animated scan line */
  .sh-hero-inner::before {
    content:''; position:absolute; left:0; right:0; height:60px;
    background: linear-gradient(to bottom,transparent,rgba(224,32,32,.04),transparent);
    animation: sh-scanline 5s linear infinite; pointer-events:none;
  }
  /* bottom red glow line */
  .sh-hero-inner::after {
    content:''; position:absolute;
    bottom:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg,transparent,#e02020 30%,#ff6b6b 50%,#e02020 70%,transparent);
  }
  .sh-hero-label {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(224,32,32,.15); border:1px solid rgba(224,32,32,.35);
    border-radius:30px; padding:5px 16px;
    font-size:.65rem; font-weight:900; color:#ff8080;
    letter-spacing:2px; text-transform:uppercase;
    margin-bottom:16px; position:relative; z-index:1;
    animation: sh-fadeUp .5s .1s ease both;
  }
  .sh-hero-label-dot {
    width:6px; height:6px; border-radius:50%;
    background:#e02020; box-shadow:0 0 8px #e02020;
    animation: sh-pulse 1.8s ease-in-out infinite;
  }
  .sh-hero-title {
    font-size:2.8rem; font-weight:900; letter-spacing:-2px; line-height:1;
    color: var(--red);
    -webkit-text-fill-color: var(--red);
    background: none;
    margin-bottom:10px; position:relative; z-index:1;
    animation: sh-fadeUp .5s .15s ease both;
  }
  .sh-hero-sub {
    font-size:.88rem; color:var(--text2);
    position:relative; z-index:1;
    animation: sh-fadeUp .5s .2s ease both;
  }
  .sh-hero-deco { position:absolute; font-size:5rem; opacity:.03; pointer-events:none; }
  .sh-hero-deco-1 { top:8px; left:40px; animation:sh-float 7s ease-in-out infinite; }
  .sh-hero-deco-2 { bottom:8px; right:50px; font-size:4rem; animation:sh-float 9s ease-in-out infinite reverse; }
  @media(max-width:768px){
    .sh-hero-inner{ padding:32px 20px 28px; }
    .sh-hero-title{ font-size:1.9rem; letter-spacing:-1px; }
    .sh-hero-sub{ font-size:.78rem; }
  }

  /* hide old title */
  .sh-title { display:none; }

  /* hero — text only, no dark box */
  .sh-hero {
    width: 100%;
    position: relative; z-index: 1;
    animation: sh-fadeUp .5s ease both;
    padding: 36px 24px 24px;
    text-align: center;
  }
  .sh-hero-inner {
    background: none;
    padding: 0;
    box-shadow: none;
  }
  .sh-hero-inner::before, .sh-hero-inner::after { display:none; }
  .sh-hero-deco { display:none; }
  .sh-hero-label {
    display:inline-flex; align-items:center; gap:7px;
    background: var(--red-soft);
    border: 1px solid rgba(224,32,32,.2);
    border-radius:30px; padding:4px 14px;
    font-size:.65rem; font-weight:900; color:var(--red);
    letter-spacing:1.5px; text-transform:uppercase;
    margin-bottom:14px;
  }
  .sh-hero-label-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--red);
    animation: sh-pulse 1.8s ease-in-out infinite;
  }
  .sh-hero-title {
    font-size:2.4rem; font-weight:900; letter-spacing:-1.5px;
    color: var(--red);
    margin-bottom:8px;
  }
  .sh-hero-sub { font-size:.88rem; color:var(--text2); }
  @media(max-width:768px){
    .sh-hero { padding:24px 16px 16px; }
    .sh-hero-title { font-size:1.7rem; }
  }

  /* ── SETUP CARD ── */
  .sh-setup {
    background:var(--white); border:1.5px solid var(--border);
    border-radius:20px; padding:40px 32px; text-align:center;
    max-width:440px; width:100%;
    box-shadow:0 8px 32px rgba(0,0,0,.08);
    position:relative; z-index:1; margin:32px 16px;
    animation: sh-scaleIn .4s ease both;
  }
  .sh-setup-ico { width:60px;height:60px;border-radius:50%;background:var(--red-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;border:1px solid rgba(224,32,32,.2);animation:sh-pulse 2.5s ease-in-out infinite; }
  .sh-setup-btn { display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:24px;background:linear-gradient(135deg,#e02020,#c51c1c);color:#fff;border:none;font-family:'Noto Sans Thai',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;box-shadow:0 6px 24px rgba(224,32,32,.35);transition:all .2s;position:relative;overflow:hidden; }
  .sh-setup-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:sh-shimmer 2.5s ease-in-out infinite;}
  .sh-setup-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(224,32,32,.45);}

  /* ── 2-COL LAYOUT ── */
  .sh-cols {
    display:flex; gap:20px;
    width:100%; max-width:1100px;
    padding:0 24px; box-sizing:border-box;
    align-items:stretch;
    position:relative; z-index:1;
  }
  @media(max-width:900px){ .sh-cols{ flex-direction:column; gap:14px; padding:0 14px; } }

  /* ── CARD BASE ── */
  .sh-col-l, .sh-col-r {
    flex:1; min-width:0;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    transition: all .3s cubic-bezier(.34,1.2,.64,1);
    position: relative;
  }
  /* top accent bar */
  .sh-col-l::before, .sh-col-r::before {
    content:''; position:absolute;
    top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,transparent,#e02020 30%,#ff6b6b 50%,#e02020 70%,transparent);
    opacity:0; transition:opacity .3s;
  }
  .sh-col-l:hover::before, .sh-col-r:hover::before { opacity:1; }
  .sh-col-l:hover, .sh-col-r:hover {
    border-color:rgba(224,32,32,.25);
    box-shadow:0 8px 36px rgba(224,32,32,.1),0 4px 24px rgba(0,0,0,.08);
    transform:translateY(-3px);
  }
  .sh-col-l { animation:sh-slideL .45s .05s ease both; }
  .sh-col-r { animation:sh-slideR .45s .12s ease both; }
  @media(max-width:900px){ .sh-col-l,.sh-col-r{ flex:none;width:100%; } }
  @media(max-width:900px){ .sh-col-l:hover,.sh-col-r:hover{ transform:none; } }

  /* ── HEADER ── */
  .sh-col-head, .sh-col-r-head {
    padding:20px 20px 16px;
    border-bottom:1px solid var(--border);
    flex-shrink:0; display:flex; align-items:center;
    justify-content:center; gap:10px;
    background:var(--surface);
  }
  .sh-col-num {
    width:26px; height:26px; border-radius:50%;
    background:linear-gradient(135deg,#e02020,#c51c1c);
    color:#fff; font-size:.72rem; font-weight:900;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; box-shadow:0 4px 12px rgba(224,32,32,.4);
    animation:sh-pulse 2.5s ease-in-out infinite;
  }
  .sh-col-title { font-size:.92rem; font-weight:800; color:var(--text); }

  /* ── SEARCH ── */
  .sh-col-search, .sh-col-r-search {
    display:flex; align-items:center; gap:9px;
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:14px; padding:11px 16px;
    margin:14px 16px 10px; transition:all .2s;
  }
  .sh-col-search:focus-within, .sh-col-r-search:focus-within {
    border-color:var(--red); background:#fff;
    box-shadow:0 0 0 3px rgba(224,32,32,.08),0 4px 16px rgba(224,32,32,.06);
  }
  .sh-col-search input, .sh-col-r-search input {
    border:none; background:none; outline:none; flex:1;
    font-family:'Noto Sans Thai',sans-serif; font-size:.84rem; color:var(--text);
  }
  .sh-col-search input::placeholder, .sh-col-r-search input::placeholder { color:var(--text3); }
  .sh-col-search svg, .sh-col-r-search svg { color:var(--text3); flex-shrink:0; }

  /* ── APP LIST ── */
  .sh-col-list {
    height:calc(5 * 72px); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:rgba(224,32,32,.3) transparent;
  }
  .sh-col-list::-webkit-scrollbar{ width:3px; }
  .sh-col-list::-webkit-scrollbar-thumb{ background:rgba(224,32,32,.3); border-radius:3px; }

  /* ── APP ROW ── */
  .sh-app {
    display:flex; align-items:center; gap:13px;
    padding:11px 18px; height:72px; box-sizing:border-box;
    cursor:pointer; position:relative; overflow:hidden;
    transition:all .2s cubic-bezier(.34,1.3,.64,1);
  }
  .sh-app:not(:last-child){ border-bottom:1px solid var(--border); }
  /* shimmer sweep */
  .sh-app::after {
    content:''; position:absolute; top:0; height:100%;
    width:50%; left:-100%;
    background:linear-gradient(90deg,transparent,rgba(224,32,32,.04),transparent);
    transition:left .4s; pointer-events:none;
  }
  .sh-app:hover::after{ left:160%; }
  .sh-app:hover{ background:var(--red-soft); }
  .sh-app.active {
    background:linear-gradient(90deg,var(--red-soft),rgba(224,32,32,.03),transparent);
    border-left:3px solid var(--red);
  }
  .sh-app.active .sh-app-name{ color:var(--red); font-weight:800; }
  .sh-app.active::after {
    content:''; display:none;
  }
  .sh-app-arrow {
    font-size:1.1rem; font-weight:900; color:var(--red);
    flex-shrink:0; opacity:0; transition:opacity .2s;
    line-height:1;
  }
  .sh-app.active .sh-app-arrow { opacity:1; }
  .sh-app-ico {
    width:48px; height:48px; border-radius:13px;
    overflow:hidden; background:var(--surface);
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; border:1px solid var(--border);
    transition:transform .3s cubic-bezier(.34,1.5,.64,1);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .sh-app:hover .sh-app-ico{ transform:scale(1.12) rotate(-5deg); }
  .sh-app.active .sh-app-ico{ border-color:rgba(224,32,32,.25); box-shadow:0 4px 14px rgba(224,32,32,.18); }
  .sh-app-ico img{ width:100%; height:100%; object-fit:cover; }
  .sh-app-name{ font-size:.88rem; font-weight:600; color:var(--text); flex:1; transition:color .2s; }
  .sh-app-cnt {
    font-size:.63rem; font-weight:800; padding:4px 10px; border-radius:20px;
    background:var(--red-soft); color:var(--red);
    border:1px solid rgba(224,32,32,.15); white-space:nowrap;
    transition:all .2s; animation:sh-badgeIn .3s cubic-bezier(.34,1.5,.64,1) both;
  }
  .sh-app:hover .sh-app-cnt{ background:var(--red); color:#fff; }

  /* ── PACKAGE LIST ── */
  .sh-col-r-list {
    height:calc(5 * 72px); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:rgba(224,32,32,.3) transparent;
  }
  .sh-col-r-list::-webkit-scrollbar{ width:3px; }
  .sh-col-r-list::-webkit-scrollbar-thumb{ background:rgba(224,32,32,.3); border-radius:3px; }

  /* ── EMPTY ── */
  .sh-empty {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:12px; padding:48px 24px; color:var(--text3); min-height:200px;
  }
  .sh-empty-ico{ font-size:3rem; opacity:.2; animation:sh-float 4s ease-in-out infinite; }

  /* ── PACKAGE ROW ── */
  .sh-pkg {
    display:flex; align-items:center; gap:13px;
    padding:11px 18px; height:72px; box-sizing:border-box;
    cursor:pointer; position:relative; overflow:hidden;
    transition:all .2s cubic-bezier(.34,1.3,.64,1);
    animation:sh-pkgIn .28s ease both;
  }
  .sh-pkg:nth-child(1){animation-delay:.03s}
  .sh-pkg:nth-child(2){animation-delay:.07s}
  .sh-pkg:nth-child(3){animation-delay:.11s}
  .sh-pkg:nth-child(4){animation-delay:.15s}
  .sh-pkg:nth-child(5){animation-delay:.19s}
  .sh-pkg:not(:last-child){ border-bottom:1px solid var(--border); }
  .sh-pkg::after {
    content:''; position:absolute; top:0; height:100%;
    width:50%; left:-100%;
    background:linear-gradient(90deg,transparent,rgba(224,32,32,.04),transparent);
    transition:left .4s; pointer-events:none;
  }
  .sh-pkg:hover::after{ left:160%; }
  .sh-pkg:hover{ background:var(--red-soft); }
  .sh-pkg.oos{ opacity:.45; cursor:not-allowed; }
  .sh-pkg.oos:hover{ transform:none; background:transparent; }
  .sh-pkg-ico {
    width:48px; height:48px; border-radius:13px;
    overflow:hidden; background:var(--surface);
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; border:1px solid var(--border);
    transition:transform .3s cubic-bezier(.34,1.5,.64,1);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .sh-pkg:hover .sh-pkg-ico{ transform:scale(1.1) rotate(-5deg); }
  .sh-pkg-ico img{ width:100%; height:100%; object-fit:cover; }
  .sh-pkg-ico.oos{ filter:grayscale(1); }
  .sh-pkg-name{ font-size:.88rem; font-weight:600; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s; }
  .sh-pkg:hover .sh-pkg-name{ color:var(--red); }
  .sh-pkg-price{ text-align:right; flex-shrink:0; }
  .sh-pkg-orig{ font-size:.68rem; color:var(--text3); text-decoration:line-through; margin-bottom:4px; }
  .sh-pkg-pill {
    font-size:.88rem; font-weight:900; padding:6px 16px; border-radius:22px;
    background:linear-gradient(135deg,#e02020,#c51c1c); color:#fff; white-space:nowrap;
    box-shadow:0 4px 14px rgba(224,32,32,.3);
    animation:sh-priceGlow 2.5s ease-in-out infinite;
    transition:all .22s; display:inline-block; position:relative; overflow:hidden;
  }
  .sh-pkg-pill::before{
    content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    animation:sh-shimmer 2.5s ease-in-out infinite;
  }
  .sh-pkg:hover .sh-pkg-pill{ transform:scale(1.07); box-shadow:0 6px 22px rgba(224,32,32,.5); }
  .sh-pkg-oos{ font-size:.72rem; font-weight:700; padding:5px 14px; border-radius:20px; background:var(--gray-bg); color:var(--gray); white-space:nowrap; }

  /* ── SPINNER ── */
  .sh-spin{ display:flex; align-items:center; justify-content:center; padding:52px; flex-direction:column; gap:14px; }
  .prd-spinner{
    width:30px; height:30px; border:2.5px solid var(--border);
    border-top-color:var(--red); border-radius:50%;
    animation:sh-spin .75s linear infinite;
    box-shadow:0 0 12px rgba(224,32,32,.2);
  }

  /* ── MOBILE ── */
  @media(max-width:600px){
    .sh-col-list,.sh-col-r-list{ height:calc(5 * 66px); }
    .sh-app,.sh-pkg{ height:66px; padding:10px 14px; }
    .sh-app-ico,.sh-pkg-ico{ width:44px; height:44px; border-radius:11px; }
    .sh-pkg-pill{ font-size:.82rem; padding:5px 12px; }
  }

  /* ── BUY MODAL ── */
  .sh-mask{ position:fixed; inset:0; z-index:9999; background:rgba(15,20,30,.55); backdrop-filter:blur(12px); display:none; align-items:center; justify-content:center; padding:20px; }
  .sh-mask.open{ display:flex; }
  @media(max-width:600px){ .sh-mask{ align-items:flex-end; padding:0; } }
  .sh-modal{
    background:var(--white); border-radius:24px; width:100%; max-width:480px;
    max-height:95vh; overflow-y:auto;
    box-shadow:0 32px 80px rgba(0,0,0,.25);
    animation:sh-scaleIn .26s cubic-bezier(.34,1.4,.64,1); scrollbar-width:none;
    border:1.5px solid var(--border); position:relative;
  }
  @media(max-width:600px){ .sh-modal{ border-radius:24px 24px 0 0; max-width:100%; max-height:calc(100vh - 112px); overflow-y:auto; } }
  .sh-modal::before{
    content:''; position:absolute; top:0; left:15%; right:15%; height:2px;
    background:linear-gradient(90deg,transparent,var(--red),transparent);
    border-radius:0 0 4px 4px;
  }
  .sh-modal::-webkit-scrollbar{ display:none; }
  .sh-modal-drag{ width:40px; height:4px; border-radius:4px; background:var(--border2); margin:12px auto 0; }
  .sh-modal-head{ padding:16px 22px 14px; border-bottom:1px solid var(--border); font-size:.92rem; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; }
  .sh-modal-product{ display:flex; align-items:center; gap:14px; padding:16px 22px; background:var(--surface); border-bottom:1px solid var(--border); }
  .sh-modal-prod-ico{ width:56px; height:56px; border-radius:14px; overflow:hidden; background:var(--surface); border:1.5px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 2px 10px rgba(0,0,0,.08); }
  .sh-modal-prod-ico img{ width:100%; height:100%; object-fit:cover; }
  .sh-modal-prod-name{ font-size:.92rem; font-weight:800; color:var(--text); line-height:1.4; }
  .sh-modal-prod-cat{ font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--red-soft); color:var(--red); display:inline-block; margin-top:6px; border:1px solid rgba(224,32,32,.15); }
  /* ── rows ── */
  .sh-modal-rows{ padding:6px 22px 2px; display:flex; flex-direction:column; }
  .sh-modal-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--border); }
  .sh-modal-row:last-child{ border-bottom:none; }
  .sh-modal-row.total{ background:none; padding:13px 0; }
  .sh-modal-lbl{ font-size:.82rem; color:var(--text2); }
  .sh-modal-val{ font-size:.84rem; font-weight:700; color:var(--text); }
  .sh-modal-val.red{ color:var(--red); }
  .sh-modal-val.big{ font-size:1.1rem; font-weight:900; color:var(--red); }
  .sh-modal-val.remain{ font-size:.84rem; font-weight:600; color:var(--text); }
  .sh-modal-disc{ display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--border); }
  /* ── accordion ── */
  .sh-acc-btn{ display:flex; align-items:center; gap:8px; width:100%; padding:13px 22px; background:var(--surface); border:none; border-top:1px solid var(--border); border-bottom:1px solid var(--border); cursor:pointer; font-family:'Noto Sans Thai',sans-serif; font-size:.78rem; color:var(--text2); font-weight:600; transition:background .12s; }
  .sh-acc-btn:hover{ background:var(--bg); }
  .sh-acc-body{ padding:14px 22px; background:var(--bg); font-size:.76rem; color:var(--text2); line-height:2; border-bottom:1px solid var(--border); display:none; white-space:pre-wrap; word-break:break-word; }
  .sh-acc-body.open{ display:block; }
  /* ── checkbox row ── */
  .sh-check-row{ display:flex; align-items:center; justify-content:space-between; padding:15px 22px; border-bottom:1px solid var(--border); }
  .sh-check{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.8rem; color:var(--text2); font-weight:500; }
  .sh-check input{ accent-color:var(--red); width:17px; height:17px; cursor:pointer; flex-shrink:0; }
  .sh-stock-left{ font-size:.72rem; font-weight:700; color:var(--green); background:#f0fdf4; border:1px solid #bbf7d0; padding:3px 10px; border-radius:20px; }
  /* ── footer buttons ── */
  .sh-footer{ display:flex; gap:10px; padding:16px 22px 22px; }
  @media(max-width:600px){ .sh-footer{ flex-direction:column; gap:10px; padding:14px 18px 22px; } }
  .sh-cancel{ flex:1; padding:14px; border-radius:14px; border:1.5px solid var(--border); background:var(--white); font-family:'Noto Sans Thai',sans-serif; font-size:.9rem; font-weight:600; color:var(--text2); cursor:pointer; transition:all .18s; }
  .sh-cancel:hover{ border-color:var(--border2); color:var(--text); background:var(--surface); }
  .sh-buy{
    flex:2; padding:14px; border-radius:14px; border:none;
    background:linear-gradient(135deg,#e02020,#c51c1c); color:#fff;
    font-family:'Noto Sans Thai',sans-serif; font-size:.95rem; font-weight:800;
    cursor:pointer; transition:all .22s;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 6px 22px rgba(224,32,32,.35); position:relative; overflow:hidden;
  }
  .sh-buy::before{ content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); animation:sh-shimmer 2.2s ease-in-out infinite; }
  .sh-buy:hover{ transform:translateY(-2px); box-shadow:0 10px 32px rgba(224,32,32,.5); }
  .sh-buy:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; transform:none; }
  .sh-buy:disabled::before{ display:none; }
  .sh-result-ico{ width:72px; height:72px; border-radius:50%; margin:28px auto 16px; display:flex; align-items:center; justify-content:center; font-size:2rem; animation:sh-scaleIn .35s cubic-bezier(.34,1.5,.64,1); }
  .sh-result-ico.ok{ background:var(--green-bg); border:2px solid #86efac; }
  .sh-result-ico.err{ background:var(--red-bg); border:2px solid #fca5a5; }
  .sh-result-acc{ margin:0 22px 16px; background:var(--text); border-radius:14px; padding:16px; cursor:pointer; transition:all .18s; }
  .sh-result-acc:hover{ background:#1e2a3a; }
  .sh-result-acc-lbl{ font-size:.62rem; color:rgba(255,255,255,.3); font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px; }
  .sh-result-acc-val{ font-size:.9rem; font-weight:800; color:var(--red); word-break:break-all; line-height:1.7; }
  .sh-result-copy{ font-size:.64rem; color:rgba(255,255,255,.25); margin-top:6px; }
  

/* ══ history.css block ══ */

  /* ── keyframes (borrow from product page) ── */
  @keyframes hy-fadeUp  {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  @keyframes hy-scaleIn {from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
  @keyframes hy-slideIn {from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
  @keyframes hy-pulse   {0%,100%{box-shadow:0 0 0 0 rgba(224,32,32,.4)}70%{box-shadow:0 0 0 8px rgba(224,32,32,0)}}
  @keyframes hy-shimmer {0%{background-position:200% 0}100%{background-position:-200% 0}}
  @keyframes hy-glow    {0%,100%{box-shadow:0 4px 14px rgba(224,32,32,.18)}50%{box-shadow:0 4px 22px rgba(224,32,32,.38)}}
  @keyframes hy-barIn   {from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes hy-float   {0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

  #pageHistory{flex-direction:column;overflow:hidden;background:var(--bg);position:relative;}
  #pageHistory.active{display:flex;}
  .hy-scroll{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(224,32,32,.25) transparent;}
  .hy-scroll::-webkit-scrollbar{width:3px;}
  .hy-scroll::-webkit-scrollbar-thumb{background:rgba(224,32,32,.25);border-radius:3px;}

  /* ── WRAP ── */
  .hy-wrap{width:100%;max-width:860px;margin:0 auto;padding:28px 20px 100px;}
  @media(max-width:600px){.hy-wrap{padding:18px 12px 100px;}}

  /* ── PAGE HEADER ── */
  .hy-ph{
    display:flex;align-items:center;gap:13px;margin-bottom:22px;
    animation:hy-fadeUp .45s ease both;
  }
  .hy-ph-icon{
    width:44px;height:44px;border-radius:14px;flex-shrink:0;
    background:linear-gradient(135deg,var(--red) 0%,#c51c1c 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 16px rgba(224,32,32,.38);
    animation:hy-glow 3s ease-in-out infinite;
  }
  .hy-ph-title{font-size:1.18rem;font-weight:900;color:var(--text);letter-spacing:-.3px;}
  .hy-ph-sub{font-size:.7rem;color:var(--text3);margin-top:2px;}

  /* ── STAT CARDS ── */
  .hy-sc-row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:20px;
    animation:hy-fadeUp .45s .06s ease both;
  }
  @media(max-width:420px){.hy-sc-row{gap:8px;}}

  .hy-sc{
    background:var(--white);border-radius:16px;padding:15px 14px 13px;
    border:1.5px solid var(--border);cursor:pointer;position:relative;overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.055);
    transition:all .25s cubic-bezier(.34,1.4,.64,1);
  }
  /* shimmer sweep effect on card */
  .hy-sc::after{
    content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(224,32,32,.04),transparent);
    transition:left .5s;pointer-events:none;
  }
  .hy-sc:hover::after{left:160%;}
  .hy-sc:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.1);}
  .hy-sc.active{
    border-color:var(--red);
    background:linear-gradient(135deg,#fff8f8 0%,#fff 100%);
    box-shadow:0 4px 22px rgba(224,32,32,.2);
  }
  .hy-sc-dot{
    width:8px;height:8px;border-radius:50%;background:var(--border);
    position:absolute;top:11px;right:12px;transition:background .2s;
  }
  .hy-sc.active .hy-sc-dot{background:var(--red);animation:hy-pulse 2s ease-in-out infinite;}
  .hy-sc-emoji{font-size:1.35rem;margin-bottom:7px;display:block;line-height:1;animation:hy-float 4s ease-in-out infinite;}
  .hy-sc:nth-child(2) .hy-sc-emoji{animation-delay:.5s;}
  .hy-sc:nth-child(3) .hy-sc-emoji{animation-delay:1s;}
  .hy-sc-num{font-size:1.55rem;font-weight:900;color:var(--text);line-height:1;transition:color .2s;letter-spacing:-.5px;}
  .hy-sc.active .hy-sc-num{color:var(--red);}
  .hy-sc-lbl{font-size:.58rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-top:4px;}

  /* ── TOOLBAR ── */
  .hy-tb{
    display:flex;align-items:center;gap:8px;margin-bottom:15px;flex-wrap:wrap;
    animation:hy-fadeUp .45s .1s ease both;
  }
  .hy-srch{
    display:flex;align-items:center;gap:8px;background:var(--white);
    border:1.5px solid var(--border);border-radius:12px;
    padding:10px 14px;flex:1;min-width:180px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);transition:all .18s;
  }
  .hy-srch:focus-within{
    border-color:var(--red);
    box-shadow:0 2px 14px rgba(224,32,32,.12);
  }
  .hy-srch input{border:none;background:none;outline:none;flex:1;font-family:'Noto Sans Thai',sans-serif;font-size:.78rem;color:var(--text);}
  .hy-srch input::placeholder{color:var(--text3);}
  .hy-sel{
    padding:10px 11px;border-radius:12px;border:1.5px solid var(--border);
    background:var(--white);color:var(--text2);font-family:'Noto Sans Thai',sans-serif;
    font-size:.74rem;outline:none;cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.04);transition:border-color .15s;
  }
  .hy-sel:focus{border-color:var(--red);}
  .hy-rfr{
    width:40px;height:40px;border-radius:12px;border:1.5px solid var(--border);
    background:var(--white);color:var(--text2);cursor:pointer;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.04);transition:all .22s;
  }
  .hy-rfr:hover{border-color:var(--red);color:var(--red);transform:rotate(200deg);}

  /* ── CARD LIST ── */
  .hy-cd{
    background:var(--white);border-radius:14px;padding:13px 15px;margin-bottom:9px;
    display:flex;align-items:center;gap:12px;cursor:pointer;
    border:1.5px solid var(--border);position:relative;overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    transition:all .2s cubic-bezier(.34,1.3,.64,1);
  }
  /* red left bar */
  .hy-cd-bar{
    position:absolute;left:0;top:8%;bottom:8%;width:3px;
    background:linear-gradient(180deg,var(--red),rgba(224,32,32,.3));
    border-radius:0 3px 3px 0;
    transform:scaleY(0);transform-origin:center;
    transition:transform .22s cubic-bezier(.34,1.4,.64,1);
  }
  /* shimmer sweep */
  .hy-cd::after{
    content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(224,32,32,.035),transparent);
    transition:left .45s;pointer-events:none;
  }
  .hy-cd:hover::after{left:150%;}
  .hy-cd:hover{
    border-color:rgba(224,32,32,.22);
    box-shadow:0 6px 24px rgba(224,32,32,.1);
    transform:translateX(4px);
  }
  .hy-cd:hover .hy-cd-bar{transform:scaleY(1);}
  .hy-cd:active{transform:translateX(2px) scale(.99);}
  .hy-cd-ico{
    width:44px;height:44px;border-radius:12px;overflow:hidden;flex-shrink:0;
    background:var(--surface);display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;border:1.5px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,.07);
    transition:transform .2s cubic-bezier(.34,1.5,.64,1);
  }
  .hy-cd:hover .hy-cd-ico{transform:scale(1.08) rotate(-3deg);}
  .hy-cd-ico img{width:100%;height:100%;object-fit:cover;}
  .hy-cd-info{flex:1;min-width:0;}
  .hy-cd-name{font-size:.84rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;}
  .hy-cd-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
  .hy-bx{font-size:.58rem;font-weight:800;padding:2px 8px;border-radius:20px;letter-spacing:.2px;}
  .hy-bx-prem{background:var(--red-soft);color:var(--red);border:1px solid rgba(224,32,32,.18);}
  .hy-bx-prod{background:#fef9c3;color:#854d0e;border:1px solid #fde68a;}
  .hy-bx-otp{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe;}
  .hy-bx-ok{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0;}
  .hy-bx-pend{background:#fef9c3;color:#854d0e;border:1px solid #fde68a;}
  .hy-cd-date{font-size:.62rem;color:var(--text3);}
  .hy-cd-r{text-align:right;flex-shrink:0;}
  .hy-cd-price{
    font-size:.95rem;font-weight:900;color:var(--red);line-height:1;
    transition:transform .15s;
  }
  .hy-cd:hover .hy-cd-price{transform:scale(1.05);}
  .hy-cd-num{font-size:.52rem;opacity:.4;vertical-align:super;font-weight:700;}
  .hy-cd-oid{font-size:.58rem;color:var(--text3);margin-top:3px;font-family:monospace;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hy-cd-arr{
    font-size:1.15rem;color:var(--border2);margin-left:4px;flex-shrink:0;
    transition:all .18s;
  }
  .hy-cd:hover .hy-cd-arr{color:var(--red);transform:translateX(4px);}

  /* ── PAGINATION ── */
  .hy-pg{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:20px;flex-wrap:wrap;}
  .hy-pg-btn{
    min-width:34px;height:34px;border-radius:9px;border:1.5px solid var(--border);
    background:var(--white);color:var(--text2);font-family:'Noto Sans Thai',sans-serif;
    font-size:.74rem;font-weight:700;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .15s;padding:0 7px;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
  }
  .hy-pg-btn:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);box-shadow:0 4px 10px rgba(224,32,32,.15);}
  .hy-pg-btn.on{
    background:linear-gradient(135deg,var(--red),#c51c1c);
    color:#fff;border-color:var(--red);
    box-shadow:0 4px 12px rgba(224,32,32,.3);
  }
  .hy-pg-btn:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none;}
  .hy-pg-info{font-size:.7rem;color:var(--text3);padding:0 6px;}

  /* ── SHIMMER SKELETON ── */
  .hy-shim{background:var(--white);border-radius:14px;padding:13px 15px;margin-bottom:9px;display:flex;gap:12px;align-items:center;border:1.5px solid var(--border);overflow:hidden;position:relative;}
  .hy-shim::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.6) 50%,transparent 80%);background-size:200%;animation:hy-shimmer 1.4s ease infinite;}
  .hy-shim-ico{width:44px;height:44px;border-radius:12px;flex-shrink:0;background:#e8eaed;}
  .hy-shim-bd{flex:1;}
  .hy-shim-l{height:10px;border-radius:6px;background:#e8eaed;margin-bottom:8px;}
  .hy-shim-l:last-child{width:50%;margin-bottom:0;}

  /* ── DETAIL PAGE ── */
  .hy-det{display:none;position:absolute;inset:0;z-index:10;background:var(--bg);overflow-y:auto;}
  .hy-det.open{display:block;animation:hy-slideIn .28s cubic-bezier(.4,0,.2,1);}
  .hy-det-wrap{width:100%;max-width:760px;margin:0 auto;padding:22px 20px 80px;}
  @media(max-width:600px){.hy-det-wrap{padding:15px 12px 80px;}}

  /* back header */
  .hy-det-hd{display:flex;align-items:center;gap:12px;margin-bottom:18px;animation:hy-fadeUp .35s ease both;}
  .hy-det-back{
    width:36px;height:36px;border-radius:10px;border:1.5px solid var(--border);
    background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:all .15s;box-shadow:0 2px 6px rgba(0,0,0,.05);
  }
  .hy-det-back:hover{border-color:var(--red);color:var(--red);transform:translateX(-2px);}
  .hy-det-hd-ico{
    width:36px;height:36px;border-radius:10px;
    background:linear-gradient(135deg,var(--red),#c51c1c);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 10px rgba(224,32,32,.3);
  }

  /* product card */
  .hy-det-prod{
    background:var(--white);border-radius:16px;padding:16px 18px;margin-bottom:12px;
    display:flex;align-items:center;gap:14px;
    box-shadow:0 3px 14px rgba(0,0,0,.08);border:1.5px solid var(--border);
    animation:hy-fadeUp .35s .04s ease both;
    position:relative;overflow:hidden;
  }
  .hy-det-prod::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--red) 30%,rgba(224,32,32,.4) 70%,transparent);
  }
  .hy-det-prod-ico{
    width:54px;height:54px;border-radius:14px;overflow:hidden;flex-shrink:0;
    background:var(--surface);display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;border:1.5px solid var(--border);
    box-shadow:0 3px 12px rgba(0,0,0,.1);
  }
  .hy-det-prod-ico img{width:100%;height:100%;object-fit:cover;}
  .hy-det-prod-name{font-size:.94rem;font-weight:800;color:var(--text);line-height:1.3;}
  .hy-det-prod-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px;}

  /* sections */
  .hy-det-sec{
    background:var(--white);border-radius:16px;padding:16px;margin-bottom:12px;
    box-shadow:0 3px 14px rgba(0,0,0,.07);border:1.5px solid var(--border);
    animation:hy-fadeUp .35s ease both;
  }
  .hy-det-sec:nth-child(3){animation-delay:.06s;}
  .hy-det-sec:nth-child(4){animation-delay:.1s;}
  .hy-det-sec-hd{
    display:flex;align-items:center;gap:9px;
    margin-bottom:14px;padding-bottom:11px;
    border-bottom:1px solid var(--border);
  }
  .hy-det-sec-icon{
    width:28px;height:28px;border-radius:8px;
    background:var(--red-soft);border:1px solid rgba(224,32,32,.15);
    display:flex;align-items:center;justify-content:center;
  }
  .hy-det-sec-title{font-size:.8rem;font-weight:800;color:var(--text);}

  /* grid cells */
  .hy-det-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .hy-det-cell{
    background:var(--surface);border-radius:11px;padding:12px 13px;
    border:1px solid rgba(0,0,0,.035);
    transition:all .15s;
  }
  .hy-det-cell:hover{border-color:rgba(224,32,32,.12);background:#fff9f9;}
  .hy-det-cell.full{grid-column:1/-1;}
  .hy-det-cell-lbl{font-size:.59rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px;}
  .hy-det-cell-val{font-size:.83rem;font-weight:700;color:var(--text);}
  .hy-det-cell-val.red{color:var(--red);}

  /* account box */
  .hy-det-acc{
    background:linear-gradient(135deg,#fff9f9 0%,#fff5f5 100%);
    border-radius:13px;padding:16px;
    border:1.5px solid rgba(224,32,32,.14);
    position:relative;overflow:hidden;
  }
  .hy-det-acc::before{
    content:'';position:absolute;top:-20px;right:-20px;
    width:80px;height:80px;border-radius:50%;
    background:rgba(224,32,32,.07);filter:blur(18px);pointer-events:none;
  }
  .hy-det-acc::after{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--red),rgba(224,32,32,.2),transparent);
    border-radius:13px 13px 0 0;
  }
  .hy-det-acc-val{
    font-size:.8rem;color:var(--text);
    line-height:2;white-space:pre-wrap;word-break:break-word;
    position:relative;z-index:1;
  }
  .hy-det-copy{
    display:flex;align-items:center;gap:5px;
    border:1.5px solid rgba(224,32,32,.2);background:var(--red-soft);
    color:var(--red);border-radius:20px;padding:5px 13px;
    cursor:pointer;font-family:'Noto Sans Thai',sans-serif;
    font-size:.72rem;font-weight:700;transition:all .15s;
    margin-left:auto;
  }
  .hy-det-copy:hover{
    background:var(--red);color:#fff;
    box-shadow:0 3px 10px rgba(224,32,32,.28);
    transform:translateY(-1px);
  }
  

/* ══ totp.css block ══ */

  #pgTotp-wrap{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);padding:20px 16px 20px;}
  .totp-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
  .totp-hero{background:var(--text);border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;}
  .totp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 85% -10%,rgba(224,32,32,.3),transparent 55%),radial-gradient(ellipse at 10% 110%,rgba(224,32,32,.15),transparent 50%);pointer-events:none;}
  .totp-hero-ico{width:44px;height:44px;border-radius:13px;background:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .totp-hero-title{font-size:1rem;font-weight:800;color:#fff;line-height:1.2;}
  .totp-hero-sub{font-size:.72rem;color:rgba(255,255,255,.6);margin-top:3px;}
  .totp-card{background:var(--white);border-radius:16px;border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden;}
  .totp-card-head{padding:14px 16px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
  .totp-card-title{font-size:.82rem;font-weight:700;color:var(--text);}
  .totp-card-body{padding:14px 16px;}
  .totp-textarea{width:100%;min-height:120px;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-size:.78rem;font-family:'Noto Sans Thai',monospace;color:var(--text);background:var(--surface);resize:vertical;outline:none;transition:border-color .15s;box-sizing:border-box;line-height:1.7;}
  .totp-textarea:focus{border-color:var(--red);}
  .totp-textarea::placeholder{color:var(--text3);}
  .totp-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px;border:none;border-radius:11px;background:linear-gradient(135deg,#e02020,#c51c1c);color:#fff;font-size:.84rem;font-weight:700;font-family:'Noto Sans Thai',sans-serif;cursor:pointer;transition:opacity .15s;margin-top:10px;}
  .totp-btn:hover{opacity:.88;}
  .totp-btn:disabled{opacity:.5;cursor:not-allowed;}
  .totp-results{display:flex;flex-direction:column;gap:8px;}
  .totp-item{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;transition:border-color .2s;}
  .totp-item:hover{border-color:var(--red-soft);}
  .totp-item-left{flex:1;min-width:0;}
  .totp-item-label{font-size:.68rem;color:var(--text3);font-weight:600;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .totp-item-code{font-size:1.6rem;font-weight:900;color:var(--text);letter-spacing:4px;font-variant-numeric:tabular-nums;line-height:1;}
  .totp-item-right{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;}
  .totp-copy-btn{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;color:var(--text2);}
  .totp-copy-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
  .totp-ring-wrap{position:relative;width:32px;height:32px;}
  .totp-ring-svg{transform:rotate(-90deg);}
  .totp-ring-track{fill:none;stroke:var(--border);stroke-width:3;}
  .totp-ring-prog{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .9s linear;}
  .totp-secs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:var(--text2);}
  .totp-empty{text-align:center;padding:32px 16px;color:var(--text3);}
  .totp-empty-ico{font-size:2.2rem;margin-bottom:8px;}
  .totp-empty-txt{font-size:.78rem;}
  .totp-err{font-size:.72rem;color:var(--red);margin-top:6px;min-height:16px;}
  @keyframes totp-appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .totp-item{animation:totp-appear .2s ease both;}
  

/* ══ rebug.css block ══ */

#pgRbg-wrap{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);padding:20px 16px 20px;}
.rbg-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.rbg-hero{background:var(--text);border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;}
.rbg-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 85% -10%,rgba(224,32,32,.3),transparent 55%),radial-gradient(ellipse at 10% 110%,rgba(224,32,32,.15),transparent 50%);pointer-events:none;}
.rbg-hero-ico{width:44px;height:44px;border-radius:13px;background:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rbg-hero-title{font-size:1rem;font-weight:800;color:#fff;line-height:1.2;}
.rbg-hero-sub{font-size:.72rem;color:rgba(255,255,255,.6);margin-top:3px;}
.rbg-card{background:var(--white);border-radius:16px;border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden;}
.rbg-card-head{padding:14px 16px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.rbg-card-title{font-size:.82rem;font-weight:700;color:var(--text);}
.rbg-card-body{padding:18px 20px;}

/* Drop zone */
.rbg-dropzone{border:2px dashed var(--border2);border-radius:14px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--surface);position:relative;overflow:hidden;}
.rbg-dropzone:hover,.rbg-dropzone.drag-over{border-color:var(--red);background:var(--red-bg);}
.rbg-dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.rbg-drop-ico{font-size:2.4rem;margin-bottom:10px;display:block;opacity:.5;}
.rbg-drop-txt{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:4px;}
.rbg-drop-sub{font-size:.72rem;color:var(--text3);}
.rbg-drop-btn{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:8px 20px;border-radius:9px;background:var(--red);color:#fff;font-size:.78rem;font-weight:600;font-family:'Noto Sans Thai',sans-serif;border:none;cursor:pointer;transition:opacity .15s;}
.rbg-drop-btn:hover{opacity:.85;}

/* Preview + result area */
.rbg-preview-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.rbg-preview-row{grid-template-columns:1fr;}}
.rbg-img-box{border-radius:12px;border:1px solid var(--border);overflow:hidden;background:#f0f0f0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;}
.rbg-img-box img{width:100%;height:100%;object-fit:contain;}
.rbg-img-label{font-size:.7rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px;}
.rbg-checkerboard{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;}

/* Progress */
.rbg-progress{display:none;flex-direction:column;align-items:center;gap:12px;padding:32px 16px;text-align:center;}
.rbg-progress.show{display:flex;}
.rbg-spinner{width:44px;height:44px;border:3.5px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:rbg-spin .8s linear infinite;}
@keyframes rbg-spin{to{transform:rotate(360deg)}}
.rbg-progress-txt{font-size:.82rem;color:var(--text2);font-weight:500;}

/* Action buttons */
.rbg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.rbg-act-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:9px;font-family:'Noto Sans Thai',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;border:none;}
.rbg-act-primary{background:var(--red);color:#fff;}
.rbg-act-primary:hover{background:#c51c1c;box-shadow:0 2px 8px rgba(224,32,32,.25);}
.rbg-act-ghost{background:none;border:1.5px solid var(--border2);color:var(--text2);}
.rbg-act-ghost:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.rbg-act-dl{background:var(--green);color:#fff;}
.rbg-act-dl:hover{background:#138f3f;}

/* Error */
.rbg-err{background:var(--red-bg);border:1px solid rgba(224,32,32,.2);border-radius:10px;padding:10px 14px;font-size:.78rem;color:var(--red);display:none;margin-top:10px;}
.rbg-err.show{display:block;}

/* History */
.rbg-history{display:flex;flex-direction:column;gap:8px;}
.rbg-hist-item{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:10px 12px;transition:border-color .15s;}
.rbg-hist-item:hover{border-color:var(--border2);}
.rbg-hist-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--surface);}
.rbg-hist-info{flex:1;min-width:0;}
.rbg-hist-name{font-size:.78rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rbg-hist-time{font-size:.65rem;color:var(--text3);margin-top:2px;}
.rbg-hist-dl{width:30px;height:30px;border-radius:7px;border:1.5px solid var(--border);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:all .15s;flex-shrink:0;}
.rbg-hist-dl:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}

/* BG color picker */
.rbg-bgpicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;}
.rbg-bgpicker-label{font-size:.72rem;color:var(--text2);font-weight:600;}
.rbg-color-swatch{width:28px;height:28px;border-radius:7px;border:2px solid transparent;cursor:pointer;transition:all .15s;flex-shrink:0;}
.rbg-color-swatch.active{border-color:var(--red);transform:scale(1.15);}
.rbg-color-swatch:hover{transform:scale(1.1);}
.rbg-custom-color{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--border);cursor:pointer;overflow:hidden;padding:0;}

@keyframes rbg-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.rbg-hist-item{animation:rbg-appear .2s ease both;}


/* ══ youtube.css block ══ */

/* ══════════════════════════════════════════
   YT PAGE — FRESH WHITE/RED DESIGN 2026
══════════════════════════════════════════ */
@keyframes ytFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes ytSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes ytPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ytPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,32,32,.4)}70%{box-shadow:0 0 0 8px rgba(224,32,32,0)}}
@keyframes ytGreenPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.4)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}
@keyframes ytAmberPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.4)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}}
@keyframes ytSpin{to{transform:rotate(360deg)}}
@keyframes ytMaskIn{from{opacity:0}to{opacity:1}}
@keyframes ytBoxIn{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ytRowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes ytCountUp{from{transform:scale(1.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ytShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes ytBgFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes ytBgFloat2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(10px) rotate(-2deg)}}
@keyframes ytIconPop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-8deg)}70%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes ytGlow{0%,100%{box-shadow:0 4px 14px rgba(224,32,32,.3)}50%{box-shadow:0 6px 24px rgba(224,32,32,.55),0 0 40px rgba(224,32,32,.15)}}
@keyframes ytStatSlide{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ytRipple{0%{transform:scale(0);opacity:.4}100%{transform:scale(2.5);opacity:0}}
@keyframes ytWarnPing{0%,100%{opacity:1}50%{opacity:.6}}

/* ── Wrapper ── */
#ytPage{
  flex:1;overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(145deg,#f0f2f8 0%,#f7f8fa 40%,#fdf0f0 100%);
  scrollbar-width:thin;scrollbar-color:#e02020 transparent;
  position:relative;
}
#ytPage::before{
  content:'';position:fixed;top:-80px;right:-80px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,32,32,.06) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  animation:ytBgFloat 8s ease-in-out infinite;
}
#ytPage::after{
  content:'';position:fixed;bottom:-60px;left:-60px;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,32,32,.04) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  animation:ytBgFloat2 10s ease-in-out infinite;
}
#ytPage::-webkit-scrollbar{width:4px;}
#ytPage::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#e02020,#f87171);border-radius:10px;}

/* ── Layout ── */
.yt2-shell{
  max-width:1160px;margin:0 auto;
  padding:32px 24px 48px;
  display:flex;flex-direction:column;gap:0;
  position:relative;z-index:1;
}

/* ══ TOP BAR ══ */
.yt2-topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:28px;
  animation:ytFadeIn .4s ease both;
  background:linear-gradient(135deg,#1a0a0a 0%,#2d0f0f 50%,#1a1a2e 100%);
  border-radius:20px;
  padding:22px 28px;
  box-shadow:0 8px 32px rgba(224,32,32,.25),0 2px 8px rgba(0,0,0,.15);
  position:relative;overflow:hidden;
}
.yt2-topbar::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%,rgba(224,32,32,.2) 0%,transparent 60%),
             radial-gradient(ellipse at 20% 50%,rgba(255,100,100,.08) 0%,transparent 50%);
  pointer-events:none;
}
.yt2-topbar::after{
  content:'▶';position:absolute;right:28px;bottom:-8px;
  font-size:7rem;opacity:.04;color:#fff;
  pointer-events:none;line-height:1;
  animation:ytBgFloat 12s ease-in-out infinite;
}
.yt2-topbar-left{display:flex;align-items:center;gap:16px;position:relative;z-index:1;}
.yt2-icon-box{
  width:52px;height:52px;border-radius:16px;flex-shrink:0;
  background:linear-gradient(135deg,#e02020,#ff4444);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(224,32,32,.5),0 0 0 2px rgba(255,255,255,.1);
  animation:ytGlow 3s ease-in-out infinite;
  transition:transform .2s;
  cursor:pointer;
}
.yt2-icon-box:hover{transform:scale(1.08) rotate(-5deg);animation:ytIconPop .4s ease both;}
.yt2-page-title{font-size:1.3rem;font-weight:900;color:#fff;letter-spacing:-.4px;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.3);}
.yt2-page-sub{font-size:.74rem;color:rgba(255,255,255,.55);margin-top:3px;font-weight:500;}
.yt2-add-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:12px;border:none;
  background:linear-gradient(135deg,#e02020,#ff3333);
  color:#fff;
  font-family:'Noto Sans Thai',sans-serif;font-size:.82rem;font-weight:800;
  cursor:pointer;transition:all .2s;
  box-shadow:0 4px 16px rgba(224,32,32,.45),inset 0 1px 0 rgba(255,255,255,.15);
  white-space:nowrap;position:relative;z-index:1;overflow:hidden;
}
.yt2-add-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0;transition:opacity .2s;
}
.yt2-add-btn:hover::before{opacity:1;}
.yt2-add-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(224,32,32,.55);}
.yt2-add-btn:active{transform:translateY(0);box-shadow:0 3px 10px rgba(224,32,32,.35);}
.yt2-add-btn svg{transition:transform .25s;}
.yt2-add-btn:hover svg{transform:rotate(90deg) scale(1.2);}

/* ══ STAT ROW ══ */
.yt2-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-bottom:22px;
  animation:ytFadeIn .45s .05s ease both;
}
.yt2-stat{
  background:#fff;border-radius:20px;
  padding:20px 20px 16px;
  border:1.5px solid #f0f0f0;
  display:flex;align-items:flex-start;gap:14px;
  transition:all .22s cubic-bezier(.34,1.3,.64,1);
  position:relative;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.yt2-stat:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(224,32,32,.12);border-color:#fcd5d5;}
.yt2-stat:nth-child(1){animation:ytStatSlide .5s .05s ease both;}
.yt2-stat:nth-child(2){animation:ytStatSlide .5s .1s ease both;}
.yt2-stat:nth-child(3){animation:ytStatSlide .5s .15s ease both;}
.yt2-stat:nth-child(4){animation:ytStatSlide .5s .2s ease both;}
.yt2-stat-dot{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,#e02020,#ff5555);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 14px rgba(224,32,32,.35);
  transition:transform .2s,box-shadow .2s;
}
.yt2-stat:hover .yt2-stat-dot{transform:scale(1.08);box-shadow:0 6px 20px rgba(224,32,32,.45);}
.yt2-stat-val{
  font-size:2rem;font-weight:900;line-height:1;letter-spacing:-1.5px;
  color:var(--text);
  animation:ytCountUp .5s cubic-bezier(.34,1.4,.64,1) both;
}
.yt2-stat-lbl{font-size:.7rem;color:#9aa0b0;margin-top:5px;font-weight:600;letter-spacing:.2px;}
.yt2-stat-bar{height:3px;background:#f5f5f5;border-radius:4px;margin-top:14px;overflow:hidden;}
.yt2-stat-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#e02020,#ff6b6b);transition:width .7s cubic-bezier(.34,1,.64,1);}

/* ══ FILTER BAR ══ */
.yt2-filterbar{
  background:#fff;border-radius:16px;
  border:1.5px solid #edf0f7;
  padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;
  animation:ytFadeIn .45s .1s ease both;
  flex-wrap:wrap;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  transition:box-shadow .2s;
}
.yt2-filterbar:focus-within{box-shadow:0 4px 20px rgba(224,32,32,.08);}
.yt2-search{
  display:flex;align-items:center;gap:9px;
  background:#f7f8fa;border:1.5px solid #edf0f7;
  border-radius:10px;padding:9px 14px;
  flex:1;min-width:200px;max-width:340px;
  transition:all .2s;
}
.yt2-search:focus-within{
  border-color:#e02020;background:#fff;
  box-shadow:0 0 0 4px rgba(224,32,32,.1);
  transform:scale(1.01);
}
.yt2-search input{
  border:none;background:none;outline:none;flex:1;
  font-family:'Noto Sans Thai',sans-serif;font-size:.8rem;color:#1a1d27;
}
.yt2-search input::placeholder{color:#b4bbc8;}
.yt2-tabs{display:flex;gap:3px;background:#f7f8fa;border-radius:10px;padding:3px;}
.yt2-tab{
  padding:7px 18px;border-radius:8px;border:none;background:none;
  font-family:'Noto Sans Thai',sans-serif;font-size:.75rem;font-weight:600;
  color:#9aa0b0;cursor:pointer;transition:all .18s cubic-bezier(.34,1.3,.64,1);white-space:nowrap;
}
.yt2-tab:hover{color:#1a1d27;background:rgba(255,255,255,.6);}
.yt2-tab.active{
  background:#fff;color:#e02020;font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  transform:scale(1.02);
}
.yt2-count-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;font-size:.58rem;
  font-weight:800;margin-left:4px;background:#f0f1f5;color:#9aa0b0;
  transition:all .2s;
}
.yt2-tab.active .yt2-count-badge{background:rgba(224,32,32,.12);color:#e02020;transform:scale(1.1);}

/* ══ WARN STRIP ══ */
.yt2-warnstrip{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#fff7ed,#fffbf0);
  border:1.5px solid #fed7aa;border-radius:14px;
  padding:13px 18px;margin-bottom:18px;
  font-size:.78rem;font-weight:600;color:#92400e;
  box-shadow:0 2px 12px rgba(217,119,6,.12);
  animation:ytWarnPing 2.5s ease-in-out infinite;
  position:relative;overflow:hidden;
}
.yt2-warnstrip::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#f59e0b,#d97706);
  border-radius:4px 0 0 4px;
}
.yt2-warnstrip.hidden{display:none;}
.yt2-warnstrip svg{flex-shrink:0;}
.yt2-warn-sub{font-size:.68rem;font-weight:400;color:#b45309;margin-top:1px;}

/* ══ TABLE ══ */
.yt2-table-wrap{
  background:#fff;border-radius:18px;
  border:1.5px solid #edf0f7;
  overflow:hidden;
  animation:ytFadeIn .5s .15s ease both;
  box-shadow:0 4px 24px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
}
/* ── ใช้ acc-table style เหมือนหน้าสต็อค ── */
#pageYt .acc-email { max-width: none; }
.yt2-acc-table { width:100%; border-collapse:separate; border-spacing:0; }
.yt2-acc-table thead tr { background:linear-gradient(135deg,#f8f9fc,#f4f5fb); position:sticky; top:0; z-index:5; }
.yt2-acc-table th {
  padding:12px 14px; font-size:.6rem; font-weight:800;
  text-transform:uppercase; letter-spacing:1.2px;
  color:var(--text3); text-align:left; white-space:nowrap;
  border-bottom:1.5px solid var(--border);
}
.yt2-acc-table tbody tr {
  transition:all .18s;
  animation:ytRowIn .3s ease both;
}
.yt2-acc-table tbody tr:not(:last-child) td { border-bottom:1px solid #f2f4fb; }
.yt2-acc-table tbody tr:hover {
  background:linear-gradient(135deg,#fdf4f4,#fff7f7) !important;
  transform:scale(1.001);
}
.yt2-acc-table tbody tr.acc-expired { opacity:.4; }
.yt2-acc-table td { padding:12px 14px; font-size:.8rem; color:var(--text); vertical-align:middle; }

/* ── yt logo badge ── */
.yt2-yt-logo{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#e02020,#ff4444);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(224,32,32,.3);
  flex-shrink:0;transition:all .2s;
}
.yt2-acc-table tbody tr:hover .yt2-yt-logo{transform:scale(1.12) rotate(-5deg);box-shadow:0 5px 16px rgba(224,32,32,.4);}

/* ── name row ── */
.yt2-name-row{ display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px; }
.yt2-name{ font-size:.84rem;font-weight:800;color:#1a1d27; }
.yt2-note{ font-size:.65rem;color:#b4bbc8;font-style:italic; }

/* ══ Email/password rows — เหมือนหน้าสต็อค ══ */
.yt2-email-row{
  display:flex;align-items:center;gap:0;
  background:#fff;border:1.5px solid #eaecf4;
  border-radius:10px;min-width:0;overflow:hidden;
  height:36px;margin-bottom:5px;
  transition:all .2s;
}
.yt2-email-row:last-child{ margin-bottom:0; }
.yt2-email-row:hover{border-color:#e02020;box-shadow:0 0 0 3px rgba(224,32,32,.07);}
.yt2-elabel{
  width:32px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f4f5fb,#f0f1f8);border-right:1.5px solid #eaecf4;
  color:#9aa0b0;transition:all .2s;
}
.yt2-email-row:hover .yt2-elabel{background:linear-gradient(135deg,#fff0f0,#ffe8e8);color:#e02020;border-right-color:#fecaca;}
.yt2-elabel svg{display:block;transition:transform .2s;}
.yt2-email-row:hover .yt2-elabel svg{transform:scale(1.15);}
.yt2-eval-wrap{
  display:flex;flex-direction:column;justify-content:center;
  flex:1;min-width:0;padding:0 10px;gap:1px;
}
.yt2-elabel-txt{
  font-size:.56rem;font-weight:700;color:#b0b8cc;letter-spacing:.3px;
  text-transform:uppercase;line-height:1;
}
.yt2-evalue{
  font-size:.78rem;color:#1e2330;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:'Courier New',monospace;letter-spacing:-.2px;line-height:1.3;
}
.yt2-evalue.blurred{
  filter:blur(4px);cursor:pointer;user-select:none;
  transition:filter .2s;
}
.yt2-evalue.blurred.show{filter:none;}
.yt2-row-btns{display:flex;align-items:center;gap:0;flex-shrink:0;}
/* ── Copy/Eye buttons ── */
.yt2-copy-btn,.yt2-eye-btn{
  width:32px;height:36px;
  border:none;border-left:1.5px solid #eaecf4;background:#fafbfd;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:all .18s;position:relative;overflow:hidden;
}
.yt2-copy-btn::after,.yt2-eye-btn::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:rgba(224,32,32,.15);transform:scale(0);
  transition:transform .25s cubic-bezier(.34,1.4,.64,1);
}
.yt2-copy-btn:hover::after,.yt2-eye-btn:hover::after{transform:scale(2);}
.yt2-copy-btn:hover{background:#fff0f0;}
.yt2-eye-btn:hover{background:#fff0f0;}
.yt2-copy-btn.copied{background:#f0fdf4;}
.yt2-copy-btn.copied svg{stroke:#16a34a!important;}

/* Col: date */
.yt2-date{font-size:.78rem;font-weight:700;color:#2d3142;}
.yt2-date-sub{font-size:.62rem;color:#b4bbc8;margin-top:1px;}

/* Col: exp */
.yt2-expdate{font-size:.78rem;font-weight:800;display:block;}
.yt2-days-pill{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:20px;
  white-space:nowrap;margin-top:3px;
}

/* Col: status — pill เหมือนหน้าสต็อค */
.yt2-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:20px;
  font-size:.67rem;font-weight:700;white-space:nowrap;
  transition:all .18s;
}
.yt2-badge-ok{
  background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#16a34a;
  border:1px solid #bbf7d0;
  box-shadow:0 1px 4px rgba(22,163,74,.12);
}
.yt2-badge-warn{
  background:linear-gradient(135deg,#fffbeb,#fef3c7);color:#d97706;
  border:1px solid #fde68a;
  box-shadow:0 1px 4px rgba(217,119,6,.12);
}
.yt2-badge-exp{
  background:linear-gradient(135deg,#f9fafb,#f3f4f6);color:#6b7280;
  border:1px solid #e5e7eb;
}
.yt2-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.yt2-dot-pulse{animation:ytGreenPulse 2s infinite;}
.yt2-dot-warn{animation:ytAmberPulse 1.8s infinite;}

/* actions */
.yt2-acc-actions{ display:flex;gap:5px;justify-content:flex-end; }
.yt2-act-btn{
  width:28px;height:28px;border-radius:8px;
  border:1.5px solid var(--border);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .18s cubic-bezier(.34,1.3,.64,1);flex-shrink:0;color:#b4bbc8;
}
.yt2-act-btn:hover{
  border-color:var(--red);background:var(--red-bg);color:var(--red);
  transform:scale(1.15) rotate(-5deg);
  box-shadow:0 3px 10px rgba(224,32,32,.2);
}
.yt2-act-btn.del:hover{border-color:var(--red);background:var(--red-bg);color:var(--red);}

/* channel badge */
.yt2-ch{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.6rem;font-weight:700;padding:3px 8px;border-radius:20px;
  border:1px solid;white-space:nowrap;
  transition:all .15s;
}
.yt2-ch:hover{transform:scale(1.06);}
.yt2-ch-line{background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#15803d;border-color:#86efac;}
.yt2-ch-fb{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1d4ed8;border-color:#bfdbfe;}
.yt2-ch-ig{background:linear-gradient(135deg,#fdf4ff,#f5d0fe);color:#a21caf;border-color:#f0abfc;}
.yt2-ch-other{background:linear-gradient(135deg,#f9fafb,#f3f4f6);color:#6b7280;border-color:#e5e7eb;}

/* ══ CARD STYLE (YT) — original card layout + sticky header + scrollable ══ */

/* หัวตาราง sticky แยกออกมา */
/* ════════════════════════════════════════════════
   YT DESKTOP TABLE — PREMIUM REDESIGN 2026
════════════════════════════════════════════════ */

/* ── Thead wrap ── */
#ytPage .yt-thead-wrap {
  background: linear-gradient(135deg,#16181f 0%,#1e1b2e 50%,#1a0d0d 100%);
  border-radius: 16px 16px 0 0;
  border: none;
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
}
#ytPage .yt-thead-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% -30%, rgba(224,32,32,.18) 0%, transparent 55%);
  pointer-events: none;
}
#ytPage .yt-thead-wrap table {
  width: 100%; border-collapse: collapse; table-layout: fixed; position: relative; z-index: 1;
}
#ytPage .yt-thead-wrap th {
  padding: 14px 16px;
  font-size: .58rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(255,255,255,.35); text-align: left; white-space: nowrap;
}
#ytPage .yt-thead-wrap th:first-child { border-left: 3px solid #e02020; }

/* ── Cards scroll ── */
#ytPage .yt-cards-scroll {
  max-height: calc(5 * 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e02020 transparent;
  border: 1.5px solid #eef0f7;
  border-top: none;
  border-radius: 0 0 16px 16px;
  background: #fafbfd;
  padding: 0;
}
#ytPage .yt-cards-scroll::-webkit-scrollbar { width: 4px; }
#ytPage .yt-cards-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#e02020,#f87171); border-radius: 10px; }

/* ── Table reset ── */
#ytPage .pgS-tbl-wrap { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
#ytPage .acc-table { border-collapse: separate !important; border-spacing: 0 6px !important; background: transparent !important; width: 100% !important; margin-top: 0 !important; }
#ytPage .acc-table thead { display: none !important; }

/* ── Row base ── */
#ytPage .acc-table tbody tr {
  background: #fff !important;
  transition: all .22s cubic-bezier(.34,1.3,.64,1) !important;
  position: relative;
}
#ytPage .acc-table tbody tr td:first-child { border-left: 3px solid transparent !important; transition: border-color .2s !important; }
#ytPage .acc-table tbody tr:hover td:first-child { border-left-color: #e02020 !important; }
#ytPage .acc-table tbody tr td:first-child { border-radius: 12px 0 0 12px !important; }
#ytPage .acc-table tbody tr td:last-child { border-radius: 0 12px 12px 0 !important; }
#ytPage .acc-table tbody tr td { border: none !important; border-top: 1px solid #f2f4fa !important; border-bottom: 1px solid #f2f4fa !important; padding: 10px 14px !important; vertical-align: middle !important; background: inherit !important; transition: background .18s !important; }
#ytPage .acc-table tbody tr td:first-child { border-left: 3px solid transparent !important; }
#ytPage .acc-table tbody tr td:last-child { border-right: 1.5px solid #f2f4fa !important; }

/* Hover */
#ytPage .acc-table tbody tr:hover { background: #fff8f8 !important; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(224,32,32,.08), 0 1px 4px rgba(0,0,0,.04) !important; }

/* Expired row */
#ytPage .acc-table tbody tr.acc-expired { opacity: .52; }
#ytPage .acc-table tbody tr.acc-expired td:first-child { border-left-color: #e5e7eb !important; }

/* ── YT Row number pill ── */
.yt-row-num {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg,#f3f4f8,#e8eaf2);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800; color: #9aa0b0;
  margin: 0 auto;
  transition: all .2s;
}
#ytPage .acc-table tbody tr:hover .yt-row-num {
  background: linear-gradient(135deg,#e02020,#ff4444);
  color: #fff;
  box-shadow: 0 2px 8px rgba(224,32,32,.35);
}

/* ── Platform badge ── */
.yt-plat-badge {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg,#e02020,#ff4444);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(224,32,32,.3);
  transition: all .22s cubic-bezier(.34,1.5,.64,1);
  cursor: pointer;
}
.yt-plat-badge:hover { transform: scale(1.12) rotate(-6deg); box-shadow: 0 6px 18px rgba(224,32,32,.45); }

/* ── Info cell ── */
.yt-info-cell { display: flex; flex-direction: column; gap: 0; padding: 6px 0 !important; }
.yt-info-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.yt-info-row:not(:last-child) { border-bottom: 1px dashed #f0f2f8; }
.yt-info-icon {
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .2s;
}
.yt-info-icon:hover { transform: scale(1.12) rotate(5deg); }
.yt-info-lbl { font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: #b0b8c8; margin-bottom: 1px; display: block; }
.yt-info-val { font-size: .8rem; font-weight: 700; color: #1a1d27; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-info-copy-btn {
  width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid #eaecf2;
  background: #f6f7fb; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; flex-shrink: 0; margin-left: auto;
}
.yt-info-copy-btn:hover { border-color: #e02020; background: #fff0f0; transform: scale(1.1); }

/* ── Date cell ── */
/* ── YT date td alignment fix ── */
#ytPage .acc-td-desktop.yt-td-buy {
  vertical-align: top !important;
  padding-top: 40px !important;
}
#ytPage .acc-td-desktop.yt-td-exp {
  vertical-align: top !important;
  padding-top: 40px !important;
}

.yt-date-chip {
  display: flex; flex-direction: column; gap: 3px;
}
.yt-date-main { font-size: .8rem; font-weight: 700; color: #1a1d27; line-height: 1.4; }
.yt-date-sub { font-size: .6rem; color: #9aa0b0; font-weight: 500; }

/* ── Expiry cell ── */
.yt-exp-wrap { display: flex; flex-direction: column; gap: 3px; }
.yt-exp-date { font-size: .8rem; font-weight: 700; color: #1a1d27; line-height: 1.4; }
.yt-exp-progress {
  width: 80px; height: 4px; background: #f0f2f8; border-radius: 4px; overflow: hidden;
}
.yt-exp-bar {
  height: 100%; border-radius: 4px;
  transition: width .6s cubic-bezier(.34,1.3,.64,1);
}

/* ── Status pill new ── */
.yt-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px; font-size: .67rem; font-weight: 800;
  white-space: nowrap; letter-spacing: .2px;
  transition: all .2s cubic-bezier(.34,1.3,.64,1);
}
.yt-pill:hover { transform: scale(1.06); }
.yt-pill-active { background: linear-gradient(135deg,#f0fdf4,#dcfce7); color: #15803d; border: 1px solid #bbf7d0; box-shadow: 0 2px 8px rgba(22,163,74,.12); }
.yt-pill-warn   { background: linear-gradient(135deg,#fffbeb,#fde68a); color: #b45309; border: 1px solid #fcd34d; box-shadow: 0 2px 8px rgba(217,119,6,.12); }
.yt-pill-expired{ background: linear-gradient(135deg,#f9fafb,#f3f4f6); color: #6b7280; border: 1px solid #e5e7eb; }
.yt-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── Day chip new ── */
.yt-daychip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .6rem; font-weight: 800; padding: 2px 8px; border-radius: 20px;
}

/* ── Action buttons ── */
.yt-act-wrap { display: flex; gap: 5px; justify-content: flex-end; }
.yt-act-btn {
  width: 30px; height: 30px; border-radius: 9px;
  border: 1.5px solid #eaecf2; background: #f7f8fc;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s cubic-bezier(.34,1.4,.64,1);
}
.yt-act-btn:hover { transform: scale(1.15) rotate(-5deg); border-color: #e02020; background: #fff0f0; box-shadow: 0 3px 10px rgba(224,32,32,.18); }
.yt-act-btn.yt-act-del:hover { transform: scale(1.15) rotate(5deg); border-color: #dc2626; background: #fef2f2; box-shadow: 0 3px 10px rgba(220,38,38,.2); }

/* ── empty state ── */
.yt2-empty{
  padding:72px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  animation:ytFadeIn .5s ease both;
}
.yt2-empty-ico{
  font-size:3.5rem;opacity:.15;
  animation:ytBgFloat 4s ease-in-out infinite;
}
.yt2-empty-t{font-size:.95rem;font-weight:800;color:var(--text2);}
.yt2-empty-s{font-size:.78rem;color:var(--text3);}

/* ══ MODAL ══ */
.yt2-mask{
  position:fixed;inset:0;
  background:rgba(10,12,20,.55);
  backdrop-filter:blur(8px);z-index:9999;
  display:none;align-items:center;justify-content:center;
  animation:ytMaskIn .2s ease;
}
.yt2-mask.open{display:flex;}
.yt2-mbox{
  background:#fff;border-radius:24px;width:100%;max-width:520px;
  max-height:92vh;overflow-y:auto;
  box-shadow:0 40px 100px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.05);
  animation:ytBoxIn .28s cubic-bezier(.34,1.4,.64,1);
}
.yt2-mhead{
  padding:22px 26px 18px;
  border-bottom:1.5px solid #f2f4f8;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;
  background:linear-gradient(135deg,#fff,#fdfcfc);
  z-index:1;border-radius:24px 24px 0 0;
}
.yt2-mhead-left{display:flex;align-items:center;gap:14px;}
.yt2-mhead-ico{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,#fff0f0,#ffe4e4);
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid #fecaca;flex-shrink:0;
  box-shadow:0 3px 10px rgba(224,32,32,.12);
  animation:ytGlow 3s ease-in-out infinite;
}
.yt2-mtitle{font-size:1.05rem;font-weight:900;color:#1a1d27;letter-spacing:-.3px;}
.yt2-msub{font-size:.68rem;color:#9aa0b0;margin-top:2px;}
.yt2-mclose{
  width:34px;height:34px;border-radius:10px;
  border:1.5px solid #edf0f7;background:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#9aa0b0;font-size:1rem;
  transition:all .2s cubic-bezier(.34,1.3,.64,1);
}
.yt2-mclose:hover{background:#fff0f0;border-color:#fca5a5;color:#e02020;transform:rotate(90deg) scale(1.1);}
.yt2-mbody{padding:22px 26px;display:flex;flex-direction:column;gap:18px;}
.yt2-fg{display:flex;flex-direction:column;gap:7px;}
.yt2-fl{font-size:.72rem;font-weight:700;color:#5a6072;letter-spacing:.2px;}
.yt2-fl span{color:#e02020;}
.yt2-fi{
  border:1.5px solid #e8ecf4;border-radius:12px;
  padding:12px 16px;font-family:'Noto Sans Thai',sans-serif;
  font-size:.84rem;color:#1a1d27;outline:none;
  transition:all .2s cubic-bezier(.34,1.3,.64,1);width:100%;background:#fafbfd;
}
.yt2-fi:focus{
  border-color:#e02020;background:#fff;
  box-shadow:0 0 0 4px rgba(224,32,32,.1);
  transform:scale(1.005);
}
.yt2-fi::placeholder{color:#c8cdd8;}
.yt2-fr2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.yt2-ch-group{display:flex;gap:8px;flex-wrap:wrap;}
.yt2-chl{cursor:pointer;}
.yt2-chl input[type=radio]{display:none;}
.yt2-chbtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:20px;
  border:1.5px solid #e8ecf4;background:#fafbfd;
  font-family:'Noto Sans Thai',sans-serif;font-size:.74rem;
  font-weight:600;color:#6b7280;cursor:pointer;
  transition:all .2s cubic-bezier(.34,1.3,.64,1);
}
.yt2-chbtn:hover{border-color:#c8cdd8;color:#2d3142;transform:translateY(-1px);}
.yt2-chl input[type=radio]:checked+.yt2-chbtn{
  border-color:#e02020;background:linear-gradient(135deg,#fff0f0,#ffe4e4);
  color:#e02020;font-weight:800;
  box-shadow:0 3px 12px rgba(224,32,32,.2);
  transform:scale(1.04);
}
.yt2-divider{height:1px;background:#f2f4f8;margin:0 -26px;}
.yt2-mfoot{
  padding:18px 26px 22px;
  display:flex;gap:10px;justify-content:flex-end;
  background:linear-gradient(180deg,#fff,#fafbfd);
  border-top:1.5px solid #f2f4f8;border-radius:0 0 24px 24px;
}
.yt2-mbtn{
  padding:11px 24px;border-radius:12px;border:none;
  font-family:'Noto Sans Thai',sans-serif;font-size:.82rem;
  font-weight:800;cursor:pointer;transition:all .2s cubic-bezier(.34,1.3,.64,1);
}
.yt2-mbtn-ghost{
  background:none;border:1.5px solid #e8ecf4;color:#6b7280;
}
.yt2-mbtn-ghost:hover{background:#f7f8fa;border-color:#c8cdd8;transform:translateY(-1px);}
.yt2-mbtn-red{
  background:linear-gradient(135deg,#e02020,#ff3333);color:#fff;
  box-shadow:0 4px 14px rgba(224,32,32,.35),inset 0 1px 0 rgba(255,255,255,.15);
}
.yt2-mbtn-red:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(224,32,32,.45);}
.yt2-mbtn-red:active{transform:translateY(0);}

/* mobile */
.yt2-mob-meta{display:none;}
/* desktop: ซ่อน mobile card cell */
.yt-mob-td{display:none !important;}
/* desktop: ซ่อน mobile card cell */
.yt-mob-td{display:none !important;}
.yt-mob-card{display:none;}
@media(max-width:960px){
  .acc-table th:nth-child(4),.acc-table td:nth-child(4){display:none;}
  .yt2-stats{grid-template-columns:repeat(2,1fr);}
  .yt2-topbar{padding:16px 20px;}
}
@media(max-width:680px){
  .yt2-shell{padding:12px 10px 32px;}
  .yt-thead-wrap{display:none;}
  #ytPage .acc-table thead{display:none;}
  #ytPage .acc-table,#ytPage .acc-table tbody{display:block;}
  #ytPage .acc-table tbody tr{display:block;background:transparent;border-radius:0;margin:0;box-shadow:none;border:none;padding:0;overflow:visible;}
  #ytPage .acc-table td{display:none !important;padding:0;}
  #ytPage .acc-table td.acc-td-desktop{display:none !important;}
  #ytPage .acc-table td.yt-mob-td{display:block !important;padding:0 0 12px;}
  /* CARD SHELL */
  .yt-mob-card{display:flex;flex-direction:column;gap:0;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.05);animation:ytRowIn .3s ease both;}
  /* HERO */
  .yt-mob-hero{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;background:linear-gradient(135deg,#1a1d27 0%,#2d1535 60%,#1f1025 100%);position:relative;overflow:hidden;}
  .yt-mob-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 90% -20%,rgba(224,32,32,.35) 0%,transparent 55%),radial-gradient(ellipse at -10% 110%,rgba(120,40,200,.2) 0%,transparent 50%);pointer-events:none;}
  .yt-mob-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);}
  .yt-mob-platbadge{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#e02020,#ff5555);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(224,32,32,.45),inset 0 1px 0 rgba(255,255,255,.2);position:relative;z-index:1;}
  .yt-mob-nameblock{flex:1;min-width:0;position:relative;z-index:1;}
  .yt-mob-name{font-size:.95rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.3);letter-spacing:-.2px;}
  .yt-mob-badges{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap;}
  .yt-mob-actions{display:flex;gap:6px;flex-shrink:0;position:relative;z-index:1;}
  .yt-mob-act-btn{width:32px;height:32px;border-radius:9px;border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;}
  .yt-mob-act-btn:active{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.3);}
  .yt-mob-act-btn.danger:active{background:rgba(224,32,32,.4);border-color:rgba(224,32,32,.6);}
  /* BODY */
  .yt-mob-body{display:flex;flex-direction:column;gap:0;background:#fff;}
  .yt-mob-cell{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #f3f4f8;}
  .yt-mob-cell:last-child{border-bottom:none;}
  .yt-mob-cell-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .ic-head{background:linear-gradient(135deg,#fff7ed,#fed7aa);}
  .ic-email{background:linear-gradient(135deg,#eff6ff,#dbeafe);}
  .ic-date{background:linear-gradient(135deg,#f0fdf4,#dcfce7);}
  .ic-exp{background:linear-gradient(135deg,#fef9f0,#fde68a);}
  .yt-mob-cell-text{flex:1;min-width:0;}
  .yt-mob-label{font-size:.56rem;font-weight:700;color:#b0b8c8;text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px;display:block;}
  .yt-mob-val{font-size:.83rem;font-weight:600;color:#1a1d27;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
  .yt-mob-val-copy{display:flex;align-items:center;gap:6px;}
  .yt-mob-val-copy span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .yt-mob-copy-btn{width:28px;height:28px;border-radius:8px;border:1.5px solid #e8ebf2;background:#f7f8fc;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .13s;flex-shrink:0;}
  .yt-mob-copy-btn:active{border-color:#e02020;background:#fff0f0;}
  /* DATE ROW 2-col */
  .yt-mob-date-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #f3f4f8;}
  .yt-mob-date-cell{padding:12px 16px;display:flex;flex-direction:column;gap:3px;}
  .yt-mob-date-cell:first-child{border-right:1px solid #f3f4f8;}
  .yt-mob-exp-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
  /* misc */
  .yt-mob-foot{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;}
  .yt2-fr2{grid-template-columns:1fr;}
  .yt2-topbar::after{display:none;}
  .yt2-topbar{padding:16px;flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px;border-radius:16px;}
  .yt2-topbar-left{gap:12px;}
  .yt2-topbar > div:last-child{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:1;}
  .yt2-page-title{font-size:1.05rem;}
  .yt2-page-sub{font-size:.68rem;}
  .yt2-icon-box{width:44px;height:44px;border-radius:12px;}
  .yt2-add-btn{padding:10px 18px;font-size:.78rem;flex:1;justify-content:center;}
  .yt2-stats{grid-template-columns:repeat(2,1fr);gap:8px;}
  .yt2-filterbar{gap:8px;}
  .yt2-search{padding:8px 12px;}
  .yt2-tabs{flex-wrap:nowrap;overflow-x:auto;padding:3px 4px;}
  .yt2-tab{font-size:.7rem;padding:5px 10px;white-space:nowrap;}
}

/* ── Stat val color ── */
.yt2-stat-val{ color:var(--text); }
/* ── Expiry day chip upgrade ── */
.yt-day-ok   { background:linear-gradient(135deg,#f0fdf4,#dcfce7)!important; color:#16a34a!important; border:1px solid #bbf7d0; }
.yt-day-warn { background:linear-gradient(135deg,#fff7ed,#fed7aa)!important; color:#c2410c!important; border:1px solid #fdba74; }
.yt-day-bad  { background:linear-gradient(135deg,#fef2f2,#fecaca)!important; color:#e02020!important; border:1px solid #fca5a5; animation:ytWarnPing 2s ease-in-out infinite; }
/* ── Accent bar on thead ── */
#ytPage .yt-thead-wrap th:first-child { border-left: 3px solid transparent; }
/* ── Hover glow on filter tabs ── */
.yt2-tab:focus-visible { outline: 2px solid rgba(224,32,32,.4); outline-offset: 2px; }
/* ── Sort select upgrade ── */
#ytSortSel {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa0b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px !important;
  transition: all .2s !important;
}
#ytSortSel:focus { border-color: #e02020 !important; box-shadow: 0 0 0 3px rgba(224,32,32,.1) !important; outline: none; }
/* ── Delete modal upgrade ── */
#ytDelMask .yt2-mbox {
  box-shadow: 0 40px 100px rgba(224,32,32,.15), 0 0 0 1px rgba(255,255,255,.05) !important;
}