/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

/* ============================================================
   P6. 使用教程 (Sweet Tutorial) — 针对性拉伸 / 动作图解
   设计：波浪线标注 + 步骤流 + 手绘标注感
   配色：薰衣草粉渐变，与甜酷主题统一
   ============================================================ */
.sweet-tutorial-module .sweet-section-icon {
    background: linear-gradient(135deg, var(--macaron-pink), var(--macaron-hot-pink));
}
.sweet-tutorial-content {
    padding: 12px var(--macaron-padding-x) 22.5px;
}
.sweet-tutorial-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sweet-tutorial-step {
    display: flex;
    align-items: center;
    gap: 16px;
}
/* 步骤数字 — 薰衣草粉渐变圆 */
.step-number {
    width: calc(34px * var(--scale-factor, 1));
    height: calc(34px * var(--scale-factor, 1));
    border-radius: 50%;
    background: linear-gradient(135deg, var(--macaron-pink), var(--macaron-hot-pink));
    color: #ffffff;
    font-size: calc(17px * var(--scale-factor, 1));
    font-weight: var(--bold-weight, 200);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    font-family: var(--bold-font), sans-serif !important;
    box-shadow: 0 3px 10px rgba(244, 143, 177, 0.3);
}
.step-body {
    flex: 1;
    padding-top: 3px;
}
.step-title {
    font-size: calc(24px * var(--scale-factor, 1));
    font-weight: 100;
    color: var(--macaron-text);
    font-family: var(--bold-font), sans-serif !important;
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.step-desc {
    font-size: calc(22px * var(--scale-factor, 1));
    color: var(--macaron-text-light);
    line-height: 1.5;
    font-weight: 100;
}
/* 手绘手账风提示框 */
.sweet-tutorial-tip {
    margin-top: 28px;
    padding: calc(18px * var(--scale-factor, 1)) calc(12px * var(--scale-factor, 1));
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(253, 237, 242, 0.9));
    border-radius: 16px;
    border: 2px dashed rgba(244, 143, 177, 0.5);
    box-shadow: 0 4px 12px rgba(244, 143, 177, 0.08);
    display: flex;
    align-items: center;
    gap: calc(10px * var(--scale-factor, 1));
    position: relative;
}
.tip-icon {
    font-size: calc(20px * var(--scale-factor, 1));
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(244, 143, 177, 0.3));
}
.tip-text {
    font-size: calc(20px * var(--scale-factor, 1));
    color: var(--macaron-text-light);
    font-weight: 100;
    line-height: 1.6;
    position: relative;
    z-index: 2;
    flex: 1;
    word-break: break-word;
}