.account-page .page-main { width: min(1080px, calc(100% - 40px)); padding: 20px 0 60px; }
.account-page .page-intro { padding: 28px 0 20px; margin: 0; }
.account-page .page-title { font-size: 34px; line-height: 1.2; margin: 0; }
.account-page #accountContent { display: block; }
.account-page [hidden] { display: none !important; }
.account-page button, .account-page a, .account-page input { -webkit-tap-highlight-color: transparent; }
.account-page button:focus-visible, .account-page a:focus-visible, .account-page summary:focus-visible { outline: 3px solid #c89b30; outline-offset: 3px; }
.account-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #b5cbbf; gap: 8px; padding: 0 0 12px; margin-bottom: 28px; }
body.account-page .account-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 52px; padding: 12px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #446358; font: 700 15px/1.3 Arial, sans-serif; cursor: pointer; }
.account-tabs button img { flex: 0 0 21px; opacity: .7; }
body.account-page .account-tabs button:hover { background: #e0ebe4; }
body.account-page .account-tabs button[aria-selected="true"] { background: #18533f; color: #fff; }
.account-tabs button[aria-selected="true"] img { filter: invert(1); opacity: 1; }
.account-view { min-width: 0; }
.account-section-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.account-section-heading h2 { margin: 0; font-size: 22px; line-height: 1.4; }
.account-item-count { min-width: 28px; height: 28px; display: grid; place-items: center; background: #dde9e1; color: #2f624d; border-radius: 4px; font: 700 14px/1 Arial, sans-serif; padding: 4px 8px; }
.account-order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.account-order { min-width: 0; padding: 24px; border: 1px solid #c8d9cf; border-left: 4px solid #7a9f8b; border-radius: 7px; background: #fff; }
.account-order h3 { margin: 16px 0 20px; font-size: 24px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.order-learning-goals {display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 20px;padding:0;list-style:none;}
.order-learning-goals li {max-width:100%;padding:6px 9px;background:#eaf2ec;color:#315e4b;border-radius:4px;font:600 12px/1.4 Arial,sans-serif;overflow-wrap:anywhere;}
.order-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.order-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 31px; padding: 7px 11px; border-radius: 4px; font: 700 13px/1.3 Arial, sans-serif; }
.order-status > b { border-left: 1px solid currentColor; padding-left: 14px; font-size: 14px; white-space: nowrap; }
.status-paid { background: #dcefe2; color: #176038; }
.status-pending { background: #fff0c2; color: #765214; }
.status-neutral { background: #e9eceb; color: #56635e; }
.order-schedule { display: flex; align-items: center; gap: 18px; padding: 0 0 20px; border-bottom: 1px solid #e1e8e3; }
.order-date-stamp { width: 76px; flex: 0 0 76px; min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: #eaf2ec; border-radius: 5px; color: #215740; }
.order-date-stamp span { font: 700 12px/1.3 Arial, sans-serif; text-transform: uppercase; }
.order-date-stamp strong { font: 750 34px/1 Arial, sans-serif; }
.order-time-copy { display: grid; min-width: 0; gap: 6px; }
.order-time-copy > strong { font-size: 16px; line-height: 1.4; }
.order-time-range { font: 750 25px/1.2 Arial, sans-serif; color: #204d3b; }
.order-time-copy small { color: #657c70; font: 400 12px/1.4 Arial, sans-serif; overflow-wrap: anywhere; }
.order-facts { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 14px 28px; padding: 18px 0; margin: 0; }
.order-facts > div { min-width: 0; }
.order-facts dt { font-size: 12px; font-weight: 500; color: #6d8076; margin-bottom: 6px; }
.order-facts dd { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.order-bottom { border-top: 1px solid #e1e8e3; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.account-order .order-note { margin: 0; font-size: 13px; line-height: 1.6; color: #697c71; }
body.account-page .account-reschedule, body.account-page .account-retry { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 16px; border: 1px solid #256549; background: #edf5ef; color: #20573e; border-radius: 4px; cursor: pointer; font: 700 14px/1.4 Arial, sans-serif; flex-shrink: 0; }
.account-reschedule:hover, .account-retry:hover { background: #dbece0; }
.account-reschedule img, .account-retry img { width: 19px; height: 19px; }
.name-order-title { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.name-order-title > img { width: 30px; height: 30px; flex: 0 0 30px; opacity: .65; }
.name-order-title h3 { margin: 0; }
.name-order-brief { border-top: 1px solid #e1e8e3; padding: 14px 0; }
.name-order-brief summary { color: #38654d; font-size: 14px; font-weight: 700; cursor: pointer; }
.name-order-brief p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; color: #5c7064; }
.anna-contact-area { margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid #bfd2c5; }
.anna-contact-area h3 { margin: 0 0 8px; font-size: 20px; }
.anna-contact-area > p { color: #60796b; font-size: 14px; line-height: 1.65; margin: 0 0 16px; max-width: 720px; }
.anna-contact-links { display: grid; grid-template-columns: .85fr 1fr 1.3fr; gap: 12px; }
.anna-contact-link { min-width: 0; min-height: 78px; padding: 16px; border: 1px solid transparent; border-radius: 5px; display: flex; align-items: center; gap: 12px; text-align: left; text-decoration: none; cursor: pointer; font-family: Arial, sans-serif; transition: border-color .15s, background .15s; }
.anna-contact-link > img { width: 28px; height: 28px; flex: 0 0 28px; }
.anna-contact-link > span { display: grid; min-width: 0; gap: 5px; }
.anna-contact-link small { font-size: 11px; font-weight: 500; opacity: .8; }
.anna-contact-link strong { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.contact-wechat { background: #23644d; color: #fff; }
.contact-wechat > img { filter: brightness(0) invert(1); }
.contact-wechat:hover { background: #194f3c; }
.contact-instagram { background: #f2e4ed; color: #803665; }
.contact-instagram:hover { border-color: #b57a9f; }
.contact-email { background: #f4eccd; color: #6c581e; }
.contact-email:hover { border-color: #b9a761; }
.anna-contact-area .contact-copy-status { min-height: 0; font-size: 12px; margin-top: 8px; }
.contact-copy-status:empty { display: none; }
.account-empty { display: flex; align-items: center; gap: 16px; min-height: 120px; border-block: 1px solid #d6e1d9; color: #687f70; }
.account-empty img { width: 30px; height: 30px; opacity: .45; }
.account-empty p, .account-load-error p { font-size: 15px; line-height: 1.6; }
.account-load-error { padding: 16px; margin-bottom: 18px; background: #fff0ce; border-radius: 5px; }
.account-page .account-view > .account-panel { border: 0; border-bottom: 1px solid #cadbce; padding: 24px 0; background: transparent; box-shadow: none; }
.account-page .account-view > .account-panel:first-child { padding-top: 0; }
.account-page .account-view > .account-panel:last-child { border-bottom: 0; }
.account-page .account-view .account-panel h2 { font-size: 21px; }
.account-page .account-form > button { justify-self: start; min-height: 44px; padding: 12px 20px; }
.account-page #profileForm > .form-field { max-width: 500px; width: 100%; }
.account-signed-in { display: flex; gap: 12px; align-items: center; color: #5c7665; padding-bottom: 20px; border-bottom: 1px solid #cbdccf; overflow-wrap: anywhere; }
.account-signed-in img { flex: 0 0 22px; }
.account-page .account-avatar { flex-shrink: 0; }
.account-page .account-id { display: none; }
.account-page .stats-grid .stat-item { min-width: 0; }
.account-page .stats-grid .stat-item strong { font-size: 28px; overflow-wrap: anywhere; }
.account-page .stats-grid .stat-item:last-child strong { font-size: 20px; }
.account-reschedule-dialog label { font-size: 14px; font-weight: 700; }
.account-reschedule-dialog .reschedule-actions { display: flex; justify-content: flex-end; gap: 12px; }
.account-reschedule-dialog .reschedule-back { background: transparent; color: #285c40; }
.account-reschedule-dialog button:disabled { opacity: .5; cursor: not-allowed; }
.account-reschedule-dialog .reschedule-status:empty { display: none; }
@media (max-width: 850px) {
  .account-order-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .account-page .page-main { width: 100%; padding: 0 18px 50px; }
  .account-page .page-intro { padding: 24px 0 20px; }
  .account-page .page-title { font-size: 30px; }
  .account-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
  body.account-page .account-tabs button { justify-content: flex-start; min-height: 48px; padding: 11px; gap: 9px; font-size: 13px; background: #e7eee8; }
  .account-tabs button img { width: 18px; height: 18px; flex-basis: 18px; }
  .account-section-heading { margin-bottom: 16px; }
  .account-section-heading h2 { font-size: 20px; }
  .account-order { padding: 18px; border-left-width: 3px; }
  .account-order h3 { font-size: 22px; }
  .order-schedule { gap: 14px; padding-bottom: 17px; }
  .order-date-stamp { width: 62px; flex-basis: 62px; min-height: 80px; }
  .order-date-stamp strong { font-size: 30px; }
  .order-time-copy > strong { font-size: 14px; }
  .order-time-range { font-size: 22px; }
  .order-facts { gap: 18px; }
  .order-facts dd { font-size: 14px; }
  .order-bottom { align-items: flex-start; flex-direction: column; gap: 14px; }
  .account-reschedule { width: 100%; }
  .anna-contact-links { grid-template-columns: 1fr; gap: 10px; }
  .anna-contact-link { min-height: 74px; padding: 15px 18px; }
  .anna-contact-link strong { font-size: 15px; }
  .account-page .account-avatar-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .account-page .account-avatar-picker button { aspect-ratio: 1; min-width: 0; }
}
.pending-order-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.pending-order-actions .account-reschedule { width:auto; }
.pending-order-actions .pending-cancel { background:transparent; color:#63736a; border:1px solid #c6d5cc; border-radius:5px; padding:11px 16px; min-height:44px; cursor:pointer; }
.account-payment-dialog { box-sizing:border-box; width:min(570px,calc(100% - 32px)); padding:26px; }
.payment-dialog-header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; }
.service-dialog .payment-dialog-close { padding:0; width:36px; height:36px; min-height:36px; background:transparent; border:0; color:#536b5f; font-size:26px; }
.payment-booking-summary { display:flex; flex-wrap:wrap; gap:8px 18px; padding:16px 0; border-top:1px solid #dce6df; border-bottom:1px solid #dce6df; font-size:15px; }
.payment-booking-summary span { color:#63766a; }
.payment-dialog-consent { display:flex; gap:10px; align-items:flex-start; margin:20px 0 26px; font:400 13px/1.6 Arial,sans-serif; }
.service-dialog .payment-dialog-consent input { width:18px; height:18px; min-height:18px; flex:0 0 18px; margin:2px 0; }
.account-payment-dialog .payment-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.account-payment-dialog p { font:400 14px/1.6 Arial,sans-serif; }
.account-payment-dialog button:disabled { opacity:.5; cursor:not-allowed; }
.account-payment-dialog .payment-dialog-hint { color:#6a735f; font-size:12px; }
.account-payment-dialog a { color:#185c43; font-size:13px; }
@media(max-width:520px) { .account-payment-dialog { padding:20px; } .account-payment-dialog .payment-actions { grid-template-columns:1fr; } .payment-dialog-header h2 { font-size:21px; } }
@media (max-width: 360px) {
  .account-page .page-main { padding-left: 14px; padding-right: 14px; }
  body.account-page .account-tabs button { font-size: 12px; gap: 7px; padding: 10px 8px; }
  .account-order { padding: 15px; }
  .order-status { gap: 8px; font-size: 12px; }
  .order-status > b { padding-left: 8px; font-size: 13px; }
  .order-time-range { font-size: 20px; }
  .order-date-stamp { width: 54px; flex-basis: 54px; }
  .contact-email strong { font-size: 13px; }
}