:root {
    --red-color: #ff0000;
    --primary-color: #e53935;
    --primary-light: #ff4757;
    --primary-light-1: #fff1f1;
    --primary-dark: #ab000d;
    --primary-blue: #1890ff;
    --secondary-color: #f5f5f5;
    --text-color: #333333;
    --light-text: #666666;
    --border-color: #e0e0e0;
    --success-color: #4caf50;
    --font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --warn-color: #ffb800;

    /* Updated Theme Colors */
    --color-primary: #fd4936;         /* New Main Red-Orange */
    --color-gradient-top-pro: #ffae36;  /* Yellowish-Orange for Pro Gradient Top */
    --color-gradient-top-business: #ff8c5a; /* Slightly Redder Orange for Business Gradient Top */
    --color-secondary-highlight: #ff8c5a; /* Lighter orange for price highlight gradient */

    /* Background Tints - Adjusted for new theme */
    --color-basic-bg: #fff2f0;      /* Very light pinkish-red for basic */
    --color-pro-bg: #fff0ef;        /* Very light red-orange for pro */
    --color-business-bg: #fff5f0;   /* Slightly different pale orange for business */

    --color-text-white: #fff;
    --color-border: #E0E0E0;
    --color-wechat: #00C707;
}
* {margin:0;padding:0;box-sizing:border-box;font-size: 14px;}
body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important;line-height:1.6;color:#333;background-color:#f5f5f5;}
.hide {display: none !important;}
.danger {color: var(--primary-light) !important;}
.warn {color: var(--warn-color) !important;}
.blue {color: var(--primary-blue) !important;}
.ft-weight {font-weight: bold !important;}
.ft-gray {color: var(--light-text) !important;}
.bg-danger {background-color: var(--primary-light) !important; color: #fff;}
.bg-warn {background-color: var(--warn-color) !important; color: #fff;}
.bg-blue {background-color: var(--primary-blue) !important; color: #fff;}
.relative {position: relative !important;}
.mb-10 {margin-bottom: 10px;}
.layer-loading {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 490;}
.layer-loading .layer-box {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 901; background-color: #dddddd; opacity: 0.5;}
.layer-loading .loading-icon {position: absolute; z-index: 902; text-align: center; width: 100%; top: 30%; margin-top: -20px;}
.layer-loading .loading-icon .layui-icon {font-size: 40px;}
.pay-wx-icon {color: var(--color-wechat) !important;}
/** layui样式 **/
.layui-btn {border-radius: 4px !important;}
.layui-layer-hui {background-color: rgba(0,0,0,0.9) !important;}
.layui-layer-btn .layui-layer-btn0 {background-color: var(--primary-light) !important;}

.container{max-width:1200px;margin:0 auto;padding:0 20px;height:60px}
header{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);position:fixed;width:calc(100% - 240px);top:0;right:0;z-index:500;height:60px}
.header-content{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:60px}
.header-content .menu-spread {line-height: 26px; display: none;}
.header-content .menu-spread .layui-icon {font-size: 20px !important; cursor: pointer;}
.header-content .header-left{display:flex;align-items:center;gap:10px;color:var(--red-color)}
.header-left svg {font-size: 18px;}
.location-icon {
    color: var(--primary-light);
    font-size: 20px;
}

.tool-selector {
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}
.tool-selector option:checked {
    color: var(--red-color);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header-content .lianxi-service {cursor: pointer; position: relative;}
.header-content .lianxi-service .service-box {position: absolute; display: none; top: 43px; right: -50px; background-color: #fff; text-align: center; padding: 20px; width: 250px; box-shadow: 0px 0px 6px #aaa; box-sizing: border-box;}
.header-content .lianxi-service:hover .service-box {display: block;}

.header-content .install-btn{display:flex;align-items:center;gap:5px;text-decoration:none;color:#666;border-radius:4px;transition:all 0.3s}
.header-content .header-plugin-tips {position: absolute; top: 19px; right: -70px; display: none; background-color: #fff; white-space: nowrap;}
.header-content .install-box:hover .header-plugin-tips {display: block; color:#666;}

.user-avatar {
    height: 32px;
    display: flex;
    align-items: center;
}
.header-content .login-dropdown{border:0;display:none; padding: 0;}

.main-content {
    margin-top: 80px;
    padding: 20px;
}

.download-section {
    text-align: center;
    margin-bottom: 40px;
}

.download-options {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
}

.download-option {
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
}

.download-option.active {
    background-color: #e8f0fe;
    color: #1a73e8;
    border-color: #1a73e8;
}

.url-input {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.url-input input {
    width: 500px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.url-input button {
    padding: 15px 30px;
    background-color: var(--primary-light);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.supported-platforms {
    text-align: center;
    margin-bottom: 40px;
}

.platforms-title {
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    height: 140px;
    overflow: hidden;
    transition: height 0.3s;
}

.platform-grid.expanded {
    height: auto;
}

.platform-item {
    padding: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.platform-item:hover {
    transform: translateY(-2px);
}
.platform-item .platform-title {width: 100%; position: absolute; top: -10px;}
.platform-item svg, .platform-item img {width: 40px !important; height: 40px !important;}
.platform-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.show-more {
    margin-top: 20px;
    color: #666;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.show-more:hover {
    color: #333;
}

.carousel-section {
    background-color: var(--primary-light);
    padding: 40px 0;
    margin-bottom: 40px;
}

.carousel {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    height: 400px;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.3s;
}

.carousel-item {
    min-width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
}

.carousel-item img {
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.5);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

.faq-section {
    max-width: 800px;
    margin: 0 auto 40px;
}

.faq-title {
    text-align: center;
    margin-bottom: 30px;
}

.faq-item {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}

.faq-question {
    padding: 15px 20px;
    background: #f8f9fa;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s, padding 0.3s;
}

.faq-item.active .faq-answer {
    padding: 15px 20px;
    max-height: 200px;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* 修改左侧菜单样式 */
.sidebar{position:fixed;left:0;top:0;width:240px;height:100vh;background-color:#fff;box-shadow:2px 0 4px rgba(0,0,0,0.1);z-index:1000; transform: translateX(0);transition: transform 0.3s ease-in-out;}
.sidebar .sidebar-close-btn { position: absolute; top: -12px; right: 2px; font-size: 24px; color: var(--light-text); cursor: pointer; display: none; padding: 5px;}
.sidebar .sidebar-logo{height:60px;border-bottom:1px solid #eee;display:flex}
.sidebar .logo-box{width:200px;height:50px;margin:auto;overflow:hidden}
.sidebar-logo img{width:190px;margin-top:-18px;margin-left:-8px}
.sidebar-menu{list-style:none;padding:0;margin:20px 0}
.sidebar-menu li {transition: all 0.3s; position: relative;}
.sidebar-menu li.sub_menu:after {content:''; border: 1px solid #6a6a6a; border-right: 0; width: 6px; height: 6px; border-bottom: 0; position: absolute; top: 50%; margin-top: -3px; right: 22px; transform: rotate(225deg);}
.sidebar-menu li.open:after {transform: rotate(45deg); margin-top: 0;}
.sidebar-menu li a {display: block; padding: 12px 20px;}
.sidebar-menu li a:hover, .sidebar-menu li dd a:hover  {background-color: #f5f5f5;}
.sidebar-menu li.active, .sidebar-menu li dd:active {color: var(--primary-light);background-color: #fff1f1;}
.sidebar-menu li svg {width: 20px; height: 20px; color: #6a6a6a; vertical-align: middle; position: relative; top: -2px;}
.sidebar-menu a {text-decoration: none;color: inherit;display: block; width: 100%;}
.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 900; display: none; opacity: 0; transition: opacity 0.3s ease-in-out; }
.sidebar-overlay.active { display: block; opacity: 1; }
.sidebar-menu li dd {background-color: #fff;}
.sidebar-menu li dd a {display: block; padding: 12px 30px;}

/* 调整主内容区域 */
.main-wrapper {
    margin-left: 240px;
    min-height: 100vh;
}

/* 标题样式 */
.page-title {
    text-align: center;
    padding-bottom: 40px;
}

.page-title h1 {
    font-size: 24px;
}

/* 三列布局容器 */
.content-columns{display:flex;gap:20px;min-height:calc(100vh - 180px)}
.content-columns .preview-open-btn{display:none;width:100%;padding:10px 15px;background:#6c757d;color:white;border-radius:4px;cursor:pointer;font-size:15px;margin-top:15px;text-align:center;}

/* 输入模块样式 */
.input-section {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 600px; /* 设置固定高度 */
    display: flex;
    flex-direction: column;
    position: relative;
}

.input-section h2 {
    font-size: 18px;
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 20px;
    font-size: 14px;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 8px;
}

.input-group textarea {
    height: 332px; /* 调整文本框高度 */
    resize: none; /* 禁用手动调整大小 */
}

.word-count {
    color: #666;
    font-size: 14px;
    margin-top: 8px;
}

.check-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary-light);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

/* 检测结果模块样式 */
.result-section {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 600px; /* 设置固定高度 */
    display: flex;
    flex-direction: column;
    position: relative;
}
.v-hidden {
    visibility: hidden;
}
.result-box {
    max-height: 141px;
    overflow-y: auto;
    margin-bottom: 5px;
    align-self: flex-start;
    width: 100%;
}
.result-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.result-table th,
.result-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}
.result-table td {font-size: 14px;}
.result-table th {
    background: #f8f9fa;
}

.result-content { border: 1px solid #ddd; border-radius: 4px; margin-bottom: 20px; flex-grow: 1; min-height: 250px; font-size: 14px; }
.result-content .result-text {width: 100%; height: 100%; box-sizing: border-box; white-space: pre-wrap; word-wrap: break-word; overflow-y: auto; padding: 15px;}
.result-content .result-btn-box {position: absolute; bottom: 0px; right: 10px;}
.result-content .result-btn-box i {cursor: pointer; margin-left: 3px;}
.result-content .result-btn-box i.disabled {cursor: not-allowed; color: #555; opacity: 0.5;}
.action-buttons {
    display: flex;
    gap: 10px;
}

.action-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.delete-btn {
    background: var(--primary-light);
    color: white;
}

.ai-btn {
    background: #17a2b8;
    color: white;
}

.copy-btn {
    background: #28a745;
    color: white;
}

/* 预览模块样式 */
.preview-box {flex: 1;}
.preview-box .preview-title {max-width: 300px; margin: auto; justify-content: space-between; align-items: center; padding-bottom: 20px; display: none;}
.preview-box .preview-title h2 {font-size: 18px;}
.preview-box .preview-title .preview-modal-close-btn{font-size:20px;color:#888;cursor:pointer;padding:0 5px;}
.preview-section {
    margin: auto;
    max-width: 300px;
    border-radius: 8px;
    height: 600px; /* 设置固定高度 */
    display: flex;
    flex-direction: column;
    background-image: url('https://oss.petslib.cn/prod/static/bwx_pc/assets/images/zxh/note-detail.png');
    background-size: 100% 100%;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 45px;
    padding-left: 24px;
}
.preview-header .mobile-icon-box {
    width: 50%;
    color: #2c2c2c;
    text-align: right;
}
.preview-header svg {
    width: 16px;
}
.preview-header .infor-box {
    width: 50%;
}

.view-mode {
    display: flex;
    gap: 10px;
}

.view-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.view-btn.active {
    background: #f8f9fa;
    border-color: #666;
}

.preview-content {
    border: 1px solid #ddd;
    border-bottom: 0px;
    border-top: 0px;
    overflow: hidden;
    flex-grow: 1; /* 让预览内容区域自动填充剩余空间 */
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.preview-image {
    width: 100%;
    object-fit: cover;
}
.preview-edit {
    font-size: 10px;
    color: #565656;
    padding: 0 10px;
}

.preview-text {
    padding: 10px;
    flex-grow: 1;
    overflow-y: auto; /* 内容过多时可滚动 */
}

.preview-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.preview-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-meta {font-size: 12px; color: #666; white-space: pre-wrap; word-wrap: break-word;}
.preview-comment img {width: 100%;}
.preview-grid.active {display: grid;}

.preview-detail.active {
    display: block;
}

.preview-detail {
    display: none;
}

.user-rights {display: flex; justify-content: space-between;}
.user-rights .item {flex: 1; text-align: center;}
.user-rights .target {font-weight: 400; font-size: 16px;}

/* 会员权益表格样式 */
.rights-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1);border-radius:8px;margin-top:30px;overflow-y:auto}
.features-table{border-collapse: collapse; table-layout: fixed; width: 100%;}
.features-table th:first-child,
.features-table td.cate {
    width: 100px;
    font-weight: 600;
}
.features-table td {height: 50px;}
.features-table th {padding: 15px;}
.features-table th,
.features-table td {
    text-align: center;
    border: 1px solid #eee;
    font-size: 14px;
    color: #333;
}
.features-table th {
    background: #f8f9fa;
    font-weight: 500;
    position: relative;
}
.features-table th:nth-child(2) {
    background: #f0f7ff;
}

.features-table th:nth-child(3) {
    background: #fff1f0;
}

.features-table th:nth-child(4) {
    background: #f6f4ff;
}

.features-table th:nth-child(5) {
    background: #fff7e6;
}

.features-table th:nth-child(6) {
    background: #f9f0ff;
}

.version-tag {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ff4d4f;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
}

.version-subtitle {
    font-size: 12px;
    color: #666;
    font-weight: normal;
    margin-top: 4px;
}

.price {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 8px 0;
}

.price small {
    font-size: 14px;
    font-weight: normal;
}

.original-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}

.upgrade-btn {
    display: inline-block;
    padding: 6px 20px;
    background: #ff4d4f;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 8px;
    font-size: 14px;
}

.features-table tr:nth-child(even) {
    background: #fafafa;
}

.check-icon {
    color: #ff4d4f;
    font-size: 16px;
}

.cross-icon {
    color: #999;
    font-size: 16px;
}

.feature-name {
    text-align: left;
    font-weight: normal;
    padding: 0 5px;
    font-size: 14px;
    color: #333;
}

.near-text {
    color: #ff4d4f;
    font-size: 14px;
}
/** 团队管理 **/
.page-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.page-header h1 {margin: 0; font-size: 24px; font-weight: 600;}
.invite-btn{padding:8px 20px;background:#1890ff;color:white;border:none;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}
.team-table-wrapper {width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.team-table {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    table-layout: fixed;
}

.team-table th:last-child {width: 150px;}
.team-table th {
    background: #f8f9fa;
    font-weight: 500;
    text-align: left;
    padding: 15px;
    font-size: 14px;
    color: #666;
}

.team-table td {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.team-customer {width: 100%; height: 90vh; display: flex;}
.team-customer .team-tips {margin: auto; text-align: center; min-height: 300px;}

.member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-avatar i {
    color: #999;
    font-size: 16px;
}

.status-passed {
    color: #52c41a;
}

.action-confirm {color: var(--primary-blue); margin-right: 10px;}
.action-remove {color: var(--primary-light);}
.pagination{display:flex;justify-content:flex-end;align-items:center;margin-top:20px;gap:10px;font-size:14px}
.pagination .layui-laypage-em {background-color: var(--primary-blue) !important;}
.invite-box {width: 100%; padding: 15px;}
.invite-box .invite-title {display: flex; justify-content:space-between; align-items:center;}
.invite-box .invite-title h1 {font-size: 20px; margin: 0; font-weight: 400;}
.invite-box .invite-way {display: flex; justify-content:space-between; align-items:center; gap: 20px;}
.invite-box .invite-way .item {background-color: #fafafa; padding: 15px; box-sizing: border-box; width: 300px;}
.invite-box .invite-way h2 {font-weight: 400; font-size: 18px;}
.invite-box .invite-way .content {height: 120px;}
.invite-box .invite-way img {height: 120px;}
.team-invite-page {width: 100%; text-align: center;}
.team-invite-page .error-tips {font-size: 20px; height: 30px; line-height: 30px;}
.team-invite-page .invite-word {padding-top: 10%;}
.team-invite-page h1 {font-weight: 400; font-size: 20px; margin-bottom: 10px;}
.team-invite-page .invite-describe {font-size: 16px; margin-bottom: 20px; color: var(--light-text);}
.team-invite-page .invite-content {font-size: 20px; font-weight: 400;}

.layui-vip-modal {border-radius: 12px !important;}
.modal {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 900px;
    position: relative;
    z-index: 1000;
    border-top: 5px solid var(--color-primary);
}

.close-button{position:absolute;top:10px;right:15px;font-size:24px;color:var(--light-text);cursor:pointer;line-height:1;z-index:1001}
.close-button:hover{color:#666}

.tabs {
    display: flex;
    background-color: #f8f8f8;
}

.tab-button {
    flex: 1;
    padding: 15px 20px;
    border: none;
    background-color: #f8f8f8;
    color: var(--light-text);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative; /* Needed for potential pseudo-elements if used later */
}
.tab-button:hover {
    color: var(--color-primary);
}

/* Basic Active Tab - Subtle background */
.tab-button.active[data-plan="basic"] {
    /* Keep a simpler background for basic, maybe slight gradient */
    background: linear-gradient(to bottom, #ffffff, var(--color-basic-bg));
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    border-right: 1px solid #eee;
}

/* Pro Active Tab - Gradient Background */
.tab-button.active[data-plan="pro"] {
    background: linear-gradient(to bottom, var(--color-gradient-top-pro), var(--color-primary));
    color: var(--color-text-white); /* White text on gradient */
    border-bottom-color: var(--color-primary); /* Match bottom border to primary */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Subtle shadow for readability */
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

/* Business Active Tab - Gradient Background */
.tab-button.active[data-plan="business"] {
    background: linear-gradient(to bottom, var(--color-gradient-top-business), var(--color-primary));
    color: var(--color-text-white); /* White text on gradient */
    border-bottom-color: var(--color-primary); /* Match bottom border to primary */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Subtle shadow for readability */
    border-left: 1px solid #eee;
}


.modal-content {
    display: flex;
    /* Background is dynamically applied via JS */
}

.features-column {
    flex: 1;
    padding: 20px 30px;
    border-right: 1px solid var(--color-border);
    transition: background-color 0.3s ease;
    /* Dynamic background set by JS */
}

.feature-list h4 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Match title color to active tab highlight */
#basic-features h4 { color: var(--color-primary); }
/* Make Pro/Business titles maybe slightly darker for contrast on light BG */
#pro-features h4 { color: #555; }
#business-features h4 { color: #555; }


.feature-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px dashed #eee;
}
.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li span:first-child {
    color: var(--light-text);
    flex-shrink: 0;
    margin-right: 10px;
    max-width: 70%;
}

/* Feature value uses the primary theme color */
.feature-list li span:last-child {
    color: var(--color-primary);
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

.pricing-column {
    flex: 1;
    padding: 20px 30px;
    transition: background-color 0.3s ease;
    /* Dynamic background set by JS */
}

.pricing-options {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.pricing-options .option {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.pricing-options .option:hover, .pricing-options .option.active {
    border-color: var(--color-secondary-highlight); /* Use the lighter orange for hover */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pricing-options .duration {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 5px;
}

/* Price uses the primary theme color */
.pricing-options .price {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.pricing-options .monthly-price {
    font-size: 13px;
    color: var(--light-text);
    background-color: #f8f8f8;
    padding: 5px 8px;
    border-radius: 4px;
    display: inline-block;
}
/* Highlighted monthly price uses gradient */
.pricing-options .monthly-price.highlight {
    background: linear-gradient(135deg, var(--color-secondary-highlight), var(--color-primary));
    color: var(--color-text-white);
    font-weight: bold;
}

.payment-section {
    margin-top: 20px;
    text-align: center;
}

.payable-amount {
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: 15px;
}
/* Payable amount value uses the primary theme color */
.payable-amount span {
    font-size: 28px;
    font-weight: bold;
    color: var(--color-primary);
    margin-left: 5px;
}

.payment-method {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 20px;
}
.payment-method img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.qr-code-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.qr-code-area img {
    width: 150px;
    height: 150px;
    border: 1px solid var(--color-border);
    display: block;
    background-color: #fff;
}
.pay-code-box {height: 150px;}

.payment-method-confirm {
    font-size: 13px;
    color: var(--color-wechat);
    display: flex;
    align-items: center;
    gap: 5px;
}
.payment-method-confirm img {
    width: 16px;
    height: 16px;
}

.payment-info {font-size:12px;color:var(--light-text);margin-bottom:10px;padding:0 10px}
.payment-info .customer-qrcode {position: absolute; top: -125px; right: 0; width: 125px;}
.headphone-icon {
    font-size: 14px;
    cursor: pointer;
    color: #007bff;
}

.order-timer {
    font-size: 12px;
    color: var(--light-text);
}
.order-timer span {
    font-weight: bold;
    color: var(--text-color);
}

/** 推广分销 **/
.content-header{display:flex;align-items:center;gap:10px;margin-bottom:25px;padding:15px 20px;background-color:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.platform-tag{background-color:var(--primary-light);color:white;padding:3px 10px;border-radius:4px;font-size:14px;font-weight:bold}
.content-header h2{font-size:18px;font-weight:600;color:#333;display:flex;align-items:center;gap:10px}
.rules-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-bottom:30px}
.rule-card{background-color:#fff;padding:25px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.rule-card h3{font-size:16px;font-weight:600;margin-bottom:10px;color:#333}
.rule-card > p{font-size:14px;color:#555;margin-bottom:15px;line-height:1.5}
.rule-card ul{list-style:none;padding-left:0}
.rule-card li{color:#555;margin-bottom:8px;line-height:1.5;position:relative;padding-left:18px}
.rule-card li::before{content:'•';position:absolute;left:0;top:0;color:var(--primary-light);font-size:16px;line-height:1.5}
.promo-material-section{background-color:#fff;padding:25px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.05);margin-bottom:30px}
.promo-material-section h3{font-size:16px;font-weight:600;margin-bottom:20px;color:#333;border-bottom:1px solid #eee;padding-bottom:15px}
.promo-content{display:flex;gap:30px;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap}
.promo-text{flex:1;min-width:250px}
.promo-tag{background-color:#4a90e2;color:white;padding:5px 12px;border-radius:15px;margin-bottom:15px;display:inline-block;cursor:default}
.promo-text p{font-size:14px;color:#555;line-height:1.6;margin-bottom:10px}
.promo-qr {text-align: center;flex-shrink: 0;}
.promo-qr .code {height: 140px;}
.promo-qr img{width:140px;height:140px;display:block;margin:0 auto 10px auto;border:1px solid #eee}
.promo-qr span{display:block;font-size:12px;color:#888;margin-top:10px;max-width:180px;line-height:1.4}
.promo-link{display:flex;gap:10px;background-color:#f8f9fa;padding:12px 15px;border-radius:4px;border:1px solid #eee}
.promo-link input[type="text"]{flex-grow:1;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;background-color:#fff;color:#555}
.invitation-record-section{background-color:#fff;padding:25px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.invitation-record-section h3{font-size:16px;font-weight:600;margin-bottom:20px;color:#333;border-bottom:1px solid #eee;padding-bottom:15px}
.record-table-container {overflow-x: auto; margin-bottom: 20px;}
.record-table-container table {width: 100%; border-collapse: collapse;}
.record-table-container th, .record-table-container td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}
.record-table-container thead th {background-color: #f8f9fa; font-weight: 600;color: #555;}
.record-table-container tbody tr:hover {background-color: #f5f5f5;}
.record-table-container td.no-data {text-align: center;color: #888;padding: 30px 0;}

/** 登录 **/
#loginModal{width:100%;height:100%;z-index:1100;display:flex;justify-content:center;align-items:center}
#loginModal .modal-content{padding:30px 25px;width:360px;border-radius:8px; display:block;}
#loginModal .modal-close{position:absolute;top:10px;right:15px;font-size:26px;color:var(--light-text);cursor:pointer;line-height:1;padding:0}
#loginModal .modal-close:hover{color:#666}
#loginModal .modal-content h3{text-align:center;margin-bottom:25px;font-size:18px;font-weight:600}
#loginModal .tab-nav{display:flex;margin-bottom:25px;border-bottom:1px solid #eee}
#loginModal .tab-link{flex:1;text-align:center;padding:12px 10px;cursor:pointer;border:none;background:none;font-size:15px;color:#666;border-bottom:3px solid transparent;transition:all 0.3s ease}
#loginModal .tab-link:hover{color:#333}
#loginModal .tab-link.active{color:var(--primary-light);border-bottom-color:var(--primary-light);}
#loginModal .tab-pane{display:none}
#loginModal .tab-pane.active{display:block}
#loginModal .modal-content label{margin-bottom:6px;font-size:13px}
#loginModal .modal-content input[type="text"],
#loginModal .modal-content input[type="password"],
#loginModal .modal-content input[type="tel"] {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s ease-in-out;
}
#loginModal .modal-content input[type="text"]:focus,
#loginModal .modal-content input[type="password"]:focus,
#loginModal .modal-content input[type="tel"]:focus {
    border-color: var(--primary-light);
    outline: none;
}
#loginModal button.loginBtn{margin:15px auto 0;transition:background-color 0.3s ease,opacity 0.3s ease;display:block;}
#loginModal .input-group{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:nowrap}
#loginModal .input-group input,
#loginModal #getCodeBtn{box-sizing:border-box;height:40px;padding:10px 15px;border:1px solid #ccc;font-size:13px;line-height:1}
#loginModal #getCodeBtn i {color: var(--primary-blue); margin-right: 2px; font-weight: 400; font-style: normal;}
#loginModal .input-group input{flex-grow:1;margin:0 !important;border-radius:4px}
#loginModal #getCodeBtn{background-color:#f0f0f0;color:#555;cursor:pointer;flex-shrink:0;white-space:nowrap;border-radius:4px}
#loginModal .login-bottom {text-align: right;}
#loginModal .register-btn {color: var(--primary-blue); cursor: pointer;}

/* 右浮层 */
.right-aside-fixed svg {font-size: 26px;}
.right-aside-fixed{--item-width:50px;--item-height:50px;position:fixed;right:16px;bottom:20vh;box-shadow:0px 0px 10px 1px rgba(175,195,207,0.3);background-color:#fff}
.right-aside-fixed .right-aside-item{display:flex;align-items:center;justify-content:center;width:var(--item-width);height:var(--item-height);background-color:#f5f5f5;border:2px solid #ffffff;font-size:26px;cursor:pointer;color: inherit;}
.right-aside-fixed .right-aside-item:hover{color:#fff !important;background-color:var(--el-color-primary)}
.right-aside-fixed .back-to-top{display:none}
.right-aside-fixed .contact-us:hover img {display: block !important;}
/* right-aside-fixed end */

/** 爆款标题 **/
.generator-container { display: flex; flex-direction: row; gap: 25px; align-items: stretch; }
.generator-container .left-column { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 350px; }
.generator-container .input-section { background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); border: 1px solid #eee; width: 100%; }
.generator-container .intermediate-output-section { background-color: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #e9ecef; width: 100%; display: block; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
.generator-container .output-section { background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); border: 1px solid #eee; flex: 1; min-width: 350px; display: flex; flex-direction: column; }

/* Section Titles */
.input-section h2, .output-section h2, .intermediate-output-section h3 { font-size: 18px; color: #333; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.intermediate-output-section h3 { font-size: 16px; color: #495057; border-bottom-color: #ced4da; }

/* Intermediate Text */
#intermediateText { font-family: monospace; position:relative; font-size: 13px; color: #343a40; white-space: pre-wrap; height: 140px; overflow-y: auto; line-height: 1.7; }
#intermediateText .note-item { padding-left: 10px; margin-bottom: 3px; }
#intermediateText .highlight { font-weight: bold; color: #0d6efd; }

/* Final Output Area */
.output-area {
    padding: 0; font-size: 14px;
    flex: 1;
    /*height: 602px;*/
    min-height: 602px;
    max-height: calc(80vh - 150px);
    overflow-y: auto;
    line-height: 1.7;
    position: relative;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    overflow-y: auto;
}
.loading-placeholder { text-align: center; color: #888; padding: 40px 0; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 80%; font-size: 14px; }
.loading-placeholder i { margin-right: 8px; }

/* Styles for the Temporary Simulation Text */
#finalOutputSimulationText {
    font-family: monospace; font-size: 13px; color: #343a40; white-space: pre-wrap;
    padding: 15px; line-height: 1.7;
}
#finalOutputSimulationText .sim-title { font-weight: bold; color: #0d6efd; margin-top: 8px; display: block; }
#finalOutputSimulationText .sim-justification { color: #6c757d; padding-left: 15px; margin-bottom: 8px; display: block; }


/* Final Title List Styles (No Checkbox) */
#finalTitleList { list-style: none; padding: 0; margin: 0; max-height: inherit; }
#finalTitleList li {
    padding: 12px 15px; /* Adjusted padding */
    border-bottom: 1px solid #eee;
    position: relative;
    background-color: #fff;
    transition: background-color 0.2s ease;
}
#finalTitleList li:last-child { border-bottom: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
#finalTitleList li:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
#finalTitleList li:hover { background-color: #f1f3f5; }
.list-item-title { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 5px; line-height: 1.5; padding-right: 120px; /* Space for buttons */ }
.list-item-justification { display: block; font-size: 12px; color: #6c757d; line-height: 1.5; padding-left: 5px; margin-bottom: 8px; /* Add margin below justification */ }
.list-item-justification a {color: #2900ee;}
/* Styles for Per-Item Action Buttons (Color Change) */
.item-actions {
    position: absolute;
    right: 10px;
    top: 10px; /* Position near the top right */
    display: flex;
    gap: 8px;
}
.item-action-btn {
    background-color: #ff4757; color: white; border: none;
    border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer;
    transition: all 0.2s ease; display: inline-flex; align-items: center;
    gap: 3px; font-weight: 500; opacity: 0.9;
}
.item-action-btn:hover:not(:disabled) { background-color: #e03c4a; opacity: 1; }
.item-action-btn:disabled { background-color: #fcc2c7; cursor: not-allowed; opacity: 0.7; }
.item-action-btn i { font-size: 10px; }
.item-action-btn.copied { background-color: #4caf50; color: white; border: none; }


/* Input elements styling - unchanged */
.mode-selector { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.mode-button { padding: 8px 15px; font-size: 14px; background-color: #f0f0f0; color: #555; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; font-weight: 500; }
.mode-button:hover { background-color: #e0e0e0; }
.mode-button.active { background-color: #fff1f1; color: var(--primary-light); border-color: #ffdddd; }
.mode-button i { margin-right: 5px; }
label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #555; }
#mainInput { width: 100%; padding: 10px 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.2s ease-in-out; min-height: 120px; resize: vertical; }
#mainInput:focus { border-color: #ff4757; outline: none; }
.input-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 15px; flex-wrap: wrap; }
#imageUploadContainer { display: flex; gap: 10px; align-items: center; }
#uploadImageBtn { padding: 6px 12px; font-size: 13px; background-color: #eee; color: #555; border: 1px solid #ccc; cursor: pointer; border-radius: 4px; }
#imagePreview { font-size: 13px; color: #888; font-style: italic; }
button.generator-button { background-color: #ff4757; color: white; padding: 12px 25px; border: none; border-radius: 4px; cursor: pointer; font-size: 15px; margin-top: 10px; transition: background-color 0.3s ease, opacity 0.3s ease; font-weight: bold; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
button.generator-button:hover:not(:disabled) { background-color: #e03c4a; }
button.generator-button:disabled { background-color: #fcc2c7; cursor: not-allowed; opacity: 0.7; }
#remainingCountDiv { margin-top: 15px; text-align: center; font-size: 13px; color: #888; }
#remainingCountDiv i { margin-right: 5px; }


/* Style for Regenerate Button - Unchanged */
.regenerate-container {
    text-align: center; margin-top: 20px; padding-top: 15px;
    border-top: 1px solid #eee; display: none;
}
#regenerateBtn {
    background-color: #6c757d; color: white; padding: 9px 20px;
    border: none; border-radius: 4px; cursor: pointer; font-size: 14px;
    transition: background-color 0.3s ease; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
}
#regenerateBtn:hover { background-color: #5a6268; }

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 15px rgba(0,0,0,0.2); }
    .sidebar.active { transform: translateX(0); }
    .sidebar .sidebar-close-btn { display: block; }

    /* --- Mobile Header --- */
    header { width: 100%; left: 0; }
    .header-content .menu-spread {display: flex;}
    .menu-toggle-btn { display: block; }
    .header-content { padding: 0 15px; }

    /* --- Mobile Main Wrapper --- */
    .main-wrapper { margin-left: 0;}
    .main-content { padding: 20px 15px; }

    /* 我的团队 */
    .team-table-wrapper {border-radius: 6px;}
    .team-table{min-width:750px;}
    .member-info { gap: 8px; min-width: 130px; }
    .pagination{margin-top:20px;justify-content:center;flex-wrap:wrap}

    /** 违禁词 **/
    .content-columns {flex-direction: column; gap: 15px;}
    .content-columns .preview-open-btn {display: block;}
    .preview-section {display: none;}
    .layui-vip-modal .preview-box {padding-bottom: 15px;}
    .layui-vip-modal .preview-title {display: flex !important; padding: 15px 0;}
    .layui-vip-modal .preview-section {display: flex !important;}

    /** 权益 **/
    .features-table th:first-child, .features-table td.cate {display: none;}
    .features-table {min-width: 700px;}
    .features-table td.feature-name {background: #fff;}
    .features-table tr:nth-child(even) td.feature-name {
        background: #fafafa;
    }
    .features-table tr td.feature-name:nth-of-type(1),
    .features-table tr.row-cate td:nth-of-type(2),
    .features-table th:nth-of-type(2) {
        position: sticky; left: 0; z-index: 1; box-shadow:0 2px 4px rgba(0,0,0,0.1);
    }
    .features-table tr td.feature-name:nth-of-type(1):after,
    .features-table tr.row-cate td:nth-of-type(2):after,
    .features-table th:nth-of-type(2):after {
        position: absolute; top: 0; right:-1px; border-right: 1px solid #eee; height: 100%; content: "";
    }
    .modal { width: 100%;}
    .modal .modal-content { flex-direction: column; overflow-y: auto; height: calc(100vh - 180px);}
    .modal .features-column { border-right: none; border-bottom: 1px solid var(--color-border); padding: 15px 20px; }
    .modal .pricing-column { padding: 15px 20px; }
    .modal .tabs { flex-wrap: wrap; }
    .modal .tab-button { font-size: 14px; padding: 12px 10px; }
    .modal .pricing-options { flex-direction: column; gap: 10px; }
    .modal .feature-list li span:first-child { max-width: 60%; }
    .modal .payable-amount span { font-size: 24px; }
    .modal .qr-code-area img { width: 130px; height: 130px; }
    .modal .close-button {top: -5px; right: 3px;}

    /* 爆款标题 */
    .generator-container {display: block;}
    .generator-container .output-section {margin-top: 20px;}
}

@media (max-width: 768px) {
    /* 我的团队 */
    .invite-box .invite-way {flex-direction: column;}
}