/* Account workspace: scoped to Profile, orders, rewards and settings only. */
.eratech-account-dialog {
  width: min(900px, calc(100% - 32px));
  max-width: 900px;
  max-height: min(720px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
  color: #15243a;
  box-shadow: 0 36px 110px rgba(7, 32, 67, .34);
}
.eratech-account-dialog::backdrop { background: rgba(5, 18, 38, .62); backdrop-filter: blur(8px); }
.eratech-account-dialog[open] { animation: eratech-account-enter .2s ease-out; }
@keyframes eratech-account-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.eratech-account-card {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto minmax(330px, auto);
  box-sizing: border-box;
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  border: 1px solid rgba(24, 89, 158, .15);
  border-radius: 28px;
  background: linear-gradient(135deg, #f5f9fd 0, #fff 42%, #f8fbff 100%);
}
.eratech-account-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 7%, rgba(37, 133, 255, .13), transparent 29%); }
.eratech-account-close { position: absolute; z-index: 2; top: 20px; right: 22px; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid #dce7f2; border-radius: 50%; background: rgba(255,255,255,.82); color: #41566d; cursor: pointer; font: inherit; font-size: 25px; line-height: 1; box-shadow: 0 8px 22px rgba(24,67,112,.1); transition: transform .16s ease, background .16s ease; }
.eratech-account-close:hover { transform: rotate(5deg); background: #edf5fd; }
.eratech-account-header { position: relative; grid-column: 1 / -1; padding: 30px 76px 24px 32px; border-bottom: 1px solid #e5edf5; }
.eratech-account-eyebrow { color: #1670e8; font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.eratech-account-header h2 { margin: 8px 0 5px; color: #10233b; font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: -.035em; }
.eratech-account-header p { max-width: 580px; margin: 0; color: #64758a; font-size: 14px; line-height: 1.55; }
.eratech-account-tabs { position: relative; display: grid; align-content: start; gap: 8px; margin: 0; padding: 24px 18px 28px; border-right: 1px solid #e5edf5; background: rgba(238, 245, 252, .62); }
.eratech-account-tabs button { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; min-height: 48px; padding: 8px 13px; border: 0; border-radius: 14px; background: transparent; color: #596b80; cursor: pointer; font: inherit; font-size: 13px; font-weight: 720; text-align: left; transition: background .16s ease, color .16s ease, transform .16s ease; }
.eratech-account-tabs button::before { content: "01"; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #d6e2ef; border-radius: 10px; background: rgba(255,255,255,.72); color: #6a7e94; font-size: 10px; font-weight: 850; letter-spacing: .06em; }
.eratech-account-tabs button[data-account-tab="orders"]::before { content: "02"; }
.eratech-account-tabs button[data-account-tab="rewards"]::before { content: "03"; }
.eratech-account-tabs button[data-account-tab="settings"]::before { content: "04"; }
.eratech-account-tabs button:hover { background: rgba(255,255,255,.72); color: #184d88; transform: translateX(2px); }
.eratech-account-tabs button.is-active { background: linear-gradient(135deg, #1675ed, #0b4fae); color: #fff; box-shadow: 0 12px 24px rgba(19, 100, 208, .24); }
.eratech-account-tabs button.is-active::before { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.16); color: #fff; }
.eratech-account-panel { position: relative; min-width: 0; min-height: 330px; padding: 28px 30px 30px; }
.eratech-account-panel[hidden] { display: none; }
.eratech-account-panel::before { content: "Thông tin cá nhân"; display: block; margin: 0 0 20px; color: #17304d; font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.eratech-account-panel[data-account-panel="orders"]::before { content: "Lịch sử mua hàng"; }
.eratech-account-panel[data-account-panel="rewards"]::before { content: "Điểm thưởng của bạn"; }
.eratech-account-panel[data-account-panel="settings"]::before { content: "Tùy chọn tài khoản"; }
.eratech-account-form { margin: 0; }
.eratech-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.eratech-account-form label { display: grid; gap: 8px; color: #536579; font-size: 12px; font-weight: 760; }
.eratech-account-form input,
.eratech-account-form select { width: 100%; min-height: 48px; box-sizing: border-box; padding: 12px 14px; border: 1px solid #d6e1ec; border-radius: 13px; outline: 0; background: rgba(255,255,255,.94); color: #17263a; font: inherit; font-size: 14px; box-shadow: 0 5px 14px rgba(27, 67, 110, .045); }
.eratech-account-form input:focus,
.eratech-account-form select:focus { border-color: #1672ea; box-shadow: 0 0 0 3px rgba(22,114,234,.13); }
.eratech-account-form input[readonly] { background: #eef3f8; color: #6d7d8f; box-shadow: none; }
.eratech-account-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 22px; padding: 0 24px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #1777ef, #0b4da9); color: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 780; box-shadow: 0 11px 24px rgba(19, 97, 201, .24); }
.eratech-account-submit:hover { filter: brightness(1.05); }
.eratech-account-status { min-height: 18px; margin: 10px 0 0; color: #176dcf; font-size: 12px; }
.eratech-account-check { display: flex !important; align-items: center; gap: 11px !important; margin-top: 12px; padding: 13px 14px; border: 1px solid #dce6f0; border-radius: 13px; background: rgba(255,255,255,.7); color: #4f6175 !important; font-size: 13px !important; font-weight: 580 !important; }
.eratech-account-check input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: #146fe8; box-shadow: none; }
.eratech-account-empty { display: grid; min-height: 215px; box-sizing: border-box; place-items: center; align-content: center; gap: 14px; padding: 30px 24px; border: 1px dashed #c7d7e7; border-radius: 20px; background: linear-gradient(145deg, rgba(240,247,255,.9), rgba(255,255,255,.8)); color: #687a8e; font-size: 14px; line-height: 1.55; text-align: center; }
.eratech-account-empty::before { content: "✓"; display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; background: #e2efff; color: #146fe8; font-size: 22px; font-weight: 800; }
.eratech-account-order-list { display: grid; width: 100%; gap: 10px; }
.eratech-account-order { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; border: 1px solid #dbe5ef; border-radius: 14px; background: rgba(255,255,255,.88); text-align: left; }
.eratech-account-order strong { color: #1b3552; font-size: 14px; }
.eratech-account-order span { color: #6b7d90; font-size: 12px; }
.eratech-rewards-card { position: relative; min-height: 215px; box-sizing: border-box; padding: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: linear-gradient(135deg, #071d3b, #0b5fc7 64%, #2987f5); color: #fff; box-shadow: 0 18px 40px rgba(8, 70, 145, .25); }
.eratech-rewards-card::after { content: "ERA TECH"; position: absolute; right: -10px; bottom: -12px; color: rgba(255,255,255,.08); font-size: 54px; font-weight: 900; letter-spacing: -.05em; }
.eratech-rewards-card span { position: relative; z-index: 1; color: #c5ddfb; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.eratech-rewards-card strong { position: relative; z-index: 1; display: block; margin-top: 12px; font-size: 44px; line-height: 1; letter-spacing: -.035em; }
.eratech-rewards-card small { position: relative; z-index: 1; display: block; max-width: 390px; margin-top: 18px; color: #c5ddfb; font-size: 12px; line-height: 1.55; }
:root[data-theme="dark"] .eratech-account-card { border-color: rgba(255,255,255,.11); background: linear-gradient(135deg, #101d2f, #0b1524 60%, #0f1c2e); color: #f5f9ff; }
:root[data-theme="dark"] .eratech-account-header,
:root[data-theme="dark"] .eratech-account-tabs { border-color: rgba(255,255,255,.1); }
:root[data-theme="dark"] .eratech-account-header h2,
:root[data-theme="dark"] .eratech-account-panel::before { color: #f5f9ff; }
:root[data-theme="dark"] .eratech-account-header p,
:root[data-theme="dark"] .eratech-account-form label,
:root[data-theme="dark"] .eratech-account-status { color: #aebdd0; }
:root[data-theme="dark"] .eratech-account-close { border-color: rgba(255,255,255,.12); background: #1a2a40; color: #eef5ff; }
:root[data-theme="dark"] .eratech-account-tabs { background: rgba(255,255,255,.035); }
:root[data-theme="dark"] .eratech-account-tabs button { color: #aebdd0; }
:root[data-theme="dark"] .eratech-account-tabs button::before { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #aebdd0; }
:root[data-theme="dark"] .eratech-account-tabs button.is-active { color: #fff; }
:root[data-theme="dark"] .eratech-account-form input,
:root[data-theme="dark"] .eratech-account-form select { border-color: #2b405a; background: #101e30; color: #f5f9ff; }
:root[data-theme="dark"] .eratech-account-form input[readonly] { background: #18283d; color: #a9b9cc; }
:root[data-theme="dark"] .eratech-account-check { border-color: #2b4058; background: rgba(17,32,51,.72); color: #bcc9d8 !important; }
:root[data-theme="dark"] .eratech-account-empty { border-color: #304965; background: rgba(18,35,56,.72); color: #aebdd0; }
:root[data-theme="dark"] .eratech-account-empty::before { background: #16375d; color: #78b9ff; }
:root[data-theme="dark"] .eratech-account-order { border-color: #2b4058; background: #112035; }
:root[data-theme="dark"] .eratech-account-order strong { color: #eff6ff; }
:root[data-theme="dark"] .eratech-account-order span { color: #9eafc2; }
@media (max-width: 700px) {
  .eratech-account-dialog { width: min(620px, calc(100% - 20px)); max-height: calc(100dvh - 20px); border-radius: 22px; }
  .eratech-account-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; max-height: calc(100dvh - 20px); border-radius: 22px; }
  .eratech-account-header { padding: 24px 60px 20px 20px; }
  .eratech-account-close { top: 15px; right: 15px; width: 38px; height: 38px; }
  .eratech-account-tabs { display: flex; gap: 7px; padding: 12px 14px; border-right: 0; border-bottom: 1px solid #e5edf5; overflow-x: auto; scrollbar-width: none; }
  .eratech-account-tabs::-webkit-scrollbar { display: none; }
  .eratech-account-tabs button { flex: 0 0 auto; grid-template-columns: auto 1fr; min-height: 42px; padding: 6px 11px; }
  .eratech-account-tabs button::before { width: 28px; height: 28px; border-radius: 9px; }
  .eratech-account-tabs button:hover { transform: none; }
  .eratech-account-panel { min-height: 300px; padding: 22px 18px 24px; }
}
@media (max-width: 520px) {
  .eratech-account-grid { grid-template-columns: 1fr; gap: 12px; }
  .eratech-account-header h2 { font-size: 29px; }
  .eratech-account-header p { font-size: 13px; }
  .eratech-account-panel { min-height: 0; }
  .eratech-account-submit { width: 100%; }
  .eratech-account-order { align-items: flex-start; flex-direction: column; }
  .eratech-rewards-card strong { font-size: 38px; }
}