:root { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: #19263a; background: #f5f7fa; }
* { box-sizing: border-box; letter-spacing: 0; } body { margin: 0; overflow-x: hidden; } button,input,select { font: inherit; }
.account-header { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.account-header > a:first-child { display: flex; align-items: center; gap: 10px; color: #185cbd; text-decoration: none; }.account-header img { width: 48px; height: 34px; object-fit: contain; }.account-back { color: #63738a; text-decoration: none; font-size: 14px; }
.account-layout { max-width: 1180px; min-height: calc(100vh - 68px); display: grid; grid-template-columns: 238px 1fr; gap: 26px; margin: 0 auto; padding: 34px 24px; }
.account-sidebar { align-self: start; background: #fff; border: 1px solid #e3e9f1; border-radius: 8px; overflow: hidden; }
.account-identity { display: grid; justify-items: center; gap: 7px; padding: 28px 20px 22px; border-bottom: 1px solid #edf1f6; }.account-identity > span,.avatar-editor > span { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: #246bd8; color: #fff; font-size: 24px; font-weight: 700; background-position:center;background-size:cover; }.account-identity small { color: #8390a3; }
.account-sidebar nav { padding: 9px; }.account-sidebar nav button { width: 100%; padding: 11px 14px; border: 0; border-radius: 5px; background: transparent; color: #536176; text-align: left; cursor: pointer; }.account-sidebar nav button:hover,.account-sidebar nav button.is-active { color: #1f65ca; background: #edf4ff; }
.account-content { min-width: 0; }.account-section { display: none; min-height: 520px; padding: 30px 34px; border: 1px solid #e3e9f1; border-radius: 8px; background: #fff; }.account-section.is-active { display: block; }.account-section header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #edf1f6; }.account-section h1 { margin: 0; font-size: 23px; }.account-section header p { margin: 8px 0 0; color: #8390a3; font-size: 14px; }
.account-form { display: grid; gap: 24px; }.avatar-editor { display: grid; grid-template-columns: 66px minmax(220px,420px); gap: 18px; align-items: end; }.avatar-editor label,.form-grid label { display: grid; gap: 8px; color: #526076; font-size: 14px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }.account-form input,.account-form select { height: 42px; padding: 0 12px; border: 1px solid #dbe3ee; border-radius: 5px; background: #fff; outline: none; }.account-form input:focus,.account-form select:focus { border-color: #3478df; box-shadow: 0 0 0 3px rgba(52,120,223,.1); }.account-form input:disabled { background: #f5f7fa; color: #8a95a6; }.account-form > button { width: 104px; height: 40px; border: 0; border-radius: 5px; background: #2369d8; color: #fff; cursor: pointer; }.form-status { color: #16825d; font-size: 13px; }
.empty-state { min-height: 270px; display: grid; place-content: center; justify-items: center; gap: 8px; color: #8290a3; }.empty-state strong { color: #4d5d73; }.security-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid #edf1f6; }.security-row div { display: grid; gap: 7px; }.security-row span { color: #8390a3; font-size: 13px; }.security-row a { color: #276bce; text-decoration: none; font-size: 14px; }
.subscription-summary { margin-bottom: 14px; padding: 13px 15px; border-left: 3px solid #2369d8; background: #f4f7fb; color: #394a61; font-size: 14px; }.order-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 12px 4px; border-bottom: 1px solid #edf1f6; }.order-row strong { min-width: 0; overflow-wrap: anywhere; }.order-row span { flex: 0 0 auto; color: #718096; font-size: 13px; }
.subscription-overview { margin-bottom: 20px; padding: 14px 16px; border-left: 3px solid #2369d8; background: #f4f7fb; color: #394a61; font-size: 14px; }.plan-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.plan-item { min-width: 0; display: grid; gap: 12px; padding: 20px; border: 1px solid #e3e9f1; border-radius: 8px; }.plan-item strong { overflow-wrap: anywhere; font-size: 17px; }.plan-item span { color: #718096; font-size: 13px; }.plan-item b { color: #1f2937; font-size: 22px; }.plan-item button { height: 38px; border: 0; border-radius: 5px; background: #2369d8; color: #fff; cursor: pointer; }.plan-item button:disabled { opacity: .55; cursor: wait; }
.model-scope { display: inline-flex; gap: 2px; margin-bottom: 18px; padding: 3px; border: 1px solid #dbe3ee; border-radius: 6px; background: #f5f7fa; }.model-scope button { min-width: 94px; height: 34px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: #657389; cursor: pointer; }.model-scope button.is-active { background: #fff; color: #1f65ca; box-shadow: 0 1px 3px rgba(35,55,80,.12); }.model-list { display: grid; gap: 10px; }.model-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px solid #e3e9f1; border-radius: 6px; }.model-row > div:first-child { min-width: 0; display: grid; gap: 6px; }.model-row strong,.model-row span { overflow-wrap: anywhere; }.model-row span { color: #7b889b; font-size: 13px; }.model-row-actions,.model-form-actions { display: flex; flex: 0 0 auto; gap: 8px; }.model-row-actions button,.model-form-actions button { min-height: 36px; padding: 0 14px; border: 1px solid #d6dfeb; border-radius: 5px; background: #fff; color: #2968c5; cursor: pointer; }.model-row-actions button.is-danger { color: #c2414b; }.model-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid #edf1f6; }.model-form[hidden] { display: none; }.model-form-actions button:first-child { border-color: #2369d8; background: #2369d8; color: #fff; }.checkbox-label { display: flex !important; grid-column: 1 / -1; grid-template-columns: 18px 1fr; align-items: center; }.checkbox-label input { width: 18px; height: 18px; }.preference-divider { margin: 28px 0; border-top: 1px solid #edf1f6; }.account-form h2 { margin: 0; font-size: 17px; }
@media(max-width:760px){.account-header{min-width:0;padding:0 18px}.account-layout{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);padding:18px 12px}.account-sidebar{min-width:0}.account-sidebar nav{display:flex;max-width:100%;overflow-x:auto}.account-sidebar nav button{flex:0 0 auto;white-space:nowrap}.account-identity{display:none}.account-content,.account-section{min-width:0;width:100%}.account-section{padding:24px 18px;overflow:hidden}.form-grid,.plan-list{min-width:0;grid-template-columns:minmax(0,1fr)}.avatar-editor{min-width:0;grid-template-columns:56px minmax(0,1fr)}.avatar-editor>span{width:56px;height:56px}.order-row,.model-row{align-items:flex-start;flex-direction:column;gap:8px}.order-row span{flex:auto}.model-row-actions{width:100%}.model-row-actions button{flex:1}.model-scope{display:flex}.model-scope button{flex:1;min-width:0}}