@CHARSET "UTF-8";

:root {
    --c-primary: #0E7BCE;
    --c-primary-light: #3ea5e5;
    --c-primary-dark: #0a5a99;
    --c-accent: #c9a96e;
    --c-accent-light: #e0c998;
    --c-accent-dark: #a8874d;
    --c-bg: #1D1D1D;
    --c-bg-2: #252525;
    --c-bg-3: #2e2e2e;
    --c-bg-4: #383838;
    --c-surface: rgba(35, 35, 35, 0.94);
    --c-surface-2: rgba(42, 42, 42, 0.9);
    --c-border: rgba(201, 169, 110, 0.18);
    --c-border-strong: rgba(201, 169, 110, 0.35);
    --c-text: #f0f0f0;
    --c-text-2: rgba(240, 240, 240, 0.75);
    --c-text-3: rgba(240, 240, 240, 0.55);
    --c-text-4: rgba(240, 240, 240, 0.4);
    --c-danger: #e74c3c;
    --c-success: #2ecc71;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 24px 72px rgba(0, 0, 0, 0.55);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   LEGACY STYLES (for news pages - DO NOT MODIFY)
   ============================================================ */
.bc-nav{width:100%;height:35px;border-bottom:1px solid lightgreen}
.help-box{width:1200px;margin:0 auto;min-height:600px}
.help-left{width:210px;margin:15px;margin-left:0;float:left;background:#fff}
.help-right{width:970px;overflow-x:hidden;min-height:400px;background:white;float:left;margin-top:15px}
.h-content{padding:10px;min-height:370px;text-indent:7px;font-family:"microsoft yahei"}
.h-content img{width:100%;}
.h-content .head{padding-bottom:26px}
.h-content .head p{float:left;min-width:230px;font-size:16px;height:36px;line-height:36px;border-bottom:2px solid #8b8b8b}
.h-content .head p span{font-size:28px}
.h-title{height:36px;line-height:36px;text-align:center;font-size:16px;color:white;font-weight:bold}
.h-hide ul{display:none}
.h-hide p{margin:14px 5px 0 0;float:right;display:inline-block;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid#f1f1f1}
#parent>li>span{display:block;padding-left:10px;background:#eaeaea;border-bottom:1px solid #fff}#parent>li>span:hover{cursor:pointer;background:#dadada}
#parent>li{line-height:33px;display:block}
.h-show ul{display:block}
.h-show p{margin:14px 5px 0 0;float:right;display:inline-block;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid#f1f1f1}
.h-list{border:1px solid #dedede}
.h-list li{width:177px;line-height:20px;margin:5px 0 5px 10px;padding:2px 0;padding-left:20px;cursor:pointer}
.h-list .h-curr{margin-left:10px}
.h-curr{background:rgba(0,0,0,0) linear-gradient(to right,#eaeaea,#fff) repeat scroll 0 0;border-color:#dedede;border-image:none;border-width:1px;color:green;font-weight:bold}
.h-list a:hover li{color:green;font-weight:bold}
.bc-nav{line-height:35px}
.bc-nav>p{width:1200px;margin:0 auto}
.bc-nav>p>a{color:gray}
.b{border:1px solid #e0dddd}
.h-right-title{width:100%;height:25px;margin-left:5px;margin-top:15px}
.h-right-title>h4{float:left;font-size:19px}#square{margin:5px;width:6px;height:6px;background:#df2003;float:left}
.b-99{background:#9EA873}
.h-record{padding:5px;width:100%;height:100px;margin-top:20px;border-top:1px solid #e0dddd}
.h-record>p{padding:5px}
.h-button{width:100px;height:25px;color:#6f6666;margin-left:5px}
.h-content h1{text-align:center}
.h-content .cat-time{text-align:center;padding:10px 0}
.c{clear:both}
.b-lg{background:#7dd589}
.news-list a,.list-time{font-size:13px;letter-spacing:2px;color:#333}
.news-list li{padding:8px 5px;border-bottom:1px dashed #f1f1f1}
.news-list a:hover{font-size:13px;letter-spacing:2px;color:#40bb6a}
.list-time{display:block;float:right}
#g-square{margin:8px 0;width:3px;height:3px;background:#333;float:left}
.n-content{width:100%;min-height:300px;overflow:hidden}
.n-content img{width:100%;}
.h-page{position:relative;width:100%;height:100px;background:url(../img/img_yingyin.png) 0 68px no-repeat;background-size: contain;}
.h-page .pagination .active{background:#3fba6a;color:white}
.h-page .pagination .disabled span,.h-page .pagination .active span{left:30px;line-height:28px;padding-left:4px}
.h-page .pagination{position:relative;top:32px;left:30%;width:100%;height:30px}
.h-page .pagination li{margin:0 auto;width:28px;height:28px;border:1px solid #f1f1f1;float:left;margin-left:10px}
.h-page .pagination li a{line-height:28px;padding-left:4px}


/* ============================================================
   HELP CENTER - DARK THEME
   ============================================================ */
.help-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--c-bg);
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(14, 123, 206, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(201, 169, 110, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.015) 0%, transparent 70%),
        linear-gradient(180deg, #1D1D1D 0%, #23232a 40%, #1D1D1D 100%);
    color: var(--c-text);
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
    min-width: 1200px;
    color-scheme: dark;
}

.help-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(201, 169, 110, 0.04) 0%, transparent 2.5%),
        radial-gradient(circle at 85% 35%, rgba(14, 123, 206, 0.035) 0%, transparent 2%),
        radial-gradient(circle at 25% 75%, rgba(201, 169, 110, 0.03) 0%, transparent 2%),
        radial-gradient(circle at 75% 85%, rgba(14, 123, 206, 0.04) 0%, transparent 2.5%),
        radial-gradient(circle at 50% 10%, rgba(201, 169, 110, 0.025) 0%, transparent 3%),
        radial-gradient(circle at 10% 60%, rgba(14, 123, 206, 0.03) 0%, transparent 2.5%),
        radial-gradient(circle at 90% 50%, rgba(201, 169, 110, 0.035) 0%, transparent 2.5%);
    background-size: 180px 180px, 220px 220px, 260px 260px, 200px 200px, 240px 240px, 180px 180px, 220px 220px;
    pointer-events: none;
    z-index: 0;
    animation: helpBgShift 20s linear infinite;
}

@keyframes helpBgShift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 180px 180px, -220px 220px, 260px -260px, -200px 200px, 240px 240px, -180px -180px, 220px -220px; }
}

.help-page::after {
    content: '';
    position: absolute;
    top: 36px;
    left: 36px;
    right: 36px;
    bottom: 36px;
    border: 1px solid rgba(201, 169, 110, 0.06);
    border-radius: 20px;
    pointer-events: none;
    z-index: 0;
}

.help-page > * {
    position: relative;
    z-index: 2;
}

@keyframes helpFadeSlideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes helpShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes helpPulseGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(201, 169, 110, 0.35); }
    50% { box-shadow: 0 4px 24px rgba(201, 169, 110, 0.6), 0 0 0 6px rgba(201, 169, 110, 0.08); }
}


/* --- Hero Bar --- */
.help-page .help-hero-bar {
    position: relative;
    padding: 0;
    margin-bottom: 0;
}

.help-page .help-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 40px 44px;
    display: flex;
    align-items: center;
    gap: 28px;
    position: relative;
}

.help-page .help-hero-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.4), transparent);
}

.help-page .help-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.15), rgba(14, 123, 206, 0.1));
    border: 2px solid rgba(201, 169, 110, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    animation: helpFadeSlideIn 0.8s var(--ease);
}

.help-page .help-hero-icon svg {
    width: 30px;
    height: 30px;
}

.help-page .help-hero-text h1 {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 6px;
    margin: 0 0 6px;
    color: var(--c-text);
    line-height: 1.2;
    text-shadow: 0 2px 20px rgba(201, 169, 110, 0.2);
}

.help-page .help-hero-text p {
    font-size: 14px;
    color: var(--c-text-3);
    margin: 0;
    letter-spacing: 2px;
}

.help-page .help-hero-decor {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.help-page .decor-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 12px rgba(201, 169, 110, 0.5);
}

.help-page .decor-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
    border-radius: 1px;
}


/* --- Breadcrumb --- */
.help-page .help-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 40px;
    font-size: 13px;
    color: var(--c-text-3);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.help-page .help-breadcrumb a {
    color: var(--c-text-3);
    text-decoration: none;
    transition: color 0.3s var(--ease);
}

.help-page .help-breadcrumb a:hover {
    color: var(--c-accent);
}

.help-page .help-breadcrumb .bc-sep {
    color: var(--c-text-4);
    margin: 0 4px;
}

.help-page .help-breadcrumb .bc-current {
    color: var(--c-accent);
    font-weight: 500;
}


/* --- Main Layout --- */
.help-page .help-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 40px 60px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
    animation: helpFadeSlideIn 0.7s var(--ease) 0.1s backwards;
}


/* --- Sidebar --- */
.help-page .help-sidebar {
    width: 260px;
    flex-shrink: 0;
}

.help-page .sidebar-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    position: relative;
}

.help-page .sidebar-card::before {
    /* content: ''; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-primary), var(--c-accent));
    background-size: 200% 100%;
    animation: helpShimmer 4s linear infinite;
}

.help-page .sidebar-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--c-border);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: 2px;
}

.help-page .sidebar-title > svg,
.help-page .sidebar-title > span:not(.title-divider) {
    display: inline-flex;
    align-items: center;
}

.help-page .sidebar-title svg {
    width: 18px;
    height: 18px;
    color: var(--c-accent);
}

/* Sidebar category list */
.help-page #parent {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.help-page #parent > li {
    display: block;
    position: relative;
}

.help-page #parent > li > span {
    display: block;
    padding: 14px 20px;
    font-size: 14px;
    color: var(--c-text-2);
    font-weight: 500;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(201, 169, 110, 0.06);
    transition: all 0.3s var(--ease);
    position: relative;
}

.help-page #parent > li > span:hover {
    background: rgba(201, 169, 110, 0.08);
    color: var(--c-text);
}

.help-page #parent > li > span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--c-accent), var(--c-primary));
    border-radius: 2px;
    transition: height 0.3s var(--ease);
}

.help-page #parent > li.h-show > span::before {
    height: 60%;
}

.help-page #parent > li > span p {
    display: inline-block;
    float: right;
    width: 0;
    height: 0;
    margin: 8px 5px 0 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--c-text-4);
    transition: transform 0.3s var(--ease);
}

.help-page #parent > li.h-show > span p {
    border-top: none;
    border-bottom: 6px solid var(--c-text-4);
}

.help-page .h-hide ul {
    display: none;
}

.help-page .h-show ul {
    display: block;
}

.help-page .h-list {
    list-style: none;
    padding: 4px 0 10px;
    margin: 0;
    border: none;
    background: rgba(0, 0, 0, 0.15);
}

.help-page .h-list a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.help-page .h-list li {
    padding: 10px 20px 10px 48px;
    font-size: 13px;
    color: var(--c-text-3);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    margin: 0;
    border-left: 3px solid transparent;
    position: relative;
    width: auto;
    line-height: 1.6;
}

.help-page .h-list li::before {
    content: '›';
    position: absolute;
    left: 32px;
    color: var(--c-text-4);
    font-size: 14px;
}

.help-page .h-list li:hover {
    color: var(--c-accent);
    background: rgba(201, 169, 110, 0.06);
    border-left-color: var(--c-accent);
    padding-left: 52px;
}

.help-page .h-list li.h-curr {
    color: var(--c-accent);
    font-weight: 600;
    background: rgba(201, 169, 110, 0.1);
    border-left-color: var(--c-accent);
}

.help-page .h-list li.h-curr::before {
    color: var(--c-accent);
}


/* Sidebar contact */
.help-page .sidebar-contact {
    padding: 20px;
    border-top: 1px solid var(--c-border);
    background: rgba(0, 0, 0, 0.2);
}

.help-page .contact-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: 2px;
    margin-bottom: 14px;
    text-align: center;
}

.help-page .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text-2);
    font-size: 13px;
    transition: all 0.3s var(--ease);
}

.help-page .contact-item:hover {
    border-color: var(--c-border-strong);
    background: rgba(201, 169, 110, 0.06);
    color: var(--c-text);
}

.help-page .contact-item svg {
    width: 18px;
    height: 18px;
    color: var(--c-accent);
    flex-shrink: 0;
}


/* --- Content Area --- */
.help-page .help-content {
    flex: 1;
    min-width: 0;
}

.help-page .content-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(201, 169, 110, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    position: relative;
}

.help-page .content-card::before {
    /* content: ''; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-primary) 50%, var(--c-accent) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: helpShimmer 4s linear infinite;
}

.help-page .content-title {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 36px 40px 24px;
    border-bottom: 1px solid var(--c-border);
    position: relative;
}

.help-page .title-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.2), rgba(14, 123, 206, 0.15));
    border: 1px solid rgba(201, 169, 110, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    flex-shrink: 0;
}

.help-page .title-badge svg {
    width: 22px;
    height: 22px;
}

.help-page .content-title h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
    letter-spacing: 2px;
    line-height: 1.4;
}


/* Content body */
.help-page .content-body {
    padding: 32px 40px;
    color: var(--c-text-2);
    font-size: 14px;
    line-height: 2;
    min-height: 300px;
}

.help-page .content-body h1,
.help-page .content-body h2,
.help-page .content-body h3 {
    color: var(--c-text);
    margin: 24px 0 12px;
}

.help-page .content-body p {
    margin: 0 0 14px;
    text-indent: 0;
}

.help-page .content-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 12px 0;
}

.help-page .content-body ul,
.help-page .content-body ol {
    padding-left: 24px;
    margin: 0 0 14px;
}

.help-page .content-body li {
    margin-bottom: 6px;
    line-height: 1.9;
}

.help-page .content-body a {
    color: var(--c-accent);
    text-decoration: none;
    transition: color 0.3s var(--ease);
}

.help-page .content-body a:hover {
    color: var(--c-accent-light);
    text-decoration: underline;
}

.help-page .content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
}

.help-page .content-body table th,
.help-page .content-body table td {
    padding: 10px 14px;
    border: 1px solid var(--c-border);
    text-align: left;
}

.help-page .content-body table th {
    background: rgba(201, 169, 110, 0.1);
    color: var(--c-text);
    font-weight: 600;
}

.help-page .content-body table td {
    color: var(--c-text-2);
}


/* Feedback section */
.help-page .content-feedback {
    padding: 28px 40px;
    border-top: 1px solid var(--c-border);
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
}

.help-page .feedback-question {
    font-size: 15px;
    color: var(--c-text);
    font-weight: 500;
    margin-bottom: 18px;
    letter-spacing: 1px;
}

.help-page .feedback-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
}

.help-page .h-button {
    display: inline-block;
    width: auto;
    min-width: 140px;
    padding: 12px 28px;
    height: auto;
    line-height: normal;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    border: none;
    text-align: center;
    margin: 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.help-page .h-button.fb-yes {
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-primary) 100%);
    box-shadow: 0 4px 16px rgba(201, 169, 110, 0.25);
}

.help-page .h-button.fb-yes:hover {
    background: linear-gradient(135deg, var(--c-accent-light) 0%, var(--c-primary-light) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(201, 169, 110, 0.4);
}

.help-page .h-button.fb-no {
    background: rgba(201, 169, 110, 0.06);
    border: 1px solid rgba(201, 169, 110, 0.35);
    color: var(--c-accent);
}

.help-page .h-button.fb-no:hover {
    background: rgba(201, 169, 110, 0.12);
    border-color: var(--c-accent);
    color: var(--c-accent-light);
    transform: translateY(-2px);
}

.help-page .h-button.fb-yes::before,
.help-page .h-button.fb-no::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 12px;
    width: 6px;
    height: 6px;
    border-top: 2px solid rgba(255, 255, 255, 0.45);
    border-left: 2px solid rgba(255, 255, 255, 0.45);
}

.help-page .h-button.fb-yes::after,
.help-page .h-button.fb-no::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 12px;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
    border-right: 2px solid rgba(255, 255, 255, 0.45);
}

.help-page .h-button.fb-no::before,
.help-page .h-button.fb-no::after {
    border-color: rgba(201, 169, 110, 0.5);
}


/* --- Feedback result record --- */
.help-page .h-record {
    margin-top: 18px;
    padding: 14px 20px;
    min-height: 20px;
    background: rgba(201, 169, 110, 0.06);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-accent);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    transition: all 0.3s var(--ease);
}

.help-page .h-record:not(:empty) {
    border-color: var(--c-border-strong);
    background: rgba(201, 169, 110, 0.1);
    animation: helpPulseGlow 2s ease-in-out;
}


/* --- Corner flourishes for content card --- */
.help-page .content-card .corner-deco {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 10;
}

.help-page .content-card .corner-deco.tl {
    top: 10px;
    left: 10px;
    border-top: 2px solid var(--c-accent);
    border-left: 2px solid var(--c-accent);
    border-top-left-radius: 12px;
}

.help-page .content-card .corner-deco.tr {
    top: 10px;
    right: 10px;
    border-top: 2px solid var(--c-accent);
    border-right: 2px solid var(--c-accent);
    border-top-right-radius: 12px;
}

.help-page .content-card .corner-deco.bl {
    bottom: 10px;
    left: 10px;
    border-bottom: 2px solid var(--c-accent);
    border-left: 2px solid var(--c-accent);
    border-bottom-left-radius: 12px;
}

.help-page .content-card .corner-deco.br {
    bottom: 10px;
    right: 10px;
    border-bottom: 2px solid var(--c-accent);
    border-right: 2px solid var(--c-accent);
    border-bottom-right-radius: 12px;
}


/* --- Corner flourishes for sidebar card --- */
.help-page .sidebar-card .corner-deco {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 10;
}

.help-page .sidebar-card .corner-deco.tl {
    top: 8px;
    left: 8px;
    border-top: 2px solid var(--c-accent);
    border-left: 2px solid var(--c-accent);
    border-top-left-radius: 10px;
}

.help-page .sidebar-card .corner-deco.tr {
    top: 8px;
    right: 8px;
    border-top: 2px solid var(--c-accent);
    border-right: 2px solid var(--c-accent);
    border-top-right-radius: 10px;
}

.help-page .sidebar-card .corner-deco.bl {
    bottom: 8px;
    left: 8px;
    border-bottom: 2px solid var(--c-accent);
    border-left: 2px solid var(--c-accent);
    border-bottom-left-radius: 10px;
}

.help-page .sidebar-card .corner-deco.br {
    bottom: 8px;
    right: 8px;
    border-bottom: 2px solid var(--c-accent);
    border-right: 2px solid var(--c-accent);
    border-bottom-right-radius: 10px;
}

.help-page .sidebar-card {
    position: relative;
}

.help-page .sidebar-card::after {
    /* content: ''; */
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid rgba(201, 169, 110, 0.12);
    border-radius: calc(var(--radius-lg) - 4px);
    pointer-events: none;
    z-index: 0;
}

.help-page .sidebar-card > * {
    position: relative;
    z-index: 1;
}


/* --- Title divider decoration --- */
.help-page .title-divider {
    display: block;
    width: 60px;
    height: 3px;
    margin: 12px 0 0;
    background: linear-gradient(90deg, var(--c-accent), var(--c-primary), var(--c-accent));
    border-radius: 2px;
    background-size: 200% 100%;
    animation: helpShimmer 4s linear infinite;
}

.help-page .sidebar-title > .title-divider {
    width: 100%;
    margin: 10px 0 0;
}


/* --- Content card inner content z-index --- */
.help-page .content-card > .content-title,
.help-page .content-card > .content-body,
.help-page .content-card > .content-feedback {
    position: relative;
    z-index: 2;
}


/* --- Hero section enhancements --- */
.help-page .help-hero-bar {
    position: relative;
    overflow: hidden;
}

.help-page .help-hero-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(201, 169, 110, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(14, 123, 206, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.help-page .help-hero-icon {
    position: relative;
    animation: helpFadeSlideIn 0.8s var(--ease), helpPulseGlow 3s ease-in-out infinite 0.8s;
}


/* --- Sidebar contact item enhancements --- */
.help-page .contact-item {
    position: relative;
    overflow: hidden;
}

.help-page .contact-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.08), transparent);
    transition: left 0.5s var(--ease);
}

.help-page .contact-item:hover::after {
    left: 100%;
}


/* --- Scrollbar --- */
.help-page ::-webkit-scrollbar {
    width: 8px;
}

.help-page ::-webkit-scrollbar-track {
    background: var(--c-bg);
}

.help-page ::-webkit-scrollbar-thumb {
    background: var(--c-accent);
    border-radius: 4px;
}

.help-page ::-webkit-scrollbar-thumb:hover {
    background: var(--c-accent-light);
}


/* --- Global resets within help-page --- */
.help-page a {
    color: var(--c-accent);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}

.help-page a:hover {
    color: var(--c-accent-light);
    text-decoration: none;
}

.help-page input[type=text],
.help-page input[type=password],
.help-page input[type=submit],
.help-page textarea,
.help-page select {
    border: none;
    line-height: normal;
    padding: 0;
    margin: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.help-page .c {
    clear: both;
    height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
}

.help-page .help-page .wst-clear {
    clear: both;
    height: 0;
}