body { background: #0a0a0a; font-family: 'MobCorp Sans', 'Inter', sans-serif; }
        .ob-wrap { max-width: 820px; margin: 0 auto; padding: 40px 20px 80px; }

        /* Cabeçalho */
        .ob-header { text-align: center; margin-bottom: 36px; }
        .ob-header img { height: 48px; width: auto; margin-bottom: 16px; }
        .ob-header h1,.ob-header h2 { font-size: 1.1rem; font-weight: 600; color: #aaa; margin: 0; letter-spacing: 0.5px; text-transform: uppercase; }

        /* Progress stepper */
        .ob-stepper { display: flex; justify-content: flex-start; gap: 0; margin-bottom: 36px; overflow-x: auto; padding: 6px 2px 12px; }
        .ob-step {
            display: flex; align-items: center; gap: 0;
        }
        .ob-step-dot {
            width: 32px; height: 32px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
            transition: all 0.3s;
        }
        .ob-step-dot.done   { background: #16a34a; color: #fff; }
        .ob-step-dot.active { background: #7c3aed; color: #fff; box-shadow: 0 0 0 4px rgba(124,58,237,0.25); }
        .ob-step-dot.pending{ background: #1c1c1c; color: #555; border: 1px solid #333; }
        .ob-step-label { font-size: 0.7rem; color: #555; white-space: nowrap; margin-top: 4px; }
        .ob-step-label.active { color: #a78bfa; font-weight: 600; }
        .ob-step-label.done   { color: #4ade80; }
        .ob-step-inner { display: flex; flex-direction: column; align-items: center; }
        .ob-step-line { width: 48px; height: 2px; background: #222; flex-shrink: 0; margin-bottom: 16px; }
        .ob-step-line.done { background: #16a34a; }

        /* Card do documento */
        .ob-card {
            background: #111;
            border: 1px solid #222;
            border-radius: 16px;
            overflow: hidden;
        }
        .ob-card-header {
            padding: 24px 32px;
            border-bottom: 1px solid #1a1a1a;
            display: flex; align-items: center; gap: 16px;
        }
        .ob-card-icon { font-size: 2rem; flex-shrink: 0; }
        .ob-card-title h2 { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 4px; }
        .ob-card-title p  { font-size: 0.82rem; color: #666; margin: 0; }
        .ob-badge-passo {
            margin-left: auto; flex-shrink: 0;
            background: rgba(124,58,237,0.15);
            border: 1px solid rgba(124,58,237,0.3);
            color: #a78bfa;
            font-size: 0.75rem; font-weight: 600;
            padding: 4px 12px; border-radius: 20px;
        }

        /* Corpo scrollável */
        .ob-doc-body {
            max-height: 420px;
            overflow-y: auto;
            padding: 28px 32px;
            color: #bbb;
            line-height: 1.8;
            font-size: 0.88rem;
            scroll-behavior: smooth;
        }
        .ob-doc-body::-webkit-scrollbar { width: 6px; }
        .ob-doc-body::-webkit-scrollbar-track { background: #0a0a0a; }
        .ob-doc-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
        .ob-doc-body h3 { color: #fff; font-size: 0.92rem; margin: 24px 0 8px; }
        .ob-doc-body p  { margin-bottom: 12px; }
        .ob-doc-body ul { padding-left: 20px; margin-bottom: 12px; }
        .ob-doc-body ul li { margin-bottom: 5px; }
        .ob-doc-body strong { color: #ddd; }

        /* Indicador de scroll */
        .ob-scroll-hint {
            text-align: center;
            padding: 8px;
            font-size: 0.75rem;
            color: #444;
            border-top: 1px solid #1a1a1a;
            display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .ob-scroll-hint.hidden { display: none; }

        /* Área de aceite */
        .ob-aceite-area {
            padding: 24px 32px;
            border-top: 1px solid #1a1a1a;
        }
        .ob-alert-erro {
            background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
            color: #f87171; padding: 12px 16px; border-radius: 8px;
            margin-bottom: 16px; font-size: 0.88rem;
        }
        .ob-checkbox-label {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 16px;
            background: rgba(124,58,237,0.05);
            border: 1px solid rgba(124,58,237,0.2);
            border-radius: 10px;
            cursor: pointer; font-size: 0.88rem; color: #ccc;
            margin-bottom: 20px; transition: border-color 0.2s;
        }
        .ob-checkbox-label:has(input:checked) { border-color: rgba(124,58,237,0.5); background: rgba(124,58,237,0.08); }
        .ob-checkbox-label input { margin-top: 2px; flex-shrink: 0; accent-color: #7c3aed; width: 16px; height: 16px; cursor: pointer; }
        .ob-btn-aceitar {
            width: 100%; padding: 15px;
            background: linear-gradient(135deg, #7c3aed, #9333ea);
            color: #fff; border: none; border-radius: 10px;
            font-size: 1rem; font-weight: 700; cursor: pointer;
            letter-spacing: 0.5px; transition: opacity 0.2s, transform 0.1s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .ob-btn-aceitar:hover { opacity: 0.9; }
        .ob-btn-aceitar:active { transform: scale(0.99); }
        .ob-btn-aceitar:disabled { opacity: 0.4; cursor: not-allowed; }

        /* Nota rodapé */
        .ob-nota {
            margin-top: 20px; text-align: center;
            font-size: 0.75rem; color: #444;
        }
        .native-shell .ob-checkbox-label { display: flex; }
        .native-shell .ob-checkbox-label input { width: 16px; padding: 0; }
        .native-shell .ob-btn-aceitar { background: linear-gradient(135deg, #7c3aed, #9333ea); color: #fff; }
        .ob-step-inner { text-decoration: none; }
        .ob-step-inner:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }
        @media(max-width:600px) { .ob-wrap { padding: 24px 0 40px; } .ob-card-header { padding: 18px; flex-wrap: wrap; } .ob-aceite-area { padding: 18px; } .ob-step-line { width: 24px; } .ob-badge-passo { margin-left: 0; } }