/**
 * NP Template Editor Styles
 * Version: 2.0.0
 */

/* ============================================
   Base Styles
   ============================================ */

.npte-editor {
    /* Themeable via the admin Appearance page (overridden as inline CSS custom properties). */
    --npte-header-bg: #ffffff;
    --npte-header-fg: #444444;
    --npte-accent: #0073aa;
    --npte-accent-fg: #ffffff;
    --npte-editor-height: 80vh;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    /* Front-end: fill the embedded space. Admin overrides to flex-fill 100vh. */
    display: flex;
    flex-direction: column;
    height: var(--npte-editor-height, 80vh);
    min-height: 540px;
}

/* Front-end display layout (set by the shortcode / Appearance default). "full" breaks out of the
   theme's content column to span the viewport, like the admin editor. */
.npte-editor.npte-layout-full {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: var(--npte-editor-height, 90vh);
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.npte-editor *,
.npte-editor *::before,
.npte-editor *::after {
    box-sizing: border-box;
}

/* ============================================
   Top Toolbar
   ============================================ */

.npte-top-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--npte-header-bg, #fff);
    color: var(--npte-header-fg, #444);
    border-bottom: 1px solid #ddd;
    gap: 16px;
}
.npte-top-toolbar .npte-dimensions { color: inherit; opacity: 0.85; }

.npte-toolbar-left,
.npte-toolbar-center,
.npte-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.npte-toolbar-center {
    flex: 1;
    justify-content: center;
}

.npte-dimensions {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

/* Snap Controls */
.npte-snap-controls {
    display: flex;
    gap: 4px;
    background: #f5f5f5;
    padding: 4px;
    border-radius: 6px;
}

.npte-toggle-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
}

.npte-toggle-btn:hover {
    background: #e5e5e5;
    color: #333;
}

.npte-toggle-btn.npte-active {
    background: var(--npte-hl, #0073aa);
    color: var(--npte-hl-fg, #fff);
}

.npte-toggle-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Buttons */
.npte-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--npte-accent, #0073aa);
    color: var(--npte-accent-fg, #fff);
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.2s ease;
    white-space: nowrap;
}

.npte-btn:hover {
    filter: brightness(0.92);
}

.npte-btn-secondary {
    background: #f0f0f0;
    color: #333;
}

.npte-btn-secondary:hover {
    background: #e0e0e0;
}

/* Small buttons live on white panels, popovers and banners — never in the toolbar. So
   they follow the HIGHLIGHT, which is guaranteed readable, rather than the action-button
   accent, which is free to be white or transparent. This is the systemic fix for the
   white-on-white buttons that kept turning up one at a time. */
.npte-btn-small {
    padding: 4px 10px;
    font-size: 12px;
    background: var(--npte-hl, #0073aa);
    color: var(--npte-hl-fg, #fff);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.npte-btn-small:hover {
    filter: brightness(0.92);
}

.npte-dropdown-arrow {
    font-size: 10px;
}

/* Download Dropdown */
.npte-download-wrapper {
    position: relative;
}

.npte-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 1000;
    display: none;
}

.npte-dropdown-menu.npte-open {
    display: block;
}

.npte-dropdown-section {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.npte-dropdown-section:last-child {
    border-bottom: none;
}

.npte-dropdown-label {
    padding: 4px 14px;
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.npte-dropdown-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s ease;
}

.npte-dropdown-item:hover {
    background: #f5f5f5;
}

.npte-res-info {
    font-size: 11px;
    color: #999;
}

/* ============================================
   Main Editor Area
   ============================================ */

.npte-main-area {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

/* ============================================
   Left Sidebar (Tools)
   ============================================ */

.npte-sidebar-left {
    width: 72px;
    background: #fff;
    border-right: 1px solid #ddd;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.npte-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    transition: all 0.15s ease;
}

.npte-tool-btn:hover {
    background: #f0f0f0;
    border-color: #ddd;
    color: #333;
}

.npte-tool-btn:active {
    background: #e5e5e5;
}

.npte-tool-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.npte-tool-btn span {
    font-size: 9px;
    text-align: center;
    line-height: 1.2;
}

.npte-sidebar-divider {
    height: 1px;
    background: #ddd;
    margin: 8px 0;
}

.npte-delete-btn {
    color: #b32d2e;
}

.npte-delete-btn:hover {
    background: #fef2f2;
    border-color: #f5c6c6;
    color: #991b1c;
}

/* ============================================
   Workspace with Rulers
   ============================================ */

.npte-workspace-wrapper {
    flex: 1;
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: 24px 1fr;
    background: #e8e8e8;
    overflow: hidden;
}

.npte-ruler-corner {
    background: #f0f0f0;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.npte-ruler {
    background: #f0f0f0;
    overflow: hidden;
}

.npte-ruler-horizontal {
    grid-column: 2;
    grid-row: 1;
    border-bottom: 1px solid #ccc;
}

.npte-ruler-vertical {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid #ccc;
}

.npte-ruler-canvas {
    display: block;
}

/* Canvas Workspace — a fixed viewport; the Fabric canvas fills it and the page is panned/
   zoomed inside via the viewport transform (so nothing resizes when selecting objects). */
.npte-workspace {
    grid-column: 2;
    grid-row: 2;
    display: block;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.npte-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 0;
}

/* The white "page" sits behind the (now transparent) Fabric canvas, so the surrounding
   workspace-margin area reads as gray and selection handles show in it. */
.npte-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 0;
    pointer-events: none;
}

.npte-canvas,
.npte-grid-canvas,
.npte-guides-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Overlays must sit ABOVE the opaque Fabric canvas, or the grid/guides/bleed
   lines are hidden behind the white canvas. pointer-events:none lets clicks
   pass through to Fabric. */
.npte-grid-canvas {
    pointer-events: none;
    z-index: 4;
}

.npte-guides-canvas {
    pointer-events: none;
    z-index: 5;
}

.npte-canvas {
    z-index: 1;
}

/* Fabric.js canvas container fix */
.npte-editor .canvas-container {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 2;
}

/* ============================================
   Right Sidebar (Assets Panel)
   ============================================ */

.npte-sidebar-right {
    width: 280px;
    background: #fff;
    border-left: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.2s ease, opacity 0.2s ease;
}

.npte-sidebar-right.npte-collapsed {
    width: 0;
    opacity: 0;
    overflow: hidden;
    border-left: none;
}

.npte-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 14px;
}

.npte-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.npte-panel-close:hover {
    color: #333;
}

/* Tabs */
.npte-panel-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
}

.npte-tab-btn {
    flex: 1;
    padding: 10px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
}

.npte-tab-btn:hover {
    color: #333;
    background: #f5f5f5;
}

.npte-tab-btn.npte-active {
    color: var(--npte-hl, #0073aa);
    border-bottom-color: var(--npte-hl, #0073aa);
}

.npte-panel-content {
    flex: 1;
    overflow-y: auto;
}

.npte-tab-content {
    display: none;
    padding: 12px;
}

.npte-tab-content.npte-active {
    display: block;
}

/* Asset Categories */
.npte-asset-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.npte-category-btn {
    padding: 4px 10px;
    background: #f0f0f0;
    border: none;
    border-radius: 12px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
}

.npte-category-btn:hover {
    background: #e0e0e0;
}

.npte-category-btn.npte-active {
    background: var(--npte-hl, #0073aa);
    color: var(--npte-hl-fg, #fff);
}

/* Asset Grid */
.npte-asset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.npte-asset-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.npte-asset-item:hover {
    background: #f0f0f0;
    border-color: var(--npte-hl, #0073aa);
    transform: scale(1.05);
}

.npte-asset-item svg {
    width: 100%;
    height: 100%;
    max-width: 32px;
    max-height: 32px;
}

/* Icon Search */
.npte-search-box {
    margin-bottom: 12px;
}

.npte-icon-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.npte-icon-search:focus {
    outline: none;
    border-color: var(--npte-hl, #0073aa);
}

/* Brand Kit */
.npte-brand-section {
    margin-bottom: 20px;
}

.npte-brand-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.npte-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.npte-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease;
}

.npte-color-swatch:hover {
    transform: scale(1.1);
}

.npte-color-swatch.npte-selected {
    box-shadow: 0 0 0 2px var(--npte-hl, #0073aa);
}

.npte-color-swatch-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: none;
}

.npte-color-swatch:hover .npte-color-swatch-remove {
    display: block;
}

.npte-color-add {
    display: flex;
    gap: 8px;
    align-items: center;
}

.npte-color-picker {
    width: 40px;
    height: 32px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.npte-font-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.npte-font-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f8f8;
    border-radius: 4px;
    cursor: pointer;
}

.npte-font-item:hover {
    background: #f0f0f0;
}

.npte-font-item-name {
    font-size: 13px;
}

.npte-font-item-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.npte-font-item-remove:hover {
    color: #ef4444;
}

.npte-font-add {
    display: flex;
    gap: 8px;
}

.npte-font-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.npte-brand-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* ============================================
   File Input (Hidden)
   ============================================ */

.npte-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 900px) {
    .npte-sidebar-right {
        width: 240px;
    }

    .npte-asset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .npte-sidebar-left {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding: 8px;
    }

    .npte-tool-btn {
        flex-direction: row;
        padding: 8px 12px;
        gap: 6px;
    }

    .npte-tool-btn span {
        font-size: 12px;
    }

    .npte-sidebar-divider {
        width: 1px;
        height: 30px;
        margin: 0 8px;
    }

    .npte-workspace-wrapper {
        min-height: 400px;
    }

    .npte-sidebar-right {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    }

    .npte-toolbar-center {
        display: none;
    }
}

@media (max-width: 480px) {
    .npte-top-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .npte-toolbar-left {
        width: 100%;
        justify-content: center;
    }

    .npte-sidebar-right {
        width: 100%;
    }
}

/* ============================================
   v3: mode gating, primary button
   ============================================ */
/* Preview overlay + toast anchor to the editor. */
.npte-editor { position: relative; }

.npte-btn-primary {
    background: var(--npte-accent, #2271b1);
    color: var(--npte-accent-fg, #fff);
    border-color: transparent;
    transition: filter 0.2s ease;
}
.npte-btn-primary:hover { filter: brightness(0.92); }

/* Show/hide panels by editor mode */
.npte-editor[data-mode="use"] .npte-design-only,
.npte-editor[data-mode="preview"] .npte-design-only { display: none !important; }
.npte-editor[data-mode="design"] .npte-use-only { display: none !important; }

/* ============================================
   v3: Properties panel (lockdown + merge field)
   ============================================ */
.npte-props-empty {
    padding: 16px;
    color: #888;
    font-size: 13px;
    text-align: center;
}
.npte-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    cursor: pointer;
}
.npte-check input { margin: 0; }
.npte-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0;
}
.npte-field-row label { font-size: 12px; color: #555; flex: 0 0 auto; }
.npte-field-row input[type="text"],
.npte-field-row select,
.npte-field-row textarea {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
}
.npte-field-config { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e0e0e0; }

/* Brand link: keep label + select on one line, drop the hint full-width beneath
   it — otherwise the hint becomes a squeezed third flex column. */
.npte-brand-link-row { flex-wrap: wrap; }
.npte-brand-link-row .npte-field-brand { flex: 1 1 auto; min-width: 0; }
.npte-brand-link-row .npte-hint { flex: 1 0 100%; margin: 4px 0 0; }

/* ============================================
   v3: Fill-in form (use mode)
   ============================================ */
.npte-fill-empty { padding: 16px; color: #888; font-size: 13px; text-align: center; }
.npte-fill-row { flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 12px; }
.npte-fill-row label { font-weight: 600; color: #333; }
.npte-fill-row textarea { width: 100%; resize: vertical; }

/* ============================================
   v3: Print preview overlay
   ============================================ */
.npte-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 24, 0.92);
    z-index: 999;
    display: flex;
    flex-direction: column;
}
.npte-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    color: #fff;
}
.npte-preview-title { font-weight: 600; }
.npte-preview-stage {
    flex: 1;
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    padding: 20px;
    overflow: auto;
}
.npte-preview-img {
    display: block;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    flex: 0 0 auto;
}
.npte-preview-zoom { display: flex; align-items: center; gap: 4px; color: #fff; }
.npte-preview-zoom .npte-tb-btn { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); }
.npte-preview-zoom .npte-tb-btn:hover { background: rgba(255,255,255,0.22); }
.npte-pv-level { min-width: 46px; text-align: center; font-size: 12px; cursor: pointer; }

/* ============================================
   v3: Toast
   ============================================ */
.npte-toast {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%) translateY(14px);
    background: #1d2327;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    max-width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 1000;
    pointer-events: none;
}
.npte-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.npte-error { padding: 16px; border: 1px solid #f0c0c0; background: #fff5f5; color: #a33; border-radius: 4px; }

/* ============================================
   v3.1: toolbar icon buttons, zoom, text bar
   ============================================ */
.npte-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    min-width: 30px;
    padding: 0 6px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
}
.npte-tb-btn:hover { background: #f0f0f0; }
.npte-tb-btn:disabled { opacity: 0.4; cursor: default; }
.npte-tb-group { display: inline-flex; align-items: center; gap: 4px; }

.npte-zoom-controls { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.npte-zoom-level {
    min-width: 52px;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}
.npte-zoom-level:hover { background: #eee; }

/* Contextual text bar */
.npte-text-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 10px;
    background: #fff;
    /* Float over the canvas instead of pushing the layout down. */
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    max-width: calc(100% - 160px);
}
.npte-text-bar select,
.npte-text-bar input[type="number"] {
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 13px;
}
.npte-text-bar input[type="number"] { width: 58px; }
.npte-text-bar input[type="color"] { width: 30px; height: 28px; padding: 2px; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.npte-tx-btn {
    width: 30px; height: 28px;
    border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer;
    font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.npte-tx-btn.npte-active {
    background: var(--npte-hl, #2271b1);
    color: var(--npte-hl-fg, #fff);
    border-color: var(--npte-hl, #2271b1);
}
.npte-tx-sep { width: 1px; height: 22px; background: #ddd; margin: 0 2px; }

/* Fill-form image control */
.npte-fill-image { display: flex; align-items: center; gap: 8px; }
.npte-fill-thumb {
    width: 44px; height: 44px; border: 1px solid #ddd; border-radius: 4px;
    object-fit: cover; background: #f6f7f7; flex: 0 0 auto;
}
.npte-fill-fit { font-size: 12px; }

/* Cursor hint for clickable image areas in use mode */
.npte-editor[data-mode="use"] .upper-canvas { cursor: default; }

/* ============================================
   v3.2: alignment tools
   ============================================ */
.npte-align-scope { font-weight: 400; color: #999; font-size: 11px; }
.npte-align-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.npte-align-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; border: 1px solid #ccc; border-radius: 4px;
    background: #fff; color: #333; cursor: pointer;
}
.npte-align-btn:hover { background: #f0f0f0; }

/* ============================================
   v3.3: layers panel, image picker, fit options
   ============================================ */
.npte-fitopts { display: flex; gap: 10px; flex: 1; }
.npte-fitopts .npte-check { padding: 0; font-size: 12px; }

/* Layers */
.npte-layers-list { display: flex; flex-direction: column; gap: 2px; }
.npte-layer {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 6px; border: 1px solid #eee; border-radius: 4px; background: #fff;
}
.npte-layer.npte-layer-active {
    border-color: var(--npte-hl, #2271b1);
    background: #f0f7fc;                                        /* fallback */
    background: color-mix(in srgb, var(--npte-hl, #2271b1) 8%, #fff);
}
.npte-layer-name { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.npte-layer-icon { width: 16px; height: 16px; flex: 0 0 auto; color: #888; }
.npte-layer-btn {
    width: 24px; height: 24px; border: none; background: none; cursor: pointer; color: #666;
    border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.npte-layer-btn:hover { background: #eee; color: #222; }
.npte-layer-btn.npte-on { color: var(--npte-hl, #2271b1); }

/* Image picker modal */
.npte-img-picker {
    position: absolute; inset: 0; z-index: 1001;
    background: rgba(20,20,24,0.6);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.npte-img-picker-box {
    background: #fff; border-radius: 8px; width: 560px; max-width: 100%; max-height: 86%;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.npte-img-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eee; font-weight: 600; }
.npte-img-picker-actions { padding: 14px 16px; border-bottom: 1px solid #f0f0f0; }
.npte-img-picker-label { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.npte-img-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
    padding: 8px 16px 16px; overflow: auto;
}
.npte-img-grid-item {
    border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer;
    aspect-ratio: 1 / 1; background: #f6f7f7; display: flex; align-items: center; justify-content: center;
}
.npte-img-grid-item:hover { border-color: var(--npte-hl, #2271b1); }
.npte-img-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.npte-img-grid-empty { grid-column: 1 / -1; color: #999; font-size: 13px; text-align: center; padding: 12px; }

/* Grab cursor when panning the workspace */
.npte-workspace.npte-grabbing { cursor: grabbing; }

/* ============================================
   v3.4: layer DnD, fill fit row, front-end layer FAB
   ============================================ */
.npte-layer { cursor: grab; }
.npte-layer-dragging { opacity: 0.5; }
.npte-layer-over { border-color: var(--npte-hl, #2271b1); box-shadow: inset 0 2px 0 var(--npte-hl, #2271b1); }

.npte-fill-fitrow { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.npte-fill-fitlabel { font-size: 12px; color: #555; }
.npte-fill-fitrow select { flex: 1; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }

/* Front-end floating layer controls */
.npte-layer-fab {
    position: absolute;
    bottom: 16px; left: 50%; transform: translateX(-50%);
    display: none; align-items: center; gap: 6px;
    background: #1d2327; color: #fff;
    padding: 6px 10px; border-radius: 8px; z-index: 70;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.npte-layer-fab.npte-show { display: flex; }
.npte-layer-fab span { font-size: 12px; }
.npte-layer-fab button {
    width: 28px; height: 28px; border: none; border-radius: 5px; cursor: pointer;
    background: #3a4047; color: #fff; font-size: 13px;
}
.npte-layer-fab button:hover { background: #50575e; }

/* ============================================
   v3.6: arrange panel layer buttons, ruler align
   ============================================ */
.npte-arrange-empty { padding: 16px; color: #888; font-size: 13px; text-align: center; }
.npte-layer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.npte-layer-grid .npte-layerbtn { width: 100%; text-align: center; }

/* ============================================
   v3.6.1: hide rulers (front-end default; toggleable)
   ============================================ */
.npte-no-rulers .npte-workspace-wrapper { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.npte-no-rulers .npte-ruler,
.npte-no-rulers .npte-ruler-corner { display: none; }
.npte-no-rulers .npte-workspace { grid-column: 1; grid-row: 1; }

/* v3.7.1: preview pan cursor */
.npte-preview-stage { cursor: grab; }
.npte-preview-stage.npte-grabbing { cursor: grabbing; }

/* v3.14: space-to-pan cursor */
.npte-pan-cursor .canvas-container { cursor: grab; }

/* v3.15: stronger Canva-style page shadow (always shown, sized to the visible doc) */
.npte-page-bg { box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.14); }

/* v3.16: delete button on image-library thumbnails */
.npte-img-grid-item { position: relative; }
.npte-img-del {
    position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px; border: none; border-radius: 50%;
    background: rgba(20,20,24,0.65); color: #fff; cursor: pointer;
    font-size: 14px; line-height: 1; display: none; align-items: center; justify-content: center;
}
.npte-img-grid-item:hover .npte-img-del { display: flex; }
.npte-img-del:hover { background: #d63638; }

/* v3.17: floating shape toolbar (fill + stroke) */
.npte-shape-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 10px; background: #fff;
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 60; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.npte-shape-bar input[type="color"] { width: 30px; height: 28px; padding: 2px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; }
.npte-shape-bar input[type="number"] { width: 58px; height: 28px; border: 1px solid #ccc; border-radius: 4px; padding: 0 6px; font-size: 13px; }
.npte-sh-label { font-size: 12px; color: #555; }

.npte-image-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 10px; background: #fff;
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 60; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.npte-image-bar .npte-im-fitgroup,
.npte-image-bar .npte-im-bordergroup { display: inline-flex; align-items: center; gap: 6px; }
.npte-image-bar .npte-im-fit { width: auto; padding: 0 10px; font-size: 13px; }
.npte-image-bar .npte-im-upload { width: auto; padding: 0 10px; font-size: 13px; }
.npte-image-bar input[type="color"] { width: 30px; height: 28px; padding: 2px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; }
.npte-image-bar input[type="number"] { width: 58px; height: 28px; border: 1px solid #ccc; border-radius: 4px; padding: 0 6px; font-size: 13px; }

/* ---- Assets tab: segmented shapes/icons + polished grid ---- */
.npte-asset-seg {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border: 1px solid #d5d9de;
    border-radius: 6px;
    overflow: hidden;
}
.npte-seg-btn {
    flex: 1;
    padding: 6px 0;
    border: none;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
}
.npte-seg-btn + .npte-seg-btn { border-left: 1px solid #d5d9de; }
.npte-seg-btn.npte-active {
    background: var(--npte-hl, #0073aa);
    color: var(--npte-hl-fg, #fff);
}
.npte-asset-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.npte-asset-item:hover {
    border-color: var(--npte-hl, #0073aa);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.npte-asset-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2px 3px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}
.npte-asset-item:hover .npte-asset-name { opacity: 1; }
@keyframes npte-asset-pop {
    0% { transform: scale(1); }
    40% { transform: scale(0.86); }
    100% { transform: scale(1); }
}
.npte-asset-item.npte-asset-added { animation: npte-asset-pop 0.25s ease; }
.npte-asset-empty {
    padding: 22px 8px;
    text-align: center;
    font-size: 12px;
    color: #888;
}

/* ---- Layers tab polish ---- */
.npte-layer.npte-layer-active {
    border-color: var(--npte-hl, #0073aa);
    background: #f0f7fc;
    box-shadow: inset 3px 0 0 var(--npte-hl, #0073aa);
}
.npte-layer-glyph {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #778;
}
.npte-layer-glyph svg { width: 15px; height: 15px; display: block; }
.npte-layer-rename {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid var(--npte-hl, #0073aa);
    border-radius: 3px;
}

/* Make-image-holder button: a labeled button, not a 30px icon square */
.npte-sh-makeholder {
    white-space: nowrap;
    width: auto;
    padding: 0 10px;
    font-size: 12px;
}

/* ---- Design mode: the panel is a floating card over the canvas (Canva-style),
   not a docked flyout that squeezes the workspace ---- */
.npte-editor[data-mode="design"] .npte-sidebar-right,
.npte-editor[data-mode="use"] .npte-sidebar-right {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 300px;
    height: auto;
    max-height: calc(100% - 24px);
    border: 1px solid #e2e5e9;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    z-index: 55;
    overflow: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.npte-editor[data-mode="design"] .npte-sidebar-right.npte-collapsed,
.npte-editor[data-mode="use"] .npte-sidebar-right.npte-collapsed {
    width: 300px;            /* keep size — fade/slide out instead of squashing */
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

/* Tab buttons for rail-opened tabs (Assets/Brand) stay out of the tab bar */
.npte-tab-btn.npte-tab-hidden { display: none !important; }

/* Image Area shape picker (left-rail flyout) */
.npte-imgarea-wrap { position: relative; }
.npte-imgarea-menu {
    position: absolute;
    left: calc(100% + 6px);
    top: 0;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
    padding: 4px;
    z-index: 80;
    min-width: 140px;
}
.npte-imgarea-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    border-radius: 5px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}
.npte-imgarea-menu button:hover { background: #f0f4f8; }

/* Layer rows: drag the row, don't select its text */
.npte-layer, .npte-layer-name { user-select: none; -webkit-user-select: none; }

/* Live rotation readout */
.npte-angle-badge {
    position: absolute;
    background: #1d2327;
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 90;
    display: none;
}

/* Size inputs (Properties / Arrange) */
.npte-size-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; font-size: 12px; }
.npte-size-row input[type="number"] { width: 74px; height: 26px; border: 1px solid #ccc; border-radius: 4px; padding: 0 6px; }
.npte-size-row .npte-size-unit { color: #777; }
.npte-size-row label { display: flex; align-items: center; gap: 4px; color: #555; }

/* Standalone cards (Brand/Assets from the rail) hide the contextual tab bar */
.npte-sidebar-right.npte-panel-solo .npte-panel-tabs { display: none; }
.npte-size-row .npte-size-a { width: 58px; }

/* Busy overlay */
.npte-busy {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    z-index: 200;
}
.npte-busy-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1d2327;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
.npte-busy-spinner {
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: npte-spin 0.7s linear infinite;
    flex: 0 0 auto;
}
@keyframes npte-spin { to { transform: rotate(360deg); } }

/* Layer drag grip — a real handle beats guessing where to grab */
.npte-layer-grip {
    width: 14px;
    height: 16px;
    flex: 0 0 auto;
    color: #9aa2ab;
    cursor: grab;
}
.npte-layer-grip svg { width: 14px; height: 16px; display: block; }
.npte-layer[draggable="true"] { cursor: grab; }
.npte-layer[draggable="false"] { cursor: default; }
.npte-layer-dragging { cursor: grabbing; }

/* ---- Brand kits ---- */
.npte-kit-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; }
.npte-kit-bar .npte-kit-select { flex: 1; min-width: 0; height: 28px; border: 1px solid #ccc; border-radius: 4px; }
.npte-brand-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.npte-brand-image {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid #e2e5e9;
    border-radius: 6px;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.npte-brand-image:hover { border-color: var(--npte-hl, #0073aa); box-shadow: 0 1px 6px rgba(0,0,0,0.12); }
.npte-brand-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.npte-brand-image-remove {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px; border: none; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: #fff; font-size: 12px; line-height: 1;
    cursor: pointer; display: none;
}
.npte-brand-image:hover .npte-brand-image-remove { display: block; }
.npte-brand-images-empty { font-size: 12px; color: #888; padding: 6px 0; }
.npte-kit-avail-list .npte-check { display: block; margin: 3px 0; }

/* Brand swatches in the floating bars */
.npte-bar-swatches { display: inline-flex; gap: 4px; align-items: center; }
.npte-bar-swatch {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.15); cursor: pointer; padding: 0;
    transition: transform 0.1s;
}
.npte-bar-swatch:hover { transform: scale(1.18); border-color: rgba(0,0,0,0.35); }

/* Align scope segmented control (multi-select) */
.npte-align-scope-seg {
    display: flex;
    margin-bottom: 8px;
    border: 1px solid #d5d9de;
    border-radius: 6px;
    overflow: hidden;
}

/* Group/Ungroup + crop bar buttons: labeled, not icon squares */
.npte-group-row { display: flex; gap: 6px; margin-top: 8px; }
.npte-im-crop, .npte-im-cropreset, .npte-im-cropapply, .npte-im-cropcancel {
    width: auto; padding: 0 10px; font-size: 12px; white-space: nowrap;
}
.npte-im-cropapply { background: var(--npte-hl, #0073aa); color: var(--npte-hl-fg, #fff); border-color: var(--npte-hl, #0073aa); }

/* Floating Group/Ungroup pill above the selection */
.npte-float-group {
    position: absolute;
    z-index: 70;
    transform: translateX(-50%);
    display: none;
    pointer-events: auto;
}
.npte-float-group button {
    background: #1d2327;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}
.npte-float-group button:hover { background: #000; }

/* Color palette popover */
.npte-palette {
    position: absolute;
    z-index: 120;
    display: none;
    width: 216px;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    padding: 10px;
}
.npte-palette-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin: 4px 0 4px;
}
.npte-palette-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 6px;
}
.npte-palette-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s;
}
.npte-palette-swatch:hover { transform: scale(1.15); border-color: rgba(0, 0, 0, 0.4); }
.npte-palette-custom {
    width: 100%;
    margin-top: 2px;
    padding: 6px 0;
    border: 1px solid #d5d9de;
    border-radius: 6px;
    background: #f8f9fa;
    font-size: 12px;
    color: #444;
    cursor: pointer;
}
.npte-palette-custom:hover { background: #eef1f4; }

/* In-popover custom picker */
.npte-hsv-sq { display: block; width: 100%; border-radius: 6px; cursor: crosshair; margin-bottom: 8px; }
.npte-hsv-hue {
    width: 100%;
    margin: 0 0 8px;
    -webkit-appearance: none;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.npte-hsv-hue::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(0,0,0,0.35);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer;
}
.npte-hsv-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.npte-hsv-chip { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.15); flex: 0 0 auto; }
/* min-width:0 is required — a flex item won't shrink below an <input>'s intrinsic
   size by default, so the hex field spilled past the popover's right edge. */
.npte-hsv-hex { flex: 1 1 0; min-width: 0; width: 100%; height: 26px; border: 1px solid #ccc; border-radius: 5px; padding: 0 8px; font-size: 12px; font-family: monospace; }

/* Color inputs in the floating bars: match the 28px button metrics exactly
   (the UA default has its own size/margins and sat visibly off-center) */
.npte-text-bar input[type="color"],
.npte-shape-bar input[type="color"],
.npte-image-bar input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 28px;
    margin: 0;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    align-self: center;
}
.npte-text-bar input[type="color"]::-webkit-color-swatch-wrapper,
.npte-shape-bar input[type="color"]::-webkit-color-swatch-wrapper,
.npte-image-bar input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.npte-text-bar input[type="color"]::-webkit-color-swatch,
.npte-shape-bar input[type="color"]::-webkit-color-swatch,
.npte-image-bar input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* QR flyout */
.npte-qr-wrap { position: relative; }
.npte-qr-menu {
    position: absolute;
    left: calc(100% + 6px);
    top: 0;
    width: 220px;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
    padding: 10px;
    z-index: 80;
}
.npte-qr-menu label { display: block; font-size: 11px; font-weight: 600; color: #666; margin-bottom: 4px; }
.npte-qr-menu .npte-qr-url {
    width: 100%;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 12px;
    margin-bottom: 6px;
}
.npte-qr-menu .npte-qr-url.npte-qr-bad { border-color: #b32d2e; }
.npte-qr-error { font-size: 11px; color: #b32d2e; margin-bottom: 6px; }
.npte-qr-menu .npte-qr-add { width: 100%; }

/* Profile panel */
.npte-profile-row { margin-bottom: 10px; }
.npte-profile-row > label { display: block; font-size: 11px; font-weight: 600; color: #666; margin-bottom: 3px; }
.npte-profile-input { width: 100%; height: 28px; border: 1px solid #ccc; border-radius: 5px; padding: 0 8px; font-size: 12px; }
.npte-profile-img { display: flex; align-items: center; gap: 8px; }
.npte-profile-thumb {
    width: 44px; height: 44px; border-radius: 6px;
    border: 1px solid #dfe3e8; background: #f4f5f7 center/cover no-repeat;
    flex: 0 0 auto;
}
.npte-profile-save { width: 100%; justify-content: center; margin-top: 4px; }
.npte-profile-hint { font-size: 11px; color: #888; margin: 6px 0 0; }

/* QR bar shares the floating-bar look; normalize its color inputs too */
.npte-qr-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 10px; background: #fff;
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 60; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); max-width: calc(100% - 160px);
}
.npte-qr-bar input[type="number"] { width: 56px; height: 28px; border: 1px solid #ccc; border-radius: 4px; padding: 0 6px; }
.npte-qr-bar input[type="color"] {
    -webkit-appearance: none; appearance: none;
    width: 30px; height: 28px; margin: 0; padding: 2px;
    border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; align-self: center;
}
.npte-qr-bar input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.npte-qr-bar input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }

/* My Designs panel */
.npte-designs-scope { margin-bottom: 8px; }
.npte-design-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px; margin-bottom: 6px;
    border: 1px solid #e5e8ec; border-radius: 7px; background: #fff;
}
.npte-design-row.npte-design-current { border-color: var(--npte-hl, #2563eb); background: #f6f9ff; }
.npte-design-thumb {
    width: 46px; height: 46px; flex: 0 0 auto;
    border: 1px solid #dfe3e8; border-radius: 5px;
    background: #f4f5f7 center/cover no-repeat;
}
.npte-design-meta { flex: 1 1 auto; min-width: 0; }
.npte-design-name {
    font-size: 12px; font-weight: 600; color: #23282d;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.npte-design-sub {
    font-size: 11px; color: #888; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.npte-design-acts { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.npte-design-acts .npte-btn-small { padding: 2px 8px; font-size: 11px; }
/* .npte-btn-small is a solid accent button, so the secondary variants have to
   reset the background too — colour alone leaves unreadable text on accent. */
.npte-btn-ghost, .npte-btn-danger {
    background: #fff; border: 1px solid #d5d9de; color: #555;
}
.npte-btn-ghost:hover { background: #f3f4f6; color: #23282d; }
.npte-btn-danger { color: #b32d2e; border-color: #e6b8b8; }
.npte-btn-danger:hover { background: #fdf2f2; color: #8f2422; }
.npte-design-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: var(--npte-hl, #2563eb); text-align: center; padding: 3px 0;
}

/* Resume banner — offers the user's existing copy of a template they reopened */
/* Bottom-centre, above the toast line: the top of the editor belongs to the toolbar and
   the contextual bars, and a banner there covered them. */
.npte-resume-bar {
    position: absolute; left: 50%; transform: translateX(-50%); top: auto; bottom: 78px; z-index: 70;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; font-size: 12px; color: #23282d;
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); max-width: calc(100% - 40px);
}
.npte-resume-bar .npte-resume-dismiss {
    background: #fff; border: 1px solid #d5d9de; color: #555;
}
.npte-resume-bar .npte-resume-dismiss:hover { background: #f3f4f6; color: #23282d; }

/* Unsaved-work recovery. Warmer than the plain resume bar because this one is
 * offering back something the user would otherwise have lost — it should read
 * as a rescue, not as routine chrome. */
.npte-draft-bar {
    border-color: #f0c36d;
    background: #fffaf0;
}
.npte-draft-bar span::before {
    content: '⤺';
    margin-right: 6px;
    font-weight: 700;
    color: #b8860b;
}

/* Gradient editor (inside the colour popover; shape fills only) */
.npte-palette-seg { margin-bottom: 8px; }
.npte-grad-box { margin-bottom: 10px; }
.npte-grad-type { margin-bottom: 8px; }
.npte-grad-angle { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.npte-grad-angle > span { font-size: 11px; font-weight: 600; color: #666; flex: 0 0 auto; }
.npte-grad-angle input[type="range"] { flex: 1 1 auto; min-width: 0; }
.npte-grad-angnum { width: 52px; height: 24px; border: 1px solid #ccc; border-radius: 4px; padding: 0 4px; font-size: 11px; }
.npte-grad-stops { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.npte-grad-stop {
    position: relative; width: 26px; height: 26px; padding: 0;
    border: 2px solid #d5d9de; border-radius: 6px; cursor: pointer;
}
.npte-grad-stop.npte-active { border-color: var(--npte-hl, #2563eb); box-shadow: 0 0 0 2px rgba(37,99,235,0.18); }
.npte-grad-stop-x {
    position: absolute; top: -7px; right: -7px;
    width: 14px; height: 14px; line-height: 13px; text-align: center;
    font-size: 11px; color: #fff; background: #6b7280;
    border-radius: 50%; cursor: pointer;
}
.npte-grad-stop-x:hover { background: #b32d2e; }
.npte-grad-stop-add {
    width: 26px; height: 26px; padding: 0; font-size: 15px; line-height: 1; color: #555;
    background: #fff; border: 1px dashed #b8bfc7; border-radius: 6px; cursor: pointer;
}
.npte-grad-stop-add:hover { background: #f3f4f6; color: #23282d; }
.npte-grad-preview {
    flex: 1 1 100%; height: 14px; margin-top: 4px;
    border: 1px solid #dfe3e8; border-radius: 4px; background-size: cover;
}
/* Shape bar: little chip showing the live gradient next to the fill swatch */
.npte-sh-gradprev {
    display: inline-block; width: 28px; height: 22px;
    border: 1px solid #ccc; border-radius: 4px; background-size: cover; vertical-align: middle;
}

/* Opacity sliders in the floating bars */
.npte-op-range { width: 84px; height: 28px; margin: 0; align-self: center; cursor: pointer; }
.npte-op-val { font-size: 11px; color: #666; min-width: 34px; text-align: right; }
/* Kerning / leading number inputs share the bar's 28px metrics */
.npte-tx-kern, .npte-tx-leading {
    width: 62px; height: 28px; border: 1px solid #ccc; border-radius: 4px;
    padding: 0 6px; font-size: 12px;
}

/* Toolbar toggles: icon-only, with the label as a hover tooltip.
   The label is absolutely positioned so revealing it never reflows the cluster
   (a display swap made every button jump as the mouse crossed it). */
/* .npte-main-area is positioned too, so without a z-index it paints over the
   toolbar and swallows the tooltip that hangs below it. */
.npte-top-toolbar { position: relative; z-index: 30; }
.npte-snap-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* left is set by centerToolbarToggles() to line up with the canvas */
}
.npte-toggle-btn { position: relative; gap: 0; padding: 7px; }
.npte-toggle-btn > span {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(17, 17, 17, 0.92);
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 200;
}
.npte-toggle-btn:hover > span,
.npte-toggle-btn:focus-visible > span { opacity: 1; }

/* Front-end document-spec info icon (replaces the always-on dimensions text).
   Bare icon, no chrome; the spec appears on hover/focus. Anchored to the LEFT
   rather than centred — it sits at the toolbar's left edge, so a centred tip
   would hang off the side of the editor. */
.npte-doc-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: inherit;
    opacity: 0.7;
    cursor: help;
    transition: opacity 0.12s ease;
}
.npte-doc-info:hover,
.npte-doc-info:focus-visible { opacity: 1; outline: none; }
.npte-doc-info-tip {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    padding: 4px 8px;
    background: rgba(17, 17, 17, 0.92);
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 200;
}
.npte-doc-info:hover .npte-doc-info-tip,
.npte-doc-info:focus-visible .npte-doc-info-tip { opacity: 1; }

/* Optional fixed toolbar height (Appearance ▸ Header height). Unset = auto. */
.npte-top-toolbar {
    min-height: var(--npte-header-h, auto);
    height: var(--npte-header-h, auto);
    flex: 0 0 auto;
}

/* Multi-page: add/remove controls that sit under each repeatable page */
.npte-page-controls { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.npte-page-ctl-row {
    position: absolute;
    display: flex; justify-content: center; gap: 6px;
    pointer-events: none;
}
.npte-page-ctl-row > button { pointer-events: auto; }
/* No drop shadow on the page buttons — they read as flat chips. */
.npte-page-add, .npte-page-del { box-shadow: none; }

/* Eyedropper button in the colour popover */
.npte-hsv-eye {
    flex: 0 0 auto;
    width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #555;
    border: 1px solid #ccc; border-radius: 5px; cursor: pointer;
}
.npte-hsv-eye:hover { background: #f3f4f6; color: #23282d; }

/* Fit controls floating above the selected image holder */
.npte-fit-float {
    position: absolute;
    display: none;
    z-index: 62;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.npte-fit-float .npte-im-fitgroup { display: flex; align-items: center; gap: 6px; }

/* Fit controls: icon buttons with the label revealed on hover (like the toolbar
   toggles), so the floating bar stays compact. */
.npte-fit-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 28px; padding: 0;
    background: transparent; color: #555;
    border: 1px solid transparent; border-radius: 5px; cursor: pointer;
}
.npte-fit-btn:hover { background: #f0f0f0; color: #23282d; }
.npte-fit-btn.npte-active {
    background: var(--npte-hl, #0073aa);
    color: var(--npte-hl-fg, #fff);
}
.npte-fit-btn > span {
    position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    padding: 3px 7px; font-size: 11px; line-height: 1.3; white-space: nowrap;
    background: rgba(17,17,17,0.92); color: #fff; border-radius: 5px;
    opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 200;
}
.npte-fit-btn:hover > span, .npte-fit-btn:focus-visible > span { opacity: 1; }

/* Panel title centred over its body */
.npte-sidebar-right .npte-panel-title { text-align: center; width: 100%; }

/* Floating bars: everything on one baseline. Inputs, swatches, labels and sliders
   had different intrinsic heights, so the row read as ragged. */
.npte-text-bar, .npte-shape-bar, .npte-image-bar, .npte-qr-bar { align-items: center; }
.npte-text-bar > *, .npte-shape-bar > *, .npte-image-bar > *, .npte-qr-bar > * {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}
.npte-shape-bar input[type="number"],
.npte-image-bar input[type="number"],
.npte-text-bar input[type="number"] { height: 28px; line-height: 28px; }
.npte-sh-label { display: inline-flex; align-items: center; height: 28px; }
.npte-op-range { height: 28px; }
.npte-op-val { display: inline-flex; align-items: center; height: 28px; }
.npte-tx-sep { align-self: center; height: 20px; }

/* ============================================
   v3.93: panel-context buttons, bar inputs, left-hand rail panels
   ============================================ */

/* Small buttons living inside a white panel can't borrow --npte-accent: that IS the
   button background, so a white button setting made "Open" white-on-white. Panel
   chrome uses the guaranteed-readable highlight instead. Ghost/danger keep their own. */
.npte-tab-content .npte-btn-small:not(.npte-btn-ghost):not(.npte-btn-danger),
.npte-designs-body .npte-btn-small:not(.npte-btn-ghost):not(.npte-btn-danger) {
    background: var(--npte-hl, #0073aa);
    color: var(--npte-hl-fg, #fff);
}

/* The admin theme forces min-height:40px on number inputs, which beat our height:28px
   and left the digit sitting high in a box taller than every other control in the bar.
   Match the 28px row and let the browser centre the text itself. */
.npte-shape-bar input[type="number"],
.npte-image-bar input[type="number"],
.npte-text-bar input[type="number"],
.npte-qr-bar input[type="number"],
.npte-shape-bar select, .npte-image-bar select,
.npte-text-bar select, .npte-qr-bar select {
    height: 28px !important;
    min-height: 28px !important;
    line-height: normal !important;
    padding: 0 6px !important;
}
/* The font dropdown needs room for the arrow the theme draws on the right. */
.npte-text-bar select.npte-tx-font { padding-right: 22px !important; }

/* Rail flyouts (Shapes / My Designs / Profile / Brand) open NEXT TO the rail that
   launched them, so you are not mousing across the page to use what you just clicked.
   The panel is a floating card (position:absolute, pinned right) in both modes, so
   `order` does nothing here — the anchor edge is what has to move. The contextual
   inspector (Properties / Layers) is not "solo" and stays on the right. */
.npte-editor[data-mode="design"] .npte-sidebar-right.npte-panel-solo,
.npte-editor[data-mode="use"] .npte-sidebar-right.npte-panel-solo {
    right: auto;
    left: 86px;   /* clear of the 72px rail, same 14px gutter as the right-hand card */
}
.npte-sidebar-right.npte-panel-solo { border-left: 1px solid #e2e5e9; }

/* Stacked layout: the rail is a top bar, so the card goes back to the left edge. */
@media (max-width: 768px) {
    .npte-editor[data-mode="design"] .npte-sidebar-right.npte-panel-solo,
    .npte-editor[data-mode="use"] .npte-sidebar-right.npte-panel-solo {
        left: 0;
        right: auto;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
}

/* Themes style bare form controls with a bottom margin (WP admin and most front-end
   themes ship `input { margin: 0 0 9px }`), which in a centred flex row lifts the
   control by half the margin — the number fields read as sitting high next to their
   labels. The older reset only covered DIRECT children, so anything wrapped (the
   corner-radius field and its unit) slipped through. Reset every control in the bars,
   and with !important: a plain `.bar > *` loses to a theme's `.foo input[type=number]`. */
.npte-text-bar input, .npte-text-bar select, .npte-text-bar button,
.npte-shape-bar input, .npte-shape-bar select, .npte-shape-bar button,
.npte-image-bar input, .npte-image-bar select, .npte-image-bar button,
.npte-qr-bar input, .npte-qr-bar select, .npte-qr-bar button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle;
}

/* Appearance preview: the panel-highlight sample */
.npte-ap-panel {
    margin: 10px auto 0;
    width: 170px;
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.npte-ap-panel-title { font-size: 11px; font-weight: 600; color: #555; margin-bottom: 6px; }
.npte-ap-panel-row { display: flex; gap: 6px; }
.npte-ap-hl {
    flex: 1; padding: 5px 0; font-size: 11px; font-weight: 500;
    border: none; border-radius: 4px; cursor: default;
    background: var(--npte-hl, #0073aa); color: var(--npte-hl-fg, #fff);
}

/* Native controls (checkboxes, the opacity slider) paint with the browser's own blue.
   accent-color hands them the highlight instead, so nothing in the editor is a colour
   the Appearance page can't reach. */
.npte-editor input[type="checkbox"],
.npte-editor input[type="radio"],
.npte-editor input[type="range"] {
    accent-color: var(--npte-hl, #0073aa);
}

/* Layers: group disclosure + nested children */
.npte-layer-caret {
    background: none; border: none; padding: 0; margin-right: 2px;
    width: 16px; height: 16px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    color: #777; cursor: pointer;
    transition: transform 0.12s ease, color 0.12s ease;
}
.npte-layer-caret svg { width: 12px; height: 12px; }
.npte-layer-caret:hover { color: var(--npte-hl, #2271b1); }
.npte-layer-caret.npte-open { transform: rotate(90deg); color: var(--npte-hl, #2271b1); }
.npte-layer-kids {
    margin: 0 0 4px 18px;
    border-left: 2px solid #e5e8ec;
    padding-left: 6px;
}
.npte-layer-kid {
    cursor: pointer;
    opacity: 0.85;
    font-size: 11px;
}
.npte-layer-kid:hover { opacity: 1; border-color: var(--npte-hl, #2271b1); }
.npte-layer-kid-empty { color: #999; font-style: italic; cursor: default; }

/* Delete tool: red only when it has something to act on. Keyed on :disabled — the
   state updateDeleteState() already sets — rather than layering a second class-based
   override on top of the base colour. */
.npte-delete-btn:disabled,
.npte-delete-btn:disabled:hover {
    color: #9aa0a6;
    background: transparent;
    border-color: transparent;
    cursor: default;
}
.npte-delete-btn:disabled svg { opacity: 0.75; }

/* Rulers: guides are pulled out of the ruler, moved along it, and dropped back on it
   to delete. The corner clears them all. */
.npte-ruler { cursor: crosshair; }
.npte-ruler-corner { cursor: pointer; }
.npte-ruler-corner:hover { background: #e4e4e4; }
.npte-guide-badge {
    position: absolute; z-index: 90; display: none;
    padding: 3px 7px; border-radius: 5px;
    font-size: 11px; line-height: 1.3; white-space: nowrap;
    background: rgba(17, 17, 17, 0.92); color: #fff;
    pointer-events: none;
}

/* ============================================
   v4.1: one-row contextual bars with a "more" fold
   ============================================ */

/* Desktop keeps every control on ONE line — a second row shifted the canvas and made
   the bar read as two unrelated strips. Secondary controls fold behind the chevron. */
@media (min-width: 900px) {
    .npte-text-bar, .npte-shape-bar, .npte-image-bar, .npte-qr-bar { flex-wrap: nowrap; }
}

.npte-bar-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.npte-bar-more-btn { flex: 0 0 auto; }
.npte-bar-more-btn svg { transition: transform 0.7s cubic-bezier(0.65, 0.02, 0.32, 1); }
.npte-bar-more.npte-open .npte-bar-more-btn svg { transform: rotate(180deg); }
.npte-bar-more.npte-open .npte-bar-more-btn {
    background: var(--npte-hl, #2271b1);
    color: var(--npte-hl-fg, #fff);
    border-color: var(--npte-hl, #2271b1);
}

/* Collapsed to zero width rather than display:none, so it can EASE open instead of
   snapping.

   The width it opens TO is measured in JS (--npte-more-w) rather than a big fixed
   max-width. With a blanket `max-width: 640px` the strip reached its real width in the
   first fraction of the timeline and spent the rest animating invisible surplus — the
   easing curve never showed, which is what read as abrupt. Mapping the curve onto the
   actual travel is what makes it feel gentle.

   ease-in-out (slow start, slow finish) rather than a decelerate-only curve: the motion
   should begin softly, not launch. */
.npte-bar-more-items {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-10px);
    pointer-events: none;
    transition: max-width 0.62s cubic-bezier(0.65, 0.02, 0.32, 1) 0.3s,
                opacity 0.4s cubic-bezier(0.65, 0.02, 0.32, 1) 0.32s,
                transform 0.6s cubic-bezier(0.65, 0.02, 0.32, 1) 0.3s;
}
.npte-bar-more:hover .npte-bar-more-items,
.npte-bar-more:focus-within .npte-bar-more-items,
.npte-bar-more.npte-open .npte-bar-more-items {
    max-width: var(--npte-more-w, 640px);
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    /* Width leads; the controls fade in behind it so nothing pops into place. */
    transition: max-width 0.75s cubic-bezier(0.65, 0.02, 0.32, 1) 0.1s,
                opacity 0.55s cubic-bezier(0.65, 0.02, 0.32, 1) 0.24s,
                transform 0.72s cubic-bezier(0.65, 0.02, 0.32, 1) 0.1s;
}
.npte-bar-more:hover .npte-bar-more-btn svg,
.npte-bar-more:focus-within .npte-bar-more-btn svg { transform: rotate(180deg); }

/* Icon-only labels for the folded controls */
.npte-icon-label {
    color: #666;
    cursor: help;
}
.npte-icon-label svg { display: block; }

@media (prefers-reduced-motion: reduce) {
    .npte-bar-more-items { transition: none; }
}

/* Child rows carry their own reorder arrows, so they need the same row layout */
.npte-layer-kid { display: flex; align-items: center; gap: 6px; }
.npte-layer-kid .npte-layer-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }