/* ToolPetal Discord GIF compressor (page styles) */
.dg [hidden] { display: none !important; }
.dg { --dg-amber: #f2b632; --dg-amber-ink: #3a2a00; padding: var(--sp-4); }
@media (min-width: 720px) { .dg { padding: var(--sp-5); } }
.dg-step { padding: 0 0 var(--sp-5); margin: 0 0 var(--sp-5); border-bottom: 1px solid var(--line); }
#dg-step3 { border-bottom: 0; margin-bottom: var(--sp-3); padding-bottom: 0; }
.dg-h { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.dg-num { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: var(--fs-sm); font-weight: 700; flex-shrink: 0; }
.dg-drop { padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.dg-dropicon { width: 2.25rem; height: 2.25rem; color: var(--muted); }
.dg-choose { font-size: var(--fs-md); min-height: 52px; padding: 0.6rem 1.75rem; border-radius: 14px; }
.dg-drophint { margin: 0; font-size: var(--fs-sm); }
.dg-picked { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.dg-picked.drag { border-color: var(--rose-600); }
.dg-picked img { width: 88px; height: 88px; object-fit: contain; border-radius: 10px; background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 12px 12px; flex-shrink: 0; }
.dg-pinfo { min-width: 0; }
.dg-pname { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-pmeta { margin: 0.1rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.dg-change { padding-left: 0; padding-right: 0; margin-top: 0.15rem; }
.dg-msg { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: 12px; font-size: var(--fs-sm); font-weight: 500; }
.dg-msg.bad { background: var(--danger-50); color: var(--danger); }
.dg-msg.warn { background: var(--warn-50); color: var(--warn); }
.dg-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.dg-preset { grid-column: span 2; }
.dg-preset:nth-child(n+4) { grid-column: span 3; }
@media (min-width: 720px) { .dg-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); } .dg-preset, .dg-preset:nth-child(n+4) { grid-column: auto; } }
.dg-preset { flex-direction: column; gap: 0.2rem; min-height: 96px; padding: 0.7rem 0.4rem; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 14px; font-weight: 600; text-align: center; }
.dg-preset:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-ui); }
.dg-preset svg { width: 1.75rem; height: 1.75rem; color: var(--muted); }
.dg-pt { font-size: var(--fs-base); line-height: 1.2; }
.dg-ps { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); line-height: 1.2; }
.dg-preset[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--surface-2); }
.dg-preset[aria-checked="true"] svg { color: var(--ink); }
.dg-sub { margin: var(--sp-4) 0 0; }
.dg-sublabel { margin: 0 0 var(--sp-2); font-weight: 600; font-size: var(--fs-sm); }
.dg-seg { display: flex; border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 3px; gap: 3px; background: var(--surface-2); }
.dg-seg button { flex: 1 1 0; flex-direction: column; gap: 0; min-height: 52px; padding: 0.35rem 0.3rem; background: transparent; color: var(--ink); border: 0; border-radius: 11px; font-size: var(--fs-sm); line-height: 1.25; }
.dg-seg button span { font-weight: 500; font-size: var(--fs-xs); color: var(--muted); }
.dg-seg button:hover { background: var(--surface); color: var(--ink); }
.dg-seg button[aria-checked="true"] { background: var(--surface); box-shadow: var(--sh-sm), 0 0 0 1.5px var(--ink); }
.dg-note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.dg-go { width: 100%; min-height: 58px; font-size: var(--fs-md); border-radius: 14px; }
@media (min-width: 720px) { .dg-go { width: auto; min-width: 16rem; padding: 0 2.5rem; } }
.dg-gohint { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.dg-progress { margin: var(--sp-4) 0 0; }
.dg-track-bar { height: 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.dg-track-bar i { display: block; height: 100%; width: 0; background: var(--sage-700); border-radius: inherit; transition: width 0.3s ease; }
.dg-ptext { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ink); }
.dg-result { margin: var(--sp-5) 0 0; scroll-margin-top: calc(var(--header-h) + var(--sp-3)); }
.dg-verdict, .dg-live { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: 14px; font-weight: 700; font-size: var(--fs-md); line-height: 1.35; }
.dg-verdict.ok, .dg-live.ok { background: var(--sage-50); color: var(--sage-700); }
.dg-verdict.bad, .dg-live.bad { background: var(--danger-50); color: var(--danger); font-size: var(--fs-base); }
.dg-verdict.est, .dg-live.est { opacity: 0.85; }
.dg-live.est:not(.ok):not(.bad) { background: var(--surface-2); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.dg-vi { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: currentColor; flex-shrink: 0; font-size: 0.95rem; }
.dg-verdict.ok .dg-vi, .dg-live.ok .dg-vi { color: var(--sage-700); }
.dg-vi { color: inherit; }
.dg-verdict .dg-vi, .dg-live .dg-vi { -webkit-text-fill-color: var(--surface); }
.dg-sizes { margin: var(--sp-3) 0; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.dg-pct { display: inline-block; font-size: var(--fs-sm); font-weight: 600; color: var(--sage-700); background: var(--sage-50); border-radius: 99px; padding: 0.05rem 0.55rem; vertical-align: middle; }
.dg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.dg-compare figure { margin: 0; min-width: 0; }
.dg-imgbox { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; }
.dg-imgbox img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: auto; }
.dg-compare figcaption { margin-top: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-align: center; }
@media (min-width: 720px) { .dg-imgbox { aspect-ratio: auto; height: 280px; } }
.dg-dl { width: 100%; min-height: 58px; font-size: var(--fs-md); gap: var(--sp-2); border-radius: 14px; }
.dg-dl svg { width: 1.3rem; height: 1.3rem; }
@media (min-width: 720px) { .dg-dl { width: auto; min-width: 16rem; padding: 0 2.5rem; } }
.dg-dl.is-disabled { opacity: 0.6; cursor: progress; }
.dg-checks { list-style: none; padding: 0; margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }
.dg-checks li { margin: 0.2rem 0; }
.dg-checks li.ok span { color: var(--sage-700); font-weight: 700; }
.dg-checks li.bad { color: var(--danger); font-weight: 600; }
.dg-did { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.dg-table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.dg-table th, .dg-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
.dg-table thead th { color: var(--muted); font-weight: 600; }
.dg-fine { margin: var(--sp-5) 0 0; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
.dg-fine > summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); font-weight: 700; font-size: var(--fs-base); }
.dg-fine > summary::-webkit-details-marker { display: none; }
.dg-fine > summary span { font-weight: 500; color: var(--muted); font-size: var(--fs-sm); }
.dg-fine > summary::after { content: ""; margin-left: auto; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s; }
.dg-fine[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dg-finebody { padding: 0 var(--sp-4) var(--sp-4); }
.dg-live { font-size: var(--fs-base); }
.dg-ctl { margin: var(--sp-5) 0 0; }
.dg-ctlhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-2); }
.dg-ctlhead label, .dg-ctllabel { margin: 0; font-weight: 700; font-size: var(--fs-base); }
.dg-ctlhead output { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.dg input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--ink); touch-action: pan-y; }
.dg-ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }
.dg-trimcap { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.dg-pvbox { display: flex; justify-content: center; margin: 0 0 var(--sp-3); padding: var(--sp-2); border-radius: 12px; background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; border: 1px solid var(--line); }
.dg-pvbox canvas { display: block; max-width: 100%; max-height: 200px; width: auto; height: auto; image-rendering: auto; }
.dg-trim { padding: 0 22px; }
.dg-trackwrap { position: relative; height: 60px; touch-action: none; user-select: none; -webkit-user-select: none; }
.dg-strip { position: absolute; inset: 4px 0; width: 100%; height: 52px; border-radius: 4px; background: var(--surface-2); }
.dg-dim { position: absolute; top: 4px; bottom: 4px; background: rgba(20, 16, 18, 0.62); pointer-events: none; }
.dg-dim-l { left: 0; border-radius: 4px 0 0 4px; }
.dg-dim-r { right: 0; border-radius: 0 4px 4px 0; }
.dg-sel { position: absolute; top: 0; bottom: 0; border-top: 4px solid var(--dg-amber); border-bottom: 4px solid var(--dg-amber); pointer-events: none; }
.dg-playhead { position: absolute; top: 2px; bottom: 2px; width: 3px; margin-left: -1.5px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.45); pointer-events: none; }
.dg-handle { position: absolute; top: 0; bottom: 0; width: 22px; background: var(--dg-amber); cursor: ew-resize; touch-action: none; display: grid; place-items: center; }
.dg-hs { margin-left: -22px; border-radius: 8px 0 0 8px; }
.dg-he { border-radius: 0 8px 8px 0; }
.dg-handle i { display: block; width: 4px; height: 22px; border-radius: 2px; background: var(--dg-amber-ink); opacity: 0.75; }
.dg-handle::before { content: ""; position: absolute; inset: -8px -10px; }
.dg-handle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; z-index: 2; }
.dg-handle.is-drag { filter: brightness(1.08); }
.dg-trimhint { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.dg-autofit { width: 100%; margin-top: var(--sp-5); min-height: 50px; }
@media (min-width: 720px) { .dg-autofit { width: auto; } }
.dg-lib { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.dg-lib a { text-decoration: underline; }
.dg-tablewrap { overflow-x: auto; }
.dg-limits { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--sp-3) 0; }
.dg-limits th, .dg-limits td { border: 1px solid var(--line); padding: 0.45rem 0.65rem; text-align: left; vertical-align: top; }
.dg-limits th { background: var(--surface-2); }
.dg-affil { font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-6); }
.dg-more { margin: var(--sp-4) 0 0; }
.dg-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.dg-nw { white-space: nowrap; }
/* Make background transparent */
.dg-bgrow { margin: var(--sp-4) 0 0; }
.dg-switch { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-4); border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); cursor: pointer; position: relative; }
.dg-switch:hover { background: var(--surface-2); }
.dg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dg-switch-track { flex-shrink: 0; width: 46px; height: 28px; border-radius: 99px; background: var(--line-strong); position: relative; transition: background 0.15s; }
.dg-switch-track i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: var(--sh-sm); transition: transform 0.15s; }
.dg-switch input:checked + .dg-switch-track { background: var(--ink); }
.dg-switch input:checked + .dg-switch-track i { transform: translateX(18px); }
.dg-switch input:focus-visible + .dg-switch-track { outline: var(--focus); outline-offset: var(--focus-offset); }
.dg-switch:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--surface-2); }
.dg-switch-text { display: flex; flex-direction: column; min-width: 0; }
.dg-switch-title { font-weight: 700; font-size: var(--fs-base); line-height: 1.3; }
.dg-switch-sub { font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
.dg-bgmsg { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: 12px; font-size: var(--fs-sm); background: var(--surface-2); color: var(--ink); }
.dg-bgmsg.ok { background: var(--sage-50); color: var(--sage-700); font-weight: 600; }
.dg-bgmsg.warn { background: var(--warn-50); color: var(--warn); }
.dg-bgmsg.busy { color: var(--muted); }
.dg-swatch { flex-shrink: 0; width: 1.1rem; height: 1.1rem; border-radius: 5px; border: 1px solid var(--line-ui); }
.dg-view { margin: 0 0 var(--sp-3); }
.dg-view button { min-height: 44px; }
.dg-result[data-view="dark"] .dg-imgbox, .dg-pvbox[data-view="dark"] { background: #313338; border-color: #313338; }
.dg-result[data-view="light"] .dg-imgbox, .dg-pvbox[data-view="light"] { background: #ffffff; }