:root { color-scheme: light; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color: #17231f; background: #f2f5f3; }
* { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; background: #f2f5f3; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.account-center { width: min(100%, 680px); min-height: 100vh; margin: 0 auto; padding: 0 0 calc(36px + env(safe-area-inset-bottom)); background: #fff; }
.account-topbar { position: sticky; z-index: 8; top: 0; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; min-height: 72px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; border-bottom: 1px solid #e4e9e6; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.account-topbar > div { min-width: 0; text-align: center; }
.account-topbar span { display: block; color: #829088; font-size: 11px; }
.account-topbar h1 { margin: 2px 0 0; font-size: 18px; line-height: 1.2; letter-spacing: 0; }
.account-icon-button { display: inline-grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid #dce3df; border-radius: 6px; color: #25332e; background: #fff; cursor: pointer; text-decoration: none; }
.account-icon-button svg { width: 20px; height: 20px; }
.account-profile-band { display: grid; grid-template-columns: 64px minmax(0,1fr) 42px; gap: 14px; align-items: center; padding: 24px 20px 28px; color: #fff; background: #11251e; }
.account-avatar { display: grid; width: 64px; height: 64px; place-items: center; overflow: hidden; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; background: #2f6c58; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-avatar svg { width: 30px; height: 30px; }
.account-profile-copy { min-width: 0; }
.account-profile-copy span, .account-profile-copy small { display: block; color: #b8c9c2; font-size: 12px; }
.account-profile-copy strong { display: block; margin: 4px 0 6px; overflow: hidden; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.account-icon-button.inverse { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.08); }
.account-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: -12px 14px 18px; border: 1px solid #e2e8e4; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(17,37,30,.08); }
.account-stats div { min-width: 0; padding: 14px 4px 12px; text-align: center; }
.account-stats div + div { border-left: 1px solid #edf0ee; }
.account-stats svg { width: 16px; height: 16px; color: #3f8c70; }
.account-stats strong, .account-stats span { display: block; }
.account-stats strong { margin: 4px 0 2px; font-size: 20px; }
.account-stats span { overflow: hidden; color: #7b8981; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-tabs { position: sticky; z-index: 7; top: calc(72px + env(safe-area-inset-top)); display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #edf0ee; border-bottom: 1px solid #dfe5e1; background: #fff; }
.account-tabs button { position: relative; display: grid; min-height: 62px; padding: 8px 4px; place-items: center; gap: 3px; border: 0; color: #829088; background: transparent; cursor: pointer; }
.account-tabs button::after { position: absolute; right: 18%; bottom: -1px; left: 18%; height: 2px; background: transparent; content: ""; }
.account-tabs button.active { color: #167e60; }
.account-tabs button.active::after { background: #167e60; }
.account-tabs svg { width: 19px; height: 19px; }
.account-tabs span { font-size: 12px; }
.account-tabs b { position: absolute; top: 6px; left: calc(50% + 10px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; color: #fff; background: #e54b4b; font-size: 10px; line-height: 17px; }
.account-tab-panel { display: none; padding: 22px 16px; }
.account-tab-panel.active { display: block; }
.account-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.account-section-head h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.account-section-head span { display: block; margin-top: 3px; color: #849189; font-size: 11px; }
.account-section-head select { max-width: 112px; height: 34px; padding: 0 28px 0 10px; border: 1px solid #dce3df; border-radius: 5px; color: #425149; background: #fff; font-size: 12px; }
.account-list { display: grid; gap: 10px; }
.account-order-item, .account-history-item, .account-learning-item { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 12px; overflow: hidden; border: 1px solid #e1e7e3; border-radius: 8px; color: inherit; background: #fff; text-decoration: none; }
.account-order-item > img, .account-history-item > img, .account-learning-item > img { width: 84px; height: 100%; min-height: 112px; object-fit: cover; }
.account-item-copy { min-width: 0; padding: 12px 12px 8px 0; }
.account-item-copy > span, .account-item-copy > small { display: block; overflow: hidden; color: #849189; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-item-copy > strong { display: -webkit-box; margin: 6px 0; overflow: hidden; font-size: 15px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.account-item-copy > div { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.account-item-copy > div b { font-size: 16px; }
.account-order-item > footer { grid-column: 1 / -1; display: flex; min-height: 38px; align-items: center; justify-content: flex-end; padding: 6px 12px; border-top: 1px solid #edf0ee; }
.account-order-item > footer button, .account-order-item > footer span, .account-service-item footer button { border: 0; color: #167e60; background: transparent; font-size: 12px; cursor: pointer; }
.account-order-item > footer span { color: #8a958f; cursor: default; }
.account-status { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 4px; color: #56645d; background: #edf1ef; font-size: 11px; }
.account-status.paid, .account-status.claimed, .account-status.completed { color: #126c50; background: #def3e9; }
.account-status.pending, .account-status.reviewing, .account-status.refunding { color: #9a5a10; background: #fff0d7; }
.account-status.rejected, .account-status.failed { color: #b42e2e; background: #fde6e6; }
.account-service-policy { margin-bottom: 14px; padding: 14px; border: 1px solid #dce6e1; border-left: 3px solid #278266; border-radius: 6px; background: #f5faf7; }
.account-service-policy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-service-policy-head span { color: #176c54; font-size: 13px; font-weight: 700; }
.account-service-policy-head b { color: #4e6058; font-size: 11px; font-weight: 600; }
.account-service-policy p { margin: 8px 0 0; color: #617069; font-size: 12px; line-height: 1.65; }
.account-service-policy > div:last-child { display: grid; margin-top: 10px; gap: 4px; color: #7b8981; font-size: 11px; line-height: 1.5; }
.account-service-policy.compact { margin: 0; padding: 11px 12px; }
.account-service-policy.compact .account-service-policy-head { align-items: flex-start; flex-direction: column; gap: 3px; }
.account-service-policy.compact p { margin-top: 6px; }
.account-history-item { position: relative; align-items: stretch; min-height: 106px; }
.account-history-item .account-item-copy { padding-right: 74px; }
.account-history-item .account-item-copy i { display: block; height: 3px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: #e6ebe8; }
.account-history-item .account-item-copy i b { display: block; height: 100%; background: #3f9b78; }
.account-history-item > em { position: absolute; right: 12px; bottom: 14px; color: #167e60; font-size: 11px; font-style: normal; }
.account-learning-item { position: relative; align-items: stretch; min-height: 106px; }
.account-learning-item .account-item-copy { padding-right: 74px; }
.account-learning-item .account-item-copy i { display: block; height: 3px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: #e6ebe8; }
.account-learning-item .account-item-copy i b { display: block; height: 100%; background: #3f7fb0; }
.account-learning-item > em { position: absolute; right: 12px; bottom: 14px; color: #167e60; font-size: 11px; font-style: normal; }
.account-coupon-item { position: relative; display: grid; grid-template-columns: 104px minmax(0,1fr); min-height: 126px; overflow: hidden; border: 1px solid #e1e7e3; border-radius: 8px; background: #fff; }
.account-coupon-item > div { display: grid; align-content: center; padding: 16px; color: #fff; background: #d9483d; }
.account-coupon-item > div strong { font-size: 24px; }
.account-coupon-item > div span { margin-top: 5px; font-size: 10px; }
.account-coupon-item > section { min-width: 0; padding: 16px 74px 14px 14px; }
.account-coupon-item h3 { margin: 4px 0 9px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.account-coupon-item small, .account-coupon-item p { color: #849189; font-size: 10px; }
.account-coupon-item p { margin: 0 0 8px; }
.account-coupon-item code { font-size: 10px; }
.account-coupon-item > .account-status { position: absolute; top: 12px; right: 12px; }
.account-coupon-item.redeemed, .account-coupon-item.expired, .account-coupon-item.cancelled { filter: grayscale(.7); opacity: .72; }
.account-service-item { padding: 16px; border: 1px solid #e1e7e3; border-radius: 8px; background: #fff; }
.account-service-item > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.account-service-item header span, .account-service-item header strong { display: block; }
.account-service-item header div > span { color: #849189; font-size: 10px; }
.account-service-item header div > strong { margin-top: 5px; font-size: 15px; }
.account-service-item > p { margin: 13px 0; color: #4d5b54; font-size: 13px; line-height: 1.6; }
.account-service-item blockquote { display: grid; gap: 4px; margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid #3f8c70; color: #47554e; background: #eff7f3; font-size: 12px; }
.account-service-timeline { display: grid; gap: 0; padding: 4px 0; }
.account-service-timeline > div { display: grid; grid-template-columns: 13px 1fr; gap: 9px; min-height: 48px; }
.account-service-timeline i { position: relative; width: 9px; height: 9px; margin-top: 4px; border: 2px solid #3f8c70; border-radius: 50%; }
.account-service-timeline i::after { position: absolute; top: 8px; left: 2px; width: 1px; height: 36px; background: #dce6e1; content: ""; }
.account-service-timeline > div:last-child i::after { display: none; }
.account-service-timeline strong, .account-service-timeline small { display: block; }
.account-service-timeline strong { font-size: 12px; }
.account-service-timeline small { margin-top: 3px; color: #8b9791; font-size: 10px; }
.account-service-item > footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #edf0ee; color: #8b9791; font-size: 10px; }
.account-empty, .account-state, .account-login-required { display: grid; min-height: 260px; padding: 40px 24px; place-items: center; align-content: center; gap: 10px; text-align: center; }
.account-empty { min-height: 220px; border: 1px dashed #d8e1dc; border-radius: 8px; }
.account-empty-action { display: inline-flex; min-height: 38px; padding: 0 14px; align-items: center; justify-content: center; border: 1px solid #167e60; border-radius: 5px; color: #167e60; background: #fff; cursor: pointer; font-size: 12px; text-decoration: none; }
.account-empty-action:hover { color: #fff; background: #167e60; }
.account-empty svg, .account-state svg, .account-login-required > svg { width: 34px; height: 34px; color: #57937d; }
.account-empty span, .account-login-required p { margin: 0; color: #849189; font-size: 12px; }
.account-login-required h2 { margin: 5px 0 0; }
.account-primary-button, .account-secondary-button { display: inline-flex; min-height: 42px; padding: 0 18px; align-items: center; justify-content: center; border: 1px solid #167e60; border-radius: 6px; color: #fff; background: #167e60; cursor: pointer; text-decoration: none; }
.account-secondary-button { border-color: #d6dfda; color: #3e4d45; background: #fff; }
.account-modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; padding: 18px; place-items: center; background: rgba(13,25,20,.58); }
.account-modal { width: min(100%, 480px); overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.account-modal > header, .account-modal > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.account-modal > header { border-bottom: 1px solid #e6ebe8; }
.account-modal > header span { color: #849189; font-size: 10px; }
.account-modal > header h2 { margin: 3px 0 0; font-size: 18px; }
.account-modal > footer { justify-content: flex-end; border-top: 1px solid #e6ebe8; }
.account-modal-body { display: grid; gap: 16px; max-height: 66vh; overflow-y: auto; padding: 18px; }
.account-modal-body label { display: grid; gap: 7px; color: #4d5b54; font-size: 12px; }
.account-modal-body label small { color: #8b9791; font-size: 10px; }
.account-modal-body input, .account-modal-body select, .account-modal-body textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #d6dfda; border-radius: 5px; color: #17231f; background: #fff; outline: 0; }
.account-modal-body input:focus, .account-modal-body select:focus, .account-modal-body textarea:focus { border-color: #3c9572; box-shadow: 0 0 0 3px rgba(60,149,114,.12); }
.account-modal-body textarea { min-height: 112px; resize: vertical; }
.account-modal-body input:disabled { color: #829088; background: #f1f4f2; }
.account-confirm-message { margin: 0; padding: 13px 14px; border: 1px solid #ead8d8; border-radius: 6px; background: #fff8f8; color: #59454a; font-size: 13px; line-height: 1.7; }
.account-confirm-modal > footer { gap: 8px; }
.account-service-order { display: grid; gap: 4px; padding: 12px; border-radius: 6px; background: #f1f6f3; }
.account-service-order span, .account-service-order small { color: #829088; font-size: 10px; }
.account-service-notice { display: grid; grid-template-columns: 18px 1fr; gap: 8px; margin: 0; color: #5a6961; font-size: 11px; line-height: 1.6; }
.account-service-notice svg { width: 17px; height: 17px; color: #2e8967; }
.account-toast-stack { position: fixed; z-index: 50; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.account-toast-stack .toast { max-width: 300px; padding: 11px 14px; border-radius: 6px; color: #fff; background: #183c2f; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 12px; }
.account-toast-stack .toast.error { background: #a62f2f; }
.syzb-account-service-entry { margin-top: 22px; }
.syzb-account-service-entry h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: 0; }
.syzb-account-service-entry a { display: flex; min-height: 72px; padding: 14px 16px; align-items: center; justify-content: space-between; border: 1px solid #e0e7e3; border-radius: 8px; color: inherit; background: #fff; text-decoration: none; }
.syzb-account-service-entry span, .syzb-account-service-entry strong, .syzb-account-service-entry small { display: block; }
.syzb-account-service-entry small { margin-top: 5px; color: #819087; font-size: 11px; }
.syzb-account-service-entry b { color: #167e60; font-size: 12px; }
@media (min-width: 681px) { body { padding: 28px 0; } .account-center { min-height: calc(100vh - 56px); border: 1px solid #e0e6e2; box-shadow: 0 18px 60px rgba(17,37,30,.09); } .account-topbar { top: 0; } }
@media (max-width: 420px) { .account-profile-band { padding-inline: 16px; } .account-stats { margin-inline: 10px; } .account-tab-panel { padding-inline: 12px; } .account-order-item, .account-history-item, .account-learning-item { grid-template-columns: 76px minmax(0,1fr); } .account-order-item > img, .account-history-item > img, .account-learning-item > img { width: 76px; } .account-coupon-item { grid-template-columns: 92px minmax(0,1fr); } .account-coupon-item > div { padding: 12px; } .account-coupon-item > div strong { font-size: 21px; } }
.workspace-bridge-link {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  z-index: 90;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 6px;
  color: #fff;
  background: rgba(15, 45, 85, .88);
  box-shadow: 0 8px 24px rgba(15, 45, 85, .16);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(12px);
}

.workspace-bridge-link:hover { background: #1768e8; }