/* ══════════════════════════════════════════
           ANDAMENTOS PAGE — SPECIFIC STYLES
           ══════════════════════════════════════════ */

        /* ── Page Header Bar ── */
        .page-header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .page-header-bar .page-title-group {
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .page-header-bar .page-icon {
            font-size: 2.2rem;
            /* Slightly larger icon */
        }

        .title-text-col {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .page-header-bar h1 {
            font-size: clamp(1.4rem, 3vw, 1.8rem);
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.1;
            margin: 0;
        }

        .page-header-bar .page-subtitle {
            font-size: 0.9rem;
            color: var(--text-secondary);
            font-weight: 400;
            margin-top: 2px;
            margin-left: 0;
            line-height: 1.2;
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 1rem;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-secondary);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            font-family: var(--font-heading);
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .btn-back:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }

        /* ── Form Sections ── */
        .form-section {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.25rem;
        }

        .form-section-title {
            font-family: var(--font-heading);
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 0.75rem;
        }

        .form-row.single {
            grid-template-columns: 1fr;
        }

        /* Collapsible Sections */
        .form-section-title {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .form-section-title .chevron {
            font-size: 0.8rem;
            transition: transform 0.3s ease;
            transform: rotate(180deg);
        }

        .form-section.collapsed .chevron {
            transform: rotate(0deg);
        }

        .form-section.collapsed .form-section-title {
            margin-bottom: 0;
        }

        .form-group label {
            display: block;
            font-family: var(--font-heading);
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-bottom: 0.4rem;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.7rem 1rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            color: var(--text-primary);
            font-family: var(--font-heading);
            font-size: 0.95rem;
            font-variant-numeric: lining-nums tabular-nums;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: rgba(61, 155, 233, 0.4);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 0 0 3px rgba(61, 155, 233, 0.08);
        }

        .form-group textarea {
            min-height: 220px;
            resize: vertical;
            line-height: 1.7;
        }

        /* ── Selector Field (opens modal) ── */
        .selector-field {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0.7rem 1rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            color: var(--text-muted);
            font-family: var(--font-heading);
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .selector-field:hover {
            border-color: rgba(61, 155, 233, 0.3);
            background: rgba(255, 255, 255, 0.06);
        }

        .selector-field.has-value {
            color: var(--text-primary);
        }

        .selector-field .selector-arrow {
            font-size: 0.7rem;
            opacity: 0.5;
            transition: transform 0.2s;
        }

        /* ── Selector Modal ── */
        .selector-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .selector-modal-overlay.active {
            display: flex;
        }

        .selector-modal {
            background: #1a1b2e;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            width: 90%;
            max-width: 520px;
            max-height: 70vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
            animation: modalSlideIn 0.2s ease;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-10px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .selector-modal-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1.2rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .selector-modal-header h3 {
            font-family: var(--font-heading);
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
            flex: 1;
        }

        .selector-modal-search {
            padding: 0.75rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .selector-modal-search input {
            width: 100%;
            padding: 0.65rem 1rem;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: var(--text-primary);
            font-family: var(--font-heading);
            font-size: 0.95rem;
            box-sizing: border-box;
            transition: all 0.2s;
        }

        .selector-modal-search input:focus {
            outline: none;
            border-color: rgba(61, 155, 233, 0.4);
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 0 0 3px rgba(61, 155, 233, 0.08);
        }

        .selector-modal-body {
            overflow-y: auto;
            flex: 1;
            padding: 0.5rem 0;
        }

        .selector-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1.5rem;
            font-family: var(--font-heading);
            font-size: 0.95rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }

        .selector-item:hover {
            background: rgba(61, 155, 233, 0.08);
            color: var(--text-primary);
        }

        .selector-item .item-icon {
            font-size: 1.1rem;
            width: 28px;
            text-align: center;
            flex-shrink: 0;
        }

        .selector-item .item-text {
            flex: 1;
        }

        .selector-item .item-text .item-subtitle {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 0.15rem;
        }

        .selector-item.selected {
            background: rgba(61, 155, 233, 0.12);
            color: #3d9be9;
        }

        .selector-item mark {
            background: rgba(61, 155, 233, 0.25);
            color: var(--text-primary);
            border-radius: 2px;
            padding: 0 1px;
        }

        .selector-no-results {
            padding: 2rem 1.5rem;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.9rem;
            font-style: italic;
        }

        /* ── Text Area Row with Buttons ── */
        .text-actions {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }

        .btn-text-action {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 0.95rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            color: var(--text-secondary);
            font-family: var(--font-heading);
            font-size: 0.88rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-text-action:hover {
            background: rgba(61, 155, 233, 0.1);
            border-color: rgba(61, 155, 233, 0.25);
            color: #3d9be9;
        }

        .btn-text-action.recording {
            background: rgba(255, 80, 80, 0.15);
            border-color: rgba(255, 80, 80, 0.3);
            color: #ff5050;
            animation: pulse-rec 1.5s infinite;
        }

        @keyframes pulse-rec {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }
        }

        .textarea-wrapper {
            position: relative;
        }

        .textarea-wrapper textarea {
            width: 100%;
            min-height: 220px;
            padding: 0.9rem 3.2rem 0.9rem 1rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            color: var(--text-primary);
            font-family: var(--font-heading);
            font-size: 1rem;
            line-height: 1.7;
            resize: vertical;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .textarea-wrapper textarea::placeholder {
            color: var(--text-muted);
        }

        .textarea-wrapper textarea:focus {
            outline: none;
            border-color: rgba(61, 155, 233, 0.4);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 0 0 3px rgba(61, 155, 233, 0.08);
        }

        .btn-mic-inline {
            position: absolute;
            right: 10px;
            bottom: 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            color: var(--text-muted);
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.2s;
        }

        .btn-mic-inline:hover {
            background: rgba(61, 155, 233, 0.15);
            color: #3d9be9;
        }

        .btn-mic-inline.active {
            background: rgba(255, 80, 80, 0.2);
            border-color: rgba(255, 80, 80, 0.3);
            color: #ff5050;
            animation: pulse-rec 1.5s infinite;
        }

        .btn-help-inline {
            position: absolute;
            right: 54px;
            bottom: 12px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            color: var(--text-muted);
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.2s;
        }

        .btn-help-inline:hover {
            background: rgba(61, 155, 233, 0.15);
            color: #3d9be9;
            border-color: rgba(61, 155, 233, 0.3);
        }

        /* ── Audio Recorder ── */
        .audio-controls {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .btn-rec {
            padding: 0.6rem 1.2rem;
            border-radius: 10px;
            font-family: var(--font-heading);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s;
            border: 1px solid;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        .btn-rec.record {
            background: rgba(255, 80, 80, 0.12);
            border-color: rgba(255, 80, 80, 0.25);
            color: #ff5050;
        }

        .btn-rec.record:hover {
            background: rgba(255, 80, 80, 0.2);
        }

        .btn-rec.stop {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.12);
            color: var(--text-secondary);
        }

        .btn-rec.stop:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .btn-rec:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .rec-timer {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1rem;
            color: var(--text-secondary);
            min-width: 55px;
        }

        .rec-timer.active {
            color: #ff5050;
        }

        .waveform-container {
            flex: 1;
            height: 40px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            overflow: hidden;
        }

        .waveform-container canvas {
            width: 100%;
            height: 100%;
        }

        /* ── Items Table (Audio / Files) ── */
        .items-table {
            width: 100%;
            table-layout: fixed;
            /* Force column widths */
            border-collapse: separate;
            border-spacing: 0;
        }

        .items-table thead th {
            font-family: var(--font-heading);
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            text-align: left;
            padding: 0.5rem 0.6rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        #andamento-fileTable thead th:nth-child(2) {
            width: 60%;
        }

        #andamento-audioTable thead th:nth-child(2) {
            width: 200px;
        }

        #andamento-audioTable thead th:nth-child(3) {
            text-align: center;
        }

        #andamento-audioTable tbody td:nth-child(3) {
            text-align: center;
            vertical-align: middle;
        }

        .items-table tbody tr {
            transition: background 0.15s;
            cursor: grab;
        }

        .items-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        .items-table tbody tr.dragging {
            opacity: 0.5;
            background: rgba(61, 155, 233, 0.08);
        }

        .items-table tbody td {
            padding: 0.6rem 0.7rem;
            font-size: 0.92rem;
            color: var(--text-secondary);
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            vertical-align: middle;
        }

        .items-table .item-name {
            font-weight: 500;
            color: var(--text-primary);
        }

        .items-table .item-actions {
            display: flex;
            gap: 0.3rem;
            align-items: center;
        }

        .items-table .item-actions button {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 6px;
            color: var(--text-muted);
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.15s;
        }

        .items-table .item-actions button:hover {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-primary);
        }

        .items-table .item-actions button.delete:hover {
            background: rgba(255, 80, 80, 0.15);
            color: #ff5050;
            border-color: rgba(255, 80, 80, 0.2);
        }

        /* ── Custom Audio Player ── */
        .custom-player {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 20px;
            padding: 0.3rem 0.6rem;
            width: 100%;
            margin: 0 auto;
            max-width: 480px;
        }

        .custom-player .cp-play {
            background: none;
            border: none;
            color: var(--accent-blue);
            font-size: 1.1rem;
            cursor: pointer;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.2s, transform 0.15s;
            flex-shrink: 0;
        }

        .custom-player .cp-play:hover {
            background: rgba(61, 155, 233, 0.15);
            transform: scale(1.1);
        }

        .custom-player .cp-progress-wrap {
            flex: 1;
            height: 6px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .custom-player .cp-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
            border-radius: 3px;
            transition: width 0.1s linear;
        }

        .custom-player .cp-time {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7rem;
            color: var(--text-muted);
            min-width: 32px;
            text-align: right;
            flex-shrink: 0;
            user-select: none;
        }

        .original-badge {
            font-size: 0.65rem;
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-muted);
            padding: 0.1rem 0.3rem;
            border-radius: 4px;
            margin-left: 0.5rem;
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
            opacity: 0.7;
            user-select: none;
        }

        .custom-player .cp-speed {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-muted);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.62rem;
            font-weight: 600;
            cursor: pointer;
            padding: 0.15rem 0.35rem;
            border-radius: 4px;
            flex-shrink: 0;
            transition: all 0.15s;
            user-select: none;
            min-width: 28px;
            text-align: center;
        }

        .custom-player .cp-speed:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }

        .custom-player .cp-speed.fast {
            color: var(--accent-orange);
            border-color: rgba(255, 149, 0, 0.25);
        }

        .custom-player .cp-dl {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 0.85rem;
            cursor: pointer;
            padding: 0.15rem;
            flex-shrink: 0;
            transition: color 0.15s, transform 0.15s;
            display: flex;
            align-items: center;
        }

        .custom-player .cp-dl:hover {
            color: var(--accent-green);
            transform: scale(1.15);
        }

        .empty-list {
            text-align: center;
            padding: 1.5rem;
            color: var(--text-muted);
            font-size: 0.9rem;
            font-style: italic;
        }

        /* Editable name input */
        .editable-name {
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-primary);
            font-family: var(--font-heading);
            font-size: 0.84rem;
            font-weight: 500;
            padding: 0.2rem 0.4rem;
            border-radius: 6px;
            width: 100%;
            min-width: 80px;
            transition: all 0.2s;
        }

        .editable-name:hover {
            border-color: rgba(255, 255, 255, 0.1);
        }

        .editable-name:focus {
            outline: none;
            border-color: rgba(61, 155, 233, 0.4);
            background: rgba(255, 255, 255, 0.04);
        }

        /* ── File Drop Zone ── */
        .drop-zone {
            border: 2px dashed rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
            margin-bottom: 1rem;
        }

        .drop-zone:hover,
        .drop-zone.dragover {
            border-color: rgba(61, 155, 233, 0.4);
            background: rgba(61, 155, 233, 0.04);
        }

        .drop-zone-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .drop-zone-text {
            font-family: var(--font-heading);
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 0.75rem;
        }

        .drop-zone-text strong {
            color: #3d9be9;
        }

        .btn-browse {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 1.1rem;
            background: rgba(61, 155, 233, 0.1);
            border: 1px solid rgba(61, 155, 233, 0.25);
            border-radius: 10px;
            color: #3d9be9;
            font-family: var(--font-heading);
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-browse:hover {
            background: rgba(61, 155, 233, 0.18);
        }

        /* ── Action Buttons ── */
        .action-bar {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 0.5rem;
            padding-bottom: 2rem;
        }

        .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.4rem;
            border-radius: 12px;
            font-family: var(--font-heading);
            font-size: 0.92rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s;
            border: 1px solid;
        }

        .btn-action.primary {
            background: rgba(61, 155, 233, 0.15);
            border-color: rgba(61, 155, 233, 0.3);
            color: #3d9be9;
        }

        .btn-action.primary:hover {
            background: rgba(61, 155, 233, 0.25);
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(61, 155, 233, 0.2);
        }

        .btn-action.whatsapp {
            background: rgba(37, 211, 102, 0.1);
            border-color: rgba(37, 211, 102, 0.25);
            color: #25d366;
        }

        .btn-action.whatsapp:hover {
            background: rgba(37, 211, 102, 0.2);
            transform: translateY(-1px);
        }

        .btn-action.secondary {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.1);
            color: var(--text-secondary);
        }

        .btn-action.secondary:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateY(-1px);
        }

        /* ── Modal ── */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: #1a1b2e;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            width: 90%;
            max-width: 770px;
            height: 85vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.2rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .modal-header h3 {
            font-family: var(--font-heading);
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .modal-close {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            color: var(--text-muted);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.2s;
        }

        .modal-close:hover {
            background: rgba(255, 80, 80, 0.1);
            color: #ff5050;
        }

        .modal-body {
            padding: 1.2rem 1.5rem;
            overflow-y: auto;
            flex: 1;
        }

        .modal-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
        }

        /* Template Modal — Search */
        .template-search {
            padding: 0.75rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            position: relative;
        }

        .template-search input {
            width: 100%;
            padding: 0.65rem 2.5rem 0.65rem 1rem;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: var(--text-primary);
            font-family: var(--font-heading);
            font-size: 0.95rem;
            box-sizing: border-box;
            transition: all 0.2s;
        }

        .template-search input:focus {
            outline: none;
            border-color: rgba(61, 155, 233, 0.4);
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 0 0 3px rgba(61, 155, 233, 0.08);
        }

        .template-search-clear {
            position: absolute;
            right: 1.8rem;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.06);
            border: none;
            border-radius: 50%;
            color: var(--text-muted);
            width: 22px;
            height: 22px;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.7rem;
            transition: all 0.15s;
        }

        .template-search-clear:hover {
            background: rgba(255, 80, 80, 0.15);
            color: #ff5050;
        }

        .template-search-clear.visible {
            display: flex;
        }

        /* Template Modal — Tag Breadcrumbs */
        .template-tags {
            padding: 0.6rem 1.5rem;
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .template-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.35rem 0.75rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            color: var(--text-secondary);
            font-family: var(--font-heading);
            font-size: 0.82rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .template-tag:hover {
            background: rgba(61, 155, 233, 0.08);
            border-color: rgba(61, 155, 233, 0.2);
        }

        .template-tag.active {
            background: rgba(61, 155, 233, 0.15);
            border-color: rgba(61, 155, 233, 0.35);
            color: #3d9be9;
        }

        .template-tag .tag-count {
            font-size: 0.7rem;
            opacity: 0.6;
        }

        .template-tag .tag-clear {
            font-size: 0.7rem;
            margin-left: 0.15rem;
            opacity: 0.5;
        }

        /* Template Modal — Subtag row */
        .template-subtags {
            padding: 0.4rem 1.5rem 0.5rem;
            display: none;
            gap: 0.35rem;
            flex-wrap: wrap;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .template-subtags.visible {
            display: flex;
        }

        .template-subtag {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.28rem 0.6rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 16px;
            color: var(--text-muted);
            font-family: var(--font-heading);
            font-size: 0.78rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .template-subtag:hover {
            background: rgba(61, 155, 233, 0.06);
            color: var(--text-secondary);
        }

        .template-subtag.active {
            background: rgba(61, 155, 233, 0.12);
            border-color: rgba(61, 155, 233, 0.25);
            color: #3d9be9;
        }

        /* Template groups */
        .template-group {
            margin-bottom: 1.25rem;
        }

        .template-group-title {
            font-family: var(--font-heading);
            font-size: 0.82rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
            padding-bottom: 0.3rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .template-item {
            padding: 0.8rem 1rem;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            margin-bottom: 0.4rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .template-item:hover {
            background: rgba(61, 155, 233, 0.08);
            border-color: rgba(61, 155, 233, 0.2);
        }

        .template-item-title {
            font-family: var(--font-heading);
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .template-item-preview {
            font-size: 0.82rem;
            color: var(--text-muted);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .template-item mark {
            background: rgba(61, 155, 233, 0.25);
            color: var(--text-primary);
            border-radius: 2px;
            padding: 0 1px;
        }

        .template-no-results {
            padding: 2rem 1.5rem;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.9rem;
            font-style: italic;
        }

        /* ── Edit Templates Modal — Master-Detail Layout ── */
        .edit-modal-layout {
            display: flex;
            height: 75vh;
            overflow: hidden;
        }

        /* Left panel — template list */
        .edit-panel-list {
            width: 280px;
            min-width: 280px;
            border-right: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            flex-direction: column;
        }

        .edit-panel-search {
            padding: 0.75rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .edit-panel-search input {
            width: 100%;
            padding: 0.5rem 0.75rem;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--font-heading);
            font-size: 0.85rem;
            box-sizing: border-box;
        }

        .edit-panel-search input:focus {
            outline: none;
            border-color: rgba(61, 155, 233, 0.4);
            background: rgba(255, 255, 255, 0.08);
        }

        .edit-panel-filters {
            padding: 0.5rem 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .edit-panel-filters select {
            width: 100%;
            padding: 0.4rem 0.65rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--font-heading);
            font-size: 0.8rem;
            box-sizing: border-box;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.6rem center;
            padding-right: 1.8rem;
        }

        .edit-panel-filters select:focus {
            outline: none;
            border-color: rgba(61, 155, 233, 0.4);
        }

        .edit-panel-filters select option {
            background: #1a1b2e;
            color: var(--text-primary);
        }

        .edit-list-scroll {
            flex: 1;
            overflow-y: auto;
            padding: 0.5rem;
        }

        .edit-list-item {
            padding: 0.6rem 0.75rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
            margin-bottom: 2px;
        }

        .edit-list-item:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        .edit-list-item.active {
            background: rgba(61, 155, 233, 0.1);
            border-left: 3px solid #3d9be9;
        }

        .edit-list-item-title {
            font-family: var(--font-heading);
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.15rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .edit-list-item-cat {
            font-size: 0.72rem;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .edit-list-add {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.55rem;
            margin: 0.3rem 0;
            background: rgba(61, 155, 233, 0.06);
            border: 1px dashed rgba(61, 155, 233, 0.2);
            border-radius: 8px;
            color: #3d9be9;
            font-family: var(--font-heading);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }

        .edit-list-add:hover {
            background: rgba(61, 155, 233, 0.12);
        }

        /* Right panel — edit form */
        .edit-panel-form {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .edit-form-body {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
        }

        .edit-form-footer {
            padding: 0.75rem 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            flex-shrink: 0;
        }

        .edit-form-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            gap: 0.5rem;
        }

        .edit-form-empty .icon {
            font-size: 2.5rem;
            opacity: 0.4;
        }

        .edit-form-empty .text {
            font-family: var(--font-heading);
            font-size: 0.9rem;
        }

        .edit-form-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.2rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .edit-form-header h4 {
            font-family: var(--font-heading);
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .edit-card-delete {
            background: rgba(255, 80, 80, 0.08);
            border: 1px solid rgba(255, 80, 80, 0.15);
            border-radius: 8px;
            color: rgba(255, 80, 80, 0.7);
            padding: 0.4rem 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.35rem;
            cursor: pointer;
            font-family: var(--font-heading);
            font-size: 0.78rem;
            font-weight: 500;
            transition: all 0.2s;
        }

        .edit-card-delete:hover {
            background: rgba(255, 80, 80, 0.18);
            color: #ff5050;
        }

        .edit-card-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            margin-bottom: 0.9rem;
        }

        .edit-card-row.single {
            grid-template-columns: 1fr;
        }

        .edit-card-field label {
            display: block;
            font-family: var(--font-heading);
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-bottom: 0.35rem;
        }

        .edit-card-field input,
        .edit-card-field select,
        .edit-card-field textarea {
            width: 100%;
            padding: 0.6rem 0.9rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--font-heading);
            font-size: 0.92rem;
            box-sizing: border-box;
            transition: all 0.2s;
        }

        .edit-card-field select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.7rem center;
            padding-right: 2rem;
        }

        .edit-card-field select option {
            background: #1a1b2e;
            color: var(--text-primary);
        }

        .edit-card-field input:focus,
        .edit-card-field select:focus,
        .edit-card-field textarea:focus {
            outline: none;
            border-color: rgba(61, 155, 233, 0.4);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 0 0 3px rgba(61, 155, 233, 0.08);
        }

        .edit-card-field textarea {
            min-height: 140px;
            resize: vertical;
            line-height: 1.6;
        }

        .edit-toast {
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-family: var(--font-heading);
            font-size: 0.82rem;
            font-weight: 500;
            text-align: center;
            margin: 0 1.5rem;
            animation: editToastIn 0.3s ease;
        }

        .edit-toast.success {
            background: rgba(76, 175, 80, 0.12);
            border: 1px solid rgba(76, 175, 80, 0.25);
            color: #66bb6a;
        }

        .edit-toast.error {
            background: rgba(255, 80, 80, 0.12);
            border: 1px solid rgba(255, 80, 80, 0.25);
            color: #ff6b6b;
        }

        @keyframes editToastIn {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .btn-modal {
            padding: 0.55rem 1.1rem;
            border-radius: 10px;
            font-family: var(--font-heading);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid;
            transition: all 0.2s;
        }

        .btn-modal.save {
            background: rgba(61, 155, 233, 0.15);
            border-color: rgba(61, 155, 233, 0.3);
            color: #3d9be9;
        }

        .btn-modal.save:hover {
            background: rgba(61, 155, 233, 0.25);
        }

        .btn-modal.cancel {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
            color: var(--text-muted);
        }

        .btn-modal.add {
            background: rgba(13, 178, 107, 0.1);
            border-color: rgba(13, 178, 107, 0.25);
            color: #0DB26B;
            margin-bottom: 1rem;
        }

        .drag-handle {
            cursor: grab;
            color: var(--text-muted);
            font-size: 0.85rem;
            user-select: none;
        }

        /* ── Responsive ── */
        @media (max-width: 768px) {
            .form-row {
                grid-template-columns: 1fr;
            }

            .audio-controls {
                flex-wrap: wrap;
            }

            .action-bar {
                flex-direction: column;
            }

            .btn-action {
                justify-content: center;
            }

            .page-header-bar {
                flex-direction: column;
                align-items: flex-start;
            }

            /* Mobile Items Table Layout (Audio & Files) */
            @media (max-width: 768px) {

                /* Container Styles */
                .items-table,
                .items-table tbody,
                .items-table tr,
                .items-table td {
                    display: block;
                }

                .items-table thead {
                    display: none;
                }

                /* Row Card Style */
                .items-table tr {
                    display: flex;
                    flex-wrap: wrap;
                    background: rgba(255, 255, 255, 0.03);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 12px;
                    padding: 0.85rem;
                    margin-bottom: 0.85rem;
                    gap: 0.5rem;
                    align-items: center;
                }

                /* Drag Handle & Desktop Ext */
                .items-table td:nth-child(1),
                .desktop-only {
                    display: none !important;
                }

                /* Line 1: Name (Full Width) */
                .items-table td:nth-child(2),
                .items-table td.col-name {
                    width: 100% !important;
                    order: 1;
                    font-size: 1rem;
                    font-weight: 600;
                    color: var(--text-primary);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    border: none;
                    padding: 0;
                }

                /* Editable Name Input */
                .editable-name {
                    flex: 1;
                    min-width: 0;
                    width: 100%;
                    background: transparent;
                    border: 1px solid transparent;
                    color: inherit;
                    font-family: inherit;
                    font-size: inherit;
                    font-weight: inherit;
                    padding: 0;
                }

                .editable-name:focus {
                    border-bottom: 1px solid var(--primary-color);
                    outline: none;
                }

                /* Ext Elements */
                .ext-mobile {
                    display: inline !important;
                }

                /* Line 2 Left: Size/Info */
                .items-table td:nth-last-child(2),
                .items-table td.col-size {
                    order: 2;
                    flex: 1;
                    /* Takes available space */
                    display: flex;
                    align-items: center;
                    border: none;
                    padding: 0;
                }

                /* Line 2 Right: Actions */
                .items-table td:last-child,
                .items-table td.col-actions {
                    order: 3;
                    width: auto;
                    display: flex;
                    justify-content: flex-end;
                    border: none;
                    padding: 0;
                }

                .items-table .item-actions {
                    display: flex;
                    gap: 0.4rem;
                }

                .items-table .item-actions button {
                    flex: none;
                    width: 32px;
                    height: 32px;
                }

                .items-table .custom-player {
                    max-width: 100%;
                }
            }

            /* Mobile Recorder Layout */
            .audio-controls {
                gap: 0.75rem !important;
                row-gap: 0.75rem !important;
            }

            .rec-timer {
                order: 1;
                margin: 0;
            }

            .waveform-container {
                order: 2;
                flex: 1 1 auto;
                min-width: 150px;
            }

            .btn-rec {
                gap: 0.5rem;
            }

            /* Mobile File Table Layout */
            #andamento-fileTable,
            #andamento-fileTable tbody {
                display: block;
                width: 100%;
            }

            #andamento-fileTable thead {
                display: none !important;
            }

            #andamento-fileTable tr {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 12px;
                padding: 0.8rem 1rem;
                margin-bottom: 0.8rem;
            }

            #andamento-fileTable td {
                padding: 0;
                border: none;
                display: block;
            }

            /* Line 1: Name (Full Width) */
            #andamento-fileTable td:nth-child(2) {
                width: 100%;
                order: 1;
                margin-bottom: 0.6rem;
            }

            #andamento-fileTable td:nth-child(2) input {
                width: 100%;
                background: rgba(0, 0, 0, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.1);
                padding: 0.4rem;
            }

            /* Line 2 Left: Size */
            #andamento-fileTable td:nth-child(3) {
                order: 2;
                width: auto;
                color: var(--text-muted);
                font-size: 0.8rem;
                margin-right: auto;
                /* Push actions to right */
                display: flex;
                align-items: center;
            }

            /* Line 2 Right: Actions */
            #andamento-fileTable td:nth-child(4) {
                order: 3;
                width: auto;
            }

            #andamento-fileTable .item-actions {
                display: flex;
                gap: 0.4rem;
                margin-top: 0;
            }

            #andamento-fileTable .item-actions button {
                width: 32px;
                height: 32px;
                flex: none;
                /* Don't stretch */
            }

            /* Hide Drag Handle */
            #andamento-fileTable td:nth-child(1) {
                display: none;
            }

            /* Mobile Audio Table Layout */
            #andamento-audioTable,
            #andamento-audioTable tbody {
                display: block;
                width: 100%;
            }

            #andamento-audioTable thead {
                display: none !important;
            }

            #andamento-audioTable tr {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 16px;
                padding: 1.2rem;
                margin-bottom: 1rem;
                gap: 1rem;
            }

            #andamento-audioTable td {
                padding: 0;
                border: none;
                display: block;
                width: 100%;
            }

            #andamento-audioTable td:nth-child(1) {
                display: none !important;
            }

            /* Line 1: Name and Badge */
            #andamento-audioTable td:nth-child(2) {
                order: 1;
                font-size: 1.1rem;
                font-weight: 600;
                color: var(--text-primary);
                text-align: left;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 0.5rem;
            }

            /* Line 2: Player */
            #andamento-audioTable td:nth-child(3) {
                order: 2;
                display: flex;
                justify-content: center;
            }

            /* Fix Player inside Mobile to use full width possible */
            #andamento-audioTable .custom-player {
                width: 100%;
                max-width: 100%;
            }

            /* Line 3: Actions */
            #andamento-audioTable td:nth-child(4) {
                order: 3;
                display: flex;
                justify-content: center;
            }

            #andamento-audioTable .item-actions {
                display: flex;
                justify-content: center;
                gap: 1rem;
                margin-top: 0.5rem;
            }

            #andamento-audioTable .item-actions button {
                width: 44px;
                height: 44px;
                font-size: 1.1rem;
                border-radius: 12px;
                flex: none;
            }
        }

        .btn-icon-svg {
            width: 1.25em;
            height: 1.25em;
            fill: currentColor;
            margin-right: 0.5rem;
            flex-shrink: 0;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            top: -1px;
        }

        /* ── Semantic Structural Classes ── */
        .andamento-form {
            display: flex;
            flex-direction: column;
            gap: 0;
            /* Inherits main spacing from sections */
            width: 100%;
        }

        .andamentos-acoes-row {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        .andamentos-acoes-row button {
            flex: 1;
            justify-content: center;
        }