:root {
    --ink: #142126;
    --muted: #607078;
    --line: #dce6ea;
    --paper: #ffffff;
    --soft: #f5f8f7;
    --deep: #102f36;
    --teal: #1f8a8a;
    --cyan: #1b83b6;
    --green: #4f8d52;
    --amber: #b98324;
    --coral: #c65f4b;
    --shadow: 0 18px 48px rgba(17, 45, 54, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    color: var(--ink);
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.65;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(213, 227, 230, .92);
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(20, 56, 65, .07);
}

.site-header-v1 {
    border-bottom: 1px solid rgba(217, 230, 232, .86);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 28px rgba(17, 45, 54, .06);
}

.site-header-v1 .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 92px;
    gap: clamp(24px, 3vw, 38px);
    width: min(1180px, calc(100% - 32px));
    max-width: calc(100% - 32px);
}

.site-header-v1 .logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 258px;
    gap: 15px;
}

.site-header-v1 .logo-img {
    width: 166px;
    height: 60px;
    object-fit: contain;
}

.site-header-v1 .logo-sub {
    border-left: 1px solid rgba(0, 111, 115, .2);
    padding-left: 13px;
    color: #45686d;
    line-height: 1.35;
}

.site-header-v1 .logo-sub span {
    display: block;
}

.site-header-v1 .logo-sub-title {
    font-size: 18px;
    font-weight: 800;
}

.site-header-v1 .logo-sub-meta {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
}

.site-header-v1 .nav-v1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 0;
    gap: 15px;
    color: #243d44;
    font-size: 15px;
    padding-left: 0;
    white-space: nowrap;
    transform: translateY(10px);
}

.site-header-v1 .nav-v1-item {
    position: relative;
}

.site-header-v1 .nav-v1-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 92px;
    color: #243d44;
    font-weight: 800;
}

.site-header-v1 .nav-v1-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 24px;
    left: 0;
    height: 2px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}

.site-header-v1 .nav-v1-item.has-dropdown .nav-v1-link span::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    opacity: .56;
    transform: translateY(-2px);
    transition: transform .2s ease;
}

.site-header-v1 .nav-v1-item:hover .nav-v1-link,
.site-header-v1 .nav-v1-item:focus-within .nav-v1-link {
    color: var(--teal);
}

.site-header-v1 .nav-v1-item:hover .nav-v1-link::after,
.site-header-v1 .nav-v1-item:focus-within .nav-v1-link::after {
    transform: scaleX(1);
}

.site-header-v1 .nav-v1-item:hover .nav-v1-link span::after,
.site-header-v1 .nav-v1-item:focus-within .nav-v1-link span::after {
    transform: translateY(-2px) rotate(180deg);
}

.site-header-v1 .nav-v1-dropdown {
    position: absolute;
    top: calc(100% - 8px);
    left: 50%;
    z-index: 90;
    width: min(660px, calc(100vw - 40px));
    overflow: visible;
    border: 1px solid rgba(31, 138, 138, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .99);
    box-shadow: 0 18px 46px rgba(17, 45, 54, .13);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity .18s ease, transform .18s ease;
}

.site-header-v1 .nav-v1-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(31, 138, 138, .18);
    border-left: 1px solid rgba(31, 138, 138, .18);
    background: #ffffff;
    transform: translateX(-50%) rotate(45deg);
}

.site-header-v1 .nav-v1-dropdown.is-compact {
    width: min(280px, calc(100vw - 40px));
}

.site-header-v1 .nav-v1-dropdown.is-two-col {
    width: min(500px, calc(100vw - 40px));
}

.site-header-v1 .nav-v1-dropdown.is-wide {
    width: min(940px, calc(100vw - 40px));
}

.site-header-v1 .nav-v1-dropdown.is-certification {
    width: min(920px, calc(100vw - 40px));
}

.site-header-v1 .nav-v1-item:hover .nav-v1-dropdown,
.site-header-v1 .nav-v1-item:focus-within .nav-v1-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.site-header-v1 .nav-v1-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 50px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(223, 234, 232, .92);
    background:
        linear-gradient(135deg, rgba(246, 251, 249, .98), rgba(255, 255, 255, .98));
    border-radius: 8px 8px 0 0;
}

.site-header-v1 .nav-v1-dropdown-head strong {
    color: #17363d;
    font-size: 16px;
    line-height: 1.2;
}

.site-header-v1 .nav-v1-dropdown-head span {
    border-radius: 999px;
    padding: 4px 9px;
    background: rgba(31, 138, 138, .09);
    color: #4d7779;
    font-size: 11px;
    font-weight: 700;
}

.site-header-v1 .nav-v1-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 7px;
    padding: 10px;
    border-radius: 0 0 8px 8px;
    background: #ffffff;
}

.site-header-v1 .nav-v1-dropdown-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 12px;
    padding: 10px;
    border-radius: 0 0 8px 8px;
    background: #ffffff;
}

.site-header-v1 .nav-v1-dropdown.is-compact .nav-v1-dropdown-grid {
    grid-template-columns: 1fr;
}

.site-header-v1 .nav-v1-dropdown.is-two-col .nav-v1-dropdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-header-v1 .nav-v1-dropdown.is-wide .nav-v1-dropdown-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-header-v1 .nav-v1-dropdown.is-certification .nav-v1-dropdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0;
}

.site-header-v1 .nav-v1-dropdown-grid a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 9px 34px 9px 13px;
    background: #ffffff;
    color: #243d44;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.site-header-v1 .nav-v1-dropdown-grid a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .36;
    transform: translateY(-50%);
}

.site-header-v1 .nav-v1-dropdown-grid a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    opacity: .3;
    transform: translateY(-50%) rotate(45deg);
}

.site-header-v1 .nav-v1-dropdown-grid a:hover,
.site-header-v1 .nav-v1-dropdown-grid a:focus {
    border-color: rgba(31, 138, 138, .2);
    background: #f0f8f7;
    color: var(--teal);
    transform: translateY(-1px);
}

.site-header-v1 .nav-v1-dropdown-grid strong {
    overflow: visible;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 14px;
    color: inherit;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
    word-break: keep-all;
}

.site-header-v1 .nav-v1-featured-links {
    display: grid;
    align-content: start;
    gap: 8px;
    border-left: 1px dashed rgba(31, 138, 138, .2);
    padding-left: 12px;
}

.site-header-v1 .nav-v1-featured-links a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 45px;
    border: 1px solid rgba(31, 138, 138, .14);
    border-radius: 8px;
    padding: 9px 32px 9px 13px;
    background: linear-gradient(135deg, rgba(242, 250, 249, .96), rgba(255, 255, 255, .98));
    color: #173f46;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.site-header-v1 .nav-v1-featured-links a::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--teal);
    opacity: .52;
}

.site-header-v1 .nav-v1-featured-links a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    opacity: .32;
    transform: translateY(-50%) rotate(45deg);
}

.site-header-v1 .nav-v1-featured-links a:hover,
.site-header-v1 .nav-v1-featured-links a:focus {
    border-color: rgba(31, 138, 138, .28);
    background: #eef8f7;
    color: var(--teal);
    transform: translateY(-1px);
}

.site-header-v1 .nav-v1-featured-links strong {
    overflow: visible;
    color: inherit;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    word-break: keep-all;
}

.site-header-v1 .nav-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    gap: 10px;
    min-width: 0;
    min-height: 46px;
    padding-left: 64px;
}

.site-header-v1 .search-pill {
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(31, 138, 138, .22);
    border-radius: 999px;
    background: #ffffff;
    color: #1f7f7f;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(17, 45, 54, .06);
    transform: translate(-8px, -50%);
}

.site-header-v1 .search-pill:hover {
    border-color: rgba(31, 138, 138, .4);
    background: #f2faf9;
    color: var(--teal);
}

.site-header-v1 .search-pill::after {
    display: none;
}

.site-header-v1 .search-lens {
    position: relative;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(currentColor, currentColor) left top / 9px 2px no-repeat,
        linear-gradient(currentColor, currentColor) left top / 2px 9px no-repeat,
        linear-gradient(currentColor, currentColor) right top / 9px 2px no-repeat,
        linear-gradient(currentColor, currentColor) right top / 2px 9px no-repeat,
        linear-gradient(currentColor, currentColor) left bottom / 9px 2px no-repeat,
        linear-gradient(currentColor, currentColor) left bottom / 2px 9px no-repeat,
        linear-gradient(currentColor, currentColor) right bottom / 9px 2px no-repeat,
        linear-gradient(currentColor, currentColor) right bottom / 2px 9px no-repeat;
    transform: none;
}

.site-header-v1 .search-lens::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: transparent;
    opacity: .82;
}

.site-header-v1 .search-lens::after {
    display: none;
}

.site-header-v1 .nav-login,
.site-header-v1 .nav-register,
.site-header-v1 .nav-user-center,
.site-header-v1 .nav-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 999px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.site-header-v1 .nav-login {
    border: 1px solid rgba(31, 138, 138, .88);
    background: linear-gradient(135deg, #1f8a8a, #176f75);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(31, 138, 138, .2);
}

.site-header-v1 .nav-login:hover {
    background: linear-gradient(135deg, #1b7e7e, #105d65);
    box-shadow: 0 14px 30px rgba(31, 138, 138, .25);
}

.site-header-v1 .nav-register {
    border: 1px solid transparent;
    background: transparent;
    color: #1e5f64;
    box-shadow: none;
    padding-inline: 8px;
}

.site-header-v1 .nav-register:hover {
    border-color: transparent;
    background: transparent;
    color: var(--teal);
}

.site-header-v1 .nav-user-greeting {
    overflow: hidden;
    max-width: 180px;
    color: #24484f;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header-v1 .nav-user-center {
    min-height: 38px;
    border: 1px solid rgba(31, 138, 138, .88);
    padding: 0 11px;
    background: linear-gradient(135deg, #1f8a8a, #176f75);
    color: #ffffff;
    font-size: 13px;
    box-shadow: 0 8px 18px rgba(31, 138, 138, .18);
}

.site-header-v1 .nav-user-center:hover {
    background: linear-gradient(135deg, #1b7e7e, #105d65);
    box-shadow: 0 10px 22px rgba(31, 138, 138, .22);
}

.site-header-v1 .nav-logout {
    border: 1px solid transparent;
    background: transparent;
    color: #60787d;
    padding-inline: 6px;
    box-shadow: none;
}

.site-header-v1 .nav-logout:hover {
    color: var(--teal);
}

.site-header-v1 .mobile-menu {
    position: relative;
    display: none;
}

.site-header-v1 .mobile-menu summary {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(31, 138, 138, .18);
    border-radius: 999px;
    background: #f8fbfb;
    color: var(--teal);
    cursor: pointer;
    font-size: 20px;
    font-weight: 900;
    list-style: none;
}

.site-header-v1 .mobile-menu summary::-webkit-details-marker {
    display: none;
}

.site-header-v1 .mobile-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    display: grid;
    width: min(320px, calc(100vw - 28px));
    max-height: 74vh;
    overflow: auto;
    border: 1px solid rgba(31, 138, 138, .16);
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 45, 54, .14);
}

.site-header-v1 .mobile-menu-list {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header-v1 .mobile-menu-list li {
    min-width: 0;
}

.site-header-v1 .mobile-menu-panel a {
    display: flex;
    align-items: center;
    min-height: 38px;
    border-radius: 7px;
    padding: 0 12px;
    color: #36515a;
    font-size: 13px;
    font-weight: 800;
}

.site-header-v1 .mobile-menu-level-1 {
    gap: 1px;
    margin: 0 0 4px 10px;
    padding: 0 0 6px 10px;
    border-left: 1px solid rgba(31, 138, 138, .14);
}

.site-header-v1 .mobile-menu-level-1 a {
    min-height: 32px;
    color: #5e7277;
    font-size: 12px;
    font-weight: 700;
}

.site-header-v1 .mobile-menu-level-1 a::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    background: rgba(31, 138, 138, .48);
}

.site-header-v1 .mobile-menu-panel a:hover {
    background: #eef8f7;
    color: var(--teal);
}

.site-utility {
    display: none;
}

.site-utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    gap: 18px;
}

.site-utility-copy {
    color: #577077;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.site-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 28px;
    padding: 10px 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-width: 268px;
    gap: 14px;
}

.brand-logo {
    width: 156px;
    height: 52px;
    object-fit: contain;
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    color: #1d444d;
    font-size: 20px;
    line-height: 1.1;
}

.brand small {
    margin-top: 4px;
    color: #668087;
    font-size: 12px;
    font-weight: 700;
}

.main-nav,
.header-actions,
.footer-links,
.hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.main-nav {
    display: block;
    background: #138481;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.main-nav-inner {
    min-height: 46px;
}

.main-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav li {
    position: relative;
}

.main-nav li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 19px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.main-nav li > a::before {
    display: none;
}

.main-nav li.has-children > a::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    opacity: .58;
}

.main-nav li:hover > a,
.main-nav li:focus-within > a {
    background: #0d706f;
    color: #ffffff;
}

.main-nav li:hover > a::before,
.main-nav li:focus-within > a::before {
    transform: none;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 40;
    display: none;
    min-width: 210px;
    transform: translateX(-50%);
    border: 1px solid rgba(31, 138, 138, .16);
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 45, 54, .14);
}

.main-nav li:hover .nav-dropdown,
.main-nav li:focus-within .nav-dropdown {
    display: grid;
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    min-height: 36px;
    border-radius: 7px;
    padding: 0 12px;
    color: #36515a;
    font-size: 13px;
    font-weight: 700;
}

.nav-dropdown a:hover {
    background: #eef8f7;
    color: var(--teal);
}

.ghost-link {
    font-size: 13px;
}

.ghost-link:hover,
.footer-links a:hover {
    color: var(--teal);
}

.header-actions {
    justify-content: flex-end;
    min-width: 0;
    gap: 0;
    justify-self: auto;
    border: 1px solid rgba(207, 223, 226, .92);
    border-radius: 999px;
    padding: 4px;
    background: #f8fbfb;
    box-shadow: 0 8px 20px rgba(25, 65, 72, .05);
}

.header-search {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 54px;
    align-items: center;
    overflow: hidden;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(222, 232, 234, .85);
}

.header-search input {
    width: 100%;
    min-height: 32px;
    border: 0;
    padding: 0 14px;
    background: transparent;
    color: #29464e;
    font: inherit;
    font-size: 12px;
    outline: 0;
}

.header-search button {
    min-height: 30px;
    border: 0;
    border-radius: 999px;
    background: #138481;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.wechat-card {
    position: relative;
}

.wechat-card > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    border: 0;
    border-radius: 999px;
    padding: 0 12px;
    background: transparent;
    color: #176c6b;
    cursor: default;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.wechat-card > button span {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        linear-gradient(90deg, var(--teal) 0 45%, transparent 45% 55%, var(--teal) 55% 100%),
        linear-gradient(var(--teal), var(--teal));
    background-size: 12px 8px, 8px 12px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 2px rgba(31, 138, 138, .16);
}

.wechat-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    display: none;
    width: 170px;
    border: 1px solid rgba(31, 138, 138, .2);
    border-radius: 8px;
    padding: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 45, 54, .16);
}

.wechat-card:hover .wechat-popover,
.wechat-card:focus-within .wechat-popover {
    display: block;
}

.wechat-popover img {
    width: 100%;
    border-radius: 6px;
}

.header-auth-link,
.header-register-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.header-auth-link {
    border-left: 1px solid rgba(214, 227, 230, .92);
    border-radius: 0;
    color: #36515a;
}

.header-auth-link:hover {
    color: var(--teal);
}

.header-register-link {
    background: #d85649;
    color: #ffffff;
}

.header-register-link:hover {
    background: #bd493e;
    color: #ffffff;
}

.primary-link,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.primary-link,
.btn-primary {
    background: var(--teal);
    color: #ffffff;
}

.btn-danger {
    background: var(--coral);
    color: #ffffff;
}

.btn-muted {
    border-color: rgba(171, 185, 190, .72);
    background: #f4f6f6;
    color: #667a80;
}

.btn-muted:hover {
    border-color: rgba(142, 160, 166, .9);
    background: #e9eeee;
    color: #425960;
}

.btn.is-disabled,
.primary-link.is-disabled {
    border-color: rgba(210, 225, 224, 0.9);
    background: #f5f8f7;
    color: #92a1a6;
    cursor: pointer;
}

.btn-secondary {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.hero {
    position: relative;
    min-height: 520px;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: var(--deep);
    color: #ffffff;
}

.hero-media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(16, 47, 54, 0.95), rgba(16, 47, 54, 0.64), rgba(16, 47, 54, 0.18)),
        url("/upload/202306/09/202306091221433621.jpg") center / cover no-repeat;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    padding: 84px 0 110px;
}

.eyebrow {
    margin: 0 0 14px;
    color: #b9e9e3;
    font-size: 14px;
    font-weight: 700;
}

.hero h1 {
    margin: 0;
    font-size: 58px;
    line-height: 1.05;
}

.hero-copy {
    max-width: 620px;
    margin: 22px 0 30px;
    color: #e7f2f1;
    font-size: 19px;
}

.band,
.split-band {
    padding: 76px 0;
}

.band.light {
    background: var(--soft);
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.section-head h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
}

.section-head p {
    max-width: 560px;
    margin: 8px 0 0;
    color: var(--muted);
}

.section-head.compact {
    margin-bottom: 18px;
}

.section-head.compact h2 {
    font-size: 24px;
}

.section-head a {
    color: var(--teal);
    font-weight: 700;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.feature-tile,
.list-panel,
.notice-panel,
.content-card,
.auth-panel,
.admin-panel,
.table-shell {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.feature-tile {
    min-height: 210px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.feature-tile span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 28px;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 800;
}

.feature-tile h3 {
    margin: 0 0 10px;
    font-size: 21px;
}

.feature-tile p,
.notice-panel p,
.content-card p,
.auth-panel p {
    margin: 0;
    color: var(--muted);
}

.accent-cyan span {
    background: var(--cyan);
}

.accent-green span {
    background: var(--green);
}

.accent-amber span {
    background: var(--amber);
}

.accent-coral span {
    background: var(--coral);
}

.split-band {
    background: #fbfcfc;
}

.split-grid,
.two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
    gap: 24px;
}

.list-panel {
    overflow: hidden;
}

.row-link {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 18px;
    min-height: 72px;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
}

.row-link:last-child {
    border-bottom: 0;
}

.row-link span {
    color: var(--muted);
    font-size: 13px;
}

.row-link strong {
    font-size: 16px;
}

.row-link:hover strong {
    color: var(--teal);
}

.action-list {
    display: grid;
    gap: 12px;
}

.action-list a {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: #ffffff;
    font-weight: 700;
}

.notice-panel {
    padding: 24px;
    background: #ffffff;
}

.notice-panel h3 {
    margin: 0 0 12px;
    font-size: 22px;
}

.home-preview-hero {
    position: relative;
    min-height: 548px;
    display: grid;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(245, 250, 249, .9) 38%, rgba(245, 250, 249, .28) 62%, rgba(16, 47, 54, .22) 100%),
        url("/assets/img/home-preview/banner01.jpg") center / cover no-repeat;
}

.home-preview-hero-inner {
    position: relative;
    padding: 86px 0 96px;
}

.home-preview-copy {
    max-width: 640px;
}

.home-preview-copy .eyebrow {
    color: var(--teal);
}

.home-preview-copy h1 {
    margin: 0;
    color: #17333a;
    font-size: 48px;
    line-height: 1.16;
}

.home-preview-copy p {
    max-width: 590px;
    margin: 18px 0 0;
    color: #415f68;
    font-size: 17px;
}

.home-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.home-preview-actions .btn-secondary {
    border-color: rgba(31, 138, 138, .26);
    background: #ffffff;
    color: var(--teal);
}

.home-preview-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.home-preview-kpis div {
    min-width: 150px;
    border: 1px solid rgba(31, 138, 138, .18);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .82);
}

.home-preview-kpis strong,
.home-preview-kpis span {
    display: block;
}

.home-preview-kpis strong {
    color: #17333a;
    font-size: 18px;
    line-height: 1.2;
}

.home-preview-kpis span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.home-preview-services,
.home-preview-courses,
.home-preview-systems,
.home-preview-about {
    padding: 70px 0;
}

.home-preview-section-head h2 {
    color: #17333a;
}

.home-preview-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.home-service-tile {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    min-height: 116px;
    gap: 4px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(17, 45, 54, .08);
}

.home-service-icon {
    grid-row: span 2;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f3f8f8;
}

.home-service-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-service-tile strong,
.home-service-tile small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-service-tile strong {
    color: #1d3940;
    font-size: 18px;
}

.home-service-tile small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.home-service-tile:hover strong {
    color: var(--teal);
}

.home-service-tile.tone-coral,
.home-service-tile.tone-red {
    border-top: 3px solid var(--coral);
}

.home-service-tile.tone-blue,
.home-service-tile.tone-cyan {
    border-top: 3px solid var(--cyan);
}

.home-service-tile.tone-green,
.home-service-tile.tone-teal {
    border-top: 3px solid var(--teal);
}

.home-service-tile.tone-amber {
    border-top: 3px solid var(--amber);
}

.home-service-tile.tone-slate {
    border-top: 3px solid #38525b;
}

.home-preview-band {
    padding: 70px 0;
    background: #f5f8f7;
}

.home-preview-news-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .85fr);
    gap: 22px;
}

.home-preview-panel,
.home-preview-plan {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.home-preview-panel {
    overflow: hidden;
}

.home-preview-panel-head,
.home-preview-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 62px;
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
}

.home-preview-panel-head h2 {
    margin: 0;
    color: #17333a;
    font-size: 24px;
}

.home-preview-panel-head a,
.home-preview-subhead a {
    color: var(--teal);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.home-preview-news-list {
    display: grid;
}

.home-news-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 4px 18px;
    min-height: 92px;
    align-content: center;
    border-bottom: 1px solid var(--line);
    padding: 14px 20px;
}

.home-news-row:last-child,
.home-preview-read-list a:last-child {
    border-bottom: 0;
}

.home-news-row span,
.home-news-row small,
.home-preview-read-list span,
.home-plan-row span,
.home-plan-row small,
.home-preview-job-list small,
.home-preview-resume-panel p,
.home-preview-shop-panel p,
.home-shop-row small {
    color: var(--muted);
    font-size: 13px;
}

.home-news-row span {
    grid-row: span 2;
    padding-top: 2px;
    font-weight: 800;
}

.home-news-row strong,
.home-news-row small,
.home-preview-read-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-news-row strong {
    color: #1d3940;
    font-size: 17px;
    white-space: nowrap;
}

.home-news-row small {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.home-news-row:hover strong,
.home-preview-read-list a:hover strong,
.home-plan-row:hover strong,
.home-preview-job-list a:hover strong,
.home-shop-row:hover strong {
    color: var(--teal);
}

.home-preview-read-list {
    display: grid;
}

.home-preview-read-list a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    min-height: 70px;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
}

.home-preview-read-list strong {
    color: #1d3940;
    white-space: nowrap;
}

.home-preview-course-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.home-preview-course-tabs {
    display: grid;
    gap: 18px;
}

.home-preview-course-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.home-preview-subhead strong {
    color: #17333a;
    font-size: 20px;
}

.home-preview-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.home-course-card {
    display: grid;
    grid-template-rows: 118px auto 42px;
    gap: 10px;
    min-width: 0;
    border: 1px solid #e4ecef;
    border-radius: 8px;
    padding: 10px;
    background: #fbfdfd;
}

.home-course-card img,
.home-course-card > span {
    width: 100%;
    height: 118px;
    border-radius: 6px;
}

.home-course-card img {
    object-fit: cover;
}

.home-course-card > span {
    display: grid;
    place-items: center;
    background: #e9f5f3;
    color: var(--teal);
    font-size: 34px;
    font-weight: 900;
}

.home-course-card strong,
.home-course-card small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-course-card strong {
    color: #1d3940;
    font-size: 16px;
    line-height: 1.35;
    white-space: nowrap;
}

.home-course-card small {
    display: -webkit-box;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-preview-plan {
    display: grid;
    overflow: hidden;
}

.home-plan-row {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
}

.home-plan-row:last-child {
    border-bottom: 0;
}

.home-plan-row strong {
    color: #1d3940;
    font-size: 17px;
}

.home-plan-row small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-preview-talent-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .8fr) minmax(280px, .8fr);
    gap: 18px;
}

.home-preview-job-list {
    display: grid;
}

.home-preview-job-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 3px 16px;
    min-height: 78px;
    align-content: center;
    border-bottom: 1px solid var(--line);
    padding: 12px 20px;
}

.home-preview-job-list a:last-child {
    border-bottom: 0;
}

.home-preview-job-list strong,
.home-preview-job-list small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-preview-job-list strong {
    color: #1d3940;
    white-space: nowrap;
}

.home-preview-job-list span {
    grid-row: span 2;
    align-self: center;
    justify-self: end;
    color: var(--coral);
    font-weight: 900;
}

.home-preview-job-list small {
    white-space: nowrap;
}

.home-preview-resume-panel,
.home-preview-shop-panel {
    padding-bottom: 20px;
}

.home-preview-resume-panel p,
.home-preview-shop-panel p {
    margin: 18px 20px;
}

.home-preview-resume-panel .btn {
    margin-left: 20px;
}

.home-shop-row {
    display: grid;
    gap: 6px;
    margin: 16px 20px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfdfd;
}

.home-shop-row strong {
    color: #1d3940;
}

.home-preview-systems {
    background: #ffffff;
}

.home-preview-system-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.home-system-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 12px;
    align-items: center;
    min-height: 92px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #f9fcfc;
}

.home-system-item img {
    grid-row: span 2;
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.home-system-item strong,
.home-system-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-system-item strong {
    color: #1d3940;
}

.home-system-item span {
    color: var(--muted);
    font-size: 13px;
}

.home-system-item:hover strong {
    color: var(--teal);
}

.home-preview-about {
    background: #f5f8f7;
}

.home-preview-about-inner {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

.home-preview-about-inner img {
    width: 100%;
    aspect-ratio: 1.35;
    border-radius: 8px;
    object-fit: cover;
}

.home-preview-about-inner h2 {
    margin: 0;
    color: #17333a;
    font-size: 30px;
    line-height: 1.28;
}

.home-preview-about-inner p:not(.eyebrow) {
    max-width: 680px;
    margin: 14px 0 0;
    color: var(--muted);
}

.search-hero {
    padding: 58px 0 46px;
    background: linear-gradient(90deg, #102f36, #1f8a8a);
    color: #ffffff;
}

.search-hero h1 {
    margin: 0 0 18px;
    font-size: 36px;
}

.search-page-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    width: min(680px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 8px;
    background: #ffffff;
}

.search-page-form input {
    min-height: 48px;
    border: 0;
    padding: 0 16px;
    color: #1d3940;
    font: inherit;
    outline: 0;
}

.search-page-form .btn {
    min-height: 48px;
    border-radius: 0;
}

.search-page-band {
    padding: 52px 0 72px;
    background: #f5f8f7;
}

.search-results-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.search-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 64px;
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
}

.search-results-head h2 {
    margin: 0;
    color: #17333a;
    font-size: 24px;
}

.search-results-head span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.search-results-list {
    display: grid;
}

.search-result-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    min-height: 88px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 14px 20px;
}

.search-result-row:last-child {
    border-bottom: 0;
}

.search-result-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 999px;
    background: #eef8f7;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.search-result-row strong,
.search-result-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-row strong {
    color: #1d3940;
    font-size: 17px;
    white-space: nowrap;
}

.search-result-row small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.search-result-row:hover strong {
    color: var(--teal);
}

@media (max-width: 1120px) {
    .home-preview-service-grid,
    .home-preview-system-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-preview-course-layout,
    .home-preview-talent-grid {
        grid-template-columns: 1fr;
    }

    .home-preview-plan {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-preview-plan .home-preview-panel-head {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .site-utility-inner {
        align-items: center;
        flex-direction: row;
        gap: 10px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-utility-copy {
        display: none;
    }

    .site-header-main {
        justify-content: space-between;
        flex-wrap: nowrap;
        min-height: auto;
        gap: 14px;
        padding: 8px 0;
    }

    .brand {
        min-width: 0;
    }

    .header-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0;
        width: auto;
        flex-shrink: 0;
    }

    .header-search {
        grid-template-columns: minmax(120px, 190px) 50px;
        width: auto;
    }

    .main-nav-inner {
        overflow-x: auto;
    }

    .main-nav ul {
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
    }

    .nav-dropdown {
        display: none !important;
    }

    .home-preview-hero {
        min-height: auto;
        background:
            linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(245, 250, 249, .9)),
            url("/assets/img/home-preview/banner01.jpg") center / cover no-repeat;
    }

    .home-preview-hero-inner {
        padding: 62px 0 70px;
    }

    .home-preview-copy h1 {
        font-size: 36px;
    }

    .home-preview-news-grid,
    .home-preview-about-inner,
    .home-preview-plan {
        grid-template-columns: 1fr;
    }

    .home-preview-course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-preview-services,
    .home-preview-courses,
    .home-preview-systems,
    .home-preview-about,
    .home-preview-band {
        padding: 48px 0;
    }
}

@media (max-width: 640px) {
    .brand-logo {
        width: 124px;
        height: 42px;
    }

    .brand strong {
        font-size: 16px;
    }

    .brand small {
        font-size: 11px;
    }

    .wechat-popover {
        right: auto;
        left: 0;
    }

    .home-preview-copy h1 {
        font-size: 30px;
    }

    .home-preview-copy p {
        font-size: 15px;
    }

    .home-preview-actions .btn,
    .home-preview-actions .primary-link {
        width: 100%;
    }

    .home-preview-service-grid,
    .home-preview-system-grid,
    .home-preview-course-grid {
        grid-template-columns: 1fr;
    }

    .home-news-row,
    .home-preview-read-list a,
    .home-preview-job-list a {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .home-news-row span {
        grid-row: auto;
    }

    .home-preview-job-list span {
        grid-row: auto;
        justify-self: start;
    }
}

.content-band {
    padding: 56px 0 76px;
    background: var(--soft);
}

.page-title {
    margin-bottom: 24px;
}

.page-title h1 {
    margin: 0;
    font-size: 34px;
}

.page-title p {
    margin: 8px 0 0;
    color: var(--muted);
}

.content-grid,
.product-grid,
.job-grid,
.resume-grid {
    display: grid;
    gap: 16px;
}

.content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-grid,
.job-grid,
.resume-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-card {
    display: grid;
    gap: 10px;
    min-height: 100%;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
}

.product-image,
.detail-media {
    min-height: 180px;
    border-radius: 8px;
    background: #edf4f2;
    overflow: hidden;
}

.product-image img,
.product-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card h2 {
    margin: 0;
    color: #20383f;
    font-size: 18px;
}

.product-card span,
.product-market-price,
.product-stock {
    color: var(--muted);
    font-size: 13px;
}

.content-card {
    padding: 22px;
}

.content-card h2,
.content-card h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.meta {
    color: var(--muted);
    font-size: 13px;
}

.price {
    color: var(--coral);
    font-size: 24px;
    font-weight: 800;
}

.form-grid {
    display: grid;
    gap: 14px;
}

.field {
    display: grid;
    gap: 6px;
}

.field[hidden],
[data-field-key][hidden] {
    display: none !important;
}

.field label {
    color: #38525b;
    font-weight: 700;
}

.field input,
.field select,
.field textarea,
.auth-form input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fbfdfd;
    color: #24434b;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.auth-form input:focus {
    border-color: rgba(31, 138, 138, .62);
    background: #ffffff;
    color: #213f46;
    box-shadow: 0 0 0 3px rgba(31, 138, 138, .1);
    outline: none;
}

.auth-form input.is-valid {
    border-color: rgba(42, 143, 97, .54);
    background: #f7fcfa;
}

.auth-form input.is-invalid {
    border-color: rgba(198, 95, 75, .72);
    background: #fff8f5;
}

.auth-panel {
    width: min(460px, 100%);
    margin: 0 auto;
    padding: 28px;
}

.auth-page,
.member-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
    gap: 28px;
    align-items: start;
    padding: 64px 0 80px;
}

.auth-page-register {
    grid-template-columns: minmax(260px, calc(44% - 60px)) minmax(480px, calc(56% + 60px));
}

.auth-page-register .auth-copy {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    padding-bottom: 78px;
    background:
        linear-gradient(135deg, rgba(31, 138, 138, .055), rgba(255, 255, 255, 0) 44%),
        repeating-linear-gradient(135deg, rgba(31, 138, 138, .045) 0 1px, transparent 1px 18px),
        #ffffff;
}

.auth-page-register .auth-copy > * {
    position: relative;
    z-index: 1;
}

.auth-page-register .auth-copy::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 22px;
    width: 132px;
    height: 92px;
    border: 1px solid rgba(31, 138, 138, .11);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(31, 138, 138, .12) 0 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(0deg, rgba(31, 138, 138, .1) 0 1px, transparent 1px) 0 0 / 22px 22px;
    opacity: .58;
    pointer-events: none;
    z-index: 0;
}

.auth-page-register .auth-wechat-note {
    margin-top: 65px;
}

.auth-copy,
.auth-form,
.member-nav,
.member-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.auth-copy,
.auth-form,
.member-panel {
    min-width: 0;
    padding: 28px;
}

.auth-copy h1,
.member-panel h1 {
    margin: 0 0 12px;
    font-size: 30px;
}

.auth-copy p:last-child,
.member-panel p {
    margin: 0;
    color: var(--muted);
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-page-login {
    position: relative;
    grid-template-columns: minmax(260px, calc(44% - 60px)) minmax(480px, calc(56% + 60px));
    align-items: start;
    gap: 28px;
    padding-top: 42px;
}

.auth-page-login::before {
    content: "";
    position: absolute;
    inset: 24px -24px 40px;
    z-index: -1;
    border: 1px solid rgba(220, 230, 234, .72);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(31, 138, 138, .055), rgba(255, 255, 255, .52) 38%, rgba(242, 248, 247, .9) 100%),
        repeating-linear-gradient(135deg, rgba(31, 138, 138, .035) 0 1px, transparent 1px 18px),
        #f9fcfb;
}

.auth-page-login .auth-copy {
    display: grid;
    align-content: start;
    gap: 18px;
    min-height: 430px;
    border: 0;
    padding: 30px 18px 30px 10px;
    background: transparent;
}

.auth-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-brand-lockup img {
    width: 158px;
    height: 56px;
    object-fit: contain;
}

.auth-brand-lockup span {
    border-left: 1px solid rgba(31, 138, 138, .22);
    padding-left: 13px;
    color: #496970;
    font-size: 13px;
    font-weight: 700;
}

.auth-page-login .auth-copy h1 {
    max-width: 620px;
    margin: 4px 0 0;
    color: #173139;
    font-size: 35px;
    line-height: 1.25;
}

.auth-page-login .auth-copy > p {
    max-width: 560px;
    color: #4d6870;
    font-size: 14px;
    line-height: 1.75;
}

.auth-login-brief {
    display: grid;
    gap: 8px;
    max-width: 520px;
    margin-top: 2px;
}

.auth-login-brief div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 42px;
    border-bottom: 1px solid rgba(210, 226, 229, .86);
}

.auth-login-brief strong {
    color: #1e4f56;
    font-size: 14px;
    font-weight: 900;
}

.auth-login-brief span {
    color: #5d7379;
    font-size: 13px;
    line-height: 1.5;
}

.auth-login-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-login-highlights span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid rgba(31, 138, 138, .2);
    border-radius: 999px;
    padding: 0 13px;
    background: rgba(255, 255, 255, .72);
    color: #285d63;
    font-size: 13px;
    font-weight: 900;
}

.auth-login-service {
    display: grid;
    gap: 0;
    max-width: 620px;
    margin-top: 4px;
    border-top: 1px solid rgba(210, 226, 229, .9);
}

.auth-login-service div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    border-bottom: 1px solid rgba(210, 226, 229, .9);
    padding: 15px 0;
}

.auth-login-service strong {
    color: #1e4f56;
    font-size: 15px;
}

.auth-login-service span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}

.auth-page-login .auth-side-links {
    margin-top: 4px;
    border-top: 1px dashed rgba(210, 226, 229, .9);
    padding-top: 14px;
}

.auth-page-login .auth-wechat-note {
    display: none;
}

.auth-page-login .auth-form {
    position: relative;
    overflow: hidden;
    align-self: start;
    justify-self: end;
    width: calc(100% - 120px);
    gap: 12px;
    border-color: rgba(202, 221, 224, .95);
    padding: 22px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 54px rgba(17, 45, 54, .12);
}

.auth-qr-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
}

.auth-qr-switch {
    position: relative;
    display: block;
    width: 66px;
    height: 66px;
    color: #ee8a21;
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: auto;
}

.auth-qr-switch::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(238, 138, 33, .18);
    border-right: 1px solid rgba(238, 138, 33, .18);
    border-radius: 0 8px 0 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 49%, rgba(255, 150, 0, .13) 50%, rgba(255, 150, 0, .08) 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.auth-qr-switch:hover {
    opacity: .86;
    transform: translate(-1px, 1px);
}

.auth-qr-switch.is-active {
    color: #d36f16;
    opacity: .92;
}

.auth-qr-switch.is-disabled {
    color: #b7c0c3;
    cursor: not-allowed;
    opacity: .72;
}

.auth-qr-switch-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 46px;
    height: 46px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath fill='%23000' d='M0 0h20v20L0 0zM32 0h20v20H32V0zM32 32v-4h-4l-4-4.036V16h4v4h4v4h8v4h-4v4h4v-4h4v-4h8v4h-4v4h4v20L32 32zM36 4v12h12V4H36zM36 36l12 12V36H36zM4 4l12 12V4H4zM39 7h6v6h-6V7zM39 39h6v6l-6-6zM24 8h4v4h-4V8zM24 0h4v4h-4V0zM13 13L7 7h6v6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath fill='%23000' d='M0 0h20v20L0 0zM32 0h20v20H32V0zM32 32v-4h-4l-4-4.036V16h4v4h4v4h8v4h-4v4h4v-4h4v-4h8v4h-4v4h4v20L32 32zM36 4v12h12V4H36zM36 36l12 12V36H36zM4 4l12 12V4H4zM39 7h6v6h-6V7zM39 39h6v6l-6-6zM24 8h4v4h-4V8zM24 0h4v4h-4V0zM13 13L7 7h6v6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.auth-qr-hint {
    position: absolute;
    top: 12px;
    right: 66px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 220px;
    min-height: 27px;
    border: 1px solid rgba(238, 138, 33, .22);
    border-radius: 999px 6px 6px 999px;
    padding: 4px 9px 4px 7px;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    color: #ca6614;
    box-shadow: 0 10px 24px rgba(210, 111, 22, .1);
}

.auth-qr-hint::after {
    content: "";
    position: absolute;
    top: 8px;
    right: -6px;
    width: 10px;
    height: 10px;
    border-top: 1px solid rgba(238, 138, 33, .22);
    border-right: 1px solid rgba(238, 138, 33, .22);
    background: #ffffff;
    transform: rotate(45deg);
}

.auth-qr-hint strong {
    position: relative;
    z-index: 1;
    order: 1;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.auth-qr-arrow {
    position: relative;
    z-index: 1;
    order: 2;
    display: block;
    width: 38px;
    height: 20px;
    margin-left: 2px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none'%3E%3Cpath d='M3 18C14 5 30 5 42 11' stroke='%23d36f16' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M38 5l6 7-9 1.5' stroke='%23d36f16' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.auth-form-head {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 11px;
}

.auth-page-login .auth-form-head .eyebrow {
    display: none;
}

.auth-form-head h2 {
    margin: 0;
    color: #173139;
    font-size: 22px;
    line-height: 1.3;
}

.auth-form-head span {
    color: var(--muted);
    font-size: 13px;
}

.auth-page-login .auth-tabs {
    border-color: rgba(31, 138, 138, .2);
    background: #f2f8f7;
}

.auth-page-login .auth-tabs button {
    min-height: 38px;
}

.auth-page-login .auth-tab-panel {
    gap: 10px;
}

.auth-page-login .auth-form label {
    gap: 5px;
    color: #304e56;
    font-size: 13px;
    font-weight: 900;
}

.auth-page-login .auth-form input {
    min-height: 41px;
    border-color: #d4e2e5;
}

.auth-form input::placeholder {
    color: #9aaeb4;
    font-size: .92em;
    font-weight: 400;
    opacity: 1;
}

.auth-form input::-webkit-input-placeholder {
    color: #9aaeb4;
    font-size: .92em;
    font-weight: 400;
}

.auth-page-login .remember-row {
    min-height: 22px;
}

.auth-page-login .remember-row input {
    width: 16px;
    height: 16px;
    min-height: 16px;
}

.auth-page-login .auth-form input:focus {
    border-color: rgba(31, 138, 138, .62);
    background: #ffffff;
    outline: 3px solid rgba(31, 138, 138, .1);
}

.auth-page-login .btn-primary {
    min-height: 42px;
    border-radius: 8px;
    font-weight: 900;
}

.auth-page-login .auth-links {
    margin-top: 0;
}

.auth-page-login .wechat-login-button,
.auth-page-login .wechat-login-disabled {
    min-height: 42px;
    border-radius: 8px;
}

.auth-tab-panel {
    display: none;
    gap: 16px;
}

.auth-tab-panel.is-active {
    display: grid;
}

.auth-inline-row {
    display: grid;
    gap: 12px;
    align-items: start;
}

.auth-identity-row {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .92fr);
}

.auth-mobile-code-row,
.auth-email-code-row,
.auth-password-row,
.auth-overseas-identity-row,
.auth-overseas-email-row {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .92fr);
}

.auth-form label {
    display: grid;
    gap: 7px;
    color: #38525b;
    font-weight: 700;
}

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px;
    border: 1px solid #d8e7e6;
    border-radius: 8px;
    background: #f5faf9;
}

.auth-tabs button {
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #526970;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.auth-tabs button.is-active {
    background: #ffffff;
    color: var(--teal);
    box-shadow: 0 8px 20px rgba(30, 94, 88, .1);
}

.sms-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 10px;
}

.sms-send-btn {
    min-height: 44px;
    border: 1px solid rgba(0, 147, 141, .28);
    border-radius: 8px;
    background: #eff9f8;
    color: var(--teal);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.sms-send-btn:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.auth-sms-tip {
    margin: -2px 0 0;
    border: 1px dashed #d5e5e4;
    border-radius: 8px;
    padding: 6px 9px;
    background: #fbfdfd;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.auth-sms-tip[data-tone="success"] {
    border-color: #b8ded8;
    background: #f0faf7;
    color: #167268;
}

.auth-sms-tip[data-tone="error"] {
    border-color: #f0c4b9;
    background: #fff3ef;
    color: #9e402d;
}

.auth-submit-tip {
    display: none;
    margin: -2px 0 -4px;
    border: 1px dashed #d5e5e4;
    border-radius: 8px;
    padding: 7px 10px;
    background: #fbfdfd;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.auth-submit-tip:not(:empty) {
    display: block;
}

.auth-submit-tip[data-tone="error"] {
    border-color: #f0c4b9;
    background: #fff3ef;
    color: #9e402d;
}

.auth-field-note {
    display: block;
    margin-top: -2px;
    color: #789096;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

.auth-field-note:empty {
    display: none;
}

.auth-field-note[data-tone="checking"] {
    color: #6d7d83;
}

.auth-field-note[data-tone="success"] {
    color: #167268;
}

.auth-field-note[data-tone="error"] {
    color: #a24834;
}

.remember-row,
.agreement-row {
    grid-template-columns: auto 1fr;
    align-items: center;
    width: max-content;
    max-width: 100%;
}

.remember-row input,
.agreement-row input {
    width: 18px;
    min-height: 18px;
}

.agreement-row span {
    color: var(--muted);
    font-weight: 400;
}

.agreement-row a {
    color: var(--teal);
    font-weight: 800;
}

.agreement-row a:hover {
    color: #0f6f6b;
}

.member-agreement-page {
    padding: 46px 0 74px;
    background: linear-gradient(180deg, #f8fbfb 0%, #ffffff 42%, #f7fbfa 100%);
}

.member-agreement-hero {
    display: grid;
    gap: 10px;
    max-width: 900px;
    border-left: 4px solid var(--teal);
    padding: 8px 0 10px 20px;
}

.member-agreement-hero h1 {
    margin: 0;
    color: #173139;
    font-size: 34px;
    line-height: 1.2;
}

.member-agreement-hero p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: #536d74;
    font-size: 15px;
    line-height: 1.75;
}

.member-agreement-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    margin-top: 26px;
    align-items: start;
}

.member-agreement-side,
.member-agreement-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 45, 54, .07);
}

.member-agreement-side {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 4px;
    padding: 14px;
}

.member-agreement-side strong {
    display: block;
    margin-bottom: 5px;
    color: #1f3c43;
    font-size: 15px;
}

.member-agreement-side a {
    border-radius: 7px;
    padding: 8px 9px;
    color: #5a747b;
    font-size: 13px;
    font-weight: 800;
}

.member-agreement-side a:hover {
    background: #f1faf8;
    color: var(--teal);
}

.member-agreement-card {
    overflow: hidden;
    padding: 0 30px 30px;
}

.member-agreement-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 -30px 24px;
    border-bottom: 1px solid var(--line);
    padding: 16px 30px;
    background: #fbfdfd;
}

.member-agreement-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid rgba(31, 138, 138, .18);
    border-radius: 999px;
    padding: 0 11px;
    background: #ffffff;
    color: #4e6c73;
    font-size: 12px;
    font-weight: 800;
}

.member-agreement-card section {
    scroll-margin-top: 110px;
    border-bottom: 1px dashed #dce8e8;
    padding: 4px 0 20px;
    margin-bottom: 18px;
}

.member-agreement-card section:last-of-type {
    margin-bottom: 0;
}

.member-agreement-card h2 {
    margin: 0 0 10px;
    color: #173139;
    font-size: 21px;
    line-height: 1.35;
}

.member-agreement-card p {
    margin: 0 0 10px;
    color: #46626a;
    font-size: 14px;
    line-height: 1.9;
}

.member-agreement-card p:last-child {
    margin-bottom: 0;
}

.member-agreement-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
}

@media (max-width: 860px) {
    .member-agreement-page {
        padding: 30px 0 58px;
    }

    .member-agreement-hero {
        padding-left: 14px;
    }

    .member-agreement-hero h1 {
        font-size: 28px;
    }

    .member-agreement-layout {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
    }

    .member-agreement-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .member-agreement-side strong {
        grid-column: 1 / -1;
    }

    .member-agreement-card {
        padding: 0 18px 22px;
    }

    .member-agreement-meta {
        margin: 0 -18px 18px;
        padding: 13px 18px;
    }

    .member-agreement-card h2 {
        font-size: 18px;
    }

    .member-agreement-actions {
        justify-content: stretch;
    }

    .member-agreement-actions .btn {
        flex: 1 1 160px;
        justify-content: center;
    }
}

.auth-side-links,
.auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.auth-side-links {
    margin-top: 22px;
}

.auth-side-links a,
.auth-links a {
    color: var(--teal);
    font-weight: 700;
}

.auth-links {
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 11px;
}

.auth-wechat-compact {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(238, 138, 33, .28);
    border-radius: 8px;
    padding: 12px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .76), 0 12px 28px rgba(210, 111, 22, .08);
}

.auth-wechat-compact[hidden] {
    display: none;
}

.auth-wechat-compact.is-open {
    animation: authWechatReveal .2s ease-out;
}

@keyframes authWechatReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.auth-wechat-copy {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.auth-wechat-copy > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.auth-wechat-compact strong {
    overflow: hidden;
    color: #8d4510;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-wechat-compact small {
    overflow: hidden;
    color: #8a6a55;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-wechat-compact a,
.auth-wechat-compact > span {
    flex: 0 0 auto;
    border-radius: 7px;
    padding: 7px 10px;
    background: #fff0dc;
    color: #b65710;
    font-size: 12px;
    font-weight: 900;
}

.auth-wechat-compact .auth-wechat-badge {
    background: #fff0dc;
    color: #c46212;
}

.auth-wechat-qr-shell {
    display: grid;
    place-items: center;
    min-height: 274px;
    border: 1px solid rgba(238, 138, 33, .18);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(238, 138, 33, .055) 0 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(0deg, rgba(238, 138, 33, .045) 0 1px, transparent 1px) 0 0 / 18px 18px,
        #ffffff;
}

.auth-wechat-qr {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 300px);
    height: 274px;
    overflow: hidden;
}

.auth-wechat-qr iframe {
    width: 300px !important;
    height: 400px !important;
    border: 0;
    transform: translateY(12px) scale(.78);
    transform-origin: top center;
}

.auth-wechat-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 999px;
    padding: 0 14px;
    background: #fff0dc;
    color: #b65710;
    font-size: 12px;
    font-weight: 900;
}

.auth-wechat-status[data-tone="error"] {
    background: #fff5f0;
    color: #c05b21;
}

.auth-wechat-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.auth-wechat-actions span {
    color: #8a6a55;
    font-size: 12px;
    font-weight: 700;
}

.auth-wechat-fallback {
    justify-self: start;
}

.auth-register-wechat {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    border: 1px solid rgba(42, 143, 97, .22);
    border-radius: 8px;
    padding: 11px 12px;
    background: linear-gradient(135deg, #f4fbf7, #ffffff);
}

.auth-register-wechat.is-bound {
    justify-content: space-between;
    border-color: rgba(238, 138, 33, .28);
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .76), 0 12px 28px rgba(210, 111, 22, .08);
}

.auth-register-wechat-main {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
}

.auth-register-wechat-main > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.auth-register-wechat strong {
    color: #244f3c;
    font-size: 14px;
    font-weight: 900;
}

.auth-register-wechat.is-bound strong {
    color: #8d4510;
}

.auth-register-wechat small {
    color: #6a7e75;
    font-size: 11px;
    line-height: 1.45;
}

.auth-register-wechat.is-bound small {
    color: #8a6a55;
}

.auth-register-wechat a,
.auth-register-wechat-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 32px;
    border: 1px solid rgba(42, 143, 97, .26);
    border-radius: 999px;
    padding: 0 12px;
    background: #ffffff;
    color: #24734c;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.auth-register-wechat-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-top: 6px;
}

.auth-register-wechat-action a {
    min-height: 38px;
    border-color: rgba(210, 85, 36, .3);
    padding: 0 18px;
    background: #fffaf6;
    color: #b94621;
    font-size: 13px;
    box-shadow: 0 8px 20px rgba(210, 85, 36, .11);
}

.auth-step-badge {
    min-width: 30px;
    min-height: 30px;
    border-radius: 999px;
    font-size: 14px;
}

.auth-step-badge-thumb {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    background: #c46212;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(196, 98, 18, .18);
}

.auth-thumb-icon {
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='black' d='M13 30H9a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h4v15Zm2 0V16l7-9c1.6-2 4.7-.7 4.4 1.8l-.8 7.2h7.6c2.3 0 3.8 2.2 3.1 4.3l-2.7 8.1a5 5 0 0 1-4.7 3.4H15Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='black' d='M13 30H9a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h4v15Zm2 0V16l7-9c1.6-2 4.7-.7 4.4 1.8l-.8 7.2h7.6c2.3 0 3.8 2.2 3.1 4.3l-2.7 8.1a5 5 0 0 1-4.7 3.4H15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wechat-bind-arrow {
    position: absolute;
    right: -28px;
    top: -18px;
    z-index: 2;
    display: block;
    width: 48px;
    height: 36px;
    pointer-events: none;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg width='56' height='42' viewBox='0 0 56 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M49.2 6.4C39.8 6.7 31.6 10.3 26.6 16.2C22.9 20.6 20.4 25.3 13.2 29.1' stroke='%23D25524' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 21.7L11.4 30.1L21.1 30.3' stroke='%23D25524' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.8 6.4C51.1 6.4 52.6 7.3 53.1 8.6' stroke='%23D25524' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    opacity: .9;
}

.auth-register-wechat-state {
    border-color: rgba(31, 138, 138, .22);
    color: var(--teal);
}

.auth-register-wechat.is-bound .auth-wechat-badge,
.auth-register-wechat.is-bound .auth-register-wechat-state {
    border-color: rgba(238, 138, 33, .24);
    background: #fff0dc;
    color: #c46212;
}

.auth-register-wechat.is-bound .auth-step-badge-thumb {
    border-color: rgba(196, 98, 18, .22);
    background: #c46212;
    color: #ffffff;
}

.auth-wechat-entry-hidden-login {
    display: none;
}

.auth-wechat-note {
    display: grid;
    gap: 5px;
    margin-top: 24px;
    border: 1px dashed rgba(31, 138, 138, .22);
    border-radius: 8px;
    padding: 13px 14px;
    background: #f7fbfa;
}

.auth-wechat-note strong {
    color: #1f343b;
    font-size: 14px;
}

.auth-wechat-note span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.auth-wechat-entry {
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.wechat-login-button,
.wechat-login-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 900;
}

.wechat-login-button {
    border: 1px solid rgba(74, 154, 76, .28);
    background: #eef8ee;
    color: #2f7c35;
}

.wechat-login-button:hover {
    border-color: rgba(74, 154, 76, .5);
    background: #e6f5e6;
}

.wechat-login-disabled {
    border: 1px dashed #d7e2e4;
    background: #f7f9f9;
    color: #7d8c91;
    text-align: center;
}

.wechat-login-button .wechat-login-icon,
.wechat-login-disabled .wechat-login-icon {
    position: relative;
    flex: 0 0 auto;
    width: 19px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.wechat-login-button .wechat-login-icon::after,
.wechat-login-disabled .wechat-login-icon::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -4px;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(18deg);
}

.auth-wechat-entry-login {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(74, 154, 76, .22);
    border-radius: 8px;
    padding: 12px;
    background: linear-gradient(135deg, #f6fbf5 0%, #ffffff 100%);
}

.auth-page-login .auth-wechat-entry-muted {
    display: none;
}

.auth-wechat-entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.auth-wechat-entry-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-wechat-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 9px;
    background: #e8f6e8;
    color: #2f7c35;
    font-size: 12px;
    font-weight: 900;
}

.auth-wechat-entry-head strong {
    color: #1f343b;
    font-size: 14px;
}

.auth-wechat-entry-head small {
    color: #718287;
    font-size: 12px;
    line-height: 1.6;
    text-align: right;
}

.wechat-login-button-strong,
.wechat-login-disabled-strong {
    justify-content: flex-start;
    min-height: 62px;
    padding: 10px 13px;
    text-align: left;
}

.wechat-login-button-strong {
    border-color: rgba(65, 157, 82, .36);
    background: #eaf7eb;
    color: #2f7c35;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78);
}

.wechat-login-button-strong:hover {
    border-color: rgba(65, 157, 82, .56);
    background: #dff2e1;
}

.wechat-login-button-strong .wechat-login-icon,
.wechat-login-disabled-strong .wechat-login-icon {
    width: 24px;
    height: 20px;
}

.wechat-login-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.wechat-login-text strong {
    color: inherit;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

.wechat-login-text small {
    overflow: hidden;
    color: rgba(47, 124, 53, .74);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wechat-login-disabled-strong {
    border-color: #d7e2e4;
    background: #f8faf9;
    color: #75878d;
}

.wechat-login-disabled-strong .wechat-login-text small {
    color: #89999e;
}

.wechat-auth-page {
    padding: 54px 0 74px;
    background:
        linear-gradient(180deg, rgba(247, 251, 250, .95) 0%, #ffffff 58%),
        #ffffff;
}

.wechat-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(420px, .72fr);
    gap: 28px;
    align-items: stretch;
}

.wechat-auth-hero,
.wechat-auth-card {
    overflow: hidden;
    border: 1px solid rgba(210, 226, 229, .92);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 52px rgba(17, 45, 54, .08);
}

.wechat-auth-hero {
    display: grid;
    align-content: start;
    gap: 22px;
    min-height: 560px;
    padding: 38px;
    background:
        linear-gradient(135deg, #ffffff 0%, #f3faf8 62%, #eef7f6 100%);
}

.wechat-auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    color: #42676d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.wechat-auth-kicker span {
    position: relative;
    width: 21px;
    height: 17px;
    border: 2px solid #39a85a;
    border-radius: 50%;
}

.wechat-auth-kicker span::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #39a85a;
    border-bottom: 2px solid #39a85a;
    transform: rotate(18deg);
}

.wechat-auth-hero h1 {
    margin: 0;
    color: #173139;
    font-size: 38px;
    line-height: 1.25;
}

.wechat-auth-hero > p {
    max-width: 560px;
    margin: -8px 0 0;
    color: #4f6970;
    font-size: 15px;
    line-height: 1.9;
}

.wechat-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(100%, 440px);
    border: 1px solid rgba(31, 138, 138, .18);
    border-radius: 8px;
    padding: 15px 16px;
    background: rgba(255, 255, 255, .78);
}

.wechat-profile-avatar,
.member-wechat-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #eaf4f2;
    color: var(--teal);
    font-weight: 900;
}

.wechat-profile-avatar {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    font-size: 22px;
}

.wechat-profile-avatar img,
.member-wechat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-profile-card strong {
    display: block;
    color: #1f343b;
    font-size: 18px;
    line-height: 1.35;
}

.wechat-profile-card span,
.wechat-profile-card small {
    display: block;
    color: var(--muted);
    line-height: 1.6;
}

.wechat-profile-card span {
    margin-top: 2px;
    font-size: 13px;
}

.wechat-auth-steps {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}

.wechat-auth-steps div {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(216, 229, 231, .9);
    padding-top: 12px;
}

.wechat-auth-steps em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 26px;
    border-radius: 999px;
    background: #ebf6f4;
    color: var(--teal);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.wechat-auth-steps span {
    color: #38525b;
    font-size: 14px;
    font-weight: 800;
}

.wechat-auth-card {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 28px;
}

.wechat-auth-head {
    display: grid;
    gap: 5px;
}

.wechat-auth-head h2 {
    margin: 0;
    color: #173139;
    font-size: 26px;
    line-height: 1.3;
}

.wechat-auth-head p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.wechat-auth-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid #d9e8e6;
    border-radius: 8px;
    padding: 4px;
    background: #f4faf9;
}

.wechat-auth-switch button {
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #546d73;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.wechat-auth-switch button.is-active {
    background: #ffffff;
    color: var(--teal);
    box-shadow: 0 10px 24px rgba(25, 87, 84, .1);
}

.wechat-auth-form-panel {
    display: none;
    gap: 14px;
}

.wechat-auth-form-panel.is-active {
    display: grid;
}

.wechat-auth-form-panel label {
    display: grid;
    gap: 7px;
    color: #38525b;
    font-weight: 800;
}

.wechat-auth-form-panel input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
}

.wechat-auth-two-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wechat-auth-helper,
.wechat-auth-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.wechat-auth-note {
    border-top: 1px dashed var(--line);
    padding-top: 14px;
}

.form-alert {
    border: 1px solid #f0c4b9;
    border-radius: 8px;
    background: #fff3ef;
    color: #9e402d;
    padding: 10px 12px;
    font-size: 14px;
}

.form-alert strong,
.form-alert span {
    display: block;
}

.form-alert span {
    margin-top: 4px;
}

.member-layout {
    grid-template-columns: 240px minmax(0, 1fr);
}

.member-nav {
    display: grid;
    gap: 8px;
    overflow: hidden;
    padding: 10px;
}

.member-profile-card {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 18px 12px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #f5fbfa 0%, #ffffff 100%);
}

.member-profile-avatar,
.member-profile-edit-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(41, 158, 154, .28);
    border-radius: 50%;
    background: #e8f4f2;
    color: var(--teal);
    font-weight: 900;
}

.member-profile-avatar {
    width: 88px;
    height: 88px;
    padding: 0;
}

.member-profile-avatar img,
.member-profile-avatar span,
.member-profile-edit-avatar img,
.member-profile-edit-avatar span {
    width: 100%;
    height: 100%;
}

.member-profile-avatar img,
.member-profile-edit-avatar img {
    display: block;
    object-fit: cover;
}

.member-profile-avatar span,
.member-profile-edit-avatar span {
    display: grid;
    place-items: center;
    font-size: 30px;
}

.member-profile-name {
    max-width: 100%;
    color: #203940;
    font-size: 18px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.member-profile-account {
    max-width: 100%;
    color: #72858b;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.member-profile-meta {
    display: grid;
    gap: 6px;
    justify-items: center;
    width: 100%;
    margin-top: 4px;
}

.member-profile-meta span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(210, 222, 225, .9);
    border-radius: 7px;
    background: rgba(255, 255, 255, .72);
}

.member-profile-meta b {
    color: #789097;
    font-size: 12px;
}

.member-profile-meta em {
    color: #38525b;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-profile-meta .member-profile-phone-only,
.member-profile-meta .member-profile-group-only {
    justify-content: center;
}

.member-profile-meta .member-profile-phone-only em,
.member-profile-meta .member-profile-group-only em {
    color: #506870;
}

.member-profile-meta .member-profile-group-only {
    width: min(100%, 148px);
    min-height: 26px;
    padding: 0 12px;
}

.member-profile-edit {
    justify-content: center;
    width: 100%;
    min-height: 34px !important;
    margin-top: 4px;
    border: 1px solid rgba(41, 158, 154, .24);
    background: #eaf6f4;
    color: var(--teal) !important;
}

.member-nav-group {
    display: grid;
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.member-nav-group:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.member-nav-group > span {
    padding: 6px 8px 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
}

.member-nav a {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 7px;
    color: #38525b;
    font-weight: 700;
}

.member-nav a:hover {
    color: var(--teal);
    background: var(--soft);
}

.member-nav a.active {
    color: var(--teal);
    background: #e6f3f1;
}

.member-nav .member-profile-avatar {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    min-height: 88px;
    padding: 0;
    border-radius: 50%;
    background: #e8f4f2;
}

.member-nav .member-profile-avatar:hover {
    background: #e8f4f2;
}

.member-panel .ghost-link {
    display: inline-flex;
    margin-top: 18px;
}

.member-panel-head,
.member-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.member-panel-head h1 {
    margin-bottom: 0;
}

.member-head-status {
    display: grid;
    justify-items: end;
    gap: 4px;
    min-width: 110px;
}

.member-head-status span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.member-head-status strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #e6f3f1;
    color: var(--teal);
    font-size: 13px;
}

.renewal-head-tip {
    display: grid;
    gap: 4px;
    max-width: 590px;
    border: 1px solid rgba(198, 43, 43, .26);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff0f0;
    color: #9f1f1f;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.renewal-head-tip p {
    margin: 0;
}

.member-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 16px;
    padding: 22px;
    border: 1px solid rgba(199, 219, 222, .92);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(41, 158, 154, .12), rgba(255, 255, 255, .92) 46%),
        #f8fbfb;
}

.member-dashboard-copy {
    display: grid;
    align-content: center;
    gap: 8px;
}

.member-dashboard-copy > span {
    width: max-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(41, 158, 154, .12);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.member-dashboard-copy h2 {
    margin: 0;
    color: #203940;
    font-size: 26px;
    line-height: 1.2;
}

.member-dashboard-copy p {
    max-width: 620px;
    color: #667b82;
    font-size: 14px;
    line-height: 1.75;
}

.member-dashboard-profile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.member-dashboard-profile div {
    display: grid;
    align-content: center;
    min-height: 94px;
    padding: 14px;
    border: 1px solid rgba(203, 218, 222, .9);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
}

.member-dashboard-profile span,
.member-profile-facts span,
.member-action-grid small {
    color: var(--muted);
}

.member-dashboard-profile strong {
    margin-top: 8px;
    color: #203940;
    font-size: 24px;
    line-height: 1;
}

.member-profile-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.member-profile-facts div {
    display: grid;
    gap: 5px;
    min-height: 58px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.member-profile-facts span {
    font-size: 12px;
    font-weight: 800;
}

.member-profile-facts strong {
    min-width: 0;
    color: #2d464e;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.member-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.member-metrics a {
    min-height: 112px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.member-metrics span,
.member-toolbar p,
.muted {
    color: var(--muted);
}

.member-metrics strong {
    display: block;
    margin-top: 8px;
    font-size: 30px;
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.member-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.member-action-grid a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 3px 12px;
    align-items: center;
    min-height: 84px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.member-action-grid a:hover {
    border-color: rgba(41, 158, 154, .42);
    background: #f4fbfa;
}

.member-action-grid a > span {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #e6f3f1;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
}

.member-action-grid strong {
    color: #203940;
    font-size: 15px;
    line-height: 1.25;
}

.member-action-grid small {
    font-size: 12px;
    line-height: 1.35;
}

.member-profile-edit-panel {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbfb;
}

.member-profile-edit-avatar {
    width: 108px;
    height: 108px;
}

.member-profile-edit-copy {
    display: grid;
    gap: 8px;
}

.member-profile-edit-copy strong {
    color: #203940;
    font-size: 18px;
}

.member-profile-edit-copy p {
    color: #667b82;
    font-size: 13px;
    line-height: 1.6;
}

.member-profile-form .profile-info-grid {
    grid-template-columns: minmax(170px, .95fr) minmax(180px, 1fr) minmax(150px, .82fr);
}

.member-profile-form .profile-address-grid {
    grid-template-columns: minmax(210px, .8fr) minmax(0, 1.4fr);
    margin-top: 14px;
}

.member-profile-form .profile-sex-field .radio-row {
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    padding: 0 12px;
}

.member-profile-form .profile-sex-field .radio-row label {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
}

.member-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.member-avatar-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(41, 158, 154, .26);
    border-radius: 8px;
    background: #e6f3f1;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.member-avatar-actions span {
    color: #7b8f96;
    font-size: 12px;
    font-weight: 800;
}

.member-avatar-actions span[data-tone="success"] {
    color: var(--green);
}

.member-avatar-actions span[data-tone="error"] {
    color: var(--coral);
}

.member-avatar-cropper[hidden] {
    display: none;
}

.member-avatar-cropper {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
}

.member-avatar-cropper-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 44, 52, .54);
    backdrop-filter: blur(4px);
}

.member-avatar-cropper-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    width: min(100%, 420px);
    padding: 18px;
    border: 1px solid rgba(203, 218, 222, .88);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(17, 45, 54, .28);
}

.member-avatar-cropper-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.member-avatar-cropper-head div {
    display: grid;
    gap: 4px;
}

.member-avatar-cropper-head strong {
    color: #203940;
    font-size: 18px;
}

.member-avatar-cropper-head span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.member-avatar-cropper-head button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #f5f8f8;
    color: #6a7f86;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.member-avatar-cropper-stage {
    position: relative;
    justify-self: center;
    overflow: hidden;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(41, 158, 154, .34);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .9), rgba(232, 244, 242, .98)),
        #e8f4f2;
    box-shadow: 0 0 0 8px rgba(41, 158, 154, .08);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.member-avatar-cropper-stage.is-dragging {
    cursor: grabbing;
}

.member-avatar-cropper-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(31, 138, 138, .26);
    pointer-events: none;
}

.member-avatar-cropper-stage img {
    position: absolute;
    max-width: none;
    max-height: none;
    user-select: none;
    -webkit-user-drag: none;
}

.member-avatar-zoom {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: #38525b;
    font-size: 13px;
    font-weight: 900;
}

.member-avatar-zoom input {
    width: 100%;
    accent-color: var(--teal);
}

.member-avatar-cropper-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.member-avatar-cropper-actions .btn {
    min-height: 36px;
    padding: 0 14px;
}

.member-section {
    margin-top: 26px;
}

.member-list {
    display: grid;
    gap: 10px;
}

.member-list a {
    display: grid;
    gap: 4px;
    min-height: 62px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.member-list span {
    color: var(--muted);
    font-size: 13px;
}

.member-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.member-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.member-table th,
.member-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.member-table th {
    background: var(--soft);
    color: #36515a;
    font-size: 13px;
}

.member-table tr:last-child td {
    border-bottom: 0;
}

.member-page-brief {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 13px 14px;
    background: #fbfdfd;
}

.member-page-brief > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.member-page-brief strong {
    color: #1f343b;
    font-size: 17px;
    line-height: 1.25;
}

.member-page-brief span {
    color: var(--muted);
    font-size: 13px;
}

.member-application-summary,
.member-result-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.member-application-summary div,
.member-result-summary div {
    min-height: 72px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    background: #fbfdfd;
}

.member-application-summary span,
.member-result-summary span,
.member-result-note,
.member-result-head span,
.member-result-main span,
.member-result-main small,
.member-result-data span {
    color: var(--muted);
}

.member-application-summary span,
.member-result-summary span,
.member-result-data span {
    font-size: 12px;
    font-weight: 800;
}

.member-application-summary strong,
.member-result-summary strong {
    display: block;
    margin-top: 5px;
    color: #1f343b;
    font-size: 23px;
    line-height: 1.1;
}

.member-result-note {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
}

.member-result-list {
    display: grid;
    gap: 12px;
}

.member-result-card {
    position: relative;
    display: grid;
    gap: 12px;
    overflow: hidden;
    border: 1px solid #d9e8e7;
    border-radius: 8px;
    padding: 14px;
    background:
        linear-gradient(180deg, #ffffff, #fbfdfd);
}

.member-result-card-index {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 52px;
    height: 52px;
    padding: 0 11px 7px 0;
    background: linear-gradient(135deg, #2d8fb8, #0f9a92);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(20, 33, 38, .2);
}

.member-result-head,
.member-result-body,
.member-result-actions {
    min-width: 0;
}

.member-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(168, 186, 191, .75);
}

.member-result-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.member-result-head strong {
    color: #1f343b;
    font-size: 18px;
    line-height: 1.25;
}

.member-result-head span:not(.state) {
    font-size: 13px;
}

.member-result-body {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
    gap: 12px;
}

.member-result-main,
.member-result-data > div {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfd;
}

.member-result-main {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    padding: 12px;
}

.member-result-main strong,
.member-result-data strong {
    color: #1f343b;
    line-height: 1.4;
    word-break: break-word;
}

.member-result-main span,
.member-result-main small {
    font-size: 12px;
    font-weight: 800;
}

.member-result-data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.member-result-data > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 11px;
}

.member-result-data strong {
    font-size: 13px;
}

.member-result-actions {
    display: flex;
    justify-content: flex-end;
}

.member-result-file-link,
.member-result-file-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 8px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.member-result-file-link {
    border: 1px solid rgba(92, 154, 162, .32);
    background: #edf7f5;
    color: var(--teal);
}

.member-result-file-link:hover {
    border-color: rgba(92, 154, 162, .62);
    background: #e5f2f0;
}

.member-result-file-empty {
    border: 1px solid rgba(145, 165, 170, .32);
    background: #f6f8f8;
    color: #789097;
}

.member-application-list {
    display: grid;
    gap: 12px;
}

.member-application-list.is-compact {
    gap: 10px;
}

.member-application-card {
    position: relative;
    display: grid;
    gap: 12px;
    overflow: hidden;
    border: 1px solid #d9e8e7;
    border-radius: 8px;
    padding: 14px;
    background:
        linear-gradient(180deg, #ffffff, #fbfdfd);
}

.member-application-card-index {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 52px;
    height: 52px;
    padding: 0 0 7px 11px;
    background: linear-gradient(135deg, #2d8fb8, #0f9a92);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(20, 33, 38, .2);
}

.member-application-head,
.member-application-body,
.member-application-actions {
    min-width: 0;
}

.member-application-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #d8e7e6;
}

.member-application-head > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.member-application-head strong {
    color: #1f343b;
    font-size: 22px;
    line-height: 1.25;
}

.member-application-head span,
.member-application-head small,
.member-application-course span,
.member-application-course small,
.member-application-facts span {
    color: var(--muted);
}

.member-application-head span,
.member-application-head small {
    font-size: 16px;
}

.member-application-states {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.member-application-states .state {
    border: 1px solid rgba(180, 206, 208, .72);
    min-height: 32px;
    padding: 0 13px;
    background: #f4f8f8;
    color: #5f777e;
    font-size: 14px;
    font-weight: 900;
}

.member-application-states .state.info {
    border-color: rgba(45, 143, 184, .22);
    background: #eef7f8;
    color: #2d6f85;
}

.member-application-states .state.success {
    border-color: rgba(15, 154, 146, .24);
    background: #e8f6f3;
    color: #0f837d;
}

.member-application-states .state.warning {
    border-color: rgba(103, 174, 188, .22);
    background: #f1f8f8;
    color: #527781;
}

.member-application-states .state.danger {
    border-color: rgba(146, 111, 104, .18);
    background: #f8f5f4;
    color: #7a625d;
}

.member-application-body {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(190px, .7fr);
    gap: 14px;
}

.member-application-course {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
}

.member-application-course span,
.member-application-course small,
.member-application-facts span {
    font-size: 12px;
    font-weight: 800;
}

.member-application-course strong {
    color: var(--teal);
    font-size: 17px;
    line-height: 1.45;
    word-break: break-word;
}

.member-application-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    min-width: 0;
}

.member-application-facts > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.member-application-facts strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-application-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 10px;
    border-top: 1px dashed rgba(168, 186, 191, .75);
}

.member-application-actions form {
    margin: 0;
}

.member-application-lock-note {
    margin: 0;
    border: 1px solid rgba(15, 154, 146, .18);
    border-radius: 8px;
    padding: 8px 10px;
    background: #f1f8f7;
    color: #376d70;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.member-primary-action,
.member-muted-action,
.member-soft-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 8px;
    padding: 0 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.member-primary-action {
    border: 1px solid rgba(31, 138, 138, .32);
    background: var(--teal);
    color: #ffffff;
}

.member-soft-button {
    border: 1px solid rgba(92, 154, 162, .32);
    background: #edf7f5;
    color: var(--teal);
}

.member-muted-action {
    border: 1px solid rgba(171, 185, 190, .72);
    background: #f4f6f6;
    color: #667a80;
}

.member-result-brief {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    background: #fbfdfd;
}

.member-result-brief strong {
    color: #1f343b;
    white-space: nowrap;
}

.member-result-brief span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.member-result-card {
    grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr) max-content;
    align-items: stretch;
    gap: 14px;
}

.member-result-card.is-passed {
    border-color: rgba(15, 154, 146, .24);
}

.member-result-card.is-failed {
    border-color: rgba(146, 111, 104, .18);
}

.member-result-card.is-pending {
    border-color: rgba(45, 143, 184, .22);
}

.member-result-score {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    border-radius: 8px;
    padding: 12px;
    background: #f4f8f7;
}

.member-result-card.is-passed .member-result-score {
    background: #e8f6f3;
}

.member-result-card.is-failed .member-result-score {
    background: #f8f5f4;
}

.member-result-card.is-pending .member-result-score {
    background: #edf7f8;
}

.member-result-score span,
.member-result-score small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.member-result-score strong {
    color: #1f343b;
    font-size: 20px;
    line-height: 1.2;
}

.member-result-content {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.member-result-content .member-result-head {
    padding-bottom: 0;
    border-bottom: 0;
}

.member-result-content .member-result-main {
    padding: 0;
    border: 0;
    background: transparent;
}

.member-result-content .member-result-data {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.member-result-content .member-result-data > div {
    border: 0;
    padding: 0;
    background: transparent;
}

.member-result-card .member-result-actions {
    align-items: center;
    justify-content: flex-end;
}

.member-result-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
    align-items: stretch;
    gap: 18px;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--cyan);
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fbfb 0%, #ffffff 72%);
}

.member-result-hero.is-passed {
    border-left-color: var(--green);
}

.member-result-hero.is-failed {
    border-left-color: var(--coral);
}

.member-result-hero-main {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    padding: 18px 0 18px 18px;
}

.member-result-kicker,
.member-result-metrics span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.member-result-hero-main strong {
    color: #1f343b;
    font-size: 31px;
    line-height: 1.08;
}

.member-result-hero.is-passed .member-result-hero-main strong {
    color: #0f837d;
}

.member-result-hero.is-failed .member-result-hero-main strong {
    color: #7a625d;
}

.member-result-hero.is-pending .member-result-hero-main strong {
    color: #2d6f85;
}

.member-result-hero-main small {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-result-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: 15px 14px 15px 0;
}

.member-result-metrics div {
    display: grid;
    gap: 3px;
    min-width: 0;
    min-height: 50px;
    align-content: center;
    padding: 0 10px;
    border-left: 1px dashed rgba(168, 186, 191, .78);
}

.member-result-metrics strong {
    color: #1f343b;
    font-size: 22px;
    line-height: 1.1;
}

.member-result-brief {
    align-items: flex-start;
    margin-bottom: 14px;
    border: 0;
    border-left: 3px solid rgba(31, 138, 138, .55);
    padding: 9px 12px;
    background: #f5f8f7;
}

.member-result-brief strong {
    font-size: 15px;
    line-height: 1.5;
}

.member-result-card {
    grid-template-columns: minmax(218px, .42fr) minmax(0, 1fr) max-content;
    gap: 0;
    overflow: hidden;
    padding: 0;
    border-color: rgba(195, 209, 213, .92);
    box-shadow: 0 10px 26px rgba(17, 45, 54, .07);
}

.member-result-card:hover {
    border-color: rgba(92, 154, 162, .44);
}

.member-result-score {
    border-radius: 0;
    border-right: 1px solid rgba(205, 219, 223, .86);
    padding: 18px 16px;
}

.member-result-student-banner {
    display: grid;
    gap: 3px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(168, 186, 191, .75);
}

.member-result-student-banner span,
.member-result-student-banner small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.member-result-student-banner strong {
    color: #203940;
    font-size: 15px;
    line-height: 1.35;
    word-break: break-word;
}

.member-result-card.is-passed .member-result-student-banner strong {
    color: #0f837d;
    font-size: 16px;
}

.member-result-card.is-failed .member-result-student-banner strong {
    color: #7a625d;
}

.member-result-card.is-passed .member-result-score {
    background: #e8f6f3;
}

.member-result-card.is-failed .member-result-score {
    background: #f8f5f4;
}

.member-result-card.is-pending .member-result-score {
    background: #edf7f8;
}

.member-result-score strong {
    font-size: 24px;
}

.member-result-score .member-result-student-banner strong {
    font-size: 15px;
}

.member-result-score .member-result-student-banner strong b {
    font-size: 13px;
    font-weight: 900;
}

.member-result-card.is-passed .member-result-score strong {
    color: #0f837d;
}

.member-result-card.is-failed .member-result-score strong {
    color: #7a625d;
}

.member-result-card.is-pending .member-result-score strong {
    color: #2d6f85;
}

.member-result-score small {
    line-height: 1.5;
}

.member-result-content {
    gap: 10px;
    padding: 16px;
}

.member-result-content .member-result-head {
    align-items: flex-start;
}

.member-result-head strong {
    color: #1f343b;
    font-size: 20px;
    line-height: 1.3;
}

.member-result-content .member-result-main {
    gap: 4px;
    padding-bottom: 11px;
    border-bottom: 1px dashed rgba(168, 186, 191, .75);
}

.member-result-content .member-result-main strong {
    color: #38525b;
    font-size: 15px;
    line-height: 1.45;
}

.member-result-content .member-result-student-line strong {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.member-result-content .member-result-student-line strong b {
    color: #38525b;
    font-size: 15px;
}

.member-result-content .member-result-student-line strong em {
    color: #203940;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
}

.member-result-content .member-result-data {
    grid-template-columns: minmax(108px, .85fr) minmax(190px, 1.35fr) minmax(108px, .8fr);
    gap: 9px 16px;
}

.member-result-content .member-result-data > div {
    gap: 2px;
}

.member-result-data strong {
    overflow-wrap: anywhere;
}

.member-result-content .member-result-data > div:nth-child(2) strong {
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

.member-result-card .member-result-actions {
    padding: 16px 16px 36px 0;
}

.member-certificate-card .member-result-actions {
    display: grid;
    align-content: center;
    justify-items: stretch;
    gap: 9px;
}

.member-certificate-card .member-soft-button,
.member-certificate-card .member-result-file-link,
.member-certificate-card .member-result-file-empty {
    width: 100%;
}

.member-result-file-link,
.member-result-file-empty {
    min-height: 38px;
    border-radius: 8px;
    padding: 0 14px;
}

.member-result-file-link {
    background: #eef7f5;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62);
}

.member-result-file-link-muted {
    border-color: rgba(145, 165, 170, .36);
    background: #f8fbfb;
    color: #6c858b;
}

.member-result-file-empty {
    border-color: rgba(158, 184, 188, .34);
    background: #f4f8f8;
    color: #6d8288;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.table-actions a,
.table-actions button,
.inline-link {
    border: 0;
    background: transparent;
    color: var(--teal);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
}

.state {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.state.info {
    background: #e8f3f7;
    color: var(--cyan);
}

.state.success {
    background: #e8f4e8;
    color: var(--green);
}

.state.danger {
    background: #fff0ec;
    color: var(--coral);
}

.state.warning {
    background: #fff8ec;
    color: #9a6c22;
}

.state.muted {
    background: #eef2f2;
    color: #607078;
}

.empty-state {
    min-height: 128px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: #fbfcfc;
}

.member-form {
    display: grid;
    gap: 18px;
}

.member-form.narrow {
    max-width: 520px;
}

.member-wechat-card {
    display: grid;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    background: #ffffff;
}

.member-wechat-status {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
}

.member-wechat-status h2 {
    margin: 0 0 6px;
    color: #1f343b;
    font-size: 22px;
}

.member-wechat-status span:not(.state) {
    display: block;
    max-width: 680px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.member-wechat-bound {
    display: grid;
    grid-template-columns: 78px minmax(150px, .8fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 16px;
}

.member-wechat-avatar {
    width: 72px;
    height: 72px;
    font-size: 22px;
}

.member-wechat-info {
    display: grid;
    gap: 4px;
}

.member-wechat-info strong {
    color: #1f343b;
    font-size: 18px;
}

.member-wechat-info span,
.member-wechat-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.member-wechat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.member-wechat-grid div {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(220, 230, 234, .88);
    border-radius: 8px;
    padding: 11px 12px;
    background: #fbfcfc;
}

.member-wechat-grid strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-wechat-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px dashed var(--line);
    padding-top: 14px;
}

.member-wechat-empty {
    display: grid;
    gap: 8px;
    border: 1px dashed rgba(31, 138, 138, .22);
    border-radius: 8px;
    padding: 18px;
    background: #f7fbfa;
}

.member-wechat-empty strong {
    color: #1f343b;
    font-size: 16px;
}

.member-wechat-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.member-wechat-empty .btn {
    justify-self: start;
    margin-top: 6px;
}

#student-application-form {
    gap: 20px;
}

.application-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.application-progress > div,
.application-section {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.application-progress > div {
    min-height: 92px;
    padding: 16px;
}

.application-progress span,
.application-progress small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.application-progress strong {
    display: block;
    margin: 6px 0;
    color: #1f343b;
}

.application-progress .state-ready {
    color: var(--green);
}

.application-progress .state-warn {
    color: var(--coral);
}

.application-readme {
    grid-template-columns: 1fr;
}

.application-readme .application-readme-card {
    min-height: auto;
    padding: 16px 18px;
}

.application-readme .application-readme-card span {
    display: block;
    margin-bottom: 8px;
    color: #1f343b;
    font-size: 16px;
    font-weight: 800;
}

.application-readme .application-readme-card p {
    margin: 0;
    color: #38525b;
    font-size: 14px;
    line-height: 1.7;
}

.application-readme .application-readme-card strong {
    display: block;
    margin: 8px 0;
    color: var(--coral);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.6;
}

.application-draft-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(59, 151, 132, 0.28);
    border-radius: 8px;
    background: #f1fbf8;
}

.application-draft-notice[hidden] {
    display: none;
}

.application-draft-notice strong,
.application-draft-notice span {
    display: block;
}

.application-draft-notice strong {
    color: #1f343b;
    font-size: 15px;
}

.application-draft-notice span {
    margin-top: 3px;
    color: #527078;
    font-size: 13px;
    line-height: 1.5;
}

.application-draft-notice button {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--coral);
    font-weight: 800;
    cursor: pointer;
}

.application-section {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.application-section h2 {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    line-height: 1.35;
}

.section-required-note {
    color: #687981;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.section-required-note span {
    color: var(--coral);
    font-weight: 800;
}

.optional-section summary,
.admin-collapsible summary,
.admin-nav-details summary {
    cursor: pointer;
    font-weight: 800;
}

.optional-section summary {
    color: #38525b;
}

.application-submit-row {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    padding: 14px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--paper) 44%);
}

.autosave-status {
    color: #687981;
    font-size: 13px;
    font-weight: 700;
}

.autosave-status[data-tone="success"] {
    color: var(--green);
}

.autosave-status[data-tone="warn"] {
    color: var(--coral);
}

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#student-application-form .form-grid {
    align-items: start;
    gap: 16px 18px;
}

#student-application-form .form-grid.two {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
}

#student-application-form .basic-info-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

#student-application-form .certificate-info-grid {
    grid-template-columns: minmax(136px, 0.7fr) minmax(270px, 1.45fr) minmax(180px, 0.95fr);
}

#student-application-form .field-third {
    grid-column: span 2;
}

#student-application-form .field-half {
    grid-column: span 3;
}

#student-application-form .basic-name-field,
#student-application-form .basic-sex-field {
    grid-column: span 2;
}

#student-application-form .basic-contact-field {
    grid-column: span 4;
}

#student-application-form .basic-sex-field .radio-row {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 8px;
}

#student-application-form .english-name-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    align-items: end;
    gap: 8px 14px;
}

#student-application-form .english-name-field {
    gap: 8px;
}

#student-application-form .english-name-note {
    margin: 0 0 2px;
    color: #687981;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
}

#student-application-form .certificate-control {
    grid-column: auto;
}

#student-application-form .certificate-upload {
    grid-column: 1 / -1;
}

#student-application-form .certificate-type-control {
    max-width: 190px;
}

#student-application-form .certificate-number-control {
    min-width: 0;
}

#student-application-form .certificate-birthday-control {
    min-width: 0;
}

#student-application-form .field {
    min-width: 0;
    align-content: start;
    gap: 8px;
}

#student-application-form label.field {
    color: inherit;
    font-weight: inherit;
}

#student-application-form .field-wide {
    grid-column: 1 / -1;
}

#student-application-form .address-field {
    gap: 10px;
}

#student-application-form .address-grid {
    display: grid;
    grid-template-columns: minmax(170px, .9fr) minmax(180px, 1fr) minmax(200px, 1.1fr);
    gap: 10px;
}

#student-application-form .field > span:first-child,
#student-application-form label.field > span:first-child {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 22px;
    color: #2f4952;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

#student-application-form .field-note {
    color: #687981;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

#student-application-form .field-note:empty {
    display: none;
}

#student-application-form .field input,
#student-application-form .field select,
#student-application-form .field textarea {
    min-width: 0;
    min-height: 44px;
    border-radius: 6px;
    background: #ffffff;
    line-height: 1.45;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#student-application-form .field input:focus,
#student-application-form .field select:focus,
#student-application-form .field textarea:focus {
    outline: 0;
    border-color: rgba(31, 138, 138, 0.72);
    box-shadow: 0 0 0 3px rgba(31, 138, 138, 0.13);
}

#student-application-form.was-validated .field input:invalid,
#student-application-form.was-validated .field select:invalid,
#student-application-form.was-validated .field textarea:invalid,
#student-application-form .field.is-invalid input,
#student-application-form .field.is-invalid select,
#student-application-form .field.is-invalid textarea,
#student-application-form .address-field.is-invalid input,
#student-application-form .address-field.is-invalid select {
    border-color: rgba(198, 95, 75, 0.78);
    background: #fff8f6;
    box-shadow: 0 0 0 3px rgba(198, 95, 75, 0.11);
}

#student-application-form .field input[readonly],
#student-application-form .upload-path,
#student-application-form .upload-display {
    background: #f8fbfb;
    color: #425861;
}

#student-application-form .field input:disabled,
#student-application-form .field select:disabled,
#student-application-form .field textarea:disabled {
    background: #f5f8f7;
    color: #7a8990;
    cursor: not-allowed;
}

#student-application-form .field select option:disabled {
    color: #9aa8ae;
    background: #f3f6f6;
}

.field textarea {
    resize: vertical;
}

#student-application-form .field textarea {
    min-height: 112px;
}

.upload-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

#student-application-form .upload-control {
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

#student-application-form .upload-path,
#student-application-form .upload-display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 44px;
    border: 1px solid var(--teal);
    border-radius: 8px;
    background: #eef8f6;
    color: var(--teal);
    cursor: pointer;
    font-weight: 700;
}

#student-application-form .upload-button {
    width: 104px;
    min-width: 104px;
    min-height: 44px;
    border-radius: 6px;
    white-space: nowrap;
}

.upload-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-control.is-uploading .upload-button {
    opacity: 0.72;
    pointer-events: none;
}

#student-application-form .field.is-uploaded .upload-path,
#student-application-form .field.is-uploaded .upload-display,
#student-application-form .field.is-uploaded .upload-button {
    border-color: rgba(88, 142, 90, 0.52);
    background: #f0faf2;
}

#student-application-form .field.is-upload-error .upload-path,
#student-application-form .field.is-upload-error .upload-display,
#student-application-form .field.is-upload-error .upload-button {
    border-color: rgba(198, 95, 75, 0.62);
    background: #fff8f6;
}

.upload-status {
    display: none;
    width: fit-content;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef8f6;
    color: var(--teal);
    font-weight: 700;
}

#student-application-form .upload-status:not(:empty) {
    display: inline-flex;
    align-items: center;
}

#student-application-form .field.is-uploaded .upload-status {
    background: #effaf1;
    color: var(--green);
}

#student-application-form .field.is-upload-error .upload-status {
    background: #fff0ec;
    color: var(--coral);
}

.field.is-required input,
.field.is-required select,
.field.is-required textarea {
    border-color: rgba(198, 95, 75, 0.58);
}

.field > span,
.radio-row label {
    color: #38525b;
    font-weight: 700;
}

.field > span + a,
.field > input + span,
.field > select + span,
.field > .upload-control + span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

#student-application-form .field > input + span,
#student-application-form .field > select + span,
#student-application-form .field > .upload-control + span {
    min-height: 20px;
    color: #687981;
    font-size: 12px;
    line-height: 1.45;
}

#student-application-form .field-help {
    color: #687981;
    font-size: 12px;
    line-height: 1.45;
}

#student-application-form .address-field.is-invalid .field-help,
#student-application-form.was-validated .address-field:has(input:invalid, select:invalid) .field-help {
    color: var(--coral);
    font-weight: 700;
}

.radio-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    min-height: 44px;
}

#student-application-form .radio-row {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    padding: 0 12px;
}

#student-application-form .radio-row label {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
}

.radio-row input {
    width: auto;
    min-height: auto;
    margin-right: 6px;
}

.form-note {
    margin: 0;
}

.form-success {
    border: 1px solid #b9dfc4;
    border-radius: 8px;
    background: #effaf1;
    color: #2f703a;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.resume-detail-grid {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.resume-detail-grid section {
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.resume-detail-grid h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.member-resume-guide,
.member-resume-section {
    border: 1px solid #dfe9e6;
    border-radius: 8px;
    background: #ffffff;
}

.resume-editor-form {
    gap: 16px;
}

.member-resume-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}

.resume-editor-guide {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: 20px 22px 19px;
    border-color: rgba(58, 151, 132, .22);
    background: linear-gradient(135deg, #ffffff 0%, #f4fbf8 62%, #fff8ef 100%);
    box-shadow: 0 14px 34px rgba(32, 67, 70, .07);
}

.resume-editor-guide::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--teal), #f0a43a);
}

.resume-editor-guide > * {
    position: relative;
    z-index: 1;
}

.resume-editor-actions-only {
    justify-content: flex-end;
    padding: 12px 14px;
    background: #ffffff;
    box-shadow: none;
}

.resume-editor-actions-only::before {
    display: none;
}

.member-resume-guide strong,
.resume-manager-toolbar strong {
    display: block;
    color: #1f343b;
    font-size: 18px;
}

.resume-editor-guide strong {
    color: #173238;
    font-size: 24px;
    letter-spacing: 0;
}

.member-resume-guide span,
.resume-manager-toolbar p {
    display: block;
    margin: 4px 0 0;
    color: #637881;
    font-size: 13px;
    line-height: 1.5;
}

.member-resume-section {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 16px;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(31, 58, 62, .045);
}

.resume-editor-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(58, 151, 132, .78), rgba(240, 164, 58, .38), rgba(58, 151, 132, 0));
}

.member-resume-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 0 0 12px;
    border-bottom: 1px dashed #d7e2e1;
}

.member-resume-section-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #1d363c;
    font-size: 20px;
    line-height: 1.2;
}

.member-resume-section-head h2::before {
    content: "";
    width: 8px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--teal), #f0a43a);
}

.member-resume-section-head span {
    color: #6b7f86;
    font-size: 13px;
    line-height: 1.45;
}

.resume-basic-layout {
    display: grid;
    grid-template-columns: 174px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.resume-avatar-editor {
    display: grid;
    justify-items: center;
    gap: 12px;
    min-height: 100%;
    padding: 16px 14px;
    border: 1px solid #dce9e6;
    border-radius: 8px;
    background: linear-gradient(180deg, #f9fcfb 0%, #f4faf8 100%);
}

.resume-avatar-preview,
.resume-list-avatar {
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf4f2;
    color: var(--teal);
    font-weight: 900;
}

.resume-avatar-preview {
    width: 110px;
    height: 154px;
    border: 4px solid #ffffff;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(26, 76, 79, .12);
    font-size: 32px;
}

.resume-avatar-preview img,
.resume-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume-avatar-preview img {
    object-position: center top;
}

.resume-avatar-editor small,
.resume-file-line small {
    color: #6d7f86;
    font-size: 12px;
    line-height: 1.45;
}

.resume-basic-fields,
.resume-repeat-list {
    display: grid;
    gap: 14px;
}

.member-resume-form .form-grid {
    align-items: start;
    gap: 14px 16px;
}

.resume-grid-four {
    grid-template-columns: minmax(150px, 1.05fr) minmax(108px, .66fr) minmax(145px, .95fr) minmax(132px, .82fr);
}

.resume-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resume-intent-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resume-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resume-field-wide {
    grid-column: span 2;
}

.resume-area-field {
    grid-column: span 2;
}

.resume-area-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.resume-basic-location-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resume-current-address-field {
    grid-column: span 2;
}

.resume-intent-location-field {
    grid-column: span 2;
}

.resume-intent-grid .resume-category-field {
    grid-column: span 2;
}

.resume-intent-grid .resume-expected-position-field {
    grid-column: span 2;
}

.resume-intent-grid .resume-work-state-field {
    width: calc(100% - 30px);
}

.resume-intent-grid .resume-tags-field {
    grid-column: span 3;
    width: calc(100% + 30px);
    margin-left: -30px;
}

.resume-current-address-title {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.resume-current-address-title small {
    color: #7f9499;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
}

.resume-current-address-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr);
    gap: 8px;
}

.resume-current-address-grid .resume-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resume-category-field .field-help {
    display: block;
    margin-top: 5px;
    color: #7b8f94;
    font-size: 12px;
}

.resume-category-picker {
    position: relative;
}

.resume-category-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe6e4;
    border-radius: 7px;
    padding: 5px 11px;
    background: #ffffff;
    color: #203940;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.resume-category-trigger:hover {
    border-color: rgba(238, 138, 33, .42);
    background: #fffdf9;
}

.resume-category-trigger:focus-visible {
    border-color: rgba(238, 138, 33, .68);
    box-shadow: 0 0 0 3px rgba(238, 138, 33, .12);
    outline: none;
}

.resume-category-trigger span {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-width: 0;
    color: #6b858a;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
}

.resume-category-trigger em {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(238, 138, 33, .24);
    padding: 2px 7px;
    background: #fff7ec;
    color: #9c520e;
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.25;
}

.resume-category-trigger b {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 1.8px solid #c46d16;
    border-bottom: 1.8px solid #c46d16;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}

.resume-category-picker.is-open .resume-category-trigger {
    border-color: rgba(238, 138, 33, .62);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(238, 138, 33, .11);
}

.resume-category-picker.is-open .resume-category-trigger b {
    transform: rotate(225deg) translate(-2px, -1px);
}

.resume-category-picker.is-limit + .field-help {
    color: #b15d13;
}

.resume-category-panel {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    z-index: 80;
    display: none;
    max-height: min(420px, 62vh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border: 1px solid #dbe6e4;
    border-radius: 8px;
    padding: 9px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(22, 50, 58, .12);
}

.resume-category-picker.is-open .resume-category-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.resume-category-panel label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 7px 8px;
    background: #f8fbfb;
    color: #29484f;
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.resume-category-panel label:hover {
    border-color: rgba(31, 138, 138, .18);
    background: #f3faf8;
}

.resume-category-panel label.is-selected {
    border-color: rgba(238, 138, 33, .44);
    background: #fff7ec;
    color: #98500d;
    font-weight: 800;
}

.member-resume-form .resume-category-panel input {
    width: 14px;
    min-height: 14px;
    margin: 0;
    accent-color: #ee8a21;
}

.resume-work-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(150px, .8fr) minmax(150px, .8fr);
}

.member-resume-form .field > span,
.member-resume-form .field > label,
.member-resume-form .field .field-title {
    color: #38525b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.member-resume-form input,
.member-resume-form select,
.member-resume-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid #d8e4e2;
    border-radius: 7px;
    background-color: #fbfdfd;
    color: #203940;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.member-resume-form textarea {
    line-height: 1.65;
    resize: vertical;
}

.member-resume-form input:focus,
.member-resume-form select:focus,
.member-resume-form textarea:focus {
    outline: 0;
    border-color: rgba(58, 151, 132, .7);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(58, 151, 132, .11);
}

.member-resume-form.was-validated input:invalid,
.member-resume-form.was-validated select:invalid,
.member-resume-form.was-validated textarea:invalid,
.member-resume-form .field.is-invalid input,
.member-resume-form .field.is-invalid select,
.member-resume-form .field.is-invalid textarea {
    border-color: rgba(198, 95, 75, .78);
    background: #fff8f6;
    box-shadow: 0 0 0 3px rgba(198, 95, 75, .11);
}

.member-resume-form .field.is-invalid .field-help {
    color: #b15d13;
}

.resume-radio-row {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d8e4e2;
    border-radius: 7px;
    background: #fbfdfd;
    flex-wrap: nowrap;
    gap: 12px;
}

.member-resume-form .resume-radio-row label {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    white-space: nowrap;
    font-size: 13px;
}

.member-resume-form .radio-row input[type="radio"],
.member-resume-form .radio-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    min-width: auto;
    min-height: auto;
    margin: 0 5px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: initial;
    box-shadow: none;
    accent-color: var(--teal);
}

.resume-add-line,
.resume-move-line,
.resume-remove-line,
.resume-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 7px;
    border: 1px solid rgba(58, 151, 132, 0.24);
    background: #eff8f5;
    color: var(--teal);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.resume-add-line:hover,
.resume-move-line:hover,
.resume-upload-button:hover {
    border-color: rgba(58, 151, 132, .42);
    background: #e4f4ef;
    transform: translateY(-1px);
}

.resume-add-line {
    min-width: 112px;
    padding: 0 14px;
    border-color: rgba(190, 73, 62, .28);
    background: #c85f4e;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(190, 73, 62, .12);
}

.resume-add-line:hover {
    border-color: rgba(169, 58, 48, .38);
    background: #b94f40;
    color: #ffffff;
}

.resume-remove-line {
    border-color: #e7dddd;
    background: #f7f7f7;
    color: #7d6d6d;
}

.resume-remove-line:hover {
    border-color: #e2caca;
    background: #f1eeee;
    color: #7a5555;
}

.resume-row-tools {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.resume-move-line,
.resume-remove-line {
    padding: 0 12px;
}

.resume-move-line {
    background: #ffffff;
}

.resume-upload-button {
    flex: 0 0 auto;
    padding: 0 13px;
}

.resume-upload-button input {
    display: none;
}

.resume-repeat-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #dfe9e6;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}

.resume-repeat-card::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: rgba(58, 151, 132, .42);
}

.resume-repeat-card:hover {
    border-color: rgba(58, 151, 132, .3);
    box-shadow: 0 10px 24px rgba(31, 58, 62, .055);
}

.resume-file-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
}

.resume-file-line .upload-path,
.resume-file-line .upload-display {
    min-width: 0;
}

.resume-file-line small {
    grid-column: 1 / -1;
}

.resume-submit-row {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 2px;
    padding: 14px 16px;
    border: 1px solid rgba(216, 226, 224, .92);
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 -12px 26px rgba(32, 67, 70, .06);
    backdrop-filter: blur(10px);
}

.resume-submit-feedback {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-right: auto;
}

.resume-submit-message {
    color: var(--coral);
    font-size: 13px;
    font-weight: 900;
}

.resume-submit-message[hidden] {
    display: none;
}

.resume-submit-message[data-tone="success"] {
    color: var(--green);
}

.resume-submit-message[data-tone="error"] {
    color: #b15d13;
}

.resume-submit-row .btn {
    min-width: 108px;
    min-height: 40px;
    font-size: 15px;
}

.member-resume-guide .btn-secondary,
.resume-submit-row .btn-secondary {
    border-color: rgba(181, 199, 202, .62);
    background: #f5f8f8;
    color: #526b72;
}

.member-resume-guide .btn-secondary:hover,
.resume-submit-row .btn-secondary:hover {
    border-color: rgba(141, 166, 169, .76);
    background: #edf3f2;
    color: #25444b;
}

.member-resume-guide .primary-link:hover,
.resume-submit-row .btn-primary:hover {
    background: #257f73;
    color: #ffffff;
}

@media (max-width: 1180px) {
    .resume-basic-layout {
        grid-template-columns: 1fr;
    }

    .resume-avatar-editor {
        grid-template-columns: 108px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        text-align: left;
    }

    .resume-grid-four,
    .resume-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resume-basic-location-row,
    .resume-current-address-grid {
        grid-template-columns: 1fr;
    }

    .resume-area-field,
    .resume-field-wide {
        grid-column: 1 / -1;
    }

    .resume-intent-grid .resume-category-field,
    .resume-intent-grid .resume-expected-position-field,
    .resume-intent-grid .resume-tags-field {
        grid-column: 1 / -1;
    }

    .resume-intent-grid .resume-work-state-field,
    .resume-intent-grid .resume-tags-field {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 760px) {
    .resume-editor-guide,
    .member-resume-section-head,
    .resume-preview-actions,
    .resume-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .resume-editor-guide {
        padding: 18px 16px;
    }

    .member-resume-section {
        padding: 16px;
    }

    .resume-avatar-editor,
    .resume-grid-four,
    .resume-grid-three,
    .resume-grid-two,
    .resume-area-grid,
    .resume-current-address-grid,
    .resume-file-line {
        grid-template-columns: 1fr;
    }

    .resume-avatar-editor {
        justify-items: center;
        text-align: center;
    }

    .resume-area-field,
    .resume-field-wide {
        grid-column: auto;
    }

    .resume-intent-grid .resume-intent-location-field,
    .resume-intent-grid .resume-category-field,
    .resume-intent-grid .resume-expected-position-field,
    .resume-intent-grid .resume-tags-field {
        grid-column: auto;
    }

    .resume-category-picker.is-open .resume-category-panel {
        grid-template-columns: 1fr;
    }

    .resume-submit-row .btn,
    .resume-preview-actions .btn {
        width: 100%;
    }
}

.resume-manager-toolbar {
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px dashed #d8e1df;
}

.resume-manager-hero {
    position: relative;
    overflow: hidden;
    align-items: center;
    margin-bottom: 16px;
    border: 1px solid rgba(210, 224, 226, .96);
    border-radius: 8px;
    padding: 18px 20px;
    background:
        linear-gradient(135deg, rgba(244, 177, 52, .11), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, #ffffff, #f9fbfb);
}

.resume-manager-hero::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -52px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(41, 158, 154, .08);
    pointer-events: none;
}

.resume-manager-hero > div,
.resume-manager-hero .btn {
    position: relative;
    z-index: 1;
}

.resume-manager-hero span {
    display: block;
    margin-bottom: 4px;
    color: #a06a10;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.resume-manager-hero strong {
    color: #1e383f;
    font-size: 24px;
}

.resume-manager-hero p {
    max-width: 620px;
    margin-top: 6px;
    color: #60747a;
    font-size: 14px;
    line-height: 1.7;
}

.resume-manager-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.resume-manager-summary div {
    min-height: 62px;
    border: 1px solid rgba(220, 232, 231, .94);
    border-radius: 8px;
    padding: 11px 13px;
    background: #ffffff;
}

.resume-manager-summary span {
    display: block;
    color: #7a8f95;
    font-size: 12px;
    font-weight: 800;
}

.resume-manager-summary strong {
    display: block;
    margin-top: 5px;
    color: #244046;
    font-size: 20px;
    line-height: 1.1;
}

.member-resume-card-list {
    display: grid;
    gap: 12px;
}

.member-resume-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(330px, 1.45fr) minmax(188px, .72fr);
    gap: 18px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(214, 228, 230, .95);
    border-radius: 8px;
    padding: 16px;
    background:
        linear-gradient(90deg, rgba(41, 158, 154, .055), rgba(255, 255, 255, 0) 36%),
        #ffffff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.member-resume-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(41, 158, 154, .82), rgba(244, 177, 52, .72));
}

.member-resume-card:hover {
    border-color: rgba(41, 158, 154, .32);
    box-shadow: 0 16px 32px rgba(22, 56, 64, .09);
    transform: translateY(-1px);
}

.member-resume-card-index {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 52px;
    height: 52px;
    padding: 0 0 7px 11px;
    background: linear-gradient(135deg, rgba(41, 158, 154, .92), rgba(244, 177, 52, .9));
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(20, 33, 38, .2);
}

.member-resume-card-profile {
    display: flex;
    gap: 13px;
    min-width: 0;
}

.member-resume-card-avatar {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border: 2px solid rgba(41, 158, 154, .14);
    background: linear-gradient(135deg, #eaf7f4, #fff7e7);
    color: #1d7872;
    font-size: 20px;
}

.member-resume-card-main {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.member-resume-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.member-resume-card-title h3 {
    margin: 0;
    color: #1f343b;
    font-size: 19px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.member-resume-card-main > strong {
    color: #2f4a51;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.member-resume-card-main > p {
    margin: 0;
    color: #70858b;
    font-size: 13px;
    line-height: 1.5;
}

.member-resume-card-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border-top: 1px dashed #dfe9e8;
    padding-top: 7px;
}

.member-resume-card-summary span {
    color: #526b72;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.6;
    white-space: nowrap;
}

.member-resume-card-summary p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #6d8086;
    font-size: 14px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.member-resume-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.member-resume-card-tags em {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f0f7f5;
    color: #397d71;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.member-resume-card-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: stretch;
}

.member-resume-card-facts div {
    min-width: 0;
    border: 1px solid rgba(225, 235, 235, .95);
    border-radius: 7px;
    padding: 9px 10px;
    background: rgba(248, 251, 251, .9);
}

.member-resume-card-facts span {
    display: block;
    color: #7b9095;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.member-resume-card-facts strong {
    display: block;
    margin-top: 4px;
    color: #2d464e;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.member-resume-card-actions {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
    border-left: 1px dashed #dbe8e7;
    padding-left: 16px;
}

.member-resume-card-actions form {
    display: inline-flex;
}

.resume-empty-state {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 230px;
    border: 1px dashed #cfdede;
    border-radius: 8px;
    padding: 34px;
    background:
        linear-gradient(135deg, rgba(41, 158, 154, .09), rgba(255, 255, 255, 0) 52%),
        #ffffff;
    text-align: center;
}

.resume-empty-state strong {
    color: #1f383f;
    font-size: 22px;
}

.resume-empty-state span {
    max-width: 430px;
    color: #667b82;
    font-size: 14px;
    line-height: 1.7;
}

.resume-member-table {
    min-width: 0;
    table-layout: fixed;
}

.resume-member-table th:nth-child(1) {
    width: 15%;
}

.resume-member-table th:nth-child(2) {
    width: 15%;
}

.resume-member-table th:nth-child(3),
.resume-member-table th:nth-child(6),
.resume-member-table th:nth-child(7) {
    width: 10%;
}

.resume-member-table th:nth-child(5) {
    width: 12%;
}

.resume-member-table th:nth-child(8) {
    width: 18%;
}

.resume-member-table td {
    overflow-wrap: anywhere;
}

.resume-list-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.resume-list-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.resume-list-person strong {
    color: #1f343b;
    font-size: 14px;
}

.resume-list-name,
.resume-list-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.resume-list-name small {
    color: var(--teal);
    font-size: 12px;
    font-weight: 800;
}

.resume-list-meta strong {
    color: #213941;
    font-size: 13px;
    line-height: 1.45;
}

.resume-list-meta span,
.resume-preview-badges,
.legacy-resume-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.resume-list-meta em,
.resume-preview-badges span,
.legacy-resume-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef7f4;
    color: #397d71;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.resume-table-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.resume-table-actions form {
    display: inline-flex;
}

.resume-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 8px !important;
    border: 1px solid #dce8e6 !important;
    border-radius: 6px;
    background: #ffffff !important;
    color: #48636b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.resume-action-btn.is-primary {
    border-color: rgba(58, 151, 132, .28) !important;
    background: #edf8f5 !important;
    color: var(--teal) !important;
}

.resume-action-btn.is-muted {
    border-color: #e2e2e2 !important;
    background: #f6f6f6 !important;
    color: #7b7b7b !important;
}

.resume-action-btn.is-cert {
    border-color: rgba(200, 72, 46, .2) !important;
    background: #fff3ef !important;
    color: var(--coral) !important;
}

.member-resume-card-actions .resume-action-btn {
    min-height: 32px;
    padding: 0 11px !important;
    border-radius: 7px;
    font-size: 12px !important;
}

.member-resume-card-actions .resume-action-btn.is-primary {
    border-color: rgba(31, 138, 138, .88) !important;
    background: var(--teal) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 16px rgba(31, 138, 138, .16);
}

.member-resume-card-actions .resume-action-btn.is-personal {
    border-color: rgba(238, 138, 33, .46) !important;
    background: #fff1df !important;
    color: #c96713 !important;
    box-shadow: 0 8px 16px rgba(238, 138, 33, .14);
}

.member-resume-card-actions .resume-action-btn.is-share {
    border-color: rgba(31, 138, 138, .22) !important;
    background: #f4fbfa !important;
    color: #137b74 !important;
}

.member-resume-card-actions .resume-action-btn.is-cert {
    border-color: rgba(198, 95, 75, .28) !important;
    background: #fff4ef !important;
    color: #b44b35 !important;
}

.resume-share-dialog[hidden] {
    display: none;
}

.resume-share-dialog {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.resume-share-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(18, 35, 40, .46);
    backdrop-filter: blur(5px);
    cursor: default;
}

.resume-share-panel {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    border: 1px solid rgba(212, 226, 229, .96);
    border-radius: 8px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(17, 45, 54, .24);
}

.resume-share-panel header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e6eff0;
    padding-bottom: 13px;
}

.resume-share-panel header div {
    display: grid;
    gap: 4px;
}

.resume-share-panel header span {
    color: #c96713;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.resume-share-panel header strong {
    color: #1f383f;
    font-size: 19px;
    line-height: 1.25;
}

.resume-share-panel header button {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dbe8e7;
    border-radius: 50%;
    background: #ffffff;
    color: #61777d;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.resume-share-panel header button:hover {
    border-color: rgba(238, 138, 33, .38);
    background: #fff7ec;
    color: #c96713;
}

.resume-share-panel > p[data-resume-share-heading] {
    margin: 14px 0 10px;
    color: #2a454d;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

.resume-share-url-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 14px;
}

.resume-share-url-row input {
    min-width: 0;
    height: 38px;
    border: 1px solid #d8e6e7;
    border-radius: 7px;
    padding: 0 10px;
    background: #f8fbfb;
    color: #455f66;
    font-size: 12px;
}

.resume-share-url-row button {
    min-height: 38px;
    border: 1px solid rgba(238, 138, 33, .34);
    border-radius: 7px;
    padding: 0 12px;
    background: #fff1df;
    color: #c96713;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.resume-share-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.resume-share-options button {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 78px;
    border: 1px solid #e1ebeb;
    border-radius: 8px;
    background: #ffffff;
    color: #344f57;
    font: inherit;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.resume-share-options button:hover {
    border-color: rgba(31, 138, 138, .3);
    background: #f5fbfa;
    box-shadow: 0 10px 22px rgba(17, 45, 54, .08);
    transform: translateY(-1px);
}

.resume-share-options button span {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf8f5;
    color: #157e76;
    font-size: 12px;
    font-weight: 900;
}

.resume-share-options button[data-resume-share-action="wechat"] span,
.resume-share-options button[data-resume-share-action="moments"] span {
    background: #eaf8ee;
    color: #198247;
}

.resume-share-options button[data-resume-share-action="email"] span {
    background: #eef6ff;
    color: #2d69a4;
}

.resume-share-options button[data-resume-share-action="xiaohongshu"] span {
    background: #fff0ef;
    color: #c54b3b;
}

.resume-share-options button[data-resume-share-action="weibo"] span {
    background: #fff3df;
    color: #c96713;
}

.resume-share-options button strong {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
}

.resume-share-status {
    min-height: 18px;
    margin: 12px 0 0;
    color: #698087;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.resume-share-status[data-tone="success"] {
    color: #167268;
}

.resume-share-status[data-tone="warning"] {
    color: #a85c16;
}

body.resume-share-dialog-open {
    overflow: hidden;
}

@media (max-width: 1180px) {
    .member-resume-card {
        grid-template-columns: 1fr;
    }

    .member-resume-card-actions {
        justify-content: flex-start;
        border-left: 0;
        border-top: 1px dashed #dbe8e7;
        padding-top: 13px;
        padding-left: 0;
    }
}

@media (max-width: 760px) {
    .resume-manager-hero,
    .member-resume-card-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .resume-manager-hero {
        padding: 18px 16px;
    }

    .resume-manager-hero .btn {
        width: 100%;
    }

    .resume-manager-summary,
    .member-resume-card-facts {
        grid-template-columns: 1fr;
    }

    .member-resume-card {
        padding: 15px;
    }

    .member-resume-card-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-resume-card-actions .resume-action-btn,
    .member-resume-card-actions form {
        width: 100%;
    }
}

.member-resume-preview {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.resume-preview-sidebar {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 24px 20px;
    background: #26424a;
    color: #eaf4f2;
}

.resume-preview-avatar {
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border: 3px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    font-size: 34px;
    font-weight: 900;
}

.resume-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume-preview-sidebar h2 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
}

.resume-preview-badges span {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.resume-preview-sidebar dl {
    display: grid;
    gap: 11px;
    margin: 0;
}

.resume-preview-sidebar dt,
.resume-preview-grid span {
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    font-weight: 800;
}

.resume-preview-sidebar dd {
    margin: 3px 0 0;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.resume-preview-main {
    display: grid;
    gap: 0;
    padding: 24px 28px;
}

.resume-preview-main section {
    padding: 18px 0;
    border-bottom: 1px solid #e5eeee;
}

.resume-preview-main section:first-child {
    padding-top: 0;
}

.resume-preview-main section:last-child {
    border-bottom: 0;
}

.resume-preview-main h3 {
    margin: 0 0 14px;
    color: #20363e;
    font-size: 18px;
}

.resume-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.resume-preview-grid div {
    padding: 10px 12px;
    border-radius: 7px;
    background: #f6faf9;
}

.resume-preview-grid span {
    display: block;
    color: #71858b;
}

.resume-preview-grid strong {
    display: block;
    margin-top: 4px;
    color: #20363e;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.resume-preview-item {
    display: grid;
    gap: 7px;
    padding: 13px 0;
    border-top: 1px dashed #dce8e6;
}

.resume-preview-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.resume-preview-item div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.resume-preview-item strong {
    color: #20363e;
}

.resume-preview-item span,
.resume-preview-item p {
    color: #5e7279;
    font-size: 13px;
    line-height: 1.65;
}

.resume-preview-item p {
    margin: 0;
}

.resume-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resume-public-body {
    min-width: 320px;
    margin: 0;
    background: #eef3f2;
    color: #1d292c;
}

.resume-share-page {
    min-height: 100vh;
    padding: 28px 0 52px;
    background:
        linear-gradient(180deg, #f8faf9 0, #eef3f2 360px),
        #eef3f2;
}

.resume-share-shell {
    display: grid;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    gap: 18px;
}

.resume-share-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.resume-share-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(29, 41, 44, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .68);
    text-decoration: none;
}

.resume-share-brand:hover {
    border-color: rgba(217, 109, 43, .22);
    background: rgba(255, 255, 255, .9);
}

.resume-share-brand img {
    display: block;
    width: 25px;
    height: 25px;
    opacity: .64;
    object-fit: contain;
}

.resume-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resume-share-actions a,
.resume-share-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(26, 56, 60, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    color: #243436;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.resume-share-actions a:hover,
.resume-share-actions button:hover {
    border-color: rgba(217, 109, 43, .42);
    color: #c75f24;
}

.resume-share-actions button {
    background: #d96d2b;
    border-color: #d96d2b;
    color: #ffffff;
}

.resume-share-actions button:hover {
    color: #ffffff;
    background: #c75f24;
}

.resume-share-actions button[data-resume-print] {
    border-color: rgba(26, 56, 60, .16);
    background: rgba(255, 255, 255, .78);
    color: #243436;
}

.resume-share-actions button[data-resume-print]:hover {
    border-color: rgba(217, 109, 43, .42);
    background: rgba(255, 255, 255, .96);
    color: #c75f24;
}

.resume-share-card {
    overflow: hidden;
    border: 1px solid rgba(22, 45, 48, .12);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(32, 47, 50, .10);
}

.resume-share-hero {
    position: relative;
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr) 274px;
    gap: 30px;
    align-items: center;
    padding: 48px 52px 38px;
    border-bottom: 1px solid #e8eeec;
    background: #ffffff;
}

.resume-share-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #d96d2b, #23565b 56%, #8aa596);
}

.resume-share-avatar {
    overflow: hidden;
    width: 124px;
    height: 174px;
    border: 1px solid rgba(30, 54, 58, .14);
    border-radius: 6px;
    background: #eef3f2;
    box-shadow: 0 12px 26px rgba(32, 47, 50, .12);
}

.resume-share-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.resume-share-identity {
    min-width: 0;
}

.resume-share-kicker,
.resume-share-section-title span,
.resume-share-side section > span {
    display: block;
    color: #d96d2b;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.resume-share-identity h1 {
    margin: 8px 0 8px;
    color: #142326;
    font-size: 36px;
    line-height: 1.14;
    overflow-wrap: anywhere;
}

.resume-share-identity p {
    margin: 0;
    color: #526568;
    font-size: 14px;
}

.resume-share-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.resume-share-tags em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid #dfe8e6;
    border-radius: 999px;
    background: #f7faf9;
    color: #284448;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}

.resume-share-contact {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 26px;
    border-left: 1px solid #dde7e5;
    font-style: normal;
}

.resume-share-contact strong {
    color: #142326;
}

.resume-share-contact strong,
.resume-share-contact p,
.resume-share-contact span {
    font-size: 14px;
}

.resume-share-contact p {
    display: grid;
    gap: 2px;
    margin: 0;
    color: #33484b;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.resume-share-contact span {
    color: #879596;
    font-weight: 800;
}

.resume-share-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid #e8eeec;
    background: #f8faf9;
}

.resume-share-summary div {
    min-height: 92px;
    padding: 18px 20px;
    border-right: 1px solid #e8eeec;
}

.resume-share-summary div:last-child {
    border-right: 0;
}

.resume-share-summary span {
    display: block;
    color: #7a8a8c;
    font-size: 14px;
    font-weight: 800;
}

.resume-share-summary span b,
.resume-share-summary span em {
    font: inherit;
    font-style: normal;
}

.resume-share-summary strong {
    display: block;
    margin-top: 8px;
    color: #1d292c;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.resume-share-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 326px;
    gap: 0;
}

.resume-share-main {
    padding: 42px 52px 48px;
}

.resume-share-side {
    display: grid;
    align-content: start;
    gap: 26px;
    padding: 42px 34px 48px;
    border-left: 1px solid #e8eeec;
    background: #fbfcfc;
}

.resume-share-section {
    padding-bottom: 34px;
    margin-bottom: 34px;
    border-bottom: 1px solid #e8eeec;
}

.resume-share-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.resume-share-section-title {
    display: grid;
    gap: 4px;
    margin-bottom: 18px;
}

.resume-share-section h2,
.resume-share-side h2 {
    margin: 0;
    color: #142326;
    font-size: 18px;
    line-height: 1.3;
}

.resume-share-timeline {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 18px 0 18px 28px;
    border-left: 1px solid #dfe8e6;
}

.resume-share-timeline::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -5px;
    width: 9px;
    height: 9px;
    border: 2px solid #d96d2b;
    border-radius: 50%;
    background: #ffffff;
}

.resume-share-timeline:first-of-type {
    padding-top: 0;
}

.resume-share-timeline:first-of-type::before {
    top: 6px;
}

.resume-share-timeline:last-child {
    padding-bottom: 0;
}

.resume-share-timeline-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.resume-share-timeline strong {
    color: #1d292c;
    font-size: 15px;
    line-height: 1.45;
}

.resume-share-timeline span,
.resume-share-timeline p,
.resume-share-side p,
.resume-share-muted {
    margin: 0;
    color: #5a6f72;
    font-size: 14px;
    line-height: 1.7;
}

.resume-share-timeline span {
    flex: 0 0 auto;
    color: #7f8f91;
    font-size: 14px;
    font-weight: 700;
}

.resume-share-timeline a {
    width: fit-content;
    color: #d96d2b;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.resume-share-timeline a:hover {
    text-decoration: underline;
}

.resume-share-side section {
    display: grid;
    gap: 8px;
    padding-top: 22px;
    border-top: 1px solid #dfe8e6;
}

.resume-share-side section:first-child {
    padding-top: 0;
    border-top: 0;
}

.resume-share-side .resume-share-key-section p {
    color: #182c30;
    line-height: 1.45;
}

.resume-share-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.resume-share-channel-grid button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid #dfe8e6;
    border-radius: 8px;
    background: #ffffff;
    color: #2e4649;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.resume-share-channel-grid button:hover {
    border-color: rgba(217, 109, 43, .34);
    background: #fffaf6;
    color: #c75f24;
}

.resume-share-channel-note {
    color: #8a9a9c;
    font-size: 14px;
    line-height: 1.6;
}

.resume-share-support {
    margin: 5px 4px 0;
    color: rgba(78, 96, 99, .58);
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}

.resume-share-support a {
    color: rgba(78, 96, 99, .72);
    font-weight: 800;
    text-decoration: none;
}

.resume-share-support a:hover {
    color: #d96d2b;
}

@media (max-width: 1080px) {
    .resume-share-hero {
        grid-template-columns: 140px minmax(0, 1fr);
    }

    .resume-share-contact {
        grid-column: 1 / -1;
        padding-top: 24px;
        padding-left: 0;
        border-top: 1px solid #dde7e5;
        border-left: 0;
    }

    .resume-share-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .resume-share-body {
        grid-template-columns: 1fr;
    }

    .resume-share-side {
        border-top: 1px solid #e8eeec;
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .resume-share-page {
        padding: 16px 0 30px;
    }

    .resume-share-shell {
        width: min(100% - 24px, 1180px);
        gap: 12px;
    }

    .resume-share-toolbar,
    .resume-share-hero,
    .resume-share-timeline-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .resume-share-toolbar {
        display: flex;
    }

    .resume-share-actions {
        width: 100%;
    }

    .resume-share-actions a,
    .resume-share-actions button {
        flex: 1 1 128px;
    }

    .resume-share-brand {
        width: 40px;
        height: 40px;
    }

    .resume-share-hero {
        display: flex;
        padding: 32px 24px 28px;
    }

    .resume-share-avatar {
        width: 108px;
        height: 151px;
    }

    .resume-share-identity h1 {
        font-size: 31px;
    }

    .resume-share-summary {
        grid-template-columns: 1fr;
    }

    .resume-share-summary div {
        min-height: 0;
        padding: 15px 24px;
        border-right: 0;
        border-bottom: 1px solid #e8eeec;
    }

    .resume-share-summary div:last-child {
        border-bottom: 0;
    }

    .resume-share-main,
    .resume-share-side {
        padding: 30px 24px;
    }

    .resume-share-support {
        text-align: center;
    }
}

@media print {
    @page {
        margin: 8mm;
        size: A4;
    }

    .resume-share-toolbar {
        display: none !important;
    }

    .resume-public-body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .resume-public-body,
    .resume-share-page {
        background: #ffffff;
    }

    .resume-share-page {
        padding: 0;
    }

    .resume-share-shell {
        width: 100%;
        gap: 5px;
    }

    .resume-share-card {
        border: 1px solid #dfe8e6;
        border-radius: 8px;
        box-shadow: none;
    }

    .resume-share-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        min-height: 188px;
        padding: 20px 40px 22px 28px;
    }

    .resume-share-identity {
        min-height: 178px;
        padding-right: 160px;
    }

    .resume-share-avatar {
        position: absolute;
        top: 30px;
        right: 40px;
        width: 120px;
        height: 168px;
        box-shadow: none;
    }

    .resume-share-contact {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 16px;
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid #dde7e5;
        border-left: 0;
    }

    .resume-share-contact strong {
        grid-column: 1 / -1;
    }

    .resume-share-contact p:nth-of-type(3) {
        margin-left: 10px;
    }

    .resume-share-summary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .resume-share-summary span b,
    .resume-share-summary span em {
        display: block;
    }

    .resume-share-summary div {
        min-height: 74px;
        padding: 12px 14px;
        border-right: 1px solid #e8eeec;
    }

    .resume-share-summary div:nth-child(3n) {
        border-right: 1px solid #e8eeec;
    }

    .resume-share-summary div:nth-child(n+4) {
        border-top: 0;
    }

    .resume-share-summary div:last-child {
        border-right: 0;
    }

    .resume-share-body {
        grid-template-columns: minmax(0, 1fr) 252px;
    }

    .resume-share-main {
        padding: 28px 32px 32px;
    }

    .resume-share-side {
        padding: 28px 24px 32px;
        border-top: 0;
        border-left: 1px solid #e8eeec;
    }

    .resume-share-section {
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .resume-share-timeline {
        padding: 14px 0 14px 24px;
    }

    .resume-share-distribution {
        display: none !important;
    }

    .resume-share-support {
        margin-top: 5px;
    }
}

.site-footer {
    background: #0f4f53;
    color: rgba(255, 255, 255, .75);
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 450px minmax(170px, .7fr) minmax(150px, .65fr) minmax(286px, .95fr);
    gap: 16px;
    padding: 46px 0;
}

.site-footer .footer-grid > .footer-col:nth-of-type(2) {
    padding-left: 50px;
}

.footer-logo {
    width: 146px;
    margin-bottom: 16px;
}

.footer-logo img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
}

.site-footer .footer-grid p {
    max-width: 450px;
    margin: 0;
    color: rgba(255, 255, 255, .75);
    line-height: 1.75;
}

.footer-col h4 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 16px;
}

.footer-col a {
    display: block;
    padding: 6px 0;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
}

.footer-col .footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    line-height: 1.55;
}

.footer-contact-item svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin-top: 3px;
    color: #9ef7ed;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.footer-contact-item span {
    min-width: 0;
}

.footer-address span {
    white-space: nowrap;
}

.footer-col a:hover {
    color: #ffffff;
}

.footer-wechat-qr {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin-top: 16px;
}

.footer-wechat-qr img {
    display: block;
    width: 83px;
    flex: 0 0 83px;
    height: 83px;
    border: 1px solid rgba(205, 216, 214, .95);
    border-radius: 4px;
    padding: 3px;
    background: #ffffff;
    object-fit: contain;
}

.site-footer .copyright {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 18px 0;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
}

.admin-body {
    min-height: 100vh;
    background: #eef4f3;
}

.admin-login-body {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(16, 47, 54, .96) 0%, rgba(18, 58, 62, .92) 58%, rgba(238, 244, 243, 1) 58.2%, rgba(248, 251, 250, 1) 100%);
}

.admin-login-page {
    display: grid;
    grid-template-columns: minmax(320px, .92fr) minmax(360px, 460px);
    gap: 34px;
    align-items: center;
    width: min(1120px, calc(100% - 40px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 42px 0;
}

.admin-login-hero {
    display: grid;
    gap: 34px;
    color: #ffffff;
}

.admin-login-brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 12px;
}

.admin-login-brand .brand-mark {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: #ffffff;
    color: var(--teal);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .14);
}

.admin-login-brand strong,
.admin-login-brand small {
    display: block;
}

.admin-login-brand strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.25;
}

.admin-login-brand small {
    color: rgba(255, 255, 255, .86);
    font-size: 12px;
}

.admin-login-copy {
    max-width: 620px;
}

.admin-login-copy > span,
.admin-login-card-head > span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.admin-login-copy > span {
    color: #d7eeee;
}

.admin-login-card-head > span {
    color: #17756f;
}

.admin-login-copy h1 {
    max-width: 680px;
    margin: 12px 0 14px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.22;
}

.admin-login-copy p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 1.8;
}

.admin-login-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
}

.admin-login-facts div {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 16px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
}

.admin-login-facts strong,
.admin-login-facts span {
    display: block;
    color: inherit;
    font: inherit;
}

.admin-login-facts strong {
    font-weight: 400;
}

.admin-login-facts span {
    margin-top: 6px;
    color: rgba(255, 255, 255, .82);
}

.admin-login-card {
    display: grid;
    gap: 16px;
    padding: 28px;
    border: 1px solid rgba(220, 230, 234, .9);
    border-radius: 8px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 26px 64px rgba(15, 45, 52, .18);
}

.admin-login-card-head h2 {
    margin: 8px 0 4px;
    color: #1f343b;
    font-size: 24px;
    line-height: 1.25;
}

.admin-login-card-head p {
    margin: 0;
    color: #536870;
    font-size: 13px;
}

.admin-login-form {
    display: grid;
    gap: 14px;
}

.admin-login-form label {
    display: grid;
    gap: 7px;
}

.admin-login-form label span {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.admin-login-form input[type="text"],
.admin-login-form input[type="password"],
.admin-login-form input:not([type]) {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
}

.admin-login-form input::placeholder {
    color: #7b8e95;
}

.admin-login-form input:focus {
    border-color: rgba(42, 132, 120, .72);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(42, 132, 120, .1);
}

.admin-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #536870;
    font-size: 12px;
    font-weight: 800;
}

.admin-login-options label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.admin-login-options input {
    width: 15px;
    height: 15px;
}

.admin-login-options a {
    color: var(--teal);
}

.admin-login-form .btn {
    width: 100%;
    min-height: 44px;
}

.admin-login-note {
    display: grid;
    gap: 4px;
    padding-top: 14px;
    border-top: 1px dashed rgba(168, 186, 191, .72);
}

.admin-login-note strong {
    color: #38525b;
    font-size: 12px;
}

.admin-login-note span {
    color: #5a6f76;
    font-size: 12px;
    line-height: 1.55;
}

.admin-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-sidebar {
    padding: 24px 18px;
    background: #102126;
    color: #d9e7e9;
    max-height: 100vh;
    overflow-y: auto;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand-title span {
    display: inline-block;
    margin-right: 4px;
    font-size: 18px;
    line-height: 1.15;
}

.admin-brand-title em {
    display: inline-block;
    color: #c6d9dc;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.15;
}

.admin-brand small {
    color: #9eb3b8;
    font-size: 12px;
}

.admin-nav {
    display: grid;
    gap: 6px;
}

.admin-nav a,
.admin-nav button {
    min-height: 40px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #d9e7e9;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.admin-nav a:hover,
.admin-nav button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.admin-nav a.active,
.admin-nav button.active {
    background: rgba(67, 169, 161, 0.2);
    color: #ffffff;
}

.admin-nav-group {
    display: grid;
    gap: 6px;
}

.admin-nav-parent {
    justify-content: space-between;
    font-weight: 800;
}

.admin-nav-parent::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #bdd0d3;
    font-size: 14px;
    line-height: 1;
}

.admin-nav-group.is-open .admin-nav-parent::after {
    content: "-";
}

.admin-nav-sub {
    display: grid;
    gap: 4px;
    margin: 2px 0 8px;
    padding: 10px 0 10px 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.admin-nav-group:not(.is-open) .admin-nav-sub {
    display: none;
}

.admin-nav-sub span,
.admin-nav-details summary {
    margin: 8px 0 2px;
    padding-left: 10px;
    color: #8fabaf;
    font-size: 12px;
    font-weight: 800;
}

.admin-nav-sub span:first-child,
.admin-nav-details:first-child summary {
    margin-top: 0;
}

.admin-nav-details {
    display: grid;
    gap: 4px;
}

.admin-nav-details summary {
    list-style: none;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.admin-nav-details summary::-webkit-details-marker {
    display: none;
}

.admin-nav-details summary::after {
    content: "+";
    margin-left: auto;
    padding-right: 8px;
    color: #bdd0d3;
}

.admin-nav-details[open] summary::after {
    content: "-";
}

.admin-nav-sub a,
.admin-nav-details span {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    color: #bdd0d3;
    font-size: 13px;
}

.admin-nav-details span {
    display: flex;
    align-items: center;
    color: #8fabaf;
}

.admin-main {
    min-width: 0;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 0 28px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.admin-topbar h1 {
    margin: 0;
    font-size: 22px;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

.admin-account-menu {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 5px 6px 5px 7px;
    border: 1px solid #dce7e6;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #f8fbfb);
    box-shadow: 0 8px 22px rgba(29, 66, 72, .08);
    color: #24474e;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.admin-account-avatar {
    position: relative;
    display: inline-flex;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(45, 126, 116, .28);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 34%, #fff7df 0 5px, transparent 6px),
        radial-gradient(circle at 50% 74%, #2d7e74 0 10px, transparent 11px),
        linear-gradient(145deg, #ebf8f5, #ffffff);
    box-shadow: inset 0 -2px 0 rgba(45, 126, 116, .08);
}

.admin-account-avatar::before,
.admin-account-avatar::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
}

.admin-account-avatar::before {
    top: 7px;
    width: 10px;
    height: 10px;
    background: #283f45;
}

.admin-account-avatar::after {
    bottom: 5px;
    width: 18px;
    height: 10px;
    background: #d85649;
}

.admin-account-name {
    max-width: 132px;
    overflow: hidden;
    color: #25464d;
    line-height: 1;
    text-overflow: ellipsis;
}

.admin-account-menu form {
    margin: 0;
}

.admin-account-menu button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(198, 95, 75, .28);
    border-radius: 999px;
    background: #fff4f1;
    color: var(--coral);
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.admin-account-menu button:hover {
    border-color: rgba(198, 95, 75, .45);
    background: #ffeae5;
}

.admin-content {
    padding: 28px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.metric-card {
    min-height: 118px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.metric-card span {
    color: var(--muted);
    font-size: 13px;
}

.metric-card strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
}

.admin-application-metrics {
    grid-template-columns: repeat(6, minmax(118px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.admin-application-metrics .metric-card {
    min-height: 76px;
    padding: 12px 14px;
}

.admin-application-metrics .metric-card strong {
    font-size: 24px;
}

.admin-application-metrics .metric-danger {
    color: var(--coral);
}

.student-application-metrics {
    grid-template-columns: repeat(9, minmax(104px, 1fr));
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.student-application-metrics .metric-card {
    min-height: 66px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.student-application-metrics .metric-card span {
    display: block;
    overflow: hidden;
    color: #6c757d;
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-application-metrics .metric-card strong {
    margin-top: 5px;
    font-size: 22px;
    line-height: 1.1;
}

.student-application-metrics a.metric-card:hover,
.student-application-metrics .metric-card.is-active {
    border-color: rgba(226, 104, 48, .52);
    box-shadow: 0 10px 22px rgba(226, 104, 48, .12);
}

.student-application-metrics a.metric-card:hover {
    transform: translateY(-1px);
}

.student-application-metrics .metric-card.is-active {
    background: #fff7ed;
}

.metric-warning {
    color: var(--amber);
}

.admin-panel {
    padding: 22px;
}

.admin-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.admin-panel h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

.admin-panel h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.admin-panel p {
    color: var(--muted);
}

.compact-panel {
    padding-top: 18px;
    padding-bottom: 18px;
}

.admin-collapsible {
    margin-top: 16px;
}

.admin-collapsible summary {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    color: #38525b;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.admin-actions.compact {
    align-items: center;
    margin-top: 0;
}

.admin-filter {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.application-filter-panel {
    padding: 16px 18px;
}

.application-filter-panel .admin-collapsible {
    margin-top: 0;
}

.application-filter-panel .admin-collapsible summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 32px;
    color: #142126;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
}

.application-filter-panel .admin-collapsible summary small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.application-filter-panel .admin-collapsible summary::-webkit-details-marker {
    display: none;
}

.application-filter-panel .admin-filter {
    gap: 8px;
    margin-top: 12px;
}

.application-filter-panel:not(.result-filter-panel):not(.certificate-filter-panel) .admin-filter {
    grid-template-columns: minmax(136px, .96fr) minmax(150px, 1.06fr) minmax(130px, .9fr) minmax(126px, .86fr) minmax(96px, .66fr) minmax(96px, .66fr) minmax(108px, .72fr) 52px 52px;
    align-items: center;
}

.application-filter-panel .admin-filter .btn {
    align-self: center;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1;
}

.application-export-strip {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0;
}

.export-strip-title {
    color: #1f343b;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

.application-export-strip .admin-export-actions {
    padding-left: 0;
    border-left: 0;
}

.application-export-strip .btn {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 12px;
    font-size: 13px;
}

.student-application-export-panel {
    position: sticky;
    top: 0;
    z-index: 12;
    margin-top: 5px;
    padding: 10px 14px;
    border-color: rgba(220, 230, 234, .96);
    box-shadow: 0 10px 22px rgba(20, 56, 65, .08);
}

.student-application-export-panel .application-export-strip {
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
}

.student-application-export-panel .export-strip-title {
    font-size: 14px;
    line-height: 1;
}

.student-application-export-panel .bulk-select-control,
.student-application-export-panel .application-export-strip .btn {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0 10px;
}

.review-export-panel {
    position: sticky;
    top: 0;
    z-index: 12;
    padding: 10px 14px;
    border-color: rgba(220, 230, 234, .96);
    box-shadow: 0 10px 22px rgba(20, 56, 65, .08);
}

.review-export-panel .application-export-strip {
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
}

.review-export-panel .export-strip-title {
    font-size: 14px;
    line-height: 1;
}

.review-export-panel .bulk-select-control,
.review-export-panel .application-export-strip .btn {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0 10px;
}

.admin-application-list-panel .btn {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 12px;
}

.admin-filter input,
.admin-filter select,
.admin-bulk-form select,
.admin-field input,
.admin-field select,
.admin-field textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    background: #ffffff;
    font: inherit;
}

.application-filter-panel .admin-filter input,
.application-filter-panel .admin-filter select {
    height: 38px;
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
}

.table-shell {
    overflow: hidden;
}

.admin-table-shell {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.admin-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    background: var(--soft);
    color: #36515a;
    font-size: 13px;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table td strong,
.admin-table td span {
    display: block;
}

.admin-table td span {
    color: var(--muted);
    font-size: 13px;
}

.database-panel-head {
    align-items: center;
}

.database-panel-head p {
    max-width: 720px;
    margin: 4px 0 0;
}

.database-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
}

.database-metrics .metric-card {
    min-height: 82px;
    padding: 14px 16px;
}

.database-metrics .metric-card strong {
    overflow: hidden;
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.database-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(168, 186, 191, .72);
    color: #38525b;
    font-size: 13px;
}

.database-notice span {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.database-warning {
    margin-top: 12px;
    border: 1px solid rgba(198, 95, 75, .22);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff7f4;
    color: var(--coral);
    font-size: 13px;
    font-weight: 800;
}

.database-list-panel {
    padding: 18px;
}

.database-list-toolbar {
    align-items: center;
    margin-bottom: 12px;
}

.database-list-tip {
    justify-self: end;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.database-table {
    min-width: 1060px;
}

.database-table th:nth-child(4),
.database-table td:nth-child(4) {
    width: 520px;
}

.database-actions {
    display: grid;
    grid-template-columns: max-content minmax(210px, 1fr) minmax(210px, 1fr);
    align-items: center;
    gap: 8px;
}

.database-confirm-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) max-content;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.database-confirm-form input {
    width: 100%;
    height: 36px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 9px;
    background: #ffffff;
    color: #1f343b;
    font: inherit;
    font-size: 12px;
}

.database-restore-form input {
    border-color: rgba(198, 95, 75, .28);
    background: #fffaf8;
}

.database-actions .btn {
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.user-metrics,
.user-group-metrics {
    grid-template-columns: repeat(6, minmax(118px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.user-group-metrics {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.user-metrics .metric-card,
.user-group-metrics .metric-card {
    min-height: 78px;
    padding: 12px 14px;
}

.user-metrics .metric-card strong,
.user-group-metrics .metric-card strong {
    font-size: 24px;
}

.user-filter {
    grid-template-columns: minmax(128px, .8fr) minmax(142px, .92fr) minmax(118px, .72fr) minmax(132px, .78fr) minmax(132px, .78fr) minmax(210px, 1.38fr) 58px 58px;
    align-items: center;
}

.user-group-filter {
    grid-template-columns: minmax(260px, 1fr) 58px 58px;
    align-items: center;
    max-width: 620px;
}

.user-list-panel,
.user-group-panel {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

.user-list-toolbar {
    align-items: center;
}

.user-group-toolbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.user-list-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.user-bulk-form {
    display: grid;
    grid-template-columns: minmax(118px, .9fr) minmax(136px, .95fr) max-content;
    align-items: center;
    gap: 8px;
}

.user-record-list,
.user-group-list {
    display: grid;
    gap: 10px;
}

.user-record {
    display: grid;
    grid-template-columns: 28px 52px minmax(136px, .9fr) minmax(156px, 1.02fr) minmax(162px, 1.02fr) minmax(158px, .92fr) minmax(86px, .52fr) minmax(210px, 1.1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 13px;
    background: #ffffff;
}

.user-record.is-user-pending {
    border-color: rgba(185, 131, 36, .26);
    background: linear-gradient(90deg, rgba(255, 248, 236, .76), #ffffff 26%);
    box-shadow: inset 4px 0 0 rgba(185, 131, 36, .58);
}

.user-record.is-user-locked {
    border-color: rgba(198, 95, 75, .26);
    background: linear-gradient(90deg, rgba(255, 240, 236, .76), #ffffff 26%);
    box-shadow: inset 4px 0 0 rgba(198, 95, 75, .62);
}

.user-check {
    display: grid;
    place-items: center;
}

.user-check input {
    width: 18px;
    height: 18px;
}

.user-avatar-cell {
    display: grid;
    place-items: center;
}

.user-avatar-cell img,
.user-avatar-cell span {
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.user-avatar-cell img {
    object-fit: cover;
}

.user-avatar-cell span {
    display: grid;
    place-items: center;
    background: #e8f3f1;
    color: var(--teal);
    font-size: 18px;
    font-weight: 900;
}

.user-identity-cell,
.user-contact-cell,
.user-group-cell,
.user-application-cell,
.user-group-main,
.user-group-count,
.user-group-latest {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.user-identity-cell strong,
.user-contact-cell strong,
.user-group-cell strong,
.user-application-cell strong,
.user-group-main strong,
.user-group-count strong,
.user-group-latest strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-identity-cell span,
.user-identity-cell small,
.user-contact-cell span,
.user-contact-cell small,
.user-group-cell span,
.user-group-cell small,
.user-application-cell span,
.user-application-cell small,
.user-group-main span,
.user-group-count span,
.user-group-latest span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-status-cell {
    display: flex;
    justify-content: flex-start;
}

.user-status-cell .state {
    min-height: 32px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 900;
}

.user-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}

.user-actions-cell form {
    margin: 0;
}

.user-actions-cell .btn,
.user-list-tools .btn,
.user-bulk-form .btn {
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.user-bulk-form select,
.user-dialog-form input,
.user-dialog-form select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 9px;
    background: #ffffff;
    color: #1f343b;
    font: inherit;
    font-size: 13px;
}

.user-dialog {
    width: min(880px, calc(100vw - 32px));
}

.user-dialog-form {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
}

.user-dialog-section {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fbfcfc;
}

.user-dialog-section h4 {
    margin: 0;
    color: #1f343b;
    font-size: 15px;
}

.user-edit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.user-edit-grid label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #38525b;
    font-size: 12px;
    font-weight: 800;
}

.user-edit-wide {
    grid-column: span 2;
}

.user-dialog-form input[readonly] {
    background: #f4f7f7;
    color: var(--muted);
}

.user-application-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.user-application-summary div {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(220, 230, 234, .9);
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
}

.user-application-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.user-application-summary strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-group-record {
    display: grid;
    grid-template-columns: minmax(160px, .9fr) minmax(104px, .52fr) minmax(320px, 1.35fr) minmax(156px, .82fr) max-content;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 13px 14px;
    background: #ffffff;
}

.user-group-states {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.user-group-states .state {
    min-height: 30px;
    font-weight: 900;
}

.user-group-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.user-group-dialog {
    width: min(520px, calc(100vw - 32px));
}

.user-group-dialog-form {
    grid-template-columns: 120px minmax(0, 1fr);
}

.user-group-dialog-tip {
    grid-column: 1 / -1;
    border: 1px dashed rgba(31, 138, 138, .22);
    border-radius: 7px;
    padding: 10px 12px;
    background: #f6fbfa;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.user-group-dialog-tip code {
    border-radius: 5px;
    padding: 2px 5px;
    background: #eef4f3;
    color: #285560;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.user-group-note p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.user-group-note code {
    border-radius: 5px;
    padding: 2px 5px;
    background: #eef4f3;
    color: #285560;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.user-oauth-panel {
    display: grid;
    gap: 14px;
}

.user-oauth-form {
    display: grid;
    gap: 14px;
}

.user-oauth-main-row {
    display: grid;
    grid-template-columns: minmax(360px, 1.35fr) minmax(240px, .65fr);
    gap: 12px;
}

.user-oauth-title-field {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    color: #38525b;
    font-size: 13px;
    font-weight: 800;
}

.user-oauth-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 12px;
}

.user-oauth-provider-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfdfd;
}

.user-oauth-provider-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 10px;
}

.user-oauth-provider-head h3 {
    margin: 0;
    color: #1f343b;
    font-size: 16px;
    line-height: 1.35;
}

.user-oauth-provider-head span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.user-oauth-mini-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #1f343b;
    font-size: 13px;
    font-weight: 800;
}

.user-oauth-mini-toggle input {
    width: 16px;
    height: 16px;
}

.user-oauth-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.user-oauth-config-grid label:nth-child(3) {
    grid-column: 1 / -1;
}

.user-oauth-config-grid label,
.user-oauth-callback,
.user-oauth-callback-base,
.user-oauth-title-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #38525b;
    font-size: 13px;
    font-weight: 800;
}

.user-oauth-config-grid input,
.user-oauth-config-grid select,
.user-oauth-callback input,
.user-oauth-callback-base input,
.user-oauth-title-field input,
.user-oauth-search input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 10px;
    background: #ffffff;
    color: #1f343b;
    font: inherit;
    font-size: 13px;
}

.user-oauth-toggle {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 12px !important;
    border: 1px dashed rgba(31, 138, 138, .24);
    border-radius: 8px;
    padding: 12px 14px;
    background: #f7fbfa;
}

.user-oauth-toggle input {
    width: 20px;
    min-height: 20px;
}

.user-oauth-toggle span {
    display: grid;
    gap: 2px;
}

.user-oauth-toggle strong {
    color: #1f343b;
    font-size: 14px;
}

.user-oauth-toggle small,
.user-oauth-callback small,
.user-oauth-callback-base small,
.user-oauth-actions span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.user-oauth-callback,
.user-oauth-callback-base {
    border-top: 1px dashed var(--line);
    padding-top: 14px;
}

.user-oauth-callback-base {
    margin-top: 2px;
}

.user-oauth-callback input[readonly] {
    background: #f6f9f9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.user-oauth-callback small strong {
    color: #c64536;
    font-size: 12px;
}

.user-oauth-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.user-oauth-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.user-oauth-search input {
    width: 260px;
}

.user-oauth-list {
    display: grid;
    gap: 10px;
}

.user-oauth-record {
    display: grid;
    grid-template-columns: 54px minmax(150px, 1fr) minmax(132px, .75fr) minmax(132px, .75fr) minmax(158px, .85fr) 92px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    background: #ffffff;
}

.user-oauth-record-head {
    min-height: 38px;
    padding: 0 14px;
    border-color: #d7e2e0;
    background: #f4f8f8;
    color: #4f6970;
    font-size: 12px;
    font-weight: 900;
}

.user-oauth-record-head span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-oauth-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #eaf4f2;
    color: var(--teal);
    font-weight: 900;
}

.user-oauth-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-oauth-member,
.user-oauth-identity,
.user-oauth-time {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.user-oauth-member strong,
.user-oauth-identity strong,
.user-oauth-time strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-oauth-identity strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.user-oauth-member span,
.user-oauth-member small,
.user-oauth-identity span,
.user-oauth-time span,
.user-oauth-time small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-oauth-row-actions {
    display: flex;
    justify-content: flex-end;
}

.user-oauth-row-actions form {
    margin: 0;
}

.user-oauth-row-actions .btn,
.user-oauth-search .btn,
.user-oauth-actions .btn {
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.user-oauth-row-actions .btn {
    min-width: 82px;
}

.check-column {
    width: 44px;
    text-align: center !important;
}

.check-column input {
    width: 18px;
    height: 18px;
}

.mt-panel {
    margin-top: 18px;
}

.table-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 110px;
    gap: 16px;
    align-items: center;
    min-height: 56px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
}

.table-row:last-child {
    border-bottom: 0;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    width: max-content;
    padding: 0 10px;
    border-radius: 999px;
    background: #e6f3f1;
    color: var(--teal);
    font-size: 13px;
    font-weight: 700;
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    flex-wrap: wrap;
}

.admin-page-size-form {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #38525b;
    font-size: 13px;
    font-weight: 800;
}

.admin-page-size-form input {
    width: 64px;
    height: 34px;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 8px;
    background: #ffffff;
    color: #1f343b;
    font: inherit;
    text-align: center;
}

.admin-page-size-form .btn {
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.admin-pagination-nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 12px;
    min-width: 520px;
    padding: 0;
    border: 0;
    background: transparent;
}

.admin-pagination-summary {
    color: #38525b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.admin-pagination-summary span {
    margin-left: 10px;
    color: var(--muted);
    font-weight: 600;
}

.admin-pagination-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.admin-page-link,
.admin-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    color: #38525b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.admin-page-link:hover {
    border-color: rgba(31, 138, 138, 0.45);
    background: #eef8f6;
    color: var(--teal);
}

.admin-page-link.is-current {
    border-color: var(--teal);
    background: var(--teal);
    color: #ffffff;
}

.admin-page-link.is-disabled {
    background: #f5f8f7;
    color: #97a5aa;
    cursor: not-allowed;
}

.admin-page-ellipsis {
    min-width: 28px;
    border-color: transparent;
    background: transparent;
    color: var(--muted);
    padding: 0 4px;
}

.admin-application-list-panel {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

.admin-application-list-panel.mt-panel {
    margin-top: 12px;
}

.admin-list-toolbar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 12px 18px;
}

.admin-list-toolbar h2 {
    margin: 0;
}

.admin-list-title {
    display: inline-flex;
    align-items: baseline;
    flex: 0 0 auto;
    gap: 10px;
    white-space: nowrap;
}

.admin-list-title span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.admin-list-tools {
    display: grid;
    grid-template-columns: minmax(286px, 360px) max-content max-content;
    align-items: center;
    gap: 10px;
    justify-content: end;
    justify-items: end;
    min-width: 0;
}

.application-name-search-form {
    display: grid;
    grid-template-columns: max-content minmax(150px, 1fr) 58px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding-right: 12px;
    border-right: 1px solid var(--line);
}

.application-name-search-form span {
    color: #38525b;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.application-name-search-form input {
    width: 100%;
    height: 38px;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    background: #ffffff;
    color: #1f343b;
    font: inherit;
    font-size: 13px;
}

.application-name-search-form .btn {
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
}

.bulk-select-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #38525b;
    font-size: 13px;
    font-weight: 800;
}

.bulk-select-control input {
    width: 17px;
    height: 17px;
}

.application-record-list {
    display: grid;
    gap: 12px;
}

.application-record {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.application-record.is-review-attention {
    border-color: rgba(210, 85, 36, .26);
    background: linear-gradient(90deg, rgba(255, 247, 237, .74), #ffffff 28%);
    box-shadow: inset 4px 0 0 rgba(210, 85, 36, .62);
}

.application-record.is-review-rejected {
    border-color: rgba(181, 91, 78, .36);
    background: linear-gradient(90deg, rgba(255, 243, 239, .84), #ffffff 30%);
}

.record-check {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding-top: 6px;
}

.record-check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.record-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.record-head {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
}

.record-person {
    flex: 1 1 320px;
    min-width: 0;
}

.record-person-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.record-person-line strong {
    color: #1f343b;
    font-size: 18px;
}

.record-person-line span,
.record-person-line small,
.record-grid span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.record-person-line span,
.record-person-line small {
    display: inline;
}

.notice-status-line {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.record-status-stack {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    justify-content: flex-end;
    gap: 6px;
}

.record-status-inline {
    display: grid;
    align-content: start;
    justify-items: stretch;
    min-width: 92px;
    margin-left: 0;
    border-left: 1px solid var(--line);
    padding-left: 10px;
    gap: 6px;
}

.record-status-inline .state {
    width: 100%;
    justify-content: center;
}

.record-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(288px, 1.04fr) minmax(220px, 1fr) minmax(320px, 1.36fr);
    gap: 0;
}

.record-grid > div {
    min-width: 0;
    padding: 0 12px;
    border-left: 1px solid var(--line);
}

.record-grid > div:first-child {
    padding-left: 12px;
}

.record-grid > .record-exam-info,
.record-grid > .record-identity-info {
    padding-left: 12px;
}

.record-photo-column {
    position: absolute;
    top: 0;
    left: -70px;
    display: grid;
    grid-template-columns: 55px max-content;
    align-content: start;
    align-items: start;
    gap: 8px;
    width: 148px;
    padding: 0 !important;
    border-left: 0 !important;
}

.record-photo-box {
    display: grid;
    justify-items: center;
    gap: 5px;
    margin-top: 0;
}

.record-photo-thumb,
.record-photo-placeholder {
    width: 55px;
    height: 68px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f4f7f7;
}

.record-photo-thumb {
    object-fit: cover;
}

.record-photo-placeholder {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.2 !important;
    text-align: center;
}

.record-photo-link {
    display: block;
    width: 55px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

.record-contact-info {
    position: relative;
    min-width: 0;
    border-left: 0 !important;
    padding-left: 112px !important;
    padding-right: 3px !important;
}

.record-contact-info::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 98px;
    border-left: 1px solid var(--line);
}

.record-exam-info {
    padding-right: 3px !important;
}

.record-identity-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.record-status-photo {
    box-sizing: border-box;
    min-width: 94px;
    border-left: 1px solid var(--line);
    padding-left: 8px;
    gap: 5px;
}

.record-status-photo .state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 84px;
    min-width: 0;
    min-height: 23px;
    border-radius: 7px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.record-identity-copy {
    min-width: 0;
}

.record-label {
    margin-bottom: 4px;
    color: #38525b !important;
    font-size: 12px !important;
    font-weight: 900;
}

.record-grid strong {
    display: block;
    color: #1f343b;
    font-size: 14px;
    line-height: 1.45;
}

.record-ok {
    color: var(--green) !important;
}

.record-danger {
    color: var(--coral) !important;
}

.record-actions {
    display: grid;
    gap: 8px;
    min-width: 86px;
}

.record-actions form,
.record-actions .btn {
    width: 100%;
}

.record-actions .btn {
    justify-content: center;
}

.record-actions-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 250px;
    margin-left: auto;
    gap: 8px;
}

.record-actions-inline form,
.record-actions-inline .btn {
    width: auto;
}

.record-actions-inline .btn {
    min-width: 58px;
}

.application-review-dialog {
    width: min(560px, calc(100% - 32px));
}

.application-review-form {
    grid-template-columns: 1fr;
}

.application-review-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.application-review-summary div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7fbfa;
}

.application-review-summary span,
.application-review-reason small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.application-review-summary strong {
    display: block;
    margin-top: 4px;
    color: #1f343b;
    font-size: 13px;
    line-height: 1.45;
}

.application-review-status,
.application-review-reason,
.application-review-summary,
.application-review-form .course-dialog-actions {
    grid-column: 1 / -1;
}

.application-review-form textarea {
    width: 100%;
    min-height: 104px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    background: #ffffff;
    font: inherit;
}

.application-review-reason.is-required textarea {
    border-color: rgba(181, 91, 78, .78);
    background: #fffafa;
}

.application-review-reason.is-required small {
    color: var(--coral);
}

.admin-edit-dialog {
    width: min(1180px, calc(100vw - 42px));
    height: min(780px, calc(100vh - 42px));
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 8px;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(13, 35, 42, .22);
}

.admin-edit-dialog::backdrop {
    background: rgba(12, 31, 37, .46);
}

.admin-edit-dialog .result-dialog-head {
    min-height: 56px;
    border-bottom: 1px solid var(--line);
}

.admin-edit-dialog-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-edit-dialog-actions .btn,
.admin-edit-dialog-actions button {
    min-height: 34px;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13px;
}

.admin-edit-dialog iframe {
    display: block;
    width: 100%;
    height: calc(100% - 57px);
    border: 0;
    background: #eef4f3;
}

.result-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.result-metrics .metric-card {
    min-height: 96px;
    padding: 14px 16px;
}

.result-metrics .metric-card strong {
    font-size: 24px;
}

.result-metrics .metric-danger {
    color: var(--coral);
}

.result-rate-card strong {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 24px;
    line-height: 1.25;
}

.result-rate-card strong b {
    font-weight: 900;
}

.result-rate-card strong em {
    color: #9aadb2;
    font-style: normal;
    font-weight: 900;
}

.result-entry-panel {
    display: grid;
    margin-bottom: 12px;
    padding: 15px 18px;
}

.result-entry-line {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.result-entry-title {
    display: grid;
    gap: 4px;
    min-width: 150px;
}

.result-entry-title h2 {
    margin: 0;
    color: #142126;
    font-size: 18px;
    line-height: 1.2;
}

.result-entry-title small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.result-filter-metrics {
    margin: 0;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(168, 186, 191, 0.8);
}

.result-filter-metrics .metric-card {
    min-height: 70px;
    padding: 9px 12px;
}

.result-filter-metrics a.metric-card {
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.result-filter-metrics a.metric-card:hover,
.result-filter-metrics .metric-card.is-active {
    border-color: rgba(237, 116, 39, .46);
    box-shadow: 0 12px 26px rgba(237, 116, 39, .12);
}

.result-filter-metrics a.metric-card:hover {
    transform: translateY(-1px);
}

.result-filter-metrics .metric-card.is-active {
    background: #fff7ed;
}

.result-filter-metrics .metric-card span {
    font-size: 12px;
    line-height: 1.25;
}

.result-filter-metrics .metric-card strong {
    margin-top: 4px;
    font-size: 22px;
    line-height: 1.2;
}

.result-filter-metrics .result-rate-card strong {
    font-size: 22px;
}

.result-filter-panel .admin-collapsible summary small {
    color: #5e747a;
    font-size: 12px;
}

.result-filter-panel .admin-filter {
    grid-template-columns: minmax(170px, .95fr) minmax(220px, 1.3fr) minmax(220px, 1.3fr) minmax(180px, 1fr) minmax(120px, .64fr) 52px 52px;
    align-items: center;
    gap: 7px;
}

.result-filter-panel .admin-filter .btn {
    justify-content: center;
    min-width: 52px;
    padding-right: 8px;
    padding-left: 8px;
}

.certificate-filter-panel .admin-filter {
    grid-template-columns: minmax(160px, .98fr) minmax(200px, 1.18fr) minmax(200px, 1.18fr) minmax(160px, .92fr) minmax(120px, .7fr) minmax(130px, .76fr) 52px 52px;
    align-items: center;
    gap: 7px;
}

.certificate-filter-panel .admin-filter .btn {
    justify-content: center;
    min-width: 52px;
    padding-right: 8px;
    padding-left: 8px;
}

.express-filter-panel .admin-filter {
    grid-template-columns: minmax(160px, .95fr) minmax(200px, 1.16fr) minmax(200px, 1.16fr) minmax(160px, .92fr) minmax(130px, .76fr) minmax(126px, .74fr) 52px 52px;
    align-items: center;
    gap: 7px;
}

.express-filter-panel .admin-filter .btn {
    justify-content: center;
    min-width: 52px;
    padding-right: 8px;
    padding-left: 8px;
}

.result-single-strip {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    padding: 11px 12px;
    border: 1px dashed rgba(168, 186, 191, 0.8);
    border-radius: 8px;
    background: #fbfdfd;
}

.result-single-form {
    display: grid;
    grid-template-columns: minmax(170px, 1.1fr) minmax(210px, 1.3fr) 118px minmax(210px, 1fr) max-content;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.result-list-tip {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.result-single-form input,
.result-single-form select {
    width: 100%;
    height: 38px;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    background: #ffffff;
    color: #1f343b;
    font-size: 13px;
}

.result-single-form .btn {
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    white-space: nowrap;
}

.result-list-panel {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

.result-list-toolbar {
    align-items: center;
}

.result-list-tools {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 12px;
    min-width: 0;
}

.result-name-search-form {
    width: min(360px, 42vw);
    flex: 0 1 360px;
}

.result-list-tools .result-list-tip {
    justify-self: end;
}

.result-record-list {
    display: grid;
    gap: 10px;
}

.result-record {
    display: grid;
    grid-template-columns: minmax(142px, .92fr) minmax(82px, .52fr) minmax(160px, 1.08fr) minmax(158px, .92fr) minmax(190px, 1fr) minmax(220px, 1fr);
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.result-record.is-missing-result-file {
    border-color: rgba(210, 85, 36, .26);
    background: linear-gradient(90deg, rgba(255, 247, 237, .74), #ffffff 28%);
    box-shadow: inset 4px 0 0 rgba(210, 85, 36, .62);
}

.certificate-record {
    grid-template-columns: minmax(148px, .95fr) minmax(116px, .62fr) minmax(184px, 1.14fr) minmax(180px, 1.02fr) minmax(146px, .74fr) minmax(218px, .98fr);
}

.certificate-record.is-missing-certificate-file {
    border-color: rgba(210, 85, 36, .26);
    background: linear-gradient(90deg, rgba(255, 247, 237, .72), #ffffff 26%);
    box-shadow: inset 4px 0 0 rgba(210, 85, 36, .62);
}

.express-record {
    grid-template-columns: minmax(142px, .86fr) minmax(92px, .52fr) minmax(172px, 1.04fr) minmax(170px, 1fr) minmax(190px, 1.02fr) minmax(292px, 1.28fr);
}

.express-record.is-missing-express {
    border-color: rgba(210, 85, 36, .24);
    background: linear-gradient(90deg, rgba(255, 247, 237, .72), #ffffff 24%);
    box-shadow: inset 4px 0 0 rgba(210, 85, 36, .62);
}

.result-record > div {
    min-width: 0;
}

.result-student,
.result-status,
.result-exam-info,
.result-identity,
.result-current,
.express-contact,
.express-number-field {
    display: grid;
    gap: 3px;
}

.result-status {
    justify-items: start;
}

.result-status .state {
    min-height: 34px;
    border-radius: 7px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 900;
}

.certificate-status-stack,
.express-status-stack {
    gap: 4px;
}

.certificate-status-stack .state,
.express-status-stack .state {
    min-height: 25px;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.certificate-status-stack .state + .state,
.express-status-stack .state + .state {
    min-height: 24px;
    padding: 0 9px;
    font-size: 12px;
}

.result-student strong,
.result-exam-info strong,
.result-identity strong,
.express-contact strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 14px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-student span,
.result-exam-info span,
.result-identity span,
.result-current small,
.result-student small,
.result-exam-info small,
.result-identity small,
.express-contact span,
.express-contact small,
.express-number-field label,
.express-number-field small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-row-form {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) max-content max-content;
    align-items: center;
    gap: 8px;
}

.certificate-row-form {
    grid-template-columns: minmax(92px, 1fr) max-content max-content;
}

.express-row-form {
    grid-template-columns: max-content max-content;
    justify-content: end;
}

.result-row-form select,
.result-row-form input {
    width: 100%;
    height: 36px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 9px;
    background: #ffffff;
    color: #1f343b;
    font-size: 13px;
}

.result-row-form .btn {
    justify-content: center;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
}

.express-number-field input {
    width: 100%;
    height: 36px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 9px;
    background: #ffffff;
    color: #1f343b;
    font-size: 13px;
}

.express-record.is-missing-express .express-number-field input {
    border-color: rgba(210, 85, 36, .36);
    background: #fffaf7;
}

.result-file-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.result-file-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid rgba(145, 165, 170, .36);
    border-radius: 7px;
    padding: 0 12px;
    background: #f8fbfb;
    color: #6c858b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.result-file-view-link:hover {
    border-color: rgba(92, 154, 162, .42);
    background: #f1f7f6;
    color: #3f737c;
}

.result-row-file-input {
    position: absolute;
    width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: -1px;
    border: 0 !important;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.result-file-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 34px;
    border: 1px solid rgba(210, 85, 36, .28);
    border-radius: 7px;
    padding: 0 14px;
    background: #fff3ec;
    color: #c3421c;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.result-file-picker:hover {
    border-color: rgba(210, 85, 36, .48);
    background: #ffe8dc;
}

.certificate-current {
    align-content: center;
    justify-items: start;
}

.certificate-file-actions {
    display: grid;
    justify-items: start;
    gap: 6px;
}

.certificate-file-picker-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.certificate-file-actions .result-file-view-link,
.certificate-file-actions .certificate-file-picker {
    min-width: 96px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
}

.certificate-file-actions .certificate-file-picker {
    border-color: rgba(210, 85, 36, .28);
    background: #fff3ec;
    color: #c3421c;
}

.certificate-file-actions .certificate-file-picker:hover {
    border-color: rgba(210, 85, 36, .48);
    background: #ffe8dc;
}

.certificate-file-actions .certificate-graduation-file-picker {
    border-color: rgba(229, 121, 28, .34);
    background: #fff7ea;
    color: #b85f0f;
}

.certificate-file-actions .certificate-graduation-file-picker:hover {
    border-color: rgba(229, 121, 28, .54);
    background: #ffedcf;
}

.certificate-file-picker-row.has-selected-file .certificate-file-picker {
    border-color: rgba(42, 143, 97, .34);
    background: #eef9f5;
    color: #167268;
}

.certificate-file-picker-row.has-selected-file .certificate-file-picker:hover {
    border-color: rgba(42, 143, 97, .52);
    background: #e3f5ee;
}

.certificate-file-selected {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.certificate-file-selected[hidden] {
    display: none;
}

.certificate-file-selected button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(198, 95, 75, .32);
    border-radius: 50%;
    padding: 0;
    background: #fff6f2;
    color: #b34a33;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.certificate-file-selected button:hover {
    border-color: rgba(198, 95, 75, .58);
    background: #ffe9df;
}

.result-single-form input[type="file"]::file-selector-button,
.result-dialog-update-form input[type="file"]::file-selector-button {
    margin-right: 9px;
    border: 0;
    border-radius: 6px;
    padding: 5px 8px;
    background: #edf5f4;
    color: #285560;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.inline-button {
    border: 0;
    background: transparent;
    color: var(--teal);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.inline-button:hover {
    color: var(--coral);
}

.result-dialog {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 0;
    border-radius: 10px;
    padding: 0;
    background: #ffffff;
    color: #1f343b;
    box-shadow: 0 24px 70px rgba(16, 33, 38, .28);
}

.result-dialog::backdrop {
    background: rgba(16, 33, 38, .42);
}

.certificate-upload-alert-dialog,
.result-update-alert-dialog,
.express-number-alert-dialog {
    width: min(420px, calc(100vw - 32px));
    border: 0;
    border-radius: 10px;
    padding: 0;
    background: #ffffff;
    color: #1f343b;
    box-shadow: 0 24px 70px rgba(16, 33, 38, .28);
}

.certificate-upload-alert-dialog::backdrop,
.result-update-alert-dialog::backdrop,
.express-number-alert-dialog::backdrop {
    background: rgba(16, 33, 38, .34);
}

.certificate-upload-alert-body,
.result-update-alert-body,
.express-number-alert-body {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 24px 26px 22px;
    text-align: center;
}

.certificate-upload-alert-body h3,
.result-update-alert-body h3,
.express-number-alert-body h3 {
    margin: 0;
    color: var(--coral);
    font-size: 18px;
    font-weight: 900;
}

.certificate-upload-alert-body p,
.result-update-alert-body p,
.express-number-alert-body p {
    margin: 0;
    color: #263f47;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.65;
}

.certificate-upload-alert-body .btn,
.result-update-alert-body .btn,
.express-number-alert-body .btn {
    min-width: 92px;
}

.result-dialog-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.result-dialog-head h3 {
    margin: 0;
    font-size: 18px;
}

.result-dialog-head button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}

.result-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 18px;
}

.result-detail-grid div,
.result-dialog-file {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fbfdfd;
}

.result-detail-grid span,
.result-dialog-file > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.result-detail-grid strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 14px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.certificate-detail-dialog {
    width: min(960px, calc(100vw - 32px));
}

.certificate-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 12px;
}

.certificate-detail-grid strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

.result-dialog-update-form {
    display: grid;
    grid-template-columns: minmax(120px, .78fr) minmax(230px, 1.25fr) max-content max-content;
    align-items: end;
    gap: 10px;
    margin: 0 18px 18px;
    border: 1px solid rgba(168, 186, 191, 0.78);
    border-radius: 9px;
    padding: 12px;
    background: #ffffff;
}

.result-dialog-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.result-dialog-field > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.result-dialog-update-form select,
.result-dialog-update-form input[type="text"],
.result-dialog-update-form input[type="file"] {
    width: 100%;
    height: 38px;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    background: #fbfdfd;
    color: #1f343b;
    font-size: 13px;
}

.result-dialog-update-form input[type="file"] {
    min-width: 0;
    padding: 6px 8px;
}

.result-current-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid rgba(92, 154, 162, .28);
    border-radius: 8px;
    padding: 0 12px;
    background: #f3f9f8;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.result-current-file-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.result-current-file-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(195, 77, 67, .34);
    border-radius: 50%;
    background: #fff5f2;
    color: #c34d43;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.result-current-file-delete:hover,
.result-current-file-delete:focus-visible {
    background: #ffe7df;
    border-color: rgba(195, 77, 67, .62);
    outline: none;
}

.result-file-delete-form {
    display: none;
}

.result-current-file.is-empty {
    color: #829196;
}

.result-dialog-update-form .btn {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    white-space: nowrap;
}

.certificate-dialog-update-form {
    grid-template-columns: minmax(170px, 1fr) minmax(150px, .7fr);
    align-items: start;
    background: #fbfdfd;
}

.certificate-dialog-files,
.certificate-dialog-actions {
    grid-column: 1 / -1;
}

.certificate-dialog-files {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.certificate-dialog-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.certificate-dialog-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.express-dialog {
    width: min(820px, calc(100vw - 32px));
}

.express-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.express-detail-grid strong {
    overflow: visible;
    white-space: normal;
    word-break: break-word;
}

.express-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 18px 18px;
    border: 1px solid rgba(168, 186, 191, .72);
    border-radius: 9px;
    padding: 12px;
    background: #fbfdfd;
}

.express-dialog-actions .btn,
.express-dialog-actions .result-current-file {
    height: 38px;
    min-height: 38px;
}

.review-application-form .review-section {
    padding: 20px;
}

.review-application-form .form-grid {
    align-items: start;
    gap: 14px 16px;
}

.review-basic-grid {
    grid-template-columns: minmax(190px, 1.05fr) repeat(2, minmax(160px, 1fr)) minmax(220px, 1.2fr);
}

.review-basic-grid .review-category-field {
    grid-column: span 2;
}

.review-upload-grid,
.review-express-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.review-application-form .field-wide {
    grid-column: 1 / -1;
}

.review-application-form .field {
    min-width: 0;
    gap: 8px;
}

.review-application-form .field > span:first-child,
.review-application-form label.field > span:first-child {
    display: flex;
    align-items: flex-end;
    min-height: 22px;
    color: #2f4952;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.review-application-form input,
.review-application-form select,
.review-application-form textarea {
    min-height: 44px;
    border-radius: 6px;
    background: #ffffff;
}

.review-application-form .upload-control {
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: stretch;
    gap: 10px;
}

.review-application-form .upload-button {
    width: 104px;
    min-width: 104px;
    min-height: 44px;
    border-radius: 6px;
    white-space: nowrap;
}

.review-application-form .upload-path,
.review-application-form .upload-display {
    overflow: hidden;
    background: #f8fbfb;
    color: #425861;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-application-form .application-submit-row .btn-primary {
    min-height: 46px;
    border-color: #0f837d;
    padding: 0 26px;
    background: #0f9a92;
    font-size: 16px;
    font-weight: 900;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.review-application-form .application-submit-row .btn-primary:hover {
    border-color: #0b6f69;
    background: #0b7f78;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 131, 125, .18);
    transform: translateY(-1px);
}

.review-application-form .upload-status:not(:empty) {
    display: inline-flex;
    align-items: center;
}

.review-application-form .field.is-uploaded .upload-path,
.review-application-form .field.is-uploaded .upload-display,
.review-application-form .field.is-uploaded .upload-button {
    border-color: rgba(88, 142, 90, .52);
    background: #f0faf2;
}

.review-application-form .field.is-uploaded .upload-status {
    background: #effaf1;
    color: var(--green);
}

.review-application-form .field.is-upload-error .upload-path,
.review-application-form .field.is-upload-error .upload-display,
.review-application-form .field.is-upload-error .upload-button {
    border-color: rgba(198, 95, 75, .62);
    background: #fff8f6;
}

.review-application-form .field.is-upload-error .upload-status {
    background: #fff0ec;
    color: var(--coral);
}

.review-application-form.was-validated input:invalid,
.review-application-form.was-validated select:invalid,
.review-application-form.was-validated textarea:invalid,
.review-application-form .field.is-invalid input,
.review-application-form .field.is-invalid select,
.review-application-form .field.is-invalid textarea,
.review-application-form .field.is-invalid .upload-path,
.review-application-form .field.is-invalid .upload-display,
.review-application-form .field.is-invalid .upload-button {
    border-color: rgba(198, 95, 75, .78);
    background: #fff8f6;
    box-shadow: 0 0 0 3px rgba(198, 95, 75, .11);
}

.review-application-form .field-error {
    display: none;
    color: var(--coral);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
}

.review-application-form .field.is-invalid .field-error:not(:empty) {
    display: block;
}

.review-summary-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.review-summary-row div {
    min-height: 72px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    background: #ffffff;
}

.review-summary-row span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.review-summary-row strong {
    display: block;
    margin-top: 6px;
    color: #1f343b;
    font-size: 24px;
}

.review-member-table td strong,
.review-member-table td span {
    display: block;
    line-height: 1.5;
}

.review-file-count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 28px;
    border-radius: 7px;
    font-weight: 900;
}

.review-file-count.is-complete {
    background: #eef8f1;
    color: var(--green);
}

.review-file-count.is-missing {
    background: #fff3ec;
    color: var(--coral);
}

.review-metrics,
.review-filter-panel,
.review-export-panel {
    margin-bottom: 5px;
}

.review-metrics {
    grid-template-columns: repeat(8, minmax(138px, 1fr));
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.review-metrics .metric-card {
    min-height: 66px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.review-metrics .metric-card span {
    display: block;
    overflow: hidden;
    color: #6c757d;
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-metrics .metric-card strong {
    margin-top: 5px;
    font-size: 22px;
    line-height: 1.1;
}

.review-metrics a.metric-card:hover,
.review-metrics .metric-card.is-active {
    border-color: rgba(226, 104, 48, .52);
    box-shadow: 0 10px 22px rgba(226, 104, 48, .12);
}

.review-metrics a.metric-card:hover {
    transform: translateY(-1px);
}

.review-metrics .metric-card.is-active {
    background: #fff7ed;
}

.review-list-panel.mt-panel {
    margin-top: 5px;
}

.review-filter-panel .review-admin-filter {
    grid-template-columns: minmax(220px, 1.25fr) minmax(180px, 1fr) minmax(150px, .86fr) 58px 58px;
    align-items: center;
}

.review-filter-panel .review-admin-filter.has-manager-filter {
    grid-template-columns: minmax(220px, 1.25fr) minmax(180px, 1fr) minmax(150px, .86fr) minmax(140px, .8fr) 58px 58px;
}

@media (max-width: 980px) {
    .review-filter-panel .review-admin-filter,
    .review-filter-panel .review-admin-filter.has-manager-filter {
        grid-template-columns: 1fr;
    }
}

.review-status-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 3px;
    background: #ffffff;
}

.review-status-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 6px;
    padding: 0 12px;
    color: #38525b;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.review-status-tabs a.active {
    background: var(--teal);
    color: #ffffff;
}

.review-list-panel {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

.review-list-tools {
    grid-template-columns: minmax(286px, 360px) max-content minmax(470px, max-content);
}

.review-bulk-form {
    justify-content: end;
}

.review-record-list {
    display: grid;
    gap: 10px;
}

.review-record {
    display: grid;
    grid-template-columns: 32px minmax(150px, .9fr) minmax(118px, .66fr) minmax(190px, 1.08fr) minmax(210px, 1.16fr) minmax(224px, 1.1fr) minmax(106px, .52fr);
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.review-record.is-review-incomplete {
    border-color: rgba(210, 85, 36, .24);
    background: linear-gradient(90deg, rgba(255, 247, 237, .72), #ffffff 26%);
    box-shadow: inset 4px 0 0 rgba(210, 85, 36, .62);
}

.review-check {
    display: grid;
    place-items: center;
}

.review-check input {
    width: 18px;
    height: 18px;
}

.review-person,
.review-status-cell,
.review-category-cell,
.review-contact-cell,
.review-manager-cell,
.review-files-cell,
.review-actions-cell {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.review-person strong,
.review-category-cell strong,
.review-manager-cell strong,
.review-files-cell strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-person span,
.review-person small,
.review-status-cell small,
.review-category-cell span,
.review-category-cell small,
.review-contact-cell span,
.review-contact-cell small,
.review-manager-cell span,
.review-manager-cell small,
.review-files-cell span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-status-cell .state {
    width: fit-content;
    min-height: 30px;
    border-radius: 7px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 900;
}

.review-manager-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 6px;
    min-width: 0;
}

.review-manager-inline-form select {
    width: 100%;
    min-width: 0;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 0 8px;
    background: #ffffff;
    color: #38525b;
    font-size: 12px;
    font-weight: 800;
}

.review-manager-inline-form .btn {
    min-height: 30px;
    height: 30px;
    padding: 0 8px;
    justify-content: center;
    font-size: 12px;
}

.review-manager-cell {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(168, 186, 191, .5);
    border-radius: 8px;
    padding: 9px 10px;
    background: #f8fbfa;
}

.review-manager-summary {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.review-manager-action {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 74px;
    border-left: 1px dashed rgba(124, 146, 151, .62);
    padding-left: 10px;
}

.review-manager-cell span {
    font-size: 11px;
    font-weight: 900;
}

.review-manager-cell strong {
    font-size: 14px;
}

.review-manager-cell .btn {
    width: fit-content;
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 12px;
}

.review-manager-action small {
    max-width: 82px;
    text-align: center;
    white-space: normal;
}

.review-actions-cell {
    grid-template-columns: 1fr;
    gap: 7px;
    justify-items: end;
}

.review-actions-cell form {
    width: auto;
    justify-self: end;
}

.review-actions-cell .btn {
    width: 86px;
    justify-content: center;
    height: 34px;
    min-height: 34px;
    padding: 0 8px;
}

.review-assign-dialog {
    width: min(560px, calc(100vw - 32px));
}

.review-assign-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 18px 0;
}

.review-assign-summary div {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(220, 230, 234, .9);
    border-radius: 8px;
    padding: 10px;
    background: #f8fbfb;
}

.review-assign-summary span,
.review-assign-form label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.review-assign-summary strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-assign-form {
    display: grid;
    gap: 12px;
    padding: 14px 18px 18px;
}

.review-assign-form label {
    display: grid;
    gap: 6px;
}

.review-assign-form select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
}

.review-assign-form p {
    margin: 0;
    border: 1px solid rgba(220, 230, 234, .9);
    border-radius: 8px;
    padding: 9px 10px;
    background: #f8fbfa;
    color: #38525b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.review-assign-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.review-assign-actions .btn {
    width: auto;
    min-height: 36px;
    padding: 0 14px;
}

.review-detail-dialog {
    width: min(980px, calc(100vw - 32px));
}

.review-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-dialog-form {
    display: grid;
    gap: 12px;
    padding: 0 18px 18px;
}

.review-dialog-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid rgba(168, 186, 191, .72);
    border-radius: 9px;
    padding: 12px;
    background: #fbfdfd;
}

.review-dialog-section h4 {
    grid-column: 1 / -1;
    margin: 0;
    color: #1f343b;
    font-size: 15px;
}

.review-dialog-section label {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.review-dialog-section label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.review-dialog-section input,
.review-dialog-section select,
.review-dialog-section textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    background: #ffffff;
    color: #1f343b;
    font: inherit;
    font-size: 13px;
}

.review-dialog-wide {
    grid-column: 1 / -1;
}

.review-dialog-files label {
    grid-template-columns: minmax(118px, .72fr) minmax(0, 1fr) max-content;
    grid-column: 1 / -1;
    align-items: center;
}

.review-dialog-files label span {
    color: #38525b;
}

.review-dialog-files label em {
    color: var(--coral);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.review-dialog-actions {
    display: flex;
    justify-content: flex-end;
}

.review-dialog-actions .btn {
    height: 38px;
    min-height: 38px;
}

.news-hero {
    border-bottom: 1px solid rgba(220, 230, 234, .9);
    background: linear-gradient(90deg, #102f36, #1d5f66);
    color: #ffffff;
}

.news-hero-inner {
    min-height: 240px;
    display: grid;
    align-content: center;
    padding: 44px 0;
}

.news-hero h1 {
    max-width: 860px;
    margin: 0;
    font-size: 38px;
    line-height: 1.24;
}

.news-hero p:last-child {
    max-width: 720px;
    margin: 12px 0 0;
    color: #d9e9e9;
}

.news-detail-hero .news-hero-inner {
    min-height: 260px;
}

.news-channel-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(207, 221, 225, .95);
    background:
        linear-gradient(112deg, #0f2f36 0%, #15545d 52%, #e8f4f2 52.2%, #f7fbfb 100%);
    color: #ffffff;
}

.news-channel-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 47, 54, .95), rgba(15, 47, 54, .78) 46%, rgba(255, 255, 255, 0) 67%),
        url("/assets/img/home-preview/banner02.jpg") right center / auto 106% no-repeat;
    opacity: .46;
    pointer-events: none;
}

.news-channel-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, #0b8f8d, #f29a22);
}

.news-channel-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 56px;
    align-items: center;
    min-height: 328px;
    padding: 48px 0;
}

.news-channel-copy {
    max-width: 760px;
}

.news-channel-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    color: rgba(231, 244, 244, .78);
    font-size: 13px;
}

.news-channel-path a {
    color: rgba(255, 255, 255, .9);
}

.news-channel-path strong {
    color: #ffffff;
}

.news-channel-copy .eyebrow {
    color: #7fd9d6;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .06em;
}

.news-channel-copy h1 {
    max-width: 760px;
    margin: 8px 0 0;
    color: #ffffff;
    font-size: 48px;
    line-height: 1.18;
}

.news-channel-copy p:not(.eyebrow):not(.news-channel-path) {
    max-width: 690px;
    margin: 16px 0 0;
    color: rgba(241, 250, 249, .88);
    font-size: 16px;
    line-height: 1.9;
}

.news-channel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.news-channel-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: rgba(246, 253, 252, .9);
    font-size: 12px;
    font-weight: 900;
}

.news-channel-panel {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(205, 220, 224, .95);
    border-radius: 8px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 22px 48px rgba(15, 47, 54, .18);
    color: #16343b;
}

.news-channel-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, #0b8f8d, #f29a22);
}

.news-channel-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.news-channel-panel-head span {
    color: #0b8f8d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.news-channel-panel-head strong {
    color: #102f36;
    font-size: 18px;
}

.news-channel-panel-list {
    display: grid;
    gap: 10px;
}

.news-channel-panel-list a,
.news-channel-panel-list div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 11px 0;
    border-top: 1px dashed rgba(181, 199, 204, .82);
}

.news-channel-panel-list a:first-child,
.news-channel-panel-list div:first-child {
    border-top: 0;
}

.news-channel-panel-list time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 6px;
    background: #eef8f6;
    color: #0b8f8d;
    font-size: 13px;
    font-weight: 900;
}

.news-channel-panel-list span {
    color: #203a42;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.55;
}

.news-channel-panel-list a:hover span {
    color: #0b8f8d;
}

.required-reading-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(210, 224, 227, .95);
    background:
        radial-gradient(circle at 83% 18%, rgba(242, 154, 34, .2), rgba(242, 154, 34, 0) 28%),
        linear-gradient(118deg, #f8fcfb 0%, #eef8f6 48%, #d8eeeb 100%);
    color: #123239;
}

.required-reading-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .36)),
        url("/assets/img/home-preview/banner02.jpg") right center / auto 106% no-repeat;
    opacity: .18;
    pointer-events: none;
}

.required-reading-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, #0b8f8d, #f29a22);
}

.required-reading-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 54px;
    align-items: center;
    min-height: 330px;
    padding: 52px 0;
}

.required-reading-hero-copy .eyebrow {
    margin: 0;
    color: #0b8f8d;
    font-size: 15px;
    font-weight: 500;
}

.required-reading-hero-copy h1 {
    max-width: 760px;
    margin: 12px 0 0;
    color: #102f36;
    font-size: 50px;
    line-height: 1.15;
}

.required-reading-hero-copy > p:not(.eyebrow) {
    max-width: 720px;
    margin: 18px 0 0;
    color: #49656c;
    font-size: 17px;
    line-height: 1.9;
}

.required-reading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.required-reading-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid rgba(11, 143, 141, .26);
    border-radius: 6px;
    background: rgba(255, 255, 255, .72);
    color: #173a41;
    font-size: 14px;
    font-weight: 900;
}

.required-reading-actions a:hover {
    border-color: rgba(11, 143, 141, .46);
    background: #ffffff;
    color: #0b8f8d;
}

.required-reading-panel {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(197, 216, 220, .95);
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 22px 48px rgba(24, 59, 67, .12);
}

.required-reading-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #0b8f8d, #f29a22);
}

.required-reading-panel span {
    color: #f29a22;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.required-reading-panel strong {
    display: block;
    margin-top: 9px;
    color: #102f36;
    font-size: 22px;
    line-height: 1.45;
}

.required-reading-panel ul {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.required-reading-panel li {
    position: relative;
    padding-left: 18px;
    color: #4d6870;
    font-size: 14px;
    line-height: 1.6;
}

.required-reading-panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0b8f8d;
}

.required-reading-band {
    padding: 34px 0 74px;
    background:
        linear-gradient(180deg, #f7fbfa 0%, #ffffff 46%, #f6faf9 100%);
}

.required-reading-page {
    display: grid;
    gap: 22px;
}

.required-reading-path {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.required-reading-path article {
    min-height: 126px;
    padding: 20px 22px;
    border: 1px solid rgba(207, 222, 226, .92);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(22, 55, 62, .05);
}

.required-reading-path span {
    color: #0b8f8d;
    font-size: 13px;
    font-weight: 900;
}

.required-reading-path strong {
    display: block;
    margin-top: 10px;
    color: #122f36;
    font-size: 20px;
}

.required-reading-path p {
    margin: 8px 0 0;
    color: #61787f;
    font-size: 14px;
    line-height: 1.65;
}

.required-reading-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.required-reading-feature-grid > a,
.required-reading-feature-grid > .empty-state {
    position: relative;
    overflow: hidden;
    min-height: 218px;
    padding: 22px;
    border: 1px solid rgba(197, 216, 220, .94);
    border-radius: 8px;
    background: #102f36;
    color: #ffffff;
}

.required-reading-feature-grid > a::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(140deg, rgba(16, 47, 54, .96), rgba(16, 47, 54, .76)),
        url("/assets/img/home-preview/banner01.jpg") center / cover no-repeat;
    opacity: .9;
    transition: transform .22s ease, opacity .22s ease;
}

.required-reading-feature-grid > a:nth-child(2)::before {
    background:
        linear-gradient(140deg, rgba(15, 75, 82, .95), rgba(15, 75, 82, .74)),
        url("/assets/img/home-preview/banner02.jpg") center / cover no-repeat;
}

.required-reading-feature-grid > a:nth-child(3)::before {
    background:
        linear-gradient(140deg, rgba(28, 81, 78, .95), rgba(28, 81, 78, .72)),
        url("/assets/img/home-preview/13.png") center / cover no-repeat;
}

.required-reading-feature-grid > a:hover::before {
    transform: scale(1.035);
    opacity: 1;
}

.required-reading-feature-grid time,
.required-reading-feature-grid strong,
.required-reading-feature-grid p,
.required-reading-feature-grid span {
    position: relative;
    z-index: 1;
}

.required-reading-feature-grid time {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    font-weight: 900;
}

.required-reading-feature-grid strong {
    display: block;
    margin-top: 42px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.38;
}

.required-reading-feature-grid p {
    margin: 12px 0 0;
    color: rgba(240, 249, 248, .82);
    font-size: 14px;
    line-height: 1.72;
}

.required-reading-feature-grid span {
    display: inline-flex;
    margin-top: 18px;
    color: #f5b35a;
    font-size: 13px;
    font-weight: 900;
}

.required-reading-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 0 2px;
    border-bottom: 1px solid rgba(197, 216, 220, .95);
}

.required-reading-section-head .eyebrow {
    margin: 0 0 4px;
    color: #0b8f8d;
    font-size: 15px;
    font-weight: 500;
}

.required-reading-section-head h2 {
    margin: 0;
    color: #102f36;
    font-size: 30px;
    line-height: 1.25;
}

.required-reading-section-head > span {
    color: #6b8086;
    font-size: 13px;
    font-weight: 800;
}

.required-reading-list {
    display: grid;
    gap: 12px;
}

.required-reading-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 76px;
    gap: 18px;
    align-items: center;
    min-height: 126px;
    padding: 18px 20px;
    border: 1px solid rgba(211, 224, 227, .95);
    border-radius: 8px;
    background: #ffffff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.required-reading-item:hover {
    border-color: rgba(11, 143, 141, .36);
    box-shadow: 0 16px 34px rgba(22, 55, 62, .08);
    transform: translateY(-1px);
}

.required-reading-item > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #eef8f6;
    color: #0b8f8d;
    font-size: 18px;
    font-weight: 900;
}

.required-reading-item time {
    color: #7a8d92;
    font-size: 13px;
    font-weight: 900;
}

.required-reading-item h2 {
    margin: 7px 0 8px;
    color: #122f36;
    font-size: 21px;
    line-height: 1.38;
}

.required-reading-item p {
    margin: 0;
    color: #5d747b;
    font-size: 14px;
    line-height: 1.68;
}

.required-reading-item em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid rgba(11, 143, 141, .22);
    border-radius: 6px;
    color: #0b8f8d;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.required-reading-item:hover h2 {
    color: #0b8f8d;
}

.required-reading-pagination {
    justify-content: center;
}

.required-reading-hero {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .76)),
        linear-gradient(118deg, #f8fcfb 0%, #eef8f6 56%, #f7fbfb 100%);
}

.required-reading-hero::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .76) 55%, rgba(255, 255, 255, .34)),
        url("/assets/img/home-preview/banner01.jpg") right center / auto 104% no-repeat;
    opacity: .2;
}

.required-reading-hero-inner {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 48px;
    min-height: 300px;
    padding: 44px 0;
}

.required-reading-hero-copy h1 {
    font-size: 46px;
}

.required-reading-hero-copy > p:not(.eyebrow) {
    max-width: 660px;
    color: #516970;
}

.required-reading-panel {
    padding: 22px;
    border-color: rgba(210, 224, 227, .96);
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(22, 55, 62, .08);
}

.required-reading-panel::before {
    width: 4px;
    background: #0b8f8d;
}

.required-reading-panel span {
    color: #0b8f8d;
    letter-spacing: .05em;
}

.required-reading-panel strong {
    margin-top: 7px;
    font-size: 20px;
}

.required-reading-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.required-reading-quick-grid a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(216, 228, 231, .98);
    border-radius: 6px;
    background: #f8fbfa;
    color: #24454d;
    font-size: 14px;
    font-weight: 900;
}

.required-reading-quick-grid a:hover {
    border-color: rgba(11, 143, 141, .3);
    background: #eef8f6;
    color: #0b8f8d;
}

.required-reading-band {
    padding: 30px 0 72px;
    background: #f7faf9;
}

.required-reading-page {
    gap: 18px;
}

.required-reading-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    padding: 26px 30px;
    border: 1px solid rgba(210, 224, 227, .95);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(22, 55, 62, .045);
}

.required-reading-intro .eyebrow,
.required-reading-section-head .eyebrow {
    margin: 0 0 6px;
    color: #0b8f8d;
    font-size: 14px;
    font-weight: 500;
}

.required-reading-intro h2 {
    margin: 0;
    color: #102f36;
    font-size: 30px;
    line-height: 1.28;
}

.required-reading-intro p:not(.eyebrow) {
    max-width: 760px;
    margin: 10px 0 0;
    color: #5d747b;
    font-size: 15px;
    line-height: 1.8;
}

.required-reading-intro > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    background: #0b8f8d;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.required-reading-intro > a:hover {
    background: #087b79;
}

.required-reading-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 18px;
    align-items: start;
}

.required-reading-primary,
.required-reading-aside {
    border: 1px solid rgba(210, 224, 227, .95);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(22, 55, 62, .045);
}

.required-reading-primary {
    min-width: 0;
    padding: 22px;
}

.required-reading-section-head {
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(222, 232, 234, .96);
}

.required-reading-section-head h2 {
    font-size: 26px;
}

.required-reading-section-head > span {
    color: #72868c;
}

.required-reading-list {
    gap: 0;
}

.required-reading-item {
    grid-template-columns: 52px minmax(0, 1fr) 64px;
    min-height: 112px;
    padding: 18px 2px;
    border-width: 0 0 1px;
    border-color: rgba(226, 235, 237, .96);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.required-reading-item:last-child {
    border-bottom: 0;
}

.required-reading-item:hover {
    border-color: rgba(226, 235, 237, .96);
    box-shadow: none;
    transform: none;
}

.required-reading-item > span {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #f0f7f6;
    font-size: 15px;
}

.required-reading-item h2 {
    margin: 6px 0 7px;
    font-size: 20px;
}

.required-reading-item em {
    min-height: 32px;
    background: #ffffff;
}

.required-reading-aside {
    position: sticky;
    top: 92px;
    padding: 20px;
}

.required-reading-aside h3 {
    margin: 0;
    color: #102f36;
    font-size: 20px;
}

.required-reading-aside ol {
    display: grid;
    gap: 16px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: required-reading-step;
}

.required-reading-aside li {
    position: relative;
    padding-left: 36px;
    counter-increment: required-reading-step;
}

.required-reading-aside li::before {
    content: counter(required-reading-step);
    position: absolute;
    left: 0;
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef8f6;
    color: #0b8f8d;
    font-size: 12px;
    font-weight: 900;
}

.required-reading-aside li strong {
    display: block;
    color: #243f46;
    font-size: 14px;
}

.required-reading-aside li span {
    display: block;
    margin-top: 4px;
    color: #6c8086;
    font-size: 13px;
    line-height: 1.6;
}

.required-reading-reminder {
    margin-top: 20px;
    padding: 14px;
    border-radius: 7px;
    background: #fff7ed;
}

.required-reading-reminder strong {
    color: #c45f13;
    font-size: 14px;
}

.required-reading-reminder p {
    margin: 7px 0 0;
    color: #7d5538;
    font-size: 13px;
    line-height: 1.65;
}

.company-profile-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(205, 218, 221, .95);
    background:
        linear-gradient(115deg, #f9fcfc 0%, #edf7f6 45%, #d7ebe9 100%);
    color: #15343a;
}

.company-profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(249, 252, 252, .98) 0%, rgba(249, 252, 252, .88) 42%, rgba(249, 252, 252, .54) 68%, rgba(249, 252, 252, .34) 100%),
        url("/assets/img/home-preview/banner01.jpg") right center / auto 112% no-repeat;
    opacity: .44;
    pointer-events: none;
}

.company-profile-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background: linear-gradient(180deg, rgba(248, 252, 252, 0), rgba(255, 255, 255, .7));
    pointer-events: none;
}

.company-profile-hero-inner {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 64px;
    align-items: center;
    min-height: 408px;
    padding: 64px 0 58px;
}

.company-profile-article-inner {
    min-height: 310px;
}

.company-profile-copy {
    max-width: 740px;
}

.company-profile-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 13px;
    color: #668085;
}

.company-profile-path a {
    color: #365f64;
    text-decoration: none;
}

.company-profile-path a:hover {
    color: #0d8a8b;
}

.company-profile-path strong {
    color: #15343a;
    font-weight: 700;
}

.company-profile-hero .eyebrow {
    color: #0d8a8b;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
}

.company-profile-hero h1 {
    max-width: 760px;
    color: #102f36;
    font-size: 56px;
    line-height: 1.16;
}

.company-profile-lead {
    max-width: 710px;
    margin: 18px 0 0;
    color: #31545a;
    font-size: 18px;
    line-height: 1.9;
}

.company-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.company-profile-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid rgba(13, 138, 139, .2);
    border-radius: 6px;
    background: rgba(255, 255, 255, .72);
    color: #244b51;
    font-size: 13px;
    font-weight: 700;
}

.company-profile-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.company-profile-hero-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(13, 138, 139, .24);
    border-radius: 6px;
    background: rgba(255, 255, 255, .76);
    color: #244b51;
    font-size: 14px;
    font-weight: 900;
}

.company-profile-hero-links a:hover {
    border-color: rgba(13, 138, 139, .42);
    background: #eef8f6;
    color: #0b8f8d;
}

.company-profile-visual {
    position: relative;
    min-height: 310px;
    padding: 24px;
    border: 1px solid rgba(166, 195, 199, .62);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(244, 250, 250, .9));
    box-shadow: 0 24px 58px rgba(24, 65, 70, .13);
}

.company-profile-visual::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 6px;
    background: linear-gradient(90deg, #0b8f8d, #f29a22);
    pointer-events: none;
}

.company-profile-logo-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 22px 22px 20px;
    border: 1px solid rgba(221, 231, 233, .92);
    border-radius: 8px;
    background: #ffffff;
}

.company-profile-logo-card img {
    display: block;
    width: 224px;
    max-width: 100%;
    height: auto;
}

.company-profile-logo-card strong {
    color: #15343a;
    font-size: 17px;
    line-height: 1.35;
}

.company-profile-logo-card span {
    color: #42646a;
    font-size: 14px;
    line-height: 1.68;
}

.company-profile-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.company-profile-service-grid span {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(213, 226, 228, .92);
    border-radius: 6px;
    background: rgba(255, 255, 255, .72);
    color: #244b51;
    font-size: 13px;
    font-weight: 800;
}

.certification-hero {
    border-bottom: 1px solid rgba(202, 216, 220, .9);
    background:
        linear-gradient(120deg, rgba(13, 45, 52, .94), rgba(28, 122, 128, .9)),
        url("/assets/img/home-preview/banner01.jpg") center/cover;
    color: #ffffff;
}

.certification-hero.tone-cswip {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(192, 212, 216, .92);
    background:
        linear-gradient(112deg, rgba(8, 35, 44, .96) 0%, rgba(14, 82, 91, .91) 50%, rgba(240, 248, 247, .88) 50.2%, rgba(255, 255, 255, .96) 100%),
        url("/assets/img/home-preview/banner01.jpg") right center / auto 112% no-repeat;
}

.certification-hero.tone-cswip::before {
    content: "CSWIP";
    position: absolute;
    right: -28px;
    bottom: -34px;
    color: rgba(12, 75, 84, .08);
    font-size: 168px;
    font-weight: 900;
    letter-spacing: .02em;
    pointer-events: none;
}

.certification-hero.tone-cswip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, #0b8f8d, #c7a04a, #f29a22);
}

.certification-hero.tone-iwcc {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(192, 212, 216, .92);
    background:
        linear-gradient(112deg, rgba(2, 25, 40, .96) 0%, rgba(3, 57, 86, .91) 50%, rgba(240, 248, 249, .9) 50.2%, rgba(255, 255, 255, .97) 100%),
        url("/assets/img/home-preview/banner02.jpg") right center / auto 112% no-repeat;
}

.certification-hero.tone-iwcc::before {
    content: "IWCC";
    position: absolute;
    right: -24px;
    bottom: -34px;
    color: rgba(2, 57, 86, .08);
    font-size: 168px;
    font-weight: 900;
    letter-spacing: .02em;
    pointer-events: none;
}

.certification-hero.tone-iwcc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, #023956, #0b8f8d, #7ab8c8);
}

.certification-hero.tone-iwcc {
    background:
        linear-gradient(120deg, rgba(21, 49, 70, .95), rgba(34, 118, 142, .9)),
        url("/assets/img/home-preview/banner02.jpg") center/cover;
}

.certification-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 34px;
    align-items: center;
    min-height: 360px;
    padding: 54px 0;
}

.certification-breadcrumb {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .72);
}

.certification-breadcrumb a,
.certification-breadcrumb strong {
    color: #ffffff;
}

.certification-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: 42px;
    line-height: 1.18;
}

.tone-cswip .certification-hero-grid {
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 58px;
    min-height: 430px;
    padding: 62px 0;
}

.tone-cswip .certification-hero-copy {
    position: relative;
    z-index: 1;
}

.tone-cswip .certification-breadcrumb {
    color: rgba(232, 247, 247, .72);
}

.tone-cswip .certification-hero h1,
.tone-cswip h1 {
    max-width: 760px;
    font-size: 54px;
    letter-spacing: 0;
}

.tone-iwcc .certification-hero-grid {
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 54px;
    min-height: 430px;
    padding: 62px 0;
}

.tone-iwcc .certification-hero-copy {
    position: relative;
    z-index: 1;
}

.tone-iwcc .certification-hero h1,
.tone-iwcc h1 {
    max-width: 760px;
    font-size: 54px;
    letter-spacing: 0;
}

.certification-hero-copy > p:last-of-type {
    max-width: 760px;
    margin: 16px 0 0;
    color: rgba(238, 250, 248, .9);
    font-size: 16px;
    line-height: 1.8;
}

.certification-actions {
    margin-top: 24px;
}

.cswip-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.cswip-hero-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: rgba(246, 253, 252, .94);
    font-size: 13px;
    font-weight: 900;
}

.iwcc-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.iwcc-hero-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: rgba(246, 253, 252, .94);
    font-size: 13px;
    font-weight: 900;
}

.certification-visual {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px 24px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 22px 54px rgba(8, 23, 30, .18);
    text-align: center;
}

.certification-visual img {
    width: 94px;
    height: 94px;
    object-fit: contain;
}

.certification-visual strong {
    color: #ffffff;
    font-size: 18px;
}

.certification-visual span {
    color: rgba(240, 250, 249, .78);
    font-size: 13px;
    font-weight: 800;
}

.cswip-visual {
    position: relative;
    z-index: 1;
    justify-items: stretch;
    gap: 16px;
    padding: 22px;
    border-color: rgba(206, 221, 224, .94);
    background: rgba(255, 255, 255, .94);
    color: #16343b;
    text-align: left;
}

.iwcc-visual {
    position: relative;
    z-index: 1;
    justify-items: stretch;
    gap: 16px;
    padding: 22px;
    border-color: rgba(202, 219, 226, .94);
    background: rgba(255, 255, 255, .95);
    color: #143241;
    text-align: left;
}

.cswip-visual::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: linear-gradient(90deg, #0b8f8d, #c7a04a, #f29a22);
}

.iwcc-visual::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: linear-gradient(90deg, #023956, #0b8f8d, #7ab8c8);
}

.cswip-logo-stage {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(211, 224, 227, .95);
    border-radius: 8px;
    background: #ffffff;
}

.cswip-logo-stage img {
    width: 112px;
    height: 112px;
    object-fit: contain;
}

.cswip-logo-stage span {
    color: #29464e;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.45;
}

.iwcc-logo-stage {
    display: grid;
    gap: 12px;
    align-items: center;
    padding: 20px 18px;
    border: 1px solid rgba(211, 224, 227, .95);
    border-radius: 8px;
    background: #ffffff;
}

.iwcc-logo-stage img {
    width: 100%;
    max-width: 230px;
    height: 66px;
    object-fit: contain;
    object-position: left center;
}

.iwcc-logo-stage span {
    color: #29464e;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.45;
}

.iwcc-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.iwcc-method-grid div {
    display: grid;
    gap: 4px;
    min-height: 76px;
    padding: 13px;
    border: 1px solid rgba(214, 226, 229, .95);
    border-radius: 7px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
}

.iwcc-method-grid strong {
    color: #023956;
    font-size: 21px;
    line-height: 1;
}

.iwcc-method-grid span {
    color: #526d75;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.iwcc-accreditation-note {
    padding: 16px 17px;
    border: 1px solid rgba(214, 226, 229, .95);
    border-radius: 7px;
    background:
        linear-gradient(135deg, rgba(237, 247, 250, .94), rgba(255, 255, 255, .98)),
        radial-gradient(circle at 90% 20%, rgba(11, 143, 141, .13), transparent 38%);
}

.iwcc-accreditation-note p {
    margin: 0;
    color: #29464e;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.78;
}

.cswip-route-list {
    display: grid;
    gap: 9px;
}

.cswip-route-list div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid rgba(214, 226, 229, .95);
    border-radius: 7px;
    background: linear-gradient(90deg, #f8fcfc, #ffffff);
}

.cswip-route-list strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 999px;
    background: #eef8f6;
    color: #0b8f8d;
    font-size: 13px;
}

.cswip-route-list span {
    color: #29464e;
    font-size: 14px;
    font-weight: 900;
}

.cswip-accreditation-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cswip-accreditation-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 126px;
    padding: 14px;
    border: 1px solid rgba(214, 226, 229, .95);
    border-radius: 7px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfc 100%);
}

.cswip-accreditation-card img {
    max-width: 100%;
    max-height: 104px;
    object-fit: contain;
}

.cswip-accreditation-card:nth-child(2) img {
    max-height: 114px;
}

.certification-band {
    padding: 34px 0 68px;
    background: #f7faf9;
}

.certification-cswip-band {
    background:
        linear-gradient(180deg, #f2f8f7 0%, #ffffff 48%, #f7faf9 100%);
}

.certification-iwcc-band {
    background:
        linear-gradient(180deg, #f1f7f8 0%, #ffffff 48%, #f7faf9 100%);
}

.certification-page {
    display: grid;
    gap: 22px;
}

.cswip-overview {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 22px 24px;
    border: 1px solid rgba(204, 219, 223, .95);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(20, 57, 63, .055);
}

.iwcc-overview {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 22px 24px;
    border: 1px solid rgba(204, 219, 223, .95);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 48, 65, .055);
}

.cswip-overview div {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
}

.iwcc-overview div {
    display: grid;
    gap: 10px;
    align-items: center;
}

.cswip-overview img {
    width: 66px;
    height: 66px;
    object-fit: contain;
}

.iwcc-overview img {
    width: 188px;
    max-width: 100%;
    height: 54px;
    object-fit: contain;
    object-position: left center;
}

.cswip-overview span {
    color: #102f36;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
}

.iwcc-overview span {
    color: #102f36;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
}

.cswip-overview p {
    margin: 0;
    color: #42646a;
    font-size: 15px;
    line-height: 1.85;
}

.iwcc-overview p {
    margin: 0;
    color: #42646a;
    font-size: 15px;
    line-height: 1.85;
}

.certification-section-head,
.certification-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.certification-section-head {
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.certification-section-head h2,
.certification-panel-head h2 {
    margin: 0;
    color: #142126;
    font-size: 24px;
}

.certification-section-head p:last-child {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    text-align: right;
}

.certification-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.certification-course-card {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 178px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.certification-cswip-band .certification-section-head {
    border-color: rgba(204, 219, 223, .95);
    box-shadow: 0 12px 32px rgba(20, 57, 63, .045);
}

.certification-cswip-band .certification-course-card {
    position: relative;
    overflow: hidden;
    min-height: 198px;
    border-color: rgba(204, 219, 223, .95);
    box-shadow: 0 14px 34px rgba(20, 57, 63, .045);
}

.certification-iwcc-band .certification-course-card {
    position: relative;
    overflow: hidden;
    min-height: 198px;
    border-color: rgba(204, 219, 223, .95);
    box-shadow: 0 14px 34px rgba(16, 48, 65, .045);
}

.certification-cswip-band .certification-course-card::after,
.certification-iwcc-band .certification-course-card::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -18px;
    width: 178px;
    height: 116px;
    border-top-left-radius: 56px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .62) 58%, rgba(255, 255, 255, .9) 100%),
        var(--course-visual) center / cover no-repeat;
    filter: saturate(.72) contrast(.9) brightness(1.04);
    opacity: .34;
    -webkit-mask-image: radial-gradient(ellipse at 70% 74%, #000 0%, rgba(0, 0, 0, .88) 44%, rgba(0, 0, 0, .32) 66%, transparent 86%);
    mask-image: radial-gradient(ellipse at 70% 74%, #000 0%, rgba(0, 0, 0, .88) 44%, rgba(0, 0, 0, .32) 66%, transparent 86%);
    pointer-events: none;
}

.certification-cswip-band .certification-course-card > *,
.certification-iwcc-band .certification-course-card > * {
    position: relative;
    z-index: 1;
}

.certification-cswip-band .certification-course-card span {
    background: #eef8f6;
    color: #0b8f8d;
}

.certification-iwcc-band .certification-course-card span {
    background: #edf7fa;
    color: #023956;
}

.certification-cswip-band .certification-course-card em {
    color: #0b8f8d;
}

.certification-iwcc-band .certification-course-card em {
    color: #023956;
}

.certification-course-card:hover {
    border-color: rgba(31, 138, 138, .38);
    box-shadow: 0 16px 36px rgba(17, 45, 54, .08);
    transform: translateY(-2px);
}

.certification-course-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 28px;
    border-radius: 999px;
    background: #eef8f6;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.certification-course-card strong {
    color: #162a31;
    font-size: 18px;
    line-height: 1.35;
}

.certification-course-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.certification-course-card em {
    align-self: end;
    color: var(--teal);
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.certification-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.certification-panel {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.certification-panel-head {
    margin-bottom: 12px;
}

.certification-panel-head a {
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
}

.certification-article-list {
    display: grid;
    gap: 10px;
}

.certification-article-list a {
    display: grid;
    gap: 5px;
    padding: 13px 0;
    border-top: 1px dashed rgba(168, 186, 191, .72);
}

.certification-article-list a:first-child {
    border-top: 0;
}

.certification-article-list span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.certification-article-list strong {
    color: #1b3038;
    font-size: 16px;
    line-height: 1.45;
}

.certification-article-list a:hover strong {
    color: var(--teal);
}

.certification-article-list p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.news-page-band {
    padding: 34px 0 68px;
    background: #f7faf9;
}

.news-layout {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.news-sidebar {
    display: grid;
    gap: 14px;
}

.news-side-card,
.news-main,
.news-detail {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.news-side-card {
    padding: 16px;
}

.news-side-card h2 {
    margin: 0 0 12px;
    color: #183238;
    font-size: 17px;
}

.news-side-nav,
.news-side-list {
    display: grid;
    gap: 6px;
}

.news-side-nav a,
.news-side-nav span {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #36515a;
    font-size: 14px;
    font-weight: 800;
}

.news-side-nav a:hover,
.news-side-nav a.active {
    border-color: rgba(31, 138, 138, .24);
    background: #eef8f6;
    color: var(--teal);
}

.news-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.news-side-head h2 {
    margin: 0;
}

.news-side-head a {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.news-side-list a {
    display: grid;
    gap: 3px;
    padding: 9px 0;
    border-top: 1px dashed rgba(168, 186, 191, .72);
}

.news-side-list a:first-child {
    border-top: 0;
}

.news-side-list strong {
    color: #1f343b;
    font-size: 13px;
    line-height: 1.45;
}

.news-side-list span,
.news-side-list p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.news-main,
.news-detail {
    min-width: 0;
    padding: 22px;
}

.news-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 13px;
}

.news-breadcrumb a {
    color: #3f5f66;
}

.news-breadcrumb strong {
    color: var(--teal);
}

.news-category-content {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid rgba(31, 138, 138, .2);
    border-radius: 8px;
    background: #f2faf8;
    color: #29464e;
    font-size: 14px;
}

.news-category-content p:first-child {
    margin-top: 0;
}

.news-category-content p:last-child {
    margin-bottom: 0;
}

.news-list {
    display: grid;
    gap: 12px;
}

.news-list-item {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 16px;
    min-height: 128px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.news-list-item.no-thumb {
    grid-template-columns: 1fr;
}

.news-list-item:hover {
    border-color: rgba(31, 138, 138, .4);
    box-shadow: 0 12px 34px rgba(17, 45, 54, .08);
}

.news-thumb {
    overflow: hidden;
    min-height: 104px;
    border-radius: 7px;
    background: #edf3f2;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    min-height: 104px;
    object-fit: cover;
}

.news-list-text {
    min-width: 0;
}

.news-list-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.news-list-meta em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #fff0ec;
    color: var(--coral);
    font-style: normal;
}

.news-list-item h2 {
    margin: 8px 0;
    color: #142126;
    font-size: 20px;
    line-height: 1.35;
}

.news-list-item:hover h2 {
    color: var(--teal);
}

.news-list-item p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.company-profile-page-band {
    padding: 34px 0 74px;
    background:
        linear-gradient(180deg, #f3faf9 0%, #ffffff 48%, #f8fbfb 100%);
}

.company-profile-page-band .news-layout {
    grid-template-columns: 266px minmax(0, 1fr);
    gap: 28px;
}

.company-profile-page-band .news-sidebar {
    gap: 12px;
}

.company-profile-page-band .news-side-card {
    border-color: rgba(204, 219, 223, .94);
    box-shadow: 0 14px 34px rgba(22, 55, 62, .05);
}

.company-profile-page-band .news-side-card:first-child {
    padding: 18px;
}

.company-profile-page-band .news-side-card h2 {
    margin-bottom: 14px;
    font-size: 18px;
}

.company-profile-page-band .news-side-nav {
    gap: 8px;
}

.company-profile-page-band .news-side-nav a,
.company-profile-page-band .news-side-nav span {
    min-height: 42px;
    padding: 0 13px;
    border-color: rgba(223, 233, 235, .9);
    background: #fbfdfd;
    color: #28464d;
}

.company-profile-page-band .news-side-nav a:hover,
.company-profile-page-band .news-side-nav a.active {
    border-color: rgba(15, 143, 141, .32);
    background: linear-gradient(90deg, #eef9f7, #ffffff);
    color: #0b8f8d;
}

.company-profile-side-contact {
    display: grid;
    gap: 10px;
    background:
        linear-gradient(135deg, rgba(11, 143, 141, .09), rgba(255, 255, 255, .94));
}

.company-profile-side-contact p {
    margin: 0;
    color: #526d73;
    font-size: 13px;
    line-height: 1.7;
}

.company-profile-side-contact a {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 6px;
    background: #0b8f8d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.company-profile-main {
    padding: 0;
    border: 0;
    background: transparent;
}

.company-profile-main .news-breadcrumb {
    margin: 0 0 12px;
}

.company-profile-cover-band {
    padding: 34px 0 76px;
    background:
        linear-gradient(180deg, #f3faf9 0%, #ffffff 46%, #f8fbfb 100%);
}

.company-profile-cover-band .news-layout {
    display: block;
}

.company-profile-cover-band .news-sidebar {
    display: none;
}

.company-profile-cover-band .company-profile-main {
    width: 100%;
}

.company-profile-cover-band .news-breadcrumb {
    margin-bottom: 16px;
}

.company-profile-cover {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 46px;
    align-items: center;
    min-height: 430px;
    overflow: hidden;
    padding: 54px 56px;
    border: 1px solid rgba(198, 216, 220, .95);
    border-radius: 8px;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, .98) 0%, rgba(246, 252, 251, .95) 52%, rgba(229, 244, 243, .9) 100%);
    box-shadow: 0 22px 54px rgba(20, 57, 63, .08);
}

.company-profile-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .78) 48%, rgba(255, 255, 255, .36)),
        url("/assets/img/home-preview/banner01.jpg") right center / auto 112% no-repeat;
    opacity: .34;
    pointer-events: none;
}

.company-profile-cover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, #0b8f8d, #f29a22);
}

.company-profile-cover-main,
.company-profile-cover-panel {
    position: relative;
    z-index: 1;
}

.company-profile-cover-main {
    max-width: 760px;
}

.company-profile-cover-main > span,
.company-profile-cover-service span,
.company-profile-cover-mission span {
    color: #0b8f8d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.company-profile-cover-main h2 {
    max-width: 720px;
    margin: 12px 0 22px;
    color: #102f36;
    font-size: 46px;
    line-height: 1.18;
}

.company-profile-cover-main p {
    max-width: 700px;
    margin: 0;
    color: #34575e;
    font-size: 17px;
    line-height: 2;
}

.company-profile-cover-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.company-profile-cover-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(13, 138, 139, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .82);
    color: #244b51;
    font-size: 14px;
    font-weight: 900;
}

.company-profile-cover-links a:hover {
    border-color: rgba(13, 138, 139, .44);
    background: #eef8f6;
    color: #0b8f8d;
}

.company-profile-cover-panel {
    display: grid;
    gap: 14px;
    padding: 26px 24px;
    border: 1px solid rgba(205, 220, 224, .95);
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 20px 44px rgba(24, 65, 70, .1);
}

.company-profile-cover-panel img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
}

.company-profile-cover-panel strong {
    color: #102f36;
    font-size: 20px;
    line-height: 1.35;
}

.company-profile-cover-panel p {
    margin: 0;
    color: #526d73;
    font-size: 14px;
    line-height: 1.82;
}

.company-profile-cover-mission {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.company-profile-cover-mission article {
    min-height: 198px;
    padding: 24px 22px;
    border: 1px solid rgba(205, 220, 224, .95);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(20, 57, 63, .055);
}

.company-profile-cover-mission h3 {
    margin: 10px 0 12px;
    color: #102f36;
    font-size: 22px;
    line-height: 1.38;
}

.company-profile-cover-mission p {
    margin: 0;
    color: #526d73;
    font-size: 14px;
    line-height: 1.85;
}

.company-profile-cover-service {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    margin-top: 18px;
    padding: 28px 32px;
    border-radius: 8px;
    background: #12343b;
    color: #ffffff;
}

.company-profile-cover-service span {
    color: rgba(255, 255, 255, .72);
}

.company-profile-cover-service h2 {
    margin: 9px 0 0;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.38;
}

.company-profile-cover-service ul {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.company-profile-cover-service li {
    position: relative;
    padding-left: 18px;
    color: rgba(246, 253, 252, .92);
    font-size: 14px;
    line-height: 1.72;
}

.company-profile-cover-service li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #f29a22;
}

.company-profile-detail-cover {
    overflow: hidden;
    border: 1px solid rgba(205, 220, 224, .95);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(20, 57, 63, .06);
}

.company-profile-detail-cover header {
    position: relative;
    padding: 26px 30px 22px;
    border-bottom: 1px solid rgba(218, 229, 231, .9);
    background:
        linear-gradient(135deg, #ffffff 0%, #f4fbfa 100%);
}

.company-profile-detail-cover header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #0b8f8d, #f29a22);
}

.company-profile-detail-cover header span {
    color: #0b8f8d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.company-profile-detail-cover header h2 {
    margin: 8px 0 0;
    color: #102f36;
    font-size: 32px;
    line-height: 1.28;
}

.company-profile-detail-lead {
    margin: 0;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(218, 229, 231, .8);
    background: #fbfdfd;
    color: #3a5b62;
    font-size: 16px;
    line-height: 1.9;
}

.company-profile-detail-body {
    padding: 28px 30px 34px;
    color: #29464e;
    font-size: 16px;
    line-height: 2;
}

.company-profile-detail-body p {
    margin: 0 0 16px;
}

.company-profile-detail-body p:last-child {
    margin-bottom: 0;
}

.company-profile-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.company-profile-detail-body table {
    max-width: 100%;
}

.company-profile-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid rgba(205, 220, 224, .95);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(20, 57, 63, .06);
}

.company-profile-trust-strip div {
    display: grid;
    align-content: center;
    min-height: 92px;
    padding: 18px 20px;
    border-left: 1px solid rgba(218, 229, 231, .95);
}

.company-profile-trust-strip div:first-child {
    border-left: 0;
}

.company-profile-trust-strip strong {
    color: #102f36;
    font-size: 24px;
    line-height: 1.15;
}

.company-profile-trust-strip span {
    margin-top: 7px;
    color: #617980;
    font-size: 13px;
    line-height: 1.45;
}

.company-profile-summary-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 24px 26px;
    border: 1px solid rgba(205, 220, 224, .95);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff 0%, #f4fbfa 100%);
    box-shadow: 0 16px 38px rgba(20, 57, 63, .06);
}

.company-profile-summary-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #0b8f8d, #f29a22);
}

.company-profile-summary-card span {
    color: #0b8f8d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
}

.company-profile-summary-card h2 {
    margin: 7px 0 0;
    color: #142f36;
    font-size: 30px;
    line-height: 1.25;
}

.company-profile-summary-card p {
    max-width: 840px;
    margin: 0;
    color: #446268;
    font-size: 16px;
    line-height: 1.9;
}

.company-profile-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.company-profile-capability-grid article {
    position: relative;
    min-height: 190px;
    padding: 22px 20px 20px;
    border: 1px solid rgba(205, 220, 224, .95);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(20, 57, 63, .055);
}

.company-profile-capability-grid article > span {
    display: block;
    width: 38px;
    height: 4px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0b8f8d, #f29a22);
}

.company-profile-capability-grid h3 {
    margin: 0 0 12px;
    color: #142f36;
    font-size: 21px;
    line-height: 1.35;
}

.company-profile-capability-grid p {
    margin: 0;
    color: #526d73;
    font-size: 14px;
    line-height: 1.82;
}

.company-profile-promise-card {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 20px;
    padding: 22px 24px;
    border: 1px solid rgba(205, 220, 224, .95);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #12343b 0%, #17666d 100%);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 54, 61, .12);
}

.company-profile-promise-card span {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
}

.company-profile-promise-card h2 {
    margin: 7px 0 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.35;
}

.company-profile-promise-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.company-profile-promise-card li {
    position: relative;
    padding-left: 18px;
    color: rgba(246, 253, 252, .92);
    font-size: 14px;
    line-height: 1.7;
}

.company-profile-promise-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #f29a22;
}

.company-profile-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 8px 0 14px;
}

.company-profile-section-title span {
    color: #0b8f8d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
}

.company-profile-section-title h2 {
    margin: 0;
    color: #142f36;
    font-size: 24px;
    line-height: 1.3;
}

.company-profile-page-band .news-category-content,
.company-profile-detail {
    border-color: rgba(205, 220, 224, .95);
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(20, 57, 63, .06);
}

.company-profile-page-band .news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.company-profile-page-band .news-list-item {
    position: relative;
    display: block;
    min-height: 170px;
    padding: 21px 22px;
    border-color: rgba(205, 220, 224, .95);
    background:
        linear-gradient(180deg, #ffffff, #fbfdfd);
    box-shadow: 0 14px 34px rgba(20, 57, 63, .05);
}

.company-profile-page-band .news-list-item::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #0b8f8d, rgba(242, 154, 34, .84));
    opacity: .86;
}

.company-profile-page-band .news-list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(20, 57, 63, .09);
}

.company-profile-page-band .news-list-meta {
    margin-bottom: 10px;
}

.company-profile-page-band .news-list-item h2 {
    margin: 0 0 10px;
    font-size: 22px;
}

.company-profile-page-band .news-list-item p {
    font-size: 14px;
    line-height: 1.82;
}

.company-profile-detail {
    padding: 26px 28px 30px;
}

.company-profile-detail .news-detail-head {
    padding-bottom: 18px;
}

.company-profile-detail .news-detail-head h2 {
    font-size: 30px;
}

.news-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.news-pagination a,
.news-pagination span,
.news-pagination strong {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    color: #36515a;
    font-size: 13px;
    font-weight: 800;
}

.news-pagination span {
    color: #9baaae;
}

.news-pagination strong {
    border-color: rgba(31, 138, 138, .28);
    background: #eef8f6;
    color: var(--teal);
}

.news-detail-head {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.news-detail-head h2 {
    margin: 0 0 10px;
    color: #142126;
    font-size: 30px;
    line-height: 1.32;
}

.news-detail-head div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
}

.news-detail-summary {
    margin: 18px 0;
    padding: 14px 16px;
    border-left: 4px solid var(--teal);
    background: #f3faf8;
    color: #36515a;
    font-size: 14px;
}

.news-detail-body {
    color: #263d44;
    font-size: 16px;
    line-height: 1.9;
}

.news-detail-body img {
    height: auto;
    margin: 12px auto;
}

.news-admin-panel {
    padding: 16px 18px;
}

.news-list-head {
    align-items: center;
}

.news-list-head p {
    margin: 4px 0 0;
}

.news-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.news-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.news-metrics .metric-card {
    min-height: 82px;
    padding: 14px 16px;
}

.news-metrics .metric-card strong {
    font-size: 24px;
}

.news-filter-panel .news-admin-filter {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(130px, .72fr) minmax(130px, .72fr) minmax(116px, .62fr) 58px 58px;
    align-items: center;
}

.news-category-list {
    display: grid;
    gap: 8px;
}

.news-category-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) 112px 118px 90px 82px max-content;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.news-category-row.is-root {
    border-color: rgba(42, 132, 120, .28);
    background: linear-gradient(90deg, #f3faf9 0%, #ffffff 72%);
}

.news-category-row.is-branch:not(.is-root) {
    background: #fbfdfd;
}

.news-category-tree-cell {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: var(--category-indent);
}

.news-category-tree-line {
    position: absolute;
    left: calc(var(--category-indent) + 14px);
    top: -11px;
    bottom: -11px;
    width: 1px;
    background: rgba(198, 214, 218, .88);
}

.news-category-row.is-root .news-category-tree-line {
    display: none;
}

.news-category-row.is-child .news-category-tree-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    border-top: 1px solid rgba(198, 214, 218, .95);
}

.news-category-node {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(42, 132, 120, .34);
    border-radius: 50%;
    background: #ffffff;
    color: #24565b;
    font-size: 12px;
    font-weight: 900;
}

.news-category-node.is-root {
    border-color: rgba(185, 43, 39, .34);
    background: #fff7f6;
    color: var(--danger);
}

.news-category-node.is-child {
    background: #f7fbfb;
}

.news-category-title {
    min-width: 0;
}

.news-category-title strong,
.news-category-title span,
.news-category-title-line,
.news-category-title-line em,
.news-category-title-line small,
.news-category-style span,
.news-category-style strong,
.news-category-count span,
.news-category-count strong {
    display: block;
}

.news-category-title-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.news-category-title strong {
    color: #1f343b;
    font-size: 15px;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-category-title-line em,
.news-category-title-line small {
    flex: 0 0 auto;
    min-height: 20px;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 16px;
}

.news-category-title-line em {
    background: #eef7f6;
    color: #24565b;
}

.news-category-row.is-root .news-category-title-line em {
    background: #fff0ef;
    color: var(--danger);
}

.news-category-title-line small {
    background: #eef2f2;
    color: #667e85;
}

.news-category-title span,
.news-category-style span,
.news-category-count span,
.news-flag-line span {
    color: var(--muted);
    font-size: 12px;
}

.news-category-style strong {
    margin-top: 4px;
    color: #24565b;
    font-size: 14px;
    font-weight: 900;
}

.news-category-count strong {
    margin-top: 3px;
    color: #1f343b;
    font-size: 16px;
}

.news-sort-field,
.news-table-sort {
    display: grid;
    gap: 4px;
}

.news-sort-field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.news-sort-field input,
.news-table-sort input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 9px;
    background: #ffffff;
    font: inherit;
}

.news-row-actions,
.news-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.news-row-actions form,
.news-table-actions form {
    margin: 0;
}

.news-row-actions .btn,
.news-table-actions .btn,
.news-head-actions .btn,
.news-bulk-bar .btn {
    min-height: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
}

.news-dialog {
    width: min(920px, calc(100vw - 32px));
}

.news-article-dialog {
    width: min(1120px, calc(100vw - 32px));
}

.news-article-form {
    display: grid;
    gap: 12px;
}

.news-category-form {
    display: grid;
    gap: 12px;
}

.news-dialog-form {
    max-height: min(760px, calc(100vh - 112px));
    overflow: auto;
    padding: 0 18px 18px;
    background: #f7faf9;
}

.news-page-form {
    padding: 0;
}

.news-form-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.news-field-wide {
    grid-column: span 3;
}

.news-field-full {
    grid-column: 1 / -1;
}

.news-article-form .site-dialog-section {
    margin-top: 12px;
    border: 1px solid rgba(218, 229, 231, .9);
    border-radius: 8px;
    background: #ffffff;
}

.news-category-form .site-dialog-section {
    margin-top: 12px;
    border: 1px solid rgba(218, 229, 231, .9);
    border-radius: 8px;
    background: #ffffff;
}

.news-article-form textarea {
    resize: vertical;
}

.news-category-form textarea {
    resize: vertical;
}

.news-article-form .site-field.is-small,
.news-category-form .site-field.is-small {
    max-width: none;
}

.news-article-page-panel {
    padding: 16px 18px 18px;
}

.news-category-page-panel {
    padding-bottom: 16px;
}

.news-article-page-head {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(168, 186, 191, .72);
}

.news-article-main-stack {
    display: grid;
    gap: 12px;
}

.news-article-title-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, .82fr);
    gap: 12px;
}

.news-article-meta-row {
    display: grid;
    grid-template-columns: 118px 74px 196px 88px minmax(260px, 1fr);
    align-items: end;
    gap: 12px;
}

.news-article-main-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.news-article-main-grid .news-field-full {
    grid-column: 1 / -1;
}

.news-article-main-grid .news-field-wide {
    grid-column: span 2;
}

.news-article-title-field {
    grid-column: span 4;
}

.news-article-category-field {
    grid-column: span 2;
}

.news-article-title-row .news-article-title-field,
.news-article-title-row .news-article-category-field {
    grid-column: auto;
}

.news-article-status-field,
.news-article-sort-field,
.news-article-views-field {
    grid-column: span 1;
}

.news-article-published-field {
    grid-column: span 2;
}

.news-article-meta-row .news-article-status-field,
.news-article-meta-row .news-article-sort-field,
.news-article-meta-row .news-article-published-field,
.news-article-meta-row .news-article-views-field,
.news-article-meta-row .news-article-feature-field {
    grid-column: auto;
}

.news-article-sort-field input,
.news-article-views-field input {
    padding-left: 8px;
    padding-right: 8px;
}

.news-article-published-field input {
    min-width: 0;
}

.news-article-feature-field {
    min-width: 0;
}

.news-compact-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 6px;
    align-items: center;
    overflow: hidden;
}

.news-article-feature-field .news-compact-feature-grid label {
    display: inline-flex;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 11px;
    background: #ffffff;
    color: #38525b;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.news-article-feature-field .news-compact-feature-grid input {
    margin: 0;
    accent-color: var(--danger);
}

.news-article-feature-field .news-compact-feature-grid strong {
    line-height: 1;
    white-space: nowrap;
}

.news-display-grid {
    grid-template-columns: minmax(596px, 596px) minmax(0, 1fr);
    align-items: stretch;
}

.news-category-main-grid {
    grid-template-columns: minmax(220px, 1.45fr) minmax(220px, 1.3fr) minmax(150px, .9fr) 90px 94px;
    align-items: start;
}

.news-category-display-grid {
    grid-template-columns: minmax(220px, .85fr) minmax(260px, 1.15fr) minmax(260px, 1fr);
    align-items: start;
}

.news-category-seo-grid {
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) minmax(280px, 1.2fr);
}

.site-field .news-seo-title-input,
.site-field .news-seo-keywords-field,
.site-field .news-tags-input {
    height: 97px;
    min-height: 97px;
}

.news-category-style-field small {
    margin-top: 5px;
    color: #71888d;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

.news-field-path,
.news-field-cover-path,
.news-field-cover-upload {
    grid-column: auto;
}

.news-cover-field {
    grid-column: auto;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
}

.news-display-side-fields {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.news-summary-field {
    grid-column: auto;
}

.news-summary-field textarea {
    min-height: 132px;
}

.news-cover-uploader {
    display: grid;
    grid-template-columns: minmax(220px, 238px) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    height: 100%;
    border: 1px solid rgba(218, 229, 231, .92);
    border-radius: 10px;
    padding: 10px;
    background: #fbfdfd;
}

.news-cover-preview {
    display: grid;
    align-content: center;
    justify-items: center;
    align-self: stretch;
    min-height: 188px;
    border: 1px dashed rgba(168, 186, 191, .85);
    border-radius: 8px;
    padding: 8px;
    background: #ffffff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    overflow: hidden;
}

.news-cover-preview [hidden] {
    display: none !important;
}

.news-cover-preview img {
    width: 100%;
    height: 150px;
    border-radius: 6px;
    object-fit: cover;
}

.news-cover-preview strong {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 140px;
    border-radius: 6px;
    background: repeating-linear-gradient(45deg, #f4f7f7, #f4f7f7 10px, #eef3f3 10px, #eef3f3 20px);
    color: #6d858b;
    font-size: 13px;
}

.news-cover-preview span {
    margin-top: 8px;
    font-size: 11px;
    text-align: center;
}

.news-cover-preview em {
    display: block;
    margin-top: 5px;
    color: #71888d;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.news-cover-preview em[data-state="success"] {
    color: #23824f;
}

.news-cover-preview em[data-state="warning"] {
    color: #b45f06;
}

.news-cover-preview.is-empty span {
    margin-top: 8px;
}

.news-cover-control-panel {
    display: grid;
    align-content: start;
    align-self: stretch;
    gap: 8px;
}

.news-cover-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: stretch;
    gap: 8px;
}

.news-cover-file-button,
.news-cover-upload-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    background: var(--danger);
    color: #ffffff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.news-cover-upload-box {
    display: grid;
    min-height: 62px;
    border: 1px dashed rgba(42, 132, 120, .55);
    background: #f4fbfa;
    color: #24565b;
    text-align: center;
}

.news-cover-upload-box strong {
    align-self: end;
    font-size: 13px;
    line-height: 1.2;
}

.news-cover-upload-box span {
    align-self: start;
    color: #71888d;
    font-size: 11px;
    font-weight: 800;
}

.news-cover-upload-box:hover {
    border-color: rgba(185, 43, 39, .55);
    background: #fff8f7;
    color: var(--danger);
}

.news-cover-cropper {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(17, 45, 54, .46);
    backdrop-filter: blur(4px);
}

.news-cover-cropper[hidden] {
    display: none !important;
}

.news-cover-crop-dialog {
    display: grid;
    gap: 12px;
    width: min(760px, 100%);
    max-height: calc(100vh - 44px);
    overflow: auto;
    border: 1px solid rgba(218, 229, 231, .92);
    border-radius: 10px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(17, 45, 54, .24);
}

.news-cover-crop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.news-cover-crop-head strong {
    display: block;
    color: #263f47;
    font-size: 17px;
    line-height: 1.2;
}

.news-cover-crop-head span {
    display: block;
    margin-top: 4px;
    color: #71888d;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.news-cover-crop-head button {
    min-width: 54px;
    min-height: 30px;
    border: 1px solid rgba(171, 185, 190, .72);
    border-radius: 999px;
    background: #f4f6f6;
    color: #667a80;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.news-cover-cropper canvas {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(31, 138, 138, .18);
    border-radius: 7px;
    background:
        repeating-linear-gradient(45deg, #f3f7f7, #f3f7f7 9px, #edf3f3 9px, #edf3f3 18px);
    cursor: grab;
}

.news-cover-cropper canvas.is-dragging {
    cursor: grabbing;
}

.news-cover-zoom {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.news-cover-zoom span {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.news-cover-zoom input {
    width: 100%;
    accent-color: var(--danger);
}

.news-cover-crop-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.news-cover-crop-actions .btn {
    min-width: 88px;
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.news-cover-file-button input,
.news-cover-upload-box input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.news-cover-actions .btn {
    min-height: 62px;
    height: 62px;
}

.news-cover-path-row {
    display: grid;
    gap: 6px;
}

.news-cover-path-row span {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.news-cover-path-row input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
}

.news-cover-control-panel small,
.news-cover-control-panel em {
    color: #71888d;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.5;
}

.news-cover-control-panel em[data-state="success"] {
    color: #23824f;
}

.news-cover-control-panel em[data-state="warning"] {
    color: #b45f06;
}

.news-rich-field {
    gap: 8px;
}

.news-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid rgba(218, 229, 231, .92);
    border-radius: 8px 8px 0 0;
    padding: 8px;
    background: #f8fbfb;
}

.news-editor-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid rgba(198, 214, 218, .9);
    border-radius: 7px;
    padding: 0 10px;
    background: #ffffff;
    color: #315058;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.news-editor-toolbar button:hover {
    border-color: rgba(31, 138, 138, .46);
    color: var(--teal);
}

.news-rich-field.is-uploading .news-editor-toolbar button,
.news-rich-field.is-uploading .news-editor-toolbar input {
    opacity: .68;
    pointer-events: none;
}

.news-editor-hint {
    min-height: 28px;
    border: 1px solid rgba(218, 229, 231, .92);
    border-top: 0;
    padding: 7px 10px;
    background: #ffffff;
    color: #71888d;
    font-size: 12px;
    font-weight: 800;
}

.news-editor-hint[data-state="uploading"] {
    background: #f2faf9;
    color: #24565b;
}

.news-editor-hint[data-state="success"] {
    background: #eefaf2;
    color: #23824f;
}

.news-editor-hint[data-state="error"] {
    background: #fff4f3;
    color: #b3261e;
}

.news-rich-editor {
    min-height: 330px;
    max-height: 520px;
    overflow: auto;
    border: 1px solid rgba(218, 229, 231, .92);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 18px 20px;
    background: #ffffff;
    color: #203a42;
    line-height: 1.75;
    outline: 0;
}

.news-rich-editor:empty::before {
    content: "在这里编辑新闻正文，可插入链接、图片、列表和标题。";
    color: #94a8ad;
}

.news-rich-editor:focus {
    border-color: rgba(42, 132, 120, .72);
    box-shadow: 0 0 0 3px rgba(42, 132, 120, .1);
}

.news-rich-field.is-dragging .news-rich-editor {
    border-color: rgba(42, 132, 120, .88);
    background: #f2faf9;
    box-shadow: inset 0 0 0 2px rgba(42, 132, 120, .18);
}

.news-rich-field.is-fullscreen {
    position: fixed;
    inset: 14px;
    z-index: 1000;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0;
    border: 1px solid rgba(42, 132, 120, .5);
    border-radius: 10px;
    padding: 12px;
    background: #f7faf9;
    box-shadow: 0 24px 64px rgba(18, 35, 40, .28);
}

.news-rich-field.is-fullscreen > span {
    margin-bottom: 8px;
    font-size: 13px;
}

.news-rich-field.is-fullscreen .news-editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
}

.news-rich-field.is-fullscreen .news-rich-editor {
    min-height: 0;
    max-height: none;
    height: auto;
}

.news-rich-field.is-fullscreen .news-source-panel {
    max-height: 210px;
    overflow: auto;
}

.news-category-rich-editor {
    min-height: 260px;
    max-height: 460px;
}

.news-rich-editor h2,
.news-rich-editor h3 {
    margin: 18px 0 10px;
    color: #17333a;
}

.news-rich-editor p {
    margin: 0 0 12px;
}

.news-rich-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    cursor: default;
}

.news-rich-editor blockquote {
    margin: 14px 0;
    border-left: 4px solid var(--teal);
    padding: 10px 14px;
    background: #f4faf9;
    color: #315058;
}

.news-rich-editor table {
    width: 100%;
    margin: 14px 0;
    border-collapse: collapse;
}

.news-rich-editor td,
.news-rich-editor th {
    border: 1px solid rgba(198, 214, 218, .9);
    padding: 8px 10px;
}

.news-rich-editor hr {
    height: 1px;
    margin: 18px 0;
    border: 0;
    background: rgba(198, 214, 218, .9);
}

.news-source-panel {
    border: 1px solid rgba(218, 229, 231, .92);
    border-radius: 8px;
    background: #fbfdfd;
}

.news-source-panel summary {
    cursor: pointer;
    padding: 10px 12px;
    color: #315058;
    font-size: 12px;
    font-weight: 900;
}

.news-source-panel textarea {
    min-height: 180px;
    border: 0;
    border-top: 1px solid rgba(218, 229, 231, .92);
    border-radius: 0 0 8px 8px;
    background: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

.news-dialog-actions {
    position: sticky;
    bottom: -18px;
    z-index: 2;
    margin: 0 -18px -18px;
    border-top: 1px solid rgba(218, 229, 231, .92);
    padding: 12px 18px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
}

.news-page-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2px;
    border: 1px solid rgba(218, 229, 231, .92);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
}

.news-page-actions .btn,
.news-dialog-actions .btn {
    min-width: 118px;
}

.news-feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.news-feature-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #38525b;
    font-size: 13px;
    font-weight: 900;
}

.news-feature-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 0;
}

.news-feature-card-grid label {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-areas:
        "check title"
        "check desc";
    align-items: start;
    min-height: 76px;
    border-color: rgba(198, 214, 218, .9);
    padding: 12px;
    background: #fbfdfd;
}

.news-feature-card-grid input {
    grid-area: check;
    margin-top: 3px;
    accent-color: var(--danger);
}

.news-feature-card-grid strong {
    grid-area: title;
    color: #203a42;
    font-size: 14px;
    line-height: 1.25;
}

.news-feature-card-grid span {
    grid-area: desc;
    margin-top: 4px;
    color: #71888d;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.news-feature-card-grid label:has(input:checked) {
    border-color: rgba(185, 43, 39, .42);
    background: #fff7f6;
}

.news-bulk-bar {
    display: grid;
    grid-template-columns: max-content max-content 150px 190px max-content;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.news-check-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #36515a;
    font-size: 13px;
    font-weight: 900;
}

.news-bulk-bar select {
    width: 100%;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 10px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
}

.news-article-table {
    min-width: 960px;
    table-layout: fixed;
}

.news-article-table th:nth-child(1) {
    width: 62px;
    white-space: nowrap;
}

.news-article-table th:nth-child(2) {
    width: 40%;
}

.news-article-table th:nth-child(3) {
    width: 22%;
}

.news-article-table th:nth-child(4) {
    width: 126px;
}

.news-article-table th:nth-child(5) {
    width: 96px;
}

.news-article-table th:nth-child(6) {
    width: 174px;
}

.news-select-cell {
    text-align: center;
    vertical-align: middle;
}

.news-title-cell {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.news-title-cell.no-thumb {
    grid-template-columns: 1fr;
}

.news-title-cell img {
    width: 74px;
    height: 54px;
    border-radius: 7px;
    object-fit: cover;
    background: #edf3f2;
}

.news-title-cell strong,
.news-title-cell span,
.news-category-cell strong,
.news-category-cell span,
.news-time-cell strong,
.news-time-cell span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-title-cell strong {
    color: #1f343b;
    font-size: 14px;
    line-height: 1.42;
}

.news-title-cell span,
.news-category-cell span,
.news-time-cell span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.news-title-cell small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.news-category-cell,
.news-time-cell,
.news-sort-view-cell {
    vertical-align: middle;
}

.news-category-cell strong,
.news-time-cell strong {
    color: #263f47;
    font-size: 13px;
    line-height: 1.45;
}

.news-sort-view-cell {
    display: grid;
    gap: 6px;
    align-content: center;
}

.news-sort-view-cell .news-table-sort {
    max-width: 72px;
}

.news-sort-view-cell .news-table-sort span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.news-flag-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.news-flag-line span {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef2f2;
}

.news-flag-line em {
    color: #8a9ca1;
    font-size: 12px;
    font-style: normal;
}

.news-table-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.news-article-table .news-table-actions {
    gap: 5px;
}

.news-article-table .news-table-actions .btn {
    min-height: 30px;
    height: 30px;
    border-radius: 6px;
    padding: 0 7px;
    font-size: 12px;
}

.news-table-actions .btn,
.news-table-actions form,
.news-table-actions form .btn {
    width: 100%;
}

.news-action-cell {
    vertical-align: middle;
}

.news-row-draft {
    background: #fffdf7;
}

.news-row-recycle {
    background: #fff8f7;
}

.product-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.product-admin-filter {
    grid-template-columns: minmax(190px, 1.2fr) minmax(170px, 1fr) 132px 126px 118px 74px 74px;
}

.product-bulk-bar {
    grid-template-columns: max-content max-content max-content 150px 170px max-content;
}

.product-table {
    min-width: 1120px;
}

.product-table th:nth-child(1) {
    width: 62px;
    white-space: nowrap;
}

.product-table th:nth-child(2) {
    width: 28%;
}

.product-table th:nth-child(3) {
    width: 18%;
}

.product-table th:nth-child(4) {
    width: 17%;
}

.product-table th:nth-child(5) {
    width: 112px;
}

.product-table th:nth-child(6) {
    width: 86px;
}

.product-table th:nth-child(7) {
    width: 170px;
}

.product-title-cell img {
    width: 76px;
    height: 58px;
}

.product-price-cell {
    vertical-align: middle;
}

.product-price-cell strong,
.product-price-cell span,
.product-price-cell em,
.product-price-cell small {
    display: block;
    line-height: 1.4;
}

.product-price-cell strong {
    color: var(--coral);
    font-size: 15px;
}

.product-price-cell span,
.product-price-cell small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.product-price-cell em {
    margin-top: 4px;
    color: #275d56;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.product-price-cell em.is-empty-stock {
    color: #d85649;
}

.product-status-pill {
    font-weight: 900;
}

.product-status-pill.is-published {
    background: #e6f5f0;
    color: #227768;
}

.product-status-pill.is-draft {
    background: #eaf1ff;
    color: #315dba;
}

.product-status-pill.is-recycle {
    background: #fff0ed;
    color: #c94d3e;
}

.product-price-grid {
    grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(120px, .7fr)) minmax(150px, .8fr) minmax(220px, 1.2fr);
}

.product-spec-list {
    display: grid;
    gap: 10px;
}

.product-spec-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr) 86px 74px;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid rgba(218, 229, 231, .9);
    border-radius: 8px;
    background: #f8fbfb;
}

.product-spec-row .btn {
    min-height: 42px;
}

.product-spec-add {
    margin-top: 10px;
}

.talent-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.talent-resume-filter {
    grid-template-columns: minmax(280px, 1.4fr) 130px 150px 120px 74px 74px;
}

.talent-job-filter {
    grid-template-columns: minmax(210px, 1.25fr) minmax(170px, 1fr) 132px 126px 118px 74px 74px;
}

.talent-bulk-bar {
    grid-template-columns: max-content 170px max-content;
}

.talent-job-bulk-bar {
    grid-template-columns: max-content max-content 150px 170px max-content;
}

.talent-resume-table {
    min-width: 1120px;
    table-layout: fixed;
}

.talent-resume-table th:nth-child(1) {
    width: 62px;
    white-space: nowrap;
}

.talent-resume-table th:nth-child(2) {
    width: 25%;
}

.talent-resume-table th:nth-child(3) {
    width: 18%;
}

.talent-resume-table th:nth-child(4) {
    width: 17%;
}

.talent-resume-table th:nth-child(5) {
    width: 118px;
}

.talent-resume-table th:nth-child(6) {
    width: 126px;
}

.talent-resume-table th:nth-child(7) {
    width: 150px;
}

.talent-job-table {
    min-width: 980px;
}

.talent-person-cell {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.talent-person-cell img,
.talent-person-cell > span {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}

.talent-person-cell img {
    object-fit: cover;
    background: #edf3f2;
}

.talent-person-cell > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7f3f0;
    color: #24786d;
    font-size: 18px;
    font-weight: 900;
}

.talent-person-cell strong,
.talent-person-cell small,
.talent-contact-cell strong,
.talent-contact-cell span,
.talent-contact-cell small,
.talent-job-cell strong,
.talent-job-cell span,
.talent-job-cell small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.talent-person-cell strong,
.talent-contact-cell strong,
.talent-job-cell strong {
    color: #20383f;
    font-size: 14px;
    line-height: 1.4;
}

.talent-person-cell small,
.talent-contact-cell span,
.talent-contact-cell small,
.talent-job-cell span,
.talent-job-cell small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.talent-count-cell {
    display: grid;
    gap: 5px;
    align-content: center;
}

.talent-count-cell span {
    display: inline-flex;
    width: max-content;
    min-height: 22px;
    align-items: center;
    border-radius: 999px;
    padding: 0 8px;
    background: #eef5f4;
    color: #31565d;
    font-size: 12px;
    font-weight: 900;
}

.talent-status-cell {
    display: grid;
    gap: 6px;
    align-content: center;
}

.talent-table-actions {
    grid-template-columns: 1fr;
}

.talent-table-actions .btn {
    min-height: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 12px;
}

.talent-base-grid,
.talent-contact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.talent-note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.talent-wide {
    grid-column: span 2;
}

.talent-half {
    grid-column: span 1;
}

.talent-repeat-list {
    display: grid;
    gap: 10px;
}

.talent-repeat-row {
    display: grid;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid rgba(218, 229, 231, .9);
    border-radius: 8px;
    background: #f8fbfb;
}

.talent-repeat-row.work-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(2, 130px) 82px 74px;
}

.talent-repeat-row.education-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, minmax(110px, .7fr)) 82px 74px;
}

.talent-repeat-row.certificate-row {
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 130px minmax(220px, 1.2fr) 82px 74px 74px;
}

.talent-repeat-content {
    grid-column: 1 / -2;
}

.talent-repeat-add {
    margin-top: 10px;
}

@media (max-width: 980px) {
    .company-profile-hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
        padding: 38px 0;
    }

    .company-profile-visual {
        max-width: 520px;
    }

    .company-profile-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .company-profile-trust-strip,
    .company-profile-summary-card,
    .company-profile-promise-card {
        grid-template-columns: 1fr;
    }

    .company-profile-cover {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 38px;
    }

    .company-profile-cover-mission,
    .company-profile-cover-service {
        grid-template-columns: 1fr;
    }

    .company-profile-capability-grid {
        grid-template-columns: 1fr;
    }

    .company-profile-trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .company-profile-trust-strip div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(218, 229, 231, .95);
    }

    .company-profile-trust-strip div:nth-child(4) {
        border-top: 1px solid rgba(218, 229, 231, .95);
    }

    .news-channel-hero-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        min-height: 0;
    }

    .news-channel-panel {
        max-width: 520px;
    }

    .required-reading-hero-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        min-height: 0;
        padding: 38px 0;
    }

    .required-reading-panel {
        max-width: 560px;
    }

    .required-reading-path,
    .required-reading-feature-grid {
        grid-template-columns: 1fr;
    }

    .required-reading-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .required-reading-item {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .required-reading-item em {
        grid-column: 2;
        justify-self: flex-start;
        min-width: 74px;
    }

    .certification-hero-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .certification-visual {
        max-width: 360px;
    }

    .tone-cswip .certification-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
    }

    .tone-iwcc .certification-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
    }

    .cswip-overview,
    .iwcc-overview {
        grid-template-columns: 1fr;
    }

    .certification-course-grid,
    .certification-info-grid {
        grid-template-columns: 1fr;
    }

    .certification-cswip-band .certification-course-card::after,
    .certification-iwcc-band .certification-course-card::after {
        right: -18px;
        bottom: -18px;
        width: 156px;
        height: 102px;
        opacity: .28;
    }

    .certification-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .certification-section-head p:last-child {
        max-width: none;
        text-align: left;
    }

    .news-layout {
        grid-template-columns: 1fr;
    }

    .company-profile-page-band .news-layout {
        grid-template-columns: 1fr;
    }

    .company-profile-page-band .news-list {
        grid-template-columns: 1fr;
    }

    .news-sidebar {
        order: 2;
    }

    .news-list-item {
        grid-template-columns: 132px minmax(0, 1fr);
    }

    .news-filter-panel .news-admin-filter,
    .news-category-row,
    .news-bulk-bar {
        grid-template-columns: 1fr;
    }

    .news-head-actions,
    .news-row-actions,
    .news-table-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .news-form-grid,
    .news-article-title-row,
    .news-article-meta-row {
        grid-template-columns: 1fr;
    }

    .news-category-main-grid,
    .news-category-display-grid,
    .news-category-seo-grid {
        grid-template-columns: 1fr;
    }

    .news-cover-uploader,
    .news-feature-card-grid {
        grid-template-columns: 1fr;
    }

    .news-category-title-line {
        flex-wrap: wrap;
    }

    .news-field-wide,
    .news-article-title-field,
    .news-article-category-field,
    .news-article-status-field,
    .news-article-sort-field,
    .news-article-published-field,
    .news-article-views-field,
    .news-cover-field,
    .news-summary-field {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .company-profile-hero::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(240, 249, 247, .92)),
            url("/assets/img/home-preview/banner01.jpg") right top / auto 66% no-repeat;
        opacity: .45;
    }

    .company-profile-hero-inner {
        padding: 30px 0;
    }

    .company-profile-path {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .company-profile-hero h1 {
        font-size: 32px;
    }

    .company-profile-lead {
        font-size: 15px;
        line-height: 1.78;
    }

    .company-profile-tags {
        gap: 8px;
        margin-top: 20px;
    }

    .company-profile-tags span {
        min-height: 30px;
        font-size: 12px;
    }

    .company-profile-visual {
        min-height: 0;
        padding: 16px;
    }

    .company-profile-logo-card {
        padding: 15px;
    }

    .company-profile-logo-card img {
        width: 178px;
    }

    .company-profile-service-grid {
        grid-template-columns: 1fr;
    }

    .company-profile-trust-strip {
        grid-template-columns: 1fr;
    }

    .company-profile-trust-strip div,
    .company-profile-trust-strip div:nth-child(3),
    .company-profile-trust-strip div:nth-child(4) {
        min-height: 76px;
        border-left: 0;
        border-top: 1px solid rgba(218, 229, 231, .95);
    }

    .company-profile-trust-strip div:first-child {
        border-top: 0;
    }

    .company-profile-summary-card,
    .company-profile-promise-card {
        gap: 14px;
    }

    .company-profile-capability-grid article {
        min-height: 0;
    }

    .company-profile-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .company-profile-cover-band {
        padding: 22px 0 48px;
    }

    .company-profile-cover {
        min-height: 0;
        padding: 24px 20px;
    }

    .company-profile-cover::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(247, 252, 251, .9)),
            url("/assets/img/home-preview/banner01.jpg") right top / auto 68% no-repeat;
    }

    .company-profile-cover-main h2 {
        font-size: 30px;
    }

    .company-profile-cover-main p {
        font-size: 15px;
        line-height: 1.85;
    }

    .company-profile-cover-panel {
        padding: 18px;
    }

    .company-profile-cover-panel img {
        width: 180px;
    }

    .company-profile-cover-mission {
        gap: 12px;
    }

    .company-profile-cover-mission article {
        min-height: 0;
        padding: 18px;
    }

    .company-profile-cover-service {
        gap: 16px;
        padding: 20px;
    }

    .company-profile-cover-service h2 {
        font-size: 22px;
    }

    .company-profile-detail-cover header,
    .company-profile-detail-lead,
    .company-profile-detail-body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .company-profile-detail-cover header h2 {
        font-size: 24px;
    }

    .company-profile-detail-lead,
    .company-profile-detail-body {
        font-size: 15px;
        line-height: 1.86;
    }

    .news-channel-hero {
        background: linear-gradient(145deg, #10343b 0%, #17636b 100%);
    }

    .news-channel-hero::before {
        background:
            linear-gradient(180deg, rgba(16, 52, 59, .96), rgba(16, 52, 59, .82)),
            url("/assets/img/home-preview/banner02.jpg") right top / auto 72% no-repeat;
        opacity: .5;
    }

    .news-channel-hero-inner {
        padding: 34px 0;
    }

    .news-channel-copy h1 {
        font-size: 32px;
    }

    .news-channel-copy p:not(.eyebrow):not(.news-channel-path) {
        font-size: 15px;
        line-height: 1.78;
    }

    .news-channel-panel {
        padding: 18px;
    }

    .required-reading-hero {
        background: linear-gradient(145deg, #f8fcfb 0%, #e9f7f5 100%);
    }

    .required-reading-hero::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78)),
            url("/assets/img/home-preview/banner02.jpg") right top / auto 64% no-repeat;
        opacity: .32;
    }

    .required-reading-hero-copy h1 {
        font-size: 34px;
    }

    .required-reading-hero-copy > p:not(.eyebrow) {
        font-size: 15px;
        line-height: 1.78;
    }

    .required-reading-actions {
        gap: 8px;
    }

    .required-reading-actions a {
        min-height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }

    .required-reading-panel {
        padding: 20px;
    }

    .required-reading-panel strong {
        font-size: 19px;
    }

    .required-reading-band {
        padding: 24px 0 48px;
    }

    .required-reading-path article,
    .required-reading-feature-grid > a,
    .required-reading-feature-grid > .empty-state,
    .required-reading-item {
        padding: 16px;
    }

    .required-reading-feature-grid strong {
        margin-top: 30px;
        font-size: 20px;
    }

    .required-reading-section-head h2 {
        font-size: 24px;
    }

    .required-reading-item {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: flex-start;
    }

    .required-reading-item > span {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }

    .required-reading-item em {
        grid-column: auto;
    }

    .news-channel-panel-list a,
    .news-channel-panel-list div {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .certification-hero-grid {
        padding: 34px 0;
    }

    .certification-hero h1 {
        font-size: 31px;
    }

    .tone-cswip h1 {
        font-size: 34px;
    }

    .tone-iwcc h1 {
        font-size: 34px;
    }

    .certification-hero.tone-cswip {
        background:
            linear-gradient(145deg, rgba(8, 35, 44, .96), rgba(14, 82, 91, .92)),
            url("/assets/img/home-preview/banner01.jpg") right top / auto 78% no-repeat;
    }

    .certification-hero.tone-iwcc {
        background:
            linear-gradient(145deg, rgba(2, 25, 40, .96), rgba(3, 57, 86, .92)),
            url("/assets/img/home-preview/banner02.jpg") right top / auto 78% no-repeat;
    }

    .certification-hero.tone-cswip::before {
        right: -12px;
        bottom: -16px;
        font-size: 86px;
    }

    .certification-hero.tone-iwcc::before {
        right: -12px;
        bottom: -16px;
        font-size: 86px;
    }

    .certification-hero-copy > p:last-of-type {
        font-size: 14px;
    }

    .cswip-hero-pills {
        gap: 8px;
    }

    .cswip-hero-pills span {
        min-height: 30px;
        font-size: 12px;
    }

    .iwcc-hero-pills {
        gap: 8px;
    }

    .iwcc-hero-pills span {
        min-height: 30px;
        font-size: 12px;
    }

    .cswip-logo-stage {
        grid-template-columns: 84px minmax(0, 1fr);
        padding: 14px;
    }

    .cswip-logo-stage img {
        width: 84px;
        height: 84px;
    }

    .cswip-logo-stage span {
        font-size: 14px;
    }

    .iwcc-logo-stage {
        padding: 14px;
    }

    .iwcc-logo-stage img {
        max-width: 200px;
        height: 58px;
    }

    .iwcc-logo-stage span {
        font-size: 14px;
    }

    .iwcc-method-grid {
        gap: 9px;
    }

    .iwcc-method-grid div {
        min-height: 68px;
        padding: 10px;
    }

    .iwcc-method-grid strong {
        font-size: 18px;
    }

    .iwcc-accreditation-note {
        padding: 13px;
    }

    .iwcc-accreditation-note p {
        font-size: 13px;
        line-height: 1.7;
    }

    .cswip-accreditation-logos {
        gap: 9px;
    }

    .cswip-accreditation-card {
        min-height: 104px;
        padding: 10px;
    }

    .cswip-accreditation-card img {
        max-height: 84px;
    }

    .cswip-accreditation-card:nth-child(2) img {
        max-height: 94px;
    }

    .cswip-overview,
    .iwcc-overview {
        padding: 16px;
    }

    .iwcc-overview img {
        width: 170px;
        height: 48px;
    }

    .certification-section-head,
    .certification-panel {
        padding: 16px;
    }

    .certification-panel-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .news-article-page-panel {
        padding: 12px;
    }

    .news-category-form .site-dialog-section {
        padding: 13px 14px 14px;
    }

    .news-category-tree-cell {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 8px;
        padding-left: var(--category-mobile-indent);
    }

    .news-category-tree-line {
        left: calc(var(--category-mobile-indent) + 12px);
    }

    .news-category-node {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .news-page-actions {
        justify-content: flex-start;
        padding: 10px;
    }

    .news-page-actions .btn {
        flex: 1 1 132px;
        min-width: 0;
    }

    .news-hero h1 {
        font-size: 28px;
    }

    .news-list-item {
        grid-template-columns: 1fr;
    }

    .news-thumb {
        min-height: 168px;
    }

    .news-main,
    .news-detail,
    .news-side-card {
        padding: 14px;
    }

    .news-detail-head h2 {
        font-size: 23px;
    }

    .company-profile-page-band {
        padding: 22px 0 46px;
    }

    .company-profile-summary-card {
        padding: 18px 18px 18px 20px;
    }

    .company-profile-summary-card h2 {
        font-size: 22px;
    }

    .company-profile-page-band .news-list-item {
        min-height: 0;
        padding: 18px;
    }

    .company-profile-detail {
        padding: 18px;
    }
}

@media (max-width: 1280px) {
    .review-list-toolbar {
        grid-template-columns: 1fr;
    }

    .review-list-tools {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        justify-items: stretch;
    }

    .review-list-tools .application-name-search-form {
        border-right: 0;
        padding-right: 0;
    }

    .review-list-tools .bulk-select-control {
        width: fit-content;
    }

    .review-bulk-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) max-content;
        width: 100%;
        justify-content: stretch;
    }

    .review-bulk-form select {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }
}

.admin-edit-form {
    display: grid;
    gap: 0;
}

.admin-form-grid {
    display: grid;
    gap: 14px;
}

.admin-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form-section {
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.admin-field {
    display: grid;
    gap: 6px;
}

.admin-field span {
    color: #38525b;
    font-weight: 700;
}

.admin-field em {
    margin-left: 6px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.admin-field small {
    color: var(--muted);
    font-size: 12px;
}

.admin-field.is-required textarea,
.admin-field.is-required input {
    border-color: rgba(181, 91, 78, .78);
    background: #fffafa;
}

.legacy-field-key {
    color: #8a9aa0 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.admin-bulk-form {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.admin-export-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 10px;
    border-left: 1px solid var(--line);
}

.admin-export-actions > span {
    color: #38525b;
    font-size: 13px;
    font-weight: 900;
}

.admin-bulk-form select {
    width: auto;
    flex: 0 0 156px;
    min-width: 156px;
    height: 38px;
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.admin-application-list-panel .admin-bulk-form .btn {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 12px;
    font-size: 13px;
}

.admin-application-list-panel .admin-export-actions .btn {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 12px;
    font-size: 13px;
}

.course-metrics {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.course-metrics .metric-card {
    min-height: 58px;
    padding: 8px 12px;
}

.course-metrics .metric-card span {
    font-size: 12px;
}

.course-metrics .metric-card strong {
    margin-top: 2px;
    font-size: 22px;
    line-height: 1.1;
}

.course-manager-head,
.course-section-head,
.course-project-head,
.course-period-head,
.course-project-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.course-manager-head {
    align-items: flex-start;
    padding: 12px 16px;
}

.course-manager-head h2,
.course-section-head h2,
.course-project-head h3 {
    margin: 0 0 6px;
}

.course-manager-head h2 {
    margin-bottom: 0;
}

.course-manager-head p,
.course-section-head p,
.course-period-head span,
.course-project-footer span {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.course-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 480px;
    padding-top: 1px;
}

.course-flow-topbar {
    max-width: none;
    padding-top: 0;
}

.course-flow span,
.course-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 8px;
    background: #eef7f5;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.course-flow span {
    gap: 6px;
    background: #f3f7f6;
    color: #60767b;
}

.course-flow span.active {
    background: #eef7f5;
    color: var(--teal);
}

.course-flow strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 11px;
}

.course-step-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.course-step-head-compact {
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.course-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.course-step-copy,
.course-inline-title {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.course-plan-kicker {
    margin-bottom: 6px;
}

.course-plan-note {
    margin: 0 !important;
    padding-bottom: 2px;
}

.course-step-head h2 {
    margin: 0 0 4px;
}

.course-step-copy h2,
.course-inline-title h2 {
    margin: 0;
}

.course-step-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.course-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--teal);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.course-plan-panel {
    display: grid;
    gap: 8px;
    padding: 12px 16px;
}

.course-plan-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 8px;
}

.course-plan-tabs a {
    display: grid;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #1f343b;
}

.course-plan-tabs a.active {
    border-color: rgba(42, 132, 120, 0.55);
    background: #eef7f5;
    box-shadow: inset 0 0 0 1px rgba(42, 132, 120, 0.12);
}

.course-plan-tabs span,
.course-project-head small {
    color: var(--muted);
    font-size: 12px;
}

.course-plan-tabs strong {
    font-size: 14px;
    line-height: 1.35;
}

.course-create-form,
.course-inline-actions,
.course-edit-grid,
.course-plan-edit-form,
.course-stacked-form,
.course-detail-form,
.period-edit-form,
.period-create-form {
    display: grid;
    gap: 10px;
}

.course-create-form {
    grid-template-columns: minmax(260px, 1.6fr) 100px minmax(150px, 170px) 120px max-content;
    align-items: end;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.course-create-form label,
.course-edit-grid label,
.course-plan-edit-form label,
.course-stacked-form label,
.course-detail-form label {
    display: grid;
    gap: 6px;
}

.course-create-form span,
.course-edit-grid span,
.course-plan-edit-form span,
.course-stacked-form span,
.course-detail-form span {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.course-create-form input,
.course-create-form select,
.course-inline-actions input,
.course-inline-actions select,
.course-edit-grid input,
.course-edit-grid select,
.course-plan-edit-form input,
.course-plan-edit-form select,
.course-stacked-form input,
.course-stacked-form select,
.course-detail-form input,
.course-detail-form select,
.period-edit-form input,
.period-edit-form select,
.period-create-form input,
.period-create-form select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    background: #ffffff;
    font: inherit;
}

.course-plan-current {
    display: grid;
    gap: 8px;
    padding: 12px 16px;
}

.course-plan-edit-form {
    grid-template-columns: minmax(220px, 1fr) 76px 110px 170px max-content;
    align-items: end;
}

.course-inline-actions {
    grid-template-columns: minmax(180px, 1fr) 76px 96px 160px 160px max-content;
    align-items: center;
    flex: 1 1 680px;
}

.course-layout {
    display: grid;
    grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.course-sidebar-panel,
.course-main-stack,
.course-current-panel {
    display: grid;
    gap: 14px;
}

.course-project-options {
    display: grid;
    gap: 8px;
}

.course-project-option {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #1f343b;
}

.course-project-option:hover,
.course-project-option.active {
    border-color: rgba(42, 132, 120, 0.55);
    background: #eef7f5;
}

.course-project-option span {
    color: var(--muted);
    font-size: 12px;
}

.course-plan-summary,
.course-project-summary {
    display: grid;
    gap: 8px;
}

.course-plan-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.course-project-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-plan-summary > div,
.course-project-summary > div {
    min-height: 76px;
    padding: 12px;
    border: 1px solid rgba(210, 225, 224, 0.8);
    border-radius: 8px;
    background: #f8fbfb;
}

.course-plan-summary > div {
    min-height: 50px;
    padding: 8px 12px;
}

.course-plan-summary span,
.course-project-summary span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.course-plan-summary strong,
.course-project-summary strong {
    color: #1f343b;
    font-size: 14px;
    line-height: 1.45;
}

.course-project-hint {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.course-stacked-form {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.course-create-trigger {
    width: 100%;
}

.course-two-fields {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
}

.course-project-list {
    display: grid;
    gap: 14px;
}

.course-project-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.course-project-card.active {
    border-color: rgba(42, 132, 120, 0.55);
    box-shadow: 0 16px 36px rgba(24, 69, 72, 0.08);
}

.course-project-head {
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.course-project-title-line {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.course-project-title-line h2,
.course-project-title-line h3 {
    margin: 0;
}

.course-project-title-line small {
    padding-bottom: 2px;
    color: var(--muted);
    font-size: 12px;
}

.course-dialog-head .course-dialog-title-line h2 {
    margin: 0;
    color: #1f343b;
    font-size: 20px;
}

.course-edit-grid {
    grid-template-columns: minmax(240px, 1.4fr) 80px 160px 160px 100px max-content;
    align-items: end;
}

.course-detail-form {
    grid-template-columns: 80px 110px minmax(170px, 1fr) max-content;
    align-items: end;
}

.course-detail-form .course-title-field {
    grid-column: 1 / -1;
}

.course-create-form .btn,
.course-inline-actions .btn,
.course-edit-grid .btn,
.course-plan-edit-form .btn,
.course-stacked-form .btn,
.course-detail-form .btn,
.course-dialog-form .btn,
.period-edit-form .btn,
.period-create-form .btn,
.period-row > form:last-child .btn {
    min-width: 82px;
    padding-right: 14px;
    padding-left: 14px;
}

.course-row-actions {
    align-self: end;
}

.course-period-panel {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    background: #f7fbfa;
}

.course-period-titlebar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.course-period-titlebar .btn {
    flex: 0 0 auto;
}

.course-period-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.period-list {
    display: grid;
    gap: 8px;
}

.period-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid rgba(210, 225, 224, 0.72);
    border-radius: 8px;
    background: #ffffff;
}

.period-row > form:last-child {
    justify-self: end;
}

.period-edit-form {
    grid-template-columns: minmax(200px, 1fr) 64px 152px max-content max-content;
    align-items: center;
    gap: 8px;
}

.period-edit-form input,
.period-edit-form select {
    min-height: 38px;
    padding: 7px 9px;
}

.period-create-form {
    grid-template-columns: minmax(250px, 1.4fr) 72px 158px 96px max-content;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.course-project-footer {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.course-dialog {
    width: min(620px, calc(100% - 32px));
    padding: 0;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 26px 70px rgba(20, 48, 54, 0.24);
}

.course-dialog::backdrop {
    background: rgba(18, 35, 40, 0.42);
}

.course-dialog-head,
.course-dialog-danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.course-dialog-head h2 {
    margin: 8px 0 0;
    color: #1f343b;
    font-size: 20px;
}

.course-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #38525b;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.course-dialog-form {
    display: grid;
    grid-template-columns: 112px 140px minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
}

.course-dialog-form label {
    display: grid;
    gap: 6px;
}

.course-dialog-form .course-sort-field {
    max-width: 112px;
}

.course-dialog-form .course-status-field {
    max-width: 140px;
}

.course-dialog-form span {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.course-dialog-form .course-title-field,
.course-dialog-actions {
    grid-column: 1 / -1;
}

.course-dialog-form input,
.course-dialog-form select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    background: #ffffff;
    font: inherit;
}

.course-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.course-dialog-danger {
    border-top: 1px solid var(--line);
    border-bottom: 0;
    background: #fbf7f6;
}

.course-dialog-danger span {
    color: #7d5148;
    font-size: 13px;
    font-weight: 800;
}

.system-metrics {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.system-metrics .metric-card {
    min-height: 76px;
    padding: 12px 14px;
}

.system-metrics .metric-card strong {
    overflow: hidden;
    font-size: 24px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-overview-panel,
.system-list-panel,
.system-settings-panel,
.system-settings-tabs-panel,
.system-settings-pane,
.system-log-panel,
.system-count-panel {
    padding: 18px;
}

.system-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.system-module-card {
    display: grid;
    gap: 6px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfc;
    color: #1f343b;
}

.system-module-card:hover {
    border-color: rgba(42, 132, 120, .55);
    background: #eef7f5;
}

.system-module-card strong {
    font-size: 15px;
}

.system-module-card span,
.system-list-tip {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.system-filter-panel {
    padding: 14px 16px;
}

.sms-login-check-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.sms-login-check-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 10px;
}

.sms-login-check-grid > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(214, 226, 229, .92);
    border-radius: 8px;
    background: #fbfdfd;
}

.sms-login-check-grid span,
.sms-login-log-title {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.sms-login-check-grid strong {
    overflow: hidden;
    color: #1f343b;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sms-login-check-grid small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sms-login-check-grid code,
.sms-login-check-panel code {
    padding: 1px 5px;
    border-radius: 5px;
    background: #edf7f5;
    color: var(--teal);
    font-size: 11px;
}

.sms-login-log-list {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed rgba(168, 186, 191, .7);
}

.sms-login-log-row {
    display: grid;
    grid-template-columns: 120px 140px 54px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(224, 232, 235, .9);
    border-radius: 8px;
    background: #ffffff;
}

.sms-login-log-row strong {
    color: #1f343b;
    font-size: 13px;
}

.sms-login-log-row span,
.sms-login-log-row small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sms-login-log-row em {
    justify-self: start;
    min-width: 42px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.sms-login-log-row em.success {
    background: #eaf7f4;
    color: #167268;
}

.sms-login-log-row em.danger {
    background: #fff0ec;
    color: #a43d2b;
}

.system-settings-form {
    display: grid;
    gap: 0;
    min-width: 0;
}

.system-settings-form > *,
.system-settings-panes,
.system-settings-tabs-panel,
.system-settings-pane {
    min-width: 0;
}

.system-settings-tabs-panel {
    position: relative;
    z-index: 2;
    padding: 16px 18px 0;
    border-color: var(--line);
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.system-settings-panes {
    margin-top: 0;
}

.system-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
}

.system-settings-head h2 {
    margin: 4px 0 0;
    color: #1f343b;
    font-size: 20px;
    line-height: 1.25;
}

.system-settings-head p {
    max-width: 620px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.system-settings-head .btn {
    width: auto;
    min-width: 132px;
}

.system-settings-tabbar {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 -18px;
    padding: 10px 18px 0;
    border-top: 1px dashed rgba(168, 186, 191, .72);
    background: linear-gradient(180deg, #fbfcfc 0%, #f7faf9 100%);
    overflow-x: auto;
}

.system-settings-tabbar::after {
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    z-index: 1;
    height: 1px;
    background: rgba(42, 132, 120, .56);
    content: "";
}

.system-settings-tab {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 2px;
    flex: 0 0 168px;
    min-height: 58px;
    margin-bottom: 0;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    background: #f7fbfa;
    color: #38525b;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.system-settings-tab:hover {
    border-color: rgba(42, 132, 120, .42);
    background: #eef7f5;
}

.system-settings-tab:not(.is-active) {
    z-index: 2;
    margin-bottom: 0;
    border-bottom-color: rgba(42, 132, 120, .56);
    box-shadow: none;
}

.system-settings-tab.is-active {
    z-index: 3;
    border-color: rgba(42, 132, 120, .56);
    border-bottom-color: transparent;
    background: #ffffff;
    color: var(--teal);
    box-shadow: inset 0 3px 0 var(--teal);
    transform: translateY(1px);
}

.system-settings-tab strong {
    font-size: 14px;
    line-height: 1.3;
}

.system-settings-tab span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-settings-pane {
    padding: 0 18px 18px;
    margin-top: 0;
    border-color: var(--line);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: #f7faf9;
}

.system-settings-pane[hidden] {
    display: none !important;
}

.system-setting-list {
    margin-top: 0;
    border: 1px solid rgba(42, 132, 120, .56);
    border-top: 0;
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: #ffffff;
    overflow: hidden;
}

.system-setting-row {
    display: grid;
    grid-template-columns: 156px minmax(0, 1fr);
    gap: 16px;
    min-height: 58px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(220, 230, 234, .82);
}

.system-setting-row:last-child {
    border-bottom: 0;
}

.system-setting-row:hover {
    background: #fbfdfd;
}

.system-setting-label {
    padding-top: 10px;
    color: #38525b;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

.system-setting-control {
    display: grid;
    gap: 6px;
    max-width: 620px;
}

.system-setting-control.is-compact {
    max-width: 360px;
}

.system-setting-control.is-wide {
    max-width: 820px;
}

.system-setting-control input,
.system-setting-control select,
.system-setting-control textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.system-setting-control select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #6e858b 50%), linear-gradient(135deg, #6e858b 50%, transparent 50%);
    background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    padding-right: 34px;
}

.system-setting-control textarea {
    resize: vertical;
}

.system-setting-control input:focus,
.system-setting-control select:focus,
.system-setting-control textarea:focus {
    border-color: rgba(42, 132, 120, .72);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(42, 132, 120, .1);
}

.system-setting-control small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.application-filter-panel .admin-filter.system-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.application-filter-panel .admin-filter.system-filter input {
    flex: 1 1 240px;
    width: auto;
    min-width: 180px;
}

.application-filter-panel .admin-filter.system-filter select {
    flex: 0 1 154px;
    width: auto;
    min-width: 132px;
}

.application-filter-panel .admin-filter.system-filter .btn {
    flex: 0 0 auto;
    min-width: 58px;
}

.system-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.system-form-grid label,
.system-dialog-form label {
    display: grid;
    gap: 6px;
}

.system-form-grid span,
.system-dialog-form span {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.system-form-grid small {
    margin-left: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.system-form-grid input,
.system-form-grid select,
.system-form-grid textarea,
.system-dialog-form input,
.system-dialog-form select,
.system-dialog-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    background: #ffffff;
    font: inherit;
}

.system-form-grid textarea,
.system-dialog-form textarea {
    resize: vertical;
}

.system-form-wide,
.system-dialog-wide {
    grid-column: 1 / -1;
}

.system-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 18px 12px 0;
    border-top: 1px dashed rgba(168, 186, 191, .75);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
}

.system-sticky-actions .btn,
.system-sticky-actions .primary-link {
    height: 42px;
    min-height: 42px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
}

.system-dialog {
    width: min(760px, calc(100% - 32px));
}

.system-dialog-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.system-dialog-form .course-dialog-actions {
    grid-column: 1 / -1;
}

.system-check-field {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 0 0;
}

.system-check-field input {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    min-height: 16px;
}

.system-check-field span {
    font-size: 13px;
}

.system-state-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.system-table {
    min-width: 1080px;
}

.system-table td,
.system-table th {
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-table {
    min-width: 1140px;
}

.site-table th:nth-child(1) {
    width: 230px;
}

.site-table th:nth-child(2) {
    width: 210px;
}

.site-table th:nth-child(3) {
    width: 220px;
}

.site-table th:nth-child(5),
.site-table th:nth-child(6) {
    width: 116px;
}

.site-table td {
    vertical-align: top;
}

.site-identity {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.site-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(42, 132, 120, .2);
    border-radius: 8px;
    background: #eff7f5;
    color: var(--teal);
    font-size: 18px;
    font-weight: 900;
}

.site-stack {
    display: grid;
    gap: 4px;
}

.site-stack em {
    width: fit-content;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(42, 132, 120, .1);
    color: var(--teal);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.45;
}

.site-seo-cell strong,
.site-seo-cell span,
.site-seo-cell small {
    display: block;
    max-width: 310px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-seo-cell small {
    margin-top: 4px;
    color: #819198;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.site-status-cell {
    display: grid;
    gap: 8px;
    align-content: start;
}

.site-status-cell > span:not(.state) {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.site-action-cell .btn {
    min-height: 34px;
    padding: 0 14px;
}

.site-settings-back {
    justify-self: end;
    width: auto;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}

.site-list-head .site-settings-back {
    flex: 0 0 auto;
    min-width: 132px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 13px;
}

.site-list-head {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.system-list-head {
    margin-bottom: 14px;
    border-bottom: 1px dashed rgba(168, 186, 191, .72);
}

.system-list-head .system-list-tip {
    align-self: center;
    flex: 0 0 auto;
    border: 1px solid rgba(168, 186, 191, .74);
    border-radius: 7px;
    padding: 8px 10px;
    background: #f8fbfa;
    color: #38525b;
}

.channel-list-actions,
.channel-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.channel-list-actions .btn {
    width: auto;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

.channel-table {
    min-width: 1120px;
}

.channel-table th:nth-child(1) {
    width: 250px;
}

.channel-table th:nth-child(2) {
    width: 170px;
}

.channel-table th:nth-child(3) {
    width: 220px;
}

.channel-table th:nth-child(4) {
    width: 132px;
}

.channel-table th:nth-child(5) {
    width: 110px;
}

.channel-table th:nth-child(6) {
    width: 132px;
}

.channel-sort-field {
    display: grid;
    grid-template-columns: 34px 72px;
    align-items: center;
    gap: 6px;
}

.channel-sort-field span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.channel-sort-field input {
    width: 72px;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 8px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
}

.channel-row-actions .btn {
    min-height: 34px;
    padding: 0 12px;
}

.channel-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.channel-feature-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(220, 230, 234, .9);
    border-radius: 8px;
    background: #f8fbfb;
}

.channel-feature-check input {
    width: 16px;
    height: 16px;
    min-height: 16px;
}

.channel-feature-check span {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.site-dialog {
    width: min(920px, calc(100% - 32px));
}

.site-dialog .course-dialog-head {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
}

.site-dialog-form {
    display: block;
    max-height: min(720px, calc(100vh - 154px));
    overflow: auto;
    padding: 0;
}

.site-dialog-section {
    padding: 16px 18px 18px;
    border-bottom: 1px solid rgba(220, 230, 234, .86);
}

.site-dialog-section:last-of-type {
    border-bottom: 0;
}

.site-dialog-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.site-dialog-section-head h3 {
    margin: 0;
    color: #213b43;
    font-size: 15px;
    line-height: 1.25;
}

.site-dialog-section-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.site-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.site-field-grid.site-state-grid {
    grid-template-columns: 120px minmax(180px, 260px) minmax(0, 1fr);
    align-items: end;
}

.site-field {
    display: grid;
    gap: 6px;
}

.site-field.is-wide {
    grid-column: 1 / -1;
}

.site-field.is-small {
    max-width: 120px;
}

.site-field span,
.site-default-switch span {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.site-field input,
.site-field select,
.site-field textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
}

.site-field textarea {
    resize: vertical;
}

.site-field input:focus,
.site-field select:focus,
.site-field textarea:focus {
    border-color: rgba(42, 132, 120, .72);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(42, 132, 120, .1);
}

.message-template-dialog {
    width: min(900px, calc(100% - 32px));
}

.message-template-dialog .course-dialog-head {
    align-items: flex-start;
    padding: 17px 20px;
}

.message-template-dialog .course-dialog-head h2 {
    max-width: 680px;
    margin-top: 6px;
    font-size: 20px;
    line-height: 1.3;
}

.message-template-form {
    background: #ffffff;
}

.message-dialog-summary {
    background: linear-gradient(180deg, #fbfdfd 0%, #f7fbfa 100%);
}

.message-template-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.message-template-meta span {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(220, 230, 234, .9);
    border-radius: 8px;
    background: #ffffff;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.message-template-meta strong {
    overflow: hidden;
    color: #213b43;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-field-grid {
    align-items: end;
}

.message-field-grid-sms {
    grid-template-columns: 150px minmax(180px, 1fr) 130px 172px 128px;
}

.message-field-grid-mail {
    grid-template-columns: 150px minmax(180px, 1fr) 128px;
}

.message-field-grid-mail .site-field.is-wide {
    grid-column: 1 / 3;
}

.message-status-field {
    max-width: 128px;
}

.message-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 12px;
    align-items: stretch;
}

.message-template-textarea textarea {
    min-height: 210px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.65;
}

.message-helper-box {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(42, 132, 120, .2);
    border-radius: 8px;
    background: #f5faf8;
    color: #38525b;
    font-size: 12px;
    line-height: 1.55;
}

.message-helper-box strong {
    color: #213b43;
    font-size: 13px;
}

.message-helper-box p {
    margin: 0;
}

.message-helper-box code,
.message-template-dialog .site-dialog-section-head code {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 6px;
    background: #eaf6f3;
    color: var(--teal);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.compact-category-dialog {
    width: min(680px, calc(100vw - 32px));
}

.course-management-dialog {
    width: min(720px, calc(100vw - 32px));
}

.compact-category-grid {
    grid-template-columns: minmax(0, 1fr) 112px 148px;
    align-items: end;
}

.compact-category-title {
    min-width: 0;
}

.site-dialog.user-group-dialog {
    width: min(620px, calc(100vw - 32px));
}

.user-group-dialog-grid {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: end;
}

.site-dialog .user-group-dialog-tip {
    margin-top: 12px;
}

.navigation-dialog,
.legacy-url-dialog {
    width: min(880px, calc(100vw - 32px));
}

.navigation-basic-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 112px 148px;
    align-items: end;
}

.legacy-url-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
}

.site-default-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(220, 230, 234, .9);
    border-radius: 8px;
    background: #f8fbfb;
}

.site-default-switch input {
    width: 16px;
    height: 16px;
    min-height: 16px;
}

.admin-manager-table {
    min-width: 980px;
}

.admin-manager-table th:nth-child(1) {
    width: 58px;
}

.admin-manager-table th:nth-child(2) {
    width: 210px;
}

.admin-manager-table th:nth-child(3) {
    width: 170px;
}

.admin-manager-table th:nth-child(4) {
    width: 210px;
}

.admin-manager-table th:nth-child(5) {
    width: 156px;
}

.admin-manager-table th:nth-child(6) {
    width: 86px;
}

.admin-manager-table th:nth-child(7) {
    width: 132px;
}

.admin-manager-table th,
.admin-manager-table td {
    padding: 12px 12px;
}

.admin-manager-sequence-cell strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    color: #213b43;
    font-size: 15px;
}

.admin-manager-sequence-cell span,
.admin-manager-last-login-cell span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.admin-manager-last-login-cell strong {
    color: #213b43;
    font-size: 13px;
    font-weight: 900;
}

.admin-manager-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-height: 28px;
    border: 1px solid rgba(168, 186, 191, .74);
    border-radius: 7px;
    padding: 0 8px;
    background: #ffffff;
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.admin-manager-status::before {
    display: none;
}

.admin-manager-status.is-normal {
    border-color: rgba(42, 132, 120, .24);
    background: #f5fbf9;
    color: var(--teal);
}

.admin-manager-status.is-disabled {
    border-color: rgba(210, 85, 36, .24);
    background: #fff8f5;
    color: var(--coral);
}

.admin-manager-status.is-trash {
    border-color: rgba(116, 129, 136, .28);
    background: #f5f6f6;
    color: #667a80;
}

.admin-manager-head-actions,
.admin-manager-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.admin-manager-head-actions {
    flex-wrap: wrap;
}

.admin-manager-actions form {
    display: inline-flex;
    margin: 0;
}

.admin-manager-actions .btn {
    min-width: 54px;
    min-height: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
}

.admin-manager-filter input {
    max-width: 360px;
}

.admin-manager-state-grid {
    grid-template-columns: minmax(180px, 1fr) minmax(150px, .72fr) minmax(140px, .7fr);
    align-items: end;
}

.admin-manager-audit-switch {
    align-self: end;
}

.admin-manager-legacy-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-manager-account-grid {
    grid-template-columns: minmax(140px, .8fr) minmax(150px, .9fr) minmax(160px, 1fr) minmax(160px, 1fr);
}

.admin-manager-contact-grid {
    grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.1fr);
}

.admin-log-filter select {
    flex: 0 1 260px;
    min-width: 210px;
}

.admin-log-filter input {
    flex: 1 1 260px;
    max-width: 420px;
}

.admin-log-head {
    align-items: center;
}

.admin-action-log-table {
    min-width: 980px;
}

.admin-action-log-table th:nth-child(1) {
    width: 180px;
}

.admin-action-log-table th:nth-child(2) {
    width: 172px;
}

.admin-action-log-table th:nth-child(4) {
    width: 230px;
}

.admin-log-person strong,
.admin-log-time,
.admin-log-meta strong {
    color: #213b43;
    font-size: 13px;
    font-weight: 900;
}

.admin-log-time {
    white-space: nowrap;
}

.admin-log-message {
    display: grid;
    gap: 4px;
}

.admin-log-message span {
    width: fit-content;
    border: 1px solid rgba(42, 132, 120, .22);
    border-radius: 7px;
    padding: 4px 8px;
    background: #f4fbf9;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.admin-log-message strong {
    color: #1f343b;
    font-size: 14px;
    line-height: 1.4;
}

.admin-log-message small,
.admin-log-meta span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.admin-role-table {
    min-width: 1040px;
}

.admin-role-table th:nth-child(1) {
    width: 290px;
}

.admin-role-table th:nth-child(2) {
    width: 150px;
}

.admin-role-table th:nth-child(3) {
    width: 130px;
}

.admin-role-table th:nth-child(5) {
    width: 110px;
}

.admin-role-type-stack .state {
    width: fit-content;
}

.admin-role-type-stack em {
    width: fit-content;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(42, 132, 120, .1);
    color: var(--teal);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.45;
}

.admin-role-permission-summary {
    display: grid;
    max-width: 440px;
    gap: 4px;
}

.admin-role-permission-summary strong,
.admin-role-permission-summary span {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-role-permission-summary strong {
    color: #213b43;
    font-size: 14px;
}

.admin-role-permission-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.admin-role-dialog {
    width: min(1120px, calc(100% - 32px));
}

.admin-role-permission-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(220, 230, 234, .9);
    border-radius: 8px;
    padding: 10px 12px;
    background: #f8fbfa;
}

.admin-role-permission-toolbar > div:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.admin-role-permission-toolbar strong {
    color: #213b43;
    font-size: 14px;
}

.admin-role-permission-toolbar span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.admin-role-permission-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.admin-role-permission-actions .btn,
.admin-role-permission-group-head .btn {
    width: auto;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 12px;
}

.admin-role-super-note {
    margin-bottom: 12px;
    border: 1px solid rgba(42, 132, 120, .22);
    border-radius: 8px;
    padding: 9px 11px;
    background: #f3faf8;
    color: #2a746b;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.5;
}

.admin-role-permission-groups {
    display: grid;
    max-height: 430px;
    overflow: auto;
    gap: 10px;
    padding-right: 2px;
}

.admin-role-permission-groups[aria-disabled] {
    opacity: .58;
}

.admin-role-permission-group {
    border: 1px solid rgba(220, 230, 234, .95);
    border-radius: 8px;
    background: #ffffff;
}

.admin-role-permission-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(220, 230, 234, .86);
    padding: 9px 10px;
    background: #f8fbfb;
}

.admin-role-permission-group-head h4 {
    margin: 0;
    color: #213b43;
    font-size: 14px;
}

.admin-role-permission-rows {
    display: grid;
}

.admin-role-permission-row {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(232, 238, 240, .86);
}

.admin-role-permission-row:last-child {
    border-bottom: 0;
}

.admin-role-permission-name {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.admin-role-permission-name strong {
    overflow: hidden;
    color: #213b43;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-role-permission-name span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-role-permission-checks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-role-permission-checks label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    border: 1px solid rgba(220, 230, 234, .95);
    border-radius: 7px;
    padding: 0 8px;
    background: #ffffff;
}

.admin-role-permission-checks input {
    width: 14px;
    height: 14px;
    min-height: 14px;
}

.admin-role-permission-checks span {
    color: #38525b;
    font-size: 12px;
    font-weight: 900;
}

.admin-role-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-dialog-form .course-dialog-actions {
    position: sticky;
    bottom: 0;
    padding: 12px 18px;
    border-top: 1px solid rgba(220, 230, 234, .9);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
}

.system-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.system-log-view {
    max-height: 620px;
    overflow: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid #24454c;
    border-radius: 8px;
    background: #102126;
    color: #d9e8ea;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.65;
    white-space: pre-wrap;
}

@media (max-width: 1180px) {
    .system-module-grid,
    .system-form-grid,
    .sms-login-check-grid,
    .system-dialog-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .message-template-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .message-field-grid-sms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .message-field-grid-mail,
    .message-content-layout,
    .navigation-basic-grid,
    .legacy-url-grid {
        grid-template-columns: 1fr;
    }

    .message-field-grid-mail .site-field.is-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .system-metrics,
    .system-module-grid,
    .system-form-grid,
    .sms-login-check-grid,
    .system-dialog-form {
        grid-template-columns: 1fr;
    }

    .sms-login-log-row {
        grid-template-columns: 1fr;
    }

    .message-template-meta,
    .message-field-grid-sms,
    .compact-category-grid,
    .user-group-dialog-grid {
        grid-template-columns: 1fr;
    }

    .system-settings-head {
        align-items: stretch;
        flex-direction: column;
    }

    .system-settings-head .btn {
        align-self: flex-start;
    }

    .system-settings-tab {
        flex-basis: 148px;
    }

    .system-setting-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .system-setting-label {
        padding-top: 0;
    }

    .system-setting-control,
    .system-setting-control.is-compact,
    .system-setting-control.is-wide {
        max-width: none;
    }

    .system-sticky-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

.exam-type-panel {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
}

.exam-type-main strong,
.exam-type-main span,
.exam-type-meta span,
.exam-type-meta strong {
    display: block;
}

.exam-type-main span,
.exam-type-meta span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.exam-type-list {
    display: grid;
    gap: 8px;
}

.exam-type-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.exam-type-row {
    display: grid;
    grid-template-columns: 220px 110px minmax(128px, 160px) 58px 92px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.exam-type-main strong {
    color: #1f343b;
    font-size: 16px;
    line-height: 1.35;
    white-space: nowrap;
}

.exam-type-main span {
    white-space: nowrap;
}

.exam-type-sort-field {
    display: grid;
    grid-column: 5;
    gap: 4px;
}

.exam-type-meta {
    grid-column: 3;
}

.exam-type-sort-field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.exam-type-meta span {
    font-weight: 800;
}

.exam-type-sort-field input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 9px;
    background: #ffffff;
    font: inherit;
}

.exam-type-meta strong {
    margin-top: 3px;
    color: #1f343b;
    font-size: 13px;
}

.exam-type-actions {
    display: flex;
    grid-column: 7;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.exam-type-actions .btn {
    min-width: 72px;
    min-height: 38px;
    padding-right: 12px;
    padding-left: 12px;
}

.course-empty-guide {
    min-height: 220px;
    display: grid;
    align-items: center;
}

.legacy-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.legacy-summary-grid > div,
.material-check-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfdfd;
}

.legacy-summary-grid span,
.legacy-summary-grid small,
.material-check-item span,
.material-check-item small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.legacy-summary-grid strong,
.material-check-item strong {
    display: block;
    margin: 5px 0;
    color: #1f343b;
}

.material-check-link {
    display: inline-flex;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 800;
}

.material-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.material-check-grid-focused {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-material-details {
    margin-top: 16px;
}

.material-check-item.ready {
    border-color: rgba(88, 142, 90, .32);
}

.material-check-item.missing {
    border-color: rgba(204, 100, 82, .36);
    background: #fff8f6;
}

.material-check-item.missing strong {
    color: var(--coral);
}

.material-file-review {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.material-file-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.material-file-review-head span {
    color: #1f343b;
    font-size: 14px;
    font-weight: 900;
}

.material-file-review-head strong {
    color: var(--teal);
    font-size: 12px;
}

.material-file-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
}

.material-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid rgba(88, 142, 90, .28);
    border-radius: 8px;
    background: #f8fcfa;
}

.material-file-row span,
.material-file-row small {
    display: block;
}

.material-file-row span {
    color: #1f343b;
    font-size: 12px;
    font-weight: 900;
}

.material-file-path {
    overflow: hidden;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-file-link {
    min-height: 28px;
    align-items: center;
    padding: 0 9px;
    border-radius: 7px;
    background: #eef7f7;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.material-file-empty {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.field-error {
    color: var(--coral) !important;
    font-weight: 700;
}

.legacy-field-panel {
    display: grid;
    gap: 14px;
}

.legacy-field-groups {
    display: grid;
    gap: 10px;
}

.admin-field-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfd;
}

.admin-field-group summary {
    min-height: 46px;
    padding: 0 14px;
    color: #38525b;
    font-weight: 900;
    cursor: pointer;
}

.admin-field-group[open] summary {
    border-bottom: 1px solid var(--line);
}

.admin-field-group .admin-form-grid {
    padding: 14px;
}

.admin-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 10px;
    padding: 16px 0 0;
    background: linear-gradient(180deg, rgba(238, 244, 243, 0), #eef4f3 34%);
}

.admin-dialog-body {
    margin: 0;
    background: #eef4f3;
    color: var(--ink);
}

.admin-dialog-content {
    padding: 14px;
}

.application-edit-compact {
    display: grid;
    gap: 12px;
}

.application-edit-compact .admin-panel {
    padding: 16px;
}

.application-edit-hero {
    display: grid;
    gap: 12px;
}

.application-edit-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.application-edit-title h2 {
    margin: 0;
    color: #1f343b;
    font-size: 21px;
}

.application-edit-title p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.application-edit-title p span {
    margin-left: 10px;
}

.quick-status-strip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.application-edit-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.application-edit-facts div,
.quick-edit-section {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfd;
}

.application-edit-facts div {
    padding: 10px 12px;
}

.application-edit-facts span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.application-edit-facts strong {
    display: block;
    margin-top: 4px;
    color: #1f343b;
    font-size: 13px;
    line-height: 1.45;
}

.application-quick-head {
    margin-bottom: 12px;
}

.application-quick-head h2 {
    font-size: 19px;
}

.quick-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.quick-edit-section {
    display: grid;
    align-content: start;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfd;
}

.quick-edit-section h3 {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    color: #1f343b;
    font-size: 15px;
}

.quick-edit-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 10px 12px 12px;
}

.quick-section-review .quick-edit-fields {
    grid-template-columns: minmax(132px, .7fr) minmax(170px, .9fr) minmax(0, 1.4fr);
}

.quick-section-review .admin-field-key-inforeview {
    grid-column: 1;
}

.quick-section-review .admin-field-key-customer_number {
    grid-column: 2;
}

.quick-section-review .admin-field-key-remark1 {
    grid-column: 1 / -1;
}

.quick-section-profile .quick-edit-fields {
    grid-template-columns: minmax(82px, .68fr) minmax(145px, 1.18fr) minmax(64px, .5fr) minmax(92px, .72fr) minmax(165px, 1.38fr);
}

.quick-section-profile .admin-field-key-addres {
    grid-column: 1 / -1;
}

.quick-section-exam .quick-edit-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-section-identity .quick-edit-fields {
    grid-template-columns: minmax(128px, .7fr) minmax(0, 1.2fr) minmax(140px, .75fr);
}

.application-quick-form .admin-field.is-hidden-admin-field {
    display: none;
}

.quick-section-material h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quick-section-material h3 .state {
    min-height: 24px;
    padding: 0 8px;
    font-size: 12px;
}

.quick-section-notice .quick-edit-fields {
    grid-template-columns: minmax(130px, .6fr) minmax(130px, .6fr) minmax(0, 1fr) minmax(0, 1fr);
}

.quick-section-notice .admin-field-key-remark2 {
    grid-column: 1 / span 2;
}

.quick-section-notice .admin-field-key-remark3 {
    grid-column: 3 / -1;
}

.application-quick-form .admin-field {
    gap: 5px;
}

.application-quick-form .admin-field span {
    font-size: 12px;
    font-weight: 900;
}

.application-quick-form .admin-field input,
.application-quick-form .admin-field select,
.application-quick-form .admin-field textarea {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
}

.application-quick-form .admin-field textarea {
    min-height: 72px;
}

.application-quick-form .admin-field-key-remark2,
.application-quick-form .admin-field-key-remark3,
.application-quick-form .admin-field-key-addres {
    min-width: 0;
}

.application-quick-form .legacy-field-key {
    display: none;
}

.material-check-compact .material-check-grid {
    margin-top: 12px;
}

.material-check-compact .material-check-item {
    padding: 10px 12px;
}

.compact-sticky-actions {
    margin-top: -2px;
    padding: 12px 0 0;
}

@media (max-width: 980px) {
    .header-inner {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 0;
    }

    .hero {
        min-height: 460px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .feature-grid,
    .content-grid,
    .product-grid,
    .job-grid,
    .resume-grid,
    .split-grid,
    .two-column,
    .metric-grid,
    .admin-filter,
    .application-filter-panel:not(.result-filter-panel):not(.certificate-filter-panel) .admin-filter,
    .admin-form-grid.two,
    .member-application-summary,
    .member-application-body,
    .member-application-facts,
    .member-result-hero,
    .member-result-metrics,
    .member-result-summary,
    .member-result-card,
    .member-result-body,
    .member-result-data,
    .member-result-content .member-result-data,
    .record-grid,
    .result-entry-line,
    .result-single-form,
    .result-record,
    .result-row-form,
    .result-dialog-update-form,
    .certificate-dialog-files,
    .certificate-dialog-file-row,
    .result-detail-grid,
    .user-filter,
    .user-group-filter,
    .user-bulk-form,
    .user-record,
    .user-edit-grid,
    .user-application-summary,
    .user-group-record,
    .legacy-summary-grid,
    .material-check-grid,
    .material-file-list,
    .quick-edit-fields,
    .application-progress,
    .auth-page,
    .member-layout,
    .member-profile-form .profile-info-grid,
    .member-profile-form .profile-address-grid,
    .course-layout {
        grid-template-columns: 1fr;
    }

    .review-record {
        grid-template-columns: 32px repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .review-check {
        grid-row: 1 / span 3;
        justify-items: center;
        padding-top: 4px;
    }

    .review-actions-cell {
        grid-column: 2 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .review-manager-cell {
        grid-column: 2 / -1;
    }

    .review-assign-summary {
        grid-template-columns: 1fr;
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
    }

    .member-page-brief,
    .member-result-brief,
    .member-application-head,
    .member-result-head {
        align-items: stretch;
        flex-direction: column;
    }

    .member-dashboard-hero,
    .member-profile-facts,
    .member-action-grid {
        grid-template-columns: 1fr;
    }

    .member-dashboard-profile {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .member-application-states,
    .member-application-actions,
    .member-result-card .member-result-actions {
        justify-content: flex-start;
    }

    .member-result-hero-main {
        padding: 16px 16px 0;
    }

    .member-result-hero-main small {
        white-space: normal;
    }

    .member-result-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 16px 16px;
    }

    .member-result-metrics div {
        min-height: 48px;
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px dashed rgba(168, 186, 191, .78);
    }

    .member-result-score {
        border-right: 0;
        border-bottom: 1px solid rgba(205, 219, 223, .86);
    }

    .member-result-card .member-result-actions {
        padding: 0 16px 16px;
    }

    .admin-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-application-list-panel .record-grid {
        grid-template-columns: minmax(168px, 1fr) minmax(190px, 1.2fr);
        row-gap: 12px;
    }

    .admin-application-list-panel .record-grid > div:nth-child(n+4) {
        grid-column: 1 / -1;
    }

    .course-manager-head,
    .course-section-head,
    .course-project-head,
    .course-period-head,
    .course-period-titlebar,
    .course-period-actions,
    .exam-type-head-actions,
    .course-project-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .course-flow {
        justify-content: flex-start;
        max-width: none;
    }

    .admin-topbar-actions {
        justify-content: flex-start;
    }

    .course-create-form,
    .course-inline-actions,
    .course-edit-grid,
    .course-plan-edit-form,
    .course-detail-form,
    .course-dialog-form,
    .course-project-summary,
    .exam-type-row,
    .period-edit-form,
    .period-create-form,
    .period-row {
        grid-template-columns: 1fr;
    }

    .exam-type-actions {
        grid-column: auto;
        justify-content: flex-start;
    }

    .exam-type-sort-field {
        grid-column: auto;
    }

    .exam-type-meta {
        grid-column: auto;
    }

    .user-list-tools,
    .user-group-toolbar-actions,
    .user-actions-cell,
    .user-group-actions {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
    }

    .user-edit-wide {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .shell {
        width: min(100% - 16px, 1180px);
    }

    .hero-content {
        padding: 70px 0 86px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero-copy {
        font-size: 16px;
    }

    .hero-actions,
    .footer-grid,
    .section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;
    }

    .site-footer .copyright {
        display: block;
        line-height: 1.8;
    }

    .btn,
    .primary-link {
        width: 100%;
    }

    .header-actions {
        flex-shrink: 1;
        gap: 0;
        max-width: calc(100% - 112px);
        padding: 3px;
    }

    .header-actions .header-register-link,
    .header-actions .header-auth-link {
        width: auto;
        min-height: 30px;
        padding: 0 8px;
        font-size: 11px;
    }

    .header-actions .header-search {
        width: auto;
        height: 30px;
        grid-template-columns: 42px;
    }

    .header-actions .header-search input {
        display: none;
    }

    .header-actions .header-search button {
        min-height: 28px;
        padding: 0;
        font-size: 11px;
        border-left: 0;
    }

    .site-header-main {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
        padding: 7px 0;
    }

    .brand {
        flex: 0 0 auto;
    }

    .brand-logo {
        width: 104px;
        height: 35px;
    }

    .brand span {
        display: none;
    }

    .wechat-card > button {
        justify-content: center;
        width: 30px;
        min-height: 30px;
        padding: 0;
        font-size: 0;
    }

    .wechat-card > button span {
        width: 16px;
        height: 16px;
    }

    .main-nav-inner {
        min-height: 42px;
    }

    .main-nav li > a {
        min-height: 42px;
        padding: 0 14px;
        font-size: 13px;
    }

    .system-settings-head .btn {
        align-self: flex-start;
        width: auto;
        min-width: 132px;
    }

    .site-dialog-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .site-field-grid,
    .site-field-grid.site-state-grid {
        grid-template-columns: 1fr;
    }

    .admin-role-permission-toolbar,
    .admin-role-permission-group-head {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-role-permission-actions {
        flex-wrap: wrap;
    }

    .admin-role-permission-row {
        grid-template-columns: 1fr;
    }

    .channel-feature-grid {
        grid-template-columns: 1fr;
    }

    .channel-list-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    .site-field.is-small {
        max-width: none;
    }

    .admin-manager-account-grid,
    .admin-manager-contact-grid,
    .admin-manager-legacy-grid,
    .admin-manager-state-grid {
        grid-template-columns: 1fr;
    }

    .admin-manager-head-actions,
    .admin-manager-actions {
        justify-content: flex-start;
    }

    .band,
    .split-band {
        padding: 52px 0;
    }

    .row-link {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 18px;
    }

    .admin-content,
    .admin-topbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .auth-copy,
    .auth-form,
    .member-panel {
        padding: 18px;
    }

    .auth-page-login {
        gap: 18px;
        padding-top: 30px;
    }

    .auth-page-login::before {
        inset: 12px -8px 28px;
    }

    .auth-page-login .auth-copy {
        min-height: auto;
        padding: 22px 6px 8px;
    }

    .auth-page-login .auth-copy h1 {
        font-size: 30px;
    }

    .auth-login-service {
        margin-top: 0;
    }

    .auth-page-login .auth-form {
        align-self: stretch;
        padding: 20px;
    }

    .admin-nav,
    .form-grid.two,
    .admin-panel-head,
    .admin-list-toolbar,
    .member-metrics,
    .table-row {
        grid-template-columns: 1fr;
    }

    .member-result-metrics {
        grid-template-columns: 1fr;
    }

    .admin-panel-head,
    .admin-list-toolbar {
        display: grid;
    }

    .admin-list-tools,
    .result-list-tools,
    .record-head {
        align-items: stretch;
        flex-direction: column;
    }

    .member-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-head-status {
        justify-items: start;
    }

    .member-dashboard-profile,
    .member-profile-edit-panel {
        grid-template-columns: 1fr;
    }

    .member-profile-edit-avatar {
        width: 96px;
        height: 96px;
    }

    .member-avatar-cropper-dialog {
        width: min(100%, 350px);
        padding: 16px;
    }

    .member-avatar-cropper-stage {
        width: 240px;
        height: 240px;
    }

    .member-avatar-cropper-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .renewal-head-tip {
        max-width: none;
        width: 100%;
    }

    .admin-list-tools {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .application-name-search-form {
        grid-template-columns: max-content minmax(0, 1fr) 58px;
        padding-right: 0;
        padding-bottom: 10px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .result-name-search-form {
        width: 100%;
        flex-basis: auto;
    }

    .application-export-strip {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-bulk-form {
        flex-wrap: wrap;
    }

    .course-plan-panel,
    .course-plan-current,
    .course-sidebar-panel,
    .course-current-panel,
    .course-project-card,
    .course-period-panel {
        padding: 14px;
    }

    .course-plan-tabs,
    .course-two-fields {
        grid-template-columns: 1fr;
    }

    .application-record {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .record-check {
        justify-items: start;
        padding-top: 0;
    }

    .admin-application-list-panel .record-grid,
    .record-grid {
        grid-template-columns: 1fr;
    }

    .record-person {
        flex-basis: auto;
        width: 100%;
    }

    .record-grid > div {
        padding: 10px 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .record-photo-column {
        position: static;
        grid-template-columns: 55px max-content;
        width: auto;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    .record-contact-info {
        padding-left: 0 !important;
    }

    .record-contact-info::before {
        display: none;
    }

    .record-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .record-actions-inline {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .record-actions-inline form,
    .record-actions-inline .btn {
        flex: 1 1 92px;
        width: auto;
    }

    .record-identity-info {
        grid-template-columns: 1fr;
    }

    .record-status-inline {
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
        border-left: 0;
        padding-left: 0;
        justify-content: flex-start;
    }

    .record-status-photo {
        border-left: 1px solid var(--line);
        padding-left: 8px;
    }

    .record-status-inline .state {
        width: auto;
        min-width: 86px;
    }

    .application-review-summary {
        grid-template-columns: 1fr;
    }

    .application-quick-form .admin-field {
        grid-column: auto !important;
    }

    .admin-edit-dialog {
        width: calc(100vw - 18px);
        height: calc(100vh - 18px);
    }

    .record-status-stack {
        justify-content: flex-start;
    }

    .admin-bulk-form {
        justify-content: stretch;
        min-width: 0;
    }

    .application-name-search-form {
        grid-template-columns: 1fr;
    }

    .admin-bulk-form select {
        min-width: 0;
        width: 100%;
    }

    .admin-export-actions {
        align-items: stretch;
        padding-left: 0;
        border-left: 0;
    }

    .application-edit-title,
    .application-quick-head {
        align-items: stretch;
        flex-direction: column;
    }

    .quick-status-strip {
        justify-content: flex-start;
    }

    .application-edit-facts,
    .quick-edit-grid,
    .quick-edit-fields {
        grid-template-columns: 1fr;
    }

    .admin-dialog-content {
        padding: 10px;
    }

    .admin-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-page-size-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-pagination-nav {
        align-items: flex-start;
        flex-direction: column;
        min-width: 0;
        width: 100%;
    }

    .admin-pagination-summary {
        white-space: normal;
    }

    .admin-pagination-summary span {
        display: block;
        margin-left: 0;
    }

    .admin-pagination-controls {
        justify-content: flex-start;
    }

    .table-row {
        padding: 14px 16px;
    }

    #student-application-form {
        gap: 16px;
    }

    #student-application-form .application-section {
        gap: 14px;
        padding: 16px;
    }

    #student-application-form .form-grid.two {
        grid-template-columns: 1fr;
    }

    #student-application-form .basic-info-grid,
    #student-application-form .certificate-info-grid,
    #student-application-form .address-grid,
    #student-application-form .english-name-row {
        grid-template-columns: 1fr;
    }

    #student-application-form .basic-name-field,
    #student-application-form .basic-sex-field,
    #student-application-form .basic-contact-field,
    #student-application-form .english-name-row,
    #student-application-form .field-third,
    #student-application-form .field-half,
    #student-application-form .field-wide,
    #student-application-form .certificate-control,
    #student-application-form .certificate-upload {
        grid-column: 1 / -1;
    }

    #student-application-form .english-name-note {
        margin: -2px 0 0;
    }

    #student-application-form .application-draft-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    #student-application-form .upload-control {
        grid-template-columns: 1fr;
    }

    #student-application-form .upload-button {
        width: 100%;
        min-width: 0;
    }

    #student-application-form .application-submit-row {
        align-items: stretch;
        flex-direction: column;
        position: static;
        padding-top: 0;
        background: transparent;
    }

    #student-application-form .autosave-status {
        text-align: center;
    }
}

.site-list-head.system-settings-head {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.site-list-head > div {
    min-width: 0;
}

.site-list-head .site-settings-back {
    align-self: center;
    flex: 0 0 auto;
    width: auto;
}

@media (max-width: 860px) {
    .site-list-head.system-settings-head.news-article-page-head {
        align-items: stretch;
        flex-direction: column;
    }

    .site-list-head.system-settings-head.news-article-page-head .news-head-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 860px) {
    .admin-login-body {
        background: #eef4f3;
    }

    .admin-login-page {
        grid-template-columns: 1fr;
        align-content: start;
        width: min(100% - 24px, 560px);
        gap: 16px;
        padding: 16px 0 28px;
    }

    .admin-login-hero {
        order: 2;
        gap: 18px;
        padding: 20px;
        border-radius: 8px;
        background: #102f36;
    }

    .admin-login-card {
        order: 1;
    }

    .admin-login-copy h1 {
        font-size: 27px;
    }

    .admin-login-copy p {
        font-size: 13px;
    }

    .admin-login-facts {
        grid-template-columns: 1fr;
    }

    .admin-login-card { padding: 22px; }
}

@media (max-width: 520px) {
    .admin-login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

.home-v2-hero {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(247, 251, 250, .93) 42%, rgba(247, 251, 250, .56) 66%, rgba(16, 47, 54, .2) 100%),
        url("/assets/img/home-preview/banner01.jpg") center / cover no-repeat;
}

.home-v2-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .75fr);
    align-items: center;
    gap: 46px;
    padding: 78px 0 84px;
}

.home-v2-hero-copy {
    min-width: 0;
}

.home-v2-hero-copy .eyebrow,
.home-v2-section-title .eyebrow,
.home-v2-enroll-card .eyebrow,
.home-v2-quality .eyebrow {
    color: var(--teal);
}

.home-v2-section-title .eyebrow {
    margin-bottom: 9px;
    font-size: 16px;
    font-weight: 400;
}

.home-v2-hero-copy h1 {
    max-width: 720px;
    margin: 0;
    color: #14343c;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 900;
}

.home-v2-hero-copy p {
    max-width: 650px;
    margin: 18px 0 0;
    color: #45636b;
    font-size: 17px;
    line-height: 1.9;
}

.home-v2-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.home-v2-actions .btn-secondary {
    border-color: rgba(31, 138, 138, .24);
    background: #ffffff;
    color: var(--teal);
}

.home-v2-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.home-v2-proof div {
    min-height: 76px;
    border: 1px solid rgba(31, 138, 138, .18);
    border-radius: 8px;
    padding: 12px 13px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 14px 34px rgba(17, 45, 54, .08);
}

.home-v2-proof strong,
.home-v2-proof span {
    display: block;
}

.home-v2-proof strong {
    color: #14343c;
    font-size: 18px;
    line-height: 1.15;
}

.home-v2-proof span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.home-v2-visual {
    position: relative;
    min-height: 420px;
}

.home-v2-weld-visual {
    position: absolute;
    inset: 0 0 70px;
    overflow: hidden;
    border: 1px solid rgba(31, 138, 138, .2);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(17, 61, 71, .92), rgba(24, 124, 125, .84)),
        url("/assets/img/home-preview/banner02.jpg") center / cover no-repeat;
    box-shadow: 0 24px 60px rgba(17, 45, 54, .2);
}

.home-v2-weld-visual::before {
    content: "";
    position: absolute;
    right: 72px;
    bottom: 94px;
    width: 140px;
    height: 62px;
    border: 16px solid rgba(255, 255, 255, .22);
    border-bottom: 0;
    transform: rotate(-25deg);
}

.home-v2-metal {
    position: absolute;
    left: 44px;
    right: 44px;
    bottom: 72px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(90deg, #dfe9eb, #8fa7ad, #dfe9eb);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}

.home-v2-spark {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f0b24b;
    box-shadow: 0 0 0 12px rgba(240, 178, 75, .12), 0 0 36px rgba(240, 178, 75, .7);
}

.home-v2-spark.spark-a {
    left: 47%;
    top: 42%;
}

.home-v2-spark.spark-b {
    left: 56%;
    top: 33%;
    width: 9px;
    height: 9px;
}

.home-v2-spark.spark-c {
    left: 39%;
    top: 52%;
    width: 7px;
    height: 7px;
}

.home-v2-path-card {
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    border: 1px solid rgba(31, 138, 138, .16);
    border-radius: 8px;
    padding: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 22px 54px rgba(17, 45, 54, .16);
}

.home-v2-card-head,
.home-v2-panel-head,
.home-v2-subhead,
.home-v2-section-title,
.home-v2-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.home-v2-card-head h2,
.home-v2-panel-head h3,
.home-v2-subhead h3 {
    margin: 0;
    color: #14343c;
}

.home-v2-card-head h2 {
    font-size: 20px;
}

.home-v2-card-head span {
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(31, 138, 138, .1);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.home-v2-path-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.home-v2-path-list div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas:
        "no title tag"
        "no text tag";
    align-items: center;
    gap: 0 12px;
    min-height: 58px;
    border: 1px solid #e1ecef;
    border-radius: 8px;
    padding: 8px 10px;
    background: #f9fcfc;
}

.home-v2-path-list b {
    grid-area: no;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: var(--teal);
    color: #ffffff;
    font-size: 12px;
}

.home-v2-path-list strong {
    grid-area: title;
    color: #17333a;
    font-size: 15px;
}

.home-v2-path-list span {
    grid-area: text;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-path-list em {
    grid-area: tag;
    color: var(--coral);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.home-v2-matrix {
    position: relative;
    z-index: 2;
    margin-top: -34px;
    padding-bottom: 54px;
}

.home-v2-matrix-panel {
    display: grid;
    grid-template-columns: 1.65fr repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(31, 138, 138, .16);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(17, 45, 54, .12);
}

.home-v2-matrix-title {
    display: grid;
    align-content: center;
    min-height: 112px;
    border-right: 1px solid var(--line);
    padding: 20px 22px;
    background: #f7fbfa;
}

.home-v2-matrix-title strong {
    color: #14343c;
    font-size: 21px;
    line-height: 1.2;
}

.home-v2-matrix-title span {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.home-v2-matrix-item {
    display: grid;
    grid-template-rows: 60px 22px 18px;
    align-content: center;
    justify-items: center;
    min-height: 112px;
    min-width: 0;
    border-right: 1px solid var(--line);
    padding: 12px 10px;
    text-align: center;
}

.home-v2-matrix-item:last-child {
    border-right: 0;
}

.home-v2-matrix-item img {
    width: 34px;
    height: 34px;
    align-self: center;
    margin-bottom: 0;
    object-fit: cover;
    border-radius: 8px;
}

.home-v2-matrix-item.is-logo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
}

.home-v2-matrix-item.logo-cswip img {
    width: 34px;
    height: 34px;
}

.home-v2-matrix-item.logo-iwcc img {
    width: 64px;
    height: 34px;
    opacity: .88;
    filter: brightness(1.45) saturate(.82) contrast(.92);
}

.home-v2-matrix-item.logo-bgas img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.home-v2-matrix-item.logo-inspection img {
    width: 34px;
    height: 34px;
}

.home-v2-matrix-item strong,
.home-v2-matrix-item span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}

.home-v2-matrix-item strong {
    align-self: end;
    color: #1d3940;
    font-size: 15px;
    line-height: 1.35;
    white-space: nowrap;
}

.home-v2-matrix-item span {
    align-self: start;
    margin-top: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
}

.home-v2-matrix-item.is-static {
    cursor: default;
}

.home-v2-matrix-item:hover strong {
    color: var(--teal);
}

.home-v2-matrix-item.is-static:hover strong {
    color: #1d3940;
}

.home-v2-section {
    padding: 70px 0;
    background: #ffffff;
}

.section {
    padding: 92px 0;
    background: #ffffff;
}

.section#courses {
    padding-top: 45px;
    padding-bottom: 45px;
}

.section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 36px;
}

.course-title-heading {
    min-width: 0;
}

.section-title h2 {
    margin: 0;
    color: #14343c;
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: 0;
}

.section-title .course-title-en {
    display: block;
    max-width: none;
    margin: 0 0 9px;
    color: var(--teal);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

.section-title p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85;
}

.section-title .course-title-links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: none;
    color: #111111;
    font-size: 15px;
    line-height: 1.5;
    white-space: nowrap;
}

.course-title-links a {
    color: #111111;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.course-title-links a:hover {
    color: var(--teal);
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.course-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 318px;
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 28px;
    background: #ffffff;
    box-shadow: 0 14px 42px rgba(8, 45, 50, .08);
}

.course-card::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -36px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(0, 121, 111, .09);
    z-index: 0;
}

.course-card > * {
    position: relative;
    z-index: 1;
}

.course-card .course-kicker {
    display: block;
    min-height: 0;
    margin-bottom: 14px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.course-card h3 {
    margin: 0 0 14px;
    background: transparent;
    color: #14343c;
    font-size: 25px;
    line-height: 1.25;
    letter-spacing: 0;
}

.course-card h3 a {
    color: inherit;
    text-decoration: none;
}

.course-card h3 a:hover {
    color: var(--teal);
}

.course-card p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.tag {
    border: 1px solid rgba(220, 232, 229, .9);
    border-radius: 999px;
    padding: 8px 10px;
    background: #f3f8f6;
    color: #35565b;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.tag:hover {
    border-color: rgba(0, 121, 111, .28);
    background: #e9f5f2;
    color: var(--teal);
}

.course-contact-tags {
    flex-wrap: nowrap;
    gap: 6px;
}

.course-contact-tags .tag {
    white-space: nowrap;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 11px;
}

.course-contact-info {
    display: grid;
    gap: 7px;
    margin-top: auto;
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.course-contact-info strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.course-contact-info > span {
    display: block;
    white-space: nowrap;
}

.course-tag-note {
    display: inline;
    margin-left: 2px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.course-card-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: 16px;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.course-card-link::after {
    content: ">";
    font-size: 12px;
    line-height: 1;
}

.course-card-link:hover {
    color: #0b5f59;
}

.course-card.feature {
    border-color: rgba(255, 255, 255, .08);
    background: linear-gradient(145deg, #0d4145, #06262c);
    color: #ffffff;
}

.course-card.feature::before {
    background: rgba(255, 255, 255, .08);
}

.course-card.feature h3 {
    color: #ffffff;
}

.course-card.feature p {
    color: rgba(255, 255, 255, .72);
}

.course-card.feature .course-kicker {
    color: #91fff4;
}

.course-card.feature .tag {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.course-card.feature .tag:hover {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .16);
}

.course-card.feature .course-card-link {
    color: #91fff4;
}

.course-card.feature .course-card-link:hover {
    color: #ffffff;
}

.home-v2-section#courses {
    padding-top: 31px;
}

.home-v2-updates,
.home-v2-faq {
    background: #f5f8f7;
}

.home-v2-faq {
    padding-top: 43px;
    padding-bottom: 43px;
}

.home-v2-section#talent {
    padding-top: 43px;
}

.home-v2-updates {
    padding-top: 38px;
    padding-bottom: 43px;
}

.home-v2-section-title {
    margin-bottom: 24px;
}

.home-v2-section-title h2 {
    margin: 0;
    color: #14343c;
    font-size: 34px;
    line-height: 1.2;
}

.home-v2-section-title > p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.home-v2-faq-contact-note {
    overflow: visible;
}

.home-enterprise-wechat {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 3px;
    color: #0f837d;
    font-weight: 900;
    white-space: nowrap;
    cursor: default;
    outline: none;
}

.home-enterprise-wechat > img {
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(31, 138, 138, .22);
    border-radius: 4px;
    padding: 2px;
    background: #ffffff;
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(17, 45, 54, .08);
}

.home-enterprise-wechat-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 80;
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 184px;
    border: 1px solid rgba(31, 138, 138, .2);
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 45, 54, .16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease;
}

.home-enterprise-wechat-popover::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 18px;
    width: 10px;
    height: 10px;
    border-top: 1px solid rgba(31, 138, 138, .2);
    border-left: 1px solid rgba(31, 138, 138, .2);
    background: #ffffff;
    transform: rotate(45deg);
}

.home-enterprise-wechat:hover .home-enterprise-wechat-popover,
.home-enterprise-wechat:focus .home-enterprise-wechat-popover,
.home-enterprise-wechat:focus-within .home-enterprise-wechat-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.home-enterprise-wechat-popover img {
    display: block;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(205, 216, 214, .95);
    border-radius: 4px;
    padding: 3px;
    background: #ffffff;
    object-fit: contain;
}

.home-enterprise-wechat-popover small {
    color: #5f757b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
}

.home-v2-updates-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .85fr);
    gap: 22px;
}

.home-v2-panel,
.home-v2-course-block,
.home-v2-process-panel,
.home-v2-contact-card,
.home-v2-faq-grid article {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.home-v2-panel-head,
.home-v2-subhead {
    min-height: 60px;
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
}

.home-v2-panel-head h3,
.home-v2-subhead h3 {
    font-size: 22px;
    line-height: 1.2;
}

.home-v2-panel-head a,
.home-v2-subhead a {
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.home-v2-read-panel {
    display: flex;
    flex-direction: column;
}

.home-v2-feature-news {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

.home-v2-news-slider {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.home-v2-news-slider-track {
    display: flex;
    transition: transform .42s ease;
    will-change: transform;
}

.home-v2-news-slider .home-v2-feature-news {
    flex: 0 0 100%;
    width: 100%;
    border-bottom: 0;
}

.home-v2-news-slider-dots {
    position: absolute;
    right: 20px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(222, 232, 234, .86);
    border-radius: 999px;
    padding: 5px 7px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 8px 22px rgba(17, 45, 54, .08);
}

.home-v2-news-slider .home-v2-feature-news > div {
    padding-right: 56px;
}

.home-v2-news-slider-dots button {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: #b7c9cb;
    cursor: pointer;
}

.home-v2-news-slider-dots button.is-active {
    width: 22px;
    background: var(--teal);
}

.home-v2-feature-news img,
.home-v2-feature-visual {
    width: 100%;
    height: 176px;
    border-radius: 8px;
    object-fit: cover;
}

.home-v2-feature-visual {
    display: block;
    background:
        linear-gradient(135deg, rgba(31, 138, 138, .88), rgba(198, 95, 75, .76)),
        url("/assets/img/home-preview/46.jpg") center / cover no-repeat;
}

.home-v2-feature-news span,
.home-v2-news-list span,
.home-v2-plan-list span,
.home-v2-plan-list small,
.home-v2-job-list small,
.home-v2-empty {
    color: var(--muted);
    font-size: 13px;
}

.home-v2-feature-news h4 {
    display: -webkit-box;
    overflow: hidden;
    margin: 7px 0 8px;
    color: #17333a;
    font-size: 22px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-v2-feature-news p {
    display: -webkit-box;
    flex: 1;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.home-v2-feature-summary {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.home-v2-feature-news strong {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--teal);
    font-size: 13px;
    line-height: 1.7;
    white-space: nowrap;
}

.home-v2-news-list {
    display: grid;
}

.home-v2-news-list a {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 48px;
    align-items: center;
    min-height: 58px;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
}

.home-v2-news-list .home-v2-news-ico {
    display: block;
    width: 12px;
    height: 1px;
    border: 0;
    border-radius: 0;
    background: rgba(31, 138, 138, .38);
    box-shadow: none;
}

.home-v2-news-list a:last-child,
.home-v2-read-list a:last-child,
.home-v2-job-list a:last-child {
    border-bottom: 0;
}

.home-v2-news-list strong,
.home-v2-job-list strong,
.home-v2-plan-list strong {
    overflow: hidden;
    color: #1d3940;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-news-list time {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.home-v2-read-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 18px 18px;
}

.home-v2-read-list a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    flex: 1;
    align-items: start;
    gap: 14px;
    min-height: 104px;
    border-bottom: 1px solid var(--line);
    padding: 15px 4px;
}

.home-v2-read-list a > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin-top: 1px;
    border-radius: 8px;
    background: #eef7f6;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
}

.home-v2-read-list h4 {
    overflow: hidden;
    margin: 0;
    color: #1d3940;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-read-list p {
    display: -webkit-box;
    overflow: hidden;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.72;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-v2-quickbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.home-v2-quickbar a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 16px;
    background: #ffffff;
}

.home-v2-quickbar strong {
    overflow: hidden;
    color: #1d3940;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-quickbar span {
    color: var(--coral);
    font-size: 13px;
    font-weight: 900;
}

.home-v2-course-layout,
.home-v2-talent-grid,
.home-v2-quality-grid {
    display: grid;
    gap: 22px;
}

.home-v2-course-layout {
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, .78fr);
    align-items: start;
}

.home-v2-course-intro {
    min-width: 0;
}

.home-v2-course-intro .home-v2-subhead {
    min-height: 58px;
    padding: 0 18px;
}

.home-v2-course-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(31, 138, 138, .16);
    border-radius: 8px;
    padding: 4px;
    background: #f4faf9;
}

.home-v2-course-tabs button {
    height: 32px;
    border: 0;
    border-radius: 6px;
    padding: 0 14px;
    background: transparent;
    color: #31575f;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

.home-v2-course-tabs button.is-active {
    background: var(--teal);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(31, 138, 138, .18);
}

.home-v2-course-pane {
    display: none;
}

.home-v2-course-pane.is-active {
    display: block;
}

.home-v2-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.home-v2-course-card {
    display: grid;
    grid-template-rows: 112px auto 46px;
    gap: 10px;
    min-width: 0;
    border: 1px solid #e4ecef;
    border-radius: 8px;
    padding: 10px;
    background: #fbfdfd;
}

.home-v2-course-card img,
.home-v2-course-card > span {
    width: 100%;
    height: 112px;
    border-radius: 6px;
}

.home-v2-course-card img {
    object-fit: cover;
}

.home-v2-course-card > span {
    display: grid;
    place-items: center;
    background: #e9f5f3;
    color: var(--teal);
    font-size: 32px;
    font-weight: 900;
}

.home-v2-course-card strong,
.home-v2-course-card small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-v2-course-card strong {
    color: #1d3940;
    font-size: 15px;
    line-height: 1.35;
    white-space: nowrap;
}

.home-v2-course-card small {
    display: -webkit-box;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-v2-course-more {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--line);
    padding: 12px 16px 16px;
}

.home-v2-course-more a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    border-radius: 999px;
    padding: 0 14px;
    background: #eef7f6;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
}

.home-v2-enrollment,
.home-v2-quality {
    background: #f5f8f7;
}

.home-v2-enroll-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.home-v2-enroll-card {
    border-radius: 8px;
    padding: 26px;
    background: #102f36;
    color: #ffffff;
}

.home-v2-enroll-card .eyebrow,
.home-v2-enroll-card p {
    color: rgba(255, 255, 255, .78);
}

.home-v2-enroll-card h2 {
    margin: 10px 0 14px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.25;
}

.home-v2-enroll-card .btn {
    margin-top: 18px;
}

.home-v2-process-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    padding: 18px;
}

.home-v2-enrollment .home-v2-process-panel {
    grid-template-columns: 1fr;
}

.home-v2-process-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.home-v2-enrollment .home-v2-process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-v2-process-grid div {
    min-height: 126px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: #fbfdfd;
}

.home-v2-process-grid span {
    color: var(--coral);
    font-size: 12px;
    font-weight: 900;
}

.home-v2-process-grid strong {
    display: block;
    margin-top: 8px;
    color: #17333a;
    font-size: 17px;
}

.home-v2-process-grid p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.home-v2-plan-list {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.home-v2-course-plan {
    align-self: stretch;
    background: #ffffff;
}

.home-v2-course-plan .home-v2-subhead.compact {
    background: #fbfdfd;
}

.home-v2-subhead.compact {
    min-height: 52px;
    padding: 0 14px;
}

.home-v2-subhead.compact h3 {
    font-size: 18px;
}

.home-v2-plan-list a {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
    background: #ffffff;
}

.home-v2-course-plan a {
    min-height: 88px;
}

.home-v2-course-plan span {
    color: var(--coral);
    font-weight: 900;
}

.home-v2-plan-list a:last-child {
    border-bottom: 0;
}

.home-v2-plan-list small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-v2-talent-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
}

.home-v2-job-list {
    display: grid;
}

.home-v2-job-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    align-items: center;
    min-height: 82px;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    padding: 13px 20px;
}

.home-v2-job-list small {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-job-list a > span {
    display: grid;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: #fff0ed;
    color: var(--coral);
    font-size: 12px;
    font-weight: 900;
}

.home-v2-talent-card {
    padding-bottom: 20px;
}

.home-v2-talent-card p {
    margin: 18px 20px;
    color: var(--muted);
    font-size: 14px;
}

.home-v2-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 20px 18px;
}

.home-v2-tags span {
    border-radius: 999px;
    padding: 6px 10px;
    background: #eef7f6;
    color: #31575f;
    font-size: 12px;
    font-weight: 800;
}

.home-v2-talent-card .btn {
    margin-left: 20px;
}

.home-v2-talent-showcase {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: stretch;
}

.home-v2-talent-lead,
.home-v2-jobs-board {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 45, 54, .055);
}

.home-v2-talent-lead {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 386px;
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(31, 138, 138, .13), rgba(255, 255, 255, .95) 48%),
        linear-gradient(180deg, #ffffff, #f6fbfa);
}

.home-v2-talent-lead::before {
    content: "";
    position: absolute;
    right: -72px;
    bottom: -94px;
    width: 230px;
    height: 230px;
    border: 38px solid rgba(31, 138, 138, .08);
    border-radius: 50%;
}

.home-v2-talent-lead-copy,
.home-v2-talent-actions,
.home-v2-talent-points {
    position: relative;
    z-index: 1;
}

.home-v2-talent-lead-copy > span,
.home-v2-jobs-head span {
    display: inline-flex;
    width: max-content;
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(31, 138, 138, .1);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.home-v2-talent-lead h3,
.home-v2-jobs-head h3 {
    margin: 10px 0 0;
    color: #14343c;
    line-height: 1.25;
}

.home-v2-talent-lead h3 {
    max-width: 460px;
    font-size: 30px;
}

.home-v2-talent-lead p {
    max-width: 500px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.home-v2-talent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.home-v2-talent-actions .btn {
    min-height: 38px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.home-v2-talent-actions .btn-ghost {
    border-color: rgba(31, 138, 138, .22);
    background: #ffffff;
    color: var(--teal);
}

.home-v2-talent-points {
    display: grid;
    gap: 9px;
    margin-top: 24px;
}

.home-v2-talent-points div {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    min-height: 44px;
    gap: 12px;
    border: 1px solid rgba(216, 232, 230, .9);
    border-radius: 8px;
    padding: 0 12px;
    background: rgba(255, 255, 255, .82);
}

.home-v2-talent-points strong {
    color: #14343c;
    font-size: 13px;
}

.home-v2-talent-points span {
    overflow: hidden;
    color: #667c82;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-jobs-board {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
}

.home-v2-jobs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 82px;
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
    background: #fbfdfd;
}

.home-v2-jobs-head h3 {
    font-size: 22px;
}

.home-v2-jobs-head a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid rgba(31, 138, 138, .18);
    border-radius: 999px;
    padding: 0 12px;
    background: #ffffff;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.home-v2-talent-showcase .home-v2-job-list {
    display: grid;
}

.home-v2-talent-showcase .home-v2-job-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 78px;
    align-items: center;
    min-height: 78px;
    gap: 13px;
    border-bottom: 1px solid var(--line);
    padding: 12px 18px;
    background: #ffffff;
}

.home-v2-talent-showcase .home-v2-job-card:hover {
    background: #f7fbfa;
}

.home-v2-talent-showcase .home-v2-job-index {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    background: #eef7f6;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.home-v2-talent-showcase .home-v2-job-card strong {
    display: block;
    overflow: hidden;
    color: #14343c;
    font-size: 15px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-talent-showcase .home-v2-job-card small {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #71858a;
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-talent-showcase .home-v2-job-card em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 999px;
    background: #fff0ed;
    color: var(--coral);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.home-v2-talent-service {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border-top: 1px dashed #d8e7e6;
    padding: 14px 18px 16px;
    background: #fbfdfd;
}

.home-v2-talent-service a {
    display: grid;
    gap: 4px;
    min-height: 66px;
    border: 1px solid #dcebea;
    border-radius: 8px;
    padding: 11px 12px;
    background: #ffffff;
}

.home-v2-talent-service strong {
    color: #14343c;
    font-size: 14px;
}

.home-v2-talent-service span {
    color: #71858a;
    font-size: 12px;
    line-height: 1.45;
}

.home-v2-quality-grid {
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: start;
}

.home-v2-quality h2 {
    max-width: 680px;
    margin: 0;
    color: #14343c;
    font-size: 34px;
    line-height: 1.22;
}

.home-v2-quality > .shell > div > p:not(.eyebrow) {
    max-width: 720px;
    color: var(--muted);
    font-size: 15px;
}

.home-v2-quality-steps {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.home-v2-quality-steps div {
    border-left: 4px solid var(--teal);
    padding: 4px 0 4px 16px;
}

.home-v2-quality-steps b {
    color: #17333a;
}

.home-v2-quality-steps p {
    margin: 6px 0 0;
    color: var(--muted);
}

.home-v2-contact-card {
    padding: 20px;
}

.home-v2-wechat {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.home-v2-wechat img {
    width: 128px;
    height: 128px;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: cover;
}

.home-v2-wechat h3 {
    margin: 0;
    color: #17333a;
    font-size: 22px;
}

.home-v2-wechat p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.home-v2-contact-lines {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.home-v2-contact-lines div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    background: #fbfdfd;
}

.home-v2-contact-lines span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.home-v2-contact-lines strong {
    overflow: hidden;
    color: #17333a;
    font-size: 14px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-faq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-v2-faq-grid article {
    padding: 20px;
}

.home-v2-faq-grid h3 {
    margin: 0;
    color: #17333a;
    font-size: 18px;
    line-height: 1.35;
}

.home-v2-faq-grid p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.cta-band {
    padding: 0 0 74px;
    background: #ffffff;
}

.cta-box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-radius: 34px;
    padding: 34px;
    background: linear-gradient(135deg, #299d99, #104f56);
    box-shadow: var(--shadow);
    color: #ffffff;
}

.cta-box::after {
    content: "";
    position: absolute;
    right: 2%;
    top: -35%;
    width: 360px;
    height: 260px;
    background: url("/assets/img/brand/qiwt-logo-site.png") center / contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: .11;
    pointer-events: none;
}

.cta-box h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-size: 31px;
    letter-spacing: 0;
}

.cta-box p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    line-height: 1.7;
}

.cta-box .actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cta-box .btn-ghost {
    border-color: rgba(49, 156, 152, .22);
    background: #ffffff;
    color: var(--teal);
}

.cta-box .btn-primary {
    background: #ffffff;
    color: var(--teal);
    box-shadow: none;
}

.home-v2-empty {
    margin: 0;
    padding: 18px 20px;
}

.home-v2-news-list a:hover strong,
.home-v2-read-list a:hover h4,
.home-v2-course-card:hover strong,
.home-v2-plan-list a:hover strong,
.home-v2-job-list a:hover strong {
    color: var(--teal);
}

@media (max-width: 1180px) {
    .home-v2-hero-grid {
        grid-template-columns: 1fr;
        padding-top: 58px;
    }

    .home-v2-visual {
        min-height: 390px;
    }

    .home-v2-matrix-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-v2-matrix-title {
        grid-column: 1 / -1;
        min-height: 86px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .home-v2-matrix-item:nth-child(4),
    .home-v2-matrix-item:nth-child(7) {
        border-right: 0;
    }

    .home-v2-course-layout,
    .home-v2-process-panel,
    .home-v2-quality-grid {
        grid-template-columns: 1fr;
    }

    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-v2-enrollment .home-v2-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .home-v2-hero {
        min-height: auto;
        background:
            linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(247, 251, 250, .92)),
            url("/assets/img/home-preview/banner01.jpg") center / cover no-repeat;
    }

    .home-v2-hero-grid {
        gap: 28px;
        padding: 48px 0 62px;
    }

    .home-v2-hero-copy h1,
    .home-v2-section-title h2,
    .home-v2-quality h2 {
        font-size: 32px;
    }

    .home-v2-proof,
    .home-v2-updates-grid,
    .home-v2-quickbar,
    .home-v2-enroll-layout,
    .home-v2-talent-grid,
    .home-v2-talent-showcase,
    .home-v2-faq-grid {
        grid-template-columns: 1fr;
    }

    .home-v2-section-title,
    .section-title,
    .home-v2-cta-box,
    .cta-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-title h2 {
        font-size: 30px;
    }

    .cta-box .actions {
        margin-top: 22px;
    }

    .home-v2-feature-news {
        grid-template-columns: 1fr;
    }

    .home-v2-feature-news img,
    .home-v2-feature-visual {
        height: 210px;
    }

    .home-v2-news-slider-dots {
        top: 248px;
    }

    .home-v2-section {
        padding: 52px 0;
    }

    .home-v2-updates {
        padding-bottom: 25px;
    }

    .section {
        padding: 64px 0;
    }

    .section#courses {
        padding-top: 17px;
        padding-bottom: 17px;
    }

    .home-v2-faq {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .home-v2-section#talent {
        padding-top: 25px;
    }

    .home-v2-course-intro .home-v2-subhead {
        align-items: flex-start;
        flex-direction: column;
        min-height: auto;
        padding: 14px 16px;
    }

    .home-v2-course-tabs {
        width: 100%;
    }

    .home-v2-course-tabs button {
        flex: 1;
    }

    .home-v2-matrix {
        padding-bottom: 34px;
    }
}

@media (max-width: 640px) {
    .home-v2-hero-copy h1 {
        font-size: 29px;
    }

    .home-v2-hero-copy p {
        font-size: 15px;
    }

    .home-v2-actions .btn,
    .home-v2-actions .primary-link {
        width: 100%;
        justify-content: center;
    }

    .home-v2-visual {
        min-height: 430px;
    }

    .home-v2-path-card {
        right: 0;
        left: 0;
        padding: 16px;
    }

    .home-v2-matrix-panel,
    .course-grid,
    .home-v2-course-grid,
    .home-v2-process-grid {
        grid-template-columns: 1fr;
    }

    .home-v2-enrollment .home-v2-process-grid {
        grid-template-columns: 1fr;
    }

    .home-v2-matrix-item {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .home-v2-news-list a,
    .home-v2-job-list a {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 16px;
    }

    .home-v2-news-list time,
    .home-v2-job-list a > span {
        justify-self: start;
    }

    .home-v2-talent-lead {
        min-height: auto;
        padding: 18px;
    }

    .home-v2-talent-lead h3 {
        font-size: 25px;
    }

    .home-v2-talent-points div,
    .home-v2-talent-showcase .home-v2-job-card,
    .home-v2-talent-service {
        grid-template-columns: 1fr;
    }

    .home-v2-jobs-head {
        align-items: flex-start;
        flex-direction: column;
        min-height: auto;
    }

    .home-v2-talent-showcase .home-v2-job-card em {
        justify-self: start;
        padding: 0 12px;
    }

    .home-enterprise-wechat-popover {
        right: auto;
        left: 0;
    }

    .home-enterprise-wechat-popover::before {
        right: auto;
        left: 18px;
    }

    .home-v2-wechat {
        grid-template-columns: 1fr;
    }

    .home-v2-contact-lines div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        min-height: 58px;
        gap: 2px;
        padding: 8px 12px;
    }

    .home-v2-contact-lines strong {
        text-align: left;
    }
}

@media (max-width: 1280px) {
    .site-header-v1 .nav-row {
        gap: 24px;
    }

    .site-header-v1 .logo {
        min-width: 236px;
        gap: 12px;
    }

    .site-header-v1 .logo-img {
        width: 154px;
        height: 56px;
    }

    .site-header-v1 .nav-v1 {
        gap: 12px;
        font-size: 14px;
    }

    .site-header-v1 .nav-actions {
        gap: 8px;
        padding-left: 58px;
    }

    .site-header-v1 .search-pill {
        transform: translate(-15px, -50%);
    }

    .site-header-v1 .nav-login,
    .site-header-v1 .nav-register {
        padding-inline: 12px;
    }

    .site-header-v1 .nav-user-greeting {
        max-width: 160px;
    }
}

@media (max-width: 1180px) {
    .site-header-v1 .nav-row {
        min-height: 76px;
        gap: 12px;
    }

    .site-header-v1 .logo {
        min-width: 0;
    }

    .site-header-v1 .logo-img {
        width: 150px;
        height: 52px;
    }

    .site-header-v1 .logo-sub {
        display: none;
    }

    .site-header-v1 .nav-v1 {
        display: none;
    }

    .site-header-v1 .nav-actions {
        position: static;
        gap: 8px;
        min-width: 0;
        min-height: 0;
        padding-left: 0;
    }

    .site-header-v1 .search-pill {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }

    .site-header-v1 .nav-login,
    .site-header-v1 .nav-register,
    .site-header-v1 .nav-user-greeting,
    .site-header-v1 .nav-user-center,
    .site-header-v1 .nav-logout,
    .site-header-v1 .nav-actions .btn {
        display: none;
    }

    .site-header-v1 .mobile-menu {
        display: block;
    }
}

@media (max-width: 460px) {
    .site-header-v1 .logo-img {
        width: 132px;
        height: 46px;
    }

    .site-header-v1 .search-pill,
    .site-header-v1 .mobile-menu summary {
        width: 42px;
        height: 42px;
    }

    .site-header-v1 .mobile-menu-panel {
        right: -2px;
        width: min(300px, calc(100vw - 24px));
    }
}

.home-v1-banner {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 550px;
    padding: 67px 0 59px;
    background:
        radial-gradient(circle at 76% 28%, rgba(0, 121, 111, .18), transparent 28%),
        linear-gradient(105deg, #edf7f3 0%, #f7fbf9 49%, #e5f2ef 100%);
    color: var(--ink);
}

.home-v1-banner > .shell {
    width: min(1200px, calc(100% - 48px));
}

.home-v1-banner .home-v1-slider {
    position: relative;
    z-index: 1;
}

.home-v1-banner .home-v1-slider {
    overflow: hidden;
    padding-bottom: 38px;
    margin-bottom: -38px;
}

.home-v1-banner .home-v1-track {
    display: flex;
    transition: transform .58s ease;
    will-change: transform;
}

.home-v1-banner .home-v1-slide {
    flex: 0 0 100%;
    min-width: 100%;
    opacity: .18;
    transition: opacity .36s ease;
}

.home-v1-banner .home-v1-slide.is-active {
    opacity: 1;
}

.home-v1-banner .home-v1-slide > .shell {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.home-v1-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(247, 251, 249, .92) 0%, rgba(247, 251, 249, .78) 43%, rgba(247, 251, 249, .08) 80%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .32) 0 1px, transparent 1px 54px);
    pointer-events: none;
}

.home-v1-banner::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 0;
    height: 156px;
    background:
        linear-gradient(
            180deg,
            rgba(237, 247, 243, 0) 0%,
            rgba(246, 251, 249, .68) 48%,
            rgba(255, 255, 255, .98) 100%
        );
    pointer-events: none;
}

.home-v1-banner .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 34px;
}

.home-v1-banner .hero-grid-alt {
    grid-template-columns: .86fr 1.14fr;
    gap: 54px;
}

.home-v1-banner .home-v1-alt-copy {
    padding-bottom: 26px;
}

.home-v1-banner .home-v1-alt-copy .eyebrow {
    transform: none;
}

.home-v1-banner .home-v1-alt-copy h1 {
    transform: none;
}

.home-v1-banner .home-v1-alt-copy .hero-lead {
    max-width: 440px;
    margin: 20px 0 24px;
    font-size: 17px;
    line-height: 1.75;
}

.home-v1-banner .eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    padding: 0;
    color: #005f68;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: none;
    transform: translateY(10px);
}

.home-v1-banner .eyebrow::before {
    display: none;
}

.home-v1-banner h1 {
    margin: 0 0 15px;
    color: #09282c;
    font-size: clamp(34px, 4.25vw, 52px);
    line-height: 1.08;
    letter-spacing: 0;
    transform: translateY(-5px);
}

.home-v1-banner .hero-lead {
    max-width: 610px;
    margin: 40px 0 22px;
    color: #3f565d;
    font-size: 16px;
    line-height: 1.92;
}

.home-v1-banner .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.home-v1-banner .hero-actions .btn {
    min-height: auto;
    border-radius: 999px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 800;
}

.home-v1-banner .btn-primary {
    background: linear-gradient(135deg, #00796f, #005f68);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 121, 111, .25);
}

.home-v1-banner .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(0, 121, 111, .28);
}

.home-v1-banner .btn-ghost {
    border-color: rgba(0, 121, 111, .18);
    background: #ffffff;
    color: #005f68;
}

.home-v1-banner .btn-ghost:hover {
    background: #e8f3ef;
}

.home-v1-banner .hero-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 650px;
    gap: 10px;
}

.home-v1-banner .proof-card {
    border: 1px solid rgba(220, 232, 229, .9);
    border-radius: 16px;
    padding: 12px 13px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 8px 26px rgba(11, 55, 57, .06);
}

.home-v1-banner .proof-card strong {
    display: block;
    color: #0c4548;
    font-size: 19px;
    letter-spacing: 0;
    line-height: 1.16;
}

.home-v1-banner .proof-card span {
    display: block;
    margin-top: 3px;
    color: #6b7d82;
    font-size: 11.5px;
    line-height: 1.35;
}

.home-v1-banner .visual-wrap {
    position: relative;
    min-height: 386px;
}

.home-v1-banner .weld-visual {
    position: absolute;
    inset: 0 0 18px 10px;
    overflow: hidden;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(247, 251, 249, 0) 56%, rgba(226, 239, 235, .42) 80%, rgba(247, 251, 249, .78) 100%),
        radial-gradient(circle at 66% 40%, rgba(23, 218, 232, .85) 0 3%, rgba(23, 218, 232, .24) 3% 10%, transparent 18%),
        radial-gradient(circle at 74% 46%, rgba(231, 117, 50, .95) 0 1.5%, rgba(231, 117, 50, .22) 1.5% 10%, transparent 17%),
        linear-gradient(145deg, #d7e6e1 0%, #eef6f3 38%, #0c3137 100%);
    box-shadow:
        inset 0 -58px 78px rgba(237, 246, 243, .34),
        0 24px 70px rgba(12, 48, 50, .13);
}

.home-v1-banner .weld-visual-alt {
    background:
        radial-gradient(circle at 70% 38%, rgba(0, 121, 111, .78) 0 3%, rgba(0, 121, 111, .2) 3% 11%, transparent 18%),
        radial-gradient(circle at 58% 52%, rgba(199, 153, 78, .9) 0 1.6%, rgba(199, 153, 78, .22) 1.6% 10%, transparent 18%),
        linear-gradient(145deg, #eaf3ef 0%, #d7e6e1 42%, #10363c 100%);
}

.home-v1-banner .home-v1-portal-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(218px, .78fr) 1.22fr;
    align-items: stretch;
    min-height: 344px;
    gap: 18px;
    overflow: hidden;
    border: 1px solid rgba(0, 121, 111, .16);
    border-radius: 28px;
    padding: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(238, 248, 244, .82)),
        radial-gradient(circle at 84% 18%, rgba(42, 154, 150, .2), transparent 34%);
    box-shadow: 0 26px 70px rgba(12, 48, 50, .12);
}

.home-v1-banner .home-v1-portal-stage::before {
    content: "";
    position: absolute;
    right: -72px;
    bottom: -88px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(42, 154, 150, .18);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 154, 150, .12), transparent 66%);
    pointer-events: none;
}

.home-v1-banner .home-v1-portal-stage::after {
    content: "";
    position: absolute;
    top: 34px;
    right: 32px;
    left: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(42, 154, 150, .25), transparent);
    pointer-events: none;
}

.home-v1-banner .home-v1-portal-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    border: 1px solid rgba(0, 121, 111, .18);
    border-radius: 22px;
    padding: 22px;
    background:
        linear-gradient(160deg, rgba(0, 95, 104, .96), rgba(42, 154, 150, .86)),
        radial-gradient(circle at 26% 18%, rgba(255, 255, 255, .28), transparent 30%);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 95, 104, .18);
}

.home-v1-banner .home-v1-portal-main::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 22px;
    width: 42px;
    height: 6px;
    border-radius: 999px;
    background: #f28f20;
}

.home-v1-banner .home-v1-portal-main span,
.home-v1-banner .home-v1-portal-tile em {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .04em;
}

.home-v1-banner .home-v1-portal-main strong {
    display: block;
    margin-top: 0;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.2;
}

.home-v1-banner .home-v1-portal-main p {
    margin: 12px 0 22px;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.7;
}

.home-v1-banner .home-v1-portal-main a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 36px;
    border-radius: 999px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .94);
    color: #005f68;
    font-size: 13px;
    font-weight: 900;
}

.home-v1-banner .home-v1-portal-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.home-v1-banner .home-v1-portal-tile {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 144px;
    border: 1px solid rgba(220, 232, 229, .9);
    border-radius: 20px;
    padding: 18px 18px 17px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 32px rgba(12, 48, 50, .06);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.home-v1-banner .home-v1-portal-tile::before {
    content: ">";
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #edf7f3;
    color: #2a9a96;
    font-size: 16px;
    font-weight: 900;
}

.home-v1-banner .home-v1-portal-tile:hover {
    border-color: rgba(0, 121, 111, .28);
    box-shadow: 0 18px 42px rgba(12, 48, 50, .12);
    transform: translateY(-2px);
}

.home-v1-banner .home-v1-portal-tile em {
    position: absolute;
    top: 18px;
    left: 18px;
    color: #f28f20;
    font-size: 13px;
}

.home-v1-banner .home-v1-portal-tile strong {
    display: block;
    margin-top: 34px;
    color: #15373e;
    font-size: 20px;
    line-height: 1.25;
}

.home-v1-banner .home-v1-portal-tile span {
    display: block;
    margin-top: 7px;
    color: #63787d;
    font-size: 13px;
    line-height: 1.55;
}

.home-v1-banner .weld-visual::before {
    content: "";
    position: absolute;
    right: -42px;
    top: -24px;
    width: 300px;
    height: 480px;
    border-radius: 220px;
    background: linear-gradient(140deg, rgba(3, 26, 33, .92), rgba(39, 65, 65, .6), transparent 75%);
    filter: blur(.2px);
    mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 100%);
    opacity: .88;
    transform: rotate(18deg);
}

.home-v1-banner .weld-visual::after {
    content: "";
    position: absolute;
    right: 82px;
    top: 92px;
    width: 220px;
    height: 220px;
    background: conic-gradient(from 210deg, rgba(29, 220, 235, 0), rgba(29, 220, 235, .95), rgba(255, 255, 255, .86), rgba(231, 117, 50, .8), rgba(29, 220, 235, 0));
    clip-path: polygon(0 54%, 100% 36%, 100% 63%, 0 67%);
    filter: blur(.3px);
    opacity: .92;
}

.home-v1-banner .metal-block {
    position: absolute;
    right: 78px;
    top: 190px;
    width: 126px;
    height: 66px;
    border-radius: 10px;
    background: linear-gradient(145deg, #63767c, #12292f);
    box-shadow: 0 28px 45px rgba(6, 24, 27, .33);
    transform: skewX(-13deg) rotate(-2deg);
}

.home-v1-banner .torch {
    position: absolute;
    right: 92px;
    top: 34px;
    width: 110px;
    height: 206px;
    border-radius: 38px 38px 22px 22px;
    background: linear-gradient(100deg, #2d4146, #8ea2a2 45%, #202e34);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    transform: rotate(22deg);
}

.home-v1-banner .torch::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: -34px;
    width: 48px;
    height: 54px;
    background: linear-gradient(90deg, #101d24, #cfd9d7, #14272e);
    clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}

.home-v1-banner .inspection-card {
    position: absolute;
    bottom: 0;
    left: -4px;
    width: min(368px, 88%);
    border: 1px solid rgba(220, 232, 229, .95);
    border-radius: 24px;
    padding: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(12, 48, 50, .13);
}

.home-v1-banner .card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.home-v1-banner .card-head h3 {
    margin: 0;
    color: #10222a;
    font-size: 18px;
    letter-spacing: 0;
}

.home-v1-banner .badge {
    border-radius: 999px;
    padding: 7px 9px;
    background: #e8f3ef;
    color: #005f68;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.home-v1-banner .path {
    display: grid;
    gap: 8px;
}

.home-v1-banner .path-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(220, 232, 229, .8);
    border-radius: 14px;
    padding: 9px;
    background: #f7fbfa;
}

.home-v1-banner .path-no {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(0, 121, 111, .16);
    border-radius: 50%;
    background: #ffffff;
    color: #005f68;
    font-size: 12px;
    font-weight: 900;
}

.home-v1-banner .path-row strong {
    display: block;
    overflow: hidden;
    color: #10222a;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v1-banner .path-row span {
    display: block;
    overflow: hidden;
    color: #6b7d82;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v1-banner .path-row em {
    color: #c7994e;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.home-v1-banner-btn {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(0, 121, 111, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    color: #005f68;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.94);
    transition: background .2s ease, color .2s ease, opacity .2s ease, transform .2s ease;
}

.home-v1-banner .home-v1-slider:hover .home-v1-banner-btn,
.home-v1-banner .home-v1-slider:focus-within .home-v1-banner-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
}

.home-v1-banner-btn:hover {
    background: #005f68;
    color: #fff;
    transform: translateY(-50%) scale(1.04);
}

.home-v1-banner-btn.prev {
    left: max(18px, calc((100vw - 1260px) / 2));
}

.home-v1-banner-btn.next {
    right: max(18px, calc((100vw - 1260px) / 2));
}

.home-v1-banner-dots {
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: 0;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.home-v1-banner-dots button {
    width: 26px;
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 95, 104, .24);
    cursor: pointer;
    padding: 0;
}

.home-v1-banner-dots button.is-active {
    background: #005f68;
}

@media (max-width: 1080px) {
    .home-v1-banner {
        padding-top: 46px;
    }

    .home-v1-banner .hero-grid {
        grid-template-columns: 1fr;
    }

    .home-v1-banner .hero-grid-alt {
        gap: 28px;
    }

    .home-v1-banner .visual-wrap {
        min-height: 420px;
    }

    .home-v1-banner .home-v1-portal-stage {
        min-height: 330px;
        padding: 18px;
    }
}

@media (max-width: 680px) {
    .home-v1-banner > .shell {
        width: min(100% - 28px, 1200px);
    }

    .home-v1-banner .home-v1-slide > .shell {
        width: min(100% - 28px, 1200px);
    }

    .home-v1-banner {
        min-height: auto;
        padding: 65px 0 55px;
    }

    .home-v1-banner .hero-lead {
        font-size: 16px;
    }

    .home-v1-banner .hero-proof {
        grid-template-columns: 1fr 1fr;
    }

    .home-v1-banner .home-v1-portal-grid {
        grid-template-columns: 1fr;
    }

    .home-v1-banner .visual-wrap {
        min-height: 420px;
    }

    .home-v1-banner .home-v1-portal-stage {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 18px;
    }

    .home-v1-banner .home-v1-portal-stage::before {
        right: -90px;
        bottom: -100px;
        left: auto;
        top: auto;
    }

    .home-v1-banner .home-v1-portal-main {
        min-height: 220px;
    }

    .home-v1-banner .home-v1-portal-tile {
        min-height: 118px;
    }

    .home-v1-banner .inspection-card {
        left: 8px;
        width: calc(100% - 16px);
        padding: 18px;
    }

    .home-v1-banner .weld-visual {
        inset: 0 0 70px 0;
        border-radius: 30px;
    }

    .home-v1-banner .hero-actions .btn {
        width: 100%;
    }

    .home-v1-banner-btn {
        display: none;
    }

    .home-v1-banner-dots {
        bottom: 0;
    }
}

/* Frontend talent and recruitment pages */
.talent-hero,
.talent-detail-hero {
    border-bottom: 1px solid #d6e6e7;
    background: #edf6f4;
}

.talent-hero {
    padding: 42px 0 38px;
}

.talent-detail-hero {
    padding: 34px 0 38px;
}

.talent-hero-inner,
.job-detail-title,
.resume-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.talent-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    color: #698087;
    font-size: 13px;
}

.talent-breadcrumb a {
    color: #1d7f7e;
}

.talent-hero h1,
.job-detail-title h1,
.resume-profile h1 {
    margin: 0;
    color: #183941;
    font-size: 34px;
    line-height: 1.22;
}

.talent-hero p,
.job-detail-title p,
.resume-profile p {
    max-width: 720px;
    margin: 12px 0 0;
    color: #546a70;
    font-size: 16px;
}

.talent-hero-link,
.job-card-side a,
.resume-detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    border: 1px solid #1f8a8a;
    border-radius: 6px;
    background: #1f8a8a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.talent-content {
    padding: 34px 0 58px;
    background: #f7faf9;
}

.talent-filter-panel,
.talent-section,
.talent-side-panel,
.job-card,
.resume-card {
    border: 1px solid #dce8e9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(22, 61, 70, .06);
}

.talent-filter-panel {
    padding: 10px 18px;
}

.talent-filter-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed #dbe8e9;
}

.talent-filter-row:last-child {
    border-bottom: 0;
}

.talent-filter-row strong {
    color: #203b42;
    font-size: 15px;
    line-height: 30px;
}

.talent-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.talent-filter-options a,
.talent-filter-muted {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 5px;
    color: #536d73;
    font-size: 14px;
}

.talent-filter-options a:hover,
.talent-filter-options a.active {
    background: #1f8a8a;
    color: #fff;
}

.talent-filter-muted {
    background: #f1f5f4;
    color: #8b9ba0;
}

.talent-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #cfdfe1;
}

.talent-list-head h2 {
    margin: 0;
    color: #183941;
    font-size: 22px;
}

.talent-list-head p {
    margin: 5px 0 0;
    color: #7b8d92;
    font-size: 13px;
}

.talent-list-head span {
    color: #1f8a8a;
    font-size: 14px;
    font-weight: 800;
}

.job-list,
.resume-list {
    display: grid;
    gap: 14px;
}

.job-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 18px;
    padding: 20px;
}

.job-card-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.job-card-title h3,
.resume-card-top h3 {
    margin: 0;
    color: #1b363e;
    font-size: 20px;
    line-height: 1.35;
}

.job-card-title span {
    color: #c65045;
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}

.job-card-main p,
.resume-card-body p {
    margin: 8px 0 12px;
    color: #5f7379;
    font-size: 14px;
}

.job-tags,
.resume-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.job-tags span,
.resume-profile-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    background: #f1f6f5;
    color: #40656b;
    font-size: 13px;
}

.job-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 0;
}

.job-meta-grid div,
.job-detail-meta div,
.resume-info-grid div,
.resume-contact-grid div,
.job-contact-grid div {
    min-width: 0;
}

.job-meta-grid dt,
.job-detail-meta dt,
.resume-info-grid dt {
    color: #7a8d92;
    font-size: 12px;
}

.job-meta-grid dd,
.job-detail-meta dd,
.resume-info-grid dd {
    margin: 3px 0 0;
    color: #244249;
    font-size: 14px;
    font-weight: 700;
}

.job-card-side {
    display: grid;
    align-content: space-between;
    justify-items: end;
    gap: 18px;
    border-left: 1px solid #e5eeee;
    padding-left: 18px;
}

.job-card-side time {
    color: #81959a;
    font-size: 13px;
}

.resume-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 104px;
    align-items: center;
    gap: 18px;
    padding: 18px;
}

.resume-avatar,
.resume-profile-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d7e6e7;
    background: #eaf4f2;
    color: #1f8a8a;
    font-weight: 900;
}

.resume-avatar {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    font-size: 28px;
}

.resume-avatar img,
.resume-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.resume-card-top time {
    color: #87979b;
    font-size: 13px;
    white-space: nowrap;
}

.resume-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.resume-card dt {
    color: #829398;
    font-size: 12px;
}

.resume-card dd {
    margin: 2px 0 0;
    color: #28454c;
    font-size: 14px;
    font-weight: 700;
}

.resume-detail-link {
    min-height: 34px;
    padding: 0 14px;
}

.talent-empty {
    padding: 32px;
    border: 1px dashed #cbdfe1;
    border-radius: 8px;
    background: #fff;
    color: #7b8f94;
    text-align: center;
}

.talent-pagination {
    margin-top: 22px;
}

.talent-pagination-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #d8e8e9;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(22, 61, 70, .04);
}

.talent-pagination-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #60757b;
    font-size: 13px;
    white-space: nowrap;
}

.talent-pagination-summary span {
    color: #1f8a8a;
    font-weight: 800;
}

.talent-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.talent-page-link,
.talent-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border: 1px solid #dce9e8;
    border-radius: 5px;
    padding: 0 10px;
    background: #fff;
    color: #39575d;
    font-size: 13px;
    font-weight: 700;
}

.talent-page-link:hover,
.talent-page-link.is-current {
    border-color: #1f8a8a;
    background: #1f8a8a;
    color: #fff;
}

.talent-page-link.is-disabled,
.talent-page-ellipsis {
    background: #f3f7f6;
    color: #9aa9ad;
    cursor: default;
}

.talent-archive-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(214, 224, 224, .95);
    background:
        linear-gradient(118deg, rgba(246, 242, 234, .95) 0%, rgba(235, 242, 238, .95) 54%, rgba(231, 239, 237, .95) 100%);
}

.talent-archive-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(246, 242, 234, .98), rgba(246, 242, 234, .62) 50%, rgba(246, 242, 234, .2)),
        url("/assets/img/home-preview/banner02.jpg") right center / auto 112% no-repeat;
    opacity: .22;
    pointer-events: none;
}

.talent-archive-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, #14383d, #d9822b);
}

.talent-archive-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 358px;
    gap: 52px;
    align-items: center;
    min-height: 340px;
    padding: 48px 0;
}

.talent-archive-copy > span,
.talent-archive-list-head span,
.talent-archive-filter-head span {
    color: #b76b2b;
    font-size: 14px;
    font-weight: 600;
}

.talent-archive-copy h1 {
    margin: 10px 0 0;
    color: #132f34;
    font-size: 50px;
    line-height: 1.14;
}

.talent-archive-copy > p:not(.talent-breadcrumb) {
    max-width: 700px;
    margin: 18px 0 0;
    color: #52666a;
    font-size: 17px;
    line-height: 1.9;
}

.talent-archive-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.talent-archive-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 6px;
    background: #14383d;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.talent-archive-actions a + a {
    border: 1px solid rgba(20, 56, 61, .22);
    background: rgba(255, 255, 255, .66);
    color: #14383d;
}

.talent-archive-board {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(214, 224, 224, .95);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 20px 46px rgba(33, 55, 59, .1);
}

.talent-archive-board div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
    padding: 20px 22px;
    border-top: 1px solid rgba(220, 229, 229, .95);
}

.talent-archive-board div:first-child {
    border-top: 0;
}

.talent-archive-board strong {
    color: #14383d;
    font-size: 40px;
    line-height: 1;
}

.talent-archive-board span {
    color: #65787c;
    font-size: 14px;
    font-weight: 900;
}

.talent-archive-content {
    padding: 30px 0 64px;
    background:
        linear-gradient(180deg, #f4f1eb 0%, #f7f4ee 46%, #f8faf8 100%);
}

.talent-archive-filter {
    overflow: hidden;
    border: 1px solid rgba(212, 222, 222, .95);
    border-radius: 8px;
    background: #fdfbf7;
    box-shadow: 0 14px 34px rgba(38, 55, 58, .06);
}

.talent-archive-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(221, 229, 229, .95);
    background: #fffdf8;
}

.talent-archive-filter-head strong {
    display: block;
    margin-top: 3px;
    color: #14383d;
    font-size: 22px;
}

.talent-archive-filter-head a {
    color: #8a5a32;
    font-size: 13px;
    font-weight: 900;
}

.talent-archive-filter-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 15px 22px;
    border-top: 1px dashed rgba(214, 224, 224, .9);
}

.talent-archive-filter-row:first-of-type {
    border-top: 0;
}

.talent-archive-filter-row strong {
    color: #233f43;
    font-size: 14px;
    line-height: 32px;
}

.talent-archive-filter-row div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.talent-archive-filter-row a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #53686c;
    font-size: 13px;
    font-weight: 800;
}

.talent-archive-filter-row a:hover,
.talent-archive-filter-row a.is-active {
    border-color: rgba(217, 130, 43, .28);
    background: #fff4e8;
    color: #a75c1b;
}

.talent-archive-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 24px 0 16px;
}

.talent-archive-list-head h2 {
    margin: 4px 0 0;
    color: #14383d;
    font-size: 30px;
    line-height: 1.24;
}

.talent-archive-list-head p {
    margin: 0;
    color: #8a5a32;
    font-size: 14px;
    font-weight: 900;
}

.talent-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.talent-archive-card {
    position: relative;
    overflow: hidden;
    min-height: 292px;
    display: grid;
    align-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 8px;
    background: #17383d;
    color: #fff;
    box-shadow: 0 20px 42px rgba(30, 50, 54, .16);
}

.talent-archive-card:nth-child(3n + 2) {
    background: #2d3c36;
}

.talent-archive-card:nth-child(3n) {
    background: #3a352c;
}

.talent-archive-card::before {
    content: "";
    position: absolute;
    inset: auto -42px -62px auto;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(217, 130, 43, .2);
}

.talent-archive-card::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 82px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.talent-archive-card-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.talent-archive-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 72px;
    height: 72px;
    border: 2px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #f5c281;
    font-size: 27px;
    font-weight: 900;
}

.talent-archive-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.talent-archive-card time {
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    font-weight: 800;
}

.talent-archive-card h3 {
    margin: 6px 0 0;
    font-size: 24px;
    line-height: 1.25;
}

.talent-archive-card h3 a {
    color: #fff;
}

.talent-archive-card-top p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
}

.talent-archive-role {
    position: relative;
    z-index: 1;
    min-height: 58px;
    margin-top: 8px;
    color: #fff8ed;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.35;
}

.talent-archive-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.talent-archive-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .86);
    font-size: 12px;
    font-weight: 800;
}

.talent-archive-card-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    background: #d9822b;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.talent-archive-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 52px rgba(30, 50, 54, .2);
}

.talent-archive-detail-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(214, 224, 224, .95);
    background:
        linear-gradient(118deg, #203d40 0%, #17383d 52%, #3a352c 100%);
    color: #fff;
}

.talent-archive-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(23, 56, 61, .96), rgba(23, 56, 61, .78) 54%, rgba(23, 56, 61, .28)),
        url("/assets/img/home-preview/banner02.jpg") right center / auto 110% no-repeat;
    opacity: .28;
    pointer-events: none;
}

.talent-archive-detail-hero .shell {
    position: relative;
    z-index: 1;
}

.talent-archive-detail-hero .talent-breadcrumb,
.talent-archive-detail-hero .talent-breadcrumb a {
    color: rgba(255, 255, 255, .78);
}

.talent-archive-detail-hero .resume-profile-v2 {
    align-items: stretch;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(6px);
}

.talent-archive-detail-hero .resume-profile-avatar {
    width: 112px;
    height: 112px;
    border: 2px solid rgba(255, 255, 255, .36);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #f5c281;
    font-size: 42px;
}

.talent-archive-detail-hero .talent-pill {
    background: #d9822b;
    color: #fff;
}

.talent-archive-detail-hero .resume-status-text {
    color: rgba(255, 255, 255, .78);
}

.talent-archive-detail-hero .resume-profile h1 {
    color: #fff;
    font-size: 42px;
}

.talent-archive-detail-hero .resume-profile p {
    color: rgba(255, 255, 255, .76);
}

.talent-archive-detail-hero .resume-profile-tags span {
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .88);
}

.talent-archive-detail-hero .resume-profile-summary {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
}

.talent-archive-detail-hero .resume-profile-summary span {
    color: rgba(255, 255, 255, .6);
}

.talent-archive-detail-hero .resume-profile-summary strong {
    color: #fff;
}

.talent-archive-detail-content {
    background:
        linear-gradient(180deg, #f4f1eb 0%, #f7f4ee 42%, #f8faf8 100%);
}

.talent-archive-detail-layout .resume-v2-section,
.talent-archive-detail-layout .talent-side-panel {
    border-color: rgba(212, 222, 222, .95);
    background: #fffdf8;
    box-shadow: 0 14px 34px rgba(38, 55, 58, .055);
}

.talent-archive-detail-layout .resume-intent-section {
    background: #17383d;
    color: #fff;
}

.talent-archive-detail-layout .resume-intent-section .resume-v2-title {
    border-color: rgba(255, 255, 255, .16);
}

.talent-archive-detail-layout .resume-intent-section h2,
.talent-archive-detail-layout .resume-intent-section .resume-v2-title span,
.talent-archive-detail-layout .resume-intent-section dt,
.talent-archive-detail-layout .resume-intent-section dd {
    color: #fff;
}

.talent-archive-detail-layout .resume-intent-section dt {
    color: rgba(255, 255, 255, .6);
}

.talent-archive-detail-layout .resume-v2-title {
    border-bottom-style: solid;
    border-color: rgba(222, 229, 229, .95);
}

.talent-archive-detail-layout .resume-v2-title h2,
.talent-archive-detail-layout .talent-side-panel h2 {
    color: #14383d;
}

.talent-archive-detail-layout .resume-v2-title span {
    color: #b76b2b;
    font-weight: 600;
}

.talent-archive-detail-layout .resume-timeline article,
.talent-archive-detail-layout .resume-cert-list div {
    border-color: rgba(226, 232, 232, .95);
    background: #fffaf1;
}

.talent-archive-detail-layout .resume-sidebar-profile {
    overflow: hidden;
    background: #17383d;
    color: #fff;
}

.talent-archive-detail-layout .resume-sidebar-profile h2,
.talent-archive-detail-layout .resume-sidebar-profile p {
    color: #fff;
}

.talent-archive-detail-layout .resume-sidebar-primary {
    background: #d9822b;
}

.talent-archive-detail-layout .resume-sidebar-secondary {
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

.talent-archive-detail-layout .resume-side-nav a {
    border-radius: 6px;
}

.talent-archive-detail-layout .resume-side-nav a:hover {
    background: #fff4e8;
    color: #a75c1b;
}

@media (max-width: 980px) {
    .talent-archive-hero-inner,
    .talent-archive-detail-layout {
        grid-template-columns: 1fr;
    }

    .talent-archive-board {
        max-width: 520px;
    }

    .talent-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .talent-archive-filter-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .talent-archive-detail-hero .resume-profile-v2 {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .talent-archive-detail-hero .resume-profile-summary {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .talent-archive-hero-inner {
        min-height: 0;
        padding: 32px 0;
    }

    .talent-archive-copy h1 {
        font-size: 34px;
    }

    .talent-archive-copy > p:not(.talent-breadcrumb) {
        font-size: 15px;
        line-height: 1.78;
    }

    .talent-archive-board div {
        grid-template-columns: 86px minmax(0, 1fr);
        padding: 16px;
    }

    .talent-archive-board strong {
        font-size: 30px;
    }

    .talent-archive-filter-head,
    .talent-archive-list-head,
    .talent-archive-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .talent-archive-grid {
        grid-template-columns: 1fr;
    }

    .talent-archive-card {
        min-height: 0;
    }

    .talent-archive-detail-hero .resume-profile-v2 {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .talent-archive-detail-hero .resume-profile-avatar {
        width: 92px;
        height: 92px;
    }

    .talent-archive-detail-hero .resume-profile h1 {
        font-size: 32px;
    }
}

.talent-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 22px;
}

.talent-detail-main {
    display: grid;
    gap: 16px;
}

.talent-section {
    padding: 20px;
}

.talent-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #d8e5e7;
}

.talent-section-title h2,
.talent-side-panel h2 {
    margin: 0;
    color: #193a42;
    font-size: 20px;
}

.talent-section-title span {
    color: #87979b;
    font-size: 13px;
}

.talent-rich-text {
    color: #374f56;
    font-size: 15px;
    line-height: 1.9;
}

.talent-rich-text p:first-child {
    margin-top: 0;
}

.talent-rich-text p:last-child {
    margin-bottom: 0;
}

.job-salary-box {
    min-width: 190px;
    padding: 18px 20px;
    border: 1px solid #d8e7e8;
    border-radius: 8px;
    background: #fff;
    text-align: right;
}

.job-salary-box strong {
    display: block;
    color: #c65045;
    font-size: 24px;
}

.job-salary-box span {
    color: #5e777d;
    font-size: 14px;
}

.talent-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 5px;
    background: #dff0ed;
    color: #1e7f7d;
    font-size: 13px;
    font-weight: 800;
}

.job-detail-meta,
.resume-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.job-detail-meta div,
.resume-info-grid div {
    padding: 12px;
    border-radius: 6px;
    background: #f5f8f7;
}

.job-publisher,
.job-contact-grid,
.resume-contact-grid {
    display: grid;
    gap: 12px;
}

.job-publisher {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.job-publisher strong,
.job-contact-grid strong,
.resume-contact-grid strong {
    color: #244249;
    font-size: 16px;
}

.job-publisher span,
.job-contact-grid span,
.resume-contact-grid span {
    color: #7b8f94;
    font-size: 13px;
}

.job-contact-grid,
.resume-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-contact-grid div,
.resume-contact-grid div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 6px;
    background: #f5f8f7;
}

.talent-sidebar {
    display: grid;
    gap: 14px;
}

.talent-side-panel {
    padding: 16px;
}

.talent-side-panel h2 {
    margin-bottom: 12px;
    font-size: 18px;
}

.talent-side-panel a {
    display: flex;
    align-items: center;
    min-height: 34px;
    border-bottom: 1px dashed #e0ecee;
    color: #36565d;
    font-size: 14px;
}

.talent-side-panel a:last-child {
    border-bottom: 0;
}

.talent-side-panel a:hover {
    color: #1f8a8a;
}

.talent-side-panel p {
    margin: 0;
    color: #65777c;
    font-size: 14px;
    line-height: 1.8;
}

.muted-panel {
    background: #f8fbfa;
}

.resume-profile {
    justify-content: flex-start;
}

.resume-profile-avatar {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    border-radius: 10px;
    font-size: 38px;
}

.resume-profile-main {
    min-width: 0;
}

.resume-profile-tags {
    margin-top: 12px;
}

.resume-timeline {
    display: grid;
    gap: 12px;
}

.resume-timeline article {
    padding: 14px;
    border-radius: 6px;
    background: #f5f8f7;
}

.resume-timeline article > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.resume-timeline strong {
    color: #243f46;
    font-size: 16px;
}

.resume-timeline span,
.resume-timeline small {
    color: #7b8f94;
    font-size: 13px;
}

.resume-timeline p {
    margin: 6px 0 0;
    color: #48636a;
}

.resume-cert-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.resume-cert-list div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 6px;
    background: #f5f8f7;
}

.resume-cert-list strong {
    color: #253f46;
}

.resume-cert-list span,
.resume-cert-list em {
    color: #75898e;
    font-size: 13px;
    font-style: normal;
}

.talent-muted-text {
    margin: 0;
    color: #83969b;
}

@media (max-width: 900px) {
    .talent-hero-inner,
    .job-detail-title,
    .resume-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .talent-detail-grid,
    .job-card,
    .resume-card,
    .member-resume-preview,
    .resume-preview-grid,
    .resume-basic-layout,
    .resume-grid-four,
    .resume-grid-three,
    .resume-grid-two,
    .resume-area-grid {
        grid-template-columns: 1fr;
    }

    .member-resume-guide,
    .member-resume-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .resume-avatar-editor {
        justify-items: start;
    }

    .resume-member-table,
    .resume-member-table thead,
    .resume-member-table tbody,
    .resume-member-table tr,
    .resume-member-table th,
    .resume-member-table td {
        display: block;
    }

    .resume-member-table thead {
        display: none;
    }

    .resume-member-table tr {
        padding: 12px;
        border-bottom: 1px solid var(--line);
    }

    .resume-member-table tr:last-child {
        border-bottom: 0;
    }

    .resume-member-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border-bottom: 0;
    }

    .resume-member-table td::before {
        flex: 0 0 78px;
        color: #71858b;
        font-size: 12px;
        font-weight: 800;
        content: attr(data-label);
    }

    .resume-member-table td:first-child {
        justify-content: flex-start;
    }

    .resume-member-table td:first-child::before {
        display: none;
    }

    .resume-table-actions {
        justify-content: flex-end;
    }

    .resume-preview-sidebar,
    .resume-preview-main {
        padding: 20px;
    }

    .job-card-side {
        align-content: start;
        justify-items: start;
        border-left: 0;
        border-top: 1px solid #e5eeee;
        padding: 14px 0 0;
    }

    .job-meta-grid,
    .job-detail-meta,
    .resume-info-grid,
    .job-contact-grid,
    .resume-contact-grid,
    .resume-cert-list,
    .resume-card dl {
        grid-template-columns: 1fr;
    }

    .resume-detail-link {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .talent-hero,
    .talent-detail-hero {
        padding: 28px 0;
    }

    .talent-hero h1,
    .job-detail-title h1,
    .resume-profile h1 {
        font-size: 28px;
    }

    .talent-filter-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .talent-list-head,
    .job-card-title,
    .resume-card-top,
    .resume-timeline article > div:first-child,
    .job-publisher {
        align-items: flex-start;
        flex-direction: column;
    }

    .talent-list-head {
        display: flex;
    }

    .job-salary-box {
        width: 100%;
        text-align: left;
    }
}

/* Resume pages: closer to the legacy talent-library visual language */
.resume-legacy-hero,
.resume-legacy-detail-hero {
    border-bottom: 1px solid #cfe8df;
    background:
        linear-gradient(90deg, rgba(246, 251, 248, .94) 0%, rgba(246, 251, 248, .82) 48%, rgba(226, 244, 237, .62) 100%),
        repeating-linear-gradient(120deg, rgba(0, 147, 141, .08) 0 1px, transparent 1px 44px);
}

.resume-filter-panel {
    border-color: #cff0e1;
    box-shadow: 0 12px 34px rgba(0, 147, 141, .06);
}

.resume-filter-panel .talent-filter-row {
    grid-template-columns: 72px minmax(0, 1fr);
}

.resume-filter-panel .talent-filter-row strong {
    position: relative;
    padding-left: 18px;
    color: #243f3e;
}

.resume-filter-panel .talent-filter-row strong::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00938d;
    box-shadow: 0 0 0 4px rgba(0, 147, 141, .1);
}

.resume-filter-panel .talent-filter-options a {
    border: 1px solid transparent;
    border-radius: 999px;
}

.resume-filter-panel .talent-filter-options a:hover,
.resume-filter-panel .talent-filter-options a.active {
    border-color: #00938d;
    background: #00938d;
}

.resume-list-head {
    margin-top: 26px;
}

.resume-legacy-grid {
    align-items: start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.resume-legacy-grid .resume-card {
    position: relative;
    display: flex;
    min-height: 262px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border-color: #cff0e1;
    border-radius: 8px;
    padding: 20px 15px 16px;
    background: linear-gradient(#fff, #f3fffa);
    box-shadow: none;
    text-align: center;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.resume-legacy-grid .resume-card:hover {
    border-color: #00938d;
    box-shadow: 0 18px 42px rgba(0, 147, 141, .12);
    transform: translateY(-3px);
}

.resume-legacy-grid .resume-avatar {
    position: relative;
    width: 76px;
    height: 76px;
    border: 2px solid #e7f7f0;
    border-radius: 50%;
    background: #f1fbf7;
    box-shadow: 0 10px 24px rgba(0, 147, 141, .08);
    font-size: 30px;
}

.resume-legacy-grid .resume-avatar::after,
.resume-profile-avatar::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 4px;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #00938d;
    box-shadow: 0 4px 10px rgba(0, 147, 141, .2);
}

.resume-legacy-grid .resume-card-body {
    display: grid;
    width: 100%;
    justify-items: center;
}

.resume-legacy-grid .resume-card-body h3 {
    margin: 13px 0 0;
    color: #333;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    transition: color .25s ease;
}

.resume-legacy-grid .resume-card:hover h3 {
    color: #00938d;
}

.resume-legacy-grid .resume-card-body p {
    display: -webkit-box;
    overflow: hidden;
    min-height: 38px;
    margin: 7px 0 0;
    color: #8a9a9b;
    font-size: 13px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.resume-legacy-grid .resume-card-body time {
    margin-top: 5px;
    color: #a2acad;
    font-size: 12px;
}

.resume-card-intent {
    display: grid;
    width: 100%;
    gap: 7px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid #dceee7;
    text-align: left;
}

.resume-card-intent span {
    position: relative;
    overflow: hidden;
    padding-left: 16px;
    color: #394d4f;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resume-card-intent span::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00938d;
}

.resume-legacy-grid .resume-detail-link {
    width: 100%;
    margin-top: auto;
    min-height: 32px;
    border-color: #00938d;
    border-radius: 999px;
    background: #fff;
    color: #00938d;
}

.resume-legacy-grid .resume-detail-link:hover {
    background: #00938d;
    color: #fff;
}

.resume-legacy-detail-hero {
    padding: 32px 0 28px;
}

.resume-legacy-detail-hero .resume-profile {
    position: relative;
    border: 1px solid #cff0e1;
    border-radius: 8px;
    padding: 22px 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 42px rgba(0, 147, 141, .08);
}

.resume-legacy-detail-hero .resume-profile-avatar {
    position: relative;
    width: 112px;
    height: 112px;
    border: 2px solid #e7f7f0;
    border-radius: 50%;
}

.resume-legacy-detail-hero .talent-pill {
    border: 1px solid rgba(0, 147, 141, .16);
    background: #e9f8f2;
    color: #00938d;
}

.resume-profile-time {
    margin-left: auto;
    text-align: right;
}

.resume-profile-time span {
    display: block;
    color: #89999a;
    font-size: 12px;
}

.resume-profile-time strong {
    display: block;
    margin-top: 5px;
    color: #253f42;
    font-size: 14px;
    white-space: nowrap;
}

.resume-legacy-detail-hero .resume-profile-tags span {
    border: 1px solid #cfece0;
    background: #f3fffa;
}

.resume-legacy-detail-hero + .talent-content .talent-section {
    border-color: #d9eee6;
    box-shadow: 0 12px 28px rgba(0, 147, 141, .05);
}

.resume-legacy-detail-hero + .talent-content .talent-section-title {
    align-items: center;
    border-bottom-color: #d8ede5;
}

.resume-legacy-detail-hero + .talent-content .talent-section-title h2 {
    position: relative;
    padding-left: 24px;
    font-size: 19px;
}

.resume-legacy-detail-hero + .talent-content .talent-section-title h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00938d;
    box-shadow: 0 0 0 5px rgba(0, 147, 141, .1);
    transform: translateY(-50%);
}

.resume-legacy-detail-hero + .talent-content .resume-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resume-contact-note {
    margin: -4px 0 14px;
    border-radius: 6px;
    padding: 10px 12px;
    background: #f3fffa;
    color: #00938d;
    font-size: 13px;
    font-weight: 700;
}

.resume-legacy-detail-hero + .talent-content .resume-timeline article,
.resume-legacy-detail-hero + .talent-content .resume-cert-list div,
.resume-legacy-detail-hero + .talent-content .resume-info-grid div,
.resume-legacy-detail-hero + .talent-content .resume-contact-grid div {
    border: 1px solid #e0f0e9;
    background: #fbfffd;
}

.resume-legacy-detail-hero + .talent-content .talent-side-panel {
    border-color: #d9eee6;
    box-shadow: 0 12px 28px rgba(0, 147, 141, .05);
}

.resume-legacy-detail-hero + .talent-content .talent-side-panel h2 {
    color: #173f41;
}

.resume-legacy-detail-hero + .talent-content .talent-side-panel a:hover {
    color: #00938d;
}

@media (max-width: 1080px) {
    .resume-legacy-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .resume-legacy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .talent-pagination-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .talent-pagination-summary,
    .talent-pagination-controls {
        justify-content: center;
    }

    .resume-profile-time {
        margin-left: 0;
        text-align: left;
    }
}

@media (max-width: 560px) {
    .resume-legacy-grid {
        grid-template-columns: 1fr;
    }

    .resume-filter-panel .talent-filter-row {
        grid-template-columns: 1fr;
    }

    .resume-legacy-detail-hero + .talent-content .resume-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Talent resume detail: polished public profile */
.resume-detail-v2-hero {
    padding: 30px 0 32px;
    background:
        linear-gradient(135deg, rgba(246, 252, 249, .98) 0%, rgba(235, 248, 243, .88) 54%, rgba(244, 250, 249, .96) 100%),
        repeating-linear-gradient(120deg, rgba(0, 147, 141, .055) 0 1px, transparent 1px 40px);
}

.resume-profile-v2 {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 300px;
    align-items: center;
    gap: 24px;
    border-color: #c7ece2;
    border-radius: 8px;
    padding: 28px 30px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 62%, rgba(242, 253, 249, .96) 100%);
    box-shadow: 0 20px 46px rgba(0, 112, 108, .1);
}

.resume-profile-v2::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #0f9a92, #f29b31);
}

.resume-profile-v2::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 6px;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 154, 146, .28), rgba(242, 155, 49, .22), transparent);
}

.resume-profile-left {
    display: grid;
    justify-items: center;
    position: relative;
    z-index: 1;
}

.resume-detail-v2-hero .resume-profile-avatar {
    width: 128px;
    height: 128px;
    border: 5px solid #f5fbf8;
    border-radius: 50%;
    background: #edf8f5;
    color: #0f8c87;
    box-shadow: 0 18px 34px rgba(0, 147, 141, .16);
}

.resume-profile-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 9px;
}

.resume-status-text {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border: 1px solid #f3d4bc;
    border-radius: 5px;
    padding: 0 10px;
    background: #fff8f1;
    color: #9f5528;
    font-size: 13px;
    font-weight: 800;
}

.resume-detail-v2-hero .resume-profile-main h1 {
    margin: 0;
    color: #12383c;
    font-size: 40px;
    letter-spacing: 0;
}

.resume-detail-v2-hero .resume-profile-main p {
    max-width: none;
    margin: 10px 0 0;
    color: #536d72;
    font-size: 15px;
    line-height: 1.7;
}

.resume-detail-v2-hero .resume-profile-tags {
    margin-top: 14px;
}

.resume-detail-v2-hero .resume-profile-tags span {
    min-height: 28px;
    border-color: #d2e8e3;
    border-radius: 5px;
    background: #f7fcfa;
    color: #26565a;
    font-weight: 800;
}

.resume-profile-summary {
    display: grid;
    gap: 10px;
    border-left: 0;
    padding-left: 0;
}

.resume-profile-summary div {
    min-width: 0;
    border: 1px solid #d8ece8;
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 18px rgba(21, 74, 76, .045);
}

.resume-profile-summary div:last-child {
    border-bottom: 1px solid #d8ece8;
    padding-bottom: 12px;
}

.resume-profile-summary span {
    display: block;
    color: #7e9195;
    font-size: 12px;
}

.resume-profile-summary strong {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #123d42;
    font-size: 16px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resume-detail-layout {
    grid-template-columns: minmax(0, 1fr) 302px;
    gap: 24px;
}

.resume-detail-layout .talent-sidebar {
    position: sticky;
    top: 88px;
}

.resume-detail-main {
    gap: 14px;
}

.resume-v2-section {
    position: relative;
    overflow: hidden;
    border-color: #d8ebe8;
    border-radius: 8px;
    padding: 19px 21px 21px;
    background: linear-gradient(180deg, #fff, #fcfffe);
    box-shadow: 0 12px 26px rgba(26, 73, 78, .05);
}

.resume-v2-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #0f9a92, rgba(15, 154, 146, .16), transparent);
}

.resume-v2-title {
    align-items: baseline;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0efed;
    padding-bottom: 11px;
}

.resume-v2-title h2 {
    padding-left: 18px !important;
    color: #123b40;
    font-size: 18px !important;
}

.resume-v2-title h2::before {
    top: 50% !important;
    width: 8px !important;
    height: 16px !important;
    border-radius: 999px !important;
    background: #0f9a92 !important;
    box-shadow: none !important;
}

.resume-v2-title span {
    color: #9aabad;
    font-size: 12px;
    letter-spacing: .02em;
}

.resume-key-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px;
    margin-bottom: 0;
}

.resume-key-grid div,
.resume-contact-grid div {
    border: 1px solid #e2efed !important;
    border-radius: 6px;
    padding: 14px 15px !important;
    background: #fbfffd !important;
}

.resume-key-grid div.is-strong {
    border-color: #c5e9df !important;
    background: linear-gradient(180deg, #f1fffa, #fbfffd) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 154, 146, .04);
}

.resume-key-grid dt {
    color: #809297;
    font-size: 12px;
}

.resume-key-grid dd {
    overflow: hidden;
    color: #1d4247;
    font-size: 15px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resume-key-grid .is-strong dd {
    color: #0d827d;
    font-size: 16px;
}

.resume-contact-note {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 0 0 12px;
    border: 1px solid #f5dfc8;
    border-radius: 6px;
    padding: 0 12px;
    background: #fff8f1;
    color: #a95b28;
    font-size: 13px;
}

.resume-contact-grid {
    gap: 10px;
}

.resume-contact-grid strong {
    overflow-wrap: anywhere;
}

.resume-timeline {
    gap: 10px;
}

.resume-timeline article {
    position: relative;
    border: 1px solid #e2efed !important;
    border-radius: 8px;
    padding: 15px 17px 15px 22px;
    background: #fbfffd !important;
    box-shadow: 0 8px 18px rgba(21, 74, 76, .035);
}

.resume-timeline article::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 999px;
    background: #0f9a92;
}

.resume-timeline article > div:first-child {
    align-items: baseline;
}

.resume-timeline strong {
    color: #173e43;
    font-size: 17px;
}

.resume-timeline span,
.resume-timeline small {
    color: #7b9094;
}

.resume-timeline p {
    margin-top: 8px;
    color: #405a60;
    line-height: 1.7;
}

.resume-timeline .talent-rich-text {
    margin-top: 8px;
    border-top: 1px dashed #e3efee;
    padding-top: 8px;
    color: #405a60;
    font-size: 14px;
    line-height: 1.8;
}

.resume-cert-list {
    gap: 10px;
}

.resume-cert-list div {
    border: 1px solid #e2efed !important;
    border-radius: 8px;
    background: #fbfffd !important;
    box-shadow: 0 8px 18px rgba(21, 74, 76, .035);
}

.resume-evaluation-section .talent-rich-text {
    border-left: 4px solid #0f9a92;
    border-radius: 6px;
    padding: 13px 15px;
    background: #f7fcfa;
    color: #345157;
}

.resume-sidebar-profile {
    display: grid;
    justify-items: center;
    border-color: #cce8e4;
    padding: 22px 18px;
    background: linear-gradient(180deg, #fff, #f7fffb);
    text-align: center;
}

.resume-sidebar-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 82px;
    height: 82px;
    border: 4px solid #f1fbf7;
    border-radius: 50%;
    background: #eef8f5;
    color: #0f8c87;
    font-size: 28px;
    font-weight: 900;
}

.resume-sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume-sidebar-profile h2 {
    margin: 13px 0 4px;
    color: #173e43;
    font-size: 18px;
}

.resume-sidebar-profile p {
    margin: 0 0 15px;
    color: #71868a;
    font-size: 13px;
}

.resume-sidebar-primary,
.resume-sidebar-secondary {
    display: inline-flex !important;
    justify-content: center;
    width: 100%;
    min-height: 34px !important;
    border: 1px solid #0f9a92 !important;
    border-radius: 6px;
    font-weight: 800;
}

.resume-sidebar-primary {
    background: linear-gradient(135deg, #0f9a92, #0c7f7b);
    color: #fff !important;
}

.resume-sidebar-secondary {
    margin-top: 8px;
    background: #fff;
    color: #0f837d !important;
}

.resume-sidebar-primary:hover,
.resume-sidebar-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(15, 154, 146, .12);
}

.resume-side-nav {
    max-height: 380px;
    overflow: auto;
}

.resume-side-nav a {
    justify-content: space-between;
}

.resume-side-nav a::after {
    content: ">";
    color: #aab8ba;
    font-size: 12px;
}

@media (max-width: 980px) {
    .resume-profile-v2,
    .resume-detail-layout {
        grid-template-columns: 1fr;
    }

    .resume-detail-layout .talent-sidebar {
        position: static;
    }

    .resume-profile-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-left: 0;
        border-top: 1px dashed #cfe5e4;
        padding-top: 16px;
        padding-left: 0;
    }

    .resume-profile-summary div {
        border-right: 1px dashed #e1eeee;
        border-bottom: 0;
        padding-right: 10px;
        padding-bottom: 0;
    }

    .resume-profile-summary div:last-child {
        border-right: 0;
    }

    .resume-key-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .resume-profile-v2 {
        padding: 20px;
    }

    .resume-detail-v2-hero .resume-profile-avatar {
        width: 104px;
        height: 104px;
    }

    .resume-detail-v2-hero .resume-profile-main h1 {
        font-size: 30px;
    }

    .resume-profile-summary,
    .resume-key-grid {
        grid-template-columns: 1fr !important;
    }

    .resume-profile-summary div {
        border-right: 0;
        border-bottom: 1px dashed #e1eeee;
        padding-right: 0;
        padding-bottom: 10px;
    }
}

/* Member center: unified visual rhythm for dashboard, applications, results and certificates */
.member-layout {
    align-items: start;
    gap: 24px;
    padding-top: 28px;
    padding-bottom: 58px;
}

.member-nav,
.member-panel {
    border-color: #d9e8e7;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(18, 57, 62, .055);
}

.member-nav {
    position: relative;
    top: auto;
    align-self: start;
    overflow: hidden;
    padding: 14px;
    background: #ffffff;
}

.member-nav::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #0f9a92, rgba(239, 144, 36, .78));
    pointer-events: none;
}

.member-nav > * {
    position: relative;
    z-index: 1;
}

.member-profile-card {
    position: relative;
    gap: 8px;
    overflow: hidden;
    margin: 4px 0 8px;
    border: 1px solid #e0eceb;
    border-radius: 8px;
    padding: 18px 14px 15px;
    background: linear-gradient(180deg, #fbfdfd 0%, #ffffff 100%);
    box-shadow: none;
}

.member-profile-card::after {
    display: none;
}

.member-profile-card > * {
    position: relative;
    z-index: 1;
}

.member-profile-card .member-profile-avatar {
    border: 3px solid #ffffff;
    box-shadow: 0 8px 20px rgba(17, 45, 54, .09);
}

.member-profile-name {
    color: #183b40;
    font-size: 18px;
    font-weight: 900;
}

.member-profile-account,
.member-profile-meta em {
    font-size: 12px;
}

.member-profile-account {
    color: #71878d;
}

.member-profile-meta .member-profile-group-only {
    border-color: #dcebea;
    background: #f6faf9;
}

.member-profile-meta .member-profile-group-only em {
    color: #526b72;
}

.member-nav-group {
    gap: 2px;
    margin-top: 0;
    border: 0;
    border-top: 1px solid #edf3f2;
    border-radius: 0;
    padding: 9px 0 10px;
    background: transparent;
    backdrop-filter: none;
}

.member-nav-group > span {
    padding: 3px 10px 4px;
    color: #7d9095;
    font-size: 12px;
    letter-spacing: 0;
}

.member-nav a {
    min-height: 35px;
    border-radius: 6px;
    padding: 7px 10px 7px 12px;
    color: #385158;
    font-size: 16px;
    font-weight: 800;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.member-nav a.active {
    background: #f0f8f7;
    color: #0f837d;
    box-shadow: inset 2px 0 0 #0f9a92;
}

.member-nav a:hover {
    background: #f7fbfa;
    transform: none;
}

.member-panel {
    overflow: hidden;
    padding: 22px;
    background: #ffffff;
}

.member-panel-dashboard {
    padding-top: 20px;
}

.member-panel input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.member-panel select:focus,
.member-panel textarea:focus {
    border-color: rgba(31, 138, 138, .62);
    background: #ffffff;
    color: #213f46;
    box-shadow: 0 0 0 3px rgba(31, 138, 138, .1);
    outline: none;
}

.member-panel .upload-button:focus-within {
    border-color: rgba(31, 138, 138, .62);
    background: #f2fbfa;
    color: #0f837d;
    box-shadow: 0 0 0 3px rgba(31, 138, 138, .1);
    outline: none;
}

.member-panel .btn-primary,
.member-panel .primary-link,
.member-panel button[type="submit"],
.member-panel .member-primary-action,
.member-panel .member-soft-button,
.member-panel .member-muted-action,
.member-panel .resume-action-btn {
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.member-panel .btn-primary:hover,
.member-panel .primary-link:hover,
.member-panel button[type="submit"].btn-primary:hover {
    border-color: #0b6f69;
    background: #0b7f78;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 131, 125, .18);
    transform: translateY(-1px);
}

.member-panel .btn-muted:hover,
.member-panel .member-muted-action:hover,
.member-panel .resume-action-btn.is-muted:hover,
.member-panel .table-actions button:hover {
    border-color: rgba(142, 160, 166, .9) !important;
    background: #e9eeee !important;
    color: #425960 !important;
    box-shadow: 0 6px 14px rgba(44, 65, 70, .08);
    transform: translateY(-1px);
}

.member-panel .member-primary-action:hover {
    border-color: #0b6f69;
    background: #0b7f78;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 131, 125, .18);
    transform: translateY(-1px);
}

.member-panel .member-soft-button:hover,
.member-panel .resume-action-btn:hover {
    border-color: rgba(31, 138, 138, .34) !important;
    background: #e4f5f2 !important;
    color: #0b7f78 !important;
    box-shadow: 0 6px 14px rgba(15, 131, 125, .1);
    transform: translateY(-1px);
}

.member-panel .resume-action-btn.is-personal:hover {
    border-color: rgba(223, 116, 20, .72) !important;
    background: #ffe4c0 !important;
    color: #ad540d !important;
    box-shadow: 0 8px 16px rgba(238, 138, 33, .18);
}

.member-password-form input.is-valid {
    border-color: rgba(42, 143, 97, .54);
    background: #f7fcfa;
}

.member-password-form input.is-invalid {
    border-color: rgba(198, 95, 75, .72);
    background: #fff8f5;
}

.member-profile-form > .btn-primary,
.member-password-form > .btn-primary {
    justify-self: start;
    width: auto;
    min-width: 132px;
    padding-right: 22px;
    padding-left: 22px;
    font-size: 16px;
    font-weight: 900;
}

#student-application-form .application-submit-row button.btn-primary {
    min-height: 46px;
    padding-right: 26px;
    padding-left: 26px;
    font-size: 16px;
    font-weight: 900;
}

.member-profile-form > .btn-primary {
    justify-self: end;
}

.member-panel-head {
    align-items: flex-start;
    margin: -22px -22px 20px;
    border-bottom: 1px solid #dcebea;
    padding: 20px 22px;
    background: #fbfdfd;
}

.member-panel-head .eyebrow {
    margin: 0 0 5px;
    color: #0f8c87;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
}

.member-panel-head h1 {
    color: #183b40;
    font-size: 24px;
    line-height: 1.25;
}

.member-head-status {
    min-width: auto;
}

.member-head-status strong {
    min-height: 28px;
    border: 1px solid rgba(15, 154, 146, .18);
    background: #e9f7f4;
    color: #0f837d;
    font-size: 13px;
}

.member-head-action {
    align-self: center;
    min-height: 34px;
    padding: 0 18px;
    white-space: nowrap;
}

.member-dashboard-hero,
.member-page-brief,
.member-result-hero,
.member-section,
.member-application-card,
.member-result-card {
    border-color: #dcebea;
    border-radius: 8px;
}

.member-dashboard-hero {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(0, 1.18fr) minmax(260px, .72fr);
    margin: -4px 0 14px;
    border: 0;
    border-bottom: 1px solid #e3eeee;
    border-left: 0;
    border-radius: 0;
    padding: 2px 0 18px;
    background: transparent;
    box-shadow: none;
}

.member-dashboard-hero::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, #0f9a92, rgba(15, 154, 146, .18), transparent 72%);
}

.member-dashboard-hero::after {
    display: none;
}

.member-dashboard-hero > * {
    position: relative;
    z-index: 1;
}

.member-dashboard-copy {
    gap: 7px;
}

.member-dashboard-copy > span,
.member-result-kicker {
    width: max-content;
    border-radius: 4px;
    background: #f0f8f7;
    color: #0f837d;
    font-size: 12px;
    font-weight: 900;
}

.member-dashboard-copy > span {
    padding: 4px 9px;
}

.member-dashboard-copy h2 {
    color: #183b40;
    font-size: 27px;
}

.member-dashboard-copy p {
    margin: 0;
    color: #657b80;
    font-size: 13px;
    line-height: 1.7;
}

.member-dashboard-copy p strong {
    color: #183b40;
    font-weight: 900;
}

.member-dashboard-name {
    font-size: 27px;
    line-height: 1.2;
}

.member-dashboard-copy .member-dashboard-meet {
    display: inline-block;
    width: auto;
    margin-top: 6px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 16px;
    font-weight: inherit;
    line-height: inherit;
}

.member-dashboard-copy p a {
    color: #0f837d;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-color: rgba(15, 131, 125, .28);
    text-underline-offset: 3px;
}

.member-dashboard-copy p a:hover {
    color: #0b6f69;
}

.member-dashboard-profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.member-dashboard-profile div,
.member-profile-facts div,
.member-metrics a,
.member-action-grid a,
.member-application-summary div,
.member-result-metrics div {
    border-color: #dcebea;
    border-radius: 7px;
}

.member-dashboard-profile div {
    min-height: 88px;
    padding: 15px;
    background: #f8fbfa;
    box-shadow: none;
}

.member-dashboard-profile div:first-child {
    border-color: rgba(15, 154, 146, .22);
}

.member-dashboard-profile div:last-child {
    border-color: rgba(239, 144, 36, .22);
}

.member-dashboard-profile span,
.member-profile-facts span,
.member-metrics span,
.member-application-summary span,
.member-result-metrics span,
.member-result-data span,
.member-application-facts span,
.member-application-course span,
.member-result-main span,
.member-result-score span,
.member-result-score small {
    color: #7b9095;
    font-size: 12px;
    font-weight: 800;
}

.member-dashboard-profile strong {
    color: #183b40;
    font-size: 24px;
}

.member-profile-facts {
    gap: 9px;
    margin-bottom: 15px;
}

.member-profile-facts div {
    min-height: 54px;
    padding: 10px 11px;
}

.member-profile-facts strong {
    color: #2d464e;
    font-size: 13px;
}

.member-metrics {
    gap: 10px;
    margin-bottom: 18px;
}

.member-metrics a {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 12px;
    align-items: center;
    overflow: hidden;
    min-height: 92px;
    padding: 15px;
    border-color: #dcebea;
    background:
        linear-gradient(135deg, rgba(15, 154, 146, .055), rgba(255, 255, 255, 0) 58%),
        #ffffff;
    box-shadow: none;
}

.member-metrics a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    bottom: auto;
    background: linear-gradient(90deg, rgba(15, 154, 146, .72), rgba(15, 154, 146, 0));
}

.member-metrics a::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -28px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(15, 154, 146, .055);
    pointer-events: none;
}

.member-metrics strong {
    margin-top: 5px;
    color: #183b40;
    font-size: 25px;
    line-height: 1.1;
}

.member-metric-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    min-width: 0;
}

.member-metric-copy em {
    color: #7b9095;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
}

.member-metric-visual {
    position: relative;
    z-index: 1;
    justify-self: end;
    display: grid;
    place-items: center;
    width: 74px;
    height: 56px;
    border: 1px solid rgba(207, 226, 226, .92);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(248, 252, 251, .96)),
        #f8fbfa;
}

.member-metric-card.is-application::before {
    height: 3px;
    background: linear-gradient(90deg, rgba(224, 158, 45, .9), rgba(224, 158, 45, 0));
}

.member-metric-card.is-application::after {
    background: rgba(224, 158, 45, .1);
}

.member-metric-card.is-application {
    border-color: rgba(224, 158, 45, .36);
    background:
        linear-gradient(135deg, rgba(224, 158, 45, .1), rgba(255, 255, 255, 0) 58%),
        #ffffff;
}

.member-metric-card.is-application .member-metric-copy em {
    color: #96610e;
}

.member-metric-card.is-application strong {
    color: #744607;
}

.member-metric-card.is-application .member-metric-visual {
    border-color: rgba(224, 158, 45, .38);
    background:
        linear-gradient(180deg, rgba(255, 250, 240, .98), rgba(255, 237, 198, .86)),
        #fff7e7;
}

.member-metric-card.is-review::before {
    height: 3px;
    background: linear-gradient(90deg, rgba(239, 144, 36, .9), rgba(239, 144, 36, 0));
}

.member-metric-card.is-review::after {
    background: rgba(239, 144, 36, .1);
}

.member-metric-card.is-review {
    border-color: rgba(239, 144, 36, .36);
    background:
        linear-gradient(135deg, rgba(239, 144, 36, .1), rgba(255, 255, 255, 0) 58%),
        #ffffff;
}

.member-metric-card.is-review .member-metric-copy em {
    color: #a35f12;
}

.member-metric-card.is-review strong {
    color: #7f4507;
}

.member-metric-card.is-review .member-metric-visual {
    border-color: rgba(239, 144, 36, .38);
    background:
        linear-gradient(180deg, rgba(255, 250, 241, .98), rgba(255, 235, 204, .88)),
        #fff6ea;
}

.member-metric-card.is-resume::before {
    background: linear-gradient(90deg, rgba(244, 177, 52, .88), rgba(244, 177, 52, 0));
}

.member-metric-card.is-resume::after {
    background: rgba(244, 177, 52, .12);
}

.member-metric-card.is-resume {
    border-color: rgba(238, 185, 71, .42);
    background:
        linear-gradient(135deg, rgba(255, 190, 63, .13), rgba(255, 255, 255, 0) 58%),
        #ffffff;
}

.member-metric-card.is-resume .member-metric-copy em {
    color: #9a6a12;
}

.member-metric-card.is-resume strong {
    color: #7b4f00;
}

.member-metric-card.is-resume .member-metric-visual {
    border-color: rgba(238, 185, 71, .45);
    background:
        linear-gradient(180deg, rgba(255, 250, 236, .96), rgba(255, 241, 199, .88)),
        #fff7e4;
}

.member-metric-bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5px;
    padding: 12px 12px 10px;
}

.member-metric-bars i {
    display: block;
    width: 8px;
    border-radius: 999px 999px 2px 2px;
    background: linear-gradient(180deg, #29a79f, #0f837d);
}

.member-metric-card.is-application .member-metric-bars i {
    background: linear-gradient(180deg, #f0b44b, #c87918);
    box-shadow: 0 8px 14px rgba(200, 121, 24, .16);
}

.member-metric-bars i:nth-child(1) {
    height: 18px;
    opacity: .55;
}

.member-metric-bars i:nth-child(2) {
    height: 28px;
    opacity: .72;
}

.member-metric-bars i:nth-child(3) {
    height: 22px;
    opacity: .62;
}

.member-metric-bars i:nth-child(4) {
    height: 36px;
}

.member-metric-ring::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(#ef9024 0 76%, #f4e4ce 76% 100%);
    box-shadow: 0 10px 18px rgba(239, 144, 36, .16);
}

.member-metric-ring::after {
    content: "";
    position: absolute;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(239, 144, 36, .2);
}

.member-metric-line svg {
    width: 62px;
    height: 42px;
    overflow: visible;
}

.member-metric-line polyline {
    fill: none;
    stroke: #2d8fb8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.member-metric-line circle {
    fill: #ffffff;
    stroke: #2d8fb8;
    stroke-width: 3;
}

.member-metric-document {
    overflow: hidden;
}

.member-metric-document::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 42px;
    border: 2px solid #d89114;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffffff, #fff4d7);
    box-shadow: 0 10px 18px rgba(216, 145, 20, .16);
}

.member-metric-document::after {
    content: "";
    position: absolute;
    top: 13px;
    right: 20px;
    width: 12px;
    height: 12px;
    border-left: 2px solid rgba(216, 145, 20, .55);
    border-bottom: 2px solid rgba(216, 145, 20, .55);
    border-radius: 0 4px 0 3px;
    background: #ffe9ad;
    transform: rotate(0deg);
}

.member-metric-document span,
.member-metric-document i {
    position: relative;
    z-index: 1;
    display: block;
    width: 20px;
    height: 3px;
    margin-top: 8px;
    border-radius: 999px;
    background: #d89114;
}

.member-metric-document span {
    margin-top: 13px;
    width: 16px;
}

.member-metric-document i:last-child {
    width: 24px;
    opacity: .62;
}

.member-quick-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 2px 0 12px;
    border-top: 1px solid #e3eeee;
    padding-top: 18px;
}

.member-quick-head > div {
    display: grid;
    gap: 3px;
}

.member-quick-head span {
    color: #0f8c87;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.member-quick-head h2 span {
    align-self: flex-end;
    margin-left: 4px;
    padding-bottom: 2px;
    font-size: 14px;
    line-height: 1;
}

.member-quick-head h2 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
    color: #183b40;
    font-size: 22px;
    line-height: 1.2;
}

.member-quick-head h2::after {
    display: none;
}

.member-quick-head p {
    max-width: 420px;
    margin: 0;
    color: #71878d;
    font-size: 13px;
    line-height: 1.6;
    text-align: right;
}

.member-action-grid {
    gap: 10px;
    margin-bottom: 20px;
}

.member-action-grid a {
    position: relative;
    overflow: hidden;
    min-height: 80px;
    padding: 14px;
    background: #ffffff;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.member-action-grid a::after {
    display: none;
}

.member-action-grid a > * {
    position: relative;
    z-index: 1;
}

.member-action-grid a:hover {
    border-color: rgba(15, 154, 146, .28);
    transform: none;
    box-shadow: 0 10px 24px rgba(17, 45, 54, .055);
}

.member-action-grid a > span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f8f7;
    color: #0f837d;
    font-size: 12px;
}

.member-action-grid strong {
    color: #183b40;
    font-size: 14px;
}

.member-action-grid small {
    color: #748a90;
    font-size: 12px;
}

.member-section {
    margin-top: 18px;
    border: 1px solid #dcebea;
    padding: 15px;
    background: #fff;
}

.member-section .section-head.compact {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #dbe8e7;
}

.member-section .section-head h2 {
    color: #183b40;
    font-size: 17px;
}

.member-section .section-head a {
    color: #0f837d;
    font-size: 13px;
    font-weight: 900;
}

.member-page-brief {
    margin-bottom: 12px;
    padding: 13px 14px;
    background: linear-gradient(90deg, #fbfffd, #f7fbfa);
}

.member-page-brief strong,
.member-result-brief strong {
    color: #183b40;
    font-size: 16px;
}

.member-page-brief span,
.member-result-brief span {
    color: #71878d;
    font-size: 13px;
}

.member-application-summary {
    gap: 9px;
    margin-bottom: 12px;
}

.member-application-summary div {
    min-height: 64px;
    padding: 10px 12px;
    background: #fbfdfd;
}

.member-application-summary strong,
.member-result-metrics strong {
    color: #183b40;
    font-size: 21px;
}

.member-application-list,
.member-result-list {
    gap: 10px;
}

.member-application-card {
    gap: 10px;
    padding: 13px 14px;
    box-shadow: 0 8px 20px rgba(18, 57, 62, .045);
}

.member-application-head {
    gap: 12px;
    padding-bottom: 9px;
}

.member-application-head strong {
    color: #183b40;
    font-size: 18px;
    line-height: 1.35;
}

.member-application-head span,
.member-application-head small {
    color: #6f858b;
    font-size: 13px;
    line-height: 1.5;
}

.member-application-states .state {
    min-height: 28px;
    padding: 0 11px;
    font-size: 13px;
}

.member-application-body {
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 12px;
}

.member-application-facts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px 10px;
}

.member-application-facts strong {
    color: #1f343b;
    font-size: 13px;
}

.member-application-course {
    border-left: 1px dashed #d8e7e6;
    padding-left: 12px;
}

.member-application-course strong {
    color: #0f837d;
    font-size: 14px;
}

.member-application-actions {
    padding-top: 9px;
}

.member-primary-action,
.member-muted-action,
.member-soft-button,
.member-result-file-link,
.member-result-file-empty {
    min-height: 32px;
    border-radius: 7px;
    padding: 0 12px;
    font-size: 13px;
}

.member-result-hero {
    grid-template-columns: minmax(0, 1fr) minmax(350px, .95fr);
    gap: 0;
    margin-bottom: 12px;
    border-left-width: 4px;
    background: #fbfdfd;
}

.member-result-hero-main {
    padding: 17px 18px;
}

.member-result-hero-main strong {
    color: #183b40;
    font-size: 25px;
}

.member-result-hero-main small {
    color: #657b80;
    font-size: 13px;
}

.member-result-metrics {
    padding: 12px 12px 12px 0;
}

.member-result-metrics div {
    min-height: 48px;
    padding: 0 9px;
}

.member-result-brief {
    margin-bottom: 12px;
    padding: 9px 12px;
}

.member-result-card {
    grid-template-columns: 184px minmax(0, 1fr) 148px;
    box-shadow: 0 8px 20px rgba(18, 57, 62, .05);
}

.member-result-score {
    padding: 16px 14px;
}

.member-result-score strong {
    font-size: 22px;
}

.member-result-student-banner strong,
.member-result-card.is-passed .member-result-student-banner strong {
    font-size: 15px;
}

.member-result-content {
    gap: 9px;
    padding: 14px;
}

.member-result-head strong {
    color: #183b40;
    font-size: 18px;
}

.member-result-content .member-result-main strong,
.member-result-content .member-result-student-line strong b {
    color: #38525b;
    font-size: 14px;
}

.member-result-content .member-result-student-line strong em {
    color: #183b40;
    font-size: 16px;
}

.member-result-content .member-result-data {
    grid-template-columns: minmax(92px, .8fr) minmax(170px, 1.35fr) minmax(88px, .75fr);
    gap: 8px 12px;
}

.member-result-data strong {
    color: #1f343b;
    font-size: 13px;
}

.member-result-card .member-result-actions {
    padding: 14px 14px 34px 0;
}

.member-panel-dashboard .member-dashboard-copy > span,
.member-panel-dashboard .member-dashboard-copy p,
.member-panel-dashboard .member-dashboard-profile span,
.member-panel-dashboard .member-profile-facts span,
.member-panel-dashboard .member-profile-facts strong,
.member-panel-dashboard .member-metrics span,
.member-panel-dashboard .member-quick-head span,
.member-panel-dashboard .member-quick-head p,
.member-panel-dashboard .member-section .section-head a,
.member-panel-dashboard .member-application-head span,
.member-panel-dashboard .member-application-head small,
.member-panel-dashboard .member-application-states .state,
.member-panel-dashboard .member-application-facts span,
.member-panel-dashboard .member-application-facts strong,
.member-panel-dashboard .member-application-course span,
.member-panel-dashboard .member-primary-action,
.member-panel-dashboard .member-muted-action,
.member-panel-dashboard .member-soft-button,
.member-panel-dashboard .member-result-file-link,
.member-panel-dashboard .member-result-file-empty,
.member-panel-dashboard .member-table th,
.member-panel-dashboard .member-table td,
.member-panel-dashboard .member-list span,
.member-panel-dashboard .empty-state {
    font-size: 14px;
}

.member-panel-dashboard .member-action-grid a > span,
.member-panel-dashboard .member-action-grid small,
.member-panel-dashboard .review-member-table td strong,
.member-panel-dashboard .review-member-table td span {
    font-size: 14px;
}

.member-panel-dashboard .member-action-grid a {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 66px;
    align-items: center;
}

.member-panel-dashboard .member-action-grid a > span {
    grid-row: auto;
}

.member-panel-dashboard .member-action-grid strong {
    font-size: 16px;
}

.member-panel-dashboard .member-profile-facts strong {
    font-size: 14px;
    font-weight: 400;
}

.member-certificate-card .member-result-actions {
    gap: 8px;
}

.member-certificate-card .member-soft-button,
.member-certificate-card .member-result-file-link,
.member-certificate-card .member-result-file-empty {
    min-height: 32px;
}

.member-panel > .talent-pagination,
.member-panel > nav,
.member-panel .talent-pagination {
    margin-top: 16px;
}

@media (max-width: 1180px) {
    .member-application-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .member-result-card {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .member-result-card .member-result-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding: 0 14px 34px;
    }

    .member-certificate-card .member-result-actions {
        grid-template-columns: repeat(3, max-content);
        justify-content: start;
    }
}

@media (max-width: 980px) {
    .member-nav {
        position: static;
    }

    .member-dashboard-hero,
    .member-dashboard-profile,
    .member-profile-facts,
    .member-metrics,
    .member-action-grid,
    .member-application-summary,
    .member-application-body,
    .member-result-hero,
    .member-result-metrics,
    .member-result-card,
    .member-result-content .member-result-data {
        grid-template-columns: 1fr;
    }

    .member-application-course {
        border-left: 0;
        border-top: 1px dashed #d8e7e6;
        padding-top: 10px;
        padding-left: 0;
    }

    .member-result-card .member-result-actions {
        padding-left: 14px;
    }

    .member-certificate-card .member-result-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .member-panel {
        padding: 16px;
    }

    .member-panel-head {
        margin: -16px -16px 16px;
        padding: 16px;
    }

    .member-application-head,
    .member-page-brief,
    .member-result-brief {
        align-items: stretch;
        flex-direction: column;
    }

    .member-application-facts {
        grid-template-columns: 1fr;
    }
}

/* Member applications: refined management page */
.member-applications-page {
    display: grid;
    gap: 14px;
}

.member-applications-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    overflow: hidden;
    border: 1px solid #dcebea;
    border-radius: 8px;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(15, 154, 146, .12), rgba(255, 255, 255, .92) 44%),
        linear-gradient(180deg, #fbfffd, #f6fbfa);
}

.member-applications-hero-main {
    display: grid;
    align-content: center;
    gap: 10px;
    min-width: 0;
}

.member-applications-kicker {
    width: max-content;
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(15, 154, 146, .1);
    color: #0f837d;
    font-size: 12px;
    font-weight: 900;
}

.member-applications-hero h2 {
    margin: 0;
    color: #183b40;
    font-size: 27px;
    line-height: 1.2;
}

.member-applications-hero p {
    max-width: 660px;
    margin: 0;
    color: #647b80;
    font-size: 14px;
    line-height: 1.75;
}

.member-applications-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3px;
}

.member-applications-flow span {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border: 1px solid rgba(15, 154, 146, .18);
    border-radius: 999px;
    padding: 0 12px;
    background: #ffffff;
    color: #315158;
    font-size: 13px;
    font-weight: 900;
}

.member-applications-flow span:not(:last-child)::after {
    content: "";
    width: 18px;
    height: 1px;
    margin-left: 8px;
    background: #bdd9d7;
}

.member-applications-latest {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid rgba(15, 154, 146, .16);
    border-radius: 8px;
    padding: 15px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 24px rgba(18, 57, 62, .055);
}

.member-applications-latest > span {
    color: #0f837d;
    font-size: 12px;
    font-weight: 900;
}

.member-applications-latest > strong {
    overflow: hidden;
    color: #183b40;
    font-size: 18px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-applications-latest > small,
.member-applications-latest-meta em {
    color: #71878d;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.member-applications-latest-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    border-top: 1px dashed #d7e7e6;
    padding-top: 8px;
}

.member-applications-latest-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.member-applications-latest .member-primary-action {
    justify-self: start;
    margin-top: 2px;
}

.member-applications-page .member-application-summary {
    margin-bottom: 0;
}

.member-applications-page .member-application-summary div {
    position: relative;
    overflow: hidden;
    min-height: 72px;
    background: #ffffff;
}

.member-applications-page .member-application-summary div::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #0f9a92;
    opacity: .82;
}

.member-applications-page .member-application-summary span {
    letter-spacing: 0;
}

.member-applications-page .member-application-summary strong {
    font-size: 23px;
}

.member-applications-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px dashed #d8e7e6;
    padding: 3px 0 12px;
}

.member-applications-toolbar > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.member-applications-toolbar strong {
    color: #183b40;
    font-size: 18px;
    line-height: 1.25;
}

.member-applications-toolbar span {
    color: #71878d;
    font-size: 13px;
}

.member-applications-page .member-application-list {
    gap: 13px;
}

.member-applications-page .member-application-card {
    position: relative;
    gap: 12px;
    overflow: hidden;
    border-color: #d8e8e7;
    padding: 15px;
    background:
        linear-gradient(90deg, rgba(15, 154, 146, .045), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #ffffff, #fbfdfd);
}

.member-applications-page .member-application-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #b6d4d1;
}

.member-applications-page .member-application-card.is-editable::before {
    background: #67aebc;
}

.member-applications-page .member-application-card.is-locked::before {
    background: #0f837d;
}

.member-application-kicker {
    width: max-content;
    color: #0f837d !important;
    font-size: 12px !important;
    font-weight: 900;
}

.member-application-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.member-application-meta-row span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid #dcebea;
    border-radius: 999px;
    padding: 0 9px;
    background: #f7fbfa;
    color: #637b81 !important;
    font-size: 12px !important;
    font-weight: 800;
}

.member-applications-page .member-application-states {
    max-width: 360px;
}

.member-application-states .state.muted,
.member-applications-latest-tags .state.muted {
    border-color: rgba(158, 184, 188, .34);
    background: #f4f8f8;
    color: #6d8288;
}

.member-application-progress-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid #e0eceb;
    border-radius: 8px;
    padding: 8px;
    background: #ffffff;
}

.member-application-progress-line span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: #f5f8f8;
    color: #7b9095;
    font-size: 12px;
    font-weight: 900;
}

.member-application-progress-line span.is-done {
    border-color: rgba(15, 154, 146, .15);
    background: #e8f6f3;
    color: #0f837d;
}

.member-application-progress-line span.is-current {
    border-color: rgba(45, 143, 184, .18);
    background: #edf7f8;
    color: #2d6f85;
}

.member-applications-page .member-application-body {
    grid-template-columns: minmax(0, 1fr) 180px;
}

.member-applications-page .member-application-facts > div {
    border: 1px solid #e1eeee;
    border-radius: 7px;
    padding: 8px 9px;
    background: #ffffff;
}

.member-applications-page .member-application-course {
    border: 1px solid #e1eeee;
    border-radius: 7px;
    padding: 10px 11px;
    background: #ffffff;
}

.member-applications-page .member-application-actions {
    margin-top: -2px;
}

@media (max-width: 1100px) {
    .member-applications-hero {
        grid-template-columns: 1fr;
    }

    .member-applications-latest {
        max-width: none;
    }
}

@media (max-width: 980px) {
    .member-applications-page .member-application-body,
    .member-application-progress-line {
        grid-template-columns: 1fr;
    }

    .member-applications-page .member-application-course {
        border-top: 1px solid #e1eeee;
        padding-top: 10px;
    }
}

@media (max-width: 640px) {
    .member-applications-hero,
    .member-applications-page .member-application-card {
        padding: 14px;
    }

    .member-applications-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .member-applications-flow span:not(:last-child)::after {
        display: none;
    }
}

/* Talent platform refresh: clean enterprise style inspired by mature large-company hiring products. */
.talent-archive-hero {
    border-bottom: 1px solid #e4e8eb;
    background:
        linear-gradient(90deg, rgba(246, 248, 249, .98), rgba(246, 248, 249, .9) 58%, rgba(246, 248, 249, .58)),
        url("/assets/img/home-preview/banner02.jpg") right center / auto 104% no-repeat;
}

.talent-archive-hero::before,
.talent-archive-hero::after {
    display: none;
}

.talent-archive-hero-inner {
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 64px;
    min-height: 336px;
    padding: 48px 0 46px;
}

.talent-archive-copy > span,
.talent-archive-list-head span,
.talent-archive-filter-head span {
    color: #d47722;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.talent-archive-copy h1 {
    margin-top: 8px;
    color: #172d33;
    font-size: 48px;
    letter-spacing: 0;
}

.talent-archive-copy > p:not(.talent-breadcrumb) {
    max-width: 690px;
    color: #5e7076;
    font-size: 16px;
    line-height: 1.88;
}

.talent-archive-actions a {
    min-height: 42px;
    border-radius: 6px;
    background: #0f766e;
    box-shadow: 0 8px 18px rgba(15, 118, 110, .16);
    font-size: 14px;
}

.talent-archive-actions a + a {
    border-color: #dce4e6;
    background: rgba(255, 255, 255, .78);
    box-shadow: none;
    color: #263f45;
}

.talent-archive-board {
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 44px rgba(24, 45, 51, .1);
}

.talent-archive-board div {
    grid-template-columns: 112px minmax(0, 1fr);
    padding: 21px 24px;
    border-top: 1px solid #edf1f2;
}

.talent-archive-board strong {
    color: #172d33;
    font-size: 38px;
    font-weight: 800;
}

.talent-archive-board span {
    color: #6a7c82;
    font-weight: 700;
}

.talent-archive-content {
    padding-top: 28px;
    background: #f5f7f8;
}

.talent-archive-filter {
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 28px rgba(24, 45, 51, .07);
}

.talent-archive-filter-head {
    padding: 19px 24px 17px;
    border-bottom: 1px solid #edf1f2;
    background: transparent;
}

.talent-archive-filter-head strong {
    color: #172d33;
    font-size: 21px;
}

.talent-archive-filter-head a {
    color: #7a8b90;
}

.talent-archive-filter-row {
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 14px 24px;
    border-top: 1px solid #f0f3f4;
}

.talent-archive-filter-row strong {
    color: #42585f;
    font-weight: 800;
}

.talent-archive-filter-row a {
    border-radius: 6px;
    color: #5f7278;
    font-size: 13px;
}

.talent-archive-filter-row a:hover,
.talent-archive-filter-row a.is-active {
    border-color: transparent;
    background: #e8f6f3;
    color: #0f766e;
}

.talent-archive-list-head {
    margin-top: 26px;
}

.talent-archive-list-head h2 {
    color: #172d33;
    font-size: 28px;
}

.talent-archive-list-head p {
    color: #0f766e;
}

.talent-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.talent-archive-card,
.talent-archive-card:nth-child(3n + 2),
.talent-archive-card:nth-child(3n) {
    min-height: 0;
    padding: 0;
    border: 1px solid #e5eaec;
    border-radius: 10px;
    background: #fff;
    color: #172d33;
    box-shadow: 0 8px 22px rgba(24, 45, 51, .055);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.talent-archive-card::before,
.talent-archive-card::after {
    display: none;
}

.talent-archive-card:hover {
    border-color: rgba(15, 118, 110, .28);
    box-shadow: 0 14px 32px rgba(24, 45, 51, .095);
    transform: translateY(-1px);
}

.talent-archive-card-top {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #edf1f2;
}

.talent-archive-avatar {
    width: 68px;
    height: 68px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f6f3, #fff4e8);
    color: #0f766e;
    font-size: 25px;
}

.talent-archive-card time {
    color: #8a9aa0;
}

.talent-archive-card h3 {
    margin-top: 5px;
    color: #172d33;
    font-size: 22px;
}

.talent-archive-card h3 a {
    color: #172d33;
}

.talent-archive-card-top p {
    color: #6a7c82;
}

.talent-archive-role {
    min-height: 62px;
    margin: 0;
    padding: 18px 20px 6px;
    color: #172d33;
    font-size: 20px;
}

.talent-archive-meta {
    padding: 0 20px 18px;
}

.talent-archive-meta span {
    min-height: 28px;
    border: 1px solid #edf1f2;
    border-radius: 6px;
    background: #f7f9fa;
    color: #52666c;
}

.talent-archive-card-link {
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    min-height: 38px;
    border-radius: 6px;
    background: #172d33;
    color: #fff;
}

.talent-archive-card-link:hover {
    background: #0f766e;
}

.talent-archive-detail-hero {
    border-bottom: 1px solid #e4e8eb;
    background:
        linear-gradient(90deg, rgba(246, 248, 249, .98), rgba(246, 248, 249, .9) 60%, rgba(246, 248, 249, .52)),
        url("/assets/img/home-preview/banner02.jpg") right center / auto 104% no-repeat;
    color: #172d33;
}

.talent-archive-detail-hero::before {
    display: none;
}

.talent-archive-detail-hero .talent-breadcrumb,
.talent-archive-detail-hero .talent-breadcrumb a {
    color: #667a80;
}

.talent-archive-detail-hero .resume-profile-v2 {
    border: 0;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 18px 44px rgba(24, 45, 51, .1);
    backdrop-filter: none;
}

.talent-archive-detail-hero .resume-profile-avatar {
    border: 0;
    background: linear-gradient(135deg, #e8f6f3, #fff4e8);
    color: #0f766e;
}

.talent-archive-detail-hero .talent-pill {
    background: #e8f6f3;
    color: #0f766e;
}

.talent-archive-detail-hero .resume-status-text,
.talent-archive-detail-hero .resume-profile p {
    color: #65787e;
}

.talent-archive-detail-hero .resume-profile h1,
.talent-archive-detail-hero .resume-profile-summary strong {
    color: #172d33;
}

.talent-archive-detail-hero .resume-profile-tags span {
    background: #f7f9fa;
    color: #52666c;
}

.talent-archive-detail-hero .resume-profile-summary {
    border-color: #edf1f2;
    background: #f7f9fa;
}

.talent-archive-detail-hero .resume-profile-summary span {
    color: #7c8f95;
}

.talent-archive-detail-content {
    background: #f5f7f8;
}

.talent-archive-detail-layout .resume-v2-section,
.talent-archive-detail-layout .talent-side-panel,
.talent-archive-detail-layout .resume-intent-section {
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(24, 45, 51, .055);
    color: #172d33;
}

.talent-archive-detail-layout .resume-intent-section .resume-v2-title,
.talent-archive-detail-layout .resume-v2-title {
    border-color: #edf1f2;
}

.talent-archive-detail-layout .resume-intent-section h2,
.talent-archive-detail-layout .resume-intent-section .resume-v2-title span,
.talent-archive-detail-layout .resume-intent-section dt,
.talent-archive-detail-layout .resume-intent-section dd {
    color: inherit;
}

.talent-archive-detail-layout .resume-v2-title span {
    color: #d47722;
}

.talent-archive-detail-layout .resume-timeline article,
.talent-archive-detail-layout .resume-cert-list div {
    background: #f7f9fa;
}

.talent-archive-detail-layout .resume-sidebar-profile {
    background: #172d33;
}

.talent-archive-detail-layout .resume-sidebar-primary {
    background: #0f766e;
}

@media (max-width: 980px) {
    .talent-archive-hero-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: 0;
    }

    .talent-archive-board {
        max-width: none;
    }

    .talent-archive-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .talent-archive-copy h1 {
        font-size: 34px;
    }

    .talent-archive-filter-head,
    .talent-archive-list-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .talent-archive-card-top {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .talent-archive-avatar {
        width: 58px;
        height: 58px;
    }
}

/* Legacy talent library refresh: follow old DTcms talent page structure. */
.frontend-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.legacy-talent-banner {
    width: 100%;
    height: 250px;
    background: url("/assets/img/legacy/talent/zp_banner.jpg") center / cover no-repeat;
}

.legacy-talent-page {
    padding: 0 0 58px;
    background: #fafafa;
}

.legacy-talent-shell {
    max-width: 1180px;
}

.legacy-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 42px;
    border-bottom: 1px solid #ddd;
    color: #999;
    font-size: 14px;
}

.legacy-breadcrumb a {
    color: #999;
}

.legacy-breadcrumb a:hover {
    color: #00938d;
}

.legacy-breadcrumb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00938d;
}

.legacy-talent-filter {
    margin-top: 22px;
    padding: 12px 20px 10px;
    border: 1px solid #cfefe0;
    border-radius: 8px;
    background: #fff;
}

.legacy-filter-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0;
}

.legacy-filter-title {
    display: flex;
    align-items: center;
    min-height: 28px;
    color: #333;
    font-size: 18px;
    white-space: nowrap;
}

.legacy-filter-title img {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    object-fit: contain;
}

.legacy-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 10px;
}

.legacy-filter-options a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 13px;
    color: #666;
    font-size: 16px;
    line-height: 1;
}

.legacy-filter-options a:hover,
.legacy-filter-options a.is-active {
    background: #00938d;
    color: #fff;
}

.legacy-talent-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 0;
}

.legacy-talent-list-head h2 {
    position: relative;
    margin: 0;
    padding-left: 14px;
    color: #333;
    font-size: 22px;
    line-height: 1.2;
}

.legacy-talent-list-head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 4px;
    height: 22px;
    border-radius: 4px;
    background: #00938d;
}

.legacy-talent-list-head span {
    color: #999;
    font-size: 14px;
}

.legacy-resume-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 2%;
    margin-top: 16px;
}

.legacy-resume-card {
    padding: 20px 16px 22px;
    border: 1px solid #cfefe0;
    border-radius: 8px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.legacy-resume-card:hover {
    border-color: #00938d;
    box-shadow: 0 0 12px rgba(0, 147, 141, .18);
    transform: translateY(-2px);
}

.legacy-resume-card-top {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.legacy-resume-avatar {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
}

.legacy-resume-avatar-img {
    display: block;
    overflow: hidden;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f1f6f4;
}

.legacy-resume-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.legacy-resume-avatar i {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 22px;
    height: 22px;
}

.legacy-resume-card-copy {
    min-width: 0;
    padding-top: 2px;
}

.legacy-resume-card-copy h3 {
    margin: 0;
    color: #333;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.25;
}

.legacy-resume-card-copy h3 a {
    color: inherit;
}

.legacy-resume-card-copy h3 a:hover {
    color: #00938d;
}

.legacy-resume-card-copy p {
    margin: 6px 0 0;
    color: #999;
    font-size: 13px;
    line-height: 1.55;
}

.legacy-resume-card-copy time {
    display: block;
    margin-top: 7px;
    padding-left: 18px;
    background: url("/assets/img/legacy/talent/time.png") left center / 13px auto no-repeat;
    color: #999;
    font-size: 13px;
    line-height: 1.5;
}

.legacy-resume-intent {
    margin-top: 14px;
}

.legacy-resume-intent p {
    position: relative;
    margin: 8px 0 0;
    padding-left: 24px;
    color: #333;
    font-size: 15px;
    line-height: 1.45;
}

.legacy-resume-intent p img {
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.legacy-resume-detail-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    min-height: 36px;
    margin: 18px auto 0;
    border-radius: 20px;
    background: #00938d;
    color: #fff;
    font-size: 15px;
}

.legacy-resume-detail-link:hover {
    background: #006c68;
    color: #fff;
}

.legacy-talent-empty {
    grid-column: 1 / -1;
    padding: 28px;
    border: 1px solid #cfefe0;
    border-radius: 8px;
    background: #fff;
    color: #666;
    text-align: center;
    font-size: 15px;
}

.legacy-talent-pagination {
    margin-top: 26px;
}

.legacy-resume-detail-page {
    padding-bottom: 64px;
}

.legacy-resume-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 266px;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.legacy-resume-detail-main {
    min-width: 0;
}

.legacy-resume-profile-card {
    position: relative;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 170px;
    gap: 24px;
    align-items: center;
    padding: 28px 24px;
    border: 1px solid #cfefe0;
    border-radius: 8px;
    background: #fff;
}

.legacy-detail-avatar {
    position: relative;
    width: 112px;
    height: 112px;
}

.legacy-detail-avatar span {
    display: block;
    overflow: hidden;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #f1f6f4;
}

.legacy-detail-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.legacy-detail-avatar i {
    position: absolute;
    right: 4px;
    bottom: 2px;
    display: block;
    width: 26px;
    height: 26px;
}

.legacy-resume-profile-copy h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    color: #333;
    font-size: 34px;
    line-height: 1.2;
}

.legacy-resume-profile-copy h1 span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 14px;
    background: #ff6a6a;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
}

.legacy-resume-profile-copy h1 span img {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    object-fit: contain;
}

.legacy-resume-profile-copy p {
    margin: 12px 0 0;
    color: #999;
    font-size: 16px;
    line-height: 1.7;
}

.legacy-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.legacy-detail-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid #00938d;
    border-radius: 14px;
    background: #ddf7eb;
    color: #00938d;
    font-size: 14px;
}

.legacy-resume-profile-time {
    align-self: start;
    padding-top: 8px;
    text-align: right;
}

.legacy-resume-profile-time span {
    display: inline-flex;
    align-items: center;
    color: #999;
    font-size: 14px;
}

.legacy-resume-profile-time img {
    width: 15px;
    margin-right: 6px;
}

.legacy-detail-section {
    margin-top: 22px;
    padding: 24px 22px;
    border: 1px solid #cfefe0;
    border-radius: 8px;
    background: #fff;
}

.legacy-detail-title {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.legacy-detail-title h2 {
    display: flex;
    align-items: center;
    margin: 0;
    color: #333;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.legacy-detail-title h2 img {
    width: 18px;
    height: 18px;
    margin-right: 9px;
}

.legacy-detail-title > img {
    width: 100%;
    max-height: 8px;
    object-fit: contain;
}

.legacy-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
    margin: 16px 0 0;
    padding: 0 0 18px;
    border-bottom: 1px solid #e5e5e5;
}

.legacy-detail-info-grid li {
    color: #333;
    font-size: 15px;
    line-height: 1.8;
}

.legacy-detail-info-grid span {
    color: #999;
}

.legacy-detail-contact {
    margin-top: 14px;
    color: #333;
    font-size: 15px;
    line-height: 2;
}

.legacy-detail-contact p {
    margin: 0;
}

.legacy-detail-contact span {
    color: #999;
}

.legacy-detail-contact b {
    color: #00938d;
    font-size: 21px;
    font-weight: 400;
}

.legacy-detail-timeline {
    margin-top: 16px;
}

.legacy-detail-timeline article {
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
}

.legacy-detail-timeline article:first-child {
    padding-top: 0;
}

.legacy-detail-timeline article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.legacy-detail-timeline h3 {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    color: #333;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
}

.legacy-detail-timeline h3 span:last-child {
    color: #666;
    font-size: 15px;
    font-weight: 400;
}

.legacy-detail-timeline p,
.legacy-detail-rich,
.legacy-detail-muted {
    margin: 8px 0 0;
    color: #555;
    font-size: 15px;
    line-height: 1.9;
}

.legacy-detail-muted {
    color: #999;
}

.legacy-resume-detail-side {
    display: grid;
    gap: 18px;
}

.legacy-side-panel {
    overflow: hidden;
    border: 1px solid #cfefe0;
    border-radius: 8px;
    background: #fff;
}

.legacy-side-panel h2 {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    color: #00938d;
    font-size: 20px;
    font-weight: 500;
}

.legacy-side-panel h2 img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    object-fit: contain;
}

.legacy-related-list {
    padding: 8px 16px 14px;
}

.legacy-related-list a {
    display: block;
    padding: 10px 0 10px 16px;
    border-bottom: 1px dashed #e5e5e5;
    background: url("/assets/img/legacy/talent/related-active.png") left center / 8px auto no-repeat;
    color: #555;
    font-size: 15px;
    line-height: 1.45;
}

.legacy-related-list a:hover {
    color: #00938d;
}

.legacy-resume-note {
    padding-bottom: 16px;
}

.legacy-resume-note p {
    margin: 0;
    padding: 14px 16px;
    color: #777;
    font-size: 14px;
    line-height: 1.8;
}

.legacy-resume-note a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 32px);
    min-height: 36px;
    margin: 0 16px;
    border-radius: 20px;
    background: #00938d;
    color: #fff;
    font-size: 15px;
}

.legacy-resume-note a:hover {
    background: #006c68;
    color: #fff;
}

@media (max-width: 1100px) {
    .legacy-resume-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .legacy-resume-detail-layout {
        grid-template-columns: 1fr;
    }

    .legacy-resume-detail-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .legacy-talent-banner {
        height: 170px;
    }

    .legacy-breadcrumb {
        justify-content: flex-start;
    }

    .legacy-filter-row {
        grid-template-columns: 1fr;
    }

    .legacy-filter-title {
        font-size: 16px;
    }

    .legacy-filter-options a {
        font-size: 14px;
    }

    .legacy-resume-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legacy-resume-profile-card {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .legacy-resume-profile-time {
        grid-column: 1 / -1;
        text-align: left;
    }

    .legacy-detail-info-grid {
        grid-template-columns: 1fr;
    }

    .legacy-resume-detail-side {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .legacy-resume-grid {
        grid-template-columns: 1fr;
    }

    .legacy-resume-profile-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .legacy-detail-avatar {
        margin: 0 auto;
    }

    .legacy-resume-profile-copy h1 {
        justify-content: center;
        font-size: 28px;
    }

    .legacy-detail-tags {
        justify-content: center;
    }

    .legacy-detail-timeline h3 {
        display: block;
    }
}

@media (max-width: 980px) {
    .wechat-auth-shell,
    .wechat-auth-two-fields,
    .member-wechat-bound {
        grid-template-columns: 1fr;
    }

    .wechat-auth-hero {
        min-height: auto;
    }

    .user-oauth-config-grid,
    .user-oauth-main-row,
    .user-oauth-provider-grid,
    .user-oauth-toggle {
        grid-template-columns: 1fr;
    }

    .user-oauth-toggle {
        grid-column: span 1;
    }

    .user-oauth-record {
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: start;
    }

    .user-oauth-record-head {
        display: none;
    }

    .user-oauth-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .auth-brand-lockup {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .auth-brand-lockup span {
        border-left: 0;
        padding-left: 0;
    }

    .auth-login-service div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .auth-page-login .auth-copy > p {
        font-size: 14px;
    }

    .auth-page-login .auth-tabs {
        grid-template-columns: 1fr;
    }

    .auth-page-login .sms-code-row {
        grid-template-columns: 1fr;
    }

    .auth-page-login .auth-links {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .auth-wechat-entry-head {
        flex-direction: column;
        gap: 6px;
    }

    .auth-wechat-entry-head small {
        text-align: left;
    }

    .wechat-login-button-strong,
    .wechat-login-disabled-strong {
        align-items: flex-start;
    }

    .wechat-login-text small {
        white-space: normal;
    }

    .auth-register-wechat {
        align-items: stretch;
        flex-direction: column;
    }

    .auth-register-wechat-action {
        width: 100%;
    }

    .auth-register-wechat a,
    .auth-register-wechat-state {
        width: 100%;
    }

    .auth-page-register,
    .auth-identity-row,
    .auth-mobile-code-row,
    .auth-email-code-row,
    .auth-password-row {
        grid-template-columns: 1fr;
    }

    .member-wechat-status,
    .member-wechat-actions,
    .user-oauth-actions,
    .user-list-toolbar .user-oauth-search {
        align-items: stretch;
        flex-direction: column;
    }

    .member-wechat-grid {
        grid-template-columns: 1fr;
    }

    .user-oauth-search input {
        width: 100%;
    }
}

.data-flow-topbar {
    min-width: 560px;
}

.data-filter-panel {
    margin-bottom: 14px;
    padding: 16px 18px;
}

.data-filter-panel summary small {
    color: #6b7f86;
}

.data-admin-filter,
.data-user-filter {
    display: grid;
    grid-template-columns: 130px 132px 132px minmax(190px, 1fr) 150px minmax(190px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding-top: 14px;
}

.data-user-filter {
    grid-template-columns: minmax(170px, 1fr) 130px 132px 132px minmax(240px, 1.4fr) auto auto;
}

.data-admin-filter input,
.data-admin-filter select,
.data-user-filter input,
.data-user-filter select {
    height: 36px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: #24383f;
    font-size: 13px;
}

.data-metrics {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.data-metrics .metric-card {
    min-height: 86px;
    padding: 14px 16px;
}

.data-metrics .metric-card strong {
    font-size: 25px;
}

.data-page-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.data-page-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: #314b54;
    font-size: 13px;
    text-decoration: none;
}

.data-page-tabs a.active {
    border-color: rgba(184, 48, 38, .25);
    background: rgba(184, 48, 38, .08);
    color: var(--coral);
    font-weight: 700;
}

.data-scope-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.data-scope-card {
    min-height: 112px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
}

.data-scope-card span,
.data-scope-card small {
    display: block;
    color: #647b83;
    font-size: 12px;
}

.data-scope-card strong {
    display: block;
    margin: 8px 0 7px;
    color: #172d36;
    font-size: 25px;
}

.data-state-grid,
.data-action-grid,
.data-segment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.data-state-grid article,
.data-action-card,
.data-segment-card {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfd;
}

.data-state-grid span,
.data-action-card span,
.data-segment-card span {
    display: block;
    color: #607982;
    font-size: 12px;
}

.data-state-grid strong,
.data-action-card strong,
.data-segment-card strong {
    display: block;
    margin-top: 6px;
    color: #1d343c;
    font-size: 24px;
}

.data-state-grid small,
.data-action-card p,
.data-segment-card small {
    margin: 6px 0 0;
    color: #6a7e86;
    font-size: 12px;
    line-height: 1.55;
}

.data-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
}

.data-action-card {
    display: grid;
    gap: 8px;
    background: #fff;
}

.data-action-warning {
    border-color: rgba(200, 137, 30, .35);
}

.data-action-danger {
    border-color: rgba(184, 48, 38, .35);
}

.data-action-info {
    border-color: rgba(41, 125, 145, .28);
}

.data-exam-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.data-exam-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.data-exam-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    background: #f6faf9;
}

.data-exam-head strong {
    color: #213a42;
    font-size: 16px;
}

.data-exam-head span {
    color: var(--coral);
    font-size: 22px;
    font-weight: 800;
}

.data-exam-list {
    display: grid;
}

.data-exam-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 4px 12px;
    padding: 11px 14px;
    border-bottom: 1px dashed #dce7e5;
}

.data-exam-list div:last-child {
    border-bottom: 0;
}

.data-exam-list span {
    color: #253d45;
    font-size: 13px;
}

.data-exam-list small {
    grid-column: 1;
    color: #7b8e95;
    font-size: 11px;
}

.data-exam-list strong {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    color: #20363e;
    font-size: 18px;
}

.data-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0;
}

.data-chart-panel {
    min-height: 260px;
}

.data-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.data-chart-head h2,
.data-bar-card h3 {
    margin: 0;
    color: #243b43;
    font-size: 16px;
}

.data-chart-head span {
    color: #718890;
    font-size: 12px;
}

.data-month-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(18px, 1fr));
    align-items: end;
    min-height: 190px;
    gap: 8px;
}

.data-month-bar {
    display: grid;
    grid-template-rows: 1fr auto auto;
    align-items: end;
    min-width: 0;
    height: 190px;
    text-align: center;
}

.data-month-bar span {
    display: block;
    width: 100%;
    height: var(--bar-height);
    min-height: 4px;
    border-radius: 5px 5px 2px 2px;
    background: #8ab6ad;
}

.data-chart-danger .data-month-bar span {
    background: #c85c54;
}

.data-chart-warning .data-month-bar span {
    background: #d7a845;
}

.data-chart-success .data-month-bar span {
    background: #6ba985;
}

.data-chart-info .data-month-bar span {
    background: #5d9fb1;
}

.data-month-bar strong {
    margin-top: 6px;
    color: #2b4149;
    font-size: 12px;
}

.data-month-bar em {
    color: #7a8d94;
    font-size: 11px;
    font-style: normal;
}

.data-funnel-panel {
    margin-top: 14px;
}

.data-bar-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.data-bar-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.data-bar-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.data-bar-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.data-bar-label span {
    color: #344d55;
    font-size: 13px;
}

.data-bar-label strong {
    color: #1f353d;
    font-size: 15px;
}

.data-bar-track,
.data-segment-meter {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: #edf3f2;
}

.data-bar-fill,
.data-segment-meter span {
    display: block;
    width: var(--bar-width);
    height: 100%;
    border-radius: inherit;
    background: #8ab6ad;
}

.data-bar-fill.data-tone-danger {
    background: #c85c54;
}

.data-bar-fill.data-tone-warning {
    background: #d7a845;
}

.data-bar-fill.data-tone-success {
    background: #6ba985;
}

.data-bar-fill.data-tone-info {
    background: #5d9fb1;
}

.data-bar-fill.data-tone-muted {
    background: #9aa8ad;
}

.data-scope-card.data-tone-danger {
    border-color: rgba(184, 48, 38, .24);
    background: #fff9f8;
}

.data-scope-card.data-tone-warning {
    border-color: rgba(200, 137, 30, .24);
    background: #fffaf0;
}

.data-scope-card.data-tone-success {
    border-color: rgba(67, 140, 100, .22);
    background: #f7fcf9;
}

.data-scope-card.data-tone-info {
    border-color: rgba(41, 125, 145, .22);
    background: #f6fbfd;
}

.data-scope-card.data-tone-muted {
    border-color: #d8e2e0;
    background: #fbfcfc;
}

.data-segment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-segment-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.data-segment-top strong {
    margin: 0;
}

.data-segment-card small {
    display: block;
}

.data-segment-success .data-segment-meter span {
    background: #6ba985;
}

.data-segment-warning .data-segment-meter span {
    background: #d7a845;
}

.data-segment-info .data-segment-meter span {
    background: #5d9fb1;
}

.data-segment-muted .data-segment-meter span {
    background: #9aa8ad;
}

.data-table-shell .admin-table {
    min-width: 980px;
}

@media (max-width: 1280px) {
    .data-admin-filter,
    .data-user-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .data-metrics,
    .data-scope-grid,
    .data-state-grid,
    .data-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .data-exam-grid,
    .data-chart-grid,
    .data-bar-layout,
    .data-segment-grid {
        grid-template-columns: 1fr;
    }

    .data-month-chart {
        overflow-x: auto;
        grid-template-columns: repeat(12, minmax(42px, 1fr));
    }
}

@media (max-width: 720px) {
    .data-flow-topbar {
        min-width: 0;
    }

    .data-admin-filter,
    .data-user-filter,
    .data-metrics,
    .data-scope-grid,
    .data-state-grid,
    .data-action-grid {
        grid-template-columns: 1fr;
    }

    .data-page-tabs {
        justify-content: flex-start;
    }
}

/* WeChat service-account mobile UI */
.wechat-mobile-dock,
.wechat-home-gateway {
    display: none;
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 72px;
    }

    body {
        overflow-x: hidden;
        padding-bottom: calc(74px + env(safe-area-inset-bottom));
        background: #f4f8f7;
        -webkit-font-smoothing: antialiased;
    }

    .shell {
        width: min(100% - 24px, 1180px);
    }

    .site-header-v1 {
        box-shadow: 0 8px 22px rgba(17, 45, 54, .08);
    }

    .site-header-v1 .nav-row {
        min-height: 64px;
        gap: 8px;
        width: min(100% - 24px, 1180px);
        max-width: calc(100% - 24px);
    }

    .site-header-v1 .logo {
        min-width: 0;
        gap: 9px;
    }

    .site-header-v1 .logo-img {
        width: 112px;
        height: 42px;
    }

    .site-header-v1 .logo-sub {
        padding-left: 9px;
    }

    .site-header-v1 .logo-sub-title {
        font-size: 18px;
        line-height: 1.05;
    }

    .site-header-v1 .logo-sub-meta {
        font-size: 10px;
    }

    .site-header-v1 .nav-v1,
    .site-header-v1 .nav-register,
    .site-header-v1 .nav-login,
    .site-header-v1 .nav-user-greeting,
    .site-header-v1 .nav-user-center,
    .site-header-v1 .nav-logout {
        display: none;
    }

    .site-header-v1 .nav-actions {
        gap: 8px;
        flex: 0 0 auto;
    }

    .site-header-v1 .search-pill {
        width: 38px;
        min-width: 38px;
        height: 38px;
        border-color: rgba(31, 138, 138, .16);
        background: #f6fbfa;
        box-shadow: none;
    }

    .site-header-v1 .mobile-menu {
        display: block;
    }

    .site-header-v1 .mobile-menu summary {
        width: 38px;
        height: 38px;
        border-color: rgba(31, 138, 138, .18);
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(17, 45, 54, .08);
    }

    .site-header-v1 .mobile-menu-panel {
        position: fixed;
        top: 70px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: min(76vh, 620px);
        border-color: rgba(31, 138, 138, .12);
        border-radius: 8px;
        padding: 12px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 22px 60px rgba(17, 45, 54, .18);
    }

    .mobile-menu-quick {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(216, 229, 231, .9);
    }

    .site-header-v1 .mobile-menu-panel .mobile-menu-quick a {
        justify-content: center;
        min-height: 42px;
        border: 1px solid rgba(31, 138, 138, .15);
        background: #f2f9f8;
        color: #1f6f70;
        font-size: 13px;
        font-weight: 900;
    }

    .site-header-v1 .mobile-menu-list {
        gap: 5px;
    }

    .site-header-v1 .mobile-menu-panel a {
        min-height: 42px;
        padding: 0 13px;
        font-size: 14px;
    }

    .site-header-v1 .mobile-menu-level-1 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin: 5px 0 8px;
        padding: 0;
        border-left: 0;
    }

    .site-header-v1 .mobile-menu-level-1 a {
        min-height: 34px;
        border: 1px solid #e2ecee;
        background: #fbfdfd;
        color: #526c72;
        font-size: 12px;
    }

    .site-header-v1 .mobile-menu-level-1 a::before {
        display: none;
    }

    .wechat-mobile-dock {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(205, 221, 224, .95);
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -12px 34px rgba(17, 45, 54, .12);
        backdrop-filter: blur(14px);
    }

    .wechat-mobile-dock a {
        display: grid;
        justify-items: center;
        gap: 3px;
        min-width: 0;
        color: #536b72;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.15;
    }

    .wechat-mobile-dock a.is-active {
        color: var(--teal);
    }

    .dock-icon {
        position: relative;
        display: block;
        width: 25px;
        height: 25px;
        border: 1.8px solid currentColor;
        border-radius: 8px;
    }

    .dock-home::before {
        content: "";
        position: absolute;
        inset: 5px 6px 6px;
        border-top: 1.8px solid currentColor;
        border-left: 1.8px solid currentColor;
        transform: rotate(45deg);
    }

    .dock-apply::before,
    .dock-result::before,
    .dock-cert::before {
        content: "";
        position: absolute;
        left: 6px;
        right: 6px;
        top: 7px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
    }

    .dock-user {
        border-radius: 50%;
    }

    .dock-user::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 8px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 10px 0 3px currentColor;
    }

    .home-v1-banner {
        min-height: 640px;
        margin-bottom: 0;
    }

    .home-v1-banner .home-v1-slide > .shell {
        min-height: 640px;
        padding: 28px 0 78px;
    }

    .home-v1-banner .hero-grid,
    .home-v1-banner .hero-grid-alt {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .home-v1-banner h1,
    .home-v1-banner .home-v1-alt-copy h1 {
        max-width: 9em;
        font-size: clamp(38px, 12vw, 54px);
        line-height: 1.02;
    }

    .home-v1-banner .eyebrow {
        font-size: 12px;
    }

    .home-v1-banner .hero-lead,
    .home-v1-banner .home-v1-alt-copy .hero-lead {
        max-width: 100%;
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.9;
    }

    .home-v1-banner .hero-actions {
        display: none;
    }

    .home-v1-banner .visual-wrap,
    .home-v1-banner .home-v1-portal-stage {
        min-height: 280px;
        transform: none;
    }

    .home-v1-banner .weld-visual {
        height: 230px;
        opacity: .68;
    }

    .home-v1-banner .inspection-card {
        right: 0;
        bottom: -6px;
        left: 0;
        width: auto;
        padding: 14px;
    }

    .home-v1-banner .path-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .home-v1-banner .path-row em {
        display: none;
    }

    .home-v1-banner .home-v1-portal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .home-v1-banner .home-v1-portal-main {
        padding: 17px;
    }

    .home-v1-banner .home-v1-portal-tile {
        min-height: 92px;
        padding: 13px;
    }

    .home-v1-banner-btn {
        display: none;
    }

    .home-v1-banner-dots {
        bottom: 17px;
        z-index: 8;
    }

    .wechat-home-gateway {
        display: block;
        margin-top: -28px;
        padding-bottom: 22px;
        background: #f4f8f7;
    }

    .wechat-home-gateway .shell {
        overflow: hidden;
        border: 1px solid rgba(213, 227, 230, .92);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 16px 38px rgba(17, 45, 54, .11);
    }

    .wechat-home-gateway-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
        align-items: end;
        padding: 15px;
        border-bottom: 1px solid #e2ecee;
        background: linear-gradient(135deg, #f8fcfb, #eef8f6);
    }

    .wechat-home-gateway-head span {
        grid-column: 1 / -1;
        color: var(--teal);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .wechat-home-gateway-head strong {
        color: #173139;
        font-size: 21px;
        line-height: 1.2;
    }

    .wechat-home-gateway-head small {
        color: #6a7f86;
        font-size: 12px;
        font-weight: 800;
    }

    .wechat-home-gateway-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wechat-home-gateway-grid a {
        display: grid;
        gap: 5px;
        min-height: 104px;
        padding: 14px;
        border-right: 1px solid #e4eef0;
        border-bottom: 1px solid #e4eef0;
        background: #ffffff;
    }

    .wechat-home-gateway-grid a:first-child {
        grid-row: span 2;
        align-content: center;
        min-height: 208px;
        background: linear-gradient(145deg, #e7f5f2, #ffffff 72%);
    }

    .wechat-home-gateway-grid a:nth-child(2n) {
        border-right: 0;
    }

    .wechat-home-gateway-grid span {
        color: rgba(31, 138, 138, .62);
        font-size: 12px;
        font-weight: 900;
    }

    .wechat-home-gateway-grid strong {
        color: #173139;
        font-size: 17px;
        line-height: 1.25;
    }

    .wechat-home-gateway-grid small {
        color: #6d8288;
        font-size: 12px;
        line-height: 1.45;
    }

    .home-v2-matrix {
        padding: 18px 0 24px;
        background: #f4f8f7;
    }

    .home-v2-matrix-panel {
        overflow: hidden;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 8px;
    }

    .home-v2-matrix-title {
        grid-column: 1 / -1;
        min-height: auto;
        padding: 16px;
    }

    .home-v2-matrix-title strong {
        font-size: 20px;
    }

    .home-v2-matrix-title span {
        font-size: 12px;
    }

    .home-v2-matrix-item {
        min-height: 112px;
        padding: 14px 12px;
        border-bottom: 1px solid var(--line);
    }

    .home-v2-matrix-item img {
        max-width: 56px;
        max-height: 42px;
    }

    .home-v2-matrix-item.logo-iwcc img {
        max-width: 90px;
    }

    .home-v2-matrix-item strong {
        margin-top: 5px;
        font-size: 15px;
    }

    .home-v2-matrix-item span {
        font-size: 11px;
        line-height: 1.35;
    }

    .home-v2-updates,
    .section#courses,
    .home-v2-faq,
    .home-v2-section#talent {
        padding: 34px 0;
    }

    .home-v2-section-title,
    .section-title {
        gap: 8px;
        margin-bottom: 15px;
    }

    .home-v2-section-title .eyebrow,
    .course-title-en {
        font-size: 13px;
    }

    .home-v2-section-title h2,
    .section-title h2 {
        font-size: 25px;
        line-height: 1.18;
    }

    .course-title-links {
        display: flex;
        overflow-x: auto;
        width: 100%;
        gap: 8px;
        padding: 8px 0 2px;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .home-v2-updates-grid,
    .course-grid,
    .home-v2-faq-grid,
    .home-v2-talent-showcase {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-v2-panel,
    .course-card,
    .home-v2-faq-grid article,
    .home-v2-talent-lead,
    .home-v2-jobs-board {
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 10px 26px rgba(17, 45, 54, .06);
    }

    .home-v2-feature-news {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-v2-feature-news img,
    .home-v2-feature-visual {
        height: 172px;
        border-radius: 8px;
    }

    .home-v2-news-slider-dots {
        top: 10px;
        right: 10px;
    }

    .home-v2-news-list a,
    .home-v2-read-list a,
    .home-v2-talent-showcase .home-v2-job-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        padding: 12px 0;
    }

    .home-v2-news-ico {
        display: none;
    }

    .home-v2-news-list strong,
    .home-v2-read-list h4,
    .home-v2-talent-showcase .home-v2-job-card strong {
        font-size: 15px;
        line-height: 1.45;
    }

    .home-v2-read-list a > span,
    .home-v2-news-list time {
        justify-self: end;
        color: #809197;
        font-size: 12px;
    }

    .home-v2-read-list p {
        display: none;
    }

    .course-card.feature,
    .course-card {
        min-height: auto;
    }

    .course-card h3 {
        font-size: 20px;
    }

    .course-contact-info {
        gap: 5px 10px;
    }

    .home-v2-faq-contact-note {
        width: 100%;
        font-size: 13px;
        line-height: 1.7;
    }

    .home-v2-talent-lead h3 {
        font-size: 24px;
    }

    .home-v2-talent-actions,
    .home-v2-talent-service {
        grid-template-columns: 1fr;
    }

    .home-v2-talent-actions .btn,
    .home-v2-talent-actions .btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .auth-page,
    .auth-page-login {
        display: grid;
        width: min(100% - 24px, 1120px);
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 24px 0 38px;
    }

    .auth-page-login::before {
        display: none;
    }

    .auth-copy,
    .auth-page-login .auth-copy,
    .auth-form,
    .auth-page-login .auth-form {
        border-radius: 8px;
        padding: 18px;
    }

    .auth-page-login .auth-copy {
        min-height: auto;
        border: 1px solid rgba(213, 227, 230, .9);
        background: linear-gradient(145deg, #ffffff, #eef8f6);
    }

    .auth-brand-lockup img {
        width: 126px;
        height: 44px;
    }

    .auth-page-login .auth-copy h1 {
        font-size: 28px;
    }

    .auth-page-login .auth-copy > p,
    .auth-login-service span {
        font-size: 13px;
        line-height: 1.75;
    }

    .auth-login-service div {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 0;
    }

    .auth-page-login .auth-form {
        justify-self: stretch;
        width: 100%;
        box-shadow: 0 14px 34px rgba(17, 45, 54, .09);
    }

    .auth-qr-hint {
        display: none;
    }

    .auth-qr-switch {
        width: 56px;
        height: 56px;
    }

    .auth-qr-switch-icon {
        top: 7px;
        right: 7px;
        width: 39px;
        height: 39px;
    }

    .auth-wechat-qr-shell {
        min-height: 252px;
    }

    .auth-wechat-qr {
        height: 252px;
    }

    .auth-wechat-qr iframe {
        transform: translateY(10px) scale(.72);
    }

    .auth-wechat-actions {
        display: grid;
        justify-items: start;
    }

    .sms-code-row {
        grid-template-columns: minmax(0, 1fr) 108px;
        gap: 8px;
    }

    .member-layout {
        display: block;
        width: min(100% - 24px, 1180px);
        padding: 20px 0 38px;
    }

    .member-nav {
        position: static;
        display: grid;
        gap: 0;
        overflow: visible;
        margin-bottom: 12px;
        border-radius: 8px;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .member-profile-card {
        grid-template-columns: 58px minmax(0, 1fr);
        justify-items: start;
        gap: 2px 12px;
        margin-bottom: 10px;
        border: 1px solid rgba(213, 227, 230, .92);
        border-radius: 8px;
        padding: 12px;
        background: linear-gradient(135deg, #ffffff, #edf8f6);
    }

    .member-profile-card .member-profile-name {
        color: #183b40;
    }

    .member-profile-card .member-profile-account {
        color: #71878d;
    }

    .member-profile-card .member-profile-meta .member-profile-group-only {
        border-color: rgba(213, 227, 230, .92);
        background: #ffffff;
    }

    .member-profile-card .member-profile-meta .member-profile-group-only em {
        color: #526b72;
    }

    .member-profile-card .member-profile-avatar,
    .member-nav .member-profile-avatar {
        grid-row: 1 / span 3;
        width: 58px;
        height: 58px;
        min-height: 58px;
    }

    .member-profile-avatar span {
        font-size: 22px;
    }

    .member-profile-name {
        font-size: 17px;
    }

    .member-profile-account {
        max-width: 100%;
        font-size: 12px;
    }

    .member-profile-meta {
        justify-items: start;
    }

    .member-profile-meta .member-profile-group-only {
        width: auto;
        min-height: 24px;
        padding: 0 9px;
        background: #ffffff;
    }

    .member-nav-group {
        display: flex;
        overflow-x: auto;
        gap: 7px;
        padding: 8px 0;
        border-bottom: 0;
        -webkit-overflow-scrolling: touch;
    }

    .member-nav-group > span,
    .member-nav-exit {
        display: none;
    }

    .member-nav a {
        flex: 0 0 auto;
        min-height: 36px;
        border: 1px solid #dce9eb;
        border-radius: 999px;
        padding: 0 13px;
        background: #ffffff;
        color: #526970;
        font-size: 13px;
        white-space: nowrap;
    }

    .member-nav a.active {
        border-color: rgba(31, 138, 138, .24);
        background: #e7f5f2;
        color: var(--teal);
    }

    .member-panel {
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 12px 30px rgba(17, 45, 54, .06);
    }

    .member-panel-head {
        align-items: flex-start;
        flex-direction: row;
        margin: -15px -15px 14px;
        padding: 15px;
        border-bottom: 1px solid #e2ecee;
        background: #fbfdfd;
    }

    .member-panel-head h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .member-head-status {
        min-width: auto;
    }

    .member-head-status span {
        display: none;
    }

    .member-head-status strong {
        min-height: 28px;
        padding: 0 10px;
    }

    .member-dashboard-hero,
    .member-dashboard-profile,
    .member-profile-facts,
    .member-metrics,
    .member-action-grid,
    .member-application-body,
    .member-application-facts,
    .member-result-hero,
    .member-result-card,
    .member-result-content .member-result-data,
    .member-result-metrics {
        grid-template-columns: 1fr;
    }

    .member-dashboard-hero {
        padding: 16px;
    }

    .member-dashboard-copy h2 {
        font-size: 24px;
    }

    .member-dashboard-profile {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .member-quick-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .member-quick-head p {
        max-width: none;
        text-align: left;
    }

    .member-dashboard-profile div {
        min-height: 74px;
        padding: 10px;
    }

    .member-dashboard-profile strong {
        font-size: 20px;
    }

    .member-action-grid a {
        min-height: 72px;
        padding: 12px;
    }

    .member-page-brief,
    .member-result-brief {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        padding: 11px;
    }

    .member-application-card,
    .member-result-card {
        border-radius: 8px;
        box-shadow: 0 8px 22px rgba(17, 45, 54, .06);
    }

    .member-application-head,
    .member-result-head {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .member-application-head strong {
        font-size: 19px;
    }

    .member-application-head span,
    .member-application-head small {
        font-size: 13px;
    }

    .member-application-meta-row {
        display: grid;
        gap: 3px;
    }

    .member-application-states {
        justify-content: flex-start;
    }

    .member-application-states .state {
        min-height: 30px;
        font-size: 13px;
    }

    .member-application-progress-line {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .member-application-progress-line span {
        min-height: 30px;
        border-radius: 999px;
        padding: 0 7px;
        background: #f2f6f6;
        color: #76898f;
        font-size: 11px;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .member-application-progress-line .is-done {
        background: #e8f6f3;
        color: #0f837d;
    }

    .member-application-progress-line .is-current {
        background: #edf7f8;
        color: #2d6f85;
    }

    .member-application-facts {
        gap: 8px;
    }

    .member-application-facts > div {
        min-height: 46px;
        border: 1px solid #e1ecee;
        border-radius: 8px;
        padding: 9px 10px;
        background: #fbfdfd;
    }

    .member-application-facts strong {
        white-space: normal;
    }

    .member-application-course {
        border-top: 1px dashed #d8e7e6;
        padding-top: 10px;
    }

    .member-application-actions,
    .member-result-card .member-result-actions {
        justify-content: stretch;
    }

    .member-primary-action,
    .member-muted-action,
    .member-soft-button,
    .member-result-file-link,
    .member-result-file-empty {
        width: 100%;
        min-height: 40px;
    }

    .member-result-hero {
        border-left-width: 4px;
    }

    .member-result-hero-main {
        padding: 15px 15px 0;
    }

    .member-result-hero-main strong {
        font-size: 26px;
    }

    .member-result-metrics {
        padding: 0 15px 15px;
    }

    .member-result-metrics div {
        min-height: 46px;
        padding: 9px 0 0;
        border-left: 0;
        border-top: 1px dashed rgba(168, 186, 191, .72);
    }

    .member-result-score {
        border-right: 0;
        border-bottom: 1px solid rgba(205, 219, 223, .86);
        padding: 15px;
    }

    .member-result-content {
        padding: 15px;
    }

    .member-result-card .member-result-actions {
        padding: 0 15px 38px;
    }

    .member-result-content .member-result-data {
        gap: 8px;
    }

    .member-result-content .member-result-data > div {
        border: 1px solid #e1ecee;
        border-radius: 8px;
        padding: 9px 10px;
        background: #fbfdfd;
    }

    .member-result-content .member-result-data > div:nth-child(2) strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .member-form,
    .form-grid,
    .resume-basic-fields,
    .resume-grid-four,
    .resume-grid-three,
    .resume-grid-two,
    .resume-area-grid,
    .resume-current-address-grid,
    .review-field-grid,
    .application-form-grid {
        grid-template-columns: 1fr !important;
    }

    .field input,
    .field select,
    .field textarea,
    .auth-form input,
    .member-resume-form input,
    .member-resume-form select,
    .member-resume-form textarea {
        min-height: 46px;
        font-size: 16px;
    }

    .site-footer {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .site-footer .footer-grid {
        gap: 22px;
    }

    .site-footer .footer-wechat-qr {
        grid-template-columns: repeat(2, 86px);
    }
}

@media (max-width: 380px) {
    .site-header-v1 .logo-img {
        width: 100px;
    }

    .site-header-v1 .logo-sub {
        display: none;
    }

    .wechat-home-gateway-grid strong {
        font-size: 16px;
    }

    .home-v1-banner h1,
    .home-v1-banner .home-v1-alt-copy h1 {
        font-size: 38px;
    }
}

/* WeChat homepage compact mode */
@media (max-width: 760px) {
    .home-v1-banner {
        min-height: 372px;
        padding: 0;
    }

    .home-v1-banner .home-v1-slide > .shell {
        min-height: 372px;
        padding: 22px 0 44px;
        width: min(100% - 24px, 1180px);
    }

    .home-v1-banner .home-v1-slider {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .home-v1-banner::after {
        height: 80px;
    }

    .home-v1-banner .hero-grid,
    .home-v1-banner .hero-grid-alt {
        align-content: center;
    }

    .home-v1-banner h1,
    .home-v1-banner .home-v1-alt-copy h1 {
        max-width: none;
        font-size: clamp(38px, 10vw, 46px);
        letter-spacing: 0;
    }

    .home-v1-banner .hero-lead,
    .home-v1-banner .home-v1-alt-copy .hero-lead {
        display: -webkit-box;
        max-width: 100%;
        margin-top: 12px;
        overflow: hidden;
        font-size: 15px;
        line-height: 1.75;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .home-v1-banner .visual-wrap,
    .home-v1-banner .home-v1-portal-stage {
        display: none;
    }

    .home-v1-banner-dots {
        bottom: 14px;
    }

    .wechat-home-gateway {
        margin-top: -34px;
        padding-bottom: 12px;
    }

    .wechat-home-gateway-head {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 13px 14px;
    }

    .wechat-home-gateway-head span {
        font-size: 10px;
    }

    .wechat-home-gateway-head strong {
        font-size: 20px;
    }

    .wechat-home-gateway-head small {
        font-size: 12px;
    }

    .wechat-home-gateway-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wechat-home-gateway-grid a,
    .wechat-home-gateway-grid a:first-child {
        grid-row: auto;
        grid-column: auto;
        align-content: center;
        justify-items: center;
        min-height: 78px;
        padding: 10px 6px;
        text-align: center;
    }

    .wechat-home-gateway-grid a:first-child {
        grid-column: 1 / -1;
        min-height: 68px;
    }

    .wechat-home-gateway-grid span {
        display: none;
    }

    .wechat-home-gateway-grid strong {
        font-size: 15px;
        line-height: 1.2;
    }

    .wechat-home-gateway-grid small {
        font-size: 11px;
        line-height: 1.35;
    }

    .home-v2-matrix {
        padding: 12px 0 18px;
    }

    .home-v2-matrix-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-v2-matrix-title {
        grid-column: 1 / -1;
        min-height: auto;
        padding: 13px 14px;
    }

    .home-v2-matrix-title strong {
        font-size: 19px;
    }

    .home-v2-matrix-title span {
        display: none;
    }

    .home-v2-matrix-item {
        min-height: 92px;
        padding: 10px 6px;
    }

    .home-v2-matrix-item img {
        max-width: 42px;
        max-height: 32px;
    }

    .home-v2-matrix-item.logo-iwcc img {
        max-width: 62px;
    }

    .home-v2-matrix-item strong {
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.2;
    }

    .home-v2-matrix-item span {
        display: none;
    }

    .home-v2-updates {
        padding: 22px 0 16px;
    }

    .home-v2-updates-grid {
        gap: 10px;
    }

    .home-v2-section-title {
        margin-bottom: 10px;
    }

    .home-v2-section-title .eyebrow {
        font-size: 12px;
    }

    .home-v2-section-title h2 {
        font-size: 23px;
    }

    .home-v2-panel {
        padding: 13px 14px;
    }

    .home-v2-panel-head {
        min-height: auto;
        padding-bottom: 9px;
    }

    .home-v2-panel-head h3 {
        font-size: 18px;
    }

    .home-v2-feature-news {
        gap: 8px;
    }

    .home-v2-feature-news img,
    .home-v2-feature-visual {
        height: 112px;
    }

    .home-v2-feature-news h4 {
        display: -webkit-box;
        margin-top: 2px;
        overflow: hidden;
        font-size: 16px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-v2-feature-news p {
        display: none;
    }

    .home-v2-feature-summary {
        display: block;
    }

    .home-v2-feature-news strong {
        margin-top: 4px;
        font-size: 12px;
    }

    .home-v2-news-list a:nth-child(n+4),
    .home-v2-read-list a:nth-child(n+4) {
        display: none;
    }

    .home-v2-news-list a,
    .home-v2-read-list a {
        min-height: 38px;
        padding: 8px 0;
    }

    .home-v2-news-list strong,
    .home-v2-read-list h4 {
        display: -webkit-box;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .section#courses,
    .home-v2-faq,
    .home-v2-section#talent {
        display: none;
    }

    .site-footer {
        margin-top: 10px;
    }
}