/* =====================================================
   在线PNG图片查看工具 - online_png_viewer.css
   ===================================================== */

/* 容器 */
.opv-container {
    padding: 0 !important;
}

/* ===== Tab 导航 ===== */
.opv-tab-nav {
    display: flex;
    border-bottom: 2px solid #e8eaf6;
    background: linear-gradient(to bottom, #f8f9ff, #f3f5fc);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.opv-tab-btn {
    padding: 13px 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #667;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.opv-tab-btn:hover {
    color: #1565C0;
    background: rgba(25, 118, 210, 0.06);
}

.opv-tab-btn.active {
    color: #1565C0;
    border-bottom-color: #1565C0;
    font-weight: 600;
    background: rgba(25, 118, 210, 0.04);
}

/* ===== Tab 内容 ===== */
.opv-tab-content {
    display: none;
    padding: 20px;
}

.opv-tab-content.opv-active {
    display: block;
    animation: opv-fadein 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes opv-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.opv-hidden {
    display: none !important;
}

/* ===== 上传区域 ===== */
#opvFileInput {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.opv-upload-area {
    text-align: center;
    border: 2px dashed #90CAF9;
    border-radius: 16px;
    padding: 64px 24px;
    background: linear-gradient(145deg, #f8fbff, #eef4ff);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
    overflow: hidden;
}

.opv-upload-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(25,118,210,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.opv-upload-area:hover,
.opv-upload-area.drag-over {
    border-color: #1565C0;
    background: linear-gradient(145deg, #e3f2fd, #ddeeff);
    transform: scale(1.005);
    box-shadow: 0 8px 28px rgba(25, 118, 210, 0.14);
}

.opv-upload-icon {
    font-size: 64px;
    margin-bottom: 14px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(25,118,210,0.2));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.opv-upload-area:hover .opv-upload-icon {
    transform: translateY(-4px) scale(1.05);
}

.opv-upload-text {
    font-size: 18px;
    font-weight: 600;
    color: #1e2a4a;
    margin-bottom: 8px;
}

.opv-upload-hint {
    font-size: 13px;
    color: #8a9bb0;
    margin-bottom: 22px;
    line-height: 1.5;
}

.opv-upload-paste-hint {
    font-size: 12px;
    color: #a0b0c8;
    margin-top: 12px;
}

/* ===== 工作区 ===== */
.opv-workspace {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: opv-fadein 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 工具栏 ===== */
.opv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(to right, #f5f7fa, #edf0f8);
    border-radius: 10px;
    border: 1px solid #e0e4f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.opv-toolbar .button,
.opv-toolbar .secondary,
.opv-toolbar .third {
    padding: 5px 12px;
    font-size: 12px;
}

.opv-toolbar-sep {
    width: 1px;
    height: 22px;
    background: #d0d8ea;
    margin: 0 4px;
}

.opv-shortcut-hint {
    font-size: 11px;
    color: #99a;
    margin-left: 6px;
    white-space: nowrap;
    opacity: 0.8;
}

/* 按鈕激活态 */
.opv-btn-active {
    background: #1565C0 !important;
    color: #fff !important;
    border-color: #1565C0 !important;
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25) !important;
}

/* ===== 主体布局 ===== */
.opv-main {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.opv-preview-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opv-side-pane {
    width: 274px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== 背景选择器 ===== */
.opv-bg-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    background: linear-gradient(to right, #f5f7fa, #edf0f8);
    border-radius: 10px;
    border: 1px solid #e0e4f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.opv-bg-label {
    font-size: 12px;
    color: #556;
    font-weight: 600;
    white-space: nowrap;
}

.opv-bg-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 2px solid rgba(0,0,0,0.12);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    outline: none;
    padding: 0;
    position: relative;
}

.opv-bg-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
    border-color: rgba(0,0,0,0.25);
}

.opv-bg-btn.active {
    border-color: #1565C0;
    box-shadow: 0 0 0 3px rgba(21,101,192,0.32);
    transform: scale(1.1);
}

/* 棋盘格背景按鈕 */
.opv-bg-checker {
    background-image:
            linear-gradient(45deg, #aaa 25%, transparent 25%),
            linear-gradient(-45deg, #aaa 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #aaa 75%),
            linear-gradient(-45deg, transparent 75%, #aaa 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-color: #fff;
}

.opv-bg-white   { background-color: #fff; border-color: #ccc; }
.opv-bg-black   { background-color: #1a1a2e; }
.opv-bg-grey    { background-color: #888; }
.opv-bg-red     { background-color: #f44336; }
.opv-bg-green   { background-color: #4caf50; }
.opv-bg-blue    { background-color: #2196f3; }

.opv-bg-custom-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid #dde3f0;
}

.opv-bg-custom-label {
    font-size: 11px;
    color: #778;
    font-weight: 500;
}

#opvBgCustomColor {
    width: 28px;
    height: 28px;
    border: 2px solid #c8d0e0;
    border-radius: 7px;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color 0.2s, transform 0.2s;
}

#opvBgCustomColor:hover {
    border-color: #1565C0;
    transform: scale(1.1);
}

/* ===== Canvas 预览 ===== */
.opv-canvas-wrap {
    border-radius: 12px;
    overflow: auto;
    text-align: center;
    line-height: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(0,0,0,0.06);
    min-height: 140px;
    max-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: crosshair;
    padding: 12px;
}

/* 棋盘格透明背景 (CSS pattern) */
.opv-canvas-wrap.bg-checker {
    background-image:
            linear-gradient(45deg, #b0b0b0 25%, transparent 25%),
            linear-gradient(-45deg, #b0b0b0 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #b0b0b0 75%),
            linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #e8e8e8;
}

.opv-canvas-wrap.bg-white  { background-color: #ffffff; }
.opv-canvas-wrap.bg-black  { background-color: #1a1a2e; }
.opv-canvas-wrap.bg-grey   { background-color: #888888; }
.opv-canvas-wrap.bg-red    { background-color: #f44336; }
.opv-canvas-wrap.bg-green  { background-color: #4caf50; }
.opv-canvas-wrap.bg-blue   { background-color: #2196f3; }
.opv-canvas-wrap.bg-custom { background-color: var(--opv-custom-bg, #ffffff); }

#opvCanvas {
    max-width: 100%;
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 缩放控制栏 ===== */
.opv-zoom-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: linear-gradient(to right, #f5f7fa, #edf0f8);
    border: 1px solid #e0e4f0;
    border-radius: 8px;
    font-size: 12px;
    color: #556;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.opv-zoom-bar button {
    padding: 3px 10px;
    font-size: 14px;
    font-weight: 700;
    background: #e8eaf6;
    border: 1px solid #c5cae9;
    border-radius: 5px;
    cursor: pointer;
    color: #3949ab;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.4;
    min-width: 28px;
    text-align: center;
}

.opv-zoom-bar button:hover {
    background: #c5cae9;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(57,73,171,0.2);
}

.opv-zoom-val {
    min-width: 48px;
    text-align: center;
    font-weight: 700;
    color: #3949ab;
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* 图片尺寸显示 */
.opv-zoom-dim {
    font-size: 11px;
    color: #99a;
    margin-left: auto;
    white-space: nowrap;
    font-family: 'Courier New', Consolas, monospace;
    opacity: 0.85;
}

/* ===== 像素检测提示条 ===== */
.opv-pixel-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(to right, #f0f4ff, #edf1ff);
    border: 1px solid #c5cae9;
    border-radius: 10px;
    font-size: 12px;
    color: #444;
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(57,73,171,0.1);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.opv-pixel-indicator:hover {
    border-color: #7986cb;
    background: linear-gradient(to right, #e8edff, #e4eaff);
}

/* 大色块：棋盘格底层 + 颜色叠加显示透明 */
.opv-pixel-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    /* 棋盘格作为透明像素的底层显示 */
    background-image:
            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: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-color: #fff;
}

.opv-pixel-color-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--opv-pixel-bg, transparent);
}

.opv-pixel-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.opv-pixel-hex {
    font-size: 14px;
    font-weight: 700;
    color: #1a237e;
    font-family: 'Courier New', Consolas, monospace;
    letter-spacing: 0.05em;
}

.opv-pixel-coord {
    font-size: 11px;
    color: #778;
    font-family: 'Courier New', Consolas, monospace;
}

.opv-pixel-rgba {
    font-size: 11px;
    color: #556;
    font-family: 'Courier New', Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opv-pixel-copy-tip {
    font-size: 10px;
    color: #7986cb;
    white-space: nowrap;
    padding: 2px 6px;
    background: #e8eaf6;
    border-radius: 10px;
    align-self: center;
    flex-shrink: 0;
}

/* ===== 侧边信息面板 ===== */
.opv-section {
    background: #fff;
    border: 1px solid #e4e9f5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.opv-section:hover {
    box-shadow: 0 4px 14px rgba(57,73,171,0.1);
}

.opv-section-title {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #3949ab;
    background: linear-gradient(to right, #eef1ff, #f0f3ff);
    border-bottom: 1px solid #dde3f5;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.01em;
}

.opv-section-body {
    padding: 12px 14px;
}

/* ===== 图片信息表格 ===== */
.opv-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.opv-info-table tr {
    border-bottom: 1px solid #f0f3fa;
    transition: background 0.15s;
}

.opv-info-table tr:hover {
    background: #f8f9ff;
}

.opv-info-table tr:last-child {
    border-bottom: none;
}

.opv-info-table td {
    padding: 6px 4px;
    vertical-align: middle;
}

.opv-info-table td:first-child {
    color: #7986cb;
    width: 70px;
    font-size: 11px;
    font-weight: 600;
}

.opv-info-table td:last-child {
    color: #1e2a4a;
    font-weight: 500;
    word-break: break-all;
    font-size: 12px;
}

/* ===== 透明度统计 ===== */
.opv-alpha-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opv-alpha-bar-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
}

.opv-alpha-bar-label {
    width: 46px;
    color: #778;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 11px;
}

.opv-alpha-bar-track {
    flex: 1;
    height: 9px;
    background: #e8eaf6;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}

.opv-alpha-bar-fill {
    height: 100%;
    border-radius: 5px;
    width: 0%;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.opv-alpha-bar-pct {
    width: 36px;
    text-align: right;
    color: #3949ab;
    font-weight: 700;
    font-size: 11px;
}

.opv-alpha-bar-fill.fill-opaque    { background: linear-gradient(to right, #43a047, #66bb6a); }
.opv-alpha-bar-fill.fill-semi      { background: linear-gradient(to right, #f57c00, #ffa726); }
.opv-alpha-bar-fill.fill-transparent { background: linear-gradient(to right, #9e9e9e, #bdbdbd); }

/* 透明度条形图宽度通过CSS变量动态设置 */
#opvAlphaBarOpaque    { width: var(--opv-bar-opaque, 0%); }
#opvAlphaBarSemi      { width: var(--opv-bar-semi, 0%); }
#opvAlphaBarTrans     { width: var(--opv-bar-trans, 0%); }

/* 像素颜色预览块颜色通过CSS变量动态设置 */
.opv-pixel-color-block {
    background: var(--opv-pixel-bg, transparent);
}

/* 使用提示列表 */
.opv-tips-list {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    line-height: 2.1;
    color: #556;
}

.opv-tips-list li::marker {
    color: #7986cb;
}

/* Toast 淡出隐藏态（配合 showToast 动画） */
.opv-toast-hiding {
    opacity: 0 !important;
}

/* ===== 快捷操作 ===== */
.opv-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
}

.opv-quick-actions .button,
.opv-quick-actions .secondary,
.opv-quick-actions .third {
    flex: 1;
    font-size: 12px;
    padding: 6px 8px;
    min-width: 74px;
    text-align: center;
}

/* ===== Toast 通知 ===== */
.opv-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(26, 32, 58, 0.95);
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: calc(100vw - 40px);
    white-space: nowrap;
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    letter-spacing: 0.01em;
}

.opv-toast.opv-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== AI 分析 Tab ===== */
.opv-ai-intro {
    background: linear-gradient(135deg, #eff3ff, #e8eeff);
    border: 1px solid #c5cae9;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 13px;
    color: #3949ab;
    margin-bottom: 18px;
    line-height: 1.7;
    box-shadow: 0 2px 8px rgba(57,73,171,0.08);
}

.opv-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.opv-form-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.opv-form-row label {
    font-size: 13px;
    font-weight: 600;
    color: #3949ab;
}

.opv-required {
    color: #e53935;
}

.opv-textarea {
    width: 100%;
    border: 1.5px solid #c5cae9;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #1e2a4a;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.6;
    background: #fafbff;
}

.opv-textarea:focus {
    outline: none;
    border-color: #3949ab;
    box-shadow: 0 0 0 3px rgba(57,73,171,0.14);
    background: #fff;
}

.opv-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* AI快捷问题 */
.opv-quick-questions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.opv-quick-q-label {
    font-size: 12px;
    color: #778;
    width: 100%;
    font-weight: 600;
    margin-bottom: 2px;
}

.opv-quick-q-btn {
    padding: 6px 13px;
    font-size: 12px;
    border: 1px solid #c5cae9;
    border-radius: 20px;
    background: linear-gradient(135deg, #f0f3ff, #eaeeff);
    color: #3949ab;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-weight: 500;
}

.opv-quick-q-btn:hover {
    background: linear-gradient(135deg, #e8eaf6, #dde2ff);
    border-color: #3949ab;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(57,73,171,0.15);
}

/* AI 加载中 */
.opv-ai-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    font-size: 14px;
    color: #3949ab;
    margin-top: 12px;
    background: linear-gradient(135deg, #eff3ff, #e8eeff);
    border-radius: 10px;
    border: 1px solid #c5cae9;
}

.opv-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #c5cae9;
    border-top-color: #3949ab;
    border-radius: 50%;
    animation: opv-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes opv-spin {
    to { transform: rotate(360deg); }
}

/* AI 结果 */
.opv-ai-result {
    margin-top: 18px;
    background: #f8f9ff;
    border: 1px solid #c5cae9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(57,73,171,0.1);
    animation: opv-fadein 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.opv-ai-result-title {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #3949ab;
    background: linear-gradient(to right, #e8eaf6, #eef1ff);
    border-bottom: 1px solid #c5cae9;
    letter-spacing: 0.02em;
}

.opv-ai-result-body {
    padding: 16px 18px;
    font-size: 13px;
    color: #1e2a4a;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 当前图片信息摘要（发绚AI的参考） */
.opv-ai-image-summary {
    margin-top: 14px;
    background: linear-gradient(135deg, #fffde7, #fff8e1);
    border: 1px solid #ffe082;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #6d4c00;
    box-shadow: 0 2px 6px rgba(255,193,7,0.12);
}

.opv-ai-image-summary .opv-ai-summary-title {
    font-weight: 700;
    margin-bottom: 5px;
    color: #e65100;
    font-size: 12px;
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
    .opv-side-pane {
        width: 244px;
    }
}

@media (max-width: 768px) {
    .opv-main {
        flex-direction: column;
    }

    .opv-side-pane {
        width: 100%;
    }

    .opv-tab-btn {
        font-size: 13px;
        padding: 11px 18px;
    }

    .opv-canvas-wrap {
        max-height: 55vh;
    }

    .opv-quick-actions .button,
    .opv-quick-actions .secondary,
    .opv-quick-actions .third {
        min-width: 68px;
    }
}

@media (max-width: 640px) {
    .opv-tab-content {
        padding: 12px;
    }

    .opv-upload-area {
        padding: 40px 16px;
    }

    .opv-upload-icon {
        font-size: 48px;
    }

    .opv-upload-text {
        font-size: 15px;
    }

    .opv-toolbar {
        gap: 4px;
        padding: 8px 10px;
    }

    .opv-toolbar .button,
    .opv-toolbar .secondary,
    .opv-toolbar .third {
        font-size: 11px;
        padding: 4px 8px;
    }

    .opv-shortcut-hint {
        display: none;
    }

    .opv-bg-selector {
        gap: 5px;
        padding: 7px 10px;
    }

    .opv-canvas-wrap {
        max-height: 45vh;
        padding: 8px;
    }

    .opv-pixel-indicator {
        gap: 8px;
        padding: 6px 10px;
    }

    .opv-pixel-color-swatch {
        width: 28px;
        height: 28px;
    }

    .opv-pixel-hex {
        font-size: 12px;
    }

    .opv-pixel-rgba {
        display: none;
    }

    .opv-quick-actions .button,
    .opv-quick-actions .secondary,
    .opv-quick-actions .third {
        min-width: unset;
        width: 100%;
        flex: none;
    }

    .opv-toast {
        padding: 10px 16px;
        font-size: 13px;
        bottom: 16px;
        left: 12px;
        right: 12px;
        max-width: calc(100vw - 24px);
        transform: translateX(0) translateY(12px);
        white-space: normal;
        text-align: center;
    }

    .opv-toast.opv-toast-show {
        transform: translateX(0) translateY(0);
    }

    .opv-zoom-bar button {
        padding: 3px 7px;
        font-size: 12px;
        min-width: 24px;
    }
}