doodle-mini/miniprogram/supportPages/guide/guide.less

@import '../../style/theme.less';

page {
    min-height: 100%;
    background: @bg-header;
}

.guide-page {
    min-height: 100vh;
    background: @bg-header;
    box-sizing: border-box;
}

.guide-page__body {
    padding: @section-gap-xs @page-padding-x;
    padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

/* Hero 主卡（参考 profile-hero） */
.guide-page__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80rpx @page-padding-inner-x 56rpx;
    background: @bg-white;
    border-radius: @radius-xl;
    border: 1rpx solid rgba(124, 118, 106, 0.12);
    box-shadow: @shadow;
    overflow: hidden;
    margin-bottom: @section-gap-xs;
}

.guide-page__hero-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 192rpx;
    background: @brand;
    opacity: 0.1;
    pointer-events: none;
}

.guide-page__hero-icon-wrap {
    position: relative;
    width: 144rpx;
    height: 144rpx;
    border-radius: 50%;
    background: @brand;
    border: 8rpx solid @bg-white;
    box-shadow: @shadow;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-top: 16rpx;
}

.guide-page__hero-icon {
    font-size: 72rpx;
    line-height: 1;
}

.guide-page__hero-title {
    margin-top: 32rpx;
    font-size: 40rpx;
    font-weight: 800;
    color: @text-title;
    text-align: center;
    line-height: 1.2;
}

.guide-page__hero-sub {
    margin-top: 16rpx;
    font-size: 24rpx;
    font-weight: 600;
    color: @text-secondary;
    text-align: center;
    letter-spacing: 0.04em;
}

/* 步骤时间线卡片 */
.guide-page__steps {
    position: relative;
    padding: 56rpx 40rpx 16rpx;
    background: @bg-white;
    border-radius: @radius-xl;
    border: 1rpx solid rgba(124, 118, 106, 0.12);
    box-shadow: @shadow;
    margin-bottom: @section-gap-xs;
    box-sizing: border-box;
}

.guide-page__timeline-line {
    position: absolute;
    left: 70rpx;
    top: 110rpx;
    bottom: 110rpx;
    width: 4rpx;
    background: @bg-gray;
    z-index: 0;
}

.guide-page__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    margin-bottom: 56rpx;
}

.guide-page__step--last {
    margin-bottom: 40rpx;
}

.guide-page__step-num-wrap {
    flex-shrink: 0;
    width: 64rpx;
    margin-right: 32rpx;
    display: flex;
    justify-content: center;
}

.guide-page__step-num {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background: @brand;
    font-size: 30rpx;
    font-weight: 800;
    color: @text-selected-btn;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: @shadow;
}

.guide-page__step-body {
    flex: 1;
    padding-top: 4rpx;
    min-width: 0;
}

.guide-page__step-title {
    display: block;
    font-size: 32rpx;
    font-weight: 700;
    color: @text-title;
    margin-bottom: 16rpx;
}

.guide-page__step-desc {
    display: block;
    font-size: 26rpx;
    color: @text-secondary;
    line-height: 1.6;
    margin-bottom: 20rpx;
}

/* 通用 Tip（弱提示） */
.guide-page__tip {
    background: @bg-header;
    border-radius: @radius;
    padding: 20rpx 24rpx;
    font-size: 24rpx;
    color: @text-secondary;
    line-height: 1.55;
    border: 1rpx solid rgba(124, 118, 106, 0.12);
}

.guide-page__tip-line {
    display: block;
    margin-bottom: 8rpx;
}

.guide-page__tip-line:last-child {
    margin-bottom: 0;
}

/* 相册权限提示卡 */
.guide-page__perm {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 24rpx 28rpx;
    border-radius: @radius;
    background: fade(@brand, 18%);
    border: 1rpx solid fade(@brand, 36%);
    box-sizing: border-box;
}

.guide-page__perm--granted {
    background: fade(@brand, 12%);
    border-color: fade(@brand, 28%);
}

.guide-page__perm--denied {
    background: fade(@brand, 22%);
    border-color: fade(@brand, 50%);
}

.guide-page__perm-icon-wrap {
    flex-shrink: 0;
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    background: @bg-white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    box-shadow: @shadow;
}

.guide-page__perm-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.guide-page__perm-title {
    display: block;
    font-size: 26rpx;
    font-weight: 700;
    color: @text-title;
    line-height: 1.4;
}

.guide-page__perm-desc {
    display: block;
    margin-top: 8rpx;
    font-size: 24rpx;
    color: @text-secondary;
    line-height: 1.55;
}

.guide-page__perm-btn {
    align-self: flex-start;
    margin-top: 20rpx;
    padding: 14rpx 32rpx;
    border-radius: 999rpx;
    background: @brand;
    color: @text-selected-btn;
    font-size: 24rpx;
    font-weight: 700;
    box-shadow: @shadow;
    line-height: 1;
}

/* FAQ */
.guide-page__faq-title {
    font-size: @fs-section-head-title;
    font-weight: 800;
    color: @text-title;
    padding: 16rpx 8rpx 24rpx;
}

.guide-page__faq {
    display: flex;
    flex-direction: column;
}

.guide-page__faq-item {
    background: @bg-white;
    border-radius: @radius-lg;
    border: 1rpx solid rgba(124, 118, 106, 0.12);
    padding: 32rpx 36rpx;
    margin-bottom: 24rpx;
    box-sizing: border-box;
}

.guide-page__faq-item--last {
    margin-bottom: 0;
}

.guide-page__faq-q {
    display: block;
    font-size: 28rpx;
    font-weight: 700;
    color: @text-title;
    margin-bottom: 12rpx;
}

.guide-page__faq-a {
    display: block;
    font-size: 26rpx;
    color: @text-secondary;
    line-height: 1.6;
}