/* ToolPetal Discord banner resizer and server icon maker. Builds on discord-gif.css (v2) and discord-emoji.css (v1). */
.da-cropgrid { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .da-icon .da-cropgrid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; } }
.da-stagebox { width: 100%; min-width: 0; }
.da-stage { display: block; max-width: 100%; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line-strong); touch-action: none; background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; }
.da-icon .da-stage { border-radius: 14px; }
.da-stage.can-pan { cursor: grab; }
.da-stage.is-drag { cursor: grabbing; }
.da-stage:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.da-guide { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.da-target { margin: 0 0 var(--sp-2); font-weight: 600; }
.da-small { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--warn); }
.da-segwrap { display: grid; gap: var(--sp-2); }
.da-seglabel { margin: 0; font-weight: 600; font-size: var(--fs-sm); }
.da-ctls .dg-seg button { min-height: 48px; }
/* previews */
.da-previews { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.da-pv { border-radius: 12px; padding: 0.85rem; border: 1px solid var(--line); min-width: 0; overflow: hidden; }
.da-pv.dark { background: #313338; color: #dbdee1; border-color: #1e1f22; }
.da-pv.light { background: #f2f3f5; color: #313338; }
.da-pv p.de-ptitle { margin: 0 0 0.6rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.da-out { display: block; max-width: 100%; height: auto; }
.da-out.px { image-rendering: pixelated; }
/* profile card mock */
.da-card { max-width: 340px; border-radius: 10px; overflow: hidden; background: #232428; }
.da-pv.light .da-card { background: #fff; }
.da-card .da-out { width: 100%; aspect-ratio: 17 / 6; object-fit: cover; }
.da-card-body { position: relative; padding: 46px 14px 14px; }
.da-ava { position: absolute; left: 14px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 6px solid #232428; background: #5865f2; }
.da-pv.light .da-ava { border-color: #fff; }
.da-card-body b { display: block; font-size: 18px; }
.da-card-body span { font-size: 13px; opacity: 0.7; }
/* server sidebar mock */
.da-side { width: 240px; max-width: 100%; border-radius: 8px; overflow: hidden; background: #2b2d31; }
.da-pv.light .da-side { background: #fff; }
.da-side-top { position: relative; }
.da-side-top .da-out { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.da-side-top b { position: absolute; left: 0; right: 0; top: 0; padding: 12px 14px; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.da-side ul { list-style: none; margin: 0; padding: 8px 8px 10px; font-size: 14px; opacity: 0.75; }
.da-side li { padding: 4px 6px; }
.da-wide { margin-top: var(--sp-2); }
.da-wide .da-out { width: 100%; border-radius: 8px; }
/* icon mocks */
.da-icons { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.da-icons figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.da-icons figcaption { font-size: 11px; opacity: 0.75; white-space: nowrap; }
.da-i128 { width: 128px; height: 128px; border-radius: 50%; }
.da-i80 { width: 80px; height: 80px; border-radius: 50%; }
.da-i48 { width: 48px; height: 48px; border-radius: 50%; }
.da-i48sq { width: 48px; height: 48px; border-radius: 16px; }
.da-i32 { width: 32px; height: 32px; border-radius: 50%; }
.da-rail { display: inline-flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #1e1f22; }
.da-pv.light .da-rail { background: #e3e5e8; }
.da-rail i { display: block; width: 48px; height: 48px; border-radius: 50%; background: #3f4147; }
.da-pv.light .da-rail i { background: #c4c9ce; }
#da-step3 { border-bottom: 0; margin-bottom: var(--sp-3); padding-bottom: 0; }