/* Shared styles for the Aug-2026 "next 20 tools" batch (Cropper/Filters/Censor, CSS generators,
   Color tools, Social mockup generators, JSON Tree Viewer, Code Formatter, OG Meta Generator).
   Kept as one small hand-written stylesheet rather than duplicating <style> blocks per template. */

.tool-chip {
    padding: .4rem .85rem;
    border-radius: .65rem;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: 1px solid var(--line-strong, #e2e8f0);
    color: var(--ink-muted, #475569);
    background: transparent;
    cursor: pointer;
    transition: .15s;
}
.tool-chip:hover { background: var(--muted, #f1f5f9); }
.tool-chip.is-active { background: var(--brand, #2f76ff); border-color: var(--brand, #2f76ff); color: #fff; }

.tool-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    border: 1px solid var(--line-strong, #e2e8f0);
    color: var(--ink-muted, #475569);
    background: transparent;
    cursor: pointer;
    transition: .15s;
}
.tool-icon-btn:hover { background: var(--muted, #f1f5f9); color: var(--ink, #0f172a); }

.bg-checkerboard {
    background-color: #ffffff;
    background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
        linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f5f5f5 75%),
        linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
.dark .bg-checkerboard {
    background-color: #1a1d26;
    background-image: linear-gradient(45deg, #252836 25%, transparent 25%),
        linear-gradient(-45deg, #252836 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #252836 75%),
        linear-gradient(-45deg, transparent 75%, #252836 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* Image Cropper */
.crop-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 2px solid #2f76ff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* CSS Clip-Path Generator */
.cp-point {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    background: #fff;
    border: 2px solid #2f76ff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    z-index: 2;
}
#cp-stage.hide-guides .cp-point { display: none; }

/* CSS Cubic Bezier Generator */
.bez-handle {
    cursor: grab;
}
.bez-handle:active { cursor: grabbing; }

/* Shared range-slider look (site standard, matches Screenshot Editor / PDF Editor):
   blue fill up to the current value, theme-aware track for the remainder, surface-colored
   (white in light mode) circular thumb with a subtle border. Requires class="se-range" on the
   <input type="range">, plus range-fill-shared.js included on the page to keep --se-range-pct in
   sync with the current value (drives the fill gradient below). */
input[type="range"].se-range {
    --se-range-pct: 0%;
    -webkit-appearance: none;
    appearance: none;
    /* width intentionally not forced -- every current usage on this site pairs se-range with
       its own Tailwind width class (w-full, w-24, w-28, flex-1); editor-toolbar.css's version
       forces width:100% because its sliders don't specify one, but that would clobber ours. */
    height: 6px;
    background: linear-gradient(
        to right,
        #2f76ff 0%,
        #2f76ff var(--se-range-pct),
        rgb(var(--color-border-strong)) var(--se-range-pct),
        rgb(var(--color-border-strong)) 100%
    );
    border: none;
    border-radius: 999px;
    outline: none;
    accent-color: #2f76ff;
}

input[type="range"].se-range:focus {
    outline: none;
}

input[type="range"].se-range::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(
        to right,
        #2f76ff 0%,
        #2f76ff var(--se-range-pct),
        rgb(var(--color-border-strong)) var(--se-range-pct),
        rgb(var(--color-border-strong)) 100%
    );
    border: none;
    border-radius: 999px;
}

input[type="range"].se-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    background: rgb(var(--color-surface));
    border: 1.5px solid rgb(var(--color-text-subtle));
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="range"].se-range::-webkit-slider-thumb:hover {
    background: rgb(var(--color-muted));
    border-color: rgb(var(--color-text-subtle));
}

input[type="range"].se-range:active::-webkit-slider-thumb,
input[type="range"].se-range::-webkit-slider-thumb:active {
    background: rgb(var(--color-border-strong));
    border-color: rgb(var(--color-text-subtle));
}

input[type="range"].se-range::-moz-range-track {
    height: 6px;
    background: rgb(var(--color-border-strong));
    border: none;
    border-radius: 999px;
}

input[type="range"].se-range::-moz-range-progress {
    height: 6px;
    background: #2f76ff;
    border: none;
    border-radius: 999px;
}

input[type="range"].se-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: rgb(var(--color-surface));
    border: 1.5px solid rgb(var(--color-text-subtle));
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="range"].se-range:hover::-moz-range-thumb {
    background: rgb(var(--color-muted));
}

input[type="range"].se-range:active::-moz-range-thumb {
    background: rgb(var(--color-border-strong));
}