/* TurtlePic Help Center: article building blocks (editor + article pages). */
:root {
	--tphc-mint: #03f7b5;
	--tphc-amber: #ffb547;
	--tphc-card: rgba(127, 127, 140, 0.08);
	--tphc-line: rgba(127, 127, 140, 0.25);
}

/* Steps are numbered automatically, in order of appearance */
.editor-styles-wrapper, .tphc-doc__body { counter-reset: tphc-step; }
.tphc-step { counter-increment: tphc-step; margin: 2.25em 0; }
.tphc-step > h2 { display: flex; align-items: center; gap: 12px; }
.tphc-step > h2::before {
	content: counter(tphc-step);
	flex: 0 0 32px; height: 32px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 600; color: var(--tphc-mint);
	background: rgba(3, 247, 181, 0.1); border: 1px solid rgba(3, 247, 181, 0.5);
}

.tphc-shot img, .tphc-step .wp-block-image img {
	border-radius: 14px; border: 1px solid var(--tphc-line); width: 100%; height: auto;
}

.tphc-before {
	background: var(--tphc-card); border: 1px solid var(--tphc-line);
	border-radius: 16px; padding: 18px 22px;
}
.tphc-before h4 { margin-top: 0; }
.tphc-before ul li::marker { color: var(--tphc-mint); }

.tphc-tip, .tphc-note {
	border-left: 3px solid var(--tphc-mint); background: rgba(3, 247, 181, 0.06);
	border-radius: 12px; padding: 14px 18px; margin: 1.25em 0;
}
.tphc-tip p > strong:first-child { color: var(--tphc-mint); }
.tphc-note { border-left-color: var(--tphc-amber); background: rgba(255, 181, 71, 0.07); }
.tphc-note p > strong:first-child { color: var(--tphc-amber); }

.tphc-next ul { list-style: none; padding-left: 0; }
.tphc-next li::before { content: "→ "; color: var(--tphc-mint); }