/* v32 tutorial component, scoped to avoid changing shared pages. */
.dc-tutorial{ padding:18px 14px 6px; }
.dc-tutorial h1{ font-size:24px; line-height:1.3; }
.dc-tutorial .intro{ color:#5a6b7a; font-size:14px; line-height:1.7; margin-top:8px; }
.dc-tutorial .codecard{ background:#fff8e1; border:1px solid #f0dfa8; border-radius:14px; padding:14px; margin-top:16px; text-align:center; }
.dc-tutorial .codecard .label{ font-size:13px; color:#7a5b00; }
.dc-tutorial .codecard .code{ font-size:30px; font-weight:800; letter-spacing:2px; margin-top:6px; }
.dc-tutorial .codecard .hint{ font-size:12.5px; color:#7a5b00; margin-top:6px; }
.dc-tutorial .cardnote{ font-size:13px; color:#5a6b7a; line-height:1.7; margin-top:10px; text-align:center; }
.dc-tutorial .step{ display:flex; gap:12px; padding:16px 0 0; }
.dc-tutorial .step .num{ flex:none; width:28px; height:28px; border-radius:50%; background:#2e7ce6; color:#fff; font-size:15px; font-weight:700; text-align:center; line-height:28px; }
.dc-tutorial .step .sbody{ flex:1; min-width:0; }
.dc-tutorial .step .stitle{ font-size:16px; font-weight:700; }
.dc-tutorial .step .sdesc{ font-size:14px; color:#5a6b7a; line-height:1.7; margin-top:4px; }
.dc-tutorial .checks{ margin-top:6px; }
.dc-tutorial .ck{ display:flex; gap:9px; font-size:14px; line-height:1.6; color:#3d4c5a; margin-top:10px; }
.dc-tutorial .ck .tick{ flex:none; width:20px; height:20px; border-radius:50%; background:#1a7f37; color:#fff; font-size:12px; font-weight:700; text-align:center; line-height:20px; margin-top:1px; }
.dc-tutorial .ck.warn{ color:#b3261e; }
.dc-tutorial .ck.warn .tick{ background:#e43b2f; }
.dc-tutorial .promo{ background:#fff; border:1px solid #d5d9d9; border-radius:8px; padding:14px 16px; margin-top:10px; }
.dc-tutorial .promo-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px; color:#0f1111; }
.dc-tutorial .toggle{ flex:none; width:48px; height:27px; background:#007185; border-radius:999px; position:relative; }
.dc-tutorial .toggle .knob{ position:absolute; top:3px; right:3px; width:21px; height:21px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.dc-tutorial .promo-label{ font-size:16px; font-weight:700; color:#0f1111; margin-top:14px; }
.dc-tutorial .promo-input{ margin-top:8px; border:1px solid #888c8c; border-radius:9px; padding:4px; }
.dc-tutorial .promo-input.single{ padding:0; border-color:#a6a6a6; border-radius:8px; }
.dc-tutorial .promo-input.single .promo-code{ display:block; padding:11px 14px; min-height:48px; }
.dc-tutorial .promo-input.invalid{ border-color:#cc0c39; }
.dc-tutorial .promo-input-in{ border:1px solid #a6a6a6; border-radius:6px; padding:11px 14px; display:flex; justify-content:space-between; align-items:center; min-height:48px; }
.dc-tutorial .promo-input.invalid .promo-input-in{ border-color:#cc0c39; }
.dc-tutorial .promo-code{ font-size:18px; color:#0f1111; }
.dc-tutorial .promo-arrow{ font-size:24px; color:#0f1111; line-height:1; }
.dc-tutorial .cursor{ display:inline-block; width:2px; height:21px; background:#007185; vertical-align:-3px; margin-left:2px; }
.dc-tutorial .promo-msg{ display:flex; gap:8px; margin-top:10px; font-size:15px; line-height:1.45; color:#0f1111; }
.dc-tutorial .promo-msg .msg-icon{ flex:none; width:22px; height:22px; border-radius:50%; background:#007185; color:#fff; font-size:14px; font-weight:700; text-align:center; line-height:22px; margin-top:1px; }
.dc-tutorial .promo-msg.error{ color:#cc0c39; }
.dc-tutorial .promo-msg.error .msg-icon{ background:#cc0c39; }
.dc-tutorial .linkstrip{ background:#fff; border:1px solid #d5d9d9; border-radius:8px; padding:12px 16px; margin-top:10px; }
.dc-tutorial .llink{ color:#007185; font-size:15px; line-height:1.7; }
.dc-tutorial .ordersum{ background:#fff; border:1px solid #d5d9d9; border-radius:12px; padding:14px 16px; margin-top:10px; }
.dc-tutorial .orderbtn{ background:#ffd814; border:1px solid #fcd200; border-radius:999px; text-align:center; font-size:17px; color:#0f1111; padding:13px; }
.dc-tutorial .sumdiv{ height:1px; background:#d5d9d9; margin:14px -16px 0; }
.dc-tutorial .sumrow{ display:flex; justify-content:space-between; font-size:15.5px; color:#0f1111; margin-top:10px; }
.dc-tutorial .sumrow.total{ font-weight:700; font-size:17px; }
.dc-tutorial .cap{ font-size:12.5px; color:#8a97a5; margin-top:6px; line-height:1.5; }
.dc-tutorial .box{ border-radius:12px; padding:14px; margin-top:16px; font-size:14px; line-height:1.8; }
.dc-tutorial .box h2{ font-size:16px; margin-bottom:6px; }
.dc-tutorial .box.warn{ background:#fff5f2; border:1px solid #f5c6c0; }
.dc-tutorial .box.info{ background:#e8f1fe; border:1px solid #c3d9f8; }
.dc-tutorial .box ul{ padding-left:18px; }
.dc-tutorial .back{ display:block; background:#2e7ce6; color:#fff; text-align:center; border-radius:10px; padding:14px; font-size:16px; font-weight:700; margin:18px 0 6px; }
.dc-tutorial{width:min(100%,640px);margin:0 auto;padding:18px 14px 6px;background:#fff;color:#1c2733;line-height:1.5}
.dc-tutorial *{box-sizing:border-box}
.dc-tutorial h1,.dc-tutorial h2,.dc-tutorial p{margin:0}
.dc-tutorial .codecard input{display:block;width:100%;min-width:0;padding:0;border:0;border-radius:0;background:transparent;color:#1c2733;text-align:center;font:inherit;font-size:30px;font-weight:700;letter-spacing:2px;user-select:all;-webkit-user-select:all}
.dc-tutorial .codecard input[hidden],.dc-tutorial [hidden]{display:none!important}
.dc-tutorial .codecard [data-dc-generic-code]{font-size:14px;line-height:1.7;letter-spacing:0}
.dc-tutorial .codecard a{color:#1467c8;text-decoration:underline}
.dc-tutorial .box ul{margin:8px 0 0}
.dc-tutorial .promo-code{overflow-wrap:anywhere;min-width:0}
.dc-tutorial [data-dc-tutorial-status]:empty{display:none}
.dc-tutorial [data-dc-tutorial-status]{margin:10px 0;color:#738093;font-size:13px;line-height:1.6}
.dc-tutorial .sumrow{gap:12px}
.dc-tutorial .sumrow>span:first-child{min-width:0}
.dc-tutorial .sumrow>span:last-child{flex:none;white-space:nowrap}
.dc-tutorial .back{color:#fff}
@media(max-width:359px){.dc-tutorial .promo{padding:12px}.dc-tutorial .sumrow{font-size:14px}.dc-tutorial .promo-head{font-size:14px}}