:root{--bg:#070a09;--surface:#0e1612;--surface2:#111d17;--line:rgba(190,255,223,.11);--text:#f4faf6;--muted:#92a39a;--green:#39e5a0;--green2:#78f4c4;--amber:#e5c46b;--red:#ff756d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 10% 0%,rgba(57,229,160,.1),transparent 30%),var(--bg);color:var(--text);font-family:Inter,"Noto Sans Thai",sans-serif;line-height:1.65}.container{width:min(1180px,calc(100% - 36px));margin:auto}.topbar{position:sticky;top:0;z-index:10;background:rgba(7,10,9,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.nav{height:76px;display:flex;align-items:center}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.12em}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--green),#53d8ff);color:#03100a}.nav-actions{margin-left:auto;display:flex;align-items:center;gap:22px}.nav-actions a{color:var(--muted);text-decoration:none}.secure{font-size:10px;color:var(--green2);font-weight:800;letter-spacing:.12em}.page{padding:54px 0 80px}.hidden{display:none!important}.loading-card,.error-card{padding:34px;border:1px solid var(--line);border-radius:22px;background:var(--surface);text-align:center}.error-card span{width:66px;height:66px;margin:auto;display:grid;place-items:center;border-radius:50%;background:rgba(255,117,109,.1);color:var(--red);font-size:34px}.error-card a{display:inline-flex;margin-top:14px;padding:11px 18px;border:1px solid var(--line);border-radius:11px;color:var(--text);text-decoration:none}.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:24px;align-items:end;margin-bottom:28px}.eyebrow{color:var(--green2);font-size:10px;font-weight:800;letter-spacing:.16em}.hero h1{font-size:clamp(42px,6vw,68px);letter-spacing:-.055em;margin:8px 0}.hero p{max-width:700px;color:var(--muted)}.identity{display:grid;grid-template-columns:1fr 1.4fr;border:1px solid var(--line);border-radius:18px;overflow:hidden}.identity span,.identity strong{padding:13px;background:rgba(14,22,18,.85);border-bottom:1px solid var(--line)}.identity span{color:var(--muted);font-size:11px}.identity strong{text-align:right}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}.summary-grid article{padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--surface2),var(--surface))}.summary-grid span{display:block;color:var(--muted);font-size:12px}.summary-grid strong{display:block;font-size:32px;margin-top:8px}.tabs{display:flex;gap:8px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:auto}.tabs button{white-space:nowrap;border:0;background:transparent;color:var(--muted);padding:12px 17px;border-radius:11px;font:inherit;font-weight:700;cursor:pointer}.tabs button.active{background:rgba(57,229,160,.12);color:var(--green2)}.tab-panel{display:none;padding-top:30px}.tab-panel.active{display:block}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.section-head h2{font-size:30px;margin:4px 0}.card-list{display:grid;gap:14px}.data-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--surface2),var(--surface))}.card-top{display:flex;align-items:start;gap:16px}.product-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(57,229,160,.1);color:var(--green2);font-weight:800}.card-title{flex:1}.card-title h3{margin:0;font-size:23px}.card-title p{margin:4px 0;color:var(--muted)}.status{padding:7px 11px;border-radius:100px;font-size:11px;font-weight:800}.status.active,.status.completed{background:rgba(57,229,160,.11);color:var(--green2)}.status.other{background:rgba(229,196,107,.1);color:var(--amber)}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:18px;border:1px solid var(--line);background:var(--line);border-radius:13px;overflow:hidden}.info-grid div{padding:14px;background:var(--bg)}.info-grid span{display:block;color:var(--muted);font-size:10px}.info-grid strong{display:block;margin-top:4px}.download-action{display:flex;align-items:center;gap:14px;margin-top:17px}.download-action a{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:12px;background:linear-gradient(180deg,var(--green2),var(--green));color:#03100a;font-weight:800;text-decoration:none}.download-action a.disabled{pointer-events:none;opacity:.45}.download-action p{color:var(--muted);font-size:12px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}.orders-table{width:100%;border-collapse:collapse;min-width:780px}.orders-table th,.orders-table td{padding:16px;text-align:left;border-bottom:1px solid var(--line)}.orders-table th{color:var(--muted);font-size:11px;background:var(--surface)}.orders-table td{background:rgba(7,10,9,.6)}.profile-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:18px;overflow:hidden}.profile-grid div{padding:18px;border-bottom:1px solid var(--line);background:var(--surface)}.profile-grid span{display:block;color:var(--muted);font-size:11px}.profile-grid strong{display:block;margin-top:5px}.profile-note{color:var(--muted);font-size:12px}footer{display:flex;justify-content:space-between;gap:20px;margin-top:38px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.empty{padding:30px;border:1px dashed var(--line);border-radius:16px;text-align:center;color:var(--muted)}@media(max-width:850px){.hero{grid-template-columns:1fr}.summary-grid{grid-template-columns:1fr 1fr}.info-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.nav-actions .secure{display:none}.summary-grid{grid-template-columns:1fr}.profile-grid{grid-template-columns:1fr}.card-top{flex-wrap:wrap}.status{margin-left:64px}.info-grid{grid-template-columns:1fr}.download-action{align-items:stretch;flex-direction:column}.download-action a{width:100%}footer{flex-direction:column}}

.summary-grid{grid-template-columns:repeat(6,1fr)}
.update-banner{margin-top:16px;padding:14px 16px;border:1px solid rgba(229,196,107,.28);border-radius:13px;background:rgba(229,196,107,.08);color:var(--amber);display:flex;justify-content:space-between;gap:16px;align-items:center}
.update-banner strong{color:#f5dfa5}
.license-detail{margin-top:17px}
.license-detail summary{cursor:pointer;color:var(--green2);font-weight:700}
.license-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:13px;border:1px solid var(--line);background:var(--line);border-radius:13px;overflow:hidden}
.license-detail-grid div{padding:14px;background:var(--bg)}
.license-detail-grid span{display:block;color:var(--muted);font-size:10px}
.license-detail-grid strong{display:block;margin-top:4px}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.support-grid a{padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--surface2),var(--surface));text-decoration:none;color:var(--text)}
.support-grid span{display:block;color:var(--muted);font-size:11px}
.support-grid strong{display:block;font-size:20px;margin-top:8px}
@media(max-width:1000px){.summary-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.support-grid{grid-template-columns:1fr}.license-detail-grid{grid-template-columns:1fr}}
@media(max-width:520px){.summary-grid{grid-template-columns:1fr 1fr}}

.summary-grid{grid-template-columns:repeat(6,1fr)}
.ea-card{padding:26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(17,29,23,.98),rgba(8,13,10,.98))}
.ea-head{display:flex;gap:16px;align-items:center}
.ea-mark{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(57,229,160,.12);color:var(--green2);font-size:20px;font-weight:800}
.ea-head h3{margin:0;font-size:26px}.ea-head p{margin:4px 0;color:var(--muted)}
.ea-actions{margin-left:auto;display:flex;gap:10px}
.ea-actions a{padding:12px 17px;border-radius:11px;text-decoration:none;font-weight:800;background:linear-gradient(180deg,var(--green2),var(--green));color:#03100a}
.ea-actions a.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.version-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:20px;border:1px solid var(--line);background:var(--line);border-radius:14px;overflow:hidden}
.version-row div{padding:15px;background:var(--bg)}.version-row span{display:block;color:var(--muted);font-size:10px}.version-row strong{display:block;margin-top:5px}
.progress-block{margin-top:18px}.progress-label{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.progress-track{height:10px;background:#07100b;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:8px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green2))}
.timeline{display:grid;gap:12px}.timeline-item{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:20px;border:1px solid var(--line);border-radius:17px;background:var(--surface)}.timeline-item time{color:var(--green2);font-weight:700}.timeline-item h3{margin:0 0 5px}.timeline-item p{margin:0;color:var(--muted)}
@media(max-width:1000px){.summary-grid{grid-template-columns:repeat(3,1fr)}.version-row{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.ea-head{flex-wrap:wrap}.ea-actions{margin-left:72px;width:100%}.timeline-item{grid-template-columns:1fr}}
@media(max-width:520px){.summary-grid{grid-template-columns:1fr 1fr}.version-row{grid-template-columns:1fr}.ea-actions{margin-left:0;flex-direction:column}.ea-actions a{text-align:center}}

.language-switch{
  display:flex;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(14,22,18,.75);
}
.language-switch button{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:7px 10px;
  border-radius:7px;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.language-switch button.active{
  background:var(--green);
  color:#03100a;
}
@media(max-width:700px){
  .nav-actions .secure{display:none}
}
@media(max-width:520px){
  .nav-actions{gap:10px}
  .language-switch button{padding:6px 8px}
}

.version-state{margin-top:17px;padding:13px 15px;border-radius:13px;font-weight:700;display:flex;justify-content:space-between;gap:15px}
.version-state.latest{background:rgba(57,229,160,.09);border:1px solid rgba(57,229,160,.2);color:var(--green2)}
.version-state.update{background:rgba(229,196,107,.09);border:1px solid rgba(229,196,107,.22);color:var(--amber)}
.release-button{background:transparent!important;border:1px solid var(--line);color:var(--text)!important}
.payment-slip{color:var(--green2);text-decoration:none;font-weight:700}
.support-disabled{padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--surface2),var(--surface));opacity:.55}
.support-disabled span{display:block;color:var(--muted);font-size:11px}
.support-disabled strong{display:block;font-size:20px;margin-top:8px}
.disabled-action{border:1px solid var(--line);background:transparent;color:var(--muted);padding:10px 14px;border-radius:10px}
.portal-footer{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);background:var(--line);border-radius:16px;overflow:hidden}
.portal-footer div{padding:16px;background:var(--surface)}
.portal-footer span{display:block;color:var(--muted);font-size:10px}
.portal-footer strong{display:block;margin-top:5px}
.portal-footer .online{color:var(--green2)}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.modal-card{position:relative;width:min(720px,100%);padding:28px;border:1px solid var(--line);border-radius:22px;background:#0d1511;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.modal-card h2{font-size:30px;margin:7px 0 20px}
.modal-close{position:absolute;right:16px;top:13px;border:0;background:transparent;color:var(--muted);font-size:32px;cursor:pointer}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--line);background:var(--line);border-radius:14px;overflow:hidden}
.modal-grid div{padding:15px;background:var(--bg)}
.modal-grid span{display:block;color:var(--muted);font-size:10px}
.modal-grid strong{display:block;margin-top:5px}
.modal-note{color:var(--muted);font-size:12px;margin-bottom:0}
@media(max-width:800px){.portal-footer{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.modal-grid{grid-template-columns:1fr}.portal-footer{grid-template-columns:1fr}}

.logout-button{width:auto;margin:0;border:1px solid var(--line);background:transparent;color:var(--muted);padding:8px 12px;border-radius:9px;cursor:pointer}


/* ==================================================
   Customer Live V1
   ================================================== */
.section-description{
  color:var(--muted);
  margin:7px 0 0;
  font-size:13px;
}
.live-section-head{
  align-items:flex-end;
}
.live-tools{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:11px;
}
.live-tools button{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  padding:9px 13px;
  border-radius:10px;
  cursor:pointer;
}
.live-tools button:disabled{
  opacity:.55;
  cursor:wait;
}
.live-list{
  display:grid;
  gap:18px;
}
.live-card{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%,rgba(57,229,160,.08),transparent 28%),
    linear-gradient(180deg,var(--surface2),var(--surface));
}
.live-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px;
  border-bottom:1px solid var(--line);
}
.live-card-head .product-icon{
  flex:0 0 auto;
}
.live-card-title{
  min-width:0;
}
.live-card-title h3{
  margin:0;
  font-size:22px;
}
.live-card-title p{
  margin:5px 0 0;
  color:var(--muted);
}
.live-status{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
}
.live-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 12px currentColor;
}
.live-status.online{
  color:var(--green2);
  background:rgba(57,229,160,.1);
}
.live-status.delayed{
  color:var(--amber);
  background:rgba(229,196,107,.1);
}
.live-status.offline,
.live-status.not-connected{
  color:#ff8d86;
  background:rgba(255,116,106,.09);
}
.live-primary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line);
}
.live-primary-grid div,
.live-secondary-grid div{
  padding:17px;
  background:rgba(7,10,9,.92);
}
.live-primary-grid span,
.live-secondary-grid span{
  display:block;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.05em;
}
.live-primary-grid strong{
  display:block;
  margin-top:7px;
  font-size:22px;
}
.live-secondary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
}
.live-secondary-grid strong{
  display:block;
  margin-top:6px;
  font-size:15px;
}
.live-card-foot{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:13px 18px;
  color:var(--muted);
  font-size:11px;
}
.live-positive{color:var(--green2)!important}
.live-negative{color:#ff928b!important}
.live-warning{color:var(--amber)!important}
.live-connect-note{
  padding:24px;
  color:var(--muted);
}
@media(max-width:900px){
  .live-primary-grid{grid-template-columns:1fr 1fr}
  .live-secondary-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .live-section-head{align-items:flex-start}
  .live-tools{width:100%;justify-content:space-between}
  .live-card-head{align-items:flex-start;flex-wrap:wrap}
  .live-status{margin-left:0}
  .live-primary-grid,
  .live-secondary-grid{grid-template-columns:1fr 1fr}
  .live-card-foot{flex-direction:column}
}