.tutorial-card { max-width: 760px; margin: 0 auto; }
.tutorial-heading { display: flex; align-items: center; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid rgba(109,40,217,.12); }
.tutorial-heading .section-title, .tutorial-heading .section-subtitle { margin: 0; }
.mini-logo { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(139,92,246,.12); font-size: 26px; }
.tutorial-content { padding: 24px 2px; color: #393453; line-height: 1.85; }
.tutorial-content h1, .tutorial-content h2, .tutorial-content h3 { color: #1e1b4b; line-height: 1.3; }
.tutorial-content h1 { font-size: 25px; }
.tutorial-content h2 { font-size: 21px; }
.tutorial-content p { margin: 10px 0; white-space: pre-wrap; }
.tutorial-content li { margin: 7px 0; }
.upload-section { padding-top: 24px; border-top: 1px solid rgba(109,40,217,.12); }
.upload-section h2 { margin: 0 0 8px; }
.privacy-note { color: #047857; font-size: 14px; }
.upload-box { display: grid; place-items: center; gap: 6px; min-height: 155px; margin-top: 16px; padding: 20px; border: 2px dashed rgba(139,92,246,.35); border-radius: 18px; color: var(--purple-dark); background: rgba(139,92,246,.055); cursor: pointer; transition: .2s ease; }
.upload-box:hover { transform: translateY(-2px); border-color: var(--purple); background: rgba(139,92,246,.09); }
.upload-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); font-size: 28px; font-weight: 300; }
.upload-box small { color: var(--muted); }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.preview { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 12px; background: #ede9fe; }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; color: white; background: rgba(17,24,39,.78); cursor: pointer; }
.reveal { margin-top: 24px; padding: 24px; text-align: center; border-radius: 18px; background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(139,92,246,.1)); border: 1px solid rgba(16,185,129,.2); }
.success-mark { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; color: #fff; background: #10b981; font-size: 26px; }
.reveal p { margin: 8px 0; color: var(--muted); }
.password-value { margin: 12px 0 18px; color: var(--purple-dark); font: 800 30px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 3px; overflow-wrap: anywhere; }
.copy-status { min-height: 20px; font-size: 13px; }

@media (max-width: 620px) { .tutorial-heading { align-items: flex-start; } .password-value { font-size: 24px; } }