/* ===== tool-wrapper (base) ===== */
.tool-wrapper.redact-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2d3748;
}

/* ===== Upload Area (shared pattern) ===== */
.upload-area {
    border: 2px dashed #cbd5e0;
    border-radius: 0.9rem;
    padding: 2.4rem 1.5rem;
    text-align: center;
    cursor: pointer;
    background: #fafbfc;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 1.5rem;
}
.upload-area:hover, .upload-area.dragover { border-color: #3182ce; background: #ebf8ff; }
.upload-icon { font-size: 2.6rem; color: #cbd5e0; margin-bottom: 0.6rem; }
.upload-text { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.3rem; }
.upload-hint { color: #718096; font-size: 0.85rem; margin-bottom: 1rem; }
.upload-btn {
    background: #3182ce; color: #fff; border: none; padding: 0.55rem 1.4rem;
    border-radius: 2rem; font-weight: 600; cursor: pointer; display: inline-flex;
    align-items: center; gap: 0.4rem;
}
.upload-btn:hover { background: #2b6cb0; }

/* ===================================================== */
/* Redact App shell                                       */
/* ===================================================== */
.redact-app {
    border: 1px solid #d7dde5;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
}
.redact-app:fullscreen {
    border-radius: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin-bottom: 0;
}
.redact-app:fullscreen .redact-viewport {
    flex: 1;
    max-height: none;
}
.redact-app:-webkit-full-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.redact-app:-webkit-full-screen .redact-viewport {
    flex: 1;
    max-height: none;
}

/* ===== Top Toolbar ===== */
.app-toolbar {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    background: #f7f8fa;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem 0.7rem;
    position: relative;
    z-index: 5;
}
.toolbar-group { display: flex; align-items: center; gap: 0.25rem; }
.toolbar-sep { width: 1px; height: 1.5rem; background: #e2e8f0; margin: 0 0.35rem; flex: 0 0 auto; }
.toolbar-sep-push { margin-left: auto; }

.icon-btn {
    width: 2.1rem; height: 2.1rem; border-radius: 0.4rem;
    border: 1px solid transparent; background: transparent; color: #4a5568;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s; flex: 0 0 auto; font-size: 0.95rem;
}
.icon-btn:hover { background: #edf2f7; border-color: #e2e8f0; }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
.icon-btn.active, .icon-btn.tool-toggle.active {
    background: #3182ce; color: #fff; border-color: #3182ce;
}
.icon-btn.active:hover, .icon-btn.tool-toggle.active:hover { background: #2b6cb0; }
.icon-btn.btn-danger-icon:hover { background: #fff5f5; color: #c53030; border-color: #feb2b2; }
.icon-btn-primary { background: #3182ce; color: #fff; border-color: #3182ce; }
.icon-btn-primary:hover { background: #2b6cb0; color: #fff; }

.zoom-value { font-size: 0.78rem; font-weight: 600; color: #4a5568; min-width: 40px; text-align: center; }

.page-indicator {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.85rem; font-weight: 600; color: #4a5568;
}
.page-input-num {
    width: 2.6rem; text-align: center; padding: 0.25rem 0.2rem;
    border: 1px solid #cbd5e0; border-radius: 0.35rem; font-size: 0.85rem;
    font-weight: 600; color: #2d3748;
}
.page-input-num::-webkit-inner-spin-button,
.page-input-num::-webkit-outer-spin-button { opacity: 0.6; }

/* ===== Width dropdown ===== */
.dropdown-wrap { position: relative; }
.dropdown-panel {
    position: absolute; top: calc(100% + 6px); left: 0;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 0.8rem 0.9rem;
    min-width: 210px; z-index: 40;
}
.width-panel label {
    font-size: 0.8rem; font-weight: 600; color: #4a5568;
    display: block; margin-bottom: 0.4rem;
}
.width-panel input[type="range"] { width: 100%; accent-color: #3182ce; }

/* ===== Color dropdown ===== */
.color-swatch-btn { padding: 0; }
.color-swatch-dot {
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: #000000; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e0;
    display: inline-block;
}
.color-panel label {
    font-size: 0.8rem; font-weight: 600; color: #4a5568;
    display: block; margin-bottom: 0.5rem;
}
.color-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.color-preset {
    width: 1.6rem; height: 1.6rem; border-radius: 50%; cursor: pointer;
    border: 2px solid #e2e8f0; padding: 0; transition: transform 0.1s, border-color 0.1s;
}
.color-preset:hover { transform: scale(1.1); }
.color-preset.active { border-color: #3182ce; box-shadow: 0 0 0 2px rgba(49,130,206,0.25); }
.color-presets input[type="color"] {
    width: 1.6rem; height: 1.6rem; border: none; border-radius: 50%;
    padding: 0; cursor: pointer; background: none;
}
.color-presets input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-presets input[type="color"]::-webkit-color-swatch { border: 2px solid #e2e8f0; border-radius: 50%; }
.color-hint { font-size: 0.72rem; color: #a0aec0; margin: 0.6rem 0 0; line-height: 1.4; max-width: 220px; }

/* ===== Canvas Viewport (dark, native-viewer look) ===== */
.redact-viewport {
    background: #2b2b2b;
    min-height: 480px;
    max-height: 76vh;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
}
.redact-page-wrap {
    background: transparent;
    line-height: 0;
    box-shadow: 0 2px 14px rgba(0,0,0,0.5);
    flex: 0 0 auto;
}
.redact-page-wrap canvas {
    display: block;
    background: #fff;
}
.redact-page-wrap canvas.cursor-crosshair { cursor: crosshair; }
.redact-page-wrap canvas.cursor-grab { cursor: grab; }
.redact-page-wrap canvas.cursor-grabbing { cursor: grabbing; }
.redact-page-wrap canvas.cursor-default { cursor: default; }
.redact-page-wrap canvas.cursor-move { cursor: move; }

/* ===== Status text (shared) ===== */
.compression-stats {
    background: #f7fafc; padding: 0.5rem 1rem; border-radius: 0.5rem;
    margin-bottom: 1rem; font-size: 0.95rem; color: #4a5568;
}

/* ===== Hidden ===== */
.hidden { display: none !important; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
    .app-toolbar { justify-content: center; }
    .toolbar-sep-push { margin-left: 0; }
    .redact-viewport { padding: 12px; min-height: 360px; }
}