:root {
    --portal-ink: #243142;
    --portal-muted: #7d8a9e;
    --portal-line: #e7edf3;
    --portal-bg: #f3f6f9;
    --portal-sidebar: #1f2b38;
    --portal-sidebar-soft: #2a3949;
    --portal-teal: #16baaa;
    --portal-blue: #3d82f6;
    --portal-orange: #f3a43b;
    --portal-purple: #8c74e8;
    --portal-radius: 6px;
    font-family: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--portal-ink); background: var(--portal-bg); }
a { color: inherit; }
button, input { font: inherit; }

.portal-layout { min-height: 100vh; display: flex; }
.portal-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 236px; display: flex; flex-direction: column; padding: 0 14px; color: #d8e1eb; background: var(--portal-sidebar); transition: transform .22s ease, width .22s ease; }
.portal-brand { height: 70px; display: flex; align-items: center; gap: 11px; padding: 0 10px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.09); }
.portal-brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; color: #fff; background: var(--portal-teal); font-size: 19px; font-weight: 800; box-shadow: 0 5px 15px rgba(22,186,170,.22); }
.portal-brand-copy strong, .portal-brand-copy small { display: block; }
.portal-brand-copy strong { font-size: 16px; letter-spacing: .1em; }
.portal-brand-copy small { margin-top: 2px; color: #9eacbc; font-size: 11px; }
.portal-sidebar-label { padding: 27px 12px 9px; color: #77889b; font-size: 11px; letter-spacing: .12em; }
.portal-nav { display: grid; gap: 5px; }
.portal-nav-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; color: #aebdcb; border-radius: var(--portal-radius); text-decoration: none; font-size: 13px; transition: color .16s ease, background .16s ease; }
.portal-nav-item i { width: 18px; color: #8394a7; font-size: 17px; }
.portal-nav-item:hover { color: #fff; background: var(--portal-sidebar-soft); }
.portal-nav-item.is-active { color: #fff; background: #2e5361; box-shadow: inset 3px 0 0 var(--portal-teal); }
.portal-nav-item.is-active i { color: #53d7c6; }
.portal-sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; margin-bottom: 20px; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); color: #aebdcb; font-size: 11px; }
.portal-sidebar-foot strong, .portal-sidebar-foot small { display: block; }
.portal-sidebar-foot small { margin-top: 3px; color: #74879a; }
.portal-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #39cf9b; box-shadow: 0 0 0 4px rgba(57,207,155,.12); }
.portal-main { min-width: 0; width: calc(100% - 236px); margin-left: 236px; }
.portal-header { position: sticky; top: 0; z-index: 10; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 3vw, 42px); border-bottom: 1px solid var(--portal-line); background: rgba(255,255,255,.96); }
.portal-header-left, .portal-account, .portal-breadcrumb { display: flex; align-items: center; }
.portal-header-left { gap: 16px; }
.portal-icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 4px; color: #748398; background: transparent; cursor: pointer; }
.portal-icon-button:hover { color: var(--portal-teal); background: #edf8f7; }
.portal-breadcrumb { gap: 9px; color: #9aa7b8; font-size: 12px; }
.portal-breadcrumb i { color: #bdc6d1; font-size: 12px; }
.portal-breadcrumb strong { color: #475669; font-weight: 600; }
.portal-account { gap: 11px; color: #647286; font-size: 12px; }
.portal-account-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #fff; background: #3c8891; font-size: 13px; font-weight: 700; }
.portal-account-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-account form { margin-left: 8px; }
.portal-logout { display: inline-flex; gap: 5px; align-items: center; padding: 6px 0 6px 13px; border: 0; border-left: 1px solid var(--portal-line); color: #8794a6; background: transparent; cursor: pointer; font-size: 12px; }
.portal-logout:hover { color: #f36b58; }
.portal-content { max-width: 1440px; margin: 0 auto; padding: 34px clamp(20px, 3vw, 42px) 62px; }
.page-titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-titlebar-compact { align-items: center; }
.page-titlebar h1 { margin: 7px 0 0; color: #263548; font-size: 27px; font-weight: 700; letter-spacing: -.025em; }
.page-titlebar p { margin: 7px 0 0; color: var(--portal-muted); font-size: 13px; }
.portal-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--portal-teal); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.portal-kicker i { font-size: 14px; }
.pear-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 15px; border: 1px solid transparent; border-radius: var(--portal-radius); cursor: pointer; text-decoration: none; font-size: 13px; transition: filter .16s ease, border-color .16s ease; }
.pear-btn:hover { filter: brightness(.96); }
.pear-btn-primary { color: #fff; background: var(--portal-teal); box-shadow: 0 5px 13px rgba(22,186,170,.18); }
.pear-btn-default { color: #667588; border-color: #dce4eb; background: #fff; }
.pear-btn-outline { min-height: 32px; color: #c7f4ed; border-color: rgba(199,244,237,.45); background: transparent; }
.pear-btn-fluid { width: 100%; margin-top: 10px; }
.portal-alert { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: -10px 0 22px; padding: 0 14px; border-radius: var(--portal-radius); font-size: 13px; }
.portal-alert-success { color: #1b876b; border: 1px solid #bfe9dc; background: #effbf7; }
.invite-banner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 144px; margin-bottom: 31px; padding: 26px 30px; color: #fff; border-radius: 8px; background: #263b4d; box-shadow: 0 12px 26px rgba(31,53,71,.13); }
.invite-banner-main, .invite-banner-side { display: flex; align-items: center; }
.invite-banner-main { gap: 17px; }
.invite-banner-side { gap: 18px; }
.invite-banner-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; color: #6ce2d2; font-size: 22px; }
.invite-banner-label { color: #9fb4c5; font-size: 11px; letter-spacing: .08em; }
.invite-code { margin-top: 4px; color: #fff; font: 700 27px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.invite-banner p { margin: 5px 0 0; color: #aebfce; font-size: 12px; }
.role-badge { padding: 6px 11px; color: #d6f9f2; border: 1px solid rgba(214,249,242,.25); border-radius: 20px; font-size: 11px; white-space: nowrap; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.section-heading h2 { margin: 0; color: #334255; font-size: 17px; }
.section-heading > div > span { display: block; margin-top: 4px; color: #98a4b3; font-size: 12px; }
.date-filter { display: flex; align-items: flex-end; gap: 8px; }
.date-filter label { display: grid; gap: 4px; color: #8b98a8; font-size: 11px; }
.date-filter .layui-input { width: 142px; height: 34px; border-color: #dfe6ed; border-radius: 4px; font-size: 12px; }
.date-filter .pear-btn { height: 34px; min-height: 34px; padding: 0 12px; }
.date-separator { padding-bottom: 8px; color: #9da9b7; font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.metric-card { display: flex; align-items: center; gap: 14px; min-height: 126px; padding: 20px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: #fff; }
.metric-icon { display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px; border-radius: 7px; font-size: 21px; }
.metric-card-teal .metric-icon { color: var(--portal-teal); background: #e7f8f6; }.metric-card-blue .metric-icon { color: var(--portal-blue); background: #ebf2ff; }.metric-card-orange .metric-icon { color: var(--portal-orange); background: #fff5e4; }.metric-card-purple .metric-icon { color: var(--portal-purple); background: #f1edff; }
.metric-card span, .metric-card small { display: block; color: #8c99a9; font-size: 11px; }.metric-card strong { display: block; margin: 5px 0 3px; color: #2b3a4d; font-size: 23px; font-weight: 700; letter-spacing: -.02em; }.metric-card small { color: #abb5c0; }
.portal-panel, .portal-form-panel { border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: #fff; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 23px; border-bottom: 1px solid #edf1f4; }.panel-heading h2 { margin: 0; color: #334255; font-size: 16px; }.panel-heading p { margin: 5px 0 0; color: #97a3b2; font-size: 12px; }.panel-count { color: #9aa7b6; font-size: 12px; white-space: nowrap; }
.portal-table-wrap { overflow-x: auto; }.portal-table { width: 100%; border-collapse: collapse; font-size: 13px; }.portal-table th, .portal-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #f0f3f6; white-space: nowrap; }.portal-table th { color: #9aa6b4; font-size: 11px; font-weight: 600; }.portal-table tbody tr:hover { background: #fbfdfd; }.portal-table tbody tr:last-child td { border-bottom: 0; }.portal-table td strong, .portal-table td small { display: block; }.portal-table td small { margin-top: 3px; color: #a7b1bd; font-size: 11px; }.portal-table code { color: #526477; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }.money { color: #314459; font-weight: 600; }.level-pill, .status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 3px; font-size: 11px; }.level-pill { color: #4179b4; background: #edf5ff; }.status-pill.is-enabled { color: #1b8b70; background: #eaf9f4; }.status-pill.is-disabled { color: #929dab; background: #f2f4f6; }.status-pill i { font-size: 11px; }
.portal-empty { display: grid; justify-items: center; gap: 6px; padding: 54px 20px; color: #9ba7b4; }.portal-empty i { margin-bottom: 4px; color: #c8d1d9; font-size: 32px; }.portal-empty strong { color: #657387; font-size: 14px; }.portal-empty span { font-size: 12px; }.portal-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 17px; border-top: 1px solid #edf1f4; color: #8b98a8; font-size: 12px; }.page-button { display: grid; place-items: center; width: 31px; height: 31px; color: #68788a; border: 1px solid #dfe6ed; border-radius: 4px; background: #fff; text-decoration: none; }.page-button:hover { color: var(--portal-teal); border-color: #97dfd6; }.page-button.is-disabled { pointer-events: none; opacity: .4; }
.portal-form-panel { width: min(690px, 100%); padding: 25px; }.form-panel-heading { display: flex; align-items: center; gap: 13px; padding-bottom: 22px; border-bottom: 1px solid #edf1f4; }.form-panel-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; color: var(--portal-teal); background: #e7f8f6; font-size: 20px; }.form-panel-heading h2 { margin: 0; color: #354457; font-size: 16px; }.form-panel-heading p { margin: 4px 0 0; color: #99a5b2; font-size: 12px; }.portal-form { display: grid; gap: 6px; padding-top: 22px; }.form-field { display: grid; gap: 6px; margin-bottom: 7px; }.form-field label { color: #526174; font-size: 12px; font-weight: 600; }.portal-form .layui-input { height: 40px; border-color: #dfe6ed; border-radius: 4px; font-size: 13px; }.portal-form .layui-input:focus { border-color: #80d5cb !important; box-shadow: 0 0 0 2px rgba(22,186,170,.12); }.field-error, .form-error { color: #df5c4b; font-size: 12px; }.form-error:empty { display: none; }.form-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 5px; padding: 11px 12px; color: #748496; background: #f5f8fa; font-size: 12px; line-height: 1.6; }.form-note i { color: var(--portal-teal); font-size: 16px; }.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 15px; padding-top: 17px; border-top: 1px solid #edf1f4; }
.input-with-icon { position: relative; }.input-with-icon i { position: absolute; top: 12px; left: 12px; z-index: 1; color: #9eabb8; font-size: 16px; }.input-with-icon .layui-input { padding-left: 38px; }
.portal-auth-shell { background: #eef3f5; }.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(370px, 44%) minmax(380px, 510px); justify-content: center; align-items: center; gap: 0; padding: 42px 28px; }.login-aside { display: flex; flex-direction: column; min-height: 570px; padding: 50px 54px; color: #e7f5f3; background: #243c4b; }.login-aside-brand { display: flex; align-items: center; gap: 11px; }.login-aside-brand > span:last-child strong, .login-aside-brand > span:last-child small { display: block; }.login-aside-brand strong { font-size: 16px; letter-spacing: .1em; }.login-aside-brand small { margin-top: 2px; color: #a8c2c8; font-size: 11px; }.login-aside-copy { margin: auto 0; }.login-aside-copy .portal-kicker { color: #6ce2d2; }.login-aside-copy h1 { margin: 14px 0 16px; font-size: 34px; line-height: 1.32; letter-spacing: -.04em; }.login-aside-copy h1 em { color: #63dfcf; font-style: normal; }.login-aside-copy p { max-width: 315px; margin: 0; color: #a9bdc8; font-size: 13px; line-height: 1.8; }.login-aside-foot { display: flex; align-items: center; gap: 9px; color: #9bb5bd; font-size: 12px; }.login-card { min-height: 570px; padding: 74px 62px 45px; background: #fff; box-shadow: 0 16px 40px rgba(32,54,70,.12); }.login-card-heading h2 { margin: 9px 0 5px; color: #29394b; font-size: 27px; }.login-card-heading p { margin: 0 0 31px; color: #8b98a7; font-size: 13px; }.login-card-foot { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 92px; color: #b0bac5; font-size: 11px; }.login-card-foot i { color: var(--portal-teal); }
@media (max-width: 1020px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.login-page { grid-template-columns: minmax(330px, 440px) minmax(360px, 470px); }.login-aside { padding: 44px 38px; }.login-card { padding-left: 42px; padding-right: 42px; } }
@media (max-width: 760px) { .portal-sidebar { transform: translateX(-100%); }.portal-sidebar.is-open { transform: translateX(0); box-shadow: 8px 0 25px rgba(24,42,57,.2); }.portal-main { width: 100%; margin-left: 0; }.portal-header { padding: 0 16px; }.portal-account-name { display: none; }.portal-content { padding: 27px 16px 48px; }.page-titlebar, .section-heading { align-items: flex-start; flex-direction: column; }.date-filter { width: 100%; flex-wrap: wrap; }.date-filter .layui-input { width: 100%; }.date-filter label { flex: 1 1 160px; }.date-filter .pear-btn { align-self: flex-end; }.date-separator { display: none; }.invite-banner { align-items: flex-start; flex-direction: column; padding: 22px; }.invite-banner-side { width: 100%; justify-content: space-between; }.login-page { display: block; padding: 0; }.login-aside { min-height: 290px; padding: 30px 28px; }.login-aside-copy { margin: 38px 0 28px; }.login-aside-copy h1 { margin: 10px 0; font-size: 27px; }.login-card { min-height: auto; padding: 42px 28px 33px; box-shadow: none; }.login-card-foot { margin-top: 46px; }.portal-form-panel { padding: 20px; } }
@media (max-width: 450px) { .metric-grid { grid-template-columns: 1fr; }.page-titlebar h1 { font-size: 24px; }.portal-breadcrumb { display: none; }.portal-account form { margin-left: 0; }.portal-table th, .portal-table td { padding-left: 13px; padding-right: 13px; }.invite-code { font-size: 23px; }.form-actions { justify-content: stretch; }.form-actions .pear-btn { flex: 1; } }