@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

        :root {
            --bg-primary: #0a0e1a;
            --bg-secondary: #111827;
            --bg-card: #1a2235;
            --bg-card-hover: #1e2a42;
            --accent-blue: #3b82f6;
            --accent-cyan: #06b6d4;
            --accent-green: #10b981;
            --accent-orange: #f59e0b;
            --accent-red: #ef4444;
            --accent-purple: #8b5cf6;
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --border-color: #1e293b;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background:
                radial-gradient(ellipse at 20% 0%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 100%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        /* ========== HEADER ========== */
        .header {
            position: sticky;
            top: 0;
            z-index: 200;
            background: rgba(10, 14, 26, 0.92);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-color);
            padding: 0 1.5rem;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header-logo {
            width: 34px; height: 34px;
            background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
            border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: 800; color: white;
        }

        .header-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
        .header-sub { font-size: 0.78rem; color: var(--text-muted); }

        .header-right { display: flex; align-items: center; gap: 0.75rem; }

        .save-indicator {
            font-size: 0.75rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .save-indicator.visible { opacity: 1; }
        .save-indicator .dot {
            width: 6px; height: 6px;
            background: var(--accent-green);
            border-radius: 50%;
        }

        .hamburger-btn {
            display: none;
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            padding: 6px 10px;
            cursor: pointer;
            font-size: 1.2rem;
        }

        /* ========== PROGRESS BAR ========== */
        .progress-bar-container {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            padding: 12px 1.5rem;
            display: none;
            position: sticky;
            top: 60px;
            z-index: 150;
        }
        .progress-bar-container.visible { display: block; }

        .progress-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .progress-info span {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .progress-info .step-label { font-weight: 600; color: var(--text-primary); }

        .progress-track {
            width: 100%;
            height: 4px;
            background: var(--border-color);
            border-radius: 4px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
            border-radius: 4px;
            transition: width 0.4s ease;
        }

        /* ========== LAYOUT ========== */
        .app-layout {
            display: none;
            position: relative;
            min-height: calc(100vh - 60px);
        }
        .app-layout.visible { display: flex; }

        /* ========== SIDEBAR ========== */
        .sidebar {
            width: 280px;
            min-width: 280px;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border-color);
            position: sticky;
            top: 96px;
            height: calc(100vh - 96px);
            overflow-y: auto;
            padding: 1rem 0;
            z-index: 100;
        }

        .sidebar-title {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            padding: 0 1rem;
            margin-bottom: 0.75rem;
        }

        .sidebar-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 1rem;
            font-size: 0.82rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
            border-left: 3px solid transparent;
        }
        .sidebar-item:hover {
            background: var(--bg-card);
            color: var(--text-primary);
        }
        .sidebar-item.active {
            background: rgba(59, 130, 246, 0.08);
            color: var(--accent-blue);
            border-left-color: var(--accent-blue);
        }
        .sidebar-item.complete .si-status { color: var(--accent-green); }
        .sidebar-item.partial .si-status { color: var(--accent-orange); }

        .si-status {
            font-size: 0.9rem;
            width: 18px;
            text-align: center;
            flex-shrink: 0;
        }
        .si-label { flex: 1; line-height: 1.3; }

        /* Mobile sidebar overlay */
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 300;
        }
        .sidebar-overlay.open { display: block; }

        .sidebar-mobile {
            display: none;
            position: fixed;
            left: 0; top: 0; bottom: 0;
            width: 300px;
            background: var(--bg-secondary);
            z-index: 310;
            overflow-y: auto;
            padding: 1rem 0;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        .sidebar-mobile.open { transform: translateX(0); }

        .sidebar-mobile .sidebar-close {
            display: flex;
            justify-content: flex-end;
            padding: 0 1rem 0.5rem;
        }
        .sidebar-mobile .sidebar-close button {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* ========== MAIN CONTENT ========== */
        .main-content {
            flex: 1;
            padding: 2rem;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        /* ========== INTRO SCREEN ========== */
        .intro-screen {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
            position: relative;
            z-index: 1;
        }

        .intro-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 3rem 2.5rem;
            width: 100%;
            max-width: 480px;
        }

        .intro-logo {
            width: 56px; height: 56px;
            background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; font-weight: 900; color: white;
            margin: 0 auto 1.5rem;
        }

        .intro-card h1 {
            text-align: center;
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: 0.25rem;
        }
        .intro-card .intro-subtitle {
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

        .form-group {
            margin-bottom: 1.25rem;
        }
        .form-group label {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }

        .form-input, .form-select {
            width: 100%;
            padding: 10px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.9rem;
            outline: none;
            transition: border-color 0.2s;
        }
        .form-input:focus, .form-select:focus {
            border-color: var(--accent-blue);
        }
        .form-select option {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .btn-primary {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            border: none;
            border-radius: 10px;
            color: white;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s, transform 0.1s;
            margin-top: 0.5rem;
        }
        .btn-primary:hover { opacity: 0.9; }
        .btn-primary:active { transform: scale(0.98); }
        .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

        .resume-link {
            text-align: center;
            margin-top: 1rem;
            font-size: 0.82rem;
        }
        .resume-link a {
            color: var(--accent-blue);
            text-decoration: none;
            cursor: pointer;
        }
        .resume-link a:hover { text-decoration: underline; }

        /* ========== STEP CONTAINER ========== */
        .step-wrapper {
            position: relative;
            overflow: hidden;
        }

        .step-panel {
            display: none;
            opacity: 0;
            transform: translateX(30px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .step-panel.active {
            display: block;
        }
        .step-panel.visible {
            opacity: 1;
            transform: translateX(0);
        }
        .step-panel.slide-left {
            transform: translateX(-30px);
        }

        .step-title {
            font-size: 1.4rem;
            font-weight: 800;
            margin-bottom: 0.25rem;
        }
        .step-impact {
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            padding: 8px 12px;
            background: rgba(59, 130, 246, 0.06);
            border-left: 3px solid var(--accent-blue);
            border-radius: 0 8px 8px 0;
        }

        .section-note {
            font-size: 0.82rem;
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
            padding: 10px 14px;
            background: rgba(59, 130, 246, 0.06);
            border: 1px solid rgba(59, 130, 246, 0.15);
            border-radius: 10px;
            line-height: 1.5;
        }

        .section-warning {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 1.5rem;
            padding: 16px 18px;
            background: rgba(245, 158, 11, 0.15);
            border-left: 4px solid var(--accent-orange);
            border-radius: 0 10px 10px 0;
            line-height: 1.6;
        }
        .section-warning-icon {
            font-size: 1.6rem;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .section-warning-text {
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .subsection {
            margin-bottom: 2rem;
        }
        .subsection-title {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--accent-cyan);
        }

        .question-block {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
        }

        .question-label {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 0.88rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            line-height: 1.5;
        }

        .q-status {
            flex-shrink: 0;
            width: 8px; height: 8px;
            border: 2px solid var(--text-muted);
            border-radius: 50%;
            margin-top: 5px;
            transition: all 0.3s;
        }
        .q-status.answered {
            background: var(--accent-green);
            border-color: var(--accent-green);
        }

        /* ========== CARD CHECKBOX ========== */
        .card-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .card-checkbox {
            flex: 1 1 calc(50% - 4px);
            min-width: 180px;
            padding: 10px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.82rem;
            color: var(--text-secondary);
            transition: all 0.2s;
            user-select: none;
        }
        .card-checkbox:hover {
            background: var(--bg-card-hover);
            border-color: rgba(59, 130, 246, 0.3);
        }
        .card-checkbox.selected {
            background: rgba(59, 130, 246, 0.1);
            border-color: var(--accent-blue);
            color: var(--text-primary);
        }

        .cc-check {
            width: 20px; height: 20px;
            border: 2px solid var(--border-color);
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        .card-checkbox.selected .cc-check {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
        }
        .cc-check::after {
            content: '';
            display: none;
            width: 5px; height: 9px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            margin-top: -2px;
        }
        .card-checkbox.selected .cc-check::after { display: block; }

        .cc-label { flex: 1; line-height: 1.4; }

        /* ========== PILL RADIO ========== */
        .pill-radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .pill-radio {
            padding: 8px 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.82rem;
            color: var(--text-secondary);
            transition: all 0.2s;
            user-select: none;
        }
        .pill-radio:hover {
            background: var(--bg-card-hover);
            border-color: rgba(59, 130, 246, 0.3);
        }
        .pill-radio.selected {
            background: rgba(59, 130, 246, 0.15);
            border-color: var(--accent-blue);
            color: var(--text-primary);
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
        }

        /* ========== TEXT / TEXTAREA ========== */
        .q-input {
            width: 100%;
            padding: 10px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.85rem;
            outline: none;
            transition: border-color 0.2s;
        }
        .q-input:focus { border-color: var(--accent-blue); }

        .q-textarea {
            width: 100%;
            padding: 10px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.85rem;
            outline: none;
            resize: none;
            min-height: 80px;
            overflow: hidden;
            transition: border-color 0.2s;
        }
        .q-textarea:focus { border-color: var(--accent-blue); }

        .char-count {
            text-align: right;
            font-size: 0.72rem;
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* ========== NUMBER INPUT ========== */
        .number-input-wrap {
            display: inline-flex;
            align-items: center;
            gap: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
        }

        .num-btn {
            width: 36px; height: 36px;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.1rem;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s;
        }
        .num-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }

        .num-value {
            width: 50px;
            text-align: center;
            background: none;
            border: none;
            border-left: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 600;
            outline: none;
            padding: 8px 0;
        }
        .num-value::-webkit-outer-spin-button,
        .num-value::-webkit-inner-spin-button { -webkit-appearance: none; }

        .num-suffix {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-left: 8px;
        }

        /* ========== TOGGLE SWITCH ========== */
        .toggle-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .toggle-switch {
            width: 44px; height: 24px;
            background: var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            position: relative;
            transition: background 0.3s;
            flex-shrink: 0;
        }
        .toggle-switch.on { background: var(--accent-green); }

        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 3px; left: 3px;
            width: 18px; height: 18px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        .toggle-switch.on::after { transform: translateX(20px); }

        .toggle-label {
            font-size: 0.82rem;
            color: var(--text-secondary);
        }

        /* ========== FILE UPLOAD ========== */
        .file-upload-zone {
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        .file-upload-zone:hover, .file-upload-zone.dragover {
            border-color: var(--accent-blue);
            background: rgba(59, 130, 246, 0.04);
        }
        .file-upload-zone .fuz-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        .file-upload-zone .fuz-text {
            font-size: 0.82rem;
            color: var(--text-secondary);
        }
        .file-upload-zone .fuz-hint {
            font-size: 0.72rem;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .file-upload-zone input[type="file"] { display: none; }

        .file-preview {
            display: none;
            margin-top: 0.75rem;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 0.8rem;
            color: var(--text-secondary);
            align-items: center;
            justify-content: space-between;
        }
        .file-preview.has-file { display: flex; }
        .file-preview .fp-remove {
            background: none; border: none;
            color: var(--accent-red);
            cursor: pointer;
            font-size: 0.9rem;
        }

        /* ========== CONDITIONAL (expand/collapse) ========== */
        .conditional-wrap {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease;
            opacity: 0;
        }
        .conditional-wrap.visible {
            max-height: 800px;
            opacity: 1;
        }

        /* ========== RANGE SLIDER ========== */
        .range-slider-wrap {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .range-slider-wrap input[type="range"] {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            background: var(--border-color);
            border-radius: 3px;
            outline: none;
        }
        .range-slider-wrap input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px; height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            cursor: pointer;
            border: 2px solid var(--bg-primary);
            box-shadow: 0 0 8px rgba(59,130,246,0.4);
        }
        .range-slider-wrap input[type="range"]::-moz-range-thumb {
            width: 22px; height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            cursor: pointer;
            border: 2px solid var(--bg-primary);
            box-shadow: 0 0 8px rgba(59,130,246,0.4);
        }
        .range-value {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--accent-blue);
            min-width: 28px;
            text-align: center;
        }

        /* ========== PERM TABLE INTERACTIVE ========== */
        .perm-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.75rem;
            margin-top: 0.5rem;
        }
        .perm-table th, .perm-table td {
            padding: 8px 6px;
            border: 1px solid var(--border-color);
            text-align: center;
        }
        .perm-table th {
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 0.7rem;
        }
        .perm-table td:first-child {
            text-align: left;
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 0.78rem;
            min-width: 100px;
        }
        .perm-table td {
            color: var(--text-secondary);
            font-size: 0.78rem;
        }

        .perm-toggle {
            width: 32px; height: 18px;
            background: var(--border-color);
            border-radius: 9px;
            cursor: pointer;
            position: relative;
            display: inline-block;
            transition: background 0.3s;
        }
        .perm-toggle.on { background: var(--accent-green); }
        .perm-toggle::after {
            content: '';
            position: absolute;
            top: 2px; left: 2px;
            width: 14px; height: 14px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        .perm-toggle.on::after { transform: translateX(14px); }

        .tooltip-sigla {
            cursor: help;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-underline-offset: 3px;
            text-decoration-color: var(--text-muted);
        }

        /* ========== COND NOTE ========== */
        .cond-note {
            font-size: 0.78rem;
            color: var(--accent-orange);
            padding: 6px 10px;
            background: rgba(245, 158, 11, 0.06);
            border-left: 3px solid var(--accent-orange);
            border-radius: 0 6px 6px 0;
            margin-top: 8px;
        }

        /* ========== NAV FOOTER ========== */
        .nav-footer {
            display: none;
            position: sticky;
            bottom: 0;
            z-index: 100;
            background: rgba(10, 14, 26, 0.92);
            backdrop-filter: blur(20px);
            border-top: 1px solid var(--border-color);
            padding: 12px 1.5rem;
            justify-content: space-between;
            align-items: center;
        }
        .nav-footer.visible { display: flex; }

        .nav-btn {
            padding: 10px 20px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            color: var(--text-secondary);
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .nav-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
        .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

        .nav-btn-next {
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            border: none;
            color: white;
        }
        .nav-btn-next:hover { opacity: 0.9; }

        /* ========== SUMMARY SCREEN ========== */
        .summary-section {
            margin-bottom: 1.5rem;
        }

        .summary-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px 12px 0 0;
            cursor: pointer;
            transition: background 0.2s;
        }
        .summary-header:hover { background: var(--bg-card-hover); }
        .summary-header.collapsed { border-radius: 12px; }

        .summary-header h3 { font-size: 0.9rem; font-weight: 700; }

        .summary-stats {
            font-size: 0.78rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .summary-stats .ss-count { color: var(--accent-green); font-weight: 600; }
        .summary-stats .ss-missing { color: var(--accent-orange); font-weight: 600; }

        .summary-chevron {
            transition: transform 0.2s;
            color: var(--text-muted);
        }
        .summary-header.collapsed .summary-chevron { transform: rotate(-90deg); }

        .summary-body {
            border: 1px solid var(--border-color);
            border-top: none;
            border-radius: 0 0 12px 12px;
            padding: 1rem;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .summary-body.hidden { display: none; }

        .summary-item {
            margin-bottom: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border-color);
        }
        .summary-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

        .summary-q {
            font-size: 0.82rem;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .summary-a {
            font-size: 0.8rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        .summary-a.unanswered {
            color: var(--accent-orange);
            font-style: italic;
        }

        .summary-total {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
        }

        .st-item {
            text-align: center;
            min-width: 100px;
        }
        .st-item .st-num {
            font-size: 2rem;
            font-weight: 800;
        }
        .st-item .st-label {
            font-size: 0.72rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .summary-actions {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .sa-btn {
            flex: 1;
            min-width: 150px;
            padding: 12px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
        }
        .sa-btn:hover { background: var(--bg-card-hover); }
        .sa-btn.sa-export {
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            border: none;
            color: white;
        }

        /* ========== FOOTER ========== */
        .app-footer {
            text-align: center;
            padding: 2rem 1rem;
            font-size: 0.72rem;
            color: var(--text-muted);
            border-top: 1px solid var(--border-color);
            position: relative;
            z-index: 1;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 768px) {
            .sidebar { display: none; }
            .hamburger-btn { display: block; }
            .sidebar-mobile { display: block; }

            .main-content { padding: 1.25rem; }

            .intro-card { padding: 2rem 1.5rem; }

            .card-checkbox { flex: 1 1 100%; min-width: 0; }

            .header-sub { display: none; }

            .perm-table { font-size: 0.65rem; }
            .perm-table th, .perm-table td { padding: 4px 3px; }
            .perm-table td:first-child { min-width: 70px; }
        }

        /* ========== AUDIO RECORDER ========== */
        .audio-recorder {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
        }

        .audio-record-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--accent-red);
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .audio-record-btn:hover {
            background: rgba(239, 68, 68, 0.2);
        }
        .audio-record-btn.recording {
            background: rgba(239, 68, 68, 0.3);
            border-color: var(--accent-red);
            animation: pulse-record 1.5s infinite;
        }

        @keyframes pulse-record {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
            50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
        }

        .audio-timer {
            font-size: 0.75rem;
            font-variant-numeric: tabular-nums;
            color: var(--accent-red);
            font-weight: 600;
        }

        .audio-playback {
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .audio-playback audio {
            height: 32px;
            border-radius: 8px;
        }

        .audio-remove-btn {
            font-size: 0.7rem;
            color: var(--text-muted);
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 3px 8px;
            cursor: pointer;
        }

        .audio-note {
            font-size: 0.68rem;
            color: var(--text-muted);
            font-style: italic;
            margin-top: 4px;
        }

        /* Summary respondent info */
        .summary-respondent {
            font-size: 0.72rem;
            color: var(--text-muted);
            font-style: italic;
            margin-top: 4px;
        }
        .summary-complement {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 6px;
            padding-left: 12px;
            border-left: 2px solid var(--border-color);
        }
        .summary-complement-meta {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-bottom: 2px;
        }

        /* ========== PRINT ========== */
        @media print {
            :root {
                --bg-primary: #fff;
                --bg-secondary: #f8f9fa;
                --bg-card: #fff;
                --text-primary: #111;
                --text-secondary: #333;
                --text-muted: #666;
                --border-color: #ddd;
            }
            body { background: #fff; color: #111; }
            body::before { display: none; }
            .header, .nav-footer, .progress-bar-container, .sidebar,
            .hamburger-btn, .sa-btn, .summary-actions, .save-indicator { display: none !important; }
            .app-layout { display: block !important; }
            .main-content { max-width: 100%; padding: 0; }
            .summary-body.hidden { display: block !important; }
            .summary-header.collapsed { border-radius: 12px 12px 0 0 !important; }
            .summary-chevron { display: none; }

            .print-header {
                display: block !important;
                text-align: center;
                padding: 2rem 0 1rem;
                border-bottom: 2px solid #111;
                margin-bottom: 2rem;
            }
            .print-header h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
            .print-header p { font-size: 0.85rem; color: #555; }

            .print-respondentes {
                display: block !important;
                margin: 1rem 0 1.5rem;
                padding: 12px 16px;
                border: 1px solid #ccc;
                border-radius: 8px;
                background: #f9f9f9;
            }
            .print-respondentes h3 {
                font-size: 0.9rem;
                margin-bottom: 8px;
            }
            .print-respondentes .pr-item {
                font-size: 0.8rem;
                color: #333;
                margin-bottom: 4px;
            }

            .print-footer {
                display: block !important;
                text-align: center;
                padding: 1rem 0;
                border-top: 1px solid #999;
                margin-top: 2rem;
                font-size: 0.8rem;
            }

            .summary-respondent {
                font-size: 0.72rem;
                color: #666;
                font-style: italic;
                margin-top: 4px;
            }
            .summary-complement {
                font-size: 0.75rem;
                color: #333;
                margin-top: 6px;
                padding-left: 12px;
                border-left: 2px solid #ccc;
            }
            .summary-complement-meta {
                font-size: 0.7rem;
                color: #666;
                margin-bottom: 2px;
            }
            .summary-audio-ref {
                font-size: 0.72rem;
                color: #555;
                font-style: italic;
            }

            .audio-recorder, .audio-playback, .audio-note { display: none !important; }

            .question-block { break-inside: avoid; }
            .card-checkbox.selected { border-color: #111; font-weight: 600; }
            .pill-radio.selected { border-color: #111; font-weight: 600; }
            .toggle-switch.on { background: #333; }
            .perm-toggle.on { background: #333; }
        }

        .print-header, .print-footer, .print-respondentes { display: none; }

        /* ========== DELEGATION MODAL ========== */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 500;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.open { display: flex; }

        .modal-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 2rem;
            width: 90%;
            max-width: 480px;
            position: relative;
        }
        .modal-card h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }

        .modal-close {
            position: absolute;
            top: 12px; right: 16px;
            background: none; border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
        }

        .modal-link-box {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 0.82rem;
            color: var(--accent-cyan);
            word-break: break-all;
            margin-bottom: 1rem;
            user-select: all;
        }

        .modal-actions {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .modal-actions .btn-primary { flex: 1; min-width: 140px; }

        .btn-whatsapp {
            width: 100%;
            padding: 12px;
            background: #25d366;
            border: none;
            border-radius: 10px;
            color: white;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .btn-whatsapp:hover { opacity: 0.9; }

        /* ========== DELEGATE BUTTON ========== */
        .nav-btn-delegate {
            background: var(--bg-card);
            border: 1px solid var(--accent-purple);
            color: var(--accent-purple);
        }
        .nav-btn-delegate:hover {
            background: rgba(139, 92, 246, 0.1);
            color: var(--text-primary);
        }

        /* ========== LOCKED SECTION ========== */
        .section-locked-banner {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(100, 116, 139, 0.1);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            margin-bottom: 1.5rem;
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .section-locked-banner .lock-icon { font-size: 1.2rem; }

        .question-block.locked {
            position: relative;
            opacity: 1;
        }

        /* === LOCKED-STRUCTURED: perguntas de escolha (checkbox, radio, toggle, number, range) === */
        .question-block.locked-structured > *:not(.complement-section):not(.locked-badge):not(.locked-answer-display) {
            pointer-events: none;
        }
        .question-block.locked-structured .q-input,
        .question-block.locked-structured .q-textarea,
        .question-block.locked-structured .number-input-wrap,
        .question-block.locked-structured .toggle-wrap,
        .question-block.locked-structured .range-slider-wrap,
        .question-block.locked-structured .file-upload-zone,
        .question-block.locked-structured .audio-recorder,
        .question-block.locked-structured .audio-note,
        .question-block.locked-structured .card-checkbox-group,
        .question-block.locked-structured .pill-radio-group,
        .question-block.locked-structured .char-count {
            display: none;
        }

        /* === LOCKED-FREETEXT: perguntas livres (textarea, text) — mostra resposta anterior, permite complementar === */
        .question-block.locked-freetext .q-input,
        .question-block.locked-freetext .q-textarea,
        .question-block.locked-freetext .number-input-wrap,
        .question-block.locked-freetext .toggle-wrap,
        .question-block.locked-freetext .range-slider-wrap,
        .question-block.locked-freetext .file-upload-zone,
        .question-block.locked-freetext .audio-recorder,
        .question-block.locked-freetext .audio-note,
        .question-block.locked-freetext .char-count {
            display: none;
        }

        /* Complemento sempre interativo em ambos os modos */
        .question-block.locked .complement-section {
            pointer-events: auto;
            opacity: 1;
        }
        /* Resposta exibida como texto legível */
        .locked-answer-display {
            background: rgba(59, 130, 246, 0.08);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 8px;
            padding: 10px 14px;
            margin-top: 8px;
            font-size: 0.85rem;
            color: var(--text-primary);
            line-height: 1.6;
        }
        .locked-answer-display .lad-label {
            font-size: 0.7rem;
            color: var(--accent-blue);
            font-weight: 600;
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .locked-answer-display .lad-value {
            color: var(--text-primary);
        }
        .locked-answer-display .lad-value ul {
            margin: 4px 0 0 16px;
            padding: 0;
        }
        .locked-answer-display .lad-value li {
            margin-bottom: 2px;
        }
        .locked-answer-display audio {
            margin-top: 6px;
            height: 32px;
            border-radius: 8px;
            width: 100%;
            max-width: 300px;
        }
        .locked-answer-display .lad-audio-label {
            font-size: 0.72rem;
            color: var(--accent-cyan);
            margin-top: 8px;
        }

        /* ========== DELEGATION RECEIVED SCREEN ========== */
        .delegation-info {
            background: rgba(139, 92, 246, 0.08);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 12px;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        .delegation-info h3 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--accent-purple);
            margin-bottom: 0.5rem;
        }
        .delegation-info p {
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .filter-toggle {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }
        .filter-btn {
            padding: 8px 16px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            color: var(--text-secondary);
            font-family: inherit;
            font-size: 0.82rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .filter-btn.active {
            background: rgba(139, 92, 246, 0.15);
            border-color: var(--accent-purple);
            color: var(--text-primary);
        }

        /* ========== COMPLETION SCREEN ========== */
        .completion-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 2.5rem;
            text-align: center;
            margin-bottom: 2rem;
        }
        .completion-card .check-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        .completion-card h2 {
            font-size: 1.4rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
        }
        .completion-card p {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
        }

        .respondent-chain {
            text-align: left;
            margin-top: 1rem;
        }
        .respondent-chain h4 {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.75rem;
        }
        .respondent-chain-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            font-size: 0.85rem;
            border-bottom: 1px solid var(--border-color);
        }
        .respondent-chain-item:last-child { border-bottom: none; }
        .respondent-chain-item .rci-num {
            width: 24px; height: 24px;
            background: rgba(59, 130, 246, 0.15);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--accent-blue);
            flex-shrink: 0;
        }

        .save-indicator.saving .dot { background: var(--accent-orange); }
        .save-indicator.error .dot { background: var(--accent-red); }

        /* ========== COMPLEMENTAR RESPOSTA ========== */
        .complement-section {
            margin-top: 12px;
            border-top: 1px solid var(--border-color);
            padding-top: 12px;
        }

        .complement-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--accent-cyan);
            background: rgba(6, 182, 212, 0.1);
            border: 1px solid rgba(6, 182, 212, 0.3);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .complement-btn:hover {
            background: rgba(6, 182, 212, 0.2);
            border-color: var(--accent-cyan);
        }

        .complement-form {
            margin-top: 10px;
            display: none;
        }
        .complement-form.open {
            display: block;
        }

        .complement-textarea {
            width: 100%;
            min-height: 80px;
            padding: 10px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.85rem;
            resize: vertical;
        }
        .complement-textarea:focus {
            outline: none;
            border-color: var(--accent-cyan);
        }

        .complement-actions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            justify-content: flex-end;
        }

        .complement-save {
            padding: 6px 16px;
            font-size: 0.75rem;
            font-weight: 600;
            color: white;
            background: var(--accent-cyan);
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
        .complement-cancel {
            padding: 6px 16px;
            font-size: 0.75rem;
            color: var(--text-secondary);
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
        }

        .complement-existing {
            margin-top: 10px;
        }

        .complement-item {
            background: rgba(6, 182, 212, 0.05);
            border: 1px solid rgba(6, 182, 212, 0.15);
            border-radius: 8px;
            padding: 10px 12px;
            margin-top: 6px;
            font-size: 0.82rem;
        }

        .complement-item-meta {
            font-size: 0.7rem;
            color: var(--accent-cyan);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .complement-item-text {
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* ========== PIN OTP INPUTS ========== */
        .pin-group {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 12px 0;
        }

        .pin-input {
            width: 52px;
            height: 58px;
            text-align: center;
            font-size: 1.5rem;
            font-weight: 700;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            color: var(--text-primary);
            caret-color: var(--accent-blue);
            transition: border-color 0.2s;
            -webkit-text-security: disc;
        }
        .pin-input:focus {
            outline: none;
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }
        .pin-input.error {
            border-color: var(--accent-red);
            animation: shake 0.3s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        .pin-error-msg {
            color: var(--accent-red);
            font-size: 0.78rem;
            text-align: center;
            margin-top: 8px;
            min-height: 1.2em;
        }

        /* ========== PERSONAL LINK MODAL ========== */
        .personal-link-modal {
            position: fixed;
            inset: 0;
            z-index: 500;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .personal-link-modal .modal-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
        }
        .personal-link-modal .modal-content {
            position: relative;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 2rem 2rem 1.5rem;
            max-width: 440px;
            width: 90%;
            text-align: center;
        }
        .personal-link-modal .modal-content h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .personal-link-modal .modal-content p {
            font-size: 0.88rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
            line-height: 1.5;
        }
        .link-box {
            display: flex;
            gap: 8px;
            margin-bottom: 1rem;
        }
        .link-box input {
            flex: 1;
            padding: 10px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.78rem;
        }
        .link-box button {
            padding: 10px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.2s;
        }
        .link-box button:hover { background: var(--bg-card-hover); }

        .modal-note {
            font-size: 0.78rem !important;
            color: var(--text-muted) !important;
            font-style: italic;
        }
        .modal-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 1rem;
        }
        .modal-actions button {
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .modal-actions button:hover { opacity: 0.85; }
        .modal-actions .btn-whatsapp {
            background: #25d366;
            color: white;
        }
        .modal-actions .btn-continue {
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            color: white;
        }

        /* ========== AUTH VIEWS TOGGLE ========== */
        .auth-view { display: none; }
        .auth-view.active { display: block; }

        .auth-switch-link {
            text-align: center;
            margin-top: 1rem;
            font-size: 0.82rem;
        }
        .auth-switch-link a {
            color: var(--accent-blue);
            text-decoration: none;
            cursor: pointer;
        }
        .auth-switch-link a:hover { text-decoration: underline; }

        /* ========== INTRO WRAPPER (side-by-side desktop) ========== */
        .intro-wrapper {
            display: flex;
            align-items: flex-start;
            gap: 2rem;
            width: 100%;
            max-width: 920px;
        }

        /* ========== GUIA PANEL ========== */
        .guia-panel {
            flex: 1;
            max-width: 400px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 1.5rem;
        }

        .guia-panel-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1.25rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border-color);
        }

        .guia-mobile-toggle {
            display: none;
        }

        .guia-steps {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .guia-step {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 10px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            transition: background 0.2s;
        }
        .guia-step:hover {
            background: var(--bg-card-hover);
        }

        .guia-icon {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(59, 130, 246, 0.08);
            border-radius: 9px;
        }

        .guia-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .guia-text strong {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .guia-text span {
            font-size: 0.75rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .guia-tips {
            margin-top: 12px;
            padding: 10px 14px;
            background: rgba(16, 185, 129, 0.05);
            border: 1px solid rgba(16, 185, 129, 0.12);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .guia-tip {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .guia-chevron {
            transition: transform 0.3s ease;
        }
        .guia-chevron.open {
            transform: rotate(180deg);
        }

        /* ========== MOBILE: guia vira collapsible dentro do card ========== */
        @media (max-width: 768px) {
            .intro-wrapper {
                flex-direction: column-reverse;
                align-items: center;
                gap: 0;
                max-width: 480px;
            }

            .guia-panel {
                max-width: 100%;
                width: 100%;
                background: none;
                border: none;
                padding: 0;
                margin-bottom: 1rem;
            }

            .guia-panel-header {
                display: none;
            }

            .guia-panel .guia-steps,
            .guia-panel .guia-tips {
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                margin: 0;
                transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
            }
            .guia-panel.open .guia-steps {
                max-height: 500px;
                opacity: 1;
                margin-bottom: 0;
            }
            .guia-panel.open .guia-tips {
                max-height: 200px;
                opacity: 1;
                margin-top: 12px;
            }

            .guia-mobile-toggle {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 10px 16px;
                background: rgba(59, 130, 246, 0.06);
                border: 1px solid rgba(59, 130, 246, 0.15);
                border-radius: 10px;
                color: var(--accent-blue);
                font-family: inherit;
                font-size: 0.85rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s;
                margin-bottom: 8px;
            }
            .guia-mobile-toggle:hover {
                background: rgba(59, 130, 246, 0.1);
            }
        }

        .welcome-back-icon {
            width: 56px; height: 56px;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px;
            margin: 0 auto 1rem;
        }

        .form-group-pin label {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 6px;
            text-align: center;
        }