@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Prompt:wght@300;400;500;600;700;800&display=swap');
:root{
  --bg:#f7f7fa;
  --surface:#ffffff;
  --surface-soft:#fff8fb;
  --surface-muted:#f3f4f7;
  --text:#61616a;
  --text-strong:#43434c;
  --muted:#8b8c97;
  --primary:#ef8fb2;
  --primary-strong:#df7097;
  --primary-soft:#fdebf2;
  --primary-soft-2:#fff4f8;
  --primary-line:rgba(223,112,151,.22);
  --line:#ececf1;
  --line-strong:#ddddE7;
  --success:#2f9e71;
  --danger:#c45e7d;
  --warning:#be8a2a;
  --shadow:0 24px 70px rgba(45,45,66,.09);
  --shadow-soft:0 12px 34px rgba(45,45,66,.06);
  --shadow-xs:0 6px 18px rgba(45,45,66,.045);
  --radius-2xl:34px;
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:12px;
  --container:min(1220px,92vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Prompt",Inter,"Noto Sans Thai",Segoe UI,Tahoma,sans-serif;background:linear-gradient(180deg,#fff 0,#fcfcfe 38%,#f7f7fa 100%);color:var(--text);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
button,[type=button],[type=submit],[type=reset],a.btn,a.btn-outline,a.btn-soft,a.btn-ghost,a.btn-danger{cursor:pointer}
.container{width:var(--container);margin:auto}
.page-shell{position:relative;overflow:hidden;min-height:100vh}
.page-shell::before,.page-shell::after{content:"";position:fixed;border-radius:999px;pointer-events:none;z-index:-1;filter:blur(12px)}
.page-shell::before{width:420px;height:420px;right:-120px;top:-130px;background:radial-gradient(circle,rgba(239,143,178,.12) 0,rgba(239,143,178,0) 72%)}
.page-shell::after{width:340px;height:340px;left:-120px;top:190px;background:radial-gradient(circle,rgba(194,194,204,.16) 0,rgba(194,194,204,0) 72%)}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(64,64,72,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{width:56px;height:56px;border-radius:20px;object-fit:cover;background:#fff;border:1px solid var(--primary-line);box-shadow:var(--shadow-xs);padding:4px}
.brand-title{min-width:0;display:flex;flex-direction:column;gap:2px}
.brand-title strong{font-size:19px;line-height:1.15;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-title span{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.menu{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.menu a{padding:11px 16px;border-radius:999px;color:var(--text);font-weight:600;font-size:17px;transition:.2s ease}
.menu a:hover,.menu a.active{background:var(--primary-soft);color:var(--primary-strong)}
.menu .lang-link{min-width:46px;text-align:center;font-size:15px;font-weight:800;color:var(--muted)}
.nav-toggle,.sidebar-toggle{display:none;border:1px solid var(--line-strong);background:#fff;border-radius:14px;padding:10px 12px;color:var(--text-strong);box-shadow:var(--shadow-xs);cursor:pointer}
.btn,.btn-outline,.btn-soft,.btn-ghost,.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 22px;min-height:56px;border-radius:16px;font-weight:800;font-size:16px;border:1px solid transparent;transition:.22s ease;cursor:pointer;position:relative;z-index:2;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn{background:linear-gradient(135deg,var(--primary),var(--primary-strong));color:#fff;box-shadow:0 16px 36px rgba(223,112,151,.24)}
.btn:hover{transform:translateY(-1px);box-shadow:0 18px 42px rgba(223,112,151,.3)}
.btn-outline{background:#fff;border-color:var(--line-strong);color:var(--text-strong);box-shadow:var(--shadow-xs)}
.btn-outline:hover{border-color:var(--primary-line);color:var(--primary-strong);background:#fff}
.btn-soft{background:var(--primary-soft);color:var(--primary-strong)}
.btn-soft:hover{background:#fbe2eb}
.btn-ghost{background:transparent;color:var(--text)}
.btn-danger{background:#fff2f5;border-color:#f0d3dc;color:#b0496d}
.hero{padding:58px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.hero-panel,.page-banner{position:relative;background:linear-gradient(180deg,#ffffff 0,#fff8fb 100%);border:1px solid var(--primary-line);border-radius:var(--radius-2xl);padding:34px;box-shadow:var(--shadow);overflow:hidden}
.hero-panel::after,.page-banner::after{content:"";position:absolute;right:-50px;bottom:-60px;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle,rgba(239,143,178,.16) 0,rgba(239,143,178,0) 72%)}
.hero-side{background:linear-gradient(180deg,#fff 0,#fbfbfd 100%);border-color:rgba(64,64,72,.08)}
.eyebrow,.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;border:1px solid var(--primary-line);background:var(--primary-soft);color:var(--primary-strong);font-size:13px;font-weight:800;letter-spacing:.03em}
.hero h1,h1{margin:16px 0 14px;font-size:62px;line-height:1.02;letter-spacing:-.04em;color:var(--text-strong)}
h2{margin:0 0 12px;font-size:40px;line-height:1.08;letter-spacing:-.03em;color:var(--text-strong)}
h3{margin:0 0 8px;font-size:25px;line-height:1.2;color:var(--text-strong)}
p{margin:0 0 14px;font-size:17px;line-height:1.82;color:var(--text)}
small,.small,.muted{color:var(--muted)}
.text-gradient{background:linear-gradient(135deg,var(--primary-strong),#ad7086);-webkit-background-clip:text;background-clip:text;color:transparent}
.section{padding:30px 0 52px}
.section-head,.split{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.section-intro{max-width:780px}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.item,.kpi,.stat,.panel,.glass-card,.admin-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft)}
.card,.panel,.glass-card{padding:24px}
.glass-card{background:rgba(255,255,255,.8);backdrop-filter:blur(12px)}
.item{padding:18px 18px 16px}
.item p:last-child,.card p:last-child,.panel p:last-child{margin-bottom:0}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.feature{padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff 0,#fffbfd 100%);box-shadow:var(--shadow-xs)}
.kpis,.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi,.stat,.admin-stat{padding:18px}
.kpi strong,.stat strong,.admin-stat strong{display:block;font-size:30px;line-height:1.1;color:var(--text-strong);margin-bottom:6px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--primary-soft);border:1px solid var(--primary-line);font-size:13px;font-weight:800;color:var(--primary-strong)}
.badge-success{background:#eefaf4;border-color:#d1ecd9;color:#2b7b59}.badge-muted{background:#f4f4f7;border-color:#e5e5ec;color:#767684}.badge-danger{background:#fff2f5;border-color:#f0d3dc;color:#b0496d}
.list{display:grid;gap:14px}
.actions,.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
form{display:grid;gap:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
label{display:block;margin-bottom:7px;font-size:16px;font-weight:800;color:var(--text-strong)}
.field{display:grid;gap:6px}
input,select,textarea{width:100%;padding:16px 17px;border-radius:16px;border:1px solid var(--line-strong);background:#fff;color:var(--text-strong);font-size:16px;outline:none;transition:.2s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
input:focus,select:focus,textarea:focus{border-color:rgba(223,112,151,.42);box-shadow:0 0 0 4px rgba(223,112,151,.10)}
textarea{min-height:128px;resize:vertical}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.table th,.table td{padding:15px 15px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:15px}
.table th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:#fff;position:sticky;top:0}
.table tr:nth-child(even) td{background:#fffdfd}
.table tr:last-child td{border-bottom:0}.table tr:hover td{background:#fff8fb}
.flash{padding:14px 16px;border-radius:16px;margin:18px 0;border:1px solid var(--line)}
.flash.success{background:#eefaf4;border-color:#d7f0e2;color:#236646}.flash.error{background:#fff2f5;border-color:#f3d5df;color:#a13a5d}
.footer{margin-top:50px;padding:30px 0;border-top:1px solid rgba(64,64,72,.08);background:rgba(255,255,255,.82)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}
.footer-note{font-size:16px;color:var(--muted);line-height:1.85}
.page-header{padding:34px 0 10px}
.page-banner .section-intro{max-width:820px}
.info-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.info-box{padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-xs)}
.empty-state{padding:34px;border:1px dashed var(--line-strong);border-radius:22px;background:#fff;text-align:center;color:var(--muted)}
.empty-state strong{display:block;margin-bottom:8px;color:var(--text-strong);font-size:20px}
.login-shell{min-height:calc(100vh - 120px);display:grid;place-items:center;padding:28px 0}
.login-card{width:min(560px,100%);background:#fff;border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:var(--shadow)}
.login-card::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--primary-soft),var(--primary),var(--primary-soft));border-radius:999px;margin:-4px 0 18px}
.admin-layout{display:grid;grid-template-columns:320px 1fr;min-height:100vh;background:#f7f7fa}
.sidebar{position:sticky;top:0;height:100vh;overflow:auto;padding:24px;background:linear-gradient(180deg,#fff 0,#fcfcfe 100%);border-right:1px solid var(--line)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sidebar .brand{margin-bottom:14px}
.sidebar-nav-title{margin:18px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:900}
.sidebar a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:16px;color:var(--text);margin-bottom:8px;font-size:16px;border:1px solid transparent;transition:.2s ease}
.sidebar a.active,.sidebar a:hover{background:var(--primary-soft);color:var(--primary-strong);border-color:var(--primary-line)}
.sidebar-footer{margin-top:20px;padding:14px;border-radius:18px;background:linear-gradient(180deg,#fff8fb 0,#ffffff 100%);border:1px solid var(--primary-line);font-size:13px;color:var(--muted)}
.content{padding:26px}
.content-shell{display:grid;gap:20px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px;padding:0 2px}
.topbar-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.quick-links{display:flex;gap:10px;flex-wrap:wrap}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;padding:2px 7px;border-radius:9px;background:#f4f4f7;border:1px solid var(--line)}
.hero-logo{display:flex;align-items:center;justify-content:center;min-height:100%}
.hero-logo img{width:min(100%,360px);aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 18px 34px rgba(100,100,120,.10))}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-stack{display:grid;gap:18px}
.metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.surface-soft{background:linear-gradient(180deg,#fff 0,#fff8fb 100%)}
.inline-note{padding:12px 14px;border-radius:14px;background:var(--surface-muted);color:var(--muted);font-size:14px}
.section-subgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.icon-dot{display:inline-flex;width:10px;height:10px;border-radius:999px;background:var(--primary);box-shadow:0 0 0 5px rgba(239,143,178,.14)}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;color:var(--text-strong)}
.data-list{display:grid;gap:12px}
.data-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.data-row strong{color:var(--text-strong)}
.card-accent{position:relative;overflow:hidden}
.card-accent::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary-soft),var(--primary),var(--primary-soft))}
.card-accent>*{position:relative}
.table-actions{display:flex;gap:8px;flex-wrap:wrap}
.note-box{padding:16px 18px;border-radius:18px;border:1px solid var(--primary-line);background:var(--primary-soft-2)}
.auth-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:start}
.member-avatar{width:84px;height:84px;border-radius:26px;object-fit:cover;background:#fff;border:1px solid var(--primary-line);padding:4px;box-shadow:var(--shadow-xs)}
@media (max-width:1120px){.hero-grid,.footer-grid,.grid-3,.grid-4,.stats,.kpis,.info-strip,.metric-row,.mini-grid,.section-subgrid,.auth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-layout{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;width:310px;transform:translateX(-102%);transition:.25s ease;z-index:60;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.sidebar-toggle{display:inline-flex}.content{padding:22px}}
@media (max-width:860px){.hero h1,h1{font-size:46px}.grid-2,.grid-3,.grid-4,.feature-grid,.kpis,.stats,.footer-grid,.hero-grid,.info-strip,.form-grid,.metric-row,.mini-grid,.section-subgrid,.auth-grid{grid-template-columns:1fr}.nav-toggle{display:inline-flex}.menu{display:none;position:absolute;left:4%;right:4%;top:78px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.menu.open{display:flex}.menu a{width:100%}.hero{padding-top:34px}.page-banner,.hero-panel,.card,.panel,.glass-card{padding:22px}.content{padding:18px}.table{min-width:680px}}


.brand img.no-frame-logo{width:auto;height:70px;object-fit:contain;background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
.footer .brand img.no-frame-logo{height:86px;width:auto}
@media (max-width:560px){.brand img.no-frame-logo{height:56px}.footer .brand img.no-frame-logo{height:72px}}
.brand.logo-only{gap:0}.brand.logo-only img{height:70px;width:auto;object-fit:contain}.brand-title{display:flex;flex-direction:column}.hero-logo img{max-width:320px;width:100%;height:auto;object-fit:contain}

.hero-logo img{max-width:320px;margin:auto;object-fit:contain}
.grid-1{grid-template-columns:1fr}
.committee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.person-card{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:24px;background:linear-gradient(180deg,#fff 0,#fff8fb 100%);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.person-card img{width:88px;height:88px;border-radius:22px;object-fit:cover;background:#fff;border:1px solid var(--primary-line);box-shadow:var(--shadow-xs);flex:0 0 auto}
.person-meta{display:grid;gap:6px}
.person-name{font-size:20px;line-height:1.25;font-weight:700;color:var(--text-strong)}
.person-role{font-size:14px;font-weight:700;color:var(--primary-strong)}
.person-note{font-size:13px;color:var(--muted)}
.admin-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.chart-card{padding:22px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.chart-card canvas{width:100%!important;height:320px!important}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width: 1100px){
  .hero-grid,.section-subgrid,.admin-chart-grid,.committee-grid,.grid-4,.grid-3,.grid-2,.kpis,.stats{grid-template-columns:1fr 1fr}
}
@media (max-width: 860px){
  .nav-toggle,.sidebar-toggle{display:inline-flex}
  .menu{display:none;position:absolute;top:100%;left:16px;right:16px;padding:16px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
  .menu.open{display:flex}
  .menu a,.menu .btn-outline{width:100%;justify-content:center}
  .hero-grid,.section-subgrid,.auth-grid,.admin-chart-grid,.committee-grid,.grid-4,.grid-3,.grid-2,.kpis,.stats,.feature-grid,.form-grid,.meta-grid{grid-template-columns:1fr}
  .hero h1,h1{font-size:48px}
  h2{font-size:34px}
  .hero-panel,.page-banner,.card,.panel,.glass-card{padding:24px}
  .person-card{align-items:center}
}
@media (max-width: 560px){
  .container{width:min(100% - 24px, var(--container))}
  .nav-inner{padding:10px 0}
  .brand img{width:52px;height:52px;border-radius:18px}
  .hero{padding-top:28px}
  .hero h1,h1{font-size:38px}
  h2{font-size:30px}
  .btn,.btn-outline,.btn-soft,.btn-ghost,.btn-danger{width:100%}
  .actions,.toolbar{display:grid;grid-template-columns:1fr}
  .person-card{flex-direction:column;align-items:flex-start}
}


.hero-visual{display:grid;align-content:center;gap:18px;min-height:100%;padding:8px 2px;background:transparent;border:0;box-shadow:none}
.hero-logo-clean{padding:0;min-height:auto;background:transparent;border:0;box-shadow:none}
.hero-logo-clean::before,.hero-logo-clean::after{display:none !important;content:none !important}
.hero-logo-clean img{display:block;max-width:min(100%,520px);width:100%;height:auto;margin:0 auto;object-fit:contain;background:transparent;border:0;box-shadow:none;filter:drop-shadow(0 12px 24px rgba(100,100,120,.06))}
.hero-meta{display:grid;gap:12px;max-width:520px;width:100%;margin:0 auto}
.hero-meta .data-row{background:rgba(255,255,255,.82);backdrop-filter:blur(6px)}
@media (max-width:860px){.hero-visual{padding-top:4px}.hero-logo-clean img{max-width:360px}.hero-meta{max-width:100%}}


/* Phase 43 spacing and premium member card */
body, p, .footer-note, .muted, .item p, .feature p, .inline-note { word-spacing: .02em; }
.list.compact-list{gap:16px}
.list.compact-list .item{padding:20px 22px}
.section .card form, .card form {gap:16px}
.table-actions input[type="text"]{min-width:180px}
.member-card-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:stretch}
.lux-card{position:relative;overflow:hidden;border-radius:34px;padding:28px;border:1px solid rgba(239,143,178,.22);background:
linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,244,248,.96)),
radial-gradient(circle at 85% 12%, rgba(239,143,178,.24) 0, rgba(239,143,178,0) 28%),
linear-gradient(135deg, #f7f7fa 0%, #fff 40%, #fff8fb 100%);box-shadow:0 28px 70px rgba(40,40,60,.10)}
.lux-card::before{content:"";position:absolute;inset:0;border-radius:34px;background:linear-gradient(120deg, rgba(255,255,255,.36), rgba(255,255,255,0) 36%, rgba(239,143,178,.06) 62%, rgba(255,255,255,0) 78%);pointer-events:none}
.lux-card-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}.lux-card-top img{width:74px;height:74px;object-fit:contain}
.lux-card-title{font-size:15px;font-weight:800;color:var(--text-strong)}.lux-card-sub{font-size:13px;color:var(--muted)}
.lux-member{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;margin-bottom:24px}
.lux-avatar{width:96px;height:96px;border-radius:28px;object-fit:cover;border:1px solid rgba(239,143,178,.2);background:#fff;box-shadow:var(--shadow-xs)}
.lux-name-th{font-size:36px;line-height:1.02;font-weight:800;color:var(--text-strong);letter-spacing:-.03em}.lux-name-en{margin-top:6px;font-size:18px;color:var(--muted)}
.lux-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.lux-meta{padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.84);border:1px solid var(--line);box-shadow:var(--shadow-xs)}.lux-meta span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}.lux-meta strong{font-size:18px;color:var(--text-strong)}
.card-qr{max-width:320px;width:100%;margin:4px auto 0;padding:12px;background:#fff;border-radius:26px;border:1px solid rgba(239,143,178,.18);box-shadow:var(--shadow-xs)}
.status-line{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.footer-grid{align-items:start}.footer .brand{align-items:flex-start}.footer .brand-title strong{margin-bottom:4px}.footer .brand-title span{line-height:1.7}
@media (max-width:980px){.member-card-grid,.lux-meta-grid{grid-template-columns:1fr}.lux-member{grid-template-columns:1fr}.lux-name-th{font-size:28px}}


button,[type=button],[type=submit],[type=reset]{appearance:none;-webkit-appearance:none}
input[type=submit],input[type=button],input[type=file]::file-selector-button{min-height:48px}
.table-actions .btn,.actions .btn,.actions .btn-outline,.table-actions .btn-outline{min-width:140px}
@media (max-width:560px){.table-actions .btn,.actions .btn,.actions .btn-outline,.table-actions .btn-outline{min-width:100%}}


/* 2026-03-23 usability hotfix */
.page-banner::after,.hero-panel::after,.card-accent::before,.lux-card::before{pointer-events:none}
.actions{position:relative;z-index:10}
.member-top-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.member-top-actions .btn,.member-top-actions .btn-outline,.member-top-actions .btn-soft{min-height:58px;padding:16px 26px;border-radius:18px;font-size:1.02rem;line-height:1.2;min-width:190px}
.member-top-actions .btn-outline.logout-btn,.member-top-actions .btn-outline.back-btn{padding-inline:30px;min-width:210px}
@media (max-width:860px){.member-top-actions{width:100%;justify-content:stretch}.member-top-actions .btn,.member-top-actions .btn-outline,.member-top-actions .btn-soft{width:100%;min-width:100%}}
@media (hover:none){.btn,.btn-outline,.btn-soft,.btn-ghost,.btn-danger{min-height:56px}}

.mini-form-grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:8px;min-width:420px}
.mini-form-grid .full-span{grid-column:1/-1}
.table-actions-stack{align-items:stretch}
.action-row{display:flex;gap:8px;flex-wrap:wrap}
.cookie-banner{position:fixed;left:18px;right:18px;bottom:18px;z-index:70;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:16px 18px;display:flex;gap:16px;align-items:center;justify-content:space-between}
.cookie-banner-text{display:grid;gap:4px}
.cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:860px){.mini-form-grid{grid-template-columns:1fr;min-width:280px}.cookie-banner{left:12px;right:12px;bottom:12px;flex-direction:column;align-items:stretch}.cookie-banner-actions{display:grid;grid-template-columns:1fr}}


/* 2026-03-23 PDPA consent layout fix */
.consent-note-box{padding:18px}
.consent-box{display:grid;gap:12px}
.consent-item{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin:0;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--primary-line)}
.consent-checkbox{width:18px;height:18px;margin:3px 0 0;accent-color:var(--primary-strong)}
.consent-text{display:block;min-width:0;line-height:1.7;color:var(--text);overflow-wrap:anywhere;word-break:break-word}
.consent-text a{font-weight:800;color:var(--text-strong);text-decoration:underline}
@media (max-width:560px){.consent-item{padding:14px}.consent-note-box{padding:14px}}

.cookie-banner[hidden], .cookie-banner.is-hidden{display:none !important}


.honeypot-field{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important;opacity:0 !important;pointer-events:none !important}
.password-meter{width:100%;height:10px;border-radius:999px;background:#f3e4ea;overflow:hidden;margin-top:10px;border:1px solid #f0d5df}
.password-meter-bar{display:block;height:100%;width:0;transition:width .2s ease;background:linear-gradient(90deg,#f5a0bb,#ef8fb2)}
.password-meter-bar.strength-1,.password-meter-bar.strength-2{background:linear-gradient(90deg,#f4a6a6,#ea7070)}
.password-meter-bar.strength-3{background:linear-gradient(90deg,#f3c98b,#eca24f)}
.password-meter-bar.strength-4{background:linear-gradient(90deg,#a6d6a7,#68b96d)}
.password-meter-bar.strength-5{background:linear-gradient(90deg,#7bc6a0,#2f9d67)}
.password-meter-text{margin-top:8px;color:var(--muted);font-size:14px}
.password-rules{margin:10px 0 0;padding-left:18px;color:var(--muted);display:grid;gap:6px;font-size:14px}
.password-rules li.met{color:#2f855a;font-weight:600}


.password-input-wrap{position:relative}
.password-input-wrap input{padding-right:92px !important}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:1px solid var(--line,#ddd8e2);background:#fff;color:var(--text-strong,#3d3d4b);border-radius:12px;padding:8px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:auto}
.remember-check label{display:flex;align-items:center;gap:10px;font-weight:600;color:#5b5563}
.remember-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary-strong,#d97ea4)}

/* 2026-03-24 registration field alignment + eye icon */
.form-grid{align-items:start}
.batch-field,.password-field,.confirm-password-field,.profile-field{align-self:start}
.batch-field input{min-height:64px}
.password-input-wrap{position:relative;display:flex;align-items:center}
.password-input-wrap input{padding-right:56px !important}
.password-toggle.icon-only{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:0;border:0;background:transparent;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#7f8291;box-shadow:none}
.password-toggle.icon-only:hover{background:rgba(127,130,145,.08);color:#505463}
.password-toggle.icon-only:focus-visible{outline:2px solid rgba(80,84,99,.18);outline-offset:2px}
.password-toggle.icon-only svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}


.pagination-wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.pagination-summary{color:var(--muted);font-size:.92rem}
.pagination-nav{display:flex;gap:8px;flex-wrap:wrap}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit;text-decoration:none;font-size:.92rem}
.page-link.active{background:var(--primary);border-color:var(--primary);color:#fff}
.page-link.disabled{opacity:.5;pointer-events:none}
@media (max-width:700px){.pagination-wrap{align-items:flex-start}.pagination-nav{width:100%}}


.share-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.share-btn{min-width:220px}
.share-icon{font-size:16px;line-height:1}
.badge-preview-wrap{display:flex;justify-content:center;align-items:center;min-height:100%}


.social-share-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.share-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:150px}
.share-pill .share-icon{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.7);font-weight:700;font-size:12px}
.share-pill-facebook{border-color:rgba(24,119,242,.22);color:#1877f2}
.share-pill-facebook:hover{background:rgba(24,119,242,.08)}
.share-pill-line{border-color:rgba(6,199,85,.24);color:#06c755}
.share-pill-line:hover{background:rgba(6,199,85,.08)}
.share-card .actions{align-items:center}
@media (max-width: 720px){
  .social-share-row > *{width:100%}
  .share-pill,.share-btn{min-width:100%}
}

/* 2026-04-03 global typography scale update */
html{font-size:17px}
body{font-size:1rem;line-height:1.72}
p,li,td,th,input,select,textarea,button{font-size:1rem}
small,.small,.muted,.footer-note,.person-note,.lux-card-sub,.lux-meta span{font-size:.95rem}
.brand-title strong{font-size:1.1rem}
.brand-title span{font-size:.8rem}
.menu a{font-size:1.03rem;padding:12px 16px}
.menu .lang-link{font-size:.98rem}
.btn,.btn-outline,.btn-soft,.btn-ghost,.btn-danger{font-size:1rem}
.eyebrow,.pill,.badge{font-size:.86rem}
.hero h1,h1{font-size:clamp(2.5rem,4.4vw,3.95rem);line-height:1.06}
h2{font-size:clamp(1.9rem,3.2vw,2.65rem);line-height:1.12}
h3{font-size:1.42rem;line-height:1.24}
label{font-size:1rem;margin-bottom:8px}
input,select,textarea{font-size:1rem;padding:15px 16px}
.table th,.table td{font-size:.98rem}
.table th{font-size:.84rem}
.kpi strong,.stat strong,.admin-stat strong{font-size:1.9rem}
.empty-state strong{font-size:1.18rem}
.person-name{font-size:1.32rem}
.person-role{font-size:1rem}
.lux-name-th{font-size:clamp(2rem,3vw,2.45rem)}
.lux-name-en{font-size:1.08rem}
.lux-meta strong{font-size:1.12rem}
@media (max-width:860px){
  html{font-size:16px}
  .menu a{font-size:1rem}
  .hero h1,h1{font-size:clamp(2.15rem,8vw,3rem)}
  h2{font-size:clamp(1.65rem,6vw,2.2rem)}
  h3{font-size:1.28rem}
}
@media (max-width:560px){
  html{font-size:15.5px}
  .btn,.btn-outline,.btn-soft,.btn-ghost,.btn-danger{font-size:1rem}
  input,select,textarea{font-size:1rem}
}


/* April 2026 larger typography refresh */
html{font-size:18px}
body{font-size:1rem;line-height:1.78}
p,li,td,th,input,select,textarea,button{font-size:1rem}
small,.small,.muted,.footer-note,.person-note,.lux-card-sub,.lux-meta span{font-size:.98rem}
.brand-title strong{font-size:1.18rem}
.brand-title span{font-size:.84rem}
.menu a{font-size:1.08rem;padding:13px 17px}
.menu .lang-link{font-size:1rem}
.btn,.btn-outline,.btn-soft,.btn-ghost,.btn-danger{font-size:1.02rem;min-height:58px;padding:16px 24px}
.eyebrow,.pill,.badge{font-size:.9rem}
.hero h1,h1{font-size:clamp(2.7rem,4.6vw,4.25rem);line-height:1.04}
h2{font-size:clamp(2rem,3.3vw,2.85rem);line-height:1.12}
h3{font-size:1.52rem;line-height:1.25}
label{font-size:1.03rem;margin-bottom:9px}
input,select,textarea{font-size:1rem;padding:16px 17px}
.table th,.table td{font-size:1rem}
.table th{font-size:.86rem}
.kpi strong,.stat strong,.admin-stat strong{font-size:2rem}
.empty-state strong{font-size:1.22rem}
.person-name{font-size:1.4rem}
.person-role{font-size:1.03rem}
.lux-name-th{font-size:clamp(2.1rem,3.15vw,2.6rem)}
.lux-name-en{font-size:1.12rem}
.lux-meta strong{font-size:1.16rem}
.sidebar a{font-size:1rem}
.sidebar-nav-title,.code,.inline-note{font-size:.94rem}
@media (max-width:860px){
  html{font-size:16.75px}
  .menu a{font-size:1.02rem}
  .hero h1,h1{font-size:clamp(2.25rem,8vw,3.2rem)}
  h2{font-size:clamp(1.78rem,6vw,2.35rem)}
  h3{font-size:1.34rem}
}
@media (max-width:560px){
  html{font-size:16px}
  .btn,.btn-outline,.btn-soft,.btn-ghost,.btn-danger{font-size:1rem}
  input,select,textarea{font-size:1rem}
}


.event-pay-box{display:grid;gap:14px}.event-pay-row{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:#fff}.event-bank-box{display:grid;gap:8px;padding:14px;border-radius:16px;background:#f8fbff;border:1px solid rgba(59,130,246,.12)}.ticket-shell{max-width:900px;margin:0 auto}.ticket-card{background:#fff;border-radius:28px;padding:24px;box-shadow:0 20px 60px rgba(15,23,42,.08)}.ticket-main{display:grid;grid-template-columns:1.4fr .9fr;gap:24px;align-items:center}.ticket-right{text-align:center}.ticket-right img{max-width:240px;width:100%;height:auto;border-radius:20px;background:#fff;padding:12px;border:1px solid rgba(15,23,42,.08)}.ticket-pending{padding:36px 18px;border-radius:20px;background:#fff7ed;border:1px solid #fed7aa;font-weight:700;color:#9a3412}.event-checkin-result p{margin:8px 0}.event-registration-actions{display:flex;flex-wrap:wrap;gap:10px}@media (max-width: 860px){.ticket-main{grid-template-columns:1fr}.event-pay-row{flex-direction:column;align-items:flex-start}}

.input-like{padding:14px 16px;border:1px solid rgba(15,23,42,.12);border-radius:14px;background:#f8fafc;min-height:52px;display:flex;align-items:center}


/* Event registration readability patch */
body{font-size:18px;line-height:1.82}
p,.footer-note,.muted,.item p,.feature p,.inline-note{font-size:18px;line-height:1.86}
.menu a{font-size:18px}
.page-banner .section-intro p,.card p,.event-pay-box,.event-bank-box,.ticket-card p{font-size:18px}
.card h3,.ticket-card h3{font-size:30px;line-height:1.24}
.badge,.status-pill,.eyebrow,.pill{font-size:15px}
label,input,select,textarea{font-size:17px}
.events-hero-copy{font-size:19px}
.share-card h3{font-size:31px;line-height:1.24;margin-bottom:12px}
.share-card p{font-size:19px;line-height:1.9}
.share-card .small,.share-card .muted,.event-pay-box .muted,.ticket-card .small,.ticket-card .muted{font-size:16px}
.ticket-card{padding:30px}
.ticket-main{gap:28px}
.ticket-pending{font-size:20px;line-height:1.6}
.flash{font-size:17px;line-height:1.75}
@media (max-width:860px){
  body{font-size:17px}
  p,.footer-note,.muted,.item p,.feature p,.inline-note,.page-banner .section-intro p,.card p,.event-pay-box,.event-bank-box,.ticket-card p,.share-card p{font-size:17px}
  .card h3,.ticket-card h3,.share-card h3{font-size:25px}
}


/* 2026-04-04 navbar logo size + favicon support patch */
.brand img{
  width: 82px;
  height: 82px;
  border-radius: 22px;
}
.brand img.no-frame-logo{
  height: 92px;
  width: auto;
}
.brand.logo-only img{
  height: 92px;
  width: auto;
  max-width: 220px;
}

@media (max-width: 860px){
  .brand img{
    width: 72px;
    height: 72px;
  }
  .brand img.no-frame-logo,
  .brand.logo-only img{
    height: 78px;
  }
}

@media (max-width: 560px){
  .brand img{
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }
  .brand img.no-frame-logo,
  .brand.logo-only img{
    height: 68px;
  }
}


/* 2026-04-12 readability adjustment */
.hero-panel > p{
  font-size: 21px;
  line-height: 1.95;
}
.section-intro p,
.kpi .muted,
.card p,
.item p,
.feature p,
.footer-note{
  font-size: 19px;
  line-height: 1.88;
}
.menu a{
  font-size: 18px;
}
@media (max-width:860px){
  .hero-panel > p{font-size:19px;line-height:1.9}
  .section-intro p,
  .kpi .muted,
  .card p,
  .item p,
  .feature p,
  .footer-note{font-size:18px;line-height:1.82}
}
@media (max-width:560px){
  .hero-panel > p{font-size:18px}
  .section-intro p,
  .kpi .muted,
  .card p,
  .item p,
  .feature p,
  .footer-note{font-size:17px}
}