@charset "UTF-8";
.fv-dropzone { position: relative; border: 2px dashed var(--border-color); border-radius: var(--tool-radius); padding: 34px 16px; text-align: center; cursor: pointer; transition: var(--tool-transition); background: var(--alt-content-bg-color); }
.fv-dropzone.dragover { border-color: var(--tool-accent); background: var(--content-bg-color); }
.fv-dropzone p { margin: 6px 0; }
.fv-sub { opacity: 0.7; font-size: 0.9rem; }
.fv-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fv-controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-top: 18px; }
.fv-shape { width: 150px; }
.fv-shape .tool-select { height: 40px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.fv-bg { display: flex; align-items: center; gap: 10px; }
.fv-color-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fv-swatch { width: 52px; height: 40px; padding: 0; border: 1px solid var(--border-color); border-radius: var(--tool-radius-sm); background: #fff; cursor: pointer; }
.fv-swatch.is-transparent { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23e03131' stroke-width='6'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; }
.fv-bg-reset { background: none; border: none; color: var(--tool-accent); font-size: 0.85rem; cursor: pointer; padding: 0; text-decoration: underline; }
.fv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; align-items: stretch; }
.fv-cell { display: flex; flex-direction: column; text-align: center; background: var(--alt-content-bg-color); border: 1px solid var(--border-color); border-radius: var(--tool-radius); padding: 14px 10px; }
.fv-imgwrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 96px; }
.fv-cell img { image-rendering: auto; background:
    linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; border-radius: 4px; }
.fv-cell .fv-label { font-weight: 600; font-size: 0.85rem; margin: 10px 0 6px; }
.fv-cell .btn { width: 100%; margin-top: auto; }
.fv-snippet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fv-snippet-head .tool-card__title { margin: 0; }
.fv-snip-note { font-size: 0.88rem; opacity: 0.85; margin: 10px 0; }
.fv-snip-note code, .fv-about code { background: var(--alt-content-bg-color); padding: 1px 5px; border-radius: 4px; font-size: 0.85rem; }
.fv-snippet { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--tool-radius-sm); padding: 12px; font-family: 'Courier New', monospace; font-size: 0.85rem; white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
.fv-about p { margin: 0 0 12px; }