/* Signed-in account dashboard: sidebar + tabbed content. */
body.is-account-signed-in .account-shell { width: min(1180px, calc(100% - 40px)); max-width: none; }
body.is-account-signed-in .account-intro { display: none; }
body.is-account-signed-in .account-layout { display: block; }

.account-dashboard {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  animation: rise-in .45s ease both;
}
.account-dashboard[hidden] { display: none; }

.account-sidebar {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 15px;
  padding: 17px;
}
.account-sidebar-head { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #262626; }
.account-sidebar-head img { width: 38px; height: 38px; flex: none; object-fit: contain; }
.account-sidebar-head > div { display: grid; gap: 2px; min-width: 0; }
.account-sidebar-head h2 { margin: 0; color: #f2f2f2; font: 600 14px "Prompt", sans-serif; }
.account-sidebar-head small { color: #929292; font-size: 10px; overflow-wrap: anywhere; }

.account-sidebar-balance { display: grid; gap: 2px; padding: 12px; border: 1px solid #2c2c2c; border-radius: 9px; background: #121212; }
.account-sidebar-balance span { color: #929292; font-size: 10px; }
.account-sidebar-balance strong { color: #f4f4f4; font: 600 20px/1.2 "Prompt", sans-serif; letter-spacing: -.02em; }
.account-sidebar-balance a { justify-self: start; margin-top: 3px; color: #bdbdbd; font-size: 10px; text-decoration: none; }
.account-sidebar-balance a:hover { color: #fff; text-decoration: underline; }

.account-menu { display: grid; gap: 4px; }
.account-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #9a9a9a;
  cursor: pointer;
  font: 500 12px "IBM Plex Sans Thai", sans-serif;
  text-align: left;
  transition: background .18s, color .18s, border-color .18s;
}
.account-menu button::after { content: "›"; color: #6a6a6a; font-size: 14px; line-height: 1; }
.account-menu button:hover { border-color: #343434; background: #171717; color: #e8e8e8; }
.account-menu button.is-active { background: #ededed; color: #111; }
.account-menu button.is-active::after { color: #111; }
.account-menu button:focus-visible { outline: 2px solid #9a9a9a; outline-offset: 2px; }

.account-sidebar-links { display: grid; gap: 8px; padding-top: 13px; border-top: 1px solid #262626; }
.account-sidebar-links a { color: #bdbdbd; font-size: 10px; text-decoration: none; }
.account-sidebar-links a:hover { color: #fff; text-decoration: underline; }
.account-signout { min-height: 34px; border: 1px solid #3a3a3a; border-radius: 7px; background: transparent; color: #d6d6d6; cursor: pointer; font: 11px "IBM Plex Sans Thai", sans-serif; transition: border-color .18s, color .18s; }
.account-signout:hover { border-color: #8e8e8e; color: #fff; }

.account-content { min-width: 0; }
.account-panel { min-height: 420px; padding: clamp(18px, 2.4vw, 26px); }
.account-panel[hidden] { display: none; }
.account-panel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.account-panel-head > div { min-width: 0; }
.account-panel-head h1 { margin: 5px 0 4px; color: #f2f2f2; font: 600 clamp(21px, 2.4vw, 28px)/1.2 "Prompt", sans-serif; letter-spacing: -.03em; }
.account-panel-head p { margin: 0; color: #9a9a9a; font-size: 11px; line-height: 1.6; }
.account-panel-head .button { flex: none; }

.account-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.account-profile-stat { display: grid; gap: 3px; padding: 12px; border: 1px solid #2c2c2c; border-radius: 9px; background: #121212; }
.account-profile-stat span { color: #929292; font-size: 10px; }
.account-profile-stat strong { color: #eeeeee; font: 500 15px/1.35 "Prompt", sans-serif; overflow-wrap: anywhere; }

.account-panel .account-summary { margin-bottom: 14px; }
.account-panel .account-list { margin-bottom: 0; }
.account-profile-note { margin: 14px 0; padding: 12px; border: 1px solid #2c2c2c; border-radius: 8px; background: #121212; }
.account-profile-note strong { display: block; margin-bottom: 3px; color: #e6e6e6; font-size: 11px; }
.account-profile-note p { margin: 0; color: #929292; font-size: 10px; line-height: 1.6; }

.account-orders-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.account-orders-toolbar label { display: inline-flex; align-items: center; gap: 7px; color: #9a9a9a; font-size: 10px; }
.account-orders-toolbar select { min-height: 32px; padding: 3px 8px; border: 1px solid #333; border-radius: 6px; background: #171717; color: #ededed; font: 11px "IBM Plex Sans Thai", sans-serif; }
.account-orders-summary { color: #8e8e8e; font-size: 10px; }

/* Purchase table inside the account panel */
.account-purchases-toolbar { padding: 0 0 12px; }
.account-purchases-table-wrap { border: 1px solid #2c2c2c; border-radius: 9px; overflow: hidden; }
.account-purchases-table th { background: #141414; }
.account-purchases-table tbody tr:hover { background: #151515; }
.account-purchases-foot { padding: 12px 0 0; border: 0; }
.account-purchases-empty { padding: 36px 16px !important; color: #8e8e8e; text-align: center; }
.account-purchases-empty a { color: #e6e6e6; }
.account-purchases-note { margin: 14px 0 0; color: #7f7f7f; font-size: 10px; line-height: 1.6; }
.account-purchases-table .purchases-order { display: grid; gap: 2px; }
.account-purchases-table .purchases-order strong { color: #dedede; font: 500 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.account-purchases-table .purchases-order small { color: #8e8e8e; font-size: 10px; }
.account-purchases-table .account-purchase-mobile-meta { display: none; }

@media (max-width: 960px) {
  body.is-account-signed-in .account-shell { width: calc(100% - 28px); }
  .account-dashboard { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .account-sidebar { position: static; gap: 12px; padding: 14px; }
  .account-sidebar-head { padding-bottom: 10px; }
  .account-sidebar-balance { padding: 10px 12px; }
  .account-sidebar-balance strong { font-size: 17px; }
  .account-menu { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .account-menu button { width: auto; flex: none; white-space: nowrap; padding: 8px 11px; }
  .account-menu button::after { display: none; }
  .account-sidebar-links { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; }
  .account-signout { padding: 0 12px; }
  .account-panel { min-height: 0; }
}

@media (max-width: 700px) {
  .account-profile-stats { grid-template-columns: minmax(0, 1fr); }
  .account-panel-head { align-items: flex-start; }
  .account-panel-head .button { order: 2; }
  .account-purchases-table-wrap { margin-inline: -4px; }
  .account-purchases-table th:nth-child(1),
  .account-purchases-table th:nth-child(5),
  .account-purchases-table td:nth-child(1):not([colspan]),
  .account-purchases-table td:nth-child(5):not([colspan]) { display: none; }
  .account-purchases-table th, .account-purchases-table td { padding: 10px 9px; }
  .account-purchases-table .purchases-view { padding: 5px 8px; }
  .account-purchases-table .account-purchase-mobile-meta { display: block; }
}

html[data-theme="light"] .account-sidebar-head,
html[data-theme="light"] .account-sidebar-links { border-bottom-color: #e5e5e5; border-top-color: #e5e5e5; }
html[data-theme="light"] .account-sidebar-head h2,
html[data-theme="light"] .account-sidebar-balance strong,
html[data-theme="light"] .account-panel-head h1,
html[data-theme="light"] .account-profile-stat strong { color: #262626; }
html[data-theme="light"] .account-sidebar-head small,
html[data-theme="light"] .account-sidebar-balance span,
html[data-theme="light"] .account-panel-head p,
html[data-theme="light"] .account-profile-stat span,
html[data-theme="light"] .account-orders-summary { color: #6d6d6d; }
html[data-theme="light"] .account-sidebar-balance,
html[data-theme="light"] .account-profile-stat,
html[data-theme="light"] .account-profile-note { border-color: #e2e2e2; background: #fafafa; }
html[data-theme="light"] .account-sidebar-balance a,
html[data-theme="light"] .account-sidebar-links a,
html[data-theme="light"] .account-signout { color: #555555; }
html[data-theme="light"] .account-menu button { color: #666666; }
html[data-theme="light"] .account-menu button:hover { border-color: #e0e0e0; background: #f4f4f4; color: #222; }
html[data-theme="light"] .account-menu button.is-active { background: #111111; color: #ffffff; }
html[data-theme="light"] .account-menu button.is-active::after { color: #ffffff; }
html[data-theme="light"] .account-orders-toolbar select { border-color: #ddd; background: #fff; color: #333; }
html[data-theme="light"] .account-purchases-table-wrap { border-color: #e2e2e2; }
html[data-theme="light"] .account-purchases-table th { background: #fafafa; }
html[data-theme="light"] .account-purchases-table tbody tr:hover { background: #fafafa; }
html[data-theme="light"] .account-purchases-table .purchases-order strong { color: #333; }
html[data-theme="light"] .account-profile-note strong { color: #333; }
html[data-theme="light"] .account-profile-note p { color: #666; }
html[data-theme="light"] .account-purchases-empty { color: #777; }
html[data-theme="light"] .account-purchases-empty a { color: #222; }
html[data-theme="light"] .account-purchases-note { color: #777; }